/* ============================================================
   TALANTA — home page styles: index.html <style>, lines 27–334, verbatim, except the hero slider's rules,
   rewritten for the Splide Carousel Block in phase 11 with the same values (see HERO below).
   Loaded on the front page after talanta.css (CONVERSION-PLAN.md section 0).
   ============================================================ */
/* ============================================================
   TALANTA — CONCEPT 01 · CINEMATIC CORPORATE
   Brand tokens per guidelines; imagery = licensed Unsplash/Pexels
   placeholders to be swapped for brand photography/film.
   ============================================================ */
/* tokens + core components live in talanta.css — page styles below are page-specific only */
html{ scroll-behavior:smooth; }
section[id]{ scroll-margin-top: 4.5rem; }
body{ -webkit-font-smoothing: antialiased; }
body.is-loading{ overflow:hidden; }

h1,h2,h3{ font-weight:800; color:var(--tal-navy); line-height:1.12; letter-spacing:-.01em; }
.hero-carousel .eyebrow{ color:var(--tal-gold); }

.section-pad{ padding-block: clamp(4rem, 9vw, 7.5rem); }
.section-head{ max-width:720px; margin-bottom: clamp(2.5rem,6vw,4rem); }
.section-head .eyebrow{ display:block; margin-bottom:1rem; }
.section-head h2{ font-size: var(--fs-h2); margin-bottom:1rem; }

/* ============================================================
   PRELOADER — wordmark assembles, gold bar sweeps, curtain lifts
   ============================================================ */
.preloader{
  position:fixed; inset:0; z-index:2000;
  background:var(--tal-navy);
  display:flex; align-items:center; justify-content:center;
  transition: transform .7s cubic-bezier(.77,0,.18,1), visibility 0s .7s;
}
.preloader.done{ transform:translateY(-101%); visibility:hidden; }
.no-js .preloader{ display:none; }
/* Gold Thread (splash motion study, concept 05) on the new T-badge lockup:
   a bronze line draws in reading direction, the wordmark rises from behind it,
   then the descriptor and the T badge settle. Transform + opacity only. */
.pl-logo{ display:block; width:min(340px,72vw); height:auto; overflow:visible; }
.pl-logo *{ transform-box:fill-box; }
.pl-thread{ opacity:0; transform:scaleX(0); transform-origin:left center;
  animation:plThread .7s cubic-bezier(.65,0,.35,1) .1s forwards, plThreadOut .45s ease 1.35s forwards; }
[dir="rtl"] .pl-thread{ transform-origin:right center; }
.pl-w{ --o:var(--i); transform:translateY(58px);
  animation:plRise .7s cubic-bezier(.22,1,.36,1) calc(.9s + var(--o) * 55ms) forwards; }
[dir="rtl"] .pl-w{ --o:calc(6 - var(--i)); }
.pl-desc{ opacity:0; transform:translateY(4px); animation:plFade .4s cubic-bezier(.22,1,.36,1) 1.6s forwards; }
.pl-badge{ opacity:0; transform:scale(.92); transform-origin:center; animation:plFade .44s cubic-bezier(.22,1,.36,1) 1.72s forwards; }
@keyframes plThread{ from{ opacity:1; transform:scaleX(0); } to{ opacity:1; transform:none; } }
@keyframes plThreadOut{ from{ opacity:1; transform:none; } to{ opacity:0; transform:none; } }
@keyframes plRise{ to{ transform:none; } }
@keyframes plFade{ to{ opacity:1; transform:none; } }
@media (prefers-reduced-motion: reduce){
  .pl-w,.pl-desc,.pl-badge{ animation:none; opacity:1; transform:none; }
  .pl-thread{ animation:none; opacity:0; }
  .pl-logo{ opacity:0; animation:plFade .4s linear forwards; }
  .preloader{ transition:opacity .3s ease, visibility 0s .3s; }
  .preloader.done{ transform:none; opacity:0; }
}

/* ============================================================
   NAV — transparent over hero, solid after scroll
   ============================================================ */
.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{ background:var(--tal-navy); box-shadow:0 8px 30px rgba(8,23,41,.35); }
.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; }
.brand-word .brand-text{ display:inline-block; }
.brand-word .a{ color:var(--tal-gold); }
.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{ color:var(--tal-gold); }
.nav-toggle{
  background:transparent; border:1px solid rgba(255,255,255,.4); color:#fff;
  min-width:44px; min-height:44px;              /* touch target */
  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; }
}

