/* Hand-written additions on top of the Webflow export — kept separate from
   the generated stylesheets so they're easy to find/maintain.

   The "essence" section reuses the page's own .container / .heading-w /
   .inner-heading / .h-xl / .p-regular scaffolding (same as the "Founded by
   Andrea Pérez" section right after it) so it sits at the same width, same
   heading scale, same body-copy treatment — no bespoke look of its own. */

/* --- Hero ---------------------------------------------------------------
   The hero column is widened from Webflow's 520px so the headline breaks
   across 3 lines (as designed) rather than 5. Without this the taller
   stack overflows the bottom-anchored hero and slides up behind the
   fixed navbar. */
.content-hero {
  /* 720px is the smallest width that keeps "Your wellbeing" on one line at
     the h-xxl size (it measures ~708px), giving the intended 3-line break. */
  max-width: 720px;
}

.content-description-hero {
  width: 100%;
  max-width: 470px;
}

/* Hero eyebrow pill. Deliberately not reusing Webflow's `.title-tag.white`
   variant — that rule depends on a mangled export artifact variable name
   (`--dark-grey\<deleted|variable-…\>`) that's fragile to rely on. */
.hero-eyebrow {
  align-self: flex-start;
  /* .content-hero has a 40px flex gap; pull the headline up closer to the
     pill so the pair reads as one unit. */
  margin-bottom: -18px;
  background-color: #0808081f;
  -webkit-backdrop-filter: blur(6px);
  backdrop-filter: blur(6px);
  color: #fff;
  border-radius: 200px;
  padding: 10px 22px;
  font-family: "Bdogrotesk Vf", sans-serif;
  font-size: 15px;
  font-weight: 500;
  line-height: 1.2;
  letter-spacing: -0.01em;
}

@media screen and (max-width: 991px) {
  .content-hero,
  .content-description-hero {
    max-width: none;
  }
  .hero-eyebrow {
    align-self: center;
    /* headline is much smaller here, so it needs less of a pull-up */
    margin-bottom: -8px;
  }
}

/* The eyebrow pill is hidden on phones: with the headline, the paragraph and
   the CTA all stacked over the photograph, it was one element too many, and
   it was also the piece pushing the block past the space between the navbar
   and the subject on narrow screens. The line still reaches search engines
   and social cards through the meta description. */
@media screen and (max-width: 767px) {
  .hero-eyebrow {
    display: none;
  }
}

@media screen and (max-width: 479px) {

  /* Position the copy against the photograph, not against the box.

     Sampling the mobile crop's luminance across widths, the subject's hair
     enters the frame at a constant 44.7% of the hero, and the hero is
     always 1.2x the viewport height — so her head starts at ~53.6vh on any
     phone. Everything above that is open sky.

     A fixed top padding can't hold that line, because the copy block grows
     as the screen narrows (262px at 430, 356px at 320) while the hero
     shrinks. Webflow's 132px left the block floating with ~530px of empty
     photo below it; the 210px it was moved to ran the CTA 75px into her
     face; 100px measured well at 390 and still overlapped by 80px at 320.

     Anchoring from the bottom instead removes the block's height from the
     equation: with 70vh reserved beneath it, the CTA always lands at
     120vh - 70vh = 50vh, just under her head, and the copy stacks upward
     into the sky however tall it needs to be.

     A plain flex-end can't do it alone: at 70vh the CTA cleared her head by
     ~30px but the copy ran under the navbar on a 360px screen, and pulling
     the reserve back to 67vh fixed that only by leaving 5px of clearance
     everywhere. `margin-top: auto` gives both. It absorbs the free space and
     pins the block to the bottom when there is room, and collapses to zero
     when there isn't, so padding-top acts as a hard floor under the navbar
     instead of the block overflowing past it. */
  .inner-hero {
    justify-content: flex-start;
    padding-top: 96px;
    padding-bottom: 70vh;
  }

  .content-hero {
    margin-top: auto;
  }

  .content-description-hero {
    grid-row-gap: 32px;
  }
}

/* --- Nav ------------------------------------------------------------------
   Same-page anchors only. scroll-margin-top keeps each target clear of the
   fixed navbar; without it the heading lands underneath the pill. */
html {
  scroll-behavior: smooth;
}

#about,
#method,
#ecosystem {
  scroll-margin-top: 96px;
}

