/* ROUND A7 - ABOUT HERO TYPOGRAPHY AND PROOF CARDS */
.about-page .about-hero h1 {
  max-width: 690px;
  font-size: clamp(2.45rem, 4.55vw, 4.25rem);
  line-height: 1.02;
}

.about-page .about-proof {
  position: relative;
  isolation: isolate;
  overflow: hidden;
  transition:
    transform 260ms cubic-bezier(.2,.75,.2,1),
    background-color 260ms ease,
    box-shadow 260ms ease;
}

.about-page .about-proof::before {
  content: '';
  position: absolute;
  inset: 0;
  z-index: -1;
  opacity: 0;
  background: radial-gradient(
    circle at var(--about-proof-x, 50%) var(--about-proof-y, 50%),
    rgba(34,211,238,.18),
    rgba(139,92,246,.10) 36%,
    transparent 70%
  );
  transform: scale(.72);
  transition: opacity 260ms ease, transform 420ms cubic-bezier(.2,.75,.2,1);
}

.about-page .about-proof::after {
  content: '';
  position: absolute;
  right: -30%;
  bottom: -95%;
  width: 72%;
  aspect-ratio: 1;
  border: 1px solid rgba(167,139,250,.22);
  border-radius: 50%;
  opacity: 0;
  transform: translate3d(16px,16px,0) scale(.74);
  transition: opacity 260ms ease, transform 520ms cubic-bezier(.2,.75,.2,1);
}

.about-page .about-proof:hover,
.about-page .about-proof:focus-within {
  z-index: 2;
  transform: translateY(-7px) scale(1.018);
  background: rgba(18,18,34,.98);
  box-shadow: 0 20px 50px rgba(0,0,0,.34), 0 0 28px rgba(139,92,246,.16);
}

.about-page .about-proof:hover::before,
.about-page .about-proof:focus-within::before,
.about-page .about-proof:hover::after,
.about-page .about-proof:focus-within::after {
  opacity: 1;
  transform: translate3d(0,0,0) scale(1);
}

.about-page .about-proof strong,
.about-page .about-proof span {
  position: relative;
  z-index: 1;
}

/* ROUND A7 - RESPONSIVE FULL-WIDTH STORY HEADINGS */
.about-page .about-chapter-grid,
.about-page .about-final-grid,
.about-page .about-chapter-heading,
.about-page .about-chapter-side-copy,
.about-page .about-chapter-continuation,
.about-page .about-final-heading,
.about-page .about-final-copy,
.about-page .about-final-continuation,
.about-page .about-final-cta,
.about-page .about-media {
  min-width: 0;
  max-width: 100%;
}

.about-page .about-chapter-heading h2,
.about-page .about-final-heading h2 {
  width: 100%;
  max-width: 100%;
  margin: .25rem 0 0;
  white-space: normal;
  overflow-wrap: anywhere;
  word-break: normal;
  text-wrap: balance;
}

.about-page .about-chapter-side-copy,
.about-page .about-chapter-continuation,
.about-page .about-final-copy,
.about-page .about-final-continuation {
  color: var(--about-muted);
}

.about-page .about-chapter-side-copy > p,
.about-page .about-chapter-continuation > p,
.about-page .about-final-copy > p,
.about-page .about-final-continuation > p {
  min-width: 0;
  max-width: 100%;
  margin: 0;
  color: var(--about-muted);
  font-size: 1.03rem;
  line-height: 1.75;
  overflow-wrap: break-word;
}

.about-page .about-chapter-side-copy,
.about-page .about-final-copy {
  display: grid;
  align-content: center;
  gap: 1rem;
  padding-left: 0 !important;
}

.about-page .about-chapter-continuation,
.about-page .about-final-continuation {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: 1rem clamp(1.5rem, 3vw, 2.7rem);
  padding-top: .25rem;
}

.about-page .about-chapter-continuation > p:first-of-type:last-of-type,
.about-page .about-final-continuation > p:first-of-type:last-of-type,
.about-page .about-chapter-continuation > .about-pills,
.about-page .about-chapter-continuation > .about-principles,
.about-page .about-chapter-continuation > .about-transformation,
.about-page .about-chapter-continuation > .about-actions,
.about-page .about-chapter-continuation > .about-vision-pillars,
.about-page .about-final-continuation > .about-signature {
  grid-column: 1 / -1;
}

.about-page .about-chapter-continuation > p:first-of-type:last-of-type,
.about-page .about-final-continuation > p:first-of-type:last-of-type {
  max-width: 82ch;
}

