/* NAV */
.nav {
  position: fixed;
  top: 0;
  left: 0;
  right: 0;
  z-index: 60;
  height: var(--nav-h);
  display: flex;
  align-items: center;
  background: transparent;
  transition: background 0.4s ease, backdrop-filter 0.4s ease;
}

.nav.is-scrolled {
  background: rgba(8, 8, 8, 0.62);
  backdrop-filter: blur(22px);
  -webkit-backdrop-filter: blur(22px);
}

body.is-nav-open .nav {
  background: #080808;
  backdrop-filter: none;
  -webkit-backdrop-filter: none;
}

.nav-inner {
  width: calc(100% - 80px);
  max-width: var(--max);
  margin: 0 auto;
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 32px;
}

.brand {
  display: flex;
  align-items: center;
  gap: 12px;
  justify-self: start;
  flex-shrink: 0;
  transition: opacity 0.3s ease, transform 0.3s var(--ease);
}

.brand:hover {
  opacity: 0.82;
  transform: translateY(-1px);
}

.brand-logo {
  display: block;
  height: 36px;
  width: auto;
  object-fit: contain;
}

.brand-name {
  font-size: 14px;
  font-weight: 500;
  letter-spacing: 0.18em;
  color: var(--text);
  line-height: 1;
}

.nav-links {
  display: flex;
  gap: 32px;
  margin-left: auto;
}

.nav-links a {
  position: relative;
  font-size: 13px;
  color: var(--text-3);
  padding: 8px 0;
  transition: color 0.3s ease;
}

.nav-links a::after {
  content: "";
  position: absolute;
  left: 0;
  bottom: 2px;
  width: 100%;
  height: 1px;
  background: var(--accent);
  transform: scaleX(0);
  transform-origin: left;
  transition: transform 0.35s var(--ease);
}

.nav-links a:hover,
.nav-links a.is-active {
  color: var(--text);
}

.nav-links a:hover::after,
.nav-links a.is-active::after {
  transform: scaleX(1);
}

.nav-toggle {
  display: none;
  width: 28px;
  height: 16px;
  position: relative;
  margin-left: auto;
}

.nav-toggle span {
  position: absolute;
  left: 0;
  width: 100%;
  height: 1px;
  background: var(--text);
  transition: transform 0.35s var(--ease), opacity 0.2s ease;
}

.nav-toggle span:first-child {
  top: 3px;
}

.nav-toggle span:last-child {
  bottom: 3px;
}

.nav-toggle:hover span {
  background: var(--accent);
}

.nav-toggle:active {
  transform: scale(0.94);
}

body.is-nav-open .nav-toggle span:first-child {
  top: 8px;
  transform: rotate(45deg);
}

body.is-nav-open .nav-toggle span:last-child {
  bottom: 7px;
  transform: rotate(-45deg);
}

.nav-overlay {
  position: fixed;
  inset: 0;
  z-index: 58;
  display: flex;
  flex-direction: column;
  padding: calc(var(--nav-h) + 12px) 24px 28px;
  background: #080808;
  opacity: 0;
  visibility: hidden;
  pointer-events: none;
  transition: opacity 0.35s ease, visibility 0.35s ease;
}

body.is-nav-open .nav-overlay {
  opacity: 1;
  visibility: visible;
  pointer-events: auto;
}

.nav-overlay-list {
  flex: 1;
  display: flex;
  flex-direction: column;
  justify-content: center;
  transform: translateY(12px);
  transition: transform 0.45s var(--ease);
}

body.is-nav-open .nav-overlay-list {
  transform: none;
}

.nav-overlay-list a {
  display: flex;
  align-items: baseline;
  gap: 16px;
  padding: 18px 0 18px 14px;
  border-bottom: 1px solid var(--line);
  font-size: clamp(28px, 8vw, 36px);
  letter-spacing: -0.04em;
  line-height: 1.1;
  color: var(--text-2);
  position: relative;
  transition: color 0.3s ease, transform 0.45s var(--ease), border-color 0.3s ease;
}

.nav-overlay-list a:last-child {
  border-bottom: 0;
}

.nav-overlay-idx {
  flex-shrink: 0;
  font-family: var(--font-en);
  font-size: 11px;
  letter-spacing: 0.18em;
  color: var(--text-3);
}

.nav-overlay-label {
  display: inline-flex;
  align-items: center;
}

.nav-overlay-list a.is-active {
  color: var(--accent);
}

.nav-overlay-list a.is-active .nav-overlay-idx {
  color: var(--accent);
}

.nav-overlay-list a.is-active::before {
  content: "";
  position: absolute;
  left: 0;
  top: 50%;
  width: 2px;
  height: 18px;
  background: var(--accent);
  transform: translateY(-50%);
}

.nav-overlay-list a.is-active .nav-overlay-label::after {
  content: "";
  width: 6px;
  height: 6px;
  margin-left: 12px;
  border-radius: 50%;
  background: var(--accent);
}

.nav-overlay-list a::after {
  content: "↗";
  margin-left: auto;
  padding-right: 4px;
  color: var(--accent);
  font-family: var(--font-en);
  font-size: 16px;
  opacity: 0;
  transform: translate(-8px, 6px);
  transition: opacity 0.3s ease, transform 0.45s var(--ease);
}

.nav-overlay-list a:hover {
  color: var(--text);
  transform: translateX(8px);
}

.nav-overlay-list a:hover::after {
  opacity: 1;
  transform: none;
}

.nav-overlay-foot {
  padding-top: 20px;
  font-size: 12px;
  letter-spacing: 0.12em;
  color: var(--text-3);
}

/* HERO */
.hero {
  min-height: 100vh;
  padding: calc(var(--nav-h) + 24px) 0 32px;
  display: flex;
  flex-direction: column;
  justify-content: space-between;
  overflow: hidden;
}

.hero-kicker {
  width: calc(100% - 80px);
  max-width: var(--max);
  margin: 0 auto;
}

.hero-copy {
  width: calc(100% - 80px);
  max-width: var(--max);
  margin: 18px auto 0;
  display: grid;
  grid-template-columns: 1.4fr 0.8fr;
  align-items: end;
  gap: 24px;
}

.hero-title {
  font-size: clamp(64px, 8vw, 150px);
  font-weight: 400;
  letter-spacing: -0.04em;
  line-height: 0.92;
  overflow: visible;
  text-rendering: geometricPrecision;
  -webkit-font-smoothing: antialiased;
  -moz-osx-font-smoothing: grayscale;
}

.hero-title .line {
  display: block;
  overflow: hidden;
  padding: 0.06em 0.04em 0.12em;
  margin: -0.06em -0.04em -0.12em;
}

.hero-title .line span {
  display: block;
}

.hero-en {
  font-size: clamp(14px, 1.4vw, 20px);
  letter-spacing: 0.06em;
  color: var(--text-2);
  text-align: right;
  padding-bottom: 10px;
}

.hero-visual {
  width: calc(100% - 80px);
  max-width: var(--max);
  margin: 28px auto 0;
  height: min(58vh, 680px);
  overflow: hidden;
  background: var(--bg-3);
}

.hero-visual img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  object-position: center 40%;
  will-change: transform;
}

.hero-foot {
  width: calc(100% - 80px);
  max-width: var(--max);
  margin: 22px auto 0;
  display: flex;
  justify-content: space-between;
  align-items: center;
  font-size: 13px;
  letter-spacing: 0.12em;
  color: var(--text-2);
}

.scroll-hint {
  display: flex;
  align-items: center;
  gap: 10px;
}

.scroll-hint::after {
  content: "";
  width: 1px;
  height: 36px;
  background: var(--accent);
  animation: pulse-line 1.8s ease-in-out infinite;
}

@keyframes pulse-line {
  0%,
  100% {
    transform: scaleY(0.4);
    opacity: 0.4;
    transform-origin: top;
  }
  50% {
    transform: scaleY(1);
    opacity: 1;
  }
}

/* STATEMENT */
.statement {
  min-height: 100vh;
  display: grid;
  place-items: center;
  padding: 20vh 0;
}

.statement p {
  width: calc(100% - 80px);
  max-width: 920px;
  margin: 0 auto;
  font-size: clamp(28px, 3.2vw, 48px);
  line-height: 1.45;
  letter-spacing: -0.03em;
  font-weight: 400;
}

