/* Montserrat is self-hosted in css/montserrat.css (linked from each page) — it used to be
   pulled from the Google Fonts CDN, which leaked visitor IPs to a third party and could not
   be pinned with an integrity hash. */

@font-face {
  font-family: 'Rische';
  font-style: normal;
  font-weight: 500;
  font-display: swap;
  src: url('../assets/fonts/Rische-Medium.otf') format('opentype');
}

:root {
  --color-bg: #F3EEE9;
  --color-caramel: #AD7951;
  --color-cream: #F3EEE9;
  --color-olive: #B8C1B1;
  --color-cherry: #C58C8C;
  --color-mauve: #B9A3A9;
  --color-body: rgba(0,0,0,0.8);
  --color-black: #000000;
  --font-headline: 'Rische', Georgia, serif;
  --font-body: 'Montserrat', -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, sans-serif;
}

* { box-sizing: border-box; margin: 0; padding: 0; }

html, body {
  background: var(--color-bg) url('../assets/pattern/background-pattern-01.svg') repeat;
  background-size: 640px 640px;
  overflow-x: hidden;
  width: 100%;
}

body {
  font-family: var(--font-body);
  color: var(--color-body);
  width: 100%;
  position: relative;
}

img { display: block; max-width: none; }

.headline {
  font-family: var(--font-headline);
  color: var(--color-caramel);
  font-weight: 500;
  text-align: center;
  line-height: 1.15;
}

.subtext {
  font-family: var(--font-body);
  color: var(--color-body);
  text-align: center;
  line-height: 1.6;
  font-weight: 400;
}

.eyebrow {
  font-family: var(--font-body);
  color: var(--color-body);
  text-align: center;
  font-weight: 600;
  letter-spacing: 0.08em;
  text-transform: uppercase;
  font-size: 14px;
}

.btn {
  display: inline-block;
  background: var(--color-caramel);
  color: #fff;
  font-family: var(--font-body);
  font-weight: 600;
  font-size: 20px;
  padding: 18px 48px;
  border: none;
  border-radius: 999px;
  cursor: pointer;
  text-decoration: none;
  text-align: center;
  box-shadow: 0 8px 20px -8px rgba(173, 121, 81, 0.6);
  transition: transform 0.2s ease, background-color 0.2s ease, box-shadow 0.2s ease;
}

.btn:hover {
  background: var(--color-olive);
  transform: translateY(-2px);
  box-shadow: 0 12px 24px -8px rgba(173, 121, 81, 0.5);
}
.btn:active { transform: scale(0.98); }

.btn .btn-arrow {
  display: inline-block;
  margin-left: 6px;
  transition: transform 0.2s ease;
}
.btn:hover .btn-arrow { transform: translateX(4px); }

.section {
  position: relative;
  width: 100%;
}

/* ---------- Loading overlay ---------- */

#loading-overlay {
  position: fixed;
  inset: 0;
  z-index: 9999;
  background: var(--color-bg);
  display: flex;
  align-items: center;
  justify-content: center;
  transition: opacity 0.4s ease;
}

#loading-overlay.loaded {
  opacity: 0;
  pointer-events: none;
}

.loading-mark {
  width: 90px;
  height: 91px;
  background-color: var(--color-caramel);
  -webkit-mask-image: url('../assets/logo/nora-mark.svg');
  mask-image: url('../assets/logo/nora-mark.svg');
  -webkit-mask-size: contain;
  mask-size: contain;
  -webkit-mask-repeat: no-repeat;
  mask-repeat: no-repeat;
  -webkit-mask-position: center;
  mask-position: center;
  animation: nora-spin 1.6s linear infinite;
}

@keyframes nora-spin {
  from { transform: rotate(0deg); }
  to { transform: rotate(360deg); }
}

/* ---------- Hero ---------- */

.hero {
  --hs: 1; /* hero scale — overridden in media queries below */
  position: relative;
  width: 100%;
  height: calc(1060px * var(--hs));
  overflow: hidden;
  background: var(--color-caramel) url('../assets/pattern/hero-banner-pattern.svg') repeat;
  background-size: 640px 640px;
}

/* Content (objects + copy) stays at its designed size and just sits centered —
   it's the background that stretches edge to edge, not the artwork itself. */
.hero-cluster {
  position: absolute;
  top: calc(130px * var(--hs));
  left: 50%;
  transform: translateX(-50%) scale(var(--hs));
  transform-origin: top center;
  width: 1351.5px;
  height: 825.5px;
  z-index: 2;
}

.hero-logo {
  position: absolute;
  top: calc(40px * var(--hs));
  left: 50%;
  transform: translateX(-50%);
  width: max(90px, calc(150px * var(--hs)));
  height: auto;
  z-index: 3;
}

.hero-bg {
  position: absolute;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  object-fit: contain;
  object-position: center center;
  transform: scale(0.95);
  transform-origin: 50% 50%;
  z-index: 0;
  pointer-events: none;
}

.hero-copy {
  position: absolute;
  top: calc(420px * var(--hs));
  left: 50%;
  transform: translateX(-50%);
  width: min(1100px, 92vw);
  text-align: center;
  z-index: 1;
}

