/*
 * Lyra brand site: the one stylesheet every brand-site page loads. Pages are built only from these `ly-` classes.
 *
 * Voice: Pangaia (upright, never italic) over Montserrat; one accent (Burgundy); Sand hairlines instead of boxes;
 * square buttons; a short Burgundy rule opens each section label.
 */

@font-face {
  font-family: 'Pangaia';
  src: url('/fonts/pp-pangaia/PPPangaia-Ultralight-BF654c530cd00f1.otf') format('opentype');
  font-weight: 200;
  font-style: normal;
  font-display: swap;
}
@font-face {
  font-family: 'Pangaia';
  src: url('/fonts/pp-pangaia/PPPangaia-Medium.otf') format('opentype');
  font-weight: 500;
  font-style: normal;
  font-display: swap;
}

:root {
  --ly-cream: #faf8f5;
  --ly-linen: #f3eee7;
  --ly-sand: #e3dacc;
  --ly-rule: #d8cdbe;
  --ly-accent: #8b3a3a;
  --ly-accent-deep: #6e2c2c;
  --ly-espresso: #2c2a26;
  --ly-night: #232120;
  --ly-ink: #121315;
  /* Body text: a warm dark grey, so paragraphs sit with the tans rather than against them. */
  --ly-graphite: #3f3a35;
  --ly-taupe: #5e5a55;
  --ly-on-dark: #cfc7bc;
  --ly-on-dark-muted: #9d958a;
  --ly-blush: #d9b8a8;
  --ly-bone: #e9dccb;
  --ly-serif: 'Pangaia', Georgia, serif;
  --ly-sans: 'Montserrat', system-ui, sans-serif;
  --ly-gutter: 80px;
}
@media (max-width: 991px) {
  :root {
    --ly-gutter: 40px;
  }
}
@media (max-width: 767px) {
  :root {
    --ly-gutter: 20px;
  }
}

/* ---------------------------------------------------------------- resets */

/*
 * The platform stylesheet (src/app.css) puts Tailwind's preflight in `@layer base` and its utilities in
 * `@layer utilities`. Inside `.lyra-site`, `revert-layer` rolls both back, so this sheet styles against browser defaults
 * (list markers, bold <strong>, images at their attribute size) rather than preflight's. Plain `revert` would also drop
 * `width`/`height` attributes; the doubled class outranks preflight's selectors.
 */
@layer base {
  .lyra-site.lyra-site,
  .lyra-site.lyra-site *,
  .lyra-site.lyra-site ::before,
  .lyra-site.lyra-site ::after {
    all: revert-layer;
  }
}
@layer utilities {
  .lyra-site.lyra-site,
  .lyra-site.lyra-site *,
  .lyra-site.lyra-site ::before,
  .lyra-site.lyra-site ::after {
    all: revert-layer;
  }
}

/* The root <body> is `overflow-hidden select-none` because the listing experience scrolls its own panes. Brand-site
   pages scroll the document and allow selection, and paint Cream to the window edges. This sheet loads only on
   brand-site pages, so the listing pages keep the platform's body. */
body {
  overflow: visible;
  -webkit-user-select: auto;
  user-select: auto;
}
body:has(.lyra-site) {
  background-color: var(--ly-cream);
}

.ly-page {
  position: relative;
  background: var(--ly-cream);
  color: var(--ly-graphite);
  font-family: var(--ly-sans);
  font-size: 16px;
  line-height: 1.7;
  -webkit-font-smoothing: antialiased;
}

.ly-container {
  box-sizing: border-box;
  width: 100%;
  max-width: calc(1280px + 2 * var(--ly-gutter));
  margin: 0 auto;
  padding: 0 var(--ly-gutter);
}

/* ---------------------------------------------------------------- type */

.ly-eyebrow {
  display: flex;
  align-items: center;
  gap: 14px;
  margin: 0;
  font-family: var(--ly-sans);
  font-size: 12px;
  font-weight: 600;
  line-height: 1.4;
  letter-spacing: 0.22em;
  text-transform: uppercase;
  color: var(--ly-accent);
}
.ly-eyebrow::before {
  content: '';
  flex: none;
  width: 32px;
  height: 1px;
  background: currentColor;
}
.ly-eyebrow--on-dark {
  color: var(--ly-blush);
}
.ly-eyebrow--on-photo {
  color: var(--ly-bone);
}

.ly-display,
.ly-h1,
.ly-h2,
.ly-h3 {
  margin: 0;
  font-family: var(--ly-serif);
  font-weight: 200;
  font-style: normal;
  color: var(--ly-espresso);
}
.ly-display {
  max-width: 980px;
  font-size: 88px;
  line-height: 1.02;
  letter-spacing: -0.015em;
}
.ly-h1 {
  font-size: 104px;
  line-height: 1;
  letter-spacing: -0.015em;
}
.ly-h2 {
  font-size: 44px;
  line-height: 1.12;
}
.ly-h3 {
  font-size: 30px;
  line-height: 1.15;
}
.ly-h2--compact {
  font-size: 40px;
}
.ly-title {
  margin: 0;
  font-family: var(--ly-serif);
  font-weight: 500;
  font-size: 26px;
  line-height: 1.25;
  color: var(--ly-espresso);
}
.ly-tagline {
  margin: 0;
  font-family: var(--ly-serif);
  font-weight: 200;
  font-size: 22px;
  line-height: 1.35;
  color: var(--ly-taupe);
}
.ly-lead {
  margin: 0;
  font-size: 18px;
  line-height: 1.7;
}
.ly-body {
  margin: 0;
  font-size: 16px;
  line-height: 1.7;
}
.ly-lead--body {
  font-size: 17px;
  line-height: 1.75;
}
.ly-meta {
  font-size: 12px;
  font-weight: 600;
  letter-spacing: 0.18em;
  text-transform: uppercase;
  color: var(--ly-taupe);
}
.ly-numeral {
  font-family: var(--ly-serif);
  font-weight: 200;
  font-size: 20px;
  line-height: 1;
  color: var(--ly-accent);
}

@media (max-width: 991px) {
  .ly-display {
    font-size: 64px;
  }
  .ly-h1 {
    font-size: 76px;
  }
  .ly-h2,
  .ly-h2--compact {
    font-size: 38px;
  }
  .ly-h3 {
    font-size: 28px;
  }
}
@media (max-width: 767px) {
  .ly-display {
    font-size: 48px;
    line-height: 1.05;
  }
  .ly-h1 {
    font-size: 56px;
  }
  .ly-h2,
  .ly-h2--compact {
    font-size: 32px;
    line-height: 1.15;
  }
  .ly-h3 {
    font-size: 26px;
  }
  .ly-lead {
    font-size: 16px;
  }
  .ly-tagline {
    font-size: 19px;
  }
}

/* ---------------------------------------------------------------- actions */

.ly-actions {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 16px 36px;
}
.ly-actions--tight {
  gap: 16px;
}

.ly-btn {
  box-sizing: border-box;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  height: 52px;
  padding: 0 30px;
  border: 1px solid transparent;
  border-radius: 0;
  font-family: var(--ly-sans);
  font-size: 14px;
  font-weight: 600;
  line-height: 1;
  letter-spacing: 0.06em;
  text-decoration: none;
  white-space: nowrap;
  cursor: pointer;
  transition:
    background-color 0.2s ease,
    color 0.2s ease,
    border-color 0.2s ease;
}
.ly-btn--primary {
  background: var(--ly-accent);
  color: var(--ly-cream);
}
.ly-btn--primary:hover {
  background: var(--ly-accent-deep);
  color: var(--ly-cream);
}
.ly-btn--dark {
  background: var(--ly-espresso);
  color: var(--ly-cream);
}
.ly-btn--dark:hover {
  background: var(--ly-ink);
  color: var(--ly-cream);
}
.ly-btn--outline {
  border-color: var(--ly-espresso);
  color: var(--ly-espresso);
}
.ly-btn--outline:hover {
  background: var(--ly-espresso);
  color: var(--ly-cream);
}
.ly-btn--outline-light {
  border-color: rgb(250 248 245 / 0.7);
  color: var(--ly-cream);
}
.ly-btn--outline-light:hover {
  background: var(--ly-cream);
  color: var(--ly-espresso);
}
.ly-btn--light {
  background: var(--ly-cream);
  color: var(--ly-espresso);
}
.ly-btn--light:hover {
  background: var(--ly-linen);
  color: var(--ly-espresso);
}
.ly-btn--small {
  height: 48px;
  padding: 0 26px;
}

