/* Dra. Cassiane — landing page
   Tokens first, then base, components and one block per section (in page order). */

@font-face {
  font-family: "Bodoni Moda";
  src: url("assets/fonts/BodoniModa-Variable.woff2") format("woff2"), url("assets/fonts/BodoniModa-Variable.ttf") format("truetype");
  font-weight: 400 900;
  font-style: normal;
  font-display: swap;
}
@font-face {
  font-family: "Bodoni Moda";
  src: url("assets/fonts/BodoniModa-Italic-Variable.woff2") format("woff2"), url("assets/fonts/BodoniModa-Italic-Variable.ttf") format("truetype");
  font-weight: 400 900;
  font-style: italic;
  font-display: swap;
}
/* Manrope as static instances of the same variable file (400/500/600/700): rendering never depends
   on variable-font support, whose default instance here is the 200 ExtraLight. */
@font-face {
  font-family: Manrope;
  src: url("assets/fonts/Manrope-400.woff2") format("woff2");
  font-weight: 400;
  font-style: normal;
  font-display: swap;
}
@font-face {
  font-family: Manrope;
  src: url("assets/fonts/Manrope-500.woff2") format("woff2");
  font-weight: 500;
  font-style: normal;
  font-display: swap;
}
@font-face {
  font-family: Manrope;
  src: url("assets/fonts/Manrope-600.woff2") format("woff2");
  font-weight: 600;
  font-style: normal;
  font-display: swap;
}
@font-face {
  font-family: Manrope;
  src: url("assets/fonts/Manrope-700.woff2") format("woff2");
  font-weight: 700;
  font-style: normal;
  font-display: swap;
}

:root {
  /* Page surface, shared by every section: the approved final-CTA tone (its rendered middle row;
     the CTA band ran #f8f1e9 -> #f3eae0). Cards and panels keep their own lighter surfaces. */
  --surface-page: #f6eee5;
  /* Color, sampled from the approved reference and the clinic's own materials */
  --paper: var(--surface-page);
  --paper-light: #fcfaf6;
  --sand: #f2e8de;
  --clay: #eadccb;
  --sage: #e3e8d8;
  --pine: #1b3b2d;
  --pine-strong: #10281d;
  --pine-deep: #152f24;
  --ink: #1d2420;
  --muted: #4a5149;
  --graphite: #3f4842;
  --graphite-strong: #2a332d;
  --name-ink: #364630;
  --forest-ink: #172b25;
  --line: #e0d5c8;
  --line-strong: #cbbcaa;
  --white: #fffdf9;
  --on-pine: #f4eee4;
  --on-pine-muted: #c9d3c8;

  --serif: "Bodoni Moda", Didot, "Bodoni 72", Georgia, serif;
  --sans: Manrope, "Segoe UI", system-ui, sans-serif;

  /* Layout */
  --gutter: clamp(20px, 5vw, 88px);
  --shell-max: 1440px;
  --header-h: 84px;
  --section-pad: clamp(72px, 6.8vw, 120px);
  --radius: 20px;
  --radius-lg: 28px;
  --radius-photo: 8px;

  /* One title scale for every section below the hero (base: "Cuidado em cada detalhe.") */
  --title-size: clamp(2.6rem, 1.15rem + 4.1vw, 5.25rem);
  --title-leading: 1.02;
  --title-tracking: -0.018em;
  --display-axes: "opsz" 40;
  --text-axes: "opsz" 14;

  interpolate-size: allow-keywords;
}

/* ---------- Base ---------- */
*, *::before, *::after { box-sizing: border-box; }
html {
  -webkit-text-size-adjust: 100%;
  scroll-behavior: smooth;
  scroll-padding-top: calc(var(--header-h) + 8px);
}
body {
  margin: 0;
  background: var(--paper);
  color: var(--ink);
  font-family: var(--sans);
  font-size: 1.0625rem;
  line-height: 1.65;
  -webkit-font-smoothing: antialiased;
  text-rendering: optimizeLegibility;
}
h1, h2, h3, p, figure, ul, dl, dd { margin: 0; }
p { text-wrap: pretty; }
ul { padding: 0; list-style: none; }
img { display: block; max-width: 100%; height: auto; }
a { color: inherit; }
button { font: inherit; color: inherit; }
svg {
  width: 1.25em;
  height: 1.25em;
  flex: none;
  fill: none;
  stroke: currentColor;
  stroke-width: 1.5;
  stroke-linecap: round;
  stroke-linejoin: round;
}
::selection { background: #d6dfcc; color: var(--ink); }
:focus-visible { outline: 2px solid var(--pine); outline-offset: 4px; border-radius: 4px; }

.sprite { position: absolute; width: 0; height: 0; overflow: hidden; }
/* Filled brand glyphs (WhatsApp): solid shape in the current text colour, never outlined */
.glyph-fill { fill: currentColor; stroke: none; }
.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; top: 12px; left: 12px; z-index: 100;
  padding: .75rem 1.25rem; border-radius: 999px;
  background: var(--pine); color: var(--white); font-weight: 700; text-decoration: none;
  transform: translateY(-160%);
}
.skip-link:focus { transform: none; }

.shell { width: min(100% - 2 * var(--gutter), var(--shell-max)); margin-inline: auto; }
.section { padding-block: var(--section-pad); }

/* ---------- Type components ---------- */
.eyebrow {
  margin-bottom: 1.4rem;
  color: var(--muted);
  font-size: .75rem;
  font-weight: 600;
  line-height: 1.4;
  letter-spacing: .32em;
  text-transform: uppercase;
}
.section-title {
  font-family: var(--serif);
  font-weight: 400;
  font-variation-settings: var(--display-axes);
  text-wrap: balance;
}
.section-title {
  font-size: var(--title-size);
  line-height: var(--title-leading);
  letter-spacing: var(--title-tracking);
}
.section-intro { color: var(--muted); max-width: 44ch; }
.section-note { color: var(--muted); font-size: .875rem; }

/* ---------- Actions ---------- */
.btn {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: .75rem;
  min-height: 56px;
  padding: .5rem 1.8rem;
  border: 1px solid transparent;
  border-radius: 999px;
  font-size: .8125rem;
  font-weight: 700;
  line-height: 1.2;
  letter-spacing: .12em;
  text-transform: uppercase;
  text-decoration: none;
  white-space: nowrap;
  cursor: pointer;
  transition: background-color .2s ease, color .2s ease, border-color .2s ease, box-shadow .2s ease;
}
.btn svg { width: 20px; height: 20px; }
.btn-solid { background: var(--pine); color: var(--white); }
.btn-solid:hover { background: var(--pine-strong); }
.btn-outline { border-color: var(--pine); color: var(--pine); }
.btn-outline:hover { background: var(--pine); color: var(--white); }
.btn-light { background: var(--on-pine); color: var(--pine-deep); }
.btn-light:hover { background: var(--white); box-shadow: 0 0 0 6px rgba(244, 238, 228, .14); }
.btn-lg { min-height: 64px; padding-inline: 2.3rem; font-size: .875rem; }
.btn-arrow { transition: transform .2s ease; }
.btn:hover .btn-arrow { transform: translateX(3px); }