.hero-copy .headline {
  color: var(--color-cream);
  font-size: max(26px, calc(56px * var(--hs)));
  margin-bottom: max(14px, calc(28px * var(--hs)));
}

.hero-copy .subtext {
  color: var(--color-cream);
  font-size: max(14px, calc(19px * var(--hs)));
  max-width: 900px;
  margin: 0 auto;
}

.hero-object {
  position: absolute;
  top: 0;
  left: 0;
  will-change: transform;
}

.hero-object img {
  width: 100%;
  height: 100%;
  display: block;
  filter: drop-shadow(0 8px 16px rgba(0,0,0,0.12));
}

/* Touch devices: 20 moving drop-shadows re-raster every scroll frame and 20
   always-promoted will-change layers eat GPU memory. Drop both — the scatter
   animation still runs, just without the per-frame filter/layer cost. */
@media (pointer: coarse) {
  .hero-object { will-change: auto; }
  .hero-object img { filter: none; }
}

/* ---------- Reveal / order section ---------- */

.order-section {
  --os: 1; /* order-row scale — overridden in media queries below */
  position: relative;
  width: 100%;
  padding: max(90px, calc(220px * var(--os))) 0 100px;
  text-align: center;
  overflow: hidden;
}

.order-intro {
  opacity: 0;
  transform: translateY(30px);
}

.order-section .headline {
  font-size: max(26px, calc(48px * var(--os)));
  margin-bottom: 24px;
  padding: 0 16px;
}

.order-section .subtext {
  font-size: max(15px, calc(18px * var(--os)));
  max-width: 720px;
  margin: 0 auto max(48px, calc(90px * var(--os)));
  padding: 0 16px;
}

.order-row {
  position: relative;
  left: 50%;
  width: 1374px;
  height: calc(451.4px * var(--os));
  transform: translateX(-50%) scale(var(--os));
  transform-origin: top center;
}

.order-object {
  position: absolute;
  top: 0;
  left: 0;
  opacity: 0;
  will-change: transform, opacity;
}

.order-object img {
  width: 100%;
  height: 100%;
  display: block;
}

/* ---------- CTA section ---------- */

.cta-section {
  padding: 100px 24px 160px;
  text-align: center;
}

.cta-card {
  max-width: 1000px;
  margin: 0 auto;
  padding: 64px 56px 56px;
  background: #FFFDF9;
  border: 1px solid rgba(173, 121, 81, 0.35);
  border-radius: 28px;
  box-shadow: 0 20px 50px -20px rgba(173, 121, 81, 0.35);
}

.cta-section .headline {
  font-size: 44px;
  margin-bottom: 20px;
}

.cta-section .subtext {
  font-size: 18px;
  max-width: 640px;
  margin: 0 auto 36px;
}

.cta-section .gift-line {
  font-family: var(--font-headline);
  color: var(--color-caramel);
  font-weight: 500;
  font-size: 22px;
  margin-bottom: 40px;
}

/* Dark variant: caramel card, light text, dark button */
.cta-card--dark {
  background: var(--color-caramel);
  border-color: rgba(243, 238, 233, 0.3);
  box-shadow: 0 20px 50px -18px rgba(173, 121, 81, 0.55);
}

.cta-card--dark .headline,
.cta-card--dark .subtext,
.cta-card--dark .gift-line {
  color: var(--color-cream);
}

.cta-card--dark .btn {
  background: var(--color-black);
  color: var(--color-cream);
  box-shadow: 0 8px 20px -8px rgba(0, 0, 0, 0.5);
}

.cta-card--dark .btn:hover {
  background: var(--color-olive);
  color: var(--color-black);
  box-shadow: 0 12px 24px -8px rgba(0, 0, 0, 0.4);
}

/* ---------- Survey page ---------- */

.survey-decor {
  position: absolute;
  top: 0;
  left: 0;
  width: 100%;
  z-index: 0;
  pointer-events: none;
}

.survey-decor img {
  position: absolute;
  opacity: 0.1;
  display: block;
}

.survey-header {
  position: relative;
  z-index: 1;
  padding: 80px 0 40px;
  text-align: center;
}

.survey-header .headline {
  font-size: 38px;
}

.survey-body {
  position: relative;
  z-index: 1;
  max-width: 1000px;
  margin: 0 auto;
  padding: 40px 0 120px;
}

.question-block {
  padding: 40px 0;
  border-bottom: 1px solid rgba(0,0,0,0.12);
}

.question-block .q-title {
  font-family: var(--font-body);
  color: var(--color-body);
  font-size: 26px;
  font-weight: 600;
  margin-bottom: 6px;
}

.question-block .q-hint {
  font-size: 14px;
  color: var(--color-caramel);
  font-weight: 600;
  text-transform: uppercase;
  letter-spacing: 0.05em;
  margin-bottom: 24px;
}

.option-grid {
  display: flex;
  flex-wrap: wrap;
  gap: 14px;
}

.option-pill {
  display: flex;
  align-items: center;
  gap: 10px;
  padding: 14px 24px;
  border: 1.5px solid rgba(0,0,0,0.2);
  border-radius: 999px;
  font-size: 16px;
  color: var(--color-body);
  cursor: pointer;
  transition: border-color 0.15s ease, background 0.15s ease;
}

