/* Hallmark · shape: clinical index · genre: editorial · theme: brand · redesign: full · job: book
 * paper: oklch(98.5% 0.003 245) · accent: oklch(52% 0.174 253) · display: Manrope · body: Inter · hero: Stage · nav: wordmark with clinical index and booking · footer: contact colophon · signature: the doctor's complete movement statement beside a real scene from his video
 * axes: cool paper/humanist sans/medical blue · posture: Restrained · contrast: pass (render audit) · fold: pass (reviewed at four widths) · v2.0.0 */
/* Hallmark · pre-emit critique: P4 H4 E4 S4 R4 V4 · weakest: image authenticity, use an actual frame from the doctor’s own reel */
/* Hallmark · copy: doctor-provided headline verbatim, per the user’s explicit instruction. Medical explanations follow the supplied slides. */
/* Hallmark · dropped assets/asset-14.js, tailwind-config, button[type=button] · the CDN styling engine is replaced by local CSS; the inert form button now submits a WhatsApp draft, per the requested redesign */
/* Hallmark · dropped unverified demo patient quotes and fake video durations · replaced with the doctor’s real Instagram videos; the downloaded original is retained */
/* Hallmark · reworded: the doctor's slide deck supersedes previous city, biography, services, phone number and FAQ wording. */
/* Hallmark · waive 79 · actual screenshot shows the hero extends to the fold including its caption and bottom contact row · scanner ignores those final elements when measuring the last text */
/* Hallmark · waive 44c · actual hero bounding rectangle fills the 900px screen with its footer row · heuristic chooses the inner grid rather than the full section */
/* Hallmark · waive 23 · user explicitly requested the button’s blue in the hero headline · requested visual emphasis is retained alongside the existing booking actions */
/* Hallmark · waive 38iii · user explicitly requested blue wording in both hero and doctor headings · these two accents preserve the requested text and visual treatment */
@import url("./tokens.css");
@import url("./base.css");
html { scroll-behavior: smooth; }
body { font-synthesis: none; }
a { -webkit-tap-highlight-color: transparent; }
button, a, input, textarea, summary { touch-action: manipulation; }
button { color: inherit; }
:where(a,button,summary,input,textarea):focus-visible { outline: 3px solid var(--color-focus); outline-offset: 5px; }
.btn { display: inline-flex; align-items: center; justify-content: center; gap: var(--space-lg); min-height: 52px; padding: var(--space-sm) var(--space-lg); background: var(--color-accent); color: var(--color-accent-ink); border: 1px solid var(--color-accent); border-radius: var(--radius-input); font-weight: 500; font-size: var(--text-sm); line-height: 1.3; text-decoration: none; white-space: nowrap; cursor: pointer; transition: background-color var(--dur-short) var(--ease-out); }
.btn:hover { background: var(--color-focus); }
.btn:active { transform: translateY(1px); }
.btn:disabled, button:disabled { opacity: .55; cursor: not-allowed; transform: none; }
.btn[aria-busy="true"] { cursor: progress; }
.btn--quiet { background: transparent; color: var(--color-ink); border-color: var(--color-muted); }
.btn--quiet:hover { background: var(--color-paper-3); }
.text-link { display: inline-flex; align-items: center; gap: var(--space-sm); font-size: var(--text-sm); font-weight: 500; text-decoration: underline; text-underline-offset: .3em; }
.text-link:hover { color: var(--color-accent); }
.icon-button { display: inline-flex; align-items: center; justify-content: center; min-width: 48px; min-height: 48px; border: 1px solid var(--color-rule); border-radius: 50%; background: transparent; color: var(--color-ink); cursor: pointer; text-decoration: none; }
.icon-button:hover { background: var(--color-paper-3); }
.icon-button:active { transform: translateY(1px); }
.skip-link { position: fixed; top: var(--space-xs); left: var(--space-md); z-index: var(--z-tooltip); padding: var(--space-sm); background: var(--color-paper); color: var(--color-ink); transform: translateY(-160%); }
.skip-link:focus { transform: translateY(0); }
.site-header { position: relative; z-index: var(--z-sticky-nav); background: var(--color-paper); }
.header-inner { min-height: 106px; display: flex; gap: var(--space-lg); align-items: center; justify-content: space-between; }
.brand { display: flex; gap: var(--space-sm); align-items: center; text-decoration: none; flex-shrink: 0; }
.brand img { width: 64px; height: 64px; object-fit: contain; mix-blend-mode: multiply; }
.brand span { font-family: var(--font-display); font-weight: 700; font-size: 18px; letter-spacing: -.04em; }
.brand small { display: block; font-family: var(--font-body); font-size: 11px; font-weight: 400; letter-spacing: 0; color: var(--color-muted); margin-top: var(--space-2xs); }
.desktop-nav { display: flex; gap: var(--space-lg); align-items: center; }
.desktop-nav a { text-decoration: none; font-size: var(--text-sm); padding-block: var(--space-sm); white-space: nowrap; }
.desktop-nav a:hover { color: var(--color-accent); }
.header-cta { min-height: 48px; }
.menu-toggle, .mobile-nav { display: none; }
.hero { background: var(--color-paper-2); border-radius: 0 0 var(--radius-card) var(--radius-card); }
.hero-grid { display: grid; grid-template-columns: minmax(0,1.12fr) minmax(0,1fr); gap: var(--space-2xl); align-items: center; padding-top: var(--space-xl); padding-bottom: var(--space-xl); min-height: calc(100svh - 182px); max-height: 870px; }
.hero-copy { padding-block: var(--space-lg); }
h1 { font-size: var(--text-display); font-weight: 500; letter-spacing: -.055em; line-height: 1.07; max-width: 16ch; text-wrap: pretty; }
.hero-lead { color: var(--color-muted); font-size: var(--text-lead); line-height: 1.6; max-width: 37ch; margin-top: var(--space-lg); }
.hero-actions { display: flex; flex-wrap: wrap; gap: var(--space-lg); align-items: center; margin-top: var(--space-xl); }
.hero-visual { align-self: stretch; display: flex; flex-direction: column; justify-content: center; min-width: 0; padding-block: var(--space-lg); }
.doctor-portrait { width: 100%; aspect-ratio: 1.08; min-height: 420px; max-height: 600px; margin: 0; border-radius: var(--radius-card); }
.doctor-portrait img { object-position: center 55%; }
.portrait-caption { display: flex; align-items: center; gap: var(--space-md); padding-top: var(--space-lg); }
.portrait-caption .icon-button { margin-left: auto; }
.caption-icon { color: var(--color-accent); }
.caption-icon svg { width: 32px; height: 32px; }
.portrait-caption p { font-size: var(--text-sm); color: var(--color-ink-2); }
.hero-bottom { display: flex; align-items: center; justify-content: space-between; gap: var(--space-lg); min-height: 76px; border-top: 1px solid var(--color-rule); color: var(--color-muted); font-size: var(--text-sm); }
.hero-bottom a { display: flex; gap: var(--space-sm); align-items: center; text-decoration: none; }
.hero-bottom svg { width: 16px; height: 16px; }
@media (min-width:1600px) { .hero-grid { min-height: min(790px,calc(100svh - 182px)); } }
@media (max-width:1100px) { .desktop-nav { gap: var(--space-md); } .brand span { font-size: 16px; } .brand img { width: 48px; height: 48px; } .header-inner { gap: var(--space-md); } .hero-grid { gap: var(--space-xl); } .doctor-portrait { min-height: 380px; } }
@media (max-width:900px) { .desktop-nav { display: none; } .menu-toggle { display: inline-flex; } .header-cta { margin-left: auto; } .mobile-nav { border-top: 1px solid var(--color-rule); padding-block: var(--space-lg); gap: var(--space-lg); } .mobile-nav.is-open { display: flex; flex-wrap: wrap; } .mobile-nav a { text-decoration: none; } .hero-grid { min-height: auto; max-height: none; } .doctor-portrait { min-height: 340px; } .hero-bottom p:nth-child(2) { display: none; } }
@media (max-width:650px) { .header-inner { min-height: 88px; } .brand img { width: 48px; height: 48px; } .brand span { font-size: 15px; letter-spacing: -.025em; } .brand small { font-size: 10px; } .header-cta { display: none; } .hero-grid { grid-template-columns: minmax(0,1fr); gap: var(--space-lg); padding-block: var(--space-xl); } .hero-copy { padding: 0; } h1 { font-size: clamp(2.6rem,10.3vw,4rem); max-width: 18ch; } .hero-lead { font-size: 18px; max-width: 32ch; } .hero-actions { gap: var(--space-lg); margin-top: var(--space-lg); } .hero-visual { padding: 0; margin-top: var(--space-lg); } .doctor-portrait { min-height: 0; aspect-ratio: 1.12; } .portrait-caption { padding-top: var(--space-md); } .hero-bottom { padding-block: var(--space-lg); gap: var(--space-sm); flex-wrap: wrap; min-height: 0; font-size: 12px; } }
@media (prefers-reduced-motion: reduce) { html { scroll-behavior: auto; } *,*::before,*::after { animation: none !important; transition: none !important; } }


