/* ========================================
   FOUC guard — see animations.js header for the contract.
   Elements here are tweened IN from opacity:0 in the hero entrance
   timeline. Hiding them under `body.has-animations` prevents the brief
   flash of visible-then-invisible on slow mobile JS parse.
   ======================================== */
body.has-animations .hero__logo,
body.has-animations .hero__headline,
body.has-animations .hero__ctas,
body.has-animations .hero__photo {
  opacity: 0;
}

/* ========================================
   Hero — Layout
   ======================================== */

/* Parallax container */
.parallax {
  position: relative;
}

/* Photos: absolute, spanning both hero + stats zones.
   lvh (not vh) so the container height is stable across mobile URL-bar
   toggles — see reset.css for the full viewport-unit convention. */
.parallax > .hero__photos {
  position: absolute;
  top: 0;
  left: 0;
  right: 0;
  height: 200vh;
  height: 200lvh;
  overflow-x: clip;
  pointer-events: none;
  z-index: 3;
}

/* Zones: one viewport per snap section.
   lvh keeps zone height constant when the mobile URL bar toggles, so
   scroll-snap targets don't shift mid-scroll. See reset.css. */
.parallax__zone {
  height: 100vh;
  height: 100lvh;
  position: relative;
  display: flex;
  align-items: center;
  justify-content: center;
  scroll-snap-align: start;
  scroll-snap-stop: always;
}

.parallax__zone--stats {
  height: 100vh;
  height: 100lvh;
}

/* Exit snap point — lets mandatory snap release into free scroll */
#solutions {
  scroll-snap-align: start;
}

/* Hero content: position: sticky so it stays visually centred within the 100vh hero
   zone while the user scrolls.
   Centering: top: 50% + GSAP yPercent: -50 (set in animations.js §init)
   so it stacks cleanly with the §1 entrance timeline's transforms. §12a fades it out
   via autoAlpha — at opacity 0, visibility: hidden makes the element and its
   descendants inert (no click-through). */
.parallax__zone--hero .hero__content {
  position: sticky;
  top: 50%;
  width: 100%;
  max-width: var(--max-width-narrow);
  margin-inline: auto;
  z-index: 1;
  text-align: center;
  padding-inline: var(--gutter);
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: var(--space-md);
  pointer-events: none;
}

.parallax__zone--hero .hero__content > * {
  pointer-events: auto;
}

/* Stats: centred via parent flex */
.parallax__stats {
  z-index: 2;
}

/* Individual photo cards */
.hero__photo {
  position: absolute;
  border-radius: var(--radius-lg);
  box-shadow: var(--shadow-md);
  overflow: hidden;
  pointer-events: auto;
}

/* picture wrapper must fill the .hero__photo container so the img (sized 100% of picture) can cover it */
.hero__photo picture {
  display: block;
  width: 100%;
  height: 100%;
}

.hero__photo img {
  display: block;
  width: 100%;
  height: 100%;
  object-fit: cover;

}

/* Hero-section photos — positioned in the first 100vh (0-50%) of the 200vh container */

/* Top-left: largest (reference size; gradient scales down from here) */
.hero__photo--p1 {
  top: -7%;
  left: 16%;
  transform: rotate(-6deg);
  width: clamp(200px, 21vw, 300px);
  aspect-ratio: 1;
  box-shadow: var(--shadow-lg);
  z-index: 5;
}

/* Top-right: large — mobile: tucked left; desktop: top-right */
.hero__photo--p5 {
  top: 45%;
  left: -4%;
  transform: rotate(-5deg);
  width: clamp(220px, 19vw, 270px);
  aspect-ratio: 1;
  box-shadow: var(--shadow-lg);
  z-index: 5;
}

/* Mid-left edge: medium */
.hero__photo--p3 {
  top: 18%;
  left: -3%;
  transform: rotate(-4deg);
  width: clamp(130px, 14vw, 200px);
  aspect-ratio: 1;
  box-shadow: var(--shadow-md);
  z-index: 5;
}

