:root {
  --black: #090909;
  --black-bg: #0c1119;
  --black-soft: #131a24;
  --cream: #e7dfd2;
  --bone: #f3efe6;
  --blue: #1f5cff;
  --text-muted: #b8b8b8;
  --line: rgba(255,255,255,.16);
  --display: "Arial Narrow", "Helvetica Neue Condensed", "Roboto Condensed", Arial, sans-serif;
  --body: "Helvetica Neue", Helvetica, Arial, sans-serif;
}

* { box-sizing: border-box; }
html { scroll-behavior: smooth; }
body {
  margin: 0;
  background: var(--black-bg);
  color: var(--bone);
  font-family: var(--body);
  -webkit-font-smoothing: antialiased;
  text-rendering: optimizeLegibility;
}
img { display: block; width: 100%; height: auto; }
a { color: inherit; text-decoration: none; }

.shell {
  width: min(1400px, calc(100% - 80px));
  margin-inline: auto;
}
.shell-wide {
  width: min(1540px, calc(100% - 56px));
  margin-inline: auto;
}

.site-header {
  position: relative;
  z-index: 20;
  background: var(--black-bg);
  border-bottom: 1px solid rgba(255,255,255,.08);
}
.header-inner {
  min-height: 88px;
  display: flex;
  align-items: center;
  justify-content: flex-end;
  gap: 32px;
}
.main-nav {
  display: flex;
  align-items: center;
  gap: 30px;
  font: 700 12px/1 var(--body);
  letter-spacing: .13em;
}
.main-nav > a:not(.button) { opacity: .82; }
.main-nav > a:not(.button):hover { opacity: 1; }

.button {
  min-width: 172px;
  min-height: 48px;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  padding: 13px 22px;
  border: 1px solid currentColor;
  font-weight: 700;
  font-size: 13px;
  letter-spacing: .03em;
  transition: transform .2s ease, background .2s ease, color .2s ease, border-color .2s ease;
}
.button:hover { transform: translateY(-1px); }
.button-small { min-width: 128px; min-height: 40px; padding: 10px 18px; font-size: 11px; }
.button-outline { color: var(--bone); background: transparent; border-color: rgba(243,239,230,.72); }
.button-outline:hover { border-color: var(--blue); color: var(--blue); }
.button-dark { color: var(--black); border-color: var(--black); background: transparent; }
.button-dark:hover { background: var(--black); color: var(--cream); }

.dark-section { background: var(--black-bg); }
.hero {
  min-height: 850px;
  display: grid;
  place-items: center;
  position: relative;
  overflow: hidden;
}
.hero-inner {
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  min-height: 850px;
}
.hero-logo {
  display: flex;
  align-items: center;
  justify-content: center;
  width: min(1120px, 90vw);
  margin: 0 auto 46px;
}
.hero-logo img {
  display: block;
  width: 100%;
  max-width: none;
  height: auto;
  max-height: none;
  aspect-ratio: auto;
  object-fit: contain;
  object-position: center;
  transform: scaleY(1.08);
  transform-origin: center center;
  filter: none;
  clip-path: none;
}
.hero-lockup {
  position: relative;
  width: min(1100px, 92%);
  margin-top: 0;
}

/* Hero entrance: MAKE comes from camera-left and SOMETHING from camera-right.
   Both pieces use the same locked artwork; clipping simply exposes each word. */
.hero-make-stage {
  position: relative;
  width: 100%;
  overflow: hidden;
}
.hero-make { width: 100%; }
.hero-make-spacer {
  visibility: hidden;
}
.hero-make-piece {
  position: absolute;
  inset: 0;
  display: block;
  pointer-events: none;
  will-change: transform;
}
.hero-make-piece img {
  display: block;
  width: 100%;
  height: auto;
}
.hero-make-left {
  clip-path: inset(0 66% 0 0);
  transform: translateX(-115%);
  animation: nosMakeIn .68s cubic-bezier(.18,.78,.22,1) .45s forwards;
}
.hero-make-right {
  clip-path: inset(0 0 0 34%);
  transform: translateX(115%);
  animation: nosSomethingIn .68s cubic-bezier(.18,.78,.22,1) .45s forwards;
}

/* Same v10 timing, with a 1.00s initial delay added to the entire hero sequence. */
.hero-scribble {
  position: absolute;
  display: block;
  width: 73%;
  left: 28.5%;
  top: 43.5%;
  transform: translateY(-50%) rotate(-1deg);
  clip-path: inset(0 100% 0 0);
  pointer-events: none;
  will-change: clip-path;
  animation: nosScribbleWipe .50s cubic-bezier(.25,.7,.2,1) 1.48s forwards;
}
.hero-scribble img {
  display: block;
  width: 100%;
  height: auto;
  opacity: 1;
}
.hero-anything {
  position: absolute;
  width: 66%; /* scaled to visually match SOMETHING. */
  right: 0%;
  bottom: -20%;
  opacity: 0;
  transform: translateY(12px) rotate(-3deg);
  pointer-events: none;
  will-change: opacity, transform;
  animation: nosAnythingReveal .38s ease-out 2.00s forwards;
}

@keyframes nosMakeIn {
  to { transform: translateX(0); }
}
@keyframes nosSomethingIn {
  to { transform: translateX(0); }
}
@keyframes nosScribbleWipe {
  to { clip-path: inset(0 0 0 0); }
}
@keyframes nosAnythingReveal {
  to { opacity: 1; transform: translateY(0) rotate(-3deg); }
}

@media (prefers-reduced-motion: reduce) {
  .hero-make-left,
  .hero-make-right,
  .hero-scribble,
  .hero-anything {
    animation: none !important;
  }
  .hero-make-left,
  .hero-make-right { transform: translateX(0); }
  .hero-scribble { clip-path: inset(0 0 0 0); }
  .hero-anything { opacity: 1; transform: rotate(-3deg); }
  .own-underline { clip-path: inset(0 0 0 0); animation: none !important; }
}
.scroll-cue {
  position: absolute;
  bottom: 40px;
  font-size: 42px;
  font-weight: 300;
  line-height: 1;
  opacity: .72;
}

.process-section { position: relative; padding-bottom: 0; }
.split-grid {
  position: relative;
  display: grid;
  grid-template-columns: repeat(2, minmax(0,1fr));
  border-top: 1px solid var(--line);
  border-left: 1px solid var(--line);
}
.split-grid::after {
  content: "";
  position: absolute;
  z-index: 5;
  top: 0;
  bottom: 0;
  left: 50%;
  width: 2px;
  background: var(--blue);
  transform: translateX(-1px);
  pointer-events: none;
}
.panel {
  min-width: 0;
  border-right: 1px solid var(--line);
  border-bottom: 1px solid rgba(255,255,255,.34);
  overflow: hidden;
}
.top-pair { border-top-color: rgba(255,255,255,.22); }
.panel-copy {
  min-height: 320px;
  padding: 62px 64px 56px;
  display: flex;
  flex-direction: column;
  align-items: flex-start;
  justify-content: center;
}
.top-copy { min-height: 450px; }
.eyebrow {
  margin: 0 0 24px;
  color: var(--blue);
  font-weight: 800;
  font-size: 36px;
  letter-spacing: .06em;
}
h2, h3 {
  margin: 0;
  font-family: var(--display);
  font-stretch: condensed;
  text-transform: uppercase;
  letter-spacing: -.035em;
}
.top-copy h2 {
  font-size: clamp(44px, 4.1vw, 78px);
  line-height: .93;
  margin-bottom: 28px;
}
.panel-copy h3 {
  font-size: clamp(40px, 3.45vw, 66px);
  line-height: .94;
  margin-bottom: 24px;
}
.panel-copy p:not(.eyebrow) {
  margin: 0 0 30px;
  max-width: 560px;
  color: #d0d0d0;
  font-size: 17px;
  line-height: 1.55;
}
.panel-image {
  margin: 0;
  aspect-ratio: 4 / 3;
  overflow: hidden;
  background: var(--black-soft);
}
.panel-image img {
  width: 100%;
  height: 100%;
  object-fit: cover;
}
.process-pair .process-card {
  display: grid;
  grid-template-columns: minmax(0, 1fr) minmax(0, 1fr);
  grid-template-rows: 1fr;
  min-height: 350px;
  height: 100%;
}
.process-pair {
  border-top: 1px solid rgba(255,255,255,.72);
  align-items: stretch;
}
.process-card .panel-copy {
  min-height: 350px;
  padding: 48px 42px 40px;
  justify-content: flex-start;
  align-items: flex-start;
}

/* Keep the left and right copy blocks on the same vertical grid.
   Each heading begins at the exact same Y position within its row. */
.process-pair .process-card .panel-copy {
  padding-top: 48px;
}
.process-card .panel-image {
  width: 100%;
  height: 100%;
  aspect-ratio: auto;
}
.process-card .panel-image img {
  width: 100%;
  height: 100%;
  object-fit: cover;
}
.process-card .panel-copy h3 {
  font-size: clamp(32px, 2.35vw, 48px);
  line-height: .96;
  margin-bottom: 20px;
}
.process-card .panel-copy p:not(.eyebrow) {
  font-size: clamp(14px, 1vw, 17px);
  line-height: 1.5;
  margin-bottom: 0;
}
.final-build-pair { padding-bottom: 68px; }

.brush-edge {
  position: absolute;
  left: 50%;
  bottom: -58px;
  width: 110vw;
  height: 190px;
  background: var(--cream);
  -webkit-mask: url("assets/15-brush-transition.png") center center / 100% 100% no-repeat;
  mask: url("assets/15-brush-transition.png") center center / 100% 100% no-repeat;
  transform: translateX(-50%);
  pointer-events: none;
  z-index: 3;
}

.ownership-section {
  background: var(--cream);
  color: var(--black);
  min-height: 900px;
  padding: 150px 0 130px;
  text-align: center;
}
.ownership-inner { max-width: 1160px; }
.own-title {
  font-family: var(--display);
  font-size: clamp(120px, 15vw, 240px);
  line-height: .78;
  letter-spacing: -.035em;
  color: var(--black);
}
/* User-supplied baked-angle underline; reveal it as a left-to-right wipe. */
.own-underline {
  width: min(650px, 68vw);
  margin: -30px auto 0;
  overflow: hidden;
  clip-path: inset(0 100% 0 0);
  transform: none;
  will-change: clip-path;
}
.own-underline img {
  display: block;
  width: 100%;
  height: auto;
  /* Crop the transparent padding baked into the PNG so the visible blue stroke
     sits tightly between OWN IT. and the paragraph below. */
  margin-top: -7.7%;
  margin-bottom: -3%;
}
.own-underline.is-visible {
  animation: ownUnderlineReveal .72s cubic-bezier(.22,.75,.22,1) forwards;
}
@keyframes ownUnderlineReveal {
  to { clip-path: inset(0 0 0 0); }
}
.ownership-copy {
  margin: 0 auto;
  max-width: 1040px;
  font-size: clamp(18px, 1.45vw, 24px);
  line-height: 1.55;
  font-weight: 500;
}
.nos-divider {
  display: flex;
  align-items: center;
  justify-content: center;
  margin: 74px auto 52px;
}
.nos-divider span {
  display: block;
  width: 72px;
  height: 5px;
  background: var(--blue);
}
.ownership-punchline {
  margin: 0;
  font-family: var(--display);
  font-size: clamp(34px, 4vw, 64px);
  line-height: 1;
  letter-spacing: -.035em;
  text-transform: uppercase;
}
.ownership-punchline strong { color: var(--blue); font-weight: inherit; }
.bottom-actions {
  display: flex;
  justify-content: center;
  gap: 18px;
  margin-top: 48px;
}
.anchor-section { height: 0; overflow: hidden; }

