/* ============================================================
   DRIADES NAOUSSA v2 — design system
   Ανοιχτόχρωμο «boutique» θέμα: κρεμ επιφάνειες που εναλλάσσονται με
   ανθρακί ζώνες, display serif με italic έμφαση, κουμπιά-κάψουλες.
   Αισθητική αναφορά: oneiron.gr (παλέτα/τυπογραφία/ρυθμός) — ο κώδικας
   είναι γραμμένος από την αρχή, χωρίς build step και χωρίς βιβλιοθήκες.
   ============================================================ */

@import url("https://fonts.googleapis.com/css2?family=Noto+Serif:ital,wght@0,500;0,600;1,500&family=Inter:wght@400;500;600&display=swap");

:root {
  /* Παλέτα */
  --charcoal:   #26201E;
  --earth:      #43342F;
  --cream:      #F7EFEA;
  --cream-50:   #FDFAF7;
  --cream-100:  #FAF5F1;
  --cream-200:  #EFDFD6;
  --terracotta: #A65A4A;
  --terracotta-600: #884637;
  --terracotta-100: #F2DAD3;
  --ocher:      #D4A373;   /* χρυσό italic πάνω σε σκούρο */
  --brass:      #B58C6A;
  --muted:      #6F605A;   /* δευτερεύον κείμενο σε ανοιχτό φόντο (AA σε cream) */
  --muted-dark: rgb(var(--cream-50-rgb) / 0.62); /* δευτερεύον κείμενο σε σκούρο */
  --line:       rgb(var(--charcoal-rgb) / 0.11);
  --line-dark:  rgb(var(--cream-50-rgb) / 0.10);
  --white:      #FFFFFF;
  /* Κανάλια RGB των βασικών χρωμάτων, για διαφάνειες που ακολουθούν το preset */
  --charcoal-rgb:   38 32 30;
  --cream-50-rgb:   253 250 247;
  --header-rgb:     55 44 40;
  --ocher-rgb:      212 163 115;
  --terracotta-rgb: 166 90 74;
  --shadow-sm:  0 1px 2px rgb(var(--charcoal-rgb) / 0.04), 0 8px 24px -12px rgb(var(--charcoal-rgb) / 0.18);
  --shadow-md:  0 2px 4px rgb(var(--charcoal-rgb) / 0.04), 0 24px 48px -24px rgb(var(--charcoal-rgb) / 0.35);

  /* Ψευδώνυμα των παλιών ονομάτων — τα χρησιμοποιούν ακόμα inline styles
     μέσα στις σελίδες, οπότε αντιστοιχίζονται στα νέα, ανοιχτόχρωμα νοήματα */
  --bg:        var(--cream-100);
  --surface:   var(--white);
  --ink:       var(--charcoal);
  --stone:     var(--muted);
  --honey-600: var(--terracotta);
  --honey-700: var(--terracotta-600);
  --pine-900:  var(--charcoal);
  --sage-50:   var(--cream-50);
  --sage-100:  var(--cream-200);

  --font-display: "Noto Serif", Georgia, "Times New Roman", serif;
  /* Βάρη τίτλων για τη Noto Serif */
  --fw-head: 600; --fw-h1: 500; --fw-em: 500;
  --font-body: "Inter", system-ui, -apple-system, "Segoe UI", Roboto, sans-serif;

  --container: 1200px;
  --radius: 14px;
  --radius-lg: 24px;
  --grain: url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' width='180' height='180'><filter id='n'><feTurbulence type='fractalNoise' baseFrequency='.85' numOctaves='2' stitchTiles='stitch'/><feColorMatrix values='0 0 0 0 1  0 0 0 0 1  0 0 0 0 1  0 0 0 .55 0'/></filter><rect width='100%' height='100%' filter='url(%23n)'/></svg>");
}

*, *::before, *::after { box-sizing: border-box; }
html { scroll-behavior: smooth; }
body {
  margin: 0;
  background: var(--cream-100);
  color: var(--charcoal);
  font-family: var(--font-body);
  font-size: 16.5px;
  line-height: 1.65;
  -webkit-font-smoothing: antialiased;
  text-rendering: optimizeLegibility;
}
img { max-width: 100%; display: block; }
a { color: inherit; }
::selection { background: var(--terracotta); color: var(--cream-50); }
:focus-visible { outline: 2px solid var(--terracotta); outline-offset: 3px; border-radius: 4px; }

/* ---------- Τυπογραφία ----------
   Τίτλοι σε Literata: σύγχρονη, ζεστή serif με σωστά ελληνικά και όμορφα italic,
   πολύ ευανάγνωστη σε κάθε μέγεθος. Βάρη 500/600 (μεταβλητά
   μέσω --fw-* ώστε ο επιλογέας δοκιμών να τα προσαρμόζει ανά γραμματοσειρά). */
h1, h2, h3, h4 {
  font-family: var(--font-display);
  font-weight: var(--fw-head, 600);
  line-height: 1.06;
  margin: 0 0 0.5em;
  text-wrap: balance;
  color: var(--charcoal);
}
h1 { font-size: clamp(2.8rem, 5.6vw + 1rem, 6.2rem); font-weight: var(--fw-h1, 500); letter-spacing: -0.02em; line-height: 1.04; }
h2 { font-size: clamp(2rem, 2.4vw + 1.1rem, 3.1rem); letter-spacing: -0.012em; }
/* Νομικά κείμενα: μακροσκελείς τίτλοι, σε μέγεθος που δεν γεμίζει την οθόνη */
.legal h1 { font-size: clamp(2.2rem, 2.2vw + 1.2rem, 3.4rem); line-height: 1.1; margin-bottom: 0.6em; }
h3 { font-size: 1.45rem; line-height: 1.2; letter-spacing: -0.01em; }
h4 { font-size: 1.1rem; }
/* Η έμφαση μέσα σε τίτλο: italic στο χρώμα του accent — το «υπογραφή» στοιχείο */
h1 em, h2 em, h3 em { font-style: italic; font-weight: var(--fw-em, 500); color: var(--terracotta); }
p { max-width: 68ch; }

.eyebrow {
  display: inline-flex; align-items: center; gap: 14px;
  font-family: var(--font-body); font-size: 0.72rem; font-weight: 500;
  letter-spacing: 0.3em; text-transform: uppercase;
  color: var(--terracotta); margin-bottom: 1.1em;
}
.eyebrow::before { content: ""; width: 40px; height: 1px; background: currentColor; opacity: 0.7; }
.text-center .eyebrow::after,
.eyebrow--center::after { content: ""; width: 40px; height: 1px; background: currentColor; opacity: 0.7; }

.lead { font-size: 1.12rem; color: var(--muted); }

/* ---------- Layout ---------- */
.container { max-width: var(--container); margin: 0 auto; padding: 0 24px; }
.section { padding: clamp(80px, 9vw, 128px) 0; position: relative; }
.section--tight { padding: clamp(48px, 5vw, 72px) 0; }
/* Διαδοχικές ενότητες εναλλάσσουν τόνο κρεμ αντί για διαχωριστική γραμμή */
.section + .section:not(.section--dark):not(.section--cream-100) { background: var(--cream); }
.section--cream { background: var(--cream); }
.section--cream-100 { background: var(--cream-100); }

/* Σκούρα ζώνη με υφή κόκκου — δίνει βάθος χωρίς εικόνα */
.section--dark, .intro-band, .site-footer {
  background-color: var(--charcoal); color: var(--cream-50); position: relative; isolation: isolate;
}
.section--dark::before, .intro-band::before, .site-footer::before {
  content: ""; position: absolute; inset: 0; z-index: -1; pointer-events: none;
  background-image: var(--grain); opacity: 0.07; mix-blend-mode: overlay;
}
.section--dark h1, .section--dark h2, .section--dark h3,
.intro-band h2, .site-footer h2 { color: var(--cream-50); }
.section--dark h1 em, .section--dark h2 em, .section--dark h3 em,
.intro-band h2 em, .site-footer h2 em, .hero h1 em { color: var(--ocher); }
.section--dark .eyebrow, .intro-band .eyebrow, .site-footer .eyebrow { color: var(--ocher); }
.section--dark p { color: var(--muted-dark); }

.grid-2 { display: grid; grid-template-columns: 1fr 1fr; gap: clamp(40px, 5vw, 80px); align-items: center; }
.grid-3 { display: grid; grid-template-columns: repeat(3, 1fr); gap: 28px; }
@media (max-width: 860px) { .grid-2, .grid-3 { grid-template-columns: 1fr; } }

/* Διακοσμητικό διαχωριστικό: φύλλο δρυός ανάμεσα σε δύο γραμμές */
.divider {
  display: flex; align-items: center; justify-content: center; gap: 16px;
  color: var(--ocher); margin: 8px auto 48px;
}
.divider::before, .divider::after { content: ""; width: 72px; height: 1px; background: currentColor; opacity: 0.5; }
.divider svg { width: 18px; height: 18px; }

