:root {
  --replica-cream: #f0e4d4;
  --replica-peach: #ffcc99;
  --replica-red: #983025;
  --replica-rust: #a24a24;
  --replica-orange: #e75210;
  --replica-yellow: #f3b600;
  --replica-blue: #133c4d;
  --replica-display: Arial, "Helvetica Neue", sans-serif;
  --replica-ease: cubic-bezier(.23, 1, .32, 1);
}

header::after { background-image: none !important; }

.home-replica,
.home-replica * { box-sizing: border-box; }

.home-replica {
  width: 100%;
  max-width: 1920px;
  margin: 0 auto;
  padding-top: 98px;
  overflow: hidden;
  color: #1a1a1a;
  background: var(--replica-cream);
}

.home-replica h1,
.home-replica h2,
.home-replica h3,
.home-replica h4,
.home-replica h5,
.home-replica p { margin-top: 0; }

.replica-container { width: min(100% - 48px, 1296px); margin-inline: auto; }
.section-wave { display: block; width: 100%; height: auto; }
.display-title { margin: 0; color: var(--replica-rust); font: italic 600 min(4.7vw, 90px)/1.12 var(--replica-display); letter-spacing: .06em; }

/* Hero */
.replica-hero { position: relative; min-height: min(55vw, 1056px); overflow: hidden; background: var(--replica-blue); }
.replica-hero__background,
.replica-hero__background img { position: absolute; inset: 0; width: 100%; height: 100%; }
.replica-hero__background img { object-fit: cover; object-position: top center; }
.replica-hero__inner { position: relative; min-height: min(55vw, 1056px); }
.replica-hero__video { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: contain; }
.replica-hero__copy { position: absolute; z-index: 2; top: 28%; left: 50.5%; width: 44%; color: #fff; }
.replica-hero nav { display: flex; flex-direction: column; align-items: flex-start; gap: clamp(10px, .8vw, 16px); }
.replica-hero nav a { display: flex; align-items: flex-end; gap: .2em; color: #dd8900; font: italic 500 min(4.2vw, 80px)/1.08 var(--replica-display); text-transform: uppercase; text-decoration: none; filter: drop-shadow(0 2px 2px rgba(0,0,0,.18)); transition: color 180ms ease, opacity 180ms ease; }
.replica-hero nav a:nth-child(2) { color: #f19500; }
.replica-hero nav a:nth-child(3) { color: var(--replica-orange); }
.replica-hero nav small { padding-bottom: .15em; font-size: .45em; }
.replica-hero h1 { margin: min(1.4vw, 26px) 0 0; color: white; font: italic 500 min(1.75vw, 34px)/1.35 var(--replica-display); }
.replica-hero__tagline { font-size: .75em; }
.replica-hero__word-rotator {
  display: inline-grid;
  position: relative;
  width: max-content;
  height: 1.45em;
  margin-inline: .35em;
  overflow: hidden;
  vertical-align: bottom;
}
.home-replica[data-locale="en"] .replica-hero__word-rotator { min-width: 8em; }
.home-replica[data-locale="zh"] .replica-hero__word-rotator { min-width: 5.5em; }
.replica-hero__word {
  grid-area: 1 / 1;
  align-self: start;
  opacity: 0;
  white-space: nowrap;
  transform: translateY(110%);
  transition: opacity 420ms ease, transform 520ms var(--replica-ease);
}
.replica-hero__word.is-active { opacity: 1; transform: translateY(0); }
.replica-hero__word.is-leaving { opacity: 0; transform: translateY(-110%); }
.replica-hero.is-playing nav a { pointer-events: none; opacity: .45; }
.replica-hero.is-playing nav a.is-selected { color: #fff; opacity: 1; }

@media (hover:hover) and (pointer:fine) {
  .replica-hero nav a:hover { color: #fff; }
  .replica-gallery__grid a:hover img { transform: scale(1.1); }
  .replica-button:hover { background: #7b2720; transform: translateY(-2px); }
}

.replica-hero nav a:focus-visible { color: #fff; outline: 2px solid #fff; outline-offset: 6px; }

/* Feature */
.nvf { position: relative; background: var(--replica-blue); }
.nvf__body { margin-top: -2px; overflow: hidden; background: var(--replica-cream); }
.nvf__inner { position: relative; max-width: 1920px; margin: 0 auto; padding: min(1.5vw,29px) 5.2% min(4vw,77px) 9.1%; }
.nvf__grid { display: grid; grid-template-columns: 1fr 36%; column-gap: 2%; }
.nvf__brain-mobile, .nvf__actif-mobile, .nvf__plane-mobile { display: none; }
.nvf__intro { max-width: min(54vw,1035px); margin-top: min(3.4vw,65px); }
.nvf__intro h3 { margin: 0 0 min(2vw,38px); color: var(--replica-rust); font: italic 700 min(2.5vw,48px)/1.3 var(--replica-display); }
.nvf__intro p { margin: 0 0 min(1.2vw,23px); color: var(--replica-blue); font-size: min(1.2vw,23px); line-height: 1.6; text-align: justify; }
.nvf__cards { display: grid; grid-template-columns: 1fr 1fr; column-gap: 7%; row-gap: min(5vw,96px); margin-top: min(5vw,96px); }
.nvf__card h4 { margin: 0; color: var(--replica-rust); font: italic 700 min(2vw,38px)/1.2 var(--replica-display); }
.nvf__card h4 em { color: var(--replica-orange); font-size: 1.32em; font-style: inherit; }
.nvf__card h5 { margin: min(.9vw,17px) 0 0; color: #dd8900; font: italic 700 min(1.25vw,24px)/1.25 var(--replica-display); }
.nvf__card p, .nvf__card-copy { margin: min(2.5vw,48px) 0 0; font-size: min(1.2vw,23px); line-height: 1.65; text-align: justify; }
.nvf__card-copy ul { margin: 8px 0 0; padding-left: 1.3em; list-style: disc outside; }
.nvf__rail { display: flex; flex-direction: column; align-items: center; gap: min(3vw,58px); }
.nvf__brain { width: 70%; align-self: flex-end; margin-right: 2%; }
.nvf__actif { width: 64%; max-width: 467px; }
.nvf__plane { width: 93%; align-self: flex-end; margin-top: auto; }

/* Pedagogy */
.nvp { position: relative; background: var(--replica-cream); }
.nvp__mobile { display: none; }
.nvp__canvas { position: relative; max-width: 1920px; margin: 0 auto; aspect-ratio: 1920 / 2658; }
.nvp__wave { position: absolute; z-index: 0; top: 2.6%; left: 0; width: 100%; }
.nvp__fill { position: absolute; z-index: 0; inset: 10.5% 0 0; background: var(--replica-peach); }
.nvp__bubble { position: absolute; z-index: 1; top: 0; left: 6.6%; width: 31.9%; }
.nvp__book { position: absolute; z-index: 1; top: 66.9%; left: -4.6%; width: 62.6%; }
.nvp__funnel { position: absolute; z-index: 2; top: 26.4%; left: -8.2%; width: 66.4%; }
.nvp__title { position: absolute; z-index: 3; top: 13.2%; right: 4.9%; }
.nvp__ghost { position: absolute; z-index: 2; top: 29.3%; left: 34.7%; color: #69a5b0; opacity: .5; font: italic 700 min(8vw,154px)/1 var(--replica-display); white-space: nowrap; }
.nvp__row { position: absolute; z-index: 3; display: flex; align-items: center; gap: min(1.8vw,35px); }
.nvp__action { flex: none; font-family: var(--replica-display); font-style: italic; line-height: 1.05; }
.nvp__action small { display: block; font-size: min(1.7vw,33px); font-weight: 300; line-height: 1.1; }
.nvp__action b { display: block; font-size: min(2.9vw,56px); white-space: nowrap; }
.nvp__row p { max-width: min(31vw,600px); margin: 0; font-size: min(1.15vw,22px); line-height: 1.25; }
.nvp__row--6 { top: 38.2%; left: 44.8%; }
.nvp__row--5 { top: 45.1%; left: 34.4%; }
.nvp__row--4 { top: 51.3%; left: 26.9%; }
.nvp__row--3 { top: 57.9%; left: 22.1%; }
.nvp__row--2 { top: 64.5%; left: 18.3%; }
.nvp__row--1 { top: 71.1%; left: 15.8%; }
.nvp__action--1 { color: #f19500; }
.nvp__action--2 { color: var(--replica-orange); }
.nvp__action--3 { color: var(--replica-rust); }
.nvp__action--4 { color: #962e27; }
.nvp__action--5 { color: #136485; }
.nvp__action--6 { color: var(--replica-blue); }
.nvp__from-class { position: absolute; z-index: 3; top: 76.9%; left: 38.8%; color: var(--replica-yellow); font: italic 700 min(7.9vw,152px)/1 var(--replica-display); white-space: nowrap; }
.nvp__tail { margin-top: -2px; padding-top: min(5vw,96px); background: var(--replica-peach); }

/* Gallery */
.replica-gallery { background: var(--replica-red); }
.replica-gallery__top, .replica-gallery__bottom { display: block; width: 100%; height: auto; }
.replica-gallery .replica-container { padding-block: clamp(56px, 5vw, 96px); }
.replica-gallery h2 { max-width: 900px; margin: 0 0 clamp(40px, 4vw, 76px) auto; color: #efbf00; font: 500 clamp(22px, 1.7vw, 33px)/1.4 var(--replica-display); text-align: right; }
.replica-gallery__grid { display: grid; grid-template-columns: repeat(3, 1fr); gap: clamp(24px, 3vw, 58px); }
.replica-gallery__grid a { position: relative; display: block; aspect-ratio: 1.538 / 1; overflow: hidden; background: #76231e; }
.replica-gallery__grid img { width: 100%; height: 100%; object-fit: cover; transition: transform 300ms var(--replica-ease); }

/* Trial form */
.replica-trial { overflow: hidden; background: #f0f0f0; }
.replica-trial__inner { display: flex; gap: clamp(48px, 5vw, 96px); padding-block: clamp(68px, 6vw, 116px); }
.replica-trial__visual { position: relative; width: 50%; min-height: 500px; }
.replica-trial__visual img { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: contain; object-position: top; }
.replica-trial__content { flex: 1; }
.replica-trial h2 { margin: 0 0 clamp(28px, 2vw, 38px); font: 400 clamp(28px, 2.3vw, 44px)/1.2 var(--replica-display); }
.replica-trial form { display: flex; flex-direction: column; gap: 14px; }
.replica-checkbox { display: flex; align-items: center; gap: 9px; width: fit-content; cursor: pointer; }
.replica-checkbox input { width: 18px; height: 18px; accent-color: var(--replica-red); }
.trial-field { display: flex; flex-direction: column; gap: 6px; }
.trial-field label { color: #777; font-size: 14px; }
.trial-field input, .trial-field select { width: 100%; height: 48px; padding: 0 14px; border: 0; border-bottom: 1px solid #777; border-radius: 0; outline: none; background: transparent; color: #1a1a1a; font-size: 16px; transition: border-color 180ms ease, background-color 180ms ease; }
.trial-field select { border: 1px solid #777; border-radius: 3px; background: #fff; }
.trial-field input:focus, .trial-field select:focus { border-color: var(--replica-red); background: rgba(255,255,255,.6); }
.replica-trial__notes { margin: 8px 0 0 1.2em; padding: 0; color: #666; font-size: 13px; line-height: 1.5; }
.replica-trial__notes a { color: inherit; text-decoration: underline; }
.trial-field.is-field-concealed { visibility: hidden; pointer-events: none; }
.replica-trial__notes .is-note-concealed { visibility: hidden; }
.replica-button { align-self: flex-start; margin-top: 4px; padding: 11px 18px; border: 0; border-radius: 4px; background: var(--replica-red); color: #fff; font-size: 16px; transition: transform 160ms var(--replica-ease), background-color 180ms ease; }
.replica-button:active { transform: scale(.97); }
.is-hidden { display: none !important; }
.replica-trial__wave { display: block; width: 100%; height: auto; }

/* Closing video */
.replica-story { position: relative; padding-top: clamp(72px, 6vw, 115px); background: var(--replica-cream); }
.replica-story h2 { position: relative; z-index: 1; margin: 0 0 clamp(50px, 4vw, 76px); color: var(--replica-rust); font: 400 clamp(24px, 1.7vw, 33px)/1.35 var(--replica-display); }
.replica-story__video {
  display: block;
  width: min(100% - 48px, 1296px);
  height: auto;
  margin-inline: auto;
  border: 2px solid rgba(162, 74, 36, .28);
  border-radius: clamp(16px, 1.6vw, 28px);
}

/* Motion is intentionally limited to once-per-section entrances. */
.js-reveal .reveal { opacity: 0; transform: translateY(24px); transition: opacity 700ms var(--replica-ease), transform 700ms var(--replica-ease); }
.js-reveal .reveal.is-visible { opacity: 1; transform: translateY(0); }

@media (max-width: 1023px) {
  .display-title { font-size: 40px; }
  .replica-container { width: min(100% - 30px, 720px); }

  .replica-hero { min-height: 100vw; }
  .replica-hero__inner { min-height: 100vw; }
  .replica-hero__video { object-fit: cover; object-position: center top; }
  .replica-hero__copy { top: 29%; left: 50%; width: 47%; }
  .replica-hero nav a { font-size: clamp(25px, 7vw, 60px); }
  .replica-hero nav { gap: clamp(6px, 1.4vw, 12px); }
  .replica-hero h1 { margin-top: 14px; font-size: clamp(13px, 2.5vw, 24px); }

  .nvf__inner { padding: 10px 15px 40px; }
  .nvf__grid { display: block; }
  .nvf__rail { display: none; }
  .nvf__brain-mobile { display: block; position: absolute; z-index: 0; top: -4px; right: 6px; width: 42%; max-width: 170px; }
  .nvf__flow { position: relative; }
  .nvf__actif-mobile { display: block; position: absolute; z-index: 0; top: 10px; right: -6px; width: 28%; max-width: 115px; }
  .nvf__intro { position: relative; z-index: 1; max-width: none; margin-top: 26px; }
  .nvf__intro h3 { margin-bottom: 18px; font-size: 17px; line-height: 1.45; }
  .nvf__intro p { margin-bottom: 14px; padding-right: 3%; font-size: 14px; line-height: 1.7; }
  .nvf__cards { position: relative; z-index: 1; display: flex; flex-direction: column; gap: 40px; margin-top: 44px; padding-right: 27%; }
  .nvf__card h4 { font-size: 20px; }
  .nvf__card h5 { margin-top: 8px; font-size: 12px; }
  .nvf__card p, .nvf__card-copy { margin-top: 16px; font-size: 13px; }
  .nvf__plane-mobile { display: block; width: 52%; max-width: 200px; margin: -30px -15px 0 auto; }

  .nvp__desktop { display: none; }
  .nvp__mobile { display: block; }
  .nvp__mobile-body { margin-top: -2px; padding: 10px 15px 50px; overflow: hidden; background: var(--replica-peach); }
  .nvp__mobile-art { position: relative; aspect-ratio: 375 / 816; margin: 12px -15px 0; }
  .nvp__mobile-art img { position: absolute; height: auto; }
  .nvp__mobile-bubble { z-index: 1; top: 0; left: 8.3%; width: 47.5%; }
  .nvp__mobile-ghost { position: absolute; z-index: 2; top: 6%; right: 6%; color: #69a5b0; opacity: .5; font: italic 700 42px/1.18 var(--replica-display); }
  .nvp__mobile-funnel { z-index: 2; top: 24.7%; left: -13%; width: 97%; }
  .nvp__mobile-book { z-index: 1; top: 62.4%; left: -7.5%; width: 92%; }
  .nvp__mobile-from { position: absolute; z-index: 3; top: 86.6%; left: 7%; color: var(--replica-yellow); font: italic 700 34px/1.15 var(--replica-display); }
  .nvp__mobile-list { display: flex; flex-direction: column; gap: 26px; margin-top: 28px; }
  .nvp__mobile-item small { display: block; font: italic 300 12px/1.1 var(--replica-display); }
  .nvp__mobile-item b { display: block; font: italic 700 21px/1.1 var(--replica-display); }
  .nvp__mobile-item p { margin: 6px 0 0; color: #1a1a1a; font-size: 13px; line-height: 1.6; }
  .nvp__tail { padding-top: 35px; }

  .replica-gallery__grid { grid-template-columns: repeat(2, 1fr); gap: 22px; }
  .replica-gallery h2 { margin-left: 0; text-align: left; }
  .replica-trial__inner { gap: 24px; }
  .replica-trial__visual { min-height: 420px; }
}

@media (max-width: 599px) {
  .home-replica { padding-top: 49px; }
  .replica-hero { min-height: 100vw; }
  .replica-hero__inner { min-height: 100vw; }
  .nvf { margin-top: -2px; }
  .replica-hero__video { object-fit: contain; object-position: center; }
  .replica-hero__copy { top: 27%; left: 50%; }
  .replica-hero nav { gap: 0; }
  .replica-hero nav a { font-size: 5vw; line-height: 1.5; }
  .replica-hero h1 { font-size: 5vw; line-height: 1.5; }
  .replica-hero__tagline { font-size: 1em; }
  .replica-hero__word-rotator {
    margin-inline: 0 .35em;
    justify-items: start;
    text-align: left;
  }
  .replica-gallery .replica-container { padding-block: 46px; }
  .replica-gallery__grid { grid-template-columns: 1fr; gap: 20px; }
  .replica-gallery__grid a { max-width: 400px; margin-inline: auto; }
  .replica-trial { margin-top: -2px; background: #d9d9d9; }
  .replica-trial__inner { flex-direction: column; padding-top: 30px; }
  .replica-trial__visual { width: 100%; min-height: 340px; }
  .replica-trial__visual img { width: 90%; max-width: none; transform: translateX(10%); }
  .replica-trial__content { width: 100%; padding-bottom: 30px; }
  .replica-story { padding-top: 62px; }
  .replica-story__video { width: min(100% - 30px, 720px); }
  .home-replica + footer { margin-top: -2px; }
}

@media (max-width: 768px) {
  .home-replica { padding-top: 79px; }
}

@media (max-width: 500px) {
  .home-replica { padding-top: 60px; }
}

@media (prefers-reduced-motion: reduce) {
  .replica-hero__video { display: none; }
  .replica-hero__word { transition: none; }
  .js-reveal .reveal { opacity: 1; transform: none; transition: none; }
  .replica-gallery__grid img, .replica-hero nav a, .replica-button { transition-duration: 0.01ms; }
}