/* Shared display type: composed, legible, and intentionally uncompressed. */
html {
  font-kerning: normal;
}

:is(
  .about-title,
  .residence-heading h2,
  .services-intro h2,
  .service-link-title,
  .gallery-heading h2,
  .hero-copy h1,
  .origin-heading h2,
  .mission-copy h2,
  .values-intro h2,
  .difference-copy h2,
  .merkama-copy h2,
  .residency-copy h2,
  .intro-heading h2,
  .inside-heading h2,
  .enquiry-copy h2,
  .service-section-heading h2,
  .difference-heading h2,
  .merkama-heading h2,
  .gallery-intro-copy h2,
  .archive-heading h2,
  .gallery-viewing h2,
  .response-section header h2,
  .contact-routes h2,
  .enquiry-intro h2,
  .contact-desk h2,
  .location-copy h2,
  .booking-copy h1,
  .assurance h2,
  .residence-introduction h2,
  .photo-heading h2,
  .specification-intro h2,
  .tour-heading h2,
  .material-copy h2,
  .similar-residences h2,
  .viewing-copy h2,
  .hero h1,
  .collection h2
) {
  font-weight: 400;
  letter-spacing: -0.015em;
}

:is(
  .services-detail-title,
  .service-title,
  .similar-card strong,
  .route-card h3,
  .value-card h3,
  .amenity-card h3
) {
  font-weight: 500;
  letter-spacing: -0.01em;
}

:is(
  .hero-ghost,
  .hero-word,
  .interlude-word,
  .intro-word,
  .mission-watermark,
  .merkama-word,
  .response-word,
  .difference-word,
  .process-word,
  .enquiry-ghost
) {
  letter-spacing: -0.04em;
  -webkit-text-fill-color: currentColor;
  -webkit-text-stroke: 0;
}

:is(
  .menu-toggle,
  .about-menu-toggle,
  .services-menu-toggle,
  .gallery-menu-toggle,
  .contact-menu-toggle,
  .booking-menu-toggle,
  .residence-menu-toggle,
  .faq-menu-toggle
) {
  min-width: 44px;
  min-height: 44px;
}

