/* ==========================================================================
   Marble Consulting Group — section layer
   Ground: obsidian. Accent: antique gold. Type: Inter.

   Sections added after editorial.css passed 500KB live here instead. That file
   is large enough that a plain static server truncates it mid-transfer, which
   silently drops whatever sits near its end - these rules were being written
   into a region the browser never received. Keeping new work in a small file
   that always arrives is the difference between shipping and shipping blind.
   ========================================================================== */

/* ==========================================================================
   OUR CLIENTS — "THE ROSTER"   (.roster, index.html)

   Three clients, one static row. The section it replaced travelled a camera
   past five 3D plates over a full screen of scroll; a roster of three does
   not earn that, and a continuously scrolling strip of three reads as a
   carousel that ran out of slides.

   The instrument is the one used everywhere else on this site: a gold
   hairline, and things hung off it. Two rules bracket the row, the items are
   divided by hairlines of the same weight, and nothing else is drawn. The
   marks sit at 58% opacity and come up to full on hover, so the row reads as
   one quiet object at rest and resolves into three when you look at it.

   THE MARK SLOT TAKES AN <img> WITHOUT ANY CSS CHANGE. .roster__mark is a
   fixed-height flex box; an <img> inside it inherits the height cap, the
   greyscale and the hover. Client logos are trademarks and none are in
   assets/ yet, so the slot currently holds a typeset wordmark instead.
   ========================================================================== */
.roster {
  position: relative;
  padding-block: clamp(2.34rem, 1.872rem + 1.872vw, 3.6rem);
}
.roster__rule {
  position: absolute;
  left: 0;
  right: 0;
  height: 1px;
  background: linear-gradient(90deg, transparent, var(--border-gold-strong) 22%, var(--border-gold-strong) 78%, transparent);
  opacity: 0.55;
}
.roster__rule--top { top: 0; }
.roster__rule--bot { bottom: 0; }

.roster__head {
  text-align: center;
  margin-bottom: clamp(2.25rem, 1.8rem + 2vw, 3.5rem);
}
.roster__head .eyebrow { justify-content: center; }
.roster__h {
  font-size: clamp(1.35rem, 1.1rem + 1.1vw, 2rem);
  letter-spacing: -0.022em;
  text-wrap: balance;
}
.roster__h em { color: var(--gold-light); font-style: normal; }

.roster__row {
  list-style: none;
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  align-items: center;
}
.roster__item {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 0.85rem;
  padding-inline: clamp(0.75rem, 2vw, 2rem);
  text-align: center;
}
/* the divider is a hairline between items, never an outline around them */
.roster__item + .roster__item {
  border-left: 1px solid var(--border-gold);
}

.roster__mark {
  display: flex;
  align-items: center;
  justify-content: center;
  height: clamp(1.75rem, 1.4rem + 1.2vw, 2.5rem);
  opacity: 0.6;
  /* see .strip__mark: reversed white, for the same reason */
  filter: brightness(0) invert(1);
  transition: opacity var(--dur) var(--ease-out);
}
.roster__logo {
  max-height: 100%;
  width: auto;
  max-width: clamp(7rem, 12vw, 10.5rem);
  object-fit: contain;
}
/* THE SWAP IS AUTOMATIC AND NEEDS NO CODE CHANGE.
   Each slot ships both a real <img> and a typeset wordmark. If the logo file
   exists the image loads and :has() hides the word; if it is missing the
   inline onerror removes the broken <img>, :has() no longer matches, and the
   wordmark stands in. Dropping three files into assets/logos/ is the entire
   deployment step, and a missing file degrades to type instead of to a broken
   image icon. */
.roster__mark:has(img) .roster__word { display: none; }
.roster__item:hover .roster__mark,
.roster__item:focus-within .roster__mark { opacity: 1; }
/* stand-in until a real mark exists: the name, set as a wordmark */
.roster__word {
  font-size: clamp(1.15rem, 0.95rem + 0.75vw, 1.6rem);
  font-weight: 600;
  letter-spacing: -0.018em;
  color: var(--white);
  white-space: nowrap;
}
.roster__cat {
  font-size: var(--text-xs);
  letter-spacing: 0.16em;
  text-transform: uppercase;
  color: var(--vein);
  line-height: 1.4;
}