.option-pill:hover { border-color: var(--color-caramel); }

.option-pill input { accent-color: var(--color-caramel); width: 16px; height: 16px; }

.option-pill.text-input {
  padding: 8px 20px;
}

.option-pill.text-input input[type="text"] {
  border: none;
  outline: none;
  font-family: var(--font-body);
  font-size: 16px;
  background: transparent;
  width: 140px;
}

.lead-capture {
  padding: 60px 0 20px;
  text-align: center;
}

.lead-capture .q-title {
  font-family: var(--font-body);
  font-size: 30px;
  font-weight: 600;
  color: var(--color-body);
  margin-bottom: 40px;
}

.field-row {
  display: flex;
  gap: 20px;
  margin-bottom: 40px;
}

.field-row input {
  flex: 1;
  padding: 16px 20px;
  border: 1.5px solid rgba(0,0,0,0.2);
  font-family: var(--font-body);
  font-size: 16px;
  color: var(--color-body);
  background: #fff;
  outline: none;
}

.field-row input:focus { border-color: var(--color-caramel); }

/* ---------- Responsive ---------- */

/* Cluster scale steps. --hs scales the hero, --os the order row.
   JS only transforms the child objects, so scaling the containers here is safe. */
@media (max-width: 1400px) { .hero { --hs: 0.90; } .order-section { --os: 0.90; } }
@media (max-width: 1200px) { .hero { --hs: 0.78; } .order-section { --os: 0.78; } }
@media (max-width: 1024px) { .hero { --hs: 0.68; } .order-section { --os: 0.68; } }
@media (max-width: 820px)  { .hero { --hs: 0.56; } .order-section { --os: 0.56; } }
@media (max-width: 680px)  { .hero { --hs: 0.46; } .order-section { --os: 0.46; } }
@media (max-width: 560px)  { .hero { --hs: 0.40; } .order-section { --os: 0.40; } }
@media (max-width: 480px)  { .hero { --hs: 0.33; } .order-section { --os: 0.33; } }
@media (max-width: 400px)  { .hero { --hs: 0.28; } .order-section { --os: 0.28; } }

/* On narrow screens the scaled hero got too short and left dead space.
   Fill the viewport and vertically center the cluster + copy instead. */
@media (max-width: 820px) {
  .hero {
    height: 100vh;
    height: 100svh;
    min-height: 560px;
  }
  .hero-cluster {
    top: 50%;
    transform: translate(-50%, -50%) scale(var(--hs));
    transform-origin: center center;
  }
  .hero-copy {
    top: 50%;
    transform: translate(-50%, -50%);
  }
  .hero-logo { top: 24px; }
}

/* Below 820px the Illustrator-exact order row (1374px wide) has to be scaled down so far that
   the objects turn into unreadable specks and the outer ones still get clipped by the section's
   overflow. Drop the absolute layout there and let the objects flow as a centered wrapped grid.
   GSAP writes position/size/transform inline, hence the !important overrides. */
@media (max-width: 820px) {
  .order-row {
    position: static;
    left: auto;
    width: 100%;
    height: auto;
    transform: none;
    display: flex;
    flex-wrap: wrap;
    justify-content: center;
    align-items: center;
    gap: 20px 24px;
    padding: 0 20px;
  }

  .order-object {
    position: static !important;
    top: auto;
    left: auto;
    width: auto !important;
    height: auto !important;
    transform: none !important;
    flex: 0 0 auto;
  }

  .order-object img {
    width: auto;
    height: auto;
    max-width: clamp(78px, 26vw, 130px);
    max-height: clamp(62px, 21vw, 100px);
  }
}

@media (max-width: 1024px) {
  .cta-section { padding: 80px 20px 120px; }
  .cta-card { padding: 48px 32px 44px; }
  .cta-section .headline { font-size: 34px; }
  .btn { font-size: 18px; padding: 16px 40px; }
}

@media (max-width: 768px) {
  /* Kill designer <br> line-breaks so copy wraps naturally on narrow screens */
  .headline br, .subtext br { display: none; }

  .cta-card { padding: 40px 24px 36px; border-radius: 20px; }
  .cta-section .headline { font-size: 28px; }
  .cta-section .subtext { font-size: 16px; }
  .cta-section .gift-line { font-size: 19px; }

  .survey-header { padding: 56px 20px 32px; }
  .survey-header .headline { font-size: 26px; }
  .survey-body { padding: 32px 20px 100px; }
  .question-block { padding: 28px 0; }
  .question-block .q-title { font-size: 20px; }
  .lead-capture .q-title { font-size: 24px; }

  /* Stack the name/email/phone inputs */
  .field-row { flex-direction: column; gap: 14px; }

  /* Decorative floating items get in the way on small screens */
  .survey-decor { display: none; }
}

@media (max-width: 480px) {
  .cta-section .headline { font-size: 24px; }
  .survey-header .headline { font-size: 22px; }
  .option-pill { font-size: 15px; padding: 12px 18px; }
  .btn { width: 100%; }
}