@font-face{font-family:"Outfit";font-style:normal;font-display:swap;font-weight:100 900;src:url(fonts/outfit-latin-wght-normal.woff2) format("woff2");unicode-range:U+0000-00FF,U+0131,U+0152-0153,U+02BB-02BC,U+02C6,U+02DA,U+02DC,U+0304,U+0308,U+0329,U+2000-206F,U+20AC,U+2122,U+2191,U+2193,U+2212,U+2215,U+FEFF,U+FFFD}
@font-face{font-family:"DM Sans";font-style:normal;font-display:swap;font-weight:100 1000;src:url(fonts/dm-sans-latin-opsz-normal.woff2) format("woff2");unicode-range:U+0000-00FF,U+0131,U+0152-0153,U+02BB-02BC,U+02C6,U+02DA,U+02DC,U+0304,U+0308,U+0329,U+2000-206F,U+20AC,U+2122,U+2191,U+2193,U+2212,U+2215,U+FEFF,U+FFFD}
@font-face{font-family:"DM Sans";font-style:normal;font-display:swap;font-weight:100 1000;src:url(fonts/dm-sans-latin-ext-opsz-normal.woff2) format("woff2");unicode-range:U+0100-02BA,U+02BD-02C5,U+02C7-02CC,U+02CE-02D7,U+02DD-02FF,U+0304,U+0308,U+0329,U+1D00-1DBF,U+1E00-1E9F,U+1EF2-1EFF,U+2020,U+20A0-20AB,U+20AD-20C0,U+2113,U+2C60-2C7F,U+A720-A7FF}
@font-face{font-family:"IBM Plex Mono";font-style:normal;font-display:swap;font-weight:400;src:url(fonts/ibm-plex-mono-latin-400-normal.woff2) format("woff2");unicode-range:U+0000-00FF,U+0131,U+0152-0153,U+02BB-02BC,U+02C6,U+02DA,U+02DC,U+0304,U+0308,U+0329,U+2000-206F,U+20AC,U+2122,U+2191,U+2193,U+2212,U+2215,U+FEFF,U+FFFD}
@font-face{font-family:"IBM Plex Mono";font-style:normal;font-display:swap;font-weight:400;src:url(fonts/ibm-plex-mono-latin-ext-400-normal.woff2) format("woff2");unicode-range:U+0100-02BA,U+02BD-02C5,U+02C7-02CC,U+02CE-02D7,U+02DD-02FF,U+0304,U+0308,U+0329,U+1D00-1DBF,U+1E00-1E9F,U+1EF2-1EFF,U+2020,U+20A0-20AB,U+20AD-20C0,U+2113,U+2C60-2C7F,U+A720-A7FF}
@font-face{font-family:"IBM Plex Mono";font-style:normal;font-display:swap;font-weight:500;src:url(fonts/ibm-plex-mono-latin-500-normal.woff2) format("woff2");unicode-range:U+0000-00FF,U+0131,U+0152-0153,U+02BB-02BC,U+02C6,U+02DA,U+02DC,U+0304,U+0308,U+0329,U+2000-206F,U+20AC,U+2122,U+2191,U+2193,U+2212,U+2215,U+FEFF,U+FFFD}
@font-face{font-family:"IBM Plex Mono";font-style:normal;font-display:swap;font-weight:500;src:url(fonts/ibm-plex-mono-latin-ext-500-normal.woff2) format("woff2");unicode-range:U+0100-02BA,U+02BD-02C5,U+02C7-02CC,U+02CE-02D7,U+02DD-02FF,U+0304,U+0308,U+0329,U+1D00-1DBF,U+1E00-1E9F,U+1EF2-1EFF,U+2020,U+20A0-20AB,U+20AD-20C0,U+2113,U+2C60-2C7F,U+A720-A7FF}

/* ==========================================================================
   01 · Design tokens
   Every colour, font and shared size the page uses. Change a value here and it changes everywhere.
   docs/design-tokens.md explains each one and where it is used.
   ========================================================================== */
:root{
  /* colours */
  --navy:#0D1C42;          /* the dark sections (top bar, first screen, contact), text on the light sections */
  --navy-deep:#081431;     /* footer, video lock circle */
  --blue:#22396F;          /* portrait arcs, hover on dark buttons in light sections */
  --blue-ink:#2B4A8C;      /* small labels and links on the light sections (paper tags, news dates, roles) */
  --blue-soft:#9FB2DE;     /* soft blue on navy */
  --accent:#C7D6F5;        /* the accent on navy: a soft light blue for "Comparable Data", "So are we.", buttons, the footer wave */
  --white:#FFFFFF;         /* text on navy; the light sections' background */
  --paper:#FFFFFF;         /* light sections (class "light") */
  --mist:#F2F5FA;          /* every other light section (class "light alt"): a cool, blue-white off-white */
  --slate:#4A5571;         /* body text on the light sections */
  --rule:#E2E6EE;          /* hairlines and card edges on the light sections */
  --error:#F5A28C;         /* form errors */
  --ring-track:#2A4378;    /* the unlit part of the team portrait rings */
  --linkedin:#0A66C2;      /* LinkedIn icon buttons on hover */
  --field:#F7F9FC;         /* contact form fields */
  --field-focus:#FFFFFF;
  --field-hint:#6E7790;    /* placeholder text in the contact fields */
  --line:rgba(255,255,255,.14);    /* hairlines on navy */
  --line-2:rgba(255,255,255,.26);  /* stronger hairlines, outline buttons */
  --muted:rgba(255,255,255,.72);   /* secondary text on navy */
  --faint:rgba(255,255,255,.6);    /* fine print */
  --waves:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' xmlns:xlink='http://www.w3.org/1999/xlink' viewBox='0 0 1400 900'%3E%3Cdefs%3E%3Cpath id='l' d='M-40 786.7 C-31 786.1 -5 784.7 13 783.3 C30 781.9 48 781.3 66 778.1 C83 774.9 101 771.0 119 764.2 C136 757.4 154 748.6 171 737.3 C189 726.0 207 711.9 224 696.6 C242 681.2 260 663.0 277 645.1 C295 627.2 312 607.3 330 589.1 C348 570.9 365 552.1 383 535.9 C400 519.8 418 504.5 436 492.2 C453 479.8 471 469.7 489 461.8 C506 454.0 524 449.0 541 445.1 C559 441.1 577 440.0 594 438.3 C612 436.7 630 436.9 647 435.2 C665 433.5 682 432.2 700 428.2 C718 424.2 735 419.1 753 411.1 C770 403.2 788 392.9 806 380.4 C823 367.9 841 352.6 859 336.3 C876 320.1 894 301.2 911 283.0 C929 264.7 947 244.8 964 227.0 C982 209.1 1000 191.0 1017 175.8 C1035 160.5 1052 146.5 1070 135.4 C1088 124.2 1105 115.5 1123 108.8 C1140 102.2 1158 98.4 1176 95.3 C1193 92.2 1211 91.6 1229 90.2 C1246 88.8 1264 88.9 1281 86.8 C1299 84.7 1317 82.6 1334 77.6 C1352 72.7 1370 66.2 1387 57.0 C1405 47.9 1431 28.2 1440 22.5'/%3E%3C/defs%3E%3Cg fill='none' stroke='%23A9BBE3' stroke-opacity='.36' stroke-width='1.3'%3E%3Cuse xlink:href='%23l' y='-690'/%3E%3Cuse xlink:href='%23l' y='-660'/%3E%3Cuse xlink:href='%23l' y='-630'/%3E%3Cuse xlink:href='%23l' y='-600'/%3E%3Cuse xlink:href='%23l' y='-570'/%3E%3Cuse xlink:href='%23l' y='-540'/%3E%3Cuse xlink:href='%23l' y='-510'/%3E%3Cuse xlink:href='%23l' y='-480'/%3E%3Cuse xlink:href='%23l' y='-450'/%3E%3Cuse xlink:href='%23l' y='-420'/%3E%3Cuse xlink:href='%23l' y='-390'/%3E%3Cuse xlink:href='%23l' y='-360'/%3E%3Cuse xlink:href='%23l' y='-330'/%3E%3Cuse xlink:href='%23l' y='-300'/%3E%3Cuse xlink:href='%23l' y='-270'/%3E%3Cuse xlink:href='%23l' y='-240'/%3E%3Cuse xlink:href='%23l' y='-210'/%3E%3Cuse xlink:href='%23l' y='-180'/%3E%3Cuse xlink:href='%23l' y='-150'/%3E%3Cuse xlink:href='%23l' y='-120'/%3E%3Cuse xlink:href='%23l' y='-90'/%3E%3Cuse xlink:href='%23l' y='-60'/%3E%3Cuse xlink:href='%23l' y='-30'/%3E%3Cuse xlink:href='%23l' y='0'/%3E%3Cuse xlink:href='%23l' y='30'/%3E%3Cuse xlink:href='%23l' y='60'/%3E%3Cuse xlink:href='%23l' y='90'/%3E%3Cuse xlink:href='%23l' y='120'/%3E%3Cuse xlink:href='%23l' y='150'/%3E%3Cuse xlink:href='%23l' y='180'/%3E%3Cuse xlink:href='%23l' y='210'/%3E%3Cuse xlink:href='%23l' y='240'/%3E%3Cuse xlink:href='%23l' y='270'/%3E%3Cuse xlink:href='%23l' y='300'/%3E%3Cuse xlink:href='%23l' y='330'/%3E%3Cuse xlink:href='%23l' y='360'/%3E%3Cuse xlink:href='%23l' y='390'/%3E%3Cuse xlink:href='%23l' y='420'/%3E%3Cuse xlink:href='%23l' y='450'/%3E%3Cuse xlink:href='%23l' y='480'/%3E%3Cuse xlink:href='%23l' y='510'/%3E%3Cuse xlink:href='%23l' y='540'/%3E%3Cuse xlink:href='%23l' y='570'/%3E%3Cuse xlink:href='%23l' y='600'/%3E%3Cuse xlink:href='%23l' y='630'/%3E%3Cuse xlink:href='%23l' y='660'/%3E%3Cuse xlink:href='%23l' y='690'/%3E%3Cuse xlink:href='%23l' y='720'/%3E%3Cuse xlink:href='%23l' y='750'/%3E%3Cuse xlink:href='%23l' y='780'/%3E%3Cuse xlink:href='%23l' y='810'/%3E%3Cuse xlink:href='%23l' y='840'/%3E%3Cuse xlink:href='%23l' y='870'/%3E%3Cuse xlink:href='%23l' y='900'/%3E%3Cuse xlink:href='%23l' y='930'/%3E%3Cuse xlink:href='%23l' y='960'/%3E%3C/g%3E%3C/svg%3E");       /* the pitch deck's contour lines (assets/img/contour-waves.svg, filled in by tools/build.py) */

  /* type: Outfit (the wordmark's own font) for headings and "armonica", DM Sans for text, IBM Plex Mono for small labels */
  --head:"Outfit",system-ui,-apple-system,"Segoe UI",sans-serif;
  --word:"Outfit",system-ui,-apple-system,"Segoe UI",sans-serif;
  --body:"DM Sans",system-ui,-apple-system,"Segoe UI",sans-serif;
  --mono:"IBM Plex Mono",ui-monospace,Menlo,Consolas,monospace;

  /* layout: the content column is 1240px on the laptop; on a very wide but short window it may grow to 86% of the
     width so the side margins do not balloon */
  --maxw:clamp(77.5rem,86vw,125rem); --gutter:clamp(1.25rem,4vw,5rem);
  --nav-h:4.25rem; --stick:var(--nav-h);

  /* motion */
  --ease-out:cubic-bezier(.16,1,.3,1); --ease-io:cubic-bezier(.65,0,.35,1);
  color-scheme:dark;
}
@media (max-width:759px){:root{--nav-h:3.75rem}}

