/* ==========================================================================
   ΓΥΝΑΙΚΟΛΟΓΙΚΟ ΙΑΤΡΕΙΟ ΚΟΛΩΝΑΚΙΟΥ — styles.css
   Grixton demo · static build · no framework, no build step
   ==========================================================================

   ┌────────────────────────────────────────────────────────────────────┐
   │  CONFIG — REBRAND SWAP POINTS                                      │
   │  Find-and-replace these exact strings across *.html, main.js,      │
   │  send.php and sitemap.xml to rebrand the whole site.               │
   ├────────────────────────────────────────────────────────────────────┤
   │  PRACTICE NAME   Γυναικολογικό Ιατρείο Κολωνακίου                  │
   │  TAGLINE         Μαιευτική & Γυναικολογία                          │
   │  ADDRESS         Πατριάρχου Ιωακείμ 34, Κολωνάκι, Αθήνα 106 75     │
   │  PHONE (display) 210 7248 190                                      │
   │  PHONE (tel:)    +302107248190                                     │
   │  MOBILE(display) 694 7710 620                                      │
   │  MOBILE (tel:)   +306947710620                                     │
   │  VIBER           viber://chat?number=%2B306947710620               │
   │  EMAIL           info@gynaikologiko-kolonaki.gr                    │
   │  DOCTOR          Δρ. Άννα Βασιλείου                                │
   │  DOMAIN          https://gynaikologiko-kolonaki.gr                 │
   │  HOURS           single source of truth = OPENING_HOURS in main.js │
   ├────────────────────────────────────────────────────────────────────┤
   │  BRAND COLOURS — edit ONLY inside :root and [data-theme="dark"]    │
   │  --primary      plum      #6E3448   (buttons, CTA bands)           │
   │  --accent       rosewood  #A96B62   (arcs, icons, dates)           │
   │  --apricot                #F0C9A8   (pregnancy / calculator only)  │
   │  --surface-2    cream     #FBF6F4   (tinted section bands)         │
   │  No hex value may appear anywhere outside these two blocks,        │
   │  except the three fixed social-brand colours flagged below.        │
   ├────────────────────────────────────────────────────────────────────┤
   │  Z-INDEX SCALE                                                     │
   │   1  in-flow stacking              35  demo ribbon                 │
   │  10  floating hero card            40  sticky header               │
   │  20  sticky sidebar                45  nav dropdown                │
   │  30  floats (viber, back-to-top)   60  mobile sheet                │
   │                                    70  cookie banner               │
   │                                   100  skip link                   │
   └────────────────────────────────────────────────────────────────────┘
   ========================================================================== */

/* ── 1. TOKENS ─────────────────────────────────────────────────────────── */

:root{
  --surface:      #FFFFFF;
  --surface-2:    #FBF6F4;
  --tint:         #F9EFE7;
  --ink:          #2E1A24;
  --ink-muted:    #6B5A5E;
  --nav-ink:      #5E4B50;
  --line:         #EBDDD9;
  --line-2:       #E0CFCA;
  --primary:      #6E3448;
  --primary-hover:#57283A;
  --primary-text: #FFFFFF;
  --accent:       #A96B62;
  --accent-text:  #92544C;
  --accent-soft:  #F3E2E4;
  --apricot:      #F0C9A8;
  --hover-wash:   rgba(169,107,98,.12);
  --shadow:       0 1px 2px rgba(46,26,36,.05), 0 6px 20px rgba(46,26,36,.06);
  --shadow-lift:  0 2px 4px rgba(46,26,36,.06), 0 12px 32px rgba(46,26,36,.10);

  /* fixed social-brand colours — deliberately outside the theme system.
     --on-brand is the text/glyph colour that sits on top of them and must
     stay white in both themes to keep contrast on those fixed fills. */
  --viber:     #7360F2;
  --facebook:  #1877F2;
  --instagram: #C13584;
  --on-brand:  #FFFFFF;
  --scrim:     rgba(46,26,36,.45);

  --font-display:"Cormorant Garamond", Georgia, "Times New Roman", serif;
  --font-body:   "Commissioner", -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, "Helvetica Neue", Arial, sans-serif;

  --r-card:  18px;
  --r-btn:    9px;
  --r-input: 10px;
  --r-img:   20px;
  --r-pill: 999px;

  --section-y: clamp(3rem, 8vw, 6.5rem);
  --gutter:    clamp(1.15rem, 4vw, 2rem);
  --maxw:      1180px;
  --prose:     70ch;
  --header-h:  64px;
  --ease:      cubic-bezier(.22,1,.36,1);
}

[data-theme="dark"]{
  --surface:      #1A1016;
  --surface-2:    #241720;
  --tint:         #2A1C18;
  --ink:          #F3EAE9;
  --ink-muted:    #B39FA4;
  --nav-ink:      #C4B2B6;
  --line:         #33222C;
  --line-2:       #402C36;
  --primary:      #F0C9A8;
  --primary-hover:#F7DCC2;
  --primary-text: #2E1A24;
  --accent:       #E0A99C;
  --accent-text:  #E0A99C;
  --accent-soft:  #3A252C;
  --apricot:      #F0C9A8;
  --hover-wash:   rgba(224,169,156,.11);
  --shadow:       0 1px 2px rgba(0,0,0,.4), 0 10px 30px rgba(0,0,0,.35);
  --shadow-lift:  0 2px 6px rgba(0,0,0,.45), 0 16px 40px rgba(0,0,0,.45);
}

/* ── 2. RESET ──────────────────────────────────────────────────────────── */

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

body{
  margin:0;
  font-family:var(--font-body);
  font-size:1rem;
  line-height:1.7;
  color:var(--ink);
  background:var(--surface);
  -webkit-font-smoothing:antialiased;
  overflow-x:hidden;
}
body.is-locked{ overflow:hidden; }

h1,h2,h3,h4,p,figure,blockquote,dl,dd{ margin:0; }
ul,ol{ margin:0; padding:0; }
li{ list-style:none; }
img,svg,video,iframe{ display:block; max-width:100%; }
img{ height:auto; }
button,input,select,textarea{ font:inherit; color:inherit; }
button{ background:none; border:0; padding:0; cursor:pointer; }
a{ color:var(--accent-text); text-underline-offset:3px; }
table{ border-collapse:collapse; width:100%; }
summary::-webkit-details-marker{ display:none; }
:target{ scroll-margin-top:calc(var(--header-h) + 24px); }

:focus-visible{ outline:2px solid var(--accent); outline-offset:3px; border-radius:4px; }

.skip-link{
  position:absolute; left:8px; top:-100px; z-index:100;
  background:var(--primary); color:var(--primary-text);
  padding:.7rem 1.1rem; border-radius:var(--r-btn);
  font-weight:600; text-decoration:none; transition:top .15s var(--ease);
}
.skip-link:focus{ top:8px; }

/* ── 3. TYPOGRAPHY ─────────────────────────────────────────────────────── */

h1,.h1{
  font-family:var(--font-display); font-weight:600;
  font-size:clamp(2.2rem,6vw,3.6rem); line-height:1.1;
  letter-spacing:-.01em; color:var(--ink);
}
h2,.h2{
  font-family:var(--font-display); font-weight:600;
  font-size:clamp(1.8rem,4vw,2.6rem); line-height:1.15;
  letter-spacing:-.005em; color:var(--ink);
}
h3,.h3{ font-family:var(--font-body); font-weight:600; font-size:1.1rem; line-height:1.4; color:var(--ink); }
h4{ font-family:var(--font-body); font-weight:600; font-size:1rem; line-height:1.45; color:var(--ink); }