/* ROUND A7 - DESKTOP STORY GRID WITH TIMELINE GUTTER */
@media (min-width: 1101px) {
  .about-page .about-story .about-chapter-grid,
  .about-page > main > .about-chapter .about-chapter-grid {
    --about-story-gutter: 64px;
    display: grid;
    grid-template-columns:
      var(--about-story-gutter)
      minmax(0, .92fr)
      minmax(0, 1.08fr) !important;
    grid-template-rows: auto auto auto;
    column-gap: clamp(2.2rem, 4.4vw, 4.8rem);
    row-gap: clamp(1.15rem, 2.2vw, 1.9rem);
    align-items: start;
  }

  .about-page .about-story .about-chapter-heading,
  .about-page > main > .about-chapter .about-chapter-heading {
    grid-column: 2 / -1;
    grid-row: 1;
  }

  .about-page .about-story .about-chapter-heading h2,
  .about-page > main > .about-chapter .about-chapter-heading h2 {
    font-size: clamp(2.2rem, 3.25vw, 3.55rem);
    line-height: 1.04;
    letter-spacing: -.04em;
  }

  .about-page .about-story .about-chapter-grid[data-about-media-side='right'] .about-media,
  .about-page > main > .about-chapter .about-chapter-grid[data-about-media-side='right'] .about-media {
    grid-column: 3;
    grid-row: 2;
  }

  .about-page .about-story .about-chapter-grid[data-about-media-side='right'] .about-chapter-side-copy,
  .about-page > main > .about-chapter .about-chapter-grid[data-about-media-side='right'] .about-chapter-side-copy {
    grid-column: 2;
    grid-row: 2;
  }

  .about-page .about-story .about-chapter-grid[data-about-media-side='left'] .about-media,
  .about-page > main > .about-chapter .about-chapter-grid[data-about-media-side='left'] .about-media {
    grid-column: 2;
    grid-row: 2;
  }

  .about-page .about-story .about-chapter-grid[data-about-media-side='left'] .about-chapter-side-copy,
  .about-page > main > .about-chapter .about-chapter-grid[data-about-media-side='left'] .about-chapter-side-copy {
    grid-column: 3;
    grid-row: 2;
  }

  .about-page .about-story .about-chapter-continuation,
  .about-page > main > .about-chapter .about-chapter-continuation {
    grid-column: 2 / -1;
    grid-row: 3;
  }

  .about-page .about-story .about-media,
  .about-page > main > .about-chapter .about-media {
    width: 100%;
    align-self: start;
    order: initial !important;
  }

  .about-page .about-story .about-principles {
    grid-template-columns: repeat(4, minmax(0,1fr));
  }

  /* Match the current Home channel geometry instead of relying on tolerance. */
  body.about-page nav.public-unified-header > #public-channel-status-top {
    min-height: 28px;
  }

  body.about-page nav.public-unified-header > #public-channel-status-top .public-channel-status__item {
    width: 26px;
    height: 26px;
  }

  /* ROUND A7 - FULL WIDTH FINAL CTA BELOW THE PHOTO */
  .about-page .about-final-grid {
    display: grid;
    grid-template-columns: minmax(0,.94fr) minmax(0,1.06fr) !important;
    grid-template-rows: auto auto auto auto;
    column-gap: clamp(2.5rem,5vw,5.5rem);
    row-gap: clamp(1.15rem,2.2vw,1.9rem);
    align-items: start;
  }

  .about-page .about-final-heading {
    grid-column: 1 / -1;
    grid-row: 1;
  }

  .about-page .about-final-heading h2 {
    font-size: clamp(2.2rem,3.25vw,3.55rem);
    line-height: 1.04;
    letter-spacing: -.04em;
  }

  .about-page .about-final-grid > figure {
    grid-column: 2;
    grid-row: 2;
    width: 100%;
    order: initial !important;
  }

  .about-page .about-final-copy {
    grid-column: 1;
    grid-row: 2;
  }

  .about-page .about-final-continuation {
    grid-column: 1 / -1;
    grid-row: 3;
  }

  .about-page .about-final-cta {
    grid-column: 1 / -1;
    grid-row: 4;
    width: 100%;
    margin-top: .35rem;
    padding: clamp(2rem,4vw,3.5rem);
    border: 1px solid rgba(139,92,246,.30);
    border-radius: 28px;
    background: linear-gradient(125deg, rgba(139,92,246,.18), rgba(34,211,238,.08) 62%, rgba(251,146,60,.08));
    box-shadow: 0 26px 80px rgba(0,0,0,.32), inset 0 1px 0 rgba(255,255,255,.06);
  }

  .about-page .about-final-cta h3 {
    max-width: 920px;
    font-size: clamp(1.65rem,3vw,2.7rem);
  }

  .about-page .about-final-cta p {
    max-width: 850px;
  }
}

