/* ==========================================================================
   DP WORLD · LG200 — Build-to-Suit
   Sections, in document order:
     1. Hero                        .page-hero (shared, theme.css)
     2. Prime D&B logistics plots   .bts-plots
     3. Available opportunities     .bts-opportunities   (light)
     4. Development advantages      .bts-advantages
     5. Outstanding optionality     .bts-optionality     (light)

   Sections 3 and 5 run on light artwork, so they set their own ink colour —
   the site's default type colour is white.
   ========================================================================== */

:root {
  --bts-ink:      #1F174F;   /* indigo type on the light sections */
  --bts-ink-soft: #3B3B4F;   /* body copy on the light sections */
  --bts-rule:     #000;
}

/* Hero type runs to the same scale as Available Space. This headline is the
   longest on the site, so it needs a wider measure to fold to three lines:
   below 52rem it breaks to four, and below 56rem the third line starts by
   splitting "fast-tracked" across the break. */
.page-hero--build-to-suit {
  --hero-title-size: clamp(1.9rem, 5.885vw, 67px);
  --hero-title-measure: 56rem;
}

/* ==========================================================================
   2 · Prime D&B logistics plots — the aerial carries the proposition: the copy
       sits on the photo's own sky behind a scrim, as the home aerial does. The
       section gradient still backs the plate, so narrow widths can unstack.
   ========================================================================== */
.bts-plots {
  position: relative;
  background: linear-gradient(180deg, var(--c-indigo-700) 0%, var(--c-blue-600) 62%, var(--c-blue-400) 100%);
}

/* Sits over the sky. The scrim darkens the top of the photo back toward the
   brand indigo so the copy reads without a solid band behind it — the same
   treatment as the home aerial. */
.bts-plots__intro {
  position: absolute;
  top: 0; left: 0; right: 0;
  z-index: 1;
  text-align: center;
  padding: clamp(1.25rem, 3.1vw, 3.5rem) var(--gutter) clamp(1.5rem, 3vw, 3rem);
  max-width: none;
}
.bts-plots__intro::before {
  content: "";
  position: absolute;
  inset: 0;
  z-index: -1;
  background: linear-gradient(180deg, rgba(33, 24, 83, 0.86) 0%, rgba(33, 24, 83, 0.55) 45%, rgba(33, 24, 83, 0) 100%);
  pointer-events: none;
}
/* Sized so the proposition holds one line at the design width, with the size
   range beneath it as the second line of the same heading. */
.bts-plots__title {
  font-family: var(--font-heading);
  font-weight: 400;
  font-size: clamp(1.2rem, 2.08vw, 1.9rem);
  line-height: 1.2;
  letter-spacing: 0.005em;
  text-transform: uppercase;
  margin: 0;
}
/* The size range is the second line of the same heading, not a subheading. */
.bts-plots__range { display: block; }
.bts-plots__copy {
  font-weight: 300;
  font-size: clamp(0.95rem, 1.3vw, 1.1875rem);
  line-height: 1.26;
  margin: clamp(1.25rem, 2.4vw, 2.1rem) auto 0;
  max-width: 44rem;
  opacity: 0.95;
}

/* ---- Aerial plate ---- */
/* The full frame is used, sky included — the copy sits on it, so nothing is
   cropped. The image itself sets the plate's height. */
.bts-plots__plate {
  position: relative;
  overflow: hidden;
}
.bts-plots__media img {
  display: block;
  width: 100%;
  height: auto;
}

/* ==========================================================================
   3 · Currently available opportunities — the plot schedule beside the site
       photograph, on light.
   ========================================================================== */
