/* ============================================================
   CATALYST — "Accelerate the reaction. Remain unchanged."
   Catalyst's own closed system: Void / Aura / Violet / Charcoal,
   Space Grotesk x Inter. Structural signature = the surface
   alternation (Void <-> Aura), each switch a reaction.
   50/50 negative space is a layout law, not a preference.
   ============================================================ */

:root{
  --void:#111827; --violet:#7C3AED; --aura:#F8F7FF; --charcoal:#374151;
  --surface:#F9FAFB; --mist:#F3F4F6; --border:#E5E7EB; --slate:#6B7280; --dusk:#1F2937;
  --v-300:#C4B5FD; --v-200:#DDD6FE; --v-50:#F5F3FF;
  --grotesk:'Space Grotesk',system-ui,sans-serif;
  --inter:'Inter',system-ui,sans-serif;
  --pad:clamp(20px,5vw,88px);
  --ease:cubic-bezier(.22,.61,.36,1);
}

*,*::before,*::after{ box-sizing:border-box; }
html{ -webkit-text-size-adjust:100%; }
body.cat{
  margin:0; background:var(--aura); color:var(--charcoal);
  font-family:var(--inter); font-size:16px; line-height:1.62;
  overflow-x:clip;                       /* clip, never hidden — hidden breaks position:sticky */
  -webkit-font-smoothing:antialiased;
}
img{ max-width:100%; display:block; }
::selection{ background:var(--violet); color:#fff; }

/* ---------- reveals: replay in BOTH directions ---------- */
[data-reveal]{ opacity:0; transform:translateY(22px); transition:opacity .8s var(--ease), transform .8s var(--ease); }
[data-reveal].in{ opacity:1; transform:none; }
.no-js [data-reveal]{ opacity:1; transform:none; }
@media (prefers-reduced-motion:reduce){
  [data-reveal]{ opacity:1 !important; transform:none !important; transition:none; }
}

/* ---------- intro loader ---------- */
.cat-intro{
  position:fixed; inset:0; z-index:9000; background:var(--void);
  display:grid; place-items:center;
}
.cat-intro.is-go{ animation:catIntroOut .7s var(--ease) 2.05s forwards; }
.cat-intro__mark{ width:min(30vw,180px); aspect-ratio:1; display:block; }
.cat-intro__mark svg{ width:100%; height:100%; }
@keyframes catIntroOut{ to{ opacity:0; visibility:hidden; } }

/* the seven C-forms strike in around a nucleus that ignites last */
.cyc{ width:100%; height:100%; overflow:visible; }
.cyc__c{ fill:var(--aura); }
.cyc__n{ fill:var(--violet); }
.cat-intro.is-go .cyc__c{ opacity:0; transform-origin:500px 500px; animation:catStrike .5s var(--ease) forwards; animation-delay:calc(.12s * var(--i)); }
.cat-intro.is-go .cyc__n{ opacity:0; animation:catIgnite .6s var(--ease) 1.05s forwards; }
@keyframes catStrike{ from{ opacity:0; transform:scale(.82); } to{ opacity:1; transform:none; } }
@keyframes catIgnite{ 0%{ opacity:0; } 45%{ opacity:1; filter:drop-shadow(0 0 26px rgba(124,58,237,.95)); } 100%{ opacity:1; filter:none; } }
@media (prefers-reduced-motion:reduce){
  .cat-intro .cyc__c,.cat-intro .cyc__n{ opacity:1; animation:none; }
}

/* ---------- chrome ---------- */
.cat-wo{
  position:fixed; left:var(--pad); bottom:26px; z-index:60; text-decoration:none;
  font-family:var(--grotesk); font-size:11px; letter-spacing:.14em; text-transform:uppercase;
  color:var(--slate); display:flex; gap:.45em; align-items:center; mix-blend-mode:difference;
  min-height:44px; padding:13px 0;
}
.cat-wo b{ color:#fff; }
.cat-wo span{ color:#9aa1ac; }
/* on phones the top nav already carries the WO! back-link — the fixed one only collides with copy */
@media (max-width:760px){ .cat-wo{ display:none; } }

.cat-prog{ position:fixed; top:0; left:0; right:0; height:2px; z-index:80; background:transparent; }
.cat-prog i{ display:block; height:100%; width:0; background:var(--violet); transition:width .12s linear; }

.cat-nav{
  position:fixed; top:0; left:0; right:0; z-index:70; display:flex; justify-content:space-between;
  align-items:center; gap:16px; padding:18px var(--pad);
  font-family:var(--grotesk); font-size:11px; letter-spacing:.13em; text-transform:uppercase;
  transition:background .4s var(--ease), color .4s var(--ease), border-color .4s var(--ease);
  border-bottom:1px solid transparent; color:#9aa1ac;
}
.cat-nav.is-solid{ background:rgba(17,24,39,.82); backdrop-filter:blur(14px); border-bottom-color:rgba(255,255,255,.08); }
.cat-nav.is-solid.is-light{ background:rgba(248,247,255,.86); border-bottom-color:var(--border); color:var(--slate); }
.cat-nav__back{ display:flex; align-items:center; gap:8px; color:inherit; text-decoration:none; min-height:44px; padding:13px 0; }
.cat-nav__back svg{ width:15px; height:15px; transition:transform .3s var(--ease); }
.cat-nav__back:hover svg{ transform:translateX(-4px); }
.cat-nav__id{ display:flex; align-items:center; gap:10px; }
.cat-nav__mark{ width:17px; height:17px; display:block; }
.cat-nav__mark .cyc__c{ fill:currentColor; }
@media (max-width:720px){ .cat-nav__id span:last-child{ display:none; } }

/* cursor (fine pointers only) */
.cat-cursor{ display:none; }
body.is-fine .cat-cursor{
  display:block; position:fixed; top:0; left:0; z-index:9500; pointer-events:none;
  width:34px; height:34px; margin:-17px 0 0 -17px; transition:opacity .3s;
}
.cat-cursor i{
  display:block; width:100%; height:100%; border:1px solid var(--violet); border-radius:50%;
  transform:scale(.34); transition:transform .3s var(--ease), background .3s var(--ease);
  background:var(--violet);
}
body.is-fine.is-hot .cat-cursor i{ transform:scale(1); background:transparent; }

/* ---------- shared type ---------- */
.cat-wrap{ max-width:1220px; margin:0 auto; padding:0 var(--pad); }
.cat-wrap--split{ display:grid; grid-template-columns:1fr 1fr; gap:clamp(32px,6vw,88px); align-items:start; }
@media (max-width:880px){ .cat-wrap--split{ grid-template-columns:1fr; } }

.cat-kicker{
  font-family:var(--grotesk); font-size:11px; letter-spacing:.18em; text-transform:uppercase;
  color:var(--violet); margin:0 0 22px;
}
.cat-kicker::after{ content:''; display:block; width:34px; height:2px; background:var(--violet); margin-top:12px; }
.cat-kicker--on{ color:var(--v-300); }
.cat-kicker--on::after{ background:var(--v-300); }

.cat-h2{
  font-family:var(--grotesk); font-weight:600; color:var(--void);
  font-size:clamp(30px,5.4vw,62px); line-height:1.06; letter-spacing:-.022em; margin:0 0 30px;
}
.cat-h2--on{ color:var(--aura); }

.cat-lede{ max-width:60ch; font-size:clamp(15px,1.55vw,17.5px); }
.cat-lede--nar{ max-width:56ch; }
.cat-lede p{ margin:0 0 1.05em; }
.cat-lede em{ color:var(--void); font-style:normal; font-weight:600; }
.cat-lede--on{ color:#aeb6c2; }
.cat-lede--on em{ color:var(--aura); }

.cat-eyebrow{
  font-family:var(--grotesk); font-size:11px; letter-spacing:.16em; text-transform:uppercase;
  color:var(--slate); margin:0 0 26px;
}

.cat-sec{ padding:clamp(84px,13vh,168px) 0; }
.cat-sec--aura{ background:var(--aura); }
.cat-sec--mist{ background:var(--mist); }
.cat-sec--void{ background:var(--void); }

/* ============================================================
   01 · HERO — THE REACTION FIELD
   ============================================================ */
.cat-hero{
  position:relative; min-height:100svh; background:var(--void); color:var(--aura);
  display:flex; flex-direction:column; justify-content:center;
  padding:120px var(--pad) 96px; overflow:clip;
}
.cat-field{ position:absolute; inset:0; width:100%; height:100%; z-index:0; }
.cat-hero__in{ position:relative; z-index:2; max-width:1220px; margin:0 auto; width:100%; pointer-events:none; }
.cat-hero .cat-eyebrow{ color:#7b8494; }
.cat-hero__h{
  font-family:var(--grotesk); font-weight:700; margin:0 0 30px;
  font-size:clamp(38px,7.6vw,104px); line-height:.99; letter-spacing:-.035em; color:var(--aura);
}
.cat-hero__h span{ display:block; }
.cat-hero__h--2{ color:var(--violet); }
.cat-hero__sub{ max-width:52ch; color:#a6aebb; font-size:clamp(14.5px,1.5vw,17px); margin:0; }
.cat-hero__hint{
  position:relative; z-index:2; max-width:1220px; margin:auto auto 0; width:100%;
  font-family:var(--grotesk); font-size:10.5px; letter-spacing:.16em; text-transform:uppercase;
  color:#5d6675; padding-top:52px;
}
[data-hint-touch]{ display:none; }
body:not(.is-fine) [data-hint-fine]{ display:none; }
body:not(.is-fine) [data-hint-touch]{ display:inline; }

/* ============================================================
   02 · THE BRIEF
   ============================================================ */
.cat-claim{
  margin:clamp(44px,6vw,76px) 0; padding:clamp(26px,3.4vw,44px);
  background:var(--v-50); border-left:2px solid var(--violet);
}
.cat-claim__lbl,.cat-claim__note{
  display:block; font-family:var(--grotesk); font-size:10.5px; letter-spacing:.16em;
  text-transform:uppercase; color:var(--slate);
}
.cat-claim__note{ text-transform:none; letter-spacing:0; font-family:var(--inter); font-size:14px; max-width:58ch; line-height:1.6; margin-top:18px; }
.cat-claim__line{
  font-family:var(--grotesk); font-weight:500; color:var(--void);
  font-size:clamp(21px,3.4vw,40px); line-height:1.18; letter-spacing:-.02em; margin:16px 0 0;
}
.cat-claim__line em{ font-style:normal; color:var(--violet); }

.cat-cond{ list-style:none; margin:0; padding:0; display:grid; grid-template-columns:repeat(3,1fr); gap:clamp(22px,3vw,44px); }
@media (max-width:880px){ .cat-cond{ grid-template-columns:1fr; } }
.cat-cond li{ border-top:1px solid var(--border); padding-top:20px; }
.cat-cond span{ font-family:var(--grotesk); font-size:11px; letter-spacing:.14em; color:var(--violet); }
.cat-cond h3{ font-family:var(--grotesk); font-weight:600; font-size:clamp(17px,1.9vw,21px); line-height:1.24; color:var(--void); margin:12px 0 10px; letter-spacing:-.012em; }
.cat-cond p{ margin:0; font-size:14.5px; color:var(--slate); }

/* ============================================================
   03 · THE NAME
   ============================================================ */
.cat-word{ margin:0; align-self:center; }
.cat-word__mark{
  font-family:var(--grotesk); font-weight:500; color:var(--void);
  font-size:clamp(46px,8.6vw,110px); line-height:1; letter-spacing:-.035em; margin:0 0 26px;
}
.cat-word__mark em{ font-style:normal; color:var(--violet); position:relative; }
.cat-word figcaption{ font-size:14px; color:var(--slate); max-width:44ch; border-top:1px solid var(--border); padding-top:18px; }
.cat-word figcaption em{ font-style:normal; color:var(--violet); font-weight:600; }

/* ============================================================
   04 · THE CYCLE MARK — sticky rack (never a pin)
   ============================================================ */
.cat-mark{ background:var(--void); color:var(--aura); position:relative; }
.cat-mark__sticky{
  position:sticky; top:0; min-height:100svh; display:grid;
  grid-template-columns:1fr 1fr; align-items:center; gap:clamp(24px,5vw,72px);
  padding:110px var(--pad) 72px; max-width:1220px; margin:0 auto;
}
.cat-mark__stage{ position:relative; display:grid; place-items:center; aspect-ratio:1; }
.cat-mark__art{ width:min(74%,420px); aspect-ratio:1; position:relative; z-index:2; }
.cat-mark__ring{
  position:absolute; width:min(88%,510px); aspect-ratio:1; border-radius:50%;
  border:1px solid rgba(124,58,237,.16); opacity:0; transition:opacity .7s var(--ease);
}
.cat-mark.is-live .cat-mark__ring{ opacity:1; }

/* C-forms dim until their beat; the nucleus holds violet throughout. NO rotation, ever. */
.cat-mark__art .cyc__c{ fill:var(--aura); opacity:.16; transition:opacity .55s var(--ease); }
.cat-mark__art .cyc__c.is-lit{ opacity:1; }
.cat-mark__art .cyc__n{ fill:var(--violet); opacity:.2; transition:opacity .6s var(--ease), filter .6s var(--ease); }
.cat-mark.is-b2 .cat-mark__art .cyc__n,
.cat-mark.is-b3 .cat-mark__art .cyc__n,
.cat-mark.is-b4 .cat-mark__art .cyc__n{ opacity:1; }
.cat-mark.is-b2 .cat-mark__art .cyc__n{ filter:drop-shadow(0 0 30px rgba(124,58,237,.6)); }
/* beat 3 — the gaps are the subject: C-forms recede, the drawn space between them reads */
.cat-mark.is-b3 .cat-mark__art .cyc__c{ opacity:.34; }
.cat-mark.is-b3 .cat-mark__stage{ background:radial-gradient(circle at 50% 50%, rgba(124,58,237,.12), transparent 62%); }
.cat-mark.is-b4 .cat-mark__art .cyc__c{ opacity:1; }

.cat-mark__beats{ position:relative; }
.cat-beat{
  position:absolute; inset:auto 0 auto 0; opacity:0; transform:translateY(16px);
  transition:opacity .5s var(--ease), transform .5s var(--ease); pointer-events:none;
}
.cat-beat.is-on{ opacity:1; transform:none; position:relative; pointer-events:auto; }
.cat-beat h3{
  font-family:var(--grotesk); font-weight:600; color:var(--aura); margin:0 0 14px;
  font-size:clamp(24px,3.6vw,42px); line-height:1.08; letter-spacing:-.022em;
}
.cat-beat p{ margin:0; color:#a6aebb; max-width:44ch; font-size:clamp(14.5px,1.5vw,16.5px); }

@media (max-width:880px){
  .cat-mark__sticky{ grid-template-columns:1fr; align-content:center; gap:26px; padding-top:96px; }
  .cat-mark__stage{ aspect-ratio:auto; height:min(42vh,320px); }
  .cat-mark__art{ width:min(60vw,260px); }
  .cat-mark__beats{ min-height:210px; }
}

/* ============================================================
   05 · WHAT BREAKS IT
   ============================================================ */
.cat-breaks{ margin-top:clamp(38px,5vw,64px); }
.cat-breaks__tabs{ display:flex; gap:8px; flex-wrap:wrap; margin-bottom:26px; }
.cat-breaks__tabs button{
  font-family:var(--grotesk); font-size:11.5px; letter-spacing:.13em; text-transform:uppercase;
  min-height:44px; padding:12px 20px; border:1px solid var(--border); background:transparent; color:var(--slate);
  cursor:pointer; transition:all .3s var(--ease); border-radius:2px;
}
.cat-breaks__tabs button[aria-selected="true"]{ background:var(--void); border-color:var(--void); color:var(--aura); }
.cat-breaks__panels ul{ list-style:none; margin:0; padding:0; display:none; grid-template-columns:1fr 1fr; gap:0 clamp(24px,4vw,56px); }
.cat-breaks__panels ul.is-on{ display:grid; }
@media (max-width:760px){ .cat-breaks__panels ul.is-on{ grid-template-columns:1fr; } }
.cat-breaks__panels li{
  border-top:1px solid var(--border); padding:16px 0 16px 32px; position:relative;
  font-size:15px; color:var(--void);
}
.cat-breaks__panels li::before{
  content:'✕'; position:absolute; left:0; top:16px; color:var(--violet); font-size:12px;
}

/* ============================================================
   06 · COLOUR
   ============================================================ */
.cat-swatches{ margin-top:clamp(38px,5vw,64px); display:grid; grid-template-columns:repeat(4,1fr); gap:clamp(14px,2vw,26px); }
@media (max-width:940px){ .cat-swatches{ grid-template-columns:repeat(2,1fr); } }
@media (max-width:520px){ .cat-swatches{ grid-template-columns:1fr; } }
.cat-swatches figure{ margin:0; }
.cat-swatches i{
  display:block; aspect-ratio:5/3; background:var(--sw);
  border:1px solid rgba(255,255,255,.1); transition:transform .5s var(--ease);
}
.cat-swatches figure:hover i{ transform:translateY(-5px); }
.cat-swatches figcaption{ padding-top:14px; }
.cat-swatches b{ font-family:var(--grotesk); font-weight:600; font-size:15px; color:var(--aura); display:block; }
.cat-swatches span{ font-family:var(--grotesk); font-size:11px; letter-spacing:.08em; color:var(--v-300); display:block; margin:3px 0 9px; }
.cat-swatches em{ font-style:normal; font-size:13.5px; line-height:1.55; color:#8f97a4; display:block; }

/* ============================================================
   07 · TYPE
   ============================================================ */
.cat-scale{ margin-top:clamp(38px,5vw,64px); }
.cat-scale > div{ border-top:1px solid var(--border); padding:clamp(20px,2.6vw,34px) 0; }
.cat-scale__lbl{
  display:block; font-family:var(--grotesk); font-size:10px; letter-spacing:.16em;
  text-transform:uppercase; color:var(--violet); margin-bottom:14px;
}
.cat-scale__d{ font-family:var(--grotesk); font-weight:700; font-size:clamp(30px,5.6vw,64px); line-height:1.03; letter-spacing:-.03em; color:var(--void); margin:0; }
.cat-scale__h1{ font-family:var(--grotesk); font-weight:600; font-size:clamp(22px,3.2vw,36px); line-height:1.12; letter-spacing:-.02em; color:var(--void); margin:0; }
.cat-scale__h2t{ font-family:var(--grotesk); font-weight:500; font-size:clamp(18px,2.3vw,26px); line-height:1.2; color:var(--void); margin:0; }
.cat-scale__b{ font-family:var(--inter); font-size:16px; line-height:1.68; color:var(--charcoal); margin:0; max-width:62ch; }

/* ============================================================
   08 · THE 50/50 LAW — the layout obeys the rule it states
   ============================================================ */
.cat-half{ display:grid; grid-template-columns:1fr 1fr; min-height:78svh; }
.cat-half__fill{ background:var(--void); color:#a6aebb; padding:clamp(56px,9vh,120px) clamp(24px,4.4vw,80px); display:flex; flex-direction:column; justify-content:center; }
.cat-half__fill p{ max-width:44ch; margin:0; font-size:clamp(14.5px,1.5vw,16.5px); }
.cat-half__void{ background:var(--aura); position:relative; }
.cat-half__void span{
  position:absolute; right:clamp(20px,3vw,44px); bottom:clamp(18px,3vw,36px);
  font-family:var(--grotesk); font-size:11px; letter-spacing:.2em; color:var(--slate); opacity:.34;
}
@media (max-width:880px){
  .cat-half{ grid-template-columns:1fr; }
  .cat-half__void{ min-height:38svh; }
}

/* ============================================================
   09 · THE FIRST POST — six-beat deck
   ============================================================ */
.cat-deck{
  margin-top:clamp(38px,5vw,64px); display:grid;
  grid-template-columns:minmax(0,1fr) minmax(0,1fr); gap:clamp(26px,4.6vw,72px); align-items:center;
}
@media (max-width:880px){ .cat-deck{ grid-template-columns:1fr; } }
.cat-deck__stage{ position:relative; aspect-ratio:4/5; background:var(--mist); overflow:hidden; }
.cat-deck__slides figure{ position:absolute; inset:0; margin:0; opacity:0; transition:opacity .55s var(--ease); }
.cat-deck__slides figure.is-on{ opacity:1; }
.cat-deck__slides img{ width:100%; height:100%; object-fit:cover; }
.cat-deck__beats{ list-style:none; margin:0 0 26px; padding:0; counter-reset:b; }
.cat-deck__beats li{
  counter-increment:b; border-top:1px solid var(--border); padding:14px 0 14px 46px;
  position:relative; cursor:pointer; opacity:.42; transition:opacity .35s var(--ease);
}
.cat-deck__beats li::before{
  content:'0' counter(b); position:absolute; left:0; top:15px;
  font-family:var(--grotesk); font-size:11px; letter-spacing:.1em; color:var(--violet);
}
.cat-deck__beats li.is-on{ opacity:1; }
.cat-deck__beats li.is-on::after{ content:''; position:absolute; left:0; top:-1px; width:34px; height:2px; background:var(--violet); }
.cat-deck__beats b{ font-family:var(--grotesk); font-weight:600; font-size:15.5px; color:var(--void); display:block; }
.cat-deck__beats span{ font-size:13.5px; color:var(--slate); }
.cat-deck__nav{ display:flex; align-items:center; gap:16px; }
.cat-deck__nav button{
  width:44px; height:44px; border:1px solid var(--border); background:transparent;
  color:var(--void); cursor:pointer; font-size:15px; transition:all .3s var(--ease); border-radius:2px;
}
.cat-deck__nav button:hover{ background:var(--void); border-color:var(--void); color:var(--aura); }
.cat-deck__nav span{ font-family:var(--grotesk); font-size:11px; letter-spacing:.14em; color:var(--slate); }

.cat-pull{
  margin:clamp(50px,7vw,96px) 0 0; max-width:22ch;
  font-family:var(--grotesk); font-weight:500; color:var(--void);
  font-size:clamp(22px,3.6vw,42px); line-height:1.16; letter-spacing:-.022em;
}
.cat-pull em{ font-style:normal; color:var(--violet); }

/* ============================================================
   10 · VOICE
   ============================================================ */
.cat-voice{ margin:0; }
.cat-voice > div{ border-top:1px solid rgba(255,255,255,.1); padding:20px 0; }
.cat-voice dt{ font-family:var(--grotesk); font-weight:600; font-size:clamp(17px,2vw,21px); color:var(--aura); letter-spacing:-.012em; }
.cat-voice dd{ margin:8px 0 0; font-size:14.5px; color:#8f97a4; max-width:46ch; }
.cat-banned{ align-self:center; border:1px solid rgba(255,255,255,.12); padding:clamp(24px,3.2vw,40px); }
.cat-banned__lbl,.cat-banned__note{ display:block; font-family:var(--grotesk); font-size:10.5px; letter-spacing:.16em; text-transform:uppercase; color:var(--v-300); }
.cat-banned p{
  font-family:var(--grotesk); font-weight:500; font-size:clamp(18px,2.6vw,30px); line-height:1.5;
  color:#586173; margin:20px 0; letter-spacing:-.015em;
}
.cat-banned s{ text-decoration-color:var(--violet); text-decoration-thickness:2px; }
.cat-banned__note{ text-transform:none; letter-spacing:0; font-family:var(--inter); font-size:13.5px; line-height:1.6; color:#8f97a4; max-width:42ch; }

/* ============================================================
   11 · IN THE WORLD
   ============================================================ */
.cat-apps .cat-wrap:first-child{ margin-bottom:clamp(36px,5vw,60px); }
/* the badge leads the section — but as an object on the page, never a full-bleed slab */
.cat-badge{
  margin:0 auto; max-width:1220px; padding:0 var(--pad);
  display:grid; grid-template-columns:minmax(0,44%) minmax(0,1fr);
  gap:clamp(24px,4vw,60px); align-items:end;
}
.cat-badge img{ width:100%; cursor:zoom-in; }
.cat-badge figcaption{ padding-bottom:8px; }
@media (max-width:760px){
  .cat-badge{ grid-template-columns:1fr; gap:0; }
  .cat-badge figcaption{ padding-bottom:0; }
}
.cat-badge figcaption,.cat-apps__pair figcaption{ padding-top:16px; font-size:14px; color:var(--slate); max-width:52ch; }
.cat-badge figcaption b,.cat-apps__pair figcaption b{ color:var(--void); font-family:var(--grotesk); font-weight:600; }
.cat-apps__pair{ margin-top:clamp(30px,4.4vw,58px); display:grid; grid-template-columns:1fr 1fr; gap:clamp(20px,3vw,44px); }
@media (max-width:760px){ .cat-apps__pair{ grid-template-columns:1fr; } }
.cat-apps__pair figure{ margin:0; }
.cat-apps__pair img{ width:100%; cursor:zoom-in; background:var(--mist); }

/* ============================================================
   12 · CLOSE
   ============================================================ */
.cat-close{ background:var(--void); color:var(--aura); padding:clamp(84px,13vh,168px) var(--pad); text-align:center; }
.cat-close__mark{ width:min(24vw,116px); aspect-ratio:1; margin:0 auto clamp(34px,5vw,58px); }
.cat-close__mark .cyc__c{ fill:var(--aura); }
.cat-close__line{
  font-family:var(--grotesk); font-weight:500; font-size:clamp(24px,4.4vw,52px);
  line-height:1.12; letter-spacing:-.026em; margin:0 0 clamp(44px,6vw,76px); color:var(--aura);
}
.cat-credit{
  display:grid; grid-template-columns:repeat(4,1fr); gap:22px; max-width:1000px; margin:0 auto;
  text-align:left; border-top:1px solid rgba(255,255,255,.1); padding-top:26px;
}
@media (max-width:760px){ .cat-credit{ grid-template-columns:1fr 1fr; } }
.cat-credit span{ display:block; font-family:var(--grotesk); font-size:10px; letter-spacing:.16em; text-transform:uppercase; color:var(--slate); margin-bottom:7px; }
.cat-credit b{ font-weight:500; font-size:14px; color:#c3c9d3; }
.cat-close__cta{ display:flex; gap:14px; justify-content:center; margin-top:clamp(44px,6vw,76px); flex-wrap:wrap; }
.cat-close__cta a{
  font-family:var(--grotesk); font-size:11.5px; letter-spacing:.14em; text-transform:uppercase;
  padding:15px 30px; text-decoration:none; border:1px solid rgba(255,255,255,.2); color:var(--aura);
  transition:all .3s var(--ease); border-radius:2px;
}
.cat-close__cta a:last-child{ background:var(--violet); border-color:var(--violet); }
.cat-close__cta a:hover{ background:var(--aura); border-color:var(--aura); color:var(--void); }

/* ---------- zoom lightbox ---------- */
.cat-zoom{
  position:fixed; inset:0; z-index:9600; background:rgba(17,24,39,.96); display:none;
  place-items:center; padding:clamp(16px,4vw,60px); opacity:0; transition:opacity .3s var(--ease);
}
.cat-zoom.is-on{ display:grid; opacity:1; }
.cat-zoom img{ max-width:100%; max-height:100%; object-fit:contain; }
.cat-zoom button{
  position:absolute; top:20px; right:20px; width:44px; height:44px; border-radius:50%;
  border:1px solid rgba(255,255,255,.24); background:transparent; color:var(--aura);
  font-size:15px; cursor:pointer; transition:all .3s var(--ease);
}
.cat-zoom button:hover{ background:var(--aura); color:var(--void); }