/* ------------------------------------------------------------
   RESPONSIVE NOS SPLIT
   The Creator / Collaborator architecture NEVER collapses.
   At 1100px and below, each side changes from:
     image | text   /   text | image
   to:
     text           /   text
     image          /   image
   ------------------------------------------------------------ */
@media (max-width: 1100px) {
  .shell { width: min(100% - 48px, 1400px); }
  .shell-wide { width: min(100% - 24px, 1540px); }

  .main-nav { gap: 18px; }
  .main-nav > a:not(.button) { display: none; }

  /* Keep the two-sided NOS composition intact. */
  .split-grid {
    grid-template-columns: repeat(2, minmax(0, 1fr));
  }
  .split-grid::after {
    display: block;
  }

  /* Top Creator / Collaborator blocks already have copy over image. */
  .top-copy {
    min-height: 390px;
    padding: 42px 34px 36px;
  }
  .top-copy h2 {
    font-size: clamp(34px, 4.1vw, 54px);
  }
  .top-copy p:not(.eyebrow) {
    font-size: 15px;
  }

  /* Lower paired rows: copy first, image second on BOTH sides. */
  .process-pair .process-card {
    display: flex;
    flex-direction: column;
    min-height: 0;
    height: auto;
  }
  .process-card.image-first .panel-copy,
  .process-card.copy-first .panel-copy {
    order: 1;
  }
  .process-card.image-first .panel-image,
  .process-card.copy-first .panel-image {
    order: 2;
  }

  /* Matching fixed copy area keeps the left/right images and headings aligned. */
  .process-card .panel-copy {
    width: 100%;
    height: 270px;
    min-height: 270px;
    padding: 34px 32px 28px;
    justify-content: flex-start;
  }
  .process-card .panel-image {
    width: 100%;
    height: auto;
    aspect-ratio: 4 / 3;
  }
  .process-card .panel-copy h3 {
    font-size: clamp(30px, 3.8vw, 44px);
  }
  .process-card .panel-copy p:not(.eyebrow) {
    font-size: 14px;
    line-height: 1.48;
  }

  .final-build-pair { padding-bottom: 60px; }
}

@media (max-width: 700px) {
  .shell { width: calc(100% - 24px); }
  .shell-wide { width: calc(100% - 12px); }

  .header-inner {
    min-height: 70px;
  }
  .button-small {
    min-width: 104px;
    min-height: 38px;
    padding: 9px 14px;
  }

  .hero,
  .hero-inner {
    min-height: 620px;
  }
  .hero-logo {
    width: min(680px, 98vw);
    margin-bottom: 30px;
  }
  .hero-lockup {
    width: 100%;
  }
  .hero-anything {
    bottom: -24%;
    width: 66%;
  }

  /* Never stack Creator over Collaborator on phone. */
  .split-grid {
    grid-template-columns: repeat(2, minmax(0, 1fr));
  }

  .panel-copy {
    padding-left: 18px;
    padding-right: 18px;
  }

  .top-copy {
    min-height: 360px;
    padding: 30px 18px 26px;
  }
  .eyebrow {
    margin-bottom: 16px;
    font-size: 30px;
    letter-spacing: .06em;
  }
  .top-copy h2 {
    font-size: clamp(24px, 6.7vw, 38px);
    line-height: .96;
    margin-bottom: 18px;
  }
  .top-copy p:not(.eyebrow) {
    font-size: 12px;
    line-height: 1.45;
    margin-bottom: 20px;
  }
  .top-copy .button {
    width: 100%;
    min-width: 0;
    min-height: 42px;
    padding: 10px 8px;
    font-size: 11px;
  }

  /* More vertical room for wrapped phone copy, equal on both sides. */
  .process-card .panel-copy {
    height: 305px;
    min-height: 305px;
    padding: 28px 18px 22px;
  }
  .process-card .panel-copy h3 {
    font-size: clamp(24px, 7vw, 34px);
    line-height: .96;
    margin-bottom: 16px;
  }
  .process-card .panel-copy p:not(.eyebrow) {
    font-size: 12px;
    line-height: 1.45;
  }

  /* Each phone image fills its half-width and remains substantial. */
  .process-card .panel-image,
  .top-pair .panel-image {
    aspect-ratio: 4 / 3;
  }

  .final-build-pair {
    padding-bottom: 50px;
  }
  .brush-edge {
    width: 118vw;
    height: 118px;
    bottom: -36px;
  }

  .ownership-section {
    padding: 100px 0 88px;
  }
  .own-title {
    font-size: clamp(92px, 25vw, 150px);
  }
  .own-underline {
    margin: -16px auto 0;
  }
  .ownership-copy br {
    display: none;
  }
  .ownership-copy {
    font-size: 16px;
  }
  .bottom-actions {
    flex-direction: column;
    align-items: center;
  }
  .bottom-actions .button {
    width: min(320px, 100%);
  }
}

@media (max-width: 430px) {
  .shell-wide { width: 100%; }

  .top-copy {
    min-height: 350px;
    padding: 26px 14px 22px;
  }
  .top-copy h2 {
    font-size: clamp(22px, 6.8vw, 30px);
  }
  .top-copy p:not(.eyebrow) {
    font-size: 11px;
  }

  .process-card .panel-copy {
    height: 330px;
    min-height: 330px;
    padding: 26px 14px 20px;
  }
  .process-card .panel-copy h3 {
    font-size: clamp(22px, 7.1vw, 29px);
  }
  .process-card .panel-copy p:not(.eyebrow) {
    font-size: 11px;
    line-height: 1.47;
  }

  .process-pair {
    border-top-color: rgba(255,255,255,.78);
  }
}

/* ============================================================
   V7 RESPONSIVE REFINEMENTS
   1) Reserve real layout space beneath the absolutely-positioned
      ANYTHING artwork so it cannot collide with the top split blocks.
   2) Keep the two top panels equal-height and their CTA buttons on the
      same baseline. JS synchronizes heading/body text row heights.
   ============================================================ */

.hero-lockup {
  /* ANYTHING extends below the lockup because it is absolutely positioned.
     This margin reserves that overflow plus a stable visual breathing gap. */
  margin-bottom: clamp(115px, 8vw, 155px);
}

.top-pair .panel {
  display: flex;
  flex-direction: column;
}

.top-pair .top-copy {
  flex: 1 1 auto;
  width: 100%;
}

.top-pair .top-copy .button {
  /* Once heading/body rows are synchronized, this also protects CTA alignment
     if tiny browser font-metric differences remain. */
  margin-top: auto;
}

.top-pair .panel-image {
  flex: 0 0 auto;
  width: 100%;
}

@media (max-width: 1100px) {
  .hero-lockup {
    margin-bottom: clamp(100px, 10vw, 135px);
  }
}

@media (max-width: 700px) {
  .hero-lockup {
    margin-bottom: 88px;
  }

  /* Equal fixed copy shells on phone/tablet; synchronized h2/body rows inside
     keep the paragraph, CTA and image starts aligned left-to-right. */
  .top-pair .top-copy {
    height: auto;
    min-height: 390px;
  }
}

@media (max-width: 430px) {
  .hero-lockup {
    margin-bottom: 78px;
  }

  .top-pair .top-copy {
    min-height: 370px;
  }
}

/* ============================================================
   V17 — PRE-TOUR STATE
   Until SEE HOW is clicked, the page ends at the hero. This keeps
   everything below the CTA completely blank/absent rather than
   exposing the process by ordinary scrolling.
   ============================================================ */
body.guided-pending .process-section,
body.guided-pending .ownership-section,
body.guided-pending .anchor-section {
  display: none;
}

/* ============================================================
   V17 — GUIDED "SEE HOW" SEQUENCE
   The static layout remains unchanged. The guided sequence is opt-in:
   hero finishes first, then SEE HOW appears. On click, Creator and
   Collaborator panels reveal in an alternating, accelerating sequence.
   ============================================================ */

.see-how-button {
  position: relative;
  z-index: 8;
  flex: 0 0 auto;
  margin: 0 auto;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 10px;
  min-width: 154px;
  min-height: 46px;
  padding: 11px 18px 10px;
  border: 1px solid rgba(243,239,230,.72);
  background: rgba(12,17,25,.18);
  color: var(--bone);
  font: 800 12px/1 var(--body);
  letter-spacing: .14em;
  cursor: pointer;
  opacity: 0;
  transform: translateY(10px);
  animation: nosSeeHowIn .42s ease-out 2.48s forwards;
  transition: border-color .2s ease, color .2s ease, background .2s ease;
}
.see-how-button:hover,
.see-how-button:focus-visible {
  border-color: var(--blue);
  color: var(--blue);
  background: rgba(31,92,255,.06);
  outline: none;
}
.see-how-button:disabled {
  cursor: default;
  opacity: 1 !important;
  border-color: var(--blue);
  color: var(--blue);
  background: rgba(31,92,255,.08);
}

.see-how-button:disabled .see-how-arrow {
  animation: nosTourArrowPulse .46s ease-in-out infinite alternate;
}

@keyframes nosTourArrowPulse {
  from { transform: translateY(-1px); }
  to { transform: translateY(4px); }
}
.see-how-arrow {
  display: inline-block;
  font-size: 17px;
  line-height: .8;
  transform: translateY(-1px);
}

@keyframes nosSeeHowIn {
  to { opacity: 1; transform: translateY(0); }
}

/* These states exist only while the user-triggered guided sequence runs.
   Outside the tour, the page remains exactly as it was in v15. */
.tour-prepared .tour-step {
  opacity: 0;
  will-change: opacity, transform;
  transition-property: opacity, transform;
  transition-duration: var(--tour-duration, 520ms);
  transition-timing-function: cubic-bezier(.18,.76,.24,1);
}
.tour-prepared .tour-step.tour-left {
  transform: translate3d(-58px, 0, 0);
}
.tour-prepared .tour-step.tour-right {
  transform: translate3d(58px, 0, 0);
}
.tour-prepared .tour-step.tour-visible {
  opacity: 1;
  transform: translate3d(0, 0, 0);
}

/* Final OWN IT impact. This does not alter the resting layout. */
.ownership-section.tour-impact .own-title {
  animation: nosOwnImpact .46s cubic-bezier(.2,.82,.2,1) both;
}
@keyframes nosOwnImpact {
  0% { opacity: .15; transform: scale(.84); }
  68% { opacity: 1; transform: scale(1.035); }
  100% { opacity: 1; transform: scale(1); }
}

/* While the guided sequence is active, disable native smooth scrolling.
   The script performs cancellable smooth moves so wheel/touch input can
   immediately take control without fighting the page. */
html.tour-scrolling {
  scroll-behavior: auto;
}

@media (max-width: 700px) {
  .see-how-button {
    min-width: 138px;
    min-height: 42px;
    font-size: 11px;
  }
  .tour-prepared .tour-step.tour-left {
    transform: translate3d(-34px, 0, 0);
  }
  .tour-prepared .tour-step.tour-right {
    transform: translate3d(34px, 0, 0);
  }
}

