/* ============================================================
   DECK PAGES — branded.html, events.html, social.html, retainer.html
   The four service decks as on-site slide decks (6 Oct 2026, Joel:
   "be more intentional — it should feel like a deck, less wordy,
   visual examples everywhere"). Each <section class="slide"> is one
   screen; the page snaps slide to slide, a counter and arrows sit
   bottom-right, and ← → / PgUp PgDn / space move between slides.
   Built by ~/.claude/tools/site-decks/build.py — edit the spec there,
   not these pages. Sits on top of style.css: same tokens, one accent.
   ============================================================ */

html.deck{scroll-snap-type:y proximity;scroll-behavior:smooth}
.slide{min-height:100dvh;scroll-snap-align:start;display:flex;align-items:center;padding:calc(var(--nav-h,72px) + 28px) 0 72px;position:relative}
.slide > .wrap{width:100%}
.slide-tag{display:flex;justify-content:space-between;align-items:center;font-size:var(--t-ui);letter-spacing:.16em;text-transform:uppercase;color:var(--on-paper-mute);border-bottom:1px solid var(--hair);padding-bottom:14px;margin-bottom:clamp(24px,3vw,44px)}
.band-ink .slide-tag{color:var(--on-ink-mute);border-color:var(--hair-ink)}
.band-blue .slide-tag{color:var(--on-blue-mute);border-color:var(--hair-blue)}
.slide h2{font-family:var(--font-x);font-weight:800;font-size:var(--t-h1);line-height:.96;letter-spacing:-.025em}
.slide .sub{font-size:var(--t-lead);color:var(--on-paper-mute);margin-top:14px;max-width:46ch}
.band-ink .slide .sub{color:var(--on-ink-mute)}
.band-blue .slide .sub{color:var(--on-blue-mute)}