/* Screen scaling. Every size on the page is in rem. 1rem is 16px up to the size of Mobin's 13-inch laptop window
   (about 1320 x 650 of page); bigger screens get the same page scaled up, so a monitor shows what the laptop shows,
   only larger. Width sets the scale; the height term keeps a wide but short window (an ultrawide, say) from scaling
   the page taller than it would be on the laptop. Scripts multiply their pixel amounts by (root font size / 16). */
html{font-size:16px;font-size:max(16px,min(1.212121vw,2.461538vh,64px));-webkit-text-size-adjust:100%;text-size-adjust:100%}

/* ==========================================================================
   02 · Base
   The page itself, links, keyboard focus, the centred content column (.wrap), buttons and form fields.
   ========================================================================== */
*,*::before,*::after{box-sizing:border-box}
body{margin:0;background:var(--navy);color:var(--white);font-family:var(--body);font-size:1.0625rem;line-height:1.6;-webkit-font-smoothing:antialiased;-moz-osx-font-smoothing:grayscale;text-rendering:optimizeLegibility}
img,svg,video,canvas{display:block;max-width:100%}
a{color:inherit}
button,input,textarea{font:inherit;color:inherit}
:focus-visible{outline:0.125rem solid var(--accent);outline-offset:0.1875rem;border-radius:0.375rem}
[tabindex="-1"]:focus{outline:none}
section[id],main{scroll-margin-top:calc(var(--stick) + env(safe-area-inset-top,0px))}
[hidden]{display:none!important}   /* parts the scripts hide (empty sections, buttons with nothing left to show) */
.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{position:absolute;left:0.75rem;top:-4rem;z-index:100;background:var(--accent);color:var(--navy);padding:0.625rem 1rem;border-radius:0.625rem;font-weight:600;text-decoration:none;transition:top .2s}
.skip:focus{top:0.75rem}
.wrap{max-width:var(--maxw);margin:0 auto;padding-left:max(var(--gutter),env(safe-area-inset-left,0px));padding-right:max(var(--gutter),env(safe-area-inset-right,0px))}
/* phones with a notch: paint the strip above the sticky bar */
body::before{content:"";position:fixed;inset:0 0 auto;height:env(safe-area-inset-top,0px);z-index:60;background:var(--navy)}

/* ---------- light sections ----------
   class "light": white, navy text; "light alt": the off-white for every other light section. The shared colours
   (--muted, --faint, --line, --line-2) switch to their light versions inside, so every part picks them up. */
