/* ==========================================================================
   SAN Media Solution — Section 3 · Services
   Built to `section 3 refrence  services.PNG`. `--s` is one pixel of that
   1536px artboard. Every frame in this section is static; the entrances only
   move what sits inside a frame (services.js).
   ========================================================================== */

.svc {
  --s: calc(100vw / 1536);
  --u: var(--s);                         /* the shared .pill sizes follow this section's unit */
  --lime-6: #86d80f;                     /* GROWTH */
  --line: #e2e2e2;
  position: relative;
  container-type: inline-size;
  overflow-x: clip;
  height: calc(1024 * var(--s));
  background: #fcfcfc;
  color: #111;
  font-family: var(--sans);
  -webkit-font-smoothing: antialiased;
}
@supports (width: 1cqw) {
  .svc { --s: calc(1cqw / 15.36); }
}
.svc__top { position: absolute; inset: 0 0 auto 0; height: calc(555 * var(--s)); }

/* ── left copy ─────────────────────────────────────────────────────────── */
.svc__copy {
  position: absolute;
  left: calc(70 * var(--s));
  top: calc(38 * var(--s));
  width: calc(400 * var(--s));
  z-index: 2;                            /* EXECUTION's last letter rides over the photograph's edge, as drawn */
}
.svc__kicker {
  display: flex;
  align-items: center;
  gap: calc(19 * var(--s));
  margin: 0;
  font-size: max(calc(11.5 * var(--s)), 9px);
  font-weight: 500;
  letter-spacing: .42em;
  text-transform: uppercase;
  line-height: 1;
  color: #58585b;
}
.svc__kicker i { display: block; width: calc(45 * var(--s)); height: calc(2 * var(--s)); background: var(--lime); }
.svc__title {
  margin: calc(22 * var(--s)) 0 0;
  font-size: calc(74 * var(--s));
  font-weight: 900;
  line-height: calc(65.4 * var(--s));
  letter-spacing: -.036em;
  text-transform: uppercase;
  color: #0a0a0a;
}
.svc__title span { display: block; white-space: nowrap; }
.svc__title em { font-style: normal; letter-spacing: .012em; color: var(--lime-6); }
.svc__lede {
  margin: calc(18 * var(--s)) 0 0;
  font-size: calc(17.4 * var(--s));
  font-weight: 400;
  line-height: calc(24 * var(--s));
  letter-spacing: -.022em;
  color: #4c4c4e;
}
.pill--svc {
  margin-top: calc(18 * var(--s));
  height: calc(49 * var(--s));
  padding: 0 calc(25 * var(--s));
  font-size: calc(16.5 * var(--s));
  font-weight: 700;
  letter-spacing: -.01em;
  text-decoration: none;
}
.pill--svc svg { width: calc(20 * var(--s)); }

/* ── the photographs, in fixed frames ─────────────────────────────────── */
.svc__team {
  position: absolute;
  left: calc(461 * var(--s));
  top: 0;
  width: calc(691 * var(--s));
  height: calc(555 * var(--s));
  margin: 0;
  overflow: hidden;                      /* the frame: the picture rises inside it */
}
.svc__team img, .svc__side img { display: block; width: 100%; height: 100%; object-fit: cover; }
.svc__side {
  position: absolute;
  left: calc(1340 * var(--s));
  top: 0;
  width: calc(196 * var(--s));
  height: calc(525 * var(--s));
  margin: 0;
  overflow: hidden;
}

