:root {
  --sb-font: Arial, "Helvetica Neue", Helvetica, sans-serif;
  --sb-body-size: 17px;
  --sb-small-size: 15px;
  --sb-meta-size: 13px;
  --sb-label-size: 11px;
  --sb-label-tracking: 0.06em;
}

body,
button,
.skip-link,
.body,
.word-meta {
  font-family: var(--sb-font);
  font-synthesis: none;
}

body {
  font-size: var(--sb-body-size);
  font-weight: 400;
  line-height: 1.58;
}

.body {
  font-size: var(--sb-body-size);
  font-weight: 400;
  line-height: 1.58;
  letter-spacing: -0.01em;
}

.label,
.nav-links,
.text-link,
.hero-terms span {
  font-family: var(--sb-font);
  font-weight: 500;
  font-synthesis: none;
}

.label {
  font-size: var(--sb-label-size);
  line-height: 1.2;
  letter-spacing: var(--sb-label-tracking);
}

.nav-links {
  font-size: 14px;
  letter-spacing: 0.02em;
}

.text-link {
  font-size: 13px;
  letter-spacing: 0.02em;
}

/* Shared small-copy roles. These selectors deliberately leave artwork labels,
   route geometry and page-specific compositions untouched. */
.hero-copy p {
  font-family: var(--sb-font);
  font-size: var(--sb-body-size);
  font-weight: 400;
  line-height: 1.58;
  letter-spacing: -0.01em;
}

.hero-terms span,
.route p,
.rights-detail span,
.commercial-line span,
.company-line span,
.role-row span,
.continuum-point p {
  font-family: var(--sb-font);
  font-size: var(--sb-meta-size);
  font-weight: 400;
  line-height: 1.55;
  letter-spacing: 0;
}

.route .mini,
.commercial-line b,
.company-line b,
.role-row b,
.form-kind b,
.form-tags span,
.footer {
  font-family: var(--sb-font);
  font-size: var(--sb-label-size);
  font-weight: 500;
  line-height: 1.25;
  letter-spacing: var(--sb-label-tracking);
}

.display,
.serif,
.hero h1,
.hero-aside strong,
.origin-node .origin-title,
.route h3,
.rights-detail strong,
.commercial-line strong,
.adapt-word,
.side-block h3,
.contact-route span,
.form-kind h3,
.continuum-point h3,
.perspective-side strong,
.project-core h3,
.role-row strong,
.criterion h3,
.selective-side strong,
.word,
.name-side strong,
.origin-aside strong,
.meaning-left,
.meaning-right,
.company-line strong,
.source-node .source-name,
.route-node h3,
.party h3,
.copro-center h3 {
  font-family: var(--sb-font);
  font-weight: 500;
  font-synthesis: none;
}

.display {
  font-size: clamp(38px, 3.2vw, 50px);
  line-height: 1.03;
  letter-spacing: -0.035em;
}

.hero h1 {
  font-size: clamp(48px, 4.15vw, 64px);
  line-height: 1;
  letter-spacing: -0.043em;
}

.hero-aside strong,
.name-side strong,
.origin-aside strong {
  font-size: 24px;
  line-height: 1.08;
  letter-spacing: -0.028em;
}

.origin-node .origin-title,
.source-node .source-name {
  font-size: 31px;
  line-height: 1.03;
  letter-spacing: -0.03em;
}

.route h3,
.route-node h3 {
  font-size: 27px;
  line-height: 1.06;
  letter-spacing: -0.026em;
}

.rights-detail strong {
  font-size: 20px;
  line-height: 1.08;
  letter-spacing: -0.02em;
}

.commercial-line strong,
.role-row strong,
.company-line strong,
.contact-route span {
  font-size: 23px;
  line-height: 1.08;
  letter-spacing: -0.025em;
}

.adapt-word {
  font-size: 28px;
  line-height: 1.05;
  letter-spacing: -0.03em;
}

.side-block h3,
.project-core h3 {
  font-size: 32px;
  line-height: 1.04;
  letter-spacing: -0.03em;
}

.form-kind h3 {
  font-size: 30px;
  line-height: 1.05;
  letter-spacing: -0.03em;
}

.continuum-point h3,
.criterion h3 {
  font-size: 24px;
  line-height: 1.06;
  letter-spacing: -0.025em;
}

.perspective-side strong,
.selective-side strong {
  font-size: 26px;
  line-height: 1.06;
  letter-spacing: -0.025em;
}

body:has(.word-stage) .word {
  font-family: Arial, "Helvetica Neue", Helvetica, sans-serif;
  font-size: clamp(82px, 8.8vw, 142px);
  line-height: 0.82;
  font-weight: 400;
  letter-spacing: -0.045em;
  color: #020814;
}

@media (max-width: 980px) and (min-width: 621px) {
  body:has(.word-stage) .word {
    font-size: clamp(70px, 7.8vw, 122px);
  }
}

.meaning-left,
.meaning-right {
  font-size: 27px;
  line-height: 1.05;
  letter-spacing: -0.025em;
}