.eyebrow{
  display:block; font-size:.72rem; font-weight:600; line-height:1.4;
  text-transform:uppercase; letter-spacing:.1em; color:var(--accent-text);
}
.lede{ font-size:1.06rem; color:var(--ink-muted); }
.muted{ color:var(--ink-muted); }
.small{ font-size:.85rem; }
.prose{ max-width:var(--prose); }
.prose p{ color:var(--ink-muted); }
.prose p + p{ margin-top:1rem; }
.prose h2{ margin:2.4rem 0 .9rem; }
.prose h3{ margin:1.9rem 0 .6rem; }
.prose ul,.prose ol{ margin:1rem 0; padding-left:1.2rem; }
.prose ol li{ list-style:decimal; }
.prose ul li{ list-style:disc; }
.prose li{ margin-bottom:.5rem; color:var(--ink-muted); }
.prose li::marker{ color:var(--accent); }
.prose a{ color:var(--accent-text); }

.center{ text-align:center; }
.nowrap{ white-space:nowrap; }
.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;
}

/* ── 4. LAYOUT ─────────────────────────────────────────────────────────── */

.wrap{ width:100%; max-width:var(--maxw); margin-inline:auto; padding-inline:var(--gutter); }
.section{ padding-block:var(--section-y); position:relative; }
.section--tint{ background:var(--tint); }
.section--soft{ background:var(--surface-2); }
.section-head{ margin-bottom:2rem; }
.section-head p{ margin-top:.7rem; color:var(--ink-muted); max-width:60ch; }
.section-head.center p{ margin-inline:auto; }
.section-head h2{ margin-top:.5rem; }

/* signature arc — a 64px open curve under section headings */
.arc-rule{ display:block; width:64px; height:12px; margin-top:.9rem; color:var(--accent); }
.center .arc-rule,.arc-rule--c{ margin-inline:auto; }
.arc-rule svg{ width:100%; height:100%; overflow:visible; }

.arc-bg{ position:absolute; pointer-events:none; color:var(--accent); opacity:.16; z-index:0; }
[data-theme="dark"] .arc-bg{ opacity:.24; }

.grid{ display:grid; gap:1rem; }
.stack > * + *{ margin-top:1rem; }

/* ── 5. BUTTONS, LINKS, PILLS ──────────────────────────────────────────── */

.btn{
  display:inline-flex; align-items:center; justify-content:center; gap:.5rem;
  min-height:44px; padding:.72rem 1.25rem;
  font-family:var(--font-body); font-size:.95rem; font-weight:600; line-height:1.2;
  border-radius:var(--r-btn); text-decoration:none; white-space:nowrap;
  border:1px solid transparent; cursor:pointer;
  transition:background-color .16s var(--ease), color .16s var(--ease),
             border-color .16s var(--ease), transform .16s var(--ease);
}
.btn svg{ width:17px; height:17px; flex:none; }
.btn--primary{ background:var(--primary); color:var(--primary-text); border-color:var(--primary); }
.btn--primary:hover{ background:var(--primary-hover); border-color:var(--primary-hover); }
.btn--ghost{ background:transparent; color:var(--ink); border-color:var(--line-2); }
.btn--ghost:hover{ background:var(--hover-wash); border-color:var(--accent); }
.btn--quiet{ background:var(--surface); color:var(--ink); border-color:var(--line-2); }
.btn--quiet:hover{ background:var(--hover-wash); border-color:var(--accent); }
.btn--sm{ min-height:40px; padding:.5rem .95rem; font-size:.875rem; }
.btn--block{ width:100%; }
.btn[disabled],.btn[aria-disabled="true"]{ opacity:.55; cursor:not-allowed; }
/* button that sits ON a --primary band: inverts to the surface colour */
.btn--onband{ background:var(--surface); color:var(--ink); border-color:var(--surface); }
.btn--onband:hover{ background:var(--surface-2); border-color:var(--surface-2); }

.link-arrow{
  display:inline-flex; align-items:center; gap:.4rem;
  font-weight:600; font-size:.92rem; color:var(--accent-text); text-decoration:none;
}
.link-arrow svg{ width:14px; height:14px; transition:transform .16s var(--ease); }
.link-arrow:hover svg{ transform:translateX(3px); }
@media (prefers-reduced-motion:reduce){ .link-arrow:hover svg{ transform:none; } }

.pill{
  display:inline-flex; align-items:center; gap:.45rem;
  padding:.3rem .72rem; border-radius:var(--r-pill);
  font-size:.78rem; font-weight:600; line-height:1.4;
  background:var(--accent-soft); color:var(--accent-text);
}
.dot{ width:7px; height:7px; border-radius:50%; background:currentColor; flex:none; }

/* ── 6. CARDS & MEDIA ──────────────────────────────────────────────────── */

.card{
  background:var(--surface); border:1px solid var(--line);
  border-radius:var(--r-card); padding:1.4rem; box-shadow:var(--shadow);
}
.card--flat{ box-shadow:none; }
a.card{
  display:block; text-decoration:none; color:inherit;
  transition:transform .15s var(--ease), border-color .15s var(--ease), box-shadow .15s var(--ease);
}
a.card:hover{ transform:translateY(-2px); border-color:var(--line-2); box-shadow:var(--shadow-lift); }
@media (prefers-reduced-motion:reduce){ a.card:hover{ transform:none; } }

.icon-circle{
  width:44px; height:44px; border-radius:50%; flex:none;
  display:grid; place-items:center; background:var(--accent-soft); color:var(--accent-text);
}
.icon-circle svg{ width:21px; height:21px; }

.media{ border-radius:var(--r-img); overflow:hidden; background:var(--surface-2); position:relative; }
.media img{ width:100%; height:100%; object-fit:cover; }
/* Οι δύο αναλογίες του φωτογραφικού υλικού. Η κλάση επιλέγεται αυτόματα
   από τον προσανατολισμό του πραγματικού αρχείου (ratioClass στο build),
   ώστε container και αρχείο να μη ξεσυγχρονίζονται ποτέ.
     ratio-34  πορτρέτα      hero-doctor, doctor-portrait   (1792x2400 πηγή)
     ratio-43  όλες οι άλλες                                (2400x1792 πηγή)
   Τα αρχεία είναι 56:75 / 75:56 — απόκλιση 0,45% από 3:4 / 4:3, που με
   object-fit:cover σημαίνει ανεπαίσθητο crop και μηδενικό CLS, αφού το
   ύψος το ορίζει πάντα το container. */
.ratio-34{ aspect-ratio:3/4; }
.ratio-43{ aspect-ratio:4/3; }
.ratio-169{ aspect-ratio:16/9; }

/* ── 7. EMERGENCY STRIP ────────────────────────────────────────────────── */

.emergency{ background:var(--primary); color:var(--primary-text); position:relative; }
[data-theme="dark"] .emergency{ background:var(--tint); color:var(--apricot); }
.emergency[hidden]{ display:none; }
.emergency__link{
  display:flex; align-items:center; justify-content:center; gap:.5rem;
  min-height:36px; padding:.4rem 2.75rem .4rem 1rem;
  color:inherit; text-decoration:none;
  font-size:.8rem; font-weight:500; line-height:1.35; text-align:center;
}
.emergency__link strong{ font-weight:600; white-space:nowrap; }
.emergency__link svg{ width:15px; height:15px; flex:none; }
.emergency__close{
  /* 44×44 hit area even though the strip is only ~36px tall — the button is
     absolutely positioned and vertically centred, so it may exceed the band. */
  position:absolute; right:2px; top:50%; transform:translateY(-50%);
  width:44px; height:44px; display:grid; place-items:center;
  color:inherit; opacity:.75; border-radius:var(--r-btn);
}
.emergency__close:hover{ opacity:1; background:rgba(255,255,255,.14); }
[data-theme="dark"] .emergency__close:hover{ background:var(--hover-wash); }
.emergency__close svg{ width:15px; height:15px; }

