/* =========================================================
   LIVING SEAM / PRODUCTION HERO C
   Refines the established split-screen language without
   changing the three service scenes that follow it.
   ========================================================= */

.concept-b .scene--brand.hero-refinement-c {
  --hero-c-paper: #f6f5f0;
  --hero-c-ink: #06152d;
  --hero-c-ink-light: #0b244a;
  --hero-c-blue: #1769ff;
  --hero-c-edge-top: 47%;
  --hero-c-edge-bottom: 42%;
  background: var(--hero-c-paper) !important;
  isolation: isolate;
}

.concept-b .scene--brand.hero-refinement-c::before {
  content: "";
  position: absolute;
  z-index: 1;
  inset: 0 !important;
  width: auto !important;
  height: auto !important;
  border: 0 !important;
  border-radius: 0 !important;
  opacity: 1 !important;
  rotate: 0 !important;
  clip-path: polygon(var(--hero-c-edge-top) 0, 100% 0, 100% 100%, var(--hero-c-edge-bottom) 100%) !important;
  background:
    radial-gradient(circle at 72% 42%, rgba(33, 82, 161, .38) 0, rgba(19, 52, 105, .13) 20%, transparent 43%),
    linear-gradient(132deg, var(--hero-c-ink-light), var(--hero-c-ink) 64%) !important;
}

