@font-face {
    font-family: 'MyFont';
    src: url('./fonts/SailecBold.ttf') format('truetype');
    font-weight: 800;
    font-style: normal;
    font-display: swap;
}

@font-face {
    font-family: 'MyFont';
    src: url('./fonts/SailecLight.ttf') format('truetype');
    font-weight: 300;
    font-style: normal;
    font-display: swap;
}
:root {
  --color-bg-base: #1a86a8;
  --color-bg-deep: #0f6f8e;
  --color-text-onbrand: #ffffff;
  --color-cta-text: #1a7fa0;
  --color-cta-bg: #ffffff;


  --heading-weight: 800;
  --body-weight: 400;
  --cta-weight: 700;

  --hero-max-width: 1660px;
  --hero-side-padding: clamp(32px, 11.2vw, 224px);
  --hero-min-height: clamp(560px, 44vw, 760px);

  --artwork-size: 47%;
  --artwork-position-x: right;
  --artwork-position-y: center;
}

/* =============================================
   RESET
   ============================================= */
*,
*::before,
*::after {
  box-sizing: border-box;
}

body {
  margin: 0;
}

img {
  display: block;
  max-width: 100%;
}

a {
  text-decoration: none;
}

/* =============================================
   HERO SECTION (full-width teal background + decorative shapes)
   ============================================= */
.kabeqo-hero {
  position: relative;
  width: 100%;
  overflow: hidden;
  background-image: url(./images/Desktop/2.jpg);
  background-size: cover;
  background-position: center;
}

.kabeqo-hero__content {
    position: relative;
    z-index: 1;
    max-width: var(--hero-max-width);
    margin-inline: auto;
    padding-inline: var(--hero-side-padding);
    padding-top: clamp(20px, 2vh, 30px);
    padding-bottom: clamp(32px, 4vh, 56px);

    min-height: var(--hero-min-height);

    display: flex;
    flex-direction: column;
    justify-content: flex-start;
}

/* =============================================
   LOGO
   ============================================= */
.kabeqo-hero__logo {
  margin-bottom: clamp(36px, 8vw, 128px);
}

.kabeqo-hero__logo img {
  width: clamp(150px, 11.3vw, 213px);
  height: auto;
}

/* =============================================
   TEXT COLUMN
   Constrained to a safe max-width so it never runs
   under the background artwork on the right.
   ============================================= */
.kabeqo-hero__text {
  max-width: 46%;
}

.kabeqo-hero__text h1 {
  margin: 0;
  font-family: "MyFont";
  color: var(--color-text-onbrand);
  font-weight: 800;
  font-size: clamp(2rem, 2.6vw + 1rem, 2rem);
  line-height: 1.12;
  letter-spacing: -0.01em;
}

.kabeqo-hero__text p {
  margin: clamp(16px, 2vw, 9px) 0 0;
  color: var(--color-text-onbrand);
  font-family: "MyFont";
  font-weight:400;
  font-size: clamp(0.95rem, 0.55vw + 0.75rem, 1.25rem);
  line-height: 1.2;
}

/* =============================================
   CTA BUTTON
   ============================================= */
.kabeqo-hero__button {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  align-self: flex-start;
  margin-top: clamp(24px, 3.2vw, 20px);
  padding: clamp(10px, -0.6vw, 18px) clamp(21px, -1vw, 44px);
  background-color: var(--color-cta-bg);
  color: var(--color-cta-text);
  font-family: "MyFont";
  font-weight: 800;
  font-size: clamp(0.95rem, 0.5vw + 0.8rem, 1.15rem);
  border-radius: 999px;
  border: none;
  white-space: nowrap;
  transition: transform 0.2s ease, box-shadow 0.2s ease;
}

.kabeqo-hero__button:hover {
  transform: translateY(-2px);
  box-shadow: 0 8px 20px rgba(0, 0, 0, 0.18);
}

.kabeqo-hero__button:focus-visible {
  outline: 3px solid rgba(255, 255, 255, 0.7);
  outline-offset: 3px;
}

/* =============================================
   RESPONSIVE BREAKPOINTS
   Fine-tune background-size/position and text column
   only where the fluid values above aren't enough.
   ============================================= */

/* 1600px and below */
@media (max-width: 1600px) {
  .kabeqo-hero__content {
    padding-inline: clamp(28px, 8vw, 140px);
  }
}

/* 1440px and below */
@media (max-width: 1440px) {
  .kabeqo-hero__content {
    padding-inline: clamp(24px, 6.5vw, 110px);
  }
  .kabeqo-hero__logo {
    margin-bottom: clamp(28px, 6vw, 90px);
  }
}

/* 1366px / 1280px — nudge artwork slightly to protect the text column */
@media (max-width: 1366px) {
  :root {
    --artwork-size: 44%;
  }
  .kabeqo-hero__content {
    padding-inline: clamp(20px, 21.5vw, 156px);
  }
  .kabeqo-hero__text {
    max-width: 48%;
  }
  .kabeqo-hero__text h1 {
    font-size: clamp(1.75rem, 2.2vw + 0.9rem, 2rem);
  }
}

/* 1200px / 1152px */
@media (max-width: 1200px) {
  :root {
    --artwork-size: 42%;
    --artwork-position-x: right;
  }
  .kabeqo-hero__content {
    padding-inline: clamp(20px, 4.5vw, 56px);
    min-height: clamp(500px, 46vw, 620px);
  }
  .kabeqo-hero__logo {
    margin-bottom: clamp(24px, 5vw, 60px);
  }
  .kabeqo-hero__text {
    max-width: 50%;
  }
}

/* 1024px — minimum supported viewport */
@media (max-width: 1024px) {
  :root {
    --artwork-size: 40%;
  }
  .kabeqo-hero__content {
    padding-inline: 24px;
    min-height: auto;
    padding-block: 32px;
  }
  .kabeqo-hero__logo img {
    width: clamp(130px, 14vw, 160px);
  }
  .kabeqo-hero__logo {
    margin-bottom: 28px;
  }
  .kabeqo-hero__text {
    max-width: 52%;
  }
  .kabeqo-hero__text h1 {
    font-size: clamp(1.5rem, 3vw + 0.6rem, 2rem);
  }
  .kabeqo-hero__text p {
    font-size: 0.9rem;
  }
  .kabeqo-hero__button {
    padding: 12px 24px;
    font-size: 0.9rem;
    margin-top: 20px;
  }
}


/* =============================================
   ASSET / EXECUTION SECTION
   Scoped entirely under .asset-execution so it can
   drop into an existing project without touching
   global resets, fonts, or other component styles.
   ============================================= */

.asset-execution {
  /* --- design tokens, scoped to this component --- */
  --primary-blue: #2293b8;
  --ae-container-max: 948px;
  --ae-section-pad-x: clamp(20px, 5vw, 96px);
  --ae-section-pad-y: clamp(48px, 8vw, 120px);
  --ae-column-gap: clamp(24px, 3.2vw, 60px);

  --ae-image-radius: clamp(20px, 1.9vw, 36px);
  --ae-image-aspect: 637 / 483;

  --ae-fs-title: clamp(2.1rem, 1.05rem + 2.7vw, 3.9rem);
  --ae-fs-intro: clamp(1.1rem, 0.82rem + -0.15vw, 1.6rem);
  --ae-fs-step: clamp(0.95rem, 0.78rem + 0.5vw, 1.2rem);
  --ae-fs-description: clamp(1.05rem, 0.78rem + 0.4vw, 1.55rem);

  --ae-gap-title-intro: clamp(16px, 2vw, 36px);
  --ae-gap-intro-steps: clamp(24px, 2.6vw, 50px);
  --ae-gap-steps-description: clamp(20px, 2.1vw, 40px);
  --ae-step-gap: clamp(10px, 1vw, 20px);

  width: 100%;
  background: #ffffff;
  padding-block: var(--ae-section-pad-y);
  padding-inline: var(--ae-section-pad-x);
  box-sizing: border-box;
}