/* ── 8. HEADER & NAV ───────────────────────────────────────────────────── */

.header{
  position:sticky; top:0; z-index:40;
  background:color-mix(in srgb, var(--surface) 88%, transparent);
  border-bottom:1px solid var(--line);
}
@supports (backdrop-filter:blur(1px)){
  .header{ backdrop-filter:saturate(1.6) blur(14px); -webkit-backdrop-filter:saturate(1.6) blur(14px); }
}
@supports not (color-mix(in srgb, red 50%, blue)){ .header{ background:var(--surface); } }

.header__inner{
  display:flex; align-items:center; gap:1rem;
  min-height:var(--header-h); padding-block:.5rem;
}

.logo{
  display:flex; align-items:center; gap:.6rem;
  color:inherit; text-decoration:none; white-space:nowrap; margin-right:auto;
}
.logo__mark{ width:34px; height:34px; flex:none; color:var(--accent); }
.logo__text{ display:flex; flex-direction:column; line-height:1.12; }
.logo__name{ font-family:var(--font-display); font-size:1.06rem; font-weight:600; color:var(--ink); }
.logo__sub{ font-size:.62rem; font-weight:600; letter-spacing:.09em; text-transform:uppercase; color:var(--ink-muted); }

.nav{ display:none; }
.nav__list{ display:flex; align-items:center; gap:.15rem; }
.nav__link{
  position:relative; display:inline-flex; align-items:center; gap:.35rem;
  padding:.5rem .7rem; border-radius:8px;
  font-size:.9rem; font-weight:500; line-height:1.2;
  color:var(--nav-ink); text-decoration:none; white-space:nowrap;
  transition:background-color .16s var(--ease), color .16s var(--ease);
}
.nav__link:hover,.nav__link:focus-visible{ background:var(--hover-wash); color:var(--ink); }
.nav__link[aria-current="page"]{ color:var(--ink); font-weight:500; }
.nav__link[aria-current="page"]::before{
  content:""; width:6px; height:6px; border-radius:50%;
  background:var(--accent); flex:none;
}
.nav__caret{ width:11px; height:11px; transition:transform .18s var(--ease); }
.nav__item--has-menu[data-open="true"] .nav__caret{ transform:rotate(180deg); }
.nav__item{ position:relative; }

.dropdown{
  position:absolute; top:calc(100% + 8px); left:0; z-index:45;
  min-width:310px; padding:.5rem;
  background:var(--surface-2); border:1px solid var(--line-2); border-radius:14px;
  box-shadow:var(--shadow-lift);
  opacity:0; visibility:hidden; transform:translateY(-6px);
  transition:opacity .16s var(--ease), transform .16s var(--ease), visibility .16s;
}
.nav__item[data-open="true"] .dropdown{ opacity:1; visibility:visible; transform:translateY(0); }
.dropdown__link{
  position:relative; display:block; padding:10px .8rem 10px .95rem;
  border-radius:10px; text-decoration:none; color:inherit;
  transition:background-color .16s var(--ease);
}
.dropdown__link::before{
  content:""; position:absolute; left:0; top:6px; bottom:6px; width:2px;
  background:var(--accent); border-radius:2px;
  transform:scaleY(0); transform-origin:center;
  transition:transform .18s var(--ease);
}
.dropdown__link:hover{ background:var(--hover-wash); }
.dropdown__link:hover::before,.dropdown__link:focus-visible::before{ transform:scaleY(1); }
.dropdown__title{
  display:block; font-size:.9rem; font-weight:600; color:var(--ink);
  transition:color .16s var(--ease);
}
.dropdown__link:hover .dropdown__title{ color:var(--accent-text); }
.dropdown__desc{ display:block; font-size:.78rem; line-height:1.4; color:var(--ink-muted); margin-top:.1rem; }
/* flex, not block — it also carries .link-arrow, and display:block would
   drop the arrow onto its own line. */
.dropdown__all{
  display:flex; align-items:center; gap:.4rem;
  margin-top:.25rem; padding:.55rem .95rem;
  border-top:1px solid var(--line-2);
}
.dropdown__grid{ display:block; }

.header__actions{ display:flex; align-items:center; gap:.4rem; }
.header__phone{ display:none; }
.header__cta{ display:none; }

.icon-btn{
  width:44px; height:44px; flex:none; display:grid; place-items:center;
  border-radius:var(--r-btn); color:var(--nav-ink);
  transition:background-color .16s var(--ease), color .16s var(--ease);
}
.icon-btn:hover{ background:var(--hover-wash); color:var(--ink); }
.icon-btn svg{ width:20px; height:20px; }
.theme-toggle .icon-sun{ display:none; }
[data-theme="dark"] .theme-toggle .icon-sun{ display:block; }
[data-theme="dark"] .theme-toggle .icon-moon{ display:none; }

/* ── 9. MOBILE SHEET ───────────────────────────────────────────────────── */

.sheet-backdrop{
  position:fixed; inset:0; z-index:59;
  background:var(--scrim); opacity:0; visibility:hidden;
  transition:opacity .22s var(--ease), visibility .22s;
}
.sheet-backdrop[data-open="true"]{ opacity:1; visibility:visible; }

.sheet{
  position:fixed; top:0; right:0; bottom:0; z-index:60;
  width:min(92vw,380px);
  display:flex; flex-direction:column;
  background:var(--surface); border-left:1px solid var(--line);
  transform:translateX(100%); visibility:hidden;
  transition:transform .26s var(--ease), visibility .26s;
}
.sheet[data-open="true"]{ transform:translateX(0); visibility:visible; }
.sheet__head{
  display:flex; align-items:center; justify-content:space-between; gap:1rem;
  padding:.75rem 1rem; border-bottom:1px solid var(--line); flex:none;
}
.sheet__body{ flex:1; overflow-y:auto; padding:1rem; overscroll-behavior:contain; }
.sheet__link{
  display:flex; align-items:center; gap:.5rem;
  min-height:48px; padding:.6rem .75rem; border-radius:10px;
  font-size:1rem; font-weight:500; color:var(--ink); text-decoration:none;
}
.sheet__link:hover{ background:var(--hover-wash); }
.sheet__link[aria-current="page"]::before{
  content:""; width:6px; height:6px; border-radius:50%; background:var(--accent); flex:none;
}
.sheet details > summary{
  display:flex; align-items:center; justify-content:space-between; gap:.5rem;
  min-height:48px; padding:.6rem .75rem; border-radius:10px;
  font-size:1rem; font-weight:500; color:var(--ink); cursor:pointer; list-style:none;
}
.sheet details > summary:hover{ background:var(--hover-wash); }
.sheet details > summary svg{ width:14px; height:14px; transition:transform .2s var(--ease); }
.sheet details[open] > summary svg{ transform:rotate(180deg); }
.sheet__sub{ padding:.15rem 0 .35rem .75rem; margin-left:.4rem; border-left:1px solid var(--line); }
.sheet__sub a{
  display:block; min-height:44px; padding:.6rem .75rem; border-radius:8px;
  font-size:.92rem; color:var(--ink-muted); text-decoration:none;
}
.sheet__sub a:hover{ background:var(--hover-wash); color:var(--ink); }
.sheet__foot{
  flex:none; display:grid; grid-template-columns:1fr 1fr; gap:.5rem;
  padding:.75rem 1rem calc(.75rem + env(safe-area-inset-bottom));
  border-top:1px solid var(--line); background:var(--surface);
}
.sheet__meta{ margin-top:1.25rem; padding-top:1rem; border-top:1px solid var(--line); font-size:.86rem; color:var(--ink-muted); }
.sheet__meta a{ color:var(--accent-text); text-decoration:none; font-weight:600; }

