:root {
  /* Címsor / tint: sötét erdőzöld — szándékosan nem fekete, hogy a zöld irány látszódjon. */
  --navy: #1F5336;
  --navy-mid: #46604c;
  --navy-deep: #0b2619;
  --navy-soft: #25492f;
  --blue: #487858;
  --blue-hover: #3a6347;
  --sky: #9faa91;
  --card: #c9cfb6;
  --ice: #e9ecdf;
  --bg: #f7f7f1;
  --bg-2: #eff1e5;
  --white: #ffffff;
  --line: #bcc1a8;
  --shadow: 0 18px 50px rgba(18, 42, 27, 0.12);
  --radius: 28px;
  --max: 1180px;
  --header: 84px;
  /* Betűtípusok — a címsorok és a logófelirat a lágy, elegáns Fraunces
     (SOFT tengely 100-on), a szövegtörzs marad Inter. Cseréhez csak ezt a
     két sort kell átírni. */
  --font-display: Fraunces, "Iowan Old Style", "Palatino Linotype", Palatino, Georgia, serif;
  --font-body: Inter, system-ui, sans-serif;
  /* Hero fotó — csak ezt a három számot állítsd (css/style.css teteje).
     --hero-x:    0% = bal (rendelő / monitor), 100% = jobb (a két alak).
     --hero-y:    0% = fent, 100% = lent.
     --hero-zoom: 1 = teljes kép, 1.2 = közelebb a csapatra. */
  --hero-x: 70%;
  --hero-y: 40%;
  --hero-zoom: 1;
  --brand-ink: #5a615c;
}

*,
*::before,
*::after { box-sizing: border-box; }

html { scroll-behavior: smooth; }

body {
  margin: 0;
  font-family: var(--font-body);
  color: var(--navy-mid);
  background: var(--ice);
  line-height: 1.6;
  min-height: 100vh;
}

