/* ==========================================================================
   Tenos — global design tokens + base + layout + typography roles + reveals.
   Loaded site-wide and as an editor style. Blocks CONSUME these vars; they
   must never redefine the palette (SITE-BLUEPRINT §5).

   Token names match the design HTML in /html-modules so block CSS ports
   without translation. The legacy --tn-* names are kept as aliases because
   nav/search/admin CSS and older helpers still read them.
   ========================================================================== */

:root{
  /* --- Brand colour (sampled from the source artwork in /source/*.pdf) --- */
  --navy:        #1E3096;  /* hero / footer / careers background, logo */
  --navy-deep:   #182878;  /* hover state for navy surfaces */
  --ink:         #1E3096;  /* body + heading text on light backgrounds */
  --ink-strong:  #1E3096;  /* eyebrows, bold headings */
  --black:       #080909;  /* pill buttons */

  /* --- Accents (flat panels, stat labels, card fills) --- */
  --cyan:        #19C2FF;
  --green:       #00E8A0;
  --yellow:      #FBDB00;
  --purple:      #7B30DE;
  --pink:        #FF3D6B;
  --orange:      #FF8A00;

  /* --- Surfaces --- */
  --white:       #FFFFFF;
  --grey-50:     #F3F3F3;
  --grey-100:    #E7E7EC;
  --hairline:    #C3C7E6;

  /* --- Type --- */
  --font-display: 'Plus Jakarta Sans', 'Poppins', 'Helvetica Neue', Arial, sans-serif;
  --font-body:    'Plus Jakarta Sans', 'Poppins', 'Helvetica Neue', Arial, sans-serif;

  /* --- UI scale ---------------------------------------------------------
     Client feedback (Oct 2026): on desktop everything read ~10% too big. One
     multiplier, 1 below 1024px and 0.9 above (see the media query below),
     applied to every type step, the section rhythm, the content measure and
     the fixed-size controls. Set it back to 1 to undo. */
  --ui-scale: 1;

  /* Every step tops out at the size measured (before --ui-scale) on the 1920px source artboards
     (see /source/*.pdf) and scales down linearly to a 390px viewport. */
  --step-micro:   calc(clamp(0.75rem,  0.686rem + 0.261vw, 1rem) * var(--ui-scale));       /*  12 →  16 */
  --step-small:   calc(clamp(0.875rem, 0.780rem + 0.392vw, 1.25rem) * var(--ui-scale));    /*  14 →  20 */
  --step-nav:     calc(clamp(0.9375rem,0.794rem + 0.588vw, 1.5rem) * var(--ui-scale));     /*  15 →  24 */
  --step-body:    calc(clamp(1.0625rem,0.930rem + 0.545vw, 1.52rem) * var(--ui-scale));    /*  17 →  24 */
  --step-eyebrow: calc(clamp(1rem,     0.777rem + 0.915vw, 1.875rem) * var(--ui-scale));   /*  16 →  30 */
  --step-lead:    calc(clamp(1.1875rem,0.980rem + 0.850vw, 2rem) * var(--ui-scale));       /*  19 →  32 */
  --step-h3:      calc(clamp(1.3125rem,1.010rem + 1.242vw, 2.5rem) * var(--ui-scale));     /*  21 →  40 */
  --step-h2:      calc(clamp(1.625rem, 1.243rem + 1.569vw, 3.125rem) * var(--ui-scale));   /*  26 →  50 */
  --step-h1:      calc(clamp(2rem,     1.394rem + 2.484vw, 4.375rem) * var(--ui-scale));   /*  32 →  70 */
  --step-hero:    calc(clamp(1.875rem, 1.418rem + 1.874vw, 3.6667rem) * var(--ui-scale));  /*  30 →  59 */
  --step-display: calc(clamp(2.125rem, 1.392rem + 3.007vw, 5rem) * var(--ui-scale));       /*  34 →  80 */
  /* One notch under body / h3 — the feature grids and link cards run a point
     smaller than the surrounding copy (client snag, Sept 2026). */
  --step-body-sm: calc(clamp(1rem,      0.885rem + 0.470vw, 1.4375rem) * var(--ui-scale)); /*  16 →  23 */
  --step-h3-sm:   calc(clamp(1.25rem,   0.985rem + 1.085vw, 2.25rem) * var(--ui-scale));   /*  20 →  36 */

  /* --- Layout --- */
  /* Artwork: content runs 173→1753 on a 1920 artboard (1580px measure), while
     the header lockup sits nearly full-bleed at 32px. */
  --container:      1920px;
  --gutter-base:    clamp(20px, 8.85vw, 170px);
  /* Narrows the content column itself by the scale (not just a wider gutter):
     at 0.9 the 1580px measure at 1920 becomes 1422px. Identity at 1. */
  --gutter:         calc(var(--gutter-base) * var(--ui-scale) + (1 - var(--ui-scale)) * min(50vw, var(--container) / 2));
  --gutter-header:  clamp(16px, 1.67vw, 32px);
  --section-y:      calc(clamp(56px, 5.21vw, 100px) * var(--ui-scale));
  --radius-pill:    999px;

  /* --- Motion --- */
  --ease:         cubic-bezier(0.22, 0.61, 0.36, 1);
  --speed:        220ms;

  /* --- Legacy aliases (nav/search/admin css + older helpers) --- */
  --tn-blue:      var(--navy);
  --tn-blue-dark: var(--navy-deep);
  --tn-ink:       var(--ink);
  --tn-grey:      var(--grey-50);
  --tn-grey-2:    var(--grey-100);
  --tn-white:     var(--white);
  --tn-muted:     #6E76A8;
  --tn-navy:      var(--navy-deep);
  --tn-font:      var(--font-body);
  --tn-w-body:    400;
  --tn-w-btn:     700;
  --tn-w-head:    700;
  --tn-w-logo:    600;
  --tn-maxw:      var(--container);
  --tn-gutter:    var(--gutter);
  --tn-section-y: var(--section-y);
  --tn-gap:       clamp(16px, 2vw, 28px);
  --tn-radius:    0px;
  --tn-radius-lg: 0px;
  --tn-header-h:  120px;
}

