/* Landowners page.

   The reference is the homepage, so this sheet borrows its language rather
   than inventing one: every section opens with a small caption on the left and
   a large right-aligned Lora statement on the right, emphasis is carried by
   .em, and the calls to action are the site's own round buttons. Only the
   blocks the homepage has no equivalent for are drawn here.

   The property pages answer one question - what is this building - so a single
   caption/body split carries them. This page has to argue a case, so the
   blocks under each head change shape: a claim, a dark band of figures, a
   stepper that shows the work, then a plain table and the questions.

   The muted greys are set at 0.6 and above, which is where they start clearing
   4.5:1 on white. Most of the older sheets sit below that. */

:root {
  --ld-ink: #151717;
  --ld-tint: #f1f1f1;
  --ld-rule: rgba(21, 23, 23, 0.14);
  --ld-body: rgba(21, 23, 23, 0.72);
  --ld-mute: rgba(21, 23, 23, 0.6);
  --ld-on-ink: rgba(255, 255, 255, 0.68);
  --ld-ease: cubic-bezier(0.22, 0.61, 0.36, 1);
}

/* ------------------------------------------------------------------ shared */

/* No overflow guard here on purpose: the stepper's picture is sticky, and an
   ancestor that clips overflow becomes its scroll box - one that never
   scrolls, so the picture would simply never stick. Nothing on this page runs
   past the gutter anyway. */
.ld_sec__Ld1 {
  padding: 6rem 0;
  background: #fff;
  color: var(--ld-ink);
}

.ld_sec__Ld1.ld_tint__Ld2 {
  background: var(--ld-tint);
}

/* The homepage section head: caption left, statement right. Same metrics as
   the projects and clients heads so the three read as one family. */

.ld_hgrid__Ld3 {
  display: grid;
  gap: 2.4rem;
  margin: 0 0 4rem;
}

.ld_caption__Ld4 {
  font-weight: 600;
  font-size: 2rem;
  line-height: 140%;
}

.ld_title__Ld5 h2 {
  margin: 0;
  font-family: var(--font-secondary);
  font-weight: 400;
  font-size: 4.4rem;
  line-height: 105%;
  letter-spacing: -0.02em;
}

.ld_title__Ld5 em,
.ld_title__Ld5 .em {
  font-style: italic;
}

/* The row of round buttons that closes a section. The hero keeps the
   property-page treatment, so this is the only place it is needed. */

.ld_actions__Ld12 {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 1.6rem;
  margin: 3.6rem 0 0;
}

/* --------------------------------------------------------------- the offer
   The head carries the statement, so the body under it stays prose: what the
   claim actually means on the left, and the way to start on the right. The
   three things behind it follow as ruled columns - the homepage rules its
   rows too, so they belong to the same page. */

.ld_claim-note__Ld17 {
  margin: 0;
  max-width: 60ch;
  font-family: var(--font-secondary);
  font-weight: 400;
  font-size: 2.4rem;
  line-height: 150%;
  letter-spacing: -0.01em;
  color: var(--ld-ink);
}

.ld_claim-note__Ld17 + .ld_claim-note__Ld17 {
  margin: 2.4rem 0 0;
  font-family: var(--font-primary);
  font-size: 1.7rem;
  line-height: 175%;
  color: var(--ld-body);
}

.ld_claim-act__Ld45 {
  margin: 3.2rem 0 0;
}

.ld_pillars__Ld18 {
  display: grid;
  gap: 0;
  margin: 5rem 0 0;
}

.ld_pillar__Ld19 {
  padding: 3rem 0;
}

.ld_pillar__Ld19 + .ld_pillar__Ld19 {
  border-top: 1px solid var(--ld-rule);
}

.ld_pillar-num__Ld20 {
  display: block;
  font-size: 1.3rem;
  letter-spacing: 0.12em;
  color: var(--ld-mute);
}

.ld_pillar-title__Ld21 {
  margin: 1.6rem 0 0;
  font-size: 2.2rem;
  font-weight: 500;
  line-height: 126%;
  letter-spacing: -0.01em;
}

.ld_pillar-text__Ld22 {
  margin: 1.2rem 0 0;
  font-size: 1.6rem;
  line-height: 170%;
  color: var(--ld-body);
}

/* -------------------------------------------------------------- the figures
   A dark band between two light sections, in the ink the property closing band
   and the footer already use. The page is otherwise all paper, and these are
   the numbers a landowner repeats to someone else. */

.ld_numbers__Ld23 {
  padding: 6rem 0;
  background: var(--ld-ink);
  color: #fff;
}

.ld_numbers__Ld23 .ld_caption__Ld4 {
  color: #fff;
}

.ld_numbers__Ld23 .ld_title__Ld5 h2 {
  color: #fff;
}

.ld_numbers-grid__Ld24 {
  display: grid;
  grid-template-columns: repeat(2, 1fr);
  gap: 4rem 2rem;
}

