/* css/pages/luxury-leasing.css : Luxury leasing ($4,000+ a month), the hub (audit/luxury-lease/BUILD-SPEC.md 8).
   Page layout only, class prefix ll-. A white page in the site's tokens (no bone, no warm tan, no gold): a typographic
   hero, the glance sheet, the renting lane with the shared Ready to rent form, the owners lane on the studio grey plate
   (window light crosses it as you scroll), the cities list, then two ink moments: the proof and cost band, and the
   shared text-me ending. The shared forms are styled through this page's containers only, never by forking their
   markup. Every color is a token or a neutral; dark mode follows the tokens and the ink moments go one step deeper. */

/* ------------------------------------------------------------------ shared type for this page */
.ll-h2 { font-weight: 300; font-size: clamp(2.5rem, 5vw, 4.75rem); line-height: .96; letter-spacing: -.05em; text-wrap: balance; }
.ll-h3 { font-weight: 300; font-size: clamp(2.1rem, 3.6vw, 3.4rem); line-height: 1; letter-spacing: -.045em; text-wrap: balance; }
.ll-h2 em, .ll-h3 em { font-family: var(--serif); font-style: italic; font-weight: 400; color: var(--accent); letter-spacing: -.015em; }
.ll-sub { max-width: 40ch; font-size: clamp(1.125rem, 1.6vw, 1.4rem); line-height: 1.42; letter-spacing: -.01em; color: var(--fg-2); text-wrap: balance; }
.ll-ctas { display: flex; flex-wrap: wrap; align-items: center; gap: 12px 24px; }
/* his face beside a line or a button: a thread through the page */
.ll-face { flex: none; display: block; width: 44px; height: 44px; border-radius: 50%; overflow: hidden; background: var(--paper-2);
  box-shadow: 0 0 0 1px var(--line), 0 12px 24px -16px rgba(17, 17, 19, .7); }
.ll-face img { display: block; width: 100%; height: 100%; object-fit: cover; }
/* in the hero, by the Text me button (as on the DFW page): his face in the first screen, with a fine blue ring */
.ll-face--hero { width: 56px; height: 56px; margin-left: 4px;
  box-shadow: 0 0 0 1px color-mix(in srgb, var(--ink) 16%, transparent), 0 0 0 4px color-mix(in srgb, var(--blue-fill) 22%, transparent); }

/* ------------------------------------------------------------------ hero: typographic, white */
.ll-hero { position: relative; padding: calc(var(--header-h) + clamp(36px, 7vh, 96px)) 0 clamp(56px, 8vh, 96px); }
.ll-hero__copy { display: grid; gap: clamp(22px, 2.8vw, 34px); justify-items: start; }
.ll-hero h1 { font-weight: 300; font-size: clamp(3.1rem, 9.4vw, 9.75rem); line-height: .9; letter-spacing: -.058em; color: var(--ink); text-wrap: balance; }
.ll-hero h1 .kicker { max-width: min(100%, 44rem); font-size: 12px; font-weight: 500; line-height: 1.6; letter-spacing: .3em; color: var(--fg-2); margin-bottom: clamp(22px, 3.4vw, 44px); text-wrap: balance; }
.ll-hero h1 .h1-main { display: block; }
/* the Bodoni line keeps a real line box here (site.css zeroes it for mixed lines), so it can rise on arrival */
.ll-hero h1 em { display: inline-block; line-height: .92; padding: 0 .06em .04em 0; font-family: var(--serif); font-style: italic; font-weight: 400; color: var(--accent); letter-spacing: -.02em; }
.ll-hero__lede { max-width: 40ch; font-size: clamp(1.125rem, 1.45vw, 1.375rem); line-height: 1.5; color: var(--fg-2); text-wrap: pretty; }
.ll-hero__ctas { display: flex; flex-wrap: wrap; align-items: center; gap: 12px; }
.ll-hero__ctas .btn--primary { min-height: 52px; padding: 0 24px; }
.ll-hero__ctas .btn--ghost { min-height: 52px; }

/* the proof: a row under the buttons; on wide screens its own column, standing on the hero's floor */
.ll-proof-chips { display: grid; grid-template-columns: repeat(4, minmax(0, auto)); justify-content: start; gap: 16px clamp(24px, 3.4vw, 48px); width: 100%; margin: 8px 0 0; padding: 20px 0 0; list-style: none; border-top: 1px solid var(--rule); }
.ll-proof-chips li { display: grid; gap: 7px; align-content: start; }
.ll-proof-chips b { font-weight: 300; font-size: clamp(1.6rem, 2.3vw, 2.25rem); line-height: 1; letter-spacing: -.045em; color: var(--fg); white-space: nowrap; }
.ll-proof-chips b:not(.tabular) { /* the words (D Magazine), not the counts */  font-family: var(--serif); font-style: italic; font-weight: 400; letter-spacing: -.01em; font-size: clamp(1.4rem, 2vw, 1.9rem); }
.ll-proof-chips li > span { font-size: 11.5px; font-weight: 500; letter-spacing: .16em; text-transform: uppercase; color: var(--fg-2); line-height: 1.4; }
/* (no min-height: the kicker starts a short step under the header, and the ink glance band shows at the foot of the
   first screen; review B5, 2026-10-14) */
