/* =========================================================
   MDDr. Vojtěch Matějek — design tokens (hypermodern)
   ========================================================= */
@import url('https://fonts.googleapis.com/css2?family=Sora:wght@400;500;600;700;800&family=Inter:wght@400;500;600&family=JetBrains+Mono:wght@400;500&display=swap');

:root{
  --bg:            #FFFFFF;
  --bg-soft:       #F1F6F4;
  --ink:           #081512;
  --ink-soft:      #566965;
  --teal:          #049E8B;
  --teal-dark:     #063B34;
  --accent-1:      #00B6A0;
  --accent-2:      #17E0C0;
  --violet:        #6E56F7;
  --gold:          #F2A93B;
  --gold-soft:     #FDECD1;
  --line:          #E6ECE9;
  --white:         #FFFFFF;

  --font-display:  'Sora', sans-serif;
  --font-body:     'Inter', sans-serif;
  --font-mono:     'JetBrains Mono', monospace;

  --radius-sm:     12px;
  --radius:        18px;
  --radius-lg:     28px;
  --radius-pill:   999px;
  --container:     1120px;

  --shadow-sm:     0 1px 2px rgba(8,21,18,0.05);
  --shadow-md:     0 14px 34px -14px rgba(8,21,18,0.18);
  --shadow-lg:     0 30px 70px -24px rgba(8,21,18,0.24);
  --glow:          0 0 0 1px rgba(0,182,160,0.10), 0 10px 30px -8px rgba(0,182,160,0.35);

  --ease:          cubic-bezier(.2,.8,.2,1);
}

*, *::before, *::after{ box-sizing: border-box; }
html{ scroll-behavior: smooth; }

body{
  margin:0;
  background-color: var(--bg);
  background-image: radial-gradient(rgba(6,21,18,0.055) 1px, transparent 1px);
  background-size: 22px 22px;
  color: var(--ink);
  font-family: var(--font-body);
  font-size: 16px;
  line-height: 1.65;
  -webkit-font-smoothing: antialiased;
}

img{ max-width:100%; display:block; }
a{ color: inherit; text-decoration: none; }

h1,h2,h3,h4{
  font-family: var(--font-display);
  font-weight: 700;
  margin: 0;
  color: var(--teal-dark);
  letter-spacing: -0.025em;
}
p{ margin:0; }

.container{
  max-width: var(--container);
  margin: 0 auto;
  padding: 0 32px;
}

.grad-text{
  background: linear-gradient(100deg, var(--accent-1), var(--accent-2) 60%, var(--violet));
  -webkit-background-clip: text;
  background-clip: text;
  color: transparent;
}

.eyebrow{
  display:inline-flex;
  align-items:center;
  gap:8px;
  font-family: var(--font-mono);
  font-size: 12.5px;
  letter-spacing: 0.06em;
  text-transform: uppercase;
  color: var(--teal-dark);
  background: var(--bg-soft);
  border: 1px solid var(--line);
  padding: 7px 14px;
  border-radius: var(--radius-pill);
}
.eyebrow::before{
  content:"";
  width:6px; height:6px;
  border-radius:50%;
  background: linear-gradient(135deg, var(--accent-1), var(--accent-2));
  flex-shrink:0;
}

a:focus-visible, button:focus-visible, input:focus-visible, textarea:focus-visible, select:focus-visible{
  outline: 2px solid var(--violet);
  outline-offset: 3px;
  border-radius: 4px;
}

@media (prefers-reduced-motion: reduce){
  *{ animation: none !important; transition: none !important; }
}

/* =========================================================
   Header / Nav — floating glass bar
   ========================================================= */
.site-header{
  position: sticky;
  top: 14px;
  z-index: 50;
  width: calc(100% - 32px);
  max-width: var(--container);
  margin: 14px auto 0;
  border-radius: var(--radius-pill);
  background: rgba(255,255,255,0.72);
  backdrop-filter: blur(18px) saturate(160%);
  border: 1px solid rgba(255,255,255,0.6);
  box-shadow: var(--shadow-md);
}

.nav{
  display:flex;
  align-items:center;
  justify-content:space-between;
  padding: 12px 12px 12px 22px;
  max-width: var(--container);
  margin: 0 auto;
}

.logo{
  display:flex;
  align-items:center;
  gap:10px;
  font-family: var(--font-display);
  font-weight:700;
  font-size: 18px;
  color: var(--teal-dark);
}
.logo svg{ width:24px; height:24px; flex-shrink:0; }

.nav-links{
  display:flex;
  align-items:center;
  gap: 26px;
  list-style:none;
  margin:0; padding:0;
  font-size: 14px;
  font-weight:500;
}

.nav-links a{
  position:relative;
  padding: 6px 0;
  color: var(--ink-soft);
  transition: color .15s var(--ease);
}
.nav-links a:hover{ color: var(--teal-dark); }
.nav-links a.active{ color: var(--teal-dark); }
.nav-links a.active::after{
  content:"";
  position:absolute;
  left:0; right:0; bottom:0;
  height:2px;
  border-radius: 2px;
  background: linear-gradient(90deg, var(--accent-1), var(--accent-2));
}

.nav-cta{
  font-size: 13.5px;
  font-weight:600;
  padding: 11px 20px;
  border-radius: var(--radius-pill);
  background: linear-gradient(120deg, var(--accent-1), var(--accent-2));
  color: var(--teal-dark) !important;
  white-space: nowrap;
  box-shadow: var(--glow);
  transition: transform .15s var(--ease), box-shadow .15s var(--ease);
}
.nav-cta:hover{ transform: translateY(-1px); box-shadow: 0 0 0 1px rgba(0,182,160,0.16), 0 16px 34px -10px rgba(0,182,160,0.45); }

@media (max-width: 1100px){
  .nav-links{ display:none; }
}

/* =========================================================
   Buttons
   ========================================================= */
