/* ============================================================
   ib3.ch — stylesheet
   Tokens per ib3-design-tokens.css (brand #6599FF, Poppins/Roboto)
   ============================================================ */

/* --- Self-hosted fonts. Drop the woff2 files into /fonts/.
       Only the weights actually used are declared. --------- */
@font-face { font-family:'Poppins'; src:url('../fonts/poppins-400.woff2') format('woff2');
             font-weight:400; font-style:normal; font-display:swap; }
@font-face { font-family:'Poppins'; src:url('../fonts/poppins-600.woff2') format('woff2');
             font-weight:600; font-style:normal; font-display:swap; }
@font-face { font-family:'Roboto';  src:url('../fonts/roboto-400.woff2') format('woff2');
             font-weight:400; font-style:normal; font-display:swap; }
@font-face { font-family:'Roboto';  src:url('../fonts/roboto-500.woff2') format('woff2');
             font-weight:500; font-style:normal; font-display:swap; }

:root{
  --ib3-blue:#6599ff; --ib3-blue-400:#4d86ff; --ib3-blue-600:#2a66e8;
  --ib3-blue-700:#1f57d6; --ib3-blue-200:#99bdff; --ib3-blue-050:#eef4ff;
  --ib3-navy:#0a1f44; --ib3-night:#0f1115; --ib3-slate:#3d4a5d;
  --ib3-white:#fff; --ib3-paper:#fbfcfe; --ib3-surface:#f2f5fa;
  --ib3-rule:#dde3ec; --ib3-grey-500:#5a6270; --ib3-grey-800:#313131; --ib3-ink:#212121;

  --color-bg:var(--ib3-paper); --color-surface:var(--ib3-white);
  --color-text:var(--ib3-ink); --color-text-muted:var(--ib3-grey-500);
  --color-heading:var(--ib3-grey-800); --color-link:var(--ib3-blue-600);
  --color-link-hover:var(--ib3-blue-700); --color-border:var(--ib3-rule);
  --color-focus:var(--ib3-blue-700);

  --font-display:'Poppins',system-ui,-apple-system,'Segoe UI',sans-serif;
  --font-body:'Roboto',system-ui,-apple-system,'Segoe UI',sans-serif;

  --fs-sm:.833rem; --fs-base:1rem; --fs-lg:1.25rem; --fs-xl:1.563rem;
  --fs-2xl:1.953rem; --fs-3xl:2.441rem; --fs-4xl:3.052rem;
  --lh-tight:1.15; --lh-body:1.65;

  --space-2:.5rem; --space-3:.75rem; --space-4:1rem; --space-6:1.5rem;
  --space-8:2rem; --space-12:3rem; --space-16:4rem; --space-24:6rem;

  --measure:68ch; --container:1180px; --pad:1.5rem;
  --radius:6px; --ease:cubic-bezier(.4,0,.2,1); --dur:200ms;
}

/* --- Reset ------------------------------------------------ */
*,*::before,*::after{box-sizing:border-box}
html{-webkit-text-size-adjust:100%;scroll-behavior:smooth}
body{margin:0;background:var(--color-bg);color:var(--color-text);
     font:400 17px/var(--lh-body) var(--font-body);
     -webkit-font-smoothing:antialiased}
img,svg{max-width:100%;height:auto;display:block}
h1,h2,h3,h4{font-family:var(--font-display);font-weight:400;
            line-height:var(--lh-tight);letter-spacing:-.015em;
            color:var(--color-heading);margin:0 0 var(--space-4)}
p{margin:0 0 var(--space-4);max-width:var(--measure)}
a{color:var(--color-link);text-decoration:none;
  border-bottom:1px solid transparent;transition:border-color var(--dur) var(--ease)}
a:hover{color:var(--color-link-hover);border-bottom-color:currentColor}
:focus-visible{outline:2px solid var(--color-focus);outline-offset:3px;border-radius:2px}
ul{padding-left:1.15rem;max-width:var(--measure)}
li{margin-bottom:var(--space-2)}

.skip{position:absolute;left:-9999px}
.skip:focus{left:var(--space-4);top:var(--space-4);z-index:100;
            background:var(--ib3-navy);color:#fff;padding:var(--space-3) var(--space-4);
            border-radius:var(--radius)}

/* --- Layout ----------------------------------------------- */
.wrap{max-width:var(--container);margin-inline:auto;padding-inline:var(--pad)}
.section{padding-block:var(--space-24)}
.section--tight{padding-block:var(--space-16)}
.eyebrow{font-family:var(--font-display);font-size:var(--fs-sm);font-weight:600;
         letter-spacing:.08em;text-transform:uppercase;
         color:var(--ib3-blue-600);margin:0 0 var(--space-3)}