/* ============================================================
   HERO — full-viewport cinematic slider (video + Ken Burns stills)
   Phase 11: the slides sit in the Splide Carousel Block (STATE.md decision 22). index.html's Bootstrap carousel rules
   are rewritten here on the plugin's markup with the same values and keyframes; inc/hero.php marks slide 1
   .is-active in the page's HTML (Splide keeps it on the slide that shows), assets/js/hero-carousel.js drives the fill,
   .is-paused and .is-fading. The plugin's own CSS is overridden where the hero needs it.
   ============================================================ */
.hero-carousel{ position:relative; height:100svh; min-height:620px; background:var(--tal-navy);
  --hero-baseline:2.25rem;   /* one shared baseline for indicators, pause toggle, and cue */
}
/* the slider fills the section. Slide 1 shows before the plugin's script runs, without it and without the plugin's
   CSS (which hides the whole slider until its script has run); slides 2+ and the controls wait for the script */
.hero-carousel .wp-block-splide-carousel__container, .hero-carousel .wp-block-splide-carousel,
.hero-carousel .splide__track, .hero-carousel .splide__list, .hero-carousel .tal-slide{ height:100%; max-width:none; margin:0; padding:0; }
.hero-carousel .wp-block-splide-carousel{ position:relative; visibility:visible; }
.hero-carousel .splide__track{ position:relative; z-index:auto; overflow:hidden; touch-action:pan-y; }
.hero-carousel .splide__list{ position:relative; display:block; }
.hero-carousel .wp-block-splide-carousel:not(.is-initialized) :is(.splide__slide:not(.is-active), .splide__controls){ display:none; }
/* fade: the slides lie on top of each other. Splide shifts slide n back by n × 100 % (translateX), which leaves the
   slides off-canvas right to left and makes each one a stacking context; only the slide that shows takes clicks */
.hero-carousel .splide__slide{ position:absolute; inset:0; width:100%; transform:none !important; pointer-events:none; }
.hero-carousel .splide__slide.is-active{ pointer-events:auto; }
.slide-media{ position:absolute; inset:0; overflow:hidden; }
/* the shade (::after, below) now lies inside the photo's frame. clip keeps the frame from being a scroll box: right to
   left, a scroll box's origin follows the Ken Burns zoom's overflow, which moved the shade at each slide change (a
   layout shift of 0.036 on /ar/). Browsers without clip keep hidden */
