/* Roboto — self-hosted */
@font-face{font-family:"Roboto";src:url("/logos/Roboto-Thin.ttf") format("truetype");font-weight:100;font-style:normal;font-display:swap}
@font-face{font-family:"Roboto";src:url("/logos/Roboto-ThinItalic.ttf") format("truetype");font-weight:100;font-style:italic;font-display:swap}
@font-face{font-family:"Roboto";src:url("/logos/Roboto-Light.ttf") format("truetype");font-weight:300;font-style:normal;font-display:swap}
@font-face{font-family:"Roboto";src:url("/logos/Roboto-LightItalic.ttf") format("truetype");font-weight:300;font-style:italic;font-display:swap}
@font-face{font-family:"Roboto";src:url("/logos/Roboto-Regular.ttf") format("truetype");font-weight:400;font-style:normal;font-display:swap}
@font-face{font-family:"Roboto";src:url("/logos/Roboto-Italic.ttf") format("truetype");font-weight:400;font-style:italic;font-display:swap}
@font-face{font-family:"Roboto";src:url("/logos/Roboto-Medium.ttf") format("truetype");font-weight:500;font-style:normal;font-display:swap}
@font-face{font-family:"Roboto";src:url("/logos/Roboto-MediumItalic.ttf") format("truetype");font-weight:500;font-style:italic;font-display:swap}
@font-face{font-family:"Roboto";src:url("/logos/Roboto-Bold.ttf") format("truetype");font-weight:700;font-style:normal;font-display:swap}
@font-face{font-family:"Roboto";src:url("/logos/Roboto-BoldItalic.ttf") format("truetype");font-weight:700;font-style:italic;font-display:swap}
@font-face{font-family:"Roboto";src:url("/logos/Roboto-Black.ttf") format("truetype");font-weight:900;font-style:normal;font-display:swap}
@font-face{font-family:"Roboto";src:url("/logos/Roboto-BlackItalic.ttf") format("truetype");font-weight:900;font-style:italic;font-display:swap}

/* ============================================================
   NML — Light & editorial. Strong type, whitespace, thin rules.
   ============================================================ */
:root{
  /* NML brand palette (resolved from Wix tokens) */
  --ink:#002331;          /* color_43 — deep teal-navy, primary ink */
  --ink-soft:#5a6b73;     /* desaturated navy for secondary text */
  --line:#e3e8e9;         /* hairline rules on white */
  --paper:#ffffff;        /* color_11 — white */
  --paper-alt:#f5f8f8;    /* faint tint of brand for alt bands */
  --accent:#27cca5;       /* color_18 — mint/teal accent */
  --accent-ink:#002331;   /* text on accent fills */
  --btn-bg:#002331;       /* solid dark pill on white */
  --btn-fg:#ffffff;       /* light text on the pill */
  --logo-plate:transparent;  /* dark logo sits fine on white */
  --maxw:1180px;
  --pad:clamp(1.25rem,5vw,5rem);
  --r:14px;

  /* Vertical rhythm tokens — every section inherits these.
     Change them here once → propagates to every section consistently. */
  --gap-xs: 0.6rem;
  --gap-sm: 1rem;
  --gap-md: 1.5rem;   /* kicker → heading */
  --gap-lg: 2rem;     /* heading → lead */
  --gap-xl: 3rem;     /* lead → body */
  --gap-2xl: 2.5rem;  /* body → actions */

  /* Reading widths — single source of truth */
  --w-heading: 18ch;
  --w-lead: 62ch;
  --w-narrow: 50ch;
}
:root[data-theme="dark"]{
  --ink:#eef3f3;
  --ink-soft:#8fa3a8;
  --line:#1d2b30;
  --paper:#04161c;          /* deep teal-black, brand-derived */
  --paper-alt:#07212a;
  --accent:#27cca5;
  --accent-ink:#04161c;
  --btn-bg:#eef3f3;       /* solid light pill on dark */
  --btn-fg:#04161c;       /* dark text on the pill */
  --logo-plate:#ffffff;   /* white backplate so the dark logo stays visible */
}
html{transition:none}
body,.nav,.section--alt,.band,.person,.post,.btn,.nl-form input,.stub{
  transition:background-color .5s ease,color .5s ease,border-color .5s ease}
*{box-sizing:border-box;margin:0;padding:0}
html{scroll-behavior:smooth}
body{
  background:var(--paper);
  color:var(--ink);
  font-family:"Roboto",system-ui,sans-serif;
  font-size:clamp(15px,1.05vw,17px);
  line-height:1.65;
  -webkit-font-smoothing:antialiased;
}
h1,h2,h3{font-family:"Roboto",system-ui,sans-serif;font-weight:500;line-height:1.08;letter-spacing:-.01em}
h2{font-size:clamp(1.9rem,4.2vw,3.2rem);max-width:16ch}
h3{font-size:1.15rem;font-weight:500}
a{color:inherit;text-decoration:none}

.kicker{
  font-size:.72rem;letter-spacing:.22em;text-transform:uppercase;
  color:var(--ink-soft);margin-bottom:1.4rem;font-weight:600;
}
.lead{font-size:clamp(1.05rem,1.6vw,1.3rem);color:var(--ink-soft);max-width:62ch;margin-top:1.5rem}
.note{margin-top:1.6rem;font-style:italic;color:var(--ink-soft);max-width:54ch}

/* NAV */
.nav{
  position:sticky;top:0;z-index:50;
  display:flex;align-items:center;gap:2rem;
  padding:1.05rem var(--pad);
  background:color-mix(in srgb,var(--paper) 86%,transparent);
  backdrop-filter:saturate(180%) blur(12px);
  border-bottom:1px solid transparent;
  transition:border-color .3s,padding .3s;
}
.nav.is-stuck{border-color:var(--line);padding-top:.8rem;padding-bottom:.8rem}
.nav__brand{display:flex;align-items:center;gap:.6rem;font-weight:600;font-size:.98rem;margin-right:auto}
.nav__mark{width:9px;height:9px;border-radius:50%;background:var(--accent);
  transition:transform .4s ease}
