/* ============================================================
   TALANTA — shared design tokens & core components
   Single source of truth consumed by every page.
   Load order: bootstrap.min.css → talanta.css → page <style>.
   ============================================================ */
:root{
  /* color */
  --tal-navy:      #0C2340;   /* TALANTA Navy — HEX per brand guidelines */
  --tal-navy-soft: #14335C;   /* derived tint for layering on navy */
  --tal-navy-deep: #081729;   /* derived shade for footers */
  --tal-gold:      #C8A95B;   /* TALANTA Gold — HEX per brand guidelines */
  --tal-gold-btn:  #BC9C4C;   /* button fill: navy label 6.01:1 (AA) */
  --tal-gold-ink:  #826C30;   /* text gold: AA (4.6:1+) on white and light tints */
  --tal-gold-dim:  rgba(200,169,91,.35);
  --tal-blue-light: #8FB3E0; /* derived navy tint for the "3" of 3A on dark (7.3:1 on navy) */
  /* palette is navy + gold only — teal retired Oct 2026.
     On light surfaces: --tal-gold for lines/borders (decorative), --tal-gold-ink for accent text, navy for focus. */
  --tal-charcoal:  #444444;
  --tal-gray:      #F5F5F5;

  /* type ramp */
  --font-latin: 'Montserrat', -apple-system, sans-serif;
  --fs-h2:      clamp(1.7rem, 3.6vw, 2.6rem);
  --fs-h3:      1.25rem;
  --fs-card:    1.15rem;   /* card titles over imagery */
  --fs-eyebrow: .72rem;
  --fs-label:   .78rem;
  --fs-small:   .8rem;

  /* tracking — four tiers only */
  --track-nav:     .06em;
  --track-btn:     .12em;
  --track-label:   .2em;
  --track-eyebrow: .32em;

  /* motion */
  --tal-dur:  .8s;
  --tal-ease: cubic-bezier(.2,.7,.3,1);

  /* bootstrap theme */
  --bs-body-font-family: var(--font-latin);
  --bs-body-color: var(--tal-charcoal);
  --bs-body-line-height: 1.7;
  --bs-border-radius: 2px;   /* near-square: institutional, not app-like */
}
.bg-tal-gray{ background-color: var(--tal-gray); }

/* Scroll lock without the ~15px layout jolt on release. Chromium reserves no
   scrollbar gutter for overflow:hidden (even with scrollbar-gutter:stable), so
   hiding overflow during the preloader removed the scrollbar and shifted the
   layout when it came back. Instead: keep the scrollbar rendered during the
   lock (overflow-y:scroll) and clamp body to the viewport height — nothing
   overflows, so the page cannot scroll, and the width never changes. */
html{ scrollbar-gutter: stable; }
html:has(body.is-loading){ overflow-y: scroll; }
body.is-loading{ overflow: hidden; height: 100vh; }
.no-js body.is-loading{ overflow: auto; height: auto; }   /* no JS ever removes the class */

