@layer reset, base, components, utilities;

@layer reset {
  *, *::before, *::after { box-sizing: border-box; }
  html { scroll-behavior: smooth; }
  body, h1, h2, h3, p, figure, blockquote { margin: 0; }
  img { display: block; max-width: 100%; }
  a { color: inherit; text-decoration: none; }
  button { font: inherit; }
}

@layer components {
  .about-hero { padding: 10rem 0 7.5rem; background: var(--paper); }
  .about-hero-grid { display: grid; grid-template-columns: minmax(0, .9fr) minmax(20rem, .72fr); gap: clamp(3rem, 9vw, 9rem); align-items: center; }
  .about-hero-copy { max-width: 37rem; }
  .about-hero h1 { font-family: var(--serif); font-size: clamp(4rem, 8vw, 7rem); line-height: .92; letter-spacing: -.055em; font-weight: 400; }
  .about-hero h1 em, .about-formation h2 em, .about-philosophy blockquote em, .about-cta h2 em { color: var(--clay); font-style: italic; }
  .about-lead { max-width: 28rem; font-family: var(--serif); font-size: 1.5rem; line-height: 1.32; margin-top: 2rem; }
  .about-credential { color: var(--ink-soft); font-size: .6875rem; letter-spacing: .1em; text-transform: uppercase; margin-top: 2.25rem; }
  .about-credential span { color: var(--clay); padding: 0 .5rem; }
  .about-portrait { margin: 0; padding: 0 1.125rem 1.125rem 0; max-width: 27rem; justify-self: end; }
  .about-image-frame { position: relative; background: var(--paper-deep); padding: .75rem; }
  .about-image-frame::after { content: ''; position: absolute; inset: .75rem -1.125rem -1.125rem .75rem; border: 1px solid var(--clay); pointer-events: none; }
  .about-image-frame img { position: relative; z-index: 1; display: block; width: 100%; height: auto; }
  .about-portrait figcaption { position: relative; color: var(--ink-soft); font-size: .625rem; line-height: 1.4; margin: .75rem 0 0 .75rem; }
  .about-story { padding: 7.5rem 0 8rem; }
  .about-story-grid { display: grid; grid-template-columns: 7.5rem minmax(0, 42rem); gap: clamp(2rem, 5vw, 5.125rem); }
  .about-story-copy { max-width: 40rem; }
  .about-prose { max-width: 38rem; font-family: var(--serif); font-size: clamp(1.3rem, 2.2vw, 1.75rem); line-height: 1.38; }
  .about-prose p + p { margin-top: 1.75rem; }
  .about-formation { padding: 7rem 0 7.5rem; }
  .about-formation-grid { display: grid; grid-template-columns: minmax(0, 1fr) minmax(20rem, .85fr); gap: clamp(3rem, 10vw, 10rem); align-items: end; }
  .about-formation h2 { max-width: 38rem; font-family: var(--serif); font-size: clamp(3rem, 5.2vw, 5rem); line-height: .98; letter-spacing: -.045em; font-weight: 400; }
  .formation-list { border-top: 1px solid var(--line); }
  .formation-list > div { display: grid; grid-template-columns: 2.5rem 1fr; gap: 1rem; border-bottom: 1px solid var(--line); padding: 1.375rem 0; }
  .formation-list span { color: var(--clay); font-family: var(--serif); font-size: 1.125rem; }
  .formation-list p { color: var(--ink-soft); font-family: var(--serif); font-size: 1.2rem; line-height: 1.3; }
  .formation-list strong { display: block; color: var(--ink); font-family: var(--sans); font-size: .625rem; font-weight: 500; letter-spacing: .08em; line-height: 1.4; margin-top: .5rem; text-transform: uppercase; }
  .about-philosophy { padding: 7.25rem 0 7.5rem; }
  .about-philosophy-grid { display: grid; grid-template-columns: 7.5rem minmax(0, 1fr) 16rem; gap: clamp(2rem, 5vw, 5.125rem); align-items: end; }
  .about-philosophy blockquote { max-width: 50rem; font-family: var(--serif); font-size: clamp(3rem, 6vw, 6rem); line-height: .98; letter-spacing: -.05em; }
  .about-philosophy blockquote em { color: var(--sage); }
  .about-philosophy-note { max-width: 14rem; color: var(--paper-deep); font-family: var(--serif); font-size: 1.2rem; line-height: 1.35; }
  .about-cta { padding: 5rem 0 5.25rem; }
  .about-cta-grid { display: flex; align-items: end; justify-content: space-between; gap: 2rem; }
  .about-cta h2 { font-family: var(--serif); font-size: clamp(3rem, 5vw, 5.25rem); line-height: .95; letter-spacing: -.05em; font-weight: 400; }
  @media (max-width: 900px) {
    .about-hero-grid { grid-template-columns: minmax(0, 1fr) minmax(15rem, .72fr); gap: 3rem; }
    .about-hero h1 { font-size: clamp(3.5rem, 8vw, 5.5rem); }
    .about-formation-grid { gap: 3rem; }
    .about-philosophy-grid { grid-template-columns: 6.25rem minmax(0, 1fr); }
    .about-philosophy-note { grid-column: 2; max-width: 20rem; margin-top: 1.5rem; }
  }
  @media (max-width: 680px) {
    .about-hero { padding: 8rem 0 4.875rem; }
    .about-hero-grid, .about-story-grid, .about-formation-grid, .about-philosophy-grid { display: block; }
    .about-hero h1 { font-size: clamp(3.25rem, 16vw, 4.5rem); }
    .about-lead { font-size: 1.3rem; margin-top: 1.5rem; }
    .about-credential { margin-top: 1.75rem; }
    .about-portrait { max-width: 23rem; margin: 3rem 0 0; padding-right: .75rem; }
    .about-image-frame::after { inset: .625rem -.75rem -.75rem .625rem; }
    .about-story { padding: 4.5rem 0 5rem; }
    .about-story-grid .section-marker { margin-bottom: 2.0625rem; }
    .about-prose { font-size: 1.25rem; line-height: 1.42; }
    .about-prose p + p { margin-top: 1.375rem; }
    .about-formation { padding: 4.5rem 0 5rem; }
    .about-formation h2 { font-size: clamp(2.75rem, 13vw, 3.75rem); margin-bottom: 2.5rem; }
    .formation-list p { font-size: 1.1rem; }
    .about-philosophy { padding: 4.75rem 0 5rem; }
    .about-philosophy-grid .eyebrow { margin-bottom: 2rem; }
    .about-philosophy blockquote { font-size: clamp(2.75rem, 13vw, 3.75rem); line-height: 1; }
    .about-philosophy-note { margin-top: 2rem; font-size: 1.1rem; }
    .about-cta { padding: 4.25rem 0 4.5rem; }
    .about-cta-grid { display: block; }
    .about-cta h2 { font-size: clamp(3rem, 14vw, 4rem); }
    .about-cta .button { margin-top: 2.25rem; }
  }
}

