@font-face {
  font-family: Space;
  src: url("/fonts/space-grotesk-latin-400-normal.woff2") format("woff2");
  font-weight: 400;
  font-display: swap;
}
@font-face {
  font-family: DM;
  src: url("/fonts/dm-sans-latin-400-normal.woff2") format("woff2");
  font-weight: 400;
  font-display: swap;
}
:root {
  --ink: #0c0b16;
  --paper: #f0eee8;
  --muted: #c0b7d0;
  --violet: #9862e8;
  --gutter: 6vw;
  /* The film's display type scale: two tiers, nothing else. Display carries the hero and the
     statement beats (creative, systems, software, ending); section carries the mission statement,
     the chooser and its focus, the work panels and the framework. Both scale with the viewport, so
     copy keeps its proportion to the shell on large screens. */
  --type-display: clamp(42px, 4.4vw, 200px);
  --type-section: clamp(32px, 3.3vw, 150px);
  /* The small end of the scale, fixed at every width: 11px is the legibility floor (Apple's 11pt
     minimum). Eyebrows keep their tracking; notes carry disclosures, captions and node sublabels,
     the page's honesty labels, so they never drop below it on phones. */
  --type-eyebrow: 11px;
  --type-note: 11px;
  color-scheme: dark;
}
* {
  box-sizing: border-box;
}
html {
  scrollbar-width: thin;
  scrollbar-color: #6b5584 var(--ink);
}
body {
  margin: 0;
  background: var(--ink);
  color: var(--paper);
  font:
    16px/1.6 DM,
    Arial,
    sans-serif;
  overflow-x: clip;
}
::selection {
  background: #7543b0;
  color: white;
}
a {
  color: inherit;
  text-underline-offset: 7px;
  text-decoration-thickness: 1px;
}
a:hover {
  color: #d5b8ff;
}
a:focus-visible {
  outline: 2px solid #d5b8ff;
  outline-offset: 8px;
}
/* Top bar: the wordmark centred; on the right one cluster holds the business switch (once a business
   is chosen) immediately left of Other products. Both controls share one height and one material. */
.brand {
  position: fixed;
  z-index: 10;
  top: 24px;
  left: 24px;
  right: 24px;
  height: 44px;
  display: flex;
  align-items: center;
  justify-content: center;
  pointer-events: none;
  transition:
    opacity 0.25s ease,
    visibility 0s;
}
/* Never text over the product: while the shell flies through the bar's band (the dive and the
   return to the ending), cinema-world.js sets .shell-over-bar and the bar steps aside. */
