:root {
      --ink: #271b1a;
      --ink-soft: #5f4c49;
      --cocoa: #4e302e;
      --cocoa-deep: #33201f;
      --rose: #c98287;
      --rose-deep: #ad666c;
      --blush: #ead0d0;
      --powder: #f6e9e6;
      --cream: #fffaf7;
      --white: #ffffff;
      --line: rgba(78, 48, 46, .16);
      --shadow: 0 28px 70px rgba(63, 39, 37, .16);
      --serif: "DM Sans", Arial, sans-serif;
      --sans: "DM Sans", Arial, sans-serif;
      --container: min(1180px, calc(100% - 40px));
      --radius-lg: 34px;
      --radius-md: 24px;
    }

    * { box-sizing: border-box; }

    html {
      width: 100%;
      max-width: 100%;
      background: var(--cream);
      scroll-behavior: smooth;
      scroll-padding-top: 90px;
      overflow-x: hidden;
      overscroll-behavior-x: none;
    }

    body {
      position: relative;
      width: 100%;
      max-width: 100%;
      margin: 0;
      color: var(--ink);
      background: var(--cream);
      font-family: var(--sans);
      font-size: 16px;
      line-height: 1.7;
      overflow-x: hidden;
      overscroll-behavior-x: none;
      text-rendering: optimizeLegibility;
    }

    @supports (overflow: clip) {
      html,
      body { overflow-x: clip; }
    }

    main {
      width: 100%;
      max-width: 100%;
      overflow-x: hidden;
    }

    @supports (overflow: clip) {
      main { overflow-x: clip; }
    }

    body.menu-open { overflow: hidden; }

    img {
      display: block;
      width: 100%;
      height: 100%;
      object-fit: cover;
    }

    a { color: inherit; text-decoration: none; }
    button, input, textarea { font: inherit; }
    button { color: inherit; }

    h1, h2, h3, p { margin-top: 0; }

    h1, h2 {
      font-family: var(--serif);
      font-weight: 600;
      letter-spacing: -.045em;
      line-height: 1.12;
    }

    h1 {
      max-width: 620px;
      margin-bottom: 22px;
      font-size: clamp(2.5rem, 4.5vw, 4rem);
      text-align: center;
    }

    h2 {
      margin-bottom: 20px;
      font-size: clamp(2rem, 3.4vw, 3.1rem);
    }

    h3 {
      margin-bottom: 10px;
      font-size: 1.12rem;
      font-weight: 600;
      line-height: 1.35;
    }

    ::selection { color: var(--white); background: var(--rose-deep); }

    .container {
      width: var(--container);
      max-width: 100%;
      margin-inline: auto;
    }

    .eyebrow {
      margin-bottom: 20px;
      color: var(--rose-deep);
      font-size: .72rem;
      font-weight: 700;
      letter-spacing: .18em;
      line-height: 1.3;
      text-transform: uppercase;
    }

    .eyebrow.light { color: #e8b9bb; }

    .section-intro {
      max-width: 560px;
      color: var(--ink-soft);
      font-size: 1rem;
    }

    .scroll-progress {
      position: fixed;
      z-index: 1001;
      inset: 0 auto auto 0;
      width: 0;
      max-width: 100%;
      height: 3px;
      background: var(--rose-deep);
      pointer-events: none;
    }

    .site-header {
      position: fixed;
      z-index: 1000;
      inset: 0 0 auto;
      width: 100%;
      max-width: 100%;
      padding: 18px 0;
      transition: padding .35s ease, background .35s ease, box-shadow .35s ease;
    }

    .site-header.scrolled {
      padding: 10px 0;
      background: rgba(255, 250, 247, .88);
      box-shadow: 0 1px 0 rgba(78, 48, 46, .09);
      backdrop-filter: blur(18px);
    }

    .nav-shell {
      display: flex;
      align-items: center;
      justify-content: space-between;
      min-height: 52px;
    }

    .brand {
      position: relative;
      z-index: 3;
      display: inline-flex;
      align-items: center;
      gap: 10px;
    }

    .brand-mark {
      display: grid;
      width: 36px;
      height: 36px;
      place-items: center;
      border: 1px solid rgba(173, 102, 108, .34);
      border-radius: 50%;
      color: var(--rose-deep);
      background: rgba(255, 255, 255, .58);
      font-family: var(--serif);
      font-size: 1.4rem;
      font-weight: 600;
      line-height: 1;
    }

    .brand-name {
      font-family: var(--serif);
      font-size: 1.25rem;
      font-weight: 600;
      letter-spacing: -.035em;
      line-height: 1;
    }

    .brand-name small {
      display: block;
      margin-top: 5px;
      font-family: var(--sans);
      font-size: .48rem;
      font-weight: 600;
      letter-spacing: .24em;
      text-transform: uppercase;
    }

    .nav-links {
      display: flex;
      align-items: center;
      gap: 30px;
      margin-left: auto;
      margin-right: 28px;
    }

    .nav-links a {
      position: relative;
      color: var(--ink-soft);
      font-size: .78rem;
      font-weight: 600;
      letter-spacing: .04em;
      transition: color .25s ease;
    }

    .nav-links a::after {
      content: "";
      position: absolute;
      inset: auto 0 -8px;
      height: 1px;
      background: var(--rose-deep);
      transform: scaleX(0);
      transform-origin: right;
      transition: transform .3s ease;
    }

    .nav-links a:hover,
    .nav-links a.active { color: var(--ink); }

    .nav-links a:hover::after,
    .nav-links a.active::after {
      transform: scaleX(1);
      transform-origin: left;
    }

    .header-cta,
    .button {
      display: inline-flex;
      min-height: 48px;
      align-items: center;
      justify-content: center;
      border: 1px solid transparent;
      border-radius: 999px;
      cursor: pointer;
      font-size: .78rem;
      font-weight: 700;
      letter-spacing: .055em;
      line-height: 1;
      text-align: center;
      transition: transform .25s ease, box-shadow .25s ease, background .25s ease, color .25s ease, border-color .25s ease;
    }

    .header-cta {
      position: relative;
      z-index: 3;
      min-height: 44px;
      padding: 0 22px;
      color: var(--white);
      background: var(--cocoa);
    }

    .button { padding: 0 27px; }

    .button-primary {
      color: var(--white);
      background: var(--cocoa);
      box-shadow: 0 16px 34px rgba(78, 48, 46, .19);
    }

    .button-secondary {
      color: var(--cocoa);
      border-color: rgba(78, 48, 46, .22);
      background: rgba(255, 255, 255, .48);
    }

    .button-light {
      color: var(--cocoa-deep);
      background: var(--white);
    }

    .header-cta:hover,
    .button:hover {
      transform: translateY(-2px);
      box-shadow: 0 18px 38px rgba(78, 48, 46, .24);
    }

    .menu-toggle {
      position: relative;
      z-index: 3;
      display: none;
      width: 45px;
      height: 45px;
      padding: 0;
      border: 1px solid var(--line);
      border-radius: 50%;
      background: rgba(255, 255, 255, .7);
      cursor: pointer;
    }

    .menu-toggle span {
      position: absolute;
      left: 12px;
      width: 19px;
      height: 1px;
      background: var(--ink);
      transition: transform .3s ease, top .3s ease;
    }

    .menu-toggle span:first-child { top: 18px; }
    .menu-toggle span:last-child { top: 25px; }
    .menu-open .menu-toggle span:first-child { top: 21px; transform: rotate(45deg); }
    .menu-open .menu-toggle span:last-child { top: 21px; transform: rotate(-45deg); }

    .hero {
      position: relative;
      display: grid;
      min-height: 100svh;
      align-items: center;
      padding: 124px 0 68px;
      overflow: hidden;
      background:
        radial-gradient(circle at 82% 16%, rgba(234, 208, 208, .65), transparent 27%),
        linear-gradient(130deg, #fffaf7 0%, #fbf2ee 58%, #f3dcda 100%);
    }

    .hero::before {
      content: "";
      position: absolute;
      top: 18%;
      left: -110px;
      width: 280px;
      height: 280px;
      border: 1px solid rgba(173, 102, 108, .16);
      border-radius: 50%;
    }

    .hero-grid {
      position: relative;
      z-index: 2;
      display: grid;
      grid-template-columns: minmax(0, .92fr) minmax(420px, 1.08fr);
      align-items: center;
      gap: clamp(45px, 7vw, 100px);
    }

    .hero-copy {
      min-width: 0;
      padding: 36px 0;
    }

    .hero h1 em {
      color: var(--rose-deep);
      font-style: normal;
    }

    .hero-lead {
      max-width: 560px;
      margin-bottom: 30px;
      color: var(--ink-soft);
      font-size: clamp(.98rem, 1.6vw, 1.1rem);
      line-height: 1.7;
      text-align: center;
    }

    .hero-actions {
      display: flex;
      flex-wrap: wrap;
      gap: 12px;
    }

    .appointment-note {
      display: flex;
      align-items: center;
      gap: 12px;
      margin-top: 26px;
      color: var(--ink-soft);
      font-size: .76rem;
      font-weight: 600;
      letter-spacing: .03em;
    }

    .appointment-note::before {
      text-align: center;
      width: 8px;
      height: 8px;
      border: 5px solid rgba(201, 130, 135, .21);
      border-radius: 50%;
      background: var(--rose-deep);
    }

    .hero-visual {
      position: relative;
      width: min(100%, 560px);
      height: min(72vh, 680px);
      min-height: 535px;
      justify-self: end;
      perspective: 1100px;
    }

    .hero-halo {
      position: absolute;
      inset: 5% 8% 2% 0;
      border-radius: 46% 46% 24px 24px;
      background: linear-gradient(145deg, #e3b8ba, #c47d83);
      transform: rotate(-3.5deg);
      box-shadow: var(--shadow);
    }

    .hero-photo {
      position: absolute;
      inset: 0 0 5% 7%;
      overflow: hidden;
      border: 8px solid rgba(255, 250, 247, .78);
      border-radius: 46% 46% 24px 24px;
      box-shadow: 0 32px 80px rgba(54, 32, 30, .22);
      transform: rotate(var(--tilt-y, 0deg)) rotateY(var(--tilt-x, 0deg));
      transition: transform .18s ease-out;
    }

    .hero-photo img { object-position: 53% 46%; }

    .hero-photo::after {
      content: "";
      position: absolute;
      inset: 0;
      background: linear-gradient(135deg, rgba(255, 255, 255, .18), transparent 38%, rgba(78, 48, 46, .08));
      pointer-events: none;
    }

    .detail-card {
      position: absolute;
      z-index: 3;
      right: -28px;
      bottom: 0;
      width: 188px;
      padding: 10px 10px 14px;
      border: 1px solid rgba(78, 48, 46, .1);
      border-radius: 22px;
      background: rgba(255, 250, 247, .9);
      box-shadow: 0 20px 50px rgba(54, 32, 30, .17);
      backdrop-filter: blur(14px);
    }

    .detail-card figure {
      height: 145px;
      margin: 0 0 12px;
      overflow: hidden;
      border-radius: 15px;
    }

    .detail-card img { object-position: 52% 30%; }

    .detail-card span {
      display: block;
      padding: 0 4px;
      color: var(--rose-deep);
      font-family: var(--serif);
      font-size: 1.08rem;
      font-weight: 600;
      line-height: 1.25;
    }

    .hero-seal {
      position: absolute;
      z-index: 3;
      top: 9%;
      left: -38px;
      display: grid;
      width: 104px;
      height: 104px;
      place-items: center;
      border: 1px solid rgba(78, 48, 46, .2);
      border-radius: 50%;
      color: var(--cocoa);
      background: rgba(255, 250, 247, .84);
      box-shadow: 0 16px 40px rgba(54, 32, 30, .12);
      font-size: .59rem;
      font-weight: 700;
      letter-spacing: .15em;
      line-height: 1.55;
      text-align: center;
      text-transform: uppercase;
      backdrop-filter: blur(12px);
    }

    .scroll-cue {
      position: absolute;
      z-index: 2;
      left: max(20px, calc((100vw - 1180px) / 2));
      bottom: 24px;
      display: flex;
      align-items: center;
      gap: 11px;
      color: var(--ink-soft);
      font-size: .62rem;
      font-weight: 700;
      letter-spacing: .16em;
      text-transform: uppercase;
    }

    .scroll-cue i {
      display: block;
      width: 42px;
      height: 1px;
      overflow: hidden;
      background: rgba(78, 48, 46, .2);
    }

    .scroll-cue i::after {
      content: "";
      display: block;
      width: 50%;
      height: 100%;
      background: var(--rose-deep);
      animation: scrollCue 2s ease-in-out infinite;
    }

    @keyframes scrollCue {
      0%, 100% { transform: translateX(-105%); }
      50% { transform: translateX(210%); }
    }

    .about {
      position: relative;
      padding: 120px 0;
      color: #fff8f5;
      background: var(--cocoa-deep);
      overflow: hidden;
    }

    .about::after {
      content: "anacah";
      position: absolute;
      right: -35px;
      bottom: -55px;
      color: rgba(255, 255, 255, .035);
      font-family: var(--serif);
      font-size: clamp(8rem, 20vw, 18rem);
      line-height: 1;
      pointer-events: none;
    }

    .about-grid {
      position: relative;
      z-index: 2;
      display: grid;
      grid-template-columns: minmax(0, 1.04fr) minmax(320px, .96fr);
      gap: clamp(55px, 10vw, 135px);
      align-items: start;
    }

    .about-grid > *,
    .care-heading > *,
    .contact-grid > *,
    .services-head > * { min-width: 0; }

    .about h2 { max-width: 670px; }

    .about-copy p {
      max-width: 530px;
      margin-bottom: 18px;
      color: rgba(255, 248, 245, .68);
    }

    .benefit-list {
      display: grid;
      margin: 0;
      border-top: 1px solid rgba(255, 255, 255, .14);
    }

    .benefit-item {
      display: grid;
      grid-template-columns: 18px 1fr;
      gap: 18px;
      padding: 24px 0;
      border-bottom: 1px solid rgba(255, 255, 255, .14);
    }

    .benefit-dot {
      width: 9px;
      height: 9px;
      margin-top: 8px;
      border: 2px solid var(--cocoa-deep);
      border-radius: 50%;
      background: #e8b9bb;
      box-shadow: 0 0 0 5px rgba(232, 185, 187, .13);
    }

    .benefit-item h3 { color: #fff8f5; }
    .benefit-item p { margin: 0; color: rgba(255, 248, 245, .57); font-size: .86rem; }

    .services {
      padding: 120px 0 132px;
      background: var(--cream);
    }

    .services-head {
      display: flex;
      align-items: end;
      justify-content: space-between;
      gap: 50px;
      margin-bottom: 54px;
    }

    .services-head h2 { max-width: 620px; margin-bottom: 0; }
    .services-head .section-intro { max-width: 440px; margin-bottom: 5px; }

    .gallery-grid {
      display: grid;
      grid-template-columns: 1.06fr .84fr 1fr;
      gap: 18px;
      align-items: start;
    }

    .work-card {
      position: relative;
      overflow: hidden;
      padding: 0;
      border: 0;
      border-radius: var(--radius-md);
      color: var(--white);
      background: var(--powder);
      cursor: zoom-in;
      box-shadow: 0 16px 50px rgba(78, 48, 46, .08);
      transform: translateZ(0);
    }

    .work-card:nth-child(1),
    .work-card:nth-child(3) { height: 560px; }

    .work-card:nth-child(2) {
      height: 470px;
      margin-top: 64px;
    }

    .work-card img {
      transition: transform .8s cubic-bezier(.2, .7, .2, 1), filter .5s ease;
    }

    .work-card:nth-child(1) img { object-position: 54% 41%; }
    .work-card:nth-child(2) img { object-position: 50% 42%; }
    .work-card:nth-child(3) img { object-position: 50% 50%; }

    .work-card::after {
      content: "";
      position: absolute;
      inset: 0;
      background: linear-gradient(to top, rgba(38, 23, 22, .76), rgba(38, 23, 22, 0) 45%);
      pointer-events: none;
    }

    .work-card:hover img { transform: scale(1.045); filter: saturate(.94); }

    .work-caption {
      position: absolute;
      z-index: 2;
      right: 22px;
      bottom: 22px;
      left: 22px;
      text-align: left;
    }

    .work-caption strong {
      display: block;
      margin-bottom: 3px;
      font-family: var(--serif);
      font-size: 1.45rem;
      font-weight: 600;
      letter-spacing: -.035em;
    }

    .work-caption span {
      color: rgba(255, 255, 255, .75);
      font-size: .72rem;
      font-weight: 600;
      letter-spacing: .06em;
    }

    .care {
      position: relative;
      padding: 120px 0;
      background: var(--powder);
      overflow: hidden;
    }

    .care::before {
      content: "";
      position: absolute;
      top: -160px;
      right: -100px;
      width: 430px;
      height: 430px;
      border: 1px solid rgba(173, 102, 108, .14);
      border-radius: 50%;
    }

    .care-heading {
      display: grid;
      grid-template-columns: 1.1fr .9fr;
      gap: 70px;
      align-items: end;
      margin-bottom: 56px;
    }

    .care-heading h2 { max-width: 660px; margin-bottom: 0; }
    .care-heading p { max-width: 465px; margin-bottom: 7px; color: var(--ink-soft); }

    .care-grid {
      display: grid;
      grid-template-columns: repeat(3, 1fr);
      border-top: 1px solid var(--line);
      border-bottom: 1px solid var(--line);
    }

    .care-card {
      min-height: 255px;
      padding: 34px 34px 32px;
      border-right: 1px solid var(--line);
      background: rgba(255, 250, 247, .23);
      transition: background .3s ease, transform .3s ease;
    }

    .care-card:last-child { border-right: 0; }

    .care-card:hover {
      background: rgba(255, 250, 247, .7);
      transform: translateY(-5px);
    }

    .care-tag {
      display: inline-block;
      margin-bottom: 54px;
      color: var(--rose-deep);
      font-size: .68rem;
      font-weight: 700;
      letter-spacing: .14em;
      text-transform: uppercase;
    }

    .care-card h3 {
      font-family: var(--serif);
      font-size: 1.45rem;
      font-weight: 600;
    }

    .care-card p { margin: 0; color: var(--ink-soft); font-size: .86rem; }

    .exclusive-note {
      display: flex;
      align-items: center;
      justify-content: space-between;
      gap: 30px;
      margin-top: 38px;
      padding: 22px 28px;
      border-radius: 18px;
      color: var(--white);
      background: var(--rose-deep);
    }

    .exclusive-note strong {
      font-family: var(--serif);
      font-size: 1.25rem;
      font-weight: 600;
    }

    .exclusive-note span { font-size: .8rem; opacity: .78; }

    .contact {
      color: #fff9f5;
      background: var(--cocoa-deep);
    }

    .contact-top { padding: 120px 0 78px; }

    .contact-grid {
      display: grid;
      grid-template-columns: minmax(0, .88fr) minmax(440px, 1.12fr);
      gap: clamp(50px, 9vw, 120px);
      align-items: start;
    }

    .contact-copy h2 { max-width: 610px; }

    .contact-copy > p:not(.eyebrow) {
      max-width: 500px;
      margin-bottom: 28px;
      color: rgba(255, 249, 245, .66);
    }

    .instagram-card {
      display: flex;
      align-items: center;
      gap: 16px;
      max-width: 420px;
      margin-top: 24px;
      padding: 18px;
      border: 1px solid rgba(255, 255, 255, .14);
      border-radius: 18px;
      background: rgba(255, 255, 255, .045);
      transition: border-color .25s ease, background .25s ease;
    }

    .instagram-card:hover { border-color: rgba(255, 255, 255, .3); background: rgba(255, 255, 255, .075); }

    .instagram-icon {
      display: grid;
      flex: 0 0 44px;
      width: 44px;
      height: 44px;
      place-items: center;
      border-radius: 50%;
      color: var(--cocoa-deep);
      background: #e8b9bb;
    }

    .instagram-icon svg { width: 19px; height: 19px; }

    .instagram-card small {
      display: block;
      margin-bottom: 3px;
      color: rgba(255, 249, 245, .55);
      font-size: .66rem;
      font-weight: 700;
      letter-spacing: .11em;
      text-transform: uppercase;
    }

    .instagram-card strong { font-size: .88rem; }

    .contact-form {
      padding: clamp(26px, 4vw, 42px);
      border: 1px solid rgba(255, 255, 255, .12);
      border-radius: 28px;
      background: #fffaf7;
      box-shadow: 0 30px 70px rgba(17, 10, 9, .2);
    }

    .form-row {
      display: grid;
      grid-template-columns: 1fr 1fr;
      gap: 14px;
    }

    .field { margin-bottom: 16px; }

    .field label {
      display: block;
      margin: 0 0 8px 2px;
      color: var(--ink);
      font-size: .68rem;
      font-weight: 700;
      letter-spacing: .09em;
      text-transform: uppercase;
    }

    .field input,
    .field textarea {
      width: 100%;
      border: 1px solid rgba(78, 48, 46, .17);
      border-radius: 14px;
      outline: 0;
      color: var(--ink);
      background: #fffefd;
      transition: border-color .25s ease, box-shadow .25s ease;
    }

    .field input { height: 52px; padding: 0 16px; }
    .field textarea { min-height: 132px; padding: 15px 16px; resize: vertical; }

    .field input:focus,
    .field textarea:focus {
      border-color: var(--rose-deep);
      box-shadow: 0 0 0 4px rgba(173, 102, 108, .11);
    }

    .field.invalid input,
    .field.invalid textarea { border-color: #aa4c53; }

    .error-text {
      min-height: 18px;
      margin: 5px 0 0 2px;
      color: #9b4249;
      font-size: .69rem;
      line-height: 1.4;
    }

    .form-submit { width: 100%; min-height: 54px; border: 0; }

    .form-status {
      min-height: 22px;
      margin: 13px 0 0;
      color: #4f754e;
      font-size: .74rem;
      text-align: center;
    }

    .location-wrap {
  border-top: 1px solid rgba(255, 255, 255, 0.1);
  background: #291918;

  display: flex;
  justify-content: center;
  align-items: center;
  text-align: center;
}

    .location-grid {
      display: grid;
      grid-template-columns: 360px 1fr;
      min-height: 420px;
    }

    .location-copy {
      display: flex;
      flex-direction: column;
      justify-content: center;
      padding: 52px;
    }

    .location-copy h3 {
      margin-bottom: 13px;
      font-family: var(--serif);
      font-size: 2rem;
      font-weight: 600;
    }

    .location-copy p { margin: 0; color: rgba(255, 249, 245, .58); font-size: .84rem; }

    .map-shell { min-height: 420px; filter: grayscale(1) sepia(.08) contrast(.92); }

    .map-shell iframe {
      display: block;
      width: 100%;
      height: 100%;
      min-height: 420px;
      border: 0;
    }

    .footer {
      padding: 24px 0;
      border-top: 1px solid rgba(255, 255, 255, .1);
      background: #291918;
    }

    .footer-inner {
      display: flex;
      align-items: center;
      justify-content: space-between;
      gap: 24px;
      color: rgba(255, 249, 245, .48);
      font-size: .68rem;
      letter-spacing: .06em;
    }

    .footer strong {
      color: rgba(255, 249, 245, .8);
      font-family: var(--serif);
      font-size: 1rem;
      font-weight: 600;
      letter-spacing: .01em;
    }

    .floating-cta {
      position: fixed;
      z-index: 900;
      right: 16px;
      bottom: 16px;
      display: none;
      min-height: 50px;
      padding: 0 20px;
      border-radius: 999px;
      color: var(--white);
      background: var(--cocoa);
      box-shadow: 0 16px 34px rgba(36, 20, 19, .24);
      font-size: .72rem;
      font-weight: 700;
      letter-spacing: .04em;
    }

    .lightbox {
      width: min(92vw, 880px);
      max-width: none;
      padding: 0;
      border: 0;
      border-radius: 24px;
      overflow: hidden;
      background: var(--cream);
      box-shadow: 0 35px 100px rgba(26, 14, 13, .35);
    }

    .lightbox::backdrop { background: rgba(30, 18, 17, .72); backdrop-filter: blur(8px); }

    .lightbox-image { max-height: 78vh; object-fit: contain; background: #edd8d7; }

    .lightbox-bar {
      display: flex;
      align-items: center;
      justify-content: space-between;
      gap: 20px;
      padding: 15px 18px;
      color: var(--ink);
    }

    .lightbox-bar span { font-family: var(--serif); font-size: 1.1rem; }

    .lightbox-close {
      padding: 8px 14px;
      border: 1px solid var(--line);
      border-radius: 999px;
      background: transparent;
      cursor: pointer;
      font-size: .7rem;
      font-weight: 700;
      letter-spacing: .06em;
      text-transform: uppercase;
    }

    .js .reveal {
      opacity: 0;
      transform: translateY(26px);
      transition: opacity .8s ease, transform .8s cubic-bezier(.2, .7, .2, 1);
    }

    .js .reveal.from-left { transform: translateX(-30px); }
    .js .reveal.from-right { transform: translateX(30px); }
    .js .reveal.is-visible { opacity: 1; transform: translate(0, 0); }

    .delay-1 { transition-delay: .08s !important; }
    .delay-2 { transition-delay: .16s !important; }
    .delay-3 { transition-delay: .24s !important; }

    @media (max-width: 1050px) {
      :root { --container: min(100% - 32px, 920px); }

      .nav-links { gap: 20px; margin-right: 18px; }
      .hero-grid { grid-template-columns: .9fr 1.1fr; gap: 35px; }
      .hero-visual { min-height: 490px; height: 60vh; }
      .detail-card { right: -5px; width: 165px; }
      .detail-card figure { height: 122px; }
      .hero-seal { left: -12px; }
      .gallery-grid { gap: 14px; }
      .work-card:nth-child(1), .work-card:nth-child(3) { height: 480px; }
      .work-card:nth-child(2) { height: 410px; }
      .contact-grid { grid-template-columns: .9fr 1.1fr; gap: 48px; }
    }

    @media (max-width: 860px) {
      .site-header,
      .site-header.scrolled {
        padding: 10px 0;
      }

      .site-header.scrolled {
        background: rgba(255, 250, 247, .98);
        backdrop-filter: none;
        -webkit-backdrop-filter: none;
      }

      .nav-shell { min-height: 52px; }
      .header-cta { display: none; }
      .menu-toggle { display: block; }

      .nav-links {
        position: fixed;
        inset: 0;
        width: 100%;
        max-width: 100%;
        height: 100vh;
        height: 100dvh;
        min-height: 100svh;
        display: flex;
        flex-direction: column;
        align-items: flex-start;
        justify-content: center;
        gap: 27px;
        margin: 0;
        padding: 110px 36px 60px;
        visibility: hidden;
        opacity: 0;
        background: rgba(255, 250, 247, .98);
        transform: translateY(-15px);
        overflow-y: auto;
        overscroll-behavior: contain;
        transition: opacity .3s ease, visibility .3s ease, transform .3s ease;
      }

      .nav-links a { font-family: var(--sans); font-size: 1.6rem; font-weight: 600; letter-spacing: -.03em; }
      .nav-links a::after { display: none; }
      .menu-open .nav-links { visibility: visible; opacity: 1; transform: translateY(0); }

      .js .reveal.from-left,
      .js .reveal.from-right { transform: translateY(22px); }

      .js .reveal.from-left.is-visible,
      .js .reveal.from-right.is-visible { transform: translateY(0); }

      .hero { min-height: auto; padding: 106px 0 70px; }
      .hero-grid { grid-template-columns: 1fr; gap: 32px; }
      .hero-copy { padding: 8px 0 0; text-align: center; }
      .hero-copy, .hero h1 { max-width: 720px; }
      .hero h1, .hero-lead { margin-left: auto; margin-right: auto; }
      .hero-lead { max-width: 570px; }
      .hero-visual { width: min(84vw, 520px); height: clamp(470px, 76vw, 580px); min-height: 0; justify-self: center; }
      .hero-seal { left: -26px; }
      .detail-card { right: -20px; }
      .scroll-cue { display: none; }

      .about-grid, .care-heading, .contact-grid { grid-template-columns: 1fr; }
      .about-grid, .contact-grid { gap: 48px; }
      .care-heading { gap: 18px; }

      .services-head { display: block; }
      .services-head h2 { margin-bottom: 20px; }
      .gallery-grid { grid-template-columns: 1fr 1fr; }
      .work-card:nth-child(1) { grid-row: span 2; height: 620px; }
      .work-card:nth-child(2), .work-card:nth-child(3) { height: 300px; margin-top: 0; }

      .care-grid { grid-template-columns: 1fr; }
      .care-card { min-height: auto; border-right: 0; border-bottom: 1px solid var(--line); }
      .care-card:last-child { border-bottom: 0; }
      .care-tag { margin-bottom: 28px; }
      .exclusive-note { align-items: flex-start; flex-direction: column; gap: 5px; }

      .contact-copy { max-width: 650px; }
      .location-grid { grid-template-columns: 290px 1fr; }
      .location-copy { padding: 38px 30px; }
    }

    @media (max-width: 620px) {
      :root {
        --container: calc(100% - 28px);
        --radius-md: 19px;
      }

      body { font-size: 16px; line-height: 1.65; }
      h1 { font-size: clamp(2.35rem, 11vw, 3rem); }
      h2 { font-size: clamp(1.9rem, 8.6vw, 2.55rem); line-height: 1.16; }
      h3 { font-size: 1.08rem; }
      .eyebrow { margin-bottom: 14px; font-size: .68rem; letter-spacing: .14em; }
      .brand-mark { width: 34px; height: 34px; }
      .brand-name { font-size: 1.1rem; }

      .hero { padding: 94px 0 60px; }
      .hero-grid { gap: 24px; }
      .hero-copy { padding-top: 0; }
      .hero-lead { max-width: 410px; margin-bottom: 20px; font-size: .98rem; line-height: 1.6; }
      .hero-actions { flex-direction: column; }
      .hero-actions .button { width: 100%; }
      .appointment-note { align-items: flex-start; }
      .appointment-note::before { margin-top: 4px; flex: 0 0 auto; }

      .hero-visual { width: calc(100% - 12px); height: clamp(390px, 116vw, 480px); min-height: 0; margin-top: 3px; }
      .hero-halo { inset: 5% 3% 2% 0; }
      .hero-photo { inset: 0 0 6% 5%; border-width: 6px; }
      .hero-seal { top: 6%; left: -5px; width: 76px; height: 76px; font-size: .45rem; }
      .detail-card { right: -4px; bottom: 0; width: 130px; border-radius: 17px; }
      .detail-card figure { height: 92px; }
      .detail-card span { font-size: .92rem; }

      .about, .services, .care { padding: 76px 0; }
      .about-grid, .contact-grid { gap: 36px; }
      .about::after { bottom: -25px; }

      .services-head { margin-bottom: 34px; }
      .gallery-grid { grid-template-columns: 1fr; gap: 12px; }
      .work-card:nth-child(1),
      .work-card:nth-child(2),
      .work-card:nth-child(3) { grid-row: auto; width: 100%; height: auto; aspect-ratio: 4 / 5; margin: 0; }
      .work-caption { right: 18px; bottom: 18px; left: 18px; }

      .care-card { padding: 25px 22px; }
      .care-tag { margin-bottom: 20px; }
      .exclusive-note { padding: 20px; }

      .contact-top { padding: 76px 0 56px; }
      .form-row { grid-template-columns: 1fr; gap: 0; }
      .contact-form { padding: 22px 18px; border-radius: 22px; }
      .location-grid { grid-template-columns: 1fr; }
      .location-copy { min-height: 235px; padding: 36px 22px; }
      .map-shell, .map-shell iframe { min-height: 300px; }
      .footer { padding-bottom: 82px; }
      .footer-inner { align-items: flex-start; flex-direction: column; gap: 7px; }
      .floating-cta { display: inline-flex; align-items: center; }
      .lightbox { width: calc(100vw - 20px); border-radius: 18px; }
    }

    @media (max-width: 390px) {
      :root { --container: calc(100% - 22px); }
      .brand-name { font-size: 1rem; }
      .menu-toggle { width: 42px; height: 42px; }
      .menu-toggle span { left: 11px; }
      .hero-visual { width: 100%; height: 410px; }
      .hero-photo { border-width: 5px; }
      .hero-seal { left: 0; }
      .detail-card { right: 0; width: 122px; padding: 8px 8px 11px; }
      .detail-card figure { height: 84px; margin-bottom: 9px; }
      .instagram-card { gap: 12px; padding: 14px; }
      .instagram-card > span:last-child { min-width: 0; }
      .instagram-card strong { overflow-wrap: anywhere; }
      .button { min-height: 50px; padding-inline: 20px; }
    }

    @media (prefers-reduced-motion: reduce) {
      html { scroll-behavior: auto; }
      *, *::before, *::after { animation-duration: .01ms !important; animation-iteration-count: 1 !important; transition-duration: .01ms !important; }
      .js .reveal { opacity: 1; transform: none; }
    }