.roster__note {
  margin-top: clamp(2.25rem, 1.8rem + 2vw, 3.5rem);
  text-align: center;
  color: var(--vein);
  font-size: var(--text-sm);
  text-wrap: balance;
}

/* Under 720px three columns cannot hold a wordmark and a category without
   breaking both, so the row becomes a stack and the dividers turn horizontal. */
@media (max-width: 720px) {
  .roster__row { grid-template-columns: 1fr; }
  .roster__item {
    flex-direction: row;
    justify-content: space-between;
    gap: 1rem;
    padding: 1.1rem 0;
    text-align: left;
  }
  .roster__item + .roster__item {
    border-left: 0;
    border-top: 1px solid var(--border-gold);
  }
  .roster__cat { text-align: right; }
}

/* ==========================================================================
   THE PATH — "THE STEPS"   (.steps, index.html)

   Replaced .rise, which travelled a 3D camera past five photographic plates.
   Two things were wrong with it. The reader had to decode the motion before
   they could read the content, and the order the steps arrived in depended on
   how fast you scrolled - so a section whose entire job is "these happen in
   sequence" delivered them out of sequence.

   No scroll effect here at all. Five steps, numbered, left to right in reading
   order. The only motion is the baseline .reveal: one 28px fade-up per item,
   staggered 60ms so the eye is led along the row once, then nothing moves
   again. IntersectionObserver fires it once and unobserves; prefers-reduced-
   motion skips it entirely. Same hairline instrument as .roster.
   ========================================================================== */
.steps {
  padding-block: clamp(2.34rem, 1.872rem + 1.872vw, 3.6rem);
}
.steps__head {
  max-width: 46rem;
  margin-bottom: clamp(2.25rem, 1.8rem + 2vw, 3.25rem);
}
.steps__h {
  font-size: clamp(1.5rem, 1.2rem + 1.4vw, 2.35rem);
  letter-spacing: -0.026em;
  text-wrap: balance;
}
.steps__h em { color: var(--gold-light); font-style: italic; }
.steps__lead {
  margin-top: 0.85rem;
  color: var(--vein);
  font-size: var(--text-base);
  text-wrap: pretty;
}

.steps__row {
  list-style: none;
  display: grid;
  grid-template-columns: repeat(5, 1fr);
  gap: 0;
  border-top: 1px solid var(--border-gold);
}
.steps__item {
  padding: clamp(1.25rem, 1rem + 0.9vw, 1.9rem) clamp(0.85rem, 1.4vw, 1.5rem);
  padding-left: 0;
}
.steps__item + .steps__item {
  border-left: 1px solid var(--border-gold);
  padding-left: clamp(0.85rem, 1.4vw, 1.5rem);
}
.steps__n {
  display: block;
  font-size: var(--text-xs);
  font-weight: 600;
  letter-spacing: 0.18em;
  color: var(--gold);
  margin-bottom: 0.7rem;
}
.steps__t {
  font-size: clamp(0.98rem, 0.92rem + 0.25vw, 1.1rem);
  font-weight: 600;
  color: var(--white);
  letter-spacing: -0.012em;
  margin-bottom: 0.4rem;
}
.steps__p {
  color: var(--vein);
  font-size: 0.9rem;
  line-height: 1.55;
  text-wrap: pretty;
}

/* Five columns stop working long before the phone: the copy is a sentence, not
   a label. Two up on tablet, stacked on mobile, dividers rotate to match. */
@media (max-width: 1020px) {
  .steps__row { grid-template-columns: repeat(2, 1fr); }
  .steps__item, .steps__item + .steps__item {
    padding-left: clamp(0.85rem, 1.4vw, 1.5rem);
    border-left: 1px solid var(--border-gold);
  }
  .steps__item:nth-child(odd) { border-left: 0; padding-left: 0; }
  .steps__item:nth-child(n + 3) { border-top: 1px solid var(--border-gold); }
}
@media (max-width: 620px) {
  .steps__row { grid-template-columns: 1fr; }
  .steps__item, .steps__item + .steps__item {
    border-left: 0;
    padding-left: 0;
  }
  .steps__item + .steps__item { border-top: 1px solid var(--border-gold); }
}

