/* ==================================================
   SOL TAMARGO — EXPERIENCE PAGES
   The Artist / Fearless / Flow
================================================== */


/* ==================================================
   VARIABLES
================================================== */

:root {
  --gold: #f2aa52;
  --gold-rgb: 242, 170, 82;

  --white: #ffffff;
  --dark: #05080b;
  --dark-soft: #08111b;
  --dark-panel: #0a0e13;

  --body-text: rgba(255, 255, 255, .72);
  --body-text-soft: rgba(255, 255, 255, .56);

  --border-gold: rgba(var(--gold-rgb), .34);
  --border-soft: rgba(255, 255, 255, .10);

  --ease: cubic-bezier(.19, 1, .22, 1);
}


/* ==================================================
   RESET
================================================== */

* {
  box-sizing: border-box;
}

html {
  scroll-behavior: smooth;
}

body {
  margin: 0;

  background: var(--dark);
  color: var(--white);

  font-family: "Montserrat", sans-serif;

  overflow-x: hidden;
}

body.no-scroll {
  overflow: hidden;
}

img {
  max-width: 100%;
}

figure {
  margin: 0;
}

a {
  color: inherit;
}

button,
input,
textarea,
select {
  font: inherit;
}


/* ==================================================
   SHARED TYPOGRAPHY
================================================== */

.experience-eyebrow,
.experience-label {
  display: block;

  margin-bottom: 22px;

  font-size: .7rem;
  font-weight: 300;
  line-height: 1.4;

  letter-spacing: .32em;
  text-transform: uppercase;

  color: var(--gold);
}

.experience-heading {
  margin: 0 0 30px;

  font-size: clamp(2.2rem, 4.7vw, 5.3rem);
  font-weight: 100;
  line-height: 1.04;

  letter-spacing: .035em;

  color: rgba(255, 255, 255, .94);
}

.experience-page p {
  font-size: clamp(.94rem, 1.05vw, 1.05rem);
  font-weight: 200;
  line-height: 1.85;

  color: var(--body-text);
}

.experience-lead {
  margin: 0 0 26px;

  font-size: clamp(1.25rem, 2vw, 1.8rem) !important;
  font-weight: 200 !important;
  line-height: 1.5 !important;

  color: rgba(255, 255, 255, .95) !important;
}


/* ==================================================
   MAIN BUTTON
================================================== */

.initiation-button {
  display: inline-flex;
  align-items: center;
  justify-content: center;

  min-height: 48px;

  padding: 14px 34px;

  border: 1px solid rgba(var(--gold-rgb), .68);

  background: transparent;
  color: var(--white);

  font-size: .7rem;
  font-weight: 300;
  line-height: 1;

  letter-spacing: .22em;
  text-decoration: none;
  text-transform: uppercase;

  cursor: pointer;

  transition:
    background .45s ease,
    border-color .45s ease,
    color .45s ease,
    transform .45s var(--ease);
}

.initiation-button:hover,
.initiation-button:focus-visible {
  border-color: var(--gold);

  background: var(--gold);
  color: var(--dark);

  transform: translateY(-3px);
}


/* ==================================================
   PAGE NAVIGATION
================================================== */

.experience-nav {
  position: fixed;
  z-index: 100;

  top: 0;
  left: 0;
  right: 0;

  min-height: 86px;

  display: grid;
  grid-template-columns: 90px 1fr auto;
  align-items: center;

  padding: 0 42px;

  background: rgba(5, 8, 11, .62);

  border-bottom: 1px solid rgba(var(--gold-rgb), .16);

  backdrop-filter: blur(16px);
  -webkit-backdrop-filter: blur(16px);

  transition:
    min-height .45s ease,
    background .45s ease,
    transform .45s var(--ease);
}

.experience-nav.is-scrolled {
  min-height: 72px;

  background: rgba(5, 8, 11, .9);
}

.experience-nav.is-hidden {
  transform: translateY(-100%);
}


/* LOGO */

.experience-nav-logo {
  width: 58px;
  height: 58px;

  display: flex;
  align-items: center;
  justify-content: center;

  opacity: .9;

  transition:
    opacity .35s ease,
    transform .45s var(--ease);
}

.experience-nav-logo:hover {
  opacity: 1;
  transform: scale(1.05);
}

.experience-nav-logo img {
  width: 100%;
  height: 100%;

  object-fit: contain;

  filter: drop-shadow(
    0 0 14px rgba(var(--gold-rgb), .24)
  );
}


/* LINKS */

.experience-nav-links {
  display: flex;
  align-items: center;
  justify-content: center;

  gap: clamp(26px, 4vw, 62px);
}

.experience-nav-links a,
.experience-nav-back {
  position: relative;

  padding: 10px 2px;

  font-size: .65rem;
  font-weight: 300;

  letter-spacing: .18em;
  text-decoration: none;
  text-transform: uppercase;

  color: rgba(255, 255, 255, .68);

  transition:
    color .35s ease,
    opacity .35s ease;
}

.experience-nav-links a::after,
.experience-nav-back::after {
  content: "";

  position: absolute;

  left: 0;
  right: 0;
  bottom: 4px;

  height: 1px;

  background: var(--gold);

  transform: scaleX(0);
  transform-origin: right center;

  transition: transform .45s var(--ease);
}

.experience-nav-links a:hover,
.experience-nav-links a.is-active,
.experience-nav-back:hover {
  color: var(--gold);
}

.experience-nav-links a:hover::after,
.experience-nav-links a.is-active::after,
.experience-nav-back:hover::after {
  transform: scaleX(1);
  transform-origin: left center;
}


/* ==================================================
   HERO
================================================== */

.experience-hero {
  position: relative;

  width: 100%;
  min-height: 100vh;
  min-height: 100svh;

  display: flex;
  align-items: center;
  justify-content: center;

  overflow: hidden;

  background: var(--dark);
}

.experience-hero-bg {
  position: absolute;
  inset: -4%;

  background-image: url("../img/the-artist/the-artist-hero.jpg");
  background-size: cover;
  background-position: center;
  background-repeat: no-repeat;

  transform: scale(1.03);

  animation: experienceHeroBreath 18s ease-in-out infinite alternate;

  will-change: transform;
}

@keyframes experienceHeroBreath {
  from {
    transform: scale(1.03);
  }

  to {
    transform: scale(1.09);
  }
}

