/* =====================================================================
   CHAVANS — SOLUTION DETAIL PAGES (Solutions › [01]–[08])
   Loads AFTER applied-ai.css and reuses its canvas (--u = 100vw/1600),
   type roles, nav, stories, insights, CTA and footer.
   Source of truth: "1. AI Adoption to Production COPY" PDF / PPTX.
   Only the blocks that are new to the solution template live here.
===================================================================== */

/* hero: tag is 10pt mono, title is 40pt (not 54pt like AI-for-Enterprise) */
.sd-tag{ font-size: calc(var(--u) * 13.8); line-height: calc(var(--u) * 21); }
.sd-hero-title{
  font-family: var(--sans); font-weight: 500;
  font-size: calc(var(--u) * 66.67);
  line-height: calc(var(--u) * 80);
  letter-spacing: -0.003em;
  color: var(--ink);
  text-align: right;
}
.sd-hero-sub{
  font-family: var(--mono);
  font-size: calc(var(--u) * 12.4);
  line-height: calc(var(--u) * 18.3);
  letter-spacing: 0.01em;
  color: var(--ink-65);
}
.sd-hero-elbow{ width: calc(var(--u) * 17); height: calc(var(--u) * 20); }

/* "When this solution applies" geometry */
.sd-mark{ height: auto; }