.container-nav .nav-menu {
  gap: 4px;
}

.nav-login {
  color: #303a46;
  padding: 10px 14px;
  font-size: 15px;
  font-weight: 500;
  line-height: 1.2;
  text-decoration: none;
  border-radius: 6px;
  transition: background-color 0.15s;
}

.nav-login:hover {
  background-color: #3838381a;
}

@media screen and (max-width: 991px) {
  /* Webflow collapses .nav-menu into the mobile panel here; the login link
     lives outside it, so keep it compact next to the CTA. */
  .nav-login {
    padding: 8px 10px;
    font-size: 14px;
  }
}

/* --- Footer ---------------------------------------------------------------
   Recoloured to the teal/pale-yellow palette from the brand still. The two
   footer logos were dark PNGs on a dark field (effectively invisible), so
   they're now painted with a CSS mask instead of being <img> elements —
   the PNG has an alpha channel, so masking gives an exact brand colour
   rather than approximating it with a filter chain. The nav logo is left
   as a normal <img> since it sits on a light background. */
.footer-wrapper {
  background-color: #2c4a44;
}

.footer-brand-mark,
.footer-logo-mark {
  background-color: #ecdf94;
  -webkit-mask: url('../images/01_PRINCIPAL_7.png') no-repeat center / contain;
  mask: url('../images/01_PRINCIPAL_7.png') no-repeat center / contain;
}

.footer-brand-mark {
  /* matches the original .image-brand box (2113x513 artwork ≈ 4.12:1) */
  width: 92px;
  height: 22px;
}

.footer-logo-mark {
  width: 90vw;
  max-width: 1400px;
  aspect-ratio: 2113 / 513;
  opacity: 0.14;
}

/* Simplified footer: brand + subtext on the left, newsletter + contact on
   the right. Overrides the Webflow 5-column footer grid, which no longer
   has columns to fill. */
.footer-grid-simple {
  display: flex;
  justify-content: space-between;
  align-items: flex-start;
  gap: 48px;
}

.footer-brand-col {
  display: flex;
  flex-direction: column;
  align-items: flex-start;
  gap: 16px;
  max-width: 380px;
}

.footer-subtext {
  margin: 0;
  max-width: 42ch;
}

.footer-grid-simple .newsletter {
  flex: none;
  width: 100%;
  max-width: 380px;
}

.footer-email {
  display: inline-block;
  margin-top: 18px;
  color: #ecdf94;
  font-size: 20px;
  font-weight: 500;
  letter-spacing: -0.01em;
  text-decoration: none;
  border-bottom: 1px solid transparent;
}

.footer-email:hover {
  border-bottom-color: #ecdf94;
}

@media screen and (max-width: 767px) {
  .footer-grid-simple {
    flex-direction: column;
    gap: 36px;
  }
  .footer-grid-simple .newsletter,
  .footer-brand-col {
    max-width: none;
  }
}

.footer-wrapper .footer-heading-small {
  color: #c2c894;
}

.footer-wrapper .link-nav-footer {
  color: #dfe3c6;
}

.footer-wrapper .link-nav-footer:hover {
  border-bottom-color: #ecdf94;
}

.footer-wrapper .footer-paragraph-small {
  color: #9ab0a6;
}

.footer-wrapper .link-footer-small {
  color: #c2c894;
}

.footer-wrapper .footer-baseline-2 {
  border-top-color: #46655d;
}

.footer-wrapper .subscribe-field {
  background-color: #24403b;
  border-color: #46655d;
  color: #f2f4e4;
}

.footer-wrapper .subscribe-field::placeholder {
  color: #8fa79c;
}

/* NOTE on the "A gluon is the particle…" collage: the heading is
   deliberately left with no z-index, so the .d-frame cards — later in the
   DOM — sweep *over* it as they converge, and the line is revealed as they
   spread apart. Lifting the heading above them (tried once) kills that
   reveal and makes the type sit flatly on top of the photos. */

/* The fold heading has to be lifted on .fold-content, not on the heading
   itself: IX2 writes `will-change: opacity` inline on .fold-content, which
   makes it a stacking context, so any z-index set inside is trapped there.
   .fold-content is z-index auto (level 0), i.e. under both image columns
   (6 and 7) and the .gradient-shadow vignette (20) — hence 25. */