.text-link {
  display: inline-flex;
  align-items: center;
  gap: .6rem;
  padding-block: .35rem;
  color: var(--pine);
  font-weight: 600;
  text-decoration: underline;
  text-decoration-color: color-mix(in srgb, var(--pine) 35%, transparent);
  text-underline-offset: .35em;
  transition: text-decoration-color .2s ease;
}
.text-link:hover { text-decoration-color: var(--pine); }
.actions { display: flex; flex-wrap: wrap; align-items: center; gap: 1rem 2rem; margin-top: 2.5rem; }

.icon-badge {
  display: grid;
  place-items: center;
  width: 52px;
  height: 52px;
  border: 1px solid var(--line);
  border-radius: 50%;
  background: var(--white);
  color: var(--pine);
}
.icon-badge svg { width: 24px; height: 24px; }
.icon-badge-lg { width: 76px; height: 76px; }
.icon-badge-lg svg { width: 36px; height: 36px; stroke-width: 1.2; }

/* ---------- Header ---------- */
.site-header {
  position: sticky;
  top: 0;
  z-index: 50;
  background: var(--paper);
  border-bottom: 1px solid transparent;
  transition: border-color .25s ease;
}
.site-header[data-scrolled="true"] { border-bottom-color: var(--line); }
.header-bar {
  display: grid;
  grid-template-columns: 1fr auto 1fr;
  align-items: center;
  gap: 1.5rem;
  min-height: var(--header-h);
}
.brand {
  display: inline-flex;
  align-items: center;
  gap: .8rem;
  justify-self: start;
  color: var(--ink);
  text-decoration: none;
}
.brand-mark { width: 34px; height: 34px; color: var(--pine); stroke-width: 1.15; }
.brand-text { display: flex; flex-direction: column; align-items: center; line-height: 1; white-space: nowrap; }
.brand-name {
  font-family: var(--serif);
  font-size: 1.4rem;
  font-weight: 500;
  font-variation-settings: var(--text-axes);
  letter-spacing: .07em;
  text-transform: uppercase;
}
.brand-sub {
  margin-top: .4rem;
  padding-left: .44em;
  color: var(--muted);
  font-size: .625rem;
  font-weight: 600;
  letter-spacing: .44em;
  text-transform: uppercase;
}
.site-nav ul { display: flex; gap: clamp(1.5rem, 2.4vw, 2.75rem); }
.site-nav a:not(.btn) {
  position: relative;
  display: block;
  padding-block: .6rem;
  font-size: .75rem;
  font-weight: 600;
  letter-spacing: .16em;
  text-decoration: none;
  text-transform: uppercase;
}
.site-nav a:not(.btn)::after {
  content: "";
  position: absolute;
  left: 0;
  right: 0;
  bottom: .2rem;
  height: 1px;
  background: currentColor;
  transform: scaleX(0);
  transform-origin: left;
  transition: transform .25s ease;
}
.site-nav a:not(.btn):hover::after,
.site-nav a[aria-current="true"]::after { transform: scaleX(1); }
.nav-cta { display: none; }
.header-cta { justify-self: end; }
.menu-toggle { display: none; }

/* ---------- Hero ----------
   The approved "SUA VIDA" composition (reference 1774x887). Desktop maps the reference with
   --ux (width) for horizontal positions, --uy (height) for vertical positions and --um (the smaller)
   for the side texts. --pk scales her photo, the phrase and SUA VIDA together: it follows the
   height, so she keeps the reference framing (head under the phrase, tablet whole, cut at the hips)
   on 16:9 and 16:10 screens; only screens narrower than 16:10 limit it by width.
   Dra. Cassiane is the ORIGINAL tablet photo (1360x1700, transparent cut-out): reference scale 0.76,
   her centre at x 918 and head top at y 158 of the reference. Source constants: centre x 812, head
   top y 158, body x 410-1188 (x 460 beside the headline rows). */
