/* ============================================================
   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) */
  /* UI palette is navy + gold only. Teal #00796B is used only inside the logo badge (STATE.md decision 23).
     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); }
/* copyright and the legal links (2026-11-08): one row from 768px, stacked below */
.site-footer .foot-base{ display: flex; flex-wrap: wrap; align-items: baseline; justify-content: space-between; column-gap: 1.5rem; }
.site-footer .foot-legal{ margin: 0; }
.site-footer .foot-legal a{ display: inline-block; padding-block: .6rem; text-decoration: underline; text-decoration-color: rgba(12,35,64,.3); text-underline-offset: .2em; }
.site-footer .foot-legal a:hover{ text-decoration-color: var(--tal-gold); }
.site-footer .foot-legal a:focus-visible{ outline: 2px solid var(--tal-navy); outline-offset: 2px; }
.foot-legal-sep{ color: rgba(12,35,64,.45); padding-inline: .35rem; }
.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. Each item holds only its label (patterns/home-outcomes.php); the number 01–10 is a counter in the
   item's ::before, an inline box 2.75rem wide, and a hanging indent keeps a wrapped label under itself. Plain inline
   text, not a grid: in a grid every element of the label (the GBS <abbr>) would be a cell of its own. Before
   2026-11-07 the number and label were two spans of each item, which edited badly in the block editor. */
.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);
  counter-reset: o-item;
}
.tal-outcomes .o-list li{
  position: relative;
  padding-block: 1.2rem; padding-inline-start: 2.75rem; text-indent: -2.75rem;
  border-block-start: 1px solid rgba(255,255,255,.14);
  counter-increment: o-item;
  /* the label (formerly .o-label) */
  color: #fff; font-size: clamp(1rem, 1.3vw, 1.125rem); font-weight: 500; line-height: 1.4;
}
/* the number (formerly the aria-hidden .o-idx); the "/ ''" alt text keeps it out of screen readers, which already
   hear an ordered list. Its line height is the body's, as the span's was (1.7; 1.9 in Arabic). */