.light{--muted:var(--slate);--faint:#5F6880;--line:var(--rule);--line-2:rgba(13,28,66,.22);background:var(--paper);color:var(--navy)}
.light.alt{background:var(--mist)}
.light :focus-visible{outline-color:var(--navy)}

/* ---------- buttons ---------- */
.btn{display:inline-flex;align-items:center;justify-content:center;gap:0.5rem;border-radius:999px;padding:0.6875rem 1.25rem;font:600 0.9375rem/1.2 var(--body);text-decoration:none;color:var(--white);background:transparent;border:0.0625rem solid var(--line-2);cursor:pointer;white-space:nowrap;transition:transform .25s var(--ease-out),background-color .2s,border-color .2s,color .2s}
.btn:hover{transform:translateY(-0.0625rem);border-color:rgba(255,255,255,.55)}
.btn:active{transform:translateY(0)}
.btn.primary{background:var(--white);color:var(--navy);border-color:var(--white)}
.btn.primary:hover{background:var(--accent);border-color:var(--accent)}
.btn[disabled]{opacity:.65;cursor:progress;transform:none}
.light .btn{color:var(--navy);border-color:var(--line-2)}
.light .btn:hover{border-color:var(--navy)}
.light .btn.primary{background:var(--navy);color:var(--white);border-color:var(--navy)}
.light .btn.primary:hover{background:var(--blue);border-color:var(--blue)}
.btn .spin{width:0.875rem;height:0.875rem;border-radius:50%;border:0.125rem solid currentColor;border-right-color:transparent;animation:spin .8s linear infinite}
@keyframes spin{to{transform:rotate(360deg)}}   /* .spin: the spinner a button shows while a form sends */

/* ---------- forms ---------- */
.input{width:100%;min-width:0;font:1rem/1.4 var(--body);color:var(--white);background:rgba(8,20,49,.72);border:0.0625rem solid var(--line-2);border-radius:0.75rem;padding:0.75rem 0.875rem;transition:border-color .2s,box-shadow .2s,background-color .2s}
.input::placeholder{color:rgba(255,255,255,.42)}
.input:hover{border-color:rgba(255,255,255,.4)}
.input:focus{outline:none;border-color:var(--accent);box-shadow:0 0 0 0.1875rem rgba(199,214,245,.18);background:rgba(8,20,49,.9)}
.input[aria-invalid="true"]{border-color:var(--error)}
textarea.input{resize:vertical;min-height:7rem}
.hp{position:absolute!important;left:-9999px!important;width:1px;height:1px;opacity:0}   /* spam trap field, hidden from people */
.form-msg{min-height:1.45em;margin:0;font-size:0.875rem;color:var(--muted)}
.form-msg.is-error{color:var(--error)}

/* ==========================================================================
   03 · Lockup: (λ)armonica
   The h mark (the original logo file, only ever scaled, never altered) stands in for the h of "harmonica";
   the word is live text in Outfit 500, the wordmark's own font. Used in the top bar and the footer.
   ========================================================================== */
/* The mark's visible part sits at
   x 26.2–77.4 % and y 15.6–79.8 % of the square file, so the margins
   below trim the transparent edges and set the mark on the baseline. */
.lockup{display:inline-block;font-family:var(--word);font-weight:500;letter-spacing:-.04em;line-height:1;white-space:nowrap;text-decoration:none;color:var(--white);font-size:1.75rem;--mh:.84em}   /* round 16: Outfit 500 and the mark 8% larger, so the mark's strokes and the letters weigh the same */
.lockup img{display:inline-block;max-width:none;--s:calc(var(--mh,.78em) / .642);width:var(--s);height:var(--s);vertical-align:baseline;
  margin:calc(var(--s) * -.156) calc(var(--s) * -.226 + var(--gap,.015em)) calc(var(--s) * -.202 - .012em) calc(var(--s) * -.262)}

/* ==========================================================================
   04 · Top bar
   Sticky bar with the lockup, section links and "Connect with us". scripts/nav.js adds .is-scrolled (deeper shade),
   .is-past-hero (logo shrinks to the mark alone), html.menu-open (phone menu) and aria-current (underline).
   ========================================================================== */
.nav{position:sticky;top:env(safe-area-inset-top,0px);z-index:40;background:rgba(13,28,66,.86);-webkit-backdrop-filter:saturate(140%) blur(0.75rem);backdrop-filter:saturate(140%) blur(0.75rem);border-bottom:0.0625rem solid rgba(199,214,245,.28);   /* the simple line between the bar and the page */transition:background-color .3s,box-shadow .3s}
.nav.is-scrolled{background:rgba(13,28,66,.95);box-shadow:0 0.75rem 2rem -1.375rem rgba(0,0,0,.7)}
.nav .wrap{position:relative;display:flex;align-items:center;justify-content:space-between;height:var(--nav-h);gap:1.25rem}
.brand{display:inline-flex;align-items:center;border-radius:0.5rem}
/* past the first screen the bar shows the mark on its own, twice as large, so the waves inside it show; back on the
   first screen "armonica" returns. The word wipes into the mark; the mark grows from its own left-centre. */
.nav .lockup img{transform-origin:26.2% 47.7%;transition:transform .7s var(--ease-out)}
.nav .lockup .word{display:inline-block;clip-path:inset(0);transition:opacity .45s var(--ease-out),clip-path .65s var(--ease-out),transform .65s var(--ease-out)}
.nav.is-past-hero .lockup img{transform:scale(2)}
.nav.is-past-hero .lockup .word{opacity:0;transform:translate3d(-.5em,0,0);clip-path:inset(0 100% 0 0)}
.nav-right{display:flex;align-items:center;gap:1.75rem}
.links{display:flex;gap:1.75rem;align-items:center;font-size:0.9375rem}
.links a{position:relative;text-decoration:none;color:var(--muted);transition:color .2s}
.links a:hover,.links a[aria-current="true"]{color:var(--white)}
.links a::after{content:"";position:absolute;left:0;right:0;bottom:-0.4375rem;height:0.09375rem;border-radius:0.125rem;background:var(--accent);transform:scaleX(0);transform-origin:left;transition:transform .35s var(--ease-out)}
.links a[aria-current="true"]::after{transform:scaleX(1)}
.menu-btn{display:none;width:2.625rem;height:2.625rem;border-radius:0.75rem;border:0.0625rem solid var(--line-2);background:transparent;cursor:pointer;place-items:center;padding:0}
.menu-btn i{display:block;width:1.125rem;height:0.09375rem;background:var(--white);border-radius:0.125rem;transition:transform .3s var(--ease-out)}
.menu-btn i+i{margin-top:0.3125rem}
.menu-btn[aria-expanded="true"] i:first-child{transform:translateY(0.203125rem) rotate(45deg)}
.menu-btn[aria-expanded="true"] i:last-child{transform:translateY(-0.203125rem) rotate(-45deg)}
.menu-btn span{display:grid;justify-items:center}

/* phones and tablets: the links fold into a menu under the bar */
@media (max-width:860px){
  .nav-right{gap:0.75rem}
  .menu-btn{display:grid}
  .links{position:absolute;top:100%;left:0;right:0;flex-direction:column;align-items:stretch;gap:0;padding:0.375rem max(var(--gutter),env(safe-area-inset-right,0px)) 0.875rem max(var(--gutter),env(safe-area-inset-left,0px));background:var(--navy);border-bottom:0.0625rem solid var(--line);z-index:2;box-shadow:0 1.5rem 2.5rem -1.5rem rgba(0,0,0,.7);
    opacity:0;visibility:hidden;transform:translateY(-0.5rem);transition:opacity .25s var(--ease-out),transform .35s var(--ease-out),visibility 0s .35s}
  .links a{padding:0.875rem 0.125rem;border-bottom:0.0625rem solid var(--line);font-size:1.0625rem;color:var(--white)}
  .links a:last-child{border-bottom:0}
  .links a::after{display:none}
  .menu-open .links{opacity:1;visibility:visible;transform:none;transition:opacity .25s var(--ease-out),transform .35s var(--ease-out),visibility 0s}
}
@media (max-width:759px){
  .lockup{font-size:1.5625rem}
  .nav-right{gap:0.625rem}
  .nav .btn.primary{padding:0.5625rem 1rem;font-size:0.875rem}
}
@media (max-width:400px){.nav .btn.primary{padding:0.5rem 0.75rem;font-size:0.8125rem}.nav-right{gap:0.5rem}.lockup{font-size:1.4375rem}.menu-btn{width:2.375rem;height:2.375rem}}

/* ==========================================================================
   06 · First screen (hero)
   The headline on the right, the animated machine on a canvas behind the whole section (scripts/hero/),
   a faint drifting dot grid and, on the headline side only, the deck's contour lines.
   ========================================================================== */
.hero{position:relative;overflow:hidden;isolation:isolate}
/* the faint dot grid behind the animation */
.hero::before{content:"";position:absolute;inset:0;z-index:-1;background-image:radial-gradient(rgba(255,255,255,.14) 0.0625rem,transparent 0.08125rem);background-size:1.75rem 1.75rem;opacity:.55;animation:dots 140s linear infinite;
  -webkit-mask-image:radial-gradient(ellipse 62% 72% at 30% 50%,#000 22%,transparent 76%);mask-image:radial-gradient(ellipse 62% 72% at 30% 50%,#000 22%,transparent 76%)}
@keyframes dots{to{background-position:17.5rem 8.75rem}}
.hero-canvas{position:absolute;left:0;top:0;width:100%;height:100%;pointer-events:none;opacity:0;transition:opacity 1.6s var(--ease-out)}
.hero-canvas.is-on{opacity:1}
.hero-canvas.is-swapping{transition-duration:.6s}
.hero-inner{position:relative;display:grid;grid-template-columns:1.08fr .92fr;align-items:center;max-width:var(--maxw);margin:0 auto;padding-left:max(var(--gutter),env(safe-area-inset-left,0px));padding-right:max(var(--gutter),env(safe-area-inset-right,0px));min-height:min(calc(100svh - var(--stick)),55rem)}
.hero-art{height:min(38.75rem,72svh);min-height:25rem}
/* the headline is sized to its column, so "Comparable Data" (7.7em wide in Outfit 600) ends at the column's right edge */
.hero-copy{padding:3.5rem 0 4rem;container-type:inline-size}
.hero-copy h1{font-family:var(--head);font-weight:600;font-size:clamp(2.5rem,4.4vw,4rem);font-size:clamp(2.5rem,12.94cqi,7.25rem);line-height:1.04;letter-spacing:-.03em;margin:0 0 2.25rem}
.hero-copy h1 .line{display:block}
.hero-copy h1 em{font-style:normal;color:var(--accent)}
.ctas{display:flex;gap:0.75rem;flex-wrap:wrap}
@media (max-width:900px){
  .hero-inner{grid-template-columns:1fr;min-height:0}
  .hero-copy{order:-1;padding:2.75rem 0 0.375rem}
  .hero-copy h1{font-size:clamp(2.375rem,11.87cqi,4rem);margin-bottom:1.875rem}
  .hero-art{height:clamp(17.5rem,80vw,28.75rem);min-height:0}
}

/* contour lines (class "has-waves" on the hero, the chosen "option A"): only on the headline side, strongest at the
   right edge and above and below the text, fading to nothing towards the animation and around the words */
.hero.has-waves::after{content:"";position:absolute;inset:0;z-index:-1;pointer-events:none;opacity:.58;
  background:var(--waves) right center/cover no-repeat;
  -webkit-mask-image:radial-gradient(ellipse 34% 30% at 71% 52%,transparent 35%,#000 100%),linear-gradient(90deg,transparent 40%,#000 96%);
  -webkit-mask-composite:source-in;
  mask-image:radial-gradient(ellipse 34% 30% at 71% 52%,transparent 35%,#000 100%),linear-gradient(90deg,transparent 40%,#000 96%);
  mask-composite:intersect}
@media (max-width:900px){
  .hero.has-waves::after{opacity:.52;
    -webkit-mask-image:radial-gradient(ellipse 80% 42% at 100% 0%,#000 0%,transparent 100%);-webkit-mask-composite:source-over;
    mask-image:radial-gradient(ellipse 80% 42% at 100% 0%,#000 0%,transparent 100%);mask-composite:add}
}

/* on load the headline lines and buttons rise in one after another while the machine starts */
@media (prefers-reduced-motion:no-preference){
  .js .hero-copy h1 .line,.js .hero-copy .ctas{opacity:0;transform:translateY(1.125rem);animation:rise 1.05s var(--ease-out) forwards}
  .js .hero-copy h1 .line:nth-child(1){animation-delay:.12s}
  .js .hero-copy h1 .line:nth-child(2){animation-delay:.24s}
  .js .hero-copy h1 .line:nth-child(3){animation-delay:.36s}
  .js .hero-copy .ctas{animation-delay:.58s}
}
@keyframes rise{to{opacity:1;transform:none}}

/* ==========================================================================
   07 · From the literature
   A white band with seven paper cards moving right to left (scripts/literature.js clones them into an endless row).
   Drag, swipe or shift-scroll to move them; hovering or focusing pauses the row, and a hovered card lifts.
   ========================================================================== */
.lit{position:relative;padding:4.5rem 0 4.75rem;border-bottom:0.0625rem solid var(--rule)}
.lit-head{display:flex;justify-content:space-between;align-items:center;gap:1rem 1.5rem;flex-wrap:wrap;margin-bottom:1.625rem}
.lit-head h2{font-family:var(--head);font-weight:600;font-size:clamp(1.5rem,2.6vw,2.25rem);letter-spacing:-.025em;line-height:1.1;margin:0}
/* the row's window: .5rem of hidden padding top and bottom gives a lifted card room */
.marquee{position:relative;overflow-x:auto;overflow-y:hidden;touch-action:pan-y;cursor:grab;-webkit-user-select:none;user-select:none;padding:.5rem 0;margin:-.5rem 0;
  -webkit-mask-image:linear-gradient(90deg,transparent,#000 4%,#000 96%,transparent);mask-image:linear-gradient(90deg,transparent,#000 4%,#000 96%,transparent)}
.js .marquee{overflow:hidden}
html:not(.js) .marquee{cursor:auto;-webkit-user-select:auto;user-select:auto}
.marquee.is-dragging{cursor:grabbing}
.track{display:flex;gap:1rem;width:max-content;padding:0.125rem 0;will-change:transform}
.paper{width:20.625rem;flex:none;border:0.0625rem solid var(--rule);border-radius:1rem;padding:1.125rem 1.25rem;background:var(--mist);color:var(--navy);display:flex;flex-direction:column;gap:0.5rem;transition:border-color .3s,transform .45s var(--ease-out),box-shadow .45s var(--ease-out)}
.paper:hover{border-color:rgba(13,28,66,.3);background:var(--paper);transform:translate3d(0,-.3rem,0);box-shadow:0 1.25rem 2rem -1.5rem rgba(13,28,66,.35)}
.paper .tag{font-family:var(--mono);font-size:0.6875rem;letter-spacing:.1em;color:var(--blue-ink)}
.paper h3{font-family:var(--head);font-weight:600;font-size:1.125rem;line-height:1.3;margin:0;letter-spacing:-.01em}
.paper p{margin:0;font-size:0.9375rem;color:var(--muted);line-height:1.5}
.paper cite{display:block;font-style:normal;font-size:0.8125rem;line-height:1.45;margin-top:auto;padding-top:0.375rem;color:var(--blue-ink)}
.paper cite a{color:var(--blue-ink);text-decoration:underline;text-decoration-color:rgba(43,74,140,.35);text-underline-offset:0.1875rem;transition:color .2s,text-decoration-color .2s}
.paper cite a:hover{color:var(--navy);text-decoration-color:currentColor}
.paper cite svg{display:inline-block;width:0.625rem;height:0.625rem;margin-left:0.3125rem;vertical-align:-.02em}
@media (max-width:520px){.paper{width:18.125rem}}

/* ==========================================================================
   08 · Shared section parts
   Section spacing and the big section headings.
   ========================================================================== */
section.block{padding:7.5rem 0}

h2.big{font-family:var(--head);font-weight:600;font-size:clamp(2.125rem,4.2vw,3.625rem);line-height:1.05;letter-spacing:-.03em;margin:0 0 1.25rem;max-width:18ch}

@media (max-width:900px){section.block{padding:5.25rem 0}}

/* ==========================================================================
   09 · Watch what we do (video)
   An off-white section with a 16:9 navy screen. Locked, it shows the lock, "Request access", an email field and fine print;
   an approved email opens the player (scripts/video-and-contact.js sets data-state="opening", then "open").
   ========================================================================== */
.vstage{position:relative;margin-top:2.5rem;border-radius:1.5rem;overflow:hidden;background:var(--navy);aspect-ratio:16/9;display:grid;place-items:center;isolation:isolate;
  --muted:rgba(255,255,255,.72);--faint:rgba(255,255,255,.6);--line:rgba(255,255,255,.14);--line-2:rgba(255,255,255,.26);color:var(--white)}
/* the screen stays dark inside the light section: its buttons, fields and focus rings keep their navy-page look */
.vstage :focus-visible{outline-color:var(--accent)}
.vstage .btn.primary{background:var(--white);color:var(--navy);border-color:var(--white)}
.vstage .btn.primary:hover{background:var(--accent);border-color:var(--accent)}
.vstage::before{content:"";position:absolute;inset:0;z-index:-1;opacity:.75;background:var(--waves) right center/cover no-repeat;
  -webkit-mask-image:linear-gradient(90deg,transparent 8%,#000 72%);mask-image:linear-gradient(90deg,transparent 8%,#000 72%)}
.gate{position:relative;display:grid;justify-items:center;gap:0.75rem;padding:2.25rem 1.5rem;text-align:center;width:100%;max-width:36.25rem;transition:opacity .5s var(--ease-out),transform .6s var(--ease-out),visibility 0s .6s}
.lock{width:5.25rem;height:5.25rem;border-radius:50%;background:var(--navy-deep);border:0.09375rem solid rgba(199,214,245,.5);display:grid;place-items:center;transition:border-color .3s,box-shadow .3s}
.lock svg{width:2.75rem;height:2.75rem}
.lock .shackle{transition:transform .55s var(--ease-out);transform-origin:22px 15px}   /* px here are the icon's own 44-unit grid */
/* pointing at the locked screen lifts the shackle a little and brightens the ring */
.vstage:hover .lock{border-color:rgba(199,214,245,.85);box-shadow:0 0 0 .375rem rgba(199,214,245,.07)}
.vstage:hover .lock .shackle{transform:translateY(-2px) rotate(-7deg)}
.vstage[data-state="opening"] .lock .shackle,.vstage[data-state="open"] .lock .shackle{transform:translateY(-4px) rotate(-18deg)}
.gate p{margin:0;color:var(--muted);max-width:46ch}
.gate-form{display:flex;gap:0.5rem;width:100%;max-width:28.75rem;margin-top:0.5rem}
.gate-form .input{flex:1}
.gate .fine{font-size:0.8125rem;color:var(--faint);max-width:40ch}
.gate-link{display:inline-flex;align-items:center;gap:0.375rem;font-weight:600;font-size:1rem;color:var(--accent);text-decoration:underline;text-decoration-color:rgba(199,214,245,.45);text-underline-offset:0.25rem;transition:text-decoration-color .2s,gap .25s var(--ease-out)}
.gate-link::after{content:"";width:0.5rem;height:0.5rem;border-right:0.1rem solid currentColor;border-bottom:0.1rem solid currentColor;transform:rotate(45deg) translateY(-0.125rem);margin-left:0.125rem}
.gate-link:hover{text-decoration-color:currentColor;gap:0.5625rem}
.form-msg a{color:var(--accent);text-underline-offset:0.1875rem}
.player{position:absolute;inset:0;opacity:0;visibility:hidden;transition:opacity .7s var(--ease-out) .2s,visibility 0s .9s;background:#000}
.player video{width:100%;height:100%;object-fit:contain;background:#000}
.vstage[data-state="open"] .gate{opacity:0;transform:scale(.96);visibility:hidden;pointer-events:none}
.vstage[data-state="opening"] .gate{opacity:0;transform:translateY(-0.375rem) scale(.98)}
.vstage[data-state="open"] .player{opacity:1;visibility:visible;transition:opacity .7s var(--ease-out) .15s,visibility 0s}
.play{position:absolute;left:50%;top:50%;width:5.5rem;height:5.5rem;margin:-2.75rem 0 0 -2.75rem;border-radius:50%;border:0;background:var(--accent);color:var(--navy);display:grid;place-items:center;cursor:pointer;box-shadow:0 1.125rem 3.125rem -0.75rem rgba(0,0,0,.6);transition:transform .3s var(--ease-out),opacity .3s}
.play:hover{transform:scale(1.06)}
.play svg{width:1.75rem;height:1.75rem;margin-left:0.25rem}
.player.is-playing .play{opacity:0;pointer-events:none;transform:scale(.9)}
.cc{position:absolute;top:0.875rem;right:0.875rem;z-index:2;min-width:2.875rem;height:2.125rem;padding:0 0.625rem;border-radius:0.5625rem;border:0.09375rem solid rgba(255,255,255,.55);background:rgba(8,20,49,.72);color:#fff;font:700 0.8125rem/1 var(--body);letter-spacing:.06em;cursor:pointer;-webkit-backdrop-filter:blur(0.375rem);backdrop-filter:blur(0.375rem);transition:background-color .2s,color .2s,border-color .2s,opacity .3s}
.cc[aria-pressed="true"]{background:var(--accent);color:var(--navy);border-color:var(--accent)}
.cc:hover{border-color:#fff}
.player video::cue{font-family:var(--body);font-size:clamp(0.8125rem,1.9vw,1.375rem);line-height:1.35;color:#fff;background:rgba(8,20,49,.82)}
@media (max-width:640px){
  .vstage{aspect-ratio:auto;min-height:26.25rem}
  .vstage[data-state="open"]{aspect-ratio:16/9;min-height:0}
  .gate-form{flex-direction:column}
  .gate-form .btn{width:100%}
  .play{width:4.25rem;height:4.25rem;margin:-2.125rem 0 0 -2.125rem}
  .cc{top:0.625rem;right:0.625rem;height:1.875rem;min-width:2.5rem;font-size:0.75rem}
}

/* the section is off-white with a navy heading (class "light alt"); the screen stays navy */
#video .vstage{box-shadow:0 1.875rem 3.75rem -2.625rem rgba(13,28,66,.55)}

/* ==========================================================================
   10 · Who we are (team)
   Two portraits on a diagonal, joined by a dotted line on wide screens (scripts/team.js draws it).
   Each portrait sits in a pale blue ring with one navy-blue arc; the arc turns when you point at the person.
   ========================================================================== */
@property --ring{syntax:'<angle>';inherits:false;initial-value:210deg}
.team h2.big.team-title{margin:0}
.duo{position:relative;display:grid;gap:clamp(2.25rem,5vw,4rem);padding-top:clamp(1.75rem,4vw,3rem)}
.duo-line{position:absolute;left:0;top:0;width:100%;height:100%;overflow:visible;pointer-events:none;z-index:0}
.duo-line path{fill:none;stroke:rgba(34,57,111,.35);stroke-width:1.5;stroke-dasharray:1 9;stroke-linecap:round}
.member{position:relative;z-index:1;display:flex;align-items:center;gap:clamp(1.375rem,3.4vw,2.75rem);width:min(100%,45rem)}
.member--right{justify-self:end;flex-direction:row-reverse;text-align:right}
.bubble{--d:clamp(9.375rem,18vw,14.75rem);position:relative;flex:none;width:var(--d);height:var(--d);border-radius:50%;padding:clamp(0.5625rem,1.1vw,0.875rem);
  background:conic-gradient(from var(--ring),var(--blue) 0 15%,#DDE3EE 15% 100%);
  box-shadow:0 1.75rem 3.5rem -2.25rem rgba(13,28,66,.45);transition:--ring 1.4s var(--ease-out),transform .5s var(--ease-out)}
.bubble::after{content:"";position:absolute;inset:-0.875rem;border-radius:50%;border:0.0625rem solid rgba(13,28,66,.1);pointer-events:none}
.bubble img{display:block;width:100%;height:100%;border-radius:50%;object-fit:cover;border:clamp(0.1875rem,.45vw,0.375rem) solid var(--mist);background:#DDE3EE}
.member:hover .bubble{--ring:380deg;transform:translateY(-0.1875rem)}
.member-info{min-width:0}
.member-info h3{font-family:var(--head);font-weight:600;font-size:clamp(1.5rem,2.7vw,2.25rem);line-height:1.1;letter-spacing:-.025em;margin:0;text-wrap:balance}
.member-info .role{font-family:var(--mono);font-size:0.75rem;letter-spacing:.12em;text-transform:uppercase;color:var(--blue-ink);margin:0.625rem 0 1.125rem}
.reach{display:flex;align-items:center;gap:0.75rem;flex-wrap:wrap}
.member--right .reach{justify-content:flex-end}
.li{flex:none;width:2.5rem;height:2.5rem;border-radius:0.75rem;display:grid;place-items:center;color:var(--navy);background:var(--paper);border:0.0625rem solid var(--line-2);transition:background-color .2s,border-color .2s,transform .25s var(--ease-out)}
.li svg{width:1.0625rem;height:1.0625rem}
.li:hover{background:var(--linkedin);border-color:var(--linkedin);color:#fff;transform:translateY(-0.0625rem)}
.mail{font-size:0.9375rem;color:var(--muted);text-decoration:underline;text-decoration-color:rgba(13,28,66,.25);text-underline-offset:0.25rem;transition:color .2s,text-decoration-color .2s}
.mail span,.nw{white-space:nowrap}
.mail:hover{color:var(--navy);text-decoration-color:var(--blue)}
@media (max-width:760px){.duo-line{display:none}}
@media (max-width:560px){
  .member{gap:1rem}
  .bubble{--d:7.375rem;padding:0.5rem}
  .bubble::after{inset:-0.5625rem}
  .member-info h3{font-size:1.375rem}
  .member-info .role{font-size:0.6875rem;margin:0.375rem 0 0.75rem}
  .reach{gap:0.5rem}
  .li{width:2.125rem;height:2.125rem;border-radius:0.625rem}
  .li svg{width:0.9375rem;height:0.9375rem}
  .mail{font-size:0.84375rem;line-height:1.5}
}
@media (max-width:359px){
  .bubble{--d:6.25rem;padding:0.4375rem}
  .bubble::after{inset:-0.5rem}
  .member{gap:0.875rem}
}

/* the team section keeps its own top padding */
section.block.team{padding-top:6.875rem}
@media (max-width:900px){section.block.team{padding-top:5.25rem}}

/* ==========================================================================
   11 · Supported by
   On the off-white band, one supporter logo at a time on a white tile: each swings in from the right, rests in the centre and swings out
   to the left (scripts/supporters.js). Without scripts, or with reduced motion, both logos simply sit side by side.
   ========================================================================== */
.supporters{border-top:0.0625rem solid var(--rule)}
.sup-inner{display:grid;justify-items:center;gap:0.5rem;padding-top:1.25rem;padding-bottom:1.375rem}
.sup-label{margin:0;font:500 0.75rem/1.4 var(--mono);letter-spacing:.14em;text-transform:uppercase;color:var(--muted)}
.sup-stage{position:relative;width:100%;height:7.375rem;overflow:hidden;perspective:68.75rem;
  -webkit-mask-image:linear-gradient(90deg,transparent,#000 14%,#000 86%,transparent);mask-image:linear-gradient(90deg,transparent,#000 14%,#000 86%,transparent)}
.sup-logo{position:absolute;left:50%;top:50%;width:16.875rem;height:6.25rem;margin:-3.125rem 0 0 -8.4375rem;display:grid;place-items:center;padding:0.875rem 1.625rem;border-radius:1.125rem;background:#fff;color:var(--navy);text-decoration:none;border:0.0625rem solid var(--rule);box-shadow:0 1.375rem 2.75rem -1.625rem rgba(13,28,66,.3),0 0 0 0 rgba(34,57,111,0);opacity:0;will-change:transform,opacity,filter;backface-visibility:hidden}
.sup-logo[data-tone="dark"]{background:rgba(13,28,66,.6);border:0.0625rem solid var(--line-2);color:var(--white)}
.sup-logo img{width:auto;height:auto;max-width:100%;max-height:4.25rem;object-fit:contain}
@media (max-width:520px){.sup-stage{height:6.625rem}.sup-logo{width:15rem;height:5.625rem;margin:-2.8125rem 0 0 -7.5rem;padding:0.75rem 1.375rem}.sup-logo img{max-height:3.75rem}}
.sup-logo .fallback{display:none;font:600 1.3125rem/1.15 var(--head);letter-spacing:-.01em;text-align:center}
.sup-logo.is-missing img{display:none}
.sup-logo.is-missing .fallback{display:block}
.sup-logo:focus-visible{outline-offset:0.25rem}
html:not(.js) .sup-stage,.sup-stage.is-static{display:flex;flex-wrap:wrap;justify-content:center;gap:1rem;height:auto;overflow:visible;-webkit-mask-image:none;mask-image:none}
html:not(.js) .sup-logo,.sup-stage.is-static .sup-logo{position:static;margin:0;opacity:1;transform:none}

/* ==========================================================================
   12 · Connect with us
   "Curious?" with a smaller light-blue "So are we." on navy with the deck's contour lines, and a translucent form card
   with pale fields. scripts/video-and-contact.js validates and sends the form, then shows the "sent" panel.
   ========================================================================== */
.contact{position:relative;background:var(--navy);overflow:hidden;isolation:isolate}
.contact::before{content:"";position:absolute;inset:0;z-index:-1;background:var(--waves) right center/cover no-repeat;
  -webkit-mask-image:linear-gradient(90deg,transparent 18%,#000 78%);mask-image:linear-gradient(90deg,transparent 18%,#000 78%)}
.contact-grid{display:grid;grid-template-columns:1fr 1fr;gap:4rem;align-items:center}
h2.big.contact-title{font-size:clamp(3rem,5.6vw,5.25rem);line-height:1;letter-spacing:-.035em;margin:0;max-width:none}
.contact-title .line{display:block}
.contact-title .line+.line{font-size:.66em;line-height:1.1;letter-spacing:-.025em;color:var(--accent);margin-top:.2em}   /* "So are we." */
.panel{position:relative;width:100%;max-width:30rem;justify-self:end;background:rgba(255,255,255,.06);border:0.0625rem solid rgba(255,255,255,.16);color:#fff;border-radius:1.125rem;padding:1.375rem 1.5rem;
  -webkit-backdrop-filter:blur(0.5rem);backdrop-filter:blur(0.5rem);box-shadow:0 2.5rem 5rem -3.125rem rgba(0,0,0,.6)}
.contact-form{display:grid;gap:0.625rem}
.field{display:grid;gap:0.25rem}
.field label{font-size:0.8125rem;font-weight:500;color:rgba(255,255,255,.9)}
.field .opt{color:rgba(255,255,255,.62);font-weight:400}
.panel .input{color:var(--navy);background:var(--field);border-color:transparent;border-radius:0.5rem;padding:0.5rem 0.75rem;font-size:0.9375rem}
.panel textarea.input{min-height:4.5rem}
.panel .input::placeholder{color:var(--field-hint)}
.panel .input:hover{border-color:rgba(199,214,245,.6)}
.panel .input:focus{border-color:var(--accent);box-shadow:0 0 0 0.1875rem rgba(199,214,245,.3);background:var(--field-focus)}
.panel .input[aria-invalid="true"]{border-color:var(--error);box-shadow:0 0 0 0.1875rem rgba(245,162,140,.3)}
.panel .btn.primary{background:var(--accent);color:var(--navy);border-color:var(--accent);border-radius:0.625rem}
.panel .btn.primary:hover{background:#fff;border-color:#fff}
.panel .form-msg{color:rgba(255,255,255,.75)}
.panel .form-msg.is-error{color:var(--error)}
.contact-form .row{display:flex;align-items:center;gap:0.625rem 1rem;flex-wrap:wrap;margin-top:0.25rem}
.contact-form .row .form-msg{flex:1 1 13.75rem}
/* after sending: a drawn tick and a short message */
.sent{display:none;justify-items:center;text-align:center;gap:0.625rem;padding:2.125rem 0.75rem}
.sent h3{font-family:var(--head);font-weight:600;font-size:1.625rem;margin:0.25rem 0 0;letter-spacing:-.02em}
.sent p{margin:0;color:rgba(255,255,255,.78)}
.sent .tick{width:4rem;height:4rem}
.sent .tick circle,.sent .tick path{stroke:var(--accent)}
.sent p a{color:#fff;text-underline-offset:0.1875rem;overflow-wrap:anywhere}
.text-btn{margin-top:0.375rem;padding:0.375rem 0.25rem;background:none;border:0;color:var(--accent);font:600 0.9375rem/1.3 var(--body);text-decoration:underline;text-decoration-color:rgba(199,214,245,.5);text-underline-offset:0.25rem;cursor:pointer}
.text-btn:hover{text-decoration-color:currentColor}
.sent .tick circle{stroke-dasharray:176;stroke-dashoffset:176}
.sent .tick path{stroke-dasharray:40;stroke-dashoffset:40}
.panel.is-sent .contact-form{display:none}
.panel.is-sent .sent{display:grid}
.panel.is-sent .tick circle{animation:draw .7s var(--ease-out) forwards}
.panel.is-sent .tick path{animation:draw .45s var(--ease-out) .45s forwards}
@keyframes draw{to{stroke-dashoffset:0}}
@media (max-width:900px){
  .contact-grid{grid-template-columns:1fr;gap:2.25rem}
  h2.big.contact-title{font-size:clamp(3rem,14vw,5rem)}
  .contact::before{-webkit-mask-image:linear-gradient(180deg,#000,transparent 55%);mask-image:linear-gradient(180deg,#000,transparent 55%)}
  .panel{padding:1.25rem;max-width:none}
}

/* ==========================================================================
   13 · Footer
   The lockup, "Mainz, Germany · harmonica-labs.com" and the company LinkedIn, on the deepest navy.
   ========================================================================== */
.foot{position:relative;background:var(--navy-deep);padding:1.625rem 0 1.875rem;font-size:0.875rem;color:var(--muted)}
.foot .wrap{display:flex;justify-content:space-between;gap:1.125rem 1.75rem;flex-wrap:wrap;align-items:center}
.foot .lockup{font-size:1.375rem}
.foot .li{width:2.25rem;height:2.25rem;border-radius:0.625rem;color:#fff;background:transparent;border-color:var(--line-2)}
.foot .li:hover{background:var(--linkedin);border-color:var(--linkedin)}

/* one long wave across the page where the contact band meets the footer (drawn in by 14-motion.css) */
.wv-foot{position:absolute;left:0;top:-1.25rem;width:100%;height:2.5rem;color:var(--accent);overflow:visible;pointer-events:none}
.wv-foot path{fill:none;stroke:currentColor;stroke-width:1.5;stroke-linecap:round;vector-effect:non-scaling-stroke;opacity:.7}
.wv-foot path+path{opacity:.3}

/* ==========================================================================
   15 · News & events
   A white section: news cards on the left (two a row), "Events & talks" as a dated list on the right.
   scripts/content.js fills both from the editor (/admin) and shows the section once there is something in it.
   With only news or only events, that part takes the whole width (.is-single).
   ========================================================================== */
.news-layout{display:grid;grid-template-columns:minmax(0,1.85fr) minmax(0,1fr);gap:clamp(2rem,4.5vw,4.5rem);align-items:start;margin-top:2.25rem}
.news-layout.is-single{grid-template-columns:minmax(0,1fr)}
.news-grid{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:1.25rem}
.is-single .news-grid{grid-template-columns:repeat(3,minmax(0,1fr))}

/* one news item */
.news-card{display:flex;flex-direction:column;gap:0.625rem;background:var(--paper);border:0.0625rem solid var(--rule);border-radius:1rem;padding:1.25rem 1.375rem 1.375rem;overflow:hidden;
  transition:border-color .3s,transform .45s var(--ease-out),box-shadow .45s var(--ease-out)}
.news-card:hover{border-color:rgba(13,28,66,.28);transform:translate3d(0,-.25rem,0);box-shadow:0 1.25rem 2.25rem -1.75rem rgba(13,28,66,.4)}
.news-img{margin:-1.25rem -1.375rem 0.375rem;aspect-ratio:16/9;background:var(--mist);border-bottom:0.0625rem solid var(--rule)}
.news-img img{width:100%;height:100%;object-fit:cover}
.news-meta{display:flex;align-items:center;gap:0.625rem;flex-wrap:wrap;margin:0;font:500 0.6875rem/1.4 var(--mono);letter-spacing:.1em;text-transform:uppercase;color:var(--blue-ink)}
.news-meta time{color:var(--slate)}
.news-tag::after{content:"";display:inline-block;width:0.25rem;height:0.25rem;margin-left:0.625rem;border-radius:50%;background:currentColor;opacity:.5;vertical-align:.18em}
.news-card h3{font:600 1.25rem/1.25 var(--head);letter-spacing:-.015em;margin:0;color:var(--navy);text-wrap:balance}
.news-text{margin:0;font-size:0.9375rem;line-height:1.55;color:var(--slate);white-space:pre-line}
.more-link{align-self:flex-start;display:inline-flex;align-items:center;gap:0.3125rem;margin-top:auto;padding-top:0.25rem;font-weight:600;font-size:0.9375rem;color:var(--navy);
  text-decoration:underline;text-decoration-color:rgba(13,28,66,.3);text-underline-offset:0.25rem;transition:text-decoration-color .2s,color .2s}
.more-link:hover{color:var(--blue);text-decoration-color:currentColor}
.more-link svg{width:0.625rem;height:0.625rem;flex:none}
.btn.more{margin-top:1.5rem}
/* a single news item takes the whole row; with a picture, the picture sits on the left */
.news-grid>.news-card:only-child{grid-column:1/-1}
@media (min-width:641px){
  .news-grid>.news-card.has-img:only-child{display:grid;grid-template-columns:minmax(0,1.05fr) minmax(0,1fr);column-gap:1.75rem;align-content:start}
  .news-card.has-img:only-child>:not(.news-img){grid-column:2}
  .news-card.has-img:only-child .news-img{grid-column:1;grid-row:1/span 6;margin:-1.25rem 0 -1.375rem -1.375rem;aspect-ratio:auto;min-height:100%;border-bottom:0;border-right:0.0625rem solid var(--rule)}
}

/* events & talks */
.col-title{font:600 1.125rem/1.2 var(--head);letter-spacing:-.015em;margin:0 0 0.75rem;color:var(--navy)}
.event-list{list-style:none;margin:0;padding:0;border-bottom:0.0625rem solid var(--rule)}
.event{display:grid;grid-template-columns:3.75rem minmax(0,1fr);gap:1rem;padding:1rem 0;border-top:0.0625rem solid var(--rule)}
.ev-date{display:grid;justify-items:center;align-content:center;gap:0.125rem;height:3.75rem;border-radius:0.75rem;background:var(--navy);color:var(--white)}
.ev-day{font:600 1.375rem/1 var(--head);letter-spacing:-.02em}
.ev-month{font:500 0.625rem/1 var(--mono);letter-spacing:.1em;text-transform:uppercase;color:var(--accent)}
.ev-body{display:grid;gap:0.25rem;min-width:0}
.ev-kind{margin:0;font:500 0.6875rem/1.45 var(--mono);letter-spacing:.08em;text-transform:uppercase;color:var(--slate)}
.ev-badge{color:var(--blue-ink)}
.ev-badge::after{content:"·";margin:0 0.4375rem;color:var(--slate)}
.event h4{font:600 1.0625rem/1.3 var(--head);letter-spacing:-.01em;margin:0;color:var(--navy)}
.ev-place,.ev-note{margin:0;font-size:0.875rem;line-height:1.5;color:var(--slate)}
.event .more-link{margin-top:0.125rem;font-size:0.875rem}
.events-none{margin:0;padding:1rem 0;border-top:0.0625rem solid var(--rule);color:var(--slate);font-size:0.9375rem}
.past-events{margin-top:1.25rem}
.past-events summary{display:inline-flex;align-items:center;gap:0.5rem;cursor:pointer;list-style:none;font-weight:600;font-size:0.9375rem;color:var(--navy);border-radius:0.375rem}
.past-events summary::-webkit-details-marker{display:none}
.past-events summary::after{content:"";width:0.4375rem;height:0.4375rem;border-right:0.1rem solid currentColor;border-bottom:0.1rem solid currentColor;transform:rotate(45deg) translateY(-0.125rem);transition:transform .25s var(--ease-out)}
.past-events[open] summary::after{transform:rotate(-135deg) translateY(-0.125rem)}
.past-events .event-list{margin-top:0.75rem}
.is-past .ev-date{background:var(--mist);color:var(--slate);border:0.0625rem solid var(--rule)}
.is-past .ev-month{color:var(--slate)}

@media (max-width:1100px){
  .news-layout{grid-template-columns:minmax(0,1fr)}
  .is-single .news-grid{grid-template-columns:repeat(2,minmax(0,1fr))}
  .events{max-width:40rem}
}
@media (max-width:640px){
  .news-grid,.is-single .news-grid{grid-template-columns:minmax(0,1fr)}
}

/* ==========================================================================
   16 · Join us (careers)
   The heading on the left; the open roles on the right as a list with hairlines between them, each with its own
   apply link. With no role published, only the heading and the line "No open roles right now…" show.
   ========================================================================== */
section.block.careers{padding:6.25rem 0}
.careers-layout{display:grid;grid-template-columns:minmax(0,.8fr) minmax(0,1.2fr);gap:1.5rem clamp(2rem,5vw,5rem);align-items:start}
.careers-layout:has(.job-list[hidden]){grid-template-columns:minmax(0,1fr)}
.careers-head h2.big{margin-bottom:1rem}
.careers-none{margin:0;max-width:46ch;font-size:1.0625rem;color:var(--slate)}
.careers-none a{color:var(--navy);text-decoration-color:rgba(13,28,66,.3);text-underline-offset:0.25rem}
.careers-none a:hover{text-decoration-color:currentColor}
.job-list{list-style:none;margin:0;padding:0;border-bottom:0.0625rem solid var(--rule)}
.job{display:flex;align-items:center;justify-content:space-between;gap:1rem 2rem;padding:1.5rem 0;border-top:0.0625rem solid var(--rule)}
.job-main{min-width:0;display:grid;gap:0.375rem}
.job h3{font:600 1.375rem/1.2 var(--head);letter-spacing:-.02em;margin:0;color:var(--navy)}
.job-meta{margin:0;font:500 0.6875rem/1.45 var(--mono);letter-spacing:.1em;text-transform:uppercase;color:var(--blue-ink)}
.job-text{margin:0.25rem 0 0;max-width:60ch;font-size:0.9375rem;line-height:1.55;color:var(--slate);white-space:pre-line}
.btn.job-apply{flex:none}
.btn.job-apply svg{width:0.625rem;height:0.625rem}
@media (max-width:900px){
  section.block.careers{padding:4.75rem 0}
  .careers-layout{grid-template-columns:minmax(0,1fr)}
}
@media (max-width:640px){
  .job{flex-direction:column;align-items:flex-start}
}

/* ==========================================================================
   19 · Motion
   Arrivals as you scroll, the footer wave wiping in, the contour lines drifting with the scroll, and the
   reduced-motion and print fallbacks. Keep this file last: it overrides the resting states set above.
   ========================================================================== */
/* Arrivals. html.rv-on is set by scripts/arrivals.js only when the visitor has not asked for reduced motion. It adds .is-in to each
   [data-rv] element whenever it comes on screen and removes it once the element is wholly off screen, so arrivals
   replay. data-from="top" (scrolling back up) turns the rise into a drop via --rv-dy. Without the script nothing is
   hidden. Animations fill backwards only, so hover effects work as soon as an arrival ends. An open video is left alone. */
[data-rv]{--rv-dy:1}
[data-rv][data-from="top"]{--rv-dy:-1}
.rv-on [data-rv="up"]:not(.is-in),.rv-on [data-rv="grow"]:not(.is-in):not([data-state="open"]),
.rv-on [data-rv="papers"]:not(.is-in) .paper,
.rv-on [data-rv="duo"]:not(.is-in) .member,.rv-on [data-rv="duo"]:not(.is-in) .duo-line,
.rv-on [data-rv="contact"]:not(.is-in) .contact-title .line,.rv-on [data-rv="contact"]:not(.is-in) .panel,
.rv-on [data-rv="cards"]:not(.is-in) > *{opacity:0}
.rv-on [data-rv="up"].is-in{animation:rv-up .9s var(--ease-out) backwards}
.rv-on [data-rv="grow"].is-in:not([data-state="open"]){animation:rv-grow 1.15s var(--ease-out) .12s backwards}
.rv-on [data-rv="papers"].is-in .paper{animation:rv-right .9s var(--ease-out) backwards;animation-delay:calc(.15s + var(--i,7) * 90ms)}
.rv-on [data-rv="duo"].is-in .member{animation:rv-up 1s var(--ease-out) .1s backwards}
.rv-on [data-rv="duo"].is-in .member--right{animation-delay:.4s}
.rv-on [data-rv="duo"].is-in .bubble{animation:ring-sweep 1.9s var(--ease-out) .2s backwards}
.rv-on [data-rv="duo"].is-in .member--right .bubble{animation-delay:.5s}
.rv-on [data-rv="duo"].is-in .duo-line{animation:rv-fade 1.2s ease .95s backwards}
.rv-on [data-rv="contact"].is-in .contact-title .line{animation:rv-up 1s var(--ease-out) .05s backwards}
.rv-on [data-rv="contact"].is-in .contact-title .line+.line{animation-delay:.22s}
.rv-on [data-rv="contact"].is-in .panel{animation:rv-up-far 1.1s var(--ease-out) .34s backwards}
/* news cards, events and open roles rise in one after another (scripts/content.js numbers them in --i) */
.rv-on [data-rv="cards"].is-in > *{animation:rv-up .85s var(--ease-out) backwards;animation-delay:calc(.08s + var(--i,0) * 80ms)}
@keyframes rv-up{from{opacity:0;transform:translate3d(0,calc(1.75rem * var(--rv-dy,1)),0)}}
@keyframes rv-up-far{from{opacity:0;transform:translate3d(0,calc(3rem * var(--rv-dy,1)),0)}}
@keyframes rv-right{from{opacity:0;transform:translate3d(3.5rem,0,0)}}
@keyframes rv-grow{from{opacity:0;transform:translate3d(0,calc(2.5rem * var(--rv-dy,1)),0) scale(.94)}}
@keyframes rv-fade{from{opacity:0}}
@keyframes ring-sweep{from{--ring:-150deg}}

/* the footer wave wipes in from the left */
.rv-on [data-rv="wave"]:not(.is-in) .wv-foot{clip-path:inset(0 100% 0 0)}
.rv-on [data-rv="wave"].is-in .wv-foot{animation:wv-wipe 2.4s var(--ease-io) .1s backwards}
@keyframes wv-wipe{from{clip-path:inset(0 100% 0 0)}to{clip-path:inset(0 0 0 0)}}

/* the contour lines behind the video player and the contact band drift as you scroll past
   (browsers without scroll-driven animations simply show them still) */
@supports (animation-timeline:view()){
  @media (prefers-reduced-motion:no-preference){
    .vstage{view-timeline-name:--vstage}
    .contact{view-timeline-name:--contact}
    .vstage::before{inset:-12% -6%;animation:wv-drift linear both;animation-timeline:--vstage;animation-range:cover}
    .contact::before{inset:-12% -5%;animation:wv-drift linear both;animation-timeline:--contact;animation-range:cover}
  }
}
@keyframes wv-drift{from{transform:translate3d(3%,-6%,0)}to{transform:translate3d(-3%,6%,0)}}

@media print{.rv-on [data-rv],.rv-on [data-rv] *{opacity:1!important;animation:none!important;clip-path:none!important}}

/* visitors who asked their device for less motion: everything is still, and nothing waits to arrive */
@media (prefers-reduced-motion:reduce){
  *,*::before,*::after{animation-duration:.001ms!important;animation-iteration-count:1!important;animation-delay:0s!important;transition-duration:.001ms!important;transition-delay:0s!important;scroll-behavior:auto!important}
}