/* ==========================================================================
   Where on the Map — Main stylesheet v2.0
   Pixel-perfect build. Everything here reflects the Figma file.
   ========================================================================== */

/* -------------------- 1. Tokens -------------------- */
:root {
  --c-light:  #FAF6EA;
  --c-dark:   #292521;
  --c-beige:  #E7DDCC;
  --c-border: #292521;

  --type-body-m: 14px;
  --type-body-l: 18px;
  --type-h3: 30px;
  --type-h2: 40px;
  --type-h1: 50px;
  --type-btn: 15px;

  --ff-mono-sans:   "ABC Repro Mono", "IBM Plex Mono", "Courier New", monospace;
  --ff-mono-serif:  "ABC Synt Mono",  "Courier Prime", "Courier New", monospace;
  --ff-body-long:   "ABC Repro Mono", "DM Mono", "IBM Plex Mono", monospace;
  --ff-script:      "Conte Script", "Caveat", "Homemade Apple", cursive;

  --gutter-lg: 75px;
  --gutter-md: 50px;
  --gutter-sm: 20px;

  --t-hover: 0.35s cubic-bezier(0.65, 0, 0.35, 1);
}

/* -------------------- 2. Fonts -------------------- */
@font-face {
  font-family: "ABC Repro Mono";
  src: url("../fonts/ABCReproMono-Regular.woff2") format("woff2"),
       url("../fonts/ABCReproMono-Regular.woff")  format("woff");
  font-weight: 400;
  font-style: normal;
  font-display: swap;
}
/* Bold weight mapped to Regular per design decision (all text regular) */
@font-face {
  font-family: "ABC Repro Mono";
  src: url("../fonts/ABCReproMono-Regular.woff2") format("woff2"),
       url("../fonts/ABCReproMono-Regular.woff")  format("woff");
  font-weight: 700;
  font-style: normal;
  font-display: swap;
}
@font-face {
  font-family: "ABC Synt Mono";
  src: url("../fonts/ABCSynt-Mono.woff2") format("woff2"),
       url("../fonts/ABCSynt-Mono.woff")  format("woff");
  font-weight: 400;
  font-style: normal;
  font-display: swap;
}
@font-face {
  font-family: "Conte Script";
  src: url("../fonts/ConteScript-Regular.otf") format("opentype"),
       url("../fonts/ConteScript-Regular.ttf") format("truetype");
  font-weight: 400;
  font-style: normal;
  font-display: swap;
}

/* -------------------- 3. Reset -------------------- */
*, *::before, *::after { box-sizing: border-box; }
html, body { margin: 0; padding: 0; }
html { scroll-behavior: smooth; -webkit-font-smoothing: antialiased; -moz-osx-font-smoothing: grayscale; }
body {
  font-family: var(--ff-mono-sans);
  font-size: var(--type-body-m);
  line-height: 1.2;
  color: var(--c-dark);
  background: var(--c-light);
  overflow-x: hidden;
}
img, video, svg { display: block; max-width: 100%; height: auto; }
button { border: 0; background: none; font: inherit; color: inherit; cursor: pointer; }
input, textarea, select { font: inherit; color: inherit; }
a { color: inherit; text-decoration: none; }
a:hover, a:focus-visible { text-decoration: underline; text-underline-offset: 3px; }

.screen-reader-text {
  clip: rect(1px,1px,1px,1px);
  position: absolute !important;
  height: 1px; width: 1px; overflow: hidden;
}
.skip-link:focus {
  clip: auto;
  position: fixed;
  top: 8px; left: 8px;
  background: var(--c-dark);
  color: var(--c-light);
  padding: 8px 16px;
  z-index: 9999;
}

/* Lock scroll while intro runs */
body.intro-running { overflow: hidden !important; }

/* -------------------- 4. Type utilities -------------------- */
.label {
  font-family: var(--ff-mono-sans);
  font-size: var(--type-body-m);
  text-transform: uppercase;
  line-height: 1.2;
}
.h2 {
  font-family: var(--ff-mono-serif);
  font-size: var(--type-h2);
  line-height: 1.1;
  letter-spacing: -2px;
  text-transform: capitalize;
  margin: 0;
}
.h3-text {
  font-family: var(--ff-mono-serif);
  font-size: var(--type-h3);
  line-height: 1.1;
  letter-spacing: -1.5px;
  text-transform: capitalize;
}
.h3-text p { margin: 0 0 1em 0; }
.h3-text p:last-child { margin-bottom: 0; }
.body-l {
  font-family: var(--ff-body-long);
  font-size: var(--type-body-l);
  line-height: 1.2;
}
.body-l p { margin: 0 0 1em 0; }
.body-l p:last-child { margin-bottom: 0; }

/* -------------------- 5. Buttons with hover inversion -------------------- */
.btn {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  padding: 20px 40px;
  height: 50px;
  font-family: var(--ff-mono-sans);
  font-size: var(--type-btn);
  letter-spacing: -1.5px;
  line-height: 0.88;
  text-transform: capitalize;
  border: 1px solid transparent;
  cursor: pointer;
  transition: background var(--t-hover), color var(--t-hover), border-color var(--t-hover);
  user-select: none;
  white-space: nowrap;
  text-decoration: none;
}
.btn:hover, .btn:focus-visible { text-decoration: none; }

