@charset "utf-8";
/* ==========================================================================
   INVECON ENGINEERING — Design System v2
   Language: Apple 2026 — "Liquid Glass".
     · translucent layered materials that refract what sits behind them
     · concentric corner radii (child radius = parent radius − padding)
     · floating chrome that contracts on scroll; content runs behind it
     · SF Pro–first type stack, tight optical tracking, large display sizes
     · depth expressed through translucency and specular light, not drop shadow
   Base stays light per brief. Motion respects prefers-reduced-motion.
   ========================================================================== */

/* ---------- 1. Tokens ---------- */
:root{
  /* Brand — sampled from the INVECON mark */
  --brand-200:#C4E9FA;
  --brand-300:#8FD5F2;
  --brand-400:#52BDE8;
  --brand-500:#1C9AD6;
  --brand-600:#0A7FC4;   /* primary */
  --brand-700:#0A67A0;
  --brand-800:#08507E;
  --brand-900:#073B5D;
  --brand-950:#06263C;

  /* Ink & surface */
  --ink-900:#1A1B1D;
  --ink-800:#24262A;
  --ink-700:#24272E;
  --ink-600:#41454E;
  --ink-500:#5C616B;
  --ink-400:#666B73;
  --ink-300:#ADB1B8;
  --ink-200:#D2D5DA;
  --ink-100:#E7E9EC;
  --ink-050:#F1F3F5;
  --ink-025:#F7F8FA;
  --white:#FFFFFF;

  /* Semantic */
  --bg:var(--white);
  --bg-subtle:var(--ink-025);
  --bg-muted:var(--ink-050);
  --bg-invert:var(--brand-950);
  --text:var(--ink-900);
  --text-muted:var(--ink-500);
  --text-soft:var(--ink-400);
  --accent:var(--brand-600);
  --accent-hover:var(--brand-700);
  /* brand-600 is 4.33:1 on white — below AA for normal text, so all
     brand-coloured copy uses this darker tone instead (5.19:1). */
  --accent-text:#0A72B0;
  --line:rgba(26,27,29,.10);
  --line-strong:rgba(26,27,29,.16);
  --line-invert:rgba(255,255,255,.16);

  /* ---- Liquid Glass materials ---- */
  --glass-blur-sm:blur(16px) saturate(170%);
  --glass-blur-lg:blur(44px) saturate(180%);
  --glass-fill-dark:linear-gradient(177deg,rgba(255,255,255,.15) 0%,rgba(255,255,255,.055) 100%);
  --glass-edge-dark:rgba(255,255,255,.2);
  --glass-lens-dark:inset 0 .5px 0 rgba(255,255,255,.26),inset 0 -.5px 0 rgba(0,0,0,.24);

  /* Type — SF Pro first: on Apple hardware this is the real thing */
  --font-display:-apple-system,BlinkMacSystemFont,"SF Pro Display","SF Pro Text","Inter Tight","Inter","Segoe UI Variable","Segoe UI",Roboto,"Helvetica Neue",Arial,sans-serif;
  --font-text:-apple-system,BlinkMacSystemFont,"SF Pro Text","Inter","Segoe UI Variable","Segoe UI",Roboto,"Helvetica Neue",Arial,sans-serif;
  --font-mono:ui-monospace,SFMono-Regular,"SF Mono",Menlo,Consolas,monospace;

  --fs-display-1:clamp(2.2rem,1.15rem + 4.6vw,4.75rem);
  --fs-display-2:clamp(2.15rem,1.2rem + 3vw,3.5rem);
  --fs-h1:clamp(2.05rem,1.3rem + 2.4vw,3.15rem);
  --fs-h2:clamp(1.65rem,1.2rem + 1.5vw,2.45rem);
  --fs-h3:clamp(1.3rem,1.08rem + .75vw,1.7rem);
  --fs-h4:clamp(1.08rem,1.02rem + .3vw,1.25rem);
  --fs-lead:clamp(1.125rem,1.02rem + .5vw,1.45rem);
  --fs-body:1.0625rem;          /* 17px — Apple body */
  --fs-sm:.9375rem;
  --fs-xs:.8125rem;
  --fs-eyebrow:.75rem;

  /* Space — 4px base */
  --s-1:.25rem; --s-2:.5rem;  --s-3:.75rem; --s-4:1rem;   --s-5:1.25rem;
  --s-6:1.5rem; --s-7:1.75rem;--s-8:2rem;   --s-9:2.25rem;--s-10:2.5rem;
  --s-12:3rem;  --s-16:4rem;  --s-20:5rem;  --s-24:6rem;
  --s-32:8rem;  --s-40:10rem;

  --section-y:clamp(4rem,2.5rem + 5.5vw,8.5rem);
  --gutter:clamp(1.25rem,.6rem + 2.4vw,3.25rem);
  --maxw:80rem;        /* 1280 */
  --maxw-wide:90rem;   /* 1440 */
  --maxw-prose:44rem;
  --slab-inset:clamp(0px,1.4vw,20px);

  /* Concentric radii */
  --r-xs:10px; --r-sm:14px; --r-md:20px; --r-lg:26px;
  --r-xl:34px; --r-2xl:44px; --r-3xl:56px; --r-pill:999px;

  --shadow-xs:0 1px 2px rgba(8,9,11,.05);
  --shadow-sm:0 2px 10px -3px rgba(8,9,11,.08);
  --shadow-md:0 16px 40px -18px rgba(6,38,60,.20),0 2px 8px -3px rgba(8,9,11,.06);
  --shadow-lg:0 40px 90px -32px rgba(6,38,60,.30),0 6px 18px -8px rgba(8,9,11,.08);

  /* Apple-ish springy easing */
  --ease:cubic-bezier(.32,.72,0,1);
  --ease-out:cubic-bezier(.16,1,.3,1);
  --ease-spring:cubic-bezier(.34,1.4,.5,1);
  --t-fast:.2s; --t:.36s; --t-slow:.62s;

  --nav-h:74px;
  --nav-pad:0px;
  /* Ambient aurora — built only from the brand blues (no third-party hues).
     --aurora-strength scales the whole effect per hero type. */
  --aurora-strength:1;
  --aurora-sky:rgba(143,213,242,.52);   /* brand-300 */
  --aurora-cyan:rgba(82,189,232,.44);   /* brand-400 */
  --aurora-deep:rgba(10,127,196,.24);   /* brand-600 */
}

/* ---------- 2. Reset ---------- */
*,*::before,*::after{box-sizing:border-box}
html{-webkit-text-size-adjust:100%;scroll-behavior:smooth;scroll-padding-top:calc(var(--nav-h) + 28px);hanging-punctuation:first}
@media (prefers-reduced-motion:reduce){html{scroll-behavior:auto}}
body{
  margin:0;background:var(--bg);color:var(--text);
  font-family:var(--font-text);font-size:var(--fs-body);line-height:1.47;
  font-optical-sizing:auto;letter-spacing:-.011em;
  -webkit-font-smoothing:antialiased;-moz-osx-font-smoothing:grayscale;
  overflow-x:hidden;
}
img,svg,video{display:block;max-width:100%;height:auto}
h1,h2,h3,h4,h5,h6{
  margin:0;font-family:var(--font-display);font-weight:600;
  letter-spacing:-.032em;line-height:1.07;color:var(--ink-900);text-wrap:balance
}
p,ul,ol,dl,figure,blockquote,table{margin:0}
ul,ol{padding:0;list-style:none}
a{color:inherit;text-decoration:none}
button,input,select,textarea{font:inherit;color:inherit}
button{background:none;border:0;cursor:pointer}
table{border-collapse:collapse;width:100%}
:focus-visible{outline:2.5px solid var(--brand-600);outline-offset:3px;border-radius:6px}
::selection{background:rgba(10,127,196,.18)}
hr{border:0;border-top:1px solid var(--line);margin:0}
[hidden]{display:none!important}

/* ---------- 3. Translucent material (dark surfaces only) ----------
   Light-surface glass was removed: the design now uses solid white surfaces
   with hairline borders. Only badges over photography and cards inside dark
   bands stay translucent, where the effect is legible and purposeful. */
.proj__badge{
  -webkit-backdrop-filter:var(--glass-blur-sm);backdrop-filter:var(--glass-blur-sm)
}
@supports not ((backdrop-filter:blur(1px)) or (-webkit-backdrop-filter:blur(1px))){
  .proj__badge{background:rgba(9,42,64,.82)}
}

