/* =====================================================================
   CHAVANS — SERVICES · INTERNAL PAGES (batch 2)
   Transformation Delivery · Managed Operations · DevOps & Automation · MirAI
   Loads AFTER applied-ai.css → solution-detail.css → service-detail.css.
   Same 1600-unit canvas (--u = 100vw / 1600). Prefix: .svx-
   Motion is progressive: nothing is hidden unless service-motion.js has
   added .svx-js to <html> (and never under prefers-reduced-motion).
===================================================================== */

/* ---------- 01 HERO (flowing stack, right-aligned to x 1521) ---------- */
.svx-hero{
  height: auto;
  min-height: calc(var(--u) * 692.4);
  padding: calc(var(--u) * 148.5) 0 calc(var(--u) * 72);
}
.svx-hero-stack{
  position: relative;
  margin-left: calc(var(--u) * 371.4);
  width: calc(var(--u) * 1150);
  display: flex; flex-direction: column; align-items: flex-end;
}
.svx-title{ white-space: nowrap; }
.svx-title--80{ font-size: calc(var(--u) * 80); line-height: calc(var(--u) * 96); }
.svx-ln{ display: block; overflow: hidden; padding-bottom: .06em; margin-bottom: -.06em; }
.svx-ln > span{ display: block; }
.svx-hero-subrow{
  position: relative;
  width: calc(var(--u) * var(--sw, 369.3));
  margin-top: calc(var(--u) * 50);
  padding-left: calc(var(--u) * 35.8);
}
.svx-hero-subrow .elbow{ position: absolute; left: 0; top: calc(var(--u) * -7.4); }
.svx-hero-subrow .svd-hero-sub{ white-space: normal; text-transform: uppercase; text-wrap: pretty; }
.svx-hero-sub--lg{ font-size: calc(var(--u) * 14.4) !important; line-height: calc(var(--u) * 21) !important; }

