/* The Whole Clipping — set in Whole Clip Black.
   Every display line on this page is the custom face; nothing here falls
   back to a system font for the lettering. */

@font-face{
  font-family:"Whole Clip";
  src:url("fonts/WholeClip-Black.woff2") format("woff2"),
      url("fonts/WholeClip-Black.woff") format("woff"),
      url("fonts/WholeClip-Black.ttf") format("truetype");
  font-weight:900; font-style:normal; font-display:block;
}

:root{
  --ink:#0d0d0e; --panel:#141416; --cream:#f2ecd9; --accent:#f04e23;
  --green:#3faa63; --line:#26262a; --dim:#8d8d93;
  --mono:ui-monospace,"Consolas",monospace;
  --sans:ui-sans-serif,system-ui,"Segoe UI",sans-serif;
}
*{box-sizing:border-box}
html{scroll-behavior:smooth}
body{margin:0;background:var(--ink);color:var(--cream);
  font:17px/1.55 var(--sans);-webkit-font-smoothing:antialiased}
a{color:inherit;text-decoration:none}
h1,h2,h3,h4{margin:0}
ul,ol{margin:0;padding:0;list-style:none}

.clip{font-family:"Whole Clip",sans-serif;font-weight:900;
  text-transform:uppercase;letter-spacing:.005em}
.dot{color:var(--accent)}
.k{font-family:var(--mono);font-size:12px;letter-spacing:.2em;
  text-transform:uppercase;color:var(--dim)}
.mono{font-family:var(--mono);font-size:13px;color:var(--dim)}
.plain{font-family:var(--mono);font-size:12px;letter-spacing:.18em;
  text-transform:uppercase;color:var(--dim)}
.btn{display:inline-flex;align-items:center;gap:14px;border:1px solid #3a3a40;
  font-family:var(--mono);font-size:12px;letter-spacing:.2em;
  text-transform:uppercase;padding:12px 18px;color:var(--cream)}
.btn.big{padding:17px 24px;font-size:13px}
.btn i{font-style:normal;color:var(--accent)}
.btn:hover{border-color:var(--cream)}
.btn.solid{background:var(--cream);color:var(--ink);border-color:var(--cream);
  justify-content:center;width:100%}