/* ---------- 4. Layout ---------- */
.wrap{width:100%;max-width:var(--maxw);margin-inline:auto;padding-inline:var(--gutter)}
.wrap--wide{max-width:var(--maxw-wide)}
.wrap--prose{max-width:var(--maxw-prose)}
.section{padding-block:var(--section-y);position:relative}
.section--tight{padding-block:calc(var(--section-y) * .6)}
/* Rounded content slabs — apple.com section rhythm */
.section--subtle,.section--muted{
  background:var(--bg-subtle);border-radius:var(--r-3xl);
  margin-inline:var(--slab-inset);overflow:hidden
}
.section--muted{background:var(--bg-muted)}
.section--line{border-top:1px solid var(--line)}
.grid{display:grid;gap:var(--s-6)}
.grid>*{min-width:0}
@media (min-width:600px){.g-sm-2{grid-template-columns:repeat(2,1fr)}}
@media (min-width:900px){
  .g-2{grid-template-columns:repeat(2,1fr)}
  .g-3{grid-template-columns:repeat(3,1fr)}
  .g-4{grid-template-columns:repeat(2,1fr)}
  .g-6{grid-template-columns:repeat(3,1fr)}
}
@media (min-width:1120px){
  .g-4{grid-template-columns:repeat(4,1fr)}
  .g-5{grid-template-columns:repeat(5,1fr)}
  .g-6{grid-template-columns:repeat(6,1fr)}
}
.split{display:grid;gap:var(--s-10)}
@media (min-width:960px){
  .split{grid-template-columns:minmax(0,1fr) minmax(0,1fr);gap:var(--s-16);align-items:start}
  .split--sticky>:first-child{position:sticky;top:calc(var(--nav-h) + var(--s-10))}
  .split--40-60{grid-template-columns:minmax(0,.68fr) minmax(0,1fr)}
  .split--60-40{grid-template-columns:minmax(0,1fr) minmax(0,.72fr)}
}
.stack>*+*{margin-top:var(--s-4)}
.stack-lg>*+*{margin-top:var(--s-8)}
.flow>*+*{margin-top:var(--s-5)}
.cluster{display:flex;flex-wrap:wrap;gap:var(--s-3);align-items:center}
.center{text-align:center;margin-inline:auto}
.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}
.skip-link{position:fixed;top:-100px;left:var(--s-4);z-index:2000;background:var(--ink-900);color:#fff;padding:.8rem 1.3rem;border-radius:var(--r-pill);transition:top var(--t-fast)}
.skip-link:focus{top:var(--s-4)}

/* ---------- 5. Typography ---------- */
.display-1{font-size:var(--fs-display-1);letter-spacing:-.045em;line-height:1.02;font-weight:600}
.display-2{font-size:var(--fs-display-2);letter-spacing:-.04em;line-height:1.05}
.h1{font-size:var(--fs-h1);letter-spacing:-.038em}
.h2{font-size:var(--fs-h2);letter-spacing:-.034em;line-height:1.08}
.h3{font-size:var(--fs-h3);letter-spacing:-.028em;line-height:1.18}
.h4{font-size:var(--fs-h4);letter-spacing:-.02em;line-height:1.3;font-weight:600}
.lead{font-size:var(--fs-lead);line-height:1.42;color:var(--ink-600);letter-spacing:-.019em;text-wrap:pretty}
.body-lg{font-size:1.1875rem;line-height:1.5;color:var(--ink-600);letter-spacing:-.015em}
.muted{color:var(--text-muted)}
.soft{color:var(--text-soft)}
.small{font-size:var(--fs-sm)}
.xs{font-size:var(--fs-xs)}
.mono{font-family:var(--font-mono);font-variant-numeric:tabular-nums;letter-spacing:0}
.tnum{font-variant-numeric:tabular-nums}
.balance{text-wrap:balance}
.measure{max-width:36em}
.measure-sm{max-width:28em}

.eyebrow{
  display:flex;align-items:center;gap:var(--s-2);
  font-size:var(--fs-eyebrow);font-weight:600;letter-spacing:.02em;text-transform:uppercase;
  color:var(--accent-text);margin-bottom:var(--s-5);font-family:var(--font-text)
}
.eyebrow::before{content:"";width:16px;height:1.5px;background:currentColor;flex:none;opacity:.6;border-radius:2px}
.eyebrow--plain::before{display:none}
.eyebrow--ink{color:var(--ink-400)}

.section-head{max-width:54rem;margin-bottom:var(--s-12)}
.section-head .lead{margin-top:var(--s-5)}
.section-head--center{text-align:center;margin-inline:auto}
.section-head--center .eyebrow{justify-content:center}

.prose{max-width:var(--maxw-prose);font-size:1.09375rem;line-height:1.62;letter-spacing:-.014em}
.prose>*+*{margin-top:var(--s-5)}
.prose h2{font-size:var(--fs-h2);margin-top:var(--s-16)}
.prose h3{font-size:var(--fs-h3);margin-top:var(--s-12)}
.prose h4{font-size:var(--fs-h4);margin-top:var(--s-8)}
.prose ul,.prose ol{padding-left:0}
.prose li{position:relative;padding-left:1.6rem;color:var(--ink-600)}
.prose li+li{margin-top:var(--s-3)}
.prose ul>li::before{content:"";position:absolute;left:.35rem;top:.66em;width:6px;height:6px;border-radius:50%;background:var(--brand-500)}
.prose ol{counter-reset:o}
.prose ol>li{counter-increment:o}
.prose ol>li::before{content:counter(o);position:absolute;left:0;top:.02em;font-size:.82em;font-weight:650;color:var(--accent-text);font-variant-numeric:tabular-nums}
.prose a:not(.btn){color:var(--brand-700);text-decoration:underline;text-decoration-thickness:1px;text-underline-offset:.2em;transition:color var(--t-fast)}
.prose a:not(.btn):hover{color:var(--brand-500)}
.prose strong{font-weight:650;color:var(--ink-900)}
.prose blockquote{
  margin-block:var(--s-12);padding:var(--s-8);border-radius:var(--r-lg);
  background:var(--bg-subtle);font-family:var(--font-display);
  font-size:clamp(1.2rem,1.05rem + .8vw,1.6rem);line-height:1.3;letter-spacing:-.03em;color:var(--ink-900)
}
.prose figure figcaption{margin-top:var(--s-3);font-size:var(--fs-xs);color:var(--text-soft)}

/* ---------- 6. Buttons & links ---------- */
.btn{
  --btn-bg:var(--ink-900);--btn-fg:#fff;--btn-bd:transparent;
  display:inline-flex;align-items:center;justify-content:center;gap:.5em;
  padding:.82rem 1.45rem;border-radius:var(--r-pill);
  background:var(--btn-bg);color:var(--btn-fg);border:.5px solid var(--btn-bd);
  font-size:var(--fs-sm);font-weight:600;letter-spacing:-.012em;white-space:nowrap;
  transition:transform .22s var(--ease-spring),background var(--t-fast),color var(--t-fast),
             border-color var(--t-fast),box-shadow var(--t-fast),opacity var(--t-fast)
}
.btn:hover{transform:translateY(-1px)}
.btn:active{transform:scale(.985)}
.btn svg{flex:none;transition:transform var(--t) var(--ease-out)}
.btn:hover svg{transform:translateX(3px)}
.btn--primary{--btn-bg:var(--ink-900)}
.btn--primary:hover{--btn-bg:#000}
.btn--dark{box-shadow:0 6px 18px -10px rgba(8,9,11,.5),inset 0 .5px 0 rgba(255,255,255,.16)}
.btn--dark:hover{--btn-bg:var(--ink-800)}
/* Secondary = glass */
.btn--ghost{--btn-bg:var(--white);--btn-fg:var(--ink-900);--btn-bd:var(--line-strong)}
.btn--ghost:hover{--btn-bd:var(--ink-900)}
.btn--on-dark{--btn-bg:#fff;--btn-fg:var(--ink-900)}
.btn--on-dark:hover{--btn-bg:#fff;box-shadow:0 14px 34px -12px rgba(0,0,0,.55)}
.btn--ghost-dark{
  --btn-fg:#fff;--btn-bd:rgba(255,255,255,.22);
  background:var(--glass-fill-dark);-webkit-backdrop-filter:var(--glass-blur-sm);backdrop-filter:var(--glass-blur-sm);
  box-shadow:var(--glass-lens-dark)
}
.btn--ghost-dark:hover{--btn-bd:rgba(255,255,255,.4)}
.btn--lg{padding:1rem 1.85rem;font-size:1rem}
.btn--sm{padding:.55rem 1.05rem;font-size:var(--fs-xs)}
.btn--block{width:100%}
.btn[disabled]{opacity:.55;pointer-events:none}

.link-arrow{
  display:inline-flex;align-items:center;gap:.3em;font-size:var(--fs-sm);font-weight:580;
  color:var(--accent-text);letter-spacing:-.014em;transition:color var(--t-fast)
}
.link-arrow svg{transition:transform var(--t) var(--ease-out)}
.link-arrow:hover{color:var(--brand-500)}
.link-arrow:hover svg{transform:translateX(4px)}
.link-arrow--ink{color:var(--ink-900)}
.link-arrow--ink:hover{color:var(--brand-600)}

/* ---------- 7. Tags & meta ---------- */
.tag{
  display:inline-flex;align-items:center;gap:.35em;padding:.36rem .78rem;
  border-radius:var(--r-pill);background:var(--bg-muted);
  font-size:var(--fs-xs);font-weight:530;color:var(--ink-600);letter-spacing:-.01em
}
.tag--brand{background:rgba(10,127,196,.1);color:var(--brand-800)}
.tag--outline{
  background:var(--white);border:1px solid var(--line-strong);color:var(--ink-700);
  transition:border-color var(--t-fast),color var(--t-fast)
}
a.tag--outline:hover{border-color:var(--ink-900);color:var(--ink-900)}
.tag--status{padding-left:.6rem}
.tag--status::before{content:"";width:6px;height:6px;border-radius:50%;background:var(--brand-500);flex:none}
.tag--done::before{background:#12A150}
.tag--live::before{background:var(--brand-500);box-shadow:0 0 0 3px rgba(28,154,214,.2)}
.meta{display:flex;flex-wrap:wrap;gap:var(--s-2) var(--s-4);font-size:var(--fs-xs);color:var(--text-soft)}
.meta>*{display:inline-flex;align-items:center;gap:.35em}

/* ---------- 8. Cards ---------- */
.card{
  position:relative;display:flex;flex-direction:column;
  background:var(--white);border:.5px solid var(--line-strong);border-radius:var(--r-lg);
  padding:var(--s-8);
  transition:border-color var(--t),box-shadow var(--t),transform .34s var(--ease)
}
.card--link:hover{border-color:transparent;box-shadow:var(--shadow-md);transform:translateY(-4px)}
.card--flush{padding:0;overflow:hidden}
.card--subtle{background:var(--bg-subtle);border-color:transparent}
.card--subtle.card--link:hover{background:var(--white);box-shadow:var(--shadow-md)}
.card__head{display:flex;align-items:flex-start;justify-content:space-between;gap:var(--s-4)}
.card__title{font-size:var(--fs-h4);letter-spacing:-.024em}
.card__body{color:var(--ink-600);font-size:var(--fs-sm);line-height:1.55;margin-top:var(--s-3);letter-spacing:-.012em}
.card__foot{margin-top:auto;padding-top:var(--s-6);display:flex;align-items:center;justify-content:space-between;gap:var(--s-4)}
.card__index{font-family:var(--font-mono);font-size:var(--fs-xs);color:var(--accent-text)}
.card a.stretch::after{content:"";position:absolute;inset:0;border-radius:inherit}

/* Service card */
.svc{padding:var(--s-8)}
.svc__code{font-family:var(--font-mono);font-size:var(--fs-xs);color:var(--accent-text);margin-bottom:var(--s-4)}
.svc__title{font-size:1.2rem;letter-spacing:-.026em;margin-bottom:var(--s-2)}
.svc__sub{font-size:var(--fs-xs);color:var(--text-soft);margin-bottom:var(--s-4)}
.svc__list{margin-top:var(--s-5);border-top:1px solid var(--line);padding-top:var(--s-4);display:grid;gap:var(--s-2)}
.svc__list li{font-size:var(--fs-xs);color:var(--ink-500);padding-left:1rem;position:relative;letter-spacing:-.008em}
.svc__list li::before{content:"";position:absolute;left:0;top:.58em;width:4px;height:4px;border-radius:50%;background:var(--brand-400)}

/* Project card — concentric: outer 26px, media 26px top, inner padding 24px */
.proj{
  position:relative;display:flex;border-radius:var(--r-lg);overflow:hidden;
  background:var(--brand-950);border:.5px solid var(--line);
  transition:box-shadow var(--t),transform .34s var(--ease)
}
.proj>a{display:flex;flex-direction:column;width:100%}
.proj:hover{box-shadow:var(--shadow-md);transform:translateY(-4px)}
.proj__media{position:relative;aspect-ratio:16/11;overflow:hidden;background:var(--brand-950)}
.proj__media>svg,.proj__media>img{width:100%;height:100%;object-fit:cover;transition:transform 1.2s var(--ease-out)}
.proj:hover .proj__media>svg,.proj:hover .proj__media>img{transform:scale(1.05)}
.proj__badge{
  position:absolute;top:var(--s-4);left:var(--s-4);z-index:2;
  background:var(--glass-fill-dark);border:.5px solid var(--glass-edge-dark);
  box-shadow:var(--glass-lens-dark);border-radius:var(--r-pill);
  padding:.32rem .72rem;font-size:var(--fs-xs);font-weight:560;color:#fff;letter-spacing:-.01em
}
.proj__body{padding:var(--s-6);background:var(--white);flex:1;display:flex;flex-direction:column}
.proj__client{font-size:var(--fs-xs);color:var(--accent-text);font-weight:560;margin-bottom:var(--s-2)}
.proj__title{font-size:1.12rem;letter-spacing:-.026em;line-height:1.24;margin-bottom:var(--s-4)}
.proj__meta{margin-top:auto;padding-top:var(--s-4);border-top:1px solid var(--line);display:flex;flex-wrap:wrap;align-items:center;gap:var(--s-2) var(--s-4);font-size:var(--fs-xs);color:var(--text-soft)}

/* Stat */
.stat{padding:var(--s-6) 0}
.stat__num{
  font-family:var(--font-display);font-size:clamp(2.5rem,1.5rem + 2.8vw,4rem);
  font-weight:600;letter-spacing:-.05em;line-height:.98;color:var(--ink-900);font-variant-numeric:tabular-nums
}
.stat__num sup{font-size:.4em;font-weight:600;vertical-align:super;letter-spacing:0;color:var(--brand-600)}
.stat__label{margin-top:var(--s-3);font-size:var(--fs-sm);color:var(--ink-500);line-height:1.4;letter-spacing:-.012em}
.stat-row{display:grid;gap:var(--s-6) var(--s-8);grid-template-columns:repeat(2,1fr)}
@media (min-width:900px){.stat-row{grid-template-columns:repeat(4,1fr)}}
.stat-row--divided .stat{border-top:1px solid var(--line);padding-top:var(--s-6)}

/* Fact list */
.facts{display:grid;gap:0;border-top:1px solid var(--line)}
.facts>div{display:grid;grid-template-columns:minmax(7.5rem,.42fr) 1fr;gap:var(--s-4);padding:var(--s-4) 0;border-bottom:1px solid var(--line);font-size:var(--fs-sm);align-items:baseline}
.facts dt{color:var(--text-soft);font-size:var(--fs-xs)}
.facts dd{margin:0;color:var(--ink-800);font-weight:530}

/* ---------- 9. Floating glass navigation ---------- */
.nav{
  position:sticky;top:0;z-index:900;background:var(--white);
  border-bottom:1px solid var(--line);
  transition:box-shadow var(--t)
}
.nav.is-stuck{box-shadow:0 1px 0 rgba(26,27,29,.06),0 8px 24px -18px rgba(26,27,29,.22)}
.nav__inner{
  position:relative;                 /* containing block for the mega panels */
  display:flex;align-items:center;gap:var(--s-6);
  height:var(--nav-h);max-width:var(--maxw-wide);
  margin-inline:auto;padding-inline:var(--gutter)
}
/* menu sits optically centred; actions pinned right */
.nav__menu{flex:1;justify-content:center}
.nav__logo{display:flex;align-items:center;flex:none}
.nav__logo img{height:30px;width:auto}
.nav__menu{display:none;align-items:center;gap:var(--s-1)}
.nav__link{
  display:inline-flex;align-items:center;gap:.3em;padding:.5rem .85rem;border-radius:var(--r-pill);
  font-size:.9375rem;font-weight:520;letter-spacing:-.016em;color:var(--ink-700);
  transition:color var(--t-fast),background var(--t-fast)
}
.nav__link:hover{color:var(--ink-900);background:rgba(8,9,11,.05)}
.nav__link[aria-current="true"],.nav__link.is-active{color:var(--accent-text)}
.nav__link .chev{width:9px;height:9px;opacity:.45;transition:transform var(--t-fast)}
.nav__item{position:static}
.nav__item.is-open>.nav__link{background:rgba(8,9,11,.05)}
.nav__item.is-open>.nav__link .chev{transform:rotate(180deg)}
.nav__actions{display:flex;align-items:center;gap:var(--s-2);flex:none;margin-left:auto}
@media (min-width:1080px){.nav__menu{display:flex}}

/* Mega panel — glass sheet */
.mega{
  position:absolute;top:calc(100% + 1px);left:50%;translate:-50% 0;z-index:950;
  width:min(66rem,calc(100vw - var(--gutter) * 2));
  background:var(--white);border:1px solid var(--line);
  box-shadow:var(--shadow-lg);
  border-radius:var(--r-lg);padding:var(--s-8);
  max-height:calc(100vh - var(--nav-h) - 5rem);overflow-y:auto;overscroll-behavior:contain;
  opacity:0;visibility:hidden;transform:translateY(-8px) scale(.985);
  transition:opacity var(--t) var(--ease),transform var(--t) var(--ease),visibility var(--t)
}
.nav__item.is-open .mega{opacity:1;visibility:visible;transform:translateY(0) scale(1)}
.mega__grid{display:grid;gap:var(--s-8);grid-template-columns:repeat(3,1fr)}
.mega__col+.mega__col{margin-top:var(--s-8)}
.mega__col h3{font-size:var(--fs-eyebrow);text-transform:uppercase;letter-spacing:.03em;color:var(--text-soft);font-family:var(--font-text);font-weight:600;margin-bottom:var(--s-4)}
.mega__col li+li{margin-top:1px}
.mega__link{display:block;padding:.55rem .7rem;margin-inline:-.7rem;border-radius:var(--r-sm);transition:background var(--t-fast)}
.mega__link:hover{background:rgba(8,9,11,.05)}
.mega__link b{display:block;font-size:.9375rem;font-weight:560;letter-spacing:-.019em;color:var(--ink-900)}
.mega__link span{display:block;font-size:var(--fs-xs);color:var(--text-soft);margin-top:1px;line-height:1.36}
.mega__foot{margin-top:var(--s-8);padding-top:var(--s-6);border-top:1px solid var(--line);display:flex;flex-wrap:wrap;gap:var(--s-4);align-items:center;justify-content:space-between}

/* Language switch */
.lang{position:relative;flex:none}
.lang__btn{display:inline-flex;align-items:center;gap:.3em;padding:.5rem .7rem;border-radius:var(--r-pill);font-size:var(--fs-xs);font-weight:620;letter-spacing:.02em;color:var(--ink-600);text-transform:uppercase;transition:background var(--t-fast),color var(--t-fast)}
.lang__btn:hover{background:rgba(8,9,11,.05);color:var(--ink-900)}
.lang__menu{
  position:absolute;top:calc(100% + 10px);right:0;min-width:10rem;
  background:var(--white);border:1px solid var(--line);
  box-shadow:var(--shadow-md);border-radius:var(--r-md);padding:.35rem;
  opacity:0;visibility:hidden;transform:translateY(-6px) scale(.97);
  transition:opacity var(--t-fast),transform var(--t-fast),visibility var(--t-fast);z-index:960
}
.lang.is-open .lang__menu{opacity:1;visibility:visible;transform:translateY(0) scale(1)}
.lang__menu a{display:flex;align-items:center;justify-content:space-between;gap:var(--s-3);padding:.55rem .7rem;border-radius:var(--r-xs);font-size:var(--fs-sm);color:var(--ink-700);transition:background var(--t-fast)}
.lang__menu a:hover{background:rgba(8,9,11,.06)}
.lang__menu a[aria-current="true"]{color:var(--accent-text);font-weight:580}
.lang__menu a i{font-style:normal;font-size:var(--fs-xs);color:var(--text-soft);text-transform:uppercase}

/* Burger + drawer */
.burger{display:inline-flex;flex-direction:column;justify-content:center;gap:5px;width:40px;height:40px;padding:0 9px;border-radius:var(--r-pill);flex:none;transition:background var(--t-fast)}
.burger:hover{background:rgba(8,9,11,.05)}
.burger span{display:block;height:1.5px;background:var(--ink-800);border-radius:2px;transition:transform var(--t) var(--ease),opacity var(--t-fast)}
.burger[aria-expanded="true"] span:nth-child(1){transform:translateY(6.5px) rotate(45deg)}
.burger[aria-expanded="true"] span:nth-child(2){opacity:0}
.burger[aria-expanded="true"] span:nth-child(3){transform:translateY(-6.5px) rotate(-45deg)}
@media (min-width:1080px){.burger{display:none}}
.drawer{
  position:fixed;inset:calc(var(--nav-h) + var(--nav-pad) * 2) var(--gutter) var(--s-4);z-index:880;
  background:var(--white);
  border:1px solid var(--line);box-shadow:var(--shadow-lg);
  border-radius:var(--r-xl);overflow-y:auto;overscroll-behavior:contain;
  padding:var(--s-4) var(--s-6) var(--s-8);
  opacity:0;visibility:hidden;transform:translateY(-10px) scale(.98);
  transition:opacity var(--t) var(--ease),transform var(--t) var(--ease),visibility var(--t)
}
.drawer.is-open{opacity:1;visibility:visible;transform:none}
@media (min-width:1080px){.drawer{display:none}}
.drawer .wrap{padding-inline:0;max-width:none}
.drawer__group{border-bottom:1px solid var(--line)}
.drawer__group:last-of-type{border-bottom:0}
.drawer__toggle{display:flex;width:100%;align-items:center;justify-content:space-between;gap:var(--s-4);padding:var(--s-5) 0;font-family:var(--font-display);font-size:1.15rem;font-weight:600;letter-spacing:-.028em;text-align:left}
.drawer__toggle .plus{position:relative;width:16px;height:16px;flex:none}
.drawer__toggle .plus::before,.drawer__toggle .plus::after{content:"";position:absolute;inset:50% 0 auto;height:1.5px;background:var(--ink-400);border-radius:2px;transition:transform var(--t) var(--ease)}
.drawer__toggle .plus::after{transform:rotate(90deg)}
.drawer__toggle[aria-expanded="true"] .plus::after{transform:rotate(0)}
.drawer__panel{overflow:hidden;max-height:0;transition:max-height var(--t-slow) var(--ease-out)}
.drawer__panel ul{padding-bottom:var(--s-5);display:grid;gap:var(--s-1)}
.drawer__panel a{display:block;padding:.5rem 0;font-size:.9375rem;color:var(--ink-600);letter-spacing:-.014em}
.drawer__panel a:hover{color:var(--accent-text)}
.drawer__cta{margin-top:var(--s-8);display:grid;gap:var(--s-3)}
body.is-locked{overflow:hidden}

/* ---------- 9b. Announcement bar ---------- */
.announce{background:var(--ink-900);color:rgba(255,255,255,.86);font-size:var(--fs-sm)}
.announce__inner{display:flex;flex-wrap:wrap;gap:var(--s-3);align-items:center;justify-content:center;
  max-width:var(--maxw-wide);margin-inline:auto;padding:.72rem var(--gutter);text-align:center;
  min-height:44px;color:inherit;transition:background var(--t-fast)}
a.announce__inner:hover{background:rgba(255,255,255,.06)}
a.announce__inner:hover .announce__cta{color:var(--brand-300)}
.announce__pill{display:inline-flex;align-items:center;padding:.16rem .5rem;border-radius:var(--r-xs);
  background:var(--brand-300);color:var(--brand-950);font-size:.6875rem;font-weight:700;letter-spacing:.04em;text-transform:uppercase}
.announce p{margin:0;letter-spacing:-.012em}
.announce__cta{color:#fff;text-decoration:underline;text-underline-offset:.22em;
  text-decoration-thickness:1px;white-space:nowrap;display:inline-flex;align-items:center;gap:.35em;font-weight:560;
  transition:color var(--t-fast)}
.announce__cta svg{transition:transform var(--t) var(--ease-out)}
a.announce__inner:hover .announce__cta svg{transform:translateX(3px)}
/* Swap in the short headline so the bar stays compact on phones */
.announce__short{display:none}
@media (max-width:820px){
  .announce__inner{font-size:var(--fs-xs);gap:var(--s-2);padding-block:.55rem;
    flex-wrap:nowrap;text-align:left;justify-content:flex-start}
  .announce__long{display:none}
  .announce__short{display:inline}
  .announce__inner>span:nth-child(2){
    display:-webkit-box;-webkit-line-clamp:2;-webkit-box-orient:vertical;overflow:hidden}
  .announce__cta{margin-left:auto;flex:none}
  .announce__cta span{display:none}
}
@media (max-width:520px){.announce__pill{display:none}}

/* ---------- 10. Hero ---------- */
.hero{position:relative;padding-block:clamp(2.5rem,1.5rem + 4vw,5.5rem) clamp(3rem,2rem + 4vw,6rem);overflow:hidden;isolation:isolate}
/* Only the homepage hero runs up behind the floating nav capsule; inner pages
   keep their breadcrumbs visible above the hero. */
.hero--home{padding-block:clamp(3.5rem,2rem + 5vw,7rem) clamp(3rem,2rem + 4vw,6rem);text-align:center;
  --aurora-strength:1}
.hero--home .hero__inner{max-width:60rem;margin-inline:auto}
.hero--home .hero__title{max-width:21ch;margin-inline:auto;text-wrap:balance}
.hero--home .hero__lead{max-width:46ch;margin-inline:auto}
.hero--home .hero__kicker,.hero--home .hero__cta{justify-content:center}
.hero--home .hero__cta{margin-top:var(--s-10)}
.hero__trust{margin-top:var(--s-10);font-size:var(--fs-sm);color:var(--text-muted);letter-spacing:-.012em}
.hero__trust a{color:var(--accent-text);text-decoration:underline;text-underline-offset:.2em;text-decoration-thickness:1px}
.hero__trust a:hover{color:var(--brand-500)}
/* Aurora mesh — the only decoration behind a hero. Same construction on every
   page so the top of the site reads as one system; --aurora-strength varies it. */
.hero__aurora{position:absolute;inset:0;z-index:-1;pointer-events:none;overflow:hidden;
  opacity:var(--aurora-strength)}
.hero__aurora::before,.hero__aurora::after{content:"";position:absolute;border-radius:50%;filter:blur(8px)}
/* sky → cyan wash, upper right */
.hero__aurora::before{
  top:-46%;right:-18%;width:74rem;height:74rem;
  background:
    radial-gradient(circle at 40% 60%, var(--aurora-sky) 0%, rgba(143,213,242,.16) 40%, transparent 68%),
    radial-gradient(circle at 62% 38%, var(--aurora-cyan) 0%, rgba(82,189,232,.13) 42%, transparent 70%)}
/* deeper brand blue, lower left */
.hero__aurora::after{
  bottom:-56%;left:-22%;width:56rem;height:56rem;
  background:radial-gradient(circle, var(--aurora-deep) 0%, rgba(10,127,196,.08) 44%, transparent 72%)}
@media (max-width:700px){
  .hero__aurora::before{top:-28%;right:-40%;width:44rem;height:44rem}
  .hero__aurora::after{bottom:-34%;left:-40%;width:34rem;height:34rem}
}
.hero__bg{position:absolute;inset:0;z-index:-1;pointer-events:none}
/* Ambient brand light — the 2026 “soft bloom” backdrop */
.hero__kicker{
  display:inline-flex;align-items:center;gap:var(--s-3);padding:.34rem .95rem .34rem .4rem;
  border:1px solid var(--line-strong);border-radius:var(--r-pill);background:var(--white);
  font-size:var(--fs-xs);font-weight:530;color:var(--ink-600);margin-bottom:var(--s-8);letter-spacing:-.012em
}
.hero__kicker b{display:inline-flex;align-items:center;gap:.4em;padding:.22rem .6rem;border-radius:var(--r-pill);background:var(--accent-text);color:#fff;font-size:.6875rem;font-weight:640;letter-spacing:.02em;text-transform:uppercase;white-space:nowrap;flex:none}
@media (max-width:480px){
  .hero__kicker{gap:var(--s-2);padding:.3rem .8rem .3rem .38rem;font-size:.6875rem;margin-bottom:var(--s-6)}
  .hero__kicker b{font-size:.625rem;padding:.2rem .5rem}
}
.hero__title{font-size:var(--fs-display-1);letter-spacing:-.045em;line-height:1.02;font-weight:600;max-width:24ch}
/* Single-weight, single-colour display type — no gradient fill */
.hero__title em{font-style:normal;color:inherit}
.hero__lead{margin-top:var(--s-8);font-size:var(--fs-lead);line-height:1.42;color:var(--ink-600);max-width:44ch;letter-spacing:-.019em}
.hero__cta{margin-top:var(--s-10);display:flex;flex-wrap:wrap;gap:var(--s-3)}
.hero__note{margin-top:var(--s-6);font-size:var(--fs-xs);color:var(--text-soft)}
.hero__aside{margin-top:var(--s-12)}

/* Page headers: same construction and background as the homepage hero, at a
   calmer intensity and left-aligned because most carry a side panel. */
.hero--page{padding-block:clamp(2.5rem,1.75rem + 2.4vw,4rem) clamp(2.75rem,1.75rem + 3vw,4.75rem);
  --aurora-strength:.5}
.hero--page .hero__title{font-size:var(--fs-h1);max-width:28ch}
.hero--page .hero__lead{margin-top:var(--s-6)}
.hero--dark{background:var(--brand-950);color:#fff;border-radius:var(--r-3xl);margin-inline:var(--slab-inset);
  --aurora-strength:0}
.hero--dark .hero__title,.hero--dark h1,.hero--dark h2{color:#fff}
.hero--dark .hero__lead{color:rgba(255,255,255,.7)}
.hero--dark .eyebrow{color:var(--brand-300)}

/* ---------- 9c. Compact chrome on small screens ---------- */
@media (max-width:760px){
  :root{--nav-h:62px}
  .nav__logo img{height:26px}
}

/* ---------- 10b. Local section navigation ---------- */
/* Sticks under the global nav so a visitor deep in a section always sees the
   section they are in and can move between siblings without the mega menu. */
.secnav{
  position:sticky;top:var(--nav-h);z-index:850;
  background:rgba(255,255,255,.92);-webkit-backdrop-filter:blur(20px) saturate(180%);
  backdrop-filter:blur(20px) saturate(180%);
  border-bottom:1px solid var(--line)
}
.secnav__inner{display:flex;align-items:center;gap:var(--s-5);min-height:52px}
.secnav__hub{
  flex:none;font-size:var(--fs-xs);font-weight:640;letter-spacing:.02em;text-transform:uppercase;
  color:var(--ink-900);padding-right:var(--s-5);border-right:1px solid var(--line);
  transition:color var(--t-fast)
}
.secnav__hub:hover{color:var(--accent-text)}
.secnav__scroll{
  display:flex;gap:var(--s-1);overflow-x:auto;scrollbar-width:none;
  -webkit-overflow-scrolling:touch;scroll-snap-type:x proximity;
  mask-image:linear-gradient(90deg,#000 0,#000 calc(100% - 28px),transparent 100%);
  -webkit-mask-image:linear-gradient(90deg,#000 0,#000 calc(100% - 28px),transparent 100%)
}
.secnav__scroll::-webkit-scrollbar{display:none}
.secnav__item{
  flex:none;scroll-snap-align:start;
  padding:.42rem .8rem;border-radius:var(--r-pill);
  font-size:var(--fs-xs);font-weight:520;color:var(--ink-600);white-space:nowrap;
  transition:background var(--t-fast),color var(--t-fast)
}
.secnav__item:hover{background:var(--bg-muted);color:var(--ink-900)}
.secnav__item.is-current{background:var(--ink-900);color:#fff}
@media (max-width:700px){
  .secnav__inner{gap:var(--s-3);min-height:48px}
  .secnav__hub{padding-right:var(--s-3);font-size:.6875rem}
}
/* anchors must clear both bars */
html{scroll-padding-top:calc(var(--nav-h) + 52px + 20px)}

/* ---------- 10c. HTML sitemap ---------- */
.sitemap{display:grid;gap:var(--s-12)}
@media (min-width:760px){.sitemap{grid-template-columns:repeat(2,1fr)}}
@media (min-width:1120px){.sitemap{grid-template-columns:repeat(3,1fr)}}
.sitemap__list{display:grid;gap:var(--s-2)}
.sitemap__list a{font-size:var(--fs-sm);color:var(--ink-600);letter-spacing:-.012em;
  transition:color var(--t-fast)}
.sitemap__list a:hover{color:var(--accent-text)}
.sitemap__list li:first-child a{font-weight:600;color:var(--ink-900)}

/* ---------- 11. Breadcrumbs ---------- */
.crumbs{padding-block:var(--s-4);position:relative;z-index:1;font-size:var(--fs-xs);color:var(--text-soft)}
.crumbs ol{display:flex;flex-wrap:wrap;gap:.4rem;align-items:center}
.crumbs li{display:inline-flex;align-items:center;gap:.4rem}
.crumbs li+li::before{content:"";width:4px;height:4px;border-radius:50%;background:var(--ink-200)}
.crumbs a:hover{color:var(--accent-text)}
.crumbs [aria-current="page"]{color:var(--ink-600)}

/* ---------- 12. Dark band / CTA ---------- */
.band{
  position:relative;background:var(--brand-950);color:#fff;overflow:hidden;isolation:isolate;
  border-radius:var(--r-3xl);margin-inline:var(--slab-inset)
}
.band::before{content:"";position:absolute;inset:0;z-index:-1;
  background:
    radial-gradient(115% 105% at 84% -8%,rgba(10,127,196,.5) 0%,transparent 56%),
    radial-gradient(75% 85% at -4% 104%,rgba(82,189,232,.2) 0%,transparent 58%)}
.band h2,.band h3,.hero--dark h2,.hero--dark h3{color:#fff}
.band .lead,.band .muted,.hero--dark .lead,.hero--dark .muted{color:rgba(255,255,255,.7)}
.band .eyebrow,.hero--dark .eyebrow{color:var(--brand-300)}
.band .facts,.band .facts>div,.hero--dark .facts,.hero--dark .facts>div{border-color:var(--line-invert)}
.band .facts dt,.hero--dark .facts dt{color:rgba(255,255,255,.66)}
.band .facts dd,.hero--dark .facts dd{color:#fff}
.band .card{
  background:var(--glass-fill-dark);border-color:var(--glass-edge-dark);
  box-shadow:var(--glass-lens-dark);
  -webkit-backdrop-filter:var(--glass-blur-sm);backdrop-filter:var(--glass-blur-sm)
}
.band .card__title,.hero--dark .card__title{color:#fff}
.band .card__body,.hero--dark .card__body{color:rgba(255,255,255,.72)}
.band .stat__num,.hero--dark .stat__num{color:#fff}
.band .stat__label,.hero--dark .stat__label{color:rgba(255,255,255,.72)}
.band .stat-row--divided .stat{border-color:var(--line-invert)}
.band .tag,.hero--dark .tag{background:rgba(255,255,255,.1);color:rgba(255,255,255,.85)}
.band .media-note,.band .soft,.band .xs.soft,.hero--dark .media-note{color:rgba(255,255,255,.72)}
.band .media-note::before{background:var(--brand-300)}
.band .svc__list,.hero--dark .svc__list{border-color:var(--line-invert)}
.band .svc__list li,.hero--dark .svc__list li{color:rgba(255,255,255,.72)}
.cta-band{padding-block:clamp(3.5rem,2.5rem + 4vw,7rem)}
.cta-band__inner{display:grid;gap:var(--s-10);align-items:center}
@media (min-width:900px){.cta-band__inner{grid-template-columns:minmax(0,1fr) auto;gap:var(--s-16)}}
.cta-band h2{font-size:var(--fs-h2);max-width:26ch}

/* ---------- 13. Accordion ---------- */
.acc{border-top:1px solid var(--line)}
.acc__item{border-bottom:1px solid var(--line)}
.acc__btn{display:flex;width:100%;gap:var(--s-5);align-items:flex-start;justify-content:space-between;padding:var(--s-6) 0;text-align:left;font-family:var(--font-display);font-size:1.1rem;font-weight:580;letter-spacing:-.026em;line-height:1.32;color:var(--ink-900);transition:color var(--t-fast)}
.acc__btn:hover{color:var(--accent-text)}
.acc__icon{position:relative;width:26px;height:26px;flex:none;margin-top:.1em;border-radius:50%;background:var(--bg-muted);transition:background var(--t-fast)}
.acc__icon::before,.acc__icon::after{content:"";position:absolute;left:50%;top:50%;width:10px;height:1.6px;background:var(--ink-600);border-radius:2px;translate:-50% -50%;transition:transform var(--t) var(--ease),background var(--t-fast)}
.acc__icon::after{transform:rotate(90deg)}
.acc__btn[aria-expanded="true"] .acc__icon{background:var(--accent-text)}
.acc__btn[aria-expanded="true"] .acc__icon::before,.acc__btn[aria-expanded="true"] .acc__icon::after{background:#fff}
.acc__btn[aria-expanded="true"] .acc__icon::after{transform:rotate(0)}
.acc__panel{overflow:hidden;max-height:0;transition:max-height var(--t-slow) var(--ease-out)}
.acc__panel>div{padding-bottom:var(--s-7);max-width:62ch;color:var(--ink-600);font-size:var(--fs-sm);line-height:1.6}
.acc__panel>div>*+*{margin-top:var(--s-4)}

/* ---------- 14. Tabs ---------- */
.tabs__list{display:flex;gap:var(--s-1);overflow-x:auto;scrollbar-width:none;border-bottom:1px solid var(--line);margin-bottom:var(--s-10)}
.tabs__list::-webkit-scrollbar{display:none}
.tabs__tab{position:relative;padding:.85rem 1.05rem;font-size:var(--fs-sm);font-weight:530;color:var(--text-muted);white-space:nowrap;transition:color var(--t-fast)}
.tabs__tab::after{content:"";position:absolute;left:.6rem;right:.6rem;bottom:-1px;height:2px;background:var(--brand-600);border-radius:2px;transform:scaleX(0);transition:transform var(--t) var(--ease)}
.tabs__tab:hover{color:var(--ink-800)}
.tabs__tab[aria-selected="true"]{color:var(--ink-900)}
.tabs__tab[aria-selected="true"]::after{transform:scaleX(1)}
.tabs__panel[hidden]{display:none}

/* ---------- 15. Lifecycle ---------- */
.lifecycle{position:relative}
.lifecycle__track{
  display:grid;gap:var(--s-3);grid-auto-flow:column;grid-auto-columns:1fr;
  overflow-x:auto;scrollbar-width:none;padding-bottom:var(--s-2);
  scroll-snap-type:x proximity;
  /* fade the trailing edge so it is obvious more stages exist off-screen */
  mask-image:linear-gradient(90deg,#000 0,#000 calc(100% - 36px),transparent 100%);
  -webkit-mask-image:linear-gradient(90deg,#000 0,#000 calc(100% - 36px),transparent 100%)
}
@media (min-width:1200px){
  .lifecycle__track{mask-image:none;-webkit-mask-image:none}
}
.lifecycle__step{scroll-snap-align:start}
.lifecycle__track::-webkit-scrollbar{display:none}
.chips{scroll-snap-type:x proximity}
.lifecycle__step{
  position:relative;min-width:10.5rem;padding:var(--s-5);
  border-radius:var(--r-md);border:1px solid var(--line);background:var(--white);text-align:left;
  transition:background var(--t) var(--ease),box-shadow var(--t),border-color var(--t-fast),color var(--t-fast)
}
.lifecycle__step:hover:not([aria-selected="true"]){border-color:var(--line-strong);box-shadow:var(--shadow-sm)}
.lifecycle__step[aria-selected="true"]{background:var(--ink-900);border-color:var(--ink-900)}
.lifecycle__step[aria-selected="true"] .lifecycle__name{color:#fff}
.lifecycle__step[aria-selected="true"] .lifecycle__n{color:var(--brand-300)}
.lifecycle__step[aria-selected="true"] .lifecycle__dur{color:rgba(255,255,255,.6)}
.lifecycle__n{font-family:var(--font-mono);font-size:var(--fs-xs);color:var(--text-soft)}
.lifecycle__name{margin-top:var(--s-3);font-family:var(--font-display);font-size:1rem;font-weight:580;letter-spacing:-.026em;line-height:1.2;color:var(--ink-900);display:block}
.lifecycle__dur{margin-top:var(--s-2);font-size:var(--fs-xs);color:var(--text-soft);display:block}
.lifecycle__body{margin-top:var(--s-10);display:grid;gap:var(--s-8)}
@media (min-width:900px){.lifecycle__body{grid-template-columns:repeat(3,1fr);gap:var(--s-10)}}
.lifecycle__col h4{font-size:var(--fs-eyebrow);text-transform:uppercase;letter-spacing:.03em;font-family:var(--font-text);color:var(--text-soft);margin-bottom:var(--s-4)}
.lifecycle__col li{position:relative;padding-left:1.4rem;font-size:var(--fs-sm);color:var(--ink-600);letter-spacing:-.012em}
.lifecycle__col li+li{margin-top:var(--s-3)}
.lifecycle__col li::before{content:"";position:absolute;left:.15rem;top:.58em;width:6px;height:6px;border-radius:50%;background:var(--brand-400)}
.lifecycle__col--risk li::before{background:#F0873C}

/* ---------- 16. Risk → action → result ---------- */
.rar{display:grid;gap:var(--s-5)}
@media (min-width:900px){.rar{grid-template-columns:repeat(3,1fr)}}
.rar__col{position:relative;padding:var(--s-7);border-radius:var(--r-lg);border:.5px solid transparent}
.rar__col--risk{background:linear-gradient(175deg,#FEF7F1,#FDF3EA);border-color:rgba(240,135,60,.18)}
.rar__col--act{background:linear-gradient(175deg,rgba(10,127,196,.07),rgba(10,127,196,.035));border-color:rgba(10,127,196,.16)}
.rar__col--res{background:linear-gradient(175deg,rgba(18,161,80,.07),rgba(18,161,80,.03));border-color:rgba(18,161,80,.16)}
.rar__h{display:flex;align-items:center;gap:var(--s-3);font-size:var(--fs-eyebrow);font-weight:660;letter-spacing:.02em;text-transform:uppercase;color:var(--ink-600);margin-bottom:var(--s-5)}
.rar__h i{font-style:normal;display:inline-flex;align-items:center;justify-content:center;width:22px;height:22px;border-radius:50%;background:#fff;box-shadow:var(--shadow-xs);color:var(--accent-text);font-family:var(--font-mono);font-size:.6875rem}
.rar__col ul li{position:relative;padding-left:1.25rem;font-size:var(--fs-sm);line-height:1.5;color:var(--ink-700);letter-spacing:-.012em}
.rar__col ul li+li{margin-top:var(--s-3)}
.rar__col ul li::before{content:"";position:absolute;left:0;top:.6em;width:5px;height:5px;border-radius:50%;background:currentColor;opacity:.38}

/* ---------- 17. Numbered process ---------- */
.steps{counter-reset:st;display:grid;gap:var(--s-8)}
.steps--stack{grid-template-columns:1fr!important;gap:var(--s-7)}
@media (min-width:840px){.steps--3{grid-template-columns:repeat(3,1fr)}.steps--4{grid-template-columns:repeat(4,1fr)}}
.step{position:relative;counter-increment:st;padding-top:var(--s-8);border-top:1px solid var(--line)}
.step::before{content:counter(st,decimal-leading-zero);position:absolute;top:calc(var(--s-8) * -.5);left:0;font-family:var(--font-mono);font-size:var(--fs-xs);color:var(--accent-text);background:var(--bg);padding-right:.6rem}
.section--subtle .step::before,.section--muted .step::before{background:var(--bg-subtle)}
.section--subtle .lifecycle__step{background:var(--white)}
.step h3{font-size:1.08rem;letter-spacing:-.026em;margin-bottom:var(--s-3)}
.step p{font-size:var(--fs-sm);color:var(--ink-600);line-height:1.55;letter-spacing:-.012em}
.step__meta{margin-top:var(--s-4);font-size:var(--fs-xs);color:var(--accent-text);font-weight:560}

/* ---------- 18. Filters — iOS segmented controls ---------- */
.filters{display:flex;flex-wrap:wrap;gap:var(--s-5) var(--s-8);align-items:flex-end;padding-bottom:var(--s-8);margin-bottom:var(--s-8)}
.filter{min-width:0}
.filter__label{display:block;font-size:var(--fs-eyebrow);text-transform:uppercase;letter-spacing:.03em;color:var(--text-soft);font-weight:620;margin-bottom:var(--s-3)}
.chips{
  display:flex;flex-wrap:wrap;gap:3px;padding:4px;border-radius:var(--r-pill);
  background:var(--bg-muted)
}
.chip{
  padding:.44rem .95rem;border-radius:var(--r-pill);border:.5px solid transparent;
  background:transparent;font-size:var(--fs-xs);font-weight:540;color:var(--ink-600);
  letter-spacing:-.01em;
  transition:background var(--t-fast),color var(--t-fast),box-shadow var(--t-fast),transform .2s var(--ease-spring)
}
.chip:hover{color:var(--ink-900);background:rgba(255,255,255,.7)}
.chip[aria-pressed="true"]{background:var(--white);color:var(--ink-900);box-shadow:0 1px 3px rgba(26,27,29,.12)}
.chip:active{transform:scale(.96)}
.result-count{font-size:var(--fs-sm);color:var(--text-muted);margin-bottom:var(--s-6)}
.empty-state{padding:var(--s-16) 0;text-align:center;color:var(--text-muted)}

/* ---------- 19. Forms ---------- */
.form{display:grid;gap:var(--s-5)}
.field{display:grid;gap:var(--s-2)}
.field label,.legend{font-size:var(--fs-xs);font-weight:600;color:var(--ink-700)}
.field label .req{color:#D64545;margin-left:.15em}
.field .hint{font-size:var(--fs-xs);color:var(--text-soft)}
.input,.select,.textarea{
  width:100%;padding:.85rem 1.05rem;border:.5px solid var(--line-strong);border-radius:var(--r-sm);
  background:var(--bg-subtle);font-size:var(--fs-sm);color:var(--ink-900);letter-spacing:-.012em;
  transition:border-color var(--t-fast),box-shadow var(--t-fast),background var(--t-fast)
}
/* iOS Safari zooms the viewport when a focused field is under 16px. */
@media (max-width:1023px){
  .input,.select,.textarea{font-size:1rem}
}
.input::placeholder,.textarea::placeholder{color:var(--ink-400)}
.input:focus,.select:focus,.textarea:focus{outline:none;background:var(--white);border-color:var(--brand-500);box-shadow:0 0 0 4px rgba(10,127,196,.14)}
.input[aria-invalid="true"],.textarea[aria-invalid="true"],.select[aria-invalid="true"]{border-color:#D64545;box-shadow:0 0 0 4px rgba(214,69,69,.12)}
.textarea{min-height:8.5rem;resize:vertical;line-height:1.5}
.select{appearance:none;background-image:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='12' height='8' viewBox='0 0 12 8'%3E%3Cpath d='M1 1.5 6 6.5l5-5' stroke='%235C616B' stroke-width='1.6' fill='none' stroke-linecap='round' stroke-linejoin='round'/%3E%3C/svg%3E");background-repeat:no-repeat;background-position:right 1rem center;padding-right:2.5rem}
.field-error{font-size:var(--fs-xs);color:#C23434}
.row-2{display:grid;gap:var(--s-5)}
@media (min-width:640px){.row-2{grid-template-columns:1fr 1fr}}
.checkbox{display:flex;gap:var(--s-3);align-items:flex-start;font-size:var(--fs-xs);color:var(--ink-600);line-height:1.5;cursor:pointer}
.checkbox input{flex:none;width:19px;height:19px;margin-top:.1em;accent-color:var(--brand-600);border-radius:6px}
.checkbox a{color:var(--brand-700);text-decoration:underline;text-underline-offset:.15em}
.filedrop{position:relative;border:1.5px dashed var(--line-strong);border-radius:var(--r-sm);padding:var(--s-6);text-align:center;transition:border-color var(--t-fast),background var(--t-fast);cursor:pointer}
.filedrop:hover,.filedrop.is-over{border-color:var(--brand-500);background:rgba(10,127,196,.04)}
.filedrop input{position:absolute;inset:0;opacity:0;cursor:pointer}
.filedrop__txt{font-size:var(--fs-sm);color:var(--ink-600)}
.filedrop__hint{font-size:var(--fs-xs);color:var(--text-soft);margin-top:var(--s-2)}
.form-note{font-size:var(--fs-xs);color:var(--text-soft);line-height:1.5}
.form-status{padding:var(--s-5);border-radius:var(--r-sm);font-size:var(--fs-sm);display:none}
.form-status.is-ok{display:block;background:rgba(18,161,80,.09);color:#0B7038;border:.5px solid rgba(18,161,80,.24)}
.form-status.is-err{display:block;background:rgba(214,69,69,.08);color:#A82B2B;border:.5px solid rgba(214,69,69,.24)}

/* ---------- 20. Tables ---------- */
.table-scroll{overflow-x:auto;-webkit-overflow-scrolling:touch;margin-inline:calc(var(--gutter) * -1);padding-inline:var(--gutter)}
.table{font-size:var(--fs-sm);min-width:44rem}
.table th,.table td{text-align:left;padding:var(--s-4);border-bottom:1px solid var(--line);vertical-align:top}
.table th{font-size:var(--fs-xs);text-transform:uppercase;letter-spacing:.03em;color:var(--text-soft);font-weight:620;border-bottom-color:var(--line-strong);white-space:nowrap}
.table td:first-child,.table th:first-child{padding-left:0}
.table td:last-child,.table th:last-child{padding-right:0}
.table tbody tr:hover td{background:var(--bg-subtle)}
.table strong{font-weight:600;color:var(--ink-900);display:block}
.table .sub{font-size:var(--fs-xs);color:var(--text-soft);display:block;margin-top:2px}

/* ---------- 21. Person card ---------- */
.person{position:relative}
.person__photo{aspect-ratio:4/5;border-radius:var(--r-lg);overflow:hidden;background:linear-gradient(165deg,var(--ink-050),var(--ink-100));display:grid;place-items:center}
.person__photo img{width:100%;height:100%;object-fit:cover}
.person__initials{font-family:var(--font-display);font-size:2.5rem;font-weight:600;color:var(--ink-300);letter-spacing:-.04em}
.person__name{margin-top:var(--s-5);font-size:1.08rem;letter-spacing:-.026em}
.person__role{margin-top:var(--s-2);font-size:var(--fs-xs);color:var(--accent-text);font-weight:560;line-height:1.4}
.person__exp{margin-top:var(--s-3);font-size:var(--fs-xs);color:var(--text-soft)}

/* ---------- 22. Insight card ---------- */
.insight{display:flex;flex-direction:column;height:100%;padding-top:var(--s-6);border-top:1.5px solid var(--line-strong);transition:border-color var(--t)}
.insight:hover{border-top-color:var(--brand-600)}
.insight__cat{font-size:var(--fs-eyebrow);text-transform:uppercase;letter-spacing:.03em;font-weight:620;color:var(--accent-text)}
.insight__title{margin-top:var(--s-4);font-size:1.18rem;letter-spacing:-.028em;line-height:1.24;transition:color var(--t-fast)}
.insight:hover .insight__title{color:var(--accent-text)}
.insight__excerpt{margin-top:var(--s-3);font-size:var(--fs-sm);color:var(--ink-600);line-height:1.55;letter-spacing:-.012em}
.insight__meta{margin-top:auto;padding-top:var(--s-6);font-size:var(--fs-xs);color:var(--text-soft);display:flex;gap:var(--s-4)}

/* ---------- 23. Logo wall ---------- */
.logowall{display:grid;grid-template-columns:repeat(2,1fr);gap:1px;background:var(--line);border-radius:var(--r-lg);overflow:hidden}
@media (min-width:700px){.logowall{grid-template-columns:repeat(3,1fr)}}
@media (min-width:1000px){.logowall{grid-template-columns:repeat(5,1fr)}}
.logowall__cell{background:#fff;display:grid;place-items:center;padding:var(--s-6) var(--s-4);min-height:5.5rem;font-family:var(--font-display);font-size:.9375rem;font-weight:600;letter-spacing:-.02em;color:var(--ink-400);text-align:center;transition:color var(--t-fast),background var(--t-fast)}
.logowall__cell:hover{color:var(--ink-800);background:var(--bg-subtle)}

/* ---------- 24. Quote ---------- */
.quote{padding:var(--s-10) 0;border-top:1px solid var(--line);border-bottom:1px solid var(--line)}
.quote blockquote{font-family:var(--font-display);font-size:clamp(1.3rem,1.05rem + 1.1vw,2rem);line-height:1.24;letter-spacing:-.036em;color:var(--ink-900);max-width:40ch}
.quote figcaption{margin-top:var(--s-6);font-size:var(--fs-sm);color:var(--text-muted)}
.quote figcaption b{color:var(--ink-900);font-weight:600;display:block}

/* ---------- 25. Media / figures ---------- */
.figure{border-radius:var(--r-xl);overflow:hidden;border:.5px solid var(--line);background:var(--bg-subtle)}
.figure--photo{border:0;background:var(--ink-100);box-shadow:var(--shadow-md);margin:0}
.figure--photo picture,.figure--photo img{display:block;width:100%;height:100%;object-fit:cover}
.figure--photo img{aspect-ratio:16/10}
.hero__photo img{aspect-ratio:16/11}
@media (max-width:999px){.hero__photo img{aspect-ratio:16/9}}
/* Project cards and page heroes crop to their own frame */
.proj__media picture{display:block;width:100%;height:100%}
.proj__media img{width:100%;height:100%;object-fit:cover;aspect-ratio:auto;
  transition:transform 1.2s var(--ease-out)}
.proj:hover .proj__media img{transform:scale(1.05)}
/* Project heroes: 16/9 keeps tall structures readable; bias the crop upward so
   towers, cranes and terminals are not decapitated. */
.figure--photo.figure--wide img{aspect-ratio:16/9;object-position:50% 38%}
@media (max-width:700px){.figure--photo.figure--wide img{aspect-ratio:4/3}}
.proj__media img{object-position:50% 42%}
.figure--dark{background:var(--brand-950);border-color:transparent;box-shadow:var(--shadow-lg)}
.figure svg{width:100%;height:auto;display:block}
.media-note{margin-top:var(--s-3);font-size:var(--fs-xs);color:var(--text-soft);display:flex;gap:.5em;align-items:baseline}
.media-note::before{content:"";width:5px;height:5px;border-radius:50%;background:var(--brand-400);flex:none;translate:0 -.25em}
.ratio-16-9{aspect-ratio:16/9}
.ratio-4-3{aspect-ratio:4/3}
.ph{position:relative;background:linear-gradient(155deg,var(--ink-050),var(--ink-100));display:grid;place-items:center;border-radius:var(--r-xl);overflow:hidden}
.ph__label{font-size:var(--fs-xs);color:var(--ink-400);text-align:center;padding:var(--s-6);max-width:26ch}

/* ---------- 26. Footer ---------- */
.footer{background:var(--brand-950);color:rgba(255,255,255,.72);padding-block:var(--s-20) var(--s-8);position:relative;isolation:isolate;overflow:hidden;border-radius:var(--r-3xl) var(--r-3xl) 0 0;margin-top:var(--s-4)}
.footer::before{content:"";position:absolute;inset:0;z-index:-1;background:radial-gradient(95% 75% at 90% -6%,rgba(10,127,196,.32) 0%,transparent 58%)}
.footer__top{display:grid;gap:var(--s-12);padding-bottom:var(--s-16);border-bottom:1px solid var(--line-invert)}
@media (min-width:900px){.footer__top{grid-template-columns:minmax(0,1.15fr) minmax(0,2fr);gap:var(--s-16)}}
.footer__brand img{height:32px;width:auto;margin-bottom:var(--s-6)}
.footer__brand p{font-size:var(--fs-sm);line-height:1.55;max-width:34ch;color:rgba(255,255,255,.72);letter-spacing:-.012em}
.footer__nav{display:grid;gap:var(--s-8);grid-template-columns:repeat(2,1fr)}
@media (min-width:700px){.footer__nav{grid-template-columns:repeat(4,1fr)}}
.footer__nav h3{font-size:var(--fs-eyebrow);text-transform:uppercase;letter-spacing:.03em;color:rgba(255,255,255,.62);font-family:var(--font-text);font-weight:620;margin-bottom:var(--s-5)}
.footer__nav li+li{margin-top:var(--s-3)}
.footer__nav a{font-size:var(--fs-sm);color:rgba(255,255,255,.76);letter-spacing:-.014em;transition:color var(--t-fast)}
.footer__nav a:hover{color:#fff}
.footer__mid{display:grid;gap:var(--s-8);padding-block:var(--s-12);border-bottom:1px solid var(--line-invert)}
@media (min-width:800px){.footer__mid{grid-template-columns:repeat(3,1fr)}}
.office h4{font-size:var(--fs-sm);color:#fff;margin-bottom:var(--s-3);letter-spacing:-.02em}
.office p{font-size:var(--fs-xs);line-height:1.6;color:rgba(255,255,255,.72)}
.office a:hover{color:#fff}
.footer__bot{display:flex;flex-wrap:wrap;gap:var(--s-4) var(--s-8);align-items:center;justify-content:space-between;padding-top:var(--s-8);font-size:var(--fs-xs);color:rgba(255,255,255,.66)}
.footer__legal{display:flex;flex-wrap:wrap;gap:var(--s-5)}
.footer__legal a:hover{color:#fff}
.social{display:flex;gap:var(--s-2)}
.social a{display:grid;place-items:center;width:38px;height:38px;border-radius:50%;border:.5px solid var(--line-invert);background:var(--glass-fill-dark);color:rgba(255,255,255,.72);transition:all var(--t-fast)}
.social a:hover{background:#fff;color:var(--brand-950);border-color:#fff}

/* ---------- 27. Cookie banner ---------- */
.cookie{
  position:fixed;left:var(--s-4);right:var(--s-4);bottom:var(--s-4);z-index:1000;max-width:34rem;
  background:var(--white);border:1px solid var(--line);
  box-shadow:var(--shadow-lg);border-radius:var(--r-xl);padding:var(--s-6);display:none
}
.cookie.is-shown{display:block;animation:rise .6s var(--ease-out) both}
.cookie p{font-size:var(--fs-xs);color:var(--ink-600);line-height:1.5}
.cookie__row{margin-top:var(--s-5);display:flex;flex-wrap:wrap;gap:var(--s-3)}
@keyframes rise{from{opacity:0;transform:translateY(18px) scale(.97)}to{opacity:1;transform:none}}

/* ---------- 28. Scroll reveal ---------- */
[data-reveal]{opacity:0;transform:translateY(22px)}
[data-reveal].is-in{opacity:1;transform:none;transition:opacity .8s var(--ease-out),transform .8s var(--ease-out)}
[data-reveal-stagger]>*{opacity:0;transform:translateY(20px)}
[data-reveal-stagger].is-in>*{opacity:1;transform:none;transition:opacity .7s var(--ease-out),transform .7s var(--ease-out)}
[data-reveal-stagger].is-in>*:nth-child(1){transition-delay:.02s}
[data-reveal-stagger].is-in>*:nth-child(2){transition-delay:.09s}
[data-reveal-stagger].is-in>*:nth-child(3){transition-delay:.16s}
[data-reveal-stagger].is-in>*:nth-child(4){transition-delay:.23s}
[data-reveal-stagger].is-in>*:nth-child(5){transition-delay:.3s}
[data-reveal-stagger].is-in>*:nth-child(6){transition-delay:.37s}
@media (prefers-reduced-motion:reduce){
  *,*::before,*::after{animation-duration:.001ms!important;animation-iteration-count:1!important;transition-duration:.001ms!important}
  [data-reveal],[data-reveal-stagger]>*{opacity:1!important;transform:none!important}
}

/* ---------- 28b. Target size (WCAG 2.2 AA — 24×24 CSS px minimum) ---------- */
.footer__nav a,.footer__legal a,.office a,.crumbs a,.crumbs span,
.sitemap__list a,.lang__menu a,.prose a:not(.btn),
a[href^="tel:"],a[href^="mailto:"]{
  display:inline-flex;align-items:center;min-height:24px
}
a[href^="tel:"].btn,a[href^="mailto:"].btn{display:inline-flex}
.footer__nav li+li{margin-top:var(--s-2)}
.checkbox input{width:24px;height:24px;margin-top:0}
.filedrop{min-height:88px;display:grid;align-content:center}
@media (pointer:coarse){
  .chip,.secnav__item{min-height:36px;display:inline-flex;align-items:center}
  .lang__menu a{min-height:40px}
  .footer__nav a,.footer__legal a,.office a{min-height:32px}
  .social a{width:44px;height:44px}
  .burger{width:44px;height:44px}
}

/* ---------- 29. Utilities ---------- */
.mt-0{margin-top:0}.mt-4{margin-top:var(--s-4)}.mt-6{margin-top:var(--s-6)}.mt-8{margin-top:var(--s-8)}
.mt-10{margin-top:var(--s-10)}.mt-12{margin-top:var(--s-12)}.mt-16{margin-top:var(--s-16)}
.mb-6{margin-bottom:var(--s-6)}.mb-8{margin-bottom:var(--s-8)}.mb-10{margin-bottom:var(--s-10)}.mb-12{margin-bottom:var(--s-12)}
.full-bleed{width:100vw;margin-left:50%;translate:-50% 0}
.nowrap{white-space:nowrap}
.rule{height:1px;background:var(--line);border:0}
.hide-sm{display:none}
@media (min-width:700px){.hide-sm{display:revert}}
@media (min-width:1080px){.hide-lg{display:none}}
/* Landscape phones: ~390px of height — sticky bars must not own a third of it.
   Placed last so it wins over the .nav / .secnav rules above. */
@media (max-height:520px) and (orientation:landscape){
  :root{--nav-h:56px}
  .announce{display:none}
  .secnav{position:static}
  html{scroll-padding-top:calc(var(--nav-h) + 16px)}
}

@media print{
  .nav,.footer,.cookie,.drawer,.cta-band{display:none!important}
  body{font-size:11pt}
  .section--subtle,.band{border-radius:0;margin-inline:0}
  a[href^="http"]::after{content:" (" attr(href) ")";font-size:9pt;color:#666}
}