/* ==========================================================================
   Onyshchuk Medical Center — light clinical system
   Porcelain surfaces, surgical green. The green is the colour of scrubs and
   an operating theatre, not of beauty retail: it is what makes the page read
   as medicine rather than as a spa.
   Every text token is verified ≥4.5:1 against every surface it sits on.
   ========================================================================== */

:root {
  /* Surfaces — near-white, tinted toward the brand's own green, never warm */
  --bg:        oklch(0.987 0.003 168);
  --bg-2:      oklch(0.966 0.007 168);
  --bg-3:      oklch(0.938 0.010 168);

  /* Ink */
  --ink:       oklch(0.240 0.022 168);   /* 15.8:1 on --bg */
  --ink-2:     oklch(0.430 0.020 168);   /*  7.7:1 */
  --ink-3:     oklch(0.515 0.018 168);   /*  5.4:1, AA on every surface */

  /* Brand */
  --green:      oklch(0.430 0.080 168);  /*  7.5:1 on --bg */
  --green-deep: oklch(0.290 0.048 168);  /* 13.3:1 — drenched sections */
  --green-tint: oklch(0.955 0.018 168);
  --on-green:   oklch(0.975 0.006 168);  /* 12.9:1 on --green-deep */
  --on-green-2: oklch(0.870 0.020 168);  /*  9.4:1 on --green-deep */

  --line:       oklch(0.860 0.022 168);
  --line-soft:  oklch(0.910 0.014 168);
  --line-green: oklch(0.430 0.080 168 / 0.30);

  /* Type */
  --display: 'Spectral', 'Georgia', 'Times New Roman', serif;
  --sans: 'Onest', ui-sans-serif, system-ui, -apple-system, 'Segoe UI', sans-serif;

  --t-xs:   0.75rem;
  --t-sm:   0.8125rem;
  --t-base: clamp(1rem, 0.96rem + 0.2vw, 1.0625rem);
  --t-md:   clamp(1.125rem, 1.05rem + 0.36vw, 1.3125rem);
  --t-lg:   clamp(1.45rem, 1.25rem + 0.9vw, 2rem);
  --t-xl:   clamp(1.9rem, 1.5rem + 1.9vw, 3rem);
  --t-2xl:  clamp(2.4rem, 1.8rem + 3vw, 4.2rem);
  --t-3xl:  clamp(2.4rem, 1.6rem + 3.4vw, 4.1rem);

  --gutter: clamp(1.25rem, 5vw, 4.5rem);
  --measure: 68ch;
  --section-y: clamp(4.5rem, 10vh + 3rem, 9.5rem);

  --e-out: cubic-bezier(0.16, 1, 0.3, 1);
  --e-soft: cubic-bezier(0.22, 0.61, 0.36, 1);

  --z-base: 0;
  --z-raised: 10;
  --z-sticky: 100;
  --z-header: 200;
  --z-nav-sheet: 250;

  --safe-b: env(safe-area-inset-bottom, 0px);
  --safe-t: env(safe-area-inset-top, 0px);
}

/* ---------- Reset ---------- */
*, *::before, *::after { box-sizing: border-box; }
html { -webkit-text-size-adjust: 100%; scroll-behavior: smooth; }
@media (prefers-reduced-motion: reduce) { html { scroll-behavior: auto; } }

body {
  margin: 0;
  background: var(--bg);
  color: var(--ink-2);
  font-family: var(--sans);
  font-size: var(--t-base);
  font-weight: 350;
  line-height: 1.65;
  -webkit-font-smoothing: antialiased;
  text-rendering: optimizeLegibility;
  overflow-x: hidden;
}

/* `height: auto` is not optional: the width/height attributes on every image
   map to a presentational height hint, and a rule that sets only `width`
   leaves it in force, rendering the image at its literal pixel height. */
img { max-width: 100%; height: auto; display: block; }
h1, h2, h3, h4 { margin: 0; font-weight: 400; text-wrap: balance; }
p { margin: 0; text-wrap: pretty; }
ul, ol { margin: 0; padding: 0; list-style: none; }
a { color: inherit; text-decoration: none; }
button { font: inherit; color: inherit; background: none; border: 0; cursor: pointer; }

