/* World Dentistry — split stage. Culorile vin din recepție: marmură, bronz închis, alamă. */

@font-face { font-family: 'Literata'; font-style: normal; font-weight: 300 700; font-display: swap; src: url(/fonts/literata-latin-ext.woff2) format('woff2'); unicode-range: U+0100-02BA, U+02BD-02C5, U+02C7-02CC, U+02CE-02D7, U+02DD-02FF, U+0304, U+0308, U+0329, U+1D00-1DBF, U+1E00-1E9F, U+1EF2-1EFF, U+2020, U+20A0-20AB, U+20AD-20C4, U+2113, U+2C60-2C7F, U+A720-A7FF; }
@font-face { font-family: 'Literata'; font-style: normal; font-weight: 300 700; font-display: swap; src: url(/fonts/literata-latin.woff2) format('woff2'); unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+0304, U+0308, U+0329, U+2000-206F, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD; }

:root {
  --bg: #f3f2ef;          /* marmura */
  --surface: #e6e4df;     /* marmura în umbră */
  --ink: #2a221b;         /* bronz închis */
  --muted: #5b4e42;
  --accent: #b08a50;      /* alama de pe biroul recepției */
  --accent-ink: #2a221b;
  --field-1: #2a221b;
  --field-1-ink: #f3f2ef;
  --field-1-muted: #cfc5b8;

  --font: 'Literata', Georgia, 'Times New Roman', serif;

  --step-small: clamp(0.875rem, 0.85rem + 0.1vw, 0.9375rem);
  --step-body: clamp(1.0625rem, 1rem + 0.3vw, 1.25rem);
  --step-lead: clamp(1.25rem, 1.1rem + 0.6vw, 1.5rem);
  --step-head: clamp(2rem, 1.4rem + 2.2vw, 3.5rem);
  --step-display: clamp(2.6rem, 9vw, 9.5rem);

  --margin: clamp(1rem, 2.4vw, 2.25rem);
  --gutter: clamp(1rem, 2vw, 2rem);
  --section: clamp(6rem, 13vw, 12rem);
  --radius: 0px;
  --inset: 20px;
  --pic: 47vw;            /* lățimea scenei fixe pe desktop */

  --ease-out: cubic-bezier(0.22, 1, 0.36, 1);
  --ease-expo: cubic-bezier(0.16, 1, 0.3, 1);
  --ease-in-out: cubic-bezier(0.76, 0, 0.24, 1);
  --ease-soft: cubic-bezier(0.33, 1, 0.68, 1);
  --t-press: 140ms;
  --t-hover: 180ms;
  --t-ui: 240ms;
}

/* ---------- reset ---------- */
*, *::before, *::after { box-sizing: border-box; }
html { -webkit-text-size-adjust: 100%; text-size-adjust: 100%; }
body { margin: 0; background: var(--bg); color: var(--ink); font-family: var(--font); font-size: var(--step-body); line-height: 1.6; font-optical-sizing: auto; -webkit-font-smoothing: antialiased; text-rendering: optimizeLegibility; }
h1, h2, h3, p, figure, blockquote, ul, ol, dl, dd { margin: 0; }
ul[class], ol[class] { padding: 0; list-style: none; }
.plain { margin: 0; }
img, svg, iframe { display: block; max-width: 100%; }
img { height: auto; background: var(--surface); }
button { font: inherit; color: inherit; background: none; border: 0; padding: 0; cursor: pointer; }
a { color: inherit; }
:target { scroll-margin-top: 2rem; }
::selection { background: var(--accent); color: var(--accent-ink); }
:focus-visible { outline: 2px solid var(--accent); outline-offset: 3px; }
.sr-only { position: absolute; width: 1px; height: 1px; overflow: hidden; clip-path: inset(50%); white-space: nowrap; }
.skip { position: absolute; left: var(--margin); top: -4rem; z-index: 50; background: var(--accent); color: var(--accent-ink); padding: .6rem 1rem; text-decoration: none; }
.skip:focus { top: 1rem; }

/* ---------- type ---------- */
h1, h2, h3 { font-weight: 500; letter-spacing: -0.02em; line-height: 1.05; text-wrap: balance; }
.head { font-size: var(--step-head); }
.lead { font-size: var(--step-lead); line-height: 1.4; }
.small { font-size: var(--step-small); line-height: 1.5; }
.muted { color: var(--muted); }
p { max-width: 62ch; text-wrap: pretty; }
.nums { font-variant-numeric: tabular-nums lining-nums; }