/* Compact inner-page rhythm: shorter sections, retained hierarchy. */
@media (min-width: 641px) {
  :is(.origin-section, .values-section, .difference-section, .residency-section) {
    padding-block: clamp(80px, 7vw, 112px);
  }

  .origin-section { min-height: 900px; padding-block: 72px; }
  .origin-image-main { height: min(36vw, 460px); margin-top: 56px; }
  .origin-image-detail { height: min(25vw, 320px); margin-top: 120px; }

  .values-section {
    min-height: 0;
    gap: clamp(48px, 5vw, 64px);
  }

  .value-card {
    min-height: 260px;
    padding-block: 36px 34px;
  }

  .value-card > .value-number { grid-column: 1; }
  .value-card > div { grid-column: 2; width: 100%; min-width: 0; }

  .difference-section { min-height: 700px; }
  .difference-media { min-height: 560px; }
  .difference-copy { padding-block: 56px; }

  .merkama-section { min-height: 740px; }

  .merkama-copy { padding: 96px 0 52px; }

  .residency-section { min-height: 780px; }
  .residency-image { height: min(44vw, 600px); }

  .services-intro {
    min-height: 640px;
    padding-block: 100px;
  }

  .difference-strip {
    min-height: 620px;
    gap: clamp(48px, 5vw, 64px);
    padding-block: 96px;
  }

  .difference-body { padding-top: 0; }

  .merkama-feature { padding: 64px var(--page-pad) 72px; }
  .merkama-heading { padding-block: 40px 28px; }
  .merkama-visual { height: min(35vw, 480px); }
  .merkama-intro { padding-block: 44px 48px; }

  .merkama-services article {
    min-height: 250px;
    padding: 30px 24px;
  }

  .merkama-services article > p { margin-bottom: 32px; }
  .merkama-access { padding-top: 32px; }
  .amenity-card-service, .amenity-card-coffee { min-height: 500px; }
  .inside-building { padding-block: 64px 72px; }
  .service-enquiry { min-height: 0; padding-block: 96px; }

  .gallery-hero {
    min-height: 900px;
    padding-top: 140px;
  }

  .hero-collage { height: 640px; }
  .hero-frame-wide { height: 380px; }
  .hero-frame-tall { height: 460px; }
  .hero-frame-detail { height: 240px; }

  .gallery-intro {
    min-height: 0;
    padding-block: 80px;
  }

  .gallery-archive { padding-block: 100px 76px; }
  .archive-heading { margin-bottom: 56px; }
  .gallery-filters { margin-bottom: 32px; }

  .gallery-interlude {
    min-height: 0;
    gap: clamp(48px, 5vw, 64px);
    padding-block: 80px;
  }

  .gallery-viewing {
    min-height: 620px;
    padding-block: 88px;
  }

  .contact-routes { padding-block: 100px; }
  .route-card { min-height: 280px; }
  .enquiry-section { min-height: 0; }
  .enquiry-intro { padding-block: 96px 72px; }
  .enquiry-panel { min-height: 0; margin-block: 48px; }
  .contact-desk { padding-block: 100px; }
  .contact-desk > header { margin-bottom: 64px; }
  .desk-grid article { min-height: 220px; }
  .desk-grid article > p { margin-top: 50px; }
  .location-section, .location-map { min-height: 580px; }
  .response-section { padding-block: 100px; }
  .response-section > header { margin-bottom: 56px; }
  .response-steps article { min-height: 220px; }

  .request-section { padding-block: 100px 88px; }
  .apartment-card { grid-template-rows: 440px auto; }
  .process-section {
    min-height: 0;
    padding-block: 88px;
  }
  .process-grid { margin-top: 56px; }
  .process-grid article { min-height: 225px; }
  .booking-assurance {
    min-height: 740px;
    padding-block: 80px;
    gap: clamp(48px, 5vw, 64px);
  }
  .booking-assurance > figure { height: 520px; }

  .residence-hero { min-height: 0; }
  .residence-introduction {
    min-height: 620px;
    gap: clamp(48px, 5vw, 64px);
    padding-block: 88px;
  }
  .photo-stage { height: min(54vw, 640px); }
  .photo-viewer { --stage-h: min(54vw, 640px); }
  .three-d-tour { padding-block: 96px; }
  .tour-shell { height: min(54vw, 660px); }
  .material-story { min-height: 760px; padding-block: 72px; }
  .material-grid { height: 640px; }
  .similar-residences { padding-block: 100px 88px; }
  .similar-residences > header { margin-bottom: 56px; }
  .similar-card figure { height: min(35vw, 520px); }
  .viewing-section {
    min-height: 720px;
    gap: clamp(48px, 5vw, 64px);
    padding-block: 88px;
  }

  #residences > .hero { min-height: 520px; }
  #residences > .collection { padding-block: 72px 80px; }
  #residences > .assurance { padding-block: 72px 80px; }

  .faq-content {
    gap: clamp(64px, 7vw, 96px);
    padding-block: 100px 112px;
  }

  .faq-cta { padding-block: 96px 112px; }

  .faq-hero { min-height: 0; }
}

