/* =====================================================================
   CHAVANS — APPLIED AI PAGE
   Standalone stylesheet (this page needs nothing else).
   Source of truth: "1. Applied AI_LV COPY" PDF / PPTX (15 slides).

   LAYOUT MODEL
   Every slide in the PDF is a 1600 × 900 canvas (960 × 540 pt × 5/3).
   --u = 1px at 1600 wide, so every position below is the exact pixel
   value measured on the PDF page, and the page scales with the viewport.
   Elements are absolutely placed inside each section with
   --x / --y / --w (in u) set inline in the HTML.

   FONTS
   - Helvetica Neue (display + body): licensed (Monotype), not bundled.
     Built into macOS/iOS. For Windows/Android license a web font and
     declare it as "Helvetica Neue". Weights used: 400, 500.
   - JetBrains Mono (nav, tags, sub-line, buttons, footer headings):
     OFL, self-hosted from /fonts. Weights 300 / 400 / 700.
===================================================================== */

@font-face{
  font-family: "JetBrains Mono";
  font-style: normal;
  font-weight: 100 800;
  font-display: swap;
  src: url("fonts/JetBrainsMono-Variable-latin.woff2") format("woff2");
  unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+0304, U+0308, U+0329, U+2000-206F, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD;
}
@font-face{
  font-family: "JetBrains Mono";
  font-style: normal;
  font-weight: 100 800;
  font-display: swap;
  src: url("fonts/JetBrainsMono-Variable-latin-ext.woff2") format("woff2");
  unicode-range: U+0100-02BA, U+02BD-02C5, U+02C7-02CC, U+02CE-02D7, U+02DD-02FF, U+1E00-1E9F, U+1EF2-1EFF, U+2020, U+20A0-20AB, U+20AD-20C0, U+2113, U+2C60-2C7F, U+A720-A7FF;
}

/* ---------- Tokens (all colours resolved from the PPTX theme) ---------- */
:root{
  --u: calc(100vw / 1600);
  --sans: "Helvetica Neue", Helvetica, Arial, sans-serif;
  --mono: "JetBrains Mono", ui-monospace, SFMono-Regular, Menlo, Consolas, monospace;

  --mist:     #E9EDF0;   /* hero + four pillars */
  --night:    #171717;   /* bg2 · lumMod 10%  — reality / meaning / outcomes / ref. arch. */
  --paper:    #F2F2F2;   /* bg1 · 95%          — client stories, light button */
  --silver:   #BFBFBF;   /* bg1 · 75%          — how engagements start */
  --cta:      #262626;   /* tx1 85% + 15%      — CTA band */
  --btn-dark: #404040;   /* tx1 75% + 25%      — dark button */

  --ink:      #0D0D0D;   /* tx1 95% + 5% */
  --ink-85:   #262626;
  --ink-75:   #404040;
  --ink-65:   #595959;
  --grey-65:  #A6A6A6;   /* bg1 65% */
  --grey-50:  #808080;   /* bg1 50% */
  --grey-75:  #BFBFBF;   /* bg1 75% */
}

/* ---------- Reset ---------- */
*,*::before,*::after{ box-sizing: border-box; }
html, body{ margin: 0; padding: 0; }
body{
  font-family: var(--sans);
  color: var(--ink);
  background: #000;
  overflow-x: hidden;
  -webkit-font-smoothing: antialiased;
  -moz-osx-font-smoothing: grayscale;
  text-rendering: optimizeLegibility;
}
img{ display: block; max-width: none; }
a{ color: inherit; text-decoration: none; }
button{ font: inherit; background: none; border: 0; padding: 0; cursor: pointer; color: inherit; }
p, h1, h2, h3, h4, ul{ margin: 0; padding: 0; }
ul{ list-style: none; }

/* ---------- Canvas primitives ---------- */
.sec{ position: relative; width: 100%; overflow: hidden; height: calc(var(--u) * var(--h)); }
.abs{
  position: absolute;
  left: calc(var(--u) * var(--x, 0));
  top:  calc(var(--u) * var(--y, 0));
}
.w{ width: calc(var(--u) * var(--w)); }
.center{ left: 0; width: 100%; text-align: center; }
.nb{ white-space: nowrap; }           /* lines break exactly where the PDF breaks */