/* Mid-right: small-medium — mobile: bottom-right; desktop: mid-right */
.hero__photo--p2 {
  top: 46%;
  right: -4%;
  transform: rotate(6deg);
  width: clamp(150px, 12vw, 180px);
  aspect-ratio: 1;
  box-shadow: var(--shadow-md);
  z-index: 5;
}

/* Behind hero text: smallest — mobile: pushed right; desktop: behind text */
.hero__photo--p4 {
  top: 47%;
  left: 45%;
  transform: rotate(3deg);
  width: clamp(120px, 10vw, 150px);
  aspect-ratio: 1;
  box-shadow: var(--shadow-md);
  z-index: 0;
}

/* Stats-section photos — positioned in the second 100vh of the 200vh container */

/* Left edge, small */
.hero__photo--p6 {
  top: 56%;
  left: -2%;
  transform: rotate(-5deg);
  width: clamp(100px, 11vw, 170px);
  aspect-ratio: 1;
  box-shadow: var(--shadow-md);
  z-index: 5;
}

/* Right edge, medium */
.hero__photo--p7 {
  top: 68%;
  right: -1%;
  transform: rotate(4deg);
  width: clamp(130px, 14vw, 220px);
  aspect-ratio: 1;
  box-shadow: var(--shadow-md);
  z-index: 5;
}

/* Left edge, small */
.hero__photo--p8 {
  bottom: 0%;
  left: 5%;
  transform: rotate(3deg);
  width: clamp(90px, 10vw, 150px);
  aspect-ratio: 1;
  box-shadow: var(--shadow-md);
  z-index: 5;
}


.hero__tag {
  display: inline-block;
  background: var(--color-primary-100);
  color: var(--color-primary-800);
  text-transform: uppercase;
  padding: var(--sp-2) var(--sp-4);
  border-radius: var(--radius-pill);
}

.hero__logo {
  display: block;
  margin: 0 auto;
}

.hero__logo img {
  display: block;
  height: 64px;
  width: auto;
}

/* >= --bp-tablet */
@media (min-width: 720px) {
  .hero__logo img { height: 91px; }
}

/* >= --bp-desktop */


.hero__headline {
  color: var(--color-base-900);
  margin-bottom: 0;
}

.hero__subtext {
  color: var(--color-base-500);
  max-width: 48ch;
  margin-bottom: 0;
}

.hero__ctas {
  display: flex;
  flex-wrap: wrap;
  gap: var(--space-sm);
  justify-content: center;
}

/* Mobile baseline: hide flanking photos (performance + layout breathing room);
   keep the two main photos (p2, p4, p5) which frame the hero content. */
.hero__photo--p1,
.hero__photo--p3,
.hero__photo--p6,
.hero__photo--p7,
.hero__photo--p8 {
  display: none;
}

/* >= --bp-tablet — restore desktop photo positions + show flanking photos */
@media (min-width: 720px) {
  .hero__photo--p1,
  .hero__photo--p3,
  .hero__photo--p6,
  .hero__photo--p7,
  .hero__photo--p8 {
    display: block;
  }

  .hero__photo--p5 {
    top: 2%;
    left: auto;
    right: 6%;
  }

  .hero__photo--p2 {
    top: 30%;
    right: 12%;
  }

  .hero__photo--p4 {
    top: 38%;
    left: 30%;
  }
}


/* ========================================
   Stats
   ======================================== */

.stats__grid {
  display: flex;
  flex-wrap: wrap;
  justify-content: center;
  gap: var(--space-xl);
}

.stats__item {
  display: flex;
  align-items: center;
  gap: var(--sp-1);
  flex-direction: column;
  text-align: center;
}

.stats__item .stat__number {
  color: #414651;
  white-space: nowrap;
}

.stat__number--accent {
  color: var(--color-primary-700);
}

.stats__item .stat__label {
  color: var(--color-base-500);
  max-width: 130px;
}

