/* ==========================================================================
   UBM — page-solutions.css
   The commercial core: /solutions, /solutions/{slug}, /services, /industries
   and /partners. Loaded after sections.css, so it may extend a shared block
   (.pillar-rail, .logo-grid, .timeline) but never re-declares one.

   House rules, same as sections.css
   · Tokens only. No raw hex, no raw ms, no hand-rolled cubic-bezier.
     Alpha variants come from color-mix() on a token.
   · Logical properties only. Nothing in this file knows about left or right.
   · Domain accents ([data-domain]) are allowed on a dot, a 2px rule or an
     icon stroke. Never on running text, never as a fill.
   · Every block carries a one-line comment showing its markup shape.
   ========================================================================== */

/* ==========================================================================
   0. SHARED — vendor wordmarks and the card numeral
   <p class="wordmark wordmark--lg">Lenovo</p>
   ========================================================================== */

.wordmark {
  font-family: var(--font-display);
  font-weight: 700;
  font-size: var(--fs-sm);
  letter-spacing: -0.015em;
  line-height: 1.2;
  color: var(--text-muted);
  white-space: nowrap;
}
.wordmark--lg {
  font-size: var(--fs-lg);
  letter-spacing: -0.028em;
  color: var(--text-strong);
}

/* numeral on a .card, used by the related-domain grid */
.card__index {
  font-family: var(--font-display);
  font-weight: 900;
  font-size: var(--fs-sm);
  letter-spacing: 0;
  color: var(--text-faint);
  font-variant-numeric: tabular-nums;
}

/* ==========================================================================
   1. DOMAIN INDEX  (/solutions)
   The arc lives in the gutter: --arc is a half-sine across the six rows, so
   the free ends of the six hairlines trace one open curve. Expansion is pure
   CSS — hover, or focus anywhere inside the row.

   <ol class="dx">
     <li class="dx__row" data-domain="network" style="--arc:71%">
       <a class="dx__link">
         <span class="dx__gutter"><span class="dx__tick"></span></span>
         <span class="dx__num">02</span>
         <span class="dx__head"><span class="dx__name">…</span>
           <span class="dx__tag">…</span></span>
         <span class="dx__go">…</span></a>
       <div class="dx__panel"><div class="dx__panel-in">…</div></div>
     </li> … </ol>
   ========================================================================== */

.dx { border-block-start: var(--bw) solid var(--line); }

.dx__row {
  position: relative;
  border-block-end: var(--bw) solid var(--line);
}

.dx__link {
  display: grid;
  grid-template-columns: auto auto minmax(0, 1fr) auto;
  align-items: center;
  gap: var(--sp-4) var(--sp-5);
  padding-block: var(--sp-5);
  color: inherit;
}

/* the arc gutter */
.dx__gutter {
  display: block;
  inline-size: clamp(2rem, 6vw, 5rem);
  block-size: 2px;
}
.dx__tick {
  display: block;
  block-size: 2px;
  inline-size: var(--arc, 50%);
  margin-inline-start: auto;
  border-radius: var(--r-pill);
  background: var(--line-strong);
  transition: inline-size var(--d-slow) var(--e-out),
              background-color var(--d-base) var(--e-out);
}

.dx__num {
  font-family: var(--font-display);
  font-weight: 900;
  font-size: var(--fs-sm);
  letter-spacing: 0;
  color: var(--text-faint);
  font-variant-numeric: tabular-nums;
  transition: color var(--d-base) var(--e-out);
}

.dx__head { display: grid; gap: var(--sp-1); }
.dx__name {
  font-family: var(--font-display);
  font-weight: 700;
  font-size: var(--fs-xl);
  letter-spacing: var(--tr-heading);
  color: var(--text-strong);
  transition: color var(--d-base) var(--e-out);
}
.dx__tag {
  font-size: var(--fs-sm);
  color: var(--text-muted);
  max-inline-size: 52ch;
}

.dx__go {
  display: grid;
  place-items: center;
  inline-size: 2.5rem;
  block-size: 2.5rem;
  border: var(--bw) solid var(--line);
  border-radius: 50%;
  color: var(--text-faint);
  transition: color var(--d-base) var(--e-out),
              border-color var(--d-base) var(--e-out),
              transform var(--d-base) var(--e-out);
}

.dx__row:hover .dx__tick,
.dx__row:focus-within .dx__tick { inline-size: 100%; background: var(--accent); }
.dx__row:hover .dx__num,
.dx__row:focus-within .dx__num { color: var(--text-strong); }
.dx__row:hover .dx__go,
.dx__row:focus-within .dx__go {
  color: var(--text-strong);
  border-color: var(--line-strong);
  transform: translate3d(3px, 0, 0);
}
[dir="rtl"] .dx__row:hover .dx__go,
[dir="rtl"] .dx__row:focus-within .dx__go { transform: translate3d(-3px, 0, 0); }

