/* ===============================
   MAIN STYLE — sections & UI
================================ */

/* ---- Buttons ---- */

.btn {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  min-width: 16.3rem;
  /* Figma 163px */
  height: 5rem;
  /* Figma 50px */
  padding-inline: 1.6rem;
  border-radius: var(--radius-btn);
  font-family: var(--font-body);
  font-weight: var(--weight-semibold);
  font-size: 1.6rem;
  /* Figma 16px */
  line-height: 1;
  text-transform: capitalize;
  white-space: nowrap;
  transition: background-color 0.25s ease, color 0.25s ease, border-color 0.25s ease, transform 0.2s ease;
}

.btn:hover {
  transform: translateY(-0.2rem);
}

.btn--primary {
  background: var(--color-red);
  color: var(--color-white);
}

.btn--primary:hover {
  background: #c81410;
}

a.btn--outline,
.btn--outline {
  border: 1px solid var(--color-text-muted);
  color: var(--color-white);
}

.btn--outline:hover {
  border-color: var(--color-yellow);
  color: var(--color-yellow);
}

.btn--outline-dark {
  border: 1px solid var(--color-text);
  color: var(--color-text);
}

.header .btn--primary {
  height: 4.6rem;
  /* Figma 46px */
}

/* ===============================
   HEADER
================================ */

.site-header {
  position: sticky;
  inset-block-start: 0;
  z-index: 50;
}

.site-header.is-scrolled .header {
  box-shadow: 0 0.8rem 2.4rem rgba(0, 0, 0, 0.28);
}

.topbar {
  background: var(--color-black);
  height: 6rem;
  /* Figma 60px */
}

.topbar__inner {
  display: flex;
  align-items: center;
  justify-content: space-between;
  height: 100%;
}

.topbar__brand {
  display: flex;
  align-items: center;
  gap: 1.6rem;
}

.topbar__icon {
  width: 2.4rem;
  height: 2.85rem;
  flex-shrink: 0;
}

.topbar__tagline {
  font-size: 1.6rem;
  /* Figma 16px */
  line-height: 1;
  text-transform: capitalize;
  color: var(--color-text-soft);
}

.topbar__contact {
  display: flex;
  align-items: center;
  gap: 1.2rem;
}

.topbar__email {
  font-size: 1.6rem;
  font-weight: var(--weight-medium);
  line-height: 1;
  color: var(--color-yellow-bright);
  transition: all 0.5s ease;
}

.topbar__email:hover {
  color: var(--color-red);
}

.topbar__phone {
  font-size: 1.6rem;
  font-weight: var(--weight-medium);
  line-height: 1;
  color: var(--color-text-soft);
  transition: all 0.5s ease;
}

.topbar__phone:hover {
  color: var(--color-yellow-bright);
}


.topbar__divider {
  width: 1px;
  height: 1.75rem;
  background: var(--color-text-muted);
}

.header {
  background: var(--color-black);
  border-block: 1px solid var(--color-border);
  height: 12rem;
  /* Figma 120px */
}

.header__inner {
  display: flex;
  align-items: center;
  justify-content: space-between;
  height: 100%;
  gap: 2.4rem;
}

.site-header .custom-logo-link {
  display: inline-block;
  width: 17rem;
  /* Figma 170px */
  height: 10rem;
  /* Figma 100px */
  overflow: hidden;
  flex-shrink: 0;
}

.site-header .custom-logo-link img {
  width: 100%;
  height: 100%;
  object-fit: contain;
}

/* .nav {
  margin-inline-start: auto;
} */

.menu-wrapper {
  display: flex;
  align-items: center;
  gap: 5.9rem;
  /* Figma ~59px */
}

.menu-wrapper li a {
  position: relative;
  font-size: 1.6rem;
  font-weight: var(--weight-semibold);
  line-height: 1;
  text-transform: capitalize;
  color: var(--color-white);
  padding-block-end: 0.6rem;
  transition: color 0.2s ease;
}

.menu-wrapper li a:hover,
.menu-wrapper li.current-menu-item a {
  color: var(--color-yellow);
}

.menu-wrapper li a::after {
  content: "";
  position: absolute;
  inset-inline-start: 0.2rem;
  inset-block-end: 0;
  width: 0;
  height: 0.2rem;
  background: var(--color-yellow);
  transition: all 0.5s ease;
}

.menu-wrapper li a:hover::after,
.menu-wrapper li.current-menu-item a::after {
  width: 3.7rem;
  /* Figma 37px */
}

.open-menu {
  display: none;
  color: var(--color-white);
  font-size: 3.2rem;
  line-height: 1;
}

/* ---- Mobile menu panel ---- */

.mobile-menu-panel {
  position: fixed;
  inset: 0;
  z-index: 80;
  background: var(--color-black);
  color: var(--color-white);
  transform: translateX(-100%);
  transition: transform 0.4s ease-in-out;
  display: flex;
  flex-direction: column;
  padding: 2.4rem;
  pointer-events: none;
  visibility: hidden;
}