@media (min-width: 1280px) {
  .ll-hero__copy { grid-template-columns: minmax(0, 8fr) minmax(0, 4fr); column-gap: clamp(48px, 6vw, 112px); align-items: end; }
  .ll-hero__copy > :not(.ll-proof-chips) { grid-column: 1; }
  .ll-proof-chips { grid-column: 2; grid-row: 1 / span 3; align-self: end; justify-self: end; grid-template-columns: minmax(0, 1fr); gap: 0; width: min(100%, 300px); margin: 0 0 6px; padding: 0; border-top: 0; }
  .ll-proof-chips li { gap: 8px; padding: 20px 0 22px; border-top: 1px solid var(--rule); }
  .ll-proof-chips li:last-child { border-bottom: 1px solid var(--rule); }
}
/* arrival (page JS arms it at the top of the page, never at T0): the kicker, the two lines, the lede, the buttons and the proof rise in turn */
.ll-hero.is-armed :is(.kicker, .h1-main, h1 em, .ll-hero__lede, .ll-hero__ctas, .ll-proof-chips) { opacity: 0; transform: translateY(26px); }
.ll-hero.is-armed.is-in :is(.kicker, .h1-main, h1 em, .ll-hero__lede, .ll-hero__ctas, .ll-proof-chips) { opacity: 1; transform: none; transition: opacity 1s var(--ease-out), transform 1.25s var(--ease-out); }
.ll-hero.is-armed.is-in .h1-main { transition-delay: .1s; }
.ll-hero.is-armed.is-in h1 em { transition-delay: .24s; }
.ll-hero.is-armed.is-in .ll-hero__lede { transition-delay: .42s; }
.ll-hero.is-armed.is-in .ll-hero__ctas { transition-delay: .54s; }
.ll-hero.is-armed.is-in .ll-proof-chips { transition-delay: .66s; }
.is-failsafe .ll-hero :is(.kicker, .h1-main, h1 em, .ll-hero__lede, .ll-hero__ctas, .ll-proof-chips) { opacity: 1 !important; transform: none !important; }

/* ------------------------------------------------------------------ the ink plates (the glance and the proof band) arrive as a
   rounded plate that opens to full bleed as it rises, and rounds off again as it leaves (page JS writes --plate, 1 to 0;
   playbook B4a). Full bleed at T0, without JS and in the fail-safe. */
[data-ll-plate].is-plating { clip-path: inset(0 calc(var(--plate, 0) * var(--gutter)) round calc(var(--plate, 0) * 36px)); }
.is-failsafe [data-ll-plate] { clip-path: none !important; }

/* ------------------------------------------------------------------ at a glance: a spec sheet on ink, five short facts
   (review B6, 2026-10-14: the facts are set large enough to carry the band, so it needs less empty padding) */
.ll-glance { position: relative; isolation: isolate; padding-block: clamp(96px, 9.5vw, 136px) clamp(104px, 10.5vw, 148px); background: var(--bg); color: var(--fg); }
.ll-glance::before { content: ""; position: absolute; inset: 0; z-index: -1; pointer-events: none;
  background: radial-gradient(60% 90% at 18% 0%, rgba(142, 164, 255, .09), rgba(142, 164, 255, 0) 70%),
              radial-gradient(140% 120% at 50% 50%, rgba(0, 0, 0, 0) 60%, rgba(0, 0, 0, .45) 100%); }
.ll-glance__h { margin: 0 0 20px; font-size: 12px; font-weight: 500; line-height: 1.5; letter-spacing: .28em; text-transform: uppercase; color: var(--fg-2); }
.ll-glance__list { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); margin: 0; border-top: 1px solid var(--ink); }
.ll-glance__list > div { min-width: 0; padding: 18px 18px 22px 0; border-bottom: 1px solid var(--rule); }
.ll-glance__list > div:first-child { grid-column: 1 / -1; }
.ll-glance__list dt { margin-bottom: 10px; font-size: 12px; font-weight: 500; letter-spacing: .24em; text-transform: uppercase; color: var(--fg-2); }
/* capped at 23px: the phone number in Replies stays under twice the 12px broker line in the header (TREC; tests/broker-size.js) */
.ll-glance__list dd { margin: 0; font-weight: 300; font-size: clamp(1.25rem, 1.6vw, 1.4375rem); line-height: 1.3; letter-spacing: -.012em; color: var(--fg); text-wrap: pretty; }
.ll-glance__list dd .text-link { white-space: nowrap; font-weight: 400; }
.ll-glance__list dd .text-link.is-wrap { white-space: normal; }
@media (min-width: 1100px) {
  .ll-glance__list { grid-template-columns: 1.4fr 1fr 1.15fr 1.15fr 1.1fr; border-bottom: 1px solid var(--rule); }
  .ll-glance__list > div, .ll-glance__list > div:first-child { grid-column: auto; padding: 26px clamp(20px, 2vw, 32px) 34px; border-bottom: 0; border-left: 1px solid var(--rule); }
  .ll-glance__list > div:first-child { padding-left: 0; border-left: 0; }
}

/* ------------------------------------------------------------------ rows and cells that rise in turn (page JS; never at T0) */
[data-ll-rise].is-armed > * { opacity: 0; transform: translateY(22px); }
[data-ll-rise].is-armed > .is-in { opacity: 1; transform: none; transition: opacity .8s var(--ease-out), transform 1s var(--ease-out); transition-delay: calc(var(--d, 0) * 1ms); }
.is-failsafe [data-ll-rise] > * { opacity: 1 !important; transform: none !important; }

