/* ============================================================
   Tokens — palette + type + motion. Paper/ink palette, one
   accent-free look; easing curves follow the same cubic-bezier
   family many GSAP Webflow builds use (ease-out / ease-in-out /
   ease-write).
   ============================================================ */
:root{
  --ink: #0d0d0c;
  --ink-60: rgba(13,13,12,.6);
  --ink-30: rgba(13,13,12,.3);
  --ink-12: rgba(13,13,12,.12);
  --paper: #ffffff;

  --font-display: "aktiv-grotesk", "Arial Narrow", Arial, sans-serif;
  --font-mono: "IBM Plex Mono", "SFMono-Regular", Consolas, monospace;

  --hero-col: clamp(90px, 34vw, 600px);
  --hero-grid-h: clamp(80px, 34vw, 640px);
  --hero-inset: clamp(36px, 14vw, 300px);
  --hero-gap: clamp(16px, 4vw, 57px);
  --hero-divider-gap: clamp(14px, 3.3vw, 46px);
  --hero-align-shift: clamp(40px, 6vw, 140px);
  --hero-mark-shift: clamp(28px, 3.8vw, 56px);
  --footer-contact-shift-x: calc(var(--hero-inset) + var(--hero-align-shift) - max(0px, (100vw - var(--maxw)) / 2) - var(--edge));
  --h1-vw: 6.25vw;
  --h1-min: 20px;

  --dur-s: .4s;
  --dur-m: .8s;
  --dur-l: 1.2s;
  --ease-in-out: cubic-bezier(.76,0,.24,1);
  --ease-out: cubic-bezier(.25,1,.5,1);
  --ease-in: cubic-bezier(.5,0,.75,0);
  --ease-write: cubic-bezier(.333,0,.667,1);

  --edge: clamp(8px, 1vw, 16px);
  --maxw: 1520px;
}

/* ---------- page transitions (menu navigation between pages) ---------- */
/* opts every same-origin navigation (e.g. clicking a nav-overlay link)
   into the browser's native cross-document view transition instead of a
   plain hard navigation, which otherwise keeps the outgoing page's live,
   still-running frame on screen (mid-animation drawings included) for
   the whole time the next page is loading. With this, the browser instead
   holds a static snapshot of the outgoing page and swaps to the new one
   the instant it's ready - no in-between frames, nothing left running.
   Chromium/WebKit only for now; browsers without support just ignore
   this and keep today's default navigation, so it's a pure improvement. */
@view-transition {
  navigation: auto;
}
/* an instant cut, not a cross-fade: the new page's first frame should
   replace the old one directly, with nothing visible in between */
::view-transition-old(root),
::view-transition-new(root) {
  animation: none;
  mix-blend-mode: normal;
}

*{box-sizing:border-box;}
html{-webkit-text-size-adjust:100%; background:var(--paper);}
em{font-style:normal;}
body{
  position:relative;
  margin:0;
  background:var(--paper);
  color:var(--ink);
  font-family:var(--font-display);
  font-size:16px;
  line-height:1.4;
  -webkit-font-smoothing:antialiased;
  overflow-x:clip;
  cursor:default;
}
a{color:inherit; text-decoration:none;}
h1,h2{margin:0; text-wrap:balance;}
::selection{background:var(--ink); color:var(--paper);}
::-webkit-scrollbar{display:none;}
*{scrollbar-width:none;}

main, header, footer, section{position:relative; z-index:1;}

/* ---------- line-mask reveal primitive ---------- */
.line-mask{
  display:block;
  overflow:clip;
  padding-bottom:0.14em;
  margin-bottom:-0.14em;
}
.line-mask.inline{display:inline-block;}
.line{
  display:block;
  transform:translateY(135%);
  will-change:transform, filter;
}
.line-mask.inline .line{display:inline-block;}

/* ---------- preloader ---------- */
.preloader-count{
  position:fixed;
  left:var(--edge); bottom:0;
  z-index:96;
  font-family:var(--font-display);
  font-weight:500;
  font-size:clamp(48px, 8vw, 108px);
  line-height:1;
  letter-spacing:-.02em;
  font-variant-numeric:tabular-nums;
  pointer-events:none;
}