/* ── 10. DEMO RIBBON ───────────────────────────────────────────────────── */

.demo-ribbon{
  position:fixed; z-index:35; right:10px; top:calc(var(--header-h) + 46px);
  display:inline-flex; align-items:center; gap:.35rem;
  padding:.28rem .6rem; border-radius:var(--r-pill);
  background:var(--surface-2); border:1px solid var(--line-2); color:var(--ink-muted);
  font-size:.66rem; font-weight:600; letter-spacing:.02em; white-space:nowrap;
  box-shadow:var(--shadow); pointer-events:none;
}
.demo-ribbon .dot{ width:5px; height:5px; background:var(--accent); }
@media (min-width:1080px){ .demo-ribbon{ top:calc(var(--header-h) + 50px); right:16px; font-size:.7rem; } }

/* ── 11. HERO ──────────────────────────────────────────────────────────── */

.hero{ position:relative; padding-block:2.25rem var(--section-y); overflow:hidden; }
.hero__inner{ display:grid; gap:1.75rem; position:relative; z-index:1; }
.hero h1{ margin-top:.6rem; }
.hero__sub{ margin-top:1rem; font-size:1.06rem; color:var(--ink-muted); max-width:52ch; }
.hero__cta{ display:flex; flex-wrap:wrap; gap:.65rem; margin-top:1.5rem; }
/* DOM order is copy → figure → trust, so that on mobile the photo follows the
   primary CTA directly. Desktop puts them back with grid areas, not markup. */
.hero__trust{ display:flex; flex-direction:column; gap:.6rem; margin-top:1.5rem; }
.hero__trust li{
  display:flex; align-items:center; gap:.55rem;
  font-size:.9rem; font-weight:500; color:var(--ink-muted);
}
.hero__trust svg{ width:17px; height:17px; color:var(--accent); flex:none; }

.hero__figure{ position:relative; }
.hero__arc{ position:absolute; inset:-14% -8% auto -12%; height:120%; color:var(--accent); opacity:.18; z-index:0; }
[data-theme="dark"] .hero__arc{ opacity:.26; }
.hero__photo{ position:relative; z-index:1; border-radius:var(--r-img); overflow:hidden; box-shadow:var(--shadow); }
.hero__card{
  position:relative; z-index:10; margin:-2.25rem 0 0 0; width:fit-content; max-width:100%;
  display:flex; align-items:center; gap:.75rem;
  padding:.8rem 1rem; border-radius:14px;
  background:var(--surface); border:1px solid var(--line); box-shadow:var(--shadow-lift);
}
.hero__card .icon-circle{ width:38px; height:38px; }
.hero__card .icon-circle svg{ width:18px; height:18px; }
.hero__card-label{ display:block; font-size:.72rem; font-weight:600; letter-spacing:.05em; text-transform:uppercase; color:var(--ink-muted); }
.hero__card-value{ display:block; font-size:.98rem; font-weight:600; color:var(--ink); white-space:nowrap; }

/* ── 12. TRUST BAR ─────────────────────────────────────────────────────── */

.trustbar{ border-block:1px solid var(--line); background:var(--surface-2); }
.trustbar__list{ display:grid; gap:.9rem; padding-block:1.4rem; }
.trustbar__item{ display:flex; align-items:center; gap:.6rem; font-size:.88rem; color:var(--ink-muted); }
.trustbar__item svg{ width:18px; height:18px; color:var(--accent); flex:none; }
.trustbar__item strong{ color:var(--ink); font-weight:600; }

/* ── 13. SERVICES GRID ─────────────────────────────────────────────────── */

.svc-grid{ display:grid; gap:1rem; }
.svc-card{ display:flex; flex-direction:column; gap:.7rem; }
.svc-card h3{ margin-top:.15rem; }
.svc-card p{ font-size:.9rem; color:var(--ink-muted); flex:1; }
.svc-card .link-arrow{ margin-top:.2rem; }

/* ── 14. CALCULATOR TEASER ─────────────────────────────────────────────── */

.calc-teaser{ display:grid; gap:1.5rem; }
.calc-box{
  background:var(--surface); border:1px solid var(--line-2);
  border-radius:var(--r-card); padding:1.4rem; box-shadow:var(--shadow);
}
.calc-result{
  margin-top:1rem; padding:1.15rem; border-radius:14px;
  background:var(--tint); border:1px solid var(--line-2); text-align:center;
}
.calc-result__label{ font-size:.76rem; font-weight:600; letter-spacing:.08em; text-transform:uppercase; color:var(--accent-text); }
.calc-result__date{
  display:block; margin-top:.3rem;
  font-family:var(--font-display); font-weight:600; font-size:clamp(1.9rem,7vw,2.5rem);
  line-height:1.15; color:var(--ink);
}
.calc-result__meta{ margin-top:.4rem; font-size:.9rem; color:var(--ink-muted); }
.calc-note{ margin-top:.9rem; font-size:.82rem; line-height:1.6; color:var(--ink-muted); }

/* ── 15. WHY US + STATS ────────────────────────────────────────────────── */

.why{ display:grid; gap:2rem; }
.why__list{ display:flex; flex-direction:column; gap:1.1rem; }
.why__item{ display:flex; gap:.85rem; }
.why__item svg{ width:22px; height:22px; color:var(--accent); flex:none; margin-top:.15rem; }
.why__item h3{ font-size:1rem; }
.why__item p{ margin-top:.2rem; font-size:.9rem; color:var(--ink-muted); }

.stats{ display:grid; grid-template-columns:repeat(2,1fr); gap:.75rem; }
.stat{
  padding:1.2rem 1rem; border-radius:var(--r-card); text-align:center;
  background:var(--surface-2); border:1px solid var(--line);
}
.stat__num{
  display:block; font-family:var(--font-display); font-weight:600;
  font-size:clamp(2rem,7vw,2.6rem); line-height:1.05; color:var(--accent-text);
}
.stat__label{ display:block; margin-top:.25rem; font-size:.8rem; font-weight:500; color:var(--ink-muted); }

/* ── 16. CTA BAND ──────────────────────────────────────────────────────── */

.ctaband{ background:var(--primary); color:var(--primary-text); }
.ctaband h2,.ctaband p{ color:inherit; }
.ctaband p{ margin-top:.75rem; opacity:.9; max-width:52ch; }
.ctaband__inner{ display:grid; gap:1.5rem; padding-block:clamp(2.5rem,7vw,4rem); }
.ctaband .arc-rule{ color:var(--primary-text); opacity:.5; }
[data-theme="dark"] .ctaband{
  background:var(--surface-2); color:var(--ink);
  border-block:1px solid var(--line-2);
}
[data-theme="dark"] .ctaband .btn--onband{
  background:var(--primary); color:var(--primary-text); border-color:var(--primary);
}
[data-theme="dark"] .ctaband .btn--onband:hover{ background:var(--primary-hover); border-color:var(--primary-hover); }

/* ── 17. REVIEWS ───────────────────────────────────────────────────────── */

