/* Section 7 — Creative Studio.
 *
 * The photograph carries the section. The type sits on the black to its
 * left and the four labels run along the bottom edge like production
 * credits; nothing is in a card, nothing floats, and the only thing that
 * moves is a line of text appearing under a label.
 *
 * Section 6 is the analog rack. This one is a person.
 */

.sbcs {
  /* The sticky header is 86px tall; without this, anchor
     navigation lands the section top underneath it. */
  scroll-margin-top: 110px;
  --cs-ink: #09090880;
  --cs-black: var(--sb-ground);
  --cs-brass: var(--sb-gold);
  --cs-ivory: var(--sb-ink);
  --cs-muted: var(--sb-ink-2);
  --cs-line: rgb(201 168 106 / 0.28);

  position: relative;
  background: var(--cs-black);
  color: var(--cs-ivory);
  overflow: hidden;
}

.sbcs-inner {
  max-width: 1680px;
  margin: 0 auto;
  display: grid;
  grid-template-columns: 1fr;
}

/* --- the photograph ------------------------------------------------------ */
.sbcs-photo { position: relative; margin: 0; min-width: 0; }
.sbcs-img {
  display: block;
  width: 100%;
  height: 100%;
  object-fit: cover;
  /* The tall frame is cover-cropped into a landscape box twice over: the
     768-1023 band forces 4/3, and on desktop the height cap does the
     same. Both take their loss vertically around this point, so it sits
     high - centred, a third of the frame's height goes and the top of a
     standing subject is cut off on exactly the widest screens. */
  object-position: 50% 6%;
}
/* An edge treatment, not a scrim. No type is ever set over this
   photograph - the copy lives in the black column beside it - so the
   picture is never dimmed to keep words readable.

   The ramp must START opaque. That is what makes the picture's first
   pixel column exactly the ground colour beside it, so there is no step
   at the join. What changes for a high-key frame is the LENGTH: over a
   pale ground the old 46% carried a black wash halfway across the
   picture, which reads as a smudge rather than an edge. */
.sbcs-veil {
  position: absolute;
  inset: 0;
  pointer-events: none;
  background: linear-gradient(to right,
    var(--cs-black) 0%, rgb(9 9 8 / 0) 7%);
}

/* --- the copy ------------------------------------------------------------ */
.sbcs-copy { padding: clamp(44px, 5vw, 76px) clamp(20px, 4vw, 56px) clamp(20px, 2vw, 28px); }

.sbcs-eyebrow {
  display: flex;
  align-items: center;
  gap: 14px;
  margin: 0;
  font-size: clamp(11px, 0.85vw, 13px);
  font-weight: 600;
  letter-spacing: 0.3em;
  text-transform: uppercase;
  color: var(--cs-brass);
}
.sbcs-num { font-size: 1.15em; letter-spacing: 0.1em; }
.sbcs-rule { flex: 0 0 26px; height: 1px; background: var(--cs-line); }

.sbcs-title {
  margin: 22px 0 0;
  /* Sized against the copy column, not the viewport: at 5.4vw the
     headline broke to three lines in a 1024px layout. */
  font-size: clamp(2rem, 3.6vw, 4.2rem);
  line-height: 0.94;
  letter-spacing: -0.015em;
  font-weight: 900;
  text-transform: uppercase;
  color: var(--sb-ink-2);
}
.sbcs-title span { display: block; }

.sbcs-support {
  margin: 22px 0 0;
  max-width: 34ch;
  font-size: clamp(13.5px, 1vw, 16px);
  line-height: 1.72;
  color: var(--cs-muted);
}