/* Trusted by */
.stats__proof {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: var(--space-md);
  margin-top: var(--space-2xl);
}

.stats__proof-label {
  color: var(--color-base-500);
}

.stats__proof-logos {
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  flex-wrap: wrap;
  gap: var(--space-md);
  opacity: .7;
}

.stats__proof-logo {
  /* Fluid logo height: 22px at mobile → 28px at desktop */
  height: clamp(1.375rem, 1.1rem + 0.7vw, 1.75rem);
  width: auto;
}

/* >= --bp-tablet — stats restore horizontal layout */
@media (min-width: 720px) {
  .stats__item {
    flex-direction: row;
    text-align: left;
    gap: var(--sp-3);
  }

  .stats__proof-logos {
    flex-direction: row;
    gap: var(--space-xl);
  }
}


/* ========================================
   Bento Grid — slides over hero tail
   ======================================== */


.bento__header {
  display: flex;
  flex-direction: column;
  align-items: flex-start;
  margin-bottom: var(--space-lg);
  gap: var(--space-md);
}

.bento__header h2 {
  margin-bottom: var(--sp-3);
}

.bento__lead {
  color: var(--color-text-light);
  max-width: 52ch;
  margin-bottom: 0;
}

.bento__link {
  color: var(--color-primary);
  text-decoration: none;
  white-space: nowrap;
  display: inline-flex;
  align-items: center;
  gap: var(--sp-2);
  flex-shrink: 0;
  transition: gap var(--duration-base) var(--ease-out);
}

.bento__link:hover {
  gap: var(--sp-3);
}


/* Mobile baseline: everything stacks */
.bento__layout {
  display: flex;
  flex-direction: column;
  gap: var(--space-sm);
  align-items: stretch;
}

.bento__grid {
  flex: 1;
  display: grid;
  grid-template-columns: 1fr;
  grid-template-rows: auto;
  gap: var(--space-lg);
  background: var(--color-base-white);
  border-radius: var(--radius-2xl);
  padding: 0;
  box-shadow: 0 24px 48px rgba(44, 47, 48, 0.06);
  overflow: hidden;
}

.bento__aside {
  width: 100%;
  flex-shrink: 0;
  display: flex;
  flex-direction: column;
  gap: var(--space-sm);
  margin-top: var(--sp-26);
}

/* Shared card base — mobile: no individual card styling (grid is the card);
   tablet+: each card gets its own background/radius/shadow */
.bento__card {
  background: transparent;
  border-radius: 0;
  padding: 0;
  box-shadow: none;
  overflow: hidden;
  position: relative;
  transition: box-shadow var(--duration-slow) var(--ease-expressive);
}


/* Large card: full width of grid, row 1 */
.bento__card--large {
  grid-column: 1 / -1;
  grid-row: 1;
  display: flex;
  flex-direction: column;
  justify-content: flex-start;
  align-items: center;
  gap: var(--sp-5);
}

.bento__card--large .bento__card-content {
  position: relative;
  z-index: 2;
  display: flex;
  flex-direction: column;
  align-items: flex-start;
  gap: var(--sp-4);
  padding: var(--sp-10) var(--sp-8) 0;
}

/* iPhone mockup: col 3, row 1 only — matches large card height */
.bento__phone {
  flex: 1;
  display: flex;
  align-items: flex-start;
  justify-content: center;
  overflow: hidden;
  min-height: 0;
}

/* CSS iPhone device frame */
.bento__phone-img {
  display: block;
  width: 100%;
  max-width: 280px;
  height: auto;
}

/* Legacy CSS-drawn phone chrome — retained unused for the london variant
   since the iPhone is now a single static image. */
.bento__phone-device {
  position: relative;
  width: 100%;
  max-width: 280px;
  aspect-ratio: 9 / 19.5;
  background: var(--color-base-white);
  border-radius: 44px;
  border: 6px solid #1a1a1a;
  box-shadow: 0 24px 48px rgba(44, 47, 48, 0.08), inset 0 0 0 2px #2a2a2a;
  overflow: hidden;
}