.statement .word {
  color: #2a2a2a;
  display: inline;
  transition: color 0.4s linear;
}

.statement .word.is-on {
  color: var(--text);
}

.statement .word.is-accent {
  white-space: nowrap;
}

.statement .word.is-accent.is-on {
  color: var(--accent);
}

.statement p::before {
  content: "";
  display: block;
  width: 28px;
  height: 2px;
  margin-bottom: 28px;
  background: var(--accent);
  animation: statement-mark 2.8s ease-in-out infinite;
}

.statement p::after {
  content: "";
  display: block;
  width: 100%;
  height: 1px;
  margin-top: 32px;
  background: linear-gradient(90deg, rgba(182, 255, 59, 0.7), transparent 78%);
  transform-origin: left;
  animation: statement-rule 5s ease-in-out infinite;
}

@keyframes statement-mark {
  0%, 100% { width: 28px; opacity: 1; }
  50% { width: 56px; opacity: 0.55; }
}

@keyframes statement-rule {
  0%, 100% { transform: scaleX(0.35); opacity: 0.45; }
  50% { transform: scaleX(1); opacity: 1; }
}

/* SYSTEM STAGE — first-screen flip */
.system-stage {
  height: 600vh;
  position: relative;
  background: var(--bg);
}

.system-stage-pin {
  position: sticky;
  top: 0;
  height: 100vh;
  height: 100dvh;
  overflow: hidden;
  display: flex;
  flex-direction: column;
  padding: calc(var(--nav-h) + 18px) 0 28px;
}

.system-stage-top {
  width: calc(100% - 80px);
  max-width: var(--max);
  margin: 0 auto;
  flex-shrink: 0;
  z-index: 2;
}

.system-stage-title {
  margin-top: 12px;
  font-size: clamp(28px, 3.4vw, 52px);
  font-weight: 400;
  letter-spacing: -0.04em;
  line-height: 1.12;
  text-rendering: geometricPrecision;
  -webkit-font-smoothing: antialiased;
}

.system-stage-body {
  position: relative;
  flex: 1;
  min-height: 0;
  width: calc(100% - 176px);
  max-width: calc(var(--max) - 96px);
  margin: 8px auto 0;
}

.system-slide {
  position: absolute;
  inset: 0;
  display: grid;
  grid-template-columns: 0.9fr 1.1fr;
  grid-template-areas: "copy visual";
  align-items: center;
  gap: 40px;
  opacity: 0;
  visibility: hidden;
  pointer-events: none;
  transform: translateY(28px);
  will-change: opacity, transform;
  transition:
    opacity 0.7s var(--ease),
    transform 0.9s var(--ease),
    visibility 0.7s;
}

.system-slide.is-flip {
  grid-template-columns: 1.1fr 0.9fr;
  grid-template-areas: "visual copy";
}

.system-slide.is-on {
  opacity: 1;
  visibility: visible;
  pointer-events: auto;
  transform: none;
}

.system-slide-copy {
  grid-area: copy;
  min-width: 0;
  overflow: hidden;
}

.system-visual {
  grid-area: visual;
  height: min(62vh, 680px);
  overflow: hidden;
  background: transparent;
}

.system-char {
  display: block;
  font-size: clamp(88px, 11vw, 168px);
  line-height: 1;
  letter-spacing: 0;
  font-weight: 400;
  color: var(--text);
  overflow: visible;
  white-space: nowrap;
  margin: 0 0 8px;
  text-rendering: geometricPrecision;
  -webkit-font-smoothing: antialiased;
  -moz-osx-font-smoothing: grayscale;
  -webkit-text-stroke: 0;
  opacity: 0.28;
  transform: translateY(18px);
  transition: opacity 0.8s ease, transform 0.9s var(--ease);
}

.system-slide.is-on .system-char {
  opacity: 1;
  transform: none;
}

.system-copy h2 {
  font-size: clamp(28px, 3vw, 48px);
  font-weight: 400;
  letter-spacing: -0.04em;
  margin: 10px 0 8px;
  text-rendering: geometricPrecision;
  -webkit-font-smoothing: antialiased;
}

.system-copy .en {
  font-size: 13px;
  letter-spacing: 0.12em;
  color: var(--text-2);
}

.system-visual img {
  width: 100%;
  height: 100%;
  object-fit: contain;
  transform: scale(1.1);
  transition: transform 1.35s var(--ease);
}

.system-slide.is-on .system-visual img {
  transform: scale(1);
}

.system-rail {
  position: absolute;
  right: max(28px, calc((100% - var(--max)) / 2 + 20px));
  top: 50%;
  transform: translateY(-50%);
  z-index: 4;
  display: flex;
  flex-direction: column;
  align-items: flex-end;
  gap: 14px;
}

.system-rail button {
  position: relative;
  padding-right: 16px;
  font-size: 14px;
  letter-spacing: 0.16em;
  color: var(--text-3);
  transition: color 0.35s ease;
}

.system-rail button::after {
  content: "";
  position: absolute;
  right: 0;
  top: 50%;
  width: 6px;
  height: 6px;
  border-radius: 50%;
  background: var(--text-3);
  transform: translateY(-50%);
  transition: background 0.35s ease, transform 0.35s ease;
}

.system-rail button.is-on {
  color: var(--text);
}

.system-rail button.is-on::after {
  background: var(--accent);
  transform: translateY(-50%) scale(1.35);
}

.system-stage-foot {
  width: calc(100% - 80px);
  max-width: var(--max);
  margin: 16px auto 0;
  display: flex;
  justify-content: space-between;
  align-items: center;
  font-size: 13px;
  letter-spacing: 0.12em;
  color: var(--text-2);
  flex-shrink: 0;
  z-index: 2;
}

.system-index {
  color: var(--text);
  letter-spacing: 0.18em;
  font-variant-numeric: tabular-nums;
}

/* FLAGSHIP */
.flagship {
  padding: 16vh 0;
}

.flagship-item {
  display: grid;
  grid-template-columns: minmax(240px, 0.78fr) minmax(0, 1.22fr);
  grid-template-areas: "meta visual";
  gap: 40px 72px;
  width: calc(100% - 80px);
  max-width: var(--max);
  margin: 0 auto 12vh;
  align-items: center;
  color: inherit;
  text-decoration: none;
}

.flagship-item.is-flip {
  grid-template-columns: minmax(0, 1.22fr) minmax(240px, 0.78fr);
  grid-template-areas: "visual meta";
}

.flagship-meta {
  grid-area: meta;
  max-width: 420px;
}

.flagship-item.is-flip .flagship-meta {
  justify-self: end;
}

.flagship-meta .idx {
  display: block;
  font-family: var(--font-en);
  font-size: clamp(36px, 4.4vw, 64px);
  letter-spacing: -0.04em;
  color: var(--accent);
  line-height: 1;
  margin-bottom: 20px;
}

.flagship-meta h3 {
  font-size: clamp(28px, 3.2vw, 48px);
  letter-spacing: -0.04em;
  line-height: 1.18;
  font-weight: 400;
  margin: 0;
}

.flagship-cat {
  display: inline-block;
  margin-top: 22px;
  padding-top: 18px;
  border-top: 1px solid var(--line);
  font-size: 13px;
  letter-spacing: 0.14em;
  color: var(--text-2);
}

.flagship-visual {
  grid-area: visual;
  aspect-ratio: 4 / 3;
  height: auto;
  min-height: 0;
}

.flagship-visual img {
  width: 100%;
  height: 100%;
  object-fit: contain;
  background: #000;
}

/* STORY */
.story {
  position: relative;
  height: 500vh;
  background: var(--bg-2);
}

.story-pin {
  position: sticky;
  top: 0;
  height: 100vh;
  display: grid;
  grid-template-columns: 1.35fr 0.65fr;
  align-items: center;
  gap: 48px;
  width: calc(100% - 80px);
  max-width: var(--max);
  margin: 0 auto;
}

.story-visual {
  position: relative;
  height: min(78vh, 820px);
  overflow: hidden;
  background: var(--bg-3);
}

.story-visual img {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  max-width: none;
  max-height: none;
  object-fit: cover;
  object-position: center;
  opacity: 0;
  transform: scale(1.025);
  transition: opacity 0.7s ease, transform 1.2s var(--ease);
}