.mobile-menu-panel.is-open {
  transform: translateX(0);
  pointer-events: auto;
  visibility: visible;
}

.mobile-menu-header {
  display: flex;
  align-items: center;
  justify-content: space-between;
  margin-block-end: 4rem;
}

.header-left {
  display: flex;
  align-items: center;
  gap: 1.2rem;
}

.menu-back {
  display: none;
  color: var(--color-yellow);
  font-size: 2.4rem;
}

.menu-logo .logo,
.menu-logo {
  width: 12rem;
  height: 7.2rem;
}

.menu-logo img {
  width: 139.7%;
  max-width: none;
  height: 132.3%;
  margin-inline-start: -20.05%;
  margin-block-start: -20.33%;
}

.menu-close {
  color: var(--color-white);
  font-size: 3.2rem;
}

.mobile-menu {
  flex: 1;
  overflow: hidden;
  position: relative;
}

.main-menu>li>a,
.sub-menu a {
  display: flex;
  align-items: center;
  justify-content: space-between;
  padding-block: 1.6rem;
  font-size: 2rem;
  font-weight: var(--weight-semibold);
  border-block-end: 1px solid var(--color-border);
}

.sub-menu {
  position: absolute;
  inset: 0;
  background: var(--color-black);
  transform: translateX(100%);
  transition: transform 0.35s ease-in-out;
}

.sub-menu.active {
  transform: translateX(0);
}

.submenu-arrow {
  color: var(--color-yellow);
}

.mobile-menu-footer {
  margin-block-start: auto;
  padding-block-start: 2.4rem;
}

.social-menu {
  display: flex;
  flex-wrap: wrap;
  gap: 1.6rem;
}

.social-menu a {
  color: var(--color-yellow);
  font-size: 1.6rem;
}

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

.hero {
  position: relative;
  isolation: isolate;
  display: flex;
  align-items: center;
  min-height: 72rem;
  padding-block: 9.8rem 12.8rem;
  background: var(--color-black);
  text-align: center;
  overflow: hidden;
}

.hero__media {
  position: absolute;
  inset: 0;
  z-index: -1;
  opacity: 0.15;
}

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

.hero__inner {
  display: flex;
  flex-direction: column;
  align-items: center;
}

.hero__label {
  font-size: 1.4rem;
  /* Figma 14px */
  font-weight: var(--weight-semibold);
  line-height: 1;
  letter-spacing: 0.08em;
  text-transform: uppercase;
  color: var(--color-yellow);
  margin-block-end: 0.7rem;
  /* 317-278 */
}

.hero__title {
  font-size: 15rem;
  /* Figma 150px */
  line-height: 16rem;
  /* Figma 160px */
  text-transform: uppercase;
  color: var(--color-white);
  max-width: 162.1rem;
}

.accent-yellow,
.accent-yellow .title-word {
  color: var(--color-yellow-bright);
}

.accent-red,
.accent-red .title-word {
  color: var(--color-red);
}

.hero__text {
  max-width: 59.2rem;
  margin-block-start: 1.3rem;
  /* 653-317-267 approx */
}

.hero__text p {
  font-size: 2rem;
  /* Figma 20px */
  line-height: 3.4rem;
  /* Figma 34px */
  font-weight: var(--weight-medium);
  color: var(--color-text-muted);
}

.hero__text strong {
  font-weight: var(--weight-bold);
  color: var(--color-yellow);
}

.hero__actions {
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 1.2rem;
  margin-block-start: 4rem;
}

/* ===============================
   STEPS
================================ */

.steps {
  position: relative;
  /* background: var(--color-black); */
  color: var(--color-white);
  padding-block: 3.5rem 10.2rem;
  /* margin-block-start: -1px; */
}

.steps__wave {
  position: absolute;
  inset-inline: 0;
  inset-block-start: 0;
  pointer-events: none;
  line-height: 0;
}

.steps__wave img {
  width: 100%;
  height: auto;
}

.steps__list {
  position: relative;
  z-index: 1;
  display: grid;
  grid-template-columns: repeat(4, 1fr);
  align-items: start;
}

.steps__item {
  display: flex;
  flex-direction: column;
  align-items: center;
  text-align: center;
  position: relative;
  padding-inline: 2rem;
}

.steps__item:not(:last-child)::after {
  content: "";
  position: absolute;
  inset-inline-end: 0;
  inset-block-start: 1.5rem;
  width: 1px;
  height: 13.1rem;
  background: rgba(229, 227, 227, 0.3);
}

.steps__number {
  font-family: var(--font-heading);
  font-size: 8rem;
  /* Figma 80px */
  line-height: 1;
  color: var(--color-yellow-bright);
}

.steps__name {
  margin-block-start: 1rem;
  font-size: 2rem;
  /* Figma 20px */
  font-weight: var(--weight-semibold);
  line-height: 1;
  letter-spacing: 0.04em;
  text-transform: uppercase;
  color: var(--color-white);
}

.steps__hint {
  margin-block-start: 1.2rem;
  font-size: 1.6rem;
  font-weight: var(--weight-medium);
  line-height: 3.4rem;
  color: var(--color-text-muted);
}