.section { padding-block: var(--section-gap-s); }
.section-heading { margin-bottom: var(--space-2xl); }
h2 { font-weight: 500; letter-spacing: -.045em; font-size: var(--text-section); line-height: 1.12; }
h3 { font-weight: 500; letter-spacing: -.025em; }
.split-heading { display: grid; grid-template-columns: minmax(0,1.2fr) minmax(0,1fr); gap: var(--gap-columns); align-items: end; }
.split-heading > p, .split-heading > div { max-width: 37ch; justify-self: end; }
.split-heading p { color: var(--color-muted); line-height: 1.65; }
.split-heading .text-link { margin-top: var(--space-lg); }
.specialty-layout { display: grid; grid-template-columns: minmax(0,1fr) minmax(0,1.1fr); gap: var(--gap-columns); align-items: stretch; }
.specialty-tabs { display: grid; grid-template-columns: repeat(3,minmax(0,1fr)); align-content: stretch; gap: var(--space-sm); }
.specialty-tab { display: flex; align-items: flex-start; flex-direction: column; justify-content: space-between; gap: var(--space-lg); min-height: 138px; padding: var(--space-lg); text-align: left; font-size: var(--text-sm); line-height: 1.4; border: 1px solid var(--color-rule); background: transparent; color: var(--color-ink); border-radius: var(--radius-input); cursor: pointer; transition: background-color var(--dur-short) var(--ease-out); }
.specialty-tab:hover { background: var(--color-paper-2); }
.specialty-tab:active { background: var(--color-paper-3); }
.specialty-tab[aria-selected="true"] { background: var(--color-paper-3); border-color: var(--color-accent); color: var(--color-accent); }
.specialty-tab svg { flex-shrink: 0; }
.specialty-panels { min-width: 0; background: var(--color-field); color: var(--color-field-ink); border-radius: var(--radius-card); }
.specialty-panel { min-height: 438px; padding: var(--space-xl); display: flex; flex-direction: column; align-items: flex-start; }
.specialty-panel + .specialty-panel { border-top: 1px solid var(--color-field-rule); }
.specialty-symbol { color: var(--color-field-muted); margin-bottom: var(--space-xl); }
.specialty-symbol svg { width: 56px; height: 56px; }
.specialty-panel h3 { font-size: 32px; line-height: 1.12; margin-bottom: var(--space-lg); }
.specialty-panel p { color: var(--color-field-muted); font-size: var(--text-md); line-height: 1.7; max-width: 48ch; }
.panel-link { display: inline-flex; align-items: center; justify-content: space-between; gap: var(--space-lg); align-self: stretch; border-top: 1px solid var(--color-field-rule); padding-top: var(--space-lg); margin-top: auto; text-decoration: none; font-size: var(--text-sm); }
.panel-link:hover { text-decoration: underline; }
.panel-link:focus-visible { outline-color: var(--color-field-ink); }
.specialty-panel p + .panel-link { margin-top: var(--space-xl); }
.about { padding-top: var(--space-lg); padding-bottom: var(--section-gap); }
.about-layout { display: grid; grid-template-columns: minmax(0,.9fr) minmax(0,1.1fr); gap: var(--gap-columns); align-items: start; }
.about-photo { max-width: 520px; }
.about-photo figure { margin: 0 0 var(--space-lg); aspect-ratio: 1; border-radius: var(--radius-card); }
.about-photo p { font-size: var(--text-sm); font-weight: 500; }
.about-photo > span { display: block; color: var(--color-muted); font-size: var(--text-sm); margin-top: var(--space-2xs); }
.about-copy { padding-left: var(--space-xl); }
.about-copy h2 { margin-bottom: var(--space-lg); }
.about-copy .lead { margin-bottom: var(--space-lg); color: var(--color-ink-2); }
.about-copy > p:not(.lead) { color: var(--color-muted); line-height: 1.75; }
.experience { display: flex; align-items: center; gap: var(--space-lg); padding-block: var(--space-xl); }
.experience-number { font-family: var(--font-display); font-size: 76px; letter-spacing: -.06em; line-height: 1; font-variant-numeric: tabular-nums; }
.experience p { color: var(--color-muted); max-width: 30ch; font-size: var(--text-sm); }
details { border-bottom: 1px solid var(--color-rule); }
summary { cursor: pointer; display: flex; justify-content: space-between; align-items: center; gap: var(--space-lg); padding-block: var(--space-lg); list-style: none; font-weight: 500; line-height: 1.5; }
summary::-webkit-details-marker { display: none; }
summary::marker { content: ''; }
summary svg { width: 20px; height: 20px; flex-shrink: 0; transition: transform var(--dur-short) var(--ease-out); }
details[open] > summary svg { transform: rotate(45deg); }
summary:hover { color: var(--color-accent); }
.detail-content { padding-bottom: var(--space-lg); color: var(--color-muted); line-height: 1.75; }
.detail-content p + p { margin-top: var(--space-md); }
.about-copy > .text-link { margin-top: var(--space-xl); }
.care-statement { background: var(--color-field); color: var(--color-field-ink); padding-block: var(--space-3xl); }
.care-statement blockquote { margin: 0; max-width: 1120px; }
.care-statement blockquote p { font-family: var(--font-display); font-size: clamp(2rem,3.2vw,3.2rem); letter-spacing: -.035em; line-height: 1.35; text-wrap: pretty; }
.care-statement blockquote footer { color: var(--color-field-muted); margin-top: var(--space-xl); font-size: var(--text-sm); }
.faq-layout { display: grid; grid-template-columns: minmax(0,.8fr) minmax(0,1.2fr); gap: var(--gap-columns); }
.faq-intro h2 { max-width: 11ch; }
.faq-intro p { max-width: 28ch; color: var(--color-muted); margin-top: var(--space-lg); }
.faq-intro .text-link { margin-top: var(--space-xl); }
.faq-list { border-top: 1px solid var(--color-rule); }
.faq-list summary { min-height: 88px; padding-right: var(--space-xs); }
.faq-list .detail-content { padding-right: var(--space-xl); }
.social { background: var(--color-paper-2); }
.reel-grid { display: grid; grid-template-columns: repeat(2,minmax(0,1fr)); gap: var(--gap-columns); }
.reel { display: grid; grid-template-columns: minmax(0,1fr) minmax(0,.9fr); gap: var(--space-lg); align-items: end; }
.reel-cover { position: relative; display: block; border-radius: var(--radius-card); overflow: clip; aspect-ratio: 9/15; background: var(--color-paper-3); }
.reel-cover img { width: 100%; height: 100%; object-fit: cover; }
.play-control { position: absolute; top: var(--space-lg); right: var(--space-lg); width: 52px; height: 52px; background: var(--color-paper); color: var(--color-ink); display: flex; align-items: center; justify-content: center; border-radius: 50%; }
.play-control svg { width: 20px; height: 20px; }
.reel-cover:hover .play-control { background: var(--color-paper-3); }
.video-caption { position: absolute; bottom: var(--space-lg); left: var(--space-lg); background: var(--color-paper); color: var(--color-ink); padding: var(--space-xs) var(--space-sm); border-radius: var(--radius-input); font-size: var(--text-sm); }
.reel-text { padding-bottom: var(--space-lg); }
.reel-text h3 { font-size: var(--text-title); margin-bottom: var(--space-md); }
.reel-text p { font-size: var(--text-sm); color: var(--color-muted); line-height: 1.65; }
.reel-text .text-link { margin-top: var(--space-lg); }
.contact-layout { display: grid; grid-template-columns: minmax(0,1.1fr) minmax(0,1fr); gap: var(--gap-columns); align-items: start; }
.contact-copy { padding-right: var(--space-xl); }
.contact-copy > .lead { color: var(--color-muted); margin-top: var(--space-lg); max-width: 30ch; }
.contact-phone { display: flex; align-items: center; gap: var(--space-lg); width: fit-content; text-decoration: none; font-family: var(--font-display); font-size: 36px; font-weight: 500; letter-spacing: -.035em; padding-block: var(--space-xl); font-variant-numeric: tabular-nums; }
.contact-phone:hover { color: var(--color-accent); }
.contact-location { display: flex; align-items: start; gap: var(--space-md); border-top: 1px solid var(--color-rule); padding-block: var(--space-lg); }
.contact-location > svg { margin-top: var(--space-2xs); flex-shrink: 0; color: var(--color-accent); }
.contact-location h3 { font-size: var(--text-md); margin-bottom: var(--space-xs); }
.contact-location p { font-size: var(--text-sm); color: var(--color-muted); max-width: 36ch; }
.contact-location p + p { margin-top: var(--space-xs); }
.contact-copy > .text-link { margin-top: var(--space-lg); }
.appointment-form { background: var(--color-paper-2); padding: var(--space-xl); border-radius: var(--radius-card); }
.appointment-form > h3 { font-size: 28px; margin-bottom: var(--space-sm); }
.appointment-form > p { color: var(--color-muted); font-size: var(--text-sm); }
.field { display: flex; flex-direction: column; gap: var(--space-xs); margin-top: var(--space-lg); min-width: 0; }
.field label { font-size: var(--text-sm); }
.field input,.field textarea { width: 100%; min-width: 0; padding: var(--space-sm); min-height: 48px; border: 1px solid var(--color-muted); border-radius: var(--radius-input); background: var(--color-paper); color: var(--color-ink); font-size: var(--text-md); }
.field textarea { resize: vertical; }
.field input::placeholder,.field textarea::placeholder { color: var(--color-muted); opacity: 1; }
.field input:user-invalid,.field textarea:user-invalid { border-color: var(--color-error); }
.field-row { display: grid; grid-template-columns: repeat(2,minmax(0,1fr)); gap: var(--space-md); }
.appointment-form .btn { width: 100%; justify-content: space-between; margin-top: var(--space-lg); }
.appointment-form > .form-note { min-height: 1lh; margin-top: var(--space-sm); font-size: 12px; }
.site-footer { border-top: 1px solid var(--color-rule); padding-block: var(--space-xl); }
.footer-top { display: flex; justify-content: space-between; gap: var(--space-xl); align-items: center; }
.footer-top nav { display: flex; gap: var(--space-lg); flex-wrap: wrap; }
.footer-top nav a { font-size: var(--text-sm); text-decoration: none; }
.footer-top nav a:hover { color: var(--color-accent); }
.footer-bottom { display: flex; justify-content: space-between; gap: var(--space-lg); margin-top: var(--space-xl); padding-top: var(--space-lg); border-top: 1px solid var(--color-rule); color: var(--color-muted); font-size: 12px; }
.video-dialog { width: min(680px,calc(100% - 32px)); max-height: calc(100dvh - 32px); padding: var(--space-lg); background: var(--color-paper); color: var(--color-ink); border: 0; border-radius: var(--radius-card); overscroll-behavior: contain; }
.video-dialog::backdrop { background: var(--color-scrim); }
.video-dialog-head { display: flex; gap: var(--space-lg); align-items: center; justify-content: space-between; margin-bottom: var(--space-md); }
.video-dialog-head h2 { font-size: 22px; line-height: 1.2; }
.video-dialog-head .icon-button { flex-shrink: 0; }
.video-dialog video { width: 100%; height: min(70dvh,740px); background: var(--color-field); color: var(--color-field-ink); border-radius: var(--radius-input); object-fit: contain; }
.video-dialog-foot { display: flex; flex-wrap: wrap; align-items: center; justify-content: space-between; gap: var(--space-md); margin-top: var(--space-md); font-size: 12px; }
.video-error { color: var(--color-error); margin-top: var(--space-md); }
@media (max-width:1100px) { .specialty-tab { padding: var(--space-md); } .about-copy { padding-left: var(--space-lg); } .reel { grid-template-columns: minmax(0,1fr); gap: var(--space-lg); } .reel-cover { aspect-ratio: 4/5; } .reel-cover img { object-position: center 34%; } .reel-text { max-width: 32ch; } }
@media (max-width:900px) { .specialty-layout { grid-template-columns: minmax(0,1fr); } .specialty-tabs { grid-template-columns: repeat(3,minmax(0,1fr)); } .specialty-tab { min-height: 116px; flex-direction: row; align-items: center; justify-content: flex-start; } .specialty-panel { min-height: 380px; } .about-layout { grid-template-columns: minmax(0,.8fr) minmax(0,1fr); } .about-copy { padding-left: 0; } .about-photo figure { aspect-ratio: 3/4; } .about-photo img { object-position: center; } .contact-layout { grid-template-columns: minmax(0,1fr) minmax(0,1fr); } .appointment-form { padding: var(--space-lg); } .field-row { grid-template-columns: minmax(0,1fr); gap: 0; } .contact-phone { font-size: 30px; } }
@media (max-width:650px) { .section { padding-block: var(--section-gap); } .section-heading { margin-bottom: var(--space-xl); } h2 { font-size: 34px; } .split-heading { grid-template-columns: minmax(0,1fr); gap: var(--space-lg); } .split-heading > p,.split-heading > div { justify-self: start; } .specialty-tabs { grid-template-columns: repeat(3,minmax(0,1fr)); gap: var(--space-xs); } .specialty-tab { min-height: 130px; padding: var(--space-sm); flex-direction: column; align-items: flex-start; justify-content: space-between; gap: var(--space-sm); font-size: 12px; } .specialty-tab svg { width: 24px; height: 24px; } .specialty-panel { padding: var(--space-lg); min-height: 450px; } .specialty-panel h3 { font-size: 28px; } .specialty-symbol { margin-bottom: var(--space-lg); } .about { padding-top: var(--space-md); } .about-layout { grid-template-columns: minmax(0,1fr); gap: var(--space-xl); } .about-photo { max-width: none; } .about-photo figure { aspect-ratio: 1.12; } .about-copy h2 { max-width: 18ch; } .experience-number { font-size: 64px; } .care-statement { padding-block: var(--space-2xl); } .care-statement blockquote p { font-size: 30px; } .faq-layout { grid-template-columns: minmax(0,1fr); gap: var(--space-xl); } .faq-intro h2 { max-width: 16ch; } .faq-intro p { max-width: 34ch; } .faq-intro .text-link { margin-top: var(--space-lg); } .faq-list summary { min-height: 88px; font-size: var(--text-sm); } .faq-list .detail-content { padding-right: 0; font-size: var(--text-sm); } .reel-grid { grid-template-columns: minmax(0,1fr); gap: var(--space-xl); } .reel { grid-template-columns: minmax(0,.85fr) minmax(0,1fr); gap: var(--space-md); } .reel-cover { aspect-ratio: 9/16; border-radius: var(--radius-input); } .reel-text { padding: 0; } .reel-text h3 { font-size: 21px; line-height: 1.2; } .reel-text p { font-size: 12px; } .reel-text .text-link { font-size: 12px; gap: var(--space-xs); } .reel-text .text-link svg { width: 16px; height: 16px; } .play-control { width: 44px; height: 44px; top: var(--space-sm); right: var(--space-sm); } .video-caption { display: none; } .contact-layout { grid-template-columns: minmax(0,1fr); gap: var(--space-xl); } .contact-copy { padding-right: 0; } .contact-copy > .lead { max-width: 34ch; } .contact-phone { font-size: 32px; } .appointment-form { padding: var(--space-lg); } .field-row { grid-template-columns: minmax(0,1fr); gap: 0; } .footer-top { flex-direction: column; align-items: flex-start; gap: var(--space-lg); } .footer-top nav { gap: var(--space-lg); } .footer-top nav a { font-size: 12px; } .footer-bottom { flex-direction: column; gap: var(--space-sm); } .video-dialog { padding: var(--space-md); } .video-dialog-head h2 { font-size: 18px; } }