.story-visual img.is-on {
  opacity: 1;
  transform: scale(1);
}

.story-copy {
  display: grid;
  gap: 8px;
}

.story-copy > .kicker {
  margin-bottom: 8px;
}

.story-point {
  opacity: 0.16;
  transform: translateY(12px);
  transition: opacity 0.45s ease, transform 0.45s ease;
  padding: 12px 0;
}

.story-point.is-on {
  opacity: 1;
  transform: none;
}

.story-point .idx {
  font-family: var(--font-en);
  color: var(--accent);
  font-size: 13px;
  letter-spacing: 0.16em;
}

.story-point h3 {
  font-size: clamp(24px, 2.4vw, 40px);
  letter-spacing: -0.04em;
  margin: 12px 0 10px;
}

.story-point p {
  color: var(--text-2);
  font-size: 15px;
  line-height: 1.8;
  max-width: 340px;
}

.story-shot {
  display: none;
}

/* DATA */
.data {
  min-height: 100vh;
  display: flex;
  flex-direction: column;
  justify-content: center;
  padding: 18vh 0;
  background: #050505;
}

.data-list {
  width: calc(100% - 80px);
  max-width: var(--max);
  margin: 64px auto 0;
  display: grid;
  gap: 8px;
}

.data-item {
  display: grid;
  grid-template-columns: 1.1fr 0.9fr;
  align-items: end;
  border-top: 1px solid var(--line);
  padding: 12px 0 28px;
}

.data-item .num {
  font-size: clamp(72px, 12vw, 220px);
  line-height: 0.8;
  letter-spacing: -0.07em;
}

.data-item p {
  color: var(--text-2);
  font-size: clamp(16px, 1.6vw, 22px);
  padding-bottom: 12px;
}

/* SOLUTIONS / CASES blocks */
.scene {
  min-height: 100vh;
  position: relative;
  display: flex;
  align-items: flex-end;
  overflow: hidden;
}

.scene img {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  object-fit: cover;
  filter: brightness(0.55);
  transform: scale(1.04);
}

.scene-content {
  position: relative;
  z-index: 1;
  width: calc(100% - 80px);
  max-width: var(--max);
  margin: 0 auto 10vh;
}

.scene-content h3 {
  font-size: clamp(40px, 6vw, 96px);
  letter-spacing: -0.045em;
  line-height: 0.95;
}

.scene-content p {
  margin-top: 16px;
  max-width: 420px;
  color: #d4d4d4;
}

body[data-page="home"] .scene-stage {
  position: relative;
  height: calc((var(--scene-count, 5) + 1) * 100vh);
}

body[data-page="home"] .scene-stage-pin {
  position: sticky;
  top: 0;
  height: 100vh;
  height: 100svh;
  overflow: hidden;
  background: var(--bg-3);
}

body[data-page="home"] .scene-stage .scene {
  position: absolute;
  inset: 0;
  height: 100%;
  min-height: 0;
  opacity: 0;
  visibility: hidden;
  pointer-events: none;
  transition: opacity .65s ease, visibility .65s;
}

body[data-page="home"] .scene-stage .scene.is-on {
  opacity: 1;
  visibility: visible;
  pointer-events: auto;
}

body[data-page="home"] .scene-stage .scene img {
  transform: scale(1.06);
  transition: transform 1.2s var(--ease);
}

body[data-page="home"] .scene-stage .scene.is-on img {
  transform: scale(1);
}

body[data-page="home"] .scene-stage-foot {
  position: absolute;
  z-index: 2;
  right: 40px;
  bottom: 24px;
  left: 40px;
  display: flex;
  align-items: center;
  justify-content: space-between;
  font-size: 13px;
  letter-spacing: .12em;
}

@media(max-width:1024px) {
  body[data-page="home"] .scene-stage { height: calc((var(--scene-count, 5) + 1) * 100svh); }
  body[data-page="home"] .scene-stage-foot { right: 24px; left: 24px; }
}

@media(prefers-reduced-motion:reduce) {
  body[data-page="home"] .scene-stage { height: auto; }
  body[data-page="home"] .scene-stage-pin { position: relative; height: auto; }
  body[data-page="home"] .scene-stage .scene { position: relative; height: auto; min-height: 80vh; opacity: 1; visibility: visible; pointer-events: auto; }
  body[data-page="home"] .scene-stage .scene img { transform: none; }
  body[data-page="home"] .scene-stage-foot { display: none; }
}

.case-row {
  width: calc(100% - 80px);
  max-width: var(--max);
  margin: 0 auto 12vh;
}

.case-row .media {
  aspect-ratio: 16 / 8.2;
}

.case-meta {
  display: flex;
  justify-content: space-between;
  gap: 24px;
  padding: 22px 0 0;
  font-size: 14px;
}

.case-meta .en {
  color: var(--text-2);
  font-size: 13px;
  letter-spacing: 0.06em;
}

/* BRAND */
.brand-block {
  min-height: 90vh;
  display: grid;
  grid-template-columns: 1.1fr 0.9fr;
  gap: 48px;
  align-items: end;
  width: calc(100% - 80px);
  max-width: var(--max);
  margin: 0 auto;
  padding: 18vh 0;
}

.brand-block .display {
  font-family: var(--font-en);
  font-size: clamp(56px, 10vw, 180px);
  letter-spacing: -0.07em;
  line-height: 0.8;
}

.brand-block p {
  font-size: clamp(18px, 1.7vw, 24px);
  line-height: 1.7;
  color: var(--text-3);
  max-width: 440px;
}

.brand-block .link-arrow {
  margin-top: 36px;
}

.brand-block .logo-mark {
  width: min(280px, 48%);
}

.brand-block .logo-mark + p {
  margin-top: 28px;
}

/* CTA */
.cta {
  min-height: 90vh;
  display: grid;
  place-items: center;
  text-align: center;
  padding: 18vh 0;
}

.cta h2 {
  font-size: clamp(32px, 4.4vw, 64px);
  font-weight: 400;
  letter-spacing: -0.04em;
  line-height: 1.2;
  margin-bottom: 48px;
  text-rendering: geometricPrecision;
  -webkit-font-smoothing: antialiased;
  -moz-osx-font-smoothing: grayscale;
}

.cta-action {
  position: relative;
  display: inline-flex;
  align-items: center;
  justify-content: center;
}

.cta-ripple {
  position: absolute;
  width: 168px;
  height: 168px;
  border: 1px solid rgba(182, 255, 59, 0.28);
  border-radius: 50%;
  pointer-events: none;
  animation: cta-ripple 4.2s ease-out infinite;
}

.cta-ripple.is-delay {
  animation-delay: 2.1s;
}

@keyframes cta-ripple {
  0% {
    transform: scale(0.72);
    opacity: 0.55;
  }
  100% {
    transform: scale(1.35);
    opacity: 0;
  }
}

/* FOOTER */
.footer {
  padding: 12vh 0 32px;
  border-top: 1px solid var(--line);
}

.footer-mark {
  margin: 0;
}

.footer-mark img {
  display: block;
  width: min(132px, 24vw);
  height: auto;
  object-fit: contain;
}

.footer-grid {
  width: calc(100% - 80px);
  max-width: var(--max);
  margin: 0 auto;
  display: grid;
  grid-template-columns: 1.2fr 1fr 1fr;
  gap: 32px;
  align-items: start;
}

.footer-brand {
  display: flex;
  flex-direction: column;
  align-items: flex-start;
  gap: 16px;
}

.footer-aside {
  display: contents;
}

.footer-name {
  font-size: 13px;
  letter-spacing: 0.12em;
}

.footer-name small {
  display: block;
  margin-top: 8px;
  color: var(--text-2);
  font-size: 13px;
  letter-spacing: 0.08em;
}

.footer-links {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 8px 28px;
  font-size: 14px;
  color: var(--text-3);
}

.footer-links a {
  position: relative;
  padding: 8px 0;
  transition: color 0.3s ease;
}

.footer-links a::after {
  content: "";
  position: absolute;
  right: 0;
  bottom: 2px;
  left: 0;
  height: 1px;
  background: var(--accent);
  transform: scaleX(0);
  transform-origin: left center;
  transition: transform 0.35s var(--ease);
}