/* cover: full-bleed video, title over it */
.slide.cover{padding:0;align-items:flex-end;color:#fff;background:#000;overflow:hidden}
.slide.cover video,.slide.cover img.bg{position:absolute;inset:0;width:100%;height:100%;object-fit:cover;opacity:.62}
.slide.cover .wrap{position:relative;padding-bottom:clamp(56px,8vw,110px)}
.slide.cover .kicker{font-size:var(--t-ui);letter-spacing:.18em;text-transform:uppercase;opacity:.8}
.slide.cover h1{font-family:var(--font-x);font-weight:800;font-size:var(--t-display);line-height:.9;letter-spacing:-.03em;margin:16px 0 18px}
.slide.cover p{font-size:var(--t-lead);opacity:.85;max-width:40ch}
.slide.cover .scroll-hint{margin-top:28px;font-size:var(--t-ui);letter-spacing:.14em;text-transform:uppercase;opacity:.7}

/* statement + media */
.statement{display:grid;grid-template-columns:1fr 1.1fr;gap:clamp(28px,4vw,72px);align-items:center}
.statement .big{font-family:var(--font-x);font-weight:800;font-size:var(--t-h1);line-height:1;letter-spacing:-.025em}
.statement .big em{font-style:normal;color:var(--blue-lift)}
.band-paper .statement .big em{color:var(--blue)}

/* media frames */
.m{border-radius:var(--r-tile);overflow:hidden;background:var(--ink);position:relative}
.m video,.m img,.m iframe{width:100%;height:100%;object-fit:cover;display:block;border:0}
.m.r169{aspect-ratio:16/9}.m.r45{aspect-ratio:4/5}.m.r916{aspect-ratio:9/16}.m.r43{aspect-ratio:4/3}.m.r11{aspect-ratio:1/1}

/* visual cards: media on top, three words + one line under it */
.vcards{display:grid;grid-template-columns:repeat(var(--cols,3),1fr);gap:clamp(12px,1.4vw,20px);margin-top:clamp(24px,3vw,40px)}
.vcard .m{aspect-ratio:var(--ar,4/5)}
.vcard .num{display:block;margin-top:16px;font-size:var(--t-ui);font-weight:700;letter-spacing:.14em;color:var(--blue)}
.band-ink .vcard .num,.band-blue .vcard .num{color:var(--blue-lift)}
.vcard h3{font-family:var(--font-x);font-weight:700;font-size:var(--t-h3);line-height:1.15;margin-top:6px}
.vcard p{font-size:15px;line-height:1.5;color:var(--on-paper-mute);margin-top:6px;max-width:38ch}
.band-ink .vcard p{color:var(--on-ink-mute)}

/* image + points */
.split{display:grid;grid-template-columns:1fr 1fr;gap:clamp(28px,4vw,72px);align-items:center}
.points{list-style:none;display:grid;gap:clamp(16px,2vw,26px);margin-top:clamp(20px,2.4vw,32px)}
.points li{display:grid;grid-template-columns:44px 1fr;gap:14px;border-top:1px solid var(--hair);padding-top:16px}
.band-ink .points li{border-color:var(--hair-ink)}
.points .n{font-size:var(--t-ui);font-weight:700;letter-spacing:.14em;color:var(--blue);padding-top:4px}
.band-ink .points .n{color:var(--blue-lift)}
.points b{font-family:var(--font-x);font-size:19px;display:block}
.points span{font-size:15px;color:var(--on-paper-mute)}
.band-ink .points span{color:var(--on-ink-mute)}

/* funnel */
.funnel{display:grid;grid-template-columns:repeat(4,1fr);gap:clamp(10px,1.2vw,18px);align-items:end;margin-top:clamp(28px,3vw,48px)}
.funnel .bar{background:var(--blue);color:var(--on-blue);border-radius:var(--r-btn);padding:16px;height:var(--h);display:flex;align-items:flex-start;font-weight:700;font-size:15px}
.funnel .bar.b2{background:#2c3f97}.funnel .bar.b3{background:#8b98cf}.funnel .bar.b4{background:#4d5fb0}
.funnel p{font-size:14px;line-height:1.5;color:var(--on-paper-mute);margin-top:12px}

/* split bars + stats (retainer) */
.bars3{display:grid;grid-template-columns:repeat(3,1fr);gap:16px;align-items:end;height:260px;border-bottom:1px solid var(--hair)}
.bars3 div{background:var(--blue);border-radius:var(--r-btn) var(--r-btn) 0 0;height:var(--h);position:relative}
.bars3 span{position:absolute;top:-24px;left:0;font-size:var(--t-ui);font-weight:700}
.labels3{display:grid;grid-template-columns:repeat(3,1fr);gap:16px;margin-top:12px;font-size:14px;color:var(--on-paper-mute)}
.labels3 b{display:block;color:var(--blue)}
.stat{border:1px solid var(--hair);border-radius:var(--r-tile);padding:22px;margin-bottom:12px}
.stat b{font-family:var(--font-x);font-size:var(--t-h2);color:var(--blue);display:block;line-height:1}
.stat p{font-size:15px;color:var(--on-paper-mute);margin-top:8px}

/* films */
.films{display:grid;grid-template-columns:repeat(var(--cols,2),1fr);gap:clamp(12px,1.4vw,20px);margin-top:clamp(20px,2.4vw,32px)}
.film .cap{margin-top:10px;font-size:var(--t-ui);letter-spacing:.12em;text-transform:uppercase;color:var(--on-paper-mute)}
.film .cap b{display:block;font-family:var(--font-x);font-size:18px;letter-spacing:0;text-transform:none;color:var(--on-paper);margin-top:4px}
.band-ink .film .cap{color:var(--on-ink-mute)}.band-ink .film .cap b{color:var(--on-ink)}
.film .cap a{color:inherit}

/* stills mosaic */
.mosaic{display:grid;grid-template-columns:repeat(4,1fr);grid-auto-rows:clamp(120px,15vw,220px);gap:clamp(8px,1vw,14px);margin-top:clamp(20px,2.4vw,32px)}
.mosaic figure{border-radius:var(--r-tile);overflow:hidden;margin:0}
.mosaic img{width:100%;height:100%;object-fit:cover;display:block}
.mosaic .t2{grid-row:span 2}.mosaic .w2{grid-column:span 2}

/* packages */
.pkg-head{font-family:var(--font-x);font-weight:700;font-size:var(--t-h3);margin-top:clamp(18px,2vw,28px)}
.pkg{display:grid;grid-template-columns:repeat(3,1fr);gap:clamp(12px,1.4vw,20px);margin-top:12px}
.pkg div{border:1px solid var(--hair);border-radius:var(--r-tile);padding:18px 20px}
.pkg h3{font-family:var(--font-x);font-size:19px}
.pkg p{font-size:14px;color:var(--on-paper-mute);margin-top:6px}
.pkg i{display:block;font-size:13px;color:var(--on-paper-mute);margin-top:10px}
.pkg .badge{float:right;background:var(--blue);color:var(--on-blue);font-size:10px;font-weight:700;letter-spacing:.1em;padding:3px 9px;border-radius:var(--r-pill)}

/* FAQ */
.faq{display:grid;grid-template-columns:1fr 1fr;gap:clamp(18px,2.6vw,40px) clamp(28px,4vw,64px);margin-top:clamp(24px,3vw,40px)}
.faq h3{font-family:var(--font-x);font-weight:700;font-size:19px}
.faq p{font-size:15px;line-height:1.55;color:var(--on-paper-mute);margin-top:6px}

/* contact slide */
.deck-cta{display:grid;grid-template-columns:1.2fr .8fr;gap:clamp(28px,4vw,64px);align-items:center}
.deck-cta ul{list-style:none;margin-top:24px;display:grid;gap:10px;font-size:17px}
.deck-cta a{color:inherit;text-decoration:underline;text-underline-offset:4px}
.deck-cta .back{display:inline-block;margin-top:28px;font-size:var(--t-ui);letter-spacing:.12em;text-transform:uppercase;text-decoration:none;opacity:.75}

/* deck chrome: counter + arrows */
.deck-ctrl{position:fixed;right:clamp(14px,2vw,28px);bottom:clamp(14px,2vw,28px);z-index:60;display:flex;align-items:center;gap:8px;background:rgba(10,10,10,.82);color:#f4f4f2;border-radius:var(--r-pill);padding:6px 6px 6px 16px;font-size:12px;letter-spacing:.12em;backdrop-filter:blur(8px);-webkit-backdrop-filter:blur(8px)}
.deck-ctrl .lbl{text-transform:uppercase;opacity:.7;max-width:22ch;white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
.deck-ctrl .cnt{font-weight:700;font-variant-numeric:tabular-nums}
.deck-ctrl button{width:34px;height:34px;border-radius:50%;border:0;background:rgba(244,244,242,.14);color:inherit;cursor:pointer;font-size:15px}
.deck-ctrl button:hover{background:var(--blue)}

@media (max-width:900px){
  html.deck{scroll-snap-type:none}
  .slide{min-height:auto;padding:calc(var(--nav-h,64px) + 24px) 0 56px}
  .slide.cover{min-height:88svh}
  .statement,.split,.deck-cta,.faq{grid-template-columns:1fr}
  .vcards{grid-template-columns:1fr 1fr}
  .films{grid-template-columns:1fr}
  .funnel{grid-template-columns:repeat(2,1fr)}
  .pkg{grid-template-columns:1fr}
  .mosaic{grid-template-columns:repeat(2,1fr)}
  .deck-ctrl .lbl{display:none}
}
@media (prefers-reduced-motion:reduce){html.deck{scroll-behavior:auto}}

/* vertical media never taller than the screen — a slide must fit one view */
.statement .m.r916{height:min(74vh,760px);width:auto;margin-inline:auto}
.films .m.r916{height:min(60vh,640px);width:auto;margin-inline:auto}
.films .film:has(.r916) .cap{text-align:center}
.vcards[style*="9/16"] .m{max-height:52vh;width:auto;margin-inline:auto}
@media (max-width:900px){.statement .m.r916,.films .m.r916{height:auto;width:100%;max-width:360px}}