@import url("https://fonts.googleapis.com/css2?family=Jost:wght@200;300;400;500&family=Playfair+Display:wght@400;500&display=swap");

@layer tokens {
  :root {
    --color-bg: #ffffff;
    --color-bg-alt: #f4f4f2;
    --color-text: #16181a;
    --color-text-muted: #6a6c70;
    --color-heading: #16181a;
    --color-primary: #16181a;
    --color-accent: #16181a;
    --color-line: rgba(0, 0, 0, 0.16);
    --color-link: #16181a;
    --color-bg-dark: #1a1a1a;
    --color-bg-dark-soft: #0b0b0c;
    --color-text-inverse: #ffffff;
    --color-text-inverse-muted: rgba(255, 255, 255, 0.78);
    --color-line-inverse: rgba(255, 255, 255, 0.26);
    --color-primary-hover: color-mix(in srgb, var(--color-primary) 78%, white);
    --font-body: "Jost", Helvetica, Arial, sans-serif;
    --font-heading: "Jost", Helvetica, Arial, sans-serif;
    --font-editorial: "Playfair Display", Georgia, serif;
    --font-mono: ui-monospace, monospace;
    --font-size-base: 1rem;
    --line-height-body: 1.7;
    --line-height-heading: 1.05;
    --space-xs: 0.5rem;
    --space-sm: 1rem;
    --space-md: 1.5rem;
    --space-lg: 2.75rem;
    --space-xl: 5rem;
    --space-2xl: 8rem;
    --space-3xl: 11rem;
    --radius-sm: 0;
    --radius-md: 0;
    --radius-lg: 0;
    --radius-full: 9999px;
    --shadow-sm: none;
    --shadow-md: none;
    --shadow-lg: none;
    --transition-fast: 150ms ease-out;
    --transition-base: 250ms ease-out;
    --transition-slow: 500ms ease-out;
    --container-max-width: 1360px;
    --container-padding: 1.375rem;
  }
}

@layer theme {
  body {
    overflow-x: hidden;
    background: var(--color-bg);
    color: var(--color-text);
    font-family: var(--font-body);
    font-size: var(--font-size-base);
    font-weight: 300;
    line-height: var(--line-height-body);
  }

  h1,
  h2,
  h3,
  h4,
  h5,
  h6 {
    color: var(--color-heading);
    font-family: var(--font-heading);
    font-weight: 300;
    letter-spacing: 0.02em;
    line-height: var(--line-height-heading);
  }

  h1 { font-size: 2.75rem; }
  h2 { font-size: 2rem; }
  h3 { font-size: 1.35rem; }

  a {
    color: var(--color-link);
    text-decoration-color: color-mix(in srgb, currentColor 40%, transparent);
    text-underline-offset: 0.25em;
    transition: color var(--transition-fast), text-decoration-color var(--transition-fast);

    &:hover {
      color: color-mix(in srgb, var(--color-link) 58%, white);
      text-decoration-color: currentColor;
    }
  }

  img {
    display: block;
    width: 100%;
  }

  :where(a, button, input, select, textarea, summary):focus-visible {
    outline: 2px solid currentColor;
    outline-offset: 4px;
  }

  .eyebrow {
    display: block;
    margin-bottom: var(--space-sm);
    color: var(--color-text-muted);
    font-size: 0.7rem;
    font-weight: 400;
    letter-spacing: 0.24em;
    text-transform: uppercase;
  }

  .section,
  .content-section {
    padding-block: var(--space-xl);
  }

  .section-alt {
    background: var(--color-bg-alt);
  }

  .section-dark,
  .inverse {
    background: var(--color-bg-dark);
    color: var(--color-text-inverse);

    & :where(h1, h2, h3, h4, h5, h6, a) { color: var(--color-text-inverse); }
    & :where(p, .eyebrow) { color: var(--color-text-inverse-muted); }
  }

  .section-header {
    max-width: 54rem;
    margin-bottom: var(--space-lg);
  }

  .section-subheading {
    max-width: 42rem;
    margin-top: var(--space-md);
    color: var(--color-text-muted);
  }

  .btn-primary,
  .btn-ghost,
  .action-link,
  .outlined-action,
  .nav-cta,
  .form-submit {
    display: inline-flex;
    min-height: 3.5rem;
    align-items: center;
    justify-content: center;
    gap: var(--space-xs);
    padding: 1rem 1.75rem;
    border: 1px solid currentColor;
    border-radius: var(--radius-sm);
    background: transparent;
    color: var(--color-text);
    cursor: pointer;
    font-family: var(--font-body);
    font-size: 0.78rem;
    font-weight: 400;
    letter-spacing: 0.18em;
    line-height: 1;
    text-align: center;
    text-decoration: none;
    text-transform: uppercase;
    transition: background-color var(--transition-fast), color var(--transition-fast), border-color var(--transition-fast);

    &:hover {
      border-color: var(--color-primary);
      background: var(--color-primary);
      color: var(--color-text-inverse);
    }
  }

  .inverse :where(.btn-primary, .btn-ghost, .action-link, .outlined-action),
  .section-dark :where(.btn-primary, .btn-ghost, .action-link, .outlined-action) {
    border-color: var(--color-line-inverse);
    color: var(--color-text-inverse);

    &:hover {
      border-color: var(--color-text-inverse);
      background: var(--color-text-inverse);
      color: var(--color-text);
    }
  }
}