/* ---------- nav ---------- */
.nav{
  position:fixed; top:0; left:0; right:0;
  z-index:50;
  display:flex; align-items:center; justify-content:flex-end;
  padding:20px var(--edge);
  max-width:var(--maxw);
  margin:0 auto; right:0;
  pointer-events:none;
}
.nav-toggle{
  pointer-events:auto;
  appearance:none; border:none;
  background:var(--ink);
  color:var(--paper);
  cursor:pointer;
  display:flex; align-items:center; gap:8px;
  font-family:var(--font-display);
  font-weight:700;
  font-size:13px;
  letter-spacing:.02em;
  border-radius:999px;
  padding:10px 18px;
}
.nav-toggle-icon{
  display:none; flex-direction:column; justify-content:center; gap:4px;
  width:16px; height:14px;
}
.nav-toggle-icon span{
  display:block;
  height:1.5px;
  background:currentColor;
  transition:transform var(--dur-s) var(--ease-in-out);
}
.nav-toggle.is-open .nav-toggle-icon span:first-child{transform:translateY(2.75px) rotate(45deg);}
.nav-toggle.is-open .nav-toggle-icon span:last-child{transform:translateY(-2.75px) rotate(-45deg);}

.nav-overlay{
  --nav-mark-w: clamp(26px, 6.5vw, 105px);
  position:fixed; inset:0;
  z-index:45;
  display:flex; align-items:flex-start;
  padding:24px var(--edge) 40px;
  overflow-y:auto;
  background:transparent;
  opacity:0; visibility:hidden;
  pointer-events:none;
  transition:opacity var(--dur-m) var(--ease-in-out), visibility 0s linear var(--dur-m);
}
.nav-overlay.is-open{
  opacity:1; visibility:visible;
  background:var(--paper);
  pointer-events:auto;
  transition:opacity var(--dur-m) var(--ease-in-out), visibility 0s;
}
.nav-overlay-badge{
  position:absolute; top:32px;
  left:var(--edge);
  font-family:var(--font-display);
  font-size:16px;
  font-weight:600;
  line-height:1.05;
  letter-spacing:-.01em;
  color:var(--ink);
}
.nav-overlay-mark{
  position:absolute;
  left:calc(var(--hero-inset) + var(--hero-align-shift) + var(--hero-mark-shift));
  top:32px;
  width:var(--nav-mark-w);
  color:var(--ink);
}
.nav-overlay-mark svg{width:100%; height:auto; display:block;}
.nav-overlay-line{
  position:absolute;
  left:calc(var(--hero-col) + var(--hero-divider-gap));
  top:32px;
  width:1px;
  background:var(--ink);
}
.nav-list{
  list-style:none; margin:8px 0 0; padding:0;
  flex:1 1 auto;
  margin-left:calc(var(--hero-col) + var(--hero-gap) - var(--edge));
  display:flex; flex-direction:column;
  gap:clamp(20px, 3vw, 40px);
}
.nav-list li{
  display:flex; align-items:center; justify-content:space-between;
  gap:24px;
  opacity:0;
  transform:translateY(12px);
  transition:opacity var(--dur-m) var(--ease-in-out), transform var(--dur-m) var(--ease-in-out);
}
.nav-overlay.is-open .nav-list li{
  opacity:1;
  transform:translateY(0);
}
.nav-list li:nth-child(1){transition-delay:.03s;}
.nav-list li:nth-child(2){transition-delay:.06s;}
.nav-list li:nth-child(3){transition-delay:.09s;}
.nav-list li:nth-child(4){transition-delay:.12s;}
.nav-list li:nth-child(5){transition-delay:.15s;}
.nav-list li:nth-child(6){transition-delay:.18s;}
.nav-list li:nth-child(7){transition-delay:.21s;}
.nav-list li:nth-child(8){transition-delay:.24s;}
.nav-list li:nth-child(9){transition-delay:.27s;}
.nav-list a{
  font-family:var(--font-display);
  font-weight:800;
  font-size:53px;
  letter-spacing:-.02em;
  line-height:.65;
  color:var(--ink);
  transition:color var(--dur-s) var(--ease-in-out);
}
.nav-list a:hover{color:var(--ink-30);}

/* ---------- nav overlay handoff between pages (see script.js) ---------- */
/* set on <html> by an inline <head> script, before body paints, when the
   previous page left via a nav-overlay link: forces the overlay straight
   into its open/opaque look with no transition, so the incoming page's
   own content is never visible - not even for one frame - underneath it.
   script.js takes over once it has run, then fades this out normally
   (see the "reveal after a handoff" block there). */
html.nav-transition-incoming .nav-overlay{
  transition:none !important;
  opacity:1; visibility:visible;
  background:var(--paper);
  pointer-events:auto;
}
html.nav-transition-incoming .nav-overlay .nav-list li{
  transition:none !important;
  opacity:1;
  transform:translateY(0);
}
/* momentary escape hatch script.js uses to switch the overlay from the
   ancestor-driven cover above to its real is-open state without any
   transition playing for that one swap (see the "reveal after a handoff"
   block in script.js) */
.nav-overlay.no-transition,
.nav-overlay.no-transition .nav-list li{
  transition:none !important;
}