.nav__brand:hover .nav__mark{transform:scale(1.4)}
.nav__logo{height:64px;width:auto;display:block;
  background:var(--logo-plate);
  padding:6px 10px;border-radius:8px;box-sizing:content-box;
  transition:background .4s ease}
.nav__links{display:flex;gap:1.9rem}
.nav__links a{font-size:.92rem;color:var(--ink-soft);position:relative;padding:.2rem 0}
.nav__links a::after{content:"";position:absolute;left:0;right:100%;bottom:-2px;
  height:1px;background:var(--ink);transition:right .35s ease}
.nav__links a:hover{color:var(--ink)}
.nav__links a:hover::after{right:0}

/* BUTTONS */
.btn{
  display:inline-block;margin-top:2.3rem;
  padding:.85rem 1.7rem;border:1px solid var(--btn-bg);border-radius:999px;
  font-size:.92rem;font-weight:500;background:var(--btn-bg);color:var(--btn-fg);
  transition:background .25s,color .25s,border-color .25s,transform .25s;
}
.btn:hover{background:var(--accent);border-color:var(--accent);color:var(--accent-ink);transform:translateY(-2px)}
.btn--sm{margin:0;padding:.55rem 1.15rem;font-size:.85rem}
.nav .btn{flex:none;white-space:nowrap;align-self:center}

/* SECTION SHELL */
.hero,.band,.section{padding:clamp(4.5rem,11vw,9rem) var(--pad);max-width:var(--maxw);margin-inline:auto}
.section--alt.section{max-width:none;margin-inline:0;padding:clamp(4.5rem,11vw,9rem) 0}
.section--alt{background:var(--paper-alt);max-width:none;padding:clamp(4.5rem,11vw,9rem) var(--pad)}
.section--alt .s__inner{max-width:var(--maxw);margin-inline:auto;padding-inline:var(--pad)}
.band{border-block:1px solid var(--line)}

/* ====================================================================
   UNIFIED SECTION RHYTHM
   A <Section> renders as a vertical stack with consistent gaps between
   its zones: kicker → heading → lead → body → actions.
   Sections all use the SAME tokens, so editing one variable rebalances
   the whole page.
   ==================================================================== */
.s__kicker { /* same look as .kicker but no manual margin-bottom */
  font-size:.72rem; letter-spacing:.22em; text-transform:uppercase;
  color:var(--ink-soft); font-weight:600;
}
.s__heading {
  font-family:"Roboto",system-ui,sans-serif; font-weight:500;
  line-height:1.08; letter-spacing:-.01em;
  font-size:clamp(1.9rem,4.2vw,3.2rem); max-width:16ch;
  margin-top: var(--gap-md);
}
.s__heading--hero {
  font-size:clamp(2.4rem,6.4vw,5rem); max-width:var(--w-heading);
}
.s__lead {
  font-size:clamp(1.05rem,1.6vw,1.3rem);
  color:var(--ink-soft); max-width:var(--w-lead);
  margin-top: var(--gap-lg);
}
.s__lead--hero {
  font-size:clamp(1.05rem,1.7vw,1.35rem); max-width:60ch;
}
.s__note {
  font-style:italic; color:var(--ink-soft); max-width:54ch;
  margin-top: var(--gap-sm);
}
.s__body  { margin-top: var(--gap-xl); }
.s__actions {
  margin-top: var(--gap-2xl);
  display:flex; gap:1rem; align-items:center; flex-wrap:wrap;
}
.s__actions .btn { margin-top: 0; }  /* override legacy .btn margin */

/* Section-specific element overrides — keep visuals identical, only kill the
   ad-hoc margins so they obey --gap-xl from .s__body instead. */
.stats         { margin-top: 0; }
.roster        { margin-top: 0; }
.portfolio     { margin-top: 0; }
.phex-grid     { margin-top: 0; }
.posts         { margin-top: 0; }
.newsletter    { margin-top: 0; padding-top: var(--gap-2xl); }

/* "See all →" link inside an actions slot looks consistent with btn baseline. */
.s__actions .link-more { margin-top: 0; }

/* HERO */
.hero{padding-top:clamp(5rem,14vw,11rem)}
.hero__title{font-size:clamp(2.4rem,6.4vw,5rem);max-width:18ch}
.hero__lead{font-size:clamp(1.05rem,1.7vw,1.35rem);color:var(--ink-soft);max-width:60ch;margin-top:2rem}
.hero__punch{padding-top:5rem;font-family:"Roboto",system-ui,sans-serif;font-size:clamp(1.3rem,3vw,2rem)}
.count{font-variant-numeric:tabular-nums;color:var(--accent)}

/* WHY STATS */
.stats{display:grid;grid-template-columns:repeat(4,1fr);gap:1.5rem;margin-top:3rem}
.stat{border-top:2px solid var(--accent);padding-top:1.1rem}
.stat__n{font-family:"Roboto",system-ui,sans-serif;font-size:clamp(2.2rem,5vw,3.4rem);font-variant-numeric:tabular-nums}
.stat__l{color:var(--ink-soft);font-size:.92rem;margin-top:.3rem}

/* PEOPLE — dual scrolling marquee */
.roster{margin-top:2rem;border-top:1px solid var(--line);
  padding:1rem 0 0;display:flex;flex-direction:column;gap:.5rem}
.marquee{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)}
.marquee__track{display:flex;width:max-content;gap:0;
  animation:marquee 60s linear infinite;will-change:transform}
.marquee--rev .marquee__track{animation-direction:reverse}
.roster:hover .marquee__track{animation-play-state:paused}
@keyframes marquee{from{transform:translateX(0)}to{transform:translateX(-50%)}}
.mq-item{display:inline-flex;align-items:center;gap:.45rem;padding:.25rem 1rem;
  font-family:"Roboto",system-ui,sans-serif;font-size:clamp(.75rem,1.2vw,1rem);
  color:var(--ink-soft);white-space:nowrap;cursor:pointer;
  background:none;border:none;outline:none;
  transition:color .25s}
