.hero {
      width: var(--page);
      margin: 0 auto;
      height: clamp(520px, calc(100svh - 126px), 600px);
      padding: 0;
      display: grid;
      grid-template-columns: minmax(0, 590px) minmax(280px, 1fr);
      gap: clamp(32px, 5vw, 70px);
    }

    .hero-copy {
      padding: 40px 0;
      display: flex;
      align-items: center;
    }

    .hero-copy-inner {
      max-width: 590px;
    }

    .hero h1 {
      margin: 0;
      font-size: inherit;
      font-weight: 400;
      letter-spacing: -.055em;
      line-height: .95;
    }

    .hero h1 em {
      display: block;
      color: var(--wine);
      font-family: var(--serif);
      font-size: clamp(52px, 5.2vw, 82px);
      font-weight: 400;
      white-space: nowrap;
    }

    .hero h1 span {
      display: block;
      margin-top: 8px;
      font-size: clamp(50px, 5.2vw, 80px);
      font-weight: 300;
    }

    .mobile-break {
      display: none;
    }

    .hero-intro {
      max-width: 590px;
      margin: 34px 0 28px;
      color: var(--copy);
      font-size: 16px;
      line-height: 1.8;
    }

    .hero-media {
      position: relative;
      width: min(100%, 338px);
      height: 100%;
      max-height: 575px;
      align-self: start;
      justify-self: start;
      margin-top: 18px;
      margin-left: clamp(0px, calc((100vw - 1100px) * .28), 60px);
      min-height: 0;
      overflow: hidden;
      background: var(--mist);
      border: 1px solid var(--line);
    }

    .hero-video {
      position: absolute;
      inset: 0;
      display: block;
      width: 100%;
      height: 100%;
      object-fit: cover;
      object-position: center 50%;
    }

    .intro {
      padding: 150px 0 140px;
      display: grid;
      grid-template-columns: .82fr 1.18fr;
      gap: 11vw;
    }

    .section-title {
      margin: 0;
      font-size: inherit;
      font-weight: 400;
      letter-spacing: -.045em;
      line-height: .98;
    }

    .section-title em {
      display: block;
      color: var(--wine);
      font-family: var(--serif);
      font-size: clamp(48px, 5.2vw, 78px);
      font-weight: 400;
    }

    .section-title span {
      display: block;
      margin-top: 6px;
      font-size: clamp(44px, 4.8vw, 72px);
      font-weight: 300;
    }

    .intro-story {
      max-width: 650px;
      margin: 4px 0 46px;
      color: var(--copy);
      font-family: var(--serif);
      font-size: clamp(19px, 1.65vw, 23px);
      line-height: 1.75;
    }

    .service-list {
      border-top: 1px solid var(--line);
    }

    .service-row {
      min-height: 76px;
      display: grid;
      grid-template-columns: 54px 1fr auto;
      align-items: center;
      gap: 18px;
      border-bottom: 1px solid var(--line);
    }

    .service-row .service-name {
      transition: color .2s ease;
    }

    .service-row:hover .service-name {
      color: var(--wine);
    }

    .service-num {
      color: var(--wine);
      font-family: var(--serif);
      font-size: 13px;
      font-style: italic;
    }

    .service-name {
      font-size: 17px;
      font-weight: 480;
      letter-spacing: -.01em;
    }

    .service-note {
      color: var(--muted);
      font-size: 12px;
      letter-spacing: .05em;
      white-space: nowrap;
    }

    .service-help {
      margin: 30px 0 0;
      color: var(--muted);
      font-size: 14px;
      line-height: 1.8;
    }

    .service-more {
      margin-top: 30px;
    }

    .service-more + .service-help {
      margin-top: 20px;
    }

    .service-help .text-link {
      margin-left: 5px;
      font-size: 15px;
    }

    .nail-art {
      padding: 132px 0 150px;
      background: var(--mist);
    }

    .section-head {
      margin-bottom: 72px;
      display: grid;
      grid-template-columns: 1fr .7fr;
      align-items: end;
      gap: 80px;
    }

    .section-head-copy {
      max-width: 480px;
      margin: 0 0 5px;
      color: var(--copy);
      font-size: 16px;
      line-height: 1.85;
    }

    .nail-grid {
      display: grid;
      grid-template-columns: 1.18fr .82fr .82fr;
      grid-template-rows: 305px 350px;
      gap: 18px;
    }

    .nail-grid figure,
    .interior-grid figure {
      margin: 0;
      overflow: hidden;
      background: #e7e5e2;
    }

    .nail-grid img,
    .interior-grid img {
      height: 100%;
      object-fit: cover;
      transition: transform .5s ease;
    }

    .nail-grid figure:hover img,
    .interior-grid figure:hover img {
      transform: scale(1.018);
    }

    .nail-grid .large {
      grid-row: 1 / 3;
    }

    .nail-grid .wide {
      grid-column: 2 / 4;
    }

    .nail-footer {
      margin-top: 34px;
      display: flex;
      align-items: center;
      justify-content: space-between;
      gap: 30px;
    }

    .nail-footer p {
      margin: 0;
      color: var(--muted);
      font-size: 13px;
    }

    .interior {
      padding: 150px 0 164px;
    }

    .interior-layout {
      display: grid;
      grid-template-columns: .75fr 1.25fr;
      gap: 9vw;
      align-items: start;
    }

    .interior-copy {
      position: sticky;
      top: 172px;
    }

    .interior-copy > p {
      max-width: 410px;
      margin: 38px 0 30px;
      color: var(--copy);
      font-size: 16px;
      line-height: 1.9;
    }

    .interior-grid {
      display: grid;
      grid-template-columns: repeat(2, minmax(0, 1fr));
      grid-auto-rows: 390px;
      gap: 18px;
    }

    .interior-grid figure:nth-child(2),
    .interior-grid figure:nth-child(4) {
      transform: translateY(62px);
    }

    .visit {
      padding: 135px 0 124px;
      background: var(--night);
      color: #fff;
    }

    .visit-layout {
      display: grid;
      grid-template-columns: 1.2fr .8fr;
      align-items: start;
      gap: 10vw;
    }

    .visit .eyebrow {
      color: #c58e87;
    }

    .visit .section-title em {
      color: #c58e87;
    }

    .visit-details {
      margin-top: 8px;
      border-top: 1px solid #5f5f5f;
    }

    .visit-row {
      padding: 24px 0;
      display: grid;
      grid-template-columns: 90px 1fr;
      gap: 24px;
      border-bottom: 1px solid #5f5f5f;
    }

    .visit-row strong {
      color: #aaa5a1;
      font-size: 10px;
      font-weight: 600;
      letter-spacing: .17em;
      text-transform: uppercase;
    }

    .visit-row p {
      margin: 0;
      color: #eeeae7;
      font-size: 14px;
      line-height: 1.75;
    }

    .visit-actions {
      margin-top: 34px;
      display: flex;
      flex-wrap: wrap;
      gap: 28px;
    }

    .visit .text-link {
      color: #e0aca5;
    }

    @media (max-width: 980px) {
      .intro {
        gap: 70px;
      }

      .section-head {
        gap: 50px;
      }

      .interior-layout {
        gap: 60px;
      }

      .interior-grid {
        grid-auto-rows: 320px;
      }
    }

    @media (max-width: 700px) {
      .hero {
        height: auto;
        display: flex;
        flex-direction: column;
        gap: 16px;
      }

      .hero-copy {
        min-height: 0;
        padding: 52px 0 44px;
      }

      .hero h1 em {
        font-size: clamp(42px, 12vw, 56px);
      }

      .hero h1 span {
        font-size: clamp(46px, 13.5vw, 60px);
      }

      .hero-intro {
        margin: 26px 0 22px;
        font-size: 15px;
        line-height: 1.7;
      }

      .hero-media {
        width: 100vw;
        height: auto;
        aspect-ratio: 9 / 16;
        max-height: none;
        align-self: center;
        margin-top: 0;
        margin-left: calc(50% - 50vw);
        min-height: 0;
      }

      .intro {
        padding: 112px 0 105px;
        display: block;
      }

      .intro-content {
        margin-top: 58px;
      }

      .intro-story {
        font-size: 19px;
      }

      .service-row {
        grid-template-columns: 38px 1fr;
      }

      .service-note {
        display: none;
      }

      .service-help .text-link {
        margin: 8px 0 0;
      }

      .nail-art {
        padding: 105px 0 114px;
      }

      .section-head {
        margin-bottom: 52px;
        display: block;
      }

      .section-head-copy {
        margin-top: 38px;
      }

      .nail-grid {
        grid-template-columns: repeat(2, 1fr);
        grid-template-rows: 300px 230px 260px;
        gap: 10px;
      }

      .nail-grid .large {
        grid-column: 1 / 3;
        grid-row: 1;
      }

      .nail-grid .wide {
        grid-column: 1 / 3;
        grid-row: 3;
      }

      .nail-footer {
        align-items: flex-start;
        flex-direction: column;
        gap: 18px;
      }

      .interior {
        padding: 112px 0 124px;
      }

      .interior-layout {
        display: block;
      }

      .interior-copy {
        position: static;
      }

      .interior-copy > p {
        margin-top: 36px;
      }

      .interior-grid {
        margin-top: 60px;
        grid-auto-rows: 260px;
        gap: 10px;
      }

      .interior-grid figure:nth-child(2),
      .interior-grid figure:nth-child(4) {
        transform: none;
      }

      .visit {
        padding: 105px 0 96px;
      }

      .visit-layout {
        display: block;
      }

      .visit-details {
        margin-top: 62px;
      }

      .visit-row {
        grid-template-columns: 72px 1fr;
        gap: 16px;
      }

      .visit-actions {
        align-items: flex-start;
        flex-direction: column;
        gap: 22px;
      }

    }

    @media (prefers-reduced-motion: reduce) {
      html {
        scroll-behavior: auto;
      }

      .nail-grid img,
      .interior-grid img {
        transition: none;
      }
    }