/* ===============================
   LIVING
================================ */

.living {
  padding-block: 6.2rem 7.2rem;
  /* 1331-1202-ish */
  background: var(--color-white);
}

.living__title {
  max-width: 54.3rem;
  font-size: 6rem;
  /* Figma 60px */
  line-height: 1.12;
  color: var(--color-text);
  margin-block-end: 6rem;
}

.living__grid {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 7rem;
}

.living__card {
  position: relative;
  display: block;
  overflow: hidden;
}

.living__card img {
  width: 100%;
  height: 46.3rem;
  /* Figma 463px */
  object-fit: cover;
}

.living__card::after {
  content: "";
  position: absolute;
  inset: 0;
  background: linear-gradient(0deg, rgba(0, 0, 0, 0.80) 0%, rgba(0, 0, 0, 0.80) 100%);
  pointer-events: none;
  transition: opacity 0.3s ease;
}

.living__card:hover::after {
  opacity: 0.4;
}

.living__play {
  position: absolute;
  inset: 50% auto auto 50%;
  z-index: 1;
  transform: translate(-50%, -50%);
  width: 10rem;
  height: 10rem;
  pointer-events: none;
  transition: transform 0.25s ease;
}

.living__card:hover .living__play {
  transform: translate(-50%, -50%) scale(1.08);
}

.living__play img {
  width: 10rem;
  height: 10rem;
}

.living__caption {
  margin-block-start: 3rem;
  /* 2017-1514-463 */
  font-family: var(--font-body);
  font-weight: var(--weight-medium);
  font-size: 3.4rem;
  /* Figma 34px */
  line-height: 1;
  color: var(--color-black);
}

.social-row {
  display: flex;
  justify-content: center;
  gap: 2rem;
  /* Figma 20px */
  margin-block-start: 4rem;
}

.social-row a {
  display: block;
  transition: transform 0.2s ease, opacity 0.2s ease;
}

.social-row a:hover {
  transform: translateY(-0.3rem);
  opacity: 0.75;
}

.social-row img {
  width: 5.5rem;
  height: 5.5rem;
}

/* ===============================
   STORIES / SWIPER
================================ */

.stories {
  position: relative;
  background: var(--color-black-alt);
  color: var(--color-white);
  padding-block: 10.6rem 0;
  overflow: hidden;
}

.stories__inner {
  position: relative;
  padding-block-end: 17.9rem;
}

.stories .section__label {
  margin-block-end: 3rem;
  /* Figma 50px */
  font-size: 2.4rem;
}

.stories__title {
  font-size: 6rem;
  /* Figma 60px */
  line-height: 1.15;
  color: var(--color-white);
  margin-block-end: 6.5rem;
  /* Figma 90px */
}

.stories__quote {
  display: flex;
  align-items: flex-start;
  gap: 5rem;
  /* Figma 50px */
}

.stories__quote-icon {
  width: 4.2rem;
  height: 3.2rem;
  flex-shrink: 0;
  margin-block-start: 0.6rem;
}

.stories__copy {
  max-width: 136.7rem;
}

.stories__copy p+p {
  margin-block-start: 4rem;
}

.stories__copy p {
  font-size: 2.4rem;
  line-height: 4rem;
  color: var(--color-white);
}

.stories__quote-lg {
  position: absolute;
  inset-inline-end: 16%;
  inset-block-end: 0;
  width: 19.8rem;
  height: 14.9rem;
  pointer-events: none;
  opacity: 1;
}

.stories__slider {
  padding-block-end: 6rem;
}

.stories__pagination {
  inset-inline-end: 0 !important;
  inset-inline-start: auto !important;
  width: auto !important;
  top: 50% !important;
  transform: translateY(-50%) rotate(90deg) !important;
  left: auto !important;
  right: 14.6rem !important;
  bottom: 0 !important;
}

.stories__pagination .swiper-pagination-bullet {
  width: 1.2rem;
  height: 1.2rem;
  background: var(--color-dot);
  opacity: 1;
  border-radius: 5rem;
  transition: width 0.25s ease, background-color 0.25s ease;
}

.stories__pagination .swiper-pagination-bullet-active {
  width: 3.5rem;
  height: 1.2rem;
  background: var(--color-yellow);
  border-radius: 1.6rem;
}

/* ===============================
   HOME VIDEO
================================ */

.home-video {
  position: relative;
  padding-block: 26.3rem 12rem;
  background: var(--color-white);
}

.home-video__wave {
  position: absolute;
  inset-inline: 0;
  inset-block-start: 0;
  line-height: 0;
  pointer-events: none;
}

.home-video__wave img {
  width: 100%;
  height: auto;
}

.home-video__title {
  max-width: 71.3rem;
  margin-inline: auto;
  margin-block-end: 9rem;
  font-size: 6rem;
  line-height: 1.12;
  text-align: center;
  text-transform: capitalize;
  color: var(--color-text);
}