@layer base {
  :root {
    --ink: #202621;
    --ink-soft: #536059;
    --paper: #f3eee6;
    --paper-deep: #e8e0d5;
    --cream: #fbf8f3;
    --sage: #aab8a7;
    --sage-light: #d9e0d5;
    --clay: #bd6e52;
    --brown: #382b25;
    --line: rgba(32, 38, 33, .18);
    --line-light: rgba(243, 238, 230, .22);
    --serif: Georgia, 'Times New Roman', serif;
    --sans: 'Helvetica Neue', Helvetica, Arial, sans-serif;
    --shell: min(1240px, calc(100% - 96px));
    color: var(--ink);
    font-family: var(--sans);
    font-synthesis: none;
    text-rendering: optimizeLegibility;
  }
  body {
    background: var(--paper);
    color: var(--ink);
    font-size: 1rem;
    line-height: 1.55;
    -webkit-font-smoothing: antialiased;
  }
  p, blockquote { text-wrap: pretty; }
  h1, h2, h3 { text-wrap: balance; }
  .shell { width: var(--shell); margin-inline: auto; }
  .sr-only { position: absolute; width: 1px; height: 1px; padding: 0; margin: -1px; overflow: hidden; clip: rect(0, 0, 0, 0); white-space: nowrap; border: 0; }
  .skip-link { position: fixed; left: 1rem; top: -4rem; z-index: 100; background: var(--ink); color: var(--paper); padding: .75rem 1rem; transition: top .2s ease; }
  .skip-link:focus { top: 1rem; }
  .section-light { background: var(--cream); }
  .section-paper { background: var(--paper); }
  .section-dark { background: var(--brown); color: var(--paper); }
  .section-sage { background: var(--sage-light); }
  .section-clay { background: var(--clay); color: var(--paper); }
}

