/* Final visual layer.
   Homepage: GSAP owns .page-backdrop's backgroundColor; panels reveal that layer.
   Inner pages: only .cinematic-hero changes. Their following surfaces remain intact.
   Hero layers: media 0, copy 1; media never receives pointer events.
   Optional per-hero property: --cinematic-image-position. */

/* Continuous neutral / sand colour field is restricted to the homepage. */
body.cinematic-home {
  --ink: #080d11;
  --muted: #080d11;
  --line: rgba(18, 28, 34, .28);
  --soft: rgba(255, 255, 255, .18);
  --red: #080d11;
  --red-hover: #080d11;
  color: var(--ink);
  background: #c1c1c1;
  color-scheme: light;
}
.cinematic-home > .page-backdrop { background: #c1c1c1; }
.cinematic-home > .page-backdrop > i { display: none; }
.cinematic-home main { background: transparent; }
.cinematic-home main [data-surface] {
  --surface-bg: transparent;
  --ink: #080d11;
  --muted: #080d11;
  --line: rgba(18, 28, 34, .28);
  --soft: rgba(255, 255, 255, .18);
  --red: #080d11;
  --red-hover: #080d11;
  background: transparent;
  color: var(--ink);
}
.cinematic-home main :is(h1, h2, h3, .product-copy dd) { color: var(--ink); }
.cinematic-home main :is(.section-side, .hero-description, .product-tabs button span,
  .product-copy dt, .home-technology-links small, .home-paths span, .product-bottom p) { color: var(--muted); }
.cinematic-home main :is(.eyebrow, .product-type, .technology-section .tech-number) { color: var(--ink); }
.cinematic-home main .text-link { color: var(--ink); border-color: currentColor; }
.cinematic-home main .text-link:hover { color: var(--ink); border-color: currentColor; }
.cinematic-home .product-tabs { border-color: var(--line); }
.cinematic-home .product-tabs button { color: var(--muted); }
.cinematic-home .product-tabs button:is(:hover, [aria-selected="true"]) { color: var(--ink); }
.cinematic-home .product-tabs button[aria-selected="true"] { border-color: #b9231b; }
.cinematic-home .contact-section[data-surface="red"] :is(.email-link, .copy-status) {
  color: var(--ink);
  border-color: var(--line);
}
.cinematic-home main [data-surface] .button.primary {
  color: #fff;
  background: var(--brand-red, #b9231b);
  border-color: var(--brand-red, #b9231b);
}
.cinematic-home main [data-surface] .button.primary:hover {
  color: #fff;
  background: var(--brand-red-hover, #941c16);
  border-color: var(--brand-red-hover, #941c16);
}
/* White copy remains on photographic scenes; the scrolling colour field uses dark copy. */
.cinematic-home main :is(.hero-video, .oem-section, .mosaic-tile) {
  --ink: #fff;
  --muted: #edf0f1;
  --line: rgba(255,255,255,.45);
  color: #fff;
}
.cinematic-home main :is(.hero-video, .oem-section) .eyebrow { color: #fff; }
.cinematic-home .technology-section[data-surface="graphite"] .text-link { color: var(--ink); }

/* Airy Chinese lettering with a restrained, symmetrical stagger.
   Compact punctuation preserves the wording without a full extra character of space. */
.cinematic-home .hero-video #hero-title {
  --hero-line-offset: .22em;
  font-size: clamp(44px, 4.8vw, 74px);
  font-weight: 400;
  line-height: 1.42;
  letter-spacing: .015em;
}
.cinematic-home .hero-video .hero-title-line { display: inline-block; white-space: nowrap; }
.cinematic-home .hero-video .hero-title-line-first { transform: translateX(calc(-1 * var(--hero-line-offset))); }
.cinematic-home .hero-video .hero-title-line-second { transform: translateX(var(--hero-line-offset)); }
.cinematic-home .hero-video .hero-title-mark {
  display: inline-block;
  width: .72em;
  font-size: .68em;
  line-height: 1;
  letter-spacing: 0;
  text-align: left;
}
@media (max-width: 767px) {
  .cinematic-home .hero-video #hero-title {
    --hero-line-offset: .16em;
    font-size: clamp(29px, 8vw, 44px);
    line-height: 1.48;
    letter-spacing: .005em;
  }
}
/* Preserve the original video and the four real product photographs. */
.cinematic-home .hero-video .hero-film { opacity: 1; }
.cinematic-home .hero-video .hero-film-shade {
  background: linear-gradient(180deg, rgba(10, 15, 19, .45), rgba(10, 15, 19, .43) 63%, rgba(10, 15, 19, .72));
}
.cinematic-home .hero-film-controls button:hover { background: #f4f5f5; color: #20282d; border-color: #f4f5f5; }
.cinematic-home .products-section .product-image {
  background: transparent;
  border: 0;
  mix-blend-mode: multiply;
}
.cinematic-home .products-section .product-image img { mix-blend-mode: normal; }
/* This photograph contains a larger product than the other three originals.
   Reduce only its display scale; crop out the source sheet's header/footer,
   while keeping the complete product and the original file unchanged. */
.cinematic-home .products-section .product-image img[src$="/product-137.jpg"] {
  width: 114%;
  left: -7%;
  top: -11%;
  clip-path: inset(15% 0 12%);
}
.cinematic-home .company-mosaic-section { border-color: transparent; }

/* Keep the shared header, menus and footer white on every route. */
.site-header,
.site-header .mega-menu,
footer {
  --ink: #242628;
  --muted: #63686c;
  --line: #d4d8da;
  --soft: #f3f5f5;
  --red: #b9231b;
  --red-hover: #941c16;
  color: var(--ink);
  background: #fff;
  color-scheme: light;
  border-color: var(--line);
}
.cinematic-home .skip-link { background: #fff; color: #20282d; }
.cinematic-home main :focus-visible { outline: 2px solid currentColor; outline-offset: 5px; }
.cinematic-home main .product-image a:focus-visible { outline-color: #b9231b; }
.cinematic-home :is(.site-header, footer) :focus-visible { outline: 2px solid #b9231b; outline-offset: 5px; }

/* Homepage dialogs retain the existing light document/catalogue interface. */
.cinematic-home dialog {
  --ink: #242628;
  --muted: #63686c;
  --line: #d4d8da;
  --soft: #f3f5f5;
  --red: #b9231b;
  --red-hover: #941c16;
  color-scheme: light;
  color: var(--ink);
  background: #fff;
}
.cinematic-home dialog :focus-visible { outline-color: #b9231b; }

/* Inner pages keep the established light shell and red / gray / white body. */
body.cinematic-inner { color-scheme: light; background: #fff; }
.cinematic-inner > .page-backdrop { display: none; }
.cinematic-inner .cinematic-hero {
  --surface-bg: #edf1f3;
  --ink: #1d252b;
  --muted: #43515b;
  --line: rgba(35, 49, 58, .28);
  --soft: #e5ebee;
  --red: #b9231b;
  --red-hover: #941c16;
  position: relative;
  isolation: isolate;
  display: flex;
  align-items: center;
  min-height: clamp(620px, 72svh, 780px);
  height: auto;
  padding-block: 86px 122px;
  overflow: hidden;
  background: #edf1f3;
  color: #1d252b;
}
.cinematic-inner .cinematic-hero > .cinematic-hero-media {
  position: absolute;
  inset: 0;
  z-index: 0;
  pointer-events: none;
  overflow: hidden;
}
.cinematic-inner .cinematic-hero-media > img {
  display: block;
  width: 100%;
  height: 100%;
  max-width: none;
  object-fit: cover;
  opacity: 1;
  filter: none;
  mix-blend-mode: normal;
  object-position: var(--cinematic-image-position, 70% center);
  pointer-events: none;
}

.cinematic-inner .cinematic-hero > :not(.cinematic-hero-media) {
  position: relative;
  z-index: 1;
  min-width: 0;
}
.cinematic-inner .cinematic-hero :is(h1, .page-title, h2, strong) { color: #1d252b; }
.cinematic-inner .cinematic-hero :is(h1, .page-title) {
  font-size: clamp(42px, 4.8vw, 72px);
  line-height: 1.36;
  font-weight: 500;
  letter-spacing: -.035em;
  white-space: normal;
  overflow-wrap: anywhere;
  word-break: normal;
  text-wrap: balance;
}
.cinematic-inner .cinematic-hero > .wrap:not(.pc-application-hero):not(.pd-product-hero) > :is(h1, h2, p) { max-width: min(64%, 920px); }
.cinematic-inner .cinematic-hero :is(p, .page-intro, .news-meta, .pd-category,
  .pc-hero-meta > span, .pd-facts dt, .pd-intro, .pd-source-note, .ed-company-name) { color: #43515b; }
.cinematic-inner .cinematic-hero .eyebrow {
  font-size: 12px;
  letter-spacing: 2.5px;
  margin-bottom: 27px;
  color: #b9231b;
}
.cinematic-inner .cinematic-hero .page-intro {
  font-size: 18px;
  line-height: 1.95;
  margin-top: 27px;
}
.cinematic-inner .cinematic-hero .text-link {
  color: #1d252b;
  border-color: rgba(35, 49, 58, .6);
  white-space: normal;
}
.cinematic-inner .cinematic-hero .text-link:hover { color: #1d252b; border-color: #1d252b; }
.cinematic-inner .cinematic-hero .button.primary {
  color: #fff;
  background: var(--brand-red, #b9231b);
  border-color: var(--brand-red, #b9231b);
}
.cinematic-inner .cinematic-hero .button.primary:hover {
  color: #fff;
  background: var(--brand-red-hover, #941c16);
  border-color: var(--brand-red-hover, #941c16);
}
.cinematic-inner .cinematic-hero .button { white-space: normal; }
.cinematic-inner .cinematic-hero :focus-visible { outline: 2px solid #b9231b; outline-offset: 5px; }
/* Generated section scenery replaces only the old generic NEWS header picture. */
.cinematic-inner .cinematic-hero .news-hero-inner { display: block; }
.cinematic-inner .cinematic-hero .news-hero-inner > div { max-width: 64%; }
.cinematic-inner .cinematic-hero .news-hero-inner p:not(.eyebrow) { font-size: 20px; line-height: 1.9; }
.cinematic-inner .cinematic-hero.news-detail-hero .wrap > h1 {
  max-width: min(84%, 1100px);
  font-size: clamp(34px, 3.7vw, 55px);
  line-height: 1.52;
  letter-spacing: -.025em;
}
.cinematic-inner .cinematic-hero .news-meta { flex-wrap: wrap; gap: 10px 28px; margin-top: 32px; }

/* Original product pictures stay visible, labelled, clickable and on white. */
.cinematic-inner .cinematic-hero :is(.pd-product-hero, .pc-application-hero) {
  display: grid;
  grid-template-columns: minmax(0, 1.05fr) minmax(0, 1fr);
  gap: clamp(36px, 6vw, 96px);
  align-items: center;
  padding-block: 0;
}
.cinematic-inner .cinematic-hero .pd-product-copy { grid-column: 1; grid-row: 1; min-width: 0; }
.cinematic-inner .cinematic-hero .pd-product-photo { grid-column: 2; grid-row: 1; }
.cinematic-inner .cinematic-hero .pd-product-copy h1 {
  font-size: clamp(31px, 3.1vw, 46px);
  line-height: 1.5;
  max-width: 100%;
}
.cinematic-inner .cinematic-hero .pc-application-hero .page-title { font-size: clamp(40px, 4.1vw, 62px); }
.cinematic-inner .cinematic-hero .pd-facts { margin-block: 25px 21px; font-size: 14px; }
.cinematic-inner .cinematic-hero .pd-facts > div { padding-block: 11px; }
.cinematic-inner .cinematic-hero .pd-intro { font-size: 15px; }
.cinematic-inner .cinematic-hero .pc-hero-meta { flex-wrap: wrap; gap: 15px 23px; }
.cinematic-inner .cinematic-hero .pc-hero-meta > a { color: #1d252b; border-color: var(--line); }
.cinematic-inner .cinematic-hero .pc-hero-meta > a:hover { color: #b9231b; }
.cinematic-inner .cinematic-hero :is(.pd-product-photo, .pc-hero-product) {
  --ink: #242628;
  --muted: #62686c;
  --line: #d7dcde;
  --red: #b9231b;
  width: 100%;
  max-width: 590px;
  justify-self: end;
  background: #fff;
  color: #242628;
  border: 1px solid rgba(255, 255, 255, .55);
  box-shadow: 0 18px 60px rgba(5, 10, 14, .15);
}
.cinematic-inner .cinematic-hero .pd-product-photo > a { aspect-ratio: 1.25; }
.cinematic-inner .cinematic-hero .pc-hero-product > a { aspect-ratio: 1.5; }
.cinematic-inner .cinematic-hero :is(.pd-product-photo, .pc-hero-product) img {
  width: 100%;
  height: 100%;
  object-fit: contain;
  mix-blend-mode: normal;
}
.cinematic-inner .cinematic-hero :is(.pd-product-photo, .pc-hero-product) figcaption {
  color: #62686c;
  background: #fff;
  border-color: #d7dcde;
  line-height: 1.75;
  gap: 15px;
  flex-wrap: wrap;
}
.cinematic-inner .cinematic-hero :is(.pd-product-photo, .pc-hero-product) figcaption a { color: #242628; }
.cinematic-inner .cinematic-hero :is(.pd-product-photo, .pc-hero-product) figcaption a:hover { color: #b9231b; }
.cinematic-inner .cinematic-hero :is(.pd-product-photo, .pc-hero-product) :focus-visible { outline-color: #b9231b; outline-offset: -4px; }

@media (max-width: 1250px) {
  .cinematic-inner .cinematic-hero { min-height: 620px; padding-block: 76px 114px; }
  .cinematic-inner .cinematic-hero :is(.pd-product-hero, .pc-application-hero) { gap: 38px; }
  .cinematic-inner .cinematic-hero .pd-product-copy h1 { font-size: clamp(29px, 3vw, 40px); }
  .cinematic-inner .cinematic-hero .pd-facts > div { grid-template-columns: 86px minmax(0, 1fr); gap: 14px; }
}

@media (max-width: 900px) {
  .cinematic-inner .cinematic-hero:has(.pd-product-hero) { padding-block: 65px 115px; }
  .cinematic-inner .cinematic-hero .pd-product-hero { grid-template-columns: minmax(0, 1fr); gap: 36px; }
  .cinematic-inner .cinematic-hero .pd-product-copy,
  .cinematic-inner .cinematic-hero .pd-product-photo { grid-column: auto; grid-row: auto; }
  .cinematic-inner .cinematic-hero .pd-product-copy { order: 0; }
  .cinematic-inner .cinematic-hero .pd-product-photo { order: 1; max-width: 620px; justify-self: start; }
  .cinematic-inner .cinematic-hero .pd-product-copy h1 { font-size: 38px; }
  .cinematic-inner .cinematic-hero .pd-intro { max-width: 620px; }
  .cinematic-inner .cinematic-hero .pd-product-photo > a { aspect-ratio: 1.5; }
}

@media (max-width: 767px) {
  .cinematic-home .hero-film-controls button { min-height: 44px; }
  .cinematic-home .products-section .product-image { margin-block: 10px 20px; }
  .cinematic-home .contact-section .email-link { overflow-wrap: anywhere; gap: 15px; }
  .cinematic-home .contact-section .email-link span { flex-shrink: 0; }
  .cinematic-inner .cinematic-hero {
    min-height: 520px;
    min-height: min(580px, max(500px, 70svh));
    padding-block: 66px 110px;
    align-items: center;
  }
  .cinematic-inner .cinematic-hero-media > img { object-position: var(--cinematic-image-position, 67% center); }

.cinematic-inner .cinematic-hero > .wrap:not(.pc-application-hero):not(.pd-product-hero) > :is(h1, h2, p),
  .cinematic-inner .cinematic-hero .news-hero-inner > div { max-width: 100%; }
  .cinematic-inner .cinematic-hero :is(h1, .page-title) {
    font-size: clamp(34px, 9.4vw, 48px);
    line-height: 1.45;
    letter-spacing: -.03em;
  }
  .cinematic-inner .cinematic-hero .eyebrow { font-size: 10px; letter-spacing: 1.8px; margin-bottom: 23px; }
  .cinematic-inner .cinematic-hero .page-intro { font-size: 16px; line-height: 1.9; margin-top: 23px; }
  .cinematic-inner .cinematic-hero .page-intro br { display: none; }
  .cinematic-inner .cinematic-hero .news-hero-inner p:not(.eyebrow) { font-size: 18px; line-height: 1.9; }
  .cinematic-inner .cinematic-hero.news-detail-hero .wrap > h1 {
    max-width: 100%;
    font-size: clamp(29px, 7.8vw, 40px);
    line-height: 1.6;
  }
  .cinematic-inner .cinematic-hero .news-meta { font-size: 12px; margin-top: 26px; gap: 10px 22px; }
.cinematic-inner .cinematic-hero :is(.pd-product-hero, .pc-application-hero) { grid-template-columns: minmax(0, 1fr); gap: 35px; }
  .cinematic-inner .cinematic-hero:has(.pd-product-hero),
  .cinematic-inner .cinematic-hero:has(.pc-application-hero) { padding-block: 53px 112px; }
  .cinematic-inner .cinematic-hero .pd-product-copy h1 { font-size: clamp(29px, 8.2vw, 39px); line-height: 1.5; }
  .cinematic-inner .cinematic-hero .pc-application-hero .page-title { font-size: 38px; line-height: 1.4; }
  .cinematic-inner .cinematic-hero .pd-facts { margin-block: 24px 21px; font-size: 14px; }
  .cinematic-inner .cinematic-hero .pd-facts > div { grid-template-columns: 90px minmax(0, 1fr); gap: 15px; }
  .cinematic-inner .cinematic-hero .pd-intro { font-size: 14px; }
  .cinematic-inner .cinematic-hero .pd-actions { gap: 17px 22px; }
  .cinematic-inner .cinematic-hero .pd-source-note { font-size: 11px; margin-top: 21px; }
  .cinematic-inner .cinematic-hero :is(.pd-product-photo, .pc-hero-product) { max-width: 100%; justify-self: stretch; }
  .cinematic-inner .cinematic-hero :is(.pd-product-photo, .pc-hero-product) > a { aspect-ratio: 1.4; }
  .cinematic-inner .cinematic-hero :is(.pd-product-photo, .pc-hero-product) figcaption { padding: 14px 17px; font-size: 11px; }
  .cinematic-inner .cinematic-hero .pc-hero-meta > a { padding-left: 18px; }
}

@media (max-width: 389px) {
  .cinematic-home .menu-toggle { gap: 10px; }
  .cinematic-inner .cinematic-hero :is(h1, .page-title) { font-size: 33px; }
  .cinematic-inner .cinematic-hero .pc-application-hero .page-title { font-size: 34px; }
  .cinematic-inner .cinematic-hero .pd-product-copy h1 { font-size: 29px; }
  .cinematic-inner .cinematic-hero .pd-actions .button { gap: 18px; padding-inline: 18px; }
  .cinematic-inner .cinematic-hero .pc-hero-meta { align-items: flex-start; gap: 12px; }
  .cinematic-inner .cinematic-hero .pc-hero-meta > a { padding-left: 12px; }
}

/* On small screens, keep the whole photograph clear and place copy below it. */
@media (max-width: 767px) {
  .cinematic-inner .cinematic-hero,
  .cinematic-inner .cinematic-hero:has(.pd-product-hero),
  .cinematic-inner .cinematic-hero:has(.pc-application-hero) {
    display: block;
    min-height: 0;
    padding: 0;
    background: #fff;
  }
  .cinematic-inner .cinematic-hero > .cinematic-hero-media {
    position: relative;
    inset: auto;
    width: 100%;
    height: clamp(220px, 56.25vw, 430px);
  }
  .cinematic-inner .cinematic-hero-media > img { object-position: center; }
  .cinematic-inner .cinematic-hero > .wrap {
    width: 100%;
    padding: 34px var(--gutter) 46px;
  }
}

@media (prefers-reduced-motion: reduce) {
  .cinematic-home > .page-backdrop { transition: none; }
  .cinematic-inner .cinematic-hero-media,
  .cinematic-inner .cinematic-hero-media > img { transform: none; transition: none; animation: none; }
}

/* Factory appearance visualization: continuous shade supports copy without a panel. */
.cinematic-inner .ed-about-hero.cinematic-hero {
  min-height: clamp(610px, 45vw, 900px);
  padding-block: 60px 62px;
  align-items: flex-end;
  background: #202b30;
}
.cinematic-inner .ed-about-hero .cinematic-hero-media > img { object-position: center; }
.cinematic-inner .ed-about-hero .cinematic-hero-media::after {
  content: "";
  position: absolute;
  inset: 0;
  background: linear-gradient(90deg, rgba(12,21,25,.62), rgba(12,21,25,.25) 44%, transparent 74%),
    linear-gradient(0deg, rgba(12,21,25,.6), transparent 72%);
}
.factory-hero-copy {
  width: min(620px, 54%);
  padding: 0;
  background: transparent;
}
.factory-title-phrase { display: inline-block; white-space: nowrap; }
.cinematic-inner .ed-about-hero .factory-hero-copy .eyebrow { color: rgba(255,255,255,.82); margin-bottom: 20px; font-size: 10px; letter-spacing: .23em; }
.cinematic-inner .ed-about-hero .factory-hero-copy h1 { color: #fff; font-size: clamp(31px, 2.7vw, 43px); line-height: 1.42; text-wrap: initial; text-shadow: 0 2px 22px rgba(0,0,0,.16); }
.cinematic-inner .ed-about-hero .factory-hero-copy .page-intro { color: #f1f3f4; max-width: 520px; font-size: 14px; margin-top: 22px; line-height: 1.9; }
.cinematic-inner .ed-about-hero .factory-hero-copy .ed-company-name { color: #dce2e4; font-size: 11px; margin-top: 20px; }
@media (min-width: 768px) and (max-width: 1100px) {
  .cinematic-inner .ed-about-hero.cinematic-hero { min-height: 560px; padding-block: 40px 44px; }
  .factory-hero-copy { width: 62%; }
  .cinematic-inner .ed-about-hero .factory-hero-copy h1 { font-size: 30px; }
}
@media (max-width: 767px) {
  .cinematic-inner .ed-about-hero.cinematic-hero { min-height: 0; padding: 0; }
  .cinematic-inner .ed-about-hero.cinematic-hero > .cinematic-hero-media { height: auto; aspect-ratio: 20 / 9; }
  .cinematic-inner .ed-about-hero .cinematic-hero-media::after { background: linear-gradient(0deg, #202b30, rgba(32,43,48,.16) 25%, transparent 50%); }
  .cinematic-inner .ed-about-hero.cinematic-hero > .wrap { padding-top: 20px; padding-bottom: 38px; }
  .factory-hero-copy { width: 100%; padding: 0; background: transparent; }
  .cinematic-inner .ed-about-hero .factory-hero-copy h1 { font-size: clamp(29px, 8.2vw, 40px); text-wrap: balance; }
}