.home-video__frame {
  position: relative;
  display: block;
  width: 100%;
  max-width: 139.6rem;
  margin-inline: auto;
  border-radius: var(--radius-frame);
  overflow: hidden;
  background: var(--color-black-alt);
}

.home-video__frame img {
  width: 100%;
  height: 78.5rem;
  /* Figma 785px */
  object-fit: cover;
  opacity: 0.35;
}

.home-video__play {
  position: absolute;
  inset: 50% auto auto 50%;
  transform: translate(-50%, -50%);
  width: 14rem;
  height: 14rem;
  pointer-events: none;
  transition: transform 0.25s ease;
}

.home-video__frame:hover .home-video__play {
  transform: translate(-50%, -50%) scale(1.08);
}

.home-video__play img {
  width: 14rem;
  height: 14rem;
  opacity: 1;
}

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

.story {
  background: var(--color-black-alt);
  color: var(--color-white);
  padding-block: 12rem 0rem;
}

.story__inner {
  display: grid;
  grid-template-columns: 56.7rem 1fr;
  gap: 24.6rem;
  align-items: start;
  padding-inline: 6rem 13.5rem;
}

.story__media {
  margin: 0;
  border-radius: var(--radius-card);
  overflow: hidden;
}

.story__media img {
  width: 100%;
  height: 75rem;
  /* Figma 750px */
  object-fit: cover;
  object-position: center top;
}

.story__content {
  padding-block-start: 0;
}

.story .section__label {
  margin-block-end: 2.5rem;
}

.story__title {
  font-size: 6rem;
  line-height: 1.12;
  text-transform: capitalize;
  color: var(--color-white);
  max-width: 67.1rem;
  margin-block-end: 2.5rem;
}

.story__text {
  max-width: 65.6rem;
  margin-block-end: 4.5rem;
}

.story__text p+p {
  margin-block-start: 4rem;
}

.story__text p {
  font-size: 2.4rem;
  line-height: 4rem;
  color: var(--color-white);
}

/* ===============================
   TRUSTED
================================ */

.trusted {
  position: relative;
  background: var(--color-cream);
  padding-block: 31.8rem 3.5rem;
}

.trusted__wave {
  position: absolute;
  inset-inline: 0;
  inset-block-start: 0;
  line-height: 0;
  pointer-events: none;
}

.trusted__wave img {
  width: 100%;
  height: auto;
}

.trusted__inner {
  text-align: center;
}

.trusted .section__label {
  margin-block-end: 2.5rem;
}

.trusted__title {
  font-size: 6rem;
  line-height: 1.15;
  color: var(--color-black);
  margin-block-end: 2.5rem;
}

.trusted__intro {
  max-width: 127.1rem;
  margin-inline: auto;
  margin-block-end: 3.5rem;
}

.trusted__intro p {
  font-size: 2.4rem;
  line-height: 4rem;
}

.trusted__grid {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 6rem;
  max-width: 119.6rem;
  margin-inline: auto;
}

.trusted__card {
  display: flex;
  align-items: center;
  gap: 4rem;
  min-height: 21.4rem;
  /* Figma 214px */
  padding: 4rem 3.2rem;
  background: var(--color-white);
  border-radius: var(--radius-card);
  box-shadow: 0 0 1.6rem 0.2rem rgba(0, 0, 0, 0.08);
  text-align: start;
}

.trusted__card picture,
.trusted__card img {
  width: 26.5rem;
  height: 13.5rem;
  object-fit: contain;
  flex-shrink: 0;
}

.trusted__trustpilot {
  mix-blend-mode: screen;
  object-fit: contain;
  object-position: center;
}

.trusted__score {
  display: flex;
  flex-direction: column;
  gap: 2rem;
}

.trusted__rating {
  font-size: 4.2rem;
  /* Figma 42px */
  font-weight: var(--weight-semibold);
  line-height: 1;
  text-transform: uppercase;
  color: var(--color-black);
}

.trusted__meta {
  font-size: 2.4rem;
  line-height: 3rem;
  color: var(--color-black);
}

/* ===============================
   IMPROVE
================================ */

.improve {
  position: relative;
  background: var(--color-white);
  padding-block: 28.9rem 12rem;
}

.improve__wave {
  position: absolute;
  inset-inline: 0;
  inset-block-start: 0;
  line-height: 0;
  pointer-events: none;
}

.improve__wave img {
  width: 100%;
  height: auto;
}

.improve__inner {
  display: grid;
  grid-template-columns: 1fr 69.9rem;
  gap: 8rem;
  align-items: center;
}

.improve .section__label {
  margin-block-end: 2.5rem;
}

.improve__title {
  font-size: 6rem;
  line-height: 1.12;
  text-transform: uppercase;
  color: var(--color-black);
  max-width: 62.6rem;
  margin-block-end: 2.5rem;
}

.improve__text {
  max-width: 65.6rem;
}

.improve__text p {
  font-size: 2.4rem;
  line-height: 4rem;
  color: var(--color-black);
}

.improve__calendar {
  position: relative;
}

