/**
 * Front page sections.
 *
 * Measurements come from the 1440px desktop frame (D/Home) and the 390px
 * mobile frame (M/Home). Where a size differs between the two it is fluid
 * between them — each clamp's middle term is the straight line through both
 * frames, as in tokens.css — so the drawn value is exact at each frame.
 *
 * Purpose and the call-to-action band are also drawn on the About page, so
 * their rules stay free of home-only assumptions.
 */

:root {
  --wb-home-fs-hero-text:  clamp(0.8562rem, 0.7085rem + 0.602vw, 1.25rem);   /* 13.7 → 20 */
  --wb-home-fs-card-t:     clamp(0.9rem, 0.7452rem + 0.630vw, 1.3125rem);     /* 14.4 → 21 */
  --wb-home-fs-card-p:     clamp(0.7812rem, 0.7226rem + 0.239vw, 0.9375rem); /* 12.5 → 15 */
  --wb-home-fs-eyebrow:    clamp(0.8125rem, 0.7187rem + 0.382vw, 1.0625rem); /* 13 → 17 */
  --wb-home-fs-about-t:    clamp(1.375rem, 0.8354rem + 2.197vw, 2.8125rem);   /* 22 → 45 */
  --wb-home-fs-about-p:    clamp(0.875rem, 0.7577rem + 0.478vw, 1.1875rem);   /* 14 → 19 */
  --wb-home-fs-stat-v:     clamp(1rem, 0.8358rem + 0.669vw, 1.4375rem);       /* 16 → 23 */
  --wb-home-fs-stat-l:     clamp(0.75rem, 0.6562rem + 0.382vw, 1rem);         /* 12 → 16 */
  --wb-home-fs-section:    clamp(1.5625rem, 0.9291rem + 2.579vw, 3.25rem);    /* 25 → 52 */
  --wb-home-fs-item-t:     clamp(0.8375rem, 0.753rem + 0.344vw, 1.0625rem);   /* 13.4 → 17 */
  --wb-home-fs-item-p:     clamp(0.8063rem, 0.7101rem + 0.392vw, 1.0625rem); /* 12.9 → 17 */
  --wb-home-fs-body:       clamp(0.8438rem, 0.7616rem + 0.334vw, 1.0625rem); /* 13.5 → 17 */
  --wb-home-fs-res-t:      clamp(1.4312rem, 1.2178rem + 0.869vw, 2rem);       /* 22.9 → 32 */
  --wb-home-fs-res-p:      clamp(0.875rem, 0.8046rem + 0.287vw, 1.0625rem);   /* 14 → 17 */
  --wb-home-fs-news-t:     clamp(1rem, 0.6012rem + 1.624vw, 2.0625rem);       /* 16 → 33 */
  --wb-home-fs-btn:        clamp(0.8375rem, 0.753rem + 0.344vw, 1.0625rem);   /* 13.4 → 17 */
  --wb-home-btn-h:         clamp(2.5rem, 2.1246rem + 1.528vw, 3.5rem);        /* 40 → 56 */
  --wb-home-btn-h-lg:      clamp(2.75rem, 2.4684rem + 1.146vw, 3.5rem);       /* 44 → 56 */
}

/* The design's buttons are 600-weight and a fixed height at each frame. */
.wb-btn.wb-hero__cta,
.wb-btn.wb-cta-band__btn,
.wb-btn.wb-residence__cta,
.wb-btn.wb-purpose__cta {
  min-height: var(--wb-home-btn-h);
  padding-block: 0;
  font-size: var(--wb-home-fs-btn);
  font-weight: var(--wb-fw-semibold);
  line-height: 1.35;
}

/* Section labels run 13px on the phone and 17px at desktop. */
.wb-about__eyebrow,
.wb-purpose .wb-eyebrow,
.wb-news .wb-eyebrow {
  margin-bottom: 0;
  font-size: var(--wb-home-fs-eyebrow);
  letter-spacing: 0.006em;
  line-height: 1.35;
}

/* ==========================================================================
 * Hero — 1440x908
 * The photograph at 30% opacity on white (a flat wash, not a gradient), the
 * copy, and two feature cards on the bottom edge. On the phone the photograph
 * stops under the button and the cards stack on white below it.
 * ======================================================================= */

.wb-hero {
  position: relative;
  display: flex;
  flex-direction: column;
}

/* The media box sizes against this block on the phone, the section at desktop. */
.wb-hero__top {
  position: relative;
  padding-block: calc(var(--wb-header-h) + 0.6875rem) 2.0625rem; /* 11px 33px */
}

.wb-hero__media {
  position: absolute;
  inset: 0;
  z-index: 0;
  overflow: hidden;
  background-color: var(--wb-white);
}

.wb-hero__img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  opacity: 0.3;
}

.wb-hero__inner {
  position: relative;
  z-index: 1;
}

.wb-hero__content {
  max-width: 40rem; /* 640px */
}

.wb-hero__title {
  margin: 0 0 1.4375rem; /* 23px */
  color: var(--wb-navy);
  font-size: var(--wb-fs-h1);
  line-height: 1.2;
}

.wb-hero__text {
  margin: 0 0 2.5rem; /* 40px */
  max-width: 37.5rem; /* 600px */
  color: #1a2b3c;
  font-size: var(--wb-home-fs-hero-text);
  font-weight: var(--wb-fw-regular);
  line-height: 1.53;
}

