/* ============================================================
   CICERO Lab — Design System
   ============================================================ */

/* ------------------------------------------------------------
   Palette. Light is the default; the dark set is re-declared
   under [data-theme="dark"], and under [data-theme="auto"] when
   the visitor's own system asks for it.
   ------------------------------------------------------------ */
:root{
  --ink:#FFFFFF;
  --ink-2:#FAFBFD;
  --panel:#F1F4F9;
  --panel-2:#EDF0F6;
  --line:rgba(12,20,40,.12);
  --line-strong:rgba(12,20,40,.26);
  --text:#080C14;
  --text-body:#2B3444;
  --muted:#525C70;
  --muted-2:#7C869A;
  --accent:#121533;
  --accent-2:#202B63;
  --accent-3:#2E3C86;
  --warn:#B45309;
  --on-accent:#FFFFFF;

  --grid-line:rgba(12,24,60,.04);
  --glow-1:rgba(18,21,51,.10);
  --glow-2:rgba(46,60,134,.07);
  --noise-op:.014;
  --header-bg:rgba(255,255,255,.84);
  --overlay-bg:rgba(255,255,255,.985);
  --pop-bg:rgba(255,255,255,.98);
  --glass:rgba(255,255,255,.74);
  --hover:rgba(12,20,40,.05);
  --hover-soft:rgba(12,20,40,.028);
  --stroke:rgba(12,20,40,.11);
  --scan:rgba(12,20,40,.05);
  --stat-1:#080C14;
  --stat-2:#4A5568;
  --veil-1:rgba(255,255,255,.16);
  --veil-2:rgba(255,255,255,0);
  --veil-3:rgba(255,255,255,.95);
  --cta-1:rgba(18,21,51,.12);
  --cta-2:rgba(46,60,134,.09);
  --net-link:32,43,99;
  --net-node:18,21,51;
  --net-hot:46,60,134;
  --canvas-op:1;

  /* One family carries the whole site — display, body and labels — the way an
     institutional identity should. The mono face is kept, but only where a
     fixed advance means something: index markers, code, and table heads. */
  --font-display:"Figtree","Inter","Helvetica Neue",Helvetica,Arial,sans-serif;
  --font-body:"Figtree","Inter","Helvetica Neue",Helvetica,Arial,sans-serif;
  --font-label:var(--font-body);
  --font-mono:"IBM Plex Mono",ui-monospace,SFMono-Regular,Menlo,Consolas,monospace;

  --wrap:1280px;
  --gut:clamp(20px,5vw,72px);
  --r:10px;
  --r-card:14px;
  --r-pill:999px;
  --nav-h:76px;

  --ease:cubic-bezier(.22,.61,.36,1);
}

/* --- dark set ------------------------------------------------ */
:root[data-theme="dark"],
:root[data-theme="auto"].cic-prefers-dark{
  --ink:#04060B;
  --ink-2:#080B12;
  --panel:#0C1018;
  --panel-2:#111623;
  --line:rgba(255,255,255,.09);
  --line-strong:rgba(255,255,255,.18);
  --text:#EAEEF6;
  --text-body:#C6CEDC;
  --muted:#8D97AA;
  --muted-2:#5E6878;
  --accent:#6C7FD6;
  --accent-2:#A3AFEC;
  --accent-3:#C3CBF7;
  --warn:#FFB020;
  --on-accent:#FFFFFF;

  --grid-line:rgba(255,255,255,.028);
  --glow-1:rgba(108,127,214,.16);
  --glow-2:rgba(163,175,236,.10);
  --noise-op:.035;
  --header-bg:rgba(4,6,11,.78);
  --overlay-bg:rgba(4,6,11,.98);
  --pop-bg:rgba(10,13,20,.96);
  --glass:rgba(8,11,18,.72);
  --hover:rgba(255,255,255,.06);
  --hover-soft:rgba(255,255,255,.025);
  --stroke:rgba(255,255,255,.10);
  --scan:rgba(255,255,255,.05);
  --stat-1:#FFFFFF;
  --stat-2:#93A3BE;
  --veil-1:rgba(4,6,11,.55);
  --veil-2:rgba(4,6,11,.15);
  --veil-3:rgba(4,6,11,.92);
  --cta-1:rgba(108,127,214,.18);
  --cta-2:rgba(163,175,236,.12);
  --net-link:120,134,206;
  --net-node:186,194,236;
  --net-hot:163,175,236;
  --canvas-op:.8;
}

@media(prefers-color-scheme:dark){
  :root[data-theme="auto"]{
    --ink:#04060B;
    --ink-2:#080B12;
    --panel:#0C1018;
    --panel-2:#111623;
    --line:rgba(255,255,255,.09);
    --line-strong:rgba(255,255,255,.18);
    --text:#EAEEF6;
    --text-body:#C6CEDC;
    --muted:#8D97AA;
    --muted-2:#5E6878;
    --accent:#6C7FD6;
    --accent-2:#A3AFEC;
    --accent-3:#C3CBF7;
    --warn:#FFB020;

    --grid-line:rgba(255,255,255,.028);
    --glow-1:rgba(108,127,214,.16);
    --glow-2:rgba(163,175,236,.10);
    --noise-op:.035;
    --header-bg:rgba(4,6,11,.78);
    --overlay-bg:rgba(4,6,11,.98);
    --pop-bg:rgba(10,13,20,.96);
    --glass:rgba(8,11,18,.72);
    --hover:rgba(255,255,255,.06);
    --hover-soft:rgba(255,255,255,.025);
    --stroke:rgba(255,255,255,.10);
    --scan:rgba(255,255,255,.05);
    --stat-1:#FFFFFF;
    --stat-2:#93A3BE;
    --veil-1:rgba(4,6,11,.55);
    --veil-2:rgba(4,6,11,.15);
    --veil-3:rgba(4,6,11,.92);
    --cta-1:rgba(108,127,214,.18);
    --cta-2:rgba(163,175,236,.12);
    --net-link:120,134,206;
    --net-node:186,194,236;
    --net-hot:163,175,236;
    --canvas-op:.8;
  }
}

*,*::before,*::after{box-sizing:border-box}
html{-webkit-text-size-adjust:100%}
body{
  margin:0;
  background:var(--ink);
  color:var(--text);
  font-family:var(--font-body);
  font-size:16.5px;
  line-height:1.62;
  -webkit-font-smoothing:antialiased;
  -moz-osx-font-smoothing:grayscale;
  overflow-x:hidden;
}
body.cic-locked{overflow:hidden}
img{max-width:100%;height:auto;display:block}
a{color:inherit;text-decoration:none}
button{font:inherit;color:inherit}
h1,h2,h3,h4,h5,h6{
  font-family:var(--font-display);
  font-weight:600;
  letter-spacing:-.021em;
  line-height:1.12;
  margin:0 0 .5em;
}
p{margin:0 0 1.15em}
::selection{background:var(--accent);color:var(--on-accent)}