:focus-visible { outline: 2px solid var(--green); outline-offset: 3px; border-radius: 2px; }
::selection { background: var(--green); color: var(--on-green); }

/* ---------- Type roles ---------- */
.display {
  font-family: var(--display);
  font-weight: 300;
  color: var(--ink);
  line-height: 1.1;
  letter-spacing: -0.018em;
}
.lede { font-size: var(--t-md); line-height: 1.6; color: var(--ink-2); max-width: 46ch; }
.prose { max-width: var(--measure); }
.prose p + p { margin-top: 1.05em; }

.shell { width: 100%; max-width: 1400px; margin-inline: auto; padding-inline: max(var(--gutter), env(safe-area-inset-left)); }
.section { padding-block: var(--section-y); position: relative; }
[id] { scroll-margin-top: clamp(5.5rem, 10vh + 3rem, 7.5rem); }

.s-head { display: grid; gap: 1rem; margin-bottom: clamp(2.25rem, 5vw, 4rem); max-width: 62ch; }
.s-head h2 { font-size: var(--t-xl); }
.s-head .s-note { color: var(--ink-3); font-size: var(--t-sm); max-width: 40ch; }

/* A short green rule instead of an uppercase kicker. */
.rule { width: 56px; height: 2px; background: var(--green); transform-origin: left; }

/* ==========================================================================
   Header
   ========================================================================== */
.hdr {
  position: fixed;
  inset-block-start: 0;
  inset-inline: 0;
  z-index: var(--z-header);
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 1rem;
  padding: clamp(0.85rem, 1.8vw, 1.35rem) var(--gutter);
  padding-top: max(clamp(0.85rem, 1.8vw, 1.35rem), var(--safe-t));
  /* Solid from the start: the hero photograph runs to the top edge on the
     right, and transparent nav links over a bright photo are unreadable. */
  background: oklch(0.987 0.003 168 / 0.92);
  backdrop-filter: blur(12px) saturate(1.1);
  border-bottom: 1px solid transparent;
  transition: border-color 0.4s var(--e-soft), padding 0.4s var(--e-soft);
}
.hdr[data-stuck='true'] {
  border-bottom-color: var(--line-soft);
  padding-block: clamp(0.6rem, 1.2vw, 0.9rem);
}

.hdr-mark { display: inline-flex; align-items: baseline; gap: 0.65rem; }
.hdr-mark b {
  font-family: var(--display);
  font-weight: 400;
  font-size: 1.2rem;
  letter-spacing: 0.16em;
  color: var(--green);
}
.hdr-mark span {
  font-size: 0.6rem;
  letter-spacing: 0.18em;
  text-transform: uppercase;
  color: var(--ink-3);
}

.nav { display: flex; align-items: center; gap: clamp(0.9rem, 2vw, 2rem); }
.nav a { font-size: var(--t-sm); color: var(--ink-2); position: relative; padding-block: 0.3rem; transition: color 0.3s var(--e-soft); }
.nav a::after {
  content: ''; position: absolute; left: 0; right: 0; bottom: 0; height: 1px;
  background: var(--green); transform: scaleX(0); transform-origin: right;
  transition: transform 0.45s var(--e-out);
}
.nav a:hover { color: var(--green); }
.nav a:hover::after { transform: scaleX(1); transform-origin: left; }
/* `.nav a` outranks `.btn`, which would repaint the CTA label in muted ink. */
.nav a.btn { color: var(--btn-fg); padding-block: 0.9rem; }
.nav a.btn::after { display: none; }
@media (max-width: 1000px) { .nav { display: none; } }

/* ---------- Buttons ---------- */
.btn {
  --btn-fg: var(--on-green);
  --btn-bg: var(--green);
  display: inline-flex; align-items: center; justify-content: center;
  gap: 0.6rem;
  padding: 0.9rem 1.6rem;
  min-height: 48px;
  font-size: var(--t-sm);
  font-weight: 500;
  letter-spacing: 0.03em;
  color: var(--btn-fg);
  background: var(--btn-bg);
  border-radius: 2px;
  position: relative;
  overflow: hidden;
  isolation: isolate;
  transition: transform 0.4s var(--e-out), box-shadow 0.4s var(--e-out);
}
.btn::before {
  content: ''; position: absolute; inset: 0; z-index: -1;
  background: var(--green-deep);
  transform: translateY(101%);
  transition: transform 0.5s var(--e-out);
}
.btn:hover { transform: translateY(-1px); box-shadow: 0 10px 24px -14px oklch(0.29 0.048 168 / 0.7); }
.btn:hover::before { transform: translateY(0); }