/* ROUND A7 - TABLET AND MOBILE STACKING */
@media (max-width: 1100px) {
  .about-page .about-hero h1 {
    max-width: 760px;
    font-size: clamp(2.35rem,7vw,4rem);
  }

  .about-page .about-story::before,
  .about-page .about-section-number::before {
    display: none !important;
  }

  .about-page .about-story .about-chapter-grid,
  .about-page > main > .about-chapter .about-chapter-grid,
  .about-page .about-final-grid {
    display: grid;
    width: 100%;
    min-width: 0;
    max-width: 100%;
    grid-template-columns: minmax(0, 1fr) !important;
    gap: 1.25rem;
  }

  .about-page .about-chapter-heading,
  .about-page .about-final-heading {
    grid-column: 1;
    grid-row: auto;
    order: 0;
  }

  .about-page .about-chapter-heading h2,
  .about-page .about-final-heading h2 {
    font-size: clamp(2rem,5.8vw,3.15rem);
    line-height: 1.06;
  }

  /* Chapters 01, 02, 03, 05, 06 and 07 keep image before copy. */
  .about-page .about-story .about-media {
    grid-column: 1 !important;
    grid-row: auto !important;
    order: 1 !important;
    width: 100%;
  }

  .about-page .about-story .about-chapter-side-copy {
    grid-column: 1 !important;
    grid-row: auto !important;
    order: 2 !important;
    padding-left: 0 !important;
  }

  .about-page .about-story .about-chapter-continuation {
    grid-column: 1 !important;
    grid-row: auto !important;
    order: 3 !important;
    grid-template-columns: minmax(0,1fr);
  }

  .about-page .about-story .about-chapter-continuation > * {
    grid-column: 1 !important;
  }

  /* Chapter 09 is intentionally text first, then the large image. */
  .about-page [data-about-wide-layout='vision'] .about-chapter-heading { order: 0; }
  .about-page [data-about-wide-layout='vision'] .about-chapter-side-copy {
    grid-column: 1 !important;
    grid-row: auto !important;
    order: 1 !important;
    grid-template-columns: minmax(0,1fr);
    padding-left: 0 !important;
  }
  .about-page [data-about-wide-layout='vision'] .about-chapter-continuation {
    grid-column: 1 !important;
    grid-row: auto !important;
    order: 2 !important;
    grid-template-columns: minmax(0,1fr);
  }
  .about-page [data-about-wide-layout='vision'] .about-media--vision {
    grid-column: 1 !important;
    grid-row: auto !important;
    order: 3 !important;
    width: 100%;
  }

  /* Chapter 10 follows the same reading order and keeps the CTA last. */
  .about-page [data-about-wide-layout='closing'] .about-final-heading { order: 0; }
  .about-page [data-about-wide-layout='closing'] .about-final-copy {
    grid-column: 1 !important;
    grid-row: auto !important;
    order: 1 !important;
    grid-template-columns: minmax(0,1fr);
    padding-left: 0 !important;
  }
  .about-page [data-about-wide-layout='closing'] .about-final-continuation {
    grid-column: 1 !important;
    grid-row: auto !important;
    order: 2 !important;
    grid-template-columns: minmax(0,1fr);
  }
  .about-page [data-about-wide-layout='closing'] > figure {
    grid-column: 1 !important;
    grid-row: auto !important;
    order: 3 !important;
    width: 100%;
  }
  .about-page [data-about-wide-layout='closing'] .about-final-cta {
    grid-column: 1 !important;
    grid-row: auto !important;
    order: 4 !important;
    width: 100%;
    margin-top: .25rem;
    padding: clamp(1.5rem,5vw,2.6rem);
    border: 1px solid rgba(139,92,246,.30);
    border-radius: 24px;
    background: linear-gradient(125deg, rgba(139,92,246,.18), rgba(34,211,238,.08) 62%, rgba(251,146,60,.08));
  }
}