.reviews{
  display:grid; grid-auto-flow:column; grid-auto-columns:85%;
  gap:1rem; overflow-x:auto; scroll-snap-type:x mandatory;
  padding-bottom:.75rem; margin-inline:calc(var(--gutter) * -1);
  padding-inline:var(--gutter); scrollbar-width:thin;
}
.reviews > *{ scroll-snap-align:start; }
.review{ display:flex; flex-direction:column; gap:.75rem; height:100%; }
.review__stars{ display:flex; gap:2px; color:var(--accent); }
.review__stars svg{ width:15px; height:15px; }
.review__text{ font-size:.94rem; color:var(--ink); flex:1; }
.review__who{ display:flex; align-items:center; gap:.65rem; padding-top:.35rem; border-top:1px solid var(--line); }
.review__avatar{
  width:38px; height:38px; border-radius:50%; flex:none;
  display:grid; place-items:center; background:var(--accent-soft);
  color:var(--accent-text); font-weight:600; font-size:.95rem;
}
.review__name{ font-size:.9rem; font-weight:600; color:var(--ink); }
.review__src{ font-size:.76rem; color:var(--ink-muted); }

/* ── 18. DOCTOR & CLINIC ───────────────────────────────────────────────── */

.doctor{ display:grid; gap:1.75rem; }
.doctor__creds{ margin-top:1.25rem; display:flex; flex-direction:column; gap:.6rem; }
.doctor__creds li{ display:flex; gap:.6rem; font-size:.9rem; color:var(--ink-muted); }
.doctor__creds svg{ width:17px; height:17px; color:var(--accent); flex:none; margin-top:.2rem; }
.clinic-photos{ display:grid; gap:1rem; }

/* ── 19. FAQ ACCORDION ─────────────────────────────────────────────────── */

.faq{ display:flex; flex-direction:column; gap:.6rem; }
.faq__item{
  background:var(--surface); border:1px solid var(--line);
  border-radius:14px; overflow:hidden;
}
.faq__item[open]{ border-color:var(--line-2); }
.faq__q{
  display:flex; align-items:flex-start; justify-content:space-between; gap:1rem;
  padding:1rem 1.15rem; cursor:pointer; list-style:none;
  font-size:.98rem; font-weight:600; color:var(--ink);
  transition:background-color .16s var(--ease);
}
.faq__q:hover{ background:var(--hover-wash); }
.faq__icon{ width:16px; height:16px; flex:none; margin-top:.3rem; color:var(--accent); transition:transform .2s var(--ease); }
.faq__item[open] .faq__icon{ transform:rotate(45deg); }
.faq__a{ padding:0 1.15rem 1.15rem; font-size:.93rem; color:var(--ink-muted); }
.faq__a p + p{ margin-top:.7rem; }
.faq-group + .faq-group{ margin-top:2.5rem; }
.faq-group h2{ margin-bottom:1rem; }

/* ── 20. MAP & HOURS ───────────────────────────────────────────────────── */

.mapblock{ display:grid; gap:1.25rem; }
.map-placeholder{
  position:relative; aspect-ratio:4/3; border-radius:var(--r-img); overflow:hidden;
  border:1px solid var(--line); background:var(--surface-2);
  display:grid; place-items:center; text-align:center; padding:1.5rem;
}
.map-placeholder__grid{ position:absolute; inset:0; opacity:.08; color:var(--ink); }
.map-placeholder__arc{ position:absolute; right:-10%; bottom:-20%; width:70%; color:var(--accent); opacity:.18; }
.map-placeholder__body{ position:relative; z-index:1; display:flex; flex-direction:column; align-items:center; gap:.6rem; }
.map-placeholder__pin{ width:34px; height:34px; color:var(--accent); }
.map-placeholder__addr{ font-size:.9rem; font-weight:600; color:var(--ink); max-width:26ch; }
.map-frame{ border:0; width:100%; aspect-ratio:4/3; border-radius:var(--r-img); }

.hours-card__today{ display:flex; align-items:baseline; justify-content:space-between; gap:1rem; flex-wrap:wrap; }
.hours-card__day{ font-size:.8rem; font-weight:600; letter-spacing:.08em; text-transform:uppercase; color:var(--ink-muted); }
.hours-card__time{ font-family:var(--font-display); font-size:1.9rem; font-weight:600; line-height:1.1; color:var(--ink); }
.hours-card__status{ margin-top:.75rem; display:flex; flex-wrap:wrap; align-items:center; gap:.6rem; }
.hours-card__count{ font-size:.86rem; color:var(--ink-muted); }
.hours-week{ margin-top:1.1rem; padding-top:1.1rem; border-top:1px solid var(--line); display:flex; flex-direction:column; gap:.45rem; }
.hours-week__row{ display:flex; justify-content:space-between; gap:1rem; font-size:.88rem; color:var(--ink-muted); }
.hours-week__row strong{ color:var(--ink); font-weight:500; }

.contact-grid{ display:grid; grid-template-columns:1fr 1fr; gap:1rem 1rem; }
.contact-grid dt{ font-size:.72rem; font-weight:600; letter-spacing:.07em; text-transform:uppercase; color:var(--ink-muted); }
.contact-grid dd{ margin-top:.25rem; font-size:.9rem; color:var(--ink); }
.contact-grid a{ color:var(--ink); text-decoration:none; }
.contact-grid a:hover{ color:var(--accent-text); }
.contact-actions{ display:grid; gap:.55rem; margin-top:1.25rem; }

/* .hours-table = the full week table, which appears on /epikoinonia/ ONLY.
   .data-table is the same styling for any other simple two-column table. */
.hours-table th,.hours-table td,
.data-table th,.data-table td{ padding:.7rem .5rem; text-align:left; border-bottom:1px solid var(--line); font-size:.92rem; }
.hours-table th,.data-table th{ font-weight:600; color:var(--ink); }
.hours-table td,.data-table td{ color:var(--ink-muted); text-align:right; }
.hours-table tr[data-today="true"] th,.hours-table tr[data-today="true"] td{ color:var(--accent-text); font-weight:600; }

/* ── 21. PAGE HEADER BAND + BREADCRUMBS ────────────────────────────────── */

.pagehead{
  position:relative; overflow:hidden;
  background:var(--surface-2); border-bottom:1px solid var(--line);
  min-height:190px; display:flex; align-items:center;
  padding-block:2rem;
}
.pagehead__arc{ position:absolute; right:-16%; top:-40%; width:70%; max-width:520px; color:var(--accent); opacity:.15; }
[data-theme="dark"] .pagehead__arc{ opacity:.22; }
.pagehead__inner{ position:relative; z-index:1; }
.pagehead h1{ margin-top:.65rem; }
.pagehead__sub{ margin-top:.8rem; font-size:1.02rem; color:var(--ink-muted); max-width:56ch; }
.pagehead .btn{ margin-top:1.35rem; }

.crumbs{ font-size:.82rem; color:var(--ink-muted); }
.crumbs ol{ display:flex; flex-wrap:wrap; align-items:center; gap:.35rem; }
.crumbs li{ display:flex; align-items:center; gap:.35rem; }
.crumbs a{ color:var(--ink-muted); text-decoration:none; }
.crumbs a:hover{ color:var(--accent-text); text-decoration:underline; }
.crumbs [aria-current="page"]{ color:var(--ink-muted); }
.crumbs__sep{ color:var(--line-2); }
.crumbs__mid--full{ display:none; }
.crumbs__mid--short{ display:flex; }

/* ── 22. SERVICE PAGE BODY ─────────────────────────────────────────────── */

.svc-layout{ display:grid; gap:2.5rem; }
.svc-body h2{ margin-top:2.5rem; margin-bottom:.9rem; }
.svc-body h2:first-child{ margin-top:0; }
.svc-body > p{ color:var(--ink-muted); }
.svc-body > p + p{ margin-top:1rem; }

.checklist{ display:flex; flex-direction:column; gap:.7rem; }
.checklist li{ display:flex; gap:.7rem; font-size:.95rem; color:var(--ink-muted); }
.checklist svg{ width:18px; height:18px; color:var(--accent); flex:none; margin-top:.28rem; }