/* ---------- Κουμπιά — κάψουλες ---------- */
.btn {
  display: inline-flex; align-items: center; gap: 0.55em;
  padding: 0.95em 1.7em; border-radius: 999px;
  font-family: var(--font-body); font-weight: 500; font-size: 0.93rem; line-height: 1;
  text-decoration: none; border: 1px solid transparent; cursor: pointer;
  transition: background-color .2s ease, color .2s ease, border-color .2s ease, transform .2s ease;
}
.btn svg { width: 16px; height: 16px; flex: none; }
.btn .arrow { transition: transform .2s ease; }
.btn:hover .arrow { transform: translateX(3px); }
.btn--primary { background: var(--terracotta); color: var(--cream-50); }
.btn--primary:hover { background: var(--terracotta-600); }
.btn--dark { background: var(--charcoal); color: var(--cream-50); }
.btn--dark:hover { background: var(--earth); }
.btn--outline { background: transparent; border-color: rgb(var(--charcoal-rgb) / 0.2); color: var(--charcoal); }
.btn--outline:hover { background: var(--charcoal); border-color: var(--charcoal); color: var(--cream-50); }
.btn--ghost { background: transparent; border-color: rgb(var(--cream-50-rgb) / 0.35); color: var(--cream-50); }
.btn--ghost:hover { background: rgb(var(--cream-50-rgb) / 0.1); border-color: rgb(var(--cream-50-rgb) / 0.6); }
.btn:disabled { opacity: 0.6; cursor: default; }

/* Σύνδεσμος-κείμενο με υπογράμμιση και βελάκι */
.text-link {
  display: inline-flex; align-items: center; gap: 8px;
  color: var(--terracotta); text-decoration: none; font-weight: 500; font-size: 0.95rem;
  padding-bottom: 4px; border-bottom: 1px solid currentColor;
}
.text-link:hover { color: var(--terracotta-600); }

/* ---------- Header — διάφανο πάνω στο hero, συμπαγές μετά το scroll ---------- */
.site-header {
  position: fixed; top: 0; left: 0; right: 0; z-index: 40;
  color: var(--cream-50);
  transition: background-color .3s ease, box-shadow .3s ease;
}
.site-header.is-scrolled { background: rgb(var(--header-rgb) / 0.94); box-shadow: 0 10px 30px -18px rgba(0,0,0,0.6); }
.site-header .container {
  max-width: 1320px; display: flex; align-items: center; gap: 28px;
  padding-top: 22px; padding-bottom: 22px; transition: padding .3s ease;
}
.site-header.is-scrolled .container { padding-top: 12px; padding-bottom: 12px; }
/* Σελίδες χωρίς hero (νομικά κείμενα): η κεφαλίδα δεν έχει φωτογραφία από
   κάτω, οπότε είναι σκούρα από την αρχή και το περιεχόμενο ξεκινά κάτω της */
body:not(:has(.hero)) .site-header { background: var(--charcoal); }
body:not(:has(.hero)) > .section:first-of-type { padding-top: 180px; }

.site-header__brand, .site-header__logo {
  display: flex; align-items: center; gap: 16px; text-decoration: none; color: var(--cream-50); flex: none;
}
.site-header__brand img, .site-header__logo img { height: 34px; width: auto; filter: brightness(0) invert(1); }
.site-header__tag {
  font-size: 0.6rem; font-weight: 500; letter-spacing: 0.24em; text-transform: uppercase; line-height: 1.6;
  color: rgb(var(--cream-50-rgb) / 0.7); padding-left: 16px; border-left: 1px solid rgb(var(--cream-50-rgb) / 0.28);
}
@media (max-width: 1180px) { .site-header__tag { display: none; } }

.main-nav { display: flex; align-items: center; gap: 4px; margin-left: auto; }
.main-nav > a, .main-nav .has-children > a {
  position: relative; text-decoration: none; color: rgb(var(--cream-50-rgb) / 0.88);
  font-size: 0.76rem; font-weight: 500; letter-spacing: 0.14em; text-transform: uppercase;
  padding: 10px 12px;
}
.main-nav > a::after, .main-nav .has-children > a::after {
  content: ""; position: absolute; left: 12px; right: 12px; bottom: 4px; height: 1px;
  background: var(--ocher); transform: scaleX(0); transform-origin: left; transition: transform .25s ease;
}
.main-nav > a:hover::after, .main-nav > a[aria-current="page"]::after,
.main-nav .has-children > a:hover::after, .main-nav .has-children > a[aria-current="page"]::after { transform: scaleX(1); }
.main-nav > a[aria-current="page"], .main-nav .has-children > a[aria-current="page"] { color: var(--ocher); }

.main-nav .has-children { position: relative; }
.main-nav .submenu {
  display: none; position: absolute; top: 100%; left: 0; min-width: 230px; padding: 8px;
  background: rgb(var(--header-rgb) / 0.97); border: 1px solid var(--line-dark);
  border-radius: var(--radius); box-shadow: 0 18px 40px -16px rgba(0,0,0,0.6);
}
.main-nav .has-children:hover .submenu,
.main-nav .has-children:focus-within .submenu { display: block; }
.main-nav .submenu a {
  display: block; padding: 10px 14px; border-radius: 10px; text-decoration: none;
  color: var(--cream-50); font-size: 0.9rem; letter-spacing: 0; text-transform: none;
}
.main-nav .submenu a:hover { background: rgb(var(--cream-50-rgb) / 0.07); color: var(--ocher); }

.lang-switch { display: flex; gap: 4px; margin-left: 10px; }
.lang-switch a {
  font-size: 0.7rem; font-weight: 600; letter-spacing: 0.1em; padding: 6px 9px; border-radius: 999px;
  text-decoration: none; color: rgb(var(--cream-50-rgb) / 0.7); border: 1px solid transparent;
}
.lang-switch a[aria-current="true"] { color: var(--cream-50); border-color: rgb(var(--cream-50-rgb) / 0.35); }

.header-cta {
  display: inline-flex; align-items: center; gap: 8px; flex: none;
  background: var(--terracotta); color: var(--cream-50); text-decoration: none;
  font-size: 0.86rem; font-weight: 500; padding: 11px 20px; border-radius: 999px;
  transition: background-color .2s ease;
}
.header-cta:hover { background: var(--terracotta-600); }
.header-cta svg { width: 16px; height: 16px; }

.nav-toggle { display: none; }
@media (max-width: 1024px) {
  .nav-toggle {
    display: block; margin-left: auto; background: none; border: 1px solid rgb(var(--cream-50-rgb) / 0.3);
    color: var(--cream-50); font-size: 1.2rem; line-height: 1; width: 44px; height: 44px; border-radius: 999px; cursor: pointer;
  }
  .header-cta { display: none; }
  .main-nav {
    display: none; position: absolute; top: 100%; left: 12px; right: 12px; margin: 0;
    background: rgb(var(--header-rgb) / 0.98); border-radius: var(--radius-lg); border: 1px solid var(--line-dark);
    flex-direction: column; align-items: stretch; padding: 14px; gap: 0;
  }
  .main-nav.is-open { display: flex; }
  .main-nav > a, .main-nav .has-children > a { padding: 13px 12px; }
  .main-nav > a::after, .main-nav .has-children > a::after { display: none; }
  .main-nav .has-children .submenu { display: block; position: static; box-shadow: none; border: none; background: rgb(var(--cream-50-rgb) / 0.04); margin: 2px 0 8px; }
  .lang-switch { margin: 12px 0 0 6px; }
}

/* ---------- Hero ---------- */
.hero {
  position: relative; isolation: isolate; color: var(--cream-50);
  min-height: 100svh; display: flex; align-items: center;
  padding: 140px 0 110px;
  background-color: var(--charcoal); background-size: cover; background-position: center;
}
.hero::before {
  content: ""; position: absolute; inset: 0; z-index: -1;
  background:
    linear-gradient(90deg, rgb(var(--charcoal-rgb) / 0.86) 0%, rgb(var(--charcoal-rgb) / 0.55) 48%, rgb(var(--charcoal-rgb) / 0.28) 100%),
    linear-gradient(180deg, rgb(var(--charcoal-rgb) / 0.45) 0%, rgb(var(--charcoal-rgb) / 0) 30%, rgb(var(--charcoal-rgb) / 0) 70%, rgb(var(--charcoal-rgb) / 0.55) 100%);
}
.hero::after {
  content: ""; position: absolute; inset: 0; z-index: -1; pointer-events: none;
  background-image: var(--grain); opacity: 0.06; mix-blend-mode: overlay;
}
.hero .container { width: 100%; }
.hero__content { position: relative; max-width: 780px; }
.hero__content h1 { color: var(--cream-50); margin-bottom: 0.32em; }
.hero__content p { color: rgb(var(--cream-50-rgb) / 0.82); font-size: 1.12rem; max-width: 52ch; }
.hero .eyebrow { color: var(--ocher); }
.hero__actions { display: flex; flex-wrap: wrap; gap: 14px; margin-top: 34px; }
/* Εσωτερικές σελίδες: μικρότερο hero, μικρότερος τίτλος */
.hero:not(.hero--home) { padding: 150px 0 72px; align-items: flex-end; }
.hero:not(.hero--home) h1 { font-size: clamp(2.5rem, 3.6vw + 1rem, 4.6rem); margin-bottom: 0.2em; }