.btn--dark  { background: var(--c-dark);  color: var(--c-light); }
.btn--dark:hover, .btn--dark:focus-visible   { background: var(--c-beige); color: var(--c-dark); }

.btn--light { background: var(--c-beige); color: var(--c-dark); }
.btn--light:hover, .btn--light:focus-visible { background: var(--c-light); color: var(--c-dark); }

.btn--outline { background: transparent; color: var(--c-dark); border-color: var(--c-dark); }
.btn--outline:hover, .btn--outline:focus-visible { background: var(--c-dark); color: var(--c-light); }

/* -------------------- 6. INTRO OVERLAY (video logo) -------------------- */
.wotm-intro {
  position: fixed;
  inset: 0;
  z-index: 9999;
  pointer-events: none;
  overflow: hidden;
}
.wotm-intro__bg {
  position: absolute;
  inset: 0;
  background: var(--c-dark);
  z-index: 1;
}
.wotm-intro__video-wrap {
  position: absolute;
  top: 50%; left: 50%;
  transform: translate(-50%, -50%);
  z-index: 3;
  width: 500px;
  max-width: 60vw;
  aspect-ratio: 16 / 9;
  background: var(--c-dark);   /* kill black letterbox on mobile */
}
.wotm-intro__video {
  width: 100%;
  height: 100%;
  object-fit: contain;
  background: var(--c-dark);   /* exact same as intro bg, no visible cut */
  display: block;
}
body:not(.is-front-page) .wotm-intro { display: none; }

/* On narrow screens, skip the fixed-size box and let the video fill the
   viewport — that way the video edges meet the background perfectly. */
@media (max-width: 720px) {
  .wotm-intro__video-wrap {
    width: 100vw;
    max-width: 100vw;
    height: 100vh;
    aspect-ratio: auto;
  }
}

/* -------------------- 7. STICKY HEADER -------------------- */
/* Fixed at top of every page. Uses modifier class to adapt colors
   to the page background (no mix-blend-mode, we control colors directly). */
.site-header {
  position: fixed;
  top: 0; left: 0; right: 0;
  z-index: 100;
  display: grid;
  grid-template-columns: 1fr auto 1fr;
  align-items: center;
  gap: 20px;
  /* Padding exact from Figma: 70px vertical, 75px horizontal outer. */
  padding: 70px 75px;
  pointer-events: none;
  isolation: isolate;
}
.site-header > * { pointer-events: auto; }

/* Left tag */
.site-header__tag {
  font-family: var(--ff-mono-sans);
  font-size: var(--type-body-m);
  text-transform: uppercase;
  line-height: 1.2;
  max-width: 220px;
}

/* Center logo */
.site-header__logo {
  display: flex;
  align-items: center;
  justify-content: center;
  text-decoration: none;
}
.site-header__logo-svg {
  width: 323px;
  max-width: 100%;
  height: auto;
}

/* Right CTA */
.site-header__cta {
  display: flex;
  justify-content: flex-end;
}

/* LIGHT variant: white text + white logo fill.
   Used on pages with dark backgrounds (home hero video, legal pages). */
.site-header--light .site-header__tag { color: var(--c-light); }
.site-header--light .site-header__cta .btn {
  background: var(--c-light);
  color: var(--c-dark);
}

/* DARK variant: dark text + dark logo fill.
   Used on pages with light backgrounds (apply beige, contact cream). */
.site-header--dark .site-header__tag { color: var(--c-dark); }
.site-header--dark .site-header__cta .btn {
  background: var(--c-dark);
  color: var(--c-light);
}

/* -------------------- 8. HERO -------------------- */
.hero {
  position: relative;
  width: 100%;
  min-height: 100vh;
  color: var(--c-light);
  overflow: hidden;
}
.hero__media { position: absolute; inset: 0; z-index: 0; }
.hero__video { width: 100%; height: 100%; object-fit: cover; }
.hero__overlay {
  position: absolute; inset: 0;
  background: linear-gradient(180deg, rgba(41,37,33,0.15) 0%, rgba(41,37,33,0.35) 100%);
  pointer-events: none;
}
.hero__content {
  position: relative; z-index: 2;
  display: flex; flex-direction: column;
  align-items: center; justify-content: center;
  min-height: 100vh;
  padding: 140px var(--gutter-lg) 80px;  /* top padding clears sticky header */
  text-align: center;
}
.hero__title {
  font-family: var(--ff-mono-serif);
  font-size: var(--type-h1);
  line-height: 1.1;
  letter-spacing: -2.5px;
  text-transform: capitalize;
  color: var(--c-light);
  padding: 0;
  margin: 0;
  max-width: 900px;
}
.hero__script {
  margin-top: 8px;
  transform: rotate(-5deg);
  display: inline-block;
}
.hero__script img { max-width: 280px; filter: invert(1) brightness(1.4); }

/* Emotions logo in hero — uses exclusion like the main logo */
.hero__emotions-logo {
  margin-top: 40px;
  display: flex;
  align-items: center;
  justify-content: center;
  mix-blend-mode: exclusion;
}
.hero__emotions-logo-svg { width: 82px; height: auto; }