em,
i {
  font-family: var(--sb-font);
  font-style: italic;
  font-weight: 400;
  font-synthesis: none;
}

/* Homepage remains a separate hero system. */
@media (min-width: 981px) {
  /* The homepage retains its own 4:1 composition; only its copy is returned
     to the shared 1240 px text rail. The full-bleed artwork remains viewport-led. */
  .hero:not(.inner-hero-23x9) .hero-grid {
    width: min(calc(100% - 56px), var(--max));
    margin-right: auto;
    margin-left: auto;
  }

  .hero.inner-hero-23x9 .hero-grid,
  .sales-full-hero .hero-grid,
  .development-full-hero .hero-grid {
    width: min(calc(100% - 56px), var(--max)) !important;
    min-height: 0;
    margin-right: auto !important;
    margin-left: auto !important;
    padding-top: 0 !important;
    padding-bottom: 96px !important;
  }

  .hero.inner-hero-23x9 .hero-copy,
  .sales-full-hero .hero-copy,
  .development-full-hero .hero-copy {
    align-self: start !important;
    margin-top: clamp(52px, 5vw, 96px) !important;
    transform: none !important;
  }

  .hero.inner-hero-23x9 .hero-copy .label,
  .sales-full-hero .hero-copy .label,
  .development-full-hero .hero-copy .label {
    margin-bottom: 18px;
  }

  .hero.inner-hero-23x9 .hero-copy p,
  .sales-full-hero .hero-copy p,
  .development-full-hero .hero-copy p {
    margin-top: 20px;
  }

  .sales-full-hero .hero-copy,
  .development-full-hero .hero-copy {
    grid-column: 1 / span 5 !important;
  }
}

/* QA-led Development exception: keep the authorized 23:9 frame and route clear
   at the desktop breakpoint by giving the long H1 one additional rail column. */
@media (min-width: 981px) and (max-width: 1200px) {
  .development-full-hero .hero-copy {
    grid-column: 1 / span 6 !important;
    margin-top: clamp(30px, 3.5vw, 40px) !important;
  }

  .development-full-hero h1 {
    font-size: clamp(44px, 4.1vw, 50px);
    line-height: 1;
  }
}

/* QA-led About exception: remove the legacy page padding so the shared
   top anchor clears the protected route path without changing the hero frame. */
@media (min-width: 981px) and (max-width: 1280px) {
  body:has(.about-hero-art) .hero.inner-hero-23x9 {
    padding: 0 !important;
  }
}

@media (max-width: 980px) {
  .hero h1 {
    font-size: clamp(40px, 10.3vw, 55px);
    line-height: 1.01;
    letter-spacing: -0.04em;
  }

  /* H1 supporting copy is a genuine compact role; semantic .body remains
     Normal Body at the 17 px root scale at every responsive width. */
  .hero-copy p {
    /* This deliberately wins the older Sales/Development 12 px hero rules. */
    font-size: var(--sb-small-size) !important;
    line-height: 1.6;
  }

  .label {
    font-size: 10px;
  }

  .nav-links {
    font-size: 13px;
  }
}

@media (max-width: 620px) {
  .hero h1 {
    font-size: clamp(37px, 10.7vw, 49px);
  }

  .display {
    font-size: clamp(32px, 8.5vw, 42px);
  }
}

/* Stage 2 — authorized narrow-mobile Development exception. Tablet and wider
   responsive viewports retain the shared 770 px inner-hero contract. This
   changes only the frame height; the protected art zone remains contained and
   unmodified at the bottom of the hero. */
@media (min-width: 391px) and (max-width: 430px) {
  .development-full-hero.inner-hero-23x9 {
    height: calc(100vw + 290px);
    min-height: calc(100vw + 290px);
    max-height: calc(100vw + 290px);
  }
}

@media (max-width: 390px) {
  .development-full-hero.inner-hero-23x9 {
    height: clamp(650px, calc(42.857vw + 512.86px), 680px);
    min-height: clamp(650px, calc(42.857vw + 512.86px), 680px);
    max-height: clamp(650px, calc(42.857vw + 512.86px), 680px);
  }
}

/* About Name lockup — keep the full approved word visible on narrow mobile
   while preserving the section's established responsive structure. */
@media (max-width: 620px) {
  body:has(.word-stage) .word {
    font-size: clamp(45px, 14.4vw, 56px);
    line-height: 0.82;
    font-weight: 400;
    letter-spacing: -0.045em;
  }
}

/* Wide Desktop Placement Pass 1: retain the approved 1240 px rail through
   1499 px, then progressively expand only the shared compositional canvas.
   Existing text max-widths and all sub-1500 px behavior remain untouched. */
@media (min-width: 1500px) {
  :root {
    --max: min(1560px, calc(100vw - 240px));
  }
}

/* Wide desktop artwork-integrity guard: the source files are the approved
   wide masters. At the expanded rail, make the surrounding stages proportional
   to those 2048 x 1365 masters rather than preserving the narrower 1440
   adaptation crop. */
