/* ==========================================================================
   Magic — magic.company rebuild
   Shared stylesheet for Home, News and Join us.
   Breakpoints match the original: 991px (tablet), 767px (mobile landscape),
   479px (mobile portrait). Larger screens tweak decorative clouds only.
   ========================================================================== */

/* ---------- Fonts ---------- */
@font-face {
  font-family: "Sequel Sans Disp";
  src: url("../fonts/sequel-sans-medium-disp.woff2") format("woff2");
  font-weight: 500;
  font-style: normal;
  font-display: swap;
}
@font-face {
  font-family: "Sequel Sans Head";
  src: url("../fonts/sequel-sans-medium-head.woff2") format("woff2");
  font-weight: 500;
  font-style: normal;
  font-display: swap;
}
@font-face {
  font-family: "Sequel Sans Roman Disp";
  src: url("../fonts/sequel-sans-roman-disp.woff2") format("woff2");
  font-weight: 400;
  font-style: normal;
  font-display: swap;
}
@font-face {
  font-family: "Sequel Sans Roman Head";
  src: url("../fonts/sequel-sans-roman-head.woff2") format("woff2");
  font-weight: 400;
  font-style: normal;
  font-display: swap;
}

/* ---------- Design tokens ---------- */
:root {
  --font-display: "Sequel Sans Disp", Arial, sans-serif;        /* headings */
  --font-head: "Sequel Sans Head", Arial, sans-serif;           /* buttons */
  --font-body: "Sequel Sans Roman Disp", Arial, sans-serif;     /* body */
  --font-alt: "Sequel Sans Roman Head", Arial, sans-serif;      /* large text, links */

  --blue: #0b0b40;               /* primary text */
  --blue-second: #1c1a38;        /* banner, buttons */
  --blue-gradient: #121245;      /* heading + button gradient end */
  --white-gradient: #f6ebed;     /* heading gradient start */
  --light-heading-blue: #5a577a; /* subtitle text */
  --grey-line: #76748f;          /* button hover */
  --grey-footer: #817c94;        /* footer text */
  --button-text: #faf9f6;
  --footer-button-text: #f7f3f0;
  --white: #fff;

  --size-h1: 80px;
  --lh-h1: 101%;
  --size-h2: 64px;
  --lh-h2: 108%;
  --size-h3: 48px;
  --lh-h3: 108%;
  --size-large: 24px;
  --lh-large: 130%;
  --size-regular: 16px;
  --lh-regular: 120%;
  --size-small: 14px;
  --lh-small: 101%;
  --lh-medium: 120%;

  --gutter: 60px;
}

@media (max-width: 991px) {
  :root {
    --size-h1: 60px;
    --size-h2: 48px;
    --size-h3: 38px;
  }
}
@media (max-width: 767px) {
  :root {
    --size-h1: 40px;
    --size-h2: 36px;
    --lh-h2: 101%;
    --lh-h3: 101%;
    --size-large: 20px;
    --gutter: 20px;
  }
}

/* ---------- Base ---------- */
*,
*::before,
*::after {
  box-sizing: border-box;
}
html {
  height: 100%;
  -webkit-text-size-adjust: 100%;
}
body {
  min-height: 100%;
  margin: 0;
  background-color: var(--white);
  color: var(--blue);
  font-family: var(--font-body);
  font-size: var(--size-regular);
  line-height: var(--lh-regular);
  font-weight: 400;
  -webkit-font-smoothing: antialiased;
  -moz-osx-font-smoothing: grayscale;
  text-rendering: optimizeLegibility;
}
h1,
h2,
h3 {
  margin: 0;
  font-family: var(--font-display);
  font-weight: 500;
}
h1 {
  font-size: var(--size-h1);
  line-height: var(--lh-h1);
}
h2 {
  font-size: var(--size-h2);
  line-height: var(--lh-h2);
}
h3 {
  font-size: var(--size-h3);
  line-height: var(--lh-h3);
}
p {
  margin: 0;
}
a {
  color: var(--blue);
  font-family: var(--font-alt);
  font-size: var(--size-large);
  text-decoration: none;
}
img {
  max-width: 100%;
  height: auto;
  display: inline-block;
  vertical-align: middle;
  border: 0;
}
:focus-visible {
  outline: 0.125rem solid #4d65ff;
  outline-offset: 0.125rem;
}
.visually-hidden {
  position: absolute;
  width: 1px;
  height: 1px;
  overflow: hidden;
  clip: rect(0 0 0 0);
  white-space: nowrap;
}

/* ---------- Layout helpers ---------- */
.page-wrapper {
  position: relative;
  overflow-x: clip; /* stops phones zooming out while the navbar opens on load */
  background-image: url("../img/page-bg.png");
  background-position: 50% 0;
  background-repeat: no-repeat;
  background-size: 100% 100%;
}
.page-wrapper.no-bg {
  width: 100%;
  background: none;
  overflow-x: clip;
}
.page-wrapper.clip-x {
  overflow-x: clip;
}
body.magic-bg {
  background-image: url("../img/page-bg.png");
  background-position: 0 0;
  background-size: 100% 100%;
}
.gutter {
  padding-left: var(--gutter);
  padding-right: var(--gutter);
}
.container-large {
  width: 100%;
  max-width: 80rem;
  margin: 0 auto;
}
.container-medium {
  width: 100%;
  max-width: 1320px;
  margin: 0 auto;
}
.container-small {
  width: 100%;
  max-width: 720px;
  margin: 0 auto;
}
.text-center {
  text-align: center;
}
.opacity-80 {
  opacity: 0.8;
}
.opacity-60 {
  opacity: 0.6;
}