.asset-execution *,
.asset-execution *::before,
.asset-execution *::after {
  box-sizing: border-box;
}

.asset-execution__container {
  max-width: var(--ae-container-max);
  margin-inline: auto;

  display: grid;
  grid-template-columns: 1fr 1fr;
  align-items: center;
  gap: var(--ae-column-gap);
}

/* =============================================
   LEFT — PROPERTY IMAGE
   ============================================= */
.asset-execution__image {
  width: 100%;
}

.asset-execution__image img {
  display: block;
  width: 100%;
  height: auto;
  aspect-ratio: var(--ae-image-aspect);
  object-fit: cover;
  border-radius: var(--ae-image-radius);
}

/* =============================================
   RIGHT — CONTENT
   ============================================= */
.asset-execution__content {
  display: flex;
  flex-direction: column;
}

.asset-execution__title {
  margin: 0;
  font-family: "MyFont";
  font-weight: 800;
  color: var(--primary-blue);
  font-weight: 600;
  font-size: 2.6vw;
  line-height: 1.2;
  letter-spacing: -0.01em;
}

.asset-execution__intro {
  font-family: "MyFont";
  margin: var(--ae-gap-title-intro) 0 0;
  color: var(--primary-blue);
  font-weight: 400;
  font-size: var(--ae-fs-intro);
  line-height: 1.35;
}

.asset-execution__steps {
  display: flex;
  flex-wrap: nowrap;
  gap: var(--ae-step-gap);
  margin: var(--ae-gap-intro-steps) 0 0;
}

.asset-execution__step {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  white-space: nowrap;
  background-color: var(--primary-blue);
  color: #ffffff;
  font-weight: 600;
  font-size: var(--ae-fs-step);
  font-family: "MyFont";
  line-height: 1;
  padding-block: clamp(10px, 0.9vw, 14px);
  padding-inline: clamp(16px, 1.5vw, 32px);
  border-radius: 8px;
}

.asset-execution__description {
  margin: var(--ae-gap-steps-description) 0 0;
  color: var(--primary-blue);
  font-weight: 400;
  font-size: var(--ae-fs-description);
  line-height: 1.2;
  font-family: "MyFont";
}

/* =============================================
   RESPONSIVE ADJUSTMENTS
   ============================================= */

/* 1280px and below — tighten gaps, keep steps on one row */
@media (max-width: 1280px) {
  .asset-execution {
    --ae-column-gap: clamp(20px, 2.6vw, 40px);
  }
  .asset-execution__step {
    padding-inline: clamp(14px, 1.3vw, 24px);
  }
}

/* 1152px and below — protect the steps row from wrapping */
@media (max-width: 1152px) {
  .asset-execution {
    --ae-section-pad-x: clamp(18px, 4vw, 48px);
  }
  .asset-execution__step {
    padding-inline: clamp(12px, 1.2vw, 20px);
    padding-block: clamp(9px, 0.8vw, 12px);
  }
}

/* 1024px — minimum supported viewport */
@media (max-width: 1024px) {
  .asset-execution__container {
    gap: clamp(18px, 2.4vw, 32px);
  }
  .asset-execution__step {
    font-size: clamp(0.85rem, 0.7rem + 0.5vw, 1rem);
    padding-inline: clamp(10px, 1.1vw, 16px);
  }
}

/* =============================================
   MOBILE — CONTENT TOP, IMAGE BOTTOM
   Desktop styles remain completely unchanged
   ============================================= */

@media (max-width: 767px) {

  .asset-execution {
    padding-block: 48px;
    padding-inline: 20px;
  }

  .asset-execution__container {
    display: flex;
    flex-direction: column;
    align-items: stretch;
    gap: 36px;
  }

  /* Content comes first */
  .asset-execution__content {
    order: 1;
    text-align: center;
  }

  /* Image comes below the content */
  .asset-execution__image {
    order: 2;
    width: 86%;
    margin:  0 auto;
  }

  .asset-execution__image img {
    width: 100%;
    height: auto;
    aspect-ratio: 637 / 483;
    object-fit: cover;
    border-radius: 40px;
  }

  .asset-execution__title {
    font-size: clamp(2rem, 9vw, 2.8rem);
    line-height: 1.08;
  }

  .asset-execution__intro {
    margin-top: 18px;
    font-size: clamp(1.05rem, 4.5vw, 1.3rem);
    line-height: 1.2;
  }

  .asset-execution__steps {
    margin-top: 13px;
    gap: 8px;
    flex-wrap: nowrap;
    overflow: visible;
    justify-content: center;
  }

  .asset-execution__step {
    font-size: clamp(0.72rem, 4vw, 0.95rem);
    padding-block: 9px;
    padding-inline: 12px;
  }

  .asset-execution__description {
    margin-top: 16px;
    font-size: clamp(1rem, 4.2vw, 1.2rem);
    line-height: 1.2;
  }
}

/* ==========================================================================
   How it Works — section styles
   Reference basis: 1920px viewport
   ========================================================================== */

.how-it-works {
  --hiw-max-width: 985px;
  --hiw-hero-height: clamp(160px, 14.27vw, 274px);
  --hiw-circle: clamp(96px, 8.02vw, 154px);
  --hiw-heading: clamp(30px, 2.81vw, 54px);
  --hiw-subtitle: clamp(18px, 1.56vw, 30px);
  --hiw-title: clamp(20px, 1.67vw, 32px);
  --hiw-desc: clamp(15px, 1.04vw, 20px);
  --hiw-blue: #1f7a94;
  --hiw-blue-overlay: rgba(20, 74, 92, 0.55);
  --hiw-icon-color: #258fb6;

  width: 100%;
  background: #ffffff;
  font-family: 'Poppins', 'Segoe UI', system-ui, -apple-system, sans-serif;
}

.how-it-works__panel {
  max-width: var(--hiw-max-width);
  margin: 0 auto;
  padding: 0 clamp(16px, 1.6vw, 24px);
}

/* ---------- Hero / blue background ---------- */

.how-it-works__hero {
  position: relative;
  height: var(--hiw-hero-height);
  display: flex;
  align-items: flex-start;
  justify-content: center;
  overflow: hidden;
  background-image: url('./images/Desktop/3.png');
  background-size: cover;
  background-position: center;
}

/* .how-it-works__hero::before {
  content: '';
  position: absolute;
  inset: 0;
  background-image: url('./images/Desktop/3.png');
  opacity: 0.72;
  mix-blend-mode: multiply;
} */

.how-it-works__heading {
  position: relative;
  z-index: 2;
  text-align: center;
  padding-top: clamp(20px, 2.29vw, 44px);
  color: #ffffff;
}
.how-it-works__heading br{
  display: none;
}
.how-it-works__heading h2 {
  margin: 0;
  font-family: "MyFont";
  font-size: var(--hiw-heading);
  font-weight: 700;
  line-height: 1.1;
  color: #ffffff;
}

.how-it-works__heading p {
  font-family: "MyFont";
  margin: clamp(4px, 0.42vw, 8px) 0 0;
  font-size: var(--hiw-subtitle);
  font-weight: 400;
  line-height: 1.2;
  color: #ffffff;
}

/* ---------- Process steps ---------- */

.how-it-works__steps {
  position: relative;
  z-index: 2;
  display: grid;
  grid-template-columns: repeat(5, 1fr);
  column-gap: clamp(8px, 1vw, 20px);
  margin-top: calc(var(--hiw-circle) / -2);
}

.how-it-works__step {
  display: flex;
  flex-direction: column;
  align-items: center;
  text-align: center;
}

.how-it-works__icon {
  width: var(--hiw-circle);
  height: var(--hiw-circle);
  border-radius: 50%;
  background-color: #f4f4f4;
  display: flex;
  align-items: center;
  justify-content: center;
  flex-shrink: 0;
}

.how-it-works__icon img {
  width: 46%;
  height: 46%;
  object-fit: contain;
}