.btn-ghost { --btn-fg: var(--green); --btn-bg: transparent; border: 1px solid var(--line); }
.btn-ghost::before { background: var(--green-tint); }
.btn-ghost:hover { border-color: var(--green); box-shadow: none; }

/* On a drenched green section the buttons invert. */
.on-green .btn { --btn-fg: var(--green-deep); --btn-bg: var(--on-green); }
.on-green .btn::before { background: var(--on-green-2); }
.on-green .btn-ghost { --btn-fg: var(--on-green); --btn-bg: transparent; border-color: oklch(0.87 0.02 168 / 0.4); }
.on-green .btn-ghost::before { background: oklch(1 0 0 / 0.1); }

/* ==========================================================================
   Hero — content column on porcelain, image bleeding off the right edge
   ========================================================================== */
.hero {
  display: grid;
  grid-template-columns: minmax(0, 1fr) minmax(0, 0.82fr);
  align-items: stretch;
  min-height: 100svh;
  border-bottom: 1px solid var(--line-soft);
}
.hero-copy {
  display: grid;
  align-content: center;
  gap: 0;
  padding: clamp(7rem, 16vh, 11rem) clamp(1.25rem, 5vw, 5rem) clamp(3rem, 8vh, 5rem)
           max(var(--gutter), env(safe-area-inset-left));
}
.hero-meta {
  display: flex; flex-wrap: wrap; align-items: center; gap: 0.5rem 1rem;
  font-size: var(--t-sm); color: var(--ink-3);
}
.hero-meta i { width: 3px; height: 3px; border-radius: 50%; background: var(--green); opacity: 0.6; }
.hero h1 { font-size: var(--t-3xl); max-width: 17ch; margin-block: clamp(1.25rem, 3vw, 2rem) clamp(1rem, 2.2vw, 1.6rem); }
.hero .lede { margin-bottom: clamp(1.75rem, 4vw, 2.5rem); }
.hero-cta { display: flex; flex-wrap: wrap; gap: 0.75rem; }

.hero-figure { position: relative; overflow: hidden; background: var(--bg-3); }
.hero-figure img {
  width: 100%; height: 100%; object-fit: cover; object-position: 50% 30%;
  /* The source is warm golden daylight; pulling saturation back lets the
     green palette stay in charge instead of fighting the photograph. */
  filter: saturate(0.78) contrast(1.04);
}
/* Deliberately NOT mix-blend-mode. The `filter` on the image above creates
   its own stacking context, which takes the image out of this overlay's blend
   backdrop: multiply then lands on the figure's background colour alone and
   paints a flat rectangle over the photograph. A plain translucent wash
   composites predictably. */
.hero-figure::after {
  content: ''; position: absolute; inset: 0;
  background:
    linear-gradient(200deg, oklch(0.43 0.08 168 / 0.05) 0%, oklch(0.29 0.048 168 / 0.15) 100%);
}

@media (max-width: 900px) {
  .hero { grid-template-columns: 1fr; min-height: 0; }
  .hero-copy { padding-block: clamp(6.5rem, 18vh, 9rem) clamp(2rem, 6vh, 3rem); }
  .hero-figure { aspect-ratio: 4 / 3; }
  .hero-cta { display: grid; grid-template-columns: 1fr; }
  .hero-cta .btn { width: 100%; min-height: 52px; }
}

/* ==========================================================================
   Proof band
   ========================================================================== */
.band { background: var(--bg-2); border-bottom: 1px solid var(--line-soft); }
.band ul { display: flex; flex-wrap: wrap; }
.band li {
  flex: 1 1 220px;
  padding: clamp(1.5rem, 3vw, 2.4rem) clamp(1rem, 2.2vw, 2rem);
  border-left: 1px solid var(--line-soft);
  display: grid; gap: 0.3rem; align-content: center;
}
.band li:first-child { border-left: 0; }
.band b {
  font-family: var(--display); font-weight: 300;
  font-size: var(--t-lg); color: var(--green); line-height: 1.1;
}
.band span { font-size: var(--t-sm); color: var(--ink-3); }
@media (max-width: 720px) {
  .band li { flex-basis: 50%; border-top: 1px solid var(--line-soft); padding-block: 1.3rem; }
  .band li:nth-child(odd) { border-left: 0; }
  .band li:nth-child(-n+2) { border-top: 0; }
}