/* Notch */
.bento__phone-notch {
  position: absolute;
  top: 0;
  left: 50%;
  transform: translateX(-50%);
  width: 120px;
  height: 28px;
  background: #1a1a1a;
  border-radius: 0 0 20px 20px;
  z-index: 2;
}

/* Scrollable screen area */
.bento__phone-screen {
  width: 100%;
  height: 100%;
  overflow: hidden;
  border-radius: 38px;
}

/* Hide scrollbar */
.bento__phone-screen::-webkit-scrollbar {
  display: none;
}

.bento__phone-screen {
  scrollbar-width: none;
}

.bento__phone-screen img {
  width: 100%;
  height: auto;
  display: block;
}

/* Accent card — mobile: transparent on white grid; tablet+: coloured */
.bento__card--accent {
  background: transparent;
  color: var(--color-base-900);
  border-radius: 0;
  padding: 0 var(--sp-8);
}

.bento__card--accent h3,
.bento__card--accent h4 {
  color: var(--color-base-900);
}

.bento__card--accent p {
  color: var(--color-text-light);
}

/* Illustrated card — mobile: no bg, illustration floats right;
   tablet+: coloured bg with absolute illustration */
.bento__card--illustrated {
  position: relative;
  overflow: visible;
  padding: 0 var(--sp-8);
  background: transparent;
  align-items: flex-start;
  border-radius: 0;
}

/* Mobile: hide illustration; tablet+: restore via media query */
.bento__card-illustration {
  display: none;
  pointer-events: none;
}

/* Mobile: dark text on white grid; tablet+: white text restored via media query */
.bento__card-illustrated-text h4 {
  color: var(--color-base-900);
  margin-bottom: var(--sp-2);
}

.bento__card--illustrated .bento__card-illustrated-text p {
  color: var(--color-text-light);
}

/* Small cards: row 2 */
.bento__card--small {
  padding: 32px;
  display: flex;
  flex-direction: column;
  justify-content: center;
}

/* Small cards — centre text on mobile */
.bento__card--small {
  text-align: center;
  align-items: center;
}

.bento__card--small:not(.bento__card--illustrated) {
  padding-bottom: 0;
}


/* Illustrated small card: mobile uses standard padding with extra bottom;
   tablet+ restores left clearance for absolute illustration */
.bento__card--small.bento__card--illustrated {
  padding: var(--sp-8) var(--sp-8) var(--sp-20);
}

/* App rating */
.bento__app-rating {
  display: flex;
  flex-direction: column;
  justify-content: center;
  align-items: center;
  text-align: center;
  gap: var(--sp-3);
  padding-top: var(--sp-3);
  padding-bottom: var(--sp-5);
}
.bento__rating-text {
  display: flex;
  flex-direction: column;
  align-items: center;
  
}

.bento__rating-score {
  display: flex;
  align-items: center;
  gap: var(--sp-2);
}

.bento__rating-number {
  color: var(--color-base-700);
}

.bento__rating-star {
  /* Glyph sizing — star rendered proportional to parent rating text. */
  font-size: var(--text-lg);
  color: var(--color-primary-800);
}

.bento__rating-label {
  color: var(--color-base-500);
}

/* Icon styles */
.bento__card-thumb {
  width: 60px;
  height: 60px;
  border-radius: var(--radius-md);
  object-fit: cover;
}

.bento__icon {
  /* Glyph sizing — emoji/icon character rendered at fixed visual size. */
  font-size: 1.5rem;
  line-height: 1;
  margin-bottom: var(--sp-2);
  display: block;
}

.bento__icon--circle {
  display: flex;
  align-items: center;
  justify-content: center;
  width: 48px;
  height: 48px;
  border-radius: 50%;
  background: var(--color-primary-100);
  color: var(--color-primary-800);
  /* Glyph sizing — icon fills the circle. */
  font-size: 1.25rem;
  margin-bottom: var(--sp-4);
}