@media (max-width:640px){
  .nav-overlay{--nav-mark-w: clamp(38px, 11vw, 105px);}
  .nav-overlay-badge{font-size:9px; max-width:66px; line-height:1.4;}
  .nav-list{gap:18px; margin-top:44px;}
  .nav-list a{font-size:clamp(20px, 7vw, 34px);}
  .nav-toggle{
    width:44px; height:44px;
    padding:0;
    justify-content:center;
    border-radius:50%;
  }
  .nav-toggle-label{display:none;}
  .nav-toggle-icon{display:flex;}
}

/* ---------- underline hover ---------- */
[data-underline]{
  background-image:linear-gradient(currentColor, currentColor);
  background-position:0 92%;
  background-repeat:no-repeat;
  background-size:100% 1px;
  transition:background-size var(--dur-m) var(--ease-in-out);
}
[data-underline]:hover{background-size:0% 1px;}

/* ---------- hero ---------- */
.hero{padding:44px 0 clamp(16px, 2.2vw, 30px);}

.hero-grid{
  display:grid;
  grid-template-columns:var(--hero-col) 1fr;
  column-gap:var(--hero-gap);
  min-height:var(--hero-grid-h);
  margin-bottom:12px;
}
.hero-left{
  display:flex; flex-direction:column;
  padding-bottom:6px;
  margin-left:calc(var(--hero-inset) + var(--hero-align-shift));
}
.hero-mark{
  width:clamp(26px, 6.5vw, 105px);
  margin-left:var(--hero-mark-shift);
  color:var(--ink);
}
.hero-mark svg{width:100%; height:auto; display:block;}
.hero-role{
  margin:auto 0 0;
  margin-left:var(--hero-mark-shift);
  width:fit-content;
  font-family:var(--font-display);
  font-weight:600;
  font-size:16px;
  line-height:1.05;
  letter-spacing:-.03em;
}
.hero-divider{
  position:absolute;
  left:calc(var(--hero-col) + var(--hero-divider-gap));
  top:32px;
  width:1px;
  height:calc(clamp(6px, 1.1vw, 16px) + var(--hero-grid-h) - (32px - clamp(4px, .86vw, 12px)));
  background:var(--ink);
}
.hero-right{
  display:flex; flex-direction:column;
  justify-content:flex-end;
}
.hero-meta-row{
  display:flex; flex-direction:column; gap:2px;
  margin:0 0 auto;
  font-family:var(--font-display);
  font-weight:600;
  font-size:16px;
  line-height:1.05;
  letter-spacing:-.03em;
  color:var(--ink);
  transform:translateY(-12px);
}
.hero-name{
  font-size:clamp(var(--h1-min), var(--h1-vw), 160px);
  font-weight:700;
  line-height:.88;
  letter-spacing:-.05em;
  margin:0;
}
.hero-statement{
  margin-top:.3em;
  margin-left:calc(var(--hero-inset) + var(--hero-align-shift) + var(--hero-mark-shift));
  font-family:var(--font-display);
  font-weight:700;
  font-size:clamp(var(--h1-min), var(--h1-vw), 160px);
  line-height:.88;
  letter-spacing:-.05em;
}
.hero-statement-offset{
  margin-left:0;
}
.hero-cta{
  position:relative;
  margin-top:calc(32px + 0.3 * clamp(var(--h1-min), var(--h1-vw), 160px));
  margin-left:calc(var(--hero-col) + var(--hero-divider-gap));
}
.hero-cta-line{
  display:block;
  width:1px;
  min-height:clamp(360px, 40vw, 580px);
  background:var(--ink);
}
/* continues the line above past the end of the (clipped) hero section,
   down toward the second question - see the JS that sizes/positions it */