.experience-hero-overlay {
  position: absolute;
  inset: 0;

  background:
    radial-gradient(
      circle at 50% 42%,
      rgba(0, 0, 0, .08),
      rgba(0, 0, 0, .4) 52%,
      rgba(0, 0, 0, .78) 100%
    ),
    linear-gradient(
      to bottom,
      rgba(0, 0, 0, .32),
      rgba(0, 0, 0, .12) 42%,
      rgba(0, 0, 0, .72)
    );
}

.experience-hero-content {
  position: relative;
  z-index: 2;

  width: min(980px, 88vw);

  padding: 130px 20px 110px;

  text-align: center;
}

.experience-title {
  margin: 0;

  font-size: clamp(4rem, 11vw, 10rem);
  font-weight: 100;
  line-height: .88;

  letter-spacing: .1em;
  text-transform: uppercase;

  color: rgba(255, 255, 255, .97);

  text-shadow:
    0 12px 36px rgba(0, 0, 0, .9),
    0 30px 90px rgba(0, 0, 0, .72);
}

.experience-subtitle {
  margin: 28px 0 0;

  font-size: clamp(1.2rem, 2.3vw, 2.1rem) !important;
  font-weight: 200 !important;
  line-height: 1.4 !important;

  letter-spacing: .08em;

  color: rgba(var(--gold-rgb), .95) !important;
}

.experience-opening {
  margin: 20px auto 0;

  font-size: clamp(.82rem, 1vw, 1rem) !important;
  font-weight: 300 !important;

  letter-spacing: .24em;
  text-transform: uppercase;

  color: rgba(255, 255, 255, .72) !important;
}


/* SCROLL INDICATOR */

.experience-scroll {
  position: absolute;
  z-index: 4;

  left: 50%;
  bottom: 36px;

  display: flex;
  flex-direction: column;
  align-items: center;

  gap: 14px;

  transform: translateX(-50%);

  font-size: .6rem;
  font-weight: 300;

  letter-spacing: .3em;
  text-decoration: none;
  text-transform: uppercase;

  color: rgba(255, 255, 255, .65);
}

.experience-scroll-line {
  display: block;

  width: 1px;
  height: 48px;

  background:
    linear-gradient(
      to bottom,
      var(--gold),
      rgba(var(--gold-rgb), 0)
    );

  transform-origin: top;

  animation: experienceScrollLine 2.3s ease-in-out infinite;
}

@keyframes experienceScrollLine {
  0% {
    transform: scaleY(.25);
    opacity: .2;
  }

  50% {
    transform: scaleY(1);
    opacity: 1;
  }

  100% {
    transform: scaleY(.25);
    opacity: .2;
  }
}


/* ==================================================
   STORY
================================================== */

.experience-story {
  position: relative;

  padding: clamp(120px, 14vw, 210px) 7vw;

  background:
    radial-gradient(
      circle at 20% 40%,
      rgba(var(--gold-rgb), .045),
      transparent 40%
    ),
    var(--dark);
}

.experience-story-inner {
  width: min(1260px, 100%);

  margin: auto;

  display: grid;
  grid-template-columns: minmax(320px, .92fr) minmax(380px, 1fr);

  gap: clamp(60px, 8vw, 130px);

  align-items: center;
}


/* FRAME */

.experience-frame {
  position: relative;

  padding: 10px;

  border: 1px solid var(--gold);
}

.experience-frame::after {
  content: "";

  position: absolute;
  inset: 7px;

  z-index: 2;

  border: 1px solid rgba(var(--gold-rgb), .38);

  pointer-events: none;
}

.experience-story-image {
  overflow: hidden;
}

.experience-story-image img {
  width: 100%;
  aspect-ratio: 4 / 5.2;

  display: block;

  object-fit: cover;
  object-position: center;

  transition: transform 1.5s var(--ease);
}

.experience-story-image:hover img {
  transform: scale(1.035);
}

.experience-story-content {
  max-width: 570px;
}

.experience-story-content p {
  margin: 0 0 24px;
}


/* ==================================================
   VISUAL PAUSE
================================================== */

.experience-visual-pause {
  position: relative;

  width: 100%;
  min-height: 95vh;

  overflow: hidden;

  background: var(--dark);
}

.experience-visual-pause-image {
  position: absolute;
  inset: 0;
}

.experience-visual-pause-image::after {
  content: "";

  position: absolute;
  inset: 0;

  background:
    linear-gradient(
      to bottom,
      rgba(0, 0, 0, .22),
      rgba(0, 0, 0, .02) 48%,
      rgba(0, 0, 0, .4)
    );
}

.experience-visual-pause-image img {
  width: 100%;
  height: 100%;

  display: block;

  object-fit: cover;
  object-position: center;

  transform: scale(1.02);
}


/* ==================================================
   IMMERSION
================================================== */

.experience-immersion {
  position: relative;

  padding: clamp(120px, 14vw, 210px) 7vw;

  overflow: hidden;

  background: var(--dark-soft);

  border-top: 1px solid rgba(var(--gold-rgb), .12);
  border-bottom: 1px solid rgba(var(--gold-rgb), .12);
}

.experience-immersion::before {
  content: "";

  position: absolute;

  top: 0;
  bottom: 0;
  left: 50%;

  width: 1px;

  background:
    linear-gradient(
      to bottom,
      transparent,
      rgba(var(--gold-rgb), .22),
      transparent
    );
}

.experience-immersion-inner {
  position: relative;
  z-index: 2;

  width: min(1180px, 100%);

  margin: auto;

  display: grid;
  grid-template-columns: 1fr 1fr;

  gap: clamp(80px, 10vw, 150px);
}

.experience-immersion-heading {
  align-self: start;
}

.experience-immersion-copy {
  max-width: 530px;
}

.experience-immersion-copy p {
  margin: 0 0 28px;
}

.experience-highlight {
  position: relative;

  margin-top: 42px !important;

  padding: 30px 0 0 36px;

  font-size: clamp(1.1rem, 1.55vw, 1.45rem) !important;
  font-weight: 200 !important;
  line-height: 1.6 !important;

  color: rgba(255, 255, 255, .93) !important;
}

.experience-highlight::before {
  content: "";

  position: absolute;

  top: 0;
  left: 0;
  bottom: 0;

  width: 1px;

  background: var(--gold);
}


/* ==================================================
   FEATURE
================================================== */

.experience-feature {
  position: relative;

  padding: clamp(110px, 13vw, 190px) 7vw;

  background: var(--dark);
}

.experience-feature-inner {
  width: min(1320px, 100%);

  margin: auto;

  display: grid;
  grid-template-columns: minmax(400px, 1.12fr) minmax(340px, .78fr);

  gap: clamp(60px, 8vw, 120px);

  align-items: center;
}