@media (prefers-reduced-motion: reduce) {
  .see-how-button {
    opacity: 1;
    transform: none;
    animation: none !important;
  }
  .tour-prepared .tour-step,
  .tour-prepared .tour-step.tour-left,
  .tour-prepared .tour-step.tour-right,
  .tour-prepared .tour-step.tour-visible {
    opacity: 1 !important;
    transform: none !important;
    transition: none !important;
  }
  .ownership-section.tour-impact .own-title {
    animation: none !important;
  }
}


/* ============================================================
   V19 — FLUID CREATOR / COLLABORATOR LABELS
   Scale continuously with viewport width so both labels remain
   readable and fit their 50% columns on phones through desktop.
   ============================================================ */
.eyebrow {
  font-size: clamp(14px, 4.4vw, 36px);
}


/* ============================================================
   V20 — NARROW-SCREEN TOUR COMPOSITING FIX
   On very narrow viewports, do not translate entire 50% panels
   beyond the viewport edge. Reveal each side with a directional
   clip instead. This preserves the left/right animation while
   avoiding the mobile/browser compositing glitch that left the
   panels visually clipped until a manual scroll forced repaint.
   ============================================================ */

html,
body {
  overflow-x: hidden;
}
@supports (overflow: clip) {
  html,
  body {
    overflow-x: clip;
  }
}

@media (max-width: 760px) {
  .process-section {
    overflow-x: clip;
  }

  .tour-prepared .tour-step {
    transform: none !important;
    transition-property: opacity, clip-path;
    will-change: opacity, clip-path;
  }

  /* Creator / left side reveals from the outside-left toward center. */
  .tour-prepared .tour-step.tour-left {
    transform: none !important;
    clip-path: inset(0 100% 0 0);
  }

  /* Collaborator / right side reveals from the outside-right toward center. */
  .tour-prepared .tour-step.tour-right {
    transform: none !important;
    clip-path: inset(0 0 0 100%);
  }

  .tour-prepared .tour-step.tour-visible {
    transform: none !important;
    clip-path: inset(0 0 0 0);
    opacity: 1;
  }

  .tour-prepared .tour-step.tour-settled {
    will-change: auto;
    transform: none !important;
    clip-path: none;
  }
}


/* ============================================================
   V21 — COMPACT NARROW-SCREEN COPY / IMAGE SPACING
   Remove the large fixed black copy shells on phone/narrow widths.
   JS equalizes each left/right pair to the actual taller text block,
   so image tops still line up without leaving unnecessary dead space.
   ============================================================ */
@media (max-width: 760px) {
  .top-pair .top-copy {
    min-height: 0 !important;
    height: auto !important;
  }

  .process-card .panel-copy {
    height: auto;
    min-height: 0;
    padding-top: 24px;
    padding-bottom: 18px;
  }
}

@media (max-width: 430px) {
  .process-card .panel-copy {
    padding-top: 22px;
    padding-bottom: 16px;
  }
}


/* ============================================================
   V22 — NARROW-SCREEN PAIR ALIGNMENT
   V21 compacted the copy correctly, but its !important auto-heights
   prevented JS from equalizing the paired copy boxes. Removing that
   conflict lets both image tops align again. These rules also guarantee
   identical image geometry on both sides of every process row.
   ============================================================ */
@media (max-width: 760px) {
  .process-pair {
    align-items: stretch;
  }

  .process-pair .process-card {
    align-self: stretch;
  }

  .process-pair .process-card .panel-image {
    flex: 0 0 auto;
    width: 100%;
    aspect-ratio: 4 / 3;
    height: auto;
  }

  .process-pair .process-card .panel-image img {
    display: block;
    width: 100%;
    height: 100%;
    object-fit: cover;
  }
}


/* ============================================================
   V23 — SHORT-LAPTOP HERO FIT
   Phone layout is intentionally untouched.
   On desktop/laptop widths with limited vertical space, scale the
   hero artwork from viewport HEIGHT as well as width so the complete
   opening — logo, MAKE/SOMETHING/ANYTHING, and SEE HOW — remains
   visible without requiring an initial scroll.
   ============================================================ */
@media (min-width: 761px) and (max-height: 900px) {
  .hero,
  .hero-inner {
    min-height: calc(100svh - 88px);
  }

  .hero-inner {
    padding-top: clamp(12px, 2vh, 20px);
    padding-bottom: clamp(14px, 2.5vh, 24px);
  }

  .hero-logo {
    width: min(1120px, 90vw, 88svh);
    margin-bottom: clamp(14px, 2.2vh, 24px);
  }

  .hero-lockup {
    width: min(1100px, 92%, 92svh);
    margin-bottom: clamp(42px, 6vh, 64px);
  }
}


/* ============================================================
   V24 — OWN IT POP
   Replace the prior subtle "impact" motion with a deliberate scale pop:
   50% -> 130% -> 100% in roughly half a second.
   ============================================================ */
.ownership-section.tour-impact .own-title {
  transform-origin: 50% 50%;
  animation: nosOwnPopV24 500ms cubic-bezier(.22,.78,.22,1) both;
}

@keyframes nosOwnPopV24 {
  0% {
    opacity: 1;
    transform: scale(.50);
  }
  62% {
    opacity: 1;
    transform: scale(1.30);
  }
  100% {
    opacity: 1;
    transform: scale(1);
  }
}

@media (prefers-reduced-motion: reduce) {
  .ownership-section.tour-impact .own-title {
    animation: none !important;
    transform: none !important;
  }
}


/* ============================================================
   V25 — RESTORE / STRENGTHEN SHORT-LAPTOP VERTICAL FIT
   Phone layout remains untouched. On desktop/laptop widths the hero
   now has a hard viewport-height envelope, and BOTH major hero graphics
   are sized from the available vertical space so SEE HOW remains visible.
   ============================================================ */
@media (min-width: 761px) and (max-height: 900px) {
  .hero {
    min-height: 0 !important;
    height: calc(100vh - 88px);
    height: calc(100dvh - 88px);
  }

  .hero-inner {
    min-height: 0 !important;
    height: 100%;
    max-height: calc(100vh - 88px);
    max-height: calc(100dvh - 88px);
    box-sizing: border-box;
    justify-content: center;
    padding-top: clamp(8px, 1.6vh, 16px);
    padding-bottom: clamp(10px, 2vh, 20px);
  }

  .hero-logo {
    width: min(1120px, 90vw, calc((100vh - 88px) * .88));
    width: min(1120px, 90vw, calc((100dvh - 88px) * .88));
    margin-bottom: clamp(8px, 1.7vh, 18px);
  }

  .hero-lockup {
    width: min(1100px, 92%, calc((100vh - 88px) * .92));
    width: min(1100px, 92%, calc((100dvh - 88px) * .92));
    margin-bottom: clamp(26px, 4vh, 46px);
  }
}

/* The OWN IT scale motion is driven in JS in V25 so it can use two
   genuinely smooth ease-in/ease-out segments. Disable the older CSS pop. */
.ownership-section.tour-impact .own-title {
  animation: none !important;
  transform-origin: 50% 50%;
}


/* ============================================================
   V26 — OWN IT REVEAL
   OWN IT is completely hidden until its reveal begins.
   The existing 1-second pop timing is preserved, but the scale
   now begins at 0% instead of 50%.
   ============================================================ */
.own-title {
  opacity: 0;
  transform: scale(0);
  transform-origin: 50% 50%;
}

.own-title.is-visible {
  opacity: 1;
  transform: scale(1);
}

/* V25/V24 legacy impact rules must not make the title visible early. */
.ownership-section.tour-impact .own-title {
  animation: none !important;
  transform-origin: 50% 50%;
}

@media (prefers-reduced-motion: reduce) {
  .own-title {
    opacity: 0;
    transform: scale(0);
  }

  .own-title.is-visible {
    opacity: 1;
    transform: none;
  }
}


/* ============================================================
   V27 — SHORT-LAPTOP HERO BREATHING ROOM
   Keep SEE HOW comfortably inside the viewport by reclaiming a little
   vertical space above it. Phone layout remains untouched.
   ============================================================ */
@media (min-width: 761px) and (max-height: 900px) {
  .hero-inner {
    justify-content: flex-start;
    padding-top: clamp(6px, 1.2vh, 12px);
    padding-bottom: clamp(16px, 2.4vh, 24px);
  }

  /* Slightly reduce the empty black gap below the NOS logo. */
  .hero-logo {
    margin-bottom: clamp(2px, .7vh, 8px) !important;
  }

  /* Bring the MAKE / SOMETHING / ANYTHING lockup upward a touch and
     reserve a safer bottom margin for SEE HOW. */
  .hero-lockup {
    margin-bottom: clamp(18px, 2.8vh, 30px) !important;
  }

  /* Keep the button clearly inside the first-screen frame. */
  .see-how-wrap {
    margin-top: 0 !important;
    padding-bottom: clamp(10px, 1.8vh, 18px);
    flex: 0 0 auto;
  }

  .see-how {
    margin-bottom: 0 !important;
  }
}

/* Extra protection for very short laptop/browser windows. */
@media (min-width: 761px) and (max-height: 760px) {
  .hero-logo {
    width: min(980px, 86vw, calc((100dvh - 88px) * .78));
  }

  .hero-lockup {
    width: min(1000px, 88%, calc((100dvh - 88px) * .84));
    margin-bottom: clamp(12px, 2vh, 20px) !important;
  }

  .see-how-wrap {
    padding-bottom: 10px;
  }
}


/* ============================================================
   V28 — KEEP SEE HOW FULLY INSIDE SHORT LAPTOP VIEWPORT
   Desktop/laptop only. Phone behavior remains untouched.
   Reclaims vertical space primarily by tightening the gap beneath
   the NOS logo and slightly reducing the hero artwork at short heights.
   ============================================================ */
@media (min-width: 761px) and (max-height: 900px) {
  .hero {
    height: auto !important;
    min-height: calc(100dvh - 76px) !important;
  }

  .hero-inner {
    height: auto !important;
    min-height: calc(100dvh - 76px) !important;
    max-height: none !important;
    justify-content: flex-start !important;
    padding-top: 8px !important;
    padding-bottom: 28px !important;
  }

  /* Preserve the big logo, but make its vertical footprint a little leaner. */
  .hero-logo {
    width: min(1040px, 86vw, 72dvh) !important;
    margin-top: 0 !important;
    margin-bottom: -8px !important;
  }

  /* Pull the hero statement upward and reduce the space it reserves below. */
  .hero-lockup {
    width: min(1010px, 88vw, 76dvh) !important;
    margin-top: 0 !important;
    margin-bottom: 10px !important;
  }

  .see-how-wrap {
    margin-top: 0 !important;
    padding-top: 0 !important;
    padding-bottom: 18px !important;
  }
}

/* More aggressive only when the browser viewport is genuinely short. */
@media (min-width: 761px) and (max-height: 780px) {
  .hero-inner {
    padding-top: 4px !important;
    padding-bottom: 20px !important;
  }

  .hero-logo {
    width: min(930px, 82vw, 66dvh) !important;
    margin-bottom: -12px !important;
  }

  .hero-lockup {
    width: min(920px, 84vw, 70dvh) !important;
    margin-bottom: 6px !important;
  }

  .see-how-wrap {
    padding-bottom: 14px !important;
  }
}