.how-it-works__title {
  font-family: "MyFont";
  margin: clamp(12px, 1.15vw, 22px) 0 0;
  font-size: var(--hiw-title);
  font-weight: 700;
  text-transform: uppercase;
  color: var(--hiw-icon-color);
  line-height: 1.2;
}

.how-it-works__desc {
  font-family: "MyFont";
  margin: clamp(6px, 0.63vw, 12px) 0 0;
  font-size: var(--hiw-desc);
  font-weight: 400;
  line-height: 1.2;
  color: #1a1a1a;
  max-width: 22ch;
}

/* ---------- Bottom breathing room below overlapping circles ---------- */

.how-it-works__panel {
  padding-bottom: clamp(24px, 2.5vw, 48px);
}

/* ==========================================================================
   Responsive breakpoints (1024px–2560px handled primarily via clamp/vw above)
   ========================================================================== */

@media (max-width: 1279px) {
  .how-it-works__steps {
    column-gap: clamp(6px, 0.8vw, 14px);
  }

  .how-it-works__desc {
    max-width: 18ch;
  }
}

@media (min-width: 1921px) {
  .how-it-works__hero,
  .how-it-works__panel {
    max-width: var(--hiw-max-width);
  }

  .how-it-works__heading h2 {
    font-size: 54px;
  }

  .how-it-works__heading p {
    font-size: 30px;
  }

  .how-it-works__icon {
    width: 154px;
    height: 154px;
  }

  .how-it-works__title {
    font-size: 32px;
  }

  .how-it-works__desc {
    font-size: 20px;
  }

  .how-it-works__steps {
    margin-top: -77px;
  }
}

/* =========================================================================
   MOBILE ONLY — How it Works
   Scoped to <= 767px. Does not touch any desktop rule.
   ========================================================================= */
@media (max-width: 767px) {

  /* ---------- Section / full background ---------- */

  .how-it-works {
    background-image: url('./images/Mobil/2.png');
  }

  .how-it-works__panel {
    max-width: 100%;
    padding: 0;
  }

  /* The hero now becomes the FULL section background instead of a top strip */
  .how-it-works__hero {
    position: relative;
    height: auto;
    min-height: 0;
    display: block;
    align-items: initial;
    justify-content: initial;
    overflow: visible;
    background-color: transparent;
    background-size: cover;
    background-position: top center;
    background-repeat: no-repeat;
    padding: 42px 20px 0px;
  }

  .how-it-works__heading {
    position: relative;
    z-index: 2;
    padding-top: 0;
  }
  .how-it-works__heading br{
    display: block;
  }

  .how-it-works__heading h2 {
    font-size: 29px;
    line-height: 1.15;
  }

  .how-it-works__heading p {
    font-size: 16px;
    line-height: 1.3;
    margin-top: 10px;
  }

  /* ---------- Steps: 2-column grid, Earn centered on row 3 ---------- */

  .how-it-works__steps {
    position: relative;
    z-index: 2;

    display: grid;
    grid-template-columns: repeat(2, 156px);
    justify-content: center;

    column-gap: 0;
    row-gap: 50px;

    margin-top: 40px;
    padding-bottom: 40px;
  }

  .how-it-works__step {
    position: relative; /* anchor for vertical connectors */
  }

  /* Step 5 = Earn: span both columns, center it */
  .how-it-works__step:nth-child(5) {
    grid-column: 1 / -1;
    justify-self: center;
  }

  /* ---------- Icon circles ---------- */

  .how-it-works__icon {
    position: relative; /* anchor for horizontal connectors */
    width: 74px;
    height: 74px;
    margin: 0 auto;
  }

  .how-it-works__icon img {
    width: 46%;
    height: 46%;
  }

  /* ---------- Text ---------- */

  .how-it-works__title {
    font-size: 15px;
    margin-top: 12px;
    color: #ffffff;
  }

  .how-it-works__desc {
    font-size: 12px;
    margin-top: 10px;
    color: #ffffff;
    max-width: 130px;
    margin-left: auto;
    margin-right: auto;
  }

  /* =======================================================================
     DASHED CONNECTORS
     Horizontal lines sit at icon vertical-center, outside the circles.
     Vertical lines sit in the row-gap, below each row's full content.
     ======================================================================= */

  /* Horizontal: CHOOSE -> OWN */
  .how-it-works__step:nth-child(1) .how-it-works__icon::after,
  /* Horizontal: LEASE -> DEPLOY */
  .how-it-works__step:nth-child(3) .how-it-works__icon::before {
    content: '';
    position: absolute;
    top: 50%;
    left: 114%;
    width: 66px;
    height: 0;
    border-top: 2px dashed rgba(255, 255, 255, 0.85);
    transform: translateY(-50%);
    z-index: 1;
  }

  /* Vertical: OWN row -> DEPLOY row (right column) */
  .how-it-works__step:nth-child(2)::after
  /* Vertical: LEASE row -> EARN row (left column, directional per reference) */
{
    content: '';
    position: absolute;
    top: 101%;
    left: 50%;
    width: 0;
    height: 44px; /* matches .how-it-works__steps row-gap */
    border-left: 2px dashed rgba(255, 255, 255, 0.85);
    transform: translateX(-50%);
    z-index: 1;
  }
    .how-it-works__step:nth-child(3)::after {
  content: '';
    position: absolute;
    top: 101%;
    left: 50%;
    width: 0;
    height: 84px; /* matches .how-it-works__steps row-gap */
    border-left: 2px dashed rgba(255, 255, 255, 0.85);
    transform: translateX(-50%);
    z-index: 1;
    }

  /* Horizontal connector from EARN icon */
.how-it-works__step:nth-child(5) .how-it-works__icon::before {
    content: '';
    position: absolute;
    top: 50%;
    right: 100%;
    width: 34px;
    height: 0;
    border-top: 2px dashed rgba(255, 255, 255, 0.85);
    transform: translateY(-50%);
    z-index: 1;
}
}


/* ==========================================================================
   One Platform. Multiple Assets. — interactive asset selector
   Reference basis: ~1280px viewport
   ========================================================================== */

.asset-platform {
  --ap-blue: #2a7fa0;
  --ap-blue-dark: #1c7690;
  --ap-blue-light: #3fb0d6;
  --ap-card-bg: #f6f6f6;
  --ap-card-w: clamp(96px, 16vw, 164px);
  --ap-card-h: clamp(108px, 16vw, 209px);
  --ap-gap: clamp(10px, 1.1vw, 16px);

  width: 100%;
  background: #ffffff;
  font-family: 'Poppins', 'Segoe UI', system-ui, -apple-system, sans-serif;
}

.asset-platform__inner {
  max-width: 980px;
  margin: 0 auto;
  padding: clamp(24px, 3vw, 48px) clamp(16px, 2vw, 24px);
  display: flex;
  align-items: flex-start;
  gap: 0;
}

/* ---------- Left column ---------- */

.asset-platform__left {
  flex: 0 1 527px;
  min-width: 0;
}

.asset-platform__heading h2 {
  font-family: "MyFont";
  margin: 0;
  font-size: clamp(22px, 5vw, 35px);
  font-weight: 700;
  line-height: 1.1;
  color: var(--ap-blue);
}

.asset-platform__heading p {
  font-family: "MyFont";
  margin: clamp(8px, 1vw, 12px) 0 0;
  font-size: clamp(13px, 3.05vw, 17px);
  font-weight: 400;
  line-height: 1.25;
  color: var(--ap-blue);
}

.asset-platform__grid {
  margin-top: clamp(20px, 2.2vw, 32px);
  display: grid;
  grid-template-columns: repeat(3, var(--ap-card-w));
  gap: var(--ap-gap);
}

.asset-platform__grid .asset-card:nth-child(10) {
  grid-column: 2;
}

/* ---------- Asset card ---------- */

.asset-card {
  width: var(--ap-card-w);
  height: var(--ap-card-h);
  background: var(--ap-card-bg);
  border: 2px solid transparent;
  border-radius: 9px;
  padding: clamp(8px, 1.9vw, 17px) clamp(8px, 3.9vw, 20px);
  display: flex;
  flex-direction: column;
  align-items: flex-start;
  text-align: left;
  cursor: pointer;
  font-family: inherit;
  box-sizing: border-box;
}