.bts-opportunities {
  color: var(--bts-ink);
  background: linear-gradient(180deg, #E5E5E5 0%, #93BDEA 100%);
  padding-block: clamp(2.5rem, 5.2vw, 4.6rem) clamp(2.75rem, 6vw, 5.25rem);
}
.bts-opportunities__inner {
  display: grid;
  grid-template-columns: minmax(0, 1fr) minmax(0, 1fr);
  align-items: center;
  gap: clamp(2rem, 5vw, 4.5rem);
}
.bts-opportunities__title {
  color: var(--bts-ink);
  max-width: 12em;
  margin-bottom: clamp(1.5rem, 3.2vw, 2.75rem);
}

/* ---- Plot schedule ---- */
.plot-list {
  margin: 0;
  padding: 0;
  list-style: none;
  max-width: 32rem;
}
.plot-list__row {
  display: grid;
  grid-template-columns: auto minmax(0, 7rem) minmax(0, 1fr);
  align-items: center;
  gap: clamp(1rem, 2.4vw, 2.25rem);
  padding-block: clamp(0.6rem, 1.1vw, 0.9rem);
  border-bottom: 1px solid var(--bts-rule);
}
/* Separators sit between the rows only — nothing above the first or below the
   last, so the schedule reads as a list rather than a boxed table. */
.plot-list__row:last-child { border-bottom: 0; }
/* The number is the marker number on the aerial above. */
.plot-list__num {
  display: grid;
  place-items: center;
  width: 1.65em;
  height: 1.65em;
  border-radius: 50%;
  background: var(--c-green);
  color: var(--bts-ink);
  font-weight: 600;
  font-size: 0.9375rem;
  line-height: 1;
  font-variant-numeric: tabular-nums;
}
.plot-list__name {
  font-weight: 600;
  font-size: clamp(0.95rem, 1.25vw, 1.125rem);
}
.plot-list__size {
  font-weight: 300;
  font-size: clamp(0.95rem, 1.25vw, 1.125rem);
}

.bts-opportunities__media img {
  width: 100%;
  height: auto;
  border-radius: 12px;
}

/* ==========================================================================
   4 · Development advantages — the four supplied disc files on the brand
       gradient, laid back to back across the row.
   ========================================================================== */
.bts-advantages {
  /* Held in one place so the veil below is provably the same ramp. */
  --bts-adv-gradient: linear-gradient(90deg, var(--c-indigo-800) 0%, var(--c-purple-500) 100%);
  --bts-adv-veil: 0.5;
  position: relative;
  background: var(--bts-adv-gradient);
  padding-block: clamp(2.75rem, 5.5vw, 4.75rem) clamp(3rem, 6.4vw, 5.5rem);
}
/* The discs are knocked back by laying the section's own gradient back over
   them, not by fading the artwork: the files overlap, so semi-transparent
   shapes would double up wherever a sweep crosses a neighbour and every seam
   would show. One flat veil over the whole row fades them evenly, and the
   labels and copy sit above it. */
.bts-advantages::after {
  content: "";
  position: absolute;
  inset: 0;
  z-index: 1;
  background: var(--bts-adv-gradient);
  opacity: var(--bts-adv-veil);
  pointer-events: none;
}
.advantage-row {
  display: grid;
  grid-template-columns: repeat(4, minmax(0, 1fr));
  margin: 0;
  padding: 0;
  list-style: none;
}
.advantage {
  display: grid;
  justify-items: center;
  text-align: center;
}
/* The disc is the supplied artwork, one file per position, laid edge to edge:
   the spacing between neighbours and the sweeping arc are both baked into the
   301 x 287.7 viewBox, so the row is built simply by letting each file fill
   its column with no gap between them. */
/* It is the outer sweep that connects, not the solid ring. That sweep spans
   the full width of the 301-unit viewBox, so a disc filling its column meets
   its neighbour exactly on the column boundary; the solid rings stay clear of
   one another, as drawn. The extra 0.68% is deliberate — it laps the sweeps by
   a hair so sub-pixel rounding can never open a gap between them at any
   viewport width. */
.advantage__disc {
  position: relative;
  width: 100.68%;
  min-width: 0;
  aspect-ratio: 301 / 287.7;
}
/* Sits under the veil (z-index 1 on .bts-advantages::after). */
.advantage__ring {
  position: absolute;
  inset: 0;
  z-index: 0;
  width: 100%;
  height: 100%;
}
.advantage__title {
  /* Centred on the circle, which sits slightly high in the odd files and
     slightly low in the even ones (137 and 150.8 of 287.7). */
  position: absolute;
  left: 50%;
  top: 47.62%;
  z-index: 2;                        /* over the veil */
  transform: translate(-50%, -50%);
  width: 64%;
  font-family: var(--font-heading);
  font-weight: 700;
  font-size: clamp(0.75rem, 1.02vw, 0.95rem);
  line-height: 1.28;
  letter-spacing: 0.01em;
  text-transform: uppercase;
  margin: 0;
}
/* Even-numbered artwork drops the circle by the same amount it rises in the
   odd files, so the label follows it. */
.advantage:nth-child(even) .advantage__title { top: 52.42%; }

.advantage__copy {
  position: relative;
  z-index: 2;                        /* over the veil */
  font-weight: 300;
  font-size: clamp(0.85rem, 1.1vw, 1rem);
  line-height: 1.32;
  margin: clamp(1.25rem, 2.4vw, 2.1rem) 0 0;
  max-width: 20ch;
}

/* ==========================================================================
   5 · Outstanding optionality — four specification cards on light.
   ========================================================================== */
.bts-optionality {
  color: var(--bts-ink);
  background: #EDEEF0;
  padding-block: clamp(2.5rem, 5.2vw, 4.6rem) clamp(3rem, 6.4vw, 5.5rem);
}
.bts-optionality__title {
  color: var(--bts-ink);
  margin-bottom: clamp(2rem, 4.4vw, 3.75rem);
}

.optionality-grid {
  display: grid;
  grid-template-columns: repeat(4, minmax(0, 1fr));
  gap: clamp(1.25rem, 2.6vw, 2.75rem);
}
.option-card__media {
  aspect-ratio: 298 / 180;
  border-radius: 10px;
  overflow: hidden;
}
.option-card__media img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  transition: transform 0.5s ease;
}
.option-card:hover .option-card__media img { transform: scale(1.05); }

