@layer reset, base, layout, components, pages, utilities;

@layer reset {
  *,
  *::before,
  *::after {
    box-sizing: border-box;
  }

  html {
    scroll-behavior: smooth;
  }

  body,
  h1,
  h2,
  h3,
  h4,
  p,
  ul,
  ol,
  figure,
  blockquote {
    margin: 0;
  }

  ul,
  ol {
    padding: 0;
    list-style: none;
  }

  button,
  input,
  select,
  textarea {
    font: inherit;
  }
}

@layer base {
  :root {
    color-scheme: light;
    /* Industrial Terminal: graphite structure, teal information, amber attention. */
    --ink: #0e1615;
    --ink-soft: #162522;
    --paper: #fafbf8;
    --mist: #eef1ec;
    --line: #d4dcd5;
    --line-dark: #42544c;
    --muted: #56615b;
    --muted-light: #979793;
    --signal: #e8a33d;
    --signal-ink: #825409;
    --teal: #1f6f6b;
    --teal-bright: #75bdb2;
    --teal-mist: #e1ede7;
    --page-pad: clamp(22px, 4.5vw, 72px);
    --content-max: 1380px;
    --section-space: clamp(86px, 11vw, 160px);
  }

  body {
    min-width: 320px;
    overflow-x: hidden;
    background: var(--paper);
    color: var(--ink);
    font-family: "Geist", Arial, sans-serif;
    -webkit-font-smoothing: antialiased;
    text-rendering: optimizeLegibility;
  }

  a {
    color: inherit;
    text-decoration: none;
  }

  ::selection {
    background: var(--signal);
    color: var(--paper);
  }

  a:focus-visible,
  button:focus-visible,
  summary:focus-visible,
  input:focus-visible,
  textarea:focus-visible,
  select:focus-visible {
    outline: 2px solid var(--signal);
    outline-offset: 3px;
  }
}

@layer layout {
  .shell {
    width: min(var(--content-max), calc(100% - (var(--page-pad) * 2)));
    margin: 0 auto;
  }

  .section {
    padding: var(--section-space) 0;
    scroll-margin-top: 86px;
  }

  .section--mist {
    background: var(--mist);
  }

  .section--ink {
    background: var(--ink);
    color: var(--paper);
  }

  .split-grid {
    display: grid;
    grid-template-columns: minmax(0, 1.05fr) minmax(280px, 0.75fr);
    gap: clamp(42px, 9vw, 160px);
    align-items: end;
  }

  .two-up {
    display: grid;
    grid-template-columns: repeat(2, minmax(0, 1fr));
    gap: 1px;
    background: var(--line);
  }

  .three-up {
    display: grid;
    grid-template-columns: repeat(3, minmax(0, 1fr));
    gap: 1px;
    background: var(--line);
  }

  .four-up {
    display: grid;
    grid-template-columns: repeat(4, minmax(0, 1fr));
    gap: 1px;
    background: var(--line);
  }
}

@layer components {
  /* Shared header */
  .skip-link {
    z-index: 20;
    position: absolute;
    top: -60px;
    left: 20px;
    padding: 12px 15px;
    background: var(--paper);
    color: var(--ink);
    font-size: 12px;
    font-weight: 500;
  }

  .skip-link:focus {
    top: 12px;
  }

  .site-header {
    z-index: 10;
    position: sticky;
    top: 0;
    background: var(--ink);
    border-top: 2px solid var(--signal);
    border-bottom: 2px solid var(--signal);
    color: var(--paper);
  }

  .site-header__inner {
    width: min(var(--content-max), calc(100% - (var(--page-pad) * 2)));
    height: 74px;
    margin: 0 auto;
    display: grid;
    grid-template-columns: minmax(154px, 1fr) auto minmax(154px, 1fr);
    align-items: center;
  }

  .site-brand,
  .footer-brand {
    display: inline-flex;
    align-items: center;
    gap: 10px;
    font-size: 15px;
    font-weight: 600;
    letter-spacing: -0.05em;
    line-height: 1;
  }

  .brand-mark {
    width: 16px;
    height: 16px;
    position: relative;
    display: inline-block;
    flex: 0 0 16px;
  }

  .brand-mark::before,
  .brand-mark::after {
    position: absolute;
    top: 0;
    width: 6px;
    height: 16px;
    background: currentColor;
    content: "";
    transform: skewX(-21deg);
  }

  .brand-mark::before {
    left: 1px;
  }

  .brand-mark::after {
    right: 1px;
  }

  .site-nav {
    display: flex;
    align-items: center;
    justify-self: center;
    gap: clamp(20px, 2.8vw, 46px);
    color: #d4d4d0;
    font-size: 11px;
    font-weight: 500;
    letter-spacing: -0.018em;
    text-transform: uppercase;
  }

  .site-nav a {
    transition: color 150ms ease;
  }

  .site-nav a:hover,
  .site-nav a[aria-current="page"] {
    color: var(--signal);
  }

  .site-header__cta,
  .site-header__cta.text-link {
    justify-self: end;
    display: inline-flex;
    min-height: 0;
    padding: 0;
    border: 0;
    color: var(--paper);
    font-size: 11px;
    font-weight: 500;
    letter-spacing: -0.018em;
    text-transform: uppercase;
    transition: color 150ms ease;
  }

  .site-header__cta:hover,
  .site-header__cta.text-link:hover {
    color: var(--signal);
  }

  .mobile-menu {
    display: none;
    justify-self: end;
    position: relative;
  }

  button.mobile-menu {
    width: 28px;
    height: 28px;
    padding: 0;
    border: 0;
    background: transparent;
    color: var(--paper);
    cursor: pointer;
  }

  button.mobile-menu > span[aria-hidden="true"] {
    width: 19px;
    height: 1px;
    position: absolute;
    right: 0;
    background: currentColor;
    transition: transform 160ms ease;
  }

  button.mobile-menu > span[aria-hidden="true"]:first-of-type {
    top: 10px;
  }

  button.mobile-menu > span[aria-hidden="true"]:last-of-type {
    top: 17px;
  }

  .site-header.is-menu-open button.mobile-menu > span[aria-hidden="true"]:first-of-type {
    top: 14px;
    transform: rotate(45deg);
  }

  .site-header.is-menu-open button.mobile-menu > span[aria-hidden="true"]:last-of-type {
    top: 14px;
    transform: rotate(-45deg);
  }

  .mobile-menu summary {
    cursor: pointer;
    list-style: none;
    color: var(--paper);
    font-size: 11px;
    font-weight: 500;
    letter-spacing: 0.04em;
    text-transform: uppercase;
  }

  .mobile-menu summary::-webkit-details-marker {
    display: none;
  }

  .mobile-menu__panel {
    width: 220px;
    padding: 17px;
    position: absolute;
    top: 31px;
    right: 0;
    background: var(--ink);
    border: 1px solid var(--line-dark);
  }

  .mobile-menu__panel a {
    display: block;
    padding: 10px 0;
    color: #dbdbd7;
    border-bottom: 1px solid #393936;
    font-size: 13px;
    letter-spacing: -0.02em;
  }

  .mobile-menu__panel a:last-child {
    border-bottom: 0;
  }

  /* Typography */
  .eyebrow {
    display: flex;
    align-items: center;
    gap: 10px;
    margin-bottom: 24px;
    color: #555553;
    font-size: 10px;
    font-weight: 500;
    letter-spacing: 0.1em;
    line-height: 1;
    text-transform: uppercase;
  }

  .eyebrow::before {
    width: 21px;
    height: 1px;
    background: currentColor;
    content: "";
  }

  .section--ink .eyebrow,
  .site-footer .eyebrow {
    color: #a9aaa6;
  }

  .display {
    max-width: 920px;
    font-size: clamp(44px, 6.15vw, 94px);
    font-weight: 450;
    letter-spacing: -0.076em;
    line-height: 0.93;
  }

  .display--xl {
    max-width: 1020px;
    font-size: clamp(56px, 7.2vw, 112px);
  }

  .display--mid {
    max-width: 810px;
    font-size: clamp(40px, 5.15vw, 77px);
  }

  .display span,
  .section-heading span {
    color: #797975;
  }

  .section--ink .display span,
  .site-footer .display span {
    color: #9b9c98;
  }

  .lede {
    max-width: 390px;
    margin-top: 33px;
    color: #5c5c59;
    font-size: clamp(15px, 1.35vw, 18px);
    font-weight: 400;
    letter-spacing: -0.032em;
    line-height: 1.47;
  }

  .section--ink .lede,
  .site-footer .lede {
    color: #c0c1bd;
  }

  .section-heading {
    max-width: 770px;
    font-size: clamp(37px, 4.6vw, 68px);
    font-weight: 450;
    letter-spacing: -0.07em;
    line-height: 0.95;
  }

  .meta,
  .small-copy {
    color: var(--muted);
    font-size: 12px;
    letter-spacing: -0.02em;
    line-height: 1.45;
  }

  .section--ink .meta,
  .section--ink .small-copy {
    color: #b8b9b5;
  }

  /* Actions */
  .button {
    min-height: 46px;
    padding: 0 17px;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    gap: 14px;
    border: 1px solid var(--ink);
    background: transparent;
    color: var(--ink);
    cursor: pointer;
    font-size: 12px;
    font-weight: 500;
    letter-spacing: -0.025em;
    transition: transform 150ms ease, background-color 150ms ease, color 150ms ease;
  }

  .button:hover {
    transform: translateY(-2px);
  }

  .button--signal {
    border-color: var(--ink);
    background: var(--ink);
    color: var(--paper);
  }

  .button--signal:hover {
    background: var(--signal);
    border-color: var(--signal);
  }

  .button--light {
    border-color: var(--paper);
    background: var(--paper);
    color: var(--ink);
  }

  .button--outline-light {
    border-color: #6c6c68;
    color: var(--paper);
  }

  .button--outline-light:hover {
    border-color: var(--paper);
    background: var(--paper);
    color: var(--ink);
  }

  .button-arrow,
  .link-arrow {
    width: 19px;
    height: 19px;
    border: 1px solid currentColor;
    border-radius: 50%;
    display: grid;
    place-items: center;
    font-size: 14px;
    font-weight: 400;
    line-height: 1;
  }

  .text-link {
    display: inline-flex;
    align-items: center;
    gap: 9px;
    padding-bottom: 2px;
    border-bottom: 1px solid #b5b5b2;
    color: #555553;
    font-size: 12px;
    font-weight: 500;
    letter-spacing: -0.025em;
  }

  .section--ink .text-link {
    border-color: #767672;
    color: #e3e3df;
  }

  /* Shared panels, cards and lists */
  .card-grid {
    margin-top: 75px;
    display: grid;
    grid-template-columns: repeat(3, minmax(0, 1fr));
    gap: 1px;
    background: var(--line);
    border-top: 1px solid var(--line);
  }

  .card {
    min-height: 270px;
    padding: 25px 26px 28px;
    display: flex;
    flex-direction: column;
    justify-content: space-between;
    /* background-COLOR, not the shorthand, here and on every other card face
       (.section--mist .card, .sector-card, .article-card, .article-card--lead).
       The lit face in the premium pass at the foot of this file is a
       background-image, and the shorthand would reset it to none — from
       @layer pages, which outranks it. */
    background-color: var(--paper);
  }

  .section--mist .card {
    background-color: var(--mist);
  }

  .card__number,
  .item-number {
    color: #8b8b87;
    font-size: 10px;
    font-weight: 500;
    letter-spacing: 0.085em;
    line-height: 1;
    text-transform: uppercase;
  }

  .card h3 {
    max-width: 300px;
    margin: 0 0 11px;
    font-size: clamp(21px, 2.15vw, 30px);
    font-weight: 500;
    letter-spacing: -0.055em;
    line-height: 0.98;
  }

  .card p {
    max-width: 310px;
    color: #63635f;
    font-size: 13px;
    letter-spacing: -0.024em;
    line-height: 1.46;
  }

  .rule-list {
    margin-top: 74px;
    border-top: 1px solid var(--line);
  }

  .rule-list__item,
  .ledger__row,
  .trade-row {
    min-height: 118px;
    display: grid;
    grid-template-columns: 62px minmax(0, 1.05fr) minmax(180px, 0.75fr) 24px;
    align-items: center;
    gap: 16px;
    border-bottom: 1px solid var(--line);
  }

  .rule-list__item h3,
  .ledger__title,
  .trade-row h3 {
    margin: 0;
    font-size: clamp(19px, 2.1vw, 28px);
    font-weight: 500;
    letter-spacing: -0.052em;
    line-height: 1;
  }

  .rule-list__item p,
  .ledger__copy,
  .trade-row p {
    max-width: 380px;
    color: var(--muted);
    font-size: 13px;
    letter-spacing: -0.024em;
    line-height: 1.42;
  }

  .row-arrow {
    width: 20px;
    height: 20px;
    border: 1px solid #aaa9a5;
    border-radius: 50%;
    display: grid;
    place-items: center;
    color: var(--ink);
    font-size: 13px;
    line-height: 1;
  }

  .metric-grid {
    margin-top: 75px;
    display: grid;
    grid-template-columns: repeat(3, 1fr);
    border-top: 1px solid var(--line);
  }

  .metric {
    min-height: 208px;
    padding: 23px 26px 25px 0;
    display: flex;
    flex-direction: column;
    justify-content: space-between;
    border-right: 1px solid var(--line);
  }

  .metric:not(:first-child) {
    padding-left: 26px;
  }

  .metric:last-child {
    border-right: 0;
  }

  .metric__value {
    font-size: clamp(38px, 4.2vw, 63px);
    font-weight: 450;
    letter-spacing: -0.071em;
    line-height: 0.86;
  }

  .metric__label {
    max-width: 200px;
    color: var(--muted);
    font-size: 13px;
    letter-spacing: -0.025em;
    line-height: 1.35;
  }

  .ledger {
    margin-top: 78px;
    border-top: 1px solid var(--line);
  }

  .ledger__row {
    grid-template-columns: 70px minmax(0, 0.92fr) minmax(180px, 0.78fr) minmax(130px, 0.42fr);
  }

  .ledger__outcome {
    color: #545451;
    font-size: 12px;
    font-weight: 500;
    letter-spacing: -0.02em;
  }

  .section--ink .ledger {
    border-color: #41413e;
  }

  .section--ink .ledger__row {
    border-color: #41413e;
  }

  .section--ink .ledger__title {
    color: var(--paper);
  }

  .section--ink .ledger__copy {
    color: #b6b7b3;
  }

  .section--ink .ledger__outcome {
    color: #e6e6e2;
  }

  /* Disclosure */
  .disclosures {
    margin-top: 76px;
    border-top: 1px solid var(--line);
  }

  .disclosure {
    border-bottom: 1px solid var(--line);
  }

  .disclosure summary {
    min-height: 92px;
    padding: 20px 0;
    display: grid;
    grid-template-columns: 68px minmax(0, 1fr) 24px;
    align-items: center;
    gap: 14px;
    cursor: pointer;
    list-style: none;
  }

  .disclosure summary::-webkit-details-marker {
    display: none;
  }

  .disclosure__title {
    font-size: clamp(19px, 2.1vw, 28px);
    font-weight: 500;
    letter-spacing: -0.054em;
  }

  .disclosure__icon {
    width: 20px;
    height: 20px;
    position: relative;
    border: 1px solid #a6a6a2;
    border-radius: 50%;
  }

  .disclosure__icon::before,
  .disclosure__icon::after {
    position: absolute;
    top: 9px;
    left: 5px;
    width: 8px;
    height: 1px;
    background: currentColor;
    content: "";
    transition: transform 160ms ease;
  }

  .disclosure__icon::after {
    transform: rotate(90deg);
  }

  .disclosure[open] .disclosure__icon::after {
    transform: rotate(0deg);
  }

  .disclosure__body {
    max-width: 490px;
    margin: -1px 44px 0 auto;
    padding: 0 0 30px;
    color: var(--muted);
    font-size: 14px;
    letter-spacing: -0.025em;
    line-height: 1.48;
  }

  .section--ink .disclosures,
  .section--ink .disclosure {
    border-color: #41413e;
  }

  .section--ink .disclosure__body {
    color: #b8b9b5;
  }

  .section--ink .disclosure__icon {
    border-color: #777773;
  }

  /* Footer */
  .site-footer {
    min-height: 525px;
    overflow: hidden;
    position: relative;
    padding: clamp(72px, 8.5vw, 126px) 0 27px;
    background: var(--ink);
    border-top: 2px solid var(--signal);
    color: var(--paper);
  }

  .site-footer .shell {
    min-height: 370px;
    display: flex;
    flex-direction: column;
  }

  .footer-wordmark {
    z-index: 0;
    position: absolute;
    right: -0.052em;
    bottom: -0.14em;
    color: #1b1b19;
    font-size: clamp(105px, 17.5vw, 250px);
    font-weight: 600;
    letter-spacing: -0.108em;
    line-height: 0.75;
    pointer-events: none;
    user-select: none;
    white-space: nowrap;
  }

  .footer-grid,
  .footer-bottom {
    z-index: 1;
    position: relative;
  }

  .footer-grid {
    display: flex;
    align-items: flex-start;
    gap: clamp(30px, 6vw, 108px);
  }

  .footer-intro {
    flex: 1 1 280px;
  }

  .footer-links {
    flex: 0 1 165px;
  }

  .footer-copy,
  .footer-intro > p:not(.footer-copy) {
    max-width: 295px;
    margin-top: 25px;
    color: #d9dad6;
    font-size: clamp(18px, 1.7vw, 24px);
    font-weight: 450;
    letter-spacing: -0.045em;
    line-height: 1.05;
  }

  .footer-links {
    display: flex;
    flex-direction: column;
    align-items: flex-start;
  }

  .footer-links h2,
  .footer-links h3 {
    margin: 0 0 12px;
    color: var(--signal);
    font-size: 11px;
    font-weight: 500;
    letter-spacing: -0.02em;
  }

  .footer-links a {
    margin: 0 0 8px;
    color: #e1e1de;
    font-size: 12px;
    font-weight: 450;
    letter-spacing: -0.02em;
  }

  .footer-links a:hover {
    color: var(--signal);
  }

  .footer-links p {
    max-width: 175px;
    margin: 0 0 13px;
    color: #b7b8b4;
    font-size: 12px;
    letter-spacing: -0.02em;
    line-height: 1.4;
  }

  .footer-access {
    z-index: 1;
    position: relative;
    margin-top: clamp(46px, 6vw, 84px);
    padding: 22px 0;
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 28px;
    border-top: 1px solid #474744;
    border-bottom: 1px solid #474744;
  }

  .footer-access__eyebrow {
    margin: 0 0 7px;
    color: var(--signal);
    font-size: 10px;
    font-weight: 600;
    letter-spacing: 0.11em;
    line-height: 1;
    text-transform: uppercase;
  }

  .footer-access h2 {
    margin: 0;
    color: #f0f0ec;
    font-size: clamp(17px, 1.5vw, 22px);
    font-weight: 450;
    letter-spacing: -0.035em;
    line-height: 1.08;
  }

  .footer-sign-in {
    min-width: 116px;
    min-height: 43px;
    padding: 11px 18px;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    flex: 0 0 auto;
    border: 1px solid #777773;
    color: #f0f0ec;
    font-size: 11px;
    font-weight: 600;
    letter-spacing: 0.08em;
    line-height: 1;
    text-transform: uppercase;
  }

  .footer-sign-in[aria-disabled='true'] {
    cursor: default;
  }

  .footer-bottom {
    margin-top: auto;
    padding-top: 14px;
    display: flex;
    justify-content: space-between;
    color: #a6a7a3;
    border-top: 1px solid #474744;
    font-size: 10px;
    font-weight: 450;
    letter-spacing: 0.01em;
  }

  .footer-bottom p {
    margin: 0;
  }

  .footer-bottom span {
    color: #d6d6d3;
  }

  .footer-bottom div {
    display: flex;
    gap: 14px;
  }

  .footer-bottom a:hover {
    color: var(--signal);
  }
}

