/* ============================================================
   KK — black · white · one electric pink
   Bold grotesque marketing system
   ============================================================ */
@import url('https://fonts.googleapis.com/css2?family=Archivo+Expanded:wght@500;600;700;800;900&family=Archivo:wght@400;500;600;700&display=swap');

:root{
  --black:#000000;
  --bg:#0a0a0a;
  --bg-2:#0e0e0e;
  --surface:#141414;
  --surface-2:#1b1b1b;
  --white:#ffffff;
  --grey:#cfcfcf;
  --grey-2:#8a8a8a;
  --grey-3:#5a5a5a;
  --pink:#ED0080;
  --pink-2:#ff1f97;
  --pink-deep:#b3005f;
  --line:rgba(255,255,255,.12);
  --line-2:rgba(255,255,255,.07);
  --disp:'Archivo Expanded','Archivo',sans-serif;
  --sans:'Archivo',-apple-system,sans-serif;
  --ease:cubic-bezier(.22,.61,.36,1);
  --maxw:1400px;
}

*{ box-sizing:border-box; margin:0; padding:0; }
html{ scroll-behavior:smooth; }
body{
  background:var(--bg);
  color:var(--white);
  font-family:var(--sans);
  font-weight:400;
  line-height:1.6;
  -webkit-font-smoothing:antialiased;
  overflow-x:hidden;
}
a{ color:inherit; text-decoration:none; }
img{ display:block; max-width:100%; }
::selection{ background:var(--pink); color:var(--white); }

.shell{ max-width:var(--maxw); margin:0 auto; padding:0 48px; width:100%; }

/* ---------- type helpers ---------- */
.display{ font-family:var(--disp); font-weight:800; line-height:.92; letter-spacing:-.02em; text-transform:uppercase; }
.eyebrow{ font-family:var(--sans); font-size:12px; font-weight:600; letter-spacing:.32em; text-transform:uppercase; color:var(--pink); }
.lede{ color:var(--grey); font-size:clamp(16px,1.25vw,19px); font-weight:400; max-width:56ch; line-height:1.65; }
.pink{ color:var(--pink); }

/* ---------- buttons ---------- */
.btn{
  display:inline-flex; align-items:center; gap:11px; cursor:pointer; border:none;
  font-family:var(--sans); font-size:12px; font-weight:700; letter-spacing:.18em; text-transform:uppercase;
  padding:17px 32px; transition:transform .35s var(--ease), background-color .35s var(--ease), color .35s var(--ease), border-color .35s var(--ease);
  position:relative; white-space:nowrap;
}
.btn-pink{ background:var(--pink); color:var(--white); }
.btn-pink:hover{ background:var(--pink-2); transform:translateY(-2px); }
.btn-ghost{ background:transparent; color:var(--white); border:1.5px solid rgba(255,255,255,.35); }
.btn-ghost:hover{ border-color:var(--pink); color:var(--pink); }
.btn-white{ background:var(--white); color:var(--black); }
.btn-white:hover{ background:var(--pink); color:var(--white); transform:translateY(-2px); }
.btn .ar{ transition:transform .35s var(--ease); }
.btn:hover .ar{ transform:translateX(5px); }

/* ---------- nav ---------- */
.nav{
  position:fixed; top:0; left:0; right:0; z-index:200;
  display:flex; align-items:center; justify-content:space-between;
  padding:20px 48px; transition:background .45s var(--ease), padding .45s var(--ease), border-color .45s;
  border-bottom:1px solid transparent;
}
.nav.scrolled{ background:rgba(5,5,5,.9); backdrop-filter:blur(16px); padding:13px 48px; border-bottom:1px solid var(--line); }
.nav .mark{ font-family:var(--disp); font-weight:900; font-size:19px; letter-spacing:.02em; text-transform:uppercase; display:flex; align-items:center; gap:11px; }
.nav .mark .kk{ display:inline-flex; width:36px; height:36px; flex:none; }
.nav .mark .kk svg, .drawer .kk-d svg{ display:block; width:100%; height:100%; }
.drawer .kk-d{ display:inline-flex; width:32px; height:32px; flex:none; }
.nav .links{ display:flex; gap:30px; }
.nav .links a{ font-size:12px; font-weight:600; letter-spacing:.14em; text-transform:uppercase; color:var(--grey); position:relative; padding:7px 0; transition:color .3s; }
.nav .links a::after{ content:""; position:absolute; left:0; bottom:0; width:0; height:2px; background:var(--pink); transition:width .35s var(--ease); }
.nav .links a:hover{ color:var(--white); }
.nav .links a:hover::after, .nav .links a.active::after{ width:100%; }
.nav .links a.active{ color:var(--white); }
.nav-cta{ display:flex; align-items:center; gap:16px; }
.nav .menu-btn{ display:none; background:none; border:none; color:var(--white); cursor:pointer; font-size:22px; line-height:1; }

