/* =====================================================================
   CHAVANS — SERVICES · INTERNAL PAGES
   Loads AFTER applied-ai.css + solution-detail.css (canvas --u = 100vw/1600,
   nav, type roles, stories, "what changes" list, insights, CTA, footer).
   Source of truth: "1. Advisory & Consulting COPY" PDF / PPTX (13 slides).
   Only blocks that are new to the service template live here.
===================================================================== */

/* ---------- 01 hero ---------- */
.svd-tag{ font-size: calc(var(--u) * 13.8); line-height: calc(var(--u) * 20); color: var(--ink-85); letter-spacing: 0.02em; }
.svd-hero-title{ line-height: calc(var(--u) * 108.4); }           /* lnSpc 100% */
.svd-hero-sub{
  font-family: var(--mono);
  font-size: calc(var(--u) * 12.4);
  line-height: calc(var(--u) * 18.4);
  letter-spacing: 0.01em;
  color: var(--ink);
}
.svd-hero-elbow{ width: calc(var(--u) * 17); height: calc(var(--u) * 20); }

/* ---------- centred title + left-aligned copy blocks ---------- */
.svd-ttl{ line-height: calc(var(--u) * 63.2); }                    /* lnSpc 80% */
.s-svd-breaks{ background: var(--paper); color: var(--ink-75); }
.s-svd-breaks .t-body{ color: var(--ink-65); }
.s-svd-frame{ background: var(--paper); color: var(--ink-75); }
.s-svd-frame .t-body{ color: var(--ink-75); }

