/* Lund & Vale — new compositions on the Pello DNA. Tokens only; colours come from tokens.css + palette.css. */

/* Serif wordmark and numbers: Instrument Serif has one weight, so the wordmark stays regular */
.t-word { font-weight: 400; letter-spacing: -.035em; line-height: .9; }
.stat__num { font-family: var(--font-display); font-weight: 400; font-size: 60px; letter-spacing: -.01em; }

/* 1 · hero-e adapted: wordmark on the sand, place chip top-left */
.lv-hero .hv-full__frame { min-height: min(86vh, 840px); }
.lv-hero .hv-full__frame > img { object-position: 50% 40%; }
.lv-hero .hv-full__frame::after { inset: 30% 0 0; background: linear-gradient(rgba(12, 12, 14, 0), rgba(12, 12, 14, .58)); }
.lv-hero__chip { top: 24px; bottom: auto; z-index: 2; color: var(--text); }
.lv-hero__title { font-weight: 400; }
.lv-hero__word { display: block; font-size: clamp(64px, 12vw, 200px); white-space: nowrap; }
.lv-hero__line { display: block; max-width: 18ch; text-align: right; padding-bottom: .5em; }

/* 3 · practice: statement + three staggered leaf tiles */
.lv-mat__grid { display: grid; grid-template-columns: 1.35fr repeat(3, 1fr); gap: var(--gap-lg) var(--gap); align-items: start; }
.lv-mat__copy { display: flex; flex-direction: column; gap: 24px; padding-right: 24px; }
.lv-mat__copy .t-h2 { max-width: 15ch; }
.lv-mat__copy .t-lead { max-width: 30ch; }
.lv-mat__item { display: flex; flex-direction: column; gap: 16px; }
.lv-mat__item:nth-child(3) { margin-top: 72px; }
.lv-mat__item:nth-child(4) { margin-top: 144px; }
.lv-leaf { width: 100%; aspect-ratio: 3 / 4; object-fit: cover; border-radius: var(--r-leaf) 0; }
.lv-leaf--r { border-radius: 0 var(--r-leaf); }
.lv-mat__item figcaption { display: flex; flex-direction: column; gap: 4px; padding-inline: 4px; }
.lv-mat__item .t-small { color: var(--text-2); max-width: 28ch; }

/* 5 · proof: one grey panel holding a portrait, the quote and three numbers */
.lv-proof { display: grid; grid-template-columns: 5fr 7fr; grid-template-rows: 1fr auto; gap: 0 clamp(32px, 4vw, 72px); padding: 16px; border-radius: var(--r-lg); background: var(--panel); }
.lv-proof__img { grid-row: 1 / span 2; width: 100%; height: 100%; min-height: 560px; object-fit: cover; object-position: 50% 25%; border-radius: var(--r-leaf) 0; }
.lv-proof__quote { display: flex; flex-direction: column; justify-content: center; gap: 28px; padding: 48px 32px 32px 0; }
.lv-proof__quote blockquote { max-width: 22ch; }
.lv-proof__quote figcaption { display: flex; flex-direction: column; gap: 4px; color: var(--text-2); }
.lv-proof__stats { grid-template-columns: repeat(3, 1fr); margin: 0; padding: 0 32px 32px 0; }

/* 6 · process: pastel timeline, widths follow the time each phase takes */
.lv-time { list-style: none; margin: 0; padding: 0; display: grid; grid-template-columns: 1fr 1.2fr 1.5fr 2.2fr; gap: var(--gap); }
.lv-time li { display: flex; flex-direction: column; justify-content: space-between; gap: 40px; min-height: 320px; padding: 28px; border-radius: var(--r-lg); background: var(--tile); }
.lv-time__n { font-family: var(--font-display); font-size: 60px; line-height: 1; letter-spacing: -.01em; }
.lv-time li h3 { margin-bottom: 4px; }
.lv-time li .t-small { max-width: 26ch; }
.lv-time__when { color: var(--text); font-weight: 500; margin-bottom: 8px; }

