/* =============================================================================
   JETT SPORTS: HOME EXPERIENCE LAYER
   Sits on top of /styles/jett.css (tokens, palette, primitives).
   The home page is the letter; the pillars keep the cinematic treatment.
   ============================================================================= */

.home {
  background: var(--jett-navy-deep);
  /* Every screen scrolls now. The old doorway landing was the only fixed one,
     and the letter that replaced it is a page you read. */
  overflow: visible;
}

/* =============================================================================
   CINEMATIC LAYER: fixed full-bleed, behind all content.
   ============================================================================= */
.cine {
  position: fixed;
  inset: 0;
  z-index: 0;
  background: var(--jett-navy-deep);
  pointer-events: none;
}
.cine__slot {
  position: absolute;
  inset: 0;
  margin: 0;
  opacity: 0;
  transition: opacity 1.1s var(--jett-ease-out);
  will-change: opacity;
}
.cine__slot.is-active { opacity: 1; }
.cine__img,
.cine__video {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  object-fit: cover;
  /* Slow, perpetual ken-burns drift. Paused until the slot is live. */
  transform: scale(1.08);
  animation: cine-drift 26s ease-in-out infinite alternate;
  animation-play-state: paused;
}
.cine__video { opacity: 0; }            /* hidden until JS wires a source */
.cine__slot.has-video .cine__video { opacity: 1; }
.cine__slot.has-video .cine__img { opacity: 0; }
.cine__slot.is-active .cine__img,
.cine__slot.is-active .cine__video { animation-play-state: running; }

@keyframes cine-drift {
  from { transform: scale(1.06) translate3d(-1.2%, -0.8%, 0); }
  to   { transform: scale(1.14) translate3d(1.2%,  0.8%, 0); }
}

/* Scrim: keeps type legible and holds the navy mood over any image.
   Lighter on the landing (a tease), heavier inside a pillar (readability). */
.cine__scrim {
  position: absolute;
  inset: 0;
  background:
    radial-gradient(130% 100% at 50% 30%, rgba(5,9,18,0.22), transparent 70%),
    linear-gradient(180deg, rgba(5,9,18,0.66) 0%, rgba(5,9,18,0.52) 45%, rgba(5,9,18,0.66) 100%);
  transition: background 1.1s var(--jett-ease-out), backdrop-filter 1.1s var(--jett-ease-out);
}
/* The letter reads on near-black. No cinema behind it. */
.home[data-state="landing"] .cine__scrim {
  background: var(--jett-navy-deep);
}

/* Subtle film grain for richness without weight. */
.cine__grain {
  position: absolute;
  inset: 0;
  opacity: 0.05;
  mix-blend-mode: overlay;
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='120' height='120'%3E%3Cfilter id='n'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='0.9' numOctaves='2'/%3E%3C/filter%3E%3Crect width='100%25' height='100%25' filter='url(%23n)'/%3E%3C/svg%3E");
}

/* =============================================================================
   PERSISTENT TOP BAR: only present inside a pillar.
   ============================================================================= */
.topbar {
  position: fixed;
  top: 0; left: 0; right: 0;
  z-index: 40;
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 2rem;
  padding: 1.15rem var(--jett-page-pad);
  background: linear-gradient(to bottom, rgba(5,9,18,0.72), transparent);
  backdrop-filter: blur(8px) saturate(140%);
  -webkit-backdrop-filter: blur(8px) saturate(140%);
  opacity: 0;
  transform: translateY(-100%);
  transition: opacity 0.6s var(--jett-ease-out), transform 0.6s var(--jett-ease-out);
  pointer-events: none;
}
.topbar.is-on { opacity: 1; transform: none; pointer-events: auto; }

/* The letter carries no logo of its own, so the corner mark is the letterhead
   and stays visible on every screen. */

.topbar__mark { display: inline-flex; align-items: center; }
.topbar__mark img { height: 34px; width: auto; display: block; }

.topbar__nav { display: flex; align-items: center; gap: 1.9rem; }
.topbar__nav a {
  font-family: var(--jett-font-mono);
  font-size: 17px;
  letter-spacing: 0.12em;
  text-transform: uppercase;
  color: var(--ink-soft);
  position: relative;
  padding: 0.2rem 0;
  transition: color 0.3s var(--jett-ease-out);
}
.topbar__nav a::after {
  content: '';
  position: absolute;
  left: 0; bottom: -2px;
  width: 100%; height: 1px;
  background: var(--accent);
  transform: scaleX(0);
  transform-origin: left;
  transition: transform 0.4s var(--jett-ease-out);
}
.topbar__nav a:hover { color: var(--ink-strong); }
.topbar__nav a.is-current { color: var(--ink-strong); }
.topbar__nav a.is-current::after { transform: scaleX(1); }

/* =============================================================================
   MORE: the secondary shelf. The bar carries the three doorways; Work,
   About and Press sit under one quiet trigger beside the CTA.
   ============================================================================= */
.topbar__right { display: flex; align-items: center; gap: clamp(0.8rem, 0.5rem + 0.8vw, 1.4rem); }
.more { position: relative; }

.more__toggle {
  position: relative;
  display: inline-flex;
  align-items: center;
  gap: 0.5rem;
  padding: 0.2rem 0;
  font-family: var(--jett-font-mono);
  font-size: 17px;
  letter-spacing: 0.12em;
  text-transform: uppercase;
  color: var(--ink-soft);
  transition: color 0.3s var(--jett-ease-out);
}
.more__toggle:hover,
.more.is-open .more__toggle { color: var(--ink-strong); }
/* Current-section state: More carries the underline when the open screen
   lives inside it, exactly like a top-level nav link would. */
.more.is-current .more__toggle { color: var(--ink-strong); }
.more.is-current .more__toggle::after {
  content: '';
  position: absolute;
  left: 0; bottom: -2px;
  width: 100%; height: 1px;
  background: var(--accent);
}

.more__caret {
  width: 7px; height: 7px;
  border-right: 1px solid currentColor;
  border-bottom: 1px solid currentColor;
  transform: translateY(-2px) rotate(45deg);
  transition: transform 0.35s var(--jett-ease-out);
}
.more.is-open .more__caret { transform: translateY(1px) rotate(-135deg); }

.more__panel {
  position: absolute;
  top: calc(100% + 0.85rem);
  right: 0;
  min-width: 190px;
  display: flex;
  flex-direction: column;
  padding: 0.5rem;
  background: color-mix(in oklab, var(--jett-navy-lift) 94%, black);
  border: 1px solid var(--hairline-2);
  border-radius: 8px;
  box-shadow: 0 24px 44px -22px rgba(0, 0, 0, 0.9);
  backdrop-filter: blur(10px) saturate(140%);
  -webkit-backdrop-filter: blur(10px) saturate(140%);
  opacity: 0;
  visibility: hidden;
  transform: translateY(-6px);
  transition: opacity 0.28s var(--jett-ease-out),
              transform 0.28s var(--jett-ease-out),
              visibility 0.28s;
}
.more.is-open .more__panel { opacity: 1; visibility: visible; transform: none; }

.more__panel a {
  display: block;
  padding: 0.62rem 0.8rem;
  border-radius: 5px;
  font-family: var(--jett-font-mono);
  font-size: 14px;
  letter-spacing: 0.14em;
  text-transform: uppercase;
  color: var(--ink-dim);
  transition: color 0.25s, background 0.25s;
}
.more__panel a:hover,
.more__panel a:focus-visible { color: var(--ink-strong); background: rgba(255, 255, 255, 0.06); outline: none; }
.more__panel a.is-current { color: var(--ink-strong); }
.more__panel a.is-current::before { content: ''; }

@media (prefers-reduced-motion: reduce) {
  .more__panel, .more__caret { transition: none; }
}

.topbar__cta {
  font-family: var(--jett-font-mono);
  font-size: 17px;
  letter-spacing: 0.12em;
  text-transform: uppercase;
  color: var(--ink-dim);
  border: 1px solid var(--hairline-2);
  border-radius: 100px;
  padding: 0.55rem 1.25rem;
  transition: border-color 0.3s, color 0.3s;
}
.topbar__cta:hover { color: var(--ink-strong); border-color: var(--accent); }

/* Hamburger toggle: only surfaces on small screens */
.menu-toggle {
  display: none;
  flex-direction: column;
  align-items: flex-end;
  justify-content: space-between;
  width: 26px;
  height: 13px;
}
.menu-toggle span {
  display: block;
  height: 1.5px;
  background: var(--ink-strong);
  transition: width 0.3s var(--jett-ease-out);
}
.menu-toggle span:nth-child(1) { width: 26px; }
.menu-toggle span:nth-child(2) { width: 17px; }

/* With the secondary links folded under More, the bar is three doorways plus
   two controls, so it fits comfortably again. Tighten once through the middle
   band, then hand the whole thing to the full-screen menu. */
@media (max-width: 880px) {
  .topbar__nav { gap: 1.15rem; }
  .topbar__nav a { font-size: 15px; letter-spacing: 0.1em; }
  .more__toggle { font-size: 15px; letter-spacing: 0.1em; }
  .topbar__cta { font-size: 15px; padding: 0.5rem 1rem; }
}
@media (max-width: 720px) {
  .topbar__cta { display: none; }
  .topbar__nav { display: none; }
  .more { display: none; }
  .menu-toggle { display: flex; }
}

/* Full-screen mobile menu */
.mobile-menu {
  position: fixed;
  inset: 0;
  z-index: 58;
  background: color-mix(in oklab, var(--jett-navy-deep) 96%, black);
  display: flex;
  flex-direction: column;
  justify-content: center;
  padding: var(--jett-page-pad);
  opacity: 0;
  visibility: hidden;
  transform: translateY(12px);
  transition: opacity 0.45s var(--jett-ease-out), transform 0.5s var(--jett-ease-out), visibility 0.45s;
}
.mobile-menu.is-open { opacity: 1; visibility: visible; transform: none; }
body.menu-open { overflow: hidden; }

.mobile-menu__inner { display: flex; flex-direction: column; }
.mobile-menu__pillar {
  display: flex;
  align-items: baseline;
  gap: 0.45em;
  padding: 0.45rem 0;
  font-family: var(--jett-font-display);
  font-weight: 700;
  font-size: clamp(2.2rem, 1.4rem + 5vw, 3.6rem);
  line-height: 1.05;
  letter-spacing: -0.03em;
  color: var(--ink-mute);
  transition: color 0.3s var(--jett-ease-out);
}
.mobile-menu__pillar span { font-weight: 300; font-size: 0.42em; color: var(--ink-soft); }
.mobile-menu__pillar.is-current,
.mobile-menu__pillar:active { color: var(--ink-strong); }
.mobile-menu__rule { border: 0; height: 1px; background: var(--hairline); margin: 1.8rem 0; }
.mobile-menu__sub { display: flex; gap: 1.8rem; }
.mobile-menu__sub a {
  font-family: var(--jett-font-mono);
  font-size: 12px;
  letter-spacing: 0.2em;
  text-transform: uppercase;
  color: var(--ink-dim);
  transition: color 0.3s;
}
.mobile-menu__sub a:active { color: var(--ink-strong); }