/* ==========================================================================
   Doctor
   ========================================================================== */
.doc-grid {
  display: grid;
  grid-template-columns: minmax(0, 0.8fr) minmax(0, 1fr);
  gap: clamp(2rem, 6vw, 5.5rem);
  align-items: start;
}
@media (max-width: 900px) { .doc-grid { grid-template-columns: 1fr; } }

.portrait { position: relative; margin: 0; }
.portrait img { aspect-ratio: 4 / 5; object-fit: cover; width: 100%; }
/* A thin green frame offset behind the photograph. */
.portrait::before {
  content: ''; position: absolute;
  inset: clamp(0.75rem, 2vw, 1.25rem) calc(-1 * clamp(0.75rem, 2vw, 1.25rem))
         calc(-1 * clamp(0.75rem, 2vw, 1.25rem)) clamp(0.75rem, 2vw, 1.25rem);
  border: 1px solid var(--line-green);
  z-index: -1;
}
.portrait-cap { margin-top: clamp(1.25rem, 3vw, 1.75rem); font-size: var(--t-xs); color: var(--ink-3); }

.doc-name { font-size: var(--t-2xl); }
.doc-role { margin-top: 0.6rem; font-size: var(--t-sm); color: var(--green); letter-spacing: 0.02em; }

.creds { margin-top: clamp(1.75rem, 4vw, 2.5rem); }
.creds li {
  display: grid; grid-template-columns: 1.5rem 1fr; gap: 0.5rem;
  padding-block: 0.85rem;
  border-top: 1px solid var(--line-soft);
  font-size: var(--t-sm); color: var(--ink-2); line-height: 1.55;
}
.creds li::before { content: ''; width: 8px; height: 1px; background: var(--green); margin-top: 0.7em; }
.creds li:last-child { border-bottom: 1px solid var(--line-soft); }

.quote { margin: clamp(2rem, 4vw, 2.75rem) 0 0; padding-left: clamp(1rem, 2.5vw, 1.75rem); border-left: 2px solid var(--green); }
.quote blockquote { margin: 0; font-family: var(--display); font-weight: 300; font-size: var(--t-lg); line-height: 1.35; color: var(--ink); }
.quote figcaption { margin-top: 0.85rem; font-size: var(--t-xs); letter-spacing: 0.12em; text-transform: uppercase; color: var(--ink-3); }

/* ==========================================================================
   Services index
   ========================================================================== */
.index { border-top: 1px solid var(--line); }
.row { border-bottom: 1px solid var(--line-soft); }
.row-btn {
  width: 100%;
  display: grid; grid-template-columns: minmax(0, 1fr) auto;
  align-items: center; gap: 1.25rem;
  padding-block: clamp(1.35rem, 2.8vw, 1.9rem);
  text-align: left; position: relative;
}
.row-btn::before {
  content: ''; position: absolute; inset-block: 0;
  inset-inline: calc(var(--gutter) * -0.4);
  background: var(--green-tint);
  opacity: 0; transition: opacity 0.4s var(--e-soft);
  pointer-events: none; z-index: -1;
}
.row-btn:hover::before { opacity: 1; }

.row-title {
  font-family: var(--display); font-weight: 300;
  font-size: var(--t-lg); color: var(--ink); line-height: 1.2;
  transition: color 0.35s var(--e-soft);
}
.row-btn:hover .row-title, .row[data-open='true'] .row-title { color: var(--green); }
.row-sub { display: block; margin-top: 0.35rem; font-size: var(--t-sm); color: var(--ink-3); }

.row-sign { position: relative; width: 14px; height: 14px; flex: none; }
.row-sign::before, .row-sign::after {
  content: ''; position: absolute; inset: 50% 0 auto 0; height: 1.5px;
  background: var(--green); transition: transform 0.5s var(--e-out);
}
.row-sign::after { transform: rotate(90deg); }
.row[data-open='true'] .row-sign::after { transform: rotate(0deg); }