.improve__calendar>picture img {
  width: 100%;
  height: 79.9rem;
  object-fit: cover;
  object-position: top center;
  border-radius: 0.8rem;
  box-shadow: 0 1.6rem 4rem rgba(0, 0, 0, 0.08);
}

.improve__logo {
  position: absolute;
  inset-block-start: 2.1rem;
  inset-inline-start: 1.7rem;
  z-index: 1;
  width: 13.6rem;
  height: 8rem;
  overflow: hidden;
}

.improve__logo img {
  width: 139.7%;
  max-width: none;
  height: 132.3%;
  margin-inline-start: -20.05%;
  margin-block-start: -20.33%;
  object-fit: cover;
}

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

.site-footer {
  position: relative;
  color: var(--color-white);
  padding-block: 17rem 0;
  margin-block-start: 0;
}

.footer__wave {
  position: absolute;
  inset-inline: 0;
  inset-block-start: 0;
  line-height: 0;
  pointer-events: none;
}

.footer__wave img {
  width: 100%;
  height: auto;
}

.footer-wrap {
  background: var(--color-black-alt);
  padding-block-start: 1rem;
  margin-block-start: -1rem;
}

.footer__inner {
  position: relative;
}

.footer__top-row {
  display: flex;
  align-items: flex-start;
  justify-content: space-between;
  margin-block-end: 2.4rem;
}

/* .footer__logo {
  display: block;
  width: 26.5rem;
  height: 15.6rem;
  overflow: hidden;
}

.footer__logo img {
  width: 139.7%;
  max-width: none;
  height: 132.3%;
  margin-inline-start: -20.05%;
  margin-block-start: -20.33%;
  object-fit: cover;
} */


.site-footer .custom-logo-link {
  display: inline-block;
  width: 26.5rem;
  height: 15.6rem;
  overflow: hidden;
  flex-shrink: 0;
}

.site-footer .custom-logo-link img {
  width: 100%;
  height: 100%;
  object-fit: contain;
}

.footer__totop {
  display: flex;
  align-items: center;
  transition: transform 0.2s ease;
}

.footer__totop:hover {
  transform: translateY(-0.3rem);
}

.footer__totop-text {
  display: flex;
  align-items: center;
  justify-content: center;
  flex-direction: column;
  height: 6rem;
  padding-inline: 1.8rem 2.8rem;
  padding-block: 1rem 1rem;
  background: var(--color-white);
  border-radius: 0.6rem 0 0 0.6rem;
  font-size: 1.8rem;
  font-weight: var(--weight-bold);
  text-transform: uppercase;
  color: var(--color-black);
  line-height: 2.4rem;
}

.footer__totop-text strong {
  font-size: 2.2rem;
  color: var(--color-yellow-bright);
  margin-inline-end: 0.4rem;
}

.footer__totop img {
  width: 7rem;
  height: 7rem;
  margin-left: -2rem;
}

.footer__headline , .footer__headline p {
  font-family: var(--font-heading);
  font-size: 13rem;
  /* Figma 130px */
  line-height: 1;
  letter-spacing: 0.5rem;
  /* Figma 5px */
  color: var(--color-white);
  margin-block-end: 2.6rem;
}

.footer__headline span {
  color: var(--color-yellow-bright);
}

.footer__meta {
  display: flex;
  justify-content: space-between;
  align-items: flex-start;
  gap: 4rem;
  padding-block-end: 4rem;
}

.footer__label {
  display: block;
  font-size: 2.4rem;
  font-weight: var(--weight-semibold);
  line-height: 1;
  text-transform: uppercase;
  color: var(--color-yellow);
  margin-block-end: 1.6rem;
}

.footer__block a,
.footer__block span:not(.footer__label) {
  font-size: 2.4rem;
  line-height: 4rem;
  color: var(--color-white);
  transition: 0.5s all ease;
}
.footer__block a:hover {color: var(--color-red);}

.footer__social {
  display: flex;
  justify-content: center;
  gap: 2rem;
}

.footer__social a {
  font-size: 0;
  display: block;
  transition: transform 0.2s ease, opacity 0.2s ease;
}

.footer__social a:hover {
  transform: translateY(-0.3rem);
  opacity: 0.75;
}

.footer__social img {
  width: 5.5rem;
  height: 5.5rem;
}

.footer__bottom {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 2.4rem;
  padding-block: 8.4rem 2.8rem;
  border-block-start: 1px solid var(--color-border);
}

.footer__bottom p , .footer__copyright {
  font-size: 2.4rem;
  line-height: 4rem;
}

.footer__nav {
  display: flex;
  align-items: center;
  gap: 3.2rem;
}

.footer__nav li a {
  position: relative;
  font-size: 2.4rem;
  line-height: 4rem;
  color: var(--color-white);
  transition: 0.5s all ease;
}
.footer__nav li a:hover , .footer__nav li.current-menu-item a  {color: var(--color-yellow);}