/* mobile drawer */
.drawer{ position:fixed; inset:0; z-index:300; background:var(--black); transform:translateX(100%); transition:transform .5s var(--ease); display:flex; flex-direction:column; padding:28px 32px; }
.drawer.open{ transform:none; }
.drawer .dtop{ display:flex; justify-content:space-between; align-items:center; }
.drawer .dlinks{ display:flex; flex-direction:column; gap:6px; margin-top:8vh; }
.drawer .dlinks a{ font-family:var(--disp); font-weight:800; font-size:34px; text-transform:uppercase; padding:12px 0; border-bottom:1px solid var(--line-2); }
.drawer .dlinks a:hover{ color:var(--pink); }
.drawer .dcta{ margin-top:auto; }
.drawer .dcta .btn{ width:100%; justify-content:center; }

/* ---------- footer ---------- */
.footer{ background:var(--black); border-top:1px solid var(--line); padding:90px 0 36px; position:relative; z-index:2; }
.footer .top{ display:grid; grid-template-columns:1.7fr 1fr 1fr 1.3fr; gap:48px; padding-bottom:60px; border-bottom:1px solid var(--line); }
.footer .mark{ font-family:var(--disp); font-weight:900; font-size:30px; text-transform:uppercase; display:flex; align-items:center; gap:13px; }
.footer .mark .kk-f{ display:inline-flex; width:40px; height:40px; flex:none; }
.footer .mark .kk-f svg{ display:block; width:100%; height:100%; }
.footer p.tag{ color:var(--grey-2); font-size:14px; margin-top:16px; max-width:34ch; line-height:1.6; }
.footer h5{ font-size:11px; letter-spacing:.24em; text-transform:uppercase; color:var(--grey-2); margin-bottom:20px; }
.footer ul{ list-style:none; display:flex; flex-direction:column; gap:13px; }
.footer ul a{ color:var(--grey); font-size:14px; transition:color .3s; }
.footer ul a:hover{ color:var(--pink); }
.footer .news p{ color:var(--grey); font-size:14px; margin-bottom:16px; }
.footer .news form{ display:flex; border:1px solid var(--line); }
.footer .news input{ flex:1; background:transparent; border:none; padding:14px 16px; color:var(--white); font-family:var(--sans); font-size:14px; outline:none; }
.footer .news input::placeholder{ color:var(--grey-3); }
.footer .news button{ background:var(--pink); border:none; color:var(--white); padding:0 22px; font-family:var(--sans); font-weight:700; font-size:12px; letter-spacing:.14em; text-transform:uppercase; cursor:pointer; transition:background .3s; }
.footer .news button:hover{ background:var(--pink-2); }
.footer .social{ display:flex; gap:12px; margin-top:22px; }
.footer .social a{ width:40px; height:40px; border:1px solid var(--line); display:grid; place-items:center; color:var(--grey); transition:.3s var(--ease); font-size:13px; font-weight:700; }
.footer .social a:hover{ border-color:var(--pink); color:var(--pink); }
.footer .bottom{ display:flex; justify-content:space-between; align-items:center; padding-top:30px; color:var(--grey-3); font-size:12px; letter-spacing:.04em; flex-wrap:wrap; gap:12px; }
.footer .bottom .lr{ display:flex; gap:22px; }
.footer .bottom a:hover{ color:var(--grey); }

/* ---------- reveal ---------- */
.rv{ opacity:0; transform:translateY(36px); transition:opacity .9s var(--ease), transform .9s var(--ease); }
.rv.in{ opacity:1; transform:none; }
.rv.d1{ transition-delay:.09s; } .rv.d2{ transition-delay:.18s; }
.rv.d3{ transition-delay:.27s; } .rv.d4{ transition-delay:.36s; }
@media (prefers-reduced-motion:reduce){ .rv{ opacity:1 !important; transform:none !important; } }

/* moody image grade */
.grade{ filter:grayscale(.55) contrast(1.08) brightness(.82); }
.grade-bw{ filter:grayscale(1) contrast(1.1) brightness(.8); }

.footer .kissstamp{ width:52px; margin-top:22px; }
.footer .kissstamp svg{ width:100%; height:auto; display:block; }
.joincta .kissstamp{ width:66px; margin:0 auto 24px; }
.joincta .kissstamp svg{ width:100%; height:auto; display:block; }

@media (max-width:1024px){
  .shell{ padding:0 32px; }
  .nav{ padding:16px 32px; }
  .nav.scrolled{ padding:12px 32px; }
  .footer .top{ grid-template-columns:1fr 1fr; gap:36px; }
}
@media (max-width:760px){
  .shell{ padding:0 22px; }
  .nav{ padding:15px 22px; }
  .nav .links, .nav-cta .btn{ display:none; }
  .nav .menu-btn{ display:block; }
  .footer .top{ grid-template-columns:1fr; }
}