.specialty-intro p + p { margin-top: var(--space-md); }
/* Hallmark · hero-review: subagent ship · complete doctor headline and mobile action verified */
/* Hallmark · finish-review: subagent ship · no actionable findings · 21 functional checks passed */

/* User-requested imagery and blue headline accents, November 2026. */
.accent-text { color: var(--color-accent); }
.specialty-panel { position: relative; isolation: isolate; overflow: clip; border-radius: var(--radius-card); background: var(--color-field); color: var(--color-field-ink); }
.specialty-panel > .service-background { position: absolute; inset: 0; z-index: 0; width: 100%; height: 100%; object-fit: cover; object-position: 65% center; opacity: .18; pointer-events: none; }
.specialty-panel > :not(.service-background) { position: relative; z-index: 1; }
.care-statement { position: relative; isolation: isolate; }
.care-statement::before { content: ''; position: absolute; inset: 0; z-index: -1; background-image: url("assets/servicio-rehabilitacion.webp"); background-size: cover; background-position: center 40%; opacity: .12; pointer-events: none; }
@media (min-width: 901px) {
  .about-photo { position: sticky; top: var(--space-lg); align-self: start; }
  .about-photo figure { aspect-ratio: 4 / 5; }
  .about-photo img { object-position: 50% 45%; }
}
@media (min-width: 901px) and (max-height: 800px) {
  .about-photo figure { aspect-ratio: 1; }
}
@media (max-width: 900px) {
  .about-photo { position: static; }
  .about-photo img { object-position: 50% 35%; }
}

