/* NextRooms landing page - direction B, "lively". Alternating full-bleed bands.
   Tokens come from ../shared/tokens.css. No raw hex except the two rgba fills the
   brief names for the dark-band cards and hairlines. */

/* ---------------------------------------------------------------- base */
*, *::before, *::after { box-sizing: border-box; }

body {
  margin: 0;
  background: var(--cream);
  color: var(--green);
  font-family: var(--font);
  font-size: var(--step-0);
  line-height: 1.6;
  -webkit-font-smoothing: antialiased;
}
@media (min-width: 900px) { body { font-size: 1.0625rem; } }

img, svg { max-width: 100%; }
:where(img) { object-fit: cover; }

:focus-visible { outline: 2px solid var(--gold); outline-offset: 3px; }

.skip {
  position: absolute; left: 0; top: 0; z-index: 60;
  transform: translateY(-120%);
  background: var(--green); color: var(--cream);
  padding: .75rem 1.25rem; font-weight: 700; text-decoration: none;
  transition: transform var(--dur) var(--ease-out);
}
.skip:focus { transform: translateY(0); }

#top, #main, #join { scroll-margin-top: 5rem; }

.wrap { width: 100%; max-width: var(--container); margin-inline: auto; padding-inline: var(--gutter); }
.band { padding-block: var(--section); }
.band--cream { background: var(--cream); color: var(--green); }
.band--green { background: var(--green); color: var(--cream); }

.eyebrow {
  margin: 0 0 1rem;
  font-size: .9375rem; font-weight: 700;
  letter-spacing: .14em; text-transform: uppercase;
  color: var(--gold-text);
}
.eyebrow--green { color: var(--gold-on-green); }

.ico { display: block; }

/* ---------------------------------------------------------------- buttons */
.btn {
  display: inline-flex; align-items: center; justify-content: center; gap: .6rem;
  min-height: 48px; padding: .7rem 1.5rem;
  border: 1px solid transparent; border-radius: var(--radius-pill);
  font-size: .9375rem; font-weight: 700; line-height: 1.25;
  text-align: center; text-decoration: none;
  transition: background-color var(--dur) var(--ease-out),
              color var(--dur) var(--ease-out),
              border-color var(--dur) var(--ease-out);
}
.btn__ico { width: 20px; height: 20px; flex: none; }

.btn--primary { background: var(--green); color: var(--cream); }
.btn--primary:hover { background: var(--green-deep); box-shadow: inset 0 0 0 1px var(--gold); }
.btn--outline { border-color: var(--green); color: var(--green); }
.btn--outline:hover { background: var(--cream-deep); }
.btn--gold { background: var(--gold); color: var(--green-deep); }
.btn--gold:hover { border-color: var(--cream); }
.btn--creamline { border-color: var(--cream); color: var(--cream); }
.btn--creamline:hover { background: var(--cream); color: var(--green); }

/* ---------------------------------------------------------------- sticky bar */
.bar {
  position: sticky; top: 0; z-index: 40;
  background: var(--cream); color: var(--green);
  transition: background-color 250ms var(--ease-out), color 250ms var(--ease-out);
}
.bar.is-solid { background: var(--green); color: var(--cream); }

.bar__inner {
  width: 100%; max-width: var(--container); margin-inline: auto;
  padding: .75rem var(--gutter);
  display: flex; align-items: center; justify-content: space-between; gap: 1rem;
}
/* The anchor is 44px tall for the touch target; the artwork stays 40 and is centred in it. */
.bar__logo { position: relative; display: block; width: 87px; height: 44px; flex: none; }
.bar__logoPos, .bar__logoNeg {
  position: absolute; left: 0; top: 50%; transform: translateY(-50%);
  width: 87px; height: 40px; object-fit: contain;
  transition: opacity 250ms var(--ease-out);
}
.bar__logoNeg { opacity: 0; }
.bar.is-solid .bar__logoPos { opacity: 0; }
.bar.is-solid .bar__logoNeg { opacity: 1; }

.bar__right { display: flex; align-items: center; gap: .75rem; }