/* -------------------- 9. INVITATION -------------------- */
.invitation {
  padding: 100px var(--gutter-lg) 60px;
  display: flex; flex-direction: column; gap: 8px;
  text-align: center;
  align-items: center;
}
.invitation .label { margin: 0 0 20px 0; }
.invitation__body { color: var(--c-dark); max-width: 1200px; }
.invitation__body p { margin-bottom: 0.3em; }

/* -------------------- 10. FEATURE GALLERY -------------------- */
.feature-gallery { padding: 60px var(--gutter-md); }
.feature-gallery__list {
  list-style: none; padding: 0; margin: 0;
  display: grid;
  grid-template-columns: repeat(6, 1fr);
  gap: 20px;
}
.feature-gallery__item {
  display: flex; flex-direction: column; gap: 16px;
  width: 100%;
}
.feature-gallery__img {
  width: 100%;
  aspect-ratio: 1;
  overflow: hidden;
}
.feature-gallery__img img {
  width: 100%; height: 100%;
  object-fit: cover;
  transition: transform 0.8s cubic-bezier(0.16, 1, 0.3, 1);
}
.feature-gallery__item:hover .feature-gallery__img img { transform: scale(1.04); }
.feature-gallery__label {
  font-family: var(--ff-mono-sans);
  font-size: var(--type-body-m);
  line-height: 1.2;
  text-transform: uppercase;
  margin: 0;
  text-align: left;
}

/* -------------------- 11. COPY BLOCKS (right-aligned) -------------------- */
.copy-block {
  padding: 80px var(--gutter-lg);
  display: flex; flex-direction: column; gap: 60px;
}
.copy-block--right { align-items: flex-end; }
.copy-block__intro { width: 454px; max-width: 100%; margin: 0; }
.copy-block__body {
  width: 860px; max-width: 100%;
  display: flex; flex-direction: column; gap: 30px;
}
.copy-block__body--full { width: 100%; }

/* -------------------- 12. USP DARK BLOCK -------------------- */
.usp {
  position: relative;
  background: var(--c-dark);
  color: var(--c-light);
  min-height: 900px;
  padding: 75px 50px;
  display: flex;
  align-items: center;
  justify-content: center;
  overflow: hidden;
}

/* Corner labels rotated 90° */
.usp__corner {
  position: absolute;
  font-family: var(--ff-mono-sans);
  font-size: var(--type-body-m);
  text-transform: uppercase;
  mix-blend-mode: exclusion;
  white-space: nowrap;
  color: var(--c-light);
}
.usp__corner--tl { top: 75px;    left: 50px;  transform: rotate(-90deg); transform-origin: left top; }
.usp__corner--bl { bottom: 75px; left: 50px;  transform: rotate(-90deg); transform-origin: left bottom; }
.usp__corner--tr { top: 75px;    right: 50px; transform: rotate(90deg);  transform-origin: right top; }
.usp__corner--br { bottom: 75px; right: 50px; transform: rotate(90deg);  transform-origin: right bottom; }

/* Stacked headlines */
.usp__stack {
  display: flex;
  flex-direction: column;
  gap: 100px;
  align-items: center;
  text-align: center;
  max-width: 744px;
  margin: 0 auto;
  position: relative;
  z-index: 1;
}
.usp__line {
  font-family: var(--ff-mono-serif);
  font-size: var(--type-h1);
  line-height: 1.1;
  letter-spacing: -2.5px;
  text-transform: capitalize;
  margin: 0;
  color: var(--c-light);
  white-space: nowrap;
}

/* Statement variant (centered with CTA) */
.usp--statement .usp__center {
  display: flex; flex-direction: column; align-items: center; gap: 50px;
  max-width: 900px;
  position: relative;
  z-index: 1;
}
.usp__headline {
  font-family: var(--ff-mono-serif);
  font-size: var(--type-h1);
  line-height: 1.1;
  letter-spacing: -2.5px;
  text-align: center;
  text-transform: capitalize;
  color: var(--c-light);
  margin: 0;
}

/* -------------------- 13. TRILOGY -------------------- */
.trilogy {
  padding: 75px;
  display: flex;
  justify-content: space-between;
  gap: 40px;
}
.trilogy__col {
  font-family: var(--ff-mono-sans);
  font-size: var(--type-body-m);
  line-height: 1.2;
  text-transform: uppercase;
  max-width: 350px;
  margin: 0;
}

/* -------------------- 14. CAROUSEL -------------------- */
.carousel {
  position: relative;
  width: 100%;
  height: 700px;
  overflow: hidden;
}
.carousel__track {
  display: flex;
  gap: 10px;
  height: 100%;
  will-change: transform;
}
.carousel__slide {
  flex: 0 0 auto;
  width: 595px;
  height: 700px;
  margin: 0;
  overflow: hidden;
}
.carousel__slide--wide { width: 844px; }
.carousel__slide img { width: 100%; height: 100%; object-fit: cover; }

/* -------------------- 15. EXPECT -------------------- */
.expect {
  padding: 50px var(--gutter-lg);
  display: flex; flex-direction: column; gap: 75px;
}
.expect__eyebrow { align-self: flex-end; margin: 0; }
.expect__body   { display: flex; flex-direction: column; gap: 20px; }