/* =============================================================================
   HOME: THE LETTER
   The front door is now the note, set as correspondence rather than as a
   hero. Long measure, generous leading, and the sentences unpeel as you
   reach them. The doorway screen this replaced is in git at 7465ba6.
   ============================================================================= */
.letter { position: relative; z-index: 20; }
/* The horizontal value must be the page pad, not 0. This element carries
   .jett-shell too, and .jett-shell sets `padding: 0 var(--jett-page-pad)`;
   a three-value shorthand here overrides that to zero, and home.css loads
   after jett.css at equal specificity so it wins. Desktop hid it because
   the 940px max-width centers the block. Narrow windows did not. */
.letter__inner { padding: clamp(7rem, 6rem + 5vw, 11rem) var(--jett-page-pad) clamp(3.5rem, 3rem + 3vw, 6rem); }
.letter.is-out { opacity: 0; pointer-events: none; }
.letter__inner { max-width: 940px; }

/* Letterhead line: who and when. A dateline names its values, so it stays. */
.letter__dateline {
  display: flex;
  align-items: center;
  gap: 0.9rem;
  flex-wrap: wrap;
  font-family: var(--jett-font-mono);
  font-size: 12px;
  letter-spacing: 0.18em;
  text-transform: uppercase;
  color: var(--ink-soft);
  margin-bottom: clamp(2.2rem, 1.8rem + 1.5vw, 3.4rem);
}
/* A rule here read as one long em dash, which is banned. A middle dot,
   the separator the brand already uses, does the same job. */
.letter__dot { color: var(--ink-ghost); }

.letter__body p {
  font-family: var(--jett-font-body);
  font-weight: 300;
  font-size: clamp(1.15rem, 1.02rem + 0.62vw, 1.6rem);
  line-height: 1.62;
  letter-spacing: -0.011em;
  color: var(--ink-dim);
  max-width: 34ch;
  margin: 0 0 1.5em;
  /* Depth so the peel reads as paper lifting rather than a flat fade. */
  perspective: 620px;
}
.letter__body p:first-child { color: var(--ink); }
.letter__body p:last-child { margin-bottom: 0; }
@media (min-width: 900px) { .letter__body p { max-width: 46ch; } }

.letter__sign {
  margin-top: clamp(2rem, 1.6rem + 1.2vw, 2.8rem);
  font-family: var(--jett-font-mono);
  font-size: 12px;
  letter-spacing: 0.2em;
  text-transform: uppercase;
  color: var(--ink-mute);
}

/* The one card on the page: the way into the case study. */
.letter__case {
  display: grid;
  grid-template-columns: 1fr auto;
  align-items: center;
  gap: 0.4rem 1.5rem;
  margin-top: clamp(3rem, 2.4rem + 2vw, 4.5rem);
  padding: clamp(1.4rem, 1.2rem + 1vw, 2rem) 0;
  border-top: 1px solid var(--hairline-2);
  border-bottom: 1px solid var(--hairline-2);
  transition: border-color 0.4s var(--jett-ease-out);
}
.letter__case:hover { border-color: var(--accent); }
.letter__case-t {
  grid-column: 1;
  font-family: var(--jett-font-display);
  font-weight: 700;
  font-size: clamp(1.25rem, 1.05rem + 1vw, 1.9rem);
  line-height: 1.14;
  letter-spacing: -0.022em;
  color: var(--ink-strong);
  text-wrap: balance;
}
.letter__case-s {
  grid-column: 1;
  font-size: var(--jett-step-0);
  color: var(--ink-mute);
}
.letter__case i {
  grid-column: 2; grid-row: 1 / span 2;
  font-size: 1.5rem; color: var(--accent);
  transition: transform 0.4s var(--jett-ease-out);
}
.letter__case:hover i { transform: translateX(0.4rem); }

/* Where to go next. Rows, not a screen of doorways. */
.letter__nav { display: flex; flex-direction: column; margin-top: clamp(2.5rem, 2rem + 2vw, 4rem); }
.lnav {
  display: flex;
  align-items: baseline;
  gap: 0.55em;
  padding: clamp(0.9rem, 0.75rem + 0.6vw, 1.35rem) 0;
  border-bottom: 1px solid var(--hairline);
  transition: border-color 0.4s var(--jett-ease-out);
}
.lnav:first-child { border-top: 1px solid var(--hairline); }
.lnav:hover, .lnav:focus-visible { border-color: var(--accent); outline: none; }
.lnav__for {
  font-family: var(--jett-font-display);
  font-weight: 300;
  font-size: clamp(1rem, 0.9rem + 0.5vw, 1.3rem);
  color: var(--ink-soft);
  transition: color 0.4s var(--jett-ease-out);
}
.lnav__word {
  font-family: var(--jett-font-display);
  font-weight: 700;
  font-size: clamp(1.7rem, 1.3rem + 2vw, 3.1rem);
  letter-spacing: -0.032em;
  line-height: 1.1;
  color: var(--ink-mute);
  transition: color 0.4s var(--jett-ease-out), transform 0.5s var(--jett-ease-out);
}
.lnav__arrow {
  margin-left: auto;
  font-size: clamp(1.1rem, 0.9rem + 0.7vw, 1.6rem);
  color: var(--accent);
  opacity: 0;
  transform: translateX(-0.5em);
  transition: opacity 0.4s var(--jett-ease-out), transform 0.5s var(--jett-ease-out);
}
.lnav:hover .lnav__word, .lnav:focus-visible .lnav__word { color: var(--ink-strong); transform: translateX(0.3rem); }
.lnav:hover .lnav__for,  .lnav:focus-visible .lnav__for  { color: var(--ink-dim); }
.lnav:hover .lnav__arrow,.lnav:focus-visible .lnav__arrow { opacity: 1; transform: none; }

.letter__tag {
  margin-top: clamp(2.5rem, 2rem + 2vw, 4rem);
  font-family: var(--jett-font-mono);
  font-size: 12px;
  letter-spacing: 0.2em;
  text-transform: uppercase;
  color: var(--ink-soft);
}

/* ---- Reveal ---------------------------------------------------------------
   Matching jettsports.com: the paragraph is the unit, lifting 35px as it
   fades. Characters read as disjointed, because the eye starts reading a
   sentence before the sentence has finished arriving. */
.letter__body p[data-animate] { opacity: 0; transform: translateY(35px); }
@media (max-width: 720px) { .letter__body p[data-animate] { transform: translateY(15px); } }
@media (prefers-reduced-motion: reduce) {
  .letter__body p[data-animate] { opacity: 1 !important; transform: none !important; }
}

/* =============================================================================
   PILLAR: the content view revealed after a doorway.
   ============================================================================= */
.pillar { position: relative; z-index: 10; }
.pillar[hidden] { display: none; }

/* Pillar hero: transparent so the cine shows through. */
.phero {
  min-height: 100vh;        /* fallback */
  min-height: 100svh;       /* avoids iOS Safari toolbar overlap */
  display: flex;
  align-items: center;
  padding: 7rem 0 4rem;
}
.phero__inner { width: 100%; }
.phero__eyebrow {
  display: flex; align-items: baseline; gap: 0.8rem;
  font-family: var(--jett-font-mono);
  font-size: 12px;
  letter-spacing: 0.22em;
  text-transform: uppercase;
  color: var(--ink-mute);
  margin-bottom: 1.6rem;
}
.phero__idx { color: var(--accent); }
.phero__title {
  font-family: var(--jett-font-display);
  font-weight: 700;
  font-size: clamp(2.8rem, 1.6rem + 6vw, 6.6rem);
  line-height: 0.98;
  letter-spacing: -0.035em;
  color: var(--ink-strong);
  margin-bottom: 1.8rem;
  text-wrap: balance;   /* keep each sentence from orphaning a lone word */
}
.phero__lede {
  font-family: var(--jett-font-body);
  font-weight: 300;
  font-size: clamp(1.05rem, 0.95rem + 0.6vw, 1.5rem);
  line-height: 1.5;
  color: var(--ink-dim);
  max-width: 46ch;
}
.phero__lede strong { color: var(--ink-strong); font-weight: 600; }
/* Scroll cue. No label: a lit segment descends a hairline and dissolves at
   both ends, which says "there is more below" without saying it. The mask is
   what keeps it from reading as a progress bar. */