.ld_number__Ld25 {
  padding: 2.6rem 0 0;
  border-top: 1px solid rgba(255, 255, 255, 0.24);
}

.ld_number-value__Ld26 {
  display: block;
  font-family: var(--font-secondary);
  font-weight: 400;
  font-size: 5.6rem;
  line-height: 96%;
  letter-spacing: -0.03em;
}

.ld_number-unit__Ld27 {
  font-size: 0.4em;
  letter-spacing: 0;
  opacity: 0.72;
}

.ld_number-label__Ld28 {
  display: block;
  margin: 1.4rem 0 0;
  font-size: 1.3rem;
  line-height: 150%;
  color: var(--ld-on-ink);
}

/* ------------------------------------------------------------------ stepper
   The old list put a small grey picture beside every line, six times over. One
   picture that changes as the stages pass reads as a sequence rather than a
   catalogue, and it stops the section repeating the same crop six times.

   Without JavaScript every stage still reads and the first frame stays up. */

.ld_proc__Ld29 {
  display: grid;
  gap: 3rem;
  align-items: start;
}

.ld_proc-stage__Ld30 {
  position: sticky;
  top: 9rem;
  z-index: 1;
  overflow: hidden;
  aspect-ratio: 16 / 10;
  background: #e2e2e2;
}

.ld_proc-frame__Ld31 {
  position: absolute;
  inset: 0;
  opacity: 0;
  transition: opacity 0.7s var(--ld-ease);
}

.ld_proc-frame__Ld31 img {
  display: block;
  width: 100%;
  height: 100%;
  object-fit: cover;
  transform: scale(1.05);
  transition: transform 1.6s var(--ld-ease);
}

/* The first frame is up before the script runs, so the box is never empty. */
.ld_proc-frame__Ld31:first-child,
.ld_proc-frame__Ld31[data-current] {
  opacity: 1;
}

.ld_proc-frame__Ld31[data-current] img {
  transform: scale(1);
}

/* Once the script has taken over, only what it marks is shown. */
.ld_proc-stage__Ld30[data-live] .ld_proc-frame__Ld31:not([data-current]) {
  opacity: 0;
}

.ld_proc-caption__Ld32 {
  position: absolute;
  left: 0;
  right: 0;
  bottom: 0;
  z-index: 2;
  padding: 5rem 2.4rem 1.8rem;
  background: linear-gradient(180deg, rgba(21, 23, 23, 0) 0%, rgba(21, 23, 23, 0.82) 100%);
  color: #fff;
  font-size: 1.3rem;
  letter-spacing: 0.1em;
  text-transform: uppercase;
}

.ld_steps__Ld33 {
  margin: 0;
  padding: 0;
  list-style: none;
  counter-reset: ldstep;
}

.ld_step__Ld34 {
  display: grid;
  grid-template-columns: 5rem 1fr;
  gap: 0 2rem;
  padding: 3rem 0;
}

.ld_step__Ld34 + .ld_step__Ld34 {
  border-top: 1px solid var(--ld-rule);
}

.ld_step__Ld34::before {
  counter-increment: ldstep;
  content: counter(ldstep, decimal-leading-zero);
  grid-row: 1 / span 2;
  font-size: 1.3rem;
  letter-spacing: 0.1em;
  color: var(--ld-mute);
  transition: color 0.45s;
}

.ld_step-title__Ld35 {
  margin: 0;
  font-size: 2.2rem;
  font-weight: 500;
  line-height: 126%;
  letter-spacing: -0.01em;
}

.ld_step-text__Ld36 {
  margin: 1rem 0 0;
  font-size: 1.6rem;
  line-height: 172%;
  color: var(--ld-body);
}

/* The stage being read is the one the picture belongs to. Marking it is a rule
   and a numeral, not a fade - dimming the other five would cost more contrast
   than the cue is worth. */
/* The numeral alone carries it. Marking the rule as well no longer works now
   that the first stage has no rule above it - the cue would appear on five
   stages out of six. */
.ld_step__Ld34[data-current]::before {
  color: var(--ld-ink);
}

/* Pointing at a stage brings its picture up, so the rows have to read as
   pickable. Only where there is a pointer to do the picking - on a phone the
   rows are driven by the scroll and a hand cursor would promise nothing. */
@media (hover: hover) {
  .ld_step__Ld34 {
    cursor: pointer;
  }
}

/* ---------------------------------------------------------------- take-on
   Plain rows. A landowner checking whether their plot qualifies wants to scan
   a table, not read prose. */

.ld_take__Ld37 {
  display: grid;
  gap: 0;
}

.ld_take-row__Ld38 {
  display: grid;
  gap: 0.8rem;
  padding: 2.6rem 0;
}

.ld_take-row__Ld38 + .ld_take-row__Ld38 {
  border-top: 1px solid var(--ld-rule);
}