/* -------------------- 16. FOOTER -------------------- */
.footer { border-top: 0.8px solid var(--c-border); }

/* Brand bar: left 2/3, right 1/3 per design decision */
.footer__brands { display: flex; width: 100%; }
.footer__brand {
  height: 53px;
  display: flex;
  align-items: center;
  justify-content: center;
  padding: 20px 38px;
  transition: opacity 0.2s ease;
  text-decoration: none;
}
.footer__brand:hover { opacity: 0.85; text-decoration: none; }
.footer__brand--dark  { flex: 2 1 0; background: var(--c-dark);  color: var(--c-light); }
.footer__brand--light { flex: 1 1 0; background: var(--c-beige); }
.footer__brand-text {
  font-family: var(--ff-mono-sans);
  font-size: 14.77px;
  letter-spacing: -1.47px;
  text-transform: capitalize;
  line-height: 0.88;
}

/* Emotions logo in footer — bigger and dark (#292521) on beige */
.footer__emotions-logo-svg {
  width: 82px;
  height: 20px;
}

/* Socials & legal bars: left 2/3 + right 1/3 */
.footer__socials, .footer__legal { display: flex; width: 100%; }
.footer__socials-col, .footer__legal-col {
  flex: 1 1 0;
  height: 50px;
  border: 1px solid var(--c-border);
  margin-right: -1px;
  display: flex; align-items: center; justify-content: center;
  gap: 8px;
  padding: 8px 50px;
  font-family: var(--ff-mono-sans);
  font-size: var(--type-body-m);
  text-transform: uppercase;
  line-height: 1.2;
  white-space: nowrap;
  overflow-x: auto;
}
.footer__socials-col--wide,
.footer__legal-col--wide { flex: 2 1 0; }

.footer__socials-col a, .footer__legal-col a { color: var(--c-dark); }
.footer__socials-col a:hover, .footer__legal-col a:hover { text-decoration: underline; }

.footer__divider {
  border-top: 0.8px solid var(--c-border);
  height: 100px;
}

/* Newsletter form */
.newsletter { display: flex; flex-direction: column; }
.newsletter__row {
  display: flex;
  border: 1px solid var(--c-border);
  margin-top: -1px;
  min-height: 50px;
  align-items: center;
  padding: 8px 50px;
}
.newsletter__row--label { justify-content: space-between; gap: 20px; }
.newsletter__row--submit { padding: 0; min-height: 53px; border-top-width: 2px; }
.newsletter__prompt {
  font-family: var(--ff-mono-sans);
  font-size: var(--type-body-m);
  text-transform: uppercase;
  line-height: 1.2;
  margin: 0;
  max-width: 512px;
}
.newsletter__date {
  font-family: var(--ff-script);
  font-size: 40px;
  line-height: 0.8;
  letter-spacing: -1.2px;
  transform: rotate(-2.88deg);
  display: inline-block;
}
.newsletter__input, .newsletter__interest {
  flex: 1;
  border: 0;
  background: transparent;
  padding: 8px 0;
  font-family: var(--ff-mono-sans);
  font-size: var(--type-body-m);
  text-transform: uppercase;
  outline: none;
}
.newsletter__input::placeholder,
.newsletter__interest::placeholder { color: var(--c-dark); opacity: 0.4; }
.newsletter__interest {
  flex: 1;
  border-right: 1px solid var(--c-border);
  height: 50px;
  padding-left: 50px;
  padding-right: 50px;
}
.newsletter__submit {
  flex: 1;
  height: 53px;
  padding: 20px 40px;
  border-radius: 0;
  border: 0;
}
.newsletter__feedback {
  padding: 12px 50px;
  font-family: var(--ff-mono-sans);
  font-size: var(--type-body-m);
  text-transform: uppercase;
}
.newsletter__feedback.is-error   { color: #c0392b; }
.newsletter__feedback.is-success { color: var(--c-dark); }

.footer__bottom {
  display: flex;
  justify-content: space-between;
  align-items: center;
  padding: 8px 50px;
  height: 100px;
  font-family: var(--ff-mono-sans);
  font-size: var(--type-body-m);
  text-transform: uppercase;
}

/* -------------------- 17. PAGE TEMPLATES -------------------- */
.page-wrap { min-height: 60vh; padding-top: 140px; }

/* Apply (legacy, kept for backwards compat) */
.apply {
  background: var(--c-beige);
  color: var(--c-dark);
  min-height: 100vh;
  padding: 140px var(--gutter-lg) 80px;
}

/* ============================================================
   APPLY PAGE — pixel-perfect from Figma node 2:622
   Full-height beige bg, split 50/50: submenu left, iframe right.
   Iframe fills its half completely with no padding bottom.
   ============================================================ */
.apply-page {
  background: var(--c-beige);
  color: var(--c-dark);
  min-height: 100vh;
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 0;
  padding: 0;
}

/* Left column: submenu */
.apply-page__aside {
  padding: 225px 75px 50px;
  display: flex;
  flex-direction: column;
  gap: 40px;
}
.apply-page__select {
  font-family: var(--ff-mono-sans);
  font-size: var(--type-body-m);
  text-transform: uppercase;
  line-height: 1.2;
  margin: 0;
  color: var(--c-dark);
}
.apply-page__tabs {
  display: flex;
  flex-direction: column;
  gap: 40px;
}
.apply-page__tab {
  font-family: var(--ff-mono-serif);
  font-size: var(--type-h2);
  line-height: 1.1;
  letter-spacing: -2px;
  text-transform: capitalize;
  background: none;
  border: 0;
  padding: 0;
  text-align: left;
  cursor: pointer;
  color: var(--c-dark);
  opacity: 0.3;
  text-decoration: none;
  transition: opacity var(--t-hover);
  white-space: nowrap;
}
.apply-page__tab:hover { opacity: 0.7; }
.apply-page__tab.is-active {
  opacity: 1;
  text-decoration: underline;
  text-underline-offset: 6px;
  text-decoration-thickness: 2px;
}

/* Right column: iframe area fills the right half, no padding */
.apply-page__form {
  padding: 140px 0 0 0;  /* only top padding, to clear the sticky header */
  min-height: 100vh;
  display: flex;
  flex-direction: column;
}
.apply-page__frame-wrap {
  display: none;
  flex: 1;
  min-height: 1200px;
  width: 100%;
}
.apply-page__frame-wrap.is-active { display: flex; }
.apply-page__frame-wrap[hidden]   { display: none !important; }
.apply-page__frame {
  width: 100%;
  height: 100%;
  min-height: 1200px;
  border: 0;
  background: transparent;
  display: block;
}

/* Decorative images stacked in the left column (Figma node 2:629) */
.apply-page__deco {
  display: flex;
  flex-direction: column;
  gap: 100px;
  margin-top: 80px;
  padding-left: 0;
}
.apply-page__deco-img {
  position: relative;
  width: 100px;
  height: 80px;
  overflow: visible;
}
.apply-page__deco-img img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  display: block;
}
/* Middle image extends its visual reach with an overlapping handwritten script */
.apply-page__deco-script {
  position: absolute;
  left: 20px;
  top: -10px;
  font-family: var(--ff-script);
  font-size: 40px;
  line-height: 0.85;
  letter-spacing: -1px;
  color: var(--c-dark);
  transform: rotate(-5deg);
  transform-origin: left center;
  white-space: nowrap;
  pointer-events: none;
  padding-left: 90px; /* push past the photo edge */
}
.apply-page__deco-script-indent { padding-left: 40px; display: inline-block; }

