/* =====================================================================================================
   The Marketing Cartel · inner pages (E06) — desktop layer (≥1024px). Loaded with media="(min-width: 1024px)":
   phones never block on it. Same block order as pages.css.
   ===================================================================================================== */

/* ---------- 0 · navbar lockup (the home keeps it in hero.desktop.css): symbol + live wordmark, shorter when tight ---- */
.nav__logo { gap: 10px; }
.nav__symbol { width: 36px; height: 36px; flex: none; }
.nav__wordmark { font: 780 1.0625rem / 1 var(--font-sans); letter-spacing: -.024em; white-space: nowrap; }
/* the lockup rule of the system: the full name where there is room, "Marketing Cartel" where it is tight, the symbol alone
   where neither fits beside the centred links (measured 2026-10-07: full name from 1140 px, "Marketing Cartel" from 1100 px) */
.nav__wordmark .wm-short { display: none; }
@media (max-width: 1139.98px) {
  .nav__wordmark .wm-full { display: none; }
  .nav__wordmark .wm-short { display: inline; }
}
@media (max-width: 1099.98px) {
  .nav__wordmark .wm-short { display: none; }
}

/* ---------- 1 · hero: copy | illustration ---------------------------------------------------------- */
.phero { padding: calc(var(--nav-top) + var(--nav-h) + clamp(28px, 5vh, 56px)) 0 var(--section-y); }
.phero__inner { grid-template-columns: minmax(0, 1.12fr) minmax(0, .88fr); align-items: center; gap: clamp(40px, 5vw, 88px); }
.phero:not(.phero--vis) .phero__inner { grid-template-columns: minmax(0, 1fr); }
.phero__copy { gap: var(--space-5); }
.phero h1 { font-size: clamp(2.75rem, 1.1rem + 3.3vw, 4.5rem); }
.phero__vis { align-self: center; }
.phero__vis .vis--hero { min-height: clamp(340px, 30vw, 440px); padding: clamp(22px, 2.2vw, 36px); gap: 14px; box-shadow: var(--shadow-3); }
.phero__bg.bg-topo { inset: -20% -10% auto auto; width: 70%; height: 140%; }

/* ---------- 3 · section frame --------------------------------------------------------------------- */
/* anchors land on the content, 16px under the nav: html's scroll-padding already clears the navbar (the home's rule) */
.pg, .pg-how { scroll-margin-top: calc(var(--space-4) - var(--section-y)); }
.pg__head { margin-bottom: var(--space-11); }
.pg__head--split { display: grid; grid-template-columns: minmax(0, 1fr) minmax(0, 1fr); align-items: end; gap: var(--space-11); max-width: none; }
.pg__head--split .pg__lead { max-width: 30em; justify-self: end; }
.pg__head--split > div { display: grid; gap: var(--space-4); }

/* ---------- 4 · pains ---------------------------------------------------------------------------- */
.pains__grid { grid-template-columns: repeat(3, minmax(0, 1fr)); gap: var(--space-5); }
.pain { padding: var(--space-7); gap: var(--space-4); }
.extra__grid { grid-template-columns: repeat(2, minmax(0, 1fr)); }
.extra__grid:has(> :nth-child(3):last-child) { grid-template-columns: repeat(3, minmax(0, 1fr)); }

/* ---------- 5 · what you get: the signature ------------------------------------------------------
   Static (no JS, reduced motion): the list in two columns. Live (JS + motion welcome): the list scrolls, a sticky
   stage on the right shows the lit item's illustration; tabs.js only flips data-active (opacity/transform). The
   layout is decided by CSS from the first paint (.js is set in <head>), so arming the script moves nothing. */
.deliv__list { grid-template-columns: repeat(2, minmax(0, 1fr)); column-gap: var(--space-11); }
.deliv__item:nth-last-child(2):nth-child(odd) { border-bottom: 1px solid var(--line); }
@media (prefers-reduced-motion: no-preference) {
  .js .deliv__grid { display: grid; grid-template-columns: minmax(0, .92fr) minmax(0, 1.08fr); gap: clamp(48px, 6vw, 104px); align-items: start; }
  .js .deliv__list { grid-template-columns: minmax(0, 1fr); }
  .js .deliv__item { position: relative; padding: var(--space-7) 0; }
  /* only the heading dims (large text: 3:1 holds at .6); the number and the description keep full contrast */
  .js .deliv__item h3 { opacity: .6; transition: opacity var(--d-ui) var(--e-out); }
  .js .deliv__item[data-active="true"] h3 { opacity: 1; }
  .js .deliv__item::before { content: ""; position: absolute; left: -18px; top: var(--space-7); bottom: var(--space-7); width: 3px; border-radius: 2px;
    background: var(--grad-brand); transform: scaleY(0); transform-origin: 50% 0; transition: transform var(--d-ui) var(--e-out); }
  .js .deliv__item[data-active="true"]::before { transform: none; }
  .js .deliv__item:nth-last-child(2):nth-child(odd) { border-bottom: 0; }
  .js .deliv__stage { position: sticky; top: calc(var(--nav-top) + var(--nav-h) + 40px); display: grid; gap: var(--space-4); }
  .js .deliv__frame {
    position: relative; aspect-ratio: 1.12; max-height: min(34vw, 520px); overflow: hidden; border-radius: var(--r-xl);
    background:
      radial-gradient(60% 90% at 100% 100%, color-mix(in oklab, var(--accent) 22%, transparent), transparent 70%),
      radial-gradient(70% 110% at 0% 0%, color-mix(in oklab, var(--violet-400) 28%, transparent), transparent 70%),
      var(--brand-soft);
    box-shadow: var(--shadow-3);
  }
  .js .deliv__panel { position: absolute; inset: 0; display: grid; place-items: center; padding: clamp(28px, 3.4vw, 56px);
    opacity: 0; transform: translateY(14px) scale(.985); transition: opacity 240ms var(--e-out), transform 380ms var(--e-out); }
  .js .deliv__panel[data-active="true"] { opacity: 1; transform: none; transition-delay: 60ms; }
  .js .deliv__panel .vis--panel { max-width: 470px; font-size: .9375rem; }
  .js .deliv__panel .vx-card { padding: 22px 24px; gap: 14px; }
  .js .deliv__rail { display: block; height: 3px; border-radius: 2px; background: color-mix(in oklab, var(--fg) 10%, transparent); overflow: hidden; }
  .js .deliv__rail i { display: block; height: 100%; background: var(--grad-brand); transform-origin: 0 50%; transform: scaleX(var(--p, .125)); transition: transform 380ms var(--e-out); }
}