.steps{ display:flex; flex-direction:column; gap:1.1rem; counter-reset:step; }
.steps li{ display:flex; gap:.9rem; }
.steps li::before{
  counter-increment:step; content:counter(step);
  width:32px; height:32px; flex:none; border-radius:50%;
  display:grid; place-items:center;
  background:var(--accent-soft); color:var(--accent-text);
  font-size:.9rem; font-weight:600;
}
.steps h3{ font-size:1rem; }
.steps p{ margin-top:.2rem; font-size:.92rem; color:var(--ink-muted); }

.expect{ display:grid; gap:.75rem; }
.expect__item{
  padding:1.1rem; border-radius:14px;
  background:var(--tint); border:1px solid var(--line-2);
}
.expect__label{ display:flex; align-items:center; gap:.5rem; font-size:.75rem; font-weight:600; letter-spacing:.07em; text-transform:uppercase; color:var(--accent-text); }
.expect__label svg{ width:15px; height:15px; }
.expect__item p{ margin-top:.4rem; font-size:.92rem; color:var(--ink-muted); }

.sidebar{ display:flex; flex-direction:column; gap:1rem; }
.sidebar__card h3{ margin-bottom:.75rem; }
.sidebar__meta{ display:flex; flex-direction:column; gap:.6rem; margin-top:1rem; padding-top:1rem; border-top:1px solid var(--line); font-size:.88rem; color:var(--ink-muted); }
.sidebar__meta a{ color:var(--ink); text-decoration:none; font-weight:600; }
.sidebar__meta a:hover{ color:var(--accent-text); }
.sidebar__links li + li{ margin-top:.15rem; }
.sidebar__links a{
  display:block; padding:.55rem .6rem; margin-inline:-.6rem; border-radius:8px;
  font-size:.9rem; color:var(--ink); text-decoration:none;
  transition:background-color .16s var(--ease), color .16s var(--ease);
}
.sidebar__links a:hover{ background:var(--hover-wash); color:var(--accent-text); }

/* ── 23. DUE-DATE CALCULATOR PAGE ──────────────────────────────────────── */

.calc-layout{ display:grid; gap:1.75rem; }
.calc-out{
  padding:1.5rem; border-radius:var(--r-card); text-align:center;
  background:var(--tint); border:1px solid var(--line-2);
}
.calc-out__date{
  display:block; margin-top:.35rem;
  font-family:var(--font-display); font-weight:600;
  font-size:clamp(2.1rem,9vw,3rem); line-height:1.1; color:var(--ink);
}
.calc-stats{ display:grid; grid-template-columns:repeat(3,1fr); gap:.5rem; margin-top:1.35rem; padding-top:1.35rem; border-top:1px solid var(--line-2); }
.calc-stat__num{ display:block; font-family:var(--font-display); font-weight:600; font-size:clamp(1.4rem,5vw,1.8rem); line-height:1.15; color:var(--accent-text); }
.calc-stat__label{ display:block; margin-top:.15rem; font-size:.72rem; font-weight:500; line-height:1.35; color:var(--ink-muted); }

.disclaimer{
  display:flex; gap:.75rem; margin-top:1.25rem; padding:1rem 1.1rem;
  border-radius:14px; border:1px solid var(--line-2); background:var(--surface-2);
  font-size:.87rem; line-height:1.6; color:var(--ink-muted);
}
.disclaimer svg{ width:19px; height:19px; color:var(--accent); flex:none; margin-top:.2rem; }

.timeline{
  display:grid; grid-auto-flow:column; grid-auto-columns:52px; gap:4px;
  overflow-x:auto; scroll-snap-type:x proximity; padding:1rem 0 1.25rem;
  margin-inline:calc(var(--gutter) * -1); padding-inline:var(--gutter);
}
.timeline__wk{
  scroll-snap-align:center; display:flex; flex-direction:column; align-items:center; gap:.4rem;
  padding:.6rem .25rem; border-radius:10px;
  background:var(--surface-2); border:1px solid var(--line);
}
.timeline__wk[data-tri="1"]{ background:var(--surface-2); }
.timeline__wk[data-tri="2"]{ background:var(--accent-soft); }
.timeline__wk[data-tri="3"]{ background:var(--tint); }
.timeline__wk[data-current="true"]{ border-color:var(--accent); box-shadow:0 0 0 2px var(--hover-wash); }
.timeline__n{ font-size:.82rem; font-weight:600; color:var(--ink); }
.timeline__bar{ width:100%; height:4px; border-radius:2px; background:var(--line-2); }
.timeline__wk[data-current="true"] .timeline__bar{ background:var(--accent); }
.timeline__wk[data-past="true"] .timeline__bar{ background:var(--accent); opacity:.45; }
.timeline__legend{ display:flex; flex-wrap:wrap; gap:1rem; font-size:.8rem; color:var(--ink-muted); }
.timeline__legend span{ display:flex; align-items:center; gap:.4rem; }
.timeline__swatch{ width:12px; height:12px; border-radius:3px; border:1px solid var(--line-2); }

.trimesters{ display:grid; gap:.6rem; margin-top:1.5rem; }

/* ── 24. FORMS & BOOKING ───────────────────────────────────────────────── */

.field{ display:flex; flex-direction:column; gap:.35rem; }
.field + .field{ margin-top:1rem; }
.field label{ font-size:.86rem; font-weight:600; color:var(--ink); }
.field .req{ color:var(--accent-text); }
.field input,.field select,.field textarea{
  width:100%; min-height:46px; padding:.65rem .8rem;
  font-size:16px; line-height:1.4;
  background:var(--surface); color:var(--ink);
  border:1px solid var(--line-2); border-radius:var(--r-input);
  transition:border-color .16s var(--ease), box-shadow .16s var(--ease);
}
.field textarea{ min-height:110px; resize:vertical; }
.field input:focus,.field select:focus,.field textarea:focus{
  outline:none; border-color:var(--accent); box-shadow:0 0 0 3px var(--hover-wash);
}
.field input[aria-invalid="true"],.field textarea[aria-invalid="true"]{ border-color:var(--accent-text); }
.field__hint{ font-size:.78rem; color:var(--ink-muted); }
.field__err{ font-size:.8rem; font-weight:500; color:var(--accent-text); min-height:0; }
.field__err:empty{ display:none; }
.field--check{ flex-direction:row; align-items:flex-start; gap:.6rem; }
.field--check input{ width:20px; min-height:20px; height:20px; margin-top:.28rem; flex:none; accent-color:var(--primary); }
.field--check label{ font-weight:400; font-size:.86rem; color:var(--ink-muted); line-height:1.55; }
.hp{ position:absolute; left:-9999px; width:1px; height:1px; overflow:hidden; }

.steps-bar{ display:flex; gap:.4rem; margin-bottom:1.5rem; }
.steps-bar__item{ flex:1; display:flex; flex-direction:column; gap:.4rem; }
.steps-bar__line{ height:4px; border-radius:2px; background:var(--line); transition:background-color .2s var(--ease); }
.steps-bar__item[data-state="done"] .steps-bar__line,
.steps-bar__item[data-state="current"] .steps-bar__line{ background:var(--accent); }
.steps-bar__label{ font-size:.72rem; font-weight:600; color:var(--ink-muted); }
.steps-bar__item[data-state="current"] .steps-bar__label{ color:var(--accent-text); }