.row-panel { display: grid; grid-template-rows: 1fr; }
.js .row-panel { grid-template-rows: 0fr; transition: grid-template-rows 0.55s var(--e-out); }
.js .row[data-open='true'] .row-panel { grid-template-rows: 1fr; }
.row-panel > div { overflow: hidden; }
.row-panel .inner {
  padding-bottom: clamp(1.5rem, 3vw, 2.25rem);
  display: grid; grid-template-columns: minmax(0, 1fr) minmax(0, 0.65fr);
  gap: clamp(1.25rem, 4vw, 3rem); max-width: 1000px;
}
@media (max-width: 780px) { .row-panel .inner { grid-template-columns: 1fr; } }
.row-panel p { color: var(--ink-2); font-size: var(--t-sm); line-height: 1.7; }
.row-facts li {
  display: flex; justify-content: space-between; gap: 1rem;
  padding-block: 0.55rem; border-top: 1px solid var(--line-soft); font-size: var(--t-xs);
}
.row-facts li span:first-child { color: var(--ink-3); }
.row-facts li span:last-child { color: var(--ink); text-align: right; }

/* ==========================================================================
   Process — numbers earned: this section is an actual sequence
   ========================================================================== */
.steps {
  display: grid; grid-template-columns: repeat(auto-fit, minmax(230px, 1fr));
  gap: 1px; background: var(--line-soft); border: 1px solid var(--line-soft);
}
.steps li {
  background: var(--bg);
  padding: clamp(1.6rem, 3vw, 2.5rem) clamp(1.15rem, 2.2vw, 1.9rem);
  display: grid; gap: 0.7rem; align-content: start;
  transition: background 0.4s var(--e-soft);
}
.steps li:hover { background: var(--green-tint); }
.steps .n { font-family: var(--display); font-weight: 300; font-size: 1.5rem; color: var(--green); line-height: 1; }
.steps h3 { font-family: var(--display); font-weight: 400; font-size: var(--t-md); color: var(--ink); line-height: 1.25; }
.steps p { font-size: var(--t-sm); color: var(--ink-3); line-height: 1.6; }

/* ==========================================================================
   Drenched green sections
   ========================================================================== */
.on-green { background: var(--green-deep); color: var(--on-green-2); }
.on-green h2, .on-green h3, .on-green .display { color: var(--on-green); }
.on-green .rule { background: var(--on-green-2); }
.on-green .s-head .s-note { color: var(--on-green-2); }

.break { display: grid; grid-template-columns: minmax(0, 0.8fr) minmax(0, 1fr); align-items: stretch; }
.break-img { position: relative; overflow: hidden; min-height: 320px; }
.break-img img { width: 100%; height: 100%; object-fit: cover; }
.break-quote { margin: 0; display: grid; align-content: center; gap: 1.35rem; padding: clamp(2.5rem, 7vw, 6rem) clamp(1.5rem, 5vw, 5rem); }
.break-quote blockquote {
  margin: 0; font-family: var(--display); font-weight: 300;
  font-size: clamp(1.4rem, 1rem + 2vw, 2.3rem); line-height: 1.32;
  color: var(--on-green); max-width: 22ch;
}
.break-quote figcaption { font-size: var(--t-xs); letter-spacing: 0.16em; text-transform: uppercase; color: var(--on-green-2); }
@media (max-width: 860px) {
  .break { grid-template-columns: 1fr; }
  .break-img { min-height: 0; aspect-ratio: 4 / 3; }
}

/* ==========================================================================
   Clinics
   ========================================================================== */
.clinics { display: grid; grid-template-columns: repeat(auto-fit, minmax(300px, 1fr)); gap: clamp(1.5rem, 3vw, 2.5rem); }
.clinic { display: grid; gap: 1.25rem; align-content: start; }
.clinic-img { overflow: hidden; background: var(--bg-3); }
.clinic-img img { width: 100%; aspect-ratio: 16 / 11; object-fit: cover; transition: transform 1.2s var(--e-out); }
.clinic:hover .clinic-img img { transform: scale(1.03); }
.clinic h3 { font-family: var(--display); font-weight: 400; font-size: var(--t-lg); color: var(--ink); }
.clinic .addr { font-size: var(--t-sm); color: var(--ink-2); margin-top: 0.4rem; }
.clinic .tel {
  display: inline-flex; align-items: center; min-height: 44px; margin-top: 0.5rem;
  font-size: var(--t-sm); color: var(--green); border-bottom: 1px solid var(--line);
  transition: border-color 0.35s var(--e-soft);
}
.clinic .tel:hover { border-color: var(--green); }