@media (max-width: 680px) {
  .about-page .about-hero h1 {
    font-size: clamp(2.15rem,10.6vw,3.15rem);
  }

  .about-page .about-chapter-heading h2,
  .about-page .about-final-heading h2 {
    font-size: clamp(1.78rem,8.4vw,2.55rem);
    line-height: 1.08;
  }

  .about-page .about-chapter-side-copy > p,
  .about-page .about-chapter-continuation > p,
  .about-page .about-final-copy > p,
  .about-page .about-final-continuation > p {
    font-size: .99rem;
    line-height: 1.72;
  }

  .about-page .about-proof:hover,
  .about-page .about-proof:focus-within {
    transform: translateY(-3px);
  }

  .about-page .about-final-cta {
    border-radius: 20px;
  }
}

/* =========================================================
   ROUND A8 - WIDE VISION AND CLOSING SECTIONS
   Text uses the full editorial width. Images render below it
   in a true 16:9 frame on desktop, tablet and mobile.
   ========================================================= */

.about-page [data-about-wide-layout='vision'] .about-chapter-side-copy,
.about-page [data-about-wide-layout='closing'] .about-final-copy {
  align-content: start;
}

.about-page [data-about-wide-layout='vision'] .about-chapter-continuation > p,
.about-page [data-about-wide-layout='closing'] .about-final-continuation > p {
  max-width: none;
}

.about-page [data-about-wide-layout='vision'] .about-media--vision,
.about-page [data-about-wide-layout='closing'] > figure {
  display: block;
  width: 100%;
  min-width: 0;
  max-width: 100%;
  min-height: 0 !important;
  height: auto !important;
  aspect-ratio: 16 / 9;
  align-self: start;
  padding: 0;
  overflow: hidden;
  background: #090913;
}

.about-page [data-about-wide-layout='vision'] .about-media--vision img,
.about-page [data-about-wide-layout='closing'] > figure > img,
.about-page--en [data-about-wide-layout='vision'] .about-media--vision img {
  position: relative;
  display: block;
  width: 100% !important;
  max-width: 100% !important;
  height: auto !important;
  min-height: 0 !important;
  margin: 0 !important;
  aspect-ratio: 16 / 9;
  object-position: center;
  transform: none !important;
}

.about-page [data-about-wide-layout='vision'] .about-media--vision img,
.about-page--en [data-about-wide-layout='vision'] .about-media--vision img {
  object-fit: contain;
}

.about-page [data-about-wide-layout='closing'] > figure > img {
  object-fit: cover;
}

@media (min-width: 1101px) {
  .about-page [data-about-wide-layout='vision'] .about-chapter-heading,
  .about-page [data-about-wide-layout='vision'] .about-chapter-side-copy,
  .about-page [data-about-wide-layout='vision'] .about-chapter-continuation,
  .about-page [data-about-wide-layout='vision'] .about-media--vision {
    grid-column: 2 / -1;
    width: 100%;
  }

  .about-page [data-about-wide-layout='vision'] .about-chapter-heading { grid-row: 1; }
  .about-page [data-about-wide-layout='vision'] .about-chapter-side-copy {
    grid-row: 2;
    display: grid;
    grid-template-columns: repeat(2, minmax(0,1fr));
    gap: clamp(1.5rem,3vw,2.8rem);
  }
  .about-page [data-about-wide-layout='vision'] .about-chapter-continuation { grid-row: 3; }
  .about-page [data-about-wide-layout='vision'] .about-media--vision { grid-row: 4; }

  .about-page [data-about-wide-layout='closing'] {
    display: grid;
    grid-template-columns: minmax(0,1fr) !important;
    grid-template-rows: auto auto auto auto auto;
    row-gap: clamp(1.15rem,2.2vw,1.9rem);
    align-items: start;
  }

  .about-page [data-about-wide-layout='closing'] .about-final-heading {
    grid-column: 1;
    grid-row: 1;
  }
  .about-page [data-about-wide-layout='closing'] .about-final-copy {
    grid-column: 1;
    grid-row: 2;
    display: grid;
    grid-template-columns: repeat(2, minmax(0,1fr));
    gap: clamp(1.5rem,3vw,2.8rem);
  }
  .about-page [data-about-wide-layout='closing'] .about-final-continuation {
    grid-column: 1;
    grid-row: 3;
  }
  .about-page [data-about-wide-layout='closing'] > figure {
    grid-column: 1;
    grid-row: 4;
  }
  .about-page [data-about-wide-layout='closing'] .about-final-cta {
    grid-column: 1;
    grid-row: 5;
  }
}

/* ROUND A7 - OVERFLOW CONTAINMENT */
html:has(body.about-page),
body.about-page {
  max-width: 100%;
  overflow-x: clip;
}