/* ---------- 04–05 what we take responsibility for (white, 2 slides) ---------- */
.s-svd-resp{ background: #fff; color: var(--ink); }
.svd-rule{ height: 1px; background: #000; transform: scaleY(.83); transform-origin: top; }
.svd-card{
  width: calc(var(--u) * 349.2); height: calc(var(--u) * 345.1);
  border-radius: calc(var(--u) * 19.8);
  overflow: hidden;
}
.svd-card img{
  width: 100%; height: 100%; object-fit: cover; display: block;
  transition: transform .7s cubic-bezier(.2,.7,.2,1);
}
.svd-item:hover .svd-card img{ transform: scale(1.035); }
/* v3: geometry drawn as inline SVG on a solid card (no image dependency) */
.svd-card{ background: var(--card, #171717); position: relative; }
.svd-geo{
  position: absolute; inset: 0;
  width: 100%; height: 100%; display: block;
  transition: transform .7s cubic-bezier(.2,.7,.2,1);
}
.svd-item:hover .svd-geo{ transform: scale(1.06); }
.svd-cap{
  font-family: Helvetica, "Helvetica Neue", Arial, sans-serif;
  font-size: calc(var(--u) * 20);       /* 12pt */
  line-height: calc(var(--u) * 24.2);
  color: var(--ink-65);
}
.svd-cap b{ font-weight: 700; color: var(--ink-85); }
.svd-cap--sm .svd-cap-body{
  display: block;
  font-size: calc(var(--u) * 18.33);    /* 11pt */
  line-height: calc(var(--u) * 21.9);
  margin-top: calc(var(--u) * 1);
}

/* v2: one screen, flowing grid. [01]–[04] in a row, [05] as a wide row
   underneath (card left, copy across 3 columns) so every caption is readable. */
.svd-resp-flow{
  height: auto;
  padding: calc(var(--u) * 74.8) calc(var(--u) * 63.9) calc(var(--u) * 110) calc(var(--u) * 50.1);
}
.svd-resp-title{ text-align: center; color: var(--ink); }
.svd-resp-flow .svd-rule{ margin-top: calc(var(--u) * 40); width: 100%; }
.svd-grid{
  margin-top: calc(var(--u) * 30.5);
  display: grid;
  grid-template-columns: repeat(4, 1fr);
  column-gap: calc(var(--u) * 36);
  row-gap: calc(var(--u) * 64);
}
.svd-resp-flow .svd-card{ width: 100%; height: auto; aspect-ratio: 349.2 / 236; }
.svd-item-h{
  margin-top: calc(var(--u) * 26);
  font-family: var(--sans); font-weight: 500;
  font-size: calc(var(--u) * 23.33);    /* 14pt */
  line-height: calc(var(--u) * 28);
  color: var(--ink-85);
  text-wrap: balance;
}
.svd-item-body{
  margin-top: calc(var(--u) * 14);
  font-family: var(--sans);
  font-size: calc(var(--u) * 18.33);    /* 11pt — same as body copy */
  line-height: calc(var(--u) * 25);
  color: var(--ink-65);
  text-wrap: pretty;
}
.svd-item:nth-child(5){
  grid-column: 1 / -1;
  display: grid;
  grid-template-columns: calc((100% - var(--u) * 108) / 4) 1fr;
  column-gap: calc(var(--u) * 36);
  align-items: center;
  padding-top: calc(var(--u) * 64);
  border-top: 1px solid var(--rule-l, #D9D9D9);
}
.svd-item:nth-child(5) .svd-card{ grid-row: 1 / span 2; }
.svd-item:nth-child(5) .svd-item-h{ margin-top: 0; align-self: end; }
.svd-item:nth-child(5) .svd-item-body{ align-self: start; max-width: calc(var(--u) * 960); }

/* ---------- 08 client stories: #BFBFBF band in this template ---------- */
.svd-stories{ background: var(--silver); }

/* ---------- 09 how this connects / how engagements start (dark, divided) ---------- */
.svd-col-title{
  font-family: var(--sans); font-weight: 500;
  font-size: calc(var(--u) * 53.33);    /* 32pt */
  line-height: calc(var(--u) * 65.2);
  color: #fff;
}
.s-svd-two .t-body{ color: var(--grey-75); }
.svd-divider{ width: 1px; height: calc(var(--u) * 375.1); background: #fff; }
.tl--u{ color: #22EFCC; }

/* ---------- 10 related insights (both lines right-anchored to the bracket) ---------- */
.svd-ins-title{ line-height: calc(var(--u) * 80); }
.svd-insight{ line-height: calc(var(--u) * 49); }

/* ---------- closing statement (white, teal) ---------- */
.s-svd-close{ background: #fff; }
.svd-close{
  font-family: var(--sans); font-weight: 500;
  font-size: calc(var(--u) * 66.67);    /* 40pt */
  line-height: calc(var(--u) * 80);
  letter-spacing: -0.003em;
  color: #2DD4A2;
}

/* CTA band is #0C0C0C on this template */
.svd-cta{ background: #0C0C0C; }

/* =====================================================================
   MOBILE (≤ 900px)
===================================================================== */
@media (max-width: 900px){
  .svd-tag{ font-size: 0.8125rem; line-height: 1.4; }
  .svd-tag br{ display: none; }
  .svd-hero-title{ line-height: 1.04; }
  .svd-hero-sub{ font-size: 0.8125rem; line-height: 1.5; }
  .svd-hero-elbow{ width: 18px; height: 22px; }
  .svd-ttl{ line-height: 1.1; }

  .s-svd-resp{ display: grid; gap: 12vw; }
  .s-svd-resp > .t-display{ margin-bottom: 0; }
  .svd-rule{ width: auto !important; margin: -6vw 0 0; }
  .svd-item{ display: grid; gap: 5vw; }
  .svd-card{ width: 100%; height: auto; aspect-ratio: 349.2 / 345.1; border-radius: 16px; }
  .svd-cap, .svd-cap--sm .svd-cap-body{ font-size: 1rem; line-height: 1.5; width: auto !important; }
  .svd-cap--sm .svd-cap-body{ margin-top: .4em; }

  .svd-resp-flow{ padding: 16vw var(--g); display: block; }
  .svd-resp-flow .svd-item{ display: block; }
  .svd-resp-flow .svd-rule{ margin-top: 6vw; }
  .svd-grid{ grid-template-columns: 1fr; row-gap: 12vw; margin-top: 8vw; }
  .svd-item:nth-child(5){ display: block; padding-top: 0; border-top: 0; }
  .svd-item-h{ font-size: 1.25rem; line-height: 1.25; margin-top: 5vw; }
  .svd-item:nth-child(5) .svd-item-h{ margin-top: 5vw; }
  .svd-item-body{ font-size: 1rem; line-height: 1.5; margin-top: 3vw; }

  .s-svd-two{ display: grid; gap: 14vw; }
  .svd-divider{ display: none; }
  .svd-col-title{ font-size: 8.5vw; line-height: 1.12; }
  .s-svd-two .t-body{ margin-top: 5vw; }

  .svd-ins-col{ position: relative; margin-top: 10vw; padding: 4vw 6vw 4vw 0; display: grid; gap: 7vw; }
  .svd-insight{ line-height: 1.2; }

  .s-svd-close{ padding: 24vw var(--g); }
  .svd-close{ font-size: 8vw; line-height: 1.2; }
}