.footer-links a:hover,
.footer-links a.is-active {
  color: var(--text);
}

.footer-links a:hover::after,
.footer-links a.is-active::after {
  transform: scaleX(1);
}

.footer-qr {
  display: flex;
  justify-content: flex-end;
  gap: 20px;
}

.footer-qr figure {
  margin: 0;
  text-align: center;
}

.footer-qr img {
  width: 84px;
  height: 84px;
  background: #fff;
  padding: 3px;
  object-fit: contain;
  transition: transform 0.45s var(--ease), box-shadow 0.45s ease;
}

.footer-qr figure:hover img {
  transform: translateY(-4px);
  box-shadow: 0 8px 24px rgba(182, 255, 59, 0.08);
}

.footer-qr figcaption {
  margin-top: 8px;
  color: var(--text-2);
  font-size: 11px;
  letter-spacing: 0.08em;
}

.footer-legal {
  width: calc(100% - 80px);
  max-width: var(--max);
  margin: 56px auto 0;
  padding-top: 20px;
  border-top: 1px solid var(--line);
  display: flex;
  justify-content: space-between;
  gap: 16px;
  color: #5c5c5c;
  font-size: 11px;
}

.beian-link {
  color: inherit;
  text-decoration: none;
}

.beian-link:hover {
  color: var(--text-2);
}

/* PAGE HERO */
.page-hero {
  position: relative;
  padding: calc(var(--nav-h) + 72px) 0 72px;
  overflow: hidden;
}

.page-hero h1 {
  font-size: clamp(36px, 5vw, 72px);
  font-weight: 400;
  letter-spacing: -0.04em;
  line-height: 1.1;
  overflow: visible;
  text-rendering: geometricPrecision;
  -webkit-font-smoothing: antialiased;
  -moz-osx-font-smoothing: grayscale;
}

.page-hero p:not(.kicker) {
  margin-top: 24px;
  max-width: 520px;
  color: var(--text-2);
  font-size: 16px;
  line-height: 1.8;
}

/* PRODUCTS GRID */
.filters {
  display: flex;
  flex-wrap: wrap;
  gap: 8px 22px;
  width: calc(100% - 80px);
  max-width: var(--max);
  margin: 0 auto 56px;
  padding-bottom: 28px;
  border-bottom: 1px solid var(--line);
}

.filter-btn {
  font-size: 14px;
  letter-spacing: 0.08em;
  color: var(--text-2);
  padding: 8px 0;
  position: relative;
}

.filter-btn.is-on {
  color: var(--text);
}

.filter-btn.is-on::after {
  content: "";
  position: absolute;
  left: 0;
  bottom: 0;
  width: 6px;
  height: 6px;
  border-radius: 50%;
  background: var(--accent);
  transform: translate(calc(100% + 8px), -6px);
}

.cat-hero {
  padding: calc(var(--nav-h) + 48px) 0 36px;
}

.cat-hero h1 {
  font-size: clamp(32px, 4.4vw, 64px);
}

.cat-hero-row {
  display: flex;
  align-items: flex-end;
  justify-content: space-between;
  gap: 24px;
}

.cat-hero-count {
  margin: 0;
  padding-bottom: 8px;
  font-size: 13px;
  letter-spacing: 0.14em;
  color: var(--text-2);
  white-space: nowrap;
}

.product-grid {
  width: calc(100% - 80px);
  max-width: var(--max);
  margin: 0 auto 16vh;
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 36px 20px;
}

.product-card {
  display: block;
}

.product-card .media {
  aspect-ratio: 1 / 1;
  background: #101010;
  overflow: hidden;
}

.product-card .media img {
  width: 100%;
  height: 100%;
  object-fit: cover;
}

.product-card-no {
  position: absolute;
  left: 14px;
  bottom: 12px;
  font-family: var(--font-en);
  font-size: 12px;
  letter-spacing: 0.16em;
  color: var(--accent);
  text-shadow: 0 1px 12px rgba(0, 0, 0, 0.55);
}

.product-card .body {
  display: flex;
  justify-content: space-between;
  align-items: flex-end;
  gap: 12px;
  padding: 14px 0 0;
}

.product-card h3 {
  font-size: clamp(15px, 1.15vw, 18px);
  letter-spacing: -0.03em;
  line-height: 1.35;
  margin: 0 0 4px;
  font-weight: 400;
}

.product-card .en {
  font-size: 12px;
  color: var(--text-2);
  letter-spacing: 0.06em;
}

.product-card .arr {
  width: 12px;
  height: 12px;
  color: var(--accent);
  flex-shrink: 0;
  margin-bottom: 2px;
  transition: transform 0.4s var(--ease);
}

.product-card:hover .arr {
  transform: translate(5px, -5px);
}

.taxonomy {
  width: calc(100% - 80px);
  max-width: var(--max);
  margin: 0 auto 16vh;
}

.taxonomy h2 {
  font-size: clamp(28px, 3vw, 48px);
  letter-spacing: -0.04em;
  margin-bottom: 36px;
}

.taxonomy-list {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 0;
}

.taxonomy-list li {
  padding: 18px 0;
  border-top: 1px solid var(--line);
  display: flex;
  justify-content: space-between;
  gap: 12px;
  color: var(--text-3);
  font-size: 15px;
}

.taxonomy-list .en {
  font-size: 13px;
  letter-spacing: 0.06em;
}

/* DETAIL */
.pd {
  width: calc(100% - 80px);
  max-width: var(--max);
  margin: 0 auto;
  padding: calc(var(--nav-h) + 36px) 0 8vh;
  display: grid;
  grid-template-columns: minmax(0, 1.05fr) minmax(280px, 0.82fr);
  gap: 40px 64px;
  align-items: stretch;
}

.pd-gallery {
  min-width: 0;
}

.pd-stage {
  aspect-ratio: 1 / 1;
  overflow: hidden;
  background: #101010;
}

.pd-stage img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  display: block;
}

.pd-thumbs {
  display: flex;
  flex-wrap: wrap;
  gap: 8px;
  margin-top: 10px;
}

.pd-thumbs button {
  width: 76px;
  aspect-ratio: 1 / 1;
  overflow: hidden;
  background: #101010;
  border: 1px solid transparent;
  opacity: 0.48;
  cursor: pointer;
  transition: opacity 0.3s ease, border-color 0.3s ease;
}

.pd-thumbs button.is-on,
.pd-thumbs button:hover {
  opacity: 1;
  border-color: var(--accent);
}

.pd-thumbs img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  display: block;
}

.pd-info {
  position: sticky;
  top: calc(var(--nav-h) + 28px);
  display: flex;
  flex-direction: column;
  align-self: stretch;
  min-width: 0;
  min-height: 0;
  padding: 4px 0 0;
}

.pd-no {
  position: absolute;
  right: 0;
  top: -8px;
  font-family: var(--font-en);
  font-size: clamp(72px, 9vw, 128px);
  line-height: 0.75;
  letter-spacing: -0.08em;
  color: rgba(255, 255, 255, 0.045);
  pointer-events: none;
  user-select: none;
}

.pd-info .kicker {
  position: relative;
}

.pd-info h1 {
  position: relative;
  font-size: clamp(28px, 3.2vw, 52px);
  font-weight: 400;
  letter-spacing: -0.045em;
  line-height: 1.14;
  margin: 18px 0 12px;
  text-rendering: geometricPrecision;
  -webkit-font-smoothing: antialiased;
}

.pd-sub {
  position: relative;
  font-size: 13px;
  letter-spacing: 0.1em;
  color: var(--text-2);
}

.pd-rule {
  width: 36px;
  height: 2px;
  margin: 28px 0 22px;
  border: 0;
  background: var(--accent);
}

.pd-copy {
  max-width: 28em;
  color: var(--text-2);
  font-size: 15px;
  line-height: 1.85;
}

.pd-actions {
  margin-top: 32px;
}

.pd-facts {
  margin-top: auto;
  padding: 48px 0 0;
  list-style: none;
}

.pd-facts li {
  display: flex;
  justify-content: space-between;
  align-items: baseline;
  gap: 16px;
  padding: 14px 0;
  border-top: 1px solid var(--line);
  font-size: 14px;
}