.sticky-fold .fold-content {
  position: relative;
  z-index: 25;
}

/* --- "A method that holds." fold statements -------------------------------
   Two separate statements rather than one wrapped block. .h-xl has a 1.06
   line-height (essentially no leading), so the default 24px stack gap read
   as just another line break — this opens it up enough that the two read
   as distinct. Kept as two .h-xl siblings so Webflow's IX2 colour
   animation, which targets `.h-xl` on the track's children, still hits
   both as the section goes dark. */
.fold-statements {
  gap: 48px;
}

@media screen and (max-width: 767px) {
  .fold-statements {
    gap: 28px;
  }
}

@media screen and (max-width: 479px) {
  .fold-statements {
    gap: 18px;
  }
}

/* --- "The Philosophy" panel -----------------------------------------------
   This slot used to hold a short headline at .h-m (2.2em). The copy is now
   a full paragraph, so it's set at a reading size instead — at 2.2em it
   would run ~12 lines and overflow the panel. */
.philosophy-text {
  margin: 0;
  font-family: "Bdogrotesk Vf", sans-serif;
  font-size: 19px;
  font-weight: 500;
  line-height: 1.5;
  letter-spacing: -0.01em;
}

@media screen and (max-width: 479px) {
  .philosophy-text {
    font-size: 16px;
  }
}

/* --- "The Method" sticky-expand backdrop --------------------------------
   Swaps the stock portrait (img-001.2, a woman stretching) for an abstract
   texture. Overridden here rather than edited in the generated Webflow CSS,
   which sets it on both the outer panel and the inner scaling frame. */
.sticky-expand-image,
.device-frame-large {
  background-image: url('../images/method-sky.jpg');
  /* Webflow sized this backdrop to a fixed `background-size: 1440px` and left
     `repeat` on. At that width the photo is 810px tall in a 900px panel, so
     the leftover 90px tiled a second copy of it. The old backdrop was a
     diffuse texture, which hid the seam; a photograph with a person in it
     does not. cover + no-repeat fills the panel at any viewport instead. */
  background-size: cover;
  background-repeat: no-repeat;
  background-position: 50% 50%;
}

/* --- "Explore Gluon" ecosystem carousel ---------------------------------
   Horizontal scroll-snap carousel. Arrows scroll by exactly one card
   (card width + gap), read off the DOM so the CSS stays the single source
   of truth for sizing. Native overflow scrolling means trackpad/swipe
   still works if JS never runs. */
.eg-section {
  padding-top: 100px;
  padding-bottom: 100px;
}

.eg-head {
  display: flex;
  align-items: flex-end;
  justify-content: space-between;
  gap: 24px;
  margin-bottom: 40px;
}

.eg-head-text {
  display: flex;
  flex-direction: column;
  align-items: flex-start;
  gap: 12px;
}

.eg-title {
  margin: 0;
}

.eg-nav {
  display: flex;
  gap: 10px;
  flex: none;
}

.eg-arrow {
  width: 48px;
  height: 48px;
  border-radius: 100px;
  border: 1px solid #c8d1d9;
  background-color: #fff;
  color: #1f3634;
  display: flex;
  align-items: center;
  justify-content: center;
  cursor: pointer;
  transition: background-color 0.15s, border-color 0.15s, opacity 0.15s;
}

.eg-arrow:hover {
  background-color: #edf0f2;
  border-color: #b1bbc8;
}

.eg-arrow[disabled] {
  opacity: 0.35;
  cursor: default;
}

.eg-track {
  display: flex;
  gap: 20px;
  overflow-x: auto;
  scroll-snap-type: x mandatory;
  scroll-behavior: smooth;
  scrollbar-width: none;
  -ms-overflow-style: none;
  /* let card shadows breathe without clipping */
  padding-bottom: 4px;
}

.eg-track::-webkit-scrollbar {
  display: none;
}

.eg-card {
  position: relative;
  flex: 0 0 auto;
  width: 380px;
  aspect-ratio: 3 / 4;
  border-radius: 20px;
  overflow: hidden;
  scroll-snap-align: start;
  display: flex;
  align-items: flex-end;
  padding: 14px;
}

.eg-card-img {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  object-fit: cover;
}

