@charset "UTF-8";
/* ==========================================================================
   Hero (slider)
   ========================================================================== */

.hero {
  position: relative;
  height: 810px;
  overflow: hidden;
  color: var(--c-white);
  isolation: isolate;
}

.hero__bg {
  position: absolute;
  inset: 0;
  z-index: -2;
  opacity: 0;
}
.hero__bg img {
  width: 100%;
  height: 100%;
  object-fit: cover;
}
.hero__bg {
  /* Prototype: slides change with a plain dissolve (background + photos together).
     The outgoing slide stays opaque underneath while the new one fades in on top. */
}
.hero__bg.is-prev {
  opacity: 1;
}
.hero__bg.is-active {
  z-index: -1;
  opacity: 1;
  animation: hero-dissolve 2s ease-in-out;
}

@keyframes hero-dissolve {
  from {
    opacity: 0;
  }
}
.hero__overlay {
  position: absolute;
  inset: 0;
  z-index: -1;
  background: var(--c-primary);
  opacity: 0.75;
}

.hero__inner {
  position: relative;
  height: 100%;
  max-width: calc(var(--container) + 48px);
  margin-inline: auto;
  padding-inline: 24px;
}

/* Right column: 150px from the top (Figma: 200px; moved up 50px to sit closer to the menu) */
.hero__content {
  position: absolute;
  top: 150px;
  right: 24px;
  width: 560px; /* Figma "Frame 2147223983": text, partner logos and button, 42px apart */
  display: flex;
  flex-direction: column;
  align-items: flex-start; /* RTL: right edge */
  gap: 42px;
}

.hero__text {
  display: flex;
  flex-direction: column;
  align-items: flex-start;
  gap: 24px;
}

.hero__title {
  padding: 10px;
  background: linear-gradient(to right, var(--c-secondary-light), var(--c-secondary));
}
.hero__title span {
  display: block;
  width: 365px;
  min-height: 56px;
  font-size: var(--fs-h3);
  font-weight: 700;
  line-height: 1.2;
  color: var(--c-gray-light);
  text-align: right;
}

.hero__lead {
  width: 500px; /* Figma: 557px, narrowed to 500px; right edge flush with the title */
  padding: 10px 0;
  /* Shortened text, 2px smaller than the sub2 size, so it covers less of the photo (18px on desktop) */
  font-size: calc(var(--fs-sub2) - 2px);
  font-weight: 500;
  line-height: 1.5;
  /* Justified: every line starts and ends at the same edge; the last line stays on the right */
  text-align: justify;
  text-align-last: right;
}
/* The fixed line breaks would stop those lines from stretching to the edge */
.hero__lead br.br-lg {
  display: none;
}

/* Awj group companies (Figma "Frame 2147223982"): one row of logos.
   The white SVGs from the brand pack are cropped to the logo itself and shown at 92% of the
   Figma widths, so a 28px gap fits between them and the row still fits the 560px column */
.hero__logos {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 12px 28px;
  margin: 0;
  padding: 0;
  list-style: none;
}
.hero__logos img {
  display: block;
  height: auto;
  max-width: none;
}

.hero__cta {
  width: 250px;
  height: 50px;
  padding: 13px 34px;
  display: inline-flex;
  align-items: center;
  justify-content: flex-end; /* RTL: content hugs the left edge as in Figma */
  gap: 8px;
  background: var(--c-supportive-dark);
  border-top-left-radius: 6px;
  border-bottom-right-radius: 6px;
  filter: drop-shadow(0 4px 2px rgba(255, 255, 255, 0.15));
  font-size: 16px;
  line-height: 1.35;
  white-space: nowrap;
  color: var(--c-white);
  /* Prototype: hover = smart animate, ease-in-out 300ms */
  transition: background-color 0.3s ease-in-out, color 0.3s ease-in-out;
}
.hero__cta svg {
  flex-shrink: 0;
  width: 24px;
  height: 24px;
}
.hero__cta.is-disabled {
  cursor: default;
}
/* Hover (Figma "Main CTA" Variant2): #FCE4E1 fill, #003059 text + icon */
.hero__cta:hover,
.hero__cta:focus-visible {
  background: #fce4e1;
  color: var(--c-primary);
}

.hero__squares {
  position: absolute;
  top: 181px;
  left: 289px;
  width: 172px;
  height: 142px;
  animation: squares-float 6s ease-in-out infinite;
}