/* --- the preview panel --------------------------------------------------
   grid-template-rows 0fr -> 1fr animates where it is supported and snaps
   where it is not; either way the content is correct. visibility keeps the
   collapsed panel out of the tab order, and flips back only after the
   collapse has finished. */
.dx__panel {
  display: grid;
  grid-template-rows: 0fr;
  transition: grid-template-rows var(--d-slow) var(--e-out);
}
.dx__panel-in {
  overflow: hidden;
  visibility: hidden;
  transition: visibility 0s linear var(--d-slow);
}
.dx__row:hover > .dx__panel,
.dx__row:focus-within > .dx__panel { grid-template-rows: 1fr; }
.dx__row:hover > .dx__panel > .dx__panel-in,
.dx__row:focus-within > .dx__panel > .dx__panel-in { visibility: visible; transition-delay: 0s; }

/* No padding on .dx__panel-in: it is the grid item, and border-box height can
   never fall below its own padding, so a padded panel would still be 24px tall
   when collapsed. Spacing goes on the children instead. */
.dx__lead {
  font-size: var(--fs-md);
  line-height: var(--lh-loose);
  color: var(--text);
  max-inline-size: 62ch;
  margin-block: var(--sp-2) var(--sp-6);
  padding-inline-start: var(--sp-2);
  border-inline-start: 2px solid var(--accent);
  padding-block: var(--sp-1);
}

.dx__cols { display: grid; gap: var(--sp-6) var(--sp-8); }
.dx__col  { display: grid; gap: var(--sp-3); align-content: start; }

.dx__label {
  font-size: var(--fs-3xs);
  letter-spacing: var(--tr-eyebrow);
  text-transform: uppercase;
  color: var(--text-faint);
}

.dx__scope { display: grid; gap: var(--sp-2); }
.dx__scope > li {
  position: relative;
  padding-inline-start: var(--sp-5);
  font-size: var(--fs-sm);
  color: var(--text);
}
.dx__scope > li::before {
  content: "";
  position: absolute;
  inset-inline-start: 0;
  inset-block-start: 0.62em;
  inline-size: 10px;
  block-size: 1px;
  background: var(--gold);
}
.dx__scope-t { font-weight: 600; }

.dx__vendors { display: flex; flex-wrap: wrap; gap: var(--sp-2) var(--sp-4); }
.dx__vendors > li + li { position: relative; }
.dx__vendors > li + li::before {
  content: "";
  position: absolute;
  inset-inline-start: calc(var(--sp-4) / -2);
  inset-block: 12%;
  inline-size: 1px;
  background: var(--line-strong);
}

.dx__none {
  font-size: var(--fs-sm);
  color: var(--text-muted);
  max-inline-size: 42ch;
}

.dx__more { margin-block-start: var(--sp-5); padding-block-end: var(--sp-7); }

@media (max-width: 47.99rem) {
  .dx__link { grid-template-columns: auto minmax(0, 1fr) auto; gap: var(--sp-2) var(--sp-4); }
  .dx__gutter { display: none; }
  .dx__go { inline-size: 2rem; block-size: 2rem; }
}
@media (min-width: 48rem) {
  .dx__cols { grid-template-columns: minmax(0, 1fr) minmax(0, 1fr); }
}

/* Before any row is touched, the first one stands open so the section never
   reads as an empty list of labels. :has() closes it again as soon as the
   visitor engages with another row; without :has() two rows are open, which
   is a cosmetic loss and nothing more. */
.dx__row:first-child > .dx__panel { grid-template-rows: 1fr; }
.dx__row:first-child > .dx__panel > .dx__panel-in { visibility: visible; transition-delay: 0s; }

@supports selector(:has(*)) {
  .dx:has(.dx__row:hover, .dx__row:focus-within) .dx__row:first-child:not(:hover):not(:focus-within) > .dx__panel {
    grid-template-rows: 0fr;
  }
  .dx:has(.dx__row:hover, .dx__row:focus-within) .dx__row:first-child:not(:hover):not(:focus-within) > .dx__panel > .dx__panel-in {
    visibility: hidden;
    transition-delay: var(--d-slow);
  }
}

/* Below the hover breakpoint there is no hover, so every row is open.
   The :has() override is kept in its own rule — an unsupported selector
   invalidates the whole rule it appears in, and this one must never be lost. */
@media (max-width: 61.99rem) {
  .dx__panel { grid-template-rows: 1fr; }
  .dx__panel-in { visibility: visible; transition-delay: 0s; }
}
@supports selector(:has(*)) {
  @media (max-width: 61.99rem) {
    .dx:has(.dx__row:hover, .dx__row:focus-within) .dx__row:first-child:not(:hover):not(:focus-within) > .dx__panel {
      grid-template-rows: 1fr;
    }
    .dx:has(.dx__row:hover, .dx__row:focus-within) .dx__row:first-child:not(:hover):not(:focus-within) > .dx__panel > .dx__panel-in {
      visibility: visible;
      transition-delay: 0s;
    }
  }
}

