@font-face{
  font-family:'Geist';
  src:url(../fonts/geist-variable.woff2) format('woff2');
  font-weight:100 900;font-style:normal;font-display:swap;
}
@font-face{
  font-family:'Geist Mono';
  src:url(../fonts/geist-mono-variable.woff2) format('woff2');
  font-weight:100 900;font-style:normal;font-display:swap;
}

/* ---------- tokens ---------- */
:root{
  --ink:#ffffff;  --sub:#aab3c4;  --nav:#fbfdff;  --foot:#f4f8fd;
  --text:#d3dbe8; --hair:rgba(196,214,232,.72);   --line:rgba(196,214,232,.16);
  --chev:rgba(214,232,250,.90);   --feat:#e2ebf5;
  --veil:6,10,18;
  --tip:#fff;      /* where the heading gradients end */
  --metal:linear-gradient(90deg,#8d97a6 0%,#eef1f5 26%,#a4adba 50%,#f2f4f7 74%,#939dab 100%);
  --sub-a:#dde2ea; /* where the hero paragraph gradient starts */
  --sky:#4aa8e8;  --amber:#f8c102;   /* diagram accents */

  /* logo palette */
  --green:#238c00; --lime:#8ec432; --cyan:#5dbdcd; --blue:#0173b9;
  --purple:#851a6c; --magenta:#d80f77; --red:#d90000; --yellow:#f8c102; --orange:#e67318;
  --magenta-lit:#f43d97;

  /* lettering: the logo magenta running into white */
  --fade:linear-gradient(90deg,#d90f78 0%,var(--tip) 88%,var(--tip) 100%);
  --mono:'Geist Mono',ui-monospace,'SF Mono',Menlo,monospace;

  --pad:clamp(20px,5vw,72px);
  --max:1180px;
  --blur:22px;
  --base:.34;   /* veil strength for the current video, set from JS */
  --dim:0;      /* 0 at the hero, 1 once scrolled into the content */
}

*,*::before,*::after{box-sizing:border-box;margin:0;padding:0}
html{background:#02060f;scroll-behavior:smooth;scroll-padding-top:84px;
     -webkit-text-size-adjust:100%}
body{font-family:'Geist','Helvetica Neue',Arial,sans-serif;color:var(--ink);
     font-variation-settings:'wght' 360;line-height:1.6;overflow-x:hidden;
     -webkit-font-smoothing:antialiased;-moz-osx-font-smoothing:grayscale;
     text-rendering:geometricPrecision}
a{color:inherit;text-decoration:none}
li{list-style:none}
a:focus-visible{outline:2px solid #9fe0ff;outline-offset:3px;border-radius:4px}

/* ---------- background layers ---------- */
.stage{position:fixed;inset:0;z-index:0;background:#03060c;pointer-events:none}
.art{position:absolute;inset:0;width:100%;height:100%;object-fit:cover;
     object-position:50% 50%;opacity:0;transition:opacity 1.5s ease;
     user-select:none;-webkit-user-drag:none}
.art.on{opacity:1}
/* stills (index-images.html): a slow drift so the picture is not frozen; off under reduced motion */
img.art{transform-origin:50% 50%}
@keyframes drift{from{transform:scale(1)}to{transform:scale(1.07)}}
@media (prefers-reduced-motion:no-preference){img.art.on{animation:drift 12s linear forwards}}
.art.top{z-index:1}
.veil{position:fixed;inset:0;z-index:0;pointer-events:none;
  background:
    radial-gradient(120% 70% at 50% 42%,
        rgba(var(--veil),.30) 0%, rgba(var(--veil),.12) 55%,
        rgba(var(--veil),0) 100%),
    linear-gradient(180deg, rgba(var(--veil),.50) 0%, rgba(var(--veil),0) 22%,
        rgba(var(--veil),0) 60%, rgba(var(--veil),.45) 100%),
    rgba(var(--veil), calc(var(--base) + var(--dim)*.40));}

.bar,main,.foot{position:relative;z-index:1}

/* ---------- header ---------- */
.bar{position:fixed;top:0;left:0;right:0;z-index:10;display:flex;align-items:center;
     justify-content:space-between;gap:24px;
     padding:calc(env(safe-area-inset-top) + 14px) var(--pad) 14px;
     transition:background .3s ease}
.bar::before{content:'';position:absolute;inset:0;z-index:-1;opacity:0;
     background:rgba(6,11,20,.72);border-bottom:1px solid var(--line);
     -webkit-backdrop-filter:blur(var(--blur)) saturate(.6);
     backdrop-filter:blur(var(--blur)) saturate(.6);transition:opacity .3s ease}
/* same magenta edge as the footer */
.bar::after{content:'';position:absolute;left:0;right:0;bottom:-1px;height:1px;opacity:0;
     background:linear-gradient(270deg,#d90f78 0%,rgba(217,15,120,0) 62%);
     transition:opacity .3s ease;pointer-events:none}
.scrolled .bar::before,.scrolled .bar::after{opacity:1}
.brand{display:flex;align-items:center}
.brand img{display:block;height:56px;width:auto}
/* logo: the tagline's band of light, crossing it once, slower; clipped to the logo's shape */
.brand,.sig{position:relative}
.brand::after,.sig::after{content:'';position:absolute;inset:0;pointer-events:none;
      background:linear-gradient(105deg,rgba(255,255,255,0) 40%,rgba(255,255,255,.9) 50%,rgba(255,255,255,0) 60%)
        160% 0/250% 100% no-repeat;
      -webkit-mask:url(data:image/svg+xml;base64,PHN2ZyB4bWxucz0iaHR0cDovL3d3dy53My5vcmcvMjAwMC9zdmciIHZpZXdCb3g9IjAgMCA0MDQgMTg0IiByb2xlPSJpbWciIGFyaWEtbGFiZWw9IklTNFNjaWVuY2UiPgogIDx0aXRsZT5JUzRTY2llbmNlPC90aXRsZT4KICA8ZGVmcz4KICAgIDxsaW5lYXJHcmFkaWVudCBpZD0iZzEiIGdyYWRpZW50VW5pdHM9InVzZXJTcGFjZU9uVXNlIiB4MT0iMCIgeTE9IjEzIiB4Mj0iMCIgeTI9IjExNiI+PHN0b3Agb2Zmc2V0PSIwIiBzdG9wLWNvbG9yPSIjYmNiY2JjIi8+PHN0b3Agb2Zmc2V0PSIuNSIgc3RvcC1jb2xvcj0iIzg5ODk4OSIvPjxzdG9wIG9mZnNldD0iMSIgc3RvcC1jb2xvcj0iIzVmNWY1ZiIvPjwvbGluZWFyR3JhZGllbnQ+CiAgICA8bGluZWFyR3JhZGllbnQgaWQ9ImcyIiBncmFkaWVudFVuaXRzPSJ1c2VyU3BhY2VPblVzZSIgeDE9IjAiIHkxPSIxMzIiIHgyPSIwIiB5Mj0iMTcxIj48c3RvcCBvZmZzZXQ9IjAiIHN0b3AtY29sb3I9IiM4YzhjOGMiLz48c3RvcCBvZmZzZXQ9IjEiIHN0b3AtY29sb3I9IiM1NTU1NTUiLz48L2xpbmVhckdyYWRpZW50PgogIDwvZGVmcz4KICA8Zz4KICAgIDxyZWN0IHg9IjkzIiB5PSIxNCIgd2lkdGg9IjM1IiBoZWlnaHQ9IjE2IiByeD0iMS41IiBmaWxsPSIjMjM4YzAwIi8+CiAgICA8cmVjdCB4PSIxMzYiIHk9IjE0IiB3aWR0aD0iMzUiIGhlaWdodD0iMTYiIHJ4PSIxLjUiIGZpbGw9IiM4ZWM0MzIiLz4KICAgIDxyZWN0IHg9IjQ5IiB5PSIzNyIgd2lkdGg9IjM1IiBoZWlnaHQ9IjE2IiByeD0iMS41IiBmaWxsPSIjNWRiZGNkIi8+CiAgICA8cmVjdCB4PSI5MyIgeT0iMzciIHdpZHRoPSIzNSIgaGVpZ2h0PSIxNiIgcng9IjEuNSIgZmlsbD0iIzAxNzNiOSIvPgogICAgPHJlY3QgeD0iMTM2IiB5PSIzNyIgd2lkdGg9IjM1IiBoZWlnaHQ9IjE2IiByeD0iMS41IiBmaWxsPSIjODUxYTZjIi8+CiAgICA8cmVjdCB4PSI2IiB5PSI2MiIgd2lkdGg9IjM1IiBoZWlnaHQ9IjE2IiByeD0iMS41IiBmaWxsPSIjZDgwZjc3Ii8+CiAgICA8cmVjdCB4PSI0OSIgeT0iNjIiIHdpZHRoPSIzNSIgaGVpZ2h0PSIxNiIgcng9IjEuNSIgZmlsbD0iI2Q5MDAwMCIvPgogICAgPHJlY3QgeD0iOTMiIHk9IjYyIiB3aWR0aD0iMzUiIGhlaWdodD0iMTYiIHJ4PSIxLjUiIGZpbGw9IiNmOGMxMDIiLz4KICAgIDxyZWN0IHg9IjEzNiIgeT0iNjIiIHdpZHRoPSIzNSIgaGVpZ2h0PSIxNiIgcng9IjEuNSIgZmlsbD0iI2U2NzMxOCIvPgogICAgPHJlY3QgeD0iOTMiIHk9Ijg1IiB3aWR0aD0iMzUiIGhlaWdodD0iMTYiIHJ4PSIxLjUiIGZpbGw9IiM4ZWM0MzIiLz4KICAgIDxyZWN0IHg9IjEzNiIgeT0iODUiIHdpZHRoPSIzNSIgaGVpZ2h0PSIxNiIgcng9IjEuNSIgZmlsbD0iIzIzOGMwMCIvPgogICAgPHJlY3QgeD0iNDkiIHk9IjEwOCIgd2lkdGg9IjM1IiBoZWlnaHQ9IjE2IiByeD0iMS41IiBmaWxsPSIjODUxYTZjIi8+CiAgICA8cmVjdCB4PSI5MyIgeT0iMTA4IiB3aWR0aD0iMzUiIGhlaWdodD0iMTYiIHJ4PSIxLjUiIGZpbGw9IiM1ZGJkY2QiLz4KICAgIDxyZWN0IHg9IjEzNiIgeT0iMTA4IiB3aWR0aD0iMzUiIGhlaWdodD0iMTYiIHJ4PSIxLjUiIGZpbGw9IiMwMTczYjkiLz4KICAgIDxyZWN0IHg9IjkzIiB5PSIxMzIiIHdpZHRoPSIzNSIgaGVpZ2h0PSIxNiIgcng9IjEuNSIgZmlsbD0iI2Q4MGY3NyIvPgogICAgPHJlY3QgeD0iMTM2IiB5PSIxMzIiIHdpZHRoPSIzNSIgaGVpZ2h0PSIxNiIgcng9IjEuNSIgZmlsbD0iI2Q5MDAwMCIvPgogICAgPHJlY3QgeD0iNDkiIHk9IjE1NSIgd2lkdGg9IjM1IiBoZWlnaHQ9IjE2IiByeD0iMS41IiBmaWxsPSIjZjhjMTAyIi8+CiAgICA8cmVjdCB4PSI5MyIgeT0iMTU1IiB3aWR0aD0iMzUiIGhlaWdodD0iMTYiIHJ4PSIxLjUiIGZpbGw9IiNlNjczMTgiLz4KICAgIDxyZWN0IHg9IjEzNiIgeT0iMTU1IiB3aWR0aD0iMzUiIGhlaWdodD0iMTYiIHJ4PSIxLjUiIGZpbGw9IiM4ZWM0MzIiLz4KICA8L2c+CiAgPHBhdGggZmlsbD0idXJsKCNnMSkiIGZpbGwtcnVsZT0iZXZlbm9kZCIgZD0iTTM2NS41MCAxMy4zOCBMMzgwLjAwIDEzLjM4IEwzODAuODggMTMuNzUgTDM4MS41MCAxNC41MCBMMzgxLjc1IDE1LjI1IEwzODEuNjIgNzQuNzUgTDM4MS44OCA3NS41MCBMMzgyLjg4IDc2LjAwIEwzOTQuMDAgNzUuODggTDM5NS4wMCA3Ni4yNSBMMzk1LjUwIDc3Ljg4IEwzOTUuMzggOTMuMTIgTDM5NS4xMiA5My42MiBMMzk0Ljc1IDkzLjg4IEwzODIuMzggOTMuODggTDM4MS43NSA5NC4zOCBMMzgxLjc1IDExNS41MCBMMzgwLjYyIDExNi4zOCBMMzYyLjM4IDExNi4zOCBMMzYxLjUwIDExNi4yNSBMMzYwLjUwIDExNS41MCBMMzYwLjI1IDExNC44OCBMMzYwLjI1IDk0LjM4IEwzNTkuNzUgOTMuODggTDMxOC4xMiA5My44OCBMMzE3LjM4IDkzLjUwIEwzMTYuNzUgOTIuNTAgTDMxNi43NSA3OC42MiBMMzE3LjI1IDc3LjM4IEwzMTguMDAgNzYuNzUgTDMxOS4zOCA3NC41MCBMMzE5Ljg4IDc0LjI1IEwzMjIuMzggNzAuNTAgTDMyNC4wMCA2OC43NSBMMzI0LjI1IDY4LjAwIEwzMjYuODggNjQuODggTDMyOC4yNSA2Mi42MiBMMzI5LjAwIDYyLjAwIEwzMjkuMjUgNjEuMjUgTDMyOS44OCA2MC44OCBMMzMxLjM4IDU4LjM4IEwzMzIuMDAgNTguMDAgTDMzMi4yNSA1Ny4yNSBMMzM2LjAwIDUyLjYyIEwzMzcuMjUgNTAuNTAgTDM0MC4wMCA0Ny4yNSBMMzQwLjI1IDQ2LjUwIEwzNDEuODggNDQuNzUgTDM0Mi41MCA0My41MCBMMzQ0LjAwIDQxLjg4IEwzNDQuMjUgNDEuMTIgTDM0Ni4xMiAzOS4wMCBMMzQ2LjM4IDM4LjI1IEwzNDcuMDAgMzcuODggTDM0Ny4yNSAzNy4xMiBMMzQ4LjAwIDM2LjUwIEwzNDkuMzggMzQuMjUgTDM0OS44OCAzNC4wMCBMMzUwLjEyIDMzLjI1IEwzNTIuMDAgMzEuMTIgTDM1Mi4yNSAzMC4zOCBMMzUyLjg4IDMwLjAwIEwzNTMuMTIgMjkuMjUgTDM1My44OCAyOC42MiBMMzU3LjM4IDIzLjUwIEwzNTkuMDAgMjEuNzUgTDM1OS4yNSAyMS4wMCBMMzYxLjEyIDE4Ljg4IEwzNjEuMzggMTguMTIgTDM2MS44OCAxNy44OCBMMzYzLjI1IDE1LjYyWk0yMzEuMjUgMTMuNjIgTDMwMy44OCAxMy42MiBMMzA1LjEyIDE0LjI1IEwzMDUuMjUgMTUuODggTDMwMi4yNSAyMy42MiBMMjk4Ljg4IDMzLjYyIEwyOTguMjUgMzUuMDAgTDI5Ny41MCAzNS4zOCBMMjQwLjYyIDM1LjI1IEwyMzkuNzUgMzUuODggTDIzOS42MiA1My4yNSBMMjQwLjI1IDU0LjEyIEwyOTMuMTIgNTQuMjUgTDI5Ny41MCA1NS4yNSBMMjk5Ljc1IDU2LjM4IEwzMDAuMTIgNTYuODggTDMwMC44OCA1Ny4xMiBMMzAzLjEyIDU5LjUwIEwzMDQuODggNjMuMDAgTDMwNS41MCA2Ni44OCBMMzA1LjUwIDEwMy44OCBMMzA1LjAwIDEwNy4zOCBMMzAzLjg4IDExMC4xMiBMMzAyLjg4IDExMS42MiBMMzAwLjI1IDExNC4wMCBMMjk1Ljg4IDExNS43NSBMMjkxLjg4IDExNi4yNSBMMjE3LjYyIDExNi4yNSBMMjE2LjUwIDExNS41MCBMMjE2LjI1IDExNS4wMCBMMjE2LjI1IDk1LjI1IEwyMTcuMDAgOTQuNjIgTDI4MS4zOCA5NC42MiBMMjgyLjEyIDk0LjAwIEwyODIuMTIgNzYuMzggTDI4MS42MiA3NS44OCBMMjI5LjEyIDc1Ljc1IEwyMjUuMjUgNzUuMDAgTDIyMi41MCA3My44OCBMMjIwLjUwIDcyLjM4IEwyMTguMjUgNjkuODggTDIxNy4yNSA2Ny44OCBMMjE2LjI1IDYzLjEyIEwyMTYuMjUgMjYuMDAgTDIxNi41MCAyNC4yNSBMMjE3LjI1IDIxLjI1IEwyMTcuODggMjAuNTAgTDIxOC4zOCAxOS4xMiBMMjIxLjEyIDE2LjI1IEwyMjUuMDAgMTQuMzhaTTE4Ny4zOCAxMy43NSBMMjA4LjAwIDEzLjc1IEwyMDguODggMTQuMDAgTDIwOS42MiAxNS4yNSBMMjA5LjYyIDExNS41MCBMMjA5LjI1IDExNi4xMiBMMjA4LjUwIDExNi4zOCBMMTg4LjEyIDExNi4zOCBMMTg2LjYyIDExNS44OCBMMTg2LjEyIDExNC44OCBMMTg2LjEyIDE0LjYyIEwxODYuNjIgMTQuMDBaTTM1OS41MCA0OS44OCBMMzYwLjEyIDUwLjEyIEwzNjAuMzggNTEuMzggTDM2MC4zOCA3NC43NSBMMzYwLjEyIDc1LjYyIEwzNTkuNTAgNzYuMDAgTDM0MS42MiA3NS44OCBMMzQxLjM4IDc1LjYyIEwzNDEuNjIgNzQuMzggTDM0My4wMCA3My4wMCBMMzU3Ljg4IDUyLjUwWiIvPgogIDxwYXRoIGZpbGw9InVybCgjZzIpIiBmaWxsLXJ1bGU9ImV2ZW5vZGQiIGQ9Ik0xOTAuNTAgMTMyLjEyIEwyMTYuODggMTMyLjEyIEwyMTcuMjUgMTMyLjM4IEwyMTcuNTAgMTM0LjAwIEwyMTUuNzUgMTM5LjM4IEwyMTQuODggMTQwLjUwIEwxOTUuNjIgMTQwLjUwIEwxOTUuMDAgMTQxLjM4IEwxOTUuMDAgMTQ2Ljc1IEwxOTUuNjIgMTQ3LjI1IEwyMTMuMTIgMTQ3LjI1IEwyMTUuODggMTQ4LjI1IEwyMTcuMDAgMTQ5LjUwIEwyMTcuODggMTUxLjg4IEwyMTcuODggMTY2LjUwIEwyMTcuMjUgMTY4LjYyIEwyMTYuMjUgMTY5Ljg4IEwyMTQuMzggMTcwLjc1IEwyMTIuMDAgMTcxLjAwIEwxODguMTIgMTcxLjAwIEwxODcuNTAgMTcwLjg4IEwxODYuNTAgMTY5Ljg4IEwxODYuMzggMTYzLjUwIEwxODcuMDAgMTYyLjUwIEwyMDguNzUgMTYyLjM4IEwyMDkuMzggMTYxLjc1IEwyMDkuMzggMTU2LjYyIEwyMDguNzUgMTU1Ljc1IEwxOTEuMjUgMTU1Ljc1IEwxODguNzUgMTU0Ljg4IEwxODcuMzggMTUzLjYyIEwxODYuNTAgMTUxLjAwIEwxODYuNTAgMTM2LjUwIEwxODcuMjUgMTM0LjEyIEwxODguMzggMTMzLjAwWk0yMjcuNzUgMTMyLjEyIEwyNDguNTAgMTMyLjEyIEwyNDkuMTIgMTMyLjUwIEwyNDkuMjUgMTM0LjI1IEwyNDcuMzggMTM5LjYyIEwyNDYuNzUgMTQwLjUwIEwyMzIuNzUgMTQwLjUwIEwyMzIuMDAgMTQxLjAwIEwyMzEuNzUgMTQxLjg4IEwyMzEuNzUgMTYxLjYyIEwyMzIuMDAgMTYyLjEyIEwyMzIuODggMTYyLjUwIEwyNDguMjUgMTYyLjM4IEwyNDguODggMTYyLjYyIEwyNDkuNjIgMTY0LjI1IEwyNDkuNjIgMTY5Ljg4IEwyNDkuMTIgMTcwLjg4IEwyMjguMzggMTcxLjAwIEwyMjUuMjUgMTY5Ljg4IEwyMjQuMjUgMTY4Ljg4IEwyMjMuMzggMTY2Ljg4IEwyMjMuMjUgMTY1Ljc1IEwyMjMuMjUgMTM2Ljg4IEwyMjMuNTAgMTM1LjUwIEwyMjQuMzggMTMzLjc1IEwyMjYuMzggMTMyLjM4Wk0yNTUuODggMTMyLjEyIEwyNjIuNzUgMTMyLjEyIEwyNjMuNjIgMTMzLjUwIEwyNjMuNjIgMTcwLjI1IEwyNjIuODggMTcxLjAwIEwyNTYuNTAgMTcxLjAwIEwyNTUuMTIgMTY5Ljg4IEwyNTUuMTIgMTMyLjg4Wk0yNzMuNTAgMTMyLjEyIEwyOTQuMjUgMTMyLjEyIEwyOTUuMDAgMTMyLjUwIEwyOTUuMzggMTMzLjYyIEwyOTUuMzggMTM5Ljc1IEwyOTQuNjIgMTQwLjYyIEwyNzguNTAgMTQwLjUwIEwyNzcuNjIgMTQxLjAwIEwyNzcuNTAgMTQ2Ljc1IEwyNzcuODggMTQ3LjEyIEwyODYuNjIgMTQ3LjI1IEwyODcuMTIgMTQ3LjYyIEwyODcuNTAgMTQ4Ljg4IEwyODUuODggMTUzLjg4IEwyODQuODggMTU1Ljc1IEwyNzguNjIgMTU1Ljc1IEwyNzcuNjIgMTU2LjI1IEwyNzcuMzggMTYxLjI1IEwyNzcuNTAgMTYxLjg4IEwyNzguNjIgMTYyLjUwIEwyOTMuNzUgMTYyLjM4IEwyOTQuNjIgMTYyLjYyIEwyOTUuMzggMTY0LjAwIEwyOTUuMzggMTcwLjAwIEwyOTUuMDAgMTcwLjg4IEwyNzQuMTIgMTcxLjAwIEwyNzEuMzggMTcwLjEyIEwyNzAuMTIgMTY5LjAwIEwyNjkuMzggMTY3Ljc1IEwyNjkuMTIgMTY2LjYyIEwyNjkuMTIgMTM2LjAwIEwyNjkuMzggMTM1LjAwIEwyNzAuMzggMTMzLjM4IEwyNzIuMTIgMTMyLjM4Wk0zMDQuODggMTMyLjEyIEwzMjcuNzUgMTMyLjEyIEwzMjkuMTIgMTMyLjUwIEwzMzEuMDAgMTMzLjg4IEwzMzEuODggMTM1LjI1IEwzMzIuMjUgMTM3LjUwIEwzMzIuMjUgMTcwLjAwIEwzMzEuODggMTcwLjg4IEwzMjUuMTIgMTcxLjAwIEwzMjQuMzggMTcwLjc1IEwzMjMuNzUgMTY5Ljc1IEwzMjMuODggMTQxLjUwIEwzMjMuMDAgMTQwLjUwIEwzMTAuMTIgMTQwLjUwIEwzMDkuNTAgMTQwLjg4IEwzMDkuMjUgMTQxLjUwIEwzMDkuMjUgMTcwLjUwIEwzMDguNzUgMTcxLjAwIEwzMDIuMjUgMTcxLjAwIEwzMDEuMTIgMTcwLjI1IEwzMDAuODggMTY5LjUwIEwzMDEuMDAgMTM1Ljc1IEwzMDEuMzggMTM0LjUwIEwzMDIuNTAgMTMzLjEyIEwzMDMuNzUgMTMyLjM4Wk0zNDIuMTIgMTMyLjEyIEwzNjIuODggMTMyLjEyIEwzNjMuNTAgMTMyLjYyIEwzNjMuNzUgMTMzLjg4IEwzNjEuODggMTM5LjUwIEwzNjAuNzUgMTQwLjYyIEwzNDcuMzggMTQwLjUwIEwzNDYuMzggMTQwLjg4IEwzNDYuMTIgMTQxLjUwIEwzNDYuMTIgMTYxLjc1IEwzNDYuNTAgMTYyLjI1IEwzNDcuNTAgMTYyLjUwIEwzNjMuMDAgMTYyLjUwIEwzNjQuMDAgMTYzLjUwIEwzNjQuMDAgMTcwLjM4IEwzNjMuNjIgMTcwLjg4IEwzNDIuNzUgMTcxLjAwIEwzMzkuODggMTcwLjAwIEwzMzguMjUgMTY4LjI1IEwzMzcuNzUgMTY1LjYyIEwzMzcuNzUgMTM3LjAwIEwzMzguMjUgMTM0LjM4IEwzMzkuMDAgMTMzLjUwIEwzNDAuNzUgMTMyLjM4Wk0zNzMuODggMTMyLjEyIEwzOTQuNzUgMTMyLjEyIEwzOTUuMzggMTMyLjYyIEwzOTUuNzUgMTMzLjM4IEwzOTUuNzUgMTQwLjAwIEwzOTUuMjUgMTQwLjUwIEwzNzguODggMTQwLjUwIEwzNzguMTIgMTQxLjAwIEwzNzguMDAgMTQ2Ljc1IEwzNzguMjUgMTQ3LjEyIEwzODYuODggMTQ3LjI1IEwzODcuNzUgMTQ3Ljg4IEwzODguMDAgMTQ4Ljc1IEwzODYuMDAgMTU0Ljc1IEwzODUuMzggMTU1LjYyIEwzODQuODggMTU1Ljg4IEwzNzkuMDAgMTU1Ljc1IEwzNzguMTIgMTU2LjEyIEwzNzguMDAgMTYxLjg4IEwzNzguMjUgMTYyLjI1IEwzNzkuMjUgMTYyLjUwIEwzOTQuODggMTYyLjUwIEwzOTUuNzUgMTYzLjYyIEwzOTUuNzUgMTcwLjM4IEwzOTUuNTAgMTcwLjc1IEwzOTUuMDAgMTcxLjAwIEwzNzQuNjIgMTcxLjAwIEwzNzEuNjIgMTcwLjAwIEwzNzAuMjUgMTY4LjYyIEwzNjkuNTAgMTY2LjM4IEwzNjkuNTAgMTM2LjM4IEwzNzAuMjUgMTM0LjEyIEwzNzEuMzggMTMzLjAwWiIvPgo8L3N2Zz4K) center/100% 100% no-repeat;
              mask:url(data:image/svg+xml;base64,PHN2ZyB4bWxucz0iaHR0cDovL3d3dy53My5vcmcvMjAwMC9zdmciIHZpZXdCb3g9IjAgMCA0MDQgMTg0IiByb2xlPSJpbWciIGFyaWEtbGFiZWw9IklTNFNjaWVuY2UiPgogIDx0aXRsZT5JUzRTY2llbmNlPC90aXRsZT4KICA8ZGVmcz4KICAgIDxsaW5lYXJHcmFkaWVudCBpZD0iZzEiIGdyYWRpZW50VW5pdHM9InVzZXJTcGFjZU9uVXNlIiB4MT0iMCIgeTE9IjEzIiB4Mj0iMCIgeTI9IjExNiI+PHN0b3Agb2Zmc2V0PSIwIiBzdG9wLWNvbG9yPSIjYmNiY2JjIi8+PHN0b3Agb2Zmc2V0PSIuNSIgc3RvcC1jb2xvcj0iIzg5ODk4OSIvPjxzdG9wIG9mZnNldD0iMSIgc3RvcC1jb2xvcj0iIzVmNWY1ZiIvPjwvbGluZWFyR3JhZGllbnQ+CiAgICA8bGluZWFyR3JhZGllbnQgaWQ9ImcyIiBncmFkaWVudFVuaXRzPSJ1c2VyU3BhY2VPblVzZSIgeDE9IjAiIHkxPSIxMzIiIHgyPSIwIiB5Mj0iMTcxIj48c3RvcCBvZmZzZXQ9IjAiIHN0b3AtY29sb3I9IiM4YzhjOGMiLz48c3RvcCBvZmZzZXQ9IjEiIHN0b3AtY29sb3I9IiM1NTU1NTUiLz48L2xpbmVhckdyYWRpZW50PgogIDwvZGVmcz4KICA8Zz4KICAgIDxyZWN0IHg9IjkzIiB5PSIxNCIgd2lkdGg9IjM1IiBoZWlnaHQ9IjE2IiByeD0iMS41IiBmaWxsPSIjMjM4YzAwIi8+CiAgICA8cmVjdCB4PSIxMzYiIHk9IjE0IiB3aWR0aD0iMzUiIGhlaWdodD0iMTYiIHJ4PSIxLjUiIGZpbGw9IiM4ZWM0MzIiLz4KICAgIDxyZWN0IHg9IjQ5IiB5PSIzNyIgd2lkdGg9IjM1IiBoZWlnaHQ9IjE2IiByeD0iMS41IiBmaWxsPSIjNWRiZGNkIi8+CiAgICA8cmVjdCB4PSI5MyIgeT0iMzciIHdpZHRoPSIzNSIgaGVpZ2h0PSIxNiIgcng9IjEuNSIgZmlsbD0iIzAxNzNiOSIvPgogICAgPHJlY3QgeD0iMTM2IiB5PSIzNyIgd2lkdGg9IjM1IiBoZWlnaHQ9IjE2IiByeD0iMS41IiBmaWxsPSIjODUxYTZjIi8+CiAgICA8cmVjdCB4PSI2IiB5PSI2MiIgd2lkdGg9IjM1IiBoZWlnaHQ9IjE2IiByeD0iMS41IiBmaWxsPSIjZDgwZjc3Ii8+CiAgICA8cmVjdCB4PSI0OSIgeT0iNjIiIHdpZHRoPSIzNSIgaGVpZ2h0PSIxNiIgcng9IjEuNSIgZmlsbD0iI2Q5MDAwMCIvPgogICAgPHJlY3QgeD0iOTMiIHk9IjYyIiB3aWR0aD0iMzUiIGhlaWdodD0iMTYiIHJ4PSIxLjUiIGZpbGw9IiNmOGMxMDIiLz4KICAgIDxyZWN0IHg9IjEzNiIgeT0iNjIiIHdpZHRoPSIzNSIgaGVpZ2h0PSIxNiIgcng9IjEuNSIgZmlsbD0iI2U2NzMxOCIvPgogICAgPHJlY3QgeD0iOTMiIHk9Ijg1IiB3aWR0aD0iMzUiIGhlaWdodD0iMTYiIHJ4PSIxLjUiIGZpbGw9IiM4ZWM0MzIiLz4KICAgIDxyZWN0IHg9IjEzNiIgeT0iODUiIHdpZHRoPSIzNSIgaGVpZ2h0PSIxNiIgcng9IjEuNSIgZmlsbD0iIzIzOGMwMCIvPgogICAgPHJlY3QgeD0iNDkiIHk9IjEwOCIgd2lkdGg9IjM1IiBoZWlnaHQ9IjE2IiByeD0iMS41IiBmaWxsPSIjODUxYTZjIi8+CiAgICA8cmVjdCB4PSI5MyIgeT0iMTA4IiB3aWR0aD0iMzUiIGhlaWdodD0iMTYiIHJ4PSIxLjUiIGZpbGw9IiM1ZGJkY2QiLz4KICAgIDxyZWN0IHg9IjEzNiIgeT0iMTA4IiB3aWR0aD0iMzUiIGhlaWdodD0iMTYiIHJ4PSIxLjUiIGZpbGw9IiMwMTczYjkiLz4KICAgIDxyZWN0IHg9IjkzIiB5PSIxMzIiIHdpZHRoPSIzNSIgaGVpZ2h0PSIxNiIgcng9IjEuNSIgZmlsbD0iI2Q4MGY3NyIvPgogICAgPHJlY3QgeD0iMTM2IiB5PSIxMzIiIHdpZHRoPSIzNSIgaGVpZ2h0PSIxNiIgcng9IjEuNSIgZmlsbD0iI2Q5MDAwMCIvPgogICAgPHJlY3QgeD0iNDkiIHk9IjE1NSIgd2lkdGg9IjM1IiBoZWlnaHQ9IjE2IiByeD0iMS41IiBmaWxsPSIjZjhjMTAyIi8+CiAgICA8cmVjdCB4PSI5MyIgeT0iMTU1IiB3aWR0aD0iMzUiIGhlaWdodD0iMTYiIHJ4PSIxLjUiIGZpbGw9IiNlNjczMTgiLz4KICAgIDxyZWN0IHg9IjEzNiIgeT0iMTU1IiB3aWR0aD0iMzUiIGhlaWdodD0iMTYiIHJ4PSIxLjUiIGZpbGw9IiM4ZWM0MzIiLz4KICA8L2c+CiAgPHBhdGggZmlsbD0idXJsKCNnMSkiIGZpbGwtcnVsZT0iZXZlbm9kZCIgZD0iTTM2NS41MCAxMy4zOCBMMzgwLjAwIDEzLjM4IEwzODAuODggMTMuNzUgTDM4MS41MCAxNC41MCBMMzgxLjc1IDE1LjI1IEwzODEuNjIgNzQuNzUgTDM4MS44OCA3NS41MCBMMzgyLjg4IDc2LjAwIEwzOTQuMDAgNzUuODggTDM5NS4wMCA3Ni4yNSBMMzk1LjUwIDc3Ljg4IEwzOTUuMzggOTMuMTIgTDM5NS4xMiA5My42MiBMMzk0Ljc1IDkzLjg4IEwzODIuMzggOTMuODggTDM4MS43NSA5NC4zOCBMMzgxLjc1IDExNS41MCBMMzgwLjYyIDExNi4zOCBMMzYyLjM4IDExNi4zOCBMMzYxLjUwIDExNi4yNSBMMzYwLjUwIDExNS41MCBMMzYwLjI1IDExNC44OCBMMzYwLjI1IDk0LjM4IEwzNTkuNzUgOTMuODggTDMxOC4xMiA5My44OCBMMzE3LjM4IDkzLjUwIEwzMTYuNzUgOTIuNTAgTDMxNi43NSA3OC42MiBMMzE3LjI1IDc3LjM4IEwzMTguMDAgNzYuNzUgTDMxOS4zOCA3NC41MCBMMzE5Ljg4IDc0LjI1IEwzMjIuMzggNzAuNTAgTDMyNC4wMCA2OC43NSBMMzI0LjI1IDY4LjAwIEwzMjYuODggNjQuODggTDMyOC4yNSA2Mi42MiBMMzI5LjAwIDYyLjAwIEwzMjkuMjUgNjEuMjUgTDMyOS44OCA2MC44OCBMMzMxLjM4IDU4LjM4IEwzMzIuMDAgNTguMDAgTDMzMi4yNSA1Ny4yNSBMMzM2LjAwIDUyLjYyIEwzMzcuMjUgNTAuNTAgTDM0MC4wMCA0Ny4yNSBMMzQwLjI1IDQ2LjUwIEwzNDEuODggNDQuNzUgTDM0Mi41MCA0My41MCBMMzQ0LjAwIDQxLjg4IEwzNDQuMjUgNDEuMTIgTDM0Ni4xMiAzOS4wMCBMMzQ2LjM4IDM4LjI1IEwzNDcuMDAgMzcuODggTDM0Ny4yNSAzNy4xMiBMMzQ4LjAwIDM2LjUwIEwzNDkuMzggMzQuMjUgTDM0OS44OCAzNC4wMCBMMzUwLjEyIDMzLjI1IEwzNTIuMDAgMzEuMTIgTDM1Mi4yNSAzMC4zOCBMMzUyLjg4IDMwLjAwIEwzNTMuMTIgMjkuMjUgTDM1My44OCAyOC42MiBMMzU3LjM4IDIzLjUwIEwzNTkuMDAgMjEuNzUgTDM1OS4yNSAyMS4wMCBMMzYxLjEyIDE4Ljg4IEwzNjEuMzggMTguMTIgTDM2MS44OCAxNy44OCBMMzYzLjI1IDE1LjYyWk0yMzEuMjUgMTMuNjIgTDMwMy44OCAxMy42MiBMMzA1LjEyIDE0LjI1IEwzMDUuMjUgMTUuODggTDMwMi4yNSAyMy42MiBMMjk4Ljg4IDMzLjYyIEwyOTguMjUgMzUuMDAgTDI5Ny41MCAzNS4zOCBMMjQwLjYyIDM1LjI1IEwyMzkuNzUgMzUuODggTDIzOS42MiA1My4yNSBMMjQwLjI1IDU0LjEyIEwyOTMuMTIgNTQuMjUgTDI5Ny41MCA1NS4yNSBMMjk5Ljc1IDU2LjM4IEwzMDAuMTIgNTYuODggTDMwMC44OCA1Ny4xMiBMMzAzLjEyIDU5LjUwIEwzMDQuODggNjMuMDAgTDMwNS41MCA2Ni44OCBMMzA1LjUwIDEwMy44OCBMMzA1LjAwIDEwNy4zOCBMMzAzLjg4IDExMC4xMiBMMzAyLjg4IDExMS42MiBMMzAwLjI1IDExNC4wMCBMMjk1Ljg4IDExNS43NSBMMjkxLjg4IDExNi4yNSBMMjE3LjYyIDExNi4yNSBMMjE2LjUwIDExNS41MCBMMjE2LjI1IDExNS4wMCBMMjE2LjI1IDk1LjI1IEwyMTcuMDAgOTQuNjIgTDI4MS4zOCA5NC42MiBMMjgyLjEyIDk0LjAwIEwyODIuMTIgNzYuMzggTDI4MS42MiA3NS44OCBMMjI5LjEyIDc1Ljc1IEwyMjUuMjUgNzUuMDAgTDIyMi41MCA3My44OCBMMjIwLjUwIDcyLjM4IEwyMTguMjUgNjkuODggTDIxNy4yNSA2Ny44OCBMMjE2LjI1IDYzLjEyIEwyMTYuMjUgMjYuMDAgTDIxNi41MCAyNC4yNSBMMjE3LjI1IDIxLjI1IEwyMTcuODggMjAuNTAgTDIxOC4zOCAxOS4xMiBMMjIxLjEyIDE2LjI1IEwyMjUuMDAgMTQuMzhaTTE4Ny4zOCAxMy43NSBMMjA4LjAwIDEzLjc1IEwyMDguODggMTQuMDAgTDIwOS42MiAxNS4yNSBMMjA5LjYyIDExNS41MCBMMjA5LjI1IDExNi4xMiBMMjA4LjUwIDExNi4zOCBMMTg4LjEyIDExNi4zOCBMMTg2LjYyIDExNS44OCBMMTg2LjEyIDExNC44OCBMMTg2LjEyIDE0LjYyIEwxODYuNjIgMTQuMDBaTTM1OS41MCA0OS44OCBMMzYwLjEyIDUwLjEyIEwzNjAuMzggNTEuMzggTDM2MC4zOCA3NC43NSBMMzYwLjEyIDc1LjYyIEwzNTkuNTAgNzYuMDAgTDM0MS42MiA3NS44OCBMMzQxLjM4IDc1LjYyIEwzNDEuNjIgNzQuMzggTDM0My4wMCA3My4wMCBMMzU3Ljg4IDUyLjUwWiIvPgogIDxwYXRoIGZpbGw9InVybCgjZzIpIiBmaWxsLXJ1bGU9ImV2ZW5vZGQiIGQ9Ik0xOTAuNTAgMTMyLjEyIEwyMTYuODggMTMyLjEyIEwyMTcuMjUgMTMyLjM4IEwyMTcuNTAgMTM0LjAwIEwyMTUuNzUgMTM5LjM4IEwyMTQuODggMTQwLjUwIEwxOTUuNjIgMTQwLjUwIEwxOTUuMDAgMTQxLjM4IEwxOTUuMDAgMTQ2Ljc1IEwxOTUuNjIgMTQ3LjI1IEwyMTMuMTIgMTQ3LjI1IEwyMTUuODggMTQ4LjI1IEwyMTcuMDAgMTQ5LjUwIEwyMTcuODggMTUxLjg4IEwyMTcuODggMTY2LjUwIEwyMTcuMjUgMTY4LjYyIEwyMTYuMjUgMTY5Ljg4IEwyMTQuMzggMTcwLjc1IEwyMTIuMDAgMTcxLjAwIEwxODguMTIgMTcxLjAwIEwxODcuNTAgMTcwLjg4IEwxODYuNTAgMTY5Ljg4IEwxODYuMzggMTYzLjUwIEwxODcuMDAgMTYyLjUwIEwyMDguNzUgMTYyLjM4IEwyMDkuMzggMTYxLjc1IEwyMDkuMzggMTU2LjYyIEwyMDguNzUgMTU1Ljc1IEwxOTEuMjUgMTU1Ljc1IEwxODguNzUgMTU0Ljg4IEwxODcuMzggMTUzLjYyIEwxODYuNTAgMTUxLjAwIEwxODYuNTAgMTM2LjUwIEwxODcuMjUgMTM0LjEyIEwxODguMzggMTMzLjAwWk0yMjcuNzUgMTMyLjEyIEwyNDguNTAgMTMyLjEyIEwyNDkuMTIgMTMyLjUwIEwyNDkuMjUgMTM0LjI1IEwyNDcuMzggMTM5LjYyIEwyNDYuNzUgMTQwLjUwIEwyMzIuNzUgMTQwLjUwIEwyMzIuMDAgMTQxLjAwIEwyMzEuNzUgMTQxLjg4IEwyMzEuNzUgMTYxLjYyIEwyMzIuMDAgMTYyLjEyIEwyMzIuODggMTYyLjUwIEwyNDguMjUgMTYyLjM4IEwyNDguODggMTYyLjYyIEwyNDkuNjIgMTY0LjI1IEwyNDkuNjIgMTY5Ljg4IEwyNDkuMTIgMTcwLjg4IEwyMjguMzggMTcxLjAwIEwyMjUuMjUgMTY5Ljg4IEwyMjQuMjUgMTY4Ljg4IEwyMjMuMzggMTY2Ljg4IEwyMjMuMjUgMTY1Ljc1IEwyMjMuMjUgMTM2Ljg4IEwyMjMuNTAgMTM1LjUwIEwyMjQuMzggMTMzLjc1IEwyMjYuMzggMTMyLjM4Wk0yNTUuODggMTMyLjEyIEwyNjIuNzUgMTMyLjEyIEwyNjMuNjIgMTMzLjUwIEwyNjMuNjIgMTcwLjI1IEwyNjIuODggMTcxLjAwIEwyNTYuNTAgMTcxLjAwIEwyNTUuMTIgMTY5Ljg4IEwyNTUuMTIgMTMyLjg4Wk0yNzMuNTAgMTMyLjEyIEwyOTQuMjUgMTMyLjEyIEwyOTUuMDAgMTMyLjUwIEwyOTUuMzggMTMzLjYyIEwyOTUuMzggMTM5Ljc1IEwyOTQuNjIgMTQwLjYyIEwyNzguNTAgMTQwLjUwIEwyNzcuNjIgMTQxLjAwIEwyNzcuNTAgMTQ2Ljc1IEwyNzcuODggMTQ3LjEyIEwyODYuNjIgMTQ3LjI1IEwyODcuMTIgMTQ3LjYyIEwyODcuNTAgMTQ4Ljg4IEwyODUuODggMTUzLjg4IEwyODQuODggMTU1Ljc1IEwyNzguNjIgMTU1Ljc1IEwyNzcuNjIgMTU2LjI1IEwyNzcuMzggMTYxLjI1IEwyNzcuNTAgMTYxLjg4IEwyNzguNjIgMTYyLjUwIEwyOTMuNzUgMTYyLjM4IEwyOTQuNjIgMTYyLjYyIEwyOTUuMzggMTY0LjAwIEwyOTUuMzggMTcwLjAwIEwyOTUuMDAgMTcwLjg4IEwyNzQuMTIgMTcxLjAwIEwyNzEuMzggMTcwLjEyIEwyNzAuMTIgMTY5LjAwIEwyNjkuMzggMTY3Ljc1IEwyNjkuMTIgMTY2LjYyIEwyNjkuMTIgMTM2LjAwIEwyNjkuMzggMTM1LjAwIEwyNzAuMzggMTMzLjM4IEwyNzIuMTIgMTMyLjM4Wk0zMDQuODggMTMyLjEyIEwzMjcuNzUgMTMyLjEyIEwzMjkuMTIgMTMyLjUwIEwzMzEuMDAgMTMzLjg4IEwzMzEuODggMTM1LjI1IEwzMzIuMjUgMTM3LjUwIEwzMzIuMjUgMTcwLjAwIEwzMzEuODggMTcwLjg4IEwzMjUuMTIgMTcxLjAwIEwzMjQuMzggMTcwLjc1IEwzMjMuNzUgMTY5Ljc1IEwzMjMuODggMTQxLjUwIEwzMjMuMDAgMTQwLjUwIEwzMTAuMTIgMTQwLjUwIEwzMDkuNTAgMTQwLjg4IEwzMDkuMjUgMTQxLjUwIEwzMDkuMjUgMTcwLjUwIEwzMDguNzUgMTcxLjAwIEwzMDIuMjUgMTcxLjAwIEwzMDEuMTIgMTcwLjI1IEwzMDAuODggMTY5LjUwIEwzMDEuMDAgMTM1Ljc1IEwzMDEuMzggMTM0LjUwIEwzMDIuNTAgMTMzLjEyIEwzMDMuNzUgMTMyLjM4Wk0zNDIuMTIgMTMyLjEyIEwzNjIuODggMTMyLjEyIEwzNjMuNTAgMTMyLjYyIEwzNjMuNzUgMTMzLjg4IEwzNjEuODggMTM5LjUwIEwzNjAuNzUgMTQwLjYyIEwzNDcuMzggMTQwLjUwIEwzNDYuMzggMTQwLjg4IEwzNDYuMTIgMTQxLjUwIEwzNDYuMTIgMTYxLjc1IEwzNDYuNTAgMTYyLjI1IEwzNDcuNTAgMTYyLjUwIEwzNjMuMDAgMTYyLjUwIEwzNjQuMDAgMTYzLjUwIEwzNjQuMDAgMTcwLjM4IEwzNjMuNjIgMTcwLjg4IEwzNDIuNzUgMTcxLjAwIEwzMzkuODggMTcwLjAwIEwzMzguMjUgMTY4LjI1IEwzMzcuNzUgMTY1LjYyIEwzMzcuNzUgMTM3LjAwIEwzMzguMjUgMTM0LjM4IEwzMzkuMDAgMTMzLjUwIEwzNDAuNzUgMTMyLjM4Wk0zNzMuODggMTMyLjEyIEwzOTQuNzUgMTMyLjEyIEwzOTUuMzggMTMyLjYyIEwzOTUuNzUgMTMzLjM4IEwzOTUuNzUgMTQwLjAwIEwzOTUuMjUgMTQwLjUwIEwzNzguODggMTQwLjUwIEwzNzguMTIgMTQxLjAwIEwzNzguMDAgMTQ2Ljc1IEwzNzguMjUgMTQ3LjEyIEwzODYuODggMTQ3LjI1IEwzODcuNzUgMTQ3Ljg4IEwzODguMDAgMTQ4Ljc1IEwzODYuMDAgMTU0Ljc1IEwzODUuMzggMTU1LjYyIEwzODQuODggMTU1Ljg4IEwzNzkuMDAgMTU1Ljc1IEwzNzguMTIgMTU2LjEyIEwzNzguMDAgMTYxLjg4IEwzNzguMjUgMTYyLjI1IEwzNzkuMjUgMTYyLjUwIEwzOTQuODggMTYyLjUwIEwzOTUuNzUgMTYzLjYyIEwzOTUuNzUgMTcwLjM4IEwzOTUuNTAgMTcwLjc1IEwzOTUuMDAgMTcxLjAwIEwzNzQuNjIgMTcxLjAwIEwzNzEuNjIgMTcwLjAwIEwzNzAuMjUgMTY4LjYyIEwzNjkuNTAgMTY2LjM4IEwzNjkuNTAgMTM2LjM4IEwzNzAuMjUgMTM0LjEyIEwzNzEuMzggMTMzLjAwWiIvPgo8L3N2Zz4K) center/100% 100% no-repeat}
@keyframes shine-logo{from{background-position:160% 0}to{background-position:-60% 0}}
@media (prefers-reduced-motion:no-preference){
  .brand::after{animation:shine-logo 4s cubic-bezier(.3,.1,.3,1) 1s backwards}
}

.navtoggle{position:absolute;top:0;right:0;width:1px;height:1px;opacity:0;margin:0;
           pointer-events:none}
.burger,.scrim{display:none}
.navpanel{display:flex;align-items:center;gap:clamp(18px,2.4vw,34px)}
.menu{display:flex;align-items:center;gap:clamp(0px,.7vw,10px)}
.menu a{font-size:13px;font-variation-settings:'wght' 400;color:var(--nav);
              letter-spacing:.06em;opacity:.88;transition:opacity .15s ease}
/* capitals sit centred in the line, so the padding is even */
.menu a{padding:7px 14px;border-radius:3px;text-transform:uppercase;
        transition:opacity .15s ease,background .15s ease,color .15s ease,transform .14s ease-out}
.menu a:hover{background:#d90f78;color:#fff;opacity:1}
/* longer labels in other languages: keep each on one line, tighter between 901 and 1100px */
.menu a{white-space:nowrap}
@media (min-width:901px) and (max-width:1100px){.menu a{padding-left:8px;padding-right:8px}}

/* language menu */
.langs{position:relative}
.langs summary{display:inline-flex;align-items:center;gap:6px;padding:7px 10px;border-radius:3px;
       list-style:none;cursor:pointer;font-size:13px;letter-spacing:.06em;color:var(--nav);
       opacity:.88;transition:opacity .15s ease,transform .14s ease-out}
.langs summary::-webkit-details-marker{display:none}
.langs summary:hover,.langs[open] summary{opacity:1}
.langs summary:focus-visible{outline:2px solid #9fe0ff;outline-offset:3px}
.langs summary svg{width:9px;height:6px;fill:none;stroke:currentColor;stroke-width:1.5;
       stroke-linecap:round;stroke-linejoin:round;transition:rotate .2s ease}
.langs[open] summary svg{rotate:180deg}
.langs ul{position:absolute;top:calc(100% + 10px);inset-inline-end:0;z-index:20;min-width:160px;padding:6px;
       border-radius:10px;border:1px solid var(--line);background:rgba(6,11,20,.94);
       -webkit-backdrop-filter:blur(var(--blur));backdrop-filter:blur(var(--blur));
       box-shadow:0 14px 38px rgba(2,6,14,.45)}
/* opens from the button, not from nothing */
@keyframes langs-pop{from{opacity:0;transform:scale(.96)}}
.langs[open] ul{animation:langs-pop .16s cubic-bezier(.23,1,.32,1);transform-origin:100% 0}
.langs a{display:block;padding:8px 12px;border-radius:3px;font-size:14px;color:var(--nav);
        transition:background .15s ease,color .15s ease,transform .14s ease-out}
.langs a:hover{background:#d90f78;color:#fff}
.langs a[aria-current]{color:var(--magenta-lit)}
.langs a[aria-current]:hover{color:#fff}

.theme{display:grid;place-items:center;width:36px;height:36px;flex:none;border-radius:50%;
       border:1px solid var(--hair);background:none;color:var(--nav);cursor:pointer;
       font:inherit;transition:background .2s ease,border-color .2s ease,transform .14s ease-out}
.theme:hover{background:rgba(255,255,255,.09);border-color:var(--ink)}
.theme:focus-visible{outline:2px solid #9fe0ff;outline-offset:3px}
.theme svg{width:17px;height:17px;fill:none;stroke:currentColor;stroke-width:1.6;
           stroke-linecap:round;stroke-linejoin:round}
.theme .moon{display:none}
/* press feedback: every pressable element answers the press at once */
.cta:active,.theme:active,.totop:active,.ai-badge:active,.langs summary:active,.langs a:active,
.menu a:active{transform:scale(.97)}

/* ---------- back to top ---------- */
.totop{position:fixed;z-index:9;right:max(20px,env(safe-area-inset-right));
       bottom:calc(env(safe-area-inset-bottom) + 24px);width:38px;height:38px;
       display:grid;place-items:center;border:1px solid var(--hair);border-radius:50%;
       background:rgba(6,11,20,.72);-webkit-backdrop-filter:blur(var(--blur));
       backdrop-filter:blur(var(--blur));
       opacity:0;visibility:hidden;translate:0 10px;
       transition:opacity .25s ease,translate .25s ease,visibility 0s .25s,
                  background .2s ease,border-color .2s ease,transform .14s ease-out}
.totop svg{width:9px;height:13px;fill:none;stroke:var(--ink);stroke-width:1.6;
           stroke-linecap:round;stroke-linejoin:round}
.deep .totop{opacity:1;visibility:visible;translate:0 0;
             transition:opacity .25s ease,translate .25s ease,visibility 0s,
                        background .2s ease,border-color .2s ease,transform .14s ease-out}
.totop:hover{background:#d90f78;border-color:#d90f78}
.totop:hover svg{stroke:#fff}
.totop::after{content:attr(data-tip);position:absolute;right:calc(100% + 10px);top:50%;
       translate:0 -50%;padding:6px 10px;border-radius:3px;background:#d90f78;color:#fff;
       font-size:12px;line-height:1.2;white-space:nowrap;pointer-events:none;
       opacity:0;transition:opacity .15s ease}
.totop:hover::after,.totop:focus-visible::after{opacity:1}

/* ---------- hero ---------- */
.hero{min-height:100vh;min-height:100svh;display:flex;flex-direction:column;
      align-items:center;justify-content:center;text-align:center;
      padding:120px var(--pad) clamp(56px,15vh,150px);gap:clamp(18px,2.4vw,28px)}   /* deeper bottom padding lifts the copy a little above centre */
.eyebrow{display:inline-flex;align-items:center;gap:10px;font-family:var(--mono);
         font-size:12px;letter-spacing:.14em;text-transform:uppercase;color:var(--feat);
         font-variation-settings:'wght' 480}
/* hero badge: the AI review is the differentiator, so it follows the intro and leads to it */
.ai-badge{align-self:flex-start;padding:8px 15px;border-radius:999px;text-align:left;
          border:1px solid color-mix(in srgb,var(--magenta-lit) 45%,transparent);
          background:color-mix(in srgb,var(--magenta-lit) 9%,rgba(4,8,15,.35));
          -webkit-backdrop-filter:blur(8px);backdrop-filter:blur(8px);
          transition:border-color .25s ease,background-color .25s ease,transform .14s ease-out}
.ai-badge:hover{border-color:var(--magenta-lit);background-color:color-mix(in srgb,var(--magenta-lit) 18%,rgba(4,8,15,.35))}
.ai-badge:focus-visible{outline:2px solid #9fe0ff;outline-offset:3px}
[data-theme="light"] .ai-badge{background:color-mix(in srgb,var(--magenta-lit) 7%,rgba(255,255,255,.7))}
[dir="rtl"] .ai-badge{text-align:right}

.title{font-size:clamp(2.75rem,1.9rem + 4.6vw,6rem);line-height:1.02;letter-spacing:-.03em;
       font-weight:inherit;font-variation-settings:'wght' 600;text-wrap:balance;
       align-self:flex-start;text-align:left}
/* one H1, two lines: each span has its own size and gradient; the padding keeps descenders
   inside the painted box */
.title > span{display:block;padding-bottom:.14em;margin-bottom:-.14em;
       background:var(--fade);-webkit-background-clip:text;background-clip:text;
       color:transparent}
#h1a{font-size:clamp(3.15rem,2.2rem + 5.3vw,6.9rem);background-image:linear-gradient(90deg,#d90f78 0%,#d90f78 35%,var(--tip) 100%)}
#h1b{font-size:clamp(2.4rem,1.65rem + 4vw,5.25rem)}
.sub{max-width:44ch;font-size:clamp(1.1rem,1.75vw,1.45rem);line-height:1.5;
     background:linear-gradient(90deg,var(--sub-a),var(--tip));-webkit-background-clip:text;background-clip:text;
     color:transparent;
     font-variation-settings:'wght' 400;text-wrap:balance;
     align-self:flex-start;text-align:left;
     filter:drop-shadow(0 1px 9px rgba(2,6,14,.6))}   /* text-shadow would paint over clipped text */
.actions{display:flex;flex-wrap:wrap;align-items:center;justify-content:center;gap:14px 26px;
         margin-top:6px}

.cta{
  position:relative;display:inline-flex;align-items:center;gap:13px;
  padding:15px 30px;font-size:clamp(1rem,1.3vw,1.15rem);
  font-variation-settings:'wght' 497;border-radius:999px;
  background:
    linear-gradient(180deg, rgba(6,12,22,0) 45%, rgba(6,12,22,.12) 78%,
                            rgba(6,12,22,.28) 100%),
    linear-gradient(90deg,
      rgba(244,61,151,.20) 0%,  rgba(255,236,208,.07) 22%,
      rgba(176,206,238,.03) 55%, rgba(93,189,205,.14) 100%),
    linear-gradient(90deg,
      rgba(255,255,255,.24) 0%,  rgba(255,255,255,.17) 12%,
      rgba(255,255,255,.11) 26%, rgba(255,255,255,.07) 42%,
      rgba(255,255,255,.05) 60%, rgba(255,255,255,.04) 80%,
      rgba(255,255,255,.04) 100%);
  -webkit-backdrop-filter:blur(var(--blur)) saturate(.45);
  backdrop-filter:blur(var(--blur)) saturate(.45);
  box-shadow:0 -2px 20px rgba(244,61,151,.16),
             0 0 34px rgba(93,189,205,.16),
             inset 0 1px 0 0 rgba(255,251,242,.45);
  transition:box-shadow .25s ease,transform .14s ease-out;
}
.cta::before{
  content:'';position:absolute;inset:0;border-radius:inherit;
  padding:1px;pointer-events:none;
  background:
    linear-gradient(180deg, rgba(255,252,246,.95) 0%,
        rgba(255,252,246,.20) 45%, rgba(255,252,246,0) 78%),
    linear-gradient(90deg,
      rgba(244,61,151,.95) 0%,  rgba(250,200,225,.70) 12%,
      rgba(226,230,234,.03) 32%, rgba(214,226,240,.02) 62%,
      rgba(150,220,235,.70) 90%, rgba(93,189,205,.95) 100%);
  -webkit-mask:linear-gradient(#000 0 0) content-box,linear-gradient(#000 0 0);
  -webkit-mask-composite:xor;
  mask:linear-gradient(#000 0 0) content-box,linear-gradient(#000 0 0);
  mask-composite:exclude;
}
.cta:hover{box-shadow:0 -2px 26px rgba(244,61,151,.30),0 0 44px rgba(93,189,205,.28),
           inset 0 1px 0 0 rgba(255,251,242,.55)}
.cta .arrow{width:16px;height:11px;fill:none;stroke:var(--ink);stroke-width:1.6;
            stroke-linecap:square;stroke-linejoin:miter;transition:translate .2s ease}
.cta:hover .arrow{translate:3px 0}

/* what we do: each line carries a bar in a logo colour */
.feats{display:flex;flex-wrap:wrap;justify-content:flex-end;align-self:flex-end;gap:14px clamp(22px,4vw,54px);
       margin-top:clamp(18px,4vh,48px)}
.feats li{display:flex;align-items:center;gap:11px;font-size:14.5px;color:var(--feat);
          font-variation-settings:'wght' 400;letter-spacing:-.01em}
.feats li::before{content:'';flex:none;width:14px;height:8px;border-radius:2px;background:var(--c)}
/* wide screens: pulled to the bottom-right corner, where the bars of different
   lengths line up on the right edge like a small bar chart */
@media (min-width:1200px){
  .hero{position:relative}
  .feats{position:absolute;right:var(--pad);bottom:clamp(40px,8vh,84px);margin:0;
         flex-direction:column;flex-wrap:nowrap;align-items:flex-end;gap:12px;text-align:right}
  .feats li{flex-direction:row-reverse;gap:14px}
  .feats li::before{width:var(--w);height:9px;transform-origin:right}
  .feats li:nth-child(5){margin-top:14px}
}
.rule{display:block;width:1px;height:52px;margin-top:clamp(10px,3vh,34px);
      background:linear-gradient(180deg,
        rgba(186,200,214,.70) 0%,rgba(206,220,232,.92) 52%,rgba(182,198,212,.0) 100%)}

/* ---------- sections ---------- */
.sec{padding:clamp(64px,9vw,120px) var(--pad)}
.wrap{max-width:var(--max);margin:0 auto}
.kicker{display:inline-flex;align-items:center;gap:10px;font-family:var(--mono);
        font-size:11.5px;letter-spacing:.14em;text-transform:uppercase;color:var(--feat);
        font-variation-settings:'wght' 500;margin-bottom:16px}
.kicker::before{content:'';width:26px;height:11px;border-radius:2px;background:#d90f78}
h2,.legal h1{font-size:clamp(1.75rem,3.6vw,2.9rem);line-height:1.1;letter-spacing:-.025em;
   font-weight:inherit;font-variation-settings:'wght' 600;width:fit-content;max-width:22ch;
   text-wrap:balance;padding-bottom:.14em;margin-bottom:-.14em;
   background:linear-gradient(90deg,#d90f78 0%,#d90f78 4%,var(--tip) 62%);
   -webkit-background-clip:text;background-clip:text;color:transparent}
.lead{margin-top:20px;max-width:68ch;font-size:clamp(1rem,1.25vw,1.13rem);color:var(--text)}
.lead strong{font-weight:inherit;font-variation-settings:'wght' 600;color:var(--ink)}

.card{position:relative;border-radius:10px;padding:clamp(22px,2.4vw,30px);
  background:
    linear-gradient(180deg, rgba(255,255,255,.075) 0%, rgba(255,255,255,.03) 100%),
    rgba(7,13,24,.86);
  box-shadow:0 14px 38px rgba(2,6,14,.35)}
h3{font-size:1.06rem;line-height:1.3;letter-spacing:-.005em;font-weight:inherit;
   font-variation-settings:'wght' 580;color:var(--ink)}
.card p{margin-top:10px;font-size:.95rem;color:var(--text)}
.card p + p{margin-top:12px}

.grid{display:grid;gap:18px;margin-top:clamp(30px,4vw,52px)}
.g3{grid-template-columns:repeat(3,minmax(0,1fr))}
.g2{grid-template-columns:repeat(2,minmax(0,1fr))}

.span3{grid-column:1/-1}

/* about */

.chips{display:flex;flex-wrap:wrap;gap:9px;margin-top:14px}
.chips li{display:inline-flex;align-items:center;gap:9px;padding:8px 14px;border-radius:999px;
          border:1px solid var(--line);background:rgba(255,255,255,.04);
          font-size:.88rem;color:var(--feat);font-variation-settings:'wght' 460}
.chips li::before{content:'';width:12px;height:6px;border-radius:1px;background:var(--a)}

/* technology — AI-generated queries: two modes + benefits, then the fields of a proposed query */
.aiq-grid{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:18px;margin-top:clamp(22px,3vw,34px)}
.aiq h4{font-size:1.02rem;line-height:1.3;font-weight:inherit;font-variation-settings:'wght' 580;color:var(--ink)}
.aiq .card .list{margin-top:12px}
.subsec.aiq .lead{margin-top:14px}
/* the fields that make up one proposed query */
.qfields{margin-top:18px}
.qfields dl{display:grid;grid-template-columns:repeat(4,minmax(0,1fr));gap:18px clamp(18px,3vw,36px);
            margin-top:16px}
.qfields dt{font-size:.93rem;font-variation-settings:'wght' 580;color:var(--ink)}
.qfields dd{margin-top:3px;font-size:.86rem;line-height:1.45;color:var(--text)}
@media (max-width:1020px){.qfields dl{grid-template-columns:repeat(2,minmax(0,1fr))}}
@media (max-width:520px){.qfields dl{grid-template-columns:minmax(0,1fr)}}
@media (max-width:1020px){.aiq-grid{grid-template-columns:minmax(0,1fr)}}

/* reports — copy on the left; on the right a tilted wall of small report fragments
   drifting in three columns. The fragments are screenshots on white, so in the dark
   theme they are inverted (and hue-rotated back) to sit on the page as dark cards. */
/* a sub-section inside a section (Technology > data visualisation) */
.subsec{margin-top:clamp(44px,6vw,76px);scroll-margin-top:84px}
.subhead{font-size:clamp(1.3rem,2.3vw,1.8rem);line-height:1.2;letter-spacing:-.02em;
         font-variation-settings:'wght' 600;max-width:46ch;text-wrap:balance;
         width:fit-content;padding-bottom:.14em;margin-bottom:-.14em;
         background:linear-gradient(90deg,#d90f78 0%,#d90f78 4%,var(--tip) 62%);
         -webkit-background-clip:text;background-clip:text;color:transparent}
/* the sub-heading runs across the top; the copy and the picture wall sit level below it */
.subsec.rep{row-gap:6px}
.subsec.rep > .subhead{grid-column:1/-1}
@media (min-width:901px){
  /* the copy and the picture wall both start at the same top edge, under the heading */
  .subsec.rep{align-items:start;row-gap:20px}
}
.subsec .lead{margin-top:0}
.rep{display:grid;grid-template-columns:minmax(0,.85fr) minmax(0,1.15fr);
     gap:clamp(24px,4vw,60px);align-items:center}
.rep .list{margin-top:22px}
.rep-wall{height:clamp(380px,46vw,540px);overflow:hidden;perspective:1300px;
     /* soft, eased fade on all four edges (two crossed gradients), not an oval spotlight */
     -webkit-mask-image:linear-gradient(90deg,transparent 0,rgba(0,0,0,.04) 7%,rgba(0,0,0,.16) 14%,rgba(0,0,0,.42) 22%,rgba(0,0,0,.78) 30%,#000 38%,#000 62%,rgba(0,0,0,.78) 70%,rgba(0,0,0,.42) 78%,rgba(0,0,0,.16) 86%,rgba(0,0,0,.04) 93%,transparent 100%),
                        linear-gradient(180deg,transparent 0,rgba(0,0,0,.04) 7%,rgba(0,0,0,.16) 14%,rgba(0,0,0,.42) 22%,rgba(0,0,0,.78) 30%,#000 38%,#000 62%,rgba(0,0,0,.78) 70%,rgba(0,0,0,.42) 78%,rgba(0,0,0,.16) 86%,rgba(0,0,0,.04) 93%,transparent 100%);
     -webkit-mask-composite:source-in;
             mask-image:linear-gradient(90deg,transparent 0,rgba(0,0,0,.04) 7%,rgba(0,0,0,.16) 14%,rgba(0,0,0,.42) 22%,rgba(0,0,0,.78) 30%,#000 38%,#000 62%,rgba(0,0,0,.78) 70%,rgba(0,0,0,.42) 78%,rgba(0,0,0,.16) 86%,rgba(0,0,0,.04) 93%,transparent 100%),
                        linear-gradient(180deg,transparent 0,rgba(0,0,0,.04) 7%,rgba(0,0,0,.16) 14%,rgba(0,0,0,.42) 22%,rgba(0,0,0,.78) 30%,#000 38%,#000 62%,rgba(0,0,0,.78) 70%,rgba(0,0,0,.42) 78%,rgba(0,0,0,.16) 86%,rgba(0,0,0,.04) 93%,transparent 100%);
             mask-composite:intersect}
.rep-tilt{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:14px;
     width:118%;margin:-16% 0 0 -9%;transform:rotateX(22deg) rotateZ(-9deg);transform-origin:50% 40%}
.rep-col{display:grid;gap:14px;align-content:start}
.rep-col img{display:block;width:100%;height:auto;border-radius:8px;
     box-shadow:0 10px 28px rgba(2,6,14,.35)}
[data-theme="light"] .rep-col img{box-shadow:0 8px 24px rgba(24,44,74,.14)}
@keyframes rep-drift{to{translate:0 -50%}}
@media (prefers-reduced-motion:no-preference){
  .rep-wall.run .rep-col{animation:rep-drift 30s linear infinite}
  .rep-wall.run .rep-col:nth-child(2){animation-duration:38s;animation-direction:reverse}
  .rep-wall.run .rep-col:nth-child(3){animation-duration:34s}
}
@media (max-width:900px){
  .rep{grid-template-columns:minmax(0,1fr)}
  .rep-wall{height:340px}
}

/* experience — studies per therapeutic area, as ranked bars: one series, one colour,
   the count at the end of each row. The bars grow when the section comes into view. */
.list-intro{margin-top:clamp(28px,4vw,44px);font-size:1rem;color:var(--feat);
            font-variation-settings:'wght' 520}
.lead-areas{display:grid;grid-template-columns:1.3fr 1fr 1fr;gap:14px;margin-top:14px}
.lead-areas li{display:flex;align-items:center;gap:clamp(14px,1.8vw,22px)}
.lead-areas b{flex:none;font-size:clamp(2.6rem,5vw,4rem);line-height:1;font-weight:inherit;
              font-variation-settings:'wght' 300;color:var(--ink);font-variant-numeric:tabular-nums}
.lead-areas li:first-child b{color:var(--magenta-lit)}
.lead-areas span{display:block;font-size:1rem;line-height:1.3;color:var(--feat)}
.lead-areas small{display:block;margin-top:3px;font-size:.8rem;color:var(--sub)}
.more-areas{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));grid-template-rows:repeat(var(--rows),auto);
            grid-auto-flow:column;gap:0 clamp(24px,5vw,64px);margin-top:22px}
.more-areas li{display:flex;justify-content:space-between;gap:16px;padding:11px 0;
               border-bottom:1px solid var(--line);font-size:.95rem;color:var(--feat)}
.more-areas b{font-weight:inherit;font-variation-settings:'wght' 600;color:var(--ink);
              font-variant-numeric:tabular-nums}
@media (max-width:820px){
  .lead-areas{grid-template-columns:minmax(0,1fr)}
  .more-areas{grid-template-columns:minmax(0,1fr);grid-template-rows:none;grid-auto-flow:row}
}

/* clients — a turning helix: each rung is one kind of partner (--i is its place in
   the helix, 0 to 13). One strand takes the group colour, the other stays neutral;
   a dot grows and brightens as it comes to the front. */
.helix{--amp:58px;--t:6s;margin-top:clamp(28px,4vw,44px)}
.hx-g{display:grid;grid-template-columns:minmax(0,1fr) minmax(0,1fr);align-items:center}
.hx-g h3{justify-self:end;display:flex;align-items:center;gap:12px;
  padding-right:calc(var(--amp) + 54px);text-align:right;
  font-size:clamp(1.15rem,1rem + .8vw,1.5rem);letter-spacing:-.015em}
.hx-g h3::after{content:'';flex:none;width:26px;height:11px;border-radius:2px;background:var(--a)}
.hx-g li{display:flex;align-items:center;gap:26px;height:40px;font-size:1rem;color:var(--feat)}
.rung{position:relative;flex:none;width:calc(var(--amp)*2 + 44px);height:40px;
  margin-left:calc(var(--amp)*-1 - 22px)}
.rung i{position:absolute;left:50%;top:50%}
/* resting pose (also what reduced motion shows): twelve rungs to a full turn */
.rung i:nth-child(1){width:calc(var(--amp)*2);height:1px;margin-left:calc(var(--amp)*-1);
  background:var(--a);opacity:.55;scale:calc(sin(var(--i)*30deg)) 1}
.rung i:nth-child(n+2){width:11px;height:11px;margin:-5.5px 0 0 -5.5px;border-radius:50%}
.rung i:nth-child(2){background:var(--a);translate:calc(sin(var(--i)*30deg)*var(--amp)) 0}
.rung i:nth-child(3){background:var(--ink);translate:calc(sin(var(--i)*30deg)*var(--amp)*-1) 0}
@keyframes hx-x{from{translate:calc(var(--amp)*-1) 0}to{translate:var(--amp) 0}}
@keyframes hx-w{from{scale:-1 1}to{scale:1 1}}
@keyframes hx-z{from{scale:.55;opacity:.4}to{scale:1.15;opacity:1}}
@media (prefers-reduced-motion:no-preference){
  .rung i{--dl:calc(var(--i)*var(--t)/-12);--h:calc(var(--t)/2);--e:cubic-bezier(.37,0,.63,1)}
  .rung i:nth-child(1){animation:hx-w var(--h) var(--e) var(--dl) infinite alternate}
  .rung i:nth-child(2){animation:hx-x var(--h) var(--e) var(--dl) infinite alternate,
    hx-z var(--h) var(--e) calc(var(--dl) - var(--t)/4) infinite alternate}
  .rung i:nth-child(3){animation:hx-x var(--h) var(--e) var(--dl) infinite alternate-reverse,
    hx-z var(--h) var(--e) calc(var(--dl) - var(--t)/4) infinite alternate-reverse}
}
@media (max-width:700px){
  .helix{--amp:26px}
  .hx-g{grid-template-columns:minmax(0,1fr)}
  .hx-g h3{justify-self:start;flex-direction:row-reverse;padding:0;margin:18px 0 6px}
  .hx-g li{gap:14px;height:36px}
  .rung{margin-left:0;width:calc(var(--amp)*2 + 16px);height:36px}
}

/* services */
.list{margin-top:14px;display:grid;gap:7px}
.list li{position:relative;padding-left:18px;font-size:.92rem;line-height:1.45;color:var(--text)}
.list li::before{content:'';position:absolute;left:1px;top:.5em;width:6px;height:6px;
   border-right:1.5px solid var(--a);border-top:1.5px solid var(--a);rotate:45deg}
.wide{display:grid;grid-template-columns:minmax(0,1fr) minmax(0,1.25fr);gap:clamp(20px,4vw,56px);
      align-items:start}
.wide .list{grid-template-columns:repeat(2,minmax(0,1fr));gap:9px 26px;margin-top:4px}

/* technology — security diagram (concentric layers) */
.arch{display:grid;grid-template-columns:minmax(0,440px) minmax(0,1fr);
      gap:clamp(24px,4vw,60px);align-items:center;margin-top:26px}
.rings{display:block;width:100%;height:auto;overflow:visible}
.rings .ring{fill:color-mix(in srgb,var(--c) 9%,transparent);stroke:var(--c);
             stroke-width:1.2;stroke-opacity:.75}
.rings .core{fill:color-mix(in srgb,var(--c) 22%,transparent);stroke-width:1.6;stroke-opacity:1}
.rings text{font-family:var(--mono);font-size:11px;letter-spacing:.14em;text-transform:uppercase;
            fill:var(--c)}
.rings .way{fill:none;stroke:var(--c);stroke-width:1.8;stroke-linecap:round}
.rings .lock{fill:none;stroke:var(--ink);stroke-width:1.6;stroke-linecap:round;stroke-linejoin:round}
.a-legend{display:grid;gap:15px}
.a-tag{margin-top:4px;font-family:var(--mono);font-size:10.5px;letter-spacing:.14em;
       text-transform:uppercase;color:var(--sub)}
.arch .a-note{margin-top:-9px;font-size:.86rem;color:var(--sub)}
.a-item{position:relative;padding-left:24px}
.a-item::before{content:'';position:absolute;left:0;top:.36em;width:11px;height:11px;
       border-radius:50%;border:1.5px solid var(--c);
       background:color-mix(in srgb,var(--c) 32%,transparent)}
.a-item b{display:block;font-size:.97rem;line-height:1.35;font-weight:inherit;
          font-variation-settings:'wght' 580;color:var(--ink)}
.a-item span{display:block;margin-top:2px;font-size:.88rem;line-height:1.5;color:var(--text)}
.a-paths{display:grid;gap:8px;margin-top:4px;padding-top:15px;border-top:1px solid var(--line);
         font-size:.86rem;line-height:1.45;color:var(--text)}
.a-paths li{display:flex;gap:11px;align-items:flex-start}
.a-paths i{flex:none;width:22px;margin-top:.62em;border-top:2px solid var(--c)}
.a-paths li + li i{border-top-style:dashed}
.a-paths strong{font-weight:inherit;font-variation-settings:'wght' 580;color:var(--ink)}
@media (max-width:820px){
  .arch{grid-template-columns:minmax(0,1fr)}
  .rings{max-width:420px;margin:0 auto}
}

/* technology — security diagram (traffic flow) */
.flowd-h{margin-top:clamp(26px,3vw,38px);padding-top:clamp(22px,2.6vw,30px);
         border-top:1px solid var(--line);font-family:var(--mono);font-size:10.5px;
         letter-spacing:.14em;text-transform:uppercase;color:var(--sub)}
.flowd{display:grid;grid-template-columns:minmax(0,1fr) minmax(170px,230px);
       column-gap:clamp(14px,2vw,26px);margin-top:18px}
.flowd p{margin-top:5px;font-size:.9rem;max-width:62ch}
.a-node{display:flex;align-items:center;gap:12px;padding:12px 18px 12px 14px;border-radius:8px;
        border:1px solid var(--line);background:rgba(255,255,255,.05)}
.a-node svg{flex:none;width:24px;height:24px;fill:none;stroke:var(--a);stroke-width:1.5;
            stroke-linecap:round;stroke-linejoin:round}
.a-node b{display:block;font-size:.95rem;line-height:1.3;font-weight:inherit;
          font-variation-settings:'wght' 580;color:var(--ink)}
.a-node span{display:block;font-size:.8rem;color:var(--sub)}
.a-vis{grid-area:1/1;justify-self:start;--a:var(--magenta-lit)}
.a-adm{grid-area:1/2;--a:var(--amber)}
.a-flow{display:flex;align-items:center;gap:14px;min-height:46px;margin-left:25px;
        font-family:var(--mono);font-size:10.5px;letter-spacing:.12em;text-transform:uppercase;
        color:var(--feat)}
.a-flow i{position:relative;align-self:stretch;width:2px;background:var(--a);opacity:.85}
.a-flow i::after{content:'';position:absolute;left:50%;bottom:1px;width:8px;height:8px;
        border-right:2px solid var(--a);border-bottom:2px solid var(--a);
        translate:-50% 0;rotate:45deg}
.a-f1{grid-area:2/1;--a:var(--magenta-lit)}
.a-f2{grid-area:4/1;--a:var(--sky)}
.a-side{grid-area:2/2/5/3;flex-direction:column;gap:8px;margin-left:0;text-align:center;--a:var(--amber)}
.a-side i{flex:1;align-self:center;min-height:14px}
.a-side i:first-child::after{display:none}
.a-zone{border-radius:9px;padding:clamp(16px,2vw,22px);
        border:1px solid color-mix(in srgb,var(--a) 48%,transparent);
        background:color-mix(in srgb,var(--a) 8%,transparent)}
.a-edge{grid-area:3/1;--a:var(--magenta-lit)}
.a-core{grid-area:5/1/6/-1;--a:var(--sky)}
.f-tag{font-family:var(--mono);font-size:10.5px;letter-spacing:.14em;text-transform:uppercase;
       color:var(--a)}
.a-zone h4{margin-top:4px;font-size:1.02rem;line-height:1.3;font-weight:inherit;
           font-variation-settings:'wght' 600;color:var(--ink)}
.a-row{display:grid;grid-template-columns:minmax(0,1.3fr) auto minmax(0,1fr) auto minmax(0,1fr);
       align-items:stretch;gap:12px;margin-top:16px}
.a-box{border-radius:7px;padding:15px 16px;border:1px solid var(--line);background:rgba(7,13,24,.55)}
.a-box h5{font-size:.93rem;font-weight:inherit;font-variation-settings:'wght' 580;color:var(--ink)}
.a-box .list{margin-top:9px}
.a-box .list li{font-size:.86rem}
.a-arrow{position:relative;align-self:center;width:24px;height:2px;background:var(--a);opacity:.85}
.a-arrow::after{content:'';position:absolute;right:1px;top:50%;width:8px;height:8px;
        border-right:2px solid var(--a);border-top:2px solid var(--a);
        translate:0 -50%;rotate:45deg}
@media (max-width:820px){
  .flowd{grid-template-columns:minmax(0,1fr)}
  .flowd > *{grid-area:auto}
  .a-side{order:1;flex-direction:row;gap:14px;text-align:left;margin-left:25px}
  .a-side i{flex:none;align-self:stretch}
  .a-side i:last-child{display:none}
  .a-side i:first-child::after{display:block;bottom:auto;top:1px;rotate:225deg}
  .a-adm{order:2;justify-self:start}
  .a-row{grid-template-columns:minmax(0,1fr)}
  .a-arrow{justify-self:center;width:2px;height:22px}
  .a-arrow::after{right:auto;left:50%;top:auto;bottom:1px;translate:-50% 0;rotate:135deg}
}

/* technology — traffic-flow diagram in motion (opt-in with .sec-anim; starts when the card
   is revealed). A packet of user traffic runs layer by layer. One 6s cycle (--cy) keeps the
   steps in phase: each step starts at its own fraction of it. */
.sec-anim{--cy:6s}
@keyframes sa-down{0%{top:0;opacity:0}2%{opacity:1}12%{top:100%;opacity:1}15%,100%{top:100%;opacity:0}}
@keyframes sa-right{0%{left:0;opacity:0}2%{opacity:1}12%{left:100%;opacity:1}15%,100%{left:100%;opacity:0}}
@keyframes sa-left{0%{left:100%;opacity:0}2%{opacity:1}12%{left:0;opacity:1}15%,100%{left:0;opacity:0}}
@keyframes sa-side{0%{top:0;opacity:0}5%{opacity:1}25%{top:100%;opacity:1}30%,100%{top:100%;opacity:0}}
@keyframes sa-glow{0%,15%,100%{opacity:0}6%{opacity:1}}
@keyframes sa-pop{from{opacity:0;translate:0 6px}}
@media (prefers-reduced-motion:no-preference){
  /* traffic flow: a glowing dot runs down each line, each layer lights up as it arrives */
  .sec-anim .a-flow i::before,.sec-anim .a-arrow::before{content:'';position:absolute;
    width:7px;height:7px;border-radius:50%;translate:-50% -50%;opacity:0;
    background:color-mix(in srgb,var(--a) 45%,var(--ink));
    box-shadow:0 0 10px 2px color-mix(in srgb,var(--a) 70%,transparent)}
  .sec-anim .a-flow i::before{left:50%;top:0}
  .sec-anim .a-arrow::before{top:50%;left:0}
  /* the glow sits on a pseudo-element so only its opacity animates: no repaint of the box */
  .sec-anim .a-edge,.sec-anim .a-box{position:relative}
  .sec-anim .a-edge::after,.sec-anim .a-box::after{content:'';position:absolute;inset:0;
    border-radius:inherit;pointer-events:none;opacity:0;
    box-shadow:0 0 0 1px color-mix(in srgb,var(--a) 80%,transparent),
               0 0 26px -2px color-mix(in srgb,var(--a) 50%,transparent)}
  .sec-anim.in .a-f1 i::before{animation:sa-down var(--cy) ease-in-out 1s infinite}
  .sec-anim.in .a-edge::after{animation:sa-glow var(--cy) ease-out calc(1s + var(--cy)*.12) infinite}
  .sec-anim.in .a-f2 i::before{animation:sa-down var(--cy) ease-in-out calc(1s + var(--cy)*.24) infinite}
  .sec-anim.in .a-box:nth-child(1)::after{animation:sa-glow var(--cy) ease-out calc(1s + var(--cy)*.36) infinite}
  .sec-anim.in .a-arrow:nth-child(2)::before{animation:sa-right var(--cy) ease-in-out calc(1s + var(--cy)*.46) infinite}
  .sec-anim.in .a-box:nth-child(3)::after{animation:sa-glow var(--cy) ease-out calc(1s + var(--cy)*.56) infinite}
  .sec-anim.in .a-arrow:nth-child(4)::before{animation:sa-right var(--cy) ease-in-out calc(1s + var(--cy)*.66) infinite}
  .sec-anim.in .a-box:nth-child(5)::after{animation:sa-glow var(--cy) ease-out calc(1s + var(--cy)*.76) infinite}
  /* administrators' channel runs on its own loop */
  .sec-anim.in .a-side i::before{animation:sa-side 4s ease-in-out 1.5s infinite}
  .sec-anim.in .a-side i:last-child::before{animation-delay:2.5s}
  .sec-anim.in .chips li{animation:sa-pop .5s cubic-bezier(.2,.7,.3,1) .5s backwards}
  .sec-anim.in .chips li:nth-child(2){animation-delay:.6s}
  .sec-anim.in .chips li:nth-child(3){animation-delay:.7s}
  .sec-anim.in .chips li:nth-child(4){animation-delay:.8s}
}
@media (prefers-reduced-motion:no-preference) and (max-width:820px){
  /* arrows turn vertical, and the admins' arrow points up */
  .sec-anim .a-arrow::before{left:50%;top:0}
  .sec-anim.in .a-arrow:nth-child(2)::before,
  .sec-anim.in .a-arrow:nth-child(4)::before{animation-name:sa-down}
  .sec-anim.in .a-side i::before{animation-direction:reverse}
}

/* contact */
.contact{display:grid;grid-template-columns:minmax(0,1.1fr) minmax(0,.9fr);
         gap:clamp(26px,5vw,72px);align-items:center}
.contact .actions{justify-content:flex-start;margin-top:30px}
.info{display:grid;gap:20px;justify-self:end}
.info small{display:block;font-size:.74rem;letter-spacing:.16em;text-transform:uppercase;
            color:var(--sub);margin-bottom:2px}
.info p,.info a{margin:0;font-size:1rem;color:var(--ink);line-height:1.5}
.info p.sm{font-size:.86rem}
.info a:hover{text-decoration:underline;text-underline-offset:4px}

/* footer */
.foot{padding:18px var(--pad) calc(env(safe-area-inset-bottom) + 18px);
      border-top:1px solid var(--line);background:rgba(4,8,15,.72);
      -webkit-backdrop-filter:blur(18px);backdrop-filter:blur(18px)}
.foot::before{content:'';position:absolute;left:0;right:0;top:-1px;height:1px;
      background:linear-gradient(90deg,#d90f78 0%,rgba(217,15,120,0) 62%)}
.foot .wrap{display:flex;flex-wrap:wrap;align-items:center;justify-content:space-between;
            gap:14px 30px;font-size:.86rem;color:var(--sub)}
/* small logo + tagline, kept together */
.sig{display:flex;align-items:center;gap:14px;text-align:right}
.sig img{display:block;height:42px;width:auto;flex:none}
/* one band of light crosses the tagline and then runs on into the small logo:
   the tagline and the logo layer (.sig::after, covering the whole .sig) share the
   same left edge, so the band uses the same px position and timing in both */
.sig::after{background-image:linear-gradient(105deg,rgba(255,255,255,0) 30%,rgba(255,255,255,.9) 50%,rgba(255,255,255,0) 70%);
      background-position:-140px 0;background-size:120px 100%;
      -webkit-mask-position:right center;mask-position:right center;
      -webkit-mask-size:auto 42px;mask-size:auto 42px}
/* tagline: metal running left to right, with the band of light passing through it */
.tagline{font-size:.86rem;line-height:1.3;letter-spacing:.01em;
      font-variation-settings:'wght' 560;padding-bottom:.14em;margin-bottom:-.14em;
      background:
        linear-gradient(105deg,rgba(255,255,255,0) 30%,#fff 50%,rgba(255,255,255,0) 70%)
          -140px 0/120px 100% no-repeat,
        var(--metal);
      -webkit-background-clip:text;background-clip:text;color:transparent}
/* a single sweep, started when the footer comes into view */
@keyframes shine{from{background-position:-140px 0,0 0}to{background-position:460px 0,0 0}}
@keyframes shine-sig{from{background-position:-140px 0}to{background-position:460px 0}}
@media (prefers-reduced-motion:no-preference){
  .tagline.in{animation:shine 4s cubic-bezier(.45,0,.55,1) .4s}
  .sig:has(.tagline.in)::after{animation:shine-sig 4s cubic-bezier(.45,0,.55,1) .4s}
}

/* ---------- scroll reveal (only when JS is running) ---------- */
.js .rv{opacity:0;translate:0 20px;
        transition:opacity .55s cubic-bezier(.25,.8,.35,1) var(--d,0s),
                   translate .55s cubic-bezier(.16,1,.3,1) var(--d,0s)}
.js .rv.in{opacity:1;translate:0 0}

/* ---------- entrance sequence (hero) ---------- */
@media (prefers-reduced-motion:no-preference){
  :root{--ent-line:cubic-bezier(.16,1,.3,1);--ent-soft:cubic-bezier(.25,.8,.35,1);--rise:10px}
  @keyframes en-wipe{
    from{clip-path:inset(-.2em 0 100% 0);translate:0 var(--rise)}
    to  {clip-path:inset(-.2em 0 -.3em 0);translate:0 0}}
  @keyframes en-lift{from{opacity:0;translate:0 var(--rise)}}
  @keyframes en-draw{from{scale:1 0}}
  @keyframes en-grow{from{scale:0 1}}
  html:not(.is-entered) .brand{animation:en-lift .60s var(--ent-soft) .12s backwards}
  html:not(.is-entered) .menu a:nth-child(1){animation:en-lift .55s var(--ent-soft) .20s backwards}
  html:not(.is-entered) .menu a:nth-child(2){animation:en-lift .55s var(--ent-soft) .25s backwards}
  html:not(.is-entered) .menu a:nth-child(3){animation:en-lift .55s var(--ent-soft) .30s backwards}
  html:not(.is-entered) .menu a:nth-child(4){animation:en-lift .55s var(--ent-soft) .35s backwards}
  html:not(.is-entered) .menu a:nth-child(5){animation:en-lift .55s var(--ent-soft) .40s backwards}
  html:not(.is-entered) .menu a:nth-child(6){animation:en-lift .55s var(--ent-soft) .45s backwards}
  
  html:not(.is-entered) .langs,
  html:not(.is-entered) .theme,
  html:not(.is-entered) .burger{animation:en-lift .60s var(--ent-soft) .40s backwards}
  html:not(.is-entered) .eyebrow{animation:en-lift .60s var(--ent-soft) .26s backwards}
  html:not(.is-entered) #h1a{animation:en-wipe .95s var(--ent-line) .34s backwards}
  html:not(.is-entered) #h1b{animation:en-wipe .95s var(--ent-line) .44s backwards}
  html:not(.is-entered) .sub{animation:en-lift .70s var(--ent-soft) .76s backwards}
  html:not(.is-entered) .ai-badge{animation:en-lift .60s var(--ent-soft) .88s backwards}
  html:not(.is-entered) .hero .actions{animation:en-lift .80s var(--ent-line) .94s backwards}
  html:not(.is-entered) .feats li{animation:en-lift .55s var(--ent-soft) calc(.98s + var(--i)*.05s) backwards}
  html:not(.is-entered) .feats li::before{animation:en-grow .50s var(--ent-line) calc(1s + var(--i)*.05s) backwards}
  html:not(.is-entered) .rule{animation:en-draw .55s var(--ent-line) 1.34s backwards;transform-origin:top}
}

/* ---------- tablet / phone ---------- */
@media (max-width:1020px){
  .g3{grid-template-columns:repeat(2,minmax(0,1fr))}
  .wide,.contact{grid-template-columns:minmax(0,1fr)}
  .info{justify-self:start}
}
@media (max-width:900px){
  .brand img{height:48px}
  .burger{display:inline-flex;align-items:center;justify-content:center;position:relative;
    width:24px;height:36px;border-radius:6px;cursor:pointer}
  .burger::after{content:'';position:absolute;left:50%;top:50%;
    transform:translate(-50%,-50%);width:max(44px,100%);height:max(44px,100%)}
  .burger svg{width:21px;height:auto;fill:none;stroke:var(--nav);stroke-width:1.4;
              stroke-linecap:round}
  .burger svg path{transform-box:fill-box;transform-origin:center;
                   transition:transform .24s ease,opacity .18s ease}
  .navtoggle:focus-visible ~ .burger{outline:2px solid #9fe0ff;outline-offset:3px}
  .navtoggle:checked ~ .burger .b1{transform:translateY(6px) rotate(45deg)}
  .navtoggle:checked ~ .burger .b2{opacity:0}
  .navtoggle:checked ~ .burger .b3{transform:translateY(-6px) rotate(-45deg)}
  .scrim{position:fixed;inset:0;z-index:-1}
  .navtoggle:checked ~ .scrim{display:block}

  .navpanel{position:absolute;top:calc(100% + 8px);right:var(--pad);
    flex-direction:column;align-items:stretch;gap:2px;
    width:min(300px, 82vw);padding:14px;border-radius:22px;
    background:
      linear-gradient(180deg, rgba(255,255,255,.10) 0%, rgba(255,255,255,.045) 100%),
      linear-gradient(90deg, rgba(244,61,151,.07) 0%, rgba(93,189,205,.07) 100%),
      linear-gradient(180deg, rgba(6,12,22,.82) 0%, rgba(6,12,22,.9) 100%);
    -webkit-backdrop-filter:blur(var(--blur)) saturate(.45);
    backdrop-filter:blur(var(--blur)) saturate(.45);
    box-shadow:0 14px 38px rgba(2,6,14,.45);
    opacity:0;visibility:hidden;transform:translateY(-8px) scale(.985);
    transform-origin:100% 0;pointer-events:none;
    transition:opacity .14s ease-out,transform .14s ease-out,visibility 0s .14s}   /* exit: quick */
  .navtoggle:checked ~ .navpanel{opacity:1;visibility:visible;transform:none;
    pointer-events:auto;
    transition:opacity .2s cubic-bezier(.23,1,.32,1),transform .2s cubic-bezier(.23,1,.32,1),visibility 0s}
  .menu{flex-direction:column;align-items:stretch;gap:2px}
  .menu a{display:flex;align-items:center;min-height:44px;padding:11px 14px;
    border-radius:13px;font-size:16px;opacity:1;transition:background .15s ease,transform .14s ease-out}
  .menu a{border-radius:3px}

  .theme{margin:6px 0 4px 12px}
  /* in the phone panel the language list opens in place, under its button */
  .langs summary{display:flex;justify-content:space-between;min-height:44px;padding:11px 14px;font-size:16px;opacity:1}
  .langs ul{position:static;display:flex;flex-wrap:wrap;gap:2px;min-width:0;padding:2px 2px 6px;
       border:0;border-radius:0;background:none;box-shadow:none;
       -webkit-backdrop-filter:none;backdrop-filter:none}
  .langs a{padding:9px 12px;font-size:15px}
}
@media (max-width:640px){
  .g3,.g2{grid-template-columns:minmax(0,1fr)}

  .wide .list{grid-template-columns:minmax(0,1fr)}
  .hero{padding-top:104px}  .eyebrow{font-size:10.5px;letter-spacing:.14em;white-space:nowrap}
  .ai-badge{white-space:normal}
  .feats{display:grid;grid-template-columns:repeat(2,max-content);gap:14px 22px;align-self:flex-start}
  .feats li{font-size:13.5px}
  .veil{background:
    radial-gradient(130% 44% at 50% 45%,
        rgba(var(--veil),.44) 0%, rgba(var(--veil),.22) 55%, rgba(var(--veil),0) 100%),
    linear-gradient(180deg, rgba(var(--veil),.50) 0%, rgba(var(--veil),0) 20%,
        rgba(var(--veil),0) 60%, rgba(var(--veil),.40) 100%),
    rgba(var(--veil), calc(var(--base) + var(--dim)*.40))}
  .foot .wrap{flex-direction:column;align-items:flex-start}
}

/* footer: legal links beside the copyright */
.foot-left{display:flex;flex-wrap:wrap;align-items:center;gap:6px 18px}
.foot-links{display:flex;flex-wrap:wrap;gap:4px 16px}
.foot-links a{color:var(--sub);border-bottom:1px solid transparent;transition:color .15s ease,border-color .15s ease}
.foot-links a:hover,.foot-links a[aria-current]{color:var(--ink);border-bottom-color:var(--hair)}

/* legal pages: plain prose under the fixed header */
.legal-sec{padding-top:calc(84px + clamp(40px,6vw,80px))}
.legal{max-width:72ch}
.legal h2{margin-top:40px;font-size:1.3rem;line-height:1.3;letter-spacing:-.01em;font-weight:inherit;
          font-variation-settings:'wght' 600;color:var(--ink);background:none;-webkit-text-fill-color:currentColor}
.legal h3{margin-top:22px;font-size:1.02rem}
.legal p,.legal li{margin-top:10px;font-size:1rem;line-height:1.6;color:var(--text)}
.legal ul{padding-left:20px;margin-top:4px}
.legal li{list-style:disc;margin-top:6px}
.legal strong{font-weight:inherit;font-variation-settings:'wght' 600;color:var(--ink)}
.legal p a,.legal li a{color:var(--ink);text-decoration:underline;text-underline-offset:3px;text-decoration-color:var(--hair)}
.legal p a:hover,.legal li a:hover{text-decoration-color:var(--ink)}

/* ---------- off-screen loops are paused (the .vis class comes from the observer in main.js) ---------- */
.js :is(.helix,.rep-wall,.sec-anim):not(.vis) *,
.js :is(.helix,.rep-wall,.sec-anim):not(.vis) *::before,
.js :is(.helix,.rep-wall,.sec-anim):not(.vis) *::after{animation-play-state:paused}

/* ---------- reduced motion ---------- */
@media (prefers-reduced-motion:reduce){
  html{scroll-behavior:auto}
  *,*::before,*::after{animation:none!important}
  .js .rv{opacity:1;translate:none;transition:none}
  /* keep the fades (opacity, colour); drop everything that moves */
  .totop{translate:0 0}
  .navpanel{transform:none!important}
  .cta:hover .arrow{translate:0}
  .burger svg path{transition:opacity .18s ease}
  .langs summary svg{transition:none}
  .cta:active,.theme:active,.totop:active,.ai-badge:active,.langs summary:active,.langs a:active,
  .menu a:active{transform:none}
}
/* ---------- light theme (html[data-theme="light"], chosen with the header switch) ---------- */
html[data-theme="light"]{
  --ink:#101a2b;  --sub:#5b6779;  --nav:#162134;  --foot:#1c2738;
  --text:#3b4759; --hair:rgba(24,44,74,.42);      --line:rgba(24,44,74,.14);
  --chev:rgba(24,44,74,.78);      --feat:#263348;
  --veil:243,246,250;  --tip:#101a2b;  --sub-a:#3b4759;
  /* accents darkened so they hold up on a pale ground */
  --magenta-lit:#d80f77; --cyan:#1d8ea3; --lime:#5c9710; --sky:#1976c0; --amber:#a87400;
  --metal:linear-gradient(90deg,#2a3340 0%,#727d8c 26%,#3a4552 50%,#7a8492 74%,#2f3946 100%);
  background:#f3f6fa;
}
[data-theme="light"] .stage{background:#e6ebf2}
[data-theme="light"] .art{filter:none!important}
[data-theme="light"] .art.inv{filter:invert(1) hue-rotate(180deg)!important}
[data-theme="light"] .veil{background:
    linear-gradient(180deg, rgba(var(--veil),.55) 0%, rgba(var(--veil),0) 24%,
        rgba(var(--veil),0) 62%, rgba(var(--veil),.40) 100%),
    rgba(var(--veil), calc(.76 + var(--dim)*.15))}
[data-theme="light"] a:focus-visible,
[data-theme="light"] .theme:focus-visible{outline-color:#1976c0}
[data-theme="light"] .bar::before{background:rgba(255,255,255,.80)}
[data-theme="light"] .theme .sun{display:none}
[data-theme="light"] .theme .moon{display:block}
[data-theme="light"] .theme:hover{background:rgba(24,44,74,.07)}
[data-theme="light"] .totop{background:rgba(255,255,255,.82)}
[data-theme="light"] .totop:hover{background:#d90f78}
[data-theme="light"] .sub{filter:drop-shadow(0 1px 10px rgba(255,255,255,.85))}
[data-theme="light"] .cta{
  background:linear-gradient(90deg, rgba(244,61,151,.16) 0%, rgba(255,255,255,.74) 28%,
      rgba(255,255,255,.74) 72%, rgba(93,189,205,.24) 100%);
  box-shadow:0 -2px 20px rgba(244,61,151,.14),0 0 34px rgba(93,189,205,.20),
             0 8px 22px rgba(24,44,74,.10)}
[data-theme="light"] .cta::before{background:
    linear-gradient(90deg, rgba(216,15,119,.95) 0%, rgba(216,15,119,.35) 14%,
      rgba(24,44,74,.16) 34%, rgba(24,44,74,.16) 64%,
      rgba(29,142,163,.40) 88%, rgba(29,142,163,.95) 100%)}
[data-theme="light"] .cta:hover{box-shadow:0 -2px 26px rgba(244,61,151,.26),
    0 0 44px rgba(93,189,205,.32),0 8px 22px rgba(24,44,74,.12)}

[data-theme="light"] .rule{background:linear-gradient(180deg,
    rgba(24,44,74,.45) 0%,rgba(24,44,74,.60) 52%,rgba(24,44,74,0) 100%)}
[data-theme="light"] .card{
  background:linear-gradient(180deg, rgba(255,255,255,.94) 0%, rgba(255,255,255,.86) 100%);
  box-shadow:0 14px 38px rgba(24,44,74,.10)}
[data-theme="light"] .chips li{background:rgba(255,255,255,.62)}

[data-theme="light"] .a-node{background:rgba(255,255,255,.66)}
[data-theme="light"] .a-box{background:rgba(255,255,255,.72)}
[data-theme="light"] .foot{background:rgba(255,255,255,.80)}
[data-theme="light"] .langs ul{background:rgba(255,255,255,.96);box-shadow:0 14px 38px rgba(24,44,74,.18)}
[data-theme="light"] .langs summary:focus-visible{outline-color:#1976c0}
@media (max-width:900px){
  [data-theme="light"] .langs ul{background:none;box-shadow:none}
  [data-theme="light"] .navpanel{
    background:
      linear-gradient(90deg, rgba(244,61,151,.06) 0%, rgba(93,189,205,.08) 100%),
      rgba(255,255,255,.94);
    box-shadow:0 14px 38px rgba(24,44,74,.18)}

}

/* ---------- right-to-left pages (html[dir="rtl"], the Arabic version) ----------
   Flex and grid already mirror with the text direction; this block mirrors what is set with
   explicit left/right values, turns the arrows round, and sets the type for Arabic script. */
[dir="rtl"] body{font-family:'Segoe UI','Noto Sans Arabic','Geeza Pro',Tahoma,Arial,sans-serif;line-height:1.75}
[dir="rtl"] *{letter-spacing:0!important}          /* spacing breaks joined letters */
[dir="rtl"] :is(h1,h2,h3,h4,dt,strong,.title,.subhead,.tagline,.lead-areas span){font-weight:700}
[dir="rtl"] :is(.title,h2,.subhead){line-height:1.35}
[dir="rtl"]{--fade:linear-gradient(270deg,#d90f78 0%,var(--tip) 88%,var(--tip) 100%);
            --mono:'Segoe UI','Noto Sans Arabic',Tahoma,Arial,sans-serif}   /* the mono face has no Arabic */
[dir="rtl"] .title,[dir="rtl"] .sub{text-align:right}
[dir="rtl"] #h1a{background-image:linear-gradient(270deg,#d90f78 0%,#d90f78 35%,var(--tip) 100%)}
[dir="rtl"] .sub{background-image:linear-gradient(270deg,var(--sub-a),var(--tip))}
[dir="rtl"] :is(h2,.subhead){background-image:linear-gradient(270deg,#d90f78 0%,#d90f78 4%,var(--tip) 62%)}
[dir="rtl"] .legal h2{background:none}             /* prose headings stay plain on the legal page */
[dir="rtl"] .bar::after{background:linear-gradient(90deg,#d90f78 0%,rgba(217,15,120,0) 62%)}
[dir="rtl"] .foot::before{background:linear-gradient(270deg,#d90f78 0%,rgba(217,15,120,0) 62%)}
[dir="rtl"] .sig{text-align:left}
[dir="rtl"] .sig::after{background-image:linear-gradient(75deg,rgba(255,255,255,0) 30%,rgba(255,255,255,.9) 50%,rgba(255,255,255,0) 70%);
      background-position:right -140px top 0;-webkit-mask-position:left center;mask-position:left center}
[dir="rtl"] .tagline{background-image:linear-gradient(75deg,rgba(255,255,255,0) 30%,#fff 50%,rgba(255,255,255,0) 70%),var(--metal);
      background-position:right -140px top 0,0 0}
@keyframes shine-rtl{from{background-position:right -140px top 0,0 0}to{background-position:right 460px top 0,0 0}}
@keyframes shine-sig-rtl{from{background-position:right -140px top 0}to{background-position:right 460px top 0}}
@media (prefers-reduced-motion:no-preference){
  [dir="rtl"] .tagline.in{animation-name:shine-rtl}
  [dir="rtl"] .sig:has(.tagline.in)::after{animation-name:shine-sig-rtl}
}
[dir="rtl"] .langs[open] ul{transform-origin:0 0}
[dir="rtl"] .totop{right:auto;left:max(20px,env(safe-area-inset-left))}
[dir="rtl"] .totop::after{right:auto;left:calc(100% + 10px)}
[dir="rtl"] .cta .arrow{scale:-1 1}
[dir="rtl"] .cta:hover .arrow{translate:-3px 0}
[dir="rtl"] .list li{padding-left:0;padding-right:18px}
[dir="rtl"] .list li::before{left:auto;right:1px;rotate:225deg}
[dir="rtl"] .a-item{padding-left:0;padding-right:24px}
[dir="rtl"] .a-item::before{left:auto;right:0}
[dir="rtl"] .a-flow{margin-left:0;margin-right:25px}
[dir="rtl"] .a-side{margin-right:0}
[dir="rtl"] .rings{direction:ltr}                   /* the drawing keeps its own coordinates */
[dir="rtl"] .hx-g h3{padding-right:0;padding-left:calc(var(--amp) + 54px);text-align:left}
[dir="rtl"] .rung{margin-left:0;margin-right:calc(var(--amp)*-1 - 22px)}
@media (min-width:1200px){
  [dir="rtl"] .feats{right:auto;left:var(--pad);text-align:left}
  [dir="rtl"] .feats li::before{transform-origin:left}
}
@media (min-width:821px){
  [dir="rtl"] .a-arrow::after{right:auto;left:1px;rotate:225deg}
}
@media (prefers-reduced-motion:no-preference) and (min-width:821px){
  [dir="rtl"] .sec-anim.in .a-arrow:nth-child(2)::before,
  [dir="rtl"] .sec-anim.in .a-arrow:nth-child(4)::before{animation-name:sa-left}
}
@media (max-width:900px){
  [dir="rtl"] .navpanel{right:auto;left:var(--pad);transform-origin:0 0}
  [dir="rtl"] .theme{margin:6px 12px 4px 0}
  [dir="rtl"] .hx-g h3{padding:0}
  [dir="rtl"] .rung{margin-right:0}
}
@media (max-width:820px){
  [dir="rtl"] .a-side{text-align:right;margin-left:0;margin-right:25px}
}