/* =========================================================
   SERVICES PAGE (services.html) — page-only styles
   Builds on the tokens + components in css/style.css.
   No new JS: interactions use .reveal/.is-in, [data-spy-nav]
   (.is-active), :hover and :has().
   ========================================================= */

/* ---------- Hero: "on this page" links ----------
   Same pattern on work, services and partners (keep the three copies in sync,
   or promote to css/style.css as `.page-hero__aside a`). */
.svc-hero .page-hero__aside a { flex: 1; display: flex; justify-content: space-between; align-items: baseline; gap: 12px; padding-bottom: 10px; border-bottom: 1px dashed rgba(27,42,58,.14); transition: color .3s, transform .45s var(--spring); }
.svc-hero .page-hero__aside li:last-child a { border-bottom: 0; padding-bottom: 0; }
.svc-hero .page-hero__aside a .mono { color: var(--muted); font-size: 11px; transition: color .3s; }
.svc-hero .page-hero__aside a:hover { color: var(--copper-d); transform: translateX(5px); }
.svc-hero .page-hero__aside a:hover .mono { color: var(--copper); }

.wa-ico { width: 18px; height: 18px; flex-shrink: 0; fill: var(--green); transition: transform .45s var(--spring); }
.btn:hover .wa-ico { transform: rotate(-12deg) scale(1.12); }

/* ---------- Overview cards: two actions + a dimension-line hover ---------- */
.svc-card__actions { position: relative; margin-top: auto; padding-top: 20px; display: flex; flex-wrap: wrap; align-items: center; gap: 10px 22px; }
.svc-card__actions::before {
  content: ""; position: absolute; left: 0; right: 0; top: 0; height: 1px;
  background: repeating-linear-gradient(90deg, var(--copper) 0 6px, transparent 6px 11px);
  transform: scaleX(0); transform-origin: left; transition: transform .8s var(--ease);
}
.service:hover .svc-card__actions::before { transform: scaleX(1); }
.service .svc-card__actions .btn { margin-top: 0; align-self: center; }
.service .service__top .mono { transition: color .3s, letter-spacing .5s var(--ease); }
.service:hover .service__top .mono { color: var(--copper); letter-spacing: .22em; }
.svc-more {
  display: inline-flex; align-items: center; gap: 8px; padding: 6px 2px;
  font-family: var(--f-display); font-weight: 500; font-size: 15px; color: var(--navy);
  background: linear-gradient(currentColor, currentColor) 0 100% / 0 1.5px no-repeat;
  transition: background-size .45s var(--ease), color .3s;
}
.svc-more svg { width: 16px; height: 16px; fill: none; stroke: currentColor; stroke-width: 2; stroke-linecap: round; stroke-linejoin: round; }
.svc-more:hover { background-size: 100% 1.5px; color: var(--copper-d); }
.svc-more:hover svg { animation: svcBob .9s var(--ease) infinite; }
.service--feature .svc-more { color: var(--cream); }
.service--feature .svc-more:hover { color: var(--copper-2); }
.service--feature .svc-card__actions::before { background: repeating-linear-gradient(90deg, var(--copper-2) 0 6px, transparent 6px 11px); }
@keyframes svcBob { 50% { transform: translateY(4px); } }

/* ---------- Detail area: sticky spy nav + stacked service cards ---------- */
.svc-layout { display: grid; grid-template-columns: 236px minmax(0, 1fr); gap: clamp(28px, 4vw, 60px); align-items: start; }