.wb-btn.wb-hero__cta {
  padding-inline: clamp(1.5625rem, 1.0229rem + 2.197vw, 3rem); /* 25 → 48 */
  border-radius: 2px;
}

@media (min-width: 64rem) {
  .wb-hero {
    min-height: max(100svh, 56.75rem); /* 908px */
  }

  /*
   * Static, so the photograph spans the whole section — behind the cards
   * too. The copy is centred in the space left above the cards.
   */
  .wb-hero__top {
    position: static;
    display: flex;
    flex: 1 0 auto;
    align-items: center;
    padding-block: calc(var(--wb-header-h) + 5.5rem) 4.125rem; /* 88px 66px */
  }

  .wb-hero__title {
    margin-bottom: 1.75rem; /* 28px */
  }

  .wb-hero__text {
    margin-bottom: 1rem;
    color: #333;
    font-weight: var(--wb-fw-semibold);
    letter-spacing: 0.005em;
    line-height: 1.5;
  }

  .wb-btn.wb-hero__cta {
    border-radius: 3px;
  }
}

/* --------------------------------------------------------------------------
 * Hero cards
 * ----------------------------------------------------------------------- */

.wb-hero__foot {
  position: relative;
  z-index: 1;
}

/*
 * Phone: both cards tinted with a 3px green edge, the icon beside the copy,
 * stacked 11px apart. Desktop: side by side on the bottom edge, only the
 * first tinted, its edge thickened to 9px, the icon above the copy.
 */
.wb-hero__cards {
  display: grid;
  gap: 0.6875rem; /* 11px */
  margin: 1rem 0 0;
  padding: 0;
  list-style: none;
}

.wb-hero-card {
  position: relative;
  display: flex;
  gap: 0.5625rem; /* 9px */
  align-items: flex-start;
  padding-block: 1.3125rem 1.25rem; /* 21px 20px */
  padding-inline: 1.3125rem 1rem; /* 21px 16px */
  background-color: var(--wb-surface);
  border-inline-start: 3px solid var(--wb-secondary);
}

.wb-hero-card__icon {
  flex-shrink: 0;
  color: var(--wb-secondary);
  line-height: 0;
}

.wb-hero-card__icon .wb-icon {
  width: 1.4375rem; /* 23px */
  height: 1.4375rem;
}

.wb-hero-card__title {
  margin: 0 0 0.375rem;
  color: var(--wb-primary-dark);
  font-size: var(--wb-home-fs-card-t);
  font-weight: var(--wb-fw-semibold);
  line-height: 1.32;
}

.wb-hero-card__text {
  margin: 0;
  color: #777;
  font-size: var(--wb-home-fs-card-p);
  line-height: 1.52;
}

/* Optional call to action beneath a card's copy. */
.wb-hero-card__link {
  margin-top: var(--wb-space-3);
  font-size: var(--wb-home-fs-card-p);
  font-weight: var(--wb-fw-semibold);
}

@media (min-width: 64rem) {
  .wb-hero__cards {
    grid-template-columns: 22.4375rem 21.8125rem; /* 359px 349px */
    gap: 0;
    width: max-content;
    max-width: 100%;
    margin: 0;
    margin-inline-start: 2px;
    box-shadow: 0 24px 40px rgba(16, 53, 75, 0.08);
  }

  .wb-hero-card {
    flex-direction: column;
    gap: 1.6875rem; /* 27px */
    min-height: 18.125rem; /* 290px */
    padding-block: 3rem 2rem; /* 48px 32px */
    padding-inline: 2.75rem 2rem; /* 44px 32px */
    background-color: var(--wb-white);
    border-inline-start: 0;
  }

  .wb-hero-card--accent {
    padding-inline-start: 3.375rem; /* 54px, 9px of it under the edge */
    background-color: var(--wb-surface);
    border-inline-start: 9px solid var(--wb-secondary);
  }

  .wb-hero-card__icon .wb-icon {
    width: 3.25rem; /* 52px */
    height: 3.25rem;
  }

  .wb-hero-card__title {
    margin-bottom: 0.625rem; /* 10px */
    font-weight: var(--wb-fw-regular);
  }

  .wb-hero-card__text {
    letter-spacing: 0.007em;
    line-height: 1.53;
  }
}

/* ==========================================================================
 * About — label and heading beside the paragraph, a wide image, statistics
 * ======================================================================= */

.wb-about {
  padding-block: clamp(3.125rem, 2.6089rem + 2.101vw, 4.5rem) 0; /* 50 → 72 */
}

.wb-about__head {
  display: grid;
  margin-bottom: clamp(3.0625rem, 3.1497rem + -0.335vw, 3.375rem); /* 49 → 54 */
}

.wb-about__eyebrow {
  margin-bottom: 0.1875rem;
}

.wb-about__title {
  margin: 0 0 1.25rem;
  color: var(--wb-primary-dark);
  font-size: var(--wb-home-fs-about-t);
  line-height: 1.29;
  text-transform: uppercase;
}

.wb-about__text {
  color: #666;
  font-size: var(--wb-home-fs-about-p);
  line-height: 1.6;
}

.wb-about__text p {
  margin: 0;
}

.wb-about__text p + p {
  margin-top: 1em;
}