@media (min-width: 1500px) {
  .dev-grid,
  .world-grid,
  .adapt-grid {
    min-height: 0;
  }

  .dev-world,
  .world-visual {
    aspect-ratio: 2048 / 1365;
    min-height: 0;
  }

  .dev-world img,
  .world-visual img {
    object-fit: contain;
  }

  .adapt-world {
    aspect-ratio: 2048 / 1365;
    min-height: 0;
    background-size: contain !important;
  }
}

/* Wide Desktop Placement Pass 2: compact only section-internal vertical
   fields. These rules deliberately leave the approved rail, hero frames and
   full-master artwork stages untouched. */
@media (min-width: 1500px) {
  /* Homepage */
  .sales {
    padding: 80px 0 88px;
  }

  .sales-head {
    margin-bottom: 42px;
  }

  .rights-field {
    min-height: 440px;
  }

  .copro {
    padding: 80px 0 88px;
  }

  .copro-head {
    margin-bottom: 38px;
  }

  .copro-stage {
    min-height: 400px;
  }

  /* Sales & Rights */
  .rights {
    padding: 84px 0 92px;
  }

  .rights-head {
    margin-bottom: 44px;
  }

  .rights-canvas {
    min-height: 570px;
  }

  /* Development */
  .forms {
    padding-bottom: 76px;
  }

  body:has(.development-full-hero) .contact {
    padding-top: 72px;
  }

  /* Co-Production */
  .worlds {
    padding: 88px 0 92px;
  }

  .worlds-head {
    margin-bottom: 40px;
  }

  .worlds-stage {
    min-height: 530px;
  }

  .role {
    padding-bottom: 76px;
  }

  body:has(.worlds-stage) .contact {
    padding-top: 72px;
  }

  /* About */
  .crane-grid,
  .crane-stage {
    min-height: 650px;
  }

  .crane-copy {
    padding: 72px 0;
  }

  .company {
    padding-top: 80px;
  }
}

/* Final visual correction pass: retain the approved wide rail and artwork
   masters while removing only the specified visual collisions and redundant
   hierarchy. These values do not alter font metrics or sub-1500 desktop work. */
@media (min-width: 981px) {
  /* Homepage — restore the intended editorial rhythm without altering H1. */
  body:has(.brand-moment) .hero-copy .label {
    margin-bottom: 18px;
  }

  body:has(.brand-moment) .hero-copy p {
    margin-top: 20px;
  }

  body:has(.brand-moment) .hero-actions {
    margin-top: 22px;
  }

  body:has(.brand-moment) .hero-actions .btn {
    font-size: 13px;
    font-weight: 500;
    line-height: 1.2;
  }

}

/* Final composition 2/2: every desktop Rights path is one uninterrupted
   origin-to-terminal route. Node positions—not masks—provide text clearance.
   The source mobile stacked systems remain unchanged. */
@media (min-width: 981px) {
  /* The visual origin occupies its established grid column, while its readable
     copy measure stays unchanged; paths depart from that column's true edge. */
  body:has(.brand-moment) .source-node {
    width: 25%;
    max-width: none;
  }

  body:has(.brand-moment) .source-node > * {
    max-width: 255px;
  }

  body:has(#rightsCanvas) .origin-node {
    width: 24%;
    max-width: none;
  }

  body:has(#rightsCanvas) .origin-node > * {
    max-width: 260px;
  }

  body:has(.brand-moment) .rights-lines,
  body:has(#rightsCanvas) .rights-lines {
    inset: 0;
  }

  body:has(.brand-moment) .r1 { left: 52%; top: 9%; }
  body:has(.brand-moment) .r2 { left: 73%; top: 34%; }
  body:has(.brand-moment) .r3 { left: 49%; top: 63%; bottom: auto; }
  body:has(.brand-moment) .r4 { left: 76%; top: 75%; bottom: auto; }

  body:has(#rightsCanvas) .r-finished { left: 50%; top: 9%; }
  body:has(#rightsCanvas) .r-license { left: 73%; top: 34%; }
  body:has(#rightsCanvas) .r-territory { left: 47%; top: 61%; bottom: auto; }
  body:has(#rightsCanvas) .r-adapt { left: 75%; top: 75%; bottom: auto; }

  body:has(#rightsCanvas) .route:hover,
  body:has(#rightsCanvas) .route:focus-within,
  body:has(#rightsCanvas) .route.active {
    transform: none;
  }

  /* A continuous branch must be rendered as a complete route, not as an
     in-progress stroke fragment. This applies only to the two desktop Rights
     diagrams; their <=980 px stacked versions still hide the SVG entirely. */
  body:has(.brand-moment) .rights-lines .trajectory,
  body:has(#rightsCanvas) .rights-lines .trajectory {
    stroke-dasharray: none;
    stroke-dashoffset: 0;
    transition: none;
  }
}

/* Homepage: the top state remains transparent over the master hero. Remove
   only the divider/shadow that visually sliced the crane; scrolled state stays
   governed by the existing solid-nav rule. */
body:has(.brand-moment) .site-header:not(.scrolled)::after,
body:has(.brand-moment) .site-header:not(.scrolled) .passage-rail {
  opacity: 0;
}