/* ==========================================================================
   FAQ
   ========================================================================== */
.faq-wrap { display: grid; grid-template-columns: minmax(0, 0.4fr) minmax(0, 1fr); gap: clamp(2rem, 5vw, 4rem); align-items: start; }
.faq-aside { position: sticky; top: 7rem; }
.faq-aside img { width: 100%; aspect-ratio: 3 / 4; object-fit: cover; }
@media (max-width: 900px) {
  .faq-wrap { grid-template-columns: 1fr; }
  .faq-aside { position: static; }
  .faq-aside img { aspect-ratio: 16 / 10; }
}
.faq { border-top: 1px solid var(--line); }
.faq details { border-bottom: 1px solid var(--line-soft); }
.faq summary {
  list-style: none; cursor: pointer;
  padding-block: clamp(1.1rem, 2.2vw, 1.5rem);
  display: grid; grid-template-columns: minmax(0, 1fr) auto; gap: 1.25rem; align-items: center;
  font-family: var(--display); font-weight: 400; font-size: var(--t-md);
  color: var(--ink); line-height: 1.3;
  transition: color 0.35s var(--e-soft);
}
.faq summary::-webkit-details-marker { display: none; }
.faq summary:hover, .faq details[open] summary { color: var(--green); }
.faq details[open] summary .row-sign::after { transform: rotate(0deg); }
.faq .ans { padding-bottom: clamp(1.1rem, 2.2vw, 1.6rem); max-width: 62ch; font-size: var(--t-sm); color: var(--ink-2); }
.faq .ans p + p { margin-top: 0.85em; }

/* ==========================================================================
   Booking — drenched green
   ========================================================================== */
.book-grid { display: grid; grid-template-columns: minmax(0, 1fr) minmax(0, 1fr); gap: clamp(2.25rem, 6vw, 5rem); align-items: start; }
@media (max-width: 900px) { .book-grid { grid-template-columns: 1fr; } }

.contact-list li { padding-block: 0.95rem; border-top: 1px solid oklch(0.87 0.02 168 / 0.22); }
.contact-list li:first-child { border-top: 0; }
/* Both are inline by default, which ran the label and the number together on
   one line; the label has to be its own block. */
.contact-list .k { display: block; font-size: var(--t-xs); letter-spacing: 0.14em; text-transform: uppercase; color: var(--on-green-2); }
.contact-list .v {
  display: flex; align-items: center; min-height: 44px; margin-top: 0.2rem;
  font-family: var(--display); font-weight: 300; font-size: var(--t-md); color: var(--on-green);
  transition: opacity 0.3s var(--e-soft);
}
.contact-list a.v:hover { opacity: 0.75; }

.field { display: grid; gap: 0.45rem; margin-bottom: 1.1rem; }
.field label { font-size: var(--t-xs); letter-spacing: 0.12em; text-transform: uppercase; color: var(--on-green-2); }
.field input, .field select, .field textarea {
  width: 100%; min-height: 48px; padding: 0.8rem 1rem;
  background: oklch(1 0 0 / 0.06);
  border: 1px solid oklch(0.87 0.02 168 / 0.28);
  border-radius: 2px;
  color: var(--on-green);
  font: inherit; font-size: 16px;   /* 16px keeps iOS from zooming on focus */
  transition: border-color 0.3s var(--e-soft), background 0.3s var(--e-soft);
}
.field textarea { resize: vertical; min-height: 96px; }
.field input::placeholder, .field textarea::placeholder { color: oklch(0.87 0.02 168 / 0.55); }
.field input:focus, .field select:focus, .field textarea:focus {
  border-color: var(--on-green); background: oklch(1 0 0 / 0.1); outline: none;
}
.field select { appearance: none; }
.field select option { color: var(--ink); }

