/* ============================================================
   SQUIRE FURNISHINGS — LANDING PAGES (landing.php)
   ------------------------------------------------------------
   A landing page is the homepage's own parts (style.css) with the shop pages'
   form (shops.css). This file is only what is a landing page's alone: the
   range cards as buttons to the enquiry form, the drawing beside its three
   facts, and the choices at the top of the form.
   ============================================================ */
.ld .hero { background-position: 50% 42%; }

/* ---- the ranges: each card carries its own two hairlines, as on the shop pages ---- */
.ld-ranges .sq-pieces { gap: 0; background: transparent; border-bottom: 0; }
.ld-ranges .sq-piece { border-right: 1px solid rgba(var(--shade), .10); border-bottom: 1px solid rgba(var(--shade), .10); }
.ld-ranges .sq-piece-name { margin-top: 0; }
.ld-ranges .sq-cat { margin-top: 8px; }
.ld-ranges .sq-shot.is-whole { background: #fff; }
.ld-ranges .sq-shot.is-whole img { object-fit: contain; padding: 8%; }
.ld-ranges.is-square .sq-shot { aspect-ratio: 1 / 1; }
.ld-ranges .sq-shot.is-tall img { object-position: 50% 64%; }
.ld-ask { margin-top: 14px; font-size: 13px; font-weight: 500; letter-spacing: .04em; color: var(--color-heading); align-self: flex-start; border-bottom: 1px solid currentColor; padding-bottom: 2px; }
.ld-ranges .sq-piece:hover .ld-ask { border-bottom-color: transparent; }

/* ---- how it works: the drawing on the ink, the facts beside it ---- */
.ld-how { display: grid; grid-template-columns: minmax(0, 1.05fr) minmax(0, 1fr); gap: clamp(26px, 4.4vw, 68px); align-items: center; padding-bottom: clamp(20px, 3vw, 40px); }
.ld-draw { background: radial-gradient(120% 90% at 70% 34%, #1b3552 0%, var(--color-heading, #12202C) 54%, #0a141d 100%); padding: clamp(18px, 3vw, 42px); }
.ld-draw svg { display: block; width: 100%; height: auto; }
.ld-facts { list-style: none; margin: 0; padding: 0; counter-reset: ld; display: flex; flex-direction: column; }
.ld-facts li { counter-increment: ld; display: grid; grid-template-columns: 46px minmax(0, 1fr); gap: 4px 0; padding: 22px 0; border-top: 1px solid rgba(var(--shade), .12); }
.ld-facts li:last-child { border-bottom: 1px solid rgba(var(--shade), .12); }
.ld-facts li::before { content: counter(ld, decimal-leading-zero); grid-row: span 2; font-family: var(--font-head), serif; font-size: 22px; color: var(--secondary, #9A6B33); line-height: 1.2; }
.ld-facts b { font-family: var(--font-head), serif; font-weight: 400; font-size: clamp(21px, 2.1vw, 27px); line-height: 1.15; color: var(--color-heading); }
.ld-facts span { font-size: 14.5px; line-height: 1.6; color: var(--color-body); max-width: 44ch; }

/* ---- its film ---- */
.ld-film video { display: block; width: 100%; max-width: 1100px; aspect-ratio: 16 / 9; background: #000; }

/* ---- the enquiry form ---- */
.ld-askwrap { padding-bottom: clamp(56px, 7vw, 100px); }
.ld-form { max-width: 760px; }
.ld-wants { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 10px; }
.ld-wants label { position: relative; display: block; cursor: pointer; text-transform: none; letter-spacing: 0; }
.ld-wants input { position: absolute; opacity: 0; pointer-events: none; }
.ld-wants span { display: flex; flex-direction: column; gap: 4px; height: 100%; padding: 14px 16px; border: 1px solid rgba(var(--shade), .18); border-radius: 2px; font-size: 12.5px; line-height: 1.45; color: var(--color-body); transition: border-color .2s, background .2s; }
.ld-wants b { font-family: var(--font-head), serif; font-weight: 400; font-size: 19px; color: var(--color-heading); }
.ld-wants input:checked + span { border-color: var(--color-heading); background: rgba(var(--shade), .04); box-shadow: inset 0 0 0 1px var(--color-heading); }
.ld-wants input:focus-visible + span { outline: 2px solid var(--secondary, #9A6B33); outline-offset: 2px; }
.ld-about { display: flex; align-items: center; gap: 8px; font-size: 14px; color: var(--color-heading); padding: 10px 14px; background: rgba(var(--shade), .05); border-radius: 2px; }
.ld-about[hidden] { display: none; }
.ld-about b { font-weight: 600; }
.ld-about button { margin-left: auto; border: 0; background: transparent; font-size: 20px; line-height: 1; cursor: pointer; color: var(--text-muted); }

@media (max-width: 900px) {
    .ld-how { grid-template-columns: minmax(0, 1fr); }
}
@media (max-width: 600px) {
    .ld-wants { grid-template-columns: minmax(0, 1fr); }
}