/* Shared desktop design roles. Loaded after page styles; content and media stay intact. */
@media (min-width:1024px) {
  body.nio-unified {
    --site-page-title:48px;
    --site-page-leading:56px;
    --site-feature-title:40px;
    --site-feature-leading:48px;
    --site-chapter-title:32px;
    --site-chapter-leading:40px;
    --site-card-title:24px;
    --site-card-leading:32px;
    --site-body:16px;
    --site-body-leading:26px;
    --site-ink:#262626;
    --site-canvas:#fff;
    --site-line:#ccc;
    --site-radius:4px;
    --site-action-radius:2px;
    --site-section-space:96px;
    --site-content-inset:10vw;
    --site-scene-inset:2.5vw;
  }

  /* The same hierarchy on editorial, product and company pages. */
  body.nio-unified main h1,
  body.nio-unified #main.about-editorial .detail-story h1 {
    font:400 var(--site-page-title)/var(--site-page-leading) "IBM Plex Sans",sans-serif!important;
    letter-spacing:normal;
  }
  body.nio-unified .brand-main h2,
  body.nio-unified #main :is(.range-section,.range-family,.range-product-contact,.facility-editorial-copy,.facility-closing,.play-closing) h2,
  body.nio-unified #main.about-editorial :is(.about-intro,.about-section-heading,.about-feature-copy,.about-vision,.about-contact,.about-film-band) h2 {
    font:400 var(--site-chapter-title)/var(--site-chapter-leading) "IBM Plex Sans",sans-serif!important;
    letter-spacing:normal;
  }
  body.nio-unified .brand-main :is(.prose,.article-body) h2 {
    font-size:28px!important;
    line-height:36px!important;
  }
  body.nio-unified #main :is(.facility-gallery-card,.world-card,.study-card) h3,
  body.nio-unified #main.about-editorial h3 {
    font:400 var(--site-card-title)/var(--site-card-leading) "IBM Plex Sans",sans-serif!important;
    letter-spacing:normal;
  }
  body.nio-unified #main.about-editorial .about-values-rows summary {
    font:400 20px/28px "IBM Plex Sans",sans-serif;
  }
  body.nio-unified #main :is(.facility-editorial-copy,.facility-gallery-card,.range-section-copy,.range-considerations,.about-intro,.about-section-heading,.about-feature-copy,.about-business-content,.about-values-rows,.about-contact,.world-card) :is(p,dd),
  body.nio-unified .brand-main :is(p,li,dd) {
    font:400 var(--site-body)/var(--site-body-leading) "IBM Plex Sans",sans-serif;
    letter-spacing:normal;
    color:var(--site-ink);
  }
  body.nio-unified #main :is(.range-product-lead>p,.guide-intro) {
    font:400 20px/28px "IBM Plex Sans",sans-serif;
  }
  body.nio-unified #main :is(.facility-editorial-eyebrow,.play-editorial-copy .editorial-eyebrow,.range-section .eyebrow,.world-card-copy .editorial-eyebrow),
  body.nio-unified .guide-eyebrow,
  body.nio-unified .guide-kicker {
    font:400 14px/20px "IBM Plex Sans Condensed",sans-serif;
    letter-spacing:.06em;
  }
  body.nio-unified #main .home-intro-copy h2 {
    font:400 var(--site-feature-title)/var(--site-feature-leading) "IBM Plex Sans",sans-serif;
  }

  /* Buttons share one shape, baseline and state. Compact navigation stays compact. */
  body.nio-unified :is(.editorial-button,.brand-main .button,.guide-action,.enquiry-submit,.play-product-link,.play-closing-primary,.facility-closing a,.tech-contact-link,.material-learn-more) {
    box-sizing:border-box;
    display:inline-flex;
    align-items:center;
    justify-content:center;
    min-height:44px;
    height:44px;
    padding:11px 22px;
    border-radius:var(--site-action-radius);
    font:400 14px/20px "IBM Plex Sans",sans-serif;
    letter-spacing:normal;
    text-align:center;
    box-shadow:none;
  }
  body.nio-unified #main.tech-experience.tp-layout .tx-close .tech-contact-link {
    min-height:44px;
    padding:11px 22px;
    border-radius:var(--site-action-radius);
    font:400 14px/20px "IBM Plex Sans",sans-serif;
  }
  body.nio-unified #main :is(.editorial-text-link,.text-link,.facility-text-link,.guide-back) {
    font:400 14px/22px "IBM Plex Sans",sans-serif;
    text-underline-offset:4px;
  }
  body.nio-unified :is(.editorial-button,.brand-main .button,.guide-action,.enquiry-submit,.play-product-link,.play-closing-primary,.facility-closing a,.tech-contact-link,.material-learn-more):focus-visible {
    outline:2px solid currentColor;
    outline-offset:4px;
  }
  body.nio-unified .home-contact-actions .editorial-button {height:44px;min-height:44px;font-weight:400}
  body.nio-unified.home-page .world-about .world-about-button {height:44px;min-height:44px;padding:11px 22px}
  body.nio-unified.detail-technology #main.tech-experience.tp-layout .tech-hero-explore {font:400 16px/22px "IBM Plex Sans",sans-serif;border-radius:0}
  body.nio-unified .enquiry-form :is(input:not([type=hidden]):not([type=checkbox]),select) {border-radius:var(--site-action-radius)}
  body.nio-unified .enquiry-content h2 {font:400 20px/28px "IBM Plex Sans",sans-serif}
  body.nio-unified :is(.product-detail-nav a:not(.product-nav-name):not(.product-nav-contact),.range-category-nav>div a) {font:400 14px/20px "IBM Plex Sans Condensed",sans-serif}
  body.nio-unified .range-overview-link {font:400 18px/24px "IBM Plex Sans Condensed",sans-serif}

  /* Plain reading panels stay white; colour is reserved for approved brand stages and imagery. */
  body.nio-unified .brand-main :is(.soft,.close-cta),
  body.nio-unified #main.about-editorial :is(.about-vision,.about-film-band),
  body.nio-unified .range-product-contact,
  body.nio-unified.home-page .home-world,
  body.nio-unified.detail-technology #main.tech-experience.tp-layout .tx-close {background:var(--site-canvas);color:var(--site-ink)}
  body.nio-unified #main.about-editorial :is(.about-vision,.about-film-band) :is(h2,p) {color:var(--site-ink)}
  body.nio-unified #main.about-editorial .about-film-band .editorial-button {background:transparent;border-color:var(--site-ink);color:var(--site-ink)}
  body.nio-unified #main.about-editorial .about-film-band .editorial-button:hover {background:var(--site-ink);color:#fff}

  /* Full-width image stages use a true 16:9 frame, independent of browser chrome. */
  body.nio-unified.home-page :is(.home-courts,.world-about),
  body.nio-unified.sports-catalog .play-closing,
  body.nio-unified.detail-facility .facility-closing {
    box-sizing:border-box;
    width:100%;
    height:auto;
    min-height:0;
    aspect-ratio:16/9;
  }
  body.nio-unified :is(.play-editorial-hero,.facility-editorial-hero) {
    width:calc(100% - 2*var(--site-scene-inset));
    height:auto;
    aspect-ratio:16/9;
    margin:48px auto 0;
    border-radius:var(--site-radius);
  }
  body.nio-unified :is(.play-editorial-hero,.facility-editorial-hero) img {width:100%;height:100%;object-fit:cover}
  body.nio-unified #main.about-editorial .about-place-image {height:auto;aspect-ratio:16/9}
  body.nio-unified #main.about-editorial .about-business-tile img {
    height:auto;
    min-height:0;
    max-height:none;
    aspect-ratio:4/3;
    object-fit:cover;
    border-radius:var(--site-radius);
  }

  /* Detail imagery remains portrait; wider scene galleries share a landscape frame. */
  body.nio-unified .facility-gallery-card figure {aspect-ratio:16/9;border-radius:var(--site-radius)}
  body.nio-unified .facility-gallery {--facility-gap:24px;--facility-card-width:clamp(357px,26.5625vw,680px)}
  body.nio-unified .facility-gallery-card h3 {margin:14px 0 6px}
  body.nio-unified .facility-gallery-card p {max-width:none;width:100%}
  body.nio-unified .facility-gallery-card .facility-text-link {margin-top:10px}
  body.nio-unified .facility-gallery-controls {margin-top:12px}

  /* Matching chapter starts and reading spacing, without changing the gallery fit logic. */
  body.nio-unified .facility-editorial-copy {padding:20px var(--site-content-inset) 24px}
  body.nio-unified .facility-editorial-copy h2 {margin:0 0 10px}
  body.nio-unified .facility-editorial-copy .facility-editorial-eyebrow {margin:0 0 8px}
  body.nio-unified .facility-editorial {padding-bottom:16px}
  body.nio-unified .range-section {padding-block:var(--site-section-space)}
  body.nio-unified .range-section h2 {margin:0 0 16px}
  body.nio-unified .brand-main .section {padding-block:var(--site-section-space)}
  body.nio-unified #main.about-editorial :is(.about-intro,.about-business-section,.about-values-section,.about-vision,.about-contact) {padding-block:var(--site-section-space)}
  body.nio-unified #main.about-editorial :is(.about-intro,.about-section-heading,.about-feature-copy,.about-vision,.about-contact)>p {margin-top:16px}
  body.nio-unified #main :is(.play-closing,.facility-closing) h2 {margin:0 0 16px}
  body.nio-unified #main :is(.play-closing,.facility-closing) p {font:400 16px/26px "IBM Plex Sans",sans-serif;margin:0 0 28px}
  body.nio-unified #main.tech-experience.tp-layout .tx-close h2 {font:400 32px/40px "IBM Plex Sans",sans-serif!important}
  body.nio-unified #main.tech-experience.tp-layout .tx-close p {font:400 16px/26px "IBM Plex Sans",sans-serif}
  body.nio-unified #main.tech-experience.tp-layout .tx-close {padding-block:var(--site-section-space)}
  body.nio-unified #main :is(.range-product-contact,.close-cta) {padding-block:var(--site-section-space)}
}