/* ==========================================================================
   2. PILLAR RAIL EXTENSION  (/solutions)
   Adds the domain chips underneath the existing sections.css block.
   <li class="pillar-rail__item"> … <p class="pillar-rail__label">…</p>
     <ul class="pillar-rail__links"><li data-domain="…"><a class="pill">…</a>
   ========================================================================== */

.pillar-rail__label {
  margin-block-start: var(--sp-5);
  font-size: var(--fs-3xs);
  letter-spacing: var(--tr-eyebrow);
  text-transform: uppercase;
  color: var(--text-faint);
}
.pillar-rail__links {
  display: flex;
  flex-wrap: wrap;
  gap: var(--sp-2);
  margin-block-start: var(--sp-3);
}
/* Four columns is a narrow measure; "Artificial Intelligence" has to wrap
   rather than push the rail wider than its track. */
.pillar-rail__links .pill { white-space: normal; }

/* ==========================================================================
   3. TRIAGE  (/solutions)
   <ul class="triage"><li class="triage__row" data-domain="network">
     <p class="triage__say">…</p>
     <div class="triage__then"><p class="triage__label">…</p>
       <p class="triage__answer">…</p><a class="link triage__go">…</a></div>
   ========================================================================== */

.triage { border-block-start: var(--bw) solid var(--line); }

.triage__row {
  display: grid;
  gap: var(--sp-4) var(--sp-8);
  padding-block: var(--sp-6);
  border-block-end: var(--bw) solid var(--line);
}

.triage__say {
  font-family: var(--font-serif);
  font-style: italic;
  font-size: var(--fs-lg);
  line-height: 1.42;
  color: var(--text-strong);
  text-wrap: pretty;
}
[lang="ar"] .triage__say { font-style: normal; font-weight: 600; line-height: var(--lh-snug); }

.triage__then {
  position: relative;
  display: grid;
  gap: var(--sp-2);
  padding-inline-start: var(--sp-5);
  border-inline-start: 2px solid var(--accent);
}
.triage__label {
  font-size: var(--fs-3xs);
  letter-spacing: var(--tr-eyebrow);
  text-transform: uppercase;
  color: var(--text-faint);
}
.triage__answer { font-size: var(--fs-sm); color: var(--text-muted); }
.triage__go { margin-block-start: var(--sp-2); justify-self: start; }

@media (min-width: 62rem) {
  .triage__row { grid-template-columns: minmax(0, 5fr) minmax(0, 6fr); align-items: start; }
}

/* ==========================================================================
   4. DOMAIN PAGE HERO  (/solutions/{slug})
   <header class="page-hero dom-hero" data-world="deep" data-domain="network">
     <div class="shell dom-hero__grid">
       <div class="dom-hero__main">…</div>
       <p class="dom-hero__index numeral numeral--outline">02</p></div>
   ========================================================================== */

/* sections.css already styles `.page-hero > .shell`. Matching that specificity
   from a later file is what lets this override it, so the selector is written
   as a child combinator rather than a bare class. */
.dom-hero > .dom-hero__grid {
  display: grid;
  gap: var(--sp-6);
  align-items: end;
  justify-items: stretch;
}
.dom-hero__main { display: grid; gap: var(--sp-4); justify-items: start; }
.dom-hero__main .t-h1 { max-inline-size: 16ch; }
.dom-hero__main .t-lead { max-inline-size: 46ch; }

/* The eyebrow inherits --accent, and a domain accent on navy is not a text
   colour. Gold is, and it is the brand's own punctuation. */
.dom-hero .eyebrow { color: var(--gold); }
.dom-hero__dot {
  inline-size: 6px;
  block-size: 6px;
  border-radius: 50%;
  background: var(--accent);
  flex: none;
}

.dom-hero__index {
  font-size: var(--fs-6xl);
  line-height: .78;
  justify-self: start;
  opacity: .85;
}

@media (min-width: 62rem) {
  .dom-hero > .dom-hero__grid { grid-template-columns: minmax(0, 1fr) auto; gap: var(--sp-9); }
  .dom-hero__index { justify-self: end; }
}
@media (max-width: 47.99rem) {
  .dom-hero__index { font-size: var(--fs-4xl); }
}

/* ==========================================================================
   5. STATEMENT  (/solutions/{slug})
   <div class="shell dom-statement"><div class="dom-statement__aside">…</div>
     <div class="dom-statement__body">…</div></div>
   ========================================================================== */

.dom-statement { display: grid; gap: var(--sp-5) var(--sp-9); }
.dom-statement__aside { display: grid; gap: var(--sp-3); align-content: start; justify-items: start; }
.dom-statement__body  { display: grid; gap: var(--sp-4); }
.dom-statement__body .t-h3 { max-inline-size: 26ch; }
.dom-statement__lead { max-inline-size: 66ch; color: var(--text); }