.svc-spy {
  position: sticky; top: 112px; min-width: 0;
  padding: 20px 14px 18px; border-radius: var(--r-lg);
  background: rgba(255, 255, 255, .62); box-shadow: var(--shadow-sm), var(--inset);
  backdrop-filter: blur(14px); -webkit-backdrop-filter: blur(14px);
  /* keep the .reveal fade/slide and add a "top" glide that matches the main nav's hide/show (.6s) */
  transition: top .6s var(--ease), opacity 1s var(--ease), transform 1.1s var(--spring);
}
/* main nav slides away while scrolling down → move up into its space instead of leaving a gap */
body:has(.nav.is-hidden) .svc-spy { top: 28px; }
.svc-spy__head { display: flex; justify-content: space-between; align-items: baseline; padding: 0 6px; font-size: 11px; color: var(--copper-d); }
.svc-spy__count { color: var(--navy); }
.svc-spy__count::before { content: "00"; }
.svc-spy__count::after { content: " / 06"; color: var(--muted); }
.svc-spy__bar { display: block; height: 5px; margin: 12px 6px 14px; border-radius: 5px; overflow: hidden; background: repeating-linear-gradient(90deg, rgba(27,42,58,.16) 0 1px, transparent 1px 8px); }
.svc-spy__bar i { display: block; width: 0; height: 100%; border-radius: 5px; background: linear-gradient(90deg, var(--copper-2), var(--copper), var(--copper-d)); transition: width .8s var(--spring); }
/* live readout driven purely by the scroll-spy's .is-active (progressive enhancement via :has) */
.svc-spy:has(li:nth-child(1) .is-active) .svc-spy__count::before { content: "01"; }
.svc-spy:has(li:nth-child(2) .is-active) .svc-spy__count::before { content: "02"; }
.svc-spy:has(li:nth-child(3) .is-active) .svc-spy__count::before { content: "03"; }
.svc-spy:has(li:nth-child(4) .is-active) .svc-spy__count::before { content: "04"; }
.svc-spy:has(li:nth-child(5) .is-active) .svc-spy__count::before { content: "05"; }
.svc-spy:has(li:nth-child(6) .is-active) .svc-spy__count::before { content: "06"; }
.svc-spy:has(li:nth-child(1) .is-active) .svc-spy__bar i { width: 16.66%; }
.svc-spy:has(li:nth-child(2) .is-active) .svc-spy__bar i { width: 33.33%; }
.svc-spy:has(li:nth-child(3) .is-active) .svc-spy__bar i { width: 50%; }
.svc-spy:has(li:nth-child(4) .is-active) .svc-spy__bar i { width: 66.66%; }
.svc-spy:has(li:nth-child(5) .is-active) .svc-spy__bar i { width: 83.33%; }
.svc-spy:has(li:nth-child(6) .is-active) .svc-spy__bar i { width: 100%; }