@media (max-width: 640px) {
  .origin-section { padding: 56px 20px 64px; }
  .origin-story { padding-top: 40px; }
  .origin-image-main { height: 62vw; margin-top: 36px; }
  .origin-image-detail { height: 45vw; }

  .values-section { gap: 44px; padding: 72px 20px; }
  .value-card { min-height: 220px; padding-block: 30px; }
  .value-card > .value-number { grid-column: 1; }
  .value-card > div { grid-column: 2; width: 100%; min-width: 0; }
  .difference-media { min-height: 360px; }
  .difference-copy { padding: 56px 20px 64px; }
  .merkama-section { min-height: 0; }
  .merkama-copy { padding: 245px 20px 48px; }
  .residency-section { min-height: 0; padding: 72px 20px 84px; }
  .residency-image { height: 100vw; }

  .services-intro { min-height: 0; padding: 72px 20px 82px; }
  .difference-strip { min-height: 0; padding: 72px 20px 82px; }
  .merkama-feature { padding: 64px 20px 80px; }
  .merkama-heading { padding-block: 44px 30px; }
  .merkama-visual { height: 88vw; max-height: 400px; }
  .merkama-services article { min-height: 220px; padding: 28px 20px; }
  .merkama-services article > p { margin-bottom: 40px; }
  .amenity-card > div:last-child { min-height: 340px; padding: 32px 24px; }
  .amenity-card-service { min-height: 320px; }
  .amenity-card-coffee { min-height: 0; }
  .inside-building { padding: 72px 20px 80px; }
  .service-enquiry { min-height: 0; padding: 80px 20px; }

  .gallery-hero { min-height: 760px; padding-top: 100px; }
  .gallery-intro { min-height: 0; padding: 68px 20px 56px; gap: 42px; }
  .gallery-archive { padding: 72px 20px 64px; }
  .archive-heading { margin-bottom: 42px; }
  .gallery-interlude { min-height: 0; padding: 68px 20px 56px; gap: 40px; }
  .gallery-viewing { min-height: 600px; padding: 72px 20px 56px; }

  .contact-routes { padding-block: 72px; }
  .route-card { min-height: 240px; }
  .enquiry-intro { padding-block: 72px 58px; }
  .enquiry-panel { min-height: 0; margin-block: 36px; }
  .contact-desk { padding-block: 72px; }
  .desk-grid article { min-height: 200px; }
  .location-section, .location-map { min-height: 560px; }
  .response-section { padding-block: 72px; }
  .response-steps article { min-height: 200px; }

  .request-section { padding-block: 72px 64px; }
  .apartment-card { grid-template-rows: 440px auto; }
  .process-section { min-height: 0; padding-block: 72px 64px; }
  .process-grid { margin-top: 48px; }
  .process-grid article { min-height: 190px; }
  .booking-assurance { gap: 44px; padding-block: 72px; }
  .booking-assurance > figure { height: 460px; }

  .residence-hero { min-height: 0; }
  .residence-introduction { min-height: 580px; padding: 72px 20px 60px; }
  .photo-stage { height: 92vw; max-height: 480px; }
  .photo-viewer { --stage-h: min(92vw, 480px); }
  .three-d-tour { padding-block: 72px 64px; }
  .tour-shell { height: 100vw; min-height: 460px; }
  .material-story { min-height: 650px; padding-block: 56px; }
  .material-grid { height: 550px; }
  .similar-residences { padding-block: 72px 64px; }
  .similar-residences > header { margin-bottom: 42px; }
  .similar-card figure { height: 100vw; max-height: 480px; }
  .viewing-section { min-height: 0; padding-block: 72px; }

  #residences > .hero { min-height: 500px; }
  #residences > .collection { padding-block: 64px 72px; }
  #residences > .assurance { padding-block: 64px 72px; }

  .faq-content { gap: 48px; padding-block: 72px 84px; }
  .faq-cta { padding-block: 72px 84px; }
  .faq-hero { min-height: 0; }
}

/* Widen prose tracks so descriptive copy reads as copy, not narrow captions. */
@media (min-width: 641px) {
  .mission-copy {
    grid-template-columns: minmax(0, 1.1fr) minmax(460px, 0.9fr);
    gap: 6vw;
  }

  .mission-copy > p { max-width: 620px; }
  .values-intro > p:last-child { max-width: 500px; }

  .merkama-intro {
    grid-template-columns: minmax(0, 1.45fr) minmax(440px, 0.95fr);
    gap: 5vw;
    padding-inline: 3.5vw;
  }

  .merkama-services article { padding-inline: 30px; }
  .merkama-services article > span { max-width: 430px; }

  .gallery-interlude {
    grid-template-columns: minmax(0, 1.6fr) minmax(400px, 0.9fr);
    gap: 5vw;
  }

  .gallery-interlude > p:last-child {
    width: min(460px, 100%);
    margin-left: auto;
  }

  .process-grid p { width: 100%; max-width: 380px; }
  .booking-assurance aside p { width: min(320px, 100%); }

  .contact-routes > header {
    grid-template-columns: 0.95fr 1.3fr 0.95fr;
    gap: 4vw;
  }

  .contact-routes > header > p:last-child { max-width: 400px; }
  .enquiry-intro > p:not(.section-kicker) { max-width: 510px; }
  .location-copy > p:not(.section-kicker), .location-note { max-width: 520px; }
  .location-note p { max-width: 480px; }
  .response-steps p { max-width: 350px; margin-left: 0; }

  .introduction-copy > p { max-width: 500px; }
  .photo-heading > p { width: min(480px, 100%); margin-left: 0; }
  .specification-note p { max-width: 340px; }
  .specification-intro > p { width: min(400px, 100%); }

  .faq-hero-copy > p:last-child { max-width: 500px; }
  .faq-cta > div > p:not(.section-kicker) { max-width: 520px; }
}