.experience-feature-image {
  position: relative;

  overflow: hidden;
}

.experience-feature-image::after {
  content: "";

  position: absolute;

  inset: 14px;

  border: 1px solid rgba(var(--gold-rgb), .42);

  pointer-events: none;
}

.experience-feature-image img {
  width: 100%;
  aspect-ratio: 1.3 / 1;

  display: block;

  object-fit: cover;
  object-position: center;

  transition: transform 1.5s var(--ease);
}

.experience-feature-image:hover img {
  transform: scale(1.035);
}

.experience-feature-content {
  max-width: 520px;
}

.experience-feature-content p {
  margin: 0 0 24px;
}


/* ==================================================
   STATEMENT
================================================== */

.experience-statement {
  position: relative;

  min-height: 82vh;

  display: flex;
  align-items: center;
  justify-content: center;

  padding: 130px 8vw;

  overflow: hidden;

  background:
    radial-gradient(
      circle at center,
      rgba(var(--gold-rgb), .08),
      transparent 42%
    ),
    #070a0e;
}

.experience-statement::before {
  content: "";

  position: absolute;

  top: 0;
  left: 50%;

  width: 1px;
  height: 90px;

  background:
    linear-gradient(
      to bottom,
      var(--gold),
      transparent
    );
}

.experience-statement-inner {
  position: relative;
  z-index: 2;

  width: min(1050px, 90vw);

  text-align: center;
}

.experience-statement-mark {
  display: block;

  height: 70px;

  margin-bottom: 24px;

  font-family: Georgia, serif;
  font-size: 7rem;
  font-weight: 400;
  line-height: 1;

  color: rgba(var(--gold-rgb), .6);
}

.experience-statement blockquote {
  margin: 0;

  font-size: clamp(2rem, 5vw, 5.8rem);
  font-weight: 100;
  line-height: 1.22;

  letter-spacing: .015em;

  color: rgba(255, 255, 255, .92);
}


/* ==================================================
   GALLERY
================================================== */

.experience-gallery {
  position: relative;

  padding: clamp(120px, 14vw, 200px) 5vw;

  background: var(--dark);
}

.experience-gallery-header {
  width: min(820px, 90vw);

  margin: 0 auto 90px;

  text-align: center;
}

.experience-gallery-grid {
  width: min(1450px, 100%);

  margin: auto;

  display: grid;
  grid-template-columns: repeat(12, 1fr);

  grid-auto-rows: minmax(130px, 9vw);

  gap: clamp(10px, 1.4vw, 24px);
}

.experience-gallery-item {
  position: relative;

  grid-column: span 4;
  grid-row: span 3;

  overflow: hidden;

  background: var(--dark-panel);
}

.experience-gallery-item:nth-child(2) {
  grid-column: span 4;
  grid-row: span 2;
}

.experience-gallery-item:nth-child(3) {
  grid-column: span 4;
  grid-row: span 2;
}

.experience-gallery-item:nth-child(5),
.experience-gallery-item:nth-child(6) {
  grid-column: span 4;
  grid-row: span 3;
}

.experience-gallery-item-large {
  grid-column: span 8;
  grid-row: span 5;
}

.experience-gallery-item-wide {
  grid-column: span 8;
  grid-row: span 3;
}

.experience-gallery-item::after {
  content: "";

  position: absolute;
  inset: 0;

  background:
    linear-gradient(
      to bottom,
      transparent 55%,
      rgba(0, 0, 0, .2)
    );

  pointer-events: none;
}

.experience-gallery-item img {
  width: 100%;
  height: 100%;

  display: block;

  object-fit: cover;
  object-position: center;

  transition:
    transform 1.3s var(--ease),
    filter 1.3s var(--ease);
}

.experience-gallery-item:hover img {
  transform: scale(1.045);
  filter: brightness(.88);
}


/* ==================================================
   INVITATION
================================================== */

.experience-invitation {
  position: relative;

  min-height: 100vh;
  min-height: 100svh;

  display: flex;
  align-items: center;
  justify-content: center;

  overflow: hidden;

  text-align: center;

  background: var(--dark);
}

.experience-invitation-bg {
  position: absolute;
  inset: -5%;

  background-image: url("../img/the-artist/the-artist-closing.jpg");
  background-size: cover;
  background-position: center;
  background-repeat: no-repeat;

  transform: scale(1.05);
}

.experience-invitation-overlay {
  position: absolute;
  inset: 0;

  background:
    radial-gradient(
      circle at center,
      rgba(0, 0, 0, .28),
      rgba(0, 0, 0, .76) 70%
    ),
    linear-gradient(
      to bottom,
      rgba(0, 0, 0, .45),
      rgba(0, 0, 0, .7)
    );
}

.experience-invitation-content {
  position: relative;
  z-index: 2;

  width: min(800px, 88vw);

  padding: 120px 20px;
}

.experience-invitation-content h2 {
  margin: 0 auto 30px;

  font-size: clamp(2.8rem, 6vw, 6.4rem);
  font-weight: 100;
  line-height: 1.02;

  letter-spacing: .02em;

  color: rgba(255, 255, 255, .96);

  text-shadow:
    0 10px 35px rgba(0, 0, 0, .9);
}

.experience-invitation-content p {
  margin: 0 auto 42px;

  color: rgba(255, 255, 255, .78);
}


/* ==================================================
   FOOTER
================================================== */

.experience-footer {
  position: relative;

  min-height: 430px;

  padding: 90px 7vw 48px;

  display: flex;
  flex-direction: column;
  align-items: center;

  text-align: center;

  background: #030507;

  border-top: 1px solid rgba(var(--gold-rgb), .16);
}

.experience-footer-logo {
  width: 88px;
  height: 88px;

  margin-bottom: 30px;

  opacity: .78;

  transition:
    opacity .35s ease,
    transform .45s var(--ease);
}

.experience-footer-logo:hover {
  opacity: 1;
  transform: scale(1.05);
}

.experience-footer-logo img {
  width: 100%;
  height: 100%;

  object-fit: contain;
}

.experience-footer p {
  margin: 0 0 42px;

  font-size: .8rem;
  line-height: 1.8;

  letter-spacing: .13em;
  text-transform: uppercase;

  color: rgba(255, 255, 255, .58);
}

.experience-footer-links {
  display: flex;
  align-items: center;
  justify-content: center;

  flex-wrap: wrap;

  gap: 18px 36px;

  margin-bottom: 65px;
}