.ly-link {
  display: inline-block;
  padding-bottom: 4px;
  border-bottom: 1px solid currentColor;
  font-size: 14px;
  font-weight: 600;
  letter-spacing: 0.06em;
  color: var(--ly-espresso);
  text-decoration: none;
}
.ly-link:hover {
  color: var(--ly-accent);
}
.ly-arrow-link {
  display: inline-flex;
  align-items: center;
  gap: 8px;
  min-height: 44px;
  font-size: 14px;
  font-weight: 600;
  letter-spacing: 0.06em;
  color: var(--ly-espresso);
  text-decoration: none;
}
.ly-arrow-link:hover {
  color: var(--ly-accent);
}
.ly-arrow-link::after {
  content: '→';
  transition: transform 0.2s ease;
}
.ly-arrow-link:hover::after {
  transform: translateX(4px);
}
/* On the hero photo. */
.ly-arrow-link--light {
  color: var(--ly-cream);
}
.ly-arrow-link--light:hover {
  color: var(--ly-bone);
}

@media (max-width: 767px) {
  .ly-actions--stack-mobile {
    flex-direction: column;
    align-items: stretch;
    align-self: stretch;
  }
  .ly-actions--stack-mobile .ly-btn {
    width: 100%;
  }
  /* A text link under a full-width button: its own 44px height is the spacing. */
  .ly-actions--stack-mobile {
    row-gap: 8px;
  }
}

/* ---------------------------------------------------------------- header */

.ly-header {
  position: sticky;
  top: 0;
  z-index: 20;
  border-bottom: 1px solid var(--ly-sand);
  background: var(--ly-cream);
  color: var(--ly-espresso);
  font-family: var(--ly-sans);
  transition:
    transform 0.35s cubic-bezier(0.2, 0.6, 0.2, 1),
    background-color 0.3s ease,
    color 0.3s ease,
    box-shadow 0.3s ease;
}
/*
 * Over the home hero: fixed from the start, so scrolling back to the top never swaps it between absolute and fixed
 * (which made it jump out of view and scroll back in). Transparent over the photo; Cream once scrolled.
 */
.ly-header--overlay {
  position: fixed;
  inset: 0 0 auto;
  border-bottom-color: rgb(250 248 245 / 0.18);
  background: transparent;
  color: var(--ly-cream);
}
/* Scrolled past: pinned to the top on Cream, with a soft shadow. */
.ly-header--stuck {
  box-shadow: 0 16px 32px -28px rgb(35 33 32 / 0.45);
}
/* The home header turns Cream only while showing, so it slides away still transparent rather than fading in first. */
.ly-header--overlay.ly-header--stuck:not(.ly-header--hidden) {
  border-bottom-color: var(--ly-sand);
  background: var(--ly-cream);
  color: var(--ly-espresso);
}
.ly-header--overlay.ly-header--stuck:not(.ly-header--hidden) .ly-header__brand {
  color: var(--ly-espresso);
}
/* Scrolling down: slid up out of view until the reader scrolls back up. */
.ly-header--hidden {
  transform: translateY(-100%);
}
/* No hairline over the hero photo; it returns with the Cream bar. */
.ly-header--overlay:not(.ly-header--stuck) {
  border-bottom-color: transparent;
}
.ly-header__bar {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 32px;
  height: 96px;
}
.ly-header__brand {
  display: flex;
  align-items: center;
  color: var(--ly-espresso);
  text-decoration: none;
}
.ly-header--overlay .ly-header__brand {
  color: var(--ly-cream);
}
/* The drawn logo, 5969×2112: height sets the size. */
.ly-header__logo {
  display: block;
  width: auto;
  height: 34px;
}
.ly-header__actions {
  display: flex;
  align-items: center;
  gap: 28px;
}
.ly-header__menu-button {
  display: inline-flex;
  align-items: center;
  justify-content: flex-end;
  gap: 12px;
  min-width: 44px;
  height: 44px;
  padding: 0;
  border: 0;
  background: none;
  color: inherit;
  font: inherit;
  font-size: 12px;
  font-weight: 600;
  letter-spacing: 0.18em;
  text-transform: uppercase;
  cursor: pointer;
}
.ly-header__menu-button svg {
  display: block;
  overflow: visible;
}
.ly-header__menu-button path {
  transition: d 0.25s ease;
}
/* The short lower line lengthens on hover. */
.ly-header__menu-button:hover path {
  d: path('M0 1.5h28M0 10.5h28');
}

@media (max-width: 991px) {
  .ly-header__bar {
    height: 72px;
  }
  .ly-header__logo {
    height: 32px;
  }
}
/*
 * A phone gives the room to the logo: just the wordmark and Menu. Contact us drops out; the menu's "Send an inquiry"
 * and the contact band on every page cover it.
 */
@media (max-width: 767px) {
  .ly-header__bar {
    height: 64px;
  }
  .ly-header__cta {
    display: none;
  }
}

/*
 * Menu: a deep Burgundy panel over the right half of the page (all of it on a phone), with the page dimmed behind.
 * The wordmark and a "Close" button head it; the links sit at the foot of the panel, Services with its pages listed
 * beneath, and rise in one after another as it opens.
 *
 *   +---------------------+---------------------+
 *   |                     | Lyra        Close x |
 *   |   page, dimmed      |                     |
 *   |                     | Home                |
 *   |                     | Services            |
 *   |                     |   New Development   |
 *   |                     | Case studies ...    |
 *   |                     | ------------------- |
 *   |                     | [Send an inquiry]   |
 *   +---------------------+---------------------+
 */