/* ==========================================================================
   WHAT MARBLE DOES — "IN PLAIN ENGLISH"   (.plain, index.html)

   The plainest section on the page by intent - the test is whether someone
   who reads only this can explain the business to somebody else. But plain
   copy still needs a composition, and set as one 40rem column it left half
   the viewport empty and gave the eye nowhere to land.

   TWO COLUMNS, UNEVEN. The claim sits left and STAYS there - the aside is
   sticky, so the headline holds while the argument scrolls past it. That is
   the whole device: one fixed assertion, four paragraphs answering it. The
   three summary statements below sit on the same gold hairline instrument as
   .roster and .steps, numbered, so the section closes on a scannable row
   after it has been read as prose.
   ========================================================================== */
.plain {
  position: relative;
  padding-block: clamp(2.4rem, 1.92rem + 2.048vw, 4.16rem);
  overflow: hidden;
}
/* one soft light source behind the claim, the same instrument the hero uses */
.plain__glow {
  position: absolute;
  top: -12%;
  left: -6%;
  width: min(46rem, 70%);
  aspect-ratio: 1;
  background: radial-gradient(circle, rgba(156, 120, 72, 0.11), transparent 62%);
  pointer-events: none;
}

.plain__grid {
  position: relative;
  display: grid;
  grid-template-columns: minmax(0, 0.86fr) minmax(0, 1.14fr);
  gap: clamp(2rem, 1.5rem + 3vw, 5.5rem);
  align-items: start;
}
.plain__aside {
  position: sticky;
  top: clamp(6rem, 12vh, 9rem);
}
.plain__h {
  font-size: clamp(1.6rem, 1.25rem + 1.6vw, 2.6rem);
  letter-spacing: -0.03em;
  text-wrap: balance;
}
.plain__h em { color: var(--gold-light); font-style: italic; }

/* a small typographic footing under the claim so the column does not end in air */
.plain__kicker {
  display: flex;
  align-items: center;
  gap: 0.75rem;
  margin-top: clamp(1.25rem, 1rem + 0.8vw, 1.9rem);
  font-size: var(--text-xs);
  letter-spacing: 0.2em;
  text-transform: uppercase;
  color: var(--vein);
}
.plain__kicker i {
  width: 1px;
  height: 0.8em;
  background: currentColor;
  opacity: 0.45;
}

.plain__body p {
  color: var(--ink);
  font-size: var(--text-base);
  line-height: 1.78;
  text-wrap: pretty;
}
.plain__body p + p { margin-top: 1.15rem; }
/* the opening line carries the whole claim, so it is set larger and lit */
.plain__lede {
  font-size: clamp(1.1rem, 1rem + 0.45vw, 1.32rem) !important;
  line-height: 1.6 !important;
  color: var(--white) !important;
  padding-bottom: 1.15rem;
  border-bottom: 1px solid var(--border-gold);
}
.plain__lede b { color: var(--gold-light); font-weight: 600; }

.plain__three {
  list-style: none;
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  margin-top: clamp(2.75rem, 2.2rem + 2.4vw, 4.5rem);
  border-top: 1px solid var(--border-gold);
}
.plain__three li {
  padding: clamp(1.4rem, 1.1rem + 1vw, 2.1rem) clamp(1rem, 1.6vw, 1.9rem);
  padding-left: 0;
}
.plain__three li + li {
  border-left: 1px solid var(--border-gold);
  padding-left: clamp(1rem, 1.6vw, 1.9rem);
}
.plain__n {
  display: block;
  font-size: var(--text-xs);
  font-weight: 600;
  letter-spacing: 0.18em;
  color: var(--gold);
  margin-bottom: 0.75rem;
}
.plain__three h3 {
  font-size: clamp(0.98rem, 0.93rem + 0.25vw, 1.12rem);
  font-weight: 600;
  color: var(--white);
  letter-spacing: -0.014em;
  margin-bottom: 0.45rem;
  text-wrap: balance;
}
.plain__three p {
  color: var(--vein);
  font-size: 0.92rem;
  line-height: 1.6;
  text-wrap: pretty;
}

/* Sticky needs a tall enough column to be worth it, and three columns of
   sentence-length copy stop working well before the phone. */
