/* Responsive corrections. Loaded last, after every other sheet, so it can
   answer whatever the scraped CSS and the template sheets set.

   ── the root scale ───────────────────────────────────────────────────────
   The source site sizes everything in rem and drives rem off the viewport:
   2.66667vw below 768, 0.520833vw above it. Each is only right at one width -
   375px and 1920px - and they meet badly:

       375px   1rem 10.0px   body 16.0px    as intended
       767px   1rem 20.4px   body 32.7px    twice the size it should be
       768px   1rem  4.0px   body  6.4px    a third of it, one pixel later
       1366px  1rem  7.1px   body 11.4px    the commonest laptop
       1920px  1rem 10.0px   body 16.0px    as intended

   So the phone scale keeps growing until a 767px tablet is rendering at
   double size, and the desktop scale starts so small that a 1366 laptop shows
   11px body copy. Below, the phone scale is capped where a phone stops, and
   the desktop scale runs from a readable floor at 768 up to the original
   10px at 1920 - which leaves the 1920 reference rendering untouched. */

html {
  font-size: min(2.66667vw, 10px);
}

@media (min-width: 768px) {
  html {
    /* 7.5px at 768 → 10px at 1920, continuous */
    font-size: calc(7.5px + 2.5 * (100vw - 768px) / 1152);
  }
}

@media (min-width: 1920px) {
  html {
    font-size: 10px;
  }
}

/* ── the tablet band ──────────────────────────────────────────────────────
   Everything above kept its layout only because rem was tiny between 768 and
   1200: a 97.6rem column was 390px at 768. Now that the type is readable those
   same columns are wider than the page, so the two-column arrangements built
   for 1920 collapse until there is room for them. */

@media (min-width: 768px) and (max-width: 1199px) {

  /* section heads: caption over statement, both ranged left */
  .properties_hgrid__Pg1rd,
  .ld_hgrid__Ld3,
  .sgn_head__Sg1 {
    grid-template-columns: 1fr;
    gap: 1.6rem;
    margin-bottom: 5rem;
  }

  .properties_title__Ptl9k,
  .ld_title__Ld5 {
    text-align: left;
  }

  .properties_title__Ptl9k h2,
  .ld_title__Ld5 h2 {
    font-size: 5.6rem;
  }

  /* the service rows carry the same 97.6rem column as the section heads */
  .services_item__D_u7g > div {
    grid-template-columns: 4.6rem 1fr;
    gap: 3rem;
  }

  /* the caption/body split used by every property and standalone section */
  .pdp_hgrid__Phg13 {
    grid-template-columns: 1fr;
    gap: 3rem;
  }

  .pdp_spec__Psp17,
  .ld_take-row__Ld38,
  .pg_near-group__Png74 {
    grid-template-columns: 1fr;
    gap: 0.8rem;
  }

  /* numbered rows: keep the numeral, drop the fixed middle column */
  .pg_step__Pstp7 {
    grid-template-columns: 6rem 1fr;
    gap: 0 2.4rem;
  }

  .pg_mstep__Pms55 {
    grid-template-columns: 5rem 18rem 1fr;
    gap: 2.4rem;
  }

  /* picture-beside-text rows: a narrower picture, not a stacked one */
  .pg_jrny-link__Pjk95,
  .pg_post-link__Ppl107 {
    grid-template-columns: 20rem 1fr;
    gap: 3rem;
  }

  .pg_places__Ppc78,
  .pg_figures__Pfs59 {
    grid-template-columns: repeat(2, 1fr);
  }

  .pg_grid__Pgr20 {
    grid-template-columns: repeat(2, 1fr);
  }

  .pg_cards__Pcd29,
  .pdp_videos__Pvd33,
  .pdp_gallery__Pgl30 {
    grid-template-columns: repeat(2, 1fr);
  }

  .pg_stats__Pst3,
  .pdp_facts__Pfc8,
  .ld_numbers-grid__Ld24,
  .ld_pillars__Ld18 {
    grid-template-columns: repeat(2, 1fr);
  }

  .ld_pillar__Ld19 {
    padding: 3rem 0;
  }

  .ld_pillar__Ld19 + .ld_pillar__Ld19 {
    border-top: 1px solid rgba(21, 23, 23, 0.14);
  }

  /* the landowners stepper: the pinned picture needs a column worth pinning */
  .ld_proc__Ld29 {
    grid-template-columns: 1fr;
    gap: 3rem;
  }

  .ld_proc-stage__Ld30 {
    position: relative;
    top: auto;
    aspect-ratio: 16 / 9;
    max-height: none;
  }

  .ld_claim-row__Ld44 {
    grid-template-columns: 1fr;
    gap: 3rem;
  }

  .ld_claim-act__Ld45 {
    margin: 0;
    padding: 0;
  }

  /* the principle deck and the clients showcase */
  .prn_grid__Prn1 {
    grid-template-columns: 1fr;
    gap: 5rem;
  }

  .sgn_slide__Sg4 {
    grid-template-columns: 1fr;
    gap: 3rem;
  }

  .sgn_media__Sg5 {
    max-width: 46rem;
  }

  /* the article measure is set for a wide screen */
  .pg_art__Par108 {
    max-width: none;
  }

  .pg_split__Psp38 {
    grid-template-columns: 1fr;
    gap: 4rem;
  }

  .pg_split-media__Psm39 {
    position: static;
    max-width: 46rem;
  }

  .pg_form__Pfm43 {
    grid-template-columns: 1fr;
    gap: 2.8rem;
  }
}

