/* ============================================================
   XQUBE GLOBAL — SERVICES OVERVIEW (page 02)
   The map of the practice. One pinned title, one proposition,
   then three groupings as the spine with seven doors hung off it.
   Everything here layers on css/main.css; nothing is redefined.
   ============================================================ */

/* ---------- you are here ---------- */
.nav-links a.is-here { color: var(--text); }
.nav-links a.is-here::after { transform: scaleX(1); opacity: 0.6; }
.mobile-links a.is-here { color: var(--text); }
.mobile-links a.is-here .mono { color: var(--pink); }

/* ---------- the cold open belongs to the homepage ----------
   An inner page is arrived at, not opened on. The chrome stays. */
.js.cold .nav-inner,
.js.cold .scroll-progress { opacity: 1; }

/* ============================================================
   SCENE — the title
   Reuses the film's prologue slot so the number-field builds,
   but plays this page's own choreography (see js/services.js).
   ============================================================ */
section[data-scene="prologue"].svc-title { height: 240vh; }

.svc-title-stage {
  justify-content: center;
  padding-top: calc(var(--nav-h) + var(--s6));
  padding-bottom: var(--s7);
}
.svc-title-stage .title-block { max-width: 1120px; }
.svc-h1 {
  font-size: clamp(36px, 5.9vw, 84px);
  line-height: 1.05;
  letter-spacing: -0.028em;
  max-width: 17ch;
  margin: 0 auto;
}

/* the count line: chrome, in mono, under the proposition */
.svc-title-meta {
  position: relative; z-index: 2;
  display: flex; align-items: center; justify-content: center;
  gap: var(--s3);
  margin-top: clamp(36px, 6vh, 72px);
  font-size: 11px; letter-spacing: 0.22em;
  color: var(--faint);
  opacity: var(--metaop, 1);
  transform: translateY(calc((1 - var(--metaop, 1)) * 18px));
}
.svc-title-meta em { font-style: normal; color: var(--purple-soft); }
.svc-title-meta i {
  display: block; width: 34px; height: 1px;
  background: linear-gradient(90deg, transparent, var(--line-strong), transparent);
}

/* ============================================================
   REST — the proposition
   The sentence lights word by word as it rises (engine flow scrub).
   ============================================================ */
.svc-intro-rest { padding-top: clamp(96px, 15vh, 180px); }
.svc-intro {
  font-size: clamp(20px, 2.5vw, 31px);
  line-height: 1.5;
  letter-spacing: -0.018em;
  font-weight: 500;
  color: var(--text);
  text-wrap: pretty;
}

/* ============================================================
   THE THREE GROUPINGS — the spine
   ============================================================ */
.svc-map .svc-thread { margin: var(--s5) 0 0; }

.svc-bands {
  display: flex; flex-direction: column;
  gap: clamp(64px, 10vh, 128px);
  margin-top: clamp(56px, 8vh, 96px);
}

.svc-band {
  display: grid;
  grid-template-columns: minmax(200px, 280px) 1fr;
  gap: clamp(28px, 4.5vw, 72px);
  align-items: start;
}

.svc-band-head {
  position: sticky;
  top: calc(var(--nav-h) + var(--s4));
  padding-left: var(--s3);
}
.band-rail {
  position: absolute; left: 0; top: 4px; bottom: 4px;
  width: 1px;
  background: var(--line);
  overflow: hidden;
}
.band-rail i {
  position: absolute; left: 0; top: 0;
  width: 1px; height: 100%;
  background: linear-gradient(180deg, var(--purple), var(--pink));
  box-shadow: 0 0 12px rgba(91, 76, 255, 0.7);
  transform: scaleY(0);
  transform-origin: 50% 0;
  transition: transform 1.15s cubic-bezier(0.22, 0.6, 0.2, 1) 0.12s;
}
.js .svc-band.in .band-rail i { transform: scaleY(1); }
.no-js .band-rail i { transform: none; }

.band-idx {
  font-size: 11px; letter-spacing: 0.2em;
  color: var(--faint);
  margin-bottom: var(--s2);
}
.band-idx em { font-style: normal; color: var(--purple-soft); }
.band-name {
  font-size: clamp(26px, 2.9vw, 36px);
  font-weight: 600; letter-spacing: -0.022em; line-height: 1.1;
  margin-bottom: 12px;
}
.band-desc {
  font-size: 14.5px; line-height: 1.65;
  color: var(--mist);
  max-width: 34ch;
}
.band-count {
  margin-top: var(--s3);
  padding-top: var(--s2);
  border-top: 1px solid var(--line);
  font-size: 10.5px; letter-spacing: 0.24em;
  color: var(--faint);
}
.band-count em { font-style: normal; color: var(--text); }