/* Eased in over two steps so nothing jumps a full 10% at one width. */
@media (min-width: 1024px){
  :root{--ui-scale:0.95}
}
@media (min-width: 1280px){
  :root{--ui-scale:0.9}
}

*,*::before,*::after{box-sizing:border-box}
html{-webkit-text-size-adjust:100%}

body.tn-body{
  margin:0;
  font-family:var(--font-body);
  font-weight:var(--tn-w-body);
  font-size:var(--step-body);
  line-height:1.6;
  color:var(--ink);
  background:var(--white);
  -webkit-font-smoothing:antialiased;
  overflow-x:hidden;
}

.tn-body img,.tn-body svg{max-width:100%;display:block}
.tn-body img{height:auto}
/* <picture> wrappers must be layout-invisible so absolute/100% imgs behave as before */
picture{display:contents}
a{color:inherit;text-decoration:none}
.tn-body button{font-family:inherit}
.tn-main{display:block}

.visually-hidden{
  position:absolute;width:1px;height:1px;padding:0;margin:-1px;
  overflow:hidden;clip:rect(0 0 0 0);white-space:nowrap;
}

/* --- Layout helpers ------------------------------------------------------ */
.container,
.tn-container{width:100%;max-width:var(--container);margin-inline:auto;padding-inline:var(--gutter)}
.module{padding-block:var(--section-y)}
.tn-section{padding-top:var(--section-y)}

/* Surface variants set background AND text colour together, so a block keeps
   its contrast wherever it is moved in the page order. */
.surface-white  {background:var(--white);  color:var(--ink)}
.surface-grey   {background:var(--grey-50);color:var(--ink)}
.surface-navy   {background:var(--navy);   color:var(--white)}
.surface-green  {background:var(--green);  color:var(--navy)}
.surface-yellow {background:var(--yellow); color:var(--navy)}
.surface-cyan   {background:var(--cyan);   color:var(--navy)}
.surface-purple {background:var(--purple); color:var(--white)}
.surface-pink   {background:var(--pink);   color:var(--white)}

/* --- Typography roles (design library) ----------------------------------- */
.eyebrow{
  font-size:var(--step-eyebrow);font-weight:700;letter-spacing:0.01em;
  margin:0 0 1.1em;
}
.surface-navy .eyebrow{color:var(--white)}

.h-hero{
  margin:0;font-family:var(--font-display);font-size:var(--step-hero);
  font-weight:700;line-height:1.19;letter-spacing:-0.02em;
}
.h-hero em{font-style:italic;font-weight:300}

.h-display{
  margin:0;font-family:var(--font-display);font-size:var(--step-h1);
  font-weight:700;line-height:1.14;letter-spacing:-0.02em;
}

.h-section{
  margin:0;font-family:var(--font-display);font-size:var(--step-h2);
  font-weight:300;line-height:1.30;letter-spacing:-0.01em;
}
.h-section--bold{font-weight:700}

.prose{max-width:31em}
.prose>p{margin:0}
.prose>p+p{margin-top:1.25em}
.lead{font-size:var(--step-lead)}

/* Legacy heading classes (older templates + tenos_heading callers). Restyled to
   the Tenos type scale — no uppercase. */
.tn-h1,.tn-h2,.tn-h3{margin:0;font-family:var(--font-display);font-weight:var(--tn-w-head);line-height:1.14;letter-spacing:-0.02em;text-transform:none}
.tn-h1{font-size:var(--step-h1)}
.tn-h2{font-size:var(--step-h2)}
.tn-h3{font-size:var(--step-h3)}
.tn-text-blue{color:var(--navy)}
.tn-text-white{color:var(--white)}
.tn-eyebrow{font-size:var(--step-eyebrow);letter-spacing:0.01em;text-transform:none;font-weight:700;color:var(--ink-strong)}

/* generic archive fallback */
.tn-archive__grid{display:grid;grid-template-columns:repeat(4,1fr);gap:clamp(18px,2vw,28px);margin-top:clamp(20px,3vw,32px)}
@media(max-width:1024px){.tn-archive__grid{grid-template-columns:repeat(2,1fr)}}
@media(max-width:560px){.tn-archive__grid{grid-template-columns:1fr}}

/* ==========================================================================
   Scroll reveals — driven by resources/js/animations.js
   ========================================================================== */
.reveal{opacity:0;transform:translateY(26px);transition:opacity .7s ease,transform .7s cubic-bezier(.2,.7,.2,1)}
.reveal.is-visible{opacity:1;transform:none}
.reveal-stagger>*{opacity:0;transform:translateY(20px);transition:opacity .6s ease,transform .6s cubic-bezier(.2,.7,.2,1)}
.reveal-stagger.is-visible>*{opacity:1;transform:none}
@media(prefers-reduced-motion:reduce){
  .reveal,.reveal-stagger>*{opacity:1!important;transform:none!important;transition:none!important}
}
/* editor: never sit invisible waiting for an observer */
.block-editor-block-list__layout .reveal,
.block-editor-block-list__layout .reveal-stagger>*{opacity:1!important;transform:none!important}