/* ---------- controls ---------- */
.button { display: inline-flex; align-items: center; justify-content: center; gap: .6em; min-height: 3.25rem; padding: 0 1.5rem; background: var(--accent); color: var(--accent-ink); border-radius: var(--radius); text-decoration: none; font-weight: 500; white-space: nowrap; transition: transform var(--t-press) var(--ease-out), background-color var(--t-hover) ease; }
.button:hover { background: #c29c62; }
.button:active { transform: scale(0.97); }
.link { text-decoration: underline; text-underline-offset: 0.2em; text-decoration-thickness: 0.06em; transition: text-decoration-color var(--t-hover) ease, color var(--t-hover) ease; }
@media (hover: hover) and (pointer: fine) { .link:hover { text-decoration-color: var(--accent); } }

/* ---------- header ---------- */
.bar { position: absolute; top: 0; right: 0; left: calc(var(--pic)); z-index: 20; display: flex; justify-content: flex-end; align-items: center; gap: clamp(1rem, 2vw, 2rem); padding: 28px var(--margin) 0; color: var(--field-1-ink); font-size: var(--step-small); }
.bar a { text-decoration: none; }
.bar__links { display: flex; gap: clamp(1rem, 1.8vw, 1.75rem); }
.bar__links a, .bar__lang { padding: .5rem 0; transition: color var(--t-hover) ease; }
.bar__links a:hover, .bar__lang:hover { color: var(--accent); }
.bar__links a[aria-current] { text-decoration: underline; text-underline-offset: .3em; }
.bar .button { min-height: 2.75rem; padding: 0 1.1rem; font-size: var(--step-small); }
.bar__menu { display: none; }
.bar--page { position: relative; left: 0; color: var(--ink); padding-bottom: 28px; justify-content: space-between; }
.bar--page .bar__links a:hover, .bar--page .bar__lang:hover { color: var(--muted); }
.bar__name { font-size: var(--step-lead); letter-spacing: -0.02em; text-decoration: none; margin-right: auto; }

/* ---------- the stage: a photograph that stays while the column scrolls ---------- */
.stage { display: grid; grid-template-columns: var(--pic) 1fr; background: var(--field-1); }
.stage__pic { position: sticky; top: 0; height: 100svh; padding: var(--inset) 0 var(--inset) var(--inset); }
.stage__frame { position: relative; height: 100%; overflow: hidden; margin: 0; }
.stage__frame img { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; opacity: 0; transition: opacity 900ms var(--ease-soft); }
.stage__frame img.is-on { opacity: 1; }
.stage__frame img:first-child { opacity: 1; }
.stage__frame img.is-off { opacity: 0; }
.stage__frame figcaption { position: absolute; left: 16px; bottom: 14px; z-index: 2; color: var(--field-1-ink); font-size: var(--step-small); }
.stage__col { min-width: 0; background: var(--bg); }

/* hero, in the dark half */
.hero { position: relative; min-height: 100svh; background: var(--field-1); color: var(--field-1-ink); display: grid; grid-template-rows: 1fr auto; padding: 0 var(--margin); }
.hero__text { align-self: center; padding-top: 14svh; max-width: 36rem; margin-inline: auto; width: 100%; }
.hero h1 { font-size: var(--step-head); max-width: 20ch; }
.hero__lead { margin-top: 2rem; font-size: var(--step-lead); line-height: 1.4; max-width: 26ch; color: var(--field-1-ink); }
.hero__actions { margin-top: 2.25rem; display: flex; flex-wrap: wrap; align-items: center; gap: 1rem 1.5rem; }
.hero__actions .link { color: var(--field-1-ink); }
.live { margin-top: 2.5rem; max-width: 36ch; display: grid; grid-template-columns: auto 1fr; column-gap: .8rem; align-items: baseline; font-size: var(--step-body); line-height: 1.45; color: var(--field-1-ink); font-variant-numeric: tabular-nums; }
.live::before { content: ''; width: .62em; height: .62em; border-radius: 50%; background: var(--field-1-muted); transform: translateY(-.05em); }
.live[data-state="open"]::before { background: var(--accent); outline: .28em solid rgba(176, 138, 80, .3); }
.live[data-state="closed"]::before { background: transparent; outline: 2px solid var(--field-1-muted); outline-offset: -2px; }
.live--page { max-width: none; font-size: var(--step-body); color: var(--ink); }

/* the name crosses from the column onto the photograph; each ground gets its own ink */
.stage__col { position: relative; z-index: 2; }
.mark-wrap { --over: 10vw; position: relative; margin: 0 calc(-1 * var(--margin)) 40px calc(-1 * (var(--margin) + var(--over))); }
.mark { position: relative; max-width: none; display: flex; justify-content: flex-end; align-items: flex-end; height: 1.12em; padding-right: var(--margin); font-size: var(--step-display); line-height: 1; letter-spacing: -0.04em; font-weight: 400; white-space: nowrap; color: var(--field-1-ink); user-select: none; transform-origin: 60% 100%; }
.mark::after { content: attr(data-text); position: absolute; inset: 0; display: flex; justify-content: flex-end; align-items: flex-end; padding-right: var(--margin); color: var(--ink); clip-path: inset(-30% calc(100% - var(--over)) -30% -5%); }

/* sections in the reading column */
.col { padding: var(--section) var(--margin) 0; max-width: calc(46ch + 2 * var(--margin)); margin-inline: auto; }
.col:last-child { padding-bottom: var(--section); }
.col h2 { font-size: var(--step-head); max-width: 16ch; }
.col__lead { margin-top: 1.25rem; font-size: var(--step-lead); line-height: 1.4; font-weight: 500; }

.intro__body { margin-top: 1.5rem; }
.intro__body p + p { margin-top: 1em; }
.intro__body .link { display: inline-block; margin-top: 1.5rem; font-weight: 500; }

.triage__group { margin-top: 2.5rem; }
.triage__group h3 { font-size: var(--step-body); font-weight: 400; color: var(--muted); letter-spacing: 0; }
.triage__list { margin-top: .5rem; }
.triage__row a { display: grid; grid-template-columns: 1fr auto; gap: .2rem 1.25rem; align-items: baseline; padding: .7rem 0; text-decoration: none; transition: transform var(--t-hover) var(--ease-out); }
.triage__row a:hover { transform: translateX(6px); }
.triage__row a:hover .triage__name { text-decoration: underline; text-underline-offset: .2em; text-decoration-thickness: .06em; }
.triage__name { font-weight: 500; }
.triage__name::before { content: ''; display: inline-block; width: .55em; height: .55em; border-radius: 50%; margin-right: .6em; background: var(--muted); vertical-align: .08em; }
.triage__row[data-v="acum"] .triage__name::before { background: var(--accent); }
.triage__row[data-v="programare"] .triage__name::before { background: transparent; outline: 2px solid var(--muted); outline-offset: -2px; }
.triage__short { grid-column: 1; font-size: var(--step-small); color: var(--muted); }
.triage__verdict { grid-row: 1; grid-column: 2; font-size: var(--step-small); color: var(--muted); font-variant-numeric: tabular-nums; }
.triage__row[data-v="acum"] .triage__verdict { color: var(--ink); font-weight: 600; }
.triage__112 { margin-top: 3rem; padding: 1.5rem; background: var(--surface); font-size: var(--step-body); }
.triage__112 strong { font-weight: 600; }
.triage__all { display: inline-block; margin-top: 1.5rem; font-weight: 500; }

/* ---------- pricing: a menu, full width ---------- */
.menu { background: var(--surface); padding: var(--section) var(--margin); display: grid; grid-template-columns: repeat(12, minmax(0, 1fr)); column-gap: var(--gutter); }
.menu__head { grid-column: 1 / span 4; }
.menu__head h2 { font-size: var(--step-head); }
.menu__head p { margin-top: 1.25rem; max-width: 30ch; }
.menu__pic { margin-top: 2.5rem; width: 75%; aspect-ratio: 4 / 5; overflow: hidden; }
.menu__pic img { width: 100%; height: 100%; object-fit: cover; }
.menu__body { grid-column: 6 / span 7; }
.menu__group { font-size: var(--step-lead); font-weight: 500; letter-spacing: -0.01em; }
.menu__group span { font-weight: 400; color: var(--muted); font-size: var(--step-body); margin-left: .5em; }
.menu__list { margin-top: 1.5rem; display: grid; grid-template-columns: 1fr 1fr; gap: 1.75rem 4rem; }
.menu__item { display: grid; grid-template-columns: 1fr auto; column-gap: 1rem; align-items: baseline; }
.menu__name { font-size: var(--step-lead); line-height: 1.3; }
.menu__price { font-size: var(--step-lead); font-variant-numeric: tabular-nums lining-nums; white-space: nowrap; }
.menu__price small { font-size: var(--step-small); color: var(--muted); margin-right: .35em; }
.menu__desc { grid-column: 1 / -1; margin-top: .35rem; font-size: var(--step-small); color: var(--muted); max-width: 36ch; }
.menu__note { margin-top: 3rem; max-width: 52ch; padding-top: 0; }
.menu__note + .link { display: inline-block; margin-top: 1.25rem; font-weight: 500; }

/* ---------- steps: the slip ---------- */
.slipband { background: var(--field-1); color: var(--field-1-ink); padding: var(--section) var(--margin); display: grid; grid-template-columns: repeat(12, minmax(0, 1fr)); column-gap: var(--gutter); align-items: start; }
.slipband__head { grid-column: 1 / span 5; }
.slipband__head h2 { font-size: var(--step-head); max-width: 14ch; }
.slipband__head p { margin-top: 1.25rem; max-width: 30ch; color: var(--field-1-muted); }
.slipband__pic { margin-top: 2.5rem; width: 70%; aspect-ratio: 4 / 5; overflow: hidden; }
.slipband__pic img { width: 100%; height: 100%; object-fit: cover; background: #1d1712; }
.slip { grid-column: 7 / span 5; background: var(--bg); color: var(--ink); padding: 2.25rem 2rem 3.25rem; font-size: 1rem; clip-path: polygon(0 0, 100% 0, 100% calc(100% - 12px), 97.5% 100%, 95% calc(100% - 12px), 92.5% 100%, 90% calc(100% - 12px), 87.5% 100%, 85% calc(100% - 12px), 82.5% 100%, 80% calc(100% - 12px), 77.5% 100%, 75% calc(100% - 12px), 72.5% 100%, 70% calc(100% - 12px), 67.5% 100%, 65% calc(100% - 12px), 62.5% 100%, 60% calc(100% - 12px), 57.5% 100%, 55% calc(100% - 12px), 52.5% 100%, 50% calc(100% - 12px), 47.5% 100%, 45% calc(100% - 12px), 42.5% 100%, 40% calc(100% - 12px), 37.5% 100%, 35% calc(100% - 12px), 32.5% 100%, 30% calc(100% - 12px), 27.5% 100%, 25% calc(100% - 12px), 22.5% 100%, 20% calc(100% - 12px), 17.5% 100%, 15% calc(100% - 12px), 12.5% 100%, 10% calc(100% - 12px), 7.5% 100%, 5% calc(100% - 12px), 2.5% 100%, 0 calc(100% - 12px)); }
.slip__title { font-size: var(--step-small); color: var(--muted); }
.slip h3 { font-size: 1rem; font-weight: 600; letter-spacing: 0; margin-top: 1.75rem; }
.slip ol { margin-top: .5rem; }
.slip li { display: flex; align-items: baseline; gap: .5rem; padding: .35rem 0; font-variant-numeric: tabular-nums; }
.slip li span:first-child { flex: 0 1 auto; }
.slip li i { flex: 1 1 1.5rem; min-width: 1.5rem; height: 4px; align-self: center; margin-top: .35em; background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='7' height='4'%3E%3Ccircle cx='2' cy='2' r='1.4' fill='%235b4e42'/%3E%3C/svg%3E"); background-size: 7px 4px; background-repeat: repeat-x; }
.slip li span:last-child { flex: 0 0 auto; color: var(--muted); text-align: right; }
.slip__result { margin: 1.75rem -2rem 0; padding: 0 2rem; min-height: 44px; display: flex; align-items: center; justify-content: space-between; gap: 1rem; background: var(--ink); color: var(--bg); font-weight: 500; }
.slip__result span:last-child { font-weight: 400; }

/* ---------- testimonial: one letter ---------- */
.letter { padding: var(--section) var(--margin); display: grid; grid-template-columns: repeat(12, minmax(0, 1fr)); column-gap: var(--gutter); }
.letter__side { grid-column: 1 / span 3; }
.letter__side h2 { font-size: var(--step-head); }
.letter__score { margin-top: 1.5rem; font-size: var(--step-head); font-weight: 500; letter-spacing: -0.02em; line-height: 1; font-variant-numeric: lining-nums; }
.letter__score + p { margin-top: .5rem; max-width: 22ch; }
.letter__body { grid-column: 5 / span 5; max-width: 38ch; }
.letter__open { font-size: var(--step-lead); line-height: 1.35; font-weight: 500; }
.letter__body p + p { margin-top: 1.1rem; }
.letter__sign { margin-top: 2.5rem; font-size: 1rem; }
.letter__sign a { display: inline-block; margin-top: .25rem; }
.letter__source { margin-top: 2rem; font-size: var(--step-small); color: var(--muted); }
.letter__more { grid-column: 11 / span 2; align-self: end; }

/* ---------- faq beside a tall photograph ---------- */
.faq { background: var(--surface); display: grid; grid-template-columns: repeat(12, minmax(0, 1fr)); column-gap: var(--gutter); padding: 0 var(--margin) 0; }
.faq__text { grid-column: 1 / span 5; padding-block: var(--section); }
.faq__text h2 { font-size: var(--step-head); }
.faq__facts { margin-top: 2rem; display: grid; gap: .6rem; }
.faq__facts div { display: grid; grid-template-columns: 6.5rem 1fr; gap: 1rem; }
.faq__facts dt { color: var(--muted); }
.faq__list { margin-top: 2.5rem; }
.faq__list details { padding: .9rem 0; }
.faq__list details + details { margin-top: .4rem; }
.faq__list summary { display: flex; justify-content: space-between; align-items: center; gap: 1rem; min-height: 44px; cursor: pointer; list-style: none; font-size: var(--step-lead); line-height: 1.3; font-weight: 500; }
.faq__list summary::-webkit-details-marker { display: none; }
.faq__list summary::after { content: ''; flex: 0 0 10px; width: 10px; height: 10px; border-right: 2px solid currentColor; border-bottom: 2px solid currentColor; transform: translateY(-3px) rotate(45deg); transition: transform var(--t-ui) var(--ease-out); }
.faq__list details[open] summary::after { transform: translateY(2px) rotate(-135deg); }
.faq__list details p { margin-top: .75rem; color: var(--ink); }
.faq__text .button { margin-top: 2.5rem; }
.faq__text .button + .link { margin-left: 1.5rem; }
.faq__pics { grid-column: 7 / span 6; position: relative; margin-right: calc(-1 * var(--margin)); padding-bottom: 80px; }
.faq__tall { aspect-ratio: 3 / 4; overflow: hidden; }
.faq__tall img, .faq__square img { width: 100%; height: 100%; object-fit: cover; }
.faq__square { position: absolute; left: -40px; bottom: 40px; width: 34%; aspect-ratio: 1; overflow: hidden; border: 10px solid var(--surface); }

/* ---------- contact ---------- */
.contact { padding: var(--section) var(--margin) calc(var(--section) * .6); display: grid; grid-template-columns: repeat(12, minmax(0, 1fr)); column-gap: var(--gutter); row-gap: 3rem; align-items: start; }
.contact__lead { grid-column: 1 / span 5; }
.contact__lead h2 { font-size: var(--step-head); }
.contact__lead p { margin-top: 1.5rem; font-size: clamp(1.25rem, 1.05rem + .8vw, 1.75rem); line-height: 1.3; letter-spacing: -0.01em; max-width: 34ch; }
.contact__pic { grid-column: 7 / span 2; aspect-ratio: 1; overflow: hidden; }
.contact__pic img { width: 100%; height: 100%; object-fit: cover; }
.contact__links { grid-column: 9 / span 4; }
.contact__links h3 { font-size: var(--step-body); font-weight: 500; letter-spacing: 0; }
.contact__links ul { margin-top: 1rem; display: grid; gap: .6rem; }
.contact__phone { font-size: var(--step-lead); font-variant-numeric: tabular-nums lining-nums; }
.contact__links .small { margin-top: 1.25rem; color: var(--muted); }
.contact__map { grid-column: 1 / -1; display: grid; grid-template-columns: repeat(12, minmax(0, 1fr)); column-gap: var(--gutter); }
.contact__address { grid-column: 1 / span 4; }
.contact__address address { font-style: normal; font-size: var(--step-lead); line-height: 1.35; }
.contact__address p { margin-top: 1rem; }
.contact__address ul { margin-top: 1.25rem; display: grid; gap: .5rem; }
.map { grid-column: 6 / span 7; position: relative; aspect-ratio: 16 / 9; background: var(--surface); overflow: hidden; }
.map img { width: 100%; height: 100%; object-fit: cover; }
.map iframe { position: absolute; inset: 0; width: 100%; height: 100%; border: 0; }
.map__load { position: absolute; left: 1.25rem; bottom: 1.25rem; display: grid; gap: .5rem; justify-items: start; }
.map__load p { background: var(--bg); padding: .35rem .6rem; font-size: var(--step-small); }
.map__credit { position: absolute; right: 0; bottom: 0; background: var(--bg); padding: .15rem .5rem; font-size: .8125rem; }

/* ---------- footer: photograph half, menu half ---------- */
.foot { display: grid; grid-template-columns: 1fr 1fr; min-height: 100svh; background: var(--field-1); color: var(--field-1-ink); }
.foot__pic { margin: 0; overflow: hidden; }
.foot__pic img { width: 100%; height: 100%; object-fit: cover; }
.foot__side { padding: 80px var(--margin) 32px clamp(2rem, 8vw, 9rem); display: flex; flex-direction: column; }
.foot__name { font-size: var(--step-lead); letter-spacing: -0.02em; }
.foot__menu { margin-top: 3rem; display: grid; gap: .5rem; }
.foot__menu a { display: inline-block; font-size: clamp(1.75rem, 1rem + 2.2vw, 3rem); font-weight: 500; letter-spacing: -0.02em; line-height: 1.15; text-decoration: none; transition: transform var(--t-hover) var(--ease-out), color var(--t-hover) ease; }
.foot__menu:hover a { color: var(--field-1-muted); }
.foot__menu a:hover, .foot__menu a:focus-visible { color: var(--field-1-ink); transform: translateX(12px); }
.foot__blocks { margin-top: 4rem; display: grid; grid-template-columns: 1fr 1fr; gap: 2rem; font-size: var(--step-small); }
.foot__blocks h2 { font-size: var(--step-small); font-weight: 600; letter-spacing: 0; }
.foot__blocks ul { margin-top: .6rem; display: grid; gap: .35rem; }
.foot__blocks a { text-underline-offset: .2em; }
.foot__legal { margin-top: auto; padding-top: 3rem; font-size: var(--step-small); color: var(--field-1-muted); display: grid; gap: .5rem; }
.foot__legal p { max-width: 60ch; }

/* ---------- call bar: always there on a phone ---------- */
.callbar { display: none; }
.callfloat { position: fixed; right: var(--margin); bottom: var(--margin); z-index: 30; transform: translateY(calc(100% + 3rem)); transition: transform 360ms var(--ease-out); }
.callfloat.is-on { transform: none; }
.callfloat .button { min-height: 3.5rem; }

/* ---------- cookie banner ---------- */
.consent { position: fixed; left: calc(var(--inset) + 16px); top: calc(var(--inset) + 16px); z-index: 40; max-width: 26rem; background: var(--field-1); color: var(--field-1-ink); padding: 1.25rem 1.25rem 1.1rem; font-size: var(--step-small); box-shadow: 0 12px 40px rgba(20, 15, 10, .28); } /* taste-skill-ignore: the consent box floats over the page */
.consent[hidden] { display: none; }
.consent p { max-width: none; }
.consent__actions { margin-top: 1rem; display: flex; flex-wrap: wrap; align-items: center; gap: .75rem 1rem; }
.consent__actions button { min-height: 2.75rem; padding: 0 1.1rem; font-weight: 500; }
.consent__accept { background: var(--accent); color: var(--accent-ink); }
.consent__reject { border: 2px solid var(--field-1-ink); }
.consent a { color: var(--field-1-ink); }

/* ---------- inner pages ---------- */
.page { padding: 0 var(--margin); }
.page__head { display: grid; grid-template-columns: repeat(12, minmax(0, 1fr)); column-gap: var(--gutter); padding: clamp(2rem, 5vw, 4rem) 0 var(--section); align-items: end; }
.page__title { grid-column: 1 / span 6; align-self: center; }
.page__title h1 { margin-top: 1.25rem; font-size: var(--step-head); max-width: 18ch; }
.page__title p { margin-top: 1.5rem; font-size: var(--step-lead); line-height: 1.4; max-width: 34ch; }
.page__title .hero__actions .link { color: var(--ink); }
.page__pic { grid-column: 7 / span 6; height: min(78svh, 52vw); overflow: hidden; margin: 0; }
.page__pic img { width: 100%; height: 100%; object-fit: cover; }
.crumbs { font-size: var(--step-small); color: var(--muted); padding-top: .25rem; }
.crumbs ol { list-style: none; padding: 0; margin: 0; display: flex; flex-wrap: wrap; gap: .4rem; }
.crumbs li + li::before { content: '/'; margin-right: .4rem; }
.crumbs a { text-underline-offset: .2em; }
.prose { display: grid; grid-template-columns: repeat(12, minmax(0, 1fr)); column-gap: var(--gutter); padding-bottom: var(--section); }
.prose__aside { grid-column: 1 / span 3; font-size: var(--step-small); }
.prose__aside nav { position: sticky; top: 2rem; display: grid; gap: .5rem; }
.prose__aside nav strong { font-weight: 600; }
.prose__main { grid-column: 5 / span 8; max-width: 46rem; min-width: 0; }
.prose__main > * + * { margin-top: 1.1rem; }
.prose__main h2 { font-size: clamp(1.5rem, 1.2rem + 1vw, 2.125rem); margin-top: 3.5rem; max-width: 22ch; }
.prose__main h2:first-child { margin-top: 0; }
.prose__main h3 { font-size: var(--step-lead); margin-top: 2rem; letter-spacing: -0.01em; }
.prose__main ul, .prose__main ol:not([class]) { padding-left: 1.2em; }
.prose__main li + li { margin-top: .5rem; }
.prose__main table { width: 100%; border-collapse: collapse; font-variant-numeric: tabular-nums; }
.prose__main th, .prose__main td { text-align: left; padding: .6rem .5rem .6rem 0; vertical-align: top; border-bottom: 1px solid var(--surface); }
.nums-table td:last-child { text-align: right; white-space: nowrap; }
.table-wrap { overflow-x: auto; }
.prose__main { overflow-wrap: break-word; }
.prose__main td, .prose__main th { overflow-wrap: anywhere; }
.prose__main th { font-weight: 600; }
.callout { background: var(--surface); padding: 1.5rem; }
.callout--dark { background: var(--field-1); color: var(--field-1-ink); }
.callout--dark .link { color: var(--field-1-ink); }
.callout h2, .callout h3 { margin-top: 0 !important; }
.menu__group .sample, .sample { display: inline-block; color: var(--accent-ink); margin-left: .5em; padding: 0 .4em; font-size: var(--step-small); background: var(--accent); color: var(--accent-ink); }
.related { padding: var(--section) 0; background: var(--surface); margin: 0 calc(-1 * var(--margin)); padding-inline: var(--margin); display: grid; grid-template-columns: repeat(12, minmax(0, 1fr)); column-gap: var(--gutter); }
.related h2 { grid-column: 1 / span 4; font-size: var(--step-head); }
.related ul { grid-column: 6 / span 7; columns: 2; column-gap: 3rem; }
.related li { break-inside: avoid; padding: .45rem 0; }
.related a { text-decoration: none; font-size: var(--step-lead); }
.related a:hover { text-decoration: underline; text-underline-offset: .2em; }
.reviews-list { display: grid; gap: 4rem; }
.reviews-list article p + p { margin-top: 1rem; }
.reviews-list footer { margin-top: 1.25rem; font-size: var(--step-small); color: var(--muted); }

/* ---------- tablet ---------- */
@media (max-width: 1080px) {
  .bar__links a:nth-child(4) { display: none; }
  .callfloat { display: none; }
  .menu__list { grid-template-columns: 1fr; }
  .menu__head { grid-column: 1 / span 5; }
  .menu__body { grid-column: 7 / span 6; }
  .letter__side { grid-column: 1 / span 4; }
  .letter__body { grid-column: 6 / span 7; }
  .letter__more { grid-column: 6 / span 7; margin-top: 2rem; }
  .slip { grid-column: 7 / span 6; }
  .faq__text { grid-column: 1 / span 6; }
  .faq__pics { grid-column: 8 / span 5; }
}

/* ---------- phone ---------- */
@media (max-width: 767px) {
  :root { --inset: 12px; --margin: 20px; --section: 6rem; }
  body { padding-bottom: 76px; }
  .bar { left: 0; padding: calc(var(--inset) + 10px) calc(var(--inset) + 12px) 0; justify-content: space-between; color: var(--field-1-ink); }
  .bar__links, .bar .button, .bar__lang { display: none; }
  .bar__menu { display: inline-flex; min-height: 44px; align-items: center; padding: 0 .9rem; background: rgba(42, 34, 27, .78); color: var(--field-1-ink); }
  .bar__call { display: inline-flex !important; }
  .bar.is-open { position: fixed; inset: 0; z-index: 60; background: var(--field-1); flex-direction: column; align-items: stretch; justify-content: flex-start; padding: 20px; }
  .bar.is-open .bar__menu { align-self: flex-end; }
  .bar.is-open .bar__links { display: grid; gap: .25rem; margin-top: 2rem; font-size: 2rem; }
  .bar.is-open .bar__links a { display: block !important; padding: .4rem 0; }
  .bar.is-open .bar__lang { display: block; margin-top: 1.5rem; font-size: 1.25rem; }
  .bar--page { position: relative; padding: 16px var(--margin) 16px; color: var(--ink); }
  .bar--page .bar__menu { background: var(--field-1); }

  .stage { grid-template-columns: 1fr; position: relative; }
  .stage__col { position: static; }
  .stage__pic { position: relative; height: 52svh; padding: var(--inset) var(--inset) 0; }
  .stage__frame figcaption { display: none; }
  .stage__frame img:not(:first-child) { display: none; }
  .hero { min-height: 0; display: block; padding: 0 var(--margin) 3.5rem; }
  .hero { display: flex; flex-direction: column; }
  .mark-wrap { --over: 4.6vw; order: -1; margin: calc(-1 * var(--over)) calc(-1 * var(--margin)) 0; }
  .mark { font-size: 10.6vw; height: 1.05em; justify-content: flex-start; align-items: flex-start; padding: 0 0 0 var(--margin); }
  .mark::after { justify-content: flex-start; align-items: flex-start; padding: 0 0 0 var(--margin); clip-path: inset(-30% -5% calc(100% - var(--over)) -5%); }
  .stage__frame img:first-child { opacity: 1 !important; }
  .hero__text { padding-top: 1.75rem; margin: 0; }
  .hero h1 { font-size: 2.1rem; }
  .hero__lead { margin-top: 1rem; font-size: 1.0625rem; max-width: none; }
  .hero__actions .button { width: 100%; }
  .live { margin-top: 1.75rem; font-size: 1rem; }

  .col { padding-top: var(--section); }
  .col--intro { padding-right: 22%; }
  .col h2 { font-size: 2rem; }
  .triage__row a { padding: .8rem 0; }

  .menu, .slipband, .letter, .faq, .contact, .contact__map, .page__head, .prose, .related { grid-template-columns: 1fr; }
  .menu > *, .slipband > *, .letter > *, .faq > *, .contact > *, .contact__map > *, .page__head > *, .prose > *, .related > * { grid-column: 1 / -1 !important; }
  .menu__head h2, .slipband__head h2, .letter__side h2, .faq__text h2, .contact__lead h2, .related h2 { font-size: 2rem; }
  .menu__pic { width: 60%; margin-bottom: 2.5rem; }
  .menu__name, .menu__price { font-size: 1.0625rem; }
  .slipband__pic { width: 60%; margin-bottom: 2.5rem; }
  .slip { margin: 0 -4px; padding: 1.75rem 1.25rem 2.75rem; }
  .slip__result { margin-inline: -1.25rem; padding-inline: 1.25rem; }
  .letter__body { margin-top: 2.5rem; }
  .letter__more { margin-top: 2rem; }
  .faq { padding: 0; }
  .faq__pics { order: -1; margin: 0; padding: 0 0 4rem; }
  .faq__tall { aspect-ratio: 4 / 5; }
  .faq__square { left: auto; right: var(--margin); bottom: 1.5rem; width: 38%; }
  .faq__text { padding: 0 var(--margin) var(--section); }
  .faq__text .button { width: 100%; }
  .faq__text .button + .link { display: inline-block; margin: 1.25rem 0 0; }
  .contact__pic { width: 96px; }
  .contact__map { row-gap: 2rem; }
  .map { aspect-ratio: 1; }
  .map img { object-position: 50% 52%; }
  .foot { grid-template-columns: 1fr; min-height: 0; }
  .foot__pic { height: 50svh; }
  .foot__side { padding: 3rem var(--margin) 2rem; }
  .foot__menu a { font-size: 1.375rem; padding: .3rem 0; }
  .foot__blocks { grid-template-columns: 1fr; }
  .page__pic { margin-top: 2rem; height: 56svh; }
  .page__head { padding-bottom: 4rem; }
  .prose__aside { display: none; }
  .prose__main h2 { margin-top: 3rem; }
  .related ul { columns: 1; margin-top: 2rem; }

  .callbar { position: fixed; left: 0; right: 0; bottom: 0; z-index: 35; display: grid; grid-template-columns: 1fr auto; gap: 8px; padding: 8px 8px calc(8px + env(safe-area-inset-bottom)); background: var(--field-1); }
  .callbar .button { min-height: 3.5rem; font-size: 1.0625rem; }
  .callbar__wa { background: transparent; color: var(--field-1-ink); border: 2px solid var(--field-1-muted); }
  .callfloat { display: none; }
  .consent { left: 8px; right: 8px; top: auto; bottom: 84px; max-width: none; }
}

/* ---------- motion ---------- */
@media (prefers-reduced-motion: no-preference) {
  .js .hero__text [data-load] { opacity: 0; transform: translateY(14px); animation: load-rise 700ms var(--ease-out) forwards; animation-delay: var(--d, 0ms); }
  .js .page__title [data-load] { opacity: 0; transform: translateY(14px); animation: load-rise 700ms var(--ease-out) forwards; animation-delay: var(--d, 0ms); }
  .js .page__pic[data-open] { clip-path: inset(0 0 100% 0); animation: load-open 1100ms var(--ease-in-out) 100ms forwards; }
  .js .page__pic[data-open] img { transform: scale(1.08); animation: load-settle 1400ms var(--ease-expo) 100ms forwards; }
  .js .stage__frame[data-open] { clip-path: inset(0 0 100% 0); animation: load-open 1100ms var(--ease-in-out) 100ms forwards; }
  .js .stage__frame[data-open] img:first-child { transform: scale(1.08); animation: load-settle 1400ms var(--ease-expo) 100ms forwards; }
  .js .mark-wrap[data-load] { opacity: 0; transform: translateY(24px); animation: load-rise 1000ms var(--ease-expo) forwards; animation-delay: 380ms; }
  .js [data-reveal] { opacity: 0; transform: translateY(24px); transition: opacity 700ms var(--ease-out), transform 900ms var(--ease-out); transition-delay: calc(var(--i, 0) * 80ms); }
  .js [data-reveal].is-in { opacity: 1; transform: none; }
  .js .shutter[data-reveal] { opacity: 1; transform: none; clip-path: inset(0 0 100% 0); transition: clip-path 1100ms var(--ease-in-out); }
  .js .shutter[data-reveal] img { transform: scale(1.1); transition: transform 1500ms var(--ease-soft); }
  .js .shutter[data-reveal].is-in { clip-path: inset(0); }
  .js .shutter[data-reveal].is-in img { transform: none; }
  @supports (animation-timeline: view()) {
    .mark { animation: mark-weigh linear both; animation-timeline: view(); animation-range: exit 0% exit 100%; }
    .foot__pic img { animation: drift linear both; animation-timeline: view(); animation-range: entry 0% exit 100%; }
    .faq__tall img { animation: drift linear both; animation-timeline: view(); animation-range: entry 0% exit 100%; }
  }
  .stage__frame img.is-on { animation: slow-zoom 14s var(--ease-soft) both; }
  .live[data-state="open"]::before { animation: breathe 2.6s ease-in-out infinite; }
}
@keyframes load-rise { to { opacity: 1; transform: none; } }
@keyframes load-open { to { clip-path: inset(0); } }
@keyframes load-settle { to { transform: none; } }
@keyframes mark-weigh { from { scale: 1; } to { scale: 0.94; } }
@keyframes drift { from { transform: scale(1.08) translateY(-3%); } to { transform: scale(1.08) translateY(3%); } }
@keyframes breathe { 50% { opacity: .55; } }
@keyframes slow-zoom { from { transform: scale(1); } to { transform: scale(1.05); } }

@media print { .callbar, .callfloat, .consent, .bar { display: none !important; } }
.prose__main .triage__group { margin-top: 4rem; }
.prose__main .triage__group:first-child { margin-top: 0; }
.prose__main ul:not([class]) { list-style: disc; }
.prose__main ol:not([class]) { list-style: decimal; }
.prose__main li::marker { color: var(--accent); }

@media (max-width: 960px) and (min-width: 768px) {
  .bar__links a:nth-child(3) { display: none; }
  .bar { gap: 1rem; }
}