/* ── the rail between them ─────────────────────────────────────────────── */
.svc__rail {
  position: absolute;
  left: calc(1190 * var(--s));
  top: calc(101 * var(--s));
  width: calc(140 * var(--s));
}
.svc__rail-label {
  margin: 0;
  font-size: max(calc(10 * var(--s)), 9px);
  font-weight: 500;
  letter-spacing: .28em;
  text-transform: uppercase;
  line-height: calc(17 * var(--s));
  color: #6a6a6c;
  white-space: nowrap;
}
.svc__rail-rule { display: block; width: calc(27 * var(--s)); height: calc(2 * var(--s)); margin-top: calc(16 * var(--s)); background: var(--lime); }
.svc__rail-list {
  list-style: none;
  margin: calc(53 * var(--s)) 0 0;
  padding: 0;
  font-size: max(calc(12.6 * var(--s)), 10px);
  font-weight: 500;
  letter-spacing: .2em;
  text-transform: uppercase;
  line-height: calc(26 * var(--s));
  color: #4a4a4c;
  white-space: nowrap;
}
.svc__rail-tick { display: block; width: 1px; height: calc(50 * var(--s)); margin-top: calc(40 * var(--s)); background: #444; }
.svc__rail-brand {
  margin: calc(28 * var(--s)) 0 0;
  font-size: max(calc(9.5 * var(--s)), 9px);
  font-weight: 500;
  letter-spacing: .21em;
  text-transform: uppercase;
  line-height: 1;
  color: #3a3a3c;
  white-space: nowrap;
}

/* ── the eleven services ──────────────────────────────────────────────── */
.svc__cards {
  position: absolute;
  left: calc(46 * var(--s));
  right: calc(40 * var(--s));
  top: calc(555 * var(--s));
  display: grid;
  grid-template-columns: repeat(11, 1fr);
  gap: calc(16 * var(--s));
  margin: 0;
  padding: 0;
  list-style: none;
}
.svc-card {
  position: relative;
  padding-top: calc(10 * var(--s));
  min-width: 0;
}
/* hairline between neighbours, as the artwork rules them */
.svc-card + .svc-card::before {
  content: "";
  position: absolute;
  left: calc(-8 * var(--s));
  top: calc(5 * var(--s));
  bottom: 0;
  width: 1px;
  background: var(--line);
}
/* the first service carries the lime rule the artwork gives it */
.svc-card.is-first::after {
  content: "";
  position: absolute;
  left: 0; top: 0;
  width: calc(81 * var(--s));
  height: calc(2 * var(--s));
  background: var(--lime);
}
.svc-card__n {
  display: flex;
  align-items: center;
  gap: calc(20 * var(--s));
  height: calc(17 * var(--s));
}
.svc-card__n b {
  font-size: calc(21 * var(--s));
  font-weight: 300;
  letter-spacing: .02em;
  line-height: 1;
  color: #8e8e90;
  font-variant-numeric: tabular-nums;
}
.svc-card__n i { display: block; width: calc(43 * var(--s)); height: 1px; background: #d4d4d4; }
.svc-card__t {
  margin: calc(22 * var(--s)) 0 0;
  font-size: calc(17 * var(--s));
  font-weight: 700;
  line-height: calc(19.5 * var(--s));
  letter-spacing: -.028em;
  color: #1a1a1a;
  white-space: nowrap;
}
.svc-card__frame {
  display: block;
  position: relative;
  margin-top: calc(13 * var(--s));
  width: 100%;
  aspect-ratio: 116 / 132;
  border-radius: calc(5 * var(--s));
  overflow: hidden;                      /* the frame: the picture slides inside it */
  background: #eaeaea;
  box-shadow: 0 calc(6 * var(--s)) calc(14 * var(--s)) rgba(0, 0, 0, .12);
}
.svc-card__frame img { display: block; width: 100%; height: 100%; object-fit: cover; }
.svc-card__d {
  margin: calc(12 * var(--s)) 0 0;
  min-height: calc(47 * var(--s));        /* three lines: every arrow sits on one line */
  font-size: max(calc(11.8 * var(--s)), 9px);
  font-weight: 400;
  line-height: calc(15.6 * var(--s));
  letter-spacing: -.022em;
  color: #7a7a7c;
}
.svc-card__go {
  display: grid;
  place-items: center;
  width: calc(27 * var(--s));
  height: calc(27 * var(--s));
  margin-top: calc(16 * var(--s));
  border-radius: 50%;
  border: calc(1.2 * var(--s)) solid #cfd6c7;
  color: #111;
  transition: transform .5s var(--e-out), border-color .5s;
}
.svc-card__go svg { width: calc(13 * var(--s)); height: auto; fill: none; stroke: currentColor; stroke-width: 1.5; stroke-linecap: round; stroke-linejoin: round; }
.svc-card__go:hover, .svc-card__go:focus-visible { transform: translateX(calc(3 * var(--s))); border-color: var(--lime); }

/* ── the closing row ──────────────────────────────────────────────────── */
.svc__tail {
  position: absolute;
  left: calc(47 * var(--s));
  right: calc(48 * var(--s));
  top: calc(905 * var(--s));
  height: calc(85 * var(--s));
  display: flex;
  align-items: center;
}
.tail__rule { display: block; width: calc(82 * var(--s)); height: 1px; background: #bdbdbd; }
.tail__line {
  margin: 0 0 0 calc(55 * var(--s));
  font-size: max(calc(9.5 * var(--s)), 9px);
  font-weight: 500;
  letter-spacing: .38em;
  text-transform: uppercase;
  white-space: nowrap;
  color: #6a6a6c;
}
.tail__ink { width: calc(184 * var(--s)); height: auto; margin-left: auto; }
.tail__cta {
  display: flex;
  align-items: center;
  gap: calc(16 * var(--s));
  margin-left: calc(31 * var(--s));
  font-size: max(calc(11 * var(--s)), 9px);
  font-weight: 700;
  letter-spacing: .24em;
  text-transform: uppercase;
  white-space: nowrap;
  text-decoration: none;
  color: #2a2a2a;
}
.tail__go {
  display: grid;
  place-items: center;
  width: calc(36 * var(--s));
  height: calc(36 * var(--s));
  border-radius: 50%;
  border: calc(1.4 * var(--s)) solid #222;
  transition: transform .5s var(--e-out), background .5s, color .5s;
}
.tail__go svg { width: calc(15 * var(--s)); height: auto; fill: none; stroke: currentColor; stroke-width: 1.5; stroke-linecap: round; stroke-linejoin: round; }
.tail__cta:hover .tail__go, .tail__cta:focus-visible .tail__go { background: #111; color: var(--lime); transform: translateX(calc(3 * var(--s))); }

/* ── entrances: services.js moves only what sits inside a frame ───────── */
.svc.is-live [data-in],
.svc.is-live [data-reveal-up],
.svc.is-live [data-slide] { will-change: transform, opacity; }

@media (prefers-reduced-motion: reduce) {
  .svc [data-in], .svc [data-reveal-up], .svc [data-slide] { transform: none !important; opacity: 1 !important; }
}

/* ══ narrow screens: re-laid, not shrunk ═══════════════════════════════ */
@media (max-width: 1080px) {
  .svc { --pad: clamp(20px, 4vw, 48px); height: auto; padding-bottom: clamp(28px, 4vh, 44px); }
  .svc__top { position: static; height: auto; display: flex; flex-direction: column; }
  .svc__copy { position: static; width: auto; padding: clamp(30px, 6vh, 64px) var(--pad) clamp(22px, 4vh, 40px); max-width: 640px; }
  .svc__kicker { font-size: clamp(10px, 1.3vw, 12px); }
  .svc__title { margin-top: 14px; font-size: clamp(40px, 8.6vw, 88px); line-height: .98; }
  .svc__title span { white-space: normal; }
  .svc__lede { margin-top: 14px; font-size: clamp(15px, 2.1vw, 19px); line-height: 1.34; }
  .svc__lede br { display: none; }
  .pill--svc { margin-top: 22px; height: clamp(44px, 5.4vw, 52px); padding: 0 clamp(22px, 3vw, 30px); gap: clamp(9px, 1.2vw, 13px); font-size: clamp(14px, 1.8vw, 17px); box-shadow: 0 0 0 1.5px var(--lime), 0 0 14px 1px rgba(152, 240, 20, .55), 0 4px 16px rgba(0, 0, 0, .16); }
  .pill--svc svg { width: clamp(16px, 2vw, 20px); }
  .svc__team { position: relative; left: auto; top: auto; width: 100%; height: auto; aspect-ratio: 691 / 555; }
  .svc__side { display: none; }
  .svc__rail {
    position: static; width: auto;
    display: grid; grid-template-columns: auto 1fr; gap: 0 clamp(24px, 5vw, 60px); align-items: start;
    padding: clamp(22px, 4vh, 40px) var(--pad) 0;
  }
  .svc__rail-label { grid-column: 1; font-size: clamp(9.5px, 1.2vw, 11px); line-height: 1.7; }
  .svc__rail-rule { grid-column: 1; width: 27px; height: 2px; margin-top: 10px; }
  .svc__rail-list {
    grid-column: 2; grid-row: 1 / span 3;
    margin: 0; display: flex; flex-wrap: wrap; gap: 4px clamp(12px, 2.2vw, 26px);
    font-size: clamp(10.5px, 1.4vw, 13px); line-height: 1.9;
  }
  .svc__rail-tick { display: none; }
  .svc__rail-brand { grid-column: 1; margin-top: 12px; font-size: clamp(8.5px, 1.1vw, 10px); }

  .svc__cards {
    position: static;
    grid-template-columns: repeat(4, minmax(0, 1fr));
    gap: clamp(22px, 3vh, 34px) clamp(14px, 2.4vw, 26px);
    padding: clamp(28px, 5vh, 52px) var(--pad) 0;
  }
  .svc-card + .svc-card::before { display: none; }
  .svc-card { padding-top: 10px; }
  .svc-card.is-first::after { width: 60px; height: 2px; }
  .svc-card__n { height: 17px; gap: 14px; }
  .svc-card__n b { font-size: clamp(16px, 2.2vw, 21px); }
  .svc-card__n i { width: 34px; }
  .svc-card__t { margin-top: 14px; font-size: clamp(15px, 2vw, 18px); line-height: 1.15; white-space: normal; }
  .svc-card__frame { margin-top: 10px; border-radius: 6px; }
  .svc-card__d { margin-top: 10px; min-height: 0; font-size: clamp(12px, 1.5vw, 13.5px); line-height: 1.38; }
  .svc-card__d br { display: none; }
  .svc-card__go { width: 30px; height: 30px; margin-top: 12px; border-width: 1px; }
  .svc-card__go svg { width: 13px; }

  .svc__tail {
    position: static; height: auto;
    display: grid; grid-template-columns: 1fr auto; align-items: center; gap: 14px clamp(16px, 3vw, 32px);
    margin: clamp(30px, 5vh, 56px) var(--pad) 0;
    padding-top: clamp(20px, 3vh, 30px);
    border-top: 1px solid var(--line);
  }
  .tail__rule { display: none; }
  .tail__line { margin: 0; font-size: clamp(8.5px, 1.1vw, 10px); letter-spacing: .3em; white-space: normal; line-height: 1.6; }
  .tail__ink { display: none; }
  .tail__cta { margin: 0; font-size: clamp(10px, 1.3vw, 11.5px); gap: 12px; }
  .tail__go { width: 36px; height: 36px; border-width: 1.4px; }
  .tail__go svg { width: 15px; }
}
@media (max-width: 720px) {
  .svc__cards { grid-template-columns: repeat(3, minmax(0, 1fr)); }
}
@media (max-width: 480px) {
  .svc__cards { grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 26px 14px; }
  .svc-card__t { font-size: 15px; }
  .svc__rail { grid-template-columns: 1fr; }
  .svc__rail-list { grid-column: 1; grid-row: auto; margin-top: 12px; }
}