/* ------------------------------------------------------------------ the two lanes */
.ll-lane { position: relative; scroll-margin-top: var(--header-h); }
.ll-lane .title-card { min-height: min(40vh, 400px); padding-block: clamp(64px, 10vh, 120px) clamp(36px, 5vh, 64px); }
.ll-lane .title-card__title { font-size: clamp(2.75rem, 6.6vw, 6.75rem); max-width: 13ch; }
.ll-lane .title-card .ll-sub { margin-top: 2px; }
.ll-lane .title-card::before { top: clamp(28px, 4.4vh, 44px); }
.ll-lane__grid { display: grid; gap: clamp(44px, 6vw, 72px); padding-block: clamp(8px, 2vw, 24px) clamp(64px, 8vw, 120px); }
.ll-lane__grid > * { min-width: 0; }
@media (min-width: 1000px) {
  .ll-lane__grid { grid-template-columns: minmax(0, 7fr) minmax(0, 4fr); column-gap: clamp(56px, 8vw, 144px); align-items: start; }
  #renting .ll-lane__side { position: sticky; top: calc(var(--header-h) + 40px); }
}
.ll-lane__side { display: grid; gap: 24px; align-content: start; justify-items: start; }
/* tablets: the portrait and the note share the row instead of the portrait standing alone (review B15, 2026-10-14) */
@media (min-width: 600px) and (max-width: 999px) {
  #renting .ll-lane__side { grid-template-columns: minmax(0, 5fr) minmax(0, 6fr); align-items: end; column-gap: 32px; }
  #renting .ll-me { grid-row: 1 / span 2; margin: 0; }
}
/* his portrait: the studio white of the photo meets the white page, with one hairline under it */
.ll-me { position: relative; margin: 0 0 4px; width: 100%; max-width: 380px; aspect-ratio: 4 / 5; overflow: hidden; background: var(--paper-2); }
.ll-me img { width: 100%; height: 100%; object-fit: cover; object-position: 50% 30%; }
.ll-me::after { content: ""; position: absolute; left: 0; right: 0; bottom: 0; height: 1px; background: var(--ink); }
.ll-note { max-width: 24ch; margin: 0; font-family: var(--serif); font-style: italic; font-size: clamp(1.4rem, 1.9vw, 1.75rem); line-height: 1.2; letter-spacing: -.01em; color: var(--fg); text-wrap: balance; }

/* the steps: a numeral and a blue mark at the head of each; they tick up and draw as each step arrives */
.ll-steps { counter-reset: ll-step; margin: 0; padding: 0; list-style: none; border-bottom: 1px solid var(--rule); }
.ll-steps > li { counter-increment: ll-step; position: relative; display: grid; grid-template-columns: clamp(3.4rem, 5.4vw, 5.25rem) minmax(0, 1fr); column-gap: 6px; row-gap: 6px;
  padding: clamp(22px, 2.6vw, 30px) 0 clamp(24px, 2.8vw, 32px); border-top: 1px solid var(--rule); }
.ll-steps > li::before { content: counter(ll-step); grid-row: 1 / span 2; align-self: start; font-weight: 300; font-size: clamp(2rem, 3vw, 2.75rem); line-height: .9; letter-spacing: -.05em;
  color: var(--fg); font-variant-numeric: tabular-nums; }
.ll-steps > li::after { content: ""; position: absolute; left: 0; top: -1px; width: clamp(2.2rem, 3.4vw, 3.25rem); height: 2px; background: var(--blue-fill); transform-origin: 0 50%; }
.ll-steps strong { grid-column: 2; font-weight: 500; font-size: clamp(1.25rem, 1.85vw, 1.55rem); line-height: 1.22; letter-spacing: -.018em; color: var(--fg); text-wrap: balance; }
.ll-steps > li > span { grid-column: 2; max-width: 46ch; font-size: clamp(1.0625rem, 1.2vw, 1.125rem); line-height: 1.55; color: var(--fg-2); text-wrap: pretty; }
.ll-steps.is-armed > li { transition: opacity .7s var(--ease-out); }
.ll-steps.is-armed > li:not(.is-on) { opacity: .4; }
.ll-steps.is-armed > li::before { transition: clip-path .7s var(--ease-cine), transform .8s var(--ease-out); }
.ll-steps.is-armed > li:not(.is-on)::before { clip-path: inset(0 0 100% 0); transform: translateY(.55em); }
.ll-steps.is-armed > li.is-on::before { clip-path: inset(-10% -10% -20% -10%); }
.ll-steps.is-armed > li::after { transition: transform .9s var(--ease-out) .18s; }
.ll-steps.is-armed > li:not(.is-on)::after { transform: scaleX(0); }
.is-failsafe .ll-steps > li { opacity: 1 !important; }
.is-failsafe .ll-steps > li::before { clip-path: none !important; transform: none !important; }
.is-failsafe .ll-steps > li::after { transform: none !important; }

/* ------------------------------------------------------------------ what landlords see: a sample one-page renter profile
   (luxury lease plan change 10). A paper sheet on the white page, clearly marked Sample. */
.ll-profile { display: grid; gap: clamp(28px, 4vw, 48px); padding-block: clamp(24px, 4vw, 56px) clamp(40px, 5vw, 72px); scroll-margin-top: calc(var(--header-h) + 8px); }
.ll-profile__intro { display: grid; gap: 16px; align-content: start; justify-items: start; padding-top: 22px; border-top: 2px solid var(--blue-fill); }
.ll-profile__lede { max-width: 44ch; margin: 0; font-size: clamp(1.0625rem, 1.25vw, 1.1875rem); line-height: 1.55; color: var(--fg-2); text-wrap: pretty; }
.ll-profile__intro .fine { max-width: 40ch; }
@media (min-width: 1000px) {
  .ll-profile { grid-template-columns: minmax(0, 5fr) minmax(0, 7fr); column-gap: clamp(48px, 7vw, 128px); align-items: start; }
}
.ll-sheet { position: relative; max-width: 40rem; width: 100%; margin: 0; padding: clamp(22px, 3.4vw, 40px); background: var(--paper);
  border: 1px solid var(--line); border-top: 3px solid var(--ink); box-shadow: 0 30px 60px -40px rgba(21, 19, 17, .35); }