.tal-outcomes .o-list li::before{
  content: counter(o-item, decimal-leading-zero);
  content: counter(o-item, decimal-leading-zero) / "";
  display: inline-block; inline-size: 2.75rem; text-indent: 0;
  color: var(--tal-gold); font-size: var(--fs-label); font-weight: 600; letter-spacing: .14em;
  font-variant-numeric: tabular-nums; line-height: var(--bs-body-line-height);
}
/* a page saved with the old markup: its number span gives way to the counter */
.tal-outcomes .o-list .o-idx{ display: none; }
.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::after{
  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::after{ transform-origin: right center; }
.tal-outcomes .o-list.in li::after{ transform: scaleX(1); }
.tal-outcomes .o-list 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::after{ 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::after{ 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::after{ transform: none; }

/* The .row.g-5 gutters overhang .container-xl by 12px below 1200px (empty space, no content). Without this the pages
   scroll sideways by 12px, and the Arabic pages sit 12px off with a white strip at the edge. "clip", not "hidden":
   it makes no scroll container, so the header and the anchors keep working; older browsers just ignore it. */
.wp-site-blocks{ overflow-x: clip; }

/* 404 page (patterns/not-found.php) */
.tal-not-found .tal-cta-actions{ margin-top: 1.25rem; }

/* ================= TALANTA wordmark in running text (2026-10-17; outlined 2026-11-08) =================
   Every visible "TALANTA" is wrapped in <span class="tal-word"> and set like the logo: 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).
   The letters are the logo's own outlined wordmark (assets/img/logo/talanta-lockup-on-light.svg, <g id="wordmark">),
   drawn by two CSS masks: ::before paints T L N T in --tw-ink, ::after the three A's in --tw-a. No font file is
   needed. The real text stays in the page,
   transparent, so screen readers, search, copy and find still read "TALANTA". 1em = 72 units of the SVG. */
.tal-word{
  --tw-ink: #0C2340; --tw-a: #6E5A20;
  position: relative; display: inline-block;
  inline-size: 5.129em; block-size: .7136em; vertical-align: -.0065em; margin-inline: .03em .05em;
  overflow: hidden; white-space: nowrap; color: transparent;
  font-style: normal; text-transform: none; letter-spacing: 0;
}
.tal-word .a{ color: transparent; }
.tal-word::before, .tal-word::after{
  content: ""; position: absolute; inset: 0; background: var(--tw-ink);
  -webkit-mask: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='150.41 149.91 369.39 51.39'%3E%3Cpath d='M 198.74,167.13 L 188.3,167.13 L 188.3,162.44 C 188.3,161.53 188.15,160.94 187.84,160.67 C 187.52,160.42 186.81,160.28 185.71,160.28 L 181.52,160.28 L 181.52,189.81 C 181.52,191.11 181.77,191.91 182.27,192.22 C 182.78,192.53 183.87,192.69 185.55,192.69 L 187.01,192.69 L 187.01,200.83 L 162.01,200.83 L 162.01,192.69 L 164.52,192.69 C 165.82,192.69 166.66,192.49 167.04,192.08 C 167.42,191.67 167.62,190.99 167.62,190.02 L 167.62,160.28 L 163.59,160.28 C 162.39,160.28 161.63,160.42 161.32,160.67 C 161.01,160.94 160.85,161.64 160.85,162.8 L 160.85,167.13 L 150.41,167.13 L 150.41,150.49 L 198.74,150.49 Z M 198.74,167.13'/%3E%3Cpath d='M 282.3,158.63 L 280.14,158.63 C 278.8,158.63 277.89,158.81 277.44,159.17 C 276.98,159.53 276.75,160.23 276.75,161.28 L 276.75,191.11 L 283.81,191.11 C 285.19,191.11 286.07,190.9 286.44,190.47 C 286.8,190.03 286.98,189.36 286.98,188.44 L 286.98,184.33 L 297.34,184.33 L 297.34,200.83 L 257.95,200.83 L 257.95,192.69 L 259.61,192.69 C 260.86,192.69 261.71,192.51 262.16,192.16 C 262.61,191.79 262.84,191.13 262.84,190.17 L 262.84,161.58 C 262.84,160.37 262.62,159.58 262.19,159.21 C 261.76,158.82 260.75,158.63 259.17,158.63 L 257.95,158.63 L 257.95,150.49 L 282.3,150.49 Z M 282.3,158.63'/%3E%3Cpath d='M 394.48,179.44 L 394.62,179.44 L 394.62,161.78 C 394.62,160.44 394.38,159.58 393.91,159.21 C 393.43,158.82 392.39,158.63 390.81,158.63 L 390.01,158.63 L 390.01,150.49 L 410.91,150.49 L 410.91,158.63 L 409.17,158.63 C 407.92,158.63 407.08,158.81 406.64,159.17 C 406.21,159.53 406,160.28 406,161.42 L 406,201.27 L 392.17,201.27 L 377.26,169.64 L 377.12,169.64 L 377.12,190.1 C 377.12,191.11 377.35,191.79 377.8,192.16 C 378.25,192.51 379.18,192.69 380.58,192.69 L 381.95,192.69 L 381.95,200.83 L 360.84,200.83 L 360.84,192.69 L 362,192.69 C 363.53,192.69 364.53,192.53 365.01,192.19 C 365.49,191.86 365.73,191.13 365.73,190.02 L 365.73,161.42 C 365.73,160.28 365.47,159.53 364.94,159.17 C 364.41,158.81 363.51,158.63 362.22,158.63 L 360.84,158.63 L 360.84,150.49 L 381.66,150.49 Z M 394.48,179.44'/%3E%3Cpath d='M 466.87,167.13 L 456.43,167.13 L 456.43,162.44 C 456.43,161.53 456.28,160.94 455.97,160.67 C 455.65,160.42 454.94,160.28 453.84,160.28 L 449.65,160.28 L 449.65,189.81 C 449.65,191.11 449.9,191.91 450.4,192.22 C 450.91,192.53 452.01,192.69 453.68,192.69 L 455.14,192.69 L 455.14,200.83 L 430.14,200.83 L 430.14,192.69 L 432.65,192.69 C 433.95,192.69 434.79,192.49 435.17,192.08 C 435.55,191.67 435.75,190.99 435.75,190.02 L 435.75,160.28 L 431.72,160.28 C 430.52,160.28 429.76,160.42 429.45,160.67 C 429.14,160.94 428.98,161.64 428.98,162.8 L 428.98,167.13 L 418.54,167.13 L 418.54,150.49 L 466.87,150.49 Z M 466.87,167.13'/%3E%3C/svg%3E") 0 0 / 100% 100% no-repeat;
  mask: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='150.41 149.91 369.39 51.39'%3E%3Cpath d='M 198.74,167.13 L 188.3,167.13 L 188.3,162.44 C 188.3,161.53 188.15,160.94 187.84,160.67 C 187.52,160.42 186.81,160.28 185.71,160.28 L 181.52,160.28 L 181.52,189.81 C 181.52,191.11 181.77,191.91 182.27,192.22 C 182.78,192.53 183.87,192.69 185.55,192.69 L 187.01,192.69 L 187.01,200.83 L 162.01,200.83 L 162.01,192.69 L 164.52,192.69 C 165.82,192.69 166.66,192.49 167.04,192.08 C 167.42,191.67 167.62,190.99 167.62,190.02 L 167.62,160.28 L 163.59,160.28 C 162.39,160.28 161.63,160.42 161.32,160.67 C 161.01,160.94 160.85,161.64 160.85,162.8 L 160.85,167.13 L 150.41,167.13 L 150.41,150.49 L 198.74,150.49 Z M 198.74,167.13'/%3E%3Cpath d='M 282.3,158.63 L 280.14,158.63 C 278.8,158.63 277.89,158.81 277.44,159.17 C 276.98,159.53 276.75,160.23 276.75,161.28 L 276.75,191.11 L 283.81,191.11 C 285.19,191.11 286.07,190.9 286.44,190.47 C 286.8,190.03 286.98,189.36 286.98,188.44 L 286.98,184.33 L 297.34,184.33 L 297.34,200.83 L 257.95,200.83 L 257.95,192.69 L 259.61,192.69 C 260.86,192.69 261.71,192.51 262.16,192.16 C 262.61,191.79 262.84,191.13 262.84,190.17 L 262.84,161.58 C 262.84,160.37 262.62,159.58 262.19,159.21 C 261.76,158.82 260.75,158.63 259.17,158.63 L 257.95,158.63 L 257.95,150.49 L 282.3,150.49 Z M 282.3,158.63'/%3E%3Cpath d='M 394.48,179.44 L 394.62,179.44 L 394.62,161.78 C 394.62,160.44 394.38,159.58 393.91,159.21 C 393.43,158.82 392.39,158.63 390.81,158.63 L 390.01,158.63 L 390.01,150.49 L 410.91,150.49 L 410.91,158.63 L 409.17,158.63 C 407.92,158.63 407.08,158.81 406.64,159.17 C 406.21,159.53 406,160.28 406,161.42 L 406,201.27 L 392.17,201.27 L 377.26,169.64 L 377.12,169.64 L 377.12,190.1 C 377.12,191.11 377.35,191.79 377.8,192.16 C 378.25,192.51 379.18,192.69 380.58,192.69 L 381.95,192.69 L 381.95,200.83 L 360.84,200.83 L 360.84,192.69 L 362,192.69 C 363.53,192.69 364.53,192.53 365.01,192.19 C 365.49,191.86 365.73,191.13 365.73,190.02 L 365.73,161.42 C 365.73,160.28 365.47,159.53 364.94,159.17 C 364.41,158.81 363.51,158.63 362.22,158.63 L 360.84,158.63 L 360.84,150.49 L 381.66,150.49 Z M 394.48,179.44'/%3E%3Cpath d='M 466.87,167.13 L 456.43,167.13 L 456.43,162.44 C 456.43,161.53 456.28,160.94 455.97,160.67 C 455.65,160.42 454.94,160.28 453.84,160.28 L 449.65,160.28 L 449.65,189.81 C 449.65,191.11 449.9,191.91 450.4,192.22 C 450.91,192.53 452.01,192.69 453.68,192.69 L 455.14,192.69 L 455.14,200.83 L 430.14,200.83 L 430.14,192.69 L 432.65,192.69 C 433.95,192.69 434.79,192.49 435.17,192.08 C 435.55,191.67 435.75,190.99 435.75,190.02 L 435.75,160.28 L 431.72,160.28 C 430.52,160.28 429.76,160.42 429.45,160.67 C 429.14,160.94 428.98,161.64 428.98,162.8 L 428.98,167.13 L 418.54,167.13 L 418.54,150.49 L 466.87,150.49 Z M 466.87,167.13'/%3E%3C/svg%3E") 0 0 / 100% 100% no-repeat;
  -webkit-print-color-adjust: exact; print-color-adjust: exact;
}
.tal-word::after{
  background: var(--tw-a);
  -webkit-mask-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='150.41 149.91 369.39 51.39'%3E%3Cpath d='M 245.79,186.86 C 246.38,188.59 246.86,189.84 247.23,190.61 C 247.61,191.37 248.06,191.91 248.56,192.22 C 249.07,192.53 249.75,192.69 250.62,192.69 L 251.64,192.69 L 251.64,200.83 L 228.79,200.83 L 228.79,192.69 L 230.45,192.69 C 231.84,192.69 232.54,192.23 232.54,191.31 C 232.54,190.65 232.18,189.31 231.47,187.28 L 218.07,187.28 C 218.02,187.48 217.84,188.01 217.53,188.88 C 217.22,189.74 217.06,190.49 217.06,191.11 C 217.06,191.69 217.33,192.09 217.89,192.33 C 218.44,192.57 219.27,192.69 220.37,192.69 L 220.37,200.83 L 200.28,200.83 L 200.28,192.69 L 200.72,192.69 C 201.77,192.69 202.55,192.59 203.07,192.38 C 203.61,192.16 204.04,191.78 204.37,191.25 C 204.72,190.72 205.1,189.81 205.53,188.52 L 218.86,149.91 L 233.4,149.91 Z M 229.73,178 L 224.98,163.44 L 224.84,163.44 L 219.93,178 Z M 229.73,178'/%3E%3Cpath d='M 348.51,186.86 C 349.1,188.59 349.58,189.84 349.95,190.61 C 350.33,191.37 350.78,191.91 351.28,192.22 C 351.79,192.53 352.47,192.69 353.34,192.69 L 354.36,192.69 L 354.36,200.83 L 331.51,200.83 L 331.51,192.69 L 333.17,192.69 C 334.56,192.69 335.26,192.23 335.26,191.31 C 335.26,190.65 334.9,189.31 334.19,187.28 L 320.8,187.28 C 320.74,187.48 320.56,188.01 320.25,188.88 C 319.94,189.74 319.78,190.49 319.78,191.11 C 319.78,191.69 320.05,192.09 320.61,192.33 C 321.16,192.57 321.99,192.69 323.09,192.69 L 323.09,200.83 L 303,200.83 L 303,192.69 L 303.44,192.69 C 304.49,192.69 305.27,192.59 305.8,192.38 C 306.33,192.16 306.76,191.78 307.09,191.25 C 307.44,190.72 307.82,189.81 308.25,188.52 L 321.58,149.91 L 336.12,149.91 Z M 332.45,178 L 327.7,163.44 L 327.56,163.44 L 322.65,178 Z M 332.45,178'/%3E%3Cpath d='M 513.9,186.86 C 514.49,188.59 514.97,189.84 515.34,190.61 C 515.72,191.37 516.17,191.91 516.67,192.22 C 517.18,192.53 517.86,192.69 518.73,192.69 L 519.75,192.69 L 519.75,200.83 L 496.9,200.83 L 496.9,192.69 L 498.56,192.69 C 499.95,192.69 500.65,192.23 500.65,191.31 C 500.65,190.65 500.29,189.31 499.58,187.28 L 486.19,187.28 C 486.13,187.48 485.95,188.01 485.64,188.88 C 485.33,189.74 485.17,190.49 485.17,191.11 C 485.17,191.69 485.44,192.09 486,192.33 C 486.55,192.57 487.38,192.69 488.48,192.69 L 488.48,200.83 L 468.39,200.83 L 468.39,192.69 L 468.83,192.69 C 469.88,192.69 470.66,192.59 471.19,192.38 C 471.72,192.16 472.15,191.78 472.48,191.25 C 472.83,190.72 473.21,189.81 473.64,188.52 L 486.97,149.91 L 501.51,149.91 Z M 497.84,178 L 493.09,163.44 L 492.95,163.44 L 488.04,178 Z M 497.84,178'/%3E%3C/svg%3E");
  mask-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='150.41 149.91 369.39 51.39'%3E%3Cpath d='M 245.79,186.86 C 246.38,188.59 246.86,189.84 247.23,190.61 C 247.61,191.37 248.06,191.91 248.56,192.22 C 249.07,192.53 249.75,192.69 250.62,192.69 L 251.64,192.69 L 251.64,200.83 L 228.79,200.83 L 228.79,192.69 L 230.45,192.69 C 231.84,192.69 232.54,192.23 232.54,191.31 C 232.54,190.65 232.18,189.31 231.47,187.28 L 218.07,187.28 C 218.02,187.48 217.84,188.01 217.53,188.88 C 217.22,189.74 217.06,190.49 217.06,191.11 C 217.06,191.69 217.33,192.09 217.89,192.33 C 218.44,192.57 219.27,192.69 220.37,192.69 L 220.37,200.83 L 200.28,200.83 L 200.28,192.69 L 200.72,192.69 C 201.77,192.69 202.55,192.59 203.07,192.38 C 203.61,192.16 204.04,191.78 204.37,191.25 C 204.72,190.72 205.1,189.81 205.53,188.52 L 218.86,149.91 L 233.4,149.91 Z M 229.73,178 L 224.98,163.44 L 224.84,163.44 L 219.93,178 Z M 229.73,178'/%3E%3Cpath d='M 348.51,186.86 C 349.1,188.59 349.58,189.84 349.95,190.61 C 350.33,191.37 350.78,191.91 351.28,192.22 C 351.79,192.53 352.47,192.69 353.34,192.69 L 354.36,192.69 L 354.36,200.83 L 331.51,200.83 L 331.51,192.69 L 333.17,192.69 C 334.56,192.69 335.26,192.23 335.26,191.31 C 335.26,190.65 334.9,189.31 334.19,187.28 L 320.8,187.28 C 320.74,187.48 320.56,188.01 320.25,188.88 C 319.94,189.74 319.78,190.49 319.78,191.11 C 319.78,191.69 320.05,192.09 320.61,192.33 C 321.16,192.57 321.99,192.69 323.09,192.69 L 323.09,200.83 L 303,200.83 L 303,192.69 L 303.44,192.69 C 304.49,192.69 305.27,192.59 305.8,192.38 C 306.33,192.16 306.76,191.78 307.09,191.25 C 307.44,190.72 307.82,189.81 308.25,188.52 L 321.58,149.91 L 336.12,149.91 Z M 332.45,178 L 327.7,163.44 L 327.56,163.44 L 322.65,178 Z M 332.45,178'/%3E%3Cpath d='M 513.9,186.86 C 514.49,188.59 514.97,189.84 515.34,190.61 C 515.72,191.37 516.17,191.91 516.67,192.22 C 517.18,192.53 517.86,192.69 518.73,192.69 L 519.75,192.69 L 519.75,200.83 L 496.9,200.83 L 496.9,192.69 L 498.56,192.69 C 499.95,192.69 500.65,192.23 500.65,191.31 C 500.65,190.65 500.29,189.31 499.58,187.28 L 486.19,187.28 C 486.13,187.48 485.95,188.01 485.64,188.88 C 485.33,189.74 485.17,190.49 485.17,191.11 C 485.17,191.69 485.44,192.09 486,192.33 C 486.55,192.57 487.38,192.69 488.48,192.69 L 488.48,200.83 L 468.39,200.83 L 468.39,192.69 L 468.83,192.69 C 469.88,192.69 470.66,192.59 471.19,192.38 C 471.72,192.16 472.15,191.78 472.48,191.25 C 472.83,190.72 473.21,189.81 473.64,188.52 L 486.97,149.91 L 501.51,149.91 Z M 497.84,178 L 493.09,163.44 L 492.95,163.44 L 488.04,178 Z M 497.84,178'/%3E%3C/svg%3E");
}
.tal-nb{ white-space: nowrap; }   /* letters that touch the wordmark stay on its line (inc/block-attrs.php) */
@media (forced-colors: active){
  /* on .tal-word too: forced colours would otherwise paint the transparent text over the letters */
  .tal-word{ forced-color-adjust: none; }
  .tal-word::before, .tal-word::after{ forced-color-adjust: none; background: CanvasText; }
}
.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; }