.wb-about__img {
  width: 100%;
  height: 12.375rem; /* 198px */
  object-fit: cover;
}

@media (min-width: 64rem) {
  /* Heading column 450 : gap 110 : paragraph 610, as drawn in 1194px. */
  .wb-about__head {
    grid-template-columns: minmax(0, 450fr) minmax(0, 610fr);
    grid-template-rows: auto 1fr;
    column-gap: 9.2%;
  }

  .wb-about__eyebrow {
    grid-column: 1;
    margin-bottom: 0.875rem; /* 14px */
  }

  .wb-about__title {
    grid-column: 1;
    margin: 0;
    line-height: 1.267;
  }

  .wb-about__text {
    grid-column: 2;
    grid-row: 2;
    max-width: 38.125rem; /* 610px */
    padding-top: 0.1875rem;
    color: #555;
    letter-spacing: 0.005em;
    line-height: 1.58;
  }

  .wb-about__media {
    border-radius: var(--wb-radius-md);
    overflow: hidden;
  }

  .wb-about__img {
    height: auto;
    aspect-ratio: 1194 / 465;
  }
}

/* --------------------------------------------------------------------------
 * Statistics — between two rules, two-up on the phone, four across at desktop
 * ----------------------------------------------------------------------- */

.wb-stats {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: 1.4375rem 0; /* 23px */
  margin: 1.75rem 0 0; /* 28px */
  padding: 1.875rem 0 1.6875rem; /* 30px 0 27px */
  list-style: none;
  border-block: 1px solid #edf2f4;
}

@media (min-width: 64rem) {
  .wb-stats {
    grid-template-columns: repeat(4, minmax(0, 1fr));
    margin-top: 0.5rem; /* 8px */
    padding: 5rem 0; /* 80px */
    border-block: 2px solid #eaeef2;
  }
}

.wb-stats__item {
  display: flex;
  flex-direction: column;
  align-items: center;
  padding-inline: 0.3125rem;
  text-align: center;
}

.wb-stats__icon {
  margin-bottom: 0.4375rem; /* 7px */
  color: var(--wb-secondary);
  line-height: 0;
}

.wb-stats__icon .wb-icon {
  width: 1.625rem; /* 26px */
  height: 1.625rem;
}

.wb-stats__value {
  font-size: var(--wb-home-fs-stat-v);
  font-weight: var(--wb-fw-bold);
  line-height: 1.375;
}

.wb-stats__number {
  color: var(--wb-primary-dark);
}

/* A trailing "+" is green in the design, not blue. */
.wb-stats__symbol {
  color: var(--wb-secondary);
}

.wb-stats__label {
  max-width: 15rem; /* 240px */
  margin-top: 0.25rem;
  color: #777;
  font-size: var(--wb-home-fs-stat-l);
  line-height: 1.35;
}

@media (min-width: 64rem) {
  .wb-stats__icon {
    margin-bottom: 0.8125rem; /* 13px */
  }

  .wb-stats__icon .wb-icon {
    width: 3rem; /* 48px */
    height: 3rem;
  }

  .wb-stats__value {
    letter-spacing: 0.004em;
  }

  .wb-stats__number {
    color: var(--wb-primary);
  }

  .wb-stats__label {
    margin-top: 0.5rem;
    letter-spacing: 0.006em;
  }
}

/* ==========================================================================
 * Purpose — copy left, image right
 * ======================================================================= */

/*
 * Section spacing: the design's gaps between home sections ran from about
 * 100px to 270px at desktop. They are evened out to 120px at desktop
 * and 50-65px on the phone, by trimming each section's top and bottom
 * padding (Purpose, Advantages, Our Projects, Testimonials, News).
 */
.wb-purpose {
  padding-block: clamp(1.375rem, 2.5784rem - 1.337vw, 2.25rem) /* 36 → 22 */
    clamp(3.5rem, 1.9986rem + 6.113vw, 7.5rem); /* 56 → 120 */
}

.wb-purpose__inner {
  display: grid;
  gap: 0.375rem; /* 6px — the image's own headroom does the spacing */
}

@media (min-width: 64rem) {
  .wb-purpose__inner {
    grid-template-columns: minmax(0, 1fr) 28.75rem; /* 460px */
    gap: 2.125rem; /* 34px */
    align-items: end;
  }

  .wb-purpose__body {
    padding-bottom: 2.0625rem; /* 33px */
  }
}

.wb-purpose__body .wb-section-header {
  margin-bottom: 2rem; /* 32px */
}

.wb-purpose__body .wb-section-header__title {
  font-size: var(--wb-home-fs-section);
  line-height: 1.2;
}

@media (min-width: 64rem) {
  .wb-purpose .wb-eyebrow {
    margin-bottom: 0.5rem;
  }

  .wb-purpose__body .wb-section-header {
    margin-bottom: 1.8125rem; /* 29px */
  }
}

.wb-purpose__list {
  display: flex;
  flex-direction: column;
  gap: 1.1875rem; /* 19px */
  margin: 0;
  padding: 0;
  list-style: none;
}

.wb-purpose__item {
  display: flex;
  gap: 0.8125rem; /* 13px */
  align-items: flex-start;
}

.wb-purpose__icon {
  flex-shrink: 0;
  padding-top: 0.125rem;
  color: var(--wb-secondary);
  line-height: 0;
}