/* ---------- Type styles ---------- */
.heading-gradient {
  background-image: linear-gradient(190deg, var(--blue-gradient) 25%, var(--white-gradient));
  -webkit-background-clip: text;
  background-clip: text;
  -webkit-text-fill-color: transparent;
  text-align: center;
  text-wrap: balance;
}
.heading-h2 {
  font-size: var(--size-h2);
  line-height: var(--lh-h2);
}
.heading-h2.is-solid {
  background: none;
  -webkit-text-fill-color: inherit;
  text-align: center;
  text-wrap: balance;
}
.heading-h2.is-left {
  text-align: left;
}
.heading-h3-large {
  font-size: var(--size-h3);
  line-height: var(--lh-h3);
  text-align: center;
}
.text-large {
  font-family: var(--font-alt);
  font-size: var(--size-large);
  line-height: var(--lh-large);
}
.text-medium {
  font-size: 1.13rem;
  line-height: var(--lh-large);
}
.eyebrow {
  opacity: 0.4;
  color: #232252;
  font-family: var(--font-display);
  font-size: var(--size-small);
  font-weight: 700;
  letter-spacing: 1.12px;
  text-align: center;
  text-transform: uppercase;
}
.eyebrow.has-gap {
  margin-bottom: 0.75rem;
}