/* ============================================================
   V29 — CONTINUOUS LAPTOP HERO SCALING
   Removes the visible size "jump" caused by the old 900px / 780px
   height breakpoints. From tablet/laptop width upward, hero sizing
   now follows one continuous viewport-height formula.
   Phone rules (<=760px) remain untouched.
   ============================================================ */
@media (min-width: 761px) {
  .hero {
    height: auto !important;
    min-height: calc(100dvh - 76px) !important;
  }

  .hero-inner {
    height: auto !important;
    min-height: calc(100dvh - 76px) !important;
    max-height: none !important;
    justify-content: flex-start !important;
    padding-top: clamp(6px, 1.1dvh, 16px) !important;
    padding-bottom: clamp(18px, 2.5dvh, 30px) !important;
  }

  /*
    These clamps scale continuously with browser HEIGHT.
    There is no threshold where a new size suddenly takes over.
  */
  .hero-logo {
    width: min(1040px, 86vw, clamp(560px, 76dvh, 980px)) !important;
    margin-top: 0 !important;
    margin-bottom: clamp(-8px, -0.5dvh, 0px) !important;
  }

  .hero-lockup {
    width: min(1010px, 88vw, clamp(580px, 80dvh, 1000px)) !important;
    margin-top: 0 !important;
    margin-bottom: clamp(8px, 1.2dvh, 16px) !important;
  }

  .see-how-wrap {
    margin-top: 0 !important;
    padding-top: 0 !important;
    padding-bottom: clamp(14px, 2dvh, 22px) !important;
  }

  .see-how {
    margin-bottom: 0 !important;
  }
}


/* ============================================================
   V30 — SMOOTH TABLET/LAPTOP HERO + RESERVED ANYTHING SPACE
   Fixes the second size jump around the old 760px handoff and
   prevents SEE HOW from overlapping the absolutely-positioned
   ANYTHING artwork.

   <=700px keeps the existing phone design unchanged.
   >=701px uses one continuous sizing system.
   ============================================================ */
@media (min-width: 701px) {
  .hero {
    height: auto !important;
    min-height: calc(100dvh - 76px) !important;
  }

  .hero-inner {
    height: auto !important;
    min-height: calc(100dvh - 76px) !important;
    max-height: none !important;
    justify-content: flex-start !important;
    padding-top: clamp(6px, 1.1dvh, 16px) !important;
    padding-bottom: clamp(18px, 2.4dvh, 30px) !important;
  }

  /*
    Both graphics now scale continuously across the former 760px
    breakpoint. Width and height constraints work together so there
    is no discrete jump as the browser is resized.
  */
  .hero-logo {
    width: min(1040px, 88vw, clamp(500px, 74dvh, 980px)) !important;
    margin-top: 0 !important;
    margin-bottom: clamp(-6px, -0.4dvh, 0px) !important;
  }

  .hero-lockup {
    width: min(1010px, 92vw, clamp(520px, 78dvh, 1000px)) !important;
    margin-top: 0 !important;

    /*
      ANYTHING sits partly below the lockup because it is absolute.
      Reserve real layout space for that visual overhang so SEE HOW
      can never sit underneath it.
    */
    margin-bottom: clamp(72px, 8.5dvh, 104px) !important;
  }

  .see-how-wrap {
    position: relative;
    z-index: 12;
    margin-top: 0 !important;
    padding-top: 0 !important;
    padding-bottom: clamp(14px, 2dvh, 22px) !important;
    flex: 0 0 auto;
  }

  .see-how-button {
    position: relative;
    z-index: 13;
  }
}


/* ============================================================
   V32 — PERSISTENT CREATOR / COLLABORATOR STORY LABELS
   Everything else remains locked.
   ============================================================ */
.side-story-labels {
  position: fixed;
  inset: 0;
  z-index: 80;
  pointer-events: none;
  visibility: hidden;
  opacity: 0;
}

.side-story-labels.is-active {
  visibility: visible;
  opacity: 1;
}

.side-story-label {
  position: fixed;
  top: clamp(82px, 10dvh, 112px);
  font-family: var(--display);
  font-size: clamp(14px, 4.4vw, 36px);
  line-height: .9;
  letter-spacing: .06em;
  color: var(--blue);
  text-transform: uppercase;
  white-space: nowrap;
  opacity: 0;
  will-change: transform, opacity;
  text-shadow: 0 2px 12px rgba(0,0,0,.45);
}

.side-story-label-left {
  left: 25%;
  transform: translateX(calc(-50% - 55vw)) rotate(-4deg) scale(2);
}

.side-story-label-right {
  left: 75%;
  transform: translateX(calc(-50% + 55vw)) rotate(4deg) scale(2);
}

.side-story-labels.is-entering .side-story-label-left {
  animation: nosCreatorLabelIn 700ms cubic-bezier(.16,.84,.22,1) forwards;
}

.side-story-labels.is-entering .side-story-label-right {
  animation: nosCollaboratorLabelIn 700ms cubic-bezier(.16,.84,.22,1) forwards;
}

.side-story-labels.is-settled .side-story-label-left {
  opacity: 1;
  transform: translateX(-50%) rotate(-4deg) scale(1.25);
}

.side-story-labels.is-settled .side-story-label-right {
  opacity: 1;
  transform: translateX(-50%) rotate(4deg) scale(1.25);
}

.side-story-labels.is-exiting {
  transition: opacity 350ms ease-in-out;
  opacity: 0;
}

@keyframes nosCreatorLabelIn {
  0% {
    opacity: 0;
    transform: translateX(calc(-50% - 55vw)) rotate(-4deg) scale(2);
  }
  100% {
    opacity: 1;
    transform: translateX(-50%) rotate(-4deg) scale(1.25);
  }
}

@keyframes nosCollaboratorLabelIn {
  0% {
    opacity: 0;
    transform: translateX(calc(-50% + 55vw)) rotate(4deg) scale(2);
  }
  100% {
    opacity: 1;
    transform: translateX(-50%) rotate(4deg) scale(1.25);
  }
}

/* During the guided sequence the floating labels replace the in-block
   CREATORS / COLLABORATORS eyebrows so the names are not duplicated. */
html.tour-scrolling .top-pair .eyebrow {
  opacity: 0;
}

/* Preserve the existing responsive behavior. The same font scale is used
   everywhere; scale(1.25) is therefore always relative to the current viewport. */
@media (max-width: 700px) {
  .side-story-label {
    top: 78px;
  }
}

@media (prefers-reduced-motion: reduce) {
  .side-story-labels.is-entering .side-story-label-left,
  .side-story-labels.is-entering .side-story-label-right {
    animation: none !important;
  }

  .side-story-labels.is-active .side-story-label-left {
    opacity: 1;
    transform: translateX(-50%) rotate(-4deg) scale(1.25);
  }

  .side-story-labels.is-active .side-story-label-right {
    opacity: 1;
    transform: translateX(-50%) rotate(4deg) scale(1.25);
  }
}


/* ============================================================
   V33 — SIDE STORY LABEL REFINEMENT
   Everything else remains locked.
   - No rotation.
   - Labels land in the reserved eyebrow space directly above the
     first Creator / Collaborator titles.
   - Blue fill with bone outline.
   - Existing responsive font sizing and 200% -> 125% scale retained.
   ============================================================ */
.side-story-label {
  top: var(--story-label-y, 30vh) !important;
  color: var(--blue);
  -webkit-text-stroke: 1px var(--cream);
  paint-order: stroke fill;
  text-shadow: 0 2px 12px rgba(0,0,0,.38);
}

.side-story-label-left {
  left: var(--story-label-left-x, 25%) !important;
  transform: translateX(calc(-50% - 55vw)) scale(2) !important;
}

.side-story-label-right {
  left: var(--story-label-right-x, 75%) !important;
  transform: translateX(calc(-50% + 55vw)) scale(2) !important;
}

.side-story-labels.is-settled .side-story-label-left,
.side-story-labels.is-settled .side-story-label-right {
  opacity: 1;
  transform: translateX(-50%) scale(1.25) !important;
}

@keyframes nosCreatorLabelInV33 {
  0% {
    opacity: 0;
    transform: translateX(calc(-50% - 55vw)) scale(2);
  }
  100% {
    opacity: 1;
    transform: translateX(-50%) scale(1.25);
  }
}

@keyframes nosCollaboratorLabelInV33 {
  0% {
    opacity: 0;
    transform: translateX(calc(-50% + 55vw)) scale(2);
  }
  100% {
    opacity: 1;
    transform: translateX(-50%) scale(1.25);
  }
}

.side-story-labels.is-entering .side-story-label-left {
  animation: nosCreatorLabelInV33 700ms cubic-bezier(.16,.84,.22,1) forwards !important;
}

.side-story-labels.is-entering .side-story-label-right {
  animation: nosCollaboratorLabelInV33 700ms cubic-bezier(.16,.84,.22,1) forwards !important;
}

@media (max-width: 700px) {
  .side-story-label {
    -webkit-text-stroke-width: .75px;
  }
}

@media (prefers-reduced-motion: reduce) {
  .side-story-labels.is-active .side-story-label-left,
  .side-story-labels.is-active .side-story-label-right {
    opacity: 1;
    transform: translateX(-50%) scale(1.25) !important;
  }
}


/* ============================================================
   V34 — CREATOR / COLLABORATOR LABEL LANDING
   Everything else remains locked.
   - Both labels now visibly travel in from completely off-screen.
   - They land inside the reserved black eyebrow space above the first titles.
   - Phone labels are smaller so COLLABORATORS fits its 50% column.
   ============================================================ */

.side-story-label {
  /* Desktop/tablet remains responsive and proportional to the current layout. */
  font-size: clamp(15px, 3.5vw, 34px) !important;
  max-width: 46vw;
  text-align: center;
  transform-origin: 50% 50%;
}

/* Start well beyond the browser edges so the entrance is unmistakably a slide. */
.side-story-label-left {
  transform: translateX(calc(-50% - 115vw)) scale(2) !important;
}

.side-story-label-right {
  transform: translateX(calc(-50% + 115vw)) scale(2) !important;
}

@keyframes nosCreatorLabelInV34 {
  0% {
    opacity: 1;
    transform: translateX(calc(-50% - 115vw)) scale(2);
  }
  100% {
    opacity: 1;
    transform: translateX(-50%) scale(1.25);
  }
}

@keyframes nosCollaboratorLabelInV34 {
  0% {
    opacity: 1;
    transform: translateX(calc(-50% + 115vw)) scale(2);
  }
  100% {
    opacity: 1;
    transform: translateX(-50%) scale(1.25);
  }
}

.side-story-labels.is-entering .side-story-label-left {
  animation: nosCreatorLabelInV34 780ms cubic-bezier(.18,.82,.22,1) forwards !important;
}

.side-story-labels.is-entering .side-story-label-right {
  animation: nosCollaboratorLabelInV34 780ms cubic-bezier(.18,.82,.22,1) forwards !important;
}

/* Narrow phones: keep the persistent labels fully inside each 50% block.
   The 1.10 final scale is relative to this responsive font size. */
