/* ============================================================
   NEVER LUCK — flagship brand site
   Aesthetic: performance / discipline. Near-black, bone, blood-red.
   ============================================================ */

/* ---------- tokens ---------- */
:root{
  --ink:        #0A0A0B;   /* near-black base */
  --ink-1:      #0E0E10;
  --ink-2:      #141417;   /* raised surfaces */
  --ink-3:      #1C1C20;   /* lines, cards */
  --hair:       rgba(244,241,234,0.10);
  --hair-soft:  rgba(244,241,234,0.06);
  --bone:       #F4F1EA;   /* bone white ink */
  --bone-2:     #D7D1C4;   /* secondary text */
  --smoke:      #8C8C93;   /* tertiary / mono labels */
  --blood:      #E4151B;   /* blood-red accent */
  --blood-deep: #A60810;
  --blood-glow: rgba(228,21,27,0.5);

  --maxw: 1480px;
  --pad: clamp(20px, 5vw, 72px);

  --font-display: 'Anton', 'Arial Narrow', Impact, sans-serif;
  --font-body:    'Inter', system-ui, -apple-system, sans-serif;
  --font-mono:    'Space Mono', ui-monospace, monospace;

  --ease: cubic-bezier(.16,1,.3,1);
  --ease-in-out: cubic-bezier(.65,.05,.36,1);

  --reveal-y: 26px;
}

/* ---------- reset ---------- */
*,*::before,*::after{ box-sizing:border-box; margin:0; padding:0 }
html{ -webkit-text-size-adjust:100%; scroll-behavior:smooth }
@media (prefers-reduced-motion: reduce){ html{ scroll-behavior:auto } *{ animation-duration:.001ms !important; transition-duration:.001ms !important } }
body{
  background:var(--ink); color:var(--bone);
  font-family:var(--font-body); font-size:16px; line-height:1.55;
  font-weight:400; letter-spacing:.005em;
  -webkit-font-smoothing:antialiased; -moz-osx-font-smoothing:grayscale;
  overflow-x:hidden;
}
img,svg,canvas{ display:block; max-width:100% }
a{ color:inherit; text-decoration:none }
button{ font:inherit; color:inherit; background:none; border:none; cursor:pointer }
::selection{ background:var(--blood); color:var(--bone) }
:focus-visible{ outline:2px solid var(--blood); outline-offset:4px }

/* ---------- film grain + vignette overlays ---------- */
.grain{
  position:fixed; inset:-50%; z-index:9000; pointer-events:none; opacity:.05; mix-blend-mode:overlay;
  background-image:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='160' height='160'%3E%3Cfilter id='n'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='0.85' numOctaves='3' stitchTiles='stitch'/%3E%3C/filter%3E%3Crect width='100%25' height='100%25' filter='url(%23n)'/%3E%3C/svg%3E");
  animation:grain 6s steps(6) infinite;
}
@keyframes grain{
  0%{transform:translate(0,0)} 16%{transform:translate(-4%,2%)} 33%{transform:translate(3%,-3%)}
  50%{transform:translate(-2%,4%)} 66%{transform:translate(4%,1%)} 83%{transform:translate(-3%,-2%)} 100%{transform:translate(0,0)}
}
.vignette{ position:fixed; inset:0; z-index:8000; pointer-events:none;
  background:radial-gradient(120% 90% at 50% 40%, transparent 55%, rgba(0,0,0,.55) 100%) }

/* ---------- custom cursor ---------- */
.cursor,.cursor-dot{ position:fixed; top:0; left:0; z-index:9500; pointer-events:none; border-radius:50%;
  transform:translate(-50%,-50%); will-change:transform; mix-blend-mode:difference }
.cursor{ width:36px; height:36px; border:1.5px solid var(--bone); transition:width .25s var(--ease),height .25s var(--ease),background .25s }
.cursor-dot{ width:5px; height:5px; background:var(--bone) }
.cursor.is-hot{ width:64px; height:64px; background:var(--bone) }
.cursor.is-hot ~ .cursor-dot{ opacity:0 }
@media (hover:none),(pointer:coarse){ .cursor,.cursor-dot{ display:none } }