.choice-grid{ display:grid; gap:.5rem; }
.choice{
  display:flex; align-items:center; gap:.75rem; width:100%;
  min-height:52px; padding:.75rem 1rem; text-align:left;
  background:var(--surface); border:1px solid var(--line-2); border-radius:12px;
  font-size:.94rem; font-weight:500; color:var(--ink); cursor:pointer;
  transition:border-color .16s var(--ease), background-color .16s var(--ease);
}
.choice:hover{ border-color:var(--accent); background:var(--hover-wash); }
.choice[aria-pressed="true"]{ border-color:var(--accent); background:var(--hover-wash); }
.choice[aria-pressed="true"]::after{ content:"✓"; margin-left:auto; color:var(--accent-text); font-weight:700; }
.choice .icon-circle{ width:34px; height:34px; }
.choice .icon-circle svg{ width:16px; height:16px; }

.daygrid{ display:grid; grid-template-columns:repeat(4,1fr); gap:.5rem; }
.day{
  display:flex; flex-direction:column; align-items:center; gap:.15rem;
  min-height:64px; padding:.5rem .25rem; border-radius:12px;
  background:var(--surface); border:1px solid var(--line-2); cursor:pointer;
  transition:border-color .16s var(--ease), background-color .16s var(--ease);
}
.day:hover:not([disabled]){ border-color:var(--accent); background:var(--hover-wash); }
.day[aria-pressed="true"]{ border-color:var(--accent); background:var(--hover-wash); }
.day[disabled]{ opacity:.4; cursor:not-allowed; }
.day__dow{ font-size:.68rem; font-weight:600; text-transform:uppercase; letter-spacing:.04em; color:var(--ink-muted); }
.day__num{ font-family:var(--font-display); font-size:1.3rem; font-weight:600; line-height:1.1; color:var(--ink); }
.day__mon{ font-size:.66rem; color:var(--ink-muted); }

.slotgrid{ display:grid; grid-template-columns:repeat(3,1fr); gap:.5rem; }
.slot{
  min-height:44px; padding:.6rem .3rem; border-radius:10px;
  background:var(--surface); border:1px solid var(--line-2);
  font-size:.92rem; font-weight:600; color:var(--ink); cursor:pointer;
  transition:border-color .16s var(--ease), background-color .16s var(--ease);
}
.slot:hover{ border-color:var(--accent); background:var(--hover-wash); }
.slot[aria-pressed="true"]{ border-color:var(--accent); background:var(--hover-wash); color:var(--accent-text); }

.summary-card{ background:var(--tint); border:1px solid var(--line-2); border-radius:14px; padding:1.1rem; }
.summary-card dl{ display:grid; grid-template-columns:auto 1fr; gap:.5rem 1rem; margin-top:.75rem; }
.summary-card dt{ font-size:.82rem; color:var(--ink-muted); }
.summary-card dd{ font-size:.88rem; font-weight:600; color:var(--ink); text-align:right; }

.form-nav{ display:flex; gap:.6rem; margin-top:1.5rem; }
.form-nav .btn{ flex:1; }
.form-msg{ margin-top:1rem; padding:.9rem 1.1rem; border-radius:12px; font-size:.9rem; }
.form-msg:empty{ display:none; }
.form-msg[data-state="ok"]{ background:var(--accent-soft); color:var(--accent-text); }
.form-msg[data-state="err"]{ background:var(--surface-2); border:1px solid var(--accent); color:var(--ink); }

/* ── 25. FLOATS ────────────────────────────────────────────────────────── */

.to-top{
  position:fixed; z-index:30; left:16px; bottom:calc(16px + env(safe-area-inset-bottom));
  width:44px; height:44px; border-radius:50%; display:grid; place-items:center;
  background:var(--surface); color:var(--ink); border:1px solid var(--line-2);
  box-shadow:var(--shadow); opacity:0; visibility:hidden;
  transition:opacity .2s var(--ease), visibility .2s, background-color .16s var(--ease);
}
.to-top[data-show="true"]{ opacity:1; visibility:visible; }
.to-top:hover{ background:var(--hover-wash); }
.to-top svg{ width:19px; height:19px; }

.viber-float{
  position:fixed; z-index:30; right:16px; bottom:calc(16px + env(safe-area-inset-bottom));
  display:flex; align-items:center; gap:.55rem;
  height:52px; padding:0 14px; border-radius:var(--r-pill);
  background:var(--viber); color:var(--on-brand); text-decoration:none;
  box-shadow:var(--shadow-lift);
  transition:transform .16s var(--ease);
}
.viber-float svg{ width:24px; height:24px; flex:none; }
.viber-float span{
  display:none; font-size:.9rem; font-weight:600; white-space:nowrap;
}
.viber-float:hover{ transform:translateY(-2px); }
@media (prefers-reduced-motion:reduce){ .viber-float:hover{ transform:none; } }

.mobilebar{
  position:fixed; z-index:30; left:0; right:0; bottom:0;
  display:grid; grid-template-columns:repeat(3,1fr);
  background:var(--surface); border-top:1px solid var(--line);
  padding-bottom:env(safe-area-inset-bottom);
  transform:translateY(0); transition:transform .25s var(--ease);
}
.mobilebar[data-hidden="true"]{ transform:translateY(110%); }
.mobilebar a{
  display:flex; flex-direction:column; align-items:center; justify-content:center; gap:.2rem;
  min-height:56px; padding:.4rem; text-decoration:none;
  font-size:.72rem; font-weight:600; color:var(--ink-muted);
}
.mobilebar a svg{ width:19px; height:19px; }
.mobilebar a:hover{ color:var(--accent-text); background:var(--hover-wash); }
.mobilebar a + a{ border-left:1px solid var(--line); }
.mobilebar a[data-primary]{ color:var(--accent-text); }

/* floats sit above the mobile bar while it is visible */
body:has(.mobilebar) .to-top,
body:has(.mobilebar) .viber-float{ bottom:calc(72px + env(safe-area-inset-bottom)); }

/* ── 26. COOKIE BANNER ─────────────────────────────────────────────────── */

.cookie{
  position:fixed; z-index:70; left:12px; right:12px;
  bottom:calc(72px + env(safe-area-inset-bottom));
  max-width:400px; padding:1.1rem;
  background:var(--surface); border:1px solid var(--line-2);
  border-radius:var(--r-card); box-shadow:var(--shadow-lift);
  opacity:0; visibility:hidden; transform:translateY(10px);
  transition:opacity .25s var(--ease), transform .25s var(--ease), visibility .25s;
}
.cookie[data-show="true"]{ opacity:1; visibility:visible; transform:translateY(0); }
.cookie p{ font-size:.86rem; line-height:1.6; color:var(--ink-muted); }
.cookie a{ color:var(--accent-text); }
.cookie__actions{ display:flex; flex-wrap:wrap; gap:.5rem; margin-top:.9rem; }
.cookie__actions .btn{ flex:1; min-width:130px; }

/* ── 27. FOOTER ────────────────────────────────────────────────────────── */

.footer{ background:var(--surface-2); border-top:1px solid var(--line); padding-top:var(--section-y); }
.footer__grid{ display:grid; gap:2rem; }
.footer h3{ font-size:.78rem; font-weight:600; letter-spacing:.09em; text-transform:uppercase; color:var(--ink-muted); margin-bottom:.9rem; }
.footer__desc{ margin-top:.9rem; font-size:.88rem; color:var(--ink-muted); max-width:34ch; }
.footer__links li + li{ margin-top:.5rem; }
.footer__links a{ font-size:.89rem; color:var(--ink-muted); text-decoration:none; }
.footer__links a:hover{ color:var(--accent-text); text-decoration:underline; }