@media (max-width: 940px) {
  .plain__grid { grid-template-columns: 1fr; gap: 1.75rem; }
  .plain__aside { position: static; }
  .plain__three { grid-template-columns: 1fr; }
  .plain__three li, .plain__three li + li {
    border-left: 0;
    padding-left: 0;
    padding-block: 1.35rem;
  }
  .plain__three li + li { border-top: 1px solid var(--border-gold); }
}

/* ==========================================================================
   02 · CLIENT STRIP   (.strip, index.html)

   A quiet band directly under the hero. Marks rest at 52% and grayscale so
   the row reads as one object, then lift to full on hover - the only motion
   is a state change the reader causes, never one that happens at them.
   ========================================================================== */
.strip {
  position: relative;
  padding-block: clamp(1.75rem, 1.4rem + 1.2vw, 2.75rem);
  border-block: 1px solid var(--border-gold);
}
.strip__inner {
  display: flex;
  align-items: center;
  justify-content: center;
  flex-wrap: wrap;
  gap: clamp(1rem, 0.8rem + 1.6vw, 2.75rem);
}
.strip__label,
.strip__note {
  font-size: var(--text-xs);
  letter-spacing: 0.2em;
  text-transform: uppercase;
  color: var(--vein);
  white-space: nowrap;
}
.strip__row {
  list-style: none;
  display: flex;
  align-items: center;
  flex-wrap: wrap;
  justify-content: center;
  gap: clamp(1.25rem, 1rem + 2vw, 3.5rem);
}
.strip__mark {
  display: flex;
  align-items: center;
  height: clamp(1.2rem, 1rem + 0.6vw, 1.75rem);
  opacity: 0.55;
  /* Reversed to flat white. Two of the three marks have black wordmarks, which
     are invisible on obsidian, so a single-colour reversed treatment is the
     only one that renders all three legibly and keeps the row consistent. */
  filter: brightness(0) invert(1);
  transition: opacity var(--dur) var(--ease-out);
}
.strip__row li:hover .strip__mark { opacity: 1; }
.strip__logo { max-height: 100%; width: auto; object-fit: contain; }
.strip__mark:has(img) .strip__word { display: none; }
.strip__word {
  font-size: clamp(0.95rem, 0.88rem + 0.3vw, 1.15rem);
  font-weight: 600;
  letter-spacing: -0.015em;
  color: var(--white);
  white-space: nowrap;
}
@media (max-width: 720px) {
  .strip__note { display: none; }
}

/* ==========================================================================
   08 THE TEAM   (.crew, index.html)

   Three cards, one row. Two carry real portraits; the founder's carries an
   initials plate until a photograph exists. The plate is the same box at the
   same aspect ratio, so the row reads as deliberate rather than as a grid
   with a hole in it - and swapping it for an <img> later needs no CSS change.

   THE PORTRAITS ARE NORMALISED, NOT JUST DROPPED IN. Both were re-cropped to
   one 4:5 at 800x1000 and the lighter studio backdrop pulled down 28%, since
   the two originals were shot against a dark charcoal and a pale grey. On an
   obsidian page an unmatched pale plate glares and reads as a stock photo.
   The section grade below finishes the job: every plate is desaturated and
   dimmed at rest, and resolves to full colour on hover, so mismatched
   lighting never shows at the same moment across two cards.
   ========================================================================== */
.crew { padding-block: clamp(2.5rem, 2rem + 2.4vw, 4.5rem); }
.crew__head { max-width: 46rem; margin-bottom: clamp(1.75rem, 1.4rem + 1.8vw, 3rem); }
.crew__h {
  font-size: clamp(1.5rem, 1.2rem + 1.5vw, 2.5rem);
  letter-spacing: -0.028em;
  text-wrap: balance;
}
.crew__h em { color: var(--gold-light); font-style: italic; }
.crew__lead {
  margin-top: 0.9rem;
  color: var(--vein);
  font-size: var(--text-base);
  line-height: 1.7;
  text-wrap: pretty;
}

.crew__row {
  list-style: none;
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: clamp(1rem, 0.85rem + 1vw, 1.75rem);
}

.crew__card {
  position: relative;
  display: flex;
  flex-direction: column;
}