@media (min-width: 62rem) {
  .dom-statement { grid-template-columns: minmax(0, 3fr) minmax(0, 8fr); }
}

/* ==========================================================================
   6. SCOPE GRID  (/solutions/{slug})
   <ol class="scope-grid"><li class="scope-card">
     <span class="scope-card__index">01</span>
     <h3 class="scope-card__title">…</h3><p class="scope-card__body">…</p>
   ========================================================================== */

.scope-grid {
  display: grid;
  gap: 0;
  border-block-start: var(--bw) solid var(--line);
}
.scope-card {
  display: grid;
  gap: var(--sp-2);
  align-content: start;
  padding-block: var(--sp-6);
  padding-inline-end: var(--sp-6);
  border-block-end: var(--bw) solid var(--line);
}
.scope-card__index {
  font-family: var(--font-display);
  font-weight: 900;
  font-size: var(--fs-2xs);
  letter-spacing: var(--tr-eyebrow);
  color: var(--accent-text);
  font-variant-numeric: tabular-nums;
}
.scope-card__title { font-size: var(--fs-lg); }
.scope-card__body  { font-size: var(--fs-sm); color: var(--text-muted); max-inline-size: 46ch; }

@media (min-width: 48rem) {
  .scope-grid { grid-template-columns: repeat(2, minmax(0, 1fr)); column-gap: var(--sp-8); }
}
@media (min-width: 75rem) {
  .scope-grid { grid-template-columns: repeat(3, minmax(0, 1fr)); }
}

/* ==========================================================================
   7. OUTCOME LIST  (/solutions/{slug})
   <ul class="outcome-list"><li class="outcome-list__item">
     <span class="outcome-list__mark">…svg…</span><span>…</span></li>
   ========================================================================== */

.outcome-list { display: grid; }
.outcome-list__item {
  display: grid;
  grid-template-columns: auto minmax(0, 1fr);
  align-items: start;
  gap: var(--sp-4);
  padding-block: var(--sp-5);
  border-block-end: var(--bw) solid var(--line);
  font-size: var(--fs-md);
  line-height: var(--lh-body);
  color: var(--text-strong);
}
.outcome-list__item:first-child { border-block-start: var(--bw) solid var(--line); }
.outcome-list__mark {
  display: grid;
  place-items: center;
  inline-size: 1.75rem;
  block-size: 1.75rem;
  margin-block-start: 0.15em;
  border: var(--bw) solid var(--line-gold);
  border-radius: 50%;
  color: var(--gold);
  flex: none;
}
.outcome-list__mark svg { inline-size: 14px; block-size: 11px; }

/* ==========================================================================
   8. VENDOR SET  (/solutions/{slug})
   <div class="vendor-set"><section class="vendor-set__group">
     <h3 class="vendor-set__label">…</h3>
     <ul class="vendor-set__list"><li class="wordmark wordmark--lg">…</li>
   ========================================================================== */

.vendor-set { display: grid; gap: var(--sp-7); }
.vendor-set__group {
  display: grid;
  gap: var(--sp-4);
  padding-block-start: var(--sp-4);
  border-block-start: 2px solid var(--line-gold);
}
.vendor-set__label {
  font-size: var(--fs-3xs);
  font-weight: 600;
  letter-spacing: var(--tr-eyebrow);
  text-transform: uppercase;
  color: var(--text-faint);
}
.vendor-set__list {
  display: flex;
  flex-wrap: wrap;
  gap: var(--sp-4) var(--sp-8);
}

@media (min-width: 62rem) {
  .vendor-set { grid-template-columns: repeat(auto-fit, minmax(min(100%, 18rem), 1fr)); gap: var(--sp-8); }
}

/* ==========================================================================
   9. SERVICE STAGES  (/services)
   <ol class="svc-stages"><li class="svc-stage" data-world="soft">
     <div class="shell split">
       <div class="split__aside svc-stage__aside">…</div>
       <div class="svc-stage__body">…</div></div></li>
   ========================================================================== */

.svc-stage {
  display: block;
  padding-block: var(--section-y-tight);
  background: var(--surface);
  color: var(--text);
  border-block-start: var(--bw) solid var(--line);
}

.svc-stage__aside { display: grid; gap: var(--sp-3); justify-items: start; }
.svc-stage__index {
  font-family: var(--font-display);
  font-weight: 900;
  font-size: var(--fs-3xl);
  line-height: 1;
  letter-spacing: -0.05em;
  color: var(--gold);
  font-variant-numeric: tabular-nums;
}
.svc-stage__name { max-inline-size: 14ch; }
.svc-stage__tag  { font-size: var(--fs-sm); color: var(--text-muted); max-inline-size: 34ch; }