.wb-purpose__icon .wb-icon {
  width: 1.0625rem; /* 17px */
  height: 1.0625rem;
}

.wb-purpose__item-title {
  margin: 0;
  color: var(--wb-primary-dark);
  font-size: var(--wb-home-fs-item-t);
  font-weight: var(--wb-fw-semibold);
  line-height: 1.35;
}

.wb-purpose__item-text {
  margin: 0.5rem 0 0;
  color: #777;
  font-size: var(--wb-home-fs-item-p);
  line-height: 1.55;
}

@media (min-width: 64rem) {
  .wb-purpose__list {
    gap: 0.6875rem; /* 11px */
  }

  .wb-purpose__item {
    gap: 1rem;
  }

  .wb-purpose__icon .wb-icon {
    width: 1.25rem; /* 20px */
    height: 1.25rem;
  }

  .wb-purpose__item-text {
    max-width: 41.25rem; /* 660px */
    margin-top: 0.25rem;
    color: #666;
    letter-spacing: 0.006em;
    line-height: 1.41;
  }
}

/* The image and the button's white plate, inset 6px on the phone frame. */
.wb-purpose__figure {
  position: relative;
  margin-inline: 0.375rem;
}

.wb-purpose__img {
  width: 100%;
  height: auto;
  aspect-ratio: 460 / 580;
  object-fit: cover;
}

@media (min-width: 64rem) {
  .wb-purpose__figure {
    margin-inline: 0;
  }
}

/*
 * Square corners, and sitting in the image's bottom-left corner on a white
 * plate that reaches 12-16px past it above and to the right.
 */
.wb-btn.wb-purpose__cta {
  position: absolute;
  inset-block-end: 0;
  inset-inline-start: 0;
  min-height: clamp(2.5625rem, 2.1871rem + 1.528vw, 3.5rem); /* 41 → 56 */
  padding-inline: clamp(1.5rem, 1.2889rem + 0.860vw, 2.0625rem); /* 24 → 33 */
  border-radius: 0;
  font-weight: var(--wb-fw-bold);
  box-shadow: 0 -12px 0 var(--wb-white), 12px 0 0 var(--wb-white),
    12px -12px 0 var(--wb-white);
}

@media (min-width: 64rem) {
  .wb-btn.wb-purpose__cta {
    box-shadow: 0 -16px 0 var(--wb-white), 16px 0 0 var(--wb-white),
      16px -16px 0 var(--wb-white);
  }
}

/* ==========================================================================
 * Call-to-action band — 1440x550
 * ======================================================================= */

.wb-cta-band {
  position: relative;
  display: flex;
  align-items: center;
  min-height: 20.75rem; /* 332px */
  padding-block: 2.375rem 3.375rem; /* 38px 54px */
  overflow: hidden;
}

@media (min-width: 64rem) {
  /* The copy starts 133px down the 550px band rather than centring in it. */
  .wb-cta-band {
    align-items: flex-start;
    min-height: 34.375rem; /* 550px */
    padding-block: 8.3125rem 5.125rem; /* 133px 82px */
  }
}

.wb-cta-band__media {
  position: absolute;
  inset: 0;
  z-index: 0;
}

.wb-cta-band__img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  object-position: 10% 50%;
}

/* Only for a photograph that has not been washed out already. */
.wb-cta-band--wash .wb-cta-band__media::after {
  content: "";
  position: absolute;
  inset: 0;
  background-color: rgba(255, 255, 255, 0.6);
}

.wb-cta-band__inner {
  position: relative;
  z-index: 2;
}

.wb-cta-band__content {
  max-width: 37.5rem; /* 600px */
}

.wb-cta-band__title {
  max-width: 18.75rem; /* 300px on the phone */
  margin: 0 0 1.4375rem; /* 23px */
  color: var(--wb-navy);
  font-size: clamp(1.625rem, 1.015rem + 2.483vw, 3.25rem); /* 26 → 52 */
  line-height: 1.2;
}

.wb-cta-band__text {
  margin: 0 0 1.5625rem; /* 25px */
  color: #1a2b3c;
  font-size: var(--wb-home-fs-body);
  line-height: 1.55;
}

.wb-btn.wb-cta-band__btn {
  min-height: var(--wb-home-btn-h-lg);
  padding-inline: clamp(1.5rem, 1.195rem + 1.242vw, 2.3125rem); /* 24 → 37 */
  border-radius: 2px;
}

@media (min-width: 64rem) {
  .wb-cta-band__inner {
    /* The design sets the copy 4px left of the other sections' edge. */
    padding-inline-start: max(0px, calc(var(--wb-gutter-lg) - 4px));
  }

  .wb-cta-band__title {
    max-width: none;
    margin-bottom: 1.3125rem; /* 21px */
  }

  .wb-cta-band__text {
    max-width: 35rem; /* 560px */
    margin-bottom: 2.5rem; /* 40px */
    color: #3e4a55;
    font-weight: var(--wb-fw-semibold);
    letter-spacing: 0.006em;
    line-height: 1.53;
  }
}

/* --------------------------------------------------------------------------
 * Dark tone — white copy over a dark photograph (the About page's band).
 * ----------------------------------------------------------------------- */

.wb-cta-band--dark .wb-cta-band__title {
  color: var(--wb-white);
}

.wb-cta-band--dark .wb-cta-band__text {
  color: #e6e6e6;
  font-weight: var(--wb-fw-regular);
}