.btn{
  display:inline-flex;
  align-items:center;
  gap:8px;
  padding: 14px 28px;
  border-radius: var(--radius-pill);
  font-family: var(--font-body);
  font-weight:600;
  font-size: 15px;
  border: 1px solid transparent;
  cursor:pointer;
  transition: transform .15s var(--ease), box-shadow .15s var(--ease), background .15s var(--ease), border-color .15s var(--ease);
}
.btn-primary{
  background: linear-gradient(120deg, var(--accent-1), var(--accent-2));
  color: var(--teal-dark);
  box-shadow: var(--glow);
}
.btn-primary:hover{ transform: translateY(-1px); box-shadow: 0 0 0 1px rgba(0,182,160,0.16), 0 20px 40px -10px rgba(0,182,160,0.5); }

.btn-ghost{
  background: var(--white);
  color: var(--teal-dark);
  border-color: var(--line);
}
.btn-ghost:hover{ border-color: var(--teal-dark); transform: translateY(-1px); box-shadow: var(--shadow-sm); }

.btn-row{ display:flex; gap:16px; flex-wrap:wrap; }

/* =========================================================
   Hero
   ========================================================= */
.hero{
  position:relative;
  padding: 132px 0 96px;
  overflow:hidden;
  isolation: isolate;
}

.hero::before{
  content:"";
  position:absolute;
  top: 10px;
  right: -80px;
  width: 280px;
  height: 280px;
  background: radial-gradient(circle, rgba(0,182,160,0.20), rgba(0,182,160,0) 70%);
  z-index: -1;
  pointer-events: none;
}
.hero::after{
  content:"";
  position:absolute;
  bottom: 10px;
  left: -80px;
  width: 260px;
  height: 260px;
  background: radial-gradient(circle, rgba(110,86,247,0.14), rgba(110,86,247,0) 70%);
  z-index: -1;
  pointer-events: none;
}

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

.hero h1{
  font-size: clamp(38px, 5vw, 62px);
  line-height: 1.04;
  margin: 20px 0 22px;
}

.hero .lede{
  font-size: 18px;
  color: var(--ink-soft);
  max-width: 46ch;
  margin-bottom: 32px;
}

.smile-arc{ width:100%; height:auto; filter: drop-shadow(var(--shadow-lg)); border-radius: var(--radius-lg); }

.page-hero{
  position:relative;
  padding: 88px 0 60px;
  overflow:hidden;
  isolation:isolate;
}
.page-hero::before{
  content:"";
  position:absolute;
  top: 10px; right: -80px;
  width: 280px; height: 280px;
  background: radial-gradient(circle, rgba(0,182,160,0.20), rgba(0,182,160,0) 70%);
  z-index:-1;
  pointer-events:none;
}
.page-hero h1{ font-size: clamp(32px, 4.2vw, 48px); margin: 16px 0 14px; }
.page-hero .lede{ font-size:17px; color:var(--ink-soft); max-width:60ch; }

/* =========================================================
   Sections
   ========================================================= */
section{ padding: 84px 0; }
section.tight{ padding: 60px 0; }
.section-soft{ background: var(--bg-soft); }

.section-head{ margin-bottom: 44px; max-width: 60ch; }
.section-head h2{ font-size: clamp(27px, 3vw, 38px); margin-top:12px; }
.section-head .lede{ margin-top: 12px; color: var(--ink-soft); font-size:16px; }

/* pillars */
.pillars{
  display:grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 24px;
}
.pillar{
  position:relative;
  background: var(--white);
  border-radius: var(--radius);
  padding: 30px 26px;
  box-shadow: var(--shadow-sm);
  border: 1px solid var(--line);
  transition: box-shadow .2s var(--ease), transform .2s var(--ease), border-color .2s var(--ease);
}
.pillar:hover{ box-shadow: var(--shadow-md); transform: translateY(-4px); border-color: rgba(0,182,160,0.35); }
.pillar .num{
  display:inline-flex;
  align-items:center;
  justify-content:center;
  width:30px; height:30px;
  border-radius:50%;
  background: linear-gradient(135deg, var(--accent-1), var(--accent-2));
  color: var(--white);
  font-family: var(--font-mono);
  font-size: 12px;
  font-weight:600;
  margin-bottom: 16px;
}
.pillar h3{ font-size: 19px; margin-bottom: 10px; }
.pillar p{ color: var(--ink-soft); font-size: 15px; }

/* card grid */
.card-grid{
  display:grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 20px;
}

.card{
  background: var(--white);
  border: 1px solid var(--line);
  border-radius: var(--radius);
  padding: 28px;
  box-shadow: var(--shadow-sm);
  transition: box-shadow .2s var(--ease), transform .2s var(--ease), border-color .2s var(--ease);
}
.card:hover{ box-shadow: var(--shadow-md); transform: translateY(-4px); border-color: rgba(0,182,160,0.35); }
.card .tag{
  font-family: var(--font-mono);
  font-size: 11.5px;
  color: var(--violet);
  text-transform: uppercase;
  letter-spacing: 0.06em;
}
.card h3{ font-size: 19px; margin: 12px 0 10px; }
.card p{ color: var(--ink-soft); font-size: 15px; }
.card a.card-link{
  display:inline-block;
  margin-top: 16px;
  font-size: 14px;
  font-weight: 600;
  color: var(--teal-dark);
  border-bottom: 1px solid var(--accent-1);
}

/* split content */
.split{
  display:grid;
  grid-template-columns: 1fr 1fr;
  gap: 56px;
  align-items:center;
}
.split .visual{
  position:relative;
  background: var(--bg-soft);
  border-radius: var(--radius-lg);
  padding: 44px;
  display:flex;
  align-items:center;
  justify-content:center;
  border: 1px solid var(--line);
  overflow:hidden;
}
.split .visual svg{ width:100%; max-width:320px; height:auto; position:relative; z-index:1; }

