/* ==========================================================
   COVER — case studies app for CAPE Creative
   Design language inherits from WRAP: dark, heavy display
   type, hairline borders, generous space. Cream accents
   from current case-study screenshots.
========================================================== */

*, *::before, *::after { margin: 0; padding: 0; box-sizing: border-box; }

/* Cape display face — Chalet New York 1970 (Brand Standards, Sep 2026), self-hosted.
   Display moments only: page titles, hero statements, reel headlines.
   Inter stays for body, labels and controls. Single 400 weight — no 900. */
@font-face {
  font-family: "Chalet New York 1970";
  font-style: normal;
  font-weight: 400 900;
  font-display: swap;
  src: url("/fonts/chalet-newyork-1970.woff") format("woff");
}

:root {
  --bg: #0a0a0a;
  --bg-soft: #111111;
  --bg-card: #141414;
  --bg-elev: #1a1a1a;

  --cream: #f5ecd9;
  --cream-soft: rgba(245, 236, 217, 0.78);
  --cream-dim: rgba(245, 236, 217, 0.45);

  --text: #ffffff;
  --text-muted: rgba(255,255,255,0.55);
  --text-dim: rgba(255,255,255,0.25);

  --accent: #ff4d00;
  --accent-glow: rgba(255, 77, 0, 0.14);

  --border: rgba(255,255,255,0.08);
  --border-strong: rgba(255,255,255,0.18);

  --radius: 12px;
  --radius-lg: 16px;
  --radius-pill: 999px;

  --font: 'Inter', -apple-system, BlinkMacSystemFont, 'Helvetica Neue', sans-serif;
  --display: "Chalet New York 1970", 'Helvetica Neue', Helvetica, Arial, sans-serif;
}

html { font-size: 16px; }

body {
  font-family: var(--font);
  background: var(--bg);
  color: var(--cream);
  min-height: 100vh;
  -webkit-font-smoothing: antialiased;
  text-rendering: optimizeLegibility;
}

a { color: inherit; text-decoration: none; }

/* ==========================================================
   HEADER (shared)
========================================================== */
.cv-header {
  position: sticky;
  top: 0;
  z-index: 100;
  display: flex;
  align-items: center;
  justify-content: space-between;
  padding: 1.1rem 2.5rem;
  border-bottom: 1px solid var(--border);
  background: rgba(10,10,10,0.85);
  backdrop-filter: blur(20px);
  -webkit-backdrop-filter: blur(20px);
}

.cv-header-left { display: flex; align-items: center; gap: 1.25rem; }

.cv-logo {
  display: inline-flex;
  align-items: center;
  /* Text styles kept as a fallback if the image fails to load */
  font-weight: 900;
  font-size: 1.05rem;
  letter-spacing: 0.18em;
  color: var(--cream);
}
.cv-logo img {
  height: 28px;
  width: auto;
  display: block;
}
/* Official COVER lockup (CAPE-Cover-Logo-v1.png from Coat, 1795×426)
   applied as an alpha mask so the single-colour art tints to cream. */
.cv-logo-mark {
  height: 28px;
  aspect-ratio: 1795 / 426;
  display: block;
  background: var(--cream);
  -webkit-mask: url(/cape-cover-logo.png) center/contain no-repeat;
  mask: url(/cape-cover-logo.png) center/contain no-repeat;
}

.cv-nav {
  display: flex; gap: 0.3rem;
  padding-left: 1rem;
  border-left: 1px solid var(--border);
}
.cv-nav-link {
  padding: 0.4rem 0.85rem;
  border-radius: 8px;
  font-size: 0.78rem;
  font-weight: 600;
  color: var(--text-muted);
  letter-spacing: 0.01em;
  transition: background 0.15s, color 0.15s;
}
.cv-nav-link:hover { background: rgba(255,255,255,0.04); color: var(--cream); }
.cv-nav-link.active { background: rgba(245,236,217,0.10); color: var(--cream); }

.cv-header-right { display: flex; gap: 0.6rem; align-items: center; }

/* Profile bar: identity only — the logo, what this place is, and who you are.
   Navigation and actions moved down to their own bars. */
.cv-tagline {
  /* Same type as .cv-page-title — weight, tracking, sentence case, the italic
     on the last word — just sized to sit on the bar. */
  font-size: 1.7rem;
  font-weight: 900;
  letter-spacing: -0.035em;
  line-height: 1;
  color: var(--cream-soft);
  margin: 0;
  padding-left: 1.25rem;
  border-left: 1px solid var(--border);
  white-space: nowrap;
}
/* One step quieter than the line it sits in, the same relationship the H1 has. */
.cv-tagline em { font-style: italic; font-weight: 900; color: var(--cream-dim); }
/* At this size it needs the room — below a wide viewport the bar keeps the
   logo and the account controls and drops the line rather than breaking. */
@media (max-width: 1200px) { .cv-tagline { display: none; } }

/* Library page title — the hero's typographic weight at a scale that sits
   above a one-line description rather than filling the screen. */
.cv-page-title {
  margin: 1.75rem 0 0;
  font-size: clamp(3.5rem, 6.4vw, 5rem);
  font-family: var(--display);
  /* Chalet ships one upright 400. Without this the browser fakes any italic or
     bold asked of it, which is a slanted smear, not the typeface. */
  font-synthesis: none;
  font-weight: 400;
  letter-spacing: -0.02em;
  line-height: 0.97;
  color: var(--cream);
}
.cv-page-title em { font-style: normal; font-weight: 400; color: var(--cream-soft); }
.cv-page-title + .cv-standfirst { margin-top: 0.9rem; }

/* The old hero paragraph, demoted to a single discreet line above the bars. */
.cv-standfirst {
  margin: 1.75rem 0 1.25rem;
  font-size: 0.85rem;
  color: var(--text-dim);
  max-width: 46rem;
  line-height: 1.5;
}

/* Library on the left (where things come from), actions on the right (what you
   do with them). One row, one hairline, so the grid starts high. */
/* About has no .cv-content wrapper, so the bars carry its top spacing —
   matched to .cv-content's 2rem so the page starts level with the others. */
.cv-barswrap { padding: 2rem 2.5rem 0; }
.cv-bars {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 1.5rem;
  flex-wrap: wrap;
  padding-bottom: 0.85rem;
  border-bottom: 1px solid var(--border);
  margin-bottom: 1.1rem;
}
.cv-libbar { display: flex; gap: 0.2rem; flex-wrap: wrap; }
.cv-actionbar { display: flex; gap: 0.45rem; align-items: center; flex-wrap: wrap; }
.cv-btn-quiet {
  background: transparent;
  border: 1px solid transparent;
  color: var(--text-muted);
}
.cv-btn-quiet:hover { background: rgba(255,255,255,0.04); color: var(--cream); }