.ld_take-key__Ld39 {
  margin: 0;
  font-size: 1.3rem;
  letter-spacing: 0.1em;
  text-transform: uppercase;
  color: var(--ld-mute);
}

.ld_take-val__Ld40 {
  margin: 0;
  font-size: 1.9rem;
  font-weight: 500;
  line-height: 152%;
}

.ld_take-note__Ld41 {
  margin: 0.6rem 0 0;
  font-size: 1.5rem;
  line-height: 165%;
  color: var(--ld-body);
}

/* ------------------------------------------------------------------- faq */

.ld_faq__Ld42 {
  border-top: 1px solid var(--ld-rule);
}

.ld_faq__Ld42 details {
  border-bottom: 1px solid var(--ld-rule);
}

.ld_faq__Ld42 summary {
  display: flex;
  align-items: baseline;
  justify-content: space-between;
  gap: 2rem;
  padding: 2.8rem 0;
  font-size: 1.9rem;
  font-weight: 500;
  line-height: 145%;
  cursor: pointer;
  list-style: none;
}

.ld_faq__Ld42 summary::-webkit-details-marker {
  display: none;
}

/* A drawn cross rather than a glyph: at this weight a typed + sits off the
   optical centre of the row. */
.ld_faq__Ld42 summary::after {
  content: '';
  flex: none;
  position: relative;
  top: -0.2rem;
  width: 1.4rem;
  height: 1.4rem;
  background:
    linear-gradient(var(--ld-ink), var(--ld-ink)) center / 100% 1px no-repeat,
    linear-gradient(var(--ld-ink), var(--ld-ink)) center / 1px 100% no-repeat;
  transition: transform 0.35s var(--ld-ease);
}

.ld_faq__Ld42 details[open] summary::after {
  transform: rotate(135deg);
}

.ld_faq__Ld42 summary:focus-visible {
  outline: 2px solid var(--ld-ink);
  outline-offset: 4px;
}

.ld_faq-body__Ld43 {
  margin: 0 0 2.8rem;
  max-width: 66ch;
  font-size: 1.6rem;
  line-height: 178%;
  color: var(--ld-body);
}

/* ------------------------------------------------------------------ desktop */

@media (min-width: 768px) {
  .ld_sec__Ld1 {
    padding: 15rem 0;
  }

  .ld_hgrid__Ld3 {
    grid-template-columns: auto 97.6rem;
    gap: 0;
    margin: 0 0 8rem;
  }

  .ld_title__Ld5 {
    text-align: right;
  }

  .ld_title__Ld5 h2 {
    font-size: 7.2rem;
    letter-spacing: -0.03em;
  }

  .ld_claim-row__Ld44 {
    display: grid;
    grid-template-columns: 1fr auto;
    gap: 10rem;
    align-items: end;
  }

  .ld_claim-note__Ld17 {
    font-size: 3.2rem;
  }

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

  .ld_pillars__Ld18 {
    grid-template-columns: repeat(3, 1fr);
    gap: 0 4rem;
    margin: 9rem 0 0;
  }

  .ld_pillar__Ld19 {
    padding: 3.2rem 0 0;
  }

  .ld_pillar__Ld19:last-child {
    border-bottom: 0;
  }

  .ld_numbers__Ld23 {
    padding: 12rem 0;
  }

  .ld_numbers-grid__Ld24 {
    grid-template-columns: repeat(4, 1fr);
    gap: 4rem;
  }

  .ld_number-value__Ld26 {
    font-size: 8.8rem;
  }

  .ld_proc__Ld29 {
    grid-template-columns: 1fr 1fr;
    gap: 8rem;
  }

  /* A pinned frame taller than the screen is not pinned - it scrolls off the
     top before the last stages are read. The portrait crop is what we want at
     this width, so the height is capped to the screen and the picture takes
     the crop rather than the box growing past it. */
  .ld_proc-stage__Ld30 {
    top: 14rem;
    aspect-ratio: 4 / 5;
    max-height: calc(100vh - 20rem);
  }

  .ld_step__Ld34 {
    grid-template-columns: 6rem 1fr;
    gap: 0 3rem;
    padding: 3.6rem 0;
  }

  .ld_take-row__Ld38 {
    grid-template-columns: 26rem 1fr;
    gap: 4rem;
    align-items: baseline;
    padding: 3.2rem 0;
  }

  .ld_take-val__Ld40 {
    font-size: 2.2rem;
  }

  .ld_faq__Ld42 summary {
    font-size: 2.2rem;
  }
}

/* -------------------------------------------------------------------- hover */

@media (hover: hover) {
  .ld_faq__Ld42 summary:hover {
    color: var(--ld-ink);
  }
}

@media (prefers-reduced-motion: reduce) {
  .ld_proc-frame__Ld31,
  .ld_proc-frame__Ld31 img,
  .ld_step__Ld34::before,
  .ld_faq__Ld42 summary::after {
    transition: none;
  }

  .ld_proc-frame__Ld31 img {
    transform: none;
  }
}