/* Service pages and the services index. Builds on home.css + pillar.css. */

/* ---------- Service hero: a shorter band with the vignette ---------- */
.svc-stage .phero { min-height: 74vh; min-height: 74svh; padding-bottom: var(--sp-7); }
.svc-stage .stage__sticky { height: 74vh; height: 74svh; }
.svc-stage.stage--3d .stage__content { margin-top: -74vh; margin-top: -74svh; }
.svc-hero__title { font-size: clamp(2.25rem, 1.6rem + 2.8vw, 4rem); }
@media (min-width: 900px) { .svc-stage .stage__viz { top: 0; left: auto; width: 46%; right: var(--margin); } }
/* Phones: the light vignette would fight the copy as a backdrop, so it sits below it at full strength. */
@media (max-width: 899.98px) {
  .svc-stage { display: flex; flex-direction: column; }
  .svc-stage .stage__sticky { order: 2; position: relative; height: auto; }
  .svc-stage .stage__viz { position: relative; width: 100%; aspect-ratio: 4 / 3; opacity: 1; }
  .svc-stage.stage--3d .stage__content { margin-top: 0; }
  .svc-stage .phero { min-height: 0; padding-bottom: 0; }
}

/* ---------- What we do ---------- */
.what-grid { display: grid; gap: var(--sp-6) var(--gutter); grid-template-columns: repeat(auto-fit, minmax(min(100%, 300px), 1fr)); }
.what-grid li { display: grid; gap: var(--sp-2); align-content: start; padding-top: var(--sp-4); border-top: 2px solid var(--navy); }
.what-grid__num { font-family: var(--font-display); font-weight: 800; color: var(--blue); font-size: var(--fs-small); }
.what-grid h3 { font-size: 1.1875rem; }
.what-grid p { color: var(--text-muted); font-size: var(--fs-small); }

/* ---------- Ideal for / What you receive ---------- */
.fit { display: grid; gap: var(--gutter); }
@media (min-width: 900px) { .fit { grid-template-columns: 1fr 1fr; } }
.fit__panel { display: grid; gap: var(--sp-4); align-content: start; padding: var(--sp-6); border-radius: var(--radius); background: var(--white); }
.fit__panel--navy { background: var(--navy); box-shadow: -10px 10px 0 0 var(--sky); }
.check-list { list-style: none; margin: 0; padding: 0; display: grid; gap: var(--sp-3); }
.check-list li { display: flex; gap: var(--sp-3); align-items: flex-start; }
.check-list .icon { color: var(--sky); margin-top: 3px; }
.tech-row .sub-head { margin-top: var(--sp-7); }

/* ---------- Start ---------- */
.start { display: grid; gap: var(--sp-6); align-items: center; }
.start h2 { font-size: clamp(1.75rem, 1.4rem + 1.6vw, 2.5rem); }
.start__side { display: flex; flex-wrap: wrap; align-items: center; gap: var(--sp-4) var(--sp-5); }
.start__pill { font-size: var(--fs-small); padding: 6px 16px; }
@media (min-width: 960px) { .start { grid-template-columns: 1.3fr 1fr; } .start__side { justify-content: flex-end; } }

/* ---------- Previous / next ---------- */
.pager { background: var(--white); border-top: 1px solid var(--line); }
.pager__inner { display: grid; gap: var(--sp-4); padding-block: var(--sp-6); align-items: center; }
@media (min-width: 760px) { .pager__inner { grid-template-columns: 1fr auto 1fr; } }
.pager__link { display: grid; gap: 2px; padding: var(--sp-4) var(--sp-5); border-radius: var(--radius); text-decoration: none; color: var(--text); transition: background-color var(--dur) var(--ease); }
.pager__link:hover { background: var(--mist); color: var(--text); }
.pager__link--next { text-align: right; }
.pager__dir { display: inline-flex; gap: 6px; align-items: center; font-size: var(--fs-xs); font-weight: 700; letter-spacing: 0.12em; text-transform: uppercase; color: var(--blue); }
.pager__link--next .pager__dir { justify-content: flex-end; }
.pager__dir .icon { width: 16px; height: 16px; }
.pager__title { font-family: var(--font-display); font-weight: 800; font-size: 1.125rem; color: var(--navy); }
.pager__pillar { font-size: var(--fs-xs); color: var(--text-muted); }
.pager__all { justify-self: center; font-weight: 700; }

/* ---------- Services index: the 3D grid above the filter ---------- */
.svc-orbit { height: clamp(340px, 20vw + 200px, 520px); margin-bottom: var(--sp-6); border-radius: var(--radius-lg); background: var(--deep); }
.svc-orbit .scene-box__poster { object-fit: cover; }