.social{ display:flex; gap:.5rem; margin-top:1.25rem; }
.social a{
  width:38px; height:38px; display:grid; place-items:center;
  border:1px solid var(--line-2); border-radius:10px; color:var(--accent);
  transition:background-color .16s var(--ease), border-color .16s var(--ease),
             color .16s var(--ease), transform .16s var(--ease);
}
.social a svg{ width:17px; height:17px; }
.social a:hover{ color:var(--on-brand); transform:translateY(-2px); }
.social a[data-net="fb"]:hover{ background:var(--facebook); border-color:var(--facebook); }
.social a[data-net="ig"]:hover{ background:var(--instagram); border-color:var(--instagram); }
.social a[data-net="vb"]:hover{ background:var(--viber); border-color:var(--viber); }
@media (prefers-reduced-motion:reduce){ .social a:hover{ transform:none; } }

.footer__contact li{ display:flex; gap:.6rem; font-size:.89rem; color:var(--ink-muted); }
.footer__contact li + li{ margin-top:.65rem; }
.footer__contact svg{ width:16px; height:16px; color:var(--accent); flex:none; margin-top:.25rem; }
.footer__contact a{ color:var(--ink-muted); text-decoration:none; }
.footer__contact a:hover{ color:var(--accent-text); }
.footer__live{ margin-top:1rem; padding-top:1rem; border-top:1px solid var(--line); }
.footer__hours-link{ display:inline-flex; margin-top:.5rem; }
.footer .btn--block{ margin-top:1rem; }

.footer__bottom{
  margin-top:var(--section-y); padding-block:1.35rem;
  border-top:1px solid var(--line);
  display:flex; flex-wrap:wrap; gap:.5rem 1.25rem;
  align-items:center; justify-content:space-between;
  font-size:.82rem; color:var(--ink-muted);
}
.footer__bottom a{ color:var(--ink-muted); text-decoration:none; }
.footer__bottom a:hover{ color:var(--accent-text); text-decoration:underline; }

/* ── 28. MISC PAGES ────────────────────────────────────────────────────── */

.page-narrow{ max-width:760px; margin-inline:auto; }
.notice-page{ text-align:center; padding-block:clamp(3rem,12vw,7rem); }
.notice-page .icon-circle{ width:64px; height:64px; margin-inline:auto; margin-bottom:1.25rem; }
.notice-page .icon-circle svg{ width:30px; height:30px; }
.notice-page p{ margin-top:1rem; color:var(--ink-muted); max-width:52ch; margin-inline:auto; }
.notice-page .btn-row{ display:flex; flex-wrap:wrap; gap:.6rem; justify-content:center; margin-top:1.75rem; }

.noscript-note{
  padding:1rem 1.15rem; border-radius:14px;
  background:var(--tint); border:1px solid var(--line-2);
  font-size:.9rem; color:var(--ink);
}

.related{ display:grid; gap:1rem; }

/* ── 29. REVEAL MOTION ─────────────────────────────────────────────────── */

.reveal{ opacity:0; transform:translateY(16px); }
.reveal.is-in{
  opacity:1; transform:none;
  transition:opacity .5s var(--ease), transform .5s var(--ease);
  transition-delay:var(--d,0ms);
}
.no-js .reveal{ opacity:1; transform:none; }

@media (prefers-reduced-motion:reduce){
  .reveal,.reveal.is-in{ opacity:1 !important; transform:none !important; transition:none !important; }
  *,*::before,*::after{
    animation-duration:.01ms !important; animation-iteration-count:1 !important;
    transition-duration:.01ms !important;
  }
}

/* ── 30. BREAKPOINTS — min-width only ──────────────────────────────────── */

@media (min-width:768px){
  .trustbar__list{ grid-template-columns:repeat(2,1fr); gap:1rem 2rem; }
  .svc-grid{ grid-template-columns:repeat(2,1fr); }
  .clinic-photos{ grid-template-columns:1fr 1fr; }
  .calc-teaser{ grid-template-columns:1fr 1fr; align-items:center; gap:2.5rem; }
  .why{ grid-template-columns:1fr 1fr; gap:3rem; align-items:start; }
  .mapblock{ grid-template-columns:1fr 1fr; align-items:start; gap:1.5rem; }
  .doctor{ grid-template-columns:.85fr 1.15fr; gap:2.5rem; align-items:center; }
  .reviews{ grid-auto-columns:minmax(0,1fr); grid-auto-flow:column;
            overflow:visible; margin-inline:0; padding-inline:0; scroll-snap-type:none; }
  .ctaband__inner{ grid-template-columns:1.4fr auto; align-items:center; gap:2rem; }
  .expect{ grid-template-columns:repeat(3,1fr); }
  .related{ grid-template-columns:repeat(3,1fr); }
  .footer__grid{ grid-template-columns:1fr 1fr; gap:2.5rem; }
  .daygrid{ grid-template-columns:repeat(7,1fr); }
  .slotgrid{ grid-template-columns:repeat(5,1fr); }
  .contact-actions{ grid-template-columns:1fr 1fr; }
  .pagehead{ min-height:240px; }
  .notice-page{ padding-block:clamp(4rem,10vw,8rem); }
  .viber-float span{ display:block; }
  .cookie{ left:16px; right:auto; bottom:calc(16px + env(safe-area-inset-bottom)); }
  .crumbs__mid--full{ display:flex; }
  .crumbs__mid--short{ display:none; }
}

@media (min-width:1080px){
  :root{ --header-h:72px; }
  .nav{ display:block; }
  .header__cta{ display:inline-flex; }
  .header__inner{ gap:1.25rem; }

  /* Services dropdown: two columns × four rows. Eight items stacked in one
     column ran nearly the full viewport height. --dd-shift is set by main.js
     only when the panel would pass the right gutter (e.g. after a rebrand to
     a longer practice name pushes the nav further right); it is 0 otherwise. */
  .dropdown{
    width:660px; min-width:0;
    max-width:calc(100vw - 2rem);
    padding:.6rem;
    margin-left:var(--dd-shift, 0px);
  }
  .dropdown__grid{
    display:grid; grid-template-columns:repeat(2, minmax(0, 1fr));
    column-gap:.25rem; row-gap:2px;
  }
  /* .dropdown__all is a sibling of the grid inside the block-level panel,
     so it already spans the full 660px — no grid-column needed. */
  .nav-toggle{ display:none; }
  .mobilebar{ display:none; }
  body:has(.mobilebar) .to-top,
  body:has(.mobilebar) .viber-float{ bottom:calc(16px + env(safe-area-inset-bottom)); }

  .hero{ padding-block:3.5rem var(--section-y); }
  .hero__inner{
    grid-template-columns:1.05fr .95fr;
    grid-template-rows:auto auto;
    column-gap:3rem; row-gap:1.75rem; align-items:start;
  }
  .hero__copy  { grid-column:1; grid-row:1; }
  .hero__trust { grid-column:1; grid-row:2; margin-top:0; }
  .hero__figure{ grid-column:2; grid-row:1 / span 2; align-self:center; }
  .hero__card{ position:absolute; left:-2rem; bottom:1.5rem; margin:0; }

  .trustbar__list{ grid-template-columns:repeat(4,1fr); gap:1.5rem; }
  .svc-grid{ grid-template-columns:repeat(3,1fr); }
  .stats{ gap:1rem; }
  .svc-layout{ grid-template-columns:minmax(0,8fr) minmax(0,4fr); gap:3rem; align-items:start; }
  .sidebar{ position:sticky; top:calc(var(--header-h) + 20px); z-index:20; }
  .calc-layout{ grid-template-columns:minmax(0,5fr) minmax(0,7fr); gap:2.5rem; align-items:start; }
  .footer__grid{ grid-template-columns:1.5fr 1fr 1fr 1.2fr; gap:2rem; }
  .pagehead{ min-height:290px; }
  .mapblock{ gap:2.5rem; }
}

@media (min-width:1240px){
  .header__phone{ display:inline-flex; }
}