/* m4 · layout.css — container, hero stage structure, "Why" section grid (Mark4 project heroes, scoped under .m4) */

/* Each hero's 500vh track runs on under the shorter "Why" section that overlaps it; clip the block so the
   last hero's clouds never show below "Why Shivera". (clip, not hidden: hidden would break the sticky stages) */
.m4 { position: relative; overflow: clip; }

.m4 .m4-container {
  width: 100%;
  max-width: calc(192 * var(--m4r));
  margin: 0 auto;
  padding: 0 calc(2.5 * var(--m4r));
}

@media (min-width: 768px) {
  .m4 .m4-container {
    padding: 0 calc(10 * var(--m4r));
  }
}

/* ============================================================
   3. HERO STAGE — 350vh mobile / 500vh desktop scroll track,
      100vh sticky stage, next section slides over it.
   ============================================================ */
.m4 .m4-hero {
  position: relative;
  height: calc(var(--vh) * 350);
  margin-bottom: calc(var(--vh) * -100);
  color: var(--hero-ink, var(--ink));
  --mark-w: calc(23.5 * var(--m4r));
}

@media (min-width: 768px) {
  .m4 .m4-hero {
    height: calc(var(--vh) * 500);
    --mark-w: calc(97.7 * var(--m4r));
  }
}

.m4 .m4-hero--light {
  --hero-ink: var(--bg);
  --hero-ink-50: rgba(248, 244, 233, 0.62);
}

.m4 .m4-hero__top {
  position: sticky;
  top: 0;
  height: calc(var(--vh) * 100);
}

.m4 .m4-hero__bg {
  position: absolute;
  inset: 0;
  overflow: hidden;
  pointer-events: none;
}

.m4 .m4-hero__back {
  position: absolute;
  inset: 0;
}

.m4 .m4-hero__back img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  object-position: center;
}

.m4 .m4-hero__house {
  position: absolute;
  top: calc(var(--vh) * var(--house-top, 60));
  left: calc((100% - var(--house-w, 100%)) / 2);
  width: var(--house-w, 100%);
  aspect-ratio: var(--house-ar, 700 / 622);
  z-index: 1;
  transform-origin: center bottom;
  will-change: transform, opacity;
}

.m4 .m4-hero__house img {
  width: 100%;
  height: 100%;
  object-fit: contain;
  object-position: center top;
}

/* Wide panoramic cut-out: oversize it on phones so the towers stay legible */
.m4 .m4-hero--narrow {
  --house-scale: 1.8;              /* single tower must outgrow the wordmark on 16:9 screens too */
  --house-lift: 40;
  --mark-w: calc(20 * var(--m4r));
}

@media (min-width: 768px) {
  .m4 .m4-hero--narrow {
    --mark-w: calc(72 * var(--m4r));
  }
}

/* Per-hero motion: how much the cut-out grows and lifts over the track (JS reads these) */
.m4 .m4-hero {
  --house-top: 72;
  --house-scale: 1.32;
  --house-lift: 46;
}

.m4 .m4-hero--wide {
  --house-w: 200%;
  --house-top: 63;
  --house-scale: 1.6;
  --house-lift: 18;
}

@media (min-width: 768px) {
  .m4 .m4-hero--wide {
    --house-w: 100%;
    --house-top: 66;
    --house-scale: 1.6;
    --house-lift: 60;
  }
}

/* the free-standing tower is buried under the veil at rest (the engine fades it in as you scroll);
   the copy inside the wordmark composite must stay opaque or the letters would never fill */
.m4 .m4-hero__bg > .m4-hero__house { opacity: 0; }

.m4 .m4-hero__composite {
  position: absolute;
  inset: 0;
  z-index: 4;                                   /* the city-filled letters stay above the clouds too */
  opacity: 0;
  -webkit-mask-repeat: no-repeat;
  mask-repeat: no-repeat;
  -webkit-mask-position: center;
  mask-position: center;
  -webkit-mask-size: var(--mark-w) auto;
  mask-size: var(--mark-w) auto;
  will-change: opacity;
}

.m4 .m4-hero__clouds {
  position: absolute;
  inset: 0;
  z-index: 2;
}

.m4 .m4-hero__cloud {
  position: absolute;
  will-change: transform;
}

.m4 .m4-hero__cloud:first-child {
  top: calc(33.7 * var(--m4r));
  left: calc(-57.2 * var(--m4r));
  width: calc(70.2 * var(--m4r));
  height: calc(29.8 * var(--m4r));
}