/* quick contact strip */
.contact-strip{
  display:grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 18px;
}
.contact-strip .item{
  background: var(--white);
  border: 1px solid var(--line);
  border-radius: var(--radius);
  padding: 24px 24px 26px;
  box-shadow: var(--shadow-sm);
}
.contact-strip .item h4{ font-size:12.5px; text-transform:uppercase; letter-spacing:0.06em; color:var(--teal); font-family: var(--font-mono); font-weight:500; margin-bottom:12px; }
.contact-strip .item p, .contact-strip .item a{ font-size: 15px; color: var(--ink); }
.contact-strip .item .mono{ font-family: var(--font-mono); font-size:14.5px; }

/* team */
.team-grid{
  display:grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 22px;
}
.team-card{
  border-radius: var(--radius);
  overflow:hidden;
  background: var(--white);
  border: 1px solid var(--line);
  box-shadow: var(--shadow-sm);
  transition: box-shadow .2s var(--ease), transform .2s var(--ease);
}
.team-card:hover{ box-shadow: var(--shadow-md); transform: translateY(-4px); }
.team-photo{
  aspect-ratio: 4/5;
  background: var(--bg-soft);
  display:flex; align-items:center; justify-content:center;
}
.team-photo svg{ width:56%; }
.team-card .info{ padding: 20px 22px 24px; }
.team-card h3{ font-size:17px; margin-bottom:4px; }
.team-card .role{ font-family: var(--font-mono); font-size: 12px; color: var(--violet); text-transform:uppercase; letter-spacing:0.04em; margin-bottom:10px; display:block; }
.team-card p{ font-size:14px; color: var(--ink-soft); }

/* values list */
.values-list{ display:grid; grid-template-columns: 1fr 1fr; gap: 18px; }
.values-list .value{
  background: var(--white);
  border: 1px solid var(--line);
  border-radius: var(--radius);
  padding: 22px 24px;
  box-shadow: var(--shadow-sm);
}
.values-list h3{ font-size:17px; margin-bottom:8px; }
.values-list p{ font-size:15px; color:var(--ink-soft); }

/* timeline */
.timeline{ display:flex; flex-direction:column; gap: 12px; }
.tl-row{
  display:grid;
  grid-template-columns: 90px 1fr;
  gap:24px;
  padding: 22px 24px;
  background: var(--white);
  border: 1px solid var(--line);
  border-radius: var(--radius);
  box-shadow: var(--shadow-sm);
}
.tl-row .year{ font-family: var(--font-mono); color: var(--gold); font-weight:600; }
.tl-row h3{ font-size:16px; margin-bottom:6px; }
.tl-row p{ font-size:14.5px; color:var(--ink-soft); }