body.about-page main,
body.about-page .about-shell,
body.about-page .about-shell--narrow,
body.about-page .about-story,
body.about-page .about-chapter,
body.about-page .about-final,
body.about-page .about-panel-stage {
  min-width: 0;
  max-width: 100%;
}

body.about-page nav.public-unified-header .cometai-brand-wordmark__art,
body.about-page footer.public-site-footer .cometai-brand-wordmark__art {
  overflow: hidden;
}

/* ROUND A7 - REDUCED MOTION */
@media (prefers-reduced-motion: reduce) {
  .about-page .about-proof,
  .about-page .about-proof::before,
  .about-page .about-proof::after {
    transition: none !important;
  }

  .about-page .about-proof:hover,
  .about-page .about-proof:focus-within {
    transform: none;
  }
}


/* =========================================================
   ROUND A9 - ABOUT HEADER CHANNEL INTERACTION
   Mirrors the public-site channel animation and adds an
   immediate localized tooltip for mouse and keyboard users.
   ========================================================= */
body.about-page nav.public-unified-header > #public-channel-status-top {
  min-height: 28px;
  overflow: visible;
}

body.about-page nav.public-unified-header > #public-channel-status-top .public-channel-status__item {
  --channel-glow: rgba(167,139,250,.28);
  position: relative;
  isolation: isolate;
  width: 26px !important;
  height: 26px !important;
  padding: 0;
  border: 1px solid rgba(255,255,255,.05);
  border-radius: 8px;
  color: rgba(255,255,255,.82);
  background: rgba(255,255,255,.025);
  box-shadow: inset 0 1px 0 rgba(255,255,255,.025);
  cursor: help;
  opacity: .84;
  transition:
    transform .18s ease,
    opacity .18s ease,
    background-color .18s ease,
    border-color .18s ease,
    box-shadow .18s ease;
}

body.about-page nav.public-unified-header > #public-channel-status-top .public-channel-status__item::before {
  content: attr(aria-label);
  position: absolute;
  top: calc(100% + 10px);
  left: 50%;
  z-index: 320;
  width: max-content;
  max-width: min(280px, calc(100vw - 24px));
  padding: .48rem .65rem;
  border: 1px solid rgba(167,139,250,.28);
  border-radius: 9px;
  color: #f4f2ff;
  background: rgba(13,13,26,.985);
  box-shadow: 0 14px 36px rgba(0,0,0,.42), 0 0 18px var(--channel-glow);
  font-family: var(--about-body);
  font-size: .72rem;
  font-weight: 700;
  line-height: 1.35;
  text-align: center;
  white-space: normal;
  overflow-wrap: anywhere;
  opacity: 0;
  visibility: hidden;
  pointer-events: none;
  transform: translate(-50%, -4px);
  transition: opacity .16s ease, transform .16s ease, visibility .16s ease;
}

body.about-page nav.public-unified-header > #public-channel-status-top .public-channel-status__item:hover,
body.about-page nav.public-unified-header > #public-channel-status-top .public-channel-status__item:focus-visible {
  z-index: 321;
  opacity: 1;
  border-color: rgba(255,255,255,.12);
  background: rgba(255,255,255,.055);
  box-shadow: 0 0 16px var(--channel-glow), inset 0 1px 0 rgba(255,255,255,.06);
  outline: none;
  transform: translateY(-2px) scale(1.06);
}

body.about-page nav.public-unified-header > #public-channel-status-top .public-channel-status__item:hover::before,
body.about-page nav.public-unified-header > #public-channel-status-top .public-channel-status__item:focus-visible::before {
  opacity: 1;
  visibility: visible;
  transform: translate(-50%, 0);
}

body.about-page nav.public-unified-header > #public-channel-status-top .public-channel-status__item:focus-visible {
  outline: 2px solid rgba(167,139,250,.75);
  outline-offset: 2px;
}

body.about-page nav.public-unified-header > #public-channel-status-top [data-channel='whatsapp_official'] { --channel-glow: rgba(37,211,102,.42); }
body.about-page nav.public-unified-header > #public-channel-status-top [data-channel='instagram'] { --channel-glow: rgba(225,48,108,.38); }
body.about-page nav.public-unified-header > #public-channel-status-top [data-channel='facebook'] { --channel-glow: rgba(24,119,242,.42); color: #1877f2; }
body.about-page nav.public-unified-header > #public-channel-status-top [data-channel='whatsapp_alternative'] { --channel-glow: rgba(139,92,246,.42); }
body.about-page nav.public-unified-header > #public-channel-status-top [data-channel='widget'] { --channel-glow: rgba(34,211,238,.4); }