.concept-b .scene--brand.hero-refinement-c::after {
  content: "";
  position: absolute;
  z-index: 5;
  inset: 0 !important;
  width: auto !important;
  height: auto !important;
  border: 0 !important;
  border-radius: 0 !important;
  opacity: 1 !important;
  rotate: 0 !important;
  pointer-events: none;
  clip-path: polygon(
    calc(var(--hero-c-edge-top) - .13%) 0,
    calc(var(--hero-c-edge-top) + .13%) 0,
    calc(var(--hero-c-edge-bottom) + .13%) 100%,
    calc(var(--hero-c-edge-bottom) - .13%) 100%
  ) !important;
  background: linear-gradient(180deg, transparent 1%, #1769ff 18%, #8db7ff 50%, #1769ff 82%, transparent 99%) !important;
  filter: drop-shadow(0 0 12px rgba(23, 105, 255, .35));
}

.hero-c-atmosphere,
.hero-c-orbit,
.hero-c-ghost,
.hero-c-seam,
.hero-c-micro {
  position: absolute;
  pointer-events: none;
}

.hero-c-atmosphere {
  z-index: 2;
  inset: 0;
  overflow: hidden;
}

.hero-c-atmosphere::before {
  content: "";
  position: absolute;
  inset: 0;
  background-image:
    linear-gradient(rgba(7, 22, 47, .035) 1px, transparent 1px),
    linear-gradient(90deg, rgba(7, 22, 47, .035) 1px, transparent 1px);
  background-size: 48px 48px;
  -webkit-mask-image: linear-gradient(90deg, #000 0 43%, transparent 49%);
  mask-image: linear-gradient(90deg, #000 0 43%, transparent 49%);
}

.hero-c-atmosphere::after {
  content: "";
  position: absolute;
  inset: 0;
  background-image:
    linear-gradient(rgba(255, 255, 255, .026) 1px, transparent 1px),
    linear-gradient(90deg, rgba(255, 255, 255, .026) 1px, transparent 1px);
  background-size: 48px 48px;
  -webkit-mask-image: linear-gradient(90deg, transparent 39%, #000 49% 100%);
  mask-image: linear-gradient(90deg, transparent 39%, #000 49% 100%);
}

.hero-c-orbit {
  z-index: 2;
  left: 3.1vw;
  top: 50%;
  width: min(38.5vw, 69vh, 790px);
  aspect-ratio: 1;
  transform: translateY(-50%);
}

.hero-c-orbit i {
  position: absolute;
  border: 1px solid rgba(7, 22, 47, .105);
  border-radius: 50%;
}

.hero-c-orbit i:nth-child(1) { inset: 0; }
.hero-c-orbit i:nth-child(2) {
  inset: 12%;
  border-style: dashed;
  transform: rotate(calc(var(--mx, 0) * 8deg));
  transition: transform .32s cubic-bezier(.2, .8, .2, 1);
}
.hero-c-orbit i:nth-child(3) {
  inset: 25%;
  border-color: rgba(23, 105, 255, .18);
  box-shadow: 0 0 46px rgba(23, 105, 255, .04);
}

.hero-c-ghost {
  z-index: 2;
  right: -4.2vw;
  top: 10vh;
  color: transparent;
  -webkit-text-stroke: 1px rgba(255, 255, 255, .047);
  font: 900 clamp(130px, 17vw, 540px)/.78 "Space Grotesk", sans-serif;
  letter-spacing: -.085em;
  white-space: nowrap;
  transform: translate3d(calc(var(--mx, 0) * -7px), calc(var(--my, 0) * -5px), 0);
  will-change: transform;
}

.hero-c-seam {
  z-index: 6;
  left: var(--hero-c-edge-top);
  top: -2%;
  width: 2px;
  height: 106%;
  transform: rotate(-3.18deg);
  transform-origin: 50% 0;
}

.hero-c-seam i {
  position: absolute;
  left: 50%;
  top: calc(50% + var(--my, 0) * 7%);
  width: 10px;
  height: 10px;
  border-radius: 50%;
  transform: translate(-50%, -50%);
  background: #fff;
  box-shadow: 0 0 0 7px rgba(23, 105, 255, .2), 0 0 32px 12px rgba(23, 105, 255, .47);
}

.hero-c-micro {
  z-index: 8;
  left: 4.9vw;
  bottom: 8.4vh;
  margin: 0;
  color: #53647c;
  font: 700 clamp(7px, .48vw, 11px)/1.2 "Space Grotesk", sans-serif;
  letter-spacing: .2em;
}

.hero-c-micro i {
  display: inline-block;
  width: 6px;
  height: 6px;
  margin-right: 13px;
  border-radius: 50%;
  background: var(--hero-c-blue);
  box-shadow: 0 0 0 8px rgba(23, 105, 255, .075);
}

.hero-c-micro b { color: var(--hero-c-blue); }

/* Logo: retain the current built-from-planes animation and add restrained depth. */
.concept-b .scene--brand.hero-refinement-c .logo-assembly {
  z-index: 7 !important;
  left: 4.1vw !important;
  top: 49.2% !important;
  width: min(36vw, 65vh, 790px) !important;
  transform: translateY(-50%) translate3d(calc(var(--mx, 0) * 4px), calc(var(--my, 0) * 4px), 0) !important;
  filter: drop-shadow(22px 30px 28px rgba(7, 22, 47, .16)) !important;
  will-change: transform;
}

.concept-b .scene--brand.hero-refinement-c .logo-caption {
  top: calc(100% + 1.5%) !important;
  bottom: auto !important;
  color: #10213a !important;
}

.concept-b .scene--brand.hero-refinement-c .assembly-status,
.concept-b .scene--brand.hero-refinement-c .type-rail,
.concept-b .scene--brand.hero-refinement-c .hero-promise-art,
.concept-b .scene--brand.hero-refinement-c .wordmark-line {
  display: none !important;
}

/* Promise: live type, two decisive lines, no baked image dependency. */
.concept-b .scene--brand.hero-refinement-c .wordmark-build {
  z-index: 7 !important;
  left: 58.8% !important;
  right: 3.2% !important;
  top: 49.2% !important;
  width: auto !important;
  max-width: none !important;
  transform: translateY(-50%) !important;
  align-items: flex-start !important;
  color: #fff !important;
  pointer-events: none !important;
}

.concept-b .scene--brand.hero-refinement-c .wordmark-build::before {
  content: "WEB / WORKFLOW / SYSTEMS" !important;
  display: block !important;
  align-self: flex-start !important;
  margin: 0 0 clamp(22px, 3vh, 46px) .12em !important;
  color: #78a9ff !important;
  font: 700 clamp(8px, .62vw, 14px)/1 "Space Grotesk", sans-serif !important;
  letter-spacing: .23em !important;
}

.concept-b .scene--brand.hero-refinement-c .wordmark-statement {
  display: block !important;
  width: 100% !important;
  max-width: none !important;
  margin: 0 !important;
  opacity: 1 !important;
  transform: none !important;
  animation: none !important;
}

.concept-b .scene--brand.hero-refinement-c .wordmark-statement > span,
.concept-b .scene--brand.hero-refinement-c .wordmark-statement::after {
  display: none !important;
}

.concept-b .scene--brand.hero-refinement-c .wordmark-statement strong {
  display: grid !important;
  grid-template-columns: max-content max-content;
  grid-template-rows: auto auto;
  width: max-content !important;
  max-width: 100% !important;
  gap: 0 .02em !important;
  margin: 0 !important;
  color: #fff !important;
  background: none !important;
  -webkit-background-clip: initial !important;
  background-clip: initial !important;
  -webkit-text-fill-color: #fff !important;
  -webkit-text-stroke: 0 !important;
  font: 900 clamp(78px, 6.5vw, 230px)/.84 "Zen Kaku Gothic New", "Space Grotesk", sans-serif !important;
  letter-spacing: -.105em !important;
  white-space: nowrap !important;
}

.concept-b .scene--brand.hero-refinement-c .wordmark-statement .statement-line {
  position: relative;
  display: block !important;
  align-self: auto !important;
  margin: 0 !important;
  padding: 0 !important;
  color: inherit !important;
  background: none !important;
  -webkit-text-fill-color: inherit !important;
  font: inherit !important;
  letter-spacing: inherit !important;
  transform: none !important;
}

.concept-b .scene--brand.hero-refinement-c .wordmark-statement .statement-line--lead {
  grid-column: 1 / -1;
  font-size: .62em !important;
  letter-spacing: -.075em !important;
}

.concept-b .scene--brand.hero-refinement-c .wordmark-statement .statement-line--focus {
  grid-column: 1;
  color: #bed2ff !important;
  -webkit-text-fill-color: #bed2ff !important;
}

.concept-b .scene--brand.hero-refinement-c .wordmark-statement .statement-line--focus::before {
  content: "" !important;
  position: absolute;
  left: .02em;
  right: -.02em;
  bottom: -.055em;
  height: .045em !important;
  background: linear-gradient(90deg, var(--hero-c-blue), rgba(23, 105, 255, .08)) !important;
  box-shadow: none !important;
  clip-path: none !important;
}

.concept-b .scene--brand.hero-refinement-c .wordmark-statement .statement-line--focus::after {
  content: none !important;
  display: none !important;
}

.concept-b .scene--brand.hero-refinement-c .wordmark-statement .statement-line--end {
  grid-column: 2;
}

.concept-b .scene--brand.hero-refinement-c .wordmark-tagline {
  display: block !important;
  align-self: flex-start !important;
  width: auto !important;
  margin: clamp(26px, 3.3vh, 52px) 0 0 .12em !important;
  color: rgba(255, 255, 255, .52) !important;
  background: none !important;
  -webkit-background-clip: initial !important;
  background-clip: initial !important;
  opacity: 1 !important;
  transform: none !important;
  animation: none !important;
  font: 700 clamp(7px, .56vw, 13px)/1 "Space Grotesk", sans-serif !important;
  letter-spacing: .28em !important;
}

.concept-b .scene--brand.hero-refinement-c .wordmark-tagline::before,
.concept-b .scene--brand.hero-refinement-c .wordmark-tagline::after {
  display: none !important;
}

/* Keep the service scenes visually related: same paper, grid density and rails. */
.concept-b.theme-living-seam .scene--service {
  --paper: #f6f5f0;
}

.concept-b.theme-living-seam .scene--service .scene__copy::before {
  background-size: 48px 48px !important;
}

.concept-b.theme-living-seam .scene-progress button {
  border-color: rgba(255, 255, 255, .26) !important;
  background: rgba(255, 255, 255, .18) !important;
}

.concept-b.theme-living-seam .scene-progress button.is-active {
  box-shadow: 0 0 12px rgba(23, 105, 255, .32);
}

.concept-b.theme-living-seam .scene-progress button:nth-child(1).is-active,
.concept-b.theme-living-seam .scene-progress button:nth-child(2).is-active {
  background: #1769ff !important;
}

.concept-b.theme-living-seam .scene-progress button:nth-child(3).is-active {
  background: #18a957 !important;
  box-shadow: 0 0 12px rgba(24, 169, 87, .3);
}

.concept-b.theme-living-seam .scene-progress button:nth-child(4).is-active {
  background: #ff6a1a !important;
  box-shadow: 0 0 12px rgba(255, 106, 26, .3);
}

@media (max-width: 1100px) and (orientation: portrait), (max-width: 900px) {
  .concept-b .scene--brand.hero-refinement-c {
    --hero-c-edge-top: 45.2%;
    --hero-c-edge-bottom: 48.2%;
  }

  .concept-b .scene--brand.hero-refinement-c::before {
    clip-path: polygon(0 var(--hero-c-edge-top), 100% var(--hero-c-edge-bottom), 100% 100%, 0 100%) !important;
    background:
      radial-gradient(circle at 72% 35%, rgba(33, 82, 161, .34) 0, transparent 34%),
      linear-gradient(150deg, var(--hero-c-ink-light), var(--hero-c-ink) 68%) !important;
  }

  .concept-b .scene--brand.hero-refinement-c::after {
    clip-path: polygon(
      0 calc(var(--hero-c-edge-top) - .13%),
      100% calc(var(--hero-c-edge-bottom) - .13%),
      100% calc(var(--hero-c-edge-bottom) + .13%),
      0 calc(var(--hero-c-edge-top) + .13%)
    ) !important;
    background: linear-gradient(90deg, transparent 1%, #1769ff 18%, #8db7ff 50%, #1769ff 82%, transparent 99%) !important;
  }

  .hero-c-atmosphere::before,
  .hero-c-atmosphere::after {
    background-size: 36px 36px;
  }

  .hero-c-atmosphere::before {
    -webkit-mask-image: linear-gradient(#000 0 45%, transparent 51%);
    mask-image: linear-gradient(#000 0 45%, transparent 51%);
  }

  .hero-c-atmosphere::after {
    -webkit-mask-image: linear-gradient(transparent 42%, #000 49% 100%);
    mask-image: linear-gradient(transparent 42%, #000 49% 100%);
  }

  .hero-c-orbit {
    left: 50%;
    top: 22.5%;
    width: min(62vw, 34svh, 450px);
    transform: translate(-50%, -50%);
  }

  .hero-c-ghost {
    right: -7vw;
    top: 53svh;
    font-size: 33vw;
  }

  .hero-c-seam {
    left: -2%;
    top: var(--hero-c-edge-top);
    width: 104%;
    height: 2px;
    transform: rotate(1.72deg);
    transform-origin: 0 50%;
  }

  .hero-c-seam i {
    left: calc(50% + var(--mx, 0) * 11%);
    top: 50%;
  }

  .hero-c-micro {
    left: auto;
    right: 24px;
    top: 39.7svh;
    bottom: auto;
    text-align: right;
    font-size: 7px;
  }

  .concept-b .scene--brand.hero-refinement-c .logo-assembly {
    left: 50% !important;
    top: 3.6svh !important;
    width: min(55vw, 31svh, 390px) !important;
    transform: translateX(-50%) translate3d(calc(var(--mx, 0) * 3px), calc(var(--my, 0) * 3px), 0) !important;
  }

  .concept-b .scene--brand.hero-refinement-c .wordmark-build {
    left: 50% !important;
    right: auto !important;
    top: 60.5svh !important;
    width: min(86vw, 650px) !important;
    transform: translateX(-50%) !important;
  }

  .concept-b .scene--brand.hero-refinement-c .wordmark-build::before {
    margin-bottom: 2.2svh !important;
    font-size: 7px !important;
  }

  .concept-b .scene--brand.hero-refinement-c .wordmark-statement strong {
    font-size: clamp(58px, 14.3vw, 96px) !important;
  }

  .concept-b .scene--brand.hero-refinement-c .wordmark-tagline {
    margin-top: 2.6svh !important;
    font-size: 6.5px !important;
  }
}

@media (max-width: 600px) {
  .concept-b .scene--brand.hero-refinement-c {
    --hero-c-edge-top: 44.5%;
    --hero-c-edge-bottom: 47.5%;
  }

  .hero-c-orbit {
    top: 22%;
    width: min(67vw, 33svh, 300px);
  }

  .hero-c-micro {
    left: auto;
    right: 20px;
    top: 39.2svh;
    letter-spacing: .16em;
  }

  .concept-b .scene--brand.hero-refinement-c .logo-assembly {
    top: 3.5svh !important;
    width: min(60vw, 30.5svh, 300px) !important;
  }

  .concept-b .scene--brand.hero-refinement-c .wordmark-build {
    top: 59.2svh !important;
    width: calc(100vw - 40px) !important;
  }

  .concept-b .scene--brand.hero-refinement-c .wordmark-build::before {
    margin-left: .06em !important;
    margin-bottom: 2svh !important;
    letter-spacing: .2em !important;
  }

  .concept-b .scene--brand.hero-refinement-c .wordmark-statement strong {
    font-size: clamp(49px, 14.3vw, 72px) !important;
    line-height: .85 !important;
  }

  .concept-b .scene--brand.hero-refinement-c .wordmark-tagline {
    margin-left: .06em !important;
    margin-top: 2.3svh !important;
    letter-spacing: .22em !important;
  }

  .recruit-float {
    top: clamp(198px, calc(34.5svh + 4px), 314px) !important;
  }
}

@media (max-width: 380px), (max-width: 800px) and (max-height: 700px) {
  .concept-b .scene--brand.hero-refinement-c {
    --hero-c-edge-top: 43.5%;
    --hero-c-edge-bottom: 46.5%;
  }

  .hero-c-orbit { top: 21%; width: min(58vw, 28svh, 250px); }
  .hero-c-micro { display: none; }

  .concept-b .scene--brand.hero-refinement-c .logo-assembly {
    top: 2.4svh !important;
    width: min(53vw, 27.5svh, 250px) !important;
  }

  .concept-b .scene--brand.hero-refinement-c .wordmark-build {
    top: 56.5svh !important;
    width: calc(100vw - 34px) !important;
  }

  .concept-b .scene--brand.hero-refinement-c .wordmark-statement strong {
    font-size: clamp(44px, 13.6vw, 58px) !important;
  }

  .concept-b .scene--brand.hero-refinement-c .wordmark-tagline { margin-top: 1.8svh !important; }
}

@media (max-width: 900px) and (orientation: landscape) and (max-height: 520px) {
  .concept-b .scene--brand.hero-refinement-c {
    --hero-c-edge-top: 47%;
    --hero-c-edge-bottom: 42%;
  }

  .concept-b .scene--brand.hero-refinement-c::before {
    clip-path: polygon(var(--hero-c-edge-top) 0, 100% 0, 100% 100%, var(--hero-c-edge-bottom) 100%) !important;
  }

  .hero-c-orbit { left: 3vw; top: 50%; width: min(37vw, 68vh); transform: translateY(-50%); }
  .hero-c-seam { left: var(--hero-c-edge-top); top: -2%; width: 2px; height: 106%; transform: rotate(-3.18deg); }
  .hero-c-micro { left: 4vw; top: auto; bottom: 5vh; }
  .hero-c-ghost { right: -4vw; top: 8vh; font-size: 18vw; }

  .concept-b .scene--brand.hero-refinement-c .logo-assembly {
    left: 4vw !important;
    top: 50% !important;
    width: min(35vw, 67vh) !important;
    transform: translateY(-50%) !important;
  }

  .concept-b .scene--brand.hero-refinement-c .wordmark-build {
    left: 59% !important;
    right: 3% !important;
    top: 50% !important;
    width: auto !important;
    transform: translateY(-50%) !important;
  }

  .concept-b .scene--brand.hero-refinement-c .wordmark-build::before { margin-bottom: 3vh !important; }
  .concept-b .scene--brand.hero-refinement-c .wordmark-statement strong { font-size: min(5.8vw, 15vh) !important; }
  .concept-b .scene--brand.hero-refinement-c .wordmark-tagline { margin-top: 3vh !important; }
}

@media (min-width: 2500px) {
  .hero-c-atmosphere::before,
  .hero-c-atmosphere::after { background-size: 84px 84px; }
  .hero-c-micro { font-size: 16px; }
}

@media (prefers-reduced-motion: reduce) {
  .hero-c-orbit i:nth-child(2),
  .hero-c-ghost,
  .hero-c-seam i,
  .concept-b .scene--brand.hero-refinement-c .logo-assembly {
    transition: none !important;
  }
}

@media (prefers-contrast: more) {
  .concept-b .scene--brand.hero-refinement-c::before {
    background: #06152d !important;
  }
  .hero-c-micro { color: #1c2f4a; }
}