/* ============================================================================
   The Financial Sciences Company — assets/tfsc-ds.css
   Design system v2 layer (2026-10-06). Theo approved the homepage v2 look and
   asked for the same elements across the whole site. This sheet loads LAST on
   every page (after the family sheet or the legacy inline styles) and maps the
   shared class names of all three families — legacy (tfsc-*), landing (tfsl-*)
   and article (tfsca-*) — onto the v2 recipe used by tfsc-home.css:

     buttons    48px, radius 10, Manrope 15/700, sentence case, arrow slides
     cards      white, 1px line, radius 16, soft shadow; hover lifts 4px with a
                brass hairline across the top; icon well (paper disc -> Ink)
     kickers    JetBrains Mono 11.5px .2em with a 22px brass hairline before
     dark bands ink gradient + radial brass glow (the homepage's depth device)
     links      arrow glyphs that slide on hover; 44px tap targets
     motion     reveals, lifts and slides, all off under prefers-reduced-motion

   Brass stays under the 8% ceiling: hairlines, kickers, one filled button
   per view. Nothing here changes copy or structure.
   ========================================================================== */

:root{
  --ds-ink:#0E1626; --ds-brass:#B08D57; --ds-brass-dk:#A07E4B; --ds-bone:#FAF8F4; --ds-paper:#F0EEE9; --ds-steel:#6B7280;
  --ds-ink-soft:#4A5468; --ds-line:rgba(14,22,38,.10); --ds-line-strong:rgba(14,22,38,.22);
  --ds-r:16px; --ds-r-sm:10px; --ds-ease:cubic-bezier(.22,.61,.36,1);
  --ds-sh-1:0 1px 2px rgba(14,22,38,.05), 0 2px 8px rgba(14,22,38,.04);
  --ds-sh-2:0 6px 14px -6px rgba(14,22,38,.16), 0 18px 40px -18px rgba(14,22,38,.22);
  --ds-grad-ink:linear-gradient(135deg,#08101D 0%,#0E1626 54%,#173156 100%);
  --ds-glow:radial-gradient(circle at 80% 20%,rgba(176,141,87,.16),rgba(176,141,87,0) 62%);
}

/* ------------------------------------------------------ sticky header ---- */
/* Legacy (Astra) pages set body{overflow-x:hidden}, which makes <body> a scroll container and quietly disables
   position:sticky on the header (Theo, 2026-10-06: "the white header with the menus moved"). html already clips
   sideways overflow; the body must stay a normal block so the header sticks to the viewport. */
body:not(.tfh-lock){overflow-x:clip !important; overflow-y:visible !important;}
html{overflow-x:clip;}
.tfh{position:sticky !important; top:0 !important;}

/* ------------------------------------------------------------- buttons ---- */
/* legacy .tfsc-button was 12px mono caps in a 999px pill; landing .tfsl-btn a 15px pill; both -> v2 */
.tfsc-button,a.tfsc-button,.tfsl-btn,a.tfsl-btn,.tfsca-talk-btn,.tfsc-drawer-meet{
  display:inline-flex !important; align-items:center !important; justify-content:center !important; gap:10px !important;
  min-height:48px !important; height:auto !important; padding:0 22px !important; border-radius:10px !important;
  font-family:'Manrope','Manrope Fallback',Arial,sans-serif !important; font-size:15px !important; font-weight:700 !important;
  letter-spacing:.005em !important; text-transform:none !important; line-height:1.2 !important; text-decoration:none !important;
  box-shadow:inset 0 1px 0 rgba(255,255,255,.28), 0 1px 2px rgba(14,22,38,.14), 0 10px 22px -12px rgba(14,22,38,.6) !important;
  transition:transform .18s var(--ds-ease), box-shadow .18s var(--ds-ease), background-color .18s var(--ds-ease), color .18s var(--ds-ease) !important;
}
.tfsc-button,a.tfsc-button,.tfsc-button:not(.tfsc-button--secondary){background:var(--ds-brass) !important; color:var(--ds-ink) !important; border:1px solid rgba(14,22,38,.12) !important;}
.tfsca-brief-btn,.tfsca-note-btn{display:inline-flex !important; align-items:center; justify-content:center; min-height:48px !important; padding:0 22px !important; border-radius:10px !important; background:var(--ds-ink) !important; color:var(--ds-bone) !important; font-family:'Manrope','Manrope Fallback',Arial,sans-serif !important; font-size:15px !important; font-weight:700 !important; letter-spacing:0 !important; text-transform:none !important; text-decoration:none !important; border:0 !important;}
/* forms on one token (SureForms, the qualifier, the newsletter) */
.srfm-form .srfm-submit-button,.srfm-form-container .srfm-button,.srfm-submit-button{border-radius:10px !important; font-family:'Manrope','Manrope Fallback',Arial,sans-serif !important; font-size:15px !important; font-weight:700 !important; text-transform:none !important; letter-spacing:0 !important; min-height:48px !important; padding:0 24px !important;}
.srfm-form input,.srfm-form textarea,.srfm-form .ts-control,#tfsc-contact input,.tfsc-mw-card input,.tfsc-newsletter-form input,.tfsca-newsletter input{border-radius:10px !important; font-family:'Manrope','Manrope Fallback',Arial,sans-serif !important; font-size:16px !important; min-height:48px;}
#tfsc-contact .tfsc-mw-grid{align-items:end;}
.tfsc-mw-step{font:500 11.5px/1.5 'JetBrains Mono','JetBrains Mono Fallback',Consolas,monospace !important; letter-spacing:.14em !important; text-transform:uppercase; color:var(--ds-brass) !important; display:inline-flex; align-items:center; gap:10px;}
.tfsc-mw-step::before{content:''; width:22px; height:1px; background:var(--ds-brass);}
.tfsc-mw-back,button.tfsc-mw-back{min-height:44px; padding:0 12px;}
/* Astra's container width was clipping the newsletter popup scrim to 1200px */
.tfsc-newsletter-popup{max-width:none !important; width:auto !important; margin:0 !important;}
.tfsc-newsletter-popup__dialog{border-radius:var(--ds-r);}
/* /important-information/ (legacy, no section shell): bone ground and a sane heading scale */
body.page-id-2683{background:var(--ds-bone) !important;}
body.page-id-2683 .entry-content{padding:32px 16px;}
body.page-id-2683 .entry-content h2{font-size:clamp(28px,2.4vw,36px) !important; color:var(--ds-ink) !important;}
.tfsc-button:hover,a.tfsc-button:hover,.tfsc-button:focus-visible{background:var(--ds-brass-dk) !important; color:var(--ds-ink) !important; transform:translateY(-1px) !important;
  box-shadow:inset 0 1px 0 rgba(255,255,255,.24), 0 2px 4px rgba(14,22,38,.16), 0 14px 26px -12px rgba(14,22,38,.65) !important;}
.tfsc-button--secondary,a.tfsc-button--secondary{background:transparent !important; color:var(--ds-ink) !important; border:1px solid var(--ds-line-strong) !important; box-shadow:none !important;}
.tfsc-button--secondary:hover,a.tfsc-button--secondary:hover{background:rgba(14,22,38,.04) !important; color:var(--ds-ink) !important; border-color:var(--ds-ink) !important; transform:translateY(-1px) !important; box-shadow:none !important;}
.tfsc-section--dark .tfsc-button--secondary,.tfsc-section--dark a.tfsc-button--secondary,.tfsc-cta-band .tfsc-button--secondary{color:var(--ds-bone) !important; border-color:rgba(250,248,244,.35) !important;}
.tfsc-section--dark .tfsc-button--secondary:hover,.tfsc-section--dark a.tfsc-button--secondary:hover{background:rgba(250,248,244,.08) !important; border-color:var(--ds-bone) !important; color:var(--ds-bone) !important;}
.tfsl-btn,a.tfsl-btn{background:var(--ds-ink) !important; color:var(--ds-bone) !important; border:1px solid var(--ds-ink) !important;}
.tfsl-btn:hover,a.tfsl-btn:hover{background:#1C2840 !important; color:var(--ds-bone) !important; transform:translateY(-1px) !important;}
.tfsl-btn--ghost,a.tfsl-btn--ghost{background:transparent !important; color:var(--ds-ink) !important; border:1px solid var(--ds-line-strong) !important; box-shadow:none !important;}
.tfsl-btn--ghost:hover,a.tfsl-btn--ghost:hover{background:rgba(14,22,38,.04) !important; border-color:var(--ds-ink) !important; color:var(--ds-ink) !important;}
.tfsca-talk-btn{background:var(--ds-bone) !important; color:var(--ds-ink) !important; border:1px solid rgba(14,22,38,.12) !important; width:auto !important;}
.tfsca-talk-btn:hover{background:#fff !important; color:var(--ds-ink) !important; transform:translateY(-1px) !important;}
.tfsc-button:focus-visible,.tfsl-btn:focus-visible,.tfsca-talk-btn:focus-visible{outline:2px solid var(--ds-brass) !important; outline-offset:3px !important;}
.tfsc-section--dark .tfsc-button:focus-visible{outline-color:var(--ds-bone) !important;}
/* the arrow glyph inside a button slides on hover (added by the post-processor as .tfsc-ico) */
.tfsc-button .tfsc-ico,.tfsl-btn .tfsc-ico,.tfsca-talk-btn .tfsca-arr{transition:transform .18s var(--ds-ease);}
.tfsc-button:hover .tfsc-ico,.tfsl-btn:hover .tfsc-ico,.tfsca-talk-btn:hover .tfsca-arr{transform:translateX(3px);}
/* mobile drawer's wide button keeps its pill but takes the type */
.tfh .tfh-drawer-foot .tfh-cta--wide{border-radius:10px;}

/* --------------------------------------------------------------- cards ---- */
.tfsc-link-card,.tfsc-hub-card,.tfsc-card:not(.tfsca-card):not(.tfsc-card--dark),.tfsc-step,.tfsc-note,.tfsl-card,.tfsca-read-card,.tfsca-ix-card,.tfsc-mw-card{
  position:relative; background:#fff !important; border:1px solid var(--ds-line) !important; border-radius:var(--ds-r) !important;
  box-shadow:var(--ds-sh-1) !important; overflow:clip; isolation:isolate;
  transition:transform .22s var(--ds-ease), box-shadow .22s var(--ds-ease), border-color .22s var(--ds-ease) !important;
}
.tfsc-link-card::after,.tfsc-hub-card::after,.tfsc-card:not(.tfsca-card):not(.tfsc-card--dark)::after,.tfsc-step::after,.tfsc-note::after,.tfsl-card::after,.tfsca-read-card::after,.tfsca-ix-card::after{
  content:""; position:absolute; left:0; right:0; top:0; height:2px; background:var(--ds-brass); transform:scaleX(0); transform-origin:left;
  transition:transform .28s var(--ds-ease); pointer-events:none;}
.tfsc-link-card:hover,.tfsc-hub-card:hover,.tfsc-card:not(.tfsca-card):not(.tfsc-card--dark):hover,.tfsc-step:hover,.tfsc-note:hover,.tfsl-card:hover,.tfsca-read-card:hover,.tfsca-ix-card:hover{
  transform:translateY(-4px) !important; box-shadow:var(--ds-sh-2) !important; border-color:rgba(14,22,38,.16) !important;}
.tfsc-link-card:hover::after,.tfsc-hub-card:hover::after,.tfsc-card:hover::after,.tfsc-step:hover::after,.tfsc-note:hover::after,.tfsl-card:hover::after,.tfsca-read-card:hover::after,.tfsca-ix-card:hover::after{transform:scaleX(1);}
/* dark statement card keeps its ink gradient (was forced white -> white-on-white copy) */
.tfsc-card--dark{background:var(--ds-grad-ink) !important; border:1px solid rgba(255,255,255,.08) !important; border-radius:var(--ds-r) !important; color:var(--ds-bone);}
.tfsc-card--dark .tfsc-card__title,.tfsc-card--dark h2,.tfsc-card--dark h3{color:var(--ds-bone) !important;}
.tfsc-card--dark p{color:rgba(250,248,244,.84) !important;}
.tfsc-card--dark .tfsc-card__eyebrow{color:rgba(250,248,244,.72) !important;}
.tfsc-card--dark .tfsc-well{background:rgba(255,255,255,.12); color:var(--ds-bone);}
.tfsc-link-card__eyebrow,.tfsc-card__eyebrow,.tfsc-card .tfsc-card__eyebrow,.tfsca-ix-kicker,.tfsca-rc-tag{font-family:'JetBrains Mono','JetBrains Mono Fallback',Consolas,monospace !important; font-size:11px !important;
  font-weight:500 !important; letter-spacing:.16em !important; text-transform:uppercase !important; color:var(--ds-steel) !important; margin:0 0 10px !important; line-height:1.4 !important;}
.tfsc-card .tfsc-card__title,.tfsc-card h2.tfsc-card__title{font-size:clamp(22px,2vw,28px) !important; line-height:1.2 !important;}
/* the landing "why it's complex" cards keep their numerals; everything else may carry an icon well */
.tfsc-well{width:48px; height:48px; border-radius:50%; display:grid; place-items:center; background:var(--ds-paper); color:var(--ds-ink); margin:0 0 10px;
  flex:none; transition:background-color .22s var(--ds-ease), color .22s var(--ds-ease), transform .22s var(--ds-ease);}
.tfsc-well .tfsc-ico{width:24px; height:24px;}
.tfsc-link-card:hover .tfsc-well,.tfsc-hub-card:hover .tfsc-well,.tfsc-card:hover .tfsc-well,.tfsl-card:hover .tfsc-well{background:var(--ds-ink); color:var(--ds-bone); transform:scale(1.04);}
.tfsc-ico{display:inline-block; width:1em; height:1em; vertical-align:-.15em; fill:none; stroke:currentColor; stroke-width:1.5; stroke-linecap:round; stroke-linejoin:round;}

/* -------------------------------------------------------------- kickers --- */
.tfsc-kicker,p.tfsc-kicker,.tfsl .tfsl-kicker,.tfsl p.tfsl-kicker,.tfsca-kicker,.tfsca-rail-kicker{
  display:inline-flex !important; align-items:center; gap:10px; font-family:'JetBrains Mono','JetBrains Mono Fallback',Consolas,monospace !important;
  font-size:11.5px !important; font-weight:500 !important; letter-spacing:.2em !important; text-transform:uppercase !important; line-height:1.5 !important;}
.tfsc-kicker::before,p.tfsc-kicker::before,.tfsl .tfsl-kicker::before,.tfsca-kicker::before{content:""; width:22px; height:1px; background:currentColor; opacity:.8; flex:none; border-radius:0; margin:0;}
.tfsc-kicker,p.tfsc-kicker{color:var(--ds-brass) !important;}
.tfsc-section--dark .tfsc-kicker,.tfsc-section--dark p.tfsc-kicker{color:var(--ds-brass) !important; font-size:11.5px !important; letter-spacing:.2em !important;}
.tfsl .tfsl-kicker,.tfsl p.tfsl-kicker,.tfsca-kicker{color:var(--ds-steel) !important;}

/* ----------------------------------------------------------- dark bands --- */
.tfsc-section--dark,.tfsc-cta-band,.tfsl-stats,.tfsca-talk,.tfsca-cta-end{background:var(--ds-grad-ink) !important; position:relative;}
.tfsl-stats,.tfsca-talk,.tfsca-cta-end{overflow:hidden;}
.tfsl-stats::before,.tfsca-cta-end::before{content:""; position:absolute; inset:-40% -10% auto auto; width:360px; height:360px; pointer-events:none;
  background:var(--ds-glow); z-index:0;}
.tfsl-stats > *,.tfsca-cta-end > *{position:relative; z-index:1;}
.tfsl-stats{border-radius:var(--ds-r) !important;}

/* ---------------------------------------------------------- link arrows --- */
.tfsc-card-link,.tfsl-more,.tfsl-related li a,.tfhp-door li a{transition:color .18s var(--ds-ease), padding-left .18s var(--ds-ease);}
.tfsc-card-link::after,.tfsl-card a.tfsl-more::after,.tfsl-related li a::after{display:inline-block; transition:transform .18s var(--ds-ease);}
.tfsc-card-link:hover::after,.tfsl-card a.tfsl-more:hover::after,.tfsl-related li a:hover::after{transform:translateX(3px);}
.tfsc-card-link{min-height:44px; display:inline-flex; align-items:center; gap:8px;}

/* ------------------------------------------------------- hero (legacy) ---- */
/* legacy hero: the service pills take the chip look from the homepage; the kicker reads as a tagline, not a title */
.tfsc-service-pill{border-radius:12px !important; background:rgba(250,248,244,.05) !important; border:1px solid rgba(250,248,244,.16) !important;
  transition:background-color .18s var(--ds-ease), border-color .18s var(--ds-ease), transform .18s var(--ds-ease) !important;}
.tfsc-service-pill:hover{background:rgba(250,248,244,.1) !important; border-color:rgba(176,141,87,.6) !important; transform:translateY(-2px) !important;}

/* ------------------------------------------------------------- reveals ---- */
html.tfsc-js .tfsc-reveal{opacity:0; transform:translateY(16px); transition:opacity .7s var(--ds-ease), transform .7s var(--ds-ease);}
html.tfsc-js .tfsc-reveal.is-in{opacity:1; transform:none;}
html.tfsc-js .tfsc-link-grid > .tfsc-reveal:nth-child(2),html.tfsc-js .tfsl-cards > .tfsc-reveal:nth-child(2){transition-delay:.08s;}
html.tfsc-js .tfsc-link-grid > .tfsc-reveal:nth-child(3),html.tfsc-js .tfsl-cards > .tfsc-reveal:nth-child(3){transition-delay:.16s;}
html.tfsc-js .tfsc-link-grid > .tfsc-reveal:nth-child(n+4){transition-delay:.1s;}

/* ------------------------------------------------------- reduced motion --- */
@media (prefers-reduced-motion:reduce){
  html.tfsc-js .tfsc-reveal{opacity:1; transform:none; transition:none;}
  .tfsc-button,.tfsl-btn,.tfsca-talk-btn,.tfsc-link-card,.tfsc-hub-card,.tfsl-card,.tfsca-read-card,.tfsca-ix-card,.tfsc-well,.tfsc-service-pill,
  .tfsc-card-link,.tfsl-more,.tfsc-card-link::after,.tfsl-card a.tfsl-more::after{transition:none !important;}
  .tfsc-button:hover,.tfsl-btn:hover,.tfsca-talk-btn:hover,.tfsc-link-card:hover,.tfsc-hub-card:hover,.tfsl-card:hover,.tfsca-read-card:hover,.tfsca-ix-card:hover,.tfsc-service-pill:hover{transform:none !important;}
}

/* --------------------------------------------------------------- phone ---- */
@media (max-width:600px){
  .tfsc-button,a.tfsc-button,.tfsl-btn,a.tfsl-btn{width:100%; max-width:100%;}
  .tfsc-actions,.tfsl-actions{display:flex; flex-direction:column; gap:10px;}
}

/* dark card eyebrow and copy: must come after the generic eyebrow rule above */
.tfsc-card.tfsc-card--dark .tfsc-card__eyebrow,.tfsc-card--dark p.tfsc-card__eyebrow{color:rgba(250,248,244,.72) !important;}
.tfsc-card.tfsc-card--dark p:not(.tfsc-card__eyebrow),.tfsc-card--dark li{color:rgba(250,248,244,.84) !important;}
.tfsc-card.tfsc-card--dark .tfsc-card__title{color:var(--ds-bone) !important;}