/* Κυκλικό σήμα με κείμενο σε τροχιά — στατικό, χωρίς περιστροφή */
.hero-badge {
  position: absolute; right: clamp(24px, 5vw, 80px); bottom: clamp(32px, 6vh, 72px);
  width: 148px; height: 148px; color: var(--ocher);
}
.hero-badge svg { width: 100%; height: 100%; overflow: visible; }
.hero-badge text { font-family: var(--font-body); font-size: 8.4px; letter-spacing: 0.32em; text-transform: uppercase; fill: currentColor; }
.hero-badge__center {
  position: absolute; inset: 0; display: grid; place-items: center;
}
/* Το εμβλήμα του λογότυπου (φύλλα βελανιδιάς), λευκό όπως στην κεφαλίδα */
.hero-badge__center img { width: 52px; height: auto; filter: brightness(0) invert(1); }
/* Κάτω από ~1100px το σήμα πέφτει πάνω στα κουμπιά του hero */
@media (max-width: 1100px) { .hero-badge { display: none; } }

.scroll-cue {
  position: absolute; left: 50%; bottom: 26px; transform: translateX(-50%);
  display: flex; flex-direction: column; align-items: center; gap: 10px;
  font-size: 0.62rem; letter-spacing: 0.3em; text-transform: uppercase; color: rgb(var(--cream-50-rgb) / 0.6); text-decoration: none;
}
.scroll-cue::after { content: ""; width: 1px; height: 42px; background: linear-gradient(rgb(var(--cream-50-rgb) / 0.6), rgb(var(--cream-50-rgb) / 0)); }

/* ---------- Αρχική: ενότητα «αριθμός + κείμενο» ---------- */
.story { display: grid; grid-template-columns: minmax(0, 0.9fr) minmax(0, 1.4fr); gap: clamp(40px, 7vw, 110px); align-items: center; }
@media (max-width: 860px) { .story { grid-template-columns: 1fr; } }
.stat-big { display: flex; align-items: center; gap: 22px; }
.stat-big__num {
  font-family: var(--font-display); font-weight: var(--fw-h1, 500); line-height: 0.85; letter-spacing: -0.04em;
  font-size: clamp(6rem, 11vw, 10rem); color: var(--terracotta);
}
.stat-big__label { font-size: 0.72rem; font-weight: 500; letter-spacing: 0.3em; text-transform: uppercase; color: var(--charcoal); line-height: 1.7; }
.stat-rail {
  display: flex; align-items: center; gap: 14px; margin-top: 30px;
  font-family: var(--font-display); font-size: 1.15rem; color: var(--charcoal);
}
.stat-rail span.line { flex: 1; height: 1px; background: var(--charcoal); opacity: 0.35; }

/* ---------- Carousel καρτών (scroll-snap, κουμπιά με μικρό JS) ---------- */
.rail-head { display: flex; flex-wrap: wrap; align-items: flex-end; justify-content: space-between; gap: 24px; margin-bottom: 44px; }
.rail-head p { color: var(--muted); margin: 0; }
.rail-nav { display: flex; gap: 10px; flex: none; }
.rail-nav button {
  width: 48px; height: 48px; border-radius: 999px; cursor: pointer;
  border: 1px solid rgb(var(--charcoal-rgb) / 0.2); background: transparent; color: var(--charcoal);
  display: grid; place-items: center; transition: background-color .2s ease, color .2s ease;
}
.rail-nav button:hover { background: var(--charcoal); color: var(--cream-50); }
.rail-nav svg { width: 18px; height: 18px; }
.rail {
  display: grid; grid-auto-flow: column; grid-auto-columns: minmax(290px, calc((100% - 3 * 24px) / 3.35));
  gap: 24px; overflow-x: auto; scroll-snap-type: x mandatory; scroll-padding-left: 24px;
  padding: 4px 24px 30px; margin: 0 -24px; scrollbar-width: none;
}
.rail::-webkit-scrollbar { display: none; }
.rail > * { scroll-snap-align: start; }
/* Με έως 4 κάρτες, σε μεγάλη οθόνη χωράνε όλες ολόκληρες: καμία κομμένη
   κάρτα στην άκρη, και τα βέλη δεν χρειάζονται */
@media (min-width: 1100px) {
  .rail--fit { grid-auto-columns: calc((100% - 3 * 24px) / 4); overflow: visible; }
  .rail-nav--fit { display: none; }
}

/* Στήλη flex: το λευκό κουτί γεμίζει το ύψος, ώστε όλες οι κάρτες μιας
   σειράς να τελειώνουν στο ίδιο σημείο ανεξάρτητα από το μήκος κειμένου */
.feature-card { position: relative; text-decoration: none; color: inherit; display: flex; flex-direction: column; }
.feature-card__img { border-radius: var(--radius-lg); overflow: hidden; aspect-ratio: 4 / 5; background: var(--cream-200); }
.feature-card__img img { width: 100%; height: 100%; object-fit: cover; transition: transform .6s ease; }
.feature-card:hover .feature-card__img img { transform: scale(1.04); }
.feature-card__body {
  position: relative; flex: 1; margin: -76px 16px 0; padding: 22px 22px 20px;
  background: var(--white); border-radius: 18px; box-shadow: var(--shadow-md);
}
.feature-card__body h3 { font-size: 1.3rem; margin-bottom: 0.3em; }
.feature-card__body p { font-size: 0.9rem; color: var(--muted); margin: 0; }
.feature-card__tag {
  position: absolute; top: -13px; right: 18px;
  font-size: 0.62rem; font-weight: 600; letter-spacing: 0.14em; text-transform: uppercase;
  background: var(--terracotta); color: var(--cream-50); padding: 6px 11px; border-radius: 999px;
}

/* ---------- Κάρτες (υπάρχουσα κλάση, ανοιχτό θέμα) ---------- */
.card {
  background: var(--white); border-radius: var(--radius-lg); overflow: hidden;
  box-shadow: var(--shadow-sm); display: flex; flex-direction: column;
}
.card__img { position: relative; overflow: hidden; }
.card img { aspect-ratio: 4/3; object-fit: cover; width: 100%; display: block; transition: transform .6s ease; }
.card:hover img { transform: scale(1.04); }
.card__body { padding: 26px 26px 28px; flex: 1; display: flex; flex-direction: column; }
.card__body h3 { margin-bottom: 0.4em; }
.card__body p { font-size: 0.95rem; color: var(--muted); margin: 0 0 1.2em; }
.card__body .btn { margin-top: auto; align-self: flex-start; }

/* ---------- Κάρτες παροχών ---------- */
.services-grid { display: grid; grid-template-columns: repeat(4, 1fr); gap: 20px; }
@media (max-width: 980px) { .services-grid { grid-template-columns: repeat(2, 1fr); } }
@media (max-width: 560px) { .services-grid { grid-template-columns: 1fr; } }
.service-card {
  position: relative; background: var(--white); border-radius: 20px; padding: 32px 28px 30px;
  box-shadow: var(--shadow-sm);
}
.service-card__icon {
  width: 46px; height: 46px; border-radius: 12px; display: grid; place-items: center; margin-bottom: 26px;
  background: var(--terracotta-100); color: var(--terracotta);
}
.service-card__icon svg { width: 22px; height: 22px; }
.service-card h3 { font-size: 1.25rem; margin-bottom: 0.45em; }
.service-card p { font-size: 0.92rem; color: var(--muted); margin: 0; }
.service-card__num {
  position: absolute; top: 22px; right: 26px;
  font-family: var(--font-display); font-style: italic; font-size: 2.6rem; line-height: 1; color: rgb(var(--charcoal-rgb) / 0.08);
}
.section--dark .service-card { background: rgb(var(--cream-50-rgb) / 0.035); border: 1px solid var(--line-dark); box-shadow: none; }
.section--dark .service-card__icon { background: rgb(var(--ocher-rgb) / 0.12); color: var(--ocher); }
.section--dark .service-card h3 { color: var(--cream-50); }
.section--dark .service-card p { color: var(--muted-dark); }
.section--dark .service-card__num { color: rgb(var(--cream-50-rgb) / 0.09); }