/* ---------- Services index: the pillar tabs (lock-up, descriptor, count) ---------- */
.filter { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: var(--sp-3); margin-bottom: var(--sp-5); }
@media (min-width: 900px) { .filter { grid-template-columns: repeat(4, minmax(0, 1fr)); } }
.filter__btn {
  position: relative; display: grid; gap: 10px; align-content: start; text-align: left; padding: var(--sp-4) var(--sp-4) var(--sp-4) calc(var(--sp-4) + 4px);
  border-radius: var(--radius); border: 1.5px solid var(--line); background: var(--white); color: var(--navy);
  transition: background-color var(--dur-fast) var(--ease), border-color var(--dur-fast) var(--ease), box-shadow var(--dur-fast) var(--ease), transform var(--dur-fast) var(--ease);
}
/* A Sky bar on the left edge grows in on the chosen pillar. */
.filter__btn::before { content: ""; position: absolute; left: -1.5px; top: 14px; bottom: 14px; width: 4px; border-radius: 0 4px 4px 0; background: var(--sky); transform: scaleY(0); transition: transform var(--dur) var(--ease); }
.filter__logo { display: block; height: 30px; }
.filter__logo img { height: 100%; width: auto; max-width: 100%; object-fit: contain; object-position: left center; }
.filter__logo--dark { display: none; }
.filter__desc { font-size: var(--fs-small); line-height: 1.4; color: var(--text-muted); }
.filter__count { justify-self: start; padding: 2px 10px; border-radius: var(--radius-capsule); background: var(--cloud); font-size: var(--fs-xs); font-weight: 700; }
.filter__btn:hover { border-color: var(--navy); transform: translateY(-2px); }
.filter__btn[aria-pressed="true"] { background: var(--navy); border-color: var(--navy); color: var(--white); box-shadow: -6px 6px 0 0 var(--sky); }
.filter__btn[aria-pressed="true"]::before { transform: scaleY(1); }
.filter__btn[aria-pressed="true"] .filter__logo--light { display: none; }
.filter__btn[aria-pressed="true"] .filter__logo--dark { display: block; }
.filter__btn[aria-pressed="true"] .filter__desc { color: var(--navy-text-muted); }
.filter__btn[aria-pressed="true"] .filter__count { background: var(--sky); color: var(--navy); }
@media (max-width: 599.98px) { .filter__logo { height: 22px; } .filter__desc { display: none; } }
.filter__status { font-size: var(--fs-small); color: var(--text-muted); margin-bottom: var(--sp-5); }
.svc-grid > [hidden] { display: none; }

/* ---------- Service lines ---------- */
.lines { display: grid; gap: var(--gutter); grid-template-columns: repeat(auto-fit, minmax(min(100%, 340px), 1fr)); }
.line { display: grid; gap: var(--sp-3); align-content: start; padding: var(--sp-6) var(--sp-5); border-radius: var(--radius); background: var(--mist); }
.line__head { display: flex; gap: var(--sp-3); align-items: baseline; }
.line__num { font-family: var(--font-display); font-weight: 800; color: var(--blue); font-size: var(--fs-small); }
.line h3 { font-size: 1.25rem; }
.line__promise { font-family: var(--font-display); font-weight: 700; color: var(--blue); }
.line p:not(.line__promise):not(.line__led) { color: var(--text-muted); font-size: var(--fs-small); }
.line .diamond-list { font-size: var(--fs-small); gap: var(--sp-2); }
.line__led { margin-top: var(--sp-2); padding-top: var(--sp-3); border-top: 1px solid var(--line); font-size: var(--fs-xs); font-weight: 700; color: var(--navy); }
.line { position: relative; border: 1.5px solid transparent; transition: border-color var(--dur) var(--ease), background-color var(--dur) var(--ease), box-shadow var(--dur) var(--ease), opacity var(--dur) var(--ease), transform var(--dur) var(--ease); }