/* When middle photo fails to load, keep the script visible without the photo */
.apply-page__deco-img--2.is-imgless {
  width: 200px;
  height: 60px;
  background: transparent;
}
.apply-page__deco-img--2.is-imgless img { display: none; }

/* ============================================================
   CONTACT PAGE — matches user-provided design reference
   Simple layout: sticky header at top, then "/What to expect/"
   title + body text at the left, with enough top padding to clear
   the header. Cream background.
   ============================================================ */
.contact-page {
  background: var(--c-light);
  min-height: 100vh;
}

.contact-expect {
  padding: 280px 75px 100px;
  max-width: 1200px;
  margin: 0 auto;
  display: flex;
  flex-direction: column;
  gap: 20px;
  color: var(--c-dark);
}
.contact-expect .h2 { margin-bottom: 10px; }
.contact-expect .body-l {
  max-width: 1200px;
  line-height: 1.4;
}

/* Legacy contact-hero classes kept for backward compat (unused) */
.contact-hero {
  position: relative;
  width: 100%;
  height: 683px;
  overflow: hidden;
}
.contact-hero__media { position: absolute; inset: 0; }
.contact-hero__media img { width: 100%; height: 100%; object-fit: cover; }
.contact-hero__overlay {
  position: absolute; inset: 0;
  background: linear-gradient(180deg, rgba(41,37,33,0.1) 0%, rgba(41,37,33,0.3) 100%);
  pointer-events: none;
}
.contact-hero__eyebrow {
  position: absolute;
  left: 0; top: 50%;
  transform: translateY(-50%);
  z-index: 2;
  padding: 40px 75px;
}
.contact-hero__new-beginnings {
  font-family: var(--ff-mono-sans);
  font-size: var(--type-body-m);
  text-transform: uppercase;
  color: var(--c-light);
  mix-blend-mode: exclusion;
  writing-mode: vertical-rl;
  transform: rotate(180deg);
  white-space: nowrap;
  display: inline-block;
}

.contact-title-wrap {
  padding: 60px 75px 30px;
  display: flex;
  align-items: flex-start;
  gap: 40px;
  flex-wrap: wrap;
}
.contact-title {
  font-family: var(--ff-mono-serif);
  font-size: var(--type-h1);
  line-height: 1.1;
  letter-spacing: -2.5px;
  text-transform: capitalize;
  color: var(--c-dark);
  margin: 0;
  flex: 1 1 auto;
}
.contact-script {
  font-family: var(--ff-script);
  font-size: 40px;
  line-height: 0.8;
  letter-spacing: -1.2px;
  transform: rotate(-5deg);
  color: var(--c-dark);
  margin: 20px 40px 0 0;
  white-space: nowrap;
}