/* --- controls ------------------------------------------------------------ */
.sbcs-ctas {
  margin-top: clamp(24px, 3vw, 36px);
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 14px 20px;
}
.sbcs-cta {
  display: inline-flex;
  align-items: center;
  gap: 12px;
  min-height: 52px;
  padding: 0 26px;
  border: 1px solid var(--cs-line);
  border-radius: var(--sb-r-control);
  font-size: 12.5px;
  font-weight: 600;
  letter-spacing: 0.14em;
  text-transform: uppercase;
  text-decoration: none;
  color: var(--cs-brass);
  transition: border-color 200ms ease, background-color 200ms ease, color 200ms ease;
}
.sbcs-cta svg { width: 15px; height: 15px; }
.sbcs-cta:hover { border-color: var(--cs-brass); background: rgb(201 168 106 / 0.08); }

.sbcs-workflow-btn {
  background: none;
  border: 0;
  padding: 6px 0;
  font-family: inherit;
  font-size: 12px;
  font-weight: 600;
  letter-spacing: 0.14em;
  text-transform: uppercase;
  color: var(--cs-muted);
  cursor: pointer;
  border-bottom: 1px solid rgb(158 151 140 / 0.4);
  transition: color 200ms ease, border-color 200ms ease;
}
.sbcs-workflow-btn:hover { color: var(--cs-brass); border-bottom-color: var(--cs-brass); }

.sbcs-cta:focus-visible, .sbcs-workflow-btn:focus-visible,
.sbcs-feature:focus-visible {
  outline: 2px solid var(--cs-brass);
  outline-offset: 3px;
}

/* --- the workflow -------------------------------------------------------- */
.sbcs-workflow {
  margin: 22px 0 0;
  padding: 0 0 0 1px;
  list-style: none;
  max-width: 44ch;
  border-left: 1px solid var(--cs-line);
}
.sbcs-workflow li { position: relative; padding: 0 0 14px 20px; }
.sbcs-workflow li::before {
  content: "";
  position: absolute;
  left: -4px; top: 6px;
  width: 7px; height: 7px;
  border-radius: 50%;
  background: var(--cs-brass);
}
.sbcs-step {
  display: block;
  font-size: 12px;
  font-weight: 600;
  letter-spacing: 0.22em;
  text-transform: uppercase;
  color: var(--cs-brass);
}
.sbcs-step-detail {
  display: block;
  margin-top: 4px;
  font-size: 13px;
  line-height: 1.6;
  color: var(--cs-muted);
}

/* --- the one differentiator ---------------------------------------------- */
.sbcs-memory { margin-top: clamp(26px, 3vw, 38px); max-width: 38ch; }
.sbcs-memory-title {
  margin: 0;
  font-size: 12px;
  font-weight: 600;
  letter-spacing: 0.2em;
  text-transform: uppercase;
  color: var(--cs-ivory);
}
.sbcs-memory-copy {
  margin: 8px 0 0;
  font-size: 12.5px;
  line-height: 1.65;
  color: var(--cs-muted);
}

/* --- the labels along the bottom edge ------------------------------------ */
.sbcs-features {
  grid-column: 1 / -1;
  padding: 0 clamp(20px, 4vw, 56px) clamp(26px, 3vw, 40px);
}
.sbcs-feature-row {
  display: flex;
  flex-wrap: wrap;
  margin: 0;
  padding: 14px 0 0;
  list-style: none;
  border-top: 1px solid var(--cs-line);
}
.sbcs-feature-row > li { flex: 1 1 auto; text-align: center; }
.sbcs-feature-row > li + li { border-left: 1px solid rgb(201 168 106 / 0.18); }

.sbcs-feature {
  width: 100%;
  min-height: 46px;
  padding: 10px 12px;
  background: none;
  border: 0;
  font-family: inherit;
  font-size: clamp(11.5px, 0.9vw, 14px);
  font-weight: 500;
  letter-spacing: 0.2em;
  text-transform: uppercase;
  color: var(--cs-muted);
  cursor: pointer;
  transition: color 200ms ease;
}
.sbcs-feature:hover, .sbcs-feature.is-active { color: var(--cs-ivory); }