/* Inverse: on dark, the true brand blue is finally legible */
.inverse{background:var(--ib3-navy);color:#e9edf4;
         --color-heading:#fff;--color-link:var(--ib3-blue);
         --color-link-hover:var(--ib3-blue-200);--color-text-muted:#9aa3b2;
         --color-border:#1b3055;--color-focus:var(--ib3-blue-200)}
.inverse h1,.inverse h2,.inverse h3{color:#fff}
.inverse .eyebrow{color:var(--ib3-blue)}
.inverse a{color:var(--ib3-blue)}
.inverse a:hover{color:var(--ib3-blue-200)}

/* --- Header ----------------------------------------------- */
.site-header{background:var(--ib3-navy);border-bottom:1px solid #1b3055}
.site-header .wrap{display:flex;align-items:center;justify-content:space-between;
                   gap:var(--space-6);min-height:74px;flex-wrap:wrap}
.brand{display:flex;align-items:center;gap:.7rem;border:0;
       font-family:var(--font-display);font-weight:600;font-size:var(--fs-lg);
       color:#fff;letter-spacing:-.01em}
.brand img{width:34px;height:auto;display:block}
.brand:hover{color:var(--ib3-blue-200)}
.nav{display:flex;gap:var(--space-6);flex-wrap:wrap;
     font-size:var(--fs-sm);letter-spacing:.02em}
.nav a{color:#c9d3e4;border:0;padding-block:var(--space-2)}
.nav a:hover,.nav a[aria-current="page"]{color:var(--ib3-blue)}

/* --- Hero: the signature --------------------------------- */
.hero{background:var(--ib3-navy);color:#e9edf4;position:relative;overflow:hidden;
      padding-block:var(--space-24) var(--space-16);
      /* same token overrides as .inverse — without these the global h1
         rule inherits the light-theme heading grey and disappears */
      --color-heading:#fff;--color-text:#e9edf4;--color-text-muted:#9aa3b2;
      --color-link:var(--ib3-blue);--color-link-hover:var(--ib3-blue-200);
      --color-border:#1b3055;--color-focus:var(--ib3-blue-200)}
.hero h1,.hero h2,.hero h3{color:#fff}
.hero .wrap{position:relative;z-index:2}
.hero h1{font-size:clamp(2.2rem,5.2vw,var(--fs-4xl));font-weight:400;
         max-width:16ch;margin-bottom:var(--space-6)}
.hero h1 em{font-style:normal;color:var(--ib3-blue)}
.hero .lede{font-size:var(--fs-lg);color:#c2cbdb;max-width:52ch}
.hero .actions{display:flex;gap:var(--space-4);flex-wrap:wrap;margin-top:var(--space-8)}

/* The agent field: a population, not an average.
   Each mark is one agent; the drift encodes directional
   convergence. Decorative — hidden from assistive tech. */
.agent-field{position:absolute;inset:0;z-index:1;opacity:.5;pointer-events:none}
.agent-field circle{fill:var(--ib3-blue)}

.btn{display:inline-block;font-family:var(--font-display);font-weight:600;
     font-size:var(--fs-sm);letter-spacing:.02em;padding:.85rem 1.6rem;
     border-radius:var(--radius);border:1px solid transparent;
     transition:background var(--dur) var(--ease),border-color var(--dur) var(--ease)}
.btn--primary{background:var(--ib3-blue);color:var(--ib3-navy)}
.btn--primary:hover{background:var(--ib3-blue-200);color:var(--ib3-navy)}
.btn--ghost{border-color:#2c4472;color:#e9edf4}
.btn--ghost:hover{border-color:var(--ib3-blue);color:var(--ib3-blue)}
.hero .btn{border-bottom:1px solid transparent}

/* --- Prose ------------------------------------------------ */
.prose h2{font-size:var(--fs-2xl);margin-top:var(--space-12)}
.prose h2:first-child{margin-top:0}
.prose h3{font-size:var(--fs-xl);margin-top:var(--space-8)}
.lead{font-size:var(--fs-lg);color:var(--color-text-muted);max-width:56ch}

/* --- Platform list: one family, one colour ---------------- */
.platforms{display:grid;gap:0;margin-top:var(--space-8);
           border-top:1px solid var(--color-border)}
.platform{display:grid;grid-template-columns:minmax(0,13rem) 1fr;
          gap:var(--space-6);padding-block:var(--space-6);
          border-bottom:1px solid var(--color-border)}
.platform h3{font-size:var(--fs-lg);margin:0;font-weight:600}
.platform h3 a{border:0}
.platform .role{display:block;font-family:var(--font-body);font-size:var(--fs-sm);
                font-weight:400;color:var(--color-text-muted);
                letter-spacing:0;margin-top:.25rem}
.platform p{margin:0}

/* --- Callout: the positioning statement ------------------- */
.callout{border-left:3px solid var(--ib3-blue);padding-left:var(--space-6);
         margin-block:var(--space-8)}
.inverse .callout{border-left-color:var(--ib3-blue)}

/* --- Stat pair -------------------------------------------- */
.stats{display:flex;gap:var(--space-12);flex-wrap:wrap;margin-top:var(--space-8)}
.stat b{display:block;font-family:var(--font-display);font-weight:600;
        font-size:var(--fs-2xl);color:var(--ib3-blue);line-height:1.1}
.inverse .stat b{color:var(--ib3-blue)}
.stat span{font-size:var(--fs-sm);color:var(--color-text-muted)}

/* --- Footer ----------------------------------------------- */
.site-footer{background:var(--ib3-night);color:#9aa3b2;
             padding-block:var(--space-12);font-size:var(--fs-sm)}
.site-footer a{color:#c9d3e4;border:0}
.site-footer a:hover{color:var(--ib3-blue)}
.site-footer .cols{display:flex;gap:var(--space-12);flex-wrap:wrap;
                   justify-content:space-between}
.site-footer .name{font-family:var(--font-display);font-weight:600;
                   color:#fff;font-size:var(--fs-base);margin-bottom:var(--space-3)}
.site-footer p{margin:0 0 .35rem}

/* --- Responsive ------------------------------------------- */
@media (max-width:720px){
  :root{--pad:1.15rem}
  .section{padding-block:var(--space-16)}
  .platform{grid-template-columns:1fr;gap:var(--space-3)}
  .site-header .wrap{min-height:0;padding-block:var(--space-4)}
  .stats{gap:var(--space-8)}
}

@media (prefers-reduced-motion:reduce){
  *{animation-duration:.01ms!important;transition-duration:.01ms!important}
  html{scroll-behavior:auto}
}

/* --- Figures ---------------------------------------------- */
.figure{margin:var(--space-8) 0;max-width:var(--container)}
.figure img{width:100%;height:auto;border:1px solid var(--color-border);
            border-radius:var(--radius);background:#fff}
.figure figcaption{margin-top:var(--space-3);font-size:var(--fs-sm);
                   color:var(--color-text-muted);max-width:var(--measure)}
.inverse .figure img{border-color:#1b3055}

/* --- Forms ------------------------------------------------ */
.form{max-width:34rem;margin-top:var(--space-8)}
.field{margin-bottom:var(--space-4)}
.field label{display:block;font-size:var(--fs-sm);font-weight:500;
             margin-bottom:var(--space-2);color:var(--color-heading)}
.field input,.field textarea{width:100%;padding:.7rem .85rem;font:inherit;
   font-size:var(--fs-base);color:var(--color-text);background:var(--ib3-white);
   border:1px solid var(--color-border);border-radius:var(--radius)}
.field input:focus,.field textarea:focus{border-color:var(--ib3-blue-400);outline:none;
   box-shadow:0 0 0 3px var(--ib3-blue-glow)}
.field textarea{min-height:9rem;resize:vertical}
.consent{display:flex;gap:.7rem;align-items:flex-start;font-size:var(--fs-sm);
         color:var(--color-text-muted);margin-bottom:var(--space-6)}
.consent input{margin-top:.25rem;flex:0 0 auto}
.hp{position:absolute;left:-9999px}
button.btn{cursor:pointer;font-family:var(--font-display)}

/* --- Contact block ---------------------------------------- */
.contact-grid{display:grid;grid-template-columns:repeat(auto-fit,minmax(15rem,1fr));
              gap:var(--space-8);margin-top:var(--space-6)}
.contact-grid p{margin:0 0 .3rem}
.contact-grid .label{font-family:var(--font-display);font-weight:600;
                     font-size:var(--fs-sm);color:var(--color-heading);
                     margin-bottom:var(--space-3)}

/* --- Timeline --------------------------------------------- */
.timeline{border-left:2px solid var(--color-border);padding-left:var(--space-6);
          margin:var(--space-8) 0;max-width:var(--measure)}
.timeline .entry{margin-bottom:var(--space-6);position:relative}
.timeline .entry::before{content:"";position:absolute;left:calc(-1*var(--space-6) - 5px);
   top:.55rem;width:8px;height:8px;border-radius:50%;background:var(--ib3-blue-400)}
.timeline .year{font-family:var(--font-display);font-weight:600;
                color:var(--ib3-blue-600);font-size:var(--fs-sm);letter-spacing:.04em}
.timeline p{margin:.2rem 0 0}

/* --- Subnav (heritage children) --------------------------- */
.subnav{display:flex;flex-wrap:wrap;gap:var(--space-4);margin:var(--space-6) 0 0;
        padding:0;list-style:none;font-size:var(--fs-sm)}
.subnav a{padding:.3rem 0;border-bottom:1px solid transparent}
.subnav a[aria-current="page"]{color:var(--color-heading);font-weight:500;
        border-bottom-color:var(--ib3-blue-400)}

/* --- Form notices ----------------------------------------- */
.notice{border-left:3px solid;padding:var(--space-4) var(--space-6);
        margin:var(--space-8) 0;max-width:var(--measure);
        background:var(--ib3-surface);border-radius:0 var(--radius) var(--radius) 0}
.notice p{margin:0 0 .4rem}
.notice p:last-child{margin:0;font-size:var(--fs-sm);color:var(--color-text-muted)}
.notice--ok{border-left-color:var(--ib3-success);background:#f2f8f4}
.notice--err{border-left-color:var(--ib3-danger);background:#fdf4f3}