/* Type roles ---------------------------------------------------------- */
.t-display{                           /* 40pt Helvetica Neue Medium */
  font-family: var(--sans); font-weight: 500;
  font-size: calc(var(--u) * 66.67);
  line-height: calc(var(--u) * 80);   /* PPT 100% = 1.2 × size */
  letter-spacing: -0.003em;
}
.t-display--tight{ line-height: calc(var(--u) * 64); }   /* PPT lnSpc 80% */
.t-body{                              /* 11pt Helvetica Neue */
  font-family: var(--sans); font-weight: 400;
  font-size: calc(var(--u) * 18.33);
  line-height: calc(var(--u) * 22);
}
.t-mono{                              /* 9pt JetBrains Mono (sized to the PDF render) */
  font-family: var(--mono); font-weight: 400;
  font-size: calc(var(--u) * 12.4);
  line-height: calc(var(--u) * 16);
  letter-spacing: 0.01em;
}

/* "+" marker used by every section tag (Helvetica Neue Thin in the PPT) */
.plus{ width: calc(var(--u) * var(--s)); height: calc(var(--u) * var(--s)); }
.plus::before, .plus::after{
  content: ""; position: absolute; background: currentColor;
}
.plus::before{ left: 0; right: 0; top: 50%; height: 1.4px; transform: translateY(-50%); }
.plus::after{ top: 0; bottom: 0; left: 50%; width: 1.4px; transform: translateX(-50%); }

/* "↳" connector (vertical line + arrow) */
.elbow{ width: calc(var(--u) * 18); height: calc(var(--u) * 22); color: var(--ink-85); }
.elbow svg{ display: block; width: 100%; height: 100%; overflow: visible; }

/* =====================================================================
   01 HERO  (#E9EDF0, 692.4 tall — rest of slide 1 is dark)
===================================================================== */
.s-hero{ background: var(--mist); color: var(--ink); }

.logo img{ width: calc(var(--u) * 145); height: auto; }