/* the plate: one aspect ratio for every card, portrait or placeholder */
.crew__shot {
  position: relative;
  display: block;
  aspect-ratio: 4 / 5;
  overflow: hidden;
  border: 1px solid var(--border-gold);
  border-radius: var(--radius-md);
  background: var(--surface);
  transition: border-color var(--dur) var(--ease-out);
}
.crew__card:hover .crew__shot,
.crew__card:focus-within .crew__shot { border-color: var(--border-gold-strong); }

.crew__shot img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  object-position: 50% 22%;
  /* Full colour at rest. An earlier version desaturated these to make two
     differently-lit studio backdrops agree, which worked and cost the actual
     photographs - the wrong trade on the one section that exists to show
     people's faces. The backdrops are matched in the FILES instead, so the
     colour can stay on. */
  filter: saturate(1.04) contrast(1.03);
  transform: scale(1.02);
  transition: filter 0.85s var(--ease-out), transform 1s var(--ease-out);
}
.crew__card:hover .crew__shot img,
.crew__card:focus-within .crew__shot img {
  filter: saturate(1.12) contrast(1.05) brightness(1.05);
  transform: scale(1.05);
}
/* the ground pulled up the bottom of the plate so the card sits in the page */
.crew__shot::after {
  content: "";
  position: absolute;
  inset: 0;
  pointer-events: none;
  background: linear-gradient(180deg, transparent 45%, rgba(6, 6, 8, 0.55) 100%);
}

/* the founder's plate until a portrait exists */
.crew__shot--empty {
  display: grid;
  place-items: center;
  background:
    radial-gradient(120% 90% at 50% 20%, rgba(156, 120, 72, 0.1), transparent 60%),
    var(--surface);
}
.crew__initials {
  font-size: clamp(1.6rem, 1.2rem + 1.6vw, 2.6rem);
  font-weight: 700;
  letter-spacing: 0.08em;
  color: var(--gold-light);
  opacity: 0.55;
}

.crew__meta { padding-top: clamp(0.8rem, 0.7rem + 0.4vw, 1.1rem); }
.crew__name {
  font-size: clamp(1rem, 0.95rem + 0.3vw, 1.18rem);
  font-weight: 600;
  color: var(--white);
  letter-spacing: -0.018em;
}
.crew__role {
  margin-top: 0.2rem;
  font-size: var(--text-xs);
  letter-spacing: 0.18em;
  text-transform: uppercase;
  color: var(--gold);
}
.crew__bio {
  margin-top: 0.6rem;
  color: var(--vein);
  font-size: 0.9rem;
  line-height: 1.6;
  text-wrap: pretty;
}
.crew__more { margin-top: clamp(1.5rem, 1.2rem + 1vw, 2.25rem); }

@media (max-width: 760px) {
  .crew__row { grid-template-columns: repeat(2, 1fr); }
}
@media (max-width: 460px) {
  .crew__row { grid-template-columns: 1fr; max-width: 22rem; }
}

/* ==========================================================================
   02 SERVICES - the index   (.svcx, index.html)

   Replaced a 3x2 grid of numbered cards with bullet lists. That layout is the
   default output of every site template in existence, which is precisely how
   it read. This is a bound index instead: six names held permanently in the
   left column, one detail open beside them, the way a catalogue or a spec
   sheet works rather than the way a landing page does.

   ENTIRELY CSS. Six radio inputs sit before the list and the stage, and
   :checked sibling selectors drive both the active row and the visible pane.
   It survives JavaScript being off or failing, and the browser supplies
   keyboard behaviour for free: tab into the group, arrow keys to move. A JS
   tab component would have to reimplement focus management and get it right;
   radios already have it.
   ========================================================================== */
.svcx { padding-block: clamp(2.5rem, 2rem + 2.4vw, 4.5rem); }
.svcx__head {
  display: flex;
  align-items: flex-end;
  justify-content: space-between;
  flex-wrap: wrap;
  gap: 1rem 2rem;
  margin-bottom: clamp(1.75rem, 1.4rem + 1.6vw, 2.75rem);
}
.svcx__h {
  font-size: clamp(1.6rem, 1.25rem + 1.6vw, 2.6rem);
  letter-spacing: -0.03em;
  text-wrap: balance;
}
.svcx__h em { color: var(--gold-light); font-style: italic; }

