/* ===========================================================================
   Outcomes Matter hub.

   The opening is the reveal. The stamp holds the full viewport, slams its two
   lines, then dissolves as the problem cards cascade in one after another in
   the same space.

   Every card is in the DOM from the start regardless of animation state, so
   crawlers and reduced-motion users get the whole catalogue immediately.
   Brand is fixed: Cormorant Garamond, Inter, JetBrains Mono, #D4A017, #0a0a0a.
   =========================================================================== */

.hub {
  --gold:#D4A017; --white:#F5F0E8; --mid:#d4cfc8; --dim:#9c968e;
  --bg:#0a0a0a; --bg1:#101010; --bg2:#161616;
  --line:rgba(245,240,232,.09); --line2:rgba(245,240,232,.18);
  --ease:cubic-bezier(.19,1,.22,1);
  background:var(--bg); color:var(--white);
  font-family:'Inter',system-ui,sans-serif; line-height:1.65;
}
.hub ::selection { background:var(--gold); color:#0a0a0a; }
.hub a:focus-visible, .hub button:focus-visible { outline:2px solid var(--gold); outline-offset:3px; border-radius:6px; }

/* ── stage ──────────────────────────────────────────────────────────────── */
.stage { position:relative; min-height:100svh; background:var(--bg); overflow:hidden; }

/* ── the opening statement ──────────────────────────────────────────────── */
/* Fixed, not absolute: the stage is thousands of pixels tall once the cards
   are in it, so centring inside the stage would put the statement far below
   the fold. It must be centred in the VIEWPORT while it plays. */
.stamp {
  position:fixed; inset:0; z-index:5;
  display:flex; flex-direction:column; align-items:center; justify-content:center;
  gap:.4em; text-align:center; padding:0 6vw; background:var(--bg);
  transition:opacity .9s ease, transform .9s var(--ease);
}
.stamp.is-gone { opacity:0; transform:scale(1.06); pointer-events:none; visibility:hidden; }
.stamp.is-static { position:relative; min-height:56svh; height:auto; }
.stamp__l {
  font-family:'Cormorant Garamond',Georgia,serif; font-weight:600;
  font-size:clamp(2rem,6vw,4.2rem); line-height:1.14; color:var(--white);
  opacity:0; transform:scale(1.3);
}
.stamp__l--gold { color:var(--gold); }
.stamp__l.slam { animation:slam .55s cubic-bezier(.2,1.4,.4,1) forwards; }
@keyframes slam {
  0% { opacity:0; transform:scale(1.4); }
  60% { opacity:1; transform:scale(.96); }
  100% { opacity:1; transform:scale(1); }
}

.skip {
  position:absolute; bottom:2.2rem; left:50%; transform:translateX(-50%); z-index:6;
  display:inline-flex; align-items:center; gap:.6rem; min-height:44px;
  font-family:'JetBrains Mono',ui-monospace,monospace; font-size:.72rem;
  letter-spacing:.14em; text-transform:uppercase; color:var(--white);
  background:rgba(10,10,10,.5); border:1px solid var(--line2);
  padding:.6rem 1.2rem; border-radius:100px; cursor:pointer;
  opacity:0; transition:opacity .4s ease, border-color .25s ease;
}
.skip.is-visible { opacity:1; }
.skip.is-gone { opacity:0; pointer-events:none; }
.skip:hover { border-color:var(--gold); }

/* ── the reveal ─────────────────────────────────────────────────────────── */
.reveal {
  position:relative; z-index:1; opacity:0; pointer-events:none;
  padding:clamp(132px,17vh,196px) 6vw clamp(72px,9vw,120px);
  transition:opacity .8s ease;
}
.reveal.is-live { opacity:1; pointer-events:auto; }
.reveal__head { max-width:1180px; margin:0 auto clamp(36px,5vw,60px); }
.reveal__h1 {
  font-family:'Cormorant Garamond',Georgia,serif; font-weight:300;
  font-size:clamp(2.1rem,5.2vw,3.9rem); line-height:1.08; letter-spacing:-.01em;
  max-width:17ch; text-wrap:balance; margin-bottom:18px;
}
.reveal__h1 em { font-style:italic; color:var(--gold); }
.reveal__sub { color:var(--dim); max-width:52ch; margin-bottom:30px; }
.reveal__none { text-align:center; color:var(--dim); padding:40px 0; }

/* ── outcome filter ─────────────────────────────────────────────────────── */
.chips { display:flex; flex-wrap:wrap; gap:10px; }
.chip {
  min-height:44px; padding:.55rem 1.1rem; border-radius:100px;
  border:1px solid var(--line2); background:transparent; color:var(--mid);
  font-family:'JetBrains Mono',ui-monospace,monospace; font-size:.68rem;
  letter-spacing:.12em; text-transform:uppercase; cursor:pointer;
  transition:border-color .25s ease, color .25s ease, background .25s ease;
}
.chip:hover { border-color:var(--gold); color:var(--white); }
.chip.is-on { border-color:var(--gold); background:rgba(212,160,23,.12); color:var(--gold); }

/* ── the cards, cascading ───────────────────────────────────────────────── */
.cards {
  max-width:1180px; margin:0 auto;
  display:grid; grid-template-columns:repeat(3,1fr); gap:22px;
}
.pc {
  display:flex; flex-direction:column; background:var(--bg1);
  border:1px solid var(--line); border-radius:14px; overflow:hidden;
  opacity:0; transform:translateY(26px) scale(.985);
  transition:opacity .7s var(--ease), transform .7s var(--ease),
             border-color .35s ease, box-shadow .35s ease;
}
/* one after another: --i is each card's place in the queue */
.cards.is-in .pc { opacity:1; transform:none; transition-delay:calc(var(--i) * 130ms); }
.cards.is-in.no-stagger .pc { transition-delay:0ms !important; }
.pc:hover { border-color:rgba(212,160,23,.45); box-shadow:0 22px 50px rgba(0,0,0,.5); }
.pc:hover { transform:translateY(-5px); }

.pc__media { position:relative; aspect-ratio:16/10; overflow:hidden; background:#0a0a0a; }
.pc__media img { width:100%; height:100%; object-fit:cover; display:block; transition:transform .8s var(--ease); }
.pc:hover .pc__media img { transform:scale(1.06); }
.pc__media::after { content:''; position:absolute; inset:0;
  background:linear-gradient(180deg,rgba(10,10,10,0) 45%,rgba(16,16,16,.85) 100%); }

.pc__body { padding:26px 26px 22px; display:flex; flex-direction:column; flex:1; }
.pc__q { display:block; font-family:'Cormorant Garamond',Georgia,serif; font-weight:600;
  font-size:1.42rem; line-height:1.22; color:var(--white); margin-bottom:12px; text-wrap:balance; }
.pc:hover .pc__q { color:var(--gold); }
.pc__blurb { display:block; color:#c2bdb6; font-size:.95rem; line-height:1.62; margin-bottom:20px; }
.pc__list { list-style:none; margin:0 0 22px; padding:0; }
.pc__list li { position:relative; padding-left:18px; margin-bottom:7px; color:var(--mid); font-size:.875rem; line-height:1.45; }
.pc__list li::before { content:''; position:absolute; left:0; top:.55em; width:5px; height:5px;
  border-radius:50%; background:var(--gold); opacity:.85; }
/* The click into the solution is the card's whole job, so it reads as a real
   action rather than a small label in the corner. */
.pc__cta { margin-top:auto; display:flex; align-items:center; justify-content:space-between; gap:10px;
  font-family:'JetBrains Mono',ui-monospace,monospace; font-size:.74rem; font-weight:600;
  letter-spacing:.1em; text-transform:uppercase; color:var(--gold);
  padding-top:18px; margin-top:auto; border-top:1px solid var(--line2); }
.pc:hover .pc__cta { color:#f0bd3a; }
.pc__cta span { transition:transform .3s var(--ease); }
.pc:hover .pc__cta span { transform:translateX(5px); }

/* ── mantra ─────────────────────────────────────────────────────────────── */
.mantra { padding:clamp(80px,10vw,150px) 6vw; text-align:center; background:var(--bg1);
  border-top:1px solid var(--line); }
.mantra__wrap { max-width:760px; margin:0 auto; }
.mantra__t { font-family:'Cormorant Garamond',Georgia,serif; font-weight:300;
  font-size:clamp(1.8rem,4.4vw,3rem); line-height:1.18; margin-bottom:24px; }
.mantra__gold { color:var(--gold); font-style:italic; }
.mantra__s { color:var(--dim); max-width:48ch; margin:0 auto 34px; }
.mantra__cta { display:inline-flex; align-items:center; gap:10px; min-height:48px;
  padding:.95rem 1.8rem; border-radius:100px; background:var(--gold); color:#0a0a0a;
  font-weight:600; transition:transform .28s var(--ease), box-shadow .28s ease; }
.mantra__cta:hover { transform:translateY(-2px); box-shadow:0 14px 34px rgba(212,160,23,.3); }

/* ── responsive ─────────────────────────────────────────────────────────── */
@media (max-width:1100px){ .cards { grid-template-columns:repeat(2,1fr); } }
@media (max-width:680px){
  .cards { grid-template-columns:1fr; gap:18px; }
  .pc__body { padding:20px 20px 18px; }
  .pc__q { font-size:1.3rem; }
  .reveal { padding-top:118px; }
  /* a long stagger is tiring on a phone where one card fills the screen */
  .cards.is-in .pc { transition-delay:calc(min(var(--i),6) * 90ms); }
}

@media (prefers-reduced-motion:reduce){
  .stamp, .stamp__l, .pc, .pc__media img, .skip { transition:none !important; animation:none !important; }
  .stamp__l { opacity:1 !important; transform:none !important; }
  .pc { opacity:1 !important; transform:none !important; transition-delay:0ms !important; }
  .reveal { opacity:1 !important; pointer-events:auto !important; }
  .pc:hover { transform:none; }
}

/* The outcome layer, rendered as real links beneath the cards. The chips are
   a client-side filter, so these are the only crawlable path from the hub
   into the five outcome pages -- and the only one that works without JS. */
.outs { margin:74px auto 0; max-width:1180px; padding:0 24px; }
.outs__h {
  font-family:'JetBrains Mono',monospace; font-size:.74rem; letter-spacing:.16em;
  text-transform:uppercase; color:var(--gold); margin:0 0 20px;
}
.outs__list { list-style:none; margin:0; padding:0; display:grid; gap:12px;
  grid-template-columns:repeat(auto-fit,minmax(300px,1fr)); }
.outs__a {
  display:block; padding:20px 22px; text-decoration:none;
  border:1px solid rgba(255,255,255,.1); border-radius:12px;
  background:rgba(255,255,255,.02); transition:border-color .3s, background .3s, transform .3s;
}
.outs__a:hover { border-color:rgba(212,160,23,.45); background:rgba(212,160,23,.05); transform:translateY(-3px); }
.outs__q {
  display:block; font-family:'Cormorant Garamond',Georgia,serif; font-size:1.3rem;
  font-weight:600; color:var(--white); line-height:1.25; margin-bottom:6px;
}
.outs__a:hover .outs__q { color:var(--gold); }
.outs__b { display:block; color:#9e9891; font-size:.9rem; line-height:1.55; }
@media (max-width:640px){ .outs { margin-top:52px; } }
@media (prefers-reduced-motion:reduce){ .outs__a:hover { transform:none; } }