/* --- plates: tonal stand-ins, not borrowed photography ------------------ */
.plate{position:relative;margin:0;border:1px solid var(--line);
  background:linear-gradient(135deg,#1b1b1f,#101013 60%,#17171b);
  aspect-ratio:16/10;overflow:hidden}
.plate::after{content:"";position:absolute;inset:0;
  background:repeating-linear-gradient(115deg,rgba(242,236,217,.045) 0 2px,
    transparent 2px 9px)}
.plate.p1{background:linear-gradient(150deg,#1f2630,#0f1115 65%,#1a2028)}
.plate.p2{background:linear-gradient(150deg,#2a1f1b,#111013 65%,#1f1a18)}
.plate.p3{background:linear-gradient(150deg,#2a1b2e,#121014 65%,#1d1824)}
.plate.p4{background:linear-gradient(150deg,#1b2a24,#101412 65%,#17231e)}
.plate.s1{background:linear-gradient(160deg,#242b34,#0f1114 70%)}
.plate.s2{background:linear-gradient(160deg,#2d2720,#111014 70%)}
.plate.s3{background:linear-gradient(160deg,#1d2a2c,#0f1314 70%)}
.plate.s4{background:linear-gradient(160deg,#2b2330,#111014 70%)}
.plate .idx{position:absolute;top:14px;left:16px;font-family:var(--mono);
  font-size:12px;letter-spacing:.2em;color:var(--cream);z-index:2}
.plate .cap{position:absolute;top:14px;left:56px;font-family:var(--mono);
  font-size:10px;letter-spacing:.2em;text-transform:uppercase;
  color:var(--dim);line-height:1.7;z-index:2}
.plate .cap.right{left:auto;right:16px;text-align:right}
.plate .dur{position:absolute;right:10px;bottom:10px;font-family:var(--mono);
  font-size:11px;background:rgba(0,0,0,.6);padding:3px 7px;z-index:2}
.plate .time{position:absolute;left:16px;bottom:14px;font-family:var(--mono);
  font-size:11px;color:var(--dim);z-index:2}
.plate .scrub{position:absolute;left:120px;right:70px;bottom:20px;height:2px;
  background:#3a3a40;z-index:2}
.plate .scrub b{position:absolute;inset:0 62% 0 0;background:var(--accent)}

/* --- nav ---------------------------------------------------------------- */
.nav{display:flex;align-items:center;gap:34px;flex-wrap:wrap;
  padding:20px 46px;border-bottom:1px solid var(--line)}
.nav .mark{font-size:28px;line-height:1}
.nav nav{display:flex;gap:28px;flex:1}
.nav nav a,.navr .plain{font-family:var(--mono);font-size:11px;
  letter-spacing:.2em;text-transform:uppercase;color:var(--dim)}
.nav nav a:hover{color:var(--cream)}
.navr{display:flex;align-items:center;gap:22px}

/* --- hero --------------------------------------------------------------- */
.hero{display:grid;grid-template-columns:1fr 1fr;gap:56px;
  padding:54px 46px 60px;align-items:start}
.hero h1{font-size:clamp(56px,7.4vw,108px);line-height:.84;margin:0}
.lede{font-family:var(--mono);font-size:14px;letter-spacing:.2em;
  text-transform:uppercase;line-height:2;color:var(--cream);margin:34px 0 0}
.acts{display:flex;gap:16px;flex-wrap:wrap;margin:36px 0 0}
.heroR{aspect-ratio:16/9}

/* --- stats -------------------------------------------------------------- */
.stats{display:grid;grid-template-columns:repeat(4,1fr) 1.1fr;gap:30px;
  padding:30px 46px;border-top:1px solid var(--line);
  border-bottom:1px solid var(--line);align-items:center}
.stats > div + div{border-left:1px solid var(--line);padding-left:30px}
.stats .n{font-size:46px;line-height:1;border-bottom:3px solid var(--accent);
  display:inline-block;padding-bottom:3px}
.stats .k{margin-top:10px}
.creed{font-family:var(--mono);font-size:11px;letter-spacing:.2em;
  text-transform:uppercase;line-height:2;color:var(--dim);
  border-left:3px solid var(--accent)!important;padding-left:18px!important}

/* --- blocks ------------------------------------------------------------- */
.block{padding:56px 46px;border-bottom:1px solid var(--line)}
.head{display:flex;justify-content:space-between;align-items:flex-end;
  gap:20px;flex-wrap:wrap;margin-bottom:28px}
.head h2{font-size:38px;line-height:1}

.cards{display:grid;grid-template-columns:repeat(4,1fr);gap:22px}
.card .plate{aspect-ratio:16/10;margin-bottom:16px}
.card h3{font-size:19px;font-weight:700;margin-bottom:6px}
.card .count{font-size:26px;margin:12px 0 8px}
.tags{display:flex;gap:7px;flex-wrap:wrap;margin:14px 0 0}
.tags span{border:1px solid var(--line);font-family:var(--mono);font-size:10px;
  letter-spacing:.14em;text-transform:uppercase;padding:5px 8px;color:var(--dim)}

/* --- campaign detail ---------------------------------------------------- */
.camp{display:flex;justify-content:space-between;align-items:flex-end;gap:30px;
  flex-wrap:wrap;padding-bottom:26px;border-bottom:1px solid var(--line)}
.camp h2{font-size:40px;line-height:1;margin-bottom:8px}
.money{display:flex;gap:40px}
.money .m{font-size:30px;line-height:1;margin-bottom:6px}
.split{display:grid;grid-template-columns:420px 1fr;gap:26px;margin-top:26px}
.panel{border:1px solid var(--line)}
.ptitle{font-family:var(--mono);font-size:12px;letter-spacing:.2em;
  text-transform:uppercase;padding:16px 20px;border-bottom:1px solid var(--line)}
.rules{display:grid;grid-template-columns:1fr 1fr;gap:24px;padding:20px}
.must{color:var(--green);font-size:20px;margin-bottom:12px}
.dont{color:var(--accent);font-size:20px;margin-bottom:12px}
.rules li{font-size:15px;line-height:1.5;margin-bottom:11px;padding-left:24px;
  position:relative}
.yes li::before{content:"\2713";position:absolute;left:0;color:var(--green)}
.no li::before{content:"\00d7";position:absolute;left:0;color:var(--accent)}
.plats{padding:16px 20px;border-top:1px solid var(--line);font-size:14px}
.grid4{display:grid;grid-template-columns:repeat(4,1fr);gap:0}
.clipcard{padding:16px;border-right:1px solid var(--line)}
.clipcard:last-child{border-right:0}
.clipcard.on{outline:2px solid var(--accent);outline-offset:-2px}
.clipcard .plate{aspect-ratio:16/10;margin-bottom:12px}
.clipcard h4{font-size:15px;font-weight:700;text-transform:uppercase;
  letter-spacing:.04em;line-height:1.3;margin-bottom:10px}
.badge{display:inline-block;background:rgba(63,170,99,.16);color:var(--green);
  font-family:var(--mono);font-size:10px;letter-spacing:.16em;
  text-transform:uppercase;padding:4px 8px}
.price{font-size:22px;margin:12px 0 0;display:flex;justify-content:space-between}
.price i{font-style:normal;color:var(--dim)}

/* --- certification ------------------------------------------------------ */
.cert{display:grid;grid-template-columns:1fr 1fr 280px;gap:34px;
  align-items:start}
.cert h2{font-size:32px;margin-bottom:20px}
.checks{display:grid;gap:11px;margin-bottom:24px}
.checks li{font-size:15px;padding-left:28px;position:relative}
.checks li::before{content:"\2713";position:absolute;left:0;color:var(--green);
  border:1px solid var(--green);border-radius:50%;width:17px;height:17px;
  font-size:10px;display:grid;place-items:center;top:3px}
.working{display:grid;gap:16px;border-top:1px solid var(--line);padding-top:18px}
.working p{margin:6px 0 0;font-size:14px;color:var(--cream)}
.buy{border:1px solid var(--line);padding:22px;display:grid;gap:16px}
.stamp{border:2px solid var(--green);color:var(--green);font-size:26px;
  text-align:center;padding:10px 0 7px;line-height:1}
.amount{font-size:52px;line-height:1}

/* --- how it works ------------------------------------------------------- */
.steps{display:grid;grid-template-columns:repeat(7,1fr);gap:0}
.steps li{padding:0 20px 0 0;border-right:1px solid var(--line);
  margin-right:20px}
.steps li:last-child{border-right:0}
.steps .idx{font-family:var(--mono);font-size:11px;letter-spacing:.2em;
  color:var(--ink);background:var(--cream);padding:3px 7px}
.steps h3{font-size:25px;margin:16px 0 8px}
.steps p{font-size:14px;color:var(--dim);margin:0;line-height:1.5}

/* --- footer ------------------------------------------------------------- */
.foot{display:grid;grid-template-columns:360px 1fr 230px;gap:40px;
  align-items:center;padding:0 46px 0 0;background:#0a0a0b}
.foot .plate{aspect-ratio:auto;height:230px;border:0;border-right:1px solid var(--line)}
.foot h2{font-size:46px;line-height:1}
.foot .sub{font-size:22px;color:var(--dim);margin:10px 0 24px}
.end{display:flex;justify-content:space-between;gap:20px;flex-wrap:wrap;
  padding:22px 46px;border-top:1px solid var(--line);align-items:center}
.end .clip{font-size:20px}

@media (max-width:1100px){
  .hero,.cert,.foot{grid-template-columns:1fr}
  .cards,.grid4,.rules{grid-template-columns:1fr 1fr}
  .split{grid-template-columns:1fr}
  .steps{grid-template-columns:repeat(2,1fr)}
  .stats{grid-template-columns:1fr 1fr}
  .stats > div + div{border-left:0;padding-left:0}
}
@media (max-width:620px){
  .nav,.hero,.block,.end{padding-left:20px;padding-right:20px}
  .cards,.grid4,.rules,.stats,.steps{grid-template-columns:1fr}
  .clipcard{border-right:0;border-bottom:1px solid var(--line)}
}