.asset-card:hover {
  background: #f0f0f0;
}

.asset-card.is-active {
  border-color: var(--ap-blue);
  background: var(--ap-card-bg);
}

.asset-card__logo {
  width: 100%;
  height: clamp(24px, 6.3vw, 60px);
  display: flex;
  align-items: center;
  justify-content: flex-start;
  margin-bottom: clamp(8px, 1vw, 12px);
}

.asset-card__logo img {
  max-width: 100%;
  max-height: 100%;
  object-fit: contain;
}

.asset-card__name {
    font-size: clamp(9px, 1.85vw, 12px);
    font-weight: 600;
    color: var(--ap-blue);
    line-height: 1.25;
    height: 5vw;
}

.asset-card__category {
  margin-top: clamp(4px, 0.5vw, 6px);
  font-size: clamp(9px, 2.85vw, 16px);
  font-weight: 400;
  line-height: 1.2;
  color: #8a8a8a;
}

/* ---------- Divider ---------- */

.asset-platform__divider {
  flex: 0 0 clamp(24px, 9vw, 86px);
  align-self: stretch;
  position: relative;
}

.asset-platform__divider::before {
  content: '';
  position: absolute;
  left: 50%;
  top: 0;
  bottom: 0;
  border-left: 1px dashed #9db3bd;
}

/* ---------- Right column ---------- */

.asset-platform__right {
  flex: 0 0 clamp(220px, 22vw, 260px);
  min-width: 0;
}

.asset-platform__image {
    width: 120%;
    height: clamp(190px, 35vw, 385px);
    display: flex;
    align-items: center;
    justify-content: center;
    margin-bottom: clamp(14px, 1.5vw, 20px);
}

.asset-platform__image img {
    width: 120%;
    max-width: none;
    max-height: 100%;
    object-fit: contain;
}

.asset-finance {
    display: flex;
    flex-direction: column;
    gap: clamp(3px, 0.4vw, 4px);

    width: 120%;
    /* margin-left: -10%; */
}

.asset-finance__item {
  background: var(--ap-blue-dark);
  border-radius: 9px;
  padding: clamp(8px, 0.9vw, 10px) clamp(10px, 1vw, 14px);
  min-height: clamp(52px, 5vw, 60px);
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  text-align: center;
  box-sizing: border-box;
}

.asset-finance__item:nth-child(3) {
  background: var(--ap-blue);
}

.asset-finance__item:nth-child(4),
.asset-finance__item:nth-child(5) {
  background: var(--ap-blue-light);
}

.asset-finance__label {
  font-size: clamp(11px, 3.95vw, 16px);
  font-weight: 400;
  color: #ffffff;
  line-height: 1.2;
}

.asset-finance__value {
  font-family: "MyFont";
  margin-top: 2px;
  font-size: clamp(19px, 3.7vw, 35px);
  font-weight: 400;
  color: #ffffff;
  line-height: 1.15;
}

/* ==========================================================================
   Responsive breakpoints
   ========================================================================== */