@layer components {
  /* Header, dropdowns, and full-screen mobile drawer */
  .site-header {
    position: sticky;
    top: 0;
    z-index: 1000;
    border-bottom: 1px solid var(--color-line);
    background: var(--color-bg);
    transition: background-color var(--transition-base), border-color var(--transition-base);

    &.is-scrolled {
      background: color-mix(in srgb, var(--color-bg) 94%, transparent);
      backdrop-filter: blur(12px);
    }

    & .header-inner {
      display: grid;
      min-height: 6rem;
      grid-template-columns: auto 1fr;
      align-items: center;
      gap: 1rem;
      transition: min-height var(--transition-base);
    }

    &.is-scrolled .header-inner { min-height: 4.75rem; }
  }

  .site-logo,
  .header-brand {
    display: inline-flex;
    align-items: center;
    gap: 0.875rem;
    color: var(--color-text);
    font-size: 0.95rem;
    font-weight: 400;
    letter-spacing: 0.22em;
    text-decoration: none;
    text-transform: uppercase;

    &:hover { color: var(--color-text); }
  }

  .site-logo-image {
    width: 7rem;
    height: auto;
    flex: 0 0 auto;
    object-fit: contain;
  }

  .site-nav {
    display: flex;
    min-width: 0;
    align-items: center;
    justify-content: flex-end;
    gap: 1rem;
  }

  .mobile-nav-header { display: none; }

  .nav-links {
    display: flex;
    align-items: center;
    gap: 0.9rem;
    margin: 0;
    padding: 0;
    list-style: none;
  }

  .nav-item,
  .nav-dropdown { position: relative; }

  .nav-link,
  [data-yg-dropdown] {
    display: inline-flex;
    align-items: center;
    gap: 0.4rem;
    padding: 0.75rem 0;
    border: 0;
    background: transparent;
    color: var(--color-text);
    cursor: pointer;
    font-family: var(--font-body);
    font-size: 0.75rem;
    font-weight: 400;
    letter-spacing: 0.14em;
    line-height: 1.2;
    text-decoration: none;
    text-transform: uppercase;
    transition: opacity var(--transition-fast);

    &:hover { color: var(--color-text); opacity: 0.55; }

    &.active,
    &[aria-current="page"] { border-bottom: 1px solid currentColor; }
  }

  [data-yg-dropdown]::after {
    width: 0.38rem;
    height: 0.38rem;
    border-right: 1px solid currentColor;
    border-bottom: 1px solid currentColor;
    content: "";
    transform: translateY(-0.15rem) rotate(45deg);
    transition: transform var(--transition-fast);
  }

  [data-yg-dropdown][aria-expanded="true"]::after { transform: translateY(0.1rem) rotate(225deg); }

  .dropdown-panel {
    position: absolute;
    top: calc(100% + 0.75rem);
    left: 50%;
    z-index: 20;
    display: grid;
    min-width: 16rem;
    gap: 0;
    margin: 0;
    padding: var(--space-sm) var(--space-md);
    border: 1px solid var(--color-line);
    background: var(--color-bg);
    list-style: none;
    opacity: 0;
    pointer-events: none;
    transform: translate(-50%, 0.5rem);
    transition: opacity var(--transition-fast), transform var(--transition-fast), visibility var(--transition-fast);
    visibility: hidden;

    &.is-open {
      opacity: 1;
      pointer-events: auto;
      transform: translate(-50%, 0);
      visibility: visible;
    }

    & li + li { border-top: 1px solid var(--color-line); }

    & a {
      display: block;
      padding: 0.85rem 0;
      color: var(--color-text);
      font-size: 0.75rem;
      letter-spacing: 0.12em;
      text-decoration: none;
      text-transform: uppercase;

      &:hover { color: var(--color-text-muted); }
      &.active, &[aria-current="page"] { text-decoration: underline; text-decoration-thickness: 1px; }
    }
  }

  .nav-toggle,
  .nav-close {
    display: none;
    align-items: center;
    justify-content: center;
    border: 1px solid var(--color-line);
    border-radius: var(--radius-sm);
    background: transparent;
    color: var(--color-text);
    cursor: pointer;
    font-family: var(--font-body);
  }

  .nav-toggle {
    min-height: 3rem;
    gap: 0.75rem;
    padding: 0.75rem 0.9rem;
    font-size: 0.68rem;
    font-weight: 400;
    letter-spacing: 0.14em;
    text-transform: uppercase;
  }

  .nav-toggle-icon { display: grid; width: 1.15rem; gap: 0.35rem; }
  .nav-toggle-bar { width: 100%; height: 1px; background: currentColor; }

  .nav-close {
    width: 3rem;
    height: 3rem;
    padding: 0.5rem;
    font-size: 1.75rem;
    font-weight: 200;
    line-height: 1;
  }

  body.nav-open { overflow: hidden; }

  /* Footer */
  .site-footer {
    padding: var(--space-xl) 0 var(--space-lg);
    border-top: 1px solid var(--color-line-inverse);
    background: var(--color-bg-dark);
    color: var(--color-text-inverse);

    & :where(h2, a) { color: var(--color-text-inverse); }
    & :where(p, address, li) { color: var(--color-text-inverse-muted); }
    & a:hover { color: var(--color-text-inverse); }
  }

  .footer-intro {
    display: grid;
    grid-template-columns: minmax(0, 1.1fr) minmax(18rem, 0.9fr);
    gap: var(--space-lg);
    align-items: end;
    padding-bottom: var(--space-lg);
    border-bottom: 1px solid var(--color-line-inverse);

    & p { max-width: 38rem; }
  }

  .footer-wordmark {
    font-family: var(--font-editorial);
    font-size: 2.75rem;
    font-weight: 400;
    line-height: 0.9;
    text-decoration: none;
  }

  .footer-grid {
    display: grid;
    grid-template-columns: 1.15fr 1fr 1.15fr 1fr;
    border-bottom: 1px solid var(--color-line-inverse);
  }

  .footer-grid > :where(section, nav) {
    min-width: 0;
    padding: var(--space-md);
    border-right: 1px solid var(--color-line-inverse);

    &:first-child { padding-left: 0; }
    &:last-child { padding-right: 0; border-right: 0; }
  }

  .site-footer h2 {
    margin-bottom: var(--space-md);
    font-size: 0.72rem;
    font-weight: 400;
    letter-spacing: 0.2em;
    text-transform: uppercase;
  }

  .site-footer ul {
    display: grid;
    gap: 0.65rem;
    margin: 0;
    padding: 0;
    list-style: none;
  }

  .site-footer address { font-style: normal; }
  .footer-contact a, .footer-services a { text-decoration-thickness: 1px; }
  .footer-credentials, .footer-brokerage { font-size: 0.86rem; line-height: 1.65; }
  .footer-credentials p { margin-bottom: var(--space-sm); }

  .footer-brokerage-logo {
    width: auto;
    max-width: 9rem;
    max-height: 4.5rem;
    margin-bottom: var(--space-sm);
    object-fit: contain;
    object-position: left center;
  }

  .footer-compliance {
    display: grid;
    grid-template-columns: minmax(10rem, 0.4fr) minmax(0, 1.6fr);
    gap: var(--space-lg);
    align-items: start;
    padding-block: var(--space-lg);
    border-bottom: 1px solid var(--color-line-inverse);
    font-size: 0.75rem;
    line-height: 1.65;
  }

  .footer-marks {
    display: flex;
    align-items: center;
    gap: var(--space-md);
  }

  .footer-marks img {
    width: auto;
    max-width: 5.25rem;
    max-height: 3.5rem;
    object-fit: contain;
  }

  .footer-disclosures { display: grid; gap: var(--space-sm); }

  .footer-bottom {
    display: flex;
    flex-wrap: wrap;
    justify-content: space-between;
    gap: var(--space-sm) var(--space-lg);
    padding-top: var(--space-md);
    color: var(--color-text-inverse-muted);
    font-size: 0.75rem;
  }

  .footer-legal { display: flex; flex-wrap: wrap; gap: var(--space-sm) var(--space-md); }

  /* Full-bleed dusk home hero */
  .home-hero {
    position: relative;
    display: grid;
    min-height: min(86vh, 50rem);
    align-items: center;
    overflow: hidden;
    background: var(--color-bg-dark);
    color: var(--color-text-inverse);

    & .home-hero-media {
      position: absolute;
      inset: 0;
      margin: 0;
    }

    & .home-hero-media img {
      width: 100%;
      height: 100%;
      object-fit: cover;
    }

    & .home-hero-media::after {
      position: absolute;
      inset: 0;
      background: linear-gradient(100deg, rgb(42 42 42 / 82%) 0%, rgba(0, 0, 0, 0.5) 48%, rgba(0, 0, 0, 0.16) 78%);
      content: "";
    }

    & .home-hero-inner {
      position: relative;
      z-index: 1;
      width: 100%;
    }

    & .home-hero-content {
      max-width: 54rem;
      padding-block: var(--space-xl);
    }

    & .home-hero-eyebrow {
      margin: 0 0 var(--space-md);
      color: var(--color-text-inverse-muted);
      font-size: 0.7rem;
      font-weight: 400;
      letter-spacing: 0.24em;
      text-transform: uppercase;
    }

    & h1 {
      margin: 0;
      color: var(--color-text-inverse);
      font-size: 3rem;
      font-weight: 200;
      text-transform: uppercase;
            max-width: 19ch;

    }

    & .home-hero-body {
      max-width: 38rem;
      margin: var(--space-lg) 0 0;
      padding-top: var(--space-md);
      border-top: 1px solid var(--color-line-inverse);
      color: white;
    }

    & .home-hero-actions {
      display: flex;
      flex-wrap: wrap;
      gap: var(--space-sm);
      margin-top: var(--space-lg);
    }

    & .home-hero-action {
      display: inline-flex;
      min-height: 3.5rem;
      align-items: center;
      justify-content: center;
      padding: 1rem 1.75rem;
      border: 1px solid var(--color-line-inverse);
      border-radius: var(--radius-sm);
      color: var(--color-text-inverse);
      font-size: 0.78rem;
      font-weight: 400;
      letter-spacing: 0.18em;
      line-height: 1;
      text-align: center;
      text-decoration: none;
      text-transform: uppercase;
      transition: background-color var(--transition-fast), color var(--transition-fast), border-color var(--transition-fast);

      &:hover {
        border-color: var(--color-text-inverse);
        background: var(--color-text-inverse);
        color: var(--color-text);
      }
    }

    & .home-hero-action-secondary { border-color: color-mix(in srgb, var(--color-text-inverse) 52%, transparent); }
  }

  .hero {
    position: relative;
    display: grid;
    min-height: min(86vh, 50rem);
    align-items: center;
    overflow: hidden;
    background: var(--color-bg-dark);
    color: var(--color-text-inverse);

    & .hero-media,
    & .hero-image { position: absolute; inset: 0; margin: 0; }
    & .hero-media img,
    & .hero-image img { width: 100%; height: 100%; object-fit: cover; }
    & .hero-media::after,
    & .hero-image::after {
      position: absolute;
      inset: 0;
      background: linear-gradient(100deg, rgba(0, 0, 0, 0.72), rgba(0, 0, 0, 0.24) 68%, rgba(0, 0, 0, 0.12));
      content: "";
    }
    & .container { position: relative; z-index: 1; width: 100%; }
    & .hero-content { max-width: 46rem; padding-block: var(--space-xl); }
    & .eyebrow, & h1, & p { color: var(--color-text-inverse); }
    & h1 { font-size: 3rem; font-weight: 200; text-transform: uppercase; }
    & p { max-width: 34rem; margin-top: var(--space-lg); padding-top: var(--space-md); border-top: 1px solid var(--color-line-inverse); color: var(--color-text-inverse-muted); }
  }

  /* Short editorial interior-page hero */
  .page-hero {
    overflow: hidden;
    border-bottom: 1px solid var(--color-line);
    background: linear-gradient(90deg, var(--color-bg-dark-soft) 0 78%, var(--color-bg-alt) 78% 100%);
    color: var(--color-text-inverse);

    & .page-hero-inner {
      display: grid;
      min-height: 24rem;
      grid-template-columns: minmax(0, 3fr) minmax(8rem, 1fr);
    }

    & .page-hero-content {
      display: grid;
      max-width: 58rem;
      align-content: end;
      padding: var(--space-xl) var(--space-lg) var(--space-xl) 0;
      border-right: 1px solid var(--color-line-inverse);
    }

    & .page-hero-eyebrow {
      margin: 0 0 var(--space-md);
      color: var(--color-text-inverse-muted);
      font-size: 0.7rem;
      font-weight: 400;
      letter-spacing: 0.24em;
      text-transform: uppercase;
    }

    & h1 {
      margin: 0;
      color: var(--color-text-inverse);
      font-size: 2.75rem;
      font-weight: 200;
      text-transform: uppercase;
    }

    & .page-hero-body {
      max-width: 40rem;
      margin: var(--space-lg) 0 0;
      padding-top: var(--space-md);
      border-top: 1px solid var(--color-line-inverse);
      color: var(--color-text-inverse-muted);
    }

    &.page-hero--with-image {
      background: var(--color-bg-dark-soft);

      & .page-hero-inner { grid-template-columns: minmax(0, 5fr) minmax(18rem, 4fr); }
    }

    & .page-hero-media {
      min-width: 0;
      margin: 0;
      border-right: 1px solid var(--color-line-inverse);
    }

    & .page-hero-media img {
      width: 100%;
      height: 100%;
      object-fit: cover;
    }

    & .page-hero-action {
      display: inline-flex;
      min-height: 3.5rem;
      align-items: center;
      justify-content: center;
      justify-self: start;
      margin-top: var(--space-lg);
      padding: 1rem 1.75rem;
      border: 1px solid var(--color-line-inverse);
      color: var(--color-text-inverse);
      font-size: 0.78rem;
      font-weight: 400;
      letter-spacing: 0.18em;
      line-height: 1;
      text-align: center;
      text-decoration: none;
      text-transform: uppercase;
      transition: background-color var(--transition-fast), color var(--transition-fast), border-color var(--transition-fast);

      &:hover {
        border-color: var(--color-text-inverse);
        background: var(--color-text-inverse);
        color: var(--color-text);
      }
    }

    &.page-hero--property {
      position: relative;
      background: var(--color-bg-dark-soft);

      & .page-hero-inner {
        position: relative;
        width: 100%;
        max-width: none;
        min-height: 38rem;
        padding-inline: 0;
        grid-template-columns: 1fr;
      }

      & .page-hero-content {
        position: relative;
        z-index: 2;
        grid-column: 1;
        grid-row: 1;
        width: 100%;
        max-width: var(--container-max-width);
        align-content: end;
        justify-self: center;
        padding: var(--space-2xl) var(--container-padding) var(--space-xl);
        border: 0;
      }

      & .page-hero-media {
        position: absolute;
        inset: 0;
        z-index: 0;
        min-height: 0;
        overflow: hidden;
        border: 0;
      }

      & .page-hero-media::after {
        position: absolute;
        inset: 0;
        background: linear-gradient(90deg, rgba(8, 10, 10, 0.88) 0%, rgba(8, 10, 10, 0.62) 48%, rgba(8, 10, 10, 0.18) 82%), linear-gradient(0deg, rgba(8, 10, 10, 0.58), transparent 55%);
        content: "";
      }

      & .page-hero-media img { object-position: center center; }
      & h1 {  max-width: 20ch;font-size: 3.25rem; }
      & .page-hero-body { max-width: 38rem; }
    }

    &:is(.page-hero--service, .page-hero--personal) {
      background: var(--color-bg);
      color: var(--color-text);

      & .page-hero-inner {
        width: 100%;
        max-width: none;
        height: 30rem;
        min-height: 0;
        padding-inline: 0;
        grid-template-columns: minmax(24rem, 1fr) minmax(0, 1fr);
      }

      & .page-hero-content {
        grid-column: 1;
        grid-row: 1;
        max-width: none;
        align-content: center;
        padding: var(--space-lg) var(--space-lg) var(--space-lg) max(var(--container-padding), calc((100vw - var(--container-max-width)) / 2 + var(--container-padding)));
        border-right: 0;
      }

      & .page-hero-media {
        position: relative;
        grid-column: 2;
        grid-row: 1;
        height: 30rem;
        min-height: 0;
        overflow: hidden;
        border-right: 0;
        border-left: 1px solid var(--color-line);
      }

      & .page-hero-media img {
        position: absolute;
        inset: 0;
      }

      & .page-hero-eyebrow,
      & .page-hero-body { color: var(--color-text-muted); }
      & h1 { color: var(--color-heading); }
      & .page-hero-body { max-width: 34rem; border-color: var(--color-line); }
      & .page-hero-action { border-color: var(--color-text); color: var(--color-text); }
      & .page-hero-action:hover { border-color: var(--color-text); background: var(--color-text); color: var(--color-text-inverse); }

      &.page-hero--reverse .page-hero-content {
        grid-column: 2;
        padding-right: max(var(--container-padding), calc((100vw - var(--container-max-width)) / 2 + var(--container-padding)));
        padding-left: var(--space-lg);
      }

      &.page-hero--reverse .page-hero-media {
        grid-column: 1;
        border-right: 1px solid var(--color-line);
        border-left: 0;
      }
    }

    &.page-hero--service {
      & .page-hero-inner,
      & .page-hero-media { height: 34rem; }
      & h1 { font-size: 2.25rem; }
      & .page-hero-body { margin-top: var(--space-md); line-height: 1.6; }
      & .page-hero-action { margin-top: var(--space-md); }
    }

    &.page-hero--personal {
      background: var(--color-bg-alt);

      & .page-hero-inner { grid-template-columns: minmax(0, 7fr) minmax(22rem, 5fr); }
      & .page-hero-content { background: var(--color-bg-alt); }
      & .page-hero-media img { object-position: center center; }
    }
  }

  /* Service index and line-based cards */
  .services-grid {
    display: grid;
    grid-template-columns: repeat(3, minmax(0, 1fr));
    border-top: 1px solid var(--color-line);
    border-left: 1px solid var(--color-line);
  }

  .service-card {
    display: grid;
    min-height: 18rem;
    align-content: space-between;
    padding: var(--space-md);
    border-right: 1px solid var(--color-line);
    border-bottom: 1px solid var(--color-line);
    border-radius: var(--radius-md);
    background: transparent;
    color: var(--color-text);
    text-decoration: none;
    transition: background-color var(--transition-base), color var(--transition-base);

    & .service-icon { font-size: 1.25rem; }
    & .service-title { margin-top: var(--space-xl); font-size: 1.5rem; font-weight: 300; text-transform: uppercase; }
    & .service-description { margin-top: var(--space-sm); color: var(--color-text-muted); }
    & .service-link { margin-top: var(--space-md); font-size: 0.75rem; letter-spacing: 0.16em; text-transform: uppercase; }

    &:hover {
      background: var(--color-bg-dark);
      color: var(--color-text-inverse);

      & :where(.service-title, .service-description, .service-link) { color: var(--color-text-inverse); }
    }
  }

  .service-index {
    border-block: 1px solid var(--color-line);
  }

  .service-index-inner {
    display: grid;
    grid-template-columns: minmax(15rem, 4fr) minmax(0, 8fr);
    gap: var(--space-lg);
    align-items: start;
  }

  .service-index-header {
    position: sticky;
    top: 7rem;

    & h2 {
      margin: 0;
      font-size: 2.25rem;
      font-weight: 200;
      text-transform: uppercase;
    }
  }

  .service-index-intro {
    max-width: 34rem;
    margin-top: var(--space-md);
    padding-top: var(--space-md);
    border-top: 1px solid var(--color-line);
    color: var(--color-text-muted);
  }

  .service-index-list {
    display: grid;
    grid-template-columns: repeat(12, minmax(0, 1fr));
    margin: 0;
    padding: 0;
    border-top: 1px solid var(--color-line);
    border-left: 1px solid var(--color-line);
    list-style: none;
  }

  .service-index-item {
    grid-column: span 7;
    min-width: 0;
    border-right: 1px solid var(--color-line);
    border-bottom: 1px solid var(--color-line);

    &:nth-child(4n + 2),
    &:nth-child(4n + 3) { grid-column: span 5; }
  }

  .service-index-card {
    position: relative;
    min-height: 15rem;
    overflow: hidden;
    background: transparent;
    transition: background-color var(--transition-base), color var(--transition-base);

    &:has(a):hover {
      background: var(--color-bg-dark);
      color: var(--color-text-inverse);

      & :where(.service-index-title, .service-index-title a, .service-index-text) { color: var(--color-text-inverse); }
    }

    &:has(a:focus-visible) {
      z-index: 2;
      outline: 2px solid currentColor;
      outline-offset: -5px;
    }
  }

  .service-index-card-content {
    position: relative;
    z-index: 2;
    display: grid;
    min-height: 15rem;
    align-content: space-between;
    gap: var(--space-lg);
    padding: var(--space-md);
  }

  .service-index-title {
    margin: 0;
    font-size: 1.4rem;
    font-weight: 300;
    text-transform: uppercase;

    & a {
      color: inherit;
      text-decoration: none;
    }
  }

  .service-index-text {
    max-width: 38rem;
    margin: 0;
    color: var(--color-text-muted);
  }

  .service-index-card--image {
    min-height: 22rem;
    background: var(--color-bg-dark-soft);
    color: var(--color-text-inverse);

    & .service-index-media {
      position: absolute;
      inset: 0;
      z-index: 0;
      margin: 0;
      overflow: hidden;
    }

    & .service-index-media::after {
      position: absolute;
      inset: 0;
      background: linear-gradient(0deg, rgba(7, 8, 8, 0.94) 0%, rgba(7, 8, 8, 0.66) 48%, rgba(7, 8, 8, 0.18) 100%);
      content: "";
      transition: background-color var(--transition-base);
    }

    & .service-index-media img {
      width: 100%;
      height: 100%;
      object-fit: cover;
      transform: scale(1.002);
      transition: transform var(--transition-slow);
    }

    & .service-index-card-content {
      min-height: 22rem;
      align-content: end;
      gap: var(--space-md);
      padding: var(--space-lg);
    }

    & .service-index-title {
      color: var(--color-text-inverse);
      font-family: var(--font-editorial);
      font-size: 1.8rem;
      font-weight: 400;
      letter-spacing: 0;
      text-transform: none;
    }

    & .service-index-title a::after {
      position: absolute;
      inset: 0;
      z-index: 3;
      content: "";
    }

    & .service-index-title a:focus-visible { outline: 0; }
    & .service-index-text { color: var(--color-text-inverse-muted); line-height: 1.6; }

    &:has(a):hover {
      background: var(--color-bg-dark-soft);

      & .service-index-media img { transform: scale(1.035); }
      & :where(.service-index-title, .service-index-title a) { color: var(--color-text-inverse); }
      & .service-index-text { color: var(--color-text-inverse-muted); }
    }
  }

  /* Process steps */
  .process-steps-header { max-width: 48rem; }

  .process-steps-intro { max-width: 40rem; }

  .process-steps {
    display: grid;
    margin: 0;
    padding: 0;
    grid-template-columns: repeat(4, minmax(0, 1fr));
    border: 1px solid var(--color-line);
    list-style: none;
  }

  .process-step {
    min-width: 0;
    padding: var(--space-md);
    border-right: 1px solid var(--color-line);

    &:last-child { border-right: 0; }

    & .process-step-number {
      display: block;
      margin-bottom: var(--space-lg);
      color: var(--color-text-muted);
      font-family: var(--font-heading);
      font-size: 4rem;
      font-weight: 200;
      letter-spacing: -0.06em;
      line-height: 0.8;
    }

    & h3 {
      margin: 0;
      font-size: 1.05rem;
      text-transform: uppercase;
    }

    & p {
      margin: var(--space-sm) 0 0;
      color: var(--color-text-muted);
    }
  }

  /* Editorial split and credentials */
  .editorial-split {
    border-block: 1px solid var(--color-line);
    background: var(--color-bg);
  }

  .editorial-split--alt { background: var(--color-bg-alt); }

  .editorial-split-inner {
    display: grid;
    grid-template-columns: minmax(0, 1fr);
    padding-inline: 0;
  }

  .editorial-split--with-image .editorial-split-inner {
    grid-template-columns: minmax(0, 7fr) minmax(20rem, 5fr);
  }

  .editorial-split-media {
    min-width: 0;
    margin: 0;
    border-right: 1px solid var(--color-line);
  }

  .editorial-split-media img {
    width: 100%;
    height: 100%;
    min-height: 30rem;
    object-fit: cover;
  }

  .editorial-split-content {
    width: 100%;
    max-width: 58rem;
    align-self: center;
    padding: var(--space-xl) var(--space-lg);
  }

  .editorial-split--with-image .editorial-split-content { max-width: 44rem; }

  .editorial-split-eyebrow {
    margin: 0 0 var(--space-md);
    color: var(--color-text-muted);
    font-size: 0.7rem;
    font-weight: 400;
    letter-spacing: 0.24em;
    text-transform: uppercase;
  }

  .editorial-split-content h2 {
    margin: 0;
    font-size: 2rem;
    font-weight: 200;
    text-transform: uppercase;
  }

  .editorial-split-body {
    margin-top: var(--space-lg);
    padding-top: var(--space-md);
    border-top: 1px solid var(--color-line);
    color: var(--color-text-muted);
  }

  .editorial-split-body > :first-child { margin-top: 0; }
  .editorial-split-body > :last-child { margin-bottom: 0; }
  .editorial-split-body p + p { margin-top: var(--space-sm); }

  .editorial-split-action {
    display: inline-flex;
    min-height: 3.5rem;
    align-items: center;
    justify-content: center;
    margin-top: var(--space-lg);
    padding: 1rem 1.75rem;
    border: 1px solid currentColor;
    border-radius: var(--radius-sm);
    color: var(--color-text);
    font-size: 0.78rem;
    font-weight: 400;
    letter-spacing: 0.18em;
    line-height: 1;
    text-align: center;
    text-decoration: none;
    text-transform: uppercase;
    transition: background-color var(--transition-fast), color var(--transition-fast);

    &:hover {
      background: var(--color-bg-dark);
      color: var(--color-text-inverse);
    }
  }

  .editorial-split--reverse.editorial-split--with-image .editorial-split-inner {
    grid-template-columns: minmax(20rem, 5fr) minmax(0, 7fr);
  }

  .editorial-split--reverse .editorial-split-media {
    order: 2;
    border-right: 0;
    border-left: 1px solid var(--color-line);
  }

  .split-section {
    overflow: hidden;
    border-bottom: 1px solid var(--color-line);
    background: var(--color-bg);
  }

  .split-inner {
    display: grid;
    height: 36rem;
    grid-template-columns: minmax(0, 1fr) minmax(0, 1fr);
  }

  .split-media {
    position: relative;
    height: 36rem;
    min-width: 0;
    min-height: 0;
    margin: 0;
    overflow: hidden;
    background: var(--color-bg-dark-soft);
  }

  .split-media :where(img, video) {
    position: absolute;
    inset: 0;
    display: block;
    width: 100%;
    height: 100%;
    object-fit: cover;
  }

  .split-content {
    display: grid;
    max-width: 48rem;
    align-content: center;
    justify-items: start;
    padding: var(--space-xl);
  }

  .split-eyebrow {
    margin: 0 0 var(--space-lg);
    color: var(--color-text-muted);
    font-size: 0.75rem;
    font-weight: 400;
    letter-spacing: 0.24em;
    text-transform: uppercase;
  }

  .split-content h2 {
    margin: 0;
    font-size: 2.75rem;
    font-weight: 200;
    line-height: 1.02;
    text-transform: uppercase;
  }

  .split-body {
    max-width: 38rem;
    margin-top: var(--space-lg);
    padding-top: var(--space-md);
    border-top: 1px solid var(--color-line);
    color: var(--color-text-muted);
    font-size: 1.05rem;
    line-height: 1.75;
  }

  .split-body > :first-child { margin-top: 0; }
  .split-body > :last-child { margin-bottom: 0; }
  .split-body p + p { margin-top: var(--space-sm); }

  .split-action {
    display: inline-flex;
    min-height: 3.5rem;
    align-items: center;
    justify-content: center;
    margin-top: var(--space-lg);
    padding: 1rem 1.75rem;
    border: 1px solid currentColor;
    color: var(--color-text);
    font-size: 0.78rem;
    font-weight: 400;
    letter-spacing: 0.18em;
    line-height: 1;
    text-align: center;
    text-decoration: none;
    text-transform: uppercase;
    transition: background-color var(--transition-fast), color var(--transition-fast);

    &:hover {
      background: var(--color-bg-dark);
      color: var(--color-text-inverse);
    }
  }

  .split-reverse .split-media { order: 2; }
  .split-reverse .split-content { order: 1; justify-self: end; }

  .split-section--dark {
    border-color: var(--color-line-inverse);
    background: var(--color-bg-dark);
    color: var(--color-text-inverse);

    & .split-eyebrow,
    & .split-body { color: var(--color-text-inverse-muted); }
    & .split-content h2 { color: var(--color-text-inverse); }
    & .split-body { border-color: var(--color-line-inverse); }
    & .split-action { border-color: var(--color-line-inverse); color: var(--color-text-inverse); }
    & .split-action:hover { border-color: var(--color-text-inverse); background: var(--color-text-inverse); color: var(--color-text); }
  }

  .credentials-section {
    border-block: 1px solid var(--color-line);
    background: var(--color-bg);
  }

  .credentials-header {
    padding-block: var(--space-lg);
  }

  .credentials-eyebrow {
    margin: 0 0 var(--space-sm);
    color: var(--color-text-muted);
    font-size: 0.75rem;
    letter-spacing: 0.2em;
    text-transform: uppercase;
  }

  .credentials-header h2 {
    margin: 0;
    font-size: 2rem;
    font-weight: 200;
    text-transform: uppercase;
  }

  .credentials-intro {
    max-width: 48rem;
    margin: var(--space-md) 0 0;
    color: var(--color-text-muted);
  }

  .credentials {
    display: grid;
    grid-template-columns: repeat(5, minmax(0, 1fr));
    margin: 0;
    padding: 0;
    border-top: 1px solid var(--color-line);
    border-left: 1px solid var(--color-line);
    list-style: none;
  }

  .credential {
    min-width: 0;
    padding: var(--space-md);
    border-right: 1px solid var(--color-line);
    border-bottom: 1px solid var(--color-line);
    border-radius: 0;
    background: transparent;

    & span {
      display: block;
      font-size: 0.78rem;
      font-weight: 400;
      letter-spacing: 0.08em;
      line-height: 1.45;
      text-transform: uppercase;
    }
  }

  .credentials-disclosure {
    margin-block: 0;
    padding-block: var(--space-md);
    color: var(--color-text-muted);
    font-size: 0.82rem;
    line-height: 1.6;
  }

  /* Testimonials in carousel and full-grid treatments */
  .testimonials {
    border-block: 1px solid var(--color-line);
    background: var(--color-bg);
  }

  .testimonials-header {
    display: grid;
    grid-template-columns: repeat(12, minmax(0, 1fr));
    gap: var(--space-sm) var(--space-md);
    align-items: end;
    margin-bottom: var(--space-lg);

    & .testimonials-eyebrow {
      grid-column: 1 / -1;
      margin: 0;
      color: var(--color-text-muted);
      font-size: 0.75rem;
      font-weight: 400;
      letter-spacing: 0.22em;
      text-transform: uppercase;
    }

    & h2 {
      grid-column: 1 / span 7;
      margin: 0;
      font-size: 2.25rem;
      font-weight: 200;
      text-transform: uppercase;
    }

    & .testimonials-intro {
      grid-column: 9 / -1;
      margin: 0;
      padding-top: var(--space-sm);
      border-top: 1px solid var(--color-line);
      color: var(--color-text-muted);
    }
  }

  .testimonials-body { position: relative; }

  .testimonials-track {
    border-top: 1px solid var(--color-line);
    border-left: 1px solid var(--color-line);
  }

  .testimonials--carousel .testimonials-track {
    display: grid;
    grid-auto-columns: 100%;
    grid-auto-flow: column;
    overflow-x: auto;
    overscroll-behavior-inline: contain;
    scroll-behavior: smooth;
    scroll-snap-type: inline mandatory;
    scrollbar-width: none;

    &::-webkit-scrollbar { display: none; }
  }

  .testimonials--grid .testimonials-track {
    display: block;
    border: 0;
    column-count: 3;
    column-gap: var(--space-md);
    column-fill: balance;
  }

  .testimonial-card {
    min-width: 0;
    padding: var(--space-md);
    border-right: 1px solid var(--color-line);
    border-bottom: 1px solid var(--color-line);
    border-radius: 0;
    background: transparent;
    box-shadow: none;
    scroll-snap-align: start;

    & blockquote { margin: 0; }

    & blockquote > p {
      margin: 0;
      font-family: var(--font-editorial);
      font-size: 1.15rem;
      line-height: 1.55;
    }

    & .testimonial-author {
      margin-top: var(--space-lg);
      padding-top: var(--space-sm);
      border-top: 1px solid var(--color-line);
    }

    & .testimonial-name {
      font-family: var(--font-body);
      font-size: 0.78rem;
      font-style: normal;
      font-weight: 400;
      letter-spacing: 0.14em;
      text-transform: uppercase;
    }

    & .testimonial-meta {
      margin: 0.35rem 0 0;
      color: var(--color-text-muted);
      font-family: var(--font-body);
      font-size: 0.78rem;
      letter-spacing: 0.04em;
    }
  }

  .testimonials--grid .testimonial-card {
    display: inline-block;
    width: 100%;
    margin: 0 0 var(--space-md);
    border: 1px solid var(--color-line);
    break-inside: avoid;
  }

  .testimonials-controls {
    display: grid;
    grid-template-columns: auto minmax(0, 1fr) auto;
    gap: var(--space-md);
    align-items: center;
    margin-top: var(--space-md);
  }

  .testimonials-control {
    display: grid;
    width: 3.25rem;
    height: 3.25rem;
    padding: 0;
    place-items: center;
    border: 1px solid var(--color-line);
    border-radius: 0;
    background: transparent;
    color: var(--color-text);
    cursor: pointer;
    font-size: 1.1rem;
    transition: background-color var(--transition-fast), color var(--transition-fast);

    &:hover:not(:disabled) {
      background: var(--color-bg-dark);
      color: var(--color-text-inverse);
    }

    &:disabled { cursor: not-allowed; opacity: 0.35; }
  }

  .testimonials-dots {
    display: flex;
    min-height: 2.75rem;
    align-items: center;
    justify-content: center;
    gap: 0.75rem;

    & .yg-carousel-dot {
      width: 1.25rem;
      height: 2px;
      padding: 0;
      border: 0;
      border-radius: 0;
      background: var(--color-line);
      color: var(--color-line);
      cursor: pointer;
    }

    & .yg-carousel-dot.is-active,
    & .yg-carousel-dot[aria-current="true"] {
      background: var(--color-text);
      color: var(--color-text);
    }
  }

  /* Contact utility page and appointment request forms */
  .contact-utility { background: var(--color-bg-alt); }

  .contact-utility-header {
    display: grid;
    grid-template-columns: minmax(0, 8fr) minmax(16rem, 4fr);
    gap: var(--space-sm) var(--space-lg);
    align-items: end;
    margin-bottom: var(--space-lg);

    & .contact-utility-eyebrow {
      grid-column: 1 / -1;
      margin: 0;
      color: var(--color-text-muted);
      font-size: 0.72rem;
      font-weight: 400;
      letter-spacing: 0.2em;
      text-transform: uppercase;
    }

    & h1 {
      margin: 0;
      font-size: 2.75rem;
      font-weight: 300;
      letter-spacing: -0.035em;
      text-transform: uppercase;
    }

    & .contact-utility-intro {
      max-width: 34rem;
      margin: 0;
      color: var(--color-text-muted);
    }
  }

  .contact-layout,
  .schedule-layout {
    display: grid;
    grid-template-columns: minmax(18rem, 0.8fr) minmax(0, 1.2fr);
    align-items: start;
  }

  .contact-layout {
    align-items: stretch;
    border: 1px solid var(--color-line);
    background: var(--color-bg);
  }

  .schedule-layout { gap: var(--space-lg); }

  .contact-details {
    display: grid;
    min-width: 0;
    grid-template-rows: auto minmax(18rem, 1fr);
  }

  .contact-details-copy { padding: var(--space-lg); }

  .contact-details h2,
  .contact-form-header h2 {
    margin: 0;
    font-size: 1.35rem;
    font-weight: 300;
    text-transform: uppercase;
  }

  .contact-details-list {
    display: grid;
    margin: var(--space-lg) 0 0;
  }

  .contact-details-list > div {
    display: grid;
    grid-template-columns: minmax(6rem, 0.35fr) minmax(0, 0.65fr);
    gap: var(--space-xs) var(--space-md);
    padding-block: var(--space-sm);
    border-top: 1px solid var(--color-line);
  }

  .contact-details-list :where(dt, dd) { margin: 0; }
  .contact-details-list dt { color: var(--color-text-muted); font-size: 0.72rem; font-weight: 400; letter-spacing: 0.14em; text-transform: uppercase; }
  .contact-details-list dd { grid-column: 2; overflow-wrap: anywhere; }
  .contact-details-list address { font-style: normal; line-height: 1.55; }

  .contact-schedule-link {
    display: inline-flex;
    margin-top: var(--space-md);
    font-size: 0.75rem;
    font-weight: 400;
    letter-spacing: 0.14em;
    text-transform: uppercase;
  }

  .contact-map {
    min-height: 18rem;
    overflow: hidden;
    border-top: 1px solid var(--color-line);
    background: var(--color-bg-alt);
  }

  .contact-map iframe {
    display: block;
    width: 100%;
    height: 100%;
    border: 0;
  }

  .contact-form,
  .appointment-form,
  .schedule-form,
  .form-panel {
    display: grid;
    gap: var(--space-md);
    padding: var(--space-md);
    border: 1px solid var(--color-line);
    background: var(--color-bg);
  }

  .form-grid { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: var(--space-md); }
  .form-field { min-width: 0; }
  .form-field-full, .form-field--full, .form-consent { grid-column: 1 / -1; }

  .form-field label,
  .form-label {
    display: block;
    margin-bottom: var(--space-xs);
    color: var(--color-text);
    font-size: 0.75rem;
    font-weight: 500;
    letter-spacing: 0.14em;
    text-transform: uppercase;
  }

  .form-field :where(input, select, textarea),
  .contact-form :where(input, select, textarea),
  .appointment-form :where(input, select, textarea),
  .schedule-form :where(input, select, textarea) {
    width: 100%;
    min-height: 3.5rem;
    padding: 0.85rem 1rem;
    border: 1px solid var(--color-line);
    border-radius: var(--radius-sm);
    background: var(--color-bg);
    box-shadow: none;
    color: var(--color-text);
    font: inherit;
    transition: border-color var(--transition-fast), outline-color var(--transition-fast);

    &:hover { border-color: color-mix(in srgb, var(--color-text) 42%, transparent); }
    &:focus { border-color: var(--color-text); outline: 1px solid var(--color-text); outline-offset: 2px; }
  }

  .form-field textarea,
  .contact-form textarea,
  .appointment-form textarea,
  .schedule-form textarea { min-height: 9rem; resize: vertical; }

  .form-consent { display: grid; grid-template-columns: auto 1fr; gap: 0.75rem; align-items: start; }
  .form-consent input { width: 1.125rem; min-height: 0; height: 1.125rem; margin-top: 0.25rem; padding: 0; accent-color: var(--color-primary); }
  .form-consent label { margin: 0; line-height: 1.55; text-transform: none; }
  .form-help, .required-note, .appointment-confirmation { color: var(--color-text-muted); font-size: 0.85rem; }
  .form-help { margin: var(--space-xs) 0 0; line-height: 1.5; }
  .required-note { margin: 0; }
  .appointment-confirmation { margin: 0; padding-bottom: var(--space-md); border-bottom: 1px solid var(--color-line); line-height: 1.6; }
  .required-indicator { color: var(--color-text); font-weight: 500; }
  .form-optional { color: var(--color-text-muted); font-size: 0.68rem; font-weight: 300; letter-spacing: 0.08em; }
  .contact-utility .contact-form {
    padding: var(--space-lg);
    border: 0;
    border-left: 1px solid var(--color-line);
  }

  .contact-form-header {
    display: flex;
    align-items: baseline;
    justify-content: space-between;
    gap: var(--space-md);
    padding-bottom: var(--space-md);
    border-bottom: 1px solid var(--color-line);
  }

  .contact-form .form-submit,
  .appointment-form .form-submit { justify-self: start; }
  .honeypot, [name="bot-field"] { position: absolute; left: -10000px; width: 1px; height: 1px; overflow: hidden; }

  /* Embedded Apex IDX property search */
  .idx-search {
    width: 100%;
    background: var(--color-bg);
    line-height: 0;
  }

  .idx-search iframe {
    display: block;
    width: 100%;
    height: calc(100vh - 5rem);
    min-height: 50rem;
    border: 0;
  }

  /* Accordion */
  .faq-list { border-top: 1px solid var(--color-line); }
  .accordion-item { border-bottom: 1px solid var(--color-line); }
  .accordion-trigger {
    display: flex;
    width: 100%;
    align-items: center;
    justify-content: space-between;
    gap: var(--space-md);
    padding: var(--space-md) 0;
    border: 0;
    background: transparent;
    color: var(--color-text);
    cursor: pointer;
    font-size: 1rem;
    font-weight: 400;
    text-align: left;

    &:hover { color: var(--color-text-muted); }
  }
  .accordion-icon { transition: transform var(--transition-base); }
  .accordion-panel { display: grid; grid-template-rows: 0fr; transition: grid-template-rows var(--transition-base); }
  .accordion-content { overflow: hidden; color: var(--color-text-muted); }
  .accordion-content > :last-child { padding-bottom: var(--space-md); }
  .accordion-item.is-open .accordion-panel { grid-template-rows: 1fr; }
  .accordion-item.is-open .accordion-icon { transform: rotate(45deg); }

  /* Legal reading pages */
  .legal-content {
    width: min(100%, 60rem);
    margin-inline: auto;
    padding: var(--space-xl) var(--container-padding);

    & .legal-content-header {
      padding-bottom: var(--space-lg);
      border-bottom: 1px solid var(--color-line);
    }

    & .legal-content-eyebrow {
      margin: 0 0 var(--space-sm);
      color: var(--color-text-muted);
      font-size: 0.75rem;
      font-weight: 400;
      letter-spacing: 0.2em;
      text-transform: uppercase;
    }

    & h1 {
      margin: 0;
      font-size: 2.5rem;
      font-weight: 200;
      text-transform: uppercase;
    }

    & .legal-content-intro {
      max-width: 44rem;
      margin: var(--space-md) 0 0;
      color: var(--color-text-muted);
      font-size: 1.05rem;
    }

    & .last-updated {
      margin: var(--space-md) 0 0;
      color: var(--color-text-muted);
      font-size: 0.75rem;
      font-weight: 400;
      letter-spacing: 0.12em;
      text-transform: uppercase;
    }

    & .legal-content-nav {
      display: flex;
      flex-wrap: wrap;
      gap: var(--space-xs) var(--space-md);
      margin-top: var(--space-lg);
      padding-top: var(--space-sm);
      border-top: 1px solid var(--color-line);
    }

    & .legal-content-nav a {
      color: var(--color-text);
      font-size: 0.72rem;
      font-weight: 400;
      letter-spacing: 0.14em;
      text-transform: uppercase;
    }

    & .legal-content-sections { max-width: 48rem; }

    & .legal-content-section {
      padding-block: var(--space-lg);
      border-bottom: 1px solid var(--color-line);
    }

    & .legal-content-section h2 {
      margin: 0;
      font-size: 1.35rem;
      line-height: 1.2;
    }

    & .legal-content-section p {
      margin: var(--space-sm) 0 0;
      color: var(--color-text);
      line-height: 1.8;
      overflow-wrap: anywhere;
    }
  }

  /* Onyx and paper invitation bands */
  .call-to-action {
    padding-block: var(--space-xl);
    border-block: 1px solid var(--color-line-inverse);
    background: var(--color-bg-dark);
    color: var(--color-text-inverse);

    & .call-to-action-inner {
      display: grid;
      min-height: 20rem;
      grid-template-columns: repeat(12, minmax(0, 1fr));
      gap: var(--space-lg);
      align-items: center;
    }

    & .call-to-action-copy { grid-column: 1 / span 7; }

    & .call-to-action-eyebrow {
      margin: 0 0 var(--space-md);
      color: var(--color-text-inverse-muted);
      font-family: var(--font-editorial);
      font-size: 0.9rem;
      letter-spacing: 0.08em;
    }

    & h2 {
      margin: 0;
      color: var(--color-text-inverse);
      font-size: 2.75rem;
      font-weight: 200;
      text-transform: uppercase;
    }

    & .call-to-action-body {
      max-width: 42rem;
      margin: var(--space-lg) 0 0;
      padding-top: var(--space-md);
      border-top: 1px solid var(--color-line-inverse);
      color: var(--color-text-inverse-muted);
    }

    & .call-to-action-actions {
      display: grid;
      grid-column: 9 / -1;
      gap: var(--space-sm);
      align-content: center;
    }

    & .call-to-action-action {
      display: inline-flex;
      min-height: 3.5rem;
      align-items: center;
      justify-content: center;
      padding: 1rem 1.5rem;
      border: 1px solid var(--color-line-inverse);
      border-radius: 0;
      background: transparent;
      color: var(--color-text-inverse);
      font-size: 0.78rem;
      font-weight: 400;
      letter-spacing: 0.18em;
      line-height: 1;
      text-align: center;
      text-decoration: none;
      text-transform: uppercase;
      transition: background-color var(--transition-fast), color var(--transition-fast), border-color var(--transition-fast);

      &:hover {
        border-color: var(--color-text-inverse);
        background: var(--color-text-inverse);
        color: var(--color-text);
      }
    }

    & .call-to-action-action--secondary { border-color: color-mix(in srgb, var(--color-text-inverse) 46%, transparent); }

    &.call-to-action--paper {
      border-color: var(--color-line);
      background: var(--color-bg-alt);
      color: var(--color-text);

      & .call-to-action-eyebrow,
      & .call-to-action-body { color: var(--color-text-muted); }
      & h2 { color: var(--color-heading); }
      & .call-to-action-body { border-color: var(--color-line); }
      & .call-to-action-action { border-color: var(--color-line); color: var(--color-text); }
      & .call-to-action-action--primary { border-color: var(--color-text); }
      & .call-to-action-action:hover { border-color: var(--color-text); background: var(--color-text); color: var(--color-text-inverse); }
    }

    @media (max-width: 767px) {
      & .call-to-action-inner {
        min-height: 0;
        grid-template-columns: 1fr;
        gap: var(--space-xl);
      }

      & .call-to-action-copy,
      & .call-to-action-actions { grid-column: 1; }
      & h2 { font-size: 2.5rem; }
    }

    @media (max-width: 480px) {
      & .call-to-action-actions { width: 100%; }
      & .call-to-action-action { width: 100%; padding-inline: var(--space-sm); }
    }
  }

  @media (max-width: 1100px) {
    .page-hero.page-hero--property .page-hero-inner { min-height: 36rem; }
    .page-hero.page-hero--property .page-hero-content { padding: var(--space-2xl) 2rem var(--space-xl); }
    .page-hero:is(.page-hero--service, .page-hero--personal) .page-hero-inner { height: 32rem; grid-template-columns: minmax(22rem, 1fr) minmax(0, 1fr); }
    .page-hero:is(.page-hero--service, .page-hero--personal) .page-hero-media { height: 32rem; }
    .page-hero.page-hero--service .page-hero-inner,
    .page-hero.page-hero--service .page-hero-media { height: 36rem; }
    .page-hero:is(.page-hero--service, .page-hero--personal) .page-hero-content,
    .page-hero:is(.page-hero--service, .page-hero--personal).page-hero--reverse .page-hero-content { padding: var(--space-lg) 2rem; }

    .site-header .header-inner { grid-template-columns: 1fr auto; }
    .site-nav { display: none; }
    .nav-toggle { display: flex; justify-self: end; }

    .site-nav.mobile-nav {
      position: fixed;
      inset: 0;
      z-index: 1100;
      display: grid;
      grid-template-rows: auto minmax(0, 1fr) auto;
      align-items: stretch;
      justify-content: stretch;
      gap: var(--space-md);
      padding: var(--container-padding);
      overflow-y: auto;
      background: var(--color-bg);
      opacity: 0;
      pointer-events: none;
      transform: translateX(100%);
      transition: opacity var(--transition-base), transform var(--transition-base), visibility var(--transition-base);
      visibility: hidden;

      &.is-open {
        opacity: 1;
        pointer-events: auto;
        transform: translateX(0);
        visibility: visible;
      }

      & .mobile-nav-header {
        display: flex;
        align-items: center;
        justify-content: space-between;
        gap: var(--space-md);
        padding-bottom: var(--space-sm);
        border-bottom: 1px solid var(--color-line);
      }

      & .mobile-nav-brand {
        font-size: 0.72rem;
        font-weight: 400;
        letter-spacing: 0.18em;
        text-transform: uppercase;
      }

      & .nav-close { display: flex; }
      & .nav-links { display: grid; align-content: center; align-items: stretch; gap: 0; }
      & .nav-link, & [data-yg-dropdown] { width: 100%; justify-content: space-between; padding: 1rem 0; border-bottom: 1px solid var(--color-line); font-size: 1rem; }

      & .dropdown-panel {
        position: static;
        display: none;
        min-width: 0;
        margin: 0;
        padding: 0 0 0 var(--space-sm);
        border: 0;
        opacity: 1;
        pointer-events: auto;
        transform: none;
        visibility: visible;

        &.is-open { display: grid; transform: none; }
        & a { padding: 0.75rem 0; font-size: 0.76rem; }
      }

      & .nav-cta { width: 100%; }
    }

    .footer-grid { grid-template-columns: repeat(2, minmax(0, 1fr)); }
    .footer-grid > :where(section, nav) { border-bottom: 1px solid var(--color-line-inverse); }
    .footer-grid > :where(section, nav):nth-child(2n) { padding-right: 0; border-right: 0; }
    .footer-grid > :where(section, nav):nth-child(2n + 1) { padding-left: 0; }
    .footer-grid > :where(section, nav):nth-last-child(-n + 2) { border-bottom: 0; }
    .services-grid { grid-template-columns: repeat(2, minmax(0, 1fr)); }
    .testimonials--grid .testimonials-track { column-count: 2; }
    .credentials { grid-template-columns: repeat(3, minmax(0, 1fr)); }
    .service-index-inner { grid-template-columns: minmax(13rem, 4fr) minmax(0, 8fr); gap: var(--space-lg); }
    .service-index-item, .service-index-item:nth-child(4n + 2), .service-index-item:nth-child(4n + 3) { grid-column: span 6; }
    .process-steps { grid-template-columns: repeat(2, minmax(0, 1fr)); }
    .process-step:nth-child(2) { border-right: 0; }
    .process-step:nth-child(-n + 2) { border-bottom: 1px solid var(--color-line); }
  }

  @media (max-width: 767px) {
    .site-header > .container, .site-header .header-inner { min-height: 4.75rem; grid-template-columns: 1fr auto; }
    .site-logo-image { width: 5.5rem; }
    .site-logo-text { font-size: 0.78rem; letter-spacing: 0.14em; }

    .home-hero, .hero { min-height: 42rem; }
    .home-hero .home-hero-content, .hero .hero-content { padding-block: var(--space-2xl) var(--space-xl); }
    .home-hero h1, .hero h1 { font-size: 2.75rem; }

    .page-hero .page-hero-inner {
      min-height: 25rem;
      grid-template-columns: minmax(0, 1fr) 2rem;
    }

    .page-hero .page-hero-content {
      padding: var(--space-xl) var(--space-md) var(--space-xl) 0;
    }

    .page-hero.page-hero--with-image .page-hero-inner {
      position: relative;
      grid-template-columns: 1fr;
    }

    .page-hero.page-hero--with-image .page-hero-content {
      position: relative;
      z-index: 1;
      border-right: 0;
    }

    .page-hero.page-hero--with-image .page-hero-media {
      position: absolute;
      inset: 0;
      border-right: 0;
    }

    .page-hero.page-hero--with-image .page-hero-media::after {
      position: absolute;
      inset: 0;
      background: linear-gradient(90deg, rgba(0, 0, 0, 0.82), rgba(0, 0, 0, 0.5));
      content: "";
    }

    .page-hero.page-hero--property .page-hero-inner {
      min-height: 34rem;
      grid-template-columns: 1fr;
    }

    .page-hero.page-hero--property .page-hero-content {
      grid-column: 1;
      grid-row: 1;
      align-content: end;
      padding: 7rem var(--container-padding) var(--space-lg);
      border: 0;
    }

    .page-hero.page-hero--property h1 { max-width: none; font-size: 2.5rem; }
    .page-hero.page-hero--property .page-hero-body { margin-top: var(--space-md); line-height: 1.55; }

    .page-hero.page-hero--property .page-hero-media {
      position: absolute;
      inset: 0;
      grid-column: 1;
      grid-row: 1;
      height: auto;
      min-height: 0;
    }

    .page-hero.page-hero--property .page-hero-media::after {
      background: linear-gradient(0deg, rgba(8, 10, 10, 0.92) 0%, rgba(8, 10, 10, 0.68) 58%, rgba(8, 10, 10, 0.22) 100%);
      content: "";
    }
    .page-hero.page-hero--property .page-hero-media img { object-position: center center; }
    .page-hero.page-hero--property .page-hero-action {
      width: 100%;
      min-height: 3.25rem;
      margin-top: var(--space-md);
      padding: 0.85rem 1rem;
    }

    .page-hero:is(.page-hero--service, .page-hero--personal) .page-hero-inner {
      height: auto;
      min-height: 0;
      grid-template-columns: 1fr;
    }

    .page-hero:is(.page-hero--service, .page-hero--personal) .page-hero-content,
    .page-hero:is(.page-hero--service, .page-hero--personal).page-hero--reverse .page-hero-content {
      grid-column: 1;
      grid-row: 2;
      padding: 2rem var(--container-padding);
      border-top: 1px solid var(--color-line);
    }

    .page-hero:is(.page-hero--service, .page-hero--personal) h1 { font-size: 2.25rem; }
    .page-hero:is(.page-hero--service, .page-hero--personal) .page-hero-body { margin-top: var(--space-md); line-height: 1.55; }

    .page-hero:is(.page-hero--service, .page-hero--personal) .page-hero-media,
    .page-hero:is(.page-hero--service, .page-hero--personal).page-hero--reverse .page-hero-media {
      position: relative;
      inset: auto;
      grid-column: 1;
      grid-row: 1;
      height: 14rem;
      min-height: 0;
      border-right: 0;
      border-left: 0;
    }

    .page-hero.page-hero--service .page-hero-inner,
    .page-hero.page-hero--personal .page-hero-inner { height: auto; }
    .page-hero.page-hero--service .page-hero-media,
    .page-hero.page-hero--personal .page-hero-media { height: 14rem; }
    .page-hero:is(.page-hero--service, .page-hero--personal) .page-hero-media::after { content: none; }
    .page-hero:is(.page-hero--service, .page-hero--personal) .page-hero-action {
      width: 100%;
      min-height: 3.25rem;
      margin-top: var(--space-md);
      padding: 0.85rem 1rem;
    }

    .editorial-split--with-image .editorial-split-inner,
    .editorial-split--reverse.editorial-split--with-image .editorial-split-inner,
    .split-inner,
    .contact-layout,
    .schedule-layout { grid-template-columns: 1fr; }
    .contact-utility-header { grid-template-columns: 1fr; }
    .contact-utility-header .contact-utility-intro { max-width: 42rem; }
    .contact-utility .contact-form { border-top: 1px solid var(--color-line); border-left: 0; }
    .editorial-split--reverse .editorial-split-media { order: initial; border-left: 0; }
    .editorial-split-media { border-right: 0; border-bottom: 1px solid var(--color-line); }
    .editorial-split-media img { min-height: 0; aspect-ratio: 4 / 3; }
    .split-section .split-inner { height: auto; }
    .split-section .split-media,
    .split-section .split-content { order: initial; }
    .split-section .split-media { height: auto; aspect-ratio: 16 / 9; }
    .split-section .split-content { max-width: none; padding: var(--space-xl) var(--container-padding); }
    .split-section .split-content h2 { font-size: 2.5rem; }
    .footer-intro, .footer-grid, .footer-compliance, .services-grid, .credentials { grid-template-columns: 1fr; }
    .testimonials--grid .testimonials-track {
      border-top: 1px solid var(--color-line);
      border-left: 1px solid var(--color-line);
      column-count: 1;
    }
    .testimonials--grid .testimonial-card {
      display: block;
      margin-bottom: 0;
      border-top: 0;
      border-left: 0;
    }
    .service-index-inner { grid-template-columns: 1fr; }
    .service-index-header { position: static; }
    .service-index-item, .service-index-item:nth-child(4n + 2), .service-index-item:nth-child(4n + 3) { grid-column: 1 / -1; }
    .service-index-card--image,
    .service-index-card--image .service-index-card-content { min-height: 20rem; }
    .service-index-card--image .service-index-card-content { padding: var(--space-md); }
    .footer-intro { align-items: start; }
    .footer-grid > :where(section, nav) { padding-inline: 0; border-right: 0; border-bottom: 1px solid var(--color-line-inverse); }
    .footer-grid > :where(section, nav):nth-last-child(-n + 2) { border-bottom: 1px solid var(--color-line-inverse); }
    .footer-grid > :where(section, nav):last-child { border-bottom: 0; }
    .footer-bottom { flex-direction: column; }
    .service-card, .credential { border-right: 1px solid var(--color-line); }

    .process-steps { grid-template-columns: 1fr; }
    .process-step { border-right: 0; border-bottom: 1px solid var(--color-line); }
    .process-step:last-child { border-bottom: 0; }

    .listing-facts { grid-template-columns: 1fr; }
    .listing-fact { border-right: 0; border-bottom: 1px solid var(--color-line); }
    .listing-fact:last-child { border-bottom: 0; }
  }

  @media (max-width: 480px) {
    .section, .content-section { padding-block: var(--space-xl); }
    .split-section .split-content { padding-block: var(--space-xl); }
    .split-section .split-action { width: 100%; padding-inline: var(--space-sm); }
    .editorial-split-content { padding: var(--space-xl) var(--container-padding); }
    .editorial-split-action { width: 100%; padding-inline: var(--space-sm); }
    .form-grid { grid-template-columns: minmax(0, 1fr); }
    .form-field, .form-field-full, .form-field--full, .form-consent { grid-column: 1; }
    .contact-form, .appointment-form, .schedule-form, .form-panel,
    .contact-utility .contact-form, .contact-details-copy { padding: var(--space-sm); }
    .contact-utility-header h1 { font-size: 2.25rem; }
    .contact-form-header { display: grid; }
    .contact-details-list > div { grid-template-columns: 1fr; }
    .contact-details-list dd { grid-column: 1; }
    .form-submit, .btn-primary, .btn-ghost, .action-link, .outlined-action { width: 100%; padding-inline: var(--space-sm); }
    .cta-actions, .home-hero-actions { display: grid; grid-template-columns: 1fr; width: 100%; }
    .home-hero-action { width: 100%; }
    .testimonials-header { grid-template-columns: 1fr; }
    .testimonials-header h2, .testimonials-header .testimonials-intro { grid-column: 1; }
    .testimonials-control { width: 2.75rem; height: 2.75rem; }
  }

  @media (prefers-reduced-motion: reduce) {
    *, *::before, *::after { scroll-behavior: auto; transition-duration: 0.01ms; }
  }
}