.svc-spy__list { list-style: none; margin: 0; padding: 0; display: grid; gap: 4px; }
.svc-spy__list li { position: relative; }
/* rail between the number bubbles: dashed track + copper fill for passed steps */
.svc-spy__list li:not(:last-child)::before,
.svc-spy__list li:not(:last-child)::after { content: ""; position: absolute; z-index: 2; left: 22px; top: 41px; bottom: -11px; width: 2px; border-radius: 2px; pointer-events: none; }
.svc-spy__list li:not(:last-child)::before { background: repeating-linear-gradient(to bottom, rgba(27,42,58,.22) 0 3px, transparent 3px 6px); }
.svc-spy__list li:not(:last-child)::after { background: linear-gradient(var(--copper-2), var(--copper)); transform: scaleY(0); transform-origin: top; transition: transform .6s var(--ease); }
.svc-spy__list li:has(~ li .is-active)::after { transform: scaleY(1); }
.svc-spy__list a {
  position: relative; z-index: 1; display: flex; align-items: center; gap: 12px;
  padding: 7px 14px 7px 6px; border-radius: 999px; white-space: nowrap;
  font-family: var(--f-display); font-weight: 500; font-size: 16px; color: var(--muted);
  transition: background .35s, color .35s, box-shadow .35s;
}
.svc-spy__n {
  flex-shrink: 0; width: 34px; height: 34px; border-radius: 50%; display: grid; place-items: center;
  font-size: 11px; background: var(--paper); color: var(--navy-3); box-shadow: inset 0 0 0 1.5px var(--cream-3);
  transition: background .4s, color .4s, box-shadow .4s, transform .6s var(--spring);
}
.svc-spy__t { display: inline-block; transition: transform .5s var(--spring); }
.svc-spy__list a:hover { color: var(--navy); background: rgba(27,42,58,.05); }
.svc-spy__list a:hover .svc-spy__n { transform: rotate(-12deg) scale(1.08); }
.svc-spy__list li:has(~ li .is-active) .svc-spy__n { color: var(--copper-d); box-shadow: inset 0 0 0 1.5px var(--copper); }
.svc-spy__list a.is-active { color: var(--navy); background: var(--paper); box-shadow: var(--shadow-sm); }
.svc-spy__list a.is-active .svc-spy__n { background: linear-gradient(135deg, var(--copper-2), var(--copper) 55%, var(--copper-d)); color: #fff; box-shadow: var(--shadow-copper); transform: scale(1.1); }
.svc-spy__list a.is-active .svc-spy__t { transform: translateX(3px); }
.svc-spy__help { display: block; margin: 16px 6px 0; padding-top: 14px; border-top: 1px dashed rgba(27,42,58,.16); font-size: 14px; line-height: 1.45; color: var(--muted); transition: color .3s; }
.svc-spy__help b { display: inline-flex; align-items: center; gap: 6px; margin-top: 4px; font-family: var(--f-display); font-weight: 500; color: var(--copper-d); }
.svc-spy__help b::after { content: "→"; transition: transform .45s var(--spring); }
.svc-spy__help:hover { color: var(--navy); }
.svc-spy__help:hover b::after { transform: translateX(5px); }

/* ---------- One service = one bubbly "drawing sheet" ---------- */
.svc-stack { display: grid; gap: clamp(22px, 3vw, 36px); min-width: 0; }
.svc-detail {
  position: relative; isolation: isolate; overflow: hidden; scroll-margin-top: 112px;
  display: grid; align-content: start; column-gap: clamp(24px, 3.2vw, 46px);
  grid-template-columns: minmax(0, 1.08fr) minmax(0, .92fr);
  /* media sits beside the intro text only, so the photo frame stays close to square
     (a frame spanning text + list was ~1:1.9 and cropped landscape photos hard) */
  grid-template-areas: "head head" "text media" "incl incl" "flow flow" "foot foot";
  padding: clamp(26px, 4vw, 54px); border-radius: var(--r-xl);
  background: var(--paper); box-shadow: var(--shadow), var(--inset);
  transition: box-shadow .5s;
}
.svc-stack > .svc-detail:nth-child(even) {
  grid-template-columns: minmax(0, .92fr) minmax(0, 1.08fr);
  grid-template-areas: "head head" "media text" "incl incl" "flow flow" "foot foot";
}
/* faint blueprint grid fading out of the sheet's top corner */
.svc-detail::before {
  content: ""; position: absolute; inset: 0; z-index: -1; pointer-events: none;
  background-image: linear-gradient(rgba(27,42,58,.055) 1px, transparent 1px), linear-gradient(90deg, rgba(27,42,58,.055) 1px, transparent 1px);
  background-size: 28px 28px;
  -webkit-mask-image: radial-gradient(ellipse at 100% 0%, #000 0, transparent 46%); mask-image: radial-gradient(ellipse at 100% 0%, #000 0, transparent 46%);
  transition: background-position 1.2s var(--ease);
}
.svc-stack > .svc-detail:nth-child(even)::before { -webkit-mask-image: radial-gradient(ellipse at 0% 0%, #000 0, transparent 46%); mask-image: radial-gradient(ellipse at 0% 0%, #000 0, transparent 46%); }
.svc-detail:hover { box-shadow: 0 50px 90px -40px rgba(27,42,58,.45), var(--inset); }
.svc-detail:hover::before { background-position: 14px 14px; }

.svc-detail__head {
  grid-area: head; display: flex; align-items: flex-end; gap: clamp(14px, 2.4vw, 30px);
  padding-bottom: clamp(20px, 2.6vw, 30px); margin-bottom: clamp(22px, 3vw, 34px);
  border-bottom: 1px dashed rgba(27,42,58,.16);
}
.svc-detail__head .section-tag { margin-bottom: 10px; }
.svc-detail__head .h2 { font-size: clamp(32px, 4.2vw, 56px); margin: 0; }

/* the big outlined number fills with copper once it scrolls into view */
.svc-num {
  position: relative; display: inline-block; flex-shrink: 0;
  font-family: var(--f-display); font-weight: 600; font-size: clamp(84px, 10vw, 148px);
  line-height: .78; letter-spacing: -.04em;
  color: transparent; -webkit-text-stroke: 1.5px rgba(194,133,63,.5);
  user-select: none;
}
.svc-num::after {
  content: attr(data-num); position: absolute; left: 0; top: 0;
  -webkit-text-stroke: 0; color: transparent;
  background: linear-gradient(120deg, var(--copper-2), var(--copper) 50%, var(--copper-d));
  -webkit-background-clip: text; background-clip: text;
  clip-path: inset(100% 0 0 0); transition: clip-path 1.6s var(--ease) .45s;
}
.svc-num.is-in::after { clip-path: inset(0 0 0 0); }

.svc-detail__text { grid-area: text; }
.svc-detail__text p { margin: 0 0 14px; font-size: 16.5px; color: var(--muted); }
.svc-detail__text p:first-child { font-size: clamp(18px, 1.5vw, 20px); line-height: 1.5; color: var(--navy-2); }

.svc-sub {
  display: flex; align-items: center; gap: 12px; margin: 0 0 16px;
  font-family: var(--f-display); font-weight: 500; font-size: 19px; letter-spacing: -.005em;
  color: var(--navy);
}
.svc-sub::before { content: ""; flex-shrink: 0; width: 9px; height: 9px; border-radius: 3px; background: linear-gradient(135deg, var(--copper-2), var(--copper)); transform: rotate(45deg); }

.svc-incl { grid-area: incl; margin-top: clamp(24px, 3vw, 36px); }
.svc-included { list-style: none; margin: 0; padding: 0; display: grid; grid-template-columns: repeat(auto-fill, minmax(min(100%, 230px), 1fr)); gap: 10px 18px; }
.svc-included li { position: relative; padding-left: 34px; font-size: 15.5px; line-height: 1.45; color: var(--navy-2); transition: transform .45s var(--spring); }
.svc-included li::before { content: ""; position: absolute; left: 0; top: 0; width: 22px; height: 22px; border-radius: 50%; background: rgba(194,133,63,.14); box-shadow: inset 0 0 0 1.5px rgba(194,133,63,.45); transition: background .35s, transform .5s var(--spring); }
.svc-included li::after { content: ""; position: absolute; left: 8px; top: 5px; width: 6px; height: 10px; border: solid var(--copper-d); border-width: 0 2px 2px 0; transform: rotate(45deg); transition: border-color .3s; }
.svc-included li:hover { transform: translateX(4px); }
.svc-included li:hover::before { background: var(--copper); transform: scale(1.14) rotate(-10deg); }
.svc-included li:hover::after { border-color: #fff; }

/* ---------- Media: placeholder/photo with a "blueprint scan" overlay ---------- */
.svc-media {
  grid-area: media; position: relative; margin: 0; min-height: 320px; align-self: stretch;
  border-radius: var(--r-lg); overflow: hidden; isolation: isolate;
  background: var(--cream-2); box-shadow: var(--shadow-sm), inset 0 0 0 1px rgba(27,42,58,.06);
}
.svc-media .ph { position: absolute; inset: 0; transition: transform 1.2s var(--ease); }
.svc-media:hover .ph { transform: scale(1.06); }
.svc-media__grid {
  position: absolute; inset: 0; pointer-events: none; opacity: 0; transition: opacity .6s;
  background-image: linear-gradient(rgba(194,133,63,.3) 1px, transparent 1px), linear-gradient(90deg, rgba(194,133,63,.3) 1px, transparent 1px);
  background-size: 36px 36px;
  -webkit-mask-image: radial-gradient(ellipse at center, transparent 25%, #000 85%); mask-image: radial-gradient(ellipse at center, transparent 25%, #000 85%);
}
.svc-media:hover .svc-media__grid { opacity: 1; }
.svc-media__scan {
  position: absolute; inset: 0; pointer-events: none; opacity: 0; transform: translateY(-101%);
  background: linear-gradient(180deg, transparent 70%, rgba(226,176,119,.26) 96%, var(--copper-2) 99.3%, #fff 100%);
}
.svc-media.is-in .svc-media__scan { animation: svcScan 1.9s .55s var(--ease) both; }
.svc-media.is-in:hover .svc-media__scan { animation: svcScan 1.9s .55s var(--ease) both, svcScanLoop 2.6s var(--ease) infinite; }
@keyframes svcScan { 0% { transform: translateY(-101%); opacity: 1; } 82% { transform: translateY(0); opacity: 1; } 100% { transform: translateY(0); opacity: 0; } }
@keyframes svcScanLoop { 0% { transform: translateY(-101%); opacity: 1; } 62% { transform: translateY(0); opacity: 1; } 75%, 100% { transform: translateY(0); opacity: 0; } }

.svc-media__marks i { position: absolute; width: 24px; height: 24px; border: 0 solid var(--copper); opacity: 0; transition: transform .7s var(--spring), opacity .4s; }
.svc-media__marks i:nth-child(1) { top: 16px; left: 16px; border-width: 2px 0 0 2px; border-radius: 8px 0 0 0; transform: translate(16px, 16px); }
.svc-media__marks i:nth-child(2) { top: 16px; right: 16px; border-width: 2px 2px 0 0; border-radius: 0 8px 0 0; transform: translate(-16px, 16px); }
.svc-media__marks i:nth-child(3) { bottom: 16px; right: 16px; border-width: 0 2px 2px 0; border-radius: 0 0 8px 0; transform: translate(-16px, -16px); }
.svc-media__marks i:nth-child(4) { bottom: 16px; left: 16px; border-width: 0 0 2px 2px; border-radius: 0 0 0 8px; transform: translate(16px, -16px); }
.svc-media.is-in .svc-media__marks i { opacity: 1; transform: none; transition-delay: .8s; }
.svc-media.is-in:hover .svc-media__marks i { transition-delay: 0s; }
.svc-media.is-in:hover .svc-media__marks i:nth-child(1) { transform: translate(-6px, -6px); }
.svc-media.is-in:hover .svc-media__marks i:nth-child(2) { transform: translate(6px, -6px); }
.svc-media.is-in:hover .svc-media__marks i:nth-child(3) { transform: translate(6px, 6px); }
.svc-media.is-in:hover .svc-media__marks i:nth-child(4) { transform: translate(-6px, 6px); }

.svc-media__dim { position: absolute; top: 24px; left: 56px; right: 56px; height: 14px; display: flex; align-items: center; justify-content: center; pointer-events: none; }
.svc-media__dim::before { content: ""; position: absolute; left: 0; right: 0; top: 50%; height: 1.5px; margin-top: -.75px; background: var(--copper); transform: scaleX(0); transition: transform .9s var(--ease); }
.svc-media__dim::after { content: ""; position: absolute; inset: 0; border-inline: 1.5px solid var(--copper); opacity: 0; transition: opacity .3s; }
.svc-media__dim span { position: relative; padding: 3px 9px; border-radius: 6px; background: var(--paper); color: var(--copper-d); font-size: 10px; white-space: nowrap; opacity: 0; transform: translateY(5px); transition: opacity .4s, transform .5s var(--spring); }
.svc-media:hover .svc-media__dim::before { transform: scaleX(1); }
.svc-media:hover .svc-media__dim::after { opacity: 1; transition-delay: .55s; }
.svc-media:hover .svc-media__dim span { opacity: 1; transform: none; transition-delay: .4s; }

.svc-media__tag {
  position: absolute; left: 50%; bottom: 20px; transform: translateX(-50%);
  max-width: calc(100% - 88px); overflow: hidden; text-overflow: ellipsis; /* clears the 40px corner marks on each side */
  padding: 7px 13px; border-radius: 999px; white-space: nowrap;
  background: rgba(27,42,58,.84); color: var(--cream); font-size: 13px; font-weight: 600;
  backdrop-filter: blur(8px); -webkit-backdrop-filter: blur(8px);
  transition: background .4s;
}
.svc-media:hover .svc-media__tag { background: var(--copper-d); }

.svc-orbit { position: absolute; top: 54px; right: 24px; width: 78px; height: 78px; border-radius: 50%; display: grid; place-items: center; background: rgba(27,42,58,.86); color: var(--cream); box-shadow: var(--shadow-sm); backdrop-filter: blur(8px); -webkit-backdrop-filter: blur(8px); transition: transform .7s var(--spring); }
.svc-orbit svg { position: absolute; inset: 0; width: 100%; height: 100%; animation: svcSpin 14s linear infinite; }
.svc-orbit circle { fill: none; stroke: var(--copper-2); stroke-width: 2.2; stroke-dasharray: 3 7; stroke-linecap: round; }
.svc-orbit b { font-family: var(--f-display); font-weight: 600; font-size: 19px; letter-spacing: -.01em; }
.svc-media:hover .svc-orbit { transform: scale(1.12) rotate(-10deg); }
@keyframes svcSpin { to { transform: rotate(360deg); } }

/* ---------- "How it works" mini-flow: connectors draw in on reveal ---------- */
.svc-flow { grid-area: flow; margin-top: clamp(28px, 3.4vw, 42px); padding: clamp(20px, 2.6vw, 30px); border-radius: var(--r-lg); background: var(--cream); box-shadow: inset 0 2px 8px rgba(27,42,58,.05); }
.svc-steps { --gap: 20px; list-style: none; margin: 0; padding: 0; display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: var(--gap); }
.svc-steps li { position: relative; }
.svc-step__dot {
  position: relative; z-index: 1; width: 48px; height: 48px; border-radius: 50%; display: grid; place-items: center;
  font-size: 12px; color: var(--navy); background: var(--paper); box-shadow: var(--shadow-sm), inset 0 0 0 2px var(--cream-3);
  transition: background .5s, color .5s, box-shadow .5s;
}
.svc-steps b { display: block; margin: 14px 0 4px; font-family: var(--f-display); font-weight: 500; font-size: 18px; line-height: 1.2; color: var(--navy); }
.svc-steps p { margin: 0; font-size: 14.5px; line-height: 1.5; color: var(--muted); }
.svc-steps li:not(:last-child)::before,
.svc-steps li:not(:last-child)::after { content: ""; position: absolute; top: 23px; left: 58px; right: calc(var(--gap) * -1 + 8px); height: 2px; border-radius: 2px; }
.svc-steps li:not(:last-child)::before { background: repeating-linear-gradient(90deg, rgba(27,42,58,.2) 0 6px, transparent 6px 12px); }
.svc-steps li:not(:last-child)::after { background: linear-gradient(90deg, var(--copper-2), var(--copper)); transform: scaleX(0); transform-origin: left; transition: transform .8s var(--ease); }
.svc-flow.is-in .svc-steps li::after { transform: none; }
.svc-flow.is-in .svc-steps li:nth-child(1)::after { transition-delay: .55s; }
.svc-flow.is-in .svc-steps li:nth-child(2)::after { transition-delay: 1.15s; }
.svc-flow.is-in .svc-step__dot { background: linear-gradient(135deg, var(--copper-2), var(--copper) 55%, var(--copper-d)); color: #fff; box-shadow: var(--shadow-copper); }
.svc-flow.is-in li:nth-child(1) .svc-step__dot { transition-delay: .3s; }
.svc-flow.is-in li:nth-child(2) .svc-step__dot { transition-delay: .95s; }
.svc-flow.is-in li:nth-child(3) .svc-step__dot { transition-delay: 1.55s; }
.svc-flow:hover .svc-step__dot { animation: svcPop .8s var(--spring) both; }
.svc-flow:hover li:nth-child(2) .svc-step__dot { animation-delay: .14s; }
.svc-flow:hover li:nth-child(3) .svc-step__dot { animation-delay: .28s; }
@keyframes svcPop { 45% { transform: scale(1.2) rotate(-10deg); } }

/* ---------- Footer row: ideal-for chips + actions ---------- */
.svc-detail__foot {
  grid-area: foot; display: flex; flex-wrap: wrap; align-items: flex-end; justify-content: space-between; gap: 24px 32px;
  margin-top: clamp(26px, 3vw, 36px); padding-top: clamp(22px, 2.6vw, 30px); border-top: 1px dashed rgba(27,42,58,.16);
}
.svc-ideal { flex: 1 1 320px; min-width: 0; }
.svc-ideal .svc-sub { margin-bottom: 12px; }
.svc-chips { list-style: none; margin: 0; padding: 0; display: flex; flex-wrap: wrap; gap: 8px; }
.svc-chips li {
  padding: 9px 16px; border-radius: 999px; font-size: 14px; font-weight: 500; line-height: 1.2; color: var(--navy-2);
  background: var(--cream); box-shadow: inset 0 0 0 1px rgba(27,42,58,.08);
  transition: transform .5s var(--spring), background .3s, color .3s, box-shadow .3s;
}
.svc-chips li:hover { transform: translateY(-4px) rotate(-2deg); background: var(--navy); color: var(--cream); box-shadow: 0 12px 20px -12px rgba(27,42,58,.6); }
.svc-detail__actions { display: flex; flex-wrap: wrap; gap: 10px; }

/* ---------- Feature sheet (3D visualisation) in navy ---------- */
.svc-detail--feature { background: var(--navy); color: var(--cream); box-shadow: 0 50px 90px -40px rgba(27,42,58,.7), inset 0 1px 0 rgba(255,255,255,.08); }
.svc-detail--feature:hover { box-shadow: 0 60px 100px -40px rgba(27,42,58,.8), inset 0 1px 0 rgba(255,255,255,.08); }
.svc-detail--feature::before { background-image: linear-gradient(rgba(158,195,230,.12) 1px, transparent 1px), linear-gradient(90deg, rgba(158,195,230,.12) 1px, transparent 1px); }
.svc-detail--feature .svc-detail__head,
.svc-detail--feature .svc-detail__foot { border-color: rgba(250,246,238,.16); }
.svc-detail--feature .svc-num { -webkit-text-stroke-color: rgba(226,176,119,.55); }
.svc-detail--feature .svc-detail__text p { color: rgba(250,246,238,.7); }
.svc-detail--feature .svc-detail__text p:first-child { color: var(--cream); }
.svc-detail--feature .svc-sub { color: var(--copper-2); }
.svc-detail--feature .svc-sub::after { background: linear-gradient(90deg, rgba(226,176,119,.45), transparent); }
.svc-detail--feature .svc-included li { color: var(--cream); }
.svc-detail--feature .svc-included li::before { background: rgba(226,176,119,.14); box-shadow: inset 0 0 0 1.5px rgba(226,176,119,.5); }
.svc-detail--feature .svc-included li::after { border-color: var(--copper-2); }
.svc-detail--feature .svc-included li:hover::after { border-color: #fff; }
.svc-detail--feature .svc-media { background: var(--navy-2); box-shadow: 0 20px 40px -20px #000, inset 0 0 0 1px rgba(255,255,255,.08); }
.svc-detail--feature .svc-flow { background: rgba(255,255,255,.05); box-shadow: inset 0 0 0 1px rgba(255,255,255,.08); }
.svc-detail--feature .svc-step__dot { background: var(--navy-2); color: var(--cream); box-shadow: inset 0 0 0 2px rgba(250,246,238,.16); }
.svc-detail--feature .svc-steps b { color: var(--cream); }
.svc-detail--feature .svc-steps p { color: rgba(250,246,238,.62); }
.svc-detail--feature .svc-steps li:not(:last-child)::before { background: repeating-linear-gradient(90deg, rgba(250,246,238,.22) 0 6px, transparent 6px 12px); }
.svc-detail--feature .svc-chips li { background: rgba(255,255,255,.07); color: var(--cream); box-shadow: inset 0 0 0 1px rgba(255,255,255,.1); }
.svc-detail--feature .svc-chips li:hover { background: linear-gradient(135deg, var(--copper-2), var(--copper)); color: #fff; }

/* ---------- Responsive ---------- */
@media (max-width: 1120px) {
  .svc-layout { grid-template-columns: 206px minmax(0, 1fr); }
  .svc-spy__list a { font-size: 15px; gap: 10px; }
  .svc-stack > .svc-detail,
  .svc-stack > .svc-detail:nth-child(even) { grid-template-columns: minmax(0, 1fr); grid-template-areas: "head" "media" "text" "incl" "flow" "foot"; }
  .svc-media { min-height: 0; aspect-ratio: 16 / 10; margin-bottom: clamp(22px, 3vw, 30px); }
  .svc-incl { margin-top: 12px; }
}

@media (max-width: 980px) {
  /* six links: two columns while the aside spans the full width */
  .svc-hero .svc-index { grid-template-columns: 1fr 1fr; column-gap: 28px; }
  .svc-hero .svc-index li:nth-last-child(2) a { border-bottom: 0; padding-bottom: 0; }

  .svc-layout { grid-template-columns: minmax(0, 1fr); gap: 20px; }
  /* side nav becomes a sticky pill bar under the main nav. Inactive items collapse to their number
     bubble and only the active one opens to show its label, so all six fit in one row from ~340px up
     and the active pill can never sit off-screen (no JS needed to scroll it into view).
     Labels stay in the DOM (max-width, not display:none), so link names remain accessible. */
  .svc-spy {
    justify-self: start; max-width: 100%; /* hug the bubbles: a floating pill rather than a sparse full-width strip */
    top: 88px; z-index: 40; padding: 6px; border-radius: 999px;
    background: rgba(250, 246, 238, .88); box-shadow: 0 14px 30px -18px rgba(27,42,58,.45), inset 0 0 0 1px rgba(255,255,255,.8);
  }
  body:has(.nav.is-hidden) .svc-spy { top: 12px; }
  .svc-spy__head, .svc-spy__bar, .svc-spy__help { display: none; }
  .svc-spy__list {
    display: flex; gap: 2px;
    overflow-x: auto; overscroll-behavior-x: contain; scrollbar-width: none; border-radius: 999px;
  }
  .svc-spy__list::-webkit-scrollbar { display: none; }
  .svc-spy__list li { flex-shrink: 0; }
  .svc-spy__list li::before, .svc-spy__list li::after { display: none; }
  .svc-spy__list a {
    padding: 2px; gap: 0; font-size: 14px;
    transition: background .35s, color .35s, box-shadow .35s, padding .55s var(--spring), gap .55s var(--spring);
  }
  .svc-spy__list a:focus-visible { outline-offset: -3px; } /* the scrolling list would clip an outside ring */
  .svc-spy__n { width: 30px; height: 30px; font-size: 10px; }
  .svc-spy__t { max-width: 0; opacity: 0; overflow: hidden; white-space: nowrap; transition: max-width .6s var(--spring), opacity .3s; }
  .svc-spy__list a.is-active { padding: 2px 14px 2px 2px; gap: 8px; background: var(--navy); color: var(--cream); box-shadow: 0 10px 20px -10px rgba(27,42,58,.7); }
  .svc-spy__list a.is-active .svc-spy__t { max-width: 120px; opacity: 1; transform: none; transition: max-width .6s var(--spring), opacity .4s .12s; }
  .svc-spy__list a.is-active .svc-spy__n { transform: none; }

  .svc-detail { scroll-margin-top: 160px; }
  .svc-media { aspect-ratio: 16 / 9; }
}

@media (max-width: 680px) {
  .svc-hero .svc-index { grid-template-columns: 1fr; }
  .svc-hero .svc-index li:nth-last-child(2) a { border-bottom: 1px dashed rgba(27,42,58,.14); padding-bottom: 10px; }
  .svc-hero .page-hero__actions .btn { flex: 1 1 100%; } /* same as the other inner-page heroes */

  .svc-spy { top: 80px; }
  .svc-detail { padding: 24px 18px 26px; border-radius: 34px; scroll-margin-top: 150px; }
  .svc-detail__head { flex-direction: column; align-items: flex-start; gap: 12px; }
  .svc-num { font-size: 78px; }
  .svc-detail__text p { font-size: 16px; }
  .svc-media { aspect-ratio: 4 / 3.3; border-radius: 24px; }
  .svc-media__dim { left: 48px; right: 48px; top: 20px; }
  .svc-media__tag { bottom: 16px; font-size: 12px; max-width: calc(100% - 80px); }
  .svc-orbit { top: 46px; right: 16px; width: 62px; height: 62px; }
  .svc-orbit b { font-size: 15px; }

  .svc-flow { padding: 20px 16px; border-radius: 24px; }
  .svc-steps { --gap: 18px; grid-template-columns: minmax(0, 1fr); }
  .svc-steps li { display: grid; grid-template-columns: 44px minmax(0, 1fr); column-gap: 14px; }
  .svc-step__dot { grid-row: 1 / span 2; width: 44px; height: 44px; }
  .svc-steps b { grid-column: 2; margin: 3px 0 2px; font-size: 17px; }
  .svc-steps p { grid-column: 2; }
  .svc-steps li:not(:last-child)::before,
  .svc-steps li:not(:last-child)::after { top: 50px; bottom: calc(var(--gap) * -1 + 4px); left: 21px; right: auto; width: 2px; height: auto; }
  .svc-steps li:not(:last-child)::before { background: repeating-linear-gradient(to bottom, rgba(27,42,58,.2) 0 6px, transparent 6px 12px); }
  .svc-detail--feature .svc-steps li:not(:last-child)::before { background: repeating-linear-gradient(to bottom, rgba(250,246,238,.22) 0 6px, transparent 6px 12px); }
  .svc-steps li:not(:last-child)::after { background: linear-gradient(var(--copper-2), var(--copper)); transform: scaleY(0); transform-origin: top; }

  .svc-detail__actions { width: 100%; }
  .svc-detail__actions .btn { flex: 1 1 100%; white-space: normal; text-align: center; line-height: 1.25; }
}

@media (max-width: 360px) {
  /* small phones: shrink the pill bar so all six bubbles plus the open label still fit in one row */
  .svc-spy__n { width: 26px; height: 26px; font-size: 9.5px; }
  .svc-spy__list a { font-size: 13px; }
  .svc-spy__list a.is-active { padding-right: 10px; gap: 6px; }
}

@media (hover: none) {
  /* touch screens: show the dimension line once the image has scrolled in */
  .svc-media.is-in .svc-media__dim::before { transform: scaleX(1); transition-delay: 1.1s; }
  .svc-media.is-in .svc-media__dim::after { opacity: 1; transition-delay: 1.6s; }
  .svc-media.is-in .svc-media__dim span { opacity: 1; transform: none; transition-delay: 1.5s; }
}

@media (prefers-reduced-motion: reduce) {
  .svc-media__scan { animation: none !important; opacity: 0; }
  .svc-orbit svg { animation: none !important; } /* keep the dashed 360° ring, just stop it spinning */
  .svc-num::after { clip-path: inset(0 0 0 0); }
}