.consent { display: flex; gap: 0.8rem; align-items: center; font-size: var(--t-xs); color: var(--on-green-2); line-height: 1.55; margin-bottom: 1.25rem; padding-block: 0.5rem; }
.consent input { width: 24px; height: 24px; accent-color: var(--on-green); flex: none; }
.form-note { margin-top: 0.9rem; font-size: var(--t-xs); color: var(--on-green-2); opacity: 0.85; }
.form-status { margin-top: 0.9rem; font-size: var(--t-sm); color: var(--on-green); min-height: 1.5em; }

/* ==========================================================================
   Footer
   ========================================================================== */
.ftr { background: var(--bg-2); border-top: 1px solid var(--line-soft); padding-block: clamp(2.75rem, 5vw, 4rem) 2rem; }
.ftr-top { display: flex; flex-wrap: wrap; justify-content: space-between; gap: 1.75rem; padding-bottom: 2.25rem; border-bottom: 1px solid var(--line-soft); }
.ftr-mark { font-family: var(--display); font-weight: 400; font-size: 1.4rem; letter-spacing: 0.2em; color: var(--green); }
.ftr-social { display: flex; flex-wrap: wrap; gap: 0.5rem 1.5rem; font-size: var(--t-sm); }
.ftr-social a { display: inline-flex; align-items: center; min-height: 44px; color: var(--ink-2); transition: color 0.3s; }
.ftr-social a:hover { color: var(--green); }
.ftr-legal { margin-top: 1.75rem; display: grid; gap: 0.6rem; font-size: var(--t-xs); color: var(--ink-3); max-width: 72ch; }

/* ==========================================================================
   Mobile navigation + thumb bar
   ========================================================================== */
.hdr-mob { display: none; align-items: center; gap: 0.55rem; }
@media (max-width: 1000px) { .hdr-mob { display: flex; } }

.menu-btn {
  width: 46px; height: 46px; display: grid; place-content: center; gap: 6px;
  border: 1px solid var(--line); border-radius: 2px; flex: none;
}
.menu-btn span { display: block; width: 20px; height: 1.5px; background: var(--green); transition: transform 0.4s var(--e-out); }
.menu-btn[aria-expanded='true'] span:first-child { transform: translateY(3.75px) rotate(45deg); }
.menu-btn[aria-expanded='true'] span:last-child { transform: translateY(-3.75px) rotate(-45deg); }

.mob-nav {
  position: fixed; inset: 0; z-index: var(--z-nav-sheet);
  background: var(--bg);
  display: flex; flex-direction: column; justify-content: center;
  gap: clamp(1.5rem, 5vh, 3rem);
  padding: calc(5.5rem + var(--safe-t)) var(--gutter) calc(2rem + var(--safe-b));
  overflow-y: auto; overscroll-behavior: contain;
}
.mob-nav[hidden] { display: none; }
.mob-nav nav { display: grid; }
.mob-nav nav a {
  font-family: var(--display); font-weight: 300;
  font-size: clamp(1.7rem, 8vw, 2.5rem); line-height: 1.1; color: var(--ink);
  padding-block: clamp(0.55rem, 2vh, 0.95rem);
  border-bottom: 1px solid var(--line-soft);
  display: flex; align-items: center; min-height: 56px;
}
.mob-nav nav a:last-child { color: var(--green); border-bottom: 0; }
.mob-nav-foot { display: grid; gap: 0.2rem; }
.mob-nav-foot a {
  display: flex; align-items: baseline; gap: 0.55rem; min-height: 48px; padding-block: 0.5rem;
  font-family: var(--display); font-weight: 300; font-size: var(--t-md); color: var(--green);
}
.mob-nav-foot a span { font-family: var(--sans); font-size: var(--t-xs); letter-spacing: 0.12em; text-transform: uppercase; color: var(--ink-3); }

/* The sheet covers the viewport, so it is visible by default and the
   animation only plays over it. Keyframes with no fill mode mean "animation
   did not run" resolves to the normal, visible state. */