.eg-card-inner {
  position: relative;
  z-index: 2;
  width: 100%;
  background-color: #fffffff2;
  -webkit-backdrop-filter: blur(10px);
  backdrop-filter: blur(10px);
  border-radius: 14px;
  padding: 18px;
  display: flex;
  flex-direction: column;
  align-items: flex-start;
  gap: 8px;
}

.eg-pill {
  display: inline-block;
  border-radius: 200px;
  padding: 5px 12px;
  font-size: 11px;
  font-weight: 600;
  letter-spacing: 0.01em;
  line-height: 1.2;
}

.eg-pill-live {
  background-color: #d2f0a3;
  color: #415326;
}

.eg-pill-soon {
  background-color: #e6e2d8;
  color: #6b6455;
}

.eg-card-title {
  margin: 2px 0 0;
  font-family: "Bdogrotesk Vf", sans-serif;
  font-size: 22px;
  font-weight: 700;
  line-height: 1.2;
  letter-spacing: -0.02em;
  color: #1f3634;
}

.eg-card-sub {
  font-size: 13px;
  font-weight: 500;
  color: #404146;
}

.eg-card-text {
  margin: 0;
  font-size: 13px;
  line-height: 1.45;
  color: #696c75;
}

.eg-card-btn {
  margin-top: 6px;
  display: inline-flex;
  align-items: center;
  background-color: #d2f0a3;
  color: #415326;
  border-radius: 100px;
  padding: 10px 18px;
  font-size: 13px;
  font-weight: 500;
  text-decoration: none;
  transition: background-color 0.15s;
}

.eg-card-btn:hover {
  background-color: #cce2a3;
}

.eg-foot {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 24px;
  margin-top: 40px;
  padding-top: 28px;
  border-top: 1px solid #dde3e8;
}

.eg-bridge {
  margin: 0;
  font-size: 15px;
  color: #696c75;
  max-width: 52ch;
}

.eg-foot-btn {
  flex: none;
}

@media screen and (max-width: 991px) {
  .eg-card {
    width: 320px;
  }
}

@media screen and (max-width: 767px) {
  .eg-head {
    flex-direction: column;
    align-items: flex-start;
  }
  .eg-foot {
    flex-direction: column;
    align-items: flex-start;
  }
}

@media screen and (max-width: 479px) {
  .eg-section {
    padding-top: 56px;
    padding-bottom: 56px;
  }
  .eg-card {
    width: 78vw;
  }
}

/* --- "The Method" 4-step cards ------------------------------------------
   Sits directly under the "A method that holds" fold. Card imagery is
   pulled from the Webflow export's own texture library (bg-cloud-51/64/
   84/53) rather than new assets. */
.method-steps {
  padding-top: 100px;
  padding-bottom: 100px;
}

.method-panel {
  background-color: #f4f0e8;
  border-radius: 32px;
  padding: 72px 64px;
}

.method-head {
  margin-bottom: 48px;
}

.method-title {
  margin: 0;
  font-family: "Bdogrotesk Vf", sans-serif;
  font-size: 3.4em;
  font-weight: 700;
  line-height: 1.1;
  letter-spacing: -0.02em;
  color: #1f3634;
}

.method-sub {
  margin-top: 10px;
  font-size: 15px;
  color: #696c75;
}

.method-grid {
  display: grid;
  grid-template-columns: repeat(4, 1fr);
  gap: 20px;
}

.method-card {
  position: relative;
  aspect-ratio: 3 / 4;
  border-radius: 18px;
  overflow: hidden;
  display: flex;
  align-items: flex-end;
  padding: 12px;
}

.method-card-img {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  object-fit: cover;
}

.method-num {
  position: absolute;
  top: 14px;
  left: 14px;
  z-index: 2;
  width: 26px;
  height: 26px;
  border-radius: 100px;
  background-color: #ffffffd9;
  color: #1f3634;
  font-size: 10px;
  font-weight: 600;
  letter-spacing: 0.02em;
  display: flex;
  align-items: center;
  justify-content: center;
}

.method-card-body {
  position: relative;
  z-index: 2;
  width: 100%;
  background-color: #fffffff2;
  -webkit-backdrop-filter: blur(10px);
  backdrop-filter: blur(10px);
  border-radius: 12px;
  padding: 16px 16px 18px;
}

