/* Cashera UK hero + shared hero styles — extracted from src/index.css. */
/* Homepage hero: full-bleed image, reference-led copy and actions. */
.webflow-home .home-hero-overlay {
  position: relative;
  left: calc((100% - 100vw) / 2);
  display: block;
  width: 100vw;
  min-height: 100svh;
  padding: 0;
  isolation: isolate;
  overflow: hidden;
  background-color: var(--swatch--dark-90);
}

.webflow-home .home-hero-media,
.webflow-home .home-hero-media::after,
.webflow-home .home-hero-image {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
}

.webflow-home .home-hero-media {
  z-index: 0;
}

.webflow-home .home-hero-media::after {
  content: '';
  pointer-events: none;
  background: linear-gradient(
    90deg,
    color-mix(in srgb, var(--swatch--dark-90) 94%, transparent) 0%,
    color-mix(in srgb, var(--swatch--dark-90) 78%, transparent) 24%,
    color-mix(in srgb, var(--swatch--dark-90) 18%, transparent) 53%,
    transparent 72%
  );
}

.webflow-home .home-hero-image {
  object-fit: cover;
  object-position: 54% center;
}

.webflow-home .home-hero-content {
  position: relative;
  z-index: 1;
  display: flex;
  align-items: center;
  width: min(100%, 90rem);
  min-height: 100svh;
  margin: 0 auto;
  padding: clamp(7rem, 12vh, 9rem) clamp(2rem, 5vw, 5rem) clamp(3rem, 7vh, 5rem);
}

.webflow-home .home-hero-copy {
  display: flex;
  width: min(36rem, 46vw);
  flex-direction: column;
  align-items: flex-start;
  gap: 1.5rem;
  color: var(--swatch--white);
}

.webflow-home .home-hero-copy .u-heading h1 {
  width: 100%;
  margin: 0;
  color: var(--swatch--white);
  font-family: 'Plus Jakarta Sans Cashera', 'InterCashera', sans-serif;
  font-size: clamp(3.75rem, 5.65vw, 5.75rem);
  font-weight: 800;
  line-height: 0.92;
  letter-spacing: 0;
  text-transform: uppercase;
  text-wrap: balance;
}

.webflow-home .home-hero-copy .u-heading {
  display: block;
  width: 100%;
  max-width: none;
}

.webflow-home .home-hero-copy .u-heading h1,
.webflow-home .home-hero-copy .u-heading .section_reveal_line {
  display: block !important;
  width: 100% !important;
}

.webflow-home .home-hero-copy .u-text {
  width: 100%;
  max-width: 29rem;
}

.webflow-home .home-hero-copy .u-text p {
  margin: 0;
  color: var(--swatch--white);
  font-size: clamp(0.95rem, 1.15vw, 1.125rem);
  line-height: 1.45;
  text-wrap: pretty;
}

.webflow-home .home-hero-actions {
  display: flex;
  align-items: center;
  gap: 0.75rem;
}

/* Single remaining hero action: keep it centered at every width. */
.webflow-home .home-hero-actions.is-single {
  justify-content: center;
}

.webflow-home .home-hero-button {
  flex: none;
}

.webflow-home .home-hero-button.is-secondary .button_main_element {
  border: 1px solid color-mix(in srgb, var(--swatch--dark-90) 12%, transparent);
  background: var(--swatch--white);
  color: var(--swatch--dark-90);
}

.webflow-home .home-hero-button.is-secondary .button_main_fill {
  background: color-mix(in srgb, var(--swatch--white) 86%, var(--swatch--green));
}

.webflow-home .home-hero-approval {
  position: absolute;
  z-index: 2;
  right: clamp(1.5rem, 5vw, 5rem);
  bottom: clamp(1.5rem, 5vh, 3.5rem);
  display: flex;
  min-width: 10.5rem;
  align-items: center;
  gap: 0.8rem;
  padding: 0.8rem 1.15rem;
  border-radius: 0.5rem;
  background: var(--swatch--white);
  color: var(--swatch--dark-90);
  box-shadow: 0 0.75rem 2rem color-mix(in srgb, var(--swatch--dark-90) 18%, transparent);
}

.webflow-home .home-hero-approval-icon {
  display: grid;
  width: 2rem;
  height: 2rem;
  flex: none;
  place-items: center;
  border-radius: 50%;
  background: var(--swatch--green-50);
  color: var(--swatch--dark-90);
}

.webflow-home .home-hero-approval-icon svg {
  width: 1.15rem;
  height: 1.15rem;
  stroke-width: 3;
}

.webflow-home .home-hero-approval-copy {
  display: flex;
  flex-direction: column;
  line-height: 1;
}