/* =========================================================
   ROUND A9 - COMPACT MOBILE PANEL IMAGE
   The dashboard artwork owns a real 16:9 frame instead of a
   stretched portrait wrapper with empty space.
   ========================================================= */
body.about-page .about-panel-image {
  position: relative;
  display: block;
  width: 100%;
  min-width: 0;
  max-width: 100%;
  min-height: 0 !important;
  height: auto !important;
  aspect-ratio: 16 / 9;
  overflow: hidden;
}

body.about-page .about-panel-image > img {
  display: block;
  width: 100% !important;
  max-width: 100% !important;
  height: 100% !important;
  min-height: 0 !important;
  max-height: none !important;
  margin: 0 !important;
  aspect-ratio: auto !important;
  object-fit: cover;
  object-position: center;
  transform: none !important;
}

/* =========================================================
   ROUND A9 - VISION FULL-WIDTH SPECIFICITY CLOSURE
   These selectors intentionally outrank the alternating media
   rules declared earlier in this file.
   ========================================================= */
@media (min-width: 1101px) {
  body.about-page main > section.about-chapter > .about-chapter-grid[data-about-wide-layout='vision'] > .about-chapter-heading,
  body.about-page main > section.about-chapter > .about-chapter-grid[data-about-wide-layout='vision'] > .about-chapter-side-copy,
  body.about-page main > section.about-chapter > .about-chapter-grid[data-about-wide-layout='vision'] > .about-chapter-continuation,
  body.about-page main > section.about-chapter > .about-chapter-grid[data-about-wide-layout='vision'] > .about-media--vision {
    grid-column: 2 / -1 !important;
    width: 100% !important;
    max-width: 100% !important;
  }

  body.about-page main > section.about-chapter > .about-chapter-grid[data-about-wide-layout='vision'] > .about-chapter-heading {
    grid-row: 1 !important;
  }

  body.about-page main > section.about-chapter > .about-chapter-grid[data-about-wide-layout='vision'] > .about-chapter-side-copy {
    grid-row: 2 !important;
    display: grid !important;
    grid-template-columns: repeat(2, minmax(0,1fr)) !important;
    gap: clamp(1.5rem,3vw,2.8rem);
    padding-left: 0 !important;
  }

  body.about-page main > section.about-chapter > .about-chapter-grid[data-about-wide-layout='vision'] > .about-chapter-continuation {
    grid-row: 3 !important;
  }

  body.about-page main > section.about-chapter > .about-chapter-grid[data-about-wide-layout='vision'] > .about-media--vision {
    grid-row: 4 !important;
  }
}

body.about-page main > section.about-chapter > .about-chapter-grid[data-about-wide-layout='vision'] > .about-media--vision {
  min-height: 0 !important;
  height: auto !important;
  aspect-ratio: 16 / 9 !important;
  padding: 0 !important;
}

body.about-page main > section.about-chapter > .about-chapter-grid[data-about-wide-layout='vision'] > .about-media--vision > img,
body.about-page--en main > section.about-chapter > .about-chapter-grid[data-about-wide-layout='vision'] > .about-media--vision > img {
  width: 100% !important;
  max-width: 100% !important;
  height: 100% !important;
  min-height: 0 !important;
  margin: 0 !important;
  aspect-ratio: auto !important;
  object-fit: contain !important;
  object-position: center !important;
  transform: none !important;
  background: #090913;
}

@media (max-width: 1100px) {
  body.about-page main > section.about-chapter > .about-chapter-grid[data-about-wide-layout='vision'] > .about-chapter-heading { order: 0 !important; }
  body.about-page main > section.about-chapter > .about-chapter-grid[data-about-wide-layout='vision'] > .about-chapter-side-copy {
    grid-column: 1 !important;
    grid-row: auto !important;
    order: 1 !important;
    width: 100% !important;
    grid-template-columns: minmax(0,1fr) !important;
    padding-left: 0 !important;
  }
  body.about-page main > section.about-chapter > .about-chapter-grid[data-about-wide-layout='vision'] > .about-chapter-continuation {
    grid-column: 1 !important;
    grid-row: auto !important;
    order: 2 !important;
    width: 100% !important;
  }
  body.about-page main > section.about-chapter > .about-chapter-grid[data-about-wide-layout='vision'] > .about-media--vision {
    grid-column: 1 !important;
    grid-row: auto !important;
    order: 3 !important;
    width: 100% !important;
  }
}