/* Decorative image area inside large card
   Mobile: tilted editorial photo, clips at grid overflow.
   Desktop: absolute bottom-right with rotation. */
.bento__card-image {
  position: relative;
  width: 80%;
  height: 170px;
  border-radius: var(--radius-xl);
  transform-origin: center center;
  overflow: hidden;
}

.bento__card-image picture {
  display: block;
  width: 100%;
  height: 100%;
}

.bento__card-image img {
  width: 100%;
  height: 100%;
  object-fit: cover;
}


.bento__card h3 {
  margin-bottom: var(--sp-3);
}

.bento__card h4 {
  margin-bottom: var(--sp-2);
}

.bento__card p {
  color: var(--color-text-light);
  margin-bottom: var(--space-sm);
  max-width: var(--content-measure);
}

.bento__card--small p {
  margin-bottom: 0;
  max-width: none;
}

/* >= --bp-tablet: grid becomes 2-col; restore individual card styling */
@media (min-width: 720px) {
  .bento__grid {
    background: transparent;
    border-radius: 0;
    padding: 0;
    box-shadow: none;
    overflow: visible;
    grid-template-columns: repeat(2, 1fr);
    grid-template-rows: auto auto;
    gap: var(--space-sm);
  }

  .bento__card:not(.bento__card--accent) {
    background: var(--color-base-white);
    border-radius: var(--radius-2xl);
    padding: 40px;
    box-shadow: 0 24px 48px rgba(44, 47, 48, 0.06);
  }

  .bento__card--large .bento__card-content {
    padding: 0;
  }

  .bento__card--small {
    text-align: left;
    align-items: flex-start;
  }

  .bento__card--small.bento__card--illustrated  {
    padding: var(--sp-8) var(--sp-8) var(--sp-8) var(--sp-26);
  }

  /* Context override: small bento cards share a row at tablet+, so their
     titles shrink one step. Keeps Bricolage + 600 weight from .headline-small;
     only font-size changes. Scoped to this context only — not a general rule. */
  .bento__card--small h4.headline-small,
  .bento__card-illustrated-text h4.headline-small {
    font-size: var(--text-lg);
  }

  .bento__card-image {
    border-radius: var(--radius-2xl);
    transform: none;
    width: 100%;
    margin-left: 0;
    min-height: 160px;
  }

  .bento__card--accent {
    background: var(--color-primary-800);
    color: var(--color-base-white);
    border-radius: var(--radius-2xl);
    padding: 40px;
  }

  .bento__card--accent h3,
  .bento__card--accent h4 {
    color: var(--color-neutral-100);
  }

  .bento__card--accent p {
    color: rgba(255, 255, 255, 0.85);
  }

  .bento__card--illustrated {
    background: #576ACF;
    border-radius: var(--radius-2xl);
    padding: 24px 32px 24px 180px;
    align-items: center;
  }

  .bento__card-illustrated-text h4 {
    color: var(--color-base-white);
  }

  .bento__card--illustrated .bento__card-illustrated-text p {
    color: var(--color-neutral-100);
  }

  .bento__card-illustration {
    display: block;
    position: absolute;
    left: -24px;
    right: auto;
    top: 50%;
    transform: translate(0, -50%);
    height: 150px;
    width: auto;
  }

  .bento__card--large {
    grid-column: 1 / -1;
    grid-row: 1;
    min-height: 360px;
  }

  .bento__aside {
    flex-direction: column;
  }
}