.mq-item::after{content:"";width:3px;height:3px;border-radius:50%;
  background:var(--line);transition:background .25s,transform .25s}
.mq-item:hover{color:var(--ink)}
.mq-item:hover::after{background:var(--accent);transform:scale(1.6)}
.mq-item.is-active{color:var(--accent)}
.roster__bio{margin:.6rem auto 0;max-width:60ch;text-align:center;
  min-height:1.4rem;font-size:.8rem;color:var(--ink-soft);
  opacity:0;transition:opacity .35s}
.roster__bio.is-on{opacity:1}
.roster__bio b{color:var(--ink);font-weight:600}

/* WALL — full grid of all shareholders */
.wall{
  margin-top:1rem;
  display:grid;
  grid-template-columns:repeat(auto-fill,minmax(220px,1fr));
  gap:1.5rem;
}
.wall__card{
  display:flex;flex-direction:column;align-items:flex-start;gap:.6rem;
  padding:1.4rem 1.2rem;
  border:1px solid var(--line);
  border-radius:var(--r);
  background:var(--paper);
  transition:border-color .25s, transform .25s;
}
.wall__card:hover{border-color:var(--ink);transform:translateY(-2px)}
.wall__avatar{
  width:100%;aspect-ratio:1/1;border-radius:calc(var(--r) - 4px);
  background:var(--paper-alt);
  display:flex;align-items:center;justify-content:center;
  font-family:"Roboto",system-ui,sans-serif;font-size:2rem;color:var(--ink-soft);
  overflow:hidden;flex-shrink:0;
}
.wall__avatar img{width:100%;height:100%;object-fit:contain;filter:grayscale(1);transition:filter .3s ease}
/* Colorize the photo when hovering the card (or the linked avatar itself). */
.wall__card:hover .wall__avatar img{filter:grayscale(0)}
.wall__avatar--link{cursor:pointer;display:flex}
.wall__name{font-family:"Roboto",system-ui,sans-serif;font-size:1.1rem;color:var(--ink);line-height:1.2}
.wall__role{font-size:.88rem;color:var(--ink-soft);line-height:1.45}
@media (max-width:680px){
  .wall{grid-template-columns:repeat(auto-fill,minmax(160px,1fr));gap:1rem}
  .wall__card{padding:1.1rem 1rem}
}
@media (max-width:680px){
  .marquee__track{animation-duration:40s}
  .mq-item{font-size:.72rem;padding:.2rem .8rem}
}

/* PEOPLE — portrait carousel */
.gallery{margin-top:2.6rem}
.gallery__head{display:flex;align-items:center;justify-content:space-between;margin-bottom:1.2rem}
.gallery__label{font-size:.74rem;letter-spacing:.18em;text-transform:uppercase;color:var(--ink-soft)}
.gallery__nav{display:flex;gap:.6rem}
.gbtn{width:40px;height:40px;border:1px solid var(--line);border-radius:999px;
  background:transparent;color:var(--ink);cursor:pointer;font-size:1rem;
  transition:border-color .2s,color .2s,background .2s,transform .2s}
