/* Services, rebuilt 18 Oct: a 3D ring hero, a stacking full-screen service reel, five suppliers merging into one team,
   a goal picker, then questions. Visuals: shared/services/svc-N (Higgsfield Nano Banana 2.1). */
body { background: var(--ink-0); }
.crumb { display: flex; flex-wrap: wrap; gap: 10px; margin-bottom: 26px; font: 400 var(--t-xs)/1.2 var(--f-mono); letter-spacing: .14em; text-transform: uppercase; color: var(--fg-3); }
.crumb a { color: var(--fg-2); text-decoration: none; }

/* ---------- hero: the ring ---------- */
.sv-hero { position: relative; min-height: 100svh; overflow: hidden; display: grid; align-items: end; background: radial-gradient(80% 70% at 70% 40%, oklch(0.2 0.07 358) 0%, var(--ink-0) 70%); }
.sv-gl { position: absolute; inset: 0; cursor: grab; }
.sv-gl.grab { cursor: grabbing; }
.sv-gl canvas { display: block; width: 100%; height: 100%; }
.sv-hero::after { content: ""; position: absolute; inset: 0; pointer-events: none; background: linear-gradient(90deg, var(--ink-0) 0%, transparent 46%), linear-gradient(0deg, var(--ink-0) 0%, transparent 34%); }
/* a .wrap inside a grid section shrinks to its content and centres; keep it full width so every panel lines up */
.sv-hero > .wrap, .sv-panel > .wrap { width: 100%; }
.sv-copy { position: relative; z-index: 2; padding-top: calc(var(--hd) + 40px); padding-bottom: clamp(36px, 7vh, 80px); pointer-events: none; }
.sv-copy > * { pointer-events: auto; }
.sv-h1 { font: 900 clamp(3.4rem, 9.5vw, 10.5rem)/.86 var(--f-display); letter-spacing: -0.05em; margin-left: -0.04em; max-width: 8ch; }
.sv-h1 .cs-h1, .sv-h1 { color: var(--fg); }
.sv-lead { margin-top: 22px; max-width: 34ch; font: 500 clamp(1.05rem, 1.5vw, 1.3rem)/1.5 var(--f-body); color: var(--fg-2); }
.sv-ctas { display: flex; flex-wrap: wrap; gap: 14px 22px; align-items: center; margin-top: 28px; }
.sv-now { position: absolute; z-index: 3; right: var(--pad); bottom: clamp(36px, 7vh, 80px); width: min(360px, 34vw); padding: 18px 20px; background: oklch(0.12 0.01 358 / .78); border: 1px solid var(--rule); backdrop-filter: blur(10px); text-decoration: none; color: var(--fg); transition: border-color .3s; }
.sv-now:hover { border-color: #FF0A7A; }
.sv-now small { display: block; font: 400 11px/1 var(--f-mono); letter-spacing: .14em; text-transform: uppercase; color: #FF0A7A; margin-bottom: 10px; }
.sv-now b { display: block; font: 800 1.5rem/1.05 var(--f-display); letter-spacing: -0.02em; }
.sv-now span { display: block; margin-top: 8px; font-size: .92rem; line-height: 1.45; color: var(--fg-2); }
.sv-now i { display: inline-block; margin-top: 12px; font: 400 11px/1 var(--f-mono); letter-spacing: .14em; text-transform: uppercase; font-style: normal; }
.sv-hint { position: absolute; z-index: 3; left: 50%; bottom: 18px; transform: translateX(-50%); font: 400 10px/1 var(--f-mono); letter-spacing: .16em; text-transform: uppercase; color: var(--fg-3); }
/* without WebGL: the ring becomes a swipeable strip */
.sv-strip { display: none; }
.no-ring .sv-gl, .no-ring .sv-now, .no-ring .sv-hint { display: none; }
.no-ring .sv-hero { min-height: 0; align-items: start; }
.no-ring .sv-hero::after { display: none; }
.no-ring .sv-strip { display: grid; grid-auto-flow: column; grid-auto-columns: min(78vw, 360px); gap: 12px; overflow-x: auto; scroll-snap-type: x mandatory; padding: 0 var(--pad) 40px; position: relative; z-index: 2; }
.sv-strip a { scroll-snap-align: start; position: relative; aspect-ratio: 16 / 10; display: grid; align-items: end; padding: 14px; text-decoration: none; color: #fff; background: #000 center / cover; }
.sv-strip a::before { content: ""; position: absolute; inset: 0; background: linear-gradient(transparent 40%, rgb(0 0 0 / .85)); }
.sv-strip b { position: relative; font: 800 1.2rem/1.1 var(--f-display); }
@media (max-width: 900px) { .sv-now { display: none; } }

/* ---------- the reel: full-screen panels that stack as you scroll ---------- */
.sv-reel { position: relative; }
.sv-panel { position: sticky; top: 0; height: 100svh; overflow: hidden; display: grid; align-items: end; color: #fff; border-top: 2px solid #FF0A7A; }
.sv-panel { transform-origin: 50% 0; will-change: transform; box-shadow: 0 -24px 60px rgb(0 0 0 / .55); }
.sv-dim { position: absolute; inset: 0; z-index: 3; background: #000; opacity: 0; pointer-events: none; }
.sv-bg { position: absolute; inset: -8% 0; background: #000 center / cover no-repeat; will-change: transform; }
.sv-panel::after { content: ""; position: absolute; inset: 0; background: linear-gradient(90deg, rgb(0 0 0 / .82) 0%, rgb(0 0 0 / .35) 55%, transparent 80%), linear-gradient(0deg, rgb(0 0 0 / .7), transparent 50%); }
.sv-in { position: relative; z-index: 2; padding-bottom: clamp(48px, 10vh, 110px); }
.sv-num { font: 400 var(--t-xs)/1 var(--f-mono); letter-spacing: .16em; color: #FF0A7A; }
.sv-name { margin-top: 18px; font: 900 clamp(2.8rem, 7.6vw, 8.4rem)/.88 var(--f-display); letter-spacing: -0.05em; max-width: 11ch; text-wrap: balance; }
.sv-prob { margin-top: 22px; max-width: 34ch; font: 500 clamp(1.05rem, 1.6vw, 1.4rem)/1.4 var(--f-body); color: rgb(255 255 255 / .72); }
.sv-promise { margin-top: 10px; max-width: 36ch; font: 700 clamp(1.1rem, 1.7vw, 1.5rem)/1.35 var(--f-display); }
.sv-chips { display: flex; flex-wrap: wrap; gap: 8px; margin-top: 24px; }
.sv-chips span { padding: 9px 13px; border: 1px solid rgb(255 255 255 / .35); background: rgb(0 0 0 / .3); backdrop-filter: blur(6px); font: 400 11px/1 var(--f-mono); letter-spacing: .1em; text-transform: uppercase; }
.sv-go { display: inline-flex; align-items: center; gap: 14px; margin-top: 30px; font: 800 var(--t-m)/1 var(--f-display); color: #fff; text-decoration: none; }
.sv-go i { width: 54px; height: 54px; border-radius: 50%; display: grid; place-items: center; background: #FF0A7A; font-style: normal; font-size: 20px; transition: transform .5s var(--ease); }
.sv-go:hover i { transform: translateX(8px) rotate(-45deg); }
.sv-own { display: inline-block; margin-left: 12px; padding: 6px 10px; background: #FF0A7A; font: 400 10px/1 var(--f-mono); letter-spacing: .14em; text-transform: uppercase; vertical-align: middle; }
/* panel content plays in when the panel arrives */
.mo .sv-panel .sv-in > * { opacity: 0; transform: translateY(50px); transition: opacity 1s var(--ease), transform 1.2s cubic-bezier(.16, 1, .3, 1); }
.mo .sv-panel.in .sv-in > * { opacity: 1; transform: none; }
.mo .sv-panel.in .sv-in > :nth-child(2) { transition-delay: .08s; } .mo .sv-panel.in .sv-in > :nth-child(3) { transition-delay: .16s; } .mo .sv-panel.in .sv-in > :nth-child(4) { transition-delay: .24s; } .mo .sv-panel.in .sv-in > :nth-child(5) { transition-delay: .32s; } .mo .sv-panel.in .sv-in > :nth-child(6) { transition-delay: .4s; }
/* the side index */
.sv-index { position: fixed; z-index: 40; right: 18px; top: 50%; transform: translateY(-50%); display: grid; gap: 6px; opacity: 0; pointer-events: none; transition: opacity .4s; }
.sv-index.on { opacity: 1; pointer-events: auto; }
.sv-index a { display: flex; align-items: center; justify-content: flex-end; gap: 10px; text-decoration: none; color: rgb(255 255 255 / .55); font: 400 10px/1 var(--f-mono); letter-spacing: .1em; text-transform: uppercase; }
.sv-index a span { opacity: 0; transform: translateX(6px); transition: opacity .3s, transform .3s; white-space: nowrap; }
.sv-index a:hover span, .sv-index a.on span { opacity: 1; transform: none; }
.sv-index a i { width: 8px; height: 8px; border: 1px solid currentColor; transition: background .3s, transform .3s; }
.sv-index a.on { color: #fff; } .sv-index a.on i { background: #FF0A7A; border-color: #FF0A7A; transform: scale(1.3); }
@media (max-width: 900px) { .sv-index { display: none; } }

/* ---------- one team: five discipline clusters resolve into the Ti. mark (WebGL particles) ---------- */
.sv-merge { position: relative; height: 340vh; background: var(--ink-0); }
.sv-merge-pin { position: sticky; top: 0; height: 100svh; overflow: hidden; display: flex; align-items: center; background: radial-gradient(60% 70% at 70% 50%, #2a0617 0%, transparent 70%), var(--ink-0); }
.sv-merge-pin::before { content: ''; position: absolute; inset: 0; pointer-events: none; background: radial-gradient(34% 42% at var(--gx, 69%) 50%, rgb(255 10 122 / .26), transparent 70%); opacity: var(--tg, 0); }
@media (max-width: 899px) { .sv-merge-pin { --gx: 50%; } }
.sv-merge-gl, .sv-merge-gl canvas { position: absolute; inset: 0; width: 100%; height: 100%; display: block; }
.sv-merge-gl { cursor: crosshair; }
.sv-merge-copy { position: relative; z-index: 2; width: 100%; pointer-events: none; }
.sv-merge-copy > * { max-width: 30rem; pointer-events: auto; }
.sv-merge-copy .cs-h2 { max-width: 13ch; }
.sv-merge-copy .cs-body { margin-top: 18px; }
.sv-steps { list-style: none; margin: 34px 0 0; padding: 0; display: grid; gap: 4px; counter-reset: s; }
.sv-steps li { display: grid; grid-template-columns: 44px 1fr; gap: 12px; padding: 14px 0 14px 16px; border-left: 2px solid rgb(255 255 255 / .12); opacity: .38; transition: opacity .5s, border-color .5s; }
.sv-steps li.on { opacity: 1; border-color: #FF0A7A; }
.sv-steps b { font: 400 11px/1.6 var(--f-mono); letter-spacing: .14em; color: #FF0A7A; }
.sv-steps span { font-size: .92rem; line-height: 1.5; color: var(--fg-2); }
.sv-steps strong { display: block; font: 700 1.05rem/1.2 var(--f-display); color: var(--fg); margin-bottom: 4px; }
.sv-merge-tags { position: absolute; inset: 0; z-index: 1; pointer-events: none; }
.sv-merge-tags span { position: absolute; left: 0; top: 0; padding: 7px 12px; border: 1px solid rgb(255 255 255 / .28); border-radius: 999px; background: rgb(13 13 13 / .7); backdrop-filter: blur(6px); font: 400 10px/1 var(--f-mono); letter-spacing: .14em; text-transform: uppercase; color: #fff; white-space: nowrap; transform: translate(-50%, -50%); will-change: transform, opacity; }
.no-team .sv-merge { height: auto; }
.no-team .sv-merge-pin { position: relative; height: auto; padding: calc(var(--hd) + 40px) 0 80px; }
.no-team .sv-steps li { opacity: 1; }
.no-team .sv-merge-tags { display: none; }
@media (max-width: 899px) {
  .sv-merge-pin { align-items: flex-start; padding-top: calc(var(--hd) + 20px); }
  .sv-merge-copy .cs-body { display: none; }
  .sv-steps { margin-top: 18px; }
  .sv-steps li { display: none; padding: 10px 0 10px 14px; }
  .sv-steps li.on { display: grid; }
  .sv-merge-gl { top: 30%; height: 70%; }
}

/* ---------- goals ---------- */
.sv-goals { padding-block: clamp(96px, 14vh, 160px); }
.sv-gtabs { display: grid; gap: 10px; margin-top: 40px; }
@media (min-width: 900px) { .sv-gtabs { grid-template-columns: repeat(3, minmax(0, 1fr)); } }
.sv-gtabs button { all: unset; cursor: pointer; padding: 22px 22px 24px; border: 1px solid var(--rule); background: var(--ink-1); transition: border-color .3s, background .3s, transform .4s var(--ease); }
.sv-gtabs button b { display: block; font: 800 var(--t-l)/1.1 var(--f-display); letter-spacing: -0.02em; }
.sv-gtabs button span { display: block; margin-top: 10px; color: var(--fg-2); line-height: 1.5; }
.sv-gtabs button[aria-pressed="true"] { border-color: #FF0A7A; background: oklch(0.2 0.06 358); transform: translateY(-4px); }
.sv-gtabs button:focus-visible { outline: 2px solid #FF0A7A; outline-offset: 3px; }
.sv-plan { display: grid; gap: 12px; margin-top: 24px; }
@media (min-width: 900px) { .sv-plan { grid-template-columns: repeat(3, minmax(0, 1fr)) auto; align-items: stretch; } }
.sv-plan a.card { position: relative; min-height: 220px; display: grid; align-items: end; padding: 16px; text-decoration: none; color: #fff; background: #000 center / cover; overflow: hidden; animation: sv-in .7s cubic-bezier(.16, 1, .3, 1) both; }
.sv-plan a.card::before { content: ""; position: absolute; inset: 0; background: linear-gradient(transparent 30%, rgb(0 0 0 / .85)); }
.sv-plan a.card b { position: relative; font: 800 1.25rem/1.1 var(--f-display); }
.sv-plan a.card small { position: relative; display: block; margin-bottom: 6px; font: 400 10px/1 var(--f-mono); letter-spacing: .14em; text-transform: uppercase; color: #FF0A7A; }
@keyframes sv-in { from { opacity: 0; transform: translateY(24px) scale(.96); } }
.sv-plan .wa { display: grid; place-items: center; padding: 20px 26px; background: #FF0A7A; color: #fff; text-decoration: none; font: 800 1.05rem/1.2 var(--f-display); text-align: center; }

/* ---------- questions ---------- */
.sv-faq { padding-block: clamp(80px, 12vh, 140px); border-top: 1px solid var(--rule-soft); }
.sv-faq .faq { margin-top: 32px; }
.sv-faq details { border-top: 1px solid var(--rule-soft); padding: 18px 0; }
.sv-faq summary { cursor: pointer; font: 700 var(--t-m)/1.3 var(--f-display); list-style: none; display: flex; justify-content: space-between; gap: 16px; }
.sv-faq summary::after { content: "+"; color: #FF0A7A; font-size: 1.4em; line-height: 1; transition: transform .3s; }
.sv-faq details[open] summary::after { transform: rotate(45deg); }
.sv-faq details p { margin-top: 12px; max-width: 70ch; color: var(--fg-2); line-height: 1.65; }
.sv-next { padding-block: 48px; border-top: 1px solid var(--rule-soft); }
.sv-next a { font: 800 var(--t-l)/1 var(--f-display); text-decoration: none; }
.sv-next a::after { content: "\00a0→"; color: #FF0A7A; }
.close-alt { display: flex; flex-wrap: wrap; gap: 0 32px; }
@media (prefers-reduced-motion: reduce) { .sv-plan a.card { animation: none; }  }

/* 23 Oct fix (Ramy: "I see 3-4 cards and then they disappear"): every card is its own layer in a fixed order, so a
   card underneath can never paint over the one in front; and the copy is never hidden, it only slides into place. */
.sv-panel { isolation: isolate; }
.mo .sv-panel .sv-in > * { opacity: 1; transform: translateY(28px); }
.mo .sv-panel.in .sv-in > * { transform: none; }
.sv-num { display: none; }   /* no numbering (house rule) */

/* 24 Oct (Ramy: "very dark"): lift the hero and the service banners; the copy keeps its contrast with a soft shadow */
.sv-hero { background: radial-gradient(85% 75% at 68% 40%, oklch(0.32 0.11 358) 0%, oklch(0.2 0.04 358) 45%, var(--ink-0) 85%); }
.sv-hero::after { background: linear-gradient(90deg, oklch(0.135 0.006 358 / .7) 0%, transparent 40%), linear-gradient(0deg, oklch(0.135 0.006 358 / .6) 0%, transparent 26%); }
.sv-bg { filter: brightness(1.22) saturate(1.06); }
.sv-panel::after { background: linear-gradient(90deg, rgb(0 0 0 / .55) 0%, rgb(0 0 0 / .18) 48%, transparent 72%), linear-gradient(0deg, rgb(0 0 0 / .45), transparent 42%); }
.sv-panel .sv-name, .sv-panel .sv-prob, .sv-panel .sv-promise, .sv-hero .sv-h1, .sv-hero .sv-lead { text-shadow: 0 2px 18px rgb(0 0 0 / .55); }
.sv-gl[data-constellation] { cursor: crosshair; }
@media (max-width: 899px) { .sv-gl[data-constellation] { opacity: .38; } }   /* phones: the drawing sits behind the headline */

/* ── Hero: the transforming sculpture (svc-morph.js), 24 Oct ── */
.sv-morph .sv-gl { cursor: pointer; }
.sv-morph .sv-now { bottom: calc(clamp(36px, 7vh, 80px) + 64px); text-align: left; }
.sv-morph .sv-now > * { transition: opacity .45s cubic-bezier(.16,1,.3,1), transform .6s cubic-bezier(.16,1,.3,1), filter .45s; }
.sv-morph .sv-now.swap > * { opacity: 0; transform: translateY(8px); filter: blur(6px); }
.sv-morph .sv-copy { padding-bottom: calc(clamp(36px, 7vh, 80px) + 64px); }
.sv-morph .sv-hint { bottom: auto; top: calc(var(--hd) + 28px); left: auto; right: var(--pad); transform: none; }
/* the photo strip becomes a text rail of all eighteen along the bottom of the hero */
html:not(.no-ring) .sv-morph .sv-strip { display: flex; gap: 4px; position: absolute; z-index: 4; left: 0; right: 0; bottom: 0; margin: 0; padding: 14px var(--pad) 18px; list-style: none; overflow-x: auto; scrollbar-width: none;
  background: linear-gradient(transparent, oklch(0.135 0.006 358 / .9) 45%); mask-image: linear-gradient(90deg, transparent, #000 3vw, #000 calc(100% - 3vw), transparent); }
html:not(.no-ring) .sv-morph .sv-strip::-webkit-scrollbar { display: none; }
html:not(.no-ring) .sv-morph .sv-strip a { aspect-ratio: auto; display: block; padding: 11px 14px; background: none !important; white-space: nowrap; color: var(--fg-3); border: 1px solid transparent; transition: color .3s, border-color .3s; }
html:not(.no-ring) .sv-morph .sv-strip a::before { display: none; }
html:not(.no-ring) .sv-morph .sv-strip a::after { content: ""; position: absolute; left: 14px; right: 14px; bottom: 4px; height: 2px; background: #E6007E; transform: scaleX(0); transform-origin: left; }
html:not(.no-ring) .sv-morph .sv-strip a.on { color: #fff; }
html:not(.no-ring) .sv-morph .sv-strip a.on::after { transform: scaleX(var(--p, 0)); }
html:not(.no-ring) .sv-morph .sv-strip a:hover, html:not(.no-ring) .sv-morph .sv-strip a:focus-visible { color: var(--fg); border-color: var(--rule); outline: none; }
html:not(.no-ring) .sv-morph .sv-strip b { font: 500 13px/1 var(--f-body); }
@media (max-width: 899px) {
  .sv-morph { align-items: start; }
  .sv-morph .sv-copy { padding-top: calc(64px + 46svh); }
  .sv-morph .sv-hint { display: none; }
  .sv-morph .sv-now { display: block; left: var(--pad); right: var(--pad); width: auto; top: calc(64px + 38svh); bottom: auto; padding: 0; background: none; border: 0; backdrop-filter: none; text-align: center; }
  .sv-morph .sv-now span, .sv-morph .sv-now i { display: none; }
  .sv-morph .sv-now b { font-size: 1.35rem; }
  .sv-gl[data-morph] { opacity: 1; }
}
@media (min-width: 900px) {
  .sv-morph .sv-h1 { font-size: clamp(3.4rem, 7.2vw, 8rem); }
  .sv-morph .sv-lead { max-width: 44ch; }
  .sv-morph { height: 100svh; min-height: 640px; }
}

/* ── Hero: the data constellation (svc-const.js), 25 Oct. Same layout as the home hero (a.css / plates.css). ── */
.sv-const .hero-h { font-size: calc(var(--t-hero) * .76); }
@media (max-width: 767px) { .sv-const .hero-h { font-size: 12vw; } }