@media (min-width: 64rem) {
  .wb-cta-band--dark {
    padding-top: 9.25rem; /* 148px */
  }

  .wb-cta-band--dark .wb-cta-band__title {
    margin-bottom: 0.5rem; /* 8px */
  }

  .wb-cta-band--dark .wb-cta-band__text {
    max-width: 36.25rem; /* 580px */
    margin-bottom: 1.375rem; /* 22px */
  }
}

/* --------------------------------------------------------------------------
 * Optional tile mosaic, drawn in markup for a photograph without one baked
 * in — a staircase of squares against the edge away from the copy. The shape
 * and each square's opacity come from the template.
 * ----------------------------------------------------------------------- */

.wb-cta-band__mosaic {
  display: none;
}

@media (min-width: 64rem) {
  .wb-cta-band__mosaic {
    position: absolute;
    z-index: 1;
    inset-inline-end: 0;
    inset-block-end: 0;
    display: grid;
    grid-template-columns: repeat(8, 4.625rem); /* 74px */
    grid-template-rows: repeat(5, 4.625rem);
    transform: scaleX(-1);
    pointer-events: none;
  }

  .wb-cta-band__tile {
    background-color: var(--wb-white);
  }
}

/* --------------------------------------------------------------------------
 * Mirrored band — copy right, mosaic left
 * ----------------------------------------------------------------------- */

@media (min-width: 64rem) {
  .wb-cta-band--end .wb-cta-band__inner {
    padding-inline-start: var(--wb-gutter-lg);
  }

  .wb-cta-band--end .wb-cta-band__content {
    margin-inline-start: auto;
    text-align: end;
  }

  .wb-cta-band--end .wb-cta-band__content .wb-btn {
    /* The button follows the text to the right edge of the copy block. */
    margin-inline-start: auto;
  }

  .wb-cta-band--end .wb-cta-band__text {
    margin-inline-start: auto;
  }

  /* Drawn against the other edge, the way it is stored. */
  .wb-cta-band--end .wb-cta-band__mosaic {
    inset-inline: 0 auto;
    transform: none;
  }
}

/* ==========================================================================
 * Why Wadi Badan / The Advantages — tinted cards on a white ground
 * ======================================================================= */

.wb-offerings {
  /* Bottom + Our Projects' top (0 → 32) = the 56 → 120 above the heading. */
  padding-block: clamp(3.5rem, 1.9986rem + 6.113vw, 7.5rem) /* 56 → 120 */
    clamp(3.5rem, 2.7493rem + 3.056vw, 5.5rem); /* 56 → 88 */
}

.wb-offerings .wb-section-header {
  margin-bottom: clamp(2.0625rem, 0.6793rem + 5.635vw, 5.75rem); /* 33 → 92 */
}

.wb-offerings .wb-eyebrow {
  margin: 0 0 0.3125rem;
  font-size: var(--wb-fs-eyebrow-sm);
  line-height: 1.38;
}

.wb-offerings .wb-section-header__title {
  color: var(--wb-primary-dark);
  font-size: var(--wb-fs-advant);
  line-height: 1.36;
}

.wb-offerings .wb-section-header__lead {
  max-width: 28.75rem; /* 460px */
  font-size: var(--wb-fs-offer-lead);
  line-height: 1.7;
}

/* One column on the phone; three 260px cards 32px apart at desktop. */
.wb-offerings__grid {
  display: grid;
  gap: 0.875rem; /* 14px */
  margin: 0;
  padding: 0;
  list-style: none;
}

@media (min-width: 48rem) {
  .wb-offerings__grid {
    grid-template-columns: repeat(auto-fit, 16.25rem); /* 260px */
    justify-content: center;
    gap: var(--wb-space-6);
  }
}

.wb-offering {
  display: flex;
  flex-direction: column;
  align-items: center;
  padding: 1.375rem 1.9375rem; /* 22px 31px */
  background-color: var(--wb-surface);
  text-align: center;
  transition: transform var(--wb-transition), box-shadow var(--wb-transition);
}

.wb-offering:hover {
  transform: translateY(-4px);
  box-shadow: var(--wb-shadow-md);
}

.wb-offering__icon {
  display: inline-flex;
  margin-bottom: 0.875rem;
  color: var(--wb-secondary);
  line-height: 0;
}

.wb-offering__icon .wb-icon {
  width: 1.75rem; /* 28px */
  height: 1.75rem;
}

.wb-offering__title {
  margin: 0 0 0.5rem;
  color: var(--wb-primary-dark);
  font-size: var(--wb-fs-offer-t);
  font-weight: var(--wb-fw-semibold);
  line-height: 1.37;
}

.wb-offering__text {
  color: #777;
  font-size: var(--wb-fs-offer-p);
  line-height: 1.55;
}

.wb-offering__text p {
  margin: 0;
}

@media (min-width: 48rem) {
  .wb-offering {
    min-height: 15.375rem; /* 246px */
    padding: 2.25rem 1.5rem 1.5rem; /* 36px 24px 24px */
    border: 1px solid #e5eaef;
    border-radius: var(--wb-radius-sm);
  }

  .wb-offering__icon {
    margin-bottom: 0.6875rem; /* 11px */
  }

  .wb-offering__icon .wb-icon {
    width: 2.75rem; /* 44px */
    height: 2.75rem;
  }

  .wb-offering__text {
    color: #666;
    letter-spacing: 0.008em;
    line-height: 1.62;
  }
}