.contact-blocks { padding: 80px 75px; }
.contact-blocks__grid {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 60px;
  max-width: 1200px;
  margin: 0 auto;
}
.contact-block {
  display: flex;
  flex-direction: column;
  gap: 12px;
  text-align: left;
}
.contact-block__label {
  font-family: var(--ff-mono-sans);
  font-size: 12px;
  letter-spacing: 1px;
  text-transform: uppercase;
  opacity: 0.6;
  margin: 0;
}
.contact-block__value {
  font-family: var(--ff-mono-serif);
  font-size: 22px;
  letter-spacing: -1px;
  color: var(--c-dark);
  line-height: 1.3;
  margin: 0;
}
.contact-block__value a { color: var(--c-dark); }

/* Legacy contact (for backward compat) */
.contact {
  background: var(--c-light);
  padding: 140px var(--gutter-lg) 80px;
}
.contact__title {
  font-family: var(--ff-mono-serif);
  font-size: var(--type-h1);
  letter-spacing: -2.5px;
  text-transform: capitalize;
  text-align: center;
  margin: 0 0 60px 0;
}
.contact__grid {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 40px;
  max-width: 1200px;
  margin: 0 auto;
}
.contact__block { text-align: center; display: flex; flex-direction: column; gap: 8px; }
.contact__block-label {
  font-family: var(--ff-mono-sans);
  font-size: 12px;
  letter-spacing: 2px;
  text-transform: uppercase;
  opacity: 0.6;
}
.contact__block-value {
  font-family: var(--ff-mono-serif);
  font-size: 22px;
  letter-spacing: -1px;
  text-transform: capitalize;
}

/* ============================================================
   LEGAL PAGE (Terms / Privacy) — Figma node 2:652
   Dark background with cream text, content max 1200px wide
   ============================================================ */
.legal-page {
  background: var(--c-dark);
  color: var(--c-light);
  min-height: 100vh;
}
.legal-page__body {
  padding: 220px 75px 80px;
  max-width: 1512px;
  margin: 0 auto;
}
.legal-page__updated {
  font-family: var(--ff-mono-sans);
  font-size: var(--type-body-m);
  text-transform: uppercase;
  text-align: right;
  margin: 0 0 80px 0;
  opacity: 0.8;
}
.legal-page__title {
  font-family: var(--ff-mono-serif);
  font-size: var(--type-h2);
  line-height: 1.1;
  letter-spacing: -2px;
  text-transform: capitalize;
  margin: 0 0 40px 0;
  color: var(--c-light);
}
.legal-page__lede {
  font-family: var(--ff-body-long);
  font-size: var(--type-body-l);
  line-height: 1.4;
  margin: 0 0 80px 0;
  max-width: 1100px;
}
.legal-page__section {
  margin: 0 0 60px 0;
  max-width: 1100px;
}
.legal-page__section h2 {
  font-family: var(--ff-mono-sans);
  font-size: var(--type-body-m);
  text-transform: uppercase;
  letter-spacing: 0.5px;
  margin: 0 0 20px 0;
}
.legal-page__section h3 {
  font-family: var(--ff-mono-sans);
  font-size: var(--type-body-m);
  text-transform: uppercase;
  letter-spacing: 0.5px;
  margin: 24px 0 12px 0;
}
.legal-page__section p,
.legal-page__section li {
  font-family: var(--ff-body-long);
  font-size: var(--type-body-l);
  line-height: 1.4;
  margin: 0 0 12px 0;
}
.legal-page__section ul {
  padding-left: 24px;
  margin: 0 0 20px 0;
}
.legal-page__section ul li { margin-bottom: 8px; }
.legal-page__section a {
  color: var(--c-beige);
  text-decoration: underline;
}
.legal-page__section strong { font-weight: 400; }

.legal-page__content {
  font-family: var(--ff-body-long);
  font-size: var(--type-body-l);
  line-height: 1.4;
  max-width: 1100px;
}
.legal-page__content h1 {
  font-family: var(--ff-mono-serif);
  font-size: var(--type-h2);
  letter-spacing: -2px;
  text-transform: capitalize;
  margin: 0 0 40px 0;
}
.legal-page__content h2 {
  font-family: var(--ff-mono-sans);
  font-size: var(--type-body-m);
  text-transform: uppercase;
  margin: 40px 0 16px 0;
}
.legal-page__content a { color: var(--c-beige); text-decoration: underline; }

.legal-page__signoff {
  margin-top: 100px;
  display: flex;
  flex-direction: column;
  align-items: flex-end;
  gap: 40px;
}
.legal-page__signoff-small {
  font-family: var(--ff-mono-sans);
  font-size: var(--type-body-m);
  text-transform: uppercase;
  margin: 0;
  align-self: flex-start;
}
.legal-page__signoff-script {
  font-family: var(--ff-script);
  font-size: 40px;
  line-height: 0.9;
  color: var(--c-light);
  transform: rotate(-5deg);
  margin: 0 80px 0 0;
  text-align: left;
}
.legal-page__signoff-indent { padding-left: 60px; display: inline-block; }

/* Footer on dark legal page: the brand bar still has the dark side
   but we need contrast — add a top border so it visually separates */