@layer components {
  .site-header { position: absolute; z-index: 10; inset: 0 0 auto; color: var(--ink); }
  .header-inner { display: flex; align-items: center; justify-content: space-between; min-height: 5.875rem; }
  .brand { display: inline-flex; align-items: center; }
  .brand-logo { position: relative; display: block; width: 11.25rem; height: 2.75rem; overflow: hidden; }
  .brand-logo img { position: absolute; left: 0; top: 50%; width: 11.25rem; height: 11.25rem; max-width: none; transform: translateY(-50%); }
  .brand-symbol { display: none; position: relative; width: 2rem; height: 2rem; overflow: hidden; }
  .brand-symbol img { position: absolute; left: 50%; top: 50%; width: 7.25rem; height: 7.25rem; max-width: none; transform: translate(-50%, -50%); }
  .site-nav { display: flex; align-items: center; gap: 1.75rem; font-size: .75rem; letter-spacing: .04em; }
  .site-nav a:not(.nav-cta) { opacity: .78; transition: opacity .2s ease; }
  .site-nav a:not(.nav-cta):hover, .site-nav a:not(.nav-cta):focus-visible { opacity: 1; }
  .nav-cta { border-bottom: 1px solid currentColor; padding: .5rem 0 .4375rem; margin-left: .5rem; }
  .nav-cta span, .text-link span, .button span, .footer-links span { display: inline-block; margin-left: .5rem; transition: transform .25s ease; }
  .nav-cta:hover span, .text-link:hover span, .button:hover span, .footer-links a:hover span { transform: translate(3px, -2px); }
  .menu-toggle { display: none; min-width: 2.75rem; min-height: 2.75rem; background: none; border: 0; padding: .625rem; cursor: pointer; }
  .menu-line { display: block; width: 1.5625rem; height: 1px; background: currentColor; margin: .375rem 0; }

  .hero { position: relative; padding: 9.0625rem 0 0; background: var(--paper); overflow: hidden; }
  .hero-grid { display: grid; grid-template-columns: minmax(0, 1fr) minmax(23.75rem, 31.25rem); gap: clamp(3.75rem, 8vw, 9.375rem); align-items: center; min-height: 40rem; }
  .hero-copy { max-width: 38.125rem; padding-bottom: 1.875rem; }
  .eyebrow { display: flex; align-items: center; gap: .75rem; margin-bottom: 1.5625rem; color: var(--ink-soft); font-size: .625rem; line-height: 1.2; letter-spacing: .16em; text-transform: uppercase; font-weight: 600; }
  .eyebrow-rule { width: 1.8125rem; height: 1px; background: var(--clay); display: inline-block; }
  .hero h1, .doctor h2, .treatments h2, .method h2, .reviews h2, .visit h2, .final-cta h2, .manifesto h2 { font-family: var(--serif); font-size: clamp(3rem, 6.2vw, 5.5rem); line-height: .99; letter-spacing: -.045em; font-weight: 400; }
  .hero h1 { max-width: 42.5rem; }
  .hero h1 em, .doctor h2 em, .treatments h2 em, .method h2 em, .reviews h2 em, .visit h2 em, .final-cta h2 em, .manifesto h2 em, .space-quote em { font-style: italic; color: var(--clay); }
  .hero-lead { max-width: 30rem; color: var(--ink-soft); font-size: 1.0625rem; line-height: 1.65; margin: 1.875rem 0 1.8125rem; }
  .hero-actions { display: flex; align-items: center; gap: 1.6875rem; }
  .button { display: inline-flex; align-items: center; justify-content: center; min-height: 3.125rem; padding: 0 1.25rem; font-size: .6875rem; letter-spacing: .07em; text-transform: uppercase; transition: transform .25s ease, background .25s ease, color .25s ease; }
  .button:hover { transform: translateY(-2px); }
  .button-dark { background: var(--ink); color: var(--paper); }
  .button-dark:hover { background: var(--brown); }
  .button-light { background: var(--paper); color: var(--ink); }
  .text-link { display: inline-flex; align-items: center; min-height: 2rem; border-bottom: 1px solid var(--clay); padding-bottom: .4375rem; font-size: .75rem; letter-spacing: .03em; }
  .dark-link { margin-top: 1.75rem; }
  .hero-note { font-size: .625rem; letter-spacing: .1em; text-transform: uppercase; color: var(--ink-soft); margin-top: 3.25rem; }
  .hero-portrait { position: relative; margin: 0; padding: 0 1.5625rem 2.125rem 0; max-width: 31.25rem; justify-self: end; }
  .portrait-frame { position: relative; background: var(--paper-deep); padding: .9375rem; }
  .portrait-frame::before { content: ''; position: absolute; inset: .8125rem -1rem -.875rem .8125rem; border: 1px solid var(--clay); z-index: 0; }
  .portrait-frame img { position: relative; z-index: 1; display: block; width: 100%; height: auto; }
  .hero-portrait figcaption { position: relative; color: var(--ink-soft); font-size: .625rem; line-height: 1.4; margin: .75rem 0 0 1.125rem; }
  .hero-foot { border-top: 1px solid var(--line); display: flex; justify-content: space-between; padding: 1.0625rem 0 1.375rem; color: var(--ink-soft); font-size: .625rem; letter-spacing: .12em; text-transform: uppercase; }

  .trust-strip { background: var(--ink); color: var(--paper); }
  .trust-grid { display: grid; grid-template-columns: 1.6fr repeat(4, 1fr); min-height: 7.25rem; align-items: center; }
  .trust-label { font-family: var(--serif); font-size: 1.125rem; line-height: 1.05; color: var(--paper-deep); }
  .trust-item { border-left: 1px solid var(--line-light); padding-left: clamp(1.25rem, 3vw, 2.8125rem); display: grid; gap: .1875rem; }
  .trust-item strong { font-family: var(--serif); font-size: 1.875rem; font-weight: 400; }
  .trust-item span { color: var(--sage-light); font-size: .625rem; letter-spacing: .14em; text-transform: uppercase; }

  .doctor { padding: 7.5rem 0 8rem; }
  .doctor-grid, .method-grid, .reviews-grid, .visit-grid { display: grid; grid-template-columns: 7.5rem minmax(0, 1fr) minmax(16.25rem, .82fr); gap: clamp(2rem, 5vw, 5.125rem); }
  .doctor-grid { grid-template-columns: 7.5rem minmax(0, 1fr) minmax(16.25rem, .72fr); align-items: start; }
  .section-marker { display: flex; align-items: flex-start; gap: .75rem; color: var(--ink-soft); font-size: .625rem; letter-spacing: .15em; text-transform: uppercase; padding-top: .5625rem; }
  .section-marker span { color: var(--clay); font-family: var(--serif); font-size: 1.375rem; letter-spacing: 0; }
  .section-marker i { width: 1.5rem; height: 1px; background: var(--clay); margin-top: .625rem; }
  .section-marker small { writing-mode: vertical-rl; transform: rotate(180deg); font-size: .5625rem; letter-spacing: .15em; }
  .doctor-main { max-width: 40.625rem; }
  .doctor-portrait { margin: 0; max-width: 24rem; justify-self: end; }
  .doctor-image-frame { position: relative; border: 1px solid var(--line); padding: .625rem; background: var(--paper-deep); }
  .doctor-image-frame::after { content: ''; position: absolute; inset: .9375rem -.625rem -.625rem .9375rem; border: 1px solid var(--clay); pointer-events: none; }
  .doctor-image-frame img { position: relative; z-index: 1; display: block; width: 100%; height: auto; }
  .doctor-portrait figcaption, .team-photo figcaption { color: var(--ink-soft); font-size: .625rem; line-height: 1.4; margin-top: .75rem; }
  .doctor h2 { font-size: clamp(3.125rem, 5.4vw, 4.875rem); }
  .large-copy { font-family: var(--serif); font-size: 1.375rem; line-height: 1.35; max-width: 35.625rem; margin: 2.125rem 0 1.25rem; }
  .body-copy { max-width: 30rem; color: var(--ink-soft); line-height: 1.75; }
  .doctor-prose { max-width: 30rem; color: var(--ink-soft); line-height: 1.75; }
  .doctor-prose p + p { margin-top: 1rem; }
  .doctor-signals { display: flex; flex-wrap: wrap; gap: .625rem 1.25rem; max-width: 32rem; border-top: 1px solid var(--line); margin-top: 2rem; padding-top: 1rem; color: var(--ink-soft); font-size: .625rem; letter-spacing: .09em; text-transform: uppercase; }
  .doctor-signals span:not(:last-child)::after { content: '·'; color: var(--clay); margin-left: 1.25rem; }

  .manifesto { background: var(--ink); color: var(--paper); padding: 6.5625rem 0 7.1875rem; }
  .manifesto-grid { display: grid; grid-template-columns: 1fr 2fr 1fr; gap: 2.5rem; align-items: end; }
  .eyebrow-light { color: var(--sage-light); }
  .manifesto h2 { font-size: clamp(3.5625rem, 7vw, 6.5625rem); color: var(--paper); max-width: 50rem; }
  .manifesto h2 em { color: var(--sage); }
  .manifesto p:not(.eyebrow) { max-width: 29.375rem; font-family: var(--serif); font-size: 1.3125rem; line-height: 1.4; color: var(--paper-deep); margin-top: 1.9375rem; }
  .manifesto-signature { justify-self: end; font-family: var(--serif); font-size: 1.5rem; line-height: 1.05; color: var(--sage); transform: rotate(-5deg); text-align: right; }
  .manifesto-signature small { font-family: var(--sans); font-size: .5625rem; letter-spacing: .16em; text-transform: uppercase; color: var(--paper-deep); }

  .treatments { padding: 7.5rem 0 8rem; }
  .section-intro { display: grid; grid-template-columns: 7.5rem minmax(0, 42.5rem); gap: clamp(2rem, 5vw, 5.125rem); margin-bottom: 4.25rem; }
  .treatments h2 { font-size: clamp(3.25rem, 5.8vw, 5.125rem); }
  .intro-text { max-width: 31.25rem; color: var(--ink-soft); line-height: 1.7; margin-top: 1.75rem; }
  .treatment-note { max-width: 25rem; border-left: 1px solid var(--clay); margin-top: 2rem; padding: .1875rem 0 .1875rem 1rem; }
  .treatment-note span { color: var(--clay); font-size: .5625rem; letter-spacing: .14em; text-transform: uppercase; }
  .treatment-note p { font-family: var(--serif); font-size: 1.125rem; line-height: 1.25; margin-top: .4375rem; }
  .treatment-list { border-top: 1px solid var(--line); }
  .treatment-group-label { color: var(--clay); font-size: .5625rem; letter-spacing: .14em; padding: 1.25rem 0 .8125rem; text-transform: uppercase; }
  .treatment-group-label-next { border-top: 1px solid var(--line); margin-top: .75rem; padding-top: 1.75rem; }
  .treatment-row { display: grid; grid-template-columns: 4.0625rem 1.12fr 1fr 2.1875rem; gap: 1.375rem; align-items: center; min-height: 7.125rem; border-bottom: 1px solid var(--line); transition: padding .25s ease, background .25s ease; }
  .treatment-row:hover { padding-inline: .875rem; background: rgba(189, 110, 82, .07); }
  .treatment-number { font-family: var(--serif); color: var(--clay); font-size: 1.25rem; }
  .treatment-name { font-family: var(--serif); font-size: 1.5rem; }
  .treatment-desc { font-size: .8125rem; line-height: 1.5; color: var(--ink-soft); max-width: 19.375rem; }
  .treatment-arrow { font-size: 1.375rem; color: var(--clay); justify-self: end; }

  .method { padding: 7.5rem 0; }
  .method-copy { max-width: 36.875rem; }
  .method h2 { font-size: clamp(3.125rem, 5.7vw, 4.875rem); }
  .method-copy > p:last-child { max-width: 29.375rem; color: var(--ink-soft); font-size: 1.0625rem; line-height: 1.7; margin-top: 1.875rem; }
  .method-steps { grid-column: 2 / 4; display: grid; grid-template-columns: repeat(3, 1fr); gap: 0; border-top: 1px solid var(--line); margin-top: 2.75rem; }
  .method-step { display: grid; grid-template-columns: 2.375rem 1fr; gap: .9375rem; border-right: 1px solid var(--line); padding: 1.375rem 1.5625rem 0 0; margin-right: 1.5625rem; }
  .method-step:last-child { border-right: 0; margin-right: 0; }
  .method-step > span { font-family: var(--serif); color: var(--clay); font-size: 1.125rem; }
  .method-step h3 { font-family: var(--serif); font-size: 1.5rem; font-weight: 400; margin-bottom: .5625rem; }
  .method-step p { color: var(--ink-soft); font-size: .8125rem; line-height: 1.55; }

  .real-space { padding: 6.5625rem 0 7.1875rem; }
  .real-space-grid { display: grid; grid-template-columns: 1.3fr .82fr .72fr; gap: clamp(2rem, 5vw, 5.5rem); align-items: end; }
  .space-quote { border-left: 1px solid var(--clay); padding-left: clamp(1.5625rem, 4vw, 3.75rem); }
  .quote-mark { font-family: var(--serif); color: var(--clay); font-size: 5.5rem; line-height: .5; }
  .space-quote blockquote { font-family: var(--serif); font-size: clamp(2.625rem, 5.2vw, 4.75rem); line-height: 1.01; letter-spacing: -.04em; margin: 1.25rem 0 1.625rem; }
  .space-quote p { max-width: 25.625rem; color: var(--ink-soft); font-size: .9375rem; line-height: 1.7; }
  .space-aside { border-top: 1px solid var(--line); padding-top: 1.25rem; max-width: 21.25rem; }
  .space-aside p { font-family: var(--serif); font-size: 1.5rem; line-height: 1.3; color: var(--ink); margin: 1.75rem 0 2rem; }
  .space-details { display: grid; gap: .625rem; color: var(--ink-soft); font-size: .625rem; letter-spacing: .1em; text-transform: uppercase; }
  .space-details span { border-bottom: 1px solid var(--line); padding-bottom: .625rem; }
  .team-photo { margin: 0; max-width: 18rem; justify-self: end; }
  .team-photo img { display: block; width: 100%; height: auto; border: 1px solid var(--line); }

  .reviews { padding: 7.5rem 0 8rem; }
  .reviews-content { grid-column: 2 / 4; }
  .reviews-heading { display: flex; justify-content: space-between; align-items: end; gap: 2.5rem; }
  .reviews h2 { font-size: clamp(3.125rem, 5.3vw, 4.75rem); max-width: 41.25rem; }
  .rating { display: grid; justify-items: end; gap: .25rem; padding-bottom: .5rem; }
  .rating strong { font-family: var(--serif); font-size: 2.625rem; font-weight: 400; }
  .stars { color: var(--clay); letter-spacing: .25rem; font-size: .9375rem; }
  .rating small { color: var(--ink-soft); font-size: .625rem; letter-spacing: .08em; }
  .featured-review { border-top: 1px solid var(--line); border-bottom: 1px solid var(--line); margin-top: 3.75rem; padding: 2.25rem 0 2rem; }
  .featured-review blockquote { font-family: var(--serif); font-size: clamp(1.75rem, 3.6vw, 3rem); line-height: 1.15; max-width: 48.75rem; margin-bottom: 1.375rem; }
  .featured-review figcaption, .review-small figcaption { font-size: .6875rem; letter-spacing: .07em; }
  .featured-review figcaption span, .review-small figcaption span { color: var(--ink-soft); }
  .review-list { display: grid; grid-template-columns: 1fr 1fr; gap: 1.75rem; }
  .review-small { min-height: 8.125rem; padding-top: 1.5rem; border-bottom: 1px solid var(--line); }
  .review-small blockquote { font-family: var(--serif); font-size: 1.3125rem; line-height: 1.25; margin-bottom: 1.125rem; }

  .visit { padding: 7.5rem 0 8rem; }
  .faq-wrap { grid-column: 2 / 3; }
  .visit h2 { font-size: clamp(3.125rem, 5.3vw, 4.75rem); margin-bottom: 3rem; }
  .faq-list { border-top: 1px solid var(--line); }
  details { border-bottom: 1px solid var(--line); }
  summary { display: flex; align-items: center; justify-content: space-between; gap: 1.25rem; list-style: none; cursor: pointer; min-height: 4.25rem; font-family: var(--serif); font-size: 1.25rem; }
  summary::-webkit-details-marker { display: none; }
  summary span { font-family: var(--sans); font-size: 1.3125rem; color: var(--clay); font-weight: 300; transition: transform .25s ease; }
  details[open] summary span { transform: rotate(45deg); }
  details p { max-width: 32.5rem; color: var(--ink-soft); font-size: .875rem; line-height: 1.65; margin: 0 2.1875rem 1.4375rem 0; }
  .visit-card { align-self: start; background: var(--sage-light); padding: 1.9375rem 1.875rem 2.125rem; margin-top: 2.5rem; }
  .visit-card address { font-family: var(--serif); font-size: 1.5625rem; font-style: normal; line-height: 1.2; margin: 1.75rem 0 2.1875rem; }
  .visit-hours { border-top: 1px solid var(--line); padding-top: 1.0625rem; display: grid; gap: .625rem; margin-bottom: 1.9375rem; font-size: .75rem; color: var(--ink-soft); }
  .visit-hours span { display: flex; justify-content: space-between; gap: .9375rem; }
  .visit-hours b { font-weight: 500; color: var(--ink); }

  .final-cta { padding: 5.5rem 0 5.875rem; }
  .final-grid { display: flex; align-items: end; justify-content: space-between; gap: 3.125rem; }
  .final-cta h2 { font-size: clamp(2.75rem, 4.7vw, 4.25rem); color: var(--paper); }
  .final-cta h2 em { color: var(--ink); }
  .final-cta .eyebrow { color: var(--paper); opacity: .8; }
  .final-cta .button { margin-bottom: .4375rem; }

  .site-footer { background: var(--brown); color: var(--paper); padding: 4rem 0 1.5625rem; }
  .footer-top { display: grid; grid-template-columns: 1.2fr 1fr 1fr; gap: 3.125rem; align-items: start; padding-bottom: 4.0625rem; }
  .brand-footer { align-self: start; }
  .footer-top > p { color: var(--paper-deep); font-size: .75rem; line-height: 1.6; }
  .footer-links { display: grid; gap: .8125rem; justify-self: end; font-size: .75rem; color: var(--paper-deep); }
  .footer-links a:hover { color: var(--paper); }
  .footer-bottom { border-top: 1px solid var(--line-light); padding-top: 1.25rem; display: flex; justify-content: space-between; color: var(--paper-deep); font-size: .625rem; letter-spacing: .06em; }

  .reveal { opacity: 1; transform: none; }
  .js .reveal { opacity: 0; transform: translateY(.875rem); transition: opacity .7s ease, transform .7s cubic-bezier(.22, 1, .36, 1); }
  .js .reveal.is-visible { opacity: 1; transform: none; }
  .reveal-delay { transition-delay: .12s !important; }
  :focus-visible { outline: 2px solid var(--clay); outline-offset: 4px; }
}