@media (max-width: 640px) {
  .mission-copy > p,
  .values-intro > p:last-child,
  .merkama-intro > p,
  .merkama-services article > span,
  .gallery-interlude > p:last-child,
  .process-grid p,
  .booking-assurance aside p,
  .contact-routes > header > p:last-child,
  .enquiry-intro > p:not(.section-kicker),
  .location-copy > p:not(.section-kicker),
  .location-note,
  .location-note p,
  .response-steps p,
  .introduction-copy > p,
  .photo-heading > p,
  .specification-note p,
  .specification-intro > p,
  .faq-hero-copy > p:last-child,
  .faq-cta > div > p:not(.section-kicker) {
    width: 100%;
    max-width: none;
    margin-left: 0;
  }

  .merkama-intro { grid-template-columns: 1fr; padding-inline: 20px; }
  .gallery-interlude { grid-template-columns: 1fr; }
  .response-steps p { margin-left: 0; }
}

@media (min-width: 641px) {
  .response-steps {
    grid-template-columns: repeat(3, minmax(0, 1fr));
    margin-left: 0;
  }

  .booking-assurance {
    grid-template-columns: minmax(330px, 0.72fr) minmax(470px, 1.05fr) minmax(300px, 0.6fr);
    gap: 5vw;
  }

  .booking-assurance aside { padding-inline: 16px; }
  .booking-assurance aside p { width: 100%; }

  .location-section {
    grid-template-columns: 1.12fr 0.88fr;
  }

  .residence-introduction {
    grid-template-columns: minmax(0, 1.3fr) minmax(460px, 0.8fr);
    gap: 6vw;
  }

  .photo-heading {
    grid-template-columns: minmax(0, 1.3fr) minmax(420px, 0.7fr);
    gap: 6vw;
  }

  .residence-specifications {
    grid-template-columns: minmax(300px, 0.7fr) minmax(460px, 1.2fr) minmax(300px, 0.6fr);
    gap: 4vw;
  }
}

@media (max-width: 640px) {
  .booking-assurance { grid-template-columns: 1fr; }
  .booking-assurance aside { width: 100%; padding: 20px; }
  .introduction-copy { width: 100%; margin-left: 0; }
}

@media (min-width: 1000px) {
  .amenity-card-coffee {
    grid-template-columns: minmax(0, 1fr) minmax(390px, 0.85fr);
  }

  .amenity-card-coffee > div:last-child,
  .amenity-card-service > div:last-child {
    padding-inline: 24px;
  }

  .merkama-services article { padding-inline: 24px; }

  .booking-assurance {
    grid-template-columns: minmax(330px, 0.72fr) minmax(470px, 1.05fr) minmax(320px, 0.6fr);
  }

  .booking-assurance aside { padding-inline: 12px; }

  .residence-specifications {
    grid-template-columns: minmax(300px, 0.7fr) minmax(460px, 1.2fr) minmax(360px, 0.7fr);
  }
}

html,
body { overflow-x: hidden; }

@media (min-width: 641px) and (max-width: 1024px) {
  .booking-assurance {
    grid-template-columns: 1fr;
    gap: 40px;
  }

  .booking-assurance aside {
    width: min(100%, 520px);
    grid-column: auto;
  }

  .residence-introduction,
  .photo-heading,
  .residence-specifications {
    grid-template-columns: 1fr;
    gap: 40px;
  }

  .introduction-copy,
  .specification-intro,
  .specification-note { width: min(100%, 640px); }
}

@media (min-width: 1025px) and (max-width: 1300px) {
  .booking-assurance {
    grid-template-columns: minmax(280px, 0.7fr) minmax(420px, 1fr) minmax(260px, 0.55fr);
    gap: 3vw;
  }

  .residence-specifications {
    grid-template-columns: minmax(260px, 0.7fr) minmax(420px, 1.2fr) minmax(320px, 0.7fr);
    gap: 3vw;
  }
}