/* ==========================================================================
 * Our Projects — project summary, then three unit cards
 * ======================================================================= */

.wb-residence {
  /* On the phone the advantages' bottom padding alone makes the gap. */
  padding-block: clamp(0rem, -0.7507rem + 3.056vw, 2rem) /* 0 → 32 */
    clamp(3.5rem, 2.6320rem + 3.534vw, 5.8125rem); /* 56 → 93 */
}

.wb-residence__eyebrow {
  margin: 0 0 clamp(0.5625rem, 1.2502rem - 0.764vw, 1.0625rem); /* 17 → 9 */
  font-size: var(--wb-fs-eyebrow-sm);
  letter-spacing: 0.008em;
  line-height: 1.38;
}

.wb-residence__feature {
  display: grid;
  gap: 1.5625rem; /* 25px */
  margin-bottom: 2.375rem; /* 38px */
}

.wb-residence__img {
  width: 100%;
  height: 13.75rem; /* 220px */
  object-fit: cover;
}

.wb-residence__title {
  margin: 0 0 1.0625rem; /* 17px */
  color: var(--wb-primary-dark);
  font-size: var(--wb-home-fs-res-t);
  line-height: 1.31;
}

.wb-residence__text {
  margin: 0 0 0.375rem;
  color: #777;
  font-size: var(--wb-home-fs-res-p);
  line-height: 1.54;
}

/* Two columns at both frames; 40px rows on the phone, 26px at desktop. */
.wb-residence__facts {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: 1.375rem 0.75rem; /* 22px 12px */
  margin: 0;
  padding: 0;
  list-style: none;
}

.wb-residence__fact {
  display: flex;
  gap: 0.5rem;
  align-items: center;
  color: #777;
  font-size: var(--wb-home-fs-body);
  line-height: 1.35;
}

.wb-residence__fact-icon {
  flex-shrink: 0;
  width: 1rem;
  height: 1rem;
  color: var(--wb-navy);
}

.wb-residence__fact-value {
  font-weight: var(--wb-fw-regular);
}

.wb-btn.wb-residence__cta {
  min-height: var(--wb-home-btn-h-lg);
  margin-top: 1.5625rem; /* 25px */
  padding-inline: clamp(1.4375rem, 1.0856rem + 1.433vw, 2.375rem); /* 23 → 38 */
  border-radius: 2px;
}

@media (min-width: 64rem) {
  /*
   * The block keeps the design's 1320px of content however wide the screen,
   * so from 1440px up the photo is exactly 495×381 and each card 424×349;
   * narrower desktops scale it down in proportion.
   */
  .wb-residence > .wb-container {
    max-width: calc(82.5rem + (var(--wb-gutter-lg) * 2)); /* 1320px + gutters */
  }

  /* Image 495 : gap 50 : copy, as drawn in 1320px. */
  .wb-residence__feature {
    grid-template-columns: minmax(0, 495fr) minmax(0, 775fr);
    gap: 3.125rem; /* 50px */
    align-items: center;
    margin-bottom: 3.0625rem; /* 49px */
  }

  .wb-residence__media {
    border-radius: 6px;
    overflow: hidden;
  }

  .wb-residence__img {
    height: auto;
    aspect-ratio: 495 / 381;
  }

  .wb-residence__title {
    margin-bottom: 0.875rem; /* 14px */
  }

  .wb-residence__text {
    max-width: 45rem; /* 720px */
    margin-bottom: 1.625rem; /* 26px */
    color: #555;
    letter-spacing: 0.006em;
  }

  .wb-residence__facts {
    grid-template-columns: repeat(2, minmax(0, 16.5rem)); /* 264px */
    gap: 0.1875rem 0; /* 3px */
  }

  .wb-residence__fact {
    gap: 1rem;
    color: #9a9a9a;
    letter-spacing: 0.006em;
  }

  .wb-residence__fact-icon {
    width: 1.5rem; /* 24px */
    height: 1.5rem;
  }

  .wb-residence__fact-value {
    font-weight: var(--wb-fw-semibold);
  }

  .wb-btn.wb-residence__cta {
    margin-top: 3.1875rem; /* 51px */
    border-radius: 3px;
  }
}

/* --------------------------------------------------------------------------
 * Unit cards. The card itself is template-parts/components/apartment-card;
 * these rules fit it to this row.
 * ----------------------------------------------------------------------- */

/* Cards stack 18px apart on the phone frame, three across 24px apart. */
.wb-residence__grid {
  display: grid;
  gap: 1.125rem;
  grid-template-columns: repeat(auto-fit, minmax(min(100%, 17rem), 1fr));
}