/* Fixed navigation, contact bubble, and restrained interaction motion. */
html { scroll-padding-top: calc(var(--header-height) + var(--space-lg)); }
body { padding-top: var(--header-height); }
.site-header { position: fixed; inset: 0 0 auto; background: var(--color-header-glass); -webkit-backdrop-filter: blur(var(--header-blur)); backdrop-filter: blur(var(--header-blur)); max-height: 100dvh; overflow-y: auto; }
.header-inner { min-height: var(--header-height); }
:where(.desktop-nav a,.mobile-nav a,.text-link,.footer-top a,summary) { transition: color var(--dur-short) var(--ease-out); }
.icon-button { transition: background-color var(--dur-short) var(--ease-out); }
.specialty-tab { transition: background-color var(--dur-short) var(--ease-out), border-color var(--dur-short) var(--ease-out), color var(--dur-short) var(--ease-out); }
.whatsapp-float { position: fixed; right: var(--space-lg); bottom: calc(var(--space-lg) + env(safe-area-inset-bottom, 0px)); z-index: var(--z-sticky); display: flex; align-items: center; justify-content: center; width: 60px; height: 60px; border-radius: 50%; background: var(--color-whatsapp); color: var(--color-whatsapp-ink); text-decoration: none; transition: background-color var(--dur-short) var(--ease-out), transform var(--dur-short) var(--ease-out); }
.whatsapp-float:hover { background: var(--color-whatsapp-hover); transform: translateY(-3px); }
.whatsapp-float:active { transform: translateY(0); }
.whatsapp-float:focus-visible { outline: 3px solid var(--color-focus); outline-offset: 5px; }
.site-footer { padding-bottom: calc(var(--space-3xl) + env(safe-area-inset-bottom, 0px)); }
@supports not ((backdrop-filter: blur(1px)) or (-webkit-backdrop-filter: blur(1px))) { .site-header { background: var(--color-paper); } }
@media (min-width: 901px) { .about-photo { top: calc(var(--header-height) + var(--space-lg)); } .about-photo figure { max-height: calc(100dvh - var(--header-height) - 112px); } }
@media (max-width: 650px) { :root { --header-height: 88px; } .whatsapp-float { width: 56px; height: 56px; right: var(--space-md); bottom: calc(var(--space-md) + env(safe-area-inset-bottom, 0px)); } }
@media (prefers-reduced-motion: reduce) { *,*::before,*::after { transition: none !important; animation: none !important; } .whatsapp-float:hover { transform: none; } }
@media (prefers-reduced-motion: reduce) {
  html body *:not(.keep-motion), html body *::before, html body *::after { animation: none !important; transition: none !important; scroll-behavior: auto !important; }
}