.experience-footer-links a {
  font-size: .62rem;
  font-weight: 300;

  letter-spacing: .2em;
  text-decoration: none;
  text-transform: uppercase;

  color: rgba(255, 255, 255, .5);

  transition: color .35s ease;
}

.experience-footer-links a:hover {
  color: var(--gold);
}

.experience-footer-copy {
  margin-top: auto;

  font-size: .58rem;
  font-weight: 300;

  letter-spacing: .2em;
  text-transform: uppercase;

  color: rgba(255, 255, 255, .32);
}


/* ==================================================
   REVEAL ANIMATIONS
================================================== */

.reveal-item {
  opacity: 0;

  transform: translateY(42px);

  transition:
    opacity 1.1s ease,
    transform 1.1s var(--ease);
}

.reveal-item.is-visible {
  opacity: 1;

  transform: translateY(0);
}

.reveal-image {
  opacity: 0;

  transform: scale(1.04);

  transition:
    opacity 1.3s ease,
    transform 1.8s var(--ease);
}

.reveal-image.is-visible {
  opacity: 1;

  transform: scale(1);
}


/* ==================================================
   TABLET
================================================== */

@media (max-width: 1050px) {

  .experience-nav {
    grid-template-columns: 70px 1fr auto;

    padding: 0 24px;
  }

  .experience-nav-links {
    gap: 26px;
  }

  .experience-nav-links a {
    font-size: .58rem;
  }

  .experience-story-inner,
  .experience-feature-inner {
    gap: 60px;
  }

  .experience-immersion-inner {
    gap: 70px;
  }

}


/* ==================================================
   MOBILE
================================================== */

@media (max-width: 768px) {

  /* TYPOGRAPHY */

  .experience-eyebrow,
  .experience-label {
    margin-bottom: 18px;

    font-size: .56rem;

    letter-spacing: .26em;
  }

  .experience-heading {
    margin-bottom: 24px;

    font-size: clamp(2rem, 10vw, 3.5rem);
    line-height: 1.08;
  }

  .experience-page p {
    font-size: .88rem;
    line-height: 1.75;
  }


  /* NAV */

  .experience-nav {
    min-height: 74px;

    grid-template-columns: 1fr auto;

    padding: 0 18px;
  }

  .experience-nav-logo {
    width: 52px;
    height: 52px;
  }

  .experience-nav-links {
    display: none;
  }

  .experience-nav-back {
    font-size: .55rem;
    letter-spacing: .14em;
  }


  /* HERO */

  .experience-hero-content {
    width: min(92vw, 620px);

    padding-top: 120px;
  }

  .experience-title {
    font-size: clamp(3.3rem, 18vw, 6rem);
    line-height: .9;

    letter-spacing: .055em;
  }

  .experience-subtitle {
    margin-top: 24px;

    font-size: clamp(1.05rem, 6vw, 1.45rem) !important;
  }

  .experience-opening {
    font-size: .68rem !important;

    letter-spacing: .19em;
  }

  .experience-scroll {
    bottom: 24px;

    font-size: .52rem;
  }

  .experience-scroll-line {
    height: 34px;
  }


  /* STORY */

  .experience-story {
    padding: 105px 7vw;
  }

  .experience-story-inner {
    grid-template-columns: 1fr;

    gap: 60px;
  }

  .experience-story-image {
    width: min(88vw, 470px);

    margin: auto;
  }

  .experience-story-content {
    width: min(88vw, 560px);

    margin: auto;

    text-align: left;
  }


  /* VISUAL PAUSE */

  .experience-visual-pause {
    min-height: 72vh;
  }


  /* IMMERSION */

  .experience-immersion {
    padding: 110px 7vw;
  }

  .experience-immersion::before {
    display: none;
  }

  .experience-immersion-inner {
    grid-template-columns: 1fr;

    gap: 36px;
  }

  .experience-immersion-heading,
  .experience-immersion-copy {
    width: min(88vw, 560px);

    margin: auto;
  }

  .experience-highlight {
    padding-left: 24px;

    font-size: 1.05rem !important;
  }


  /* FEATURE */

  .experience-feature {
    padding: 105px 7vw;
  }

  .experience-feature-inner {
    grid-template-columns: 1fr;

    gap: 60px;
  }

  .experience-feature-image,
  .experience-feature-content {
    width: min(88vw, 580px);

    margin: auto;
  }

  .experience-feature-image img {
    aspect-ratio: 4 / 4.8;
  }


  /* STATEMENT */

  .experience-statement {
    min-height: 70vh;

    padding: 120px 7vw;
  }

  .experience-statement-mark {
    height: 46px;

    font-size: 5rem;
  }

  .experience-statement blockquote {
    font-size: clamp(1.8rem, 9vw, 3rem);
    line-height: 1.3;
  }


  /* GALLERY */

  .experience-gallery {
    padding: 110px 5vw;
  }

  .experience-gallery-header {
    margin-bottom: 60px;
  }

  .experience-gallery-grid {
    grid-template-columns: 1fr;

    grid-auto-rows: auto;

    gap: 14px;
  }

  .experience-gallery-item,
  .experience-gallery-item:nth-child(2),
  .experience-gallery-item:nth-child(3),
  .experience-gallery-item:nth-child(5),
  .experience-gallery-item:nth-child(6),
  .experience-gallery-item-large,
  .experience-gallery-item-wide {
    grid-column: auto;
    grid-row: auto;
  }

  .experience-gallery-item img {
    height: auto;
    aspect-ratio: 4 / 5;

    object-fit: cover;
  }

  .experience-gallery-item-large img,
  .experience-gallery-item-wide img {
    aspect-ratio: 4 / 3;
  }


  /* INVITATION */

  .experience-invitation-content {
    padding: 110px 18px;
  }

  .experience-invitation-content h2 {
    font-size: clamp(2.3rem, 11vw, 4rem);
    line-height: 1.1;
  }


  /* FOOTER */

  .experience-footer {
    min-height: 400px;

    padding: 80px 7vw 38px;
  }

  .experience-footer-links {
    flex-direction: column;

    gap: 20px;

    margin-bottom: 55px;
  }

}


/* ==================================================
   SMALL MOBILE
================================================== */

@media (max-width: 430px) {

  .experience-title {
    font-size: clamp(3rem, 17vw, 4.5rem);
  }

  .experience-nav-back {
    max-width: 120px;

    text-align: right;
  }

  .experience-story,
  .experience-immersion,
  .experience-feature,
  .experience-gallery {
    padding-left: 20px;
    padding-right: 20px;
  }

  .initiation-button {
    width: 100%;

    max-width: 300px;

    padding-left: 20px;
    padding-right: 20px;
  }

}