.svcx__radio { position: absolute; opacity: 0; pointer-events: none; }

.svcx__board {
  display: grid;
  grid-template-columns: minmax(0, 0.82fr) minmax(0, 1.18fr);
  border: 1px solid var(--border-gold);
  border-radius: var(--radius-md);
  overflow: hidden;
  background: linear-gradient(180deg, rgba(156,120,72,0.04), transparent 55%);
}

.svcx__index { list-style: none; border-right: 1px solid var(--border-gold); }
.svcx__row + .svcx__row { border-top: 1px solid var(--border-neutral); }
.svcx__label {
  position: relative;
  display: flex;
  align-items: center;
  gap: clamp(0.7rem, 1.2vw, 1.1rem);
  padding: clamp(0.85rem, 0.7rem + 0.6vw, 1.25rem) clamp(1rem, 1.6vw, 1.6rem);
  cursor: pointer;
  transition: background var(--dur-fast) ease;
}
.svcx__label:hover { background: rgba(156, 120, 72, 0.06); }
.svcx__label::before {
  content: "";
  position: absolute;
  left: 0; top: 0; bottom: 0;
  width: 2px;
  background: linear-gradient(180deg, var(--gold-light), var(--gold-shadow));
  transform: scaleY(0);
  transform-origin: 50% 0;
  transition: transform 0.42s var(--ease-out);
}
.svcx__n {
  font-size: var(--text-xs);
  font-weight: 600;
  letter-spacing: 0.18em;
  color: var(--gold);
  flex: none;
}
.svcx__name {
  font-size: clamp(0.95rem, 0.9rem + 0.3vw, 1.1rem);
  font-weight: 600;
  color: var(--vein);
  letter-spacing: -0.014em;
  line-height: 1.35;
  transition: color var(--dur-fast) ease;
}
.svcx__cue {
  margin-left: auto;
  width: 1.1rem; height: 1px;
  background: var(--gold);
  opacity: 0;
  transform: translateX(-6px);
  transition: opacity var(--dur-fast) ease, transform var(--dur-fast) ease;
  flex: none;
}

.svcx__stage {
  position: relative;
  display: grid;
  padding: clamp(1.4rem, 1.1rem + 1.2vw, 2.4rem);
  min-height: 19rem;
}
.svcx__pane {
  grid-area: 1 / 1;
  opacity: 0;
  visibility: hidden;
  transform: translateY(8px);
  transition: opacity 0.42s var(--ease-out), transform 0.42s var(--ease-out), visibility 0.42s;
}
.svcx__paneno {
  font-size: clamp(1.9rem, 1.4rem + 2vw, 3rem);
  font-weight: 700;
  line-height: 0.9;
  letter-spacing: -0.05em;
  color: var(--gold-light);
  opacity: 0.28;
  margin-bottom: 0.6rem;
}
.svcx__panet {
  font-size: clamp(1.15rem, 1.05rem + 0.5vw, 1.5rem);
  font-weight: 600;
  color: var(--white);
  letter-spacing: -0.02em;
  margin-bottom: 0.6rem;
  text-wrap: balance;
}
.svcx__paned {
  color: var(--ink);
  font-size: 0.98rem;
  line-height: 1.62;
  max-width: 34rem;
  text-wrap: pretty;
}
.svcx__gets {
  list-style: none;
  margin-top: 1.1rem;
  padding-top: 0.95rem;
  border-top: 1px solid var(--border-neutral);
}
.svcx__gets li {
  position: relative;
  padding-left: 1.05rem;
  color: var(--vein);
  font-size: 0.875rem;
  line-height: 1.5;
}
.svcx__gets li + li { margin-top: 0.4rem; }
.svcx__gets li::before {
  content: "";
  position: absolute;
  left: 0; top: 0.62em;
  width: 0.5rem; height: 1px;
  background: var(--gold);
  opacity: 0.7;
}