.motion-ready [data-reveal="pending"] { opacity: 0; transform: translateY(28px); }
@media (prefers-reduced-motion: reduce) {
  .motion-ready [data-reveal="pending"] { opacity: 1; transform: none; }
}

html.menu-open body { position: fixed; inset-inline: 0; top: var(--menu-scroll-top); width: 100%; }
.mobile-menu { position: fixed; inset: 0; margin: 0; width: 100%; max-width: none; height: 100dvh; max-height: none; border: 0; padding: 0; background: var(--color-paper); color: var(--color-ink); overscroll-behavior: contain; }
.mobile-menu[open] { display: flex; flex-direction: column; overflow-y: auto; }
.mobile-menu::backdrop { background: var(--color-scrim); }
.mobile-menu-header { display: flex; align-items: center; justify-content: space-between; gap: var(--space-md); padding: var(--space-md) var(--gutter); min-height: 88px; flex-shrink: 0; }
.mobile-menu-links { display: flex; flex-direction: column; justify-content: center; flex: 1; gap: var(--space-xs); padding: var(--space-lg) var(--gutter); }
.mobile-menu-links a { display: block; width: fit-content; padding-block: var(--space-xs); text-decoration: none; font-family: var(--font-display); font-size: clamp(1.75rem, 5.6vw, 2.75rem); line-height: 1.25; letter-spacing: -.035em; transition: color var(--dur-short) var(--ease-out); }
.mobile-menu-links a:hover { color: var(--color-accent); }
.mobile-menu-contact { margin-inline: var(--gutter); border-top: 1px solid var(--color-rule); padding-top: var(--space-lg); padding-bottom: calc(var(--space-lg) + env(safe-area-inset-bottom, 0px)); flex-shrink: 0; }
.mobile-menu-phone { display: flex; align-items: center; justify-content: space-between; gap: var(--space-lg); text-decoration: none; font-size: 28px; font-family: var(--font-display); font-variant-numeric: tabular-nums; letter-spacing: -.025em; }
.mobile-menu-contact p { margin-top: var(--space-xs); font-size: var(--text-sm); color: var(--color-muted); }
.mobile-menu-contact .btn { display: flex; justify-content: space-between; margin-top: var(--space-lg); width: 100%; }
@media (max-height: 650px) { .mobile-menu-links { gap: 0; padding-block: var(--space-xs); } .mobile-menu-links a { font-size: 26px; padding-block: var(--space-xs); } .mobile-menu-contact { padding-top: var(--space-md); } .mobile-menu-contact .btn { margin-top: var(--space-md); } }