.footer__nav li {position: relative;}
.footer__nav li:not(:last-of-type)::before {
  content: "";
  position: absolute;
  top: 50%;
  transform: translateY(-50%);
  right: -2rem;
  width: 0.6rem;
  height: 0.6rem;
  border-radius: 50%;
  background: var(--color-yellow);
}

/* ===============================
   404
================================ */

.error-page {
  min-height: 60rem;
  background: var(--color-black);
  color: var(--color-white);
  display: flex;
  align-items: center;
  padding-block: 12rem;
}

.error-page__inner {
  text-align: center;
}

.error-page .section__label {
  color: var(--color-yellow);
  margin-block-end: 2.4rem;
}

.error-page__title {
  font-size: 8rem;
  line-height: 1.1;
  color: var(--color-white);
  margin-block-end: 2.4rem;
}

.error-page__text {
  max-width: 64rem;
  margin-inline: auto;
}

.error-page__text p {
  color: var(--color-text-muted);
}

.error-page .hero__actions {
  margin-block-start: 4rem;
}

.error-page .btn--outline-dark {
  border-color: var(--color-text-muted);
  color: var(--color-white);
}

/* ===============================
   ABOUT — STORY PAGE
================================ */

.story--page .story__text {
  margin-block-end: 0;
}

.trusted--about {
  padding-block-start: 18.5rem;
  padding-block-end: 6rem;
}

/* ===============================
   ABOUT — STEPS
================================ */

.steps--about {
  padding-block: 6rem 4rem;
}

.steps--about .steps__wave {
  inset-block-start: -10rem;
}

.social-row--about {
  margin-block-start: 0;
  margin-block-end: 8rem;
}

.steps__rule {
  display: block;
  width: 100%;
  height: 1px;
  margin-block-start: 4rem;
  border: 0;
  background: rgba(229, 227, 227, 0.3);
}

/* ===============================
   ABOUT — REASON + FORM
================================ */

.reason {
  position: relative;  
  color: var(--color-white);
  padding-block-end: 16.7rem;
}
.reason-wrap { padding-block-start: 14.6rem; background: var(--color-black);}

.reason__inner {
  display: grid;
  grid-template-columns: 1fr 83rem;
  /* Figma 830px card */
  gap: 9.8rem;
  align-items: start;
}

.reason__content {
  padding-block-start: 9rem;
  /* Figma label sits below form top */
}

.reason .section__label {
  margin-block-end: 2.5rem;
}

.reason__title {
  font-size: 6rem;
  /* Figma 60px */
  line-height: 1.12;
  text-transform: capitalize;
  color: var(--color-white);
  max-width: 67.1rem;
  margin-block-end: 2.5rem;
}

.reason__text {
  max-width: 74.5rem;
  /* Figma 745px */
}

.reason__text p {
  font-size: 2.4rem;
  line-height: 4rem;
  font-weight: var(--weight-bold);
  color: var(--color-white);
}

.reason__text p+p {
  margin-block-start: 4rem;
}

.reason__text p:last-child {
  margin-block-start: 12rem;
}

.reason__wave {
  position: absolute;
  inset-inline: 0;
  inset-block-end: 0;
  line-height: 0;
  pointer-events: none;
  z-index: 1;
}

.reason__wave img {
  width: 100%;
  height: auto;
}

.move-card {
  position: relative;
  width: 100%;
  max-width: 83rem;
  /* Figma 830px */
  min-height: 50rem;
  /* Figma 1105px */
  padding: 6.5rem 6.4rem 4.8rem;
  background: var(--color-yellow-bright);
  border-radius: var(--radius-card);
  color: var(--color-black);
}

.move-card__badge {
  position: absolute;
  inset-block-start: 0;
  inset-inline-start: 6.6rem;
  /* Figma 76-10 */
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 1.2rem;
  width: 21.8rem;
  /* Figma 218px */
  height: 5.6rem;
  /* Figma 56px */
  background: var(--color-black);
  border-radius: 0 0 1rem 1rem;
  color: var(--color-white);
}

.move-card__badge span {
  font-size: 2.4rem;
  font-weight: var(--weight-semibold);
  line-height: 1;
  text-transform: uppercase;
}

.move-card__badge img {
  width: 4.2rem;
  height: 2.8rem;
  flex-shrink: 0;
}

.move-card__title {
  max-width: 67.1rem;
  margin-block-end: 3.2rem;
  font-size: 6rem;
  /* Figma 60px */
  line-height: 1.12;
  text-transform: uppercase;
  color: var(--color-black);
}

.move-form {
  padding: 3.8rem 4rem;
  background: var(--color-form-inner);
  border: 2px solid var(--color-black-alt);
  border-radius: var(--radius-form);
}

.move-form__goals {
  border: 0;
  margin: 0;
  padding: 0;
  margin-block-end: 3rem;
}

.move-form__goals legend {
  font-size: 1.8rem;
  /* Figma 18px */
  font-weight: var(--weight-medium);
  line-height: 3.4rem;
  color: var(--color-black);
  margin-block-end: 1.2rem;
}

.move-form__req {
  color: var(--color-red);
}

.move-form__chips {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 2.3rem 3.2rem;
  /* Figma 23px / 32px */
}