/* ---------- 6 · cases ---------------------------------------------------------------------------- */
.proofs__grid { grid-template-columns: repeat(2, minmax(0, 1fr)); gap: var(--space-6); }
.proofs__grid--tst { grid-template-columns: repeat(3, minmax(0, 1fr)); }
.ccard__figure { aspect-ratio: 16 / 10.2; }

/* ---------- 7 · cards ---------------------------------------------------------------------------- */
.scards { grid-template-columns: repeat(3, minmax(0, 1fr)); gap: var(--space-4); }
.scards:has(> :nth-child(4)) { grid-template-columns: repeat(2, minmax(0, 1fr)); }
.scards:has(> :nth-child(4):last-child) { grid-template-columns: repeat(4, minmax(0, 1fr)); }
.scards:has(> :nth-child(4):last-child) .scard a { grid-template-columns: auto 1fr; }
.scards:has(> :nth-child(4):last-child) .scard__arrow { display: none; }

/* reveal (desktop): space held, opacity/transform only */
@media (prefers-reduced-motion: no-preference) {
  .js .pain.reveal:not(.is-in), .js .scard.reveal:not(.is-in) { opacity: 0; transform: translateY(var(--reveal-distance)); }
  .js .pain.reveal, .js .scard.reveal { transition: opacity var(--d-reveal) var(--e-out), transform var(--d-reveal) var(--e-out); transition-delay: calc(var(--i, 0) * var(--stagger)); }
}

/* ---------- 8 · industry ------------------------------------------------------------------------- */
.ssim-sec__inner { display: grid; grid-template-columns: minmax(0, .9fr) minmax(0, 1.1fr); align-items: center; gap: clamp(48px, 6vw, 104px); }
.ssim-sec .pg__head { margin-bottom: 0; }
.ssim { --row: 72px; padding: 32px; }
.ssim__maprow { grid-template-columns: 180px minmax(0, 1fr); align-items: start; }
.ssim__map { height: calc(3 * var(--row) + 2 * var(--gap)); }
.work__item { grid-template-columns: 56px minmax(0, 1fr) auto; align-items: start; column-gap: var(--space-6); }
.work__link { grid-column: 3; grid-row: 1; margin-top: 2px; }
.lines { grid-template-columns: repeat(3, minmax(0, 1fr)); }

/* ---------- 9 · rules ---------------------------------------------------------------------------- */
.rules__list { grid-template-columns: repeat(3, minmax(0, 1fr)); gap: var(--space-5); }
.rule { padding: var(--space-7); }

/* ---------- 10 · case page ----------------------------------------------------------------------- */
.vis--figure { min-height: clamp(320px, 28vw, 420px); }
.glance__grid { grid-template-columns: repeat(auto-fit, minmax(170px, 1fr)); }
.story__grid { grid-template-columns: minmax(0, 1fr) minmax(0, 1fr); gap: clamp(48px, 7vw, 120px); align-items: start; }
.rbars { grid-template-columns: repeat(auto-fit, minmax(300px, 1fr)); gap: var(--space-5); }
.site-shot__inner { display: grid; grid-template-columns: minmax(0, .7fr) minmax(0, 1.3fr); gap: clamp(40px, 5vw, 88px); align-items: center; }
.site-shot .pg__head { margin-bottom: 0; }
.next-case__card { max-width: 400px; }

/* the current page inside a dropdown */
.nav-item[aria-current="page"]::before { opacity: 1; }
.nav-item[aria-current="page"] .nav-item__title { color: var(--fg-accent); }

/* ---------- 11 · about, hub ---------------------------------------------------------------------- */
.about-card { padding: 0; }
.promises { grid-template-columns: repeat(3, minmax(0, 1fr)); }
.crew { grid-template-columns: repeat(4, minmax(0, 1fr)); gap: var(--space-8) var(--space-6); }
.hub__grid { grid-template-columns: repeat(3, minmax(0, 1fr)); }
.story .story__body p { font-size: var(--text-lead); line-height: var(--lh-lead); color: var(--fg-muted); }

.ssim__group--web .ssim__maprow { grid-template-columns: 1fr; }