/* >= --bp-desktop: full two-column layout with aside on the right */
@media (min-width: 1024px) {
  .bento__header {
    flex-direction: row;
    justify-content: space-between;
    align-items: flex-end;
    gap: var(--space-lg);
  }

  .bento__layout {
    flex-direction: row;
  }

  .bento__grid {
    grid-template-rows: 520px 200px;
  }

  .bento__aside {
    width: 320px;
    flex-direction: column;
    margin-top: 0;
  }
  .bento__app-rating {
    padding: 0;
  }

  .bento__phone {
    max-height: none;
  }

  .bento__card--large {
    min-height: auto;
  }
  
  .bento__card--large p {
    min-height: auto;
    width: 80%;
  }

  .bento__card-image {
    position: absolute;
    bottom: -10%;
    right: -10%;
    width: 60%;
    height: 60%;
    /* Rotation is set by GSAP (fromTo in animations.js §4) so it can
       animate the entrance and land at the resting angle. Keeping CSS
       transform-origin here — it's not a transform property, just the
       anchor point GSAP reads. */
    transform-origin: bottom right;
    margin-top: 0;
  }
}


/* ========================================
   How It Works — Rotating Cycle
   ======================================== */

/* Section: 500vh tall (100vh sticky + 4 × 100vh scroll targets) */
/* ========================================
   How We Work
   ======================================== */

.how-we-work {
  position: relative;
  padding-bottom: var(--space-2xl);
}

/* White faded blur — centred in section */
.how-we-work::before {
  content: '';
  position: absolute;
  top: 50%;
  left: 50%;
  transform: translate(-50%, -50%);
  width: 70%;
  height: 70%;
  border-radius: 50%;
  background: var(--color-base-white);
  opacity: 0.6;
  filter: blur(80px);
  pointer-events: none;
  z-index: 0;
}

/* Mobile baseline: single column, heading scrolls with content */
.how-we-work__layout {
  position: relative;
  z-index: 1;
  display: grid;
  grid-template-columns: 1fr;
  gap: var(--space-xl);
  align-items: start;
}

.how-we-work__heading {
  position: static;
}

.how-we-work__heading h2 {
  max-width: none;
}

.how-we-work__steps {
  display: flex;
  flex-direction: column;
  gap: var(--space-xl);
}

.how-we-work__step {
  display: flex;
  align-items: flex-start;
  gap: var(--space-sm);
}

/* Icon: 80px at mobile, scales up at desktop */
.how-we-work__icon {
  position: relative;
  flex-shrink: 0;
  width: 80px;
  height: 80px;
  transform-origin: bottom left;
}

.how-we-work__icon-backdrop {
  display: none;
}

.how-we-work__icon img {
  position: relative;
  z-index: 1;
  width: 100%;
  height: 100%;
  object-fit: contain;
}

/* Text block */
.how-we-work__text {
  padding-top: var(--sp-2);
}

.how-we-work__text h3 {
  margin-bottom: var(--sp-3);
}

.how-we-work__text p {
  color: var(--color-text-light);
  max-width: 50ch;
}

/* >= --bp-tablet: steps restore horizontal layout */
@media (min-width: 720px) {
  .how-we-work__step {
    flex-direction: row;
    gap: var(--space-md);
  }
}

/* >= --bp-desktop: 2-column layout with sticky heading */
@media (min-width: 1024px) {
  .how-we-work__layout {
    grid-template-columns: 1fr 1.8fr;
    gap: var(--space-2xl);
  }

  .how-we-work__heading {
    position: sticky;
    top: 140px; /* clear the fixed header (122px) + breathing room */
    align-self: start;
  }

  .how-we-work__heading h2 {
    max-width: 12ch;
  }

  .how-we-work__step {
    gap: var(--space-xl);
  }

  .how-we-work__icon {
    width: clamp(100px, 12vw, 164px);
    height: clamp(100px, 12vw, 164px);
  }
}


/* ========================================
   Partners
   ======================================== */

/* Partners follows the cycle section */
section.partners {
  position: relative;
  z-index: 5;
  margin-top: 0;
  padding-bottom: 0;
}

.partners__wrapper {
  position: relative;
  background: #576ACF;
  border-radius: var(--radius-2xl) var(--radius-2xl) 0 0;
  box-shadow: 0 -4px 32px rgba(44, 47, 48, 0.06);
  padding-top: var(--space-2xl);
  padding-bottom: 0;
  color: #fff;
  isolation: isolate;
}