@layer utilities {
  @media (max-width: 900px) {
    :root { --shell: min(100% - 3rem, 42.5rem); }
    .site-nav { gap: 1.0625rem; }
    .site-nav a { font-size: .6875rem; }
    .nav-cta { margin-left: 0; }
    .hero-grid { grid-template-columns: minmax(0, 1fr) minmax(18.75rem, 24.375rem); gap: 2.625rem; }
    .hero h1 { font-size: clamp(3rem, 7vw, 4rem); }
    .doctor-grid, .method-grid, .reviews-grid, .visit-grid { grid-template-columns: 6.25rem minmax(0, 1fr); gap: 2.1875rem; }
    .doctor-portrait { grid-column: 2; max-width: 21rem; margin-top: 2.5rem; justify-self: end; }
    .section-intro { grid-template-columns: 6.25rem minmax(0, 1fr); gap: 2.1875rem; }
    .method-steps { grid-column: 2; }
    .reviews-content { grid-column: 2; }
    .visit-card { grid-column: 2; }
    .manifesto-grid { grid-template-columns: 6.25rem minmax(0, 1fr); }
    .manifesto-grid > div { grid-column: 2; }
    .manifesto-signature { grid-column: 2; }
    .real-space-grid { grid-template-columns: minmax(0, 1fr) minmax(13rem, .72fr); gap: 2.75rem; }
    .team-photo { grid-column: 2; grid-row: 1 / span 2; max-width: 16rem; }
    .treatment-row { grid-template-columns: 2.8125rem 1fr 1.875rem; }
    .treatment-desc { grid-column: 2; }
    .treatment-arrow { grid-column: 3; grid-row: 1; align-self: start; margin-top: .25rem; }
    .trust-grid { grid-template-columns: 1.4fr repeat(4, 1fr); min-height: 6.5rem; }
    .trust-item { padding-left: 1rem; }
    .trust-item strong { font-size: 1.5625rem; }
    .trust-item span { font-size: .5625rem; }
    .footer-top { grid-template-columns: 1fr 1fr; }
    .footer-links { justify-self: start; }
    .footer-top > p { grid-row: 2; }
    .footer-bottom { gap: 1.25rem; }
  }

  @media (max-width: 680px) {
    :root { --shell: calc(100% - 2.5rem); }
    body { font-size: .9375rem; }
    .site-header { position: absolute; }
    .header-inner { min-height: 4.75rem; }
    .brand-logo { display: none; }
    .brand-symbol { display: block; }
    .site-nav { position: absolute; top: 4.25rem; left: 1.25rem; right: 1.25rem; display: grid; gap: 0; background: var(--cream); border: 1px solid var(--line); padding: .5rem 1.125rem; box-shadow: 0 .9375rem 1.875rem rgba(32, 38, 33, .1); opacity: 0; visibility: hidden; transform: translateY(-.5rem); transition: opacity .2s ease, transform .2s ease, visibility .2s ease; }
    .site-nav.is-open { opacity: 1; visibility: visible; transform: none; }
    .site-nav a { min-height: 2.75rem; display: flex; align-items: center; padding: .75rem 0; border-bottom: 1px solid var(--line); font-size: .75rem; }
    .site-nav .nav-cta { border-bottom: 0; padding: 1rem 0 .625rem; }
    .menu-toggle { display: block; }
    .hero { padding: 7.0625rem 0 0; }
    .hero-grid { display: flex; flex-direction: column; gap: 2.75rem; align-items: stretch; min-height: 0; }
    .hero-copy { padding: 0; }
    .eyebrow { font-size: .5625rem; margin-bottom: 1.1875rem; letter-spacing: .14em; }
    .hero h1 { font-size: clamp(2.8125rem, 13vw, 3.6875rem); line-height: 1.01; letter-spacing: -.05em; max-width: 32.5rem; }
    .hero-lead { font-size: 1rem; line-height: 1.55; margin: 1.5rem 0; }
    .hero-actions { align-items: flex-start; flex-direction: column; gap: 1.25rem; }
    .button { min-height: 3.25rem; padding: 0 1.125rem; }
    .hero-note { font-size: .5625rem; line-height: 1.4; margin-top: 1.9375rem; }
    .hero-portrait { width: calc(100% - 1.125rem); max-width: 28.75rem; align-self: flex-end; padding: 0 .8125rem 1.875rem 0; }
    .portrait-frame { padding: .625rem; }
    .portrait-frame::before { inset: .5625rem -.625rem -.5625rem .5625rem; }
    .portrait-frame img { aspect-ratio: 1080 / 1357; object-position: center; }
    .hero-portrait figcaption { font-size: .5625rem; margin: .625rem 0 0 .625rem; }
    .hero-foot { padding: .9375rem 0 1.125rem; gap: .625rem; font-size: .5rem; line-height: 1.3; }
    .hero-foot span:nth-child(2) { display: none; }
    .trust-grid { grid-template-columns: 1.35fr repeat(3, 1fr); min-height: 6.5rem; }
    .trust-label { font-size: .9375rem; }
    .trust-item { padding-left: .8125rem; }
    .trust-item strong { font-size: 1.375rem; }
    .trust-item span { font-size: .5rem; letter-spacing: .08em; }
    .trust-wide { display: none; }
    .doctor, .treatments, .method, .reviews, .visit { padding: 4.5rem 0 4.875rem; }
    .doctor-grid, .method-grid, .reviews-grid, .visit-grid { display: block; }
    .section-marker { padding-top: 0; margin-bottom: 2.0625rem; align-items: center; }
    .section-marker small { writing-mode: initial; transform: none; }
    .doctor h2, .treatments h2, .method h2, .reviews h2, .visit h2 { font-size: clamp(2.6875rem, 12vw, 3.4375rem); line-height: 1.02; }
    .large-copy { font-size: 1.25rem; line-height: 1.35; margin: 1.6875rem 0 1.0625rem; }
    .body-copy { line-height: 1.65; }
    .doctor-prose { line-height: 1.65; }
    .doctor-prose p + p { margin-top: .875rem; }
    .doctor-signals { gap: .5rem .75rem; margin-top: 1.5rem; padding-top: .875rem; font-size: .5rem; }
    .doctor-signals span:not(:last-child)::after { margin-left: .75rem; }
    .manifesto { padding: 4.5rem 0 5rem; }
    .manifesto-grid { display: block; }
    .manifesto-grid > .eyebrow { margin-bottom: 2.625rem; }
    .manifesto h2 { font-size: clamp(3.0625rem, 13vw, 3.875rem); line-height: 1.02; }
    .manifesto p:not(.eyebrow) { font-size: 1.1875rem; line-height: 1.4; margin-top: 1.5625rem; }
    .manifesto-signature { display: block; text-align: left; margin-top: 3.125rem; font-size: 1.3125rem; }
    .section-intro { display: block; margin-bottom: 3rem; }
    .section-intro .section-marker { margin-bottom: 2.0625rem; }
    .intro-text { font-size: .9375rem; line-height: 1.6; margin-top: 1.4375rem; }
    .treatment-note { margin-top: 1.5rem; }
    .treatment-note p { font-size: 1rem; }
    .treatment-row { grid-template-columns: 2rem 1fr 1.5rem; column-gap: .75rem; min-height: 0; padding: 1.125rem 0; align-items: start; }
    .treatment-group-label { padding: 1.125rem 0 .75rem; }
    .treatment-group-label-next { margin-top: .5rem; padding-top: 1.375rem; }
    .treatment-row:hover { padding-inline: 0; background: none; }
    .treatment-number { font-size: 1.0625rem; padding-top: .125rem; }
    .treatment-name { font-size: 1.25rem; line-height: 1.15; padding-right: .25rem; }
    .treatment-desc { font-size: .75rem; line-height: 1.5; margin-top: .5rem; max-width: 17.5rem; }
    .treatment-arrow { font-size: 1.1875rem; margin-top: 0; }
    .method-copy > p:last-child { font-size: .9375rem; line-height: 1.65; margin-top: 1.4375rem; }
    .method-steps { display: block; border-top: 1px solid var(--line); margin-top: 3.125rem; }
    .method-step { grid-template-columns: 2rem 1fr; border-right: 0; border-bottom: 1px solid var(--line); margin: 0; padding: 1.1875rem 0; }
    .method-step h3 { font-size: 1.3125rem; margin-bottom: .375rem; }
    .method-step p { font-size: .75rem; }
    .real-space { padding: 4.5rem 0 4.875rem; }
    .real-space-grid { display: block; }
    .space-quote { padding-left: 1.375rem; }
    .quote-mark { font-size: 4.375rem; }
    .space-quote blockquote { font-size: clamp(2.5rem, 11vw, 3.3125rem); line-height: 1.02; margin: 1.0625rem 0 1.4375rem; }
    .space-quote p { font-size: .875rem; line-height: 1.6; }
    .space-aside { margin-top: 3rem; padding-top: 1.125rem; }
    .team-photo { max-width: 22rem; margin: 2.75rem 0 0; }
    .doctor-image-frame { padding: .5rem; }
    .doctor-image-frame::after { inset: .75rem -.5rem -.5rem .75rem; }
    .doctor-portrait figcaption, .team-photo figcaption { font-size: .5625rem; margin-top: .625rem; }
    .space-aside p { font-size: 1.3125rem; margin: 1.375rem 0 1.5rem; }
    .space-details { font-size: .5625rem; }
    .reviews-heading { display: block; }
    .reviews-heading h2 { max-width: 31.25rem; }
    .rating { justify-items: start; display: flex; align-items: center; gap: .5625rem; margin-top: 1.875rem; padding: 0; }
    .rating strong { font-size: 2rem; }
    .rating small { margin-left: .1875rem; }
    .featured-review { margin-top: 2.75rem; padding: 1.875rem 0 1.625rem; }
    .featured-review blockquote { font-size: 1.6875rem; line-height: 1.15; margin-bottom: 1.375rem; }
    .review-list { display: block; }
    .review-small { min-height: 0; padding: 1.375rem 0 1.25rem; }
    .review-small blockquote { font-size: 1.25rem; }
    .visit h2 { margin-bottom: 2.3125rem; }
    .faq-list summary { min-height: 4.1875rem; font-size: 1.125rem; line-height: 1.2; }
    .faq-list details p { font-size: .8125rem; line-height: 1.6; margin: 0 1.75rem 1.25rem 0; }
    .visit-card { margin-top: 3.375rem; padding: 1.5625rem 1.3125rem 1.75rem; }
    .visit-card address { font-size: 1.4375rem; margin: 1.375rem 0 1.75rem; }
    .visit-hours { margin-bottom: 1.5625rem; }
    .final-cta { padding: 4.25rem 0 4.5rem; }
    .final-grid { display: block; }
    .final-cta h2 { font-size: clamp(2.3125rem, 10vw, 3rem); line-height: 1.05; }
    .final-cta h2 br { display: none; }
    .final-cta .button { margin-top: 2.25rem; }
    .site-footer { padding: 2.9375rem 0 1.375rem; }
    .footer-top { display: block; padding-bottom: 2.9375rem; }
    .footer-top > p { margin: 1.8125rem 0; }
    .footer-links { gap: .75rem; }
    .footer-bottom { display: grid; gap: .5625rem; font-size: .5625rem; line-height: 1.4; }
    .footer-bottom span:last-child { max-width: 16.875rem; }
  }

  @media (min-width: 681px) and (max-width: 1100px) {
    :root { --shell: calc(100% - 4rem); }
    .site-nav { gap: .875rem; }
    .hero-grid { gap: 2.8125rem; }
    .hero h1 { font-size: clamp(3.125rem, 6vw, 4.375rem); }
    .doctor h2, .treatments h2, .method h2, .reviews h2, .visit h2 { font-size: clamp(3rem, 5.4vw, 4.1875rem); }
  }

  @media (min-width: 1400px) {
    :root { --shell: min(1320px, calc(100% - 7.5rem)); }
    .hero { padding-top: 10rem; }
    .hero-grid { min-height: 43.125rem; }
    .hero-portrait { max-width: 33.75rem; }
  }

  @media (prefers-reduced-motion: reduce) {
    html { scroll-behavior: auto; }
    .js .reveal { opacity: 1; transform: none; transition: none; }
    .button, .nav-cta span, .text-link span, .footer-links span { transition: none; }
  }
}