/* Contracted insurers: kept outside the CMS-rendered price tables. */
.insurance-partners{ padding:0 0 44px; margin:0 0 44px; border-bottom:1px solid var(--line); }
.insurance-partners h2{ font-size:clamp(23px, 2.7vw, 30px); line-height:1.3; }
.insurance-intro{ margin-top:10px; color:var(--ink-soft); }
.insurers-list{ display:flex; flex-wrap:wrap; justify-content:center; gap:16px; list-style:none; padding:0; margin:24px 0 0; }
.insurers-list > li{ display:flex; flex:0 0 calc((100% - 48px) / 4); min-width:0; }
.insurer-card{ display:flex; flex-direction:column; width:100%; padding:12px; border:1px solid var(--line); border-radius:var(--radius); background:var(--white); box-shadow:var(--shadow-sm); text-align:center; }
.insurer-card:hover{ border-color:var(--teal); }
.insurer-card:focus-visible{ outline:3px solid var(--teal); outline-offset:4px; }
.insurer-card .sr-only{ position:absolute; width:1px; height:1px; padding:0; margin:-1px; overflow:hidden; clip:rect(0,0,0,0); white-space:nowrap; border:0; }
/* A permanent white backing preserves original logo colours in both themes. */
.insurer-logo{ display:flex; align-items:center; justify-content:center; height:92px; padding:18px 22px; border-radius:var(--radius-sm); background:#fff; }
.insurer-logo img{ width:100%; height:100%; object-fit:contain; }
.insurer-name{ display:block; flex:1; padding:14px 4px 10px; font-size:13.5px; font-weight:600; line-height:1.5; overflow-wrap:break-word; }
.insurer-code{ display:block; padding:0 2px 4px; color:var(--ink-soft); font-family:var(--font-mono); font-size:11px; line-height:1.5; }
.insurer-code strong{ color:var(--teal-dark); font-size:13px; font-weight:500; }
@media (max-width:760px){
  .insurers-list{ gap:12px; }
  .insurers-list > li{ flex-basis:calc((100% - 12px) / 2); }
}
@media (max-width:420px){
  .insurer-card{ padding:10px; }
  .insurer-logo{ height:80px; padding:16px 12px; }
  .insurer-name{ font-size:13px; padding-inline:0; }
  .insurer-code{ font-size:10px; padding-inline:0; }
}

/* pricing table */
.price-table{
  width:100%;
  border-collapse: separate;
  border-spacing: 0;
  background: var(--white);
  border: 1px solid var(--line);
  border-radius: var(--radius);
  overflow:hidden;
  box-shadow: var(--shadow-sm);
}
.price-table thead th{
  text-align:left; font-family: var(--font-mono); font-weight:500; font-size:12px;
  text-transform:uppercase; letter-spacing:0.05em; color: var(--teal);
  background: var(--bg-soft); padding: 15px 22px;
}
.price-table thead th:last-child{ text-align:right; }
.price-table tbody td{ padding: 16px 22px; border-top:1px solid var(--line); font-size:15px; }
.price-table tbody tr:hover td{ background: var(--bg-soft); }
.price-table td.price{ font-family: var(--font-mono); font-weight:500; white-space:nowrap; text-align:right; }
.price-table td.note{ color: var(--ink-soft); font-size:13.5px; }
.price-group-title{ font-family: var(--font-display); font-size:20px; margin: 48px 0 16px; color:var(--teal-dark); }
.price-group-title:first-of-type{ margin-top:0; }
.price-foot{ margin-top:20px; font-size:14px; color:var(--ink-soft); }

/* faq */
.faq-item{ border-top:1px solid var(--line); padding: 22px 0; }
.faq-item:last-child{ border-bottom:1px solid var(--line); }
.faq-item h3{ font-size:16.5px; margin-bottom:8px; }
.faq-item p{ font-size:15px; color:var(--ink-soft); }

/* contact page layout */
.contact-layout{ display:grid; grid-template-columns: 1fr 1fr; gap: 56px; align-items:start; }
.info-block{ margin-bottom: 32px; }
.info-block h3{ font-size:12.5px; text-transform:uppercase; letter-spacing:0.06em; font-family:var(--font-mono); font-weight:500; color:var(--teal); margin-bottom:12px; }
.info-block p, .info-block a{ font-size:16px; }
.info-block a:hover{ color: var(--teal); }
.info-block .reception-contacts{ display:grid; gap:8px; justify-items:start; }
.info-block .reception-contacts a{
  max-width:100%;
  font-family:var(--font-display);
  font-size:clamp(18px, 2.2vw, 24px);
  font-weight:700;
  line-height:1.4;
  color:#007A6B;
  overflow-wrap:anywhere;
  text-decoration-thickness:2px;
  text-underline-offset:5px;
}
.info-block .reception-contacts .reception-phone{ font-size:clamp(26px, 2.8vw, 32px); }
.info-block .reception-contacts a:hover,
.info-block .reception-contacts a:focus-visible{ text-decoration-line:underline; }
html[data-theme="dark"] .info-block .reception-contacts a{ color:var(--teal); }
.hours-row{ display:flex; justify-content:space-between; font-size:15px; padding:8px 0; border-bottom:1px dashed var(--line); }
.hours-row:last-child{ border-bottom:none; }
.hours-row .mono{ font-family: var(--font-mono); }

.form-card{ background: var(--white); border: 1px solid var(--line); border-radius: var(--radius-lg); padding: 34px; box-shadow: var(--shadow-lg); }
.form-row{ margin-bottom: 20px; }
.form-row label{ display:block; font-size:14px; font-weight:600; margin-bottom:8px; color: var(--ink); }
.form-row input, .form-row textarea, .form-row select{
  width:100%; padding: 13px 16px; border:1px solid var(--line); border-radius: var(--radius-sm);
  font-family: var(--font-body); font-size:15px; background: var(--bg-soft);
  color: var(--ink);
  transition: border-color .15s var(--ease), box-shadow .15s var(--ease);
}
.form-row input:focus, .form-row textarea:focus, .form-row select:focus{ outline:none; border-color: var(--accent-1); box-shadow: 0 0 0 3px rgba(0,182,160,0.16); }
.form-two{ display:grid; grid-template-columns:1fr 1fr; gap:20px; }

.map-box{
  border-radius: var(--radius); background: var(--bg-soft);
  aspect-ratio: 16/10; display:flex; align-items:center; justify-content:center; overflow:hidden;
  border: 1px solid var(--line);
  box-shadow: var(--shadow-sm);
}
.map-box svg{ width:100%; height:100%; }

/* CTA band */
.cta-band{
  position:relative;
  background: linear-gradient(135deg, var(--teal-dark), #0A5049 60%, #0E3B60);
  color: var(--white);
  border-radius: var(--radius-lg);
  padding: 52px;
  display:flex;
  align-items:center;
  justify-content:space-between;
  gap: 24px;
  flex-wrap:wrap;
  box-shadow: var(--shadow-lg);
  overflow:hidden;
  isolation:isolate;
}
.cta-band::before{
  content:"";
  position:absolute;
  top:-120px; right:-80px;
  width:320px; height:320px;
  background: radial-gradient(circle, rgba(23,224,192,0.35), rgba(23,224,192,0) 70%);
  z-index:-1;
}
.cta-band h2{ color: var(--white); font-size: clamp(22px,2.6vw,30px); }
.cta-band p{ color: #BFE6DD; margin-top:8px; }
.cta-band .btn-primary{ background: linear-gradient(120deg, var(--gold), #F6C878); color: var(--teal-dark); box-shadow:none; }
.cta-band .btn-primary:hover{ transform: translateY(-1px); }

/* =========================================================
   Theme toggle
   ========================================================= */
.nav-actions{ display:flex; align-items:center; gap: 12px; }

.theme-toggle{
  display:inline-flex;
  align-items:center;
  justify-content:center;
  width: 38px;
  height: 38px;
  border-radius: 50%;
  border: 1px solid var(--line);
  background: var(--white);
  color: var(--teal-dark);
  cursor: pointer;
  flex-shrink: 0;
  transition: border-color .15s var(--ease), transform .15s var(--ease), box-shadow .15s var(--ease);
}
.theme-toggle:hover{ border-color: var(--accent-1); box-shadow: var(--shadow-sm); transform: translateY(-1px); }
.theme-toggle svg{ width: 18px; height: 18px; }
.theme-toggle .icon-moon{ display:none; }
html[data-theme="dark"] .theme-toggle .icon-sun{ display:none; }
html[data-theme="dark"] .theme-toggle .icon-moon{ display:inline-flex; }

/* =========================================================
   Footer
   ========================================================= */
footer{
  padding: 60px 0 32px;
  margin-top: 40px;
}
.footer-grid{
  display:grid;
  grid-template-columns: 1.4fr 1fr 1fr;
  gap: 40px;
  margin-bottom: 40px;
}
.footer-grid h4{ font-family:var(--font-mono); font-size:12.5px; text-transform:uppercase; letter-spacing:0.05em; color:var(--teal); margin-bottom:16px; font-weight:500; }
.footer-links{ list-style:none; margin:0; padding:0; display:flex; flex-direction:column; gap:10px; font-size:14.5px; color: var(--ink-soft); }
.footer-links a:hover{ color: var(--teal-dark); }
.footer-grid > div{ min-width:0; }
.footer-links a[data-cms-phone], .footer-links a[data-cms-email]{
  display:inline-block;
  max-width:100%;
  color:#007A6B;
  font-family:var(--font-display);
  font-size:16px;
  font-weight:700;
  line-height:1.5;
  overflow-wrap:anywhere;
}
.footer-links a[data-cms-phone]{ font-size:19px; }
.footer-links a[data-cms-phone]:hover, .footer-links a[data-cms-email]:hover{
  text-decoration:underline;
  text-underline-offset:4px;
}
html[data-theme="dark"] .footer-links a[data-cms-phone],
html[data-theme="dark"] .footer-links a[data-cms-email]{ color:var(--teal); }

.footer-about p{ color: var(--ink-soft); font-size:14.5px; max-width:34ch; margin-top:12px; }
.footer-bottom{
  display:flex; justify-content:space-between; align-items:center;
  padding-top: 24px; border-top:1px solid var(--line);
  font-size: 13px; color: var(--ink-soft); flex-wrap:wrap; gap:10px;
}
.developer-credit a{ color:var(--teal-dark); font-weight:600; white-space:nowrap; }
.developer-credit a:hover{ color:var(--teal); }

/* Contextual photographs replace the large illustrations in their existing slots. */
.photo-rotator{ position:relative; overflow:hidden; isolation:isolate; }
.hero-photo{ width:100%; aspect-ratio:420/320; border-radius:var(--radius-lg); box-shadow:var(--shadow-lg); background:var(--bg-soft); }
.photo-rotator-spacer{ display:block; width:100%; max-width:320px; aspect-ratio:1; }
.photo-frame{ position:absolute; inset:0; width:100%; height:100%; object-fit:cover; opacity:0; transition:opacity .8s var(--ease); }
.photo-frame.is-active{ opacity:1; }
@media (prefers-reduced-motion:reduce){ .photo-frame{ transition:none; } }

/* =========================================================
   Responsive
   ========================================================= */
@media (max-width: 900px){
  .hero-grid{ grid-template-columns: 1fr; }
  .hero .visual-wrap{ order:-1; }
  .pillars{ grid-template-columns: 1fr; }
  .card-grid{ grid-template-columns: 1fr 1fr; }
  .split{ grid-template-columns: 1fr; }
  .team-grid{ grid-template-columns: 1fr 1fr; }
  .contact-strip{ grid-template-columns: 1fr; }
  .values-list{ grid-template-columns: 1fr; }
  .contact-layout{ grid-template-columns: 1fr; }
  .footer-grid{ grid-template-columns: 1fr 1fr; }
}
@media (max-width: 600px){
  .nav{ padding: 10px; }
  .container{ padding: 0 20px; }
  .card-grid{ grid-template-columns: 1fr; }
  .team-grid{ grid-template-columns: 1fr; }
  .form-two{ grid-template-columns: 1fr; }
  .cta-band{ flex-direction:column; align-items:flex-start; }
  .footer-grid{ grid-template-columns: 1fr; }
}

/* =========================================================
   Dark theme
   ========================================================= */
html[data-theme="dark"]{
  --bg:            #0A1614;
  --bg-soft:       #10201D;
  --ink:           #EAF3F0;
  --ink-soft:      #94AAA5;
  --teal:          #4FE6C9;
  --teal-dark:     #EAF4F0;
  --accent-1:      #12D6B8;
  --accent-2:      #35F0D3;
  --violet:        #A796FF;
  --gold:          #E7B168;
  --gold-soft:     #2C2213;
  --line:          #1E2E2A;
  --white:         #101F1C;

  --shadow-sm: 0 1px 2px rgba(0,0,0,0.35);
  --shadow-md: 0 14px 34px -14px rgba(0,0,0,0.6);
  --shadow-lg: 0 30px 70px -24px rgba(0,0,0,0.7);
  --glow: 0 0 0 1px rgba(18,214,184,0.16), 0 10px 30px -8px rgba(18,214,184,0.4);
}

html[data-theme="dark"] body{
  background-image: radial-gradient(rgba(255,255,255,0.045) 1px, transparent 1px);
}

html[data-theme="dark"] .site-header{
  background: rgba(10, 22, 20, 0.68);
  border-color: rgba(30,46,42,0.7);
}

html[data-theme="dark"] .nav-cta,
html[data-theme="dark"] .btn-primary{
  color: #071310;
}

html[data-theme="dark"] .form-row input,
html[data-theme="dark"] .form-row textarea,
html[data-theme="dark"] .form-row select{
  background: var(--bg);
}

html[data-theme="dark"] .cta-band{
  background: linear-gradient(135deg, #0A211D, #0D2C3B 60%, #0A211D);
}
html[data-theme="dark"] .cta-band p{
  color: #9FCFC3;
}
html[data-theme="dark"] .cta-band .btn-primary{
  color: #2B1B04;
}

html[data-theme="dark"] .form-row input::placeholder,
html[data-theme="dark"] .form-row textarea::placeholder{
  color: #5C726C;
}

html[data-theme="dark"] ::selection{
  background: var(--gold-soft);
  color: var(--ink);
}

/* =========================================================
   Icon grid (homepage services preview)
   ========================================================= */
.icon-grid{
  display:grid;
  grid-template-columns: repeat(6, 1fr);
  gap: 8px;
}
.icon-item{
  display:flex;
  flex-direction:column;
  align-items:center;
  gap: 12px;
  text-align:center;
  padding: 22px 10px;
  border-radius: var(--radius);
  transition: background .2s var(--ease), transform .2s var(--ease), box-shadow .2s var(--ease);
}
.icon-item:hover{ background: var(--white); transform: translateY(-3px); box-shadow: var(--shadow-sm); }
.icon-circle{
  width:56px; height:56px;
  border-radius:50%;
  display:flex; align-items:center; justify-content:center;
  background: linear-gradient(135deg, var(--accent-1), var(--accent-2));
  flex-shrink:0;
}
.icon-circle svg{ width:26px; height:26px; }
.icon-item span{ font-size:13px; font-weight:600; color:var(--teal-dark); line-height:1.3; }

@media (max-width: 900px){ .icon-grid{ grid-template-columns: repeat(3,1fr); } }
@media (max-width: 560px){ .icon-grid{ grid-template-columns: repeat(2,1fr); } }

/* =========================================================
   Photo gallery placeholders
   ========================================================= */
.gallery-grid{
  display:grid;
  grid-template-columns: repeat(4, 1fr);
  gap: 16px;
}
.photo-placeholder{
  aspect-ratio: 4/3;
  border-radius: var(--radius);
  background: var(--bg-soft);
  border: 1px dashed var(--line);
  display:flex;
  flex-direction:column;
  align-items:center;
  justify-content:center;
  gap: 8px;
  color: var(--ink-soft);
  font-size: 12px;
  text-align:center;
  padding: 12px;
}
.photo-placeholder svg{ width:26px; height:26px; opacity:.55; }

@media (max-width: 900px){ .gallery-grid{ grid-template-columns: repeat(2,1fr); } }

/* =========================================================
   Team, grouped by department
   ========================================================= */
.team-dept{ margin-bottom: 40px; }
.team-dept:last-child{ margin-bottom: 0; }
.team-dept h3{
  font-size: 13px;
  text-transform: uppercase;
  letter-spacing: 0.06em;
  font-family: var(--font-mono);
  color: var(--teal);
  margin-bottom: 18px;
  font-weight: 600;
}
.person-grid{
  display:grid;
  grid-template-columns: repeat(auto-fill, minmax(168px, 1fr));
  gap: 14px;
}
.person-card{
  background: var(--white);
  border: 1px solid var(--line);
  border-radius: var(--radius);
  padding: 20px 16px;
  display:flex;
  flex-direction:column;
  align-items:center;
  text-align:center;
  gap: 10px;
  box-shadow: var(--shadow-sm);
  transition: box-shadow .2s var(--ease), transform .2s var(--ease);
}
.person-card:hover{ box-shadow: var(--shadow-md); transform: translateY(-3px); }
.person-avatar{
  width: 112px; height:112px;
  border-radius:26px;
  background: var(--bg-soft);
  display:flex; align-items:center; justify-content:center;
  flex-shrink:0;
}
.person-avatar svg{ width:58%; }
.person-avatar:has([data-illustration]){ background:transparent; }
.person-card .p-name{ font-size: 13.5px; font-weight:600; color: var(--teal-dark); line-height:1.35; }
.person-card .p-role{ font-size: 11.5px; color: var(--ink-soft); }

/* Manager contacts stay outside the profile button so each link is independently usable. */
.person-manager-card{
  grid-column:1 / -1; display:grid; grid-template-columns:minmax(240px, .85fr) minmax(0, 1.5fr);
  min-width:0; overflow:hidden; border:1px solid var(--line); border-radius:var(--radius);
  background:var(--white); box-shadow:var(--shadow-sm);
}
.person-manager-card .person-card{ border:0; border-radius:0; box-shadow:none; background:transparent; }
.person-manager-card .person-card:hover{ transform:none; background:var(--bg-soft); }
.person-manager-card .person-card:focus-visible{ outline-offset:-4px; }
.person-manager-contact{
  display:flex; flex-direction:column; align-items:flex-start; justify-content:center;
  gap:12px; padding:32px 40px; min-width:0; border-left:1px solid var(--line);
}
.person-contact-label{ font:11px var(--font-mono); text-transform:uppercase; letter-spacing:.08em; color:var(--ink-soft); margin:0 0 4px; }
.person-manager-contact a{ color:#007A6B; font:700 clamp(18px,2vw,23px)/1.5 var(--font-display); overflow-wrap:anywhere; max-width:100%; }
.person-manager-contact a:hover{ text-decoration:underline; text-underline-offset:4px; }
.person-manager-contact a:focus-visible{ outline:3px solid var(--teal); outline-offset:4px; border-radius:3px; }
html[data-theme="dark"] .person-manager-contact a{ color:var(--teal); }
@media (max-width:600px){
  .person-manager-card{ grid-template-columns:minmax(0,1fr); }
  .person-manager-contact{ align-items:center; text-align:center; border-left:0; border-top:1px solid var(--line); padding:24px 16px; }
}

/* Employee profiles preserve the existing team cards and site palette. */
button.person-card{ width:100%; font:inherit; color:inherit; cursor:pointer; }
button.person-card:focus-visible{ outline:3px solid var(--teal); outline-offset:4px; }
.person-avatar img{ width:100%; height:100%; object-fit:cover; border-radius:inherit; }
html.person-dialog-open{ overflow:hidden; }
.person-dialog{
  position:fixed; inset:0; margin:auto;
  width:min(1080px, calc(100% - 64px)); max-width:none;
  max-height:calc(100vh - 64px); max-height:calc(100dvh - 64px);
  padding:0; border:1px solid var(--line); border-radius:var(--radius-lg);
  background:var(--bg); color:var(--ink); box-shadow:var(--shadow-lg);
  overflow:auto; overscroll-behavior:contain;
}
.person-dialog::backdrop{
  background:rgba(8,21,18,.48);
  -webkit-backdrop-filter:blur(9px); backdrop-filter:blur(9px);
}
.person-dialog[open]{ animation:person-profile-in .18s var(--ease); }
.person-dialog-layout{ display:grid; grid-template-columns:1fr 1fr; min-height:560px; }
.person-dialog-photo{
  min-width:0; background:var(--bg-soft); display:flex; flex-direction:column;
  align-items:center; justify-content:center; gap:20px; position:relative;
}
.person-dialog-photo > img{ width:100%; height:100%; object-fit:cover; position:absolute; inset:0; }
.person-dialog-photo > svg{ width:42%; max-width:220px; }
.person-dialog-photo > p{ color:var(--ink-soft); font-size:14px; }
.person-dialog-photo.is-illustration{ padding:36px; }
.person-dialog-photo.is-illustration > img{ position:static; width:min(100%,400px); height:auto; max-height:calc(100% - 56px); object-fit:contain; border-radius:32px; }
.person-dialog-photo.is-illustration > p{ margin:0; text-align:center; font-size:12px; }
.person-dialog-info{ align-self:center; padding:80px 48px; min-width:0; }
.person-dialog-info h2{ margin:22px 0 16px; font-size:clamp(26px,3vw,38px); line-height:1.2; overflow-wrap:anywhere; }
.person-dialog-role{ color:var(--teal); font-size:18px; font-weight:600; }
.person-dialog-bio{ margin-top:28px; color:var(--ink-soft); line-height:1.8; white-space:pre-line; }
.person-dialog-bio section{ padding:0; margin:0 0 28px; }
.person-dialog-bio section:last-child{ margin-bottom:0; }
.person-dialog-bio h3{ font-size:18px; margin:0 0 12px; }
.person-dialog-bio p + p{ margin-top:12px; }
.person-profile-timeline{ list-style:none; padding:0 0 0 18px; margin:0; border-left:2px solid var(--line); white-space:normal; }
.person-profile-timeline li{ position:relative; margin-bottom:22px; }
.person-profile-timeline li:last-child{ margin-bottom:0; }
.person-profile-timeline li::before{ content:''; position:absolute; left:-23px; top:8px; width:8px; height:8px; border-radius:50%; background:var(--teal); }
.person-profile-period{ display:block; font:12px var(--font-mono); color:var(--teal); margin-bottom:6px; }
.person-profile-timeline h4{ font:600 15px var(--font-body); color:var(--ink); margin:0 0 6px; }
.person-dialog-close{
  position:sticky; top:16px; float:right; z-index:1; margin:16px 16px -64px 0;
  width:48px; height:48px; display:flex; align-items:center; justify-content:center;
  border:1px solid var(--line); border-radius:50%; background:var(--bg); color:var(--ink); cursor:pointer;
}
.person-dialog-close svg{ width:24px; height:24px; }
.person-dialog-close:hover{ color:var(--teal); border-color:var(--teal); }
.person-dialog-close:focus-visible{ outline:3px solid var(--teal); outline-offset:3px; }
@keyframes person-profile-in{ from{ opacity:0; transform:translateY(12px); } to{ opacity:1; transform:translateY(0); } }
@media (max-width:700px){
  .person-dialog{ width:calc(100% - 24px); max-height:calc(100vh - 24px); max-height:calc(100dvh - 24px); border-radius:var(--radius); }
  .person-dialog-layout{ grid-template-columns:1fr; min-height:0; }
  .person-dialog-photo{ min-height:300px; height:42vh; height:42dvh; max-height:400px; }
  .person-dialog-photo > svg{ width:140px; }
  .person-dialog-info{ padding:32px 24px 40px; }
  .person-dialog-info h2{ font-size:28px; }
}
@media (prefers-reduced-motion:reduce){ .person-dialog[open]{ animation:none; } }

/* Clinic photo gallery uses the site's existing radii, colours and typography. */
.clinic-gallery-grid{ display:grid; grid-template-columns:repeat(3,minmax(0,1fr)); gap:28px 20px; }
.clinic-gallery-item{ margin:0; min-width:0; scroll-margin-top:120px; }
.gallery-open,.gallery-preview{ display:block; position:relative; border-radius:var(--radius); overflow:hidden; background:var(--bg-soft); }
.gallery-open img,.gallery-preview img{ display:block; width:100%; height:auto; aspect-ratio:4/3; object-fit:cover; transition:transform .2s var(--ease); }
.gallery-open:hover img,.gallery-preview:hover img{ transform:scale(1.025); }
.gallery-open:focus-visible,.gallery-preview:focus-visible{ outline:3px solid var(--teal); outline-offset:4px; }
.gallery-zoom{ position:absolute; bottom:12px; right:12px; width:36px; height:36px; display:flex; align-items:center; justify-content:center; border-radius:50%; background:var(--bg); color:var(--teal-dark); font-size:24px; }
.clinic-gallery-item figcaption{ margin-top:12px; color:var(--ink-soft); font-size:14px; }
.gallery-preview span{ display:block; padding:12px; font-size:13px; color:var(--ink-soft); }
.gallery-all-link{ margin-top:24px; }
html.gallery-dialog-open{ overflow:hidden; }
.gallery-dialog{
  position:fixed; inset:0; margin:auto; width:min(1160px,calc(100% - 64px)); max-width:none;
  max-height:calc(100vh - 48px); max-height:calc(100dvh - 48px); overflow:auto; overscroll-behavior:contain;
  border:1px solid var(--line); border-radius:var(--radius-lg); padding:24px;
  background:var(--bg); color:var(--ink); box-shadow:var(--shadow-lg);
}
.gallery-dialog::backdrop{ background:rgba(8,21,18,.65); -webkit-backdrop-filter:blur(9px); backdrop-filter:blur(9px); }
.gallery-close{
  display:block; position:sticky; top:0; z-index:1; margin-left:auto; margin-bottom:12px;
  width:44px; height:44px; border:1px solid var(--line); border-radius:50%;
  background:var(--bg); color:var(--ink); font-size:30px; line-height:1; cursor:pointer;
}
.gallery-close:hover{ border-color:var(--teal); color:var(--teal); }
.gallery-close:focus-visible{ outline:3px solid var(--teal); outline-offset:3px; }
.gallery-viewer{ margin:0; }
.gallery-image-stage{ display:flex; align-items:center; justify-content:center; height:min(62vh,680px); height:min(62dvh,680px); background:var(--bg-soft); border-radius:var(--radius-sm); overflow:hidden; }
.gallery-image-stage img{ width:100%; height:100%; object-fit:contain; }
.gallery-image-stage img[hidden],.gallery-image-stage p[hidden]{ display:none; }
.gallery-image-stage p{ padding:24px; color:var(--ink-soft); text-align:center; }
.gallery-viewer figcaption{ margin-top:16px; font-size:15px; color:var(--ink); text-align:center; }
.gallery-controls{ display:flex; align-items:center; justify-content:center; gap:24px; margin-top:16px; }
.gallery-controls button{ min-width:48px; padding:10px 16px; }
#gallery-counter{ font:13px var(--font-mono); color:var(--ink-soft); }
@media (max-width:900px){ .clinic-gallery-grid{ grid-template-columns:repeat(2,minmax(0,1fr)); } }
@media (max-width:600px){
  .clinic-gallery-grid{ grid-template-columns:1fr; gap:24px; }
  .gallery-dialog{ width:calc(100% - 24px); padding:12px; border-radius:var(--radius); max-height:calc(100vh - 24px); max-height:calc(100dvh - 24px); }
  .gallery-image-stage{ height:55vh; height:55dvh; }
}
@media (prefers-reduced-motion:reduce){ .gallery-open img,.gallery-preview img{ transition:none; } }

/* =========================================================
   Referral / doctor collaboration steps (reuses .pillars look)
   ========================================================= */
.mini-note{
  font-size: 13.5px;
  color: var(--ink-soft);
  background: var(--bg-soft);
  border: 1px solid var(--line);
  border-radius: var(--radius-sm);
  padding: 14px 18px;
  margin-top: 24px;
}

/* Supplied brand asset; surrounding design stays unchanged. */
.brand-logo { width:44px; height:44px; object-fit:contain; border-radius:50%; flex-shrink:0; }
.spam-trap { position:absolute; width:1px; height:1px; overflow:hidden; clip-path:inset(50%); }
[hidden] { display:none !important; }
button:disabled { opacity:.65; cursor:wait; }
#turnstile-container { margin:0; }
#turnstile-container.is-interactive { margin-top:12px; }
#inquiry-form > button[type="submit"] { margin-top:16px; }
.menu-toggle { display:none; border:1px solid var(--line); background:var(--white); color:var(--ink); border-radius:var(--radius-pill); padding:8px 12px; font:inherit; cursor:pointer; }
@media (max-width:1100px) {
 .menu-toggle { display:block; }
 .nav { position:relative; }
 .nav-links.is-open { display:flex; position:absolute; top:100%; left:0; right:0; flex-direction:column; align-items:stretch; gap:0; background:var(--white); border:1px solid var(--line); border-radius:var(--radius-lg); padding:12px 20px; box-shadow:var(--shadow-md); }
 .nav-links.is-open a { display:block; padding:10px; }
}
@media (max-width:420px) {
 .nav { padding-left:12px; gap:6px; }
 .nav .logo { font-size:14px; gap:6px; }
 .nav .brand-logo { width:34px; height:34px; }
 .nav-cta { padding:10px 12px; font-size:12px; }
 .menu-toggle { font-size:12px; padding:8px; }
}
@media (max-width:420px) {
 .nav-actions { gap:6px; }
 .theme-toggle { width:32px; height:32px; }
 .nav .logo { min-width:0; }
}
@media (max-width:420px) {
 .price-table thead th, .price-table tbody td { padding-left:10px; padding-right:10px; }
}

/* Editable content keeps the original page layout. */
.site-announcement{background:var(--bg-soft);border-bottom:1px solid var(--line);padding:17px 0;color:var(--ink)}
.site-announcement .container{display:flex;gap:8px 22px;align-items:baseline;flex-wrap:wrap}
.site-announcement strong{font-size:14px}.site-announcement p{font-size:13px;white-space:pre-line;overflow-wrap:anywhere;margin:0;flex:1;min-width:200px}
.site-announcement.closure{background:#fff2dd;color:#674c24;border-color:#e9d5b5}
[data-theme="dark"] .site-announcement.closure{background:#382c1c;color:#ffe2b1;border-color:#665033}
.cms-preview-note{background:#154c3d;color:white;padding:10px 20px;text-align:center;font:12px/1.5 var(--font-body);letter-spacing:.02em}
.person-avatar img{width:100%;height:100%;object-fit:cover}

/* Desktop phone QR dialog. Native tel: links are retained on mobile. */
html.phone-qr-open{ overflow:hidden; }
.phone-qr-dialog{
  width:min(420px, calc(100% - 32px));
  max-height:calc(100vh - 32px);
  max-height:calc(100dvh - 32px);
  padding:36px 28px 28px;
  border:1px solid var(--line);
  border-radius:var(--radius-lg);
  background:var(--white);
  color:var(--ink);
  box-shadow:var(--shadow-lg);
  text-align:center;
  overflow:auto;
}
.phone-qr-dialog::backdrop{ background:rgba(8,21,18,.54); -webkit-backdrop-filter:blur(7px); backdrop-filter:blur(7px); }
.phone-qr-dialog[open]{ animation:person-profile-in .18s var(--ease); }
.phone-qr-dialog .eyebrow{ font-size:10px; margin:8px 0 18px; }
.phone-qr-dialog h2{ font-size:25px; line-height:1.3; margin:0 0 12px; }
.phone-qr-dialog #phone-qr-help{ color:var(--ink-soft); font-size:14px; line-height:1.65; }
.phone-qr-close{ position:absolute; top:12px; right:12px; width:34px; height:34px; padding:8px; display:grid; place-items:center; border:1px solid var(--line); border-radius:50%; background:var(--bg-soft); color:var(--ink); cursor:pointer; }
.phone-qr-close svg{ width:18px; height:18px; fill:none; stroke:currentColor; stroke-width:1.8; stroke-linecap:round; }
.phone-qr-close:hover{ border-color:var(--teal); color:var(--teal); }
.phone-qr-frame{ display:grid; place-items:center; width:min(288px, 100%); min-height:180px; padding:12px; margin:22px auto 16px; border-radius:16px; background:#fff; color:#081512; font-size:14px; }
.phone-qr-frame svg{ display:block; width:100%; height:auto; }
.phone-qr-number{ font-family:var(--font-display); font-weight:700; font-size:clamp(20px, 4vw, 26px); color:var(--teal-dark); line-height:1.4; overflow-wrap:anywhere; user-select:all; }
.phone-qr-direct{ display:inline-block; margin-top:14px; padding:8px 4px; color:var(--ink-soft); font-size:13px; text-decoration:underline; text-underline-offset:3px; }
.phone-qr-direct:hover{ color:var(--teal); }
@media (prefers-reduced-motion:reduce){ .phone-qr-dialog[open]{ animation:none; } }