.partners__bg-overlay {
  position: absolute;
  inset: 0;
  z-index: -1;
  background: var(--color-dusk-violet);
  border-radius: inherit;
  opacity: 0;
  pointer-events: none;
  will-change: opacity;
}

.partners__layout {
  display: flex;
  flex-direction: column;
  gap: var(--space-xl);
  padding-bottom: var(--space-2xl);
}

/* Mobile baseline: intro stacks, centred */
.partners__intro {
  display: flex;
  flex-direction: column;
  align-items: center;
  text-align: center;
  gap: var(--space-md);
}

.partners__intro-left {
  display: flex;
  flex-direction: column;
  gap: var(--space-sm);
  flex: 1;
}

.partners__intro h2,
.partners__intro h3 {
  margin-bottom: 0;
  color: #fff;
}

.partners__intro p {
  color: rgba(255, 255, 255, 0.8);
  margin-bottom: 0;
  flex: none;
  align-self: center;
}

.partners__badges {
  display: flex;
  flex-wrap: wrap;
  justify-content: center;
  gap: var(--sp-3);
  margin-top: var(--sp-2);
}

.partners__badge {
  color: #fff;
  background: rgba(255, 255, 255, 0.15);
  border: 1px solid rgba(255, 255, 255, 0.25);
  padding: var(--sp-2) var(--sp-4);
  border-radius: var(--radius-pill);
}

/* Mobile baseline: 1-column grid */
.partners__cards {
  display: grid;
  grid-template-columns: 1fr;
  gap: var(--space-md);
}

/* Mobile baseline: each card stacks (image on top, body below), centred */
.partners__card {
  display: flex;
  flex-direction: column;
  gap: var(--space-sm);
  padding: var(--sp-8);
  background: rgba(255, 255, 255, 0.12);
  border-radius: var(--radius-xl);
  text-decoration: none;
  color: #fff;
  transition: box-shadow var(--duration-slow) var(--ease-expressive),
              transform var(--duration-slow) var(--ease-expressive),
              background var(--duration-slow) var(--ease-expressive);
  align-items: center;
  text-align: center;
}

/* :hover lift removed — partners cards are display-only on the london branch. */

.partners__card-img {
  flex-shrink: 0;
  width: 80px;
  height: 80px;
  border-radius: var(--radius-lg);
  overflow: hidden;
}

.partners__card-img img {
  width: 100%;
  height: 100%;
  object-fit: cover;
}

.partners__card-body {
  flex: 1;
  min-width: 0;
}

.partners__card-body h3 {
  margin-bottom: var(--sp-2);
  color: #fff;
}

.partners__card-body p {
  color: rgba(255, 255, 255, 0.75);
  margin-bottom: var(--sp-4);
  max-width: none;
}

.partners__card-cta {
  color: #fff;
  display: inline-flex;
  align-items: center;
  gap: var(--sp-2);
  transition: gap var(--duration-base) var(--ease-expressive);
}

.partners__card:hover .partners__card-cta {
  gap: var(--sp-4);
}

/* >= --bp-tablet: cards go 2-col; each card becomes a row (image + body side by side) */
@media (min-width: 720px) {
  .partners__cards {
    grid-template-columns: repeat(2, 1fr);
  }

  .partners__card {
    flex-direction: row;
    align-items: flex-start;
    text-align: left;
    gap: var(--space-md);
  }

  .partners__card-img {
    width: 120px;
    height: 120px;
  }
}

/* >= --bp-desktop: intro lays out side-by-side; cards fit 3 across */
@media (min-width: 1024px) {
  .partners__intro {
    flex-direction: row;
    align-items: flex-start;
    text-align: left;
    justify-content: space-between;
    gap: var(--space-xl);
  }

  .partners__intro p {
    flex: 0 1 400px;
    align-self: center;
  }

  .partners__badges {
    justify-content: flex-start;
  }

  .partners__cards {
    grid-template-columns: repeat(3, 1fr);
  }
}