.footer--on-dark {
  border-top: 0;
}
.legal-page .footer {
  border-top: 0.8px solid var(--c-light);
  background: var(--c-light);
  color: var(--c-dark);
}

/* Legacy .legal (backward compat) */
.legal {
  background: var(--c-dark);
  color: var(--c-light);
  padding: 140px var(--gutter-lg) 80px;
  min-height: 100vh;
}
.legal__inner {
  max-width: 860px;
  margin: 0 auto;
  font-family: var(--ff-body-long);
  font-size: var(--type-body-l);
  line-height: 1.6;
}
.legal__inner h1, .legal__inner h2, .legal__inner h3 {
  font-family: var(--ff-mono-serif);
  letter-spacing: -1px;
  text-transform: capitalize;
  margin: 2em 0 0.8em;
}
.legal__inner h1 { font-size: var(--type-h1); margin-top: 0; }
.legal__inner h2 { font-size: var(--type-h2); }
.legal__inner h3 { font-size: var(--type-h3); }
.legal__inner a { color: var(--c-beige); text-decoration: underline; }

/* -------------------- 18. GLOBAL SCROLL FADE-IN -------------------- */
/* JS adds `.js-ready` to <body> on load. Only then do we hide elements
   for the reveal animation — this way, if JS fails, content stays visible. */
body.js-ready .invitation,
body.js-ready .copy-block,
body.js-ready .trilogy,
body.js-ready .expect,
body.js-ready .usp__stack,
body.js-ready .usp__center,
body.js-ready .feature-gallery__item,
body.js-ready .contact-expect,
body.js-ready .legal-page__section,
body.js-ready .apply-page__aside,
body.js-ready .apply-page__form {
  opacity: 0;
  transform: translateY(30px);
  transition: opacity 1s cubic-bezier(0.16, 1, 0.3, 1),
              transform 1s cubic-bezier(0.16, 1, 0.3, 1);
  will-change: opacity, transform;
}
body.js-ready .invitation.is-inview,
body.js-ready .copy-block.is-inview,
body.js-ready .trilogy.is-inview,
body.js-ready .expect.is-inview,
body.js-ready .usp__stack.is-inview,
body.js-ready .usp__center.is-inview,
body.js-ready .feature-gallery__item.is-inview,
body.js-ready .contact-expect.is-inview,
body.js-ready .legal-page__section.is-inview,
body.js-ready .apply-page__aside.is-inview,
body.js-ready .apply-page__form.is-inview {
  opacity: 1;
  transform: translateY(0);
}

/* Feature gallery items get a nice stagger */
body.js-ready .feature-gallery__item:nth-child(1) { transition-delay: 0ms; }
body.js-ready .feature-gallery__item:nth-child(2) { transition-delay: 80ms; }
body.js-ready .feature-gallery__item:nth-child(3) { transition-delay: 160ms; }
body.js-ready .feature-gallery__item:nth-child(4) { transition-delay: 240ms; }
body.js-ready .feature-gallery__item:nth-child(5) { transition-delay: 320ms; }
body.js-ready .feature-gallery__item:nth-child(6) { transition-delay: 400ms; }

@media (prefers-reduced-motion: reduce) {
  *, *::before, *::after {
    animation-duration: 0.01ms !important;
    transition-duration: 0.01ms !important;
  }
  body.js-ready .invitation,
  body.js-ready .copy-block,
  body.js-ready .trilogy,
  body.js-ready .expect,
  body.js-ready .usp__stack,
  body.js-ready .usp__center,
  body.js-ready .feature-gallery__item,
  body.js-ready .contact-expect,
  body.js-ready .legal-page__section,
  body.js-ready .apply-page__aside,
  body.js-ready .apply-page__form {
    opacity: 1; transform: none;
  }
  .wotm-intro { display: none !important; }
}

/* -------------------- 19. Responsive -------------------- */
@media (max-width: 1100px) {
  :root {
    --gutter-lg: 40px;
    --gutter-md: 30px;
    --type-h1: 38px;
    --type-h2: 30px;
    --type-h3: 24px;
    --type-body-l: 16px;
  }
  .feature-gallery__list { grid-template-columns: repeat(3, 1fr); }
  .usp { min-height: 700px; }
  .usp__stack { gap: 60px; }
  .carousel { height: 500px; }
  .carousel__slide { width: 400px; height: 500px; }
  .carousel__slide--wide { width: 560px; }
  .trilogy { flex-direction: column; gap: 30px; padding: 60px 40px; }
  .apply__grid { grid-template-columns: 1fr; gap: 40px; }
  .contact__grid { grid-template-columns: 1fr; gap: 30px; }
}

