/* ============================================================
   TALANTA — approach page styles: approach.html <style>, lines 20–144, verbatim.
   Loaded on pages using the talanta-approach template, after talanta.css (CONVERSION-PLAN.md section 0).
   ============================================================ */
/* Approach — page-specific */
h1,h2,h3{ font-weight:800; color:var(--tal-navy); line-height:1.12; letter-spacing:-.01em; }

/* 3A cards — navy / gold / navy, as in the company deck */
.a3-card{ height:100%; padding:2rem 1.5rem; border-radius:var(--bs-border-radius); background:var(--tal-navy); color:#fff; text-align:center; }
.a3-card.gold{ background:var(--tal-gold); color:var(--tal-navy); }
.a3-card .a3-num{ display:inline-flex; align-items:center; justify-content:center; width:4rem; height:4rem; border-radius:50%; font-weight:800; font-size:1.25rem; background:var(--tal-gold); color:var(--tal-navy); margin-bottom:1.25rem; }
.a3-card.gold .a3-num{ background:var(--tal-navy); color:#fff; }
.a3-card h3{ color:inherit; font-size:var(--fs-label); font-weight:600; letter-spacing:var(--track-label); text-transform:uppercase; margin-bottom:.75rem; }
.a3-card p{ margin:0; font-size:1rem; }
.a3-card.gold p{ color:var(--tal-navy); }
.a3-card:not(.gold) p{ color:rgba(255,255,255,.85); }

/* TALANTA 360 evaluate / outputs */
.eval-list{ list-style:none; margin:0; padding:0; display:grid; grid-template-columns:repeat(2, minmax(0,1fr)); gap:.75rem; }
.eval-list li{ display:flex; align-items:center; background:var(--tal-gray); padding:.9rem 1.1rem; font-weight:600; font-size:.95rem; color:var(--tal-navy); border-radius:var(--bs-border-radius); }
.eval-list li::before{ content:""; flex:none; display:inline-block; width:.7rem; height:.7rem; border-radius:50%; background:var(--tal-gold); margin-inline-end:.75rem; }
/* the dot stays beside the word on narrow phones (launch audit D5) */
@media (max-width:399.98px){ .eval-list li{ padding-inline:.8rem; } .eval-list li::before{ margin-inline-end:.5rem; } }
.outputs{ background:var(--tal-navy); color:#fff; border-radius:var(--bs-border-radius); padding:2rem 1.75rem; height:100%; }
.outputs h3{ color:var(--tal-gold); font-size:var(--fs-label); font-weight:600; letter-spacing:var(--track-eyebrow); text-transform:uppercase; margin-bottom:1.25rem; }
.outputs ul{ list-style:none; margin:0; padding:0; }
.outputs li{ padding:.55rem 0; font-size:.98rem; }
.outputs li::before{ content:""; display:inline-block; width:.8rem; height:.8rem; background:var(--tal-gold); margin-inline-end:.9rem; vertical-align:middle; }

/* TALANTA ONE pipeline chevrons */
.pipeline{ list-style:none; margin:0; padding:0; display:flex; flex-wrap:wrap; gap:.5rem; }
.pipeline li{ flex:1 1 140px; padding:1rem 1.75rem 1rem 1.25rem; background:var(--tal-navy); color:#fff; font-weight:600; font-size:.9rem; text-align:center;
  clip-path:polygon(0 0, calc(100% - 14px) 0, 100% 50%, calc(100% - 14px) 100%, 0 100%); }
.pipeline li:last-child{ background:var(--tal-gold); color:var(--tal-navy); }
.module{ background:var(--tal-gray); border-top:4px solid var(--tal-navy); padding:1.25rem 1rem; text-align:center; font-weight:600; font-size:.9rem; color:var(--tal-navy); height:100%; }

/* dashboard sample */
.dash{ background:var(--tal-gray); border-radius:var(--bs-border-radius); padding:1.75rem 1.5rem; position:relative; overflow:hidden; }
.dash .score-label{ font-size:var(--fs-label); font-weight:600; letter-spacing:var(--track-label); text-transform:uppercase; color:var(--tal-gold-ink); }
.dash .note{ font-size:.8rem; font-style:italic; color:var(--tal-charcoal); margin:1.25rem 0 0; }
/* health gauge */
.dash-score{ display:flex; flex-direction:column; align-items:center; justify-content:center; }
.gauge{ position:relative; width:min(200px,60vw); aspect-ratio:1; margin:.25rem auto 0; }
.gauge svg{ width:100%; height:100%; transform:rotate(-90deg); overflow:visible; }
.gauge .g-track{ fill:none; stroke:rgba(12,35,64,.1); stroke-width:9; }
.gauge .g-ticks{ fill:none; stroke:rgba(12,35,64,.22); stroke-width:3; stroke-dasharray:.4 4.6; }
.gauge .g-arc{ fill:none; stroke:var(--tal-navy); stroke-width:9; stroke-linecap:round; stroke-dasharray:100 100;
  stroke-dashoffset:calc(100 - var(--v)); transition:stroke-dashoffset 1.8s var(--tal-ease) .25s; }
.gauge .g-cap{ fill:var(--tal-gold); transform-origin:60px 60px; transform:rotate(calc(var(--v) * 3.6deg)); transition:transform 1.8s var(--tal-ease) .25s; }
.gauge .g-num{ position:absolute; inset:0; display:grid; place-items:center; text-align:center; }
.gauge .score{ font-weight:800; font-size:clamp(2.4rem,5vw,3.1rem); color:var(--tal-navy); line-height:1; font-variant-numeric:tabular-nums; }
.gauge .score small{ font-size:.5em; font-weight:700; margin-inline-start:.05em; }
.status-chip{ display:inline-flex; align-items:center; gap:.45rem; margin-top:1rem; padding:.3rem .8rem; border:1px solid rgba(12,35,64,.18);
  border-radius:999px; font-size:.78rem; font-weight:600; color:var(--tal-navy); background:#fff; }
.status-chip::before{ content:""; width:.5rem; height:.5rem; border-radius:50%; background:var(--tal-gold); box-shadow:0 0 0 0 rgba(200,169,91,.6); }
.reveal.in .status-chip::before{ animation:chipPulse 2.4s ease-out 2.1s 2; }
@keyframes chipPulse{ 0%{ box-shadow:0 0 0 0 rgba(200,169,91,.6);} 100%{ box-shadow:0 0 0 .6rem rgba(200,169,91,0);} }
/* bars */
.bar{ display:grid; grid-template-columns:1fr auto; gap:.45rem 1rem; align-items:center; margin-top:1.15rem; padding:.35rem .5rem; margin-inline:-.5rem; border-radius:4px; transition:background-color .25s; }
.bar:hover{ background:rgba(12,35,64,.04); }
.bar .lbl{ font-weight:600; font-size:.92rem; color:var(--tal-navy); }
.bar .val{ font-weight:800; color:var(--tal-gold-ink); font-variant-numeric:tabular-nums; }
.bar .track{ grid-column:1 / -1; display:block; position:relative; height:.6rem; background:rgba(12,35,64,.1); border-radius:999px; overflow:hidden; }
.bar .fill{ display:block; position:absolute; inset-block:0; inset-inline-start:0; width:100%; border-radius:999px;
  background:linear-gradient(90deg, var(--tal-navy) 0%, var(--tal-navy-soft) 100%);
  transform-origin:left center; transform:scaleX(var(--v));
  transition:transform 1.4s var(--tal-ease) calc(.35s + var(--i,0) * .15s); }
[dir="rtl"] .bar .fill{ transform-origin:right center; background:linear-gradient(270deg, var(--tal-navy) 0%, var(--tal-navy-soft) 100%); }
/* gold leading edge + one-time sheen, kept outside the scaled box so they don't stretch */
.bar .edge{ position:absolute; inset-block:0; inset-inline-start:calc(var(--v) * 100% - 4px); width:4px; border-radius:2px; background:var(--tal-gold);
  transition:inset-inline-start 1.4s var(--tal-ease) calc(.35s + var(--i,0) * .15s), opacity .3s; }
.bar .track::after{ content:""; position:absolute; inset:0; width:30%; background:linear-gradient(90deg,transparent,rgba(255,255,255,.35),transparent);
  transform:translateX(-120%); pointer-events:none; }
.reveal.in .bar .track::after{ animation:barSheen 1.1s ease-in-out calc(1.9s + var(--i,0) * .15s) 1 both; }
@keyframes barSheen{ to{ transform:translateX(420%); } }
[dir="rtl"] .bar .track::after{ display:none; }
/* pre-reveal state (JS only; without JS everything shows final) */
html:not(.no-js) .reveal:not(.in) .g-arc{ stroke-dashoffset:100; }
html:not(.no-js) .reveal:not(.in) .g-cap{ transform:rotate(0deg); opacity:0; }
html:not(.no-js) .reveal:not(.in) .bar .fill{ transform:scaleX(0); }
html:not(.no-js) .reveal:not(.in) .bar .edge{ inset-inline-start:0; opacity:0; }
@media (prefers-reduced-motion: reduce){
  .gauge .g-arc, .gauge .g-cap, .bar .fill, .bar .edge{ transition:none; }
  .reveal.in .bar .track::after, .reveal.in .status-chip::before{ animation:none; }
}

/* ecosystem */
.eco{ height:100%; background:var(--tal-navy); border-top:5px solid var(--tal-gold); border-radius:var(--bs-border-radius); padding:1.75rem 1.25rem; text-align:center; }
.eco .eco-name{ display:block; color:var(--tal-gold); font-weight:700; font-size:.9rem; letter-spacing:.06em; margin-bottom:.6rem; }
.eco .eco-what{ display:block; color:#fff; font-weight:600; font-size:1.05rem; }
/* transformation journey — teardrop pins on a dashed track, labels alternating
   above/below (after the company profile slide). Fill ramps from deep navy to
   gold: the further along, the closer to the result. Navy + gold only. */
.journey-lede{ font-style:italic; }
.j-steps{ --pin:5.25rem; --lab:3.4rem; list-style:none; margin:3rem 0 0; padding:0; position:relative;
  display:grid; grid-template-columns:repeat(6,1fr); }
.j-steps::before{ content:""; position:absolute; z-index:0; top:calc(var(--lab) + var(--pin)/2 - 1px);
  inset-inline:calc(100%/12); border-top:2px dashed rgba(200,169,91,.6); }
.j-steps li{ position:relative; z-index:1; display:grid; grid-template-rows:var(--lab) var(--pin) var(--lab); justify-items:center; text-align:center; }
.j-pin{ grid-row:2; position:relative; width:var(--pin); height:var(--pin); display:grid; place-items:center; }
.j-pin::before{ content:""; position:absolute; inset:0; background:var(--c); border-radius:50% 0 50% 50%;
  transform:rotate(45deg); box-shadow:0 0 0 1px rgba(200,169,91,.35); }
.j-num{ position:relative; width:calc(var(--pin) - 1.4rem); height:calc(var(--pin) - 1.4rem); border-radius:50%;
  display:grid; place-items:center; background:var(--c); border:4px solid var(--tal-navy);
  font-weight:800; font-size:1.55rem; line-height:1; color:var(--ink,#fff); }
.j-label{ padding-inline:.35rem; color:#fff; font-size:.82rem; font-weight:600; letter-spacing:.14em; text-transform:uppercase; line-height:1.4; }
.j-steps li:nth-child(odd) .j-label{ grid-row:1; align-self:end; padding-bottom:.9rem; }
.j-steps li:nth-child(even) .j-label{ grid-row:3; align-self:start; padding-top:.9rem; }
.j-steps li:nth-child(1){ --c:#24456F; }
.j-steps li:nth-child(2){ --c:#3A5F8E; }
.j-steps li:nth-child(3){ --c:#5B80B0; }
.j-steps li:nth-child(4){ --c:#8FB3E0; --ink:var(--tal-navy); }
.j-steps li:nth-child(5){ --c:#C9DAF0; --ink:var(--tal-navy); }
.j-steps li:nth-child(6){ --c:var(--tal-gold); --ink:var(--tal-navy); }
.j-steps li:nth-child(6) .j-label{ color:var(--tal-gold); }
[dir="rtl"] .j-pin::before{ transform:scaleX(-1) rotate(45deg); }
/* pins land one after another once the row scrolls in */
.j-steps.reveal{ opacity:1; transform:none; }
.j-steps li{ opacity:0; transform:translateY(14px); transition:opacity .6s ease, transform .6s var(--tal-ease); transition-delay:calc(var(--i) * 120ms); }
.j-steps.in li{ opacity:1; transform:none; }
.no-js .j-steps li{ opacity:1; transform:none; }
@media (prefers-reduced-motion: reduce){ .j-steps li{ opacity:1; transform:none; transition:none; } }
/* below md: vertical track, pins point down, labels beside */
@media (max-width: 767.98px){
  .j-steps{ --pin:4.25rem; grid-template-columns:1fr; row-gap:1.25rem; margin-top:2rem; }
  .j-steps::before{ top:calc(var(--pin)/2); bottom:calc(var(--pin)/2); inset-inline:calc(var(--pin)/2 - 1px) auto; border-top:0; border-inline-start:2px dashed rgba(200,169,91,.6); }
  .j-steps li{ display:flex; align-items:center; gap:1.25rem; text-align:start; }
  .j-pin::before, [dir="rtl"] .j-pin::before{ transform:rotate(135deg); }
  .j-num{ font-size:1.25rem; border-width:3px; }
  .j-steps li:nth-child(n) .j-label{ padding:0; align-self:center; font-size:.85rem; }
}