/* ========================================
   Final CTA
   ======================================== */

.final-cta {
  position: relative;
  overflow: hidden;
  display: flex;
  flex-direction: column;
  align-items: center;
  padding: var(--space-xl) var(--space-md) var(--space-xl);
}

.final-cta__content {
  position: relative;
  z-index: 2;
  text-align: center;
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: var(--sp-6);
}

.final-cta__content .btn {
  background-color: #fff;
  color: var(--color-primary);
  border-color: #fff;
}

.final-cta__content .btn:hover {
  background-color: rgba(255, 255, 255, 0.9);
  border-color: rgba(255, 255, 255, 0.9);
}

.final-cta__content h2 {
  color: #fff;
  max-width: 796px;
  margin-bottom: 0;
}

/* Floating photos container */
.final-cta__photos {
  position: absolute;
  inset: 0;
  pointer-events: none;
  z-index: 1;
}

.final-cta__photo {
  position: absolute;
  border-radius: var(--radius-lg);
  box-shadow: 0 24px 48px rgba(44, 47, 48, 0.08), 0 4px 12px rgba(44, 47, 48, 0.04);
  overflow: hidden;
}

.final-cta__photo picture {
  display: block;
  width: 100%;
  height: 100%;
}

.final-cta__photo img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  display: block;
}

/* Photo positions — scattered around the text
   Mobile baseline: 1 + 4 hidden; 2 + 3 in compact positions */
.final-cta__photo--1 {
  top: 8%;
  left: 4%;
  width: clamp(100px, 10vw, 150px);
  height: clamp(120px, 12vw, 170px);
  transform: rotate(-5deg);
  display: none;
}

.final-cta__photo--2 {
  top: 3%;
  right: 3%;
  width: clamp(120px, 13vw, 190px);
  height: clamp(110px, 11vw, 160px);
  transform: rotate(4deg);
  display: none;
}

.final-cta__photo--3 {
  bottom: 5%;
  left: 3%;
  width: clamp(120px, 12vw, 180px);
  height: clamp(100px, 10vw, 150px);
  transform: rotate(3deg);
  display: none;
}

.final-cta__photo--4 {
  bottom: 5%;
  right: 4%;
  width: clamp(100px, 11vw, 160px);
  height: clamp(120px, 12vw, 170px);
  transform: rotate(-4deg);
  display: none;
}

/* >= --bp-tablet */
@media (min-width: 720px) {
  .final-cta {
    padding: var(--space-2xl) var(--space-lg) var(--space-2xl);
  }

  .final-cta__photo--1,
  .final-cta__photo--2,
  .final-cta__photo--3 {
    display: block;
  }

  .final-cta__photo--2 {
    top: 5%;
    right: 6%;
  }

  .final-cta__photo--3 {
    bottom: 8%;
    left: 8%;
  }

  .final-cta__photo--4 {
    display: block;
  }
}

/* >= --bp-desktop: group photos as two overlapping pairs */
@media (min-width: 1024px) {
  .final-cta__photo--1 {
    top: auto;
    bottom: 10%;
    left: 2%;
    width: 180px;
    height: 210px;
    transform: rotate(-8deg);
    z-index: 2;
  }

  .final-cta__photo--3 {
    bottom: 5%;
    left: 8%;
    width: 170px;
    height: 190px;
    transform: rotate(5deg);
    z-index: 1;
  }

  .final-cta__photo--2 {
    top: auto;
    bottom: 10%;
    right: 2%;
    width: 170px;
    height: 190px;
    transform: rotate(6deg);
    z-index: 2;
  }

  .final-cta__photo--4 {
    bottom: 5%;
    right: 8%;
    width: 180px;
    height: 210px;
    transform: rotate(-5deg);
    z-index: 1;
  }
}