.phero__cue {
  display: block;
  width: 9px;
  height: 64px;
  margin-top: 3.5rem;
  -webkit-mask-image: linear-gradient(180deg, transparent 0%, #000 22%, #000 68%, transparent 100%);
          mask-image: linear-gradient(180deg, transparent 0%, #000 22%, #000 68%, transparent 100%);
}
.phero__cue svg { display: block; overflow: visible; }
.phero__cue-track  { stroke: var(--hairline-2); stroke-width: 1; }
.phero__cue-runner {
  stroke: var(--accent-strong);
  stroke-width: 1;
  /* 16 lit against a 64 period, so exactly one segment is on the track */
  stroke-dasharray: 16 48;
  animation: cue-descend 3.6s cubic-bezier(0.45, 0, 0.25, 1) infinite;
}
/* Decreasing the offset walks the dash forward, which is downward here. One
   full period, so the loop has no seam. */
@keyframes cue-descend {
  from { stroke-dashoffset: 64; }
  to   { stroke-dashoffset: 0; }
}

/* Sections below the hero are tinted, not solid, so the fixed cinema behind
   carries through the whole page instead of stopping under the hero. The
   tint is heavy enough to hold body copy; see .cine__scrim for the other
   half of the composite. */
.pslab, .pmodel, .pframe, .pstats, .pclose {
  position: relative;
  background: rgba(9, 17, 34, 0.72);
  border-top: 1px solid var(--hairline);
}
/* The case study keeps its solid ground: it is being marked up, and its
   renders sit beside the copy rather than behind it. */
[data-screen="inter-miami"] .pslab,
[data-screen="inter-miami"] .pclose,
[data-screen="work"] .pslab { background: var(--jett-navy); }
.pslab { padding: clamp(4rem, 3rem + 6vw, 9rem) 0; }
.thesis {
  font-family: var(--jett-font-display);
  font-weight: 600;
  font-size: clamp(1.6rem, 1rem + 3vw, 3.4rem);
  line-height: 1.12;
  letter-spacing: -0.022em;
  color: var(--ink-strong);
  max-width: 24ch;
}

/* Old / new model */
.pmodel { padding: clamp(3.5rem, 2.5rem + 4vw, 7rem) 0; }
.pmodel__grid {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: clamp(1.5rem, 1rem + 3vw, 4rem);
}
@media (max-width: 820px) { .pmodel__grid { grid-template-columns: 1fr; } }
.pmodel__tag {                     /* column title */
  font-family: var(--jett-font-display);
  font-weight: 700; font-size: var(--jett-step-2);
  letter-spacing: -0.01em;
  color: var(--ink-dim);
  padding-bottom: 1rem; margin-bottom: 1.4rem;
  border-bottom: 1px solid var(--hairline-2);
}
.pmodel__col--new .pmodel__tag { color: var(--accent); border-color: var(--accent); }
.pmodel__list { display: grid; gap: 0.9rem; }
.pmodel__list li {
  position: relative;
  padding-left: 1.4rem;
  font-size: var(--jett-step-0);
  line-height: 1.55;
  color: var(--ink-dim);
}
.pmodel__list li::before {
  content: ''; position: absolute; left: 0; top: 0.62em;
  width: 6px; height: 6px; border-radius: 50%;
  background: var(--ink-ghost);
}
.pmodel__col--new .pmodel__list li { color: var(--ink-strong); }
.pmodel__col--new .pmodel__list li::before { background: var(--accent); }

/* 01/02/03 framework */
.pframe { padding: clamp(3.5rem, 2.5rem + 4vw, 7rem) 0; }
.pframe__grid {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: clamp(1.5rem, 1rem + 2vw, 3rem);
  margin-top: 2.5rem;
}
@media (max-width: 820px) { .pframe__grid { grid-template-columns: 1fr; } }
.pframe__step { padding-top: 1.4rem; border-top: 1px solid var(--hairline-2); }
.pframe__num {                         /* was the tiny label: now the title */
  display: block;
  font-family: var(--jett-font-display);
  font-weight: 700; font-size: var(--jett-step-2);
  letter-spacing: -0.02em; color: var(--ink-strong);
}
.pframe__h {                           /* was the heading: now the subtitle */
  font-family: var(--jett-font-body);
  font-weight: 500; font-size: var(--jett-step-1);
  letter-spacing: -0.01em; color: var(--ink-dim);
  margin: 0.35rem 0 0.7rem;
}
.pframe__p { font-size: var(--jett-step-0); line-height: 1.55; color: var(--ink-soft); max-width: 32ch; }

/* Stat band */
.pstats { padding: clamp(3.5rem, 2.5rem + 4vw, 6.5rem) 0; }
.pstats__grid {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: clamp(1.5rem, 1rem + 2vw, 3rem);
}
@media (max-width: 720px) { .pstats__grid { grid-template-columns: 1fr; gap: 2.5rem; } }
.pstat { display: flex; flex-direction: column; gap: 0.5rem; }
.pstat__n {
  font-family: var(--jett-font-display);
  font-weight: 800;
  font-size: clamp(3rem, 2rem + 4vw, 5.5rem);
  line-height: 0.9;
  letter-spacing: -0.04em;
  color: var(--ink-strong);
}
.pstat__l {
  font-family: var(--jett-font-mono);
  font-size: 11px; letter-spacing: 0.2em; text-transform: uppercase;
  color: var(--ink-mute);
}

/* Proof band: real case study (Inter Miami CF / Nu Stadium) */
.pproof {
  background: rgba(5, 9, 18, 0.74);
  border-top: 1px solid var(--hairline);
  padding: clamp(4rem, 3rem + 4vw, 8rem) 0;
}
.pproof__h {
  font-family: var(--jett-font-display);
  font-weight: 700;
  font-size: clamp(1.7rem, 1.1rem + 3vw, 3.4rem);
  line-height: 1.08;
  letter-spacing: -0.025em;
  color: var(--ink-strong);
  max-width: 26ch;
  margin: 0 0 0.7rem;
  word-spacing: 0.1em;   /* restore inter-word spacing the negative tracking collapses */
  text-wrap: balance;    /* never orphan a single word on its own line */
}
.pproof__sub {           /* the case entities, as a readable subtitle */
  font-family: var(--jett-font-body);
  font-weight: 400;
  font-size: var(--jett-step-1);
  letter-spacing: -0.005em;
  color: var(--ink-dim);
  margin: 0 0 2.6rem;
}
/* Same corrections for the other split-word statement headings */
.thesis, .pclose__h { word-spacing: 0.1em; text-wrap: balance; }
.pproof__grid {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: clamp(1.5rem, 1rem + 2vw, 3rem);
}
@media (max-width: 820px) { .pproof__grid { grid-template-columns: 1fr; } }
.pproof__item { padding-top: 1.4rem; border-top: 1px solid var(--hairline-2); }
.pproof__k {                           /* was the tiny label: now the title */
  display: block;
  font-family: var(--jett-font-display);
  font-weight: 600;
  font-size: var(--jett-step-1);
  letter-spacing: -0.01em;
  color: var(--ink-strong);
  margin-bottom: 0.5rem;
}
.pproof__item p { font-size: var(--jett-step-0); line-height: 1.55; color: var(--ink-dim); }

/* Closing */
.pclose { padding: clamp(3.5rem, 2.5rem + 3vw, 6rem) 0; text-align: center; }
.pclose__h {
  font-family: var(--jett-font-display);
  font-weight: 700;
  font-size: clamp(2rem, 1.2rem + 4vw, 4.4rem);
  line-height: 1.02;      /* display type: never inherit the 1.55 body leading */
  letter-spacing: -0.03em;
  color: var(--ink-strong);
  max-width: 18ch; margin: 0 auto 2.2rem;
}
.pclose__cta {
  display: inline-flex; align-items: center; gap: 0.7rem;
  font-family: var(--jett-font-mono);
  font-size: 12px; letter-spacing: 0.2em; text-transform: uppercase;
  color: var(--ink-strong);
  border: 1px solid var(--hairline-2);
  border-radius: 100px;
  padding: 0.9rem 1.6rem;
  transition: border-color 0.35s, gap 0.35s;
}
.pclose__cta:hover { border-color: var(--accent); gap: 1.1rem; }
.pclose__cta i { color: var(--accent); }

/* Pillar footer */
.pfoot { background: rgba(5, 9, 18, 0.82); padding: 3.5rem 0 3rem; border-top: 1px solid var(--hairline); position: relative; z-index: 10; }
.pfoot__row { display: flex; justify-content: space-between; align-items: flex-start; gap: 2rem; flex-wrap: wrap; }
.pfoot__logo { height: 30px; width: auto; display: block; margin-bottom: 0.5rem; }
.pfoot__tag { font-size: 0.9rem; color: var(--ink-mute); margin-top: 0.3rem; display: block; }
.pfoot__links { display: flex; gap: 1.6rem; flex-wrap: wrap; }
.pfoot__links a { font-family: var(--jett-font-mono); font-size: 11px; letter-spacing: 0.2em; text-transform: uppercase; color: var(--ink-soft); transition: color 0.3s; }
.pfoot__links a:hover { color: var(--ink-strong); }

/* =============================================================================
   PILLAR TYPE SCALE
   Matt's note was that the pillars are too small to read. Everything steps up
   one, and the whole triplet moves together so title > subtitle > paragraph
   still holds. Scoped to the three pillars on purpose: the case study is being
   marked up and must not shift under Karina.
   ============================================================================= */
[data-screen="brands"],
[data-screen="properties"],
[data-screen="capital"] {
  /* Hero */
  --p-lede:  clamp(1.2rem, 1.05rem + 0.75vw, 1.72rem);
  /* Body copy across the sections */
  --p-body:  var(--jett-step-1);
  /* The line above it */
  --p-sub:   clamp(1.35rem, 1.2rem + 0.6vw, 1.65rem);
  /* Block titles */
  --p-title: clamp(1.6rem, 1.35rem + 1vw, 2.3rem);
}
[data-screen="brands"] .phero__lede,
[data-screen="properties"] .phero__lede,
[data-screen="capital"] .phero__lede { font-size: var(--p-lede); max-width: 42ch; }

[data-screen="brands"] .pmodel__tag,
[data-screen="properties"] .pmodel__tag,
[data-screen="capital"] .pmodel__tag,
[data-screen="brands"] .pframe__num,
[data-screen="properties"] .pframe__num,
[data-screen="capital"] .pframe__num,
[data-screen="brands"] .pproof__k,
[data-screen="properties"] .pproof__k,
[data-screen="capital"] .pproof__k { font-size: var(--p-title); }

[data-screen="brands"] .pframe__h,
[data-screen="properties"] .pframe__h,
[data-screen="capital"] .pframe__h,
[data-screen="brands"] .pproof__sub,
[data-screen="properties"] .pproof__sub,
[data-screen="capital"] .pproof__sub { font-size: var(--p-sub); }

[data-screen="brands"] .pmodel__list li,
[data-screen="properties"] .pmodel__list li,
[data-screen="capital"] .pmodel__list li,
[data-screen="brands"] .pframe__p,
[data-screen="properties"] .pframe__p,
[data-screen="capital"] .pframe__p,
[data-screen="brands"] .pproof__item p,
[data-screen="properties"] .pproof__item p,
[data-screen="capital"] .pproof__item p {
  font-size: var(--p-body);
  line-height: 1.6;
  max-width: 40ch;
  /* .pframe__p was set in --ink-soft (45% alpha). Against a tinted background
     that measured 4.1:1, under the 4.5 AA needs. Body copy across the pillars
     now shares one ink. */
  color: var(--ink-dim);
}

/* =============================================================================
   PILLAR PROOF: the render sits beside the copy, which is the case study
   format Matt preferred over a wall of paragraphs.
   ============================================================================= */
.pproof__split {
  display: grid;
  grid-template-columns: minmax(0, 5fr) minmax(0, 7fr);
  gap: clamp(2rem, 1.5rem + 3vw, 4rem);
  /* Top aligned, not centred: the copy column is far taller, and centring left
     the render floating in the middle of its own empty space. */
  align-items: start;
}
.pproof__art { position: sticky; top: 120px; }
@media (max-width: 900px) {
  .pproof__split { grid-template-columns: 1fr; gap: 2rem; }
  .pproof__art { position: static; }
}
.pproof__art {
  margin: 0;
  border-radius: 8px;
  overflow: hidden;
  border: 1px solid var(--hairline-2);
}
/* 16:9 everywhere: these frames carry their own artwork and lettering, and
   a squarer crop cut straight through it. */
.pproof__art img { width: 100%; height: auto; object-fit: cover; display: block; aspect-ratio: 16 / 9; }
/* Beside an image the three points stack rather than sitting in three columns. */
.pproof__split .pproof__grid { grid-template-columns: 1fr; gap: clamp(1.2rem, 1rem + 1vw, 1.8rem); }

/* =============================================================================
   OVERLAY: Contact / About. Fixed, fades in over everything, no reload.
   ============================================================================= */
.overlay {
  position: fixed;
  inset: 0;
  z-index: 60;
  background: color-mix(in oklab, var(--jett-navy-deep) 92%, black);
  overflow-y: auto;                  /* scroll inside the overlay */
  -webkit-overflow-scrolling: touch;
  overscroll-behavior: contain;      /* don't chain scroll to the page behind */
  opacity: 0;
  visibility: hidden;
  transform: translateY(14px);
  transition: opacity 0.5s var(--jett-ease-out), transform 0.6s var(--jett-ease-out), visibility 0.5s;
}
.overlay.is-open { opacity: 1; visibility: visible; transform: none; }
body.overlay-open { overflow: hidden; }

.overlay__close {
  position: fixed;
  top: clamp(1.2rem, 1rem + 1vw, 2rem);
  right: var(--jett-page-pad);
  z-index: 2;
  font-family: var(--jett-font-mono);
  font-size: 11px; letter-spacing: 0.2em; text-transform: uppercase;
  color: var(--ink-dim);
  display: inline-flex; align-items: center; gap: 0.5rem;
  transition: color 0.3s;
}
.overlay__close i { font-size: 1.3rem; line-height: 0; color: var(--accent); }
.overlay__close:hover { color: var(--ink-strong); }

/* Contact: centered single screen (scrolls when taller than the viewport) */
.overlay__inner {
  min-height: 100%;
  display: flex;
  flex-direction: column;
  justify-content: center;
  width: 100%;
  max-width: 760px;
  margin: 0 auto;
  padding: clamp(5rem, 11vh, 7rem) var(--jett-page-pad) clamp(3rem, 7vh, 4.5rem);
}
.overlay__h {
  font-family: var(--jett-font-display);
  font-weight: 700;
  font-size: clamp(2rem, 1.3rem + 3.5vw, 3.8rem);
  line-height: 1.02;
  letter-spacing: -0.03em;
  color: var(--ink-strong);
  margin: 1.3rem 0 1rem;
}
.overlay__lede {
  font-family: var(--jett-font-body);
  font-weight: 300;
  font-size: var(--jett-step-1);
  line-height: 1.55;
  color: var(--ink-dim);
  max-width: 48ch;
  margin-bottom: 2.6rem;
}
.overlay__alt {
  margin-top: 1.6rem;
  font-size: var(--jett-step-0);
  color: var(--ink-mute);
}
.overlay__alt a { color: var(--ink-strong); border-bottom: 1px solid var(--hairline-2); transition: border-color 0.3s; }
.overlay__alt a:hover { border-color: var(--accent); }

/* Contact form */
.cform { display: grid; gap: 1.4rem; }
.cform__row { display: grid; grid-template-columns: 1fr 1fr; gap: 1.4rem; }
@media (max-width: 620px) { .cform__row { grid-template-columns: 1fr; } }
.cform__field { display: grid; gap: 0.5rem; }
.cform__field span {
  font-family: var(--jett-font-mono);
  font-size: 10px; letter-spacing: 0.2em; text-transform: uppercase;
  color: var(--ink-mute);
}
.cform__field input,
.cform__field textarea {
  font-family: var(--jett-font-body);
  font-size: var(--jett-step-0);
  color: var(--ink-strong);
  background: transparent;
  border: 0;
  border-bottom: 1px solid var(--hairline-2);
  padding: 0.6rem 0;
  border-radius: 0;
  transition: border-color 0.3s;
  resize: vertical;
}
.cform__field input:focus,
.cform__field textarea:focus { outline: none; border-color: var(--accent); }
.cform__submit {
  justify-self: start;
  margin-top: 0.8rem;
  display: inline-flex; align-items: center; gap: 0.7rem;
  font-family: var(--jett-font-mono);
  font-size: 12px; letter-spacing: 0.2em; text-transform: uppercase;
  color: var(--ink-strong);
  border: 1px solid var(--hairline-2);
  border-radius: 100px;
  padding: 0.9rem 1.6rem;
  transition: border-color 0.35s, gap 0.35s;
}
.cform__submit i { color: var(--accent); }
.cform__submit:hover { border-color: var(--accent); gap: 1.1rem; }

/* About: scrollable document */
.overlay--scroll { overflow-y: auto; -webkit-overflow-scrolling: touch; }
.overlay__doc { padding: clamp(5rem, 4rem + 4vw, 8rem) 0 5rem; }
.adoc__hero { padding-bottom: clamp(2rem, 1.5rem + 2vw, 3.5rem); }
.adoc__title {
  font-family: var(--jett-font-display);
  font-weight: 700;
  font-size: clamp(2.4rem, 1.5rem + 4.5vw, 5.2rem);
  line-height: 0.98;
  letter-spacing: -0.035em;
  color: var(--ink-strong);
  margin: 1.3rem 0 1.4rem;
}
.adoc__lede {
  font-family: var(--jett-font-body);
  font-weight: 300;
  font-size: var(--jett-step-1);
  line-height: 1.55;
  color: var(--ink-dim);
  max-width: 54ch;
}
.adoc__sec {
  padding: clamp(2.5rem, 2rem + 2vw, 4rem) var(--jett-page-pad);
  border-top: 1px solid var(--hairline);
}
.adoc__sec .pframe__grid { margin-top: 2rem; }
.adoc__sec .pframe__step { opacity: 1; transform: none; }
.adoc__h {
  font-family: var(--jett-font-display);
  font-weight: 700;
  font-size: clamp(1.6rem, 1.1rem + 2.4vw, 3rem);
  line-height: 1.06;
  letter-spacing: -0.025em;
  color: var(--ink-strong);
  margin: 1.2rem 0 1rem;
  max-width: 22ch;
}
.adoc__p {
  font-family: var(--jett-font-body);
  font-size: var(--jett-step-0);
  line-height: 1.6;
  color: var(--ink-dim);
  max-width: 60ch;
}
.adoc__sec--close .pclose__cta { margin-top: 2rem; }

/* About sections: same title/subtitle treatment as the pillars: promote the
   small label to a title, demote the heading to a subtitle. No tiny eyebrows. */
.adoc__sec .jett-eyebrow {
  display: block;
  font-family: var(--jett-font-display);
  font-weight: 700;
  font-size: var(--jett-step-2);
  letter-spacing: -0.02em;
  text-transform: none;
  color: var(--ink-strong);
  margin-bottom: 0.4rem;
}
.adoc__sec .jett-eyebrow .dot { display: none; }
.adoc__sec .jett-eyebrow--accent { color: var(--ink-strong); }
.adoc__sec .adoc__h {
  font-family: var(--jett-font-body);
  font-weight: 500;
  font-size: var(--jett-step-1);
  line-height: 1.4;
  letter-spacing: -0.01em;
  color: var(--ink-dim);
  margin: 0 0 0.9rem;
  max-width: 48ch;
}

/* =============================================================================
   PRESS CLIPPINGS: proprietary compact newspaper-clipping card.
   Outlet masthead + date/author over a hairline rule, then a serif headline,
   set on a cream "paper" tile with a stacked-sheet edge. One <a class="clip">
   per article; the whole tile links out.
   ============================================================================= */
.clips {
  position: relative;
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: 2.5rem;
  margin: 0.5rem 0 0;
  align-items: start;
}
/* Decorative S-curve threading the clippings together (drawn in JS, behind cards). */
.clips__thread { position: absolute; top: 0; left: 0; z-index: 3; overflow: visible; pointer-events: none;
  /* The fade back in after a re-sort is a CSS transition, not a tween:
     a stalled ticker used to leave the thread stranded at opacity 0. */
  transition: opacity 0.4s var(--jett-ease-out); }
.clips__thread path {
  fill: none;
  stroke: var(--accent);
  stroke-width: 1;
  opacity: 0.55;
  stroke-linecap: round;
  stroke-linejoin: round;                     /* thin, solid line */
}
.clip {
  display: block;
  position: relative;
  z-index: 1;                                /* sit above the thread */
  --clip-offset: 0px;
  transform: translateY(var(--clip-offset));
  background: #f5f2ea;                       /* newsprint paper */
  color: #16130d;
  border-radius: 4px;
  padding: 1.05rem 1.2rem 1.2rem;
  text-decoration: none;
  /* two offset sheets peeking bottom-right + a soft ambient lift = a clipping stack */
  box-shadow:
    3px 3px 0 0 #ece7db,
    6px 6px 0 0 #e3ddce,
    0 16px 34px -18px rgba(0, 0, 0, 0.65);
  transition: transform 0.3s ease, box-shadow 0.3s ease;
}
/* Offset grid: JS tags the right-column cards, which sit a little lower so the
   two columns stagger instead of locking into rigid rows. */
.clip--right { --clip-offset: 3.25rem; }
.clip:hover,
.clip:focus-visible {
  transform: translateY(calc(var(--clip-offset) - 3px));
  box-shadow:
    3px 3px 0 0 #ece7db,
    6px 6px 0 0 #e3ddce,
    0 24px 44px -16px rgba(0, 0, 0, 0.7);
  outline: none;
}
.clip__top {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 1rem;
  min-height: 30px;
  padding-bottom: 0.6rem;
  border-bottom: 1px solid rgba(22, 19, 13, 0.22);
}
.clip__outlet {   /* text-masthead fallback when an outlet has no logo yet */
  font-family: Georgia, "Times New Roman", serif;
  font-weight: 700;
  font-size: clamp(0.95rem, 0.9rem + 0.3vw, 1.12rem);
  letter-spacing: -0.01em;
  color: #16130d;
  line-height: 1;
  white-space: nowrap;
}
/* Real outlet logos (trimmed to their content box, so height == cap line).
   Single-line wordmarks share the base height; denser lockups and square
   marks get a per-outlet bump so they read at the same optical weight. */
.clip__logo {
  height: 18px;                 /* single-line wordmarks: espn, forbes, sportico, nbc, the-athletic, nu-stadium, nubank */
  width: auto;
  max-width: 160px;
  object-fit: contain;
  object-position: left center;
  display: block;
}
.clip__logo[data-outlet="sbj"]         { height: 26px; }   /* stacked "Street & Smith's / SBJ / Sports Business Journal" */
.clip__logo[data-outlet="mls"]         { height: 28px; }   /* square shield */
.clip__logo[data-outlet="inter-miami"] { height: 28px; }   /* square crest */
.clip__meta {
  display: flex;
  flex-direction: column;
  align-items: flex-end;
  gap: 0.1rem;
  text-align: right;
  font-family: Georgia, "Times New Roman", serif;
  font-size: 13.5px;
  line-height: 1.3;
  color: #6f685b;
  flex: none;
}
.clip__meta time { color: #423b30; }
.clip__meta em { font-style: normal; font-weight: 700; color: #16130d; }
.clip__headline {
  margin: 0.7rem 0 0;
  font-family: Georgia, "Times New Roman", serif;
  font-weight: 700;
  font-size: clamp(1.05rem, 0.95rem + 0.5vw, 1.24rem);
  line-height: 1.18;
  letter-spacing: -0.005em;
  color: #16130d;
}
.clip:hover .clip__headline { text-decoration: underline; text-decoration-thickness: 1px; text-underline-offset: 2px; }
/* Narrow: single column, no offset, no thread. */
@media (max-width: 760px) {
  .clips { grid-template-columns: 1fr; gap: 1.4rem; }
  .clip--right { --clip-offset: 0px; }
  .clips__thread { display: none; }
}
.clip.is-hidden { display: none; }

/* --- Press controls: search / sort / outlet filter --------------------- */
.press-controls {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  justify-content: space-between;
  gap: 1rem 1.5rem;
  margin-bottom: 1.3rem;
}
.press-search {
  display: flex;
  align-items: center;
  gap: 0.6rem;
  flex: 1 1 260px;
  max-width: 400px;
  padding: 0.55rem 0.2rem;
  border-bottom: 1px solid var(--hairline-2);
  transition: border-color 0.3s;
}
.press-search:focus-within { border-color: var(--accent); }
.press-search__icon {
  width: 16px; height: 16px; flex: none;
  fill: none; stroke: var(--ink-soft); stroke-width: 1.6; stroke-linecap: round;
  transition: stroke 0.3s;
}
.press-search:focus-within .press-search__icon { stroke: var(--accent); }
.press-search input {
  flex: 1; min-width: 0;
  background: none; border: none; outline: none;
  color: var(--ink-strong);
  font-family: var(--jett-font-body);
  font-size: 0.95rem; letter-spacing: -0.01em;
}
.press-search input::placeholder { color: var(--ink-soft); }
.press-search input::-webkit-search-cancel-button { -webkit-appearance: none; }

.press-sort { display: flex; align-items: center; gap: 0.4rem; flex-wrap: wrap; }
.press-sort__label,
.press-outlets__label {
  font-family: var(--jett-font-mono);
  font-size: 14px; letter-spacing: 0.18em; text-transform: uppercase;
  color: var(--ink-soft); margin-right: 0.35rem;
}
.press-sort button,
.pfilter {
  font-family: var(--jett-font-mono);
  font-size: 15px; letter-spacing: 0.05em; text-transform: uppercase;
  color: var(--ink-dim);
  background: none;
  border: 1px solid var(--hairline-2);
  border-radius: 100px;
  padding: 0.5rem 1rem;
  cursor: pointer;
  white-space: nowrap;
  transition: color 0.25s, border-color 0.25s, background 0.25s;
}
.press-sort button:hover,
.pfilter:hover { color: var(--ink-strong); border-color: var(--ink-soft); }
.press-sort button.is-active,
.pfilter.is-active {
  color: var(--jett-navy);
  background: var(--accent);
  border-color: var(--accent);
}
.pfilter__count { opacity: 0.55; margin-left: 0.35em; }

.press-outlets {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 0.5rem;
  margin-bottom: 1.1rem;
}
.press-count {
  font-family: var(--jett-font-mono);
  font-size: 14px; letter-spacing: 0.16em; text-transform: uppercase;
  color: var(--ink-soft);
  margin: 0 0 1.4rem;
}
.press-empty {
  font-family: var(--jett-font-body);
  font-size: var(--jett-step-1);
  color: var(--ink-dim);
  padding: 2.5rem 0;
  text-align: center;
}
.press-empty button {
  background: none; border: none; cursor: pointer;
  color: var(--accent); font: inherit;
  text-decoration: underline; text-underline-offset: 3px;
}

/* =============================================================================
   WORK / CASE STUDY
   Screens, not overlays: a case study gets the same cinematic treatment as a
   pillar. Sections alternate navy / navy-deep with a hairline between, and
   every section head follows the site convention of TITLE then SUBTITLE
   (no tiny tracked eyebrows).
   ============================================================================= */

/* Work heroes sit over a bright render (a lit stadium, not a night skyline),
   so they carry an extra scrim weighted to the text side. Pillar heroes are
   untouched. */
.phero--case::before,
.phero--index::before {
  content: '';
  position: absolute;
  inset: 0;
  pointer-events: none;
  background: linear-gradient(100deg,
    rgba(5, 9, 18, 0.90) 0%,
    rgba(5, 9, 18, 0.72) 34%,
    rgba(5, 9, 18, 0.30) 62%,
    rgba(5, 9, 18, 0.42) 100%);
}
.phero--case,
.phero--index { position: relative; }
.phero--case .phero__inner,
.phero--index .phero__inner { position: relative; z-index: 1; }

/* ---- Shared section heads ------------------------------------------------ */
.cssec__h {
  font-family: var(--jett-font-display);
  font-weight: 700;
  font-size: clamp(1.7rem, 1.1rem + 3vw, 3.4rem);
  line-height: 1.08;
  letter-spacing: -0.025em;
  color: var(--ink-strong);
  max-width: 24ch;
  margin: 0;
  word-spacing: 0.1em;   /* restore the spacing negative tracking collapses */
  text-wrap: balance;
}
.cssec__sub {
  font-family: var(--jett-font-body);
  font-weight: 500;
  font-size: var(--jett-step-1);
  letter-spacing: -0.01em;
  color: var(--ink-dim);
  margin: 0.45rem 0 0;
}
.cssec__lede {
  font-family: var(--jett-font-body);
  font-weight: 300;
  font-size: var(--jett-step-0);
  line-height: 1.55;
  color: var(--ink-dim);
  max-width: 56ch;
  margin: 1.1rem 0 0;
}

/* Quiet outbound link, same grammar as .pclose__cta without the pill. */
.cslink {
  display: inline-flex;
  align-items: center;
  gap: 0.6rem;
  margin-top: 2rem;
  padding-bottom: 0.35rem;
  font-family: var(--jett-font-mono);
  font-size: 12px;
  letter-spacing: 0.2em;
  text-transform: uppercase;
  color: var(--ink-strong);
  border-bottom: 1px solid var(--hairline-2);
  transition: border-color 0.35s, gap 0.35s;
}
.cslink i { color: var(--accent); }
.cslink:hover { border-color: var(--accent); gap: 1rem; }
.cslink--proof { margin-top: 2.8rem; }

/* =============================================================================
   THE CASE STUDY ON THE HOME PAGE
   Its old hero was a full screen of its own. Here it is an opening statement
   that hands off from the letter, so the page reads as one continuous piece.
   ============================================================================= */
.casehead {
  position: relative;
  background: rgba(9, 17, 34, 0.72);
  border-top: 1px solid var(--hairline);
  padding: clamp(4rem, 3rem + 4vw, 7rem) 0 clamp(2.5rem, 2rem + 2vw, 4rem);
}
.casehead__title {
  font-family: var(--jett-font-display);
  font-weight: 700;
  font-size: clamp(2.1rem, 1.5rem + 3.2vw, 4.2rem);
  line-height: 1.02;
  letter-spacing: -0.032em;
  color: var(--ink-strong);
  max-width: 20ch;
  margin: 0 0 1.2rem;
  word-spacing: 0.08em;
  text-wrap: balance;
}
.casehead__lede {
  font-family: var(--jett-font-body);
  font-weight: 300;
  font-size: clamp(1.05rem, 0.98rem + 0.4vw, 1.3rem);
  line-height: 1.55;
  color: var(--ink-dim);
  max-width: 52ch;
}
.casehead .csmeta { margin-top: clamp(2rem, 1.6rem + 1.5vw, 3rem); }

/* =============================================================================
   ONWARD
   The hand-off from the work to the three ways in. Without a line here the
   pillars read as a menu appearing from nowhere.
   ============================================================================= */
/* The press wall now closes the page instead of sitting under the letter, so
   it needs the band treatment the onward block used to carry: its own ground,
   a hairline above it, and the same vertical room. The wall's own rules are
   unchanged; only its container moved. */
.cswires-band {
  position: relative;
  background: rgba(5, 9, 18, 0.8);
  border-top: 1px solid var(--hairline);
  padding: clamp(4rem, 3rem + 4vw, 7rem) 0;
}
.cswires-band .cswires { margin-top: 0; }
.cswires-band .cswires__count {
  margin-bottom: 1.4rem;
}

.onward {
  position: relative;
  background: rgba(5, 9, 18, 0.8);
  border-top: 1px solid var(--hairline);
  padding: clamp(4rem, 3rem + 4vw, 7rem) 0;
}
.onward__title {
  font-family: var(--jett-font-display);
  font-weight: 700;
  font-size: clamp(1.7rem, 1.3rem + 2.2vw, 3rem);
  line-height: 1.06;
  letter-spacing: -0.028em;
  color: var(--ink-strong);
  max-width: 22ch;
  margin: 0 0 0.9rem;
  word-spacing: 0.08em;
  text-wrap: balance;
}
.onward__lede {
  font-family: var(--jett-font-body);
  font-weight: 300;
  font-size: var(--jett-step-1);
  line-height: 1.55;
  color: var(--ink-dim);
  max-width: 48ch;
  margin: 0;
}
.onward .letter__nav { margin-top: clamp(2.2rem, 1.8rem + 1.5vw, 3.2rem); }

/* =============================================================================
   WORK INDEX: the case study shelf.
   ============================================================================= */
.csindex {
  position: relative;
  background: var(--jett-navy);
  border-top: 1px solid var(--hairline);
  padding: clamp(3.5rem, 2.5rem + 4vw, 7rem) 0 clamp(4rem, 3rem + 4vw, 7rem);
}
.csindex__grid { display: grid; gap: clamp(2rem, 1.5rem + 2vw, 3.5rem); }

.cscard {
  display: grid;
  grid-template-columns: minmax(0, 7fr) minmax(0, 5fr);
  align-items: stretch;
  background: var(--jett-navy-lift);
  border: 1px solid var(--hairline-2);
  border-radius: 10px;
  overflow: hidden;
  transition: border-color 0.45s var(--jett-ease-out), transform 0.55s var(--jett-ease-out);
}
.cscard:hover,
.cscard:focus-visible { border-color: var(--accent); transform: translateY(-4px); outline: none; }

.cscard__art { position: relative; margin: 0; overflow: hidden; min-height: 300px; }
.cscard__art img {
  width: 100%; height: 100%;
  object-fit: cover;
  transform: scale(1.02);
  transition: transform 1.2s var(--jett-ease-out), filter 0.6s var(--jett-ease-out);
  filter: saturate(0.92);
}
.cscard:hover .cscard__art img { transform: scale(1.07); filter: saturate(1); }
/* Keep the navy mood over the render and let the crest sit legibly on top. */
.cscard__art::after {
  content: '';
  position: absolute; inset: 0;
  background: linear-gradient(105deg, rgba(5,9,18,0.55) 0%, rgba(5,9,18,0.10) 55%, rgba(5,9,18,0.35) 100%);
}
/* The club crest rides on its own sheet of paper: the real mark is dark, and
   it would disappear against the render underneath. */
.cscard__crest {
  position: absolute;
  left: clamp(1.1rem, 0.8rem + 1vw, 1.8rem);
  top: clamp(1.1rem, 0.8rem + 1vw, 1.8rem);
  z-index: 1;
  display: flex;
  align-items: center;
  justify-content: center;
  padding: 0.6rem;
  background: var(--jett-white);
  border-radius: 6px;
  box-shadow: 0 12px 26px -16px rgba(0, 0, 0, 0.9);
}
.cscard__crest img { height: clamp(40px, 30px + 1.4vw, 54px); width: auto; }

.cscard__body {
  display: flex;
  flex-direction: column;
  align-items: flex-start;
  padding: clamp(1.6rem, 1.2rem + 1.6vw, 2.8rem);
}
.cscard__h {
  font-family: var(--jett-font-display);
  font-weight: 700;
  font-size: clamp(1.5rem, 1.1rem + 1.6vw, 2.4rem);
  line-height: 1.06;
  letter-spacing: -0.025em;
  color: var(--ink-strong);
  margin: 0 0 0.9rem;
  text-wrap: balance;
}
.cscard__p {
  font-size: var(--jett-step-0);
  line-height: 1.6;
  color: var(--ink-dim);
  margin: 0;
  max-width: 42ch;
}
.cscard__tags {
  display: flex;
  flex-wrap: wrap;
  gap: 0.5rem;
  margin: 1.6rem 0 0;
}
.cscard__tags li {
  font-family: var(--jett-font-mono);
  font-size: 11px;
  letter-spacing: 0.16em;
  text-transform: uppercase;
  color: var(--ink-soft);
  border: 1px solid var(--hairline-2);
  border-radius: 100px;
  padding: 0.4rem 0.85rem;
}
.cscard__cta {
  display: inline-flex;
  align-items: center;
  gap: 0.6rem;
  margin-top: auto;
  padding-top: 1.8rem;
  font-family: var(--jett-font-mono);
  font-size: 12px;
  letter-spacing: 0.2em;
  text-transform: uppercase;
  color: var(--ink-strong);
  transition: gap 0.35s var(--jett-ease-out);
}
.cscard__cta i { color: var(--accent); }
.cscard:hover .cscard__cta { gap: 1.05rem; }

@media (max-width: 900px) {
  .cscard { grid-template-columns: 1fr; }
  .cscard__art { min-height: 220px; aspect-ratio: 16 / 9; }
  .cscard__cta { padding-top: 1.6rem; }
}

/* =============================================================================
   CASE STUDY: hero meta, numbers, chapters.
   ============================================================================= */

/* Hero fact row: client, role, scope, status */
.csmeta {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(170px, 1fr));
  gap: clamp(1.2rem, 1rem + 1.2vw, 2rem);
  margin-top: clamp(2.2rem, 1.8rem + 1.5vw, 3.2rem);
  max-width: 1000px;
}
.csmeta > div { padding-top: 1rem; border-top: 1px solid var(--hairline-2); }
.csmeta dt {
  font-family: var(--jett-font-mono);
  font-size: 11px;
  letter-spacing: 0.2em;
  text-transform: uppercase;
  color: var(--ink-soft);
  margin-bottom: 0.45rem;
}
.csmeta dd {
  font-size: var(--jett-step-0);
  line-height: 1.45;
  color: var(--ink-strong);
  margin: 0;
}
@media (max-width: 720px) {
  .csmeta { grid-template-columns: 1fr; gap: 0.8rem; margin-top: 1.6rem; }
  .phero--case { padding-top: 5.5rem; }
  .phero--case .phero__cue { margin-top: 1.8rem; }
}

/* =============================================================================
   FOREWORD. The note published on jettsports.com the day the partnership was
   announced, kept as a dated dispatch. Set as a letter so it reads as a record
   rather than as current copy: narrower measure, a rule down the left, signed.
   ============================================================================= */
.csnote {
  position: relative;
  background: var(--jett-navy);
  border-top: 1px solid var(--hairline);
  padding: clamp(3.5rem, 2.5rem + 4vw, 7rem) 0;
}
.csnote__letter {
  margin: clamp(2rem, 1.6rem + 1.5vw, 3rem) 0 0;
  padding-left: clamp(1.2rem, 1rem + 1vw, 2rem);
  border-left: 1px solid var(--accent);
  max-width: 62ch;
}
.csnote__letter p {
  font-family: var(--jett-font-body);
  font-weight: 300;
  font-size: var(--jett-step-0);
  line-height: 1.7;
  color: var(--ink-dim);
  margin: 0 0 1.15rem;
}
.csnote__letter p:last-of-type { margin-bottom: 0; }
.csnote__letter strong { color: var(--ink-strong); font-weight: 500; }
/* The two manifestos are the pivot of the note, so they get the accent rather
   than an italic the brand does not use. */
.csnote__letter em { color: var(--accent-strong); font-weight: 500; }
.csnote__sign {
  margin-top: 1.6rem;
  font-family: var(--jett-font-mono);
  font-size: 11px;
  letter-spacing: 0.2em;
  text-transform: uppercase;
  color: var(--ink-mute);
}
/* Day-one pickup. Compact and linked: the mastheads sit on their own paper
   so the real marks stay legible, and each one goes to the actual article. */
/* Sixteen mastheads is a wall, not a line, so it gets room to wrap and the
   chips are sized to sit evenly whether they carry a mark or a name. */
.cswires { margin-top: clamp(2.4rem, 2rem + 1.5vw, 3.4rem); }
.cswires__count {
  font-family: var(--jett-font-body);
  font-weight: 500;
  font-size: var(--jett-step-0);
  color: var(--ink-dim);
  margin: 0 0 1rem;
}
.cswires__row {
  display: flex;
  flex-wrap: wrap;
  align-items: stretch;
  gap: 0.5rem;
  margin: 0;
  padding: 0;
  list-style: none;
}
.cswires__row a {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  min-height: 38px;
  padding: 0 0.8rem;
  background: var(--jett-white);
  border-radius: 4px;
  opacity: 0.82;
  transition: opacity 0.3s var(--jett-ease-out), transform 0.3s var(--jett-ease-out);
}
.cswires__row a:hover,
.cswires__row a:focus-visible { opacity: 1; transform: translateY(-2px); outline: none; }
.cswires__row img { width: auto; height: 15px; object-fit: contain; display: block; }
.cswires__row img[data-wire="sbj"]          { height: 22px; }
.cswires__row img[data-wire="espn"]         { height: 13px; }
.cswires__row img[data-wire="the-athletic"] { height: 13px; }
.cswires__row img[data-wire="nbc-sports"]   { height: 17px; }
/* Square shield, so it needs the height a wordmark does not. */
.cswires__row img[data-wire="mls"]          { height: 26px; }
/* No mark on file for this one, so it keeps a text masthead, same as the
   press wall does. */
/* The unlinked names. Same paper, same serif, same everything, and now the
   same list: they differ by opacity alone, so they read as the wall continuing
   rather than as a second block. Keeping them in the one <ul> closes the hole
   that used to open at the end of the linked run.
   The ladder counts from the END of the list, not the start, because these are
   always the last children. That is what makes the walk down to almost-nothing
   land on the true last chip however many links sit in front of it. No mask: a
   gradient across the block restarts bright at the left of every wrapped row,
   which reads as a mistake. Order-based opacity survives wrapping. */
.cswires__faded {
  display: inline-flex;
  align-items: center;
  min-height: 38px;
  padding: 0 0.8rem;
  background: var(--jett-white);
  border-radius: 4px;
  font-family: Georgia, "Times New Roman", serif;
  font-weight: 700;
  font-size: 13.5px;
  letter-spacing: -0.01em;
  color: #16130d;
  white-space: nowrap;
  opacity: 0.70;
}
.cswires__faded:nth-last-child(-n+13) { opacity: 0.62; }
.cswires__faded:nth-last-child(-n+12) { opacity: 0.55; }
.cswires__faded:nth-last-child(-n+11) { opacity: 0.48; }
.cswires__faded:nth-last-child(-n+10) { opacity: 0.42; }
.cswires__faded:nth-last-child(-n+9) { opacity: 0.36; }
.cswires__faded:nth-last-child(-n+8) { opacity: 0.3; }
.cswires__faded:nth-last-child(-n+7) { opacity: 0.25; }
.cswires__faded:nth-last-child(-n+6) { opacity: 0.2; }
.cswires__faded:nth-last-child(-n+5) { opacity: 0.15; }
.cswires__faded:nth-last-child(-n+4) { opacity: 0.1; }
.cswires__faded:nth-last-child(-n+3) { opacity: 0.065; }
.cswires__faded:nth-last-child(-n+2) { opacity: 0.038; }
.cswires__faded:nth-last-child(-n+1) { opacity: 0.02; }

/* The vanish. No text, so the blur has nothing to smudge; it just softens the
   edge, which is what turns the last chips from small boxes into vapour. */
.cswires__ghost {
  padding: 0;
  border-radius: 4px;
}
.cswires__ghost:nth-last-child(3) { width: 84px; filter: blur(0.5px); }
.cswires__ghost:nth-last-child(2) { width: 56px; filter: blur(1px); }
.cswires__ghost:nth-last-child(1) { width: 32px; filter: blur(1.6px); }

/* No mark on file: a text masthead, the same fallback the press wall uses. */
.cswires__text {
  font-family: Georgia, "Times New Roman", serif;
  font-weight: 700;
  font-size: 13.5px;
  letter-spacing: -0.01em;
  color: #16130d;
  white-space: nowrap;
}

/* The hinge out of the note and into the analysis. */
.csnote__hinge {
  margin-top: clamp(2.2rem, 1.8rem + 1.5vw, 3rem);
  font-family: var(--jett-font-display);
  font-weight: 600;
  font-size: var(--jett-step-1);
  letter-spacing: -0.012em;
  color: var(--ink-strong);
  max-width: 46ch;
}
@media (max-width: 620px) {
  .csnote__letter { padding-left: 1rem; }
}

/* ---- Numbers band -------------------------------------------------------- */
.csstats {
  position: relative;
  background: var(--jett-navy);
  border-top: 1px solid var(--hairline);
  padding: clamp(3.5rem, 2.5rem + 4vw, 6.5rem) 0;
}
.csstats__grid {
  display: grid;
  grid-template-columns: repeat(5, minmax(0, 1fr));
  gap: clamp(1.5rem, 1rem + 2vw, 2.6rem);
}
.csstat { display: flex; flex-direction: column; gap: 0.65rem; padding-top: 1.3rem; border-top: 1px solid var(--hairline-2); }
.csstat__n {
  font-family: var(--jett-font-display);
  font-weight: 800;
  font-size: clamp(2.1rem, 1.4rem + 2.2vw, 3.6rem);
  line-height: 0.92;
  letter-spacing: -0.04em;
  color: var(--ink-strong);
  font-variant-numeric: tabular-nums;   /* stop the counter jittering as it runs */
}
.csstat__l {
  font-family: var(--jett-font-body);
  font-size: var(--jett-step--1);
  line-height: 1.45;
  color: var(--ink-mute);
  max-width: 22ch;
}
@media (max-width: 1080px) { .csstats__grid { grid-template-columns: repeat(3, minmax(0, 1fr)); row-gap: 2.2rem; } }
@media (max-width: 620px)  { .csstats__grid { grid-template-columns: repeat(2, minmax(0, 1fr)); } }

/* Subtitle under the thesis slab */
.csslab__sub {
  font-family: var(--jett-font-body);
  font-weight: 400;
  font-size: var(--jett-step-1);
  color: var(--ink-mute);
  margin-top: 1.2rem;
  max-width: 44ch;
}

/* ---- Four moves ---------------------------------------------------------- */
.csmoves {
  position: relative;
  background: var(--jett-navy-deep);
  border-top: 1px solid var(--hairline);
  padding: clamp(3.5rem, 2.5rem + 4vw, 7rem) 0;
}
.csmoves__grid {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: clamp(1.8rem, 1.2rem + 2.5vw, 3.5rem);
  margin-top: clamp(2.2rem, 1.8rem + 1.5vw, 3.2rem);
}
@media (max-width: 820px) { .csmoves__grid { grid-template-columns: 1fr; } }
.csmove { padding-top: 1.4rem; border-top: 1px solid var(--hairline-2); }
.csmove__h {                       /* title */
  font-family: var(--jett-font-display);
  font-weight: 700;
  font-size: var(--jett-step-2);
  line-height: 1.12;
  letter-spacing: -0.02em;
  color: var(--ink-strong);
  margin: 0;
}
.csmove__tag {                     /* subtitle, one step above the paragraph */
  font-family: var(--jett-font-body);
  font-weight: 500;
  font-size: var(--jett-step-1);
  letter-spacing: -0.005em;
  color: var(--accent);
  margin: 0.35rem 0 0.8rem;
}
.csmove__p { font-size: var(--jett-step-0); line-height: 1.6; color: var(--ink-dim); max-width: 46ch; }

/* ---- Chapters: render beside copy ---------------------------------------- */
.cschapter {
  position: relative;
  background: var(--jett-navy);
  border-top: 1px solid var(--hairline);
  padding: clamp(3.5rem, 2.5rem + 4vw, 7rem) 0;
}
.cschapter--reverse { background: var(--jett-navy-deep); }
.cschapter__grid {
  display: grid;
  grid-template-columns: minmax(0, 6fr) minmax(0, 5fr);
  gap: clamp(2rem, 1.5rem + 3vw, 4.5rem);
  align-items: center;
}
/* Flipped chapter: the render moves to the right AND keeps the wider column,
   so every chapter image is the same size down the page. */
.cschapter--reverse .cschapter__grid { grid-template-columns: minmax(0, 5fr) minmax(0, 6fr); }
.cschapter--reverse .cschapter__art { order: 2; }
@media (max-width: 900px) {
  .cschapter__grid,
  .cschapter--reverse .cschapter__grid { grid-template-columns: 1fr; gap: 2rem; }
  .cschapter--reverse .cschapter__art { order: 0; }
}
.cschapter__art { margin: 0; border-radius: 8px; overflow: hidden; border: 1px solid var(--hairline); }
.cschapter__art img { width: 100%; height: auto; display: block; }
.cschapter__h {
  font-family: var(--jett-font-display);
  font-weight: 700;
  font-size: clamp(1.6rem, 1.1rem + 2.4vw, 3rem);
  line-height: 1.08;
  letter-spacing: -0.025em;
  color: var(--ink-strong);
  margin: 0 0 1.1rem;
  word-spacing: 0.1em;
  text-wrap: balance;
}
.cschapter__p {
  font-family: var(--jett-font-body);
  font-weight: 300;
  font-size: var(--jett-step-0);
  line-height: 1.6;
  color: var(--ink-dim);
  max-width: 46ch;
}

/* Pull quote: the one loud line in a restrained page. */
.csquote {
  margin: 2.2rem 0 0;
  padding-left: 1.4rem;
  border-left: 1px solid var(--accent);
}
.csquote p {
  font-family: var(--jett-font-display);
  font-weight: 700;
  font-size: clamp(1.6rem, 1.1rem + 2vw, 2.6rem);
  line-height: 1.05;
  letter-spacing: -0.03em;
  color: var(--ink-strong);
  margin: 0;
}

/* Brand lockup: Nu Stadium x Inter Miami, on their own paper so the real
   marks keep their real colours against the navy. */
.cslockup {
  display: flex;                 /* own line: never share it with the link below */
  width: fit-content;
  align-items: center;
  gap: clamp(0.9rem, 0.7rem + 0.6vw, 1.4rem);
  margin-top: 2.2rem;
  padding: 0.9rem 1.3rem;
  background: var(--jett-off-white);
  border-radius: 6px;
}
.cslockup + .cslink { margin-top: 1.6rem; }
.cslockup__mark { width: auto; display: block; }
.cslockup__mark--wide  { height: 26px; }
.cslockup__mark--crest { height: 42px; }
.cslockup__x { color: rgba(9, 17, 34, 0.35); font-size: 1.1rem; line-height: 1; }

/* ---- The Nubank ecosystem ------------------------------------------------ */
.csecosystem {
  position: relative;
  background: var(--jett-navy-deep);
  border-top: 1px solid var(--hairline);
  padding: clamp(3.5rem, 2.5rem + 4vw, 7rem) 0;
}
.cseco__grid {
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  gap: clamp(1rem, 0.8rem + 1vw, 1.6rem);
  margin-top: clamp(2.2rem, 1.8rem + 1.5vw, 3.2rem);
}
@media (max-width: 820px) { .cseco__grid { grid-template-columns: repeat(2, minmax(0, 1fr)); } }
@media (max-width: 520px) { .cseco__grid { grid-template-columns: 1fr; } }
.cseco {
  display: flex;
  align-items: baseline;
  gap: 0.9rem;
  padding: 1.2rem 1.3rem;
  background: var(--jett-navy-lift);
  border: 1px solid var(--hairline-2);
  border-radius: 8px;
  transition: border-color 0.35s var(--jett-ease-out);
}
.cseco:hover { border-color: var(--accent); }
.cseco__n {
  font-family: var(--jett-font-mono);
  font-size: 11px;
  letter-spacing: 0.16em;
  color: var(--accent);
  flex: none;
}
.cseco__t {
  font-family: var(--jett-font-body);
  font-weight: 500;
  font-size: var(--jett-step-0);
  letter-spacing: -0.01em;
  color: var(--ink-strong);
}

/* The payoff line. 1 + 1 = 10 is a firm principle, so it carries the same
   sweep-and-breathe treatment it has on capabilities/philosophy. */
.cseco__payoff {
  font-family: var(--jett-font-body);
  font-weight: 300;
  font-size: var(--jett-step-0);
  line-height: 1.55;
  color: var(--ink-dim);
  max-width: 54ch;
  margin-top: clamp(1.8rem, 1.5rem + 1vw, 2.6rem);
}
.equation { white-space: nowrap; font-weight: 600; color: var(--ink-strong); }
.equation__n  { display: inline-block; }
.equation__eq { display: inline-block; color: var(--ink-soft); animation: equal-sweep 4.5s ease-in-out infinite; }
.equation__ten{ display: inline-block; color: var(--accent-strong); animation: ten-breathe 8s ease-in-out infinite; }
@keyframes equal-sweep {
  0%, 100% { opacity: 0.55; filter: brightness(1); }
  50%      { opacity: 1;    filter: brightness(1.6); }
}
@keyframes ten-breathe {
  0%, 100% { transform: scale(1);    opacity: 0.9; }
  50%      { transform: scale(1.09); opacity: 1; }
}

/* ---- Partner wall -------------------------------------------------------- */
.cspartners {
  position: relative;
  background: var(--jett-navy);
  border-top: 1px solid var(--hairline);
  padding: clamp(3.5rem, 2.5rem + 4vw, 7rem) 0;
}
.cspwall {
  display: grid;
  grid-template-columns: repeat(4, minmax(0, 1fr));
  gap: clamp(1rem, 0.8rem + 1vw, 1.8rem);
  margin-top: clamp(2.2rem, 1.8rem + 1.5vw, 3.2rem);
}
/* Stays two-up all the way down: one tile per row turns the wall into a
   1,600px scroll and stops reading as a set. */
@media (max-width: 900px) { .cspwall { grid-template-columns: repeat(2, minmax(0, 1fr)); } }
.cspartner { display: flex; flex-direction: column; }
/* Real partner marks are full colour and built for light ground, so each one
   gets its own sheet of paper rather than being flattened to silver. */
.cspartner__tile {
  display: flex;
  align-items: center;
  justify-content: center;
  height: 108px;
  padding: 1.1rem 1.4rem;
  background: var(--jett-white);
  border-radius: 6px;
  transition: transform 0.4s var(--jett-ease-out), box-shadow 0.4s var(--jett-ease-out);
}
.cspartner:hover .cspartner__tile {
  transform: translateY(-3px);
  box-shadow: 0 18px 34px -20px rgba(0, 0, 0, 0.8);
}
/* Optical sizing: wordmarks share a cap height, dense lockups and square
   marks get a bump so every tile reads at the same weight. Held in a custom
   property so one media query can rescale the whole set. */
.cspartner__tile img {
  width: auto; max-width: 100%; object-fit: contain;
  height: calc(var(--mark-h, 30px) * var(--mark-scale, 1));
}
.cspartner__tile img[data-mark="hpe"]            { --mark-h: 34px; }
.cspartner__tile img[data-mark="shift4"]         { --mark-h: 22px; }
.cspartner__tile img[data-mark="lowes"]          { --mark-h: 40px; }
.cspartner__tile img[data-mark="mastercard"]     { --mark-h: 44px; }
.cspartner__tile img[data-mark="nubank"]         { --mark-h: 38px; }
.cspartner__tile img[data-mark="baptist-health"] { --mark-h: 42px; }
.cspartner__tile img[data-mark="corona"]         { --mark-h: 50px; }
.cspartner__tile img[data-mark="modelo"]         { --mark-h: 58px; }
@media (max-width: 520px) {
  .cspwall { --mark-scale: 0.76; }
  .cspartner__tile { height: 82px; padding: 0.8rem 0.9rem; }
}
.cspartner__n {
  font-family: var(--jett-font-display);
  font-weight: 600;
  font-size: var(--jett-step-1);
  letter-spacing: -0.01em;
  color: var(--ink-strong);
  margin-top: 1.1rem;
}
.cspartner__r {
  font-family: var(--jett-font-body);
  font-size: var(--jett-step--1);
  line-height: 1.45;
  color: var(--ink-mute);
  margin-top: 0.3rem;
}

/* ---- Partner detail ------------------------------------------------------ */
.csdetails {
  position: relative;
  background: var(--jett-navy-deep);
  border-top: 1px solid var(--hairline);
  padding: clamp(3.5rem, 2.5rem + 4vw, 7rem) 0;
}
.csdetails__grid {
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  gap: clamp(1.5rem, 1rem + 2vw, 2.8rem);
  margin-top: clamp(2.2rem, 1.8rem + 1.5vw, 3.2rem);
}
@media (max-width: 980px) { .csdetails__grid { grid-template-columns: repeat(2, minmax(0, 1fr)); } }
@media (max-width: 660px) { .csdetails__grid { grid-template-columns: 1fr; } }
.csdetail { padding-top: 1.5rem; border-top: 1px solid var(--hairline-2); }
/* Identify each card with the real mark on a small chip. Knocking these back
   to silver destroys them: Mastercard becomes two blobs, Modelo a smudge. */
.csdetail__chip {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  height: 44px;
  min-width: 76px;
  padding: 0 0.8rem;
  margin-bottom: 1.2rem;
  background: var(--jett-white);
  border-radius: 5px;
}
.csdetail__chip img { width: auto; height: 18px; object-fit: contain; }
.csdetail__chip img[data-mark="hpe"]            { height: 20px; }
.csdetail__chip img[data-mark="shift4"]         { height: 13px; }
.csdetail__chip img[data-mark="lowes"]          { height: 24px; }
.csdetail__chip img[data-mark="mastercard"]     { height: 26px; }
.csdetail__chip img[data-mark="baptist-health"] { height: 25px; }
.csdetail__chip img[data-mark="modelo"]         { height: 34px; }
.csdetail__h {
  font-family: var(--jett-font-display);
  font-weight: 700;
  font-size: var(--jett-step-2);
  line-height: 1.14;
  letter-spacing: -0.02em;
  color: var(--ink-strong);
  margin: 0 0 0.7rem;
  text-wrap: balance;
}
.csdetail__p { font-size: var(--jett-step-0); line-height: 1.6; color: var(--ink-dim); }

/* =============================================================================
   ANIMATION PRIMITIVES (home-scoped): mirror the deck engine vocabulary.
   JS sets the start state; GSAP/ScrollTrigger animates to rest.
   ============================================================================= */
/* Short travel on purpose: the reveal should read as the page settling, not as
   content sliding in from somewhere. */
.split-word { display: inline-block; opacity: 0; transform: translateY(0.42em); will-change: transform; }
.fade-up { opacity: 0; transform: translateY(16px); will-change: transform; }

@media (prefers-reduced-motion: reduce) {
  .cine__img, .cine__video { animation: none; transform: scale(1.04); }
  .split-word, .fade-up { opacity: 1 !important; transform: none !important; }
  /* Reduced motion: hold the segment near the top rather than animating it. */
  .phero__cue-runner { animation: none; stroke-dashoffset: 56; }
  .letter, .cine__slot, .topbar { transition: none; }
}


/* ===========================================================================
   LAUNCH MODE 2026-10-06 · LOVB Miami announcement
   The three pillar doorways are hidden and the landing letter carries Matt's
   ownership memo. Everything here is additive: delete this block, restore the
   markup, and the page is snapshot/draft-2026-10-06 again.
   =========================================================================== */

/* The two marks under the dateline. Equal box heights look wrong here: the
   boxes measure 43x27 and 48x30, near identical, but the Jett artwork leaves
   far more room inside its viewBox than the LOVB mark does, so matching the
   boxes renders Jett at roughly half the ink. The ratio below was set by
   putting the two side by side and looking, not by matching numbers. */
.letter__lockup {
  display: flex;
  align-items: center;
  gap: clamp(1rem, 0.8rem + 0.8vw, 1.8rem);
  margin-bottom: clamp(2.4rem, 2rem + 1.6vw, 3.6rem);
}
.letter__mark { display: block; width: auto; }
.letter__mark--jett { height: clamp(44px, 38px + 1.6vw, 60px); opacity: 0.92; }
.letter__mark--lovb { height: clamp(32px, 27px + 1.3vw, 44px); }
/* The official lockup is three stacked lines (LOVB / MIAMI / VOLLEYBALL) in a
   165x56 box, so at a given height its per-line type is smaller than the Jett
   wordmark's two lines. It carries a little more height to compensate. */

/* "League One Volleyball Miami · October 2026" is too long for a phone, and
   wrapping it leaves the separator dangling at the end of the first line.
   Below 540px the two halves stack and the dot goes, since a separator with
   nothing beside it is just a stray mark. */
@media (max-width: 540px) {
  .letter__dateline { flex-direction: column; align-items: flex-start; gap: 0.4rem; }
  .letter__dot { display: none; }
}
.letter__x { font-family: var(--jett-font-mono); font-size: 13px; color: var(--ink-ghost); }

/* The bridge from the memo into the case study. Deliberately a step below
   .casehead__title so the case study still owns the largest type on the page. */
.foundhead {
  position: relative;
  background: rgba(9, 17, 34, 0.72);
  border-top: 1px solid var(--hairline);
  padding: clamp(3.4rem, 2.6rem + 3vw, 5.5rem) 0 clamp(0.6rem, 0.5rem + 0.6vw, 1.2rem);
}
/* The casehead carries its own top rule. Directly under this one that reads
   as a double line, so the second is dropped where the two meet. */
.foundhead + .casehead { border-top: 0; padding-top: clamp(2rem, 1.6rem + 1.6vw, 3.4rem); }

.foundhead__h {
  font-family: var(--jett-font-display);
  font-weight: 700;
  font-size: clamp(1.5rem, 1.2rem + 1.5vw, 2.4rem);
  line-height: 1.1;
  letter-spacing: -0.026em;
  color: var(--ink-strong);
  max-width: 24ch;
  margin: 0 0 0.9rem;
  text-wrap: balance;
}
.foundhead__p {
  font-family: var(--jett-font-body);
  font-weight: 300;
  font-size: var(--jett-step-0);
  line-height: 1.55;
  color: var(--ink-dim);
  max-width: 52ch;
  margin: 0;
}
.foundhead__link {
  display: inline-flex;
  align-items: center;
  gap: 0.6rem;
  margin-top: 1.6rem;
  padding-bottom: 0.35rem;
  font-family: var(--jett-font-mono);
  font-size: 12px;
  letter-spacing: 0.2em;
  text-transform: uppercase;
  color: var(--ink-strong);
  border-bottom: 1px solid var(--hairline-2);
  transition: border-color 0.35s, gap 0.35s;
}
.foundhead__link i { color: var(--accent); font-style: normal; }
.foundhead__link:hover { border-color: var(--accent); gap: 0.9rem; }

/* Contact with the form parked: one address, set large enough to read as the
   action rather than as a footnote under a missing form. */
.overlay__email {
  margin-top: 0.4rem;
  font-family: var(--jett-font-display);
  font-weight: 600;
  font-size: clamp(1.3rem, 1.05rem + 1.2vw, 2rem);
  letter-spacing: -0.02em;
}
.overlay__email a {
  color: var(--ink-strong);
  border-bottom: 1px solid var(--hairline-2);
  transition: border-color 0.3s;
}
.overlay__email a:hover { border-color: var(--accent); }

/* The Miami band. Full bleed, because the memo has just spent eight paragraphs
   describing this city and the reader should get to stand in it. Cropped from
   3:2 rather than letterboxed; the LOVB lockup sits near the middle of the
   frame, so the crop is centered and capped before it eats the logo. */
.lovbband { margin: 0; position: relative; overflow: hidden; background: #050912; }
.lovbband img {
  display: block;
  width: 100%;
  height: clamp(280px, 34vw, 560px);
  object-fit: cover;
  object-position: center 48%;
}
@media (max-width: 540px) {
  .lovbband img { height: clamp(240px, 58vw, 300px); }
}

/* ── The close: "Challenge Accepted." and the signature block ──────────
   Matt signs with three roles, so the signature is a stack rather than the
   single mono line the Nubank letter used. The kicker sits between the last
   paragraph and the name, which is where he put it. */
.letter__kicker {
  font-family: var(--jett-font-display) !important;
  font-weight: 600 !important;
  font-size: clamp(1.25rem, 1.05rem + 0.9vw, 1.8rem) !important;
  line-height: 1.15 !important;
  letter-spacing: -0.02em !important;
  color: var(--ink-strong) !important;
  max-width: none !important;
  margin: 2.2rem 0 0 !important;
}
.letter__sign {
  display: flex;
  flex-direction: column;
  gap: 0.28rem;
  margin-top: clamp(2rem, 1.6rem + 1.2vw, 2.8rem);
  padding-top: clamp(1.2rem, 1rem + 0.8vw, 1.8rem);
  border-top: 1px solid var(--hairline);
  max-width: 34ch;
}
@media (min-width: 900px) { .letter__sign { max-width: 46ch; } }
.letter__signer {
  /* The old .letter__sign rule above is a mono uppercase treatment and still
     cascades into these children, which turned the name into MATT WIENER.
     A person signing a personal letter gets their name in proper case. */
  text-transform: none;
  font-family: var(--jett-font-display);
  font-weight: 600;
  font-size: var(--jett-step-1);
  letter-spacing: -0.015em;
  color: var(--ink-strong);
  margin-bottom: 0.15rem;
}
.letter__role {
  font-family: var(--jett-font-mono);
  font-size: 11px;
  letter-spacing: 0.14em;
  text-transform: uppercase;
  color: var(--ink-mute);
}

/* The close. Forbes is the outside voice legitimizing the news, so it gets
   the button; the release is our own document, so it sits under it as a
   quiet link. One loud thing, one quiet thing, in that order. */
.release {
  display: flex;
  flex-direction: column;
  align-items: flex-start;
  gap: 0.9rem;
  margin: clamp(1.8rem, 1.4rem + 1.2vw, 2.6rem) 0 0;
}
.release__cta {
  display: inline-flex;
  align-items: center;
  gap: 0.7rem;
  background: var(--ink-strong);
  color: #0b1020;
  border-radius: 2px;
  padding: 0.85rem 1.4rem;
  font-family: var(--jett-font-mono);
  font-size: 12px;
  letter-spacing: 0.16em;
  text-transform: uppercase;
  transition: gap 0.35s, opacity 0.3s;
}
.release__cta i { font-style: normal; color: inherit; }
.release__cta:hover { opacity: 0.88; gap: 1rem; }

/* Second outlet, equal size so it does not read as an afterthought, outlined
   so the exclusive still leads. Stacks on a phone, where two buttons side by
   side would each be too narrow to read. */
.release__cta--ghost {
  background: transparent;
  color: var(--ink-strong);
  box-shadow: inset 0 0 0 1px var(--hairline-2);
}
.release__cta--ghost:hover { box-shadow: inset 0 0 0 1px var(--accent); opacity: 1; }
.release__row { display: flex; flex-wrap: wrap; gap: 0.7rem; }
@media (max-width: 560px) {
  .release__row { flex-direction: column; align-items: stretch; width: 100%; }
  .release__cta { justify-content: center; }
}
.release__pdf {
  font-family: var(--jett-font-mono);
  font-size: 11px;
  letter-spacing: 0.14em;
  text-transform: uppercase;
  color: var(--ink-mute);
  border-bottom: 1px solid transparent;
  padding-bottom: 1px;
  transition: color 0.3s, border-color 0.3s;
}
.release__pdf:hover { color: var(--ink); border-bottom-color: var(--hairline-2); }

/* The announcement cards. A strip that scrolls sideways rather than a grid
   that reflows: these are 4:5 social artwork and shrinking five of them to
   fit a phone would make the type unreadable. Scroll keeps them legible and
   is the gesture people already use on the platforms they came from. */
.cards {
  display: grid;
  grid-auto-flow: column;
  grid-auto-columns: clamp(170px, 19vw, 230px);
  gap: clamp(.6rem, .5rem + .5vw, 1rem);
  margin-top: clamp(1.8rem, 1.4rem + 1.4vw, 2.8rem);
  overflow-x: auto;
  scroll-snap-type: x proximity;
  padding-bottom: .6rem;
  scrollbar-width: thin;
  scrollbar-color: var(--hairline-2) transparent;
}
.cards img {
  display: block;
  width: 100%;
  height: auto;
  border-radius: 3px;
  scroll-snap-align: start;
  border: 1px solid var(--hairline);
}
.cards::-webkit-scrollbar { height: 6px; }
.cards::-webkit-scrollbar-thumb { background: var(--hairline-2); border-radius: 3px; }
@media (max-width: 900px) {
  .cards { grid-auto-columns: 62vw; margin-left: calc(var(--jett-page-pad) * -1); padding-left: var(--jett-page-pad); }
}