#svcx-1:checked ~ .svcx__index .svcx__row:nth-child(1) .svcx__label,
#svcx-2:checked ~ .svcx__index .svcx__row:nth-child(2) .svcx__label,
#svcx-3:checked ~ .svcx__index .svcx__row:nth-child(3) .svcx__label,
#svcx-4:checked ~ .svcx__index .svcx__row:nth-child(4) .svcx__label,
#svcx-5:checked ~ .svcx__index .svcx__row:nth-child(5) .svcx__label,
#svcx-6:checked ~ .svcx__index .svcx__row:nth-child(6) .svcx__label { background: rgba(156, 120, 72, 0.09); }

#svcx-1:checked ~ .svcx__index .svcx__row:nth-child(1) .svcx__label::before,
#svcx-2:checked ~ .svcx__index .svcx__row:nth-child(2) .svcx__label::before,
#svcx-3:checked ~ .svcx__index .svcx__row:nth-child(3) .svcx__label::before,
#svcx-4:checked ~ .svcx__index .svcx__row:nth-child(4) .svcx__label::before,
#svcx-5:checked ~ .svcx__index .svcx__row:nth-child(5) .svcx__label::before,
#svcx-6:checked ~ .svcx__index .svcx__row:nth-child(6) .svcx__label::before { transform: scaleY(1); }

#svcx-1:checked ~ .svcx__index .svcx__row:nth-child(1) .svcx__name,
#svcx-2:checked ~ .svcx__index .svcx__row:nth-child(2) .svcx__name,
#svcx-3:checked ~ .svcx__index .svcx__row:nth-child(3) .svcx__name,
#svcx-4:checked ~ .svcx__index .svcx__row:nth-child(4) .svcx__name,
#svcx-5:checked ~ .svcx__index .svcx__row:nth-child(5) .svcx__name,
#svcx-6:checked ~ .svcx__index .svcx__row:nth-child(6) .svcx__name { color: var(--white); }

#svcx-1:checked ~ .svcx__index .svcx__row:nth-child(1) .svcx__cue,
#svcx-2:checked ~ .svcx__index .svcx__row:nth-child(2) .svcx__cue,
#svcx-3:checked ~ .svcx__index .svcx__row:nth-child(3) .svcx__cue,
#svcx-4:checked ~ .svcx__index .svcx__row:nth-child(4) .svcx__cue,
#svcx-5:checked ~ .svcx__index .svcx__row:nth-child(5) .svcx__cue,
#svcx-6:checked ~ .svcx__index .svcx__row:nth-child(6) .svcx__cue { opacity: 1; transform: translateX(0); }

#svcx-1:checked ~ .svcx__stage #svcx-pane-1,
#svcx-2:checked ~ .svcx__stage #svcx-pane-2,
#svcx-3:checked ~ .svcx__stage #svcx-pane-3,
#svcx-4:checked ~ .svcx__stage #svcx-pane-4,
#svcx-5:checked ~ .svcx__stage #svcx-pane-5,
#svcx-6:checked ~ .svcx__stage #svcx-pane-6 { opacity: 1; visibility: visible; transform: none; }

#svcx-1:focus-visible ~ .svcx__index .svcx__row:nth-child(1) .svcx__label,
#svcx-2:focus-visible ~ .svcx__index .svcx__row:nth-child(2) .svcx__label,
#svcx-3:focus-visible ~ .svcx__index .svcx__row:nth-child(3) .svcx__label,
#svcx-4:focus-visible ~ .svcx__index .svcx__row:nth-child(4) .svcx__label,
#svcx-5:focus-visible ~ .svcx__index .svcx__row:nth-child(5) .svcx__label,
#svcx-6:focus-visible ~ .svcx__index .svcx__row:nth-child(6) .svcx__label {
  outline: 2px solid var(--gold-light);
  outline-offset: -2px;
}

@media (max-width: 900px) {
  .svcx__board { grid-template-columns: 1fr; }
  .svcx__index { border-right: 0; border-bottom: 1px solid var(--border-gold); }
  .svcx__stage { min-height: 17rem; }
}

/* Logos vary wildly in aspect: AT&T is 2.5:1, Primo is 4.5:1. Cap the width so
   one wide wordmark cannot dominate a row sized by height. */
.strip__logo { max-height: 100%; width: auto; max-width: clamp(6rem, 11vw, 9rem); object-fit: contain; }
.roster__logo { max-height: 100%; width: auto; max-width: clamp(7rem, 13vw, 11rem); object-fit: contain; }