@charset "UTF-8";
/* =============================================================
   EA Associates Ghana — Chartered Accountants
   Editorial photographic site. Light by default, night on toggle.
   Hand-authored, no build step, no framework.
   ============================================================= */

/* ---------- 1. Tokens ---------- */
:root{
  color-scheme: light;

  /* Brand — taken from the logo: blue leads, green supports, gold accents */
  --blue:        #134395;   /* the wordmark blue — headings and primary */
  --blue-deep:   #0C2F6C;
  --blue-lift:   #27A3DC;   /* the light blue in the mark */
  --green:       #4CB748;   /* the mark's green */
  --green-lift:  #8DC63F;
  --gold:        #C0A063;   /* retained accent — motion, rules, small marks */
  --gold-ink:    #8C6A22;   /* darkened for text on light, AA at 14px */
  --gold-lift:   #D8B771;

  /* Surfaces */
  --paper:       #FBFAF7;
  --paper-2:     #FFFFFF;
  --surface:     #F3F0E8;
  --surface-2:   #EDE8DD;

  /* Ink — a blue-grey family so body copy belongs to the logo */
  --ink:         #15304F;
  --ink-2:       #40556F;
  --ink-3:       #6B7E94;
  --heading:     var(--blue);
  --on-photo:    #FFFFFF;

  --line:        rgba(19,67,149,.16);
  --line-soft:   rgba(19,67,149,.09);
  --gold-veil:   rgba(192,160,99,.16);
  --blue-veil:   rgba(19,67,149,.10);
  --shadow:      0 1px 2px rgba(10,48,90,.05), 0 12px 34px -18px rgba(10,48,90,.26);

  /* Type */
  --serif: "Fraunces","Iowan Old Style","Palatino Linotype",Palatino,Georgia,"Times New Roman",serif;
  --sans:  "Inter",ui-sans-serif,system-ui,-apple-system,"Segoe UI",Roboto,Helvetica,Arial,sans-serif;

  --t-display: clamp(2.7rem, .9rem + 7.1vw, 7.2rem);
  --t-h2:      clamp(1.95rem, 1.1rem + 3.1vw, 3.7rem);
  --t-h3:      clamp(1.05rem, .93rem + .48vw, 1.3rem);
  --t-lede:    clamp(1.05rem, .95rem + .5vw, 1.35rem);
  --t-body:    clamp(.95rem, .91rem + .2vw, 1.04rem);
  --t-micro:   clamp(.67rem, .64rem + .1vw, .73rem);

  /* Space */
  --gut:   clamp(1.25rem, .6rem + 2.6vw, 3.5rem);
  --sec-y: clamp(5.5rem, 3rem + 10vw, 12rem);
  --wrap:  1280px;

  /* Motion — the built-in curves are too weak to feel intentional */
  --ease-out:    cubic-bezier(.23, 1, .32, 1);
  --ease-in-out: cubic-bezier(.77, 0, .175, 1);
  --d-press: 150ms;
  --d-enter: 320ms;
  --d-exit:  150ms;
  --d-theme: 420ms;
}

:root[data-theme="dark"]{
  color-scheme: dark;
  --blue:      #5FB0EE;      /* the brand blue, lifted so it reads on near-black */
  --blue-deep: #134395;
  --gold-ink:  #D8B771;
  --paper:     #060A14;
  --paper-2:   #0B1120;
  --surface:   #101827;
  --surface-2: #16202F;
  --ink:       #EEF2F6;
  --ink-2:     #B3C0CE;
  --ink-3:     #84929F;
  --heading:   #EEF2F6;
  --line:      rgba(238,242,246,.14);
  --line-soft: rgba(238,242,246,.07);
  --gold-veil: rgba(216,183,113,.14);
  --blue-veil: rgba(95,176,238,.12);
  --shadow:    0 1px 2px rgba(0,0,0,.5), 0 18px 46px -22px rgba(0,0,0,.85);
}

/* ---------- 2. Reset ---------- */
*,*::before,*::after{ box-sizing:border-box; }
html{ -webkit-text-size-adjust:100%; scroll-behavior:smooth; }
body{
  margin:0; background:var(--paper); color:var(--ink);
  font-family:var(--sans); font-size:var(--t-body); font-weight:300;
  line-height:1.68; letter-spacing:.004em;
  -webkit-font-smoothing:antialiased; -moz-osx-font-smoothing:grayscale;
  overflow-x:hidden;
  transition:background-color var(--d-theme) var(--ease-out),
             color var(--d-theme) var(--ease-out);
}
img,svg,video{ display:block; max-width:100%; }
a{ color:inherit; text-decoration:none; }
h1,h2,h3,h4{ margin:0; font-weight:400; letter-spacing:-.022em; }
p{ margin:0; }
ul,ol,dl{ margin:0; padding:0; list-style:none; }
button,input,select,textarea{ font:inherit; color:inherit; }
::selection{ background:var(--gold); color:#12162F; }
:focus-visible{ outline:2px solid var(--gold-ink); outline-offset:3px; border-radius:3px; }

.skip{
  position:fixed; top:.5rem; left:.5rem; z-index:300;
  padding:.6rem 1rem; background:var(--gold); color:#12162F; border-radius:4px;
  transform:translateY(-180%); transition:transform var(--d-enter) var(--ease-out);
}
.skip:focus{ transform:translateY(0); }

/* ---------- 3. Golden accent layer ---------- */
/* Canvas of slow gold filaments whose flow is driven by scroll position and
   velocity. Sits behind everything, never intercepts pointer events. */
#goldfx{
  position:fixed; inset:0; z-index:0; pointer-events:none;
  opacity:.85; transition:opacity var(--d-theme) var(--ease-out);
}
:root[data-theme="dark"] #goldfx{ opacity:1; }

/* Scroll-progress rail, right edge */
.rail{
  position:fixed; top:0; right:0; width:2px; height:100vh; z-index:90;
  background:var(--line-soft); pointer-events:none;
}
.rail__fill{
  position:absolute; inset:0 0 auto 0; height:100%;
  transform:scaleY(var(--p,0)); transform-origin:top;
  background:linear-gradient(to bottom,var(--gold-lift),var(--gold));
  box-shadow:0 0 12px 1px var(--gold-veil);
}
@media (max-width:700px){ .rail{ display:none; } }

/* A gold hairline that draws itself across the page as a section arrives */
.hairline{ display:block; width:100%; height:1px; border:0; margin:0;
  background:linear-gradient(to right,var(--gold),var(--gold-lift));
  transform:scaleX(var(--draw,0)); transform-origin:left; opacity:.85; }

/* ---------- 4. Layout ---------- */
.wrap{ width:min(var(--wrap),100% - (var(--gut) * 2)); margin-inline:auto; }
.sec{ position:relative; z-index:2; padding-block:var(--sec-y); }
.sec--tight{ padding-block:calc(var(--sec-y) * .66); }
.sec--surface{ background:var(--surface);
  transition:background-color var(--d-theme) var(--ease-out); }
.editorial{ display:grid; gap:clamp(1.5rem,4vw,4rem); grid-template-columns:1fr; }
@media (min-width:900px){ .editorial{ grid-template-columns:minmax(150px,1fr) minmax(0,2.4fr); } }
.col-main{ max-width:70ch; }

/* ---------- 5. Type ---------- */
.display{
  color:var(--heading);
  font-family:var(--serif); font-size:var(--t-display); font-weight:300;
  line-height:.99; letter-spacing:-.035em; text-wrap:balance;
}
.display em{ font-style:italic; color:var(--gold-lift); }
.h2{
  color:var(--heading);
  font-family:var(--serif); font-size:var(--t-h2); font-weight:300;
  line-height:1.07; letter-spacing:-.03em; text-wrap:balance; margin-bottom:1.4rem;
}
.lede{ font-size:var(--t-lede); color:var(--ink-2); max-width:52ch; line-height:1.56; }
.body-lg{ font-size:calc(var(--t-body) * 1.1); color:var(--ink-2); margin-bottom:1.1rem; }
.body{ color:var(--ink-3); margin-bottom:1.6rem; }
.eyebrow,.marker{
  font-size:var(--t-micro); letter-spacing:.24em; text-transform:uppercase;
  font-weight:500; color:var(--ink-3);
}
.marker{ color:var(--gold-ink); }
@media (min-width:900px){ .col-side .marker{ position:sticky; top:7.5rem; } }
.sechead{ margin-bottom:clamp(2.4rem,6vw,4.4rem); max-width:60ch; }
.sechead .marker{ display:block; margin-bottom:1rem; }
.footnote{ margin-top:2.5rem; font-size:.8rem; color:var(--ink-3); font-style:italic; }

/* Gold sweep across a headline as it enters the viewport.
   The gradient must name a real colour: once the sweep runs, `color` is
   transparent, so a currentColor stop would erase the text. */
.sweep{
  --sweep-base:var(--heading);
  background-image:linear-gradient(100deg,
    var(--sweep-base) 0%, var(--sweep-base) 34%,
    var(--gold-lift) 46%, var(--gold) 52%,
    var(--sweep-base) 64%, var(--sweep-base) 100%);
  background-size:280% 100%; background-position:130% 0;
  -webkit-background-clip:text; background-clip:text;
}
.sweep.is-in{
  color:transparent;
  transition:background-position 1500ms var(--ease-out) 160ms;
  background-position:-30% 0;
}

/* ---------- 6. Nav ---------- */
.nav{
  position:fixed; inset:0 0 auto 0; z-index:100;
  border-bottom:1px solid transparent;
  transition:background-color var(--d-enter) var(--ease-out),
             backdrop-filter var(--d-enter) var(--ease-out),
             border-color var(--d-enter) var(--ease-out),
             transform 380ms var(--ease-out);
}
.nav.is-stuck{
  background:color-mix(in srgb, var(--paper) 88%, transparent);
  backdrop-filter:blur(16px) saturate(150%);
  -webkit-backdrop-filter:blur(16px) saturate(150%);
  border-bottom-color:var(--line);
}
.nav.is-hidden{ transform:translateY(-100%); }
/* Before it condenses the bar floats over the hero photograph, so its
   contents switch to white rather than navy-on-photo. */