.ly-menu {
  --ly-menu-bg: #3d1a1a;
  position: fixed;
  inset: 0;
  z-index: 50;
  display: flex;
  justify-content: flex-end;
  visibility: hidden;
  transition: visibility 0s linear 0.45s;
}
.ly-menu[data-open='true'] {
  visibility: visible;
  transition: visibility 0s;
}
.ly-menu__scrim {
  position: absolute;
  inset: 0;
  background: rgb(18 19 21 / 0.4);
  opacity: 0;
  transition: opacity 0.45s ease;
}
.ly-menu[data-open='true'] .ly-menu__scrim {
  opacity: 1;
}
.ly-menu__panel {
  position: relative;
  box-sizing: border-box;
  display: flex;
  flex-direction: column;
  width: max(50vw, 560px);
  max-width: 100%;
  height: 100%;
  overflow-y: auto;
  padding: 28px var(--ly-gutter) 48px 64px;
  background: var(--ly-menu-bg);
  color: var(--ly-cream);
  font-family: var(--ly-sans);
  transform: translateX(100%);
  transition: transform 0.45s cubic-bezier(0.65, 0, 0.35, 1);
}
.ly-menu[data-open='true'] .ly-menu__panel {
  transform: translateX(0);
}
.ly-menu__top {
  display: flex;
  align-items: center;
  justify-content: space-between;
}
.ly-menu__brand {
  display: flex;
  color: var(--ly-cream);
}
.ly-menu__logo {
  display: block;
  width: auto;
  height: 30px;
}
.ly-menu__close {
  display: inline-flex;
  align-items: center;
  gap: 12px;
  height: 44px;
  padding: 0;
  border: 0;
  background: none;
  color: var(--ly-on-dark);
  font: inherit;
  font-size: 11px;
  font-weight: 600;
  letter-spacing: 0.2em;
  text-transform: uppercase;
  cursor: pointer;
  transition: color 0.2s ease;
}
.ly-menu__close:hover {
  color: var(--ly-cream);
}
.ly-menu__nav {
  margin-top: auto;
  padding-top: 64px;
}
.ly-menu__links,
.ly-menu__sub {
  margin: 0;
  padding: 0;
  list-style: none;
}
.ly-menu__links {
  display: flex;
  flex-direction: column;
  gap: 6px;
}
.ly-menu__link {
  display: inline-block;
  font-family: var(--ly-serif);
  font-weight: 200;
  font-size: 44px;
  line-height: 1.15;
  color: var(--ly-cream);
  text-decoration: none;
  transition:
    color 0.2s ease,
    transform 0.3s ease;
}
.ly-menu__link:hover {
  color: var(--ly-bone);
  transform: translateX(6px);
}
.ly-menu__link[aria-current='page'] {
  color: var(--ly-blush);
}
/* Services' pages: small sans type under their serif heading, set in from it like a sub-list. */
.ly-menu__sub {
  display: flex;
  flex-direction: column;
  gap: 2px;
  margin: 6px 0 14px;
  padding-left: 2px;
}
.ly-menu__sub a {
  display: inline-block;
  padding: 5px 0;
  font-size: 14px;
  font-weight: 400;
  letter-spacing: 0.02em;
  color: var(--ly-on-dark);
  text-decoration: none;
  transition: color 0.2s ease;
}
.ly-menu__sub a:hover,
.ly-menu__sub a[aria-current='page'] {
  color: var(--ly-cream);
}
.ly-menu__foot {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 16px 32px;
  margin-top: 48px;
  padding-top: 32px;
  border-top: 1px solid rgb(250 248 245 / 0.14);
}
.ly-menu__email {
  font-size: 14px;
  font-weight: 400;
  color: var(--ly-on-dark);
  text-decoration: underline;
  text-decoration-color: rgb(250 248 245 / 0.3);
  text-underline-offset: 5px;
}
.ly-menu__email:hover {
  color: var(--ly-cream);
}
/* Staggered entrance: each item rises 12px and fades in, 50 ms after the one before. */
.ly-menu__item,
.ly-menu__foot {
  opacity: 0;
  transform: translateY(12px);
  transition:
    opacity 0.4s ease,
    transform 0.4s ease;
}
.ly-menu[data-open='true'] :is(.ly-menu__item, .ly-menu__foot) {
  opacity: 1;
  transform: none;
}
.ly-menu[data-open='true'] .ly-menu__item:nth-child(1) {
  transition-delay: 0.15s;
}
.ly-menu[data-open='true'] .ly-menu__item:nth-child(2) {
  transition-delay: 0.2s;
}
.ly-menu[data-open='true'] .ly-menu__item:nth-child(3) {
  transition-delay: 0.25s;
}
.ly-menu[data-open='true'] .ly-menu__item:nth-child(4) {
  transition-delay: 0.3s;
}
.ly-menu[data-open='true'] .ly-menu__item:nth-child(5) {
  transition-delay: 0.35s;
}
.ly-menu[data-open='true'] .ly-menu__item:nth-child(6) {
  transition-delay: 0.4s;
}
.ly-menu[data-open='true'] .ly-menu__item:nth-child(7) {
  transition-delay: 0.45s;
}
.ly-menu[data-open='true'] .ly-menu__foot {
  transition-delay: 0.5s;
}
/*
 * On a phone the menu is the whole screen and never scrolls: rows, type and spacing scale with the visible height
 * (dvh, so the browser's own bars are left out), from 40px link rows on a 568px screen up to 52px on a tall one.
 */
@media (max-width: 767px) {
  .ly-menu {
    height: 100dvh;
  }
  .ly-menu__panel {
    width: 100%;
    padding: 10px var(--ly-gutter) clamp(16px, 3dvh, 28px);
  }
  .ly-menu__logo {
    height: 32px;
  }
  .ly-menu__nav {
    padding-top: clamp(8px, 3dvh, 40px);
  }
  .ly-menu__links {
    gap: 0;
  }
  .ly-menu__link {
    display: flex;
    align-items: center;
    min-height: clamp(40px, 7dvh, 52px);
    font-size: clamp(30px, 5dvh, 36px);
    line-height: 1;
  }
  .ly-menu__sub {
    display: grid;
    grid-template-columns: repeat(2, minmax(0, 1fr));
    gap: 0 16px;
    margin: 0 0 8px;
    padding-left: 0;
  }
  .ly-menu__sub a {
    display: flex;
    align-items: center;
    min-height: clamp(34px, 5.5dvh, 44px);
    padding: 0;
    font-size: 13px;
    font-weight: 500;
  }
  .ly-menu__foot {
    flex-direction: column;
    align-items: stretch;
    gap: 12px;
    margin-top: clamp(12px, 2.5dvh, 20px);
    padding-top: clamp(12px, 2.5dvh, 20px);
  }
  .ly-menu__foot .ly-btn {
    width: 100%;
  }
  .ly-menu__email {
    align-self: flex-start;
    font-size: 13px;
  }
}

/* ---------------------------------------------------------------- sections */

.ly-section {
  padding: 120px 0;
}
.ly-section--linen {
  background: var(--ly-linen);
}
.ly-section--tight-top {
  padding-top: 0;
}
.ly-section__head {
  display: flex;
  flex-direction: column;
  gap: 24px;
  margin-bottom: 56px;
}
@media (max-width: 767px) {
  .ly-section {
    padding: 72px 0;
  }
  .ly-section__head {
    gap: 18px;
    margin-bottom: 36px;
  }
}

/* Two columns on a 12-track grid: heading on the left, copy on the right. */
.ly-split {
  display: grid;
  grid-template-columns: repeat(12, minmax(0, 1fr));
  column-gap: 24px;
  row-gap: 32px;
}
.ly-split__head {
  grid-column: 1 / span 5;
  display: flex;
  flex-direction: column;
  gap: 24px;
}
.ly-split__body {
  grid-column: 7 / span 6;
  display: flex;
  flex-direction: column;
  gap: 24px;
}
@media (max-width: 991px) {
  .ly-split__head,
  .ly-split__body {
    grid-column: 1 / -1;
  }
}

/* ---------------------------------------------------------------- home */

.ly-hero {
  position: relative;
  display: flex;
  min-height: 860px;
  overflow: hidden;
  background: var(--ly-espresso);
}
.ly-hero__media {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  object-fit: cover;
}
/*
 * Shade sized for legibility over the photo's brightest glass and haze. White text needs 4.5:1 at the lead's size and
 * 3:1 at the headline's, which takes about 75% shade behind the lead and 57% behind the headline. So: an even tint over
 * the whole photo, a fall from the left under the copy, and a rise from the bottom under the lead and buttons.
 *
 *   combined shade      headline, right end ~60%   lead ~76%   open view, top right ~34%
 */
.ly-hero__scrim {
  position: absolute;
  inset: 0;
  background:
    linear-gradient(90deg, rgb(20 18 16 / 0.55) 0%, rgb(20 18 16 / 0.35) 50%, rgb(20 18 16 / 0) 80%),
    linear-gradient(0deg, rgb(20 18 16 / 0.6) 0%, rgb(20 18 16 / 0) 55%), rgb(20 18 16 / 0.32);
}
@media (max-width: 767px) {
  /* The copy spans the full width on a phone, so the shade rises evenly from the bottom over the same base tint. */
  .ly-hero__scrim {
    background:
      linear-gradient(0deg, rgb(20 18 16 / 0.85) 0%, rgb(20 18 16 / 0.55) 50%, rgb(20 18 16 / 0) 80%),
      rgb(20 18 16 / 0.3);
  }
}
.ly-hero__content {
  position: relative;
  display: flex;
  flex-direction: column;
  justify-content: flex-end;
  align-self: stretch;
  padding-top: 160px;
  padding-bottom: 112px;
}
/* The eyebrow drops its rule over the photo: one line fewer in the composition. */
.ly-hero .ly-eyebrow {
  font-size: 11px;
  letter-spacing: 0.2em;
}
.ly-hero .ly-eyebrow::before {
  display: none;
}
/* Balanced lines: on a phone "High-fidelity / residential / real estate", not a lone "estate" on the last line. */
.ly-hero__content .ly-display {
  max-width: 760px;
  margin-top: 24px;
  font-size: 72px;
  line-height: 1.04;
  color: var(--ly-cream);
  text-wrap: balance;
}
.ly-hero__lead {
  max-width: 440px;
  margin: 24px 0 0;
  font-size: 17px;
  line-height: 1.6;
  color: rgb(250 248 245 / 0.9);
}
.ly-hero__content .ly-actions {
  margin-top: 40px;
}
@media (max-width: 991px) {
  .ly-hero__content .ly-display {
    font-size: 60px;
  }
}
@media (max-width: 767px) {
  /* A screen tall, less a sliver of the stats band below, so the page reads as scrollable. */
  .ly-hero {
    min-height: 720px;
    min-height: calc(100svh - 56px);
  }
  .ly-hero__content {
    padding-top: 120px;
    padding-bottom: 40px;
  }
  .ly-hero .ly-eyebrow {
    font-size: 10px;
    letter-spacing: 0.14em;
  }
  .ly-hero__content .ly-display {
    margin-top: 16px;
    font-size: 40px;
    line-height: 1.06;
  }
  .ly-hero__lead {
    margin-top: 16px;
    font-size: 15px;
  }
  .ly-hero__content .ly-actions {
    margin-top: 28px;
  }
}