.method-card-title {
  margin: 0 0 6px;
  font-family: "Bdogrotesk Vf", sans-serif;
  font-size: 22px;
  font-weight: 700;
  line-height: 1.2;
  letter-spacing: -0.02em;
  color: #1f3634;
}

.method-card-text {
  margin: 0;
  font-size: 13px;
  line-height: 1.45;
  color: #696c75;
}

/* No orphans anywhere in this section. `pretty` pulls a word down from the
   previous line rather than leaving the last line with a single word, which
   is what "…no longer serve / you." was doing. It degrades to normal
   wrapping on browsers that don't support it, so nothing breaks. `balance`
   on the headings evens out their line lengths instead. */
.method-card-text,
.method-sub,
.method-foot p {
  text-wrap: pretty;
}

.method-title,
.method-card-title {
  text-wrap: balance;
}

/* --- Orphans elsewhere on the page ---------------------------------------
   Same treatment for the four other places a single word was landing alone
   on the last line: the hero paragraph ("sustain."), the collage heading
   ("core"), and the ecosystem card title/body/bridge ("Experiences",
   "breathe.", "first.").

   Deliberately scoped, not blanket:
   - .h-xxl (the hero headline) is left alone. Its 3-line break is the result
     of the hand-set 720px column width; balancing it would re-flow it.
   - .h-xl is matched only inside .sticky-container-01, because the same
     class carries the two .fold-statements lines, which are already set as
     separate blocks and shouldn't be re-balanced. */
.content-description-hero .p-m,
.eg-card-text,
.eg-card-sub,
.eg-bridge,
.footer-paragraph-small {
  text-wrap: pretty;
}

/* The hero headline is exempt above, because its 3-line break comes from the
   hand-set 720px column. That reasoning only holds on desktop: below 992px
   the column collapses to the viewport and the break is whatever fits, which
   was leaving "surface" alone on a phone.

   `balance` rather than `pretty` here — measured both at 390px, and pretty
   left the orphan in place while balance evens the three lines into
   "Your wellbeing / starts beneath / the surface", which is the same break
   the hand-tuned desktop column produces. Scoped to <=991px so the desktop
   headline is still driven by the column width, not by the balancer. */
@media screen and (max-width: 991px) {
  .content-hero .h-xxl {
    text-wrap: balance;
  }
}

.sticky-container-01 .h-xl,
.eg-card-title,
.h-l:not(.whatis-statement) {
  text-wrap: balance;
}
/* .whatis-statement is excluded on purpose: it shares .h-l with the ecosystem
   and closing headings, but its measure is hand-set (max-width 940px, chosen
   so its longest line lands at 918px). Balancing it would re-flow a
   composition that was set deliberately. */

.method-foot {
  margin-top: 48px;
  padding-top: 28px;
  border-top: 1px solid #dcd6ca;
}

.method-foot p {
  margin: 0;
  font-size: 15px;
  color: #696c75;
}

.method-foot strong {
  font-weight: 700;
  color: #1f3634;
}

@media screen and (max-width: 991px) {
  .method-panel {
    padding: 48px 32px;
    border-radius: 24px;
  }
  .method-grid {
    grid-template-columns: repeat(2, 1fr);
  }
  .method-title {
    font-size: 3em;
  }
}

@media screen and (max-width: 767px) {
  .method-title {
    font-size: 2.4em;
  }
}

@media screen and (max-width: 479px) {
  .method-steps {
    padding-top: 56px;
    padding-bottom: 56px;
  }
  .method-panel {
    padding: 32px 20px;
    border-radius: 18px;
  }
  .method-grid {
    grid-template-columns: 1fr;
    gap: 16px;
  }
  .method-card {
    aspect-ratio: 4 / 3;
  }
  .method-title {
    font-size: 1.9em;
  }
  .method-head {
    margin-bottom: 28px;
  }
  .method-foot {
    margin-top: 28px;
  }
}

/* NOTE on the "A method that holds" fold: do NOT set its background or
   heading colour here. Webflow's IX2 scroll animation (action list a-210,
   "Section Gallery") writes those as *inline* styles as you scroll —
   .fold-bg animates to rgb(54,78,84) and the .h-xl heading to
   rgb(161,223,116) around 60% scroll progress. Inline styles beat
   stylesheet rules, so CSS here is silently ignored, and any static colour
   only corrupts the animation's opening state. Change the colours in the
   a-210 keyframes in js/webflow.js instead. */