.lang {
  display: inline-flex; align-items: center; gap: .12rem;
  min-height: 44px; min-width: 44px; padding: 0 .5rem;
  background: none; border: 0; cursor: pointer;
  font: inherit; font-size: .875rem; font-weight: 700; letter-spacing: .06em;
  color: inherit;
}
.lang [data-lang] { opacity: .45; transition: opacity var(--dur) var(--ease-out); }
.lang [data-lang].is-active { opacity: 1; }

.btn--bar { min-height: 44px; padding: .5rem 1.1rem; font-size: .9375rem; background: var(--gold); color: var(--green-deep); }
.btn--bar:hover { background: var(--cream); }
/* On a phone the full survey label would own the whole bar and an icon alone does not name the
   action, so the bar button is hidden there. The hero shows both CTAs one scroll below. */
@media (max-width: 639px) {
  .btn--bar { display: none; }
  .bar__logo { width: 74px; }
  .bar__logoPos, .bar__logoNeg { width: 74px; height: 34px; }
}

/* ---------------------------------------------------------------- hero */
.hero { padding-top: clamp(2.5rem, 6vw, 4.5rem); }
.hero__tagline {
  margin: 0 0 1.1rem;
  font-size: var(--step-1); font-style: italic; font-weight: 500;
  color: var(--ink-muted);
}
.hero__h1 {
  margin: 0 0 1.75rem; max-width: 20ch;
  font-size: var(--step-4); font-weight: 800; line-height: 1.08; letter-spacing: -.015em;
}
.hero__h1 em { font-style: normal; color: var(--gold-display); }

.pill {
  display: inline-block; margin: 0 0 2.25rem;
  background: var(--green); color: var(--cream);
  border-radius: var(--radius-pill); padding: .6rem 1.4rem;
  font-size: .8125rem; font-weight: 700; letter-spacing: .12em;
}
/* The FR slogan is 30 unbreakable characters; at 13px with .12em tracking it is 388px, wider than a 375px phone. */
@media (max-width: 639px) { .pill { font-size: .75rem; letter-spacing: .07em; padding: .55rem 1rem; } }
/* Side by side only from 1200: below that the survey label breaks over two or three lines,
   and the FR string is a fifth longer again. Measured at 640/768/900/1024 in both languages. */
.hero__ctas { display: grid; gap: .875rem; grid-auto-rows: 1fr; }
/* Pre-hidden by the inline script before first paint, so the hero never paints, blanks and re-enters.
   main.js sets the end values inline; js-late shows everything if the module never runs. */
.js-anim [data-hero] { opacity: 0; }
.js-late [data-hero] { opacity: 1; }
@media (min-width: 640px) { .hero__ctas { justify-items: start; } .hero__photo { aspect-ratio: 3 / 2; } }
.hero__photo { margin-top: 2.5rem; aspect-ratio: 4 / 3; border-radius: var(--radius); }
.js-anim .hero__photo { animation: photoIn 900ms var(--ease-out) 150ms both; }
@keyframes photoIn { from { opacity: 0; transform: scale(1.03); } to { opacity: 1; transform: none; } }
@media (min-width: 900px) {
  .hero { display: flex; align-items: center; }
  .hero__inner { width: 100%; display: grid; grid-template-columns: minmax(0, 1fr) minmax(0, 42%); column-gap: 4rem; align-items: center; }
  .hero__photo { margin-top: 0; aspect-ratio: 4 / 5; }
}


/* ---------------------------------------------------------------- problem / solution */
.ps__grid { display: grid; gap: 2.75rem; }
@media (min-width: 900px) { .ps__grid { grid-template-columns: 1fr 1fr; gap: 4rem; } }
.ps__body { margin: 0; max-width: var(--measure); font-size: var(--step-1); line-height: 1.65; }
.ps__body strong { color: var(--gold-on-green); font-weight: 700; }
.ps__close { margin: 1.4rem 0 0; max-width: var(--measure); font-size: var(--step-1); font-weight: 700; color: var(--gold-on-green); }