.ly-stats {
  border-bottom: 1px solid var(--ly-sand);
  background: var(--ly-linen);
}
/*
 * Three figures read as one set, not three islands: the grid is held to 960px, centred in the full-width Linen band,
 * so each cell is ~320px around a ~130px figure rather than ~430px at 1440 wide.
 */
.ly-stats__grid {
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  max-width: calc(960px + 2 * var(--ly-gutter));
  /* A <dl>: drop its default margin but keep the container's auto centering on wide screens. */
  margin: 0 auto;
}
.ly-stat {
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  gap: 10px;
  min-height: 176px;
  border-left: 1px solid var(--ly-sand);
  text-align: center;
}
.ly-stat:first-child {
  border-left: 0;
}
.ly-stat dt {
  order: 2;
  font-size: 13px;
  font-weight: 500;
  letter-spacing: 0.14em;
  text-transform: uppercase;
  color: var(--ly-taupe);
}
.ly-stat dd {
  order: 1;
  margin: 0;
  font-family: var(--ly-serif);
  font-weight: 200;
  font-size: 48px;
  line-height: 1;
  color: var(--ly-espresso);
}
/* Three centered columns at every width; on a phone they tighten into one short band, labels on two lines. */
@media (max-width: 767px) {
  .ly-stat {
    min-height: 0;
    gap: 8px;
    padding: 22px 4px;
  }
  .ly-stat dt {
    font-size: 10px;
    font-weight: 600;
    line-height: 1.4;
    letter-spacing: 0.12em;
    text-wrap: balance;
  }
  .ly-stat dd {
    font-size: 30px;
  }
}

/*
 * Clients: one band between hairlines. The label sits left; the names drift right-to-left in a single row that fades
 * at both edges and pauses under the pointer. The track holds the list twice, so shifting it by half loops seamlessly.
 */