.ll-sheet__top { display: flex; align-items: center; justify-content: space-between; gap: 16px; padding-bottom: 14px; border-bottom: 1px solid var(--line); }
.ll-sheet__t { margin: 0; font-size: 12px; font-weight: 500; letter-spacing: .24em; text-transform: uppercase; color: var(--fg-2); }
.ll-sheet__sample { display: inline-flex; align-items: center; min-height: 28px; padding: 2px 12px; border: 1.5px solid var(--ink); font-size: 12px; font-weight: 600; letter-spacing: .28em; text-transform: uppercase; color: var(--ink); transform: rotate(-3deg); }
.ll-sheet__name { display: grid; gap: 4px; margin: 18px 0 8px; font-weight: 300; font-size: clamp(1.6rem, 2.4vw, 2.1rem); line-height: 1.05; letter-spacing: -.035em; color: var(--fg); }
.ll-sheet__name span { font-size: 14px; font-weight: 400; letter-spacing: 0; color: var(--fg-2); }
.ll-sheet__rows { display: grid; margin: 0; }
.ll-sheet__rows > div { display: grid; grid-template-columns: 8.5rem minmax(0, 1fr); gap: 14px; padding: 11px 0; border-bottom: 1px solid var(--line); }
.ll-sheet__rows dt { padding-top: 3px; font-size: 12px; font-weight: 500; letter-spacing: .16em; text-transform: uppercase; color: var(--fg-2); }
.ll-sheet__rows dd { margin: 0; font-size: 1rem; line-height: 1.45; color: var(--fg); }
@media (max-width: 480px) { .ll-sheet__rows > div { grid-template-columns: 1fr; gap: 2px; } }
.ll-sheet__note { margin-top: 18px; padding: 14px 16px; border-left: 2px solid var(--blue-fill); background: var(--paper-2); }
.ll-sheet__note p { margin: 0; font-family: var(--serif); font-style: italic; font-size: 1.125rem; line-height: 1.4; color: var(--fg); }
.ll-sheet__note .ll-sheet__k { margin-bottom: 6px; font-family: inherit; font-style: normal; font-size: 12px; font-weight: 500; letter-spacing: .2em; text-transform: uppercase; color: var(--fg-2); }
.ll-sheet__by { margin-top: 16px; font-size: 13px; line-height: 1.45; color: var(--fg-2); }

/* ------------------------------------------------------------------ your situation: five answers, hairline rows */
.ll-sits { padding-block: clamp(88px, 11vw, 160px) clamp(80px, 10vw, 144px); }
.ll-sits__head { display: grid; gap: 18px; }
@media (min-width: 1100px) { .ll-sits__head { grid-template-columns: minmax(0, 7fr) minmax(0, 5fr); column-gap: clamp(48px, 6vw, 112px); align-items: end; } }
.ll-sits__head .ll-sub { font-size: clamp(1.0625rem, 1.3vw, 1.25rem); }
.ll-sits__list { margin: clamp(36px, 5vw, 64px) 0 0; padding: 0; list-style: none; border-top: 1px solid var(--ink); }
.ll-sit { display: grid; gap: 8px 32px; padding: 24px 0 28px; border-bottom: 1px solid var(--rule); scroll-margin-top: calc(var(--header-h) + 24px); }
.ll-sit__k { margin: 0; font-size: 12px; font-weight: 500; letter-spacing: .22em; text-transform: uppercase; color: var(--accent); }
.ll-sit__q { margin: 0; font-weight: 500; font-size: clamp(1.25rem, 1.8vw, 1.55rem); line-height: 1.22; letter-spacing: -.018em; color: var(--fg); text-wrap: balance; }
.ll-sit__a { display: grid; gap: 10px; }
.ll-sit__a .ll-faq__a { max-width: 62ch; margin: 0; font-size: clamp(1.0625rem, 1.2vw, 1.125rem); line-height: 1.6; color: var(--fg-2); text-wrap: pretty; }
.ll-sit__more { margin: 0; font-size: .9375rem; color: var(--fg-2); }
.ll-sit:target .ll-sit__q { color: var(--accent); }
@media (min-width: 900px) {
  .ll-sit { grid-template-columns: minmax(0, 5fr) minmax(0, 7fr); grid-template-rows: auto 1fr; padding: 30px 0 34px; }
  .ll-sit__k { grid-column: 1; }
  .ll-sit__q { grid-column: 1; grid-row: 2; align-self: start; }
  .ll-sit__a { grid-column: 2; grid-row: 1 / span 2; }
}
.ll-sits__ctas { margin-top: clamp(28px, 4vw, 44px); }