/* ---------- preloader ---------- */
.loader{ position:fixed; inset:0; z-index:9999; background:var(--ink);
  display:flex; align-items:flex-end; justify-content:space-between; padding:var(--pad);
  transition:opacity .6s var(--ease),visibility .6s }
.loader.done{ opacity:0; visibility:hidden }
.loader__word{ font-family:var(--font-display); font-size:clamp(48px,11vw,170px); line-height:.84;
  text-transform:uppercase; letter-spacing:.01em; overflow:hidden }
.loader__word span{ display:block; transform:translateY(110%); animation:rise .9s var(--ease) forwards }
.loader__word span:nth-child(2){ animation-delay:.08s; color:var(--blood) }
@keyframes rise{ to{ transform:translateY(0) } }
.loader__count{ font-family:var(--font-mono); font-size:clamp(40px,9vw,120px); line-height:1; color:var(--bone) }
.loader__bar{ position:absolute; left:0; bottom:0; height:2px; width:0; background:var(--blood) }

/* ============================================================
   layout helpers
   ============================================================ */
.shell{ width:100%; max-width:var(--maxw); margin-inline:auto; padding-inline:var(--pad) }
section{ position:relative; scroll-margin-top:82px }
.eyebrow{ font-family:var(--font-mono); font-size:12px; letter-spacing:.28em; text-transform:uppercase; color:var(--smoke) }
.eyebrow--blood{ color:var(--blood) }
.idx{ font-family:var(--font-mono); font-size:12px; letter-spacing:.2em; color:var(--smoke) }

/* big display type */
.display{ font-family:var(--font-display); font-weight:400; text-transform:uppercase;
  line-height:.86; letter-spacing:.005em }
.lined{ position:relative; display:inline-block }

/* reveal animation */
.reveal{ opacity:0; transform:translateY(var(--reveal-y)); transition:opacity .9s var(--ease), transform .9s var(--ease) }
.reveal.in{ opacity:1; transform:none }
.reveal[data-d="1"]{ transition-delay:.08s } .reveal[data-d="2"]{ transition-delay:.16s }
.reveal[data-d="3"]{ transition-delay:.24s } .reveal[data-d="4"]{ transition-delay:.32s }
.reveal[data-d="5"]{ transition-delay:.40s }
/* clip-mask line reveal */
.mask{ overflow:hidden; display:block }
.mask > *{ display:block; transform:translateY(105%); transition:transform 1s var(--ease) }
.mask.in > *{ transform:translateY(0) }