.ly-clients {
  border-top: 1px solid var(--ly-sand);
  border-bottom: 1px solid var(--ly-sand);
}
.ly-clients__inner {
  display: grid;
  grid-template-columns: auto minmax(0, 1fr);
  align-items: center;
  column-gap: 48px;
  padding-top: 36px;
  padding-bottom: 36px;
}
.ly-clients__label {
  margin: 0;
  /* Two balanced lines: "Trusted by Los Angeles / developers and owners". */
  max-width: 220px;
  text-wrap: balance;
  font-size: 11px;
  font-weight: 600;
  letter-spacing: 0.18em;
  line-height: 1.7;
  text-transform: uppercase;
  color: var(--ly-taupe);
}
.ly-clients__marquee {
  overflow: hidden;
  mask-image: linear-gradient(90deg, transparent, #000 10%, #000 90%, transparent);
}
.ly-clients__track {
  display: flex;
  width: max-content;
  animation: ly-marquee 48s linear infinite;
}
.ly-clients__marquee:hover .ly-clients__track {
  animation-play-state: paused;
}
.ly-clients__names {
  display: flex;
  align-items: center;
  margin: 0;
  padding: 0;
  list-style: none;
}
.ly-clients__names li {
  display: flex;
  align-items: center;
  font-family: var(--ly-serif);
  font-weight: 200;
  font-size: 26px;
  line-height: 1.2;
  white-space: nowrap;
  color: var(--ly-espresso);
}
/* A small Burgundy dot between names, echoing the mark. */
.ly-clients__names li::after {
  content: '';
  width: 4px;
  height: 4px;
  margin: 0 36px;
  border-radius: 50%;
  background: var(--ly-accent);
  opacity: 0.6;
}
@keyframes ly-marquee {
  to {
    transform: translateX(-50%);
  }
}
@media (max-width: 767px) {
  .ly-clients__inner {
    grid-template-columns: minmax(0, 1fr);
    row-gap: 16px;
    padding-top: 28px;
    padding-bottom: 28px;
  }
  .ly-clients__label {
    max-width: none;
  }
  .ly-clients__names li {
    font-size: 21px;
  }
}
/* Reduced motion: no drift; the names wrap in place and the hidden copy goes. */
@media (prefers-reduced-motion: reduce) {
  .ly-clients__marquee {
    mask-image: none;
  }
  .ly-clients__track {
    width: auto;
    animation: none;
  }
  .ly-clients__names {
    flex-wrap: wrap;
    row-gap: 8px;
  }
  .ly-clients__names[aria-hidden='true'] {
    display: none;
  }
}

.ly-services {
  margin: 0;
  padding: 0;
  list-style: none;
  border-bottom: 1px solid var(--ly-rule);
}
.ly-service {
  display: grid;
  grid-template-columns: 96px minmax(0, 1fr) 460px;
  column-gap: 48px;
  align-items: center;
  padding: 32px 0;
  border-top: 1px solid var(--ly-rule);
}
.ly-service .ly-numeral {
  align-self: start;
  padding-top: 8px;
}
.ly-service__copy {
  display: flex;
  flex-direction: column;
  gap: 14px;
}
.ly-service__copy .ly-body {
  max-width: 560px;
}
.ly-service__copy .ly-arrow-link {
  margin-top: 8px;
}
.ly-service__image {
  display: block;
  width: 100%;
  aspect-ratio: 460 / 236;
  object-fit: cover;
}
/* Shown only by the compact list on a phone. */
.ly-service__tagline {
  display: none;
  margin: 0;
  font-size: 13px;
  line-height: 1.45;
  color: var(--ly-taupe);
}
@media (max-width: 991px) {
  .ly-service {
    grid-template-columns: 64px minmax(0, 1fr);
    row-gap: 24px;
  }
  .ly-service__image {
    grid-column: 2;
  }
}
@media (max-width: 767px) {
  .ly-service {
    display: flex;
    flex-direction: column;
    align-items: stretch;
    gap: 12px;
    padding: 28px 0 32px;
  }
  .ly-service__image {
    order: -1;
    aspect-ratio: 350 / 180;
  }
  .ly-service .ly-numeral {
    padding-top: 8px;
    font-size: 18px;
  }
  /*
   * The compact list (home page): each service one tappable row, the photo a thumbnail beside its number, title and
   * tagline. The summary waits for the service page.
   *
   *   +-------+  01
   *   | photo |  New Development                 ->
   *   +-------+  Fill faster. Launch stronger.
   */
  .ly-services--compact .ly-service {
    position: relative;
    display: grid;
    grid-template-columns: 88px minmax(0, 1fr) 16px;
    column-gap: 16px;
    row-gap: 4px;
    align-content: center;
    padding: 16px 0;
  }
  .ly-services--compact .ly-service__copy {
    display: contents;
  }
  .ly-services--compact .ly-service__image {
    grid-column: 1;
    grid-row: 1 / span 3;
    width: 88px;
    height: 88px;
    aspect-ratio: auto;
  }
  .ly-services--compact .ly-numeral {
    grid-column: 2;
    grid-row: 1;
    padding-top: 0;
    font-size: 13px;
  }
  .ly-services--compact .ly-h3 {
    grid-column: 2;
    grid-row: 2;
    font-size: 24px;
    line-height: 1.1;
  }
  .ly-services--compact .ly-service__tagline {
    display: block;
    grid-column: 2;
    grid-row: 3;
  }
  .ly-services--compact .ly-body {
    display: none;
  }
  /* The row's one link: only its arrow shows, at the right, and its hit area stretches over the whole row. */
  .ly-services--compact .ly-arrow-link {
    grid-column: 3;
    grid-row: 1 / span 3;
    min-height: 0;
    margin: 0;
    gap: 0;
    font-size: 0;
    color: var(--ly-taupe);
  }
  .ly-services--compact .ly-arrow-link::after {
    font-size: 16px;
  }
  .ly-services--compact .ly-arrow-link::before {
    content: '';
    position: absolute;
    inset: 0;
  }
}

.ly-feature-split {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  /* Ruled top and bottom: it sits between two Cream sections, so the lines are what frame it. */
  border-top: 1px solid var(--ly-sand);
  border-bottom: 1px solid var(--ly-sand);
  background: var(--ly-cream);
}
.ly-feature-split__image {
  display: block;
  width: 100%;
  height: 100%;
  min-height: 700px;
  object-fit: cover;
}
.ly-feature-split__copy {
  display: flex;
  flex-direction: column;
  justify-content: center;
  gap: 28px;
  padding: 96px 96px 96px 88px;
}
.ly-feature-split__copy .ly-actions {
  margin-top: 8px;
}
@media (max-width: 991px) {
  .ly-feature-split {
    grid-template-columns: minmax(0, 1fr);
  }
  .ly-feature-split__image {
    min-height: 0;
    aspect-ratio: 4 / 3;
  }
  .ly-feature-split__copy {
    padding: 72px var(--ly-gutter);
  }
}

.ly-article-card {
  display: grid;
  grid-template-columns: 560px minmax(0, 1fr);
  border: 1px solid var(--ly-sand);
  background: #fff;
  color: inherit;
  text-decoration: none;
  transition: border-color 0.2s ease;
}
.ly-article-card:hover {
  border-color: var(--ly-rule);
}
.ly-article-card__image {
  display: block;
  width: 100%;
  height: 100%;
  min-height: 320px;
  object-fit: cover;
}
.ly-article-card__copy {
  display: flex;
  flex-direction: column;
  gap: 18px;
  padding: 48px 56px;
}
.ly-article-card__meta {
  display: flex;
  gap: 16px;
}
.ly-article-card__meta span:first-child {
  color: var(--ly-accent);
}
.ly-article-card__copy .ly-h3 {
  font-size: 30px;
  line-height: 1.2;
}
.ly-article-card__copy .ly-arrow-link {
  margin-top: auto;
}
.ly-article-card:hover .ly-arrow-link {
  color: var(--ly-accent);
}
.ly-article-card + .ly-link {
  margin-top: 32px;
}
@media (max-width: 991px) {
  .ly-article-card {
    grid-template-columns: minmax(0, 1fr);
  }
  .ly-article-card__image {
    min-height: 0;
    aspect-ratio: 16 / 9;
  }
  .ly-article-card__copy {
    padding: 32px 28px;
  }
  .ly-article-card__copy .ly-h3 {
    font-size: 26px;
  }
}

.ly-about__head {
  grid-column: 1 / span 6;
}
.ly-about__body {
  grid-column: 8 / span 5;
  align-items: flex-start;
  padding-top: 44px;
}
.ly-feature-split .ly-body {
  font-size: 17px;
}
.ly-article-card__meta {
  margin: 0;
}
.ly-article-card__summary {
  max-width: 520px;
}
@media (max-width: 991px) {
  .ly-about__head,
  .ly-about__body {
    grid-column: 1 / -1;
  }
  .ly-about__body {
    padding-top: 0;
  }
}

/* ---------------------------------------------------------------- service pages */

.ly-page-hero {
  padding: 88px 0 72px;
}
.ly-page-hero__inner {
  display: flex;
  flex-direction: column;
  align-items: flex-start;
  gap: 24px;
}
.ly-page-hero .ly-tagline {
  font-size: 30px;
}
.ly-page-hero .ly-actions {
  margin-top: 16px;
}
.ly-page-hero__lead {
  max-width: 640px;
  margin: 8px 0 0;
  font-size: 18px;
  line-height: 1.7;
}
@media (max-width: 767px) {
  .ly-page-hero {
    padding: 56px 0 48px;
  }
  .ly-page-hero .ly-tagline {
    font-size: 22px;
  }
}

.ly-breadcrumb {
  display: flex;
  flex-wrap: wrap;
  gap: 12px;
  margin: 0;
  padding: 0;
  list-style: none;
  font-size: 12px;
  font-weight: 600;
  letter-spacing: 0.22em;
  text-transform: uppercase;
  color: var(--ly-taupe);
}
.ly-breadcrumb a {
  color: inherit;
  text-decoration: none;
}
.ly-breadcrumb a:hover {
  color: var(--ly-accent);
}
.ly-breadcrumb li + li::before {
  content: '/';
  margin-right: 12px;
}
.ly-breadcrumb [aria-current='page'] {
  color: var(--ly-accent);
}

.ly-wide-image {
  display: block;
  width: 100%;
  aspect-ratio: 1280 / 560;
  object-fit: cover;
}
@media (max-width: 767px) {
  .ly-wide-image {
    aspect-ratio: 4 / 3;
  }
}

.ly-steps {
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  column-gap: 48px;
  row-gap: 40px;
  margin: 0;
  padding: 0;
  list-style: none;
}
.ly-step {
  display: flex;
  flex-direction: column;
  gap: 16px;
  padding-top: 28px;
  border-top: 1px solid var(--ly-espresso);
}
@media (max-width: 991px) {
  .ly-steps {
    grid-template-columns: minmax(0, 1fr);
  }
}

/* ---- case studies: the case-study page's figures and fact sheet */

/* The outcome on a case-study page: serif, set off by a Burgundy rule. */
.ly-case__result {
  margin: 0 0 8px;
  padding-left: 16px;
  border-left: 1px solid var(--ly-accent);
  font-family: var(--ly-serif);
  font-weight: 500;
  font-size: 26px;
  line-height: 1.35;
  color: var(--ly-espresso);
}
.ly-cases-link {
  margin-top: 48px;
}

/* One row per discipline: its work on the left, a link to the service on the right, over a hairline. */
.ly-cases-group__head {
  display: flex;
  flex-wrap: wrap;
  align-items: baseline;
  justify-content: space-between;
  gap: 8px 24px;
  margin-bottom: 32px;
  padding-bottom: 16px;
  border-bottom: 1px solid var(--ly-rule);
}

.ly-case-stats {
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  column-gap: 24px;
  margin: 56px auto 0;
}
.ly-case-stats__item {
  display: flex;
  flex-direction: column-reverse;
  gap: 8px;
  padding-top: 20px;
  border-top: 1px solid var(--ly-rule);
}
.ly-case-stats dt {
  font-size: 12px;
  font-weight: 600;
  letter-spacing: 0.18em;
  text-transform: uppercase;
  color: var(--ly-taupe);
}
.ly-case-stats dd {
  margin: 0;
  font-family: var(--ly-serif);
  font-weight: 200;
  font-size: 56px;
  line-height: 1;
  color: var(--ly-espresso);
}

/* Label left, value right, hairline between rows. */
.ly-case__facts {
  margin: 0;
  border-top: 1px solid var(--ly-rule);
}
.ly-case__facts div {
  display: grid;
  grid-template-columns: 112px minmax(0, 1fr);
  gap: 16px;
  padding: 14px 0;
  border-bottom: 1px solid var(--ly-rule);
  font-size: 14px;
  line-height: 1.5;
}
.ly-case__facts dt {
  font-size: 11px;
  font-weight: 600;
  letter-spacing: 0.16em;
  line-height: 1.9;
  text-transform: uppercase;
  color: var(--ly-taupe);
}
.ly-case__facts dd {
  margin: 0;
  color: var(--ly-graphite);
}
@media (max-width: 767px) {
  .ly-case-stats {
    grid-template-columns: minmax(0, 1fr);
    row-gap: 24px;
    margin-top: 40px;
  }
  .ly-case-stats dd {
    font-size: 44px;
  }
}

.ly-faq {
  display: grid;
  grid-template-columns: repeat(12, minmax(0, 1fr));
  column-gap: 24px;
  row-gap: 40px;
}
.ly-faq__intro {
  grid-column: 1 / span 4;
  display: flex;
  flex-direction: column;
  align-items: flex-start;
  gap: 24px;
}
.ly-faq__list {
  grid-column: 6 / span 7;
  margin: 0;
  padding: 0;
  list-style: none;
  border-bottom: 1px solid var(--ly-rule);
}
.ly-faq__item {
  border-top: 1px solid var(--ly-rule);
}
.ly-faq__item[data-open='true'] {
  border-top-color: var(--ly-espresso);
}
.ly-faq__heading {
  margin: 0;
  font: inherit;
}
.ly-faq__question {
  display: flex;
  width: 100%;
  align-items: center;
  justify-content: space-between;
  gap: 24px;
  margin: 0;
  padding: 28px 0;
  border: 0;
  background: none;
  cursor: pointer;
  font-family: var(--ly-serif);
  font-weight: 500;
  font-size: 24px;
  line-height: 1.3;
  text-align: left;
  color: var(--ly-espresso);
}
.ly-faq__question:hover {
  color: var(--ly-accent);
}
.ly-faq__icon {
  flex: none;
  color: var(--ly-espresso);
}
.ly-faq__item[data-open='true'] .ly-faq__icon {
  color: var(--ly-accent);
}
.ly-faq__icon-bar {
  transform-origin: center;
  transition: transform 0.3s ease;
}
.ly-faq__item[data-open='true'] .ly-faq__icon-bar {
  transform: scaleY(0);
}
.ly-faq__answer {
  max-width: 620px;
  margin: -8px 0 0;
  padding-bottom: 32px;
  font-size: 16px;
  line-height: 1.75;
}
@media (max-width: 991px) {
  .ly-faq__intro,
  .ly-faq__list {
    grid-column: 1 / -1;
  }
}
@media (max-width: 767px) {
  .ly-faq__question {
    padding: 22px 0;
    font-size: 20px;
  }
}

/* ---------------------------------------------------------------- cards */

/*
 * Every collection item (case studies, articles, closed sales, completed leases) is one card: a white panel on a Sand
 * hairline, the photo flush on top, the copy padded below. Cards in a row stretch to the tallest, and a linked card
 * lifts on hover.
 *
 *   ┌───────────────┐
 *   │     photo     │
 *   ├───────────────┤
 *   │ KICKER        │
 *   │ Title         │
 *   │ …             │
 *   │ Read more →   │
 *   └───────────────┘
 */
.ly-card-grid {
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  gap: 32px;
  margin: 0;
  padding: 0;
  list-style: none;
}
.ly-card-grid--after-feature {
  margin-top: 32px;
}
.ly-card {
  display: flex;
  flex-direction: column;
  border: 1px solid var(--ly-sand);
  background: #fff;
  transition:
    border-color 0.3s ease,
    box-shadow 0.3s ease,
    transform 0.3s ease;
}
.ly-card:has(.ly-card__link:hover) {
  border-color: var(--ly-rule);
  box-shadow: 0 24px 48px -32px rgb(35 33 32 / 0.35);
  transform: translateY(-2px);
}
.ly-card__link {
  display: flex;
  flex: 1;
  flex-direction: column;
  color: inherit;
  text-decoration: none;
}
.ly-card__media {
  display: flex;
  align-items: center;
  justify-content: center;
  aspect-ratio: 3 / 2;
  overflow: hidden;
  background: var(--ly-linen);
}
.ly-card__media img {
  display: block;
  width: 100%;
  height: 100%;
  object-fit: cover;
  transition: transform 0.8s cubic-bezier(0.2, 0.6, 0.2, 1);
}
.ly-card__link:hover .ly-card__media img {
  transform: scale(1.04);
}
/* No photo to show: a Burgundy line icon on Linen, framed like the photos. */
.ly-card__icon {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 64px;
  height: 64px;
  border: 1px solid var(--ly-rule);
  color: var(--ly-accent);
}
.ly-card__body {
  display: flex;
  flex: 1;
  flex-direction: column;
  gap: 12px;
  padding: 28px 28px 32px;
}
.ly-card__kicker {
  margin: 0;
  color: var(--ly-accent);
}
.ly-card .ly-title {
  transition: color 0.2s ease;
}
.ly-card__link:hover .ly-title {
  color: var(--ly-accent);
}
/* "Read more" sits at the foot of the card, level across a row. */
.ly-card__more {
  margin-top: auto;
  padding-top: 8px;
}
.ly-card__link:hover .ly-card__more {
  color: var(--ly-accent);
}
/* A price or rent, set large. */
.ly-card__figure {
  margin: 0;
  font-family: var(--ly-serif);
  font-weight: 200;
  font-size: 32px;
  line-height: 1.1;
  color: var(--ly-espresso);
}
.ly-card__figure span {
  margin-left: 4px;
  font-family: var(--ly-sans);
  font-size: 13px;
  color: var(--ly-taupe);
}
.ly-card__facts {
  display: flex;
  flex-direction: column;
  gap: 8px;
  margin: 4px 0 0;
  padding: 0;
  list-style: none;
  font-size: 14px;
  line-height: 1.4;
  color: var(--ly-graphite);
}
.ly-card__facts li {
  display: flex;
  align-items: center;
  gap: 10px;
}
.ly-card__facts svg {
  flex: none;
  color: var(--ly-accent);
}
@media (max-width: 991px) {
  .ly-card-grid {
    grid-template-columns: repeat(2, minmax(0, 1fr));
  }
}
@media (max-width: 767px) {
  .ly-card-grid {
    grid-template-columns: minmax(0, 1fr);
    gap: 24px;
  }
  .ly-card__body {
    padding: 24px 22px 28px;
  }
}

/* ---------------------------------------------------------------- blog */

.ly-post__title {
  max-width: 960px;
  font-size: 72px;
  line-height: 1.05;
}
@media (max-width: 991px) {
  .ly-post__title {
    font-size: 56px;
  }
}
@media (max-width: 767px) {
  .ly-post__title {
    font-size: 40px;
    line-height: 1.1;
  }
}

/* Rich-text bodies (blog posts, legal pages; repo-owned HTML): one reading column, ~70 characters wide. */
.ly-prose {
  max-width: 720px;
  font-size: 17px;
  line-height: 1.8;
  color: var(--ly-graphite);
}
.ly-prose > * {
  margin: 0;
}
.ly-prose > * + * {
  margin-top: 24px;
}
.ly-prose h2,
.ly-prose h3,
.ly-prose h4 {
  font-family: var(--ly-serif);
  color: var(--ly-espresso);
}
.ly-prose h2 {
  font-weight: 200;
  font-size: 40px;
  line-height: 1.15;
}
.ly-prose h3,
.ly-prose h4 {
  font-weight: 500;
  font-size: 26px;
  line-height: 1.25;
}
.ly-prose > * + h2,
.ly-prose > * + h3,
.ly-prose > * + h4 {
  margin-top: 56px;
}
.ly-prose strong {
  font-weight: 600;
  color: var(--ly-espresso);
}
.ly-prose a {
  color: var(--ly-accent);
  text-decoration: underline;
  text-underline-offset: 4px;
}
.ly-prose ul,
.ly-prose ol {
  padding-left: 22px;
}
.ly-prose li + li {
  margin-top: 12px;
}
.ly-prose li::marker {
  color: var(--ly-accent);
}
@media (max-width: 767px) {
  .ly-prose {
    font-size: 16px;
  }
  .ly-prose h2 {
    font-size: 32px;
  }
  .ly-prose h3,
  .ly-prose h4 {
    font-size: 22px;
  }
}

/* ---------------------------------------------------------------- people (agents, leadership) */

/*
 * Portrait cards. The caption is exactly two single-line rows — name, then licence or title — with an arrow that slides
 * in on hover, so every card in a row ends at the same line.
 *
 *   ┌──────────────┐
 *   │   portrait   │
 *   └──────────────┘
 *   ─────────────────
 *   Marie Tomas     ↗
 *   DRE #02198686
 */
.ly-people {
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  gap: 64px 32px;
  margin: 0;
  padding: 0;
  list-style: none;
}
.ly-person__link {
  display: flex;
  flex-direction: column;
  gap: 20px;
  color: inherit;
  text-decoration: none;
}
.ly-person__frame {
  display: block;
  overflow: hidden;
  background: var(--ly-sand);
}
.ly-person__photo {
  display: block;
  width: 100%;
  aspect-ratio: 4 / 5;
  object-fit: cover;
  object-position: 50% 20%;
  transition: transform 0.8s cubic-bezier(0.2, 0.6, 0.2, 1);
}
.ly-person__link:hover .ly-person__photo {
  transform: scale(1.04);
}
/* An agent with no headshot or avatar: their initials, set in the display serif on the frame's sand. */
.ly-person__initials,
.ly-agent-profile__initials {
  display: flex;
  align-items: center;
  justify-content: center;
  font-family: var(--ly-serif);
  font-size: clamp(56px, 8vw, 96px);
  line-height: 1;
  letter-spacing: 0.02em;
  color: var(--ly-taupe);
  background: var(--ly-sand);
  user-select: none;
}
.ly-person__initials {
  width: 100%;
  aspect-ratio: 4 / 5;
}
.ly-person__caption {
  display: grid;
  grid-template-columns: minmax(0, 1fr) auto;
  column-gap: 12px;
  row-gap: 6px;
  padding-top: 16px;
  border-top: 1px solid var(--ly-rule);
  transition: border-color 0.3s ease;
}
.ly-person__link:hover .ly-person__caption {
  border-color: var(--ly-accent);
}
.ly-person__name,
.ly-person__meta {
  grid-column: 1;
  overflow: hidden;
  white-space: nowrap;
  text-overflow: ellipsis;
}
.ly-person__name {
  margin: 0;
  font-family: var(--ly-serif);
  font-weight: 200;
  font-size: 24px;
  line-height: 1.2;
  color: var(--ly-espresso);
  transition: color 0.2s ease;
}
.ly-person__link:hover .ly-person__name {
  color: var(--ly-accent);
}
.ly-person__meta {
  font-size: 11px;
  font-weight: 600;
  letter-spacing: 0.16em;
  line-height: 1.6;
  text-transform: uppercase;
  color: var(--ly-taupe);
}
.ly-person__arrow {
  grid-column: 2;
  grid-row: 1 / span 2;
  align-self: center;
  color: var(--ly-accent);
  opacity: 0;
  transform: translate(-6px, 6px);
  transition:
    opacity 0.3s ease,
    transform 0.3s ease;
}
.ly-person__link:hover .ly-person__arrow,
.ly-person__link:focus-visible .ly-person__arrow {
  opacity: 1;
  transform: none;
}
@media (max-width: 991px) {
  .ly-people {
    grid-template-columns: repeat(2, minmax(0, 1fr));
  }
}
@media (max-width: 767px) {
  .ly-people {
    grid-template-columns: minmax(0, 1fr);
    row-gap: 48px;
  }
  /* No hover on touch: the arrow always shows. */
  .ly-person__arrow {
    opacity: 1;
    transform: none;
  }
}

/* ---- about: the three principles, each under a Burgundy line icon on a Linen tile */

.ly-principles {
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  gap: 48px 32px;
  margin: 0;
  padding: 0;
  list-style: none;
}
.ly-principle {
  display: flex;
  flex-direction: column;
  gap: 14px;
  padding-top: 28px;
  border-top: 1px solid var(--ly-rule);
}
.ly-principle__icon {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 44px;
  height: 44px;
  margin-bottom: 6px;
  background: var(--ly-linen);
  color: var(--ly-accent);
}
@media (max-width: 767px) {
  .ly-principles {
    grid-template-columns: minmax(0, 1fr);
    gap: 40px;
  }
}

/* ---- contact: the HubSpot form on a white panel, the photo and direct details beside it */

.ly-contact {
  display: grid;
  grid-template-columns: repeat(12, minmax(0, 1fr));
  column-gap: 24px;
  row-gap: 48px;
  align-items: start;
}
/* HubSpot's embedded form pads itself (about 40px a side inside its iframe), so the panel adds none around it and the
   consent note takes the same inset, lining up with the fields above it. */
.ly-contact__form {
  --ly-hubspot-inset: 40px;
  grid-column: 1 / span 7;
  padding: 8px 0 0;
  border: 1px solid var(--ly-sand);
  background: #fff;
}
.ly-contact__consent {
  margin: 0;
  padding: 0 var(--ly-hubspot-inset) var(--ly-hubspot-inset);
  font-size: 12px;
  line-height: 1.6;
  color: var(--ly-taupe);
}
.ly-contact__consent a {
  color: inherit;
  text-decoration: underline;
  text-underline-offset: 3px;
}
.ly-contact__aside {
  grid-column: 9 / span 4;
  display: flex;
  flex-direction: column;
  gap: 32px;
}
.ly-contact__photo {
  display: block;
  width: 100%;
  aspect-ratio: 4 / 5;
  object-fit: cover;
  background: var(--ly-sand);
}
.ly-contact__email {
  color: var(--ly-accent);
  text-decoration: none;
  overflow-wrap: anywhere;
}
.ly-contact__email:hover {
  text-decoration: underline;
}
@media (max-width: 991px) {
  .ly-contact__form,
  .ly-contact__aside {
    grid-column: 1 / -1;
  }
  .ly-contact__photo {
    aspect-ratio: 16 / 9;
  }
}

/* ---- legal: the page title is set smaller than a marketing page's */

.ly-legal__title {
  font-size: 72px;
}
@media (max-width: 767px) {
  .ly-legal__title {
    font-size: 44px;
  }
}

/* ---- agent profile: portrait beside the copy; stacks on a phone */

.ly-agent-profile {
  padding: 72px 0 112px;
}
.ly-agent-profile__grid {
  display: grid;
  grid-template-columns: repeat(12, minmax(0, 1fr));
  column-gap: 24px;
  row-gap: 40px;
  align-items: start;
}
.ly-agent-profile__photo {
  grid-column: 1 / span 4;
  display: block;
  width: 100%;
  aspect-ratio: 4 / 5;
  object-fit: cover;
  /* Headshots: keep the face in frame when the crop trims height. */
  object-position: 50% 20%;
  background: var(--ly-sand);
}
.ly-agent-profile__copy {
  grid-column: 6 / span 7;
  display: flex;
  flex-direction: column;
  gap: 28px;
  padding-top: 8px;
}
.ly-agent-profile__name {
  margin: 0;
  font-family: var(--ly-serif);
  font-weight: 200;
  font-size: 64px;
  line-height: 1.02;
  letter-spacing: -0.01em;
  color: var(--ly-espresso);
}
.ly-agent-profile__bio {
  display: flex;
  flex-direction: column;
  gap: 16px;
}
.ly-agent-profile__email {
  color: var(--ly-accent);
  text-decoration: none;
  overflow-wrap: anywhere;
}
.ly-agent-profile__email:hover {
  text-decoration: underline;
}
@media (max-width: 991px) {
  .ly-agent-profile__photo {
    grid-column: 1 / span 5;
  }
  .ly-agent-profile__copy {
    grid-column: 6 / span 7;
  }
  .ly-agent-profile__name {
    font-size: 48px;
  }
}
@media (max-width: 767px) {
  .ly-agent-profile {
    padding: 40px 0 72px;
  }
  .ly-agent-profile__photo,
  .ly-agent-profile__copy {
    grid-column: 1 / -1;
  }
  .ly-agent-profile__photo {
    width: 72%;
    aspect-ratio: 1 / 1;
  }
  .ly-agent-profile__name {
    font-size: 40px;
  }
}

/* ---------------------------------------------------------------- contact band + footer */

.ly-cta {
  padding: 112px 0;
  background: var(--ly-espresso);
  color: var(--ly-cream);
  font-family: var(--ly-sans);
}
.ly-cta__inner {
  display: flex;
  flex-direction: column;
  align-items: flex-start;
  gap: 40px;
}
.ly-cta__copy {
  display: flex;
  flex-direction: column;
  gap: 24px;
  max-width: 760px;
}
.ly-cta .ly-h2 {
  font-size: 48px;
  line-height: 1.08;
  color: var(--ly-cream);
}
.ly-cta__lead {
  margin: 0;
  font-size: 18px;
  line-height: 1.6;
  color: var(--ly-on-dark);
}
/* The form is the primary route; email sits under it as a quiet alternative, not a second button. */
.ly-cta__actions {
  display: flex;
  flex-direction: column;
  align-items: flex-start;
  gap: 20px;
}
.ly-cta__email {
  margin: 0;
  font-size: 15px;
  color: var(--ly-on-dark-muted);
}
.ly-cta__email a {
  font-weight: 400;
  color: var(--ly-on-dark);
  text-decoration: underline;
  text-decoration-color: #6b645b;
  text-underline-offset: 5px;
  transition:
    color 0.2s ease,
    text-decoration-color 0.2s ease;
}
.ly-cta__email a:hover {
  color: var(--ly-cream);
  text-decoration-color: currentColor;
}
@media (max-width: 767px) {
  .ly-cta {
    padding: 64px 0;
  }
  .ly-cta__inner {
    gap: 28px;
  }
  .ly-cta .ly-h2 {
    font-size: 34px;
    line-height: 1.12;
  }
  .ly-cta__lead {
    font-size: 16px;
  }
  .ly-cta__actions {
    align-items: stretch;
  }
  .ly-cta__actions .ly-btn {
    width: 100%;
  }
}

.ly-footer {
  padding: 72px 0 48px;
  background: var(--ly-night);
  color: var(--ly-on-dark);
  font-family: var(--ly-sans);
  font-size: 14px;
  line-height: 1.6;
}
.ly-footer a {
  font-weight: 400;
  color: inherit;
  text-decoration: none;
}
.ly-footer a:hover,
.ly-footer a[aria-current='page'] {
  color: var(--ly-cream);
}
.ly-footer__top {
  display: grid;
  grid-template-columns: repeat(12, minmax(0, 1fr));
  column-gap: 24px;
  row-gap: 40px;
}
.ly-footer__brand {
  grid-column: span 4;
  display: flex;
  flex-direction: column;
  gap: 16px;
}
.ly-footer__wordmark {
  display: flex;
  color: var(--ly-cream);
}
.ly-footer__logo {
  display: block;
  width: auto;
  height: 40px;
}
.ly-footer__tagline {
  margin: 0;
  font-family: var(--ly-serif);
  font-weight: 200;
  font-size: 20px;
  color: var(--ly-on-dark);
}
.ly-footer__col {
  grid-column: span 2;
  display: flex;
  flex-direction: column;
  gap: 12px;
  margin: 0;
  padding: 0;
  list-style: none;
}
.ly-footer__heading {
  margin: 0 0 6px;
  font-size: 11px;
  font-weight: 600;
  letter-spacing: 0.2em;
  text-transform: uppercase;
  color: var(--ly-on-dark-muted);
}
.ly-footer__address {
  font-style: normal;
}
.ly-footer__bottom {
  display: flex;
  flex-direction: column;
  gap: 16px;
  margin-top: 56px;
  padding-top: 28px;
  border-top: 1px solid #3d3a36;
  font-size: 12px;
  line-height: 1.7;
  color: var(--ly-on-dark-muted);
}
.ly-footer__legal {
  max-width: 1080px;
  margin: 0;
  font-size: 12px;
  line-height: 1.7;
}
.ly-footer__meta {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  justify-content: space-between;
  gap: 16px 24px;
}
.ly-footer__eho {
  display: flex;
  align-items: center;
  gap: 10px;
}
.ly-footer__links {
  display: flex;
  gap: 24px;
  margin: 0;
  padding: 0;
  list-style: none;
}
@media (max-width: 991px) {
  .ly-footer__brand {
    grid-column: 1 / -1;
  }
  .ly-footer__col {
    grid-column: span 6;
  }
}
@media (max-width: 767px) {
  .ly-footer {
    padding: 56px 0 40px;
  }
  /* Two columns: Services beside Explore, Office beside Follow. */
  .ly-footer__col {
    grid-column: span 6;
  }
}

/* ---------------------------------------------------------------- accessibility */

.ly-visually-hidden {
  position: absolute;
  width: 1px;
  height: 1px;
  overflow: hidden;
  clip: rect(0 0 0 0);
  white-space: nowrap;
}

.ly-page a:focus-visible,
.ly-page button:focus-visible,
.ly-header a:focus-visible,
.ly-header button:focus-visible,
.ly-cta a:focus-visible,
.ly-footer a:focus-visible {
  outline: 2px solid var(--ly-accent);
  outline-offset: 3px;
}
/* Burgundy would vanish on the menu's Burgundy panel. */
.ly-menu a:focus-visible,
.ly-menu button:focus-visible {
  outline: 2px solid var(--ly-cream);
  outline-offset: 3px;
}
/* ---------------------------------------------------------------- motion */

/*
 * Arrival: the hero photo settles from a slight zoom while its copy rises in line by line; inner pages' titles do the
 * same. CSS only, so it plays from the first paint.
 */
@keyframes ly-rise {
  from {
    opacity: 0;
    transform: translateY(18px);
  }
  to {
    opacity: 1;
    transform: none;
  }
}
@keyframes ly-settle {
  from {
    transform: scale(1.06);
  }
  to {
    transform: none;
  }
}
.ly-hero__media {
  animation: ly-settle 2.8s cubic-bezier(0.2, 0.6, 0.2, 1) both;
}
.ly-hero__content > *,
.ly-page-hero__inner > *,
.ly-agent-profile__copy > *,
.ly-case-stats__item {
  animation: ly-rise 0.9s cubic-bezier(0.2, 0.6, 0.2, 1) both;
}
.ly-hero__content > :nth-child(2),
.ly-page-hero__inner > :nth-child(2),
.ly-agent-profile__copy > :nth-child(2),
.ly-case-stats__item:nth-child(1) {
  animation-delay: 0.12s;
}
.ly-hero__content > :nth-child(3),
.ly-page-hero__inner > :nth-child(3),
.ly-agent-profile__copy > :nth-child(3),
.ly-case-stats__item:nth-child(2) {
  animation-delay: 0.24s;
}
.ly-hero__content > :nth-child(n + 4),
.ly-page-hero__inner > :nth-child(n + 4),
.ly-agent-profile__copy > :nth-child(n + 4),
.ly-case-stats__item:nth-child(3) {
  animation-delay: 0.36s;
}

/*
 * Scroll reveal (components/reveal-on-scroll.ts marks the blocks): text rises 28px and fades in; photos fade in from a slight
 * zoom instead, so they seem to settle rather than slide.
 */
.lyra-site [data-reveal] {
  transition:
    opacity 1s cubic-bezier(0.2, 0.6, 0.2, 1) var(--ly-reveal-delay, 0ms),
    transform 1s cubic-bezier(0.2, 0.6, 0.2, 1) var(--ly-reveal-delay, 0ms),
    border-color 0.2s ease;
}
.lyra-site [data-reveal='out'] {
  opacity: 0;
  transform: translateY(28px);
}
.lyra-site img[data-reveal='out'] {
  transform: scale(1.03);
}

@media (prefers-reduced-motion: reduce) {
  .ly-page *,
  .ly-menu,
  .ly-menu *,
  .ly-header * {
    transition: none !important;
    animation: none !important;
  }
}