/* =========================================================
   THE BOTTEGA DIGITALE — shared stylesheet (all pages)
   Generated from the approved V2 landing. Edit tokens, not values.
   ========================================================= */
/* =========================================================
   THE BOTTEGA DIGITALE — DIGITAL MANIFESTO EXPERIENCE · V2
   Design system tokens. Brand palette from Visual Identity.
   Font: Maison Neue (brand) → Hanken Grotesk (web fallback).
   Dual theme: DAY (editorial light) / NIGHT (digital dark).
   ========================================================= */
:root{
  /* Brand palette — fixed, theme-independent */
  --navy-950:#025771;   /* darkest — dark sections */
  --navy-900:#007EA4;   /* colore identitario */
  --blue-500:#3596B3;   /* CTA / highlight / accent */
  --blue-200:#9CD7EC;   /* light accent */
  /* Neutrals */
  --ink:#0B1220;
  --grey-700:#3C3C3B;
  --grey-400:#8A93A3;
  --paper:#FBFBFC;      /* off-white light sections */
  --paper-2:#F1F3F7;
  --white:#FFFFFF;

  --maxw:1320px;
  --gutter:clamp(20px,5vw,80px);

  /* Motion tokens — one movement language for the whole site */
  --motion-fast:200ms;
  --motion-normal:450ms;
  --motion-slow:800ms;
  --motion-reveal:1000ms;
  --motion-theme:800ms;
  --ease-premium:cubic-bezier(.22,1,.36,1);
  --ease:var(--ease-premium);
  --ease-out:cubic-bezier(.16,1,.3,1);

  --step--1:clamp(.82rem,.78rem + .2vw,.95rem);
  --step-0:clamp(1rem,.94rem + .3vw,1.18rem);
  --step-1:clamp(1.3rem,1.1rem + 1vw,1.7rem);
  --step-2:clamp(1.7rem,1.3rem + 2vw,2.6rem);
  --step-3:clamp(2.4rem,1.6rem + 4vw,4.2rem);
  --step-4:clamp(3rem,1.8rem + 6vw,6.4rem);
  --step-5:clamp(3.6rem,2rem + 9vw,9.5rem);

  /* CTA hover surface — white text stays ≥4.5:1 (WCAG AA) */
  --cta-hover:#0E7291;
}

/* ---------- DAY MODE — editorial, precise, data-driven ---------- */
[data-theme="light"]{
  --bg-primary:var(--paper);
  --bg-secondary:var(--paper-2);
  --text-primary:var(--navy-950);
  --text-secondary:var(--grey-700);
  --text-muted:var(--grey-400);
  --border:rgba(2,87,113,.13);
  --surface:var(--white);
  --accent:var(--blue-500);
  --heading-accent:var(--navy-900);
  --band-dark:var(--navy-950);
  --band-deep:var(--navy-900);
  --cell-bg:var(--paper);
  --cell-hover:var(--white);
  --fig-a:var(--navy-900);
  --fig-b:var(--blue-500);
  --header-bg:rgba(251,251,252,.72);
  --header-border:rgba(2,87,113,.08);
  --hero-vignette:rgba(2,26,34,.85);
  --noise-o:.02;
  --glow-o:.16;
  /* AA-safe text accents & interaction tokens */
  --accent-text:var(--navy-900);
  --deep-accent:#FFFFFF;
  --deep-link-hover:#FFFFFF;
  --focus-ring:var(--navy-900);
}

/* ---------- NIGHT MODE — AI, digital intelligence ---------- */
[data-theme="dark"]{
  --bg-primary:#060B0E;
  --bg-secondary:#0A1216;
  --text-primary:#F2F6F8;
  --text-secondary:rgba(242,246,248,.68);
  --text-muted:rgba(242,246,248,.45);
  --border:rgba(156,215,236,.15);
  --surface:#0D171D;
  --accent:var(--blue-200);
  --heading-accent:var(--blue-200);
  --band-dark:#040A0D;
  --band-deep:#071720;
  --cell-bg:#0A1418;
  --cell-hover:#101D24;
  --fig-a:var(--blue-200);
  --fig-b:var(--blue-500);
  --header-bg:rgba(4,10,13,.72);
  --header-border:rgba(156,215,236,.09);
  --hero-vignette:rgba(2,7,9,.9);
  --noise-o:.04;
  --glow-o:.5;
  /* AA-safe text accents & interaction tokens */
  --accent-text:var(--blue-200);
  --deep-accent:var(--blue-200);
  --deep-link-hover:var(--blue-200);
  --focus-ring:var(--blue-200);
}

/* ---------- Theme cross-fade (added transiently via JS) ---------- */
html.theming body,
html.theming *,
html.theming *::before,
html.theming *::after{
  transition:
    background-color var(--motion-theme) var(--ease),
    background var(--motion-theme) var(--ease),
    color var(--motion-theme) var(--ease),
    border-color var(--motion-theme) var(--ease),
    fill var(--motion-theme) var(--ease),
    stroke var(--motion-theme) var(--ease),
    box-shadow var(--motion-theme) var(--ease);
}