.move-form__chip {
  position: relative;
  display: flex;
  align-items: center;
  justify-content: center;
  min-height: 5.2rem;
  /* Figma 52px */
  padding-inline: 1.2rem;
  border: 1px solid var(--color-black);
  border-radius: var(--radius-chip);
  font-size: 1.8rem;
  font-weight: var(--weight-medium);
  line-height: 1.2;
  text-align: center;
  color: var(--color-black);
  cursor: pointer;
  transition: background-color 0.25s ease, color 0.25s ease, border-color 0.25s ease;
}

.move-form__chip span {
  position: relative;
  z-index: 1;
  pointer-events: none;
  white-space: nowrap;
}

.move-form__chip input {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  margin: 0;
  opacity: 0;
  cursor: pointer;
}
.move-form__chip input:focus {outline: none; box-shadow: none;}

.move-form__chip:hover {
  border-color: var(--color-black-alt);
}

.move-form__chip:has(input:checked),
.move-form__chip.is-selected {
  background: var(--color-black);
  color: var(--color-white);
  border-color: var(--color-black);
}

/* .move-form__chip:focus-within {
  outline: 2px solid var(--color-black);
  outline-offset: 0.2rem;
} */

.move-form__hint {
  margin-block-start: 1.6rem;
}

.move-form__hint p {
  font-size: 1.6rem;
  line-height: 2.031rem;
  /* Figma 20.308px */
  color: var(--color-black);
}

.move-form__field {
  display: flex;
  flex-direction: column;
  gap: 0.8rem;
  margin-block-start: 2.4rem;
}

.move-form__field label {
  font-size: 1.8rem;
  font-weight: var(--weight-medium);
  line-height: 1;
  color: var(--color-black-alt);
}

.move-form__field input {
  width: 100%;
  height: 5.2rem;
  /* Figma 52px */
  padding-inline: 1.6rem;
  background: var(--color-input);
  border: 1px solid var(--color-input-border);
  border-radius: 0;
  font-size: 1.8rem;
  font-weight: var(--weight-regular);
  line-height: 1;
  color: var(--color-black);
}

.move-form__field input::placeholder {
  color: var(--color-placeholder);
}

.move-form__field input:focus {
  outline:none;
  box-shadow: none;
}

.move-form__captcha {
  display: block;
  width: 29.8rem;
  /* Figma 298px */
  margin-block-start: 2.4rem;
  margin-block-end: 2.4rem;
}

.move-form__captcha img {
  width: 29.8rem;
  height: 6.3rem;
  object-fit: cover;
}

.move-form .btn--primary {
  min-width: 16.3rem;
}

/* ===============================
   ABOUT — QUOTE
================================ */

.quote {
  margin-block-start: -6rem;
  position: relative;
  display: flex;
  align-items: center;
  min-height: 85.9rem;
  /* Figma 859px */
  overflow: hidden;
  background: var(--color-yellow-bright);
}

.quote__media {
  position: absolute;
  inset: 0;
  pointer-events: none;
}

.quote__media img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  opacity: 0.45;
  mix-blend-mode: multiply;
}

.quote__inner {
  position: relative;
  z-index: 1;
  text-align: center;
  color: var(--color-white);
}

.quote blockquote {
  max-width: 158.7rem;
  /* Figma 1587px */
  margin-inline: auto;
}

.quote blockquote p {
  font-family: var(--font-heading);
  font-size: 5rem;
  /* Figma 50px */
  line-height: 6.4rem;
  /* Figma 64px */
  text-transform: capitalize;
  color: var(--color-white);
}

.quote cite {
  display: block;
  margin-block-start: 5rem;
  font-size: 2.4rem;
  font-style: normal;
  font-weight: var(--weight-regular);
  line-height: 1;
  color: var(--color-white);
}

.quote__wave {
  position: absolute;
  inset-inline: 0;
  inset-block-end: 0;
  line-height: 0;
  pointer-events: none;
  z-index: 1;
}

.quote__wave img {
  width: 100%;
  height: auto;
}

/* ===============================
   ABOUT — VIDEO
================================ */

.home-video--about {
  text-align: center; padding-block: 12.8rem;
}

.home-video--about .section__label {
  margin-block-end: 2.5rem;
}

.home-video--about .home-video__title {
  max-width: none;
  text-transform: uppercase;
}

.home-video--about .home-video__frame img {
  opacity: 0.35;
}
.home-video--about .home-video__play img {
  opacity: 1;
}

/* ===============================
   CONTACT — TALK
================================ */

.talk {
  position: relative;
  background: var(--color-black-alt);
  color: var(--color-white);
  padding-block: 12rem 8rem;
}

.talk__inner {
  display: grid;
  grid-template-columns: 67.6rem 1fr;
  /* Figma 676px panel */
  gap: 14.6rem;
  align-items: start;
}

.talk__panel {
  display: flex;
  flex-direction: column;
  min-height: 86.8rem;
  /* Figma 868px */
  padding: 7.1rem 5.8rem 6rem;
  background: var(--color-yellow-bright);
  border-radius: var(--radius-card);
  color: var(--color-black-alt);
}

