@layer page {
  /* ---------- Hero ---------- */
  .home-hero {
    padding-block: var(--space-18) 80px;
    overflow: hidden;
  }

  .home-hero__inner {
    display: grid;
    grid-template-columns: minmax(0, 560px) minmax(0, 1fr);
    align-items: center;
    gap: var(--space-12);
  }

  .home-hero__copy {
    display: grid;
    justify-items: start;
    gap: var(--space-6);
    min-width: 0;
  }

  .home-hero__kicker {
    display: inline-flex;
    align-items: center;
    gap: var(--space-2);
    padding: 6px var(--space-3);
    border: 1px solid var(--band-line);
    border-radius: var(--radius-capsule);
    color: var(--band-text-2);
    font: var(--type-label);

    & .icon {
      width: 14px;
      height: 14px;
    }
  }

  .home-hero__title em {
    display: block;
  }

  .home-hero .actions {
    margin-top: 0;
  }

  .home-search {
    display: flex;
    align-items: center;
    gap: 6px;
    width: 100%;
    padding: 6px;
    border-radius: var(--radius-card);
    background: var(--surface);
    color: var(--text-1);

    & :focus-visible {
      outline-color: var(--accent-text);
    }

    & .btn {
      min-height: 48px;
      padding-inline: 22px;
    }
  }

  .home-search__query {
    display: flex;
    flex: 1;
    align-items: center;
    gap: 10px;
    min-width: 0;
    min-height: 48px;
    padding: 0 14px;
    border-radius: var(--radius-control);
    color: var(--text-2);

    & .icon {
      width: 20px;
      height: 20px;
    }

    & input {
      width: 100%;
      min-width: 0;
      border: 0;
      background: transparent;
      color: var(--text-1);
      font: var(--type-body);
      outline: none;

      &::placeholder {
        color: var(--text-3);
      }
    }

    &:focus-within {
      outline: 2px solid var(--accent-text);
      outline-offset: -2px;
    }
  }

  .home-search__level {
    position: relative;
    display: flex;
    align-items: center;
    min-height: 48px;
    border-left: 1px solid var(--line);

    & select {
      height: 48px;
      max-width: 168px;
      padding: 0 36px 0 14px;
      border: 0;
      border-radius: var(--radius-control);
      background: transparent;
      color: var(--text-1);
      font: 500 16px / 24px var(--font-body);
      appearance: none;
      cursor: pointer;

      &:focus-visible {
        outline: 2px solid var(--accent-text);
        outline-offset: -2px;
      }
    }

    & .icon {
      position: absolute;
      right: 14px;
      width: 16px;
      height: 16px;
      color: var(--text-2);
      pointer-events: none;
    }
  }

  .home-visual {
    position: relative;
    display: grid;
    place-items: center;
    min-width: 0;
  }

  .home-globe {
    position: relative;
    width: 100%;
    max-width: 600px;
    height: auto;
    overflow: visible;
  }

  .home-globe__light {
    stop-color: var(--brand-indigo);
  }

  .home-globe__shade {
    stop-color: var(--band);
  }

  .home-globe__ocean {
    fill: url(#home-globe-ocean);
  }

  .home-globe__halo {
    fill: var(--band-wash);
    opacity: 0.3;
  }

  .home-globe__orbit,
  .home-globe__grid,
  .home-globe__rim {
    fill: none;
    stroke: var(--brand-periwinkle);
    stroke-width: 1;
    opacity: 0.25;
  }

  .home-globe__orbit {
    stroke-dasharray: 3 9;
    opacity: 0.5;
  }

  .home-globe__land {
    fill: url(#home-globe-dots);
  }

  .home-globe__dot {
    fill: var(--brand-periwinkle);
  }

  .home-globe__connections {
    fill: none;
    stroke: var(--band-text);
    stroke-width: 1.5;
    stroke-dasharray: 4 6;
    opacity: 0.6;
  }

  .home-globe__place {
    fill: var(--band-text);
  }

  .home-globe__pin-ring {
    fill: var(--band);
    fill-opacity: 0.25;
    stroke: var(--band-text-2);
    stroke-opacity: 0.5;
  }

  .home-globe__pin {
    stroke: var(--band);
    stroke-width: 1.5;
  }

  .home-globe__pin-centre {
    fill: var(--band);
  }

  .home-globe__place--malaysia {
    fill: var(--band-highlight);

    & .home-globe__pin-ring {
      stroke: var(--band-highlight);
      stroke-opacity: 1;
    }
  }

  /* ---------- Section heads ---------- */
  .home-head {
    display: flex;
    flex-wrap: wrap;
    align-items: flex-end;
    justify-content: space-between;
    gap: var(--space-4) var(--space-8);
    margin-bottom: var(--space-8);
  }

  .home-head__text {
    display: grid;
    gap: var(--space-2);
  }

  .home-head__kicker {
    color: var(--accent-text);
    font: var(--type-interface);
  }

  .home-head__link {
    display: inline-flex;
    align-items: center;
    gap: 6px;
    min-height: var(--target-public);
    color: var(--accent-text);
    font: 600 16px / 24px var(--font-body);
    text-decoration: none;

    & .icon {
      width: 16px;
      height: 16px;
      transition: transform 120ms ease-out;
    }

    &:hover {
      text-decoration: underline;

      & .icon {
        transform: translateX(2px);
      }
    }
  }

  /* ---------- The four promises ---------- */
  .promises__head {
    display: flex;
    flex-wrap: wrap;
    align-items: flex-end;
    justify-content: space-between;
    gap: var(--space-4) var(--space-12);
    margin-bottom: var(--space-12);

    & .home-head {
      margin-bottom: 0;
    }

    & .section__title {
      max-width: 22ch;
    }

    & .section__intro {
      max-width: 40ch;
    }
  }

  .promises__list {
    display: grid;
    grid-template-columns: repeat(4, minmax(0, 1fr));
    gap: var(--space-8);
  }

  .promise {
    display: grid;
    align-content: start;
    gap: var(--space-2);
    padding-top: var(--space-6);
    border-top: 1px solid var(--line);
  }

  .promise__icon {
    display: grid;
    place-items: center;
    width: 48px;
    height: 48px;
    margin-bottom: var(--space-3);
    border-radius: var(--radius-card);
    background: var(--surface-sunk);
    color: var(--text-1);

    & .icon {
      width: 22px;
      height: 22px;
    }
  }

  .promise__title {
    font: var(--type-subsection);
  }

  .promise__body {
    color: var(--text-2);
  }

  /* ---------- Updates you can see ---------- */
  .section.updates {
    padding-block: var(--section-space);
    border-block: 1px solid var(--line);
    background: var(--surface);
  }

  .updates + .section {
    padding-top: var(--section-space);
  }

  .updates__inner {
    display: grid;
    grid-template-columns: minmax(0, 1fr) minmax(0, 520px);
    align-items: center;
    gap: var(--space-24);
  }

  .updates__title {
    margin-top: var(--space-2);
    font: var(--type-page-title);
  }

  .updates__intro {
    max-width: 56ch;
    margin-top: var(--space-4);
    color: var(--text-2);
    font: var(--type-body-large);
  }

  .updates__points {
    margin-top: var(--space-8);

    & li {
      display: grid;
      grid-template-columns: 20px minmax(0, 1fr);
      gap: 14px;
      padding-block: var(--space-5);
      border-top: 1px solid var(--line);
    }

    & .icon {
      width: 20px;
      height: 20px;
      margin-top: 2px;
      color: var(--text-1);
    }
  }

  .updates__point {
    font: 600 16px / 24px var(--font-body);
  }

  .updates__detail {
    margin-top: 2px;
    color: var(--text-2);
    font: var(--type-interface);
    font-weight: 400;
  }

  .updates__route {
    padding: 28px;
    border: 1px solid var(--line);
    border-radius: var(--radius-dialog);
    background: var(--page);
  }

  .updates__route-head {
    display: flex;
    align-items: baseline;
    justify-content: space-between;
    gap: var(--space-4);
    margin-bottom: var(--space-5);
  }

  .updates__example {
    color: var(--text-3);
    font: var(--type-micro);
  }

  /* ---------- Counters ---------- */
  .counters {
    padding-block: var(--space-14);
  }

  .counters__list {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(200px, 1fr));
    gap: var(--space-8);

    & li {
      padding-left: var(--space-6);
      border-left: 1px solid var(--band-line);
    }
  }

  .counters__value {
    color: var(--band-text);
    font: 600 48px / 56px var(--font-display);
  }

  .counters__label {
    margin-top: var(--space-1);
    color: var(--band-text-2);
    font: var(--type-body);
  }

  /* ---------- Testimonials ---------- */
  .testimonials__list {
    display: grid;
    grid-template-columns: repeat(3, minmax(0, 1fr));
    gap: var(--space-4);

    & > li {
      display: grid;
    }
  }

  .testimonial {
    display: grid;
    grid-template-rows: auto 1fr auto;
    gap: var(--space-4);
    padding: 28px;
    border: 1px solid var(--line);
    border-radius: var(--radius-card);
    background: var(--surface);

    & > .icon {
      width: 28px;
      height: 28px;
      color: var(--brand-periwinkle);
    }
  }

  .testimonial__quote p {
    font: var(--type-body-large);
  }

  .testimonial__by {
    display: flex;
    align-items: center;
    gap: var(--space-3);
    padding-top: var(--space-4);

    & .avatar {
      width: 40px;
      height: 40px;
    }
  }

  .testimonial__name {
    display: block;
    font: 600 14px / 20px var(--font-body);
  }

  .testimonial__study {
    display: block;
    color: var(--text-2);
    font: var(--type-micro);
  }

  /* ---------- Family hub, partners and careers ---------- */
  .journey__list {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(16rem, 1fr));
    gap: var(--space-4);
  }

  .journey__card {
    display: grid;
    grid-template-rows: auto auto 1fr auto;
    justify-items: start;
    gap: var(--space-2);
    padding: var(--space-8);
    border: 1px solid var(--line);
    border-radius: var(--radius-card);
    background: var(--surface);

    & .home-head__link {
      margin-top: var(--space-2);
    }
  }

  .journey__card--wash {
    border-color: transparent;
    background: var(--wash);
  }

  .journey__kicker {
    color: var(--text-2);
    font: var(--type-interface);
  }

  .journey__title {
    font: 600 22px / 28px var(--font-display);
  }

  .journey__body {
    color: var(--text-2);
  }

  /* ---------- Narrower screens ---------- */
  @media (max-width: 1199px) {
    .updates__inner {
      gap: var(--space-12);
    }
  }

  @media (min-width: 900px) and (max-width: 1279px) {
    .home-hero__inner {
      grid-template-columns: minmax(0, 1.2fr) minmax(0, 1fr);
      gap: var(--space-6);
    }
  }

  @media (max-width: 1023px) {
    .promises__list {
      grid-template-columns: repeat(2, minmax(0, 1fr));
    }

    .testimonials__list,
    .journey__list {
      grid-template-columns: minmax(0, 1fr);
    }

    .updates__inner {
      grid-template-columns: minmax(0, 1fr);
    }
  }

  @media (max-width: 899px) {
    .home-hero {
      padding-block: var(--space-10) var(--space-12);
    }

    .home-hero__inner {
      grid-template-columns: minmax(0, 1fr);
      gap: var(--space-8);
    }

    .home-hero__copy {
      gap: var(--space-5);
    }

    .home-hero .actions {
      width: 100%;

      & .btn {
        flex: 1 1 100%;
      }
    }

    .home-search__level {
      display: none;
    }

    .home-search__query {
      gap: var(--space-2);
      padding-inline: 10px;
    }

    .home-search .btn {
      padding-inline: var(--space-4);
    }

    .home-visual {
      width: min(100%, 520px);
      justify-self: center;
    }

    .updates__title {
      font: var(--type-section);
    }

    .updates__route {
      padding: var(--space-5);
    }

    .counters__value {
      font-size: 36px;
      line-height: 44px;
    }
  }

  @media (max-width: 599px) {
    .home-visual {
      display: none;
    }

    .promises__list {
      grid-template-columns: minmax(0, 1fr);
    }

    .promises__list {
      gap: 0;
    }

    .promise {
      grid-template-columns: 48px minmax(0, 1fr);
      column-gap: var(--space-4);
      padding-block: var(--space-5);

      & .promise__icon {
        grid-row: span 2;
        margin-bottom: 0;
      }
    }

    .counters__list {
      grid-template-columns: repeat(2, minmax(0, 1fr));
      gap: var(--space-6) var(--space-4);

      & li {
        padding-left: var(--space-4);
      }
    }

    .journey__card {
      padding: var(--space-6);
    }
  }
}