/* ==================================================
   REDUCED MOTION
================================================== */

@media (prefers-reduced-motion: reduce) {

  html {
    scroll-behavior: auto;
  }

  .experience-hero-bg,
  .experience-scroll-line {
    animation: none;
  }

  .reveal-item,
  .reveal-image {
    opacity: 1;

    transform: none;

    transition: none;
  }

  .experience-story-image img,
  .experience-feature-image img,
  .experience-gallery-item img {
    transition: none;
  }

}

/* ==================================================
   FEARLESS — EXPERIENCE PAGE
================================================== */


/* ==================================================
   FEARLESS HERO
================================================== */

.fearless-hero-bg {
  background-image:
    url("../img/fearless/fearless-hero.jpg");

  background-position: center;
}

.fearless-hero .experience-hero-overlay {
  background:
    radial-gradient(
      circle at 50% 42%,
      rgba(0,0,0,.04),
      rgba(0,0,0,.34) 48%,
      rgba(0,0,0,.86) 100%
    ),
    linear-gradient(
      to bottom,
      rgba(0,0,0,.44),
      rgba(0,0,0,.12) 38%,
      rgba(0,0,0,.82)
    );
}

.fearless-hero .experience-title {
  text-shadow:
    0 12px 34px rgba(0,0,0,.95),
    0 35px 100px rgba(0,0,0,.88);
}

.fearless-hero .experience-subtitle {
  color: rgba(var(--gold-rgb), .98) !important;
}


/* ==================================================
   FEARLESS STORY
================================================== */

.fearless-page .experience-story {
  background:
    radial-gradient(
      circle at 18% 45%,
      rgba(var(--gold-rgb), .045),
      transparent 38%
    ),
    linear-gradient(
      135deg,
      #05080b,
      #070c11
    );
}

.fearless-page .experience-story-image img {
  object-position: center;
}


/* ==================================================
   VISUAL DESCENT
================================================== */

.fearless-page .experience-visual-pause {
  min-height: 100vh;
}

.fearless-page
.experience-visual-pause-image::after {
  background:
    linear-gradient(
      to bottom,
      rgba(0,0,0,.48),
      rgba(0,0,0,.04) 45%,
      rgba(0,0,0,.66)
    ),
    radial-gradient(
      circle at center,
      transparent 30%,
      rgba(0,0,0,.42)
    );
}


/* ==================================================
   THE JOURNEY
================================================== */

.fearless-page .experience-immersion {
  background:
    radial-gradient(
      circle at 72% 42%,
      rgba(var(--gold-rgb), .045),
      transparent 38%
    ),
    #081018;
}

.fearless-page
.experience-immersion-copy
.experience-highlight {
  color: rgba(255,255,255,.96) !important;
}


/* ==================================================
   FEARLESS PORTALS
================================================== */

.fearless-portals {
  position: relative;

  width: 100%;

  background: #030507;
}


/* INDIVIDUAL PORTAL */

.fearless-portal {
  position: relative;

  min-height: 100vh;
  min-height: 100svh;

  display: flex;
  align-items: center;

  overflow: hidden;

  background: #030507;

  border-top:
    1px solid rgba(var(--gold-rgb), .12);
}

.fearless-portal-image {
  position: absolute;
  inset: 0;
}

.fearless-portal-image img {
  width: 100%;
  height: 100%;

  display: block;

  object-fit: cover;
  object-position: center;

  transform: scale(1.03);

  transition:
    transform 2s var(--ease),
    filter 1.4s ease;
}

.fearless-portal:hover
.fearless-portal-image img {
  transform: scale(1.075);
}

.fearless-portal-overlay {
  position: absolute;
  inset: 0;

  background:
    linear-gradient(
      90deg,
      rgba(0,0,0,.86) 0%,
      rgba(0,0,0,.62) 38%,
      rgba(0,0,0,.18) 72%,
      rgba(0,0,0,.42) 100%
    ),
    linear-gradient(
      to bottom,
      rgba(0,0,0,.32),
      transparent 40%,
      rgba(0,0,0,.62)
    );
}

.fearless-portal-content {
  position: relative;
  z-index: 2;

  width: min(700px, 80vw);

  margin-left: clamp(7vw, 10vw, 170px);

  padding: 150px 0 120px;
}

.fearless-portal-content h2 {
  max-width: 780px;

  margin: 0 0 34px;

  font-size: clamp(3.5rem, 8vw, 8rem);
  font-weight: 100;
  line-height: .9;

  letter-spacing: .055em;
  text-transform: uppercase;

  color: rgba(255,255,255,.96);

  text-shadow:
    0 10px 28px rgba(0,0,0,.96),
    0 30px 90px rgba(0,0,0,.82);
}

.fearless-portal-content p {
  max-width: 590px;

  margin: 0 0 22px;

  font-size: clamp(.95rem, 1.15vw, 1.1rem);
  font-weight: 200;
  line-height: 1.85;

  color: rgba(255,255,255,.84);

  text-shadow:
    0 4px 18px rgba(0,0,0,.95);
}


/* ALTERNATE PORTAL ALIGNMENT */

.fearless-portal:nth-child(even) {
  justify-content: flex-end;
}

.fearless-portal:nth-child(even)
.fearless-portal-overlay {
  background:
    linear-gradient(
      270deg,
      rgba(0,0,0,.86) 0%,
      rgba(0,0,0,.62) 38%,
      rgba(0,0,0,.18) 72%,
      rgba(0,0,0,.42) 100%
    ),
    linear-gradient(
      to bottom,
      rgba(0,0,0,.32),
      transparent 40%,
      rgba(0,0,0,.62)
    );
}

.fearless-portal:nth-child(even)
.fearless-portal-content {
  margin-left: 0;
  margin-right: clamp(7vw, 10vw, 170px);

  text-align: right;
}

.fearless-portal:nth-child(even)
.fearless-portal-content p {
  margin-left: auto;
}


/* INDIVIDUAL IMAGE POSITIONING */

.fearless-portal:nth-child(1)
.fearless-portal-image img {
  object-position: center;
}

.fearless-portal:nth-child(2)
.fearless-portal-image img {
  object-position: center;
}

.fearless-portal:nth-child(3)
.fearless-portal-image img {
  object-position: center;
}


/* ==================================================
   FEARLESS STATEMENT
================================================== */

.fearless-statement {
  min-height: 88vh;

  background:
    radial-gradient(
      circle at center,
      rgba(var(--gold-rgb), .09),
      transparent 38%
    ),
    linear-gradient(
      135deg,
      #030507,
      #091018
    );
}