/* ---------- the seven doors ---------- */
.svc-band .svc-cards { display: grid; gap: var(--s2); }
.svc-band-4 .svc-cards,
.svc-band-2 .svc-cards { grid-template-columns: 1fr 1fr; }
.svc-band-1 .svc-cards { grid-template-columns: 1fr; }

.svc-map .svc-card { min-height: 208px; }
.svc-map .svc-card-wide {
  min-height: 190px;
  background:
    radial-gradient(120% 180% at 100% 0%, rgba(255, 77, 128, 0.07), transparent 58%),
    var(--surface);
}
.svc-map .svc-name { font-size: 18.5px; }
.svc-map .svc-line { max-width: 44ch; }

/* the relay wire: a signal arriving from the card you touched */
.svc-wire {
  position: absolute; left: 0; top: 0;
  width: 100%; height: 1px;
  background: linear-gradient(90deg, transparent, var(--purple-soft) 45%, var(--pink) 55%, transparent);
  transform: scaleX(0);
  transform-origin: 0 50%;
  opacity: 0;
  pointer-events: none;
}
@media (prefers-reduced-motion: no-preference) {
  .js .svc-card.relay .svc-wire { animation: relay-wire 0.66s cubic-bezier(0.4, 0.2, 0.2, 1) 1; }
  .js .svc-card.relay .svc-num { color: var(--pink-soft); }
}
@keyframes relay-wire {
  0%   { transform: scaleX(0); transform-origin: 0 50%; opacity: 0; }
  22%  { opacity: 1; }
  50%  { transform: scaleX(1); transform-origin: 0 50%; opacity: 1; }
  51%  { transform: scaleX(1); transform-origin: 100% 50%; }
  100% { transform: scaleX(0); transform-origin: 100% 50%; opacity: 0; }
}

/* ---------- the card the wave came FROM ----------
   On a fine pointer the source is unmistakable: it is the card under the
   cursor, so :hover names it while the other six answer. A thumb has no
   cursor, so js/services.js marks whichever card sits nearest the middle of
   the screen — the one being read — and that card has to look like the origin
   of the signal, or a phone reader sees six cards answer with nothing visible
   to have asked them.

   The cue is this card's own wire, held open instead of swept: the seam along
   its top edge becomes the purple-to-pink hairline, which reads as the line
   the other six are answering down. It reuses the element the relay already
   owns, whose geometry is fixed by this file (top 0, full width, 1px), rather
   than main.css's spine node — that node is positioned off --spine-pad, a
   variable only the homepage's .svc-spine defines, so on this page it has no
   dependable place to sit.

   Held, not animated: a card stays the nearest one for as long as it is being
   read, and a looping pulse there would compete with the wave it just sent.
   Only transform and opacity move.

   Gated to the same condition the script gates on, so a fine-pointer desktop
   at >=981px can never render this state even if the class survived a resize. */
@media (pointer: coarse), (max-width: 980px) {
  .js .svc-cards .svc-card .svc-wire {
    transition: transform 0.45s cubic-bezier(0.22, 0.6, 0.2, 1),
                opacity 0.45s ease;
  }
  /* :not(.relay) so a wave arriving at this card always wins the wire back —
     the source is excluded from its own wave, so this only ever matters if a
     hover and a scroll disagree on a narrow desktop window */
  .js .svc-cards .svc-card.svc-near:not(.relay) .svc-wire {
    transform: scaleX(1);
    opacity: 0.55;
  }
  .js .svc-cards .svc-card.svc-near .svc-arrow {
    transform: translateX(2px);
    color: var(--purple-soft);
  }
}

/* ============================================================
   ONWARD
   ============================================================ */
.svc-onward { padding-top: clamp(72px, 11vh, 150px); }
.svc-onward.section:last-of-type { padding-bottom: clamp(48px, 8vh, 104px); }
.svc-onward .onward-row {
  display: flex; flex-wrap: wrap; align-items: center;
  gap: var(--s3);
  border-top: 1px solid var(--line);
  padding-top: var(--s4);
}
.onward-label {
  font-size: 10.5px; letter-spacing: 0.26em;
  color: var(--faint);
  margin-right: var(--s2);
}
.onward-links { display: flex; flex-wrap: wrap; gap: var(--s2); }

/* ============================================================
   RESPONSIVE
   The title scene stays pinned (its content is two lines), but
   the spine unstacks and the heads stop sticking.
   ============================================================ */