/* --- "What is Gluon" statement ------------------------------------------
   Sits between the sticky collage and the "Founded by Andrea Pérez" block.
   Uses the page's own .title-tag pill and .h-l heading scale; the only new
   idea is the two-weight statement (bold lead sentence, regular follow-on)
   set as a single flowing paragraph. */
.whatis-section {
  background-color: #dce3e9;
  padding-top: 140px;
  padding-bottom: 140px;
}

.whatis-wrap {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 40px;
  text-align: center;
}

.whatis-statement {
  /* longest line ("system that holds the small, yet powerful") measures
     ~918px at this size — 940px keeps the intended 4-line break */
  max-width: 940px;
  margin: 0 auto;
  font-weight: 400;
  line-height: 1.25;
}

.whatis-statement strong {
  font-weight: 700;
}

.whatis-light {
  font-weight: 400;
  color: #303a46;
}

@media screen and (max-width: 991px) {
  .whatis-section {
    padding-top: 100px;
    padding-bottom: 100px;
  }
  .whatis-statement {
    max-width: 680px;
  }
}

@media screen and (max-width: 479px) {
  .whatis-section {
    padding-top: 64px;
    padding-bottom: 64px;
  }
  .whatis-wrap {
    gap: 24px;
  }
}

/* ==========================================================================
   HERO IMAGE — higher-resolution master
   ==========================================================================
   Same photograph and same crop as Webflow's mh-desktop.avif, but 1608x978
   instead of 800x489. The exported asset was upscaled to fill the viewport,
   which is what made the hero look soft.

   Scoped to min-width: 992px on purpose. custom.css loads after the Webflow
   stylesheets, so an unscoped .sub-hero-image rule would also beat Webflow's
   <=991px rules and push this landscape crop onto phones, where the layout
   expects the portrait mh-mobile crop. Tablet and mobile are untouched — the
   source file is landscape, so any portrait crop cut from it would come out
   narrower than the 500px mh-mobile already in use.

   background-position matches Webflow's original (0 100%) so the framing is
   identical to what is live today. */
@media screen and (min-width: 992px) {
  .sub-hero-image {
    background-image: url('../images/hero-meditation.jpg');
    background-position: 0 100%;
  }
}

/* --- Button labels stay on one line --------------------------------------
   "Join the Community" is longer than the labels these buttons were built
   for, and it was wrapping to two lines inside the ecosystem card and the
   closing CTA, leaving "Community" alone on the second line. Buttons size
   to their content, so nowrap just widens them rather than overflowing. */
.button-green > div,
.button-nav > div,
.eg-card-btn,
.eg-foot-btn > div {
  white-space: nowrap;
}

/* --- /join --------------------------------------------------------------
   The page reuses the Zuno template's request-demo layout: a two-column grid
   with copy on the left and the form on the right. The template overlaid its
   column text on the photograph, which worked for a two-line testimonial but
   not for two full paragraphs — pale type on a pale image, and the second
   paragraph ran past the bottom of the picture. The image becomes a band and
   the copy sits below it on the page background instead. */
/* 160px left a 220px gap under the fixed navbar once .header-medium's own
   padding was counted; 64px brings it to a ~124px breathing space. */
.join-hero {
  padding-top: 64px;
  padding-bottom: 8px;
}

.join-grid {
  align-items: start;
  gap: 56px;
}

.join-copy {
  display: flex;
  flex-direction: column;
  gap: 22px;
  max-width: 560px;
}

.join-copy-img {
  width: 100%;
  height: 260px;
  object-fit: cover;
  object-position: 50% 32%;
  border-radius: 18px;
  display: block;
}

.join-para {
  margin: 0;
  font-size: 17px;
  line-height: 1.6;
  color: #4a4f57;
  text-wrap: pretty;
}

.join-submit {
  width: 100%;
  border: 0;
  cursor: pointer;
  font: inherit;
}

.join-note {
  margin: 0;
  font-size: 13px;
  line-height: 1.5;
  color: #74787f;
  text-wrap: pretty;
}

.join-success,
.join-error {
  margin-top: 4px;
}

/* `hidden` is overridden by the template's display rules on these two, so it
   needs restating — otherwise both states show on load. */
