/* MAXION site styles — generated, edit the source and re-upload */

/* Playfair Display italic is loaded from the site's head custom code —
   Webflow's own font link only requests the upright cuts, which left every
   italic on the site as a browser-faked slant of the roman. */

  #steps .steps__screen {
    opacity: 1;
    transform: translateY(100%);
    transition: transform .62s cubic-bezier(.65, 0, .35, 1);
  }
  #steps .steps__screen.is-above { transform: translateY(-100%); }
  #steps .steps__screen.steps__screen--active { transform: translateY(0); }

  #steps .steps__item { transition: opacity .45s ease; }
  @media (min-width: 992px) {
    #steps .steps__item { opacity: .32; }
    #steps .steps__item.is-active { opacity: 1; }
  }
  @media (prefers-reduced-motion: reduce) {
    #steps .steps__screen,
    #steps .steps__item { transition: none !important; }
  }


  .nav-bar.is-scrolled {
    background-color: rgba(6, 5, 9, .86);
    -webkit-backdrop-filter: blur(14px);
    backdrop-filter: blur(14px);
  }
  .nav-bar__burger-line { transition: transform .3s ease, opacity .3s ease; }
  .nav-bar__burger.is-open .nav-bar__burger-line:first-child { transform: translateY(.235rem) rotate(45deg); }
  .nav-bar__burger.is-open .nav-bar__burger-line:last-child  { transform: translateY(-.235rem) rotate(-45deg); }

  @media (max-width: 991px) {
    .nav-bar__burger { display: flex; }
    /* Opaque, not .98 — at full height the hero showed through as a ghost. */
    .nav-bar.is-open { background-color: #060509; }

    /* Full-screen menu. The panel is fixed, but .nav-bar carries
       will-change: transform, so the bar — not the viewport — is its
       containing block: `bottom: 0` would collapse it to the bar's own
       height. Height is therefore stated in dvh, which is viewport-relative
       whatever the containing block is. The links sit at the top and
       .nav-bar__menu-foot (CTA + the three social icons) is pushed to the
       bottom by margin-top: auto. */
    .nav-bar__links {
      display: flex;
      position: fixed;
      top: 6.25rem; left: 0; right: 0;
      height: calc(100vh - 6.25rem);
      height: calc(100dvh - 6.25rem);
      flex-direction: column;
      align-items: stretch;
      grid-column-gap: 0; grid-row-gap: 0;
      padding: 1rem 3rem;
      padding-bottom: calc(2.25rem + env(safe-area-inset-bottom, 0px));
      background-color: #060509;
      border-top: 1px solid rgba(255, 228, 164, .14);
      max-height: none;
      overflow-y: auto;
      transform: translateY(-130%);
      transition: transform .42s cubic-bezier(.22, 1, .36, 1);
    }
    .nav-bar__links.is-open { transform: translateY(0); }

    .nav-bar__links .nav-bar__link {
      width: 100%;
      padding: 1rem 0;
      font-size: 1.0625rem;
      border-bottom: 1px solid rgba(255, 255, 255, .08);
    }
    .nav-bar__links .nav-bar__link:last-child { border-bottom: 0; }

    .nav-bar__menu-foot { margin-top: auto; padding-top: 2rem; }
    .nav-bar__social { grid-column-gap: 1rem; column-gap: 1rem; }
  }

  /* Below 768 the bar itself is 5rem, not 6.25rem — the old value left a
     20px strip of the page showing between the bar and the panel. */
  @media (max-width: 767px) {
    .nav-bar__links {
      top: 5rem;
      height: calc(100vh - 5rem);
      height: calc(100dvh - 5rem);
    }
  }

  @media (max-width: 479px) {
    .nav-bar__links { padding-left: 1.5rem; padding-right: 1.5rem; }
    .button-primary.nav-bar__cta { padding-left: 1rem; padding-right: 1rem; font-size: .8125rem; }
  }

  @media (prefers-reduced-motion: reduce) {
    .nav-bar__links, .nav-bar__burger-line { transition: none !important; }
  }


  /* The marquees are driven by GSAP (see mx-site.js): it measures one set and
     loops on a modifier, so there is no seam and the strip stays draggable on
     a phone. Only the reduced-motion guard is left here. */
  #reviews .reviews__track,
  #next-date .next-date__row { will-change: transform; }
  @media (prefers-reduced-motion: reduce) {
    #reviews .reviews__track,
    #next-date .next-date__row { animation: none !important; transform: none !important; }
  }


  /* nav + footer links */
  .nav-bar__link { position: relative; transition: color 380ms cubic-bezier(.215,.61,.355,1); }
  .nav-bar__link::after {
    content: "";
    position: absolute;
    left: 0; right: 0; bottom: -.4rem;
    height: 1px;
    background-image: linear-gradient(90deg, #FFE4A4, #B98F59);
    transform: scaleX(0);
    transform-origin: left center;
    transition: transform 460ms cubic-bezier(.215,.61,.355,1);
  }
  .nav-bar__link:hover { color: #FFE4A4; }
  .nav-bar__link:hover::after { transform: scaleX(1); }
  @media (max-width: 991px) { .nav-bar__link::after { bottom: .75rem; } }

  .site-footer__link { transition: color 380ms cubic-bezier(.215,.61,.355,1); }
  .site-footer__link:hover { color: #FFE4A4; }

  /* magnetic buttons — follow the cursor, ease-out-cubic back */
  .button-primary, .button-outline, .app-store-badge {
    transition: transform 620ms cubic-bezier(.215,.61,.355,1),
                box-shadow 420ms cubic-bezier(.215,.61,.355,1),
                border-color 420ms cubic-bezier(.215,.61,.355,1),
                color 420ms cubic-bezier(.215,.61,.355,1),
                opacity 420ms cubic-bezier(.215,.61,.355,1);
  }
  .is-magnetic { transition-duration: 170ms, 420ms, 420ms, 420ms, 420ms; will-change: transform; }
  .button-primary:hover { box-shadow: 0 .5rem 1.75rem rgba(185,143,89,.32); }
  .button-outline:hover { border-color: #FFE8CC; color: #FFF4DE; }
  .app-store-badge:hover { opacity: .86; }

  @media (prefers-reduced-motion: reduce) {
    .nav-bar__link::after, .button-primary, .button-outline, .app-store-badge { transition: none !important; }
  }


  .mx-line { display: block; }

  /* On a phone the GSAP marquee keeps running and can be flicked, so the old
     native-scroll fallback (which hid the cloned cards and left a gap in the
     loop) is gone. */


  @media (max-width: 991px) {
    .nav-bar__inner { grid-column-gap: .5rem; column-gap: .5rem; }
  }
  @media (max-width: 479px) {
    .button-primary.nav-bar__cta { font-size: .625rem; padding-left: .75rem; padding-right: .75rem; letter-spacing: .03em; }
  }


/* The phone-scroll layout for steps now lives in the Designer as Tablet
   breakpoint styles on .page-section.steps / .steps__stage / .steps__item /
   .steps__phone. Only the two things the Designer cannot express are left:
   the tablet-width reading measure, and the short-viewport tuning. */
@media (min-width: 480px) and (max-width: 991px) {
  .steps__item { padding-left: max(1.5rem, calc((100% - 34rem) / 2)); padding-right: max(1.5rem, calc((100% - 34rem) / 2)); }
}
@media (max-width: 991px) {
  .steps__item { transition: none; will-change: transform, opacity; backface-visibility: hidden; }
}
@media (max-width: 991px) and (max-height: 700px) {
  .steps__phone { height: 50%; }
  .steps__item { top: 4.25rem; bottom: 48%; }
  .steps__item-number { font-size: 1.5rem; }
  .steps__item-body { font-size: 1rem; }
}


/* The blurred gradient fields behind the sections are real <img class="section-glow">
   elements in the Designer now, so they are visible and movable there. */
.mx-loop__glow { display: none !important; }


  /* 1. Primary button hover.
     Webflow's stock .button-primary:hover forces color:#fff over the gold gradient — unreadable.
     Keep the dark ink, warm the gradient up, add a soft halo. */
  .button-primary:hover,
  .button-primary:focus-visible {
    color: var(--_maxion---color--text-on-gold, #0E0808) !important;
    background-color: transparent !important;
    background-image: radial-gradient(100% 125% at 50% 0%, #FFF0DA 0%, #EFD0A6 50%, #CFA675 100%);
    border-color: #FFF3DC;
    box-shadow: 0 .55rem 1.9rem rgba(185, 143, 89, .38);
  }
  .button-primary:active { filter: brightness(.97); }

  /* 2. Outline buttons get a light fill on hover */
  .button-outline {
    transition: transform 620ms cubic-bezier(.215,.61,.355,1),
                background-color 320ms cubic-bezier(.215,.61,.355,1),
                border-color 320ms cubic-bezier(.215,.61,.355,1),
                color 320ms cubic-bezier(.215,.61,.355,1);
  }
  .button-outline:hover {
    background-color: rgba(255, 228, 164, .12);
    border-color: #FFE8CC;
    color: #FFF4DE;
  }
  .button-outline:active { background-color: rgba(255, 228, 164, .18); }

  /* 3. Nav links — colour change only, drop the sliding underline */
  .nav-bar__link::after { display: none !important; }

  /* 4. Navbar tucks away scrolling down, returns scrolling up. Movement only, no fade. */
  .nav-bar {
    transition: background-color .35s, -webkit-backdrop-filter .35s, backdrop-filter .35s,
                transform 460ms cubic-bezier(.215,.61,.355,1);
    will-change: transform;
  }
  .nav-bar.is-tucked { transform: translateY(-101%); }
  @media (prefers-reduced-motion: reduce) {
    .nav-bar { transition: none !important; }
    .nav-bar.is-tucked { transform: none; }
  }

  /* Card hairlines now live on each card class as a native ::before in the Designer. */

  /* 6. Founder portrait breaks out over the card's top edge, as in the design */
  @media (min-width: 992px) {
    .founder__card { overflow: visible; }
    .founder__portrait { height: 104%; }
    .founder__divider { z-index: 3; }
  }





/* ---- Newsroom: cards (transition + hover are native Designer styles) ---- */
.press-card__title { color: #F8F4EE; transition: color 320ms cubic-bezier(.215,.61,.355,1); }
.press-card:hover .press-card__title { color: #FFF4DE; }
.press-card__read::after { content: "\2192"; display: inline-block; transition: transform 320ms cubic-bezier(.215,.61,.355,1); }
.press-card:hover .press-card__read::after { transform: translateX(.25rem); }
.press-card__media img { transition: transform 620ms cubic-bezier(.215,.61,.355,1); }
.press-card:hover .press-card__media img { transform: scale(1.03); }

/* ---- Newsroom: article body ---- */
.press-article__body { color: #D5D1C7; font-size: 1.0625rem; line-height: 1.7; }
.press-article__body > h1 { display: none; }          /* JS removes it; this only stops the flash */
.press-article__body p { margin: 0 0 1.25rem; }
.press-article__body h2,
.press-article__body h3,
.press-article__body h4 {
  margin: 2.5rem 0 1rem;
  font-family: 'Playfair Display', Georgia, serif;
  font-weight: 400; color: #F8F4EE; letter-spacing: -.02em; line-height: 1.1;
}
.press-article__body h2 { font-size: 1.75rem; }
.press-article__body h3 { font-size: 1.375rem; }
.press-article__body h4 { font-size: 1.125rem; }
.press-article__body a { color: #FFE4A4; text-decoration: underline; text-underline-offset: .18em; }
.press-article__body a:hover { color: #FFF4DE; }
.press-article__body ul, .press-article__body ol { margin: 0 0 1.25rem 1.25rem; padding-left: .75rem; }
.press-article__body li { margin-bottom: .5rem; }
.press-article__body blockquote {
  margin: 2rem 0; padding: 1.25rem 1.5rem;
  border-left: 2px solid #FFE4A4; background: rgba(255,255,255,.03);
  color: #F8F4EE; font-style: italic;
}
.press-article__body img { width: 100%; height: auto; border-radius: .75rem; margin: 1.5rem 0; }
.press-article__body figure { margin: 1.5rem 0; }

/* No link to the original story yet. JS drops the anchor; this stops the flash. */
.press-article__cta:not([href]),
.press-article__cta[href=""],
.press-article__cta[href="#"] { display: none; }

@media (max-width: 767px) {
  .press-article__body { font-size: 1rem; }
  .press-latest__head { align-items: flex-start; flex-direction: column; }
}

/* The collection item now carries the native .press-grid__item class and the
   legacy .w-row clearfix is switched off from the Designer, so nothing is
   needed here any more. */


/* ---- "The latest" strip on article pages ----
   The three-card cap lives in mx-site.js: the count has to be taken after
   the article you are reading has been dropped from the list, which a
   nth-child rule cannot do.
   On phones the three become a side-scroller that bleeds to both edges. */
@media (max-width: 767px) {
  .press-latest .press-grid {
    display: flex;
    grid-column-gap: 1rem; column-gap: 1rem;
    overflow-x: auto;
    scroll-snap-type: x mandatory;
    -webkit-overflow-scrolling: touch;
    scrollbar-width: none;
    margin-left: -1.5rem; margin-right: -1.5rem;
    padding-left: 1.5rem; padding-right: 1.5rem;
    padding-bottom: .5rem;
  }
  .press-latest .press-grid::-webkit-scrollbar { display: none; }
  .press-latest .press-grid > * {
    flex: 0 0 78vw;
    max-width: 19rem;
    scroll-snap-align: start;
  }
}


/* ---- Dopamine loop on phones ----
   At 390px the caption ran wider than its box and collided with the MATCH pill.
   Shrink the caption and the pills so the ring stays readable. */
@media (max-width: 767px) {
  body .mx-loop__caption { width: 50%; font-size: 8.6cqw; }
  body .mx-loop__pill { font-size: 3.1cqw; height: 10.2cqw; padding: 0 4.4cqw; }
}
@media (max-width: 479px) {
  body .mx-loop__caption { width: 52%; font-size: 8.2cqw; }
  body .mx-loop__pill { font-size: 3.3cqw; height: 10.6cqw; }
  body .mx-loop__pill--ghost { left: 13%; }
  body .mx-loop__pill--match { left: 87%; }
}


/* Card headline must never be squeezed by the flex column — it overflowed
   its box and painted over the Read link. */
.press-card__meta,
.press-card__title,
.press-card__read { flex-shrink: 0; }


/* =========================================================================
   Round 10 — device frame, spacing, loop, footer, card rhythm
   ========================================================================= */

/* Canvas colour comes from the design token so it matches the foot of the
   hero photo exactly and there is no seam under it. */
html { background-color: var(--_maxion---color--surface, #0E0807); }
/* .page-wrap carries the surface colour as a Designer style (Color/Surface).
   body stays transparent so the wrapper is what you actually see — the class
   used to repaint it #111517 below 991px, which turned every page grey on a
   phone. */
body { background-color: transparent; }


/* .mission__badge blur is a native Designer style now. */

/* Safari needs the prefixed background-clip; the rest is native on .site-footer__label. */
.site-footer__label { -webkit-background-clip: text; }



/* The red field behind the ring is now the .section-glow image on the section. */
.mx-loop__arcs path { will-change: stroke-dashoffset; }
.mx-loop__pill { will-change: transform; z-index: 2; }
.mx-loop__caption { z-index: 2; }
@media (prefers-reduced-motion: reduce) {
  .mx-loop__arcs path { stroke-dasharray: none !important; stroke-dashoffset: 0 !important; }
}



/* ---- Card interiors ----
   .mission__card-content is a flex column with a gap set in the Designer.
   The margin-top rules that used to live here stacked on top of that gap and
   doubled every space inside the science cards, so they are gone; the native
   gap is the single source of rhythm now.
   .press-article__inner is not a flex container, so it still needs margins. */
.press-article__inner > * + * { margin-top: 1em; }
.science__title { margin-bottom: 0 !important; }

/* ---- Partners page ----------------------------------------------------
   Only the parts the Designer cannot express: the plus/minus glyph is drawn
   with pseudo-elements, and the venues strip needs edge fades. */
.faq__icon::before,
.faq__icon::after {
  content: "";
  position: absolute; left: 50%; top: 50%;
  background-color: #FFE4A4;
  transition: transform .34s cubic-bezier(.22, 1, .36, 1), opacity .34s ease;
}
.faq__icon::before { width: 1rem; height: 1px; transform: translate(-50%, -50%); }
.faq__icon::after  { width: 1px; height: 1rem; transform: translate(-50%, -50%); }
.faq__item.is-open .faq__icon::after { transform: translate(-50%, -50%) rotate(90deg); opacity: 0; }
.faq__head:hover .faq__q { color: #FFE4A4; }
.faq__q { transition: color 320ms cubic-bezier(.215,.61,.355,1); }
/* The accordion animates height in CSS so it never depends on the JS ticker. */
.faq__panel { transition: height .42s cubic-bezier(.22, 1, .36, 1); }
@media (prefers-reduced-motion: reduce) { .faq__panel { transition: none !important; } }

/* The strip runs edge to edge and fades out rather than being cut off. */
.venues__viewport {
  -webkit-mask-image: linear-gradient(90deg, transparent, #000 6%, #000 94%, transparent);
  mask-image: linear-gradient(90deg, transparent, #000 6%, #000 94%, transparent);
}
/* ---- Phones: section headings read as a centred block --------------------
   Only headings that introduce a section, plus the framed hero and quote
   blocks. Card interiors (work cards, FAQ rows, mission cards) keep the
   left alignment they are designed with — the same wrapper classes are used
   for both, so the selectors stay narrow on purpose. */
@media (max-width: 991px) {
  .page-section > .page-container > .heading-1,
  .page-section > .page-container > .heading-2,
  .page-section > .page-container > .text-lead,
  .page-section > .page-container > .text-large,
  .reality__body > .heading-1,
  .reality__body > .text-lead,
  .reality__body > .text-base,
  .dd-quote__body > .heading-1,
  .dd-quote__body > .text-lead,
  .dd-quote__sign,
  .vision-hero__content > .heading-1,
  .vision-hero__content > .text-lead,
  .vision-hero__content > .text-large {
    margin-left: auto;
    margin-right: auto;
    text-align: center;
  }
  .reality__body,
  .dd-quote__body,
  .dd-quote__sign,
  .vision-hero__content { align-items: center; }

  /* The framed cards and the step copy are flex columns pinned to
     flex-start, so text-align alone has nothing to centre inside. */
  .media-card__content,
  .media-card__content > .heading-text-wrapper,
  .steps__item .heading-text-wrapper {
    align-items: center;
    text-align: center;
  }
}

/* Touch: mx-site.js drops the marquee tween and hands each strip to the
   browser (see mxMarqueeMotion). These are the scrollers it makes. */
.mx-scroller {
  overflow-x: auto;
  scrollbar-width: none;
  -webkit-overflow-scrolling: touch;
  overscroll-behavior-x: contain;
}
.mx-scroller::-webkit-scrollbar { display: none; }
.mx-scroller > * { width: max-content; }

@media (max-width: 767px) {
  .venues__viewport { overflow-x: auto; scrollbar-width: none; -webkit-overflow-scrolling: touch; }
  .venues__viewport::-webkit-scrollbar { display: none; }
  /* Fourteen backdrop-filtered cards inside a transforming track is a real cost
     on a phone, and the blur reads as nothing over a flat dark section. Drop it
     and make the fill carry the weight instead. */
  .vibe-card {
    -webkit-backdrop-filter: none;
    backdrop-filter: none;
    background-color: rgba(23, 17, 17, .94);
  }
}
@media (prefers-reduced-motion: reduce) {
  .faq__icon::before, .faq__icon::after, .faq__q { transition: none !important; }
}

/* Dating in Dubai: each episode is a YouTube player inside an HTML embed —
   Webflow's own Video element only resolves the URL in the Designer and
   publishes an empty box. The embed's <div> and the <iframe> both have to be
   stretched to the 16:9 slot; neither is reachable from the Designer. */
.episode-card__player .w-embed,
.episode-card__player .w-richtext { height: 100%; }
.episode-card__frame {
  position: absolute;
  inset: 0;
  display: block;
  width: 100%;
  height: 100%;
  border: 0;
}
/* The poster stands in for the player until the card is clicked (see
   initEpisodes in mx-site.js). */
.episode-card__poster {
  position: absolute;
  inset: 0;
  display: flex;
  width: 100%;
  height: 100%;
  padding: 0;
  align-items: center;
  justify-content: center;
  border: 0;
  cursor: pointer;
  background-color: rgba(255, 255, 255, .04);
  background-position: 50% 50%;
  background-size: cover;
  background-repeat: no-repeat;
}
.episode-card__poster .episode-card__play {
  width: 3.5rem;
  height: 3.5rem;
  border-radius: 100px;
  background-color: rgba(14, 8, 7, .55);
  background-image: linear-gradient(166deg, #FFE4A4 3%, #B98F59 91%);
  transition: transform .34s cubic-bezier(.22, 1, .36, 1);
}
.episode-card__poster:hover .episode-card__play { transform: scale(1.09); }
@media (prefers-reduced-motion: reduce) {
  .episode-card__poster .episode-card__play { transition: none !important; }
}

/* The play glyph is a triangle knocked out of the gold disc. */
.episode-card__play { position: relative; }
.episode-card__play::after {
  content: "";
  position: absolute; left: 54%; top: 50%;
  transform: translate(-50%, -50%);
  border-top: .5rem solid transparent;
  border-bottom: .5rem solid transparent;
  border-left: .8rem solid #140C0A;
}
.episode-card:hover .episode-card__thumb { border-color: rgba(255, 228, 164, .5); }
.episode-card__thumb { border: 1px solid rgba(255, 232, 204, .12); transition: border-color 320ms cubic-bezier(.215,.61,.355,1); }
.episode-card:hover .episode-card__name { color: #FFE4A4; }
.episode-card__name { transition: color 320ms cubic-bezier(.215,.61,.355,1); }
@media (prefers-reduced-motion: reduce) {
  .episode-card__thumb, .episode-card__name { transition: none !important; }
}

/* Placeholder colour is not reachable from the Designer. */
.pf-input::placeholder, .pf-textarea::placeholder { color: rgba(255, 255, 255, .38); }
.pf-input:focus, .pf-textarea:focus { border-bottom-color: rgba(255, 228, 164, .7); outline: none; }


/* ---- Founder: larger portrait, quote that breathes ---- */
@media (min-width: 992px) {
  .founder__portrait { height: 114%; }
  .founder__quote-line { max-width: 30rem; }
}
.founder__quote-line { text-wrap: pretty; }
.founder__quote-line + .founder__quote-line { margin-top: 1em; }

/* Descenders of the italic serif were being cut at the bottom of their box. */
.heading-1, .heading-2, .founder__name, .press-article__title { padding-bottom: .08em; }
.founder__quote, .founder__quote-row { overflow: visible; }

/* ---- Lenis smooth scroll ------------------------------------------------
   Lenis drives the native window scroll, so sticky positioning keeps working.
   These are the library's required baseline rules. */
html.lenis, html.lenis body { height: auto; }
.lenis.lenis-smooth { scroll-behavior: auto !important; }
.lenis.lenis-smooth [data-lenis-prevent] { overscroll-behavior: contain; }
.lenis.lenis-stopped { overflow: hidden; }
.lenis.lenis-smooth iframe { pointer-events: none; }