/* css/components/svc-page.css — service pages (pillar + sub-service), 2026-10 redesign.
   Reuses components from home.css (proof logos, challenges selector, why list, delivery stepper,
   engagement models, FAQ, CTA band, ambient hero canvas). Flat, hairline layouts in the site palette;
   no box grids. */

.sv-muted { color: var(--color-text-muted); line-height: 1.7; }

/* ---------- Hero ---------- */
.sv-hero {
  position: relative; overflow: hidden; isolation: isolate; padding: clamp(2.5rem, 5vw, 4.5rem) 0 clamp(3rem, 5vw, 4.5rem);
  background:
    radial-gradient(50% 60% at 80% 40%, rgba(37, 99, 235, 0.18), transparent 70%),
    radial-gradient(35% 40% at 95% 90%, rgba(16, 185, 129, 0.10), transparent 70%),
    radial-gradient(60% 50% at 15% 0%, rgba(37, 99, 235, 0.10), transparent 70%),
    var(--color-bg-primary);
}
.sv-hero__inner { position: relative; z-index: 1; display: grid; grid-template-columns: minmax(0, 7fr) minmax(0, 4fr); gap: var(--space-12); align-items: center; }
.sv-crumbs ol { list-style: none; margin: 0 0 var(--space-6); padding: 0; display: flex; flex-wrap: wrap; gap: var(--space-2); font-size: 0.78rem; color: var(--color-text-muted); }
.sv-crumbs li + li::before { content: '/'; margin-right: var(--space-2); color: rgba(148, 163, 184, 0.5); }
.sv-crumbs a { color: var(--color-slate-200); text-decoration: none; }
.sv-crumbs a:hover { color: var(--color-sapphire-400); }
.sv-crumbs [aria-current] { color: var(--color-sapphire-400); }
.sv-hero .hero__eyebrow { color: var(--color-sapphire-400); text-transform: uppercase; letter-spacing: 0.08em; margin-bottom: var(--space-4); font-size: 0.82rem; }
.sv-hero__title { font-family: var(--font-display); font-weight: 800; font-size: clamp(2.2rem, 2.6vw + 1.1rem, 3.9rem); line-height: 1.06; letter-spacing: -0.03em; text-wrap: balance; max-width: 20ch; }
.sv-hero__lede { margin-top: var(--space-6); max-width: 40rem; color: var(--color-slate-200); font-size: clamp(1.02rem, 0.4vw + 0.95rem, 1.15rem); line-height: 1.75; }
.sv-hero__ctas { display: flex; flex-wrap: wrap; align-items: center; gap: var(--space-4) var(--space-6); margin-top: var(--space-8); }
.sv-updated { margin-top: var(--space-8); font-size: 0.75rem; color: var(--color-text-muted); }

.sv-glance {
  position: relative; padding: var(--space-8); border-radius: var(--radius-xl);
  background: linear-gradient(180deg, rgba(23, 28, 39, 0.82), rgba(10, 13, 20, 0.86));
  border: 1px solid rgba(59, 130, 246, 0.26); box-shadow: 0 30px 80px -40px rgba(37, 99, 235, 0.55);
  -webkit-backdrop-filter: blur(10px); backdrop-filter: blur(10px);
}
.sv-glance::before { content: ''; position: absolute; left: var(--space-8); right: var(--space-8); top: -1px; height: 2px; background: linear-gradient(90deg, var(--color-sapphire-400), var(--color-emerald-400)); }
.sv-glance__label { font-size: 0.72rem; letter-spacing: 0.1em; text-transform: uppercase; color: var(--color-emerald-400); }
.sv-glance__outcomes { list-style: none; margin: var(--space-4) 0 var(--space-6); padding: 0; display: grid; gap: var(--space-3); }
.sv-glance__outcomes li { display: flex; align-items: flex-start; gap: var(--space-3); font-family: var(--font-display); font-weight: 600; color: var(--color-slate-50); line-height: 1.4; }
.sv-glance__tick { flex: none; display: grid; place-items: center; width: 1.4rem; height: 1.4rem; margin-top: 0.05rem; border-radius: 50%; color: var(--color-emerald-400); background: rgba(16, 185, 129, 0.14); }
.sv-glance__tick svg { width: 0.85rem; height: 0.85rem; }
.sv-glance__facts { margin: 0; display: grid; }
.sv-glance__facts div { display: grid; grid-template-columns: 7.5rem minmax(0, 1fr); gap: var(--space-3); padding: var(--space-3) 0; border-top: 1px solid var(--color-border-subtle); font-size: 0.9rem; }
.sv-glance__facts dt { color: var(--color-text-muted); }
.sv-glance__facts dd { margin: 0; color: var(--color-slate-200); }
.sv-glance__facts a { color: var(--color-sapphire-400); text-decoration: none; }
@media (max-width: 1023px) { .sv-hero__inner { grid-template-columns: 1fr; gap: var(--space-10); } .sv-glance { max-width: 36rem; } }