.hero-cta-line-ext{
  position:absolute;
  width:1px;
  background:var(--ink);
}
.hero-cta-question{
  position:absolute;
  margin:0;
  font-family:var(--font-display);
  font-weight:700;
  font-size:clamp(var(--h1-min), var(--h1-vw), 160px);
  line-height:.88;
  letter-spacing:-.05em;
}
.hero-cta-question-right{
  top:25%;
  left:24px;
  max-width:min(850px, calc(100% - 48px));
}
.hero-cta-mark{
  position:absolute;
  z-index:2;
  width:clamp(132px, 14.5vw, 242px);
  height:auto;
  pointer-events:none;
  -webkit-clip-path:circle(0px at 50% 50%);
  clip-path:circle(0px at 50% 50%);
  transition:clip-path .6s var(--ease-out), -webkit-clip-path .6s var(--ease-out);
}
.hero-second-question{
  position:relative;
  margin:0 var(--edge) calc(16px + 0.15 * clamp(var(--h1-min), var(--h1-vw), 160px)) calc(var(--hero-inset) + var(--hero-align-shift) + var(--hero-mark-shift));
  max-width:min(850px, calc(100vw - var(--hero-inset) - var(--hero-align-shift) - var(--hero-mark-shift) - var(--edge)));
  font-family:var(--font-display);
  font-weight:700;
  font-size:clamp(var(--h1-min), var(--h1-vw), 160px);
  line-height:.88;
  letter-spacing:-.05em;
  color:var(--ink);
}
.hero-second-mark{
  position:absolute;
  z-index:2;
  width:clamp(132px, 14.5vw, 242px);
  height:auto;
  pointer-events:none;
  -webkit-clip-path:circle(0px at 50% 50%);
  clip-path:circle(0px at 50% 50%);
  transition:clip-path .6s var(--ease-out), -webkit-clip-path .6s var(--ease-out);
}
.section-rule{
  border:none;
  height:1px;
  background:var(--ink-12);
  width:calc(100% - 2 * var(--edge));
  max-width:calc(var(--maxw) - 2 * var(--edge));
  margin:0 auto;
}
.partners + .section-rule{
  margin-bottom:clamp(24px, 3vw, 48px);
}