@media (max-width: 700px) {
  .side-story-label {
    font-size: clamp(10px, 3.2vw, 15px) !important;
    letter-spacing: .035em !important;
    max-width: 44vw;
    -webkit-text-stroke-width: .65px;
  }

  .side-story-labels.is-settled .side-story-label-left,
  .side-story-labels.is-settled .side-story-label-right {
    transform: translateX(-50%) scale(1.10) !important;
  }

  @keyframes nosCreatorLabelInV34Phone {
    0% {
      opacity: 1;
      transform: translateX(calc(-50% - 125vw)) scale(1.65);
    }
    100% {
      opacity: 1;
      transform: translateX(-50%) scale(1.10);
    }
  }

  @keyframes nosCollaboratorLabelInV34Phone {
    0% {
      opacity: 1;
      transform: translateX(calc(-50% + 125vw)) scale(1.65);
    }
    100% {
      opacity: 1;
      transform: translateX(-50%) scale(1.10);
    }
  }

  .side-story-labels.is-entering .side-story-label-left {
    animation: nosCreatorLabelInV34Phone 780ms cubic-bezier(.18,.82,.22,1) forwards !important;
  }

  .side-story-labels.is-entering .side-story-label-right {
    animation: nosCollaboratorLabelInV34Phone 780ms cubic-bezier(.18,.82,.22,1) forwards !important;
  }
}


/* ============================================================
   V36 — ROBUST SIDE LABELS
   Based on V34 to remove the V35 iPhone regression.
   Everything unrelated remains locked.

   The fixed outer labels ONLY control final position.
   The inner spans perform the off-screen slide animation.
   This prevents transform-priority conflicts and is Safari-safe.
   ============================================================ */

.side-story-label {
  /* Final responsive size. Desktop approximates the requested enlarged label. */
  font-size: clamp(18px, 5.2vw, 45px) !important;
  line-height: .9 !important;
  max-width: 47vw;
  text-align: center;
  overflow: visible;
}

/* Outer wrappers stay centered over their respective blocks.
   No scale or entrance motion is applied to the wrapper itself. */
.side-story-label-left,
.side-story-label-right,
.side-story-labels.is-settled .side-story-label-left,
.side-story-labels.is-settled .side-story-label-right {
  transform: translateX(-50%) !important;
  opacity: 1;
}

/* Disable all earlier outer-element entrance animations. */
.side-story-labels.is-entering .side-story-label-left,
.side-story-labels.is-entering .side-story-label-right {
  animation: none !important;
}

.side-story-label > span {
  display: inline-block;
  white-space: nowrap;
  color: var(--blue);
  -webkit-text-stroke: 1px var(--cream);
  paint-order: stroke fill;
  text-shadow: 0 2px 12px rgba(0,0,0,.38);
  transform: translate3d(0,0,0) scale(1);
  will-change: transform;
}

/* The words themselves now genuinely travel from beyond the viewport edge. */
.side-story-labels.is-entering .side-story-label-left > span {
  animation: nosCreatorWordSlideV36 920ms cubic-bezier(.18,.82,.22,1) forwards;
}

.side-story-labels.is-entering .side-story-label-right > span {
  animation: nosCollaboratorWordSlideV36 920ms cubic-bezier(.18,.82,.22,1) forwards;
}

@keyframes nosCreatorWordSlideV36 {
  0% {
    transform: translate3d(-120vw,0,0) scale(1.60);
  }
  100% {
    transform: translate3d(0,0,0) scale(1);
  }
}

@keyframes nosCollaboratorWordSlideV36 {
  0% {
    transform: translate3d(120vw,0,0) scale(1.60);
  }
  100% {
    transform: translate3d(0,0,0) scale(1);
  }
}

/* Phone: final labels are deliberately smaller so COLLABORATORS stays
   entirely inside the right 50% block while retaining the same visual role. */
@media (max-width: 700px) {
  .side-story-label {
    font-size: clamp(10px, 3.3vw, 14px) !important;
    letter-spacing: .025em !important;
    max-width: 44vw;
  }

  .side-story-label > span {
    -webkit-text-stroke-width: .65px;
  }

  @keyframes nosCreatorWordSlideV36 {
    0% {
      transform: translate3d(-125vw,0,0) scale(1.45);
    }
    100% {
      transform: translate3d(0,0,0) scale(1);
    }
  }

  @keyframes nosCollaboratorWordSlideV36 {
    0% {
      transform: translate3d(125vw,0,0) scale(1.45);
    }
    100% {
      transform: translate3d(0,0,0) scale(1);
    }
  }
}

@media (prefers-reduced-motion: reduce) {
  .side-story-labels.is-entering .side-story-label-left > span,
  .side-story-labels.is-entering .side-story-label-right > span {
    animation: none !important;
  }
}


/* ============================================================
   V37 — WIDE-LAYOUT STORY LABEL TRACKING
   Everything else remains locked.
   Narrow/vertical behavior is unchanged.

   On wide screens, each process card is image | text / text | image.
   The persistent CREATORS / COLLABORATORS labels now track the actual
   text columns instead of staying centered over the full half-screen.
   ============================================================ */

.side-story-label {
  transition: left 260ms ease, top 260ms ease;
}

/* Wide landscape only: make the labels small enough to live completely
   inside the black padding band above each H3 title. */
@media (min-width: 1101px) {
  .side-story-label {
    font-size: clamp(24px, 2.2vw, 32px) !important;
    max-width: 23vw;
    letter-spacing: .045em !important;
  }
}


/* ============================================================
   V38 — LABEL CLEANUP
   Everything else remains locked.
   - Remove bone outline from both persistent labels.
   - On wide layouts, align COLLABORATORS left edge with the
     right-side block title text.
   ============================================================ */

.side-story-label > span {
  -webkit-text-stroke: 0 !important;
  text-shadow: none !important;
}

@media (min-width: 1101px) {
  .side-story-label-right,
  .side-story-labels.is-settled .side-story-label-right {
    transform: none !important;
  }
}


/* ============================================================
   V39 — STRUCTURAL CREATOR / COLLABORATOR BAND
   Replaces the moving fixed overlay with a real layout band.
   Everything else remains locked.
   ============================================================ */

/* The dedicated band is now the visible side label, so preserve the
   original top-block spacing but hide the duplicate eyebrow words. */
.top-pair .eyebrow {
  visibility: hidden !important;
}

/* Real document-flow band between the opening pair and lower story rows. */
.story-band {
  position: sticky;
  top: 0;
  z-index: 35;
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  min-height: clamp(72px, 6.8vw, 96px);
  background: var(--black-bg);
  border-left: 1px solid var(--line);
  border-right: 1px solid var(--line);
  border-bottom: 1px solid rgba(255,255,255,.72);
  overflow: hidden;
}

/* Continue the existing electric-blue center spine through the label band. */
.story-band::after {
  content: "";
  position: absolute;
  z-index: 3;
  top: 0;
  bottom: 0;
  left: 50%;
  width: 2px;
  background: var(--blue);
  transform: translateX(-1px);
  pointer-events: none;
}

.story-band-cell {
  min-width: 0;
  display: flex;
  align-items: center;
  justify-content: center;
  overflow: hidden;
}

.story-band-label {
  display: inline-block;
  color: var(--blue);
  font-family: var(--display);
  font-size: clamp(32px, 4vw, 58px);
  line-height: .9;
  letter-spacing: .045em;
  white-space: nowrap;
  text-transform: uppercase;
  opacity: 0;
  will-change: transform, opacity;
}

.story-band-label-left {
  transform: translate3d(-120vw, 0, 0) scale(1.45);
}

.story-band-label-right {
  transform: translate3d(120vw, 0, 0) scale(1.45);
}

.story-band.is-visible .story-band-label-left {
  animation: nosStoryBandLeftIn 820ms cubic-bezier(.18,.82,.22,1) forwards;
}

.story-band.is-visible .story-band-label-right {
  animation: nosStoryBandRightIn 820ms cubic-bezier(.18,.82,.22,1) forwards;
}

@keyframes nosStoryBandLeftIn {
  0% {
    opacity: 1;
    transform: translate3d(-120vw, 0, 0) scale(1.45);
  }
  100% {
    opacity: 1;
    transform: translate3d(0, 0, 0) scale(1);
  }
}

@keyframes nosStoryBandRightIn {
  0% {
    opacity: 1;
    transform: translate3d(120vw, 0, 0) scale(1.45);
  }
  100% {
    opacity: 1;
    transform: translate3d(0, 0, 0) scale(1);
  }
}

/* The band owns the dividing line between itself and the first lower row. */
.story-band + .process-pair {
  border-top: 0;
}

/* Phone/narrow: same architecture, simply shorter and smaller. */
@media (max-width: 700px) {
  .story-band {
    min-height: clamp(48px, 13vw, 60px);
  }

  .story-band-label {
    font-size: clamp(13px, 4.1vw, 19px);
    letter-spacing: .018em;
  }

  .story-band-label-left {
    transform: translate3d(-125vw, 0, 0) scale(1.30);
  }

  .story-band-label-right {
    transform: translate3d(125vw, 0, 0) scale(1.30);
  }

  @keyframes nosStoryBandLeftIn {
    0% {
      opacity: 1;
      transform: translate3d(-125vw, 0, 0) scale(1.30);
    }
    100% {
      opacity: 1;
      transform: translate3d(0, 0, 0) scale(1);
    }
  }

  @keyframes nosStoryBandRightIn {
    0% {
      opacity: 1;
      transform: translate3d(125vw, 0, 0) scale(1.30);
    }
    100% {
      opacity: 1;
      transform: translate3d(0, 0, 0) scale(1);
    }
  }
}

@media (prefers-reduced-motion: reduce) {
  .story-band-label-left,
  .story-band-label-right,
  .story-band.is-visible .story-band-label-left,
  .story-band.is-visible .story-band-label-right {
    animation: none !important;
    opacity: 1 !important;
    transform: none !important;
  }
}


/* V40 — story labels first. Everything else remains locked. */
.story-band { border-top: 1px solid rgba(255,255,255,.22); }
.story-band + .top-pair { border-top: 0; }
.story-band + .process-pair { border-top: 1px solid rgba(255,255,255,.72); }


/* V41 — lighter background behind CREATORS / COLLABORATORS only.
   Everything else remains locked. */
.story-band {
  background: var(--black-soft) !important;
}


/* V42 — make the CREATORS / COLLABORATORS band clearly lighter.
   Everything else remains locked. */
.story-band {
  background: var(--bone) !important;
}


/* ============================================================
   V43 — HERO BACKGROUND IMAGE
   Uses assets/18-background.png as a warm, lightly printed backdrop
   behind the opening NOS hero only. Everything else remains locked.
   ============================================================ */

.hero {
  isolation: isolate;
  background: var(--black-bg);
}

.hero::before {
  content: "";
  position: absolute;
  inset: 0;
  z-index: 0;
  background-image: url("assets/18-background.png");
  background-size: cover;
  background-position: center center;
  background-repeat: no-repeat;
  opacity: .34;
  pointer-events: none;
}

/* Keep the center readable while allowing the warm studio image to show
   more strongly around the outer areas of the hero. */
.hero::after {
  content: "";
  position: absolute;
  inset: 0;
  z-index: 1;
  background:
    radial-gradient(
      ellipse at center,
      rgba(12,17,25,.12) 0%,
      rgba(12,17,25,.24) 48%,
      rgba(12,17,25,.42) 100%
    );
  pointer-events: none;
}

.hero-inner {
  position: relative;
  z-index: 2;
}


/* ============================================================
   V44 — HERO BACKGROUND STRONGER
   Everything else remains locked.
   ============================================================ */

.hero::before {
  opacity: .65 !important;
  filter: contrast(1.28) saturate(1.06);
}