/* outline + ghost text */
.outline{ color:transparent; -webkit-text-stroke:1.4px var(--bone-2) }
@supports not (-webkit-text-stroke: 1px #000){ .outline{ color:var(--ink-3) } }

/* ---------- buttons ---------- */
.btn{ position:relative; display:inline-flex; align-items:center; gap:.7em;
  font-family:var(--font-mono); font-size:13px; letter-spacing:.18em; text-transform:uppercase;
  padding:1.1em 1.6em; border:1px solid var(--bone); border-radius:2px; overflow:hidden;
  color:var(--ink); background:var(--bone); transition:color .4s var(--ease) }
.btn span{ position:relative; z-index:2 }
.btn::after{ content:""; position:absolute; inset:0; z-index:1; background:var(--blood);
  transform:translateY(101%); transition:transform .45s var(--ease) }
.btn:hover{ color:var(--bone) }
.btn:hover::after{ transform:translateY(0) }
.btn--blood{ background:var(--blood); border-color:var(--blood); color:var(--bone) }
  .btn--blood::after{ background:var(--bone) }
  .btn--blood:hover{ color:var(--ink) }
  .btn--ghost{ background:transparent; color:var(--bone) }
.btn--ghost:hover{ color:var(--bone) }
.btn .arr{ transition:transform .4s var(--ease) }
.btn:hover .arr{ transform:translateX(4px) }

/* ============================================================
   NAV
   ============================================================ */
.nav{ position:fixed; inset:0 0 auto 0; z-index:7000; display:flex; align-items:center; justify-content:space-between;
  padding:18px var(--pad); background:linear-gradient(180deg, rgba(10,10,11,.58), rgba(10,10,11,0));
  transition:padding .4s var(--ease), background .4s var(--ease), border-color .4s var(--ease);
  border-bottom:1px solid transparent }
.nav.shrink{ padding:12px var(--pad); background:rgba(10,10,11,.86); border-bottom-color:var(--hair); backdrop-filter:blur(14px) }
.brand{ font-family:var(--font-display); font-size:24px; text-transform:uppercase; letter-spacing:.05em;
  color:var(--bone); display:flex; align-items:center; gap:.5em; line-height:1 }
.brand .dice{ width:18px; height:18px }
.nav__links{ display:flex; gap:34px; align-items:center }
.nav__links a{ font-family:var(--font-mono); font-size:12px; letter-spacing:.16em; text-transform:uppercase; color:var(--bone); position:relative }
.nav__links a::after{ content:""; position:absolute; left:0; bottom:-5px; width:0; height:1px; background:var(--blood); transition:width .35s var(--ease) }
.nav__links a:hover::after{ width:100% }
.nav__cta{ font-family:var(--font-mono); font-size:12px; letter-spacing:.16em; text-transform:uppercase;
  border:1px solid var(--bone); padding:.7em 1.1em; border-radius:2px; color:var(--bone);
  min-width:148px; text-align:center; white-space:nowrap }
.nav__burger{ display:none; width:34px; height:34px; position:relative }
.nav__burger i{ position:absolute; left:5px; right:5px; height:2px; background:var(--bone); transition:.3s var(--ease) }
.nav__burger i:nth-child(1){ top:12px } .nav__burger i:nth-child(2){ bottom:12px }
body.menu-open .nav__burger i:nth-child(1){ top:16px; transform:rotate(45deg) }
body.menu-open .nav__burger i:nth-child(2){ bottom:16px; transform:rotate(-45deg) }

/* mobile menu */
.menu{ position:fixed; inset:0; z-index:6900; background:var(--ink); padding:var(--pad);
  display:flex; flex-direction:column; justify-content:center; gap:6px;
  clip-path:inset(0 0 100% 0); transition:clip-path .6s var(--ease); visibility:hidden }
body.menu-open .menu{ clip-path:inset(0 0 0 0); visibility:visible }
.menu a{ font-family:var(--font-display); font-size:clamp(44px,13vw,92px); text-transform:uppercase; line-height:1; color:var(--bone) }
.menu a:hover{ color:var(--blood) }
.menu__meta{ margin-top:40px; font-family:var(--font-mono); font-size:12px; letter-spacing:.16em; color:var(--smoke) }

/* ============================================================
   HERO
   ============================================================ */
.hero{ position:relative; min-height:100svh; display:flex; flex-direction:column; justify-content:flex-end;
  padding-bottom:clamp(28px,6vh,64px); overflow:hidden }
.hero__bg{ position:absolute; inset:0; z-index:0; background-color:var(--ink); background-size:cover; background-position:center top }
.hero__canvas{ position:absolute; inset:0; width:100%; height:100%; opacity:.5; mix-blend-mode:screen }
.hero__bg::after{ content:""; position:absolute; inset:0;
  background:radial-gradient(80% 70% at 72% 26%, rgba(228,21,27,.14), transparent 58%),
             linear-gradient(100deg, rgba(10,10,11,.72) 0%, rgba(10,10,11,.32) 46%, rgba(10,10,11,.2) 64%),
             linear-gradient(180deg, transparent 30%, rgba(10,10,11,.55) 76%, var(--ink) 100%) }
.hero__inner{ position:relative; z-index:2 }
.hero__kick{ display:flex; align-items:center; gap:14px; margin-bottom:clamp(18px,4vh,40px) }
.hero__kick .line{ height:1px; width:64px; background:var(--hair) }
.hero h1{ font-family:var(--font-display); text-transform:uppercase; line-height:.84;
  font-size:clamp(58px, 13.2vw, 224px); letter-spacing:.004em }
.hero h1 .row{ overflow:hidden; display:block }
.hero h1 .row > span{ display:block }
.hero h1 .blood{ color:var(--blood) }
.hero__proof{ display:grid; grid-template-columns:repeat(3,minmax(0,1fr)); gap:1px; width:min(920px,100%);
  margin-top:clamp(22px,4vh,38px); background:var(--hair); border:1px solid var(--hair) }
.hero__proof span{ display:block; background:rgba(10,10,11,.62); padding:13px 16px;
  font-family:var(--font-mono); font-size:11px; letter-spacing:.12em; text-transform:uppercase; color:var(--smoke) }
.hero__proof b{ display:block; margin-bottom:3px; color:var(--bone); font-weight:700; letter-spacing:.16em }
.hero__sub{ display:flex; flex-wrap:wrap; gap:24px 48px; align-items:flex-end; justify-content:space-between;
  margin-top:clamp(28px,5vh,54px); border-top:1px solid var(--hair); padding-top:26px }
.hero__sub p{ max-width:42ch; color:var(--bone-2); font-size:clamp(15px,1.3vw,18px) }
.hero__sub .cta-row{ display:flex; gap:14px; align-items:center; flex-wrap:wrap }
.scrollcue{ position:absolute; left:var(--pad); bottom:18px; z-index:3; display:flex; align-items:center; gap:10px;
  font-family:var(--font-mono); font-size:11px; letter-spacing:.2em; color:var(--smoke); text-transform:uppercase }
.scrollcue .dot{ width:6px; height:6px; border-radius:50%; background:var(--blood); animation:pulse 1.8s var(--ease) infinite }
@keyframes pulse{ 0%,100%{ opacity:1; transform:scale(1) } 50%{ opacity:.3; transform:scale(.5) } }

/* ============================================================
   MARQUEE
   ============================================================ */
.marquee{ border-block:1px solid var(--hair); padding:18px 0; overflow:hidden; white-space:nowrap;
  background:var(--ink-1) }
.marquee--blood{ background:var(--blood); border-color:transparent }
.marquee__track{ display:inline-flex; gap:48px; align-items:center; will-change:transform; animation:scroll 28s linear infinite }
.marquee--rev .marquee__track{ animation-direction:reverse }
.marquee:hover .marquee__track{ animation-play-state:paused }
.marquee__track span{ font-family:var(--font-display); font-size:clamp(28px,4.4vw,64px); text-transform:uppercase; letter-spacing:.01em }
.marquee--blood .marquee__track span{ color:var(--ink) }
.marquee__track .star{ color:var(--blood); font-family:var(--font-body); font-size:.6em }
.marquee--blood .marquee__track .star{ color:var(--ink) }
@keyframes scroll{ to{ transform:translateX(-50%) } }

/* ============================================================
   MANIFESTO
   ============================================================ */
.manifesto{ padding:clamp(90px,16vh,190px) 0 }
.manifesto__grid{ display:grid; grid-template-columns:1fr; gap:40px }
.manifesto h2{ font-family:var(--font-display); text-transform:uppercase; line-height:.92;
  font-size:clamp(34px,5.6vw,104px); letter-spacing:.004em; max-width:18ch }
.manifesto h2 em{ font-style:normal; color:var(--blood) }
.manifesto h2 .outline{ }
.manifesto__foot{ display:grid; grid-template-columns:1fr; gap:30px; margin-top:60px;
  border-top:1px solid var(--hair); padding-top:34px }
.manifesto__foot p{ color:var(--bone-2); max-width:52ch; font-size:clamp(15px,1.2vw,18px) }
.sig{ font-family:var(--font-mono); font-size:12px; letter-spacing:.14em; color:var(--smoke); text-transform:uppercase }
.drop-brief{ display:grid; grid-template-columns:minmax(220px,.55fr) 1fr auto; align-items:stretch; gap:0;
  margin-top:clamp(56px,9vh,110px); border:1px solid var(--hair); background:var(--ink-1); min-height:260px }
.drop-brief__media{ min-height:260px; background:center/cover no-repeat; filter:grayscale(.25) contrast(1.06) brightness(.8);
  position:relative; overflow:hidden }
.drop-brief__media::after{ content:""; position:absolute; inset:0; background:linear-gradient(135deg, rgba(228,21,27,.45), transparent 58%) }
.drop-brief__body{ padding:clamp(26px,4vw,54px); display:flex; flex-direction:column; justify-content:center }
.drop-brief h3{ font-family:var(--font-display); font-size:clamp(34px,5vw,78px); line-height:.9; text-transform:uppercase;
  max-width:13ch; margin:14px 0 18px }
.drop-brief p{ color:var(--bone-2); max-width:48ch; font-size:clamp(15px,1.2vw,18px) }
.drop-brief__link{ display:flex; align-items:center; justify-content:center; writing-mode:vertical-rl; transform:rotate(180deg);
  min-width:70px; padding:24px 18px; border-left:1px solid var(--hair); font-family:var(--font-mono);
  font-size:11px; letter-spacing:.16em; text-transform:uppercase; color:var(--bone-2); transition:background .35s var(--ease),color .35s var(--ease) }
.drop-brief__link:hover{ background:var(--blood); color:var(--bone) }

/* ============================================================
   PILLARS  (Train / Make / Wear)
   ============================================================ */
.pillars{ border-top:1px solid var(--hair) }
.pillar{ display:grid; grid-template-columns:90px 1fr auto; gap:clamp(18px,4vw,60px); align-items:center;
  padding:clamp(28px,5vw,56px) 0; border-bottom:1px solid var(--hair); position:relative; transition:background .5s var(--ease) }
.pillar::before{ content:""; position:absolute; left:0; top:0; bottom:0; width:0; background:var(--blood); opacity:.08; transition:width .5s var(--ease) }
.pillar:hover{ background:var(--ink-1) }
.pillar:hover::before{ width:100% }
.pillar__num{ font-family:var(--font-mono); font-size:13px; color:var(--smoke); letter-spacing:.1em; z-index:1 }
.pillar__main{ z-index:1 }
.pillar__main h3{ font-family:var(--font-display); font-size:clamp(40px,8vw,120px); text-transform:uppercase; line-height:.9;
  transition:color .4s var(--ease) }
.pillar:hover .pillar__main h3{ color:var(--blood) }
.pillar__main p{ color:var(--bone-2); max-width:46ch; margin-top:14px; font-size:clamp(14px,1.1vw,17px) }
.pillar__tag{ font-family:var(--font-mono); font-size:11px; letter-spacing:.18em; text-transform:uppercase; color:var(--smoke);
  border:1px solid var(--hair); padding:.6em 1em; border-radius:2px; white-space:nowrap; z-index:1 }
.pillar:hover .pillar__tag{ border-color:var(--blood); color:var(--blood) }

/* ============================================================
   LOOKBOOK
   ============================================================ */
.lookbook{ padding:clamp(90px,15vh,180px) 0 }
.sec-head{ display:flex; align-items:flex-end; justify-content:space-between; gap:30px; flex-wrap:wrap; margin-bottom:46px }
.sec-head h2{ font-family:var(--font-display); font-size:clamp(40px,8vw,130px); text-transform:uppercase; line-height:.86 }
.sec-head .meta{ font-family:var(--font-mono); font-size:12px; letter-spacing:.16em; color:var(--smoke); text-transform:uppercase; text-align:right }
.lb-scroller{ display:grid; grid-auto-flow:column; grid-auto-columns:minmax(280px,38vw); gap:18px;
  overflow-x:auto; scroll-snap-type:x mandatory; padding-bottom:18px; scrollbar-width:none }
.lb-scroller::-webkit-scrollbar{ display:none }
.frame{ position:relative; scroll-snap-align:start; aspect-ratio:3/4; overflow:hidden; border:1px solid var(--ink-3);
  background:var(--ink-2) }
.frame__img{ position:absolute; inset:0; background-size:cover; background-position:center; filter:grayscale(.32) contrast(1.06) brightness(.94); transition:transform 1.2s var(--ease),filter .6s }
.frame:hover .frame__img{ transform:scale(1.06); filter:grayscale(0) contrast(1.05) brightness(1.04) }
.frame__duo{ position:absolute; inset:0; mix-blend-mode:multiply;
  background:linear-gradient(150deg, var(--blood-deep), transparent 60%); opacity:.55; transition:opacity .6s }
.frame:hover .frame__duo{ opacity:.18 }
.frame__cap{ position:absolute; left:0; right:0; bottom:0; padding:18px; z-index:2;
  display:flex; justify-content:space-between; align-items:flex-end;
  background:linear-gradient(0deg, rgba(10,10,11,.85), transparent) }
.frame__cap b{ font-family:var(--font-display); font-size:clamp(22px,2vw,32px); text-transform:uppercase; line-height:.9 }
.frame__cap span{ font-family:var(--font-mono); font-size:11px; letter-spacing:.14em; color:var(--bone-2) }
.frame__no{ position:absolute; top:14px; left:14px; z-index:2; font-family:var(--font-mono); font-size:11px; letter-spacing:.16em; color:var(--bone-2) }

/* ============================================================
   THE CODE
   ============================================================ */
.code{ padding:clamp(90px,15vh,180px) 0; border-top:1px solid var(--hair); background:
  radial-gradient(70% 50% at 100% 0, rgba(228,21,27,.08), transparent 60%) }
.code__intro{ max-width:60ch; margin-bottom:60px }
.code__intro h2{ font-family:var(--font-display); font-size:clamp(40px,8vw,120px); text-transform:uppercase; line-height:.86; margin:14px 0 22px }
.code__intro p{ color:var(--bone-2); font-size:clamp(15px,1.3vw,19px) }
.tenets{ display:grid; grid-template-columns:repeat(2,1fr); gap:0 }
.tenet{ border-top:1px solid var(--hair); padding:30px 0; display:grid; grid-template-columns:64px 1fr; gap:20px; align-items:start }
.tenet:nth-child(odd){ padding-right:clamp(20px,4vw,60px); border-right:1px solid var(--hair) }
.tenet:nth-child(even){ padding-left:clamp(20px,4vw,60px) }
.tenet__no{ font-family:var(--font-display); font-size:36px; color:var(--blood); line-height:1 }
.tenet h4{ font-family:var(--font-display); font-size:clamp(20px,2vw,30px); text-transform:uppercase; line-height:1; margin-bottom:8px }
.tenet p{ color:var(--bone-2); font-size:15px; max-width:40ch }

/* ============================================================
   STATS
   ============================================================ */
.interlude{ position:relative; min-height:clamp(360px,58vh,620px); display:flex; align-items:center;
  background:var(--ink) center/cover no-repeat; border-block:1px solid var(--hair); overflow:hidden }
.interlude::after{ content:""; position:absolute; inset:0;
  background:linear-gradient(90deg, rgba(10,10,11,.88) 0%, rgba(10,10,11,.5) 52%, rgba(10,10,11,.18) 100%) }
.interlude__q{ position:relative; z-index:2; font-family:var(--font-display); text-transform:uppercase; line-height:.96;
  font-size:clamp(30px,5vw,76px); letter-spacing:.004em; max-width:20ch }
.interlude__q em{ font-style:normal; color:var(--blood) }
.interlude__tag{ position:relative; z-index:2; display:block; margin-bottom:18px; font-family:var(--font-mono);
  font-size:12px; letter-spacing:.2em; text-transform:uppercase; color:var(--bone-2) }

.stats{ border-block:1px solid var(--hair); padding:clamp(52px,8vh,92px) 0; background:var(--ink-1) }
.stats__grid{ display:grid; grid-template-columns:repeat(4,1fr); gap:30px }
.stat{ text-align:left }
.stat .n{ font-family:var(--font-display); font-size:clamp(44px,7vw,104px); line-height:.9; letter-spacing:.005em }
.stat .n .u{ color:var(--blood) }
.stat .k{ font-family:var(--font-mono); font-size:12px; letter-spacing:.14em; text-transform:uppercase; color:var(--smoke); margin-top:12px }

/* ============================================================
   JOURNAL
   ============================================================ */
.journal{ padding:clamp(80px,12vh,140px) 0 }
.jgrid{ display:grid; grid-template-columns:repeat(3,1fr); gap:1px; background:var(--hair); border:1px solid var(--hair) }
.jentry{ background:var(--ink); min-height:340px; display:flex; flex-direction:column; overflow:hidden;
  transition:background .5s var(--ease) }
.jthumb{ display:block; aspect-ratio:16/10; background:var(--ink-2) center/cover no-repeat;
  filter:grayscale(.42) contrast(1.06) brightness(.9); transition:filter .6s var(--ease),transform 1.1s var(--ease) }
.jentry:hover .jthumb{ filter:grayscale(0) contrast(1.05) brightness(1.02); transform:scale(1.04) }
.jbody{ padding:26px clamp(20px,2vw,32px) 30px; display:flex; flex-direction:column; flex:1 }
.jentry:hover{ background:var(--ink-1) }
  .jbody .jmeta{ display:flex; justify-content:space-between; font-family:var(--font-mono); font-size:11px; letter-spacing:.14em; color:var(--smoke); text-transform:uppercase }
.jbody h3{ font-family:var(--font-display); font-size:clamp(26px,2.6vw,40px); text-transform:uppercase; line-height:.94; margin-top:auto }
.jbody p{ color:var(--bone-2); font-size:14.5px; margin-top:14px }
  .jbody .read{ font-family:var(--font-mono); font-size:11px; letter-spacing:.16em; text-transform:uppercase; color:var(--blood); margin-top:20px; display:inline-flex; gap:.5em; align-items:center }

/* ============================================================
   JOIN / NEWSLETTER
   ============================================================ */
.join{ position:relative; padding:clamp(100px,20vh,240px) 0; overflow:hidden; border-top:1px solid var(--hair) }
.join__ghost{ position:absolute; inset:auto 0 -6% 0; z-index:0; text-align:center; pointer-events:none;
  font-family:var(--font-display); font-size:clamp(120px,30vw,520px); line-height:.8; color:var(--ink-2);
  text-transform:uppercase; white-space:nowrap }
.join__inner{ position:relative; z-index:1; display:grid; grid-template-columns:minmax(0,1fr) minmax(360px,.56fr);
  gap:clamp(32px,6vw,92px); align-items:end }
.join h2{ font-family:var(--font-display); font-size:clamp(44px,9vw,150px); text-transform:uppercase; line-height:.84 }
.join h2 em{ font-style:normal; color:var(--blood) }
.join p{ color:var(--bone-2); font-size:clamp(15px,1.4vw,19px); margin:22px 0 36px; max-width:46ch }
.join__card{ border:1px solid var(--hair); background:rgba(14,14,16,.88); padding:clamp(22px,3vw,34px);
  box-shadow:0 28px 80px rgba(0,0,0,.26) }
.join__card-head{ display:flex; justify-content:space-between; align-items:center; border-bottom:1px solid var(--hair);
  padding-bottom:16px; margin-bottom:18px; font-family:var(--font-mono); font-size:11px; letter-spacing:.16em; color:var(--smoke); text-transform:uppercase }
.join__list{ list-style:none; display:grid; gap:10px; margin-bottom:24px }
.join__list li{ color:var(--bone-2); font-size:14px; padding-left:24px; position:relative }
.join__list li::before{ content:""; position:absolute; left:0; top:.68em; width:8px; height:8px; background:var(--blood); transform:rotate(45deg) }
.form{ display:flex; gap:12px; flex-wrap:wrap; align-items:stretch }
.form input{ flex:1; min-width:220px; background:transparent; border:1px solid var(--hair); border-radius:2px;
  padding:1.1em 1.2em; color:var(--bone); font-family:var(--font-mono); font-size:13px; letter-spacing:.06em;
  transition:border-color .3s }
.form input::placeholder{ color:var(--smoke); text-transform:uppercase; letter-spacing:.14em; font-size:12px }
.form input:focus{ outline:none; border-color:var(--blood) }
.form__note{ font-family:var(--font-mono); font-size:11px; letter-spacing:.1em; color:var(--smoke); margin-top:18px; text-transform:uppercase }
.form__ok{ color:var(--blood) }

/* ============================================================
   FOOTER
   ============================================================ */
.footer{ border-top:1px solid var(--hair); padding:clamp(50px,8vh,90px) 0 30px }
.footer__top{ display:grid; grid-template-columns:1.4fr 1fr 1fr; gap:40px; padding-bottom:60px }
.footer__brand{ font-family:var(--font-display); font-size:clamp(60px,12vw,200px); text-transform:uppercase; line-height:.8; letter-spacing:.01em }
.footer__brand em{ font-style:normal; color:var(--blood) }
.footcol h5{ font-family:var(--font-mono); font-size:11px; letter-spacing:.18em; text-transform:uppercase; color:var(--smoke); margin-bottom:18px }
.footcol a{ display:block; font-size:15px; color:var(--bone-2); padding:5px 0; transition:color .2s,padding-left .3s var(--ease) }
.footcol a:hover{ color:var(--bone); padding-left:8px }
.footer__bar{ display:flex; justify-content:space-between; align-items:center; gap:20px; flex-wrap:wrap;
  border-top:1px solid var(--hair); padding-top:26px; font-family:var(--font-mono); font-size:11px; letter-spacing:.1em; color:var(--smoke); text-transform:uppercase }

/* ============================================================
   RESPONSIVE
   ============================================================ */
@media (max-width:1024px){
  .footer__top{ grid-template-columns:1fr 1fr }
  .footer__brand{ grid-column:1 / -1 }
  .join__inner{ grid-template-columns:1fr }
}
@media (max-width:820px){
  .nav__links{ display:none }
  .nav__cta{ display:none }
  .nav__burger{ display:block }
  .pillar{ grid-template-columns:1fr; gap:14px }
  .pillar__num{ order:-1 }
  .pillar__tag{ justify-self:start }
  .tenets{ grid-template-columns:1fr }
  .tenet:nth-child(odd){ border-right:none; padding-right:0 }
  .tenet:nth-child(even){ padding-left:0 }
  .stats__grid{ grid-template-columns:1fr 1fr; gap:40px 24px }
  .jgrid{ grid-template-columns:1fr }
  .footer__top{ grid-template-columns:1fr }
  .hero__proof{ grid-template-columns:1fr; width:100% }
  .drop-brief{ grid-template-columns:1fr }
  .drop-brief__link{ writing-mode:horizontal-tb; transform:none; min-width:0; min-height:58px; border-left:0; border-top:1px solid var(--hair) }
}
@media (max-width:540px){
  .brand{ font-size:21px }
  .hero{ min-height:92svh; padding-top:92px }
  .hero h1{ font-size:clamp(54px,18vw,86px) }
  .hero__kick{ flex-wrap:wrap; gap:10px; margin-bottom:18px }
  .hero__kick .line{ width:38px }
  .stats__grid{ grid-template-columns:1fr 1fr }
  .lb-scroller{ grid-auto-columns:78vw }
  .hero__sub{ flex-direction:column; align-items:flex-start }
  .form{ display:grid }
  .form input{ min-width:0; width:100% }
  .form .btn{ justify-content:center; width:100% }
}