/* ============================================================
   AIHG · Option M — Option L, recomposed as an alternating editorial page
   ------------------------------------------------------------
   Everything through the "L · desktop composition" block below is L
   verbatim with the prefix swapped (opl -> opm), so M starts life
   identical to L. The "M · alternating editorial layout" block at the
   very end is the only difference: the major storytelling sections are
   recomposed as side-by-side rows whose copy column alternates left and
   right down the page. Copy stays left-aligned in every row; only the
   column it occupies moves. Copy always precedes its visual in the DOM,
   so mobile and assistive technology read copy first regardless of which
   side the desktop row puts it on.
   ============================================================ */

/* ============================================================
   (inherited) Option L — Option K, composed for the desktop
   ------------------------------------------------------------
   The same content, order, diagrams and brand system as K. What
   changes is composition: a wider section grid at desktop widths,
   diagrams scaled to anchor their sections, a higher floor on the
   smallest type, and the page read as one scroll rather than a run
   of slides. Everything above the "L · desktop composition" banner
   is K's stylesheet with its prefix swapped; the L work is appended
   below it so the two can be diffed directly.

   Slots: hero:f · about:l · approach:l · why:l. Behaviour: option-l.js.
   ============================================================ */
:root{--opm-canvas:#F5F4F1;--opm-canvas-2:#ECEAE5;--opm-white:#FFFFFF;--opm-line:rgba(6,11,17,.12);--opm-line-2:rgba(6,11,17,.22);--opm-mute:rgba(6,11,17,.62);--opm-gold:#A6802E;--opm-gold-l:#C9A35C;--opm-gold-fill:rgba(166,128,46,.10);--opm-gold-fill-2:rgba(166,128,46,.2)}

/* ---------- shared ---------- */
.opm-h2{font-family:var(--display);font-weight:700;letter-spacing:-.024em;line-height:1.04;font-size:clamp(30px,4.2vw,52px);margin:0;text-wrap:balance}
.opm-h3{font-family:var(--display);font-weight:700;letter-spacing:-.018em;line-height:1.12;font-size:clamp(22px,2.3vw,30px);margin:0;text-wrap:balance}
#why .opm-h2{max-width:none}
.opm-lead{display:grid;grid-template-columns:minmax(0,1.4fr) minmax(0,1fr);gap:16px clamp(32px,6vw,96px);align-items:end;margin-bottom:clamp(28px,4vh,44px)}
.opm-lead>.label{grid-column:1/-1;font-size:13px}
.about__inner .opm-lead p:not(.label),.why__inner .opm-lead p:not(.label){margin:0;font-size:clamp(15px,1.25vw,17px);line-height:1.55;max-width:42ch;padding-bottom:6px;color:var(--muted-on-paper)}
.opm-note{margin:14px 0 0;font-size:13.5px;line-height:1.5;color:var(--muted-on-paper);max-width:62ch}
.opm-cap{margin:0;max-width:58ch}
.opm-cap .label{display:block;font-size:13px;margin-bottom:12px}
.about__inner .opm-cap p,.why__inner .opm-cap p{margin:12px 0 0;font-size:clamp(15px,1.25vw,17px);line-height:1.55;color:var(--muted-on-paper);max-width:none}
.opm-aihg{display:inline-grid;place-items:center;width:40px;height:40px;border-radius:50%;border:1.5px solid var(--opm-gold);background:var(--opm-gold-fill);color:var(--brass-text);transition:background .4s,color .4s,box-shadow .4s;flex:none}
.opm-aihg svg{width:22px;height:22px;stroke:currentColor;fill:none;stroke-width:6;stroke-linecap:round;stroke-linejoin:round}
.opm-aihg.on{background:var(--opm-gold);color:#fff;box-shadow:0 0 0 6px var(--opm-gold-fill-2)}
.opm-fig__cap{display:flex;justify-content:space-between;gap:20px;align-items:baseline;margin-top:14px;flex-wrap:wrap}
.opm-fig__cap b{font-family:var(--display);font-weight:700;font-size:clamp(16px,1.6vw,20px);letter-spacing:-.016em;color:var(--ink)}
.opm-fig__cap span{font-family:var(--mono);font-size:12px;font-weight:600;letter-spacing:.12em;text-transform:uppercase;color:var(--brass-text)}
@media(max-width:860px){.opm-lead{grid-template-columns:1fr}.about__inner .opm-lead p:not(.label),.why__inner .opm-lead p:not(.label){max-width:52ch}}

/* role markers — used only where the role itself carries the story */
.opm-about .av,.opm .av,.opm-why .av{display:inline-grid;place-items:center;width:26px;height:26px;border-radius:50%;overflow:hidden;flex:none;box-shadow:0 0 0 1px rgba(6,11,17,.15);transition:box-shadow .4s,filter .4s,opacity .4s}
.opm-about .av svg,.opm .av svg,.opm-why .av svg{width:100%;height:100%;display:block}

/* ---------- About · more software hasn't solved it ---------- */
.opm-tools{display:grid;grid-template-columns:minmax(0,1fr) minmax(0,1fr);gap:clamp(18px,2.2vw,30px);align-items:stretch}
.opm-tools>.opm-lead{grid-column:1/-1;margin-bottom:8px}
.opm-tools__col{padding:clamp(20px,2.4vw,30px);border:1px dashed var(--opm-line-2);background:var(--opm-canvas)}
.opm-tools__col--aihg{border:1.5px solid var(--opm-gold);background:var(--opm-white);box-shadow:0 16px 44px rgba(6,11,17,.09)}
.opm-tools__col .label{display:block;font-size:12px;margin-bottom:16px;color:var(--opm-mute)}
.opm-tools__col--aihg .label{color:var(--brass-text)}
.opm-tools__col ul{list-style:none;margin:0;padding:0}
.opm-tools__col li{padding:13px 0;border-bottom:1px solid var(--opm-line);font-family:var(--text);font-weight:500;font-size:16px;line-height:1.35;color:var(--muted-on-paper);display:flex;gap:12px;align-items:baseline}
.opm-tools__col li:last-child{border-bottom:0;padding-bottom:0}
.opm-tools__col li::before{content:"";width:6px;height:6px;border-radius:50%;background:var(--steel);flex:none;position:relative;top:-2px;opacity:.55}
.opm-tools__col--aihg li{color:var(--ink)}
.opm-tools__col--aihg li::before{background:var(--opm-gold);opacity:1}
.about__inner .opm-tools__take{grid-column:1/-1;margin:26px 0 0;font-family:var(--display);font-weight:700;font-size:clamp(20px,2.2vw,28px);letter-spacing:-.018em;line-height:1.2;color:var(--ink);max-width:26ch}
.opm-tools__take em{font-style:normal;color:var(--brass-text)}
@media(max-width:640px){.opm-tools{grid-template-columns:1fr}}

/* ============================================================
   VISUAL 1 · One change, every team, one layer underneath
   The story itself is the diagram: four beats left to right, with the
   AIHG layer running continuously beneath all of them.
   ============================================================ */
.opm-story__stage{position:relative;background:var(--opm-canvas);border:1px solid var(--opm-line);padding:clamp(18px,2.4vw,30px)}
.opm-story__beats{list-style:none;margin:0 0 30px;padding:0;display:grid;grid-template-columns:repeat(4,minmax(0,1fr));gap:clamp(10px,1.4vw,18px)}
.opm-story__beats li{position:relative;padding:16px 16px 18px;border:1px solid var(--opm-line);background:var(--opm-white);transition:border-color .45s,box-shadow .45s}
.opm-story__beats li::after{content:"";position:absolute;left:50%;bottom:-30px;width:1px;height:30px;background:var(--opm-line-2);transition:background .45s,width .45s,transform .45s;transform:translateX(-50%)}
.opm-story__beats li.now{border-color:var(--opm-gold);box-shadow:0 10px 28px rgba(6,11,17,.08)}
.opm-story__beats li.now::after{background:var(--opm-gold);width:2px}
.opm-story__beats .label{display:flex;align-items:center;gap:8px;font-size:11.5px;color:var(--opm-mute);margin-bottom:9px;transition:color .45s}
.opm-story__beats .label::before{content:attr(data-n);width:20px;height:20px;border-radius:50%;border:1px solid var(--opm-line-2);display:grid;place-items:center;font-size:11.5px;letter-spacing:0;color:var(--opm-mute);flex:none;transition:background .45s,color .45s,border-color .45s}
.opm-story__beats li.on .label::before{border-color:var(--opm-gold);color:var(--brass-text)}
.opm-story__beats li.now .label{color:var(--brass-text)}
.opm-story__beats li.now .label::before{background:var(--opm-gold);border-color:var(--opm-gold);color:#fff}
.opm-story__beats b{display:block;font-family:var(--display);font-weight:700;font-size:clamp(15px,1.5vw,19px);line-height:1.2;letter-spacing:-.016em;color:var(--muted-on-paper);transition:color .45s;text-wrap:balance}
.opm-story__beats li.on b,.opm-story__beats li.now b{color:var(--ink)}
.opm-story__beats small{display:block;margin-top:8px;font-size:13.5px;line-height:1.4;color:var(--opm-mute)}
.opm-story__who{display:flex;gap:6px;margin-top:13px}
.opm-about .opm-story__who .av,.opm-why .opm-story__who .av{width:28px;height:28px;filter:saturate(.55);opacity:.75;transition:filter .45s,opacity .45s,box-shadow .45s}
.opm-story__beats li.now .opm-story__who .av{filter:none;opacity:1;box-shadow:0 0 0 2px var(--opm-gold)}
.opm-story__layer{display:flex;align-items:center;gap:15px;padding:15px 17px;border:1.5px solid var(--opm-gold);background:var(--opm-gold-fill);transition:background .45s}
.opm-story__layer.pulse{background:var(--opm-gold-fill-2)}
.opm-story__layer b{display:block;font-family:var(--display);font-weight:700;font-size:clamp(15px,1.5vw,18px);letter-spacing:-.014em;line-height:1.2;color:var(--ink)}
.opm-story__layer small{display:block;margin-top:3px;font-family:var(--mono);font-size:12px;font-weight:600;letter-spacing:.12em;text-transform:uppercase;color:var(--opm-mute)}
/* the key names the two tracks; it only appears once the diagram is a single column */
.opm-story__key{display:none;margin:0 0 18px;padding:0;gap:8px 18px;flex-wrap:wrap;font-family:var(--mono);font-size:11.5px;font-weight:600;letter-spacing:.1em;text-transform:uppercase;color:var(--opm-mute)}
.opm-story__key span{display:inline-flex;align-items:center;gap:7px}
.opm-story__key span::before{content:"";width:12px;height:12px;flex:none;border:1px solid var(--opm-line-2);background:var(--opm-white)}
.opm-story__key .k-agent::before{border-color:rgba(166,128,46,.5);background:var(--opm-gold-fill)}
@media(max-width:900px){
  /* Two lanes, the desktop structure turned on its side: what happens on property in the
     left column, the agent working underneath it in the right, one row per step.
     The #opmStory prefix is needed because the agent lane's base rules are appended later
     in this file and would otherwise win on equal specificity. */
  #opmStory .opm-story__stage{display:grid;grid-template-columns:1fr 1fr;column-gap:12px;row-gap:14px}
  #opmStory .opm-story__stage>.opm-story__beats,#opmStory .opm-story__stage>.opm-story__agents{display:contents}
  /* the two column headers */
  #opmStory .opm-story__key{display:contents}
  #opmStory .opm-story__key span{grid-row:1;display:block;margin:0;padding-bottom:8px;border-bottom:1px solid var(--opm-line-2);line-height:1.3}
  #opmStory .opm-story__key span::before{display:none}
  #opmStory .opm-story__key .k-hotel{grid-column:1}
  #opmStory .opm-story__key .k-agent{grid-column:2;color:var(--brass-text);border-bottom-color:rgba(166,128,46,.5)}
  /* one row per step, the pair side by side and matched in height */
  #opmStory .opm-story__beats li{grid-column:1;margin:0}
  #opmStory .opm-story__agents li{grid-column:2;margin:0}
  #opmStory .opm-story__beats li:nth-child(1),#opmStory .opm-story__agents li:nth-child(1){grid-row:2}
  #opmStory .opm-story__beats li:nth-child(2),#opmStory .opm-story__agents li:nth-child(2){grid-row:3}
  #opmStory .opm-story__beats li:nth-child(3),#opmStory .opm-story__agents li:nth-child(3){grid-row:4}
  #opmStory .opm-story__beats li:nth-child(4),#opmStory .opm-story__agents li:nth-child(4){grid-row:5}
  #opmStory .opm-story__layer{grid-column:1/-1;grid-row:6;margin-top:4px}
  /* the pair is joined across the gap, and the link lights with the step */
  #opmStory .opm-story__beats li::after{left:100%;top:50%;bottom:auto;width:12px;height:1px;transform:none;background:var(--opm-line-2)}
  #opmStory .opm-story__beats li.on::after{background:var(--opm-gold);width:12px}
  #opmStory .opm-story__beats li::before,#opmStory .opm-story__agents li::before{display:none}
  #opmStory .opm-story__agents li::after{display:none}
  #opmStory .opm-story__agents li{border-left-width:1px}
}
@media(max-width:640px){
  /* narrower columns, so the type steps down to match */
  #opmStory .opm-story__stage{padding:12px;column-gap:10px;row-gap:12px}
  #opmStory .opm-story__key span{font-size:11px;letter-spacing:.06em;padding-bottom:7px}
  #opmStory .opm-story__beats li,#opmStory .opm-story__agents li{padding:11px 10px 13px}
  #opmStory .opm-story__beats .label,#opmStory .opm-story__agents .label{font-size:11px;letter-spacing:.05em;gap:6px;margin-bottom:7px}
  #opmStory .opm-story__beats .label::before{width:17px;height:17px;font-size:10.5px}
  #opmStory .opm-story__beats b{font-size:14px;line-height:1.18}
  #opmStory .opm-story__agents b{font-size:13px;line-height:1.2}
  #opmStory .opm-story__beats small,#opmStory .opm-story__agents small{font-size:12.5px;line-height:1.35;margin-top:6px}
  #opmStory .opm-story__agents .opm-agent{width:24px;height:24px;margin-bottom:8px}
  #opmStory .opm-story__agents .opm-agent svg{width:13px;height:13px}
  #opmStory .opm-story__who{margin-top:10px;gap:5px}
  .opm-why #opmStory .opm-story__who .av{width:22px;height:22px}
  #opmStory .opm-story__beats li::after,#opmStory .opm-story__beats li.on::after{width:10px}
  #opmStory .opm-story__layer{padding:12px;gap:10px}
  #opmStory .opm-story__layer b{font-size:14px}
  #opmStory .opm-story__layer small{font-size:11px;letter-spacing:.08em}
}
@media(max-width:640px){.opm-story__stage{padding:16px}.opm-story__layer{gap:12px;padding:13px 14px}}

/* ============================================================
   The one dark moment · above and below the line
   ============================================================ */
html[data-approach="m"] #approach.morning{background:var(--dark);color:var(--paper);padding:0;--brass:#c9a35c;--brass-text:#c9a35c;--sage:#A6B7BF}
html[data-approach="m"] #approach .band__content{max-width:none;margin:0}
html[data-approach="m"] #approach.morning p{color:rgba(225,230,234,.78)}
html[data-approach="m"] #approach .label--sage{color:var(--silicon)}
.opm-band{position:relative;min-height:min(84svh,780px);display:flex;align-items:center;justify-content:center;text-align:center;overflow:hidden;padding:clamp(80px,12vh,140px) clamp(20px,4vw,56px)}
.opm-band video{position:absolute;inset:0;width:100%;height:100%;object-fit:cover;filter:saturate(.85)}
.opm-band__scrim{position:absolute;inset:0;background:linear-gradient(to bottom,rgba(6,11,17,.5),rgba(6,11,17,.74) 60%,rgba(6,11,17,.86))}
.opm-band__content{position:relative;z-index:2;max-width:900px;margin:0 auto;width:100%}
.opm-band .label{font-size:13px;color:var(--goldl)}
.morning .opm-band h2{font-family:var(--display);font-weight:700;letter-spacing:-.026em;line-height:1.02;font-size:clamp(34px,5.2vw,68px);margin:18px auto 20px;max-width:15ch;color:#fff;text-wrap:balance}
.morning .opm-band p{margin:0 auto;max-width:50ch;font-size:clamp(15px,1.3vw,18px);line-height:1.55;color:rgba(225,230,234,.78)}
.opm-line{margin:clamp(40px,7vh,64px) auto 0;max-width:880px;display:grid;gap:18px;justify-items:center}
.opm-line__k{font-family:var(--mono);font-size:12px;font-weight:600;letter-spacing:.14em;text-transform:uppercase;color:rgba(225,230,234,.5);transition:color .4s}
.opm-line.all .opm-line__k{color:rgba(201,163,92,.85)}
.opm-line.all .opm-line__below .opm-aihg{box-shadow:0 0 0 5px rgba(201,163,92,.22)}
.opm-line__below .opm-aihg{transition:box-shadow .5s}
.opm-line__brand{display:inline-flex;align-items:center;gap:12px;transform-origin:50% 50%;transition:transform .55s cubic-bezier(.34,1.5,.64,1)}
.opm-line.all .opm-line__brand{transform:scale(1.22)}
.morning .opm-band .opm-line__below{font-size:13.5px;line-height:1.7;max-width:none;color:var(--goldl)}
.opm-line__row{display:flex;flex-wrap:wrap;gap:16px 32px;align-items:center;justify-content:center;margin:0;padding:0;list-style:none}
.opm-line__row li{display:inline-flex;align-items:center;gap:9px;font-family:var(--text);font-weight:500;font-size:16px;color:rgba(225,230,234,.62);transform-origin:50% 50%;transition:color .4s,transform .5s cubic-bezier(.34,1.5,.64,1)}
.opm-line__row li.now{transform:scale(1.18);color:#fff}
.opm-line__row li.on{color:#fff}
.opm .opm-line__row .av{width:28px;height:28px;box-shadow:0 0 0 1px rgba(225,230,234,.28)}
.opm .opm-line__row li.on .av{box-shadow:0 0 0 2px var(--goldl)}
.opm .opm-line__row li.now .av{box-shadow:0 0 0 2px var(--goldl),0 0 0 7px rgba(201,163,92,.22)}
.opm-line__rule{width:100%;height:1px;background:linear-gradient(90deg,rgba(201,163,92,.12),rgba(201,163,92,.7),rgba(201,163,92,.12))}
.opm-line__below{display:flex;flex-direction:column;align-items:center;gap:16px;font-family:var(--mono);font-size:13.5px;font-weight:600;letter-spacing:.12em;text-transform:uppercase;color:var(--goldl)}
.opm-line__below .opm-aihg{width:32px;height:32px;border-color:rgba(201,163,92,.6);background:rgba(201,163,92,.12);color:var(--goldl)}
.opm-line__below .opm-aihg svg{width:17px;height:17px}
.opm-line__below span{color:rgba(201,163,92,.72)}
.opm-line__verbs i{font-style:normal}
.opm-line__verbs i+i::before{content:" \00b7 "}

/* ============================================================
   WHAT AI-NATIVE MEANS, on the dark hotel-photo band
   Reuses .opm-native__copy / .opm-head / .opm-cta / .opm-ains / .opm-stack
   (and its whole architecture-diagram family) verbatim for structure and
   spacing; only color/surface treatment changes for the dark photograph
   behind it. That old #about instance no longer exists, so nothing here
   competes with it.

   Layout: .opm-band video/scrim stay exactly as they were (full-bleed photo
   + gradient). Only .opm-band__content becomes a two-column grid. The
   diagram sits in column 2, row 1 only (no row-span) so its height never
   inflates row 2 — the same bug fixed earlier in .opm-native, avoided here
   by construction. The AINS note is explicitly placed in column 1, row 2,
   so desktop reads copy+CTA+AINS as one left column while DOM order
   (copy, diagram, AINS) still gives the correct mobile stacking order for
   free once the grid collapses to a single column.
   ============================================================ */
.opm-band--platform{text-align:left;align-items:flex-start;padding-top:clamp(96px,13vh,150px);padding-bottom:clamp(96px,13vh,150px)}
.opm-band--platform .opm-band__scrim{background:linear-gradient(180deg,rgba(6,11,17,.72),rgba(6,11,17,.82) 45%,rgba(6,11,17,.9))}
.opm-band--platform .opm-band__content{max-width:1280px;display:grid;grid-template-columns:minmax(0,1fr) minmax(0,1.2fr);grid-template-rows:auto auto auto 1fr;column-gap:clamp(32px,5vw,72px);row-gap:0}
.opm-band--platform .opm-head{grid-column:1;grid-row:1;align-self:start}
.opm-band--platform .opm-ains{grid-column:1;grid-row:2;align-self:start}
.opm-band--platform .opm-cta{grid-column:1;grid-row:3;align-self:start;justify-content:center}
.opm-band--platform .opm-stack{grid-column:2;grid-row:1/5;align-self:start}
@media(max-width:980px){
  .opm-band--platform .opm-band__content{display:block}
  .opm-band--platform .opm-head,.opm-band--platform .opm-cta,.opm-band--platform .opm-stack,.opm-band--platform .opm-ains{grid-column:auto;grid-row:auto}
  .opm-band--platform .opm-cta{margin-top:clamp(28px,3.6vh,36px)}
  .opm-band--platform .opm-stack{margin-top:clamp(32px,4.5vh,44px)}
}

/* copy column: headline kept dominant but not oversized like the section's old display type */
.morning .opm-band--platform .opm-head h2{font-size:clamp(30px,3.6vw,46px);max-width:13ch;margin:0 0 18px;text-align:left}
.morning .opm-band--platform .opm-head p{margin:0;max-width:42ch;text-align:left;color:rgba(225,230,234,.78)}
.opm-band--platform .opm-head{max-width:none;margin-bottom:0}
.opm-band--platform .opm-ains{font-size:13.5px;line-height:1.6;color:rgba(225,230,234,.6);max-width:52ch;margin:0 0 clamp(28px,3.4vh,36px)}
.opm-band--platform .opm-ains .label{display:block;margin-bottom:8px;color:rgba(201,163,92,.85)}
.opm-band--platform .opm-ains a{color:var(--goldl)}
@media(min-width:981px){
  .morning .opm-band--platform .opm-ains{margin:32px 0 24px}
}
@media(max-width:980px){
  /* .morning .opm-band p{margin:0 auto;...} (a generic rule for other paragraphs
     on this band) outranks the unprefixed selector below on specificity alone and
     was silently centering this paragraph and zeroing its top margin — the same
     collision already solved for .opm-head p just above via the .morning prefix. */
  .morning .opm-band--platform .opm-ains{margin:clamp(44px,5.5vh,60px) 0 0}
}

/* the diagram card, unwrapped from its opaque light surface: transparent
   over the photo, light type, restrained gold accents, no glow. */
.opm-band--platform .opm-stack{background:rgba(255,255,255,.045);border-color:rgba(225,230,234,.18)}
.opm-band--platform .opm-stack__k{color:rgba(201,163,92,.9);line-height:1.5;margin-bottom:12px}
.morning .opm-band--platform .opm-stack__lede{margin:0 0 20px;max-width:none;font-size:16px;line-height:1.55;text-align:left;color:rgba(225,230,234,.78)}
.opm-band--platform .opm-stack__grid li{background:rgba(255,255,255,.05);border-color:rgba(225,230,234,.24);color:rgba(225,230,234,.8);font-size:12px;line-height:1.4;padding:10px 12px}
.opm-band--platform .opm-flow__line{stroke:rgba(225,230,234,.3)}
.opm-band--platform .opm-flow__line--gold{stroke:rgba(201,163,92,.55)}
.opm-band--platform .opm-lake{background:rgba(255,255,255,.05);border-color:rgba(201,163,92,.65)}
.opm-band--platform .opm-lake b{color:#fff}
.opm-band--platform .opm-output{background:rgba(255,255,255,.05);border-color:rgba(225,230,234,.22)}
.opm-band--platform .opm-output--gold{background:rgba(201,163,92,.12);border-color:rgba(201,163,92,.6)}
.opm-band--platform .opm-output b{color:#fff}
.opm-band--platform .opm-output p{color:rgba(225,230,234,.72)}
.opm-band--platform .opm-output__tag{color:rgba(225,230,234,.5)}
.opm-band--platform .opm-output--gold .opm-output__tag{color:var(--goldl)}
.opm-band--platform .opm-stack__note{margin:16px 0 0;font-size:13px;color:rgba(225,230,234,.6);max-width:none}

@media(min-width:561px){
  .opm-band--platform .opm-stack{container-type:inline-size}
  .opm-band--platform .opm-stack .opm-stack__grid{display:grid;grid-template-columns:repeat(10,minmax(0,1fr));grid-auto-rows:48px;gap:8px;padding:12px 0 0}
  .opm-band--platform .opm-stack__grid li{display:flex;align-items:center;justify-content:center;text-align:center;padding:6px 2px;background:rgba(255,255,255,.05);border-color:rgba(225,230,234,.24);font-size:clamp(9px,2.2cqw,12px);letter-spacing:.01em}
  .opm-band--platform .opm-stack__grid li:nth-child(2){grid-area:1 / 5 / auto / span 2}
  .opm-band--platform .opm-stack__grid li:nth-child(1){grid-area:2 / 3 / auto / span 2}
  .opm-band--platform .opm-stack__grid li:nth-child(4){grid-area:2 / 5 / auto / span 2}
  .opm-band--platform .opm-stack__grid li:nth-child(3){grid-area:2 / 7 / auto / span 2}
  .opm-band--platform .opm-stack__grid li:nth-child(11){grid-area:3 / 2 / auto / span 2}
  .opm-band--platform .opm-stack__grid li:nth-child(12){grid-area:3 / 4 / auto / span 2}
  .opm-band--platform .opm-stack__grid li:nth-child(8){grid-area:3 / 6 / auto / span 2}
  .opm-band--platform .opm-stack__grid li:nth-child(9){grid-area:3 / 8 / auto / span 2}
  .opm-band--platform .opm-stack__grid li:nth-child(6){grid-area:4 / 1 / auto / span 2}
  .opm-band--platform .opm-stack__grid li:nth-child(7){grid-area:4 / 3 / auto / span 2}
  .opm-band--platform .opm-stack__grid li:nth-child(13){grid-area:4 / 5 / auto / span 2}
  .opm-band--platform .opm-stack__grid li:nth-child(5){grid-area:4 / 7 / auto / span 2}
  .opm-band--platform .opm-stack__grid li:nth-child(10){grid-area:4 / 9 / auto / span 2}
  .opm-band--platform .opm-flow{margin:0}
  .opm-band--platform .opm-flow--in svg{width:calc(100% + 8px);margin-left:-4px;height:64px;max-height:none}
  .opm-band--platform .opm-flow--out{width:calc(50% + 7px);margin:0 auto}
  .opm-band--platform .opm-flow--out svg{height:52px;max-height:none}
  .opm-band--platform .opm-outputs{grid-template-columns:minmax(0,1fr) minmax(0,1fr)}
}

@media(max-width:560px){
  .opm-band--platform .opm-stack{background:rgba(17,26,34,.96)}
  .opm-band--platform .opm-stack__grid li{padding:8px 10px}
  .opm-band--platform .opm-lake{max-width:none;background:rgba(201,163,92,.1)}
  .opm-band--platform .opm-flow{position:relative;height:24px;width:1px;margin:10px auto;background:rgba(201,163,92,.65)}
  .opm-band--platform .opm-flow svg{display:none}
  .opm-band--platform .opm-flow::after{content:"";position:absolute;left:-3px;bottom:0;width:7px;height:7px;border-right:1px solid var(--goldl);border-bottom:1px solid var(--goldl);transform:rotate(45deg)}
  .opm-band--platform .opm-output{padding:14px 16px}
  .morning .opm-band--platform .opm-output p{margin:0;max-width:none;font-size:14px;line-height:1.5;color:rgba(225,230,234,.8)}
  .opm-band--platform .opm-output__tag{color:rgba(225,230,234,.7);line-height:1.5}
  .opm-band--platform .opm-output--gold .opm-output__tag{color:var(--goldl)}
  .opm-band--platform .opm-stack__rule{margin:18px 0 14px}
  .morning .opm-band--platform .opm-stack__note{margin:0;font-size:14px;line-height:1.55;color:rgba(225,230,234,.78);max-width:none}
}

@media(max-width:640px){
  .morning .opm-band--platform .opm-head h2{font-size:clamp(28px,7.6vw,34px);max-width:none}
  .morning .opm-band--platform .opm-head p{max-width:none}
}

/* ============================================================
   VISUAL 3 · AIHG at work — the owner update
   Input → interpretation → synthesis → output. One destination.
   ============================================================ */
.opm-deck__stage{display:grid;grid-template-columns:minmax(0,1fr) 76px minmax(0,1fr);align-items:start;background:var(--opm-canvas);border:1px solid var(--opm-line);padding:clamp(20px,3vw,34px)}
.opm-deck__k{display:block;font-size:12px;color:var(--opm-mute);margin-bottom:14px}
.opm-deck__sources{list-style:none;margin:0;padding:0;display:grid;gap:10px}
.opm-deck__sources li{padding:13px 15px;border:1px solid var(--opm-line);background:var(--opm-white);opacity:.4;transition:opacity .5s,border-color .5s,box-shadow .5s}
.opm-deck__sources li.seen{opacity:1}
.opm-deck__sources li.now{border-color:var(--opm-gold);box-shadow:0 0 0 3px var(--opm-gold-fill)}
.opm-deck__sources .label{display:block;font-size:11.5px;color:var(--opm-mute);margin-bottom:5px}
.opm-deck__sources li.now .label{color:var(--brass-text)}
.opm-deck__sources b{display:block;font-family:var(--display);font-weight:600;font-size:16px;line-height:1.3;letter-spacing:-.012em;color:var(--ink)}
.opm-deck__read{display:block;margin-top:7px;font-family:var(--text);font-size:13.5px;line-height:1.45;color:var(--opm-mute);opacity:0;transition:opacity .5s ease}
.opm-deck__sources li.read .opm-deck__read{opacity:1}
.opm-deck__read::before{content:"AIHG ";font-family:var(--mono);font-size:11.5px;font-weight:600;letter-spacing:.12em;text-transform:uppercase;color:var(--brass-text)}
.opm-deck__rail{position:relative;align-self:stretch;display:grid;place-items:center;min-height:220px}
.opm-deck__rail::before{content:"";position:absolute;top:0;bottom:0;left:50%;width:1px;background:var(--opm-line-2);transform:translateX(-50%)}
.opm-deck__rail i{position:absolute;top:0;left:50%;width:1px;height:100%;background:var(--opm-gold);transform:translateX(-50%) scaleY(0);transform-origin:top;transition:transform 1s cubic-bezier(.4,0,.2,1)}
.opm-deck__rail.go i{transform:translateX(-50%) scaleY(1)}
.opm-deck__rail .opm-aihg{position:relative;z-index:2;background:var(--opm-canvas)}
.opm-deck__doc{border:1px solid var(--opm-line-2);background:var(--opm-white);box-shadow:0 14px 40px rgba(6,11,17,.07);transition:border-color .5s,box-shadow .5s}
.opm-deck__doc.done{border-color:var(--opm-gold)}
.opm-deck__head{padding:16px 18px;border-bottom:1px solid var(--opm-line)}
.opm-deck__head .label{display:block;font-size:11.5px;color:var(--opm-mute);margin-bottom:6px}
.opm-deck__head b{display:block;font-family:var(--display);font-weight:700;font-size:clamp(17px,1.8vw,22px);letter-spacing:-.018em;line-height:1.15;color:var(--ink)}
.opm-deck__rows{list-style:none;margin:0;padding:0}
.opm-deck__rows li{display:grid;grid-template-columns:18px minmax(0,1fr);gap:3px 11px;padding:12px 18px;border-bottom:1px solid var(--opm-line);opacity:.35;transition:opacity .5s}
.opm-deck__rows li.on{opacity:1}
/* the check is drawn inside the circle, so it stays centred at every row padding */
.opm-deck__rows li::before{content:"";grid-row:1/3;width:16px;height:16px;border-radius:50%;border:1px solid var(--opm-line-2);margin-top:2px;background-color:transparent;background-repeat:no-repeat;background-position:center;background-size:9px 7px;transition:background-color .4s,border-color .4s}
.opm-deck__rows li.on::before{background-color:var(--opm-gold);background-image:url("data:image/svg+xml,%3Csvg%20xmlns='http://www.w3.org/2000/svg'%20viewBox='0%200%209%207'%3E%3Cpath%20d='M1%203.7%203.5%206.1%208%201'%20fill='none'%20stroke='%23fff'%20stroke-width='1.6'%20stroke-linecap='round'%20stroke-linejoin='round'/%3E%3C/svg%3E");border-color:var(--opm-gold)}
.opm-deck__rows li{position:relative}
.opm-deck__rows .label{grid-column:2;font-size:11.5px;color:var(--opm-mute);letter-spacing:.14em}
.opm-deck__rows li.on .label{color:var(--brass-text)}
.opm-deck__rows b{grid-column:2;font-family:var(--text);font-weight:500;font-size:14px;line-height:1.4;color:var(--ink)}
.opm-deck__foot{display:flex;justify-content:space-between;gap:14px;align-items:baseline;padding:14px 18px;font-family:var(--mono);font-size:12px;font-weight:600;letter-spacing:.12em;text-transform:uppercase;color:var(--opm-mute)}
.opm-deck__foot .done{color:var(--brass-text);opacity:0;transition:opacity .5s}
.opm-deck__doc.done .opm-deck__foot .done{opacity:1}
.why__inner .opm-deck__caveat{margin:14px 0 0;font-size:13.5px;line-height:1.5;color:var(--muted-on-paper);max-width:74ch}
@media(max-width:960px){
  .opm-deck__stage{grid-template-columns:1fr;gap:0}
  .opm-deck__rail{min-height:0;height:64px;justify-self:center;width:64px}
  .opm-deck__rail::before,.opm-deck__rail i{top:0;bottom:0;height:100%}
}
@media(max-width:640px){.opm-deck__stage{padding:16px}.opm-deck__sources b{font-size:15px}}

/* ---------- The owner problem · margin erosion chart (from I's economics chart) ---------- */
.opm-margin{display:grid;grid-template-columns:minmax(260px,1fr) minmax(0,1.6fr);grid-template-rows:auto auto;gap:22px clamp(32px,5vw,64px);align-items:center}
.opm-margin>.opm-cap{grid-column:1;grid-row:1;align-self:end;margin:0}
.opm-margin__how{grid-column:1;grid-row:2;align-self:start;list-style:none;margin:0;padding:0}
.opm-margin__how li{display:grid;grid-template-columns:1fr;padding:9px 0;border-top:1px solid var(--line-ink);font-size:13.5px;line-height:1.45;color:var(--muted-on-paper);opacity:0;transform:translateY(4px);transition:opacity .5s ease,transform .5s ease}
.opm-margin__how b{font-family:var(--display);font-weight:500;font-size:15.5px;color:var(--ink)}
.opm-margin.in .opm-margin__how li{opacity:1;transform:none}
.opm-margin.in .opm-margin__how li:nth-child(1){transition-delay:3s}
.opm-margin.in .opm-margin__how li:nth-child(2){transition-delay:3.35s}
.opm-margin.in .opm-margin__how li:nth-child(3){transition-delay:3.7s}
.opm-margin__chart{grid-column:2;grid-row:1/3;position:relative;border:1px solid var(--opm-line);padding:16px 18px 12px;background:var(--opm-canvas)}
.opm-margin__chart svg{display:block;width:100%;height:auto;overflow:visible}
.opm-margin__ln{fill:none;stroke-width:1.5;stroke-dasharray:100;stroke-dashoffset:100;transition:stroke-dashoffset 1.3s cubic-bezier(.4,0,.2,1)}
.opm-margin__rev,.opm-margin__rev2{stroke:var(--ink)}
.opm-margin__cost{stroke:var(--steel);transition-delay:.2s}
.opm-margin__now{stroke:rgba(6,11,17,.35);stroke-width:1;stroke-dasharray:100;stroke-dashoffset:100;transition:stroke-dashoffset .5s ease 1.5s}
.opm-margin__rev2{transition-delay:1.9s}
.opm-margin__aihg{stroke:var(--gold);stroke-width:2.2;transition-delay:2.5s}
.opm-margin__gap{fill:var(--gold);opacity:0;transition:opacity 1s ease}
.opm-margin__gap--past{transition-delay:1.1s}
.opm-margin__gap--aihg{transition-delay:3.4s}
.opm-margin__t{font-family:var(--mono);font-weight:600;font-size:14px;letter-spacing:.12em;text-transform:uppercase;fill:var(--muted-on-paper);opacity:0;transition:opacity .6s ease 3.9s}
.opm-margin__t--early{transition-delay:1.5s}
.opm-margin__t--gold{fill:var(--gold)}
.opm-margin.in .opm-margin__ln,.opm-margin.in .opm-margin__now{stroke-dashoffset:0}
.opm-margin.in .opm-margin__gap--past{opacity:.16}
.opm-margin.in .opm-margin__gap--aihg{opacity:.26}
.opm-margin.in .opm-margin__t{opacity:1}
.opm-margin__legend{display:none;list-style:none;flex-wrap:wrap;gap:8px 16px;margin:12px 0 0;padding:0;font-family:var(--mono);font-size:12px;font-weight:600;letter-spacing:.12em;text-transform:uppercase;color:var(--muted-on-paper)}
.opm-margin__legend li{display:flex;align-items:center;gap:8px}
.opm-margin__legend li::before{content:"";width:18px;height:2px;background:var(--ink)}
.opm-margin__legend .cost::before{background:var(--steel)}
.opm-margin__legend .aihg::before{background:var(--gold)}
.opm-margin__legend .gap::before{height:8px;background:var(--gold);opacity:.35}
.why__inner .opm-margin__caveat{grid-column:1/-1;margin:12px 0 0;font-size:13.5px;color:var(--muted-on-paper);max-width:70ch}
@media(max-width:960px){
  .opm-margin{grid-template-columns:1fr;grid-template-rows:auto;gap:22px}
  .opm-margin>.opm-cap,.opm-margin__how,.opm-margin__chart{grid-column:1;grid-row:auto}
  .opm-margin>.opm-cap{order:1}.opm-margin__chart{order:2}.opm-margin__how{order:3}.opm-margin__caveat{order:4}
}
@media(max-width:640px){.opm-margin__t{display:none}.opm-margin__legend{display:flex}.opm-margin__chart{padding:14px 12px 12px}}

/* ---------- section ground + media ---------- */
html[data-why="m"] #why{background:#E6EAED;color:var(--ink)}
html[data-why="m"] #why .label--sage{color:var(--sage)}
.opm-people{display:grid;grid-template-columns:minmax(0,.9fr) minmax(0,1.1fr);gap:clamp(28px,5vw,64px);align-items:center}
.opm-media{position:relative;overflow:hidden;background:var(--dark);aspect-ratio:4/5;max-height:600px}
.opm-media video{position:absolute;inset:0;width:100%;height:100%;object-fit:cover;object-position:46% 50%;display:block;filter:saturate(.92)}
.opm-media__scrim{position:absolute;inset:0;background:linear-gradient(to top,rgba(6,11,17,.42),rgba(6,11,17,.06) 55%,rgba(6,11,17,.3))}
@media(max-width:760px){.opm-people{grid-template-columns:1fr;gap:22px}.opm-media{aspect-ratio:16/10;max-height:none}}

/* ---------- reduced motion: finished states ---------- */
@media(prefers-reduced-motion:reduce){
  .opm-hotel__moment,.opm-gm__card{opacity:1!important;transform:none!important}
  .opm-behaviours b{color:var(--ink)}
  .opm-behaviours li .av{filter:none;opacity:1}
  .opm-deck__sources li{opacity:1}
  .opm-deck__sources li .opm-deck__read{max-height:4.5em;opacity:1;margin-top:7px}
  .opm-deck__rows li{opacity:1}
  .opm-margin__ln,.opm-margin__now{stroke-dashoffset:0}.opm-margin__gap{opacity:.2}.opm-margin__t,.opm-margin__how li{opacity:1!important;transform:none!important}
}

/* ============================================================
   K · one type system for every section head
   ============================================================ */
.opm-head{margin-bottom:clamp(26px,3.6vh,40px);max-width:64ch}
.opm-head .label{display:block;font-size:13px;margin-bottom:clamp(14px,1.7vh,19px)}
#about .opm-head h2,#why .opm-head h2,.opm-join .opm-head h2{font-family:var(--display);font-weight:700;letter-spacing:-.024em;line-height:1.04;font-size:clamp(30px,4vw,48px);margin:0 0 14px;max-width:18ch;text-wrap:balance;color:var(--ink)}
#about .opm-head p,#why .opm-head p,.opm-join .opm-head p{margin:0;font-size:clamp(16px,1.3vw,18px);line-height:1.55;max-width:46ch;color:var(--muted-on-paper)}
.opm-head p+p{margin-top:1em}
.opm-head--wide h2{max-width:22ch!important}
.opm-block{margin-top:clamp(84px,12vh,136px)}
.opm-caveat{margin:12px 0 0;font-size:13.5px;line-height:1.5;color:var(--muted-on-paper);max-width:70ch}

/* ---------- 1 · the owner problem: erosion (chart only, one callout) ---------- */
.opm-erosion__chart{position:relative;border:1px solid var(--opm-line);padding:16px 18px 12px;background:var(--opm-canvas)}
.opm-erosion__chart svg{display:block;width:100%;height:auto;overflow:visible}
/* the takeaway leads the chart, aligned to the 2019 axis; two axis lines frame the graph */
.opm-erosion__chart{padding:22px 18px 12px}
.opm-erosion__call{margin:0 0 18px 6.5%;max-width:none;opacity:0;transform:translateY(6px);transition:opacity .6s ease 1.7s,transform .6s ease 1.7s}
.opm-erosion.in .opm-erosion__call{opacity:1;transform:none}
.opm-erosion__call b{display:block;font-family:var(--display);font-weight:700;font-size:clamp(17px,1.9vw,26px);letter-spacing:-.02em;line-height:1.12;color:var(--ink);text-wrap:balance}
.opm-erosion__call span{display:block;margin-top:8px;font-family:var(--mono);font-size:12px;font-weight:600;letter-spacing:.12em;text-transform:uppercase;color:var(--opm-mute)}
.opm-erosion__axis{stroke:var(--ink);stroke-width:1.5;stroke-linecap:round;opacity:.7}
.opm-erosion__plot{position:relative}
.opm-erosion__m{display:none;position:absolute;font-family:var(--mono);font-size:12px;font-weight:600;letter-spacing:.1em;text-transform:uppercase;color:var(--muted-on-paper);white-space:nowrap;pointer-events:none;opacity:0;transition:opacity .6s ease 1.5s}
.opm-erosion.in .opm-erosion__m{opacity:1}
.opm-erosion__m--a{left:5.5%;top:13.75%}
.opm-erosion__m--b{right:5.5%;top:13.75%}
.opm-erosion__m--rev{left:8%;top:60%;transform:translateY(-100%)}
.opm-erosion__m--gap{left:8%;top:76.3%;transform:translateY(-50%);color:var(--brass-text)}
.opm-erosion__m--cost{left:8%;top:91.5%}
@media(max-width:640px){
  /* the chart gets height so the band is readable, and real labels replace the SVG text */
  .opm-erosion__call{margin-left:0}
  .opm-erosion__chart{padding:16px 12px 14px}
  .opm-erosion__plot svg{height:270px}
  .opm-erosion__m{display:block}
}
@media(max-width:420px){.opm-erosion__m{font-size:11.5px;letter-spacing:.07em}}
@media(prefers-reduced-motion:reduce){.opm-erosion__call{opacity:1;transform:none}}

/* ---------- 2 · the opportunity: margin expansion bar ---------- */
.opm-expand{display:grid;grid-template-columns:minmax(0,1.25fr) minmax(220px,.75fr);gap:0 clamp(24px,4vw,56px);align-items:center}
.opm-expand__stage{order:1}.opm-expand__num{order:2}
.opm-expand__num .opm-caveat{margin-top:18px}
/* M: the figure does not animate. In K and L it waited 1.15s after the section
   came into view and then faded up, which landed it noticeably after everything
   around it; here it is simply present with its section. The bar beside it still
   alternates today / with AIHG. */
.opm-expand__num b{display:block;font-family:var(--display);font-weight:700;font-size:clamp(56px,7.5vw,96px);letter-spacing:-.04em;line-height:.95;color:var(--ink)}
.opm-expand__num b small{font-size:.38em;letter-spacing:-.01em;color:var(--brass-text);margin-left:.12em}
.opm-expand__num .label{display:block;font-size:13px;color:var(--brass-text);margin-top:12px}
.opm-expand__stage{position:relative;border:1px solid var(--opm-line);background:var(--opm-canvas);padding:clamp(18px,2.6vw,30px)}
.opm-expand__row{display:flex;justify-content:space-between;align-items:baseline;font-family:var(--mono);font-size:12px;font-weight:600;letter-spacing:.12em;text-transform:uppercase;color:var(--opm-mute);margin-bottom:10px}
.opm-expand__row .state{color:var(--ink);transition:color .4s}
.opm-expand.is-aihg .opm-expand__row .state{color:var(--brass-text)}
.opm-expand__bar{display:flex;height:clamp(56px,7vw,76px);border:1px solid var(--opm-line-2);background:var(--opm-white);overflow:hidden}
.opm-expand__bar i{display:block;height:100%;font-style:normal;transition:flex-basis 1s cubic-bezier(.4,0,.2,1)}
.opm-expand__bar .cost{flex:0 0 78%;background:#4F5D66;position:relative}
.opm-expand__bar .marg{flex:0 0 22%;background:var(--opm-gold-l);position:relative}
.opm-expand.is-aihg .opm-expand__bar .cost{flex-basis:72%}
.opm-expand.is-aihg .opm-expand__bar .marg{flex-basis:28%}
.opm-expand__bar span{position:absolute;left:12px;top:50%;transform:translateY(-50%);font-family:var(--mono);font-size:11.5px;font-weight:600;letter-spacing:.08em;text-transform:uppercase;white-space:nowrap}
.opm-expand__bar .cost span{color:rgba(255,255,255,.85)}
.opm-expand__bar .marg span{color:#3A2A0A}
.opm-expand__gain{position:absolute;right:0;top:0;bottom:0;width:24%;background:repeating-linear-gradient(135deg,rgba(166,128,46,.35) 0 4px,transparent 4px 9px);opacity:0;transition:opacity .5s}
.opm-expand.is-aihg .opm-expand__gain{opacity:1}
.opm-expand__tag{display:inline-flex;align-items:center;gap:10px;margin-top:14px;padding:8px 12px;border:1px solid var(--opm-gold);background:var(--opm-gold-fill);font-family:var(--mono);font-size:12px;font-weight:600;letter-spacing:.12em;text-transform:uppercase;color:var(--ink);opacity:0;transform:translateY(6px);transition:opacity .5s,transform .5s}
.opm-expand.is-aihg .opm-expand__tag{opacity:1;transform:none}
.opm-expand__tag .opm-aihg{width:26px;height:26px}.opm-expand__tag .opm-aihg svg{width:14px;height:14px}
.opm-expand__legend{display:none;list-style:none;margin:10px 0 0;padding:0;gap:16px;font-family:var(--mono);font-size:12px;font-weight:600;letter-spacing:.1em;text-transform:uppercase;color:var(--opm-mute)}
.opm-expand__legend li{display:flex;align-items:center;gap:7px}
.opm-expand__legend i{width:14px;height:10px;background:#4F5D66}.opm-expand__legend li:last-child i{background:var(--opm-gold-l)}
@media(max-width:860px){
  .opm-expand{display:flex;flex-direction:column;gap:0}
  .opm-expand>.opm-head{order:1}
  .opm-expand__num{display:contents}
  .opm-expand__num b{order:2;font-size:clamp(56px,16vw,86px)}
  .opm-expand__num .label{order:3;margin-top:10px}
  .opm-expand__stage{order:4;margin-top:24px}
  .opm-expand__num .opm-caveat--fine{order:5;margin-top:14px}
}
@media(max-width:640px){.opm-expand__bar span{display:none}.opm-expand__legend{display:flex}}

/* ---------- 4 · the GM between the property and the owner ---------- */
.opm-gm__pair{display:grid;grid-template-columns:1fr 1fr;gap:clamp(18px,2.6vw,34px);align-items:start}
.opm-gm__head{margin-bottom:12px;min-height:3.2em}
.opm-gm__head .label{display:block;font-size:12px;margin-bottom:6px;color:var(--opm-mute)}
.opm-gm__panel--after .opm-gm__head .label{color:var(--brass-text)}
.opm-gm__head b{display:block;font-family:var(--display);font-weight:700;font-size:clamp(17px,1.7vw,22px);line-height:1.14;letter-spacing:-.018em;color:var(--ink);text-wrap:balance}
.opm-gm__stage{position:relative;aspect-ratio:500/520;width:100%;background:var(--opm-canvas);border:1px solid var(--opm-line);overflow:hidden;container-type:inline-size}
.opm-gm__panel--after .opm-gm__stage{background:var(--opm-white)}
.opm-gm__svg{position:absolute;inset:0;width:100%;height:100%;overflow:visible}
.opm-gm__svg .owner{fill:none;stroke:var(--opm-line-2);stroke-width:1;stroke-dasharray:4 5}
.opm-gm__panel--after .opm-gm__svg .owner{fill:var(--opm-gold-fill);stroke:var(--opm-gold);stroke-dasharray:none}
.opm-gm__svg .lobby{fill:var(--opm-gold-fill);stroke:var(--opm-gold);stroke-width:1}
.opm-gm__svg .foot{fill:none;stroke:var(--opm-line-2);stroke-width:1;stroke-dasharray:4 5}
.opm-gm__panel--after .opm-gm__svg .foot{fill:var(--opm-gold-fill);stroke:var(--opm-gold);stroke-dasharray:none;transition:fill .45s}
.opm-gm__panel--after .opm-gm__svg .foot.pulse{fill:var(--opm-gold-fill-2)}
.opm-gm__svg .rise{stroke:var(--opm-gold);stroke-width:2;stroke-linecap:round;opacity:.55;transition:stroke-width .45s,opacity .45s}
.opm-gm__svg .rise.pulse{stroke-width:3;opacity:1}
.opm-gm__lbl{position:absolute;transform:translate(0,-50%);font-family:var(--mono);font-size:clamp(10.5px,2.3cqw,14.5px);font-weight:600;letter-spacing:.1em;text-transform:uppercase;color:var(--opm-mute);white-space:nowrap;pointer-events:none;z-index:2}
.opm-gm__panel--after .opm-gm__lbl--gold{color:var(--brass-text)}
.opm-gm__chip{position:absolute;transform:translate(-50%,-50%);padding:5px 8px;border:1px solid var(--opm-line-2);background:var(--opm-white);font-family:var(--mono);font-size:clamp(10.5px,1.95cqw,13px);font-weight:600;letter-spacing:.05em;text-transform:uppercase;color:var(--opm-mute);white-space:nowrap;transition:color .3s,border-color .3s,box-shadow .3s;z-index:3}
.opm-gm__chip.on{color:var(--ink);border-color:var(--ink);box-shadow:0 5px 16px rgba(6,11,17,.12)}
.opm-gm__chip--owner{border-style:dashed}
.opm-gm__words{position:absolute;left:4.8%;right:4.8%;display:flex;flex-direction:column;align-items:center;gap:clamp(4px,1.3cqw,7px);z-index:2}
.opm-gm__words>div{display:flex;justify-content:center;gap:clamp(5px,1.6cqw,8px)}
.opm-gm__chip--sys{position:static;transform:none;font-size:clamp(10px,2.05cqw,14px);padding:clamp(3.5px,1cqw,5.5px) clamp(6px,1.8cqw,9px);border-color:rgba(166,128,46,.5);color:rgba(6,11,17,.78)}
.opm-gm__person{position:absolute;transform:translate(-50%,-50%);display:flex;flex-direction:column;align-items:center;gap:5px;transition:left .8s cubic-bezier(.4,0,.2,1),top .8s cubic-bezier(.4,0,.2,1);z-index:4}
.opm-role{display:grid;place-items:center;width:clamp(30px,9.2cqw,46px);height:clamp(30px,9.2cqw,46px);border-radius:50%;overflow:hidden;background:#E6EAED;box-shadow:0 0 0 1.5px var(--ink)}
.opm-role svg{width:100%;height:100%}
.opm-gm__person .label{font-size:clamp(10.5px,1.9cqw,12.5px);color:var(--ink);white-space:nowrap;background:rgba(245,244,241,.92);padding:2px 6px}
.opm-gm__panel--after .opm-role{width:clamp(34px,10.8cqw,54px);height:clamp(34px,10.8cqw,54px);box-shadow:0 0 0 2px var(--opm-gold),0 0 0 9px var(--opm-gold-fill-2)}
.opm-gm__panel--after .opm-gm__person .label{background:rgba(255,255,255,.92)}
.opm-gm__guest{position:absolute;transform:translate(-50%,-50%);width:28px;height:28px;border-radius:50%;overflow:hidden;box-shadow:0 0 0 1.5px var(--opm-gold);z-index:3}
.opm-gm__guest svg{width:100%;height:100%;display:block}
.opm-gm__rows{position:absolute;z-index:3}
.opm-gm__card{padding:clamp(6px,1.9cqw,10px) clamp(6px,1.6cqw,9px);margin:0 calc(-1 * clamp(6px,1.6cqw,9px));border-top:1px solid rgba(166,128,46,.32);opacity:0;transform:translateY(8px);transition:opacity .5s,transform .5s,background .45s}
.opm-gm__card:first-child{border-top:0}
.opm-gm__card.on{opacity:1;transform:none}
.opm-gm__card.now{background:var(--opm-gold-fill-2)}
.opm-gm__card .label{display:block;font-size:clamp(10px,2cqw,13.5px);letter-spacing:.12em;color:var(--brass-text);margin-bottom:3px}
.opm-gm__card b{display:block;font-family:var(--text);font-weight:500;font-size:clamp(11.5px,2.55cqw,16px);line-height:1.3;color:var(--ink);white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
.opm-gm__out{position:absolute;padding:6px 10px;border:1px solid var(--opm-gold);background:var(--opm-white);font-family:var(--mono);font-size:clamp(10.5px,2cqw,13px);font-weight:600;letter-spacing:.1em;text-transform:uppercase;color:var(--ink);white-space:nowrap;opacity:0;transition:opacity .5s,box-shadow .45s;z-index:3}
.opm-gm__out.on{opacity:1}.opm-gm__out.now{box-shadow:0 6px 18px rgba(6,11,17,.1);background:var(--opm-gold-fill)}
#about .opm-gm__foot,#why .opm-gm__foot{margin:12px 0 0;font-family:var(--mono);font-size:12px;font-weight:600;letter-spacing:.12em;text-transform:uppercase;color:var(--opm-mute)}
.opm-gm__panel--after .opm-gm__foot{color:var(--brass-text)}
.opm-gm__mobile{display:none}
@media(max-width:960px){.opm-gm__pair{grid-template-columns:1fr;gap:34px}.opm-gm__head{min-height:0}}
@media(max-width:560px){
  .opm-gm__stage{display:none}
  .opm-gm__pair{gap:40px}
  .opm-gm__mobile{display:grid;justify-items:stretch;border:1px solid var(--opm-line);background:var(--opm-canvas);padding:18px 16px 20px}
  .opm-gm__panel--after .opm-gm__mobile{background:var(--opm-white);border-color:var(--opm-gold)}
  .opm-gm__mrow+.opm-gm__mrow,.opm-gm__mrow--tight{margin-top:16px}
  /* the reversed panel: an arrow already carries the gap, and the manager sits with what reaches them */
  .opm-gm__marrow+.opm-gm__mrow--tight{margin-top:0}
  .opm-gm__mrow+.opm-gm__mgm{margin-top:14px}
  .opm-gm__mobile .label{display:block;font-size:12px;letter-spacing:.12em;color:var(--opm-mute);margin:0 0 9px}
  .opm-gm__panel--after .opm-gm__mobile .label{color:var(--brass-text)}
  .opm-gm__mobile ul{list-style:none;margin:0;padding:0;display:flex;flex-wrap:wrap;gap:7px}
  .opm-gm__mobile li{padding:7px 10px;border:1px solid var(--opm-line-2);background:var(--opm-white);font-family:var(--mono);font-size:12px;font-weight:600;letter-spacing:.05em;text-transform:uppercase;color:var(--opm-mute)}
  .opm-gm__panel--after .opm-gm__mobile li{border-color:rgba(166,128,46,.45);color:var(--ink)}
  .opm-gm__panel--after .opm-gm__mobile li.is-out{border-color:var(--opm-gold);background:var(--opm-gold-fill);color:var(--ink)}
  /* the manager, caught in the middle / leading the hotel */
  .opm-gm__mgm{display:flex;align-items:center;gap:12px;padding:12px 14px;border:1px solid var(--ink);background:var(--opm-white)}
  .opm-gm__panel--after .opm-gm__mgm{border-color:var(--opm-gold);box-shadow:0 0 0 4px var(--opm-gold-fill)}
  .opm-gm__mgm .opm-role{width:40px;height:40px}
  .opm-gm__mgm b{display:block;font-family:var(--display);font-weight:700;font-size:15px;letter-spacing:-.012em;color:var(--ink)}
  .opm-gm__mgm small{display:block;margin-top:2px;font-family:var(--mono);font-size:11.5px;font-weight:600;letter-spacing:.1em;text-transform:uppercase;color:var(--opm-mute)}
  .opm-gm__panel--after .opm-gm__mgm small{color:var(--brass-text)}
  /* the pressure arrows */
  .opm-gm__marrow{position:relative;display:block;justify-self:center;width:1px;height:26px;margin:10px 0;background:var(--opm-line-2)}
  .opm-gm__panel--after .opm-gm__marrow{background:var(--opm-gold)}
  .opm-gm__marrow::after{content:"";position:absolute;left:50%;width:7px;height:7px;border-right:1px solid currentColor;border-bottom:1px solid currentColor;color:var(--opm-line-2);transform:translateX(-50%) rotate(45deg)}
  .opm-gm__panel--after .opm-gm__marrow::after{color:var(--brass-text)}
  .opm-gm__marrow--down::after{bottom:0}
  .opm-gm__marrow--up::after{top:0;transform:translateX(-50%) rotate(-135deg)}
  #about .opm-gm__foot,#why .opm-gm__foot{margin-top:14px;font-size:12px;line-height:1.5}

  /* ---- motion, phone only: the stages are hidden here, so the fallback carries it ---- */
  .opm-gm__mobile li{transition:color .35s,border-color .35s,box-shadow .35s,opacity .45s}
  .opm-gm__mobile li.now{color:var(--ink);border-color:var(--ink);box-shadow:0 4px 14px rgba(6,11,17,.14)}
  .opm-gm__mgm{transition:box-shadow .4s,border-color .4s,opacity .45s}
  .opm-gm__mgm.busy{box-shadow:0 0 0 5px rgba(6,11,17,.07)}
  /* a dot travels the connector in the direction the work moves */
  .opm-gm__marrow::before{content:"";position:absolute;left:50%;width:6px;height:6px;border-radius:50%;background:var(--ink);transform:translateX(-50%);opacity:0}
  .opm-gm__panel--after .opm-gm__marrow::before{background:var(--opm-gold)}
  .opm-gm__marrow--down.pulse::before{animation:opmGmDown .62s ease forwards}
  .opm-gm__marrow--up.pulse::before{animation:opmGmUp .62s ease forwards}
  @keyframes opmGmDown{0%{opacity:0;top:-3px}18%{opacity:1}100%{opacity:0;top:23px}}
  @keyframes opmGmUp{0%{opacity:0;top:23px}18%{opacity:1}100%{opacity:0;top:-3px}}
  /* the AIHG panel builds itself in order, then rests */
  .opm-gm__panel--after .opm-gm__mobile.seq li,
  .opm-gm__panel--after .opm-gm__mobile.seq .opm-gm__mgm{opacity:.26}
  .opm-gm__panel--after .opm-gm__mobile.seq li.lit,
  .opm-gm__panel--after .opm-gm__mobile.seq .opm-gm__mgm.lit{opacity:1}
  .opm-gm__panel--after .opm-gm__mobile.seq li.is-out.lit{box-shadow:0 4px 16px rgba(166,128,46,.3)}
}
@media(max-width:560px) and (prefers-reduced-motion:reduce){
  .opm-gm__panel--after .opm-gm__mobile.seq li,
  .opm-gm__panel--after .opm-gm__mobile.seq .opm-gm__mgm{opacity:1}
}
/* ---------- 5 · how AIHG changes the model: four things, one line each ---------- */
.opm-model{list-style:none;margin:0;padding:0;display:grid;grid-template-columns:repeat(4,minmax(0,1fr));gap:clamp(16px,2.4vw,32px);border-top:1px solid var(--line-ink);padding-top:26px}
.opm-model li{min-width:0}
.opm-model .label{display:block;font-size:12px;color:var(--brass-text);margin-bottom:10px}
.opm-model b{display:block;font-family:var(--display);font-weight:700;font-size:clamp(19px,1.9vw,24px);line-height:1.15;letter-spacing:-.018em;color:var(--ink);margin-bottom:8px}
#why .opm-model p{margin:0;font-size:14.5px;line-height:1.5;color:var(--muted-on-paper);max-width:none}
@media(max-width:900px){.opm-model{grid-template-columns:1fr 1fr}}
@media(max-width:560px){.opm-model{grid-template-columns:1fr}}

/* ---------- 2 · introducing AIHG: head, the four principles, then the payoff row.
   A plain stacked block (not the spine grid) — the head runs the section's own
   width, so it reads as one wide editorial column rather than a copy/visual pair. ---------- */
.opm-platform .opm-head{max-width:none}
#about .opm-platform .opm-head h2{max-width:44ch}
#about .opm-platform .opm-head p{max-width:60ch}
.opm-platform .opm-model{border-top:0!important;padding-top:0!important;margin-top:clamp(26px,3.6vh,40px)}
.opm-platform__payoff{display:grid;grid-template-columns:minmax(200px,1fr) minmax(0,2.2fr);gap:clamp(24px,4vw,56px);align-items:start;margin-top:clamp(40px,4.6vh,56px);border-top:1px solid var(--line-ink);padding-top:clamp(28px,3.6vh,40px)}
.opm-platform .opm-align{margin-top:0!important}
.opm-platform__payoff .opm-expand__num{order:0;display:block}
@media(max-width:900px){.opm-platform__payoff{grid-template-columns:1fr;gap:28px}}
@media(max-width:640px){.opm-platform .opm-head h2{max-width:none}.opm-platform .opm-head p{max-width:none}}

.opm-expand__num b small{display:inline-block}

/* ---------- 7 · what AI-native means · AINS note · Ask AIHG ---------- */
.opm-native{display:grid;grid-template-columns:minmax(0,1.3fr) minmax(280px,.9fr);gap:clamp(28px,5vw,72px);align-items:start}
.opm-ains{margin-top:clamp(26px,3.4vh,34px);max-width:52ch}
.opm-ains .label{display:block;font-size:12px;margin-bottom:8px;color:var(--opm-mute)}
#why .opm-ains p{margin:0;font-size:14.5px;line-height:1.55;color:var(--muted-on-paper);max-width:none}
.opm-ains a{color:var(--ink);text-decoration:none;border-bottom:1px solid rgba(166,128,46,.55);transition:border-color .2s}
.opm-ains a:hover{border-bottom-color:var(--opm-gold)}
.opm-ains a{white-space:nowrap}
.opm-ask{border:1px solid var(--opm-line);background:var(--opm-canvas);padding:clamp(18px,2.4vw,26px)}
.opm-ask__k{display:flex;justify-content:space-between;align-items:baseline;gap:12px;margin-bottom:14px}
.opm-ask__k .label{font-size:12px;color:var(--opm-mute)}
.opm-ask__k .soon{font-family:var(--mono);font-size:11.5px;font-weight:600;letter-spacing:.14em;text-transform:uppercase;color:var(--brass-text)}
.opm-ask__field{display:flex;align-items:center;gap:12px;padding:13px 14px;border:1px solid var(--opm-line-2);background:var(--opm-white);font-family:var(--text);font-size:15px;color:rgba(6,11,17,.42)}
.opm-ask__field .opm-aihg{width:28px;height:28px}.opm-ask__field .opm-aihg svg{width:15px;height:15px}
.opm-ask__field .cursor{margin-left:auto;width:1px;height:18px;background:var(--opm-gold);animation:opmBlink 1.1s steps(2,start) infinite}
@keyframes opmBlink{to{visibility:hidden}}
.opm-ask__chips{display:flex;flex-wrap:wrap;gap:8px;margin:12px 0 0;padding:0;list-style:none}
.opm-ask__chips li{padding:7px 11px;border:1px solid var(--opm-line);background:var(--opm-white);font-family:var(--text);font-size:13px;color:var(--muted-on-paper)}
#why .opm-ask__note{margin:12px 0 0;font-size:13px;line-height:1.5;color:var(--opm-mute);max-width:none}
@media(max-width:860px){.opm-native{grid-template-columns:1fr}}

/* ---------- 8 · the owner outcome: the chain ---------- */
.opm-impact{display:grid;grid-template-columns:minmax(0,.85fr) minmax(0,1.15fr);gap:clamp(28px,5vw,64px);align-items:center}
.opm-chainwrap{position:relative}
/* the rail runs from the first dot's centre to the last dot's centre (measured by initImpact), on the dots' own axis */
.opm-chainwrap::before{content:"";position:absolute;left:10px;top:var(--rail-top,10px);height:var(--rail-h,calc(100% - 20px));width:1px;background:var(--opm-line-2)}
.opm-chainwrap>i{position:absolute;left:10px;top:var(--rail-top,10px);width:1px;height:0;background:var(--opm-gold);transition:height 1s cubic-bezier(.4,0,.2,1)}
.opm-chain{list-style:none;margin:0;padding:0 0 0 30px;position:relative}
.opm-chain li{position:relative;padding:13px 0;border-bottom:1px solid var(--line-ink);transition:opacity .45s}
.opm-chain b{position:relative}
.opm-chain b::before{content:"";position:absolute;left:-26px;top:50%;width:11px;height:11px;border-radius:50%;background:var(--paper);border:1px solid var(--opm-line-2);transform:translateY(-50%);transition:background .4s,border-color .4s,box-shadow .4s}
.opm-chain li.on b::before{background:var(--opm-gold);border-color:var(--opm-gold)}
.opm-chain li.now b::before{box-shadow:0 0 0 5px var(--opm-gold-fill-2)}
.opm-chain b{display:block;font-family:var(--display);font-weight:700;font-size:clamp(16px,1.6vw,20px);line-height:1.2;letter-spacing:-.016em;color:rgba(6,11,17,.42);transition:color .45s}
.opm-chain li.on b{color:var(--ink)}
.opm-chain li:last-child{border-bottom:0}
.opm-chain li:last-child b{font-size:clamp(19px,2vw,25px)}
.opm-chain li.on:last-child b{color:var(--brass-text)}
.opm-chain small{display:block;margin-top:3px;font-size:13.5px;color:var(--opm-mute)}
@media(max-width:760px){.opm-impact{grid-template-columns:1fr;gap:22px}}

/* ---------- join us (its own light section after Press) ---------- */
.opm-join{background:var(--paper);color:var(--ink);border-top:1px solid var(--line-ink);padding:clamp(96px,14vh,180px) clamp(20px,4vw,56px)}
.opm-join__inner{max-width:1020px;margin:0 auto;display:grid;grid-template-columns:minmax(0,1.15fr) minmax(0,.85fr);gap:clamp(32px,6vw,88px);align-items:center}
.opm-join .opm-head{margin-bottom:clamp(20px,3vh,30px)}
/* var(--opm-gold) measures ~2.9:1 on this section's --paper (quartz) background,
   failing WCAG AA; --brass-aa (#765A20) is the same gold hue darkened for AA text
   use, already established for this exact failure mode elsewhere (Team/Advisory/Press). */
.opm-join .opm-head .label--sage{color:var(--brass-aa);font-size:16px}
.opm-join .opm-head h2{font-size:clamp(36px,5vw,64px)!important;max-width:14ch!important;margin-bottom:0!important}
.opm-join__body p{margin:0 0 16px;font-size:clamp(17px,1.4vw,19px);line-height:1.6;color:var(--muted-on-paper);max-width:44ch}
.opm-join__cta{display:inline-flex;align-items:center;gap:12px;margin-top:14px;padding:15px 24px;background:var(--goldl);color:var(--midnight);font-family:var(--mono);font-size:13.5px;font-weight:600;letter-spacing:.14em;text-transform:uppercase;text-decoration:none;transition:background .2s,color .2s}
.opm-join__cta::after{content:"\2192"}
@media(hover:hover){.opm-join__cta:hover{background:var(--gold)}}
.opm-join__cta:focus-visible{background:var(--gold);outline:2px solid var(--ink);outline-offset:3px}
/* the film: a host at work, with a quiet caption */
.opm-join__media{aspect-ratio:4/5;max-height:560px;width:100%}
.opm-join__media video{object-position:56% 50%}
.opm-join__cap{position:absolute;left:0;right:0;bottom:0;padding:clamp(18px,2.4vw,28px);z-index:2}
.opm-join__cap .label{display:block;font-size:12px;color:var(--goldl);margin-bottom:6px}
.opm-join__cap b{display:block;font-family:var(--display);font-weight:700;font-size:clamp(18px,1.7vw,22px);letter-spacing:-.016em;line-height:1.15;color:#fff}
@media(max-width:860px){.opm-join__inner{grid-template-columns:1fr;gap:36px}.opm-join__media{aspect-ratio:16/10;max-height:none}}

@media(prefers-reduced-motion:reduce){
  .opm-expand__tag,.opm-expand__gain,.opm-gm__card{opacity:1!important;transform:none!important}
  .opm-gm__out{opacity:1!important}
  .opm-expand__bar .cost{flex-basis:72%}.opm-expand__bar .marg{flex-basis:28%}
  .opm-chain li b{color:var(--ink)}.opm-chainwrap>i{height:var(--rail-h,calc(100% - 20px))}
  .opm-impact__payoff,.opm-deck__payoff{color:var(--ink)}
  .opm-line__k{color:rgba(201,163,92,.85)}
  .opm-line__row li.now,.opm-line.all .opm-line__brand{transform:none}
}

/* grid spans + the erosion chart's reveal state (same drawing rules as I's chart) */
.opm-expand>.opm-head{grid-column:1/-1}
.opm-erosion.in .opm-margin__ln,.opm-erosion.in .opm-margin__now{stroke-dashoffset:0}
.opm-erosion.in .opm-margin__gap--past{opacity:.18}
.opm-erosion.in .opm-margin__t{opacity:1}

/* ============================================================
   K · refinement pass (Eve's review)
   ============================================================ */
/* 1 · the modeled-target disclaimer reads as fine print (the page's .about__inner p rule used to lift it to body size) */
.about__inner .opm-caveat--fine,.opm-caveat--fine{margin-top:10px;font-size:12px;line-height:1.45;letter-spacing:.005em;color:var(--muted-on-paper);max-width:64ch}

/* 3 · the owner update: the payoff lands once the update is assembled */
.opm-why .opm-deck__payoff{margin:22px 0 0;font-family:var(--display);font-weight:700;font-size:clamp(19px,2vw,24px);line-height:1.15;letter-spacing:-.02em;color:rgba(6,11,17,.36);max-width:none;transition:color .6s}
.opm-why .opm-deck.done .opm-deck__payoff{color:var(--ink)}
.opm-why .opm-deck__payoff+.opm-caveat{margin-top:10px}

/* 6 · the owner outcome ends on the people */
.opm-why .opm-impact__payoff{margin:26px 0 0;padding-top:22px;border-top:1px solid var(--opm-gold);font-family:var(--display);font-weight:700;font-size:clamp(22px,2.4vw,30px);line-height:1.1;letter-spacing:-.022em;color:rgba(6,11,17,.36);max-width:28ch;text-wrap:balance;transition:color .6s}
.opm-why .opm-impact.done .opm-impact__payoff{color:var(--ink)}

/* 5 · team: compact bios while K is active (the section is shared, so everything is gated on data-why) */
html[data-why="m"] .person{grid-template-columns:96px 1fr;gap:clamp(18px,3vw,36px);padding:clamp(22px,3vh,30px) 0;align-items:start}
html[data-why="m"] .person .mono-tile{width:96px;height:96px;font-size:30px}
html[data-why="m"] .person .label{font-size:12px}
html[data-why="m"] .person h3{font-size:clamp(20px,2vw,24px);margin:4px 0 8px}
html[data-why="m"] .person p:not(.label){font-size:15px;line-height:1.5;max-width:64ch;color:rgba(6,11,17,.78)}
html[data-why="m"] .person:not(.is-open) p:not(.label){display:-webkit-box;-webkit-box-orient:vertical;-webkit-line-clamp:4;overflow:hidden}
.opm-more{display:inline-block;margin-top:10px;padding:0 0 3px;border:0;border-bottom:1px solid var(--opm-gold);background:none;font-family:var(--mono);font-size:12px;font-weight:600;letter-spacing:.14em;text-transform:uppercase;color:var(--ink);cursor:pointer;transition:color .2s}
.opm-more:hover,.opm-more:focus-visible{color:var(--brass-text);outline:none}
@media(max-width:640px){
  html[data-why="m"] .person{grid-template-columns:72px 1fr;gap:16px}
  html[data-why="m"] .person .mono-tile{width:72px;height:72px;font-size:24px}
  html[data-why="m"] .person:not(.is-open) p:not(.label){-webkit-line-clamp:3}
}

/* ============================================================
   K · the agent lane under "AIHG at work": what the proprietary agents do at each step
   ============================================================ */
.opm-story__agents{list-style:none;margin:0 0 18px;padding:0;display:grid;grid-template-columns:repeat(4,minmax(0,1fr));gap:clamp(10px,1.4vw,18px)}
.opm-story__agents li{position:relative;padding:14px 14px 16px;border:1px solid rgba(166,128,46,.35);background:var(--opm-gold-fill);transition:border-color .45s,background .45s}
.opm-story__agents li.now{border-color:var(--opm-gold);background:rgba(166,128,46,.15)}
.opm-story__agents .opm-agent{width:32px;height:32px;margin-bottom:10px}
.opm-story__agents .opm-agent svg{width:17px;height:17px}
.opm-story__agents li.on .opm-agent{background:var(--opm-gold);color:#fff}
.opm-story__agents li.now .opm-agent{box-shadow:0 0 0 5px var(--opm-gold-fill-2)}
.opm-story__agents .label{display:block;font-size:11.5px;color:var(--opm-mute);margin-bottom:6px;transition:color .45s}
.opm-story__agents li.on .label{color:var(--brass-text)}
.opm-story__agents b{display:block;font-family:var(--display);font-weight:700;font-size:clamp(14px,1.35vw,17px);line-height:1.2;letter-spacing:-.014em;color:var(--muted-on-paper);transition:color .45s;text-wrap:balance}
.opm-story__agents li.on b{color:var(--ink)}
.opm-story__agents small{display:block;margin-top:7px;font-size:13px;line-height:1.4;color:var(--opm-mute)}
/* the hand-off is to a person, not an agent */
.opm-why .opm-story__agents .av{width:32px;height:32px;margin-bottom:10px;filter:saturate(.55);opacity:.75}
.opm-why .opm-story__agents li.on .av{filter:none;opacity:1;box-shadow:0 0 0 2px var(--opm-gold)}
/* the pass from one agent to the next */
.opm-story__agents li:not(:last-child)::after{content:"";position:absolute;top:30px;left:100%;width:clamp(10px,1.4vw,18px);height:1px;background:var(--opm-line-2);transition:background .45s}
.opm-story__agents li.on:not(:last-child)::after{background:var(--opm-gold)}
.opm-story__agents li::before{content:"";position:absolute;top:30px;left:100%;width:7px;height:7px;border-radius:50%;background:var(--opm-gold);transform:translate(-50%,-50%);opacity:0;z-index:2}
.opm-story__agents li.pass::before{animation:opmPass .55s ease forwards}
@keyframes opmPass{0%{opacity:0;left:100%}15%{opacity:1}100%{opacity:0;left:calc(100% + clamp(10px,1.4vw,18px))}}
/* the signal drops to the agents; the results rise to the teams and the manager */
.opm-story__beats li::before{content:"";position:absolute;left:50%;bottom:-30px;width:7px;height:7px;border-radius:50%;background:var(--opm-gold);transform:translate(-50%,50%);opacity:0;z-index:2}
.opm-story__beats li.sig::before{animation:opmDrop .55s ease forwards}
.opm-story__beats li.rise::before{animation:opmRise .5s ease forwards}
@keyframes opmDrop{0%{opacity:0;bottom:0}15%{opacity:1}100%{opacity:0;bottom:-30px}}
@keyframes opmRise{0%{opacity:0;bottom:-30px}15%{opacity:1}100%{opacity:0;bottom:0}}

/* polish pass: the footnote sits a clear step below the claim */
.about__inner .opm-expand__num .opm-caveat--fine{margin-top:18px}

/* ============================================================
   K · mobile — each section composed for the small screen
   ============================================================ */
@media(max-width:860px){
  /* the desktop grid centres its items; a stacked column must stretch instead */
  .opm-expand{align-items:stretch}
}
@media(max-width:640px){
  /* ---- vertical rhythm: the desktop gaps are too long to scroll through ---- */
  .opm-block{margin-top:clamp(62px,9vh,84px)}
  .opm-head{margin-bottom:22px}
  #about .opm-head h2,#why .opm-head h2,.opm-join .opm-head h2{font-size:clamp(28px,7.6vw,34px);max-width:none!important;line-height:1.08}
  #about .opm-head p,#why .opm-head p,.opm-join .opm-head p{font-size:16px;max-width:none}
  .opm-head .label{font-size:12.5px;margin-bottom:10px}

  /* ---- the comparison: another tool, then AIHG, with the step between them ---- */
  .opm-tools{gap:34px}
  .opm-tools__col{position:relative;padding:20px 18px}
  .opm-tools__col:not(.opm-tools__col--aihg)::after{content:"";position:absolute;left:50%;bottom:-24px;width:9px;height:9px;border-right:1px solid var(--opm-line-2);border-bottom:1px solid var(--opm-line-2);transform:translateX(-50%) rotate(45deg)}
  .opm-tools__col li{font-size:15.5px;padding:11px 0}
  .opm-tools__col--aihg{box-shadow:0 10px 30px rgba(6,11,17,.10)}

  /* ---- above / below the line: a two-column roster, not a ragged wrap ---- */
  .morning .opm-band h2{font-size:clamp(28px,8vw,34px);max-width:none;margin:14px auto 16px}
  .morning .opm-band p{font-size:15.5px;max-width:34ch}
  .opm-band{min-height:0;padding:clamp(72px,11vh,110px) 20px}
  .opm-line{margin-top:clamp(32px,5vh,44px);gap:15px}
  .opm-line__row{display:grid;grid-template-columns:1fr 1fr;justify-items:start;gap:14px 12px;width:100%;max-width:330px}
  .opm-line__row li{font-size:14.5px;gap:8px}
  .opm .opm-line__row .av{width:32px;height:32px}
  .opm-line__k{font-size:11.5px;letter-spacing:.1em;text-align:center}
  .morning .opm-band .opm-line__below{font-size:12px;line-height:1.6;max-width:none}
  .opm-line__k{font-size:12px}
  /* the four verbs read as a grid on a small screen, so no dot ever ends a line */
  .opm-line__verbs{display:grid;grid-template-columns:1fr 1fr;gap:8px 16px;justify-items:center;width:100%;max-width:300px}
  .opm-line__verbs i+i::before{content:none}
  .opm-line__below .opm-aihg{width:34px;height:34px}

  /* ---- the operating model: four stacked ideas with their own rules ---- */
  .opm-model{gap:0;padding-top:0;border-top:0}
  .opm-model li{padding:18px 0;border-top:1px solid var(--line-ink)}
  .opm-model .label{font-size:12px;margin-bottom:7px}
  .opm-model b{font-size:21px;margin-bottom:6px}
  #why .opm-model p{font-size:15px}

  /* ---- the owner update: input, then output ---- */
  .opm-deck__stage{padding:14px}
  .opm-deck__k{font-size:12px}
  .opm-deck__sources li{padding:12px 13px}
  .opm-deck__rail{height:56px}
  .opm-deck__rows li{padding:11px 14px}
  .opm-deck__rows b{font-size:14.5px}
  .opm-deck__foot{flex-direction:column;align-items:flex-start;gap:4px}
  .opm-why .opm-deck__payoff{font-size:20px;margin-top:18px}

  /* ---- on property: the beats and their agents, edge to edge ---- */
  .opm-story__stage{padding:12px}
  .opm-story__beats li{padding:14px 13px 16px}
  .opm-story__agents li{padding:13px 13px 15px}
  .opm-story__beats b{font-size:16.5px}
  .opm-story__agents b{font-size:15px}
  .opm-story__layer{padding:14px}

  /* ---- what AI-native means ---- */
  .opm-native{gap:30px}
  .opm-ask{padding:16px}
  .opm-ask__field{font-size:14px;padding:12px}
  .opm-ask__field .cursor{display:none}
  .opm-ask__chips li{font-size:13.5px}

  /* ---- the owner outcome: image, then the chain ---- */
  .opm-impact{gap:26px}
  .opm-chain li{padding:12px 0}
  .opm-chain b{font-size:17px}
  .opm-chain li:last-child b{font-size:20px}
  .opm-why .opm-impact__payoff{font-size:24px;max-width:none;margin-top:22px;padding-top:20px}

  /* ---- join us ---- */
  .opm-join{padding:clamp(64px,9vh,96px) 20px}
  .opm-join__inner{gap:30px}
  .opm-join__body p{font-size:16.5px;max-width:none}
  .opm-join__cta{display:flex;justify-content:center;width:100%;padding:18px}
  .opm-join__cap b{font-size:19px}
}
@media(max-width:420px){
  .opm-line__row{max-width:300px;gap:13px 8px}
  .opm-line__row li{font-size:13.5px;gap:7px}
  .opm-tools__col li{font-size:15px}
}
@media(max-width:355px){.opm-line__row{grid-template-columns:1fr;justify-items:start;max-width:190px}}

/* ============================================================
   K · what changed from J. Everything else is inherited.
   ============================================================ */

/* ---- the CTA that repeats down the page ---- */
.opm-cta{display:inline-flex;align-items:center;gap:10px;margin-top:clamp(30px,4.4vh,40px);padding:15px 22px;background:var(--goldl);color:var(--midnight);font-family:var(--mono);font-size:13px;font-weight:600;letter-spacing:.13em;text-transform:uppercase;text-decoration:none;transition:background .2s,color .2s}
.opm-cta i{width:14px;height:1px;background:currentColor;position:relative;transition:width .2s}
.opm-cta i::after{content:"";position:absolute;right:0;top:-3px;width:6px;height:6px;border-right:1px solid currentColor;border-top:1px solid currentColor;transform:rotate(45deg)}
@media(hover:hover){.opm-cta:hover{background:var(--gold)}.opm-cta:hover i{width:20px}}
.opm-cta:focus-visible{background:var(--gold);outline:2px solid var(--ink);outline-offset:3px}

/* ---- 1 · what the operating model was never built for ---- */
.opm-pressure{list-style:none;margin:26px 0 0;padding:0;display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:0 clamp(18px,3vw,40px);border-top:1px solid var(--line-ink)}
.opm-pressure li{padding:18px 0 0}
.opm-pressure .label{display:block;font-size:12px;color:var(--brass-text);margin-bottom:8px}
.opm-pressure b{display:block;font-family:var(--text);font-weight:500;font-size:15.5px;line-height:1.4;color:var(--ink)}
#about .opm-erosion__end{margin:22px 0 0;font-family:var(--display);font-weight:700;font-size:clamp(19px,2vw,25px);line-height:1.15;letter-spacing:-.02em;color:var(--ink);max-width:28ch}

/* ---- 2b · how AIHG is paid ---- */
.opm-align{display:grid;grid-template-columns:minmax(0,1fr) minmax(0,1.1fr);gap:clamp(24px,4vw,56px);align-items:start;padding:clamp(24px,3vw,34px);border:1.5px solid var(--opm-gold);background:var(--opm-gold-fill)}
.opm-align__claim .label{display:block;font-size:12px;margin-bottom:12px;color:var(--brass-text)}
.opm-align__claim b{display:block;font-family:var(--display);font-weight:700;font-size:clamp(26px,3.2vw,40px);line-height:1.05;letter-spacing:-.024em;color:var(--ink);text-wrap:balance}
#about .opm-align__body p{margin:0;font-size:clamp(15px,1.3vw,17px);line-height:1.6;color:var(--muted-on-paper);max-width:46ch}
@media(max-width:760px){.opm-align{grid-template-columns:1fr;gap:18px}}

/* ---- 5 · the platforms AIHG coordinates ---- */
.opm-native{display:block}
/* the left column as one plain top-aligned stack: head, CTA, then the AINS
   footnote, spaced by their own margins only — no space-between, no row
   placement tied to the diagram's height. */
.opm-native__copy .opm-head{margin-bottom:0}
.opm-native__copy .opm-cta{margin-top:clamp(28px,3.6vh,36px)}
#about .opm-native__copy .opm-ains{margin-top:clamp(44px,5.5vh,60px)}
.opm-stack{margin:0;padding:clamp(20px,2.6vw,30px);border:1px solid var(--opm-line);background:var(--opm-canvas)}
.opm-stack__k{display:block;font-size:12px;color:var(--opm-mute);margin-bottom:8px}
.opm-stack__lede{margin:0 0 18px;font-size:13.5px;line-height:1.5;color:var(--muted-on-paper);max-width:38ch}
.opm-stack__grid{list-style:none;margin:0;padding:0;display:flex;flex-wrap:wrap;gap:9px}
.opm-stack__grid li{padding:9px 13px;border:1px solid var(--opm-line-2);background:var(--opm-white);font-family:var(--mono);font-size:12px;font-weight:600;letter-spacing:.06em;text-transform:uppercase;color:var(--opm-mute)}
.opm-stack__rule{display:block;height:1px;margin:22px 0 18px;background:linear-gradient(90deg,rgba(166,128,46,.15),var(--opm-gold),rgba(166,128,46,.15))}

/* ---------- the architecture: platforms -> Data Lake -> OS / Agents.
   Connector lines are decorative (a fixed viewBox stretched to the container,
   same technique as the margin-erosion chart) rather than anchored to each
   tag, so grouping stays intentional and nothing breaks responsively. ---------- */
.opm-flow{margin:16px 0}
.opm-flow svg{display:block;width:100%;height:auto;overflow:visible}
.opm-flow--in svg{max-height:90px}
.opm-flow--out svg{max-height:70px}
.opm-flow__line{fill:none;stroke:var(--opm-line-2);stroke-width:1.5;opacity:.6}
.opm-flow__line--gold{stroke:rgba(166,128,46,.45)}
.opm-flow__tracer{fill:none;stroke:var(--opm-gold);stroke-width:2;stroke-linecap:round;stroke-dasharray:16 84;stroke-dashoffset:100;opacity:0;animation:opmFlowTracer 6s ease-in-out infinite}
.opm-flow__tracer--gold{stroke:var(--opm-gold)}
@keyframes opmFlowTracer{0%{stroke-dashoffset:100;opacity:0}4%{opacity:1}22%{stroke-dashoffset:0;opacity:1}30%{opacity:0}100%{opacity:0}}
@media(prefers-reduced-motion:reduce){.opm-flow__tracer{animation:none;opacity:0}}

.opm-lake{margin:0 auto;max-width:320px;padding:14px 20px;text-align:center;border:1.5px solid var(--opm-gold);background:var(--opm-white)}
.opm-lake b{display:block;font-family:var(--display);font-weight:700;font-size:clamp(16px,1.6vw,19px);letter-spacing:-.014em;color:var(--ink)}

.opm-outputs{display:grid;grid-template-columns:1fr 1fr;gap:14px}
.opm-output{padding:16px 18px;border:1px solid var(--opm-line-2);background:var(--opm-white)}
.opm-output--gold{border:1.5px solid var(--opm-gold);background:var(--opm-gold-fill)}
.opm-output b{display:block;font-family:var(--display);font-weight:700;font-size:clamp(15px,1.5vw,18px);letter-spacing:-.016em;color:var(--ink);margin-bottom:6px}
.opm-output p{margin:0;font-size:13px;line-height:1.45;color:var(--muted-on-paper)}
.opm-output__tag{display:block;margin-top:10px;font-family:var(--mono);font-size:10.5px;font-weight:600;letter-spacing:.1em;text-transform:uppercase;color:var(--opm-mute)}
.opm-output--gold .opm-output__tag{color:var(--brass-text)}
@media(max-width:560px){.opm-outputs{grid-template-columns:1fr}}
.opm-stack__layer{display:flex;align-items:center;gap:14px}
.opm-stack__layer .opm-aihg{background:var(--opm-gold);color:#fff;border-color:var(--opm-gold)}
.opm-stack__layer b{display:block;font-family:var(--display);font-weight:700;font-size:clamp(16px,1.6vw,20px);line-height:1.2;letter-spacing:-.016em;color:var(--ink)}
.opm-stack__layer small{display:block;margin-top:3px;font-family:var(--mono);font-size:12px;font-weight:600;letter-spacing:.12em;text-transform:uppercase;color:var(--brass-text)}
#about .opm-stack__note{margin:16px 0 0;font-size:13px;color:var(--opm-mute);max-width:none}
#about .opm-ains{display:block;margin-top:clamp(26px,3.4vh,34px);font-size:13.5px;line-height:1.55;color:var(--muted-on-paper);max-width:66ch}
#about .opm-ains .label{display:block;font-size:12px;margin-bottom:7px;color:var(--opm-mute)}

/* ---- 6 · the conclusion of what AI-native means: the time it gives back ---- */
.opm-time{margin-top:clamp(38px,5.4vh,56px)}
.opm-time > .label{display:block;font-size:12px;margin-bottom:clamp(14px,1.7vh,19px)}
.opm-time__lead{display:block;font-family:var(--display);font-weight:700;font-size:clamp(22px,2.6vw,32px);line-height:1.1;letter-spacing:-.022em;color:var(--ink);max-width:22ch;text-wrap:balance;margin-bottom:24px}
.opm-time__list{list-style:none;margin:0;padding:0;display:grid;grid-template-columns:repeat(4,minmax(0,1fr));gap:clamp(14px,2vw,26px)}
.opm-time__list .label{display:block;font-size:12px;color:var(--brass-text);margin-bottom:9px}
.opm-time__list b{display:block;font-family:var(--display);font-weight:700;font-size:clamp(17px,1.8vw,22px);line-height:1.12;letter-spacing:-.02em;color:var(--ink)}
@media(max-width:700px){.opm-time__list{grid-template-columns:1fr 1fr;gap:18px}}

/* ---- 6b · the same change, across the hotel ---- */
.opm-reach{margin-top:clamp(28px,4vh,44px);padding-top:24px;border-top:1px solid var(--line-ink)}
.opm-reach > .label{display:block;font-size:12px;color:var(--brass-text);margin-bottom:18px}
.opm-reach__list{list-style:none;margin:0;padding:0;display:grid;grid-template-columns:repeat(4,minmax(0,1fr));gap:clamp(16px,2.4vw,30px)}
.opm-reach__list li{min-width:0}
.opm-why .opm-reach__list .av{width:34px;height:34px;margin-bottom:11px}
.opm-reach__list .label{display:block;font-size:12px;color:var(--opm-mute);margin-bottom:7px}
.opm-reach__list b{display:block;font-family:var(--text);font-weight:500;font-size:14.5px;line-height:1.4;color:var(--ink)}
@media(max-width:860px){.opm-reach__list{grid-template-columns:1fr 1fr;gap:22px}}
@media(max-width:460px){.opm-reach__list{grid-template-columns:1fr}}

/* ---- 7 · the owner update passes through people ---- */
.opm-deck__loop{list-style:none;margin:0;padding:14px 18px;display:flex;flex-wrap:wrap;align-items:center;gap:8px 12px}
.opm-deck__loop li{display:flex;flex-direction:column;gap:2px;opacity:.4;transition:opacity .5s}
.opm-deck__doc.done .opm-deck__loop li{opacity:1}
.opm-deck__loop li+li{padding-left:22px;position:relative}
.opm-deck__loop li+li::before{content:"";position:absolute;left:6px;top:50%;width:7px;height:7px;border-right:1px solid var(--opm-line-2);border-top:1px solid var(--opm-line-2);transform:translateY(-50%) rotate(45deg)}
.opm-deck__loop .label{font-size:11px;letter-spacing:.12em;color:var(--opm-mute)}
.opm-deck__loop b{font-family:var(--text);font-weight:500;font-size:13.5px;line-height:1.25;color:var(--ink)}
.opm-deck__loop .done b{color:var(--brass-text)}

/* ---- 9 · the outcome comes back around ---- */
.opm-chainwrap--loop{padding-bottom:4px}
/* the return sits on the dots' own axis: a cycle mark where the next dot would be */
#why .opm-chain__loop{position:relative;display:flex;align-items:center;gap:12px;margin:0;padding:16px 0 0 30px;font-family:var(--mono);font-size:12px;font-weight:600;letter-spacing:.12em;text-transform:uppercase;color:var(--brass-text);max-width:none}
.opm-chain__loopmark{position:absolute;left:-1px;top:14px;width:22px;height:22px;display:block;color:var(--brass-text)}
.opm-chain__loopmark svg{width:100%;height:100%;display:block}

/* ---- 2c · the comparison cue: both columns light the same row together ---- */
.opm-tools__col li{transition:color .45s}
.opm-tools__col li::before{transition:transform .45s,opacity .45s,box-shadow .45s}
.opm-tools__col li.seen{color:var(--ink)}
.opm-tools__col li.now::before{transform:scale(1.6);opacity:1}
.opm-tools__col--aihg li.now::before{box-shadow:0 0 0 4px var(--opm-gold-fill-2)}
.opm-tools__col:not(.opm-tools__col--aihg) li.now::before{box-shadow:0 0 0 4px rgba(87,102,109,.16)}
@media(prefers-reduced-motion:reduce){.opm-tools__col li{color:var(--ink)}.opm-tools__col li.now::before{transform:none}}

/* ---- the loop line only reads once the chain has completed ---- */
.opm-chain__loop{opacity:0;transform:translateY(4px);transition:opacity .6s ease,transform .6s ease}
.opm-impact.looped .opm-chain__loop{opacity:1;transform:none}
@media(prefers-reduced-motion:reduce){.opm-chain__loop{opacity:1;transform:none}}

/* ============================================================
   K · mobile for the blocks K adds
   ============================================================ */
@media(max-width:760px){
  /* the three pressures stack; three narrow columns shredded the lines */
  .opm-pressure{grid-template-columns:1fr;gap:0;margin-top:22px}
  .opm-pressure li{padding:14px 0;border-bottom:1px solid var(--line-ink);display:grid;grid-template-columns:minmax(88px,auto) 1fr;gap:4px 14px;align-items:baseline}
  .opm-pressure li:last-child{border-bottom:0}
  .opm-pressure .label{margin-bottom:0;font-size:12px}
  .opm-pressure b{font-size:15px}
  #about .opm-erosion__end{font-size:clamp(18px,4.8vw,22px);max-width:none;margin-top:18px}
  /* every CTA is a full-width target on a phone */
  .opm-cta{display:flex;justify-content:center;text-align:center;width:100%;padding:17px 18px;margin-top:26px}
  .opm-cta i{flex:none}
  /* how we are paid */
  .opm-align{padding:20px 18px}
  .opm-align__claim b{font-size:clamp(24px,6.4vw,30px)}
  #about .opm-align__body p{font-size:16px}
  /* the platforms row */
  .opm-stack{padding:18px 16px}
  .opm-stack__grid{gap:7px}
  .opm-stack__grid li{padding:8px 10px;font-size:11.5px;letter-spacing:.04em}
  .opm-stack__layer{align-items:flex-start;gap:12px}
  .opm-stack__layer b{font-size:16px}
  .opm-stack__layer small{font-size:11.5px;letter-spacing:.09em}
  /* what it gives back */
  .opm-time{margin-top:32px}
  .opm-time__lead{font-size:clamp(21px,5.6vw,26px);max-width:none;margin-bottom:20px}
  .opm-time__list b{font-size:17px}
  /* the same change, across the hotel */
  .opm-reach{margin-top:30px;padding-top:22px}
  .opm-reach__list b{font-size:14px}
  .opm-why .opm-reach__list .av{width:30px;height:30px;margin-bottom:9px}
  /* the owner update passes through people */
  .opm-deck__loop{flex-direction:column;align-items:flex-start;gap:0;padding:12px 14px}
  .opm-deck__loop li+li{padding:10px 0 0 0;margin-top:8px;border-top:1px solid var(--opm-line)}
  .opm-deck__loop li+li::before{display:none}
  /* the loop-back line */
  #why .opm-chain__loop{font-size:11.5px;letter-spacing:.09em;padding-top:14px}
}
@media(max-width:420px){
  .opm-pressure li{grid-template-columns:1fr;gap:5px}
  .opm-stack__grid li{font-size:11px;padding:7px 9px}
}

/* the back-office chips sit in a row, so they cannot overlap as labels change length */
.opm-gm__chiprow{position:absolute;transform:translate(0,-50%);display:flex;align-items:center;gap:6px;z-index:3}
.opm-gm__chiprow .opm-gm__chip{position:static;transform:none}

/* ============================================================
   L · desktop composition
   ------------------------------------------------------------
   Everything above is K. From here down is what makes L: a wider
   section container with real gutters, a twelve-column grid inside
   each block so copy, comparisons and diagrams can take different
   widths, the diagrams that carry a section allowed to anchor it,
   and a higher floor on the smallest type (applied to K's rules
   above by a mapping pass, and to the shared page chrome here).
   All of it sits behind min-width:1140px, so below that L is K.
   ============================================================ */
:root{--opm-max:1320px;--opm-gutter:clamp(24px,5vw,88px);--opm-gap:clamp(20px,2.4vw,36px)}

/* ---- the smallest type, site-wide chrome (the option blocks were raised in place) ---- */
html[data-version="M"] .label{font-size:12px}
html[data-version="M"] .nav__links a{font-size:13px}
html[data-version="M"] .btn{font-size:13px}
html[data-version="M"] .adv-card .company,html[data-version="M"] .press-item .outlet{font-size:12.5px}
html[data-version="M"] .press-item .date{font-size:13.5px}
html[data-version="M"] .footer__legal,html[data-version="M"] .footer nav a{font-size:13.5px}
html[data-version="M"] .cd__label{font-size:12px}
html[data-version="M"] .cd__req,html[data-version="M"] .cd__opt{font-size:11px}
html[data-version="M"] .cd__hint,html[data-version="M"] .cd__err,html[data-version="M"] .cd__fine{font-size:13px}
html[data-version="M"] .cd__intro .label{font-size:12px}
/* The team bios' "Read more" toggle is shared across every option and was never
   renamed when this file was cloned from L — the button markup and initTeam() in
   option-m.js both still use .opj-more, so this keeps that name. Its base style
   used to come from option-j.css; ported here so option-m.css does not depend on
   any archived file (v13/archive/). Same var(--opj-gold) value, aliased to this
   file's own --opm-gold rather than re-declaring the variable. */
/* padding-top grows the clickable box to meet the WCAG 2.5.8 24px target-size
   minimum (was 18px tall); margin-top is reduced by the same 6px so the visible
   "READ MORE" text and its underline sit exactly where they did before. */
.opj-more{display:inline-block;margin-top:4px;padding:6px 0 3px;border:0;border-bottom:1px solid var(--opm-gold);background:none;font-family:var(--mono);font-size:11px;font-weight:600;letter-spacing:.14em;text-transform:uppercase;color:var(--ink);cursor:pointer;transition:color .2s}
.opj-more:hover,.opj-more:focus-visible{color:var(--brass-text);outline:none}
html[data-version="M"] .opj-more{font-size:12px}
/* K set this inline on the tools head; L drops the inline span so the desktop rule can place the head beside the cards,
   and carries it here so every width below the desktop grid keeps K's layout exactly */
html[data-about="m"] .opm-tools>.opm-head{grid-column:1/-1}   /* the team's Read more buttons are bound by J's script and carry its class */

/* from 1140 the wider container is never narrower than K's 1020 (5vw gutters at 1140 leave 1026) */
@media(min-width:1140px){
  /* ---- the container: wider, centred, with gutters that grow with the screen ---- */
  html[data-version="M"] .about,html[data-version="M"] .why,html[data-version="M"] .lead,
  html[data-version="M"] .advisory,html[data-version="M"] .press,html[data-version="M"] .opm-join{padding-left:var(--opm-gutter);padding-right:var(--opm-gutter)}
  html[data-version="M"] .about__inner,html[data-version="M"] .why__inner,html[data-version="M"] .lead__inner,
  html[data-version="M"] .advisory__inner,html[data-version="M"] .press__inner,html[data-version="M"] .opm-join__inner{max-width:var(--opm-max)}

  /* ---- rhythm: a touch more air between blocks at the larger scale ---- */
  html[data-about="m"] .opm-block,html[data-why="m"] .opm-block{margin-top:clamp(96px,13vh,150px)}

  /* #opmDeck is hidden for launch (see index.html); an id beats this rule's
     display:grid so the section stays off even inside this grid list. */
  #opmDeck[hidden]{display:none}

  /* ---- the twelve-column grid every block composes on ---- */
  html[data-about="m"] .opm-erosion,html[data-about="m"] .opm-expand,html[data-about="m"] .opm-tools,
  html[data-about="m"] .opm-modelwrap,html[data-about="m"] .opm-native,
  html[data-why="m"] .opm-gm,html[data-why="m"] .opm-deck,html[data-why="m"] .opm-story,html[data-why="m"] .opm-impact{
    display:grid;grid-template-columns:repeat(12,minmax(0,1fr));column-gap:var(--opm-gap);row-gap:0
  }

  /* ---- heads. Copy that sits over a wide visual takes nine columns, with headline and paragraph
     widened to match; copy that sits beside a visual keeps its own column. ---- */
  html[data-about="m"] .opm-head--wide h2,html[data-why="m"] .opm-head--wide h2{max-width:24ch!important}
  html[data-about="m"] #about .opm-head p,html[data-why="m"] #why .opm-head p{max-width:56ch}
  html[data-about="m"] .opm-modelwrap>.opm-head,html[data-about="m"] .opm-native>.opm-head,html[data-about="m"] .opm-expand>.opm-head,
  html[data-why="m"] .opm-gm>.opm-head,html[data-why="m"] .opm-deck>.opm-head,html[data-why="m"] .opm-story>.opm-head{grid-column:1/10}

  /* 1 · the owner problem — a simple chart, so it sits beside its copy: five columns of copy, seven of chart.
     The three pressures run beneath both as a supporting row. */
  html[data-about="m"] .opm-erosion{align-items:center}
  html[data-about="m"] .opm-erosion>.opm-head{grid-column:1/6;grid-row:1;margin-bottom:0;padding-right:clamp(0px,1.5vw,24px)}
  html[data-about="m"] .opm-erosion>.opm-head h2{max-width:14ch!important}
  html[data-about="m"] .opm-erosion>.opm-erosion__chart{grid-column:6/-1;grid-row:1}
  html[data-about="m"] .opm-erosion>.opm-pressure{grid-column:1/-1;grid-row:2;margin-top:clamp(40px,4.6vh,56px)}
  /* .opm-erosion__end now lives inside .opm-head (moved there so it reads with the
     copy, right after the intro paragraph) and is no longer a grid child of .opm-erosion,
     so it takes no placement here. This rule only lifts K's 28ch cap (set on #about, so
     it needs the id to beat it) to the copy column's own width. */
  html[data-about="m"] #about .opm-erosion__end{max-width:none}
  html[data-about="m"] .opm-erosion__chart{padding:24px 22px 18px}
  html[data-about="m"] .opm-erosion__call{margin-left:4%}
  /* beside the copy the chart's own SVG text would fall under the type floor, so the HTML labels the phone uses take over */
  html[data-about="m"] .opm-erosion__plot svg{height:clamp(300px,22vw,380px)}
  html[data-about="m"] .opm-margin__t{display:none}
  html[data-about="m"] .opm-erosion__m{display:block}

  /* 2 · the opportunity — the figure leads in the first four columns, the bar runs the other eight */
  html[data-about="m"] .opm-expand{gap:0 var(--opm-gap);align-items:center}
  html[data-about="m"] .opm-expand>.opm-head{grid-row:1}
  html[data-about="m"] .opm-expand>.opm-expand__num{grid-column:1/5;grid-row:2;order:0;padding-left:0}
  html[data-about="m"] .opm-expand>.opm-expand__stage{grid-column:5/-1;grid-row:2;order:0}
  html[data-about="m"] .opm-expand__bar{height:clamp(64px,5.2vw,88px)}

  /* 3 · another tool vs AIHG — the comparison is simple, so it sits beside the copy: five columns, then the two cards */
  html[data-about="m"] .opm-tools{grid-template-columns:minmax(0,5fr) minmax(0,3.5fr) minmax(0,3.5fr);gap:0 var(--opm-gap);align-items:center}
  html[data-about="m"] .opm-tools>.opm-head{grid-column:1;grid-row:1;margin-bottom:0;padding-right:clamp(0px,1.5vw,24px)}
  html[data-about="m"] .opm-tools>.opm-tools__col{grid-column:2;grid-row:1;margin-top:0}
  html[data-about="m"] .opm-tools>.opm-tools__col--aihg{grid-column:3;grid-row:1}
  html[data-about="m"] .opm-tools__col{padding:clamp(22px,2.2vw,30px)}

  /* 5 · the model — copy over the four parts, at a width that matches them */
  html[data-about="m"] .opm-modelwrap>.opm-model{grid-column:1/-1}
  html[data-about="m"] .opm-model{gap:clamp(24px,3vw,44px);padding-top:30px}

  /* 6 · what AI-native means — one grouped section. The platform stack is dense enough to run wide, and its closing
     line now carries what the model gives back (time); the AINS note sits directly beneath, then the CTA. */
  html[data-about="m"] .opm-native>.opm-stack{grid-column:1/-1}
  html[data-about="m"] .opm-native>.opm-ains{grid-column:1/9;margin-top:20px}
  html[data-about="m"] .opm-stack{padding:clamp(26px,2.6vw,36px)}
  html[data-about="m"] .opm-stack__grid{gap:10px}
  html[data-about="m"] #about .opm-stack__note{font-size:15px;line-height:1.55;color:var(--muted-on-paper);max-width:64ch;margin-top:18px}
  html[data-about="m"] .opm-native>.opm-cta{grid-column:1/-1;justify-self:start;margin-top:clamp(30px,3.6vh,42px)}

  /* 4 · the GM — the pair of stages is the section's primary visual */
  html[data-why="m"] .opm-gm>.opm-gm__pair{grid-column:1/-1}
  html[data-why="m"] .opm-gm>.opm-reach{grid-column:1/-1}
  html[data-why="m"] .opm-gm__pair{gap:clamp(24px,3vw,48px)}
  html[data-why="m"] .opm-reach__list{gap:clamp(20px,2.6vw,40px)}

  /* the GM intro copy read narrower than the TODAY/WITH AIHG pair beneath it;
     widen it (scoped to #opmGm only) to reach the pair's own column boundary.
     The shared .opm-head/.opm-head--wide rules — and .opm-story below — are untouched. */
  html[data-why="m"] #opmGm>.opm-head{max-width:660px}
  html[data-why="m"] #opmGm>.opm-head h2{max-width:none!important}
  html[data-why="m"] #opmGm>.opm-head p{max-width:none!important}

  /* 7 · the owner update — the stage anchors, the payoff sits beneath at full width */
  html[data-why="m"] .opm-deck>.opm-deck__stage{grid-column:1/-1}
  html[data-why="m"] .opm-deck>.opm-deck__payoff,html[data-why="m"] .opm-deck>.opm-caveat{grid-column:1/-1}
  html[data-why="m"] .opm-deck__stage{grid-template-columns:minmax(0,1fr) 88px minmax(0,1fr);padding:clamp(26px,2.8vw,40px)}
  html[data-why="m"] .opm-deck__sources{gap:12px}

  /* 8 · on property — four beats over four agents, given the room to read */
  html[data-why="m"] .opm-story>.opm-story__stage{grid-column:1/-1}
  html[data-why="m"] .opm-story__stage{padding:clamp(24px,2.6vw,36px)}
  html[data-why="m"] .opm-story__beats,html[data-why="m"] .opm-story__agents{gap:clamp(14px,1.7vw,26px)}
  html[data-why="m"] .opm-story__beats li{padding:18px 18px 20px}
  html[data-why="m"] .opm-story__agents li{padding:16px 16px 18px}

  /* 9 · the owner outcome — the film takes five columns, the chain the other seven */
  html[data-why="m"] .opm-impact{gap:0 var(--opm-gap);align-items:center}
  html[data-why="m"] .opm-impact>.opm-media{grid-column:1/6;max-height:640px}
  html[data-why="m"] .opm-impact>div{grid-column:6/-1}

  /* ---- the dark band: the roster spreads across a wider stage ---- */
  html[data-approach="m"] .opm-band__content{max-width:1080px}
  html[data-approach="m"] .opm-line{max-width:1080px;gap:22px}
  html[data-approach="m"] .opm-line__row{gap:18px 40px}
  html[data-approach="m"] .opm-line__row li{font-size:17px}
  html[data-approach="m"] .opm .opm-line__row .av{width:32px;height:32px}

  /* ---- join us ---- */
  html[data-why="m"] .opm-join__inner{gap:clamp(40px,6vw,104px)}

  /* ---- team: two bios across at desktop, each at a reading width. The bios are direct
     children of .lead__inner after the section's label and heading, so the inner is the grid. ---- */
  html[data-why="m"] .lead__inner{display:grid;grid-template-columns:1fr 1fr;column-gap:clamp(36px,4vw,72px);align-items:start}
  html[data-why="m"] .lead__inner>.label,html[data-why="m"] .lead__inner>h2{grid-column:1/-1}
  html[data-why="m"] .lead__inner>.person{grid-template-columns:96px 1fr;min-width:0}
  /* a title such as "Founding Partner · Head of Data and Integrations" must wrap in a half-width column */
  html[data-why="m"] .lead__inner>.person .label{white-space:normal}
}


/* ============================================================
   M · alternating editorial layout
   ------------------------------------------------------------
   Everything above this point is Option L with the prefix swapped.
   From here down is what makes M: the major storytelling sections
   are recomposed as side-by-side rows whose copy column alternates
   left and right down the page. The copy column moves; the text
   inside it never does -- headlines, labels, paragraphs, lists and
   CTAs stay left-aligned in every row. Copy always precedes its
   visual in the DOM, so the phone and the screen reader get copy
   first no matter which side the desktop row puts it on.
   ============================================================ */

/* ============================================================
   M · the alternating spine — SHARED SYSTEM LAYER
   ------------------------------------------------------------
   Appended after line 994. Nothing above is edited. Option L is
   untouched. This layer is layout only: grid, gap, margin,
   padding, alignment and measure. It contains no colour, no type
   size, no opacity, no transform, no transition, no container
   query and no text-align.

   The idea: every storytelling row is the same grid, and a row
   changes side by aliasing three custom properties. The copy
   column itself is placed ONCE, here, for every row — so a
   per-section rule never writes a copy placement and the copy
   edge lands on the identical pixel down the whole page.
   ============================================================ */

/* ---- 1 · tokens. Hosted on the <html> slot attributes rather than :root so nothing
   reaches J, K or L; all four attributes live on the same element, so any one of them
   defines the set. The container tokens (--opm-max / --opm-gutter / --opm-gap) are
   inherited from line 867 and are deliberately NOT redeclared. ---- */
html[data-version="M"],html[data-about="m"],html[data-why="m"],html[data-approach="m"]{
  /* breathing room between a copy column and the gutter it faces, on top of --opm-gap */
  --opm-rowpad:clamp(12px,1.5vw,24px);

  /* the three presets. A row picks exactly one by aliasing --opm-copy / --opm-vis / --opm-pad. */
  --opm-copy-l:row-start / mid;    --opm-vis-l:mid / row-end;    --opm-pad-l:0 var(--opm-rowpad) 0 0;
  --opm-copy-r:wide / row-end;     --opm-vis-r:row-start / wide; --opm-pad-r:0 0 0 var(--opm-rowpad);
  --opm-copy-lw:row-start / wide;  --opm-vis-lw:wide / row-end;  /* film preset, copy left, 7/5 — impact only: its film is height-capped, so a wider column would only add empty space */

  /* vertical rhythm BETWEEN blocks */
  --opm-step-tight:clamp(60px,8vh,96px);
  --opm-step:clamp(96px,13vh,150px);
  --opm-step-open:clamp(132px,17vh,196px);

  /* attachment WITHIN a row, and of a band to the row above it. Roughly a third of a block
     step — that ratio is the whole mechanism by which a full-width element reads as part of
     the row above rather than as a new section. */
  --opm-tail:clamp(30px,3.6vh,48px);        /* a supporting row beneath its pair */
  --opm-tail-wide:clamp(44px,5vh,64px);     /* a card system, a large diagram, or an attached band */
  --opm-tail-tight:clamp(16px,2vh,26px);    /* a closing line, caption or footnote hanging off a tail */

  /* measure guards for copy that sits beside a visual */
  --opm-lede:16ch;
  --opm-measure:50ch;
}

@media(min-width:1140px){

  /* ---- 2 · the spine. Twelve tracks, named. mid = line 6 (5/12), wide = line 8 (7/12).
     The numeric lines 1..13 still resolve, so every inherited rule at 886-994 keeps working
     and can be superseded one row at a time rather than all at once. .opm-align is absent on
     purpose: it is a sibling band with its own two-column card layout, not a row. ---- */
  html[data-about="m"] .opm-erosion,
  html[data-about="m"] .opm-modelwrap,html[data-about="m"] .opm-native,
  html[data-why="m"] .opm-impact,
  html[data-why="m"] .opm-join__inner{
    display:grid;
    grid-template-columns:[row-start] repeat(5,minmax(0,1fr)) [mid] repeat(2,minmax(0,1fr)) [wide] repeat(5,minmax(0,1fr)) [row-end];
    column-gap:var(--opm-gap);
    row-gap:0;
    align-items:var(--opm-row-align,start);
  }

  /* tools keeps its bespoke track list — the two comparison cards must not be squeezed to
     satisfy a twelve-track rhythm — but it declares the same line names, so its copy edge
     lands on the identical pixel as every other row. */
  html[data-about="m"] .opm-tools{
    display:grid;
    grid-template-columns:[row-start] minmax(0,5fr) [mid] minmax(0,3.5fr) minmax(0,3.5fr) [row-end];
    column-gap:var(--opm-gap);
    row-gap:0;
    align-items:var(--opm-row-align,start);
  }

  /* ---- 3 · no ordering, ever. Visual order is grid placement and nothing else, so the
     reading order and the accessibility order cannot drift apart. This also neutralises K's
     .opm-expand__stage{order:1} / .opm-expand__num{order:2} inside the spine. ---- */
  html[data-about="m"] .opm-erosion>*,html[data-about="m"] .opm-tools>*,
  html[data-about="m"] .opm-modelwrap>*,html[data-about="m"] .opm-native>*,
  html[data-why="m"] .opm-impact>*,html[data-why="m"] .opm-join__inner>*{order:0;min-width:0}

  /* ---- 4 · THE COPY COLUMN, placed once for all eleven rows. It is always the row's first
     element child: .opm-head in the nine figure/div rows, the unclassed copy div in impact,
     .opm-join__copy in join. margin-bottom:0 kills the shared .opm-head gap, which would
     otherwise hang under the last paragraph inside a centred row.
     (0,3,1) — ties L's `.opm-X>.opm-head` rules and wins on source order.
     A row that has not yet aliased --opm-copy simply auto-places, which is K's reading order. ---- */
  html[data-about="m"] .opm-erosion>:first-child,
  html[data-about="m"] .opm-tools>:first-child,html[data-about="m"] .opm-modelwrap>:first-child,
  html[data-about="m"] .opm-native>:first-child,
  html[data-why="m"] .opm-impact>:first-child,html[data-why="m"] .opm-join__inner>:first-child{
    grid-column:var(--opm-copy);
    grid-row:var(--opm-copy-row,1);
    padding:var(--opm-pad);
    margin-bottom:0;
    min-width:0;
  }

  /* ---- 5 · measure. A five-track column is 412px at 1140 and 529px at 1728, so L's 24ch
     headline cap and 56ch paragraph cap stop doing any work and the copy looks under-set.
     These bring both back to a column measure. !important is required only because
     .opm-head--wide h2 is itself !important; it is the single exception in this layer.
     impact and join are excluded: their heads carry their own caps (impact's 18ch base,
     join's three !important declarations at line 531) and are correct as they stand. ---- */
  html[data-about="m"] .opm-erosion>:first-child h2,
  html[data-about="m"] .opm-tools>:first-child h2,html[data-about="m"] .opm-modelwrap>:first-child h2,
  html[data-about="m"] .opm-native>:first-child h2{
    max-width:var(--opm-lede)!important
  }
  html[data-about="m"] #about .opm-head p{max-width:var(--opm-measure)}
  /* the opportunity keeps Option L's composition, so it keeps L's paragraph measure too.
     The rule above carries #about, so this one has to as well. */
  html[data-about="m"] #about .opm-expand>.opm-head p{max-width:56ch}
  /* in the why section only the owner outcome is still a row of M's own; the general manager,
     the owner update and the coordinated operation keep Option L's composition, so they keep
     L's 56ch paragraph measure from line 908 rather than the narrow-column one. */
  html[data-why="m"] #why .opm-impact .opm-head p{max-width:var(--opm-measure)}

  /* ---- 6 · vertical alignment. Default is top. A row opts into centring by setting
     --opm-row-align:center in its own preset rule — centre where the two columns are within
     about a quarter of each other's height, top-align where the copy carries a long paragraph
     or a detailed structure. Never align-items:stretch, never a min-height or height on a row
     or a column: the shorter column simply ends. No empty space is manufactured to square a
     row off. (Assigned per the contract: centre = erosion, expand, tools, impact, join;
     top = modelwrap, native, gm, deck, story.) ---- */

  /* ---- 7 · horizontal alignment is not a variable. Copy is left-aligned in every row,
     including the rows whose copy column sits on the right. A side flip is grid-column and
     nothing else — this layer contains no text-align, no direction, no *-reverse, no
     grid-auto-flow:dense and no order other than the reset above. ---- */

  /* ---- 8 · the row patterns a per-section rule writes. Three lines and no more:
       COPY LEFT
         html[data-about="m"] .opm-native{--opm-copy:var(--opm-copy-l);--opm-vis:var(--opm-vis-l);--opm-pad:var(--opm-pad-l)}
       COPY RIGHT
         html[data-about="m"] .opm-modelwrap{--opm-copy:var(--opm-copy-r);--opm-vis:var(--opm-vis-r);--opm-pad:var(--opm-pad-r)}
       FILM (impact, join only — 7 copy / 5 visual, so the 4:5 shot keeps its portrait crop)
         html[data-why="m"] .opm-impact{--opm-copy:var(--opm-copy-lw);--opm-vis:var(--opm-vis-lw);--opm-pad:var(--opm-pad-l);--opm-row-align:center}
     Then every REMAINING direct child gets an explicit grid-column AND grid-row, taking
     var(--opm-vis) for the visual. A stacked copy column sets --opm-copy-row:1/3 on the row.
     Nothing may rely on auto-placement, and no section may set grid-template-columns. ---- */

  /* ---- 9 · the full-width tail. A tail is a direct child of the row that spans the
     container on its own grid row. The grid is row-gap:0, so the gap is an explicit
     margin-top and that margin is what makes the tail read as part of the row above:
       …>.opm-pressure{grid-column:row-start / row-end;grid-row:2;margin-top:var(--opm-tail)}
       …>.opm-erosion__end{grid-column:row-start / row-end;grid-row:3;margin-top:var(--opm-tail-tight)}
     --opm-tail for a supporting row, --opm-tail-wide for a card system or a large diagram,
     --opm-tail-tight for a closing line or footnote hanging off the tail above it. Never a
     block-scale value on a tail, or the tail reads as a new section. ---- */

  /* ---- 10 · block rhythm. The inherited margin at line 894 is one value for all nine
     blocks, which is the page's only source of sameness. These break it so the rows are not
     all the same distance apart: the second movement opens, an answer sits close to its
     question, and the closing row is given air. margin-top only, (0,2,1), appended — line 894
     is not edited. ---- */
  html[data-about="m"] .opm-tools{margin-top:var(--opm-step-open)}
  html[data-about="m"] .opm-modelwrap{margin-top:var(--opm-step-tight)}
  html[data-why="m"] .opm-impact{margin-top:var(--opm-step-open)}

  /* the alignment band is a SIBLING block, not a row: it keeps its own gold two-column card
     at full container width and is welded to the expand row above by margin alone. */
  html[data-about="m"] .opm-align{margin-top:var(--opm-tail-wide)}
}

/* =============================================================
   M · ROW PLACEMENT — 1 erosion · 2 expand · 2b align
   Appended after the spine. Layout only: grid placement, margin,
   padding, alignment. Every rule is (0,2,1) or (0,3,1), so it ties
   the inherited placements at 913-917 / 927-930 and wins on source
   order. Nothing above is edited.
   ============================================================= */

@media(min-width:1140px){

  /* 1 · the owner problem — PAIR, copy LEFT, 5 tracks of copy / 7 of chart, CENTRED.
     The copy is short (a 44-word paragraph against a ~450px chart), so the two
     columns are within a quarter of each other and centring costs nothing.
     The chart keeps seven tracks: below ~5 its HTML overlay labels start crowding
     the right axis and the revenue/cost divergence flattens. */
  html[data-about="m"] .opm-erosion{--opm-copy:var(--opm-copy-l);--opm-vis:var(--opm-vis-l);--opm-pad:var(--opm-pad-l);--opm-row-align:center;--opm-lede:14ch}
  html[data-about="m"] .opm-erosion>.opm-erosion__chart{grid-column:var(--opm-vis);grid-row:1}

  /* The closing line now sits inside the copy, right after the intro paragraph, so it
     reads with the problem statement rather than as a takeaway after the facts.
     The three pressures are still facts about the whole section, not about the chart:
     they run full width beneath the pair rather than under the copy alone.
     Three-across needs ~660px and its collapse rules are viewport-keyed, so it would
     shred in a 5-track copy column. --opm-tail binds the pressures to the pair. */
  html[data-about="m"] .opm-erosion>.opm-pressure{grid-column:row-start / row-end;grid-row:2;margin-top:var(--opm-tail)}

  /* 2 · the opportunity keeps Option L's composition: the head leads across nine
     tracks, then the 500+bps figure takes the left four and the bar the right eight.
     Nothing here, so the inherited rules above stand. */

  /* 2b · how we are paid — an attached BAND, not a row. It keeps its own two-column gold
     card at full container width; only the gap above it changes. A tail-weight margin
     (roughly a third of a block step) is what makes it read as the answer to
     "Positioned to expand margin." rather than as a new section. */
}

/* ============================================================
   M · rows 4, 5 and 6 — tools, the model, AI-native
   Appended after the inherited "L · desktop composition" layer.
   The spine (shared layer) already declares the named tracks, the
   order:0 reset, the copy-column placement (:first-child) and the
   lede measure. Each row below only picks a preset and places the
   children the spine does not own.
   ============================================================ */

@media(min-width:1140px){

  /* ---- 4 · another tool vs AIHG — copy LEFT, the two comparison cards right.
     The row keeps its bespoke 5fr/3.5fr/3.5fr track list (declared on the spine) because two
     cards inside a seven-track well would fall to ~240px each, below the 260px at which the
     longest line ("Proprietary agents coordinate across the whole hotel") still reads. On the
     bespoke tracks each card is 358px at 1440 and 283px at 1140, so the inherited card padding
     stays generous and no type has to shrink.
     The row centres (short copy). The two cards stretch to match each other's height (the
     taller of the two, AIHG's, sets the row), rather than each stopping at its own content —
     the two comparisons read as one paired object rather than a ragged pair. ---- */
  html[data-about="m"] .opm-tools{--opm-copy:var(--opm-copy-l);--opm-vis:var(--opm-vis-l);--opm-pad:var(--opm-pad-l);--opm-row-align:center}
  html[data-about="m"] .opm-tools>.opm-tools__col{grid-column:mid / 3;grid-row:1;align-self:stretch;margin-top:0}
  html[data-about="m"] .opm-tools>.opm-tools__col--aihg{grid-column:3 / row-end;grid-row:1;align-self:stretch}
  /* the second movement opens here */

  /* ---- 5 · the operating model — copy RIGHT, the four principles left.
     The principles stay inside the visual column as a 2x2 rather than running four-across
     beneath the pair: four across needs ~930px (each principle floors at ~200px for its
     headline and its 14.5px paragraph), which a seven-track column never supplies, while a 2x2
     gives 349px a cell at 1440 and 276px at 1140 — comfortably above that floor. It also keeps
     the four parts reading as one object beside the copy instead of becoming a second band.
     The 2-up and 1-up fallbacks on .opm-model are viewport-keyed and never fire in a column,
     so the 2x2 is declared explicitly here.
     Top-aligned: the copy carries a 178ch paragraph. ---- */
  html[data-about="m"] .opm-modelwrap{--opm-copy:var(--opm-copy-r);--opm-vis:var(--opm-vis-r);--opm-pad:var(--opm-pad-r)}
  html[data-about="m"] .opm-modelwrap>.opm-model{grid-column:var(--opm-vis);grid-row:1}
  html[data-about="m"] .opm-modelwrap .opm-model{grid-template-columns:minmax(0,1fr) minmax(0,1fr);gap:clamp(26px,3.2vh,40px) clamp(22px,2.2vw,36px);padding-top:26px}
  /* it answers the tools question directly, so the two rows sit close */

  /* ---- 6 · what AI-native means — copy LEFT with its CTA beneath it, the platform stack right.
     The stack holds its labels in the seven-track column: 670px of content at 1440 and 528px at
     1140 against a 485px practical minimum (three chips a row), so it does not need to run wider
     beneath the copy. white-space:nowrap is insurance — "Preventive maintenance" is ~202px and
     would otherwise wrap inside its own chip and read as broken.
     The copy column stacks head then CTA (rows 1 and 2) with the stack spanning both, so the
     button stays with the copy it belongs to; it takes the copy column, never the full container
     with justify-self, which would pin it to the container edge. The AINS note is a footnote and
     runs as a tail beneath both, its own 66ch cap keeping the measure.
     Top-aligned: this is the longest head in the block (201ch). ---- */
  html[data-about="m"] .opm-native{--opm-copy:var(--opm-copy-l);--opm-vis:var(--opm-vis-l);--opm-pad:var(--opm-pad-l)}
  html[data-about="m"] .opm-native>.opm-stack{grid-column:var(--opm-vis);grid-row:1 / 3;align-self:start}
  html[data-about="m"] .opm-native .opm-stack__grid li{white-space:nowrap}
  /* the copy column (head, CTA, AINS note) is now one grouped block — see .opm-native__copy
     below — so it stacks top-down on its own terms instead of being placed row-by-row
     against the diagram's height. It shares the diagram's full row span so it stays
     top-aligned rather than stretched, but its OWN height is just its content. */
  html[data-about="m"] .opm-native>.opm-native__copy{grid-row:1/-1!important;align-self:start}
}


/* ============================================================
   M · alternating rows — why block, sections 8 and 9
   Appended after line 994. Placement only: every rule is
   grid-column / grid-row / margin. The copy column itself is
   placed by the spine (2.4) and is never written here.
   ============================================================ */

@media(min-width:1140px){

  /* 8 · the general manager keeps Option L's composition: the head leads from the
     left over nine tracks, the today/with-AIHG pair runs the container beneath it
     and the four-up follows. Nothing here, so the inherited rules above stand. */

  /* 9 · the owner update keeps Option L's composition: the head leads from the
     left over nine tracks and the report runs the container beneath it. Nothing
     here, so the inherited rules above stand. */
}

/* ============================================================
   M · alternating rows — 10 story, 11 impact, 14 join
   Appended after the inherited "L · desktop composition" layer and after the
   shared spine. Desktop only; the tablet and mobile layers are written
   elsewhere. Layout properties only — no type, no colour, no motion.
   ============================================================ */
@media(min-width:1140px){

  /* ---- 10 · on property keeps Option L's composition: the head leads from the
     left over nine tracks and the eight-card stage runs the container beneath
     it. Nothing here, so the inherited rules above stand. ---- */


  /* ---- 11 · the owner outcome — PAIR, copy LEFT, film preset 7/5, centred ----
     The copy column carries the head, the whole outcome chain and the CTA, so
     it takes the wide seven tracks; the chain travels with the copy because it
     lives inside the same div and its rail geometry is measured in pixels.
     The film takes five tracks: at seven it would render about 1.16:1 and crop
     a portrait composition into a near-landscape frame against a hand-tuned
     object-position. At five it renders roughly 529x640, essentially as today.
     max-height is restated at its inherited value so the placement and the crop
     are read together. Centred because the copy column (~650px with the chain)
     and the 640px-capped film are near-equal — no space is manufactured.
     The step-open margin gives the section air after the story's tail. */
  html[data-why="m"] .opm-impact{--opm-copy:var(--opm-copy-lw);--opm-vis:var(--opm-vis-lw);--opm-pad:var(--opm-pad-l);--opm-row-align:center}
  html[data-why="m"] .opm-impact>.opm-media{grid-column:var(--opm-vis);grid-row:1;max-height:640px}

  /* ---- 14 · join us — PAIR, copy LEFT, film preset 7/5, centred ----
     Already copy-then-image in the markup; this only brings it onto the shared
     row system. The grid lives on .opm-join__inner, never on section.opm-join,
     which carries data-when and would leak M into the other options. The ratio
     moves from a copy-heavy 1.15/0.85 to the film preset's 7/5, and the gap
     comes from --opm-gap via the spine, replacing the 104px bespoke gutter so
     the row reads as part of the same system as the rest of the page.
     Centred: two short paragraphs and a CTA against a 560px-capped portrait. */
  html[data-why="m"] .opm-join__inner{--opm-copy:var(--opm-copy-l);--opm-vis:var(--opm-vis-l);--opm-pad:var(--opm-pad-l);--opm-row-align:center}
  html[data-why="m"] .opm-join__inner>.opm-join__media{grid-column:var(--opm-vis);grid-row:1}
}

/* ============================================================
   M · tablet and mobile — how the alternating spine lands
   ------------------------------------------------------------
   The spine engages at 1140. Below it there is no alternation:
   K's staggered collapses already carry these sections down to
   the phone, and this layer does not rebuild them. It does four
   things only — close the regression the .opm-impact DOM swap
   opened, bring the one artifact that hits its minimum before
   the others onto its own designed narrow form, guard against
   horizontal overflow, and make the single-column order of the
   two film rows explicit rather than implied by source position.
   Layout only: grid placement, gap, min-width, wrapping.
   ============================================================ */

/* ---- 1 · tablet, 761-1139. The copy <div> now precedes <figure class="opm-media">, and the
   inherited two-track grid assigns its tracks by position, so without this the copy takes the
   narrow track and the film the wide one across the whole band. Placed by selector instead, with
   the proportion leaning to the copy (57.5%) so the chain and the CTA keep a comfortable measure,
   and a tighter gutter than the desktop row's. ---- */
@media(min-width:761px) and (max-width:1139px){
  html[data-why="m"] .opm-impact{grid-template-columns:minmax(0,1.15fr) minmax(0,.85fr);gap:clamp(24px,3.4vw,44px)}
  html[data-why="m"] .opm-impact>div{grid-column:1;grid-row:1}
  html[data-why="m"] .opm-impact>.opm-media{grid-column:2;grid-row:1}
}

/* ---- 2 · join, 861-1139. Its own gutter runs to 104px, which was set against the 1320 container;
   at 1020 it reads as a different system from every other row and eats the copy measure. Brought
   back toward the page's column gap. Below 861 the section is already one column and keeps K's
   36px stack gap untouched. ---- */
@media(min-width:861px) and (max-width:1139px){
  html[data-why="m"] .opm-join__inner{gap:clamp(28px,4vw,56px)}
}

/* ---- 4 · overflow guards at every width below the spine. The spine sets min-width:0 on its row
   children; below 1140 the same children sit in K's own grids, and a long headline, a nowrap
   label or a wide diagram inside one of them would otherwise push the track past the container.
   The page hides horizontal overflow, so this would never announce itself. The legend is allowed
   to wrap for the same reason: two labels plus their swatches run to ~316px, which is wider than
   the content box of the narrowest phone. ---- */
@media(max-width:1139px){
  html[data-about="m"] .opm-erosion>*,html[data-about="m"] .opm-tools>*,
  html[data-about="m"] .opm-modelwrap>*,html[data-about="m"] .opm-native>*,html[data-about="m"] .opm-align>*,
  html[data-why="m"] .opm-impact>*,html[data-why="m"] .opm-join__inner>*{min-width:0}
}

/* ---- 5 · the single column. Both film rows collapse on K's own breakpoints and both are already
   copy-then-film in the DOM, so the order is right without help; these two rules only make it
   explicit, so the rendered order can never fall back to source position or to a track count.
   Copy first, film second, in the document and on screen. No `order` is used anywhere in this
   layer — every other section reaches the phone in plain block flow or in a single-column grid,
   in DOM order. ---- */
@media(max-width:860px){
  html[data-why="m"] .opm-join__inner>.opm-join__copy{grid-column:1;grid-row:1}
  html[data-why="m"] .opm-join__inner>.opm-join__media{grid-column:1;grid-row:2}
}
@media(max-width:760px){
  html[data-why="m"] .opm-impact>div{grid-column:1;grid-row:1}
  html[data-why="m"] .opm-impact>.opm-media{grid-column:1;grid-row:2}
}