.join-success[hidden],
.join-error[hidden],
#join-form[hidden] {
  display: none !important;
}

@media screen and (max-width: 991px) {
  .join-hero {
    padding-top: 48px;
  }
  .join-grid {
    gap: 36px;
  }
  .join-copy {
    max-width: none;
  }
}

@media screen and (max-width: 479px) {
  .join-copy-img {
    height: 190px;
  }
  .join-para {
    font-size: 16px;
  }
}

/* --- Transición del hero a la sección siguiente -------------------------
   The hero photo ended on a hard horizontal line against the collage
   section. Same technique the page already uses at .gradient-shadow, which
   bleeds the section colour over the images with
   `linear-gradient(#dce3e9 31%, transparent)` — here it runs the other way,
   fading the photo out into the colour underneath.

   That colour is sampled, not guessed: .sticky-container-01 paints
   rgb(219,228,233) directly below the hero.

   Height is a percentage of the hero rather than vh, so the fade keeps its
   proportion instead of drifting with the window. At 32% it starts around
   710px of a 1044px hero, well clear of the CTA, which ends at ~417.
   pointer-events: none so it can never intercept a click on the button. */
.sub-hero-image {
  position: relative;
}

.sub-hero-image::after {
  content: "";
  position: absolute;
  left: 0;
  right: 0;
  bottom: 0;
  height: 32%;
  background-image: linear-gradient(to bottom, rgba(219, 228, 233, 0), rgb(219, 228, 233));
  pointer-events: none;
  z-index: 1;
}

/* --- Los otros dos cortes de sección -------------------------------------
   Same idea as the hero fade, applied to the two remaining hard edges.
   Both are anchored to the track (the tall element that holds the document
   flow) rather than to the sticky panel inside it, so the fade stays at the
   boundary instead of travelling with the panel as it pins and unpins.

   .track-m ends on the fold, whose background IX2 animates to dark teal, and
   drops straight into the white of the section below. The fade runs to white
   rather than to the fold's own colour, so it works whatever the animation
   has left behind.

   .track-l opens on the sky photograph against the white above it, so the
   fade sits at the top and runs the other way. */
.track-m:not(.l),
.track-l {
  position: relative;
}

/* :not(.l) matters — there are two .track-m elements. The first, .track-m.l,
   holds the collage and ends against rgb(220,227,233), a single unit off the
   colour above it, so it has no seam to fix and a white fade there would
   invent one. Only the fold track gets the treatment. */
.track-m:not(.l)::after,
.track-l::before {
  content: "";
  position: absolute;
  left: 0;
  right: 0;
  pointer-events: none;
}

/* z-index 5, not 30. The image columns in this section sit at 6 and 7 and the
   copy at 25, so a fade above them wiped the cards out mid-frame instead of
   easing the background — it cut them in half. At 5 it sits over .fold-bg
   (z-index auto) and under everything that matters.

   420px with eased stops rather than 180px linear: over a colour this dark a
   straight ramp reads as a band with a top edge. Most of the travel now
   happens in the last third. */
.track-m:not(.l)::after {
  bottom: 0;
  /* 900px, a full viewport of travel. At 420 the change still happened inside
     half a screen, which over a colour this dark still reads as an event
     rather than a drift. The track is 1440px tall, so this spreads it across
     roughly the last two thirds of the section. */
  height: 900px;
  z-index: 5;
  background-image: linear-gradient(
    to bottom,
    rgba(255, 255, 255, 0) 0%,
    rgba(255, 255, 255, 0.02) 25%,
    rgba(255, 255, 255, 0.07) 45%,
    rgba(255, 255, 255, 0.18) 62%,
    rgba(255, 255, 255, 0.38) 76%,
    rgba(255, 255, 255, 0.66) 88%,
    rgba(255, 255, 255, 0.88) 95%,
    rgb(255, 255, 255) 100%
  );
}

.track-l::before {
  top: 0;
  height: 260px;
  z-index: 5;
  background-image: linear-gradient(
    to bottom,
    rgb(255, 255, 255) 0%,
    rgba(255, 255, 255, 0.62) 30%,
    rgba(255, 255, 255, 0.28) 55%,
    rgba(255, 255, 255, 0.08) 78%,
    rgba(255, 255, 255, 0) 100%
  );
}