/* focus — navy on light surfaces, gold on navy; white on gold buttons so the ring never vanishes */
:focus-visible{ outline: 2px solid var(--tal-navy); outline-offset: 3px; }
.on-dark :focus-visible, .page-hero :focus-visible, .hero-carousel :focus-visible, .tal-cta-band :focus-visible, .stats-band :focus-visible, .tal-outcomes :focus-visible{ outline-color: var(--tal-gold); }
.btn-tal-gold:focus-visible{ outline: 2px solid #fff; outline-offset: 3px; }

/* ---------------- eyebrow ---------------- */
.eyebrow{
  font-family: var(--font-latin);
  font-weight: 500;
  font-size: var(--fs-eyebrow);
  letter-spacing: var(--track-eyebrow);
  text-transform: uppercase;
  color: var(--tal-gold-ink);
}
.on-dark .eyebrow{ color: var(--tal-gold); }

/* ---------------- buttons — one spec, 4px grid ---------------- */
.btn{
  font-weight: 600;
  font-size: .85rem;
  letter-spacing: var(--track-btn);
  text-transform: uppercase;
  padding: 1rem 2rem;
}
.btn-sm{ padding: .5rem 1.25rem; font-size: .72rem; }
.btn-tal-gold{
  --bs-btn-bg: var(--tal-gold-btn); --bs-btn-color: var(--tal-navy); --bs-btn-border-color: var(--tal-gold-btn);
  --bs-btn-hover-bg: #fff; --bs-btn-hover-color: var(--tal-navy); --bs-btn-hover-border-color: #fff;
  --bs-btn-active-bg: var(--tal-gold-btn); --bs-btn-active-color: var(--tal-navy); --bs-btn-active-border-color: var(--tal-gold-btn);
}
/* gold button on light sections: navy hover/focus (white hover would vanish on #F5F5F5) */
.btn-tal-gold-strong{
  --bs-btn-hover-bg: var(--tal-navy); --bs-btn-hover-color: #fff; --bs-btn-hover-border-color: var(--tal-navy);
  --bs-btn-active-bg: #96741F; --bs-btn-active-color: #fff; --bs-btn-active-border-color: #96741F;
  box-shadow: 0 2px 6px rgba(12,35,64,.18);
}
.btn-tal-gold-strong:focus-visible{ outline: 2px solid var(--tal-navy); outline-offset: 3px; }
.btn-tal-outline{
  --bs-btn-bg: transparent; --bs-btn-color: #fff; --bs-btn-border-color: rgba(255,255,255,.5);
  --bs-btn-hover-bg: transparent; --bs-btn-hover-color: var(--tal-gold); --bs-btn-hover-border-color: var(--tal-gold);
  --bs-btn-active-bg: transparent; --bs-btn-active-color: var(--tal-gold); --bs-btn-active-border-color: var(--tal-gold);
}

/* ---------------- contact form on navy ---------------- */
.tal-form .form-label{
  color: rgba(255,255,255,.85);
  font-size: var(--fs-label); font-weight: 600;
  letter-spacing: var(--track-btn); text-transform: uppercase;
  margin-bottom: .5rem;
}
.tal-form .form-control{
  background: rgba(255,255,255,.07);
  border: 1px solid rgba(255,255,255,.28);
  color: #fff;
  border-radius: var(--bs-border-radius);
  padding: .75rem 1rem;
}
.tal-form .form-control:focus{
  background: rgba(255,255,255,.11);
  border-color: var(--tal-gold);
  box-shadow: 0 0 0 .2rem rgba(200,169,91,.25);
  color: #fff;
}
.cta-alt{ color: rgba(255,255,255,.65); font-size: .85rem; }
.cta-alt a{ color: var(--tal-gold); text-decoration: underline; text-underline-offset: 3px; }

/* ---------------- reveal on scroll — one motion spec ---------------- */
.reveal{ opacity: 0; transform: translateY(22px); transition: opacity var(--tal-dur) ease, transform var(--tal-dur) var(--tal-ease); }
.reveal.in{ opacity: 1; transform: none; }
.d1{ transition-delay: .12s } .d2{ transition-delay: .24s } .d3{ transition-delay: .36s }
@media (prefers-reduced-motion: reduce){ .reveal{ opacity: 1; transform: none; transition: none; } }
.no-js .reveal{ opacity: 1 !important; transform: none !important; }

/* ============================================================
   SHARED PAGE CHROME — nav, page hero, CTA band, footer
   (used by interior pages; homepage keeps identical local copies)
   ============================================================ */
.site-nav{
  position: fixed; inset-inline: 0; top: 0; z-index: 100;
  background: linear-gradient(rgba(8,23,41,.55), transparent);
  transition: background .35s ease, box-shadow .35s ease;
  padding-block: 1rem;
}
.site-nav.scrolled, .site-nav.solid{ background: var(--tal-navy); box-shadow: 0 8px 30px rgba(8,23,41,.35); }
.site-nav .brand-word{
  display: inline-flex; align-items: center; gap: .7rem;
  font-weight: 800; font-size: 1.1rem; letter-spacing: var(--track-eyebrow);
  color: #fff; text-decoration: none;
}
.site-nav .brand-word .brand-text{ display: inline-block; }
/* the TALANTA T-badge lockup (Oct 2026 profile) replaces the mark + text wordmark in the nav and footer */
.brand-lockup{ display: block; height: 44px; width: auto; }
@media (max-width: 575.98px){ .brand-lockup{ height: 38px; } }
.foot-lockup{ display: block; width: min(240px, 100%); height: auto; margin-bottom: 1rem; }
.site-nav .brand-word .a{ color: var(--tal-gold); }
.site-nav .brand-sub{ display: block; font-size: .48rem; font-weight: 500; letter-spacing: var(--track-eyebrow); color: rgba(255,255,255,.65); text-transform: uppercase; }
.site-nav .nav-a{ font-size: var(--fs-small); font-weight: 500; letter-spacing: var(--track-nav); color: rgba(255,255,255,.85); text-decoration: none; transition: color .2s; }
.site-nav .nav-a:hover, .site-nav .nav-a[aria-current="page"]{ color: var(--tal-gold); }
.nav-toggle{
  background: transparent; border: 1px solid rgba(255,255,255,.4); color: #fff;
  min-width: 44px; min-height: 44px; border-radius: var(--bs-border-radius); line-height: 0;
  display: inline-flex; align-items: center; justify-content: center;
  transition: border-color .2s, color .2s;
}
.nav-toggle:hover{ border-color: var(--tal-gold); color: var(--tal-gold); }
@media (max-width: 767.98px){
  .nav-links{ flex-basis: 100%; padding-block: 1rem .5rem; }
  .nav-links .nav-a{ display: block; padding: .5rem 0; }
  .nav-links .nav-cta-btn{ margin-top: .75rem; display: inline-block; }
}

.page-hero{
  background: radial-gradient(900px 400px at 85% -10%, rgba(200,169,91,.14), transparent 60%), var(--tal-navy);
  color: #fff;
  padding-block: clamp(8rem, 16vw, 10.5rem) clamp(3.5rem, 7vw, 5rem);
}
.page-hero .eyebrow{ color: var(--tal-gold); display: block; margin-bottom: 1rem; }
.page-hero h1{ color: #fff; font-weight: 800; letter-spacing: -.01em; line-height: 1.12; font-size: clamp(2rem, 4.6vw, 3.2rem); max-width: 22ch; margin-bottom: 1rem; }
.page-hero .lede{ color: rgba(255,255,255,.82); max-width: 58ch; font-size: clamp(1rem, 1.3vw, 1.12rem); margin: 0; }

.tal-h{ font-weight: 800; color: var(--tal-navy); line-height: 1.12; letter-spacing: -.01em; }
.tal-section-pad{ padding-block: clamp(4rem, 9vw, 7.5rem); }
.tal-section-head{ max-width: 720px; margin-bottom: clamp(2.5rem, 6vw, 4rem); }
.tal-section-head .eyebrow{ display: block; margin-bottom: 1rem; }
.tal-section-head h2{ font-size: var(--fs-h2); margin-bottom: 1rem; }

.tal-cta-band{ background: var(--tal-navy); color: #fff; }
.tal-cta-band .inner{ padding-block: clamp(3.5rem, 7vw, 5rem); }
.tal-cta-band h2{ color: #fff; font-size: var(--fs-h2); max-width: 24ch; }
.tal-cta-band p{ color: rgba(255,255,255,.8); max-width: 54ch; }

.site-footer{ background: var(--tal-navy-deep); color: rgba(255,255,255,.65); padding-block: clamp(3rem,6vw,4.5rem) 2rem; font-size: var(--fs-small); }
.site-footer a{ color: rgba(255,255,255,.75); text-decoration: none; }
.site-footer a:hover{ color: var(--tal-gold); }
.foot-word{ display: block; font-weight: 800; font-size: 1.2rem; letter-spacing: var(--track-eyebrow); color: #fff; }
.foot-word .a{ color: var(--tal-gold); }
.foot-desc{ display: block; font-size: .5rem; font-weight: 500; letter-spacing: var(--track-eyebrow); text-transform: uppercase; color: rgba(255,255,255,.65); margin-top: .25rem; }
.foot-method{ display: block; margin-top: 1rem; font-size: .72rem; font-weight: 600; letter-spacing: var(--track-label); text-transform: uppercase; color: var(--tal-gold); }
.foot-tagline{ margin: .5rem 0 0; font-size: .88rem; }
.foot-h{ font-size: .72rem; font-weight: 600; letter-spacing: var(--track-label); text-transform: uppercase; color: var(--tal-gold); margin-bottom: 1rem; }
.foot-link{ display: block; padding-block: .25rem; margin-bottom: .25rem; }
.foot-text{ display: block; padding-block: .25rem; }
.foot-base{ border-top: 1px solid rgba(255,255,255,.12); padding-top: 1.5rem; }

/* ============================================================
   CONTENT COMPONENTS — numbered tiles, step chains, value chips
   (shared by homepage, About, Services, Approach)
   ============================================================ */
/* numbered tile: "01 / Title / optional text" — light on white, dark variant on navy */
.tal-tile{
  height: 100%; padding: 1.5rem 1.4rem;
  background: #fff; border: 1px solid rgba(12,35,64,.14); border-top: 3px solid var(--tal-gold);
  border-radius: var(--bs-border-radius);
  box-shadow: 0 6px 18px rgba(12,35,64,.06);
}
.tal-tile .t-num{ display: block; font-weight: 800; font-size: 1.4rem; color: var(--tal-gold-ink); line-height: 1; margin-bottom: .75rem; }
.tal-tile h3{ font-size: var(--fs-h3); color: var(--tal-navy); margin: 0; }
.tal-tile p{ font-size: .92rem; margin: .6rem 0 0; }
.tal-tile.dark{ background: var(--tal-navy-soft); border-color: var(--tal-navy-soft); border-top-color: var(--tal-gold); box-shadow: none; }
.tal-tile.dark .t-num{ color: var(--tal-gold); }
.tal-tile.dark h3{ color: #fff; }
.tal-tile.dark p{ color: rgba(255,255,255,.78); }
.tal-tile ul{ margin: .75rem 0 0; padding-inline-start: 1.1rem; font-size: .92rem; }
.tal-tile li{ margin-bottom: .3rem; }
.tal-tile li::marker{ color: var(--tal-gold-ink); }
.tal-tile.dark li::marker{ color: var(--tal-gold); }

/* step chain: numbered boxes joined by a line (lifecycle, journey) — navy + gold on light, gold on navy */
.tal-steps{ list-style: none; margin: 0; padding: 0; display: grid; gap: 1rem; grid-template-columns: repeat(auto-fit, minmax(130px, 1fr)); position: relative; }
.tal-steps::before{ content: ""; position: absolute; top: 1.35rem; inset-inline: 2rem; height: 2px; background: var(--tal-gold-dim); }
.tal-steps li{ position: relative; text-align: center; }
.tal-steps .s-num{
  display: inline-flex; align-items: center; justify-content: center; position: relative;
  width: 2.7rem; height: 2.7rem; border-radius: 50%; font-weight: 800; font-size: .95rem;
  background: var(--tal-navy); color: #fff; border: 3px solid #fff; box-shadow: 0 0 0 2px var(--tal-gold);
}
.tal-steps li:nth-child(even) .s-num{ background: var(--tal-gold-btn); color: var(--tal-navy); }
.tal-steps .s-label{ display: block; margin-top: .75rem; font-size: var(--fs-label); font-weight: 600; letter-spacing: var(--track-label); text-transform: uppercase; color: var(--tal-navy); }
.tal-steps .s-text{ display: block; margin-top: .4rem; font-size: .85rem; color: var(--tal-charcoal); }
.on-dark .tal-steps .s-label{ color: #fff; }
.on-dark .tal-steps .s-text{ color: rgba(255,255,255,.75); }
.on-dark .tal-steps .s-num{ border-color: var(--tal-navy); box-shadow: 0 0 0 2px var(--tal-gold); }
.on-dark .tal-steps li:nth-child(even) .s-num{ background: var(--tal-gold); color: var(--tal-navy); }
.on-dark .tal-steps::before{ background: var(--tal-gold-dim); }
@media (max-width: 575.98px){ .tal-steps::before{ display: none; } }

/* value chips — short uppercase labels in a row */
.tal-chips{ list-style: none; margin: 0; padding: 0; display: flex; flex-wrap: wrap; gap: .75rem; }
.tal-chips li{
  padding: .7rem 1.1rem; border-inline-start: 3px solid var(--tal-gold); background: var(--tal-gray);
  font-size: var(--fs-label); font-weight: 600; letter-spacing: var(--track-label); text-transform: uppercase; color: var(--tal-navy);
}
.on-dark .tal-chips li{ background: rgba(255,255,255,.07); border-color: var(--tal-gold); color: #fff; }
.tal-chips li{ display: inline-flex; align-items: center; gap: .6rem; }
.tal-chips .ind-ic{ width: 1.75rem; height: 1.75rem; flex: none; fill: none; stroke: var(--tal-navy); stroke-width: 1.5; stroke-linecap: round; stroke-linejoin: round; }
.tal-chips .ind-num{ color: var(--tal-gold-ink); font-weight: 800; }
.on-dark .tal-chips .ind-ic{ stroke: var(--tal-gold); }
.on-dark .tal-chips .ind-num{ color: var(--tal-gold); }

/* numbered definition rows (differentiators) */
.tal-defs{ list-style: none; margin: 0; padding: 0; }
.tal-defs li{ display: grid; grid-template-columns: 3rem 1fr; gap: 1rem; padding-block: 1.1rem; border-bottom: 1px solid rgba(12,35,64,.12); }
.tal-defs li:last-child{ border-bottom: 0; }
.tal-defs .d-num{ display: inline-flex; align-items: center; justify-content: center; width: 2.6rem; height: 2.6rem; border-radius: 50%; background: var(--tal-navy); color: var(--tal-gold); font-weight: 800; font-size: .85rem; }
.tal-defs h3{ font-size: var(--fs-h3); color: var(--tal-navy); margin: .35rem 0 .25rem; }
.tal-defs p{ margin: 0; font-size: .95rem; }

/* trademark superscript */
.tm{ font-size: .55em; vertical-align: super; letter-spacing: 0; }

/* ============================================================
   LIGHT CHROME — white header, light footer and preloader so the
   T-badge lockup shows in its navy and bronze artwork colours
   ============================================================ */
:root{ --tal-gold-logo: #6E5A1F; }   /* gold from the logo artwork — 6:1 on white */
.site-nav, .site-nav.scrolled, .site-nav.solid{ background: #fff; box-shadow: 0 1px 0 rgba(12,35,64,.08); }
.site-nav.scrolled{ box-shadow: 0 8px 30px rgba(12,35,64,.12); }
.site-nav{ padding-block: .75rem; }
.brand-lockup{ height: 52px; }
@media (max-width: 575.98px){ .brand-lockup{ height: 42px; } }
.site-nav .nav-a{ color: var(--tal-navy); }
.site-nav .nav-a:hover, .site-nav .nav-a[aria-current="page"]{ color: var(--tal-gold-ink); }
.nav-toggle{ border-color: rgba(12,35,64,.3); color: var(--tal-navy); }
.nav-toggle:hover{ border-color: var(--tal-gold-ink); color: var(--tal-gold-ink); }
.site-nav .btn-tal-gold{ --bs-btn-hover-bg: var(--tal-navy); --bs-btn-hover-color: #fff; --bs-btn-hover-border-color: var(--tal-navy); }
.site-nav .btn-tal-gold:focus-visible{ outline-color: var(--tal-navy); }
.site-footer{ background: var(--tal-gray); color: var(--tal-charcoal); border-top: 3px solid var(--tal-gold); }
.site-footer a{ color: var(--tal-navy); }
.site-footer a:hover{ color: var(--tal-gold-ink); }
.site-footer .foot-h{ color: var(--tal-gold-ink); }
.site-footer .foot-base{ border-top-color: rgba(12,35,64,.12); }
.foot-lockup{ width: min(280px, 100%); }
.preloader{ background: #fff; }
.pl-bar{ background: rgba(12,35,64,.1); }
.pl-bar span{ background: var(--tal-gold); }

/* ============================================================
   3A™ text mark — "3" brand blue, "A" brand gold
   light surfaces: navy 3 (15.8:1) + text gold A (5.1:1)
   dark surfaces:  light-blue 3 (7.3:1) + gold A (7.0:1)
   ============================================================ */
.mark-3a{ white-space: nowrap; }
.mark-3a .m3{ color: var(--tal-navy); }
.mark-3a .ma{ color: var(--tal-gold-ink); }
.on-dark .mark-3a .m3, .page-hero .mark-3a .m3, .hero-carousel .mark-3a .m3{ color: var(--tal-blue-light); }
.on-dark .mark-3a .ma, .page-hero .mark-3a .ma, .hero-carousel .mark-3a .ma{ color: var(--tal-gold); }

/* positioning line under Benefits Delivered (Oct 2026 profile) */
.benefits-note{ margin: 2rem auto 0; max-width: 62ch; text-align: center; font-style: italic; font-size: .95rem; color: rgba(255,255,255,.75); }

/* ============================================================
   OUTCOMES — "Benefits Delivered" as an editorial index
   Headline = the profile's positioning line; list = the ten
   benefits in profile order. Numbers are list positions, so they
   stay small (gold, 7:1 on navy) and the outcome names lead.
   Decor: fine grid + rising trajectory with nodes (profile motifs).
   ============================================================ */
.tal-outcomes{
  position: relative; isolation: isolate; overflow: hidden;
  color: #fff;
  background:
    radial-gradient(110% 90% at 0% 100%, var(--tal-navy-soft) 0%, transparent 60%),
    var(--tal-navy);
  padding-block: clamp(4.5rem, 9vw, 7rem);
}
[dir="rtl"] .tal-outcomes{ background: radial-gradient(110% 90% at 100% 100%, var(--tal-navy-soft) 0%, transparent 60%), var(--tal-navy); }
.tal-outcomes .o-grid{
  position: absolute; inset: 0; z-index: -1; pointer-events: none;
  background-image:
    linear-gradient(rgba(255,255,255,.045) 1px, transparent 1px),
    linear-gradient(90deg, rgba(255,255,255,.045) 1px, transparent 1px);
  background-size: 64px 64px;
  -webkit-mask-image: radial-gradient(ellipse 60% 75% at 25% 70%, #000 10%, transparent 70%);
          mask-image: radial-gradient(ellipse 60% 75% at 25% 70%, #000 10%, transparent 70%);
}
[dir="rtl"] .tal-outcomes .o-grid{
  -webkit-mask-image: radial-gradient(ellipse 60% 75% at 75% 70%, #000 10%, transparent 70%);
          mask-image: radial-gradient(ellipse 60% 75% at 75% 70%, #000 10%, transparent 70%);
}

/* left column */
.tal-outcomes .o-eyebrow{ color: var(--tal-gold); display: flex; align-items: center; gap: .9rem; margin-bottom: 1.5rem; }
.tal-outcomes .o-eyebrow::before{ content: ""; inline-size: 2.5rem; block-size: 1px; background: var(--tal-gold); flex: none; }
.tal-outcomes .o-statement{
  color: #fff; font-weight: 300; letter-spacing: -.01em;
  font-size: clamp(1.6rem, 2.75vw, 2.25rem); line-height: 1.28;
  max-inline-size: 21ch; margin-bottom: 2.75rem;
}
.tal-outcomes .o-3a{ color: var(--tal-gold); font-weight: 600; }
.tal-outcomes .o-count{ display: flex; align-items: center; gap: 1.1rem; }
.tal-outcomes .o-count-num{
  font-weight: 300; font-size: clamp(3rem, 5vw, 4.25rem); line-height: .9;
  letter-spacing: -.03em; font-variant-numeric: tabular-nums; color: var(--tal-gold);
}
.tal-outcomes .o-count-label{
  font-size: var(--fs-label); font-weight: 600; line-height: 1.6;
  letter-spacing: var(--track-label); text-transform: uppercase;
  color: rgba(255,255,255,.75);
  padding-inline-start: 1.1rem; border-inline-start: 1px solid var(--tal-gold-dim);
}

/* trajectory motif — line draws in, nodes land one by one */
.tal-outcomes .o-trajectory{ display: block; inline-size: 100%; max-inline-size: 300px; block-size: auto; margin-top: 2.5rem; overflow: visible; }
@media (min-width: 992px){ .tal-outcomes .o-trajectory{ max-inline-size: 440px; } }
[dir="rtl"] .tal-outcomes .o-trajectory{ transform: scaleX(-1); }
[dir="rtl"] .tal-outcomes .o-trajectory.reveal:not(.in){ transform: scaleX(-1) translateY(22px); }
.o-trajectory .t-base{ stroke: rgba(255,255,255,.14); stroke-width: 1; stroke-dasharray: 2 6; }
.o-trajectory .t-line{
  fill: none; stroke: var(--tal-gold); stroke-opacity: .7; stroke-width: 1.4;
  stroke-linejoin: round; stroke-linecap: round;
  stroke-dasharray: 1; stroke-dashoffset: 1;
  transition: stroke-dashoffset 1.8s var(--tal-ease) .35s;
}
.o-trajectory .t-node{ fill: var(--tal-navy); stroke: var(--tal-gold); stroke-width: 1.4; opacity: 0; transition: opacity .45s ease calc(.6s + var(--n) * .22s); }
.o-trajectory .t-end{ fill: var(--tal-gold); opacity: 0; transition: opacity .45s ease 1.9s; }
.o-trajectory .t-halo{ fill: var(--tal-gold); opacity: 0; transition: opacity .6s ease 2s; }
.o-trajectory.in .t-line{ stroke-dashoffset: 0; }
.o-trajectory.in .t-node, .o-trajectory.in .t-end{ opacity: 1; }
.o-trajectory.in .t-halo{ opacity: .16; }

/* the index */
.tal-outcomes .o-list{
  list-style: none; margin: 0; padding: 0;
  display: grid; grid-template-columns: minmax(0,1fr);
  column-gap: clamp(2rem, 4vw, 3.5rem);
}
.tal-outcomes .o-list li{
  position: relative;
  display: grid; grid-template-columns: 2.75rem minmax(0,1fr); align-items: baseline;
  padding-block: 1.2rem;
  border-block-start: 1px solid rgba(255,255,255,.14);
}
.tal-outcomes .o-list li:last-child{ border-block-end: 1px solid rgba(255,255,255,.14); }
/* gold tab over each rule, aligned with the index number */
.tal-outcomes .o-list li::before{
  content: ""; position: absolute; inset-block-start: -1px; inset-inline-start: 0;
  inline-size: 1.75rem; block-size: 1px; background: var(--tal-gold);
  transform: scaleX(0); transform-origin: left center;
  transition: transform .9s var(--tal-ease) calc(.25s + var(--i, 0) * .07s);
}
[dir="rtl"] .tal-outcomes .o-list li::before{ transform-origin: right center; }
.tal-outcomes .o-list.in li::before{ transform: scaleX(1); }
.tal-outcomes .o-idx{ color: var(--tal-gold); font-size: var(--fs-label); font-weight: 600; letter-spacing: .14em; font-variant-numeric: tabular-nums; }
.tal-outcomes .o-label{ color: #fff; font-size: clamp(1rem, 1.3vw, 1.125rem); font-weight: 500; line-height: 1.4; }
.tal-outcomes .o-label abbr{ text-decoration: underline dotted var(--tal-gold); text-underline-offset: .22em; cursor: help; }
@media (min-width: 576px){
  .tal-outcomes .o-list{ grid-template-columns: repeat(2, minmax(0,1fr)); grid-template-rows: repeat(5, auto); grid-auto-flow: column; }
  .tal-outcomes .o-list li:nth-child(5){ border-block-end: 1px solid rgba(255,255,255,.14); }
}
@media (prefers-reduced-motion: reduce){
  .o-trajectory .t-line, .o-trajectory .t-node, .o-trajectory .t-end, .o-trajectory .t-halo,
  .tal-outcomes .o-list li::before{ transition: none; }
  .o-trajectory .t-line{ stroke-dashoffset: 0; }
  .o-trajectory .t-node, .o-trajectory .t-end{ opacity: 1; }
  .o-trajectory .t-halo{ opacity: .16; }
  .tal-outcomes .o-list li::before{ transform: none; }
}
.no-js .o-trajectory .t-line{ stroke-dashoffset: 0; }
.no-js .o-trajectory .t-node, .no-js .o-trajectory .t-end{ opacity: 1; }
.no-js .tal-outcomes .o-list li::before{ transform: none; }

/* ================= TALANTA wordmark in running text (2026-10-17) =================
   Every visible "TALANTA" is wrapped in <span class="tal-word"> and set like the logo:
   Amasis Black, navy letters, the three A's in bronze. On dark surfaces the letters
   turn white and the A's switch to gold (bronze is too dark on navy). */
@font-face{
  font-family: "Amasis TALANTA";
  src: url("assets/Amasis-Font/Amasis-Font/Amasis-Black.woff2") format("woff2"),
       url("assets/Amasis-Font/Amasis-Font/Amasis-Black.otf") format("opentype");
  font-weight: 900; font-style: normal; font-display: swap;
}
.tal-word{
  --tw-ink: #0C2340; --tw-a: #6E5A20;
  font-family: "Amasis TALANTA", "Rockwell Extra Bold", Rockwell, Georgia, serif;
  font-weight: 900; font-style: normal; text-transform: none;
  letter-spacing: .02em; color: var(--tw-ink); white-space: nowrap;
}
.tal-word .a{ color: var(--tw-a); }
.page-hero .tal-word, .on-dark .tal-word, .hero-carousel .tal-word, .tal-cta-band .tal-word,
.stats-band .tal-word, .tal-outcomes .tal-word, .eco .tal-word,
[style*="background:var(--tal-navy)"] .tal-word{
  --tw-ink: #fff; --tw-a: var(--tal-gold);
}

/* ============================================================
   FOOTER CONTACT — icon rows (Oct 2026)
   44px rows for touch, icon chip + value, logical props for RTL
   ============================================================ */
.foot-contact{ list-style: none; margin: 0; padding: 0; display: grid; gap: .15rem; }
.site-footer .fc-item{
  display: inline-flex; align-items: center; gap: .75rem;
  min-height: 44px; max-width: 100%;
  color: var(--tal-navy); font-size: .9rem; font-weight: 500; text-decoration: none;
  border-radius: 6px;
}
.fc-ico{
  flex: none; display: inline-grid; place-items: center;
  width: 34px; height: 34px; border-radius: 50%;
  background: #fff; border: 1px solid rgba(12,35,64,.14); color: var(--tal-navy);
  transition: background-color .2s, border-color .2s, color .2s;
}
.fc-ico svg, .fc-pin svg{ width: 16px; height: 16px; fill: none; stroke: currentColor; stroke-width: 1.7; stroke-linecap: round; stroke-linejoin: round; }
.fc-val{ min-width: 0; overflow-wrap: anywhere; text-underline-offset: .25em; text-decoration-thickness: 1px; }
.fc-ext{ display: inline-block; margin-inline-start: .3em; font-size: .8em; color: var(--tal-gold-ink); }
[dir="rtl"] .fc-ext{ transform: scaleX(-1); }
.site-footer .fc-item:hover{ color: var(--tal-navy); }
.site-footer .fc-item:hover .fc-val{ text-decoration-line: underline; text-decoration-color: var(--tal-gold); }
.site-footer .fc-item:hover .fc-ico{ background: var(--tal-navy); border-color: var(--tal-navy); color: #fff; }
.site-footer .fc-item:focus-visible{ outline: 2px solid var(--tal-navy); outline-offset: 3px; }
.fc-region{
  display: flex; align-items: flex-start; gap: .5rem;
  margin: 1rem 0 0; padding-top: 1rem; border-top: 1px solid rgba(12,35,64,.12);
  font-size: .8rem; line-height: 1.6; color: var(--tal-charcoal); max-width: 34ch;
}
.fc-pin{ flex: none; margin-top: .2rem; color: var(--tal-gold-ink); }
@media (prefers-reduced-motion: reduce){ .fc-ico{ transition: none; } }

/* ============================================================
   LOGO WALLS — Practical References (home) & Golden Network (about)
   Uniform tiles; each logo sized to equal optical area via --h
   (set per <img>, from its aspect ratio). Grayscale at rest on
   pointer devices so 39 brand palettes don't compete with navy +
   gold; full colour on hover, and always on touch screens.
   ============================================================ */
.logo-wall{ list-style: none; margin: 0; padding: 0; display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: .6rem; }
@media (min-width: 768px){
  .logo-wall{ gap: 1rem; }
  .logo-wall--refs{ grid-template-columns: repeat(4, minmax(0, 1fr)); }
}
@media (min-width: 992px){
  .logo-wall--refs{ grid-template-columns: repeat(6, minmax(0, 1fr)); }
  .logo-wall--network{ grid-template-columns: repeat(5, minmax(0, 1fr)); }
}
.logo-tile{
  display: flex; align-items: center; justify-content: center;
  aspect-ratio: 3 / 2; padding: clamp(.5rem, 1.4vw, 1rem);
  background: #fff; border: 1px solid rgba(12,35,64,.12); border-radius: var(--bs-border-radius);
  transition: border-color .25s ease, box-shadow .25s ease;
}
.logo-tile img{
  display: block; height: var(--h, 60%); width: auto; max-width: 100%;
  object-fit: contain; mix-blend-mode: multiply;   /* drops white logo backgrounds into the tile */
}
.logo-wall--network .logo-tile{ border-inline-start: 3px solid var(--tal-gold); }
.bg-tal-gray .logo-tile{ border-color: rgba(12,35,64,.08); }
@media (hover: hover){
  .logo-tile img{ filter: grayscale(1) contrast(1.15); opacity: .9; transition: filter .3s ease, opacity .3s ease; }
  .logo-tile:hover{ border-color: var(--tal-gold); box-shadow: 0 8px 24px rgba(12,35,64,.08); }
  .logo-tile:hover img{ filter: none; opacity: 1; }
}
@media (prefers-reduced-motion: reduce){ .logo-tile, .logo-tile img{ transition: none; } }
#golden-network, #references{ scroll-margin-top: 5rem; }

/* ---- Logo marquee (enabled by logo-marquee.js; static grid otherwise) ---- */
.logo-marquee.is-marquee .lm-row{
  overflow: hidden;
  -webkit-mask-image: linear-gradient(to right, transparent, #000 7%, #000 93%, transparent);
          mask-image: linear-gradient(to right, transparent, #000 7%, #000 93%, transparent);
}
.logo-marquee .lm-row + .lm-row{ margin-top: .6rem; }
@media (min-width: 768px){ .logo-marquee .lm-row + .lm-row{ margin-top: 1rem; } }
.logo-marquee.is-marquee .lm-track{
  display: flex; width: max-content; gap: 0;
  animation: lm-scroll var(--lm-dur, 60s) linear infinite;
}
.logo-marquee.is-marquee .lm-track > li{ flex: 0 0 auto; width: clamp(128px, 34vw, 190px); margin-inline-end: 1rem; }
.logo-marquee.is-marquee .lm-reverse .lm-track{ animation-direction: reverse; }
[dir="rtl"] .logo-marquee.is-marquee .lm-track{ animation-name: lm-scroll-rtl; }
@keyframes lm-scroll{ to{ transform: translateX(-50%); } }
@keyframes lm-scroll-rtl{ to{ transform: translateX(50%); } }
.logo-marquee.is-paused .lm-track{ animation-play-state: paused; }
@media (hover: hover){ .logo-marquee.is-marquee .lm-row:hover .lm-track{ animation-play-state: paused; } }

.lm-toggle{
  display: flex; align-items: center; gap: .45rem; width: fit-content;
  min-height: 44px; margin-top: .5rem; margin-inline-start: auto; padding: 0 .75rem;
  background: transparent; border: 1px solid transparent; border-radius: var(--bs-border-radius);
  color: var(--tal-navy); font-size: var(--fs-small); font-weight: 600; letter-spacing: var(--track-nav);
}
.lm-toggle[hidden]{ display: none; }
.lm-toggle:hover{ border-color: rgba(12,35,64,.25); }
.lm-toggle svg{ width: 14px; height: 14px; fill: none; stroke: currentColor; stroke-width: 2; stroke-linecap: round; stroke-linejoin: round; }
.lm-toggle .lm-ico-play{ display: none; fill: currentColor; }
.logo-marquee.is-paused .lm-ico-pause{ display: none; }
.logo-marquee.is-paused .lm-ico-play{ display: inline; }
.logo-marquee:not(.is-marquee) .lm-toggle{ display: none; }