.svc-stage__body { display: grid; gap: var(--sp-7); }
.svc-stage__lead { max-inline-size: 64ch; color: var(--text); }

.svc-stage__cols { display: grid; gap: var(--sp-7); align-items: start; }

.svc-block { display: grid; gap: var(--sp-4); align-content: start; }
.svc-block__title {
  font-family: var(--font-sans);
  font-size: var(--fs-3xs);
  font-weight: 600;
  letter-spacing: var(--tr-eyebrow);
  text-transform: uppercase;
  color: var(--text-faint);
  padding-block-end: var(--sp-3);
  border-block-end: var(--bw) solid var(--line);
}

.svc-list { display: grid; gap: var(--sp-4); }
.svc-list__item {
  position: relative;
  padding-inline-start: var(--sp-5);
  font-size: var(--fs-sm);
  line-height: var(--lh-body);
  color: var(--text);
}
.svc-list__item::before {
  content: "";
  position: absolute;
  inset-inline-start: 0;
  inset-block-start: 0.68em;
  inline-size: 12px;
  block-size: 1px;
  background: var(--gold);
}

.svc-gives { display: grid; gap: var(--sp-3); }
.svc-gives__item {
  padding-block: var(--sp-3);
  padding-inline: var(--sp-4);
  font-size: var(--fs-sm);
  color: var(--text-strong);
  background: var(--surface-sunken);
  border: var(--bw) solid var(--line);
  border-inline-start: 2px solid var(--gold);
  border-radius: var(--r-sm);
}

@media (min-width: 62rem) {
  .svc-stage__cols { grid-template-columns: minmax(0, 7fr) minmax(0, 5fr); gap: var(--sp-9); }
}

/* ==========================================================================
   10. DELIVERY MODEL  (/services)
   Ships as a scroll-snapping rail. The inline module on the page flips
   data-dmodel to "scroll" on wide viewports, which pins the block and drives
   --dmodel-shift from scroll progress. It never does that under reduced
   motion, so the static rail is always the fallback, not an afterthought.

   <section class="dmodel" data-dmodel="static">
     <div class="dmodel__sticky">
       <div class="shell dmodel__head">…</div>
       <div class="dmodel__viewport"><ol class="dmodel__track">
         <li class="dmodel__stage">…</li> …</ol></div>
       <div class="shell dmodel__foot">…</div></div></section>
   ========================================================================== */

.dmodel {
  position: relative;
  padding-block: var(--section-y);
  background: var(--surface);
  color: var(--text);
}
/* minmax(0, 1fr): in scroll mode the viewport clips instead of scrolling, so
   as an auto-sized grid item it took the whole track's width (about 1650px),
   left the script nothing to move and pushed the head and foot off centre. */
.dmodel__sticky { display: grid; grid-template-columns: minmax(0, 1fr); gap: var(--sp-7); }
.dmodel__head { display: grid; gap: var(--sp-4); max-inline-size: 62ch; }
.dmodel__hint { color: var(--text-faint); }

.dmodel__viewport {
  /* the rail is full-bleed but its first panel lines up with the shell */
  padding-inline: max(var(--gutter), calc((100% - var(--page-max)) / 2 + var(--gutter)));
  padding-block-end: var(--sp-3);
  overflow-x: auto;
  overscroll-behavior-x: contain;
  scroll-snap-type: x mandatory;
  scrollbar-width: thin;
}
.dmodel__track {
  display: flex;
  gap: var(--sp-5);
  inline-size: max-content;
}

.dmodel__stage {
  display: grid;
  gap: var(--sp-3);
  align-content: start;
  inline-size: min(78vw, 21rem);
  padding: var(--sp-6);
  scroll-snap-align: start;
  background: var(--surface-raised);
  border: var(--bw) solid var(--line);
  border-radius: var(--r-md);
}
.dmodel__index {
  font-family: var(--font-display);
  font-weight: 900;
  font-size: var(--fs-sm);
  color: var(--gold);
  font-variant-numeric: tabular-nums;
}
.dmodel__name {
  font-size: var(--fs-xl);
  font-weight: 900;
  letter-spacing: var(--tr-display);
  text-transform: uppercase;
}
.dmodel__desc { font-size: var(--fs-sm); color: var(--text-muted); }
.dmodel__tie {
  margin-block-start: auto;
  padding-block-start: var(--sp-4);
  border-block-start: var(--bw) solid var(--line);
  font-size: var(--fs-2xs);
  letter-spacing: var(--tr-eyebrow);
  text-transform: uppercase;
  color: var(--text-faint);
}