.pd-facts li:last-child {
  border-bottom: 1px solid var(--line);
}

.pd-facts span:first-child {
  color: var(--text-2);
  letter-spacing: 0.08em;
  font-size: 12px;
}

.pd-facts span:last-child {
  text-align: right;
  color: var(--text);
}

.pd-detail {
  width: calc(100% - 80px);
  max-width: 980px;
  margin: 0 auto 12vh;
}

.pd-detail-head {
  display: flex;
  align-items: baseline;
  justify-content: space-between;
  gap: 16px;
  margin-bottom: 28px;
  padding-top: 48px;
  border-top: 1px solid var(--line);
}

.pd-detail-head h2 {
  font-size: clamp(22px, 2.2vw, 32px);
  font-weight: 400;
  letter-spacing: -0.04em;
}

.pd-detail img {
  width: 100%;
  height: auto;
  display: block;
  background: #111;
}

.detail-long {
  width: calc(100% - 80px);
  max-width: 860px;
  margin: 56px auto 8vh;
}

.detail-long img {
  width: 100%;
  height: auto;
  display: block;
  background: #111;
}

.detail-cta {
  width: calc(100% - 80px);
  max-width: var(--max);
  margin: 0 auto 16vh;
  padding-top: 8px;
}

.detail-cta p {
  max-width: 36em;
  color: var(--text-2);
  line-height: 1.8;
  margin-bottom: 28px;
}

.detail-claim {
  width: calc(100% - 80px);
  max-width: var(--max);
  margin: 12vh auto;
  font-size: clamp(32px, 4.4vw, 72px);
  letter-spacing: -0.04em;
  line-height: 1.15;
}

.story-full {
  min-height: 100vh;
  display: grid;
  grid-template-columns: 1fr 1fr;
  width: calc(100% - 80px);
  max-width: var(--max);
  margin: 0 auto;
  align-items: center;
  gap: 48px;
  border-top: 1px solid var(--line);
}

.story-full img {
  width: 100%;
  height: min(78vh, 780px);
  object-fit: cover;
}

.story-full h2 {
  font-size: clamp(28px, 3vw, 48px);
  letter-spacing: -0.04em;
  margin: 12px 0 16px;
}

.story-full p {
  color: var(--text-2);
  max-width: 420px;
  line-height: 1.85;
}

.specs {
  width: calc(100% - 80px);
  max-width: var(--max);
  margin: 8vh auto 16vh;
}

.specs h2 {
  font-size: clamp(32px, 4vw, 64px);
  letter-spacing: -0.04em;
  margin-bottom: 48px;
}

.spec-row {
  display: grid;
  grid-template-columns: 1fr 1fr;
  padding: 22px 0;
  border-top: 1px solid var(--line);
  letter-spacing: 0.04em;
  font-size: 15px;
}

.spec-row span:last-child {
  text-align: right;
  color: var(--text);
}

.spec-row span:first-child {
  color: var(--text-2);
}

.gallery {
  width: calc(100% - 80px);
  max-width: var(--max);
  margin: 0 auto 10vh;
}

.gallery .swiper-slide img {
  width: 100%;
  aspect-ratio: 16 / 10;
  object-fit: contain;
  background: #141414;
}

.swiper-pagination-bullet {
  background: #fff;
  opacity: 0.28;
}

.swiper-pagination-bullet-active {
  background: var(--accent);
  opacity: 1;
}

/* CONTACT / ABOUT extras */
.split {
  width: calc(100% - 80px);
  max-width: var(--max);
  margin: 0 auto 16vh;
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 64px;
}

.cap-list dt {
  font-size: 13px;
  letter-spacing: 0.08em;
  color: var(--accent);
  margin-top: 28px;
}

.cap-list dd {
  font-size: clamp(22px, 2vw, 32px);
  letter-spacing: -0.04em;
  padding: 8px 0 18px;
  border-bottom: 1px solid var(--line);
}

.form {
  display: grid;
  gap: 0;
}

.form label {
  font-size: 13px;
  letter-spacing: 0.08em;
  color: var(--text-2);
  padding-top: 20px;
}

.form input,
.form textarea,
.form select {
  width: 100%;
  border-bottom: 1px solid var(--line-strong);
  padding: 12px 0 16px;
  outline: none;
}

.form textarea {
  min-height: 120px;
  resize: vertical;
}

.form button {
  margin-top: 36px;
  justify-self: start;
}

.form button:disabled {
  cursor: wait;
  opacity: 0.55;
}

.form-note {
  margin-top: 16px;
  color: var(--text-2);
  font-size: 13px;
}

.form.is-sent .form-fields {
  display: none;
}

.form-done {
  display: none;
  font-size: clamp(24px, 3vw, 40px);
  letter-spacing: -0.04em;
}

.form.is-sent .form-done {
  display: block;
}

.form-error {
  display: none;
  margin-top: 16px;
  color: #dc806f;
  font-size: 13px;
  line-height: 1.6;
}

.form.is-error .form-error {
  display: block;
}

.contact-qr {
  width: calc(100% - 80px);
  max-width: var(--max);
  margin: 0 auto 12vh;
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 48px 80px;
}

.contact-qr-card {
  margin: 0;
  background: transparent;
  padding: 0;
  display: flex;
  flex-direction: column;
  align-items: flex-start;
  text-align: left;
}

.contact-qr-card img {
  width: min(200px, 52%);
  height: auto;
  background: #fff;
  padding: 4px;
}

.contact-qr-card h2 {
  margin-top: 18px;
  color: var(--text);
  font-size: 20px;
  font-weight: 400;
  letter-spacing: 0.02em;
}

.contact-qr-card p {
  margin-top: 8px;
  color: var(--text-2);
  font-size: 13px;
  letter-spacing: 0.06em;
}

.contact-place {
  margin-top: 36px;
  color: #5c5c5c;
  font-size: 12px;
  letter-spacing: 0.08em;
}

.contact-nation {
  width: calc(100% - 80px);
  max-width: var(--max);
  margin: 0 auto 14vh;
  display: grid;
  grid-template-columns: minmax(240px, 0.9fr) minmax(0, 1.4fr);
  gap: 48px 56px;
  align-items: center;
}

.contact-nation-copy h2 {
  margin: 14px 0 18px;
  font-size: clamp(40px, 5vw, 72px);
  letter-spacing: -0.05em;
  line-height: 0.96;
}

.contact-nation-copy > p:not(.kicker) {
  max-width: 34em;
  color: var(--text-2);
  line-height: 1.85;
}

.contact-nation-facts {
  display: grid;
  gap: 0;
  margin-top: 36px;
  padding: 0;
  list-style: none;
}

.contact-nation-facts li {
  display: flex;
  align-items: baseline;
  gap: 16px;
  padding: 14px 0;
  border-top: 1px solid var(--line);
  font-size: 16px;
  letter-spacing: 0.02em;
}

.contact-nation-facts li:last-child {
  border-bottom: 1px solid var(--line);
}

.contact-nation-facts span {
  font-size: 12px;
  letter-spacing: 0.14em;
  color: var(--accent);
}

.contact-nation-map {
  position: relative;
  min-height: 0;
}

.nation-inset-frame {
  fill: #0d0d0d;
  stroke: rgba(255, 255, 255, 0.28);
  stroke-width: 1;
}

.nation-inset-land {
  fill: #2a2a2a;
  stroke: rgba(255, 255, 255, 0.45);
  stroke-width: 1;
  stroke-linejoin: round;
}

.nation-svg {
  display: block;
  width: 100%;
  height: auto;
  overflow: visible;
}