.nav:not(.is-stuck) .nav__links a{ color:rgba(255,255,255,.86); }
.nav:not(.is-stuck) .themer{ border-color:rgba(255,255,255,.36); }
.nav:not(.is-stuck) .themer svg{ stroke:#fff; }
.nav:not(.is-stuck) .burger{ border-color:rgba(255,255,255,.36); }
.nav:not(.is-stuck) .burger span{ background:#fff; }
@media (hover:hover) and (pointer:fine){
  .nav:not(.is-stuck) .nav__links a:hover{ color:#fff; }
  .nav:not(.is-stuck) .themer:hover{ border-color:#fff; background:rgba(255,255,255,.12); }
}
.nav__inner{
  width:min(var(--wrap),100% - (var(--gut) * 2)); margin-inline:auto;
  display:flex; align-items:center; gap:1.25rem;
  padding-block:clamp(.7rem,1.5vw,1.05rem);
}
.brand{ display:flex; align-items:center; }
.brand svg{ width:clamp(166px,18.5vw,228px); height:auto; }
/* The mark keeps its blue and green in both themes; only the lettering moves,
   because the supplied artwork sets the descriptor in near-black. */
.brand .logo__name{ fill:var(--blue); transition:fill var(--d-theme) var(--ease-out); }
.brand .logo__sub{ fill:#101418; transition:fill var(--d-theme) var(--ease-out); }
:root[data-theme="dark"] .brand .logo__name{ fill:#8ECBF7; }
:root[data-theme="dark"] .brand .logo__sub{ fill:rgba(238,242,246,.9); }
/* Over the hero photograph, before the bar condenses, the lettering goes white. */
.nav:not(.is-stuck) .brand .logo__name,
.nav:not(.is-stuck) .brand .logo__sub{ fill:#fff; }
.brand .brand__mark{ stroke:var(--gold); }

/* The gap comes down slightly as the type goes up, so the row occupies about
   the same width and the logo keeps its breathing space. */
.nav__links{ margin-left:auto; display:none; gap:1.75rem; }
@media (min-width:1040px){ .nav__links{ display:flex; } }
.nav__links a{
  position:relative; font-size:.97rem; color:var(--ink-2);
  transition:color 180ms var(--ease-out);
}
/* Between the breakpoint and about 1200px the logo, the links, the language
   and theme buttons and the quote button are all competing for one row. The
   type steps back down a little there rather than crowding the logo. */
@media (min-width:1040px) and (max-width:1200px){
  .nav__links{ gap:1.35rem; }
  .nav__links a{ font-size:.9rem; }
}
.nav__links a::after{
  content:""; position:absolute; left:0; right:0; bottom:-6px; height:1px;
  background:var(--gold); transform:scaleX(0); transform-origin:left;
  transition:transform 240ms var(--ease-out);
}
@media (hover:hover) and (pointer:fine){
  .nav__links a:hover{ color:var(--ink); }
  .nav__links a:hover::after{ transform:scaleX(1); }
}
.nav__tools{ margin-left:auto; display:flex; align-items:center; gap:.6rem; }
@media (min-width:1040px){ .nav__tools{ margin-left:1rem; } }
.nav .nav__cta{ display:none; }
@media (min-width:1040px){ .nav .nav__cta{ display:inline-flex; } }

/* Theme toggle */
.themer{
  position:relative; width:44px; height:44px; display:grid; place-content:center;
  background:transparent; border:1px solid var(--line); border-radius:999px;
  cursor:pointer;
  transition:transform var(--d-press) var(--ease-out),
             border-color 220ms var(--ease-out),
             background-color 220ms var(--ease-out);
}
.themer:active{ transform:scale(.94); }
@media (hover:hover) and (pointer:fine){
  .themer:hover{ border-color:var(--gold); background:var(--gold-veil); }
}
.themer svg{ width:19px; height:19px; stroke:var(--gold-ink); fill:none;
  stroke-width:1.5; stroke-linecap:round; }
.themer .i-moon{ display:none; }
:root[data-theme="dark"] .themer .i-sun{ display:none; }
:root[data-theme="dark"] .themer .i-moon{ display:block; }

.burger{
  width:44px; height:44px; display:grid; gap:5px; place-content:center;
  background:none; border:1px solid var(--line); border-radius:999px; cursor:pointer;
  transition:transform var(--d-press) var(--ease-out), border-color 220ms var(--ease-out);
}
.burger span{ display:block; width:17px; height:1.5px; background:var(--ink);
  border-radius:2px; transition:transform 260ms var(--ease-out); }
.burger:active{ transform:scale(.94); }
.burger[aria-expanded="true"] span:first-child{ transform:translateY(3.25px) rotate(45deg); }
.burger[aria-expanded="true"] span:last-child{ transform:translateY(-3.25px) rotate(-45deg); }
@media (min-width:1040px){ .burger{ display:none; } }

.mobilemenu{
  position:fixed; inset:0; z-index:99; display:grid; align-content:center; gap:.2rem;
  padding:var(--gut); background:color-mix(in srgb, var(--paper) 96%, transparent);
  backdrop-filter:blur(20px); -webkit-backdrop-filter:blur(20px);
  opacity:0; transform:scale(.985);
  transition:opacity var(--d-exit) ease, transform var(--d-exit) ease;
}
/* `display:grid` above beats the [hidden] attribute's `display:none`, which
   would otherwise leave an invisible full-screen sheet on top of the page
   swallowing every click. It has to be taken out of the tree explicitly. */
.mobilemenu[hidden]{ display:none; }
.mobilemenu:not(.is-open){ pointer-events:none; }
.mobilemenu.is-open{
  opacity:1; transform:scale(1); pointer-events:auto;
  transition:opacity var(--d-enter) var(--ease-out), transform var(--d-enter) var(--ease-out);
}
.mobilemenu a{
  font-family:var(--serif); font-size:clamp(1.65rem,7vw,2.5rem); font-weight:300;
  letter-spacing:-.03em; padding-block:.4rem; color:var(--ink-2);
  border-bottom:1px solid var(--line-soft);
  transition:color 200ms var(--ease-out), padding-left 260ms var(--ease-out);
}
.mobilemenu a:last-child{ color:var(--gold-ink); border-bottom:0; }
@media (hover:hover) and (pointer:fine){
  .mobilemenu a:hover{ color:var(--ink); padding-left:.6rem; }
}

/* ---------- 7. Buttons ---------- */
.btn{
  display:inline-flex; align-items:center; justify-content:center; gap:.5rem;
  padding:.8rem 1.5rem; border-radius:999px; border:1px solid transparent;
  font-size:.87rem; font-weight:500; cursor:pointer; white-space:nowrap;
  transition:transform var(--d-press) var(--ease-out),
             background-color 220ms var(--ease-out),
             border-color 220ms var(--ease-out),
             color 220ms var(--ease-out),
             box-shadow 260ms var(--ease-out);
}
.btn:active{ transform:scale(.97); }
.btn--gold{ background:var(--blue); color:#fff; }
.btn--accent{ background:var(--gold); color:#151935; }
.btn--navy{ background:var(--blue); color:#fff; }
.btn--ghost{ border-color:var(--line); color:var(--ink); }
.btn--onphoto{ border-color:rgba(255,255,255,.42); color:#fff; backdrop-filter:blur(6px); }
@media (hover:hover) and (pointer:fine){
  .btn--gold:hover{ background:var(--blue-deep); box-shadow:0 10px 30px -12px rgba(19,67,149,.7); }
  :root[data-theme="dark"] .btn--gold:hover{ background:#7FC2F5; }
  .btn--accent:hover{ background:var(--gold-lift); box-shadow:0 10px 30px -12px rgba(192,160,99,.9); }
  .btn--navy:hover{ background:var(--blue-deep); }
  :root[data-theme="dark"] .btn--navy:hover{ background:var(--surface-2); }
  .btn--ghost:hover{ border-color:var(--gold); color:var(--gold-ink); background:var(--gold-veil); }
  .btn--onphoto:hover{ background:rgba(255,255,255,.14); border-color:#fff; }
}

/* ---------- 8. Photographic chapters ---------- */
.ph{ position:absolute; inset:0; overflow:hidden; }
.ph img{
  position:absolute; inset:0; width:100%; height:100%; object-fit:cover;
  will-change:transform;
  /* Parallax: --shift is written by JS from the section's scroll progress */
  transform:translate3d(0, var(--shift,0px), 0) scale(1.12);
}
.ph__night{ opacity:0; transition:opacity var(--d-theme) var(--ease-out); }
:root[data-theme="dark"] .ph__day{ opacity:0; transition:opacity var(--d-theme) var(--ease-out); }
:root[data-theme="dark"] .ph__night{ opacity:1; }
.ph__scrim{
  position:absolute; inset:0;
  background:
    linear-gradient(to right, rgba(10,13,28,.9) 0%, rgba(10,13,28,.72) 30%, rgba(10,13,28,.34) 62%, rgba(10,13,28,.12) 88%),
    linear-gradient(to top, rgba(10,13,28,.8) 0%, transparent 46%);
}
/* Narrow screens: the copy runs the full width of the photograph, so the
   scrim stops being a side-gradient and becomes an even wash. */
@media (max-width:900px){
  .ph__scrim{
    background:
      linear-gradient(to bottom, rgba(10,13,28,.72) 0%, rgba(10,13,28,.5) 34%, rgba(10,13,28,.72) 100%),
      linear-gradient(to right, rgba(10,13,28,.5), rgba(10,13,28,.3));
  }
  :root[data-theme="dark"] .ph__scrim{
    background:
      linear-gradient(to bottom, rgba(4,6,16,.8) 0%, rgba(4,6,16,.58) 34%, rgba(4,6,16,.82) 100%),
      linear-gradient(to right, rgba(4,6,16,.55), rgba(4,6,16,.35));
  }
}

:root[data-theme="dark"] .ph__scrim{
  background:
    linear-gradient(to right, rgba(4,6,16,.9) 0%, rgba(4,6,16,.62) 44%, rgba(4,6,16,.22) 80%),
    linear-gradient(to top, rgba(4,6,16,.86) 0%, transparent 46%);
}

.chapter{
  position:relative; z-index:2; min-height:min(100svh,860px);
  display:flex; align-items:flex-end; overflow:clip;
  padding-block:clamp(5rem,12vh,9rem) clamp(3rem,7vh,5rem);
  color:var(--on-photo);
}
.chapter--hero{ min-height:100svh; align-items:center;
  /* Clears the fixed header, which carries the navigation and both ticker
     bars — about 212px on a desktop. The floor does the work, because 30vh
     only reaches that on a tall viewport. */
  padding-top:clamp(17.5rem,30vh,20rem); }
.chapter__inner{ position:relative; z-index:1;
  width:min(var(--wrap),100% - (var(--gut) * 2)); margin-inline:auto; }
.chapter .eyebrow,.chapter .marker{ color:var(--gold-lift); }
.chapter .lede,.chapter .body-lg{ color:rgba(255,255,255,.84); }
.chapter .display,.chapter .h2{ color:#fff; }
.chapter .sweep{ --sweep-base:#fff; }

/* Small technical caption under each chapter, like a spec line on a plan */
.spec{
  display:flex; flex-wrap:wrap; align-items:center; gap:.5rem 1.5rem;
  margin-top:clamp(1.8rem,4vw,3rem); padding-top:.9rem;
  border-top:1px solid rgba(255,255,255,.28);
  font-size:var(--t-micro); letter-spacing:.2em; text-transform:uppercase;
  color:rgba(255,255,255,.72);
}
.spec b{ color:var(--gold-lift); font-weight:500; }

/* ---------- 9. Hero ---------- */
.hero__cta{ display:flex; flex-wrap:wrap; gap:.7rem; margin-top:2.3rem; }
.hero__stats{
  display:grid; gap:1.4rem 2.5rem; margin-top:clamp(2.6rem,6vw,4.2rem);
  grid-template-columns:repeat(2,minmax(0,1fr)); max-width:820px;
  padding-top:1.6rem; border-top:1px solid rgba(255,255,255,.24);
}
@media (min-width:760px){ .hero__stats{ grid-template-columns:repeat(4,minmax(0,1fr)); } }
.hero__stats dt{ font-size:var(--t-micro); letter-spacing:.18em;
  text-transform:uppercase; color:rgba(255,255,255,.62); }
.hero__stats dd{ margin:.3rem 0 0; font-family:var(--serif); font-size:1.85rem;
  font-weight:300; letter-spacing:-.02em; color:var(--gold-lift);
  font-variant-numeric:tabular-nums; }

.scrollhint{
  position:absolute; left:50%; bottom:1.8rem; translate:-50% 0; z-index:2;
  display:flex; align-items:center; gap:.6rem; color:rgba(255,255,255,.6);
  font-size:var(--t-micro); letter-spacing:.24em; text-transform:uppercase;
}
.scrollhint i{ display:block; width:1px; height:32px;
  background:linear-gradient(to bottom,var(--gold-lift),transparent);
  animation:drop 2.4s var(--ease-in-out) infinite; }
@keyframes drop{
  0%,100%{ transform:scaleY(.32); transform-origin:top; opacity:.35 }
  50%    { transform:scaleY(1);   transform-origin:top; opacity:1 }
}

/* ---------- 10. Ticks ---------- */
.ticks{ display:grid; gap:.7rem; margin-top:.4rem; }
.ticks li{ position:relative; padding-left:1.7rem; color:var(--ink-2); font-size:.95rem; }
.ticks li::before{
  content:""; position:absolute; left:0; top:.6em; width:9px; height:9px;
  border:1.5px solid var(--gold); border-radius:1px; transform:rotate(45deg);
}

/* ---------- 11. Cards ---------- */
.cards{
  display:grid; gap:1px; background:var(--line-soft);
  border:1px solid var(--line-soft); border-radius:14px; overflow:hidden;
  grid-template-columns:1fr;
}
@media (min-width:660px){ .cards{ grid-template-columns:repeat(2,1fr); } }
@media (min-width:1040px){ .cards{ grid-template-columns:repeat(3,1fr); } .card--wide{ grid-column:span 3; } }
.card{
  position:relative; isolation:isolate; overflow:hidden;
  background:var(--paper-2); padding:clamp(1.6rem,3vw,2.4rem);
  transition:background-color 300ms var(--ease-out), transform 420ms var(--ease-out);
}
:root[data-theme="dark"] .card{ background:var(--paper-2); }
.card__no{
  display:block; font-family:var(--serif); font-size:.82rem; letter-spacing:.2em;
  color:var(--gold-ink); margin-bottom:1.5rem;
}
.card h3{ color:var(--heading); font-family:var(--serif); font-size:var(--t-h3); line-height:1.2; margin-bottom:.7rem; }
.card p{ color:var(--ink-3); font-size:.94rem; }
.card__glow{
  position:absolute; z-index:-1; width:330px; height:330px; border-radius:50%;
  left:var(--mx,50%); top:var(--my,50%); translate:-50% -50%; opacity:0;
  background:radial-gradient(circle, var(--gold-veil), transparent 62%);
  transition:opacity 340ms var(--ease-out);
}
@media (hover:hover) and (pointer:fine){
  .card:hover{ background:var(--surface); }
  .card:hover .card__glow{ opacity:1; }
}

/* ---------- 12. Sectors ---------- */
.sectors{ border-top:1px solid var(--line); margin-top:2rem; }
.sectors li{
  display:flex; flex-wrap:wrap; align-items:baseline; justify-content:space-between;
  gap:.4rem 1.5rem; padding:1.05rem .25rem; border-bottom:1px solid var(--line-soft);
  transition:padding-left 320ms var(--ease-out), border-color 320ms var(--ease-out);
}
.sectors li span{ color:var(--heading); font-family:var(--serif); font-size:1.1rem; letter-spacing:-.015em; }
.sectors li i{ font-style:normal; font-size:.76rem; letter-spacing:.1em;
  text-transform:uppercase; color:var(--ink-3); transition:color 260ms var(--ease-out); }
@media (hover:hover) and (pointer:fine){
  .sectors li:hover{ padding-left:.85rem; border-bottom-color:var(--gold); }
  .sectors li:hover i{ color:var(--gold-ink); }
}

/* ---------- 13. Steps ---------- */
.steps{ display:grid; gap:1px; background:var(--line-soft);
  border-block:1px solid var(--line-soft); }
@media (min-width:900px){ .steps{ grid-template-columns:repeat(4,1fr); } }
.steps li{ background:var(--paper); padding:clamp(1.6rem,3vw,2.3rem) clamp(1.2rem,2vw,1.8rem); }
.sec--surface .steps li{ background:var(--surface); }
.steps__num{ display:block; font-family:var(--serif); font-size:2.5rem; font-weight:300;
  line-height:1; color:var(--gold); margin-bottom:1.3rem; }
.steps h3{ color:var(--heading); font-family:var(--serif); font-size:var(--t-h3); line-height:1.2; margin-bottom:.65rem; }
.steps p{ color:var(--ink-3); font-size:.92rem; }

/* ---------- 14. Metrics + quote ---------- */
.metrics{
  display:grid; gap:2.2rem 1.5rem; grid-template-columns:repeat(2,1fr);
  padding-bottom:clamp(2.8rem,6vw,4.5rem); border-bottom:1px solid var(--line-soft);
}
@media (min-width:860px){ .metrics{ grid-template-columns:repeat(4,1fr); } }
.metrics strong{
  display:block; color:var(--heading); font-family:var(--serif); font-weight:300;
  font-size:clamp(2.5rem,6vw,4rem); line-height:1; letter-spacing:-.04em;
  font-variant-numeric:tabular-nums;
}
.metrics span{ display:block; margin-top:.65rem; font-size:.84rem;
  color:var(--ink-3); max-width:22ch; }
.quote{ margin:clamp(2.8rem,6vw,4.5rem) 0 0; max-width:62ch; }
.quote p{ color:var(--heading); font-family:var(--serif); font-size:clamp(1.3rem,2.5vw,1.95rem);
  font-weight:300; line-height:1.36; letter-spacing:-.02em; text-wrap:balance; }
.quote cite{ display:block; margin-top:1.3rem; font-style:normal; font-size:.79rem;
  letter-spacing:.14em; text-transform:uppercase; color:var(--ink-3); }
.quote cite em{ text-transform:none; letter-spacing:0; opacity:.75; }

/* ---------- 15. People ---------- */
/* Partner cards. The portrait carries the motion — it pushes in and
   brightens while a gold sheen crosses it — and the card itself only lifts.
   Everything is transform and opacity; nothing reflows. */
.people{
  display:grid; gap:clamp(1rem,2vw,1.6rem);
  grid-template-columns:1fr; margin-top:clamp(2rem,4vw,3rem);
}
@media (min-width:680px){ .people{ grid-template-columns:repeat(2,1fr); } }
@media (min-width:1000px){ .people{ grid-template-columns:repeat(3,1fr); } }

.person{
  --lift:0px;
  position:relative; isolation:isolate; cursor:pointer;
  background:var(--paper-2); padding:clamp(1.4rem,2.4vw,1.9rem);
  transform:translate3d(0,var(--lift),0);
  transition:background-color 320ms var(--ease-out), transform 320ms var(--ease-out);
}
.person:focus-visible{ outline:2px solid var(--gold); outline-offset:-4px; }

.person__portrait{
  position:relative; aspect-ratio:4 / 5; overflow:hidden;
  margin-bottom:1.3rem; border-radius:10px; border:1px solid var(--line-soft);
  background:var(--surface);
}
.person__portrait img{
  width:100%; height:100%; object-fit:cover; display:block;
  filter:saturate(.82) contrast(1.02);
  transform:scale(1.01);
  transition:transform 720ms var(--ease-out), filter 520ms var(--ease-out);
}
/* A single gold pass across the portrait — the one indulgence, and it only
   runs on a deliberate hover, never on load. */
.person__sheen{
  position:absolute; inset:0; pointer-events:none; opacity:0;
  background:linear-gradient(105deg,
    transparent 36%, rgba(216,183,113,.42) 50%, transparent 64%);
  transform:translate3d(-60%,0,0);
  transition:opacity 260ms var(--ease-out);
}
/* A hairline of gold draws along the bottom of the portrait. */
.person__portrait::after{
  content:''; position:absolute; left:0; right:0; bottom:0; height:2px;
  background:linear-gradient(to right,var(--gold-lift),var(--gold));
  transform:scaleX(0); transform-origin:left;
  transition:transform 520ms var(--ease-out);
}

.person h3{ color:var(--heading); font-family:var(--serif); font-size:1.12rem;
  margin-bottom:.28rem; transition:color 260ms var(--ease-out); }
.person__role{ font-size:.74rem; letter-spacing:.11em; text-transform:uppercase;
  color:var(--gold-ink); margin-bottom:.75rem; }
.person p{ font-size:.87rem; color:var(--ink-3); }

.person__more{
  display:inline-flex; align-items:center; gap:.45rem; margin-top:1rem;
  font-size:var(--t-micro); letter-spacing:.16em; text-transform:uppercase;
  color:var(--gold-ink); opacity:0; transform:translate3d(0,6px,0);
  transition:opacity 300ms var(--ease-out), transform 300ms var(--ease-out);
}
.person__more svg{ width:15px; height:15px;
  transition:transform 300ms var(--ease-out); }

/* ---------- 15b. The partner biography sheet ---------- */
.sheet{ position:fixed; inset:0; z-index:200; display:grid; place-items:center;
  padding:clamp(1rem,4vw,2.5rem); }
.sheet[hidden]{ display:none; }
.sheet__veil{
  position:absolute; inset:0; background:rgba(8,11,24,.62);
  backdrop-filter:blur(6px); -webkit-backdrop-filter:blur(6px);
  opacity:0; transition:opacity 300ms var(--ease-out);
}
.sheet__panel{
  position:relative; width:min(900px,100%); max-height:88vh; overflow:auto;
  display:grid; grid-template-columns:1fr; gap:0;
  background:var(--paper); border:1px solid var(--line-soft); border-radius:16px;
  box-shadow:0 40px 90px -30px rgba(8,11,24,.55);
  opacity:0; transform:translate3d(0,14px,0) scale(.97);
  transition:opacity 260ms var(--ease-out), transform 260ms var(--ease-out);
}
@media (min-width:760px){ .sheet__panel{ grid-template-columns:300px 1fr; } }
.sheet.is-open .sheet__veil{ opacity:1; }
.sheet.is-open .sheet__panel{ opacity:1; transform:none; }
/* Leaving is quicker than arriving. */
.sheet.is-closing .sheet__veil{ opacity:0; transition-duration:180ms; }
.sheet.is-closing .sheet__panel{
  opacity:0; transform:translate3d(0,8px,0) scale(.985); transition-duration:180ms;
}

.sheet__media{ position:relative; overflow:hidden;
  border-bottom:1px solid var(--line-soft); }
@media (min-width:760px){
  .sheet__media{ border-bottom:0; border-right:1px solid var(--line-soft); }
}
.sheet__media img{ width:100%; height:100%; min-height:220px; object-fit:cover; display:block; }
.sheet__copy{ padding:clamp(1.6rem,3.4vw,2.6rem); }
.sheet__copy .marker{ margin-bottom:.5rem; }
.sheet__copy .h3{ color:var(--heading); font-family:var(--serif); font-weight:300;
  font-size:clamp(1.4rem,3vw,1.9rem); letter-spacing:-.015em; margin-bottom:1.1rem; }
.sheet__copy p{ color:var(--ink-3); font-size:.94rem; margin-bottom:.9rem; }
.sheet__meta{ margin:1.5rem 0 0; padding-top:1.1rem; border-top:1px solid var(--line-soft);
  display:grid; gap:.7rem; }
.sheet__meta dt{ font-size:var(--t-micro); letter-spacing:.18em;
  text-transform:uppercase; color:var(--ink-3); }
.sheet__meta dd{ margin:.15rem 0 0; }
.sheet__meta a{ color:var(--gold-ink); }
.sheet__cta{ margin-top:1.6rem; }
.sheet__x{
  position:absolute; top:.85rem; right:.85rem; z-index:2;
  display:grid; place-items:center; width:36px; height:36px; border-radius:50%;
  border:1px solid var(--line-soft); background:var(--paper); color:var(--ink);
  cursor:pointer; transition:background-color 200ms var(--ease-out), transform 200ms var(--ease-out);
}
.sheet__x svg{ width:17px; height:17px; }
.sheet__x:active{ transform:scale(.93); }
@media (hover:hover) and (pointer:fine){ .sheet__x:hover{ background:var(--surface); } }
[dir="rtl"] .sheet__x{ right:auto; left:.85rem; }

@media (prefers-reduced-motion:reduce){
  .sheet__panel{ transform:none; }
  .sheet.is-closing .sheet__panel{ transform:none; }
}

/* ---------- 16. Insights ---------- */
.posts{ border-top:1px solid var(--line); }
.post{
  position:relative; display:block; border-bottom:1px solid var(--line-soft);
  padding:clamp(1.5rem,3vw,2.1rem) 3rem clamp(1.5rem,3vw,2.1rem) 0;
  transition:padding-left 340ms var(--ease-out), border-color 300ms var(--ease-out);
}
.post__date{ font-size:var(--t-micro); letter-spacing:.18em;
  text-transform:uppercase; color:var(--gold-ink); }
.post h3{ color:var(--heading); font-family:var(--serif); font-size:clamp(1.12rem,2.2vw,1.45rem);
  margin:.55rem 0 .45rem; line-height:1.26; }
.post p{ color:var(--ink-3); font-size:.91rem; max-width:56ch; }
.post__arrow{ position:absolute; right:.3rem; top:50%; translate:0 -50%;
  color:var(--gold-ink); opacity:0;
  transition:opacity 260ms var(--ease-out), translate 300ms var(--ease-out); }
@media (hover:hover) and (pointer:fine){
  .post:hover{ padding-left:1rem; border-bottom-color:var(--gold); }
  .post:hover .post__arrow{ opacity:1; translate:.4rem -50%; }
}

/* ---------- 17. Contact ---------- */
.contact{ display:grid; gap:clamp(2.4rem,6vw,4.5rem); align-items:start; }
@media (min-width:960px){ .contact{ grid-template-columns:1fr 1fr; } }
.contact__copy .marker{ display:block; margin-bottom:1rem; }
.contact__meta{ margin-top:2.4rem; border-top:1px solid var(--line); }
.contact__meta li{ display:grid; gap:.12rem; padding:.9rem 0;
  border-bottom:1px solid var(--line-soft); font-size:.94rem; color:var(--ink-2); }
.contact__meta span{ font-size:var(--t-micro); letter-spacing:.18em;
  text-transform:uppercase; color:var(--ink-3); }
@media (hover:hover) and (pointer:fine){
  .contact__meta a:hover{ color:var(--gold-ink); }
}

.form{
  display:grid; gap:1.05rem; grid-template-columns:repeat(2,1fr);
  padding:clamp(1.5rem,3vw,2.3rem);
  border:1px solid var(--line); border-radius:14px;
  background:var(--paper-2); box-shadow:var(--shadow);
}
.field{ display:grid; gap:.42rem; grid-column:span 2; }
@media (min-width:520px){ .field{ grid-column:span 1; } .field--full{ grid-column:span 2; } }
.field label{ font-size:var(--t-micro); letter-spacing:.16em;
  text-transform:uppercase; color:var(--ink-3); }
.field input,.field select,.field textarea{
  width:100%; padding:.76rem .9rem; background:var(--paper);
  border:1px solid var(--line); border-radius:8px; font-size:.94rem; font-weight:300;
  transition:border-color 200ms var(--ease-out), box-shadow 240ms var(--ease-out),
             background-color var(--d-theme) var(--ease-out);
}
.field textarea{ resize:vertical; min-height:110px; }
.field select{ appearance:none;
  background-image:linear-gradient(45deg,transparent 50%,var(--ink-3) 50%),
                   linear-gradient(135deg,var(--ink-3) 50%,transparent 50%);
  background-position:calc(100% - 18px) 55%, calc(100% - 13px) 55%;
  background-size:5px 5px,5px 5px; background-repeat:no-repeat; }
.field input:focus,.field select:focus,.field textarea:focus{
  outline:none; border-color:var(--gold);
  box-shadow:0 0 0 3px var(--gold-veil);
}
.field.is-invalid input,.field.is-invalid textarea{ border-color:#B4553F; }
.btn--submit{ grid-column:span 2; justify-self:start; }
.form__status{ grid-column:span 2; min-height:1.2em; font-size:.85rem;
  color:var(--gold-ink); opacity:0; transform:translateY(4px);
  transition:opacity 240ms var(--ease-out), transform 240ms var(--ease-out); }
.form__status.is-shown{ opacity:1; transform:translateY(0); }

/* ---------- 18. Footer ---------- */
.foot{ position:relative; z-index:2; border-top:1px solid var(--line);
  background:var(--surface); padding-top:clamp(3rem,6vw,5rem);
  transition:background-color var(--d-theme) var(--ease-out); }
.foot__inner{ display:grid; gap:clamp(2rem,5vw,4rem); padding-bottom:3rem; }
@media (min-width:860px){ .foot__inner{ grid-template-columns:1.3fr 2fr; } }
.foot__brand p{ margin-top:1.2rem; color:var(--ink-3); font-size:.86rem; max-width:44ch; }
.foot__cols{ display:grid; gap:2rem; grid-template-columns:repeat(auto-fit,minmax(140px,1fr)); }
.foot__cols h4{ font-size:var(--t-micro); letter-spacing:.18em; text-transform:uppercase;
  color:var(--ink-3); margin-bottom:.9rem; font-weight:500; }
.foot__cols a{ display:block; font-size:.9rem; color:var(--ink-2); padding-block:.3rem;
  transition:color 200ms var(--ease-out); }
@media (hover:hover) and (pointer:fine){ .foot__cols a:hover{ color:var(--gold-ink); } }
.foot__bar{ display:flex; flex-wrap:wrap; gap:.5rem 2rem; justify-content:space-between;
  padding-block:1.5rem; border-top:1px solid var(--line-soft);
  font-size:.78rem; color:var(--ink-3); }

/* ---------- 19. Scroll reveal ----------
   Elements arrive from the direction that suits them: the eyebrow and the
   first headline line slide in from the left, the second line answers from
   the right, and supporting copy rises. Transform + opacity only, one strong
   ease-out curve, 60ms between steps. */
[data-anim]{
  opacity:0;
  transform:translate3d(0,18px,0);
  transition:opacity 620ms var(--ease-out), transform 620ms var(--ease-out);
  transition-delay:calc(var(--delay,0) * 60ms);
  will-change:transform, opacity;
}
[data-anim="left"] { transform:translate3d(-40px,0,0); }
[data-anim="right"]{ transform:translate3d(40px,0,0); }
[data-anim="up"]   { transform:translate3d(0,26px,0); }
[data-anim="down"] { transform:translate3d(0,-22px,0); }
/* rise: lifts and settles out of a slight shrink — never from scale(0) */
[data-anim="rise"] { transform:translate3d(0,22px,0) scale(.97); }
[data-anim].is-in{ opacity:1; transform:none; will-change:auto; }

/* The display headline is split so each line can arrive on its own path. */
.display .line{ display:block; }
.no-js [data-anim]{ opacity:1; transform:none; }
.no-js .ph__night{ display:none; }

/* ---------- 20. Reduced motion ---------- */
@media (prefers-reduced-motion:reduce){
  html{ scroll-behavior:auto; }
  *,*::before,*::after{
    animation-duration:.01ms !important; animation-iteration-count:1 !important;
    transition-duration:.01ms !important; scroll-behavior:auto !important;
  }
  [data-anim]{ opacity:1; transform:none; }
  .sweep.is-in{ color:inherit; background:none; }
  .dock, .chat, .geobar{ transition:none; }
  .ph img{ transform:none !important; }
  #goldfx{ display:none; }
}

/* ---------- 21. Inline figures ---------- */
.figure{
  position:relative; aspect-ratio:16/10; overflow:clip; border-radius:14px;
  border:1px solid var(--line-soft); box-shadow:var(--shadow);
}
.figure .ph img{ transform:translate3d(0,var(--shift,0px),0) scale(1.14); }
.figcap{
  margin-top:.85rem; font-size:var(--t-micro); letter-spacing:.16em;
  text-transform:uppercase; color:var(--ink-3);
}
.split{ display:grid; gap:clamp(1.8rem,5vw,4rem); align-items:center; }
@media (min-width:900px){
  .split{ grid-template-columns:1fr 1fr; }
  .split--flip .split__media{ order:2; }
}


/* ============================================================
   22. Language control
   ============================================================ */
.lang{ position:relative; }
.lang__btn{
  display:flex; align-items:center; gap:.35rem; height:44px; padding:0 .7rem;
  background:transparent; border:1px solid var(--line); border-radius:999px;
  cursor:pointer; color:var(--ink-2);
  transition:transform var(--d-press) var(--ease-out),
             border-color 220ms var(--ease-out), background-color 220ms var(--ease-out);
}
.lang__btn:active{ transform:scale(.94); }
.lang__btn svg{ width:17px; height:17px; }
.lang__code{ font-size:.76rem; font-weight:600; letter-spacing:.06em; }
@media (hover:hover) and (pointer:fine){
  .lang__btn:hover{ border-color:var(--blue); color:var(--blue); background:var(--blue-veil); }
}
.nav:not(.is-stuck) .lang__btn{ border-color:rgba(255,255,255,.36); color:rgba(255,255,255,.9); }

.lang__menu{
  position:absolute; top:calc(100% + .5rem); right:0; z-index:120; min-width:170px;
  padding:.35rem; margin:0; list-style:none; border-radius:12px;
  background:var(--paper-2); border:1px solid var(--line); box-shadow:var(--shadow);
  transform-origin:top right;                     /* opens from its trigger */
  opacity:0; transform:scale(.96) translateY(-4px);
  transition:opacity var(--d-exit) var(--ease-out), transform var(--d-exit) var(--ease-out);
}
.lang__menu.is-open{
  opacity:1; transform:none;
  transition:opacity 190ms var(--ease-out), transform 190ms var(--ease-out);
}
.lang__menu button{
  display:block; width:100%; text-align:left; padding:.5rem .7rem;
  background:none; border:0; border-radius:8px; cursor:pointer;
  font-size:.9rem; color:var(--ink);
  transition:background-color 160ms var(--ease-out), color 160ms var(--ease-out);
}
.lang__menu button[aria-current="true"]{ color:var(--blue); font-weight:600; }
@media (hover:hover) and (pointer:fine){
  .lang__menu button:hover{ background:var(--surface); }
}

/* ============================================================
   23. Floating dock — quote button + assistant launcher
   ============================================================ */
.dock{
  position:fixed; right:clamp(1rem,2.4vw,1.75rem); bottom:clamp(1rem,2.4vw,1.75rem);
  z-index:150; display:flex; flex-direction:column; align-items:flex-end; gap:.6rem;
}
.dock__quote{
  display:inline-flex; align-items:center; gap:.5rem;
  padding:.72rem 1.15rem; border-radius:999px;
  background:var(--blue); color:#fff; font-size:.86rem; font-weight:500;
  box-shadow:0 10px 30px -10px rgba(19,67,149,.55);
  /* hidden until the visitor has actually started reading */
  opacity:0; transform:translate3d(0,14px,0) scale(.96); pointer-events:none;
  transition:opacity 260ms var(--ease-out), transform 260ms var(--ease-out),
             background-color 220ms var(--ease-out);
}
.dock.is-shown .dock__quote{ opacity:1; transform:none; pointer-events:auto; }
.dock__quote svg{ width:17px; height:17px; }
.dock__quote:active{ transform:scale(.97); }
@media (hover:hover) and (pointer:fine){
  .dock__quote:hover{ background:var(--blue-deep); }
  :root[data-theme="dark"] .dock__quote:hover{ background:#7FC2F5; color:#08101F; }
}

.dock__chat{
  position:relative; width:54px; height:54px; border:0; border-radius:50%;
  background:var(--green); color:#fff; cursor:pointer;
  display:grid; place-content:center;
  box-shadow:0 12px 30px -10px rgba(76,183,72,.65);
  transition:transform var(--d-press) var(--ease-out), background-color 220ms var(--ease-out);
}
.dock__chat svg{ width:23px; height:23px; grid-area:1/1;
  transition:opacity 160ms var(--ease-out), transform 200ms var(--ease-out); }
.dock__chat .i-close{ opacity:0; transform:rotate(-45deg); }
.dock__chat[aria-expanded="true"] .i-chat{ opacity:0; transform:rotate(45deg); }
.dock__chat[aria-expanded="true"] .i-close{ opacity:1; transform:none; }
.dock__chat:active{ transform:scale(.95); }
@media (hover:hover) and (pointer:fine){ .dock__chat:hover{ background:#43a13f; } }

.dock__dot{
  position:absolute; top:3px; right:3px; width:11px; height:11px; border-radius:50%;
  background:var(--gold); border:2px solid var(--paper);
  transition:opacity 200ms var(--ease-out), transform 200ms var(--ease-out);
}
.dock__chat[aria-expanded="true"] .dock__dot,
.dock.is-seen .dock__dot{ opacity:0; transform:scale(.6); }

@media (max-width:520px){
  .dock__quote span{ display:none; }
  .dock__quote{ padding:.8rem; }
}

/* ============================================================
   24. The assistant panel
   ============================================================ */
.sr-only{
  position:absolute; width:1px; height:1px; padding:0; margin:-1px;
  overflow:hidden; clip:rect(0 0 0 0); white-space:nowrap; border:0;
}
.chat{
  position:fixed; z-index:151;
  right:clamp(1rem,2.4vw,1.75rem); bottom:calc(clamp(1rem,2.4vw,1.75rem) + 122px);
  width:min(372px, calc(100vw - 2rem)); max-height:min(560px, calc(100vh - 12rem));
  display:flex; flex-direction:column; overflow:hidden;
  background:var(--paper-2); border:1px solid var(--line); border-radius:16px;
  box-shadow:0 24px 60px -24px rgba(8,22,48,.5), 0 2px 8px rgba(8,22,48,.08);
  transform-origin:bottom right;               /* grows out of its launcher */
  opacity:0; transform:scale(.96) translate3d(0,10px,0);
  transition:opacity var(--d-exit) var(--ease-out), transform var(--d-exit) var(--ease-out);
}
.chat.is-open{
  opacity:1; transform:none;
  transition:opacity 220ms var(--ease-out), transform 220ms var(--ease-out);
}
@media (max-width:520px){
  .chat{ right:.75rem; left:.75rem; width:auto; bottom:calc(.75rem + 122px);
         max-height:calc(100vh - 11rem); }
}

.chat__head{
  display:flex; align-items:center; justify-content:space-between; gap:.75rem;
  padding:.85rem 1rem; border-bottom:1px solid var(--line-soft);
  background:linear-gradient(180deg, var(--surface), var(--paper-2));
}
.chat__who{ display:flex; align-items:center; gap:.65rem; }
.chat__who strong{ display:block; font-size:.92rem; color:var(--heading); }
.chat__avatar{
  width:36px; height:36px; border-radius:50%; display:grid; place-content:center;
  background:var(--blue); color:#fff; font-size:.76rem; font-weight:600; letter-spacing:.04em;
}
.chat__status{ font-size:.73rem; color:var(--ink-3); }
.chat__min{
  width:32px; height:32px; display:grid; place-content:center; cursor:pointer;
  background:none; border:0; border-radius:8px; color:var(--ink-3);
  transition:transform var(--d-press) var(--ease-out), color 180ms var(--ease-out);
}
.chat__min svg{ width:17px; height:17px; }
.chat__min:active{ transform:scale(.92); }

.chat__log{
  flex:1; overflow-y:auto; padding:1rem; display:flex; flex-direction:column; gap:.6rem;
  scroll-behavior:smooth;
}
.msg{
  max-width:86%; padding:.6rem .8rem; border-radius:14px;
  font-size:.88rem; line-height:1.55; white-space:pre-wrap;
  /* transitions, not keyframes — messages arrive in quick succession */
  opacity:0; transform:translate3d(0,10px,0);
  transition:opacity 260ms var(--ease-out), transform 260ms var(--ease-out);
}
.msg.is-in{ opacity:1; transform:none; }
.msg--bot{ align-self:flex-start; background:var(--surface); color:var(--ink);
  border-bottom-left-radius:5px; }
.msg--me{ align-self:flex-end; background:var(--blue); color:#fff;
  border-bottom-right-radius:5px; }
.msg a{ text-decoration:underline; text-underline-offset:2px; }
.msg--typing{ display:inline-flex; gap:4px; align-items:center; padding:.75rem .85rem; }
.msg--typing i{
  width:6px; height:6px; border-radius:50%; background:var(--ink-3); display:block;
  animation:blip 1.1s var(--ease-in-out) infinite;
}
.msg--typing i:nth-child(2){ animation-delay:.15s; }
.msg--typing i:nth-child(3){ animation-delay:.3s; }
@keyframes blip{ 0%,100%{ opacity:.25; transform:translateY(0) } 50%{ opacity:1; transform:translateY(-3px) } }

.chat__chips{ display:flex; flex-wrap:wrap; gap:.4rem; padding:0 1rem .7rem; }
.chat__chips:empty{ display:none; }
.chip{
  padding:.42rem .7rem; border-radius:999px; cursor:pointer;
  background:transparent; border:1px solid var(--line); color:var(--ink-2);
  font-size:.79rem; text-align:left;
  transition:transform var(--d-press) var(--ease-out), border-color 180ms var(--ease-out),
             color 180ms var(--ease-out), background-color 180ms var(--ease-out);
}
.chip:active{ transform:scale(.97); }
@media (hover:hover) and (pointer:fine){
  .chip:hover{ border-color:var(--blue); color:var(--blue); background:var(--blue-veil); }
}

.chat__form{ display:flex; gap:.5rem; padding:.75rem 1rem; border-top:1px solid var(--line-soft); }
.chat__form input{
  flex:1; padding:.6rem .8rem; border-radius:10px; font-size:.88rem;
  background:var(--paper); border:1px solid var(--line);
  transition:border-color 180ms var(--ease-out), box-shadow 200ms var(--ease-out);
}
.chat__form input:focus{ outline:none; border-color:var(--blue); box-shadow:0 0 0 3px var(--blue-veil); }
.chat__form button{
  width:40px; border:0; border-radius:10px; cursor:pointer;
  background:var(--blue); color:#fff; display:grid; place-content:center;
  transition:transform var(--d-press) var(--ease-out), background-color 200ms var(--ease-out);
}
.chat__form button svg{ width:18px; height:18px; }
.chat__form button:active{ transform:scale(.95); }

.chat__foot{
  display:flex; gap:.9rem; align-items:center; justify-content:space-between;
  padding:.6rem 1rem .8rem; border-top:1px solid var(--line-soft); font-size:.8rem;
}
.chat__foot a{ display:inline-flex; align-items:center; gap:.35rem; color:var(--ink-3);
  transition:color 180ms var(--ease-out); }
.chat__foot svg{ width:15px; height:15px; color:#25D366; }
#chatWhatsapp{ color:var(--ink-2); font-weight:500; }
@media (hover:hover) and (pointer:fine){ .chat__foot a:hover{ color:var(--blue); } }

/* ============================================================
   25. Language suggestion bar
   ============================================================ */
.geobar{
  position:fixed; z-index:149; left:clamp(1rem,2.4vw,1.75rem);
  bottom:clamp(1rem,2.4vw,1.75rem); width:min(330px, calc(100vw - 2rem));
  padding:1rem 1.1rem; border-radius:14px;
  background:var(--paper-2); border:1px solid var(--line); box-shadow:var(--shadow);
  opacity:0; transform:translate3d(0,14px,0) scale(.97);
  transition:opacity 260ms var(--ease-out), transform 260ms var(--ease-out);
}
.geobar.is-in{ opacity:1; transform:none; }
.geobar p{ font-size:.88rem; color:var(--ink); margin-bottom:.8rem; }
.geobar__acts{ display:flex; align-items:center; gap:.75rem; }
.geobar__yes{ padding:.5rem 1rem; font-size:.82rem; }
.geobar__no{
  background:none; border:0; cursor:pointer; font-size:.82rem; color:var(--ink-3);
  transition:color 180ms var(--ease-out);
}
@media (hover:hover) and (pointer:fine){ .geobar__no:hover{ color:var(--ink); } }
@media (max-width:640px){ .geobar{ left:.75rem; right:.75rem; width:auto; bottom:5.5rem; } }

/* ============================================================
   26. Right-to-left (Arabic)
   ============================================================ */
[dir="rtl"] body{ letter-spacing:0; }
[dir="rtl"] .nav__links{ margin-left:0; margin-right:auto; }
[dir="rtl"] .dock{ right:auto; left:clamp(1rem,2.4vw,1.75rem); align-items:flex-start; }
[dir="rtl"] .chat{ right:auto; left:clamp(1rem,2.4vw,1.75rem); transform-origin:bottom left; }
[dir="rtl"] .geobar{ left:auto; right:clamp(1rem,2.4vw,1.75rem); }
[dir="rtl"] .lang__menu{ right:auto; left:0; transform-origin:top left; }
[dir="rtl"] .msg--bot{ align-self:flex-end; border-radius:14px 14px 5px 14px; }
[dir="rtl"] .msg--me{ align-self:flex-start; border-radius:14px 14px 14px 5px; }
[dir="rtl"] .ticks li{ padding-left:0; padding-right:1.7rem; }
[dir="rtl"] .ticks li::before{ left:auto; right:0; }
[dir="rtl"] .hairline{ transform-origin:right; }
[dir="rtl"] .rail{ right:auto; left:0; }
[dir="rtl"] .post{ padding:clamp(1.5rem,3vw,2.1rem) 0 clamp(1.5rem,3vw,2.1rem) 3rem; }
[dir="rtl"] .post__arrow{ right:auto; left:.3rem; transform:scaleX(-1); }
[dir="rtl"] .ph__scrim{
  background:
    linear-gradient(to left, rgba(10,13,28,.9) 0%, rgba(10,13,28,.72) 30%, rgba(10,13,28,.34) 62%, rgba(10,13,28,.12) 88%),
    linear-gradient(to top, rgba(10,13,28,.8) 0%, transparent 46%);
}

/* ==========================================================
   27 · Careers page
   ========================================================== */
.chapter--page{ min-height:min(88vh, 860px); }

.roles{ list-style:none; margin:clamp(2rem,4vw,3rem) 0 0; padding:0; }
.role{
  padding:clamp(1.5rem,3vw,2.1rem) 0;
  border-top:1px solid var(--line-soft);
  transition:background-color 320ms var(--ease-out);
}
.role:last-child{ border-bottom:1px solid var(--line-soft); }
.role__head{
  display:flex; flex-wrap:wrap; align-items:baseline;
  justify-content:space-between; gap:.6rem 1.2rem; margin-bottom:.7rem;
}
.role .h4{
  font-family:var(--serif); font-weight:400; color:var(--heading);
  font-size:clamp(1.15rem,2.2vw,1.42rem); line-height:1.25; margin:0;
}
.role__tag{
  font-size:.72rem; letter-spacing:.18em; text-transform:uppercase;
  color:var(--gold-ink); white-space:nowrap;
  padding:.35rem .7rem; border:1px solid var(--line-soft); border-radius:100px;
}
.role .body{ color:var(--ink-3); }
.role__ask{
  margin-top:.8rem; font-size:.9rem; color:var(--ink-3);
  padding-left:1rem; border-left:2px solid var(--gold);
}
.role__ask strong{ color:var(--heading); font-weight:500; }
@media (hover:hover) and (pointer:fine){
  .role:hover{ background:var(--paper-2); }
}

.form__note{ margin-top:.9rem; font-size:.82rem; color:var(--ink-3); }

/* ==========================================================
   28 · Non-Latin typography
   ----------------------------------------------------------
   Tracking, uppercasing and synthetic italics are Latin habits.
   Chinese and Arabic get the same hierarchy by other means.
   ========================================================== */
:root[lang="zh"], [dir="rtl"]{
  --sans:'Inter', 'Noto Sans SC', 'Noto Sans Arabic', 'PingFang SC',
         'Microsoft YaHei', 'Segoe UI', system-ui, sans-serif;
}
:root[lang="zh"] .eyebrow, :root[lang="zh"] .marker,
:root[lang="zh"] .role__tag, :root[lang="zh"] .hero__stats dt,
[dir="rtl"] .eyebrow, [dir="rtl"] .marker,
[dir="rtl"] .role__tag, [dir="rtl"] .hero__stats dt{
  letter-spacing:.04em; text-transform:none;
}
:root[lang="zh"] .display em, [dir="rtl"] .display em,
:root[lang="zh"] .h2 em, [dir="rtl"] .h2 em{
  font-style:normal; font-weight:500;
}
:root[lang="zh"] .display, :root[lang="zh"] .h2, :root[lang="zh"] .h3,
[dir="rtl"] .display, [dir="rtl"] .h2, [dir="rtl"] .h3{
  font-family:var(--sans); font-weight:500; letter-spacing:0;
}
:root[lang="zh"] .display, [dir="rtl"] .display{ line-height:1.22; }
[dir="rtl"] .role__ask{
  padding-left:0; padding-right:1rem;
  border-left:0; border-right:2px solid var(--gold);
}
[dir="rtl"] .steps li, [dir="rtl"] .card{ text-align:right; }

/* ==========================================================
   29 · Hero — rotating spotlights
   ----------------------------------------------------------
   Three backdrops stacked and crossfaded, three sets of copy
   that arrive from the sides. Everything here is transform and
   opacity; the dwell is long because this is a marketing hero,
   not a control the visitor operates all day.
   ========================================================== */
.hero{
  position:relative; z-index:2; min-height:100svh;
  display:flex; align-items:center; overflow:clip;
  /* Static, deliberately. The ticker bars arrive a moment after first paint
     and grow the header; if this padding tracked the header's real height the
     whole hero would jump at that moment. The header only overlays the
     photograph, so a fixed clearance costs nothing and the hero never moves. */
  padding-block:clamp(17.5rem,30vh,20rem) clamp(3rem,7vh,5rem);
  color:var(--on-photo);
}
.hero .eyebrow{ color:var(--gold-lift); }
.hero .lede{ color:rgba(255,255,255,.84); }
.hero .display{ color:#fff; }

.hero__stage{ position:absolute; inset:0; }
.hero__inner{ position:relative; z-index:1;
  width:min(var(--wrap),100% - (var(--gut) * 2)); margin-inline:auto; }

/* ---- the backdrops ---- */
.spot__media{
  position:absolute; inset:0; opacity:0;
  transition:opacity 1100ms var(--ease-in-out);
}
.spot__media.is-active{ opacity:1; }

.ph__video{
  position:absolute; inset:0; width:100%; height:100%; object-fit:cover;
  opacity:0; transition:opacity 700ms var(--ease-out);
  /* the same parallax shift the photographs get, plus a very slow drift in */
  transform:translate3d(0, var(--shift,0px), 0) scale(1.08);
  will-change:transform, opacity;
}
.ph__video.is-ready{ opacity:1; }
/* A 14-second creep across the active spotlight — slower than anything the
   eye tracks, so it reads as depth rather than as movement. */
.spot__media.is-active .ph__video.is-ready,
.spot__media.is-active .ph__day,
.spot__media.is-active .ph__night{
  animation:creep 15s var(--ease-in-out) both;
}
@keyframes creep{
  from{ transform:translate3d(0, var(--shift,0px), 0) scale(1.08); }
  to  { transform:translate3d(0, var(--shift,0px), 0) scale(1.15); }
}
/* the still under a video is only there until the video can paint */
.ph__fallback{ z-index:-1; }

/* ---- the copy ----
   The three spotlights are stacked in one grid cell, so the block is always
   as tall as the longest of them and nothing below — the statistics, the
   ticks — shifts as they rotate. `visibility` does the hiding, which also
   takes the inactive copy out of the tab order and the accessibility tree. */
.hero__spots{ display:grid; }
.spot{ grid-area:1 / 1; position:relative; }
.spot:not(.is-in):not(.is-out){ visibility:hidden; }

.spot__l,.spot__r,.spot__u{
  opacity:0;
  transition:opacity 620ms var(--ease-out), transform 620ms var(--ease-out);
  transition-delay:calc(var(--i,0) * 55ms + 240ms);
  will-change:transform, opacity;
}
.spot__l{ transform:translate3d(-42px,0,0); }
.spot__r{ transform:translate3d(42px,0,0); }
.spot__u{ transform:translate3d(0,24px,0); }
.spot.is-in .spot__l,
.spot.is-in .spot__r,
.spot.is-in .spot__u{ opacity:1; transform:none; will-change:auto; }

/* Leaving is faster than arriving, and straight up — an exit should not
   compete for attention with what is arriving behind it. */
.spot.is-out .spot__l,
.spot.is-out .spot__r,
.spot.is-out .spot__u{
  opacity:0; transform:translate3d(0,-14px,0);
  transition-duration:300ms; transition-delay:0ms;
}

/* ---- the controls ---- */
.spots{
  display:flex; align-items:center; gap:.35rem;
  margin-top:clamp(1.8rem,4vw,2.6rem);
}
.spots__tick{
  position:relative; display:flex; flex-direction:column; gap:.55rem;
  padding:.55rem .95rem .55rem 0; background:none; border:0; cursor:pointer;
  color:rgba(255,255,255,.58); font:inherit;
  font-size:var(--t-micro); letter-spacing:.18em; text-transform:uppercase;
  transition:color 260ms var(--ease-out);
}
.spots__tick i{
  display:block; width:clamp(38px,7vw,64px); height:2px;
  background:rgba(255,255,255,.26); overflow:hidden; border-radius:2px;
}
.spots__tick i::after{
  content:''; display:block; height:100%; width:100%;
  background:var(--gold-lift); transform-origin:left;
  transform:scaleX(0);
}
.spots__tick.is-active{ color:#fff; }
.spots__tick.is-active i::after{ animation:tick var(--dwell,7000ms) linear both; }
.spots.is-paused .spots__tick.is-active i::after{ animation-play-state:paused; }
/* a tick already shown stays filled, so the row reads as progress */
.spots__tick.is-done i::after{ transform:scaleX(1); }
@keyframes tick{ from{ transform:scaleX(0) } to{ transform:scaleX(1) } }

.spots__pause{
  display:grid; place-items:center; width:34px; height:34px; margin-left:.5rem;
  border:1px solid rgba(255,255,255,.28); border-radius:50%;
  background:rgba(255,255,255,.06); color:#fff; cursor:pointer;
  transition:background-color 220ms var(--ease-out), transform 220ms var(--ease-out);
}
.spots__pause svg{ width:15px; height:15px; }
.spots__pause .i-play{ display:none; }
.spots__pause[aria-pressed="true"] .i-pause{ display:none; }
.spots__pause[aria-pressed="true"] .i-play{ display:block; }
.spots__pause:active{ transform:scale(.94); }

@media (hover:hover) and (pointer:fine){
  .spots__tick:hover{ color:#fff; }
  .spots__tick:hover i{ background:rgba(255,255,255,.4); }
  .spots__pause:hover{ background:rgba(255,255,255,.16); }
}

/* ---- restraint ---- */
@media (max-width:760px){
  .ph__video{ display:none; }          /* the poster carries it on mobile data */
  .spots__label{ display:none; }
  .spots__tick{ padding-right:.5rem; }
}
@media (prefers-reduced-motion:reduce){
  .ph__video{ display:none; }
  .spot__media.is-active .ph__day,
  .spot__media.is-active .ph__night{ animation:none; }
  .spot__l,.spot__r,.spot__u{ transform:none; transition:opacity 300ms ease; }
  .spot.is-out .spot__l,
  .spot.is-out .spot__r,
  .spot.is-out .spot__u{ transform:none; }
  .spots__tick.is-active i::after{ animation:none; transform:scaleX(1); }
}

/* ==========================================================
   30 · Hover reactions
   ----------------------------------------------------------
   Seen dozens of times a session, so they are deliberately near
   the threshold of perception: a 1.5% lift, 220ms, nothing that
   shifts the text the visitor is reading. Pointer-gated, because
   a tap on a touchscreen fires a false hover.
   ========================================================== */
@media (hover:hover) and (pointer:fine){

  /* Service cards: the card lifts, the rule under the number draws across. */
  /* --tilt is written by the cursor-tilt script; --lift by the rules below.
     Composing them in one declaration lets both exist without either
     clobbering the other. */
  .tilt{ transform:var(--tilt, none); }
  .card{
    --lift:0px;
    transform:translate3d(0,var(--lift),0);
    transition:background-color 300ms var(--ease-out), transform 260ms var(--ease-out);
  }
  .card.tilt{ transform:translate3d(0,var(--lift),0) var(--tilt, ); }
  .card:hover{ --lift:-4px; }
  .card__no{ position:relative; }
  .card__no::after{
    content:''; position:absolute; left:0; bottom:-.45rem; height:1px; width:100%;
    background:var(--gold); transform:scaleX(0); transform-origin:left;
    transition:transform 420ms var(--ease-out);
  }
  .card:hover .card__no::after{ transform:scaleX(1); }

  /* Any photograph in a figure: a slow push in, never a jump. */
  .figure .ph img{ transition:transform 520ms var(--ease-out); }
  .figure:hover .ph img{
    transform:translate3d(0, var(--shift,0px), 0) scale(1.06);
  }

  /* Sector rows: the row slides a few pixels toward the reader and its
     qualifier brightens — enough to confirm the cursor, not enough to read
     as a button. */
  .sectors li{ transition:transform 260ms var(--ease-out), border-color 260ms var(--ease-out); }
  .sectors li:hover{ transform:translate3d(6px,0,0); }
  .sectors li i{ transition:color 240ms var(--ease-out); }
  .sectors li:hover i{ color:var(--gold-ink); }
  [dir="rtl"] .sectors li:hover{ transform:translate3d(-6px,0,0); }

  /* Insight cards: lift, and the arrow steps out ahead of it. */
  .post{ transition:transform 260ms var(--ease-out), border-color 260ms var(--ease-out); }
  .post:hover{ transform:translate3d(0,-4px,0); }
  .post__arrow{ transition:transform 300ms var(--ease-out); }
  .post:hover .post__arrow{ transform:translate3d(5px,0,0); }
  [dir="rtl"] .post:hover .post__arrow{ transform:translate3d(-5px,0,0) scaleX(-1); }


  /* Role rows on the careers page. */
  .role:hover .h4{ color:var(--gold-ink); }
  .role .h4{ transition:color 240ms var(--ease-out); }

  /* Links in the footer draw their underline rather than switching it on. */
  .foot__cols a{ background-image:linear-gradient(var(--gold),var(--gold));
    background-size:0 1px; background-position:0 100%; background-repeat:no-repeat;
    transition:background-size 320ms var(--ease-out), color 240ms var(--ease-out); }
  .foot__cols a:hover{ background-size:100% 1px; }
}
@media (prefers-reduced-motion:reduce){
  .card:hover, .sectors li:hover, .post:hover{ transform:none; }
  .figure:hover .ph img{ transform:none; }
  .post:hover .post__arrow{ transform:none; }
}

/* Spotlight ticks in RTL: the progress fills from the right, and the
   padding flips with it. */
[dir="rtl"] .spots__tick{ padding:.55rem 0 .55rem .95rem; }
[dir="rtl"] .spots__tick i::after{ transform-origin:right; }
[dir="rtl"] .spots__pause{ margin-left:0; margin-right:.5rem; }

/* ==========================================================
   31 · Ticker bars
   ----------------------------------------------------------
   Constant motion, so `linear` — any easing would make a
   marquee visibly stutter at the seam. The animation is a CSS
   keyframe rather than rAF, so it keeps its frame rate while
   the rest of the page is still loading photographs.
   ========================================================== */
/* The bars ride inside the fixed header, directly under the navigation, so
   they stay put at every scroll position and slide away with it. --tk-bg is
   named once because the edge fades have to match the bar exactly; a hard-coded
   second copy is how those seams end up visible. */
.tickers{
  /* The hover tint has to be declared for every combination of theme and nav
     state, because "dark tint" and "light tint" swap meaning between them. An
     earlier version declared only two, and the pairing nobody had tested —
     night theme with the nav condensed — put a navy wash on an already-navy
     bar, which is present in the computed styles and invisible on screen. */
  --tk-bg:color-mix(in srgb, var(--surface) 92%, transparent);
  --tk-hover:rgba(19,67,149,.20);        /* day, condensed: dark on cream  */
  --tk-accent:var(--gold-ink);
  background:var(--tk-bg);
  backdrop-filter:blur(16px) saturate(150%);
  -webkit-backdrop-filter:blur(16px) saturate(150%);
  border-top:1px solid var(--line-soft);
}
/* Over the hero photograph, before the nav condenses, the bars read as a dark
   glass strip rather than a pale one — otherwise they cut the image in half. */
:root[data-theme="dark"] .tickers{
  --tk-hover:rgba(255,255,255,.24);       /* night, condensed: light on dark */
  --tk-accent:var(--gold-lift);
}
/* Day or night, over the hero photograph the bar is dark glass. */
.nav:not(.is-stuck) .tickers{
  --tk-bg:rgba(10,13,28,.58);
  --tk-hover:rgba(255,255,255,.30);       /* light on dark glass */
  --tk-accent:var(--gold-lift);
  border-top-color:rgba(255,255,255,.14);
}
.nav:not(.is-stuck) .tk{ border-bottom-color:rgba(255,255,255,.12); }
.nav:not(.is-stuck) .tk__label,
.nav:not(.is-stuck) .tk__val{ color:#fff; }
.nav:not(.is-stuck) .tk__item{ color:rgba(255,255,255,.76); border-right-color:rgba(255,255,255,.12); }
.nav:not(.is-stuck) .tk__text{ color:rgba(255,255,255,.8); }
.nav:not(.is-stuck) .tk__note{ color:rgba(255,255,255,.6); }
.nav:not(.is-stuck) .tk__cat{ color:var(--gold-lift); border-color:rgba(255,255,255,.22); }
.nav:not(.is-stuck) .tk--intel .tk__tag{ background:rgba(255,255,255,.1); color:#fff; }

.tk{
  display:flex; align-items:stretch; min-height:42px;
  border-bottom:1px solid var(--line-soft);
}
.tk:last-child{ border-bottom:0; }
.tk[hidden]{ display:none; }

.tk__tag{
  display:flex; align-items:center; gap:.5rem; flex:0 0 auto;
  padding:0 clamp(.9rem,2vw,1.4rem);
  font-size:var(--t-micro); letter-spacing:.18em; text-transform:uppercase;
  white-space:nowrap; color:var(--paper); background:var(--blue);
}
.tk--intel .tk__tag{ background:var(--ink); }
:root[data-theme="dark"] .tk--intel .tk__tag{ background:var(--paper-2); color:var(--ink); }

/* A slow pulse on the market bar only — it is the one claiming to be current. */
.tk__pulse{
  width:7px; height:7px; border-radius:50%; background:var(--green-lift);
  box-shadow:0 0 0 0 rgba(141,198,63,.6);
  animation:tkpulse 2.6s var(--ease-in-out) infinite;
}
@keyframes tkpulse{
  0%,100%{ box-shadow:0 0 0 0 rgba(141,198,63,.55); opacity:1 }
  50%    { box-shadow:0 0 0 6px rgba(141,198,63,0); opacity:.65 }
}

.tk__win{ position:relative; flex:1 1 auto; overflow:hidden; display:flex; align-items:center; }
/* The bar fades out at both ends rather than cutting items in half. */
.tk__win::before,.tk__win::after{
  content:''; position:absolute; top:0; bottom:0; width:clamp(24px,5vw,56px);
  z-index:2; pointer-events:none;
}
.tk__win::before{ left:0;  background:linear-gradient(to right,var(--tk-bg),transparent); }
.tk__win::after { right:0; background:linear-gradient(to left, var(--tk-bg),transparent); }

.tk__track{ display:flex; white-space:nowrap; will-change:transform; }
.tk.is-rolling .tk__track{
  animation:roll var(--dur,40s) linear infinite;
}
@keyframes roll{ from{ transform:translate3d(0,0,0) } to{ transform:translate3d(calc(var(--run) * -1),0,0) } }

.tk__run{ display:flex; flex:0 0 auto; }

.tk__item{
  display:inline-flex; align-items:baseline; gap:.5rem;
  padding:.7rem clamp(1rem,2.2vw,1.7rem);
  font-size:.82rem; color:var(--ink-3); white-space:nowrap;
  border-right:1px solid var(--line-soft);
}
.tk__label,.tk__cat{
  font-size:var(--t-micro); font-weight:500; letter-spacing:.14em;
  text-transform:uppercase; color:var(--heading);
}
.tk--intel .tk__cat{
  color:var(--gold-ink); border:1px solid var(--line-soft);
  border-radius:100px; padding:.16rem .55rem;
}
.tk__val{ font-variant-numeric:tabular-nums; font-weight:500; color:var(--ink); }
.tk__val--none{ color:var(--ink-3); }
.tk__chg{ font-variant-numeric:tabular-nums; font-size:.76rem; }
.tk__chg--up{ color:var(--green); }
.tk__chg--down{ color:#C2453B; }
.tk__chg--flat{ color:var(--ink-3); }
.tk__note{ font-style:normal; font-size:.68rem; letter-spacing:.06em; color:var(--ink-3); opacity:.72; }
.tk__text{ color:var(--ink-3); }
.tk__item--link{ text-decoration:none; transition:background-color 220ms var(--ease-out); }

/* Stopping it is the whole point of hovering a ticker — you want to read one.
   The tint used to be var(--paper-2) and only on linked items, which meant
   nothing at all happened over the market bar, and nothing visible happened
   anywhere once the bars moved onto the dark glass above the hero. It is a
   variable now, set once per state, and every item takes it. */
.tk__item{ transition:background-color 200ms var(--ease-out), color 200ms var(--ease-out); }

/* WHY THIS IS NOT DRIVEN BY :hover ALONE.
   A marquee translates its items underneath the cursor. Browsers re-run
   hit-testing when the POINTER moves, not when the content moves under a
   pointer that is holding still — which is exactly what a reader does: put
   the cursor on the bar and stop. The item you stopped on then scrolls on
   without ever taking :hover, and the whole thing reads as broken. So
   ticker.js watches pointer events, works out which item is under the cursor
   itself, and sets .is-paused on the row and .is-hot on the item. The :hover
   selectors are kept alongside as the no-JavaScript fallback. */
.tk.is-paused .tk__track,
.tk:focus-within .tk__track{ animation-play-state:paused; }

@media (hover:hover) and (pointer:fine){
  .tk:hover .tk__track{ animation-play-state:paused; }

  .tk__item{ position:relative; }
  .tk__item.is-hot,
  .tk__item:hover{ background:var(--tk-hover); }

  /* A gold edge on the leading side as well as the rule beneath: between them
     the hovered item reads in every theme without relying on the tint alone. */
  .tk__item::before{
    content:''; position:absolute; left:0; top:0; bottom:0; width:3px;
    background:var(--tk-accent); transform:scaleY(0); transform-origin:bottom;
    transition:transform 200ms var(--ease-out);
  }
  .tk__item.is-hot::before,
  .tk__item:hover::before{ transform:scaleY(1); }
  [dir="rtl"] .tk__item::before{ left:auto; right:0; }

  .tk__item.is-hot .tk__label, .tk__item:hover .tk__label,
  .tk__item.is-hot .tk__val,   .tk__item:hover .tk__val{ color:var(--heading); }
  .tk__item.is-hot .tk__note,  .tk__item:hover .tk__note{ opacity:1; }
  .nav:not(.is-stuck) .tk__item.is-hot .tk__label,
  .nav:not(.is-stuck) .tk__item:hover .tk__label,
  .nav:not(.is-stuck) .tk__item.is-hot .tk__val,
  .nav:not(.is-stuck) .tk__item:hover .tk__val{ color:#fff; }
  .tk__item--link.is-hot .tk__text,
  .tk__item--link:hover .tk__text{ color:var(--heading); }
  .nav:not(.is-stuck) .tk__item--link.is-hot .tk__text,
  .nav:not(.is-stuck) .tk__item--link:hover .tk__text{ color:#fff; }

  /* A gold rule under the item being read, so it is obvious which one the
     pointer has stopped. */
  .tk__item::after{
    content:''; position:absolute; left:0; right:0; bottom:0; height:3px;
    background:var(--tk-accent); transform:scaleX(0); transform-origin:left;
    transition:transform 220ms var(--ease-out);
  }
  .tk__item.is-hot::after,
  .tk__item:hover::after{ transform:scaleX(1); }
  [dir="rtl"] .tk__item::after{ transform-origin:right; }
}

@media (max-width:640px){
  .tk__tag{ font-size:.58rem; padding:0 .7rem; }
  .tk__item{ padding:.65rem .9rem; font-size:.78rem; }
  .tk{ min-height:38px; }
}
@media (max-width:760px){
  /* The tag labels shrink below 640px, so the header is shorter here. */
  .hero, .chapter--hero{ padding-top:clamp(14rem,26vh,16rem); }
}

/* Reduced motion: it stops being a marquee and becomes a row you scroll
   yourself. The information is all still there. */
.tk.is-static .tk__win{ overflow-x:auto; scrollbar-width:thin; }
.tk.is-static .tk__track{ animation:none; }
@media (prefers-reduced-motion:reduce){
  .tk__track{ animation:none !important; }
  .tk__win{ overflow-x:auto; }
  .tk__pulse{ animation:none; }
}

/* The marquee's mechanics stay left-to-right in every language: with the
   track laid out RTL the flex row starts off-screen to the left and the
   translate carries it further out, so the bar renders empty. Forcing the
   window to LTR keeps the geometry identical everywhere — items still enter
   from the right edge, which is the natural entry side for Arabic too — while
   each item's own contents read right-to-left. */
[dir="rtl"] .tk__win{ direction:ltr; }
[dir="rtl"] .tk__item{
  direction:rtl; border-right:0; border-left:1px solid var(--line-soft);
}
[dir="rtl"] .tk__win::before{ background:linear-gradient(to right,var(--tk-bg),transparent); }
[dir="rtl"] .tk__win::after { background:linear-gradient(to left, var(--tk-bg),transparent); }
/* A quoted figure is a left-to-right string even on an Arabic line. Without
   isolating it, "$4,352.88/oz" is reordered by the bidi algorithm into
   "oz/$4,352.88" — a currency symbol on the wrong end of a number is the sort
   of detail a finance audience notices immediately. */
[dir="rtl"] .tk__label,
[dir="rtl"] .tk__val,
[dir="rtl"] .tk__chg{ direction:ltr; unicode-bidi:isolate; }


/* The honeypot. Off-screen rather than display:none, because some bots skip
   fields that are explicitly hidden — and kept out of the tab order and the
   accessibility tree so nobody real ever lands on it. */
.hp{
  position:absolute; left:-9999px; top:auto;
  width:1px; height:1px; overflow:hidden;
}

/* ==========================================================
   32 · Partner cards — the hover
   ----------------------------------------------------------
   A partner card is looked at perhaps once a visit, so this is
   the one place in the build with a real delight budget: the
   card grows, and a gold line draws itself around the perimeter.

   Two things here are load-bearing.

   One: the specificity. `[data-anim].is-in` sets `transform:none`
   to land the scroll reveal, and at 0-2-0 it outranks a bare
   `.person` — which is why an earlier version set a --lift
   variable on hover and never moved a pixel. These rules are
   written as `.people .person:hover` so they sit above it.

   Two: reduced motion does not mean no feedback. A visitor who
   has asked for less movement still gets the gold frame and the
   colour change, just without the growing and the drawing. A
   card that does nothing at all reads as broken.
   ========================================================== */
.people .person{
  --lift:0px;
  --grow:1;
  --tilt:none;
  transform:translate3d(0,var(--lift),0) scale(var(--grow));
  box-shadow:0 0 0 0 rgba(12,47,108,0);
  transition:
    transform 380ms var(--ease-out),
    box-shadow 380ms var(--ease-out),
    background-color 380ms var(--ease-out);
}
.people .person__portrait img{
  transition:transform 780ms var(--ease-out), filter 560ms var(--ease-out);
}

/* ---- the frame that draws itself ----
   Eight elements: four gold sides that fill in and stay (<i>), and four white
   sparks that race the same edge slightly faster and then fade out (<b>).

   The white spark is the point. With the gold alone the eye reads a line
   appearing rather than a line moving — the change is in length, and length is
   a weak motion cue. A bright head that reaches each corner ahead of the gold
   and then vanishes gives the movement something to follow, and stops the
   whole thing looking like a gold border pulsing on.

   The stagger equals the gold duration — 380ms each, 380ms apart — so only one
   side is ever drawing and the four read as a single stroke. `linear`, because
   this is constant motion; an ease-out decelerates into every corner and
   breaks it back into four separate strokes.

   Earlier versions were an SVG injected by JavaScript, then an SVG <rect> with
   `pathLength="100"` and a dash pattern. The first made a decorative border
   depend on a script; the second broke wherever `pathLength` is only honoured
   on a <path>, rendering the border as four fragments. Nothing below is newer
   than CSS2 transforms. */
.person__frame{
  position:absolute; inset:0; pointer-events:none; z-index:2;
}
.person__frame i,
.person__frame b{ position:absolute; display:block; }

/* --- the gold, which stays --- */
.person__frame i{
  background:var(--gold-ink);
  opacity:0;
  transition:transform 380ms linear, opacity 120ms linear 260ms;
}
.person__frame i:nth-of-type(1){
  top:-1px; left:-1px; right:-1px; height:3px;
  transform:scaleX(0); transform-origin:left center;
  background:linear-gradient(to right, var(--gold-lift) 0%, var(--gold) 6%, var(--gold) calc(var(--arm) - 6%), transparent var(--arm), transparent calc(100% - var(--arm)), var(--gold) calc(100% - var(--arm) + 6%), var(--gold) 94%, var(--gold-lift) 100%);
}
.person__frame i:nth-of-type(2){
  top:-1px; bottom:-1px; right:-1px; width:3px;
  transform:scaleY(0); transform-origin:center top;
  background:linear-gradient(to bottom, var(--gold-lift) 0%, var(--gold) 6%, var(--gold) calc(var(--arm) - 6%), transparent var(--arm), transparent calc(100% - var(--arm)), var(--gold) calc(100% - var(--arm) + 6%), var(--gold) 94%, var(--gold-lift) 100%);
}
.person__frame i:nth-of-type(3){
  bottom:-1px; left:-1px; right:-1px; height:3px;
  transform:scaleX(0); transform-origin:right center;
  background:linear-gradient(to left, var(--gold-lift) 0%, var(--gold) 6%, var(--gold) calc(var(--arm) - 6%), transparent var(--arm), transparent calc(100% - var(--arm)), var(--gold) calc(100% - var(--arm) + 6%), var(--gold) 94%, var(--gold-lift) 100%);
}
.person__frame i:nth-of-type(4){
  bottom:-1px; top:-1px; left:-1px; width:3px;
  transform:scaleY(0); transform-origin:center bottom;
  background:linear-gradient(to top, var(--gold-lift) 0%, var(--gold) 6%, var(--gold) calc(var(--arm) - 6%), transparent var(--arm), transparent calc(100% - var(--arm)), var(--gold) calc(100% - var(--arm) + 6%), var(--gold) 94%, var(--gold-lift) 100%);
}

/* --- the white spark, which does not ---
   A SHORT segment — a quarter of the side — that travels the edge, rather
   than a full-length line that grows. This matters: a growing line changes
   its length, and the eye reads that as something appearing. A short bright
   thing that changes position is read as something moving, which is what the
   card wants. The spark carries a soft tail behind its head so the direction
   of travel is unambiguous, and it is gone by the time the gold settles, so
   the card at rest under the cursor is a clean gold frame, not two borders.

   Position, not scale, because a quarter-width element translated 300% of
   itself lands exactly at the far end of the side. Both are compositor
   properties, so neither costs a layout. */
/* White alone is nearly invisible on the cream card in day mode — the first
   build of this failed for exactly that reason, and read as the gold line
   pulsing. So the head is white in both themes, but the halo around it
   changes: gold on cream, where white has nothing to push against, and white
   on the dark card, where gold would disappear instead. */
.person__frame{
  /* How far the gold reaches in from each corner. The frame is open through
     the middle of every side — brackets, not a box. */
  --arm:24%;
  --spark:#FFFFFF;
  --spark-halo:rgba(140,106,34,.95);
  --spark-soft:rgba(140,106,34,.35);
}
:root[data-theme="dark"] .person__frame{
  --spark-halo:rgba(255,255,255,.85);
  --spark-soft:rgba(255,255,255,.35);
}
.person__frame b{
  opacity:0;
  animation:none;
  will-change:transform, opacity;
}
.person__frame b:nth-of-type(1){
  top:-1px; left:-1px; width:25%; height:3px;
  background:linear-gradient(to right, transparent 0%, var(--spark-soft) 50%, var(--spark) 100%);
  box-shadow:0 0 6px 1px var(--spark-halo), 0 0 16px 3px var(--spark-soft);
}
.person__frame b:nth-of-type(2){
  top:-1px; right:-1px; width:3px; height:25%;
  background:linear-gradient(to bottom, transparent 0%, var(--spark-soft) 50%, var(--spark) 100%);
  box-shadow:0 0 6px 1px var(--spark-halo), 0 0 16px 3px var(--spark-soft);
}
.person__frame b:nth-of-type(3){
  bottom:-1px; right:-1px; width:25%; height:3px;
  background:linear-gradient(to left, transparent 0%, var(--spark-soft) 50%, var(--spark) 100%);
  box-shadow:0 0 6px 1px var(--spark-halo), 0 0 16px 3px var(--spark-soft);
}
.person__frame b:nth-of-type(4){
  bottom:-1px; left:-1px; width:3px; height:25%;
  background:linear-gradient(to top, transparent 0%, var(--spark-soft) 50%, var(--spark) 100%);
  box-shadow:0 0 6px 1px var(--spark-halo), 0 0 16px 3px var(--spark-soft);
}

/* It appears quickly, holds, and is gone before it reaches the corner — a
   spark that stopped dead at the corner would read as an arrival, and the
   next side has not started yet. */
@keyframes spark-right{
  0%   { transform:translate3d(0,0,0);       opacity:0; }
  14%  { opacity:1; }
  78%  { opacity:1; }
  100% { transform:translate3d(300%,0,0);    opacity:0; }
}
@keyframes spark-down{
  0%   { transform:translate3d(0,0,0);       opacity:0; }
  14%  { opacity:1; }
  78%  { opacity:1; }
  100% { transform:translate3d(0,300%,0);    opacity:0; }
}
@keyframes spark-left{
  0%   { transform:translate3d(0,0,0);       opacity:0; }
  14%  { opacity:1; }
  78%  { opacity:1; }
  100% { transform:translate3d(-300%,0,0);   opacity:0; }
}
@keyframes spark-up{
  0%   { transform:translate3d(0,0,0);       opacity:0; }
  14%  { opacity:1; }
  78%  { opacity:1; }
  100% { transform:translate3d(0,-300%,0);   opacity:0; }
}

/* --- on hover --- */
.people .person:hover .person__frame i,
.people .person:focus-visible .person__frame i,
.people .person:focus-within .person__frame i{
  opacity:1; transform:scale(1);
  transition:transform 380ms linear, opacity 80ms linear;
}
/* The spark runs its side in 340ms — just ahead of the gold's 380ms, so the
   bright head is always a little in front of the gold arriving behind it. */
.people .person:hover .person__frame b:nth-of-type(1),
.people .person:focus-visible .person__frame b:nth-of-type(1),
.people .person:focus-within .person__frame b:nth-of-type(1){
  animation:spark-right 340ms linear 0ms 1 both;
}
.people .person:hover .person__frame b:nth-of-type(2),
.people .person:focus-visible .person__frame b:nth-of-type(2),
.people .person:focus-within .person__frame b:nth-of-type(2){
  animation:spark-down 340ms linear 380ms 1 both;
}
.people .person:hover .person__frame b:nth-of-type(3),
.people .person:focus-visible .person__frame b:nth-of-type(3),
.people .person:focus-within .person__frame b:nth-of-type(3){
  animation:spark-left 340ms linear 760ms 1 both;
}
.people .person:hover .person__frame b:nth-of-type(4),
.people .person:focus-visible .person__frame b:nth-of-type(4),
.people .person:focus-within .person__frame b:nth-of-type(4){
  animation:spark-up 340ms linear 1140ms 1 both;
}

/* Each gold side waits for the one before it to finish. */
.people .person:hover .person__frame i:nth-of-type(1),
.people .person:focus-visible .person__frame i:nth-of-type(1),
.people .person:focus-within .person__frame i:nth-of-type(1){ transition-delay:0ms, 0ms; }
.people .person:hover .person__frame i:nth-of-type(2),
.people .person:focus-visible .person__frame i:nth-of-type(2),
.people .person:focus-within .person__frame i:nth-of-type(2){ transition-delay:380ms, 380ms; }
.people .person:hover .person__frame i:nth-of-type(3),
.people .person:focus-visible .person__frame i:nth-of-type(3),
.people .person:focus-within .person__frame i:nth-of-type(3){ transition-delay:760ms, 760ms; }
.people .person:hover .person__frame i:nth-of-type(4),
.people .person:focus-visible .person__frame i:nth-of-type(4),
.people .person:focus-within .person__frame i:nth-of-type(4){ transition-delay:1140ms, 1140ms; }

/* ---- the hover ---- */
.people .person:hover,
.people .person:focus-visible,
.people .person:focus-within{
  --lift:-8px;
  --grow:1.035;
  background:var(--surface);
  box-shadow:0 30px 60px -26px rgba(12,47,108,.5);
  z-index:3;
}
@media (hover:hover) and (pointer:fine){
  /* Composed with the cursor tilt when the script is running. */
  .people .person.tilt:hover{
    transform:translate3d(0,var(--lift),0) scale(var(--grow)) var(--tilt, );
  }

  /* The portrait carries the slow part: a push in, and the colour coming up
     as though a light had been brought to it. */
  .people .person:hover .person__portrait img{
    transform:scale(1.09);
    filter:saturate(1.05) contrast(1.06) brightness(1.03);
  }

  /* One gold pass across the portrait. 1150ms because it is a flourish, not
     feedback — at UI speed it reads as a glitch. */
  .people .person:hover .person__sheen{
    opacity:1; transform:translate3d(65%,0,0);
    transition:opacity 200ms var(--ease-out), transform 1150ms var(--ease-out);
  }

  .people .person:hover .person__portrait::after{ transform:scaleX(1); }
  .people .person:hover h3{ color:var(--gold-ink); }
  .people .person:hover .person__more svg{ transform:translate3d(5px,0,0); }
}

.people .person:hover .person__more,
.people .person:focus-visible .person__more,
.people .person:focus-within .person__more{ opacity:1; transform:none; }

/* Leaving is quicker than arriving — a card you have moved away from should
   not still be settling when your eye reaches the next one. */
.people .person{ transition-duration:220ms; }
.people .person:hover{ transition-duration:380ms; }

/* Touch: there is no hover to reveal the affordance, so it is always there. */
@media (hover:none){
  .people .person__more{ opacity:1; transform:none; }
  .people .person__frame i{ opacity:.5; transform:scale(1); }
}
.people .person:active{ --grow:1.015; }

@media (prefers-reduced-motion:reduce){
  /* Feedback stays; movement goes. The border still appears — it just does
     not travel, and it fades rather than draws. */
  .people .person,
  .people .person__portrait img{ transition:none; }
  .people .person__frame i{
    transform:scale(1); transition:opacity 160ms linear; transition-delay:0ms !important;
  }
  .people .person__frame b{ display:none; }
  .people .person:hover,
  .people .person:focus-visible,
  .people .person:focus-within{ --lift:0px; --grow:1; }
  .people .person:hover .person__portrait img{ transform:none; filter:none; }
  .people .person__sheen{ display:none; }
  .people .person__more{ opacity:1; transform:none; }
  /* The border still appears, it just does not travel. */
  .people .person:hover .person__frame i,
  .people .person:focus-visible .person__frame i,
  .people .person:focus-within .person__frame i{ transform:scale(1); opacity:1; transition-delay:0ms; }
}