@layer pages {
  .page-hero {
    min-height: min(760px, calc(100svh - 76px));
    padding: clamp(92px, 12vw, 176px) 0 clamp(76px, 8vw, 115px);
    display: flex;
    align-items: end;
    border-bottom: 1px solid var(--line);
  }

  .home-hero {
    overflow: hidden;
    position: relative;
    isolation: isolate;
    background: var(--ink);
    color: var(--paper);
  }

  .home-hero__media,
  .home-hero__video,
  .home-hero__veil {
    position: absolute;
    inset: 0;
  }

  .home-hero__media {
    z-index: 0;
    overflow: hidden;
    background: linear-gradient(135deg, #0e1b1a, #18302d);
  }

  .home-hero__video {
    width: 100%;
    height: 100%;
    display: block;
    object-fit: cover;
    object-position: center;
    filter: saturate(0.76) contrast(0.98) brightness(0.72);
  }

  .home-hero__veil {
    background:
      linear-gradient(90deg, rgb(9 12 12 / 0.78) 0%, rgb(9 12 12 / 0.58) 43%, rgb(9 12 12 / 0.32) 100%),
      linear-gradient(180deg, rgb(8 10 10 / 0.42), transparent 35%, rgb(8 10 10 / 0.62));
  }

  .home-hero__content,
  .home-hero > .intro-rule {
    z-index: 1;
    position: relative;
  }

  .home-hero .display span {
    color: #d5d6d1;
  }

  .home-hero .lede {
    color: #e2e2dd;
  }

  .home-hero .text-link {
    color: #f0f0ea;
    border-color: rgb(255 255 255 / 0.52);
  }

  .home-hero .intro-rule {
    border-color: rgb(255 255 255 / 0.28);
    color: #d9dad5;
  }

  .page-hero--short {
    min-height: auto;
  }

  .page-hero__grid {
    display: grid;
    grid-template-columns: minmax(0, 1.05fr) minmax(260px, 0.55fr);
    gap: clamp(42px, 10vw, 180px);
    align-items: end;
  }

  .page-hero__aside {
    padding-bottom: 5px;
  }

  .page-hero__aside .button,
  .page-hero__aside .text-link {
    margin-top: 27px;
  }

  .page-hero__content,
  .page-hero__copy {
    max-width: 850px;
  }

  .page-hero__actions,
  .button-row {
    margin-top: 29px;
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    gap: 15px;
  }

  .page-hero__foot {
    margin-top: clamp(54px, 8vw, 106px);
    padding-top: 14px;
    display: flex;
    justify-content: space-between;
    gap: 24px;
    border-top: 1px solid var(--line);
    color: #777773;
    font-size: 10px;
    letter-spacing: 0.01em;
  }

  .page-hero__foot p {
    max-width: 320px;
  }

  .page-hero__foot span {
    color: #444441;
  }

  .page-hero__ledger {
    margin-top: 52px;
  }

  /* Hero ledgers use a deliberately compact, three-piece row. The full ledger
     layout below has room for an outcome column; these narrow hero asides do not. */
  .page-hero__ledger .ledger__head {
    min-height: 42px;
    grid-template-columns: minmax(0, 1fr) auto;
    gap: 12px;
  }

  .page-hero__ledger .ledger__head > span {
    justify-self: end;
  }

  .page-hero__ledger .ledger__row {
    min-height: 0;
    padding: 16px 0;
    grid-template-columns: 28px minmax(0, 1fr);
    grid-template-areas:
      "number title"
      ". copy";
    align-items: start;
    gap: 5px 12px;
  }

  .page-hero__ledger .ledger__row > span:first-child {
    grid-area: number;
    padding-top: 2px;
    color: #8b8b87;
    font-size: 10px;
    font-weight: 500;
    letter-spacing: 0.085em;
    line-height: 1;
  }

  .page-hero__ledger .ledger__title {
    grid-area: title;
    min-width: 0;
    font-size: clamp(15px, 1.4vw, 19px);
    letter-spacing: -0.042em;
    line-height: 1.02;
  }

  .page-hero__ledger .ledger__copy {
    grid-area: copy;
    min-width: 0;
    max-width: none;
    margin: 0;
    font-size: 12px;
    line-height: 1.35;
  }

  div.section-heading,
  .section__heading {
    display: grid;
    grid-template-columns: minmax(0, 1fr) minmax(220px, 0.46fr);
    gap: clamp(32px, 9vw, 150px);
    align-items: end;
  }

  .section-heading h2,
  .section__heading h2,
  .platform-intro h2,
  .platform-outro h2,
  .capability-band h2,
  .capability-outro h2 {
    max-width: 780px;
    font-size: clamp(38px, 5vw, 72px);
    font-weight: 450;
    letter-spacing: -0.072em;
    line-height: 0.94;
  }

  h2.section-heading {
    max-width: 780px;
    display: block;
    font-size: clamp(38px, 5vw, 72px);
    font-weight: 450;
    letter-spacing: -0.072em;
    line-height: 0.94;
  }

  .section-heading h2 span,
  .section__heading h2 span,
  .platform-intro h2 span,
  .platform-outro h2 span,
  .capability-band h2 span,
  .capability-outro h2 span {
    color: #797975;
  }

  h2.section-heading span {
    color: #797975;
  }

  .section--ink .section-heading h2 span,
  .section--ink .section__heading h2 span,
  .section--ink .platform-outro h2 span,
  .section--ink .capability-band h2 span {
    color: #9b9c98;
  }

  .section-heading__aside,
  .section__heading--split > p,
  .section__heading > p {
    max-width: 330px;
    color: var(--muted);
    font-size: 14px;
    letter-spacing: -0.025em;
    line-height: 1.46;
  }

  .section--ink .section-heading__aside,
  .section--ink .section__heading--split > p,
  .section--ink .section__heading > p {
    color: #bebfbb;
  }

  .section__callout {
    display: grid;
    grid-template-columns: minmax(0, 0.95fr) minmax(230px, 0.75fr);
    gap: clamp(36px, 8vw, 145px);
    align-items: end;
  }

  .section__callout h2 {
    max-width: 720px;
    font-size: clamp(34px, 4.7vw, 67px);
    font-weight: 450;
    letter-spacing: -0.071em;
    line-height: 0.94;
  }

  .section__callout h2 span {
    color: #9b9c98;
  }

  .section__callout p:not(.eyebrow) {
    max-width: 350px;
    color: #c1c2be;
    font-size: 14px;
    letter-spacing: -0.025em;
    line-height: 1.46;
  }

  .card__index,
  .capability-card__index,
  .disclosure__index,
  .disclosure__number,
  .ledger__number {
    color: #8b8b87;
    font-size: 10px;
    font-weight: 500;
    letter-spacing: 0.085em;
    line-height: 1;
    text-transform: uppercase;
  }

  .ledger__head {
    min-height: 43px;
    display: grid;
    grid-template-columns: 70px minmax(0, 0.92fr) minmax(180px, 0.78fr) minmax(130px, 0.42fr);
    align-items: center;
    gap: 16px;
    color: #7c7c78;
    border-bottom: 1px solid var(--line);
    font-size: 10px;
    font-weight: 500;
    letter-spacing: 0.07em;
    text-transform: uppercase;
  }

  .ledger__row h3 {
    margin: 0;
    font-size: clamp(19px, 2.1vw, 28px);
    font-weight: 500;
    letter-spacing: -0.052em;
    line-height: 1;
  }

  .ledger__row p {
    max-width: 390px;
    color: var(--muted);
    font-size: 13px;
    letter-spacing: -0.024em;
    line-height: 1.42;
  }

  .ledger--trades .ledger__row {
    min-height: 104px;
  }

  .ledger--trades .ledger__row h3 {
    font-size: clamp(20px, 2.35vw, 31px);
  }

  .ledger__row .text-link {
    justify-self: start;
  }

  .intro-rule {
    margin-top: 75px;
    padding-top: 17px;
    display: flex;
    align-items: flex-start;
    justify-content: space-between;
    gap: 25px;
    border-top: 1px solid var(--line);
    color: #73736f;
    font-size: 11px;
    letter-spacing: -0.02em;
  }

  .intro-rule span:last-child {
    color: #454542;
  }

  /* Home-specific operating view */
  .state-card {
    border: 1px solid var(--line);
    background: var(--paper);
  }

  .state-card__bar {
    min-height: 48px;
    padding: 0 17px;
    display: flex;
    align-items: center;
    justify-content: space-between;
    border-bottom: 1px solid var(--line);
    color: #595956;
    font-size: 10px;
    font-weight: 500;
    letter-spacing: 0.07em;
    text-transform: uppercase;
  }

  .state-card__live {
    display: flex;
    align-items: center;
    gap: 6px;
    font-size: 9px;
  }

  .state-card__live::before {
    width: 5px;
    height: 5px;
    border-radius: 50%;
    background: var(--signal);
    content: "";
  }

  .state-card__body {
    padding: 0 18px;
  }

  .state-card__heading {
    padding: 22px 0 19px;
    display: flex;
    align-items: flex-start;
    justify-content: space-between;
    gap: 16px;
  }

  .state-card__heading h2 {
    margin: 0 0 4px;
    font-size: 18px;
    font-weight: 500;
    letter-spacing: -0.047em;
  }

  .state-card__heading p {
    color: #858582;
    font-size: 11px;
    letter-spacing: -0.02em;
  }

  .state-card__count {
    min-width: 40px;
    padding: 5px 7px;
    background: var(--mist);
    color: #575754;
    font-size: 10px;
    font-weight: 500;
    text-align: center;
  }

  .state-card__list {
    border-top: 1px solid var(--line);
  }

  .state-card__list li {
    min-height: 65px;
    display: grid;
    grid-template-columns: 8px minmax(0, 1fr) auto;
    align-items: center;
    gap: 10px;
    border-bottom: 1px solid var(--line);
  }

  .state-card__dot {
    width: 7px;
    height: 7px;
    border: 1px solid #aaa9a5;
    border-radius: 50%;
  }

  .state-card__dot--active {
    border-color: var(--signal);
    background: var(--signal);
  }

  .state-card__task strong,
  .state-card__task span {
    display: block;
  }

  .state-card__task strong {
    overflow: hidden;
    font-size: 12px;
    font-weight: 500;
    letter-spacing: -0.027em;
    text-overflow: ellipsis;
    white-space: nowrap;
  }

  .state-card__task span,
  .state-card__list time {
    margin-top: 3px;
    color: #888884;
    font-size: 10px;
    letter-spacing: -0.015em;
  }

  .state-card__list time {
    margin: 0;
  }

  .state-card__foot {
    padding: 16px 0 17px;
    display: flex;
    justify-content: space-between;
    color: #7e7e7a;
    font-size: 10px;
  }

  .activity-ticker {
    overflow: hidden;
    padding: 17px 0;
    background: var(--ink);
    color: var(--paper);
  }

  .activity-ticker__track {
    width: max-content;
    display: flex;
    align-items: center;
    animation: ticker-scroll 32s linear infinite;
  }

  .activity-ticker__group {
    display: flex;
    align-items: center;
  }

  .activity-ticker__item {
    margin-right: 36px;
    display: flex;
    align-items: center;
    gap: 13px;
    color: #e2e2de;
    font-size: 11px;
    font-weight: 450;
    letter-spacing: -0.015em;
    white-space: nowrap;
  }

  .activity-ticker__item b {
    color: var(--paper);
    font-weight: 550;
  }

  .activity-ticker__item em {
    color: #9e9e9a;
    font-size: 10px;
    font-style: normal;
  }

  .activity-ticker__dot {
    width: 4px;
    height: 4px;
    border-radius: 50%;
    background: var(--signal);
  }

  .activity-ticker:hover .activity-ticker__track {
    animation-play-state: paused;
  }

  @keyframes ticker-scroll {
    to {
      transform: translateX(-50%);
    }
  }

  /* Site Explorer — the scroll track advances the instrument; only the wave drifts on its own. */
  .site-explorer {
    overflow: clip;
    background: var(--ink);
    color: var(--paper);
  }

  .site-explorer__intro {
    padding: var(--section-space) 0 clamp(54px, 8vw, 112px);
  }

  .site-explorer .section-heading h2 span {
    color: #a8a9a4;
  }

  .site-explorer .section-heading__aside {
    color: #c0c1bd;
  }

  .ex-track {
    height: 640vh;
    position: relative;
  }

  .ex-pin {
    height: calc(100svh - 78px);
    min-height: 580px;
    overflow: hidden;
    position: sticky;
    top: 78px;
    display: flex;
    align-items: center;
    border-top: 1px solid #393936;
    border-bottom: 1px solid #393936;
  }

  .ex-frame {
    height: 100%;
    position: relative;
    display: flex;
    align-items: center;
  }

  .ex-frame__header {
    z-index: 2;
    position: absolute;
    top: clamp(20px, 3vh, 34px);
    right: 0;
    left: 0;
    display: flex;
    justify-content: space-between;
    gap: 20px;
    color: #a9aaa5;
    font-size: 10px;
    font-weight: 500;
    letter-spacing: 0.085em;
    line-height: 1;
    text-transform: uppercase;
  }

  .ex-frame__header span:last-child {
    color: var(--signal);
  }

  .ex-layout {
    z-index: 1;
    width: 100%;
    position: relative;
  }

  .ex-instrument {
    position: relative;
    justify-self: center;
    opacity: 1;
    transform-origin: center;
    will-change: transform, opacity;
  }

  .ex-dial-wrap {
    width: 300px;
  }

  .ex-dial {
    width: 300px;
    height: 300px;
    display: block;
    overflow: visible;
  }

  .ex-dial__ring,
  .ex-dial__cross {
    fill: none;
    stroke: #5a5a56;
    stroke-width: 1;
  }

  .ex-dial__ring--inner {
    stroke: #3e3e3b;
    stroke-dasharray: 2 5;
  }

  .ex-dial__cross {
    stroke: #343431;
    stroke-dasharray: 2 6;
  }

  .ex-dial__bearing line {
    stroke: #777773;
    stroke-width: 1;
    transition: stroke 160ms ease;
  }

  .ex-dial__bearing text {
    fill: #a6a7a2;
    font-family: "Geist", Arial, sans-serif;
    font-size: 11px;
    font-weight: 500;
    letter-spacing: 0.04em;
    transition: fill 160ms ease;
  }

  .ex-dial__anchor {
    fill: #6e6e6a;
    opacity: 0.7;
    transition: fill 160ms ease, opacity 160ms ease;
  }

  .ex-dial__bearing.is-active line {
    stroke: var(--signal);
  }

  .ex-dial__bearing.is-active text {
    fill: var(--paper);
  }

  .ex-dial__bearing.is-active .ex-dial__anchor {
    fill: var(--signal);
    opacity: 1;
  }

  .ex-sweep {
    fill: rgb(232 163 61 / 0.1);
    stroke: var(--signal);
    stroke-width: 1.25;
    transform: translate3d(0, -107px, 0);
    transform-box: fill-box;
    transform-origin: center;
    will-change: transform;
  }

  .ex-dial__core {
    fill: #181817;
    stroke: #4a4a47;
    stroke-width: 1;
  }

  .ex-dial__core-label,
  .ex-dial__core-value {
    fill: #b6b7b2;
    font-family: "Geist", Arial, sans-serif;
    font-size: 8px;
    font-weight: 500;
    letter-spacing: 0.14em;
  }

  .ex-dial__core-value {
    fill: var(--paper);
    font-size: 10px;
  }

  .ex-wave {
    fill: none;
    stroke: url(#ex-wave-gradient);
    stroke-width: 1.25;
    transform-box: view-box;
    transform-origin: center;
    animation: ex-wave-drift 7.5s ease-in-out infinite alternate;
  }

  @keyframes ex-wave-drift {
    from {
      transform: translateX(-8px) scaleX(1.025);
    }

    to {
      transform: translateX(8px) scaleX(0.975);
    }
  }

  .ex-dial-wrap__caption {
    margin-top: 19px;
    color: #8e8f8a;
    font-size: 10px;
    letter-spacing: 0.02em;
    text-align: center;
  }

  .ex-readout {
    width: clamp(300px, 32vw, 420px);
    box-sizing: content-box;
    position: relative;
    padding: clamp(30px, 4vw, 54px) clamp(30px, 4vw, 58px);
    background: radial-gradient(ellipse 84% 76% at 50% 50%, rgb(255 255 255 / 0.105), rgb(255 255 255 / 0.035) 52%, transparent 100%);
  }

  .ex-readout__stack {
    height: var(--ex-readout-height, auto);
    display: grid;
    align-items: center;
  }

  .ex-readout__block {
    min-height: var(--ex-readout-height, 0px);
    grid-area: 1 / 1;
    display: grid;
    align-content: center;
    visibility: hidden;
    opacity: 0;
    transform: translateY(10px);
    transition: opacity 180ms ease, transform 180ms ease, visibility 0s linear 180ms;
  }

  .ex-readout__block.is-active {
    visibility: visible;
    opacity: 1;
    transform: translateY(0);
    transition-delay: 0s;
  }

  .ex-readout__eyebrow {
    color: var(--signal);
    font-size: 10px;
    font-weight: 500;
    letter-spacing: 0.11em;
    line-height: 1;
    text-transform: uppercase;
  }

  .ex-readout h3 {
    max-width: 370px;
    margin: 17px 0 15px;
    font-size: clamp(32px, 3.7vw, 51px);
    font-weight: 450;
    letter-spacing: -0.07em;
    line-height: 0.91;
  }

  .ex-readout__content > p:not(.ex-readout__eyebrow) {
    max-width: 370px;
    color: #c4c5c0;
    font-size: 14px;
    letter-spacing: -0.025em;
    line-height: 1.45;
  }

  .ex-readout dl {
    margin-top: 25px;
    border-top: 1px solid #4a4a47;
  }

  .ex-readout dl div {
    min-height: 32px;
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 18px;
    border-bottom: 1px solid #4a4a47;
  }

  .ex-readout dt,
  .ex-readout dd {
    margin: 0;
    font-size: 10px;
    letter-spacing: -0.01em;
  }

  .ex-readout dt {
    color: #969792;
  }

  .ex-readout dd {
    color: var(--paper);
    font-weight: 500;
    text-align: right;
  }

  .ex-manifest {
    min-width: 0;
    position: relative;
    border-top: 1px solid #484844;
  }

  .ex-manifest__row {
    min-height: 42px;
    position: relative;
    display: grid;
    grid-template-columns: 31px minmax(0, 1fr) auto;
    align-items: center;
    gap: 11px;
    color: #a9aaa5;
    border-bottom: 1px solid #484844;
  }

  .ex-manifest__row::before {
    width: 0;
    height: 1px;
    position: absolute;
    top: 50%;
    left: -20px;
    background: var(--signal);
    content: "";
    transition: width 180ms ease;
  }

  .ex-manifest__row > span {
    color: #898a85;
    font-size: 10px;
    font-weight: 500;
    letter-spacing: 0.07em;
  }

  .ex-manifest__row strong {
    color: #c2c3be;
    font-size: 13px;
    font-weight: 450;
    letter-spacing: -0.025em;
  }

  .ex-manifest__row em {
    color: #858680;
    font-size: 10px;
    font-style: normal;
    letter-spacing: -0.015em;
    text-align: right;
    white-space: nowrap;
  }

  .ex-manifest__row.is-active > span,
  .ex-manifest__row.is-active strong {
    color: var(--paper);
  }

  .ex-manifest__row.is-active::before {
    width: 14px;
  }

  .ex-connector {
    z-index: 0;
    width: 100%;
    height: 100%;
    overflow: visible;
    position: absolute;
    inset: 0;
    pointer-events: none;
  }

  .ex-connector line {
    stroke: var(--signal);
    stroke-width: 1;
    stroke-linecap: round;
    stroke-opacity: 0.74;
    vector-effect: non-scaling-stroke;
  }

  .ex-connector circle {
    fill: var(--signal);
  }

  @media (max-height: 780px) and (min-width: 1180px) {
    .ex-pin {
      min-height: 0;
    }

    .ex-layout {
      grid-template-columns: 300px minmax(300px, 1fr) !important;
      grid-template-rows: auto auto !important;
      gap: 18px clamp(30px, 5vw, 90px) !important;
    }

    .ex-instrument {
      grid-row: 1 / span 2;
    }

    .ex-readout {
      grid-column: 2;
      grid-row: 1;
      padding-block: 22px;
    }

    .ex-readout h3 {
      margin: 12px 0 10px;
      font-size: clamp(27px, 3vw, 42px);
    }

    .ex-readout dl {
      margin-top: 16px;
    }

    .ex-manifest {
      grid-column: 2;
      grid-row: 2;
      display: grid;
      grid-template-columns: repeat(3, minmax(0, 1fr));
      column-gap: 18px;
    }

    .ex-manifest__row {
      min-height: 32px;
      grid-template-columns: 24px minmax(0, 1fr);
      gap: 7px;
    }

    .ex-manifest__row em {
      display: none;
    }
  }

  @media (max-width: 1150px) and (min-width: 761px) {
    .ex-layout {
      grid-template-columns: 300px minmax(0, 1fr) !important;
      grid-template-rows: auto auto !important;
      gap: 22px clamp(26px, 4vw, 56px) !important;
    }

    .ex-instrument {
      grid-row: 1 / span 2;
    }

    .ex-readout {
      grid-column: 2;
      grid-row: 1;
    }

    .ex-manifest {
      grid-column: 2;
      grid-row: 2;
      display: grid;
      grid-template-columns: repeat(2, minmax(0, 1fr));
      column-gap: 18px;
    }

    .ex-manifest__row {
      min-height: 37px;
      grid-template-columns: 25px minmax(0, 1fr);
      gap: 7px;
    }

    .ex-manifest__row em {
      display: none;
    }
  }

  .explorer-grid {
    margin-top: 78px;
    display: grid;
    grid-template-columns: minmax(250px, 0.75fr) minmax(0, 1.25fr);
    gap: clamp(36px, 7vw, 120px);
    align-items: start;
  }

  .pinned-dial {
    padding: 25px;
    position: sticky;
    top: 98px;
    border: 1px solid var(--line);
  }

  .pinned-dial__label {
    margin-bottom: 23px;
    color: #5d5d5a;
    font-size: 10px;
    font-weight: 500;
    letter-spacing: 0.08em;
    text-transform: uppercase;
  }

  .dial {
    width: min(100%, 278px);
    aspect-ratio: 1;
    margin: 0 auto 25px;
    display: grid;
    place-items: center;
    position: relative;
    border: 1px solid var(--ink);
    border-radius: 50%;
  }

  .dial::before {
    position: absolute;
    inset: 15px;
    border: 1px solid var(--line);
    border-radius: 50%;
    content: "";
  }

  .dial::after {
    width: 72%;
    height: 1px;
    position: absolute;
    right: -6%;
    top: 22%;
    background: var(--signal);
    content: "";
    transform: rotate(-37deg);
    transform-origin: left center;
  }

  .dial__content {
    z-index: 1;
    text-align: center;
  }

  .dial__content strong {
    display: block;
    font-size: clamp(38px, 4vw, 56px);
    font-weight: 450;
    letter-spacing: -0.075em;
    line-height: 0.84;
  }

  .dial__content span {
    display: block;
    margin-top: 8px;
    color: #797976;
    font-size: 9px;
    font-weight: 500;
    letter-spacing: 0.1em;
    text-transform: uppercase;
  }

  .pinned-dial__copy {
    padding-top: 16px;
    border-top: 1px solid var(--line);
    color: #5a5a57;
    font-size: 12px;
    letter-spacing: -0.02em;
    line-height: 1.4;
  }

  .site-rows {
    border-top: 1px solid var(--line);
  }

  .site-row {
    min-height: 142px;
    display: grid;
    grid-template-columns: 1.05fr minmax(88px, 0.45fr) minmax(85px, 0.42fr) 20px;
    align-items: center;
    gap: 16px;
    border-bottom: 1px solid var(--line);
  }

  .site-row__name {
    display: block;
    margin-bottom: 6px;
    font-size: clamp(20px, 2.1vw, 28px);
    font-weight: 500;
    letter-spacing: -0.053em;
  }

  .site-row__sub,
  .site-row__stat span {
    color: #7e7e7b;
    font-size: 10px;
    letter-spacing: -0.015em;
  }

  .site-row__stat strong {
    display: block;
    margin-bottom: 5px;
    font-size: 14px;
    font-weight: 500;
    letter-spacing: -0.04em;
  }

  /* Platform monolith */
  .monolith {
    display: grid;
    grid-template-columns: minmax(0, 0.9fr) minmax(0, 0.75fr);
    gap: clamp(34px, 7vw, 124px);
    align-items: start;
  }

  .monolith-stage {
    height: calc(100svh - 118px);
    min-height: 590px;
    overflow: hidden;
    position: sticky;
    top: 98px;
    background: var(--ink);
    color: var(--paper);
  }

  .monolith-stage::before,
  .monolith-stage::after {
    position: absolute;
    border: 1px solid #373734;
    content: "";
  }

  .monolith-stage::before {
    width: 70%;
    aspect-ratio: 1;
    right: -15%;
    bottom: -16%;
    border-radius: 50%;
  }

  .monolith-stage::after {
    width: 50%;
    aspect-ratio: 1;
    left: -15%;
    top: -17%;
  }

  .monolith-stage__header {
    z-index: 1;
    position: absolute;
    top: 24px;
    right: 25px;
    left: 25px;
    display: flex;
    justify-content: space-between;
    color: #b5b6b2;
    font-size: 10px;
    font-weight: 500;
    letter-spacing: 0.08em;
    text-transform: uppercase;
  }

  .monolith-division {
    z-index: 1;
    position: absolute;
    right: 25px;
    bottom: 28px;
    left: 25px;
    opacity: 0;
    transform: translateY(25px);
    transition: opacity 400ms ease, transform 400ms ease;
  }

  .monolith-division__number {
    display: block;
    margin-bottom: 17px;
    color: var(--signal);
    font-size: 11px;
    font-weight: 500;
    letter-spacing: 0.1em;
  }

  .monolith-division__name {
    display: block;
    max-width: 440px;
    font-size: clamp(42px, 5vw, 75px);
    font-weight: 450;
    letter-spacing: -0.078em;
    line-height: 0.88;
  }

  .monolith-division__copy {
    max-width: 310px;
    margin-top: 25px;
    color: #c3c4c0;
    font-size: 13px;
    letter-spacing: -0.024em;
    line-height: 1.44;
  }

  .monolith-stage[data-active="facilities"] .monolith-division[data-division="facilities"],
  .monolith-stage[data-active="engineering"] .monolith-division[data-division="engineering"],
  .monolith-stage[data-active="projects"] .monolith-division[data-division="projects"],
  .monolith-stage[data-active="portfolio"] .monolith-division[data-division="portfolio"],
  .monolith-stage[data-active="investment"] .monolith-division[data-division="investment"],
  .monolith-stage[data-active="network"] .monolith-division[data-division="network"] {
    opacity: 1;
    transform: translateY(0);
  }

  .monolith-chapters {
    border-top: 1px solid var(--line);
  }

  .monolith-chapter {
    min-height: 48svh;
    padding: clamp(36px, 5.3vw, 72px) 0;
    display: flex;
    flex-direction: column;
    justify-content: space-between;
    border-bottom: 1px solid var(--line);
  }

  .monolith-chapter__top {
    display: flex;
    align-items: center;
    justify-content: space-between;
    color: #7c7c78;
    font-size: 10px;
    font-weight: 500;
    letter-spacing: 0.08em;
    text-transform: uppercase;
  }

  .monolith-chapter h3 {
    max-width: 420px;
    margin: 84px 0 20px;
    font-size: clamp(30px, 3.7vw, 52px);
    font-weight: 450;
    letter-spacing: -0.069em;
    line-height: 0.93;
  }

  .monolith-chapter p {
    max-width: 380px;
    color: #646460;
    font-size: 14px;
    letter-spacing: -0.026em;
    line-height: 1.47;
  }

  /* Scroll monolith page composition */
  .monolith-wrap {
    width: min(var(--content-max), calc(100% - (var(--page-pad) * 2)));
    margin: 76px auto 0;
    position: relative;
  }

  .monolith-wrap > .monolith {
    display: block;
  }

  .monolith__stage {
    min-height: min(680px, calc(100svh - 118px));
    padding: clamp(31px, 4.5vw, 64px);
    display: flex;
    flex-direction: column;
    justify-content: space-between;
    overflow: hidden;
    position: sticky;
    top: 98px;
    background: var(--ink);
    border-bottom: 1px solid #383835;
    color: var(--paper);
  }

  .monolith__stage::before,
  .monolith__stage::after {
    z-index: 0;
    position: absolute;
    border: 1px solid #383835;
    content: "";
    pointer-events: none;
  }

  .monolith__stage::before {
    width: 48%;
    aspect-ratio: 1;
    right: -9%;
    bottom: -18%;
    border-radius: 50%;
  }

  .monolith__stage::after {
    width: 32%;
    aspect-ratio: 1;
    top: -18%;
    left: -8%;
  }

  .monolith__number,
  .monolith__content,
  .monolith__mark {
    z-index: 1;
    position: relative;
  }

  .monolith__number {
    color: var(--signal);
    font-size: 11px;
    font-weight: 500;
    letter-spacing: 0.1em;
  }

  .monolith__content h3 {
    max-width: 680px;
    margin: 0;
    font-size: clamp(49px, 7.1vw, 105px);
    font-weight: 450;
    letter-spacing: -0.085em;
    line-height: 0.84;
  }

  .monolith__content .eyebrow {
    margin-bottom: 20px;
    color: #a5a6a1;
  }

  .monolith__content p:not(.eyebrow) {
    max-width: 368px;
    margin-top: 26px;
    color: #c1c2be;
    font-size: 14px;
    letter-spacing: -0.025em;
    line-height: 1.48;
  }

  .monolith__mark {
    position: absolute;
    right: 0.02em;
    bottom: -0.16em;
    color: #1b1b19;
    font-size: clamp(155px, 24vw, 355px);
    font-weight: 600;
    letter-spacing: -0.12em;
    line-height: 0.7;
    pointer-events: none;
  }

  .monolith__progress {
    z-index: 2;
    position: sticky;
    top: 112px;
    margin: 0 28px -42px auto;
    display: flex;
    justify-content: flex-end;
    gap: 8px;
    color: #868681;
    font-size: 10px;
    font-weight: 500;
    letter-spacing: 0.07em;
  }

  .monolith__progress li {
    min-width: 25px;
    padding-top: 8px;
    border-top: 1px solid #8d8d89;
    transition: color 180ms ease, border-color 180ms ease;
  }

  .monolith-wrap[data-active="facilities"] .monolith__progress [data-monolith-indicator="facilities"],
  .monolith[data-active="facilities"] .monolith__progress [data-monolith-indicator="facilities"],
  .monolith-wrap[data-active="engineering"] .monolith__progress [data-monolith-indicator="engineering"],
  .monolith[data-active="engineering"] .monolith__progress [data-monolith-indicator="engineering"],
  .monolith-wrap[data-active="projects"] .monolith__progress [data-monolith-indicator="projects"],
  .monolith[data-active="projects"] .monolith__progress [data-monolith-indicator="projects"],
  .monolith-wrap[data-active="portfolio"] .monolith__progress [data-monolith-indicator="portfolio"],
  .monolith[data-active="portfolio"] .monolith__progress [data-monolith-indicator="portfolio"],
  .monolith-wrap[data-active="investment"] .monolith__progress [data-monolith-indicator="investment"],
  .monolith[data-active="investment"] .monolith__progress [data-monolith-indicator="investment"],
  .monolith-wrap[data-active="network"] .monolith__progress [data-monolith-indicator="network"],
  .monolith[data-active="network"] .monolith__progress [data-monolith-indicator="network"] {
    border-color: var(--signal);
    color: var(--signal);
  }

  .platform-intro__grid,
  .platform-outro__grid,
  .capability-band__grid,
  .capability-outro__grid,
  .capability-principle__grid {
    display: grid;
    grid-template-columns: minmax(0, 1fr) minmax(250px, 0.55fr);
    gap: clamp(36px, 9vw, 160px);
    align-items: end;
  }

  .platform-intro h2,
  .capability-principle h2 {
    max-width: 770px;
    font-size: clamp(38px, 5vw, 72px);
    font-weight: 450;
    letter-spacing: -0.072em;
    line-height: 0.94;
  }

  .platform-intro h2 span,
  .capability-principle h2 span {
    color: #797975;
  }

  .capability-card {
    min-height: 310px;
  }

  .capability-card__top {
    display: flex;
    align-items: flex-start;
    justify-content: space-between;
    gap: 20px;
  }

  .capability-card__top h3 {
    max-width: 250px;
  }

  .capability-card__body {
    max-width: 315px;
  }

  .capability-card__list {
    margin-top: 15px;
  }

  .capability-card__list li {
    padding: 6px 0;
    color: #6b6b67;
    border-top: 1px solid #e3e3df;
    font-size: 11px;
    letter-spacing: -0.02em;
  }

  .capability-card__list li:last-child {
    border-bottom: 1px solid #e3e3df;
  }

  .capability-band__copy {
    max-width: 350px;
    color: #bfc0bc;
    font-size: 14px;
    letter-spacing: -0.025em;
    line-height: 1.47;
  }

  .disclosure-list {
    margin-top: 74px;
    border-top: 1px solid var(--line);
  }

  /* Page modules */
  .thesis-panel {
    min-height: 420px;
    padding: clamp(32px, 5.6vw, 76px);
    display: flex;
    flex-direction: column;
    justify-content: space-between;
    background: var(--ink);
    color: var(--paper);
  }

  .thesis-panel h3 {
    max-width: 620px;
    margin-top: 100px;
    font-size: clamp(31px, 4.1vw, 59px);
    font-weight: 450;
    letter-spacing: -0.07em;
    line-height: 0.93;
  }

  .thesis-panel p:not(.eyebrow) {
    max-width: 360px;
    color: #bfc0bc;
    font-size: 14px;
    letter-spacing: -0.026em;
    line-height: 1.46;
  }

  .comparison-grid {
    margin-top: 75px;
    display: grid;
    grid-template-columns: 1fr 1fr;
    background: var(--line);
    gap: 1px;
  }

  .comparison-grid article {
    min-height: 360px;
    padding: clamp(30px, 4.8vw, 68px);
    background: var(--paper);
  }

  .comparison-grid article:last-child {
    background: var(--ink);
    color: var(--paper);
  }

  .comparison-grid h3 {
    margin: 80px 0 18px;
    font-size: clamp(29px, 3.75vw, 52px);
    font-weight: 450;
    letter-spacing: -0.07em;
    line-height: 0.92;
  }

  .comparison-grid p:not(.eyebrow) {
    max-width: 320px;
    color: #656562;
    font-size: 14px;
    letter-spacing: -0.026em;
    line-height: 1.45;
  }

  .comparison-grid article:last-child p:not(.eyebrow) {
    color: #c2c3bf;
  }

  .sector-grid {
    margin-top: 76px;
    display: grid;
    grid-template-columns: repeat(3, 1fr);
    background: var(--line);
    gap: 1px;
  }

  .sector-card {
    min-height: 255px;
    padding: 24px 25px 27px;
    display: flex;
    flex-direction: column;
    justify-content: space-between;
    background-color: var(--paper);
  }

  .sector-card h3 {
    max-width: 250px;
    margin: 0 0 12px;
    font-size: clamp(21px, 2.05vw, 28px);
    font-weight: 500;
    letter-spacing: -0.055em;
    line-height: 0.98;
  }

  .sector-card p {
    max-width: 275px;
    color: var(--muted);
    font-size: 13px;
    letter-spacing: -0.024em;
    line-height: 1.45;
  }

  /* Sectors: a front-facing deck over the supplied amber field. */
  .sector-deck {
    overflow: clip;
    position: relative;
    isolation: isolate;
    background: #efad07;
    color: var(--paper);
    scroll-margin-top: 78px;
  }

  .sector-deck__media,
  .sector-deck__shade {
    pointer-events: none;
    position: absolute;
    inset: 0;
  }

  .sector-deck__media {
    z-index: 0;
    overflow: hidden;
    background: #544326;
  }

  .sector-deck__video {
    width: 100%;
    height: 100%;
    display: block;
    object-fit: cover;
    transform: scale(1.035);
  }

  .sector-deck__shade {
    background:
      linear-gradient(180deg, rgb(78 34 1 / 0.16), transparent 32%, rgb(83 25 0 / 0.2)),
      linear-gradient(90deg, rgb(75 27 0 / 0.11), transparent 36%, rgb(255 237 74 / 0.08));
  }

  .sector-deck__track {
    height: 600vh;
    min-height: 3300px;
    position: relative;
  }

  .sector-deck__sticky {
    height: calc(100svh - 78px);
    min-height: 510px;
    overflow: hidden;
    position: sticky;
    top: 78px;
    isolation: isolate;
  }

  .sector-deck__shell {
    height: 100%;
    padding: clamp(26px, 3.5vw, 48px) 0 clamp(28px, 3.2vw, 46px);
    display: flex;
    flex-direction: column;
    position: relative;
    z-index: 1;
  }

  .sector-deck__meta {
    display: flex;
    align-items: flex-start;
    justify-content: space-between;
    gap: 30px;
  }

  .sector-deck__meta .eyebrow {
    color: rgb(255 255 255 / 0.78);
  }

  .sector-deck__meta h2 {
    max-width: 620px;
    margin-top: 9px;
    color: var(--paper);
    font-size: clamp(26px, 3.1vw, 46px);
    font-weight: 450;
    letter-spacing: -0.067em;
    line-height: 0.94;
  }

  .sector-deck__meta h2 span {
    color: rgb(255 255 255 / 0.68);
  }

  .sector-deck__count {
    min-width: 78px;
    padding-top: 4px;
    display: flex;
    justify-content: flex-end;
    gap: 7px;
    color: rgb(255 255 255 / 0.64);
    font-size: 12px;
    font-weight: 500;
    letter-spacing: 0.07em;
    line-height: 1;
  }

  .sector-deck__count span:first-child {
    color: var(--paper);
  }

  .sector-deck__scene {
    min-height: 0;
    position: relative;
    display: grid;
    place-items: center;
    flex: 1;
    perspective: 1800px;
  }

  .sector-deck__guide {
    position: absolute;
    bottom: 0;
    left: 0;
    color: rgb(255 255 255 / 0.7);
    font-size: 10px;
    font-weight: 500;
    letter-spacing: 0.09em;
    line-height: 1;
    text-transform: uppercase;
  }

  .sector-deck__guide::before {
    width: 25px;
    height: 1px;
    margin: 0 8px 3px 0;
    display: inline-block;
    background: currentColor;
    content: "";
  }

  .sector-deck__cards {
    width: min(820px, 65vw);
    aspect-ratio: 16 / 9;
    position: relative;
    isolation: isolate;
    transform: translateY(14%);
    transform-style: preserve-3d;
  }

  .sector-deck__card {
    --sector-offset-x: 0px;
    --sector-offset-y: 0px;
    --sector-offset-z: 0px;
    --sector-scale: 1;
    --sector-rotate-z: 0deg;
    --sector-exit-rotate: 0deg;
    --sector-exit-scale: 1;
    --sector-tilt-x: 0deg;
    --sector-tilt-y: 0deg;
    width: 100%;
    height: 100%;
    overflow: hidden;
    position: absolute;
    inset: 0;
    padding: clamp(24px, 3.4vw, 44px);
    display: flex;
    flex-direction: column;
    justify-content: space-between;
    border: 1px solid rgb(155 246 255 / 0.38);
    background: linear-gradient(135deg, #0b6679, #043e55 52%, #08798b);
    box-shadow:
      0 5px 0 rgb(0 34 45 / 0.52),
      0 24px 54px rgb(54 21 0 / 0.28),
      inset 0 0 0 1px rgb(255 255 255 / 0.08);
    color: var(--paper);
    cursor: pointer;
    opacity: 1;
    transform: translate3d(var(--sector-offset-x), var(--sector-offset-y), var(--sector-offset-z)) rotateX(var(--sector-tilt-x)) rotateY(var(--sector-tilt-y)) rotateZ(var(--sector-rotate-z)) rotateZ(var(--sector-exit-rotate)) scale(var(--sector-scale)) scale(var(--sector-exit-scale));
    transform-style: preserve-3d;
    transition: transform 620ms cubic-bezier(0.22, 1.18, 0.36, 1), box-shadow 220ms ease;
    will-change: transform;
  }

  .sector-deck__card::before {
    position: absolute;
    inset: 0;
    background:
      radial-gradient(90% 105% at var(--sector-pointer-x, 50%) var(--sector-pointer-y, 46%), rgb(163 254 255 / 0.38), transparent 55%),
      linear-gradient(116deg, transparent 30%, rgb(255 255 255 / 0.2) 45%, transparent 58%),
      linear-gradient(180deg, rgb(255 255 255 / 0.08), transparent 31%, rgb(0 24 41 / 0.17));
    content: "";
    mix-blend-mode: normal;
    opacity: 0.88;
    pointer-events: none;
    transition: opacity 180ms ease;
  }

  .sector-deck__card::after {
    position: absolute;
    inset: 8px;
    border: 1px solid rgb(229 255 255 / 0.16);
    content: "";
    pointer-events: none;
  }

  .sector-deck__card:not(.is-current) {
    pointer-events: none;
  }

  .sector-deck__card:not(.is-current) .sector-deck__card-head,
  .sector-deck__card:not(.is-current) .sector-deck__card-copy {
    opacity: 0;
  }

  .sector-deck__card:not(.is-current)::before {
    opacity: 0.22;
  }

  .sector-deck__card.is-exiting {
    --sector-exit-rotate: 2deg;
    --sector-exit-scale: 1.05;
  }

  .sector-deck__card[data-deck-slot="1"] {
    background: #075c6f;
  }

  .sector-deck__card[data-deck-slot="2"] {
    background: #075568;
  }

  .sector-deck__card[data-deck-slot="3"] {
    background: #064e61;
  }

  .sector-deck__card[data-deck-slot="4"] {
    background: #06485b;
  }

  .sector-deck__card[data-deck-slot="5"] {
    background: #054254;
  }

  .sector-deck__card.is-current:hover {
    box-shadow:
      0 5px 0 rgb(0 34 45 / 0.56),
      0 31px 65px rgb(51 20 0 / 0.34),
      inset 0 0 0 1px rgb(255 255 255 / 0.12);
  }

  .sector-deck__card.is-current:hover::before {
    opacity: 1;
  }

  .sector-deck__card:focus-visible {
    z-index: 100 !important;
    outline: 2px solid var(--paper);
    outline-offset: 6px;
  }

  .sector-deck__card-head,
  .sector-deck__card-copy {
    position: relative;
    z-index: 1;
  }

  .sector-deck__card-head {
    display: flex;
    align-items: flex-start;
    justify-content: space-between;
  }

  .sector-deck__symbol {
    width: 46px;
    height: 46px;
    fill: none;
    stroke: currentColor;
    stroke-linecap: square;
    stroke-linejoin: miter;
    stroke-width: 1.4;
  }

  .sector-deck__open {
    padding-bottom: 4px;
    border-bottom: 1px solid rgb(255 255 255 / 0.55);
    color: rgb(255 255 255 / 0.86);
    font-size: 10px;
    font-weight: 500;
    letter-spacing: 0.08em;
    line-height: 1;
    text-transform: uppercase;
  }

  .sector-deck__open b {
    margin-left: 4px;
    font-size: 13px;
    font-weight: 400;
    vertical-align: -1px;
  }

  .sector-deck__card-copy {
    max-width: 530px;
    display: grid;
    gap: 13px;
  }

  .sector-deck__index {
    color: rgb(227 255 255 / 0.72);
    font-size: 10px;
    font-weight: 500;
    letter-spacing: 0.09em;
    line-height: 1;
    text-transform: uppercase;
  }

  .sector-deck__card-copy strong {
    max-width: 450px;
    color: var(--paper);
    font-size: clamp(31px, 3.55vw, 51px);
    font-weight: 450;
    letter-spacing: -0.074em;
    line-height: 0.91;
  }

  .sector-deck__card-copy > span:last-child {
    max-width: 460px;
    color: rgb(232 255 255 / 0.78);
    font-size: 13px;
    letter-spacing: -0.024em;
    line-height: 1.43;
  }

  .trade-list {
    margin-top: 76px;
    border-top: 1px solid var(--line);
  }

  .trade-row {
    grid-template-columns: 72px minmax(0, 0.9fr) minmax(190px, 0.85fr) 24px;
  }

  .trade-row h3 {
    font-size: clamp(20px, 2.4vw, 32px);
  }

  /* Services field reel */
  .services-gallery {
    overflow: clip;
    padding-bottom: 0;
  }

  .field-reel {
    height: clamp(780px, calc(100svh + 48vw), 1240px);
    margin-top: clamp(48px, 7vw, 96px);
    position: relative;
  }

  .field-reel__sticky {
    height: min(660px, calc(100svh - 114px));
    min-height: 540px;
    overflow: hidden;
    position: sticky;
    top: 88px;
    display: flex;
    flex-direction: column;
    border-top: 1px solid #393936;
    border-bottom: 1px solid #393936;
    background: var(--ink-soft);
  }

  .field-reel__meta {
    min-height: 45px;
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 24px;
    color: #a4a5a0;
    border-bottom: 1px solid #393936;
    font-size: 10px;
    font-weight: 500;
    letter-spacing: 0.08em;
    line-height: 1;
    text-transform: uppercase;
  }

  .field-reel__meta span:last-child {
    color: var(--signal);
  }

  .field-reel__viewport {
    min-height: 0;
    overflow: hidden;
    position: relative;
    flex: 1;
  }

  .field-reel__viewport::before,
  .field-reel__viewport::after {
    z-index: 2;
    width: min(9vw, 136px);
    position: absolute;
    top: 0;
    bottom: 0;
    content: "";
    pointer-events: none;
  }

  .field-reel__viewport::before {
    left: 0;
    background: linear-gradient(90deg, var(--ink-soft), transparent);
  }

  .field-reel__viewport::after {
    right: 0;
    background: linear-gradient(270deg, var(--ink-soft), transparent);
  }

  .field-reel__track {
    height: 100%;
    width: max-content;
    padding: 0 var(--page-pad) 20px;
    display: flex;
    align-items: flex-end;
    gap: clamp(13px, 1.65vw, 25px);
    transform: translate3d(0, 0, 0);
    will-change: transform;
  }

  .field-reel__card {
    --reel-focus: 0;
    width: clamp(222px, 20vw, 320px);
    margin: 0;
    display: flex;
    flex: 0 0 auto;
    flex-direction: column;
    gap: 10px;
    opacity: calc(0.56 + (var(--reel-focus) * 0.44));
    transform: translateY(calc((1 - var(--reel-focus)) * 18px)) scale(calc(0.97 + (var(--reel-focus) * 0.03)));
    transform-origin: center bottom;
    filter: saturate(calc(0.7 + (var(--reel-focus) * 0.3))) brightness(calc(0.78 + (var(--reel-focus) * 0.22)));
    transition: opacity 220ms ease, transform 220ms ease, filter 220ms ease;
  }

  .field-reel__image-wrap {
    overflow: hidden;
    position: relative;
    border: 1px solid #484844;
    background: #282825;
  }

  .field-reel__image-wrap::after {
    position: absolute;
    inset: 0;
    background: linear-gradient(180deg, transparent 45%, rgb(0 0 0 / 0.18));
    content: "";
    pointer-events: none;
  }

  .field-reel__image-wrap img {
    width: 100%;
    height: 100%;
    display: block;
    object-fit: cover;
    transition: transform 700ms cubic-bezier(0.2, 0.7, 0.2, 1);
  }

  .field-reel__card:hover .field-reel__image-wrap img {
    transform: scale(1.035);
  }

  .field-reel__card figcaption {
    min-height: 30px;
    display: flex;
    align-items: flex-start;
    justify-content: space-between;
    gap: 14px;
    color: #a9aaa6;
    font-size: 10px;
    font-weight: 500;
    letter-spacing: 0.015em;
    line-height: 1.25;
  }

  .field-reel__card figcaption span:first-child {
    color: var(--paper);
  }

  .field-reel__card figcaption span:last-child {
    max-width: 94px;
    color: #8c8d88;
    text-align: right;
  }

  .field-reel__card--electrical .field-reel__image-wrap {
    aspect-ratio: 4 / 5;
  }

  .field-reel__card--coordination {
    width: clamp(310px, 28vw, 450px);
    margin-bottom: 27px;
  }

  .field-reel__card--coordination .field-reel__image-wrap {
    aspect-ratio: 4 / 3;
  }

  .field-reel__card--coordination img {
    object-position: 50% 42%;
  }

  .field-reel__card--specialist {
    width: clamp(235px, 19vw, 300px);
    margin-bottom: 8px;
  }

  .field-reel__card--specialist .field-reel__image-wrap {
    aspect-ratio: 7 / 8;
  }

  .field-reel__card--capital {
    width: clamp(330px, 31vw, 492px);
    margin-bottom: 37px;
  }

  .field-reel__card--capital .field-reel__image-wrap {
    aspect-ratio: 4 / 3;
  }

  .field-reel__card--capital img {
    object-position: 70% 50%;
  }

  .field-reel__card--delivery {
    width: clamp(208px, 17vw, 276px);
  }

  .field-reel__card--delivery .field-reel__image-wrap {
    aspect-ratio: 2 / 3;
  }

  .field-reel__card--renewal {
    width: clamp(195px, 16vw, 250px);
    margin-bottom: 10px;
  }

  .field-reel__card--renewal .field-reel__image-wrap {
    aspect-ratio: 9 / 16;
  }

  .lifecycle {
    margin-top: 78px;
    display: grid;
    grid-template-columns: repeat(6, 1fr);
    border-top: 1px solid var(--line);
  }

  .lifecycle__step {
    min-height: 240px;
    padding: 23px 20px 24px 0;
    display: flex;
    flex-direction: column;
    justify-content: space-between;
    border-right: 1px solid var(--line);
  }

  .lifecycle__step:not(:first-child) {
    padding-left: 20px;
  }

  .lifecycle__step:last-child {
    border-right: 0;
  }

  .lifecycle__step h3 {
    margin: 0;
    font-size: clamp(18px, 1.7vw, 23px);
    font-weight: 500;
    letter-spacing: -0.05em;
    line-height: 1;
  }

  .lifecycle__step p {
    color: var(--muted);
    font-size: 12px;
    letter-spacing: -0.022em;
    line-height: 1.42;
  }

  .article-grid {
    margin-top: 75px;
    display: grid;
    grid-template-columns: repeat(3, minmax(0, 1fr));
    gap: 1px;
    background: var(--line);
  }

  .article-card {
    min-height: 330px;
    padding: 25px 25px 27px;
    display: flex;
    flex-direction: column;
    justify-content: space-between;
    background-color: var(--paper);
  }

  .article-card--lead {
    grid-column: span 2;
    min-height: 470px;
    background-color: var(--mist);
  }

  .article-card__meta {
    color: #7d7d79;
    font-size: 10px;
    font-weight: 500;
    letter-spacing: 0.08em;
    text-transform: uppercase;
  }

  .article-card h3 {
    max-width: 480px;
    margin: 0 0 15px;
    font-size: clamp(22px, 2.65vw, 38px);
    font-weight: 450;
    letter-spacing: -0.061em;
    line-height: 0.95;
  }

  .article-card p:not(.article-card__meta) {
    max-width: 390px;
    color: var(--muted);
    font-size: 13px;
    letter-spacing: -0.024em;
    line-height: 1.45;
  }

  .filter-row {
    margin-top: 55px;
    display: flex;
    flex-wrap: wrap;
    gap: 8px;
  }

  .filter-row span {
    padding: 8px 10px;
    border: 1px solid var(--line);
    color: #6a6a67;
    font-size: 11px;
    letter-spacing: -0.02em;
  }

  .filter-row span:first-child {
    border-color: var(--ink);
    color: var(--ink);
  }

  /* Contact form */
  .contact-grid {
    display: grid;
    grid-template-columns: minmax(0, 0.7fr) minmax(340px, 0.9fr);
    gap: clamp(40px, 9vw, 160px);
    align-items: start;
  }

  .contact-note {
    max-width: 360px;
  }

  .contact-note .section-heading {
    margin-top: 23px;
  }

  .contact-note .lede {
    margin-top: 28px;
  }

  .inquiry-form {
    padding: 28px;
    border: 1px solid var(--line);
  }

  .form-grid {
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: 23px 18px;
  }

  .form-field {
    display: flex;
    flex-direction: column;
    gap: 8px;
  }

  .form-field--wide {
    grid-column: 1 / -1;
  }

  .form-field label,
  .form-field > span {
    color: #5f5f5b;
    font-size: 11px;
    font-weight: 500;
    letter-spacing: -0.017em;
  }

  .form-field input,
  .form-field select,
  .form-field textarea {
    width: 100%;
    padding: 11px 0 10px;
    appearance: none;
    border: 0;
    border-bottom: 1px solid #bcbcb8;
    border-radius: 0;
    background: transparent;
    color: var(--ink);
    font-size: 14px;
    letter-spacing: -0.025em;
  }

  .form-field textarea {
    min-height: 125px;
    resize: vertical;
  }

  .form-actions {
    margin-top: 30px;
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 20px;
  }

  .form-status {
    max-width: 225px;
    color: var(--muted);
    font-size: 11px;
    letter-spacing: -0.018em;
    line-height: 1.4;
  }
}

@layer utilities {
  .sr-only {
    width: 1px;
    height: 1px;
    overflow: hidden;
    position: absolute;
    padding: 0;
    margin: -1px;
    clip: rect(0, 0, 0, 0);
    white-space: nowrap;
    border: 0;
  }

  .stack-sm > * + * {
    margin-top: 12px;
  }

  .stack-md > * + * {
    margin-top: 20px;
  }

  .stack-lg > * + * {
    margin-top: 32px;
  }

  html.is-enhanced [data-reveal] {
    opacity: 0;
    transform: translateY(30px);
    transition: opacity 700ms cubic-bezier(0.2, 0.7, 0.2, 1), transform 700ms cubic-bezier(0.2, 0.7, 0.2, 1);
    will-change: opacity, transform;
  }

  html.is-enhanced [data-reveal="scale"] {
    transform: translateY(20px) scale(0.988);
  }

  html.is-enhanced [data-reveal].is-revealed {
    opacity: 1;
    transform: translateY(0) scale(1);
  }

  html.is-enhanced [data-delay="1"],
  html.is-enhanced [data-reveal-delay="1"] {
    transition-delay: 110ms;
  }

  html.is-enhanced [data-delay="2"],
  html.is-enhanced [data-reveal-delay="2"] {
    transition-delay: 220ms;
  }

  @media (max-width: 980px) {
    .card-grid,
    .sector-grid,
    .article-grid {
      grid-template-columns: repeat(2, minmax(0, 1fr));
    }

    .article-card--lead {
      grid-column: span 2;
    }

    .lifecycle {
      grid-template-columns: repeat(3, 1fr);
    }

    .lifecycle__step:nth-child(3) {
      border-right: 0;
    }

    .lifecycle__step:nth-child(n + 4) {
      border-top: 1px solid var(--line);
      padding-top: 23px;
    }

    .monolith {
      grid-template-columns: minmax(0, 0.82fr) minmax(0, 0.88fr);
      gap: 40px;
    }
  }

  @media (max-width: 760px) {
    :root {
      --section-space: 92px;
    }

    .site-header__inner {
      height: 64px;
      grid-template-columns: 1fr auto;
    }

    .site-nav,
    .site-header__cta {
      display: none;
    }

    .site-header.is-menu-open .site-nav {
      width: 100%;
      padding: 14px var(--page-pad) 19px;
      display: flex;
      flex-direction: column;
      align-items: flex-start;
      gap: 0;
      position: absolute;
      top: 62px;
      left: 0;
      background: var(--ink);
      border-bottom: 2px solid var(--signal);
      color: var(--paper);
    }

    .site-header.is-menu-open .site-nav a {
      width: 100%;
      padding: 10px 0;
      border-bottom: 1px solid #393936;
      font-size: 12px;
    }

    .site-header.is-menu-open .site-nav a:last-child {
      border-bottom: 0;
    }

    .mobile-menu {
      display: block;
    }

    .page-hero {
      min-height: min(680px, calc(100svh - 66px));
      padding: 92px 0 75px;
    }

    .page-hero__grid,
    .split-grid,
    .contact-grid,
    .monolith,
    .explorer-grid {
      grid-template-columns: 1fr;
    }

    .page-hero__aside {
      max-width: 430px;
    }

    .home-hero__media {
      background-position: 56% center;
    }

    .home-hero__veil {
      background:
        linear-gradient(180deg, rgb(8 10 10 / 0.58), rgb(8 10 10 / 0.36) 42%, rgb(8 10 10 / 0.76)),
        linear-gradient(90deg, rgb(8 10 10 / 0.48), transparent);
    }

    .site-explorer__intro {
      padding-bottom: 48px;
    }

    .ex-track {
      height: auto;
    }

    .ex-pin {
      height: auto;
      min-height: 0;
      overflow: visible;
      position: relative;
      top: auto;
      padding: 34px 0 78px;
    }

    .ex-frame {
      height: auto;
      display: block;
    }

    .ex-frame__header {
      position: static;
      margin-bottom: 30px;
    }

    .ex-layout {
      grid-template-columns: 1fr !important;
      gap: 38px !important;
    }

    .ex-instrument {
      justify-self: center;
    }

    .ex-readout {
      width: calc(100% - 48px);
      padding: 31px 24px;
    }

    .ex-readout h3 {
      font-size: clamp(34px, 11vw, 48px);
    }

    .ex-manifest__row {
      min-height: 47px;
    }

    .ex-manifest__row em {
      display: none;
    }

    .ex-connector {
      display: none;
    }

    .page-hero__foot {
      margin-top: 48px;
    }

    div.section-heading,
    .section__heading,
    .section__callout,
    .platform-intro__grid,
    .platform-outro__grid,
    .capability-band__grid,
    .capability-outro__grid,
    .capability-principle__grid {
      grid-template-columns: 1fr;
    }

    .display {
      font-size: clamp(43px, 13.3vw, 72px);
      letter-spacing: -0.08em;
    }

    .display--xl {
      font-size: clamp(48px, 14.5vw, 78px);
    }

    .display--mid,
    .section-heading {
      font-size: clamp(37px, 11vw, 59px);
      letter-spacing: -0.075em;
    }

    .three-up,
    .four-up,
    .metric-grid {
      grid-template-columns: 1fr;
    }

    .card-grid,
    .sector-grid,
    .article-grid,
    .two-up,
    .comparison-grid {
      grid-template-columns: 1fr;
    }

    .card,
    .sector-card,
    .article-card,
    .article-card--lead {
      min-height: 235px;
      grid-column: auto;
    }

    .metric,
    .metric:not(:first-child) {
      min-height: 160px;
      padding: 22px 0;
      border-right: 0;
      border-bottom: 1px solid var(--line);
    }

    .metric:last-child {
      border-bottom: 0;
    }

    .ledger__head {
      display: none;
    }

    .rule-list__item,
    .ledger__row,
    .trade-row {
      min-height: 0;
      padding: 23px 0;
      grid-template-columns: 38px minmax(0, 1fr) 20px;
      row-gap: 12px;
    }

    .rule-list__item p,
    .ledger__copy,
    .trade-row p {
      grid-column: 2 / 4;
    }

    .ledger__outcome {
      grid-column: 2 / 4;
    }

    .page-hero__ledger .ledger__row {
      padding: 15px 0;
      grid-template-columns: 28px minmax(0, 1fr);
      grid-template-areas:
        "number title"
        ". copy";
      row-gap: 5px;
    }

    .page-hero__ledger .ledger__copy {
      grid-column: auto;
    }

    .sector-deck__track {
      height: auto;
      min-height: 0;
    }

    .sector-deck__sticky {
      height: auto;
      min-height: 0;
      overflow: visible;
      position: relative;
      top: auto;
    }

    .sector-deck__shell {
      padding: 52px 0 64px;
    }

    .sector-deck__meta {
      gap: 18px;
    }

    .sector-deck__meta h2 {
      max-width: 300px;
      font-size: clamp(25px, 8.4vw, 38px);
    }

    .sector-deck__count {
      min-width: 56px;
      font-size: 10px;
    }

    .sector-deck__scene {
      display: block;
      margin-top: 35px;
      perspective: none;
    }

    .sector-deck__guide {
      display: none;
    }

    .sector-deck__cards {
      width: 100%;
      height: auto;
      aspect-ratio: auto;
      display: grid;
      gap: 13px;
      transform: none;
    }

    .sector-deck__card {
      min-height: 310px;
      position: relative;
      padding: 24px;
      pointer-events: auto !important;
      opacity: 1 !important;
      transform: none !important;
    }

    .sector-deck__card-copy {
      max-width: 390px;
      gap: 11px;
    }

    .sector-deck__card-copy strong {
      font-size: clamp(31px, 10vw, 44px);
    }

    .sector-deck__card-copy > span:last-child {
      font-size: 12px;
    }

    .sector-deck__card .sector-deck__card-head,
    .sector-deck__card .sector-deck__card-copy {
      opacity: 1 !important;
    }

    .field-reel {
      height: auto;
      margin-top: 42px;
    }

    .field-reel__sticky {
      height: auto;
      min-height: 0;
      overflow: visible;
      position: static;
      border-bottom: 0;
    }

    .field-reel__meta {
      min-height: 42px;
    }

    .field-reel__meta span:last-child {
      display: none;
    }

    .field-reel__viewport {
      overflow-x: auto;
      overflow-y: hidden;
      padding-bottom: 12px;
      scroll-snap-type: x mandatory;
      scrollbar-color: #777773 var(--ink-soft);
      scrollbar-width: thin;
    }

    .field-reel__viewport::before,
    .field-reel__viewport::after {
      display: none;
    }

    .field-reel__track {
      height: auto;
      padding: 0 var(--page-pad) 4px;
      transform: none !important;
    }

    .field-reel__card,
    .field-reel__card--coordination,
    .field-reel__card--specialist,
    .field-reel__card--capital,
    .field-reel__card--delivery,
    .field-reel__card--renewal {
      width: min(76vw, 320px);
      margin-bottom: 0;
      opacity: 1;
      transform: none;
      filter: none;
      scroll-snap-align: start;
    }

    .field-reel__card--coordination,
    .field-reel__card--capital {
      width: min(88vw, 430px);
    }

    .field-reel__card figcaption {
      padding-bottom: 2px;
    }

    .monolith-stage {
      height: min(500px, calc(100svh - 92px));
      min-height: 420px;
      position: relative;
      top: auto;
    }

    .monolith__stage {
      min-height: 520px;
      padding: 30px 24px;
      top: 86px;
    }

    .monolith__content h3 {
      font-size: clamp(46px, 14vw, 78px);
    }

    .monolith__progress {
      gap: 5px;
    }

    .monolith__progress li {
      min-width: 20px;
    }

    .pinned-dial {
      position: relative;
      top: auto;
      max-width: 390px;
    }

    .site-row {
      min-height: 128px;
      grid-template-columns: minmax(0, 1fr) 72px 20px;
      row-gap: 7px;
    }

    .site-row__stat:nth-of-type(2) {
      display: none;
    }

    .monolith-chapter {
      min-height: 330px;
    }

    .monolith-chapter h3 {
      margin-top: 58px;
    }

    .lifecycle {
      grid-template-columns: 1fr 1fr;
    }

    .lifecycle__step,
    .lifecycle__step:not(:first-child) {
      min-height: 190px;
      padding: 19px 16px 20px 0;
      border-right: 1px solid var(--line);
      border-top: 1px solid var(--line);
    }

    .lifecycle__step:nth-child(even) {
      padding-left: 16px;
      border-right: 0;
    }

    .lifecycle__step:nth-child(-n + 2) {
      border-top: 0;
    }

    .comparison-grid article {
      min-height: 320px;
    }

    .comparison-grid h3,
    .thesis-panel h3 {
      margin-top: 65px;
    }

    .disclosure summary {
      min-height: 80px;
      grid-template-columns: 40px minmax(0, 1fr) 20px;
      gap: 9px;
    }

    .disclosure__body {
      margin-right: 0;
      padding-left: 49px;
    }

    .form-grid {
      grid-template-columns: 1fr;
    }

    .form-field--wide {
      grid-column: auto;
    }

    .form-actions {
      align-items: flex-start;
      flex-direction: column;
    }

    .site-footer {
      min-height: 530px;
      padding-top: 65px;
    }

    .site-footer .shell {
      min-height: 390px;
    }

    .footer-grid {
      flex-wrap: wrap;
      gap: 40px 24px;
    }

    .footer-intro {
      flex-basis: 100%;
    }

    .footer-links {
      flex: 1 1 122px;
    }

    .footer-wordmark {
      right: -0.08em;
      bottom: -0.05em;
      font-size: clamp(95px, 26vw, 165px);
    }
  }

  @media (prefers-reduced-motion: reduce) {
    html {
      scroll-behavior: auto;
    }

    *,
    *::before,
    *::after {
      animation-duration: 0.01ms !important;
      animation-iteration-count: 1 !important;
      scroll-behavior: auto !important;
      transition-duration: 0.01ms !important;
    }

    html.is-enhanced [data-reveal],
    html.is-enhanced [data-reveal="scale"] {
      opacity: 1;
      transform: none;
    }

    .field-reel {
      height: auto;
    }

    .field-reel__sticky {
      height: auto;
      min-height: 0;
      overflow: visible;
      position: static;
    }

    .field-reel__viewport {
      overflow: visible;
    }

    .field-reel__viewport::before,
    .field-reel__viewport::after {
      display: none;
    }

    .field-reel__track {
      height: auto;
      width: auto;
      display: grid;
      grid-template-columns: repeat(auto-fit, minmax(230px, 1fr));
      transform: none !important;
    }

    .field-reel__card,
    .field-reel__card--coordination,
    .field-reel__card--specialist,
    .field-reel__card--capital,
    .field-reel__card--delivery,
    .field-reel__card--renewal {
      width: auto;
      margin-bottom: 0;
      opacity: 1;
      transform: none;
      filter: none;
    }

    .sector-deck__track {
      height: auto;
      min-height: 0;
    }

    .sector-deck__sticky {
      height: auto;
      min-height: 0;
      overflow: visible;
      position: relative;
      top: auto;
    }

    .sector-deck__video {
      display: none;
    }

    .sector-deck__media {
      background-image: none;
    }

    .sector-deck__scene {
      display: block;
      margin-top: 36px;
      perspective: none;
    }

    .sector-deck__guide {
      display: none;
    }

    .sector-deck__cards {
      width: 100%;
      height: auto;
      aspect-ratio: auto;
      display: grid;
      gap: 13px;
      transform: none;
    }

    .sector-deck__card {
      min-height: 290px;
      position: relative;
      pointer-events: auto !important;
      opacity: 1 !important;
      transform: none !important;
    }

    .sector-deck__card .sector-deck__card-head,
    .sector-deck__card .sector-deck__card-copy {
      opacity: 1 !important;
    }

    .home-hero__video {
      visibility: hidden;
    }

    .ex-track {
      height: auto;
    }

    .ex-pin {
      height: auto;
      min-height: 0;
      overflow: visible;
      position: static;
      padding: 40px 0 80px;
    }

    .ex-frame {
      height: auto;
      display: block;
    }

    .ex-frame__header {
      position: static;
      margin-bottom: 32px;
    }

    .ex-layout {
      grid-template-columns: 1fr !important;
      gap: 38px !important;
    }

    .ex-instrument {
      justify-self: center;
      opacity: 1 !important;
      transform: none !important;
    }

    .ex-connector {
      display: none;
    }

    .ex-readout__block:not(.is-active) {
      display: none;
    }

    .ex-wave {
      animation: none;
    }
  }
}

/* Option 3 — Static view keeps the original chapter-card footprint and
   alignment, while one selected chapter comes forward as a glass plane. */
@layer utilities {
  /* The compact rail belongs to the live journey. Static view uses the actual
     chapter panels so the same content is never rendered as a duplicate UI. */
  .cinema-story.is-static .story-nav {
    display: none !important;
  }

  .cinema-story.is-static .story-chapters {
    display: grid;
    grid-template-columns: repeat(3, minmax(0, 1fr));
    gap: 38px;
  }

  .cinema-story.is-static .story-step {
    position: relative;
    min-height: clamp(300px, 27vw, 410px);
    overflow: hidden;
    padding: 0;
    border: 1px solid rgb(189 162 118 / .36);
    background:
      linear-gradient(145deg, rgb(31 111 107 / .08), transparent 52%),
      rgb(14 31 29 / .38);
    color: var(--paper);
    cursor: pointer;
    transform: translateY(0);
    transition: transform 220ms var(--ease-ios), border-color 180ms ease,
      background 180ms ease, box-shadow 180ms ease;
  }

  .cinema-story.is-static .story-step::before,
  .cinema-story.is-static .story-step::after {
    position: absolute;
    inset: 0 auto auto 0;
    z-index: 1;
    background: #e8c985;
    content: "";
    pointer-events: none;
  }

  .cinema-story.is-static .story-step::before { width: 42px; height: 1px; }
  .cinema-story.is-static .story-step::after { width: 1px; height: 42px; }

  .cinema-story.is-static .story-step__copy {
    display: flex;
    width: 100%;
    min-height: inherit;
    align-items: flex-end;
    padding: clamp(30px, 4vw, 52px);
  }

  .cinema-story.is-static .story-step__copy::after {
    inset: 0 auto 0 0;
    background: #e8c985;
  }

  .cinema-story.is-static .story-step :is(h3, p:not(.eyebrow), dl, .floor-details-toggle) {
    display: none;
  }

  .cinema-story.is-static .story-step .eyebrow {
    margin: 0;
    color: #e8c985;
    font-size: clamp(10px, .9vw, 12px);
    font-weight: 650;
    letter-spacing: .085em;
    line-height: 1.35;
  }

  .cinema-story.is-static .story-step:hover,
  .cinema-story.is-static .story-step:focus-visible {
    z-index: 1;
    border-color: #e8c985;
    background: rgb(32 76 61 / .48);
    box-shadow: 0 18px 38px -24px rgb(0 0 0 / .8);
    outline: none;
    transform: translateY(-2px);
  }

  .cinema-story.is-static .story-step.is-detail-open {
    border-color: #e8c985;
    background: rgb(84 72 51 / .62);
    box-shadow: inset 0 0 0 1px rgb(232 163 61 / .17);
  }

  .chapter-focus-open { overflow: hidden; }

  .chapter-focus-dialog {
    width: min(880px, calc(100vw - 32px));
    max-width: none;
    max-height: calc(100svh - 32px);
    margin: auto;
    padding: 0;
    overflow: visible;
    border: 0;
    background: transparent;
    color: var(--paper);
  }

  .chapter-focus-dialog::backdrop {
    background: rgb(4 12 12 / .72);
    -webkit-backdrop-filter: blur(4px) saturate(.76);
    backdrop-filter: blur(4px) saturate(.76);
  }

  .chapter-focus-dialog__surface {
    --glass-fog: .78;
    display: grid;
    grid-template-columns: minmax(150px, .6fr) minmax(0, 1.4fr);
    gap: clamp(30px, 6vw, 72px);
    min-height: 360px;
    overflow: hidden;
    padding: clamp(42px, 6vw, 68px);
    border-radius: 24px;
    background:
      linear-gradient(112deg, rgb(31 111 107 / .18), transparent 44%),
      rgb(14 22 21 / .76);
    box-shadow:
      inset 0 1px 0 rgb(250 251 248 / .54),
      inset 0 0 0 1px rgb(250 251 248 / .13),
      inset 0 -1px 0 rgb(4 13 11 / .4),
      0 34px 90px -20px rgb(0 0 0 / .78);
  }

  .chapter-focus-dialog__surface::before {
    position: absolute;
    z-index: -1;
    inset: -45% -10% auto 23%;
    height: 86%;
    background: linear-gradient(110deg, transparent 12%, rgb(255 255 255 / .12) 49%, transparent 74%);
    content: "";
    opacity: .6;
    pointer-events: none;
    transform: rotate(-8deg);
  }

  .chapter-focus-dialog__surface::after {
    position: absolute;
    inset: 0 auto auto 0;
    width: 34px;
    height: 34px;
    border-top: 1px solid var(--signal);
    border-left: 1px solid var(--signal);
    border-top-left-radius: inherit;
    corner-shape: inherit;
    content: "";
    pointer-events: none;
  }

  .chapter-focus-dialog[open] .chapter-focus-dialog__surface {
    animation: chapter-focus-in 300ms var(--ease-ios) both;
  }

  .chapter-focus-dialog__close {
    position: absolute;
    z-index: 2;
    top: 18px;
    right: 20px;
    min-height: 38px;
    padding: 7px 10px;
    border: 0;
    border-bottom: 1px solid rgb(164 193 178 / .45);
    background: transparent;
    color: #dce7df;
    cursor: pointer;
    font-size: 10px;
    letter-spacing: .08em;
    text-transform: uppercase;
  }

  .chapter-focus-dialog__close:hover,
  .chapter-focus-dialog__close:focus-visible {
    border-color: var(--signal);
    color: var(--signal);
    outline: none;
  }

  .chapter-focus-dialog__index {
    align-self: end;
    margin: 0;
    color: #e8c985;
  }

  .chapter-focus-dialog__detail {
    align-self: center;
  }

  .chapter-focus-dialog__detail h3 {
    max-width: 560px;
    margin: 0;
    color: #f4f6f1;
    font-size: clamp(36px, 5vw, 62px);
    font-weight: 450;
    letter-spacing: -.055em;
    line-height: 1.02;
  }

  .chapter-focus-dialog__detail > p {
    max-width: 520px;
    margin: 24px 0 30px;
    color: #c7d5cc;
    font-size: 15px;
    line-height: 1.7;
  }

  .chapter-focus-dialog__meta dl {
    margin: 0;
    border-top: 1px solid rgb(164 193 178 / .38);
  }

  .chapter-focus-dialog__meta dl div {
    display: flex;
    justify-content: space-between;
    gap: 24px;
    padding: 12px 0;
    border-bottom: 1px solid rgb(164 193 178 / .3);
    font-size: 11px;
  }

  .chapter-focus-dialog__meta dt { color: #9fb4a8; }
  .chapter-focus-dialog__meta dd { margin: 0; color: #eef3ec; text-align: right; }

  @keyframes chapter-focus-in {
    from { opacity: 0; transform: translateY(14px) scale(.985); }
    to { opacity: 1; transform: translateY(0) scale(1); }
  }

  @media (max-width: 760px) {
    .cinema-story.is-static .story-chapters {
      grid-template-columns: minmax(0, 1fr);
      gap: 18px;
    }

    .cinema-story.is-static .story-step {
      min-height: 240px;
    }

    .cinema-story.is-static .story-step__copy {
      padding: 28px 24px;
    }

    .chapter-focus-dialog__surface {
      display: block;
      min-height: 0;
      max-height: calc(100svh - 24px);
      overflow-y: auto;
      padding: 62px 24px 30px;
      border-radius: 18px;
    }

    .chapter-focus-dialog__index { margin-bottom: 28px; }
    .chapter-focus-dialog__detail h3 { font-size: clamp(34px, 11vw, 48px); }
    .chapter-focus-dialog__detail > p { margin-block: 20px 26px; font-size: 14px; }
  }

  @media (prefers-reduced-motion: reduce) {
    .cinema-story.is-static .story-step { transition: none; }
    .chapter-focus-dialog[open] .chapter-focus-dialog__surface { animation: none; }
  }
}

@layer components {
  .icon-arrow { display: inline-block; flex: 0 0 auto; font-size: 1.2em; line-height: 1; transition: transform 220ms ease; }
  a:hover .icon-arrow, button:hover .icon-arrow { transform: translate(3px, -3px); }
  a:active .icon-arrow, button:active .icon-arrow { transform: translate(1px, -1px); }
  .button--signal, .button--light { transition: background 180ms, color 180ms, transform 180ms, box-shadow 180ms; }
  .button--signal:active, .button--light:active { transform: translateY(1px) scale(.985); box-shadow: 0 0 0 4px rgb(232 163 61 / .16); }
  .card, .sector-card, .article-card { color: var(--ink); transition: background 200ms, transform 220ms, box-shadow 220ms; }
  .card:hover, .article-card:hover { position: relative; z-index: 1; transform: translateY(-3px); box-shadow: 0 12px 24px rgb(14 22 21 / .04); }
  .ledger__row, .trade-row, .rule-list__item { transition: background 200ms; }
  .ledger__row:hover, .trade-row:hover, .rule-list__item:hover { background: rgb(31 111 107 / .055); }
  .site-header { border-top: 0; border-bottom: 1px solid #35453e; }
  .site-header__inner { grid-template-columns: 190px 1fr auto; gap: 24px; }
  .site-header__cta.text-link { gap: 22px; }
  .site-nav { gap: clamp(14px, 1.8vw, 30px); }
  .site-nav__contact { display: none; }
  .mobile-menu { display: none; }
  button.mobile-menu { min-width: 44px; min-height: 44px; }
  button.mobile-menu > span[aria-hidden="true"]:nth-child(2) { top: 17px; right: 10px; }
  button.mobile-menu > span[aria-hidden="true"]:nth-child(3) { top: 25px; right: 10px; }
  .site-header.is-menu-open button.mobile-menu > span[aria-hidden="true"]:nth-child(2) { top: 21px; transform: rotate(45deg); }
  .site-header.is-menu-open button.mobile-menu > span[aria-hidden="true"]:nth-child(3) { top: 21px; transform: rotate(-45deg); }
  .footer-note { display: block; margin-top: 25px; color: #a8b7ae; font-size: 12px; }
  .footer-wordmark { color: #687d72; }
  .footer-bottom { flex-wrap: wrap; gap: 14px; margin-top: 65px; }
  .footer-links a { padding: 5px 0; }
  .footer-copy { max-width: 370px; }
}
@layer pages {
  .page-hero { flex-direction: column; justify-content: flex-end; align-items: stretch; padding-top: clamp(100px, 10vw, 160px); }
  .page-hero > .shell { flex: 0 0 auto; }
  .page-hero__grid { grid-template-columns: minmax(0, 1.45fr) minmax(280px, .65fr); gap: clamp(40px, 6vw, 100px); }
  .page-hero__copy, .page-hero__aside { min-width: 0; }
  .page-hero .intro-rule { width: min(var(--content-max), calc(100% - (var(--page-pad) * 2))); }
  div.section-heading { max-width: none; grid-template-columns: minmax(0, 1.35fr) minmax(260px, .65fr); }
  .section-heading__copy { display: block; min-width: 0; max-width: 850px; }
  .section-heading__copy > .eyebrow { margin-bottom: 24px; }
  .section-heading__copy h2 { font-size: clamp(38px, 5vw, 72px); font-weight: 450; letter-spacing: -.07em; line-height: .97; }
  .section-heading__copy h2 span { color: #66766b; }
  .section--ink .section-heading__copy h2 span { color: #a1b6ab; }
  .section-heading--split { width: 100%; }
  .section--ink .section__callout > .eyebrow { grid-column: 1 / -1; margin: 0; }
  .section__callout { row-gap: 34px; }
  .section__callout > h2 { grid-column: 1; }
  .section__callout > .button { justify-self: end; align-self: end; }
  .filter-row { min-width: 0; }
  .article-grid { min-width: 0; }
}
@layer utilities {
  @media (max-width:1180px) {
    .site-header__inner { height: 68px; grid-template-columns: 1fr auto; gap: 20px; }
    .site-header__cta.text-link { display: none; }
    .site-nav { display: flex; flex-wrap: wrap; grid-column: 1 / -1; justify-self: stretch; padding: 15px 0; }
    .site-header__inner { height: auto; min-height: 68px; padding-block: 12px; }
    .js .site-header__inner { height: 68px; padding-block: 0; }
    .js .site-nav { display: none; }
    .js .mobile-menu { display: block; }
    .site-nav__contact { display: block; }
    .site-header.is-menu-open .site-nav { display: flex; width: 100%; position: absolute; top: 68px; left: 0; padding: 20px var(--page-pad); background: var(--ink); border-bottom: 1px solid var(--signal); flex-direction: column; align-items: stretch; gap: 0; max-height: calc(100svh - 68px); overflow-y: auto; }
    .site-header.is-menu-open .site-nav a { padding: 14px 0; font-size: 13px; border-bottom: 1px solid #35453e; }
  }
  @media (max-width:760px) {
    .page-hero { min-height: auto; padding: 78px 0 50px; }
    .page-hero__grid, div.section-heading { grid-template-columns: minmax(0, 1fr); gap: 32px; }
    .page-hero__copy .display { max-width: 100%; overflow-wrap: normal; }
    .page-hero__aside .lede { margin-top: 0; }
    .page-hero .intro-rule { margin-top: 48px; }
    .section-heading__aside, .section-heading__copy { min-width: 0; }
    .article-grid { grid-template-columns: minmax(0, 1fr); }
    .section__callout > .button { justify-self: start; }
    .footer-access { align-items: flex-start; flex-direction: column; }
    .footer-sign-in { width: 100%; }
    .footer-bottom > span { display: none; }
  }
}
@layer base {
  @font-face { font-family: 'Geist'; font-style: normal; font-weight: 100 900; font-display: swap; src: url('./fonts/geist-latin.woff2') format('woff2'); }
  ::selection { color: var(--ink); }
  :focus-visible { outline-color: var(--signal-ink); }
  .section--ink :focus-visible, .site-header :focus-visible, .site-footer :focus-visible { outline-color: var(--signal); }
}
@layer components {
  .button--signal { background: var(--ink); border-color: var(--ink); }
  .button--signal:hover { background: var(--signal); color: var(--ink); }
  .button--light:hover { background: var(--signal); border-color: var(--signal); }
  .eyebrow { color: var(--teal); }
  .section--ink .eyebrow, .site-footer .eyebrow { color: var(--teal-bright); }
  .state-card { background: var(--teal-mist); border-color: #becfc4; }
  .state-card__live { color: var(--teal); }
  .state-card__live::before { background: var(--teal); }
  .state-card__count { background: #d1e1d6; color: var(--ink); }
  .state-card__list time, .state-card__task span, .state-card__heading p, .state-card__foot { color: #526357; }
  .state-card__task strong { white-space: normal; }
  .field-reel__image-wrap picture { display: contents; }
}
@layer pages {
  .section--ink { background: radial-gradient(ellipse at 90% 10%, #1b3831, transparent 65%), var(--ink); }
  .comparison-grid article:last-child, .thesis-panel { background: #173e36; }
  .activity-ticker { border-block: 1px solid #344c41; background: #102b24; }
  .activity-ticker__dot { background: var(--teal-bright); }
  .activity-ticker__item em { color: #aec2b7; }
}

@layer pages {
  .has-operating-model main, .has-operating-model .site-footer { position: relative; z-index: 1; }
  .has-operating-model main > .section { background: var(--paper); }
  .has-operating-model main > .section--mist { background: var(--mist); }
  .has-operating-model .page-hero:not(.home-hero) { background: var(--paper); }
  .has-operating-model main > .section--ink { background: radial-gradient(ellipse at 90% 10%, #1b3831, transparent 65%), var(--ink); }
  .has-operating-model .comparison-grid { margin-top: 0; }
  .spatial-canvas { z-index: 0; position: fixed; inset: 0; background: var(--ink); pointer-events: none; opacity: 0; transition: opacity 600ms; }
  .spatial-canvas[data-renderer="loading"] {opacity:1;background:radial-gradient(circle at 65% 45%,#26383d 0,#142328 38%,#091418 78%);}
  .spatial-canvas[data-renderer="loading"]::before {content:"Preparing the operating view";position:absolute;left:var(--page-pad);bottom:clamp(28px,7vh,72px);z-index:2;color:#dfc28c;font:500 10px/1.4 Geist,sans-serif;letter-spacing:.14em;text-transform:uppercase;animation:scene-loading-pulse 1.6s ease-in-out infinite alternate;}
  @keyframes scene-loading-pulse {from{opacity:.42}to{opacity:1}}
  html.cinema-deep-link-loading body::after {content:"Preparing the operating view";position:fixed;inset:0;z-index:1000;display:grid;place-items:center;background:radial-gradient(circle at 62% 42%,#26383d 0,#142328 38%,#091418 78%);color:#dfc28c;font:500 10px/1.4 Geist,sans-serif;letter-spacing:.14em;text-transform:uppercase;animation:scene-loading-pulse 1.2s ease-in-out infinite alternate;}
  .spatial-canvas canvas { display: block; width: 100%; height: 100%; }
  .webgl-ready .spatial-canvas { opacity: 1; }
  .spatial-canvas.is-orbiting { pointer-events: auto; z-index: 3; cursor: grab; touch-action: none; clip-path: inset(12% 0 28% 42%); }
  .spatial-canvas.is-orbiting:active { cursor: grabbing; }
  .home-hero { min-height: calc(100svh - 74px); max-height: 1100px; background: var(--ink); padding: clamp(86px, 9vw, 130px) 0 32px; justify-content: space-between; }
  .webgl-ready .home-hero { background: transparent; }
  .home-hero::after { content: ''; position: absolute; inset: 0; z-index: 0; pointer-events: none; background: linear-gradient(90deg, rgb(14 22 21 / .94), rgb(14 22 21 / .64) 33%, transparent 72%); }
  .home-hero .page-hero__grid { display: block; }
  .home-hero .page-hero__copy { max-width: 100%; }
  .home-hero .display { font-size: clamp(68px, 8.2vw, 126px); line-height: .97; letter-spacing: -.078em; max-width: 1080px; }
  .home-hero .display span { display: block; color: #9eb9aa; }
  .home-hero .eyebrow { color: #a9c0b3; letter-spacing: .12em; }
  .home-hero .page-hero__aside { margin-top: 40px; max-width: 350px; }
  .home-hero .lede { margin: 0; max-width: 330px; font-size: 23px; color: #f4f7f0; line-height: 1.25; }
  .home-hero .hero-description { margin-top: 18px; max-width: 280px; font-size: 13px; line-height: 1.55; color: #b2c1b8; }
  .home-hero .button-row { margin-top: 24px; }
  .home-hero .button { margin-top: 0; background: var(--signal); border-color: var(--signal); color: var(--ink); min-height: 50px; padding-inline: 22px; }
  .home-hero .button:hover { background: #f2c77a; border-color: #f2c77a; }
  .home-hero .intro-rule { margin-top: 68px; color: #b3c4b8; border-color: #41534a; }
  .home-hero .intro-rule > span { display: flex; align-items: center; gap: 12px; color: inherit; }
  .status-dot { width: 5px; height: 5px; display: inline-block; background: var(--signal); border-radius: 50%; box-shadow: 0 0 0 4px rgb(232 163 61 / .1); flex: 0 0 auto; }
  .hero-fallback { position: absolute; inset: 0; pointer-events: none; }
  .hero-fallback .operating-diagram { position: absolute; height: 90%; width: 83%; bottom: 0; right: -5%; }
  .webgl-ready .hero-fallback { visibility: hidden; }
  .operating-story { position: relative; color: var(--paper); background: var(--ink); isolation: isolate; scroll-margin-top: 68px; }
  .cinema-story {overflow-anchor:none;}
  .webgl-ready .operating-story:not(.is-static) { background: linear-gradient(90deg, rgb(14 22 21 / .98) 4%, rgb(14 22 21 / .85) 25%, transparent 70%); }
  .story-intro { padding-block: clamp(85px, 9vw, 140px) 70px; position: relative; z-index: 2; border-top: 1px solid #34493e; }
  .story-intro h2 { max-width: 820px; font-size: clamp(46px, 6vw, 87px); font-weight: 450; letter-spacing: -.07em; line-height: 1; }
  .story-intro h2 span, .story-end h3 span { color: #88a89a; }
  .story-intro > p:not(.eyebrow) { max-width: 430px; margin-top: 28px; font-size: 15px; line-height: 1.55; color: #bacdc1; }
  .story-intro > .text-link { color: #c4d9cc; border-color: #647f6f; margin-top: 30px; }
  .story-intro .eyebrow, .story-step .eyebrow, .story-end .eyebrow { color: var(--teal-bright); }
  .story-layout { position: relative; z-index: 2; padding-bottom: 50px; }
  .story-console { padding: 22px 0; border-top: 1px solid #476052; }
  .story-console__meta { display: flex; align-items: center; gap: 10px; color: #adc3b6; font-size: 9px; line-height: 1.5; letter-spacing: .07em; text-transform: uppercase; }
  .story-console__meta > span:last-child { margin-left: auto; color: var(--signal); }
  .story-nav { display: flex; flex-wrap: wrap; gap: 5px; margin: 17px 0; }
  .story-nav a { min-height: 44px; display: flex; align-items: center; gap: 8px; padding: 8px 10px; border: 1px solid #345044; color: #bfd1c4; font-size: 11px; transition: border 180ms, background 180ms; }
  .story-nav a > span:first-child { font-size: 9px; color: #a0b8a9; }
  .story-nav a[aria-current='step'], .story-nav a:hover { background: #204c3d; border-color: #779c86; color: #f3f7ed; }
  .story-nav a[aria-current='step'] > span:first-child { color: var(--signal); }
  .story-controls { display: none; gap: 10px; flex-wrap: wrap; }
  .js .story-controls { display: flex; }
  .story-controls button { min-height: 36px; border: 0; border-bottom: 1px solid #667a6b; background: transparent; padding: 7px 2px; color: #c2d3c4; font-size: 11px; cursor: pointer; }
  .story-controls button:hover { color: var(--signal); }
  .story-controls button[aria-pressed='true'] { color: var(--signal); border-color: var(--signal); }
  .story-controls [data-orbit-toggle], .story-controls [data-static-toggle] { display: none; }
  .webgl-ready .story-controls [data-static-toggle], .webgl-ready .operating-story:not(.is-static) [data-orbit-toggle] { display: block; }
  .story-instruction { max-width: 440px; margin-top: 12px; color: #99b09f; font-size: 11px; line-height: 1.5; }
  .story-chapters { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 32px; }
  .story-step { scroll-margin-top: 110px; padding: 48px 0; border-top: 1px solid #344c3e; }
  .story-step:focus { outline: none; }
  .story-step:focus-visible .story-step__copy { outline: 2px solid var(--signal); outline-offset: 12px; }
  .story-step h3 { font-size: clamp(36px, 4.3vw, 64px); font-weight: 450; letter-spacing: -.066em; line-height: .98; max-width: 420px; }
  .story-step p:not(.eyebrow) { max-width: 355px; color: #bfcec2; font-size: 15px; line-height: 1.55; margin-top: 25px; }
  .story-step .story-step__note { color: var(--teal-bright); font-size: 10px; letter-spacing: .04em; }
  .story-step dl { max-width: 355px; border-top: 1px solid #49604f; margin-top: 28px; font-size: 11px; }
  .story-step dl div { display: flex; gap: 20px; justify-content: space-between; border-bottom: 1px solid #344c3e; padding: 11px 0; }
  .story-step dt { color: #9eb6a5; }
  .story-step dd { margin: 0; color: #e4ebdf; text-align: right; }
  .story-fallback { width: min(100%, 1100px); margin: -60px auto 0; }
  .operating-diagram { display: block; width: 100%; height: auto; }
  .webgl-ready .operating-story:not(.is-static) .story-fallback { display: none; }
  .webgl-ready .operating-story:not(.is-static) .story-layout { display: grid; grid-template-columns: minmax(300px,.8fr) minmax(0,1.2fr); gap: 10%; }
  .webgl-ready .operating-story:not(.is-static) .story-console { grid-column: 2; grid-row: 1; align-self: start; position: sticky; top: calc(100svh - 230px); background: linear-gradient(180deg, rgb(14 22 21 / .8), rgb(14 22 21 / .94)); backdrop-filter: blur(8px); padding: 17px 20px 20px; border: 1px solid #365045; }
  .webgl-ready .operating-story:not(.is-static) .story-nav a > span:last-child { display: none; }
  .webgl-ready .operating-story:not(.is-static) .story-nav { flex-wrap: nowrap; }
  .webgl-ready .operating-story:not(.is-static) .story-nav a { flex: 1; padding: 5px; justify-content: center; min-width: 0; }
  .webgl-ready .operating-story:not(.is-static) .story-chapters { display: block; grid-column: 1; grid-row: 1; }
  .webgl-ready .operating-story:not(.is-static) .story-step { min-height: 75svh; display: flex; align-items: center; padding-block: 70px; border-top: 0; }
  .webgl-ready .operating-story:not(.is-static) .story-step__copy { opacity: .85; transition: opacity 300ms; }
  .webgl-ready .operating-story:not(.is-static) .story-step.is-active .story-step__copy { opacity: 1; }
  .story-end { position: relative; z-index: 2; padding-block: 90px 110px; border-top: 1px solid #365044; }
  .story-end h3 { font-size: clamp(42px, 5.5vw, 78px); font-weight: 450; letter-spacing: -.065em; line-height: 1; }
  .story-end .button { margin-top: 30px; }
  .ticker-control { display: flex; align-items: center; justify-content: space-between; padding: 0 var(--page-pad) 15px; color: #c5d7c9; font-size: 10px; letter-spacing: .06em; text-transform: uppercase; }
  .ticker-control button { border: 0; background: transparent; color: inherit; text-decoration: underline; cursor: pointer; font-size: 11px; min-height: 30px; }
  .activity-ticker.is-paused .activity-ticker__track { animation-play-state: paused; }
}
@layer utilities {
  @media (max-width:760px) {
    .home-hero { min-height: calc(100svh - 68px); max-height: none; padding-top: 75px; }
    .home-hero .display { font-size: clamp(54px, 12.8vw, 80px); max-width: 650px; }
    .home-hero .page-hero__aside { margin-top: 42px; max-width: 260px; }
    .home-hero .lede { font-size: 19px; }
    .home-hero .hero-description { max-width: 235px; font-size: 12px; }
    .home-hero .intro-rule { margin-top: 55px; font-size: 9px; }
    .home-hero .intro-rule > span:last-child { display: none; }
    .home-hero::after { background: linear-gradient(90deg, rgb(14 22 21 / .88), rgb(14 22 21 / .35)); }
    .hero-fallback .operating-diagram { width: 170%; max-width: none; right: -70%; top: 0; height: 100%; }
    .story-intro { padding-block: 70px 40px; }
    .story-intro h2 { font-size: clamp(40px, 11vw, 64px); }
    .story-intro > p:not(.eyebrow) { font-size: 13px; max-width: 320px; }
    .story-chapters { grid-template-columns: minmax(0,1fr); gap: 0; }
    .story-step h3 { font-size: 40px; max-width: 310px; }
    .story-step p:not(.eyebrow) { font-size: 14px; }
    .story-console__meta { font-size: 8px; }
    .story-nav a { font-size: 10px; }
    .story-fallback { margin-top: 0; }
    .webgl-ready .operating-story:not(.is-static) { background: linear-gradient(0deg, rgb(14 22 21 / .1), rgb(14 22 21 / .35)); }
    .webgl-ready .operating-story:not(.is-static) .story-layout { display: flex; flex-direction: column; }
    .webgl-ready .operating-story:not(.is-static) .story-console { width: 100%; z-index: 4; position: sticky; top: 78px; padding: 12px; margin-bottom: 0; }
    .webgl-ready .operating-story:not(.is-static) .story-instruction { display: none; }
    .webgl-ready .operating-story:not(.is-static) .story-nav { gap: 3px; margin: 10px 0; }
    .webgl-ready .operating-story:not(.is-static) .story-controls button { min-height: 30px; padding: 3px 0; }
    .webgl-ready .operating-story:not(.is-static) .story-step { min-height: 90svh; padding: 40svh 0 40px; align-items: end; }
    .webgl-ready .operating-story:not(.is-static) .story-step__copy { background: linear-gradient(90deg, rgb(14 22 21 / .93), rgb(14 22 21 / .72)); padding: 24px 20px; margin-inline: -10px; width: calc(100% + 20px); }
    .spatial-canvas.is-orbiting { clip-path: inset(32% 0 26% 0); }
    .story-end { padding-block: 65px 80px; background: rgb(14 22 21 / .94); }
  }
  @media (prefers-reduced-motion:reduce) { .activity-ticker__track { animation: none; } }
}
@layer components {
  [hidden] { display: none !important; }
  .filter-row button { min-height: 40px; padding: 10px 15px; border: 1px solid var(--line); background: transparent; color: var(--muted); font-size: 11px; cursor: pointer; transition: background 180ms, color 180ms; }
  .filter-row button:hover { background: var(--teal-mist); }
  .filter-row button[aria-pressed='true'] { background: var(--ink); color: var(--paper); border-color: var(--ink); }
  .filter-status { margin-top: 16px; color: var(--muted); font-size: 11px; }
  /* `.field-error` and the failed-field treatment are defined once, at the end
     of this stylesheet under "Inquiry form: the invalid state", with the
     --alert tokens. The two hard-coded reds that used to live here were the
     same two colours written twice. */
  .form-field :is(input,select,textarea):focus-visible { outline: none; border-bottom: 2px solid var(--signal-ink); background: #f2f3e9; }
  .form-field select { appearance: auto; }
  .inquiry-form { padding: 0 28px 28px; background: var(--paper); }
  .inquiry-form__bar { display: flex; align-items: center; gap: 10px; margin-inline: -28px; padding: 18px 28px; background: var(--ink); color: #c4d8c9; font-size: 9px; letter-spacing: .04em; margin-bottom: 28px; }
  .inquiry-form__bar span:last-child { margin-left: auto; color: var(--signal); }
  .inquiry-summary { margin-top: 30px; padding: 25px; background: var(--teal-mist); border: 1px solid #aac0af; }
  .inquiry-summary h3 { font-weight: 500; font-size: 26px; letter-spacing: -.04em; line-height: 1.1; }
  .inquiry-summary > p:not(.eyebrow) { margin-top: 15px; font-size: 13px; color: var(--muted); line-height: 1.5; }
  .inquiry-summary dl { margin: 25px 0; font-size: 12px; }
  .inquiry-summary dl > div { padding: 12px 0; border-bottom: 1px solid #bed0c3; }
  .inquiry-summary dt { color: var(--muted); font-size: 10px; margin-bottom: 5px; }
  .inquiry-summary dd { margin: 0; overflow-wrap: anywhere; white-space: pre-wrap; }
  .inquiry-summary button { border: 0; border-bottom: 1px solid; cursor: pointer; background: transparent; }
}
@layer pages {
  .field-story { padding-block: 100px; }
  .field-story__grid { display: grid; grid-template-columns: .8fr 1.2fr; align-items: center; gap: 8%; }
  .field-story__copy h2 { font-size: clamp(40px, 4.7vw, 68px); font-weight: 450; letter-spacing: -.065em; line-height: 1; }
  .field-story__copy h2 span { color: var(--teal); }
  .field-story__copy > p:not(.eyebrow) { margin-top: 25px; max-width: 330px; font-size: 14px; color: var(--muted); line-height: 1.5; }
  .field-story__copy .text-link { margin-top: 30px; }
  .field-story__copy > .meta { font-size: 10px !important; }
  .field-story__photo { display: block; height: 580px; overflow: hidden; background: var(--teal-mist); }
  .field-story__photo img { width: 100%; height: 100%; object-fit: cover; }
  .sector-deck { background: #544326; }
  .sector-deck__media { background-color: #4d4230; }
  .sector-deck__video { filter: saturate(.5) brightness(.68); }
  .sector-deck__shade { background: linear-gradient(110deg, rgb(14 22 21 / .6), rgb(24 54 42 / .15)); }
  .sector-deck__photo { position: absolute; inset: 0; z-index: -1; background: var(--ink); }
  .sector-deck__photo img { width: 100%; height: 100%; object-fit: cover; filter: saturate(.65); }
  .sector-deck__card { border: 1px solid #8baca0; background: #21423a; isolation: isolate; }
  .sector-deck__card::before { background: linear-gradient(180deg, rgb(7 22 18 / .55), rgb(7 22 18 / .15) 35%, rgb(7 22 18 / .94)); opacity: 1; }
  .sector-deck__card:not(.is-current)::before { opacity: .9; }
  .sector-deck__card::after { border-color: rgb(210 234 206 / .2); }
  .sector-deck__card-copy { gap: 10px; }
  .sector-deck__card-copy > span:last-child { color: #e0ebdc; }
  .sector-deck__index { color: #e5cf9c; }
  .sector-deck__controls { position: absolute; right: 0; bottom: 0; display: flex; gap: 8px; z-index: 2; }
  .sector-deck__controls button { width: 44px; height: 44px; display: grid; place-items: center; border: 1px solid #c2ccaa; background: rgb(14 22 21 / .6); color: var(--paper); cursor: pointer; font-size: 20px; }
  .sector-deck__controls button:hover { background: var(--signal); color: var(--ink); }
  .sector-details { margin-top: 70px; border-top: 1px solid var(--line); }
  .sector-detail { display: grid; grid-template-columns: 1fr 1fr; gap: 12%; padding: 40px 0; border-bottom: 1px solid var(--line); scroll-margin-top: 110px; }
  .sector-detail h3 { font-size: clamp(28px, 3vw, 43px); font-weight: 450; letter-spacing: -.05em; line-height: 1.05; }
  .sector-detail p:not(.eyebrow) { max-width: 430px; font-size: 14px; line-height: 1.5; color: var(--muted); }
  .sector-detail .meta { margin-top: 15px; font-size: 12px !important; }
  .sector-detail .text-link { margin-top: 20px; }
  .research-notes .section-heading { margin-bottom: 60px; }
  .insight-note { border-top: 1px solid var(--line); scroll-margin-top: 100px; }
  .insight-note:last-child { border-bottom: 1px solid var(--line); }
  .insight-note summary { padding: 30px 44px 30px 0; list-style: none; position: relative; cursor: pointer; }
  .insight-note summary::-webkit-details-marker { display: none; }
  .insight-note summary h3 { max-width: 800px; font-size: clamp(25px, 3vw, 42px); font-weight: 450; letter-spacing: -.045em; line-height: 1.1; }
  .insight-note summary .eyebrow { font-size: 9px; margin-bottom: 14px; }
  .insight-note summary > .icon-arrow { position: absolute; right: 5px; top: 50%; }
  .insight-note[open] summary > .icon-arrow { transform: rotate(180deg); }
  .insight-note__body { max-width: 700px; margin-left: auto; padding: 0 0 55px; }
  .insight-note__body > p { font-size: 15px; color: var(--muted); line-height: 1.65; margin: 20px 0; }
  .insight-note__body .lede { max-width: none; font-size: 20px; color: var(--ink); }
  .insight-note__body h4 { margin: 30px 0 0; font-size: 20px; letter-spacing: -.025em; font-weight: 500; }
  .insight-note__body .meta { font-size: 11px; }
}
@layer utilities {
  html:not(.js) .sector-deck__track { height: auto; min-height: 0; }
  html:not(.js) .sector-deck__sticky { height: auto; position: relative; top: 0; }
  html:not(.js) .sector-deck__cards { display: grid; gap: 20px; height: auto; width: 100%; aspect-ratio: auto; transform: none; }
  html:not(.js) .sector-deck__card { position: relative; min-height: 380px; transform: none; pointer-events: auto; }
  html:not(.js) .sector-deck__card .sector-deck__card-copy, html:not(.js) .sector-deck__card .sector-deck__card-head { opacity: 1; }
  html:not(.js) .sector-deck__controls { display: none; }
  html:not(.js) .activity-ticker__track { animation: none; }
  html:not(.js) .filter-row { display: none; }
  .is-static .sector-deck__controls { display: none; }
  @media (max-width:760px) {
    .field-story__grid { grid-template-columns: 1fr; gap: 35px; }
    .field-story__photo { height: 420px; }
    .sector-detail { grid-template-columns: minmax(0,1fr); gap: 25px; }
    .sector-deck__controls { display: none; }
    .sector-deck__card { min-height: 360px; }
    .inquiry-form__bar { padding: 18px; gap: 8px; font-size: 8px; }
    .inquiry-form { padding-inline: 18px; }
    .inquiry-form__bar { margin-inline: -18px; }
    .inquiry-summary { padding: 20px 15px; }
  }
}
@layer components {
  [data-hero-static] { display: none; min-height: 32px; padding: 3px 0; border: 0; border-bottom: 1px solid #789383; background: transparent; color: #c6d7c9; font-size: 11px; cursor: pointer; }
  .webgl-ready [data-hero-static] { display: block; }
  .story-controls [hidden] { display: none !important; }
}

@layer pages {
  .state-card { background: var(--teal-mist); border-color: #becfc4; }
  .state-card__live { color: var(--teal); }
  .state-card__live::before { background: var(--teal); }
  .state-card__count { background: #d1e1d6; color: var(--ink); }
  .state-card__list time, .state-card__task span, .state-card__heading p, .state-card__foot { color: #526357; }
  .state-card__task strong { white-space: normal; }
  .card__number, .item-number, .ledger__head, .page-hero__ledger .ledger__row > span:first-child, .article-card__meta { color: #526357; }
  .section--ink .item-number { color: #adc3b6; }
  .comparison-grid article:last-child .eyebrow { color: var(--teal-bright); }
}
/* The architectural study: photographic chapters and one connected spatial model. */
@layer pages {
 .home-hero::after { background:linear-gradient(90deg,rgba(9,20,25,.92),rgba(9,20,25,.68) 34%,rgba(9,20,25,.13) 75%),linear-gradient(0deg,rgba(9,20,25,.66),transparent 45%); }
 .home-hero .display { max-width:1050px;font-size:clamp(70px,8vw,118px); }
 .home-hero .display span { color:#e6dbbf; }
 .home-hero .eyebrow { color:#dbc9a6; }
 .home-hero .lede { max-width:370px;font-size:21px; }
 .home-hero .hero-description { max-width:330px; }
 .page-hero .display > span { display:block; }
 .cinema-stage { position:fixed;inset:0;z-index:0;pointer-events:none;opacity:0;background:#101b20;transition:opacity .65s ease;overflow:hidden; }
 .cinema-frame { position:absolute;inset:0;opacity:0;will-change:transform,opacity,clip-path;transform-origin:64% 50%; }
 .cinema-frame img { width:100%;height:100%;object-fit:cover;object-position:62% center; }
 .cinema-vignette { position:absolute;inset:0;background:linear-gradient(90deg,rgba(9,17,21,.94) 0%,rgba(9,17,21,.78) 24%,rgba(9,17,21,.24) 49%,transparent 73%),linear-gradient(0deg,rgba(9,17,21,.6),transparent 30%); }
 .cinema-grain {position:absolute;inset:18px; border:1px solid rgba(227,210,174,.2); }
 .story-intro { background:#101b20; }
 .cinema-story .story-intro h2 { max-width:880px; }
 .cinema-story .story-intro .eyebrow,.cinema-story .story-step .eyebrow {color:#e1c99b;}
 .cinema-story .story-end {background:#101b20;}
 .story-step__image {display:block;overflow:hidden;margin-bottom:28px;border:1px solid #49604f;}
 .story-step__image img {width:100%;height:auto;aspect-ratio:16/9;object-fit:cover;}
 .cinema-story .story-chapters { gap:38px; }
 .cinema-story .story-step {display:block;}
 .webgl-ready .cinema-story:not(.is-static) .story-step__image {display:none;}
 .webgl-ready .cinema-story:not(.is-static) .story-step {min-height:100svh;display:flex;align-items:center;}
 .webgl-ready .cinema-story:not(.is-static) .story-step__copy {opacity:1;}
 .webgl-ready .cinema-story:not(.is-static) {background:transparent;}
 .webgl-ready .cinema-story:not(.is-static) .story-console {background:rgba(13,24,28,.91);border-color:#7b7666;backdrop-filter:blur(15px);top:calc(100svh - 225px);}
 .cinema-story .story-step h3 {font-size:clamp(35px,4.2vw,62px);max-width:470px;line-height:1.02;}
 .cinema-story .story-step p:not(.eyebrow) {max-width:345px;color:#e0e3dd;}
 .cinema-story .story-nav a[aria-current='step'] {background:#544833;border-color:#c9ac76;color:#fff8ea;}
 .cinema-story .story-nav a[aria-current='step'] > span:first-child {color:#ffe4b0;}
 .cinema-story .story-nav a {border-color:#53636a;}
 .cinema-story .story-step dl {border-color:#74807f;}
 .cinema-story .story-step dl div {border-color:#596660;}
 .cinema-story .story-step dt {color:#c3d1cb;}
 .cinema-story .story-step dd {color:#f4eee1;}
 .cinema-story.is-static .story-step {min-height:0;}
 .cinema-story.is-static .story-step__copy {padding:0;}
 .sector-deck__linework {position:absolute;inset:16% 14% 20%;opacity:.55;pointer-events:none;display:flex;align-items:end;justify-content:center;gap:8%;transform:perspective(700px) rotateX(12deg) rotateY(-15deg);}
 .sector-deck__linework i {display:block;width:14%;height:65%;border:1px solid #c9b991;background:repeating-linear-gradient(0deg,transparent 0 20px,rgba(223,217,189,.3) 21px 22px),linear-gradient(100deg,rgba(197,174,129,.12),transparent);box-shadow:12px -9px 0 -1px #203b35,12px -9px 0 0 #738274;}
 .sector-deck__linework i:nth-child(2){height:85%;}.sector-deck__linework i:nth-child(3){height:100%;}.sector-deck__linework i:nth-child(4){height:75%;}
 .sector-deck__linework--1 i {height:30%!important;width:30%;}.sector-deck__linework--2 {transform:perspective(700px) rotateY(18deg);}.sector-deck__linework--4 i {height:55%!important;}.sector-deck__linework--5 i {height:75%!important;}
 .sector-deck__card {background:linear-gradient(130deg,#1c3737,#102023);border-color:#a6a98f;}
 .sector-deck__card::before {background:linear-gradient(0deg,rgba(8,22,24,.98),transparent 65%);}
 .sound-control {position:fixed;right:22px;bottom:20px;z-index:60;}
 .sound-control button {display:flex;align-items:center;gap:10px;min-height:42px;padding:10px 14px;border:1px solid #8a8776;background:#111e22;color:#f2e9d7;font:500 10px/1.3 Geist,sans-serif;letter-spacing:.06em;text-transform:uppercase;cursor:pointer;box-shadow:0 3px 22px #0002;}
 .sound-control button:hover {border-color:#e8bb76;}
 .sound-bars {display:flex;align-items:center;gap:3px;height:15px;}
 .sound-bars i {width:2px;height:3px;display:block;background:#ddbd82;transition:height .3s;}
 .sound-control button[aria-pressed='true'] i {animation:jazz-meter 1s ease-in-out infinite alternate;}
 .sound-control button[aria-pressed='true'] i:nth-child(2) {animation-delay:-.35s;}
 .sound-control button[aria-pressed='true'] i:nth-child(3) {animation-delay:-.7s;}
 @keyframes jazz-meter {from{height:3px}to{height:14px}}
 @view-transition {navigation:auto;}
}
@layer utilities {
 @media(max-width:1320px) {
  body.is-menu-open {overflow:hidden;}
  .site-header__inner {grid-template-columns:1fr auto;min-height:68px;}
  .site-header__cta.text-link{display:none;}.js .mobile-menu{display:block;}.js .site-nav{display:none;}.site-nav__contact{display:block;}
  .site-header.is-menu-open .site-nav {display:flex;position:fixed;inset:68px 0 0;flex-direction:column;align-items:stretch;width:100%;height:calc(100dvh - 68px);max-height:none;overflow-y:auto;overscroll-behavior:contain;padding:20px var(--page-pad) max(28px,env(safe-area-inset-bottom));gap:0;background:var(--ink);border-bottom:1px solid var(--signal);}
  .site-header.is-menu-open .site-nav a{padding:13px 0;}
  body.is-menu-open .sound-control {opacity:0;visibility:hidden;pointer-events:none;}
 }
 @media(max-width:760px){
  .home-hero .display{font-size:clamp(51px,12.6vw,78px);}.home-hero .lede{font-size:18px;max-width:290px;}
  .home-hero::after {background:linear-gradient(90deg,rgba(9,20,25,.81),rgba(9,20,25,.18)),linear-gradient(0deg,rgba(9,20,25,.73),transparent);}
  .cinema-frame img {object-position:65% center;}.cinema-vignette {background:linear-gradient(0deg,rgba(9,17,21,.95),rgba(9,17,21,.55) 38%,transparent 70%);}.cinema-grain{inset:10px;}
  .webgl-ready .cinema-story:not(.is-static) .story-console {top:78px;padding:12px;}
  .webgl-ready .cinema-story:not(.is-static) .story-step {min-height:110svh;padding-top:40svh;align-items:end;}
  .webgl-ready .cinema-story:not(.is-static) .story-step__copy {background:rgba(9,18,22,.9);padding:24px 20px;}
  .cinema-story .story-step h3 {font-size:34px;}.cinema-story .story-step p:not(.eyebrow){font-size:13px;}.cinema-story .story-step dl{margin-top:18px;}
  .sound-control{right:12px;bottom:12px;transition:opacity .25s ease,visibility .25s ease;}.sound-control button{width:44px;min-height:44px;padding:0;justify-content:center;}.sound-control [data-sound-label]{display:none;}
 }
 @media(prefers-reduced-motion:reduce){.sound-control button[aria-pressed='true'] i{animation:none;}.cinema-stage{transition:none;}::view-transition-old(root),::view-transition-new(root){animation:none;}}
}
@layer pages {
 .floorplate {width:142px;margin:0 0 18px;color:#d4b78a;display:grid;gap:7px;font-size:11px;letter-spacing:.035em}
 .floorplate svg {width:116px;height:70px;filter:drop-shadow(0 0 9px #ba996126)}
 .floorplate small {font-size:9px;color:#c0c7c8;letter-spacing:.02em}
 .story-console {max-width:210px}
 .cinema-stage {background:#111c22}
 .cinema-stage__vignette {background:linear-gradient(90deg,rgba(8,17,21,.86) 0%,rgba(8,17,21,.45) 39%,rgba(8,17,21,.05) 76%),linear-gradient(0deg,rgba(8,17,21,.8),transparent 25%,transparent 80%,rgba(8,17,21,.55))}
 .operating-story.cinema-story .story-step__copy {max-width:465px}
 .webgl-ready .story-step.is-active .story-step__copy {filter:none}
 @media(max-width:760px){
  .floorplate {display:none}
  .story-console {max-width:none}
  .cinema-stage__vignette {background:linear-gradient(0deg,rgba(8,17,21,.92),rgba(8,17,21,.65) 37%,transparent 75%)}
 }
}
@layer pages {
 .webgl-ready .cinema-story:not(.is-static) .story-console {top:100px;justify-self:end;max-width:185px;width:100%;padding:15px;z-index:4}
 .webgl-ready .cinema-story:not(.is-static) .story-nav {display:grid;grid-template-columns:repeat(3,1fr);gap:5px;margin:14px 0}
 .webgl-ready .cinema-story:not(.is-static) .story-nav a {min-height:36px;min-width:36px}
 .cinema-story .story-controls {gap:2px;display:grid}
 .cinema-story .story-controls button {min-height:40px;text-align:left}
 .cinema-story .story-instruction {font-size:10px;line-height:1.5}
 .cinema-story .floorplate {margin-bottom:12px}
 .cinema-story .story-console__meta {letter-spacing:0;font-size:8px}
 @media(max-width:760px){
 .webgl-ready .cinema-story:not(.is-static) .story-console {top:74px;max-width:none;padding:10px}
 .webgl-ready .cinema-story:not(.is-static) .story-nav {display:flex;gap:3px;margin:7px 0}
 .webgl-ready .cinema-story:not(.is-static) .story-nav a {min-width:0;min-height:32px}
 .cinema-story .story-controls {display:flex;gap:15px}
 .cinema-story .story-controls button {min-height:34px;font-size:10px}
 .cinema-story .story-instruction {display:none}
 }
}
@layer pages {
 .spatial-canvas::after {content:"";position:absolute;inset:0;pointer-events:none;background:linear-gradient(90deg,rgba(10,19,23,.98),rgba(10,19,23,.7) 29%,transparent 52%)}
 .webgl-ready .cinema-story:not(.is-static) .story-nav a {min-height:44px}
 .webgl-ready .cinema-story:not(.is-static) .story-nav a:not([aria-current='step']) {background:transparent}
 .cinema-story .story-controls button {min-height:44px}
 .sound-control button {min-height:44px}
 @media(max-width:760px){
 .webgl-ready .cinema-story:not(.is-static) .story-step {min-height:100svh;padding:32svh 0 110px;scroll-margin-top:0;align-items:end}
 .webgl-ready .cinema-story:not(.is-static) .story-nav {overflow-x:auto;scrollbar-width:none}
 .webgl-ready .cinema-story:not(.is-static) .story-nav a {min-width:44px;min-height:44px;flex:0 0 44px}
 .webgl-ready .cinema-story:not(.is-static) .story-controls button {min-height:44px}
 .cinema-vignette {background:linear-gradient(0deg,rgba(8,17,21,.96),rgba(8,17,21,.48) 40%,transparent 77%)}
 .spatial-canvas::after {background:linear-gradient(0deg,rgba(10,19,23,.98),rgba(10,19,23,.6) 35%,transparent 66%)}
 }
}

@layer pages {
 .division-floorplan {display:grid;place-content:center;gap:24px;min-height:280px;padding:32px;color:#d4b78a;background:linear-gradient(145deg,#203337,#0e1b20);border:1px solid #667676}
 .division-floorplan svg {display:block;width:100%;min-width:200px;max-height:230px}
 .division-floorplan figcaption {font-size:11px;letter-spacing:.05em;text-align:center}
 @media(min-width:761px){.cinema-frame[data-room="south"] img {transform:scale(2.2);transform-origin:50% 68%;object-position:50% center}}
}

@layer pages {
 .cinema-stage {display:none!important}
 .webgl-ready .cinema-story:not(.is-static) {background:transparent}
 .spatial-canvas::after {background:linear-gradient(90deg,rgba(10,20,24,.83),rgba(10,20,24,.42) 24%,transparent 54%),linear-gradient(0deg,rgba(10,20,24,.4),transparent 35%)}
 .webgl-ready .cinema-story:not(.is-static) .story-step__copy {max-width:340px;background:transparent;padding:0}
 .webgl-ready .cinema-story:not(.is-static) .story-step h3 {font-size:clamp(30px,3.1vw,46px);line-height:1.04;letter-spacing:-.055em}
 .webgl-ready .cinema-story:not(.is-static) .story-step p:not(.eyebrow) {font-size:13px;line-height:1.6;max-width:305px;margin-top:18px}
 .webgl-ready .cinema-story:not(.is-static) .story-step dl {max-width:305px;font-size:10px}
 .webgl-ready .cinema-story:not(.is-static) .story-step dl div:nth-child(2) {display:none}
 .webgl-ready .cinema-story:not(.is-static) .story-console {background:rgba(12,25,28,.82);backdrop-filter:blur(14px);max-width:170px;border-color:#9caa9a66}
 .webgl-ready .cinema-story:not(.is-static) .story-step {align-items:center}
 .webgl-ready .cinema-story:not(.is-static) .story-intro {max-width:none;background:linear-gradient(0deg,transparent,rgba(10,20,24,.7));min-height:65svh}
 @media(max-width:760px){
 .webgl-ready .cinema-story:not(.is-static) .story-console {max-width:none;top:74px;padding:8px 10px}
 .webgl-ready .cinema-story:not(.is-static) .story-nav {flex-wrap:nowrap}
 .webgl-ready .cinema-story:not(.is-static) .story-step {align-items:end;min-height:100svh;padding:38svh 0 85px}
 .webgl-ready .cinema-story:not(.is-static) .story-step__copy {padding:18px;background:rgba(10,20,24,.82);max-width:100%;backdrop-filter:blur(8px)}
 .webgl-ready .cinema-story:not(.is-static) .story-step h3 {font-size:30px}
 .spatial-canvas::after {background:linear-gradient(0deg,rgba(10,20,24,.65),transparent 45%)}
 }
}

@layer utilities {
 .spatial-canvas.is-orbiting {clip-path:none;z-index:0;pointer-events:auto;touch-action:none}
 .is-exploring-building main {pointer-events:none}
 .is-exploring-building main a,.is-exploring-building main button,.is-exploring-building .story-console {pointer-events:auto}
 .is-exploring-building .story-console {z-index:4}
 .story-console .amman-weather {display:block;margin-top:14px;padding-top:12px;border-top:1px solid #82928d55;color:#c7d0c9;font-size:10px;line-height:1.65;font-weight:400;letter-spacing:.025em;text-decoration:none}
 .story-console .raytrace-toggle {appearance:none;display:block;width:100%;margin-top:10px;padding:10px 0;background:transparent;border:0;border-top:1px solid #82928d55;color:#ddc59c;text-align:left;font:inherit;font-size:10px;line-height:1.4;cursor:pointer}
 .story-console .raytrace-toggle:hover {color:#fff}
 .story-console .raytrace-toggle[aria-pressed="true"] {color:#fff}
 @media(max-width:760px){
  .story-console .amman-weather {font-size:8px;margin:5px 0 0;padding:5px 0 0;line-height:1.4}
  .story-console .raytrace-toggle {font-size:9px;padding:5px 0;margin:4px 0 0}
 }
 .is-exploring-building .spatial-canvas::after {pointer-events:none}
}

@layer utilities {
 .story-step:focus-visible .story-step__copy {outline:none;border-left:1px solid #bca579;padding-left:12px}
 .webgl-ready .cinema-story:not(.is-static) .story-console {max-width:156px;padding:12px;background:rgba(12,25,28,.76)}
 .cinema-story .story-nav {margin:12px 0;gap:4px}
 .cinema-story .story-controls {display:flex;flex-direction:row;gap:8px}
 .cinema-story .story-controls button {font-size:9px;min-height:32px;flex:1}
 .cinema-story .story-instruction {font-size:9px;line-height:1.5;margin-top:10px}
 .story-console .amman-weather {font-size:9px;margin-top:10px;padding-top:9px}
 .story-console .raytrace-toggle {font-size:9px;margin-top:7px;padding:8px 0}
 @media(max-width:760px){
  .webgl-ready .cinema-story:not(.is-static) .story-console {max-width:none;padding:7px 10px;display:grid;grid-template-columns:1fr auto;gap:0 15px}
  .cinema-story .story-console__meta {display:none}
  .cinema-story .story-nav {grid-column:1/-1;display:flex;overflow-x:auto;scrollbar-width:none;margin:0 0 3px;gap:4px;max-width:100%;scroll-behavior:smooth}
  .cinema-story .story-nav a {flex:0 0 44px;width:44px;min-height:40px;padding:4px;justify-content:center}
  .cinema-story .story-controls {grid-column:1;display:flex;flex-wrap:nowrap;gap:18px}
  .cinema-story .story-controls button {font-size:10px;min-height:32px;flex:none;padding:4px 0}
  .story-console .raytrace-toggle {grid-column:2;grid-row:2;margin:0;padding:4px 0;border:0;min-height:32px;font-size:9px}
  .story-console .amman-weather {grid-column:1/-1;grid-row:3;font-size:8px;white-space:nowrap;margin:1px 0 0;padding-top:4px}
  .cinema-story .story-instruction {display:none}
  .is-exploring-building .cinema-story .story-instruction {display:block;grid-column:1/-1;grid-row:4;margin:5px 0}
  .webgl-ready .cinema-story:not(.is-static) .story-step h3 {font-size:26px;max-width:320px}
  .webgl-ready .cinema-story:not(.is-static) .story-step p:not(.eyebrow) {font-size:12px;line-height:1.5;margin-top:10px}
  .webgl-ready .cinema-story:not(.is-static) .story-step dl {display:none}
  .webgl-ready .cinema-story:not(.is-static) .story-step__copy {padding:14px 16px;background:rgba(10,20,24,.77)}
  .webgl-ready .cinema-story:not(.is-static) .story-step {padding-bottom:70px}
 }
}

@layer utilities {
 .floor-details-toggle {display:none}
 .webgl-ready .cinema-story:not(.is-static) .story-step__copy {max-width:305px}
 .webgl-ready .cinema-story:not(.is-static) .story-step h3 {font-size:clamp(28px,2.8vw,39px)}
 .spatial-canvas::after {background:linear-gradient(90deg,rgba(10,20,24,.86),rgba(10,20,24,.28) 28%,transparent 45%)}
 @media(max-width:760px){
  .webgl-ready .cinema-story:not(.is-static) .story-step__copy {display:none}
  .cinema-in-view.webgl-ready .cinema-story:not(.is-static) .story-step.is-active .story-step__copy {display:block;position:fixed;bottom:72px;left:16px;right:16px;z-index:5;max-width:none;padding:12px 16px;background:rgba(10,20,24,.9);border:1px solid #81908455;border-left:2px solid #c6ad82;max-height:42svh;overflow:auto}
  .webgl-ready .cinema-story:not(.is-static) .story-step h3 {font-size:24px;max-width:none}
  .webgl-ready .cinema-story:not(.is-static) .story-step .eyebrow {margin-bottom:6px;font-size:8px}
  .webgl-ready .cinema-story:not(.is-static) .story-step__copy p:not(.eyebrow) {display:none}
  .webgl-ready .cinema-story:not(.is-static) .story-step__copy.show-floor-details p:not(.eyebrow) {display:block}
  .webgl-ready .cinema-story:not(.is-static) .floor-details-toggle {display:block;color:#d2ba90;background:transparent;border:0;font:inherit;font-size:10px;padding:8px 0 0;min-height:32px;cursor:pointer}
  .spatial-canvas::after {background:linear-gradient(0deg,rgba(10,20,24,.30),transparent 35%)}
 }
}

@layer utilities {
 @media(min-width:761px){
  .webgl-ready .cinema-story:not(.is-static) .story-console {position:sticky;top:90px;grid-column:1/-1;justify-self:center;max-width:960px;width:calc(100vw - 60px);padding:8px 14px;display:grid;grid-template-columns:1fr auto auto;gap:0 22px;border:1px solid #8b978344;background:rgba(12,25,28,.88)}
  .cinema-story .story-console__meta {display:none}
  .webgl-ready .cinema-story:not(.is-static) .story-nav {grid-row:1;grid-column:1;display:flex;gap:4px;margin:0}
  .webgl-ready .cinema-story:not(.is-static) .story-nav a {min-width:38px;min-height:38px;width:38px;flex:0 0 38px}
  .cinema-story .story-controls {grid-column:2;grid-row:1;gap:12px}
  .cinema-story .story-controls button {min-height:38px;white-space:nowrap}
  .story-console .raytrace-toggle {grid-column:3;grid-row:1;border:0;margin:0;padding:0;min-height:38px;white-space:nowrap}
  .story-console .amman-weather {grid-column:2/4;grid-row:2;white-space:nowrap;margin:4px 0 0;padding:0;border:0;text-align:right}
  .cinema-story .story-instruction {grid-column:1;grid-row:2;margin:4px 0 0;font-size:8px}
  .webgl-ready .cinema-story:not(.is-static) .story-step__copy {display:none}
  .cinema-in-view.webgl-ready .cinema-story:not(.is-static) .story-step.is-active .story-step__copy {display:block;position:fixed;left:32px;bottom:72px;z-index:5;max-width:280px;padding:16px 18px;background:rgba(9,20,24,.86);border-left:1px solid #bda276;backdrop-filter:blur(12px)}
  .webgl-ready .cinema-story:not(.is-static) .story-step h3 {font-size:27px}
  .webgl-ready .cinema-story:not(.is-static) .story-step p:not(.eyebrow) {font-size:11px;line-height:1.5;margin-top:12px}
  .webgl-ready .cinema-story:not(.is-static) .story-step dl {display:none}
  .spatial-canvas::after {background:linear-gradient(0deg,rgba(10,20,24,.28),transparent 50%)}
 }
}

/* Premium motion system: one quiet rhythm across every route. */
@layer base {
  :root {
    --ease-out-premium: cubic-bezier(.16, 1, .3, 1);
    --ease-soft: cubic-bezier(.22, .61, .36, 1);
    --motion-fast: 180ms;
    --motion-medium: 520ms;
    --motion-slow: 820ms;

    /* — Glass material ————————————————————————————
       One set of numbers for every translucent surface on the site, so the
       console, the floating copy and the header read as the same material
       instead of three near-misses. These are the values measured in a real
       browser during the option studies (docs/WIP.md §28–29).

       --glass-fog drives blur AND tint together, which is the single
       relationship carrying most of the look. --glass-lens is deliberately
       NOT defined here: it is the switch for rim refraction, and
       `var(--glass-lens, )` with an empty fallback lets it be turned on later
       without rewriting the backdrop-filter shorthand anywhere. See phase 4 of
       docs/GLASS-ROLLOUT-PLAN.md.

       Glass is only ever correct over a live backdrop. On this site that means
       index.html, where .spatial-canvas is fixed behind the whole page, and the
       header, which floats over scrolling content. Over --paper or --mist there
       is nothing to blur and the result is a tinted rectangle, which is why the
       card and button system deliberately does not use this. */
    --glass-fog: .52;
    --glass-vibrancy: 1.85;
    --glass-radius: 20px;
    --glass-tint: 14 22 21;
    --glass-rim: 250 251 248;
    --ease-ios: cubic-bezier(.32, .72, 0, 1);

    /* The same material in the palette's green, for the CTA buttons and the
       inquiry form Prof. Khaled asked for. It is a blend, not a new colour:
       45% --teal (#1f6f6b = 31 111 107) into 55% --glass-tint, which lands on
       22 62 60. Mixed in the stylesheet rather than with color-mix() because
       the alpha is applied per surface through `rgb(... / <alpha>)`, and the
       surfaces that use it sit on opaque --paper where the blur is a no-op and
       the fill is doing all of the work. */
    --glass-green: 22 62 60;
  }

  html {
    scroll-padding-top: 88px;
  }

  .site-scroll-progress {
    position: fixed;
    z-index: 100;
    inset: 0 0 auto;
    height: 2px;
    pointer-events: none;
    background: linear-gradient(90deg, #d79a42, #eed39b);
    transform: scaleX(0);
    transform-origin: left center;
    will-change: transform;
  }

  body {
    transition: opacity var(--motion-fast) ease;
  }

  body.is-page-leaving {
    opacity: 0;
  }

  body.page-arrived main {
    animation: page-arrive var(--motion-medium) var(--ease-out-premium) both;
  }

  @keyframes page-arrive {
    from { opacity: .25; }
    to { opacity: 1; }
  }

  @keyframes atmosphere-drift {
    0%, 100% { transform: translate3d(-1.5%, -1%, 0) scale(1.02); opacity: .78; }
    50% { transform: translate3d(1.5%, 1%, 0) scale(1.055); opacity: 1; }
  }
}

@layer components {
  /* The shared glass surface. Nothing adopts this yet — phase 2 puts it on the
     explorer console, phase 3 on the floating step copy and the header. It is
     defined first so those phases are small diffs against a settled contract.

     Two things are deliberate. There is NO 1px border: the edge is a bright
     inner seam plus a wide, low shadow, which is what makes a translucent
     surface read as an object in front of the scene rather than a box drawn on
     it. And the blur sits behind `var(--glass-lens, )`, an empty custom
     property, so rim refraction is a one-line switch in phase 4 rather than an
     edit to every backdrop-filter on the site. */
  .glass {
    position: relative;
    isolation: isolate;
    border-radius: var(--glass-radius);
    background: rgb(var(--glass-tint) / calc(.34 * (.45 + var(--glass-fog) * .75)));
    -webkit-backdrop-filter: blur(calc(var(--glass-fog) * 34px)) saturate(var(--glass-vibrancy));
    backdrop-filter: blur(calc(var(--glass-fog) * 34px)) saturate(var(--glass-vibrancy)) var(--glass-lens, );
    box-shadow:
      inset 0 1px 0 rgb(var(--glass-rim) / .5),
      inset 0 0 0 1px rgb(var(--glass-rim) / .11),
      inset 0 -1px 0 rgb(4 13 11 / .3),
      0 1px 2px rgb(4 13 11 / .18),
      0 18px 48px -12px rgb(4 13 11 / .5);
    color: var(--paper);
  }

  /* Continuous corners where the browser has them, an ordinary radius
     everywhere else. The difference is one you have to look for. */
  @supports (corner-shape: squircle) {
    .glass { corner-shape: squircle; }
  }

  /* THE COST CONTROL. backdrop-filter re-composites every frame for as long as
     it is on screen, unlike the gradients and inset shadows the rest of this
     stylesheet relies on. An IntersectionObserver adds .is-glass-live to a pane
     that is actually visible; everything else keeps the tint and drops the
     filter entirely. On a long page this is the difference between paying for
     one pane and paying for all of them.

     The observer is added in phase 2, with the first element that uses .glass.
     Until then no pane carries the marker, so this rule is inert — and if the
     observer ever fails to run, every pane simply renders as an opaque panel,
     which is the current appearance rather than a broken one. */
  .glass:not(.is-glass-live) {
    -webkit-backdrop-filter: none;
    backdrop-filter: none;
  }

  @media (prefers-reduced-motion: reduce) {
    .glass { transition: none; }
  }

  /* PHASE 3 of docs/GLASS-ROLLOUT-PLAN.md — the header on the shared material.
     The header is the one glass surface that exists on all ten public pages: it
     is `position: sticky; top: 0` over scrolling content, which is a real
     backdrop everywhere, so it needs none of the `.webgl-ready` gating the
     explorer surfaces do.

     Three things change and one deliberately does not.

     - `saturate(1.12)` becomes `saturate(var(--glass-vibrancy))`, which is the
       actual visual change: vibrancy is what makes a translucent bar read as
       glass rather than as a smoked panel. The blur moves to the shared
       expression too, and lands on 17.68px against the 18px that was typed
       here — so the token set was already describing this surface.
     - `var(--glass-lens, )` joins the backdrop-filter, so phase 4 can switch
       rim refraction on for the header from one place like everywhere else.
     - The 1px bottom border is replaced by an edge made of light: a bright
       inner seam just inside the bottom, a dark hairline just outside it, and a
       tight placement shadow. `border-bottom-color` goes transparent rather
       than the border being removed, because its 1px is load-bearing — the
       mobile menu is positioned at `top: 68px` against the header's border box.

     What does NOT move to `.glass`'s own fill is the tint weight. The fill is
     the same shared expression — `.45 + fog * .75`, which is .84 at this fog —
     at a heavier multiple than `.glass`'s .34: .95 resting and 1.07 scrolled,
     so .80 and .90 against the .92 and .965 that were typed here. `.glass`'s
     own 28.6% is right for a pane whose whole job is to be seen through; the
     header carries --paper nav text over whatever happens to be scrolling
     under it, including plain --paper sections, and at 28.6% that text drops
     to about 3:1. At .80 it measures above 10:1 over white. Same substance,
     more of it. */
  .site-header {
    --header-edge:
      inset 0 -1px 0 rgb(var(--glass-rim) / .16),
      0 1px 0 rgb(4 13 11 / .3),
      0 1px 2px rgb(4 13 11 / .14);
    background: rgb(var(--glass-tint) / calc(.95 * (.45 + var(--glass-fog) * .75)));
    border-bottom-color: transparent;
    -webkit-backdrop-filter: blur(calc(var(--glass-fog) * 34px)) saturate(var(--glass-vibrancy));
    backdrop-filter: blur(calc(var(--glass-fog) * 34px)) saturate(var(--glass-vibrancy)) var(--glass-lens, );
    box-shadow: var(--header-edge);
    transition:
      background-color var(--motion-medium) var(--ease-soft),
      border-color var(--motion-medium) var(--ease-soft),
      box-shadow var(--motion-medium) var(--ease-soft);
  }

  /* Scrolled: thicker glass and the shadow widens out, so the bar reads as
     having lifted off the page rather than as having changed colour. The edge
     comes first in the list so it survives the restatement. */
  .site-header.is-scrolled {
    background: rgb(var(--glass-tint) / calc(1.07 * (.45 + var(--glass-fog) * .75)));
    box-shadow: var(--header-edge), 0 18px 48px -12px rgb(4 13 11 / .34);
  }

  /* With the mobile menu open the header is not glass over content any more —
     it is the top edge of a solid sheet, since `.site-nav` is `inset: 68px 0 0`
     on an opaque --ink. The bar and the sheet have never quite matched, but at
     .80 the step between them is obvious rather than faint, so the material
     comes off for the duration. The filter goes with it: there is an opaque
     panel under 98% of the header at that point and nothing to blur.
     Verified in Chrome at 375x812 on contact.html. */
  .site-header.is-menu-open {
    background: var(--ink);
    -webkit-backdrop-filter: none;
    backdrop-filter: none;
  }

  .site-header__inner {
    transition: height var(--motion-medium) var(--ease-out-premium);
  }

  .site-nav a {
    position: relative;
    transition: color var(--motion-fast) ease;
  }

  .site-nav a::after {
    content: "";
    position: absolute;
    left: 0;
    right: 0;
    bottom: -9px;
    height: 1px;
    background: currentColor;
    transform: scaleX(0);
    transform-origin: right center;
    transition: transform 360ms var(--ease-out-premium);
  }

  .site-nav a:hover::after,
  .site-nav a[aria-current="page"]::after {
    transform: scaleX(1);
    transform-origin: left center;
  }

  .button,
  .text-link,
  .sound-control button {
    transition:
      color var(--motion-fast) ease,
      background-color var(--motion-fast) ease,
      border-color var(--motion-fast) ease,
      box-shadow 420ms var(--ease-out-premium),
      transform 420ms var(--ease-out-premium);
  }

  .button:hover,
  .sound-control button:hover {
    transform: translate3d(0, -2px, 0);
    box-shadow: 0 15px 34px rgb(8 22 18 / .14);
  }

  .text-link .icon-arrow,
  .button .icon-arrow {
    transition: transform 420ms var(--ease-out-premium);
  }

  .text-link:hover .icon-arrow,
  .button:hover .icon-arrow {
    transform: translate3d(3px, -3px, 0);
  }

  .card,
  .sector-card,
  .article-card,
  .trade-row,
  .sector-detail,
  .ledger__row {
    transition:
      background-color 360ms ease,
      border-color 360ms ease,
      box-shadow 520ms var(--ease-out-premium),
      transform 520ms var(--ease-out-premium);
  }

  .card:hover,
  .sector-card:hover,
  .article-card:hover {
    transform: translate3d(0, -4px, 0);
    box-shadow: 0 22px 52px rgb(14 31 25 / .1);
  }

  .home-hero {
    isolation: isolate;
    overflow: hidden;
    background:
      radial-gradient(circle at 72% 38%, rgb(47 105 91 / .42), transparent 35%),
      linear-gradient(120deg, #091615, #132824 58%, #0c1b1b);
  }

  .home-hero::before {
    content: "";
    position: absolute;
    z-index: 0;
    inset: -10%;
    pointer-events: none;
    background:
      radial-gradient(circle at 78% 42%, rgb(219 185 123 / .18), transparent 13%),
      radial-gradient(circle at 65% 34%, rgb(78 151 132 / .22), transparent 28%),
      repeating-linear-gradient(90deg, transparent 0 79px, rgb(207 225 212 / .035) 80px);
    animation: atmosphere-drift 16s ease-in-out infinite;
  }

  .home-hero::after {
    background:
      linear-gradient(90deg, rgb(7 19 18 / .91), rgb(7 19 18 / .58) 38%, transparent 74%),
      linear-gradient(0deg, rgb(7 19 18 / .55), transparent 46%);
  }

  .webgl-ready .home-hero::before {
    opacity: .3;
  }

  .motion-section {
    --section-progress: 0;
    position: relative;
  }

  .motion-section::before {
    content: "";
    position: absolute;
    z-index: 2;
    top: 0;
    left: var(--page-pad);
    right: var(--page-pad);
    height: 1px;
    pointer-events: none;
    background: color-mix(in srgb, currentColor 15%, transparent);
    transform: scaleX(var(--section-progress));
    transform-origin: left center;
    opacity: .72;
  }

  .motion-float {
    translate: 0 var(--scroll-shift, 0);
    transition: translate 140ms linear;
  }

  html.is-enhanced [data-reveal] {
    opacity: 0;
    transform: translate3d(0, 22px, 0);
    transition:
      opacity var(--motion-slow) var(--ease-out-premium),
      transform var(--motion-slow) var(--ease-out-premium);
    transition-delay: var(--reveal-delay, 0ms);
    will-change: opacity, transform;
  }

  html.is-enhanced [data-reveal="scale"] {
    transform: translate3d(0, 16px, 0) scale(.992);
  }

  html.is-enhanced [data-reveal].is-revealed {
    opacity: 1;
    transform: translate3d(0, 0, 0) scale(1);
  }

  html.is-enhanced [data-reveal].reveal-complete {
    will-change: auto;
  }

  ::view-transition-old(root) {
    animation: 240ms ease both fade-out;
  }

  ::view-transition-new(root) {
    animation: 520ms var(--ease-out-premium) both page-arrive;
  }

  @keyframes fade-out {
    to { opacity: 0; transform: translate3d(0, -4px, 0); }
  }

  /* — The premium pass: edges made of light ————————————————————
     Phase 5 of docs/GLASS-ROLLOUT-PLAN.md §5.

     Cards and buttons sit on opaque --paper / --mist with nothing behind them,
     so they deliberately do NOT get glass: a backdrop-filter over an opaque
     fill is a tinted rectangle, not a window. What makes a surface read as
     expensive on an opaque background is the other half of the same idea — an
     edge made of light instead of a drawn line, and a shadow wide and faint
     enough to place the object in space rather than outline it.

     Everything below is a gradient or an inset shadow, so it paints once and
     costs nothing per frame. That is the argument src/web/style.css:1889
     already makes on the portal. Corners stay square: the option studies
     showed the premium read survives radius 0, so it was never the roundness
     doing the work.

     --lit-edge holds a component's resting edge in one custom property,
     because box-shadow does not merge across rules: every state that has to
     restate it (hover, active, and the hover:none reset in @layer utilities)
     re-uses --lit-edge instead of wiping the edge out. */

  /* Cards. These tile inside gap:1px grids whose parent paints --line so the
     gutter itself draws the hairline between cells (.card-grid, .sector-grid,
     .article-grid, .two-up / .three-up / .four-up). A resting OUTER shadow
     bleeds into that 1px gutter from both sides and turns a crisp rule into a
     smudge, so the resting treatment here is inset-only: the face is lit along
     the top and darkened a hair at the foot, which reads as thickness without
     touching the gutter. The outer shadow stays where it belongs — on :hover,
     where the card lifts clear of the grid plane and already takes z-index
     above its neighbours.

     The face colour is left to whoever set it (--paper, or --mist in a mist
     section, or on .article-card--lead), so this is one gradient layered over
     any background-color — including the paper cards that sit on .section--ink,
     whose face is light there too. */
  .card,
  .sector-card,
  .article-card {
    --lit-edge:
      inset 0 1px 0 rgb(255 255 255 / .9),
      inset 0 -1px 0 rgb(14 31 25 / .055);
    background-image: linear-gradient(
      180deg,
      rgb(255 255 255 / .85),
      rgb(255 255 255 / 0) 32%,
      rgb(14 31 25 / .028)
    );
    box-shadow: var(--lit-edge);
  }

  /* Restates the lift from the rule above verbatim; the only change is that
     the resting edge now survives the hover. */
  .card:hover,
  .sector-card:hover,
  .article-card:hover {
    box-shadow: var(--lit-edge), 0 22px 52px rgb(14 31 25 / .1);
  }

  /* .card__number / .card__index / .capability-card__index are deliberately
     left alone. The obvious move is a letterpress — one pixel of white under
     small caps to set them into the face — but it needs a mid-tone surface to
     register, and these labels only ever sit on --paper or --mist, which are
     already 98% and 93% white. A white shadow there is within a few percent of
     its own backdrop and renders as nothing. Tried in the browser, dropped. */

  /* Buttons. No hairline grid to protect, so these get the whole treatment: a
     bright seam along the top edge, a darker one along the foot so the face
     has thickness, and a wide low-opacity cast underneath.

     The three tokens are re-tuned per variant because the same seam cannot
     work in both contexts — white at .9 is the brightest thing on an ink
     button and invisible on a paper one, and a cast that registers on --paper
     disappears on --ink. Keeping them as tokens means :hover changes one value
     and every variant follows. */
  .button {
    --btn-crown: rgb(255 255 255 / .55);
    --btn-foot: rgb(14 31 25 / .07);
    --btn-cast: 0 10px 22px -14px rgb(14 31 25 / .3);
    --lit-edge:
      inset 0 1px 0 var(--btn-crown),
      inset 0 -1px 0 var(--btn-foot),
      var(--btn-cast);
    box-shadow: var(--lit-edge);
  }

  /* Ink fill on a light section. The crown is a sliver of paper catching the
     top edge; the cast can afford to be deep because it falls on --paper. */
  .button--signal {
    --btn-crown: rgb(250 251 248 / .24);
    --btn-foot: rgb(0 0 0 / .32);
    --btn-cast: 0 12px 26px -14px rgb(14 31 25 / .5);
  }

  /* Paper fill on .section--ink — the inverse. The crown is the brightest
     thing on the button, and the cast has to be near-black to register. */
  .button--light {
    --btn-crown: rgb(255 255 255 / .95);
    --btn-foot: rgb(14 31 25 / .2);
    --btn-cast: 0 14px 30px -16px rgb(0 0 0 / .62);
  }

  /* Outline on ink: no fill to light, so the edge is the entire effect. */
  .button--outline-light {
    --btn-crown: rgb(250 251 248 / .3);
    --btn-foot: rgb(0 0 0 / .22);
    --btn-cast: 0 10px 24px -16px rgb(0 0 0 / .5);
  }

  /* Both restate the shadow the earlier rules set, with --lit-edge in front so
     the seam is not wiped. The transition on box-shadow is already declared
     above, and @layer utilities already neutralises it under
     prefers-reduced-motion along with the rest of the button's transitions. */
  .button:hover {
    box-shadow: var(--lit-edge), 0 15px 34px rgb(8 22 18 / .14);
  }

  .button--signal:active,
  .button--light:active {
    box-shadow: var(--lit-edge), 0 0 0 4px rgb(232 163 61 / .16);
  }
}

@layer utilities {
  @media (hover: none) {
    .card:hover,
    .sector-card:hover,
    .article-card:hover,
    .button:hover,
    .sound-control button:hover {
      transform: none;
      /* Not `none`: a touch device keeps :hover stuck after a tap, and `none`
         would flatten the resting lit edge for as long as it stays stuck.
         Falls back to none for anything without one, e.g. .sound-control. */
      box-shadow: var(--lit-edge, none);
    }
  }

  @media (max-width: 760px) {
    .site-scroll-progress {
      height: 1px;
    }

    .motion-section::before {
      left: 22px;
      right: 22px;
    }

    .motion-float {
      translate: none;
      transition: none;
    }

    .page-hero__ledger .ledger__copy {
      grid-area: copy;
    }
  }

  @media (prefers-reduced-motion: reduce) {
    body,
    body.page-arrived main,
    .motion-float,
    .site-header,
    .site-header__inner,
    .site-nav a::after,
    .button,
    .text-link,
    .sound-control button,
    .card,
    .sector-card,
    .article-card,
    .home-hero::before {
      animation: none !important;
      transition-duration: .01ms !important;
      translate: none !important;
    }

    .site-scroll-progress,
    .motion-section::before {
      display: none;
    }

    body.is-page-leaving {
      opacity: 1;
    }
  }
}

/* ═══ Phase 3 of docs/GLASS-ROLLOUT-PLAN.md — the floating chapter copy ════
   The copy that floats over the building takes the same material as the
   console, so the two stop reading as two different systems over one render.
   Nothing is added: these are the same `.story-step__copy` boxes the markup
   already has, restyled in place. No HTML and no JavaScript changed in this
   phase.

   Scoped to `.cinema-in-view.webgl-ready .cinema-story:not(.is-static)
   .story-step.is-active`, which is the exact selector the two blocks above use
   to make this element `position: fixed` over the scene — the only state in
   which it has a backdrop at all. Without the building the panel keeps the
   styling it has always had, for the same reason the console does.

   This block is in `@layer utilities` and last in the file because the element's
   fill, border and blur are set by `@layer utilities` blocks above (`:4525` at
   <=760px, `:4542` at >=761px). Specificity is identical, so source order is
   what carries it — `.glass` in `@layer components` would lose outright, which
   is the lesson phase 2 paid for.

   What this rule deliberately does NOT touch: `position`, `left`, `bottom`,
   `max-width`, `padding`, `max-height` and `overflow`. Phase 2 capped the dock
   at `max-height: max(190px, calc(100svh - 390px))` by measuring against this
   box at `left: 32px; bottom: 72px; max-width: 280px; padding: 16px 18px`.
   Changing any of them would silently break that truce, so the geometry is left
   exactly as phase 2 found it and only the material moves.

   There is no `.is-glass-live` gate here, and none is needed. The observer in
   mistral.js only watches elements carrying `.glass`, which this cannot be
   given without an HTML edit — but the element is `display: none` unless it is
   both the active chapter and the scene is in view, so it is already its own
   visibility gate and no offscreen copy ever runs a filter. The same is true of
   the header, which is sticky and therefore always on screen. */
@layer utilities {
  .cinema-in-view.webgl-ready .cinema-story:not(.is-static) .story-step.is-active .story-step__copy {
    /* The ad-hoc fills this replaces were rgba(9,20,24,.86) with a 1px gold
       border-left at >=761px and rgba(10,20,24,.9) with a grey box plus a 2px
       gold border-left at <=760px — three near-misses for one material.

       The fill is the shared expression `.45 + fog * .75` that `.glass` uses,
       at a heavier multiple: .60 instead of `.glass`'s .34, which lands at
       50.4% against the console's 28.6%. Same hue, same blur, same vibrancy,
       same edge, same radius — thicker glass, not a second material.

       The reason is the content. The console carries nine short labels and a
       row of numbers; this box carries an 11px paragraph in #e0e3dd, and the
       backdrop behind it is a live render that is sometimes the dark facade and
       sometimes open sky. Over the sky, through the canvas's own .28 bottom
       wash, 28.6% puts that paragraph at roughly 3.3:1 — a real regression from
       the .86 fill it replaces. 50.4% measures about 5.2:1 on the same worst
       case and still shows the building clearly through the pane. If maximum
       translucency is wanted over that, .34 here is the one-coefficient
       change. */
    border: 0;
    border-radius: var(--glass-radius);
    background: rgb(var(--glass-tint) / calc(.60 * (.45 + var(--glass-fog) * .75)));
    /* The two geometry declarations in this rule, and the only two in this
       phase. `:4213` styles `.operating-story` — which this section also is,
       since it is `class="operating-story cinema-story"` — and at <=760px gives
       the copy `margin-inline: -10px; width: calc(100% + 20px)`. Against the
       `left: 16px; right: 16px` the fixed rule sets, `width` wins over `right`,
       so the box was already 26px wider than the viewport and shifted 10px
       left. Square and full-bleed that was invisible; with a corner on it, the
       left corner rounds on screen and the right one rounds off it. Measured in
       Chrome at 375x812: left -10, right edge 401 against a 375 viewport.
       Resetting both lets `left`/`right` resolve the width symmetrically. At
       >=761px `:4213` is out of its media query and both are already their
       initial values, so this changes nothing there — the box phase 2 capped
       the dock against keeps its `left: 32px`, `bottom: 72px`,
       `max-width: 280px` and `padding: 16px 18px` exactly. */
    width: auto;
    margin-inline: 0;
    /* The glass edge, minus the wide drop shadow: this box sits lower in the
       frame than the console and a 48px bloom under it caught the vignette. */
    box-shadow:
      inset 0 1px 0 rgb(var(--glass-rim) / .5),
      inset 0 0 0 1px rgb(var(--glass-rim) / .11),
      inset 0 -1px 0 rgb(4 13 11 / .3),
      0 1px 2px rgb(4 13 11 / .18),
      0 14px 36px -14px rgb(4 13 11 / .5);
    color: var(--paper);
    -webkit-backdrop-filter: blur(calc(var(--glass-fog) * 34px)) saturate(var(--glass-vibrancy));
    backdrop-filter: blur(calc(var(--glass-fog) * 34px)) saturate(var(--glass-vibrancy)) var(--glass-lens, );
  }

  @supports (corner-shape: squircle) {
    .cinema-in-view.webgl-ready .cinema-story:not(.is-static) .story-step.is-active .story-step__copy {
      corner-shape: squircle;
    }
  }

  /* `border: 0` above would otherwise swallow the focus affordance, which
     `:4498` draws as a gold `border-left` because the earlier rule had removed
     the outline. A ring is the better answer anyway: the copy is `position:
     fixed` here, so an outline cannot be clipped by anything, and `.story-step`
     is `tabindex="-1"` and gets focus programmatically from the chapter links. */
  .cinema-in-view.webgl-ready .cinema-story:not(.is-static) .story-step.is-active:focus-visible .story-step__copy {
    outline: 2px solid var(--signal);
    outline-offset: 4px;
  }
}

/* ═══ Owner review, 2026-10-01 — the explorer end card becomes glass ═══════
   Prof. Khaled: "make the The whole asset in view section a liquid glass with
   dark foggy background". That is `<div class="shell story-end"
   id="explorer-end">` — the "One standard. / From work to value." block with
   the Explore capabilities button.

   It carries `.glass` in the markup, so the blur, the squircle and the
   IntersectionObserver cost control all come from the shared material. What
   this block does is the two things the material cannot do from
   `@layer components`:

   - Restate the fill at a much heavier weight. `.cinema-story .story-end`
     sets `background:#101b20` in `@layer pages`, and the <=760px rule sets
     `rgb(14 22 21 / .94)` in `@layer utilities` above this, so `.glass`'s own
     28.6% never reached the element. The weight is the point anyway: at .88 of
     the shared expression this lands on 73.9% against the console's 28.6% and
     the floating copy's 50.4%. "A substantial fogged slab", not a light pane —
     it carries a clamp(42px,5.5vw,78px) display heading over a live render.
   - Turn the full-bleed top hairline into a slab. `border-top: 1px solid
     #365044` is the old treatment and it cannot coexist with a 20px corner, so
     it goes and the rim does that job.

   Geometry: `.shell` gives this box `width: min(1380px, 100% - 2 * page-pad)`
   with `margin: 0 auto`, and no horizontal padding — the heading sits flush
   against the box edge. A slab needs an inset, and an inset alone would push
   the heading 34px off the column every other section on the page aligns to.
   So the box grows by exactly twice its new padding and the text lands back
   where it was. The third term in the min() is the guard: below about 1020px
   `--page-pad` is smaller than the padding, there is no room to grow into, and
   without the cap the slab would be wider than the viewport. There it simply
   sits 12px from each edge, which is the right answer on a phone anyway.

   The block padding is reduced by what the new bottom margin adds, so the
   section's height is within ~10px of what it was and nothing below it moves.
   The margin exists because the slab now has a bottom edge: without it the
   rounded corner would butt straight into the next section. */
@layer utilities {
  .story-end.glass {
    width: min(
      calc(var(--content-max) + 68px),
      calc(100% - (var(--page-pad) * 2) + 68px),
      calc(100% - 24px)
    );
    margin-inline: auto;
    padding-block: 72px 80px;
    padding-inline: 34px;
    margin-bottom: 38px;
    border-top: 0;
    border-radius: var(--glass-radius);
    background: rgb(var(--glass-tint) / calc(.88 * (.45 + var(--glass-fog) * .75)));
    box-shadow:
      inset 0 1px 0 rgb(var(--glass-rim) / .5),
      inset 0 0 0 1px rgb(var(--glass-rim) / .11),
      inset 0 -1px 0 rgb(4 13 11 / .3),
      0 1px 2px rgb(4 13 11 / .18),
      0 22px 60px -16px rgb(4 13 11 / .55);
    color: var(--paper);
  }

  /* `.cinema-story .story-end` is 0-2-0 in `@layer pages`; this is the same
     declaration at 0-3-0 in a later layer so the fill actually lands. Kept as
     its own rule so the value above is the single place it is written. */
  .cinema-story .story-end.glass {
    background: rgb(var(--glass-tint) / calc(.88 * (.45 + var(--glass-fog) * .75)));
  }

  @media (max-width: 760px) {
    .story-end.glass,
    .cinema-story .story-end.glass {
      padding-block: 52px 56px;
      padding-inline: 24px;
      margin-bottom: 30px;
      background: rgb(var(--glass-tint) / calc(.88 * (.45 + var(--glass-fog) * .75)));
    }
  }
}

/* ═══ Owner review, 2026-10-01 — the edge-lit CTA pane ═════════════════════
   This replaces the foggy dark green pill that shipped earlier today, which
   Prof. Khaled rejected: "too cartoonish and nothing says glass about them".
   He then reviewed four pointer behaviours on four grounds and chose Option B,
   the edge catch, with Option D's label lean. The CSS below is lifted from
   that prototype rather than rewritten.

   What it is: an almost-transparent pane — about 6% fill — at a 2px radius,
   held by a 1px rim and a lit top seam, with `backdrop-filter: blur(7px)
   saturate(1.4)` where there is anything behind it to bend. The rim is --teal
   on the light grounds and --teal-bright on the dark ones.

   The pointer does exactly two things. The rim brightens where the pointer is
   nearest — that is the ::after, a 1px ring made by masking a radial gradient
   to the border box and lighting it at --mx/--my, the way light runs along the
   edge of a real pane. And the label leans up to 2.5px across and 1.5px down
   toward the pointer, via --tx/--ty on `.button__lbl`. Nothing else moves. The
   pane's own edge stays mathematically still, which is what keeps the page's
   hairline grid intact while something inside it responds.

   THE HONEST PART, twice over.

   At about 6% fill these are close to the limit of what stays legible on
   --paper. Past that the text starts carrying the button alone and the edge
   stops reading as a container.

   And the flip side of that is an accessibility number, reported rather than
   quietly changed: the resting rim measures 2.01:1 against --paper, under the
   3:1 WCAG 1.4.11 asks of the visual boundary of a control. It is still half
   again stronger than the site's own --line hairline (1.35:1), and the label
   and the fill both help identify the control, but the rim alone does not
   clear 1.4.11. Raising the rim to .70 alpha would (3.11:1) at the cost of the
   near-transparency that is the whole point. This is the approved design; the
   number is here so the trade stays visible rather than buried.

   --mx/--my/--on/--tx/--ty are written by the pointer script at the end of
   mistral.js, which also wraps each button's child nodes in `.button__lbl` on
   init so the lean has something to move — that is why none of the buttons in
   the markup needed editing. The script never initialises unless
   `(hover: hover) and (pointer: fine)` and not `prefers-reduced-motion`, so a
   browser without JS gets the static pane, which is the correct fallback
   rather than a broken one.

   --lit-edge is still defined here, because two rules elsewhere restate it
   without knowing this variant exists: the `@media (hover: none)` block above
   hands `.button:hover` back `var(--lit-edge, none)` so a hover stuck after a
   tap does not flatten the pane, and `.button--signal:active` /
   `.button--light:active` restate it in front of the amber ring.

   This is `@layer utilities` and last in the file because `.button--signal`
   and `.button--light` set `background` and `border-color` in
   `@layer components`, `.filter-row button` does the same, and so does
   `.inquiry-form`. Anything earlier loses to them whatever its specificity. */
@layer utilities {
  .button--glass {
    --mx: 50%;
    --my: 50%;
    --on: 0;
    --tx: 0;
    --ty: 0;
    --lit-edge:
      inset 0 0 0 1px rgb(31 111 107 / .46),
      inset 0 1px 0 rgb(250 251 248 / .75),
      inset 0 10px 14px -12px rgb(31 111 107 / .45);
    position: relative;
    isolation: isolate;
    border: 0;
    border-radius: 2px;
    background: linear-gradient(180deg, rgb(31 111 107 / .08), rgb(31 111 107 / .02) 46%, rgb(31 111 107 / .06));
    box-shadow: var(--lit-edge);
    color: var(--ink);
    /* The box-shadow timing is the prototype's. The transform timing is the
       site's own 150ms, because the 2px lift on `.button:hover` is shared with
       every other button on the page and should not suddenly be slower here. */
    transition: box-shadow 260ms var(--ease-ios), transform 150ms ease;
  }

  /* The wrapper the pointer script makes. `.button` carries `gap: 14px` for
     the label and its arrow; once the children are inside one flex child that
     gap has to move here or the arrow sits against the word. */
  .button--glass .button__lbl {
    position: relative;
    z-index: 2;
    display: inline-flex;
    align-items: center;
    gap: 14px;
    /* This wrapper is a layout shim and must carry no appearance of its own —
       whatever the button looks like has to keep looking like that with a span
       inserted inside it. The resets are not defensive tidiness: `.filter-row
       span` in `components` draws a 1px --line border, 8px/10px of padding,
       #6a6a67 text and an 11px size on any span inside the insights filter row,
       and `.filter-row span:first-child` then takes the colour to --ink. The
       wrapper is a span inside that row, so without these the five chips each
       grew a second frame around the label and the selected chip went
       ink-on-ink and vanished. Any other bare-span rule on a future context
       would do the same, which is why this resets the category rather than
       that one selector. */
    padding: 0;
    border: 0;
    color: inherit;
    font: inherit;
    letter-spacing: inherit;
    transform: translate(calc(var(--tx) * 2.5px), calc(var(--ty) * 1.5px));
    transition: transform 420ms var(--ease-ios);
  }

  /* Option B. `padding: 1px` plus the xor/exclude mask leaves only the 1px
     frame of the pseudo-element painted, so the gradient lights the rim and
     never the face. --on fades the whole ring in on pointerover and out on
     pointerout, which is why there is no ring at rest. */
  .button--glass::after {
    content: '';
    position: absolute;
    inset: 0;
    z-index: 1;
    padding: 1px;
    border-radius: inherit;
    background: radial-gradient(90px 60px at var(--mx) var(--my), rgb(117 189 178 / .95), rgb(117 189 178 / .25) 40%, transparent 70%);
    opacity: var(--on);
    pointer-events: none;
    -webkit-mask: linear-gradient(#000 0 0) content-box, linear-gradient(#000 0 0);
    -webkit-mask-composite: xor;
    mask: linear-gradient(#000 0 0) content-box, linear-gradient(#000 0 0);
    mask-composite: exclude;
    transition: opacity 320ms var(--ease-ios);
  }

  /* Gated the same way `.glass` is, and for the same reason: a filter that is
     on screen re-composites every frame. mistral.js observes this selector
     alongside `.glass`. On most pages there is nothing behind these and the
     filter is a no-op; on index.html `.spatial-canvas` is fixed behind the
     whole page and it is real. */
  .button--glass.is-glass-live {
    -webkit-backdrop-filter: blur(7px) saturate(1.4);
    backdrop-filter: blur(7px) saturate(1.4);
  }

  .button--glass:not(.is-glass-live) {
    -webkit-backdrop-filter: none;
    backdrop-filter: none;
  }

  /* Hover firms the rim up and adds the cast the 2px lift wants under it. */
  .button--glass:hover {
    box-shadow:
      inset 0 0 0 1px rgb(31 111 107 / .68),
      inset 0 1px 0 rgb(250 251 248 / .9),
      inset 0 10px 14px -12px rgb(31 111 107 / .5),
      0 6px 16px -10px rgb(14 38 36 / .4);
  }

  /* The amber active ring is the site's, and `.button--signal:active` /
     `.button--light:active` declare it in `components`, which this layer
     outranks. Restated so a glass CTA still answers a press. */
  .button--glass:active {
    box-shadow: var(--lit-edge), 0 0 0 4px rgb(232 163 61 / .16);
  }

  .button--glass .icon-arrow {
    color: var(--teal);
  }

  /* `.button--signal` is off limits. Prof. Khaled said the black button that
     turns amber was intentional and must be kept exactly as it is, and five
     CTAs — capabilities twice, investment, sectors, services — carry both
     classes, where the glass modifier was overpainting it. Rather than edit
     five HTML files, the modifier stands down wherever `.button--signal` is
     present: the markup keeps the class and the button renders as the signal
     button it is — --ink fill and --ink border at rest, --signal fill with
     --ink text on hover, and the --btn-crown/--btn-foot/--btn-cast seam that
     `components` tunes for that variant. */
  .button--signal.button--glass {
    --lit-edge:
      inset 0 1px 0 var(--btn-crown),
      inset 0 -1px 0 var(--btn-foot),
      var(--btn-cast);
    border: 1px solid var(--ink);
    border-radius: 0;
    background: var(--ink);
    box-shadow: var(--lit-edge);
    color: var(--paper);
    -webkit-backdrop-filter: none;
    backdrop-filter: none;
  }

  .button--signal.button--glass::after {
    content: none;
  }

  .button--signal.button--glass .button__lbl {
    gap: 14px;
    transform: none;
  }

  .button--signal.button--glass .icon-arrow {
    color: inherit;
  }

  .button--signal.button--glass:hover {
    border-color: var(--signal);
    background: var(--signal);
    box-shadow: var(--lit-edge), 0 15px 34px rgb(8 22 18 / .14);
    color: var(--ink);
  }

  .button--signal.button--glass:active {
    box-shadow: var(--lit-edge), 0 0 0 4px rgb(232 163 61 / .16);
  }

  /* On .section--ink, in the footer and over the building the pane inverts:
     the rim and the seam go to --teal-bright, and the pointer's edge catch
     goes amber, which the option study found to be the clearest of the four on
     the dark grounds. All seven `.button--light.button--glass` CTAs sit inside
     `.section--ink` (checked on capabilities, insights, investment, network,
     process, sectors and services) and all nine footer sign-ins sit inside
     `.site-footer`, so every dark-ground glass button on the site is reached
     by these four rules. The old version of this override only moved
     --btn-cast, which was the right adjustment for an opaque fill and says
     nothing at all at 6%. */
  .section--ink .button--glass,
  .site-footer .button--glass,
  .operating-story .button--glass {
    --lit-edge:
      inset 0 0 0 1px rgb(117 189 178 / .42),
      inset 0 1px 0 rgb(180 226 215 / .36),
      inset 0 10px 14px -12px rgb(117 189 178 / .36);
    background: linear-gradient(180deg, rgb(117 189 178 / .12), rgb(117 189 178 / .03) 46%, rgb(117 189 178 / .08));
    box-shadow: var(--lit-edge);
    color: #eef3f0;
  }

  .section--ink .button--glass::after,
  .site-footer .button--glass::after,
  .operating-story .button--glass::after {
    background: radial-gradient(90px 60px at var(--mx) var(--my), rgb(232 163 61 / .9), rgb(232 163 61 / .22) 40%, transparent 70%);
  }

  .section--ink .button--glass .icon-arrow,
  .site-footer .button--glass .icon-arrow,
  .operating-story .button--glass .icon-arrow {
    color: var(--teal-bright);
  }

  .section--ink .button--glass:hover,
  .site-footer .button--glass:hover,
  .operating-story .button--glass:hover {
    box-shadow:
      inset 0 0 0 1px rgb(117 189 178 / .62),
      inset 0 1px 0 rgb(180 226 215 / .5),
      inset 0 10px 14px -12px rgb(117 189 178 / .4),
      0 6px 16px -10px rgb(0 0 0 / .5);
  }

  /* ── the footer sign-in, on all nine public pages ─────────────────────────
     `.footer-sign-in` is not a `.button`, so it has no --lit-edge of its own
     and the modifier's definition is the whole of it. Its 1px #777773 border
     goes, since the rim replaces it, and the padding takes back that pixel.
     It inherits the dark register above from `.site-footer`, so its label is
     #eef3f0 on --ink, and a 12% teal-bright wash does not move that. */
  .footer-sign-in.button--glass {
    border: 0;
    border-radius: 2px;
    padding: 12px 19px;
  }

  /* ── insights.html, the market-research filters ──────────────────────────
     "All notes, Operations, Investment, Real estate, Technical systems", on
     .section--mist. The five chips take the pane. The selected one cannot:
     a 6% fill is the same pane pressed or not, so there is no state left in it
     to read. So the pressed chip goes to the one treatment that can carry a
     state — the solid --ink fill with --paper text that
     `.filter-row button[aria-pressed='true']` used before any of this — with
     an amber crown along the top naming it as the current selection in the
     site's own accent colour, which is the vocabulary the explorer console
     uses for its current chapter. Because the chip is then itself a dark
     ground, its edge catch flips to amber with the rest of the dark register. */
  .filter-row button.button--glass {
    border: 0;
    min-height: 40px;
    padding: 10px 16px;
  }

  .filter-row button.button--glass[aria-pressed='true'] {
    --lit-edge:
      inset 0 0 0 1px var(--ink),
      inset 0 1px 0 rgb(232 163 61 / .55),
      inset 0 -1px 0 rgb(0 0 0 / .32),
      0 12px 26px -14px rgb(14 31 25 / .5);
    background: var(--ink);
    box-shadow: var(--lit-edge);
    color: var(--paper);
  }

  .filter-row button.button--glass[aria-pressed='true']::after {
    background: radial-gradient(90px 60px at var(--mx) var(--my), rgb(232 163 61 / .9), rgb(232 163 61 / .22) 40%, transparent 70%);
  }

  .filter-row button.button--glass[aria-pressed='true']:hover {
    --lit-edge:
      inset 0 0 0 1px var(--ink),
      inset 0 1px 0 rgb(232 163 61 / .8),
      inset 0 -1px 0 rgb(0 0 0 / .32),
      0 16px 30px -14px rgb(14 31 25 / .55);
  }

  /* Nothing follows a pointer that is not there, and nothing moves for
     somebody who asked for less motion. The script does not initialise under
     either condition, so --on and --tx/--ty never leave their resting values
     and these two blocks are belt and braces — but a hover stuck after a tap
     is exactly the failure they exist to rule out. */
  @media (hover: none) {
    .button--glass::after {
      opacity: 0 !important;
    }

    .button--glass .button__lbl {
      transform: none !important;
    }
  }

  @media (prefers-reduced-motion: reduce) {
    .button--glass,
    .button--glass::after,
    .button--glass .button__lbl {
      transition: none;
    }

    .button--glass .button__lbl {
      transform: none !important;
    }
  }

  /* ── contact.html, the inquiry form ─────────────────────────────────────
     Prof. Khaled: "also do same thing to inquiry form, it looks unprofessional
     and cartoonish, make it sharper and clearer", then "same style as option
     b, without the word lean". So it is the same pane as the buttons — about
     6% fill, 2px radius, a 1px teal rim, a lit top seam — and it does not
     respond to the pointer at all: no ::after, no --tx/--ty, no lean. Only the
     CTAs move.

     The consequence is that the dark register which used to live here is gone
     rather than restyled. The old treatment was an 80.6% dark green fill, so
     every label, field, placeholder, status line and the submit button had to
     be inverted to survive it — eleven rules whose entire job was to undo the
     fill. On a near-transparent pane `.inquiry-form`'s own light styles are
     correct again, so the inversions are deleted and the base carries it:
     #5f5f5b labels, --ink field text, #bcbcb8 underlines, the --signal-ink
     focus underline. That includes the submit button, which goes back to being
     exactly `.button--signal` — the black button that turns amber, which Prof.
     Khaled said was intentional and must be kept as it is. Its three override
     rules go with the rest.

     MEASURED against the new face, which composites over --paper to #e8f0ed at
     the top of the gradient and #edf3f0 at the foot:
       --alert-ink on the opaque #fdf2ef wash inside a failed field  7.92:1
       .field-error text on the form face (it sits on the face, not the
         wash)                                7.50:1 top, 7.73:1 foot
       --alert ring vs the form face          6.45:1 top, 6.65:1 foot
       --alert ring vs --alert-wash                              6.80:1
       #5f5f5b labels on the form face        5.53:1 top, 5.70:1 foot
       --muted status text on the form face                      5.56:1
       --ink field text on the form face                        15.83:1
     Error text needs 4.5:1 and the ring needs 3:1; both clear with room. The
     dark-register --alert override that sat at the end of this stylesheet is
     removed along with the dark register it existed for, which returns those
     four tokens to their :root values — the ones measured above. */
  .inquiry-form--glass {
    position: relative;
    isolation: isolate;
    /* Light, because the pane is. This is also the first half of the dropdown
       work below: it is what pulls the native option list out of the dark grey
       `color-scheme: dark` was opening it in. --signal on `accent-color` puts
       the amber on whatever checkmark the engine draws for itself. */
    color-scheme: light;
    accent-color: var(--signal);
    border: 0;
    border-radius: 2px;
    padding: 0 28px 28px;
    background: linear-gradient(180deg, rgb(31 111 107 / .08), rgb(31 111 107 / .02) 46%, rgb(31 111 107 / .06));
    box-shadow:
      inset 0 0 0 1px rgb(31 111 107 / .46),
      inset 0 1px 0 rgb(250 251 248 / .75),
      inset 0 10px 14px -12px rgb(31 111 107 / .45);
    color: var(--ink);
  }

  .inquiry-form--glass.is-glass-live {
    -webkit-backdrop-filter: blur(7px) saturate(1.4);
    backdrop-filter: blur(7px) saturate(1.4);
  }

  .inquiry-form--glass:not(.is-glass-live) {
    -webkit-backdrop-filter: none;
    backdrop-filter: none;
  }

  /* The status bar across the top was a solid --ink block bled to the form's
     full width, which on a pane this light is the one heavy thing in the
     composition and most of what made it read as a slab. It becomes the lit
     seam the rest of the treatment is made of: a 5% teal wash, a 1px rule
     along the bottom, the label in --teal (4.80:1 at 9px) and the progress
     counter in --signal-ink (5.28:1), which is the amber taken to a weight
     that works as text. */
  .inquiry-form--glass .inquiry-form__bar {
    border-bottom: 1px solid rgb(31 111 107 / .28);
    border-radius: 1px 1px 0 0;
    background: rgb(31 111 107 / .05);
    color: var(--teal);
  }

  .inquiry-form--glass .inquiry-form__bar span:last-child {
    color: var(--signal-ink);
  }

  /* The field underline picks up the pane's own rim on hover — the
     rim-brightening idea applied as a state rather than as something that
     follows the pointer, which is what was asked for. The base focus rule
     still owns the 2px --signal-ink underline, hence the :not(). */
  .inquiry-form--glass .form-field :is(input, select, textarea):hover:not(:focus-visible) {
    border-bottom-color: var(--teal);
  }

  /* ── contact.html, the two selects ──────────────────────────────────────
     Prof. Khaled: "make sure dropdown options match design aesthetic and
     white/black/yellow palette we have going for accents". How much of that is
     reachable depends entirely on the engine, so this is written in two layers
     and the fallback is made palette-correct rather than left to the OS.

     The fallback, first. `color-scheme: light` above and these `option`
     declarations are honoured by Chromium and Gecko on Windows and Linux,
     which draw the list themselves: --paper rows, --ink text, an amber band on
     the selected row and --muted-light on the disabled "Select one"
     placeholder. WebKit on macOS and iOS draws the list in an OS popup and
     ignores all of it except `color-scheme`, so there it gets a light system
     list — palette-adjacent, not palette-exact. There is no way to reach it
     short of building a custom listbox, which would mean reimplementing the
     keyboard and screen-reader behaviour the native element gives for free.
     (2026-10-09: that is now what happens, with the portal's own picker —
     see "the portal's dropdown on the inquiry form" below. These rules are
     the no-script fallback.)

     The @supports block is the one engine that does allow it. Chromium 135+
     with `appearance: base-select` hands over the closed control and the popup
     as real styleable boxes, so there the list is a --paper panel at the pane's
     own 2px radius behind the pane's own teal rim, the hovered row is a teal
     wash, the selected row is an amber wash with an amber checkmark pushed to
     the right, and the disclosure icon is teal and turns over when the picker
     opens. The same three colours as everything above it. */
  .inquiry-form--glass .form-field select option {
    background: var(--paper);
    color: var(--ink);
  }

  .inquiry-form--glass .form-field select option:checked {
    background: var(--signal);
    color: var(--ink);
  }

  .inquiry-form--glass .form-field select option:disabled {
    background: var(--paper);
    color: var(--muted-light);
  }

  @supports (appearance: base-select) {
    .inquiry-form--glass .form-field select {
      appearance: base-select;
      width: 100%;
      padding: 11px 0 10px;
      display: flex;
      align-items: center;
      border: 0;
      border-bottom: 1px solid #bcbcb8;
      border-radius: 0;
      background: transparent;
      color: var(--ink);
      font-size: 14px;
      letter-spacing: -0.025em;
      text-align: left;
    }

    .inquiry-form--glass .form-field select:hover:not(:focus-visible) {
      border-bottom-color: var(--teal);
    }

    .inquiry-form--glass .form-field select::picker-icon {
      margin-left: auto;
      color: var(--teal);
      transition: transform 200ms var(--ease-ios);
    }

    .inquiry-form--glass .form-field select:open::picker-icon {
      transform: rotate(180deg);
    }

    .inquiry-form--glass .form-field select::picker(select) {
      margin-top: 5px;
      padding: 4px;
      border: 1px solid rgb(31 111 107 / .46);
      border-radius: 2px;
      background: var(--paper);
      box-shadow:
        inset 0 1px 0 rgb(250 251 248 / .75),
        0 18px 40px -18px rgb(14 31 25 / .45);
    }

    .inquiry-form--glass .form-field select option {
      padding: 9px 11px;
      display: flex;
      align-items: center;
      gap: 10px;
      border-radius: 1px;
      background: transparent;
      color: var(--ink);
      font-size: 13px;
      letter-spacing: -0.02em;
    }

    .inquiry-form--glass .form-field select option:hover,
    .inquiry-form--glass .form-field select option:focus {
      outline: none;
      background: rgb(31 111 107 / .1);
    }

    .inquiry-form--glass .form-field select option:checked {
      background: rgb(232 163 61 / .18);
      color: var(--ink);
      font-weight: 500;
    }

    .inquiry-form--glass .form-field select option:disabled {
      background: transparent;
      color: var(--muted-light);
    }

    .inquiry-form--glass .form-field select option::checkmark {
      order: 1;
      margin-left: auto;
      color: var(--signal);
    }

    @media (prefers-reduced-motion: reduce) {
      .inquiry-form--glass .form-field select::picker-icon {
        transition: none;
      }
    }
  }

  @media (max-width: 760px) {
    .inquiry-form--glass {
      padding-inline: 18px;
    }
  }
}

/* ═══ Owner review, 2026-10-09 — the portal's dropdown on the inquiry form ══
   Prof. Khaled: "replicate the dropdown style we have on the portal onto the
   website inquiry form". The two selects on contact.html are now driven by the
   same picker the portal uses (`mountPick` in mistral.js, cut down from
   app.js), so the base-select and `option` rules above only reach a browser
   with the script off.

   The list is the portal's `.pick__list` from src/web/style.css, in its light
   register, value for value: the --surface (--paper) panel, the 1px
   --rule-strong #aebcb7 border, the 7px --radius-control corner, the --lift
   shadow, 8px/11px rows at 14px, the --brand-tint teal wash on hover and focus
   with a 1.5px teal rim for the keyboard, and the chosen row in teal at 600
   with its tick trailing the name. Both stylesheets share the same brand
   tokens, so this is the portal's colours rather than an approximation.

   The closed face is the one deliberate difference. The portal's button takes
   the face of the portal's boxed inputs; here the fields beside it are bare
   underlines, so the face takes theirs — the same 11px/10px padding, the
   #bcbcb8 underline, the teal underline on hover and the --signal-ink focus
   line — and keeps the portal's caret, which turns over while the list is
   open. A boxed field in a row of underlines would read as a different kind of
   control, which is the opposite of what was asked.

   `@layer utilities` because the glass form's field rules live there and
   would otherwise repaint the button. */
@layer utilities {
  .pick { position: relative; }

  .pick > .pick__field { display: none !important; }

  .form-field .pick__btn, .experience-page .pick__btn {
    display: flex;
    align-items: center;
    gap: 10px;
    width: 100%;
    min-height: 0;
    margin: 0;
    padding: 11px 0 10px;
    border: 0;
    border-bottom: 1px solid #bcbcb8;
    border-radius: 0;
    background: transparent;
    box-shadow: none;
    color: var(--ink);
    font-size: 14px;
    font-weight: 400;
    letter-spacing: -0.025em;
    text-align: left;
    cursor: pointer;
    transition: border-color 150ms ease, background-color 150ms ease;
  }

  .form-field .pick__btn:hover:not(:focus-visible, [aria-invalid='true']), .experience-page .pick__btn:hover:not(:focus-visible) {
    border-bottom-color: var(--teal);
  }

  .form-field .pick__btn:focus-visible, .experience-page .pick__btn:focus-visible {
    outline: none;
    border-bottom: 2px solid var(--signal-ink);
    background: #f2f3e9;
  }

  .pick__text {
    flex: 1;
    min-width: 0;
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
  }

  /* The placeholder ("Select one") reads as a placeholder, as it does in the
     portal. #6a6a67 rather than --muted-light: it is text, and needs 4.5:1. */
  .pick__text.is-empty { color: #6a6a67; }

  .pick__caret {
    flex: none;
    width: 0;
    height: 0;
    border-left: 5px solid transparent;
    border-right: 5px solid transparent;
    border-top: 6px solid color-mix(in srgb, #56615b 90%, #d4dcd5);
    transition: transform 150ms ease;
  }

  .pick__btn[aria-expanded='true'] .pick__caret { transform: rotate(180deg); }

  .pick__list {
    position: fixed;
    inset: auto;
    margin: 0;
    width: max-content;
    min-width: 0;
    max-width: calc(100vw - 16px);
    max-height: 280px;
    overflow-y: auto;
    padding: 6px 0;
    border: 1px solid #aebcb7;
    border-radius: 7px;
    background: var(--paper);
    box-shadow: 0 2px 4px rgb(14 22 21 / .08), 0 16px 30px -16px rgb(14 22 21 / .34);
    color: var(--ink);
    color-scheme: light;
    outline: none;
  }

  .pick__list[hidden] { display: none; }

  .pick__opt {
    display: flex;
    align-items: center;
    gap: 8px;
    width: 100%;
    margin: 0;
    padding: 8px 11px;
    border: 0;
    border-radius: 5px;
    background: transparent;
    color: var(--ink);
    font-size: 14px;
    font-weight: 400;
    letter-spacing: 0;
    text-align: left;
    cursor: pointer;
  }

  .pick__opt:hover,
  .pick__opt:active {
    background: rgb(31 111 107 / .1);
  }

  .pick__opt:focus-visible {
    outline: none;
    background: rgb(31 111 107 / .1);
    box-shadow: inset 0 0 0 1.5px var(--teal);
  }

  .pick__opt[aria-selected='true'] {
    color: var(--teal);
    font-weight: 600;
  }

  .pick__name {
    flex: 1;
    min-width: 0;
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
  }

  .pick__tick {
    flex: none;
    width: 14px;
    font-size: 12px;
    line-height: 1;
    text-align: right;
  }

  @media (prefers-reduced-motion: reduce) {
    .pick__caret,
    .form-field .pick__btn, .experience-page .pick__btn { transition: none; }
  }
}

/* The studies reuse the inquiry picker. Only the closed face inherits the
   section's light/dark ink; the shared paper/teal popup stays identical. */
.experience-page .pick { min-width: 0; max-width: 100%; }
.experience-page .pick__btn { min-height: 48px; color: inherit; border-bottom-color: #91a39b; }
.experience-page .pick__btn:focus-visible { color: var(--ink); background: #f2f3e9; outline: none; border-bottom: 2px solid var(--signal-ink); }
.experience-page .pick__opt:focus-visible { outline: none; background: rgb(31 111 107 / .1); box-shadow: inset 0 0 0 1.5px var(--teal); }
.experience-page .pick__name { white-space: normal; overflow: visible; text-overflow: clip; line-height: 1.45; }
.pick__list:not([popover]) { z-index: 1000; }
.client-room-preview__context-field { width: min(100%, 400px); min-width: 0; }
@media print { .pick__list { display: none !important; } }

/* ═══ Inquiry form: the invalid state ══════════════════════════════════════
   Everything below is scoped to a field that has actually failed validation —
   `[aria-invalid="true"]`, which `validate()` in mistral.js sets and clears —
   or to the message element that carries the reason. Nothing here restates a
   base style, so it layers on top of whatever the form container and the
   resting field appearance end up being.

   It is in `utilities` rather than `components` for one reason: the glass
   register for this form is written in `utilities` (`:5329`), and `utilities`
   is the last layer in the cascade declared on line 1. A failed field has to
   be able to repaint a glass field, so it has to live in the same layer and
   after it — in `components` every rule below lost to the glass block no
   matter how specific it was. */
@layer utilities {
  :root {
    /* The Industrial Terminal's red. Not a browser default: the hue is pulled
       round to sit beside --signal's amber (H 34deg) at H 9deg, and held at the
       same earthy mid-saturation rather than taken to a pure #f00, so a failed
       field reads as part of the same palette as the teal and the graphite.
       --alert draws, --alert-ink writes, --alert-wash backs the field so the
       text keeps its contrast whatever the container is doing, and --alert-glow
       is the shadow. --alert-ink on --alert-wash is 7.92:1. */
    --alert: #9e2b16;
    --alert-ink: #8c2714;
    --alert-wash: #fdf2ef;
    --alert-glow: rgb(158 43 22 / 0.2);
  }

  /* The ring is an inset box-shadow rather than a border or an outline: a
     border would change the field's box and push the grid around, and an
     outline cannot also carry the glow. One property draws both — a 1px
     hairline hugging the field, and a shadow that falls 5px and no further,
     which is what keeps it slim instead of a halo. */
  .form-field :is(input, select, textarea, .pick__btn)[aria-invalid='true'] {
    border-bottom-color: var(--alert);
    background-color: var(--alert-wash);
    box-shadow:
      inset 0 0 0 1px var(--alert),
      0 1px 5px -1px var(--alert-glow);
    transition:
      box-shadow 170ms ease,
      background-color 170ms ease,
      border-color 170ms ease;
  }

  /* Focus lands on the first invalid field on a failed submit, and the base
     focus rule repaints the underline amber and the fill oatmeal. Amber is the
     site's attention colour, so a focused failed field would stop looking
     failed at the exact moment the user is sent to it. The red wins while the
     field is still invalid; the amber returns the moment it is fixed. */
  .form-field :is(input, select, textarea, .pick__btn)[aria-invalid='true']:focus-visible {
    outline: none;
    /* The width stays at 1px. The base focus style goes to `border-bottom:
       2px`, and on a field in a two-column grid that extra pixel is a 1px
       reflow of the whole form at the moment focus arrives — which is the
       moment a failed submit sends it here. The weight comes from a second
       inset line drawn along the bottom instead, so the focused failed field
       reads heavier without the box changing size. */
    border-bottom: 1px solid var(--alert);
    background-color: var(--alert-wash);
    box-shadow:
      inset 0 0 0 1px var(--alert),
      inset 0 -2px 0 -1px var(--alert),
      0 1px 6px -1px var(--alert-glow);
  }

  /* The message. `min-height` reserves the single line whether or not there is
     text in it, so appearing and clearing never moves the field below. The
     leading rule is 7px of red standing in for an icon: it marks the line as a
     fault without adding a glyph, a gap, or a second colour. */
  .field-error {
    display: flex;
    align-items: baseline;
    gap: 6px;
    min-height: 1.45em;
    color: var(--alert-ink);
    font-size: 11px;
    font-weight: 500;
    letter-spacing: -0.015em;
    line-height: 1.45;
    text-wrap: pretty;
  }

  .field-error:not(:empty)::before {
    content: '';
    flex: none;
    width: 7px;
    height: 1px;
    margin-top: 0.55em;
    background: var(--alert);
  }

  /* The lift is 2px and the fade is short. The row is already reserved, so this
     animates the text inside a box that does not move. */
  .field-error:not(:empty) {
    animation: field-error-in 170ms ease both;
  }

  @keyframes field-error-in {
    from {
      opacity: 0;
      transform: translateY(-2px);
    }
  }

  /* A failed submission is not a field's fault, so it is said once, at the
     form's own status line, in the same red. The per-field containers stay
     empty unless the server names a field. */
  .form-status.is-failed {
    color: var(--alert-ink);
    font-weight: 500;
  }

  .form-status.is-failed::before {
    content: '';
    display: inline-block;
    width: 7px;
    height: 1px;
    margin-right: 6px;
    vertical-align: 0.3em;
    background: var(--alert);
  }

  /* The reservation above is one line, which is what the single-column layouts
     need: on a phone, and in the two full-width rows, the field is 280px or
     wider and every message in mistral.js fits on one line.

     Above 760px `.form-grid` goes to two columns inside a form that is itself
     one column of `.contact-grid`, so Name, Work email and the role select are
     ~143px wide at 761px and do not reach the ~270px a one-line message needs
     until about 1340px. In that band the messages wrap to two lines, and a
     single reserved line would mean a 16px jolt per row the moment the form is
     submitted. So the band — and only the band, and only the narrow columns —
     reserves the second line. Everywhere else keeps the slim single strip. */
  @media (min-width: 761px) and (max-width: 1340px) {
    .form-field:not(.form-field--wide) .field-error {
      min-height: 2.9em;
    }
  }

  @media (prefers-reduced-motion: reduce) {
    .form-field :is(input, select, textarea, .pick__btn)[aria-invalid='true'] {
      transition: none;
    }

    .field-error:not(:empty) {
      animation: none;
    }
  }
}

/* The static card grid preserves the chapter alignment. The separate journey
   rail remains a live-scene control and is hidden in Static view. */
@layer utilities {
  /* Keep the rail in normal flow until it reaches the header. Its containing
     block ends with chapter nine, so it cannot follow the reader beyond it. */
  .webgl-ready .cinema-story:not(.is-static) .story-layout {
    display: block;
    padding-bottom: 0;
  }

  .webgl-ready .cinema-story:not(.is-static) .story-console {
    position: sticky;
    top: 90px;
    width: 100%;
    margin-inline: auto;
    z-index: 6;
  }

  @media (max-width: 760px) {
    .webgl-ready .cinema-story:not(.is-static) .story-console { top: 78px; }
  }

  .cinema-story.is-static .story-console {
    max-width: none;
  }

  .cinema-story.is-static .story-nav {
    display: none !important;
  }

  /* Every chapter carries the same gold datum that previously appeared only
     on the focused final chapter. The existing eyebrow rule supplies the short
     horizontal stroke; this supplies its vertical counterpart. */
  .cinema-story .story-step__copy {
    position: relative;
  }

  .cinema-story .story-step__copy::after {
    position: absolute;
    inset: 0 auto 0 0;
    width: 1px;
    background: #bda276;
    content: "";
    pointer-events: none;
  }

  html:not(.webgl-ready) .cinema-story .story-step__copy,
  .cinema-story.is-static .story-step__copy {
    padding-inline-start: 12px;
  }

  .story-intro > .text-link:hover,
  .story-intro > .text-link:focus-visible {
    border-color: var(--signal);
    background: var(--signal);
    box-shadow: 0 0 0 5px rgb(232 163 61 / .16);
    color: var(--ink);
  }

}