@media (max-width: 720px) {
  :root {
    --gutter-lg: 20px;
    --gutter-md: 20px;
    --type-h1: 32px;
    --type-h2: 26px;
    --type-h3: 20px;
    --type-body-l: 15px;
    --type-body-m: 13px;
  }

  /* Sticky header stacks vertically */
  .site-header {
    grid-template-columns: 1fr;
    justify-items: center;
    gap: 10px;
    padding: 16px 20px;
    text-align: center;
  }
  .site-header__tag { max-width: none; font-size: 10px; }
  .site-header__logo-svg { width: 180px; }
  .site-header__cta { justify-content: center; }

  /* Hero more breathing room from bigger sticky header */
  .hero__content { padding: 200px 20px 60px; min-height: 100vh; }
  .hero__title { font-size: 28px; }
  .hero__script img { max-width: 220px; }
  .hero__emotions-logo-svg { width: 65px; }

  .invitation { padding: 60px 20px 40px; }

  .feature-gallery__list { grid-template-columns: repeat(2, 1fr); gap: 16px; }

  .copy-block { padding: 50px 20px; gap: 40px; }
  .copy-block--right { align-items: stretch; }
  .copy-block__intro { width: 100%; }

  .usp { padding: 80px 40px; min-height: 0; }
  .usp__corner { font-size: 10px; }
  .usp__corner--tl, .usp__corner--bl { left: 10px; }
  .usp__corner--tr, .usp__corner--br { right: 10px; }
  .usp__stack { gap: 50px; }
  .usp__line { font-size: 26px; letter-spacing: -1px; white-space: normal; }
  .usp__headline { font-size: 28px; }

  .trilogy { flex-direction: column; gap: 20px; padding: 40px 20px; }

  .carousel { height: 380px; }
  .carousel__slide { width: 280px; height: 380px; }
  .carousel__slide--wide { width: 380px; }

  .expect { padding: 40px 20px; gap: 40px; }

  /* ============================================================
     Footer mobile: re-arrange into 2 brand columns.
     Desktop has 3 stacked rows (brands, socials, legal), each with
     2 cells side by side. On mobile we keep 2 side-by-side columns
     (WOTM left, Emotions right) and stack the 3 items vertically
     inside each column. This is done by removing the horizontal
     flex/border and using a grid on each row-wrapper instead.
     ============================================================ */
  .footer__brand {
    height: auto;
    padding: 14px 8px;
    font-size: 11px;
    text-align: center;
  }
  .footer__brand-text { font-size: 11px; letter-spacing: -1px; }
  .footer__emotions-logo-svg { width: 55px; height: auto; }

  /* Keep socials / legal as 2-column rows (don't stack them vertically).
     That way "WOTM > Instagram" stays directly under "WHERE ON THE MAP"
     and "Emotions > Instagram" stays under "EMOTIONS". */
  .footer__socials,
  .footer__legal {
    flex-direction: row;    /* stay side-by-side */
    display: flex;
  }
  .footer__socials-col,
  .footer__legal-col,
  .footer__socials-col--wide,
  .footer__legal-col--wide {
    flex: 1 1 0;            /* equal width on mobile */
    padding: 10px 8px;
    font-size: 10px;
    letter-spacing: 0;
    height: auto;
    min-height: 42px;
    white-space: normal;
    text-align: center;
    line-height: 1.3;
  }

  /* Newsletter stacks */
  .newsletter__row {
    flex-direction: column;
    min-height: auto;
    padding: 16px 20px;
    gap: 12px;
    align-items: stretch;
  }
  .newsletter__row--submit { padding: 0; }
  .newsletter__interest {
    flex: 1; border-right: 0;
    border-bottom: 1px solid var(--c-border);
    padding: 14px 20px;
  }
  .newsletter__submit { width: 100%; }
  .newsletter__date { font-size: 28px; }

  .footer__bottom {
    padding: 20px; height: auto; gap: 16px;
    flex-direction: column; text-align: center;
  }
  .footer__divider { height: 40px; }

  .page-wrap { padding-top: 100px; }
  .apply { padding: 60px 20px 40px; }
  .apply__frame, .apply__frame-wrap, .apply__content { min-height: 500px; }

  /* Apply page — stack on mobile */
  .apply-page {
    grid-template-columns: 1fr;
    min-height: auto;
  }
  .apply-page__aside {
    padding: 120px 20px 30px;
    gap: 20px;
  }
  .apply-page__tab { font-size: 24px; letter-spacing: -1px; }
  .apply-page__form {
    padding: 20px 0 0 0;
  }
  .apply-page__frame-wrap { min-height: 800px; }
  .apply-page__frame { min-height: 800px; }
  .apply-page__deco { gap: 60px; margin-top: 40px; }
  .apply-page__deco-img { width: 90px; height: 72px; }
  .apply-page__deco-script { font-size: 30px; }

  /* Contact page — stack on mobile */
  .contact { padding: 60px 20px 40px; }
  .contact-expect {
    padding: 160px 20px 60px;
  }
  .contact-hero { height: 400px; }
  .contact-title-wrap {
    padding: 30px 20px 20px;
    gap: 16px;
    flex-direction: column;
  }
  .contact-title { font-size: 28px; letter-spacing: -1px; }
  .contact-script { font-size: 28px; margin: 0; }
  .contact-blocks { padding: 40px 20px; }
  .contact-blocks__grid {
    grid-template-columns: 1fr;
    gap: 30px;
  }

  .legal { padding: 60px 20px 40px; }
}

/* -------------------- 20. Force all text Regular weight -------------------- */
body, body *,
.btn, .btn--dark, .btn--light, .btn--outline,
.footer__brand-text,
strong, b {
  font-weight: 400 !important;
}