/* 8 · close: sage panel + tall photo, the text side sets the height */
.lv-close { display: grid; grid-template-columns: 7fr 5fr; gap: var(--gap); }
.lv-close__panel { display: flex; flex-direction: column; justify-content: space-between; gap: 72px; padding: clamp(32px, 5vw, 72px); border-radius: var(--r-lg); background: var(--tile-3); }
.lv-close__panel .t-display { max-width: 12ch; }
.lv-close__foot { display: flex; flex-direction: column; gap: 32px; align-items: flex-start; }
.lv-close__foot .t-lead { max-width: 34ch; color: var(--text); }
.lv-close__img { width: 100%; height: 100%; min-height: 480px; object-fit: cover; border-radius: 0 var(--r-leaf); }

/* Responsive */
@media (max-width: 1100px) {
  .lv-mat__grid { grid-template-columns: repeat(3, 1fr); }
  .lv-mat__copy { grid-column: 1 / -1; padding-right: 0; }
  .lv-mat__copy .t-h2 { max-width: 22ch; }
  .lv-mat__item:nth-child(3) { margin-top: 48px; }
  .lv-mat__item:nth-child(4) { margin-top: 96px; }
  .lv-time { grid-template-columns: 1fr 1fr; }
}
@media (max-width: 900px) {
  .lv-hero .hv-full__frame { min-height: 600px; }
  .lv-hero__line { text-align: left; }
  .lv-proof { grid-template-columns: 1fr; grid-template-rows: auto; }
  .lv-proof__img { grid-row: auto; min-height: 0; height: auto; aspect-ratio: 4 / 5; border-radius: 64px 0; }
  .lv-proof__quote { padding: 40px 16px 32px; }
  .lv-proof__stats { padding: 0 16px 16px; }
  .lv-close { grid-template-columns: 1fr; }
  .lv-close__img { min-height: 0; height: auto; aspect-ratio: 4 / 3; border-radius: 0 64px; }
}
@media (max-width: 640px) {
  .lv-hero .hv-full__frame { min-height: 560px; }
  .lv-hero__chip { left: 16px; top: 16px; }
  .lv-mat__grid { grid-template-columns: repeat(3, 1fr); gap: 24px 8px; }
  .lv-mat__item:nth-child(3) { margin-top: 32px; }
  .lv-mat__item:nth-child(4) { margin-top: 64px; }
  .lv-leaf { border-radius: 40px 0; }
  .lv-leaf--r { border-radius: 0 40px; }
  .lv-mat__item .t-small { display: none; }
  .lv-mat__item .t-h5 { font-size: 16px; }
  .lv-proof__stats { grid-template-columns: 1fr; gap: 28px; }
  .lv-proof__img { aspect-ratio: 1 / 1; object-position: 50% 20%; }
  .lv-time { grid-template-columns: 1fr; }
  .lv-time li { min-height: 0; gap: 28px; }
  .lv-close__panel { gap: 40px; }
}

/* Phone: let short copy run the full column so lines don't get choppy */
@media (max-width: 640px) {
  .stat .t-lead, .lv-time li .t-small, .svc p, .lv-close__foot .t-lead, .lv-mat__copy .t-lead, .lv-hero__line { max-width: none; }
}
@media (max-width: 640px) { .svc-grid .svc { min-height: 280px; } }

/* Hero photo: white house low in the frame, deep blue sky above — the wordmark sits in the sky */
.lv-hero .hv-full__frame { align-items: flex-start; }
.lv-hero .hv-full__frame > img { object-position: 50% 100%; }
.lv-hero .hv-full__frame::after { inset: 0 0 45% 0; background: linear-gradient(rgba(5, 18, 60, .28), rgba(5, 18, 60, 0)); }
.lv-hero__title { padding-top: clamp(72px, 7vw, 104px); }