/* ── the seam at 768 ──────────────────────────────────────────────────────
   Just under the breakpoint the page is still in its one-column phone layout
   but the viewport is tablet-wide, so lines of text run much too long. A
   measure on the reading blocks holds them to something readable. */

@media (min-width: 600px) and (max-width: 767px) {
  .pg_art-body__Pab111,
  .pg_art-stand__Pas110,
  .pg_body__Pbd2 p,
  .pdp_lead__Pld15,
  .ld_claim-note__Ld17,
  .pg_post-text__Ppx28,
  .pg_step-text__Pstx9 {
    max-width: 62ch;
  }
}

/* ── things that must never overflow ──────────────────────────────────────
   A long unbroken address or a wide table is the usual cause of a page that
   scrolls sideways on a phone. */

img,
svg,
video,
iframe {
  max-width: 100%;
}

/* ...except the film, which is oversized on purpose. The YouTube player
   letterboxes whatever box it is given, so it is grown past the box and
   cropped instead - and clamping it back to 100% is what put the black bars
   above and below the picture. */
.whyv_root__Wv1 iframe,
.whyv_root__Wv1 > div {
  max-width: none;
  max-height: none;
}

/* No overflow-x:hidden on body here. It is the usual reflex for a page that
   scrolls sideways, and it would silently kill every position:sticky on the
   site - the landowners stepper, the FAQ column, the split media - because an
   overflow ancestor becomes the sticky element's scroll box. The widths above
   are what stops the overflow; this would only have hidden it. */

.pg_near-list__Pnl76,
.pg_jrny-facts__Pjf89,
.pdp_spec-value__Psv19,
.pg_take-val__Ld40 {
  overflow-wrap: anywhere;
}

/* ── phones ───────────────────────────────────────────────────────────────
   The two-up grids that are fine on a tablet are too tight on a phone. */

@media (max-width: 599px) {
  .pg_places__Ppc78,
  .pg_figures__Pfs59,
  .pg_cards__Pcd29,
  .pdp_videos__Pvd33 {
    grid-template-columns: 1fr;
  }

  .pg_pager__Ppg101 {
    grid-template-columns: 1fr;
  }

  .pg_pager-next__Ppd104 {
    text-align: left;
  }

  /* the hero titles are set for a wide frame */
  .pdp_hero-title__Pht6,
  .ld_hero-title__Ld10 {
    font-size: 3.8rem;
  }

  .pdp_cta-title__Pctt38 {
    font-size: 3rem;
  }
}

/* ── the footer mark, on a phone ──────────────────────────────────────────
   The stock grid runs newsletter, links, logo, copyright, so on a narrow
   screen the big ACE mark lands in the middle of the footer with the legal
   line trailing under it. Swapping the last two areas puts the mark where it
   belongs - at the end, signing off the page. Desktop keeps its own order,
   where the mark spans the full width above a single copyright row. */

@media (max-width: 767px) {
  .footer_content__E2ijt {
    grid-template-areas: "newsletter" "links" "copyright" "logo";
  }

  /* the 8rem gap moves with the block that now follows the links */
  .footer_copyright-container__yt1ht {
    margin-top: 8rem;
  }

  .footer_logo__5ncK8 {
    margin-top: 5rem;
  }
}

/* ── carousel card captions, on a phone ───────────────────────────────────
   The caption is a space-between row of name and address, and the address is
   set white-space:nowrap so it stays on one line beside the name. That works
   at 1920 where the addresses are short relative to the card. On a phone
   "Plot: 001, Road: 508, Sector : 09, Jolshiri Abashon" cannot wrap, so it
   takes the whole row and squeezes the name into a column three characters
   wide - "The Island by ACE" breaking over four lines and running under the
   address. Stacked, and allowed to wrap. */

@media (max-width: 767px) {
  .properties_meta__Pmet8 {
    display: block;
  }

  .properties_name__Pnam4 {
    display: block;
  }

  .properties_place__Ppla6 {
    display: block;
    margin-top: 0.4rem;
    text-align: left;
    white-space: normal;
  }
}