/* ---------- background field ---------- */
.cic-bg{position:fixed;inset:0;z-index:0;pointer-events:none}
.cic-bg::before{
  content:"";position:absolute;inset:0;
  background-image:
    linear-gradient(to right,var(--grid-line) 1px,transparent 1px),
    linear-gradient(to bottom,var(--grid-line) 1px,transparent 1px);
  background-size:clamp(48px,7vw,96px) clamp(48px,7vw,96px);
  mask-image:radial-gradient(ellipse 90% 60% at 50% 0%,#000 20%,transparent 85%);
  -webkit-mask-image:radial-gradient(ellipse 90% 60% at 50% 0%,#000 20%,transparent 85%);
}
.cic-bg::after{
  content:"";position:absolute;inset:0;
  background:
    radial-gradient(900px 520px at 12% -8%,var(--glow-1),transparent 60%),
    radial-gradient(760px 460px at 92% 4%,var(--glow-2),transparent 62%);
}
.cic-noise{
  position:fixed;inset:0;z-index:1;pointer-events:none;opacity:var(--noise-op);
  background-image:url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' width='140' height='140'><filter id='n'><feTurbulence type='fractalNoise' baseFrequency='.85' numOctaves='3'/></filter><rect width='140' height='140' filter='url(%23n)'/></svg>");
}
.site-wrapper{position:relative;z-index:2}

/* ---------- layout ---------- */
.wrap{width:100%;max-width:var(--wrap);margin:0 auto;padding-inline:var(--gut)}
.section{position:relative;padding-block:clamp(72px,10vw,148px)}
.section--tight{padding-block:clamp(56px,7vw,96px)}
.rule{height:1px;background:var(--line);width:100%}

/* ---------- kickers, eyebrows ---------- */
.kicker{
  font-family:var(--font-label);font-weight:700;
  font-size:12px;letter-spacing:.11em;text-transform:uppercase;
  color:var(--accent-2);display:inline-flex;align-items:center;gap:10px;margin-bottom:22px;
}
.kicker::before{content:"";width:26px;height:1px;background:currentColor;opacity:.8}
.kicker--muted{color:var(--muted-2)}

.sec-head{display:grid;grid-template-columns:minmax(0,1fr);gap:22px;margin-bottom:clamp(38px,5vw,64px)}
.sec-head h2{font-size:clamp(30px,4.6vw,58px);margin:0;max-width:22ch}
.sec-head .lede{color:var(--muted);font-size:clamp(15px,1.15vw,17.5px);max-width:60ch;margin:0}
@media(min-width:900px){
  .sec-head{grid-template-columns:1.15fr .85fr;align-items:end;gap:48px}
}

/* ---------- buttons ---------- */
.btn{
  --bg:transparent;--fg:var(--text);--bd:var(--line-strong);
  position:relative;display:inline-flex;align-items:center;gap:12px;
  padding:13px 26px;border:1px solid var(--bd);background:var(--bg);color:var(--fg);
  font-family:var(--font-label);font-weight:600;font-size:14.5px;letter-spacing:0;
  border-radius:var(--r-pill);cursor:pointer;overflow:hidden;
  transition:color .35s var(--ease),border-color .35s var(--ease),transform .35s var(--ease);
}
.btn span{position:relative;z-index:2}
.btn::after{
  content:"";position:absolute;inset:0;z-index:1;background:var(--accent);
  transform:translateY(101%);transition:transform .45s var(--ease);
}
.btn:hover{color:var(--on-accent);border-color:var(--accent)}
.btn:hover::after{transform:translateY(0)}
.btn--solid{--bg:var(--accent-2);--fg:var(--on-accent);--bd:var(--accent-2)}
.btn--solid::after{background:var(--accent-3)}
.btn--solid:hover{color:var(--on-accent);border-color:var(--accent-3)}
.btn .ar{transition:transform .35s var(--ease)}
.btn:hover .ar{transform:translateX(4px)}

.tlink{
  font-family:var(--font-label);font-weight:600;font-size:15px;letter-spacing:0;
  display:inline-flex;align-items:center;gap:9px;color:var(--accent-2);
  border-bottom:1px solid var(--line-strong);padding-bottom:5px;
  transition:color .3s var(--ease),border-color .3s var(--ease);
}
.tlink:hover{color:var(--accent-2);border-color:var(--accent-2)}

/* ============================================================
   HEADER
   ============================================================ */
.site-header{
  position:fixed;top:0;left:0;right:0;z-index:60;
  height:var(--nav-h);display:flex;align-items:center;
  transition:height .4s var(--ease),background .4s var(--ease),border-color .4s var(--ease),backdrop-filter .4s var(--ease);
  border-bottom:1px solid transparent;
}
.site-header.is-stuck{
  height:62px;background:var(--header-bg);border-bottom-color:var(--line);
  backdrop-filter:blur(16px) saturate(140%);-webkit-backdrop-filter:blur(16px) saturate(140%);
}
.nav-inner{display:flex;align-items:center;justify-content:space-between;gap:24px;width:100%}
.brand{display:flex;align-items:center;gap:14px;flex-shrink:0}
.brand img{height:clamp(26px,2.5vw,32px);width:auto;transition:height .4s var(--ease)}
.is-stuck .brand img{height:24px}

/* Both wordmark inks ship; the palette decides which one paints. */
.brand-paper{display:none}
.brand-ink{display:block}
:root[data-theme="dark"] .brand-ink{display:none}
:root[data-theme="dark"] .brand-paper{display:block}
@media(prefers-color-scheme:dark){
  :root[data-theme="auto"] .brand-ink{display:none}
  :root[data-theme="auto"] .brand-paper{display:block}
}
.brand-txt{display:flex;flex-direction:column;line-height:1}
.brand-txt b{font-family:var(--font-display);font-size:17px;letter-spacing:-.02em;font-weight:600}
.brand-txt small{font-family:var(--font-label);font-weight:600;font-size:9px;letter-spacing:0.12em;color:var(--muted-2);text-transform:uppercase;margin-top:4px}

.nav-menu{display:none}
@media(min-width:1060px){
  .nav-menu{display:flex;align-items:center;gap:6px;list-style:none;margin:0;padding:0}
  .nav-menu li{position:relative}
  .nav-menu > li > a{
    display:block;padding:10px 15px;font-size:13.5px;color:var(--muted);letter-spacing:.005em;
    transition:color .28s var(--ease);
  }
  .nav-menu > li > a:hover,.nav-menu > li.current-menu-item > a{color:var(--accent-2)}
  .nav-menu > li > a::after{
    content:"";position:absolute;left:15px;right:15px;bottom:4px;height:1px;background:var(--accent-2);
    transform:scaleX(0);transform-origin:left;transition:transform .34s var(--ease);
  }
  .nav-menu > li:hover > a::after,.nav-menu > li.current-menu-item > a::after{transform:scaleX(1)}
  .nav-menu .sub-menu{
    position:absolute;top:100%;left:0;min-width:230px;list-style:none;margin:0;padding:8px;
    background:var(--pop-bg);border:1px solid var(--line);border-radius:var(--r);backdrop-filter:blur(18px);
    opacity:0;visibility:hidden;transform:translateY(8px);transition:all .3s var(--ease);
  }
  .nav-menu li:hover > .sub-menu{opacity:1;visibility:visible;transform:translateY(0)}
  .nav-menu .sub-menu a{display:block;padding:10px 14px;font-size:13.5px;color:var(--muted)}
  .nav-menu .sub-menu a:hover{color:var(--accent-2);background:var(--hover)}
}
.nav-cta{display:none}
@media(min-width:1060px){.nav-cta{display:inline-flex;padding:11px 20px}}

.burger{
  display:inline-flex;flex-direction:column;justify-content:center;gap:5px;
  width:46px;height:46px;padding:0 12px;background:transparent;border:1px solid var(--line);
  border-radius:var(--r);cursor:pointer;
}
@media(min-width:1060px){.burger{display:none}}
.burger i{display:block;height:1.5px;background:var(--text);transition:transform .4s var(--ease),opacity .3s var(--ease);width:100%}
.burger i:nth-child(2){width:65%;margin-left:auto}
body.cic-nav-open .burger i:nth-child(1){transform:translateY(6.5px) rotate(45deg)}
body.cic-nav-open .burger i:nth-child(2){opacity:0}
body.cic-nav-open .burger i:nth-child(3){transform:translateY(-6.5px) rotate(-45deg)}

/* mobile overlay */
.nav-overlay{
  position:fixed;inset:0;z-index:55;background:var(--overlay-bg);
  backdrop-filter:blur(20px);-webkit-backdrop-filter:blur(20px);
  display:flex;flex-direction:column;justify-content:flex-start;
  padding:calc(var(--nav-h) + 28px) var(--gut) 40px;
  clip-path:inset(0 0 100% 0);transition:clip-path .7s var(--ease);
  overflow-y:auto;
}
body.cic-nav-open .nav-overlay{clip-path:inset(0 0 0 0)}
.nav-overlay ul{list-style:none;margin:0;padding:0}
.nav-overlay > ul{margin-top:auto;width:100%}
.nav-overlay > ul > li{overflow:hidden;border-bottom:1px solid var(--line)}
.nav-overlay > ul > li > a{
  display:block;padding:clamp(14px,2.6vw,20px) 0;
  font-family:var(--font-display);font-size:clamp(26px,7vw,40px);letter-spacing:-.03em;
  transform:translateY(110%);transition:transform .7s var(--ease),color .3s var(--ease);
}
body.cic-nav-open .nav-overlay > ul > li > a{transform:translateY(0)}
.nav-overlay > ul > li:nth-child(1) > a{transition-delay:.10s}
.nav-overlay > ul > li:nth-child(2) > a{transition-delay:.16s}
.nav-overlay > ul > li:nth-child(3) > a{transition-delay:.22s}
.nav-overlay > ul > li:nth-child(4) > a{transition-delay:.28s}
.nav-overlay > ul > li:nth-child(5) > a{transition-delay:.34s}
.nav-overlay > ul > li:nth-child(6) > a{transition-delay:.40s}
.nav-overlay > ul > li:nth-child(7) > a{transition-delay:.46s}
.nav-overlay > ul > li > a:hover{color:var(--accent-2)}
@media(max-height:760px){
  .nav-overlay > ul > li > a{font-size:clamp(20px,3.4vh,30px);padding:clamp(9px,1.4vh,15px) 0}
  .nav-overlay-foot{margin-top:22px}
}
@media(max-height:560px){
  .nav-overlay{padding:calc(var(--nav-h) + 14px) var(--gut) 22px}
  .nav-overlay > ul > li > a{font-size:19px;padding:8px 0}
  .nav-overlay-foot{margin-top:14px;font-size:11px;grid-auto-flow:column;justify-content:start;gap:20px}
}
.nav-overlay .sub-menu{padding:0 0 14px 2px}
.nav-overlay .sub-menu a{display:block;padding:7px 0;color:var(--muted);font-size:15px}
.nav-overlay-foot{margin-top:40px;margin-bottom:auto;display:grid;gap:8px;font-family:var(--font-label);font-weight:600;font-size:12px;color:var(--muted-2);letter-spacing:0.02em}
.nav-overlay-foot a{color:var(--muted)}

/* ============================================================
   HERO
   ============================================================ */
/* The hero fills one screen, so the whole of the first message is read before
   anything is scrolled. Its content is anchored to the top of that screen:
   both bottom-pinning and centring collect the leftover height into a band
   above the eyebrow, and on a tall display that band is most of a screen. */
.hero{position:relative;min-height:100svh;display:flex;align-items:flex-start;padding-top:calc(var(--nav-h) + clamp(14px,2vw,32px));overflow:hidden}
.hero-canvas{position:absolute;inset:0;width:100%;height:100%;z-index:0;opacity:var(--canvas-op)}
.hero-veil{position:absolute;inset:0;z-index:1;background:linear-gradient(to bottom,var(--veil-1) 0%,var(--veil-2) 40%,var(--veil-3) 100%)}
.hero-inner{position:relative;z-index:2;width:100%;padding-block:clamp(30px,4.2vw,60px)}
.hero h1{
  font-size:clamp(38px,7vw,94px);
  letter-spacing:-.032em;line-height:1.02;margin:0 0 clamp(22px,2.6vw,32px);
  font-weight:600;
}
.hero h1 .ln{display:block;overflow:hidden}
.hero h1 .ln > span{display:block;transform:translateY(105%);transition:transform 1.05s var(--ease)}
.hero.is-in h1 .ln > span{transform:translateY(0)}
.hero h1 .ln:nth-child(2) > span{transition-delay:.10s}
.hero h1 .ln:nth-child(3) > span{transition-delay:.20s}
.hero h1 em{font-style:normal;color:var(--accent-2)}
.hero-grid{display:grid;gap:clamp(24px,3.2vw,48px)}
.hero-lede{color:var(--text-body);font-size:clamp(15.5px,1.35vw,18.5px);max-width:46ch;margin:0 0 30px}
.hero-actions{display:flex;flex-wrap:wrap;gap:12px}
.hero-side{opacity:0;transform:translateY(22px);transition:all .9s var(--ease) .45s}
.hero.is-in .hero-side{opacity:1;transform:none}
/* The index panel. It used to be a bordered 2x2 box sitting on top of the
   network field, which fought the animation behind it and read as a table.
   The frame is gone: one hairline opens the group, and the figures carry it. */
.hero-stats{
  display:grid;grid-template-columns:repeat(2,1fr);
  gap:clamp(22px,2.6vw,34px) clamp(26px,3.6vw,52px);
  border-top:1px solid var(--line-strong);
  padding-top:clamp(20px,2.2vw,28px);
}
.hero-stats div{position:relative}
.hero-stats b{
  display:block;font-family:var(--font-display);font-weight:600;
  font-size:clamp(30px,3.6vw,46px);letter-spacing:-.035em;line-height:1;
  font-variant-numeric:tabular-nums;
}
.hero-stats small{
  display:block;margin-top:10px;font-family:var(--font-label);font-weight:600;
  font-size:11px;letter-spacing:.09em;text-transform:uppercase;color:var(--muted-2);
  line-height:1.45;
}

/* ---------- hero: responsive layout ----------
   These sit after the hero's base rules on purpose. They share the same
   specificity, so placed before them the cascade handed the win back to the
   base declarations and every override below was silently dropped. */

/* The index panel sits beside the headline on every tablet and desktop — iPad
   and an unfolded Z Fold included, in either orientation. Only a phone stacks
   it under the copy. */
@media(min-width:768px){
  .hero-grid{grid-template-columns:minmax(0,1.12fr) minmax(0,1fr);align-items:end}
}
@media(min-width:1060px){
  .hero-grid{grid-template-columns:1.35fr 1fr}
  /* Nothing above the eyebrow but the header itself. The hero's own top pad
     and the inner block's top pad were stacking into ~90px of empty band. */
  .hero{padding-top:var(--nav-h)}
  .hero-inner{padding-block:0 clamp(28px,4vw,56px)}
}
/* Through the tablet range both columns are narrow, so the display type steps
   down and the index sets smaller, its foot level with the two buttons.

   The hero still fills the screen, but its content is anchored to the top
   rather than centred: centring splits the leftover height evenly, and half a
   screen of slack above the eyebrow is exactly the gap that read as broken.
   Anchored, that slack falls below instead, where the network field and the
   scroll cue already live. */
@media(min-width:768px) and (max-width:1059px){
  .hero{align-items:flex-start;padding-top:calc(var(--nav-h) + 6px)}
  .hero-inner{padding-block:clamp(14px,2vw,24px)}
  .hero-grid{grid-template-columns:minmax(0,1.22fr) minmax(0,.9fr);gap:clamp(18px,2.2vw,28px);align-items:end}
  .hero h1{font-size:clamp(30px,4.4vw,46px);margin-bottom:16px}
  .hero-lede{font-size:15px;margin-bottom:18px;max-width:42ch}
  .hero .kicker{font-size:10.5px;letter-spacing:.08em;margin-bottom:14px}
  .hero-stats{gap:12px 14px;padding-top:13px}
  .hero-stats b{font-size:clamp(19px,2.1vw,23px)}
  .hero-stats small{font-size:8.5px;letter-spacing:.02em;margin-top:5px;line-height:1.35}
}
/* A tablet in landscape has very little height. Let the hero grow past the
   viewport there rather than crushing the type to fit one screen. */
@media(max-width:1059px) and (orientation:landscape) and (max-height:620px){
  .hero{min-height:auto;padding-block:calc(var(--nav-h) + 8px) 24px}
}
/* Phone — one column, with the figures held to a readable measure. */
@media(max-width:767px){
  .hero-grid{grid-template-columns:minmax(0,1fr)}
  .hero-stats{max-width:420px;gap:18px 20px}
  .hero-stats b{font-size:clamp(28px,7.5vw,36px)}
}

.hero-fade{opacity:0;transform:translateY(18px);transition:all .85s var(--ease)}
.hero.is-in .hero-fade{opacity:1;transform:none}
.hero.is-in .d1{transition-delay:.30s}
.hero.is-in .d2{transition-delay:.40s}
.hero.is-in .d3{transition-delay:.12s}

.scroll-cue{
  position:absolute;left:var(--gut);bottom:22px;z-index:3;display:none;align-items:center;gap:12px;
  font-family:var(--font-label);font-weight:600;font-size:10px;letter-spacing:0.12em;text-transform:uppercase;color:var(--muted-2);
}
@media(min-width:980px){.scroll-cue{display:flex}}
.scroll-cue i{display:block;width:1px;height:38px;background:linear-gradient(to bottom,var(--accent-2),transparent);animation:cue 2.1s infinite}
@keyframes cue{0%{transform:scaleY(.2);transform-origin:top}50%{transform:scaleY(1);transform-origin:top}51%{transform-origin:bottom}100%{transform:scaleY(.2);transform-origin:bottom}}

/* ---------- ticker ---------- */
.ticker{border-block:1px solid var(--line);background:var(--glass);overflow:hidden;padding:14px 0}
.ticker-track{display:flex;width:max-content;animation:slide 42s linear infinite}
.ticker:hover .ticker-track{animation-play-state:paused}
.ticker span{
  font-family:var(--font-label);font-weight:600;font-size:11.5px;letter-spacing:0.12em;text-transform:uppercase;
  color:var(--muted-2);padding:0 22px;display:inline-flex;align-items:center;gap:22px;white-space:nowrap;
}
.ticker span::after{content:"";width:4px;height:4px;background:var(--accent);border-radius:50%;opacity:.7}
@keyframes slide{from{transform:translateX(0)}to{transform:translateX(-50%)}}

/* ============================================================
   REVEAL
   ============================================================ */
[data-rv]{opacity:0;transform:translateY(26px);transition:opacity .9s var(--ease),transform .9s var(--ease)}
[data-rv].rv-in{opacity:1;transform:none}
[data-rv="left"]{transform:translateX(-26px)}
[data-rv="scale"]{transform:scale(.965)}
[data-rv].rv-in{transform:none}

/* ============================================================
   PANELS / CARDS
   ============================================================ */
.grid{display:grid;gap:1px;background:var(--line);border:1px solid var(--line);border-radius:var(--r-card);overflow:hidden}
.grid-2{grid-template-columns:1fr}
.grid-3{grid-template-columns:1fr}
.grid-4{grid-template-columns:1fr}
/* A three-up grid is three across from the fold width up — never two, which
   left a three-item row broken over two rows and a six-item row over three.
   Only a phone stacks it. */
@media(min-width:640px){
  .grid-2{grid-template-columns:repeat(2,1fr)}
  .grid-3{grid-template-columns:repeat(3,1fr)}
  .grid-4{grid-template-columns:repeat(2,1fr)}
}
@media(min-width:1024px){.grid-4{grid-template-columns:repeat(4,1fr)}}

/* Between the fold and the desktop step the cards have to carry three columns
   in a narrow viewport, so the type and padding tighten to fit. */
@media(min-width:640px) and (max-width:1023px){
  .grid-3 .cell{padding:22px 18px}
  .grid-3 .cell h3{font-size:17px;letter-spacing:-.02em}
  .grid-3 .cell p{font-size:13px;line-height:1.6}
  .grid-3 .cell ul li{font-size:12.5px;line-height:1.55}
  .grid-3 .cell .icon{width:26px;height:26px;margin-bottom:14px}
  .grid-3 .cell .num{font-size:10px}
}

.cell{
  position:relative;background:var(--ink-2);padding:clamp(26px,3vw,40px);
  transition:background .45s var(--ease);overflow:hidden;
}
.cell::before{
  content:"";position:absolute;left:0;top:0;height:2px;width:100%;
  background:linear-gradient(90deg,var(--accent),var(--accent-2));
  transform:scaleX(0);transform-origin:left;transition:transform .55s var(--ease);
}
.cell:hover{background:var(--panel-2)}
.cell:hover::before{transform:scaleX(1)}
.cell .num{
  font-family:var(--font-mono);font-size:11.5px;letter-spacing:.1em;color:var(--muted-2);
  display:block;margin-bottom:22px;
}
.cell h3{font-size:clamp(19px,1.7vw,23px);margin:0 0 12px;letter-spacing:-.02em}
.cell p{color:var(--muted);font-size:15px;margin:0}
/* The standfirst under a card title. It was set in mono at 12px, which wrapped
   badly and read as machine output rather than as a subtitle. */
.cell .csub{color:var(--muted-2);font-size:14.5px;line-height:1.55;margin:0 0 14px;max-width:36ch}
.cell ul{margin:14px 0 0;padding:0;list-style:none}
.cell ul li{
  position:relative;padding-left:18px;color:var(--muted);font-size:14.5px;margin-bottom:8px;line-height:1.55;
}
.cell ul li::before{content:"";position:absolute;left:0;top:9px;width:6px;height:1px;background:var(--accent-2)}
.cell .icon{display:block;width:34px;height:34px;margin-bottom:20px;color:var(--accent-2);flex:none}
.cell .icon svg{width:100%;height:100%;stroke:currentColor;fill:none;stroke-width:1.25}

/* thesis / split */
.split{display:grid;gap:clamp(32px,5vw,72px);align-items:start}
@media(min-width:960px){.split{grid-template-columns:.9fr 1.1fr}}
.big-quote{
  font-family:var(--font-display);font-weight:500;font-size:clamp(23px,2.7vw,36px);line-height:1.3;
  letter-spacing:-.02em;color:var(--text);margin:0 0 26px;
}
.big-quote em{font-style:normal;color:var(--accent-2)}
.body-copy p{color:var(--muted);font-size:clamp(15px,1.1vw,16.5px)}
.body-copy strong{color:var(--text);font-weight:500}

/* method list */
.mlist{border-top:1px solid var(--line)}
.mrow{
  display:grid;grid-template-columns:auto 1fr;gap:18px;align-items:start;
  padding:24px 0;border-bottom:1px solid var(--line);
  transition:padding-left .4s var(--ease);
}
.mrow:hover{padding-left:10px}
.mrow h4{transition:color .3s var(--ease)}
.mrow:hover h4{color:var(--accent-2)}
.mrow .mk{font-family:var(--font-mono);font-size:11.5px;color:var(--accent-2);letter-spacing:.08em;padding-top:5px;min-width:34px}
.mrow h4{margin:0 0 6px;font-size:clamp(17px,1.5vw,20px)}
.mrow p{margin:0;color:var(--muted);font-size:14.5px}
/* Stacked layout: the marker holds the left edge and the title sits flush
   right against it, with the description below at full width. */
@media(max-width:799px){
  .mrow{grid-template-columns:auto minmax(0,1fr);column-gap:16px;row-gap:10px}
  .mrow h4{grid-column:2;text-align:right;margin:0;overflow-wrap:anywhere;hyphens:auto}
  .mrow p{grid-column:1/-1}
}
@media(min-width:800px){
  .mrow{grid-template-columns:auto 260px 1fr;gap:28px;align-items:center}
  .mrow h4{margin:0}
}

/* stats band */
/* The band's own top and bottom rules used to be the edge of this section.
   Now that the figures sit in a rounded block, that block is the edge — so the
   rules go, and the band carries padding instead, keeping the box clear of the
   section above it and the image below. */
.band{padding-block:clamp(30px,4.5vw,58px);background:linear-gradient(180deg,rgba(32,43,99,.05),transparent)}
.stat-grid{display:grid;grid-template-columns:repeat(2,1fr);gap:1px;background:var(--line);border:1px solid var(--line);border-radius:var(--r-card);overflow:hidden}
@media(min-width:900px){.stat-grid{grid-template-columns:repeat(4,1fr)}}
.stat{background:var(--ink);padding:clamp(28px,3.4vw,44px) clamp(20px,2.4vw,32px)}
.stat b{display:block;font-family:var(--font-display);font-weight:600;font-size:clamp(34px,5vw,64px);letter-spacing:-.03em;line-height:1;
  background:linear-gradient(180deg,var(--stat-1),var(--stat-2));-webkit-background-clip:text;background-clip:text;color:transparent}
.stat small{display:block;margin-top:14px;font-family:var(--font-label);font-weight:600;font-size:10.5px;letter-spacing:0.12em;text-transform:uppercase;color:var(--muted-2);line-height:1.7}

/* ============================================================
   PEOPLE
   ============================================================ */
.people{display:grid;gap:1px;background:var(--line);border:1px solid var(--line);border-radius:var(--r-card);overflow:hidden}
/* Executive board stays on a single row from the fold width up; only phones stack. */
@media(min-width:640px){.people{grid-template-columns:repeat(3,1fr)}}
.person{background:var(--ink-2);padding:clamp(26px,3vw,38px);position:relative;overflow:hidden;transition:background .4s var(--ease)}
.person:hover{background:var(--panel-2)}
.person .pf{
  position:relative;width:clamp(78px,9vw,104px);aspect-ratio:1;margin-bottom:24px;
  border:1px solid var(--line-strong);display:grid;place-items:center;overflow:hidden;
  background:linear-gradient(145deg,var(--cta-1),var(--cta-2));
  border-radius:50%;
}
.person .pf img{width:100%;height:100%;object-fit:cover}
.person .pf .ini{
  font-family:var(--font-display);font-size:clamp(24px,3vw,32px);letter-spacing:-.03em;color:var(--text);opacity:.9;
}
.person .pf::after{
  content:"";position:absolute;inset:0;border-radius:inherit;
  background:repeating-linear-gradient(0deg,transparent 0 3px,var(--scan) 3px 4px);
  opacity:0;transition:opacity .4s var(--ease);
}
.person:hover .pf::after{opacity:1}
.person .role{
  font-family:var(--font-label);font-weight:600;font-size:10.5px;letter-spacing:0.12em;text-transform:uppercase;
  color:var(--accent-2);margin-bottom:12px;display:block;
}
.person h3{font-size:clamp(20px,1.9vw,25px);margin:0 0 4px}
.person .sub{font-family:var(--font-label);font-weight:600;font-size:11px;letter-spacing:0.02em;color:var(--muted-2);margin-bottom:16px}
.person p{color:var(--muted);font-size:14.5px;margin:0}
.person--lead{grid-column:1/-1}
@media(min-width:900px){
  .person--lead{display:grid;grid-template-columns:auto 1fr;gap:clamp(28px,4vw,52px);align-items:start;padding:clamp(34px,4vw,56px)}
  .person--lead .pf{width:clamp(120px,13vw,168px);margin-bottom:0}
  .person--lead h3{font-size:clamp(28px,3.2vw,40px)}
  .person--lead p{font-size:15.5px;max-width:62ch}
}
@media(min-width:640px) and (max-width:1099px){
  .person{padding:22px 20px}
  .person .pf{width:64px;margin-bottom:18px}
  .person .pf .ini{font-size:20px}
  .person h3{font-size:18px;letter-spacing:-.02em}
  .person .role{font-size:9.5px;letter-spacing:.14em}
  .person .sub{font-size:10px}
  .person p{font-size:13px;line-height:1.6}
  .person .chip{font-size:9px;padding:5px 8px;letter-spacing:.1em}
  .person--lead{padding:26px 24px}
  .person--lead .pf{width:104px}
  .person--lead h3{font-size:26px}
  .person--lead p{font-size:14px}
}
.person-meta{display:flex;flex-wrap:wrap;gap:8px;margin-top:20px}
.chip{
  font-family:var(--font-label);font-weight:600;font-size:10px;letter-spacing:0.12em;text-transform:uppercase;
  color:var(--muted);border:1px solid var(--line);padding:6px 12px;border-radius:var(--r-pill);
  transition:border-color .3s var(--ease),color .3s var(--ease);
}
.person:hover .chip{border-color:var(--accent-2);color:var(--accent-2)}

/* ============================================================
   RESEARCH / INSIGHT CARDS
   ============================================================ */
.post-list{display:grid;gap:1px;background:var(--line);border:1px solid var(--line);border-radius:var(--r-card);overflow:hidden}
@media(min-width:640px){.post-list{grid-template-columns:repeat(3,1fr)}}
@media(min-width:640px) and (max-width:1023px){
  .post-list .pbody{padding:20px 16px}
  .post-list h3{font-size:16px}
  .post-list p{font-size:13px;line-height:1.6}
  .pmeta{font-size:9.5px;letter-spacing:.12em;gap:8px}
}
.pcard{background:var(--ink-2);display:flex;flex-direction:column;transition:background .4s var(--ease)}
.pcard:hover{background:var(--panel-2)}
.pcard .thumb{aspect-ratio:16/10;overflow:hidden;background:var(--panel);position:relative}
.pcard .thumb img{width:100%;height:100%;object-fit:cover;transition:transform .8s var(--ease);filter:grayscale(.35) contrast(1.05)}
.pcard:hover .thumb img{transform:scale(1.05);filter:grayscale(0)}
.pcard .pbody{padding:clamp(22px,2.4vw,32px);display:flex;flex-direction:column;flex:1}
.pmeta{font-family:var(--font-label);font-weight:600;font-size:10.5px;letter-spacing:0.12em;text-transform:uppercase;color:var(--muted-2);margin-bottom:16px;display:flex;gap:12px;flex-wrap:wrap}
.pmeta .dot{color:var(--accent)}
.pcard h3{font-size:clamp(18px,1.6vw,22px);margin:0 0 12px;letter-spacing:-.02em;transition:color .3s var(--ease)}
.pcard:hover h3{color:var(--accent-2)}
.pcard p{color:var(--muted);font-size:14.5px;margin:0 0 20px}
.pcard .more{margin-top:auto;font-family:var(--font-label);font-weight:600;font-size:11px;letter-spacing:0.12em;text-transform:uppercase;color:var(--muted)}
.pcard:hover .more{color:var(--accent-2)}

/* ============================================================
   CTA + CONTACT
   ============================================================ */
.cta{position:relative;overflow:hidden;border:1px solid var(--line);border-radius:var(--r-card);background:var(--ink-2);padding:clamp(38px,6vw,84px)}
.cta::before{
  content:"";position:absolute;inset:0;
  background:radial-gradient(700px 380px at 15% 0%,var(--cta-1),transparent 65%),
             radial-gradient(600px 320px at 90% 100%,var(--cta-2),transparent 65%);
}
.cta > *{position:relative}
.cta h2{font-size:clamp(30px,4.4vw,58px);max-width:18ch;margin:0 0 22px}
.cta p{color:var(--muted);max-width:52ch;font-size:clamp(15px,1.1vw,17px)}

.contact-grid{display:grid;gap:1px;background:var(--line);border:1px solid var(--line);border-radius:var(--r-card);overflow:hidden}
@media(min-width:820px){.contact-grid{grid-template-columns:repeat(3,1fr)}}
.cbox{background:var(--ink-2);padding:clamp(26px,3vw,38px)}
.cbox .lbl{font-family:var(--font-label);font-weight:600;font-size:10.5px;letter-spacing:0.12em;text-transform:uppercase;color:var(--muted-2);margin-bottom:14px;display:block}
.cbox p,.cbox a{color:var(--text);font-size:15.5px;margin:0;line-height:1.7}
.cbox a:hover{color:var(--accent-2)}

/* ============================================================
   PAGE / ARTICLE
   ============================================================ */
/* The old top pad was the nav height plus up to another 120px, which on a
   tablet or laptop left the breadcrumb sitting a long way down an empty
   screen. One ordinary band below the header is enough. */
.page-hero{padding-top:calc(var(--nav-h) + clamp(24px,3.4vw,56px));padding-bottom:clamp(34px,5vw,64px);position:relative;overflow:hidden}
.page-hero::after{content:"";position:absolute;left:var(--gut);right:var(--gut);bottom:0;height:1px;background:var(--line)}
.page-hero h1{font-size:clamp(34px,6.4vw,84px);max-width:18ch;margin:0 0 20px}
.page-hero .lede{color:var(--muted);font-size:clamp(16px,1.3vw,19px);max-width:62ch;margin:0}
/* ---------- leadership page: heading beside the group portrait ---------- */
.page-hero-grid{display:grid;gap:clamp(26px,4vw,60px)}
.page-hero--split{padding-bottom:clamp(44px,6vw,76px)}
/* The portrait holds its own column from tablet width up — 768px covers iPad
   portrait and an unfolded Z Fold. Only a phone stacks it under the copy. */
@media(min-width:768px){
  .page-hero-grid{grid-template-columns:minmax(0,1.1fr) minmax(0,.9fr);align-items:center}
  .page-hero--split h1{font-size:clamp(30px,4.6vw,64px)}
}
/* Between tablet and desktop both columns are narrow, so the supporting copy
   tightens rather than letting the heading break into single words. */
@media(min-width:768px) and (max-width:1059px){
  .page-hero--split .lede{font-size:15px}
  .page-hero--split .crumbs{margin-bottom:18px}
  .page-hero--split .kicker{margin-bottom:16px}
}
@media(min-width:1060px){
  .page-hero-grid{grid-template-columns:minmax(0,1.15fr) minmax(0,.85fr)}
}
.page-hero-copy{min-width:0}
.team-shot{
  margin:0;position:relative;overflow:hidden;
  border:1px solid var(--line);border-radius:var(--r-card);background:var(--panel);
}
/* The photograph stays in its own colour at all times. */
.team-shot img{width:100%;height:auto;display:block}
@media(max-width:767px){
  .team-shot{max-width:520px}
}

.crumbs{font-family:var(--font-label);font-weight:600;font-size:11px;letter-spacing:0.12em;text-transform:uppercase;color:var(--muted-2);margin-bottom:26px}
.crumbs a:hover{color:var(--accent-2)}

.entry{max-width:800px;margin:0 auto}
.entry-content{font-size:16.5px;color:var(--text-body);line-height:1.78}
.entry-content > *{margin-bottom:1.3em}
.entry-content h2{font-size:clamp(25px,2.8vw,36px);margin-top:1.8em;color:var(--text)}
.entry-content h3{font-size:clamp(20px,2.1vw,26px);margin-top:1.6em;color:var(--text)}
.entry-content a{color:var(--accent-2);border-bottom:1px solid currentColor;border-bottom-color:color-mix(in srgb,var(--accent-2) 40%,transparent)}
.entry-content a:hover{border-color:var(--accent-2)}
.entry-content blockquote{
  margin:1.8em 0;padding:22px 26px;border-left:2px solid var(--accent);background:var(--hover-soft);
  font-family:var(--font-display);font-size:clamp(18px,2vw,23px);line-height:1.4;color:var(--text);
}
.entry-content blockquote p:last-child{margin-bottom:0}
.entry-content ul,.entry-content ol{padding-left:20px}
.entry-content li{margin-bottom:.5em}
.entry-content img{margin-inline:auto;border:1px solid var(--line);border-radius:var(--r)}
.entry-content code{font-family:var(--font-mono);font-size:.88em;background:var(--hover);padding:2px 6px}
.entry-content pre{background:var(--panel);border:1px solid var(--line);padding:20px;overflow:auto}
.entry-content table{width:100%;border-collapse:collapse;font-size:15px}
.entry-content th,.entry-content td{border:1px solid var(--line);padding:10px 14px;text-align:left}
.entry-content th{font-family:var(--font-mono);font-size:11px;letter-spacing:.14em;text-transform:uppercase;color:var(--muted)}
.entry-thumb{margin-bottom:clamp(32px,5vw,60px);border:1px solid var(--line);border-radius:var(--r-card);overflow:hidden}

.pagination{display:flex;gap:8px;flex-wrap:wrap;justify-content:center;margin-top:clamp(40px,5vw,64px)}
.pagination .page-numbers{
  display:inline-grid;place-items:center;min-width:42px;height:42px;padding:0 12px;
  border:1px solid var(--line);border-radius:var(--r);font-family:var(--font-label);font-weight:600;font-size:12px;color:var(--muted);
  transition:all .3s var(--ease);
}
.pagination .page-numbers:hover,.pagination .page-numbers.current{border-color:var(--accent-2);color:var(--accent-2)}

/* forms */
input[type=text],input[type=email],input[type=search],input[type=url],input[type=tel],textarea,select{
  width:100%;background:var(--panel);border:1px solid var(--line);color:var(--text);
  padding:13px 16px;font-family:var(--font-body);font-size:15.5px;border-radius:var(--r);
  transition:border-color .3s var(--ease);
}
input:focus,textarea:focus,select:focus{outline:none;border-color:var(--accent)}
input[type=submit],button[type=submit]{
  background:var(--accent-2);color:var(--on-accent);border:1px solid var(--accent-2);padding:13px 26px;
  font-family:var(--font-label);font-weight:600;font-size:14.5px;letter-spacing:0;cursor:pointer;
  transition:background .3s var(--ease),color .3s var(--ease);border-radius:var(--r-pill);
}
input[type=submit]:hover,button[type=submit]:hover{background:var(--accent);border-color:var(--accent);color:var(--on-accent)}
.search-form{display:flex;gap:10px;max-width:520px}

/* ============================================================
   FOOTER
   ============================================================ */
.site-footer{border-top:1px solid var(--line);background:var(--ink-2);padding-top:clamp(52px,6vw,88px)}
.foot-top{display:grid;gap:clamp(34px,4vw,56px)}
@media(min-width:900px){.foot-top{grid-template-columns:1.4fr 1fr 1fr 1.1fr}}
.foot-brand img{height:34px;width:auto;margin-bottom:20px}
.foot-brand p{color:var(--muted);font-size:14.5px;max-width:36ch}
.foot-col h4{font-family:var(--font-label);font-weight:600;font-size:10.5px;letter-spacing:0.12em;text-transform:uppercase;color:var(--muted-2);margin-bottom:18px;font-weight:400}
.foot-col ul{list-style:none;margin:0;padding:0}
.foot-col li{margin-bottom:11px}
.foot-col a{color:var(--muted);font-size:14.5px;transition:color .3s var(--ease)}
.foot-col a:hover{color:var(--accent-2)}
.foot-bottom{
  margin-top:clamp(44px,5vw,70px);border-top:1px solid var(--line);padding-block:26px;
  display:flex;flex-wrap:wrap;gap:14px;justify-content:space-between;align-items:center;
  font-family:var(--font-label);font-weight:600;font-size:10.5px;letter-spacing:0.12em;text-transform:uppercase;color:var(--muted-2);
}

/* ---------- skip link + a11y ---------- */
.skip-link{position:absolute;left:-9999px;top:0;z-index:200;background:var(--text);color:var(--ink);padding:12px 18px}
.skip-link:focus{left:12px;top:12px}
.screen-reader-text{position:absolute!important;width:1px;height:1px;overflow:hidden;clip:rect(1px,1px,1px,1px);white-space:nowrap}

/* ---------- utility ---------- */
.mono{font-family:var(--font-mono)}
.muted{color:var(--muted)}
.center{text-align:center}
.mt-0{margin-top:0}.mb-0{margin-bottom:0}
.stack-lg > * + *{margin-top:clamp(18px,2vw,28px)}
.maxw-60{max-width:60ch}

@media(prefers-reduced-motion:reduce){
  *,*::before,*::after{animation-duration:.001ms!important;animation-iteration-count:1!important;transition-duration:.001ms!important}
  [data-rv]{opacity:1!important;transform:none!important}
  .hero h1 .ln > span{transform:none!important}
  .hero-side,.hero-fade{opacity:1!important;transform:none!important}
}

/* ============================================================
   LANGUAGE SWITCHER
   ============================================================ */
.lang-switch{position:relative;flex-shrink:0}
.lang-toggle{
  display:inline-flex;align-items:center;gap:8px;
  height:46px;padding:0 13px;background:transparent;
  border:1px solid var(--line);border-radius:var(--r);cursor:pointer;
  font-family:var(--font-label);font-weight:600;font-size:11.5px;letter-spacing:0.02em;color:var(--muted);
  transition:border-color .3s var(--ease),color .3s var(--ease);
}
.lang-toggle:hover,.lang-switch.is-open .lang-toggle{border-color:var(--accent-2);color:var(--accent-2)}
.lang-toggle svg{width:15px;height:15px;flex-shrink:0}
.lang-caret{
  width:6px;height:6px;border-right:1px solid currentColor;border-bottom:1px solid currentColor;
  transform:rotate(45deg) translate(-2px,-2px);transition:transform .3s var(--ease);
}
.lang-switch.is-open .lang-caret{transform:rotate(225deg) translate(-2px,-2px)}

.lang-menu{
  position:absolute;top:calc(100% + 8px);right:0;z-index:70;
  min-width:236px;max-height:min(60vh,420px);overflow-y:auto;
  padding:7px;background:var(--pop-bg);border:1px solid var(--line);border-radius:var(--r);
  backdrop-filter:blur(18px);-webkit-backdrop-filter:blur(18px);
  opacity:0;visibility:hidden;transform:translateY(-6px);
  transition:opacity .28s var(--ease),transform .28s var(--ease),visibility .28s;
}
.lang-switch.is-open .lang-menu{opacity:1;visibility:visible;transform:translateY(0)}
.lang-item{
  display:flex;align-items:baseline;gap:12px;width:100%;
  padding:10px 12px;background:transparent;border:0;cursor:pointer;text-align:left;
  transition:background .25s var(--ease);
}
.lang-item:hover{background:var(--hover)}
.lang-item-code{
  font-family:var(--font-label);font-weight:600;font-size:10.5px;letter-spacing:0.02em;color:var(--muted-2);
  min-width:26px;flex-shrink:0;
}
.lang-item-name{font-size:14px;color:var(--muted)}
.lang-item:hover .lang-item-name{color:var(--accent-2)}
.lang-item.is-active .lang-item-code{color:var(--accent-2)}
.lang-item.is-active .lang-item-name{color:var(--text)}
.lang-note{
  margin:6px 4px 2px;padding-top:9px;border-top:1px solid var(--line);
  font-family:var(--font-label);font-weight:600;font-size:9.5px;line-height:1.7;letter-spacing:0.02em;
  text-transform:uppercase;color:var(--muted-2);
}
.lang-switch.is-busy .lang-toggle{opacity:.55;pointer-events:none}

/* stacked variant inside the mobile overlay */
.lang-switch.is-stacked{margin-top:34px}
.lang-switch.is-stacked .lang-menu{
  position:static;opacity:1;visibility:visible;transform:none;
  min-width:0;background:transparent;border:0;padding:0;backdrop-filter:none;
  max-height:none;display:none;
}
.lang-switch.is-stacked.is-open .lang-menu{display:block}
.lang-switch.is-stacked .lang-item{padding-left:0}

/* the engine's own chrome never renders */
#cicero-gt,iframe.skiptranslate,.goog-te-banner-frame,#goog-gt-tt{display:none!important}
body{top:0!important}
font{background:none!important;box-shadow:none!important}

/* ============================================================
   IMAGE BAND
   ============================================================ */
.showcase{
  /* Overridden per-site by the inline #cicero-showcase block. */
  --scrim-rgb:10,12,34;
  --scrim-a1:.93;--scrim-a2:.64;--scrim-a3:.30;--scrim-a4:.68;
  --shot-filter:grayscale(.42) contrast(1.06) saturate(.75);
  --shot-filter-in:grayscale(.2) contrast(1.04) saturate(.9);
  position:relative;isolation:isolate;overflow:hidden;
  min-height:clamp(440px,46vw,660px);
  display:flex;align-items:flex-end;
  padding-block:clamp(44px,7vw,88px);
  border-block:1px solid var(--line);
}
.showcase-media{position:absolute;inset:0;z-index:0}
.showcase-media img{
  width:100%;height:100%;object-fit:cover;object-position:center 45%;
  filter:var(--shot-filter);
  transform:scale(1.04);
  transition:transform 1.6s var(--ease),filter 1.6s var(--ease);
}
.showcase.rv-in .showcase-media img,
.showcase:hover .showcase-media img{transform:scale(1);filter:var(--shot-filter-in)}
.showcase-scrim{
  position:absolute;inset:0;z-index:1;
  background:
    linear-gradient(to top,
      rgba(var(--scrim-rgb),var(--scrim-a1)) 0%,
      rgba(var(--scrim-rgb),var(--scrim-a2)) 44%,
      rgba(var(--scrim-rgb),var(--scrim-a3)) 100%),
    linear-gradient(to right,
      rgba(var(--scrim-rgb),var(--scrim-a4)) 0%,
      rgba(var(--scrim-rgb),0) 64%);
}
.showcase-inner{position:relative;z-index:2}
.showcase-inner .kicker{color:#B9C2F0}
.showcase-inner h2{
  font-size:clamp(27px,4vw,54px);max-width:19ch;margin:0 0 20px;color:#fff;
  text-wrap:balance;
}
.showcase-inner p{
  color:rgba(232,238,250,.86);font-size:clamp(15px,1.15vw,17.5px);max-width:54ch;margin:0;
}
@media(max-width:640px){
  .showcase{min-height:clamp(400px,78vw,520px);padding-block:36px}
  .showcase-media img{object-position:center 40%}
  .showcase-inner h2{max-width:none}
}