/* ------------------------------------------------------------------ Ready to rent: the shared renter form on white */
.ll-ready { display: grid; gap: clamp(28px, 4vw, 44px); padding-block: clamp(48px, 6vw, 88px) clamp(88px, 11vw, 160px); scroll-margin-top: calc(var(--header-h) + 8px); }
.ll-ready__intro { display: grid; gap: 18px; align-content: start; justify-items: start; padding-top: 22px; border-top: 2px solid var(--blue-fill); }
.ll-ready__lede { max-width: 44ch; font-size: clamp(1.0625rem, 1.25vw, 1.1875rem); line-height: 1.55; color: var(--fg-2); text-wrap: pretty; }
.ll-ready__intro .ll-ctas { margin-top: 6px; }
@media (min-width: 1100px) {
  .ll-ready { grid-template-columns: minmax(0, 5fr) minmax(0, 7fr); column-gap: clamp(48px, 7vw, 128px); align-items: start; }
  .ll-ready__intro { position: sticky; top: calc(var(--header-h) + 40px); }
}
/* the form sits on the paper plate, with white fields (styled through this container; the markup is shared) */
.ll-ready .form { --bg: var(--paper); max-width: 720px; width: 100%; padding: clamp(22px, 3.4vw, 48px); background: var(--paper-2); border-top: 1px solid var(--ink); }
.ll-ready .form .fieldset > legend, .ll-lane--owners .form .fieldset > legend { font-weight: 500; color: var(--fg); }
.ll-ready .form .field__hint { margin-top: 6px; }
.ll-ready .form legend .opt, .ll-lane--owners .form legend .opt { margin-left: 6px; font-weight: 400; color: var(--fg-muted); }
.ll-ready .form .form__row, .ll-lane--owners .form .form__row { align-items: start; }
.ll-ready .form .form__row .select, .ll-lane--owners .form .form__row .select { height: auto; }
.ll-ready .form-success, .ll-lane--owners .form-success { max-width: 720px; background: var(--paper); }

/* ------------------------------------------------------------------ leasing out: the studio grey plate, with window light */
.ll-lane--owners { isolation: isolate; overflow: clip; background: var(--stage-paper); }
/* the lease-or-sell tool's own section continues the plate (the light's mask fades out before the seam) */
.ll-calc-sec { background: var(--stage-paper); }
.ll-lane--owners .title-card { background: transparent; }
.ll-lane--owners .title-card::before { background: color-mix(in srgb, var(--ink) 40%, transparent); }
/* window light on the plate: an ambient touch, NOT the page's own moment (that waits on Ashton's pick from the stills,
   BUILD-SPEC 5, PLAN D25). Late-day light through a tall window: the plate sits in a soft neutral shade, and the light
   falls through two broad panes and a narrow one, split by mullion shadows, crossing from left to right while the
   section scrolls by (--lt 0 to 1, page JS). It reaches the side column as the pull line lights, word by word, on the
   same clock. CSS only; at T0 it rests on the pull line. Review B3 (2026-10-14): white light on the #F5F5F3 plate alone
   measured about 1.08:1, a faint sheen, so the light now has shade around it (about 20 to 25 levels between them). */