@media (min-width: 64rem) {
  .wb-residence__grid {
    gap: var(--wb-space-5);
  }

  /* The label hugs its text rather than holding a fixed width. */
  .wb-residence .wb-card__plate {
    width: auto;
    max-width: calc(100% - 3rem);
    min-height: 0;
    padding-block: 0.4375rem 0.5625rem; /* 7px 9px */
    padding-inline: 0.6875rem 1rem; /* 11px 16px */
  }

  .wb-residence .wb-card__plate .wb-card__title {
    margin: 0 0 0.4375rem;
    color: #1a1a1a;
    font-size: var(--wb-fs-body);
    font-weight: var(--wb-fw-semibold);
    letter-spacing: 0.006em;
    line-height: 1.35;
  }

  .wb-residence .wb-card__price {
    font-size: var(--wb-fs-body);
    letter-spacing: 0.006em;
    line-height: 1.35;
  }

  /* Facts row 6px under the photo, on a 17px line: 326 + 6 + 17 = 349. */
  .wb-residence .wb-card--apartment {
    gap: 0.375rem; /* 6px */
  }

  /* 424×326 photo, as drawn. */
  .wb-residence .wb-card__media {
    aspect-ratio: 424 / 326;
  }

  /* "3 Beds | 2 Baths | 273 M2", with 21px either side of each rule. */
  .wb-residence .wb-specs--compact .wb-specs__item {
    padding-inline: 1.3125rem;
    color: #777;
    letter-spacing: 0.008em;
    line-height: 1.0625rem; /* 17px */
  }

  .wb-residence .wb-specs--compact .wb-specs__item:first-child {
    padding-inline-start: 0;
  }

  .wb-residence .wb-specs--compact .wb-specs__item + .wb-specs__item {
    border-inline-start-color: #999;
  }
}

/* ==========================================================================
 * Partners — not in the current design, so not in the default section list.
 * Kept for a site that adds it back with the wadi_badan_home_sections filter.
 * ======================================================================= */

/* The intro runs wider than the default header measure. */
.wb-partners .wb-section-header__lead {
  max-width: 46rem;
  font-size: var(--wb-fs-body);
  line-height: 1.7;
}

.wb-partners {
  background-color: var(--wb-surface);
}

.wb-partners .wb-section-header__title {
  font-size: var(--wb-fs-section);
}

/* Two-up on mobile, a single row of four at desktop. */
.wb-partners__grid {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  place-items: center;
  gap: var(--wb-space-4);
}

@media (min-width: 64rem) {
  .wb-partners__grid {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    justify-content: space-between;
    gap: var(--wb-space-5);
  }
}

.wb-partners__item {
  display: flex;
  align-items: center;
  justify-content: center;
  width: 100%;
  max-width: 9.625rem; /* 154px */
  aspect-ratio: 1;
  background-color: var(--wb-white);
}

.wb-partners__logo {
  width: 100%;
  height: 100%;
  object-fit: contain;
}

.wb-partners__name {
  padding: var(--wb-space-3);
  color: var(--wb-primary-dark);
  font-weight: var(--wb-fw-bold);
  text-align: center;
}

/* ==========================================================================
 * Testimonials — quote card overlapping the photograph
 * ======================================================================= */

.wb-testimonials {
  padding-block: clamp(0rem, -0.6334rem + 2.579vw, 1.6875rem) /* 0 → 27 */
    clamp(3rem, 3.6877rem - 0.764vw, 3.5rem); /* 56 → 48 */
}

/*
 * Phone, from the 390px frame: a 269x234 photograph centred, then the card
 * 29px below it, 10px in from each side, with a 3px rule.
 */
.wb-testimonials__inner {
  display: grid;
  justify-items: center;
}

.wb-testimonials__media {
  width: min(100%, 16.8125rem); /* 269px */
}

.wb-testimonials__img {
  width: 100%;
  height: 14.625rem; /* 234px */
  object-fit: cover;
  object-position: 50% 30%;
}

.wb-testimonials__slider {
  position: relative;
  justify-self: stretch;
  margin: 1.8125rem 0.625rem 0; /* 29px 10px 0 */
}

.wb-testimonial {
  position: relative;
  padding: 1.4375rem 1.3125rem 1.75rem 1.3125rem; /* 23px 21px 28px */
  background-color: var(--wb-white);
  border-inline-start: 3px solid var(--wb-secondary);
  box-shadow: 0 14px 30px rgba(16, 53, 75, 0.1);
}

.wb-testimonial__rating {
  display: flex;
  gap: 0.25rem;
  margin: 0 0 0.6875rem; /* 11px */
  color: var(--wb-secondary);
}

.wb-testimonial__star {
  width: 0.875rem; /* 14px */
  height: 0.875rem;
}

.wb-testimonial__quote {
  margin: 0 0 1.1875rem;
  padding: 0;
  border: 0;
  color: #666;
  font-size: 0.825rem; /* 13.2px */
  line-height: 1.375rem; /* 22px */
}

.wb-testimonial__quote p {
  margin: 0;
}

.wb-testimonial__author {
  display: flex;
  gap: 0.5rem;
  align-items: center;
}

.wb-testimonial__avatar {
  width: 2.5rem; /* 40px */
  height: 2.5rem;
  border-radius: 50%;
  object-fit: cover;
  background-color: var(--wb-gray-300);
}

.wb-testimonial__meta {
  display: flex;
  flex-direction: column;
}

.wb-testimonial__name {
  color: var(--wb-primary-dark);
  font-size: 0.84375rem; /* 13.5px */
  font-weight: var(--wb-fw-semibold);
  line-height: 1.125rem;
}

.wb-testimonial__role {
  color: #888;
  font-size: 0.75rem; /* 12px */
  line-height: 1.0625rem;
}

/* Oversized quotation glyph in the card's bottom corner (desktop only). */
.wb-testimonial__mark {
  display: none;
}