.dmodel__foot {
  display: grid;
  gap: var(--sp-3);
}
.dmodel__progress {
  position: relative;
  block-size: 2px;
  background: var(--line);
  border-radius: var(--r-pill);
  overflow: hidden;
}
.dmodel__bar {
  position: absolute;
  inset: 0;
  background: var(--gold);
  transform: scaleX(var(--dmodel-p, 1));
  transform-origin: var(--to-origin, left);
}
.dmodel__gov {
  font-size: var(--fs-3xs);
  letter-spacing: var(--tr-eyebrow);
  text-transform: uppercase;
  color: var(--text-faint);
}
.dmodel__govlist {
  display: flex;
  flex-wrap: wrap;
  gap: var(--sp-2) var(--sp-4);
  font-size: var(--fs-2xs);
  color: var(--text-muted);
}
.dmodel__govlist > li + li { position: relative; }
.dmodel__govlist > li + li::before {
  content: "";
  position: absolute;
  inset-inline-start: calc(var(--sp-4) / -2);
  inset-block: 15%;
  inline-size: 1px;
  background: var(--line-strong);
}

/* --- scroll-linked mode ------------------------------------------------- */
.dmodel[data-dmodel="scroll"] {
  min-block-size: 260svh;
  padding-block-end: 0;
}
.dmodel[data-dmodel="scroll"] .dmodel__sticky {
  position: sticky;
  inset-block-start: calc(var(--header-h) + var(--sp-5));
  padding-block-end: var(--sp-9);
}
.dmodel[data-dmodel="scroll"] .dmodel__viewport {
  overflow: clip;                 /* clip, not hidden: never a scroll container */
  scroll-snap-type: none;
}
.dmodel[data-dmodel="scroll"] .dmodel__track {
  transform: translate3d(var(--dmodel-shift, 0px), 0, 0);
  will-change: transform;
}
.dmodel[data-dmodel="scroll"] .dmodel__stage {
  inline-size: min(32vw, 23rem);
  min-block-size: 17rem;
}
.dmodel[data-dmodel="scroll"] .dmodel__bar { --dmodel-p: 0; }

/* A laptop screen is not tall enough for the block above: pinned under the
   header it needs about 820px in English, and its foot sat below the bottom
   edge at 768 and 800. On a shorter screen the head goes into two columns
   (title beside the lead), the gaps tighten and the block pins just under the
   shrunken header, which brings it to about 600px. Anything shorter still is
   left to the script, which keeps the plain scrolling rail. */
@media (max-height: 56rem) {
  .dmodel[data-dmodel="scroll"] .dmodel__sticky {
    inset-block-start: calc(var(--header-h-sm) + var(--sp-4));
    gap: var(--sp-5);
  }
  .dmodel[data-dmodel="scroll"] .dmodel__head {
    max-inline-size: var(--page-max);
    grid-template-columns: minmax(0, 5fr) minmax(0, 6fr);
    grid-template-areas:
      "eyebrow lead"
      "title   lead"
      "title   hint";
    gap: var(--sp-3) var(--sp-8);
    align-items: start;
  }
  .dmodel[data-dmodel="scroll"] .dmodel__head > .eyebrow { grid-area: eyebrow; }
  .dmodel[data-dmodel="scroll"] .dmodel__head > .t-h2    { grid-area: title; }
  .dmodel[data-dmodel="scroll"] .dmodel__head > .t-lead  { grid-area: lead; }
  .dmodel[data-dmodel="scroll"] .dmodel__head > .dmodel__hint { grid-area: hint; align-self: end; }
  .dmodel[data-dmodel="scroll"] .dmodel__stage {
    min-block-size: 0;
    padding: var(--sp-5);
  }
}

/* ==========================================================================
   11. GOVERNANCE RAIL  (/services)
   <ul class="gov-rail"><li class="gov-rail__item">
     <span class="gov-rail__index">01</span>
     <h3 class="gov-rail__title">…</h3><p class="gov-rail__body">…</p>
   ========================================================================== */

.gov-rail { display: grid; gap: var(--sp-7) var(--sp-8); }
.gov-rail__item {
  display: grid;
  gap: var(--sp-2);
  align-content: start;
  padding-block-start: var(--sp-4);
  border-block-start: 2px solid var(--line-gold);
}
.gov-rail__index {
  font-family: var(--font-display);
  font-weight: 900;
  font-size: var(--fs-2xs);
  letter-spacing: var(--tr-eyebrow);
  color: var(--gold);
  font-variant-numeric: tabular-nums;
}
.gov-rail__title { font-size: var(--fs-lg); }
.gov-rail__body  { font-size: var(--fs-sm); color: var(--text-muted); }

@media (min-width: 48rem) { .gov-rail { grid-template-columns: repeat(2, minmax(0, 1fr)); } }
@media (min-width: 62rem) { .gov-rail { grid-template-columns: repeat(3, minmax(0, 1fr)); } }