.m4 .m4-hero__cloud:last-child {
  top: calc(37.12 * var(--m4r));
  right: calc(-41.2 * var(--m4r));
  width: calc(55.7 * var(--m4r));
  height: calc(23.6 * var(--m4r));
}

@media (min-width: 768px) {
  .m4 .m4-hero__cloud:first-child {
    top: 25%;
    left: calc(-33.72 * var(--m4r));
    width: calc(112.4 * var(--m4r));
    height: calc(47.7 * var(--m4r));
  }

  .m4 .m4-hero__cloud:last-child {
    top: 20%;
    right: calc(-33.72 * var(--m4r));
    width: calc(93.6 * var(--m4r));
    height: calc(39.7 * var(--m4r));
  }
}

.m4 .m4-hero__cloud img {
  width: 100%;
  height: 100%;
  object-fit: cover;
}

/* Wordmark: any alpha image (logo PNG or canvas-rendered text) drawn as a white outline */
.m4 .m4-hero__logo {
  position: absolute;
  z-index: 5;                                   /* the project name sits in front of the tower, clouds and fog */
  top: 50%;
  left: 50%;
  width: var(--mark-w);
  transform: translate(-50%, -50%);
  opacity: 0;
  will-change: opacity;
}

.m4 .m4-hero__logo img {
  width: 100%;
  height: auto;
  filter: url(#outline-m) drop-shadow(0 2px 14px rgba(26, 35, 50, 0.35));
}

@media (min-width: 768px) {
  .m4 .m4-hero__logo img {
    filter: url(#outline-d) drop-shadow(0 3px 22px rgba(26, 35, 50, 0.38));
  }
}

/* Wordmark FX (heroes with data-mark-fx): the outline lands out of a blur with a glow,
   a light sweeps across it, it blooms solid white, then the city develops inside it. */
.m4 [data-mark-fx] .m4-hero__logo {
  transform-origin: 50% 50%;
  will-change: transform, opacity, filter;
}

.m4 .m4-hero__logo--fill img,


.m4 .m4-hero__logo--shine img {
  filter: none;
}

.m4 .m4-hero__logo--fill img {
  filter: drop-shadow(0 0 calc(1.6 * var(--m4r)) rgba(248, 244, 233, 0.55));
}

.m4 .m4-hero__logo--shine {
  -webkit-mask-repeat: no-repeat;
  mask-repeat: no-repeat;
  -webkit-mask-size: 100% auto;
  mask-size: 100% auto;
  -webkit-mask-position: center;
  mask-position: center;
  background: linear-gradient(108deg, rgba(248, 244, 233, 0) 32%, rgba(248, 244, 233, 0.95) 50%, rgba(248, 244, 233, 0) 68%);
  background-size: 55% 100%;
  background-repeat: no-repeat;
  background-position: -120% 0;
}

.m4 .m4-hero__logo--shine img {
  visibility: hidden;
}

.m4 [data-mark-fx] .m4-hero__composite {
  transform-origin: 50% 50%;
  will-change: transform, opacity;
}

/* The opening skyline needs a bigger lift than a single tower so the city fills the whole mark */
.m4 .m4-hero--wide[data-mark-fx] {
  --house-scale: 2.3;
  --house-lift: 110;
}

@media (min-width: 768px) {
  .m4 .m4-hero--wide[data-mark-fx] {
    --house-scale: 1.7;
    --house-lift: 95;
  }
}

.m4 .m4-hero__smoke {
  position: absolute;
  left: 0;
  right: 0;
  bottom: 0;
  height: calc(45 * var(--m4r));
  z-index: 3;
  will-change: transform;
}

@media (min-width: 768px) {
  .m4 .m4-hero__smoke {
    height: calc(62 * var(--m4r));
  }
}

.m4 .m4-hero__top .m4-hero__smoke {
  transform: translateY(70%);
}

.m4 .m4-hero__smoke img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  object-position: center top;
}

/* Cloud bank: dense cumulus in front of the building's base, above the fog */
/* The bank runs well below the viewport so layers can sink without their bottom edge showing */
.m4 .m4-hero__bank {
  position: absolute;
  left: -14%;
  right: -14%;
  bottom: calc(-14 * var(--m4r));
  height: calc(56 * var(--m4r));
  z-index: 3;
  pointer-events: none;
}

@media (min-width: 768px) {
  .m4 .m4-hero__bank {
    bottom: calc(-20 * var(--m4r));
    height: calc(90 * var(--m4r));
  }
}

.m4 .m4-hero__bank-layer {
  position: absolute;
  left: 0;
  right: 0;
  bottom: 0;
  width: 100%;
  height: 100%;
  object-fit: cover;
  object-position: center top;
  transform: translateY(-12%);
  will-change: transform;
}

.m4 .m4-hero__bank-layer--back {
  height: 82%;
  opacity: 0.92;
  transform: translateY(-2%);
}

.m4 .m4-hero__bank-layer--floor {
  height: 70%;
  transform: translateY(15%);
  opacity: 0.98;
}

/* dense veil over the crown at rest; fades out (rather than moving) as the reveal starts */
.m4 .m4-hero__bank-layer--veil {
  transform: translateY(-12%);
  will-change: transform, opacity;
}

/* mirrored second bank between the two: fills the gaps so the base reads as solid cloud */
.m4 .m4-hero__bank-layer--mid {
  height: 92%;
  transform: translateY(-7%) scaleX(-1);
  opacity: 0.96;
}

.m4 .m4-hero__puff {
  position: absolute;
  bottom: calc(3 * var(--m4r));
  width: calc(62 * var(--m4r));
  height: calc(26 * var(--m4r));
  will-change: transform;
}

/* resting positions = the veil's first frame (see animations/heroes.js) */
.m4 .m4-hero__puff--l {
  left: calc(-10 * var(--m4r));
  transform: translate(26%, -22%);
}

.m4 .m4-hero__puff--r {
  right: calc(-10 * var(--m4r));
  bottom: calc(6 * var(--m4r));
  transform: translate(-26%, -28%);
}

.m4 .m4-hero__puff--c {
  left: 50%;
  bottom: 0;
  transform: translateY(-36%) scale(1.3);
  width: calc(70 * var(--m4r));
  height: calc(30 * var(--m4r));
  margin-left: calc(-35 * var(--m4r));
  opacity: 0.95;
}

@media (min-width: 768px) {
  .m4 .m4-hero__puff {
    width: calc(112 * var(--m4r));
    height: calc(47 * var(--m4r));
    bottom: calc(5 * var(--m4r));
  }

  .m4 .m4-hero__puff--l {
    left: calc(-18 * var(--m4r));
  }

  .m4 .m4-hero__puff--r {
    right: calc(-18 * var(--m4r));
    bottom: calc(10 * var(--m4r));
  }

  .m4 .m4-hero__puff--c {
    width: calc(130 * var(--m4r));
    height: calc(55 * var(--m4r));
    margin-left: calc(-65 * var(--m4r));
    bottom: 0;
  }
}

.m4 .m4-hero__puff img {
  width: 100%;
  height: 100%;
  object-fit: cover;
}

.m4 .m4-hero__content {
  position: relative;
  z-index: 2;
  display: grid;
  align-items: center;
  height: 100%;
  padding-bottom: calc(15 * var(--m4r));
  will-change: transform, opacity;
}

.m4 .m4-hero__content>.m4-container {
  min-width: 0;
}

@media (min-width: 768px) {
  .m4 .m4-hero__content {
    padding-bottom: calc(30 * var(--m4r));
  }
}

.m4 .m4-hero__eyebrow {
  margin: 0 0 calc(1.6 * var(--m4r));
  text-align: center;
  font-family: var(--font-ui);
  font-size: calc(1.2 * var(--m4r));
  font-weight: 600;
  letter-spacing: 0.32em;
  text-transform: uppercase;
  color: var(--bronze);
}

@media (min-width: 768px) {
  .m4 .m4-hero__eyebrow {
    font-size: calc(1.6 * var(--m4r));
    margin-bottom: calc(2.4 * var(--m4r));
  }
}

.m4 .m4-hero__title h1,
.m4 .m4-hero__title h2 {
  font-family: var(--font-display);
  font-weight: 600;
  font-size: clamp(38px, 9vw, 62px);
  line-height: 1.04;
  letter-spacing: -0.01em;
  text-align: center;
}

.m4 .m4-hero--tight .m4-hero__title h1,
.m4 .m4-hero--tight .m4-hero__title h2 {
  font-size: calc(4.4 * var(--m4r));
}

@media (min-width: 768px) {

  .m4 .m4-hero__title h1,


  .m4 .m4-hero--tight .m4-hero__title h1,
.m4 .m4-hero--tight .m4-hero__title h2 {
    font-size: clamp(56px, min(7vw, 12vh), 124px);
    letter-spacing: -0.015em;
  }
}

@keyframes word-in {
  to {
    opacity: 1;
    transform: none;
  }
}

.m4 .m4-hero__text {
  margin: calc(1.5 * var(--m4r)) 0 0;
  font-weight: 500;
  font-size: calc(1.6 * var(--m4r));
  line-height: 150%;
  text-align: center;
  text-wrap: balance;
}

@media (min-width: 768px) {
  .m4 .m4-hero__text {
    margin: calc(2 * var(--m4r)) 0 0;
    font-size: calc(3.2 * var(--m4r));
    line-height: 130%;
    letter-spacing: -0.01em;
    max-width: calc(110 * var(--m4r));
    margin-inline: auto;
  }
}

.m4 .m4-hero__text .em {
  color: var(--hero-ink-50, var(--ink-50));
}

.m4 .m4-hero__actions {
  margin: calc(3 * var(--m4r)) 0 0;
  display: flex;
  justify-content: center;
  opacity: 0;
  animation: word-in 0.9s var(--ease) 0.65s forwards;
}

.m4 [data-hero]:first-of-type .m4-hero__actions {
  animation-delay: 1.5s;                         /* first hero: after the sky, clouds and lines */
}

@media (min-width: 768px) {
  .m4 .m4-hero__actions {
    margin: calc(4 * var(--m4r)) 0 0;
  }
}

.m4 .m4-hero__overlap {
  position: absolute;
  inset: 0 0 calc(var(--vh) * 100);
  pointer-events: none;
}

.m4 .m4-hero__overlay {
  position: absolute;
  left: 0;
  right: 0;
  bottom: 0;
  height: calc(10 * var(--m4r));
  z-index: 3;
  background: linear-gradient(rgba(248, 244, 233, 0), var(--bg));
}

@media (min-width: 768px) {
  .m4 .m4-hero__overlay {
    height: calc(30.9 * var(--m4r));
  }
}

/* ============================================================
   4. "WHY" SECTION — label | statement, details, media reveal
   ============================================================ */
.m4 .m4-why {
  position: relative;
  z-index: 2;
  padding: calc(6 * var(--m4r)) 0;
  background: var(--bg);
  color: var(--ink);
}

@media (min-width: 768px) {
  .m4 .m4-why {
    padding: calc(15 * var(--m4r)) 0;
  }
}

/* Cloud bank stuck to the section's bottom edge, flipped upside-down: its dense side merges with the
   white section, its lumpy edge hangs down over the top of the next hero's sky. */
.m4 .m4-why__clouds {
  position: absolute;
  left: -12%;
  right: -12%;
  bottom: calc(-23 * var(--m4r));
  height: calc(36 * var(--m4r));
  z-index: 3;
  transform: scaleY(-1);
  pointer-events: none;
}

@media (min-width: 768px) {
  .m4 .m4-why__clouds {
    bottom: calc(-37 * var(--m4r));
    height: calc(58 * var(--m4r));
  }
}

.m4 .m4-why__clouds-layer {
  position: absolute;
  left: 0;
  right: 0;
  bottom: 0;
  width: 100%;
  max-width: none;
  height: 100%;
  object-fit: cover;
  object-position: center top;
  will-change: transform;
}

.m4 .m4-why__clouds-layer--back {
  height: 82%;
  opacity: 0.92;
}

.m4 .m4-why__clouds .m4-hero__puff {
  bottom: calc(3 * var(--m4r));
}

.m4 .m4-why__clouds .m4-hero__puff--r {
  bottom: calc(5 * var(--m4r));
}

.m4 .m4-why__grid {
  display: grid;
  margin: 0 0 calc(5 * var(--m4r));
}

@media (min-width: 768px) {
  .m4 .m4-why__grid {
    grid-template-columns: auto calc(97.6 * var(--m4r));
    margin: 0 0 calc(8 * var(--m4r));
  }
}

/* No figure below: leave just enough room that the hanging cloud bank clears the details */
.m4 .m4-why__grid:last-child {
  margin-bottom: calc(9 * var(--m4r));
}

@media (min-width: 768px) {
  .m4 .m4-why__grid:last-child {
    margin-bottom: calc(12 * var(--m4r));
  }
}

.m4 .m4-why--flat .m4-why__grid:last-child {
  margin-bottom: 0;              /* no cloud bank hanging below either */
}

.m4 .m4-why__label {
  font-family: var(--font-ui);
  font-weight: 600;
  font-size: calc(1.8 * var(--m4r));
  line-height: 140%;
  letter-spacing: 0.02em;
}

.m4 .m4-why__label h2 {
  font: inherit;
}

/* statement in the text face (a caps-only display face is too heavy for a paragraph);
   sized in the .m4 unit so it keeps its proportion on TVs */
.m4 .m4-why__text {
  font-family: var(--font);
  font-weight: 400;
  font-size: calc(2.9 * var(--m4r));
  line-height: 1.3;
  letter-spacing: -0.005em;
}

@media (min-width: 768px) {
  .m4 .m4-why__text {
    font-size: max(24px, calc(4.4 * var(--m4r)));   /* 44px at 1920, 88px on a 4K TV */
    line-height: 1.25;
    letter-spacing: -0.01em;
  }
}

.m4 .m4-why__text .em {
  color: var(--muted);
}

/* Details row: sits under the statement, aligned to the right column on desktop */
.m4 .m4-why__details {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: calc(2.4 * var(--m4r)) calc(2 * var(--m4r));
  margin: calc(3.2 * var(--m4r)) 0 0;
  padding-top: calc(3.2 * var(--m4r));
  border-top: 1px solid var(--line);
}

@media (min-width: 768px) {
  .m4 .m4-why__details {
    grid-column: 2;
    grid-template-columns: repeat(4, 1fr);
    gap: calc(3 * var(--m4r));
    margin-top: calc(4.8 * var(--m4r));
    padding-top: calc(4 * var(--m4r));
  }
}

.m4 .m4-why__details dt {
  font-family: var(--font-ui);
  font-size: calc(1.2 * var(--m4r));
  font-weight: 600;
  letter-spacing: 0.16em;
  text-transform: uppercase;
  color: var(--bronze);
  margin-bottom: calc(0.8 * var(--m4r));
}

.m4 .m4-why__details dd .m4-btn { margin-top: calc(0.4 * var(--m4r)); }

.m4 .m4-why__details dd {
  margin: 0;
  font-size: calc(1.6 * var(--m4r));
  font-weight: 500;
  line-height: 1.35;
}

@media (min-width: 768px) {
  .m4 .m4-why__details dt {
    font-size: calc(1.4 * var(--m4r));
  }

  .m4 .m4-why__details dd {
    font-size: calc(2 * var(--m4r));
  }
}

.m4 .m4-why__details>div {
  opacity: 0;
  transform: translateY(calc(1.6 * var(--m4r)));
  transition: opacity 0.8s var(--ease), transform 0.8s var(--ease);
  transition-delay: calc(0.3s + var(--i, 0) * 0.08s);
}

.m4 .m4-why__grid.is-visible .m4-why__details>div {
  opacity: 1;
  transform: none;
}

/* Media reveal: wipes up from the bottom, image settles from 1.08 -> 1 */
/* Reveal: a cover in the page colour lifts off the image from the bottom up. (A clip-path reveal
   is invisible to IntersectionObserver in Chrome, so it never fired and the figure stayed blank.) */
.m4 .m4-why__media {
  position: relative;
  margin: 0 calc(-2 * var(--m4r));
  aspect-ratio: 365 / 450;
  overflow: hidden;
  background: var(--bg-soft);
}

.m4 .m4-why__media::after {
  content: "";
  position: absolute;
  inset: 0;
  z-index: 1;
  background: var(--bg);
  transform-origin: 50% 0;
  transition: transform 1.2s var(--ease);
}

@media (min-width: 768px) {
  .m4 .m4-why__media {
    margin: 0;
    aspect-ratio: auto;
    height: calc(97.6 * var(--m4r));
  }
}

.m4 .m4-why__media.is-visible::after {
  transform: scaleY(0);
}

.m4 .m4-why__media img,


.m4 .m4-why__media video {
  width: 100%;
  height: 100%;
  object-fit: cover;
  object-position: center top;
  transform: scale(1.08);
  transition: transform 1.6s var(--ease);
}

.m4 .m4-why__media.is-visible img,


.m4 .m4-why__media.is-visible video {
  transform: none;
}

.m4 .m4-why__media--sky {
  background: linear-gradient(180deg, #a9c8ea 0%, #e6eef7 70%, var(--bg-soft) 100%);
}

.m4 .m4-why__media--sky img {
  object-fit: contain;
  object-position: center bottom;
}

.m4 .m4-why__cta {
  margin-top: calc(4 * var(--m4r));
  display: flex;
  gap: calc(1.6 * var(--m4r));
  flex-wrap: wrap;
}

@media (min-width: 768px) {
  .m4 .m4-why__cta {
    margin-top: calc(6 * var(--m4r));
  }
}

/* Shivera has five rows: Location · Configuration · Tower · Amenities · Status */
@media (min-width: 1200px) {
  .m4 .m4-why__details--5 { grid-template-columns: repeat(5, 1fr); }
}

/* ---- "Why" actions: just the two buttons under the statement ---- */
.m4 .m4-why__actions {
  display: flex;
  flex-wrap: wrap;
  gap: calc(1.2 * var(--m4r)) calc(1.6 * var(--m4r));
  margin: calc(3.2 * var(--m4r)) 0 0;
  padding-top: calc(3.2 * var(--m4r));
  border-top: 1px solid var(--line);
}
@media (min-width: 768px) {
  .m4 .m4-why__actions {
    grid-column: 2;
    margin-top: calc(4.8 * var(--m4r));
    padding-top: calc(4 * var(--m4r));
    gap: calc(2 * var(--m4r));
  }
}
.m4 .m4-why__actions > div {
  opacity: 0;
  transform: translateY(calc(1.6 * var(--m4r)));
  transition: opacity 0.8s var(--ease), transform 0.8s var(--ease);
  transition-delay: calc(0.3s + var(--i, 0) * 0.1s);
}
.m4 .m4-why__grid.is-visible .m4-why__actions > div { opacity: 1; transform: none; }

/* ============================================================
   WELCOME — full-screen greeting, the first section of the page
   ============================================================ */
.m4 .m4-welcome {
  position: relative;
  height: calc(var(--vh) * 100);
  min-height: 560px;
  z-index: 6;                      /* its cloud bank hangs over the top of the first project sky */
  color: var(--ink);
}

.m4 .m4-welcome__bg {
  position: absolute;
  inset: 0;
  z-index: 0;
  pointer-events: none;
}

/* the sky runs past the section edge under the bank, so the warm horizon fades into the first project sky */
.m4 .m4-welcome__sky {
  position: absolute;
  inset: 0 0 calc(-24 * var(--m4r));
  overflow: hidden;
  will-change: transform, opacity;
  -webkit-mask-image: linear-gradient(to bottom, #000 calc(100% - 24 * var(--m4r)), rgba(0, 0, 0, 0) 100%);
  mask-image: linear-gradient(to bottom, #000 calc(100% - 24 * var(--m4r)), rgba(0, 0, 0, 0) 100%);
}

.m4 .m4-welcome__sky img,
.m4 .m4-welcome__cloud img,
.m4 .m4-welcome__bank-layer {
  display: block;
  width: 100%;
  height: 100%;
  object-fit: cover;
}

.m4 .m4-welcome__clouds {
  position: absolute;
  inset: 0;
  overflow: hidden;
  will-change: transform, opacity;
}

.m4 .m4-welcome__cloud {
  position: absolute;
  will-change: transform;
  animation: m4-drift 16s ease-in-out infinite alternate;
}

.m4 .m4-welcome__cloud--l {
  top: 30%;
  left: calc(-36 * var(--m4r));
  width: calc(92 * var(--m4r));
  height: calc(39 * var(--m4r));
}

.m4 .m4-welcome__cloud--r {
  top: 18%;
  right: calc(-30 * var(--m4r));
  width: calc(80 * var(--m4r));
  height: calc(34 * var(--m4r));
  animation-duration: 20s;
  animation-delay: -6s;
}

.m4 .m4-welcome__cloud--t {
  top: -6%;
  left: 32%;
  width: calc(60 * var(--m4r));
  height: calc(25 * var(--m4r));
  opacity: 0.7;
  animation-duration: 24s;
  animation-delay: -11s;
}

@keyframes m4-drift {
  from { transform: translate3d(0, 0, 0); }
  to   { transform: translate3d(calc(3 * var(--m4r)), calc(-1 * var(--m4r)), 0); }
}

/* low cloud bank: hangs past the section edge over the first project sky, and scrolls away with the greeting */
.m4 .m4-welcome__bank {
  position: absolute;
  left: -10%;
  right: -10%;
  bottom: calc(-24 * var(--m4r));
  height: calc(56 * var(--m4r));
  z-index: 1;
  will-change: transform, opacity;
  -webkit-mask-image: linear-gradient(to bottom, #000 52%, rgba(0, 0, 0, 0) 100%);
  mask-image: linear-gradient(to bottom, #000 52%, rgba(0, 0, 0, 0) 100%);
}

.m4 .m4-welcome__bank-layer {
  position: absolute;
  inset: auto 0 0;
  height: 100%;
  object-position: center top;
}

.m4 .m4-welcome__bank-layer--back {
  height: 84%;
  opacity: 0.9;
  transform: translateY(-6%) scaleX(-1);
}

.m4 .m4-welcome__content {
  position: relative;
  z-index: 2;
  display: grid;
  align-items: center;
  height: 100%;
  padding-top: calc(10 * var(--m4r));
  padding-bottom: calc(14 * var(--m4r));
  text-align: center;
  will-change: transform, opacity;
}

.m4 .m4-welcome__eyebrow {
  margin: 0 0 calc(2 * var(--m4r));
  font-family: var(--font-ui);
  font-size: calc(1.6 * var(--m4r));
  font-weight: 600;
  letter-spacing: 0.36em;
  text-transform: uppercase;
  color: var(--bronze);
}

.m4 .m4-welcome__content .m4-welcome__title {
  margin: 0;
  font-family: var(--font-display) !important;
  font-weight: 400 !important;
  font-size: max(56px, min(calc(13 * var(--m4r)), 8.4vw)) !important;   /* 130px at 1920; stays on one line on tablets */
  line-height: 1.05 !important;
  letter-spacing: 0.04em !important;
  text-transform: uppercase;
  text-align: center;
  text-wrap: balance;
}

.m4 .m4-welcome__lede {
  margin: calc(3 * var(--m4r)) auto 0;
  max-width: calc(86 * var(--m4r));
  font-family: var(--font);
  font-size: calc(2.2 * var(--m4r));
  line-height: 1.5;
  color: var(--ink-70, rgba(26, 35, 50, 0.78));
  text-wrap: balance;
}

/* "scroll to see our projects" — anchored to the bottom of the screen */
.m4 .m4-welcome__scroll {
  position: absolute;
  left: 0;
  right: 0;
  bottom: calc(5 * var(--m4r));
  z-index: 3;
  margin-inline: auto;
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: calc(1.4 * var(--m4r));
  width: max-content;
  max-width: 90%;
  text-decoration: none;
  color: var(--ink);
  opacity: 0;
  animation: word-in 0.9s var(--ease) 1.9s forwards;
}

.m4 .m4-welcome__scroll.is-settled { animation: none; }

.m4 .m4-welcome__scroll-text {
  font-family: var(--font-ui);
  font-size: calc(1.4 * var(--m4r));
  font-weight: 600;
  letter-spacing: 0.3em;
  text-transform: uppercase;
  white-space: nowrap;
}

/* mouse outline with a wheel that drops (pointer devices) */
.m4 .m4-welcome__scroll-mouse {
  display: none;
  position: relative;
  width: calc(2.4 * var(--m4r));
  height: calc(3.8 * var(--m4r));
  border: 1.5px solid currentColor;
  border-radius: calc(1.4 * var(--m4r));
  opacity: 0.8;
}

.m4 .m4-welcome__scroll-mouse>span {
  position: absolute;
  left: 50%;
  top: calc(0.7 * var(--m4r));
  width: 3px;
  height: calc(0.8 * var(--m4r));
  margin-left: -1.5px;
  border-radius: 2px;
  background: currentColor;
  animation: m4-wheel 1.8s var(--ease) infinite;
}

@keyframes m4-wheel {
  0%   { transform: translateY(0);                       opacity: 1; }
  60%  { transform: translateY(calc(1.2 * var(--m4r)));  opacity: 0; }
  61%  { transform: translateY(0);                       opacity: 0; }
  100% { transform: translateY(0);                       opacity: 1; }
}

/* bouncing chevron (touch devices) */
.m4 .m4-welcome__scroll-arrow {
  width: calc(2.6 * var(--m4r));
  height: calc(2.6 * var(--m4r));
  animation: m4-bounce 1.8s ease-in-out infinite;
}

.m4 .m4-welcome__scroll-arrow svg {
  display: block;
  width: 100%;
  height: 100%;
}

@keyframes m4-bounce {
  0%, 100% { transform: translateY(0); }
  50%      { transform: translateY(calc(0.9 * var(--m4r))); }
}

@media (hover: hover) and (pointer: fine) {
  .m4 .m4-welcome__scroll-mouse { display: block; }
  .m4 .m4-welcome__scroll-arrow { display: none; }
}

@media (prefers-reduced-motion: reduce) {
  .m4 .m4-welcome__scroll { opacity: 1; animation: none; }
  .m4 .m4-welcome__cloud,
  .m4 .m4-welcome__scroll-mouse>span,
  .m4 .m4-welcome__scroll-arrow { animation: none; }
}

/* welcome slogan — a bronze line beneath the name, framed by two short rules */
.m4 .m4-welcome__slogan,
html:not(.theme-dark) .m4 .m4-welcome__slogan {
  display: flex;
  align-items: center;
  justify-content: center;
  gap: calc(1.6 * var(--m4r));
  margin: calc(2.2 * var(--m4r)) auto 0;
  width: max-content;
  max-width: 100%;
  font-family: var(--font-display);
  font-size: max(13px, calc(2 * var(--m4r)));
  letter-spacing: 0.3em;
  text-transform: uppercase;
  line-height: 1.3;
  color: var(--bronze) !important;
  white-space: nowrap;
}

.m4 .m4-welcome__slogan::before,
.m4 .m4-welcome__slogan::after {
  content: "";
  flex: 0 0 auto;
  width: calc(4 * var(--m4r));
  height: 1px;
  background: var(--bronze);
  opacity: 0.7;
}

/* the reveal splitter wraps the text in a .line; it must be allowed to shrink so it never widens the page */
.m4 .m4-welcome__slogan .line { min-width: 0; flex: 0 1 auto; }
.m4 .m4-welcome__content > .m4-container { min-width: 0; max-width: 100%; }

.m4 .m4-welcome__lede {
  margin-top: calc(2.2 * var(--m4r));
}

@media (max-width: 767px) {
  .m4 .m4-welcome__slogan {
    font-size: clamp(11px, 3.1vw, 13px);
    letter-spacing: 0.2em;
    gap: calc(1.2 * var(--m4r));
    margin-top: calc(2 * var(--m4r));
    width: auto;
    white-space: normal;
    text-align: center;
  }
  .m4 .m4-welcome__slogan::before,
  .m4 .m4-welcome__slogan::after { width: calc(3 * var(--m4r)); }
  .m4 .m4-welcome__lede { margin-top: calc(2 * var(--m4r)); }
}

/* ============================================================
   WORDMARK SIZE — one letter size for every project title
   (heroes.js derives each mark's width from this, so PAGE 22,
   EKAIVA, SHIVERA, FOREVER WORKSPACE… all share the same cap height;
   long names wrap onto two lines instead of shrinking)
   ============================================================ */
.m4 .m4-hero,
.m4 .m4-hero--narrow,
.m4 .m4-hero--wide,
.m4 .m4-hero--tight {
  --mark-fs: calc(5.2 * var(--m4r));            /* phones: ~14vw */
}

@media (min-width: 768px) {
  .m4 .m4-hero,
  .m4 .m4-hero--narrow,
  .m4 .m4-hero--wide,
  .m4 .m4-hero--tight {
    --mark-fs: calc(13 * var(--m4r));           /* tablets */
  }
}

@media (min-width: 1200px) {
  .m4 .m4-hero,
  .m4 .m4-hero--narrow,
  .m4 .m4-hero--wide,
  .m4 .m4-hero--tight {
    --mark-fs: calc(21 * var(--m4r));           /* desktop: ~157px at 1440, ~280px on a 2560 TV */
  }
}

/* ============================================================
   CLOUD-MATCHED "WHY" SECTIONS — the second section of every
   project takes the colour of the cloud bank above it, and the
   hero's fog fades into that same colour, so there is no seam.
   ============================================================ */
.m4 {
  --cloud: #F8F7F4;
}

.m4 .m4-why,
html:not(.theme-dark) .m4 .m4-why {
  background: var(--cloud);
}

.m4 .m4-hero__overlay {
  background: linear-gradient(rgba(248, 247, 244, 0), var(--cloud));
}

.m4 .m4-why__media::after { background: var(--cloud); }

/* the welcome section's own fog leads into the first project the same way */
.m4 .m4-welcome__bank { --cloud-tint: var(--cloud); }