/* ============ SPOILS landing page · black & white ============ */

/* ---------- hero ---------- */
.hero{border-bottom:var(--bw) solid var(--ink); background:var(--paper);}
.hero-inner{max-width:var(--maxw); margin:0 auto; padding:64px 24px 56px;}
.hero .kicker{
  font-family:var(--font-mono); font-size:12px; letter-spacing:0.14em;
  text-transform:uppercase; color:var(--grey); margin-bottom:16px;
}
.hero h1{
  font-family:var(--font-display);
  font-weight:700;
  font-size:clamp(28px, 4.4vw, 46px);
  line-height:1.12;
  letter-spacing:-0.015em;
  max-width:24ch;
}
.hero-sub{
  margin-top:22px; max-width:56ch;
  font-size:17.5px; line-height:1.6; color:var(--ink);
}
.hero-ctas{margin-top:34px; display:flex; gap:10px; flex-wrap:wrap;}
.hero-ctas .btn{font-size:14px; padding:13px 24px;}

/* ---------- destination ticker ---------- */
.manifest{
  border-top:var(--bw) solid var(--ink);
  background:var(--ink); color:var(--paper);
  overflow:hidden; white-space:nowrap;
  font-family:var(--font-mono); font-size:13px; font-weight:500;
  padding:11px 0;
}
.manifest-track{display:inline-block; animation:ticker 46s linear infinite; padding-left:100%;}
@keyframes ticker{from{transform:translateX(0);} to{transform:translateX(-50%);}}
.manifest span{margin-right:44px;}
.manifest .m-name{color:var(--paper); font-weight:600;}
.manifest .m-dest{color:#8C8C8C;}
.manifest .dot{display:inline-block; width:9px; height:9px; margin-right:8px; vertical-align:baseline;}
@media (prefers-reduced-motion: reduce){
  .manifest-track{animation:none; padding-left:16px; white-space:normal;}
}

/* ---------- sections ---------- */
.section{padding:72px 24px; border-bottom:var(--bw) solid var(--ink);}
.section-inner{max-width:var(--maxw); margin:0 auto;}
.section h2{
  font-family:var(--font-display); font-weight:700;
  font-size:clamp(22px, 2.8vw, 32px);
  letter-spacing:-0.01em; line-height:1.2;
  margin:14px 0 10px; max-width:32ch;
}
.section .lede{max-width:58ch; color:var(--ink); font-size:17px;}

/* ---------- the waste, in numbers ---------- */
.numbers{
  display:grid; grid-template-columns:repeat(auto-fit, minmax(240px,1fr));
  margin-top:40px; border:var(--bw) solid var(--ink); background:var(--ink);
  gap:var(--bw); grid-auto-rows:1fr;
}
.numbers > div{background:var(--paper); padding:26px 24px;}
.numbers .num{
  font-family:var(--font-display); font-weight:700;
  font-size:36px; line-height:1; letter-spacing:-0.02em;
}
.numbers .lbl{margin-top:12px; font-family:var(--font-mono); font-size:12px; color:var(--grey); line-height:1.55;}

/* ---------- colour code ---------- */
.code-row{
  display:grid; grid-template-columns:120px 210px 1fr;
  gap:24px; align-items:start;
  border-top:2px solid var(--ink); padding:26px 0;
}
.code-row:first-of-type{border-top:none; margin-top:36px;}
.code-swatch{width:120px; height:76px; border:2px solid var(--ink);}
.code-swatch.g{background:var(--mk-green);} .code-swatch.b{background:var(--mk-blue);}
.code-swatch.p{background:var(--mk-purple);} .code-swatch.r{background:var(--mk-red);}
.code-verb{
  font-family:var(--font-display); font-weight:700; font-size:21px;
  text-transform:uppercase; letter-spacing:0.02em; line-height:1.1;
}
.code-role{
  font-family:var(--font-mono); font-size:11px; font-weight:600;
  letter-spacing:0.12em; text-transform:uppercase; color:var(--grey); margin-bottom:6px;
}
.code-row p.body{max-width:62ch;}

/* ---------- three moves ---------- */
.legend-line{
  font-family:var(--font-mono); font-size:11px; letter-spacing:0.1em;
  text-transform:uppercase; color:var(--grey);
  border-top:2px dashed var(--ink); padding-top:10px; margin-top:28px;
}
.steps{
  display:grid; grid-template-columns:repeat(auto-fit, minmax(260px,1fr));
  gap:32px; margin-top:34px;
}
.steps .n{font-family:var(--font-mono); font-weight:600; font-size:14px; letter-spacing:0.2em; color:var(--grey);}
.steps h3{
  font-family:var(--font-display); font-weight:700; font-size:19px;
  margin:6px 0 8px;
}
.steps p{max-width:44ch;}

/* ---------- tiers ---------- */
.tiers{
  display:grid; grid-template-columns:repeat(auto-fit, minmax(280px,1fr));
  gap:20px; margin-top:38px; align-items:stretch;
}
.tier{border:var(--bw) solid var(--ink); background:var(--paper); padding:26px 24px; display:flex; flex-direction:column;}
.tier h3{
  font-family:var(--font-display); font-weight:700; font-size:20px;
}
.tier .one{margin:12px 0 18px; font-size:15px;}
.tier ul{list-style:none; margin-top:auto;}
.tier ul li{
  font-family:var(--font-mono); font-size:11.5px; font-weight:500;
  letter-spacing:0.04em; padding:8px 0; border-top:1px solid var(--rule);
}
.tier ul li::before{content:"+ ";}
.tier .note{
  margin-top:18px; font-family:var(--font-mono); font-size:11px; font-weight:600;
  letter-spacing:0.14em; text-transform:uppercase;
  border-top:2px solid var(--ink); padding-top:12px;
}
.tier.dark{background:var(--ink); color:var(--paper);}
.tier.dark ul li{border-top-color:#333;}
.tier.dark .note{border-top-color:var(--paper);}
.fees{
  margin-top:26px; font-family:var(--font-mono); font-size:12px; font-weight:600;
  letter-spacing:0.12em; text-transform:uppercase;
}

/* ---------- who calls ---------- */
.who{display:grid; grid-template-columns:repeat(auto-fit, minmax(260px,1fr)); gap:32px; margin-top:36px;}
.who h3{
  font-family:var(--font-display); font-weight:700; font-size:18px;
  margin-bottom:6px;
}
.who p{max-width:44ch;}
.wmp{
  margin-top:40px; border:var(--bw) solid var(--ink);
  display:grid; grid-template-columns:minmax(220px, 340px) 1fr;
}
.wmp .t{
  background:var(--ink); color:var(--paper);
  font-family:var(--font-display); font-weight:700; font-size:20px;
  line-height:1.2; padding:24px;
}
.wmp .b{padding:24px; align-self:center; max-width:70ch;}
@media (max-width:700px){ .wmp{grid-template-columns:1fr;} }

/* ---------- map promo ---------- */
.map-promo{background:var(--ink); color:var(--paper); border-bottom:var(--bw) solid var(--ink);}
.map-promo h2{color:var(--paper);}
.map-promo .lede{color:#B9B9B9;}
.promo-grid{
  margin-top:36px; display:grid;
  grid-template-columns:repeat(auto-fit, minmax(230px,1fr)); gap:2px;
  background:#3A3A3A; border:2px solid #3A3A3A;
}
.promo-grid > div{background:#141414; padding:22px;}
.promo-grid h4{
  font-family:var(--font-display); font-weight:700; font-size:15px;
  color:var(--paper);
}
.promo-grid p{margin-top:8px; font-size:14.5px; color:#ABABAB; line-height:1.55;}
.map-promo .btn{
  margin-top:36px; background:var(--paper); border-color:var(--paper); color:var(--ink);
  font-size:15px; padding:14px 26px;
}
.map-promo .btn:hover{background:transparent; color:var(--paper);}

/* ---------- contact band ---------- */
.contact{background:var(--paper);}
.contact h2{max-width:20ch;}
.contact .email{
  display:inline-block; margin-top:20px;
  font-family:var(--font-display); font-weight:700;
  font-size:clamp(19px, 2.4vw, 26px); letter-spacing:-0.01em;
  text-decoration:none; border-bottom:3px solid var(--ink);
}
.contact .email:hover{background:var(--ink); color:var(--paper);}

@media (max-width:760px){
  .hero-inner{padding-top:44px;}
  .code-row{grid-template-columns:72px 1fr; grid-template-rows:auto auto;}
  .code-swatch{width:72px; height:52px;}
  .code-row > div:last-child{grid-column:1 / -1;}
}