@keyframes sheet-item-in { from { opacity: 0; transform: translateY(12px); } }
.js .mob-nav.is-open nav a,
.js .mob-nav.is-open .mob-nav-foot a { animation: sheet-item-in 0.5s var(--e-out); }
.js .mob-nav.is-open nav a:nth-child(1) { animation-delay: 40ms; }
.js .mob-nav.is-open nav a:nth-child(2) { animation-delay: 80ms; }
.js .mob-nav.is-open nav a:nth-child(3) { animation-delay: 120ms; }
.js .mob-nav.is-open nav a:nth-child(4) { animation-delay: 160ms; }
.js .mob-nav.is-open nav a:nth-child(5) { animation-delay: 200ms; }
.js .mob-nav.is-open nav a:nth-child(6) { animation-delay: 240ms; }
.js .mob-nav.is-open .mob-nav-foot a { animation-delay: 280ms; }
body.nav-open { overflow: hidden; }

.mob-bar {
  position: fixed; inset-inline: 0; bottom: 0; z-index: var(--z-sticky);
  display: none; gap: 0.55rem;
  padding: 0.65rem var(--gutter) calc(0.65rem + var(--safe-b));
  background: oklch(0.987 0.003 168 / 0.94);
  backdrop-filter: blur(12px);
  border-top: 1px solid var(--line);
  transform: translateY(110%);
  transition: transform 0.45s var(--e-out);
}
.mob-bar .btn { flex: 1; padding-inline: 0.7rem; min-height: 50px; }
.mob-bar.is-up { transform: none; }
@media (max-width: 860px) {
  .mob-bar { display: flex; }
  .ftr { padding-bottom: calc(2rem + 4.5rem + var(--safe-b)); }
}
body.nav-open .mob-bar { transform: translateY(110%); }

/* ==========================================================================
   Touch ergonomics
   ========================================================================== */
@media (pointer: coarse), (max-width: 1000px) {
  .hdr-mark, .ftr-social a, .clinic .tel, .contact-list .v { min-height: 44px; }
  .faq summary { padding-block: 1.05rem; }
  .row-btn { padding-block: 1.3rem; }
}
@media (pointer: coarse) {
  .btn:hover { transform: none; box-shadow: none; }
  .clinic:hover .clinic-img img { transform: none; }
}

@media (max-width: 560px) {
  .hdr { gap: 0.5rem; }
  .hdr-mark span { display: none; }
  .hdr-mob .btn { padding-inline: 1rem; }
  .s-head { margin-bottom: 1.75rem; }
  .row-title { font-size: var(--t-md); }
}

/* ==========================================================================
   Reveal — enhances an already-visible default
   ========================================================================== */
.js [data-reveal] { opacity: 0; transform: translateY(14px); }
.js [data-reveal].is-in {
  opacity: 1; transform: none;
  transition: opacity 0.75s var(--e-out), transform 0.75s var(--e-out);
  transition-delay: var(--d, 0ms);
}
.js .rule[data-reveal] { opacity: 1; transform: scaleX(0); }
.js .rule[data-reveal].is-in { transform: scaleX(1); transition: transform 0.9s var(--e-out); }

.js .hero-line { display: block; overflow: hidden; padding-block: 0.1em 0.18em; margin-block: -0.1em -0.18em; }
.js .hero-line > span { display: block; transform: translateY(100%); transition: transform 1s var(--e-out); transition-delay: var(--d, 0ms); }
.js .hero.is-ready .hero-line > span { transform: translateY(0); }

@media (prefers-reduced-motion: reduce) {
  .js [data-reveal], .js [data-reveal].is-in,
  .js .rule[data-reveal], .js .hero-line > span {
    opacity: 1 !important; transform: none !important;
    transition: opacity 0.2s linear !important;
  }
  .js .mob-nav.is-open nav a, .js .mob-nav.is-open .mob-nav-foot a { animation: none !important; }
  .mob-bar, .menu-btn span { transition: none; }
  *, *::before, *::after { animation-duration: 0.01ms !important; animation-iteration-count: 1 !important; }
}

/* ==========================================================================
   Pale photography on a porcelain page
   These images are high-key by choice, which means their edges dissolve into
   the background and the block stops reading as a deliberate frame. A hairline
   plus a touch of contrast gives them an edge without darkening the mood.
   No blend modes here: see the hero note above.
   ========================================================================== */
.portrait img,
.faq-aside img,
.clinic-img img {
  border: 1px solid var(--line-soft);
  filter: contrast(1.05) saturate(0.92);
  background: var(--bg-2);
}
.clinic-img { border: 0; }
.break-img img { filter: contrast(1.04) saturate(0.9); }