/* "What typically breaks today" — tx1 65% band */
.s-breaks{ background: #595959; color: #fff; }
.s-breaks .t-body{ color: var(--grey-75); }

/* responsibilities: 5 pinned items (reuses .s-pillars / .pl-* from applied-ai.css) */
.sd-pl-body{ color: var(--ink-65); }

/* =====================================================================
   WHAT CHANGES WHEN THIS IS DONE WELL  (#171717)
===================================================================== */
.chg-title{
  font-family: var(--sans); font-weight: 500;
  font-size: calc(var(--u) * 73.33);    /* 44pt */
  line-height: calc(var(--u) * 88);
  letter-spacing: -0.004em;
  color: #fff;
  text-align: right;
}
/* rows flow from the first divider (y 419.6 in the PDF), 81u apart */
.chg-list{ left: calc(var(--u) * 809.1); top: calc(var(--u) * 338.6); width: calc(var(--u) * 660.2); }
.chg-row{ display: block; border-bottom: 1px solid #595959; transition: border-color .3s; }
.chg-head{
  width: 100%;
  display: flex; align-items: center; justify-content: space-between;
  padding: calc(var(--u) * 32) 0 calc(var(--u) * 24);
  text-align: left;
  cursor: default;
}
button.chg-head{ cursor: pointer; }
.chg-desc{
  display: grid; grid-template-rows: 0fr;
  transition: grid-template-rows .45s cubic-bezier(.2,.7,.2,1);
}
.chg-desc > p{
  overflow: hidden;
  font-family: var(--sans);
  font-size: calc(var(--u) * 18.33);
  line-height: calc(var(--u) * 22);
  color: var(--grey-65);
  padding-left: calc(var(--u) * 2);
  padding-right: calc(var(--u) * 90);
}
.chg-desc > p::after{ content: ""; display: block; height: calc(var(--u) * 22); }
.chg-row.is-open .chg-desc{ grid-template-rows: 1fr; }
.chg-row.is-open .chg-plus{ transform: rotate(45deg); color: #fff; }
.chg-head span:first-child{
  font-family: Helvetica, "Helvetica Neue", Arial, sans-serif;
  font-size: calc(var(--u) * 20);       /* 12pt */
  line-height: calc(var(--u) * 24);
  color: #fff;
  padding-left: calc(var(--u) * 2);
  white-space: nowrap;
}
.chg-plus{
  position: relative;
  width: calc(var(--u) * 19.1); height: calc(var(--u) * 19.1);
  margin-right: calc(var(--u) * 35.5);
  color: var(--grey-65);
  transition: transform .45s cubic-bezier(.2,.7,.2,1), color .3s;
}
.chg-plus::before, .chg-plus::after{ content: ""; position: absolute; background: currentColor; }
.chg-plus::before{ left: 0; right: 0; top: 50%; height: 1px; }
.chg-plus::after{ top: 0; bottom: 0; left: 50%; width: 1px; }
.chg-row:hover{ border-color: var(--grey-65); }
.chg-row:not(.is-open) button.chg-head:hover .chg-plus{ transform: rotate(90deg); color: #fff; }
.chg-row:not(:has(button)):hover .chg-plus{ transform: rotate(90deg); color: #fff; }

/* =====================================================================
   FLOWING VARIANTS (pages built from Word copy — no fixed line breaks)
   Same positions/type as the AI Adoption to Production PDF; copy wraps
   inside the PDF text-box widths and stacks so nothing can overlap.
===================================================================== */
.sd-hero{ height: auto; min-height: calc(var(--u) * 692.4); padding: calc(var(--u) * 186.7) 0 calc(var(--u) * 64); }
.sd-hero-stack{
  position: relative;
  margin-left: calc(var(--u) * 493.3);
  width: calc(var(--u) * 1010.5);
  display: flex; flex-direction: column; align-items: flex-end;
}
.sd-hero-stack .sd-hero-title{ text-wrap: balance; }
.sd-hero-subrow{ position: relative; width: calc(var(--u) * 358.8); margin-top: calc(var(--u) * 74); padding-left: calc(var(--u) * 32.6); }
.sd-hero-subrow .elbow{ position: absolute; left: 0; top: calc(var(--u) * -4.8); }
.sd-hero-subrow .sd-hero-sub{ text-transform: uppercase; }
.sd-tagw{ width: calc(var(--u) * 190); }

.sd-copy{ width: calc(var(--u) * var(--cw, 665)); text-wrap: pretty; }

.sd-pl-text{ left: calc(var(--u) * 820.3); top: calc(var(--u) * 419); width: calc(var(--u) * 660); }
.sd-pl-text .pl-head{ width: calc(var(--u) * 580); text-wrap: balance; }
.sd-pl-copy{ position: relative; margin-top: calc(var(--u) * 21.8); }
.sd-pl-copy .elbow{ position: absolute; left: calc(var(--u) * -30); top: calc(var(--u) * 0.8); }
.sd-pl-copy .t-body{ width: calc(var(--u) * 655); text-wrap: pretty; }
.sd-geo{ position: absolute; height: auto; right: calc(var(--u) * (1600 - 744)); top: calc(var(--u) * 487); transform: translateY(-50%); }
.sd-mark--c{ left: 50%; transform: translate(-50%, -50%); top: calc(var(--u) * 620); }

.eng-col--flow{ min-height: calc(var(--u) * 354); padding: calc(var(--u) * 23.7) 0 calc(var(--u) * 24) calc(var(--u) * 26.4); }
.eng-col--flow .eng-brk{ height: 100%; }
.eng-col--flow .eng-title, .eng-col--flow .eng-body{ position: relative; left: auto; top: auto; }
.eng-col--flow .eng-body{ width: calc(var(--u) * 490); margin-top: calc(var(--u) * 28.9); text-wrap: pretty; }

.sd-ins-col{
  left: calc(var(--u) * 730.6); top: calc(var(--u) * 297);
  width: calc(var(--u) * 742);
  min-height: calc(var(--u) * 306.1);
  padding: calc(var(--u) * 13.8) calc(var(--u) * 30) calc(var(--u) * 13.8) 0;
  display: flex; flex-direction: column; justify-content: center; gap: calc(var(--u) * 58);
}
.sd-ins-col .insight{ position: relative; left: auto; top: auto; text-wrap: pretty; }
.sd-ins-col .rbrk{ position: absolute; left: auto; right: 0; top: 0; height: 100%; }

/* =====================================================================
   REFERENCE ARCHITECTURES — slide 12 copy (Helvetica Neue, teal links)
===================================================================== */
.sd-ref-body{
  font-family: var(--sans);
  font-size: calc(var(--u) * 18.33);
  line-height: calc(var(--u) * 22);
  color: var(--grey-75);
}
.sd-ref-body + .sd-ref-body{ margin-top: calc(var(--u) * 22); }
.tl{
  color: #21EFCC;
  text-decoration: underline;
  text-decoration-thickness: 1px;
  text-underline-offset: 2px;
  transition: color .2s;
}
.tl:hover{ color: #ABE600; }

/* =====================================================================
   HOW ENGAGEMENTS START? + HOW THIS CONNECTS  (#BFBFBF, 2 bracketed cols)
===================================================================== */
.eng-col{ width: calc(var(--u) * 560); }
.eng-brk{
  position: absolute; left: 0; top: 0;
  width: calc(var(--u) * 7.2); height: calc(var(--u) * 354);
  border: 1.67px solid var(--grey-50); border-right: 0;
  border-radius: 2px 0 0 2px;
}
.eng-title{
  position: absolute;
  left: calc(var(--u) * 28.8); top: calc(var(--u) * 23.7);
  font-family: var(--sans); font-weight: 500;
  font-size: calc(var(--u) * 53.33);    /* 32pt */
  line-height: calc(var(--u) * 64);
  color: var(--ink-85);
}
.eng-body{
  position: absolute;
  left: calc(var(--u) * 28.8); top: calc(var(--u) * 180.6);
  color: var(--ink-65);
}
.eng-body a{
  font-style: italic;
  text-decoration: underline;
  text-decoration-thickness: 1px;
  text-underline-offset: 2px;
  transition: color .2s;
}
.eng-body a:hover{ color: var(--ink); }

/* related insights: both lines start on the same x in this template */
.sd-insight{ width: calc(var(--u) * 720); }

/* client stories: title-only cards (story title wraps to the PDF width) */
.sd-stories .story-title{ width: calc(var(--u) * var(--tw, 200)); }

/* =====================================================================
   MOBILE (≤ 900px)
===================================================================== */
@media (max-width: 900px){
  .sd-tag{ font-size: 0.8125rem; line-height: 1.4; }
  .sd-hero-title{ font-size: 9.5vw; line-height: 1.08; text-align: left; margin-top: 6vw; }
  .sd-hero-title br{ display: none; }
  .sd-hero-sub{ font-size: 0.8125rem; line-height: 1.5; }
  .sd-hero-elbow{ width: 18px; height: 22px; }
  .sd-mark{ width: 52vw !important; margin: 10vw auto; }

  .chg-title{ font-size: 9vw; line-height: 1.1; text-align: left; white-space: normal; }
  .chg-list{ position: relative; left: auto; top: auto; width: auto; margin-top: 10vw; display: grid; }
  .chg-head{ min-height: 60px; padding: 14px 0; gap: 16px; }
  .chg-desc > p{ font-size: 1rem; line-height: 1.5; padding-right: 32px; }
  .chg-desc > p::after{ height: 14px; }
  .sd-hero{ padding: 6vw var(--g) 14vw; }
  .sd-hero-stack{ margin: 0; width: auto; align-items: flex-start; }
  .sd-hero-subrow{ width: auto; margin-top: 10vw; padding-left: 30px; }
  .sd-hero-subrow .elbow{ top: 0; }
  .sd-tagw, .sd-copy, .sd-pl-text, .sd-pl-text .pl-head, .sd-pl-copy .t-body, .eng-col--flow .eng-body{ width: auto; }
  .sd-pl-copy{ padding-left: 30px; margin-top: 5vw; }
  .sd-pl-copy .elbow{ left: 0; }
  .sd-geo{ position: relative; right: auto; top: auto; transform: none; width: 46vw !important; margin-bottom: 8vw; }
  .sd-mark--c{ left: auto; transform: none; top: auto; }
  .eng-col--flow{ min-height: 0; padding: 2vw 0 2vw 6vw; }
  .sd-ins-col{ position: relative; left: auto; top: auto; width: auto; min-height: 0; margin-top: 10vw; padding: 4vw 6vw 4vw 0; gap: 7vw; }
  .sd-ins-col .rbrk{ width: 10px; }
  .chg-head span:first-child{ font-size: 1rem; line-height: 1.4; white-space: normal; padding-left: 0; }
  .chg-plus{ width: 16px; height: 16px; flex: none; margin-right: 4px; }

  .sd-ref-body + .sd-ref-body{ margin-top: 6vw; }

  .s-engage2{ display: grid; gap: 14vw; }
  .eng-col{ position: relative; width: auto; padding: 2vw 0 2vw 6vw; }
  .eng-brk{ height: 100%; width: 10px; }
  .eng-title, .eng-body{ position: relative; left: auto; top: auto; }
  .eng-title{ font-size: 8vw; line-height: 1.12; }
  .eng-body{ margin-top: 5vw; }

  .sd-insight{ width: auto; }
  .sd-stories .story-title{ width: auto; }
}