/* ══════════════════════════════════════════════════
   MTHR.io — the mothership
   High-end, editorial, Apple-grade restraint.
   White space, neutral ink, one accent, product-first.
   ══════════════════════════════════════════════════ */

:root{
  --bg:#ffffff;
  --bg-2:#f5f5f7;
  --card:#ffffff;
  --ink:#1d1d1f;
  --ink-2:#6e6e73;
  --ink-3:#86868b;
  --ink-4:#aeaeb2;

  --line:#d2d2d7;
  --line-soft:rgba(0,0,0,.06);

  --accent:#0071e3;
  --accent-deep:#0066cc;

  --f-disp:-apple-system,BlinkMacSystemFont,"SF Pro Display","Helvetica Neue",Arial,sans-serif;
  --f-body:-apple-system,BlinkMacSystemFont,"SF Pro Text","Helvetica Neue",Arial,sans-serif;
  --f-mono:"JetBrains Mono",ui-monospace,monospace;

  --pad:clamp(20px,5vw,64px);
  --max:1240px;
  --r:24px;
}

*{box-sizing:border-box;margin:0;padding:0}
html{scroll-behavior:smooth;-webkit-text-size-adjust:100%}
body{
  background:var(--bg);color:var(--ink);
  font-family:var(--f-body);font-size:17px;line-height:1.6;
  -webkit-font-smoothing:antialiased;overflow-x:hidden;
}
img{max-width:100%;display:block}
a{color:inherit;text-decoration:none}
::selection{background:var(--accent);color:#fff}

.wrap{max-width:var(--max);margin:0 auto;padding:0 var(--pad);width:100%}
.mono{font-family:var(--f-mono)}

/* reveal */
.rv{opacity:0;transform:translateY(24px);transition:opacity 1s cubic-bezier(.2,.7,.2,1),transform 1s cubic-bezier(.2,.7,.2,1)}
.rv.in{opacity:1;transform:none}

/* ═══════════ NAV ═══════════ */
.nav{position:fixed;inset:0 0 auto;z-index:200;transition:background .4s,border-color .4s,backdrop-filter .4s;border-bottom:1px solid transparent}
.nav.stuck{background:rgba(255,255,255,.78);backdrop-filter:blur(20px) saturate(180%);border-bottom-color:var(--line-soft)}
.nav__in{max-width:var(--max);margin:0 auto;padding:15px var(--pad);display:flex;align-items:center;gap:32px}
.brand{display:flex;align-items:center;gap:9px;font-family:var(--f-disp);font-weight:700;letter-spacing:.12em;font-size:15px}
.brand__mark{width:22px;height:22px;color:var(--ink);animation:spin 24s linear infinite}
@keyframes spin{to{transform:rotate(360deg)}}
.brand__tld{color:var(--ink-3);font-weight:400;letter-spacing:.02em}
.nav__links{margin-left:auto;display:flex;align-items:center;gap:32px;font-size:14px;color:var(--ink-2)}
.nav__links a{transition:color .25s}
.nav__links a:hover{color:var(--ink)}
.nav__cta{
  padding:8px 18px;border-radius:100px;background:var(--accent);color:#fff!important;
  font-size:13.5px;font-weight:500;transition:background .25s;
}
.nav__cta:hover{background:var(--accent-deep)}
.nav__burger{display:none;margin-left:auto;background:none;border:0;padding:8px;cursor:pointer;flex-direction:column;gap:5px}
.nav__burger span{width:22px;height:1.5px;background:var(--ink);display:block;transition:transform .3s,opacity .3s}
.nav__burger[aria-expanded="true"] span:first-child{transform:translateY(3.2px) rotate(45deg)}
.nav__burger[aria-expanded="true"] span:last-child{transform:translateY(-3.2px) rotate(-45deg)}

/* ═══════════ HERO ═══════════ */
.hero{position:relative;min-height:100svh;display:flex;flex-direction:column;justify-content:center;overflow:hidden;padding:110px 0 0}
.hero__canvas{position:absolute;inset:0;width:100%;height:100%;z-index:0}
.hero__vig{
  position:absolute;inset:0;z-index:1;pointer-events:none;
  background:
    linear-gradient(to bottom,rgba(255,255,255,.6) 0%,transparent 24%,transparent 66%,var(--bg) 100%),
    linear-gradient(to right,var(--bg) 0%,rgba(255,255,255,.4) 44%,transparent 70%);
}
.hero__ship{
  position:absolute;z-index:1;pointer-events:none;
  right:0;top:9%;width:47%;max-width:800px;
  animation:shipin 1.6s cubic-bezier(.16,.8,.24,1) .7s backwards;
}
.hero__ship img{
  width:100%;height:auto;display:block;
  filter:drop-shadow(0 40px 70px rgba(24,32,52,.20));
  animation:shipbob 7.5s ease-in-out infinite alternate;
}
@keyframes shipin{from{opacity:0;transform:translate3d(110px,-16px,0)}}
@keyframes shipbob{from{transform:translateY(-10px) rotate(-.7deg)}to{transform:translateY(12px) rotate(.8deg)}}
.hero__in{position:relative;z-index:2;max-width:var(--max);margin:0 auto;padding:0 var(--pad);width:100%}

.eyebrow{
  display:inline-block;font-family:var(--f-mono);font-size:11.5px;
  letter-spacing:.2em;text-transform:uppercase;color:var(--ink-3);
}

.hero__h1{
  font-family:var(--f-disp);font-weight:700;letter-spacing:-.028em;line-height:1.02;
  font-size:clamp(46px,7vw,96px);margin:22px 0 0;max-width:14ch;
}
.hero__h1 span{display:block}
.hero__h1 .l2{color:var(--ink-4)}
.hero__h1 .l3{margin-top:.04em}
.hero__h1 em{font-style:normal;color:var(--accent)}
.hero__sub{max-width:50ch;margin:26px 0 0;color:var(--ink-2);font-size:clamp(16px,1.4vw,19px);line-height:1.55}
.hero__cta{display:flex;flex-wrap:wrap;align-items:center;gap:26px;margin-top:36px}

.btn{
  display:inline-flex;align-items:center;gap:8px;font-size:15px;font-weight:500;
  padding:13px 26px;border-radius:100px;border:0;transition:.3s cubic-bezier(.2,.7,.2,1);
}
.btn span{transition:transform .3s}
.btn:hover span{transform:translateX(3px)}
.btn--pri{background:var(--accent);color:#fff}
.btn--pri:hover{background:var(--accent-deep);transform:scale(1.02)}
.btn--ghost{background:none;color:var(--accent);padding-inline:4px}
.btn--ghost:hover{color:var(--accent-deep)}
.btn--lg{padding:16px 32px;font-size:16px}

.hero__stats{
  position:relative;z-index:2;max-width:var(--max);margin:auto auto 0;width:100%;
  padding:30px var(--pad) 38px;display:flex;gap:clamp(32px,6vw,88px);flex-wrap:wrap;
  border-top:1px solid var(--line-soft);margin-top:clamp(40px,7vh,90px);
}
.stat{display:flex;flex-direction:column;gap:3px}
.stat b{font-family:var(--f-disp);font-size:clamp(30px,3.4vw,42px);font-weight:600;letter-spacing:-.02em;line-height:1}
.stat span{font-size:12px;letter-spacing:.06em;color:var(--ink-3)}

/* ═══════════ SECTIONS ═══════════ */
.sec{padding:clamp(96px,12vw,160px) 0;position:relative}
.sec__head{max-width:760px;margin-bottom:clamp(52px,6vw,80px)}
.sec__head--c{margin-inline:auto;text-align:center}
.kicker{
  font-family:var(--f-mono);font-size:11.5px;letter-spacing:.2em;text-transform:uppercase;
  color:var(--ink-3);display:block;margin-bottom:18px;
}
.sec__h2{font-family:var(--f-disp);font-weight:700;letter-spacing:-.028em;line-height:1.04;font-size:clamp(38px,5.2vw,64px)}
.sec__lead{margin-top:20px;color:var(--ink-2);max-width:54ch;font-size:clamp(16px,1.3vw,19px);line-height:1.55}
.sec__head--c .sec__lead{margin-inline:auto}

/* ═══════════ PORTFOLIO ═══════════ */
.portfolio{background:var(--bg-2)}
.grid{display:grid;grid-template-columns:repeat(auto-fit,minmax(340px,1fr));gap:24px;counter-reset:craft}

.card{
  counter-increment:craft;
  position:relative;border-radius:var(--r);overflow:hidden;
  background:var(--card);
  box-shadow:0 2px 14px rgba(0,0,0,.05);
  transition:box-shadow .5s cubic-bezier(.2,.7,.2,1),transform .5s cubic-bezier(.2,.7,.2,1);
}
.card::before{
  content:"MTHR—" counter(craft,decimal-leading-zero);
  position:absolute;top:16px;left:16px;z-index:5;pointer-events:none;
  font-family:var(--f-mono);font-size:9.5px;letter-spacing:.18em;color:var(--ink-2);
  padding:6px 11px;border-radius:100px;
  background:rgba(255,255,255,.82);backdrop-filter:blur(8px);
  box-shadow:0 1px 6px rgba(0,0,0,.08);
}
.card:hover{box-shadow:0 20px 48px rgba(0,0,0,.12);transform:translateY(-4px)}

.card__media{position:relative;aspect-ratio:16/10;overflow:hidden;background:var(--bg-2)}
.card__media img{width:100%;height:100%;object-fit:cover;transition:transform 1.2s cubic-bezier(.2,.7,.2,1)}
.card:hover .card__media img{transform:scale(1.05)}

/* gentle bottom fade so wordmarks sit cleanly */
.card__scrim{
  position:absolute;inset:0;pointer-events:none;
  background:linear-gradient(180deg,transparent 46%,rgba(0,0,0,.42));
}

.card__logo{
  position:absolute!important;left:24px;bottom:20px;width:60px!important;height:60px!important;
  border-radius:50%;object-fit:cover!important;z-index:2;
  box-shadow:0 4px 18px rgba(0,0,0,.25);
  transition:transform .5s cubic-bezier(.2,.7,.2,1)!important;
}
.card:hover .card__logo{transform:translateY(-4px) scale(1.05)!important}

.card__wordmark{
  position:absolute;left:24px;bottom:20px;z-index:2;font-family:var(--f-disp);font-weight:700;
  font-size:clamp(20px,2.4vw,27px);letter-spacing:-.02em;color:#fff;
}
.card__wordmark--mono{font-family:var(--f-mono);font-weight:500;font-size:13px;letter-spacing:.26em;color:#fff;opacity:.9}

.card__media--gold .card__mark{
  position:absolute!important;left:24px;bottom:56px;z-index:2;
  height:26px!important;width:auto!important;object-fit:contain!important;
  filter:drop-shadow(0 2px 10px rgba(0,0,0,.35));
  transition:transform .5s cubic-bezier(.2,.7,.2,1)!important;
}
.card:hover .card__media--gold .card__mark{transform:translateY(-3px)!important}
.card__wordmark--serif{
  font-family:"Playfair Display",Georgia,serif;font-weight:500;letter-spacing:0;
  font-size:clamp(22px,2.4vw,30px);color:#fff;
}
.card__media--dark img{object-fit:cover;object-position:top center}

/* pear — soft green plate for the white mark */
.card__media--pear{display:grid;place-items:center;background:linear-gradient(160deg,#EDF5E9,#DCEBD4)}
.pear-bg{position:absolute;inset:0;background:radial-gradient(circle at 50% 45%,rgba(62,142,79,.42),rgba(62,142,79,.1) 58%,transparent 80%)}
.card__float{
  position:absolute!important;inset:15% 0!important;z-index:2;
  width:100%!important;height:70%!important;object-fit:contain!important;
  filter:drop-shadow(0 18px 30px rgba(30,80,44,.4));
  transition:transform .7s cubic-bezier(.2,.7,.2,1)!important;
  animation:bob 6s ease-in-out infinite;
}
.card:hover .card__float{transform:scale(1.06) rotate(-2deg)!important}
@keyframes bob{0%,100%{translate:0 0}50%{translate:0 -9px}}

/* hyon */
.card__media--hyon{display:grid;place-items:center}
.card__can{
  position:absolute;z-index:3;height:104%!important;width:auto!important;object-fit:contain!important;
  right:9%;bottom:-14%;
  filter:drop-shadow(0 22px 34px rgba(0,0,0,.35));
  transition:transform .7s cubic-bezier(.2,.7,.2,1)!important;
}
.card:hover .card__can{transform:translateY(-10px) rotate(2deg)!important}
.card__media--hyon .card__scrim{background:linear-gradient(180deg,transparent 55%,rgba(0,0,0,.28))}

/* stealth — the one dark tile */
.card__media--stealth{background:#0B0D14;display:grid;place-items:center}
.card__media--stealth .card__scrim{display:none}
.stealth-fx{position:absolute;inset:0;width:100%;height:100%}
.card--stealth .card__wordmark{left:50%;bottom:auto;top:50%;transform:translate(-50%,-50%);color:#B7A8F0;animation:flick 5s infinite}
@keyframes flick{0%,92%,96%,100%{opacity:.9}94%{opacity:.4}}

/* the 7th card runs the full width of the grid */
@media (min-width:760px){
  .card--wide{grid-column:1/-1;display:grid;grid-template-columns:minmax(0,1.15fr) minmax(0,1fr);align-items:stretch}
  .card--wide .card__media{aspect-ratio:auto;height:100%;min-height:260px}
  .card--wide .card__body{padding:44px 44px;align-self:center}
  .card--wide .card__desc{font-size:16px;max-width:46ch}
  .card--wide h3{font-size:24px}
}
.card--stealth h3 em{font-style:normal;font-family:var(--f-mono);font-size:11px;color:var(--ink-3);letter-spacing:.12em}

.card__body{padding:26px 26px 28px;position:relative;z-index:1}
.card__top{display:flex;align-items:center;justify-content:space-between;gap:14px}
.card__body h3{font-family:var(--f-disp);font-size:20px;font-weight:600;letter-spacing:-.015em}
.card__sector{font-size:12.5px;font-weight:600;letter-spacing:.02em;color:var(--c);margin-top:6px}
.card__desc{color:var(--ink-2);font-size:15px;margin-top:12px;line-height:1.55}
.card__meta{
  display:flex;align-items:center;justify-content:space-between;gap:12px;flex-wrap:wrap;
  margin-top:20px;padding-top:16px;border-top:1px solid var(--line-soft);
  font-size:12.5px;color:var(--ink-3);
}
.card__meta a{color:var(--accent);font-weight:500;transition:color .25s}
.card__meta a:hover{color:var(--accent-deep)}
/* whole card opens its story; the meta links stay clickable on top of it */
.card__go{position:absolute;inset:0;z-index:3}
.card__links{display:flex;align-items:center;gap:18px;position:relative;z-index:6;flex-wrap:wrap}

.tag{
  flex:none;display:inline-flex;align-items:center;gap:6px;
  font-size:11px;font-weight:600;letter-spacing:.04em;
  padding:5px 11px;border-radius:100px;background:var(--bg-2);color:var(--ink-2);
}
.tag--live{color:#1E7A4A;background:rgba(30,122,74,.1)}
.tag--build{color:#A86A12;background:rgba(168,106,18,.1)}
.tag--beta{color:#3E8E4F;background:rgba(62,142,79,.1)}
.tag--pilot{color:#0B66C3;background:rgba(11,102,195,.1)}
.tag--stealth{color:#6D4FD6;background:rgba(109,79,214,.1)}
.tag--proto{color:#96731F;background:rgba(150,115,31,.12)}
.tag--live::before,.tag--beta::before{
  content:"";width:5px;height:5px;border-radius:50%;background:currentColor;flex:none;
  animation:blip 2.2s infinite;
}
@keyframes blip{0%,100%{opacity:1}50%{opacity:.25}}

/* ═══════════ MODEL ═══════════ */
.steps{list-style:none;display:grid;grid-template-columns:repeat(auto-fit,minmax(240px,1fr));gap:clamp(28px,4vw,48px)}
.step{position:relative}
.step__n{
  display:block;font-family:var(--f-disp);font-weight:700;font-size:54px;letter-spacing:-.03em;
  line-height:1;color:rgba(0,0,0,.08);
}
.step h3{font-family:var(--f-disp);font-size:21px;font-weight:600;margin:18px 0 10px;letter-spacing:-.02em}
.step p{color:var(--ink-2);font-size:15px;line-height:1.55}

.pillars{display:grid;grid-template-columns:repeat(auto-fit,minmax(260px,1fr));gap:clamp(28px,4vw,48px);margin-top:clamp(56px,7vw,84px)}
.pillar{border-top:1px solid var(--line);padding-top:22px}
.pillar h4{font-family:var(--f-disp);font-size:16px;font-weight:600;letter-spacing:-.01em}
.pillar p{color:var(--ink-2);font-size:14.5px;margin-top:10px;line-height:1.55}

/* ═══════════ SYSTEM ═══════════ */
.system{background:var(--bg-2);overflow:hidden}
.orbit{position:relative;width:100%;aspect-ratio:16/9;max-height:500px;min-height:400px;margin-top:-56px}
#orbit{position:absolute;inset:0;width:100%;height:100%;cursor:crosshair}
.orbit__readout{
  position:absolute;left:50%;bottom:5%;transform:translateX(-50%);text-align:center;
  pointer-events:none;display:flex;flex-direction:column;gap:4px;
  border-radius:100px;padding:12px 28px;
  background:rgba(255,255,255,.85);backdrop-filter:blur(12px);
  box-shadow:0 4px 20px rgba(0,0,0,.08);white-space:nowrap;
}
.orbit__label{font-family:var(--f-disp);font-size:14px;font-weight:600;letter-spacing:.1em;transition:color .3s}
.orbit__detail{font-size:11.5px;color:var(--ink-3);max-width:64ch;white-space:normal}

/* ═══════════ FOUNDERS ═══════════ */
.crew{display:grid;grid-template-columns:repeat(auto-fit,minmax(300px,1fr));gap:24px;counter-reset:crew}
.person{
  counter-increment:crew;
  padding:36px 32px 34px;border-radius:var(--r);
  background:var(--bg-2);transition:box-shadow .4s;
}
.person::before{
  content:"CREW — " counter(crew,decimal-leading-zero) " / 02";
  display:block;font-family:var(--f-mono);font-size:10px;letter-spacing:.2em;
  color:var(--ink-3);margin-bottom:20px;
}
.person:hover{box-shadow:0 16px 40px rgba(0,0,0,.08)}
.person__frame{
  width:72px;height:72px;border-radius:50%;display:grid;place-items:center;margin-bottom:22px;
  background:#fff;box-shadow:0 2px 10px rgba(0,0,0,.08);
}
.person__glyph{
  font-family:var(--f-disp);font-weight:600;font-size:20px;letter-spacing:.04em;color:var(--ink);
}
.person h3{font-family:var(--f-disp);font-size:24px;font-weight:600;letter-spacing:-.02em}
.person__role{font-size:13px;font-weight:600;color:var(--accent);margin-top:6px}
.person__bio{color:var(--ink-2);font-size:15px;margin-top:14px;line-height:1.55}
.person__bio em{color:var(--ink-4);font-size:13px}
.person__links{margin-top:20px;padding-top:16px;border-top:1px solid var(--line-soft);font-size:13.5px}
.person__links a{color:var(--accent);font-weight:500;transition:color .25s}
.person__links a:hover{color:var(--accent-deep)}
[data-editme]{position:relative}

/* ═══════════ CONTACT ═══════════ */
.contact{position:relative;overflow:hidden;background:var(--bg-2)}
.contact__in{position:relative;text-align:center;display:flex;flex-direction:column;align-items:center}
.contact__h2{font-family:var(--f-disp);font-weight:700;letter-spacing:-.03em;line-height:1.02;font-size:clamp(42px,6.5vw,84px);margin-top:8px}
.contact__lead{color:var(--ink-2);max-width:54ch;margin:22px 0 36px;font-size:clamp(16px,1.3vw,19px);line-height:1.55}

/* ═══════════ FOOTER ═══════════ */
.foot{background:var(--bg);border-top:1px solid var(--line-soft);padding-top:56px}
.foot__in{display:flex;flex-wrap:wrap;gap:44px;justify-content:space-between;padding-bottom:48px}
.foot__brand .brand__word{font-family:var(--f-disp);font-weight:700;font-size:20px;letter-spacing:.14em}
.foot__brand p{color:var(--ink-3);font-size:13.5px;margin-top:10px;max-width:34ch}
.foot__cols{display:flex;gap:clamp(40px,7vw,96px)}
.foot__cols h5{font-size:12px;font-weight:600;letter-spacing:.06em;color:var(--ink-3);margin-bottom:14px}
.foot__cols a{display:block;color:var(--ink-2);font-size:14px;padding:4px 0;transition:color .25s}
.foot__cols a:hover{color:var(--ink)}
.foot__base{display:flex;justify-content:space-between;gap:16px;flex-wrap:wrap;padding-block:20px 24px;border-top:1px solid var(--line-soft);font-size:12px;color:var(--ink-3)}

/* ═══════════ RESPONSIVE ═══════════ */
@media (max-width:900px){
  .nav__burger{display:flex}
  .nav__links{
    position:fixed;inset:60px 0 auto;flex-direction:column;align-items:stretch;gap:0;
    background:rgba(255,255,255,.97);backdrop-filter:blur(20px);border-bottom:1px solid var(--line-soft);
    padding:10px var(--pad) 24px;margin:0;
    clip-path:inset(0 0 100% 0);transition:clip-path .45s cubic-bezier(.2,.7,.2,1);
  }
  .nav__links.open{clip-path:inset(0 0 0 0)}
  .nav__links a{padding:15px 0;border-bottom:1px solid var(--line-soft);font-size:17px}
  .nav__cta{background:none;padding:15px 0;border-radius:0;color:var(--accent)!important;font-size:17px}
  .hero{min-height:auto;padding:120px 0 0}
  .hero__canvas{opacity:.35}
  .hero__ship{z-index:0;right:-8%;top:5%;width:98%}
  .hero__ship img{opacity:.55}
  .hero__vig{background:
    linear-gradient(to bottom,rgba(255,255,255,.55) 0%,transparent 22%,rgba(255,255,255,.85) 48%,var(--bg) 100%)}
  .hero__h1{max-width:none}
  .hero__cta{gap:18px}
  .hero__stats{gap:26px 36px}
}
@media (max-width:520px){
  .grid{grid-template-columns:1fr}
  .orbit{min-height:440px;margin-top:-24px;aspect-ratio:3/4}
  .orbit__readout{bottom:0;padding:10px 20px}
  .stat{flex:1 0 40%}
  .foot__cols{flex-direction:column;gap:30px}
}

@media (prefers-reduced-motion:reduce){
  *{animation-duration:.01ms!important;animation-iteration-count:1!important;transition-duration:.01ms!important}
  html{scroll-behavior:auto}
  .rv{opacity:1;transform:none}
}

/* ══════════════════════════════════════════════════
   MOTION LAYER — preloader, cursor, split-text,
   weighted scroll. Award-tier feel, zero deps.
   ══════════════════════════════════════════════════ */

/* preloader */
.loader{
  position:fixed;inset:0;z-index:10000;background:var(--ink);color:#fff;
  transition:transform .95s cubic-bezier(.76,0,.24,1);
}
.loader.done{transform:translateY(-101%)}
.loader.gone{display:none}
.loader__word{
  position:absolute;top:38px;left:var(--pad);
  font-family:var(--f-disp);font-weight:700;letter-spacing:.16em;font-size:18px;
}
.loader__pct{
  position:absolute;bottom:20px;right:var(--pad);
  font-family:var(--f-mono);font-weight:500;line-height:.9;letter-spacing:-.04em;
  font-size:clamp(64px,13vw,150px);opacity:.92;
}
.loader__bar{
  position:absolute;left:0;bottom:0;width:100%;height:2px;background:#fff;
  transform-origin:left;transform:scaleX(0);
}

/* custom cursor — difference-blend dot, desktop only */
.cursor{
  position:fixed;left:0;top:0;z-index:9999;pointer-events:none;
  width:10px;height:10px;border-radius:50%;background:#fff;mix-blend-mode:difference;
  transform:translate3d(-100px,-100px,0);
  transition:width .3s cubic-bezier(.2,.7,.2,1),height .3s cubic-bezier(.2,.7,.2,1);
}
.cursor.big{width:64px;height:64px}
html.fine,html.fine a,html.fine button,html.fine .card{cursor:none}
@media (pointer:coarse){.cursor{display:none}}

/* split-text masks */
.hero__h1 span{overflow:hidden;padding-bottom:.09em;margin-bottom:-.09em}
.hero__h1 .ch{display:inline-block;transform:translateY(118%);transition:transform 1s cubic-bezier(.19,1,.22,1)}
.hero__h1.go .ch{transform:none}
.sec__h2 .wm{display:inline-block;overflow:hidden;vertical-align:top;padding-bottom:.1em;margin-bottom:-.1em}
.sec__h2 .w{display:inline-block;transform:translateY(112%);transition:transform .9s cubic-bezier(.19,1,.22,1)}
.sec__h2.in .w{transform:none}

/* weighted smooth scroll (desktop, fine pointers only) */
/* the wrapper is pinned and moved by transform; body height (set in JS)
   is what actually scrolls. without position:fixed the content moves at
   2× scroll speed and leaves a blank half-page at the bottom. */
.smooth{will-change:transform}
html.smooth-on{scrollbar-width:thin}
html.smooth-on .smooth{position:fixed;top:0;left:0;width:100%}

/* nav hides on scroll down */
.nav{transition:background .4s,border-color .4s,backdrop-filter .4s,transform .45s cubic-bezier(.2,.7,.2,1)}
.nav--hidden{transform:translateY(-100%)}

/* parallaxed card photos need headroom so edges never show */
.card__media img:not([class]){transform:scale(1.2)}
.card:hover .card__media img:not([class]){transform:scale(1.2)}

/* ══════════════════════════════════════════════════
   PROJECT PAGES — /keywire, /trustfecta, …
   Shared chrome for the seven company detail pages.
   ══════════════════════════════════════════════════ */

.pg{padding-top:110px}

/* ─── hero ─── */
.phero{padding:clamp(40px,7vw,72px) 0 0}
.phero__back{
  display:inline-flex;align-items:center;gap:8px;font-size:13.5px;color:var(--ink-3);
  transition:color .25s;margin-bottom:clamp(28px,4vw,44px);
}
.phero__back:hover{color:var(--ink)}
.phero__back span{transition:transform .3s;display:inline-block}
.phero__back:hover span{transform:translateX(-3px)}

.phero__top{display:flex;align-items:center;gap:14px;flex-wrap:wrap;margin-bottom:20px}
.phero__idx{font-family:var(--f-mono);font-size:11.5px;letter-spacing:.2em;color:var(--ink-3)}
.phero h1{
  font-family:var(--f-disp);font-weight:700;letter-spacing:-.03em;line-height:1.02;
  font-size:clamp(44px,6.4vw,80px);max-width:16ch;
}
.phero__lede{margin-top:24px;max-width:58ch;color:var(--ink-2);font-size:clamp(17px,1.5vw,21px);line-height:1.5}
.phero__sector{margin-top:18px;font-size:13px;font-weight:600;letter-spacing:.02em;color:var(--c)}

/* fact strip under the hero */
.facts{
  display:grid;grid-template-columns:repeat(auto-fit,minmax(190px,1fr));gap:28px 40px;
  margin-top:clamp(36px,5vw,56px);padding-top:30px;border-top:1px solid var(--line);
}
.fact dt{font-family:var(--f-mono);font-size:10.5px;letter-spacing:.18em;text-transform:uppercase;color:var(--ink-3)}
.fact dd{margin-top:8px;font-size:15px;line-height:1.5}
.fact dd a{color:var(--accent);font-weight:500;transition:color .25s}
.fact dd a:hover{color:var(--accent-deep)}

/* ─── the big shot ─── */
.pshot{
  position:relative;margin-top:clamp(44px,6vw,72px);border-radius:var(--r);overflow:hidden;
  aspect-ratio:16/9;background:var(--bg-2);box-shadow:0 2px 14px rgba(0,0,0,.05);
}
.pshot img{width:100%;height:100%;object-fit:cover}
.pshot--contain{display:grid;place-items:center}
.pshot--contain img{width:auto;height:74%;object-fit:contain}
.pshot--pear{background:linear-gradient(160deg,#EDF5E9,#DCEBD4)}
.pshot--dark{background:#0B0D14}
.pshot figcaption{
  position:absolute;left:0;right:0;bottom:0;padding:20px 24px;
  font-size:12.5px;color:#fff;background:linear-gradient(180deg,transparent,rgba(0,0,0,.55));
}

/* ─── body prose ─── */
.pbody{padding:clamp(72px,9vw,120px) 0}
.pbody+.pbody{padding-top:0}
.pblock{max-width:760px}
.pblock+.pblock{margin-top:clamp(56px,7vw,88px)}
.pblock h2{
  font-family:var(--f-disp);font-weight:700;letter-spacing:-.025em;line-height:1.08;
  font-size:clamp(28px,3.4vw,40px);
}
.pblock h3{font-family:var(--f-disp);font-size:19px;font-weight:600;letter-spacing:-.015em;margin-top:34px}
.pblock p{margin-top:18px;color:var(--ink-2);font-size:17px;line-height:1.62}
.pblock p strong{color:var(--ink);font-weight:600}
.pblock a:not(.btn){color:var(--accent);font-weight:500;border-bottom:1px solid rgba(0,113,227,.25)}
.pblock a:not(.btn):hover{color:var(--accent-deep);border-bottom-color:currentColor}

/* feature list */
.plist{list-style:none;margin-top:26px;display:grid;gap:1px;background:var(--line-soft);border-radius:14px;overflow:hidden}
.plist li{background:var(--bg);padding:20px 22px}
.plist b{display:block;font-family:var(--f-disp);font-size:15.5px;font-weight:600;letter-spacing:-.01em}
.plist span{display:block;margin-top:6px;color:var(--ink-2);font-size:14.5px;line-height:1.55}
.pbody--alt{background:var(--bg-2)}
.pbody--alt .plist li{background:var(--bg-2)}

/* spec table */
.spec{width:100%;border-collapse:collapse;margin-top:26px;font-size:14.5px}
.spec tr{border-bottom:1px solid var(--line-soft)}
.spec tr:first-child{border-top:1px solid var(--line-soft)}
.spec th{
  text-align:left;padding:14px 20px 14px 0;font-family:var(--f-mono);font-weight:400;
  font-size:11.5px;letter-spacing:.14em;text-transform:uppercase;color:var(--ink-3);
  white-space:nowrap;vertical-align:top;width:1%;
}
.spec td{padding:14px 0;color:var(--ink-2);line-height:1.55}

/* status ledger */
.ledger{list-style:none;margin-top:26px}
.ledger li{position:relative;padding:0 0 22px 30px;border-left:1px solid var(--line)}
.ledger li:last-child{padding-bottom:0;border-left-color:transparent}
.ledger li::before{
  content:"";position:absolute;left:-4.5px;top:6px;width:8px;height:8px;border-radius:50%;
  background:var(--line);
}
.ledger li[data-on]::before{background:var(--c,var(--accent))}
.ledger b{font-family:var(--f-disp);font-size:15.5px;font-weight:600;letter-spacing:-.01em}
.ledger span{display:block;margin-top:5px;color:var(--ink-2);font-size:14.5px;line-height:1.55}
.ledger em{
  font-style:normal;font-family:var(--f-mono);font-size:10.5px;letter-spacing:.16em;
  text-transform:uppercase;color:var(--ink-3);display:block;margin-bottom:6px;
}

/* pull quote */
.pquote{
  max-width:820px;margin:clamp(56px,7vw,88px) 0 0;padding-left:clamp(20px,3vw,34px);
  border-left:2px solid var(--c,var(--accent));
  font-family:var(--f-disp);font-weight:600;letter-spacing:-.02em;line-height:1.3;
  font-size:clamp(22px,2.7vw,32px);
}

/* honest note */
.pnote{
  max-width:760px;margin-top:34px;padding:20px 22px;border-radius:14px;background:var(--bg-2);
  font-size:14.5px;line-height:1.6;color:var(--ink-2);
}
.pbody--alt .pnote{background:#fff}
.pnote b{color:var(--ink);font-weight:600}

/* ─── prev / next ─── */
.pnav{border-top:1px solid var(--line-soft);padding:clamp(48px,6vw,72px) 0}
.pnav__in{display:flex;gap:24px;justify-content:space-between;flex-wrap:wrap}
.pnav a{display:block;max-width:46%}
.pnav em{
  font-style:normal;font-family:var(--f-mono);font-size:10.5px;letter-spacing:.18em;
  text-transform:uppercase;color:var(--ink-3);display:block;margin-bottom:10px;
}
.pnav b{font-family:var(--f-disp);font-size:clamp(20px,2.4vw,28px);font-weight:600;letter-spacing:-.02em;transition:color .25s}
.pnav a:hover b{color:var(--accent)}
.pnav__next{text-align:right;margin-left:auto}

@media (max-width:640px){
  .pnav a{max-width:100%}
  .pnav__next{text-align:left}
  .spec th{width:auto;white-space:normal;display:block;padding-bottom:4px}
  .spec td{display:block;padding-top:0;padding-bottom:14px}
}