.pills{
  width: calc(var(--u) * 989);
  height: calc(var(--u) * 34.9);
  display: flex; justify-content: space-between; align-items: stretch;
}
.pill{
  display: inline-flex; align-items: center;
  padding: 0 calc(var(--u) * 14);
  border-radius: calc(var(--u) * 10.2);
  background: rgba(0,0,0,0.15);       /* tx1 · alpha 15% */
  color: var(--ink);
  font-family: var(--mono);
  font-size: calc(var(--u) * 12.4);
  letter-spacing: 0.01em;
  white-space: nowrap;
  transition: background .2s;
}
.pill:hover{ background: rgba(0,0,0,0.24); }
.search{ width: calc(var(--u) * 23); height: calc(var(--u) * 23); color: #000; }
.search svg{ width: 100%; height: 100%; display: block; }
.nav-toggle{ display: none; }

.hero-tag-plus{ color: var(--ink-85); }
.hero-tag{ color: var(--ink-85); }
.hero-title{
  font-family: var(--sans); font-weight: 500;
  font-size: calc(var(--u) * 90);       /* 54pt */
  line-height: calc(var(--u) * 86.4);   /* lnSpc 80% */
  letter-spacing: -0.006em;
  color: var(--ink);
  text-align: right;
}
.hero-sub{
  font-family: var(--mono);
  font-size: calc(var(--u) * 14.4);     /* 10.5pt */
  line-height: calc(var(--u) * 21);
  letter-spacing: 0.01em;
  color: var(--ink-65);
}

/* =====================================================================
   02 THE ENTERPRISE AI REALITY  (dark; includes the lower part of slide 1)
   03 WHAT APPLIED AI MEANS TO CHAVANS
   09 APPLIED OUTCOMES
===================================================================== */
.s-dark{ background: var(--night); color: #fff; }
.s-dark .t-body{ color: var(--grey-65); }
.s-outcomes .t-body{ color: var(--grey-75); }

.grad-title{
  text-align: center;
  background: linear-gradient(90deg, #22EFCC 0%, #ABE600 100%);
  -webkit-background-clip: text; background-clip: text;
  -webkit-text-fill-color: transparent; color: transparent;
}

/* =====================================================================
   04–07 THE FOUR PILLARS  (#E9EDF0, pinned; one pillar per slide)
===================================================================== */
.s-pillars{ background: var(--mist); overflow: visible; }
.pl-stage{
  position: sticky;
  top: min(0px, calc(100vh - var(--u) * 900));
  height: calc(var(--u) * 900);
  overflow: hidden;
}
.pl-title{ color: var(--ink-85); }
.pl-rule{ left: 0; width: 100%; height: 1px; background: var(--grey-65); }

.pl-item{ position: absolute; inset: 0; pointer-events: none; opacity: 0; transition: opacity .55s ease; }
.pl-item .pl-move{ transition: transform .7s cubic-bezier(.2,.7,.2,1); transform: translateY(calc(var(--u) * 18)); }
.pl-item.is-active{ opacity: 1; pointer-events: auto; }
.pl-item.is-active .pl-move{ transform: none; }

.pl-geo{ height: auto; }
.pl-head{
  font-family: var(--sans); font-weight: 500;
  font-size: calc(var(--u) * 33.33);    /* 20pt */
  line-height: calc(var(--u) * 40);
  color: var(--ink-85);
}
.pl-body{ color: var(--ink-65); }
.pl-body--25{ line-height: calc(var(--u) * 25); }   /* slides 5–7: exact 15pt spacing */

/* =====================================================================
   08 WHAT WE HAVE SEEN IN PRACTICE  (#F2F2F2)
===================================================================== */
.s-stories{ background: var(--paper); color: #000; }
.s-stories .tag, .s-insights .tag{ color: var(--ink-85); }

.story{
  position: absolute;
  top: calc(var(--u) * 296.5);
  left: calc(var(--u) * var(--x));
  width: calc(var(--u) * 250);
  height: calc(var(--u) * 311);
  color: var(--grey-50);
}
.story .brk{
  position: absolute; left: 0; top: 0;
  width: calc(var(--u) * 6.5); height: 100%;
  border: 1.67px solid var(--grey-65); border-right: 0;
  border-radius: 2px 0 0 2px;
  transition: border-color .25s;
}
.story-title{
  position: absolute;
  left: calc(var(--u) * var(--dx)); top: calc(var(--u) * 4.7);
  font-family: var(--sans);
  font-size: calc(var(--u) * 26.67);    /* 16pt */
  line-height: calc(var(--u) * 32);
  transition: color .25s;
}
.story-foot{
  position: absolute;
  left: calc(var(--u) * (var(--dx) + 3)); top: calc(var(--u) * 277.1);
  display: flex; align-items: center;
  height: calc(var(--u) * 16);
}
.story-label{
  font-family: var(--mono); font-weight: 300;
  font-size: calc(var(--u) * 12.4);
  letter-spacing: 0.01em;
  color: var(--ink);
  white-space: nowrap;
  max-width: 0; overflow: hidden; opacity: 0;
  margin-right: 0;
  transition: max-width .35s ease, opacity .25s, margin-right .35s ease;
}
.story-arrow{ width: calc(var(--u) * 24); height: calc(var(--u) * 9); color: var(--grey-50); transition: color .25s; }
.story-arrow svg{ display: block; width: 100%; height: 100%; overflow: visible; }

/* real story copy (from Client Stories.xlsx): title + (focus) line flow
   inside the bracket; the bracket grows with the copy, min = PDF height */
.story{ height: auto; min-height: calc(var(--u) * 311); padding: calc(var(--u) * 4.7) 0 calc(var(--u) * 58); }
.story-title{
  position: relative; left: auto; top: auto; display: block;
  margin-left: calc(var(--u) * var(--dx));
  width: calc(var(--u) * (250 - var(--dx)));
  text-wrap: pretty;
}
.story-sub{
  display: block;
  margin-top: calc(var(--u) * 14);
  font-size: calc(var(--u) * 18.33);    /* 11pt — same as body copy */
  line-height: calc(var(--u) * 22);
}
.story-foot{ top: auto; bottom: calc(var(--u) * 18); }

/* active card = the dark one in the PDF (card 1 by default, hovered card on hover) */
.stories:not(:hover) .story.is-default,
.stories .story:hover{ color: #000; }
.stories:not(:hover) .story.is-default .brk,
.stories .story:hover .brk{ border-color: var(--ink); }
.stories:not(:hover) .story.is-default .story-label,
.stories .story:hover .story-label{ max-width: calc(var(--u) * 90); opacity: 1; margin-right: calc(var(--u) * 21); }
.stories:not(:hover) .story.is-default .story-arrow,
.stories .story:hover .story-arrow{ color: var(--ink-75); }

/* =====================================================================
   10–11 DESIGN THAT SURVIVE PRODUCTION  (dark, spans 2 slides)
===================================================================== */
.s-ref .tag{ color: #fff; }
.mockup{ width: calc(var(--u) * 1020); height: calc(var(--u) * 673); }
.ref-body{
  font-family: Helvetica, "Helvetica Neue", Arial, sans-serif;   /* PPT: Helvetica 11pt */
  font-size: calc(var(--u) * 18.33);
  line-height: calc(var(--u) * 26.4);   /* lnSpc 120% */
  color: var(--grey-75);
}
.hl{                                    /* white rounded highlight on the two links */
  display: inline-block;
  line-height: calc(var(--u) * 20.2);
  padding: 0 calc(var(--u) * 3);
  margin-left: calc(var(--u) * 1);
  border-radius: calc(var(--u) * 3.6);
  background: #fff;
  color: var(--ink);
  text-decoration: underline;
  text-decoration-thickness: 1px;
  text-underline-offset: 2px;
  transition: background .2s;
}
.hl:hover{ background: #e6e6e6; }

/* =====================================================================
   12 HOW ENGAGEMENTS START?  (#BFBFBF)
===================================================================== */
.s-engage{ background: var(--silver); color: #000; }
.s-engage .t-body{ color: var(--ink-75); }

/* =====================================================================
   13 RELATED INSIGHTS  (#FFF)
===================================================================== */
.s-insights{ background: #fff; color: #000; }
.insight{
  font-family: var(--sans);
  font-size: calc(var(--u) * 40);       /* 24pt */
  line-height: calc(var(--u) * 48);
  color: var(--grey-75);
  transition: color .25s;
}
.insights:not(:hover) .insight.is-default,
.insights .insight:hover{ color: var(--ink-75); }
.rbrk{
  width: calc(var(--u) * 9.2); height: calc(var(--u) * 306.1);
  border: 1.67px solid var(--grey-75); border-left: 0;
  border-radius: 0 2px 2px 0;
}

/* =====================================================================
   14 START WITH CLARITY AND CONTEXT  (#262626)  +  FOOTER (#000)
===================================================================== */
.s-cta{ background: var(--cta); color: #fff; }
.cta-sub{ color: #fff; }
.btn{
  width: calc(var(--u) * 434.2); height: calc(var(--u) * 73.3);
  border-radius: calc(var(--u) * 12.2);
  transition: filter .2s;
}
.btn:hover{ filter: brightness(1.12); }
.btn--dark{ background: var(--btn-dark); color: #fff; }
.btn--light{ background: var(--paper); color: var(--ink-85); }
.btn--light:hover{ filter: brightness(0.96); }
.btn .abs{ white-space: nowrap; }
.btn-arrow{ height: calc(var(--u) * 9); }
.btn-arrow svg{ display: block; width: 100%; height: 100%; overflow: visible; }

.s-foot{ background: #000; color: #fff; }
.foot-h{
  font-family: var(--mono); font-weight: 700;
  font-size: calc(var(--u) * 12.4);
  line-height: calc(var(--u) * 16);
  color: #fff;
  white-space: nowrap;
}
.foot-h--spaced{ letter-spacing: calc(var(--u) * 1.83); }   /* spc 110 on COMPANY / WHAT WE DO */
.foot-list{ display: flex; flex-direction: column; gap: calc(var(--u) * 10); }
.foot-list a{
  font-family: var(--sans);
  font-size: calc(var(--u) * 16.67);    /* 10pt */
  line-height: calc(var(--u) * 20);
  color: var(--grey-50);
  white-space: nowrap;
  transition: color .2s;
}
.foot-list a:hover{ color: #fff; }
.foot-copy{
  font-family: var(--sans);
  font-size: calc(var(--u) * 15.5);
  line-height: calc(var(--u) * 20);
  color: var(--grey-75);
  white-space: nowrap;
}

/* =====================================================================
   SHARED BLOCKS FOR THE OTHER AI-FOR-ENTERPRISE INTERNAL PAGES
   (Enterprise Data & AI · Security & Responsible AI · GenAI & Agentic AI
   · AI Operating Model). Same canvas, same type roles as Applied AI, but
   copy blocks flow (copy comes from Word docs without fixed line breaks).
===================================================================== */
.sec--flow{
  height: auto;
  min-height: calc(var(--u) * var(--h));
  padding: calc(var(--u) * var(--pt, 0)) 0 calc(var(--u) * var(--pb, 0));
  display: flex; flex-direction: column; align-items: center; justify-content: center;
}
.sec--top{ justify-content: flex-start; }
.ttl{ width: calc(var(--u) * var(--tw, 1100)); text-align: center; text-wrap: balance; }
.pl-titlebox{
  position: absolute; left: calc(var(--u) * 825.5); top: 0;
  width: calc(var(--u) * 720); height: calc(var(--u) * 382);
  display: flex; align-items: center;
}
.pl-titlebox .pl-title{ text-wrap: balance; }
.s-hero--flow{
  height: auto;
  min-height: calc(var(--u) * 692.4);
  padding: calc(var(--u) * 187) 0 calc(var(--u) * 64);
}
.hero-stack{
  position: relative;
  margin-left: calc(var(--u) * 408);
  width: calc(var(--u) * 1100);
  display: flex; flex-direction: column; align-items: flex-end;
}
.hero-stack .hero-title{ text-wrap: balance; }
.hero-stack .hero-subrow{
  display: flex; gap: calc(var(--u) * 18.5);
  width: calc(var(--u) * 356);
  margin-top: calc(var(--u) * 84);
}
.hero-stack .elbow{ flex: none; }
.hero-stack .hero-sub{ text-transform: uppercase; padding-top: calc(var(--u) * 6); }

.blk{ width: calc(var(--u) * var(--w, 682.6)); }
.blk h2{ text-align: center; margin-bottom: calc(var(--u) * 39); }
.blk p + p, .blk p + ul, .blk ul + p{ margin-top: calc(var(--u) * 22); }
.blk .t-body, .blk p{ text-wrap: pretty; }
.lead{ color: #fff !important; }
.s-engage .lead{ color: var(--ink) !important; }
.olist{ display: grid; gap: calc(var(--u) * 6); }
.olist li{ position: relative; padding-left: calc(var(--u) * 22); }
.olist li::before{ content: "•"; position: absolute; left: 0; }
.means-body{ width: calc(var(--u) * 651); }
.means-body p{ text-wrap: pretty; }
.means-body p + p{ margin-top: calc(var(--u) * 22); }
.engage-geo{ height: auto; }

/* pillars: heading + copy flow so long headings can't overlap */
.pl-text{ width: calc(var(--u) * 645); }
.pl-text .pl-head{ width: calc(var(--u) * 480); text-wrap: balance; }
.pl-copybox{ position: relative; margin-top: calc(var(--u) * 19.5); }
.pl-copybox .elbow{ position: absolute; left: calc(var(--u) * -36.5); top: 0; }
.pl-copybox .pl-body{ text-wrap: pretty; }

/* related insights: right-aligned column, bracket follows its height */
.insights-col{
  width: calc(var(--u) * 545);
  padding: calc(var(--u) * 15) 0 calc(var(--u) * 15);
  display: grid; gap: calc(var(--u) * 58);
}
.insights-col .insight{ text-wrap: pretty; }
.insights-col .rbrk{
  position: absolute; top: 0; height: 100%;
  left: calc(var(--u) * 564.5);
}

/* reference architectures: photo in the mockup slot */
.mockup--photo{ object-fit: cover; }
.ref-col{ width: calc(var(--u) * 620); }
.ref-col .ref-body{ text-wrap: pretty; }
.ref-col .ref-body + .ref-body{ margin-top: calc(var(--u) * 58); }
.ref-col .hl{ vertical-align: calc(var(--u) * 2.5); }

/* closing statement — same treatment as the Resources page */
.s-close{
  background: #d9d9d9;
  color: #000;
  height: auto;
  min-height: calc(var(--u) * 900);
  display: flex; align-items: center;
  padding: 0 0 0 calc(var(--u) * 179);
}
.close{ position: relative; padding: calc(var(--u) * 52) 0 calc(var(--u) * 52) calc(var(--u) * 31); }
.close .brk{
  position: absolute; left: 0; top: 0;
  width: calc(var(--u) * 19); height: 100%;
  border: 1px solid #7f7f7f; border-right: 0;
}
.close p{
  font-family: var(--sans); font-weight: 500;
  font-size: calc(var(--u) * 53.33);
  line-height: 1.22;
  letter-spacing: -0.005em;
  max-width: calc(var(--u) * 1180);
  text-wrap: pretty;
}

/* =====================================================================
   MOBILE (≤ 900px) — canvas positions switch to normal flow
===================================================================== */
@media (max-width: 900px){
  :root{ --g: 6vw; }
  .sec{ height: auto; padding: 16vw var(--g); }
  .abs{ position: relative; left: auto; top: auto; }
  .w{ width: auto; }
  .nb{ white-space: normal; }
  .nb br{ display: none; }
  .t-display, .t-display--tight{ font-size: 9.5vw; line-height: 1.1; }
  .t-body, .ref-body, .pl-body, .pl-body--25{ font-size: 1rem; line-height: 1.5; }
  .t-mono, .hero-sub, .pill{ font-size: 0.8125rem; }

  /* hero */
  .s-hero{ padding-top: 6vw; padding-bottom: 14vw; display: flex; flex-direction: column; }
  .s-hero .logo{ order: 0; }
  .logo img{ width: 120px; }
  .pills, .search{ display: none; }
  .nav-toggle{
    display: flex; flex-direction: column; gap: 5px; width: 28px;
    position: absolute; right: var(--g); top: 6vw;
  }
  .nav-toggle span{ display: block; height: 2px; background: #000; border-radius: 1px; }
  .hero-tagrow{ display: flex; align-items: center; gap: 10px; margin-top: 16vw; }
  .plus{ width: 12px; height: 12px; flex: none; }
  .hero-title{ font-size: 10.5vw; line-height: 1.04; text-align: left; margin-top: 6vw; }
  .hero-title br{ display: none; }
  .hero-subrow{ display: flex; gap: 12px; margin-top: 10vw; }
  .elbow{ width: 18px; height: 22px; flex: none; }
  .hero-sub{ line-height: 1.5; }

  /* centred text sections */
  .center{ width: auto; }
  .s-dark .t-body, .s-engage .t-body{ margin-top: 6vw; }
  .means-geo{ width: 46vw !important; margin: 10vw auto; }

  /* pillars: stacked */
  .s-pillars{ height: auto !important; padding: 0; }
  .pl-stage{ position: relative; top: auto; height: auto; padding: 16vw var(--g) 6vw; overflow: visible; }
  .pl-rule{ position: relative; margin: 10vw calc(var(--g) * -1) 0; width: auto; }
  .pl-item{ position: relative; inset: auto; opacity: 1; pointer-events: auto; padding: 10vw 0 6vw; border-bottom: 1px solid var(--grey-65); }
  .pl-item:last-child{ border-bottom: 0; }
  .pl-item .pl-move{ transform: none; }
  .pl-geo{ width: 40vw !important; margin-bottom: 8vw; }
  .pl-head{ font-size: 7vw; line-height: 1.15; }
  .pl-copy{ display: flex; gap: 12px; margin-top: 5vw; }

  /* stories */
  .s-stories .tagrow, .s-insights .tagrow, .s-ref .tagrow{ display: flex; align-items: center; gap: 10px; }
  .s-ref .tagrow{ justify-content: center; }
  .stories-title{ margin-top: 6vw; }
  .stories{ display: grid; gap: 8vw; margin-top: 10vw; }
  .story{ position: relative; left: auto; top: auto; width: auto; height: auto; min-height: 0; padding: 1vw 0 14vw; }
  .story-title{ margin-left: 7vw; width: auto; padding-right: 4vw; font-size: 6vw; line-height: 1.2; }
  .story-sub{ font-size: 1rem; line-height: 1.4; margin-top: 3vw; }
  .story-foot{ left: 7.5vw; top: auto; bottom: 2vw; height: 16px; }
  .story-arrow{ width: 24px; height: 9px; }

  /* reference architectures */
  .s-ref .t-display{ margin-top: 4vw; }
  .mockup{ width: calc(100% + var(--g) * 2); height: auto; aspect-ratio: 1020 / 673; margin: 10vw calc(var(--g) * -1); }
  .ref-body + .ref-body{ margin-top: 8vw; }
  .hl{ line-height: 1.3; }

  /* insights */
  .insights-title{ margin-top: 6vw; }
  .insights{ position: relative; margin-top: 10vw; padding: 4vw 6vw 4vw 0; display: grid; gap: 7vw; }
  .insight{ font-size: 6vw; line-height: 1.2; }
  .insight br{ display: none; }
  .rbrk{ position: absolute !important; right: 0; top: 0; height: 100%; width: 10px; }

  /* CTA + footer */
  .s-cta .t-display{ font-size: 8.5vw; }
  .cta-sub{ margin-top: 3vw; white-space: normal; }
  .btns{ display: grid; gap: 3vw; margin-top: 8vw; }
  .btn{ width: auto; height: 60px; display: flex; align-items: center; justify-content: space-between; padding: 0 22px; border-radius: 12px; }
  .btn .abs{ position: static; white-space: normal; }
  .btn-arrow{ width: 30px !important; height: 9px; flex: none; }
  .s-foot{ display: grid; grid-template-columns: 1fr 1fr; gap: 10vw 4vw; }
  .foot-col{ display: grid; gap: 5vw; align-content: start; }
  .foot-list{ gap: 0.6rem; }
  .foot-h{ font-size: 0.75rem; }
  .foot-list a, .foot-copy{ font-size: 0.9375rem; white-space: normal; }
  .foot-copy{ grid-column: 1 / -1; order: 9; }
}

@media (max-width: 900px){
  .sec--flow{ min-height: 0; padding: 16vw var(--g); align-items: stretch; }
  .ttl{ width: auto; }
  .pl-titlebox{ position: relative; left: auto; width: auto; height: auto; }
  .s-hero--flow{ min-height: 0; padding: 6vw var(--g) 14vw; }
  .hero-stack{ margin: 0; width: auto; align-items: flex-start; }
  .hero-stack .hero-subrow{ width: auto; margin-top: 10vw; gap: 12px; }
  .blk, .means-body, .pl-text, .pl-text .pl-head, .ref-col, .insights-col{ width: auto; }
  .blk h2{ margin-bottom: 6vw; }
  .means-body{ margin-top: 0; }
  .engage-geo{ width: 40vw !important; margin: 0 auto 8vw; }
  .pl-copybox{ padding-left: 30px; margin-top: 5vw; }
  .pl-copybox .elbow{ left: 0; }
  .insights-col{ position: relative; margin-top: 10vw; padding: 4vw 6vw 4vw 0; gap: 7vw; }
  .insights-col .rbrk{ left: auto; right: 0; width: 10px; }
  .ref-col .ref-body + .ref-body{ margin-top: 8vw; }
  .s-close{ min-height: 0; padding: 22vw var(--g); }
  .close{ padding: 6vw 0 6vw 6vw; }
  .close .brk{ width: 12px; }
  .close p{ font-size: 6.6vw; line-height: 1.25; }
}

@media (prefers-reduced-motion: reduce){
  .pl-item, .pl-item .pl-move, .story-label{ transition: none; }
}