*,*::before,*::after{box-sizing:border-box;margin:0;padding:0}
html{scroll-behavior:smooth;-webkit-text-size-adjust:100%;background:var(--bg-primary)}
@media (prefers-reduced-motion:reduce){html{scroll-behavior:auto}}
body{
  font-family:"Maison Neue","Hanken Grotesk",-apple-system,BlinkMacSystemFont,"Segoe UI",sans-serif;
  background:var(--bg-primary);
  color:var(--text-primary);
  font-size:var(--step-0);
  line-height:1.55;
  font-weight:400;
  -webkit-font-smoothing:antialiased;
  text-rendering:optimizeLegibility;
  overflow-x:hidden;
  letter-spacing:-.01em;
}
/* Digital grain — nearly invisible by day, a touch more present by night */
body::after{
  content:"";position:fixed;inset:0;z-index:95;pointer-events:none;
  opacity:var(--noise-o);
  background-image:url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' width='160' height='160'><filter id='n'><feTurbulence type='fractalNoise' baseFrequency='0.9' numOctaves='2' stitchTiles='stitch'/><feColorMatrix type='saturate' values='0'/></filter><rect width='100%25' height='100%25' filter='url(%23n)' opacity='0.6'/></svg>");
  background-size:160px 160px;
}
::selection{background:var(--blue-500);color:#fff}
img{max-width:100%;display:block}
a{color:inherit;text-decoration:none}
button{font:inherit;cursor:pointer;border:0;background:none;color:inherit}

/* ---------- Native accessibility foundations ---------- */
.sr-only{position:absolute!important;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:14px;left:14px;z-index:300;background:var(--navy-900);color:#fff;
  padding:14px 22px;border-radius:10px;font-weight:600;font-size:.95rem;
  transform:translateY(-250%);transition:transform var(--motion-fast) var(--ease)}
.skip-link:focus{transform:none;outline:2px solid #fff;outline-offset:3px}
:focus-visible{outline:2px solid var(--focus-ring,#007EA4);outline-offset:3px;border-radius:3px}
.hero :focus-visible,.band.dark :focus-visible,.band.deep :focus-visible,footer :focus-visible{outline-color:var(--blue-200)}
main:focus{outline:none}

/* ---------- Layout helpers ---------- */
.wrap{max-width:var(--maxw);margin-inline:auto;padding-inline:var(--gutter);position:relative;z-index:2}
section{position:relative}
.eyebrow{
  font-size:var(--step--1);
  font-weight:600;
  letter-spacing:.22em;
  text-transform:uppercase;
  color:var(--accent-text);
  display:inline-flex;align-items:center;gap:.7em;
}
.eyebrow::before{content:"";width:26px;height:1px;background:currentColor;opacity:.6}
.dark .eyebrow{color:var(--blue-200)}
.deep .eyebrow{color:var(--deep-accent)}

/* Brand tri-dot motif (from the identity deck header) */
.tridot{display:inline-flex;gap:8px;align-items:center}
.tridot i{width:11px;height:11px;border-radius:50%;background:var(--blue-500);display:block}
.tridot i:nth-child(2){background:var(--blue-200)}
.tridot i:nth-child(3){background:var(--navy-900)}
.dark .tridot i{background:var(--blue-200)}
.dark .tridot i:nth-child(2){background:var(--blue-500)}
.dark .tridot i:nth-child(3){background:#fff}

/* =========================================================
   SCROLL PROGRESS + PRELOADER
   ========================================================= */
#progress{position:fixed;top:0;left:0;height:2px;width:100%;transform:scaleX(0);transform-origin:0 50%;
  background:linear-gradient(90deg,var(--navy-900),var(--blue-500));z-index:120;transition:transform .1s linear}
#loader{position:fixed;inset:0;z-index:200;background:var(--band-dark);display:flex;align-items:center;justify-content:center;
  transition:opacity var(--motion-slow) var(--ease),visibility var(--motion-slow)}
#loader.done{opacity:0;visibility:hidden}
.loader-mark{display:flex;flex-direction:column;align-items:center;gap:22px}
.loader-mark .tridot i{opacity:0;transform:translateY(6px);animation:dotIn .6s var(--ease-out) forwards}
.loader-mark .tridot i:nth-child(1){animation-delay:.05s}
.loader-mark .tridot i:nth-child(2){animation-delay:.2s}
.loader-mark .tridot i:nth-child(3){animation-delay:.35s}
.loader-mark img {width: 50px;}
.loader-word{color:#fff;font-weight:800;letter-spacing:-.03em;font-size:1.5rem;opacity:0;animation:dotIn .8s .5s var(--ease-out) forwards}
.loader-word span{color:var(--blue-200)}
@keyframes dotIn{to{opacity:1;transform:none}}

/* =========================================================
   CUSTOM CURSOR — dot + ring on interactive elements only
   ========================================================= */
#cursor{position:fixed;top:0;left:0;width:8px;height:8px;border-radius:50%;background:var(--blue-500);
  pointer-events:none;z-index:130;transform:translate(-50%,-50%);transition:width .3s var(--ease),height .3s var(--ease),background .3s,opacity .3s;mix-blend-mode:normal}
#cursor.ring{width:46px;height:46px;background:transparent;border:1px solid var(--blue-500)}
[data-theme="dark"] #cursor{background:var(--blue-200)}
[data-theme="dark"] #cursor.ring{background:transparent;border-color:var(--blue-200)}
@media (hover:none),(pointer:coarse){#cursor{display:none}}

/* =========================================================
   HEADER
   ========================================================= */
header{position:fixed;top:0;left:0;width:100%;z-index:100;padding:18px 0;
  transition:background var(--motion-normal) var(--ease),padding var(--motion-normal) var(--ease),border-color var(--motion-normal);
  border-bottom:1px solid transparent}
header.solid{background:var(--header-bg);backdrop-filter:blur(14px) saturate(1.4);-webkit-backdrop-filter:blur(14px) saturate(1.4);
  border-bottom:1px solid var(--header-border);padding:12px 0}
header.hide{transform:translateY(-110%);transition:transform var(--motion-normal) var(--ease)}
.nav{display:flex;align-items:center;justify-content:space-between;gap:20px;z-index:auto}
.nav-right{display:flex;align-items:center;gap:12px}
.brand{display:flex;align-items:center;gap:14px;opacity:0;transition:opacity var(--motion-slow) .2s var(--ease)}
.brand.show{opacity:1}
.brand .mark{font-weight:900;font-size:1.5rem;letter-spacing:-.06em;color:var(--navy-900);line-height:1;position:relative}
.brand .mark::after{content:"";position:absolute;right:-3px;bottom:5px;width:6px;height:6px;border-radius:50%;background:var(--blue-500)}
.brand .lock{border-left:1px solid rgba(6,47,126,.25);padding-left:14px;line-height:1.05}
.brand .lock .t{font-size:.62rem;letter-spacing:.35em;text-transform:uppercase;color:var(--grey-400)}
.brand .lock .b{font-size:.86rem;font-weight:600;letter-spacing:.02em;color:var(--text-primary)}
.brand-logos{
  position:relative;
  display:block;
  width:280px;
}

.brand-logos img{
  display:block;
  width:280px;
  height:auto;
  transition:opacity .35s var(--ease);
}

.brand-logos .logo-sticky{
  position:absolute;
  top:0;
  left:0;
  opacity:0;
}

/* Logo mostrato quando l'header diventa sticky (solo Day Mode: sfondo chiaro) */
[data-theme="light"] header.solid .logo-default{
  opacity:0;
}
[data-theme="light"] header.solid .logo-sticky{
  opacity:1;
}
/* Night Mode: header sticky scuro → resta il logo bianco */

/* ---------- Theme switch — ○ auto ◐ / day ○ / night ● ---------- */
.theme-toggle{
  display:inline-flex;align-items:center;gap:9px;
  padding:10px 14px;border-radius:100px;
  border:1px solid rgba(255,255,255,.22);color:#fff;
  transition:border-color var(--motion-normal) var(--ease),color var(--motion-normal) var(--ease),transform var(--motion-normal) var(--ease);
}
.theme-toggle:hover{border-color:rgba(255,255,255,.55)}
.theme-toggle:focus-visible{outline:2px solid var(--accent);outline-offset:2px}
header.solid .theme-toggle{color:var(--text-primary);border-color:var(--border)}
header.solid .theme-toggle:hover{border-color:var(--accent)}
.tt-dot{
  width:12px;height:12px;border-radius:50%;flex:none;
  border:1.5px solid currentColor;background:transparent;
  transition:background var(--motion-normal) var(--ease);
}
[data-theme-mode="dark"] .tt-dot{background:currentColor}
[data-theme-mode="auto"] .tt-dot{background:linear-gradient(90deg,currentColor 50%,transparent 50%)}
.tt-label{font-size:.6rem;font-weight:700;letter-spacing:.28em;text-transform:uppercase;line-height:1;min-width:4.2em;text-align:left}

.cta-btn{position:relative;background:var(--navy-900);color:#fff;padding:13px 22px;border-radius:100px;font-weight:600;font-size:var(--step--1);
  display:inline-flex;align-items:center;gap:9px;overflow:hidden;isolation:isolate;letter-spacing:.01em;
  transform:translate3d(var(--mx,0px),var(--my,0px),0);
  transition:transform var(--motion-normal) var(--ease),box-shadow var(--motion-normal) var(--ease)}
.cta-btn .arrow{transition:transform var(--motion-normal) var(--ease)}
.cta-btn::before{content:"";position:absolute;inset:0;z-index:-1;background:var(--cta-hover);transform:translateY(101%);transition:transform var(--motion-normal) var(--ease)}
.cta-btn:hover{transform:translate3d(var(--mx,0px),calc(var(--my,0px) - 2px),0);box-shadow:0 14px 34px -12px rgba(53,150,179,.55)}
.cta-btn:hover::before{transform:translateY(0)}
.cta-btn:hover .arrow{transform:translate(4px)}
.cta-btn.breathe{animation:breathe 4.5s ease-in-out infinite}
@keyframes breathe{0%,100%{box-shadow:0 0 0 0 rgba(53,150,179,.0)}50%{box-shadow:0 0 0 8px rgba(53,150,179,.08)}}

/* =========================================================
   HERO
   ========================================================= */
.hero{min-height:100svh;display:flex;flex-direction:column;justify-content:center;
  background:var(--band-dark);color:#fff;overflow:hidden;padding:120px 0 60px}
.hero .wrap{position:relative;z-index:3;width:100%}
/* ambient brand circles — light/depth, derived from the identity's circle motif */
.orb{position:absolute;border-radius:50%;pointer-events:none;filter:blur(2px);opacity:.5;z-index:1}
.orb.stroke{background:transparent;border:1px solid rgba(156,215,236,.22);filter:none}
.orb-1{width:52vw;height:52vw;left:52%;top:8%;
  background:radial-gradient(circle at 32% 30%,rgba(53,150,179,.55),rgba(2,87,113,0) 62%)}
.orb-2{width:40vw;height:40vw;left:70%;top:38%;
  background:radial-gradient(circle at 40% 40%,rgba(156,215,236,.22),rgba(2,87,113,0) 60%)}
.orb-3{width:34vw;height:34vw;left:-6%;top:44%}
[data-theme="dark"] .orb{opacity:.62}
.hero-grain{position:absolute;inset:0;z-index:2;opacity:.5;pointer-events:none;
  background:radial-gradient(120% 80% at 50% 0%,transparent 40%,var(--hero-vignette) 100%)}
.hero-eyebrow{margin-bottom:clamp(24px,4vh,48px);
  opacity:0;letter-spacing:.38em;
  transition:opacity var(--motion-reveal) .1s var(--ease),letter-spacing 1.4s .1s var(--ease)}
.loaded .hero-eyebrow{opacity:1;letter-spacing:.22em}
.hero h1{font-size:var(--step-5);line-height:1.14;font-weight:800;letter-spacing:-.035em;max-width:16ch}
.hero h1 .line{display:block;overflow:hidden}
.hero h1 .line>span{display:block;transform:translateY(105%);transition:transform 1.1s var(--ease-out)}
.loaded .hero h1 .line>span{transform:none}
.hero h1 .line:nth-child(1)>span{transition-delay:.15s}
.hero h1 .line:nth-child(2)>span{transition-delay:.27s}
.hero h1 .line:nth-child(3)>span{transition-delay:.39s}
.hero h1 .accent{color:var(--blue-200)}
.hero-sub{margin-top:clamp(28px,5vh,52px);max-width:46ch;font-size:var(--step-1);font-weight:300;
  color:rgba(255,255,255,.72);opacity:0;transform:translateY(20px);transition:opacity var(--motion-reveal) .75s var(--ease),transform var(--motion-reveal) .75s var(--ease)}
.loaded .hero-sub{opacity:1;transform:none}
.hero-foot{bottom:34px;left:0;width:100%;z-index:3;opacity:0;transition:opacity var(--motion-reveal) 1.1s var(--ease)}
.loaded .hero-foot{opacity:1}
.hero-foot .wrap{display:flex;align-items:flex-end;justify-content:space-between;gap:20px}
.hero-foot .claim{font-size:var(--step--1);letter-spacing:.02em;color:rgba(255,255,255,.75);max-width:30ch}
.scroll-hint{display:flex;align-items:center;gap:12px;font-size:.72rem;letter-spacing:.25em;text-transform:uppercase;color:rgba(255,255,255,.75)}
.scroll-hint .txt{animation:hintPulse 3.6s ease-in-out infinite}
@keyframes hintPulse{0%,100%{opacity:.55}50%{opacity:1}}
.scroll-hint .rail{width:1px;height:46px;background:linear-gradient(var(--blue-200),transparent);position:relative;overflow:hidden}
.scroll-hint .rail::after{content:"";position:absolute;top:-50%;left:0;width:100%;height:50%;background:var(--blue-200);animation:railrun 2.4s var(--ease) infinite}
@keyframes railrun{0%{top:-50%}60%,100%{top:100%}}

/* =========================================================
   GENERIC SECTION RHYTHM + REVEALS
   ========================================================= */
.band{padding:clamp(90px,15vh,190px) 0}
.band.dark{background:var(--band-dark);color:#fff;overflow:hidden}
.band.deep{background:var(--band-deep);color:#fff;overflow:hidden}
/* Ambient light field inside dark bands — barely-there by day, alive by night */
.band.dark::before,.band.deep::before{
  content:"";position:absolute;inset:-10%;pointer-events:none;z-index:1;
  background:radial-gradient(55% 45% at 72% 18%,rgba(53,150,179,.16),transparent 68%);
  opacity:var(--glow-o);
  animation:glowDrift 28s ease-in-out infinite alternate;
}
@keyframes glowDrift{to{transform:translate3d(-5%,4%,0)}}

.reveal{opacity:0;transform:translateY(34px);filter:blur(6px);
  transition:opacity var(--motion-reveal) var(--ease-out),transform var(--motion-reveal) var(--ease-out),filter var(--motion-reveal) var(--ease-out)}
.reveal.in{opacity:1;transform:none;filter:none}
.reveal.d1{transition-delay:.12s}.reveal.d2{transition-delay:.24s}.reveal.d3{transition-delay:.36s}.reveal.d4{transition-delay:.48s}

/* Line-mask reveal — editorial clip + translate, no banal fade */
.reveal-lines .rl{display:block;overflow:hidden;padding-bottom:.08em;margin-bottom:-.08em}
.reveal-lines .rl>span{display:block;transform:translateY(112%);transition:transform .95s var(--ease-out)}
.reveal-lines.in .rl>span{transform:translateY(0)}
.reveal-lines .rl:nth-child(2)>span{transition-delay:.16s}
.reveal-lines .rl:nth-child(3)>span{transition-delay:.55s}

@media (prefers-reduced-motion:reduce){
  .reveal{opacity:1;transform:none;filter:none;transition:none}
  .reveal-lines .rl>span{transform:none;transition:none}
  .hero h1 .line>span{transform:none;transition:none}
  .hero-sub,.hero-foot,.brand{opacity:1;transform:none;transition:none}
  .hero-eyebrow{opacity:1;letter-spacing:.22em;transition:none}
  .orb{display:none}
  .scroll-hint .rail::after{animation:none}
  .scroll-hint .txt{animation:none}
  .band.dark::before,.band.deep::before{animation:none}
  .cta-btn.breathe{animation:none}
}

/* ---------- The Signal (GEO) ---------- */
.signal h2{font-size:var(--step-4);font-weight:800;line-height:1.02;letter-spacing:-.035em;max-width:18ch}
.signal .after{color:var(--blue-200)}
.signal p{margin-top:clamp(28px,5vh,46px);max-width:42ch;font-size:var(--step-1);font-weight:300;color:rgba(255,255,255,.72)}
.signal .tag{margin-top:26px;display:inline-flex;gap:10px;align-items:center;font-size:var(--step--1);letter-spacing:.04em;color:#fff}
.signal .tag b{color:var(--blue-200);font-weight:700}
/* AI prompt caret — the only "tech" wink, deliberately quiet */
.caret{display:inline-block;width:.5ch;height:.82em;margin-left:.18em;background:var(--blue-200);
  vertical-align:baseline;transform:translateY(.08em);opacity:.85;animation:caretBlink 1.15s steps(1) infinite}
@keyframes caretBlink{50%{opacity:0}}
@media (prefers-reduced-motion:reduce){.caret{animation:none;opacity:.4}}

.ticker{margin-top:64px;border-top:1px solid var(--sep,rgba(156,215,236,.2));border-bottom:1px solid var(--sep,rgba(156,215,236,.2));
  padding:18px 0;overflow:hidden;white-space:nowrap;-webkit-mask-image:linear-gradient(90deg,transparent,#000 12%,#000 88%,transparent);
  mask-image:linear-gradient(90deg,transparent,#000 12%,#000 88%,transparent)}
.ticker .row{display:inline-flex;gap:56px;will-change:transform;transform:translate3d(0,0,0)}
.ticker span{font-size:var(--step-1);font-weight:300;color:rgba(255,255,255,.68);letter-spacing:-.01em;display:inline-flex;gap:56px;align-items:center;
  transition:color var(--motion-normal) var(--ease)}
.ticker span::after{content:"·";color:var(--blue-500)}
@media (hover:hover){.ticker:hover span{color:rgba(255,255,255,.85)}}
/* No-JS / reduced-motion fallback: CSS keyframe loop */
.ticker .row.css-anim{animation:slide 34s linear infinite}
@keyframes slide{to{transform:translateX(-50%)}}
@media (prefers-reduced-motion:reduce){.ticker .row,.ticker .row.css-anim{animation:none}}

/* ---------- The Number ---------- */
.number{text-align:center;overflow:hidden}
.number::before{content:"";position:absolute;inset:0;pointer-events:none;z-index:1;opacity:0;
  background:radial-gradient(50% 42% at 50% 46%,rgba(53,150,179,.12),transparent 72%);
  transition:opacity var(--motion-theme) var(--ease)}
[data-theme="dark"] .number::before{opacity:1}
.number .fig{font-size:clamp(5rem,3rem + 20vw,20rem);font-weight:800;line-height:.85;letter-spacing:-.05em;
  font-variant-numeric:tabular-nums;
  background:linear-gradient(180deg,var(--fig-a),var(--fig-b));-webkit-background-clip:text;background-clip:text;color:transparent}
.number .cap{margin-top:24px;font-size:var(--step-1);font-weight:300;color:var(--text-secondary);max-width:32ch;margin-inline:auto}
.number .cap b{font-weight:600;color:var(--text-primary)}

/* ---------- Manifesto ---------- */
.manifesto .head{display:flex;justify-content:space-between;align-items:flex-end;gap:30px;margin-bottom:clamp(50px,9vh,110px);flex-wrap:wrap}
.manifesto .head h2{font-size:var(--step-2);font-weight:300;letter-spacing:-.02em;max-width:20ch;color:rgba(255,255,255,.85)}
.creed{border-top:1px solid var(--sep,rgba(156,215,236,.18))}
.creed li{list-style:none;padding:clamp(30px,5vh,54px) 0;position:relative;
  display:grid;grid-template-columns:90px 1fr;gap:24px;align-items:baseline}
/* divider draws itself as each conviction enters */
.creed li::after{content:"";position:absolute;left:0;bottom:0;width:100%;height:1px;
  background:var(--sep,rgba(156,215,236,.18));transform:scaleX(0);transform-origin:0 50%;
  transition:transform 1.2s var(--ease) .25s}
.creed li.in::after{transform:scaleX(1)}
.creed .n{font-size:var(--step--1);font-weight:600;color:var(--deep-accent);letter-spacing:.1em;
  display:inline-block;opacity:0;transform:translateY(14px);
  transition:opacity var(--motion-slow) var(--ease-out),transform var(--motion-slow) var(--ease-out)}
.creed li.in .n{opacity:1;transform:none}
.creed p{font-size:var(--step-2);font-weight:500;line-height:1.15;letter-spacing:-.02em;max-width:24ch;
  opacity:0;transform:translateY(24px);
  transition:opacity var(--motion-slow) var(--ease-out) .14s,transform var(--motion-slow) var(--ease-out) .14s}
.creed li.in p{opacity:1;transform:none}
.creed p b{color:var(--deep-accent);font-weight:500}

/* ---------- How we work (principles) ---------- */
.principles h2{font-size:var(--step-3);font-weight:800;letter-spacing:-.03em;line-height:1.02;max-width:16ch;margin-bottom:clamp(48px,8vh,96px)}
.pgrid{display:grid;grid-template-columns:repeat(2,1fr);gap:1px;background:var(--border);border:1px solid var(--border)}
.pgrid .cell{background:var(--cell-bg);padding:clamp(34px,5vw,60px);min-height:230px;display:flex;flex-direction:column;justify-content:space-between;gap:30px;
  transition:background var(--motion-normal) var(--ease)}
.pgrid .cell:hover{background:var(--cell-hover)}
.pgrid .cell:nth-child(2){--d:.1s}
.pgrid .cell:nth-child(3){--d:.2s}
.pgrid .cell:nth-child(4){--d:.3s}
/* method sequence: code → rule draws → statement */
.pgrid .cell .idx{font-size:var(--step--1);font-weight:600;color:var(--accent-text);letter-spacing:.1em;
  opacity:0;transform:translateY(10px);
  transition:opacity var(--motion-slow) var(--ease-out) var(--d,0s),transform var(--motion-slow) var(--ease-out) var(--d,0s)}
.pgrid .cell.in .idx{opacity:1;transform:none}
.pgrid .cell p{font-size:var(--step-1);font-weight:600;letter-spacing:-.02em;line-height:1.15;position:relative;padding-top:20px;
  opacity:0;transform:translateY(14px);
  transition:opacity var(--motion-slow) var(--ease-out) calc(var(--d,0s) + .16s),transform var(--motion-slow) var(--ease-out) calc(var(--d,0s) + .16s)}
.pgrid .cell p::before{content:"";position:absolute;top:0;left:0;width:44px;height:1px;background:var(--accent);
  transform:scaleX(0);transform-origin:0 50%;
  transition:transform var(--motion-slow) var(--ease) calc(var(--d,0s) + .3s)}
.pgrid .cell.in p{opacity:1;transform:none}
.pgrid .cell.in p::before{transform:scaleX(1)}

/* ---------- What we build (outcomes as editorial type, not cards) ---------- */
.build .intro{max-width:26ch;font-size:var(--step-2);font-weight:300;line-height:1.15;letter-spacing:-.02em;margin-bottom:clamp(40px,7vh,80px);color:rgba(255,255,255,.8)}
.verbs{border-top:1px solid var(--sep,rgba(156,215,236,.16))}
.verb{border-bottom:1px solid var(--sep,rgba(156,215,236,.16));padding:clamp(24px,4vh,44px) 0;display:flex;align-items:center;justify-content:space-between;gap:24px;
  position:relative;cursor:default;
  transition:padding-left var(--motion-normal) var(--ease),
    opacity var(--motion-reveal) var(--ease-out),transform var(--motion-reveal) var(--ease-out),filter var(--motion-reveal) var(--ease-out)}
.verb::before{content:"";position:absolute;left:-30px;top:0;height:100%;width:3px;background:var(--blue-500);transform:scaleY(0);transform-origin:50% 100%;transition:transform var(--motion-normal) var(--ease)}
.verb h3{font-size:var(--step-4);font-weight:800;letter-spacing:-.04em;line-height:1;transition:color var(--motion-normal) var(--ease)}
.verb h3::after{content:"→";display:inline-block;margin-left:.28em;font-size:.55em;font-weight:300;color:var(--blue-200);
  vertical-align:.18em;opacity:0;transform:translateX(-12px);
  transition:opacity var(--motion-normal) var(--ease),transform var(--motion-normal) var(--ease)}
.verb .disc{font-size:var(--step--1);letter-spacing:.03em;color:rgba(255,255,255,.72);text-align:right;max-width:20ch;font-weight:400;
  transition:color var(--motion-normal) var(--ease),transform var(--motion-normal) var(--ease)}
@media (hover:hover){
  .verb:hover{padding-left:clamp(10px,2vw,34px)}
  .verb:hover::before{transform:scaleY(1)}
  .verb:hover h3{color:var(--blue-200)}
  .verb:hover h3::after{opacity:1;transform:translateX(0)}
  .verb:hover .disc{color:rgba(255,255,255,.85);transform:translateX(-4px)}
  /* the family recedes, the chosen verb leads */
  .verbs:hover .verb:not(:hover) h3{color:rgba(255,255,255,.38)}
  .verbs:hover .verb:not(:hover) .disc{color:rgba(255,255,255,.24)}
}

/* ---------- Positioning close ---------- */
.close{text-align:left;overflow:hidden}
.close blockquote{font-size:var(--step-3);font-weight:300;line-height:1.08;letter-spacing:-.03em;max-width:20ch}
.close blockquote b{font-weight:700;color:var(--heading-accent)}

/* ---------- Contact / Start a project ---------- */
.start .orb{opacity:.4}
.start .grid{display:grid;grid-template-columns:1.2fr .8fr;gap:clamp(40px,6vw,90px);align-items:end;position:relative;z-index:2}
.start h2{font-size:var(--step-4);font-weight:800;letter-spacing:-.035em;line-height:.98;max-width:14ch}
.start .lead{margin-top:28px;font-size:var(--step-1);font-weight:300;color:rgba(255,255,255,.85);max-width:34ch}
.start .big-cta{margin-top:44px;display:inline-flex;align-items:center;gap:14px;background:#fff;color:var(--navy-950);
  padding:20px 34px;border-radius:100px;font-weight:700;font-size:var(--step-0);position:relative;overflow:hidden;isolation:isolate;
  transform:translate3d(var(--mx,0px),var(--my,0px),0);
  transition:transform var(--motion-normal) var(--ease),box-shadow var(--motion-normal) var(--ease),color var(--motion-normal) var(--ease),
    opacity var(--motion-reveal) var(--ease-out),filter var(--motion-reveal) var(--ease-out)}
.start .big-cta .arrow{transition:transform var(--motion-normal) var(--ease)}
.start .big-cta::before{content:"";position:absolute;inset:0;z-index:-1;background:var(--cta-hover);transform:translateY(101%);transition:transform var(--motion-normal) var(--ease)}
.start .big-cta:hover{transform:translate3d(var(--mx,0px),calc(var(--my,0px) - 3px),0);color:#fff;box-shadow:0 20px 50px -18px rgba(0,0,0,.6)}
.start .big-cta:hover::before{transform:translateY(0)}
.start .big-cta:hover .arrow{transform:translate(5px)}
.channels{display:flex;flex-direction:column;gap:2px}
.channels a{display:flex;align-items:center;justify-content:space-between;gap:16px;padding:18px 0;border-bottom:1px solid var(--sep,rgba(156,215,236,.22));
  font-size:var(--step-0);transition:padding-left var(--motion-normal) var(--ease),color var(--motion-normal)}
.channels a:first-child{border-top:1px solid var(--sep,rgba(156,215,236,.22))}
.channels a .k{color:rgba(255,255,255,.75);font-size:var(--step--1);letter-spacing:.08em;text-transform:uppercase}
.channels a .v{font-weight:500}
.channels a:hover{padding-left:10px;color:var(--deep-link-hover)}

/* ---------- Footer ---------- */
footer{background:var(--band-dark);color:#fff;padding:60px 0 42px}
.foot{display:flex;align-items:center;justify-content:space-between;gap:24px;flex-wrap:wrap}
.foot .brand .mark{color:#fff}
.foot .brand .lock{border-color:rgba(255,255,255,.25)}
.foot .brand .lock .b{color:#fff}
.foot .brand{opacity:1}
.foot .meta{font-size:var(--step--1);color:rgba(255,255,255,.75);text-align:right}
.foot .meta .claim{color:var(--blue-200);font-weight:600;display:block;margin-bottom:4px}
.foot .brand img {width: 280px;}

/* =========================================================
   REDUCED MOTION — content first, minimal transitions only
   ========================================================= */
@media (prefers-reduced-motion:reduce){
  .creed .n,.creed p,.pgrid .cell .idx,.pgrid .cell p{opacity:1;transform:none;transition:none}
  .creed li::after,.pgrid .cell p::before{transform:scaleX(1);transition:none}
  .verb h3::after{transition:none}
  body::after{display:none}
}

/* =========================================================
   RESPONSIVE
   ========================================================= */
@media (max-width:900px){
  .start .grid{grid-template-columns:1fr;align-items:start}
  /*.verb .disc{display:none}*/
  .creed li{grid-template-columns:56px 1fr;gap:14px}
}
@media (max-width:640px){
  :root{--gutter:22px}
  .hero{padding:118px 0 92px}
  .hero h1{max-width:14ch}
  .hero-foot{position:static;margin-top:52px;opacity:1}
  .hero-foot .wrap{flex-direction:column;align-items:flex-start;gap:28px}
  .loaded .hero-foot{opacity:1}
  .pgrid{grid-template-columns:1fr}
  .pgrid .cell{min-height:auto;--d:0s}
  .verb h3{font-size:var(--step-3)}
  .foot{flex-direction:column;align-items:flex-start}
  .foot .meta{text-align:left}
  .signal h2,.manifesto .head h2{max-width:none}
  .brand {width: 150px;}
  .brand-logos,.brand-logos img{width:150px}
  .tt-label{display:none}
  .theme-toggle{padding:10px 11px;min-width:44px;min-height:44px;justify-content:center}
  .band.dark::before,.band.deep::before{animation:none}
}
@media (max-width:380px){
  .brand .lock{display:none}
}

/* =========================================================
   ACCESSIBILITY LAYER — state lives on <html> as data-a11y-*
   Centralized tokens; the standard experience is untouched.
   ========================================================= */

/* ---------- Text size (real typography via rem, no scale()) ---------- */
html{font-size:calc(100% * var(--a11y-font-scale,1))}
[data-a11y-text="110"]{--a11y-font-scale:1.1}
[data-a11y-text="125"]{--a11y-font-scale:1.25}
[data-a11y-text="140"]{--a11y-font-scale:1.4}
@media (max-width:640px){
  [data-a11y-text="125"] .nav,[data-a11y-text="140"] .nav{flex-wrap:wrap;row-gap:10px}
}

/* ---------- Text spacing ---------- */
[data-a11y-spacing="more"]{--a11y-lh:1.75;--a11y-ls:.015em;--a11y-ws:.08em;--a11y-hlh:1.25}
[data-a11y-spacing="max"]{--a11y-lh:1.95;--a11y-ls:.04em;--a11y-ws:.16em;--a11y-hlh:1.35}
[data-a11y-spacing] body{line-height:var(--a11y-lh)}
[data-a11y-spacing] p,[data-a11y-spacing] li,[data-a11y-spacing] .channels a,[data-a11y-spacing] .verb .disc,[data-a11y-spacing] .foot .meta{
  line-height:var(--a11y-lh);letter-spacing:var(--a11y-ls);word-spacing:var(--a11y-ws)}
[data-a11y-spacing] h1,[data-a11y-spacing] h2,[data-a11y-spacing] h3,[data-a11y-spacing] blockquote{line-height:var(--a11y-hlh);letter-spacing:0}

/* ---------- High-legibility font ---------- */
[data-a11y-font="readable"] body{
  font-family:-apple-system,BlinkMacSystemFont,"Segoe UI",Roboto,"Helvetica Neue",Arial,sans-serif;
  letter-spacing:0}
[data-a11y-font="readable"] h1,[data-a11y-font="readable"] h2,[data-a11y-font="readable"] h3,
[data-a11y-font="readable"] blockquote,[data-a11y-font="readable"] .verb h3{letter-spacing:0}
[data-a11y-font="readable"] p{max-width:65ch}
[data-a11y-font="readable"] .number .cap{margin-inline:auto}

/* ---------- Contrast systems (real tokens, no filter tricks) ----------
   Shared hooks: --a11y-band-fg (soft text on bands), band base color. */
[data-a11y-contrast] .hero-sub,[data-a11y-contrast] .hero-foot .claim,[data-a11y-contrast] .scroll-hint,
[data-a11y-contrast] .signal p,[data-a11y-contrast] .ticker span,[data-a11y-contrast] .manifesto .head h2,
[data-a11y-contrast] .build .intro,[data-a11y-contrast] .verb .disc,[data-a11y-contrast] .start .lead,
[data-a11y-contrast] .channels a .k,[data-a11y-contrast] .foot .meta{color:var(--a11y-band-fg)}
[data-a11y-contrast] .hero,[data-a11y-contrast] .band.dark,[data-a11y-contrast] .band.deep,
[data-a11y-contrast] footer,[data-a11y-contrast] .signal .tag{color:var(--a11y-band-fg-strong)}
[data-a11y-contrast] .eyebrow,[data-a11y-contrast] .dark .eyebrow,[data-a11y-contrast] .deep .eyebrow{color:var(--accent-text)}
[data-a11y-contrast] .orb,[data-a11y-contrast] .hero-grain,[data-a11y-contrast] body::after{display:none}
[data-a11y-contrast] .band.dark::before,[data-a11y-contrast] .band.deep::before,[data-a11y-contrast] .number::before{display:none}

/* HIGH CONTRAST — pure black & white, maximum distinction */
[data-a11y-contrast="high"]{
  --bg-primary:#000;--bg-secondary:#000;--surface:#0A0A0A;
  --text-primary:#FFF;--text-secondary:#FFF;--text-muted:#FFF;
  --border:rgba(255,255,255,.7);--sep:rgba(255,255,255,.7);
  --band-dark:#000;--band-deep:#000;--cell-bg:#000;--cell-hover:#141414;
  --accent:#BFEAFF;--accent-text:#BFEAFF;--heading-accent:#BFEAFF;
  --deep-accent:#BFEAFF;--deep-link-hover:#BFEAFF;
  --fig-a:#FFF;--fig-b:#FFF;
  --header-bg:rgba(0,0,0,.95);--header-border:rgba(255,255,255,.7);
  --hero-vignette:transparent;--noise-o:0;--glow-o:0;
  --focus-ring:#FFB930;--cta-hover:#333;
  --a11y-band-fg:#FFF;--a11y-band-fg-strong:#FFF}
[data-a11y-contrast="high"] .cta-btn,[data-a11y-contrast="high"] .start .big-cta{
  background:#FFF;color:#000;border:2px solid #FFF}
[data-a11y-contrast="high"] .cta-btn:hover,[data-a11y-contrast="high"] .start .big-cta:hover{color:#FFF}
[data-a11y-contrast="high"] main a,[data-a11y-contrast="high"] footer a{text-decoration:underline;text-underline-offset:.16em}
[data-a11y-contrast="high"] .pgrid .cell{outline:1px solid rgba(255,255,255,.7);outline-offset:-1px}
[data-a11y-contrast="high"] .verb:hover h3,[data-a11y-contrast="high"] .verb h3::after{color:#BFEAFF}

/* LIGHT CONTRAST — everything light, near-black text */
[data-a11y-contrast="light"]{
  --bg-primary:#FFF;--bg-secondary:#F2F4F6;--surface:#FFF;
  --text-primary:#0B0F14;--text-secondary:#1F2A33;--text-muted:#3A4A56;
  --border:rgba(11,15,20,.4);--sep:rgba(11,15,20,.35);
  --band-dark:#FFF;--band-deep:#F2F5F7;--cell-bg:#FFF;--cell-hover:#EDF1F4;
  --accent:#025771;--accent-text:#025771;--heading-accent:#025771;
  --deep-accent:#02405C;--deep-link-hover:#02405C;
  --fig-a:#025771;--fig-b:#0E7291;
  --header-bg:rgba(255,255,255,.96);--header-border:rgba(11,15,20,.3);
  --hero-vignette:transparent;--noise-o:0;--glow-o:0;
  --focus-ring:#025771;--cta-hover:#02405C;
  --a11y-band-fg:#1F2A33;--a11y-band-fg-strong:#0B0F14}
[data-a11y-contrast="light"] .hero :focus-visible,[data-a11y-contrast="light"] .band.dark :focus-visible,
[data-a11y-contrast="light"] .band.deep :focus-visible,[data-a11y-contrast="light"] footer :focus-visible{outline-color:#025771}
[data-a11y-contrast="light"] .logo-default{filter:brightness(0)}
[data-a11y-contrast="light"] header.solid .logo-default{filter:none}
[data-a11y-contrast="light"] #loader{background:#FFF}
[data-a11y-contrast="light"] #loader img{filter:brightness(0)}
[data-a11y-contrast="light"] .theme-toggle{color:#0B0F14;border-color:rgba(11,15,20,.45)}
[data-a11y-contrast="light"] .signal .after,[data-a11y-contrast="light"] .creed p b{color:#02405C}
[data-a11y-contrast="light"] .caret{background:#02405C}
[data-a11y-contrast="light"] .verb:hover h3,[data-a11y-contrast="light"] .verb h3::after{color:#02405C}
[data-a11y-contrast="light"] .verbs:hover .verb:not(:hover) h3{color:rgba(11,15,20,.5)}
[data-a11y-contrast="light"] .verbs:hover .verb:not(:hover) .disc{color:rgba(11,15,20,.45)}
[data-a11y-contrast="light"] .start .big-cta{border:2px solid #0B0F14}
[data-a11y-contrast="light"] svg.tbd-stamp{filter:brightness(0)}
[data-a11y-contrast="light"] .tbd-ring{display:none}
[data-a11y-contrast="light"] .scroll-hint .rail{background:linear-gradient(#025771,transparent)}
[data-a11y-contrast="light"] .scroll-hint .rail::after{background:#025771}

/* DARK CONTRAST — pure black surfaces, boosted text */
[data-a11y-contrast="dark"]{
  --bg-primary:#000;--bg-secondary:#0C0C0C;--surface:#0A0A0A;
  --text-primary:#FFF;--text-secondary:rgba(255,255,255,.9);--text-muted:rgba(255,255,255,.8);
  --border:rgba(255,255,255,.4);--sep:rgba(255,255,255,.35);
  --band-dark:#000;--band-deep:#0A0E11;--cell-bg:#050505;--cell-hover:#141414;
  --accent:#A5DFF6;--accent-text:#A5DFF6;--heading-accent:#A5DFF6;
  --deep-accent:#A5DFF6;--deep-link-hover:#A5DFF6;
  --fig-a:#D6F0FB;--fig-b:#9CD7EC;
  --header-bg:rgba(0,0,0,.92);--header-border:rgba(255,255,255,.35);
  --hero-vignette:transparent;--noise-o:0;--glow-o:0;
  --focus-ring:#A5DFF6;
  --a11y-band-fg:rgba(255,255,255,.92);--a11y-band-fg-strong:#FFF}

/* ---------- Reduce colors (grayscale on sections, fixed-safe) ---------- */
[data-a11y-gray="true"] header,[data-a11y-gray="true"] main,[data-a11y-gray="true"] footer,
[data-a11y-gray="true"] #loader,[data-a11y-gray="true"] #progress,[data-a11y-gray="true"] #cursor,
[data-a11y-gray="true"] .a11y-fab{filter:grayscale(1)}
[data-a11y-gray="true"] main a,[data-a11y-gray="true"] footer a{text-decoration:underline;text-underline-offset:.16em}

/* ---------- Highlight links ---------- */
[data-a11y-links="true"] main a,[data-a11y-links="true"] footer a,[data-a11y-links="true"] header a{
  text-decoration:underline;text-decoration-thickness:2px;text-underline-offset:.18em;font-weight:600}

/* ---------- Strong focus ---------- */
[data-a11y-focus="strong"] :focus-visible,
[data-a11y-focus="strong"] .hero :focus-visible,[data-a11y-focus="strong"] .band.dark :focus-visible,
[data-a11y-focus="strong"] .band.deep :focus-visible,[data-a11y-focus="strong"] footer :focus-visible{
  outline:3px solid #FFB930;outline-offset:3px;box-shadow:0 0 0 7px rgba(255,185,48,.35)}

/* ---------- Large cursor (pointer devices only) ---------- */
@media (hover:hover) and (pointer:fine){
  [data-a11y-cursor="large"] body,[data-a11y-cursor="large"] a,[data-a11y-cursor="large"] button,
  [data-a11y-cursor="large"] input,[data-a11y-cursor="large"] label{
    cursor:url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' width='40' height='40' viewBox='0 0 40 40'><path d='M4 2v31l8.5-7.5L18 38l6.5-2.6-5.5-12.4H30Z' fill='%23000' stroke='%23fff' stroke-width='2.4' stroke-linejoin='round'/></svg>") 4 2,auto}
  [data-a11y-cursor="large"] #cursor{display:none}
}

/* ---------- Reduced / stopped motion (mirrors prefers-reduced-motion) ---------- */
[data-a11y-motion] .reveal,[data-a11y-motion] .reveal-lines .rl>span,
[data-a11y-motion] .hero h1 .line>span,[data-a11y-motion] .hero-sub,[data-a11y-motion] .hero-foot,
[data-a11y-motion] .brand,[data-a11y-motion] .creed .n,[data-a11y-motion] .creed p,
[data-a11y-motion] .pgrid .cell .idx,[data-a11y-motion] .pgrid .cell p{
  opacity:1;transform:none;filter:none;transition:none}
[data-a11y-motion] .creed li::after,[data-a11y-motion] .pgrid .cell p::before{transform:scaleX(1);transition:none}
[data-a11y-motion] .hero-eyebrow{opacity:1;letter-spacing:.22em;transition:none}
[data-a11y-motion] .orb{display:none}
[data-a11y-motion] .scroll-hint .rail::after,[data-a11y-motion] .scroll-hint .txt{animation:none}
[data-a11y-motion] .band.dark::before,[data-a11y-motion] .band.deep::before{animation:none}
[data-a11y-motion] .cta-btn.breathe,[data-a11y-motion] .big-cta.breathe{animation:none}
[data-a11y-motion] .caret{animation:none;opacity:.4}
[data-a11y-motion] .ticker .row,[data-a11y-motion] .ticker .row.css-anim{animation:none}
[data-a11y-motion] #cursor{display:none}
[data-a11y-motion] .tbd-stamp-wrap svg.tbd-stamp{animation:none!important;opacity:1;transform:none}
[data-a11y-motion] .tbd-stamp-wrap .tbd-ring,[data-a11y-motion] .tbd-stamp-wrap .tbd-flash{animation:none!important;opacity:0}
[data-a11y-motion="off"] *,[data-a11y-motion="off"] *::before,[data-a11y-motion="off"] *::after{
  transition:none!important;animation:none!important}

/* =========================================================
   ACCESSIBILITY BUTTON + PANEL — editorial, native controls
   ========================================================= */
.a11y-fab{position:fixed;left:18px;bottom:18px;z-index:140;
  width:52px;height:52px;border-radius:50%;
  background:var(--navy-900);color:#fff;border:1px solid rgba(255,255,255,.3);
  display:flex;align-items:center;justify-content:center;
  box-shadow:0 12px 30px -12px rgba(0,0,0,.5);
  transition:transform var(--motion-fast) var(--ease),box-shadow var(--motion-fast) var(--ease)}
.a11y-fab:hover{transform:translateY(-2px);box-shadow:0 16px 36px -12px rgba(0,0,0,.55)}
.a11y-fab:focus-visible{outline:3px solid var(--focus-ring);outline-offset:3px}
[data-a11y-contrast="high"] .a11y-fab{background:#FFF;color:#000;border:2px solid #000}
[data-a11y-contrast="light"] .a11y-fab{border-color:rgba(11,15,20,.35)}
@media (min-width:641px) and (max-width:1200px){.hero-foot .claim{padding-left:64px}}

.a11y-overlay{position:fixed;inset:0;z-index:148;background:rgba(2,10,14,.55);
  opacity:0;transition:opacity var(--motion-fast) var(--ease)}
.a11y-overlay.open{opacity:1}

.a11y-panel{position:fixed;top:0;left:0;z-index:150;height:100vh;height:100dvh;
  width:min(430px,100vw);background:var(--bg-primary);color:var(--text-primary);
  border-right:1px solid var(--border);overflow-y:auto;-webkit-overflow-scrolling:touch;
  padding:26px 26px 44px;transform:translateX(-102%);
  transition:transform 240ms var(--ease)}
.a11y-panel.open{transform:none}
@media (prefers-reduced-motion:reduce){.a11y-panel,.a11y-overlay{transition:none}}
[data-a11y-motion] .a11y-panel,[data-a11y-motion] .a11y-overlay{transition:none}

.a11y-head{display:flex;align-items:flex-start;justify-content:space-between;gap:14px}
.a11y-head h2{font-size:1.45rem;font-weight:800;letter-spacing:-.02em}
.a11y-head p{margin-top:6px;font-size:.9rem;color:var(--text-secondary);max-width:30ch}
.a11y-close{flex:none;width:44px;height:44px;border-radius:50%;border:1px solid var(--border);
  display:flex;align-items:center;justify-content:center;font-size:1.05rem;
  transition:border-color var(--motion-fast) var(--ease),background var(--motion-fast) var(--ease)}
.a11y-close:hover{border-color:var(--accent-text)}
.a11y-close:focus-visible{outline:2px solid var(--focus-ring);outline-offset:2px}

.a11y-section{margin-top:30px;padding-top:20px;border-top:1px solid var(--border)}
.a11y-section>h3{font-size:.72rem;font-weight:700;letter-spacing:.2em;text-transform:uppercase;color:var(--accent-text)}

.a11y-profile{width:100%;text-align:left;margin-top:12px;padding:14px 16px;
  border:1px solid var(--border);border-radius:16px;
  display:flex;align-items:center;justify-content:space-between;gap:12px;
  transition:border-color var(--motion-fast) var(--ease),box-shadow var(--motion-fast) var(--ease)}
.a11y-profile b{display:block;font-size:.95rem;font-weight:700}
.a11y-profile small{display:block;margin-top:2px;color:var(--text-secondary);font-size:.78rem;line-height:1.45}
.a11y-profile .state{flex:none;font-size:.62rem;font-weight:700;letter-spacing:.14em;text-transform:uppercase;
  border:1px solid var(--border);border-radius:100px;padding:5px 11px;color:var(--text-secondary)}
.a11y-profile:hover{border-color:var(--accent-text)}
.a11y-profile:focus-visible{outline:2px solid var(--focus-ring);outline-offset:2px}
.a11y-profile[aria-pressed="true"]{border-color:var(--navy-900);box-shadow:inset 0 0 0 1px var(--navy-900)}
.a11y-profile[aria-pressed="true"] .state{background:var(--navy-900);border-color:var(--navy-900);color:#fff}
[data-a11y-contrast="high"] .a11y-profile[aria-pressed="true"]{border-color:#fff;box-shadow:inset 0 0 0 1px #fff}
[data-a11y-contrast="high"] .a11y-profile[aria-pressed="true"] .state{background:#fff;border-color:#fff;color:#000}

.a11y-row{display:flex;align-items:center;justify-content:space-between;gap:14px;
  padding:14px 0;border-bottom:1px solid var(--border);cursor:pointer;min-height:52px}
.a11y-row:last-child{border-bottom:0}
.a11y-row .a11y-row-label{font-size:.95rem;font-weight:500}

.a11y-switch{appearance:none;-webkit-appearance:none;flex:none;width:48px;height:27px;border-radius:100px;
  background:var(--bg-secondary);border:1.5px solid var(--border);position:relative;cursor:pointer;margin:0;
  transition:background var(--motion-fast) var(--ease),border-color var(--motion-fast) var(--ease)}
.a11y-switch::after{content:"";position:absolute;top:50%;left:3px;width:18px;height:18px;border-radius:50%;
  background:var(--text-secondary);transform:translate(0,-50%);
  transition:transform var(--motion-fast) var(--ease),background var(--motion-fast) var(--ease)}
.a11y-switch:checked{background:var(--navy-900);border-color:var(--navy-900)}
.a11y-switch:checked::after{background:#fff;transform:translate(21px,-50%)}
.a11y-switch:focus-visible{outline:2px solid var(--focus-ring);outline-offset:2px}
[data-a11y-contrast="high"] .a11y-switch:checked{background:#fff;border-color:#fff}
[data-a11y-contrast="high"] .a11y-switch:checked::after{background:#000}

.a11y-field{border:0;padding:0;margin:16px 0 0}
.a11y-field legend{font-size:.95rem;font-weight:500;padding:0}
.a11y-seg{display:flex;flex-wrap:wrap;gap:8px;margin-top:10px}
.a11y-seg label{position:relative}
.a11y-seg input{position:absolute;inset:0;width:100%;height:100%;opacity:0;margin:0;cursor:pointer}
.a11y-seg span{display:inline-flex;align-items:center;justify-content:center;min-height:42px;min-width:44px;
  padding:9px 15px;border:1.5px solid var(--border);border-radius:100px;
  font-size:.84rem;font-weight:600;
  transition:background var(--motion-fast) var(--ease),border-color var(--motion-fast) var(--ease),color var(--motion-fast) var(--ease)}
.a11y-seg input:checked+span{background:var(--navy-900);border-color:var(--navy-900);color:#fff}
.a11y-seg input:focus-visible+span{outline:2px solid var(--focus-ring);outline-offset:2px}
[data-a11y-contrast="high"] .a11y-seg input:checked+span{background:#fff;border-color:#fff;color:#000}

.a11y-reset{width:100%;margin-top:28px;padding:16px;min-height:52px;
  border:1.5px solid var(--border);border-radius:100px;font-weight:700;font-size:.95rem;
  transition:border-color var(--motion-fast) var(--ease),color var(--motion-fast) var(--ease)}
.a11y-reset:hover{border-color:var(--accent-text);color:var(--accent-text)}
.a11y-reset:focus-visible{outline:2px solid var(--focus-ring);outline-offset:2px}
.a11y-note{margin-top:14px;font-size:.76rem;color:var(--text-secondary);line-height:1.5}

body.a11y-lock{overflow:hidden}
@media (max-width:640px){
  .a11y-fab{left:14px;bottom:14px;width:50px;height:50px}
  .a11y-panel{width:100vw;border-right:0;padding:22px 20px 40px}
}

/* =========================================================
   INTERNAL PAGE HERO — same language as the home hero,
   shorter. Use: <section class="hero hero--page">
   ========================================================= */
.hero.hero--page{min-height:auto;padding:clamp(150px,22vh,220px) 0 clamp(70px,12vh,120px)}
.hero.hero--page h1{font-size:var(--step-4);line-height:1.06;max-width:18ch}
.hero.hero--page .hero-sub{margin-top:clamp(22px,4vh,36px)}

/* =========================================================
   COMPONENT — TBD STAMP ("99% developed in AI")
   ========================================================= */
.tbd-stamp-wrap{
    position:absolute;
    width:220px;
    height:220px;
    display:inline-block;
    top: 120px;
    right: 200px;
  }
  .tbd-stamp-wrap svg.tbd-stamp{
    position:relative;
    z-index:2;
    transform-origin:50% 50%;
    filter: drop-shadow(0 10px 18px rgba(0,0,0,0.35));
  }
  .tbd-stamp-wrap .tbd-ring{
    position:absolute;
    inset:0;
    border-radius:50%;
    pointer-events:none;
  }
  .tbd-stamp-wrap .tbd-ring--1{ border:2.5px solid #9CD7EC; }
  .tbd-stamp-wrap .tbd-ring--2{ border:1.5px solid #ffffff; }
  .tbd-stamp-wrap .tbd-flash{
    position:absolute; inset:0; border-radius:50%;
    background: radial-gradient(circle, rgba(156,215,236,0.55) 0%, rgba(156,215,236,0) 68%);
    pointer-events:none;
  }

  /* Stato iniziale: invisibile finché il componente non entra in viewport */
  .tbd-stamp-wrap svg.tbd-stamp,
  .tbd-stamp-wrap .tbd-ring,
  .tbd-stamp-wrap .tbd-flash{
    opacity:0;
  }

  /* Classe aggiunta via JS quando il componente entra in viewport (vedi script sotto) */
  .tbd-stamp-wrap.is-visible svg.tbd-stamp{
    animation: tbdStampDown 1s both;
    animation-delay: 2.15s;
  }
  .tbd-stamp-wrap.is-visible .tbd-ring--1{
    animation: tbdInkPulse 0.7s ease-out both;
    animation-delay: 2.82s;
  }
  .tbd-stamp-wrap.is-visible .tbd-ring--2{
    animation: tbdInkPulse 0.7s ease-out both;
    animation-delay: 3s;
  }
  .tbd-stamp-wrap.is-visible .tbd-flash{
    animation: tbdFlash 0.5s ease-out both;
    animation-delay: 2.8s;
  }

  @keyframes tbdStampDown{
    0%   { opacity:0; transform: translateY(-30px) scale(2) rotate(16deg); }
    48%  { opacity:1; transform: translateY(5px) scale(0.86) rotate(-9deg); animation-timing-function: cubic-bezier(.34,1.56,.64,1); }
    70%  { transform: translateY(-3px) scale(1.08) rotate(-2deg); }
    100% { opacity:1; transform: translateY(0) scale(1) rotate(-5deg); }
  }
  @keyframes tbdInkPulse{
    0%   { opacity:0.7; transform:scale(0.7); }
    100% { opacity:0; transform:scale(1.7); }
  }
  @keyframes tbdFlash{
    0%   { opacity:0.9; }
    100% { opacity:0; }
  }

  /* Accessibilità: chi preferisce ridurre le animazioni vede il timbro fisso, senza movimento */
  @media (prefers-reduced-motion: reduce){
    .tbd-stamp-wrap svg.tbd-stamp,
    .tbd-stamp-wrap .tbd-ring,
    .tbd-stamp-wrap .tbd-flash{
      animation: none !important;
      opacity: 1;
      transform: none;
    }
    .tbd-stamp-wrap .tbd-ring, .tbd-stamp-wrap .tbd-flash{ opacity:0; }
  }

  @media (max-width:640px){
    .tbd-stamp-wrap {
      top: 640px;
      right: 0;
    }
  }
  @media (min-width:641px) and (max-width:900px) {
    .tbd-stamp-wrap {
      top: 90px;
      right: 0;
    }
  }