@media (min-width: 1921px) {
  .asset-platform__inner {
    max-width: 800px;
  }
}
@media (max-width: 767px) {

  .asset-platform__inner {
    flex-direction: column;
    align-items: center;
    width: 93%;
    padding: 35px 16px 32px;
    box-sizing: border-box;
  }

  /* =========================
     MOBILE LEFT CONTENT
     ========================= */

  .asset-platform__left {
    width: 100%;
    max-width: 420px;
    flex: none;
    display: flex;
    flex-direction: column;
    align-items: center;
    text-align: center;
  }

  .asset-platform__heading {
    width: 100%;
    text-align: center;
  }

  .asset-platform__heading h2 {
    text-align: center;
    font-size: 24px;
    line-height: 1.1;
  }

  .asset-platform__heading p {
    text-align: center;
    font-size: 13px;
    line-height: 1.35;
  }

  /* =========================
     MOBILE 3-COLUMN GRID
     ========================= */

  .asset-platform__grid {
    width: 100%;
    margin-top: 22px;

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

    gap: 10px;

    justify-items: center;
    align-items: center;
  }

  /* Remove special desktop positioning */
  .asset-platform__grid .asset-card:nth-child(10) {
    grid-column: 2;
  }

  /* =========================
     MOBILE ASSET CARD
     ========================= */

  .asset-card {
    width: 100%;
    max-width: 105px;
    height: 73px;

    padding: 10px;

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

    background: var(--ap-card-bg);
    border: 2px solid transparent;
    border-radius: 9px;

    box-sizing: border-box;
  }

  .asset-card:hover {
    background: var(--ap-card-bg);
  }

  .asset-card.is-active {
    border-color: var(--ap-blue);
    background: var(--ap-card-bg);
  }

  /* =========================
     LOGO ONLY
     ========================= */

  .asset-card__logo {
    width: 100%;
    height: 100%;

    margin: 0;

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

  .asset-card__logo img {
    display: block;

    width: auto;
    height: auto;

    max-width: 85%;
    max-height: 55px;

    object-fit: contain;
  }

  /* Hide all text inside cards */
  .asset-card__name,
  .asset-card__category {
    display: none;
  }

  /* =========================
     REMOVE DIVIDER
     ========================= */

  .asset-platform__divider {
    display: none;
  }

  /* =========================
     RIGHT SIDE
     Move to bottom + center
     ========================= */

  .asset-platform__right {
    width: 100%;
    max-width: 360px;

    flex: none;

    margin-top: 28px;

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

    text-align: center;
  }

  /* =========================
     PRODUCT IMAGE
     ========================= */

  .asset-platform__image {
    width: 100%;
    height: 329px;

    margin-bottom: 18px;

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

  .asset-platform__image img {
    display: block;

    max-width: 90%;
    max-height: 100%;

    object-fit: contain;
  }

  /* =========================
     FINANCE INFORMATION
     ========================= */

  .asset-finance {
    width: 100%;

    display: flex;
    flex-direction: column;

    gap: 4px;
  }

  .asset-finance__item {
    width: 82%;
    min-height: 54px;

    padding: 10px 12px;

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

    text-align: center;

    box-sizing: border-box;
    margin:0 auto;
    border-radius: 18px;
  }

  .asset-finance__label {
    font-size: 15px;
  }

  .asset-finance__value {
    font-size: 25px;
  }
}


/* ==========================================================================
   Kabego — Get in Early. Own Productive Assets
   Reference basis: 1280px viewport
   ========================================================================== */

:root {
  --navy: #0a315f;
  --navy-light: #123f76;
  --navy-input: #1a4a86;
  --cyan: #31a8d0;
  --white: #ffffff;
  --gray-light: #c9d1dc;
  --gray-copy: #8a97a6;
  --navy-copy: #0a315f;
  --divider: rgba(10, 49, 95, 0.15);

  --container-max: 943px;
}

/* Scope everything below to this section so it doesn't leak into the rest
   of your page. Wrap the markup in <div class="kabego-cta"> ... </div>
   if your page doesn't already provide an equivalent scope, or drop this
   selector and rely on your own global reset if you already box-size and
   reset margins site-wide. */
.kabego-cta,
.kabego-cta * {
  box-sizing: border-box;
}

.kabego-cta {
  font-family: 'Poppins', 'Segoe UI', system-ui, -apple-system, sans-serif;
  color: var(--navy-copy);
  background: var(--white);
  width: 100%;
  overflow-x: hidden;
}

.kabego-cta img {
  max-width: 100%;
  display: block;
}

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

.hero {
  position: relative;
  width: 100%;
}

/* Replace ./images/hero-curve.png with the supplied curve background asset.
   The image is rendered in-flow at full width with height:auto so its
   original aspect ratio (and therefore the curve shape) is always preserved,
   regardless of viewport width. */
.hero__bg {
    width: 100%;
    height: auto;
    display: block;
    transform: scaleY(1.15);
    transform-origin: top center;
}

.hero__content {
  position: absolute;
  inset: 0;
  display: flex;
  flex-direction: column;
  align-items: center;
  text-align: center;
  padding-top: clamp(24px, 3.6vw, 50px);
  padding-left: clamp(16px, 2vw, 24px);
  padding-right: clamp(16px, 2vw, 24px);
}

.hero__title {
  font-family: "MyFont";
  margin: 0;
  font-size: clamp(20px, 6.1vw, 36px);
  font-weight: 700;
  line-height: 1.2;
  color: var(--cyan);
}
.hero__title br{
  display: none;
}
.hero__subtitle {
  font-family: "MyFont";
  margin: 10px 0 0;
  font-size: clamp(11px, 5vw, 17px);
  opacity: 0.8;
  font-weight: 100;
  line-height: 1.3;
  color: var(--white);
}

/* ---------- Feature strip ---------- */

.feature-strip {
  margin-top: clamp(14px, 1.6vw, 22px);
  width: min(100%, clamp(420px, 74.5vw, 938px));
  min-height: clamp(44px, 4.4vw, 56px);
  background: var(--navy-light);
  border-radius: clamp(6px, 0.6vw, 8px);
  display: flex;
  align-items: center;
  justify-content: space-between;
  padding: clamp(8px, 1vw, 12px) clamp(14px, 2vw, 24px);
  gap: clamp(8px, 1vw, 14px);
}

.feature-strip__item {
  display: flex;
  align-items: center;
  gap: clamp(6px, 0.8vw, 10px);
  flex: 1 1 0;
  min-width: 0;
}

.feature-strip__bar {
  flex: 0 0 2px;
  width: 2px;
  align-self: stretch;
  min-height: 28px;
  background: var(--cyan);
}

.feature-strip__text {
  font-family: "MyFont";
  font-size: clamp(9px, 1.6vw, 14px);
  font-weight: 400;
  line-height: 1.3;
  color: var(--white);
  text-align: left;
}

.hero__tagline {
  margin: clamp(14px, 1.9vw, 24px) 0 0;
  font-size: clamp(11px, 5vw, 15px);
  font-weight: 400;
  color: var(--gray-light);
  font-family: "MyFont";
}

/* ---------- Enquire button ---------- */

.btn--enquire {
  margin-top: clamp(14px, 1.8vw, 23px);
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: clamp(110px, 14.2vw, 169px);
  height: clamp(28px, 4.4vw, 38px);
  border-radius: 999px;
  background: var(--cyan);
  color: var(--white);
  font-size: clamp(11px, 1vw, 13px);
  font-weight: 600;
  text-decoration: none;
}

/* ==========================================================================
   OWNERSHIP SECTION (white area)
   ========================================================================== */

.ownership-section {
  width: 100%;
  background: var(--white);
  padding: clamp(40px, 11vw, 115px) clamp(16px, 2vw, 24px) clamp(48px, 6vw, 80px);
}

.ownership-container {
  max-width: var(--container-max);
  margin: 0 auto;
  display: flex;
  align-items: flex-start;
  /* justify-content: space-between; */
  gap: 60px;
  flex-wrap: wrap;
}

/* ---------- Left copy ---------- */

.ownership-copy {
  flex: 1 1 235px;
  max-width: 292px;
}

.ownership-copy__heading {
  margin: 0;
  font-size: clamp(20px, 5.1vw, 34px);
  font-weight: 700;
  line-height: 1.1;
  text-transform: uppercase;
  color: var(--cyan);
}

.ownership-copy__heading + .ownership-copy__sub {
  margin-top: clamp(4px, 0.5vw, 6px);
}

.ownership-copy__sub {
  margin: clamp(4px, 0.5vw, 6px) 0 0;
  font-size: clamp(11px, 1vw, 13px);
  font-weight: 400;
  color: var(--gray-copy);
}

.ownership-copy__rows {
  margin: clamp(14px, 1.6vw, 20px) 0 clamp(20px, 2.5vw, 32px);
}

.ownership-copy__row {
  border-bottom: 1px solid var(--divider);
  padding: clamp(8px, 1vw, 12px) 0;
}

.ownership-copy__row:first-child {
  padding-top: 0;
}

.ownership-copy__row p {
  margin: 0;
  font-size: clamp(11px, 6vw, 18px);
  font-weight: 400;
  color: var(--navy-copy);
}

/* ---------- Right form ---------- */

.enquiry-form {
  flex: 1 1 340px;
  max-width: 573px;
  width: 100%;
  background: var(--navy);
  border-radius: 16px;
  padding: clamp(20px, 2.5vw, 32px);
}

.enquiry-form__form {
  display: flex;
  flex-direction: column;
  gap: clamp(10px, 1.3vw, 16px);
}

.enquiry-form__row {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: clamp(12px, 1.6vw, 20px);
}

.enquiry-form__field input,
.enquiry-form__field select {
  width: 100%;
  background: transparent;
  border: none;
  border-bottom: 1px solid rgba(94, 148, 200, 0.5);
  color: var(--gray-light);
  font-family: inherit;
  font-size: clamp(10px, 2vw, 14px);
  padding: clamp(6px, 0.8vw, 9px) 0;
  outline: none;
  border-radius: 0;
  appearance: none;
  -webkit-appearance: none;
}

.enquiry-form__field select {
  cursor: pointer;
}

.enquiry-form__field input::placeholder {
  color: var(--gray-light);
  opacity: 1;
}

.enquiry-form__field--textarea textarea {
  width: 100%;
  min-height: clamp(50px, 5.6vw, 60px);
  background: var(--navy-input);
  border: none;
  border-radius: 6px;
  color: var(--gray-light);
  font-family: inherit;
  font-size: clamp(10px, 0.95vw, 12px);
  padding: 12px;
  resize: none;
  outline: none;
}

.enquiry-form__field--textarea textarea::placeholder {
  color: var(--gray-light);
  opacity: 1;
}

.btn--submit {
  width: 100%;
  height: clamp(34px, 3.6vw, 49px);
  border-radius: clamp(6px, 0.6vw, 7px);
  background: var(--cyan);
  color: var(--white);
  border: none;
  font-family: inherit;
  font-size: clamp(12px, 3.1vw, 19px);
  font-weight: 600;
  cursor: pointer;
}

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

.site-footer {
  width: 100%;
  min-height: clamp(38px, 3.8vw, 44px);
  background: var(--cyan);
  display: flex;
  align-items: center;
  justify-content: center;
  padding: 8px 16px;
}

.site-footer__text {
  font-family: "Poppins";
  margin: 0;
  font-size: clamp(10px, 0.95vw, 12px);
  color: var(--white);
  text-align: center;
}
.site-footer__text br{
  display: none;
}
.site-footer__desktop-separator, .site-footer__desktop-separator1{
  display: inline;
}
/* ==========================================================================
   RESPONSIVE
   ========================================================================== */

@media (max-width: 1023px) {
  .feature-strip {
    flex-wrap: wrap;
    row-gap: 10px;
  }

  .feature-strip__item {
    flex: 1 1 40%;
  }
}
/* =========================================
   MOBILE ONLY — KABEGO ASSET SECTION
   ========================================= */
@media (max-width: 767px) {

  /* ---------- Section shell + curved bottom edge ---------- */
  .hero__bg{
    display: none;
  }
  .kabego-cta img{
    display: none;
  }
  .hero {
    /* Elliptical bottom radius: sides curve up, center dips down.
       Horizontal % controls curve width, vertical px controls curve depth. */
    border-radius: 0 0 50% 50% / 0 0 clamp(36px, 9vw, 64px) clamp(36px, 9vw, 64px);
    overflow: hidden;

    /* Content-based height instead of fixed vh */
    min-height: 0;
    height: auto;

    background-image: url('./images/Mobil/3.png');
    background-size: cover;
    background-position: bottom center;
    background-repeat: no-repeat;
  }

  .hero__content {
    position: static; /* stop stretching to fill 100vh via inset:0 */
    display: flex;
    flex-direction: column;
    align-items: center;
    text-align: center;

    padding-top: clamp(28px, 8vw, 40px);
    padding-left: 20px;
    padding-right: 20px;
    padding-bottom: clamp(48px, 12vw, 70px); 
    /* room above the curve */
    width: 77%;
    margin: 0 auto;
  }

  /* ---------- Heading ---------- */

  .hero__title {
    max-width: 600px;
    font-size: clamp(20px, 5vw, 26px);
    line-height: 1.15;
    font-weight: 700;
  }
.hero__title br{
  display: block;
}
  .hero__subtitle {
    max-width: 300px;
    margin-top: 10px;
    font-size: clamp(11px, 3.2vw, 13px);
    line-height: 1.4;
  }

  /* ---------- Feature strip -> stacked cards ---------- */

  .feature-strip {
    /* undo desktop single-bar layout */
    flex-direction: column;
    align-items: stretch;
    justify-content: flex-start;

    width: 100%;
    max-width: 340px;
    min-height: 0;

    background: transparent;
    border-radius: 0;
    padding: 0;

    margin-top: clamp(20px, 6vw, 28px);
    gap: clamp(10px, 2.8vw, 14px);
  }

  .feature-strip__item {
    flex: none;
    width: 100%;
    box-sizing: border-box;

    display: flex;
    align-items: center;
    gap: clamp(12px, 3.2vw, 16px);

    background: var(--navy-light);
    border-radius: clamp(12px, 3.2vw, 16px);

    padding: clamp(14px, 3.6vw, 18px) clamp(16px, 7vw, 27px);
  }

  .feature-strip__bar {
    flex: 0 0 4px;
    width: 10px;
    align-self: stretch;
    min-height: 34px;
    margin: 4px 0; /* keeps bar off the top/bottom card edges */
    background: var(--cyan);
  }

  .feature-strip__text {
    flex: 1;
    text-align: left;
    font-size: clamp(14px, 4.2vw, 17px);
    font-weight: 700;
    line-height: 1.3;
    color: var(--white);
    white-space: normal;
  }
  .feature-strip__text br{
    display: none;
  }
  /* Lock the exact two-line wraps shown in the screenshot at all mobile widths */
  .feature-strip__item:nth-child(1) .feature-strip__text,
  .feature-strip__item:nth-child(2) .feature-strip__text,
  .feature-strip__item:nth-child(3) .feature-strip__text,
  .feature-strip__item:nth-child(4) .feature-strip__text,
  .feature-strip__item:nth-child(5) .feature-strip__text {
    max-width: 22ch;
  }

  /* ---------- Tagline ---------- */

  .hero__tagline {
    max-width: 300px;
    margin-top: clamp(20px, 5.5vw, 26px);
    font-size: clamp(11px, 3.2vw, 13px);
    line-height: 1.4;
  }

  /* ---------- CTA ---------- */

  .btn--enquire {
    margin-top: clamp(16px, 4.5vw, 22px);
    width: min(94%, 286px);
    height: clamp(46px, 12vw, 52px);
    font-size: clamp(14px, 5.8vw, 18px);
    font-weight: 600;
    border-radius: 999px;
  }
    .ownership-copy {
    flex: none;
    width: 100%;
    max-width: 340px;
    margin: 0 auto;
    text-align: center;
  }
.ownership-copy__heading{
    font-size: clamp(20px, 8.1vw, 34px);
}
.ownership-copy__sub{
  font-size: clamp(17px, 1vw, 13px);
  color: #1a1a1a;
}
  .ownership-copy__heading,
  .ownership-copy__sub,
  .ownership-copy__row p {
    text-align: center;
  }
  .enquiry-form{
    display: none;
  }
  .site-footer__text{
    font-size: clamp(17px, 0.95vw, 12px);
  }
  .site-footer__text br{
    display: block;
  }
  .site-footer__desktop-separator{
    display: none;
  }
  .pastel{
     color: #fff;
     opacity: 0.6;
  }
}

@media (min-width: 1921px) {
  :root {
    --container-max: 760px;
  }
}

.mobile-wizard-hero {
  --primary-blue: #2293b8;

}

/* =========================================================
   SECTION — full-height background image
========================================================= */
.mobile-wizard-hero {
    position: relative;
    display: none; /* becomes flex only under the mobile breakpoint below */
    width: 100%;
    max-width: 100%;
    box-sizing: border-box;
    min-height: 100svh;
    padding: 34px 18px 40px;
    flex-direction: column;
    align-items: center;

    background-image: url("../images/mobile-2.jpg");
    background-repeat: no-repeat;
    background-position: center bottom;
    background-size: cover;

    font-family: var(--mwh-font-sans);
    overflow-x: hidden;
}

.mobile-wizard-hero *,
.mobile-wizard-hero *::before,
.mobile-wizard-hero *::after {
    box-sizing: border-box;
}

/* =========================================================
   LOGO
========================================================= */
.mobile-wizard-hero__logo {
    display: block;
    width: clamp(90px, 34vw, 148px);
    height: auto;
    object-fit: contain;
    margin-bottom: 25px;
}

/* =========================================================
   WIZARD CARD
========================================================= */
.mobile-wizard-hero__card {
width: calc(100% - 35px);
    max-width: 338px;
    background: #f4f4f4;
    border: 1px solid rgba(177, 138, 39, 0.25);
    border-radius: 40px;
    padding: clamp(41px, 5vw, 28px) clamp(16px, 4.5vw, 22px) clamp(36px, 4.5vw, 24px);
    display: flex;
    flex-direction: column;
}

/* =========================================================
   QUESTION
========================================================= */
.mobile-wizard-hero__question {
    margin: 0 0 27px;
    font-family: "MyFont";
    font-size: 5vw;
    line-height: 1.3;
    font-weight: 600;
    color: var(--primary-blue);
    text-align: center;
}
.wizard-model-group{
  display: flex;
  flex-direction: column;
  gap: 10px;
}

/* NEW — restore native hidden behaviour, which the display:flex
   rule above was silently overriding */
.wizard-model-group[hidden] {
  display: none;
}
/* =========================================================
   OPTIONS
========================================================= */
.mobile-wizard-hero__options {
    display: flex;
    flex-direction: column;
    gap: 8px;
    width: 89%;
    margin: 0 auto 10%;
}

.mobile-wizard-hero__option {
    display: flex;
    align-items: center;
    justify-content: space-between;
    width: 100%;
    min-height: 30px;
    padding: 8px 14px;
    background: #fff;
    border: 1px solid transparent;
    border-radius: 8px;
    cursor: pointer;
    transition: background-color 0.15s ease, border-color 0.15s ease;
    -webkit-tap-highlight-color: transparent;
    font-family: "Poppins";
}

.mobile-wizard-hero__option:active {
    background: #efe4d4;
}

.mobile-wizard-hero__option--selected {
    border-color: var(--mwh-gold);
    background: #efe2ca;
}

.mobile-wizard-hero__option-label {
    font-family: "Poppins";
    font-size: clamp(10px, 4.9vw, 14px);
    font-weight: 500;
    color: var(--primary-blue);

}

.mobile-wizard-hero__option-price {
    font-family: "Poppins";
    font-size: clamp(10px, 2.9vw, 11px);
    font-weight: 700;
    color: var(--primary-blue);
}

/* =========================================================
   PROGRESS
========================================================= */
.mobile-wizard-hero__progress-row {
    display: flex;
    justify-content: space-between;
    align-items: center;
    margin-top: 22px;
}

.mobile-wizard-hero__progress-text,
.mobile-wizard-hero__progress-percent {
    font-family: "MyFont";
    font-size: clamp(8px, 2.4vw, 10px);
    font-weight: 600;
    color: var(--primary-blue);
}

.mobile-wizard-hero__progress-track {
    margin-top: 6px;
    width: 100%;
    height: 2px;
    background: rgba(23, 45, 75, 0.15);
    border-radius: 2px;
    overflow: hidden;
}

.mobile-wizard-hero__progress-fill {
    height: 100%;
    background: var(--mwh-navy);
    border-radius: 2px;
    transition: width 0.2s ease;
}

/* =========================================================
   STEP BACK BUTTON
========================================================= */
.mobile-wizard-hero__step-back {
    display: inline-flex;
    align-items: center;
    gap: 4px;

    margin: 0 0 14px;
    padding: 6px 10px 6px 0;

    background: transparent;
    border: 0;

    color: var(--primary-blue);

    font-family: "MyFont";
    font-size: 12px;
    font-weight: 600;

    cursor: pointer;

    -webkit-tap-highlight-color: transparent;
}

.mobile-wizard-hero__step-back:hover,
.mobile-wizard-hero__step-back:focus-visible {
    color: var(--primary-blue);
}

.mobile-wizard-hero__step-back[hidden] {
    display: none;
}

/* =========================================================
   TERMS
========================================================= */
.mobile-wizard-hero__terms {
    margin: 10px 0 0;
    font-family: "Poppins";
    font-size: clamp(7px, 2.1vw, 8px);
    line-height: 1.3;
    color: var(--mwh-muted);
    text-align: center;
}

.mobile-wizard-hero__terms-link {
    color: var(--mwh-muted);
    text-decoration: underline;
}

/* =========================================================
   APPROVAL BADGE
========================================================= */
.mobile-wizard-hero__badge {
    display: block;
    width: clamp(56px, 16vw, 72px);
    height: auto;
    object-fit: contain;
    margin-top: 20px;
}

/* =========================================================
   ACTIVATE ONLY ON MOBILE
   The section is `display: none` by default (see top of file)
   so it never renders on tablet/desktop even if mounted in
   the DOM alongside the existing desktop hero.
========================================================= */
@media (max-width: 767px) {
    .carlton-hero{
        display: none;
    }
    .mobile-wizard-hero {
        display: flex;
    }
}

/* =========================================================
   SMALL MOBILE — down to 320px
========================================================= */
@media (max-width: 360px) {
    .mobile-wizard-hero {
        padding: 26px 14px 32px;
    }

    .mobile-wizard-hero__card {
        max-width: 100%;
    }
}

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

.mobile-wizard-hero__step[hidden],
.mobile-wizard-hero__thankyou[hidden] {
    display: none;
}

.mobile-wizard-hero__step {
    width: 100%;
}


/* =========================================================
   OPTIONS
========================================================= */

.mobile-wizard-hero__options {
    display: flex;
    flex-direction: column;
    gap: 8px;
}

.mobile-wizard-hero__option {
    display: flex;
    align-items: center;
    justify-content: space-between;

    width: 100%;
    min-height: 38px;

    padding: 9px 14px;

    background: #fff;

    border: 1px solid transparent;
    border-radius: 8px;

    cursor: pointer;

    transition:
        background-color 0.15s ease,
        border-color 0.15s ease,
        transform 0.15s ease;

    -webkit-tap-highlight-color: transparent;
    text-align: left;
}

.mobile-wizard-hero__option:active {
    transform: scale(0.98);
    background: var(--primary-blue);
}

.mobile-wizard-hero__option--selected {
    border-color: var(--primary-blue);
    background: var(--primary-blue);
    color: #fff;
}
.mobile-wizard-hero__option--selected .mobile-wizard-hero__option-label{
  color: #fff;
}
.mobile-wizard-hero__option-label {
    font-family: "Poppins";
    font-size: clamp(10px, 4.9vw, 14px);
    font-weight: 500;
    line-height: 1.3;
    color: var(--primary-blue);
}

.mobile-wizard-hero__option-price {
    flex-shrink: 0;
    margin-left: 10px;

    font-family: "Poppins";
    font-size: clamp(10px, 2.9vw, 11px);
    font-weight: 700;
    color: var(--primary-blue);
}


/* =========================================================
   STATE DROPDOWN
========================================================= */

.mobile-wizard-hero__select-wrap {
    width: 100%;
}

.mobile-wizard-hero__select {
    width: 100%;
    min-height: 42px;

    padding: 10px 36px 10px 14px;

    background: var(--mwh-option-bg);
    border: 1px solid rgba(177, 138, 39, 0.2);
    border-radius: 8px;

    font-family: "Poppins";
    font-size: 12px;
    font-weight: 500;
    color: var(--mwh-navy);

    outline: none;
    cursor: pointer;

    appearance: auto;
}

.mobile-wizard-hero__select:focus {
    border-color: var(--mwh-gold);
}


/* =========================================================
   PROGRESS
========================================================= */

.mobile-wizard-hero__progress {
    width: 83%;
    margin: 0 auto;
}

.mobile-wizard-hero__progress-row {
    display: flex;
    justify-content: space-between;
    align-items: center;

    margin-top: 22px;
}

.mobile-wizard-hero__progress-text,
.mobile-wizard-hero__progress-percent {
    font-family: "MyFont";
    font-size: clamp(8px, 2.4vw, 10px);
    font-weight: 600;
    color: var(--primary-blue);
}

.mobile-wizard-hero__progress-track {
    margin-top: 6px;

    width: 100%;
    height: 2px;

    background: rgba(23, 45, 75, 0.15);

    border-radius: 2px;
    overflow: hidden;
}

.mobile-wizard-hero__progress-fill {
    width: 17%;
    height: 100%;

    background: var(--mwh-navy);

    border-radius: 2px;

    transition: width 0.25s ease;
}


/* =========================================================
   TERMS
========================================================= */

.mobile-wizard-hero__terms {
    margin: 10px 0 0;

    font-family: var(--mwh-font-sans);

    font-size: clamp(7px, 2.1vw, 8px);
    line-height: 1.3;

    color: var(--mwh-muted);
    text-align: center;
}

.mobile-wizard-hero__terms-link {
    color: var(--mwh-muted);
    text-decoration: underline;
}


/* =========================================================
   THANK YOU
========================================================= */

.mobile-wizard-hero__thankyou {
    display: flex;
    flex-direction: column;
    align-items: center;

    width: 100%;

    text-align: center;
}

.mobile-wizard-hero__thankyou-icon {
    display: flex;
    align-items: center;
    justify-content: center;

    width: 48px;
    height: 48px;

    margin-bottom: 14px;

    border: 1px solid var(--mwh-gold);
    border-radius: 50%;

    color: var(--mwh-gold);

    font-size: 25px;
    font-weight: 600;
}

.mobile-wizard-hero__thankyou-title {
    margin: 0;

    font-family: "MyFont";
    font-size: 24px;
    line-height: 1.2;
    font-weight: 700;

    color: var(--primary-blue);
}

.mobile-wizard-hero__thankyou-text {
    margin: 12px 0 20px;

    max-width: 270px;

    font-family: "MyFont";
    font-size: 11px;
    line-height: 1.5;

    color: var(--primary-blue);
}

.mobile-wizard-hero__back {
    min-height: 40px;

    padding: 9px 24px;

    background: var(--mwh-gold);
    border: 0;
    border-radius: 20px;

    color: var(--primary-blue);

    font-family: var(--mwh-font-sans);
    font-size: 11px;
    font-weight: 600;

    cursor: pointer;

    -webkit-tap-highlight-color: transparent;
}
/* =========================================================
   STEP 7 — CONTACT FORM
========================================================= */

.mobile-wizard-hero__contact-form {
    display: flex;
    flex-direction: column;
    gap: 11px;
    width: 100%;
}

.mobile-wizard-hero__field {
    display: flex;
    flex-direction: column;
    width: 100%;
    text-align: left;
}

.mobile-wizard-hero__field label {
    margin-bottom: 5px;

    font-family: "MyFont";
    font-size: 10px;
    font-weight: 600;

    color: var(--primary-blue);
}

.mobile-wizard-hero__field input {
    width: 100%;
    min-height: 40px;

    padding: 9px 12px;

    background: var(--mwh-option-bg);

    border: 1px solid rgba(177, 138, 39, 0.2);
    border-radius: 8px;

    outline: none;

    font-family: "MyFont";
    font-size: 11px;
    color: var(--mwh-navy);
}

.mobile-wizard-hero__field input::placeholder {
    color: #999;
}

.mobile-wizard-hero__field input:focus {
    border-color: var(--mwh-gold);
}

.mobile-wizard-hero__submit {
    width: 100%;
    min-height: 42px;

    margin-top: 5px;

    background: var(--primary-blue);
    border: 0;
    border-radius: 22px;

    color: #ffffff;

    font-family: "MyFont";
    font-size: 12px;
    font-weight: 600;

    cursor: pointer;

    transition:
        background-color 0.2s ease,
        transform 0.15s ease;

    -webkit-tap-highlight-color: transparent;
}

.mobile-wizard-hero__submit:active {
    transform: scale(0.98);
}

.location-section {
    position: relative;
    width: 100%;
    max-width: 100%;
    min-height: 30vh;
    font-family: var(--font-sans);
}


@media (max-width: 767px) {

    .mobile-wizard-hero {
        --mwh-bg-height: 805px !important;

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

        width: 100%;
        min-height: var(--mwh-bg-height);
        height: auto;

        padding: 34px 18px 40px;

        overflow: hidden;
    }

    /* =====================================================
       BACKGROUND IMAGE
       Pinned to the section's designed height and anchored
       to the bottom, so it keeps its intended crop instead of
       stretching/zooming when a step with fewer or more
       options changes how tall the section is.
    ===================================================== */

    .mobile-wizard-hero__background {
        position: absolute;
        left: 0;
        right: 0;
        bottom: 0;
        top: auto;

        width: 100%;
        height: var(--mwh-bg-height);

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

        z-index: 0;
    }

    /* Keep all actual content above background */
    .mobile-wizard-hero > *:not(.mobile-wizard-hero__background) {
        position: relative;
        z-index: 2;
    }

    /* =====================================================
       CARD
       Height is allowed to grow naturally with wizard
    ===================================================== */

    .mobile-wizard-hero__card {
        width: calc(100% - 35px);
        max-width: 338px;

        height: auto;
        min-height: 0;

        flex: 0 0 auto;
    }

    /* =====================================================
       WIZARD
    ===================================================== */

    .mobile-wizard-hero__wizard {
        width: 100%;
        height: auto;
    }

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

    .mobile-wizard-hero__step {
        width: 100%;
        height: auto;
    }

    /* hidden must remain hidden */
    .mobile-wizard-hero__step[hidden],
    .mobile-wizard-hero__thankyou[hidden],
    .wizard-model-group[hidden],
    .step-2-model-selection[hidden] {
        display: none !important;
    }
}

.ecosystem-heading--mobile {
    display: none;
}

@media (max-width: 767px) {
.kabeqo-hero{
  display: none;
}
    .ecosystem-heading {
        display: none;
    }

    .ecosystem-heading--mobile {
        display: block !important;
        font-size: clamp(27px, 16vw, 68px);
        line-height: 0.8;
    }
    /* =========================================================
   STEP 2 — TWO-LEVEL SELECTION (category → model)
========================================================= */

.step-2-category-selection[hidden],
.step-2-model-selection[hidden] {
    display: none;
}

}

@media (max-width: 330px){
        .mobile-process-section__card {
        flex: 0 1 clamp(190px, 62vw, 250px);
        width: clamp(190px, 62vw, 250px);
        max-width: clamp(190px, 62vw, 250px);
        height: 308px;
        min-height: 287px;
        padding: 35px 28px 45px;
    }
        .mobile-process-section__step:not( .mobile-process-section__step--last )::before {
        content: "";
        position: absolute;
        top: 50%;
        height: calc(125% + var(--card-gap));
        left: 15%;
        width: 20px;
        background-image: url(../images/process.png);
        background-repeat: no-repeat;
        background-size: 26px 100%;
        background-position: center top;
        z-index: 0;
        pointer-events: none;
    }
    .mobile-investment-section__amount{
        font-size: clamp(30px, 8vw, 50px);
    }
    .mobile-investment-section__bottom-desc{
        font-size: 16px;
    }
    .investor-description{
        font-size: 16px;
    }
    .mobile-wizard-hero{
      --mwh-bg-height: 640px;
      min-height: var(--mwh-bg-height);
    }
}

@media(min-width: 380px ) and (max-width: 415px){
    .mobile-process-section__step:not(.mobile-process-section__step--last)::before{
        height: calc(129% + var(--card-gap));
    }

}


@media (min-width: 420px) and (max-width: 500px){
    .mobile-process-section__step:not(.mobile-process-section__step--last)::before{
        height: calc(120% + var(--card-gap));
    }
    .mobile-wizard-hero{
        --mwh-bg-height: 909px;
        min-height: var(--mwh-bg-height);
    }
}
 
@media (min-width: 420px) and (max-width: 480px) {
  .asset-card{
    max-width: 128px;
  }
  .asset-platform__grid{
    gap: 15px;
  }
  .asset-platform__image{
    height: 404px;
  }
  .asset-finance__item{
    width: 90%;
  }
      .how-it-works__heading h2 {
        font-size: 35px;
      }
          .how-it-works__heading p {
        font-size: 19px;
          }
              .asset-platform__heading h2 {
        text-align: center;
        font-size: 31px;
              }
                  .asset-platform__heading p {
        text-align: center;
        font-size: 15px;
                  }
                      .hero__title {
        max-width: 600px;
        font-size: clamp(20px, 7vw, 26px);

                      }
                    .hero__subtitle{
                      font-size: 14px;
                }
                .hero__tagline{
                          font-size: clamp(11px, 3.2vw, 15px);
                }
     .site-footer__text{
    font-size: clamp(19px, 0.95vw, 12px);
  }    
  .mobile-wizard-hero__logo{
    margin-bottom: 29px;
  }   
  .mobile-wizard-hero{
    height: 909px !important;
  }   
      .how-it-works__icon {
        position: relative;
        width: 83px;
        height: 83px;
      }
      .how-it-works__steps{
        grid-template-columns: repeat(2, 180px);
      }   
          .asset-platform__right {
        width: 100%;
        max-width: 407px;
        margin-top: 40px;
          }
}

@media (min-width: 390px) and(max-width: 415px){
  .site-footer__text{
    font-size: clamp(16px, 0.95vw, 12px);
  } 
  .mobile-wizard-hero__logo{
    margin-bottom: 30px;
  }
  .mobile-wizard-hero{
    --mb-height: 863px !important;
    min-height: var(--mb-height);
  }
}

/* =====================================================
   WIZARD NAVIGATION
===================================================== */

.mobile-wizard-hero__navigation {
    width: 100%;
    margin-top: 24px;
}

.mobile-wizard-hero__navigation-line {
    width: 100%;
    height: 1px;
    background: var(--primary-blue);
    margin-bottom: 14px;
}

.mobile-wizard-hero__navigation-row {
    width: 100%;
    display: flex;
    align-items: center;
    justify-content: space-between;
}

/* Back button */

.mobile-wizard-hero__step-back {
    appearance: none;
    border: 0;
    background: transparent;
    padding: 0;
    margin: 0;

    color: var(--primary-blue);
    font-family: inherit;
    font-size: 14px;
    font-weight: 400;
    line-height: 1;

    cursor: pointer;
}

/* Step number */

.mobile-wizard-hero__progress-text {
    margin-left: auto;

    color: var(--primary-blue);
    font-family: inherit;
    font-size: 14px;
    font-weight: 400;
    line-height: 1;
}

@media (min-width: 450px) and (max-width: 500px) {

    .mobile-wizard-hero {
        height: 877px !important;
        min-height: 877px !important;
    }

    .mobile-wizard-hero__background {
        top: 0;
        bottom: auto;

        width: 100%;
        height: 877px;

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