.webflow-home .home-hero-approval-copy span {
  font-size: 0.75rem;
}

.webflow-home .home-hero-approval-copy strong {
  margin-top: 0.2rem;
  font-family: 'Bagosscondensed', sans-serif;
  font-size: 1.8rem;
  letter-spacing: 0;
}

/* Keep the full benefit row in the initial desktop viewport at 100% zoom. */
@media (min-width: 992px) {
  .webflow-home .home-hero-overlay,
  .webflow-home .home-hero-content {
    min-height: max(35rem, calc(100svh - 7rem));
  }
}

@media (max-width: 991px) {
  .webflow-home .home-hero-media::after {
    background: linear-gradient(
      to bottom,
      color-mix(in srgb, var(--swatch--dark-90) 10%, transparent) 0%,
      color-mix(in srgb, var(--swatch--dark-90) 6%, transparent) 37%,
      color-mix(in srgb, var(--swatch--dark-90) 82%, transparent) 70%,
      var(--swatch--dark-90) 100%
    );
  }

  .webflow-home .home-hero-image {
    object-position: 61% center;
  }

  .webflow-home .home-hero-content {
    align-items: flex-end;
    padding: 5.5rem clamp(1.25rem, 5vw, 2.5rem) 3.25rem;
  }

  .webflow-home .home-hero-copy {
    width: min(30rem, 72%);
    gap: 1rem;
  }

  .webflow-home .home-hero-copy .u-heading h1 {
    font-size: clamp(3rem, 8vw, 4.5rem);
  }

  .webflow-home .home-hero-approval {
    right: 1.25rem;
    bottom: 3.25rem;
  }
}

@media (max-width: 600px) {
  .webflow-home .home-hero-overlay {
    min-height: auto;
    overflow: visible;
  }

  .webflow-home .home-hero-media {
    position: relative;
    height: 63.5svh;
    min-height: 30rem;
    max-height: 34rem;
  }

  .webflow-home .home-hero-image {
    object-position: 76% center;
  }

  .webflow-home .home-hero-media::after {
    background: linear-gradient(
      to bottom,
      transparent 0%,
      transparent 82%,
      color-mix(in srgb, var(--swatch--dark-90) 18%, transparent) 100%
    );
  }

  .webflow-home .home-hero-content {
    min-height: auto;
    padding: 3.25rem 2rem 2.5rem;
  }

  .webflow-home .home-hero-copy {
    width: 100%;
    padding-right: 0;
    gap: 0.8rem;
  }

  .webflow-home .home-hero-copy .u-heading {
    max-width: 100%;
  }

  .webflow-home .home-hero-copy .u-heading h1 {
    font-size: 2.4rem;
    line-height: 1.03;
  }

  .webflow-home .home-hero-copy .u-heading h1 br {
    display: none;
  }

  .webflow-home .home-hero-copy .u-text {
    max-width: 20rem;
  }

  .webflow-home .home-hero-copy .u-text p {
    font-size: 1rem;
    line-height: 1.5;
  }

  .webflow-home .home-hero-actions {
    width: 100%;
    flex-wrap: wrap;
    gap: 0.55rem;
  }

  .webflow-home .home-hero-actions .button_main_element {
    padding: 0.65rem 1rem;
    font-size: 0.8125rem;
  }

  .webflow-home .home-hero-approval {
    top: min(calc(63.5svh - 4.75rem), 29.25rem);
    right: 1rem;
    bottom: auto;
    min-width: 8.5rem;
    gap: 0.6rem;
    padding: 0.6rem 0.75rem;
  }

  .webflow-home .home-hero-approval-icon {
    width: 1.6rem;
    height: 1.6rem;
  }

  .webflow-home .home-hero-approval-copy strong {
    font-size: 1.45rem;
  }
}

.uk-hero-heading {
  width: 660px;
  height: 228px;
  margin: 0 auto;
  color: #FFFFFF;
  font-family: 'Bagosscondensed', 'Bagoss', Arial, sans-serif;
  font-style: normal;
  font-weight: 600;
  font-size: 84px;
  line-height: 90%;
  text-align: center;
  letter-spacing: -0.01em;
  text-transform: uppercase;
  white-space: nowrap;
  flex: none;
  order: 0;
  flex-grow: 0;
}

/* UK hero headline inside the shared hero layout. */
.webflow-home .home-hero-copy .uk-hero-heading {
  width: 100%;
  max-width: 660px;
  height: auto;
  min-height: 228px;
  margin: 0;
  text-align: left;
}

/* Give the UK hero copy enough room for the 660px headline without wrapping. */
.uk-home-hero .home-hero-copy {
  width: min(42rem, 54vw);
  max-width: 660px;
}