/* ---------- Buttons ---------- */
.button {
  display: inline-block;
  padding: 8px 16px;
  border-radius: 8px;
  background-color: var(--blue-second);
  background-image: linear-gradient(68deg, #f6f6f666, var(--blue-gradient));
  color: var(--button-text);
  font-family: var(--font-head);
  font-size: var(--size-small);
  line-height: var(--lh-small);
  font-weight: 500;
  text-align: center;
  transition: all 0.15s;
  cursor: pointer;
}
.button:hover {
  background-color: var(--grey-line);
  background-image: none;
  color: var(--button-text);
}
.button.is-nav {
  line-height: var(--lh-large);
  white-space: nowrap;
}
.button.is-nav:active {
  transform: scale(0.98);
}
.button.is-large {
  padding: 0.75rem 2rem;
  font-size: var(--size-regular);
  line-height: var(--lh-regular);
}
.button.is-deep {
  background-color: #312d5f;
  background-image: linear-gradient(76deg, transparent, var(--blue-gradient));
}
.button.is-deep:hover {
  background-color: #66638f;
}
.button.is-footer {
  color: var(--button-text);
}
.button.is-footer span {
  color: var(--footer-button-text);
  font-family: var(--font-body);
  font-size: 14px;
  font-weight: 400;
  line-height: 101%;
}
@media (max-width: 991px) {
  .button:hover {
    background-color: var(--blue-second);
    background-image: linear-gradient(68deg, #f6f6f666, var(--blue-gradient));
  }
  .button.is-deep:hover {
    background-color: #312d5f;
    background-image: linear-gradient(76deg, transparent, var(--blue-gradient));
  }
}

/* ---------- Announcement banner ---------- */
.banner {
  position: relative;
  background-color: var(--blue-second);
  color: #ded2ff;
  font-size: 16px;
}
.banner[hidden] {
  display: none;
}
.banner__inner {
  display: flex;
  align-items: center;
  justify-content: flex-start;
  padding: 0.5rem 2.5rem;
}
.banner__content {
  display: flex;
  flex: 1;
  align-items: center;
  justify-content: center;
  margin-left: 3rem;
}
.banner__link {
  display: flex;
  flex-flow: wrap;
  align-items: center;
  gap: 0.25rem;
  color: inherit;
  font-family: inherit;
  font-size: inherit;
  text-align: center;
}
.banner__link:hover {
  opacity: 0.9;
}
.banner__text {
  margin-right: 0.375rem;
  font-size: 16px;
  line-height: 1.5;
}
.banner__more {
  font-size: 16px;
  line-height: 1.5;
  text-decoration: underline;
}
.banner__arrow {
  display: flex;
  width: 1rem;
  height: 1rem;
}
.banner__close {
  display: flex;
  align-items: center;
  justify-content: center;
  width: 2.5rem;
  height: 2.5rem;
  margin-left: 0.5rem;
  padding: 0;
  border: 0;
  border-radius: 0.5rem;
  background: none;
  color: #e9deff;
  cursor: pointer;
  transition: all 0.3s;
}
.banner__close:hover {
  background-color: #f9f5ff;
  color: #7f56d9;
}
@media (max-width: 767px) {
  .banner__inner {
    align-items: flex-start;
    padding-left: 1.25rem;
    padding-right: 1.25rem;
  }
  .banner__content {
    margin-left: 0;
  }
  .banner__link {
    text-align: left;
  }
  .banner__close:hover {
    background-color: transparent;
    color: #9e77ed;
  }
}
@media (max-width: 479px) {
  .banner {
    font-size: 0.75rem;
  }
  .banner__text,
  .banner__more {
    font-size: 0.88rem;
  }
}

/* ---------- Navbar ---------- */
.navbar {
  position: absolute;
  inset: 0 0 auto;
  z-index: 20;
  margin-top: 40px;
}
.navbar__bar {
  display: flex;
  align-items: center;
  justify-content: space-between;
  margin: 0 auto;
  padding: 12px 16px;
  border: 1px solid transparent;
  border-radius: 16px;
  background-color: transparent;
}
.brand {
  display: flex;
  align-items: center;
  gap: 7px;
  color: #a6a4b4;
  font-size: var(--size-large);
}
.brand__mark {
  display: block;
  width: 28px;
}
.brand__word {
  display: block;
  margin-bottom: -2px;
}
.brand__word svg {
  display: block;
}
.brand__word.is-dark {
  color: var(--blue-second);
}
/* Logo hover: the mark tilts up a touch and the wordmark eases lighter */
.brand__mark {
  transition: transform 0.4s cubic-bezier(0.16, 1, 0.3, 1);
}
.brand__word svg {
  transition: opacity 0.3s ease;
}
@media (hover: hover) {
  .brand:hover .brand__mark {
    transform: rotate(-8deg) scale(1.08);
  }
  .brand:hover .brand__word svg {
    opacity: 0.7;
  }
}
.brand:focus-visible .brand__mark {
  transform: rotate(-8deg) scale(1.08);
}
.brand:active .brand__mark {
  transform: rotate(-8deg) scale(0.98);
}
.navbar__actions {
  display: flex;
  align-items: center;
  gap: 16px;
}
@media (max-width: 991px) {
  .navbar {
    top: 40px;
  }
}
@media (max-width: 767px) {
  .navbar {
    top: 20px;
  }
}
@media (max-width: 479px) {
  .navbar {
    margin-top: 0;
  }
  .navbar__bar {
    padding: 12px;
  }
  .brand__mark {
    width: 24px;
  }
  .button.is-nav {
    padding-left: 12px;
    padding-right: 12px;
    font-size: 13px;
  }
  .navbar__actions {
    flex-shrink: 0;
    gap: 8px;
  }
}

/* ---------- Footer ---------- */
.footer {
  padding-bottom: 60px;
}
.footer__content {
  display: flex;
  align-items: center;
  justify-content: space-between;
}
.footer__left {
  display: flex;
  align-items: center;
  gap: 12px;
}
.footer__logo {
  display: flex;
  align-items: center;
}
.footer__copy {
  color: var(--grey-footer);
  font-family: var(--font-display);
  font-size: var(--size-small);
  line-height: var(--lh-small);
  font-weight: 400;
}
@media (max-width: 767px) {
  .footer__content {
    flex-direction: column;
    gap: 24px;
  }
}
@media (max-width: 479px) {
  .footer {
    position: relative;
    z-index: 5;
  }
}

/* ==========================================================================
   HOME
   ========================================================================== */
.hero {
  position: relative;
  z-index: 10;
  display: flex;
  flex-flow: column;
  align-items: center;
  gap: 60px;
  padding-top: 148px;
}
.hero__sticky {
  position: relative;
  display: flex;
  flex-flow: column;
  gap: 60px;
  margin-bottom: 140px;
}
.hero__heading {
  position: relative;
  z-index: 10;
  display: flex;
  flex-flow: column;
  align-items: center;
  gap: 24px;
}
.hero__title {
  font-size: var(--size-h1);
  line-height: var(--lh-h1);
}

/* Rotating "in restaurants / hotels / retail" subtitle */
.hero__subs {
  position: relative;
  width: 200px;
  height: 40px;
  overflow: hidden;
}
.hero__sub {
  display: flex;
  align-items: center;
  justify-content: center;
  color: var(--light-heading-blue);
  font-family: var(--font-body);
  font-size: var(--size-large);
  line-height: var(--lh-large);
}
.hero__sub.is-second,
.hero__sub.is-third {
  position: absolute;
  inset: 0;
  transform: translateY(100%);
}
.hero__sub-btn {
  padding: 0.5rem 0.75rem;
  border-radius: 8px;
  background-color: var(--blue-second);
  background-image: linear-gradient(68deg, #f6f6f666, var(--blue-gradient));
  color: var(--white);
  font-family: var(--font-body);
  font-size: var(--size-regular);
  line-height: var(--lh-large);
  transition: all 0.2s;
}
.hero__sub-btn:hover {
  background-image: linear-gradient(68deg, #f6f6f666 25%, var(--blue-gradient));
}
.hero__sub-btn:active {
  transform: scale(0.98);
}

/* Timed cycle (JS adds .is-active / .is-prev). Each line slides up
   through the box: below → centre → above, eased in and out. */
.js .hero__sub {
  position: absolute;
  inset: 0;
  opacity: 0;
  transform: translateY(100%);
  transition: transform 0.9s cubic-bezier(0.65, 0, 0.35, 1), opacity 0.9s cubic-bezier(0.65, 0, 0.35, 1);
}
.js .hero__sub.is-active {
  opacity: 1;
  transform: translateY(0);
}
.js .hero__sub.is-prev {
  opacity: 0;
  transform: translateY(-100%);
}

/* Timed earth cycle: crossfade with a slight scale, eased in and out.
   The tag layers share their image's box, so they scale with it. */
.js .hero__earth .earth,
.js .hero__earth .earth-tags {
  opacity: 0;
  transform: scale(0.97);
  transition: opacity 1.2s cubic-bezier(0.65, 0, 0.35, 1), transform 1.2s cubic-bezier(0.65, 0, 0.35, 1);
}
.js .hero__earth .tags {
  opacity: 0;
  transition: opacity 1.2s cubic-bezier(0.65, 0, 0.35, 1);
}
.js .hero__earth[data-scene="1"] .earth.is-first,
.js .hero__earth[data-scene="1"] .tags,
.js .hero__earth[data-scene="2"] .earth.is-second,
.js .hero__earth[data-scene="2"] .earth-tags.is-hotels,
.js .hero__earth[data-scene="3"] .earth.is-third,
.js .hero__earth[data-scene="3"] .earth-tags.is-retail {
  opacity: 1;
  transform: none;
}

/* Earth images */
.hero__earth {
  position: relative;
  z-index: 10;
  display: flex;
  flex-flow: column;
  align-items: center;
  justify-content: flex-start;
}
.earth {
  display: block;
  max-width: 750px;
  object-fit: cover;
}
.earth.is-second {
  position: absolute;
  inset: 0;
  margin: 0 auto;
  opacity: 0;
}
.earth.is-third {
  position: absolute;
  width: 100%;
  margin: 0 auto;
  opacity: 0;
}

/* Guest tags floating over the restaurant */
.tags {
  position: absolute;
  top: -145px;
  width: 500px;
  height: 150px;
  margin-top: 323px;
}
.tag {
  position: absolute;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  padding: 2px 16px;
  border: 1px solid #7fb3f7;
  border-radius: 20px;
  background-color: #09101266;
  -webkit-backdrop-filter: blur(2px);
  backdrop-filter: blur(2px);
  color: #7fb3f7;
}
.tag.is-blue {
  top: -63px;
  right: 286.633px;
}
.tag.is-green {
  right: 286.773px;
  border-color: #7fe3b4;
  color: #7fe3b4;
}
.tag.is-gold {
  top: -53px;
  left: 255px;
  border-color: #cf994d;
  color: #cf994d;
}
.tag.is-pink {
  top: 16px;
  right: 177.438px;
  border-color: #f1b8b8;
  color: #f1b8b8;
}

/* Tag layers for the hotel and retail earths. Each layer covers its image
   exactly, so tags are placed in % of the image and stay on their spot. */
.earth-tags {
  position: absolute;
  top: 0;
  left: 0;
  right: 0;
  width: 100%;
  max-width: 750px;
  margin: 0 auto;
  opacity: 0;
  pointer-events: none;
}
.earth-tags.is-hotels { aspect-ratio: 1005 / 1046; }
.earth-tags.is-retail { aspect-ratio: 698 / 641; }
.earth-tags .tag {
  transform: translate(-50%, -50%);
  white-space: nowrap;
}
.tag--blue { border-color: #7fb3f7; color: #7fb3f7; }
.tag--green { border-color: #7fe3b4; color: #7fe3b4; }
.tag--gold { border-color: #cf994d; color: #cf994d; }

/* Closing statement + CTA */
.hero__cta {
  position: relative;
  z-index: 10;
  display: flex;
  flex-flow: column;
  align-items: center;
  gap: 24px;
  max-width: 720px;
  margin-top: auto;
}
.reveal {
  --reveal-base: grey;
  --reveal-fill: #1c1a38;
  color: var(--reveal-base);
  text-align: center;
  text-wrap: balance;
}
.reveal .word {
  --line: 100%;
  display: inline-block;
  position: relative;
  padding: 0.6em 0;
  margin: -0.6em 0;
  color: transparent;
  background-color: var(--reveal-base);
  background-image: linear-gradient(90deg, var(--reveal-fill), var(--reveal-fill) var(--line), transparent var(--line));
  -webkit-background-clip: text;
  background-clip: text;
}

/* Drifting clouds behind the hero */
.clouds {
  position: absolute;
  inset: 0 0 auto;
  width: 100%;
  height: 1600px; /* main.js sets this to the hero's bottom edge */
  margin: 0 auto;
  overflow: hidden;
  pointer-events: none;
}
.clouds__row {
  position: absolute;
  inset: 0;
}
.clouds__row.is-1 { margin-top: 275px; }
.clouds__row.is-2 { margin-top: 433px; }
.clouds__row.is-3 { top: 50%; }
.clouds__row.is-4 { top: 64%; }
.clouds__row.is-5 { top: 80%; }
.clouds__track {
  display: flex;
  align-items: center;
  justify-content: space-between;
}
.cloud {
  max-width: 265px;
}
.cloud.is-1.is-dup { transform: translate(-100%); }
.cloud.is-2 { max-width: 230px; }
.cloud.is-2.is-dup { transform: translate(100%); }
.cloud.is-3 {
  max-width: 230px;
  transform: rotateX(-15deg) rotateY(20deg);
}
.cloud.is-3.is-dup { transform: translate(-100%) rotateX(-15deg) rotateY(20deg); }
.cloud.is-4 {
  max-width: 140px;
  transform: rotateX(-20deg) rotateY(-20deg);
}
.cloud.is-4.is-dup { transform: translate(100%) rotateX(-20deg) rotateY(-20deg); }
.cloud.is-5 {
  min-width: 520px;
  max-width: 520px;
}
.cloud.is-5.is-dup { transform: translate(-100%); }
.cloud.is-6 {
  position: absolute;
  top: 0;
  right: -14%;
  min-width: 520px;
  max-width: 520px;
}
@media (min-width: 1440px) {
  .cloud.is-6 {
    top: 5%;
    right: -19%;
  }
}
@media (min-width: 1920px) {
  .cloud.is-6 {
    right: -5%;
  }
}

/* Endless cloud loops (timings from the original interactions) */
@keyframes drift-right { from { transform: translateX(0); } to { transform: translateX(100%); } }
@keyframes drift-left { from { transform: translateX(0); } to { transform: translateX(-100%); } }
@keyframes drift-right-hold3 { 0%, 13.043% { transform: translateX(0); } 100% { transform: translateX(100%); } }
@keyframes drift-left-hold2 { 0%, 7.407% { transform: translateX(0); } 100% { transform: translateX(-100%); } }
@keyframes drift-across { from { transform: translateX(0); } to { transform: translateX(-95vw); } }
.clouds__row.is-1 { animation: drift-right 30s linear infinite; }
.clouds__row.is-2 .clouds__track { animation: drift-left 30s linear infinite; }
.clouds__row.is-3 .clouds__track { animation: drift-right-hold3 23s linear infinite; }
.clouds__row.is-4 .clouds__track { animation: drift-left-hold2 27s linear infinite; }
.clouds__row.is-5 .clouds__track { animation: drift-right 15s linear infinite; }
.cloud.is-6 { animation: drift-across 24s linear infinite alternate; }

/* Video section */
.video-section {
  position: relative;
  z-index: 2;
  overflow: hidden;
}
.video-section__wrap {
  position: relative;
}
.video-section__inner {
  position: relative;
  padding-top: 100px;
  padding-bottom: 60px;
}
.video {
  position: relative;
  z-index: 5;
}
.video__link {
  position: relative;
  display: inline-block; /* inline-block like the original: keeps its small baseline gap */
  width: 100%;
  max-height: 745px;
  overflow: hidden;
  border-radius: 32px;
  cursor: pointer;
}
.video__media {
  position: relative;
  display: block;
  width: 100%;
  height: 745px;
  overflow: hidden;
}
.video__media video {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  object-fit: cover;
  object-position: 50% 100%;
  background-position: 50%;
  background-size: cover;
}
.video__play {
  position: absolute;
  inset: 0;
  z-index: 5;
  display: flex;
  flex-flow: column;
  align-items: center;
  justify-content: center;
  gap: 8px;
  width: 110px;
  height: 100px;
  margin: auto;
  color: var(--white);
  font-family: var(--font-body);
  font-size: 16px;
  line-height: 120%;
  pointer-events: none;
}
.video__play svg {
  display: block;
}

/* Home load animation: hidden start states (only when JS runs) */
.js .page-home [data-load] {
  opacity: 0;
}
.js .page-home .navbar__bar {
  width: 11.7%;
}
.js .page-home [data-load="heading"] {
  transform: translateY(60px);
}
.js .page-home [data-load="earth"] {
  transform: translateY(-220px) scale(0.96);
  will-change: transform, opacity;
}
.page-home .brand {
  color: #a6a4b4;
}

@media (min-width: 992px) {
  /* The play button follows the cursor and only shows on hover */
  .js .video__play {
    opacity: 0;
    transform: scale(0.6);
  }
}

@media (max-width: 991px) {
  .page-wrapper {
    background-size: cover;
  }
  .hero__cta .reveal,
  .heading-h2.heading-gradient {
    padding-bottom: 0.63rem;
  }
  .video-section__inner {
    padding-top: 4rem;
  }
  .earth, .earth-tags {
    max-width: 550px;
  }
  .video__media {
    height: 500px;
  }
  .cloud { max-width: 160px; }
  .cloud.is-2 { max-width: 160px; }
  .cloud.is-3 { max-width: 150px; }
  .cloud.is-4 { max-width: 140px; }
  .cloud.is-5 {
    min-width: 250px;
    max-width: 250px;
    filter: blur(5px);
  }
  .cloud.is-6 {
    display: none;
  }
  .tag.is-pink { top: -69px; right: 109.438px; }
  .tag.is-blue { top: -35px; right: 200.633px; }
  .tag.is-green { top: -98px; left: 135px; right: 250.773px; }
  .tag.is-gold { top: -89px; left: 235px; }
}
@media (max-width: 767px) {
  .video-section__inner {
    padding-top: 3rem;
  }
  .hero {
    gap: 80px;
    padding-top: 60px;
  }
  .hero__heading {
    gap: 16px;
  }
  .earth, .earth-tags {
    max-width: 100%;
  }
  .cloud { max-width: 100px; }
  .cloud.is-2 { max-width: 110px; }
  .cloud.is-3 { max-width: 130px; }
  .cloud.is-4 { max-width: 100px; }
  .cloud.is-5 { min-width: 170px; max-width: 170px; }
  .tag.is-pink { top: -127px; }
  .tag.is-blue { top: -68px; }
  .tag.is-green { top: -121px; }
  .tag.is-gold { top: -183px; }
  .tags {
    margin-top: 392px;
  }
}
@media (max-width: 479px) {
  .hero {
    gap: 0;
    padding-top: 136px;
  }
  .hero__sticky {
    margin-bottom: 100px;
  }
  .clouds__row.is-5 {
    z-index: 2;
  }
  .cloud {
    filter: blur(1px);
  }
  .cloud.is-3 {
    max-width: 101px;
    filter: blur(2px);
  }
  .cloud.is-4 { max-width: 80px; }
  .cloud.is-5 { min-width: 150px; max-width: 150px; }
  .video__media {
    height: auto;
    min-height: 500px;
  }
  .video__media video {
    object-position: 50% 50%;
  }
  .video__link {
    min-height: 500px;
  }
  .tags {
    width: 200px;
    margin-top: 93px;
  }
  .tag {
    font-size: 12px;
  }
  .tag.is-pink { top: 109px; right: -1.562px; padding: 1px 10px; }
  .tag.is-blue { top: 81px; left: 51px; right: 191.633px; padding: 1px 32px; }
  .tag.is-green { top: 130px; left: 41px; right: 77.773px; padding: 1px 10px; }
  .tag.is-gold { display: none; }
  .earth-tags .tag { padding: 1px 10px; }
  .earth-tags .is-nudge-left { margin-left: -5px; }
  .earth-tags .is-nudge-right { margin-left: 5px; }
}

/* ---------- Video lightbox ---------- */
.lightbox {
  position: fixed;
  inset: 0;
  z-index: 2000;
  display: flex;
  align-items: center;
  justify-content: center;
  background: #000000e6;
  opacity: 0;
  transition: opacity 0.3s;
}
.lightbox[hidden] {
  display: none;
}
.lightbox.is-open {
  opacity: 1;
}
.lightbox__frame {
  position: relative;
  width: min(100vw, calc(96vh * 940 / 705));
  aspect-ratio: 940 / 705;
}
.lightbox__frame iframe {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  border: 0;
}
.lightbox__close {
  position: absolute;
  top: 0;
  right: 0;
  width: 4em;
  height: 2.6em;
  border: 0;
  background: transparent url("data:image/svg+xml;base64,PHN2ZyB4bWxucz0iaHR0cDovL3d3dy53My5vcmcvMjAwMC9zdmciIHZpZXdCb3g9Ii00IDAgMTggMTciIHdpZHRoPSIxOCIgaGVpZ2h0PSIxNyI+PGcgdHJhbnNmb3JtPSJyb3RhdGUoNDUpIj48cGF0aCBkPSJtMCAwaDd2LTdoNXY3aDd2NWgtN3Y3aC01di03aC03eiIgb3BhY2l0eT0iLjQiLz48cGF0aCBkPSJtMSAxaDd2LTdoM3Y3aDd2M2gtN3Y3aC0zdi03aC03eiIgZmlsbD0iI2ZmZiIvPjwvZz48L3N2Zz4=") 50% / 18px no-repeat;
  font-size: 17px;
  opacity: 0.8;
  cursor: pointer;
  transition: opacity 0.3s;
}
.lightbox__close:hover {
  opacity: 1;
}
body.no-scroll {
  overflow: hidden;
}

/* ==========================================================================
   NEWS + JOIN US (shared page shell)
   ========================================================================== */
.page-top {
  padding-top: 148px;
  padding-bottom: 100px;
}
.page-top.is-careers {
  padding-bottom: 5rem;
}
.stack {
  position: relative;
  z-index: 10;
  display: flex;
  flex-flow: column;
  gap: 94px;
}
.stack.is-tight {
  gap: 4rem;
}
.heading-group {
  display: flex;
  flex-flow: column;
  gap: 1rem;
}
.narrow {
  display: flex;
  flex-flow: column;
  align-items: center;
  justify-content: flex-start;
  gap: 32px;
  max-width: 34.38rem;
  margin: 0 auto;
  text-wrap: balance;
}

/* Floating clouds on News and Join us */
.float-cloud {
  position: absolute;
  inset: 7% -6% auto auto;
  max-width: 265px;
  filter: blur(2px);
  pointer-events: none;
}
.float-cloud.is-first { inset: 25% auto auto 0; max-width: 227px; }
.float-cloud.is-second { inset: 44% -5% auto auto; max-width: 350px; }
.float-cloud.is-third { inset: auto auto 35% 0; max-width: 140px; }
.float-cloud.is-fourth {
  inset: auto -4% 18% auto;
  max-width: 228px;
  filter: blur(4px);
}
.float-cloud.is-fifth { inset: auto auto 3% -20%; max-width: 512px; }
.float-cloud.is-behind { z-index: -1; top: 24%; }
.float-cloud.is-faded { opacity: 0.8; }
.float-cloud.is-faded-more { opacity: 0.6; }

@keyframes sway-left { from { transform: translateX(0); } to { transform: translateX(-90vw); } }
@keyframes sway-right { from { transform: translateX(0); } to { transform: translateX(90vw); } }
.float-cloud.sway-left { animation: sway-left 24s linear infinite alternate; }
.float-cloud.sway-right { animation: sway-right 24s linear infinite alternate; }

/* News uses uneven return legs: out in 24s, back in 24–30s */
@keyframes sway-left-30 { 0% { transform: translateX(0); } 44.444% { transform: translateX(-90vw); } 100% { transform: translateX(0); } }
@keyframes sway-right-30 { 0% { transform: translateX(0); } 44.444% { transform: translateX(90vw); } 100% { transform: translateX(0); } }
@keyframes sway-left-28 { 0% { transform: translateX(0); } 46.154% { transform: translateX(-90vw); } 100% { transform: translateX(0); } }
@keyframes sway-left-29 { 0% { transform: translateX(0); } 45.283% { transform: translateX(-90vw); } 100% { transform: translateX(0); } }
.news .float-cloud.n1 { animation: sway-left-30 54s linear infinite; }
.news .float-cloud.n2 { animation: sway-right 24s linear infinite alternate; }
.news .float-cloud.n3 { animation: sway-left-28 52s linear infinite; }
.news .float-cloud.n4 { animation: sway-right 24s linear infinite alternate; }
.news .float-cloud.n5 { animation: sway-left-29 53s linear infinite; }
.news .float-cloud.n6 { animation: sway-right-30 54s linear infinite; }

@media (min-width: 1280px) {
  .float-cloud.is-fifth { right: -24%; }
}
@media (min-width: 1440px) {
  .float-cloud.is-fifth { bottom: 5%; left: -13%; right: -20%; }
}
@media (min-width: 1920px) {
  .float-cloud { right: -4%; }
  .float-cloud.is-first { left: -4%; }
  .float-cloud.is-second { right: 0; }
  .float-cloud.is-third { right: 25%; }
  .float-cloud.is-fourth { inset: auto 0 18% auto; }
  .float-cloud.is-fifth { bottom: 2%; left: -8%; right: -13%; }
}
@media (max-width: 991px) {
  .float-cloud { max-width: 220px; }
  .float-cloud.is-first { max-width: 200px; top: 22%; }
  .float-cloud.is-second { max-width: 250px; right: -16%; }
  .float-cloud.is-third { max-width: 120px; }
  .float-cloud.is-fourth { max-width: 200px; }
  .float-cloud.is-fifth { max-width: 450px; }
  .page-top.is-careers { padding-bottom: 4rem; }
}
@media (max-width: 767px) {
  .page-top { padding-top: 120px; }
  .page-top.is-careers { padding-bottom: 3rem; }
  .stack { gap: 64px; }
  .float-cloud { max-width: 160px; top: 5%; }
  .float-cloud.is-first { max-width: 140px; top: 18%; left: -10%; }
  .float-cloud.is-second { max-width: 80px; top: 35%; right: 0; filter: blur(2px); }
  .float-cloud.is-third { max-width: 100px; bottom: 56%; right: 80%; }
  .float-cloud.is-fourth { max-width: 120px; inset: auto 0 44% auto; }
  .float-cloud.is-fifth { display: none; }
}
@media (max-width: 479px) {
  .page-top { padding-top: 100px; padding-bottom: 70px; }
  .page-top.is-careers { padding-bottom: 2.63rem; }
  .stack { gap: 48px; }
  .float-cloud { max-width: 110px; }
  .float-cloud.is-first { max-width: 100px; top: 20%; }
  .float-cloud.is-second { top: 35%; }
  .float-cloud.is-third { inset: auto auto 58% 0; }
  .eyebrow { font-size: 0.75rem; }
}

/* ---------- News article ---------- */
.news-section {
  position: relative;
  overflow: hidden;
}
/* News: body text starts on the same left edge as the title */
.news .narrow {
  align-items: flex-start;
  margin-left: 0;
}
.article {
  overflow: hidden;
  line-height: 142%;
}
.article p {
  font-size: 1.13rem;
  line-height: 142%;
}
.article p.spacer {
  min-height: 1lh;
}
.article a {
  color: var(--grey-line);
  font-size: 101%;
}

/* ---------- Join us ---------- */
.marquee {
  width: 100%;
  margin-bottom: 5rem;
  overflow: hidden;
}
.marquee__track {
  display: flex;
  gap: 24px;
  width: max-content;
  animation: marquee 45s linear infinite;
}
.marquee__track:hover {
  animation-play-state: paused;
}
.marquee__item {
  flex-shrink: 0;
  width: 330px;
  height: 330px;
  overflow: hidden;
  border-radius: 24px;
}
.marquee__item img {
  display: block;
  width: 100%;
  height: 100%;
  object-fit: cover;
  transition: opacity 0.6s cubic-bezier(0.65, 0, 0.35, 1);
}

/* Photo placeholder: a grey box with a soft shimmer, shown only when a
   photo is still loading after a moment (JS adds .is-shimmer). On a
   wrapper the photo fades in on top; on a bare <img> the shimmer is its
   own background until the photo paints. */
@keyframes shimmer {
  from { background-position: 150% 0; }
  to { background-position: -50% 0; }
}
.is-shimmer {
  background-color: #e4e1e6;
  background-image: linear-gradient(100deg, rgba(255, 255, 255, 0) 30%, rgba(255, 255, 255, 0.6) 50%, rgba(255, 255, 255, 0) 70%);
  background-size: 200% 100%;
  animation: shimmer 1.5s ease-in-out infinite;
}
.marquee__item.is-shimmer img {
  opacity: 0;
}
@keyframes marquee {
  from { transform: translateX(calc(-50% - 12px)); }
  to { transform: translateX(0); }
}
@keyframes marquee-sm {
  from { transform: translateX(calc(-50% - 8px)); }
  to { transform: translateX(0); }
}

.join-intro {
  margin-bottom: 5rem;
}
.join-block {
  margin-bottom: 8rem;
}
.join-block__head {
  margin-bottom: 3rem;
}
.join-block__head.is-medium {
  margin-bottom: 2rem;
}

.testimonial {
  display: grid;
  grid-template-columns: 1.25fr 1fr;
  align-items: stretch;
  overflow: hidden;
  border-radius: 1.5rem;
  background-color: #f9fafb;
}
.testimonial__image {
  width: 100%;
  height: 32.5rem;
  object-fit: cover;
}
.testimonial__content {
  position: relative;
  z-index: 1;
  display: flex;
  flex-direction: column;
  align-items: flex-start;
  justify-content: space-between;
  gap: 2rem;
  padding: 3rem;
  background-color: #39395f;
  color: var(--white);
}
.testimonial__quote-icon {
  display: flex;
  width: 2.5rem;
  height: 2.5rem;
  margin-bottom: 0.5rem;
  color: #787eff;
}
.testimonial__text {
  margin: 0;
  font-family: var(--font-body);
  font-size: 2rem;
  line-height: var(--lh-regular);
  font-weight: 400;
}
.testimonial__person {
  display: flex;
  flex-flow: column;
  gap: 0.25rem;
  text-align: left;
}

.logo-grid {
  display: flex;
  flex-flow: wrap;
  align-items: center;
  justify-content: space-around;
  gap: 2rem;
}
.logo-grid img {
  width: auto;
  max-height: 3rem;
}
.logo-grid img.is-inverted {
  filter: invert();
}

.perks .perk {
  display: grid;
  grid-template-columns: 0.5fr 1fr;
  justify-content: space-between;
  gap: 1.5rem;
  padding: 2rem 0;
  border-bottom: 1px solid #0b0b401a;
  font-size: 1.13rem;
}
.perks .perk:first-child {
  padding-top: 0;
}
.perks .perk:last-child {
  padding-bottom: 0;
  border-bottom: 0;
}
.perk__title {
  display: flex;
  gap: 0.75rem;
}
.perk__icon {
  width: 1.5rem;
  height: 1.5rem;
}

.made-with-love-section {
  margin-bottom: 8rem;
}
.made-with-love__badge {
  display: flex;
  align-items: center;
  justify-content: center;
}
.made-with-love {
  margin-bottom: 3rem;
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 0.5rem;
  padding: 0.75rem 1.5rem;
  border-radius: 999px;
  background-color: var(--white);
}
.made-with-love__heart {
  display: flex;
  width: 1.25rem;
  height: 1.25rem;
  color: #f8343c;
}
.made-with-love__text {
  display: block;
  width: 12.375rem;
  height: 0.6875rem;
}
.made-with-love__image {
  display: block;
  width: 100%;
}
.made-with-love__image.is-mobile {
  display: none;
}

.roles {
  padding-bottom: 3rem;
}
.roles__inner {
  margin-bottom: 8rem;
}
.roles__embed {
  margin-bottom: 3rem;
}
.apply {
  display: flex;
  flex-flow: column;
  align-items: stretch;
  gap: 1rem;
  margin-bottom: 3rem;
}
.apply__mail {
  display: flex;
  flex-flow: column;
  align-items: center;
  justify-content: center;
}
.email {
  display: flex;
  flex-flow: column;
  gap: 8px;
}
.email__link {
  font-size: 1.13rem;
  line-height: var(--lh-large);
}
.email__link:hover {
  color: var(--light-heading-blue);
}
.email__underline {
  width: 100%;
  height: 1px;
  margin: 0 auto;
  background-color: var(--blue);
}
@media (min-width: 992px) {
  /* Desktop: hidden until the link is hovered, as on the original */
  .js .email__underline {
    width: 0;
  }
}

@media (max-width: 991px) {
  .marquee, .join-intro { margin-bottom: 4rem; }
  .made-with-love { margin-bottom: 2.5rem; }
  .join-block, .made-with-love-section, .roles__inner { margin-bottom: 6rem; }
  .join-block__head { margin-bottom: 2.5rem; }
  .join-block__head.is-medium { margin-bottom: 1.5rem; }
  .roles__embed, .apply { margin-bottom: 2.5rem; }
  .roles { padding-bottom: 2.5rem; }
  .testimonial {
    grid-template-columns: 1fr;
  }
  .testimonial__image {
    height: 15.63rem;
  }
  .testimonial__text {
    font-size: 1.5rem;
  }
}
@media (max-width: 767px) {
  .marquee { margin-bottom: 3rem; }
  .marquee__track {
    gap: 16px;
    animation-name: marquee-sm;
  }
  .marquee__item {
    width: 200px;
    height: 200px;
  }
  .join-intro { margin-bottom: 3rem; }
  .join-block, .made-with-love-section, .roles__inner { margin-bottom: 4rem; }
  .join-block__head { margin-bottom: 2rem; }
  .join-block__head.is-medium { margin-bottom: 1.25rem; }
  .roles__embed, .apply { margin-bottom: 2rem; }
  .roles { padding-bottom: 1.5rem; }
  .made-with-love { margin-bottom: 2rem; }
  .heading-h3-large { font-size: 2.25rem; }
  .testimonial {
    border-radius: 1rem;
  }
  .testimonial__content {
    gap: 1.5rem;
    padding: 2.5rem 1.5rem;
  }
  .testimonial__image {
    height: 22rem;
  }
  .perks .perk {
    grid-template-columns: auto;
    gap: 0.5rem;
    padding: 1.5rem 0;
    font-size: 1rem;
  }
  .perk__icon {
    width: 1.25rem;
    height: 1.25rem;
  }
  .made-with-love-section {
    position: relative;
  }
  .made-with-love__badge {
    position: absolute;
    inset: 0;
    z-index: 2;
  }
  .made-with-love {
    background-color: #fff9;
    -webkit-backdrop-filter: blur(6px);
    backdrop-filter: blur(6px);
  }
  .made-with-love__image {
    display: none;
  }
  .made-with-love__image.is-mobile {
    display: block;
  }
  .email__link,
  .text-medium {
    font-size: 1rem;
  }
}
@media (max-width: 479px) {
  .heading-h3-large { line-height: var(--lh-medium); }
  .testimonial__image { height: 15rem; }
  .testimonial__quote-icon { margin-top: -3.63rem; }
  .logo-grid {
    display: grid;
    grid-template-columns: 1fr 1fr;
    justify-items: center;
    gap: 1rem;
  }
  .logo-grid img {
    max-height: 2rem;
  }
  .logo-grid img:last-child {
    grid-column: span 2;
  }
}

/* ---------- Reduced motion ---------- */
@media (prefers-reduced-motion: reduce) {
  .clouds__row,
  .clouds__track,
  .cloud,
  .float-cloud,
  .marquee__track,
  .is-shimmer {
    animation: none !important;
  }
}

/* 404 page */
.not-found {
  align-items: center;
  min-height: 50vh;
  justify-content: center;
  text-align: center;
}