@font-face {
  font-family: "Nuro Sans";
  src: url("../fonts/Inter-Variable.woff2") format("woff2");
  font-style: normal;
  font-weight: 100 900;
  font-display: swap;
}

/* Preserve English campaign type; use the site's native fonts in other languages. */
@layer arotec-language-fonts {
  .nuro-copy:lang(en), .nuro-copy:lang(en) * {
    font-family: "Nuro Sans", Arial, sans-serif !important;
  }
}

.uniquely-yours-page {
  margin: 0;
  background: #c5dbe2;
  font-family: "Nuro Sans", Arial, sans-serif;
}

/* Header + artwork fit the first desktop screen. The site footer follows. */
.nuro-screen {
  height: 100vh;
  height: 100dvh;
  display: grid;
  grid-template-rows: auto minmax(0, 1fr);
}
/* Reserve the shared header's height while it floats during scrolling. */
.uniquely-yours-page #site-shell {
  height: calc(var(--arotec-utility-height) + var(--arotec-main-height) + 1px);
}
/* Use the main site's navigation type scale without changing campaign copy. */
.uniquely-yours-page .site-header nav a,
.uniquely-yours-page .site-header nav button.nav-link,
.uniquely-yours-page .site-header .menu a {
  font-size: 14px !important;
  font-weight: 400 !important;
}
.uniquely-yours-page #site-shell > .site-header {
  background: transparent !important;
}
.uniquely-yours-page #site-shell > .site-header .header-main {
  background: rgba(213, 213, 213, .8) !important;
}
.uniquely-yours-page #main {
  /* Measure the full hero area, independent of breadcrumb clearance padding. */
  container-type: size;
  margin: 0;
  padding: 0;
  min-width: 0;
  min-height: 0;
}
.nuro-launch {
  position: relative;
  isolation: isolate;
  width: 100%;
  height: 100%;
  padding: 0;
  overflow: hidden;
  color: #080e30;
  background: #c5dbe2;
}

/* A single cover-sized scene keeps HTML aligned with the supplied artwork. */
.nuro-scene {
  position: absolute;
  left: 50%;
  top: 50%;
  width: max(100cqw, 213.333333cqh);
  aspect-ratio: 32 / 15;
  transform: translate(-50%, -50%);
  container-type: inline-size;
}
.nuro-launch__background {
  display: block;
  width: 100%;
  height: auto;
  max-width: none;
}
.nuro-copy {
  position: absolute;
  inset: 0;
  font-family: "Nuro Sans", Arial, sans-serif;
  color: #080e30;
}
.nuro-copy > * {
  position: absolute;
  left: 21.05%;
  margin: 0;
  padding: 0;
  max-width: none;
  font-family: inherit;
  color: inherit;
}
.nuro-copy__eyebrow {
  top: 28.15%;
  font-size: .732422cqw;
  font-weight: 600;
  line-height: 1.25;
  letter-spacing: .28em;
  color: #182857;
}
.nuro-copy__title {
  top: 31.8%;
  font-size: 4.296875cqw;
  font-weight: 300;
  line-height: 1;
  letter-spacing: .005em;
}
.nuro-copy__description {
  top: 51.8%;
  font-size: 1.171875cqw;
  font-weight: 400;
  line-height: 1.4;
  letter-spacing: 0;
  color: #244c91;
}
.nuro-copy__message {
  top: 68.55%;
  font-size: 1.855469cqw;
  font-weight: 400;
  line-height: 1.16;
  letter-spacing: 0;
}
.nuro-copy__message strong { font-weight: 700; }
.nuro-copy__tagline, .nuro-copy__care,
.nuro-copy__affirmation, .nuro-copy__closing { display: block; }
.nuro-copy__ja-break { display: none; }
html[lang="ja"] .nuro-copy__ja-break { display: initial; }

/* Keep longer translated passages within the artwork's left-hand text area. */
html:not([lang="en"]) .nuro-copy {
  inset: 24% auto 9% 21.05%;
  width: 26%;
  display: flex;
  flex-direction: column;
  justify-content: center;
  gap: 1.05cqw;
}
html:not([lang="en"]) .nuro-copy > * {
  position: static;
  max-width: 100%;
  flex: 0 0 auto;
}
html:not([lang="en"]) .nuro-copy__eyebrow { letter-spacing: .08em; }
html:not([lang="en"]) .nuro-copy__description { line-height: 1.6; }
html:not([lang="en"]) .nuro-copy__care { margin-top: .45em; }
html:not([lang="en"]) .nuro-copy__message { margin-top: .8cqw; font-size: 1.35cqw; line-height: 1.6; }
html[lang="ja"] .nuro-copy__title { font-size: 3.5cqw; line-height: 1.2; }
html[lang="th"] .nuro-copy__title { font-size: 2.25cqw; line-height: 1.45; }

/* Keep the complete artwork visible on exceptionally wide desktop displays. */
@container (min-aspect-ratio: 8 / 3) {
  .nuro-scene { width: 240cqh; }
}

@media (max-width: 767px) {
  .nuro-screen { min-height: 760px; }
  .nuro-scene {
    inset: 0;
    width: 100%;
    height: 100%;
    aspect-ratio: auto;
    transform: none;
    container-type: size;
  }
  .nuro-launch__background {
    position: absolute;
    inset: 0;
    width: 100%;
    height: 100%;
    object-fit: cover;
    object-position: 66% center;
  }
  .nuro-copy {
    inset: 0;
    padding: 30px 24px;
    background: rgb(228 241 246 / 82%);
    display: flex;
    flex-direction: column;
    align-items: flex-start;
    justify-content: center;
  }
  .nuro-copy > * {
    position: static;
    max-width: 100%;
  }
  .nuro-copy__eyebrow {
    font-size: clamp(10px, 2.6cqw, 14px);
    letter-spacing: .24em;
  }
  .nuro-copy__title {
    margin-top: 22px;
    font-size: clamp(44px, 12cqw, 76px);
  }
  .nuro-copy__description {
    margin-top: 22px;
    font-size: clamp(14px, 3.7cqw, 21px);
    line-height: 1.55;
  }
  .nuro-copy__message {
    margin-top: 52px;
    font-size: clamp(20px, 5.3cqw, 30px);
    line-height: 1.35;
  }
  html:not([lang="en"]) .nuro-copy {
    inset: 0;
    width: auto;
    gap: 0;
  }
  html:not([lang="en"]) .nuro-copy__message {
    margin-top: 32px;
    font-size: clamp(18px, 4.8cqw, 26px);
  }
  html[lang="ja"] .nuro-copy__title { font-size: clamp(32px, 9cqw, 56px); }
  html[lang="th"] .nuro-copy__title { font-size: clamp(26px, 7cqw, 42px); }
}