/* Approved organic design, applied before the first paint. */
:root{--hero-gradient:linear-gradient(118deg,#000000,color-mix(in srgb,#000000 50%,#000000) 55%,#000000);--studio-glass:rgba(255,255,255,.88);--studio-blur:24px;--studio-shadow:rgba(0,0,0,.13);--layout-left:50px;--layout-right:50px;--studio-logo-bg:rgba(0,0,0,.94)}

.mobile-returned-brand, .mobile-coming-soon { display: none; }
/* The returning menu has one section indicator. A stationary pointer or a
   retained touch hover must not leave a second pill after the page scrolls. */
.curve-header.header-returned nav a::after { display: none; }
.technology .workflow-heading {
  margin: 48px 0 24px; font-size: clamp(24px, 2.2vw, 32px);
  line-height: 1.2; font-weight: 500; letter-spacing: -.025em;
}
.technology .workflow-heading + .focus-grid { margin-top: 0; }
@media (min-width: 701px) {
  /* Fit the initial 16:9 card inside short desktop windows. The expansion
     animation measures this slot, so it retains the same right gutter. */
  .option-c .expansion-stage {
    --desktop-hero-height: max(100svh, 760px);
    --desktop-hero-top: 135px;
    --desktop-hero-bottom: 70px;
    height: var(--desktop-hero-height);
    padding-top: var(--desktop-hero-top);
    padding-bottom: var(--desktop-hero-bottom);
    grid-template-rows: minmax(0, 1fr);
  }
  .option-c .film-slot {
    width: min(100%, calc((var(--desktop-hero-height) - var(--desktop-hero-top) - var(--desktop-hero-bottom)) * 16 / 9));
    min-height: 0; justify-self: end;
  }
  /* Match the mobile returning menu while retaining the desktop right gutter. */
  .curve-header.header-returned.mission-header {
    left: auto; width: max-content; display: flex; flex-wrap: nowrap;
    align-items: center; gap: 8px; padding: 5px 7px 5px 14px;
    min-height: var(--returned-header-height,54px);
    background: #fff; border-radius: 999px; corner-shape: round;
    box-shadow: 0 3px 16px #20372c12;
  }
  .curve-header.header-returned.mission-header > .brand { display: none; }
  .curve-header.header-returned.mission-header > .mobile-returned-brand {
    display: flex; align-items: center; flex: 0 0 24px;
  }
  .curve-header.header-returned.mission-header > .mobile-returned-brand img {
    display: block; width: 24px; height: auto;
  }
  .curve-header.header-returned.mission-header > nav.white-glass {
    width: auto; min-width: 0; padding: 0; background: transparent;
  }
}
@media (max-width: 700px) {
  html, body { background-color: #f4f3ed; color-scheme: light; }
  body { padding-bottom: env(safe-area-inset-bottom, 0px); }
  html { scroll-behavior: auto; scroll-padding-top: calc(82px + env(safe-area-inset-top, 0px)); }
  /* Use Safari's stable large viewport so toolbar changes neither jump the card
     nor leave the expanded video short of the screen. */
  .option-c.expansion-track { height: calc(max(100lvh, var(--mobile-hero-min-height, 0px)) * 2.35); }
  .option-c .expansion-stage { height: max(100lvh, var(--mobile-hero-min-height, 0px)); min-height: 0; }
  .option-c .film-card:not(.is-positioned) { visibility: hidden; }
  .option-c .mobile-composited { background: transparent; box-shadow: none; will-change: clip-path; contain: layout style; }
  .option-c .mobile-composited > video, .option-c .mobile-composited > img { object-fit: fill; transform-origin: 0 0; will-change: transform; }
  .option-c .mobile-composited .film-progress { transform-origin: left center; }
  .option-c .mobile-composited .film-top { display: none; }
  .option-c .film-card > .optical-edge { display: none; }
  .option-c .curve-copy { transition: none; }
  .hero-copy-join { white-space: nowrap; }
  .hero-copy-join br { display: none; }
  .curve-header nav .nav-indicator {
    transition: transform .75s cubic-bezier(.25,.1,.25,1), width .65s cubic-bezier(.25,.1,.25,1), opacity .2s ease !important;
  }
  .curve-header.header-returned.mission-header {
    transition: transform .6s cubic-bezier(.25,.1,.25,1), opacity .4s ease, visibility 0s .6s !important;
  }
  /* These animations use the root scroll position, including native momentum.
     Keep the stage in document flow: Safari clips oversized sticky layers at
     its toolbar, even when their CSS height is correct. */
  .option-c.mobile-native-scroll .expansion-stage {
    position: relative; top: auto; will-change: transform;
    animation: mobile-stage linear both;
    animation-timeline: scroll(root block);
    animation-range: var(--mobile-scroll-start) var(--mobile-scroll-end);
  }
  .mobile-native-scroll .mobile-composited,
  .mobile-native-scroll .mobile-composited > :is(video,img),
  .mobile-native-scroll .mobile-composited .film-bottom,
  .mobile-native-scroll .mobile-composited .film-progress,
  .mobile-native-scroll .curve-copy {
    animation-duration: auto; animation-timing-function: linear; animation-fill-mode: both;
    animation-timeline: scroll(root block);
    animation-range: var(--mobile-scroll-start) var(--mobile-scroll-end);
  }
  .mobile-native-scroll .mobile-composited { animation-name: mobile-clip; }
  .mobile-native-scroll .mobile-composited > :is(video,img) { animation-name: mobile-media; }
  .mobile-native-scroll .mobile-composited .film-bottom { animation-name: mobile-controls; }
  .mobile-native-scroll .mobile-composited .film-progress { animation-name: mobile-rail; }
  .mobile-native-scroll .curve-copy { animation-name: mobile-copy; }
  #video-seek { touch-action: pan-y pinch-zoom; top: -21px; height: 44px; }
  /* The invisible sizing copy must not reserve an extra line on phones. */
  .technology-title .headline-space { display: none; }
  .technology-title .headline-line { display: block; line-height: 1.08; }
  .technology-title .headline-second { margin-top: 4px; }
  .contact-action-disabled { display: none; }
  .mobile-coming-soon, .mobile-coming-soon:hover {
    display: inline-flex; border: 0; background: #d9dcda; color: #727873;
    cursor: not-allowed; opacity: 1; -webkit-text-fill-color: currentColor;
  }
  .footer-spectrum-control .spectrum-marker { display: none; }
  .footer-spectrum-control .spectrum-bar:nth-child(even) { display: none; }
  /* One returning pill. The opening dark header keeps all its existing rules. */
  .curve-header.header-returned.mission-header {
    top: calc(12px + env(safe-area-inset-top, 0px)); left: 12px; right: 12px;
    display: flex; flex-wrap: nowrap; align-items: center; gap: 6px;
    padding: 5px 7px 5px 12px; min-height: 54px;
    background: #fff; border-radius: 999px; box-shadow: 0 3px 16px #20372c12;
  }
  .curve-header.header-returned.mission-header > .brand { display: none; }
  .mobile-returned-brand { display: flex; align-items: center; flex: 0 0 22px; }
  .mobile-returned-brand img { display: block; width: 100%; height: auto; }
  .curve-header.header-returned.mission-header > nav.white-glass { width: auto; flex: 1; min-width: 0; padding: 0; gap: 0; background: transparent; }
  .curve-header.header-returned.mission-header nav a { padding: 8px 3px; min-height: 44px; font-size: clamp(11px, 3.3vw, 13px); line-height: 1.15; text-align: center; }
  .curve-header.header-returned.mission-header nav .nav-indicator { box-shadow: none; }
}
@keyframes mobile-stage { from { transform: translate3d(0,0,0); } to { transform: translate3d(0,var(--mobile-travel),0); } }
@keyframes mobile-copy { 0% { opacity: 1; } 32%,100% { opacity: 0; } }
@media (max-width: 700px) and (prefers-reduced-motion: reduce) {
  .curve-header nav .nav-indicator,
  .curve-header.header-returned.mission-header { transition: none !important; }
}