/* ==========================================================================
   12. COMMERCIAL MODEL  (/services)
   The gold hairline over each step grows a quarter per step, so the ladder
   from a one-off project to a lifecycle agreement is drawn, not asserted.

   <div class="comm"><p class="comm__para">…</p>
     <ol class="comm__ladder"><li class="comm__step" style="--step:0">
       <span class="comm__step-mark"></span>
       <span class="comm__step-t">…</span><span class="comm__step-b">…</span>
   ========================================================================== */

.comm { display: grid; gap: var(--sp-5); }
.comm__para {
  font-size: var(--fs-md);
  line-height: var(--lh-loose);
  color: var(--text);
  max-inline-size: 64ch;
}

.comm__ladder { display: grid; margin-block-start: var(--sp-6); }
.comm__step {
  position: relative;
  display: grid;
  gap: var(--sp-2);
  padding-block: var(--sp-5);
  border-block-start: var(--bw) solid var(--line);
}
.comm__step-mark {
  position: absolute;
  inset-block-start: -1px;
  inset-inline-start: 0;
  block-size: 2px;
  inline-size: calc((var(--step, 0) + 1) * 25%);
  background: var(--gold);
}
.comm__step-t {
  font-family: var(--font-display);
  font-weight: 700;
  font-size: var(--fs-lg);
  color: var(--text-strong);
}
.comm__step-b { font-size: var(--fs-sm); color: var(--text-muted); max-inline-size: 52ch; }

/* ==========================================================================
   13. INDUSTRY BLOCKS  (/industries)
   <ol class="ind-list"><li class="ind-block section" data-world="soft">
     <div class="shell split split--wide-aside">
       <div class="split__aside ind-block__aside">…</div>
       <div class="ind-block__body">…</div></div></li>
   ========================================================================== */

.ind-block { border-block-start: var(--bw) solid var(--line); }

.ind-block__aside { display: grid; gap: var(--sp-3); justify-items: start; align-content: start; }
.ind-block__index {
  font-family: var(--font-display);
  font-weight: 900;
  font-size: var(--fs-4xl);
  line-height: .84;
  letter-spacing: -0.05em;
  color: transparent;
  -webkit-text-stroke: 1.5px var(--line-gold);
  paint-order: stroke fill;
  font-variant-numeric: tabular-nums;
}
.ind-block__name { max-inline-size: 16ch; }
.ind-block__tag  { font-size: var(--fs-sm); color: var(--text-muted); max-inline-size: 38ch; }

.ind-block__label {
  font-size: var(--fs-3xs);
  letter-spacing: var(--tr-eyebrow);
  text-transform: uppercase;
  color: var(--text-faint);
  margin-block-end: var(--sp-3);
}
.ind-block__aside .ind-block__label { margin-block-start: var(--sp-3); margin-block-end: 0; }

.ind-block__domains { display: flex; flex-wrap: wrap; gap: var(--sp-2); }

.ind-block__body { display: grid; gap: var(--sp-8); }

.ind-context__para {
  font-size: var(--fs-md);
  line-height: var(--lh-loose);
  color: var(--text);
  max-inline-size: 64ch;
}
.ind-context__para + .ind-context__para { margin-block-start: var(--sp-4); }

.ind-deliver__list { display: grid; }
.ind-deliver__item {
  position: relative;
  padding-block: var(--sp-4);
  padding-inline-start: var(--sp-6);
  font-size: var(--fs-sm);
  color: var(--text);
  border-block-end: var(--bw) solid var(--line);
}
.ind-deliver__item:first-child { border-block-start: var(--bw) solid var(--line); }
.ind-deliver__item::before {
  content: "";
  position: absolute;
  inset-inline-start: 0;
  inset-block-start: 1.55em;
  inline-size: 14px;
  block-size: 1px;
  background: var(--accent);
}

.ind-other {
  display: grid;
  gap: var(--sp-4);
  justify-items: start;
  max-inline-size: 58ch;
}

/* ==========================================================================
   14. PARTNERS  (/partners)
   <section class="ptr-domain section" data-domain="network">
     <div class="shell"><header class="ptr-domain__head">…</header>
       <section class="ptr-group"><h3 class="ptr-group__label">…</h3>
         <ul class="logo-grid logo-grid--partners">
           <li class="ptr-card"><p class="wordmark wordmark--lg">…</p>
             <p class="ptr-card__note">…</p></li> …
   ========================================================================== */

.ptr-status { min-block-size: 1.25em; }
.ptr-hint   { margin-block-start: var(--sp-3); color: var(--text-faint); }

.ptr-domain { border-block-start: var(--bw) solid var(--line); }

.ptr-domain__head {
  display: grid;
  gap: var(--sp-3);
  justify-items: start;
  margin-block-end: var(--sp-8);
  padding-inline-start: var(--sp-5);
  border-inline-start: 2px solid var(--accent);
}
.ptr-domain__index {
  font-family: var(--font-display);
  font-weight: 900;
  font-size: var(--fs-2xs);
  letter-spacing: var(--tr-eyebrow);
  color: var(--text-faint);
  font-variant-numeric: tabular-nums;
}
.ptr-domain__tag { font-size: var(--fs-sm); color: var(--text-muted); max-inline-size: 52ch; }