.talk__headline {
  max-width: 55.9rem;
  /* Figma 559px */
  font-size: 10rem;
  /* Figma 100px */
  line-height: 1.04;
  text-transform: uppercase;
  color: var(--color-black-alt);
}

.talk__rule {
  display: block;
  width: 10.9rem;
  /* Figma 109px */
  height: 0.5rem;
  /* Figma 5px */
  margin-block: 3.4rem 4.5rem;
  border-radius: 0.5rem;
  background: var(--color-red);
}

.talk__lead {
  max-width: 50.7rem;
  /* Figma 507px */
  font-size: 6rem;
  /* Figma 60px */
  line-height: 1.05;
  text-transform: capitalize;
  color: var(--color-black-alt);
}

.talk__lead strong {
  font-weight: var(--weight-bold);
  color: var(--color-red);
}

.talk .section__label {
  margin-block-end: 5rem;
}

.talk__title {
  font-size: 6rem;
  /* Figma 60px */
  line-height: 1.12;
  text-transform: capitalize;
  color: var(--color-white);
  margin-block-end: 5rem;
}

.talk__intro {
  max-width: 70rem;
  /* Figma 700px */
  margin-block-end: 5rem;
}

.talk__intro p {
  font-size: 2.4rem;
  line-height: 3.4rem;
  /* Figma 34px */
  color: var(--color-white);
}

.talk-form {
  display: flex;
  flex-direction: column;
  gap: 3rem;
  max-width: 70rem;
}

.talk-form__field {
  display: flex;
  flex-direction: column;
  gap: 0.8rem;
}

.talk-form__field label {
  font-size: 1.8rem;
  font-weight: var(--weight-medium);
  line-height: 1;
  color: var(--color-white);
}

.talk-form__req {
  color: var(--color-red);
}

.talk-form__field input,
.talk-form__field textarea {
  width: 100%;
  padding: 1.4rem 1.6rem;
  background: var(--color-input);
  border: 1px solid var(--color-input-line);
  border-radius: 0;
  color: var(--color-black);
  font-size: 1.8rem;
}

.talk-form__field input {
  height: 5.2rem;
  /* Figma 52px */
}

.talk-form__field textarea {
  min-height: 12.3rem;
  /* Figma 123px */
  resize: vertical;
}

.talk-form__field input::placeholder,
.talk-form__field textarea::placeholder {
  color: var(--color-placeholder);
}

.talk-form__field input:focus,
.talk-form__field textarea:focus {
  outline: 2px solid var(--color-yellow);
  outline-offset: 0.1rem;
}

.talk-form .btn--primary {
  align-self: flex-start;
}

/* ===============================
   CONTACT — REACH
================================ */

.reach {
  position: relative;
  background: var(--color-white);
  padding-block: 16rem 8rem;
}

.reach__wave {
  position: absolute;
  inset-inline: 0;
  inset-block-start: -10rem;
  line-height: 0;
  pointer-events: none;
}

.reach__wave img {
  width: 100%;
  height: auto;
}

.reach__inner {
  display: grid;
  grid-template-columns: 68.4rem 69.9rem;
  gap: 12rem;
  align-items: start;
  justify-content: space-between;
}

.reach .section__label {
  margin-block-end: 5rem;
}

.reach__title {
  max-width: 49.3rem;
  /* Figma 493px */
  font-size: 6rem;
  line-height: 1.12;
  color: var(--color-black);
  margin-block-end: 5rem;
}

.reach__list {
  display: flex;
  flex-direction: column;
  margin-block-end: 8rem;
}

.reach__item {
  display: flex;
  align-items: flex-start;
  gap: 3rem;
  /* Figma 30px */
  padding-block: 0 3.5rem;
}

.reach__item:not(:last-child) {
  margin-block-end: 3.5rem;
  border-block-end: 1px solid var(--color-line-soft);
}

.reach__item picture,
.reach__item img {
  width: 5.2rem;
  height: 5.2rem;
  flex-shrink: 0;
  object-fit: contain;
}

.reach__label {
  font-family: var(--font-body);
  font-size: 2.4rem;
  font-weight: var(--weight-bold);
  line-height: 2.96rem;
  /* Figma 29.585px */
  color: var(--color-black);
  margin-block-end: 1.2rem;
}

.reach__copy address,
.reach__copy a,
.reach__copy p {
  font-size: 2.2rem;
  /* Figma 22px */
  line-height: 2.8rem;
  /* Figma 28px */
  color: var(--color-black);
}

.reach__copy a {
  transition: color 0.2s ease;
}

.reach__copy a:hover {
  color: var(--color-red);
}

.reach__note {
  padding: 4.1rem 3.7rem;
  background: var(--color-cream);
  border: 2px solid var(--color-yellow-bright);
  border-radius: var(--radius-note);
}

.reach__note p {
  font-size: 1.8rem;
  line-height: 2.8rem;
  color: var(--color-black);
}