/* ---------------------------------------------------------------- closed space */
/* the notice sits on a darkened corridor: the photo fills the band, a green wash keeps the card legible */
.closed { position: relative; isolation: isolate; padding-block: calc(var(--section) * .85); color: var(--green); }
.closed__bg { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; z-index: -2; filter: saturate(.7); }
.closed::before { content: ""; position: absolute; inset: 0; z-index: -1; background: rgba(6, 59, 50, .74); }
.closed__card {
  position: relative; max-width: 780px; margin-inline: auto;
  display: flex; align-items: flex-start; gap: 1.25rem;
  background: var(--cream); border: 1px solid var(--gold); border-radius: var(--radius);
  padding: clamp(1.5rem, 3vw, 2.25rem);
  box-shadow: 0 1px 2px rgba(6, 59, 50, .08);
}
.closed__mark {
  display: grid; place-items: center; flex: none;
  width: 48px; height: 48px; border-radius: 50%;
  background: var(--gold); color: var(--green);
}
.closed__ico { width: 26px; height: 26px; }
.closed__title { margin: 0 0 .5rem; font-size: var(--step-2); font-weight: 700; line-height: 1.3; }
.closed__body { margin: 0; max-width: var(--measure); color: var(--ink-muted); }

/* ---------------------------------------------------------------- the 3 R's */
.rs__intro { margin: 0 0 2.75rem; max-width: var(--measure); font-size: var(--step-1); color: var(--ink-muted); }
.rs__grid { display: grid; gap: 2.75rem; justify-items: center; }
@media (min-width: 900px) {
  .rs__grid { grid-template-columns: 320px 1fr; gap: 4.5rem; align-items: center; justify-items: start; }
}
.rs__loopWrap { width: min(320px, 76vw); }
.rs__loop { display: block; width: 100%; height: auto; }
.rs__nodes circle { fill: var(--gold); }
.rs__nodes text {
  fill: var(--green); font-family: var(--font);
  font-size: 20px; font-weight: 800;
  text-anchor: middle; dominant-baseline: central;
}
.rs__list { display: grid; gap: 1.9rem; margin: 0; padding: 0; list-style: none; counter-reset: r; }
.rs__item { display: grid; grid-template-columns: 32px 1fr; column-gap: .9rem; counter-increment: r; }
.rs__item::before {
  content: counter(r); grid-row: 1 / span 2; align-self: start;
  width: 32px; height: 32px; border-radius: 50%; margin-top: .1rem;
  display: grid; place-items: center;
  background: var(--gold); color: var(--green-deep); font-size: .9375rem; font-weight: 800;
}
.rs__title, .rs__body { grid-column: 2; }
.rs__title { margin: 0 0 .35rem; font-size: var(--step-2); font-weight: 700; }
.rs__body { margin: 0; max-width: 44ch; color: var(--ink-muted); }

/* ---------------------------------------------------------------- how it works */
.how__grid { display: grid; gap: 1.5rem; margin: 0; padding: 0; list-style: none; counter-reset: step; }
/* below 900 the five steps are a numbered list with hairlines; five stacked boxes read as a template */
.step { counter-increment: step; padding: 1.25rem 0; border-top: 1px solid rgba(242, 237, 227, .18); }
@media (min-width: 900px) {
  .step {
    background: rgba(242, 237, 227, .06);
    border: 1px solid rgba(242, 237, 227, .14);
    border-radius: var(--radius);
    padding: 1.5rem 1.25rem;
  }
}
.step::before {
  content: counter(step, decimal-leading-zero);
  display: block; margin-bottom: .7rem;
  font-size: var(--step-2); font-weight: 800; letter-spacing: .04em;
  color: var(--gold);
}
.step__title { margin: 0 0 .45rem; font-size: var(--step-1); font-weight: 700; color: var(--cream); line-height: 1.3; }
.step__body { margin: 0; font-size: var(--step-0); color: var(--cream-muted); }
@media (min-width: 900px) { .how__grid { grid-template-columns: repeat(3, 1fr); } }
@media (min-width: 1200px) { .how__grid { grid-template-columns: repeat(5, 1fr); gap: 1.25rem; } }