@font-face {
  font-family: Inter;
  font-style: normal;
  font-weight: 400 700;
  font-display: swap;
  src: url("../fonts/inter-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;
}
@font-face {
  font-family: Inter;
  font-style: normal;
  font-weight: 400 700;
  font-display: swap;
  src: url("../fonts/inter-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-20C0, U+2113, U+2C60-2C7F, U+A720-A7FF;
}
/* Fraunces (OFL) — változó betű, SOFT=100 / WONK=0 értéken rögzítve, a
   wght 400–700 és az opsz (optikai méret) tengely él. A böngésző az opsz-t a
   betűmérethez igazítja, így a kis kártyacímek is olvashatóak maradnak. */
@font-face {
  font-family: Fraunces;
  font-style: normal;
  font-weight: 400 700;
  font-display: swap;
  src: url("../fonts/fraunces-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;
}
@font-face {
  font-family: Fraunces;
  font-style: normal;
  font-weight: 400 700;
  font-display: swap;
  src: url("../fonts/fraunces-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-20C0, U+2113, U+2C60-2C7F, U+A720-A7FF;
}

/* height: auto is what keeps the width/height attributes from distorting an
   image once CSS scales it down — the attributes are only there to reserve the
   right space while it loads. */
img { max-width: 100%; height: auto; display: block; }

a { color: inherit; text-decoration: none; }

button,
input,
select,
textarea { font: inherit; }

.brand-dent { color: var(--blue); }

.page-hero h1 .brand-sub {
  display: block;
  font-size: clamp(20px, 2.5vw, 28px);
  font-weight: 600;
  letter-spacing: -0.02em;
  line-height: 1.2;
  white-space: nowrap;
  margin-top: 0.18em;
}

h1, h2, h3, h4, .logo-text, .display {
  font-family: var(--font-display);
  font-weight: 600;
  color: var(--navy);
  /* A serif nem bírja a Sora-hoz hangolt szoros betűközt: itt csak leheletnyi. */
  letter-spacing: -0.012em;
  line-height: 1.14;
  font-optical-sizing: auto;
}

.wrap {
  width: min(var(--max), calc(100% - 40px));
  margin: 0 auto;
}

.eyebrow {
  display: inline-flex;
  align-items: center;
  gap: 8px;
  font-size: 13px;
  font-weight: 600;
  color: var(--blue);
  text-transform: none;
  margin-bottom: 12px;
}

.eyebrow::before {
  content: "";
  width: 8px;
  height: 8px;
  border-radius: 50%;
  background: var(--blue);
}

.lede {
  max-width: 520px;
  color: var(--navy-mid);
  font-size: 16px;
}

/* Header */
.site-header {
  position: sticky;
  top: 0;
  z-index: 40;
  background: rgba(247, 247, 241, 0.86);
  backdrop-filter: blur(16px);
  border-bottom: 1px solid rgba(188, 193, 168, 0.35);
}

.nav {
  position: relative;
  height: var(--header);
  display: grid;
  grid-template-columns: 1fr auto 1fr;
  align-items: center;
  gap: 16px;
}

/* Márkajel: a fog három ecsetvonása + kétszínű szóvédjegy (src/Site/brand.php).
   --brand-a a külső vonás és az "Inpe", --brand-b a felső vonás és a "Dent",
   --brand-m a középső sáv színe; hoverre a és b helyet cserél, a szóvédjegy
   alatt zöld vonal fut végig. A szöveg – mint az eredeti logón – a fog nyitott
   jobb oldalába van tolva. */
.brand {
  --color-a: var(--blue);
  --color-b: var(--brand-ink);
  --color-m: var(--card);
  --brand-a: var(--color-a);
  --brand-b: var(--color-b);
  --brand-m: var(--color-m);
  --mark-h: 48px;
  display: flex;
  align-items: center;
  gap: 0;
  font-weight: 600;
  font-size: 23px;
  color: var(--navy);
  text-decoration: none;
}

.brand:hover,
.brand:focus-visible {
  --brand-a: var(--color-b);
  --brand-b: var(--color-a);
}

.logo-mark {
  flex: 0 0 auto;
  width: auto;
  height: var(--mark-h);
  overflow: visible;
}

.logo-mark path { transition: fill 0.5s cubic-bezier(0.2, 0.7, 0.3, 1); }
.logo-mark .mark-a { fill: var(--brand-a); }
.logo-mark .mark-m { fill: var(--brand-m); }
.logo-mark .mark-b { fill: var(--brand-b); transition-delay: 0.06s; }

/* A szóvédjegy: lágy serif; a fog szélességének ~43%-ánál kezdődik (a fog
   arányai 103:120, így a szélessége 0.856 × magasság). */
.logo-text {
  display: inline-block;
  margin-left: calc(var(--mark-h) * -0.46);
  padding-top: 7px;
  font-weight: 600;
  letter-spacing: -0.005em;
  line-height: 1;
  white-space: nowrap;
}

.logo-a,
.logo-b {
  transition: color 0.45s cubic-bezier(0.2, 0.7, 0.3, 1);
}
.logo-a { color: var(--brand-a); }
.logo-b {
  color: var(--brand-b);
  transition-delay: 0.1s;
  background: linear-gradient(currentColor, currentColor) no-repeat 0 100% / 0% 1.5px;
  padding-bottom: 3px;
  transition-property: color, background-size;
  transition-duration: 0.45s;
}
.brand:hover .logo-b,
.brand:focus-visible .logo-b { background-size: 100% 1.5px; }

@media (prefers-reduced-motion: reduce) {
  .logo-mark .mark-a,
  .logo-mark .mark-b,
  .logo-a,
  .logo-b { transition: none; }
}

.nav-links {
  display: flex;
  align-items: center;
  justify-self: center;
  gap: 16px;
  list-style: none;
  margin: 0;
  padding: 0;
  font-weight: 500;
  color: var(--navy);
}

.nav-links a:not(.btn):hover,
.nav-links a:not(.btn)[aria-current="page"] { color: var(--blue); }

.nav-book-mobile { display: none; }

.nav-end {
  justify-self: end;
  display: flex;
  align-items: center;
  gap: 40px;
  flex-shrink: 0;
}

.lang-switch {
  display: flex;
  align-items: center;
  gap: 5px;
  font-size: 13px;
}

.lang-switch a {
  opacity: 0.45;
  font-weight: 700;
  letter-spacing: 0.04em;
  color: var(--navy);
}

.lang-switch a.is-active { opacity: 1; }
.lang-sep { opacity: 0.35; color: var(--navy); }

.nav-toggle {
  display: none;
  width: 44px;
  height: 44px;
  border: 1px solid #c9cfb6;
  background: #e6e9db;
  border-radius: 12px;
  cursor: pointer;
}

.nav-toggle span,
.nav-toggle span::before,
.nav-toggle span::after {
  display: block;
  width: 18px;
  height: 2px;
  background: var(--navy);
  position: relative;
  margin: 0 auto;
}

.nav-toggle span::before,
.nav-toggle span::after {
  content: "";
  position: absolute;
  left: 0;
}

.nav-toggle span::before { top: -6px; }
.nav-toggle span::after { top: 6px; }

/* Nav "More" dropdown */
.nav-dropdown { position: relative; }

.nav-dropdown-toggle {
  background: none;
  border: 0;
  cursor: pointer;
  color: var(--navy);
  font: inherit;
  font-weight: 500;
  display: inline-flex;
  align-items: center;
  gap: 4px;
  padding: 0;
}

.nav-dropdown-toggle span { font-size: 11px; }

.nav-dropdown-menu {
  display: none;
  position: absolute;
  top: 100%;
  left: 0;
  margin-top: 14px;
  min-width: 220px;
  background: var(--white);
  border-radius: 16px;
  box-shadow: var(--shadow);
  padding: 10px;
  list-style: none;
  z-index: 50;
}

.nav-dropdown:hover .nav-dropdown-menu,
.nav-dropdown:focus-within .nav-dropdown-menu { display: block; }

.nav-dropdown-menu li a {
  display: block;
  padding: 10px 12px;
  border-radius: 10px;
  color: var(--navy);
  font-weight: 500;
}

.nav-dropdown-menu li a:hover { background: var(--ice); color: var(--blue); }

/* Hero bullets */
.hero-bullets {
  list-style: none;
  margin: 28px 0 0;
  padding: 0;
  display: grid;
  gap: 10px;
  max-width: 460px;
}

.hero-bullets li {
  position: relative;
  padding-left: 26px;
  font-weight: 500;
  color: var(--navy);
}

.hero-bullets li::before {
  content: "";
  position: absolute;
  left: 0;
  top: 6px;
  width: 14px;
  height: 14px;
  border-radius: 50%;
  background: var(--blue);
}

.hero-bullets.is-light li { color: #fff; }
.hero-bullets.is-light li::before { background: #b9c9a4; }

/* Buttons */
.btn {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 8px;
  min-height: 48px;
  padding: 12px 22px;
  border-radius: 14px;
  border: 0;
  font-weight: 600;
  cursor: pointer;
  transition: 0.2s ease;
  white-space: nowrap;
}

.btn-primary {
  background: var(--blue);
  color: var(--white);
  box-shadow: 0 10px 24px rgba(72, 120, 88, 0.28);
}

.btn-primary:hover { background: var(--blue-hover); transform: translateY(-1px); }

.btn-ghost {
  background: #e1e5d4;
  color: var(--navy);
}

.btn-ghost:hover { background: var(--card); }

.btn-white {
  background: var(--white);
  color: var(--navy);
}

/* Compact variant for buttons that live inside cards. */
.btn-sm {
  min-height: 40px;
  padding: 8px 16px;
  border-radius: 12px;
  font-size: 14.5px;
  gap: 6px;
}

.btn-sm.btn-primary { box-shadow: 0 6px 16px rgba(72, 120, 88, 0.22); }

.btn-sm > [aria-hidden] { transition: transform 0.25s ease; }

.actions { display: flex; flex-wrap: wrap; gap: 12px; }

/* Hero — PureSmile layout, InpeDent colors */
.hero {
  position: relative;
  isolation: isolate;
  overflow: hidden;
  display: flex;
  align-items: center;
  min-height: 860px;
  padding: 96px 0 104px;
  background: var(--ice);
}

/* Full-bleed clinic photo behind the hero */
.hero-bg {
  display: block;
  position: absolute;
  inset: 0;
  z-index: -2;
}

.hero-bg img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  object-position: var(--hero-x) var(--hero-y);
  transform: scale(var(--hero-zoom));
  transform-origin: var(--hero-x) var(--hero-y);
  filter: saturate(1.06) contrast(1.03);
}

/* Soft blend into the white section below */
.hero::after {
  content: "";
  position: absolute;
  inset: auto 0 0;
  height: 140px;
  z-index: -1;
  pointer-events: none;
  background: linear-gradient(180deg, rgba(255, 255, 255, 0) 0%, rgba(255, 255, 255, 0.55) 100%);
}

.hero-grid { position: relative; }

.hero-copy {
  display: flex;
  flex-direction: column;
  align-items: flex-start;
  gap: 32px;
  max-width: 620px;
}

.hero h1 {
  font-size: clamp(40px, 5vw, 64px);
  letter-spacing: -0.02em;
  line-height: 1.1;
  font-weight: 600;
  margin: 0;
  color: var(--brand-ink);
}

.hero-accent {
  display: block;
  color: var(--blue);
  white-space: nowrap;
}

.hero-copy > p {
  font-size: 18px;
  line-height: 1.5;
  margin: 0;
  max-width: 520px;
  padding: 8px 12px;
  border-radius: 20px;
  background: rgba(255, 255, 255, 88%);
  box-shadow: 0 0 36px 22px rgba(255, 255, 255, 1.38);
}

.hero-actions {
  gap: 12px;
}

.hero-actions .btn {
  min-height: auto;
  padding: 16px 24px;
  border-radius: 4px;
  font-size: 16px;
  font-weight: 500;
  letter-spacing: -0.3px;
  box-shadow: none;
}

.hero-actions .btn-ghost {
  background: #eff1e5;
  border: 1px solid rgba(31, 83, 54, 0.15);
}

.hero-actions .btn-ghost:hover { background: var(--card); }

/* Sections — pastel canvas + white / wash bands like PureSmile */
.section {
  padding: 100px 0;
}

.section-surface {
  background: var(--white);
}

.section-soft {
  background: var(--bg-2);
}

.section-wash {
  background: radial-gradient(50% 80% at 50% 100%, rgba(72, 120, 88, 0.16) 0%, var(--ice) 72%);
}

.section-head {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 24px;
  align-items: end;
  margin-bottom: 40px;
}

.section-head h2,
.page-hero h1 {
  font-size: clamp(34px, 5vw, 56px);
  margin: 0;
}

.page-hero {
  padding: 56px 0 24px;
}

.page-hero p { font-size: 18px; max-width: 520px; }

.page-hero-with-photo { padding: 40px 0 28px; }

.page-hero-grid {
  display: grid;
  grid-template-columns: 1.1fr 0.9fr;
  gap: 40px;
  align-items: center;
}

.page-hero-media img {
  width: 100%;
  aspect-ratio: 4 / 3;
  object-fit: cover;
  border-radius: 28px;
  box-shadow: 0 26px 60px rgba(18, 42, 27, 0.16);
}

/* Cards */
.service-grid,
.feature-grid,
.blog-grid,
.price-grid,
.reason-grid {
  display: grid;
  gap: 18px;
}

.service-grid { grid-template-columns: repeat(2, 1fr); }

.card {
  background: var(--white);
  border-radius: var(--radius);
  padding: 28px;
  box-shadow: 0 10px 30px rgba(18, 42, 27, 0.06);
}

.card h3 { margin: 0 0 10px; font-size: 24px; }

.card p { margin: 0; }

.card-soft { background: #e6e9db; }

.icon-dot {
  width: 48px;
  height: 48px;
  border-radius: 14px;
  background: var(--ice);
  display: grid;
  place-items: center;
  margin-bottom: 18px;
  color: var(--blue);
  font-size: 22px;
}

/* Centred section heading (PureSmile services/blog style) */
.section-head-center {
  max-width: 640px;
  margin: 0 auto 48px;
  text-align: center;
}

.section-head-center h2 {
  font-size: clamp(30px, 3.6vw, 44px);
  letter-spacing: -0.015em;
  margin: 16px 0 0;
  text-wrap: balance;
}

/* Levegős, rövid bevezető: nagyobb sortáv, keskenyebb hasáb, kevesebb szó. */
.section-head-center p {
  margin: 18px auto 0;
  max-width: 34em;
  font-size: 17px;
  line-height: 1.75;
  color: var(--navy-mid);
  text-wrap: balance;
}

.tag-pill {
  display: inline-block;
  padding: 6px 14px;
  border: 1px solid rgba(31, 83, 54, 0.2);
  border-radius: 8px;
  background: var(--white);
  color: var(--blue);
  font-size: 13px;
  font-weight: 500;
  text-transform: uppercase;
}

/* ===========================================================================
   Service cards (homepage) — photo dissolving into the card surface.
   The image is masked with a vertical gradient so it has no hard bottom edge
   ("átmosódott kép"), and a brand-green wash unifies the mixed stock photos
   into one palette. Text always sits on flat card colour, never on the photo,
   so contrast is guaranteed regardless of the image.
   ======================================================================== */
.service-cards {
  display: grid;
  grid-template-columns: repeat(4, minmax(0, 1fr));
  gap: 20px;
}

.service-card {
  position: relative;
  display: flex;
  flex-direction: column;
  isolation: isolate;
  min-height: 0;
  padding: 0;
  background: var(--white);
  border: 1px solid rgba(15, 61, 44, 0.08);
  border-radius: 22px;
  overflow: hidden;
  text-decoration: none;
  box-shadow: 0 1px 2px rgba(10, 45, 30, 0.04);
  transition: transform 0.35s cubic-bezier(0.2, 0.7, 0.3, 1),
              box-shadow 0.35s ease,
              border-color 0.35s ease;
}

.service-card:hover,
.service-card:focus-visible {
  transform: translateY(-4px);
  border-color: rgba(31, 174, 94, 0.28);
  box-shadow: 0 20px 44px rgba(10, 45, 30, 0.13);
}

.service-card-media {
  position: relative;
  flex: 0 0 auto;
  height: auto;
  aspect-ratio: 16 / 10;
  z-index: 0;
  overflow: hidden;
}

.service-card-media img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  transform: scale(1.04);
  transition: transform 0.6s cubic-bezier(0.2, 0.7, 0.3, 1);
}

.service-card:hover .service-card-media img { transform: scale(1.1); }

/* Green tint that unifies photos from different sources into one palette.
   Multiply keeps the photo's own texture instead of flattening it, and the
   mask above already fades the strip out, so no white layer is needed here. */
.service-card-wash,
.advantage-thumb-wash {
  position: absolute;
  inset: 0;
  background: linear-gradient(180deg, rgba(11, 38, 25, 0) 55%, rgba(11, 38, 25, 0.16) 100%);
  pointer-events: none;
}

.service-card-body {
  position: relative;
  z-index: 1;
  display: flex;
  flex-direction: column;
  gap: 8px;
  flex: 1 1 auto;
  margin-top: 0;
  padding: 20px 22px 22px;
  background: var(--white);
}

/* Titles and summaries are clamped to a fixed number of lines so the buttons
   line up across a row whatever the copy length. */
.service-card h3 {
  margin: 0;
  font-size: 19px;
  font-weight: 600;
  letter-spacing: -0.01em;
  line-height: 1.22;
  min-height: 2.44em;
  display: -webkit-box;
  -webkit-line-clamp: 2;
  -webkit-box-orient: vertical;
  overflow: hidden;
}

.service-card-text {
  font-size: 14.5px;
  line-height: 1.5;
  color: var(--navy-mid);
  min-height: 4.5em;
  display: -webkit-box;
  -webkit-line-clamp: 3;
  -webkit-box-orient: vertical;
  overflow: hidden;
}

/* The card itself is the link, so the button is a styled span that follows
   the card's hover state. */
.service-card-btn {
  align-self: flex-start;
  margin-top: 8px;
}

.service-card:hover .service-card-btn,
.service-card:focus-visible .service-card-btn { background: var(--blue-hover); }

.service-card:hover .service-card-btn > [aria-hidden] { transform: translateX(3px); }

@supports not (mask-image: linear-gradient(#000, transparent)) {
  .service-card-media { height: auto; }
  .service-card-body { background: var(--white); }
}

/* Centred button row under a section (PureSmile "Button Container") */
.section-cta {
  display: flex;
  flex-wrap: wrap;
  justify-content: center;
  gap: 12px;
  margin-top: 40px;
}

.section-cta .btn {
  min-height: auto;
  padding: 16px 26px;
  border-radius: 4px;
  font-size: 16px;
  font-weight: 500;
  box-shadow: none;
}

/* Partner / manufacturer logo strip (from the old homepage clients-wrapper-three).
   Sits between the featured treatments (wash band) and the team (white), so
   the gradient runs pastel → white to hand over to the white section. */
.clients-bar {
  position: relative;
  padding: 28px 0 56px;
  background:
    linear-gradient(180deg, var(--ice) 0%, #f3f4ea 42%, var(--white) 100%);
  border-bottom: 1px solid rgba(188, 193, 168, 0.4);
}

.clients-bar-intro {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 12px;
  margin-bottom: 28px;
  text-align: center;
}

.clients-bar-intro p {
  margin: 0;
  max-width: 440px;
  font-size: 15px;
  line-height: 1.5;
  color: var(--navy-mid);
}

.clients-rule {
  display: flex;
  align-items: center;
  gap: 18px;
  width: min(520px, 100%);
}

.clients-rule::before,
.clients-rule::after {
  content: "";
  flex: 1;
  height: 1px;
  background: linear-gradient(90deg, transparent, rgba(31, 83, 54, 0.18), transparent);
}

.clients-wrapper-three {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(168px, 1fr));
  gap: 16px;
}

.clients-logo {
  min-height: 100px;
  margin: 0;
  display: grid;
  place-items: center;
  padding: 20px 22px;
  background: var(--white);
  border: 1px solid rgba(31, 83, 54, 0.08);
  border-radius: 16px;
  box-shadow: 0 10px 28px rgba(18, 42, 27, 0.045);
  transition: transform 0.25s ease, box-shadow 0.25s ease, border-color 0.25s ease;
}

.clients-logo:hover {
  transform: translateY(-3px);
  border-color: rgba(72, 120, 88, 0.28);
  box-shadow: 0 16px 36px rgba(18, 42, 27, 0.1);
}

.clients-image-three {
  width: 100%;
  height: 52px;
  object-fit: contain;
  filter: grayscale(0.15);
  opacity: 0.86;
  transition: opacity 0.25s ease, filter 0.25s ease;
}

.clients-logo:hover .clients-image-three {
  opacity: 1;
  filter: none;
}

@media (prefers-reduced-motion: reduce) {
  .clients-logo,
  .clients-image-three { transition: none; }
  .clients-logo:hover { transform: none; }
}

/* Founder video — a poster with a play badge on the page, the player itself
   in a <dialog>, so the section keeps its height and the embed is never
   loaded before a click. */
.video-facade {
  position: relative;
  display: block;
  height: 100%;
  min-height: 420px;
  border-radius: 12px;
  overflow: hidden;
  color: #fff;
  text-decoration: none;
  background: var(--navy-deep);
}

.video-facade img {
  display: block;
  width: 100%;
  height: 100%;
  min-height: 420px;
  object-fit: cover;
  transition: transform 0.7s cubic-bezier(0.2, 0.7, 0.3, 1);
}

.video-facade::after {
  content: "";
  position: absolute;
  inset: 0;
  background: linear-gradient(180deg, rgba(11, 38, 25, 0) 45%, rgba(11, 38, 25, 0.6) 100%);
}

.video-facade:hover img { transform: scale(1.03); }

.video-facade-play {
  position: absolute;
  left: 50%;
  top: 50%;
  z-index: 1;
  display: grid;
  place-items: center;
  width: 78px;
  height: 78px;
  border-radius: 50%;
  translate: -50% -50%;
  background: rgba(255, 255, 255, 0.94);
  color: var(--blue);
  box-shadow: 0 16px 40px rgba(18, 42, 27, 0.28);
  transition: transform 0.3s ease, background-color 0.3s ease;
}

.video-facade-play svg { width: 30px; height: 30px; margin-left: 4px; fill: currentColor; }

.video-facade:hover .video-facade-play { transform: scale(1.06); background: #fff; }

.video-facade-label {
  position: absolute;
  left: 22px;
  bottom: 20px;
  z-index: 1;
  font-size: 15px;
  font-weight: 600;
  letter-spacing: 0.01em;
  text-shadow: 0 1px 8px rgba(11, 38, 25, 0.5);
}

.video-facade:focus-visible { outline: 3px solid var(--blue); outline-offset: 3px; }

/* The homepage placement: a wide 16:9 poster at the top of the "Amiben mások
   vagyunk" section, directly under the hero, with the three advantage cards
   in a row underneath it. Video and card row share one width so their
   edges line up. */
.video-feature {
  width: min(100%, var(--advantage-width, 1040px));
  height: auto;
  min-height: 0;
  aspect-ratio: 16 / 9;
  margin: 0 auto 32px;
  border-radius: 20px;
  box-shadow: var(--shadow);
}

.video-feature img {
  min-height: 0;
  aspect-ratio: 16 / 9;
}

.video-feature .video-facade-play {
  width: 88px;
  height: 88px;
}

.video-feature .video-facade-play svg { width: 34px; height: 34px; }

.video-feature-still {
  margin: 0 auto 32px;
  pointer-events: none;
}

.video-feature-still::after { display: none; }

.video-dialog {
  width: min(940px, calc(100vw - 32px));
  max-width: none;
  max-height: calc(100vh - 32px);
  padding: 0;
  border: 0;
  border-radius: 22px;
  background: var(--white);
  color: var(--navy);
  box-shadow: 0 40px 100px rgba(18, 42, 27, 0.35);
}

.video-dialog::backdrop {
  background: rgba(11, 38, 25, 0.72);
  backdrop-filter: blur(4px);
}

.video-dialog[open] { animation: settle-in 0.35s cubic-bezier(0.2, 0.7, 0.3, 1) both; }

.video-dialog-inner { padding: 22px 24px 24px; }

.video-dialog-head {
  display: flex;
  align-items: flex-start;
  justify-content: space-between;
  gap: 16px;
  margin-bottom: 16px;
}

.video-dialog-head h2 { margin: 10px 0 0; font-size: clamp(20px, 2.2vw, 26px); letter-spacing: -0.01em; }

.video-dialog-close {
  flex: 0 0 auto;
  width: 40px;
  height: 40px;
  border-radius: 50%;
  border: 1px solid rgba(31, 83, 54, 0.14);
  background: var(--white);
  color: var(--navy);
  font-size: 24px;
  line-height: 1;
  cursor: pointer;
  transition: background-color 0.2s ease, border-color 0.2s ease;
}

.video-dialog-close:hover { background: var(--ice); border-color: rgba(72, 120, 88, 0.4); }

.video-stage {
  position: relative;
  display: flex;
  flex-direction: column;
  aspect-ratio: 16 / 9;
  border-radius: 14px;
  overflow: hidden;
  background: var(--navy-deep);
}

.video-stage iframe,
.video-stage video {
  position: absolute;
  inset: 0;
  display: block;
  width: 100%;
  height: 100%;
  border: 0;
}

/* The consent notice fills the 16:9 stage and, on narrow screens where the
   copy is taller than the box, lets the stage grow instead of clipping. */
.video-stage .consent-placeholder {
  flex: 1 1 auto;
  justify-content: center;
  align-items: center;
  text-align: center;
  border: 0;
  border-radius: 0;
  background: var(--ice);
}

.video-consent[hidden] { display: none !important; }

.video-dialog-desc { margin: 16px 0 0; color: var(--navy-mid); font-size: 15px; line-height: 1.65; }

@media (prefers-reduced-motion: reduce) {
  .video-facade img,
  .video-facade-play { transition: none; }
  .video-dialog[open] { animation: none; }
}

/* Advantage cards — three equal columns under the video (or straight under
   the section head when no video is configured). Same width as the video
   above so the block reads as one tidy unit. */
#rolunk .wrap { --advantage-width: 1040px; }

.advantage-grid {
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  gap: 24px;
  width: min(100%, var(--advantage-width, 1040px));
  margin: 0 auto;
}

.advantage-card {
  position: relative;
  display: flex;
  flex-direction: column;
  isolation: isolate;
  padding: 0;
  background: var(--white);
  border: 1px solid rgba(15, 61, 44, 0.08);
  border-radius: 22px;
  overflow: hidden;
  box-shadow: 0 1px 2px rgba(10, 45, 30, 0.04);
  transition: transform 0.35s cubic-bezier(0.2, 0.7, 0.3, 1),
              box-shadow 0.35s ease,
              border-color 0.35s ease;
}

.advantage-card:hover {
  transform: translateY(-4px);
  border-color: rgba(31, 174, 94, 0.28);
  box-shadow: 0 20px 44px rgba(10, 45, 30, 0.13);
}

.advantage-thumb {
  position: relative;
  flex: 0 0 auto;
  width: 100%;
  aspect-ratio: 16 / 10;
  overflow: hidden;
  background: var(--ice);
}

.advantage-thumb img {
  display: block;
  width: 100%;
  height: 100%;
  object-fit: cover;
  transform: scale(1.04);
  transition: transform 0.6s cubic-bezier(0.2, 0.7, 0.3, 1);
}

.advantage-card:hover .advantage-thumb img { transform: scale(1.1); }

/* Fallback when that photo has no stored focus. An inline object-position wins. */
.advantage-card-anchor-bottom .advantage-thumb img {
  object-position: center bottom;
  transform-origin: center bottom;
}

.advantage-text {
  position: relative;
  z-index: 1;
  display: flex;
  flex-direction: column;
  gap: 8px;
  flex: 1 1 auto;
  padding: 20px 22px 22px;
  background: var(--white);
}

.advantage-text h3 {
  margin: 0;
  font-size: 19px;
  font-weight: 600;
  letter-spacing: -0.01em;
  line-height: 1.22;
}

.advantage-text p {
  margin: 0;
  font-size: 14.5px;
  line-height: 1.5;
  color: var(--navy-mid);
}

/* Team — PureSmile: pastel circle at the bottom, cutout sits on top, head pops out */
.doctor-grid {
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  gap: 40px;
}

.doctor-card {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 14px;
  text-align: center;
  text-decoration: none;
}

/* Frame geometry mirrors PureSmile's "Doctor Frame": a 0.84 box with a
   rounded clip, the circle seated at the bottom and the cutout filling the
   whole box so the head rises above the circle. The photo must be a
   background-free PNG — the circle below is what provides the backdrop, so
   new colleagues only need their cutout dropped in. */
.doctor-frame {
  position: relative;
  display: flex;
  align-items: flex-end;
  justify-content: center;
  width: 100%;
  max-width: 320px;
  /* 0.84 is PureSmile's Doctor Frame ratio and matches the normalised PNG
     canvas exactly, so object-fit has nothing to crop. */
  aspect-ratio: 0.84;
  /* Two clips make the silhouette. Above the circle's centre line the frame's
     own rounded corners apply: a percentage radius turns each corner into an
     ellipse, and at 42% (= aspect-ratio / 2) its vertical radius equals half
     the width — the circle's radius — so the clip meets the circle tangentially
     at the centre line while the top corners stay open for the head.
     PureSmile stops here (44% frame, 45% photo), but an elliptical corner
     diverges from the circle again towards the bottom, leaving a sliver of up
     to ~16px where arms poke out past the arc — invisible on their white coats
     against a white page, plain to see on grey scrubs against our green. The
     mask below therefore restricts everything under the centre line to the
     circle itself: the circle is seated at the bottom, so its centre sits at
     100% - 42% = 58% of the height and closest-side gives exactly its radius.
     The mask lives on the frame, not on the photo, so the hover scale cannot
     carry the clip with it. */
  border-radius: 42%;
  overflow: hidden;
  /* One tall opaque slab (through and past the equator) plus the seated
     circle. Both layers are full-size and overlap, so there is no 58%
     size-edge and no fade band — those were reading as a pale horizontal
     hairline through the green. */
  mask-image:
    linear-gradient(to bottom, #000 0%, #000 64%, transparent 64%),
    radial-gradient(circle closest-side at 50% 58%, #000 100%, transparent 101%);
  mask-size: 100% 100%, 100% 100%;
  mask-repeat: no-repeat;
  mask-composite: add;
  -webkit-mask-image:
    linear-gradient(to bottom, #000 0%, #000 64%, transparent 64%),
    radial-gradient(circle closest-side at 50% 58%, #000 100%, transparent 101%);
  -webkit-mask-size: 100% 100%, 100% 100%;
  -webkit-mask-repeat: no-repeat;
  -webkit-mask-composite: source-over;
}

.doctor-circle {
  --circle-top: #e9ecdf;
  --circle-mid: #a9b898;
  --circle-bottom: #487858;
  position: relative;
  width: 100%;
  aspect-ratio: 1;
}

/* One solid circle — no horizontal mask through the middle, so the page
   cannot show through as a pale stripe. The soft rim around the head is a
   blurred copy sitting behind, masked to the top half only; the body stays
   on a crisp arc so it cannot hang past a fading edge. */
.doctor-circle::before,
.doctor-circle::after {
  content: "";
  position: absolute;
  border-radius: 50%;
  background:
    radial-gradient(ellipse 95% 85% at 50% 16%, var(--circle-top) 0%, transparent 70%),
    linear-gradient(180deg,
      var(--circle-top) 0%,
      color-mix(in srgb, var(--circle-top) 55%, var(--circle-mid)) 28%,
      var(--circle-mid) 56%,
      color-mix(in srgb, var(--circle-mid) 40%, var(--circle-bottom)) 80%,
      var(--circle-bottom) 100%);
  pointer-events: none;
}

.doctor-circle::before {
  inset: -16%;
  z-index: 0;
  filter: blur(16px);
  mask-image: linear-gradient(to bottom, #000 42%, transparent 72%);
  -webkit-mask-image: linear-gradient(to bottom, #000 42%, transparent 72%);
}

.doctor-circle::after {
  inset: 0;
  z-index: 1;
}

.doctor-cutout {
  position: absolute;
  inset: 0;
  z-index: 2;
  width: 100%;
  height: 100%;
  object-fit: cover;
  object-position: center bottom;
  transition: transform 0.4s ease;
}

.doctor-card:hover .doctor-cutout { transform: scale(1.03); }

.doctor-card h3 {
  margin: 0;
  font-size: 24px;
  font-weight: 500;
  letter-spacing: -0.01em;
}

.doctor-role { margin: 0; font-size: 14px; color: var(--blue); font-weight: 500; }

/* Homepage / about team: same stacked card as treatments — photo on top
   (the larger part, portrait 4/5), name and role on a white panel below. */
/* Homepage only: ~30% smaller portraits than the About / profile cards. */
.team-slider { max-width: 756px; margin: 0 auto; }

.team-spot {
  position: relative;
  display: flex;
  flex-direction: column;
  isolation: isolate;
  width: 100%;
  padding: 0;
  background: var(--white);
  border: 1px solid rgba(15, 61, 44, 0.08);
  border-radius: 22px;
  overflow: hidden;
  text-align: left;
  text-decoration: none;
  box-shadow: 0 1px 2px rgba(10, 45, 30, 0.04);
  transition: transform 0.35s cubic-bezier(0.2, 0.7, 0.3, 1),
              box-shadow 0.35s ease,
              border-color 0.35s ease;
}

a.team-spot:hover,
a.team-spot:focus-visible {
  transform: translateY(-4px);
  border-color: rgba(31, 174, 94, 0.28);
  box-shadow: 0 20px 44px rgba(10, 45, 30, 0.13);
}

.team-spot-photo {
  position: relative;
  display: block;
  flex: 0 0 auto;
  width: 100%;
  aspect-ratio: 4 / 5;
  overflow: hidden;
  background: #e8eef0;
}

.team-spot-cutout {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  object-fit: cover;
  object-position: center 18%;
  transform: scale(1.02);
  transition: transform 0.6s cubic-bezier(0.2, 0.7, 0.3, 1);
}

a.team-spot:hover .team-spot-cutout,
.team-spot:hover .team-spot-cutout { transform: scale(1.08); }

.team-spot-meta {
  position: relative;
  z-index: 1;
  display: flex;
  flex-direction: column;
  align-items: flex-start;
  flex: 1 1 auto;
  gap: 8px;
  min-width: 0;
  padding: 20px 22px 22px;
  background: var(--white);
}

.team-spot h3 {
  margin: 0;
  font-size: 19px;
  font-weight: 600;
  letter-spacing: -0.01em;
  line-height: 1.22;
}

.team-spot-role,
.team-spot .doctor-role {
  margin: 0;
  font-size: 14.5px;
  line-height: 1.5;
  color: var(--navy-mid);
  font-weight: 400;
}

.team-spot-btn,
.team-spot .team-member-btn {
  align-self: flex-start;
  margin-top: auto;
}

a.team-spot:hover .team-spot-btn,
a.team-spot:focus-visible .team-spot-btn { background: var(--blue-hover); }

a.team-spot:hover .team-spot-btn > [aria-hidden],
.team-spot:hover .team-member-btn > [aria-hidden] { transform: translateX(3px); }

.team-spot.team-member { gap: 0; padding-bottom: 0; }
.team-spot.team-member .team-spot-photo { margin-bottom: 0; }
.team-spot .team-member-specialty { max-width: none; }
.doctor-grid > .team-spot { height: 100%; }

/* Testimonials — one row of equal-height cards */
.review-columns {
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  gap: 24px;
  align-items: stretch;
}

.review-card {
  display: flex;
  flex-direction: column;
  gap: 16px;
  height: 100%;
  padding: 22px;
  background: var(--white);
  border: 1px solid rgba(31, 83, 54, 0.12);
  border-radius: 8px;
}

.review-top { display: flex; align-items: center; gap: 12px; }

.review-who { display: flex; flex-direction: column; line-height: 1.3; }
.review-who strong { color: var(--navy); font-size: 17px; }
.review-who span { font-size: 13px; }

.review-card > p {
  flex: 1;
  margin: 0;
  font-size: 15px;
  line-height: 1.6;
  font-style: italic;
}

/* Native <details> FAQ — grid 0fr/1fr slide + ::details-content progressive enhancement */
.faq-list {
  max-width: 760px;
  margin: 0 auto;
}

.faq-item {
  background: var(--white);
  border: 1px solid rgba(31, 83, 54, 0.12);
  border-radius: 12px;
  margin: 0 0 10px;
  overflow: hidden;
  box-shadow: none;
}

.faq-item summary {
  list-style: none;
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 20px;
  padding: 18px 20px;
  cursor: pointer;
  color: var(--navy);
  font-weight: 500;
  font-size: 17px;
  line-height: 1.35;
  user-select: none;
}

.faq-item summary::-webkit-details-marker { display: none; }
.faq-item summary::marker { content: ""; }

.faq-item summary:focus { outline: none; }

.faq-item summary:focus-visible {
  outline: 2px solid var(--blue);
  outline-offset: -2px;
}

.faq-item summary:hover { background: #f7f7f1; }

.faq-q {
  display: flex;
  align-items: flex-start;
  gap: 14px;
  min-width: 0;
}

.faq-num {
  flex: 0 0 auto;
  width: 28px;
  height: 28px;
  margin-top: 1px;
  border-radius: 50%;
  background: var(--ice);
  color: var(--blue);
  font-size: 13px;
  font-weight: 600;
  display: grid;
  place-items: center;
  transition: background 0.3s ease, color 0.3s ease;
}

.faq-item[open] .faq-num {
  background: var(--blue);
  color: #fff;
}

.faq-icon {
  position: relative;
  flex: 0 0 auto;
  width: 18px;
  height: 18px;
  color: var(--blue);
}

.faq-icon::before,
.faq-icon::after {
  content: "";
  position: absolute;
  background: currentColor;
  border-radius: 2px;
  transition: transform 0.35s cubic-bezier(0.22, 1, 0.36, 1);
}

.faq-icon::before {
  top: 50%;
  left: 0;
  right: 0;
  height: 2px;
  margin-top: -1px;
}

.faq-icon::after {
  left: 50%;
  top: 0;
  bottom: 0;
  width: 2px;
  margin-left: -1px;
}

.faq-item[open] .faq-icon::after { transform: rotate(90deg); }

.faq-answer {
  margin: 0;
  padding: 0 20px 20px 62px;
  color: var(--navy-mid);
  font-size: 16px;
  line-height: 1.6;
}

@media (prefers-reduced-motion: reduce) {
  .faq-icon::before,
  .faq-icon::after,
  .faq-num { transition: none; }
}

/* Booking panel in the closing CTA */
.booking-panel {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  justify-content: space-between;
  gap: 28px;
  max-width: 820px;
  margin: 0 auto;
  padding: 28px 32px;
  background: var(--white);
  border: 1px solid rgba(31, 83, 54, 0.12);
  border-radius: 12px;
}

.booking-hours { min-width: 240px; }
.booking-hours .eyebrow { margin-bottom: 10px; }

.booking-actions { display: flex; flex-wrap: wrap; gap: 12px; }

.booking-actions .btn {
  min-height: auto;
  padding: 16px 26px;
  border-radius: 4px;
  font-size: 16px;
  font-weight: 500;
  box-shadow: none;
}

.category-grid {
  display: grid;
  grid-template-columns: repeat(4, 1fr);
  gap: 16px;
}

.category-grid-wide { grid-template-columns: repeat(2, 1fr); }

.category-card {
  display: block;
  background: var(--white);
  border-radius: var(--radius);
  padding: 26px;
  box-shadow: 0 10px 30px rgba(18, 42, 27, 0.06);
}

.category-card h3 { font-size: 20px; margin: 0 0 8px; }
.category-card p { margin: 0 0 12px; font-size: 15px; }

/* Clinic feature block */
.clinic-block {
  display: grid;
  grid-template-columns: 0.9fr 1.1fr;
  gap: 32px;
  align-items: center;
  background: var(--white);
  border-radius: 36px;
  overflow: hidden;
  box-shadow: var(--shadow);
}

.clinic-block img { height: 100%; min-height: 320px; object-fit: cover; }
.clinic-block > div { padding: 32px; }

/* Hours banner */
.hours-banner {
  display: grid;
  grid-template-columns: 0.8fr 1.2fr;
  gap: 32px;
  align-items: center;
  background: #e6e9db;
  border-radius: 36px;
  overflow: hidden;
}

.hours-banner img { height: 100%; min-height: 280px; object-fit: cover; }
.hours-banner > div { padding: 32px; }
.hours-banner .hours-row { color: var(--navy); border-color: rgba(31, 83, 54, 0.1); max-width: 320px; }

/* Testimonials (static grid, used when count is small) */
.testimonial-grid {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 18px;
}

.avatar-fallback {
  width: 48px;
  height: 48px;
  border-radius: 50%;
  background: var(--blue);
  color: #fff;
  display: grid;
  place-items: center;
  font-weight: 700;
  font-family: var(--font-display);
  flex: 0 0 auto;
}

.google-card {
  margin-top: 36px;
  background: linear-gradient(135deg, #487858, #1f4a30);
  border-radius: 32px;
  padding: 32px;
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 20px;
  color: #fff;
}

.google-card h2, .google-card p { color: #fff; }

/* Treatments (kezelesek.php) */
.treatment-category { margin-bottom: 56px; scroll-margin-top: 110px; }

.treatment-category-head {
  display: flex;
  align-items: flex-start;
  gap: 18px;
  margin-bottom: 22px;
}

.treatment-category-head .icon-dot { margin-bottom: 0; flex: 0 0 auto; }
.treatment-category-head h2 { margin: 0 0 6px; font-size: 28px; }
.treatment-category-head p { margin: 0; max-width: 620px; }

/* ===========================================================================
   Treatment cards — stacked photo + body, same language as the homepage
   service cards, in a lighter three-up grid on category and treatment pages.
   ======================================================================== */
/* Flex rather than grid so that areas with one or two treatments get a
   centred row instead of a card stranded on the left. */
.treatment-grid {
  display: flex;
  flex-wrap: wrap;
  justify-content: center;
  gap: 20px;
}

.treatment-card {
  position: relative;
  display: flex;
  flex-direction: column;
  isolation: isolate;
  flex: 0 1 calc((100% - 40px) / 3);
  min-height: 0;
  background: var(--white);
  border: 1px solid rgba(31, 83, 54, 0.08);
  border-radius: 22px;
  overflow: hidden;
  text-decoration: none;
  transition: transform 0.35s cubic-bezier(0.2, 0.7, 0.3, 1),
              box-shadow 0.35s ease,
              border-color 0.35s ease;
}

.treatment-card:hover,
.treatment-card:focus-visible {
  transform: translateY(-4px);
  border-color: rgba(72, 120, 88, 0.28);
  box-shadow: 0 20px 44px rgba(18, 42, 27, 0.13);
}

.treatment-card-media {
  position: relative;
  flex: 0 0 auto;
  height: auto;
  aspect-ratio: 16 / 10;
  z-index: 0;
  overflow: hidden;
}

.treatment-card-media img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  transform: scale(1.04);
  transition: transform 0.6s cubic-bezier(0.2, 0.7, 0.3, 1);
}

.treatment-card:hover .treatment-card-media img { transform: scale(1.1); }

.treatment-card-wash {
  position: absolute;
  inset: 0;
  background: linear-gradient(180deg, rgba(11, 38, 25, 0) 55%, rgba(11, 38, 25, 0.16) 100%);
}

.treatment-card-body {
  position: relative;
  z-index: 1;
  display: flex;
  flex-direction: column;
  gap: 6px;
  flex: 1 1 auto;
  margin-top: 0;
  padding: 20px 22px 22px;
  background: var(--white);
}

.treatment-card-title {
  font-family: var(--font-display);
  font-size: 18px;
  font-weight: 600;
  line-height: 1.24;
  letter-spacing: -0.01em;
  color: var(--navy);
}

.treatment-card-tag {
  font-size: 14.5px;
  line-height: 1.45;
  color: var(--navy-mid);
}

.treatment-card-btn {
  align-self: flex-start;
  margin-top: 10px;
}

.treatment-card:hover .treatment-card-btn,
.treatment-card:focus-visible .treatment-card-btn { background: var(--blue-hover); }

.treatment-card:hover .treatment-card-btn > [aria-hidden] { transform: translateX(3px); }


/* ===========================================================================
   About page (rolunk.php) — hero, facts strip, story, values, team cards
   ======================================================================== */
.about-hero { padding: 28px 0 8px; }

.about-hero-grid {
  display: grid;
  grid-template-columns: 1.05fr 0.95fr;
  gap: 48px;
  align-items: center;
}

.about-hero-copy h1 {
  margin: 18px 0 0;
  font-size: clamp(34px, 4.2vw, 52px);
  letter-spacing: -0.02em;
  color: var(--brand-ink);
}

.about-hero h1 .brand-dent {
  color: inherit;
}

.about-hero-kicker {
  display: block;
  margin-bottom: 8px;
  font-size: 0.4em;
  font-weight: 500;
  letter-spacing: -0.02em;
  color: var(--navy-mid);
}

.about-hero h1 .brand-sub {
  display: block;
  margin-top: 0.14em;
  font-size: clamp(20px, 2.4vw, 28px);
  font-weight: 600;
  letter-spacing: -0.02em;
  color: var(--blue);
}

.about-hero-lede {
  margin: 22px 0 0;
  max-width: 520px;
  font-size: 18px;
  line-height: 1.65;
}

.about-hero .actions { margin-top: 30px; display: flex; flex-wrap: wrap; gap: 12px; }

.about-hero-media { position: relative; }

.about-hero-media img {
  width: 100%;
  aspect-ratio: 4 / 3.2;
  object-fit: cover;
  border-radius: 28px;
  box-shadow: 0 26px 60px rgba(18, 42, 27, 0.16);
}

.about-hero-badge {
  position: absolute;
  left: -18px;
  bottom: 26px;
  display: grid;
  gap: 2px;
  padding: 16px 22px;
  background: var(--white);
  border-radius: 18px;
  box-shadow: 0 14px 34px rgba(18, 42, 27, 0.14);
}

.about-hero-badge strong {
  font-family: var(--font-display);
  font-size: 26px;
  letter-spacing: -0.01em;
  color: var(--blue);
}

.about-hero-badge span { max-width: 130px; font-size: 13px; line-height: 1.35; }

/* Facts strip */
.about-facts-section { padding: 44px 0 0; }

.about-facts {
  display: grid;
  grid-template-columns: repeat(4, minmax(0, 1fr));
  gap: 0;
  margin: 0;
  margin-bottom: 24px;
  padding: 26px 28px;
  list-style: none;
  background: var(--bg-2);
  border: 1px solid rgba(31, 83, 54, 0.07);
  border-radius: 24px;
}

.about-facts li {
  display: grid;
  gap: 6px;
  padding: 0 24px;
  border-left: 2px solid rgba(72, 120, 88, 0.22);
}

.about-facts li:first-child { padding-left: 0; border-left: 0; }

.about-facts strong {
  font-family: var(--font-display);
  font-size: 30px;
  letter-spacing: -0.01em;
  color: var(--navy);
}

.about-facts span { font-size: 14px; line-height: 1.4; }

/* Story */
.about-story {
  display: grid;
  grid-template-columns: 1.05fr 0.95fr;
  gap: 48px;
  align-items: start;
}

.about-story-copy h2 {
  margin: 0 0 18px;
  font-size: clamp(28px, 3.2vw, 40px);
  letter-spacing: -0.015em;
}

.about-story-copy p { margin: 0 0 16px; font-size: 17px; line-height: 1.75; }
.about-story-copy p:last-child { margin-bottom: 0; }

.about-story-side { display: grid; gap: 24px; }
.about-story-photo { margin: 0; }

.about-story-photo img {
  width: 100%;
  aspect-ratio: 4 / 3;
  object-fit: cover;
  border-radius: 24px;
}

.about-story-list {
  padding: 24px 26px;
  background: var(--bg-2);
  border: 1px solid rgba(31, 83, 54, 0.07);
  border-radius: 22px;
}

.about-story-list h3 { margin: 0; font-size: 18px; }
.about-story-list .check-list li { font-size: 15.5px; }

/* Values */
.value-grid {
  display: grid;
  grid-template-columns: repeat(4, minmax(0, 1fr));
  gap: 20px;
}

.value-card {
  padding: 28px 26px;
  background: var(--white);
  border: 1px solid rgba(31, 83, 54, 0.08);
  border-radius: 22px;
  box-shadow: 0 8px 22px rgba(18, 42, 27, 0.05);
}

.value-icon {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 46px;
  height: 46px;
  margin-bottom: 18px;
  border-radius: 14px;
  background: var(--ice);
  color: var(--blue);
}

.value-icon svg { width: 24px; height: 24px; }
.value-card .eyebrow { margin-bottom: 8px; }
.value-card h3 { margin: 0 0 8px; font-size: 20px; }
.value-card p { margin: 0; font-size: 15.5px; line-height: 1.6; }

/* Team cards — the circular doctor frame plus area, specialty and a real button */
.team-member { gap: 12px; }
.team-member h3 { margin: 0; }
.team-member h3 a:hover { color: var(--blue); }

.team-member-areas-shell {
  position: relative;
  width: 100%;
  max-width: 100%;
  min-width: 0;
  align-self: stretch;
}

.team-member-areas-btn { display: none; }

.team-member-areas {
  display: flex;
  flex-wrap: nowrap;
  align-items: center;
  gap: 8px;
  min-width: 0;
  max-width: 100%;
  overflow-x: auto;
  overscroll-behavior-x: contain;
  scroll-snap-type: x proximity;
  scrollbar-width: none;
  -webkit-overflow-scrolling: touch;
}

.team-member-areas::-webkit-scrollbar { display: none; }

.team-member-areas .team-member-area {
  flex: 0 0 auto;
  scroll-snap-align: start;
  white-space: nowrap;
}

.team-member-areas-shell:not(.is-static) .team-member-areas {
  padding-inline: 32px;
  scroll-padding-inline: 32px;
  mask-image: linear-gradient(90deg, transparent 0, #000 28px, #000 calc(100% - 28px), transparent);
}

.team-member-areas-shell:not(.is-static) .team-member-areas-btn {
  display: grid;
  place-items: center;
  position: absolute;
  top: 50%;
  z-index: 2;
  width: 28px;
  height: 28px;
  font-size: 16px;
  transform: translateY(-50%);
  box-shadow: 0 4px 14px rgba(31, 83, 54, 0.12);
}

.team-member-areas-shell:not(.is-static) [data-chip-prev] { left: 0; }
.team-member-areas-shell:not(.is-static) [data-chip-next] { right: 0; }

.team-member-area {
  display: inline-flex;
  align-items: center;
  padding: 5px 13px;
  border-radius: 999px;
  background: var(--ice);
  border: 1px solid transparent;
  color: var(--blue);
  font-size: 12.5px;
  font-weight: 600;
  letter-spacing: 0.02em;
  text-transform: uppercase;
  text-decoration: none;
  transition: border-color 0.2s ease, background 0.2s ease, box-shadow 0.2s ease;
}

a.team-member-area:hover,
a.team-member-area:focus-visible {
  background: var(--white);
  border-color: rgba(72, 120, 88, 0.45);
  box-shadow: 0 4px 12px rgba(18, 42, 27, 0.08);
}

.team-member-specialty {
  margin: 0;
  max-width: 300px;
  font-size: 14.5px;
  line-height: 1.5;
  color: var(--navy-mid);
}

.team-member-btn { margin-top: 4px; }

/* First visit — four numbered cards plus the acute note */
.visit-steps {
  display: grid;
  grid-template-columns: repeat(4, minmax(0, 1fr));
  gap: 20px;
  margin: 0;
  padding: 0;
  list-style: none;
}

.visit-step {
  padding: 28px 24px;
  background: var(--white);
  border: 1px solid rgba(31, 83, 54, 0.08);
  border-radius: 22px;
}

.visit-step-num {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 34px;
  height: 34px;
  margin-bottom: 16px;
  border-radius: 12px;
  background: var(--blue);
  color: var(--white);
  font-weight: 600;
  font-size: 15px;
}

.visit-step h3 { margin: 0 0 8px; font-size: 18.5px; }
.visit-step p { margin: 0; font-size: 15px; line-height: 1.6; }

.visit-footer {
  margin-top: 32px;
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  justify-content: space-between;
  gap: 22px;
}

.visit-acute {
  display: flex;
  align-items: flex-start;
  gap: 10px;
  margin: 0;
  max-width: 540px;
  font-size: 15px;
  line-height: 1.6;
}

.visit-acute svg { flex: 0 0 auto; width: 20px; height: 20px; margin-top: 2px; color: var(--blue); }
.visit-footer .actions { display: flex; flex-wrap: wrap; gap: 12px; }

/* The practice — photo, copy and the address/hours/phone facts */
.about-clinic {
  display: grid;
  grid-template-columns: 0.95fr 1.05fr;
  gap: 48px;
  align-items: center;
}

.about-clinic-photo { margin: 0; }

.about-clinic-photo img {
  width: 100%;
  aspect-ratio: 4 / 3.4;
  object-fit: cover;
  border-radius: 28px;
}

.about-clinic-copy h2 {
  margin: 0 0 16px;
  font-size: clamp(28px, 3.2vw, 40px);
  letter-spacing: -0.015em;
}

.about-clinic-copy > p { margin: 0 0 26px; font-size: 17px; line-height: 1.7; }

.about-clinic-facts { display: grid; gap: 20px; margin: 0 0 28px; }

.about-clinic-facts dt {
  display: flex;
  align-items: center;
  gap: 8px;
  font-size: 12.5px;
  font-weight: 600;
  letter-spacing: 0.02em;
  text-transform: uppercase;
  color: var(--navy-mid);
}

.about-clinic-facts dt svg { width: 17px; height: 17px; color: var(--blue); }
.about-clinic-facts dd { margin: 7px 0 0; font-size: 16px; line-height: 1.55; color: var(--navy); }

/* Address and phone are real links, so they carry a visible affordance. */
.about-clinic-facts dd a {
  color: var(--navy);
  font-weight: 500;
  text-decoration: underline;
  text-decoration-color: rgba(72, 120, 88, 0.4);
  text-decoration-thickness: 1px;
  text-underline-offset: 3px;
}

.about-clinic-facts dd a:hover { color: var(--blue); text-decoration-color: currentColor; }

.about-clinic-hours {
  display: flex;
  justify-content: space-between;
  gap: 16px;
  max-width: 260px;
  padding: 5px 0;
  border-bottom: 1px solid rgba(31, 83, 54, 0.08);
}

.about-clinic-hours:last-child { border-bottom: 0; }
.about-clinic .actions { display: flex; flex-wrap: wrap; gap: 12px; }

/* ===========================================================================
   Colleague profile (csapat.php)
   ======================================================================== */
.profile-hero { padding: 24px 0 8px; }

.profile-hero-grid {
  display: grid;
  grid-template-columns: 1.05fr 0.95fr;
  gap: 48px;
  align-items: center;
}

.profile-hero-tags { display: flex; align-items: center; flex-wrap: wrap; gap: 8px; }

.profile-areas-section { padding: 32px 0 0; }

.profile-areas-shell { position: relative; }

.profile-areas-btn { display: none; }

.profile-areas {
  display: flex;
  flex-wrap: nowrap;
  align-items: center;
  gap: 8px;
  overflow-x: auto;
  overscroll-behavior-x: contain;
  scroll-snap-type: x proximity;
  scrollbar-width: none;
  -webkit-overflow-scrolling: touch;
}

.profile-areas::-webkit-scrollbar { display: none; }

.profile-areas .detail-hero-parent {
  flex: 0 0 auto;
  scroll-snap-align: start;
  white-space: nowrap;
}

.profile-hero-copy h1 {
  margin: 20px 0 0;
  font-size: clamp(32px, 4.2vw, 50px);
  letter-spacing: -0.02em;
}

.profile-role { margin: 12px 0 0; font-size: 17px; font-weight: 600; color: var(--blue); }
.profile-specialty { margin: 6px 0 0; font-size: 16px; }

.profile-lede {
  margin: 22px 0 0;
  max-width: 560px;
  font-size: 17.5px;
  line-height: 1.7;
}

.profile-hero .actions { margin-top: 28px; display: flex; flex-wrap: wrap; gap: 12px; }
.profile-hero-media { display: flex; justify-content: center; }
.profile-frame { max-width: 360px; }
.profile-photo {
  width: min(100%, 340px);
  aspect-ratio: 4 / 5;
  border-radius: 28px;
}

.profile-facts-section { padding: 40px 0 0; }
.profile-facts-section--after-areas { padding-top: 14px; }

.profile-facts {
  display: grid;
  grid-template-columns: repeat(4, minmax(0, 1fr));
  margin: 0;
  margin-bottom: 20px;
  padding: 26px 28px;
  background: var(--bg-2);
  border: 1px solid rgba(31, 83, 54, 0.07);
  border-radius: 24px;
}

.profile-fact { padding: 0 24px; border-left: 2px solid rgba(72, 120, 88, 0.22); }
.profile-fact:first-child { padding-left: 0; border-left: 0; }

.profile-facts dt {
  font-size: 12.5px;
  font-weight: 600;
  letter-spacing: 0.02em;
  text-transform: uppercase;
  color: var(--navy-mid);
}

.profile-facts dd { margin: 7px 0 0; font-size: 15.5px; font-weight: 500; line-height: 1.5; color: var(--navy); }

.profile-body-section .eyebrow { margin-bottom: 4px; }

/* Personal motto on a navy band */
.profile-quote { position: relative; padding: 76px 0; background: var(--navy); overflow: hidden; }

.profile-quote::after {
  content: "";
  position: absolute;
  inset: 0;
  background: linear-gradient(180deg, rgba(11, 38, 25, 0.55) 0%, rgba(11, 38, 25, 0.8) 100%);
}

.profile-quote-box {
  position: relative;
  z-index: 1;
  max-width: 760px;
  margin: 0 auto;
  text-align: center;
  color: var(--white);
}

.profile-quote-mark { display: inline-flex; color: rgba(255, 255, 255, 0.45); }
.profile-quote-mark svg { width: 34px; height: 34px; }

.profile-quote-box p {
  margin: 12px 0 0;
  font-family: var(--font-display);
  font-size: clamp(20px, 2.6vw, 28px);
  line-height: 1.45;
  letter-spacing: -0.01em;
}

.profile-quote-box footer { margin-top: 22px; display: grid; gap: 2px; font-size: 14.5px; color: rgba(255, 255, 255, 0.78); }
.profile-quote-box footer strong { color: var(--white); }

/* Career timeline */
.timeline { max-width: 760px; margin: 0 auto; padding: 0; list-style: none; }

.timeline-item {
  position: relative;
  padding: 0 0 26px 34px;
  border-left: 2px solid rgba(72, 120, 88, 0.25);
}

.timeline-item:last-child { padding-bottom: 0; border-left-color: transparent; }

.timeline-item::before {
  content: "";
  position: absolute;
  left: -7px;
  top: 3px;
  width: 12px;
  height: 12px;
  border-radius: 50%;
  background: var(--blue);
  box-shadow: 0 0 0 4px rgba(72, 120, 88, 0.15);
}

.timeline-marker {
  display: block;
  font-size: 13px;
  font-weight: 600;
  letter-spacing: 0.02em;
  text-transform: uppercase;
  color: var(--blue);
}

.timeline-item p { margin: 6px 0 0; font-size: 16.5px; line-height: 1.6; }

.doctor-grid-narrow {
  max-width: 720px;
  margin: 0 auto;
  grid-template-columns: repeat(2, minmax(0, 1fr));
}

.check-list { list-style: none; margin: 16px 0 0; padding: 0; display: grid; gap: 10px; }
.check-list li { position: relative; padding-left: 26px; color: var(--navy); font-weight: 500; }
.check-list li::before { content: "✓"; position: absolute; left: 0; color: var(--blue); font-weight: 700; }

/* Legal documents */
.page-hero-legal p { max-width: 40rem; }
.legal-section { padding-top: 8px; }
.legal-doc {
  max-width: 46rem;
  margin: 0;
}
.legal-doc h2 {
  margin: 36px 0 12px;
  padding-top: 20px;
  border-top: 1px solid var(--line);
  font-size: 22px;
}
.legal-doc > h2:first-of-type { margin-top: 8px; }
.legal-doc h3 { margin: 22px 0 8px; font-size: 18px; }
.legal-doc h4 { margin: 16px 0 8px; font-size: 16px; }
.legal-doc p { margin: 0 0 12px; font-size: 16px; line-height: 1.65; }
.legal-doc table {
  width: 100%;
  border-collapse: collapse;
  font-size: 14px;
  margin: 0 0 20px;
}
.legal-doc th,
.legal-doc td {
  padding: 10px 12px;
  text-align: left;
  vertical-align: top;
  border-bottom: 1px solid var(--line);
}
.legal-doc th {
  color: var(--navy);
  font-size: 12px;
  letter-spacing: 0.04em;
  text-transform: uppercase;
}
.legal-doc ul,
.legal-doc ol {
  margin: 0 0 16px;
  padding-left: 1.25rem;
}
.legal-doc li { margin: 0 0 8px; font-size: 16px; line-height: 1.55; }
.legal-doc a {
  color: var(--blue);
  text-decoration: underline;
  text-underline-offset: 2px;
}
.legal-doc em { color: var(--navy-mid); }
.legal-doc code {
  font-size: 0.92em;
  background: var(--ice);
  padding: 0.1em 0.35em;
  border-radius: 4px;
}
.legal-table { overflow-x: auto; margin: 0 0 20px; }
.legal-table table {
  width: 100%;
  border-collapse: collapse;
  font-size: 14px;
}
.legal-table th,
.legal-table td {
  padding: 10px 12px;
  text-align: left;
  vertical-align: top;
  border-bottom: 1px solid var(--line);
}
.legal-table th {
  color: var(--navy);
  font-size: 12px;
  letter-spacing: 0.04em;
  text-transform: uppercase;
}

.plain-list { margin: 0 0 20px; padding-left: 20px; }
.plain-list li { margin-bottom: 8px; }

.hours-note { font-size: 13px; opacity: 0.7; margin-top: 8px; }

.map-embed { border-radius: 32px; overflow: hidden; height: 360px; box-shadow: var(--shadow); }
.map-embed iframe { width: 100%; height: 100%; border: 0; }

/* Features */
.feature-grid { grid-template-columns: repeat(3, 1fr); }

.feature-card {
  background: var(--white);
  border-radius: 32px;
  overflow: hidden;
  box-shadow: var(--shadow);
}

.feature-card img {
  width: 100%;
  height: 220px;
  object-fit: cover;
}

.feature-card div { padding: 22px 24px 28px; }

/* Tile grid (merged services + treatments page, price list) */
.tile-grid {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 16px;
}

.tile-card {
  background: var(--white);
  border-radius: 22px;
  padding: 22px;
  box-shadow: 0 8px 22px rgba(18, 42, 27, 0.05);
}

.tile-card h3 { font-size: 18px; margin: 0 0 8px; }
.tile-card p { font-size: 14px; margin: 0 0 14px; }

/* Prices table (grouped, one card per price-list category/subcategory) */
.prices-intro { max-width: 720px; font-size: 16px; margin: 0 0 28px; }

.price-groups {
  display: grid;
  grid-template-columns: 1fr;
  gap: 20px;
}

.price-group {
  background: var(--white);
  border-radius: 24px;
  padding: 22px 22px 8px;
  box-shadow: 0 10px 30px rgba(18, 42, 27, 0.06);
  align-self: start;
}

.price-group-head { margin-bottom: 6px; }
.price-group-head h2 { font-size: 19px; margin: 0; }
.price-group-sub { display: block; font-size: 13px; color: var(--blue); font-weight: 600; margin-top: 2px; }

.prices-table { width: 100%; border-collapse: collapse; }

.prices-table td {
  padding: 12px 4px;
  border-bottom: 1px solid var(--ice);
  font-size: 14.5px;
  vertical-align: top;
}

.prices-table tr:last-child td { border-bottom: 0; }
.prices-table-price {
  text-align: right;
  color: var(--navy);
  font-weight: 700;
  white-space: nowrap;
  padding-left: 14px;
}

/* Testimonials */
.marquee {
  overflow: hidden;
  mask-image: linear-gradient(90deg, transparent, #000 6%, #000 94%, transparent);
}

.marquee-track {
  display: flex;
  gap: 16px;
  width: max-content;
  animation: scroll 48s linear infinite;
}

.quote {
  width: min(360px, calc(100vw - 60px));
  background: var(--white);
  border-radius: 24px;
  padding: 22px;
  box-shadow: 0 10px 28px rgba(18, 42, 27, 0.07);
}

.quote-top {
  display: flex;
  align-items: center;
  gap: 12px;
  margin-bottom: 12px;
}

.quote-top img {
  width: 48px;
  height: 48px;
  border-radius: 50%;
  object-fit: cover;
}

.quote-top strong { display: block; color: var(--navy); }
.quote-top span { font-size: 13px; color: var(--navy-mid); }

@keyframes scroll {
  from { transform: translateX(0); }
  to { transform: translateX(-50%); }
}

/* ===========================================================================
   Blog — cards (index, "more articles", homepage teaser)
   ======================================================================== */
.blog-grid { grid-template-columns: repeat(3, 1fr); }

.blog-card {
  display: flex;
  flex-direction: column;
  background: var(--white);
  border: 1px solid rgba(31, 83, 54, 0.08);
  border-radius: 22px;
  overflow: hidden;
  transition: transform 0.25s ease, box-shadow 0.25s ease, border-color 0.25s ease;
}

.blog-card:hover {
  transform: translateY(-3px);
  border-color: rgba(72, 120, 88, 0.35);
  box-shadow: 0 18px 40px rgba(18, 42, 27, 0.1);
}

.blog-card.is-hidden { display: none; }

.blog-card-media { display: block; aspect-ratio: 16 / 10; overflow: hidden; }

.blog-card-media img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  transition: transform 0.5s ease;
}

.blog-card:hover .blog-card-media img { transform: scale(1.03); }

.blog-card-body {
  display: flex;
  flex-direction: column;
  gap: 12px;
  flex: 1;
  padding: 20px 22px 22px;
}

.blog-card-body h3 {
  margin: 0;
  font-size: 20px;
  font-weight: 600;
  letter-spacing: -0.01em;
  line-height: 1.28;
}

.blog-card-body h3 a:hover { color: var(--blue); }
.blog-card-body p { margin: 0; flex: 1; font-size: 15px; line-height: 1.55; }
.blog-card-btn { align-self: flex-start; margin-top: 4px; }
.blog-card-btn:hover { background: var(--blue-hover); }
.blog-card-btn:hover > [aria-hidden] { transform: translateX(3px); }

/* topic · date · reading time */
.blog-card-meta {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 8px 10px;
  font-size: 13px;
  color: var(--navy-mid);
}

/* date · reading time stay together, so a wrap never starts with a dot */
.blog-card-meta-line { display: inline-flex; flex-wrap: wrap; align-items: center; gap: 6px 10px; white-space: nowrap; }
.blog-card-meta-line > * + *::before { content: "·"; margin-right: 10px; opacity: 0.45; }

.blog-topic {
  display: inline-block;
  padding: 4px 10px;
  border-radius: 999px;
  background: var(--ice);
  color: var(--blue);
  font-size: 12.5px;
  font-weight: 600;
}

a.blog-topic:hover { background: var(--card); }

/* Featured (newest) article on the blog index */
.blog-featured-section { padding: 16px 0 72px; }
.blog-list-section { padding-top: 84px; }

.blog-featured {
  display: grid;
  grid-template-columns: 1.05fr 0.95fr;
  gap: 40px;
  align-items: center;
  background: var(--bg-2);
  border: 1px solid rgba(31, 83, 54, 0.07);
  border-radius: 28px;
  padding: 24px;
}

.blog-featured-media { display: block; aspect-ratio: 4 / 3; overflow: hidden; border-radius: 20px; }
.blog-featured-media img { width: 100%; height: 100%; object-fit: cover; }
.blog-featured-body { display: flex; flex-direction: column; align-items: flex-start; gap: 14px; padding: 8px 12px; }
.blog-featured-body h2 { margin: 0; font-size: clamp(26px, 3vw, 38px); letter-spacing: -0.015em; }
.blog-featured-body h2 a:hover { color: var(--blue); }
.blog-featured-body p { margin: 0; font-size: 16.5px; line-height: 1.6; max-width: 520px; }
.blog-featured-body .btn { margin-top: 6px; }

/* ===========================================================================
   Blog — article page
   ======================================================================== */
.post-hero { padding: 20px 0 0; }

.post-hero-inner {
  max-width: 840px;
  text-align: center;
}

.post-meta { justify-content: center; }

.post-hero h1 {
  margin: 18px 0 0;
  font-size: clamp(32px, 4.4vw, 52px);
  letter-spacing: -0.02em;
}

.post-lede {
  margin: 18px auto 0;
  max-width: 700px;
  font-size: 18.5px;
  line-height: 1.6;
  color: var(--navy-mid);
}

.post-lede-more { margin-top: 12px; }

.post-author {
  display: inline-flex;
  align-items: center;
  gap: 12px;
  margin-top: 26px;
  text-align: left;
}

.post-author-avatar {
  width: 44px;
  height: 44px;
  border-radius: 50%;
  object-fit: cover;
  background: var(--white);
  border: 1px solid rgba(31, 83, 54, 0.1);
}

.post-author-label { display: block; font-size: 12px; color: var(--navy-mid); opacity: 0.75; }
.post-author strong { display: block; font-size: 15px; color: var(--navy); }
.post-author-role { display: block; font-size: 13px; color: var(--navy-mid); }

/* Article banner: photo keeps its own ratio, never zoom-cropped. */
.post-cover {
  position: relative;
  z-index: 1;
  width: fit-content;
  max-width: min(100%, 920px);
  margin: 28px auto 0;
  border-radius: 20px;
  overflow: hidden;
  background: var(--bg-2);
  box-shadow: 0 16px 40px rgba(18, 42, 27, 0.1);
}

.post-cover img {
  display: block;
  width: auto;
  max-width: 100%;
  height: auto;
  max-height: 480px;
  object-fit: contain;
  object-position: center;
}

.post-body-section { padding-top: 56px; }
.post-article [id] { scroll-margin-top: calc(var(--header) + 24px); }

/* (.prose-body sets the generic long-form sizes later in the file; the extra
   class here lets the article variant win.) */
.post-article.prose-body h2 { margin: 44px 0 14px; font-size: clamp(24px, 2.6vw, 30px); }
.post-article.prose-body h3 { margin: 30px 0 10px; font-size: 20px; }
.post-article.prose-body > h2:first-of-type { margin-top: 36px; }
.post-article.prose-body p { font-size: 17px; line-height: 1.75; }
.post-article a:not(.btn) { color: var(--blue); font-weight: 500; text-decoration: underline; text-decoration-color: rgba(72, 120, 88, 0.35); text-underline-offset: 3px; }
.post-article a:not(.btn):hover { text-decoration-color: currentColor; }
.post-article .article-list li { font-size: 16.5px; line-height: 1.65; }
.post-article .article-list { margin-bottom: 22px; }
.post-article .step-list { margin-bottom: 28px; }

.post-disclaimer {
  margin: 40px 0 0;
  padding-top: 18px;
  border-top: 1px solid rgba(31, 83, 54, 0.1);
  font-size: 13.5px !important;
  line-height: 1.55 !important;
  opacity: 0.8;
}

/* Table of contents (auto-generated from the h2 blocks) */
.article-toc {
  margin: 0 0 8px;
  padding: 18px 22px;
  background: var(--bg-2);
  border: 1px solid rgba(31, 83, 54, 0.07);
  border-radius: 18px;
}

.article-toc-title {
  margin: 0 0 8px !important;
  font-size: 13px !important;
  font-weight: 600;
  letter-spacing: 0.02em;
  text-transform: uppercase;
  color: var(--navy-mid);
}

.article-toc ol {
  margin: 0;
  padding: 0;
  list-style: none;
  counter-reset: toc;
  columns: 2;
  column-gap: 24px;
}

.article-toc li {
  counter-increment: toc;
  break-inside: avoid;
  padding: 4px 0;
  font-size: 15px;
  line-height: 1.4;
}

.article-toc li::before {
  content: counter(toc) ".";
  margin-right: 8px;
  color: var(--blue);
  font-weight: 600;
}

.article-toc a { color: var(--navy) !important; font-weight: 500 !important; text-decoration: none !important; }
.article-toc a:hover { color: var(--blue) !important; }

/* Ordered editorial list */
.article-list-ordered { counter-reset: al; }
.article-list-ordered li { counter-increment: al; padding-left: 38px; }

.article-list-ordered li::before {
  content: counter(al);
  left: 0;
  top: 0.15em;
  width: 24px;
  height: 24px;
  border-radius: 50%;
  background: var(--ice);
  color: var(--blue);
  box-shadow: none;
  font-size: 12.5px;
  font-weight: 600;
  display: grid;
  place-items: center;
}

/* Pull quote */
.article blockquote {
  margin: 28px 0;
  padding: 6px 0 6px 22px;
  border-left: 3px solid var(--blue);
}

.article blockquote p {
  margin: 0 !important;
  font-family: var(--font-display);
  font-size: 20px !important;
  line-height: 1.45 !important;
  color: var(--navy);
}

.article blockquote cite { display: block; margin-top: 8px; font-size: 14px; font-style: normal; color: var(--navy-mid); }

/* Callouts */
.callout {
  margin: 26px 0;
  padding: 20px 22px;
  border-radius: 18px;
  border: 1px solid rgba(31, 83, 54, 0.08);
  border-left: 4px solid var(--blue);
  background: var(--bg-2);
}

.callout-tip { border-left-color: var(--blue); background: #eff1e5; }
.callout-info { border-left-color: var(--navy-mid); background: var(--ice); }
.callout-warning { border-left-color: #d98a12; background: #fff7e8; }
.callout-summary { border-left-color: var(--blue); background: var(--white); box-shadow: 0 10px 30px rgba(18, 42, 27, 0.06); }

.callout-title {
  display: flex;
  align-items: center;
  gap: 9px;
  margin: 0 0 8px !important;
  font-family: var(--font-display);
  font-size: 16.5px !important;
  font-weight: 600;
  color: var(--navy);
  line-height: 1.3 !important;
}

.callout-title svg { width: 19px; height: 19px; flex: 0 0 auto; color: var(--blue); }
.callout-warning .callout-title svg { color: #d98a12; }
.callout-info .callout-title svg { color: var(--navy-mid); }
.callout p:not(.callout-title) { margin: 0 !important; font-size: 15.5px !important; line-height: 1.65 !important; }
.callout ul { margin: 6px 0 0; padding-left: 22px; }
.callout li { margin: 6px 0; font-size: 15.5px; line-height: 1.6; }
.callout li::marker { color: var(--blue); }

/* In-article call-to-action */
.article-cta {
  display: grid;
  grid-template-columns: minmax(0, 1fr) auto;
  gap: 24px 32px;
  align-items: center;
  margin: 36px 0;
  padding: 28px 30px;
  border-radius: 24px;
  background: linear-gradient(135deg, #487858, #1f4a30);
  color: #fff;
  box-shadow: 0 18px 40px rgba(18, 114, 63, 0.22);
}

.article-cta-title {
  margin: 0 0 6px !important;
  font-family: var(--font-display);
  font-size: 21px !important;
  font-weight: 600;
  line-height: 1.3 !important;
  color: #fff;
}

.article-cta-copy p:not(.article-cta-title) { margin: 0 !important; font-size: 15.5px !important; line-height: 1.6 !important; color: rgba(255, 255, 255, 0.92); }
.article-cta a:not(.btn) { color: #fff !important; }
.article-cta-actions { display: flex; flex-direction: column; gap: 10px; min-width: 200px; }
.article-cta-actions .btn { justify-content: center; }
.article-cta .btn-white:hover { background: var(--ice); }

.btn-outline-light {
  background: transparent;
  color: #fff;
  box-shadow: inset 0 0 0 1.5px rgba(255, 255, 255, 0.55);
}

.btn-outline-light:hover { background: rgba(255, 255, 255, 0.12); }

/* Figure */
.article-figure { margin: 28px 0; }
.article-figure img { width: 100%; border-radius: 18px; }
.article-figure figcaption { margin-top: 10px; font-size: 14px; color: var(--navy-mid); text-align: center; }

/* FAQ block inside an article */
.article-faq { margin-top: 44px; }
.article-faq .faq-list { max-width: none; }
.article-faq .faq-item summary { font-size: 16.5px; }
.article.post-article .faq-answer { margin: 0; font-size: 15.5px; line-height: 1.6; }
.article.post-article .step-body p { margin: 0; font-size: 16px; line-height: 1.6; }
.article.post-article .step-body h4 { margin: 3px 0 4px; }

/* "Questions?" side panel */
.post-aside-text { margin: 0; font-size: 15px; line-height: 1.6; }
.post-aside-phone { width: 100%; justify-content: center; margin-top: 10px; }

.post-aside-label {
  margin: 24px 0 6px;
  font-size: 12.5px;
  font-weight: 600;
  letter-spacing: 0.02em;
  text-transform: uppercase;
  color: var(--navy-mid);
  opacity: 0.8;
}

.post-aside-links { margin: 0; padding: 0; list-style: none; }

.post-aside-links a {
  display: flex;
  justify-content: space-between;
  gap: 10px;
  padding: 10px 0;
  border-bottom: 1px solid rgba(31, 83, 54, 0.1);
  font-size: 15px;
  font-weight: 500;
  color: var(--navy);
}

.post-aside-links li:last-child a { border-bottom: 0; }
.post-aside-links a::after { content: "→"; color: var(--blue); }
.post-aside-links a:hover { color: var(--blue); }
.read { font-weight: 600; color: var(--blue); display: inline-flex; align-items: center; gap: 6px; }
.read-arrow { transition: transform 0.2s ease; }
a.blog-card:hover .read-arrow { transform: translate(3px, -3px); }

/* FAQ (legacy two-column shell — unused after native accordion) */
.faq-layout {
  display: grid;
  grid-template-columns: 0.9fr 1.1fr;
  gap: 40px;
  align-items: start;
}

/* Homepage peek carousels — 3 cards on desktop; a sliver of the next
   card on tablet/phone so it is obvious the row continues. */
.peek-slider {
  --peek-cols: 3;
  --peek-gap: 24px;
}

.peek-track {
  display: flex;
  gap: var(--peek-gap);
  overflow-x: auto;
  /* Room for the hover lift + drop shadow. overflow-x:auto otherwise
     forces overflow-y to clip as well (CSS overflow pairing). */
  padding: 12px 10px 36px;
  margin: -12px -10px -36px;
  overscroll-behavior-x: contain;
  scroll-snap-type: x mandatory;
  scroll-padding-inline: 0;
  scrollbar-width: none;
  -webkit-overflow-scrolling: touch;
}

.peek-track::-webkit-scrollbar { display: none; }

.peek-slide {
  flex: 0 0 calc((100% - (var(--peek-gap) * (var(--peek-cols) - 1))) / var(--peek-cols));
  min-width: 0;
  scroll-snap-align: start;
  display: flex;
  overflow: visible;
}

.peek-slide:hover,
.peek-slide:focus-within { z-index: 2; }

.peek-slide > .doctor-card,
.peek-slide > .team-spot,
.peek-slide > .review-card,
.peek-slide > .blog-card {
  width: 100%;
  height: 100%;
}

.peek-bar {
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 14px;
  margin-top: 18px;
}

.peek-slider.is-static .peek-bar { display: none; }
.peek-slider.is-static .peek-track { overflow: visible; }

.peek-btn {
  width: 40px;
  height: 40px;
  border: 1px solid var(--line);
  background: var(--white);
  color: var(--navy);
  border-radius: 50%;
  cursor: pointer;
  font-size: 22px;
  line-height: 1;
}

.peek-btn:hover { border-color: var(--blue); color: var(--blue); }
.peek-btn:disabled { opacity: 0.35; cursor: default; }

.peek-dots { display: flex; gap: 8px; }

.peek-dot {
  width: 8px;
  height: 8px;
  padding: 0;
  border: 0;
  border-radius: 50%;
  background: var(--line);
  cursor: pointer;
}

.peek-dot.is-active { background: var(--blue); }

/* Categorised FAQ: tabs on the homepage, jump chips on /gyik. */
.faq-tabs { max-width: 760px; margin: 0 auto; }

.faq-tablist,
.faq-jump {
  display: flex;
  flex-wrap: wrap;
  gap: 8px;
  justify-content: center;
  margin: 0 0 22px;
}

.faq-tab,
.faq-jump-link {
  border: 1px solid rgba(15, 61, 44, 0.14);
  background: var(--white);
  color: var(--navy);
  border-radius: 999px;
  padding: 8px 14px;
  font-size: 14px;
  font-weight: 600;
  cursor: pointer;
}

.faq-tab.is-active,
.faq-tab[aria-selected="true"],
.faq-jump-link:hover {
  background: var(--blue);
  border-color: var(--blue);
  color: #fff;
}

.faq-jump { justify-content: flex-start; margin: 22px 0 0; }
.faq-category + .faq-category { padding-top: 8px; }

/* CTA */
.cta {
  padding: 20px 0 90px;
}

.cta-box {
  background: linear-gradient(135deg, #487858, #1f4a30);
  border-radius: 40px;
  padding: 28px;
  display: grid;
  grid-template-columns: 1.1fr 0.9fr;
  gap: 20px;
  align-items: center;
  color: #fff;
  overflow: hidden;
}

.cta-box h2,
.cta-box .eyebrow,
.cta-box p { color: #fff; }

.cta-box .eyebrow::before { background: #fff; }

.cta-copy { padding: 28px; }

.cta-photo {
  border-radius: 28px;
  overflow: hidden;
  line-height: 0;
}

.cta-photo img {
  display: block;
  width: 100%;
  height: auto;
  aspect-ratio: 33 / 20;
  object-fit: cover;
}

.cta-contact {
  padding: 88px 0 0;
  text-align: center;
  background: #f7f7f1;
}

.cta-contact h2 {
  font-size: clamp(36px, 5vw, 56px);
  margin: 0 0 16px;
}

.cta-contact p {
  max-width: 520px;
  margin: 0 auto 28px;
  font-size: 17px;
  color: var(--navy-mid);
}

.cta-contact .btn { margin-bottom: 48px; }

.cta-contact-photo {
  display: flex;
  justify-content: center;
  line-height: 0;
}

.cta-contact-photo img {
  display: block;
  width: min(460px, 86vw);
  height: auto;
  object-fit: contain;
  object-position: bottom center;
}

/* Shared opening-hours row (footer, homepage, contact side panels) */
.hours-row {
  display: flex;
  justify-content: space-between;
  gap: 16px;
  padding: 6px 0;
  border-bottom: 1px solid rgba(255, 255, 255, 0.08);
}

/* ===========================================================================
   Footer — brand, clickable contact channels, hours, legal bar
   ======================================================================== */
.site-footer {
  background: var(--navy-deep);
  color: #e1e5d4;
  padding: 64px 0 26px;
}

.footer-grid {
  display: grid;
  grid-template-columns: 1.1fr 1.15fr 0.85fr;
  gap: 44px 56px;
  align-items: start;
}

.site-footer h4 {
  color: #fff;
  margin: 0 0 16px;
  font-size: 15px;
  letter-spacing: 0.06em;
  text-transform: uppercase;
}

.site-footer ul { list-style: none; margin: 0; padding: 0; }
.site-footer a { color: inherit; }
.site-footer a:hover { color: #fff; }

/* Brand column */
.footer-logo { --color-b: #fff; --color-m: #fff; color: #fff; margin-bottom: 14px; }

.footer-tagline {
  margin: 0 0 6px;
  max-width: 34ch;
  font-size: 15px;
  line-height: 1.7;
  opacity: 0.8;
}

.footer-contact-title { margin-bottom: 12px; }

.footer-contact { display: grid; gap: 6px; }

.footer-contact a {
  display: flex;
  align-items: center;
  gap: 12px;
  padding: 9px 12px;
  margin-left: -12px;
  border-radius: 14px;
  transition: background 0.18s ease, transform 0.18s ease;
}

.footer-contact a:hover {
  background: rgba(255, 255, 255, 0.07);
  transform: translateX(2px);
}

.footer-icon {
  flex: none;
  display: grid;
  place-items: center;
  width: 34px;
  height: 34px;
  border-radius: 11px;
  background: rgba(72, 120, 88, 0.22);
  color: #bcd0a8;
}

.footer-icon svg { width: 17px; height: 17px; }

.footer-contact-body { display: grid; gap: 2px; min-width: 0; }

.footer-contact-body strong {
  color: #fff;
  font-size: 15px;
  font-weight: 600;
  letter-spacing: -0.01em;
}

.footer-contact-body small { font-size: 12.5px; opacity: 0.68; }

.footer-social-label {
  margin: 24px 0 10px;
  font-size: 12px;
  letter-spacing: 0.08em;
  text-transform: uppercase;
  opacity: 0.6;
}

.footer-social { display: flex; flex-wrap: wrap; gap: 8px; }

.footer-social a {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 42px;
  height: 42px;
  padding: 0;
  border: 1px solid rgba(255, 255, 255, 0.16);
  border-radius: 50%;
  color: #fff;
  transition: border-color 0.18s ease, background 0.18s ease, color 0.18s ease;
}

.footer-social a svg { width: 18px; height: 18px; display: block; }

.footer-social a:hover {
  background: rgba(255, 255, 255, 0.08);
  border-color: rgba(142, 230, 176, 0.55);
  color: #bcd0a8;
}

/* Hours column */
.site-footer .hours-row {
  border-bottom-color: rgba(255, 255, 255, 0.1);
  font-size: 15px;
}

.site-footer .hours-row strong { color: #fff; font-weight: 600; }
.site-footer .hours-note { margin-top: 12px; }

.footer-book { margin-top: 18px; }

/* Legal bar */
.footer-bottom {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  justify-content: space-between;
  gap: 12px 24px;
  margin-top: 48px;
  padding-top: 20px;
  border-top: 1px solid rgba(255, 255, 255, 0.1);
}

.footer-meta {
  display: flex;
  flex-direction: column;
  gap: 6px;
  min-width: 0;
}

.copy { margin: 0; font-size: 13px; opacity: 0.7; }

.footer-credit {
  margin: 0;
  font-size: 12px;
  letter-spacing: 0.01em;
  opacity: 0.62;
}

.footer-credit a {
  font-weight: 600;
  color: #fff;
  text-decoration: none;
  border-bottom: 1px solid rgba(188, 208, 168, 0.55);
  transition: color 0.18s ease, border-color 0.18s ease;
}

.footer-credit a:hover {
  color: #bcd0a8;
  border-bottom-color: #bcd0a8;
}

.footer-legal {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 8px 22px;
  font-size: 13px;
}

.footer-legal a,
.footer-consent { opacity: 0.75; }
.footer-legal a:hover,
.footer-consent:hover { opacity: 1; }
.footer-consent {
  padding: 0;
  border: 0;
  background: none;
  color: inherit;
  font: inherit;
  cursor: pointer;
  text-align: left;
}
.footer-top { margin-left: auto; }

/* Forms */
/* ===========================================================================
   Contact page (kapcsolat.php) — hero with quick channels, form, side panels
   ======================================================================== */
.contact-hero { padding: 28px 0 8px; }

.contact-hero-grid {
  display: grid;
  grid-template-columns: 1.05fr 0.95fr;
  gap: 48px;
  align-items: center;
}

.contact-hero-copy h1 {
  margin: 18px 0 0;
  font-size: clamp(34px, 4.2vw, 52px);
  letter-spacing: -0.02em;
}

.contact-hero-lede { margin: 20px 0 0; max-width: 520px; font-size: 18px; line-height: 1.65; }
.contact-hero .actions { margin-top: 28px; display: flex; flex-wrap: wrap; gap: 12px; }

.contact-quick { display: grid; gap: 14px; margin: 0; padding: 0; list-style: none; }

.quick-card {
  display: flex;
  align-items: flex-start;
  gap: 16px;
  padding: 20px 22px;
  background: var(--white);
  border: 1px solid rgba(31, 83, 54, 0.08);
  border-radius: 20px;
  box-shadow: 0 8px 22px rgba(18, 42, 27, 0.05);
}

.quick-icon {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  flex: 0 0 auto;
  width: 42px;
  height: 42px;
  border-radius: 13px;
  background: var(--ice);
  color: var(--blue);
}

.quick-icon svg { width: 21px; height: 21px; }
.quick-body { display: grid; gap: 3px; }

.quick-label {
  font-size: 12.5px;
  font-weight: 600;
  letter-spacing: 0.02em;
  text-transform: uppercase;
  color: var(--navy-mid);
}

.quick-body a { font-family: var(--font-display); font-size: 16.5px; font-weight: 600; color: var(--navy); }
.quick-body a:hover { color: var(--blue); }
.quick-note { font-size: 13.5px; line-height: 1.4; }

/* Form and the panels beside it */
.contact-section { scroll-margin-top: calc(var(--header) + 16px); }

.contact-layout {
  display: grid;
  grid-template-columns: 1.15fr 0.85fr;
  gap: 40px;
  align-items: start;
}

.contact-form-card {
  padding: 34px;
  background: var(--white);
  border: 1px solid rgba(31, 83, 54, 0.08);
  border-radius: 28px;
  box-shadow: 0 16px 40px rgba(18, 42, 27, 0.07);
}

.contact-form-card h2 { margin: 0 0 10px; font-size: clamp(26px, 3vw, 34px); letter-spacing: -0.015em; }
.contact-form-desc { margin: 0 0 26px; font-size: 16px; line-height: 1.6; }

/* One field per row: the visitor fills the form top to bottom, no zig-zag. */
.form-grid { display: grid; grid-template-columns: 1fr; gap: 18px; }
.field { display: grid; gap: 6px; }
.field label { font-size: 14.5px; font-weight: 600; color: var(--navy); }
.field-req { color: var(--blue); }

.field-optional {
  margin-left: 6px;
  font-size: 12px;
  font-weight: 500;
  letter-spacing: 0.02em;
  text-transform: uppercase;
  color: var(--navy-mid);
  opacity: 0.8;
}

.field input,
.field textarea {
  width: 100%;
  padding: 13px 15px;
  font: inherit;
  color: var(--navy);
  background: var(--bg-2);
  border: 1px solid rgba(31, 83, 54, 0.1);
  border-radius: 14px;
  outline: 2px solid transparent;
  outline-offset: 1px;
  transition: border-color 0.15s ease, background 0.15s ease;
}

.field textarea { min-height: 150px; line-height: 1.6; resize: vertical; }
.field input::placeholder,
.field textarea::placeholder { color: rgba(47, 107, 82, 0.6); }
.field input:hover,
.field textarea:hover { border-color: rgba(72, 120, 88, 0.4); }

.field input:focus,
.field textarea:focus {
  background: var(--white);
  border-color: var(--blue);
  outline-color: rgba(72, 120, 88, 0.25);
}

/* :user-invalid only fires after the visitor has actually typed something. */
.field input:user-invalid,
.field textarea:user-invalid,
.field.has-error input,
.field.has-error textarea { background: #fdf3f4; border-color: #d1495b; }

.field-hint {
  display: flex;
  justify-content: space-between;
  gap: 12px;
  margin: 0;
  font-size: 13px;
  line-height: 1.45;
}

.field-count { flex: 0 0 auto; font-variant-numeric: tabular-nums; opacity: 0.7; }
.field-error { margin: 0; font-size: 13.5px; font-weight: 500; color: #b3374a; }

/* Honeypot: off-screen for people, tempting for bots. */
.form-trap { position: absolute; left: -9999px; width: 1px; height: 1px; overflow: hidden; }

.form-consent { margin-top: 22px; }

.form-consent label {
  display: flex;
  align-items: flex-start;
  gap: 10px;
  font-size: 14.5px;
  line-height: 1.55;
  color: var(--navy);
  cursor: pointer;
}

.form-consent input {
  flex: 0 0 auto;
  width: 20px;
  height: 20px;
  margin: 1px 0 0;
  accent-color: var(--blue);
}

.form-consent a { color: var(--blue); text-decoration: underline; text-underline-offset: 2px; }
.form-consent.has-error label { color: #b3374a; }
.form-consent .field-error { margin-top: 6px; padding-left: 30px; }

/* The required-fields note reads first, the submit button sits under it. */
.form-foot { display: flex; flex-direction: column; align-items: flex-start; gap: 14px; margin-top: 24px; }
.form-required-note { margin: 0; font-size: 13px; }

.form-note {
  display: flex;
  align-items: flex-start;
  gap: 9px;
  margin: 18px 0 0;
  padding-top: 16px;
  border-top: 1px solid rgba(31, 83, 54, 0.08);
  font-size: 14px;
  line-height: 1.55;
}

.form-note svg { flex: 0 0 auto; width: 18px; height: 18px; margin-top: 1px; color: var(--blue); }

.form-alert,
.form-success { margin: 0 0 22px; padding: 18px 20px; border-radius: 18px; }

.form-alert { background: #fdf1f2; border: 1px solid rgba(179, 55, 74, 0.25); color: #8f2b3b; }
.form-alert strong { display: block; margin-bottom: 6px; color: #8f2b3b; }
.form-alert ul { margin: 0; padding-left: 18px; font-size: 14.5px; line-height: 1.6; }
.form-alert a { text-decoration: underline; }

.form-success {
  display: flex;
  align-items: flex-start;
  gap: 14px;
  background: var(--ice);
  border: 1px solid rgba(72, 120, 88, 0.3);
}

.form-success-icon { flex: 0 0 auto; color: var(--blue); }
.form-success-icon svg { width: 26px; height: 26px; }
.form-success strong { display: block; font-family: var(--font-display); font-size: 18px; color: var(--navy); }
.form-success p { margin: 4px 0 0; font-size: 15px; line-height: 1.55; }

.contact-side {
  display: grid;
  gap: 18px;
  position: sticky;
  top: calc(var(--header) + 24px);
}

.side-card {
  padding: 24px 26px;
  background: var(--white);
  border: 1px solid rgba(31, 83, 54, 0.08);
  border-radius: 22px;
}

.side-icon {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 40px;
  height: 40px;
  border-radius: 12px;
  background: var(--ice);
  color: var(--blue);
}

.side-icon svg { width: 20px; height: 20px; }
.side-card h3 { margin: 14px 0 8px; font-size: 19px; }
.side-card p { margin: 0; font-size: 14.5px; line-height: 1.6; }
.side-card .btn { margin-top: 16px; }
.side-address { color: var(--navy); font-weight: 500; }
.side-note { margin-top: 12px !important; font-size: 13.5px !important; }
.side-social { margin-top: 14px !important; font-size: 14px !important; font-weight: 600; color: var(--blue); }
.side-social a:hover { text-decoration: underline; }

.side-hours .hours-row {
  padding: 7px 0;
  border-bottom-color: rgba(31, 83, 54, 0.08);
  font-size: 14.5px;
}

.side-hours .hours-row:last-child { border-bottom: 0; }
.side-hours .hours-row strong { color: var(--navy); }

.side-card-accent {
  background: linear-gradient(160deg, var(--navy) 0%, var(--navy-soft) 100%);
  border-color: transparent;
  color: #e1e5d4;
}

.side-card-accent h3 { color: var(--white); }
.side-card-accent .side-icon { background: rgba(255, 255, 255, 0.14); color: var(--white); }

.info-list {
  display: grid;
  gap: 12px;
}

.info-card {
  background: var(--white);
  border-radius: 20px;
  padding: 18px 20px;
}

.info-card span { display: block; font-size: 13px; color: var(--blue); font-weight: 600; }
.info-card strong { color: var(--navy); }

.hours-card {
  background: var(--white);
  border-radius: 24px;
  padding: 22px;
}

.hours-card .hours-row { color: var(--navy); border-color: #e6e9db; }

/* Services detail */
.price-grid { grid-template-columns: repeat(3, 1fr); }

.price-card {
  background: var(--white);
  border-radius: 24px;
  padding: 22px;
}

.price-card .tag { color: var(--blue); font-size: 13px; font-weight: 600; }
.price { font-family: var(--font-display); color: var(--navy); font-size: 28px; margin: 10px 0 0; }

/* Article */
.article {
  max-width: 760px;
  margin: 0 auto;
  padding: 32px 28px 48px;
  background: var(--white);
  border-radius: 28px;
}

.article img.cover {
  width: 100%;
  height: 380px;
  object-fit: cover;
  border-radius: 32px;
  margin: 20px 0 28px;
}

.article h1 { font-size: clamp(36px, 5vw, 56px); }
.article h2 { font-size: 28px; margin: 32px 0 10px; }
.article h3 { font-size: 20px; margin: 22px 0 8px; }
.article p { font-size: 17px; }
.article > :first-child { margin-top: 0; }
.article > :last-child { margin-bottom: 0; }

/* Editorial lists inside long-form copy */
.article-list {
  margin: 0 0 20px;
  padding: 0;
  list-style: none;
}

.article-list li {
  position: relative;
  padding-left: 30px;
  margin-bottom: 10px;
  font-size: 16.5px;
  line-height: 1.6;
}

.article-list li::before {
  content: "";
  position: absolute;
  left: 6px;
  top: 0.62em;
  width: 8px;
  height: 8px;
  border-radius: 50%;
  background: var(--blue);
  box-shadow: 0 0 0 4px rgba(72, 120, 88, 0.14);
}

/* Numbered process steps ("A mosolytervezés lépései") */
.step-list {
  margin: 8px 0 24px;
  padding: 0;
  list-style: none;
  display: grid;
  gap: 12px;
  counter-reset: step;
}

.step-item {
  display: flex;
  gap: 16px;
  padding: 18px 20px;
  background: var(--bg-2);
  border: 1px solid rgba(31, 83, 54, 0.07);
  border-radius: 18px;
}

.step-num {
  flex: 0 0 auto;
  width: 32px;
  height: 32px;
  border-radius: 11px;
  background: var(--blue);
  color: #fff;
  display: grid;
  place-items: center;
  font-family: var(--font-display);
  font-size: 15px;
  font-weight: 600;
}

.step-body h4 {
  margin: 3px 0 4px;
  font-size: 17px;
  font-weight: 600;
  letter-spacing: -0.01em;
}

.step-body p { margin: 0; font-size: 16px; line-height: 1.6; }

/* ===========================================================================
   Breadcrumbs
   ======================================================================== */
.crumbs {
  padding: 14px 0 0;
  font-size: 13.5px;
}

.crumbs ol {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 6px;
  margin: 0;
  padding: 0;
  list-style: none;
}

.crumbs li { display: flex; align-items: center; gap: 6px; }

.crumbs li + li::before {
  content: "/";
  color: rgba(31, 83, 54, 0.32);
}

.crumbs a { color: var(--navy-mid); opacity: 0.8; }
.crumbs a:hover { color: var(--blue); opacity: 1; }
.crumbs [aria-current="page"] { color: var(--navy); font-weight: 600; }

/* ===========================================================================
   Chip navigation — "other areas" row on the service-area pages
   ======================================================================== */
.chip-nav {
  display: flex;
  flex-wrap: wrap;
  gap: 10px;
}

.chip-nav-center { justify-content: center; }

.chip {
  display: inline-flex;
  align-items: center;
  gap: 9px;
  padding: 9px 16px 9px 11px;
  background: var(--white);
  border: 1px solid rgba(31, 83, 54, 0.12);
  border-radius: 999px;
  font-size: 14.5px;
  font-weight: 500;
  color: var(--navy);
  transition: border-color 0.2s ease, box-shadow 0.2s ease, transform 0.2s ease;
}

.chip:hover,
.chip:focus-visible {
  border-color: rgba(72, 120, 88, 0.45);
  box-shadow: 0 6px 18px rgba(18, 42, 27, 0.09);
  transform: translateY(-1px);
}

.chip-icon {
  width: 26px;
  height: 26px;
  border-radius: 8px;
  background: var(--ice);
  color: var(--blue);
  display: grid;
  place-items: center;
  flex: 0 0 auto;
}

.chip-icon svg { width: 16px; height: 16px; display: block; }

.page-hero-services p { max-width: 620px; }

/* ===========================================================================
   Service-area cards (services hub) — stacked photo + body, same language
   as the homepage treatment / blog / advantage cards, plus a peek at the
   treatments inside so visitors can navigate without opening the page.
   ======================================================================== */
.area-grid {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: 24px;
}

.area-card {
  position: relative;
  display: flex;
  flex-direction: column;
  isolation: isolate;
  /* Old #slug deep links jump here; clear the sticky header. */
  scroll-margin-top: calc(var(--header) + 24px);
  background: var(--white);
  border: 1px solid rgba(31, 83, 54, 0.08);
  border-radius: 26px;
  overflow: hidden;
  box-shadow: 0 1px 2px rgba(18, 42, 27, 0.04);
  transition: box-shadow 0.35s ease, border-color 0.35s ease, transform 0.35s ease;
}

.area-card:hover {
  transform: translateY(-3px);
  border-color: rgba(72, 120, 88, 0.24);
  box-shadow: 0 22px 48px rgba(18, 42, 27, 0.12);
}

.area-card-media {
  position: relative;
  display: block;
  height: auto;
  aspect-ratio: 16 / 10;
  overflow: hidden;
}

.area-card-media img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  transform: scale(1.03);
  transition: transform 0.7s cubic-bezier(0.2, 0.7, 0.3, 1);
}

.area-card:hover .area-card-media img { transform: scale(1.08); }

.area-card-wash {
  position: absolute;
  inset: 0;
  background: linear-gradient(180deg, rgba(11, 38, 25, 0) 55%, rgba(11, 38, 25, 0.16) 100%);
}

.area-card-body {
  position: relative;
  z-index: 1;
  display: flex;
  flex-direction: column;
  flex: 1;
  gap: 10px;
  padding: 22px 26px 26px;
  background: var(--white);
}

.area-card h2 {
  margin: 0;
  font-size: 23px;
  letter-spacing: -0.01em;
  line-height: 1.2;
}

.area-card h2 a { color: inherit; }
.area-card h2 a:hover { color: var(--blue); }

.area-card-lede {
  margin: 0;
  font-size: 15.5px;
  line-height: 1.55;
}

.area-card-list {
  margin: 4px 0 0;
  padding: 0;
  list-style: none;
  display: flex;
  flex-wrap: wrap;
  gap: 6px;
}

.area-card-list a {
  display: inline-block;
  padding: 5px 11px;
  background: var(--bg-2);
  border-radius: 8px;
  font-size: 13.5px;
  color: var(--navy-mid);
  transition: background 0.2s ease, color 0.2s ease;
}

.area-card-list a:hover { background: var(--card); color: var(--navy); }

/* Real button, pushed to the bottom so every card in a row ends the same way. */
.area-card-btn {
  align-self: flex-start;
  margin-top: auto;
}

.area-card-list { margin-bottom: 8px; }

.area-card-btn:hover > [aria-hidden] { transform: translateX(3px); }

/* "Not sure which one?" — the booking panel under the area cards.
   It used to be another white card and blended into the grid; now it sits
   below a hairline with generous air, on a tinted, dotted band of its own. */
.help-note {
  position: relative;
  display: flex;
  align-items: center;
  justify-content: space-between;
  flex-wrap: wrap;
  gap: 24px 32px;
  margin-top: 72px;
  padding: 36px 40px;
  background:
    radial-gradient(circle, rgba(72, 120, 88, 0.14) 1.1px, transparent 1.2px) 0 0 / 22px 22px,
    linear-gradient(135deg, #e9ecdf 0%, #f7f7f1 100%);
  border: 1px solid rgba(72, 120, 88, 0.22);
  border-radius: 26px;
  box-shadow: 0 18px 44px rgba(18, 42, 27, 0.07);
}

/* Hairline above the panel, so the eye reads "new block" before the tint does. */
.help-note::before {
  content: "";
  position: absolute;
  left: 8%;
  right: 8%;
  top: -36px;
  height: 1px;
  background: linear-gradient(90deg, transparent, rgba(31, 83, 54, 0.16), transparent);
}

.help-note-copy { flex: 1 1 380px; }
.help-note-pill { margin-bottom: 14px; }
.help-note h2 { margin: 0 0 8px; font-size: clamp(22px, 2.4vw, 28px); letter-spacing: -0.01em; }
.help-note p { margin: 0; max-width: 560px; font-size: 16px; line-height: 1.65; }

.help-note-actions {
  display: flex;
  flex-wrap: wrap;
  gap: 10px;
  flex: 0 0 auto;
}

.help-note-actions .btn-ghost {
  background: rgba(255, 255, 255, 0.75);
  border: 1px solid rgba(31, 83, 54, 0.12);
}

.guarantee-grid {
  display: grid;
  grid-template-columns: 1.05fr 0.95fr;
  gap: 24px;
  align-items: start;
}

.guarantee-grid .article { max-width: none; margin: 0; }

/* Closing note under the terms: the document name links to the ÁSZF page. */
.guarantee-note a {
  color: var(--blue);
  font-weight: 600;
  text-decoration: underline;
  text-underline-offset: 2px;
}

.guarantee-note a:hover { color: var(--blue-hover); }

.guarantee-card {
  padding: 30px 28px;
  background: var(--bg-2);
  border: 1px solid rgba(31, 83, 54, 0.08);
  border-radius: 28px;
}

.guarantee-card h3 { margin: 0 0 16px; font-size: 19px; }

/* ===========================================================================
   Detail hero — shared by the category and treatment pages
   ======================================================================== */
.detail-hero { padding: 32px 0 48px; }

.detail-hero-grid {
  display: grid;
  grid-template-columns: 1fr 0.85fr;
  gap: 48px;
  align-items: center;
}

.detail-hero-copy h1 {
  margin: 10px 0 0;
  font-size: clamp(32px, 4.4vw, 50px);
}

.detail-hero-parent {
  display: inline-flex;
  align-items: center;
  gap: 9px;
  padding: 7px 15px 7px 8px;
  background: var(--white);
  border: 1px solid rgba(31, 83, 54, 0.12);
  border-radius: 999px;
  font-size: 13.5px;
  font-weight: 600;
  color: var(--navy);
  transition: border-color 0.2s ease;
}

.detail-hero-parent:hover { border-color: rgba(72, 120, 88, 0.45); color: var(--blue); }

.detail-hero-parent-icon {
  width: 24px;
  height: 24px;
  border-radius: 7px;
  background: var(--ice);
  color: var(--blue);
  display: grid;
  place-items: center;
}

.detail-hero-parent-icon svg { width: 15px; height: 15px; display: block; }

.detail-hero-tag {
  margin: 16px 0 0;
  font-family: var(--font-display);
  font-size: clamp(18px, 2vw, 22px);
  font-weight: 500;
  line-height: 1.35;
  color: var(--blue);
}

.detail-hero-lede {
  margin: 14px 0 0;
  max-width: 560px;
  font-size: 17px;
  line-height: 1.65;
}

.detail-hero .actions { margin-top: 28px; display: flex; flex-wrap: wrap; gap: 12px; }

.detail-hero-media img {
  display: block;
  width: 100%;
  aspect-ratio: 4 / 3;
  object-fit: cover;
  border-radius: 28px;
  box-shadow: 0 26px 60px rgba(18, 42, 27, 0.16);
}

/* In-page jump targets (hero buttons, #garancia from the footer) clear the
   sticky header. */
.section[id] { scroll-margin-top: calc(var(--header) + 24px); }

/* ===========================================================================
   Long-form layout — treatment page: article body + "good to know" panel
   ======================================================================== */
.prose-layout {
  display: grid;
  grid-template-columns: minmax(0, 1fr) 300px;
  gap: 56px;
  align-items: start;
}

.prose-aside {
  position: sticky;
  top: calc(var(--header) + 24px);
  padding: 26px;
  background: var(--white);
  border: 1px solid rgba(31, 83, 54, 0.08);
  border-radius: 22px;
}

.prose-aside-title { margin: 0 0 8px; font-size: 20px; }

.prose-aside-cta { margin-top: 20px; width: 100%; justify-content: center; }

.prose-body,
.prose-single {
  max-width: none;
  margin: 0;
  padding: 0;
  background: none;
  border-radius: 0;
}

/* Service-area page: a single reading column, comfortably measured. */
.prose-single { max-width: 760px; margin: 0 auto; }

.prose-body h2,
.prose-single h2 { margin: 0 0 18px; font-size: clamp(26px, 3vw, 34px); }
.prose-body h3,
.prose-single h3 { margin: 34px 0 10px; font-size: 21px; }
.prose-body p,
.prose-single p { font-size: 16.5px; line-height: 1.72; margin: 0 0 16px; }
/* Step cards keep their own compact text metrics inside long-form copy. */
.prose-body .step-body p,
.prose-single .step-body p { margin: 0; font-size: 16px; line-height: 1.6; }

.fact-list {
  margin: 0;
  display: grid;
  gap: 2px;
}

.fact-list > div {
  display: flex;
  justify-content: space-between;
  align-items: baseline;
  gap: 14px;
  padding: 11px 0;
  border-bottom: 1px solid rgba(31, 83, 54, 0.1);
}

.fact-list > div:last-child { border-bottom: 0; }

.fact-list dt {
  font-size: 13px;
  font-weight: 600;
  color: var(--navy-mid);
  opacity: 0.75;
  flex: 0 0 auto;
}

.fact-list dd {
  margin: 0;
  font-size: 14.5px;
  font-weight: 500;
  text-align: right;
  color: var(--navy);
}

.fact-list dd a { color: var(--blue); }
.fact-list dd a:hover { text-decoration: underline; }

/* ===========================================================================
   Contact panel on the service pages
   ======================================================================== */
.svc-contact {
  display: grid;
  grid-template-columns: 1.15fr 0.85fr;
  gap: 24px;
  align-items: stretch;
}

.svc-contact-card,
.svc-contact-hours {
  padding: 32px;
  background: var(--white);
  border: 1px solid rgba(31, 83, 54, 0.08);
  border-radius: 26px;
}

.svc-contact-card h3 { margin: 0 0 14px; font-size: 24px; }

.svc-contact-address { margin: 0; font-size: 17px; line-height: 1.6; }

.svc-contact-note {
  margin: 12px 0 0;
  font-size: 14.5px;
  font-weight: 600;
  color: var(--blue);
}

.svc-contact-actions {
  display: flex;
  flex-wrap: wrap;
  gap: 12px;
  margin-top: 26px;
}

.svc-contact-hours .hours-row {
  border-bottom-color: rgba(31, 83, 54, 0.1);
  font-size: 15px;
}

.svc-contact-hours .hours-row strong { color: var(--navy); }

.svc-contact-map {
  display: inline-flex;
  align-items: center;
  gap: 7px;
  margin-top: 20px;
  font-size: 14.5px;
  font-weight: 600;
  color: var(--blue);
}

.svc-contact-map:hover { text-decoration: underline; }

/* 404 */
.not-found {
  min-height: 60vh;
  display: grid;
  place-items: center;
  text-align: center;
  padding: 80px 20px;
}

.not-found h1 { font-size: 72px; margin: 0; }

/* ===========================================================================
   Motion — deliberately little of it. Three touches only:
   1. the hero copy settles in on load (pure CSS),
   2. section heads and cards drift up as they scroll into view (JS adds
      `.is-visible`; the hidden start state exists only under `html.js`, which
      the head script sets solely when IntersectionObserver is available and
      the visitor has not asked for reduced motion),
   3. the sticky header grows a soft shadow once the page has scrolled.
   Nothing loops, nothing moves while you read.
   ======================================================================== */
@keyframes settle-in {
  from { opacity: 0; transform: translateY(14px); }
  to   { opacity: 1; transform: none; }
}

.hero-copy > * {
  animation: settle-in 0.7s cubic-bezier(0.2, 0.7, 0.3, 1) both;
}
.hero-copy > :nth-child(2) { animation-delay: 0.1s; }
.hero-copy > :nth-child(3) { animation-delay: 0.2s; }

.page-hero .wrap > * {
  animation: settle-in 0.6s cubic-bezier(0.2, 0.7, 0.3, 1) both;
}
.page-hero .wrap > :nth-child(2) { animation-delay: 0.08s; }
.page-hero .wrap > :nth-child(3) { animation-delay: 0.16s; }

/* Keep this selector list in step with REVEAL_TARGETS in js/main.js.
   The drift uses the standalone `translate` property, so it composes with —
   rather than fights — the cards' own `transform` hover lift, and the
   transition list re-declares those hover transitions because this rule
   would otherwise replace them. */
html.js .section-head-center,
html.js .service-card,
html.js .clients-logo,
html.js .advantage-card,
html.js .video-feature,
html.js .doctor-card,
html.js .team-spot,
html.js .review-card,
html.js .blog-card,
html.js .faq-item,
html.js .peek-slider,
html.js .faq-tabs,
html.js .booking-panel,
html.js .area-card,
html.js .help-note,
html.js .guarantee-grid > *,
html.js .cta-box {
  opacity: 0;
  translate: 0 18px;
  transition:
    opacity 0.7s cubic-bezier(0.2, 0.7, 0.3, 1) var(--reveal-delay, 0ms),
    translate 0.7s cubic-bezier(0.2, 0.7, 0.3, 1) var(--reveal-delay, 0ms),
    transform 0.35s cubic-bezier(0.2, 0.7, 0.3, 1),
    box-shadow 0.35s ease,
    border-color 0.35s ease;
}

/* Revealed — or, if main.js never ran, force-shown by the head script's
   safety timer (html.reveal-all) so nothing can stay hidden. */
html.js .is-visible,
html.reveal-all .section-head-center,
html.reveal-all .service-card,
html.reveal-all .clients-logo,
html.reveal-all .advantage-card,
html.reveal-all .video-feature,
html.reveal-all .doctor-card,
html.reveal-all .team-spot,
html.reveal-all .review-card,
html.reveal-all .blog-card,
html.reveal-all .faq-item,
html.reveal-all .peek-slider,
html.reveal-all .faq-tabs,
html.reveal-all .booking-panel,
html.reveal-all .area-card,
html.reveal-all .help-note,
html.reveal-all .guarantee-grid > *,
html.reveal-all .cta-box {
  opacity: 1;
  translate: none;
}

.site-header {
  transition: box-shadow 0.3s ease, background-color 0.3s ease;
}

.site-header.is-scrolled {
  background: rgba(247, 247, 241, 0.94);
  box-shadow: 0 10px 30px rgba(18, 42, 27, 0.07);
}

@media (prefers-reduced-motion: reduce) {
  .hero-copy > *,
  .page-hero .wrap > * { animation: none; }
  .site-header { transition: none; }
}

/* Four-up service cards need an intermediate two-up step before stacking. */
@media (max-width: 1080px) {
  .service-cards { grid-template-columns: repeat(2, minmax(0, 1fr)); }
}

@media (max-width: 980px) {
  .hero-grid,
  .section-head,
  .faq-layout,
  .cta-box,
  .contact-hero-grid,
  .contact-layout,
  .clinic-block,
  .hours-banner,
  .about-hero-grid,
  .page-hero-grid,
  .about-story,
  .about-clinic,
  .profile-hero-grid,
  .detail-hero-grid,
  .prose-layout,
  .guarantee-grid,
  .svc-contact {
    grid-template-columns: 1fr;
  }

  .service-grid,
  .feature-grid,
  .blog-grid,
  .price-grid,
  .category-grid,
  .category-grid-wide,
  .testimonial-grid,
  .value-grid,
  .visit-steps,
  .about-facts,
  .profile-facts,
  .tile-grid { grid-template-columns: 1fr 1fr; }

  .treatment-card { flex-basis: calc((100% - 20px) / 2); }

  .service-cards { gap: 16px; }
  .clients-wrapper-three { grid-template-columns: repeat(auto-fit, minmax(150px, 1fr)); }

  .area-grid { grid-template-columns: 1fr; gap: 20px; }

  /* Photo above the copy, and the aside stops sticking once it is full-width. */
  .detail-hero-grid { gap: 32px; }
  .detail-hero-media { order: -1; }
  .prose-layout { gap: 32px; }
  .prose-aside { position: static; }
  .prose-aside-cta { width: auto; }

  /* Blog */
  .blog-featured { grid-template-columns: 1fr; gap: 20px; padding: 16px; }
  .blog-featured-body { padding: 8px 6px 10px; }
  .post-cover { max-width: 100%; margin: 24px auto 0; }
  .article-toc ol { columns: 1; }
  .article-cta { grid-template-columns: 1fr; gap: 18px; padding: 24px; }
  .article-cta-actions { flex-direction: row; flex-wrap: wrap; }
  .post-aside-phone { width: auto; margin-left: 10px; }

  /* Contact: the aside stops sticking and the quick channels go side by side */
  .contact-hero-grid,
  .contact-layout { gap: 32px; }
  .contact-quick { grid-template-columns: repeat(3, minmax(0, 1fr)); }
  .contact-side { position: static; grid-template-columns: 1fr 1fr; }
  .contact-form-card { padding: 28px; }

  /* About + profile: full-width bands, and the fact strips lose their dividers */
  .about-hero-grid,
  .about-story,
  .about-clinic,
  .profile-hero-grid { gap: 32px; }
  .about-hero-media img { aspect-ratio: 16 / 10; }
  .about-hero-badge { left: 16px; bottom: 16px; }
  .about-facts,
  .profile-facts { gap: 24px; }
  .about-facts li,
  .profile-fact { padding: 0; border-left: 0; }
  .profile-hero-media { order: -1; }
  .profile-frame { max-width: 300px; }
  .about-clinic-photo img { aspect-ratio: 16 / 10; }

  /* Footer: brand block on its own row, contact + hours side by side underneath */
  .footer-grid { grid-template-columns: 1.2fr 0.8fr; gap: 36px 40px; }
  .footer-brand { grid-column: 1 / -1; }
  .footer-tagline { max-width: 52ch; }

  /* Advantages stay stacked (photo on top) like treatment / blog cards. */
  .advantage-grid { gap: 16px; }
  .doctor-grid { grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 24px; }
  .peek-slider { --peek-cols: 2.18; --peek-gap: 16px; }
  .doctor-card h3 { font-size: 20px; }
  .review-columns { gap: 18px; }
  .booking-panel { padding: 24px; }

  /* Photo on top, copy on a clean band underneath it */
  .hero {
    align-items: flex-end;
    min-height: 0;
    padding: 300px 0 56px;
  }
  .hero::after { height: 70px; }
  .hero-bg img { object-position: 72% 32%; }
  .hero-copy { gap: 24px; max-width: none; }
  .hero h1 { font-size: clamp(40px, 8vw, 54px); letter-spacing: -0.02em; }
  .cta-photo img { width: 100%; height: auto; margin: 0 auto; }
  .cta-contact { padding-top: 56px; }
  .cta-contact-photo img { width: min(300px, 82vw); }
  .nav { grid-template-columns: 1fr auto; }
  .nav-end { gap: 8px; }
  .nav-toggle {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    flex: 0 0 44px;
  }
  .nav-book { display: none; }
  .nav-book-mobile { display: list-item; }
  .nav-links {
    display: none;
    position: absolute;
    top: var(--header);
    left: 0;
    right: 0;
    background: #f7f7f1;
    flex-direction: column;
    align-items: stretch;
    padding: 20px;
    border-bottom: 1px solid var(--line);
  }
  .nav-links.open { display: flex; }
  .nav-dropdown-menu { position: static; box-shadow: none; margin-top: 6px; padding: 0 0 0 12px; display: none; }
  .nav-dropdown.is-open .nav-dropdown-menu { display: block; }
  .clinic-block img, .hours-banner img { min-height: 220px; }
  .google-card { flex-direction: column; text-align: center; }
}

@media (max-width: 680px) {
  .service-grid,
  .feature-grid,
  .blog-grid,
  .price-grid,
  .category-grid,
  .category-grid-wide,
  .testimonial-grid,
  .value-grid,
  .visit-steps,
  .about-facts,
  .profile-facts,
  .tile-grid,
  .price-groups,
  .service-cards { grid-template-columns: 1fr; }
  .service-card h3 { min-height: auto; }

  .service-card { min-height: 0; }
  .service-card-media { height: auto; aspect-ratio: 2 / 1; }
  .team-slider .team-spot-photo { aspect-ratio: 1 / 1; }
  .peek-slider .blog-card-media { aspect-ratio: 2 / 1; }
  .advantage-grid { grid-template-columns: 1fr; gap: 16px; }
  .advantage-thumb { aspect-ratio: 2 / 1; }
  .area-card-media { aspect-ratio: 2 / 1; }
  .treatment-card { flex-basis: 100%; min-height: 0; }
  .treatment-card-media { aspect-ratio: 2 / 1; }
  .detail-hero { padding: 20px 0 36px; }
  .prose-aside { padding: 24px 22px; }
  .post-hero h1 { font-size: clamp(28px, 8vw, 36px); }
  .post-lede { font-size: 17px; }
  .post-cover { width: 100%; max-width: 100%; border-radius: 16px; }
  .post-cover img { width: 100%; max-height: min(70vh, 520px); }
  .post-article h2 { font-size: 23px; }
  .article-cta-actions { flex-direction: column; }
  .article-cta-actions .btn { width: 100%; }
  .post-aside .prose-aside-cta,
  .post-aside-phone { width: 100%; margin-left: 0; }
  .blog-featured-section { padding-bottom: 56px; }
  .blog-list-section { padding-top: 64px; }
  .help-note { margin-top: 56px; padding: 26px 22px; }
  .help-note::before { top: -28px; }
  .help-note-actions { width: 100%; }
  .help-note-actions .btn { flex: 1 1 100%; justify-content: center; }
  .guarantee-card,
  .svc-contact-card,
  .svc-contact-hours { padding: 24px; }
  .crumbs { font-size: 12.5px; }
  .crumbs ol { gap: 5px; }
  .chip { font-size: 13.5px; padding: 8px 13px 8px 9px; }

  .wrap { width: min(var(--max), calc(100% - 24px)); }
  .profile-areas-shell:not(.is-static) .profile-areas {
    padding-inline: 40px;
    scroll-padding-inline: 40px;
    mask-image: linear-gradient(90deg, transparent 0, #000 36px, #000 calc(100% - 36px), transparent);
  }
  .profile-areas-shell:not(.is-static) .profile-areas-btn {
    display: grid;
    place-items: center;
    position: absolute;
    top: 50%;
    z-index: 2;
    width: 36px;
    height: 36px;
    font-size: 20px;
    transform: translateY(-50%);
    box-shadow: 0 4px 14px rgba(31, 83, 54, 0.12);
  }
  .profile-areas-shell:not(.is-static) [data-chip-prev] { left: 0; }
  .profile-areas-shell:not(.is-static) [data-chip-next] { right: 0; }
  .brand { --mark-h: 40px; font-size: 19px; }
  .logo-text { padding-top: 6px; }
  .nav-end { white-space: nowrap; }
  .nav-toggle { width: 40px; height: 40px; flex-basis: 40px; }
  .hero { padding: 280px 0 48px; }
  .hero-bg img { object-position: 50% 28%; }
  .hero h1 { color: #f7f7f1; }
  .hero-accent { color: #ffffff; }
  .section { padding: 40px 0; }
  .doctor-grid { grid-template-columns: 1fr; gap: 32px; max-width: 320px; margin: 0 auto; }
  .peek-slider { --peek-cols: 1.18; --peek-gap: 12px; }
  .team-slider { --peek-cols: 1; --peek-gap: 16px; }
  .faq-tab,
  .faq-jump-link { font-size: 13px; padding: 7px 12px; }

  .contact-quick,
  .contact-side { grid-template-columns: 1fr; }
  .contact-form-card { padding: 24px 20px; }
  .contact-hero-copy h1 { font-size: clamp(30px, 8vw, 40px); }
  .contact-hero .actions { width: 100%; }
  .contact-hero .actions .btn { flex: 1 1 100%; justify-content: center; }
  .form-foot { align-self: stretch; }
  .form-foot .btn { width: 100%; justify-content: center; }

  .about-hero-copy h1 { font-size: clamp(30px, 8vw, 40px); }
  .about-hero-media img,
  .about-clinic-photo img { aspect-ratio: 4 / 3; border-radius: 22px; }
  .about-facts,
  .profile-facts { padding: 24px; }
  .about-story-list,
  .value-card,
  .visit-step { padding: 24px 22px; }
  .profile-hero-copy h1 { font-size: clamp(28px, 8vw, 38px); }
  .visit-footer .actions,
  .about-clinic .actions,
  .about-hero .actions,
  .profile-hero .actions { width: 100%; }
  .visit-footer .actions .btn,
  .about-clinic .actions .btn,
  .about-hero .actions .btn,
  .profile-hero .actions .btn { flex: 1 1 100%; justify-content: center; }
  .footer-grid { grid-template-columns: 1fr; gap: 32px; }
  .footer-book { width: 100%; justify-content: center; }
  .footer-bottom { flex-direction: column; align-items: flex-start; margin-top: 36px; }
  .footer-top { margin-left: 0; }

  .review-columns { grid-template-columns: 1fr; }
  .clients-bar { padding: 12px 0 40px; }
  .clients-wrapper-three {
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: 12px;
  }
  .clients-logo { min-height: 88px; padding: 16px 14px; }
  .clients-logo:last-child:nth-child(odd) {
    grid-column: 1 / -1;
    width: 50%;
    justify-self: center;
  }
  .clients-image-three { height: 44px; }
  .video-feature { border-radius: 14px; margin-bottom: 24px; }
  .advantage-card { border-radius: 18px; }
  .booking-panel { flex-direction: column; align-items: stretch; }
  .booking-actions .btn { flex: 1; justify-content: center; }
}