.fearless-statement blockquote {
  max-width: 1100px;

  margin-left: auto;
  margin-right: auto;
}


/* ==================================================
   GREAT MOTHER CLOSING STORY
================================================== */

.fearless-closing-story {
  position: relative;

  min-height: 92vh;

  display: flex;
  align-items: center;
  justify-content: center;

  padding: 140px 8vw;

  overflow: hidden;

  background:
    radial-gradient(
      circle at center,
      rgba(var(--gold-rgb), .055),
      transparent 42%
    ),
    #05080b;

  border-top:
    1px solid rgba(var(--gold-rgb), .12);
}

.fearless-closing-story::before {
  content: "";

  position: absolute;

  top: 0;
  left: 50%;

  width: 1px;
  height: 110px;

  background:
    linear-gradient(
      to bottom,
      var(--gold),
      transparent
    );
}

.fearless-closing-story-inner {
  position: relative;
  z-index: 2;

  width: min(930px, 90vw);

  text-align: center;
}

.fearless-closing-lines {
  margin-top: 48px;
}

.fearless-closing-lines p {
  margin: 0 0 26px;

  font-size: clamp(1.7rem, 3.5vw, 4rem);
  font-weight: 100;
  line-height: 1.25;

  letter-spacing: .015em;

  color: rgba(255,255,255,.9);
}

.fearless-closing-lines p:last-child {
  margin-top: 48px;

  color: var(--gold);
}


/* ==================================================
   FEARLESS INVITATION
================================================== */

.fearless-invitation-bg {
  background-image:
    url("../img/fearless/fearless-closing.jpg");

  background-position: center;
}

.fearless-invitation
.experience-invitation-overlay {
  background:
    radial-gradient(
      circle at center,
      rgba(0,0,0,.18),
      rgba(0,0,0,.72) 65%
    ),
    linear-gradient(
      to bottom,
      rgba(0,0,0,.42),
      rgba(0,0,0,.82)
    );
}

.fearless-invitation
.experience-invitation-content h2 {
  max-width: 750px;
}


/* ==================================================
   FEARLESS REVEAL SUPPORT
================================================== */

.fearless-portal-content,
.fearless-closing-story-inner {
  opacity: 0;

  transform: translateY(45px);

  transition:
    opacity 1.15s ease,
    transform 1.15s var(--ease);
}

.fearless-portal-content.is-visible,
.fearless-closing-story-inner.is-visible {
  opacity: 1;

  transform: translateY(0);
}


/* ==================================================
   FEARLESS TABLET
================================================== */

@media (max-width: 1050px) {

  .fearless-portal-content {
    width: min(620px, 78vw);

    margin-left: 7vw;
  }

  .fearless-portal:nth-child(even)
  .fearless-portal-content {
    margin-right: 7vw;
  }

  .fearless-portal-content h2 {
    font-size:
      clamp(3.2rem, 9vw, 6.5rem);
  }

}


/* ==================================================
   FEARLESS MOBILE
================================================== */

@media (max-width: 768px) {

  .fearless-page
  .experience-visual-pause {
    min-height: 78vh;
  }


  /* PORTALS */

  .fearless-portal {
    min-height: 88vh;

    align-items: flex-end;
  }

  .fearless-portal-overlay,
  .fearless-portal:nth-child(even)
  .fearless-portal-overlay {
    background:
      linear-gradient(
        to bottom,
        rgba(0,0,0,.16) 0%,
        rgba(0,0,0,.22) 38%,
        rgba(0,0,0,.9) 82%,
        rgba(0,0,0,.98) 100%
      );
  }

  .fearless-portal-content,
  .fearless-portal:nth-child(even)
  .fearless-portal-content {
    width: 100%;

    margin: 0;

    padding:
      130px 24px 90px;

    text-align: left;
  }

  .fearless-portal-content h2 {
    max-width: 92vw;

    margin-bottom: 26px;

    font-size:
      clamp(2.8rem, 14vw, 5rem);

    line-height: .92;

    letter-spacing: .04em;
  }

  .fearless-portal-content p,
  .fearless-portal:nth-child(even)
  .fearless-portal-content p {
    max-width: 560px;

    margin-left: 0;
    margin-right: 0;

    font-size: .88rem;
    line-height: 1.72;
  }


  /* GREAT MOTHER */

  .fearless-closing-story {
    min-height: 80vh;

    padding: 120px 24px 100px;
  }

  .fearless-closing-lines {
    margin-top: 38px;
  }

  .fearless-closing-lines p {
    margin-bottom: 20px;

    font-size:
      clamp(1.45rem, 7vw, 2.5rem);

    line-height: 1.35;
  }

  .fearless-closing-lines p:last-child {
    margin-top: 36px;
  }

}


/* ==================================================
   FEARLESS SMALL MOBILE
================================================== */

@media (max-width: 430px) {

  .fearless-portal {
    min-height: 82vh;
  }

  .fearless-portal-content,
  .fearless-portal:nth-child(even)
  .fearless-portal-content {
    padding-left: 20px;
    padding-right: 20px;
  }

  .fearless-portal-content h2 {
    font-size:
      clamp(2.5rem, 13vw, 4rem);
  }

}


/* ==================================================
   FEARLESS REDUCED MOTION
================================================== */

@media (prefers-reduced-motion: reduce) {

  .fearless-portal-image img {
    transition: none;
  }

  .fearless-portal-content,
  .fearless-closing-story-inner {
    opacity: 1;

    transform: none;

    transition: none;
  }

}

/* ==================================================
   FLOW — EXPERIENCE PAGE
================================================== */


/* ==================================================
   FLOW COLOR ATMOSPHERE
================================================== */

.flow-page {
  --flow-deep: #06141a;
  --flow-blue: #0b2630;
  --flow-teal: #1b4a52;
  --flow-mist: rgba(214, 244, 240, .78);
}


/* ==================================================
   FLOW HERO
================================================== */

.flow-hero-bg {
  background-image:
    url("../img/flow/flow-hero.jpg");

  background-position: center;
}

.flow-hero .experience-hero-overlay {
  background:
    radial-gradient(
      circle at 50% 38%,
      rgba(255,255,255,.05),
      rgba(3,18,24,.18) 40%,
      rgba(2,10,14,.78) 100%
    ),
    linear-gradient(
      to bottom,
      rgba(2,12,17,.34),
      rgba(2,18,24,.06) 40%,
      rgba(2,10,14,.76)
    );
}

