/* ============================================================
   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-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) */
  --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 — gold by default; white on gold surfaces so the ring never vanishes */
:focus-visible{ outline: 2px solid var(--tal-gold); outline-offset: 3px; }
.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); --bs-btn-color: var(--tal-navy); --bs-btn-border-color: var(--tal-gold);
  --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); --bs-btn-active-color: var(--tal-navy); --bs-btn-active-border-color: var(--tal-gold);
}
.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 3A lockup (company deck) 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-navy);
  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); }

/* step chain: numbered boxes joined by a gold line (lifecycle, journey) */
.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); 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); }
@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-navy); 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; }

/* 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: #fff; font-weight: 800; font-size: .85rem; }
.tal-defs li:nth-child(even) .d-num{ background: var(--tal-gold); color: var(--tal-navy); }
.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
   3A lockup shows in its original navy + gold 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-logo); }
.nav-toggle{ border-color: rgba(12,35,64,.3); color: var(--tal-navy); }
.nav-toggle:hover{ border-color: var(--tal-gold-logo); color: var(--tal-gold-logo); }
.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-logo); }
.site-footer a{ color: var(--tal-navy); }
.site-footer a:hover{ color: var(--tal-gold-logo); }
.site-footer .foot-h{ color: var(--tal-gold-logo); }
.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); }

/* ============================================================
   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); }