/* Preserve readability while letting substantially more of the image through. */
.hero::after {
  background:
    radial-gradient(
      ellipse at center,
      rgba(12,17,25,.08) 0%,
      rgba(12,17,25,.16) 48%,
      rgba(12,17,25,.30) 100%
    ) !important;
}


/* ============================================================
   V46 — HERO IMAGE TREATMENT + END NOTE
   Everything else remains locked.
   ============================================================ */

/* Keep the existing 65% visibility, but make the image darker,
   more contrasty, and a touch less saturated. */
.hero::before {
  filter: brightness(1.1) contrast(1.7) saturate(.19) !important;
}

.ownership-end-note {
  width: min(920px, 92%);
  margin: 74px auto 0;
  padding-top: 44px;
  border-top: 1px solid rgba(12,17,25,.18);
  text-align: center;
}

.ownership-end-witty {
  margin: 0;
  font-family: var(--display);
  font-size: clamp(28px, 3.2vw, 48px);
  line-height: 1;
  letter-spacing: -.03em;
  text-transform: uppercase;
  color: var(--black);
}

.ownership-end-blur {
  margin: 16px 0 0;
  font-family: var(--body);
  font-size: clamp(13px, 1.15vw, 17px);
  line-height: 1.35;
  font-weight: 800;
  letter-spacing: .08em;
  text-transform: uppercase;
  color: var(--blue);
}

@media (max-width: 700px) {
  .ownership-end-note {
    width: 94%;
    margin-top: 54px;
    padding-top: 34px;
  }

  .ownership-end-witty {
    font-size: clamp(23px, 7vw, 34px);
  }

  .ownership-end-blur {
    margin-top: 12px;
    font-size: clamp(10px, 3vw, 13px);
    letter-spacing: .055em;
  }
}


/* ============================================================
   V48 — NARROW / PHONE STORY LABEL READABILITY
   Everything else remains locked.
   ============================================================ */

@media (max-width: 700px) {
  .story-band {
    min-height: clamp(56px, 15vw, 70px) !important;
  }

  .story-band-label {
    font-size: clamp(16px, 5vw, 24px) !important;
    letter-spacing: 0 !important;
  }
}

@media (max-width: 430px) {
  .story-band-label {
    font-size: clamp(15px, 4.6vw, 20px) !important;
    letter-spacing: -.01em !important;
  }
}


/* ============================================================
   V50 — ABOUT PAGE
   Homepage behavior remains locked.
   ============================================================ */

.about-page {
  background: var(--black-bg);
}

.about-page .site-header {
  position: relative;
}

.about-page .main-nav a[aria-current="page"] {
  color: var(--blue);
  opacity: 1;
}

.about-hero {
  position: relative;
  min-height: min(820px, calc(100dvh - 88px));
  display: flex;
  align-items: flex-end;
  overflow: hidden;
  background: var(--black-bg);
  isolation: isolate;
}

.about-hero-bg {
  position: absolute;
  inset: 0;
  z-index: 0;
  background:
    linear-gradient(90deg, rgba(12,17,25,.93) 0%, rgba(12,17,25,.58) 47%, rgba(12,17,25,.38) 100%),
    linear-gradient(0deg, rgba(12,17,25,.74) 0%, rgba(12,17,25,.08) 58%, rgba(12,17,25,.22) 100%),
    url("assets/18-background.png") center center / cover no-repeat;
  filter: brightness(1.1) contrast(1.7) saturate(.19);
}

.about-hero-inner {
  position: relative;
  z-index: 1;
  padding-top: 120px;
  padding-bottom: clamp(78px, 10vw, 140px);
}

.about-kicker,
.about-section-label {
  color: var(--blue);
  font-size: 12px;
  line-height: 1;
  font-weight: 800;
  letter-spacing: .18em;
  text-transform: uppercase;
}

.about-hero h1 {
  max-width: 1100px;
  margin: 24px 0 26px;
  font-family: var(--display);
  font-size: clamp(92px, 13.4vw, 220px);
  line-height: .76;
  letter-spacing: -.06em;
  text-transform: uppercase;
  color: var(--bone);
}

.about-hero-deck {
  margin: 0;
  font-size: clamp(20px, 2vw, 32px);
  line-height: 1.25;
  color: rgba(243,239,230,.88);
}

.about-editorial {
  padding: clamp(100px, 10vw, 170px) 0;
}

.about-editorial-dark {
  background: var(--black-bg);
  color: var(--bone);
}

.about-editorial-cream {
  background: var(--cream);
  color: var(--black);
}

.about-editorial-grid {
  display: grid;
  grid-template-columns: minmax(170px, .55fr) minmax(0, 2fr);
  gap: clamp(50px, 8vw, 140px);
  align-items: start;
}

.about-editorial-copy h2 {
  max-width: 1040px;
  margin: 0 0 44px;
  font-family: var(--display);
  font-size: clamp(54px, 6vw, 96px);
  line-height: .9;
  letter-spacing: -.045em;
  text-transform: uppercase;
}

.about-editorial-copy p {
  max-width: 900px;
  margin: 0 0 22px;
  font-size: clamp(18px, 1.45vw, 23px);
  line-height: 1.58;
  color: #c9c9c9;
}

.about-editorial-cream .about-editorial-copy p {
  color: #2a2a2a;
}

.about-role-section {
  background: #27364d;
  color: var(--bone);
  padding-bottom: clamp(70px, 8vw, 120px);
}

.about-role-grid {
  position: relative;
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  border-left: 1px solid rgba(255,255,255,.16);
  border-right: 1px solid rgba(255,255,255,.16);
}

.about-role-grid::after {
  content: "";
  position: absolute;
  top: 0;
  bottom: 0;
  left: 50%;
  width: 2px;
  background: var(--blue);
  transform: translateX(-1px);
}

.about-role {
  min-width: 0;
  padding: clamp(70px, 7vw, 115px) clamp(30px, 5vw, 80px);
}

.about-role-name {
  display: block;
  margin-bottom: 36px;
  color: var(--blue);
  font-family: var(--display);
  font-size: clamp(28px, 4vw, 58px);
  line-height: .9;
  letter-spacing: .035em;
}

.about-role h2 {
  margin: 0 0 34px;
  font-size: clamp(58px, 7vw, 112px);
  line-height: .82;
}

.about-role p {
  max-width: 560px;
  margin: 0;
  color: rgba(243,239,230,.78);
  font-size: clamp(16px, 1.25vw, 20px);
  line-height: 1.55;
}

.about-role-bridge {
  padding-top: clamp(55px, 6vw, 90px);
  text-align: center;
}

.about-role-bridge p {
  margin: 0 0 14px;
  color: rgba(243,239,230,.62);
  font-size: 12px;
  font-weight: 800;
  letter-spacing: .18em;
}

.about-role-bridge strong {
  display: block;
  font-family: var(--display);
  font-size: clamp(38px, 5vw, 78px);
  line-height: .94;
  letter-spacing: -.035em;
}

.about-image-break {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  min-height: clamp(360px, 43vw, 720px);
  background: var(--black-bg);
}

.about-image {
  overflow: hidden;
}

.about-image img {
  width: 100%;
  height: 100%;
  object-fit: cover;
}

.about-system-section {
  padding: clamp(105px, 10vw, 165px) 0;
  background: var(--black-bg);
  color: var(--bone);
  text-align: center;
}

.about-system-section h2 {
  margin: 28px 0 58px;
  font-size: clamp(62px, 8vw, 126px);
  line-height: .85;
}

.about-system-line {
  max-width: 1220px;
  margin: 0 auto;
  padding: 28px 30px;
  display: flex;
  align-items: center;
  justify-content: center;
  gap: clamp(10px, 1.7vw, 28px);
  border-top: 1px solid rgba(255,255,255,.18);
  border-bottom: 1px solid rgba(255,255,255,.18);
  color: var(--blue);
  font-family: var(--display);
  font-size: clamp(18px, 2.15vw, 34px);
  letter-spacing: .02em;
}

.about-system-line i {
  color: rgba(243,239,230,.34);
  font-style: normal;
}

.about-system-copy {
  max-width: 860px;
  margin: 46px auto 0;
  color: #c9c9c9;
  font-size: clamp(17px, 1.35vw, 21px);
  line-height: 1.6;
}

.about-who-section {
  padding: clamp(100px, 10vw, 170px) 0;
  background: var(--cream);
  color: var(--black);
}

.about-who-grid {
  display: grid;
  grid-template-columns: minmax(0, .9fr) minmax(0, 1.25fr);
  gap: clamp(50px, 9vw, 150px);
  align-items: end;
}

.about-who-section h2 {
  margin: 24px 0 0;
  font-size: clamp(70px, 9vw, 145px);
  line-height: .82;
}

.about-who-copy p {
  margin: 0 0 28px;
  font-size: clamp(20px, 1.65vw, 27px);
  line-height: 1.5;
}

.about-name-section {
  padding: clamp(105px, 11vw, 180px) 0;
  background: #27364d;
  color: var(--bone);
}

.about-name-inner {
  max-width: 1180px;
}

.about-name-section h2 {
  max-width: 1000px;
  margin: 28px 0 44px;
  font-size: clamp(60px, 7.5vw, 120px);
  line-height: .85;
}

.about-name-section p {
  max-width: 900px;
  margin: 0 0 26px;
  color: rgba(243,239,230,.8);
  font-size: clamp(19px, 1.55vw, 25px);
  line-height: 1.58;
}

.about-name-section .about-name-emphasis {
  margin-top: 55px;
  color: var(--blue);
  font-family: var(--display);
  font-size: clamp(32px, 4vw, 64px);
  line-height: .98;
  letter-spacing: -.025em;
}

.about-final {
  position: relative;
  overflow: hidden;
  padding: clamp(100px, 11vw, 180px) 0;
  background: var(--black-bg);
  color: var(--bone);
  text-align: center;
}

.about-final::before {
  content: "";
  position: absolute;
  inset: 0;
  background: url("assets/18-background.png") center center / cover no-repeat;
  opacity: .22;
  filter: contrast(1.7) saturate(.19);
}

.about-final::after {
  content: "";
  position: absolute;
  inset: 0;
  background: rgba(12,17,25,.70);
}

.about-final-inner {
  position: relative;
  z-index: 1;
}

.about-final h2 {
  margin: 0;
  font-size: clamp(70px, 10vw, 170px);
  line-height: .82;
}

.about-final h2 strong {
  color: var(--blue);
  font-weight: inherit;
}

.about-final-actions {
  margin-top: 62px;
  display: flex;
  justify-content: center;
  gap: 18px;
}

@media (max-width: 760px) {
  .about-hero {
    min-height: 650px;
  }

  .about-hero-bg {
    background:
      linear-gradient(0deg, rgba(12,17,25,.82) 0%, rgba(12,17,25,.22) 70%, rgba(12,17,25,.30) 100%),
      url("assets/18-background.png") 60% center / cover no-repeat;
  }

  .about-hero-inner {
    padding-top: 90px;
    padding-bottom: 70px;
  }

  .about-hero h1 {
    font-size: clamp(68px, 21vw, 122px);
  }

  .about-editorial-grid,
  .about-who-grid {
    grid-template-columns: 1fr;
    gap: 34px;
  }

  .about-editorial-copy h2 {
    font-size: clamp(44px, 12vw, 70px);
  }

  .about-role {
    padding: 55px 18px 60px;
  }

  .about-role-name {
    margin-bottom: 24px;
    font-size: clamp(17px, 5vw, 25px);
  }

  .about-role h2 {
    font-size: clamp(40px, 12vw, 68px);
  }

  .about-role p {
    font-size: 14px;
  }

  .about-role-bridge strong {
    font-size: clamp(34px, 10vw, 54px);
  }

  .about-image-break {
    min-height: 300px;
  }

  .about-system-line {
    flex-wrap: wrap;
    gap: 10px 14px;
    padding-inline: 10px;
  }

  .about-system-line i {
    font-size: .85em;
  }

  .about-final-actions {
    flex-direction: column;
    align-items: center;
  }

  .about-final-actions .button {
    width: min(320px, 100%);
  }
}