.hero {
  --hero-h: clamp(620px, 100vh, 1080px);
  --ux: calc(100cqi / 1774);
  --uy: calc(var(--hero-h) / 887);
  --um: min(var(--ux), var(--uy));
  --pk: min(var(--uy), var(--ux) * 1.25);
  --edge: max(var(--gutter), 5.9cqi);
  --body-l: calc(918 * var(--ux) - 305.5 * var(--pk));
  --chest-l: calc(918 * var(--ux) - 267.5 * var(--pk));
  --body-r: calc(918 * var(--ux) + 285.8 * var(--pk));
  --copy-w: min(calc(var(--chest-l) - var(--edge) - 24px), calc(560 * var(--um)));
  --points-r: max(20px, 2.2cqi);
  --points-w: min(calc(372 * var(--um)), calc(100cqi - var(--points-r) - var(--body-r) - 26px));
  --hero-ink: #153328;
  --hero-ink-2: #3f4842;
  --gold: #a97c46;
  --gold-deep: #a47843;
  container-type: inline-size;
  position: relative;
  isolation: isolate;
  overflow: clip;
  height: var(--hero-h);
  background: var(--surface-page);
}
@supports (height: 1svh) {
  .hero { --hero-h: clamp(620px, 100svh, 1080px); }
}
.hero-curves {
  position: absolute;
  inset: 0;
  z-index: 1;
  width: 100%;
  height: 100%;
  fill: none;
  stroke: rgba(176, 134, 82, .5);
  stroke-width: 1;
  pointer-events: none;
}
.hero-curves path, .hero-swash path { vector-effect: non-scaling-stroke; }
.hero-stage { display: contents; }
.hero-tagline {
  position: absolute;
  z-index: 4;
  top: calc(104 * var(--uy));
  left: calc(887 * var(--ux));
  translate: -50% 0;
  color: #1e362c;
  font-family: var(--serif);
  font-size: calc(52 * var(--pk));
  font-style: italic;
  font-variation-settings: "opsz" 11;
  line-height: 1.1;
  letter-spacing: -.01em;
  white-space: nowrap;
}
.hero-word {
  position: absolute;
  z-index: 2;
  top: calc(180 * var(--uy));
  left: calc(920 * var(--ux));
  translate: -50% 0;
  margin: 0;
  font-family: var(--serif);
  font-size: calc(222 * var(--pk));
  font-weight: 600;
  font-variation-settings: "opsz" 14;
  line-height: .74;
  letter-spacing: -.005em;
  text-transform: uppercase;
  white-space: nowrap;
  user-select: none;
  pointer-events: none;
}
.hero-word > span {
  display: block;
  color: var(--gold);
  background: linear-gradient(90deg, #ad8049 0%, #a97c46 55%, #a47843 100%);
  -webkit-background-clip: text;
  background-clip: text;
  -webkit-text-fill-color: transparent;
}
@supports (text-box: trim-both cap alphabetic) {
  .hero-word { line-height: 1; text-box: trim-both cap alphabetic; }
}
.hero-swash {
  position: absolute;
  left: 0;
  top: 0;
  width: 100%;
  height: 151%;
  fill: none;
  stroke: rgba(176, 134, 82, .55);
  stroke-width: 1;
  overflow: visible;
}
.hero-person {
  position: absolute;
  z-index: 3;
  top: calc(158 * var(--uy) - 120.1 * var(--pk));
  left: calc(918 * var(--ux) - 617.1 * var(--pk));
  width: calc(1033.6 * var(--pk));
  height: auto;
  max-width: none;
}
.hero-copy {
  position: absolute;
  z-index: 4;
  top: calc(372 * var(--uy));
  left: var(--edge);
  width: var(--copy-w);
}
.hero-kicker {
  display: flex;
  align-items: center;
  gap: .9em;
  color: #39443d;
  font-size: max(11px, calc(13.5 * var(--um)));
  font-weight: 600;
  letter-spacing: .16em;
  line-height: 1.3;
  text-transform: uppercase;
}
.hero-kicker::after { content: ""; width: 3em; height: 1px; background: rgba(57, 68, 61, .45); }
.hero h1 {
  margin-top: calc(18 * var(--um));
  color: var(--hero-ink);
  font-family: var(--serif);
  font-size: max(30px, min(calc(52 * var(--um)), calc(var(--copy-w) / 8.45)));
  font-weight: 400;
  font-variation-settings: "opsz" 11;
  line-height: 1.02;
  letter-spacing: -.012em;
}
.hero h1 em { color: var(--gold-deep); font-style: italic; }
.btn-hero {
  min-height: clamp(52px, calc(80 * var(--um)), 76px);
  margin-top: calc(26 * var(--um));
  padding-inline: calc(36 * var(--um)) calc(34 * var(--um));
  gap: calc(22 * var(--um));
  background: #0f3a2d;
  font-size: max(12.5px, calc(17 * var(--um)));
  letter-spacing: .1em;
}
.btn-hero:hover { background: #082a20; }
.btn-hero svg { width: max(20px, calc(30 * var(--um))); height: max(20px, calc(30 * var(--um))); }
.btn-hero .btn-arrow { width: max(18px, calc(24 * var(--um))); height: max(18px, calc(24 * var(--um))); stroke-width: 2; }
.hero-mini {
  display: flex;
  flex-wrap: wrap;
  width: calc(var(--body-l) - var(--edge) - 14px);
  gap: .9em 1.6em;
  margin-top: calc(34 * var(--um));
  color: #4f5246;
  font-size: clamp(11px, calc((var(--body-l) - var(--edge) - 14px) / 38), calc(13.5 * var(--um)));
  line-height: 1.3;
}
.hero-mini li { display: flex; align-items: center; gap: .65em; white-space: nowrap; }
.hero-mini svg { width: 2.35em; height: 2.35em; color: var(--hero-ink); stroke-width: 1.4; }
.hero-points {
  position: absolute;
  z-index: 4;
  top: calc(413 * var(--uy));
  right: var(--points-r);
  display: grid;
  gap: calc(26 * var(--um));
  width: var(--points-w);
}
.hero-points li {
  display: grid;
  grid-template-columns: calc(100 * var(--um)) 1fr;
  gap: calc(22 * var(--um));
  align-items: center;
  color: var(--hero-ink-2);
  font-size: max(13px, calc(16 * var(--um)));
  line-height: 1.5;
}
.hero-badge {
  display: grid;
  place-items: center;
  width: calc(100 * var(--um));
  aspect-ratio: 1;
  border-radius: 50%;
  background: rgba(252, 246, 238, .9);
  box-shadow: 0 0 0 1px rgba(176, 134, 82, .1);
  color: var(--gold);
}
.hero-badge svg { width: 46%; height: 46%; stroke-width: 1.5; }
.hero-points strong {
  display: block;
  margin-bottom: .25em;
  color: #2b3226;
  font-size: 1.06em;
  font-weight: 500;
  letter-spacing: .03em;
  line-height: 1.25;
  text-transform: uppercase;
}

/* Narrow desktops (1200-1279px): the button keeps its minimum legible size, so its arrow goes to
   keep it clear of her arm */
@media (min-width: 1200px) and (max-width: 1279px) {
  .btn-hero .btn-arrow { display: none; }
}

/* Header on desktop: transparent over the cream hero, aligned with the hero margins; solid once the page scrolls */
@media (min-width: 1200px) {
  .js .site-header { position: fixed; left: 0; right: 0; background: transparent; transition: background-color .3s ease, border-color .3s ease; }
  .js .site-header .header-bar { width: calc(100% - 2 * max(var(--gutter), 5.9vw)); }
  .js .site-header[data-scrolled="true"] { background: var(--paper); }
}

/* Below 1200px: the stage (phrase, SUA VIDA and her photo) on top; copy and differentials below,
   side by side on tablets and stacked on phones. On tablets the stage fills the first screen; her
   head starts a third of the way down SUA VIDA (the tops of the letters stay readable above her
   hair) and her size is whatever makes the tablet end just above the bottom of the stage (head to
   tablet = .682 of the photo width), capped by width. */
@media (max-width: 1199px) {
  .hero {
    --stage-h: clamp(480px, 100vh - var(--header-h), 100cqi * 1.05);
    --tag-fs: clamp(1.25rem, 5.6cqi, 2.4rem);
    --word-fs: calc(min(100cqi - 2 * var(--gutter), 900px) / 4.95);
    --word-top: calc(14px + var(--tag-fs) * 1.5);
    --head-y: calc(var(--word-top) + var(--word-fs) * .245);
    --pw: min(100cqi * 1.3, (var(--stage-h) - var(--head-y) - 18px) / .682);
    display: grid;
    grid-template-columns: minmax(0, 7fr) minmax(0, 5fr);
    column-gap: clamp(28px, 5vw, 64px);
    height: auto;
    padding-inline: var(--gutter);
  }
  @supports (height: 1svh) {
    .hero { --stage-h: clamp(480px, 100svh - var(--header-h), 100cqi * 1.05); }
  }
  .hero-curves { height: var(--stage-h); }
  .hero-stage { position: relative; display: block; grid-column: 1 / -1; height: var(--stage-h); margin-inline: calc(-1 * var(--gutter)); overflow: clip; }
  .hero-tagline { top: 14px; left: 50%; font-size: var(--tag-fs); }
  .hero-word { top: var(--word-top); left: 50%; font-size: var(--word-fs); }
  .hero-person { top: calc(var(--head-y) - var(--pw) * .1162); left: calc(50% - var(--pw) * .597); width: var(--pw); }
  .hero-copy,
  .hero-points { position: static; width: auto; }
  .hero-copy { padding: 2.25rem 0 3.5rem; }
  .hero h1 { font-size: clamp(2.1rem, 6.2cqi, 3.2rem); margin-top: .9rem; }
  .btn-hero { min-height: 58px; margin-top: 1.5rem; padding-inline: 1.6rem 1.4rem; font-size: .8125rem; }
  .hero-mini { width: auto; flex-wrap: wrap; gap: 1rem 1.5rem; margin-top: 1.6rem; font-size: .8125rem; }
  .hero-points { align-self: start; gap: 1.25rem; padding: 2.9rem 0 3.5rem; }
  .hero-points li { grid-template-columns: 56px 1fr; gap: 1rem; font-size: .9375rem; }
  .hero-badge { width: 56px; }
  .hero-points strong { font-size: .875rem; }
}
/* Short, wide windows below 1200px (e.g. a laptop browser pane): SUA VIDA is large next to her, so
   her head can start at the top of the letters, as in the reference */
@media (max-width: 1199px) and (min-aspect-ratio: 8/5) {
  .hero { --head-y: calc(var(--word-top) + var(--word-fs) * .06); }
}
@media (max-width: 760px) {
  .hero { --stage-h: clamp(340px, 100cqi * 1.13, 480px); --pw: min(100cqi * 1.38, (var(--stage-h) - var(--head-y) - 18px) / .682); grid-template-columns: minmax(0, 1fr); }
  .hero-curves { display: none; }
  .hero-copy { padding-bottom: 0; }
  .hero h1 { font-size: clamp(2.05rem, 10.6cqi, 2.9rem); }
  .btn-hero { width: 100%; }
  .hero-mini { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: .75rem; font-size: .75rem; }
  .hero-mini li { flex-direction: column; align-items: flex-start; gap: .4rem; white-space: normal; }
  .hero-mini br { display: none; }
  .hero-points { margin-top: 2.25rem; padding-top: 2rem; border-top: 1px solid var(--line); }
  .hero-points li { grid-template-columns: 52px 1fr; }
  .hero-badge { width: 52px; }
}

.about-values strong {
  display: block;
  margin-bottom: .3rem;
  color: var(--ink);
  font-size: .75rem;
  font-weight: 700;
  line-height: 1.35;
  letter-spacing: .14em;
  text-transform: uppercase;
}

/* ---------- Sobre ---------- */
.about-grid {
  display: grid;
  grid-template-columns: minmax(0, 5fr) minmax(0, 5fr) minmax(0, 2.6fr);
  column-gap: clamp(32px, 4.4vw, 84px);
  align-items: center;
}
.about-photo img {
  width: 100%;
  aspect-ratio: 4 / 5;
  object-fit: cover;
  object-position: 50% 30%;
  border-radius: var(--radius-photo);
}
.about-photo figcaption {
  display: flex;
  flex-wrap: wrap;
  justify-content: space-between;
  gap: .25rem 1rem;
  margin-top: 1rem;
  padding-top: .9rem;
  border-top: 1px solid var(--line-strong);
  color: var(--muted);
  font-size: .875rem;
}
.about-photo figcaption span:first-child { color: var(--ink); font-weight: 600; }
.about-lead {
  margin-block: 1.8rem 1.2rem;
  font-family: var(--serif);
  font-size: clamp(1.3rem, 1.05rem + .55vw, 1.6rem);
  font-weight: 500;
  font-variation-settings: var(--text-axes);
  line-height: 1.3;
}
.about-copy > p:not(.eyebrow):not(.about-lead) { max-width: 46ch; color: var(--muted); }
.about-copy > p + p:not(.about-lead) { margin-top: 1rem; }
.about-values {
  display: grid;
  gap: 2rem;
}
.about-values li {
  display: grid;
  grid-template-columns: 32px 1fr;
  gap: 1rem;
  color: var(--muted);
  font-size: .9375rem;
  line-height: 1.5;
}
.about-values svg { width: 30px; height: 30px; color: var(--pine); stroke-width: 1.3; }

/* ---------- Tratamentos ---------- */
.section-head {
  display: grid;
  grid-template-columns: minmax(0, 7fr) minmax(0, 5fr);
  gap: 2rem clamp(32px, 5vw, 96px);
  align-items: end;
}
.section-head .section-intro { padding-bottom: .5rem; }
.treatment-list {
  display: grid;
  grid-template-columns: repeat(4, minmax(0, 1fr));
  margin-top: clamp(56px, 6vw, 96px);
  border-top: 1px solid var(--line-strong);
}
.treatment { padding: 3rem clamp(20px, 2.4vw, 40px) 3rem; }
.treatment:first-child { padding-left: 0; }
.treatment:last-child { padding-right: 0; }
.treatment + .treatment { border-left: 1px solid var(--line-strong); }
.treatment h3 {
  margin-block: 1.9rem .8rem;
  font-family: var(--serif);
  font-size: clamp(1.45rem, 1.1rem + .7vw, 1.9rem);
  font-weight: 500;
  font-variation-settings: var(--text-axes);
  line-height: 1.12;
  letter-spacing: -.01em;
  min-height: 2.24em;
}
.treatment p { color: var(--muted); font-size: 1rem; }
.section-foot {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  justify-content: space-between;
  gap: 1.25rem 2rem;
  padding-top: 2rem;
  border-top: 1px solid var(--line-strong);
}

/* ---------- Ambientes ---------- */
.spaces .section-intro .text-link { margin-top: 1.25rem; }
.gallery {
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  gap: clamp(16px, 1.8vw, 28px);
  margin-top: clamp(48px, 5vw, 80px);
}
.frame {
  position: relative;
  overflow: hidden;
  aspect-ratio: 4 / 5;
  border-radius: var(--radius-photo);
  background: var(--sand);
}
.frame img { width: 100%; height: 100%; object-fit: cover; object-position: 50% 50%; }
/* Detail of the coffee corner: framed on the TV and the console, leaving the cup out of the shot */
.frame-detail img {
  position: absolute;
  top: -28.5%;
  left: -31.25%;
  width: 144%;
  height: auto;
  max-width: none;
  object-fit: initial;
}
.gallery figcaption {
  margin-top: 1rem;
  padding-top: .9rem;
  border-top: 1px solid var(--line);
  color: var(--muted);
  font-size: .875rem;
}

/* ---------- Localização ---------- */
.location-grid {
  display: grid;
  grid-template-columns: minmax(0, 5.5fr) minmax(0, 6.5fr);
  gap: clamp(32px, 4vw, 64px);
}
.address-card {
  display: flex;
  flex-direction: column;
  padding: clamp(28px, 3.2vw, 52px);
  border: 1px solid var(--line);
  border-radius: var(--radius-lg);
  background: var(--white);
}
.address-label {
  display: flex;
  align-items: center;
  gap: .6rem;
  color: var(--muted);
  font-size: .75rem;
  font-weight: 700;
  letter-spacing: .14em;
  text-transform: uppercase;
}
.address-label svg { width: 20px; height: 20px; color: var(--pine); }
.address-card address { font-style: normal; }
.address-street svg { width: .8em; height: .8em; margin-right: .35em; color: var(--pine); vertical-align: -.04em; stroke-width: 1.8; }
.location-map { display: flex; flex-direction: column; gap: 1.25rem; }
.location-map .map-frame { flex: 1; }
.map-actions { margin-top: 0; }
.address-card address a { display: grid; gap: .35rem; text-decoration: none; }
.address-street {
  font-family: var(--serif);
  font-size: clamp(1.5rem, 1.05rem + .95vw, 2rem);
  font-weight: 500;
  font-variation-settings: var(--text-axes);
  line-height: 1.15;
  text-decoration: underline;
  text-decoration-color: var(--line-strong);
  text-decoration-thickness: 1px;
  text-underline-offset: .2em;
}
.address-card address a:hover .address-street { text-decoration-color: var(--pine); }
.address-room { color: var(--ink); font-weight: 600; }
.address-city { color: var(--muted); }
.nowrap { white-space: nowrap; }
.contact-list {
  display: grid;
  gap: .9rem;
  margin-top: 1.75rem;
  padding-top: 1.5rem;
  border-top: 1px solid var(--line);
}
.contact-list > div { display: grid; grid-template-columns: 9rem 1fr; gap: 1rem; }
.contact-list dt {
  display: flex;
  align-items: center;
  gap: .6rem;
  align-self: start;
  padding-top: .15rem;
  font-size: .75rem;
  font-weight: 700;
  letter-spacing: .14em;
  text-transform: uppercase;
}
.contact-list dt svg { width: 20px; height: 20px; color: var(--pine); }
.contact-list dd { color: var(--muted); }
.contact-list dd a { color: var(--ink); text-decoration-color: var(--line); text-decoration-thickness: 1px; text-underline-offset: .3em; }
.contact-list dd a:hover { text-decoration-color: var(--pine); }
.address-card .actions { gap: .75rem 1rem; margin-top: auto; padding-top: 2.25rem; }
.map-frame {
  position: relative;
  overflow: hidden;
  min-height: 520px;
  border: 1px solid var(--line);
  border-radius: var(--radius-lg);
  background: var(--sand);
}
.map-frame iframe { position: relative; z-index: 1; display: block; width: 100%; height: 100%; min-height: 520px; border: 0; }
.map-fallback {
  position: absolute;
  inset: 0;
  display: grid;
  place-content: center;
  justify-items: center;
  gap: .75rem;
  padding: 2rem;
  color: var(--muted);
  text-align: center;
}
.map-fallback svg { width: 32px; height: 32px; color: var(--pine); }

/* ---------- FAQ ----------
   Title (top) and contact card (bottom) frame the accordion on desktop; rows stay light,
   the open row turns into a soft ivory panel. */
.faq-grid {
  display: grid;
  grid-template-columns: minmax(0, 5fr) minmax(0, 7fr);
  grid-template-areas: "intro list" "help list";
  grid-template-rows: auto 1fr;
  column-gap: clamp(40px, 6vw, 112px);
  row-gap: 2.5rem;
}
.faq-intro { grid-area: intro; }
.faq-intro .section-intro { margin-top: 1.6rem; }
.faq-list { grid-area: list; align-self: start; border-top: 1px solid var(--line-strong); }
.help-card {
  grid-area: help;
  align-self: end;
  display: grid;
  grid-template-columns: 52px 1fr;
  column-gap: 1.1rem;
  row-gap: 1.4rem;
  max-width: 30rem;
  padding: 1.75rem 1.75rem 1.9rem;
  border: 1px solid var(--line);
  border-radius: var(--radius);
  background: var(--white);
}
.help-icon {
  display: grid;
  place-items: center;
  width: 52px;
  height: 52px;
  border-radius: 50%;
  background: var(--sage);
  color: var(--forest-ink);
}
.help-icon svg { width: 24px; height: 24px; }
.help-card h3 {
  font-family: var(--serif);
  font-size: 1.6rem;
  font-weight: 500;
  font-variation-settings: var(--text-axes);
  line-height: 1.15;
}
.help-card p { margin-top: .45rem; color: var(--graphite); font-size: 1rem; }
.help-card .btn { grid-column: 1 / -1; justify-self: start; }

.faq-list details {
  position: relative;
  border: 1px solid transparent;
  border-bottom-color: var(--line-strong);
  border-radius: 0;
  transition: background-color .25s ease, border-color .25s ease, border-radius .25s ease;
}
.faq-list details[open] {
  margin-block: .5rem;
  border-color: var(--line);
  border-radius: var(--radius);
  background: var(--white);
}
.faq-list details:first-child[open] { margin-top: 0; border-top-left-radius: 0; border-top-right-radius: 0; border-top-color: transparent; }
.faq-list details:has(+ details[open]) { border-bottom-color: transparent; }
.faq-list summary {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 1.5rem;
  padding: 1.6rem 1.5rem;
  border-radius: inherit;
  cursor: pointer;
  list-style: none;
  color: var(--ink);
  font-family: var(--serif);
  font-size: clamp(1.2rem, 1rem + .55vw, 1.5rem);
  font-weight: 500;
  font-variation-settings: var(--text-axes);
  line-height: 1.3;
  transition: color .2s ease;
}
.faq-list summary::-webkit-details-marker { display: none; }
.faq-list summary:hover,
.faq-list details[open] summary { color: var(--forest-ink); }
.faq-list summary:focus-visible { outline-offset: -2px; border-radius: var(--radius); }
.faq-icon {
  display: grid;
  flex: none;
  place-items: center;
  width: 44px;
  height: 44px;
  border: 1px solid var(--line-strong);
  border-radius: 50%;
  color: var(--pine);
  transition: background-color .2s ease, border-color .2s ease, color .2s ease;
}
.faq-icon svg { width: 20px; height: 20px; stroke-width: 1.7; transition: transform .3s ease; }
.faq-list summary:hover .faq-icon { border-color: var(--pine); }
.faq-list details[open] .faq-icon { border-color: var(--pine); background: var(--pine); color: var(--white); }
.faq-list details[open] .faq-icon svg { transform: rotate(45deg); }
.faq-answer p { max-width: 58ch; padding: 0 5rem 1.75rem 1.5rem; color: var(--graphite); }
@supports selector(::details-content) {
  .faq-list details::details-content {
    block-size: 0;
    overflow: clip;
    transition: block-size .35s ease, content-visibility .35s allow-discrete;
  }
  .faq-list details[open]::details-content { block-size: auto; }
}

/* ---------- CTA final ----------
   Approved light composition (reference 2000x750): copy straight on the cream background on the left,
   the real portrait (mask under the chin) in a rounded vertical frame on the right. Only the photo
   has a frame; the section itself stays a plain full-width band. */
.final-cta {
  --cta-ink: #1f3a2f;
  --cta-gold: #8e6b44;
  --cta-gold-soft: #94734d;
  --cta-gold-text: #84623b;
  position: relative;
  isolation: isolate;
  overflow: clip;
  background: var(--surface-page);
  padding-block: var(--section-pad);
}
.final-curves { position: absolute; inset: 0; z-index: -1; width: 100%; height: 100%; fill: none; stroke: rgba(176, 134, 82, .28); stroke-width: 1; pointer-events: none; }
.final-curves path { vector-effect: non-scaling-stroke; }
.final-grid {
  display: grid;
  grid-template-columns: minmax(0, 1.03fr) minmax(0, 1fr);
  gap: clamp(32px, 5vw, 98px);
  align-items: center;
  width: min(100% - 2 * var(--gutter), 78vw, 1560px);
  margin-inline: auto;
}
.final-kicker {
  display: flex;
  align-items: center;
  gap: 1em;
  color: var(--cta-gold-text);
  font-size: clamp(.75rem, 2.3cqi, 1.05rem);
  font-weight: 600;
  letter-spacing: .2em;
  line-height: 1.3;
  text-transform: uppercase;
}
.final-kicker::after { content: ""; width: 5.5em; height: 1px; background: currentColor; opacity: .6; }
.final-title {
  margin-top: 1.4rem;
  color: var(--cta-ink);
  font-family: var(--serif);
  font-size: min(5.25rem, 10.9cqi);
  font-weight: 400;
  font-variation-settings: "opsz" 11;
  line-height: 1.05;
  letter-spacing: -.012em;
}
.final-copy { container-type: inline-size; }
.final-title em { color: var(--cta-gold); font-style: italic; }
.final-lead { max-width: 88%; margin-top: 1.6em; color: #3c443d; font-size: clamp(1.0625rem, 3.4cqi, 1.6rem); line-height: 1.45; }
.final-lead strong { color: var(--cta-gold-text); font-weight: 600; }
.btn-gold {
  min-height: clamp(58px, 11.3cqi, 84px);
  margin-top: clamp(1.75rem, 5cqi, 2.5rem);
  padding-inline: clamp(1.5rem, 6cqi, 2.8rem) clamp(1.4rem, 5.5cqi, 2.6rem);
  gap: clamp(1rem, 3.4cqi, 1.6rem);
  background: var(--cta-gold);
  color: var(--white);
  font-size: clamp(.8125rem, 2.5cqi, 1.15rem);
  letter-spacing: .1em;
}
.btn-gold:hover { background: #7a5b39; }
.btn-gold svg { width: 1.6em; height: 1.6em; }
.final-points {
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  width: 96%;
  margin-top: clamp(1.75rem, 5cqi, 2.6rem);
  color: #414a43;
  font-size: clamp(.8125rem, 2.6cqi, 1.2rem);
  line-height: 1.35;
  text-align: center;
}
.final-points li { display: grid; justify-items: center; gap: .75rem; padding-inline: .5rem; }
.final-points li + li { border-left: 1px solid rgba(176, 134, 82, .28); }
.final-badge {
  display: grid;
  place-items: center;
  width: clamp(52px, 12cqi, 88px);
  aspect-ratio: 1;
  border-radius: 50%;
  background: #fbf4ec;
  color: var(--cta-gold-soft);
}
.final-badge svg { width: 48%; height: 48%; stroke-width: 1.4; }
.final-photo { margin: 0; }
.final-photo img {
  width: 100%;
  aspect-ratio: 570 / 620;
  object-fit: cover;
  /* Portrait in the clinic (1086x1448, taller than the frame): head with a little wall above,
     hands and the coat below the belt in view */
  object-position: 50% 62%;
  border-radius: clamp(18px, 2vw, 28px);
}
.final-cta :focus-visible { outline-color: var(--cta-ink); }

/* ---------- WhatsApp flutuante (celular) ---------- */
.float-cta { display: none; }

/* ---------- Rodapé ---------- */
.site-footer { padding-block: 0 1.75rem; color: var(--graphite); font-size: .875rem; }
/* Same surface as the final CTA: a hairline marks where the institutional footer begins */
.footer-grid {
  padding-top: clamp(32px, 3.4vw, 48px);
  border-top: 1px solid var(--line);
  display: grid;
  grid-template-columns: minmax(0, 1.4fr) minmax(0, 1fr) minmax(0, 1fr);
  gap: 2rem clamp(32px, 5vw, 96px);
  align-items: start;
}
.footer-role { margin-top: .9rem; color: var(--graphite); }
.footer-label {
  margin-bottom: .55rem;
  color: var(--forest-ink);
  font-size: .6875rem;
  font-weight: 700;
  letter-spacing: .16em;
  text-transform: uppercase;
}
.footer-col { display: grid; justify-items: start; gap: .3rem; line-height: 1.55; }
.footer-col a, .footer-nav a { color: var(--graphite); text-decoration: none; transition: color .2s ease; }
.footer-col a { display: inline-block; }
.footer-col .footer-icon-link { display: inline-flex; align-items: center; gap: .5rem; }
.footer-col a svg { width: 18px; height: 18px; color: var(--pine); }
.footer-col a:hover, .footer-nav a:hover { color: var(--pine); text-decoration: underline; text-underline-offset: .25em; }
.footer-base {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  justify-content: space-between;
  gap: .75rem 2rem;
  margin-top: 2rem;
  padding-top: 1.25rem;
  border-top: 1px solid var(--line);
  font-size: .8125rem;
}
.footer-nav { display: flex; flex-wrap: wrap; gap: .4rem 1.6rem; }

/* ---------- Round 4: section rhythm ----------
   Desktop sections aim at one useful screen (viewport minus the fixed header): padding follows the
   viewport height, photos never get taller than the space left, and nothing is hidden or clipped. */
.treatments .section-intro .btn { margin-top: 1.4rem; }
.treatments-note { margin-top: 1.1rem; }
.location-copy .section-intro { margin-top: 1.4rem; }
@media (min-width: 1200px) {
  :root {
    --section-pad: clamp(52px, 7.5vh, 104px);
    --fit-h: calc(100vh - var(--header-h) - 2 * var(--section-pad));
  }
  @supports (height: 1svh) {
    :root { --section-pad: clamp(52px, 7.5svh, 104px); --fit-h: calc(100svh - var(--header-h) - 2 * var(--section-pad)); }
  }
  .eyebrow { margin-bottom: 1.1rem; }

  /* Sobre: the portrait keeps 4:5 and fits the screen height */
  .about-grid { grid-template-columns: max-content minmax(0, 5.4fr) minmax(0, 2.4fr); }
  .about-photo { width: min(34vw, 450px, (var(--fit-h) - 70px) * .8); }
  .about-lead { margin-block: 1.2rem .9rem; }
  .about-copy .actions { margin-top: 1.75rem; }
  .about-values { gap: 1.6rem; }

  /* Tratamentos */
  .treatment-list { margin-top: clamp(36px, 3.4vw, 56px); }
  .treatment { padding-block: 2rem 1.5rem; }
  .icon-badge-lg { width: 60px; height: 60px; }
  .icon-badge-lg svg { width: 30px; height: 30px; }
  .treatment h3 { margin-block: 1.3rem .6rem; }

  /* Ambientes: square frames on desktop, focal points kept on the furniture */
  .gallery { margin-top: clamp(32px, 2.8vw, 48px); }
  .gallery figcaption { margin-top: .7rem; padding-top: .6rem; }
  .frame { aspect-ratio: 1 / 1; }
  .gallery figure:nth-child(1) .frame img { object-position: 50% 72%; }
  .gallery figure:nth-child(2) .frame img { object-position: 50% 78%; }
  .frame-detail img { top: -52%; left: -34%; width: 152%; }

  /* Localização: copy and contact data beside the map */
  .location-grid { grid-template-columns: minmax(0, 5.6fr) minmax(0, 6.4fr); gap: clamp(36px, 4.5vw, 80px); margin-top: 0; align-items: stretch; }
  .location .address-card { margin-top: 2rem; padding: 1.75rem 0 0; border: 0; border-top: 1px solid var(--line-strong); border-radius: 0; background: none; }
  .location .contact-list { margin-top: 1.25rem; padding-top: 1.1rem; gap: .55rem; }
  .map-frame, .map-frame iframe { min-height: min(500px, var(--fit-h) - 80px); }

  /* FAQ */
  .faq-list summary { padding-block: 1.15rem; }
  .faq-answer p { padding-bottom: 1.35rem; }
  .faq-list details[open] { margin-block: .35rem; }
  .help-card { padding: 1.5rem 1.6rem 1.6rem; row-gap: 1.1rem; }

  /* CTA final: the portrait never gets taller than the screen allows */
  .final-photo { width: min(100%, var(--fit-h) * .919); justify-self: end; }
}

/* Round 5: Sobre and Localização more compact on desktop (same content, type and order).
   The text uses the width it already had available, so paragraphs need fewer lines, and the
   spacing tightens on shorter screens. */
@media (min-width: 1200px) {
  .about-grid { grid-template-columns: max-content minmax(0, 6fr) minmax(0, 2.3fr); }
  .about-copy > p:not(.eyebrow):not(.about-lead) { max-width: 60ch; }
  .location-copy .section-intro { max-width: 56ch; }
  .location .address-card { margin-top: 1.6rem; padding-top: 1.4rem; }
  .location .contact-list { margin-top: 1rem; padding-top: .9rem; }
}
@media (min-width: 1200px) and (max-height: 800px) {
  .eyebrow { margin-bottom: .8rem; }
  .about-lead { margin-block: .9rem .7rem; }
  .about-copy > p + p:not(.about-lead) { margin-top: .7rem; }
  .about-copy .actions { margin-top: 1.3rem; }
  .about-values { gap: 1.2rem; }
  .about-photo figcaption { margin-top: .6rem; padding-top: .55rem; }
  .location-copy .section-intro { margin-top: 1rem; }
  .location .address-card { margin-top: 1.2rem; padding-top: 1.1rem; }
  .location .contact-list { margin-top: .8rem; padding-top: .75rem; gap: .4rem; }
  .location-map { gap: 1rem; }
}

/* Very short desktop windows (browser viewport up to 700px tall, e.g. a 1366x768 laptop):
   same content and type, tighter vertical spacing only. */
@media (min-width: 1200px) and (max-height: 700px) {
  html:root { --section-pad: 40px; }
  .eyebrow { margin-bottom: .7rem; }
  .treatment { padding-block: 1.5rem 1rem; }
  .treatment h3 { margin-block: 1rem .5rem; }
  .faq-list summary { padding-block: .9rem; }
  .faq-answer p { padding-bottom: 1.1rem; }
  .faq-intro .section-intro { margin-top: 1rem; }
}

/* Short desktop screens (e.g. 1366x768 laptops, about 615-650px visible in the browser):
   gallery frames go 5:4 (windows chosen per photo so furniture, chair and TV stay whole) and the
   section padding floor drops a little. Titles and text sizes are unchanged. */
@media (min-width: 1200px) and (max-height: 800px) {
  :root { --section-pad: clamp(44px, 7.5vh, 104px); }
  @supports (height: 1svh) {
    :root { --section-pad: clamp(44px, 7.5svh, 104px); }
  }
  .frame { aspect-ratio: 5 / 4; }
  .frame-detail img { top: -42.8%; left: -1.8%; width: 103.8%; }
  .treatment-list { margin-top: 32px; }
  .gallery { margin-top: 28px; }
}

/* ---------- Load moment (hero only) ---------- */
@media (prefers-reduced-motion: no-preference) {
  .hero-word { animation: word-in 1.1s cubic-bezier(.2, .7, .2, 1) .1s both; }
  @keyframes word-in { from { opacity: 0; } }
}
@media (prefers-reduced-motion: reduce) {
  html { scroll-behavior: auto; }
  *, *::before, *::after { transition-duration: 0s !important; animation: none !important; }
}

/* ---------- Up to 1199px: compact header ---------- */
@media (max-width: 1199px) {
  .header-bar { grid-template-columns: 1fr auto auto; }
  .menu-toggle {
    display: inline-flex;
    align-items: center;
    gap: .7rem;
    min-height: 48px;
    padding: 0 1.1rem;
    border: 1px solid var(--line-strong);
    border-radius: 999px;
    background: transparent;
    font-size: .75rem;
    font-weight: 700;
    letter-spacing: .16em;
    text-transform: uppercase;
    cursor: pointer;
  }
  .menu-toggle-icon,
  .menu-toggle-icon::before {
    display: block;
    width: 18px;
    height: 1.5px;
    background: currentColor;
    transition: transform .25s ease;
  }
  .menu-toggle-icon { position: relative; transform: translateY(-3px); }
  .menu-toggle-icon::before { content: ""; position: absolute; top: 6px; }
  .menu-toggle[aria-expanded="true"] .menu-toggle-icon { transform: translateY(0) rotate(45deg); }
  .menu-toggle[aria-expanded="true"] .menu-toggle-icon::before { transform: translateY(-6px) rotate(-90deg); }
  .header-cta { order: 2; }
  .menu-toggle { order: 3; }
  .site-nav {
    position: absolute;
    top: 100%;
    left: 0;
    right: 0;
    height: calc(100dvh - var(--header-h));
    overflow-y: auto;
    overscroll-behavior: contain;
    padding: .5rem var(--gutter) 2.5rem;
    border-top: 1px solid var(--line);
    background: var(--paper);
  }
  .js .site-nav { display: none; }
  .js .site-nav[data-open="true"] { display: block; }
  .site-nav ul { flex-direction: column; gap: 0; }
  .site-nav a:not(.btn) { padding-block: 1.05rem; border-bottom: 1px solid var(--line); font-size: .875rem; }
  .site-nav a:not(.btn)::after { display: none; }
  .site-nav a[aria-current="true"] { color: var(--pine); }
  .nav-cta { display: flex; width: 100%; margin-top: 1.5rem; }
  html:not(.js) .site-nav { position: static; grid-column: 1 / -1; height: auto; padding: 0 0 1rem; border: 0; }
  html:not(.js) .site-nav ul { flex-flow: row wrap; gap: 0 1.5rem; }
  html:not(.js) .site-nav a:not(.btn) { border: 0; }
  html:not(.js) .nav-cta, html:not(.js) .menu-toggle { display: none; }

  .about-grid { grid-template-columns: repeat(2, minmax(0, 1fr)); row-gap: 3.5rem; }
  .about-values {
    grid-column: 1 / -1;
    grid-template-columns: repeat(2, minmax(0, 1fr));
    gap: 2rem 2.5rem;
    padding: 2.5rem 0 0;
    border-top: 1px solid var(--line-strong);
  }

  .treatment-list { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .treatment { padding: 2.5rem 2rem 2.5rem 0; }
  .treatment + .treatment { border-left: 0; }
  .treatment:nth-child(even) { padding: 2.5rem 0 2.5rem 2rem; border-left: 1px solid var(--line-strong); }
  .treatment:nth-child(n + 3) { border-top: 1px solid var(--line-strong); }

}

/* ---------- 900–1199px: narrower FAQ column ---------- */
@media (min-width: 900px) and (max-width: 1199px) {
  .help-card { grid-template-columns: minmax(0, 1fr); }
}

/* ---------- Up to 899px: location and FAQ in one column ---------- */
@media (max-width: 899px) {
  .location-grid { grid-template-columns: minmax(0, 1fr); }
  .location .address-card { margin-top: 2rem; }
  .faq-grid { grid-template-columns: minmax(0, 1fr); grid-template-areas: "intro" "list" "help"; grid-template-rows: auto; }
  .help-card { align-self: start; max-width: none; }
  .map-frame, .map-frame iframe { min-height: 440px; }
}

/* ---------- Up to 760px: phones ---------- */
@media (max-width: 760px) {
  :root { --header-h: 68px; --title-leading: 1.04; }
  body { font-size: 1rem; }
  .btn { gap: .6rem; padding-inline: 1.25rem; letter-spacing: .08em; white-space: normal; text-align: center; }
  .brand-mark { width: 30px; height: 30px; }
  .brand-name { font-size: 1.2rem; }
  .brand-sub { font-size: .5625rem; }
  .header-cta { display: none; }
  .header-bar { grid-template-columns: 1fr auto; }

  .section-head { grid-template-columns: minmax(0, 1fr); }
  .section-head .section-intro { padding-bottom: 0; }

  .about-grid { grid-template-columns: minmax(0, 1fr); row-gap: 2.75rem; }
  .about-values { gap: 1.75rem 1.25rem; }
  .about-values li { grid-template-columns: 1fr; align-content: start; gap: .6rem; }

  .treatment-list { grid-template-columns: minmax(0, 1fr); margin-top: 2.75rem; }
  .treatment,
  .treatment:nth-child(even) {
    display: grid;
    grid-template-columns: 64px 1fr;
    column-gap: 1.25rem;
    padding: 2rem 0;
    border-left: 0;
    border-top: 0;
  }
  .treatment + .treatment { border-top: 1px solid var(--line-strong); }
  .treatment .icon-badge-lg { grid-row: span 2; width: 64px; height: 64px; }
  .treatment h3 { min-height: 0; margin: .2rem 0 .5rem; }
  .section-foot .btn { width: 100%; }

  .gallery { grid-template-columns: minmax(0, 1fr); gap: 2rem; }

  .address-card { padding: 1.75rem 1.4rem; }
  .address-street { font-size: clamp(1.15rem, 5.4vw, 1.4rem); }
  .address-sep { display: none; }
  .address-city .nowrap { display: block; }
  .contact-list > div { grid-template-columns: 1fr; gap: .35rem; }
  .actions .btn { flex: 1 1 100%; }
  .map-frame, .map-frame iframe { min-height: 360px; }

  .faq-list summary { gap: 1rem; padding: 1.3rem 1rem; }
  .faq-icon { width: 40px; height: 40px; }
  .faq-answer p { padding: 0 1rem 1.4rem; }
  .help-card { grid-template-columns: 44px 1fr; padding: 1.5rem 1.25rem; }
  .help-icon { width: 44px; height: 44px; }
  .help-card .btn { width: 100%; }

  .final-grid { grid-template-columns: minmax(0, 1fr); gap: 2.5rem; }
  .final-title { font-size: clamp(2.2rem, 10.5cqi, 3rem); }
  .final-lead { font-size: 1.0625rem; }
  .btn-gold { width: 100%; }
  .final-points { width: 100%; }
  .final-photo { width: min(100%, 420px); margin-inline: auto; }

  .float-cta {
    position: fixed;
    right: 16px;
    bottom: calc(16px + env(safe-area-inset-bottom));
    z-index: 40;
    display: inline-flex;
    align-items: center;
    gap: .55rem;
    min-height: 52px;
    padding: 0 1.2rem;
    border-radius: 999px;
    background: var(--pine);
    color: var(--white);
    box-shadow: 0 10px 28px -10px rgba(16, 40, 29, .55);
    font-size: .75rem;
    font-weight: 700;
    letter-spacing: .1em;
    text-decoration: none;
    text-transform: uppercase;
    transition: opacity .25s ease, transform .25s ease, visibility .25s;
  }
  .float-cta svg { width: 20px; height: 20px; }
  .float-cta[data-visible="false"] { opacity: 0; transform: translateY(12px); visibility: hidden; pointer-events: none; }

  .footer-grid { grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 1.5rem 1.25rem; }
  .footer-id { grid-column: 1 / -1; }
  .footer-base { flex-direction: column-reverse; align-items: flex-start; margin-top: 1.5rem; }
}

/* ---------- Up to 380px: small phones ---------- */
@media (max-width: 380px) {
  .brand { gap: .6rem; }
  .brand-name { font-size: 1.05rem; letter-spacing: .05em; }
  .brand-sub { letter-spacing: .36em; }
  .menu-toggle { padding: 0 .9rem; }
  .menu-toggle-label { position: absolute; width: 1px; height: 1px; overflow: hidden; clip: rect(0 0 0 0); white-space: nowrap; }
  .btn-arrow { display: none; }
}

/* ---------- Up to 359px ---------- */
@media (max-width: 359px) {
  .about-values { grid-template-columns: minmax(0, 1fr); }
  .about-values li { grid-template-columns: 32px 1fr; gap: 1rem; }
  .footer-grid { grid-template-columns: minmax(0, 1fr); }
}