.flow-hero .experience-title {
  text-shadow:
    0 10px 30px rgba(0,0,0,.74),
    0 30px 90px rgba(0,0,0,.64);
}

.flow-hero .experience-subtitle {
  color: rgba(224, 246, 240, .94) !important;
}

.flow-hero .experience-opening {
  color: rgba(255,255,255,.68) !important;
}

.flow-hero .experience-scroll-line {
  background:
    linear-gradient(
      to bottom,
      rgba(224,246,240,.92),
      rgba(224,246,240,0)
    );
}


/* ==================================================
   FLOW STORY
================================================== */

.flow-story {
  background:
    radial-gradient(
      circle at 22% 44%,
      rgba(100,190,190,.08),
      transparent 38%
    ),
    linear-gradient(
      135deg,
      #061218,
      #081a20
    );
}

.flow-page .experience-frame {
  border-color: rgba(206, 238, 233, .7);
}

.flow-page .experience-frame::after {
  border-color: rgba(206, 238, 233, .26);
}

.flow-page .experience-eyebrow,
.flow-page .experience-label {
  color: rgba(214, 244, 240, .84);
}

.flow-page .experience-story-image img {
  object-position: center;
}


/* ==================================================
   FLOW VISUAL PAUSE
================================================== */

.flow-visual-pause {
  min-height: 100vh;
}

.flow-visual-pause
.experience-visual-pause-image::after {
  background:
    linear-gradient(
      to bottom,
      rgba(1,10,14,.38),
      rgba(1,10,14,.03) 46%,
      rgba(1,10,14,.56)
    ),
    radial-gradient(
      circle at center,
      transparent 36%,
      rgba(3,16,22,.34)
    );
}

.flow-visual-pause
.experience-visual-pause-image img {
  transform: scale(1.04);
}


/* ==================================================
   FLOW IMMERSION
================================================== */

.flow-immersion {
  background:
    radial-gradient(
      circle at 76% 40%,
      rgba(139,214,207,.08),
      transparent 40%
    ),
    linear-gradient(
      135deg,
      #07171d,
      #0a242c
    );
}

.flow-immersion::before {
  background:
    linear-gradient(
      to bottom,
      transparent,
      rgba(207,239,234,.24),
      transparent
    );
}

.flow-page .experience-highlight::before {
  background: rgba(214,244,240,.76);
}


/* ==================================================
   FLOW ELEMENTS
================================================== */

.flow-element {
  position: relative;

  min-height: 100vh;
  min-height: 100svh;

  display: flex;
  align-items: center;

  overflow: hidden;

  background: var(--flow-deep);

  border-top:
    1px solid rgba(214,244,240,.10);
}

.flow-element-image {
  position: absolute;
  inset: 0;
}

.flow-element-image img {
  width: 100%;
  height: 100%;

  display: block;

  object-fit: cover;
  object-position: center;

  transform: scale(1.035);

  transition:
    transform 2.2s var(--ease),
    filter 1.4s ease;

  will-change: transform;
}

.flow-element:hover
.flow-element-image img {
  transform: scale(1.075);
}

.flow-element-overlay {
  position: absolute;
  inset: 0;

  background:
    linear-gradient(
      90deg,
      rgba(1,11,15,.84) 0%,
      rgba(3,22,28,.58) 38%,
      rgba(4,30,36,.18) 72%,
      rgba(2,12,16,.36) 100%
    ),
    linear-gradient(
      to bottom,
      rgba(1,10,14,.22),
      transparent 44%,
      rgba(1,10,14,.56)
    );
}

.flow-element-content {
  position: relative;
  z-index: 2;

  width: min(700px, 80vw);

  margin-left: clamp(7vw, 10vw, 170px);

  padding: 150px 0 120px;
}

.flow-element-content h2 {
  max-width: 760px;

  margin: 0 0 30px;

  font-size: clamp(3.2rem, 7vw, 7.5rem);
  font-weight: 100;
  line-height: .92;

  letter-spacing: .035em;

  color: rgba(255,255,255,.96);

  text-shadow:
    0 12px 32px rgba(0,0,0,.76),
    0 30px 90px rgba(0,0,0,.62);
}

.flow-element-content p {
  max-width: 590px;

  margin: 0;

  font-size: clamp(.94rem, 1.12vw, 1.08rem);
  font-weight: 200;
  line-height: 1.85;

  color: rgba(239,250,247,.82);

  text-shadow:
    0 4px 18px rgba(0,0,0,.72);
}


/* ALTERNATE ALIGNMENT */

.flow-element:nth-of-type(even) {
  justify-content: flex-end;
}

.flow-element:nth-of-type(even)
.flow-element-overlay {
  background:
    linear-gradient(
      270deg,
      rgba(1,11,15,.84) 0%,
      rgba(3,22,28,.58) 38%,
      rgba(4,30,36,.18) 72%,
      rgba(2,12,16,.36) 100%
    ),
    linear-gradient(
      to bottom,
      rgba(1,10,14,.22),
      transparent 44%,
      rgba(1,10,14,.56)
    );
}

.flow-element:nth-of-type(even)
.flow-element-content {
  margin-left: 0;
  margin-right: clamp(7vw, 10vw, 170px);

  text-align: right;
}

.flow-element:nth-of-type(even)
.flow-element-content p {
  margin-left: auto;
}


/* INDIVIDUAL IMAGE POSITIONING */

.flow-element-body
.flow-element-image img {
  object-position: center;
}

.flow-element-breath
.flow-element-image img {
  object-position: center;
}

.flow-element-clarity
.flow-element-image img {
  object-position: center;
}

.flow-element-creativity
.flow-element-image img {
  object-position: center;
}


/* ==================================================
   SUBTLE WATER GLOW
================================================== */

.flow-element::after {
  content: "";

  position: absolute;
  inset: 0;

  pointer-events: none;

  background:
    radial-gradient(
      circle at 50% 45%,
      rgba(187,235,228,.05),
      transparent 40%
    );
}


/* ==================================================
   FLOW STATEMENT
================================================== */

.flow-statement {
  min-height: 88vh;

  background:
    radial-gradient(
      circle at center,
      rgba(111,201,194,.10),
      transparent 40%
    ),
    linear-gradient(
      135deg,
      #051116,
      #0a252d
    );
}

.flow-statement::before {
  background:
    linear-gradient(
      to bottom,
      rgba(214,244,240,.8),
      transparent
    );
}

.flow-statement
.experience-statement-mark {
  color: rgba(214,244,240,.54);
}