.hero-carousel .slide-media{ overflow:clip; }
.slide-media video, .slide-media .slide-img{
  position:absolute; inset:0; width:100%; height:100%; object-fit:cover;
}
.hero-carousel .splide__slide.is-active .kb .slide-img{ animation:kenburns 9s ease-out forwards; }
@keyframes kenburns{ from{ transform:scale(1); } to{ transform:scale(1.08); } }
/* the shade over the photo, drawn on the photo's figure so every slide has it (it was a .slide-shade block) */
.slide-media::after{
  content:""; position:absolute; inset:0;
  background:linear-gradient(100deg, rgba(8,23,41,.88) 15%, rgba(8,23,41,.55) 55%, rgba(8,23,41,.35));
}
.slide-caption{ position:relative; z-index:2; height:100%; display:flex; flex-direction:column; justify-content:center; color:#fff; padding-top:3rem; }
/* the caption keeps clear of the prev/next chevrons (launch audit D1, 2026-11-11; the static site had the overlap
   too). Each control is 8 % of the slider wide with its 2rem chevron in the middle, so the text starts at least
   4 % + 2rem from the edge, 1rem clear of the chevron. The container's own margin counts toward that, hence one rule
   per container width; from about 1500px wide nothing moves. Phones have no arrows: they swipe, and the bars and the
   pause button stay. */
@media (min-width:576px) and (max-width:1199.98px){
  .hero-carousel .container-xl.slide-caption{ padding-inline:max(.75rem, calc(4% + 2rem)); }
}
@media (min-width:1200px) and (max-width:1399.98px){
  .hero-carousel .container-xl.slide-caption{ padding-inline:max(.75rem, calc(4% + 2rem - (100% - 1140px) / 2)); }
}
@media (min-width:1400px){
  .hero-carousel .container-xl.slide-caption{ padding-inline:max(.75rem, calc(4% + 2rem - (100% - 1320px) / 2)); }
}
@media (max-width:575.98px){
  .hero-carousel .splide .splide__arrows{ display:none; }
}
.slide-caption .eyebrow{ margin-bottom:1.5rem; }
.slide-caption h1, .slide-caption .h1{ color:#fff; font-size:clamp(2rem,5.2vw,3.8rem); max-width:17ch; margin-bottom:1.25rem; }
.slide-caption p{ max-width:56ch; color:rgba(255,255,255,.85); font-size:clamp(1rem,1.4vw,1.15rem); margin-bottom:2.25rem; }
/* staggered entrance each time a slide activates */
.slide-caption > *{ opacity:0; }
.hero-carousel .splide__slide.is-active .slide-caption > *{ animation:capUp .8s cubic-bezier(.2,.7,.3,1) forwards; }
.hero-carousel .splide__slide.is-active .slide-caption > *:nth-child(1){ animation-delay:.15s }
.hero-carousel .splide__slide.is-active .slide-caption > *:nth-child(2){ animation-delay:.3s }
.hero-carousel .splide__slide.is-active .slide-caption > *:nth-child(3){ animation-delay:.45s }
.hero-carousel .splide__slide.is-active .slide-caption > *:nth-child(4){ animation-delay:.6s }
@keyframes capUp{ from{ opacity:0; transform:translateY(26px); } to{ opacity:1; transform:none; } }

/* controls: the pause toggle and the indicators share one row in the block's markup; each is placed on its own */
.hero-carousel .splide__controls{ display:contents; }
.hero-carousel .splide__progress, .hero-carousel .splide__spinner{ display:none; }
/* progress-bar indicators. The row keeps clear of the pause toggle (inline end), so up to five bars fit at 375 px */
.hero-carousel .splide .splide__pagination{
  position:absolute; inset-inline:0; bottom:0; z-index:2; display:flex; flex-wrap:nowrap; justify-content:center; gap:.5rem;
  margin:0 max(15%, calc(8% + .75rem + 46px)) var(--hero-baseline); padding:0; list-style:none; pointer-events:none;
}
.hero-carousel .splide .splide__pagination li{ display:block; flex:0 1 56px; min-width:0; margin:0; line-height:1; pointer-events:auto; }
.hero-carousel .splide .splide__pagination .splide__pagination__page{
  display:block; width:100%; height:3px; border:0; border-radius:0; margin:0; padding:0; cursor:pointer;
  background:rgba(255,255,255,.3); opacity:1; position:relative; transform:none; transition:none;
}
/* a taller hit area; the bar stays 3 px */
.hero-carousel .splide .splide__pagination__page::before{ content:""; position:absolute; inset:-10px 0; }
/* the gold fill follows the slide timer (--fill 0–1, hero-carousel.js), so it stops with it on hover and pause */
.hero-carousel .splide .splide__pagination__page::after{
  content:""; position:absolute; inset:0; background:var(--tal-gold);
  transform-origin:left; transform:scaleX(0);
}
.hero-carousel .splide .splide__pagination .splide__pagination__page.is-active::after{ transform:scaleX(var(--fill, 0)); }
/* the current slide's bar is brighter, so it still shows which slide is on after Pause and a move (launch audit D3) */
.hero-carousel .splide .splide__pagination .splide__pagination__page.is-active{ background:rgba(255,255,255,.6); }
/* pause button: freeze the slow zoom too */
.hero-carousel .splide.is-paused .kb .slide-img{ animation-play-state:paused; }
/* previous/next: 8 %-wide full-height areas with Bootstrap's chevron, as on the static site. Above the slide that
   fades in; the caption buttons sit above them (blocks.css) */
.hero-carousel .splide .splide__arrows .splide__arrow{
  position:absolute; top:0; bottom:0; z-index:2; display:flex; align-items:center; justify-content:center;
  width:8%; height:auto; padding:0; color:#fff; background:none; border:0; border-radius:0; opacity:.5; transform:none;
  transition:opacity .15s;
}
.hero-carousel .splide .splide__arrows .splide__arrow:is(:hover, :focus){ opacity:.9; }
.hero-carousel .splide .splide__arrows .splide__arrow--prev{ left:0; right:auto; }
.hero-carousel .splide .splide__arrows .splide__arrow--next{ right:0; left:auto; }
/* the icon is Bootstrap 5.3.3's carousel icon image itself (Splide's own svg arrow is not shown): an inline svg
   renders a few pixels differently where the control is narrower than the icon (below 400 px).
   Each arrow points the way it goes: left/right in LTR, mirrored right to left (.splide__arrows--rtl) */
.hero-carousel .splide .splide__arrows{
  --chevron-left:url("data:image/svg+xml,%3csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 16 16' fill='%23fff'%3e%3cpath d='M11.354 1.646a.5.5 0 0 1 0 .708L5.707 8l5.647 5.646a.5.5 0 0 1-.708.708l-6-6a.5.5 0 0 1 0-.708l6-6a.5.5 0 0 1 .708 0z'/%3e%3c/svg%3e");
  --chevron-right:url("data:image/svg+xml,%3csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 16 16' fill='%23fff'%3e%3cpath d='M4.646 1.646a.5.5 0 0 1 .708 0l6 6a.5.5 0 0 1 0 .708l-6 6a.5.5 0 0 1-.708-.708L10.293 8 4.646 2.354a.5.5 0 0 1 0-.708z'/%3e%3c/svg%3e");
}
.hero-carousel .splide .splide__arrows .splide__arrow svg{ display:none; }
.hero-carousel .splide .splide__arrows .splide__arrow::after{
  content:""; display:inline-block; width:2rem; height:2rem; background:no-repeat 50% / 100% 100%;
}
.hero-carousel .splide .splide__arrows--ltr .splide__arrow--prev::after, .hero-carousel .splide .splide__arrows--rtl .splide__arrow--next::after{ background-image:var(--chevron-left); }
.hero-carousel .splide .splide__arrows--ltr .splide__arrow--next::after, .hero-carousel .splide .splide__arrows--rtl .splide__arrow--prev::after{ background-image:var(--chevron-right); }
/* slideshow pause control — WCAG 2.2.2: moving content must be pausable.
   Offset past the 8%-wide next-slide control so misclicks can't advance the slide.
   Vertical: center-aligned to the indicator bars (baseline + half bar − half button) */
.hero-carousel .splide .splide__toggle{
  position:absolute; z-index:5; bottom:calc(var(--hero-baseline) + 1.5px - 22px); inset-inline-end:calc(8% + .75rem);
  width:44px; height:44px; border-radius:50%; margin:0; padding:0; opacity:1; box-shadow:none;
  background:rgba(8,23,41,.55); border:1px solid rgba(255,255,255,.4);
  color:#fff; display:flex; align-items:center; justify-content:center;
  transition:border-color .2s, color .2s;
}
.hero-carousel .splide .splide__toggle:hover{ border-color:var(--tal-gold); color:var(--tal-gold); opacity:1; }
.hero-carousel .splide .splide__toggle svg{ display:block; width:14px; height:14px; margin:0; fill:currentColor; transition:none; }
.hero-carousel .splide .splide__toggle.is-active .splide__toggle__play,
.hero-carousel .splide .splide__toggle:not(.is-active) .splide__toggle__pause{ display:none; }
/* left-anchored: bottom-center belongs to the slide indicators — they'd collide */
.scroll-cue{
  position:absolute; z-index:5; bottom:0; inset-inline-start:calc(8% + .75rem);
  width:1px; height:64px; background:rgba(255,255,255,.25); overflow:hidden;
}
.scroll-cue::after{ content:""; position:absolute; inset-inline:0; top:-40%; height:40%; background:var(--tal-gold); animation:cueDrop 2.2s ease-in-out infinite; }
@keyframes cueDrop{ to{ top:110%; } }

/* ============================================================
   METHODOLOGY — pillars joined by a gold line that draws in
   ============================================================ */
.pillars{ position:relative; }
.pillar-line{ position:absolute; top:0; inset-inline:0; height:3px; background:var(--tal-gold); transform:scaleX(0); transform-origin:left; transition:transform 1.4s cubic-bezier(.65,0,.35,1) .2s; }
.pillars.in .pillar-line{ transform:scaleX(1); }
.pillar{ padding-top:1.75rem; }
.pillar .step-num{ font-weight:800; font-size:2.4rem; color:var(--tal-gold-ink); line-height:1; margin-bottom:.75rem; }
.pillar h3{ font-size:var(--fs-h3); margin-bottom:.75rem; }
.pillar p{ font-size:.95rem; margin:0; }

/* ============================================================
   SERVICES — photo cards (whole card links to the conversation)
   ============================================================ */
.photo-card{
  position:relative; display:block; overflow:hidden; border-radius:var(--bs-border-radius);
  aspect-ratio:4/5; color:#fff; text-decoration:none; background:var(--tal-navy);
}
.photo-card img{ position:absolute; inset:0; width:100%; height:100%; object-fit:cover; transition:transform .8s cubic-bezier(.2,.7,.3,1); }
.photo-card:hover img{ transform:scale(1.06); }
.photo-card::after{ content:""; position:absolute; inset:0; background:linear-gradient(180deg, rgba(8,23,41,.05) 30%, rgba(8,23,41,.9) 82%); }
.pc-body{ position:absolute; z-index:2; inset-inline:0; bottom:0; padding:1.5rem; }
.pc-body h3{ color:#fff; font-size:var(--fs-card); margin-bottom:.5rem; }
.pc-body p{ font-size:.88rem; color:rgba(255,255,255,.85); margin:0 0 .5rem;
  max-height:0; opacity:0; overflow:hidden; transition:max-height .5s ease, opacity .5s ease; }
.photo-card:hover .pc-body p, .photo-card:focus-visible .pc-body p{ max-height:8rem; opacity:1; }
@media (hover:none){ .pc-body p{ max-height:none; opacity:1; } }
.pc-cta{ font-size:.72rem; font-weight:600; letter-spacing:var(--track-label); text-transform:uppercase; color:var(--tal-gold); }
.pc-cta::after{ content:"→"; margin-inline-start:.4em; display:inline-block; transition:transform .3s; }
.photo-card:hover .pc-cta::after{ transform:translateX(5px); }
@media (prefers-reduced-motion: reduce){ .photo-card img, .photo-card:hover img{ transition:none; transform:none; } }
/* ── Service cards · artistic treatment: editorial navy/gold split-tone ──
   Layers (bottom → top): photo (mono, high contrast) → navy colour wash →
   film grain + gold light-leak + legibility gradient + inset gold hairline → text.
   Hover/focus brings back part of the photo's own colour. */
.photo-card{ isolation:isolate; }
.photo-card img{
  z-index:0;
  filter:grayscale(1) contrast(1.15) brightness(1.04);
  transition:transform .8s var(--tal-ease), filter .8s var(--tal-ease);
}
.photo-card::before{
  content:""; position:absolute; inset:0; z-index:1; pointer-events:none;
  background:linear-gradient(180deg, #5E6878 0%, #3A4A62 45%, var(--tal-navy) 100%);
  mix-blend-mode:color;
  opacity:.7;
  transition:opacity .8s var(--tal-ease);
}
.photo-card::after{
  z-index:1; pointer-events:none;
  background:
    url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='180' height='180'%3E%3Cfilter id='n'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='.9' numOctaves='2' stitchTiles='stitch'/%3E%3CfeColorMatrix values='0 0 0 0 1  0 0 0 0 1  0 0 0 0 1  0 0 0 .09 0'/%3E%3C/filter%3E%3Crect width='100%25' height='100%25' filter='url(%23n)'/%3E%3C/svg%3E"),
    radial-gradient(70% 50% at 88% 4%, rgba(232,207,140,.38), rgba(200,169,91,.12) 45%, transparent 75%),
    linear-gradient(180deg, rgba(8,23,41,0) 35%, rgba(8,23,41,.92) 84%);
  outline:1px solid rgba(200,169,91,.5);
  outline-offset:-14px;
  transition:outline-offset .6s var(--tal-ease), outline-color .6s var(--tal-ease);
}
.pc-body{ padding:1.75rem; }
.pc-body h3::before{
  content:""; display:block; width:28px; height:2px; margin-bottom:.9rem;
  background:var(--tal-gold); transition:width .6s var(--tal-ease);
}
.photo-card:hover img, .photo-card:focus-visible img{ filter:grayscale(.25) contrast(1.08) brightness(.95); }
.photo-card:hover::before, .photo-card:focus-visible::before{ opacity:.3; }
.photo-card:hover::after, .photo-card:focus-visible::after{ outline-color:var(--tal-gold); outline-offset:-10px; }
.photo-card:hover .pc-body h3::before, .photo-card:focus-visible .pc-body h3::before{ width:48px; }
@media (prefers-reduced-motion: reduce){
  .photo-card img, .photo-card::before, .photo-card::after, .pc-body h3::before{ transition:none; }
}

/* ============================================================
   WHY TALANTA — differentiators on light gray (list styles in talanta.css)
   ============================================================ */
.quotes{ background:var(--tal-gray); position:relative; }

/* ============================================================
   INDUSTRIES MARQUEE — sector names from the company deck
   ============================================================ */
.logo-strip{ background:var(--tal-navy-deep); padding-block:2.6rem; overflow:hidden; }
.logo-strip .label{ text-align:center; font-size:.62rem; font-weight:600; letter-spacing:var(--track-eyebrow); text-transform:uppercase; color:rgba(255,255,255,.6); margin-bottom:1.5rem; }
.marquee{ display:flex; width:max-content; gap:0; animation:marquee 30s linear infinite; }
.logo-strip:hover .marquee{ animation-play-state:paused; }
.marquee ul{ display:flex; align-items:center; gap:clamp(2.5rem,6vw,5rem); list-style:none; margin:0; padding:0 clamp(1.25rem,3vw,2.5rem); }
.marquee li{ font-weight:600; font-size:.95rem; letter-spacing:var(--track-label); color:rgba(255,255,255,.5); white-space:nowrap; transition:color .3s; }
.marquee li:hover{ color:var(--tal-gold); }
@keyframes marquee{ to{ transform:translateX(-50%); } }
@media (prefers-reduced-motion: reduce){
  .marquee{ animation:none; width:auto; flex-wrap:wrap; justify-content:center; }
  .marquee ul[aria-hidden]{ display:none; }
  .marquee ul{ flex-wrap:wrap; justify-content:center; row-gap:.75rem; }   /* the row wraps when it stops moving (launch audit D2) */
  .scroll-cue::after{ animation:none; }
  .hero-carousel .splide__slide.is-active .kb .slide-img{ animation:none; }
  .hero-carousel .splide__slide.is-active .slide-caption > :nth-child(n){ animation:capUp .01ms forwards; }   /* at once, without the stagger */
  .hero-carousel .splide .splide__pagination .splide__pagination__page.is-active::after{ transform:none; }
  .hero-carousel .splide .splide__arrows .splide__arrow{ transition:none; }
}

/* ============================================================
   CTA — parallax photo band
   ============================================================ */
.cta-parallax{ position:relative; overflow:hidden; color:#fff; }
.cta-parallax .parallax-media{ position:absolute; inset:-12% 0; will-change:transform; }
.cta-parallax .parallax-media img{ width:100%; height:100%; object-fit:cover; }
.cta-parallax .shade{ position:absolute; inset:0; background:rgba(8,23,41,.85); }
.cta-parallax .inner{ position:relative; z-index:2; padding-block:clamp(4.5rem,10vw,7.5rem); }
.cta-parallax h2{ color:#fff; font-size:var(--fs-h2); max-width:22ch; }
.cta-parallax p{ color:rgba(255,255,255,.8); max-width:54ch; }
.cta-mail{ color:var(--tal-gold); text-decoration:none; border-bottom:1px solid var(--tal-gold-dim); }
.cta-mail:hover{ color:#fff; border-color:#fff; }

/* form + cta-alt styles come from talanta.css */

/* ============================================================
   FOOTER
   ============================================================ */
.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; }   /* touch-friendly */
.foot-text{ display:block; padding-block:.25rem; }
.foot-base{ border-top:1px solid rgba(255,255,255,.12); padding-top:1.5rem; }

/* reveal system comes from talanta.css */
@media (prefers-reduced-motion: reduce){
  .pillars .pillar-line{ transform:scaleX(1); transition:none; }
}
/* body ships with .is-loading in markup; only JS removes it — without JS the page must still scroll */
.no-js body.is-loading{ overflow:auto; }

/* ============================================================
   LIGHT CHROME — white header, light footer and preloader so the
   T-badge lockup shows in its navy and bronze artwork colours
   ============================================================ */
.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; }