.option-card__title {
  font-family: var(--font-heading);
  font-weight: 700;
  font-size: clamp(0.95rem, 1.32vw, 1.2rem);
  line-height: 1.22;
  letter-spacing: 0.005em;
  text-transform: uppercase;
  margin: clamp(1.1rem, 2.2vw, 1.85rem) 0 clamp(0.75rem, 1.5vw, 1.15rem);
  /* Mint rule between the image and the heading, fading out to the right.
     border-image needs a slice to paint; the other three edges stay at zero
     width so only the top rule is drawn. */
  padding-top: clamp(0.85rem, 1.7vw, 1.4rem);
  border-top: 1px solid;
  border-image-source: linear-gradient(90deg, #00E68C 61.06%, rgba(0, 230, 140, 0) 100%);
  border-image-slice: 1;
}
.option-card__copy {
  color: var(--bts-ink-soft);
  font-weight: 300;
  font-size: clamp(0.9rem, 1.15vw, 1.0625rem);
  line-height: 1.36;
  margin: 0;
}

/* ==========================================================================
   Responsive
   ========================================================================== */
@media (max-width: 1100px) {
  .bts-opportunities__inner { grid-template-columns: 1fr; }

  .bts-opportunities__title { max-width: none; }
  .plot-list { max-width: none; }

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

@media (max-width: 900px) {
  /* Two discs to a row — four no longer fit without the type shrinking past
     its floor. They still sit edge to edge horizontally. */
  .advantage-row { grid-template-columns: repeat(2, minmax(0, 1fr)); row-gap: clamp(2rem, 5vw, 3rem); }

  /* Below this width the copy covers too much of the estate to leave the aerial
     readable, so the plate unstacks: the proposition lifts back above the photo
     and the section gradient carries through both. (The home aerial does the
     same at 1280px, where its twenty-row index runs out of room sooner.) */
  .bts-plots__plate {
    display: flex;
    flex-direction: column;
  }
  .bts-plots__intro {
    position: static;
    order: -1;
    padding: clamp(2rem, 4.2vw, 3.75rem) var(--gutter) clamp(1.5rem, 3.2vw, 2.75rem);
    max-width: 68rem;
    margin-inline: auto;
  }
  .bts-plots__intro::before { display: none; }
}

@media (max-width: 560px) {
  /* One to a row — nothing left to sit against, so it is capped and centred. */
  .advantage-row { grid-template-columns: 1fr; justify-items: center; }
  .advantage__disc { max-width: 19rem; }
  .advantage__copy { max-width: 28ch; }

  .optionality-grid { grid-template-columns: 1fr; gap: 2.25rem; }
  .option-card__media { aspect-ratio: 16 / 9; }
  /* Single column — let the titles wrap naturally rather than at the design
     break. The source keeps a space before each <br> so the words stay apart. */
  .option-card__title br { display: none; }

  .plot-list__row { grid-template-columns: auto minmax(0, 6rem) minmax(0, 1fr); gap: 0.9rem; }
}