.cv-btn {
  display: inline-flex;
  align-items: center;
  gap: 0.45rem;
  padding: 0.55rem 1rem;
  border-radius: 8px;
  font-family: var(--font);
  font-size: 0.78rem;
  font-weight: 600;
  cursor: pointer;
  transition: all 0.18s ease;
  background: transparent;
  border: 1px solid var(--border);
  color: var(--text-muted);
}
.cv-btn:hover { border-color: var(--border-strong); color: var(--text); background: rgba(255,255,255,0.03); }
.cv-btn-primary { background: var(--cream); color: #000; border-color: var(--cream); }
.cv-btn-primary:hover { background: #fff; color: #000; border-color: #fff; }
.cv-btn-accent { background: var(--accent); color: #000; border-color: var(--accent); }
.cv-btn-accent:hover { background: #ff6622; }
/* Outline version of the accent button — same shape as .cv-btn, no fill.
   Used for Edit on a case study, so the way in to fixing a draft carries the
   same colour as the Draft tag that sent you there. */
.cv-btn-accent-ghost {
  background: transparent;
  color: var(--accent);
  border-color: rgba(255,77,0,0.45);
}
.cv-btn-accent-ghost:hover {
  color: var(--accent);
  border-color: var(--accent);
  background: rgba(255,77,0,0.08);
}

/* ==========================================================
   DASHBOARD — toolbar
========================================================== */
.cv-content { padding: 2rem 2.5rem 4rem; }

.cv-hero {
  padding: 2.5rem 0 1.5rem;
  max-width: 64rem;
}

.cv-hero h1 {
  font-size: clamp(2.2rem, 5vw, 3.6rem);
  font-family: var(--display);
  /* Chalet ships one upright 400. Without this the browser fakes any italic or
     bold asked of it, which is a slanted smear, not the typeface. */
  font-synthesis: none;
  font-weight: 400;
  letter-spacing: -0.02em;
  line-height: 1.02;
  color: var(--cream);
}
.cv-hero h1 em {
  font-style: normal;
  font-weight: 400;
  color: var(--cream-soft);
}
.cv-hero p {
  margin-top: 0.9rem;
  font-size: 1rem;
  color: var(--text-muted);
  max-width: 38rem;
  line-height: 1.55;
}

/* Hero row — page actions sit at the far right, bottom-aligned with the
   hero's body copy (the hero keeps its 1.5rem bottom padding, so the button
   matches it to land on the text's baseline edge). */
.cv-hero-row {
  display: flex;
  align-items: flex-end;
  justify-content: space-between;
  gap: 2rem;
}
.cv-hero-row .cv-hero { flex: 1; }
.cv-hero-row > .cv-btn { margin-bottom: 1.5rem; }

.cv-toolbar {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 1rem;
  margin: 1.5rem 0 1.25rem;
  flex-wrap: wrap;
}

.cv-filters { display: flex; gap: 0.3rem; flex-wrap: wrap; }
.cv-filter {
  padding: 0.4rem 0.95rem;
  border-radius: var(--radius-pill);
  background: transparent;
  border: 1px solid transparent;
  color: var(--text-muted);
  font-family: var(--font);
  font-size: 0.76rem;
  font-weight: 600;
  cursor: pointer;
  transition: all 0.15s;
  letter-spacing: 0.02em;
}
.cv-filter:hover { background: rgba(255,255,255,0.04); color: var(--cream); }
.cv-filter.active {
  background: rgba(245,236,217,0.10);
  border-color: rgba(245,236,217,0.22);
  color: var(--cream);
}
.cv-filter-count {
  display: inline-block;
  margin-left: 0.3rem;
  padding: 0.05em 0.45em;
  font-size: 0.65rem;
  font-weight: 700;
  background: rgba(255,255,255,0.06);
  color: var(--cream-soft);
  border-radius: 999px;
}
.cv-filter.active .cv-filter-count { background: rgba(245,236,217,0.18); color: var(--cream); }

.cv-search-wrap {
  position: relative;
  display: flex;
  align-items: center;
}
.cv-search-wrap svg {
  position: absolute;
  left: 0.85rem;
  color: var(--text-dim);
  pointer-events: none;
}
.cv-search {
  background: var(--bg-card);
  border: 1px solid var(--border);
  border-radius: var(--radius-pill);
  padding: 0.55rem 1rem 0.55rem 2.1rem;
  width: 280px;
  color: var(--cream);
  font-family: var(--font);
  font-size: 0.82rem;
  outline: none;
  transition: border-color 0.15s, background 0.15s;
}
.cv-search:focus { border-color: var(--border-strong); background: var(--bg-elev); }
.cv-search::placeholder { color: var(--text-dim); }

/* Header nav: one place (Decks) and one set (the libraries), so the bar says
   what kind of thing each item is instead of listing six peers. */
.cv-nav-div {
  width: 1px; height: 14px;
  background: var(--border-strong);
  margin: 0 0.5rem;
  flex: none;
}
.cv-nav-eyebrow {
  font-size: 0.58rem;
  font-weight: 700;
  letter-spacing: 0.16em;
  text-transform: uppercase;
  color: var(--text-dim);
  margin-right: 0.15rem;
  white-space: nowrap;
}
/* Utilities on the right — real links, but never louder than New deck. */
.cv-nav-util {
  font-size: 0.78rem;
  font-weight: 500;
  color: var(--text-muted);
  text-decoration: none;
  padding: 0.4rem 0.5rem;
  border-radius: var(--radius-pill);
  white-space: nowrap;
  transition: color 0.15s;
}
.cv-nav-util:hover { color: var(--cream); }
.cv-nav-util.active { color: var(--cream); }

/* Dashboard nav bar. Scoped to --nav so the logos and talent toolbars are
   untouched: search anchors the row, five industries sit beside it, the tail
   is behind More. */
/* The toolbar runs on the same grid as the cards below it, so the search field
   is exactly the width of the first two cards and the filters begin on the
   third card's left edge. Each page passes its own column size and gap through
   data-cols — auto-fill then resolves to the same column count as the grid. */
.cv-toolbar--nav {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(var(--cv-col), 1fr));
  gap: var(--cv-gap);
  align-items: center;
  justify-content: initial;
  flex-wrap: nowrap;
}
.cv-toolbar--nav[data-cols="cs"]     { --cv-col: 340px; --cv-gap: 1.5rem; }
.cv-toolbar--nav[data-cols="logos"]  { --cv-col: 180px; --cv-gap: 1rem; }
.cv-toolbar--nav[data-cols="talent"] { --cv-col: 176px; --cv-gap: 1rem; }
.cv-toolbar--nav .cv-search-wrap { grid-column: 1 / span 2; }
.cv-toolbar--nav .cv-search { width: 100%; padding-right: 2.3rem; }
.cv-toolbar--nav .cv-filters { grid-column: 3 / -1; min-width: 0; row-gap: 0.4rem; }
/* Case studies has wide cards, so one card is enough for the search and the
   chips start on the second. The smaller Logos and Talent cards keep two. */
.cv-toolbar--nav[data-cols="cs"] .cv-search-wrap { grid-column: 1 / span 1; }
.cv-toolbar--nav[data-cols="cs"] .cv-filters { grid-column: 2 / -1; }

/* Too narrow for two cards plus a third — the grid alignment stops meaning
   anything, so fall back to a plain row. */
@media (max-width: 860px) {
  .cv-toolbar--nav { display: flex; flex-wrap: wrap; gap: 0.85rem; }
  .cv-toolbar--nav .cv-search-wrap, .cv-toolbar--nav .cv-filters { grid-column: auto; }
  .cv-toolbar--nav .cv-search { width: 100%; }
}

.cv-search-clear {
  position: absolute; right: 0.55rem;
  display: flex; align-items: center; justify-content: center;
  width: 20px; height: 20px; padding: 0;
  background: rgba(255,255,255,0.08); border: none; border-radius: 999px;
  color: var(--cream-dim); cursor: pointer; transition: all 0.15s;
}
.cv-search-clear:hover { background: rgba(255,255,255,0.16); color: var(--cream); }
.cv-search-clear[hidden] { display: none; }

.cv-filter-more-wrap { position: relative; display: inline-flex; }
.cv-filter-more { display: inline-flex; align-items: center; gap: 0.35rem; }
.cv-filter-more svg { opacity: 0.55; transition: transform 0.15s; }
.cv-filter-more.is-open svg { transform: rotate(180deg); }
.cv-filter-more.is-open { background: rgba(255,255,255,0.04); color: var(--cream); }

.cv-filter-menu {
  position: absolute; left: 0; top: calc(100% + 0.5rem);
  width: 252px; max-height: 340px; overflow-y: auto;
  background: var(--bg-elev);
  border: 1px solid var(--border-strong);
  border-radius: 12px; padding: 0.35rem;
  box-shadow: 0 18px 50px rgba(0,0,0,0.65);
  display: flex; flex-direction: column; gap: 2px;
  z-index: 96;
}
.cv-filter-menu[hidden] { display: none; }
.cv-filter-menu button {
  display: flex; align-items: center; justify-content: space-between; gap: 0.75rem;
  width: 100%; text-align: left; background: transparent; border: none;
  padding: 0.5rem 0.7rem; border-radius: 8px;
  font-family: var(--font); color: var(--cream-soft); cursor: pointer;
}
.cv-filter-menu button strong { font-size: 0.78rem; font-weight: 600; letter-spacing: 0.01em; }
.cv-filter-menu button span { font-size: 0.68rem; font-weight: 700; color: var(--text-dim); }
.cv-filter-menu button:hover { background: rgba(245,236,217,0.10); color: var(--cream); }
.cv-filter-menu button.is-active { background: rgba(245,236,217,0.10); color: var(--cream); }

/* Industry picker (case study editor). Same surface language as the tray
   menus: elevated, quiet border, counts dimmed to the right. */
#industryEditor { position: relative; }
.cv-industry-label { cursor: default; }
body.cv-edit-mode .cv-industry-label { cursor: pointer; border-bottom: 1px dashed rgba(245,236,217,0.28); }
body.cv-edit-mode .cv-industry-label:hover { color: var(--cream); border-bottom-color: var(--cream); }

.cv-industry-picker {
  position: absolute; left: 0; top: calc(100% + 0.5rem);
  width: 268px; z-index: 96;
  background: var(--bg-elev);
  border: 1px solid var(--border-strong);
  border-radius: 12px; padding: 0.35rem;
  box-shadow: 0 18px 50px rgba(0,0,0,0.65);
  display: flex; flex-direction: column; gap: 2px;
}
.cv-industry-search {
  width: 100%; margin-bottom: 0.15rem;
  background: rgba(255,255,255,0.05);
  border: 1px solid var(--border);
  border-radius: 8px; padding: 0.5rem 0.65rem;
  color: var(--cream); font-family: var(--font); font-size: 0.78rem; outline: none;
}
.cv-industry-search:focus { border-color: var(--border-strong); }
.cv-industry-search::placeholder { color: var(--text-dim); }
.cv-industry-list { max-height: 264px; overflow-y: auto; display: flex; flex-direction: column; gap: 2px; }
.cv-industry-picker button {
  display: flex; align-items: center; justify-content: space-between; gap: 0.75rem;
  width: 100%; text-align: left; background: transparent; border: none;
  padding: 0.5rem 0.7rem; border-radius: 8px;
  font-family: var(--font); color: var(--cream-soft); cursor: pointer;
}
.cv-industry-picker button strong { font-size: 0.78rem; font-weight: 600; letter-spacing: 0.01em; }
.cv-industry-picker button span { font-size: 0.68rem; font-weight: 700; color: var(--text-dim); }
.cv-industry-picker button:hover { background: rgba(245,236,217,0.10); color: var(--cream); }
.cv-industry-none { padding: 0.6rem 0.7rem; font-size: 0.75rem; color: var(--text-dim); margin: 0; }
.cv-industry-create { border-top: 1px solid var(--border); margin-top: 0.25rem; padding-top: 0.25rem; }
.cv-industry-create[hidden] { display: none; }

.cv-selection-bar {
  /* Sticks just below the header while scrolling, same as the card action
     bar — the two stack (see the sibling rule by .cv-card-action-bar). */
  position: sticky;
  top: 68px;
  z-index: 91;
  display: none;
  align-items: center;
  justify-content: space-between;
  gap: 1rem;
  padding: 0.75rem 1.25rem;
  margin-bottom: 1rem;
  background: var(--cream);
  color: #000;
  border-radius: var(--radius);
  font-weight: 600;
  font-size: 0.85rem;
  box-shadow: 0 10px 30px rgba(0,0,0,0.55);
}
.cv-selection-bar.active { display: flex; }
.cv-selection-bar .cv-sel-actions { display: flex; gap: 0.5rem; }
.cv-selection-bar button {
  background: #000;
  color: var(--cream);
  border: none;
  padding: 0.5rem 1rem;
  border-radius: 8px;
  font-weight: 600;
  font-size: 0.78rem;
  cursor: pointer;
  font-family: var(--font);
}
.cv-selection-bar button.secondary {
  background: transparent;
  color: #000;
  border: 1px solid rgba(0,0,0,0.2);
}

/* High-visibility "Save as section" — orange so it pops on the cream bar */
.cv-selection-bar button.cv-sel-save {
  background: var(--accent);
  color: #000;
  border: 1px solid var(--accent);
  font-weight: 700;
  box-shadow: 0 4px 12px rgba(255, 77, 0, 0.35);
}
.cv-selection-bar button.cv-sel-save:hover {
  background: #ff6622;
  border-color: #ff6622;
}

/* ==========================================================
   CARD GRID
========================================================== */
.cv-grid {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(340px, 1fr));
  gap: 1.5rem;
}

.cs-card {
  position: relative;
  display: flex;
  flex-direction: column;
  background: var(--bg-card);
  border: 1px solid var(--border);
  border-radius: var(--radius-lg);
  /* No overflow:hidden so the action menu popover can escape the card. */
  transition: transform 0.25s, border-color 0.25s, box-shadow 0.25s;
}
.cs-card:hover {
  transform: translateY(-3px);
  border-color: rgba(245,236,217,0.22);
  box-shadow: 0 14px 40px rgba(0,0,0,0.45);
}
.cs-card.is-selected {
  border-color: var(--cream);
  box-shadow: 0 0 0 2px rgba(245,236,217,0.4) inset, 0 14px 40px rgba(0,0,0,0.45);
}
/* Draft is a status, so it says so in words. It once dimmed the whole card to
   55%, which read as broken lighting next to the finished ones. */
.cs-card-draft { color: var(--accent); font-weight: 800; }

.cs-card-add {
  border-style: dashed;
  border-color: rgba(245,236,217,0.20);
  background: transparent;
  cursor: pointer;
}
.cs-card-add:hover {
  border-color: var(--cream);
  background: rgba(245,236,217,0.04);
  transform: translateY(-3px);
}
.cs-card-add .cs-card-link {
  display: flex;
  flex-direction: column;
  color: var(--cream-soft);
}

/* The add card, both faces. Same footprint either way so the grid never jumps
   when it opens. */
.cs-card-add { min-height: 300px; display: flex; }
.cs-card-add.is-open { border-style: solid; border-color: rgba(245,236,217,0.28); background: var(--bg-card); }
.cs-card-add.is-open:hover { transform: none; }

.cs-add-invite {
  flex: 1;
  display: flex; flex-direction: column; align-items: center; justify-content: center;
  gap: 0.4rem; padding: 2rem; text-align: center;
  background: transparent; border: none; cursor: pointer;
  font-family: var(--font); color: var(--cream-soft);
}
.cs-add-invite svg { color: var(--text-dim); transition: color 0.15s; }
.cs-card-add:hover .cs-add-invite svg { color: var(--cream); }
.cs-add-invite strong { margin-top: 0.45rem; font-size: 0.95rem; font-weight: 700; color: var(--cream); }
.cs-add-invite span { font-size: 0.78rem; color: var(--text-muted); max-width: 18rem; line-height: 1.45; }
.cs-add-invite[hidden] { display: none; }

.cs-add-form {
  flex: 1;
  display: flex; flex-direction: column; justify-content: center;
  gap: 0.85rem; padding: 1.5rem;
}
.cs-add-form[hidden] { display: none; }
.cs-add-field { display: flex; flex-direction: column; gap: 0.35rem; }
.cs-add-field > span {
  font-size: 0.62rem; font-weight: 700; letter-spacing: 0.16em;
  text-transform: uppercase; color: var(--text-dim);
}
.cs-add-field input {
  height: 38px; padding: 0 0.7rem;
  background: var(--bg); border: 1px solid var(--border); border-radius: 8px;
  color: var(--cream); font-family: var(--font); font-size: 0.85rem; font-weight: 600;
  outline: none; transition: border-color 0.15s;
}
.cs-add-field input:focus { border-color: var(--border-strong); }
.cs-add-field input::placeholder { color: var(--text-dim); font-weight: 500; }
.cs-add-actions { display: flex; gap: 0.5rem; margin-top: 0.15rem; }
.cs-add-error { margin: 0; font-size: 0.75rem; color: #ff9b9b; }
.cs-add-error[hidden] { display: none; }
.cs-card-add:hover .cs-card-link svg { color: var(--cream); }
.cs-card-add .cs-card-link svg { color: var(--text-dim); transition: color 0.15s; }

.cs-card-link {
  display: flex;
  flex-direction: column;
  flex: 1;
  cursor: pointer;
  color: inherit;
  border-radius: var(--radius-lg);
  overflow: hidden;
}

/* Card-level action menu (Edit / Duplicate / Delete) */
.cs-card-actions {
  position: absolute;
  top: 0.6rem;
  right: 0.6rem;
  z-index: 4;
}
.cs-card-action-btn {
  width: 30px; height: 30px;
  border-radius: 8px;
  background: rgba(0,0,0,0.6);
  backdrop-filter: blur(8px);
  border: 1px solid rgba(255,255,255,0.12);
  color: var(--cream-soft);
  display: flex; align-items: center; justify-content: center;
  cursor: pointer;
  opacity: 0;
  transition: opacity 0.15s, background 0.15s, color 0.15s;
}
.cs-card:hover .cs-card-action-btn { opacity: 1; }
.cs-card-action-btn:hover { background: rgba(0,0,0,0.85); color: var(--cream); }
.cs-card-actions-pop {
  display: none;
  position: absolute;
  right: 0; top: calc(100% + 0.4rem);
  background: var(--bg-elev);
  border: 1px solid var(--border);
  border-radius: 10px;
  padding: 0.3rem;
  min-width: 160px;
  z-index: 60;
  box-shadow: 0 12px 30px rgba(0,0,0,0.55);
}
.cs-card-actions-pop.open { display: block; }
.cs-card-actions-pop button {
  display: block; width: 100%;
  background: transparent; border: none;
  padding: 0.55rem 0.75rem;
  border-radius: 7px;
  text-align: left;
  font-family: var(--font);
  font-size: 0.84rem; font-weight: 600;
  color: var(--cream);
  cursor: pointer;
}
.cs-card-actions-pop button:hover { background: rgba(245,236,217,0.10); color: var(--cream); }
.cs-card-actions-pop button.danger { color: #ff9b9b; }
.cs-card-actions-pop button.danger:hover { background: rgba(255, 68, 68, 0.18); color: #ff7373; }

/* Stop the hover-transform feedback loop when the popover is open. */
.cs-card:has(.cs-card-actions-pop.open):hover { transform: none; }

.cs-card-preview {
  aspect-ratio: 16/9;
  background: #000;
  position: relative;
  display: flex;
  align-items: center;
  justify-content: center;
  overflow: hidden;
}
/* Hero media as preview background (works for both video and image).
   No dim here — the photo speaks for itself; we hide the headline overlay
   on media-bearing cards via the rule below. */
.cs-card-preview-media {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  object-fit: cover;
  z-index: 0;
}
/* On media cards, suppress the floating headline + suffix entirely.
   Empty cards keep the headline as their visible identity. */
.cs-card-preview[data-has-media="true"] .cs-card-preview-headline {
  display: none;
}
.cs-card-preview-headline {
  position: relative;
  z-index: 2;
  /* Fixed sizing so every card's headline reads identically regardless of
     phrase length — no auto-shrink based on container width. */
  font-size: 1.55rem;
  font-weight: 900;
  letter-spacing: -0.01em;
  line-height: 1.1;
  text-align: center;
  padding: 1.25rem;
  color: var(--cream);
  display: flex;
  flex-direction: column;
  gap: 0.55rem;
  align-items: center;
  /* Cap height so very long headlines don't push the card taller than peers */
  max-height: 100%;
  overflow: hidden;
}
.cs-card-preview-headline mark {
  background: rgba(245,236,217,0.2);
  color: var(--cream);
  padding: 0.1em 0.3em;
  border-radius: 4px;
  /* Same display rules across cards — no weird inline behavior */
  display: inline;
  box-decoration-break: clone;
  -webkit-box-decoration-break: clone;
  /* Clamp to 2 lines so very long highlights don't dominate */
  display: -webkit-box;
  -webkit-line-clamp: 2;
  -webkit-box-orient: vertical;
  overflow: hidden;
}
.cs-card-preview-headline em { font-style: italic; }
.cs-card-preview-suffix {
  display: block;
  font-size: 0.82rem;
  font-weight: 600;
  line-height: 1.3;
  letter-spacing: 0;
  color: var(--cream-soft);
  /* Clamp suffix at 2 lines so cards stay uniform */
  display: -webkit-box;
  -webkit-line-clamp: 2;
  -webkit-box-orient: vertical;
  overflow: hidden;
  text-overflow: ellipsis;
}
.cs-card-preview-fallback {
  font-size: 1.45rem;
  font-weight: 800;
  letter-spacing: -0.01em;
  color: var(--cream);
}

/* One fact per line, and the gaps do the grouping: the highlight sits tight
   under the client because they are one thought, everything else breathes. */
.cs-card-info { padding: 1.1rem 1.25rem 1rem; flex: 1; display: flex; flex-direction: column; gap: 0.7rem; }
.cs-card-client {
  font-size: 1.2rem;
  font-weight: 800;
  letter-spacing: -0.02em;
  line-height: 1.15;
  color: var(--cream);
}
.cs-card-highlight {
  margin-top: -0.5rem;          /* pulls it up against the client line */
  font-size: 1.2rem;
  font-weight: 700;
  letter-spacing: -0.02em;
  line-height: 1.15;
  color: var(--cream-dim);
}

.cs-card-tier {
  font-size: 0.62rem;
  font-weight: 700;
  letter-spacing: 0.16em;
  text-transform: uppercase;
  color: var(--text-dim);
}

.cs-card-title {
  font-size: 1.2rem;
  font-weight: 800;
  letter-spacing: -0.01em;
  line-height: 1.15;
  color: var(--cream);
}
.cs-card-title .cs-scope {
  color: var(--cream-dim);
  font-weight: 700;
}

.cs-card-scale {
  font-size: 0.7rem;
  font-weight: 600;
  letter-spacing: 0.01em;
  color: var(--cream-soft);
  display: flex; flex-wrap: wrap;
  gap: 0.35rem;
  align-items: baseline;
  line-height: 1.35;
}
.cs-card-scale-sep {
  color: var(--text-dim);
  font-weight: 400;
  margin: 0 0.05rem;
}

.cs-card-tags {
  display: flex;
  flex-wrap: wrap;
  gap: 0.35rem;
  margin-top: auto;
}
.cs-tag {
  font-size: 0.66rem;
  font-weight: 500;
  letter-spacing: 0.01em;
  padding: 0.28rem 0.6rem;
  border-radius: var(--radius-pill);
  border: 1px solid rgba(245,236,217,0.22);
  color: var(--cream-soft);
  white-space: nowrap;
}
.cs-tag-overflow { color: var(--cream-dim); border-color: rgba(245,236,217,0.10); }

.cs-card-checkbox {
  position: absolute;
  top: 0.7rem;
  left: 0.7rem;
  width: 28px;
  height: 28px;
  border-radius: 8px;
  background: rgba(0,0,0,0.6);
  backdrop-filter: blur(8px);
  border: 1px solid rgba(255,255,255,0.18);
  cursor: pointer;
  display: flex;
  align-items: center;
  justify-content: center;
  z-index: 5;
  opacity: 0;
  transition: opacity 0.15s, background 0.15s;
}
.cs-card:hover .cs-card-checkbox,
.cs-card.is-selected .cs-card-checkbox { opacity: 1; }
.cs-card-checkbox.is-checked { background: var(--cream); border-color: var(--cream); }
.cs-card-checkbox.is-checked svg { color: #000; }
.cs-card-checkbox svg { color: transparent; }

/* ==========================================================
   DETAIL VIEW (matches case-study screenshots)
========================================================== */
.cv-detail {
  max-width: 1400px;
  margin: 0 auto;
  padding: 3rem 3rem 6rem;
}

/* Back link on the left, Edit on the right. Until now the only way into edit
   mode was the card's ⋯ menu on the dashboard — opening a case study by
   clicking it was a dead end, with no way to start editing from the page. */
.cv-detail-topbar {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 1rem;
  margin-bottom: 1.5rem;
}
.cv-detail-back {
  display: inline-flex;
  align-items: center;
  gap: 0.4rem;
  font-size: 0.78rem;
  font-weight: 600;
  color: var(--text-muted);
  letter-spacing: 0.02em;
}
.cv-detail-back:hover { color: var(--cream); }

.cv-detail-tier {
  font-size: 0.72rem;
  font-weight: 700;
  letter-spacing: 0.18em;
  text-transform: uppercase;
  color: var(--cream-dim);
  margin-bottom: 0.6rem;
}

.cv-detail-title {
  font-size: clamp(2.2rem, 5.5vw, 4.4rem);
  font-weight: 900;
  letter-spacing: -0.02em;
  line-height: 1;
  color: var(--cream);
}
.cv-detail-title .pipe { color: var(--cream-dim); margin: 0 0.35em; font-weight: 700; }

.cv-detail-tags {
  display: flex;
  flex-wrap: wrap;
  gap: 0.5rem;
  margin-top: 1.25rem;
}
.cv-detail-tags .cs-tag {
  font-size: 0.78rem;
  padding: 0.42rem 0.85rem;
}

/* Industries and capabilities follow the dashboard card, which is the source of
   truth for this pairing: industries are a dot-separated eyebrow (no chrome),
   capabilities are the outlined pills underneath. Sized to the detail page —
   the eyebrow uses this page's own .cv-section-label scale rather than the
   card's smaller one, so it sits right under the title. */
.cv-detail-industries {
  display: flex;
  flex-wrap: wrap;
  align-items: baseline;
  gap: 0.55rem;
  margin-top: 1.25rem;
}
.cs-tag.cs-tag-industry {
  background: none;
  border: none;
  padding: 0;
  color: var(--cream-dim);
  font-size: 0.7rem;
  font-weight: 700;
  letter-spacing: 0.18em;
  text-transform: uppercase;
}
/* The card joins its industries with '·'; here each one is its own removable
   chip, so the separator is drawn between them instead. Dropped in edit mode,
   where every industry already carries an x. */
.cv-detail-industries .cs-tag-industry:not(:last-of-type)::after {
  content: '·';
  margin-left: 0.55rem;
  color: var(--text-dim);
  letter-spacing: 0;
}
body.cv-edit-mode .cv-detail-industries .cs-tag-industry::after { content: none; }
#addIndustryBtn {
  border: none;
  padding: 0;
  color: var(--text-dim);
  font-size: 0.7rem;
  font-weight: 700;
  letter-spacing: 0.18em;
  text-transform: uppercase;
}
#addIndustryBtn:hover { color: var(--cream); }

.cv-detail-body {
  display: grid;
  grid-template-columns: minmax(0, 1.05fr) minmax(0, 0.95fr);
  gap: 3.5rem;
  margin-top: 3rem;
  align-items: start;
}

@media (max-width: 980px) {
  .cv-detail-body { grid-template-columns: 1fr; gap: 2.5rem; }
  .cv-detail { padding: 2rem 1.5rem 4rem; }
}

/* Phone mockup — 16:9 landscape device, matches the original CAPE case-study deck */
.cv-phone {
  position: relative;
  width: 100%;
  display: flex;
  align-items: center;
  justify-content: center;
}
.cv-phone-frame {
  position: relative;
  width: 100%;
  aspect-ratio: 16 / 9;
  border-radius: 16px;
  background: #0d0d0d;
  border: 2px solid #2a2a2a;
  box-shadow: 0 20px 60px rgba(0,0,0,0.65), 0 0 0 1px rgba(255,255,255,0.04) inset;
  overflow: hidden;
  display: flex;
  align-items: center;
  justify-content: center;
}
.cv-phone-frame video,
.cv-phone-frame img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  display: block;
}

.cv-phone-headline {
  position: absolute;
  bottom: 9%;
  left: 8%;
  right: 8%;
  text-align: center;
  font-size: clamp(1.3rem, 2.3vw, 2rem);
  font-weight: 900;
  letter-spacing: -0.01em;
  line-height: 1.05;
  z-index: 4;
  color: var(--cream);
  text-shadow: 0 2px 14px rgba(0,0,0,0.55);
  pointer-events: none;
}
.cv-phone-headline .lead { display: block; font-weight: 600; font-size: 0.7em; color: var(--cream-soft); margin-bottom: 0.35em; }
.cv-phone-headline mark {
  background: rgba(245,236,217,0.22);
  color: var(--cream);
  padding: 0.05em 0.22em;
  border-radius: 4px;
}
.cv-phone-headline em { font-style: italic; }
.cv-phone-headline .suffix { display: block; font-weight: 600; font-size: 0.65em; color: var(--cream-soft); margin-top: 0.35em; }

.cv-phone-empty {
  text-align: center;
  color: var(--text-dim);
  font-size: 0.8rem;
  font-weight: 500;
  z-index: 2;
  padding: 1rem;
}

/* Play indicator overlay — shows on paused hero videos.
   Chrome aggressively pauses muted-only videos to save power, so we surface
   a one-click affordance to start playback. Hidden once the video is rolling. */
.cv-phone-play-indicator {
  position: absolute;
  inset: 0;
  display: flex; align-items: center; justify-content: center;
  z-index: 5;
  pointer-events: none;
  opacity: 0;
  transition: opacity 180ms ease;
}
.cv-phone-frame.is-paused .cv-phone-play-indicator { opacity: 1; }
.cv-phone-frame.is-paused::after {
  content: '';
  position: absolute; inset: 0;
  background: rgba(0,0,0,0.25);
  z-index: 4;
  pointer-events: none;
  transition: background 180ms ease;
}
.cv-phone-play-indicator svg {
  background: rgba(0,0,0,0.6);
  backdrop-filter: blur(6px);
  -webkit-backdrop-filter: blur(6px);
  border-radius: 50%;
  padding: 18px;
  color: var(--cream);
  box-shadow: 0 4px 18px rgba(0,0,0,0.45);
}
/* In edit mode the phone frame is a play toggle, so hint with cursor */
body.cv-edit-mode .cv-phone-frame.cv-phone-has-video { cursor: pointer; }

/* Right column */
.cv-detail-right { display: flex; flex-direction: column; gap: 1.5rem; }

.cv-section-label {
  font-size: 0.7rem;
  font-weight: 700;
  letter-spacing: 0.18em;
  text-transform: uppercase;
  color: var(--cream-dim);
  margin-bottom: 0.85rem;
}

.cv-metrics {
  list-style: none;
  display: flex;
  flex-direction: column;
  gap: 0.85rem;
}
.cv-metrics li {
  font-size: 1.02rem;
  line-height: 1.45;
  color: var(--cream);
  padding-left: 1.1rem;
  position: relative;
  font-weight: 500;
}
.cv-metrics li::before {
  content: '';
  position: absolute;
  left: 0;
  top: 0.65em;
  width: 6px;
  height: 6px;
  border-radius: 50%;
  background: var(--cream-soft);
}

.cv-quote {
  border-left: 2px solid var(--cream-dim);
  padding: 0.4rem 0 0.4rem 1.25rem;
  font-style: italic;
  font-size: 1rem;
  line-height: 1.55;
  color: var(--cream-soft);
}
.cv-quote-attr {
  display: block;
  margin-top: 0.7rem;
  font-style: normal;
  font-weight: 600;
  font-size: 0.82rem;
  color: var(--cream-dim);
}

/* ==========================================================
   STATUS / EMPTY
========================================================== */
.cv-empty {
  text-align: center;
  padding: 5rem 2rem;
  color: var(--text-dim);
  font-size: 0.9rem;
}

/* ==========================================================
   USER MENU
========================================================== */
.cv-user-menu { position: relative; }
.cv-user-btn {
  width: 34px; height: 34px;
  border-radius: 50%;
  background: var(--cream);
  color: #000;
  border: none;
  cursor: pointer;
  font-family: var(--font);
  font-weight: 800;
  font-size: 0.82rem;
  display: flex; align-items: center; justify-content: center;
  transition: background 0.15s;
}
.cv-user-btn:hover { background: #fff; }
.cv-user-avatar { display: inline-flex; }
.cv-user-dropdown {
  display: none;
  position: absolute;
  right: 0; top: calc(100% + 0.5rem);
  background: var(--bg-elev);
  border: 1px solid var(--border);
  border-radius: 12px;
  padding: 0.5rem;
  min-width: 220px;
  box-shadow: 0 12px 40px rgba(0,0,0,0.6);
  z-index: 110;
}
.cv-user-dropdown.open { display: block; }
.cv-user-info {
  display: flex; flex-direction: column; gap: 0.15rem;
  padding: 0.65rem 0.7rem 0.7rem;
  border-bottom: 1px solid var(--border);
  margin-bottom: 0.3rem;
}
.cv-user-name { font-size: 0.85rem; font-weight: 700; color: var(--cream); }
.cv-user-email { font-size: 0.74rem; color: var(--text-muted); }
.cv-user-signout,
.cv-user-action {
  display: block; width: 100%;
  padding: 0.55rem 0.7rem;
  background: transparent; border: none;
  color: var(--text-muted);
  font-family: var(--font);
  font-size: 0.82rem; font-weight: 600;
  text-align: left;
  border-radius: 7px;
  cursor: pointer;
}
.cv-user-signout:hover,
.cv-user-action:hover { background: rgba(255,255,255,0.05); color: var(--cream); }
.cv-user-action:disabled { opacity: 0.6; cursor: progress; }
.cv-user-action-hint {
  padding: 0 0.7rem 0.5rem;
  font-size: 0.68rem;
  color: var(--text-dim);
  font-weight: 500;
  line-height: 1.3;
  letter-spacing: 0.01em;
}

/* ==========================================================
   LOGIN
========================================================== */
.cv-login-body {
  min-height: 100vh;
  display: flex; align-items: center; justify-content: center;
  background:
    radial-gradient(1200px 600px at 70% 20%, rgba(245,236,217,0.05), transparent 60%),
    radial-gradient(900px 600px at 20% 80%, rgba(255,77,0,0.06), transparent 60%),
    var(--bg);
}
.cv-login-wrap { width: 100%; max-width: 480px; padding: 2rem; }
.cv-login-card {
  background: var(--bg-card);
  border: 1px solid var(--border);
  border-radius: 22px;
  padding: 2.5rem;
}
.cv-login-logo { font-size: 0.95rem; letter-spacing: 0.22em; color: var(--cream); margin-bottom: 1.5rem; }
.cv-login-title {
  font-size: 1.7rem;
  font-weight: 900;
  letter-spacing: -0.02em;
  line-height: 1.1;
  color: var(--cream);
}
.cv-login-title em { font-style: italic; color: var(--cream-soft); }
.cv-login-sub { margin-top: 0.7rem; color: var(--text-muted); font-size: 0.9rem; line-height: 1.5; }
.cv-login-form { display: flex; flex-direction: column; gap: 0.7rem; margin-top: 1.6rem; }
.cv-login-input {
  background: var(--bg);
  border: 1px solid var(--border);
  border-radius: 10px;
  padding: 0.85rem 1rem;
  color: var(--cream);
  font-family: var(--font);
  font-size: 0.92rem;
  outline: none;
  transition: border-color 0.15s;
}
.cv-login-input:focus { border-color: var(--cream-dim); }
.cv-login-input::placeholder { color: var(--text-dim); }
.cv-login-btn { padding: 0.85rem 1rem; font-size: 0.9rem; }
.cv-login-error { color: #ff7373; font-size: 0.8rem; min-height: 1rem; }
.cv-login-foot { margin-top: 1.5rem; color: var(--text-dim); font-size: 0.72rem; text-align: center; }

/* ==========================================================
   ABOUT PAGE
========================================================== */
.cv-about { max-width: 1100px; margin: 0 auto; padding: 3rem 2.5rem 6rem; }
.cv-about-hero { padding: 1.5rem 0 2rem; border-bottom: 1px solid var(--border); }
.cv-about-hero h1 {
  font-size: clamp(2.2rem, 5vw, 3.6rem);
  font-family: var(--display);
  /* Chalet ships one upright 400. Without this the browser fakes any italic or
     bold asked of it, which is a slanted smear, not the typeface. */
  font-synthesis: none;
  font-weight: 400;
  letter-spacing: -0.02em;
  line-height: 1.02;
  color: var(--cream);
}
.cv-about-hero h1 em { font-style: normal; color: var(--cream-soft); }
.cv-about-hero p { margin-top: 1rem; color: var(--text-muted); font-size: 1rem; max-width: 38rem; line-height: 1.55; }

.cv-about-section { margin-top: 3rem; }
.cv-about-section h2 {
  font-size: 0.78rem;
  font-weight: 700;
  letter-spacing: 0.18em;
  text-transform: uppercase;
  color: var(--cream-dim);
  margin-bottom: 1.2rem;
}

/* Creds — clean two-column editorial grid: confident type, no bullets.
   Spans the same 1200px width as the strategy rail, columns flush to its
   left and right edges. */
.cv-bg-section[data-section="creds"] .cv-bg-section-content { max-width: 1200px; }
.cv-creds-list {
  list-style: none;
  display: grid;
  grid-template-columns: 1fr 1fr;
  column-gap: 10rem;
  row-gap: 2.6rem;
  width: 100%;
  margin: 0 auto;
}
.cv-creds-list li {
  font-size: clamp(1.2rem, 2vw, 1.55rem);
  font-weight: 750;
  letter-spacing: -0.015em;
  line-height: 1.32;
  color: var(--cream);
  text-align: left;
}
@media (max-width: 760px) { .cv-creds-list { grid-template-columns: 1fr; row-gap: 1.8rem; } }

.cv-founders {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 2rem;
}
@media (max-width: 800px) { .cv-founders { grid-template-columns: 1fr; } }
.cv-founder-card {
  background: rgba(20, 20, 20, 0.8); /* --bg-card at 80% — lets the reel glow through */
  border: 1px solid var(--border);
  border-radius: 18px;
  padding: 2rem;
}
.cv-founder-name {
  font-size: 1.4rem; font-weight: 900; letter-spacing: -0.01em;
  color: var(--cream);
}
.cv-founder-title {
  font-size: 0.74rem; font-weight: 700; letter-spacing: 0.16em; text-transform: uppercase;
  color: var(--cream-dim); margin-top: 0.4rem;
}
.cv-founder-bio { margin-top: 1rem; font-size: 0.95rem; line-height: 1.6; color: var(--cream-soft); }
.cv-founder-tag {
  margin-top: 1.1rem; padding-top: 1.1rem;
  border-top: 1px solid var(--border);
  font-style: italic; font-size: 0.92rem; color: var(--cream);
  font-weight: 500;
}

/* ----------------------------------------------------------
   Full-bleed video-background section (reusable)
   Wrap any About-page section in <section class="cv-bg-section">
   and supply a video URL to .cv-bg-section-media.
---------------------------------------------------------- */
.cv-bg-section {
  position: relative;
  width: 100%;
  min-height: clamp(420px, 70vh, 720px);
  display: flex;
  align-items: center;
  justify-content: center;
  padding: 4rem 2.5rem;
  background: var(--bg);
  border-bottom: 1px solid var(--border);
  overflow: hidden;
}
.cv-bg-section:last-of-type { border-bottom: none; }

/* Make the founders section noticeably taller so the bg video has room
   to breathe, and pin the cards to the bottom so the extra height shows
   one large uninterrupted stretch of video above them instead of two
   thin strips. */
.cv-bg-section[data-section="founders"] {
  min-height: clamp(760px, 135vh, 1400px);
  align-items: flex-end;
  padding-bottom: 5rem;
}

.cv-bg-section-media,
.cv-bg-section-media > video,
.cv-bg-section-media > img {
  position: absolute;
  inset: 0;
  width: 100%; height: 100%;
  object-fit: cover;
  z-index: 0;
}
.cv-bg-section-media:empty::after {
  content: '';
  position: absolute; inset: 0;
  background:
    radial-gradient(900px 500px at 30% 40%, rgba(245,236,217,0.04), transparent 60%),
    radial-gradient(700px 400px at 70% 65%, rgba(255,77,0,0.06), transparent 60%);
}

/* Dim gradient only when there's a real video — empty sections stay flat */
.cv-bg-section[data-has-media="true"]::before {
  content: '';
  position: absolute; inset: 0;
  z-index: 1;
  background: linear-gradient(180deg, rgba(0,0,0,0.55) 0%, rgba(0,0,0,0.35) 50%, rgba(0,0,0,0.7) 100%);
  pointer-events: none;
}

/* Founders section runs a noticeably lighter overlay so Brown & Jessica
   read clearly through the video. The bio text sits in cards with their
   own background, so we don't need a heavy scrim for legibility here. */
.cv-bg-section[data-section="founders"][data-has-media="true"]::before {
  background: linear-gradient(180deg, rgba(0,0,0,0.18) 0%, rgba(0,0,0,0.08) 50%, rgba(0,0,0,0.32) 100%);
}

.cv-bg-section-content {
  position: relative;
  z-index: 2;
  width: 100%;
  max-width: 1100px;
  display: flex;
  flex-direction: column;
  text-align: center;    /* center prose by default — manifesto vibe */
  gap: 1.5rem;
}
/* .center stays as a no-op hook for back-compat (text-align: center is now default) */
.cv-bg-section-content.center { text-align: center; align-items: center; }

.cv-bg-section-content .cv-founders {
  justify-content: center;
}
.cv-bg-section-content .cv-founders .cv-founder-card { text-align: left; }
.cv-bg-section-content .cv-services-grid { justify-content: center; }
.cv-bg-section-content .cv-service-tags { justify-content: center; }

.cv-bg-section-controls {
  position: absolute;
  bottom: 1rem; right: 1rem;
  z-index: 5;
  display: flex; gap: 0.4rem;
  opacity: 0;
  transition: opacity 0.18s ease;
}
.cv-bg-section:hover .cv-bg-section-controls { opacity: 1; }
.cv-bg-section-controls button {
  background: rgba(0,0,0,0.7);
  backdrop-filter: blur(8px);
  -webkit-backdrop-filter: blur(8px);
  color: var(--cream);
  border: 1px solid var(--border-strong);
  border-radius: var(--radius-pill);
  padding: 0.4rem 0.9rem;
  font-family: var(--font);
  font-size: 0.74rem; font-weight: 600;
  cursor: pointer;
  letter-spacing: 0.01em;
}
.cv-bg-section-controls button:hover {
  background: rgba(0,0,0,0.9);
  border-color: var(--cream);
}
.cv-bg-section-uploading {
  position: absolute;
  bottom: 1rem; left: 1rem;
  z-index: 5;
  font-size: 0.74rem; font-weight: 600;
  color: var(--cream-soft);
  background: rgba(0,0,0,0.7);
  padding: 0.4rem 0.85rem;
  border-radius: var(--radius-pill);
  border: 1px solid var(--border-strong);
}

/* Make the existing typography read on top of any background */
.cv-bg-section .cv-about-hero h1,
.cv-bg-section h2,
.cv-bg-section h1 { text-shadow: 0 4px 30px rgba(0,0,0,0.5); }
.cv-bg-section[data-has-media="true"] .cv-about-hero p { color: var(--cream); }

/* Bare video-only variant — no text, no dim overlay */
.cv-bg-section--bare::before { content: none !important; }
.cv-bg-section--bare { padding: 0; }
.cv-bg-section-empty {
  position: relative;
  z-index: 2;
  display: none;
  width: 100%; height: 100%;
  align-items: center; justify-content: center;
}
.cv-bg-section--bare[data-has-media="false"] .cv-bg-section-empty {
  display: flex;
  position: absolute; inset: 0;
}
.cv-bg-section-empty-btn {
  display: inline-flex; flex-direction: column; align-items: center; gap: 0.5rem;
  padding: 1.4rem 2.2rem;
  background: rgba(0,0,0,0.55);
  backdrop-filter: blur(8px);
  -webkit-backdrop-filter: blur(8px);
  color: var(--cream);
  border: 1px dashed rgba(245,236,217,0.3);
  border-radius: var(--radius);
  font-family: var(--font);
  font-size: 0.95rem; font-weight: 700;
  cursor: pointer;
  transition: border-color 0.15s, background 0.15s;
}
.cv-bg-section-empty-btn:hover {
  border-color: var(--cream);
  background: rgba(0,0,0,0.75);
}
.cv-bg-section-empty-btn svg { color: var(--cream); }
.cv-bg-section-empty-hint {
  font-size: 0.74rem; font-weight: 500;
  color: var(--cream-soft);
  letter-spacing: 0.02em;
}
.cv-bg-section--bare[data-has-media="true"] .cv-bg-section-empty { display: none; }

/* Full-bleed reel between Top Level Creds and Our Founders */
.cv-reel {
  position: relative;
  width: 100%;
  height: clamp(380px, 56vh, 640px);
  overflow: hidden;
  background: #000;
  margin: 4rem 0 2rem;
}
.cv-reel-media,
.cv-reel-media video,
.cv-reel-media img {
  position: absolute; inset: 0;
  width: 100%; height: 100%;
  object-fit: cover;
}
.cv-reel-media:empty::after {
  content: '';
  position: absolute; inset: 0;
  background:
    radial-gradient(900px 500px at 30% 40%, rgba(245,236,217,0.06), transparent 60%),
    radial-gradient(700px 400px at 70% 65%, rgba(255,77,0,0.08), transparent 60%),
    #0a0a0a;
}
.cv-reel-overlay {
  position: absolute; inset: 0;
  display: flex; align-items: center; justify-content: center;
  text-align: center;
  padding: 2rem;
  background: linear-gradient(180deg, rgba(0,0,0,0.45) 0%, rgba(0,0,0,0.25) 50%, rgba(0,0,0,0.6) 100%);
  pointer-events: none;
}
.cv-reel-headline {
  font-size: clamp(2rem, 5vw, 3.8rem);
  font-family: var(--display);
  /* Chalet ships one upright 400. Without this the browser fakes any italic or
     bold asked of it, which is a slanted smear, not the typeface. */
  font-synthesis: none;
  font-weight: 400;
  letter-spacing: -0.02em;
  line-height: 1.05;
  color: var(--cream);
  text-shadow: 0 4px 30px rgba(0,0,0,0.55);
  max-width: 22ch;
  /* the max-width caps the box below its container; without auto margins
     the capped box hugs the left edge in non-flex parents (export slides) */
  margin-inline: auto;
}
.cv-reel-headline em { font-style: normal; color: var(--cream-soft); }

.cv-reel-controls {
  position: absolute;
  bottom: 1rem; right: 1rem;
  display: flex; gap: 0.5rem;
  z-index: 4;
}
.cv-reel-controls .cv-btn {
  background: rgba(0,0,0,0.65);
  backdrop-filter: blur(8px);
  -webkit-backdrop-filter: blur(8px);
  border-color: rgba(255,255,255,0.18);
  color: var(--cream);
  font-size: 0.74rem;
  padding: 0.45rem 0.9rem;
}
.cv-reel-controls .cv-btn:hover { background: rgba(0,0,0,0.85); border-color: var(--cream); }
.cv-reel-uploading {
  position: absolute;
  bottom: 1rem; left: 1rem;
  z-index: 4;
  font-size: 0.74rem; font-weight: 600;
  color: var(--cream-soft);
  background: rgba(0,0,0,0.7);
  padding: 0.4rem 0.8rem;
  border-radius: var(--radius-pill);
  border: 1px solid var(--border-strong);
}

.cv-services-grid {
  display: grid; grid-template-columns: 1fr 1fr; gap: 2.5rem;
}
@media (max-width: 800px) { .cv-services-grid { grid-template-columns: 1fr; } }
.cv-service-block { }
.cv-service-tags { display: flex; flex-wrap: wrap; gap: 0.45rem; }
.cv-service-tags .cs-tag {
  font-size: 0.78rem; padding: 0.45rem 0.85rem;
}

/* ==========================================================
   EDITOR
========================================================== */
.cv-edit-bar {
  display: flex; align-items: center; gap: 0.5rem;
  margin-bottom: 1rem;
  padding: 0.6rem 0.9rem;
  background: rgba(245,236,217,0.06);
  border: 1px solid rgba(245,236,217,0.18);
  border-radius: var(--radius);
  font-size: 0.82rem;
}

.cv-about-edit-bar {
  position: sticky;
  top: 68px;
  z-index: 95;
  margin: 0.75rem 2.5rem 0;
  background: var(--cream);
  color: #000;
  border: none;
  box-shadow: 0 10px 30px rgba(0,0,0,0.55);
}
.cv-about-edit-bar.is-dirty { background: #ffd9a8; }
.cv-about-edit-bar .cv-edit-status { color: rgba(0,0,0,0.7); font-weight: 600; }
.cv-about-edit-bar button { background: #000; color: var(--cream); border: none; }
.cv-about-edit-bar button.secondary { background: transparent; color: #000; border: 1px solid rgba(0,0,0,0.25); }
.cv-about-edit-bar button:disabled { opacity: 0.5; cursor: not-allowed; }
.cv-edit-bar.is-dirty { background: rgba(255,77,0,0.10); border-color: rgba(255,77,0,0.4); }
.cv-edit-bar .cv-edit-status { color: var(--cream-soft); margin-right: auto; }
.cv-edit-bar button {
  background: var(--cream); color: #000;
  border: none; border-radius: 8px;
  padding: 0.45rem 0.95rem;
  font-family: var(--font); font-weight: 700; font-size: 0.78rem;
  cursor: pointer;
}
.cv-edit-bar button.secondary { background: transparent; color: var(--cream-soft); border: 1px solid var(--border-strong); }
/* Disabled state is now visually unambiguous — dimmed AND desaturated so
   the button clearly looks inactive (previous 0.5 opacity wasn't strong
   enough; users would click and wonder why "nothing happened"). */
.cv-edit-bar button:disabled {
  opacity: 0.32;
  cursor: not-allowed;
  filter: grayscale(0.6);
}
.cv-edit-bar button:disabled:hover { opacity: 0.32; }
/* Tiny pulse on the status text when the user clicks a disabled Save —
   makes it obvious there's nothing to save right now. */
@keyframes cv-edit-status-nudge {
  0%, 100% { transform: translateY(0); opacity: 1; }
  50% { transform: translateY(-2px); opacity: 0.7; }
}
.cv-edit-status.is-nudged { animation: cv-edit-status-nudge 360ms ease; }

/* "Just saved" state — bumps the status text to a confident green +
   pops it for a moment, so an auto-save after a media upload is
   unambiguous instead of silent. */
.cv-edit-status.is-just-saved {
  color: #6ee7a7;
  font-weight: 700;
  animation: cv-edit-status-just-saved 600ms ease;
}
@keyframes cv-edit-status-just-saved {
  0%   { transform: translateY(4px); opacity: 0; }
  60%  { transform: translateY(-2px); opacity: 1; }
  100% { transform: translateY(0); opacity: 1; }
}

.cv-editable {
  outline: 1px dashed transparent;
  border-radius: 4px;
  transition: outline-color 0.15s, background 0.15s;
}
/* Defensive against pasted content carrying foreign color/background styles
   (e.g. black text from Google Docs, which is invisible on Cover's dark bg).
   The paste handler in view.js/about.js strips formatting on paste — this
   covers any path that bypasses paste (drag-drop, programmatic insert, etc.). */
.cv-editable * {
  color: inherit !important;
  background: transparent !important;
  background-color: transparent !important;
  font-family: inherit !important;
}
body.cv-edit-mode .cv-editable {
  outline-color: rgba(245,236,217,0.25);
  cursor: text;
}
body.cv-edit-mode .cv-editable:hover { outline-color: var(--cream); background: rgba(245,236,217,0.04); }
body.cv-edit-mode .cv-editable:focus { outline: 2px solid var(--cream); background: rgba(245,236,217,0.06); }

body:not(.cv-edit-mode) .cv-quote-section[data-empty="true"] { display: none; }

/* Card-highlight pair only appears in edit mode — the headline + suffix
   still drive dashboard card callouts but are no longer overlaid on the
   case study video. */
.cv-card-highlight-edit { display: none; }
body.cv-edit-mode .cv-card-highlight-edit {
  display: block;
  margin-bottom: 1.5rem;
  padding-bottom: 1.5rem;
  border-bottom: 1px solid var(--border);
}
.cv-card-highlight-row {
  display: grid;
  grid-template-columns: 1fr 1.4fr;
  gap: 1rem;
}
.cv-card-highlight-pair { display: flex; flex-direction: column; gap: 0.4rem; min-width: 0; }
.cv-card-highlight-pair label {
  font-size: 0.7rem;
  font-weight: 700;
  letter-spacing: 0.08em;
  text-transform: uppercase;
  color: var(--cream-dim);
}
.cv-card-highlight-pair .cv-editable {
  background: rgba(245,236,217,0.06);
  border-radius: 8px;
  padding: 0.55rem 0.7rem;
  font-size: 0.95rem;
  font-weight: 600;
  color: var(--cream);
  min-height: 1.6em;
}
.cv-editable:empty::before {
  content: attr(data-placeholder);
  color: var(--text-dim);
  font-style: italic;
}

.cv-tag-editor { display: flex; flex-wrap: wrap; gap: 0.5rem; align-items: center; }
.cv-tag-editor .cs-tag { display: inline-flex; align-items: center; gap: 0.35rem; }
.cv-tag-editor .cs-tag .cv-tag-x {
  display: none;
  width: 14px; height: 14px;
  border-radius: 50%;
  background: rgba(245,236,217,0.18);
  color: var(--cream);
  font-size: 0.7rem; line-height: 1;
  align-items: center; justify-content: center;
  cursor: pointer;
}
body.cv-edit-mode .cv-tag-editor .cs-tag .cv-tag-x { display: inline-flex; }
body.cv-edit-mode .cv-detail-industries .cs-tag .cv-tag-x {
  width: 12px; height: 12px; font-size: 0.62rem;
  background: rgba(245,236,217,0.14);
}
.cv-tag-add {
  display: none;
  background: transparent;
  border: 1px dashed rgba(245,236,217,0.3);
  color: var(--cream-soft);
  border-radius: var(--radius-pill);
  padding: 0.35rem 0.85rem;
  font-size: 0.78rem;
  cursor: pointer;
  font-family: var(--font);
}
body.cv-edit-mode .cv-tag-add { display: inline-flex; }

.cv-metric-row { display: flex; align-items: flex-start; gap: 0.4rem; }
.cv-metric-row .cv-editable { flex: 1; }
.cv-metric-del {
  display: none;
  background: transparent; border: none;
  color: var(--text-dim); cursor: pointer;
  font-size: 1rem; line-height: 1;
  padding: 0.2rem 0.4rem;
}
body.cv-edit-mode .cv-metric-del { display: inline-flex; }
.cv-metric-del:hover { color: #ff7373; }

.cv-add-btn {
  display: none;
  margin-top: 0.6rem;
  background: transparent; border: 1px dashed rgba(245,236,217,0.3);
  color: var(--cream-soft);
  border-radius: 8px; padding: 0.45rem 0.85rem;
  font-size: 0.8rem; font-family: var(--font);
  cursor: pointer;
}
body.cv-edit-mode .cv-add-btn { display: inline-flex; }

.cv-video-controls {
  display: none;
  position: absolute; inset: auto 0.6rem 0.6rem 0.6rem;
  z-index: 10;
  flex-direction: row; gap: 0.4rem; justify-content: center;
}
body.cv-edit-mode .cv-video-controls { display: flex; }
.cv-video-controls button {
  background: rgba(0,0,0,0.7);
  backdrop-filter: blur(8px);
  color: var(--cream);
  border: 1px solid var(--border-strong);
  padding: 0.4rem 0.85rem;
  border-radius: var(--radius-pill);
  font-family: var(--font);
  font-size: 0.74rem; font-weight: 600;
  cursor: pointer;
}
.cv-video-controls button:hover { background: rgba(0,0,0,0.9); border-color: var(--cream); }

/* ==========================================================
   MEDIA GALLERY (edit mode)
   Shown below the phone-frame hero. First item is the hero.
========================================================== */
.cv-phone-column { display: flex; flex-direction: column; gap: 1rem; }

.cv-media-gallery { display: none; flex-direction: column; gap: 0.85rem; }
body.cv-edit-mode .cv-media-gallery { display: flex; }

.cv-media-strip {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(140px, 1fr));
  gap: 0.65rem;
}

.cv-media-empty {
  grid-column: 1 / -1;
  text-align: center;
  color: var(--text-dim);
  font-size: 0.78rem;
  padding: 1rem;
  border: 1px dashed rgba(245,236,217,0.18);
  border-radius: 10px;
}

.cv-media-item {
  display: flex; flex-direction: column; gap: 0.35rem;
  background: rgba(255,255,255,0.02);
  border: 1px solid rgba(245,236,217,0.1);
  border-radius: 10px;
  padding: 0.45rem;
}
.cv-media-item.is-hero {
  border-color: rgba(245,236,217,0.32);
  background: rgba(245,236,217,0.04);
}

.cv-media-thumb {
  position: relative;
  width: 100%;
  aspect-ratio: 16 / 9;
  background: #0d0d0d;
  border-radius: 6px;
  overflow: hidden;
}
.cv-media-thumb video,
.cv-media-thumb img {
  width: 100%; height: 100%;
  object-fit: cover;
  display: block;
}
.cv-media-badge {
  position: absolute; top: 4px; left: 4px;
  background: rgba(0,0,0,0.72);
  backdrop-filter: blur(4px);
  color: var(--cream);
  font-size: 0.62rem;
  font-weight: 700;
  letter-spacing: 0.08em;
  text-transform: uppercase;
  padding: 0.15rem 0.45rem;
  border-radius: 3px;
}

.cv-media-caption {
  width: 100%;
  background: transparent;
  border: 1px solid transparent;
  color: var(--cream);
  font-family: var(--font);
  font-size: 0.78rem;
  padding: 0.3rem 0.4rem;
  border-radius: 4px;
}
.cv-media-caption:focus {
  outline: none;
  border-color: rgba(245,236,217,0.3);
  background: rgba(0,0,0,0.35);
}
.cv-media-caption::placeholder { color: var(--text-dim); font-style: italic; }

.cv-media-controls {
  display: flex; gap: 0.25rem; justify-content: flex-end;
}
.cv-media-btn {
  background: rgba(0,0,0,0.4);
  border: 1px solid rgba(245,236,217,0.15);
  color: var(--cream-soft);
  font-family: var(--font);
  font-size: 0.78rem;
  width: 26px; height: 26px;
  border-radius: 4px;
  cursor: pointer;
  display: inline-flex; align-items: center; justify-content: center;
  padding: 0;
}
.cv-media-btn:hover:not(:disabled) {
  background: rgba(245,236,217,0.1);
  border-color: rgba(245,236,217,0.35);
  color: var(--cream);
}
.cv-media-btn:disabled { opacity: 0.25; cursor: not-allowed; }
.cv-media-btn-del:hover:not(:disabled) {
  background: rgba(255,115,115,0.15);
  border-color: rgba(255,115,115,0.4);
  color: #ff9999;
}

.cv-media-add {
  display: flex; align-items: center; gap: 0.5rem; flex-wrap: wrap;
}
.cv-media-hint {
  font-size: 0.72rem;
  color: var(--text-dim);
  font-style: italic;
}

/* ==========================================================
   READ-MODE MARQUEE (visible to viewers, not editors)
   Slowly auto-scrolls secondary media horizontally. Decorative
   only — no click, no lightbox. Items are rendered 3x in the
   track so a -33.333% translate seamlessly loops the content.
========================================================== */
.cv-marquee {
  width: 100%;
  overflow: hidden;
  /* Soft fade at left/right so items appear/disappear gracefully */
  -webkit-mask-image: linear-gradient(to right, transparent 0%, black 6%, black 94%, transparent 100%);
          mask-image: linear-gradient(to right, transparent 0%, black 6%, black 94%, transparent 100%);
}
body.cv-edit-mode .cv-marquee { display: none; }

.cv-marquee-track {
  display: flex;
  gap: 0.75rem;
  width: max-content;
  animation: cv-marquee-scroll 50s linear infinite;
  will-change: transform;
}
.cv-marquee:hover .cv-marquee-track { animation-play-state: paused; }

@keyframes cv-marquee-scroll {
  from { transform: translateX(0); }
  to   { transform: translateX(-33.3333%); }
}

@media (prefers-reduced-motion: reduce) {
  .cv-marquee-track { animation: none; }
}

.cv-marquee-item {
  flex: 0 0 auto;
  /* Explicit width derived from height × 16:9 so layout is stable even before
     the media reports intrinsic dimensions (loading=lazy delays that). */
  width: 356px;
  height: 200px;
  aspect-ratio: 16/9;
  border-radius: 10px;
  overflow: hidden;
  background: #0d0d0d;
  border: 1px solid rgba(245,236,217,0.08);
}
.cv-marquee-item img,
.cv-marquee-item video {
  width: 100%;
  height: 100%;
  display: block;
  object-fit: cover;
  /* Disable pointer events so even an accidental click is silent */
  pointer-events: none;
  user-select: none;
}

/* ==========================================================
   LIGHTBOX (read-mode media enlarged)
========================================================== */
.cv-lightbox {
  position: fixed; inset: 0;
  background: rgba(0,0,0,0.92);
  z-index: 9999;
  display: flex; align-items: center; justify-content: center;
  padding: 4rem;
}
.cv-lightbox[hidden] { display: none; }

.cv-lightbox-stage {
  max-width: min(1100px, 92vw);
  max-height: 82vh;
  display: flex; align-items: center; justify-content: center;
}
.cv-lightbox-stage video,
.cv-lightbox-stage img {
  max-width: 100%;
  max-height: 82vh;
  object-fit: contain;
  border-radius: 6px;
  background: #000;
}

.cv-lightbox-caption {
  position: fixed; bottom: 2rem; left: 50%;
  transform: translateX(-50%);
  color: var(--cream);
  font-size: 0.85rem;
  font-weight: 500;
  max-width: 80vw;
  text-align: center;
  background: rgba(0,0,0,0.55);
  backdrop-filter: blur(8px);
  padding: 0.5rem 1rem;
  border-radius: 999px;
}

.cv-lightbox-close,
.cv-lightbox-nav {
  position: fixed;
  background: rgba(0,0,0,0.55);
  backdrop-filter: blur(8px);
  border: 1px solid rgba(245,236,217,0.18);
  color: var(--cream);
  width: 44px; height: 44px;
  border-radius: 50%;
  font-size: 1.2rem;
  font-family: var(--font);
  cursor: pointer;
  display: inline-flex; align-items: center; justify-content: center;
  padding: 0;
  transition: background 120ms ease, border-color 120ms ease;
}
.cv-lightbox-close { top: 1rem; right: 1rem; }
.cv-lightbox-prev  { left: 1rem; top: 50%; transform: translateY(-50%); }
.cv-lightbox-next  { right: 1rem; top: 50%; transform: translateY(-50%); }
.cv-lightbox-close:hover,
.cv-lightbox-nav:hover {
  background: rgba(245,236,217,0.16);
  border-color: var(--cream);
}

/* ==========================================================
   SCALE SIGNALS (At a glance)
   Three small inline-editable fields on the case study view.
========================================================== */
.cv-scale-section { /* container */ }
.cv-scale-grid {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 0.85rem;
}
@media (max-width: 720px) {
  .cv-scale-grid { grid-template-columns: 1fr; }
}
.cv-scale-field { display: flex; flex-direction: column; gap: 0.35rem; min-width: 0; }
.cv-scale-field label {
  font-size: 0.68rem;
  font-weight: 700;
  letter-spacing: 0.14em;
  text-transform: uppercase;
  color: var(--cream-dim);
}
.cv-scale-field .cv-editable {
  font-size: 0.95rem;
  font-weight: 600;
  color: var(--cream);
  min-height: 1.4em;
}
.cv-scale-field .cv-editable:empty::before {
  content: attr(data-placeholder);
  color: var(--text-dim);
  font-style: italic;
  font-weight: 500;
}
/* Hide empty scale fields in read mode so the section doesn't show ghost labels */
body:not(.cv-edit-mode) .cv-scale-field:has(.cv-editable:empty) { display: none; }
/* If every field is empty in read mode, hide the whole section */
body:not(.cv-edit-mode) .cv-scale-section:not(:has(.cv-scale-field:not(:has(.cv-editable:empty)))) {
  display: none;
}

/* ==========================================================
   EXPORT DECK — between-case-study divider
========================================================== */
.cv-export-divider {
  border: none;
  height: 1px;
  /* Breathing room so each case study reads as its own panel — combines
     with the slide's own 3rem padding for ~11rem of black between cases. */
  margin: 4rem 0;
  background: linear-gradient(
    to right,
    transparent 0%,
    var(--border-strong) 18%,
    var(--border-strong) 82%,
    transparent 100%
  );
}
/* Suppress in presenter mode so scroll-snap stays clean section-to-section. */
body.cv-presenter-mode .cv-export-divider { display: none; }

/* ==========================================================
   CLIENT SHARE MODE (export deck via signed share token)
   Strips the team-only chrome so clients can't navigate elsewhere.
========================================================== */
body.cv-share-mode .cv-logo { cursor: default; pointer-events: none; }
body.cv-share-mode #copyLinkBtn { display: none; }

/* ==========================================================
   PRESENTER MODE (export deck)
   Triggered by clicking "Present" or pressing P. Each top-level
   section in the deck becomes one full-viewport slide; arrow keys
   navigate. Inspired by WRAP's presenter mode.
========================================================== */
.cv-presenter-controls {
  position: fixed;
  bottom: 1.5rem; right: 1.5rem;
  z-index: 9999;
  display: none;
  align-items: center;
  gap: 0.5rem;
  background: rgba(0,0,0,0.72);
  backdrop-filter: blur(10px);
  -webkit-backdrop-filter: blur(10px);
  border: 1px solid rgba(245,236,217,0.18);
  border-radius: 999px;
  padding: 0.5rem 0.75rem;
  box-shadow: 0 6px 24px rgba(0,0,0,0.45);
}
.cv-presenter-btn {
  background: transparent;
  border: 1px solid rgba(245,236,217,0.2);
  color: var(--cream);
  width: 38px; height: 38px;
  border-radius: 50%;
  cursor: pointer;
  display: inline-flex; align-items: center; justify-content: center;
  font-size: 1rem;
  font-family: var(--font);
  font-weight: 600;
  padding: 0;
  transition: background 120ms ease, border-color 120ms ease;
}
.cv-presenter-btn:hover {
  background: rgba(245,236,217,0.14);
  border-color: var(--cream);
}
.cv-presenter-counter {
  font-size: 0.78rem;
  color: var(--cream-soft);
  font-weight: 600;
  letter-spacing: 0.06em;
  padding: 0 0.6rem;
  min-width: 60px;
  text-align: center;
  font-variant-numeric: tabular-nums;
}
.cv-presenter-exit {
  border-color: rgba(255,115,115,0.28);
  margin-left: 0.25rem;
  font-size: 1.15rem;
}
.cv-presenter-exit:hover {
  background: rgba(255,115,115,0.18);
  border-color: #ff9999;
  color: #ff9999;
}

/* Toolbar fades into the background — hover restores it for a quick
   action without leaving presenter mode. */
body.cv-presenter-mode .cv-header,
body.cv-presenter-mode .cv-barswrap--export {
  opacity: 0.12;
  transition: opacity 220ms ease;
}
body.cv-presenter-mode .cv-header:hover,
body.cv-presenter-mode .cv-barswrap--export:hover { opacity: 1; }

/* Every top-level section becomes one slide: a full-viewport panel,
   content vertically centered, page-break behavior unchanged for print. */
body.cv-presenter-mode .cv-export-deck > section {
  min-height: 100vh;
  display: flex;
  flex-direction: column;
  justify-content: center;
  box-sizing: border-box;
  border-bottom: none;
  scroll-snap-align: start;
}
body.cv-presenter-mode .cv-export-deck {
  scroll-snap-type: y mandatory;
}
/* About slides already use display:flex from .cv-bg-section to vertically
   center their content — don't override the display here, just ensure
   the slide fills the viewport so presenter scroll-snap works. */
body.cv-presenter-mode .cv-export-deck > .cv-export-about-slide {
  min-height: 100vh;
}

/* ==========================================================
   EXPORT VIEW
========================================================== */
/* The export view wears the same profile bar as every other page, with the
   deck's own controls in a back bar underneath — the treatment About, Saved
   sections and Archive already use. Tighter top padding than .cv-barswrap
   because there is no H1 here; the deck's cover slide is the title. */
.cv-barswrap--export { padding: 1.1rem 2.5rem 0; }
/* The bar matches every other page, but it does NOT stay put here: a deck is
   read slide by slide, and a sticky bar covers the top 70px of every slide —
   enough to swallow a slide's eyebrow. It scrolls away with the first slide;
   Print and Present are one scroll to the top. */
body.cv-page-export .cv-header { position: static; }
.cv-barswrap--export .cv-bars { margin-bottom: 0; }
.cv-export-actions { display: flex; gap: 0.5rem; align-items: center; flex-wrap: wrap; }
/* Client share links: no route back into the dashboard. */
body.cv-share-mode .cv-barswrap--export .cv-back { display: none; }

.cv-export-deck {
  background: var(--bg);
}
.cv-export-cover {
  min-height: 80vh;
  display: flex; flex-direction: column; align-items: center; justify-content: center;
  padding: 4rem 3rem;
  text-align: center;
  border-bottom: 1px solid var(--border);
}
.cv-export-cover h1 {
  font-size: clamp(2.4rem, 6vw, 4.8rem);
  font-weight: 900; letter-spacing: -0.02em; line-height: 1;
  color: var(--cream);
}
.cv-export-cover h1 em { font-style: italic; color: var(--cream-soft); }
.cv-export-cover p { margin-top: 1.4rem; color: var(--cream-soft); font-size: 1rem; max-width: 36rem; line-height: 1.5; }
.cv-export-cover .cv-export-meta {
  margin-top: 2rem;
  font-size: 0.76rem; letter-spacing: 0.16em; text-transform: uppercase; color: var(--cream-dim);
}
.cv-export-slide {
  padding: 3rem;
  border-bottom: 1px solid var(--border);
  page-break-after: always;
  break-after: page;
}
.cv-export-slide:last-child { border-bottom: none; }

/* Scale signals row on the case study export slide. Sits just below the
   capability tags / above the body grid. Renders only when populated. */
.cv-export-scale {
  display: flex;
  flex-wrap: wrap;
  gap: 2rem;
  margin: 1rem 0 1.5rem 0;
  padding: 0.85rem 1rem;
  border-top: 1px solid var(--border);
  border-bottom: 1px solid var(--border);
}
.cv-export-scale-item {
  display: flex; flex-direction: column; gap: 0.18rem;
}
.cv-export-scale-label {
  font-size: 0.6rem;
  font-weight: 700;
  letter-spacing: 0.18em;
  text-transform: uppercase;
  color: var(--cream-dim);
}
.cv-export-scale-value {
  font-size: 1rem;
  font-weight: 700;
  color: var(--cream);
}

/* Secondary-media gallery slide (one per case study, only when 2+ media).
   On screen: items auto-scroll horizontally (matches view.js marquee).
   On print: animation paused + items wrap into rows so every photo prints. */
.cv-export-gallery {
  padding: 3rem;
}
.cv-export-gallery-title {
  font-size: clamp(1.6rem, 3vw, 2.4rem);
  font-family: var(--display);
  /* Chalet ships one upright 400. Without this the browser fakes any italic or
     bold asked of it, which is a slanted smear, not the typeface. */
  font-synthesis: none;
  font-weight: 400;
  letter-spacing: -0.015em;
  color: var(--cream);
  margin: 0.25rem 0 1.5rem 0;
}
.cv-export-gallery-title .pipe { color: var(--cream-dim); margin: 0 0.35em; font-weight: 400; }
.cv-export-gallery-sub {
  font-weight: 400;
  font-style: normal;
  color: var(--cream-soft);
  font-size: 0.65em;
}

.cv-export-marquee {
  width: 100%;
  overflow: hidden;
  -webkit-mask-image: linear-gradient(to right, transparent 0%, black 5%, black 95%, transparent 100%);
          mask-image: linear-gradient(to right, transparent 0%, black 5%, black 95%, transparent 100%);
}
.cv-export-marquee-track {
  display: flex;
  gap: 1rem;
  width: max-content;
  align-items: flex-start;
  /* Two copies of the set in the track, so loop at -50% (the library marquee
     uses three copies and -33.33%). */
  animation: cv-export-marquee-scroll 60s linear infinite;
  will-change: transform;
}
@keyframes cv-export-marquee-scroll {
  from { transform: translateX(0); }
  to   { transform: translateX(-50%); }
}
.cv-export-marquee:hover .cv-export-marquee-track { animation-play-state: paused; }
/* Toggled by the export page's viewport observer — no reason to composite a
   marquee the viewer can't see. */
.cv-export-marquee.is-offscreen .cv-export-marquee-track { animation-play-state: paused; }

.cv-export-marquee-item {
  flex: 0 0 auto;
  margin: 0;
  display: flex; flex-direction: column; gap: 0.5rem;
  width: 498px; /* 280px tall × 16:9 — explicit so layout is stable before media loads */
}
.cv-export-marquee-frame {
  width: 100%;
  height: 280px;
  aspect-ratio: 16/9;
  background: #0d0d0d;
  border-radius: 8px;
  overflow: hidden;
  border: 1px solid var(--border);
}
.cv-export-marquee-frame video,
.cv-export-marquee-frame img {
  width: 100%; height: 100%;
  object-fit: cover;
  display: block;
  pointer-events: none;
  user-select: none;
}
.cv-export-marquee-item figcaption {
  font-size: 0.78rem;
  color: var(--cream-soft);
  font-weight: 500;
  text-align: center;
}

@media (prefers-reduced-motion: reduce) {
  .cv-export-marquee-track { animation: none; }
}

@media print {
  /* For print, freeze the marquee and re-flow items as a wrapping grid so
     every photo lands on paper instead of just the snapshot frame. The
     seamless-loop duplicate set is hidden so each photo prints once. */
  .cv-export-marquee {
    overflow: visible;
    -webkit-mask-image: none; mask-image: none;
  }
  .cv-export-marquee-track {
    animation: none;
    flex-wrap: wrap;
    width: 100%;
    justify-content: flex-start;
  }
  .cv-export-marquee-item { max-width: 32%; }
  .cv-export-marquee-item.is-dup { display: none; }
  .cv-export-marquee-frame { height: auto; aspect-ratio: 16/9; }
  .cv-export-marquee-frame img,
  .cv-export-marquee-frame video {
    width: 100%; height: 100%;
  }
}

/* About-page slides embedded in the export deck: full-bleed,
   full-height versions of the live .cv-bg-section. */
.cv-export-about-slide {
  min-height: clamp(560px, 90vh, 900px);
  padding: 4rem 3rem;
  page-break-after: always;
  break-after: page;
}
.cv-export-about-slide:last-of-type { border-bottom: 1px solid var(--border); }

/* ==========================================================
   LOGOS LIBRARY
========================================================== */
.cv-logos-grid {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(180px, 1fr));
  gap: 1rem;
}

.lg-card {
  position: relative;
  background: var(--bg-card);
  border: 1px solid var(--border);
  border-radius: var(--radius);
  /* Don't clip the menu popover. The frame has its own border-radius
     + overflow:hidden so logo edges still clip cleanly. */
  display: flex;
  flex-direction: column;
  transition: transform 0.2s, border-color 0.2s, box-shadow 0.2s;
}
.lg-card:hover { transform: translateY(-2px); border-color: rgba(245,236,217,0.22); box-shadow: 0 10px 30px rgba(0,0,0,0.35); }
.lg-card.is-selected { border-color: var(--cream); box-shadow: 0 0 0 2px rgba(245,236,217,0.4) inset, 0 10px 30px rgba(0,0,0,0.35); }

.lg-card-frame {
  aspect-ratio: 5 / 3;
  background: var(--bg);
  border-top-left-radius: var(--radius);
  border-top-right-radius: var(--radius);
  display: flex;
  align-items: center;
  justify-content: center;
  position: relative;
  cursor: pointer;
  overflow: hidden;
}
.lg-card-frame img {
  max-width: 70%;
  max-height: 70%;
  object-fit: contain;
  /* Force every uploaded logo to render as a flat white silhouette so the
     library has a consistent "trusted by" wordmark look. Works on SVG and
     PNG-with-alpha; opaque-background JPGs will read as full white blocks
     (and we surface a hint in the upload UI to use SVG/PNG with alpha). */
  filter: brightness(0) invert(1);
}
.lg-card-frame[data-empty="true"] { background: var(--bg-elev); }
.lg-card-empty {
  font-size: 0.74rem;
  font-weight: 700;
  letter-spacing: 0.12em;
  text-transform: uppercase;
  color: var(--text-dim);
  text-align: center;
  padding: 0.6rem;
}
.lg-card-frame:hover .lg-card-empty { color: var(--cream-soft); }

.lg-card-info {
  display: flex;
  align-items: center;
  gap: 0.5rem;
  padding: 0.65rem 0.8rem;
  border-top: 1px solid var(--border);
}
.lg-card-name {
  flex: 1;
  background: transparent;
  border: 1px solid transparent;
  border-radius: 6px;
  font-family: var(--font);
  font-size: 0.82rem;
  font-weight: 600;
  color: var(--cream);
  padding: 0.25rem 0.4rem;
  outline: none;
  min-width: 0;
}
.lg-card-name:hover { border-color: rgba(245,236,217,0.18); }
.lg-card-name:focus { border-color: var(--cream); background: rgba(245,236,217,0.04); }
.lg-card-menu-wrap {
  position: relative;
  display: flex;
}
.lg-card-menu {
  background: transparent;
  border: 1px solid var(--border);
  border-radius: 6px;
  width: 28px; height: 28px;
  display: flex; align-items: center; justify-content: center;
  color: var(--text-muted);
  cursor: pointer;
}
.lg-card-menu:hover { color: var(--cream); border-color: var(--border-strong); }
.lg-card-menu-pop {
  display: none;
  position: absolute;
  right: 0; top: calc(100% + 0.3rem);
  background: var(--bg-elev);
  border: 1px solid var(--border);
  border-radius: 8px;
  padding: 0.3rem;
  z-index: 50;
  min-width: 140px;
  box-shadow: 0 12px 30px rgba(0,0,0,0.5);
}
.lg-card-menu-pop.open { display: block; }
.lg-card-menu-pop button {
  display: block; width: 100%;
  background: transparent; border: none;
  padding: 0.55rem 0.75rem;
  border-radius: 6px;
  text-align: left;
  font-family: var(--font);
  font-size: 0.84rem;
  font-weight: 600;
  color: var(--cream);
  cursor: pointer;
}
.lg-card-menu-pop button:hover { background: rgba(245,236,217,0.10); color: var(--cream); }
.lg-card-menu-pop button.danger { color: #ff9b9b; }
.lg-card-menu-pop button.danger:hover { background: rgba(255, 68, 68, 0.18); color: #ff7373; }

/* Stop the hover-transform feedback loop when the popover is open. */
.lg-card:has(.lg-card-menu-pop.open):hover { transform: none; }

.lg-card-check {
  position: absolute;
  top: 0.55rem; left: 0.55rem;
  width: 24px; height: 24px;
  border-radius: 6px;
  background: rgba(0,0,0,0.55);
  backdrop-filter: blur(6px);
  border: 1px solid rgba(255,255,255,0.18);
  display: flex; align-items: center; justify-content: center;
  cursor: pointer;
  z-index: 4;
  opacity: 0;
  transition: opacity 0.15s, background 0.15s;
}
.lg-card:hover .lg-card-check, .lg-card.is-selected .lg-card-check { opacity: 1; }
.lg-card-check.is-checked { background: var(--cream); border-color: var(--cream); }
.lg-card-check.is-checked svg { color: #000; }
.lg-card-check svg { color: transparent; }

.lg-card-add {
  border-style: dashed;
  cursor: pointer;
  align-items: center;
  justify-content: center;
  text-align: center;
  display: flex;
  min-height: 100%;
}
.lg-card-add:hover { border-color: var(--cream); background: rgba(245,236,217,0.04); }
.lg-card-add-inner {
  padding: 1.5rem;
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 0.5rem;
  color: var(--cream-dim);
  font-weight: 600;
  font-size: 0.8rem;
}
.lg-card-add:hover .lg-card-add-inner { color: var(--cream); }

/* ==========================================================
   CONTEXT ACTION BAR — top-of-page actions for a focused card
========================================================== */
.cv-card-action-bar {
  /* Lives in the content flow directly below the (cream) selection bar —
     dark gray so the two bars never read as the same thing. Sticky so it
     stays reachable while scrolling a long grid. */
  position: sticky;
  top: 68px; /* clears the .cv-header when stuck */
  z-index: 90;
  display: none;
  align-items: center;
  gap: 0.85rem;
  margin-bottom: 1rem;
  padding: 0.75rem 1rem 0.75rem 0.85rem;
  background: var(--bg-elev);
  color: var(--cream);
  border: 1px solid var(--border);
  border-radius: var(--radius);
  box-shadow: 0 10px 30px rgba(0,0,0,0.55);
  animation: cv-cab-in 0.18s ease;
}
.cv-card-action-bar.active { display: flex; }
/* When the oat selection bar is active it sticks at 68px and is 56px tall
   (one row at desktop widths) — park the action bar right beneath it so the
   two stack instead of overlapping while stuck. */
.cv-selection-bar.active + .cv-card-action-bar { top: calc(68px + 56px + 0.75rem); }
@keyframes cv-cab-in {
  from { opacity: 0; transform: translateY(-6px); }
  to   { opacity: 1; transform: translateY(0); }
}
.cv-cab-thumb {
  width: 44px; height: 44px;
  border-radius: 8px;
  background: #000;
  border: 1px solid var(--border);
  display: flex; align-items: center; justify-content: center;
  flex-shrink: 0;
  overflow: hidden;
}
.cv-cab-thumb img {
  max-width: 80%; max-height: 80%;
  object-fit: contain;
  filter: brightness(0) invert(1);
}
.cv-cab-thumb-fallback {
  font-weight: 900;
  font-size: 0.95rem;
  letter-spacing: -0.02em;
  color: var(--cream);
}
.cv-cab-text { display: flex; flex-direction: column; min-width: 0; flex: 1; }
.cv-cab-eyebrow {
  font-size: 0.66rem;
  font-weight: 700;
  letter-spacing: 0.14em;
  text-transform: uppercase;
  color: var(--cream-dim);
}
.cv-cab-name {
  font-size: 1rem;
  font-weight: 800;
  letter-spacing: -0.01em;
  line-height: 1.15;
  color: var(--cream);
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}
.cv-cab-actions { display: flex; gap: 0.4rem; }
.cv-cab-btn {
  background: var(--cream);
  color: #000;
  border: 1px solid var(--cream);
  border-radius: 8px;
  padding: 0.5rem 1rem;
  font-family: var(--font);
  font-size: 0.8rem;
  font-weight: 700;
  cursor: pointer;
  transition: background 0.15s, color 0.15s, border-color 0.15s;
}
.cv-cab-btn:hover { background: #fff; border-color: #fff; }
.cv-cab-btn.secondary {
  background: transparent;
  color: var(--cream);
  border-color: rgba(245,236,217,0.25);
}
.cv-cab-btn.secondary:hover { background: rgba(245,236,217,0.08); border-color: var(--cream); }
.cv-cab-btn.danger {
  background: transparent;
  color: #ff9b9b;
  border-color: rgba(255, 115, 115, 0.35);
}
.cv-cab-btn.danger:hover { background: rgba(255, 68, 68, 0.14); border-color: #ff7373; color: #ff7373; }
.cv-cab-close {
  background: transparent;
  border: 1px solid transparent;
  width: 32px; height: 32px;
  border-radius: 8px;
  color: var(--cream-dim);
  cursor: pointer;
  font-size: 1.2rem;
  line-height: 1;
}
.cv-cab-close:hover { background: rgba(245,236,217,0.08); color: var(--cream); }

/* When the action bar is active, lift the cards underneath so its
   focused card has a visible ring. */
.cs-card.is-focused, .lg-card.is-focused {
  border-color: var(--cream);
  box-shadow: 0 0 0 2px var(--cream) inset, 0 14px 40px rgba(0,0,0,0.45);
}

/* ==========================================================
   MODAL — generic shell used by logo picker etc.
========================================================== */
.cv-modal-backdrop {
  position: fixed; inset: 0;
  background: rgba(0,0,0,0.7);
  backdrop-filter: blur(8px);
  -webkit-backdrop-filter: blur(8px);
  z-index: 200;
  display: none;
  align-items: center; justify-content: center;
  padding: 2rem;
}
.cv-modal-backdrop.open { display: flex; }
.cv-modal {
  background: var(--bg-card);
  border: 1px solid var(--border);
  border-radius: var(--radius-lg);
  width: 100%;
  max-width: 1080px;
  max-height: 86vh;
  display: flex;
  flex-direction: column;
  overflow: hidden;
  box-shadow: 0 30px 80px rgba(0,0,0,0.6);
}
.cv-modal-head {
  display: flex; align-items: center; justify-content: space-between; gap: 1rem;
  padding: 1.1rem 1.5rem;
  border-bottom: 1px solid var(--border);
}
.cv-modal-title {
  font-size: 1.05rem;
  font-weight: 800;
  letter-spacing: -0.01em;
  color: var(--cream);
}
.cv-modal-sub {
  font-size: 0.78rem;
  color: var(--text-muted);
  margin-top: 0.2rem;
}
.cv-modal-close {
  background: transparent;
  border: 1px solid var(--border);
  color: var(--text-muted);
  width: 32px; height: 32px;
  border-radius: 8px;
  cursor: pointer;
  font-size: 1rem;
}
.cv-modal-close:hover { border-color: var(--cream); color: var(--cream); }
.cv-modal-body {
  padding: 1.25rem 1.5rem;
  overflow: auto;
  flex: 1;
}
.cv-modal-foot {
  display: flex; align-items: center; justify-content: space-between; gap: 1rem;
  padding: 1rem 1.5rem;
  border-top: 1px solid var(--border);
}
.cv-modal-foot .left { color: var(--text-muted); font-size: 0.84rem; }
.cv-modal-foot .right { display: flex; gap: 0.5rem; }

/* Mini logo picker grid (re-uses .lg-card styles for consistency) */
.cv-modal .cv-logos-grid { gap: 0.7rem; grid-template-columns: repeat(auto-fill, minmax(150px, 1fr)); }

/* Reorder-selection modal list */
.cv-reorder-list {
  list-style: none;
  margin: 0; padding: 0;
  display: flex; flex-direction: column;
  gap: 0.5rem;
}
.cv-reorder-row {
  display: flex; align-items: center; gap: 0.85rem;
  padding: 0.55rem 0.85rem;
  background: var(--bg-card);
  border: 1px solid var(--border);
  border-radius: 10px;
  cursor: grab;
  user-select: none;
}
.cv-reorder-row.dragging { opacity: 0.4; cursor: grabbing; }
.cv-reorder-num {
  min-width: 1.6em; text-align: center;
  font-weight: 700; font-size: 0.85rem;
  color: var(--cream-soft);
}
.cv-reorder-thumb {
  flex: none; width: 56px; height: 34px;
  border-radius: 6px; overflow: hidden;
  background: rgba(245, 236, 217, 0.06);
}
.cv-reorder-thumb img { width: 100%; height: 100%; object-fit: cover; display: block; }
.cv-reorder-name { font-weight: 700; white-space: nowrap; }
.cv-reorder-headline {
  flex: 1; min-width: 0;
  overflow: hidden; text-overflow: ellipsis; white-space: nowrap;
  color: var(--text-muted); font-size: 0.85rem;
}
.cv-reorder-arrows { display: flex; gap: 0.3rem; }
.cv-reorder-arrows button {
  width: 28px; height: 28px;
  background: transparent;
  border: 1px solid var(--border);
  border-radius: 6px;
  color: var(--cream);
  cursor: pointer;
  font-size: 0.85rem;
}
.cv-reorder-arrows button:hover:not(:disabled) { border-color: var(--cream); }
.cv-reorder-arrows button:disabled { opacity: 0.25; cursor: default; }

/* ==========================================================
   DECK TRAY — the deck being built, docked to the bottom of the
   dashboard. One surface: the composition as ordered slide chips,
   an Add menu, name + Save + Export, settings behind ⋯.
========================================================== */
/* The section tray sits in the page, directly under the bars — the slide
   navigator of a deck editor. Folded by default; New section (or a first tick)
   unfolds it. Deliberately at least twice the height of a bar so it reads as a
   workspace rather than another strip of controls. */
.cv-tray {
  position: relative;
  z-index: 90;
  display: none;
  flex-direction: column;
  align-items: stretch;
  gap: 0.9rem;
  min-height: 104px;
  margin-bottom: 0.5rem;
  padding: 1rem 1.25rem 0.9rem;
  background: rgba(20,20,20,0.92);
  border: 1px solid var(--border-strong);
  border-radius: var(--radius-lg);
  animation: cv-tray-in 0.18s ease;
}
.cv-tray.active { display: flex; }
@keyframes cv-tray-in { from { opacity: 0; transform: translateY(-6px); } to { opacity: 1; transform: none; } }
/* Resting tray: present but quiet, so the workspace is visible before anything
   is in it. Only the label and Add survive; name/Save/Export arrive with the
   first slide. */

.cv-tray-hint { margin: 0; align-self: center; font-size: 0.82rem; color: var(--text-dim); }
.cv-tray.is-empty .cv-tray-strip { align-items: center; min-height: 63px; }
.cv-tray.is-empty .cv-tray-chips { flex: none; min-width: 0; padding: 0; }
.cv-tray.is-empty .cv-tray-strip { align-items: center; min-height: 63px; }


.cv-tray-label { flex: none; display: flex; flex-direction: column; gap: 0.15rem; margin-right: 0.35rem; }
.cv-tray-eyebrow { font-size: 0.62rem; font-weight: 700; letter-spacing: 0.16em; text-transform: uppercase; color: var(--text-dim); }
.cv-tray-count { font-size: 0.82rem; font-weight: 700; color: var(--cream); letter-spacing: -0.01em; }

.cv-tray-strip { width: 100%; min-width: 0; display: flex; align-items: flex-start; gap: 0.85rem; }
.cv-tray-chips {
  flex: 1 1 auto; min-width: 0;
  display: flex; align-items: flex-start; gap: 0.85rem;
  overflow-x: auto; overflow-y: visible;
  padding: 0.4rem 0.4rem 0.25rem;
  margin: -0.4rem -0.4rem -0.25rem;
  scrollbar-width: thin;
  scrollbar-color: rgba(245,236,217,0.25) transparent;
}
/* Past seven slides the chips tighten up so a typical deck still fits without scrolling. */
.cv-tray.is-dense .cv-tray-chips { gap: 0.6rem; }
.cv-tray.is-dense .cv-tray-chip, .cv-tray.is-dense .cv-tray-thumb, .cv-tray.is-dense .cv-tray-caption { width: 80px; max-width: 80px; }
.cv-tray.is-dense .cv-tray-thumb { height: 45px; }
.cv-tray.is-dense .cv-tray-thumb-intro { font-size: 7.5px; }

.cv-tray-chip {
  flex: none;
  display: flex; flex-direction: column; gap: 0.35rem; align-items: flex-start;
  cursor: grab; user-select: none;
  width: 112px;
}
.cv-tray-chip.dragging { opacity: 0.35; cursor: grabbing; }
.cv-tray-chip.drop-before .cv-tray-thumb { box-shadow: -6px 0 0 -2px var(--cream); }
.cv-tray-thumb {
  position: relative;
  width: 112px; height: 63px;
  border-radius: 8px;
  background: var(--bg);
  border: 1px solid var(--border-strong);
  display: flex; align-items: center; justify-content: center;
  overflow: visible;
  transition: border-color 0.15s;
}
.cv-tray-chip:hover .cv-tray-thumb { border-color: var(--cream); }
.cv-tray-thumb-inner { position: absolute; inset: 0; border-radius: 7px; overflow: hidden; display: flex; align-items: center; justify-content: center; }
.cv-tray-thumb-inner img, .cv-tray-thumb-inner video { width: 100%; height: 100%; object-fit: cover; display: block; }
.cv-tray-thumb-initial { font-size: 15px; font-weight: 900; letter-spacing: -0.02em; color: var(--cream); }
.cv-tray-thumb-intro { font-size: 8.5px; font-weight: 800; letter-spacing: 0.14em; text-transform: uppercase; color: var(--cream-soft); text-align: center; line-height: 1.3; padding: 0 8px; }
.cv-tray-thumb-num { position: absolute; left: 6px; top: 5px; font-size: 9px; font-weight: 800; color: var(--cream-dim); letter-spacing: 0.04em; z-index: 2; }
.cv-tray-faces { display: flex; align-items: center; }
.cv-tray-faces span, .cv-tray-faces img {
  width: 20px; height: 20px; border-radius: 999px; object-fit: cover;
  background: rgba(245,236,217,0.18); border: 1.5px solid var(--bg-card);
  display: flex; align-items: center; justify-content: center;
  font-size: 9px; font-weight: 800; color: var(--cream);
}
.cv-tray-faces > * + * { margin-left: -6px; }
.cv-tray-minilogos { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 4px; width: 62px; }
.cv-tray-minilogos span { height: 12px; border-radius: 2px; background: rgba(245,236,217,0.4); }
.cv-tray-minilogos span:nth-child(2n) { background: rgba(245,236,217,0.28); }
.cv-tray-minilogos img { width: 100%; height: 12px; object-fit: contain; display: block; filter: brightness(0) invert(0.92); opacity: 0.9; }
.cv-tray-remove {
  position: absolute; top: -6px; right: -6px; z-index: 3;
  width: 18px; height: 18px; border-radius: 999px;
  background: var(--cream); color: #000; border: none;
  display: none; align-items: center; justify-content: center;
  cursor: pointer; box-shadow: 0 2px 8px rgba(0,0,0,0.5);
}
.cv-tray-chip:hover .cv-tray-remove { display: flex; }
.cv-tray-caption {
  font-size: 0.66rem; font-weight: 600; color: var(--text-muted);
  white-space: nowrap; overflow: hidden; text-overflow: ellipsis; max-width: 112px;
}
.cv-tray-chip:hover .cv-tray-caption { color: var(--cream); }

.cv-tray-add-wrap { position: relative; flex: none; }
/* Row one of the tray. Everything on it is 36px so the controls sit on one
   line; Save/Export/⋯/fold are pushed to the end by .cv-tray-bar-end. */
.cv-tray-bar { display: flex; align-items: center; gap: 0.55rem; width: 100%; }
.cv-tray-bar-end { margin-left: auto; display: flex; align-items: center; gap: 0.5rem; flex: none; }

.cv-tray-pick, .cv-tray-add {
  display: inline-flex; align-items: center; gap: 0.45rem;
  height: 36px; padding: 0 0.9rem; white-space: nowrap; border-radius: 8px;
  border: 1px solid var(--border); background: transparent;
  color: var(--text-muted); font-family: var(--font); font-size: 0.78rem; font-weight: 600;
  cursor: pointer; transition: all 0.15s; flex: none;
}
.cv-tray-pick:hover { border-color: var(--cream); color: var(--cream); background: rgba(245,236,217,0.06); }
/* Reads as a dropdown, because it opens one. */
.cv-tray-add svg { opacity: 0.6; transition: transform 0.15s; }
.cv-tray-add.is-open svg { transform: rotate(180deg); }
.cv-tray-add:hover, .cv-tray-add.is-open { border-color: var(--cream); color: var(--cream); background: rgba(245,236,217,0.08); }

.cv-tray-menu {
  position: absolute; left: 0; top: calc(100% + 0.6rem);
  width: 260px; max-height: 60vh; overflow-y: auto;
  background: var(--bg-elev);
  border: 1px solid var(--border-strong);
  border-radius: 12px; padding: 0.35rem;
  box-shadow: 0 18px 50px rgba(0,0,0,0.65);
  display: flex; flex-direction: column; gap: 2px;
  z-index: 96;
}
.cv-tray-menu[hidden] { display: none; }
.cv-tray-menu--right { left: auto; right: 0; width: 230px; }
.cv-tray-menu-eyebrow { font-size: 0.62rem; font-weight: 700; letter-spacing: 0.16em; text-transform: uppercase; color: var(--text-dim); padding: 0.5rem 0.75rem 0.25rem; }
.cv-tray-menu button {
  display: flex; flex-direction: column; gap: 2px; width: 100%;
  text-align: left; background: transparent; border: none;
  padding: 0.6rem 0.75rem; border-radius: 8px;
  font-family: var(--font); color: var(--cream); cursor: pointer;
}
.cv-tray-menu button strong { font-size: 0.8rem; font-weight: 700; }
.cv-tray-menu button span { font-size: 0.7rem; color: var(--text-muted); }
.cv-tray-menu button:hover { background: rgba(245,236,217,0.10); }
.cv-tray-menu button:disabled { opacity: 0.35; cursor: default; }
.cv-tray-menu button.danger strong { color: #ff9b9b; }
.cv-tray-menu button.danger:hover { background: rgba(255,68,68,0.14); }
.cv-tray-menu-sep { height: 1px; background: var(--border); margin: 0.25rem 0.5rem; }
.cv-tray-switch {
  display: flex; align-items: center; justify-content: space-between;
  padding: 0.55rem 0.75rem; border-radius: 8px; cursor: pointer;
  font-size: 0.8rem; font-weight: 600; color: var(--cream);
}
.cv-tray-switch:hover { background: rgba(245,236,217,0.06); }
.cv-tray-switch input { display: none; }
.cv-tray-switch i { position: relative; width: 28px; height: 16px; border-radius: 999px; background: rgba(255,255,255,0.14); transition: background 0.15s; }
.cv-tray-switch i::after { content: ''; position: absolute; left: 2px; top: 2px; width: 12px; height: 12px; border-radius: 999px; background: var(--cream-dim); transition: all 0.15s; }
.cv-tray-switch input:checked + i { background: var(--cream); }
.cv-tray-switch input:checked + i::after { left: 14px; background: #000; }


.cv-tray-name {
  height: 36px; padding: 0 0.75rem; min-width: 168px;
  border-radius: 8px; border: 1px solid var(--border); background: var(--bg);
  color: var(--cream); font-family: var(--font); font-size: 0.78rem; font-weight: 600; outline: none;
  transition: border-color 0.15s;
}
.cv-tray-name:focus { border-color: var(--border-strong); }
.cv-tray-name::placeholder { color: var(--text-dim); font-weight: 600; }
.cv-tray-save, .cv-tray-export, .cv-tray-more {
  height: 36px; padding: 0 1rem; border-radius: 8px;
  font-family: var(--font); font-size: 0.78rem; font-weight: 700; cursor: pointer;
  display: inline-flex; align-items: center; gap: 0.4rem; transition: all 0.15s;
}
.cv-tray-save { background: var(--accent); color: #000; border: 1px solid var(--accent); box-shadow: 0 4px 12px rgba(255,77,0,0.35); }
.cv-tray-save:hover { background: #ff6622; border-color: #ff6622; }
.cv-tray-save.is-saved { background: rgba(255,77,0,0.14); color: var(--accent); border-color: rgba(255,77,0,0.35); box-shadow: none; }
.cv-tray-save:disabled { opacity: 0.6; cursor: default; }
.cv-tray-export { background: var(--cream); color: #000; border: 1px solid var(--cream); font-weight: 600; }
.cv-tray-export:hover { background: #fff; border-color: #fff; }
.cv-tray-more-wrap { position: relative; }
.cv-tray-more { width: 36px; padding: 0; justify-content: center; background: transparent; border: 1px solid var(--border); color: var(--text-muted); }
.cv-tray-more:hover, .cv-tray-more.is-open { border-color: var(--cream); color: var(--cream); background: rgba(245,236,217,0.08); }
.cv-tray-fold {
  width: 32px; height: 32px; padding: 0;
  display: inline-flex; align-items: center; justify-content: center;
  background: transparent; border: none; border-radius: 8px;
  color: var(--text-dim); cursor: pointer; transition: color 0.15s, background 0.15s;
}
.cv-tray-fold:hover { color: var(--cream); background: rgba(255,255,255,0.05); }

/* Building the section (left) is a different act from naming and shipping it
   (right) — a hairline keeps Add from library away from Save. */


/* Pages you reach from the action bar carry a back link, not the full bars. */
.cv-bars--back { justify-content: space-between; }
.cv-back {
  display: inline-flex; align-items: center; gap: 0.4rem;
  font-size: 0.78rem; font-weight: 600; color: var(--text-muted);
  text-decoration: none; transition: color 0.15s;
}
.cv-back:hover { color: var(--cream); }

@media print { .cv-tray { display: none !important; } }

/* Arrange deck — every slide of the composition in one list. Rows reuse the
   reorder-row chrome; a small badge names the block type, and each row can be
   dropped from the deck. Below the list, an "add" strip offers the blocks not
   in the deck yet. */
.cv-block-badge {
  flex: none;
  font-size: 0.62rem; font-weight: 800; letter-spacing: 0.12em; text-transform: uppercase;
  padding: 0.22rem 0.5rem; border-radius: 999px;
  border: 1px solid var(--border);
  color: var(--text-muted);
}
.cv-block-badge[data-kind="case-study"] { color: var(--cream); border-color: rgba(245, 236, 217, 0.35); }
.cv-block-badge[data-kind="intro"]      { color: #d7b98a; border-color: rgba(215, 185, 138, 0.4); }
.cv-block-badge[data-kind="talent"]     { color: #9fd0c7; border-color: rgba(159, 208, 199, 0.4); }
.cv-block-badge[data-kind="logos"]      { color: #b7c3f0; border-color: rgba(183, 195, 240, 0.4); }
.cv-reorder-thumb.is-placeholder {
  display: flex; align-items: center; justify-content: center;
  font-size: 0.7rem; font-weight: 800; color: var(--cream-soft);
}
.cv-reorder-remove {
  flex: none; width: 28px; height: 28px;
  background: transparent; border: 1px solid transparent; border-radius: 6px;
  color: var(--text-muted); cursor: pointer; font-size: 1rem; line-height: 1;
}
.cv-reorder-remove:hover { color: var(--cream); border-color: var(--border); }
.cv-block-add {
  margin-top: 1rem; padding-top: 0.9rem;
  border-top: 1px dashed var(--border);
}
.cv-block-add-label {
  font-size: 0.7rem; font-weight: 800; letter-spacing: 0.14em; text-transform: uppercase;
  color: var(--text-muted); margin-bottom: 0.55rem;
}
.cv-block-add-list { display: flex; flex-wrap: wrap; gap: 0.4rem; }
.cv-block-add-list button {
  background: transparent; border: 1px dashed var(--border); border-radius: 999px;
  color: var(--cream); font-size: 0.8rem; font-weight: 600;
  padding: 0.35rem 0.75rem; cursor: pointer;
}
.cv-block-add-list button:hover { border-style: solid; border-color: var(--cream); }
.cv-block-add-list button[data-kind="talent"], .cv-block-add-list button[data-kind="logos"] { border-color: rgba(245, 236, 217, 0.35); }
.cv-reorder-empty { color: var(--text-muted); font-size: 0.9rem; padding: 0.5rem 0; }

/* ==========================================================
   SECTIONS PAGE
========================================================== */
.cv-sections-grid {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(320px, 1fr));
  gap: 1.25rem;
}
.sec-card {
  position: relative;
  display: flex;
  flex-direction: column;
  background: var(--bg-card);
  border: 1px solid var(--border);
  border-radius: var(--radius-lg);
  padding: 1.5rem 1.5rem 1.25rem;
  transition: border-color 0.2s, transform 0.2s, box-shadow 0.2s;
  min-height: 200px;
}
.sec-card:hover { border-color: rgba(245,236,217,0.22); transform: translateY(-3px); box-shadow: 0 14px 40px rgba(0,0,0,0.45); }
.sec-card-name {
  font-size: 1.25rem;
  font-weight: 800;
  letter-spacing: -0.01em;
  color: var(--cream);
  line-height: 1.15;
}
.sec-card-desc {
  margin-top: 0.5rem;
  font-size: 0.86rem;
  color: var(--text-muted);
  line-height: 1.45;
  flex: 1;
}
.sec-card-meta {
  display: flex; align-items: center; gap: 0.5rem;
  margin-top: 1rem;
  font-size: 0.74rem; color: var(--cream-dim);
  letter-spacing: 0.04em;
  text-transform: uppercase;
  font-weight: 700;
}
.sec-card-meta span + span::before { content: '·'; margin: 0 0.4rem; color: var(--text-dim); }
.sec-card-foot {
  display: flex; align-items: center; gap: 0.4rem;
  margin-top: 1rem;
  padding-top: 1rem;
  border-top: 1px solid var(--border);
}
.sec-card-foot .cv-btn {
  font-size: 0.74rem;
  padding: 0.4rem 0.85rem;
}
.sec-card-foot .cv-btn-primary { color: #000; }
.sec-card-foot .right { margin-left: auto; display: flex; gap: 0.35rem; }
.sec-card-icon {
  background: transparent;
  border: 1px solid var(--border);
  color: var(--text-muted);
  width: 30px; height: 30px;
  border-radius: 7px;
  display: flex; align-items: center; justify-content: center;
  cursor: pointer;
}
.sec-card-icon:hover { border-color: var(--cream); color: var(--cream); }
.sec-card-icon.danger:hover { border-color: rgba(255, 115, 115, 0.5); color: #ff7373; }

/* Select mode (bulk archive) — corner checkbox mirrors the dashboard's
   case-study selection pattern; hidden until the grid enters select mode. */
.sec-card-checkbox {
  position: absolute;
  top: 0.9rem;
  right: 0.9rem;
  width: 26px;
  height: 26px;
  border-radius: 8px;
  background: rgba(0,0,0,0.6);
  border: 1px solid rgba(245,236,217,0.25);
  display: none;
  align-items: center;
  justify-content: center;
  pointer-events: none; /* the whole card is the click target in select mode */
}
.cv-sections-grid.is-selecting .sec-card-checkbox { display: flex; }
.sec-card-checkbox svg { color: transparent; }
.sec-card-checkbox.is-checked { background: var(--cream); border-color: var(--cream); }
.sec-card-checkbox.is-checked svg { color: #000; }
.sec-card--link { cursor: pointer; } /* the whole card opens the section */

/* ==========================================================
   TALENT PAGE
========================================================== */
/* Dense directory: 249 profiles should scan like an index, not a gallery.
   The review grid below stays deliberately larger — judging a face needs size. */
.cv-talent-grid { grid-template-columns: repeat(auto-fill, minmax(176px, 1fr)); gap: 1rem; }
.tl-card {
  position: relative;
  display: flex;
  flex-direction: column;
  background: var(--bg-card);
  border: 1px solid var(--border);
  border-radius: var(--radius-lg);
  overflow: hidden;
  cursor: pointer; /* the whole card opens the editor */
  transition: transform 0.25s, border-color 0.25s, box-shadow 0.25s;
}
.tl-card:hover {
  transform: translateY(-3px);
  border-color: rgba(245,236,217,0.22);
  box-shadow: 0 14px 40px rgba(0,0,0,0.45);
}
.tl-photo {
  aspect-ratio: 4 / 5;
  background: #000;
  display: flex;
  align-items: center;
  justify-content: center;
  overflow: hidden;
}
.tl-photo img { width: 100%; height: 100%; object-fit: cover; }
.tl-photo-fallback {
  font-size: 2rem;
  font-weight: 900;
  letter-spacing: -0.02em;
  color: var(--cream-dim);
}
.tl-review .tl-photo-fallback { font-size: 3rem; }
.tl-photo { position: relative; }
.tl-photo-badge {
  position: absolute;
  bottom: 0.6rem; left: 0.6rem;
  background: rgba(0,0,0,0.72);
  border: 1px solid rgba(245,236,217,0.22);
  color: var(--cream-soft);
  font-size: 0.6rem;
  font-weight: 700;
  letter-spacing: 0.12em;
  text-transform: uppercase;
  padding: 0.25rem 0.5rem;
  border-radius: 999px;
}
.tl-info { padding: 0.7rem 0.75rem 0.6rem; flex: 1; display: flex; flex-direction: column; gap: 0.3rem; }
.tl-info .cs-card-tier { font-size: 0.55rem; letter-spacing: 0.12em; }
.tl-info .cs-card-title {
  font-size: 0.92rem;
  line-height: 1.2;
  /* Two lines max — a long name must not change the card's height. */
  display: -webkit-box; -webkit-line-clamp: 2; -webkit-box-orient: vertical;
  overflow: hidden;
}
.tl-info .cs-card-title .cs-scope { font-size: 0.8rem; }
.tl-info .cs-card-tags { gap: 0.25rem; }
.tl-info .cs-tag { font-size: 0.58rem; padding: 0.14rem 0.4rem; }

/* Footer: contact + actions as icons only. The card body already opens the
   editor, so a labelled Edit button would just cost a row. */
.tl-foot {
  display: flex; align-items: center; gap: 0.25rem;
  margin-top: auto;
  padding-top: 0.5rem;
  border-top: 1px solid var(--border);
}
.tl-foot .right { margin-left: auto; display: flex; gap: 0.2rem; }
.tl-icon {
  width: 24px; height: 24px;
  border-radius: 6px;
  border: 1px solid var(--border);
  background: transparent;
  color: var(--text-muted);
  display: flex; align-items: center; justify-content: center;
  cursor: pointer;
  text-decoration: none;
}
.tl-icon:hover { border-color: var(--cream); color: var(--cream); }
.tl-icon.danger:hover { border-color: rgba(255,115,115,0.5); color: #ff7373; }

/* Photo review contact sheet — bigger frames, one decision per card. */
.cv-review-grid { grid-template-columns: repeat(auto-fill, minmax(240px, 1fr)); }
.tl-review {
  display: flex;
  flex-direction: column;
  background: var(--bg-card);
  border: 1px solid var(--border);
  border-radius: var(--radius-lg);
  overflow: hidden;
}
.tl-review .tl-photo { aspect-ratio: 4 / 5; }
.tl-review-body { padding: 0.9rem 1rem 1rem; display: flex; flex-direction: column; gap: 0.5rem; }
.tl-review-actions { display: flex; gap: 0.4rem; margin-top: 0.2rem; }
.tl-review-actions .cv-btn { flex: 1; justify-content: center; font-size: 0.76rem; }
.tl-handle {
  font-size: 0.74rem; font-weight: 700; color: var(--cream-soft);
  white-space: nowrap; overflow: hidden; text-overflow: ellipsis;
}
.tl-followers { color: var(--cream-dim); font-weight: 700; }
.tl-review .tl-handle { font-size: 0.8rem; }
.tl-project { text-decoration: none; }
.tl-project:hover { border-color: var(--cream); color: var(--cream); }
.tl-add { min-height: 0; }
.tl-add .sec-empty-card-inner { font-size: 0.8rem; padding: 2.2rem 0.75rem; }

/* Talent editor modal */
.tm-layout { display: grid; grid-template-columns: 180px 1fr; gap: 1.5rem; align-items: start; }
.tm-photo-col { display: flex; flex-direction: column; gap: 0.5rem; }
.tm-photo {
  width: 180px;
  aspect-ratio: 4 / 5;
  border-radius: 10px;
  background: #000;
  border: 1px solid var(--border);
  display: flex;
  align-items: center;
  justify-content: center;
  overflow: hidden;
}
.tm-photo img { width: 100%; height: 100%; object-fit: cover; }
.tm-photo.is-focusable { cursor: crosshair; }
.tm-photo-fallback { font-size: 2.4rem; font-weight: 900; color: var(--cream-dim); }
.tm-photo-url { display: flex; gap: 0.3rem; }
.tm-photo-url input {
  flex: 1; min-width: 0;
  background: var(--bg-elev);
  border: 1px solid var(--border);
  border-radius: 8px;
  padding: 0.4rem 0.5rem;
  color: var(--cream);
  font-family: var(--font);
  font-size: 0.72rem;
}
.tm-photo-url input:focus { outline: none; border-color: rgba(245,236,217,0.4); }
.tm-photo-url .cv-btn { font-size: 0.72rem; padding: 0.4rem 0.6rem; }
.tm-photo-col .cv-btn { font-size: 0.74rem; padding: 0.45rem 0.6rem; text-align: center; justify-content: center; }
.tm-photo-hint { font-size: 0.72rem; color: var(--text-muted); line-height: 1.4; }
.tm-fields { display: flex; flex-direction: column; gap: 0.85rem; min-width: 0; }
.tm-row { display: grid; grid-template-columns: 1fr 1fr; gap: 0.85rem; }
.tm-field { display: flex; flex-direction: column; gap: 0.3rem; min-width: 0; }
.tm-field span {
  font-size: 0.66rem;
  font-weight: 700;
  letter-spacing: 0.14em;
  text-transform: uppercase;
  color: var(--cream-dim);
}
.tm-field input {
  background: var(--bg-elev);
  border: 1px solid var(--border);
  border-radius: 8px;
  padding: 0.55rem 0.7rem;
  color: var(--cream);
  font-family: var(--font);
  font-size: 0.88rem;
}
.tm-field input:focus { outline: none; border-color: rgba(245,236,217,0.4); }
.tm-cs-list {
  max-height: 150px;
  overflow-y: auto;
  border: 1px solid var(--border);
  border-radius: 8px;
  background: var(--bg-elev);
  padding: 0.35rem;
  display: flex;
  flex-direction: column;
  gap: 0.1rem;
}
.tm-cs-item {
  display: flex; align-items: center; gap: 0.55rem;
  padding: 0.35rem 0.5rem;
  border-radius: 6px;
  font-size: 0.84rem;
  color: var(--cream);
  cursor: pointer;
}
.tm-cs-item:hover { background: rgba(245,236,217,0.06); }
.tm-cs-item em { font-style: normal; color: var(--cream-dim); }
.tm-cs-empty { padding: 0.5rem; font-size: 0.8rem; color: var(--text-muted); }

/* Archive page — two stacked groups; dormant case-study cards borrow the
   section-card footer for Restore/Delete. */
.cv-arch-group + .cv-arch-group { margin-top: 3rem; }
.cv-arch-group .cv-section-label { margin-bottom: 1.2rem; }
.cs-card--dormant .cs-card-info { gap: 0.55rem; }
.cs-card--dormant .sec-card-foot { margin-top: auto; }
.cs-card--dormant:hover { transform: none; box-shadow: none; }
.tl-card--dormant { cursor: default; }
.tl-card--dormant:hover { transform: none; box-shadow: none; border-color: var(--border); }
.cv-sections-grid.is-selecting .sec-card { cursor: pointer; }
.cv-sections-grid.is-selecting .sec-card.is-selected { border-color: var(--cream); }
.cv-sections-grid.is-selecting .sec-card-foot { opacity: 0.35; pointer-events: none; }

.sec-empty-card {
  border-style: dashed;
  align-items: center; justify-content: center;
  text-align: center;
  cursor: pointer;
  color: var(--text-muted);
}
.sec-empty-card:hover { border-color: var(--cream); color: var(--cream); background: rgba(245,236,217,0.04); }
.sec-empty-card-inner {
  display: flex; flex-direction: column; align-items: center; gap: 0.5rem;
  font-weight: 600; font-size: 0.9rem;
}

/* Selection bar — extra buttons */
.cv-selection-bar .cv-sel-actions { gap: 0.4rem; }
.cv-selection-bar .cv-sel-tally {
  display: inline-flex; align-items: center; gap: 0.4rem;
  font-size: 0.78rem; color: rgba(0,0,0,0.65); font-weight: 600;
}
.cv-selection-bar .cv-sel-tally strong { color: #000; font-weight: 800; }

.cv-sel-toggle {
  display: inline-flex; align-items: center; gap: 0.45rem;
  padding: 0.4rem 0.75rem 0.4rem 0.55rem;
  border-radius: 8px;
  background: rgba(0,0,0,0.06);
  cursor: pointer;
  user-select: none;
  font-size: 0.78rem; font-weight: 600;
  color: #000;
  border: 1px solid transparent;
}
.cv-sel-toggle:hover { background: rgba(0,0,0,0.10); }
.cv-sel-toggle input { accent-color: #000; cursor: pointer; }
.cv-sel-toggle.is-on { background: #000; color: var(--cream); }
.cv-sel-toggle.is-on input { accent-color: var(--cream); }

/* ==========================================================
   LOGO PAGE EXPORT (single trusted-by slide)
========================================================== */
.lp-toolbar {
  display: flex; align-items: center; justify-content: space-between;
  padding: 1rem 2.5rem;
  border-bottom: 1px solid var(--border);
}
.lp-toolbar .lp-title {
  font-size: 0.78rem; font-weight: 700; letter-spacing: 0.16em; text-transform: uppercase;
  color: var(--cream-dim);
}

.lp-page {
  padding: 4rem 4rem 5rem;
  min-height: 100vh;
  display: flex;
  flex-direction: column;
  page-break-after: always;
}

.lp-page-header {
  text-align: center;
  margin-bottom: 3rem;
}
.lp-page-eyebrow {
  font-size: 0.78rem;
  font-weight: 700;
  letter-spacing: 0.22em;
  text-transform: uppercase;
  color: var(--cream-dim);
  margin-bottom: 0.85rem;
}
.lp-page-title {
  font-size: clamp(2rem, 5vw, 3.6rem);
  font-family: var(--display);
  /* Chalet ships one upright 400. Without this the browser fakes any italic or
     bold asked of it, which is a slanted smear, not the typeface. */
  font-synthesis: none;
  font-weight: 400;
  letter-spacing: -0.02em;
  line-height: 1.05;
  color: var(--cream);
}
.lp-page-title em { font-style: normal; color: var(--cream-soft); }

.lp-grid {
  display: grid;
  gap: 1.25rem;
  flex: 1;
  align-content: center;
}
/* Auto-tune column count for typical "trusted by" densities */
.lp-grid[data-density="dense"] { grid-template-columns: repeat(6, 1fr); }
.lp-grid[data-density="balanced"] { grid-template-columns: repeat(5, 1fr); }
.lp-grid[data-density="airy"] { grid-template-columns: repeat(4, 1fr); }
@media (max-width: 900px) {
  .lp-grid[data-density] { grid-template-columns: repeat(3, 1fr) !important; }
}

.lp-tile {
  background: transparent;
  border-radius: 10px;
  aspect-ratio: 5/3;
  position: relative;
  display: flex;
  align-items: center;
  justify-content: center;
  padding: 0.85rem;
  overflow: hidden;
}
.lp-tile img {
  /* Absolutely positioned 80% content box instead of max-width/height
     percentages: Safari can't resolve a percentage max-height against a
     flex tile whose height comes from aspect-ratio, so tall logos
     (Airbnb, Unilever) rendered at natural size and clipped. Absolute
     positioning resolves percentages reliably in every browser and
     looks identical in Chrome. */
  position: absolute;
  inset: 10%;
  width: 80%;
  height: 80%;
  object-fit: contain;
  /* Force every uploaded logo to a flat white silhouette so the
     "Trusted by" page reads as one cohesive wordmark wall. */
  filter: brightness(0) invert(1);
}
.lp-tile-fallback {
  font-weight: 800;
  font-size: 1rem;
  letter-spacing: -0.01em;
  color: var(--cream);
  text-align: center;
  padding: 0.5rem;
}

/* Talent picker modal grid (dashboard "Attach talent") */
.cv-talent-pick-grid {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(120px, 1fr));
  gap: 0.9rem;
}
.tpk-card { position: relative; cursor: pointer; }
.tpk-check {
  position: absolute; top: 0.4rem; left: 0.4rem;
  width: 24px; height: 24px; border-radius: 7px;
  background: rgba(0,0,0,0.6); border: 1px solid rgba(245,236,217,0.25);
  display: flex; align-items: center; justify-content: center;
  cursor: pointer; z-index: 2;
}
.tpk-check svg { color: transparent; }
.tpk-check.is-checked { background: var(--cream); border-color: var(--cream); }
.tpk-check.is-checked svg { color: #000; }
.tpk-photo {
  aspect-ratio: 4 / 5;
  background: #000;
  border: 1px solid var(--border);
  border-radius: 10px;
  overflow: hidden;
  display: flex; align-items: center; justify-content: center;
}
.tpk-card.is-selected .tpk-photo { border-color: var(--cream); box-shadow: 0 0 0 2px var(--cream) inset; }
.tpk-photo img { width: 100%; height: 100%; object-fit: cover; }
.tpk-fallback { font-size: 1.8rem; font-weight: 900; color: var(--cream-dim); }
.tpk-name {
  margin-top: 0.4rem;
  font-size: 0.78rem; font-weight: 700; color: var(--cream);
  line-height: 1.2;
  display: -webkit-box; -webkit-line-clamp: 2; -webkit-box-orient: vertical; overflow: hidden;
}

/* Talent roster slide — headshots grid, one slide, after the case studies. */
.tp-grid {
  display: grid;
  gap: 1.6rem 1.25rem;
  flex: 1;
  align-content: center;
}
/* One column more at every density than the logo wall: a headshot at
   logo-tile scale dominated the slide, and the roster is a supporting cast,
   not the hero. */
.tp-grid[data-density="dense"] { grid-template-columns: repeat(7, 1fr); }
.tp-grid[data-density="balanced"] { grid-template-columns: repeat(6, 1fr); }
.tp-grid[data-density="airy"] { grid-template-columns: repeat(5, 1fr); }
@media (max-width: 900px) {
  .tp-grid[data-density] { grid-template-columns: repeat(4, 1fr) !important; }
}
.tp-card { display: flex; flex-direction: column; gap: 0.4rem; min-width: 0; }
.tp-photo {
  aspect-ratio: 4 / 5;
  background: #000;
  border-radius: 12px;
  overflow: hidden;
  display: flex;
  align-items: center;
  justify-content: center;
}
.tp-photo img { width: 100%; height: 100%; object-fit: cover; }
.tp-fallback { font-size: 2rem; font-weight: 900; color: var(--cream-dim); }
.tp-cat {
  margin-top: 0.35rem;
  font-size: 0.6rem;
  font-weight: 700;
  letter-spacing: 0.14em;
  text-transform: uppercase;
  color: var(--cream-dim);
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}
.tp-name {
  font-size: 0.92rem;
  font-weight: 800;
  letter-spacing: -0.01em;
  line-height: 1.15;
  color: var(--cream);
}
.tp-meta { font-size: 0.74rem; font-weight: 600; color: var(--cream-soft); }

/* ==========================================================
   PRINT — for export-to-PDF
========================================================== */
@media print {
  body { background: #000 !important; -webkit-print-color-adjust: exact; print-color-adjust: exact; }
  .cv-header, .cv-toolbar, .cv-hero, .cv-selection-bar, .cs-card-checkbox, .cv-detail-back, .cv-detail-topbar, .lp-toolbar, .cv-barswrap--export { display: none !important; }
  .cs-card, .cv-export-slide, .lp-page { break-inside: avoid; page-break-inside: avoid; }
}

/* ==========================================================
   STRATEGY PAGE — sections adapted from the Cape webdeck
   (capeworldwide.com/googlegemini), restyled in COVER's voice
========================================================== */

/* "THE CAPE STRATEGY" banner headline — a touch wider than the
   default reel headline so the single line breathes over the video */
.cv-strategy-banner { max-width: 26ch; }

/* TEST / REFINE / AMPLIFY / SHARE / INFLUENCE — title with the rail right
   below it, one column per step. No background reel: a quiet, compact block. */
.cv-bg-section[data-section="strategy"] {
  min-height: 0;               /* hug the content — no full-bleed stage */
  padding: 6rem 2.5rem;
}
.cv-bg-section[data-section="strategy"] .cv-bg-section-content {
  max-width: 1200px;
}
.cv-process {
  margin-top: 1.5rem;          /* tight gap under the title */
  width: 100%;
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(150px, 1fr));
  gap: 2rem;
  text-align: left;
}
.cv-process-step {
  border-top: 1px solid rgba(245, 236, 217, 0.3);
  padding-top: 1rem;
}
.cv-process-step h3 {
  font-size: 1.05rem;
  font-weight: 900;
  letter-spacing: 0.06em;
  line-height: 1.1;
  text-transform: uppercase;
  color: var(--cream);
  text-shadow: 0 4px 30px rgba(0,0,0,0.5);
}
.cv-process-step p {
  margin-top: 0.55rem;
  color: var(--text-muted);
  font-size: 0.85rem;
  line-height: 1.5;
}
/* Over a background reel, lift the body copy to cream for legibility */
.cv-bg-section[data-has-media="true"] .cv-process-step p { color: var(--cream-soft); }



/* ==========================================================
   PER-CASE-STUDY VISIBILITY TOGGLES (eyebrow + tag chips)
========================================================== */
.cv-vis-toggle { display: none; }
body.cv-edit-mode .cv-vis-toggle {
  display: inline-flex;
  align-items: center;
  margin-left: 0.6rem;
  padding: 0.2rem 0.65rem;
  font-family: var(--font);
  font-size: 0.66rem;
  font-weight: 700;
  letter-spacing: 0.08em;
  text-transform: uppercase;
  color: var(--cream-dim);
  background: rgba(0,0,0,0.5);
  border: 1px solid var(--border-strong);
  border-radius: var(--radius-pill);
  cursor: pointer;
}
body.cv-edit-mode .cv-vis-toggle:hover { color: var(--cream); border-color: var(--cream-dim); }
/* Hidden rows disappear for readers, stay visible (dimmed) while editing */
body:not(.cv-edit-mode) .cv-hidden-read { display: none !important; }
body.cv-edit-mode .cv-hidden-read { opacity: 0.45; }

/* ==========================================================
   CAPE HERO — capecreative.co-style opener (reel + logo)
========================================================== */
.cv-capehero { padding: 0; }
.cv-capehero-logo-wrap {
  position: absolute;
  inset: 0;
  z-index: 3;
  display: flex;
  align-items: center;
  justify-content: center;
  pointer-events: none;
}
/* Matches capecreative.co: a large cream pill with the letters knocked out
   so the reel plays through them. Flat — no shadow, no scrim. */
.cv-capehero-logo {
  width: clamp(320px, 45vw, 700px);
  height: auto;
}


/* ==========================================================
   POSTER FRAMES (one-off tool at /posters)
========================================================== */
.ps-status {
  margin: 0.25rem 0 1.5rem;
  font-size: 0.82rem;
  color: var(--text-muted);
}
.ps-list { display: flex; flex-direction: column; gap: 0.6rem; }
.ps-row {
  display: grid;
  grid-template-columns: 200px 1fr auto;
  align-items: center;
  gap: 1.25rem;
  padding: 0.85rem;
  background: var(--bg-card);
  border: 1px solid var(--border);
  border-radius: var(--radius-lg);
}
.ps-frame {
  width: 200px; aspect-ratio: 16 / 9;
  display: flex; align-items: center; justify-content: center;
  background: #000; border-radius: 8px; overflow: hidden;
}
.ps-frame img { width: 100%; height: 100%; object-fit: cover; display: block; }
.ps-frame-empty { font-size: 0.68rem; letter-spacing: 0.12em; text-transform: uppercase; color: var(--text-dim); }
.ps-client { font-size: 0.95rem; font-weight: 800; letter-spacing: -0.02em; color: var(--cream); }
.ps-file { margin-top: 0.15rem; font-size: 0.7rem; color: var(--text-dim); }
.ps-controls { margin-top: 0.7rem; display: flex; align-items: center; gap: 0.5rem; flex-wrap: wrap; }
.ps-time { display: inline-flex; align-items: center; gap: 0.35rem; font-size: 0.75rem; color: var(--text-muted); }
.ps-time input {
  width: 62px; height: 32px; padding: 0 0.5rem;
  background: var(--bg); border: 1px solid var(--border); border-radius: 8px;
  color: var(--cream); font-family: var(--font); font-size: 0.78rem; font-weight: 600; outline: none;
}
.ps-state { min-width: 9rem; text-align: right; font-size: 0.72rem; font-weight: 700; color: var(--text-dim); }
.ps-state.is-busy { color: var(--cream-soft); }
.ps-state.is-ok { color: var(--cream); }
.ps-state.is-saved { color: var(--accent); }
.ps-state.is-bad { color: #ff9b9b; font-weight: 600; }
@media (max-width: 760px) {
  .ps-row { grid-template-columns: 1fr; }
  .ps-state { text-align: left; }
}

/* Frame picker: one slider per row, only the open one has a video mounted. */
.ps-scrub { margin-top: 0.7rem; display: flex; align-items: center; gap: 0.7rem; }
.ps-scrub[hidden] { display: none; }
.ps-scrub input[type="range"] {
  flex: 1; min-width: 0; height: 4px; -webkit-appearance: none; appearance: none;
  background: rgba(255,255,255,0.14); border-radius: 999px; outline: none; cursor: pointer;
}
.ps-scrub input[type="range"]::-webkit-slider-thumb {
  -webkit-appearance: none; appearance: none;
  width: 14px; height: 14px; border-radius: 50%;
  background: var(--cream); border: none; cursor: grab;
}
.ps-scrub input[type="range"]::-moz-range-thumb {
  width: 14px; height: 14px; border-radius: 50%;
  background: var(--cream); border: none; cursor: grab;
}
.ps-tc {
  flex: none; min-width: 4.2rem; text-align: right;
  font-size: 0.72rem; font-weight: 700; letter-spacing: 0.02em;
  color: var(--cream-soft); font-variant-numeric: tabular-nums;
}

/* Project summary — one paragraph, the widest field in the editor because it
   is the only one that explains the work. */
/* No margin here: .cv-detail-right is a flex column with its own gap, and the
   two were stacking into a 48px hole between the summary and At a glance. */
.cv-summary-edit { margin-bottom: 0; }
.cv-summary-box {
  /* Was 5.5rem, which reserved a block of empty space under the label whether
     or not anything was written. Enough to be a comfortable click target in
     edit mode; the text sets the height once there is any. */
  min-height: 2.4rem;
  font-size: 0.95rem;
  line-height: 1.6;
  color: var(--cream-soft);
  max-width: 46rem;
}

/* An empty summary in READ mode shows nothing at all — same treatment the
   empty scale fields already get, so the page doesn't carry a ghost label and
   a hole where a paragraph will go. */
body:not(.cv-edit-mode) .cv-summary-edit:has(.cv-summary-box:empty) { display: none; }

/* In EDIT mode it says what is missing, in the same accent as the Draft tag on
   the dashboard card, so the two read as one problem. Edit mode only: this is
   the internal editor, and the export renders .cv-export-summary — and only
   when a summary exists — so nothing here can reach a client deck. */
body.cv-edit-mode .cv-summary-box:empty::before {
  content: 'Needs a project summary.';
  display: block;
  color: var(--accent);
  font-style: normal;
  font-weight: 700;
}
body.cv-edit-mode .cv-summary-box:empty::after {
  content: attr(data-placeholder);
  display: block;
  color: var(--text-dim);
  font-style: italic;
}
.cv-export-summary {
  margin: 0 0 1.5rem;
  font-size: 1rem;
  line-height: 1.65;
  color: var(--cream-soft);
  max-width: 42rem;
}
/* The summary line on a card: body copy under the title, two lines at most so
   every card in a row stays the same height. */
.cs-card-summary {
  margin: 0.5rem 0 0;
  font-size: 0.8rem;
  line-height: 1.5;
  color: var(--text-muted);
  display: -webkit-box;
  -webkit-line-clamp: 2;
  -webkit-box-orient: vertical;
  overflow: hidden;
}





/* Media reordering by drag, and the focal-point picker. */
.cv-media-item.is-dragging { opacity: 0.4; }
.cv-media-item.drop-before .cv-media-thumb { box-shadow: -5px 0 0 -1px var(--cream); }
.cv-media-item.drop-after  .cv-media-thumb { box-shadow:  5px 0 0 -1px var(--cream); }
.cv-media-grip {
  display: inline-flex; align-items: center; justify-content: center;
  width: 26px; height: 26px; border-radius: 6px;
  color: var(--text-dim); cursor: grab;
}
.cv-media-grip:hover { color: var(--cream); background: rgba(255,255,255,0.05); }
.cv-media-grip:active { cursor: grabbing; }

.cv-media-thumb { position: relative; }

.cv-focus-dot {
  position: absolute; width: 14px; height: 14px; margin: -7px 0 0 -7px;
  border-radius: 50%; border: 2px solid var(--cream);
  box-shadow: 0 0 0 1px rgba(0,0,0,0.6), 0 0 0 6px rgba(245,236,217,0.14);
  pointer-events: none; z-index: 3;
}
.cv-focus-dot[hidden] { display: none; }
/* The toggle is a circle — a crosshair cursor and the dot say the rest. */
.cv-media-focus {
  width: 22px; height: 22px; padding: 0; flex: none;
  border-radius: 50%; background: transparent;
  border: 1.5px solid var(--border-strong); cursor: pointer;
  transition: border-color 0.15s, background 0.15s, box-shadow 0.15s;
}
.cv-media-focus:hover { border-color: var(--cream); }
.cv-media-focus.is-set { border-color: var(--cream); background: rgba(245,236,217,0.18); }
.cv-media-item.is-focusing .cv-media-focus {
  border-color: var(--cream); background: var(--cream);
  box-shadow: 0 0 0 3px rgba(245,236,217,0.18);
}
.cv-media-item.is-focusing .cv-media-thumb { cursor: crosshair; }
.cv-media-item.is-focusing .cv-media-thumb * { pointer-events: none; }

/* The edit bar says what it does, so nobody has to guess whether typing saved. */

/* ==========================================================
   UPLOAD QUEUE — the wait, made visible where the media lives
========================================================== */
.cv-upload-queue { display: flex; gap: 0.75rem; }
.cv-upload-tile {
  flex: none; width: 150px;
  display: flex; flex-direction: column; gap: 0.35rem;
}
.cv-upload-thumb {
  position: relative; width: 150px; aspect-ratio: 16 / 10;
  border-radius: 8px; overflow: hidden;
  background: rgba(255,255,255,0.04);
  border: 1px dashed var(--border-strong);
}
.cv-upload-thumb img { width: 100%; height: 100%; object-fit: cover; display: block; opacity: 0.55; }
.cv-upload-bar {
  position: absolute; left: 0; right: 0; bottom: 0; height: 3px;
  background: rgba(255,255,255,0.12);
}
.cv-upload-bar span {
  display: block; height: 100%; width: 0;
  background: var(--accent); transition: width 0.2s ease;
}
.cv-upload-name {
  font-size: 0.7rem; color: var(--cream-soft);
  overflow: hidden; text-overflow: ellipsis; white-space: nowrap;
}
.cv-upload-state { font-size: 0.66rem; font-weight: 700; letter-spacing: 0.04em; color: var(--accent); }
.cv-upload-tile.is-done .cv-upload-thumb { border-style: solid; border-color: rgba(245,236,217,0.35); }
.cv-upload-tile.is-done .cv-upload-thumb img { opacity: 1; }
.cv-upload-tile.is-done .cv-upload-state { color: var(--cream); }
.cv-upload-tile.is-done .cv-upload-bar { display: none; }
.cv-upload-tile.is-failed .cv-upload-thumb { border-color: rgba(255,120,120,0.5); }
.cv-upload-tile.is-failed .cv-upload-state { color: #ff9b9b; }

/* The add buttons show they are busy rather than just going dead. */
.cv-add-btn.is-busy { opacity: 0.5; cursor: progress; }