/* dark hero (DevOps) */
.svx-hero--dark{ background: var(--night); color: #fff; }
.svx-hero--dark .logo img{ filter: brightness(0) invert(1); }
.svx-hero--dark .pill{ background: rgba(255,255,255,.14); color: #fff; }
.svx-hero--dark .pill:hover{ background: rgba(255,255,255,.24); }
.svx-hero--dark .search{ color: #fff; }
.svx-hero--dark .hero-tag-plus, .svx-hero--dark .hero-tag{ color: #fff; }
.svx-hero--dark .hero-title{ color: #fff; }
.svx-hero--dark .elbow{ color: #fff; }
.svx-hero--dark .svd-hero-sub{ color: var(--grey-75); }
.svx-hero--dark .nav-toggle span{ background: #fff; }

/* ---------- flowing centred title + copy blocks ---------- */
.svx-flow{
  height: auto;
  min-height: calc(var(--u) * var(--h, 900));
  padding: calc(var(--u) * var(--pt, 244)) 0 calc(var(--u) * var(--pb, 140));
  display: flex; flex-direction: column; align-items: center; justify-content: center;
}
.svx-flow .svx-ttl{ text-align: center; line-height: calc(var(--u) * 63.2); }
.svx-copy{ width: calc(var(--u) * var(--cw, 560)); margin-top: calc(var(--u) * var(--mt, 41)); text-wrap: pretty; }
.svx-copy p + p, .svx-copy p + ul{ margin-top: calc(var(--u) * 22); }
.svx-lead{ color: #fff; }
.svx-copy .olist{ margin-top: calc(var(--u) * 12); gap: calc(var(--u) * 8); }
.svx-copy .olist li::before{ content: ""; top: calc(var(--u) * 10.5); width: calc(var(--u) * 10); height: 1px; background: currentColor; }

.s-svx-white{ background: #fff; color: var(--ink-75); }
.s-svx-white .t-body{ color: var(--ink-65); }
.s-svx-black{ background: #000; color: #fff; }
.s-svx-black .t-body{ color: var(--grey-65); }

/* ---------- 04 responsibility: [05] domain columns ---------- */
.svx-dom{
  display: grid; grid-template-columns: repeat(3, 1fr);
  column-gap: calc(var(--u) * 36);
  margin-top: calc(var(--u) * 22);
  align-self: start;
}
.svx-dom h4{
  font-family: var(--mono); font-weight: 400;
  font-size: calc(var(--u) * 12.4); line-height: calc(var(--u) * 16);
  letter-spacing: 0.04em; text-transform: uppercase;
  color: var(--ink-85);
  padding-bottom: calc(var(--u) * 12);
  border-bottom: 1px solid #D9D9D9;
}
.svx-dom ul{ margin-top: calc(var(--u) * 14); display: grid; gap: calc(var(--u) * 8); }
.svx-dom li{
  position: relative; padding-left: calc(var(--u) * 20);
  font-family: var(--sans);
  font-size: calc(var(--u) * 18.33); line-height: calc(var(--u) * 25);
  color: var(--ink-65); text-wrap: pretty;
}
.svx-dom li::before{ content: ""; position: absolute; left: 0; top: calc(var(--u) * 12.5); width: calc(var(--u) * 9); height: 1px; background: var(--ink-65); }
.svd-item:nth-child(5) .svx-dom{ grid-column: 2; }

/* geometry draws in when the card enters */
.svx-js .svd-item[data-rv] .svd-geo{ clip-path: inset(0 100% 0 0); transition: clip-path 1.4s cubic-bezier(.65,.05,.25,1) .25s, transform .7s cubic-bezier(.2,.7,.2,1); }
.svx-js .svd-item[data-rv].is-in .svd-geo{ clip-path: inset(0 0 0 0); }

/* ---------- closing signal (same treatment as .s-close) ---------- */
.svx-close{ background: #D9D9D9; }

/* ---------- related insights: lines right-anchored to the bracket ---------- */
.svx-ins{
  position: absolute;
  top: calc(var(--u) * 297);
  right: calc(var(--u) * (1600 - 1472.4));
  min-height: calc(var(--u) * 306.1);
  padding: calc(var(--u) * 14) calc(var(--u) * 29) calc(var(--u) * 14) 0;
  display: flex; flex-direction: column; justify-content: center; align-items: flex-end;
  gap: calc(var(--u) * 58);
}
.svx-ins .insight{ white-space: nowrap; line-height: calc(var(--u) * 49); }
.svx-ins .rbrk{ position: absolute; right: 0; top: 0; height: 100%; }

/* =====================================================================
   DEVOPS + MIRAI SECTIONS
===================================================================== */

/* "What changes with …" — centred column, cinematic image */
.svx-media{
  width: calc(var(--u) * var(--mw, 743));
  margin-top: calc(var(--u) * var(--mmt, 53));
  overflow: hidden;
  border-radius: calc(var(--u) * 4);
}
.svx-media img{ width: 100%; height: auto; display: block; }
.svx-js .svx-media[data-rv]{ opacity: 1; transform: none; clip-path: inset(9% 9% 9% 9%); transition: clip-path 1.3s cubic-bezier(.65,.05,.25,1); }
.svx-js .svx-media[data-rv] img{ transform: scale(1.14); transition: transform 1.8s cubic-bezier(.2,.7,.2,1); }
.svx-js .svx-media[data-rv].is-in{ clip-path: inset(0 0 0 0); }
.svx-js .svx-media[data-rv].is-in img{ transform: none; }
.svx-chg-ttl{ text-align: center; }
.svx-chg-copy{ text-align: left; }

/* ---------- capability columns: pinned horizontal track (#000) ---------- */
.svx-caps{ background: #000; color: #fff; overflow: visible; }
.svx-caps-stage{
  position: sticky;
  top: min(0px, calc(100vh - var(--u) * 900));
  height: calc(var(--u) * 900);
  overflow: hidden;
}
.svx-caps-track{
  position: absolute;
  left: calc(var(--u) * 828);
  top: calc(var(--u) * 234.9);
  display: flex;
  will-change: transform;
}
.svx-cap{
  position: relative; flex: none;
  width: calc(var(--u) * 385);
  height: calc(var(--u) * 478.7);
  transition: opacity .5s ease;
}
.svx-cap .brk{
  position: absolute; left: 0; top: 0;
  width: calc(var(--u) * 9.1); height: 100%;
  border: 1.67px solid var(--grey-65); border-right: 0;
  border-radius: 2px 0 0 2px;
}
.svx-cap-n{
  position: absolute; left: calc(var(--u) * 19.8); top: calc(var(--u) * 8.9);
  font-family: var(--mono); font-size: calc(var(--u) * 14.4); line-height: calc(var(--u) * 20);
  color: var(--grey-65);
}
.svx-cap-h{
  position: absolute; left: calc(var(--u) * 22.3); top: calc(var(--u) * 50.9);
  width: calc(var(--u) * 334);
  font-family: var(--sans); font-weight: 400;
  font-size: calc(var(--u) * 26.67); line-height: calc(var(--u) * 32);
  color: #fff; text-wrap: balance;
}
.svx-cap-b{
  position: absolute; left: calc(var(--u) * 22.3); bottom: calc(var(--u) * 6);
  width: calc(var(--u) * 343);
  font-family: var(--mono); font-weight: 300;
  font-size: calc(var(--u) * 13.4); line-height: calc(var(--u) * 19.5);
  letter-spacing: 0.01em; text-transform: uppercase;
  color: var(--grey-65); text-wrap: pretty;
}
.svx-caps-prog{
  position: absolute; left: calc(var(--u) * 828); right: calc(var(--u) * 80);
  top: calc(var(--u) * 790); height: 1px; background: #262626;
  transition: left .2s linear;
}
.svx-caps-prog i{ position: absolute; inset: 0; background: #fff; transform-origin: left; transform: scaleX(var(--p, 0)); }
.svx-caps-count{
  position: absolute; right: calc(var(--u) * 80); top: calc(var(--u) * 808);
  font-family: var(--mono); font-size: calc(var(--u) * 12.4); color: var(--grey-50);
  letter-spacing: 0.04em;
}
.svx-caps-count b{ font-weight: 400; color: #fff; }

/* ---------- MirAI platform demo (#FFF) ---------- */
.svx-demo{ background: #fff; color: var(--ink-75); }
.svx-demo .tagrow{ color: var(--ink-85); }
.svx-demo-ttl{ color: var(--ink-75); }
.svx-monitor{
  left: 50%; top: calc(var(--u) * 268);
  width: calc(var(--u) * 855); height: auto;
  margin-left: calc(var(--u) * -427.5);
  transform-origin: 50% 0;
  transform: scale(var(--s, 1));
}

/* ---------- FAQ (#F2F2F2) ---------- */
.svx-faq{
  background: var(--paper); color: var(--ink-85);
  height: auto; min-height: calc(var(--u) * 900);
  padding: calc(var(--u) * 93) calc(var(--u) * 84) calc(var(--u) * 150) calc(var(--u) * 69);
  display: grid; grid-template-columns: calc(var(--u) * 666) 1fr;
  align-items: start;
}
.svx-faq .tagrow .tag{ color: var(--ink-85); }
.svx-faq-ttl{ color: var(--ink-85); line-height: calc(var(--u) * 72); }
.svx-faq-list{ margin-top: calc(var(--u) * 46); }
.faq-row{ border-bottom: 1.67px solid var(--grey-75); transition: border-color .3s; }
.faq-row:hover, .faq-row.is-open{ border-color: var(--ink-75); }
.faq-q{
  width: 100%;
  display: flex; align-items: center; justify-content: space-between; gap: calc(var(--u) * 24);
  padding: calc(var(--u) * 22) 0 calc(var(--u) * 16);
  text-align: left;
  font-family: var(--sans); font-weight: 500;
  font-size: calc(var(--u) * 18.33); line-height: calc(var(--u) * 24);
  color: var(--ink-85);
}
.faq-ic{
  position: relative; flex: none;
  width: calc(var(--u) * 28.3); height: calc(var(--u) * 28.3);
  border-radius: 50%; background: #D9D9D9;
  transition: transform .45s cubic-bezier(.2,.7,.2,1), background .3s;
}
.faq-ic::before, .faq-ic::after{ content: ""; position: absolute; left: 50%; top: 50%; background: var(--ink-85); }
.faq-ic::before{ width: calc(var(--u) * 12); height: 1.4px; transform: translate(-50%, -50%); }
.faq-ic::after{ width: 1.4px; height: calc(var(--u) * 12); transform: translate(-50%, -50%); }
.faq-row:hover .faq-ic{ background: #CCCCCC; }
.faq-row.is-open .faq-ic{ transform: rotate(45deg); background: var(--ink-85); }
.faq-row.is-open .faq-ic::before, .faq-row.is-open .faq-ic::after{ background: #fff; }
.faq-a{ display: grid; grid-template-rows: 0fr; transition: grid-template-rows .45s cubic-bezier(.2,.7,.2,1); }
.faq-a > div{ overflow: hidden; }
.faq-a p{
  font-family: var(--sans);
  font-size: calc(var(--u) * 18.33); line-height: calc(var(--u) * 25);
  color: var(--ink-65);
  padding: 0 calc(var(--u) * 90) calc(var(--u) * 24) 0;
  text-wrap: pretty;
}
.faq-row.is-open .faq-a{ grid-template-rows: 1fr; }

/* inline section tag (+ LABEL) used inside flowing layouts */
.svx-tag{ display: flex; align-items: center; gap: calc(var(--u) * 20); color: var(--ink-85); }
.svx-tag .plus{ position: relative; flex: none; }
.svx-tag--c{ justify-content: center; }
.svx-faq-ttl{ margin-top: calc(var(--u) * 46); }

/* closing signal */
.svx-closing .close p{ max-width: calc(var(--u) * 1100); }

/* two-column dark band with flowing copy (DevOps / MirAI) */
.svx-two .svx-col-body{ width: calc(var(--u) * var(--bw, 554)); text-wrap: pretty; }

/* =====================================================================
   SCROLL REVEAL (enabled by service-motion.js)
===================================================================== */
.svx-js [data-rv]{
  opacity: 0;
  transform: translate3d(0, calc(var(--u) * 28), 0);
  transition: opacity .9s cubic-bezier(.2,.7,.2,1), transform 1.1s cubic-bezier(.2,.7,.2,1);
  transition-delay: calc(var(--d, 0) * 1ms);
}
.svx-js [data-rv].is-in{ opacity: 1; transform: none; }
.svx-js .abs[data-rv]{ transform: translate3d(0, calc(var(--u) * 28), 0); }
.svx-js .abs[data-rv].is-in{ transform: none; }

/* hero lines rise out of their mask on load */
.svx-js .svx-ln > span{ transform: translate3d(0, 105%, 0); transition: transform 1.1s cubic-bezier(.2,.7,.2,1); transition-delay: calc(var(--d, 0) * 1ms); }
.svx-js .is-loaded .svx-ln > span{ transform: none; }

/* =====================================================================
   MOBILE (≤ 900px)
===================================================================== */
@media (max-width: 900px){
  .svx-hero{ padding: 6vw var(--g) 14vw; }
  .svx-hero-stack{ margin: 0; width: auto; align-items: flex-start; }
  .svx-title, .svx-title--80{ white-space: normal; font-size: 10.5vw; line-height: 1.06; text-align: left; margin-top: 6vw; }
  .svx-hero-subrow{ width: auto; margin-top: 10vw; padding-left: 30px; }
  .svx-hero-subrow .elbow{ top: 0; }
  .svx-hero-sub--lg{ font-size: 0.8125rem !important; line-height: 1.5 !important; }

  .svx-flow{ min-height: 0; padding: 16vw var(--g); align-items: stretch; }
  .svx-flow .svx-ttl{ line-height: 1.1; }
  .svx-copy{ width: auto; margin-top: 6vw; }

  .svx-dom{ grid-template-columns: 1fr; row-gap: 7vw; margin-top: 5vw; }
  .svx-dom li{ font-size: 1rem; line-height: 1.5; padding-left: 18px; }
  .svx-dom li::before{ width: 9px; top: .75em; }
  .svx-dom h4{ font-size: 0.75rem; }

  .svx-ins{ position: relative; right: auto; top: auto; min-height: 0; margin-top: 10vw; padding: 4vw 6vw 4vw 0; align-items: stretch; gap: 7vw; }
  .svx-ins .insight{ white-space: normal; line-height: 1.2; }
  .svx-ins .rbrk{ width: 10px; }

  .svx-media{ width: calc(100% + var(--g) * 2); margin: 10vw calc(var(--g) * -1) 0; border-radius: 0; }

  .svx-caps{ height: auto !important; padding: 12vw var(--g); }
  .svx-caps-stage{ position: relative; top: auto; height: auto; overflow: visible; }
  .svx-caps-track{ position: relative; left: auto; top: auto; display: grid; gap: 10vw; transform: none !important; }
  .svx-cap{ width: auto; height: auto; padding: 1vw 0 2vw 7vw; opacity: 1 !important; }
  .svx-cap .brk{ width: 10px; }
  .svx-cap-n, .svx-cap-h, .svx-cap-b{ position: relative; left: auto; top: auto; bottom: auto; width: auto; }
  .svx-cap-n{ font-size: 0.8125rem; }
  .svx-cap-h{ font-size: 6vw; line-height: 1.2; margin-top: 3vw; }
  .svx-cap-b{ font-size: 0.75rem; line-height: 1.6; margin-top: 6vw; }
  .svx-caps-prog, .svx-caps-count{ display: none; }

  .svx-demo{ text-align: center; }
  .svx-demo .tagrow{ display: flex; justify-content: center; align-items: center; gap: 10px; }
  .svx-demo-ttl{ margin-top: 4vw; }
  .svx-monitor{ left: auto; margin: 10vw 0 0; width: 100%; transform: none; }

  .svx-faq{ display: block; padding: 16vw var(--g); min-height: 0; }
  .svx-faq .tagrow{ display: flex; align-items: center; gap: 10px; }
  .svx-faq-ttl{ margin-top: 6vw; line-height: 1.1; }
  .svx-faq-list{ margin-top: 8vw; }
  .faq-q{ font-size: 1rem; line-height: 1.4; padding: 18px 0 14px; gap: 16px; }
  .faq-ic{ width: 26px; height: 26px; }
  .faq-ic::before{ width: 11px; } .faq-ic::after{ height: 11px; }
  .faq-a p{ font-size: 1rem; line-height: 1.5; padding-right: 8px; }

  .svx-two .svx-col-body{ width: auto; }
  .svx-tag{ gap: 10px; }
  .svx-faq-ttl{ margin-top: 6vw; }
}

@media (prefers-reduced-motion: reduce){
  .svx-cap, .faq-a, .faq-ic, .svx-monitor{ transition: none; }
}