.nation-map-stage {
  position: relative;
  width: 100%;
  aspect-ratio: 1040 / 780;
  overflow: hidden;
  background:
    radial-gradient(circle at 56% 43%, rgba(182, 255, 59, 0.08), transparent 38%),
    linear-gradient(145deg, #111 0%, #090909 72%);
}

.contact-nation-map .nation-svg {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  object-fit: contain;
}

.nation-overlay {
  position: absolute;
  inset: 0;
  display: block;
  width: 100%;
  height: 100%;
  overflow: visible;
  pointer-events: none;
}

.nation-aura {
  opacity: 0;
  transition: opacity 0.8s ease;
}

.contact-nation.is-on .nation-aura {
  opacity: 1;
}

.nation-map-caption {
  margin-top: 14px;
  color: var(--text-2);
  font-size: 11px;
  letter-spacing: 0.1em;
}

.form input,
.form textarea {
  transition: border-color 0.3s ease, color 0.3s ease;
}

.form input:focus,
.form textarea:focus {
  border-color: var(--accent);
}

.form input:user-invalid,
.form textarea:user-invalid {
  border-color: #dc806f;
}

.form.is-sent .form-note {
  display: none;
}

.nation-ray {
  stroke: var(--accent);
  stroke-width: 1.2;
  stroke-dasharray: 1;
  stroke-dashoffset: 0;
  opacity: 0.55;
}

.contact-nation:not(.is-on) .nation-ray {
  stroke-dashoffset: 1;
  opacity: 0;
}

.contact-nation.is-on .nation-ray {
  animation: nation-draw 1.7s var(--ease-out) forwards;
  animation-delay: calc(var(--i) * 80ms);
}

.nation-node {
  fill: var(--accent);
  opacity: 1;
  transform-box: fill-box;
  transform-origin: center;
}

.contact-nation:not(.is-on) .nation-node {
  opacity: 0;
}

.contact-nation.is-on .nation-node {
  animation: nation-node-in 0.5s ease forwards;
  animation-delay: calc(0.75s + var(--i) * 80ms);
}

.nation-spark {
  opacity: 0;
}

.contact-nation.is-on .nation-spark {
  opacity: 1;
}

.nation-hub-ring {
  fill: none;
  stroke: var(--accent);
  stroke-width: 1.1;
  transform-box: fill-box;
  transform-origin: center;
  opacity: 0;
}

.contact-nation.is-on .nation-hub-ring {
  animation: nation-ring 3.2s ease-out infinite;
  animation-delay: var(--d, 0s);
}

.nation-label {
  fill: #7a7a7a;
  font-size: 13px;
  letter-spacing: 0.08em;
  font-family: var(--font-cn);
}

@keyframes nation-draw {
  0% {
    stroke-dashoffset: 1;
    opacity: 0;
  }
  18% {
    opacity: 0.9;
  }
  100% {
    stroke-dashoffset: 0;
    opacity: 0.55;
  }
}

@keyframes nation-node-in {
  from {
    opacity: 0;
    transform: scale(0.2);
  }
  to {
    opacity: 1;
    transform: scale(1);
  }
}

@keyframes nation-ring {
  0% {
    transform: scale(0.35);
    opacity: 0.65;
  }
  100% {
    transform: scale(2.35);
    opacity: 0;
  }
}

@media (prefers-reduced-motion: reduce) {
  .nation-spark,
  .nation-hub-ring {
    display: none;
  }

  .contact-nation:not(.is-on) .nation-ray,
  .contact-nation:not(.is-on) .nation-node {
    opacity: 1;
    stroke-dashoffset: 0;
  }
}

.logo-mark {
  width: min(360px, 70%);
  height: auto;
}

.kicker a {
  color: inherit;
}

.kicker a:hover {
  color: var(--text);
}

.cat-grid {
  width: calc(100% - 80px);
  max-width: var(--max);
  margin: 0 auto 16vh;
  display: grid;
  grid-template-columns: 1fr 1fr 1fr;
  gap: 28px 24px;
}

.cat-card {
  display: block;
  border-top: 1px solid var(--line);
  padding-top: 18px;
}

.cat-card-media {
  position: relative;
  aspect-ratio: 4 / 3;
  height: auto;
  overflow: hidden;
  background: var(--bg-4);
}

.cat-card-media.is-empty {
  background:
    linear-gradient(180deg, #151515 0%, #0d0d0d 100%);
}

.cat-card-media img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  background: #161616;
  transition: transform 1.1s var(--ease);
}

.cat-card:hover img {
  transform: scale(1.05);
}

.cat-card-no {
  position: absolute;
  left: 16px;
  bottom: 14px;
  font-family: var(--font-en);
  font-size: 13px;
  letter-spacing: 0.14em;
  color: var(--accent);
}

.cat-card-body {
  display: flex;
  justify-content: space-between;
  align-items: flex-end;
  gap: 16px;
  padding: 16px 0 8px;
}

.cat-card-body h3 {
  font-size: clamp(16px, 1.35vw, 22px);
  letter-spacing: -0.04em;
  line-height: 1.25;
}

.cat-card-body p {
  margin-top: 6px;
  color: var(--text-2);
  font-size: 13px;
}

.cat-card-body .arr {
  width: 13px;
  height: 13px;
  color: var(--accent);
  transition: transform 0.4s var(--ease);
}

.cat-card:hover .arr {
  transform: translate(5px, -5px);
}

.cat-empty {
  width: calc(100% - 80px);
  max-width: var(--max);
  margin: 0 auto 18vh;
}

.cat-empty p {
  font-size: clamp(22px, 3vw, 36px);
  letter-spacing: -0.04em;
  margin-bottom: 12px;
}

.cat-empty .muted {
  font-size: 15px;
  max-width: 420px;
  line-height: 1.8;
  margin-bottom: 32px;
}

.service-hero-visual {
  width: calc(100% - 80px);
  max-width: var(--max);
  margin: 0 auto 8vh;
  height: min(62vh, 680px);
  overflow: hidden;
  background: var(--bg-4);
}

.service-hero-visual img {
  width: 100%;
  height: 100%;
  object-fit: cover;
}

.service-block {
  padding-bottom: 4vh;
}

.service-flow-wrap {
  padding: 10vh 0 6vh;
}

.service-flow {
  width: calc(100% - 80px);
  max-width: var(--max);
  margin: 48px auto 0;
  display: grid;
  grid-template-columns: repeat(5, 1fr);
  gap: 24px;
  border-top: 1px solid var(--line);
  padding-top: 36px;
}

.service-flow li span {
  display: block;
  font-family: var(--font-en);
  color: var(--accent);
  font-size: 13px;
  letter-spacing: 0.14em;
  margin-bottom: 16px;
}

.service-flow strong {
  display: block;
  font-size: 22px;
  font-weight: 400;
  letter-spacing: -0.04em;
  margin-bottom: 10px;
}

.service-flow p {
  color: var(--text-2);
  font-size: 14px;
  line-height: 1.7;
}

.service-after {
  padding: 8vh 0 4vh;
}

.service-grid {
  width: calc(100% - 80px);
  max-width: var(--max);
  margin: 48px auto 8vh;
  display: grid;
  grid-template-columns: 1fr 1fr 1fr;
  gap: 0;
}

.service-grid li {
  padding: 28px 28px 28px 0;
  border-top: 1px solid var(--line);
}

.service-grid strong {
  display: block;
  font-size: 20px;
  font-weight: 400;
  letter-spacing: -0.04em;
  margin-bottom: 10px;
}

.service-grid p {
  color: var(--text-2);
  font-size: 14px;
  line-height: 1.7;
  max-width: 280px;
}

/* Services — full-project service narrative */
.services-masthead{position:relative;min-height:100svh;overflow:hidden;background:#151719;color:#fff}.services-masthead>img{position:absolute;inset:0;width:100%;height:100%;object-fit:cover}.services-masthead-shade{position:absolute;inset:0;background:linear-gradient(90deg,rgba(8,12,14,.92),rgba(8,12,14,.42) 58%,rgba(8,12,14,.08)),linear-gradient(0deg,rgba(8,12,14,.45),transparent 45%)}.services-masthead-copy{position:relative;z-index:1;min-height:100svh;display:flex;flex-direction:column;justify-content:center;align-items:flex-start;padding-top:120px;padding-bottom:90px}.services-masthead-copy .kicker{color:#b8ff20}.services-masthead-copy h1{max-width:900px;margin:24px 0 28px;font-size:clamp(64px,8.4vw,138px);line-height:.94;letter-spacing:-.07em}.services-masthead-copy>p:not(.kicker){font-size:clamp(16px,1.35vw,21px);line-height:1.8;color:#ffffffb8}.services-hero-btn{margin-top:40px;background:#b8ff20;color:#101413}.services-scroll{position:absolute;z-index:2;right:4vw;bottom:42px;font-size:10px;letter-spacing:.16em;writing-mode:vertical-rl;display:flex;gap:16px;align-items:center;color:#ffffffa6}
.services-intro{display:grid;grid-template-columns:.65fr 1.35fr;gap:8vw;padding-top:clamp(100px,13vw,200px);padding-bottom:clamp(100px,13vw,200px)}.services-intro h2{max-width:850px;font-size:clamp(42px,6vw,94px);line-height:1;letter-spacing:-.055em}.services-intro div>p{max-width:720px;margin-top:40px;color:var(--muted);font-size:clamp(16px,1.4vw,21px);line-height:1.9}
.services-feature{display:grid;grid-template-columns:55% 45%;min-height:820px}.services-feature-reverse .services-feature-media{order:2}.services-feature-media{min-height:700px;overflow:hidden}.services-feature-media img{width:100%;height:100%;object-fit:cover;transition:transform .9s cubic-bezier(.2,.7,.2,1)}.services-feature:hover .services-feature-media img{transform:scale(1.025)}.services-feature-copy{display:flex;flex-direction:column;justify-content:center;padding:clamp(70px,8vw,150px)}.services-feature-dark{background:#171b1c;color:#fff}.services-feature-light{background:#f0f0eb;color:#121515}.services-index{font:500 11px/1 var(--mono,monospace);letter-spacing:.12em;opacity:.5}.services-feature-copy .kicker,.services-catalog .kicker,.services-delivery .kicker{margin-top:42px;color:#87c900}.services-feature-copy h2{margin:22px 0 36px;font-size:clamp(44px,4.8vw,78px);line-height:1.02;letter-spacing:-.055em}.services-feature-copy>p:not(.kicker){max-width:620px;opacity:.65;font-size:16px;line-height:1.9}.services-points{margin-top:48px;border-top:1px solid #ffffff2b}.services-points li{display:flex;gap:24px;padding:17px 0;border-bottom:1px solid #ffffff2b}.services-points span{color:#b8ff20;font:11px var(--mono,monospace)}.services-steps{display:grid;grid-template-columns:repeat(5,1fr);margin-top:54px;border-top:1px solid #0003}.services-steps span{position:relative;padding:24px 8px 0 0;font-size:13px}.services-steps span:before{content:"";position:absolute;top:-4px;left:0;width:7px;height:7px;border-radius:50%;background:#8fd400}
.services-catalog{padding:clamp(100px,12vw,190px) 0;background:#fff}.services-catalog-head{display:grid;grid-template-columns:1fr 1fr;gap:9vw;align-items:end}.services-catalog-head h2,.services-delivery h2{margin-top:22px;font-size:clamp(50px,6.2vw,96px);line-height:.98;letter-spacing:-.06em}.services-catalog-head>p{max-width:580px;color:var(--muted);line-height:1.9}.services-product-strip{display:grid;grid-template-columns:repeat(3,1fr);gap:2px;margin-top:90px}.services-product-strip figure{background:#f2f2ee;overflow:hidden}.services-product-strip img{width:100%;aspect-ratio:1/.78;object-fit:cover;transition:transform .6s ease}.services-product-strip figure:hover img{transform:scale(1.025)}.services-product-strip figcaption{display:flex;justify-content:space-between;padding:20px 24px 24px;font-size:14px}.services-product-strip figcaption span{font:11px var(--mono,monospace);opacity:.45}.services-product-link{margin:42px auto 0;width:max-content}.services-tags{display:flex;flex-wrap:wrap;gap:8px;margin-top:44px}.services-tags span{padding:11px 16px;border:1px solid #ffffff38;border-radius:100px;font-size:12px;color:#ffffffbd}
.services-delivery{padding:clamp(110px,13vw,200px) 0;background:#f0f0eb}.services-timeline{display:grid;grid-template-columns:repeat(3,1fr);margin-top:90px;border-top:1px solid #0003;border-left:1px solid #0003}.services-timeline li{min-height:250px;padding:30px;border-right:1px solid #0003;border-bottom:1px solid #0003}.services-timeline li>span{display:block;margin-bottom:70px;color:#75af00;font:11px var(--mono,monospace)}.services-timeline strong{display:block;font-size:24px}.services-timeline p{margin-top:12px;color:var(--muted);font-size:13px;line-height:1.7}.services-assurance{padding:clamp(100px,12vw,180px) 0;background:#15191a;color:#fff}.services-assurance h2{margin-top:18px;font-size:clamp(50px,7vw,104px);letter-spacing:-.06em}.services-assurance-grid{display:grid;grid-template-columns:repeat(4,1fr);margin-top:78px;border-top:1px solid #ffffff29}.services-assurance-grid article{padding:35px 28px 20px 0;border-right:1px solid #ffffff29}.services-assurance-grid article+article{padding-left:28px}.services-assurance-grid span{color:#b8ff20;font:11px var(--mono,monospace)}.services-assurance-grid strong{display:block;margin-top:70px;font-size:23px}.services-assurance-grid p{margin-top:15px;color:#ffffff85;font-size:13px;line-height:1.75}.services-cta{min-height:82vh;background:#b8ff20;color:#111514}.services-cta .kicker{margin-bottom:28px}
@media(max-width:900px){.services-intro,.services-catalog-head{grid-template-columns:1fr}.services-feature{grid-template-columns:1fr;min-height:0}.services-feature-reverse .services-feature-media{order:0}.services-feature-media{min-height:56vw}.services-timeline{grid-template-columns:repeat(2,1fr)}.services-assurance-grid{grid-template-columns:repeat(2,1fr)}}
@media(max-width:600px){.services-masthead-shade{background:linear-gradient(0deg,rgba(8,12,14,.92),rgba(8,12,14,.25))}.services-masthead-copy{justify-content:flex-end}.services-masthead-copy h1{font-size:53px}.services-scroll{display:none}.services-intro{gap:34px}.services-feature-media{min-height:76vw}.services-feature-copy{padding:68px 24px}.services-product-strip{grid-template-columns:1fr;margin-top:55px}.services-timeline,.services-assurance-grid{grid-template-columns:1fr}.services-timeline li{min-height:210px}.services-timeline li>span{margin-bottom:50px}.services-assurance-grid article,.services-assurance-grid article+article{padding:28px 0;border-right:0;border-bottom:1px solid #ffffff29}.services-assurance-grid strong{margin-top:38px}}

/* Keep the service page in the reference's continuous dark visual system. */
body[data-page="services"] main{background:#15191a;color:#fff}
body[data-page="services"] .services-intro{max-width:none;padding-left:max(4vw,calc((100vw - 1440px)/2));padding-right:max(4vw,calc((100vw - 1440px)/2));background:#15191a;color:#fff}
body[data-page="services"] .services-intro div>p,
body[data-page="services"] .services-catalog-head>p{color:#ffffff9e}
body[data-page="services"] .services-feature-light,
body[data-page="services"] .services-catalog,
body[data-page="services"] .services-delivery{background:#171b1c;color:#fff}
body[data-page="services"] .services-catalog{background:#111516}
body[data-page="services"] .services-steps,
body[data-page="services"] .services-timeline{border-color:#ffffff2b}
body[data-page="services"] .services-timeline li{border-color:#ffffff2b}
body[data-page="services"] .services-timeline p{color:#ffffff85}
body[data-page="services"] .services-product-strip figure{background:#1b2021}
body[data-page="services"] .services-product-visual{position:relative;display:grid;place-items:center;min-height:240px;padding:28px 20px 12px}
body[data-page="services"] .services-product-visual>span{position:absolute;left:16px;top:10px;z-index:1;font-size:clamp(48px,5.4vw,80px);line-height:.9;letter-spacing:-.06em;color:#fff;opacity:.2;pointer-events:none}
body[data-page="services"] .services-product-visual img{position:relative;z-index:2;width:78%;max-height:210px;aspect-ratio:auto;object-fit:contain;background:transparent;padding:0}
body[data-page="services"] .services-product-strip figcaption{color:#fff}
body[data-page="services"] .services-product-link{display:flex;width:calc(100% - 80px);max-width:var(--max);margin:42px auto 0;box-sizing:border-box}
body[data-page="services"] .services-cta{background:#0f1314;color:#fff}
body[data-page="services"] .services-cta .kicker{color:#8fd400}
body[data-page="services"] .services-cta .btn{background:#b8ff20;border-color:#b8ff20;color:#101413}
body[data-page="services"] .services-cta .btn:hover{background:#fff;border-color:#fff;color:#101413}

@media(max-width:600px){
  body[data-page="services"] .services-masthead,
  body[data-page="services"] .services-masthead-copy{min-height:640px;height:auto}
  body[data-page="services"] .services-masthead-copy{padding-top:130px;padding-bottom:54px}
  body[data-page="services"] .services-masthead-copy h1{margin:18px 0 20px;font-size:46px;line-height:.96}
  body[data-page="services"] .services-masthead-copy>p:not(.kicker){font-size:14px;line-height:1.7}
  body[data-page="services"] .services-hero-btn{margin-top:28px}
  body[data-page="services"] .services-product-strip{grid-template-columns:1fr 1fr;margin-top:40px}
  body[data-page="services"] .services-product-visual{min-height:170px;padding:20px 10px 6px}
  body[data-page="services"] .services-product-visual img{max-height:120px;width:86%}
  body[data-page="services"] .services-product-strip figcaption{padding:12px 12px 16px;font-size:12px}
  body[data-page="services"] .services-product-link{width:calc(100% - 40px);margin-top:28px}
  body[data-page="services"] .services-cta{min-height:520px;padding:78px 24px}
  body[data-page="services"] .services-cta h2{font-size:36px;line-height:1.22}
  body[data-page="services"] .services-cta .btn{margin-top:36px}
}

@media(max-width:768px){
  body[data-page="contact"] .page-hero{padding-top:calc(var(--nav-h) + 24px);padding-bottom:24px}
  body[data-page="contact"] .page-hero h1{font-size:30px}
  body[data-page="contact"] .page-hero p:not(.kicker){margin-top:10px;font-size:14px;line-height:1.7}
  body[data-page="contact"] .contact-qr{grid-template-columns:1fr 1fr;gap:16px 14px;margin:0 auto 40px}
  body[data-page="contact"] .contact-qr-card{align-items:center;text-align:center}
  body[data-page="contact"] .contact-qr-card img{width:100%;max-width:132px;padding:3px}
  body[data-page="contact"] .contact-qr-card h2{margin-top:10px;font-size:15px}
  body[data-page="contact"] .contact-qr-card p{margin-top:4px;font-size:11px;letter-spacing:.02em;line-height:1.5}
  body[data-page="contact"] .split{margin-bottom:56px;gap:28px}
  body[data-page="contact"] .split .display-md{font-size:26px;margin:10px 0 14px!important}
  body[data-page="contact"] .contact-place{margin-top:18px}
  body[data-page="contact"] .contact-nation{grid-template-columns:1fr;gap:22px;margin:0 auto 48px}
  body[data-page="contact"] .contact-nation-copy h2{margin:10px 0 12px;font-size:36px}
  body[data-page="contact"] .contact-nation-copy>p:not(.kicker){font-size:14px;line-height:1.75}
  body[data-page="contact"] .contact-nation-facts{margin-top:22px}
  body[data-page="contact"] .contact-nation-facts li{padding:12px 0;font-size:14px}
  body[data-page="contact"] .nation-label{font-size:11px}
  body[data-page="contact"] .form label{padding-top:14px}
}

@media(max-width:600px){
  body[data-page="about"] .page-hero{padding-top:calc(var(--nav-h) + 42px);padding-bottom:50px}
  body[data-page="about"] .page-hero h1{font-size:42px}
  body[data-page="about"] .split{margin-bottom:72px;gap:34px}
  body[data-page="about"] .logo-mark{max-width:180px;margin:0 auto}
  body[data-page="about"] .data{padding:72px 0!important}
  body[data-page="about"] .cta{min-height:520px;padding:78px 24px}
  body[data-page="about"] .cta h2{font-size:36px;line-height:1.22;margin-bottom:36px}
}

/* Home: retain the desktop-style pinned product switcher on touch screens. */
@media(max-width:1024px){
  body[data-page="home"] .system-stage{height:600svh}
  body[data-page="home"] .system-stage-pin{position:sticky;top:0;height:100svh;overflow:hidden;padding:calc(var(--nav-h) + 14px) 0 22px}
  body[data-page="home"] .system-stage-body{position:relative;flex:1;min-height:0;width:calc(100% - 48px);margin:4px auto 0}
  body[data-page="home"] .system-slide{position:absolute;inset:0;display:grid;grid-template-columns:1fr;grid-template-rows:auto 1fr;grid-template-areas:"copy" "visual";align-items:center;gap:4px;min-height:0;padding:10px 0 72px;opacity:0;visibility:hidden;pointer-events:none;transform:translateY(24px)}
  body[data-page="home"] .system-slide.is-flip{grid-template-areas:"visual" "copy";grid-template-rows:1fr auto}
  body[data-page="home"] .system-slide.is-on{opacity:1;visibility:visible;pointer-events:auto;transform:none}
  body[data-page="home"] .system-slide-copy{display:flex;align-items:end;justify-content:space-between;gap:18px}
  body[data-page="home"] .system-char{font-size:clamp(62px,18vw,92px);line-height:.9;opacity:.24}
  body[data-page="home"] .system-copy{text-align:right}
  body[data-page="home"] .system-copy h2{font-size:clamp(21px,6vw,30px)}
  body[data-page="home"] .system-visual{min-height:0;height:100%}
  body[data-page="home"] .system-visual img{width:100%;height:100%;object-fit:contain;transform:scale(.94)}
  body[data-page="home"] .system-slide.is-on .system-visual img{transform:scale(1)}
  body[data-page="home"] .system-rail{position:absolute;top:auto;right:24px;bottom:52px;left:24px;width:auto;padding:10px 0;background:linear-gradient(90deg,transparent,#080808 18%,#080808 82%,transparent);z-index:8}
  body[data-page="home"] .system-stage-foot{position:relative;z-index:9}

  body[data-page="home"] .story{height:400svh}
  body[data-page="home"] .story-pin{
    position:sticky;
    top:0;
    height:100svh;
    min-height:0;
    display:flex;
    flex-direction:column;
    justify-content:center;
    gap:18px;
    padding:calc(var(--nav-h) + 16px) 0 28px;
    overflow:hidden;
    width:calc(100% - 48px);
  }
  body[data-page="home"] .story-visual{
    display:none;
  }
  body[data-page="home"] .story-copy{
    position:relative;
    flex:1 1 auto;
    min-height:0;
    display:flex;
    flex-direction:column;
  }
  body[data-page="home"] .story-copy > .kicker{margin-bottom:8px}
  body[data-page="home"] .story-point{
    position:absolute;
    left:0;
    right:0;
    top:28px;
    opacity:0;
    visibility:hidden;
    pointer-events:none;
    transform:translateY(10px);
    padding:0;
  }
  body[data-page="home"] .story-point.is-on{
    position:relative;
    top:auto;
    flex:1 1 auto;
    display:flex;
    flex-direction:column;
    opacity:1;
    visibility:visible;
    pointer-events:auto;
    transform:none;
  }
  body[data-page="home"] .story-shot{
    display:block;
    width:100%;
    height:42svh;
    min-height:200px;
    margin:0 0 14px;
    object-fit:cover;
    object-position:center;
    max-width:none;
    max-height:none;
    background:var(--bg-3);
  }
  body[data-page="home"] .story-point h3{font-size:clamp(22px,6.4vw,30px);margin:8px 0}
  body[data-page="home"] .story-point p:not(.idx){max-width:none;font-size:14px;line-height:1.7}
}

@media(max-width:600px){
  body[data-page="home"] .system-stage-title{font-size:25px;margin-top:8px}
  body[data-page="home"] .system-stage-top .kicker{font-size:10px}
  body[data-page="home"] .system-rail{gap:16px}
  body[data-page="home"] .statement{min-height:560px;padding:90px 0}
  body[data-page="home"] .cta{min-height:520px;padding:78px 24px}
  body[data-page="home"] .cta h2{font-size:36px;line-height:1.22;margin-bottom:36px}
}

/* Compact footer shared by every page on phones. */
@media(max-width:430px){
  .footer-mark img{width:64px}
  .footer-qr img{width:52px;height:52px}
}