/*
 * Only shown when there is more than one testimonial. Aligned right so they
 * sit beneath the card rather than over the photograph it overlaps.
 */
.wb-testimonials__controls {
  display: flex;
  justify-content: flex-end;
  gap: var(--wb-space-3);
  margin-top: var(--wb-space-6);
}

@media (min-width: 64rem) {
  /*
   * A 466x574 photograph with the 547px card overlapping its right edge by
   * 117px, the card's top 166px below the photograph's. Centred as a pair.
   */
  .wb-testimonials__inner {
    grid-template-columns: minmax(0, 29.125rem) minmax(0, 26.875rem); /* 466px, then 547 - 117 */
    justify-content: center;
    /* The design sits the pair 49px right of centre, room permitting. */
    padding-inline-start: min(6.125rem, max(0px, calc(100% - 56rem)));
    justify-items: stretch;
    align-items: start;
  }

  .wb-testimonials__media {
    width: auto;
  }

  .wb-testimonials__img {
    height: auto;
    aspect-ratio: 466 / 574;
    object-position: 50% 50%;
  }

  .wb-testimonials__slider {
    z-index: 1;
    width: calc(100% + 7.3125rem); /* 547px at full size */
    margin: 10.375rem 0 0; /* 166px */
    margin-inline-start: -7.3125rem; /* -117px, over the photograph */
  }

  .wb-testimonial {
    min-height: 21.9375rem; /* 351px */
    padding-block: 3.0625rem 3rem; /* 49px 48px */
    padding-inline: 2.5625rem 3rem; /* 41px 48px */
    border-inline-start-width: 8px;
    box-shadow: 0 20px 50px rgba(16, 53, 75, 0.08);
  }

  .wb-testimonial__rating {
    gap: 0.4375rem; /* 7px */
    margin-bottom: 2rem; /* 32px */
  }

  .wb-testimonial__star {
    width: 1.1875rem; /* 19px */
    height: 1.1875rem;
  }

  .wb-testimonial__quote {
    max-width: 28.125rem; /* 450px */
    margin-bottom: 3.8125rem; /* 61px */
    color: #555;
    font-size: 1.0625rem; /* 17px */
    letter-spacing: 0.006em;
    line-height: 1.625rem; /* 26px */
  }

  .wb-testimonial__author {
    gap: 1rem;
  }

  .wb-testimonial__avatar {
    width: 4rem; /* 64px */
    height: 4rem;
  }

  .wb-testimonial__name {
    color: #333;
    font-size: 1.0625rem; /* 17px */
    letter-spacing: 0.006em;
    line-height: 1.4375rem;
  }

  .wb-testimonial__role {
    margin-top: 0.1875rem;
    color: #555;
    font-size: 0.6875rem; /* 11px */
    line-height: 0.9375rem;
  }

  .wb-testimonial__mark {
    position: absolute;
    display: block;
    inset-block-end: 1.5625rem; /* 25px */
    inset-inline-end: 1.6875rem; /* 27px */
    color: #e4e4e4;
    line-height: 0;
    pointer-events: none;
  }

  .wb-testimonial__mark .wb-icon {
    width: 5.375rem; /* 86px */
    height: 5.375rem;
  }
}

/* ==========================================================================
 * News — two wide cards, image beside copy
 * ======================================================================= */

.wb-news {
  padding-block: clamp(0rem, -1.6890rem + 6.877vw, 4.5rem) /* 0 → 72 */
    clamp(4rem, 2.6862rem + 5.349vw, 7.5rem); /* 64 → 120 */
}

.wb-news .wb-section-header {
  margin-bottom: clamp(1.9375rem, 1.9141rem + 0.096vw, 2rem); /* 31 → 32 */
}

.wb-news .wb-section-header__title {
  font-size: clamp(1.625rem, 1.015rem + 2.483vw, 3.25rem); /* 26 → 52 */
  line-height: 1.37;
}

.wb-news .wb-section-header__lead {
  max-width: 46rem;
  font-size: var(--wb-fs-body);
  line-height: 1.7;
}

.wb-news__grid {
  display: grid;
  gap: 1.625rem; /* 26px between rows on the phone frame */
  grid-template-columns: repeat(auto-fit, minmax(min(100%, 24rem), 1fr));
}

@media (min-width: 64rem) {
  .wb-news .wb-section-header {
    margin-bottom: 1.6875rem; /* 27px */
  }

  /* Two columns even with a single post, so one card keeps its width. */
  .wb-news__grid {
    grid-template-columns: repeat(2, minmax(0, 1fr));
    gap: var(--wb-space-5);
  }

  /* Copy starts 54px down the 344px card rather than centring in it. */
  .wb-news .wb-card--news {
    min-height: 21.5rem; /* 344px */
    box-shadow: 0 18px 40px rgba(16, 53, 75, 0.08);
  }

  .wb-news .wb-card--news .wb-card__body {
    justify-content: flex-start;
    gap: 1.125rem; /* 18px */
    padding-block: 3.375rem 2rem; /* 54px */
  }

  .wb-news .wb-card--news .wb-card__title {
    line-height: 1.21;
  }

  .wb-news .wb-card--news .wb-card__excerpt {
    color: #666;
    letter-spacing: 0.006em;
    line-height: 1.53;
  }
}