/* ---------- partners marquee ---------- */
.partners{
  /* less top padding than bottom - the second hero question right above
     already carries its own bottom margin, so the two stacked together
     were leaving a bigger gap here than after the marquee */
  padding:clamp(24px, 2.5vw, 40px) 0 clamp(48px, 5vw, 80px);
}
.partners-marquee{
  position:relative;
  overflow:hidden;
  -webkit-mask-image:linear-gradient(90deg, transparent, #000 6%, #000 94%, transparent);
  mask-image:linear-gradient(90deg, transparent, #000 6%, #000 94%, transparent);
}
.partners-track{
  display:flex;
  align-items:center;
  width:max-content;
  gap:clamp(48px, 6vw, 96px);
  animation:partners-scroll 34s linear infinite;
}
.partners-marquee:hover .partners-track{animation-play-state:paused;}
.partners-item{
  flex:0 0 auto;
  height:clamp(48px, 6vw, 84px);
  display:flex; align-items:center;
}
.partners-item img{
  height:100%;
  width:auto;
  max-width:none;
  display:block;
  filter:grayscale(1);
  opacity:.7;
  transition:opacity var(--dur-s) var(--ease-in-out), filter var(--dur-s) var(--ease-in-out);
}
@keyframes partners-scroll{
  from{transform:translateX(0);}
  to{transform:translateX(-50%);}
}
@media (prefers-reduced-motion: reduce){
  .partners-track{animation:none;}
  .partners-marquee{overflow-x:auto;}
  .partners-item[data-clone]{display:none;}
}

/* ---------- ring / canvas section ---------- */
.ring-section{
  height:min(78vh, 720px);
  margin:40px 0 20px;
  position:relative;
  perspective:1400px;
  display:flex; align-items:center; justify-content:center;
  touch-action:pan-y;
}
.fluid-canvas{
  position:absolute; inset:0;
  width:100%; height:100%;
  opacity:.5;
  mix-blend-mode:multiply;
}
.ring-wrap{
  position:relative;
  width:100%; height:100%;
  transform-style:preserve-3d;
  cursor:grab;
}
.ring-wrap:active{cursor:grabbing;}
.ring-tile{
  position:absolute;
  top:50%; left:50%;
  width:clamp(140px, 16vw, 220px);
  aspect-ratio:3/4;
  margin:calc(clamp(140px, 16vw, 220px) / -2) 0 0 calc(clamp(140px, 16vw, 220px) / -2);
  border-radius:2px;
  overflow:hidden;
  box-shadow:0 20px 40px -20px var(--ink-30);
}
.ring-tile .fill{
  position:absolute; inset:0;
  background:var(--t1, #ccc);
  background-image:linear-gradient(155deg, var(--t1), var(--t2));
}
.ring-tile .fill::after{
  content:"";
  position:absolute; inset:0;
  background-image:repeating-linear-gradient(90deg, rgba(0,0,0,.06) 0 1px, transparent 1px 22px);
}
.ring-tile .label{
  position:absolute; left:10px; bottom:10px;
  font-family:var(--font-mono);
  font-size:10px;
  color:rgba(255,255,255,.9);
}

/* ---------- featured strip ---------- */
.featured{padding:80px 0;}
.featured-head{
  display:flex; align-items:flex-end; gap:24px; flex-wrap:wrap;
  margin-bottom:32px;
}
.featured-head h2{
  font-size:clamp(28px, 4vw, 52px);
  font-weight:800;
  letter-spacing:-.02em;
}
.featured-link{
  margin-left:auto;
  font-family:var(--font-mono);
  font-size:12px;
  letter-spacing:.05em;
  text-transform:uppercase;
  padding-bottom:2px;
  align-self:center;
}
.strip{
  display:flex; gap:2px;
  overflow-x:auto;
  padding-bottom:8px;
  -ms-overflow-style:none; scrollbar-width:none;
}
.strip::-webkit-scrollbar{display:none;}
.strip-item{
  flex:0 0 auto;
  width:clamp(160px, 22vw, 260px);
  aspect-ratio:4/5;
  position:relative;
  overflow:hidden;
}
.strip-item .fill{
  position:absolute; inset:0;
  background-image:linear-gradient(155deg, var(--t1), var(--t2));
}
.strip-item .label{
  position:absolute; left:10px; bottom:10px;
  font-family:var(--font-mono);
  font-size:10px;
  color:rgba(255,255,255,.9);
}

/* ---------- ledger / capabilities ---------- */
.ledger{padding:60px 0 100px;}
.ledger-head{
  display:flex; flex-wrap:wrap; gap:0 18px;
  margin-bottom:36px;
}
.ledger-head h2{
  font-size:clamp(28px, 4.4vw, 58px);
  font-weight:800;
  letter-spacing:-.02em;
}
.ledger-table{border-top:1px solid var(--ink-12);}
.ledger-row{
  display:grid;
  grid-template-columns:64px 1fr auto;
  gap:16px;
  align-items:center;
  padding:16px 10px;
  border-bottom:1px solid var(--ink-12);
  transition:background var(--dur-s) linear;
}
.ledger-row:hover{background:var(--ink-12);}
.ledger-row .yr{font-family:var(--font-mono); font-size:12px; color:var(--ink-60);}
.ledger-row .name{font-size:clamp(16px,2vw,22px); font-weight:700;}
.ledger-row .detail{
  font-family:var(--font-mono); font-size:11px;
  letter-spacing:.04em; text-transform:uppercase; color:var(--ink-60);
  text-align:right;
}

/* ---------- footer ---------- */
.footer{
  padding:clamp(56px, 5.7vw, 80px) var(--edge) 0;
  max-width:var(--maxw);
  margin:0 auto;
}
.footer-top{
  position:relative;
  margin-top:clamp(48px, 6vw, 88px);
}
.footer-statement{
  display:flow-root;
  width:fit-content;
  margin:0 auto;
  text-align:left;
  transform:translateX(clamp(20px, 6.43vw, 90px));
  font-family:var(--font-display);
  font-size:clamp(var(--h1-min), var(--h1-vw), 160px);
  font-weight:700;
  letter-spacing:-.05em;
  line-height:1;
}

.footer-contact{
  position:absolute;
  left:calc(var(--footer-contact-shift-x) + var(--hero-mark-shift));
  bottom:2mm;
  max-width:320px;
}
.footer-contact-label{
  font-family:var(--font-display);
  font-weight:600;
  font-size:16px;
  line-height:1.05;
  letter-spacing:-.01em;
}
.footer-contact-sub{
  margin:44px 0 6px;
  font-family:var(--font-display);
  font-weight:600;
  font-size:16px;
  line-height:1.05;
  letter-spacing:-.01em;
  color:var(--ink-60);
}

.footer-socials{
  display:flex; justify-content:center; gap:18px;
  margin:-40px 0 clamp(100px, 13vw, 160px);
}
.footer-socials a{
  width:72px; height:72px;
  background:var(--paper);
  color:var(--ink);
  border:1px solid var(--ink);
  border-radius:50%;
  display:flex; align-items:center; justify-content:center;
  transition:background var(--dur-s) var(--ease-out), color var(--dur-s) var(--ease-out);
}
.footer-socials a:hover{background:var(--ink); color:var(--paper);}
.footer-socials svg{width:26px; height:26px;}

.mail-link{
  position:relative;
  display:inline-block;
  max-width:100%;
  overflow:clip;
  font-family:var(--font-display);
  font-size:16px;
  font-weight:600;
  line-height:1.05;
  letter-spacing:-.01em;
  overflow-wrap:break-word;
}
.mail-link span{display:block; transition:transform var(--dur-m) var(--ease-in-out);}
.mail-link [data-shadow]{position:absolute; inset:0; transform:translateY(100%);}
.mail-link:hover [data-label]{transform:translateY(-100%);}
.mail-link:hover [data-shadow]{transform:translateY(0);}

.footer-bottom{
  margin-top:64px;
  padding:18px 0 32px;
  border-top:1px solid var(--ink-12);
  display:flex; justify-content:space-between; flex-wrap:wrap; gap:8px;
  font-family:var(--font-mono);
  font-size:11px;
  color:var(--ink-60);
}

/* ---------- cursor note ("press / to leave a note") ---------- */
.cursor-note{
  position:fixed; top:0; left:0;
  z-index:80;
  pointer-events:none;
  transform:translate(-9999px,-9999px);
  font-family:var(--font-display);
  font-size:13px;
  font-weight:500;
  color:var(--paper);
  background:var(--ink);
  padding:6px 12px;
  border-radius:14px;
  border-top-left-radius:0;
  white-space:nowrap;
  opacity:0;
  transition:opacity var(--dur-s) var(--ease-out);
}
.cursor-note.is-active{opacity:1;}

/* ---------- page blob: same fluid cursor trail, painted directly across the whole page ---------- */
.page-blob-svg{
  position:absolute;
  inset:0;
  width:100%;
  height:100%;
  z-index:0;
  pointer-events:none;
  overflow:visible;
}
@media (pointer:coarse), (prefers-reduced-motion: reduce){ .page-blob-svg{display:none;} }

.hero{position:relative; overflow:clip;}
.hero-content{position:relative; z-index:1;}

@media (max-width:760px){
  :root{
    --footer-contact-shift-x: calc(var(--hero-inset) + clamp(16px, 5.5vw, 90px) - var(--edge));
    --hero-gap: clamp(28px, 8vw, 57px);
    --h1-min: 28px;
  }
  .hero{padding-top:100px;}
  /* the two-column grid (narrow logo/copyright rail + name/date) only has
     room to sit side by side once the right column's text is big enough
     to make the left rail's short, gap-free ratio work; on mobile the two
     columns are close enough in height that they collide, so stack them
     instead - same content, same order, just vertical now */
  .hero-grid{grid-template-columns:1fr; row-gap:20px; min-height:0;}
  .hero-divider{display:none;}
  .footer-contact{
    position:static;
    max-width:calc(100vw - var(--hero-inset) - clamp(16px, 5.5vw, 90px) - var(--hero-mark-shift) - var(--edge));
    margin-left:calc(var(--footer-contact-shift-x) + var(--hero-mark-shift));
  }
  .footer-statement{margin-top:clamp(32px, 8vw, 56px);}
  .hero-mark{width:clamp(38px, 11vw, 105px);}
  .hero-left{gap:20px; margin-left:calc(var(--hero-inset) + clamp(16px, 5.5vw, 90px));}
  /* stacked below hero-left now (see .hero-grid above); match its left
     indent so the two blocks share the same edge instead of hero-right
     sitting flush against the viewport edge */
  .hero-right{margin-left:calc(var(--hero-inset) + clamp(16px, 5.5vw, 90px));}
  .hero-meta-row{transform:none;}
  .nav-overlay-mark{left:calc(var(--hero-inset) + clamp(16px, 5.5vw, 90px) + var(--hero-mark-shift)); top:88px;}
  .nav-overlay-badge{top:88px;}
  .nav-overlay-line{top:88px;}
  .nav-list{margin-top:52px;}
  .hero-role{margin-top:0; margin-bottom:auto;}
  .hero-statement{margin-top:16px; margin-left:calc(var(--hero-inset) + clamp(16px, 5.5vw, 90px) + var(--hero-mark-shift));}
  .hero-statement-offset{margin-left:0;}
  .hero-grid{margin-bottom:28px;}
  .hero-meta-row{gap:6px;}
  .hero-cta-line{min-height:180px;}
  .hero-second-question{
    margin-left:calc(var(--hero-inset) + clamp(16px, 5.5vw, 90px) + var(--hero-mark-shift));
    max-width:calc(100vw - var(--hero-inset) - clamp(16px, 5.5vw, 90px) - var(--hero-mark-shift) - var(--edge));
  }
}

/* ---------- ospiti: guest cards loaded from Supabase ---------- */
.ospiti{
  position:relative;
  z-index:1;
  max-width:var(--maxw);
  margin:0 auto;
  padding:96px var(--edge) 40px;
}
.ospiti[hidden]{display:none;}
.ospiti-page{padding-top:clamp(120px, 18vh, 220px); min-height:60vh;}
.ospiti-empty{
  font-family:var(--font-mono);
  font-size:13px;
  color:var(--ink-60);
}
.ospiti-header{margin-bottom:32px;}
.ospiti-header .line{
  font-family:var(--font-mono);
  font-size:12px;
  letter-spacing:.12em;
  text-transform:uppercase;
  color:var(--ink-60);
}
.ospiti-grid{
  display:grid;
  grid-template-columns:repeat(auto-fill, minmax(200px, 1fr));
  gap:24px;
}
.ospiti-card{display:flex; flex-direction:column; gap:10px;}
.ospiti-card-photo{
  aspect-ratio:3/4;
  border-radius:2px;
  overflow:hidden;
  background:#ececea;
  display:flex; align-items:center; justify-content:center;
}
.ospiti-card-photo img{width:100%; height:100%; object-fit:cover; display:block;}
.ospiti-card-photo .initials{
  font-family:var(--font-mono);
  font-size:24px;
  color:var(--ink-30);
}
.ospiti-card-name{
  font-family:var(--font-display);
  font-weight:700;
  font-size:16px;
  color:var(--ink);
}
.ospiti-card-role{
  font-family:var(--font-mono);
  font-size:11px;
  text-transform:uppercase;
  letter-spacing:.04em;
  color:var(--ink-60);
}
.ospiti-card-bio{
  font-family:var(--font-display);
  font-size:13px;
  line-height:1.4;
  color:var(--ink-60);
}
@media (max-width:520px){
  .ospiti-grid{grid-template-columns:repeat(auto-fill, minmax(140px, 1fr));}
}

@media (prefers-reduced-motion: reduce){
  *{animation-duration:.01ms !important; animation-iteration-count:1 !important; transition-duration:.01ms !important;}
}

/* ---------- manifesto ---------- */
.manifesto-qa{
  padding:32px 0 clamp(60px, 8vw, 140px);
  min-height:60vh;
}
.manifesto-qa-list{
  position:relative;
  /* same left position as "Home" in the menu (hero-col + hero-gap) */
  margin-left:calc(var(--hero-col) + var(--hero-gap));
  margin-right:var(--edge);
  display:flex;
  flex-direction:column;
  gap:1cm;
}
.manifesto-qa-item{
  position:relative;
}
.manifesto-qa-line{
  position:absolute;
  /* pulls back to hero-col + hero-divider-gap, the same position as the
     menu's own vertical line. Split into two elements (-a/-b) because the
     reference PDF's line isn't one unbroken run: it stops after the first
     item + decor, leaving the reversed item's text without a line beside
     it (see .manifesto-qa-item-reverse .manifesto-qa-answer), then resumes
     before the last item; JS positions each segment's top/height */
  left:calc(var(--hero-divider-gap) - var(--hero-gap));
  top:0;
  bottom:0;
  width:1px;
  background:var(--ink);
}
.manifesto-qa-mark{
  position:absolute;
  z-index:2;
  width:clamp(70px, 8vw, 130px);
  height:auto;
  pointer-events:none;
}
.manifesto-qa-answer{
  margin-top:12px;
  max-width:640px;
}
.manifesto-qa-answer p{
  margin:0 0 20px;
  font-family:var(--font-display);
  font-size:16px;
  line-height:1.05;
  letter-spacing:-.03em;
  color:var(--ink);
}
.manifesto-qa-answer p:last-child{margin-bottom:0;}
.manifesto-qa-answer strong{font-weight:700;}

/* ---------- manifesto draft: bigger marks, question-less semibold answers ---------- */
.manifesto-qa-draft .manifesto-qa-mark{width:clamp(100px, 35vw, 540px);}
/* the bird-hat and horse marks are enlarged further (matching size) */
.manifesto-qa-draft .manifesto-qa-mark-big{width:clamp(110px, 41vw, 650px);}
/* the horse (item 3 slot) specifically, a bit smaller than the bird-hat */
.manifesto-qa-draft [data-push-down] .manifesto-qa-mark-big{width:clamp(85px, 33vw, 500px);}
.manifesto-qa-draft .manifesto-qa-answer{max-width:900px;}
.manifesto-qa-draft .manifesto-qa-item-reverse .manifesto-qa-answer{
  /* no line runs beside this item in the reference PDF, so its text isn't
     pinned to the line's column like the others: it's centered in the row
     instead (margin-left set in JS, once its true content width is known).
     width:max-content so the box shrinks to the longest line - otherwise it
     fills its max-width and the JS would center an empty box, not the text */
  width:max-content;
}
.manifesto-qa-draft .manifesto-qa-answer p{
  margin:0 0 clamp(28px, 3.4vw, 48px);
}
.manifesto-qa-draft .manifesto-qa-answer p:last-child{margin-bottom:0;}
.manifesto-qa-draft .manifesto-qa-answer .draft-line{
  display:block;
  font-weight:600;
  font-size:clamp(21px, 3.3vw, 35px);
  line-height:.47;
  letter-spacing:-.02em;
  margin-bottom:.4em;
}
.manifesto-qa-draft .manifesto-qa-answer .draft-line:last-child{margin-bottom:0;}
.manifesto-qa-decor{
  /* same left position as the item lines/marks, purely decorative */
  margin-left:calc(var(--hero-divider-gap) - var(--hero-gap));
  margin-top:-50px;
}
.manifesto-qa-decor img{
  display:block;
  width:clamp(110px, 39vw, 630px);
  height:auto;
  pointer-events:none;
}

/* ---------- footer meta (privacy link + credit) ---------- */
.footer-meta{
  display:flex; flex-wrap:wrap; align-items:flex-end; gap:12px;
  margin-top:24px;
  font-family:var(--font-display);
  font-size:16px;
  font-weight:600;
  line-height:1.05;
  letter-spacing:-.01em;
}
.footer-meta-link{
  appearance:none; border:none; background:none;
  padding:0;
  font:inherit;
  letter-spacing:inherit;
  font-weight:600;
  color:var(--ink);
  cursor:pointer;
  text-decoration:underline;
  text-underline-offset:3px;
}
.footer-meta-link:hover{opacity:.6;}
.footer-meta-credit{color:var(--ink-60);}

/* ---------- privacy policy modal ---------- */
.privacy-modal{
  position:fixed; inset:0;
  z-index:200;
  display:flex; align-items:center; justify-content:center;
  padding:24px;
  opacity:0; visibility:hidden;
  pointer-events:none;
  transition:opacity var(--dur-m) var(--ease-in-out), visibility 0s linear var(--dur-m);
}
.privacy-modal.is-open{
  opacity:1; visibility:visible;
  pointer-events:auto;
  transition:opacity var(--dur-m) var(--ease-in-out), visibility 0s;
}
.privacy-modal-backdrop{
  position:absolute; inset:0;
  background:rgba(13,13,12,.6);
}
.privacy-modal-panel{
  position:relative;
  background:var(--paper);
  width:100%;
  max-width:640px;
  max-height:min(760px, 86vh);
  overflow-y:auto;
  border-radius:16px;
  padding:clamp(24px, 4vw, 48px);
  box-shadow:0 40px 80px -20px rgba(13,13,12,.35);
}
.privacy-modal-close{
  position:absolute; top:16px; right:16px;
  appearance:none; border:none; background:none;
  width:36px; height:36px;
  display:flex; align-items:center; justify-content:center;
  color:var(--ink);
  font-size:22px;
  line-height:1;
  cursor:pointer;
}
.privacy-modal-close:hover{opacity:.6;}
.privacy-modal-title{
  font-family:var(--font-display);
  font-weight:800;
  font-size:clamp(28px, 4vw, 36px);
  letter-spacing:-.02em;
  line-height:.88;
  margin:0 24px 8px 0;
}
.privacy-modal-subtitle{
  font-family:var(--font-display);
  font-size:15px;
  color:var(--ink-60);
  margin:0 0 clamp(20px, 3vw, 32px);
}
.privacy-modal-body section{margin-bottom:clamp(18px, 3vw, 26px);}
.privacy-modal-body h3{
  font-family:var(--font-display);
  font-weight:700;
  font-size:17px;
  letter-spacing:-.01em;
  margin:0 0 8px;
}
.privacy-modal-body p{
  font-family:var(--font-display);
  font-size:14px;
  line-height:1.6;
  color:var(--ink-60);
  margin:0;
}
.privacy-modal-updated{
  font-size:12px !important;
  color:var(--ink-30) !important;
  margin-top:8px !important;
}
.privacy-modal-cta{
  display:block;
  width:100%;
  margin-top:clamp(20px, 3vw, 28px);
  padding:15px 24px;
  border:none;
  border-radius:999px;
  background:var(--ink);
  color:var(--paper);
  font-family:var(--font-display);
  font-weight:700;
  font-size:14px;
  cursor:pointer;
  transition:opacity var(--dur-s) var(--ease-out);
}
.privacy-modal-cta:hover{opacity:.85;}

@media (max-width:640px){
  .privacy-modal-panel{padding:24px 20px; border-radius:20px;}
}

@media (max-width:760px){
  .manifesto-qa{padding-top:88px;}
  /* width:max-content (set for desktop centering, see above) ignores the
     container and sizes to the text's unwrapped width, which overflows
     the much narrower mobile column; fall back to filling the column like
     the other items instead */
  .manifesto-qa-draft .manifesto-qa-item-reverse .manifesto-qa-answer{width:auto;}
  /* each .draft-line is a manually-set line break matching the reference
     PDF's layout, sized for a wide desktop column at a very tight 0.47
     line-height (one line per span, by design). On a narrow mobile column
     that same phrase doesn't fit on one line, so the browser wraps it -
     and at 0.47 line-height the wrapped half collides with the next
     .draft-line entirely. Once wrapping is unavoidable there's no version
     of this that preserves the exact desktop line breaks, so it falls
     back to normal flowing paragraph text instead (same weight, same
     scaled-down size, just a readable line-height) */
  .manifesto-qa-draft .manifesto-qa-answer .draft-line{
    display:inline;
    line-height:1.3;
  }
}