/* UK homepage frame from the 1728px Figma composition. */
.uk-home-hero {
  box-sizing: border-box;
  width: 100%;
  padding: 0 20px 20px;
  background: var(--swatch--white);
}

.uk-home-hero .home-hero-overlay {
  left: auto;
  width: 100%;
  border-radius: 0 0 20px 20px;
}

@media (max-width: 767px) {
  .uk-hero-heading {
    width: 100%;
    max-width: 660px;
    height: auto;
    min-height: auto;
    font-size: clamp(2.75rem, 11vw, 4rem);
  }

  .webflow-home .home-hero-copy .uk-hero-heading {
    text-align: left;
  }

  .uk-home-hero .home-hero-copy {
    width: min(30rem, 72%);
    max-width: none;
  }
}

@media (max-width: 600px) {
  .uk-hero-heading {
    font-size: clamp(2.25rem, 10.5vw, 3.25rem);
    line-height: 0.95;
    white-space: normal;
  }
}

/* UK homepage hero: exactly one viewport tall on desktop so the whole
   hero (headline, copy, both CTAs) is visible at 100% zoom without scroll.
   Content matches the Figma reference: centered 660px column, 24px gaps. */
@media (min-width: 992px) {
  .uk-home-hero .home-hero-overlay {
    height: clamp(30.5rem, calc((100vw - 40px) * 0.50415), 53.1875rem);
    min-height: 0;
    max-height: calc(100svh - 20px);
  }

  .uk-home-hero .home-hero-content {
    height: 100%;
    min-height: 0;
    max-height: none;
    justify-content: center;
    padding: clamp(5.5rem, 10vh, 7.5rem) clamp(2rem, 5vw, 5rem) clamp(2rem, 5vh, 3rem);
  }

  .uk-home-hero .home-hero-copy {
    width: min(660px, 52vw);
    max-width: 660px;
    align-items: center;
    gap: 24px;
    transform: translateX(clamp(-3.25rem, -3vw, -1.75rem));
  }

  .uk-home-hero .home-hero-copy .uk-hero-heading {
    text-align: center;
    font-size: clamp(3rem, 4.86vw, 5.25rem);
  }

  .uk-home-hero .home-hero-copy .u-text {
    max-width: 454px;
  }

  .uk-home-hero .home-hero-copy .u-text p {
    font-family: 'InterCashera', 'Inter', sans-serif;
    font-weight: 500;
    font-size: 16px;
    line-height: 140%;
    text-align: center;
  }

  .uk-home-hero .home-hero-actions {
    justify-content: center;
    gap: 8px;
  }

  .uk-home-hero .home-hero-button .button_main_element {
    display: flex;
    width: 140px;
    min-width: 100px;
    height: 45px;
    align-items: center;
    justify-content: center;
    padding: 8px 16px;
    border-radius: 100px;
  }

  .uk-home-hero .home-hero-button .button_main_text {
    font-family: 'InterCashera', 'Inter', sans-serif;
    font-weight: 600;
    font-size: 15px;
    line-height: 20px;
    letter-spacing: 0;
    color: var(--swatch--dark-90);
    white-space: nowrap;
  }
}

/* UK mobile hero: compact spacing so headline, subtext and both CTAs are
   visible at 100% zoom without scrolling on phones. */
@media (max-width: 991px) {
  .uk-home-hero {
    padding-inline: 12px;
    padding-bottom: 12px;
  }

  .uk-home-hero .home-hero-overlay {
    height: auto;
    min-height: auto;
    border-radius: 0 0 16px 16px;
  }

  .uk-home-hero .home-hero-content {
    min-height: auto;
    height: auto;
    padding-top: 4.5rem;
    padding-bottom: 2rem;
  }

  .uk-home-hero .home-hero-copy {
    gap: 0.85rem;
  }
}

@media (max-width: 600px) {
  .uk-home-hero .home-hero-media {
    height: 46svh;
    min-height: 20rem;
    max-height: 25rem;
  }

  .uk-home-hero .home-hero-content {
    padding: 1.5rem 1.5rem 1.75rem;
  }

  .uk-home-hero .home-hero-copy {
    width: 100%;
    max-width: none;
    gap: 0.8rem;
  }

  .webflow-home .home-hero-copy .uk-hero-heading,
  .uk-home-hero .uk-hero-heading {
    min-height: 0;
    height: auto;
    font-size: clamp(1.8rem, 8.5vw, 2.4rem);
    line-height: 0.95;
  }

  .uk-home-hero .home-hero-copy .u-text p {
    font-size: 0.9375rem;
    line-height: 1.45;
  }
}