/* Services page. Round 4 (R4-4, R4-C): round-2 copy, round-1 alternating offering rows (numbers removed, tight).
   Rhythm: charcoal hero -> light grey offerings -> charcoal "Why" -> light grey closing band -> charcoal footer. */

/* ---------- R-S1 hero (unchanged: dark, her line-drawing loop) ----------
   Her 1440x640 loop carries her headline in its left half and the line drawing on the right.
   The video box sits on the right, anchored to the frame's right edge, so only the drawing shows. */
.sv-hero { position: relative; overflow: hidden; background: var(--bg); min-height: clamp(440px, 36vw, 520px); display: flex; align-items: center; }
.sv-hero__media { position: absolute; top: 0; right: 0; bottom: 0; width: 46%; pointer-events: none; }
.sv-hero__media video { position: absolute; top: 0; right: 0; height: 100%; width: auto; max-width: 100%; aspect-ratio: 660 / 640; object-fit: cover; object-position: 100% 50%;
  /* R7: the file is cropped to the drawing; the fade sits on the video itself so its left edge and her darker top band melt into the page */
  -webkit-mask-image: linear-gradient(90deg, transparent 0, #000 28%), linear-gradient(180deg, transparent 0, #000 24%, #000 84%, transparent 100%);
  -webkit-mask-composite: source-in;
  mask-image: linear-gradient(90deg, transparent 0, #000 28%), linear-gradient(180deg, transparent 0, #000 24%, #000 84%, transparent 100%);
  mask-composite: intersect; }
.sv-hero__inner { position: relative; z-index: 1; padding-top: var(--section); padding-bottom: var(--section); }
.sv-hero__copy { max-width: 620px; }
.sv-hero .eyebrow { margin-bottom: 12px; }
.sv-hero .display { font-size: clamp(44px, 5.4vw, 84px); }
.sv-hero .display .hl { display: block; }
.sv-hero .lead { margin-top: 16px; max-width: 54ch; }

/* ---------- R-S2 four offerings (R4-4): round-1 alternating rows, icon one side, label + headline + body the other.
   Her round-2 notes on this layout: remove the 01-04 numbers, spacing too big. So: no numbers, no boxes, tight rhythm.
   Icons are her transparent '-t' files, which read on the light grey ground. ---------- */
.sv-offer { display: grid; grid-template-columns: minmax(0, 4fr) minmax(0, 8fr); gap: clamp(24px, 4vw, 56px); align-items: center; scroll-margin-top: 100px; }
.sv-offer + .sv-offer { margin-top: clamp(28px, 3vw, 40px); padding-top: clamp(28px, 3vw, 40px); border-top: 1px solid var(--line); }
.sv-offer--flip { grid-template-columns: minmax(0, 8fr) minmax(0, 4fr); }
.sv-offer--flip .sv-offer__icon { order: 2; }
.sv-offer__icon { max-width: 200px; width: 100%; justify-self: center; }
.sv-offer__icon img { width: 100%; height: auto; display: block; }
.sv-offer__copy .eyebrow { margin-bottom: 12px; }
.sv-offer__copy .display { max-width: 22ch; }
.sv-offer__copy p:last-child { margin-top: 16px; max-width: 62ch; color: var(--text); line-height: 1.65; }

/* ---------- R-S3 why (charcoal band between the two light sections, R4-C) ---------- */
.sv-why { background: var(--bg); }
.sv-why__head .display { margin-bottom: 20px; }
.sv-why__head .lead { max-width: 60ch; margin: 0 auto; }
.sv-why__list { list-style: none; margin: clamp(40px, 4.5vw, 56px) 0 0; padding: 0; display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: clamp(28px, 3.5vw, 56px); }
.sv-why__list .mark { margin-bottom: 14px; }
.sv-why__list h3 { font: 700 19px/1.3 var(--body); color: var(--cream); margin-bottom: 8px; }
.sv-why__list p { color: var(--muted); max-width: 38ch; }

/* ---------- R-S4 closing band (shared .cta-band) ---------- */
.sv-cta .display { max-width: 1100px; margin: 0 auto; }
.sv-cta__btn { text-transform: none; letter-spacing: .03em; font-size: 15px; min-height: 56px; padding: 16px 36px; }

/* ---------- responsive ---------- */
@media (max-width: 900px) {
  .sv-hero { flex-direction: column; align-items: stretch; min-height: 0; }
  /* keep height >= ~0.9 x width so the crop never reaches the headline baked into the left half of her frame */
  .sv-hero__media { position: relative; width: 100%; height: min(92vw, 420px); order: -1; }
  .sv-hero__media video { object-position: 100% 50%; }
  .sv-hero__inner { padding-top: 0; margin-top: -48px; }
  .sv-offer, .sv-offer--flip { grid-template-columns: 1fr; gap: 16px; }
  .sv-offer--flip .sv-offer__icon { order: 0; }
  .sv-offer__icon { max-width: 120px; justify-self: start; }
  .sv-why__list { grid-template-columns: 1fr; gap: 28px; }
}

/* ---------- R5-3 CSR Evolution video: full content width so its text reads; sits on the offerings ground ---------- */
.sv-film { margin: clamp(40px, 5vw, 64px) 0 0; }
.sv-film__frame { border-radius: 14px; overflow: hidden; background: #231E1D; box-shadow: 0 24px 48px rgba(0, 0, 0, .34); }
.sv-film__video { display: block; width: 100%; height: auto; aspect-ratio: 16 / 9; }