.ptr-group + .ptr-group { margin-block-start: var(--sp-8); }
.ptr-group__label {
  font-family: var(--font-sans);
  font-size: var(--fs-3xs);
  font-weight: 600;
  letter-spacing: var(--tr-eyebrow);
  text-transform: uppercase;
  color: var(--text-faint);
  margin-block-end: var(--sp-4);
}

/* Extends the .logo-grid block in sections.css: same bordered lattice, but
   each cell is a wordmark with a line of copy, so it aligns to the start
   rather than centring a single logo. */
.logo-grid--partners {
  grid-template-columns: repeat(auto-fill, minmax(min(100%, 17rem), 1fr));
}
.logo-grid--partners > * {
  place-items: start;
  align-content: start;
  gap: var(--sp-3);
  min-block-size: 9.5rem;
  padding: var(--sp-5);
  text-align: start;
  transition: background-color var(--d-base) var(--e-out);
}
.logo-grid--partners > *:hover { background: var(--surface-sunken); }
.ptr-card__note {
  font-size: var(--fs-xs);
  line-height: var(--lh-body);
  color: var(--text-muted);
  white-space: normal;
}

.ptr-none,
.ptr-legal { display: grid; gap: var(--sp-4); justify-items: start; }
.ptr-none  { max-inline-size: 62ch; }
.ptr-legal__para {
  font-size: var(--fs-sm);
  line-height: var(--lh-loose);
  color: var(--text-muted);
  max-inline-size: 64ch;
}

/* ==========================================================================
   15. REDUCED MOTION
   tokens.css already collapses the durations; these are the two places where
   a transition would still be perceptible as a jump rather than a change.
   ========================================================================== */

@media (prefers-reduced-motion: reduce) {
  .dx__tick,
  .dx__panel,
  .dx__panel-in { transition: none !important; }
  .dmodel[data-dmodel="scroll"] .dmodel__track { will-change: auto; }
}

/* ==========================================================================
   AI page only: the simulator band and the stack we supply
   ========================================================================== */
.ai-sim-band__inner {
  display: grid;
  gap: var(--sp-7);
  align-items: center;
}
@media (min-width: 56rem) {
  .ai-sim-band__inner { grid-template-columns: minmax(0, 1.6fr) minmax(0, 1fr); }
}
.ai-sim-band__copy { display: grid; gap: var(--sp-4); justify-items: start; }
.ai-sim-band__copy > * { margin: 0; }
.ai-sim-band__points {
  display: grid;
  gap: var(--sp-2);
  margin: 0;
  padding: 0;
  list-style: none;
  color: var(--text);
  font-size: var(--fs-sm);
}
.ai-sim-band__points li { display: flex; gap: var(--sp-2); align-items: baseline; }
.ai-sim-band__points li::before { content: ""; flex: none; width: 0.9rem; height: 1px; background: var(--c-gold-400); transform: translateY(-0.25em); }
.ai-sim-band__art { width: min(100%, 17rem); justify-self: center; color: var(--text-muted); }
.ai-sim-band__gpus { color: var(--accent); }
.ai-sim-band__link { color: var(--accent); }
@media (prefers-reduced-motion: no-preference) {
  .ai-sim-band__link { animation: ai-sim-flow 2.4s linear infinite; }
}
@keyframes ai-sim-flow { to { stroke-dashoffset: -32; } }

.ai-stack {
  display: grid;
  gap: var(--sp-5);
}
@media (min-width: 48rem) { .ai-stack { grid-template-columns: repeat(2, minmax(0, 1fr)); } }
@media (min-width: 80rem) { .ai-stack { grid-template-columns: repeat(4, minmax(0, 1fr)); } }
.ai-stack__layer {
  display: grid;
  gap: var(--sp-2);
  align-content: start;
  padding-block-start: var(--sp-4);
  border-block-start: var(--bw) solid var(--line-gold);
}
.ai-stack__layer > * { margin: 0; }
.ai-stack__items { display: grid; gap: var(--sp-3); margin: var(--sp-2) 0 0; }
.ai-stack__items div { display: grid; gap: 2px; }
.ai-stack__items dt { font-weight: 600; color: var(--text-strong); font-size: var(--fs-sm); }
.ai-stack__items dd { margin: 0; font-size: var(--fs-xs); color: var(--text-muted); line-height: 1.5; }
.ai-stack__oss { margin: var(--sp-7) 0 var(--sp-2); max-width: 70ch; color: var(--text); }
.ai-stack__oss strong { color: var(--text-strong); margin-inline-end: var(--sp-1); }
.ai-stack__note { max-width: 70ch; }