/* ---------- Split: εικόνα με κάρτα-στατιστικό + λίστα χαρακτηριστικών ---------- */
.split { display: grid; grid-template-columns: 1fr 1.05fr; gap: clamp(40px, 6vw, 96px); align-items: center; }
@media (max-width: 900px) { .split { grid-template-columns: 1fr; } }
.split__media { position: relative; }
.split__media img { width: 100%; aspect-ratio: 4 / 5; object-fit: cover; border-radius: var(--radius-lg); }
.stat-card {
  position: absolute; right: -22px; bottom: 34px;
  background: var(--terracotta); color: var(--cream-50); border-radius: 20px;
  padding: 22px 28px; box-shadow: var(--shadow-md);
}
.stat-card strong { display: block; font-family: var(--font-display); font-weight: var(--fw-h1, 500); font-size: 3rem; line-height: 1; }
.stat-card span { font-size: 0.66rem; letter-spacing: 0.24em; text-transform: uppercase; opacity: 0.85; }
@media (max-width: 900px) {
  .stat-card { right: 16px; }
  .split__media img { aspect-ratio: 4 / 3; }   /* σε μία στήλη το 4:5 γινόταν ~900px ψηλό */
}
.feature-list { list-style: none; padding: 0; margin: 30px 0 36px; display: grid; grid-template-columns: 1fr 1fr; gap: 16px 28px; }
@media (max-width: 560px) { .feature-list { grid-template-columns: 1fr; } }
.feature-list li { display: flex; gap: 12px; align-items: flex-start; font-size: 0.93rem; line-height: 1.45; }
.feature-list svg { width: 18px; height: 18px; flex: none; color: var(--terracotta); margin-top: 2px; }
.feature-list small { display: block; color: var(--muted); font-size: 0.82rem; }
.btn-row { display: flex; flex-wrap: wrap; gap: 12px; }

/* ---------- Offset πλαίσιο εικόνας ---------- */
.img-frame { position: relative; }
.img-frame::before {
  content: ""; position: absolute; z-index: 0; left: -20px; bottom: -20px; width: 100%; height: 100%;
  border-radius: var(--radius-lg); background: var(--terracotta-100);
}
.img-frame img { position: relative; z-index: 1; display: block; width: 100%; border-radius: var(--radius-lg); }

.testimonial { background: var(--charcoal); color: var(--cream-50); border-radius: var(--radius-lg); padding: 40px; }
.testimonial p { font-family: var(--font-display); font-size: 1.4rem; font-style: italic; max-width: none; }

/* ---------- Motto band — σκούρα φωτογραφική ζώνη ---------- */
.motto-band {
  position: relative; color: var(--cream-50); isolation: isolate;
  background: linear-gradient(180deg, rgb(var(--charcoal-rgb) / 0.82), rgb(var(--charcoal-rgb) / 0.9)), var(--charcoal) center/cover no-repeat;
  padding: clamp(90px, 10vw, 140px) 24px; text-align: center;
}
.motto-band__rule { width: 44px; height: 1px; background: var(--ocher); margin: 0 auto 30px; }
.motto-band p {
  font-family: var(--font-display); font-style: italic; font-weight: var(--fw-em, 500);
  font-size: clamp(1.8rem, 2.4vw + 1rem, 3rem); line-height: 1.2; letter-spacing: -0.01em;
  max-width: 22ch; margin: 0 auto; color: var(--cream-50); text-wrap: balance;
}

.theme-band { position: relative; color: var(--cream-50); min-height: 46vh; display: flex; align-items: center; justify-content: center; padding: 72px 24px; text-align: center; background: var(--charcoal); }

/* ---------- Intro band ---------- */
.intro-band { padding: clamp(80px, 9vw, 120px) 24px; text-align: center; }
.intro-band__inner { max-width: 72ch; margin: 0 auto; }
.intro-band__rule { width: 44px; height: 1px; background: var(--ocher); margin: 0 auto 28px; }
.intro-band h2 { margin-bottom: 0.6em; }
.intro-band p { color: var(--muted-dark); font-size: 1.05rem; line-height: 1.85; margin: 0 auto; }

/* ---------- Σελίδες προορισμών ---------- */
.area-layout { display: grid; grid-template-columns: minmax(0, 1fr) 360px; gap: clamp(40px, 5vw, 72px); align-items: start; }
@media (max-width: 980px) { .area-layout { grid-template-columns: 1fr; } }
.area-side { display: grid; gap: 22px; align-content: start; position: sticky; top: 100px; }
@media (max-width: 980px) { .area-side { position: static; } }
.area-lead {
  display: flex; gap: 20px; align-items: flex-start;
  margin-bottom: 38px; padding-bottom: 34px; border-bottom: 1px solid var(--line);
}
.area-lead__icon {
  flex: 0 0 52px; width: 52px; height: 52px; border-radius: 14px; display: grid; place-items: center;
  background: var(--terracotta-100); color: var(--terracotta);
}
.area-lead__icon svg { width: 26px; height: 26px; display: block; }
.area-lead__text {
  font-family: var(--font-display); font-style: italic; font-weight: var(--fw-em, 500);
  font-size: clamp(1.45rem, 1vw + 1.1rem, 2rem); line-height: 1.28; letter-spacing: -0.01em;
  color: var(--charcoal); text-wrap: balance; margin: 0;
}
.area-quicknav { background: var(--white); border-radius: 20px; padding: 26px 24px; box-shadow: var(--shadow-sm); }
.area-quicknav__title, .info-box__title {
  font-size: 0.68rem; font-weight: 600; letter-spacing: 0.24em; text-transform: uppercase;
  color: var(--terracotta); margin-bottom: 14px;
}
.area-quicknav ul { list-style: none; padding: 0; margin: 0; }
.area-quicknav a {
  display: flex; align-items: center; justify-content: space-between; gap: 10px;
  text-decoration: none; color: var(--charcoal); font-size: 0.95rem;
  padding: 12px 2px; border-bottom: 1px solid var(--line);
  transition: color .2s ease, padding-left .2s ease;
}
.area-quicknav li:last-child a { border-bottom: none; }
.area-quicknav a span.arrow { color: var(--terracotta); opacity: 0.35; transition: opacity .2s ease, transform .2s ease; }
.area-quicknav a:hover { color: var(--terracotta); padding-left: 6px; }
.area-quicknav a:hover span.arrow { opacity: 1; transform: translateX(2px); }

.info-box { background: var(--cream-50); border: 1px solid var(--line); border-radius: 20px; padding: 28px 26px 24px; margin-top: 44px; }
.info-list { display: grid; gap: 18px; }
@media (min-width: 620px) { .info-list { grid-template-columns: 1fr 1fr; gap: 18px 28px; } }
.area-side .info-box { margin-top: 0; }
.area-side .info-list { grid-template-columns: 1fr; gap: 16px; }
.info-list__item { display: flex; gap: 13px; align-items: flex-start; }
.info-list__icon { flex: 0 0 20px; width: 20px; height: 20px; color: var(--terracotta); margin-top: 2px; }
.info-list__icon svg { width: 100%; height: 100%; display: block; }
.info-list__text { font-size: 0.9rem; line-height: 1.5; color: var(--muted); }
.info-list__text strong { display: block; font-weight: 600; color: var(--charcoal); font-size: 0.84rem; margin-bottom: 2px; }
.info-list__text a { color: var(--charcoal); text-decoration: underline; text-underline-offset: 2px; }
.info-list__text a:hover { color: var(--terracotta); }
.info-box__note { margin-top: 22px; padding-top: 16px; border-top: 1px solid var(--line); font-size: 0.8rem; line-height: 1.55; color: var(--muted); }

/* ---------- Gallery + lightbox ---------- */
.gallery { display: grid; grid-template-columns: repeat(4, 1fr); gap: 14px; }
@media (max-width: 860px) { .gallery { grid-template-columns: repeat(2, 1fr); } }
.gallery a { display: block; border-radius: 16px; overflow: hidden; background: var(--cream-200); }
.gallery img { aspect-ratio: 1/1; object-fit: cover; width: 100%; transition: transform .5s ease; }
.gallery a:hover img { transform: scale(1.05); }

/* Editorial gallery: κελί κοντά στη φυσική αναλογία κάθε φωτογραφίας (βλ. v1).
   Ρητό ύψος σειράς — με dense packing σειρές μόνο με διπλά κελιά κατέρρεαν. */