.flow-statement blockquote {
  max-width: 1080px;

  margin-left: auto;
  margin-right: auto;
}


/* ==================================================
   FLOW CLOSING STORY
================================================== */

.flow-closing-story {
  position: relative;

  min-height: 90vh;

  display: flex;
  align-items: center;
  justify-content: center;

  padding: 140px 8vw;

  overflow: hidden;

  background:
    radial-gradient(
      circle at center,
      rgba(115,199,194,.08),
      transparent 44%
    ),
    linear-gradient(
      180deg,
      #07181e,
      #050f14
    );

  border-top:
    1px solid rgba(214,244,240,.10);
}

.flow-closing-story::before {
  content: "";

  position: absolute;

  top: 0;
  left: 50%;

  width: 1px;
  height: 110px;

  background:
    linear-gradient(
      to bottom,
      rgba(214,244,240,.78),
      transparent
    );
}

.flow-closing-story-inner {
  position: relative;
  z-index: 2;

  width: min(980px, 90vw);

  text-align: center;
}

.flow-closing-story h2 {
  max-width: 930px;

  margin: 0 auto 56px;

  font-size: clamp(2.8rem, 5.4vw, 6rem);
  font-weight: 100;
  line-height: 1.06;

  letter-spacing: .015em;

  color: rgba(255,255,255,.94);
}

.flow-closing-copy p {
  margin: 0 0 24px;

  font-size: clamp(1.35rem, 2.8vw, 3rem);
  font-weight: 100;
  line-height: 1.35;

  color: rgba(236,248,245,.8);
}

.flow-closing-copy p:last-child {
  margin-top: 44px;

  color: rgba(214,244,240,.96);
}


/* ==================================================
   FLOW INVITATION
================================================== */

.flow-invitation-bg {
  background-image:
    url("../img/flow/flow-closing.jpg");

  background-position: center;
}

.flow-invitation
.experience-invitation-overlay {
  background:
    radial-gradient(
      circle at center,
      rgba(4,32,38,.14),
      rgba(1,12,16,.72) 70%
    ),
    linear-gradient(
      to bottom,
      rgba(2,18,23,.34),
      rgba(1,10,14,.78)
    );
}

.flow-invitation
.experience-invitation-content h2 {
  max-width: 840px;
}

.flow-page .initiation-button {
  border-color: rgba(214,244,240,.64);
}

.flow-page .initiation-button:hover,
.flow-page .initiation-button:focus-visible {
  border-color: rgba(214,244,240,.96);

  background: rgba(214,244,240,.94);
  color: #06141a;
}


/* ==================================================
   FLOW NAVIGATION ACCENT
================================================== */

.flow-page
.experience-nav-links a:hover,
.flow-page
.experience-nav-links a.is-active,
.flow-page
.experience-nav-back:hover {
  color: rgba(214,244,240,.94);
}

.flow-page
.experience-nav-links a::after,
.flow-page
.experience-nav-back::after {
  background: rgba(214,244,240,.82);
}


/* ==================================================
   FLOW FOOTER ACCENT
================================================== */

.flow-page .experience-footer {
  border-top-color: rgba(214,244,240,.10);
}

.flow-page
.experience-footer-links a:hover {
  color: rgba(214,244,240,.92);
}


/* ==================================================
   FLOW REVEAL SUPPORT
================================================== */

.flow-element-content,
.flow-closing-story-inner {
  opacity: 0;

  transform: translateY(42px);

  transition:
    opacity 1.15s ease,
    transform 1.15s var(--ease);
}

.flow-element-content.is-visible,
.flow-closing-story-inner.is-visible {
  opacity: 1;

  transform: translateY(0);
}


/* ==================================================
   FLOW TABLET
================================================== */

@media (max-width: 1050px) {

  .flow-element-content {
    width: min(620px, 78vw);

    margin-left: 7vw;
  }

  .flow-element:nth-of-type(even)
  .flow-element-content {
    margin-right: 7vw;
  }

  .flow-element-content h2 {
    font-size:
      clamp(3rem, 8.5vw, 6rem);
  }

}


/* ==================================================
   FLOW MOBILE
================================================== */

@media (max-width: 768px) {

  .flow-visual-pause {
    min-height: 76vh;
  }


  /* FLOW ELEMENTS */

  .flow-element {
    min-height: 86vh;

    align-items: flex-end;
  }

  .flow-element-overlay,
  .flow-element:nth-of-type(even)
  .flow-element-overlay {
    background:
      linear-gradient(
        to bottom,
        rgba(2,16,21,.10) 0%,
        rgba(2,16,21,.18) 38%,
        rgba(2,12,16,.86) 80%,
        rgba(1,9,12,.97) 100%
      );
  }

  .flow-element-content,
  .flow-element:nth-of-type(even)
  .flow-element-content {
    width: 100%;

    margin: 0;

    padding:
      130px 24px 88px;

    text-align: left;
  }

  .flow-element-content h2 {
    max-width: 92vw;

    margin-bottom: 24px;

    font-size:
      clamp(2.7rem, 13vw, 4.8rem);

    line-height: .94;
  }

  .flow-element-content p,
  .flow-element:nth-of-type(even)
  .flow-element-content p {
    max-width: 560px;

    margin-left: 0;
    margin-right: 0;

    font-size: .88rem;
    line-height: 1.72;
  }


  /* FLOW CLOSING */

  .flow-closing-story {
    min-height: 82vh;

    padding: 120px 24px 100px;
  }

  .flow-closing-story h2 {
    margin-bottom: 46px;

    font-size:
      clamp(2.2rem, 9vw, 3.8rem);

    line-height: 1.12;
  }

  .flow-closing-copy p {
    margin-bottom: 18px;

    font-size:
      clamp(1.25rem, 6vw, 2.2rem);
  }

  .flow-closing-copy p:last-child {
    margin-top: 34px;
  }

}


/* ==================================================
   FLOW SMALL MOBILE
================================================== */

@media (max-width: 430px) {

  .flow-element {
    min-height: 80vh;
  }

  .flow-element-content,
  .flow-element:nth-of-type(even)
  .flow-element-content {
    padding-left: 20px;
    padding-right: 20px;
  }

  .flow-element-content h2 {
    font-size:
      clamp(2.4rem, 12vw, 3.8rem);
  }

}


/* ==================================================
   FLOW REDUCED MOTION
================================================== */

@media (prefers-reduced-motion: reduce) {

  .flow-element-image img {
    transition: none;
  }

  .flow-element-content,
  .flow-closing-story-inner {
    opacity: 1;

    transform: none;

    transition: none;
  }

}