.ll-light { position: absolute; inset: 0; z-index: -1; overflow: hidden; pointer-events: none;
  background: linear-gradient(104deg, rgba(17, 17, 19, .085), rgba(17, 17, 19, .05) 46%, rgba(17, 17, 19, .1));
  -webkit-mask-image: linear-gradient(180deg, transparent, #000 16%, #000 86%, transparent);
  mask-image: linear-gradient(180deg, transparent, #000 16%, #000 86%, transparent); }
.ll-light i { position: absolute; top: -30%; height: 160%; left: var(--x); width: var(--w);
  background: linear-gradient(90deg, rgba(255, 255, 255, 0), rgba(255, 255, 255, .97) 16%, rgba(255, 255, 255, .97) 84%, rgba(255, 255, 255, 0));
  filter: blur(6px); opacity: var(--o, .95);
  transform: translate3d(calc((var(--lt, .42) - .42) * 112vw), 0, 0) skewX(-22deg); will-change: transform; }
.ll-light i:nth-child(1) { --x: 47.5%; --w: 10.5vw; }
.ll-light i:nth-child(2) { --x: 60.5%; --w: 11vw; }
.ll-light i:nth-child(3) { --x: 74.5%; --w: 3.4vw; --o: .85; }
.ll-pull { max-width: 15ch; margin: 0; font-family: var(--serif); font-style: italic; font-weight: 400; font-size: clamp(2.1rem, 3.5vw, 3.4rem); line-height: 1.06; letter-spacing: -.012em; color: var(--ink); text-wrap: balance; }
.ll-pull .wi { transition: opacity .2s linear; }
.ll-lane--owners .ll-lane__side .fine { max-width: 34ch; font-size: .9375rem; color: var(--fg-2); }
.ll-lane--owners .ll-ctas { gap: 14px 22px; }
.ll-lane--owners .deeper { width: 100%; max-width: none; }
.ll-lane--owners .ll-lane__side > .ll-ctas + .deeper { margin-top: 8px; }
.ll-lane--owners .opinion .form { --bg: var(--paper); max-width: 40rem; padding: clamp(20px, 3vw, 32px); background: var(--paper); border-top: 1px solid var(--ink); }
/* the narrow side column: the form's pairs stack, so "How did you find me?" shows its whole answer (review I8) */
.ll-lane__side .form .form__row--2 { grid-template-columns: minmax(0, 1fr); }
/* the way down to the lease-or-sell tool, for the owner who can't get their price (review S4) */
.ll-calc-link { display: inline-flex; flex-wrap: wrap; align-items: center; gap: 4px 8px; padding: 12px 0; font-size: 1rem; line-height: 1.4; color: var(--fg); text-decoration: none; border-top: 1px solid var(--rule); border-bottom: 1px solid var(--rule); }
.ll-calc-link span { font-weight: 600; }
.ll-calc-link .icon { color: var(--accent); transition: transform var(--dur-3, .3s) var(--ease-out); }
.ll-calc-link:hover .icon, .ll-calc-link:focus-visible .icon { transform: translateY(2px); }
.ll-rules { display: grid; margin: 4px 0 0; border-top: 1px solid var(--line); }
.ll-rules > div { display: grid; grid-template-columns: 9.5rem minmax(0, 1fr); gap: 16px; padding: 12px 0; border-bottom: 1px solid var(--line); }
.ll-rules dt { padding-top: 3px; font-size: 12px; font-weight: 500; letter-spacing: .18em; text-transform: uppercase; color: var(--fg-2); }
.ll-rules dd { margin: 0; font-size: 1rem; line-height: 1.5; color: var(--fg); }
.ll-rules a { color: var(--accent); }
.ll-rules dd > a:not(.text-link) { white-space: nowrap; }
@media (max-width: 520px) { .ll-rules > div { grid-template-columns: 1fr; gap: 4px; } }
/* Lease it or sell it? (the owner tool, js/tools/leaseorsell.js) under the lane, full width on the plate */
.ll-calc { display: grid; gap: clamp(24px, 3vw, 36px); padding-block: 0 clamp(80px, 10vw, 144px); scroll-margin-top: calc(var(--header-h) + 8px); }
.ll-calc__intro { display: grid; gap: 14px; padding-top: 22px; border-top: 2px solid var(--blue-fill); }
@media (min-width: 1000px) { .ll-calc__intro { grid-template-columns: minmax(0, 5fr) minmax(0, 6fr); column-gap: clamp(48px, 6vw, 112px); align-items: end; } }
.ll-calc__lede { max-width: 46ch; margin: 0; font-size: clamp(1.0625rem, 1.25vw, 1.1875rem); line-height: 1.55; color: var(--fg-2); text-wrap: pretty; }
.ll-calc .tool { border-top: 1px solid var(--ink); }

/* ------------------------------------------------------------------ cities: a hairline-ruled list */
.ll-cities { padding-block: clamp(88px, 11vw, 160px) clamp(80px, 10vw, 144px); }
.ll-cities__head { display: grid; gap: 18px; }
@media (min-width: 1100px) { .ll-cities__head { grid-template-columns: minmax(0, 7fr) minmax(0, 5fr); column-gap: clamp(48px, 6vw, 112px); align-items: end; } }
.ll-cities__head .ll-sub { font-size: clamp(1.0625rem, 1.3vw, 1.25rem); }
.ll-cities__list { margin: clamp(36px, 5vw, 64px) 0 0; padding: 0; list-style: none; border-top: 1px solid var(--ink); }
.ll-city { position: relative; display: grid; gap: 10px 32px; align-items: center; padding: 22px 0 24px; border-bottom: 1px solid var(--rule); scroll-margin-top: calc(var(--header-h) + 24px); }
.ll-city::after { content: ""; position: absolute; left: 0; bottom: -1px; height: 1px; width: 100%; background: var(--blue-fill); transform: scaleX(0); transform-origin: 0 50%; transition: transform .7s var(--ease-out); }
.ll-city:hover::after, .ll-city:focus-within::after, .ll-city:target::after { transform: scaleX(1); }
.ll-city__name { font-weight: 600; font-size: clamp(1.4rem, 2vw, 1.85rem); line-height: 1.1; letter-spacing: -.025em; color: var(--fg); }
.ll-city__line { max-width: 56ch; font-size: clamp(1rem, 1.15vw, 1.0625rem); line-height: 1.5; color: var(--fg-2); text-wrap: pretty; }
/* the portal links: quiet caps links with a blue hairline, one width and one right edge for all seven (review B10,
   2026-10-14: seven solid blue buttons read as a utility list; blue stays an accent) */
.ll-city__go { justify-self: start; justify-content: space-between; gap: 14px; min-height: 44px; }
.ll-city__go .icon { flex: none; transition: transform var(--dur-3, .3s) var(--ease-out); }
.ll-city__go:hover .icon, .ll-city__go:focus-visible .icon { transform: translate(2px, -2px); }
@media (min-width: 900px) {
  .ll-city { grid-template-columns: minmax(0, 3fr) minmax(0, 6fr) 19rem; padding: 26px 0 28px; }
  .ll-city__go { justify-self: end; width: 19rem; }
}
@media (max-width: 599px) { .ll-city__go { width: 100%; } }

/* ------------------------------------------------------------------ the proof and the cost (INK, the second ink moment) */
.ll-proof { position: relative; isolation: isolate; padding-block: clamp(168px, 16vw, 228px) clamp(176px, 17vw, 240px); background: var(--bg); color: var(--fg); scroll-margin-top: var(--header-h); }
.ll-proof::before { content: ""; position: absolute; inset: 0; z-index: -1; pointer-events: none;
  background: radial-gradient(50% 60% at 20% 40%, rgba(142, 164, 255, .1), rgba(142, 164, 255, 0) 70%),
              radial-gradient(70% 60% at 70% 100%, rgba(241, 240, 237, .04), rgba(241, 240, 237, 0) 70%),
              radial-gradient(135% 105% at 50% 50%, rgba(0, 0, 0, 0) 55%, rgba(0, 0, 0, .55) 100%); }
.ll-proof__grid { display: grid; gap: clamp(64px, 8vw, 104px); }
.ll-proof__grid > * { min-width: 0; }
@media (min-width: 1100px) { .ll-proof__grid { grid-template-columns: minmax(0, 7fr) minmax(0, 5fr); column-gap: clamp(48px, 6vw, 112px); align-items: center; } }
.ll-proof__quotes .ll-h2 { font-size: clamp(2.75rem, 5.8vw, 5.5rem); max-width: 14ch; text-wrap: wrap; } /* "80+ five-star" stays one line */
.ll-proof__facts { display: grid; gap: 16px; margin-top: clamp(36px, 5vw, 64px); padding-top: 22px; border-top: 1px solid rgba(241, 240, 237, .16); max-width: 34rem; }
.ll-proof__stars svg { width: 20px; height: 20px; }
.ll-proof__facts .fine { max-width: 28ch; font-weight: 300; font-size: clamp(1.35rem, 2vw, 1.75rem); line-height: 1.32; letter-spacing: -.015em; color: var(--fg); text-wrap: balance; }
.ll-proof__facts .text-link { white-space: nowrap; font-weight: 400; }
/* a lease client's own words, under the facts (word for word, from the Google review it links to) */
.ll-quote { margin: clamp(40px, 5vw, 64px) 0 0; max-width: 34rem; padding-left: clamp(18px, 2vw, 24px); border-left: 2px solid var(--blue-fill); }
.ll-quote blockquote { margin: 0; }
.ll-quote p { margin: 0; font-family: var(--serif); font-style: italic; font-weight: 400; font-size: clamp(1.3rem, 1.9vw, 1.65rem); line-height: 1.32; letter-spacing: -.01em; color: var(--fg); text-wrap: pretty; }
.ll-quote figcaption { display: flex; flex-wrap: wrap; align-items: baseline; gap: 6px 16px; margin-top: 16px; font-size: 12px; font-weight: 500; letter-spacing: .16em; text-transform: uppercase; color: var(--fg-2); }
.ll-quote figcaption .text-link { letter-spacing: .12em; }
/* three more lease clients, smaller, under Lorri's */
.ll-quotes { display: grid; gap: 22px; max-width: 34rem; margin: clamp(28px, 3.5vw, 40px) 0 0; padding: 0; list-style: none; }
.ll-quotes figure { margin: 0; padding-left: clamp(18px, 2vw, 24px); border-left: 1px solid rgba(241, 240, 237, .22); }
.ll-quotes blockquote { margin: 0; }
.ll-quotes p { margin: 0; font-family: var(--serif); font-style: italic; font-weight: 400; font-size: clamp(1.08rem, 1.4vw, 1.25rem); line-height: 1.38; color: var(--fg); text-wrap: pretty; }
.ll-quotes figcaption { margin-top: 8px; font-size: 11.5px; font-weight: 500; letter-spacing: .16em; line-height: 1.5; text-transform: uppercase; color: var(--fg-2); }
.ll-quotes__src { max-width: 34rem; margin-top: 18px; color: var(--fg-2); }
.ll-quotes__src .text-link { white-space: nowrap; }
.ll-cost { display: grid; gap: 16px; align-content: start; padding: clamp(28px, 3.4vw, 48px); background: rgba(241, 240, 237, .025); border: 1px solid rgba(241, 240, 237, .14); border-top: 2px solid var(--blue-fill); scroll-margin-top: calc(var(--header-h) + 24px); }
.ll-cost > p { max-width: 40ch; font-size: clamp(1.0625rem, 1.3vw, 1.25rem); line-height: 1.5; color: var(--fg); text-wrap: pretty; }
.ll-cost .deeper { max-width: none; border-color: rgba(241, 240, 237, .14); }
.ll-cost .deeper > summary { font-size: 1rem; }

/* ------------------------------------------------------------------ straight answers */
.ll-faq { padding-block: clamp(88px, 11vw, 160px) clamp(32px, 4vw, 56px); }
.ll-faq__grid { display: grid; gap: clamp(24px, 3vw, 40px); align-items: start; }
@media (min-width: 1000px) { .ll-faq__grid { grid-template-columns: minmax(0, 4fr) minmax(0, 7fr); column-gap: clamp(40px, 5vw, 88px); } .ll-faq__grid > .ll-h2 { position: sticky; top: calc(var(--header-h) + 40px); } }
.ll-faq .drawer > summary { padding: 16px 0; line-height: 1.35; }
.ll-faq .drawer__body p { max-width: 64ch; line-height: 1.6; color: var(--fg-2); }
.ll-faq .drawer__body p.ll-faq__a { font-size: 1.0625rem; color: var(--fg); }
.ll-faq .drawer__body p + p { margin-top: 12px; }
.ll-faq .drawer__body a { color: var(--accent); }

/* ------------------------------------------------------------------ Fair Housing, always, and the sources */
.ll-fh { padding-block: clamp(40px, 5vw, 72px) clamp(88px, 10vw, 144px); }
.ll-fh__plate { display: grid; gap: clamp(22px, 3vw, 36px); padding-top: clamp(32px, 4vw, 52px); border-top: 1px solid var(--ink); }
@media (min-width: 1000px) { .ll-fh__plate { grid-template-columns: minmax(0, 4fr) minmax(0, 7fr); column-gap: clamp(40px, 5vw, 88px); align-items: start; } }
.ll-fh__body { display: grid; gap: 22px; max-width: 68ch; }
.ll-fh__lead { font-weight: 300; font-size: clamp(1.4rem, 2.2vw, 1.95rem); line-height: 1.3; letter-spacing: -.02em; color: var(--ink); text-wrap: pretty; }
.ll-fh .deeper { max-width: none; }
.ll-sources { display: grid; gap: 12px; }
.ll-sources p { font-size: .9375rem; line-height: 1.6; color: var(--fg-2); }
.ll-sources strong { font-weight: 600; color: var(--fg); }
.ll-sources a { color: var(--accent); }
/* one row per source (city, then the owner rules), like the owner facts drawer (review B14, 2026-10-14) */
.ll-sources .ll-rules { margin: 0; }
.ll-sources .ll-rules > div { grid-template-columns: 8.5rem minmax(0, 1fr); }
.ll-sources .ll-rules dd { font-size: .9375rem; line-height: 1.6; color: var(--fg-2); }
@media (max-width: 520px) { .ll-sources .ll-rules > div { grid-template-columns: 1fr; gap: 4px; } }

/* ------------------------------------------------------------------ the header on this child page: nav.js marks Lease & Invest
   aria-current="true" (its section, not this page); draw it like a current link (site.css styles only "page") */
.page--luxury .site-header .nav-link[aria-current="true"] { color: var(--fg); }
.page--luxury .site-header .nav-link[aria-current="true"]::after { transform: scaleX(1); }
.page--luxury .menu-tile[aria-current="true"] .menu-tile__label { color: var(--blue-on-night); }

/* ------------------------------------------------------------------ the text-me ending: spacing only (the component is shared) */
.page--luxury .textme { padding-block: clamp(150px, 20vh, 204px) clamp(160px, 21vh, 212px); }
@media (max-width: 767px) { .page--luxury .textme { padding-block: 190px 200px; } }

/* ------------------------------------------------------------------ dark mode: the plate keeps its step; the ink goes deeper */
@media (prefers-color-scheme: dark) {
  :root:not([data-theme="light"]) .ll-lane--owners, :root:not([data-theme="light"]) .ll-calc-sec { background: var(--paper-2); }
  /* dark mode: no shade (the plate is already dark), and a light of its own instead of 5% of white */
  :root:not([data-theme="light"]) .ll-light { background: none; }
  :root:not([data-theme="light"]) .ll-light i { background: linear-gradient(90deg, rgba(241, 240, 237, 0), rgba(241, 240, 237, .075) 16%, rgba(241, 240, 237, .075) 84%, rgba(241, 240, 237, 0)); opacity: 1; }
  :root:not([data-theme="light"]) :is(.ll-proof, .ll-glance) { background: #080807; }
  :root:not([data-theme="light"]) .ll-face { box-shadow: 0 0 0 1px var(--line); }
  :root:not([data-theme="light"]) .ll-face--hero { box-shadow: 0 0 0 1px var(--line), 0 0 0 4px color-mix(in srgb, var(--blue-fill) 30%, transparent); }
  :root:not([data-theme="light"]) .ll-me { background: var(--paper-2); }
}
:root[data-theme="dark"] .ll-lane--owners, :root[data-theme="dark"] .ll-calc-sec { background: var(--paper-2); }
:root[data-theme="dark"] .ll-light { background: none; }
:root[data-theme="dark"] .ll-light i { background: linear-gradient(90deg, rgba(241, 240, 237, 0), rgba(241, 240, 237, .075) 16%, rgba(241, 240, 237, .075) 84%, rgba(241, 240, 237, 0)); opacity: 1; }
:root[data-theme="dark"] :is(.ll-proof, .ll-glance) { background: #080807; }
:root[data-theme="dark"] .ll-face { box-shadow: 0 0 0 1px var(--line); }
:root[data-theme="dark"] .ll-face--hero { box-shadow: 0 0 0 1px var(--line), 0 0 0 4px color-mix(in srgb, var(--blue-fill) 30%, transparent); }

/* ------------------------------------------------------------------ phones and tablets */
@media (max-width: 1279px) {
  .ll-hero { padding-top: calc(var(--header-h) + clamp(28px, 6vh, 64px)); }
}
@media (max-width: 999px) {
  .ll-lane .title-card { min-height: 0; }
}
@media (max-width: 767px) {
  .ll-hero h1 { font-size: clamp(2.75rem, 13.4vw, 4rem); line-height: .92; }
  .ll-hero h1 .kicker { font-size: 11px; letter-spacing: .2em; line-height: 1.7; }
  .ll-hero__lede { font-size: 1.0625rem; }
  /* the two primary buttons full width; Text me shares the last row with his face */
  .ll-hero__ctas { display: grid; grid-template-columns: minmax(0, 1fr) auto; align-items: center; width: 100%; }
  .ll-hero__ctas .btn { width: 100%; }
  .ll-hero__ctas .btn--primary { grid-column: 1 / -1; }
  .ll-face--hero { width: 52px; height: 52px; margin-left: 2px; }
  .ll-proof-chips { grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 20px 16px; }
  .ll-lane .title-card { padding-block: 64px 28px; }
  .ll-lane .title-card__title { font-size: clamp(2.5rem, 11.4vw, 3.4rem); }
  .ll-steps > li { grid-template-columns: 3rem minmax(0, 1fr); }
  .ll-ready .form { padding: 22px 18px 26px; margin-inline: calc(var(--gutter) * -1); width: calc(100% + var(--gutter) * 2); }
  .ll-cost { padding: 26px 22px 18px; }
}
@media (max-width: 360px) {
  .ll-hero h1 .kicker { letter-spacing: .14em; }
  .ll-hero__ctas .btn--primary { padding: 0 16px; }
  .ll-rules > div { grid-template-columns: 1fr; }
}

/* ------------------------------------------------------------------ reduced motion and the global pause: designed end states */
@media (prefers-reduced-motion: reduce) {
  .ll-steps > li, .ll-steps > li::before, .ll-steps > li::after, .ll-city::after, .ll-city__go .icon, .ll-pull .wi, [data-ll-rise] > * { transition: none !important; }
  .ll-light i { will-change: auto; }
}
:root[data-motion="paused"] :is(.ll-steps > li, .ll-city, [data-ll-rise] > *) { transition: none !important; }
:root[data-motion="paused"] .ll-light i { will-change: auto; }