@media (max-width: 430px) {
  .about-role-name {
    font-size: 15px;
    letter-spacing: .01em;
  }

  .about-role p {
    font-size: 12px;
  }

  .about-image-break {
    min-height: 245px;
  }
}


/* ============================================================
   V51 — MOBILE NAVIGATION
   Desktop navigation remains unchanged.
   ============================================================ */

.mobile-nav {
  display: none;
  position: relative;
}

.mobile-nav summary {
  list-style: none;
}

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

@media (max-width: 1100px) {
  /* Replace the incomplete narrow-screen desktop nav with one clear menu. */
  .main-nav {
    display: none !important;
  }

  .header-inner {
    position: relative;
    justify-content: flex-end;
  }

  .mobile-nav {
    display: block;
    margin-left: auto;
    font-family: var(--body);
  }

  .mobile-nav summary {
    min-width: 104px;
    min-height: 40px;
    padding: 10px 18px;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    border: 1px solid rgba(243,239,230,.72);
    color: var(--bone);
    background: transparent;
    font-size: 11px;
    line-height: 1;
    font-weight: 700;
    letter-spacing: .13em;
    cursor: pointer;
    user-select: none;
  }

  .mobile-nav[open] summary {
    border-color: var(--blue);
    color: var(--blue);
  }

  .mobile-nav-panel {
    position: absolute;
    top: calc(100% + 10px);
    right: 0;
    z-index: 100;
    width: min(320px, calc(100vw - 24px));
    padding: 10px;
    display: grid;
    background: #131a24;
    border: 1px solid rgba(255,255,255,.16);
    box-shadow: 0 18px 42px rgba(0,0,0,.42);
  }

  .mobile-nav-panel a {
    min-height: 48px;
    padding: 0 16px;
    display: flex;
    align-items: center;
    border-bottom: 1px solid rgba(255,255,255,.10);
    color: var(--bone);
    font-size: 12px;
    line-height: 1;
    font-weight: 700;
    letter-spacing: .11em;
  }

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

  .mobile-nav-panel a[aria-current="page"] {
    color: var(--blue);
  }

  .mobile-nav-panel .mobile-nav-join {
    margin-top: 8px;
    min-height: 46px;
    justify-content: center;
    border: 1px solid var(--blue);
    color: var(--blue);
  }
}

@media (max-width: 700px) {
  .mobile-nav-panel {
    right: -2px;
  }
}


/* ============================================================
   V52 — ABOUT RESPONSIVE FIT + MOBILE MENU FINISH
   Everything else remains locked.
   Fixes:
   1) START / JOIN SOMETHING stay inside their 50% columns.
   2) Final MAKE SOMETHING / ANYTHING fits narrow phones.
   3) JOIN NOS mobile-menu button is never clipped.
   ============================================================ */

/* Protect each half from type spilling across the center divider. */
.about-role {
  overflow: hidden;
}

.about-role h2 {
  max-width: 100%;
}

/* Laptop / narrow-window sizing. */
@media (max-width: 1100px) {
  .about-role {
    padding-left: 24px;
    padding-right: 24px;
  }

  .about-role h2 {
    font-size: clamp(36px, 5.4vw, 60px) !important;
    line-height: .88 !important;
    letter-spacing: -.045em;
  }

  .about-role-name {
    font-size: clamp(20px, 3vw, 34px) !important;
    letter-spacing: .02em !important;
  }
}

/* Phone: preserve the split, but size the long words from the half-column. */
@media (max-width: 700px) {
  .about-role {
    padding: 44px 12px 48px !important;
  }

  .about-role h2 {
    font-size: clamp(25px, 7.2vw, 34px) !important;
    line-height: .90 !important;
    letter-spacing: -.045em !important;
    white-space: nowrap;
  }

  .about-role-name {
    margin-bottom: 20px !important;
    font-size: clamp(12px, 3.65vw, 16px) !important;
    letter-spacing: .005em !important;
    white-space: nowrap;
  }

  .about-role p {
    font-size: 12px !important;
    line-height: 1.48;
  }

  /* The final About-page statement was inheriting a 70px minimum.
     Remove that desktop minimum on phones. */
  .about-final {
    padding-left: 0;
    padding-right: 0;
  }

  .about-final-inner {
    width: calc(100% - 28px);
  }

  .about-final h2 {
    max-width: 100%;
    margin-inline: auto;
    font-size: clamp(34px, 10.8vw, 52px) !important;
    line-height: .88 !important;
    letter-spacing: -.045em;
    overflow-wrap: normal;
    word-break: normal;
  }
}

@media (max-width: 430px) {
  .about-role {
    padding-left: 10px !important;
    padding-right: 10px !important;
  }

  .about-role h2 {
    font-size: clamp(24px, 7vw, 30px) !important;
  }

  .about-role-name {
    font-size: clamp(11px, 3.5vw, 14px) !important;
  }

  .about-final h2 {
    font-size: clamp(32px, 10.4vw, 44px) !important;
  }
}

/* Mobile menu panel: keep the final CTA fully inside the panel and viewport. */
@media (max-width: 1100px) {
  .mobile-nav-panel {
    right: 0 !important;
    width: min(340px, calc(100vw - 24px)) !important;
    max-width: calc(100vw - 24px);
    padding: 10px 10px 12px !important;
    overflow: visible;
  }

  .mobile-nav-panel .mobile-nav-join {
    width: 100%;
    min-height: 52px !important;
    margin: 8px 0 0 !important;
    padding: 0 16px !important;
    flex: 0 0 auto;
    border: 1px solid var(--blue) !important;
    box-sizing: border-box;
  }
}

@media (max-width: 700px) {
  .mobile-nav-panel {
    right: 0 !important;
  }
}


/* ============================================================
   V53 — ABOUT PAGE NOS LOGO
   Everything else remains locked.
   ============================================================ */

.about-brand-logo {
  display: block;
  width: min(420px, 38vw);
  margin: 0 0 clamp(36px, 4.5vw, 64px);
}

.about-brand-logo img {
  display: block;
  width: 100%;
  height: auto;
  object-fit: contain;
  transform: scaleY(1.08);
  transform-origin: left center;
}

@media (max-width: 760px) {
  .about-brand-logo {
    width: min(230px, 58vw);
    margin-bottom: 34px;
  }
}

@media (max-width: 430px) {
  .about-brand-logo {
    width: min(205px, 60vw);
    margin-bottom: 28px;
  }
}


/* ============================================================
   V54 — PEOPLE PAGE
   Homepage and About remain locked.
   ============================================================ */

.people-page {
  background: var(--black-bg);
  color: var(--bone);
}

.people-page .main-nav a[aria-current="page"],
.people-page .mobile-nav-panel a[aria-current="page"] {
  color: var(--blue);
  opacity: 1;
}

.people-hero {
  position: relative;
  min-height: 560px;
  display: flex;
  align-items: flex-end;
  overflow: hidden;
  background:
    linear-gradient(90deg, rgba(12,17,25,.90), rgba(12,17,25,.72)),
    url("assets/18-background.png") center 38% / cover no-repeat;
}

.people-hero::after {
  content: "";
  position: absolute;
  inset: 0;
  background: linear-gradient(0deg, rgba(12,17,25,.68) 0%, rgba(12,17,25,.04) 62%, rgba(12,17,25,.19) 100%);
  pointer-events: none;
}

.people-hero-inner {
  position: relative;
  z-index: 1;
  padding-top: 90px;
  padding-bottom: clamp(64px, 8vw, 108px);
}

.people-brand-logo {
  display: block;
  width: min(420px, 38vw);
  margin: 0 0 clamp(34px, 4vw, 56px);
}

.people-brand-logo img {
  display: block;
  width: 100%;
  height: auto;
  transform: scaleY(1.08);
  transform-origin: left center;
}

.people-hero h1 {
  max-width: 1180px;
  margin: 24px 0 24px;
  font-family: var(--display);
  font-size: clamp(78px, 10vw, 170px);
  line-height: .82;
  letter-spacing: -.055em;
  text-transform: uppercase;
}

.people-hero-deck {
  max-width: 760px;
  margin: 0;
  color: rgba(243,239,230,.82);
  font-size: clamp(18px, 1.7vw, 27px);
  line-height: 1.45;
}

.people-profile-section {
  padding: clamp(72px, 8vw, 130px) 0;
  background: var(--cream);
  color: var(--black);
}

.people-profile-grid {
  display: grid;
  grid-template-columns: minmax(320px, .84fr) minmax(0, 1.35fr);
  gap: clamp(46px, 7vw, 115px);
  align-items: start;
}

.people-profile-image {
  margin: 0;
  overflow: hidden;
  background: #d7d0c5;
}

.people-profile-image img {
  width: 100%;
  height: auto;
  object-fit: cover;
}

.people-profile-copy {
  min-width: 0;
}

.people-profile-heading {
  padding-bottom: 34px;
  margin-bottom: 34px;
  border-bottom: 1px solid rgba(9,9,9,.18);
}

.people-name {
  margin: 0;
  font-family: var(--display);
  font-size: clamp(54px, 6vw, 100px);
  line-height: .86;
  letter-spacing: -.05em;
}

.people-title {
  margin: 15px 0 0;
  color: var(--blue);
  font-size: clamp(14px, 1.4vw, 21px);
  line-height: 1;
  font-weight: 800;
  letter-spacing: .17em;
}

.people-bio {
  max-width: 920px;
}

.people-bio p {
  margin: 0 0 26px;
  font-size: clamp(17px, 1.35vw, 21px);
  line-height: 1.62;
  color: #262626;
}

.people-bio p:last-child {
  margin-bottom: 0;
}

.people-bottom-cta {
  position: relative;
  overflow: hidden;
  padding: clamp(92px, 10vw, 150px) 0;
  text-align: center;
  background: var(--black-bg);
}

.people-bottom-cta::before {
  content: "";
  position: absolute;
  inset: 0;
  background: url("assets/18-background.png") center / cover no-repeat;
  opacity: .19;
  filter: contrast(1.7) saturate(.19);
}

.people-bottom-cta::after {
  content: "";
  position: absolute;
  inset: 0;
  background: rgba(12,17,25,.72);
}

.people-bottom-inner {
  position: relative;
  z-index: 1;
}

.people-bottom-inner h2 {
  margin: 28px 0 0;
  font-family: var(--display);
  font-size: clamp(62px, 8.5vw, 140px);
  line-height: .84;
  letter-spacing: -.045em;
  text-transform: uppercase;
}

.people-bottom-inner h2 strong {
  color: var(--blue);
  font-weight: inherit;
}

.people-bottom-actions {
  margin-top: 52px;
  display: flex;
  justify-content: center;
}