@media (prefers-reduced-motion: reduce) {
  body.about-page nav.public-unified-header > #public-channel-status-top .public-channel-status__item,
  body.about-page nav.public-unified-header > #public-channel-status-top .public-channel-status__item::before {
    transition: none !important;
  }

  body.about-page nav.public-unified-header > #public-channel-status-top .public-channel-status__item:hover,
  body.about-page nav.public-unified-header > #public-channel-status-top .public-channel-status__item:focus-visible {
    transform: none !important;
  }
}

/* =========================================================
   ROUND A9.6 - MOBILE GUTTER AND MEDIA CENTERING
   Story chapters inherit the same 14px-per-side mobile shell
   used by the Hero. Native figure margins are reset so the
   Vision and Closing artwork remain mathematically centered.
   ========================================================= */
@media (max-width: 680px) {
  body.about-page .about-story .about-chapter-grid,
  body.about-page main > section.about-chapter > .about-chapter-grid,
  body.about-page main > section.about-final > .about-final-grid {
    width: calc(100% - 28px) !important;
    max-width: calc(100vw - 28px) !important;
    margin-left: auto !important;
    margin-right: auto !important;
    box-sizing: border-box;
  }

  body.about-page main > section.about-chapter > .about-chapter-grid[data-about-wide-layout='vision'] > .about-media--vision,
  body.about-page main > section.about-final > .about-final-grid[data-about-wide-layout='closing'] > figure {
    width: 100% !important;
    max-width: 100% !important;
    margin: 0 auto !important;
    justify-self: center;
  }
}



/* =========================================================
   ROUND A11.1 - NATIVE FIGURE ALIGNMENT
   Reset the browser's default figure margin so standard story
   artwork begins on the same row as the adjacent copy.
   ========================================================= */
body.about-page figure.about-media {
  margin: 0;
}

/* =========================================================
   ROUND A11 - DESKTOP STORY RHYTHM AND COMMERCIAL COPY
   Keep each narrative block visually continuous beside its image
   and reduce the oversized transition before the closing chapter.
   ========================================================= */
@media (min-width: 1101px) {
  body.about-page .about-story {
    padding-top: clamp(42px, 4vw, 58px);
    padding-bottom: 22px;
  }

  body.about-page .about-story > .about-chapter {
    padding: clamp(46px, 5vw, 72px) 0;
  }

  body.about-page .about-story .about-chapter-grid:not([data-about-wide-layout]) {
    grid-template-rows: auto auto auto;
    row-gap: clamp(.8rem, 1.2vw, 1.1rem);
    align-items: start;
  }

  body.about-page .about-story .about-chapter-grid:not([data-about-wide-layout])[data-about-media-side='right'] > .about-media {
    grid-column: 3 !important;
    grid-row: 2 / 4 !important;
  }

  body.about-page .about-story .about-chapter-grid:not([data-about-wide-layout])[data-about-media-side='right'] > .about-chapter-side-copy {
    grid-column: 2 !important;
    grid-row: 2 !important;
  }

  body.about-page .about-story .about-chapter-grid:not([data-about-wide-layout])[data-about-media-side='right'] > .about-chapter-continuation {
    grid-column: 2 !important;
    grid-row: 3 !important;
  }

  body.about-page .about-story .about-chapter-grid:not([data-about-wide-layout])[data-about-media-side='left'] > .about-media {
    grid-column: 2 !important;
    grid-row: 2 / 4 !important;
  }

  body.about-page .about-story .about-chapter-grid:not([data-about-wide-layout])[data-about-media-side='left'] > .about-chapter-side-copy {
    grid-column: 3 !important;
    grid-row: 2 !important;
  }

  body.about-page .about-story .about-chapter-grid:not([data-about-wide-layout])[data-about-media-side='left'] > .about-chapter-continuation {
    grid-column: 3 !important;
    grid-row: 3 !important;
  }

  body.about-page .about-story .about-chapter-grid:not([data-about-wide-layout]) > .about-chapter-side-copy,
  body.about-page .about-story .about-chapter-grid:not([data-about-wide-layout]) > .about-chapter-continuation {
    align-content: start;
    padding-top: 0;
  }

  body.about-page .about-story .about-chapter-grid:not([data-about-wide-layout]) > .about-chapter-continuation {
    grid-template-columns: minmax(0, 1fr);
    gap: .9rem;
  }

  body.about-page .about-story .about-chapter-grid:not([data-about-wide-layout]) > .about-chapter-continuation > * {
    grid-column: 1 !important;
  }

  body.about-page .about-story .about-chapter-grid:not([data-about-wide-layout]) > .about-chapter-side-copy > p,
  body.about-page .about-story .about-chapter-grid:not([data-about-wide-layout]) > .about-chapter-continuation > p {
    max-width: none;
  }

  body.about-page .about-chapter--vision {
    padding-bottom: clamp(28px, 2.8vw, 42px);
  }

  body.about-page .about-final {
    padding-top: clamp(40px, 4.8vw, 66px);
  }
}