/* Fixed height, so a label lighting up never moves the row above it. */
.sbcs-feature-line {
  margin: 10px 0 0;
  min-height: 2.8em;
  text-align: center;
  font-size: clamp(12.5px, 0.95vw, 14.5px);
  line-height: 1.5;
  color: var(--cs-brass);
}
.sbcs-feature-text { opacity: 0; transition: opacity 200ms ease; }
.sbcs-features.is-showing .sbcs-feature-text { opacity: 1; }

/* Every line is in the document for a reader with no pointer; the row
   above is the same content with a hover state on it. */
.sbcs-feature-fallback {
  position: absolute;
  width: 1px; height: 1px;
  overflow: hidden;
  clip-path: inset(50%);
  white-space: nowrap;
}

/* --- desktop ------------------------------------------------------------- */
@media (min-width: 1024px) {
  .sbcs-inner {
    grid-template-columns: 52fr 48fr;
    align-items: stretch;
  }
  .sbcs-copy {
    grid-row: 1;
    grid-column: 1;
    align-self: center;
    padding-right: clamp(20px, 2.5vw, 40px);
  }
  /* Centred rather than stretched: if the copy column is ever the taller
     of the two, the picture stays its own height instead of growing a
     black gap under itself. */
  .sbcs-photo { grid-row: 1; grid-column: 2; align-self: center; }
  /* Height is the constraint here - at 820px this one picture set the
     height of the whole section. 574px is a third off that.
     The column narrows with it, and has to: cover crops a portrait
     vertically, so holding the old 64% width at this height would slice
     the subject off below the eyes. At 48% the box stays near enough to
     the frame's own proportion that the crop is gentler than it was
     before, not tighter. */
  .sbcs-img { aspect-ratio: 830 / 980; max-height: 574px; }
  /* Only the photograph's left edge needs seating against the black
     column beside it: opaque at the join, clear 54px later on a 1075px
     frame. At 16% that ramp ran 172px - invisible across a near-black
     picture, a grey stain across a pale one. */
  .sbcs-veil {
    background: linear-gradient(to right, var(--cs-black) 0%, rgb(9 9 8 / 0) 5%);
  }
  .sbcs-features { padding-top: 0; }
}

/* --- phone and narrow tablet --------------------------------------------- */
@media (max-width: 1023px) {
  .sbcs-photo { order: 2; }
  .sbcs-copy { order: 1; }
  .sbcs-features { order: 3; padding-top: 22px; }
  .sbcs-inner { display: flex; flex-direction: column; }
  /* The tablet band gets the wide composition, so it keeps a wider box;
     the phone gets the close crop and its own ratio exactly. */
  .sbcs-img { aspect-ratio: 4 / 3; }
  /* Stacked, the photograph's top edge meets the copy block above it,
     so the ramp runs downward and still starts opaque. It used to reach
     55% black a third of the way down the picture, which a low-key frame
     absorbed and a high-key one wears as a grey band across its
     brightest area - and across the hat. */
  .sbcs-veil {
    background: linear-gradient(to bottom, var(--cs-black) 0%, rgb(9 9 8 / 0) 12%);
  }
  .sbcs-cta { width: 100%; justify-content: center; }
}
@media (max-width: 767px) {
  .sbcs-img { aspect-ratio: 600 / 520; }
}
@media (max-width: 640px) {
  /* Four labels do not fit a phone in one row without shrinking them into
     nothing, so the row scrolls and each label stays a real target. */
  .sbcs-feature-row {
    flex-wrap: nowrap;
    overflow-x: auto;
    scroll-snap-type: x mandatory;
    scrollbar-width: none;
  }
  .sbcs-feature-row::-webkit-scrollbar { display: none; }
  .sbcs-feature-row > li { flex: 0 0 auto; scroll-snap-align: start; }
  .sbcs-feature { padding: 10px 18px; }
  .sbcs-feature-line { text-align: left; }
}

@media (prefers-reduced-motion: reduce) {
  .sbcs-cta, .sbcs-workflow-btn, .sbcs-feature, .sbcs-feature-text {
    transition: none;
  }
  .sbcs-feature-row { scroll-behavior: auto; }
}