/* ==========================================================================
   MediPalas — main stylesheet
   --------------------------------------------------------------------------
   Οργάνωση:
     01 base & typography      08 departments        15 articles
     02 layout & utilities     09 check-ups          16 faq
     03 buttons & icons        10 booking form       17 contact
     04 header & nav           11 calendar & slots   18 footer
     05 mobile menu            12 locations & map    19 floating UI
     06 hero                   13 about & timeline   20 modals & cookies
     07 services               14 why                21 print & motion
   ========================================================================== */

/* ═══ 01 BASE & TYPOGRAPHY ══════════════════════════════════════════════ */

html { scroll-behavior: smooth; }
html.lenis, html.lenis body { height: auto; }
.lenis.lenis-smooth { scroll-behavior: auto !important; }
.lenis.lenis-stopped { overflow: hidden; }

body {
  background: var(--bg);
  color: var(--text-body);
  font-family: var(--font-body);
  font-size: var(--fs-base);
  line-height: var(--lh-body);
  overflow-x: clip;
}

h1, h2, h3, h4 {
  font-family: var(--font-display);
  color: var(--text);
  letter-spacing: var(--ls-tight);
  font-weight: var(--fw-bold);
}

strong, b { font-weight: var(--fw-semi); color: var(--text); }

a { text-decoration-thickness: 1px; text-underline-offset: 0.18em; }