.gbtn:hover{border-color:var(--accent);color:var(--accent)}
.gbtn:active{transform:scale(.94)}
.gbtn:disabled{opacity:.3;cursor:default;pointer-events:none}
.gallery__track{display:flex;gap:1.1rem;overflow-x:auto;scroll-snap-type:x mandatory;
  scroll-behavior:smooth;padding-bottom:.6rem;cursor:grab;
  scrollbar-width:none;-ms-overflow-style:none;
  -webkit-mask-image:linear-gradient(90deg,transparent,#000 3%,#000 97%,transparent);
  mask-image:linear-gradient(90deg,transparent,#000 3%,#000 97%,transparent)}
.gallery__track::-webkit-scrollbar{display:none}
.gallery__track.is-drag{cursor:grabbing;scroll-behavior:auto}
.gallery__track:focus-visible{outline:2px solid var(--accent);outline-offset:4px}
.card{flex:0 0 auto;width:clamp(190px,22vw,250px);scroll-snap-align:start;
  border:1px solid var(--line);border-radius:var(--r);overflow:hidden;
  background:var(--paper-alt);transition:transform .3s,border-color .3s}
.card:hover{transform:translateY(-4px);border-color:var(--accent)}
.card__img{aspect-ratio:4/5;display:flex;align-items:center;justify-content:center;
  font-family:"Roboto",system-ui,sans-serif;font-size:2.6rem;color:var(--accent);
  background:radial-gradient(120% 120% at 30% 20%,var(--paper),var(--paper-alt));
  user-select:none}
.card__img img{width:100%;height:100%;object-fit:cover;display:block}
.card__body{padding:1rem 1.1rem 1.2rem}
.card__n{font-weight:600;font-size:1rem}
.card__r{color:var(--ink-soft);font-size:.85rem;margin-top:.4rem;line-height:1.5}
@media (max-width:680px){
  .card{width:74vw}
}

/* THEME TOGGLE */
.theme-btn{display:inline-flex;align-items:center;justify-content:center;
  width:38px;height:38px;border:1px solid var(--line);border-radius:999px;
  background:transparent;color:var(--ink);cursor:pointer;flex:none;
  transition:border-color .25s,color .25s,transform .3s}
.theme-btn:hover{border-color:var(--accent);color:var(--accent);transform:rotate(18deg)}
.theme-btn svg{width:17px;height:17px}

/* MOUSE-PARALLAX ACCENT FIELD */
.field{position:absolute;inset:0;overflow:hidden;pointer-events:none;z-index:0}
.field span{
  position:absolute;border-radius:50%;
  border:1.5px solid var(--accent);
  opacity:.22;will-change:transform;
  --mx:0px;--my:0px;
  animation:drift var(--d,18s) ease-in-out infinite alternate;
}
@keyframes drift{
  0%  {transform:translate(calc(var(--mx) + 0px),   calc(var(--my) + 0px))   scale(1)}
  33% {transform:translate(calc(var(--mx) + var(--tx1,12px)), calc(var(--my) + var(--ty1,-18px))) scale(1.04)}
  66% {transform:translate(calc(var(--mx) + var(--tx2,-10px)),calc(var(--my) + var(--ty2,14px)))  scale(.97)}
  100%{transform:translate(calc(var(--mx) + var(--tx3,8px)),  calc(var(--my) + var(--ty3,-8px)))  scale(1.02)}
}
.hero{position:relative}
.hero>*{position:relative;z-index:1}

/* ============================================================
   HERO OPENER — one-shot "opening" animation on page load.
   Fast burst, hard deceleration, then settles into a slow loop.
   Sits behind the text (z-index:0), never intercepts clicks.
   ============================================================ */
.opener{position:absolute;inset:0;z-index:0;overflow:hidden;pointer-events:none}
/* The signature ease: quick out of the gate, long glide to rest. */
:root{--opener-ease:cubic-bezier(.12,.85,.18,1)}

/* --- Variant A: APERTURE — concentric rings burst from center --- */
.opener--aperture{display:grid;place-items:center}
.opener__ring{
  grid-area:1/1;position:relative;border-radius:50%;
  width:min(120vw,1200px);aspect-ratio:1;
  border:2px solid var(--accent);opacity:0;
  transform:scale(.05);
  animation:
    ap-burst 1.6s var(--opener-ease) both,
    ap-breathe 9s ease-in-out 1.7s infinite alternate;
  animation-delay:calc(var(--i) * .13s), calc(1.7s + var(--i) * .13s);
}
@keyframes ap-burst{
  0%  {transform:scale(.05);opacity:0}
  35% {opacity:.75}
  100%{transform:scale(calc(.28 + var(--i) * .18));opacity:.32}
}
@keyframes ap-breathe{
  from{transform:scale(calc(.28 + var(--i) * .18))}
  to  {transform:scale(calc(.32 + var(--i) * .18))}
}

/* --- Variant B: SWEEP — light bars sweep across then drift --- */
.opener--sweep{display:flex;flex-direction:column;justify-content:space-around;padding:6vh 0}
.opener__bar{
  height:2px;width:100%;transform-origin:left center;
  background:linear-gradient(90deg,transparent,var(--accent),transparent);
  opacity:0;transform:translateX(-100%) scaleX(.6);
  animation:
    sw-in 1.5s var(--opener-ease) both,
    sw-drift 12s ease-in-out 1.6s infinite alternate;
  animation-delay:calc(var(--i) * .1s), calc(1.6s + var(--i) * .1s);
}
@keyframes sw-in{
  0%  {transform:translateX(-100%) scaleX(.6);opacity:0}
  40% {opacity:.8}
  100%{transform:translateX(0) scaleX(1);opacity:.38}
}
@keyframes sw-drift{
  from{transform:translateX(0) scaleX(1)}
  to  {transform:translateX(4%) scaleX(1.02)}
}

/* --- Variant C: HEXAGONS — mint hexagons spread, drift together & apart,
       never fully merging, at varied opacities. --- */
.opener--hex{display:grid;place-items:center}
.opener__hex{
  grid-area:1/1;width:34vmin;aspect-ratio:1;
  background:var(--accent);
  clip-path:polygon(25% 5%,75% 5%,100% 50%,75% 95%,25% 95%,0% 50%);
  transform:translate(0,0) scale(.2);opacity:0;will-change:transform,opacity;
  /* spread-in (fast, settles) then a slow perpetual drift toward/away from center */
  animation:hex-in 1.7s var(--opener-ease) both, hex-drift 14s ease-in-out infinite alternate;
}
/* Each hex: its own resting offset (--x/--y), opacity, size, and drift timing.
   Resting offsets are spread but close enough that hexes partially overlap. */
.opener__hex--0{--x:-15vmin;--y:-9vmin; opacity:0;width:38vmin;
  animation-delay:0s, 1.8s; --o:.30; --dx:5vmin;  --dy:3vmin}
.opener__hex--1{--x:14vmin; --y:-12vmin;width:30vmin;
  animation-delay:.12s, 2.0s; --o:.20; --dx:-6vmin;--dy:4vmin}
.opener__hex--2{--x:-12vmin;--y:11vmin; width:32vmin;
  animation-delay:.24s, 1.7s; --o:.16; --dx:6vmin; --dy:-5vmin}
.opener__hex--3{--x:13vmin; --y:10vmin; width:36vmin;
  animation-delay:.36s, 2.2s; --o:.24; --dx:-4vmin;--dy:-4vmin}
@keyframes hex-in{
  0%  {transform:translate(0,0) scale(.2);opacity:0}
  45% {opacity:calc(var(--o) * 1.6)}
  100%{transform:translate(var(--x),var(--y)) scale(1);opacity:var(--o)}
}
@keyframes hex-drift{
  /* drifts from the resting spot toward center-ish and back, never fully merging */
  from{transform:translate(var(--x),var(--y)) rotate(0deg) scale(1)}
  to  {transform:translate(calc(var(--x) + var(--dx)),calc(var(--y) + var(--dy))) rotate(8deg) scale(1.04)}
}

@media(prefers-reduced-motion:reduce){
  .opener{display:none}
}

/* STAT CARDS — 3-up split (Network) */
.statcards{display:grid;grid-template-columns:repeat(3,1fr);gap:1.5rem;margin-top:1rem}
.statcard{border:1px solid var(--line);border-radius:var(--r);background:var(--paper);
  padding:1.8rem 1.6rem;display:flex;flex-direction:column;gap:.4rem;
  border-top:2px solid var(--accent);transition:border-color .25s,transform .25s}
.statcard:hover{transform:translateY(-3px)}
.statcard__kicker{font-size:.72rem;letter-spacing:.18em;text-transform:uppercase;color:var(--ink-soft)}
.statcard__figure{font-family:"Roboto",system-ui,sans-serif;
  font-size:clamp(2.2rem,5vw,3rem);line-height:1.05;color:var(--ink);
  font-variant-numeric:tabular-nums;margin-top:.3rem}
.statcard__label{font-weight:600;font-size:1rem}
.statcard__body{color:var(--ink-soft);font-size:.92rem;line-height:1.55;margin-top:.4rem}
@media (max-width:880px){.statcards{grid-template-columns:1fr}}

/* STEPS — 4-up numbered cards (Build) */
.steps{display:grid;grid-template-columns:repeat(4,1fr);gap:1.5rem;margin-top:1rem;margin-bottom:1rem}
.step{border:1px solid var(--line);border-radius:var(--r);background:var(--paper);
  padding:1.6rem 1.4rem;display:flex;flex-direction:column;gap:.5rem;
  transition:border-color .25s,transform .25s}
.step:hover{border-color:var(--ink);transform:translateY(-3px)}
.step__n{font-family:"Roboto",system-ui,sans-serif;font-size:1.6rem;color:var(--accent);
  font-variant-numeric:tabular-nums;line-height:1}
.step__h{font-weight:600;font-size:1.15rem;padding-bottom:.6rem;border-bottom:1px solid var(--line)}
.step__p{color:var(--ink-soft);font-size:.9rem;line-height:1.55;margin-top:.2rem}
@media (max-width:980px){.steps{grid-template-columns:1fr 1fr}}
@media (max-width:520px){.steps{grid-template-columns:1fr}}

/* TEAM — 3-up bio cards with contact buttons */
.team{display:grid;grid-template-columns:repeat(3,1fr);gap:1.5rem;margin-top:1rem}
.team__card{border:1px solid var(--line);border-radius:var(--r);background:var(--paper);
  padding:1.8rem 1.6rem;display:flex;flex-direction:column;gap:.55rem;
  transition:border-color .25s,transform .25s}
.team__card:hover{border-color:var(--ink);transform:translateY(-3px)}
.team__avatar{width:64px;height:64px;border-radius:50%;background:var(--paper-alt);
  display:flex;align-items:center;justify-content:center;
  font-family:"Roboto",system-ui,sans-serif;font-size:1.3rem;color:var(--ink-soft);
  overflow:hidden;margin-bottom:.4rem}
.team__avatar img{width:100%;height:100%;object-fit:cover;filter:grayscale(1)}
.team__name{font-family:"Roboto",system-ui,sans-serif;font-size:1.2rem;color:var(--ink);line-height:1.2}
.team__role{font-size:.72rem;letter-spacing:.16em;text-transform:uppercase;color:var(--accent)}
.team__bio{color:var(--ink-soft);font-size:.92rem;line-height:1.6;margin-top:.3rem;flex:1}
.team__links{display:flex;gap:.6rem;margin-top:.9rem;flex-wrap:wrap}
.team__btn{display:inline-flex;align-items:center;gap:.45rem;
  padding:.5rem .9rem;border:1px solid var(--line);border-radius:999px;
  font-size:.85rem;color:var(--ink-soft);
  transition:border-color .2s,color .2s,transform .2s}
.team__btn:hover{border-color:var(--accent);color:var(--accent);transform:translateY(-1px)}
@media (max-width:880px){.team{grid-template-columns:1fr}}

/* PARTNERS — mint-framed hexagon logos in a clean wrapping grid (no overlap). */
.phex-grid{
  --hex-w:170px;
  --hex-h:calc(var(--hex-w) * 1.1547);   /* pointy hex ratio 2:√3 */
  display:flex;flex-wrap:wrap;justify-content:center;
  gap:1.6rem;margin-top:1rem;
}
.phex{
  width:var(--hex-w);height:var(--hex-h);
  display:grid;place-items:center;
  clip-path:polygon(50% 0,100% 25%,100% 75%,50% 100%,0 75%,0 25%);
  background:var(--accent);          /* the green frame */
  transition:transform .25s ease, filter .25s ease;
  text-decoration:none;cursor:pointer;
}
.phex:hover{transform:translateY(-4px) scale(1.04);
  filter:drop-shadow(0 8px 18px color-mix(in srgb,var(--accent) 45%,transparent))}
/* inner hexagon — slightly smaller so the green shows only as a thin frame */
.phex__fill{
  width:94%;height:94%;
  display:grid;place-items:center;
  clip-path:polygon(50% 0,100% 25%,100% 75%,50% 100%,0 75%,0 25%);
  background:var(--paper);overflow:hidden;
}
/* logo fills the hexagon */
.phex__inner{display:grid;place-items:center;width:100%;height:100%}
.phex__logo{width:100%;height:100%;object-fit:cover}
.phex__name{font-size:.9rem;text-align:center;color:var(--ink);line-height:1.2;padding:0 .4rem}
@media(max-width:560px){.phex-grid{--hex-w:130px}}

/* PORTFOLIO */
.portfolio{margin-top:3rem;border-top:1px solid var(--line)}
.pf{display:flex;align-items:baseline;gap:3.5rem;padding:1.5rem 0;border-bottom:1px solid var(--line);
  transition:padding-left .3s ease}
.pf:hover{padding-left:1rem}
.pf__logo-box{width:96px;height:96px;flex-shrink:0;align-self:center;display:flex;align-items:center;justify-content:center}
.pf__logo{width:96px;height:96px;object-fit:contain;display:block}
.pf__logo-stub{display:block;width:96px;height:96px;border-radius:8px;background:var(--paper-alt);border:1px solid var(--line)}
.pf--stealth{opacity:.55;cursor:default}
.pf__n{font-family:"Roboto",system-ui,sans-serif;font-size:1.35rem;min-width:13rem}
.pf__l{color:var(--ink-soft);font-size:.95rem;flex:1}
.pf__a{font-size:.85rem;color:var(--ink-soft);white-space:nowrap}
.pf:hover .pf__a{color:var(--ink)}

/* POSTS */
.posts{display:grid;gap:1px;
  background:var(--line);border:1px solid var(--line);border-radius:var(--r);overflow:hidden;
  /* default: as many columns as fit, min 260px wide */
  grid-template-columns:repeat(auto-fill,minmax(260px,1fr))}
/* Explicit column counts when we know how many posts will show.
   Use via <div className="posts posts--cols-3"> etc. */
.posts--cols-3{grid-template-columns:repeat(3,1fr)}
.posts--cols-4{grid-template-columns:repeat(4,1fr)}
@media (max-width:980px){.posts--cols-4{grid-template-columns:repeat(2,1fr)}}
@media (max-width:680px){
  .posts--cols-3,.posts--cols-4{grid-template-columns:1fr}
}

.post{background:var(--paper);display:flex;flex-direction:column;transition:background .3s}
.post:hover{background:var(--paper-alt)}
.post__thumb{aspect-ratio:16/10;overflow:hidden;background:var(--paper-alt);border-bottom:1px solid var(--line)}
.post__thumb img{width:100%;height:100%;object-fit:contain;display:block;transition:transform .5s ease}
.post:hover .post__thumb img{transform:scale(1.03)}
.post__body{padding:1.6rem 1.5rem;display:flex;flex-direction:column;gap:.7rem;flex:1}
.post__meta{font-size:.78rem;color:var(--ink-soft);letter-spacing:.04em;text-transform:uppercase}
.post__t{font-family:"Roboto",system-ui,sans-serif;font-size:1.18rem;line-height:1.25}
.post__e{color:var(--ink-soft);font-size:.9rem;flex:1}
.post__r{font-size:.85rem;margin-top:.4rem}
.link-more{display:inline-block;font-size:.92rem;border-bottom:1px solid var(--ink);padding-bottom:2px}

/* INSIGHTS FOOTER */
.insights-footer{margin-top:4rem;padding-top:2.5rem;border-top:1px solid var(--line);max-width:46ch;margin-inline:auto;text-align:center}
.insights-footer .kicker{margin-bottom:.8rem}
.insights-footer__text{color:var(--ink-soft);font-size:.95rem;margin-bottom:0}
.insights-footer .nl-form{justify-content:center}

/* NEWSLETTER */
.newsletter{margin-top:4rem;padding-top:2.5rem;border-top:1px solid var(--line);max-width:46ch}
.newsletter h3{font-size:1.3rem;margin-bottom:.5rem}
.newsletter p{color:var(--ink-soft);font-size:.95rem}
.nl-form{display:flex;gap:.6rem;margin-top:1.4rem;flex-wrap:wrap}
.nl-form input{flex:1;min-width:200px;padding:.7rem 1rem;border:1px solid var(--line);
  border-radius:999px;background:var(--paper);font:inherit;font-size:.9rem}
.nl-form input:focus{outline:none;border-color:var(--ink)}

/* JOIN — 2-up CTA cards (founders / corporates) */
.join{display:grid;grid-template-columns:repeat(2,1fr);gap:1.5rem;margin-top:3.5rem}
.join__card{border:1px solid var(--line);border-radius:var(--r);background:var(--paper);
  padding:2rem 1.9rem;display:flex;flex-direction:column;gap:.7rem;
  transition:border-color .25s,transform .25s}
.join__card:hover{border-color:var(--ink);transform:translateY(-3px)}
.join__kicker{font-size:.72rem;letter-spacing:.18em;text-transform:uppercase;color:var(--accent);font-weight:600}
.join__title{font-size:1.3rem;line-height:1.25;margin:0}
.join__lead{color:var(--ink-soft);font-size:.95rem;line-height:1.6;margin:0;flex:1}
.join__cta{align-self:flex-start;margin-top:.6rem}
@media(max-width:720px){.join{grid-template-columns:1fr}}

/* Full-width newsletter band (own section, below Partners) */
.newsletter-band{max-width:var(--maxw);margin-inline:auto;padding:0 var(--pad) clamp(4.5rem,11vw,9rem)}
.newsletter--wide{max-width:none;text-align:center;margin-top:0;padding-top:2.5rem;border-top:1px solid var(--line)}
.newsletter--wide p{margin-left:auto;margin-right:auto;max-width:52ch}
.newsletter--wide .nl-form{justify-content:center;max-width:46ch;margin-left:auto;margin-right:auto}

/* FOOTER */
.footer{padding:clamp(3rem,6vw,5rem) var(--pad) 2rem;
  border-top:1px solid var(--line);font-size:.88rem;color:var(--ink-soft);
  background:var(--paper-alt);position:relative}
.footer::before{content:"";position:absolute;top:0;left:var(--pad);right:var(--pad);
  height:2px;background:var(--accent);opacity:.5}
.footer__main{display:grid;grid-template-columns:1.4fr 1fr;gap:3rem;
  max-width:var(--maxw);margin-inline:auto}
.footer__col{display:flex;flex-direction:column;gap:.45rem}
.footer__col+.footer__col{padding-left:3rem;border-left:1px solid var(--line)}
.footer__h{font-size:.72rem;letter-spacing:.18em;text-transform:uppercase;
  color:var(--ink);font-weight:600;margin-bottom:.5rem}
.footer__col a{transition:color .2s}
.footer__col a:hover{color:var(--accent)}
/* legal — own full-width centered strip below a line */
.footer__legal{margin-top:clamp(2.5rem,5vw,3.5rem);
  padding-top:1.6rem;border-top:1px solid var(--line);
  display:flex;justify-content:space-between;align-items:center;gap:1rem;
  font-size:.82rem;color:var(--ink-soft)}
.footer__logo{height:28px;width:auto;display:block;background:var(--logo-plate);padding:4px 8px;border-radius:6px;box-sizing:content-box}
.footer__legal-links{display:flex;align-items:center;gap:1rem}
.footer__legal a{transition:color .2s}
.footer__legal a:hover{color:var(--accent)}
.footer__dot{opacity:.5}
.footer__social{display:flex;gap:.6rem;align-items:center}
.footer__social-btn{display:flex;align-items:center;justify-content:center;
  width:34px;height:34px;border-radius:50%;border:1px solid var(--line);
  color:var(--ink-soft);transition:border-color .2s,color .2s}
.footer__social-btn:hover{border-color:var(--accent);color:var(--accent)}
@media (max-width:880px){
  .stats{grid-template-columns:1fr 1fr}
}
@media (max-width:760px){
  .footer__main{grid-template-columns:1fr;gap:2rem}
  .footer__col+.footer__col{padding-left:0;border-left:none;
    border-top:1px solid var(--line);padding-top:1.5rem}
}

/* MOTION — restrained, deliberate */
.reveal{opacity:0;transform:translateY(22px);
  transition:opacity .8s ease,transform .8s ease}
.reveal.is-in{opacity:1;transform:none}

/* burger — hidden on desktop */
.burger{display:none;flex:none;width:40px;height:40px;border:1px solid var(--line);
  border-radius:999px;background:transparent;cursor:pointer;
  align-items:center;justify-content:center;flex-direction:column;gap:4px;
  transition:border-color .2s}
.burger span{display:block;width:16px;height:2px;background:var(--ink);
  border-radius:2px;transition:transform .3s,opacity .2s}
.burger[aria-expanded="true"] span:nth-child(1){transform:translateY(6px) rotate(45deg)}
.burger[aria-expanded="true"] span:nth-child(2){opacity:0}
.burger[aria-expanded="true"] span:nth-child(3){transform:translateY(-6px) rotate(-45deg)}
.nav__scrim{position:fixed;inset:0;z-index:40;background:rgba(0,0,0,.45);
  opacity:0;transition:opacity .3s}
.nav__scrim.is-on{opacity:1}

/* injected mobile-panel CTA — never shown on desktop */
.nav__panel-cta{display:none}

/* mobile slide-in close button — never shown on desktop */
.nav__close{display:none}

@media (max-width:680px){
  .burger{display:flex}
  .nav__cta{display:none}                 /* moved into the slide-in panel */
  .nav__links a.nav__panel-cta{display:block;margin-top:1.6rem;text-align:center;
    width:100%;border:1px solid var(--btn-bg);
    background:var(--btn-bg);color:var(--btn-fg)}
  .nav__links a.nav__panel-cta:hover{background:var(--accent);
    border-color:var(--accent);color:var(--accent-ink)}
  .nav__links{
    position:fixed;top:0;right:0;z-index:45;
    height:100dvh;width:min(78vw,320px);
    flex-direction:column;gap:0;
    background:var(--paper);border-left:1px solid var(--line);
    padding:5.5rem 1.6rem 2rem;
    transform:translateX(100%);transition:transform .35s cubic-bezier(.4,0,.2,1);
    overflow-y:auto}
  .nav__links.is-open{transform:translateX(0)}
  .nav__close{display:flex;align-items:center;justify-content:center;
    position:absolute;top:1.1rem;right:1.2rem;width:40px;height:40px;
    border:1px solid var(--line);border-radius:999px;background:transparent;
    color:var(--ink);cursor:pointer;transition:border-color .2s,color .2s}
  .nav__close:hover{border-color:var(--accent);color:var(--accent)}
  .nav__links a{font-size:1.1rem;color:var(--ink);padding:1rem 0;
    border-bottom:1px solid var(--line);width:100%}
  .nav__links a::after{display:none}
  .stats{grid-template-columns:1fr;gap:0}
  .stat{border-top:none;border-bottom:1px solid var(--line);padding:1.1rem 0}
  .pf{flex-direction:column;gap:.4rem}
  .pf__n{min-width:0}
}
@media (prefers-reduced-motion:reduce){
  *{scroll-behavior:auto!important}
  .reveal{opacity:1;transform:none;transition:none}
  .nav__mark,.btn,.pf,.person,.post{transition:none}
}

/* ---- Inline post images (set by editor) ---- */
.article img.post-img,
.rte__body .ProseMirror img.post-img {
  height: auto;
  display: block;
  margin: 1.5rem auto;
  border-radius: 8px;
}
.article img.size-sm,   .rte__body .ProseMirror img.size-sm   { max-width: 240px; width: 100%; }
.article img.size-md,   .rte__body .ProseMirror img.size-md   { max-width: 480px; width: 100%; }
.article img.size-full, .rte__body .ProseMirror img.size-full { max-width: 100%; width: 100%; }

.article img.align-left,
.rte__body .ProseMirror img.align-left {
  float: left; margin: .4rem 1.5rem 1rem 0;
}
.article img.align-right,
.rte__body .ProseMirror img.align-right {
  float: right; margin: .4rem 0 1rem 1.5rem;
}
.article img.align-center,
.rte__body .ProseMirror img.align-center {
  float: none; margin-left: auto; margin-right: auto;
}
/* Selected image highlight in the editor */
.rte__body .ProseMirror img.ProseMirror-selectednode {
  outline: 2px solid var(--accent);
  outline-offset: 3px;
}
/* Clear floats at the end of the article so the next section doesn't wrap. */
.article::after { content: ""; display: block; clear: both; }
@media (max-width: 540px) {
  .article img.align-left, .article img.align-right,
  .rte__body .ProseMirror img.align-left, .rte__body .ProseMirror img.align-right {
    float: none; margin: 1.2rem auto;
  }
}

/* Floating image bubble menu in the editor */
.rte__toolbar--floating {
  background: var(--paper);
  border: 1px solid var(--line);
  border-radius: 999px;
  padding: .35rem .45rem;
  box-shadow: 0 10px 24px -14px rgba(0, 35, 49, 0.35);
}

/* ---- Post card frame ("Rahmen") ---- */
.post-card {
  background: var(--paper);
  border: 1px solid var(--line);
  border-radius: var(--r);
  padding: clamp(2rem, 4vw, 3rem) clamp(1.5rem, 4vw, 3rem);
  box-shadow: 0 1px 0 rgba(0, 0, 0, 0.02), 0 14px 32px -28px rgba(0, 35, 49, 0.18);
}
.post-card .kicker { margin-bottom: var(--gap-md); }
.post-card h1 {
  font-size: clamp(2rem, 5vw, 3.4rem);
  max-width: 24ch;
  margin: 0 0 1rem;
}
.post-card .page__meta {
  display: inline-flex; align-items: center; gap: .35rem;
  margin-bottom: 2.5rem;
}
.page__views {
  display: inline-flex; align-items: center; gap: .3rem;
  color: var(--ink-soft);
}

.post-card__foot {
  margin-top: 2.5rem;
  padding-top: 1.5rem;
  border-top: 1px solid var(--line);
  display: flex; justify-content: space-between; align-items: center;
  gap: 1.5rem; flex-wrap: wrap;
}

/* Like button */
.like {
  display: inline-flex; align-items: center; gap: .55rem;
  padding: .55rem 1rem;
  background: transparent;
  border: 1px solid var(--line);
  border-radius: 999px;
  color: var(--ink);
  font: inherit; font-size: .9rem; font-weight: 500;
  cursor: pointer;
  transition: border-color .2s, color .2s, background .2s, transform .15s;
}
.like:hover { border-color: #e85a6a; color: #e85a6a; }
.like:hover svg { fill: #e85a6a; }
.like.is-liked { color: #e85a6a; border-color: #e85a6a; background: color-mix(in srgb, #e85a6a 8%, transparent); }
.like.is-liked svg { fill: #e85a6a; }
.like:active { transform: scale(.97); }
.like__count { font-variant-numeric: tabular-nums; }

/* Share row */
.share { display: inline-flex; align-items: center; gap: .5rem; }
.share__label {
  font-size: .72rem; letter-spacing: .18em; text-transform: uppercase;
  color: var(--ink-soft); margin-right: .25rem;
}
.share__btn {
  display: inline-flex; align-items: center; justify-content: center;
  width: 38px; height: 38px;
  border: 1px solid var(--line); border-radius: 999px;
  color: var(--ink-soft); background: transparent; cursor: pointer;
  transition: border-color .2s, color .2s, transform .2s, background .2s;
}
.share__btn:hover { border-color: var(--accent); color: var(--accent); transform: translateY(-2px); }
.share__btn.is-on { border-color: var(--accent); color: var(--accent); }

/* Recent posts (compact list under a post) */
.recent {
  margin: 4rem auto 0;
  max-width: 760px;
}
.recent__head {
  display: flex; justify-content: space-between; align-items: baseline;
  margin-bottom: 1.4rem;
}
.recent__title {
  font-family: "Roboto", serif; font-weight: 500; font-size: 1.3rem;
  margin: 0;
}
.recent__all {
  font-size: .85rem; color: var(--ink-soft);
  border-bottom: 1px solid var(--line); padding-bottom: 2px;
  transition: color .2s, border-color .2s;
}
.recent__all:hover { color: var(--ink); border-color: var(--ink); }

.recent__list { list-style: none; padding: 0; margin: 0;
  border-top: 1px solid var(--line); }
.recent__item {
  display: grid;
  grid-template-columns: 96px 1fr;
  gap: 1.2rem;
  padding: 1rem 0;
  border-bottom: 1px solid var(--line);
  align-items: center;
  transition: background .2s;
}
.recent__item:hover { background: color-mix(in srgb, var(--accent) 5%, transparent); }
.recent__thumb {
  width: 96px; aspect-ratio: 16/10; overflow: hidden;
  border-radius: 8px; background: var(--paper-alt);
  display: flex; align-items: center; justify-content: center;
}
.recent__thumb img { width: 100%; height: 100%; object-fit: contain; display: block; }
.recent__thumb-empty { width: 100%; height: 100%; }
.recent__t {
  font-family: "Roboto", serif; font-size: 1.05rem;
  line-height: 1.3; margin-bottom: .3rem;
}
.recent__meta {
  display: flex; gap: 1rem; align-items: center;
  font-size: .8rem; color: var(--ink-soft);
}
.recent__stat { display: inline-flex; align-items: center; gap: .3rem; font-variant-numeric: tabular-nums; }

@media (max-width: 540px) {
  .recent__item { grid-template-columns: 72px 1fr; gap: .9rem; }
  .recent__thumb { width: 72px; }
  .post-card__foot { justify-content: flex-start; }
}

/* ---- Sub-page: article / legal / list ---- */
.page{max-width:760px;margin:clamp(3rem,8vw,6rem) auto;padding:0 var(--pad)}
.page--wide{max-width:var(--maxw)}
.page--post{max-width:var(--maxw)}
.page--post .recent{max-width:var(--maxw)}
.page-header{margin-bottom:2.5rem}
.page-header__top{display:flex;align-items:center;justify-content:space-between;margin-bottom:.6rem}
.back{font-size:.82rem;color:var(--ink-soft);
  border-bottom:1px solid var(--line);padding-bottom:2px;transition:color .25s,border-color .25s}
.back:hover{color:var(--ink);border-color:var(--ink)}
.page h1{font-size:clamp(2rem,5vw,3.4rem);max-width:22ch;margin:0}
.page__meta{font-size:.82rem;letter-spacing:.06em;text-transform:uppercase;color:var(--ink-soft);margin-bottom:2.5rem}
.article p{margin:1.2rem 0;color:var(--ink)}
.article h2{font-size:1.5rem;max-width:none;margin:2.6rem 0 .6rem}
.stub{margin-top:2rem;padding:1.6rem 1.8rem;border:1px dashed var(--line);border-radius:var(--r);
  color:var(--ink-soft);font-size:.95rem;background:var(--paper-alt)}
.legal dt{font-weight:600;margin-top:1.3rem}
.legal dd{color:var(--ink-soft);margin:.2rem 0 0}
.legal-block{border-radius:var(--r);padding:2rem 2.2rem;margin-top:1.5rem}
.legal-block--white{background:var(--paper);border:1px solid var(--line)}
.legal-block--grey{background:var(--paper-alt);border:1px solid var(--line)}
.legal-block__label{font-size:.72rem;letter-spacing:.22em;text-transform:uppercase;color:var(--ink-soft);font-weight:600;margin-bottom:1.2rem}
.legal-block p{margin:.7rem 0;color:var(--ink);line-height:1.7;font-size:.95rem}
.legal-block h3{font-size:1rem;font-weight:600;margin:1.6rem 0 .4rem;color:var(--ink)}
.legal-block h3:first-of-type{margin-top:.4rem}
.legal-block a{color:var(--accent);text-decoration:underline}