/* Desktop: the pillar map stays beside the list and follows the line in the middle of the screen. */
.lines-map { display: none; }
@media (min-width: 1024px) {
  .lines-wrap { display: grid; grid-template-columns: minmax(0, 4fr) minmax(0, 8fr); gap: var(--sp-8); align-items: start; }
  .lines-wrap .lines { grid-template-columns: minmax(0, 1fr); }
  .lines-wrap .line { grid-template-columns: minmax(0, 1.1fr) minmax(0, 1fr); column-gap: var(--sp-6); padding: var(--sp-6); }
  .lines-wrap .line > :not(.diamond-list):not(.line__led) { grid-column: 1; }
  .lines-wrap .line > .diamond-list { grid-column: 2; grid-row: 1 / span 3; align-self: start; padding-top: 4px; }
  .lines-wrap .line > .line__led { grid-column: 1 / -1; }
  .lines-wrap.is-tracking .line { opacity: 0.55; }
  .lines-wrap.is-tracking .line.is-current { opacity: 1; background: var(--white); border-color: var(--navy); box-shadow: -8px 8px 0 0 var(--sky); transform: translateX(6px); }

  .lines-map { position: sticky; top: calc(var(--header-h-solid) + var(--sp-6)); display: grid; gap: var(--sp-4); padding: var(--sp-6); border-radius: var(--radius-lg); background: var(--navy); color: var(--white); box-shadow: -8px 8px 0 0 var(--sky); }
  .lines-map__count { font-family: var(--font-display); font-weight: 800; font-size: clamp(3rem, 2rem + 3vw, 4.5rem); line-height: 1; letter-spacing: -0.03em; }
  .lines-map__count [data-map-num] { display: inline-block; transition: transform var(--dur) var(--ease), opacity var(--dur) var(--ease); }
  .lines-map__count.is-turning [data-map-num] { transform: translateY(-10px); opacity: 0; }
  .lines-map__of { font-size: 0.4em; color: var(--navy-text-muted); letter-spacing: 0; }
  .lines-map__title { font-family: var(--font-display); font-weight: 800; font-size: 1.25rem; line-height: 1.25; min-height: 2.5em; }
  .lines-map__pillars { list-style: none; margin: 0; padding: 0; display: grid; gap: var(--sp-2); }
  .lines-map__pillars li {
    position: relative; display: flex; align-items: center; justify-content: space-between; gap: var(--sp-3); padding: 10px 14px; border-radius: var(--radius);
    background: var(--white); opacity: 0.28; transform: scale(0.97); transform-origin: left center;
    transition: opacity var(--dur) var(--ease), transform var(--dur) var(--ease), box-shadow var(--dur) var(--ease);
  }
  .lines-map__pillars img { height: 22px; width: auto; }
  .lines-map__pillars li.is-on { opacity: 1; transform: none; }
  .lines-map__pillars li.is-lead { box-shadow: -5px 5px 0 0 var(--sky); }
  .lines-map__role { font-size: var(--fs-xs); font-weight: 700; letter-spacing: 0.12em; text-transform: uppercase; color: var(--blue); }
  .lines-map__bar { height: 4px; border-radius: 2px; background: var(--navy-line); overflow: hidden; }
  .lines-map__bar i { display: block; height: 100%; background: var(--sky); transform-origin: left; transform: scaleX(0.1); transition: transform var(--dur) var(--ease); }
}

/* ---------- Services index: By pillar on deep navy ---------- */
.svc-bypillar .container { position: relative; }
.svc-bypillar .filter__status { color: var(--navy-text-muted); }
/* The orbit runs edge to edge with no frame: its background is the section's deep navy, and the top
   and bottom fade out, so the 3D sits in the page rather than in a box. */
.svc-bypillar { overflow-x: clip; }
.svc-bypillar .svc-orbit {
  width: 100vw; margin-inline: calc(50% - 50vw); border-radius: 0; background: transparent;
  height: clamp(360px, 24vw + 200px, 600px);
  -webkit-mask-image: linear-gradient(to bottom, transparent 0, #000 12%, #000 88%, transparent 100%);
  mask-image: linear-gradient(to bottom, transparent 0, #000 12%, #000 88%, transparent 100%);
}
.svc-bypillar .filter__btn { background: var(--navy-raised); border-color: var(--navy-line); color: var(--white); }
.svc-bypillar .filter__btn:hover { border-color: var(--sky); }
.svc-bypillar .filter__logo--light { display: none; }
.svc-bypillar .filter__logo--dark { display: block; }
.svc-bypillar .filter__desc { color: var(--navy-text-muted); }
.svc-bypillar .filter__count { background: var(--navy); color: var(--white); }
.svc-bypillar .filter__btn[aria-pressed="true"] { background: var(--white); border-color: var(--white); color: var(--navy); }
.svc-bypillar .filter__btn[aria-pressed="true"] .filter__logo--light { display: block; }
.svc-bypillar .filter__btn[aria-pressed="true"] .filter__logo--dark { display: none; }
.svc-bypillar .filter__btn[aria-pressed="true"] .filter__desc { color: var(--text-muted); }
.svc-bypillar .filter__btn[aria-pressed="true"] .filter__count { background: var(--sky); color: var(--navy); }
.svc-bypillar .card { border-color: transparent; }
/* White surfaces inside the dark section read with the light-theme colours again. */
.svc-bypillar .card, .svc-bypillar .filter__btn[aria-pressed="true"] {
  --text: var(--graphite); --text-muted: var(--steel); --heading: var(--navy);
  --link: var(--blue); --link-hover: var(--navy); --border: var(--line); --focus: var(--blue);
  color: var(--text);
}
.svc-bypillar .card h3 { color: var(--navy); }
.svc-bypillar .card p { color: var(--text-muted); }