@keyframes squares-float {
  0%, 100% {
    transform: translate(0, 0);
  }
  50% {
    transform: translate(5px, -8px);
  }
}
/* Left photo (frame 74:1982): one 290 x 370 photo per slide, bottom-aligned */
.hero__photos {
  position: absolute;
  top: 301px;
  left: 24px;
  width: 784px;
  height: 370px;
}

.hero__photo-set {
  position: absolute;
  inset: 0;
  direction: ltr;
  display: flex;
  align-items: flex-end;
  gap: 32px;
  pointer-events: none;
  opacity: 0;
}
.hero__photo-set.is-prev {
  opacity: 1;
}
.hero__photo-set.is-active {
  z-index: 1;
  opacity: 1;
  animation: hero-dissolve 2s ease-in-out;
}

.hero__photo {
  margin: 0;
  flex-shrink: 0;
  border: 4px solid var(--c-white);
  border-top-left-radius: 12px;
  border-bottom-right-radius: 12px;
  overflow: hidden;
}
.hero__photo img {
  width: 100%;
  height: 100%;
  object-fit: cover;
}
.hero__photo--1 {
  width: 290px;
  height: 370px;
  border-color: var(--c-gray-light);
}

.hero__pagination {
  position: absolute;
  top: 742px;
  left: 50%;
  transform: translateX(-50%);
  display: flex;
  align-items: center;
  gap: 12px;
}


/* ---------- Responsive ---------- */
@media (max-width: 1280px) {
  .hero__photos {
    transform: scale(0.85);
    transform-origin: left bottom;
  }
  .hero__squares {
    left: 249px;
    top: 220px;
  }
}
@media (max-width: 1100px) {
  .hero {
    height: auto;
    min-height: 100vh;
  }
  .hero__inner {
    display: flex;
    flex-direction: column;
    gap: 48px;
    padding-top: calc(var(--header-h) + 64px);
    padding-bottom: 96px;
  }
  .hero__content {
    position: static;
    width: 100%;
    gap: 48px;
  }
  .hero__lead,
  .hero__title span {
    width: auto;
    max-width: 560px;
  }
  .hero__squares {
    display: none;
  }
  .hero__photos {
    position: relative;
    inset: auto;
    transform: none;
    width: 100%;
    height: clamp(220px, 40vw, 370px);
  }
  .hero__photo-set {
    gap: 16px;
  }
  .hero__photo--1 {
    width: auto;
    height: 100%;
    aspect-ratio: 290 / 370;
  }
  .hero__pagination {
    top: auto;
    bottom: 40px;
  }
}
@media (max-width: 576px) {
  .hero__photo-set {
    gap: 10px;
  }
  .hero__photo {
    border-width: 3px;
  }
  .hero__cta {
    width: 100%;
    justify-content: center;
  }
}

/* ---------- Fit the screen height ----------
   The hero is designed 810px high. On laptops whose browser window is shorter than that
   (for example 1366 x 768 screens), components/hero/hero.js sets --hero-scale (between 0.7
   and 1) and the hero is drawn smaller, so the photo, the button and the slide dots are all
   visible without cropping. The text column stays on the right edge and the photo on the
   left edge, lined up with the header, as on a large screen. */
@media (min-width: 1101px) {
  .hero {
    height: calc(810px * var(--hero-scale, 1));
  }
  .hero__content {
    top: calc(150px * var(--hero-scale, 1));
    transform: scale(var(--hero-scale, 1));
    transform-origin: 100% 0;
  }
  .hero__photos {
    top: calc(301px * var(--hero-scale, 1));
    transform: scale(var(--hero-scale, 1));
    transform-origin: 0 0;
  }
  .hero__squares {
    top: calc(181px * var(--hero-scale, 1));
    left: calc(24px + 265px * var(--hero-scale, 1));
    width: calc(172px * var(--hero-scale, 1));
    height: calc(142px * var(--hero-scale, 1));
  }
  .hero__pagination {
    top: calc(742px * var(--hero-scale, 1));
  }
}
/* 1101–1280px wide: the photo is also 15% smaller (as before) */
@media (min-width: 1101px) and (max-width: 1280px) {
  .hero__photos {
    top: calc(356.5px * var(--hero-scale, 1));
    transform: scale(calc(0.85 * var(--hero-scale, 1)));
  }
  .hero__squares {
    top: calc(220px * var(--hero-scale, 1));
    left: calc(24px + 225px * var(--hero-scale, 1));
  }
}