.shell-over-bar .brand {
  opacity: 0;
  visibility: hidden;
  transition:
    opacity 0.2s ease,
    visibility 0s 0.2s;
}
/* The link's hit area is the full 44px bar height; the image stays centred where it was. */
.brand .wordmark {
  pointer-events: auto;
  display: flex;
  align-items: center;
  min-height: 44px;
}
.brand img {
  display: block;
  width: 180px;
  height: auto;
}
.top-actions {
  position: absolute;
  top: 0;
  right: 0;
  display: flex;
  align-items: center;
  gap: 10px;
}
.top-actions > * {
  pointer-events: auto;
}
.brand .other-products {
  display: inline-flex;
  align-items: center;
  gap: 9px;
  height: 44px;
  box-sizing: border-box;
  padding: 0 18px 0 16px;
  border: 1px solid rgba(255, 255, 255, 0.18);
  border-radius: 999px;
  background: rgba(12, 11, 22, 0.55);
  -webkit-backdrop-filter: blur(14px);
  backdrop-filter: blur(14px);
  color: #fff;
  font:
    14px/1 Space,
    Arial,
    sans-serif;
  letter-spacing: -0.01em;
  white-space: nowrap;
  text-decoration: none;
  transition:
    background-color 0.2s,
    border-color 0.2s;
}
.op-icon {
  flex: none;
  width: 14px;
  height: 14px;
  fill: none;
  stroke: #d9c6f2;
  stroke-width: 1.4;
}
.brand .other-products:hover {
  background: rgba(12, 11, 22, 0.72);
  border-color: rgba(255, 255, 255, 0.3);
}
.brand .other-products:focus-visible {
  outline: 2px solid #d5b8ff;
  outline-offset: 3px;
}
/* Tablets: the wordmark needs the middle, so the switch steps down under Other products. */
@media (max-width: 1000px) and (min-width: 701px) {
  .top-actions {
    flex-direction: column;
    align-items: flex-end;
    gap: 8px;
  }
  .top-actions .business-switch {
    order: 2;
  }
}
.skip {
  position: fixed;
  top: 15px;
  left: 15px;
  z-index: 30;
  transform: translateY(-200%);
  background: var(--ink);
  padding: 10px;
}
.skip:focus {
  transform: none;
}
.world {
  position: fixed;
  inset: 0;
  overflow: hidden;
  pointer-events: none;
  background: #0c0b16;
}
.atmosphere {
  position: absolute;
  inset: -20%;
  background:
    radial-gradient(ellipse at 65% 50%, #582894 0, transparent 40%),
    radial-gradient(ellipse at 30% 75%, #211740, transparent 55%);
  animation: breathe 18s ease-in-out infinite alternate;
}
.poster {
  position: absolute;
  left: 29%;
  top: 5%;
  width: 80%;
  height: 90%;
  object-fit: contain;
  opacity: calc(0.8 * var(--poster-alpha, 1));
}
#film {
  position: absolute;
  width: 100%;
  height: 100%;
  inset: 0;
  opacity: 0;
}
.webgl-ready #film {
  opacity: 1;
}
.webgl-ready .poster,
.webgl-ready .atmosphere {
  display: none;
}
.grain {
  position: absolute;
  inset: 0;
  opacity: 0.035;
  background-image: url("data:image/svg+xml,%3Csvg viewBox='0 0 180 180' xmlns='http://www.w3.org/2000/svg'%3E%3Cfilter id='n'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='.8' numOctaves='3' stitchTiles='stitch'/%3E%3C/filter%3E%3Crect width='100%25' height='100%25' opacity='.6' filter='url(%23n)'/%3E%3C/svg%3E");
}
.scene {
  position: relative;
  min-height: 100svh;
  padding: 150px var(--gutter) 70px;
  display: flex;
  align-items: center;
}
.copy {
  position: relative;
  max-width: 680px;
}
.copy h1,
.copy h2 {
  font:
    400 clamp(56px, 7.7vw, 126px) / 0.98 Space,
    Arial,
    sans-serif;
  letter-spacing: -0.065em;
  margin: 0 0 30px;
  text-wrap: balance;
}
.copy h2 {
  font-size: clamp(52px, 6.7vw, 106px);
}
em {
  font-style: normal;
  color: #d1b8f3;
}
.eyebrow {
  font-size: var(--type-eyebrow);
  letter-spacing: 0.17em;
  text-transform: uppercase;
  margin: 0 0 28px;
  color: #d5c9e6;
}
.copy p:not(.eyebrow) {
  font-size: clamp(14px, 1.15vw, 18px);
  line-height: 1.6;
  margin: 0;
  max-width: 450px;
  color: #dfd8e8;
}
/* No one-word last lines in the film's running copy. */
.copy p,
.copy li,
.copy small,
.copy li span {
  text-wrap: pretty;
}
.caption {
  margin-top: 35px !important;
}
.copy small {
  display: block;
  font-size: var(--type-note);
  color: #c5bacf;
  margin-top: 20px;
}
.detail {
  display: block;
  font-size: 14px;
  color: #c5bacf;
  margin-top: 5px;
}
.work-scene .copy h2 {
  font-size: clamp(52px, 5.8vw, 90px);
}
.work-scene .copy {
  max-width: 46%;
}
.fallback-work {
  width: 48%;
  position: absolute;
  right: 4%;
  top: 30%;
  opacity: 0.8;
}
.webgl-ready .fallback-work {
  display: none;
}
.connections {
  justify-content: flex-end;
}
.connections .copy {
  max-width: 55%;
}
.expression .copy {
  max-width: 55%;
}
.resolution {
  align-items: flex-end;
  padding-bottom: 8vh;
}
/* The ending: the shell returns to the right, the closing statement holds the clear left column at
   the size of the film's other scene headings. */
