/* Αρχική — ΑΥΤΟΥΣΙΟ από την εγκεκριμένη μακέτα v8 (arxiki.html). Αλλαγές μόνο στη μακέτα ή στο wp.css. */
/* ══ ΜΑΚΕΤΑ Δ' — «OASIS» (13/10/2026) ══
   Ύφος του oasispark.gr/oasis, όπως μετρήθηκε ζωντανά: κεντρικό λογότυπο με το
   μενού από κάτω, τίτλοι Roboto Slab 700 σε βαθύ μπλε (#005188), κείμενο Manrope
   στο ίδιο μπλε, κρεμ φόντο με αχνά οργανικά σχήματα, κυρτή καμπύλη στο κάτω μέρος
   της πρώτης οθόνης, slider με μετρητή «1 / 8», εναλλάξ φωτογραφία–κείμενο,
   πολύχρωμη λωρίδα με σχήματα, γκρι ζώνη, μπλε υποσέλιδο με καμπύλη.
   Περιεχόμενο: ίδιο με τη Γ' v4 (ενωμένες ενότητες, gallery, χωρίς «Το χαρτί»).
   v2 (13/10, παρατηρήσεις Αθηνάς): το μπλε του Oasis → τα χρώματα του λογοτύπου
   (λαδί #4E5A24, χρυσό, πηλός)· χωρίς τα οργανικά σχήματα στο φόντο· κείμενο 22px
   όπως στο oasispark (μετρημένο 22px/33px)· slider με τις 4 φωτογραφίες που
   όρισε, με αυτόματη εναλλαγή και παύση· πραγματικό λογότυπο ΕΣΠΑ.
   v3 (13/10, σχόλιο 61324): «Πώς ξεκίνησε…» με 4 μικρότερα κουτάκια — πρώτο ο
   τίτλος ιδιοκτησίας του 1886· 2×2 σε tablet/κινητό· χάρτης με αναζήτηση που
   βρίσκει την επιχείρηση.
   v4 (18/10, #16395 σχόλιο 61797 — η πελάτισσα επέστρεψε στη Δ' μετά την Ε'):
   λωρίδα σημάτων ΕΣΠΑ/ΕΕ/ΔΑΜ πάνω από την κεφαλίδα (ορατή χωρίς κύλιση παντού)·
   νέο μενού 8 στοιχείων· μεγαλύτερο λογότυπο· πρώτη οθόνη ψηλότερη και φωτεινή όπως
   η Ε' v4, κείμενο χαμηλά ώστε να μη σκεπάζει το πρόσωπο του παιδιού, χωρίς κουμπιά·
   νέοι τίτλοι («Ένας μικρός παράδεισος…», «Οι γωνιές…», «Τα ζωάκια μας»)· gallery
   μόνο με χώρους παιχνιδιού· «Ποιοι είμαστε» της Ε' v4· χωρίς τη ζώνη «Αν είχατε
   παράπονο».
   v5 (20/10, #16395 σχόλιο 61876): τα σήματα ΕΣΠΑ φεύγουν από τη λωρίδα της κορυφής
   και μπαίνουν στο header, δεξιά μετά τις γλώσσες, το ένα κάτω από το άλλο (πάνω
   Ε.Ε. + ΕΣΠΑ, κάτω ΔΑΜ — όπως το στιγμιότυπο της πελάτισσας)· σε στενότερη οθόνη
   στη σειρά κάτω από το λογότυπο· πρώτη οθόνη 70px χαμηλότερη. */
