/* Generated by scripts/build-theme.py from index.html — do not edit by hand. */
  @font-face {
    font-family: "Fraunces"; src: url("/assets/fonts/fraunces-var.woff2") format("woff2");
    font-weight: 400 600; font-style: normal; font-display: swap;
    unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+2000-206F, U+2074, U+20AC, U+2122, U+2212;
  }
  /* optional, not swap (2026-10-02): a late Inter re-wrapped the hero subhead (3 -> 4 lines at 412px) and
     pushed the photos down (CLS). Preloaded, it's usually in time; if not, that visit keeps the system sans. */
  @font-face {
    font-family: "Inter"; src: url("/assets/fonts/inter-var.woff2") format("woff2");
    font-weight: 400 700; font-style: normal; font-display: optional;
    unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+2000-206F, U+2074, U+20AC, U+2122, U+2212;
  }
  :root {
    --ivory: #FBF9F4;
    --sage: #8FA98C;
    --sage-soft: #E8EEE6;
    --forest: #2E3D2F;
    --forest-soft: #4A5C4B;
    --bronze: #B08D57;
    --bronze-dark: #8F6F3F;
    --clay: #C9B7A2;
    --clay-soft: #F1EAE1;
    --line: #E4DED2;
    --white: #FFFFFF;
    --serif: "Fraunces", Georgia, "Times New Roman", serif;
    --sans: "Inter", -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, sans-serif;
    --maxw: 1180px;
    --radius: 14px;
    --shadow-soft: 0 18px 50px -24px rgba(46, 61, 47, 0.28);
    --shadow-card: 0 10px 40px -28px rgba(46, 61, 47, 0.35);
  }

  * { box-sizing: border-box; }

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

  body {
    margin: 0;
    font-family: var(--sans);
    color: var(--forest);
    background: var(--ivory);
    line-height: 1.65;
    font-size: 17px;
    -webkit-font-smoothing: antialiased;
    text-rendering: optimizeLegibility;
    overflow-x: hidden;
  }

  h1, h2, h3 { font-family: var(--serif); font-weight: 400; color: var(--forest); line-height: 1.12; letter-spacing: -0.01em; margin: 0; }
  p { margin: 0; }
  a { color: inherit; text-decoration: none; }
  img, svg { max-width: 100%; }

  :focus-visible {
    outline: 3px solid var(--bronze);
    outline-offset: 3px;
    border-radius: 4px;
  }

  .wrap { width: 100%; max-width: var(--maxw); margin: 0 auto; padding: 0 clamp(20px, 5vw, 48px); }

  .eyebrow {
    font-family: var(--sans);
    font-size: 13px;
    font-weight: 600;
    letter-spacing: 0.18em;
    text-transform: uppercase;
    color: var(--bronze-dark);
    margin: 0 0 20px;
  }

  section { position: relative; }

  .section-pad { padding: clamp(64px, 9vw, 120px) 0; }

  .center { text-align: center; }
  .measure { max-width: 640px; margin-left: auto; margin-right: auto; }

  .hairline { height: 1px; background: var(--line); border: 0; width: 100%; max-width: var(--maxw); margin: 0 auto; }

  /* ---------- Buttons ---------- */
  .btn {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    gap: 9px;
    font-family: var(--sans);
    font-size: 15px;
    font-weight: 600;
    letter-spacing: 0.01em;
    padding: 15px 30px;
    border-radius: 999px;
    cursor: pointer;
    border: 1.5px solid transparent;
    transition: transform .25s ease, background .25s ease, color .25s ease, box-shadow .25s ease;
    line-height: 1;
    white-space: nowrap;
  }
  .btn-primary { background: var(--bronze); color: #fff; box-shadow: 0 10px 26px -12px rgba(176, 141, 87, 0.7); }
  .btn-primary:hover { background: var(--bronze-dark); transform: translateY(-2px); }
  .btn-outline { background: transparent; color: var(--forest); border-color: var(--forest); }
  .btn-outline:hover { background: var(--forest); color: var(--ivory); transform: translateY(-2px); }
  .btn-ghost { background: transparent; color: var(--forest); border-color: var(--line); }
  .btn-ghost:hover { border-color: var(--forest); }
  @media (prefers-reduced-motion: reduce) {
    .btn:hover { transform: none; }
  }

  /* ---------- Header ---------- */
  header.site {
    position: sticky;
    top: 0;
    z-index: 100;
    background: rgba(251, 249, 244, 0.82);
    backdrop-filter: saturate(140%) blur(14px);
    -webkit-backdrop-filter: saturate(140%) blur(14px);
    border-bottom: 1px solid var(--line);
  }
  .nav-inner { display: flex; align-items: center; justify-content: space-between; gap: 20px; height: 74px; }
  .wordmark { display: flex; align-items: center; gap: 11px; font-family: var(--serif); font-size: 22px; font-weight: 500; color: var(--forest); letter-spacing: -0.01em; white-space: nowrap; }
  .wordmark .mark { width: 34px; height: 34px; flex: 0 0 auto; }
  .wordmark span { white-space: nowrap; }
  .nav-links { display: flex; align-items: center; gap: 30px; list-style: none; margin: 0; padding: 0; }
  .nav-links a {
    font-size: 15px; font-weight: 500; color: var(--forest-soft); position: relative; padding: 4px 0;
    transition: color .2s ease; white-space: nowrap;
  }
  .nav-links a::after {
    content: ""; position: absolute; left: 0; right: 100%; bottom: -2px; height: 1.5px; background: var(--bronze);
    transition: right .28s ease;
  }
  .nav-links a:hover { color: var(--forest); }
  .nav-links a:hover::after { right: 0; }

  .nav-actions { display: flex; align-items: center; gap: 16px; }
  /* Phone removed from the desktop top nav (redundant with the Book CTA; the client's Figma header had no phone).
     It remains in the mobile menu, contact section, footer, and sticky mobile CTA bar. */
  .nav-phone { display: none; align-items: center; gap: 7px; font-size: 15px; font-weight: 600; color: var(--forest); }
  .nav-phone svg { color: var(--sage); }

  .lang-toggle {
    display: inline-flex; align-items: center; border: 1px solid var(--line); border-radius: 999px; overflow: hidden;
    font-family: var(--sans); background: var(--white);
  }
  /* Links, not buttons (2026-10-02): /es/ needs a crawlable link from / (and back), and GA4 then
     records a language switch as a visit to the page in that language. */
  .lang-toggle a {
    display: inline-block; padding: 7px 13px; font-size: 12.5px; font-weight: 600; letter-spacing: 0.04em;
    color: var(--forest-soft); transition: background .2s ease, color .2s ease;
  }
  .lang-toggle a[aria-current="page"] { background: var(--forest); color: var(--ivory); }
  /* Mobile menu variant only: pad up to a reliable 44px touch target. Desktop header toggle unchanged. */
  .mm-lang a { padding: 13px 20px; font-size: 13px; }

  .hamburger {
    display: none; width: 44px; height: 44px; border: 1px solid var(--line); background: var(--white);
    border-radius: 12px; cursor: pointer; align-items: center; justify-content: center; padding: 0;
  }
  .hamburger svg { width: 22px; height: 22px; color: var(--forest); }

  /* Mobile menu panel */
  .mobile-menu {
    position: fixed; inset: 0 0 0 auto; width: min(84vw, 340px); background: var(--ivory);
    box-shadow: -20px 0 60px -30px rgba(46,61,47,.5); z-index: 200; transform: translateX(100%);
    transition: transform .32s cubic-bezier(.4,0,.2,1); display: flex; flex-direction: column;
    padding: 26px 26px 34px; overflow-y: auto;
  }
  .mobile-menu.open { transform: translateX(0); }
  .mobile-menu .mm-top { display: flex; justify-content: space-between; align-items: center; margin-bottom: 26px; }
  .mobile-menu .mm-close { width: 42px; height: 42px; border: 1px solid var(--line); background: var(--white); border-radius: 12px; cursor: pointer; display: grid; place-items: center; }
  .mobile-menu nav a { display: block; font-family: var(--serif); font-size: 25px; color: var(--forest); padding: 13px 0; border-bottom: 1px solid var(--line); }
  .mobile-menu .mm-actions { margin-top: 26px; display: flex; flex-direction: column; gap: 13px; }
  .mm-overlay { position: fixed; inset: 0; background: rgba(46,61,47,.34); z-index: 150; opacity: 0; visibility: hidden; transition: opacity .3s ease, visibility .3s ease; }
  .mm-overlay.open { opacity: 1; visibility: visible; }
  @media (prefers-reduced-motion: reduce) {
    .mobile-menu, .mm-overlay { transition: none; }
  }

  /* ---------- Hero ---------- */
  .hero { position: relative; overflow: hidden; padding-top: clamp(56px, 8vw, 96px); padding-bottom: clamp(56px, 8vw, 104px); }
  .hero-botanical { position: absolute; inset: 0; z-index: 0; pointer-events: none; }
  .hero-botanical svg { position: absolute; }
  .hero-bg-1 { top: -40px; right: -60px; width: 520px; opacity: .06; color: var(--forest); }
  .hero-bg-2 { bottom: -80px; left: -80px; width: 460px; opacity: .05; color: var(--sage); }
  /* Bottom-anchored decorations wait for the web fonts (head script), so the font swap can't move them */
  html.fonts-pending .hero-bg-2, html.fonts-pending .hero-nmark { visibility: hidden; }
  /* Signature: giant ghosted n-tilde — the clinic's bilingual identity mark */
  .hero-nmark {
    position: absolute; right: -2%; bottom: -18%; font-family: var(--serif); font-weight: 600;
    font-size: clamp(300px, 36vw, 560px); line-height: 1; color: var(--ivory); opacity: .05;
    user-select: none;
  }
  .hero-inner { position: relative; z-index: 1; text-align: center; }
  .hero h1 { font-size: clamp(2.6rem, 6.4vw, 4.9rem); font-weight: 400; margin: 0 auto 26px; max-width: 22ch; }
  /* Fraunces' SOFT/WONK axes: a warmer, hand-set feel on the biggest display moment */
  .hero h1 { font-variation-settings: "SOFT" 65, "WONK" 1; }
  .hero h1 em { font-style: italic; color: var(--bronze-dark); }
  .hero-sub { font-size: clamp(1.05rem, 2vw, 1.28rem); color: var(--forest-soft); max-width: 620px; margin: 0 auto 38px; line-height: 1.6; }
  .hero-cta { display: flex; gap: 15px; justify-content: center; flex-wrap: wrap; }

  /* Split hero (2026-09-18): copy left, doctor photos right, trust strip spans both */
  .hero-split { text-align: left; display: grid; grid-template-columns: 1.05fr .95fr; column-gap: clamp(32px, 5vw, 72px); align-items: center; }
  .hero-split .hero-cta { justify-content: flex-start; }
  .hero-split h1, .hero-split .hero-sub { margin-left: 0; margin-right: 0; }
  .hero-split .trust-strip { grid-column: 1 / -1; }
  /* .hero prefix on purpose: .cred-logos (About section) is declared later in this sheet and would win on equal specificity */
  .hero .hero-logos { justify-content: flex-start; gap: clamp(18px, 2.4vw, 30px); max-width: none; margin: 0 0 22px; }
  .hero .hero-logos img { height: clamp(26px, 2.6vw, 34px); max-width: 120px; opacity: .8; }
  .hero-photos { position: relative; padding: 0 0 56px 60px; }
  .hero-fig { margin: 0; position: relative; }
  .hero-fig img { display: block; width: 100%; height: 100%; object-fit: cover; object-position: 50% 18%; }
  .hero-fig figcaption { position: absolute; left: 14px; right: 14px; bottom: 14px; background: rgba(251,249,244,.92); color: var(--forest);
    border-radius: 12px; padding: 10px 14px; font-family: var(--serif); line-height: 1.25; backdrop-filter: blur(6px); }
  .hero-fig figcaption strong { display: block; font-weight: 500; font-size: 1.02rem; }
  .hero-fig figcaption span { display: block; font-family: var(--sans); font-size: 13px; color: var(--forest-soft); margin-top: 2px; }
  .hero-portrait { aspect-ratio: 4/5; max-width: 440px; margin-left: auto; border-radius: 999px 999px 20px 20px; overflow: hidden; box-shadow: 0 30px 60px -30px rgba(0,0,0,.6); }
  .hero-portrait::after { content: ""; position: absolute; inset: 0; border-radius: inherit; box-shadow: inset 0 0 0 1px rgba(227,196,128,.35); pointer-events: none; }
  .hero-portrait figcaption { left: 50%; }
  .hero-snapshot { position: absolute; left: 0; bottom: 0; width: 42%; max-width: 230px; aspect-ratio: 4/5; border-radius: 16px; overflow: hidden;
    border: 6px solid var(--ivory); box-shadow: 0 24px 50px -24px rgba(0,0,0,.7); transform: rotate(-4deg); }
  /* Zoomed toward the top-left so the metal door frame at the photo's right edge stays out of the snapshot */
  .hero-snapshot img { width: 138%; max-width: none; height: 138%; object-position: 0 0; }
  .hero-snapshot figcaption { left: 8px; right: 8px; bottom: 8px; padding: 8px 10px; }
  .hero-snapshot figcaption strong { font-size: .92rem; }
  .hero-snapshot figcaption span { font-size: 12px; }
  .hero-nmark { right: auto; left: -4%; }
  @media (max-width: 960px) {
    .hero-split { grid-template-columns: 1fr; text-align: center; }
    .hero-split .hero-cta, .hero .hero-logos { justify-content: center; }
    .hero-split .hero-sub, .hero-split h1 { margin-left: auto; margin-right: auto; }
    /* width:100% matters: with auto margins a grid item shrinks to its content, and until the browser knows the
       portrait's size that is 0 px, so the photos popped in at full size and pushed the page down (CLS 0.15, 2 Oct) */
    .hero-photos { width: 100%; max-width: 340px; margin: 36px auto 0; padding: 0 0 44px 48px; }
    .hero-portrait { max-width: none; }
  }
  @media (max-width: 640px) {
    .hero-fig figcaption { padding: 7px 9px; }
    .hero-fig figcaption strong { font-size: .9rem; }
    .hero-fig figcaption span { font-size: 12px; }
  }

  .trust-strip {
    display: grid; grid-template-columns: repeat(4, 1fr); gap: 0; margin: clamp(52px, 7vw, 76px) auto 0;
    max-width: 1120px;
    border: 1px solid var(--line); border-radius: var(--radius); background: var(--white); box-shadow: var(--shadow-card);
    overflow: hidden;
  }
  .trust-strip .ts { display: flex; align-items: center; justify-content: center; gap: 14px; padding: 26px 18px; text-align: left; border-right: 1px solid var(--line); }
  .trust-strip .ts:last-child { border-right: 0; }
  .trust-strip .ts .ts-ic { flex: 0 0 auto; width: 48px; height: 48px; border-radius: 50%; background: var(--sage-soft); display: grid; place-items: center; color: var(--forest); }
  .trust-strip .ts .ts-ic svg { width: 22px; height: 22px; }
  .trust-strip .ts .ts-ic-n { font-family: var(--serif); font-size: 1.45rem; font-weight: 600; line-height: 1; padding-bottom: 2px; }
  .trust-strip .ts .ts-txt { font-family: var(--serif); font-size: clamp(1.05rem, 1.35vw, 1.25rem); color: var(--forest); line-height: 1.3; max-width: 13ch; }

  /* ---------- Offer band ---------- */
  .offer { background: var(--forest); color: var(--ivory); position: relative; overflow: hidden; }
  .offer .botanical-corner { position: absolute; top: -30px; left: -30px; width: 260px; opacity: .08; color: #fff; }
  .offer .botanical-corner.br { top: auto; left: auto; bottom: -40px; right: -30px; transform: scaleX(-1); }
  /* Appointment-card ticket: ivory card with punched side notches and a dashed price stub */
  .offer-card {
    position: relative; z-index: 1; background: var(--ivory); color: var(--forest); border-radius: 18px;
    display: flex; align-items: center; gap: clamp(26px, 4vw, 48px); flex-wrap: wrap; text-align: left;
    padding: clamp(28px, 4vw, 42px) clamp(28px, 5vw, 56px);
    box-shadow: 0 26px 60px -30px rgba(0,0,0,.5);
    /* Ticket sized to its content: after the 2026-08-05 copy trim a full-container
       card left a void between text and CTA. Cap + center instead of padding copy. */
    max-width: 940px; margin: 0 auto;
  }
  .offer-card::before, .offer-card::after {
    content: ""; position: absolute; top: 50%; width: 34px; height: 34px; border-radius: 50%;
    background: var(--forest); transform: translateY(-50%);
  }
  .offer-card::before { left: -17px; }
  .offer-card::after { right: -17px; }
  .offer-stamp {
    position: absolute; top: 18px; right: 26px; transform: rotate(-5deg);
    border: 1.5px solid var(--bronze); color: var(--bronze-dark); border-radius: 6px; padding: 5px 11px;
    font-size: 11px; font-weight: 700; letter-spacing: .13em; text-transform: uppercase; opacity: .9;
  }
  /* ---- Offer choreography (one-shot, js-anim gated): stamp lands -> price pops -> CTA pulses once ---- */
  html.js-anim .offer-card.reveal .offer-stamp { opacity: 0; }
  html.js-anim .offer-card.reveal.in .offer-stamp {
    animation: a1StampIn .42s cubic-bezier(.2, 1.4, .4, 1) .55s forwards;
  }
  @keyframes a1StampIn {
    from { opacity: 0; transform: rotate(-14deg) scale(1.7); }
    70%  { opacity: .95; transform: rotate(-4deg) scale(.96); }
    to   { opacity: .9; transform: rotate(-5deg) scale(1); }
  }
  .price-now.landed { animation: a1PricePop .45s cubic-bezier(.3, 1.6, .4, 1); }
  @keyframes a1PricePop {
    0%   { transform: scale(1); }
    45%  { transform: scale(1.12); filter: brightness(1.25); }
    100% { transform: scale(1); filter: none; }
  }
  .offer-cta .btn { position: relative; }
  .offer-cta .btn.pulse::after {
    content: ""; position: absolute; inset: -3px; border-radius: 999px; pointer-events: none;
    border: 2px solid var(--bronze);
    animation: a1CtaRing .9s ease-out forwards;
  }
  @keyframes a1CtaRing {
    from { opacity: .8; transform: scale(1); }
    to   { opacity: 0; transform: scale(1.35); }
  }
  @media (prefers-reduced-motion: reduce) {
    html.js-anim .offer-card.reveal .offer-stamp { opacity: .9; animation: none; }
    .price-now.landed, .offer-cta .btn.pulse::after { animation: none; }
  }
  .offer-stub { flex: 0 0 auto; text-align: center; padding-right: clamp(26px, 4vw, 48px); border-right: 2px dashed var(--line); }
  .offer-stub .price-was { display: block; font-size: 1.15rem; font-weight: 600; text-decoration: line-through; color: var(--forest-soft); opacity: .7; margin-bottom: 2px; font-variant-numeric: tabular-nums; }
  .offer-stub .price-now { display: block; font-family: var(--serif); font-size: clamp(3rem, 6vw, 4.2rem); line-height: 1; color: var(--bronze-dark); font-variant-numeric: tabular-nums; }
  .offer-stub .stub-lbl { display: block; margin-top: 6px; font-size: 11.5px; font-weight: 700; letter-spacing: .14em; text-transform: uppercase; color: var(--forest-soft); }
  .offer-card h2 { color: var(--forest); font-size: clamp(1.6rem, 3.2vw, 2.15rem); margin-bottom: 10px; }
  .offer-card .offer-text p { color: var(--forest-soft); font-size: 1.05rem; }
  .offer-card .offer-text { flex: 1 1 320px; }
  .offer-card .offer-cta { flex: 0 0 auto; }
  .btn-bronze-solid { background: var(--bronze); color: #fff; }
  .btn-bronze-solid:hover { background: #c79c60; transform: translateY(-2px); }
  .btn-ivory-outline { background: transparent; border-color: rgba(251,249,244,.55); color: var(--ivory); }
  .btn-ivory-outline:hover { background: var(--ivory); color: var(--forest); }

  /* ---------- Credential logos (About) ---------- */
  .about-creds { margin-top: clamp(44px, 6vw, 72px); }
  .cred-logos { display: flex; gap: clamp(30px,5vw,64px); align-items: center; justify-content: center; flex-wrap: wrap; max-width: 780px; margin: 0 auto; }
  /* ponytail: ivory monochrome via CSS filter — color marks carry black/gray text that dies on the green; swap for supplied brand-on-dark files if the client sends them */
  .cred-logos img { display: block; height: clamp(48px, 5.6vw, 62px); width: auto; max-width: 200px; object-fit: contain; filter: brightness(0) invert(0.96); opacity: .9; }

  /* ---------- Section headers ---------- */
  .sec-head { margin-bottom: clamp(44px, 6vw, 68px); }
  .sec-head h2 { font-size: clamp(2rem, 4.4vw, 3rem); font-weight: 400; margin-bottom: 18px; }
  .sec-head h2 em { font-style: italic; color: var(--bronze-dark); }
  .sec-head p { color: var(--forest-soft); font-size: 1.1rem; }

  /* ---------- How it works (soft sage band separates it from the ivory Services below) ---------- */
  .how { background: var(--sage-soft); }


  /* ---------- Services ---------- */
  .services-grid { display: grid; grid-template-columns: repeat(4, 1fr); gap: 22px; }
  .service-card {
    background: var(--white); border: 1px solid var(--line); border-radius: var(--radius); padding: 30px 26px;
    text-align: left; transition: transform .3s ease, box-shadow .3s ease, border-color .3s ease; position: relative;
  }
  .service-card:hover { transform: translateY(-5px); box-shadow: var(--shadow-soft); border-color: var(--sage); }
  .service-icon {
    width: 54px; height: 54px; border-radius: 14px; background: var(--sage-soft); display: grid; place-items: center;
    margin-bottom: 20px; color: var(--forest);
  }
  .service-icon svg { width: 28px; height: 28px; }
  .service-card h3 { font-size: 1.32rem; margin-bottom: 6px; }
  .service-card .benefit { font-size: 13.5px; font-weight: 600; color: var(--bronze-dark); margin-bottom: 12px; letter-spacing: .01em; }
  .service-card p.desc { font-size: 14.5px; color: var(--forest-soft); line-height: 1.6; }
  @media (prefers-reduced-motion: reduce) { .service-card:hover { transform: none; } }

  /* ---------- Why choose us ---------- */
  .why { background: var(--clay-soft); position: relative; overflow: hidden; }
  .why .botanical-corner { position: absolute; bottom: -50px; right: -50px; width: 320px; opacity: .05; color: var(--forest); }
  .pillars { display: grid; grid-template-columns: repeat(4, 1fr); gap: 30px; position: relative; z-index: 1; }
  .pillar { text-align: center; }
  .pillar .p-icon { width: 64px; height: 64px; margin: 0 auto 20px; border-radius: 50%; background: var(--white); display: grid; place-items: center; color: var(--sage); box-shadow: var(--shadow-card); }
  .pillar .p-icon svg { width: 30px; height: 30px; }
  .pillar h3 { font-size: 1.28rem; margin-bottom: 10px; }
  .pillar p { font-size: 14.5px; color: var(--forest-soft); line-height: 1.6; }

  /* ---------- How it works ---------- */
  .steps { display: grid; grid-template-columns: repeat(3, 1fr); gap: 30px; counter-reset: step; position: relative; }
  .step { text-align: center; position: relative; }
  .step .num {
    width: 66px; height: 66px; margin: 0 auto 22px; border-radius: 50%; border: 1.5px solid var(--bronze);
    display: grid; place-items: center; font-family: var(--serif); font-size: 1.7rem; color: var(--bronze-dark); background: var(--white);
  }
  .step h3 { font-size: 1.34rem; margin-bottom: 10px; }
  .step p { font-size: 15px; color: var(--forest-soft); line-height: 1.6; max-width: 300px; margin: 0 auto; }

  /* ---------- About ---------- */
  .about { background: var(--forest); color: var(--ivory); position: relative; overflow: hidden; }
  .about .botanical-corner { position: absolute; top: -40px; right: -40px; width: 300px; opacity: .07; color: #fff; }
  .about-grid { display: grid; grid-template-columns: 0.82fr 1.18fr; gap: clamp(40px, 6vw, 80px); align-items: center; position: relative; z-index: 1; }
  .portrait {
    aspect-ratio: 4/5; border-radius: 20px; overflow: hidden; position: relative;
    background: linear-gradient(160deg, #9fb39c 0%, #6d8069 100%); display: grid; place-items: end center;
    box-shadow: var(--shadow-soft);
  }
  .portrait .p-silhouette { width: 82%; color: rgba(46,61,47,.42); }
  .portrait .p-botanical { position: absolute; top: 18px; left: 18px; width: 120px; opacity: .3; color: #fff; }
  /* Sized so "Meet Dr. Livier Alexandra Mora" holds one line on desktop;
     balance keeps narrow-screen wraps even instead of orphaning the surname. */
  .about h2 { color: var(--ivory); font-size: clamp(1.9rem, 3.4vw, 2.4rem); margin-bottom: 8px; text-wrap: balance; }
  .about .about-eyebrow { color: var(--sage); }
  .about .role { font-size: 1.05rem; color: var(--clay); margin-bottom: 22px; font-weight: 500; }
  .about p.bio { color: rgba(251,249,244,.85); font-size: 1.08rem; line-height: 1.7; margin-bottom: 26px; }
  .creds { list-style: none; margin: 0; padding: 0; display: flex; flex-wrap: wrap; gap: 12px; }
  .creds li {
    display: inline-flex; align-items: center; gap: 9px; padding: 10px 18px; border: 1px solid rgba(251,249,244,.22);
    border-radius: 999px; font-size: 14px; color: var(--ivory);
  }
  .creds li svg { width: 17px; height: 17px; color: var(--bronze); }

  /* ---------- Dr. Michel legacy (light band, mirrored from the dark About above) ---------- */
  .legacy { background: var(--clay-soft); }
  /* Exact mirror of .about-grid so both doctor photos render at the same width */
  .legacy-grid { display: grid; grid-template-columns: 1.18fr 0.82fr; gap: clamp(40px, 6vw, 80px); align-items: center; }
  .legacy h2 { font-size: clamp(2rem, 4vw, 2.9rem); margin-bottom: 8px; }
  .legacy .role { font-size: 1.05rem; color: var(--bronze-dark); margin-bottom: 22px; font-weight: 500; }
  .legacy p.bio { color: var(--forest-soft); font-size: 1.05rem; line-height: 1.7; margin-bottom: 18px; }
  .legacy .creds { margin-top: 26px; }
  .legacy .creds li { border-color: var(--line); color: var(--forest); background: var(--white); }
  /* Same 4/5 frame as .portrait in the About section, so the two doctor photos read as a pair */
  .legacy-visual img { width: 100%; height: auto; aspect-ratio: 4/5; object-fit: cover; display: block; border-radius: 20px; box-shadow: var(--shadow-soft); }
  .legacy-cap { margin: 14px 0 0; text-align: center; font-size: 13.5px; color: var(--forest-soft); }
  .legacy-note { margin-top: clamp(40px, 5vw, 64px); text-align: center; }
  .legacy-note p {
    font-family: var(--serif); font-style: italic; font-size: clamp(1.15rem, 2vw, 1.5rem);
    color: var(--forest); line-height: 1.5; max-width: 34ch; margin: 0 auto;
    padding-top: clamp(28px, 4vw, 40px); border-top: 1px solid var(--line);
  }

  /* ---------- Testimonials ---------- */
  .reviews-grid { display: grid; grid-template-columns: repeat(2, 1fr); gap: 26px; max-width: 900px; margin: 0 auto; }
  .review-card {
    background: var(--white); border: 1px solid var(--line); border-radius: var(--radius); padding: 34px 30px;
    text-align: left; position: relative; box-shadow: var(--shadow-card);
    margin: 0; /* reset default figure margin (1em 40px) that shrank the cards */
  }
  .review-card blockquote { margin: 0; } /* reset default blockquote margin that squeezed quote text into a narrow column */
  .review-card .quote-mark { font-family: var(--serif); font-size: 4rem; color: var(--sage); line-height: .6; height: 32px; display: block; }
  .review-card .stars { color: var(--bronze); letter-spacing: 3px; font-size: 15px; margin-bottom: 16px; }
  .review-card p.rtext { font-size: 1.05rem; color: var(--forest); line-height: 1.62; margin-bottom: 20px; font-family: var(--serif); font-style: italic; }
  .review-card .rname { font-weight: 600; font-size: 15px; color: var(--forest); }
  .review-card .rloc { font-size: 13.5px; color: var(--forest-soft); }

  /* ---------- FAQ ---------- */
  .faq { background: var(--clay-soft); }
  .faq-wrap { max-width: 800px; margin: 0 auto; }
  .faq-item { border-bottom: 1px solid var(--line); }
  .faq-item:first-child { border-top: 1px solid var(--line); }
  .faq-q {
    width: 100%; text-align: left; background: transparent; border: 0; cursor: pointer; padding: 26px 8px;
    display: flex; align-items: center; justify-content: space-between; gap: 20px; font-family: var(--serif);
    font-size: clamp(1.15rem, 2.4vw, 1.4rem); color: var(--forest); line-height: 1.3;
  }
  .faq-q .fq-icon { flex: 0 0 auto; width: 30px; height: 30px; display: grid; place-items: center; transition: transform .3s ease; color: var(--bronze-dark); }
  .faq-q[aria-expanded="true"] .fq-icon { transform: rotate(45deg); }
  .faq-a { overflow: hidden; max-height: 0; transition: max-height .35s ease; }
  .faq-a-inner { padding: 0 8px 26px; color: var(--forest-soft); font-size: 1.02rem; line-height: 1.65; max-width: 660px; }
  /* In-text links (2026-10-02): the global a{} reset hides links, so prose links get an underline */
  .faq-a-inner a, .offer-text a { color: var(--forest); font-weight: 600; text-decoration: underline; text-decoration-color: var(--bronze); text-underline-offset: 3px; }
  .about p.bio-link a { color: var(--ivory); text-decoration: underline; text-decoration-color: var(--bronze); text-underline-offset: 3px; }
  @media (prefers-reduced-motion: reduce) {
    .faq-q .fq-icon, .faq-a { transition: none; }
  }

  /* ---------- Contact ---------- */
  .contact-grid { display: grid; grid-template-columns: 1.05fr 0.95fr; gap: clamp(36px, 5vw, 64px); align-items: start; }
  .form-card { background: var(--white); border: 1px solid var(--line); border-radius: 20px; padding: clamp(30px, 4vw, 46px); box-shadow: var(--shadow-soft); }
  .form-card h3 { font-size: 1.7rem; margin-bottom: 6px; }
  .form-card > p.fsub { color: var(--forest-soft); margin-bottom: 26px; font-size: 15px; }
  .field { margin-bottom: 18px; }
  .field label { display: block; font-size: 13.5px; font-weight: 600; color: var(--forest); margin-bottom: 7px; letter-spacing: .01em; }
  .field input, .field select, .field textarea {
    width: 100%; padding: 13px 15px; border: 1px solid var(--line); border-radius: 11px; font-family: var(--sans);
    font-size: 16px; color: var(--forest); background: var(--ivory); transition: border-color .2s ease, box-shadow .2s ease;
    /* 16px minimum stops iOS Safari from auto-zooming the page when a field is focused */
  }
  .field input:focus, .field select:focus, .field textarea:focus {
    outline: none; border-color: var(--sage); box-shadow: 0 0 0 3px rgba(143,169,140,.25);
  }
  .field textarea { resize: vertical; min-height: 100px; }
  .field-row { display: grid; grid-template-columns: 1fr 1fr; gap: 14px; }
  .form-success {
    display: none; background: var(--sage-soft); border: 1px solid var(--sage); border-radius: 12px;
    padding: 18px 20px; color: var(--forest); font-size: 15px; margin-bottom: 20px; align-items: flex-start; gap: 12px;
  }
  .form-success.show { display: flex; }
  .form-error {
    display: none; background: #FBEFE9; border: 1px solid #D9A38C; border-radius: 12px;
    padding: 18px 20px; color: #7A3E22; font-size: 15px; margin-bottom: 20px; align-items: flex-start; gap: 12px;
  }
  .form-error.show { display: flex; }
  .form-error svg { flex: 0 0 auto; width: 22px; height: 22px; color: #B4633B; margin-top: 1px; }
  .form-success svg { flex: 0 0 auto; width: 22px; height: 22px; color: var(--sage); margin-top: 1px; }

  .contact-info { }
  .info-block { margin-bottom: 30px; }
  .info-block h3 { font-family: var(--sans); font-size: 12.5px; font-weight: 700; letter-spacing: .14em; text-transform: uppercase; color: var(--bronze-dark); margin: 0 0 12px; }
  .info-row { display: flex; gap: 13px; align-items: flex-start; margin-bottom: 12px; font-size: 15px; color: var(--forest); }
  .info-row svg { flex: 0 0 auto; width: 20px; height: 20px; color: var(--sage); margin-top: 3px; }
  .info-row a:hover { color: var(--bronze-dark); }
  .hours-list { list-style: none; margin: 0; padding: 0; }
  .hours-list li { display: flex; justify-content: space-between; padding: 9px 0; border-bottom: 1px solid var(--line); font-size: 15px; }
  .hours-list li:last-child { border-bottom: 0; }
  .hours-list li span:first-child { color: var(--forest); font-weight: 500; }
  .hours-list li span:last-child { color: var(--forest-soft); }
  .hours-list li.closed span:last-child { color: var(--bronze-dark); }
  .map-embed {
    margin-top: 24px; border-radius: 16px; overflow: hidden; height: 220px; border: 1px solid var(--line);
    background: linear-gradient(135deg, #e6ece3 0%, #ddd2c0 100%); display: grid; place-items: center; text-align: center; position: relative;
  }
  /* Gradient background doubles as the loading backdrop behind the lazy iframe. */


  /* ---------- Footer ---------- */
  footer.site { background: var(--forest); color: rgba(251,249,244,.72); padding: clamp(56px, 7vw, 84px) 0 32px; }
  .footer-grid { display: grid; grid-template-columns: 1.6fr 1fr 1fr; gap: 44px; margin-bottom: 44px; }
  .footer-brand .wordmark { color: var(--ivory); margin-bottom: 16px; }
  .footer-brand p { font-size: 14.5px; line-height: 1.7; max-width: 340px; }
  .footer-brand .habla { display: inline-flex; align-items: center; gap: 8px; margin-top: 18px; color: var(--sage); font-weight: 600; font-size: 14.5px; }
  .footer-col h4 { font-family: var(--sans); color: var(--ivory); font-size: 12.5px; font-weight: 700; letter-spacing: .14em; text-transform: uppercase; margin: 0 0 18px; }
  .footer-col ul { list-style: none; margin: 0; padding: 0; }
  .footer-col li { margin-bottom: 11px; }
  .footer-col a, .footer-col p { font-size: 14.5px; color: rgba(251,249,244,.72); transition: color .2s ease; }
  .footer-col a:hover { color: var(--ivory); }
  .footer-bottom { border-top: 1px solid rgba(251,249,244,.14); padding-top: 26px; display: flex; justify-content: space-between; align-items: center; gap: 16px; flex-wrap: wrap; font-size: 13px; color: rgba(251,249,244,.5); }

  /* ---------- Sticky mobile CTA bar ---------- */
  .mobile-cta-bar {
    position: fixed; bottom: 0; left: 0; right: 0; z-index: 90; display: none; gap: 10px;
    padding: 11px 14px calc(11px + env(safe-area-inset-bottom, 0px)); background: rgba(251,249,244,.94);
    backdrop-filter: blur(12px); -webkit-backdrop-filter: blur(12px); border-top: 1px solid var(--line);
  }
  .mobile-cta-bar .btn { flex: 1; padding: 14px 10px; font-size: 14.5px; }
  /* Stay hidden while the hero's own CTAs are on screen; slide in once they scroll away.
     The .armed class is added by JS only when IntersectionObserver exists — no JS, bar shows as before. */
  .mobile-cta-bar.armed { transform: translateY(110%); transition: transform .35s ease; }
  .mobile-cta-bar.armed.show { transform: translateY(0); }
  @media (prefers-reduced-motion: reduce) { .mobile-cta-bar.armed { transition: none; } }

  /* ---------- Scroll reveal ---------- */
  @media (prefers-reduced-motion: no-preference) {
    .reveal { opacity: 0; transform: translateY(26px); transition: opacity .7s ease, transform .7s ease; }
    .reveal.in { opacity: 1; transform: none; }
  }

  /* ---------- Responsive ---------- */
  @media (max-width: 1000px) {
    .services-grid { grid-template-columns: repeat(2, 1fr); }
    .pillars { grid-template-columns: repeat(2, 1fr); gap: 34px; }
    .reviews-grid { grid-template-columns: 1fr; max-width: 560px; margin: 0 auto; }
    .about-grid, .contact-grid, .legacy-grid { grid-template-columns: 1fr; }
    .legacy-visual { max-width: 380px; margin: 0 auto; }
    .about-grid { gap: 40px; }
    .portrait { width: 100%; max-width: 380px; margin: 0 auto; }
    .footer-grid { grid-template-columns: 1fr 1fr; gap: 34px; }
    .footer-brand { grid-column: 1 / -1; }
  }
  /* Header switches to the hamburger menu below the full container width (~1180px),
     where the full desktop top nav (wordmark + links + toggle + CTA) no longer fits. */
  @media (max-width: 1180px) {
    .nav-links, .nav-actions .lang-toggle, .nav-actions .btn { display: none; }
    .hamburger { display: inline-flex; }
    /* The emptied nav and actions blocks still took two 20px flex gaps, which squeezed the menu button to 2px on
       phones narrower than 412px (found 2026-10-02). Hide them, keep the button 44px, and let the header wordmark
       scale down on small phones (22px from ~400px up). */
    .nav-inner > nav, .nav-actions { display: none; }
    .hamburger { flex: 0 0 auto; }
    header.site .wordmark { font-size: min(22px, calc(9vw - 14px)); }
  }
  @media (max-width: 860px) {
    .trust-strip { grid-template-columns: 1fr; }
    .trust-strip .ts { justify-content: flex-start; padding: 16px 22px; border-right: 0; border-bottom: 1px solid var(--line); }
    .trust-strip .ts:last-child { border-bottom: 0; }
    .trust-strip .ts .ts-ic { width: 42px; height: 42px; }
    .trust-strip .ts .ts-txt { max-width: none; }
    .steps { grid-template-columns: 1fr; max-width: 400px; margin: 0 auto; gap: 40px; }
    .offer-card { flex-direction: column; text-align: center; align-items: center; padding-top: 74px; }
    .offer-card .offer-text { flex-basis: auto; }
    .offer-stub { padding-right: 0; border-right: 0; padding-bottom: 20px; border-bottom: 2px dashed var(--line); width: 100%; }
    .offer-stamp { right: 50%; transform: translateX(50%) rotate(-5deg); }
  }
  /* Sticky bottom booking CTA shows across the whole hamburger range (matches the ~1180px header switch),
     so narrower-than-desktop widths keep a persistent Book CTA. */
  @media (max-width: 1180px) {
    .mobile-cta-bar { display: flex; }
    body { padding-bottom: 74px; }
    footer.site { padding-bottom: 100px; }
  }
  @media (max-width: 560px) {
    .services-grid { grid-template-columns: 1fr; }
    .pillars { grid-template-columns: 1fr; gap: 30px; }
    .field-row { grid-template-columns: 1fr; }
    .footer-grid { grid-template-columns: 1fr; }
    .hero-cta .btn, .offer-cta .btn { width: 100%; }
    .hero-cta { width: 100%; }
  }
  /* ---------- Luxurious global easing for buttons ---------- */
  .btn { transition: transform .4s cubic-bezier(.22,1,.36,1), background .4s ease, color .4s ease, box-shadow .4s ease, border-color .4s ease; }
  .btn:hover { transform: translateY(-2px) scale(1.02); }
  .btn-primary:hover, .btn-bronze-solid:hover { box-shadow: 0 16px 36px -14px rgba(176,141,87,.55); }
  .btn-outline:hover, .btn-ghost:hover, .btn-ivory-outline:hover { box-shadow: 0 12px 28px -16px rgba(46,61,47,.3); }
  @media (prefers-reduced-motion: reduce) { .btn:hover { transform: none; box-shadow: none; } }

  /* ---------- Cinematic hero ---------- */
  .hero { min-height: 100svh; min-height: 100vh; display: flex; align-items: center; color: var(--ivory); }
  .hero h1 { color: var(--ivory); }
  .hero h1 em { color: #E3C480; }
  .hero .eyebrow { color: #D9C79A; }
  .hero-sub { color: rgba(251,249,244,.86); }

  .hero-cinema-bg { position: absolute; inset: 0; z-index: 0; overflow: hidden; background: linear-gradient(160deg, #1c2820 0%, #2E3D2F 42%, #3a4c39 75%, #263424 100%); }
  .hc-wave { position: absolute; left: 0; width: 220%; height: auto; }
  .hc-wave-1 { top: 8%; opacity: .16; }
  .hc-wave-2 { bottom: -6%; opacity: .10; transform: scaleY(-1); }
  .hc-scrim { position: absolute; inset: 0; background:
      radial-gradient(120% 85% at 50% 24%, rgba(46,61,47,0) 0%, rgba(28,40,29,.35) 58%, rgba(18,26,19,.72) 100%),
      linear-gradient(180deg, rgba(18,26,19,.1) 0%, rgba(18,26,19,.6) 100%);
  }
  @media (prefers-reduced-motion: no-preference) {
    .hc-wave-1 { animation: a1WaveDriftA 46s linear infinite; }
    .hc-wave-2 { animation: a1WaveDriftB 64s linear infinite; }
  }
  @keyframes a1WaveDriftA { from { transform: translateX(0); } to { transform: translateX(-50%); } }
  @keyframes a1WaveDriftB { from { transform: translateX(-50%) scaleY(-1); } to { transform: translateX(0) scaleY(-1); } }

  /* Existing botanical line-art, recolored to sit on the dark cinematic bg and drift slowly */
  .hero .hero-bg-1 { color: var(--ivory); opacity: .09; }
  .hero .hero-bg-2 { color: var(--sage); opacity: .13; }
  @media (prefers-reduced-motion: no-preference) {
    .hero .hero-bg-1 { animation: a1DriftA 72s ease-in-out infinite alternate; }
    .hero .hero-bg-2 { animation: a1DriftB 90s ease-in-out infinite alternate; }
  }
  @keyframes a1DriftA { from { transform: translate(0,0) rotate(0deg); } to { transform: translate(-18px,14px) rotate(2deg); } }
  @keyframes a1DriftB { from { transform: translate(0,0) rotate(0deg); } to { transform: translate(16px,-12px) rotate(-2deg); } }

  /* Masked line reveal for the hero headline */
  .hero h1 .line-mask { display: block; overflow: hidden; }
  .hero h1 .line-mask .line-inner { display: inline-block; text-wrap: balance; }
  /* LCP note (audit 2026-07-31): the H1 is this page's LCP element. It must never sit at
     opacity:0 — the LCP spec excludes invisible elements, which pushed LCP past 1.5s. The
     overflow mask alone handles the reveal; timings compressed so the headline fully paints
     well under 1s while keeping the staggered cinematic feel. */
  html.js-anim .hero h1 .line-mask .line-inner {
    transform: translateY(112%);
    animation: a1LineIn .7s cubic-bezier(.22,1,.36,1) forwards;
  }
  html.js-anim .hero h1 .line-mask:nth-of-type(1) .line-inner { animation-delay: .1s; }
  html.js-anim .hero h1 .line-mask:nth-of-type(2) .line-inner { animation-delay: .22s; }
  @keyframes a1LineIn { to { transform: translateY(0); } }

  /* Headline lands first; eyebrow, subhead and CTAs fade up after */
  html.js-anim .hero .eyebrow { opacity: 0; animation: a1FadeUp .7s cubic-bezier(.22,1,.36,1) forwards; animation-delay: .8s; }
  html.js-anim .hero .hero-sub { opacity: 0; animation: a1FadeUp .7s cubic-bezier(.22,1,.36,1) forwards; animation-delay: .92s; }
  html.js-anim .hero .hero-cta .btn { opacity: 0; animation: a1FadeUp .7s cubic-bezier(.22,1,.36,1) forwards; }
  html.js-anim .hero .hero-cta .btn:nth-child(1) { animation-delay: 1.04s; }
  html.js-anim .hero .hero-cta .btn:nth-child(2) { animation-delay: 1.16s; }
  @keyframes a1FadeUp { from { opacity: 0; transform: translateY(14px); } to { opacity: 1; transform: none; } }

  /* Doctor photos: the arch rises after the CTAs, the snapshot drops in and settles on its tilt,
     then the portrait drifts once (20s) and rests. The portrait is likely the LCP element, so its
     entrance is transform-only: never opacity:0 (same LCP rule as the H1 above). */
  @media (prefers-reduced-motion: no-preference) {
    /* fill-mode backwards: the from-state shows during the delay, and after the run the element
       returns to its normal styles, so the hover transition below can take over (forwards would pin it) */
    html.js-anim .hero-portrait { animation: a1ArchIn 1s cubic-bezier(.22,1,.36,1) backwards 1.0s; }
    html.js-anim .hero-snapshot { animation: a1SnapIn .9s cubic-bezier(.22,1,.36,1) backwards 1.5s; }
    .hero-portrait img { animation: a1PortraitDrift 20s ease-out 1 forwards; transform-origin: 50% 30%; }
  }
  @media (hover: hover) and (prefers-reduced-motion: no-preference) {
    .hero-snapshot { transition: transform .5s cubic-bezier(.22,1,.36,1); }
    .hero-photos:hover .hero-snapshot { transform: rotate(0deg) translateY(-8px) scale(1.04); }
  }
  @keyframes a1ArchIn { from { transform: translateY(28px); } to { transform: none; } }
  @keyframes a1SnapIn { from { opacity: 0; transform: rotate(-10deg) translateY(-24px); } to { opacity: 1; transform: rotate(-4deg) translateY(0); } }
  @keyframes a1PortraitDrift { from { transform: scale(1); } to { transform: scale(1.06) translate(-1%, 1%); } }

  @media (prefers-reduced-motion: reduce) {
    html.js-anim .hero h1 .line-mask .line-inner,
    html.js-anim .hero .eyebrow, html.js-anim .hero .hero-sub, html.js-anim .hero .hero-cta .btn,
    html.js-anim .hero-portrait, html.js-anim .hero-snapshot {
      opacity: 1 !important; transform: none !important; animation: none !important;
    }
    html.js-anim .hero-snapshot { transform: rotate(-4deg) !important; }
  }

  /* ---------- About portrait: oversized crop kept from the retired GSAP parallax (its midpoint framing) ---------- */
  .portrait img.parallax-img { position: absolute; inset: -8% 0; width: 100%; height: 116%; object-fit: cover; }

  /* ---------- Footer drift ---------- */
  footer.site { position: relative; overflow: hidden; }
  footer.site .wrap { position: relative; z-index: 1; }
  .footer-drift { position: absolute; inset: 0; z-index: 0; pointer-events: none; }
  .footer-drift svg { position: absolute; bottom: -60px; right: -60px; width: 480px; opacity: .06; color: var(--sage); }
  @media (prefers-reduced-motion: no-preference) {
    .footer-drift svg { animation: a1DriftA 96s ease-in-out infinite alternate; }
  }

  @media (max-width: 640px) {
    .hc-wave { width: 320%; }
  }
@media print{.reveal{opacity:1 !important;transform:none !important}}
html,body{overflow-x:clip}