.gallery--editorial, .gallery--duo { grid-auto-flow: dense; gap: 16px; }
.gallery--editorial a, .gallery--duo a { height: 100%; }
.gallery--editorial img, .gallery--duo img { aspect-ratio: auto; height: 100%; }
.gallery--editorial .is-tall, .gallery--duo .is-tall { grid-row: span 2; }
.gallery--editorial .is-feature { grid-column: span 2; grid-row: span 2; }
.gallery--editorial { grid-auto-rows: calc((min(1200px, 100vw) - 96px) / 6); }
@media (max-width: 1080px) and (min-width: 861px) {
  .gallery--editorial { grid-template-columns: repeat(3, 1fr); grid-auto-rows: calc((100vw - 80px) / 4.5); }
}
@media (max-width: 860px) { .gallery--editorial { grid-auto-rows: calc((100vw - 64px) / 3); } }
@media (max-width: 620px) { .gallery--editorial { gap: 10px; grid-auto-rows: calc((100vw - 58px) / 3); } }
.gallery--duo { grid-template-columns: repeat(2, 1fr); grid-auto-rows: calc((min(1200px, 100vw) - 64px) / 3); }
@media (max-width: 620px) { .gallery--duo { gap: 10px; grid-auto-rows: calc((100vw - 58px) / 3); } }

.lightbox {
  display: none; position: fixed; inset: 0; z-index: 100;
  background: rgb(var(--charcoal-rgb) / 0.96); align-items: center; justify-content: center;
}
.lightbox.is-open { display: flex; }
.lightbox__img { max-width: 88vw; max-height: 84vh; border-radius: 12px; }
.lightbox__close, .lightbox__prev, .lightbox__next {
  position: absolute; width: 52px; height: 52px; border-radius: 999px; cursor: pointer;
  background: rgb(var(--cream-50-rgb) / 0.08); border: 1px solid rgb(var(--cream-50-rgb) / 0.2); color: var(--cream-50);
  font-size: 1.6rem; line-height: 1;
}
.lightbox__close { top: 20px; right: 20px; }
.lightbox__prev { left: 20px; top: 50%; transform: translateY(-50%); }
.lightbox__next { right: 20px; top: 50%; transform: translateY(-50%); }