/* =========================================================
   ROUND A11.2 - MEDIA SUPPORT AND WIDE ALIGNMENT
   Keep qualifications, principles and the commercial CTA
   attached to their artwork. Center the wide artwork and make
   the closing copy follow the same left editorial rail as Vision.
   ========================================================= */
body.about-page .about-media-stack {
  display: grid;
  width: 100%;
  min-width: 0;
  max-width: 100%;
  gap: 1rem;
  align-self: start;
}

body.about-page .about-media-stack > figure.about-media {
  grid-column: 1 !important;
  grid-row: 1 !important;
  width: 100%;
  max-width: 100%;
  margin: 0 !important;
}

body.about-page .about-media-stack > .about-chapter-support {
  grid-column: 1;
  grid-row: 2;
  display: flex;
  width: 100%;
  min-width: 0;
  max-width: 100%;
  align-items: flex-start;
  justify-content: center;
}

body.about-page .about-chapter-support--pills .about-pills,
body.about-page .about-chapter-support--cta .about-actions {
  width: 100%;
  margin: 0;
  justify-content: center;
}

body.about-page .about-chapter-support--principles .about-principles {
  width: 100%;
  margin: 0;
  grid-template-columns: repeat(2, minmax(0, 1fr));
}

@media (min-width: 1101px) {
  body.about-page .about-story .about-chapter-grid[data-about-media-side='right'] > .about-media-stack {
    grid-column: 3 !important;
    grid-row: 2 / 4 !important;
  }

  body.about-page .about-story .about-chapter-grid[data-about-media-side='left'] > .about-media-stack {
    grid-column: 2 !important;
    grid-row: 2 / 4 !important;
  }

  body.about-page .about-media-stack > figure.about-media,
  body.about-page .about-media-stack > .about-chapter-support {
    order: initial !important;
  }

  body.about-page main > section.about-chapter > .about-chapter-grid[data-about-wide-layout='vision'] > .about-media--vision {
    grid-column: 1 / -1 !important;
    width: 100% !important;
    max-width: 100% !important;
    margin-inline: auto !important;
    justify-self: center !important;
  }

  /* ROUND A11.2.2 - CLOSING EDITORIAL RAIL PARITY
     Vision starts after the 64px timeline gutter plus the responsive
     desktop column gap. Closing must use the same combined offset. */
  body.about-page main > section.about-final > .about-final-grid[data-about-wide-layout='closing'] {
    --about-wide-text-gutter: calc(64px + clamp(2.2rem, 4.4vw, 4.8rem));
  }

  body.about-page main > section.about-final > .about-final-grid[data-about-wide-layout='closing'] > .about-final-heading,
  body.about-page main > section.about-final > .about-final-grid[data-about-wide-layout='closing'] > .about-final-copy,
  body.about-page main > section.about-final > .about-final-grid[data-about-wide-layout='closing'] > .about-final-continuation {
    width: calc(100% - var(--about-wide-text-gutter)) !important;
    max-width: calc(100% - var(--about-wide-text-gutter)) !important;
    margin-left: var(--about-wide-text-gutter) !important;
    margin-right: 0 !important;
  }

  body.about-page main > section.about-final > .about-final-grid[data-about-wide-layout='closing'] > figure.about-media {
    width: 100% !important;
    max-width: 100% !important;
    margin-inline: auto !important;
    justify-self: center !important;
  }
}

@media (max-width: 1100px) {
  body.about-page .about-story .about-chapter-grid > .about-media-stack {
    grid-column: 1 !important;
    grid-row: auto !important;
    order: 1 !important;
    width: 100%;
  }

  body.about-page .about-media-stack > figure.about-media {
    order: 1 !important;
  }

  body.about-page .about-media-stack > .about-chapter-support {
    order: 2 !important;
  }
}

@media (max-width: 680px) {
  body.about-page .about-media-stack {
    gap: .85rem;
  }

  body.about-page .about-chapter-support--principles .about-principles {
    gap: .65rem;
  }
}