/* ---------------------------------------------------------------- benefits */
/* three benefits as a list beside one photo, not three cards each wearing a photo */
.bens__layout { display: grid; gap: 2.5rem; }
@media (min-width: 900px) { .bens__layout { grid-template-columns: 1fr 1fr; gap: 4.5rem; align-items: center; } }
.bens__grid { display: grid; margin: 0; padding: 0; list-style: none; }
.ben { padding: 1.5rem 0; border-top: 1px solid var(--cream-deep); }
.ben:last-child { border-bottom: 1px solid var(--cream-deep); }
.bens__photo { aspect-ratio: 4 / 3; border-radius: var(--radius); }
@media (min-width: 900px) { .bens__photo { aspect-ratio: 1 / 1; } }
.ben__ico { width: 28px; height: 28px; margin-bottom: 1.1rem; color: var(--gold); }
.ben__title { margin: 0 0 .4rem; font-size: var(--step-2); font-weight: 700; }
.ben__body { margin: 0; color: var(--ink-muted); }

/* ---------------------------------------------------------------- join + contact */
.join__grid { display: grid; gap: 3rem; }
@media (min-width: 900px) {
  .join__grid { grid-template-columns: 1fr 1fr; gap: 4.5rem; }
  .join__col--contact { border-left: 1px solid rgba(242, 237, 227, .18); padding-left: 4.5rem; }
}
.join__title { margin: 0 0 .8rem; max-width: 24ch; font-size: var(--step-3); font-weight: 700; line-height: 1.3; color: var(--cream); }
.join__body { margin: 0 0 2rem; max-width: var(--measure); color: var(--cream-muted); }
/* stacked, not side by side: both labels are long sentences and the FR pair is longer still */
.join__ctas { display: grid; gap: .875rem; }
.join__ctas .btn { min-height: 48px; }
@media (min-width: 640px) { .join__ctas { justify-items: start; } }


/* Standalone links, not links inside a sentence, so they get a 44px hit box: .45rem of
   padding on a 30px line box. The rule is text-decoration rather than a border so it stays
   against the text instead of drifting to the bottom of the padding. */
.contact__site, .founder__mail {
  padding-block: .55rem;
  text-decoration: underline; text-decoration-thickness: 1px; text-underline-offset: .3em;
}
.contact__site {
  display: inline-block; margin-bottom: 1.45rem;
  font-size: var(--step-1); font-weight: 700; color: var(--gold-on-green);
}
.contact__founders { display: grid; gap: 1.4rem; margin: 0 0 1.75rem; padding: 0; list-style: none; }
/* The email is the longest string on the page. On a phone it takes the full column width
   instead of sitting in the 275px left beside the initials circle, which broke it mid-address. */
.founder { display: grid; grid-template-columns: auto 1fr; column-gap: 1rem; row-gap: .1rem; }
.founder__mark {
  grid-column: 1; grid-row: 1 / span 2; align-self: start;
  display: grid; place-items: center;
  width: 44px; height: 44px; border-radius: 50%;
  background: var(--gold); color: var(--green-deep);
  font-size: .9375rem; font-weight: 800; letter-spacing: .02em;
}
.founder__name { grid-column: 2; grid-row: 1; margin: 0; font-size: var(--step-1); font-weight: 700; color: var(--cream); }
.founder__role { grid-column: 2; grid-row: 2; margin: 0; font-size: var(--step-1); font-style: italic; font-weight: 600; color: var(--gold-on-green); }
.founder__mail {
  grid-column: 1 / -1; grid-row: 3;
  justify-self: start; margin-top: .05rem;
  /* 18px puts the longer of the two addresses at 338px in a 335px column, one character over.
     17px measures 320px and clears it. */
  font-size: 1.0625rem; font-weight: 700; color: var(--gold-on-green);
  overflow-wrap: anywhere;
}
@media (min-width: 640px) { .founder__mail { grid-column: 2; font-size: var(--step-1); } }
.contact__bio { margin: 0; max-width: var(--measure); color: var(--cream-muted); }

/* ---------------------------------------------------------------- footer */
.foot { background: var(--green); color: var(--cream-muted); border-top: 1px solid rgba(242, 237, 227, .14); padding-block: 1.5rem; }
.foot__inner { display: flex; align-items: center; gap: .875rem; }
.foot__mark { width: 28px; height: 28px; }
.foot__line { margin: 0; font-size: .875rem; }

/* ---------------------------------------------------------------- reduced motion */
@media (prefers-reduced-motion: reduce) {
  *, *::before, *::after {
    animation-duration: .01ms !important;
    animation-iteration-count: 1 !important;
    transition-duration: .01ms !important;
    scroll-behavior: auto !important;
  }
}