@media (max-width: 1100px) {

  /* ---- Navbar → hamburger menu ---- */
  .navbar__toggle {
    display: inline-flex;
    flex-direction: column;
    justify-content: center;
    gap: 5px;
    position: absolute;
    right: 24px;
    top: 50%;
    transform: translateY(-50%);
    width: 44px;
    height: 44px;
    padding: 10px;
    z-index: 25;
  }

  .navbar__toggle span {
    display: block;
    height: 2px;
    width: 100%;
    background: var(--c-text);
    border-radius: 2px;
    transition: transform .25s ease, opacity .2s ease;
  }

  .navbar__toggle[aria-expanded="true"] span:nth-child(1) {
    transform: translateY(7px) rotate(45deg);
  }

  .navbar__toggle[aria-expanded="true"] span:nth-child(2) {
    opacity: 0;
  }

  .navbar__toggle[aria-expanded="true"] span:nth-child(3) {
    transform: translateY(-7px) rotate(-45deg);
  }

  .navbar__menu {
    display: none;
    /* overrides display:contents */
    position: fixed;
    inset: 0;
    z-index: 20;
    flex-direction: column;
    justify-content: center;
    align-items: center;
    gap: 0;
    padding: 100px 24px;
    background: var(--c-white);
  }

  .navbar__menu.is-open {
    display: flex;
  }

  .navbar__links {
    position: static;
    transform: none;
    flex-direction: column;
    align-items: center;
    gap: 32px;
  }

  .navbar__link {
    text-align: center;
  }

  .navbar__link.is-active::after {
    display: none;
  }

  .navbar__indicator {
    display: none;
  }

  .navbar__cta {
    position: static;
    transform: none;
    margin-top: 48px;
  }

  /* ---- Section vertical rhythm ---- */
  .built,
  .design,
  .process,
  .enquire {
    padding-block: 80px;
  }

  .footer {
    padding-block: 80px 40px;
  }

  .footer__top {
    gap: 40px;
  }

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

  /* ---- Hero: flow content; keep full viewport height ---- */
  .hero {
    height: auto;
    min-height: 100vh;
  }

  .hero__container {
    display: flex;
    align-items: flex-start;
  }

  .hero__content {
    width: 100%;
    max-width: 600px;
    padding-block: 80px 96px;
  }

  .hero .h1,
  .hero__body {
    max-width: none;
  }

  .hero__bg {
    -webkit-mask-image: linear-gradient(100deg,
        transparent 0%,
        transparent 14%,
        rgba(0, 0, 0, 0.25) 20%,
        rgba(0, 0, 0, 0.65) 26%,
        #000 34%);
    mask-image: linear-gradient(100deg,
        transparent 0%,
        transparent 14%,
        rgba(0, 0, 0, 0.25) 20%,
        rgba(0, 0, 0, 0.65) 26%,
        #000 34%);
  }

  .hero__glow--1 {
    background: linear-gradient(100deg,
        rgba(238, 222, 204, 0.9) 0%,
        rgba(238, 222, 204, 0.45) 14%,
        rgba(238, 222, 204, 0) 30%);
  }

  .hero__glow--2 {
    background: radial-gradient(50% 35% at 0% 20%,
        rgba(238, 222, 204, 0.75) 0%,
        rgba(238, 222, 204, 0) 65%);
  }

  /* ---- Stack the two-column sections ---- */
  .built__grid,
  .design__grid,
  .enquire__grid {
    flex-direction: column;
  }

  .design__grid {
    align-items: stretch;
  }

  .built__left,
  .built__images,
  .design__media,
  .design__text,
  .enquire__left,
  .enquire__form-card {
    flex-basis: auto;
    width: 100%;
  }

  .built__left {
    padding-top: 0;
    gap: 40px;
    justify-content: flex-start;
  }

  .built__images {
    padding-top: 0;
    height: auto;
  }

  .built__images,
  .design__media,
  .design__slides,
  .enquire__img {
    max-width: 741px;
  }

  .design__media {
    max-width: 875px;
  }

  .enquire__left {
    max-width: none;
  }

  .enquire__img {
    flex: none;
    height: auto;
    aspect-ratio: 999 / 437;
  }

  .built__heading,
  .design__heading,
  .design__body p,
  .process__heading,
  .process__intro {
    max-width: none;
  }

  .enquire__heading {
    white-space: normal;
  }

  /* ---- Process steps: 4 → 2 columns ---- */
  .process__steps {
    grid-template-columns: repeat(2, 1fr);
    gap: 24px;
  }

  /* highlights already wrap (flex: 1 1 240px) → 2 per row */
}

/* ===========================================================
   MOBILE  (≤767px)
   =========================================================== */
@media (max-width: 767px) {

  /* ---- Scale display type down (desktop sizes preserved above) ---- */
  :root {
    --fs-h1: 40px;
    --lh-h1: 48px;
    --fs-h2: 30px;
    --lh-h2: 40px;
    --fs-num: 32px;
    --fs-h3: 20px;
  }

  .built,
  .design,
  .process,
  .enquire {
    padding-block: 56px;
  }

  .footer {
    padding-block: 56px 32px;
  }

  .footer__inner {
    gap: 28px;
  }

  .footer__top {
    gap: 32px;
  }

  /* ---- Footer: stack columns, left-align, tighten gaps ---- */
  .footer__content {
    flex-direction: column;
    justify-content: flex-start;
    align-items: flex-start;
    gap: 28px;
  }

  .footer__brand {
    width: 100%;
    flex-basis: auto;
    gap: 24px;
    align-items: flex-start;
    text-align: left;
  }

  .footer__tagline {
    text-align: left;
  }

  .footer__menu {
    flex-direction: column;
    align-items: flex-start;
    gap: 28px;
    width: 100%;
  }

  .footer__col {
    gap: 20px;
    align-items: flex-start;
    width: 100%;
  }

  .footer__col .h3 {
    text-align: left;
  }

  /* ---- Process heading: left-align on mobile ---- */
  .process__heading-block {
    align-items: flex-start;
    text-align: left;
  }

  .process__heading-block .eyebrow {
    align-self: flex-start;
  }

  /* ---- Hero: left cream strip — 40% width, soft fade, readable copy ---- */
  .hero__bg {
    -webkit-mask-image: linear-gradient(90deg,
        transparent 0%,
        transparent 32%,
        rgba(0, 0, 0, 0.12) 38%,
        rgba(0, 0, 0, 0.35) 44%,
        rgba(0, 0, 0, 0.65) 50%,
        #000 58%);
    mask-image: linear-gradient(90deg,
        transparent 0%,
        transparent 32%,
        rgba(0, 0, 0, 0.12) 38%,
        rgba(0, 0, 0, 0.35) 44%,
        rgba(0, 0, 0, 0.65) 50%,
        #000 58%);
  }

  .hero__glow--1 {
    background: linear-gradient(90deg,
        rgba(238, 222, 204, 0.96) 0%,
        rgba(238, 222, 204, 0.78) 22%,
        rgba(238, 222, 204, 0.5) 34%,
        rgba(238, 222, 204, 0.22) 42%,
        rgba(238, 222, 204, 0) 52%);
  }

  .hero__glow--2 {
    background: radial-gradient(44% 52% at 0% 28%,
        rgba(238, 222, 204, 0.88) 0%,
        rgba(238, 222, 204, 0.45) 38%,
        rgba(238, 222, 204, 0) 78%);
  }

  .hero__content {
    max-width: min(360px, 88vw);
    padding-block: 56px 72px;
  }

  .hero .h1,
  .hero__body {
    text-shadow:
      0 0 18px rgba(238, 222, 204, 0.95),
      0 0 36px rgba(238, 222, 204, 0.65),
      0 1px 2px rgba(255, 255, 255, 0.4);
  }

  /* ---- Built: stack feature rows ---- */
  .built__features-top {
    flex-direction: column;
    gap: 28px;
  }

  .built__features-top>.divider-v {
    display: none;
  }

  .built__feature-item,
  .built__feature-item--2 {
    flex-basis: auto;
    width: 100%;
  }

  .built__features-bottom {
    flex-direction: column;
    align-items: stretch;
    gap: 24px;
  }

  .built__features-bottom .divider-cell {
    display: none;
  }

  .built__feature {
    flex-basis: auto;
    width: 100%;
  }

  /* ---- Process steps: 2 → 1 column ---- */
  .process__steps {
    grid-template-columns: 1fr;
  }

  /* ---- Highlights: 1 per row ---- */
  .highlight {
    flex: 1 1 100%;
  }

  .hero {
    min-height: 560px;
  }

  .enquire__form-card {
    padding: 40px 28px;
  }
}

/* ===========================================================
   SMALL MOBILE  (≤420px) — keep the kitchen grid from getting cramped
   =========================================================== */
@media (max-width: 420px) {
  .built__images {
    display: flex;
    flex-direction: column;
    gap: 20px;
    max-width: none;
  }

  .built__img-col {
    flex-basis: auto;
  }

  .built__img--tall,
  .built__img--short,
  .built__img--sq {
    aspect-ratio: 16 / 10;
  }
}