/* ---------- Sticky on-page navigation ---------- */
.sv-localnav {
  position: sticky; top: var(--header-height); z-index: 40; border-block: 1px solid var(--color-border-subtle);
  background: rgba(10, 13, 20, 0.88); -webkit-backdrop-filter: blur(12px); backdrop-filter: blur(12px); transition: box-shadow 200ms ease;
}
.sv-localnav.is-stuck { box-shadow: 0 12px 30px -18px rgba(0, 0, 0, 0.8); }
.sv-localnav__inner { display: flex; align-items: center; gap: var(--space-6); min-height: 3.5rem; }
.sv-localnav__name { flex: none; margin: 0; font-family: var(--font-display); font-weight: 700; font-size: 0.95rem; color: var(--color-slate-50); max-width: 16rem; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.sv-localnav ul { list-style: none; margin: 0; padding: 0; display: flex; gap: var(--space-1); overflow-x: auto; scrollbar-width: none; flex: 1; min-width: 0; }
.sv-localnav ul::-webkit-scrollbar { display: none; }
.sv-localnav a {
  position: relative; display: block; padding: 1.05rem 0.85rem; white-space: nowrap; text-decoration: none; font-size: 0.9rem; font-weight: 500; color: var(--color-text-muted); transition: color 180ms ease;
}
.sv-localnav a::after { content: ''; position: absolute; left: 0.85rem; right: 0.85rem; bottom: -1px; height: 2px; background: linear-gradient(90deg, var(--color-sapphire-400), var(--color-emerald-400)); transform: scaleX(0); transform-origin: left; transition: transform 260ms ease; }
.sv-localnav a:hover { color: var(--color-slate-50); }
.sv-localnav a.is-active { color: var(--color-slate-50); }
.sv-localnav a.is-active::after { transform: scaleX(1); }
.sv-localnav a:focus-visible { outline: 2px solid var(--color-sapphire-400); outline-offset: -4px; border-radius: 4px; }
.sv-localnav__cta {
  flex: none; font: 600 0.85rem var(--font-display); color: var(--color-slate-50); cursor: pointer;
  padding: 0.55rem 1rem; border-radius: var(--radius-full); border: 1px solid rgba(59, 130, 246, 0.5); background: rgba(37, 99, 235, 0.16); transition: background 180ms ease;
}
.sv-localnav__cta:hover { background: rgba(37, 99, 235, 0.32); }
@media (max-width: 1100px) { .sv-localnav__name { display: none; } }
@media (max-width: 640px) { .sv-localnav__cta { display: none; } .sv-localnav__inner { min-height: 3rem; } .sv-localnav a { padding: 0.85rem 0.7rem; } }
.sv section[id], .sv [id="services"], .sv [id="capabilities"] { scroll-margin-top: calc(var(--header-height) + 3.75rem); }

.sv-logos { margin: 0; padding-top: var(--space-8); }

/* ---------- Overview with research figure ---------- */
.sv-overview__inner { display: grid; gap: var(--space-10); }
@media (min-width: 960px) { .sv-overview__inner { grid-template-columns: minmax(0, 5fr) minmax(0, 7fr); gap: var(--space-16); align-items: start; } .sv-overview__head { position: sticky; top: calc(var(--header-height) + 5rem); } }
.sv-overview__head .text-h2 { text-wrap: balance; }
.sv-overview__body p { color: var(--color-slate-200); line-height: 1.85; font-size: 1.04rem; max-width: 64ch; }
.sv-overview__body p + p { margin-top: var(--space-5, 1.25rem); }
.sv-overview__lead { font-size: clamp(1.15rem, 0.6vw + 1rem, 1.35rem) !important; line-height: 1.6 !important; color: var(--color-slate-50) !important; font-family: var(--font-display); font-weight: 600; letter-spacing: -0.01em; }
.sv-stat { margin: var(--space-8) 0 0; padding: var(--space-6) 0 0 var(--space-6); border-left: 2px solid var(--color-emerald-400); border-top: 1px solid var(--color-border-subtle); }
.sv-stat__value {
  margin: 0; font-family: var(--font-display); font-weight: 800; letter-spacing: -0.03em; line-height: 1; font-size: clamp(2.5rem, 3vw + 1rem, 3.75rem);
  background: linear-gradient(120deg, var(--color-emerald-400), var(--color-sapphire-400)); -webkit-background-clip: text; background-clip: text; color: transparent;
}
.sv-stat figcaption { display: flex; flex-direction: column; gap: var(--space-2); margin-top: var(--space-3); }
.sv-stat__label { font-family: var(--font-display); font-weight: 700; color: var(--color-slate-50); }
.sv-stat__context { color: var(--color-text-muted); line-height: 1.6; font-size: 0.95rem; max-width: 40ch; }
.sv-stat__source { font-size: 0.72rem; color: var(--color-sapphire-400); letter-spacing: 0.04em; }

/* ---------- Services / capabilities accordion ---------- */
.sv-offer__inner { display: grid; gap: var(--space-10); }
@media (min-width: 960px) { .sv-offer__inner { grid-template-columns: minmax(0, 4fr) minmax(0, 8fr); gap: var(--space-16); align-items: start; } .sv-offer__head { position: sticky; top: calc(var(--header-height) + 5rem); } }
.sv-offer__head .text-h2 { text-wrap: balance; }
.sv-offer__head .sv-muted { margin-top: var(--space-4); }
.sv-acc__item { border-top: 1px solid var(--color-border-subtle); position: relative; }
.sv-acc__item:last-child { border-bottom: 1px solid var(--color-border-subtle); }
.sv-acc__item::before { content: ''; position: absolute; left: 0; top: 0; bottom: 0; width: 2px; background: linear-gradient(180deg, var(--color-sapphire-400), var(--color-emerald-400)); transform: scaleY(0); transform-origin: top; transition: transform 300ms ease; }
.sv-acc__item[open]::before, .sv-acc__item:hover::before { transform: scaleY(1); }
.sv-acc__item summary {
  list-style: none; cursor: pointer; display: flex; align-items: center; justify-content: space-between; gap: var(--space-6);
  padding: var(--space-6) var(--space-2) var(--space-6) var(--space-6);
}
.sv-acc__item summary::-webkit-details-marker { display: none; }
.sv-acc__title { font-family: var(--font-display); font-weight: 700; font-size: clamp(1.1rem, 0.8vw + 0.9rem, 1.35rem); letter-spacing: -0.01em; color: var(--color-slate-50); transition: color 200ms ease; }
.sv-acc__item summary:hover .sv-acc__title, .sv-acc__item[open] .sv-acc__title { color: var(--color-sapphire-400); }
.sv-acc__icon { position: relative; flex: none; width: 2rem; height: 2rem; border-radius: 50%; border: 1px solid rgba(59, 130, 246, 0.4); transition: background 200ms ease, transform 300ms ease; }
.sv-acc__icon::before, .sv-acc__icon::after { content: ''; position: absolute; left: 50%; top: 50%; width: 0.75rem; height: 2px; background: var(--color-sapphire-400); transform: translate(-50%, -50%); transition: transform 300ms ease; }
.sv-acc__icon::after { transform: translate(-50%, -50%) rotate(90deg); }
.sv-acc__item[open] .sv-acc__icon { background: rgba(37, 99, 235, 0.18); transform: rotate(180deg); }
.sv-acc__item[open] .sv-acc__icon::after { transform: translate(-50%, -50%) rotate(0deg); }
.sv-acc__item summary:focus-visible { outline: 2px solid var(--color-sapphire-400); outline-offset: -2px; }
.sv-acc__body { padding: 0 var(--space-12) var(--space-6) var(--space-6); }
.sv-acc__body p { color: var(--color-slate-200); line-height: 1.75; max-width: 62ch; }
.sv-acc__link { display: inline-flex; align-items: center; gap: var(--space-2); margin-top: var(--space-4); font-family: var(--font-display); font-weight: 600; color: var(--color-sapphire-400); text-decoration: none; border-bottom: 1px solid rgba(59, 130, 246, 0.4); padding-bottom: 2px; }
.sv-acc__link svg { width: 1rem; height: 1rem; transition: transform 200ms ease; }
.sv-acc__link:hover svg { transform: translateX(4px); }
@media (prefers-reduced-motion: no-preference) {
  .sv-acc__item[open] .sv-acc__body { animation: sv-acc-in 320ms ease both; }
  @keyframes sv-acc-in { from { opacity: 0; transform: translateY(-6px); } to { opacity: 1; transform: none; } }
}
@media (max-width: 640px) { .sv-acc__item summary { padding-left: var(--space-4); } .sv-acc__body { padding: 0 var(--space-4) var(--space-6); } }

/* ---------- Section head (title left, intro right) ---------- */
.sv-sechead { display: grid; gap: var(--space-4); margin-bottom: var(--space-10); }
@media (min-width: 900px) { .sv-sechead { grid-template-columns: minmax(0, 1fr) minmax(0, 1fr); align-items: end; gap: var(--space-16); } }
.sv-sechead .text-h2 { text-wrap: balance; }
.sv-sechead > p { max-width: 48ch; font-size: 1.04rem; }
.sv-sechead > .hero__link { justify-self: start; }
@media (min-width: 900px) { .sv-sechead > .hero__link { justify-self: end; } }

/* ---------- Tabs (industries, technology) ---------- */
.sv-tabs:not(.is-enhanced) .sv-tabs__list { display: none; }
.sv-tabs:not(.is-enhanced) .sv-tabs__panel + .sv-tabs__panel { margin-top: var(--space-8); padding-top: var(--space-8); border-top: 1px solid var(--color-border-subtle); }
.sv-tabs__list { display: flex; gap: var(--space-2); overflow-x: auto; scrollbar-width: none; border-bottom: 1px solid var(--color-border-subtle); margin-bottom: var(--space-8); }
.sv-tabs__list::-webkit-scrollbar { display: none; }
.sv-tabs__tab {
  position: relative; flex: none; padding: var(--space-4) var(--space-4); background: none; border: 0; cursor: pointer; white-space: nowrap;
  font: 600 1rem var(--font-display); color: var(--color-text-muted); transition: color 200ms ease;
}
.sv-tabs__tab::after { content: ''; position: absolute; left: var(--space-4); right: var(--space-4); bottom: -1px; height: 2px; background: linear-gradient(90deg, var(--color-sapphire-400), var(--color-emerald-400)); transform: scaleX(0); transform-origin: left; transition: transform 300ms ease; }
.sv-tabs__tab:hover { color: var(--color-slate-200); }
.sv-tabs__tab[aria-selected="true"] { color: var(--color-slate-50); }
.sv-tabs__tab[aria-selected="true"]::after { transform: scaleX(1); }
.sv-tabs__tab:focus-visible { outline: 2px solid var(--color-sapphire-400); outline-offset: -4px; border-radius: 4px; }
.sv-tabs__panel { outline: none; }
.sv-tabs__panel[hidden], .chal__panel[hidden] { display: none !important; }
@media (prefers-reduced-motion: no-preference) {
  .sv-tabs.is-enhanced .sv-tabs__panel:not([hidden]) { animation: sv-tab-in 380ms cubic-bezier(0.2, 0.8, 0.2, 1) both; }
  @keyframes sv-tab-in { from { opacity: 0; transform: translateY(10px); } to { opacity: 1; transform: none; } }
}
@media (max-width: 760px) {
  .sv-tabs.is-enhanced .sv-tabs__list { -webkit-mask-image: linear-gradient(90deg, #000 82%, transparent); mask-image: linear-gradient(90deg, #000 82%, transparent); padding-right: 3rem; }
}

.sv-ind__panel { display: grid; grid-template-columns: auto minmax(0, 1fr); gap: var(--space-8); align-items: start; }
.sv-ind__icon { display: grid; place-items: center; width: 4.5rem; height: 4.5rem; border-radius: 50%; color: var(--color-sapphire-400); background: radial-gradient(circle, rgba(37, 99, 235, 0.26), rgba(37, 99, 235, 0.06)); border: 1px solid rgba(59, 130, 246, 0.3); }
.sv-ind__icon svg { width: 2rem; height: 2rem; }
.sv-ind__title { font-family: var(--font-display); font-weight: 800; font-size: clamp(1.5rem, 1.5vw + 1rem, 2.1rem); letter-spacing: -0.02em; }
.sv-ind__use { margin-top: var(--space-3); font-size: 1.12rem; line-height: 1.7; color: var(--color-slate-200); max-width: 60ch; }
.sv-ind__list { margin-top: var(--space-6) !important; color: var(--color-text-muted) !important; font-size: 0.92rem !important; }
@media (max-width: 640px) { .sv-ind__panel { grid-template-columns: 1fr; gap: var(--space-4); } .sv-ind__icon { width: 3.5rem; height: 3.5rem; } }

.sv-tech__tabs.is-enhanced .sv-tech__group { position: absolute; width: 1px; height: 1px; overflow: hidden; clip: rect(0 0 0 0); }
.sv-tech__group { font-size: 0.78rem; letter-spacing: 0.08em; text-transform: uppercase; color: var(--color-text-muted); margin-bottom: var(--space-4); }
.sv-tech__chips { list-style: none; margin: 0; padding: 0; display: flex; flex-wrap: wrap; gap: var(--space-3); }
.sv-tech__chips li {
  font: 600 0.98rem var(--font-display); color: var(--color-slate-50); padding: 0.7rem 1.15rem; border-radius: var(--radius-full);
  border: 1px solid rgba(59, 130, 246, 0.3); background: linear-gradient(180deg, rgba(37, 99, 235, 0.10), rgba(37, 99, 235, 0.02));
  transition: border-color 200ms ease, transform 200ms ease, background 200ms ease;
}
.sv-tech__chips li:hover { border-color: var(--color-sapphire-400); transform: translateY(-2px); background: rgba(37, 99, 235, 0.18); }

/* ---------- Why SoftSapien: footer-style 3-column hairline grid ---------- */
.sv-why__grid { list-style: none; margin: 0; padding: 0; display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); border-top: 1px solid var(--color-border-subtle); }
.sv-why__item { position: relative; padding: var(--space-8) var(--space-6) var(--space-8) 0; border-bottom: 1px solid var(--color-border-subtle); }
.sv-why__item:not(:nth-child(3n + 1)) { padding-left: var(--space-6); border-left: 1px solid var(--color-border-subtle); }
.sv-why__item::before { content: ''; position: absolute; left: 0; right: 0; top: -1px; height: 2px; background: linear-gradient(90deg, var(--color-sapphire-400), var(--color-emerald-400)); transform: scaleX(0); transform-origin: left; transition: transform 360ms ease; }
.sv-why__item:hover::before { transform: scaleX(1); }
.sv-why__item h3 { font-family: var(--font-display); font-weight: 700; font-size: 1.1rem; transition: color 200ms ease; }
.sv-why__item:hover h3 { color: var(--color-sapphire-400); }
.sv-why__item p { margin-top: var(--space-2); color: var(--color-text-muted); line-height: 1.7; font-size: 0.96rem; }
@media (max-width: 960px) {
  .sv-why__grid { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .sv-why__item:not(:nth-child(3n + 1)) { padding-left: 0; border-left: 0; }
  .sv-why__item:nth-child(even) { padding-left: var(--space-6); border-left: 1px solid var(--color-border-subtle); }
}
@media (max-width: 600px) {
  .sv-why__grid { grid-template-columns: 1fr; }
  .sv-why__item:nth-child(even) { padding-left: 0; border-left: 0; }
  .sv-why__item { padding-right: 0; }
}

/* ---------- Related services ---------- */
.sv-related__list { list-style: none; margin: 0; padding: 0; display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); column-gap: var(--space-8); border-top: 1px solid var(--color-border-subtle); }
.sv-related__list a {
  display: flex; align-items: center; justify-content: space-between; gap: var(--space-4); padding: var(--space-5, 1.25rem) 0;
  border-bottom: 1px solid var(--color-border-subtle); text-decoration: none; color: var(--color-slate-200); font-family: var(--font-display); font-weight: 600;
  transition: color 180ms ease, padding 180ms ease;
}
.sv-related__list a svg { flex: none; width: 1rem; height: 1rem; color: var(--color-sapphire-400); transition: transform 200ms ease; }
.sv-related__list a:hover { color: var(--color-slate-50); padding-left: var(--space-2); }
.sv-related__list a:hover svg { transform: translate(2px, -2px); }
@media (max-width: 900px) { .sv-related__list { grid-template-columns: repeat(2, minmax(0, 1fr)); } }
@media (max-width: 560px) { .sv-related__list { grid-template-columns: 1fr; } }

.sv-cta__actions { display: flex; flex-wrap: wrap; align-items: center; gap: var(--space-4) var(--space-6); }

@media (pointer: coarse) {
  .sv-tabs__tab { min-height: 48px; }
  .sv-acc__link { min-height: 44px; }
}

/* ---------- Hero panel: industry insight + core capabilities ---------- */
.sv-focus { display: grid; gap: var(--space-6); }
.sv-focus__value {
  margin: var(--space-3) 0 0; font-family: var(--font-display); font-weight: 800; letter-spacing: -0.03em; line-height: 1;
  font-size: clamp(2.6rem, 2.4vw + 1.4rem, 3.5rem);
  background: linear-gradient(120deg, var(--color-slate-50) 10%, var(--color-sapphire-400) 60%, var(--color-emerald-400)); -webkit-background-clip: text; background-clip: text; color: transparent;
}
.sv-focus__label { margin-top: var(--space-2); font-family: var(--font-display); font-weight: 700; color: var(--color-slate-50); }
.sv-focus__context { margin-top: var(--space-2); color: var(--color-slate-200); font-size: 0.92rem; line-height: 1.6; }
.sv-focus__source { margin-top: var(--space-3); font-size: 0.7rem; letter-spacing: 0.04em; color: var(--color-text-muted); }
.sv-focus__caps { padding-top: var(--space-6); border-top: 1px solid var(--color-border-subtle); }
.sv-focus__caps ul { list-style: none; margin: var(--space-3) 0 0; padding: 0; }
.sv-focus__caps a {
  display: flex; align-items: center; justify-content: space-between; gap: var(--space-3); padding: 0.6rem 0;
  border-bottom: 1px solid var(--color-border-subtle); color: var(--color-slate-50); text-decoration: none; font-weight: 600; font-size: 0.95rem;
  transition: color 180ms ease, padding 180ms ease;
}
.sv-focus__caps a svg { flex: none; width: 1rem; height: 1rem; color: var(--color-sapphire-400); transition: transform 200ms ease; }
.sv-focus__caps a:hover { color: var(--color-sapphire-400); padding-left: var(--space-2); }
.sv-focus__caps a:hover svg { transform: translateX(3px); }
.sv-focus__caps .sv-focus__all { display: inline-block; border: 0; padding: 0; margin-top: var(--space-4); font-size: 0.88rem; font-weight: 600; color: var(--color-sapphire-400); text-decoration: none; }
.sv-focus__caps .sv-focus__all:hover { padding-left: 0; text-decoration: underline; text-underline-offset: 3px; }
.sv-acc__item:target, .sv-acc__item.is-flash { animation: sv-flash 1.2s ease; }
@keyframes sv-flash { 0% { background: rgba(37, 99, 235, 0.18); } 100% { background: transparent; } }