@media (max-width: 900px) {
  .people-profile-grid {
    grid-template-columns: 1fr;
  }

  .people-profile-image {
    width: min(540px, 100%);
  }
}

@media (max-width: 700px) {
  .people-hero {
    min-height: 540px;
  }

  .people-hero-inner {
    padding-top: 70px;
    padding-bottom: 60px;
  }

  .people-brand-logo {
    width: min(230px, 58vw);
    margin-bottom: 30px;
  }

  .people-hero h1 {
    font-size: clamp(52px, 15vw, 86px);
    line-height: .84;
  }

  .people-hero-deck {
    font-size: 16px;
  }

  .people-profile-section {
    padding: 54px 0 74px;
  }

  .people-profile-grid {
    width: calc(100% - 24px);
    gap: 38px;
  }

  .people-profile-image {
    width: 100%;
  }

  .people-name {
    font-size: clamp(48px, 15vw, 74px);
  }

  .people-bio p {
    font-size: 16px;
    line-height: 1.58;
  }

  .people-bottom-inner {
    width: calc(100% - 28px);
  }

  .people-bottom-inner h2 {
    font-size: clamp(36px, 11vw, 56px);
  }
}

@media (max-width: 430px) {
  .people-brand-logo {
    width: min(205px, 60vw);
  }

  .people-hero h1 {
    font-size: clamp(46px, 14.4vw, 66px);
  }

  .people-name {
    font-size: clamp(42px, 14vw, 58px);
  }
}


/* ============================================================
   V57 — PEOPLE PAGE HEADSHOT SIZE
   Everything else remains locked.
   ============================================================ */

.people-profile-image {
  width: 50% !important;
}

@media (max-width: 900px) {
  .people-profile-image {
    width: 50% !important;
  }
}

@media (max-width: 700px) {
  .people-profile-image {
    width: 50% !important;
  }
}


/* ============================================================
   V58 — PEOPLE PROFILE LAYOUT
   Name/title first. Headshot below, left of the opening paragraph.
   Remaining bio begins below the headshot.
   Everything else remains locked.
   ============================================================ */

.people-profile-layout {
  max-width: 1240px;
}

.people-profile-copy {
  width: 100%;
}

.people-profile-heading {
  max-width: 100%;
}

.people-lead {
  display: grid;
  grid-template-columns: minmax(180px, 300px) minmax(0, 1fr);
  gap: clamp(34px, 5vw, 72px);
  align-items: start;
  margin-bottom: clamp(34px, 4vw, 56px);
}

.people-lead .people-profile-image {
  width: 100% !important;
  margin: 0;
}

.people-lead-paragraph {
  margin: 0;
  font-size: clamp(17px, 1.35vw, 21px);
  line-height: 1.62;
  color: #262626;
}

.people-bio-rest {
  max-width: 100%;
}

.people-bio-rest p {
  max-width: 100%;
}

@media (max-width: 900px) {
  .people-profile-layout {
    width: calc(100% - 36px);
  }

  .people-lead {
    grid-template-columns: minmax(150px, 230px) minmax(0, 1fr);
    gap: 28px;
  }
}

@media (max-width: 620px) {
  .people-profile-layout {
    width: calc(100% - 24px);
  }

  .people-lead {
    grid-template-columns: minmax(118px, 34vw) minmax(0, 1fr);
    gap: 18px;
  }

  .people-lead-paragraph {
    font-size: 15px;
    line-height: 1.52;
  }
}

@media (max-width: 430px) {
  .people-lead {
    grid-template-columns: 118px minmax(0, 1fr);
    gap: 16px;
  }

  .people-lead-paragraph {
    font-size: 14px;
    line-height: 1.48;
  }
}


/* ============================================================
   V59 — PEOPLE BIO TRUE TEXT WRAP
   Headshot is now part of the text flow. Paragraphs wrap around it
   naturally and then expand to full width below the image.
   Everything else remains locked.
   ============================================================ */

.people-bio-flow {
  display: flow-root;
  max-width: 100%;
}

.people-bio-flow::after {
  content: "";
  display: block;
  clear: both;
}

.people-profile-image-float {
  float: left;
  width: clamp(190px, 24vw, 320px) !important;
  max-width: 42%;
  margin: 0 clamp(24px, 3.3vw, 48px) 18px 0 !important;
}

.people-profile-image-float img {
  display: block;
  width: 100%;
  height: auto;
}

.people-bio-flow p {
  max-width: none !important;
}

.people-bio-flow p:first-of-type {
  margin-top: 0;
}

/* Narrow windows: image scales continuously while text keeps wrapping. */
@media (max-width: 900px) {
  .people-profile-image-float {
    width: clamp(170px, 29vw, 250px) !important;
    max-width: 40%;
    margin-right: clamp(20px, 3vw, 34px) !important;
  }
}

/* Phones: keep the portrait in-flow and readable without forcing
   a stacked layout. Text continues to wrap around it. */
@media (max-width: 620px) {
  .people-profile-image-float {
    width: clamp(118px, 34vw, 170px) !important;
    max-width: 42%;
    margin-right: 16px !important;
    margin-bottom: 10px !important;
  }

  .people-bio-flow p {
    font-size: 15px !important;
    line-height: 1.52 !important;
  }
}

@media (max-width: 430px) {
  .people-profile-image-float {
    width: clamp(108px, 35vw, 145px) !important;
    max-width: 41%;
    margin-right: 14px !important;
    margin-bottom: 8px !important;
  }

  .people-bio-flow p {
    font-size: 14px !important;
    line-height: 1.48 !important;
  }
}


/* ============================================================
   V62 — STORY BAND LABEL WEIGHT
   Make CREATORS / COLLABORATORS match the bold visual language
   of the rest of the site. No size, position, or animation changes.
   ============================================================ */

.story-band-label {
  font-weight: 700 !important;
  letter-spacing: .01em !important;
}

@media (max-width: 700px) {
  .story-band-label {
    letter-spacing: 0 !important;
  }
}

@media (max-width: 430px) {
  .story-band-label {
    letter-spacing: -.01em !important;
  }
}

/* ============================================================
   V128 — REMOVE LEGACY BACKGROUND COLOR GRADING
   Protected full-site pages only. Preserve layout and readability,
   but show the approved wall with its native color balance.
   ============================================================ */

/* Full-site landing hero: remove old brightness/contrast/desaturation pass. */
.hero::before {
  filter: none !important;
}

/* Preserve the same readability falloff, but remove the old blue/navy tint. */
.hero::after {
  background:
    radial-gradient(
      ellipse at center,
      rgba(0,0,0,.08) 0%,
      rgba(0,0,0,.16) 48%,
      rgba(0,0,0,.30) 100%
    ) !important;
}

/* About hero: same composition and opacity, neutral overlays, no image grading. */
.about-hero-bg {
  background:
    linear-gradient(90deg, rgba(0,0,0,.93) 0%, rgba(0,0,0,.58) 47%, rgba(0,0,0,.38) 100%),
    linear-gradient(0deg, rgba(0,0,0,.74) 0%, rgba(0,0,0,.08) 58%, rgba(0,0,0,.22) 100%),
    url("assets/18-background.png") center center / cover no-repeat;
  filter: none;
}

.about-final::before {
  filter: none;
}
.about-final::after {
  background: rgba(0,0,0,.70);
}

/* People hero: preserve darkness but remove the cool/navy cast. */
.people-hero {
  background:
    linear-gradient(90deg, rgba(0,0,0,.90), rgba(0,0,0,.72)),
    url("assets/18-background.png") center 38% / cover no-repeat;
}
.people-hero::after {
  background: linear-gradient(0deg, rgba(0,0,0,.68) 0%, rgba(0,0,0,.04) 62%, rgba(0,0,0,.19) 100%);
}

.people-bottom-cta::before {
  filter: none;
}
.people-bottom-cta::after {
  background: rgba(0,0,0,.72);
}

@media (max-width: 760px) {
  .about-hero-bg {
    background:
      linear-gradient(0deg, rgba(0,0,0,.82) 0%, rgba(0,0,0,.22) 70%, rgba(0,0,0,.30) 100%),
      url("assets/18-background.png") 60% center / cover no-repeat;
    filter: none;
  }
}

/* V129 — navigation + About/People logo composition only.
   HOME returns to the teaser/root home page. About and People use the same
   displayed logo scale as the full-site home hero, left-aligned in the shell. */
.about-brand-logo,
.people-brand-logo {
  width: min(1120px, 90vw);
  margin-left: 0;
  margin-right: auto;
}

.about-brand-logo img,
.people-brand-logo img {
  transform-origin: left center;
}

@media (max-width: 700px) {
  .about-brand-logo,
  .people-brand-logo {
    width: min(680px, 98vw);
    margin-left: 0;
    margin-right: auto;
  }
}

/* ============================================================
   V130 — CONSISTENT FULL-SITE BRAND POSITION
   Home / About / People use one centered logo position and the same
   headroom below the navigation header. No asset/content changes.
   ============================================================ */

/* Desktop/tablet: use the same top-origin composition on every full-site page. */
@media (min-width: 701px) {
  .about-hero,
  .people-hero {
    align-items: flex-start;
  }

  .hero-inner,
  .about-hero-inner,
  .people-hero-inner {
    padding-top: clamp(6px, 1.1dvh, 16px) !important;
  }

  .hero-logo,
  .about-brand-logo,
  .people-brand-logo {
    width: min(1040px, 88vw, clamp(500px, 74dvh, 980px)) !important;
    margin-left: auto !important;
    margin-right: auto !important;
    align-self: center;
  }
}

/* Center the mark itself on every full-site page. */
.about-brand-logo,
.people-brand-logo {
  display: block;
  text-align: center;
}

.about-brand-logo img,
.people-brand-logo img {
  transform-origin: center center !important;
}

/* Phone: keep the same centered brand slot and headroom across pages. */
@media (max-width: 700px) {
  .about-hero,
  .people-hero {
    align-items: flex-start;
  }

  .hero-inner,
  .about-hero-inner,
  .people-hero-inner {
    justify-content: flex-start !important;
    padding-top: 18px !important;
  }

  .hero-logo,
  .about-brand-logo,
  .people-brand-logo {
    width: min(680px, 98vw) !important;
    margin-left: auto !important;
    margin-right: auto !important;
  }
}

/* V134 — APP LINKS TEMPORARILY PAUSED. ONLY APP-BOUND BUTTONS USE THIS MESSAGE. */
.app-coming-soon-overlay {
  position: fixed;
  inset: 0;
  z-index: 9999;
  display: grid;
  place-items: center;
  padding: 24px;
  background: rgba(8, 8, 8, .62);
  opacity: 0;
  transition: opacity .18s ease;
}

.app-coming-soon-overlay[hidden] {
  display: none;
}

.app-coming-soon-overlay.is-visible {
  opacity: 1;
}

.app-coming-soon-message.button {
  width: auto;
  min-width: min(310px, calc(100vw - 48px));
  min-height: 54px;
  padding: 14px 28px;
  color: var(--bone);
  background: rgba(10, 10, 10, .92);
  border-color: rgba(243, 239, 230, .82);
  font-size: 14px;
  letter-spacing: .04em;
  text-align: center;
  pointer-events: none;
  transform: translateY(8px);
  transition: transform .18s ease;
}

.app-coming-soon-overlay.is-visible .app-coming-soon-message.button {
  transform: translateY(0);
}