@media (max-width: 980px) {
  /* main.css turns the homepage prologue into static flow; this page's
     title is short enough to keep playing, so take the stage back */
  section[data-scene="prologue"].svc-title { height: 190vh; }
  section[data-scene="prologue"].svc-title .scene-stage {
    position: sticky; top: 0;
    height: 100svh; min-height: 0;
    overflow: hidden;
    justify-content: center;
    padding: calc(var(--nav-h) + var(--s5)) var(--pad) var(--s6);
  }
  section[data-scene="prologue"].svc-title .scroll-cue { display: flex; }
  /* a phone-width stage is mostly headline — the world steps back so the
     sentence always wins the contrast fight */
  .hero-canvas-wrap { opacity: 0.42; }
  .svc-h1 { font-size: clamp(31px, 8.2vw, 46px); max-width: 100%; }
  .svc-title-meta { gap: var(--s2); font-size: 10px; letter-spacing: 0.16em; }

  .svc-band { grid-template-columns: 1fr; gap: var(--s4); }
  /* relative, never static — the rail is absolutely positioned to this box */
  .svc-band-head { position: relative; top: auto; }
  .band-desc { max-width: 52ch; }
  .band-count { display: inline-block; }
}

@media (max-width: 640px) {
  .svc-band-4 .svc-cards,
  .svc-band-2 .svc-cards { grid-template-columns: 1fr; }
  .svc-map .svc-card { min-height: 0; }
  .svc-intro { font-size: 19px; }
  .onward-links .btn { width: 100%; justify-content: center; }
  .svc-onward .onward-row { flex-direction: column; align-items: stretch; }
  .onward-links { flex-direction: column; }
}

/* ============================================================
   STATICS — no-JS and reduced motion get the whole page
   ============================================================ */
.no-js section[data-scene="prologue"].svc-title { height: auto !important; }
.no-js section[data-scene="prologue"].svc-title .scene-stage {
  position: static;
  height: auto; min-height: 0;
  overflow: visible;
  padding-top: calc(var(--nav-h) + var(--s7));
  padding-bottom: var(--s7);
}
.no-js .svc-title-meta { opacity: 1; transform: none; }
.no-js section[data-scene="prologue"].svc-title .scroll-cue { display: none; }

@media (prefers-reduced-motion: reduce) {
  section[data-scene="prologue"].svc-title { height: auto !important; }
  section[data-scene="prologue"].svc-title .scene-stage {
    position: static;
    height: auto; min-height: 0;
    overflow: visible;
    padding-top: calc(var(--nav-h) + var(--s7));
    padding-bottom: var(--s7);
  }
  section[data-scene="prologue"].svc-title .scroll-cue { display: none; }
  .svc-title-meta { opacity: 1; transform: none; }
  .band-rail i { transform: none; }
  .svc-wire { display: none; }
  .svc-band-head { position: relative; top: auto; }
}

/* ============================================================
   THE SERVICE CARD, PLACED EXPLICITLY
   css/main.css authors .svc-card for the HOMEPAGE card, which has three
   in-flow children: .svc-num, .svc-body (name + tagline together) and
   .svc-arrow — so a three-column grid places them exactly.

   This page's card has FOUR: the name and the tagline are siblings, not
   wrapped in .svc-body. Auto-placement therefore put the tagline into the
   third (auto) column and pushed the arrow onto a second row.
   MEASURED before this fix: at 1100px the columns computed to
   "56px 0px 190px" — the service NAME was zero pixels wide; at 390px they
   computed to "40px 263px" and the TAGLINE was crushed into the 40px
   column, one word per line.

   Name the areas so placement cannot drift, at every width. Scoped to
   .svc-cards so the homepage spine is untouched.
   ============================================================ */
.svc-cards .svc-card {
  grid-template-columns: 56px minmax(0, 1fr) auto;
  grid-template-areas:
    "num name arrow"
    "num line arrow";
  align-items: start;
  row-gap: 6px;
}
.svc-cards .svc-num   { grid-area: num; }
.svc-cards .svc-name  { grid-area: name; }
.svc-cards .svc-line  { grid-area: line; }
.svc-cards .svc-arrow { grid-area: arrow; align-self: center; justify-self: end; }

/* main.css collapses .svc-card to two columns below 560px, which would leave
   these named areas invalid — restate them for the narrow grid */
@media (max-width: 560px) {
  .svc-cards .svc-card {
    grid-template-columns: 40px minmax(0, 1fr) auto;
    gap: 4px 12px;
    row-gap: 5px;
  }
  .svc-cards .svc-arrow { align-self: start; margin-top: 2px; transform: none; }
}