/* ---------- Φόρμες ---------- */
.form-field { margin-bottom: 18px; }
.form-field label { display: block; font-weight: 500; margin-bottom: 7px; font-size: 0.88rem; }
.form-field input, .form-field textarea, .form-field select {
  width: 100%; padding: 14px 16px; border: 1px solid rgb(var(--charcoal-rgb) / 0.16); border-radius: 12px;
  font-family: var(--font-body); font-size: 1rem; background: var(--white); color: var(--charcoal);
  transition: border-color .2s ease, box-shadow .2s ease;
}
.form-field input:focus, .form-field textarea:focus {
  outline: none; border-color: var(--terracotta); box-shadow: 0 0 0 4px rgb(var(--terracotta-rgb) / 0.14);
}
.form-field--checkbox { display: flex; align-items: center; gap: 10px; }
.form-field--checkbox input { width: auto; }
.form-field--honeypot { position: absolute; left: -9999px; top: -9999px; }
.form-status { margin-top: 14px; font-weight: 500; }
.form-status--ok { color: #3F7A4B; }
.form-status--error { color: #A33A26; }

/* ---------- Footer ---------- */
.site-footer { color: rgb(var(--cream-50-rgb) / 0.72); padding: 0 0 30px; }
.site-footer a { color: rgb(var(--cream-50-rgb) / 0.72); text-decoration: none; transition: color .2s ease; }
.site-footer a:hover { color: var(--ocher); }
.footer-cta {
  display: flex; align-items: center; justify-content: space-between; gap: 32px; flex-wrap: wrap;
  padding: clamp(64px, 7vw, 96px) 0 clamp(56px, 6vw, 80px); border-bottom: 1px solid var(--line-dark); margin-bottom: 64px;
}
.footer-cta h2 { margin: 0; font-size: clamp(1.9rem, 2.4vw + 1rem, 3rem); max-width: 17ch; }
.footer-cta .btn-row { max-width: 440px; }
.site-footer h4 {
  font-family: var(--font-body); font-size: 0.68rem; font-weight: 600; letter-spacing: 0.24em; text-transform: uppercase;
  color: var(--ocher); margin-bottom: 1.4em;
}
.footer-grid { display: grid; grid-template-columns: 1.5fr 1fr 1fr; gap: 48px; }
@media (max-width: 760px) { .footer-grid { grid-template-columns: 1fr; gap: 36px; } }
.footer-grid ul { list-style: none; margin: 0; padding: 0; }
.footer-grid li { margin-bottom: 0.7em; font-size: 0.92rem; }
.footer-grid p { font-size: 0.92rem; }
.footer-brand img { height: 42px; width: auto; filter: brightness(0) invert(1); margin-bottom: 18px; }
.footer-brand__meta { font-size: 0.76rem; color: rgb(var(--cream-50-rgb) / 0.45); margin-top: 18px; }
.footer-bottom {
  margin-top: 56px; padding-top: 24px; border-top: 1px solid var(--line-dark);
  display: flex; justify-content: space-between; flex-wrap: wrap; gap: 12px;
  font-size: 0.8rem; color: rgb(var(--cream-50-rgb) / 0.5);
}

/* ---------- Cookie banner ---------- */
.cookie-banner {
  position: fixed; left: 16px; right: 16px; bottom: 16px; z-index: 90; max-width: 580px; margin: 0 auto;
  background: var(--charcoal); color: var(--cream-50); border-radius: 18px; padding: 18px 20px;
  box-shadow: 0 24px 48px -16px rgba(0,0,0,0.5);
  display: flex; align-items: center; justify-content: space-between; gap: 16px; flex-wrap: wrap;
}
.cookie-banner p { margin: 0; font-size: 0.88rem; max-width: none; }
.cookie-banner a { text-decoration: underline; }
.cookie-banner__actions { display: flex; gap: 8px; flex-shrink: 0; }
.cookie-banner__actions button {
  border: 1px solid rgb(var(--cream-50-rgb) / 0.3); background: transparent; color: var(--cream-50);
  padding: 9px 16px; border-radius: 999px; font-size: 0.84rem; cursor: pointer; font-family: var(--font-body);
}
.cookie-banner__actions button.is-primary { background: var(--terracotta); border-color: var(--terracotta); font-weight: 500; }

/* ---------- Utilities ---------- */
.text-center { text-align: center; }
.text-center p { margin-left: auto; margin-right: auto; }
.mt-0 { margin-top: 0; }
@media (prefers-reduced-motion: reduce) {
  html { scroll-behavior: auto; }
  *, *::before, *::after { transition: none !important; }
}

/* ============================================================
   ΧΡΩΜΑΤΙΚΑ PRESETS — preset6 είναι η βασική παλέτα του :root.
   Ανενεργός μηχανισμός: ενεργοποιείται βάζοντας ξανά το preset.js στο <head>
   (<html data-preset="N">). Κρατιέται ως υλικό για το site-kit.
   ============================================================ */
/* preset1 — Τερακότα (η αρχική παλέτα) */
:root[data-preset="1"] {
  --charcoal: #1F1B18; --earth: #3A2F28; --cream: #F7F1E8; --cream-50: #FDFBF7; --cream-100: #FBF8F3; --cream-200: #F2E9DC; --terracotta: #B85C38; --terracotta-600: #9C4A2B; --terracotta-100: #F5DDD1; --ocher: #D6A657; --brass: #B08D57; --muted: #6E6259; --charcoal-rgb: 31 27 24; --cream-50-rgb: 253 251 247; --header-rgb: 46 39 34; --ocher-rgb: 214 166 87; --terracotta-rgb: 184 92 56;
}
/* preset2 — Ελιά & Λινό */
:root[data-preset="2"] {
  --charcoal: #1E211C; --earth: #343A2E;
  --cream: #F4F1E8; --cream-50: #FBFAF5; --cream-100: #F7F5EE; --cream-200: #E8E6D6;
  --terracotta: #6B7A45; --terracotta-600: #55623A; --terracotta-100: #E3E7D2;
  --ocher: #C9A85C; --brass: #A89060; --muted: #5F6356;
  --charcoal-rgb: 30 33 28; --cream-50-rgb: 251 250 245; --header-rgb: 38 43 35;
  --ocher-rgb: 201 168 92; --terracotta-rgb: 107 122 69;
}
/* preset3 — Ξινόμαυρο */
:root[data-preset="3"] {
  --charcoal: #231A1C; --earth: #3B2A2D;
  --cream: #F6EFEA; --cream-50: #FCF9F6; --cream-100: #F9F4F0; --cream-200: #EEDFD8;
  --terracotta: #7E2E3A; --terracotta-600: #662330; --terracotta-100: #F0D9DC;
  --ocher: #D8A868; --brass: #B08A62; --muted: #6D5E60;
  --charcoal-rgb: 35 26 28; --cream-50-rgb: 252 249 246; --header-rgb: 50 36 40;
  --ocher-rgb: 216 168 104; --terracotta-rgb: 126 46 58;
}
/* preset4 — Δάσος Βερμίου */
:root[data-preset="4"] {
  --charcoal: #16211D; --earth: #24362F;
  --cream: #F3EFE6; --cream-50: #FAF8F3; --cream-100: #F6F3EC; --cream-200: #E6E0D2;
  --terracotta: #A8622F; --terracotta-600: #8B4F24; --terracotta-100: #F2DFCF;
  --ocher: #D9B26B; --brass: #B39462; --muted: #5E655F;
  --charcoal-rgb: 22 33 29; --cream-50-rgb: 250 248 243; --header-rgb: 30 45 39;
  --ocher-rgb: 217 178 107; --terracotta-rgb: 168 98 47;
}
/* preset5 — Μέλι & Καρύδι */
:root[data-preset="5"] {
  --charcoal: #2A2018; --earth: #4A3726;
  --cream: #F8F0E3; --cream-50: #FDF9F2; --cream-100: #FAF5EC; --cream-200: #F0E2CB;
  --terracotta: #B5741F; --terracotta-600: #935C16; --terracotta-100: #F6E4C6;
  --ocher: #E2B866; --brass: #B8925A; --muted: #6F6150;
  --charcoal-rgb: 42 32 24; --cream-50-rgb: 253 249 242; --header-rgb: 58 44 32;
  --ocher-rgb: 226 184 102; --terracotta-rgb: 181 116 31;
}
/* preset6 — Φθινοπωρινό τριαντάφυλλο */
:root[data-preset="6"] {
  --charcoal: #26201E; --earth: #43342F;
  --cream: #F7EFEA; --cream-50: #FDFAF7; --cream-100: #FAF5F1; --cream-200: #EFDFD6;
  --terracotta: #A65A4A; --terracotta-600: #884637; --terracotta-100: #F2DAD3;
  --ocher: #D4A373; --brass: #B58C6A; --muted: #6F605A;
  --charcoal-rgb: 38 32 30; --cream-50-rgb: 253 250 247; --header-rgb: 55 44 40;
  --ocher-rgb: 212 163 115; --terracotta-rgb: 166 90 74;
}

/* Μικρός επιλογέας preset για τις δοκιμές (εμφανίζεται μόνο αφού ανοίξει
   μία φορά σελίδα με ?preset=N) — ουδέτερα χρώματα, ανεξάρτητα από την παλέτα */
.preset-tool {
  position: fixed; left: 16px; bottom: 16px; z-index: 200;
  display: flex; flex-direction: column; align-items: stretch; gap: 4px; padding: 6px 8px 6px 14px; border-radius: 22px !important;
  background: rgba(20,20,20,0.88); color: #fff; border-radius: 999px;
  font: 500 12px/1 var(--font-body); box-shadow: 0 8px 24px rgba(0,0,0,0.3);
}
.preset-tool button {
  width: 28px; height: 28px; border-radius: 999px; border: 1px solid rgba(255,255,255,0.25);
  background: transparent; color: #fff; font: inherit; cursor: pointer;
}
.preset-tool button[aria-pressed="true"] { background: #fff; color: #111; }
.preset-tool__row { display: flex; align-items: center; gap: 6px; }
.preset-tool__name { margin-right: 6px; opacity: 0.85; white-space: nowrap; min-width: 210px; }

/* ---------- Blog ---------- */
/* Σελίδα blog: 2 στήλες. Στην Αρχική (3 άρθρα) η παραλλαγή --three. */
.blog-grid { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 56px 44px; }
.blog-grid--three { grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 28px; }
.blog-grid .feature-card__img { aspect-ratio: 3 / 2; }
.blog-grid--three .feature-card__img { aspect-ratio: 4 / 3; }
.blog-grid .feature-card__body h3 { font-size: 1.35rem; line-height: 1.25; }
.blog-grid--three .feature-card__body h3 { font-size: 1.2rem; }
@media (max-width: 960px) { .blog-grid--three { grid-template-columns: 1fr; max-width: 560px; margin: 0 auto; } }
@media (max-width: 720px) { .blog-grid { grid-template-columns: 1fr; max-width: 560px; margin: 0 auto; } }

.article { max-width: 760px; }
.article-meta { font-size: 0.78rem; font-weight: 600; letter-spacing: 0.14em; text-transform: uppercase; color: var(--terracotta); margin: 0 0 18px; }
.article-meta a { text-decoration: none; }
.article-meta a:hover { text-decoration: underline; }
.article-lead { font-family: var(--font-display); font-style: italic; font-weight: 500; font-size: clamp(1.3rem, 0.8vw + 1.05rem, 1.6rem); line-height: 1.4; color: var(--charcoal); margin: 0 0 1.2em; text-wrap: pretty; }
.article h2 { font-size: clamp(1.45rem, 1vw + 1.1rem, 1.9rem); margin: 1.6em 0 0.5em; }
.article p { max-width: 68ch; }
.article p a { color: var(--terracotta-600); }

.article-facts { background: var(--cream-50); border: 1px solid var(--line); border-radius: 20px; padding: 24px 26px; margin: 40px 0 0; }
.article-facts__title { font-size: 0.72rem; font-weight: 600; letter-spacing: 0.2em; text-transform: uppercase; color: var(--terracotta); margin: 0 0 12px; }
.article-facts dl { margin: 0; display: grid; gap: 12px; }
.article-facts dl > div { display: grid; grid-template-columns: 170px minmax(0, 1fr); gap: 16px; padding-top: 12px; border-top: 1px solid var(--line); }
.article-facts dl > div:first-child { border-top: none; padding-top: 0; }
.article-facts dt { font-family: var(--font-display); font-weight: 600; }
.article-facts dd { margin: 0; color: var(--muted); }
.article-facts dd a { color: var(--terracotta-600); }
@media (max-width: 560px) { .article-facts dl > div { grid-template-columns: 1fr; gap: 2px; } }

.article-cta { margin: 40px 0 0; padding: 28px 0 0; border-top: 1px solid var(--line); }
.article-more { margin-top: 40px; }
.article-more ul { margin: 0; padding: 0; list-style: none; display: grid; gap: 8px; }
.article-more a { font-family: var(--font-display); font-weight: 600; font-size: 1.1rem; color: var(--charcoal); text-decoration: none; }
.article-more a:hover { color: var(--terracotta); }

/* ---------- Βελάκι «στην κορυφή» (δημιουργείται από το site-header.js) ---------- */
.to-top {
  position: fixed; right: 20px; bottom: calc(20px + env(safe-area-inset-bottom, 0px)); z-index: 150;
  width: 48px; height: 48px; border-radius: 999px; display: grid; place-items: center;
  background: var(--terracotta); color: var(--cream-50); text-decoration: none;
  border: 1px solid rgb(var(--cream-50-rgb) / 0.22); box-shadow: var(--shadow-md);
  opacity: 0; visibility: hidden; transform: translateY(10px);
  transition: opacity .25s ease, transform .25s ease, visibility .25s, background-color .2s ease;
}
.to-top.is-visible { opacity: 1; visibility: visible; transform: none; }
.to-top:hover { background: var(--terracotta-600); }
.to-top svg { width: 20px; height: 20px; }
@media (prefers-reduced-motion: reduce) { .to-top { transition: none; } }

/* intro-band με διακόσμηση: περίγραμμα βουνών με έλατα (διανυσματικό, καθαρό σε
   κάθε μέγεθος) στο κάτω μέρος, φύλλο βελανιδιάς ως διαχωριστικό, italic εισαγωγή */
.intro-band--deco { position: relative; overflow: hidden; isolation: isolate; padding-top: clamp(48px, 4vw, 64px); padding-bottom: clamp(80px, 7vw, 104px); }
.intro-band--deco::after {
  content: ""; position: absolute; z-index: -1; left: 0; right: 0; bottom: 0;
  height: 70%;
  background: url("data:image/svg+xml;utf8,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 1440 320' preserveAspectRatio='none' fill='none' stroke='%23FDFBF7' stroke-width='1.1' stroke-linecap='round'%3E%3Cpath d='M0 60.0 L24 69.1 L48 77.8 L72 85.5 L96 92.0 L120 97.0 L144 100.3 L168 101.9 L192 101.8 L216 100.2 L240 97.3 L264 93.5 L288 89.3 L312 84.8 L336 80.7 L360 77.0 L384 74.2 L408 72.3 L432 71.4 L456 71.4 L480 72.2 L504 73.5 L528 74.9 L552 76.3 L576 77.1 L600 77.2 L624 76.1 L648 73.8 L672 70.2 L696 65.3 L720 59.1 L744 52.1 L768 44.4 L792 36.5 L816 28.9 L840 21.9 L864 16.1 L888 11.6 L912 8.9 L936 8.0 L960 9.1 L984 12.0 L1008 16.5 L1032 22.5 L1056 29.4 L1080 37.0 L1104 44.7 L1128 52.1 L1152 58.8 L1176 64.6 L1200 69.2 L1224 72.5 L1248 74.5 L1272 75.3 L1296 75.1 L1320 74.2 L1344 72.9 L1368 71.5 L1392 70.5 L1416 70.0 L1440 70.4' opacity='0.44'/%3E%3Cpath d='M0 113.5 L24 121.5 L48 128.2 L72 133.3 L96 136.6 L120 138.1 L144 137.8 L168 135.9 L192 132.8 L216 128.7 L240 124.0 L264 119.2 L288 114.5 L312 110.4 L336 107.1 L360 104.6 L384 103.1 L408 102.5 L432 102.6 L456 103.2 L480 104.0 L504 104.6 L528 104.7 L552 103.9 L576 102.2 L600 99.2 L624 94.9 L648 89.4 L672 82.9 L696 75.5 L720 67.6 L744 59.6 L768 52.0 L792 45.3 L816 39.7 L840 35.7 L864 33.5 L888 33.2 L912 34.9 L936 38.6 L960 43.9 L984 50.6 L1008 58.3 L1032 66.6 L1056 75.0 L1080 83.1 L1104 90.5 L1128 96.9 L1152 102.1 L1176 105.9 L1200 108.3 L1224 109.6 L1248 109.8 L1272 109.2 L1296 108.3 L1320 107.2 L1344 106.4 L1368 106.1 L1392 106.6 L1416 107.9 L1440 110.2' opacity='0.63'/%3E%3Cpath d='M0 165.1 L24 170.1 L48 173.2 L72 174.5 L96 173.9 L120 171.6 L144 168.1 L168 163.5 L192 158.3 L216 152.9 L240 147.8 L264 143.1 L288 139.1 L312 136.0 L336 133.9 L360 132.6 L384 132.0 L408 131.8 L432 131.8 L456 131.7 L480 131.0 L504 129.6 L528 127.2 L552 123.6 L576 118.8 L600 112.8 L624 105.9 L648 98.3 L672 90.3 L696 82.4 L720 75.1 L744 68.6 L768 63.5 L792 60.0 L816 58.5 L840 59.0 L864 61.5 L888 66.0 L912 72.2 L936 79.7 L960 88.3 L984 97.4 L1008 106.5 L1032 115.4 L1056 123.4 L1080 130.4 L1104 136.1 L1128 140.3 L1152 143.2 L1176 144.8 L1200 145.4 L1224 145.1 L1248 144.3 L1272 143.4 L1296 142.7 L1320 142.5 L1344 142.9 L1368 144.2 L1392 146.2 L1416 149.0 L1440 152.4' opacity='0.81'/%3E%3Cpath d='M0 210.1 L24 210.9 L48 209.9 L72 207.1 L96 203.0 L120 197.8 L144 192.0 L168 186.0 L192 180.1 L216 174.7 L240 170.1 L264 166.3 L288 163.4 L312 161.4 L336 160.1 L360 159.2 L384 158.5 L408 157.6 L432 156.3 L456 154.2 L480 151.2 L504 147.1 L528 141.9 L552 135.6 L576 128.5 L600 120.8 L624 112.9 L648 105.2 L672 98.1 L696 92.1 L720 87.6 L744 84.9 L768 84.1 L792 85.5 L816 88.9 L840 94.4 L864 101.5 L888 110.0 L912 119.4 L936 129.3 L960 139.3 L984 148.8 L1008 157.4 L1032 165.0 L1056 171.1 L1080 175.8 L1104 179.1 L1128 181.0 L1152 181.7 L1176 181.6 L1200 180.9 L1224 180.1 L1248 179.3 L1272 179.0 L1296 179.3 L1320 180.2 L1344 181.9 L1368 184.3 L1392 187.1 L1416 190.1 L1440 192.9' opacity='1.00'/%3E%3Cpath d='M0 245.6 L24 242.2 L48 237.4 L72 231.5 L96 224.9 L120 218.1 L144 211.5 L168 205.4 L192 200.0 L216 195.4 L240 191.8 L264 189.0 L288 187.0 L312 185.4 L336 184.0 L360 182.5 L384 180.5 L408 177.9 L432 174.4 L456 169.8 L480 164.3 L504 157.8 L528 150.7 L552 143.0 L576 135.3 L600 128.0 L624 121.5 L648 116.1 L672 112.3 L696 110.4 L720 110.6 L744 112.9 L768 117.4 L792 123.8 L816 131.9 L840 141.4 L864 151.7 L888 162.5 L912 173.2 L936 183.4 L960 192.7 L984 200.7 L1008 207.3 L1032 212.3 L1056 215.8 L1080 217.8 L1104 218.7 L1128 218.6 L1152 217.9 L1176 216.9 L1200 216.0 L1224 215.4 L1248 215.4 L1272 215.9 L1296 217.1 L1320 218.9 L1344 221.1 L1368 223.3 L1392 225.3 L1416 226.7 L1440 227.3' opacity='0.81'/%3E%3Cpath d='M0 271.0 L24 264.3 L48 256.9 L72 249.2 L96 241.8 L120 234.8 L144 228.6 L168 223.3 L192 218.9 L216 215.4 L240 212.7 L264 210.4 L288 208.4 L312 206.3 L336 203.8 L360 200.7 L384 196.8 L408 192.0 L432 186.3 L456 179.8 L480 172.7 L504 165.3 L528 158.0 L552 151.1 L576 145.2 L600 140.6 L624 137.7 L648 136.8 L672 138.0 L696 141.4 L720 146.9 L744 154.4 L768 163.6 L792 174.1 L816 185.3 L840 196.9 L864 208.4 L888 219.2 L912 229.0 L936 237.4 L960 244.3 L984 249.6 L1008 253.2 L1032 255.3 L1056 256.1 L1080 255.9 L1104 255.0 L1128 253.8 L1152 252.6 L1176 251.6 L1200 251.0 L1224 251.1 L1248 251.7 L1272 252.7 L1296 254.1 L1320 255.5 L1344 256.6 L1368 257.1 L1392 256.6 L1416 254.8 L1440 251.6' opacity='0.63'/%3E%3Cpath d='M0 287.8 L24 279.2 L48 270.9 L72 263.0 L96 256.0 L120 249.9 L144 244.8 L168 240.6 L192 237.1 L216 234.3 L240 231.7 L264 229.1 L288 226.2 L312 222.8 L336 218.6 L360 213.7 L384 207.9 L408 201.5 L432 194.7 L456 187.7 L480 180.9 L504 174.7 L528 169.6 L552 165.9 L576 164.0 L600 164.1 L624 166.5 L648 171.0 L672 177.7 L696 186.4 L720 196.6 L744 208.0 L768 220.2 L792 232.6 L816 244.7 L840 256.1 L864 266.4 L888 275.1 L912 282.2 L936 287.6 L960 291.2 L984 293.2 L1008 293.8 L1032 293.3 L1056 292.1 L1080 290.5 L1104 288.8 L1128 287.3 L1152 286.1 L1176 285.5 L1200 285.4 L1224 285.6 L1248 286.1 L1272 286.5 L1296 286.7 L1320 286.1 L1344 284.6 L1368 281.8 L1392 277.5 L1416 271.7 L1440 264.2' opacity='0.44'/%3E%3C/svg%3E") center bottom / 100% 100% no-repeat;
  opacity: 0.17; pointer-events: none;
}
/* Εναλλακτικό γραφικό: βουνά με έλατα (class intro-band--mountains μαζί με --deco) */
.intro-band--mountains::after {
  content: ""; position: absolute; z-index: -1; left: 0; right: 0; bottom: 0;
  height: clamp(140px, 22vw, 260px);
  background: url("data:image/svg+xml;utf8,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 1200 260' fill='none' stroke='%23FDFBF7' stroke-width='1.4' stroke-linejoin='round' stroke-linecap='round'%3E%3Cpath d='M0 150 C80 120 140 70 210 78 C270 85 300 130 360 118 C430 104 470 40 545 36 C610 33 650 92 720 100 C790 108 830 60 905 58 C980 56 1030 110 1100 112 C1140 113 1175 100 1200 92' opacity='.55'/%3E%3Cpath d='M0 190 C70 172 120 140 190 146 C260 152 300 182 380 170 C460 158 500 118 580 116 C650 114 700 160 780 166 C860 172 900 140 980 136 C1060 132 1120 168 1200 160' opacity='.8'/%3E%3Cpath d='M0 232 C120 220 220 206 330 214 C440 222 520 240 640 232 C760 224 860 204 980 210 C1080 215 1150 228 1200 226'/%3E%3Cpath d='M70 170 L57.0 204.1 L63.5 204.1 L53.9 232.0 L86.1 232.0 L76.5 204.1 L83.0 204.1 Z'/%3E%3Cpath d='M70 232 V239.4'/%3E%3Cpath d='M112 182 L102.8 206.2 L107.4 206.2 L100.5 226.0 L123.5 226.0 L116.6 206.2 L121.2 206.2 Z'/%3E%3Cpath d='M112 226 V231.3'/%3E%3Cpath d='M150 195 L142.9 213.7 L146.4 213.7 L141.1 229.0 L158.9 229.0 L153.6 213.7 L157.1 213.7 Z'/%3E%3Cpath d='M150 229 V233.1'/%3E%3Cpath d='M1040 162 L1029.1 190.6 L1034.5 190.6 L1026.5 214.0 L1053.5 214.0 L1045.5 190.6 L1050.9 190.6 Z'/%3E%3Cpath d='M1040 214 V220.2'/%3E%3Cpath d='M1085 149 L1070.3 187.5 L1077.7 187.5 L1066.8 219.0 L1103.2 219.0 L1092.3 187.5 L1099.7 187.5 Z'/%3E%3Cpath d='M1085 219 V227.4'/%3E%3Cpath d='M1130 184 L1121.6 206.0 L1125.8 206.0 L1119.6 224.0 L1140.4 224.0 L1134.2 206.0 L1138.4 206.0 Z'/%3E%3Cpath d='M1130 224 V228.8'/%3E%3Cpath d='M520 44 l10 -8 l10 8 M560 30 l7 -6 l7 6' opacity='.6'/%3E%3C/svg%3E") center bottom / cover no-repeat;
  opacity: 0.24; pointer-events: none;
}
.intro-band--deco .eyebrow { justify-content: center; }
.intro-band--deco h2 { margin-bottom: 0.35em; }
.intro-band--deco .divider { color: var(--ocher); margin: 0 auto 20px; }
.intro-band__lead {
  font-family: var(--font-display); font-style: italic; font-weight: var(--fw-em, 500);
  font-size: clamp(1.3rem, 0.6vw + 1.05rem, 1.55rem); line-height: 1.4;
  color: var(--cream-50) !important; max-width: 36ch; margin: 0 auto 14px !important; text-wrap: balance;
}

/* Σελίδα «Το ξενοδοχείο»: εισαγωγή με τίτλο αριστερά, κείμενο δεξιά */
.hotel-intro__grid { display: grid; grid-template-columns: minmax(0, 0.9fr) minmax(0, 1.2fr); gap: clamp(32px, 6vw, 96px); align-items: start; }
.hotel-intro__grid h2 { margin-bottom: 0; }
.hotel-intro__text p { color: var(--muted); font-size: 1.05rem; line-height: 1.8; }
.hotel-intro__text p:last-child { margin-bottom: 0; }
@media (max-width: 860px) { .hotel-intro__grid { grid-template-columns: 1fr; } }

/* Εισαγωγικά κείμενα (Το ξενοδοχείο, Blog, Η περιοχή μας): μικρότερο κενό
   ανάμεσα στην εισαγωγή και στο περιεχόμενο που ακολουθεί */
.hotel-intro { padding-bottom: clamp(28px, 3.5vw, 44px); }
.hotel-intro + .section { padding-top: clamp(28px, 3.5vw, 44px); }

/* Κομψό διαχωριστικό μετά από κάθε εισαγωγικό κείμενο (γραμμή — φύλλο — γραμμή).
   Σχεδιάζεται με mask ώστε να παίρνει το χρώμα της ενεργής παλέτας. */
.hotel-intro::after {
  content: ""; display: block; width: 320px; max-width: 80%; height: 27px;
  margin: clamp(36px, 4.5vw, 56px) auto 0;
  background-color: var(--terracotta); opacity: 0.75;
  -webkit-mask: url("data:image/svg+xml;utf8,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 240 20'%3E%3Crect x='14' y='9.5' width='86' height='1' fill='black'/%3E%3Crect x='140' y='9.5' width='86' height='1' fill='black'/%3E%3Ccircle cx='8' cy='10' r='1.6' fill='black'/%3E%3Ccircle cx='232' cy='10' r='1.6' fill='black'/%3E%3Cg transform='translate%28110 0%29 scale%280.3125%29'%3E%3Cpath d='M32 7C34 11 38 12 41 12C44 12 44.5 16 41.5 18C45 18.5 49 20 49.5 24C50 27.5 46 29.5 42.5 29C46 30.5 50 33 50 37C50 41 45.5 42.5 42 41C41 45 38 48.5 34 50L34 58L30 58L30 50C26 48.5 23 45 22 41C18.5 42.5 14 41 14 37C14 33 18 30.5 21.5 29C18 29.5 14 27.5 14.5 24C15 20 19 18.5 22.5 18C19.5 16 20 12 23 12C26 12 30 11 32 7Z' fill='black'/%3E%3C/g%3E%3C/svg%3E") center / contain no-repeat;
          mask: url("data:image/svg+xml;utf8,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 240 20'%3E%3Crect x='14' y='9.5' width='86' height='1' fill='black'/%3E%3Crect x='140' y='9.5' width='86' height='1' fill='black'/%3E%3Ccircle cx='8' cy='10' r='1.6' fill='black'/%3E%3Ccircle cx='232' cy='10' r='1.6' fill='black'/%3E%3Cg transform='translate%28110 0%29 scale%280.3125%29'%3E%3Cpath d='M32 7C34 11 38 12 41 12C44 12 44.5 16 41.5 18C45 18.5 49 20 49.5 24C50 27.5 46 29.5 42.5 29C46 30.5 50 33 50 37C50 41 45.5 42.5 42 41C41 45 38 48.5 34 50L34 58L30 58L30 50C26 48.5 23 45 22 41C18.5 42.5 14 41 14 37C14 33 18 30.5 21.5 29C18 29.5 14 27.5 14.5 24C15 20 19 18.5 22.5 18C19.5 16 20 12 23 12C26 12 30 11 32 7Z' fill='black'/%3E%3C/g%3E%3C/svg%3E") center / contain no-repeat;
}

/* ---------- Φόρμα επικοινωνίας: επιπλέον στοιχεία ---------- */
.form-row { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 0 16px; }
.form-row--3 { grid-template-columns: repeat(2, minmax(0, 1fr)); }
@media (max-width: 560px) { .form-row, .form-row--3 { grid-template-columns: 1fr; } }
.form-field select { appearance: none; -webkit-appearance: none; cursor: pointer; padding-right: 44px;
  background-image: url("data:image/svg+xml;utf8,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%236E6259' stroke-width='1.8' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M6 9l6 6 6-6'/%3E%3C/svg%3E");
  background-repeat: no-repeat; background-position: right 16px center; background-size: 18px; }
.form-field select:focus { outline: none; border-color: var(--terracotta); box-shadow: 0 0 0 4px rgb(var(--terracotta-rgb) / 0.14); }
.form-field [aria-invalid] { border-color: #A33A26; }
.form-booking { border: 1px solid var(--line); border-radius: 16px; padding: 18px 18px 2px; margin: 0 0 18px; background: var(--cream-50); }
.form-booking legend { padding: 0 8px; font-size: 0.72rem; font-weight: 600; letter-spacing: 0.18em; text-transform: uppercase; color: var(--terracotta); }
.form-field--consent { align-items: flex-start; margin-top: 4px; }
.form-field--consent input { margin-top: 4px; flex: none; width: 18px; height: 18px; accent-color: var(--terracotta); }
.form-field--consent label { margin: 0; font-weight: 400; line-height: 1.55; color: var(--muted); }
.form-field--consent a { color: var(--terracotta-600); }
.form-field--consent input[aria-invalid] + label { color: #A33A26; }

/* ---------- Παροχές & υπηρεσίες (σελίδα «Το ξενοδοχείο») ---------- */
.amenities__head { max-width: 640px; margin-bottom: 40px; }
.amenities__head p { color: var(--muted); }
.amenities__list {
  list-style: none; margin: 0; padding: 0;
  display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 0 48px;
}
.amenities__list li {
  position: relative; padding: 13px 0 13px 30px;
  border-top: 1px solid var(--line); line-height: 1.5;
}
.amenities__list li::before {
  content: ""; position: absolute; left: 2px; top: 1.25em;
  width: 9px; height: 9px; border-radius: 999px;
  border: 1.5px solid var(--terracotta); background: rgb(var(--terracotta-rgb) / 0.15);
}
@media (max-width: 720px) { .amenities__list { grid-template-columns: 1fr; } }