.resolution .copy h2 {
  font-size: var(--type-display);
  line-height: 0.98;
  letter-spacing: -0.06em;
  margin-bottom: 28px;
}
.resolution .copy {
  max-width: 720px;
}
.cinema-active .resolution .copy {
  max-width: min(46vw, 720px);
  /* --reveal (cinema.js) runs 20.75-21.17; the copy waits for the shell to land (about 21.09). */
  opacity: clamp(0, calc((var(--reveal, 1) - 0.9) * 10), 1);
}
.resolution .copy p:not(.eyebrow) {
  font-size: clamp(15px, 1.2vw, 19px);
  max-width: 420px;
}
/* The ending's call to action: a pill in the hero selector's material, the film's one primary
   action at its close. */
.studio-link {
  display: inline-flex;
  align-items: center;
  gap: 14px;
  min-height: 54px;
  margin-top: 30px;
  padding: 0 24px 0 28px;
  border: 1px solid #d9c3f5a6;
  border-radius: 999px;
  background: linear-gradient(120deg, #2c2339e6, #171223d9);
  box-shadow: 0 16px 44px #09051440;
  -webkit-backdrop-filter: blur(18px);
  backdrop-filter: blur(18px);
  color: #faf7ff;
  font-size: clamp(15px, 1.15vw, 18px);
  text-decoration: none;
  transition:
    border-color 0.2s,
    background-color 0.2s;
}
.studio-link:hover {
  color: #fff;
  border-color: #efe2ff;
  background: linear-gradient(120deg, #382c48f0, #1d1629e6);
}
.studio-link:focus-visible {
  outline-offset: 4px;
}
.studio-arrow {
  flex: none;
  width: 8px;
  height: 8px;
  margin-right: 3px;
  border-top: 1.5px solid #e6d3fb;
  border-right: 1.5px solid #e6d3fb;
  transform: rotate(45deg);
}
@media (prefers-reduced-motion: no-preference) {
  .studio-link .studio-arrow {
    transition: transform 0.2s;
  }
  .studio-link:hover .studio-arrow {
    transform: translateX(3px) rotate(45deg);
  }
}
/* Desktop: the ending's heading, lead and action sit as one group on the shell's centre line. */
@media (min-width: 701px) {
  .cinema-active .resolution {
    align-items: center;
    padding-top: 10vh;
    padding-bottom: 18vh;
  }
}
.cursor {
  display: none;
}
/* TOTAL scroll units (cinema.js KNOTS) x 81.9svh + one viewport (systems.css repeats it). */
.cinema-active main {
  height: 2324svh;
}
.cinema-active .scene {
  position: fixed;
  inset: 0;
  min-height: 0;
  height: 100%;
  opacity: 0;
  pointer-events: none;
  will-change: opacity, transform;
}
/* Off-screen scenes are transparent, never hidden: they stay in the accessibility tree and the Tab
   order (cinema.js seeks the film to a scene when focus enters it). Only a live scene, at half
   opacity or more, takes pointer input. */
.cinema-active .scene.is-live .copy a {
  pointer-events: auto;
}
.cinema-active .opening {
  visibility: visible;
  opacity: 1;
}
.cinema-active .scene::before {
  content: "";
  position: absolute;
  inset: 0;
  background: radial-gradient(ellipse at 13% 55%, #0906128c, transparent 65%);
  pointer-events: none;
}
.cinema-active .connections::before {
  background: radial-gradient(ellipse at 80% 60%, #090612b0, transparent 65%);
}
@keyframes breathe {
  to {
    transform: rotate(12deg) scale(1.15);
  }
}
@media (hover: hover) and (pointer: fine) {
  .cinema-active body,
  .cinema-active a {
    cursor: none;
  }
  .cinema-active .cursor {
    display: block;
    position: fixed;
    width: 5px;
    height: 5px;
    border-radius: 50%;
    background: white;
    z-index: 40;
    pointer-events: none;
    left: -20px;
    top: -20px;
  }
}
@media (max-width: 700px) {
  :root {
    --gutter: 7vw;
    --type-display: clamp(30px, 8.8vw, 48px);
    --type-section: clamp(28px, 8vw, 40px);
  }
  /* Phones: the wordmark keeps the centre of the top row and Other products its trailing edge.
     The business switch takes its own centred row beneath, only while the shell is off screen. */
  .brand {
    top: 13px;
    left: 16px;
    right: 16px;
  }
  .brand img {
    width: 142px;
  }
  .top-actions {
    position: static;
  }
  .brand .other-products {
    position: absolute;
    top: 0;
    right: 0;
    font-size: 13px;
    padding: 0 14px 0 12px;
    gap: 8px;
  }
}
/* Narrow phones: Other products becomes a 44pt icon button; its name stays in the accessible label. */
@media (max-width: 480px) {
  .brand .other-products {
    width: 44px;
    padding: 0;
    justify-content: center;
  }
  .brand .op-label {
    display: none;
  }
  .op-icon {
    width: 16px;
    height: 16px;
  }
}
@media (max-width: 399px) {
  .scene {
    padding-top: 115px;
    padding-bottom: 10svh;
    align-items: flex-end;
  }
  .copy h1 {
    font-size: clamp(56px, 13.5vw, 84px);
    margin-bottom: 22px;
  }
  .copy h2,
  .work-scene .copy h2 {
    font-size: clamp(44px, 11.5vw, 70px);
  }
  .copy,
  .work-scene .copy,
  .connections .copy,
  .expression .copy {
    max-width: 100%;
  }
  .copy p:not(.eyebrow) {
    font-size: 14px;
    max-width: 340px;
  }
  .eyebrow {
    max-width: 290px;
    margin-bottom: 19px;
  }
  .connections {
    justify-content: flex-start;
  }
  .fallback-work {
    top: 15%;
    width: 90%;
    right: 5%;
  }
  .cinema-active .scene::before,
  .cinema-active .connections::before {
    background: linear-gradient(0deg, #090612e0, transparent 78%);
  }
  .detail {
    font-size: 12px;
  }
  .copy small {
    margin-top: 12px;
  }
}
@media (prefers-reduced-motion: reduce) {
  .atmosphere {
    animation: none;
  }
  .cursor {
    display: none !important;
  }
  body,
  a {
    cursor: auto !important;
  }
}
.static-mode .scene,
html:not(.cinema-active) .scene {
  background: linear-gradient(0deg, #0c0b16b0, transparent);
}
.static-mode .fallback-work {
  opacity: 0.35;
  display: block;
}
.image-fallback .fallback-work {
  display: block;
}
/* Reduced motion and no-JS read as a normal document: the world (shell, orb or poster) belongs to
   the opening alone and scrolls away with it, so no later section is ever set over the product.
   There the shell rests beside (desktop) or above (phones) the opening copy, never under it, so it
   shows at full strength and reads as lit chrome: the live shell drawn once in its resting pose
   (reduced motion) or the rendered poster (no JavaScript, or reduced motion without WebGL). */
html:not(.cinema-active) .world {
  position: absolute;
  inset: 0 0 auto;
  height: 100svh;
  -webkit-mask-image: linear-gradient(#000 75%, transparent);
  mask-image: linear-gradient(#000 75%, transparent);
}
html.static-mode.media-fallback .poster {
  opacity: 0.8;
}
html:not(.cinema-active) .brand {
  position: absolute;
}
html:not(.cinema-active) .scene {
  min-height: 80svh;
}
html:not(.cinema-active) .work-scene {
  display: flex;
  flex-direction: column-reverse;
  align-items: flex-start;
  justify-content: center;
  gap: 32px;
}
html:not(.cinema-active) .work-scene .copy {
  max-width: 100%;
}
html:not(.cinema-active) .fallback-work {
  position: relative;
  inset: auto;
  width: min(700px, 100%);
  height: auto;
  opacity: 1;
  display: block;
}
html:not(.cinema-active) .scene::before {
  display: none;
}

/* With the film running but its world unavailable, the still shell belongs to the opening and the
   ending only (cinema.js sets --poster-alpha from film time), never behind the beats between. */
.media-fallback .poster {
  opacity: calc(0.14 * var(--poster-alpha, 1));
}
.media-fallback .fallback-work {
  opacity: 1;
}

/* Rift capture: typography surrounds the persistent central window. */
.cinema-active .work-scene::before {
  background: none;
}
.cinema-active .work-scene .copy {
  position: absolute;
  inset: 0;
  max-width: none;
  text-align: center;
}
.cinema-active .work-scene .copy h2 {
  position: absolute;
  top: 15%;
  left: 5%;
  width: 90%;
  font-size: var(--type-section);
  transform: translateY(calc((1 - var(--reveal, 1)) * 25px));
}
.cinema-active .work-scene .eyebrow {
  position: absolute;
  top: 11%;
  width: 100%;
  margin: 0;
}
.cinema-active .work-scene .copy p:not(.eyebrow) {
  position: absolute;
  top: 78%;
  left: 10%;
  width: 80%;
  max-width: none;
  transform: translateY(calc((1 - var(--reveal, 1)) * -20px));
}
.cinema-active .work-scene .copy small {
  position: absolute;
  top: 89%;
  width: 100%;
  margin: 0;
}
.cinema-active .work-scene .copy a {
  display: inline-block;
  padding: 8px 14px;
  font-size: 20px;
}
@media (max-width: 700px) {
  .cinema-active .work-scene .copy h2 {
    top: 22%;
    font-size: var(--type-section);
    left: 7%;
    width: 86%;
  }
  .cinema-active .work-scene .eyebrow {
    top: 17%;
    max-width: none;
  }
  .cinema-active .work-scene .copy p:not(.eyebrow) {
    top: 66%;
  }
  .cinema-active .work-scene .copy small {
    top: 82%;
  }
}

#drive-film {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  visibility: hidden;
  pointer-events: none;
}
.drive-poster {
  display: none;
}
.cinema-active .drive-copy {
  align-items: flex-start;
  padding-top: 15vh;
}
.cinema-active .drive-copy .copy {
  max-width: 520px;
}
.cinema-active .drive-copy h2 {
  font-size: var(--type-display);
}
.cinema-active .drive-copy::before {
  background: radial-gradient(ellipse at 15% 15%, #100c1b9c, transparent 48%);
}
html:not(.cinema-active) .drive-copy {
  display: flex;
  flex-direction: column-reverse;
  gap: 32px;
  align-items: flex-start;
}
html:not(.cinema-active) .drive-poster,
.drive-failed .drive-poster {
  display: block;
  width: 100%;
  max-width: 900px;
}
.drive-failed #drive-film {
  display: none;
}
.drive-failed.cinema-active .drive-poster {
  position: absolute;
  inset: 35% 0 auto;
  width: 100%;
  z-index: -1;
}
@media (max-width: 700px) {
  .cinema-active .drive-copy {
    padding-top: max(13svh, 112px);
  }
  .cinema-active .drive-copy h2 {
    font-size: var(--type-display);
  }
  /* Body and concept label share one bottom-anchored flow, so a longer business body pushes the
     label down instead of printing over it. The label stays clear of "Ask our AI" on the right. */
  .cinema-active .drive-copy .drive-foot {
    position: fixed;
    left: 7vw;
    right: 7vw;
    bottom: 7svh;
  }
  .cinema-active .drive-copy .drive-foot p:not(.eyebrow) {
    max-width: 340px;
  }
  .cinema-active .drive-copy small {
    margin-top: 12px;
    max-width: calc(86vw - 150px);
  }
  .cinema-active .drive-copy::before {
    background: none;
  }
}
.drive-poster {
  height: auto;
}

/* Keep the opening promise on two readable lines across screen sizes. */
.opening .copy h1 {
  font-size: clamp(44px, 6.3vw, 100px);
}
@media (max-width: 700px) {
  .opening .copy h1 {
    font-size: clamp(36px, 10.2vw, 60px);
  }
}
.lightning-wake {
  position: fixed;
  inset: 0;
  width: 100%;
  height: 100%;
  pointer-events: none;
  z-index: 39;
}
@media (hover: none), (pointer: coarse), (prefers-reduced-motion: reduce) {
  .lightning-wake {
    display: none;
  }
}

/* How we work: a real sequence, so the steps are numbered and joined by one track. */
.framework .copy {
  width: 100%;
  max-width: 1180px;
}
.framework .copy h2 {
  font-size: var(--type-section);
  line-height: 1.04;
  letter-spacing: -0.045em;
  margin-bottom: 0;
}
.framework-steps {
  --gap: clamp(20px, 2.4vw, 40px);
  position: relative;
  list-style: none;
  padding: 0;
  margin: clamp(40px, 7vh, 72px) 0 0;
  display: grid;
  grid-template-columns: repeat(4, minmax(0, 1fr));
  gap: var(--gap);
}
.framework-steps::before {
  content: "";
  position: absolute;
  left: 22px;
  right: 0;
  top: 22px;
  height: 1px;
  background: linear-gradient(90deg, #d4b5ff99, #9862e855 70%, transparent);
  transform-origin: left;
  transform: scaleX(var(--reveal, 1));
}
.framework-steps li {
  position: relative;
  display: grid;
  align-content: start;
  gap: 6px;
  padding-top: 66px;
  opacity: clamp(0, calc((var(--reveal, 1) - var(--i, 0) * 0.16) * 4), 1);
}
.framework-steps li:nth-child(2) {
  --i: 1;
}
.framework-steps li:nth-child(3) {
  --i: 2;
}
.framework-steps li:nth-child(4) {
  --i: 3;
}
.step-n {
  position: absolute;
  top: 0;
  left: 0;
  display: grid;
  place-items: center;
  width: 44px;
  height: 44px;
  border: 1px solid #c8b1e980;
  border-radius: 50%;
  background: radial-gradient(circle at 40% 35%, #2a1d3d, #120c1d 70%);
  box-shadow: 0 0 22px #9862e833;
  font:
    13px/1 Space,
    Arial,
    sans-serif;
  color: #e3cdff;
}
.framework-steps strong {
  font:
    400 clamp(19px, 1.5vw, 24px) / 1.25 Space,
    Arial,
    sans-serif;
  letter-spacing: -0.02em;
  color: #f7f2fd;
}
.step-line {
  font-size: clamp(14px, 1.05vw, 16px);
  line-height: 1.55;
  color: #d6cce2;
  max-width: 260px;
}
.cinema-active .framework::before {
  background: radial-gradient(ellipse at 30% 55%, #090612b8, transparent 75%);
}
@media (max-width: 700px) {
  .framework .copy h2 {
    font-size: var(--type-section);
  }
  .framework-steps {
    grid-template-columns: 1fr;
    gap: 16px;
    margin-top: 26px;
  }
  .framework-steps::before {
    left: 17px;
    right: auto;
    top: 18px;
    bottom: 18px;
    width: 1px;
    height: auto;
    background: linear-gradient(180deg, #d4b5ff99, #9862e855);
    transform-origin: top;
    transform: scaleY(var(--reveal, 1));
  }
  .framework-steps li {
    padding: 4px 0 0 54px;
    gap: 2px;
    min-height: 36px;
  }
  .step-n {
    width: 36px;
    height: 36px;
    font-size: 12px;
  }
  .framework-steps strong {
    font-size: 17px;
  }
  .step-line {
    font-size: 13px;
    line-height: 1.45;
    max-width: none;
  }
  .cinema-active .framework::before {
    background: linear-gradient(0deg, #090612e6, #090612b3 70%, transparent);
  }
}
html:not(.cinema-active) .framework {
  min-height: 80svh;
}
@media (max-width: 380px) {
  .studio-link {
    font-size: 14px;
  }
}

/* Phones: the ending's copy takes the full width under the returning shell and stops above the
   "Ask our AI" button. */
@media (max-width: 700px) {
  .resolution {
    align-items: flex-end;
    padding-bottom: calc(80px + env(safe-area-inset-bottom));
  }
  .resolution .copy,
  .cinema-active .resolution .copy {
    max-width: 100%;
  }
  .resolution .copy h2 {
    font-size: var(--type-display);
    line-height: 1;
    margin-bottom: 14px;
  }
  .resolution .copy p:not(.eyebrow) {
    font-size: 14px;
    max-width: 320px;
  }
  .studio-link {
    margin-top: 16px;
    min-height: 48px;
    padding: 0 20px 0 22px;
  }
  /* The still poster (WebGL unavailable) takes the live hero's place: centred where the shell's
     core sits, at the shell's size (cinema-world.js: scale 0.58 on tall phones, 0.42 on short). */
  .poster {
    left: 50%;
    top: 23.2%;
    width: auto;
    height: 35.3%;
    transform: translate(-44.2%, -50%);
  }
}
@media (max-width: 700px) and (max-height: 699px) {
  .poster {
    top: 20.8%;
    height: 25.6%;
    transform: translate(-42%, -50%);
  }
}

/* Media failure (WebGL or the film's world unavailable): each work scene's still screenshot takes
   the 3D panel's place, centred in its own band between the heading and the project link, under the
   copy and never over it. */
.cinema-active .fallback-work {
  top: 51%;
  left: 50%;
  right: auto;
  width: auto;
  max-width: min(76vw, 1100px);
  max-height: 44svh;
  transform: translate(-50%, -50%);
}
.cinema-active .work-scene .copy {
  z-index: 1;
}
@media (max-width: 700px) {
  .cinema-active .fallback-work {
    top: 50%;
    max-width: 86vw;
    max-height: 24svh;
  }
}

/* How we work on very short phones (320x568): the block starts below the top bar and ends above
   "Ask our AI", with every step and its line kept. */
@media (max-width: 700px) and (max-height: 600px) {
  .cinema-active .framework {
    padding-top: 70px;
    padding-bottom: calc(74px + env(safe-area-inset-bottom));
  }
  .framework .eyebrow {
    margin-bottom: 10px;
  }
  .framework .copy h2 {
    font-size: 26px;
  }
  .framework-steps {
    gap: 9px;
    margin-top: 14px;
  }
  .framework-steps li {
    padding: 2px 0 0 44px;
    min-height: 30px;
  }
  .framework-steps::before {
    left: 14px;
    top: 15px;
    bottom: 15px;
  }
  .step-n {
    width: 30px;
    height: 30px;
    font-size: 11px;
  }
  .framework-steps strong {
    font-size: 15px;
  }
  .step-line {
    font-size: 12px;
    line-height: 1.35;
  }
}

/* Scene headings take focus after an in-film jump (Skip opening); only keyboard focus shows a ring. */
.scene h1[tabindex="-1"]:focus,
.scene h2[tabindex="-1"]:focus {
  outline: none;
}
.scene h1[tabindex="-1"]:focus-visible,
.scene h2[tabindex="-1"]:focus-visible {
  outline: 2px solid #ead8ff;
  outline-offset: 6px;
}