:root{
  /* v2: οι ρόλοι μένουν, οι τιμές είναι του λογοτύπου — --main = λαδί (ήταν μπλε) */
  --main:#4E5A24; --main-deep:#3B451A;
  --orange:#C08361; --green:#8C9A5B; --purple:#CCB448; --yellow:#CCB448; --sky:#E7EBDA;
  --clay-ink:#8A4B2C; --gold-ink:#7E681A;
  --cream:#F8F6EE; --cream-2:#EFEBDD; --grey:#F0EEE6; --line:#DCD8C6;
  --sand:#F2EBD9; --gold:#CCB448;
  --ink:#332E22;
  --slab:'Roboto Slab',Georgia,serif;
  --sans:'Manrope','Segoe UI',system-ui,sans-serif;
  --wrap:1200px;
}
*,*::before,*::after{box-sizing:border-box}
html{scroll-behavior:smooth;scroll-padding-top:140px}
body{margin:0;overflow-x:clip;background:var(--cream);color:var(--main);font:400 17px/1.65 var(--sans);-webkit-font-smoothing:antialiased}
img{max-width:100%;height:auto;display:block}
h1,h2,h3{margin:0;font-family:var(--slab);font-weight:700;line-height:1.18;color:var(--main)}
p{margin:0 0 1em}
a{color:var(--main)}
strong{font-weight:700}
:focus-visible{outline:3px solid var(--orange);outline-offset:3px;border-radius:4px}
.skip{position:absolute;left:-9999px;top:0;z-index:999;background:var(--main);color:#fff;padding:14px 22px;font-weight:700}
.skip:focus{left:8px;top:8px}
.sr{position:absolute;width:1px;height:1px;overflow:hidden;clip:rect(0 0 0 0);white-space:nowrap}
.wrap{width:min(100% - 40px,var(--wrap));margin-inline:auto}
section{padding:clamp(64px,8vw,104px) 0;position:relative}
.h2{font-size:clamp(1.8rem,3.2vw,2.6rem);text-align:center;text-wrap:balance}
/* v2: 22px/33px — όσο το κείμενο του oasispark (μετρημένο ζωντανά 13/10) */
.lead{max-width:62ch;margin:20px auto 0;text-align:center;font-size:clamp(1.12rem,1.6vw,1.375rem);line-height:1.5}
.eyebrow{display:block;font:700 13px/1 var(--sans);letter-spacing:.18em;text-transform:uppercase;color:var(--main);margin:0 0 14px;text-align:center}

/* v2: χωρίς τα αχνά οργανικά σχήματα (παρατήρηση Αθηνάς) — σκέτο κρεμ */
.pattern{background:var(--cream)}

.btn{display:inline-flex;align-items:center;gap:10px;font:700 15px/1 var(--sans);padding:16px 28px;border-radius:999px;text-decoration:none;border:2px solid transparent;transition:background .22s,color .22s,border-color .22s,gap .2s}
.btn::after{content:"→"}
.btn:hover{gap:15px}
.btn-orange{background:var(--clay-ink);color:#fff;border-color:var(--clay-ink)}
.btn-orange:hover{background:#6F3A21;border-color:#6F3A21}
.btn-white{background:transparent;color:#fff;border-color:#fff}
.btn-white:hover{background:#fff;color:var(--main)}
.btn-main{background:var(--main);color:#fff;border-color:var(--main)}
.btn-main:hover{background:var(--main-deep);border-color:var(--main-deep)}
.btn-line{background:transparent;color:var(--main);border-color:var(--main)}
.btn-line:hover{background:var(--main);color:#fff}

/* ── v5: σήματα δημοσιότητας ΕΣΠΑ στο header, το ένα κάτω από το άλλο ──
   Δύο κομμάτια του επίσημου πλαισίου eydam.gr (EYDAM_LOGO_FRAME_GR.pdf, διανυσματικό):
   πάνω έμβλημα Ε.Ε. με τη δήλωση + ΕΣΠΑ 2021-2027, κάτω Πρόγραμμα ΔΑΜ, ίδιο πλάτος.
   Το έμβλημα μένει ψηλότερο από τα άλλα σήματα. Και τα δύο οδηγούν στη σύντομη
   περιγραφή της πράξης (υποσέλιδο). Υπολογιστής: δεξιά μετά τις γλώσσες, στη σειρά του
   λογοτύπου. ≤1000px: δεν χωρούν εκεί, μπαίνουν στη σειρά κάτω από το λογότυπο
   (.espa-mob) — ορατά χωρίς κύλιση σε κάθε οθόνη. */
.espa-hdr{display:flex;flex-direction:column;gap:8px;line-height:0;margin-left:10px}
.espa-hdr img{width:clamp(220px,19vw,270px);height:auto;transition:width .3s}
.hdr.solid .espa-hdr{gap:6px}
.hdr.solid .espa-hdr img{width:200px}
.espa-mob{display:none}

/* ── κεφαλίδα: επαφή αριστερά · λογότυπο στο κέντρο · γλώσσα δεξιά · μενού κάτω ── */
.hdr{position:sticky;top:0;z-index:100;background:#fff;box-shadow:0 1px 0 var(--line);transition:box-shadow .3s}
.hdr.solid{box-shadow:0 8px 24px rgba(59,69,26,.12)}
.hdr-top{display:grid;grid-template-columns:1fr auto 1fr;align-items:center;gap:16px;padding:12px 0 6px;transition:padding .3s}
.chip{justify-self:start;font:500 14px/1 var(--sans);color:var(--main);border:1px solid var(--line);border-radius:999px;padding:10px 16px;text-decoration:none;white-space:nowrap}
.chip a{color:inherit;text-decoration:none}
.chip a:hover{text-decoration:underline}
.logo{line-height:0}
/* v4: λίγο μεγαλύτερο λογότυπο (96 → 112px· στο κινητό 62 → 70px) */
.logo img{height:112px;width:auto;transition:height .3s}
.hdr.solid .logo img{height:68px}
.hdr.solid .hdr-top{padding:6px 0 2px}
.hdr-right{justify-self:end;display:flex;align-items:center;gap:8px}
.lang{display:flex;gap:4px;border:1px solid var(--line);border-radius:999px;padding:4px}
.lang a{font:700 14px/1 var(--sans);text-decoration:none;color:var(--main);padding:8px 10px;border-radius:999px}
.lang a[aria-current]{background:var(--main);color:#fff}
.tel{display:none;width:44px;height:44px;place-items:center;border:1px solid var(--line);border-radius:50%;color:var(--main)}
.tel:hover{background:var(--main);color:#fff;border-color:var(--main)}
.burger{display:none;background:#fff;border:1px solid var(--line);border-radius:999px;color:var(--main);padding:11px 16px;font:700 13px var(--sans);letter-spacing:.08em;cursor:pointer}
/* v4: 8 στοιχεία — το κενό στενεύει με το πλάτος ώστε να μένουν σε μία γραμμή ως τα 901px */
.nav{display:flex;justify-content:center;flex-wrap:wrap;gap:6px clamp(16px,2.1vw,30px);padding:6px 0 14px}
.nav a{font:500 16px/1 var(--sans);color:var(--main);text-decoration:none;padding:6px 0;border-bottom:2px solid transparent;transition:border-color .2s}
.nav a:hover{border-bottom-color:var(--orange)}
.nav a[aria-current]{font-weight:700}

/* ── hero: φωτογραφία, κεντρικός τίτλος, κυρτή καμπύλη κάτω ── */
/* v4 (σχόλιο 61797): ψηλότερη πρώτη οθόνη· το κείμενο κάθεται ΧΑΜΗΛΑ (flex-end) ώστε
   να μη σκεπάζει το πρόσωπο του παιδιού (στη φωτογραφία ~47–63% πλάτος, 6–34% ύψος).
   Σε φαρδιά οθόνη η φωτογραφία κόβεται σε πλάτος, άρα το πρόσωπο τελειώνει στο ~0,23×πλάτος
   — γι' αυτό το ύψος ακολουθεί το πλάτος (31vw + 340px). Μετρήθηκε: κενό πηγουνιού–
   κειμένου ≥ 30px σε 1024–1920· ο τίτλος ολόκληρος μέσα στην οθόνη σε 1366×768.
   Φωτεινή όπως η Ε' v4: ζεστό καφέ, σχεδόν διάφανο πάνω από το πρόσωπο, πυκνό μόνο
   στη ζώνη του κειμένου. */
/* v5 (σχόλιο 61876): 70px χαμηλότερη σε κάθε πλάτος — clamp(640, 31vw+340, 980) → (570, 31vw+270, 910).
   Για να μείνει το κείμενο μακριά από το πρόσωπο με το μικρότερο ύψος: κάτω κενό = ύψος
   καμπύλης + ~18px (ήταν 10,5vw), κενό τίτλου–παραγράφου 20 → 16px,
   παράγραφος 58 → 70ch ώστε να πιάνει λιγότερες γραμμές, και σε υπολογιστή η φωτογραφία
   στοιχίζεται ώστε η κορυφή των μαλλιών να είναι 12px κάτω από το header σε κάθε πλάτος
   (η φωτογραφία πιάνει όλο το πλάτος: ύψος = 0,667·πλάτος, μαλλιά στο 5,5% → 3,667vw). */
.hero{position:relative;min-height:clamp(570px,calc(31vw + 270px),910px);display:flex;align-items:flex-end;justify-content:center;text-align:center;padding:90px 0 clamp(66px,calc(6.6vw + 12px),120px);overflow:hidden;color:#fff}
.hero-bg{position:absolute;inset:0}
.hero-bg img{width:100%;height:100%;object-fit:cover;object-position:52% 12%}
@media (min-width:1001px){ .hero-bg img{object-position:52% calc(12px - 3.667vw)} }
.hero-bg::after{content:"";position:absolute;inset:0;
  background:linear-gradient(180deg,rgba(66,40,18,.12) 0%,rgba(66,40,18,.06) 30%,rgba(66,40,18,.34) 45%,rgba(66,40,18,.62) 62%,rgba(66,40,18,.76) 100%),
             radial-gradient(ellipse 50% 42% at 50% 74%,rgba(66,40,18,.30) 0%,rgba(66,40,18,0) 100%)}
.hero .wrap{position:relative;z-index:2;text-shadow:0 1px 14px rgba(50,28,10,.45)}
.hero .eyebrow{color:#fff}
.hero h1{color:#fff;font-size:clamp(2.3rem,4.8vw,4.2rem);max-width:28ch;margin:0 auto;text-wrap:balance}
.hero p{max-width:70ch;margin:16px auto 0;font-size:1.12rem;color:#fff}
.curve{position:absolute;left:0;right:0;bottom:-1px;width:100%;height:clamp(50px,7vw,110px);z-index:3;color:var(--cream)}

/* ── slider με μετρητή ── */
.slider{margin-top:52px}
.slides{position:relative;overflow:hidden;aspect-ratio:2.07/1}
.track{display:flex;height:100%;transition:transform .6s cubic-bezier(.22,1,.36,1)}
.track figure{flex:0 0 100%;margin:0;height:100%}
.track img{width:100%;height:100%;object-fit:cover}
.s-ctrl{display:flex;justify-content:flex-end;align-items:center;gap:22px;margin-top:16px}
.s-btn{background:transparent;border:0;color:var(--main);cursor:pointer;padding:8px;line-height:0}
.s-btn:hover{color:var(--orange)}
.s-count{font:700 1.5rem/1 var(--slab);min-width:3.4em;text-align:center}
.s-pause{width:44px;height:44px;display:grid;place-items:center;border:1.5px solid var(--line);border-radius:50%}

/* ── τι θα βρείτε ── */
.find{list-style:none;padding:0;margin:52px 0 0;display:grid;grid-template-columns:repeat(3,1fr);gap:22px}
.find a{height:100%;display:flex;gap:18px;align-items:flex-start;background:#fff;border-radius:22px;padding:26px 24px;text-decoration:none;color:var(--main);box-shadow:0 1px 0 var(--line);transition:transform .22s,box-shadow .22s}
.find a:hover{transform:translateY(-3px);box-shadow:0 14px 30px rgba(59,69,26,.14)}
.f-ico{flex:0 0 62px;width:62px;height:62px;display:grid;place-items:center;border-radius:46% 54% 50% 50% / 55% 45% 55% 45%;color:#fff}
.f-ico.o{background:var(--clay-ink)}.f-ico.g{background:var(--main)}.f-ico.p{background:var(--gold-ink)}.f-ico.b{background:#5E6B2E}
.find h3{font-size:1.3rem;margin-bottom:6px}
.find p{margin:0 0 10px;font-size:16px;line-height:1.55;color:var(--ink)}
.more{font:700 15px/1 var(--sans);display:inline-flex;gap:8px;transition:gap .2s}
.more::after{content:"→"}
.find a:hover .more{gap:13px}

/* ── εναλλάξ φωτογραφία–κείμενο ── */
.alt{display:grid;grid-template-columns:1fr 1fr;gap:clamp(30px,5vw,64px);align-items:center}
.alt + .alt{margin-top:clamp(48px,6vw,84px)}
.alt img{width:100%;aspect-ratio:3/2;object-fit:cover}
.alt h2{font-size:clamp(1.6rem,2.8vw,2.2rem);margin-bottom:16px}
.alt p:not(.big):not(.must){font-size:clamp(1.06rem,1.5vw,1.25rem);line-height:1.55}
.alt.flip > :first-child{order:2}
.alt .big{font:500 clamp(1.25rem,2.1vw,1.6rem)/1.5 var(--slab);color:var(--main)}

/* ── πολύχρωμη λωρίδα με σχήματα ── */
.band{background:var(--main);padding:clamp(70px,8vw,96px) 0;overflow:hidden;text-align:center}
.band svg.shapes{position:absolute;inset:0;width:100%;height:100%}
.band .wrap{position:relative;z-index:1}
.band h2{color:#fff;font-size:clamp(1.8rem,4vw,3.3rem);text-wrap:balance;text-shadow:0 2px 18px rgba(32,36,18,.55)}
.band h2 span{display:inline-block;background:var(--main);padding:.08em .35em;border-radius:12px}

/* ── gallery ── */
.gal{list-style:none;padding:0;margin:48px 0 0;display:grid;grid-template-columns:repeat(4,1fr);grid-auto-rows:250px;grid-auto-flow:dense;gap:14px}
.gal .w2{grid-column:span 2}
.gal figure{margin:0;height:100%;position:relative;overflow:hidden}
.gal img{width:100%;height:100%;object-fit:cover;transition:transform .6s cubic-bezier(.22,1,.36,1)}
.gal li:hover img{transform:scale(1.05)}
.doodle{position:absolute;pointer-events:none}
.d-grass{right:4%;top:120px;width:70px;color:var(--yellow)}
.d-plant{left:2%;top:44%;width:64px;color:var(--green)}

/* ── εστίαση: τρεις στήλες ── */
.trio{list-style:none;padding:0;margin:48px 0 0;display:grid;grid-template-columns:repeat(3,1fr);gap:24px}
.trio figure{margin:0}
.trio img{width:100%;aspect-ratio:4/3;object-fit:cover}
.trio h3{font-size:1.45rem;margin:18px 0 8px}
.trio p{margin:0;font-size:16px;color:var(--ink)}

.must{background:#fff;border-left:4px solid var(--orange);padding:14px 18px;font-weight:700;margin:20px 0 24px;color:var(--ink)}
.checks{list-style:none;padding:0;margin:18px 0}
.checks li{padding-left:30px;position:relative;margin-bottom:10px}
.checks li::before{content:"";position:absolute;left:0;top:.35em;width:16px;height:16px;border-radius:50%;background:var(--green)}

/* ── v4: «Ποιοι είμαστε» όπως εγκρίθηκε στην Ε' v4 (15/10, σχόλια 61544/61574/61578) ──
   Αριστερά χρονογραμμή: κάθετη γραμμή 1px #D3C7A8 σε δική της στήλη (--rail), χρυσή
   τελεία .tl-dot στο ύψος κάθε στοιχείου — τρεις κύκλοι (1886 · προπάππους · παππούς
   και γιαγιά) και 4ο το «Σήμερα» (τίτλος στη στήλη των κύκλων, περιγραφή δεξιά).
   Δεξιά το κείμενο και από κάτω η φωτογραφία της σημερινής οικογένειας. Η γραμμή
   κάτω από την τελευταία τελεία καλύπτεται στο χρώμα του φόντου (.tl-dot::after).
   Γραμματοσειρές/χρώματα της Δ' (Roboto Slab, λαδί)· διάταξη, μεγέθη, φίλτρα της Ε'. */
.story-sec{background:var(--sand)}
.story{display:grid;grid-template-columns:minmax(0,.85fr) minmax(0,1.15fr);gap:clamp(36px,6vw,84px);align-items:center}
.roots{--r:clamp(132px,13.5vw,180px);--rail:15px;list-style:none;margin:0;padding:0;display:grid;gap:28px;position:relative}
.roots::before{content:"";position:absolute;left:calc(var(--rail) / 2 - .5px);top:calc(var(--r) / 2);bottom:0;width:1px;background:#D3C7A8}
/* Κύκλος και τελεία κολλούν στην κορυφή της γραμμής του grid (κέντρο = --r/2, εκεί που
   ξεκινά η κάθετη γραμμή)· μόνο το κείμενο κεντράρεται. Με το κείμενο της Δ' στο κινητό
   ψηλότερο από τον κύκλο, το align-items:center κατέβαζε τον 1ο κύκλο 9,5px κάτω από την
   αρχή της γραμμής (μετρημένο 390px). */
.roots li{display:grid;grid-template-columns:var(--rail) var(--r) minmax(0,1fr);column-gap:24px;align-items:start;position:relative}
.roots li > div{align-self:center}
.tl-dot{width:11px;height:11px;border-radius:50%;background:var(--gold);border:2px solid var(--cream);margin:16px auto 14px;position:relative;z-index:2;box-sizing:content-box}
.roots .tl-dot{margin:calc(var(--r) / 2 - 7.5px) 0 0}
.roots .li-today{overflow:hidden;align-items:center}
.roots .li-today .tl-dot{margin:0}
.roots .li-today h3{grid-column:2;margin:0;text-align:center}
.roots .li-today p{grid-column:3}
.roots .li-today .tl-dot::after{content:"";position:absolute;left:50%;margin-left:-2px;top:calc(100% + 2px);width:4px;height:600px;background:var(--sand)}
.roots img{width:100%;aspect-ratio:1;object-fit:cover;border-radius:50%;border:5px solid var(--cream);box-shadow:0 8px 22px rgba(61,34,7,.12);filter:grayscale(1) sepia(.3) contrast(1.05)}
.roots img.pos-pr{object-position:50% 9%}
.roots img.pos-pp{object-position:64% 50%}
.roots h3{font-size:1.25rem;margin-bottom:6px}
.roots p{font-size:1rem;line-height:1.55;color:var(--ink);margin:0;max-width:26ch}
.story .eyebrow{text-align:left}
.story h2{font-size:clamp(1.8rem,3.2vw,2.5rem);line-height:1.22;margin-bottom:26px}
.story h2 em{display:block;font-style:normal;color:var(--gold-ink);font-size:.62em;margin-bottom:10px}
.story .lead{text-align:left;max-width:none;margin:0 0 1em;font-size:1.24rem;line-height:1.6}
.story p{color:var(--ink)}
.story .lead{color:var(--main)}
.today-img{margin:30px 0 0}
.today-img img{width:100%;height:auto;aspect-ratio:960/375;object-fit:cover;border-radius:30px;border:5px solid var(--cream);filter:grayscale(1) sepia(.3) contrast(1.05)}

.btn-long{line-height:1.3;text-align:left}

/* ── επικοινωνία ── */
.contact{display:grid;grid-template-columns:.9fr 1.1fr;gap:clamp(28px,4vw,56px);margin-top:44px}
.rows dt{font:700 13px/1 var(--sans);letter-spacing:.14em;text-transform:uppercase;margin:22px 0 8px}
.rows dt:first-child{margin-top:0}
.rows dd{margin:0;color:var(--ink)}
.rows a{color:var(--ink)}
.hours{width:100%;border-collapse:collapse;font-size:16px}
.hours th{text-align:left;font-weight:700;padding:8px 0;border-bottom:1px solid var(--line)}
.hours td{text-align:right;padding:8px 0;border-bottom:1px solid var(--line);color:var(--ink)}
.pets{margin-top:22px;background:#fff;border-radius:16px;padding:14px 18px;font-size:16px;color:var(--ink)}
.map{border:0;width:100%;height:100%;min-height:420px}

/* ── υποσέλιδο: μπλε με καμπύλη ── */
footer{position:relative;background:var(--main);color:#fff;padding:clamp(90px,10vw,130px) 0 30px;font-size:16px}
footer .curve-top{position:absolute;top:-1px;left:0;width:100%;height:clamp(40px,6vw,80px);color:var(--cream)}
footer a{color:#fff}
.f-grid{display:grid;grid-template-columns:1.3fr 1fr 1fr;gap:40px;padding-bottom:34px;border-bottom:1px solid rgba(255,255,255,.3)}
.f-logo{display:inline-block;background:#fff;border-radius:24px;padding:14px 20px;line-height:0;margin-bottom:18px}
.f-logo img{height:86px;width:auto}
.f-head{font:700 14px/1 var(--slab);margin:0 0 16px}
footer ul{list-style:none;margin:0;padding:0}
footer li{margin-bottom:9px}
/* v4: σύντομη περιγραφή της πράξης — εδώ οδηγούν τα σήματα του header (v5) */
.espa{background:#fff;color:var(--ink);border-radius:18px;padding:22px 26px;margin-top:30px;scroll-margin-top:200px}
.espa img{width:min(100%,640px);height:auto}
.espa h2{font:700 1.05rem/1.3 var(--slab);color:var(--main);margin:18px 0 8px}
.espa p{margin:0;font-size:15px;line-height:1.6}
.f-base{display:flex;justify-content:space-between;flex-wrap:wrap;gap:14px;padding-top:24px;font-size:14px}
.f-credit{display:inline-flex;align-items:center;gap:10px}
.f-credit a{display:inline-flex;line-height:0}
.f-credit img{height:auto}

/* ══ αποκαλύψεις ══ */
[data-aos]{transition:opacity .8s cubic-bezier(.22,1,.36,1),transform .8s cubic-bezier(.22,1,.36,1)}
.js-enabled [data-aos]:not(.is-visible){opacity:0;transform:translateY(30px)}
.js-enabled [data-aos="zoom"]:not(.is-visible){transform:scale(.95)}
.js-enabled [data-aos="left"]:not(.is-visible){transform:translateX(-30px)}
.js-enabled [data-aos="right"]:not(.is-visible){transform:translateX(30px)}
[data-delay="1"]{transition-delay:.1s}[data-delay="2"]{transition-delay:.2s}[data-delay="3"]{transition-delay:.3s}
@media (prefers-reduced-motion:reduce){
  html{scroll-behavior:auto}
  *,*::before,*::after{animation-duration:.001ms!important;transition-duration:.001ms!important}
  .js-enabled [data-aos]:not(.is-visible){opacity:1;transform:none}
}

@media (max-width:1000px){
  .espa-hdr{display:none}
  .espa-mob{display:block;background:#fff;border-bottom:1px solid var(--line);padding:4px 0 12px}
  .espa-mob a{display:flex;flex-direction:column;gap:8px;width:min(100% - 40px,300px);margin-inline:auto;line-height:0}
  .espa-mob img{width:100%;height:auto}
  .hdr:not(.solid){box-shadow:none}
  .find{grid-template-columns:1fr 1fr}
  .gal{grid-template-columns:1fr 1fr;grid-auto-rows:220px}
  .trio{grid-template-columns:1fr;max-width:520px;margin-inline:auto}
  /* στο κινητό πρώτα ο τίτλος και το κείμενο, μετά η χρονογραμμή (όπως η Ε' v4) */
  .story{grid-template-columns:1fr}
  .roots{order:2;--r:132px;max-width:520px}
  .js-enabled [data-aos="left"]:not(.is-visible),
  .js-enabled [data-aos="right"]:not(.is-visible){transform:translateY(26px)}
}
@media (max-width:900px){
  .nav{display:none}
  .burger{display:block}
  .tel{display:grid}
  .chip{display:none}
  .hdr-top{grid-template-columns:auto 1fr auto;padding:8px 0}
  .hdr-top .logo{order:-1}
  .hdr-right{justify-self:end}
  .logo img{height:70px}
  .hdr.solid .logo img{height:56px}
  .alt,.contact,.f-grid{grid-template-columns:1fr}
  .alt.flip > :first-child{order:0}
  .alt > div{text-align:center}
  .map{min-height:320px}
  .d-grass,.d-plant{display:none}
}
@media (max-width:560px){
  .find{grid-template-columns:1fr}
  .gal{grid-auto-rows:170px;gap:8px}
  .lang a{padding:7px 8px;font-size:13px}
  .roots{--r:108px;gap:22px}
  .roots li{column-gap:18px}
  .roots h3{font-size:1.15rem}
  .today-img img{border-radius:22px}
}
/* v4: σε στενή οθόνη η φωτογραφία κόβεται σε ύψος (cover κατά το ύψος), οπότε το πρόσωπο
   πιάνει το πάνω ~34% του ύψους της ενότητας. Η ζώνη κειμένου ξεκινά σε σταθερό 330px,
   και η ενότητα μεγαλώνει προς τα κάτω όσο χρειάζεται το κείμενο. */
@media (max-width:640px){
  /* v5: −70px μοιρασμένα (330 → 303 πάνω, 110 → 75 κάτω· άλλα 8px από τα κενά 20 → 16 του
     κειμένου) — εδώ η φωτογραφία πιάνει όλο το ύψος, άρα το πρόσωπο ακολουθεί το ύψος */
  .hero{min-height:0;padding:303px 0 75px}
  .hero-bg img{object-position:53% 0%}
  /* v5: .56 → .62 στο 38% — με τη χαμηλότερη οθόνη το «Καρύταινα · Αρκαδία» έπεφτε σε 4,49:1 (πρόσωπο ως το 34,5%) */
  .hero-bg::after{background:linear-gradient(180deg,rgba(66,40,18,.12) 0%,rgba(66,40,18,.06) 31%,rgba(66,40,18,.62) 38%,rgba(66,40,18,.68) 52%,rgba(66,40,18,.80) 100%)}
}