::selection { background: var(--green-100); color: var(--accent-ink); }
.on-dark ::selection { background: var(--green-700); color: #fff; }

.sr-only {
  position: absolute; width: 1px; height: 1px; padding: 0; margin: -1px;
  overflow: hidden; clip: rect(0 0 0 0); clip-path: inset(50%); white-space: nowrap;
}

/* Το inline sprite είναι αποθήκη <symbol>, όχι ορατό γραφικό. Χωρίς αυτό
   καταλαμβάνει πραγματικό χώρο και σπρώχνει όλη τη σελίδα προς τα κάτω. */
.svg-sprite { position: absolute; width: 0; height: 0; overflow: hidden; }

.skip-link {
  position: fixed; top: var(--sp-3); left: var(--sp-3); z-index: var(--z-skip);
  transform: translateY(calc(-100% - var(--sp-6)));
  background: var(--green-800); color: #fff; padding: var(--sp-3) var(--sp-5);
  border-radius: var(--r-sm); font-weight: var(--fw-semi); text-decoration: none;
  transition: transform var(--dur) var(--ease-out);
}
.skip-link:focus-visible { transform: translateY(0); }

/* Γλωσσικά διπλότυπα: και οι δύο γλώσσες είναι στο DOM (για SEO και για
   λειτουργία χωρίς JS), το CSS δείχνει μόνο τη μία. */
html[data-lang='el'] [data-only='en'],
html[data-lang='en'] [data-only='el'] { display: none; }

/* ═══ 02 LAYOUT & UTILITIES ═════════════════════════════════════════════ */

.wrap {
  width: 100%; max-width: var(--wrap);
  margin-inline: auto; padding-inline: var(--gutter);
}
.wrap--narrow { max-width: var(--wrap-narrow); }

.sec { padding-block: var(--section-y); position: relative; }
.sec--tint { background: var(--grad-brand); }
.sec--tint + .sec--tint { padding-block-start: 0; }

.sec__head { max-width: 62ch; margin-bottom: clamp(2rem, 1.2rem + 3vw, 3.75rem); }
.sec__head--center { margin-inline: auto; text-align: center; }

.eyebrow {
  font-size: var(--fs-xs); font-weight: var(--fw-bold);
  letter-spacing: var(--ls-caps); text-transform: uppercase;
  color: var(--text-accent); margin-bottom: var(--sp-3);
}
.eyebrow--light { color: var(--green-500); }

.sec__h { font-size: var(--fs-3xl); line-height: var(--lh-tight); margin-bottom: var(--sp-4); }
.sec__lead { font-size: var(--fs-md); color: var(--text-body); max-width: 58ch; }
.sec__head--center .sec__lead { margin-inline: auto; }


.empty { text-align: center; color: var(--text-muted); padding: var(--sp-12) 0; }

/* Ο κόκκος στα σκούρα τμήματα. Καθαρό CSS, καμία εικόνα, καμία JS. */
.grain {
  position: absolute; inset: -50%; pointer-events: none; opacity: 0.4;
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='160' height='160'%3E%3Cfilter id='n'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='0.85' numOctaves='3' stitchTiles='stitch'/%3E%3CfeColorMatrix type='saturate' values='0'/%3E%3C/filter%3E%3Crect width='160' height='160' filter='url(%23n)' opacity='0.5'/%3E%3C/svg%3E");
  mix-blend-mode: overlay;
  animation: grain 7s steps(6) infinite;
}
@keyframes grain {
  0%,100% { transform: translate(0,0) }      16% { transform: translate(-3%,-4%) }
  33%     { transform: translate(4%,-2%) }   50% { transform: translate(-2%,3%) }
  66%     { transform: translate(3%,4%) }    83% { transform: translate(-4%,1%) }
}

/* ═══ 03 BUTTONS & ICONS ════════════════════════════════════════════════ */

.ico { width: 1.25em; height: 1.25em; flex: none; }
.ico--lg { width: 1.75em; height: 1.75em; }
.ico--xl { width: 2.75rem; height: 2.75rem; }

.btn {
  --btn-bg: transparent; --btn-fg: var(--text); --btn-bd: transparent;
  display: inline-flex; align-items: center; justify-content: center; gap: var(--sp-2);
  padding: 0.72em 1.35em; border: 1.5px solid var(--btn-bd); border-radius: var(--r-pill);
  background: var(--btn-bg); color: var(--btn-fg);
  font-family: var(--font-display); font-size: var(--fs-sm); font-weight: var(--fw-semi);
  letter-spacing: var(--ls-snug); line-height: 1.2; text-decoration: none;
  cursor: pointer; white-space: nowrap;
  transition: background var(--dur) var(--ease), border-color var(--dur) var(--ease),
              color var(--dur) var(--ease), transform var(--dur-fast) var(--ease),
              box-shadow var(--dur) var(--ease);
}
.btn:hover { transform: translateY(-1px); }
.btn:active { transform: translateY(0); }
.btn[disabled], .btn[aria-disabled='true'] { opacity: 0.55; pointer-events: none; }

.btn--brand { --btn-bg: var(--green-700); --btn-fg: #fff; --btn-bd: var(--green-700); }
.btn--brand:hover { --btn-bg: var(--green-800); --btn-bd: var(--green-800); box-shadow: var(--sh-brand); }
.on-dark .btn--brand { --btn-bg: var(--green-500); --btn-fg: var(--accent-ink); --btn-bd: var(--green-500); }
.on-dark .btn--brand:hover { --btn-bg: var(--green-600); --btn-bd: var(--green-600); }

.btn--ghost { --btn-fg: var(--text); --btn-bd: var(--border-strong); }
.btn--ghost:hover { --btn-bd: var(--green-700); --btn-fg: var(--text-accent); }

.btn--ghost-dark { --btn-fg: #fff; --btn-bd: rgba(255,255,255,.34); }
.btn--ghost-dark:hover { --btn-bd: var(--green-500); --btn-fg: var(--green-500); }

.btn--lg { padding: 0.92em 1.7em; font-size: var(--fs-base); }
.btn--sm { padding: 0.55em 1.05em; font-size: var(--fs-xs); }

.linkbtn {
  color: var(--text-accent); font: inherit; padding: 0;
  text-decoration: underline; text-underline-offset: 0.18em; cursor: pointer;
}
.linkbtn:hover { color: var(--green-700); }

.iconbtn {
  display: inline-flex; align-items: center; gap: var(--sp-2);
  padding: 0.5em 0.75em; border-radius: var(--r-pill);
  color: var(--text); font-size: var(--fs-sm); font-weight: var(--fw-medium);
  text-decoration: none; cursor: pointer; border: 1.5px solid transparent;
  transition: background var(--dur) var(--ease), color var(--dur) var(--ease),
              border-color var(--dur) var(--ease);
}
.iconbtn:hover { background: var(--bg-subtle); color: var(--text-accent); }
.iconbtn--round {
  width: 2.75rem; height: 2.75rem; padding: 0; justify-content: center;
  border-color: var(--border-strong);
}
.iconbtn--round:hover { border-color: var(--green-700); }
.iconbtn__txt { font-variant-numeric: tabular-nums; }


.spin {
  width: 1em; height: 1em; border-radius: 50%; display: none;
  border: 2px solid currentColor; border-top-color: transparent;
  animation: spin .7s linear infinite;
}
@keyframes spin { to { transform: rotate(360deg) } }
.is-busy .spin { display: block; }
.is-busy .btn__lbl { opacity: .7; }

/* ═══ 04 HEADER & NAV ═══════════════════════════════════════════════════ */

.announce {
  background: var(--green-800); color: #fff;
  font-size: var(--fs-sm); position: relative; z-index: var(--z-header);
}
.announce__in {
  display: flex; align-items: center; gap: var(--sp-3);
  max-width: var(--wrap); margin-inline: auto; padding: var(--sp-2) var(--gutter);
}
.announce__text { flex: 1; }
.announce__cta { color: #fff; font-weight: var(--fw-semi); }
.announce__x { color: #fff; opacity: .8; display: grid; place-items: center; padding: 4px; }
.announce__x:hover { opacity: 1; }

.hdr {
  /* fixed, ΟΧΙ sticky: το header κάθεται ΠΑΝΩ στη φωτογραφία του hero αντί να
     πιάνει δική του λευκή λωρίδα από πάνω της. Μόλις ο επισκέπτης κυλήσει,
     γίνεται αδιαφανές (.is-stuck) και τα γράμματα ξαναγίνονται σκούρα. */
  position: fixed; top: 0; left: 0; right: 0; z-index: var(--z-header);
  background: transparent;
  border-bottom: 1px solid transparent;
  transition: background var(--dur) var(--ease), border-color var(--dur) var(--ease),
              box-shadow var(--dur) var(--ease);
}
.hdr.is-stuck {
  background: color-mix(in srgb, var(--bg) 82%, transparent);
  backdrop-filter: saturate(180%) blur(14px);
  -webkit-backdrop-filter: saturate(180%) blur(14px);
  border-bottom-color: var(--border);
  box-shadow: var(--sh-sm);
}
@supports not (backdrop-filter: blur(1px)) {
  .hdr, .hdr.is-stuck { background: var(--bg); }
}

.hdr__in {
  display: flex; align-items: center; gap: var(--sp-5);
  max-width: var(--wrap-wide); margin-inline: auto;
  padding: var(--sp-3) var(--gutter);
  height: var(--header-h);
  transition: height var(--dur) var(--ease);
}
.hdr.is-stuck .hdr__in { height: var(--header-h-scrolled); }

.hdr__logo { flex: none; display: block; }
.hdr__logo-img--light { display: none; }
.hdr:not(.is-stuck) .hdr__logo-img--dark { display: none; }
.hdr:not(.is-stuck) .hdr__logo-img--light { display: block; }
.hdr:not(.is-stuck) .hdr__nav a { color: rgba(255, 255, 255, .88); }
.hdr:not(.is-stuck) .hdr__nav a:hover,
.hdr:not(.is-stuck) .hdr__nav a.is-active { color: #fff; }
.hdr:not(.is-stuck) .hdr__nav a::after { background: #fff; }
.hdr:not(.is-stuck) .iconbtn { color: rgba(255, 255, 255, .9); }
.hdr:not(.is-stuck) .iconbtn:hover { background: rgba(255, 255, 255, .12); color: #fff; }
.hdr:not(.is-stuck) .burger { border-color: rgba(255, 255, 255, .35); }
.hdr:not(.is-stuck) .burger__b { background: #fff; }
.hdr:not(.is-stuck) .hdr__cta {
  --btn-bg: transparent; --btn-fg: #fff; --btn-bd: rgba(255, 255, 255, .55);
}
.hdr:not(.is-stuck) .hdr__cta:hover {
  --btn-bg: #fff; --btn-fg: var(--accent-ink); --btn-bd: #fff; box-shadow: none;
}
.hdr:not(.is-stuck) .hdr__prog-bar { background: rgba(255, 255, 255, .6); }
.hdr__logo-img {
  height: 2.5rem; width: auto; transition: height var(--dur) var(--ease);
}
.hdr.is-stuck .hdr__logo-img { height: 2.1rem; }
/* Στο σκούρο θέμα το γκρι κείμενο του λογότυπου χάνεται — γυρίζουμε στην
   αντεστραμμένη εκδοχή που έχει ήδη ετοιμαστεί. */

.hdr__nav { margin-left: auto; }
.hdr__nav ul { display: flex; gap: clamp(0.5rem, 0.1rem + 1vw, 1.35rem); }
.hdr__nav a {
  position: relative; display: block; padding: var(--sp-2) 2px;
  font-size: var(--fs-sm); font-weight: var(--fw-medium);
  color: var(--text-body); text-decoration: none;
  transition: color var(--dur) var(--ease);
}
.hdr__nav a::after {
  content: ''; position: absolute; left: 0; right: 0; bottom: 0; height: 2px;
  background: var(--green-700); border-radius: 2px;
  transform: scaleX(0); transform-origin: left;
  transition: transform var(--dur) var(--ease-out);
}
.hdr__nav a:hover, .hdr__nav a.is-active { color: var(--text); }
.hdr__nav a:hover::after, .hdr__nav a.is-active::after { transform: scaleX(1); }

.hdr__act { display: flex; align-items: center; gap: var(--sp-2); margin-left: auto; }
.hdr__nav + .hdr__act { margin-left: 0; }

.hdr__prog { position: absolute; left: 0; right: 0; bottom: -1px; height: 2px; }
.hdr__prog-bar {
  display: block; height: 100%; width: 0%;
  background: linear-gradient(90deg, var(--green-700), var(--green-500));
  transition: width 90ms linear;
}

/* Στο κινητό το burger είναι το ΜΟΝΟ σημείο πλοήγησης, οπότε πρέπει να
   δείχνει πατήσιμο: δικό του περίγραμμα αντί για τρεις γραμμές στο κενό. */
.burger {
  display: none; width: 2.75rem; height: 2.75rem; position: relative;
  border: 1.5px solid var(--border-strong); border-radius: var(--r-sm);
  transition: border-color var(--dur) var(--ease), background var(--dur) var(--ease);
}
.burger:hover { border-color: var(--green-700); background: var(--bg-subtle); }
.burger:focus-visible { border-radius: var(--r-sm); }
.burger__b {
  position: absolute; left: 50%; width: 20px; height: 2px; border-radius: 2px;
  background: var(--text); translate: -50% 0;
  transition: translate var(--dur) var(--ease), rotate var(--dur) var(--ease), opacity var(--dur-fast);
}
.burger__b:nth-child(1) { top: 16px } .burger__b:nth-child(2) { top: 22px } .burger__b:nth-child(3) { top: 28px }
.burger[aria-expanded='true'] .burger__b:nth-child(1) { translate: -50% 6px; rotate: 45deg }
.burger[aria-expanded='true'] .burger__b:nth-child(2) { opacity: 0 }
.burger[aria-expanded='true'] .burger__b:nth-child(3) { translate: -50% -6px; rotate: -45deg }

@media (max-width: 1180px) {
  .hdr__nav { display: none; }
  .burger { display: block; }
  .hdr__cta { display: none; }
  /* Το `.hdr__nav + .hdr__act { margin-left: 0 }` παραπάνω ισχύει ακόμη κι όταν
     το nav είναι display:none — ο γειτονικός selector δεν κοιτά ορατότητα.
     Χωρίς αυτή τη γραμμή τα εικονίδια κολλάνε δίπλα στο λογότυπο αντί να
     πάνε στη δεξιά άκρη. */
  .hdr__nav + .hdr__act { margin-left: auto; }
}
@media (max-width: 560px) {
  .iconbtn--phone .iconbtn__txt { display: none; }
}

/* Στα 320px (iPhone SE 1ης γενιάς) το λογότυπο μαζί με τα κουμπιά ξεπερνούσε
   το πλάτος της οθόνης και έβγαζε οριζόντια μπάρα κύλισης σε ΟΛΗ τη σελίδα.
   Μικραίνουμε το λογότυπο και κρατάμε μόνο τα εικονίδια. */
@media (max-width: 420px) {
  .hdr__in { gap: var(--sp-2); padding-inline: var(--sp-3); }
  .hdr__logo-img, .hdr.is-stuck .hdr__logo-img { height: 1.95rem; }
  .hdr__act { gap: 2px; }
  .iconbtn__txt { display: none; }
  /* 44×44 είναι το ελάχιστο μέγεθος στόχου αφής. Με μόνο padding τα κουμπιά
     έβγαιναν 29px και αστοχούσε ο αντίχειρας. */
  .iconbtn { padding: 0; width: 2.5rem; height: 2.75rem; justify-content: center; }
  .burger { width: 2.5rem; }
}

/* ═══ 05 MOBILE MENU ════════════════════════════════════════════════════ */

.menu {
  position: fixed; inset: 0; z-index: var(--z-menu);
  background: var(--grey-900); color: #fff;
  display: grid; place-items: center;
  clip-path: circle(0% at calc(100% - 3rem) 2.5rem);
}
.menu.is-open { clip-path: circle(150% at calc(100% - 3rem) 2.5rem); }

/* Δική του μπάρα μέσα στο overlay: λογότυπο αριστερά, X δεξιά — ακριβώς εκεί
   που ήταν το burger, ώστε ο αντίχειρας να το βρίσκει χωρίς ψάξιμο. */
.menu__bar {
  position: absolute; top: 0; left: 0; right: 0;
  display: flex; align-items: center; justify-content: space-between;
  gap: var(--sp-4); padding: var(--sp-3) var(--gutter);
  height: var(--header-h);
}
.menu__logo { height: 2.1rem; width: auto; opacity: .9; }
.menu__x {
  width: 2.75rem; height: 2.75rem; flex: none;
  display: grid; place-items: center; border-radius: 50%;
  background: rgba(255, 255, 255, 0.08);
  border: 1.5px solid rgba(255, 255, 255, 0.22);
  color: #fff; cursor: pointer;
  transition: background var(--dur) var(--ease), border-color var(--dur) var(--ease),
              rotate var(--dur) var(--ease);
}
.menu__x:hover { background: rgba(255, 255, 255, 0.16); border-color: var(--green-500); rotate: 90deg; }
.menu__x .ico { width: 1.35rem; height: 1.35rem; }

.menu__in { text-align: center; padding: var(--sp-20) var(--gutter) var(--sp-10); width: 100%; }
.menu__list { display: grid; gap: clamp(0.35rem, 0.1rem + 1vh, 0.9rem); }
.menu__list a {
  display: inline-block; padding: var(--sp-2);
  font-family: var(--font-display); font-size: clamp(1.35rem, 1rem + 2.4vw, 2.1rem);
  font-weight: var(--fw-bold); letter-spacing: var(--ls-tight);
  color: #fff; text-decoration: none;
}
.menu__list a:hover { color: var(--green-500); }
.menu__foot {
  display: flex; gap: var(--sp-3); justify-content: center; flex-wrap: wrap;
  margin-top: var(--sp-10);
}

/* ═══ 06 HERO ═══════════════════════════════════════════════════════════
   Σύνθεση: η φωτογραφία καταλαμβάνει ΟΛΟ το πλαίσιο και μένει φωτεινή· το
   header επιπλέει από πάνω· η επικεφαλίδα είναι μικρή και σφιχτή· η τεράστια
   λέξη είναι ΔΙΑΚΟΣΜΗΤΙΚΟ στρώμα που ξεχειλίζει από κάτω αριστερά. */

.hero {
  position: relative; min-height: 100svh; display: flex;
  flex-direction: column; justify-content: center;
  background: var(--grey-900); color: #fff; overflow: clip;
  padding-block: calc(var(--header-h) + var(--sp-10)) clamp(6rem, 4rem + 6vw, 9rem);
}
.hero__media { position: absolute; inset: 0; }
.hero__img { width: 100%; height: 100%; object-fit: cover; transform-origin: center; }

/* Ελαφρύ σκίαστρο: μόνο όσο χρειάζεται για να διαβάζεται το κείμενο αριστερά.
   Η εικόνα ΔΕΝ πνίγεται — είναι το κύριο οπτικό στοιχείο της σελίδας. */
.hero__scrim {
  position: absolute; inset: 0;
  background:
    linear-gradient(92deg, rgba(14,16,17,.82) 0%, rgba(14,16,17,.55) 34%, rgba(14,16,17,.06) 62%, rgba(14,16,17,.28) 100%),
    linear-gradient(0deg, rgba(14,16,17,.62) 0%, rgba(14,16,17,0) 38%);
}
.hero__in { position: relative; width: 100%; max-width: var(--wrap); }

/* Η ΠΡΑΓΜΑΤΙΚΗ επικεφαλίδα. Το font-size μπαίνει ΕΔΩ, ώστε τα em του
   padding/margin παρακάτω να μετρώνται πάνω στο σωστό μέγεθος. */
.hero__h {
  font-size: clamp(2.25rem, 1.3rem + 4.2vw, 4.5rem);
  margin-bottom: var(--sp-6); color: #fff; max-width: 15ch;
}
.hero__h .line { display: block; overflow: hidden; margin-bottom: -0.12em; }
.hero__h .line__i {
  display: block; font-size: inherit;
  font-weight: var(--fw-x); letter-spacing: -0.035em;
  line-height: 1.06;
  /* χώρος για την ουρά του «g» / «γ» μέσα στη μάσκα του reveal */
  padding-bottom: 0.22em;
}

.hero__sub {
  font-size: var(--fs-md); line-height: 1.6;
  color: rgba(255, 255, 255, .8); max-width: 44ch;
  margin: var(--sp-6) 0 var(--sp-8);
}

/* ── Φώτα εκτός εστίασης ──────────────────────────────────────────────────
   ΧΩΡΙΣ filter: blur(). Ένα μεγάλο στοιχείο με blur filter αναγκάζει τον
   browser να ζωγραφίσει σε ξεχωριστή επιφάνεια και να τη θολώσει σε ΚΑΘΕ
   καρέ της κίνησης — από τα ακριβότερα πράγματα που μπορεί να ζητηθεί, και
   φαίνεται αμέσως στα κινητά. Ένα radial-gradient με απαλά stops είναι ήδη
   θολό εξ ορισμού και κοστίζει μηδέν.

   Το mix-blend-mode: screen κάνει τα φώτα να ΠΡΟΣΘΕΤΟΥΝ φως αντί να
   ζωγραφίζουν γκρι από πάνω — αλλιώς δείχνουν σαν λεκές, όχι σαν λάμψη.

   Κινούνται ΜΟΝΟ με transform: κάθε άλλη ιδιότητα θα ξανάφτιαχνε layout ή
   paint σε κάθε καρέ. */
.hero__lights { position: absolute; inset: 0; overflow: hidden; pointer-events: none; }
.hero__lights span {
  position: absolute; display: block; border-radius: 50%;
  mix-blend-mode: screen; will-change: transform;
  background: radial-gradient(circle closest-side,
    rgba(255, 255, 255, .60) 0%,
    rgba(255, 255, 255, .28) 34%,
    rgba(255, 255, 255, .08) 62%,
    rgba(255, 255, 255, 0)  100%);
}
/* ΣΚΟΠΙΜΑ ΚΑΝΕΝΑ φως πάνω στο αριστερό-πάνω τεταρτημόριο: εκεί κάθεται ο
   τίτλος h1, και λευκή λάμψη κάτω από λευκά γράμματα τρώει την αντίθεση. */
/* ΜΕΤΡΗΜΕΝΟ, και ήταν το λάθος της πρώτης εκδοχής: με ±9% διαδρομή σε 38s,
   τα φώτα μετακινούνταν 3.8px ανά 3 δευτερόλεπτα — περίπου 1px/s. Το
   animation έτρεχε κανονικά, απλώς κανείς δεν μπορούσε να το δει, οπότε το
   αποτέλεσμα ήταν ίδιο με ακίνητο. Κάτω από ~8px/s η κίνηση δεν γίνεται
   αντιληπτή· εδώ είναι ~25px/s.

   Τέσσερα σημεία αντί για δύο: το πήγαινε-έλα σε έναν άξονα διαβάζεται ως
   μηχανικό, ενώ μια κλειστή διαδρομή δείχνει σαν να αιωρείται.

   Το scale μέσα στο ΙΔΙΟ transform, όχι σε ξεχωριστή ιδιότητα: δύο δηλώσεις
   transform η μία ακυρώνει την άλλη. */
.hero__lights span:nth-child(1) {
  width: 46vmax; height: 46vmax; left: -14%; bottom: -22%; opacity: .40;
  animation: heroLight1 21s ease-in-out infinite;
}
.hero__lights span:nth-child(2) {
  width: 34vmax; height: 34vmax; right: -8%; top: -14%; opacity: .30;
  animation: heroLight2 26s ease-in-out infinite;
}
.hero__lights span:nth-child(3) {
  width: 26vmax; height: 26vmax; left: 46%; bottom: 4%; opacity: .22;
  animation: heroLight3 17s ease-in-out infinite;
}
@keyframes heroLight1 {
  0%   { transform: translate3d(0, 0, 0)         scale(1);    }
  25%  { transform: translate3d(22%, -9%, 0)     scale(1.10); }
  50%  { transform: translate3d(30%, -26%, 0)    scale(1.04); }
  75%  { transform: translate3d(8%, -18%, 0)     scale(0.94); }
  100% { transform: translate3d(0, 0, 0)         scale(1);    }
}
@keyframes heroLight2 {
  0%   { transform: translate3d(0, 0, 0)         scale(1);    }
  25%  { transform: translate3d(-16%, 14%, 0)    scale(0.92); }
  50%  { transform: translate3d(-26%, 28%, 0)    scale(1.08); }
  75%  { transform: translate3d(-10%, 20%, 0)    scale(1.02); }
  100% { transform: translate3d(0, 0, 0)         scale(1);    }
}
@keyframes heroLight3 {
  0%   { transform: translate3d(0, 0, 0)         scale(1);    }
  25%  { transform: translate3d(-20%, -12%, 0)   scale(1.12); }
  50%  { transform: translate3d(-34%, 6%, 0)     scale(0.96); }
  75%  { transform: translate3d(-14%, 16%, 0)    scale(1.06); }
  100% { transform: translate3d(0, 0, 0)         scale(1);    }
}

.hero__cta {
  display: inline-flex; align-items: center; gap: var(--sp-2);
  padding: 0.95em 2.3em; border-radius: var(--r-pill);
  border: 1.5px solid rgba(255, 255, 255, .55);
  font-family: var(--font-display); font-size: var(--fs-base);
  font-weight: var(--fw-semi); letter-spacing: var(--ls-wide);
  text-transform: uppercase; color: #fff; text-decoration: none;
  transition: background var(--dur) var(--ease), color var(--dur) var(--ease),
              border-color var(--dur) var(--ease);
}
/* Πράσινο στο hover, με ΛΕΥΚΟ κείμενο.

   ΓΙΑΤΙ --green-800 ΚΑΙ ΟΧΙ ΤΟ ΦΩΤΕΙΝΟ ΠΡΑΣΙΝΟ ΤΗΣ ΜΑΡΚΑΣ — μετρημένο,
   λευκό κείμενο πάνω σε κάθε πράσινο της κλίμακας:
     --green-500  2.20:1   --green-600  2.31:1
     --green-700  3.51:1   --green-800  5.23:1  <- το μόνο που περνά το 4.5:1
   Το ίδιο πράσινο χρησιμοποιεί ήδη το .btn--brand:hover για λευκό κείμενο,
   οπότε το κουμπί του hero μπαίνει επιτέλους στο ίδιο σύστημα. */
.hero__cta:hover {
  background: var(--green-800); color: #fff; border-color: var(--green-800);
}

/* Η λέξη-κλειδί του τίτλου. Το --green-500 μετρά 6.28:1 πάνω στο σκούρο
   έδαφος του hero — πάνω από το 4.5:1 ακόμη και ως μικρό κείμενο, ενώ εδώ
   είναι display μέγεθος. Σε ΛΕΥΚΟ φόντο η ίδια απόχρωση θα ήταν 1.85:1,
   γι' αυτό ο κανόνας μένει κλειδωμένος μέσα στο .hero__h. */
.hero__h .hl { color: var(--green-500); }


@media (max-width: 640px) {
  .hero { padding-block: calc(var(--header-h) + var(--sp-8)) 7rem; }
  .hero__scrim {
    background: linear-gradient(180deg, rgba(14,16,17,.86) 0%, rgba(14,16,17,.42) 38%, rgba(14,16,17,.90) 100%);
  }
}

/* ═══ 08 SERVICES ═══════════════════════════════════════════════════════ */

/* ── Στοιβαζόμενα πάνελ ────────────────────────────────────────────────
   Καθαρό CSS sticky: κάθε πάνελ «κολλάει» κάτω από το header και το επόμενο
   περνά από πάνω του. Καμία JavaScript, άρα δουλεύει πάντα και δεν χρειάζεται
   ξεχωριστή αντιμετώπιση για prefers-reduced-motion.
   Το --stack-top κρατά χώρο για το sticky header. */
.stack {
  --stack-top: calc(var(--header-h-scrolled) + 1rem);
  margin-bottom: var(--section-y);
}
.stack__i {
  position: sticky;
  top: calc(var(--stack-top) + var(--i) * 0.85rem);
  padding-bottom: var(--sp-6);
}
.stack__i:last-child { padding-bottom: 0; }

.panel {
  display: grid; gap: clamp(1.5rem, 0.8rem + 3vw, 3.5rem);
  grid-template-columns: 1fr;
  align-items: center;
  padding: clamp(1.5rem, 0.9rem + 2.6vw, 3.25rem);
  border-radius: var(--r-2xl);
  background: var(--surface);
  border: 1px solid var(--border);
  box-shadow: var(--sh-lg);
  min-height: min(30rem, 72svh);
  /* Αδιαφανές φόντο: χωρίς αυτό φαίνεται το από κάτω πάνελ και η στοίβα
     γίνεται χυλός. */
  overflow: hidden;
}
@media (min-width: 900px) {
  .panel { grid-template-columns: minmax(0, 1fr) minmax(0, 1.02fr); }
}

.panel__h {
  font-size: var(--fs-2xl); line-height: var(--lh-tight);
  letter-spacing: var(--ls-tight); margin-bottom: var(--sp-4); max-width: 18ch;
}
.panel__lead {
  font-size: var(--fs-md); color: var(--text-body);
  max-width: 46ch; margin-bottom: var(--sp-5);
}
.panel__cta {
  font-size: var(--fs-md);
  padding: 1.05em 2.1em;
  align-self: start;
}
.panel__cta .ico { width: 1.15em; height: 1.15em; }

.panel__fig { margin: 0; border-radius: var(--r-xl); overflow: hidden; align-self: stretch; }
.panel__fig picture, .panel__fig img { display: block; width: 100%; height: 100%; }
.panel__fig img { object-fit: cover; min-height: 14rem; }

/* ── Στοίβα σε κινητό ───────────────────────────────────────────────────
   Το στοίβαγμα διατηρείται και στο κινητό. Ο μόνος κίνδυνος είναι ένα πάνελ
   ψηλότερο από την οθόνη: τότε το επόμενο θα έκοβε το κάτω μέρος του πριν
   προλάβει να διαβαστεί. Γι᾽ αυτό εδώ το πάνελ γίνεται συμπαγές και ΔΕΝ
   ξεπερνά ποτέ το ύψος της οθόνης. */
@media (max-width: 899px) {
  .stack { --stack-top: calc(var(--header-h-scrolled) + 0.5rem); }
  .stack__i {
    top: calc(var(--stack-top) + var(--i) * 0.5rem);
    padding-bottom: var(--sp-4);
  }
  .panel {
    min-height: 0;
    max-height: calc(100svh - var(--stack-top) - 1.5rem);
    padding: var(--sp-5);
    gap: var(--sp-4);
    grid-template-rows: auto 1fr;
  }
  .panel__fig { order: -1; }
  .panel__fig img { min-height: 0; height: clamp(6rem, 22svh, 10rem); }
  .panel__h { font-size: var(--fs-xl); margin-bottom: var(--sp-2); }
  .panel__lead {
    font-size: var(--fs-sm); margin-bottom: var(--sp-4);
    display: -webkit-box; -webkit-box-orient: vertical; -webkit-line-clamp: 4;
    line-clamp: 4; overflow: hidden;
  }
}

/* Σε πολύ κοντές ή πολύ στενές οθόνες κόβουμε ό,τι είναι διακοσμητικό,
   ώστε ο τίτλος και το κουμπί να χωρούν πάντα. */
@media (max-width: 899px) and (max-height: 700px), (max-width: 400px) {
  .panel__lead { -webkit-line-clamp: 3; line-clamp: 3; }
}

/* ═══ 10 CHECK-UPS ══════════════════════════════════════════════════════ */

.checkups {
  display: grid; gap: var(--sp-5);
  grid-template-columns: repeat(auto-fill, minmax(min(280px, 100%), 1fr));
}
.cu {
  display: flex; flex-direction: column; overflow: hidden;
  border-radius: var(--r-lg); background: var(--surface);
  border: 1px solid var(--border); box-shadow: var(--sh-sm);
  transition: transform var(--dur) var(--ease-out), box-shadow var(--dur) var(--ease-out);
}
.cu:hover { transform: translateY(-4px); box-shadow: var(--sh-lg); }
.cu__fig { margin: 0; aspect-ratio: 3/2; background: var(--bg-tint); }
.cu__fig img { width: 100%; height: 100%; object-fit: cover; }
.cu__body { padding: var(--sp-6); display: flex; flex-direction: column; gap: var(--sp-3); flex: 1; }
.cu__h { font-size: var(--fs-lg); }
.cu__lead { font-size: var(--fs-sm); color: var(--text-body); }
.cu__k {
  font-size: var(--fs-xs); font-weight: var(--fw-bold); letter-spacing: var(--ls-wide);
  text-transform: uppercase; color: var(--text-muted); margin-top: var(--sp-2);
}
.cu__list { display: grid; gap: var(--sp-2); font-size: var(--fs-sm); flex: 1; }
.cu__list li { display: flex; gap: var(--sp-2); align-items: flex-start; }
.cu__list .ico { color: var(--green-700); width: 1.05em; height: 1.05em; margin-top: .3em; }
.cu__prov {
  display: flex; gap: var(--sp-2); align-items: flex-start;
  font-size: var(--fs-xs); color: var(--warning);
  background: var(--warning-bg); padding: var(--sp-3); border-radius: var(--r-sm);
}

/* ═══ 11 BOOKING FORM ═══════════════════════════════════════════════════ */

.book { background: var(--grad-brand); }
.book__card {
  background: var(--surface); border: 1px solid var(--border);
  border-radius: var(--r-2xl); box-shadow: var(--sh-xl);
  padding: clamp(1.25rem, 0.6rem + 2.8vw, 3rem);
}

.steps { display: flex; gap: var(--sp-2); justify-content: space-between; margin-bottom: var(--sp-3); }
.steps__i {
  display: flex; align-items: center; gap: var(--sp-2); flex: 1;
  font-size: var(--fs-sm); color: var(--text-muted);
  transition: color var(--dur) var(--ease);
}
.steps__i.is-on, .steps__i.is-done { color: var(--text); }
.steps__n {
  width: 1.9rem; height: 1.9rem; flex: none; border-radius: 50%;
  display: grid; place-items: center;
  border: 1.5px solid var(--border-strong);
  font-size: var(--fs-xs); font-weight: var(--fw-bold);
  transition: background var(--dur) var(--ease), border-color var(--dur) var(--ease), color var(--dur) var(--ease);
}
.steps__i.is-on .steps__n { background: var(--green-800); border-color: var(--green-800); color: #fff; }
.steps__i.is-done .steps__n { background: var(--green-50); border-color: var(--green-700); color: var(--green-800); }
.steps__t { font-weight: var(--fw-medium); }
@media (max-width: 680px) { .steps__t { display: none; } .steps__i { flex: 0; } .steps { justify-content: flex-start; gap: var(--sp-3); } }

.steps__rail { height: 3px; border-radius: 3px; background: var(--border); overflow: hidden; margin-bottom: var(--sp-8); }
.steps__fill {
  display: block; height: 100%; width: 33.33%; border-radius: 3px;
  background: linear-gradient(90deg, var(--green-700), var(--green-500));
  transition: width var(--dur-slow) var(--ease-out);
}

.pane { display: none; }
.pane.is-on { display: block; }

.hp { position: absolute; left: -9999px; width: 1px; height: 1px; overflow: hidden; }

.errsum {
  border: 1.5px solid var(--danger); background: var(--danger-bg);
  border-radius: var(--r-md); padding: var(--sp-4); margin-bottom: var(--sp-6);
}
.errsum__t {
  display: flex; align-items: center; gap: var(--sp-2);
  font-weight: var(--fw-semi); color: var(--danger); margin-bottom: var(--sp-2);
}
.errsum ul { padding-left: 1.6em; font-size: var(--fs-sm); color: var(--danger); }
.errsum li + li { margin-top: var(--sp-1); }
.errsum button { color: inherit; text-decoration: underline; font: inherit; cursor: pointer; }

.fs { margin-bottom: var(--sp-8); }
.fs__l {
  font-family: var(--font-display); font-size: var(--fs-md); font-weight: var(--fw-bold);
  color: var(--text); margin-bottom: var(--sp-4); padding: 0;
}
.fs__lead { font-size: var(--fs-sm); color: var(--text-muted); margin: calc(var(--sp-3) * -1) 0 var(--sp-4); }

.picks { display: grid; gap: var(--sp-3); grid-template-columns: repeat(auto-fit, minmax(min(210px,100%), 1fr)); }
.picks--loc { grid-template-columns: repeat(auto-fit, minmax(min(190px,100%), 1fr)); }

.pick { position: relative; }
.pick input { position: absolute; opacity: 0; inset: 0; width: 100%; height: 100%; cursor: pointer; }
.pick__b {
  display: flex; gap: var(--sp-3); align-items: center; height: 100%;
  padding: var(--sp-4); border-radius: var(--r-md);
  border: 1.5px solid var(--border-strong); background: var(--surface);
  cursor: pointer;
  transition: border-color var(--dur) var(--ease), background var(--dur) var(--ease),
              box-shadow var(--dur) var(--ease);
}
.pick:hover .pick__b { border-color: var(--green-700); }
.pick input:focus-visible + .pick__b {
  outline: var(--focus-ring-width) solid var(--focus-ring); outline-offset: 2px;
}
.pick input:checked + .pick__b {
  border-color: var(--green-700); background: var(--green-50); box-shadow: 0 0 0 1px var(--green-700) inset;
}
.pick input:disabled + .pick__b { opacity: .45; cursor: not-allowed; }
.pick__ico { color: var(--green-700); }
.pick__t { font-weight: var(--fw-semi); color: var(--text); font-size: var(--fs-base); }

.grid2 { display: grid; gap: var(--sp-4) var(--sp-5); grid-template-columns: repeat(auto-fit, minmax(min(240px,100%), 1fr)); }
.fld--wide { grid-column: 1 / -1; }

.fld { display: flex; flex-direction: column; gap: var(--sp-2); margin-bottom: var(--sp-5); }
.grid2 .fld { margin-bottom: 0; }
.fld__l { font-size: var(--fs-sm); font-weight: var(--fw-semi); color: var(--text); }
.req { color: var(--danger); text-decoration: none; border: 0; font-weight: var(--fw-bold); }
.opt { font-weight: var(--fw-regular); color: var(--text-muted); font-size: var(--fs-xs); }

.fld__i {
  width: 100%; padding: 0.75em 0.9em; border-radius: var(--r-sm);
  border: 1.5px solid var(--border-strong); background: var(--surface);
  color: var(--text); font-size: var(--fs-base);
  transition: border-color var(--dur) var(--ease), box-shadow var(--dur) var(--ease);
}
.fld__i::placeholder { color: var(--text-muted); opacity: .75; }
.fld__i:hover { border-color: var(--grey-400); }
.fld__i:focus-visible {
  border-color: var(--green-700); outline: none;
  box-shadow: 0 0 0 3px color-mix(in srgb, var(--green-700) 26%, transparent);
}
.fld__i[aria-invalid='true'] { border-color: var(--danger); }
.fld__i[aria-invalid='true']:focus-visible { box-shadow: 0 0 0 3px color-mix(in srgb, var(--danger) 24%, transparent); }

.fld__hint { font-size: var(--fs-xs); color: var(--text-muted); }
.fld__hint--count { text-align: right; font-variant-numeric: tabular-nums; }
.fld__hint--count.is-low { color: var(--warning); }

.err {
  display: flex; align-items: center; gap: 0.4em;
  font-size: var(--fs-xs); font-weight: var(--fw-medium); color: var(--danger);
}
.err::before { content: '⚠'; font-size: 1.05em; }

.addr { border: 1px dashed var(--border-strong); border-radius: var(--r-md); padding: var(--sp-5); }

.note {
  display: flex; gap: var(--sp-3); align-items: flex-start;
  font-size: var(--fs-sm); padding: var(--sp-3) var(--sp-4);
  border-radius: var(--r-sm); margin-top: var(--sp-3);
}
.note .ico { margin-top: .15em; flex: none; }
.note--info { background: var(--bg-subtle); color: var(--text-body); }
.note--tint { background: var(--green-50); color: var(--green-800); }
.note--warn { background: var(--warning-bg); color: var(--warning); }

.checks { display: grid; gap: var(--sp-3); margin: var(--sp-8) 0; }
.chk { display: flex; gap: var(--sp-3); align-items: flex-start; }
.chk input {
  width: 1.25rem; height: 1.25rem; flex: none; margin-top: .15em;
  accent-color: var(--green-700); cursor: pointer;
}
.chk label { font-size: var(--fs-sm); color: var(--text-body); cursor: pointer; }

.bf__nav { display: flex; justify-content: space-between; gap: var(--sp-3); margin-top: var(--sp-8); }

.sum { background: var(--bg-subtle); border-radius: var(--r-md); padding: var(--sp-5); margin-top: var(--sp-6); }
.sum__h { font-size: var(--fs-md); margin-bottom: var(--sp-3); }
.sum__dl { display: grid; grid-template-columns: auto 1fr; gap: var(--sp-2) var(--sp-4); font-size: var(--fs-sm); }
/* Σε στενή οθόνη οι δύο στήλες στριμώχνονται και κάθε τιμή σπάει σε τέσσερις
   γραμμές («Thursday, / 10 / September / 2026»). Τις στοιβάζουμε: ετικέτα
   πάνω, τιμή από κάτω, με όλο το πλάτος στη διάθεσή της. */
@media (max-width: 560px) {
  .sum__dl { grid-template-columns: 1fr; gap: 0; }
  .sum__dl dt { font-size: var(--fs-xs); letter-spacing: var(--ls-wide);
                text-transform: uppercase; margin-top: var(--sp-3); }
  .sum__dl dt:first-of-type { margin-top: 0; }
  .sum__dl dd { font-size: var(--fs-base); }
}
.sum__dl dt { color: var(--text-muted); }
.sum__dl dd { color: var(--text); font-weight: var(--fw-medium); }

.res { text-align: center; padding: var(--sp-6) 0; }
.res__h { font-size: var(--fs-2xl); margin: var(--sp-4) 0 var(--sp-2); }
.res__p { color: var(--text-body); max-width: 46ch; margin-inline: auto; }
.res__ref { font-size: var(--fs-md); margin-bottom: var(--sp-5); }
.res__ref strong {
  font-family: var(--font-mono); letter-spacing: .06em;
  background: var(--green-50); color: var(--green-800);
  padding: .25em .6em; border-radius: var(--r-xs);
}
.res .sum__dl { max-width: 26rem; margin: 0 auto var(--sp-5); text-align: left; }
.res .note { text-align: left; max-width: 34rem; margin-inline: auto; }
.res__act { display: flex; gap: var(--sp-3); justify-content: center; flex-wrap: wrap; margin-top: var(--sp-6); }
.res--err .ico--xl { color: var(--danger); margin-inline: auto; }

.res__mark { width: 5rem; height: 5rem; margin-inline: auto; }
.res__circle { stroke: var(--green-700); stroke-width: 2.5; stroke-dasharray: 145; stroke-dashoffset: 0; }
.res__check { stroke: var(--green-700); stroke-width: 3.5; stroke-linecap: round; stroke-linejoin: round;
              stroke-dasharray: 40; stroke-dashoffset: 0; }
.res.is-anim .res__circle { animation: draw .55s var(--ease-out) forwards; }
.res.is-anim .res__check { animation: draw .38s var(--ease-out) .38s backwards; }
@keyframes draw { from { stroke-dashoffset: 145 } to { stroke-dashoffset: 0 } }

/* ═══ 11b CALENDAR & SLOTS ══════════════════════════════════════════════ */

.when { display: grid; gap: var(--sp-6); grid-template-columns: minmax(0,1fr) minmax(0,1fr); }
@media (max-width: 720px) { .when { grid-template-columns: 1fr; } }

.cal { border: 1px solid var(--border); border-radius: var(--r-md); padding: var(--sp-4); }
.cal__hd { display: flex; align-items: center; justify-content: space-between; gap: var(--sp-2); margin-bottom: var(--sp-4); }
.cal__m { font-size: var(--fs-md); text-transform: capitalize; }
.cal__grid { display: grid; gap: 3px; }
/* Τα κελιά ζουν μέσα σε [role="row"] (το απαιτεί το role="grid" για τους
   αναγνώστες οθόνης). Άρα οι επτά στήλες ορίζονται ΣΤΗ ΓΡΑΜΜΗ — αν μείνουν
   στο δοχείο, το grid μετρά τις γραμμές ως στήλες και το ημερολόγιο γίνεται
   μια κατακόρυφη κολόνα. */
.cal__grid > [role="row"] {
  display: grid; grid-template-columns: repeat(7, 1fr); gap: 3px;
}
.cal__wd {
  text-align: center; font-size: var(--fs-xs); font-weight: var(--fw-bold);
  color: var(--text-muted); padding-bottom: var(--sp-2);
}
.cal__d {
  position: relative; aspect-ratio: 1; display: grid; place-items: center;
  border-radius: var(--r-sm); border: 1.5px solid transparent; background: transparent;
  font-size: var(--fs-sm); font-variant-numeric: tabular-nums; color: var(--text);
  cursor: pointer;
  transition: background var(--dur-fast) var(--ease), border-color var(--dur-fast) var(--ease);
}
/* ΠΡΟΣΟΧΗ ΣΤΗ ΣΕΙΡΑ ΚΑΙ ΣΤΗΝ ΕΙΔΙΚΟΤΗΤΑ:
   το `.cal__d:hover:not([disabled])` βαθμολογείται (0,3,0) ενώ το
   `.cal__d[aria-selected]` μόνο (0,2,0). Χωρίς το :not() παρακάτω, το hover
   πάνω σε ΕΠΙΛΕΓΜΕΝΗ μέρα έβαζε ανοιχτό πράσινο φόντο αλλά κρατούσε το λευκό
   κείμενο του επιλεγμένου — και ο αριθμός εξαφανιζόταν. */
.cal__d:hover:not([disabled]):not([aria-selected='true']) {
  background: var(--green-50); border-color: var(--green-700);
}
.cal__d[disabled] { color: var(--grey-400); cursor: not-allowed; text-decoration: line-through; text-decoration-thickness: 1px; }
.cal__d[aria-selected='true'] { background: var(--green-800); border-color: var(--green-800); color: #fff; font-weight: var(--fw-bold); }
.cal__d[aria-selected='true']:hover { background: var(--green-700); border-color: var(--green-700); color: #fff; }
.cal__spacer { aspect-ratio: 1; }


.slots__h { font-size: var(--fs-md); margin-bottom: var(--sp-2); }
.slots__for { font-size: var(--fs-sm); color: var(--text-muted); margin-bottom: var(--sp-4); }
.slots__grid { display: grid; gap: var(--sp-2); grid-template-columns: repeat(auto-fill, minmax(72px,1fr)); max-height: 19rem; overflow-y: auto; padding-right: 2px; }
.slot {
  padding: 0.55em 0.3em; border-radius: var(--r-sm);
  border: 1.5px solid var(--border-strong); background: var(--surface);
  font-size: var(--fs-sm); font-variant-numeric: tabular-nums; color: var(--text);
  cursor: pointer;
  transition: border-color var(--dur-fast) var(--ease), background var(--dur-fast) var(--ease);
}
.slot:hover { border-color: var(--green-700); }
.slot[aria-pressed='true'] { background: var(--green-800); border-color: var(--green-800); color: #fff; font-weight: var(--fw-semi); }

/* ═══ 12 LOCATIONS & MAP ════════════════════════════════════════════════ */

.locs { display: grid; gap: var(--sp-5); grid-template-columns: repeat(auto-fit, minmax(min(300px,100%),1fr)); }
.loc {
  display: flex; flex-direction: column; gap: var(--sp-4);
  padding: var(--sp-6); border-radius: var(--r-lg);
  background: var(--surface); border: 1px solid var(--border); box-shadow: var(--sh-sm);
}
.loc--main { border-color: var(--green-700); box-shadow: var(--sh-md); }
.loc__top { display: flex; gap: var(--sp-3); align-items: center; }
.loc__ico { color: var(--green-700); }
.loc__ico .ico { width: 1.6rem; height: 1.6rem; }
.loc__h { font-size: var(--fs-lg); }
.loc__addr { font-style: normal; font-size: var(--fs-base); color: var(--text-body); }

.htab { width: 100%; font-size: var(--fs-base); border-collapse: collapse; }
.htab caption {
  text-align: left; font-size: var(--fs-xs); font-weight: var(--fw-bold);
  letter-spacing: var(--ls-caps); text-transform: uppercase;
  color: var(--text-muted); padding-bottom: var(--sp-3);
}
.htab tr + tr th, .htab tr + tr td { border-top: 1px solid var(--border); }
.htab th, .htab td { text-align: left; padding: 0.6em 0; vertical-align: baseline; }
.htab th {
  font-weight: var(--fw-medium); color: var(--text-body);
  padding-right: var(--sp-5);
}
.htab td {
  font-variant-numeric: tabular-nums; color: var(--text);
  font-weight: var(--fw-medium); white-space: nowrap; text-align: right;
}
.htab tr.is-today th, .htab tr.is-today td { color: var(--text-accent); font-weight: var(--fw-semi); }
.htab .closed { color: var(--text-muted); font-weight: var(--fw-regular); }

.loc__act { display: flex; gap: var(--sp-3); flex-wrap: wrap; margin-top: auto; padding-top: var(--sp-4); }
/* Στην ίδια κλίμακα με την υπόλοιπη σελίδα — τα κουμπιά της κάρτας είναι
   πραγματικές ενέργειες (οδηγίες, τηλέφωνο, κράτηση), όχι υποσημειώσεις. */
.loc__act .btn { font-size: var(--fs-base); padding: 0.85em 1.6em; }
.loc__act .btn .ico { width: 1.2em; height: 1.2em; }
.loc__todo { display: flex; gap: var(--sp-2); font-size: var(--fs-xs); color: var(--warning); background: var(--warning-bg); padding: var(--sp-3); border-radius: var(--r-sm); }

.mapbox {
  margin-top: var(--sp-8); border-radius: var(--r-lg); overflow: hidden;
  border: 1px solid var(--border); background: var(--bg-subtle);
  aspect-ratio: 21/9; min-height: 260px;
}
.mapbox iframe { width: 100%; height: 100%; border: 0; display: block; }
.mapbox__load {
  width: 100%; height: 100%; display: grid; place-items: center; gap: var(--sp-2);
  align-content: center; cursor: pointer; color: var(--text-body);
  background: var(--grad-brand-strong);
  transition: background var(--dur) var(--ease);
}
.mapbox__load:hover { background: var(--green-100); }
.mapbox__load .ico { color: var(--green-700); }
.mapbox__t { font-family: var(--font-display); font-weight: var(--fw-bold); font-size: var(--fs-md); color: var(--text); }
.mapbox__n { font-size: var(--fs-xs); color: var(--text-muted); max-width: 32ch; text-align: center; }

/* ═══ 13 ABOUT & TIMELINE ═══════════════════════════════════════════════ */

/* ── ΤΟ ΕΡΓΑΣΤΗΡΙΟ ──────────────────────────────────────────────────────
   Σκούρα ζώνη σε πλήρες πλάτος, με τη φωτογραφία του χώρου σβησμένη από
   πίσω. Δηλωτική, όχι άλλη μια διπλή στήλη κειμένου: η ενότητα λέει ποιοι
   είναι, δεν απαριθμεί στοιχεία μητρώου. */
.about {
  position: relative; overflow: clip;
  background: var(--grey-900); color: #fff;
  padding-block: clamp(5rem, 3rem + 9vw, 11rem);
}
.about__bg { position: absolute; inset: 0; }
/* Το <picture> είναι inline εξ ορισμού και ΔΕΝ έχει ύψος, οπότε το
   `height: 100%` της εικόνας δεν είχε τι να μετρήσει: το φόντο σταματούσε στο
   φυσικό ύψος της λήψης (916px) και το υπόλοιπο section (1277px) έμενε σκέτο
   σκούρο. Κάθε <picture> που λειτουργεί ως γέμισμα γίνεται block πρώτα. */
.about__bg picture, .hero__media picture { display: block; width: 100%; height: 100%; }
/* Η εικόνα about-bg είναι ΗΔΗ duotone και σκοτεινή από την επεξεργασία
   (tools → .tmp/about_bg.py). Δεν τη σβήνουμε κι άλλο εδώ: με opacity .28 και
   scrim .92 από πάνω, το φόντο εξαφανιζόταν τελείως και η ενότητα έμοιαζε
   απλώς μαύρη. Το scrim κρατά μόνο όσο χρειάζεται για να διαβάζεται το κείμενο
   πάνω από τα φωτεινά σημεία της σύνθεσης. */
.about__bg img { width: 100%; height: 100%; object-fit: cover; opacity: 1; }
.about__scrim {
  position: absolute; inset: 0;
  background:
    radial-gradient(105% 80% at 50% 45%, rgba(14,17,16,.62) 0%, rgba(14,17,16,.30) 60%, rgba(14,17,16,.55) 100%),
    linear-gradient(180deg, rgba(14,17,16,.72) 0%, rgba(14,17,16,.35) 30%, rgba(14,17,16,.78) 100%);
}
.about__in { position: relative; max-width: 64rem; text-align: center; }

/* Ο τίτλος είναι ολόκληρη πρόταση, όχι μία λέξη — άρα ένα σκαλί κάτω από το
   display του hero, ώστε να διαβάζεται σε δύο άνετες γραμμές. */
.about__h {
  font-size: var(--fs-3xl); line-height: 1.06; letter-spacing: -0.03em;
  color: #fff; max-width: 20ch; margin: 0 auto clamp(2rem, 1.2rem + 2.4vw, 3.25rem);
  text-wrap: balance;
}

/* Σώμα κειμένου: γραμματοσειρά κειμένου, όχι display, και στενό μέτρο.
   Τρεις παράγραφοι σε 26px display font διάβαζαν σαν σλόγκαν, όχι σαν κείμενο. */
.about__say { display: grid; gap: var(--sp-6); max-width: 58ch; margin-inline: auto; }
.about__say p {
  font-size: var(--fs-md); line-height: 1.75;
  color: #CFD2D3; text-wrap: pretty;
}
/* Η τελευταία παράγραφος συνοψίζει — λίγο πιο φωτεινή, χωρίς να φωνάζει. */
.about__say p:last-child { color: #EDEFEF; }

.sign {
  margin: clamp(3rem, 2rem + 3.5vw, 5rem) auto 0; max-width: 46rem;
  padding-top: clamp(2rem, 1.4rem + 1.8vw, 3rem);
  border-top: 1px solid rgba(255, 255, 255, 0.14);
}
.sign__q p {
  font-family: var(--font-display); font-size: var(--fs-xl); font-weight: var(--fw-bold);
  letter-spacing: var(--ls-tight); line-height: 1.22; color: var(--green-500);
  text-wrap: balance; max-width: 24ch; margin-inline: auto;
}
.sign__by { margin-top: var(--sp-6); display: grid; gap: 4px; }
.sign__name {
  font-family: var(--font-display); font-size: var(--fs-base);
  font-weight: var(--fw-bold); color: #fff;
}
.sign__role {
  font-size: var(--fs-xs); letter-spacing: var(--ls-caps);
  text-transform: uppercase; color: #9A9C9E;
}

/* ═══ 14 WHY ════════════════════════════════════════════════════════════ */

/* Τέσσερις στήλες, όλα κεντραρισμένα: μεγάλο εικονίδιο πάνω, έντονος τίτλος,
   σύντομη περιγραφή από κάτω. */
.whys {
  display: grid; gap: clamp(2rem, 1rem + 3vw, 3.5rem);
  grid-template-columns: repeat(4, minmax(0, 1fr));
}
@media (max-width: 980px) { .whys { grid-template-columns: repeat(2, minmax(0, 1fr)); } }
@media (max-width: 520px) { .whys { grid-template-columns: 1fr; } }

.why { text-align: center; display: flex; flex-direction: column; align-items: center; }
.why__ico {
  width: 4.5rem; height: 4.5rem; margin-bottom: var(--sp-5);
  display: grid; place-items: center; border-radius: 50%;
  background: var(--green-50); color: var(--green-700);
  transition: background var(--dur) var(--ease), transform var(--dur) var(--ease-back);
}
.why__ico .ico { width: 2.1rem; height: 2.1rem; }
.why:hover .why__ico { background: var(--green-100); transform: translateY(-4px); }
.why__h {
  font-size: var(--fs-lg); font-weight: var(--fw-bold);
  letter-spacing: var(--ls-snug); margin-bottom: var(--sp-3); text-wrap: balance;
}
.why__d {
  font-size: var(--fs-base); color: var(--text-body);
  max-width: 30ch; margin-inline: auto; text-wrap: pretty;
}

/* ═══ 15 ARTICLES ═══════════════════════════════════════════════════════ */

.arts { display: grid; gap: var(--sp-5); grid-template-columns: repeat(auto-fill, minmax(min(290px,100%),1fr)); }
.art {
  position: relative; display: flex; flex-direction: column; overflow: hidden;
  border-radius: var(--r-lg); background: var(--surface);
  border: 1px solid var(--border);
  transition: transform var(--dur) var(--ease-out), box-shadow var(--dur) var(--ease-out);
}
.art:hover, .art:focus-within { transform: translateY(-4px); box-shadow: var(--sh-lg); }
.art__fig { margin: 0; aspect-ratio: 4/3; overflow: hidden; background: var(--bg-tint); }
.art__fig img { width: 100%; height: 100%; object-fit: cover; transition: scale var(--dur-xslow) var(--ease-out); }
.art:hover .art__fig img { scale: 1.05; }
.art__body { padding: var(--sp-5); display: flex; flex-direction: column; gap: var(--sp-2); flex: 1; }
.art__meta { font-size: var(--fs-xs); color: var(--text-muted); display: flex; gap: var(--sp-3); align-items: center; }
.art__h { font-size: var(--fs-md); letter-spacing: var(--ls-snug); }
.art__x { font-size: var(--fs-sm); color: var(--text-body); flex: 1; }
.art__a {
  display: inline-flex; align-items: center; gap: var(--sp-2); margin-top: var(--sp-2);
  font-size: var(--fs-sm); font-weight: var(--fw-semi); color: var(--text-accent);
  background: none; border: 0; padding: 0; cursor: pointer; text-align: left;
}
.art__a::before { content: ''; position: absolute; inset: 0; }
.art__a .ico { transition: translate var(--dur) var(--ease); }
.art:hover .art__a .ico { translate: 3px 0; }

/* ═══ 16 FAQ ════════════════════════════════════════════════════════════ */

.faq { border-top: 1px solid var(--border); }
.faq__i { border-bottom: 1px solid var(--border); }
.faq__q {
  display: flex; align-items: center; justify-content: space-between; gap: var(--sp-4);
  padding: var(--sp-5) 0; cursor: pointer; list-style: none;
  font-family: var(--font-display); font-size: var(--fs-md); font-weight: var(--fw-semi);
  color: var(--text); letter-spacing: var(--ls-snug);
  transition: color var(--dur) var(--ease);
}
.faq__q::-webkit-details-marker { display: none; }
.faq__q:hover { color: var(--text-accent); }
.faq__chev { flex: none; color: var(--green-700); transition: rotate var(--dur) var(--ease); }
.faq__i[open] .faq__chev { rotate: 180deg; }
.faq__a { padding-bottom: var(--sp-5); font-size: var(--fs-sm); color: var(--text-body); max-width: 68ch; }
.faq__i[open] .faq__a { animation: faqIn var(--dur-slow) var(--ease-out); }
@keyframes faqIn { from { opacity: 0; translate: 0 -6px } to { opacity: 1; translate: 0 0 } }

/* Δύο στήλες σε desktop. Χρησιμοποιούμε grid και ΟΧΙ `columns: 2`: το
   multi-column ξαναμοιράζει τα στοιχεία στις στήλες κάθε φορά που ανοίγει μια
   απάντηση, οπότε ερωτήσεις πηδούν από τη μια στήλη στην άλλη κάτω από το
   δάχτυλο του χρήστη.

   Αφήνουμε επίτηδες το προεπιλεγμένο `align-items: stretch`. Τα δύο κελιά μιας
   σειράς παίρνουν το ίδιο ύψος, άρα οι κάτω γραμμές τους πέφτουν στο ίδιο
   σημείο και η οριζόντια γραμμή διαβάζεται συνεχής σε όλο το πλάτος — η ίδια
   τυπογραφική λογική με την υπόλοιπη σελίδα. Με `align-items: start` οι
   γραμμές θα έσπαγαν σε σκαλοπάτια όποτε δύο ερωτήσεις είχαν διαφορετικό
   αριθμό σειρών. Επειδή το `name="faq"` κρατά ανοιχτή μόνο μία ερώτηση, το
   κόστος είναι ένα κενό στο διπλανό κελί της μίας σειράς που ανοίγει. */
@media (min-width: 900px) {
  .faq {
    display: grid;
    grid-template-columns: repeat(2, minmax(0, 1fr));
    column-gap: clamp(3rem, 1rem + 3vw, 5rem);
  }
}

/* ═══ 17 CONTACT ════════════════════════════════════════════════════════ */

/* ΔΟΚΙΜΑΣΤΗΚΕ ΚΑΙ ΑΠΟΡΡΙΦΘΗΚΕ: σβήσιμο του φωτεινού προς το σκούρο πάνω από
   ~130px. Στα χαρτιά δένει τις δύο ενότητες· στην οθόνη βγάζει μια θολή
   γκρίζα ζώνη που διαβάζεται ως λερωμένη οθόνη. Μια καθαρή ακμή με ρητό
   τόνο είναι ΠΡΟΘΕΣΗ — μια σβησμένη ακμή είναι ατύχημα. Το δέσιμο γίνεται
   τώρα στο ίδιο το footer, με λεπτή γραμμή στο χρώμα της μάρκας. */
.contact { background: var(--grad-brand); text-align: center; }
.contact__head { max-width: 46rem; margin: 0 auto var(--sp-8); }
.contact__h { font-size: var(--fs-3xl); line-height: var(--lh-tight); }

/* Το τηλέφωνο ΕΙΝΑΙ η ενέργεια. Σε μέγεθος display, όχι θαμμένο σε λίστα. */
.bigtel {
  display: inline-flex; align-items: center; gap: clamp(1rem, .5rem + 1.6vw, 2rem);
  text-decoration: none; color: var(--text);
  padding: var(--sp-2) 0; margin-bottom: var(--sp-3);
}
.bigtel__num {
  font-family: var(--font-display); font-weight: var(--fw-x);
  font-size: clamp(2rem, 0.9rem + 4.6vw, 4.5rem);
  letter-spacing: -0.035em; line-height: 1;
  font-variant-numeric: tabular-nums;
  transition: color var(--dur) var(--ease);
}
.bigtel__go {
  width: clamp(3rem, 1.6rem + 3vw, 4.5rem); height: clamp(3rem, 1.6rem + 3vw, 4.5rem);
  flex: none; border-radius: 50%; display: grid; place-items: center;
  background: var(--green-700); color: #fff;
  transition: transform var(--dur) var(--ease-back), background var(--dur) var(--ease);
}
.bigtel__go .ico { width: 45%; height: 45%; }
.bigtel:hover .bigtel__num { color: var(--text-accent); }
.bigtel:hover .bigtel__go { background: var(--green-800); transform: scale(1.08) rotate(-8deg); }
.bigtel__sub { font-size: var(--fs-md); color: var(--text-muted); margin-bottom: var(--sp-12); }

.ctiles {
  display: grid; gap: var(--sp-4); text-align: left;
  grid-template-columns: repeat(auto-fit, minmax(min(260px, 100%), 1fr));
  max-width: 68rem; margin-inline: auto;
}
.ctile {
  display: grid; gap: var(--sp-2); align-content: start;
  padding: var(--sp-6); border-radius: var(--r-lg);
  background: var(--surface); border: 1px solid var(--border);
  transition: border-color var(--dur) var(--ease), transform var(--dur) var(--ease-out),
              box-shadow var(--dur) var(--ease);
}
.ctile:hover { border-color: var(--green-700); transform: translateY(-3px); box-shadow: var(--sh-md); }
.ctile__ico {
  width: 3.25rem; height: 3.25rem; border-radius: var(--r-md);
  display: grid; place-items: center; margin-bottom: var(--sp-2);
  background: var(--green-50); color: var(--green-700);
}
.ctile__k {
  font-size: var(--fs-sm); font-weight: var(--fw-bold); letter-spacing: var(--ls-wide);
  text-transform: uppercase; color: var(--text-muted);
}
.ctile__v {
  font-family: var(--font-display);
  font-size: var(--fs-md); font-weight: var(--fw-semi);
  letter-spacing: var(--ls-snug);
  color: var(--text); font-style: normal;
  text-decoration: none;
  /* `anywhere` έσπαγε το email στη μέση («…cytanet.com» / «.cy»).
     Με `break-word` σπάει μόνο αν πραγματικά δεν χωράει, και με τρία
     πλακίδια αντί για τέσσερα χωράει άνετα σε μία γραμμή. */
  overflow-wrap: break-word;
}
a.ctile__v:hover { color: var(--text-accent); }
.ctile__link {
  display: inline-flex; align-items: center; gap: 0.4em; margin-top: var(--sp-2);
  font-size: var(--fs-base); font-weight: var(--fw-semi); color: var(--text-accent);
  text-decoration: none;
}
.ctile__link .ico { transition: translate var(--dur) var(--ease); }
.ctile__link:hover .ico { translate: 3px 0; }

.social { margin-top: var(--sp-12); display: grid; gap: var(--sp-3); justify-items: center; }
.social__k {
  font-size: var(--fs-sm); font-weight: var(--fw-bold); letter-spacing: var(--ls-wide);
  text-transform: uppercase; color: var(--text-muted);
}
.social__row { display: flex; gap: var(--sp-3); }
.social__a {
  width: 3rem; height: 3rem; border-radius: 50%;
  display: grid; place-items: center;
  border: 1.5px solid var(--border-strong); color: var(--text-body);
  transition: border-color var(--dur) var(--ease), color var(--dur) var(--ease),
              background var(--dur) var(--ease), transform var(--dur) var(--ease-back);
}
.social__a:hover {
  border-color: var(--green-700); color: var(--text-accent);
  background: var(--green-50); transform: translateY(-2px);
}

/* ═══ 18 FOOTER ═════════════════════════════════════════════════════════ */

/* Σχεδόν μαύρο, ΟΧΙ το --grey-900 της υπόλοιπης σελίδας: το φόντο πρέπει να
   υποχωρεί τελείως ώστε να δουλέψουν τα δύο αμυδρά στρώματα (σύμβολο και
   όνομα). Πάνω σε #2B2D2E ένα στρώμα στο 5% δεν φαίνεται καθόλου. */
.ft {
  position: relative; overflow: hidden; isolation: isolate;
  background: #141716; color: #C4C6C8;
  /* Η ένωση με τη σελίδα: λεπτή γραμμή στο πράσινο της μάρκας. Δηλώνει ότι
     η ακμή είναι εκεί επειδή την βάλαμε, όχι επειδή τελείωσε το χρώμα. */
  border-top: 2px solid var(--green-700);
  padding-block: clamp(3rem, 1.5rem + 5vw, 6rem) clamp(6rem, 3rem + 10vw, 12rem);
}

.ft__bg { position: absolute; inset: 0; z-index: 0; pointer-events: none; }
/* Το <picture> είναι inline και δεν έχει ύψος — το height:100% της εικόνας
   δεν θα είχε τι να μετρήσει. Ίδια παγίδα με το .about__bg. */
.ft__bg picture { display: block; width: 100%; height: 100%; }
/* Η αμυδρότητα μπαίνει στο <img>, ΟΧΙ στο .ft__bg: το GSAP γράφει opacity
   inline στο περιτύλιγμα για την είσοδο και το inline κερδίζει — ακριβώς το
   λάθος που είχε βγάλει το σύμβολο κατάφωτο πράσινο. */
.ft__bg img {
  width: 100%; height: 100%; object-fit: cover; object-position: 50% 42%;
  opacity: .34;
}

/* ΤΟ ΟΡΙΟ ΖΕΙ ΕΔΩ, ΟΧΙ ΣΤΑ PIXEL ΤΗΣ ΕΙΚΟΝΑΣ — το είχα ψήσει μία φορά στο
   JPEG και έσπασε μόλις άλλαξε η αναλογία του footer, επειδή το
   object-fit: cover ξεσυγχρονίζει συντεταγμένες εικόνας και footer.

   ΔΥΟ ΣΤΡΩΣΕΙΣ:
     1. κάθετη — η πάνω ακμή γίνεται ακριβώς #141716 ώστε να μη φαίνεται
        ραφή κάτω από την πράσινη γραμμή του .ft.
     2. οριζόντια — σκουραίνει ΚΑΙ ΤΙΣ ΔΥΟ άκρες. Στο νέο footer το κείμενο
        ακουμπά αριστερά ΚΑΙ δεξιά, οπότε δεν υπάρχει «καθαρό μισό» όπως
        στην προηγούμενη διάταξη· η εικόνα ζει στο κέντρο. */
.ft__scrim {
  position: absolute; inset: 0; pointer-events: none;
  background:
    linear-gradient(to bottom,
      #141716               0%,
      rgba(20, 23, 22, .62) 16%,
      rgba(20, 23, 22, .10) 40%,
      rgba(20, 23, 22, 0)   60%),
    linear-gradient(to right,
      rgba(20, 23, 22, .92)   0%,
      rgba(20, 23, 22, .58)  26%,
      rgba(20, 23, 22, .58)  74%,
      rgba(20, 23, 22, .92) 100%);
}

/* Το σύμβολο κεντράρεται και οι σύνδεσμοι το πλαισιώνουν αριστερά και δεξιά. */
.ft__glyph {
  position: absolute; top: clamp(1rem, 0.5rem + 2vw, 3rem); left: 50%;
  translate: -50% 0; z-index: 0; pointer-events: none;
  width: clamp(9rem, 5rem + 12vw, 17rem); aspect-ratio: 1;
}
/* Η αμυδρότητα ΠΡΕΠΕΙ να μπει στο <img> και όχι στο .ft__glyph: το GSAP
   γράφει opacity inline στο ίδιο το .ft__glyph για την είσοδο, και το inline
   κερδίζει πάντα — το σύμβολο έβγαινε κατάφωτο πράσινο. Δύο στοιχεία, δύο
   ανεξάρτητα κανάλια διαφάνειας. */
.ft__glyph img {
  width: 100%; height: 100%; object-fit: contain; display: block; opacity: .11;
}

/* Δύο στήλες: πλοήγηση αριστερά, νομικά δεξιά, το σύμβολο ανάμεσά τους.
   space-between και ΟΧΙ grid τριών στηλών: το σύμβολο είναι απόλυτα
   τοποθετημένο, οπότε δεν πρέπει να καταλαμβάνει θέση στη ροή. */
.ft__cols {
  position: relative; z-index: 1;
  display: flex; flex-wrap: wrap; justify-content: space-between;
  gap: var(--sp-8);
  padding-block: clamp(4rem, 2rem + 7vw, 8rem) clamp(1.5rem, 1rem + 2vw, 2.5rem);
}
.ft__nav { display: grid; gap: var(--sp-4); align-content: start; }
.ft__nav--end { text-align: right; }
.ft__nav a, .ft__nav .linkbtn {
  position: relative; font-size: var(--fs-sm); color: #C4C6C8;
  text-decoration: none; padding-block: 2px; justify-self: start;
  transition: color var(--dur) var(--ease);
}
.ft__nav--end a, .ft__nav--end .linkbtn { justify-self: end; }
/* Υπογράμμιση που χτίζεται από τα αριστερά αντί για σκέτη αλλαγή χρώματος.
   scaleX και όχι width: το width κάνει layout σε κάθε καρέ. */
.ft__nav a::after, .ft__nav .linkbtn::after {
  content: ''; position: absolute; left: 0; right: 0; bottom: 0; height: 1px;
  background: var(--green-500); transform: scaleX(0); transform-origin: left;
  transition: transform var(--dur) var(--ease);
}
.ft__nav a:hover, .ft__nav .linkbtn:hover { color: var(--green-500); }
.ft__nav a:hover::after, .ft__nav .linkbtn:hover::after { transform: scaleX(1); }

/* Η πράσινη γραμμή του προτύπου. Είναι το border-top αυτής της σειράς και όχι
   ξεχωριστό στοιχείο — ένα <hr> θα ήταν ένας κόμβος για ένα pixel. */
.ft__bot {
  position: relative; z-index: 1;
  display: flex; flex-wrap: wrap; gap: var(--sp-3) var(--sp-6);
  align-items: center; justify-content: space-between;
  padding-top: var(--sp-5);
  border-top: 1px solid var(--green-700);
  /* ΜΕΤΡΗΜΕΝΟ: το #8B8D8F που ήταν εδώ έδινε 4.15:1 — κάτω από το 4.5:1 που
     ζητά το WCAG AA για μικρό κείμενο. */
  font-size: var(--fs-xs); color: #9EA1A3;
}

/* Το όνομα της μάρκας ως στρώμα, κομμένο στην κάτω ακμή.
   ΜΟΝΟ vw, κανένας σταθερός όρος: μετρημένα, το «medipalas» βγάζει ≈5.1em σε
   αυτή τη γραμματοσειρά, οπότε κάθε σταθερή προσθήκη μέσα στο clamp το βγάζει
   εκτός οθόνης σε κάποιο πλάτος. Το ίδιο λάθος είχε γίνει ήδη μία φορά. */
.ft__mark {
  position: absolute; left: 50%; translate: -50% 0; bottom: -0.06em; z-index: 0;
  font-family: var(--font-display); font-weight: var(--fw-medium);
  font-size: 20vw;
  line-height: 0.78; letter-spacing: -0.035em;
  /* Πράσινη απόχρωση και όχι ουδέτερο λευκό: πάνω σε #141716 το λευκό στο 5%
     βγάζει γκρι που δεν ανήκει στην παλέτα. */
  color: rgba(122, 193, 67, .07);
  pointer-events: none; user-select: none; white-space: nowrap;
}
/* ── Υπογραφή κατασκευαστή ─────────────────────────────────────────────── */
.ft__by {
  display: inline-flex; align-items: baseline; gap: 0.5em;
  font-family: var(--font-display); font-size: var(--fs-xs); color: #8B8D8F;
}
.ab {
  display: inline-flex; align-items: baseline;
  color: #fff; text-decoration: none; letter-spacing: -0.01em;
  font-size: 1.25em; transition: color var(--dur) var(--ease);
}
.ab:hover { color: var(--green-500); }
.ab__air { font-weight: var(--fw-x); }
.ab__b   { font-weight: var(--fw-regular); }
/* Το ανασηκωμένο «o» είναι το ίδιο το αερόστατο του λογότυπου. */
.ab__o {
  font-weight: var(--fw-regular); font-size: 0.62em;
  transform: translateY(-0.62em); display: inline-block;
}

@media (max-width: 640px) {
  /* Οι δύο στήλες γίνονται μία: σε 390px δεν χωρούν δίπλα δίπλα χωρίς να
     σπάσει κάθε φράση σε δύο γραμμές. */
  .ft__cols { flex-direction: column; gap: var(--sp-6); }
  .ft__nav--end { text-align: left; }
  .ft__nav--end a, .ft__nav--end .linkbtn { justify-self: start; }
  .ft__bot { flex-direction: column; align-items: flex-start; }
}

/* ═══ 19 FLOATING UI ════════════════════════════════════════════════════ */

.fab {
  position: fixed; z-index: var(--z-float);
  width: 3.5rem; height: 3.5rem; border-radius: 50%;
  display: grid; place-items: center; cursor: pointer;
  box-shadow: var(--sh-lg);
  transition: transform var(--dur) var(--ease-back), box-shadow var(--dur) var(--ease);
}
.fab:hover { transform: scale(1.06); }

/* Το σήμα WhatsApp μπαίνει ΑΥΤΟΥΣΙΟ: καμία πράσινη «πλάκα» από πίσω, κανένα
   περίγραμμα, καμία σκιά — το ίδιο το λογότυπο κουβαλά το σχήμα και το
   λευκό δαχτυλίδι του. */
/* ΣΕΙΡΑ ΣΤΟΙΒΑΞΗΣ: το WhatsApp στη ΧΑΜΗΛΟΤΕΡΗ γωνία, το βελάκι «πάνω»
   από πάνω του — ήταν ανάποδα. Δύο λόγοι:
     α) Το βελάκι εμφανίζεται μόνο αφού κυλήσει ο χρήστης, οπότε στο hero
        το WhatsApp άφηνε 92px κενό από κάτω του. Με τον δείκτη κύλισης
        να έχει φύγει, το κενό γινόταν ολοφάνερο.
     β) Στο κινητό το WhatsApp ΗΤΑΝ ήδη στα 24px. Τώρα η θέση του είναι
        η ίδια παντού, αντί να μετακινείται στο breakpoint. */
.fab--wa {
  right: 20px; bottom: 24px;
  width: 60px; height: 60px;
  background: none; box-shadow: none; border-radius: 0;
  text-decoration: none;
}
.fab--wa .ico {
  width: 60px; height: 60px;
  filter: drop-shadow(0 3px 8px rgba(18, 32, 22, 0.22));
}
.fab--wa:hover { transform: scale(1.07); }
/* Ο παλμός κινείται ΜΟΝΟ με transform/opacity, ώστε να μένει στον compositor.
   Με animated box-shadow ο browser ξαναζωγραφίζει το fixed στοιχείο σε κάθε
   καρέ και η κύλιση κολλάει αισθητά. */
.fab--wa::before {
  content: ''; position: absolute; inset: 2px; border-radius: 50%;
  border: 2px solid rgba(37, 211, 102, .55);
  opacity: 0; pointer-events: none;
  will-change: transform, opacity;
  animation: pulse 6s var(--ease-out) infinite;
}
@keyframes pulse {
  0%, 84% { transform: scale(1);    opacity: 0 }
  88%     { transform: scale(1);    opacity: .7 }
  97%     { transform: scale(1.42); opacity: 0 }
  100%    { transform: scale(1.42); opacity: 0 }
}
.fab__tip {
  position: absolute; right: calc(100% + 0.7rem); white-space: nowrap;
  background: var(--grey-900); color: #fff; font-size: var(--fs-xs);
  padding: 0.45em 0.8em; border-radius: var(--r-sm);
  opacity: 0; pointer-events: none; translate: 6px 0;
  transition: opacity var(--dur) var(--ease), translate var(--dur) var(--ease);
}
.fab--wa:hover .fab__tip, .fab--wa:focus-visible .fab__tip { opacity: 1; translate: 0 0; }

.fab--top {
  right: 24px; bottom: 96px;
  background: var(--surface); color: var(--text); border: 1px solid var(--border);
}
.fab--top:hover { color: var(--text-accent); border-color: var(--green-700); }

/* Στο κινητό το βελάκι «πάνω» φεύγει — η κύλιση με τον αντίχειρα είναι ήδη
   φθηνή και δύο αιωρούμενα κουμπιά τρώνε την οθόνη. Το WhatsApp παίρνει τη
   θέση του, στη χαμηλότερη γωνία όπου φτάνει άνετα ο αντίχειρας. */
@media (max-width: 860px) {
  .fab--top { display: none !important; }
}


/* ═══ 20 COOKIES ═══════════════════════════════════════════════ */



.ck {
  position: fixed; left: var(--sp-4); right: var(--sp-4); bottom: var(--sp-4);
  z-index: var(--z-toast); max-width: 62rem; margin-inline: auto;
  background: var(--surface); border: 1px solid var(--border);
  border-radius: var(--r-lg); box-shadow: var(--sh-xl);
  padding: var(--sp-5);
  animation: ckIn var(--dur-slow) var(--ease-out);
}
@keyframes ckIn { from { opacity: 0; translate: 0 20px } to { opacity: 1; translate: 0 0 } }
.ck__in { display: flex; gap: var(--sp-5); align-items: center; flex-wrap: wrap; }
.ck__in > div:first-child { flex: 1 1 22rem; }
.ck__h { font-size: var(--fs-md); margin-bottom: var(--sp-1); }
.ck__t { font-size: var(--fs-sm); color: var(--text-body); }
.ck__act { display: flex; gap: var(--sp-2); flex-wrap: wrap; }
@media (max-width: 700px) { .ck { bottom: 5.5rem; } .ck__act { width: 100%; } .ck__act .btn { flex: 1; } }

.ns { background: var(--warning-bg); color: var(--grey-900); padding: var(--sp-8) 0; }
.ns h2 { font-size: var(--fs-xl); margin-bottom: var(--sp-3); }
.ns h3 { font-size: var(--fs-md); margin: var(--sp-6) 0 var(--sp-2); }
.ns ul { padding-left: 1.3em; }
.ns li { margin-top: var(--sp-1); }
.ns a { color: var(--green-800); }

/* ═══ 21 PRINT & MOTION ═════════════════════════════════════════════════ */

/* Η κατάσταση εκκίνησης των animations μπαίνει ΜΟΝΟ όταν το GSAP έχει
   πραγματικά φορτώσει και είναι έτοιμο. Αν αποτύχει το CDN, όλα είναι ήδη
   ορατά — δεν κρύβουμε ποτέ περιεχόμενο περιμένοντας JavaScript. */
html.gsap-ready .reveal { opacity: 0; }
html.gsap-ready .ft__bg, html.gsap-ready .ft__glyph, html.gsap-ready .ft__mark { opacity: 0; }
/* ΠΡΟΣΟΧΗ: πρέπει να είναι `transform`, ΟΧΙ η ιδιότητα `translate`.
   Το GSAP γράφει στο `transform`· αν η αρχική κατάσταση μπει στο ξεχωριστό
   `translate`, το animation δεν την ακυρώνει ποτέ και ο τίτλος μένει αόρατος. */
html.gsap-ready .hero__h .line__i { transform: translateY(105%); }

@media (prefers-reduced-motion: reduce) {
  html { scroll-behavior: auto; }
  html.gsap-ready .reveal { opacity: 1; }
  html.gsap-ready .ft__bg, html.gsap-ready .ft__glyph, html.gsap-ready .ft__mark { opacity: 1; }
  html.gsap-ready .hero__h .line__i { transform: none; }
  .grain, .fab--wa::before { animation: none; }
  /* Τα φώτα ΜΕΝΟΥΝ ορατά, απλώς ακίνητα: είναι μέρος της εικόνας, όχι εφέ
     εισόδου. Το prefers-reduced-motion ζητά λιγότερη κίνηση, όχι λιγότερο
     σχεδιασμό. */
  .hero__lights span { animation: none; }
  .fab--wa::before { display: none; }
  .menu { transition: none; }
}

@media print {
  .hdr, .menu, .fab, .ck, .hero__media,
  .announce, .mapbox, .filters, .bf__nav, .steps__rail { display: none !important; }
  body { background: #fff; color: #000; font-size: 11pt; }
  .sec { padding-block: 1rem; break-inside: avoid; }
  .hero { min-height: auto; background: #fff; color: #000; padding-block: 1rem; }
  .hero__h, .hero__sub, .hero__strip { color: #000; }
  .card, .loc, .art, .cu, .book__card { break-inside: avoid; box-shadow: none; border: 1px solid #ccc; }
  a[href^='http']::after { content: ' (' attr(href) ')'; font-size: 9pt; color: #555; }
  .faq { display: block; }
  .faq__i > .faq__a { display: block !important; }
}