/* ============================================================
   THE GERMAN HUB — κοινό design system για τις σελίδες υπηρεσιών
   Παλέτα από την κάρτα της: #FFDE59 · #141418 · #FEFBF4 · #E9291E
   Τυπογραφία: Literata (τίτλοι) + Commissioner (κείμενο)
   Σημείωση 24/08: «μεγαλύτερα γράμματα» — base 18px αντί 17px.
   ============================================================ */

:root{
  --ink:#141418; --ink-2:#1E1E25; --ink-soft:#3B3B44; --ink-mute:#6F6F79;
  --paper:#FEFBF4; --paper-2:#F3EAD3; --paper-3:#FDF1C4;
  --line:#E4DCC6; --line-dark:#2C2C34;
  --yellow:#FFDE59; --yellow-2:#F7BA24; --amber-ink:#8A6206;
  --red:#E9291E;
  /* Ίδια tokens με την αρχική. Ζουν μόνο μέσα σε overlay, σε χαμηλή ένταση. */
  --glow-warm:255,222,89;
  --glow-eu:38,74,153;
  --serif:'Literata',Georgia,'Times New Roman',serif;
  --sans:'Commissioner',-apple-system,BlinkMacSystemFont,'Segoe UI',Helvetica,Arial,sans-serif;
  /* Το ύψος του header ζει ΕΔΩ, γιατί τρία sticky στοιχεία στις σελίδες
     υπηρεσιών κρέμονται από αυτό. Αν μεγαλώσει το λογότυπο και το ύψος μείνει
     γραμμένο με το χέρι σε τέσσερα σημεία, ο τίτλος κρύβεται πίσω απ' τη μπάρα. */
  --hdr-h:104px;
  --wrap:1180px; --gut:clamp(20px,5vw,56px); --r:4px;
  --ease:cubic-bezier(.22,.61,.36,1);
}
*,*::before,*::after{box-sizing:border-box}
html{-webkit-text-size-adjust:100%;scroll-behavior:smooth}
body{margin:0;background:var(--paper);color:var(--ink);font-family:var(--sans);font-size:18px;line-height:1.68;overflow-x:hidden}
img{max-width:100%;display:block}
a{color:inherit}
h1,h2,h3,h4{font-family:var(--serif);font-weight:600;line-height:1.14;letter-spacing:-.015em;margin:0}
p{margin:0}
button{font:inherit;color:inherit;background:none;border:0;cursor:pointer}
.wrap{max-width:var(--wrap);margin:0 auto;padding-inline:var(--gut)}
.section{padding-block:clamp(66px,8vw,120px)}
.skip{position:absolute;left:-9999px}
.skip:focus{left:12px;top:12px;z-index:200;background:var(--yellow);padding:10px 16px;border-radius:var(--r)}

/* ---------- μαρκαδόρος που «γράφεται» στο scroll ---------- */
.mk{
  background-image:linear-gradient(rgba(255,222,89,.95),rgba(255,222,89,.95));
  background-repeat:no-repeat;background-position:0 88%;background-size:0% .42em;
  transition:background-size .9s var(--ease) .15s;
  padding:0 .06em;
}
.in .mk,.mk.in{background-size:100% .42em}
.mk--red{background-image:linear-gradient(rgba(233,41,30,.16),rgba(233,41,30,.16))}

/* Σε σκούρο φόντο ο μισός μαρκαδόρος δεν δουλεύει: το κείμενο γίνεται σκούρο,
   αλλά ό,τι δεν καλύπτει η κίτρινη γραμμή χάνεται μέσα στο μαύρο.
   Εκεί ο μαρκαδόρος γίνεται πλήρες πλακίδιο. */
.svc--dark .mk,.close .mk{
  background-position:0 58%;background-size:0% 1.32em;
  color:var(--ink);padding:.04em .22em;border-radius:2px;
  box-decoration-break:clone;-webkit-box-decoration-break:clone;
}
.svc--dark .in .mk,.svc--dark .mk.in,
.close .in .mk,.close .mk.in{background-size:100% 1.32em}

/* ---------- ετικέτες ---------- */
.tag{font-size:12.5px;letter-spacing:.18em;text-transform:uppercase;font-weight:600;color:var(--ink-mute);display:inline-block;margin-bottom:20px}
.tag::before{content:"[ ";color:var(--red)}
.tag::after{content:" ]";color:var(--red)}
.tag--light{color:#A9A497}

/* ---------- κουμπιά ---------- */
.btn{display:inline-flex;align-items:center;gap:14px;font-size:15.5px;font-weight:500;padding:13px 8px 13px 20px;border-radius:var(--r);text-decoration:none;transition:background .22s var(--ease),color .22s var(--ease),border-color .22s var(--ease)}
.btn .arw{width:34px;height:34px;flex:none;border-radius:3px;display:grid;place-items:center;background:var(--paper);color:var(--ink);transition:transform .28s var(--ease)}
.btn:hover .arw{transform:translateX(3px)}
.btn--y{background:var(--yellow);color:var(--ink)}
.btn--y:hover{background:var(--yellow-2)}
.btn--ghost{border:1px solid var(--line);padding:13px 22px}
.btn--ghost:hover{background:var(--paper-2)}
.btn--dark{background:var(--ink);color:var(--paper)}
.btn--dark .arw{background:var(--yellow);color:var(--ink)}
.ulink{text-decoration:none;font-weight:500;font-size:15.5px;border-bottom:1px solid var(--line);padding-bottom:3px;transition:border-color .2s var(--ease),color .2s var(--ease)}
.ulink:hover{border-color:var(--yellow-2);color:var(--amber-ink)}

/* ============================ HEADER ============================ */
.hdr{position:sticky;top:0;z-index:60;background:var(--paper);border-bottom:1px solid var(--line)}
.hdr__in{max-width:var(--wrap);margin:0 auto;padding:0 var(--gut);height:var(--hdr-h);display:flex;align-items:center;justify-content:space-between;gap:20px}
.menubtn{font-size:12.5px;letter-spacing:.2em;text-transform:uppercase;font-weight:600;display:flex;align-items:center;gap:10px;padding:6px 0}
.menubtn__bars{display:inline-flex;flex-direction:column;gap:3px;width:16px}
.menubtn__bars i{display:block;height:1.5px;background:var(--ink);transition:background .2s var(--ease),transform .25s var(--ease)}
.menubtn:hover .menubtn__bars i:nth-child(2){transform:translateX(4px)}
.menubtn:hover{color:var(--amber-ink)}
/* Το λογότυπο είναι το ΚΕΝΤΡΟ του header. Στα 48px δεν διαβαζόταν καν —
   ζητήθηκε από τον Βύρωνα (07/09) να μεγαλώσει και να ξεχωρίζει.
   Το αρχείο είναι 294px, άρα στα 76px μένει καθαρό ακόμη και σε οθόνη 2×.
   Το λευκό πλακίδιο με το λεπτό δαχτυλίδι το σηκώνει από το κρεμ φόντο: χωρίς
   αυτό, το ανοιχτό φόντο της ίδιας της εικόνας λιώνει μέσα στη σελίδα. */
.brand{display:inline-flex;align-items:center;border-radius:50%;
  transition:transform .28s var(--ease)}
.brand img{height:76px;width:auto;border-radius:50%;background:#fff;
  box-shadow:0 0 0 1px var(--line), 0 2px 10px rgba(20,20,24,.05);
  transition:box-shadow .28s var(--ease)}
.brand:hover{transform:translateY(-1px)}
.brand:hover img{box-shadow:0 0 0 2px var(--yellow-2), 0 4px 14px rgba(20,20,24,.10)}
.hdr__cta{font-size:14.5px}
.hdr__bar{height:2px;background:var(--yellow);width:0%;transition:width .1s linear}
@media (max-width:760px){.hdr__in{height:78px}.brand img{height:56px}.hdr__cta{display:none}}

/* Η δεξιά πλευρά του header: διακόπτης γλώσσας + CTA.
   ΧΑΝΟΤΑΝ — χωρίς αυτόν τον κανόνα τα δύο στοιχεία κάθονταν με 4px ανάμεσά
   τους και διαβάζονταν ως ένα μπερδεμένο μπλοκ. */
.hdr__right{display:flex;align-items:center;gap:clamp(12px,1.6vw,24px)}

/* ---------- διακόπτης γλώσσας ----------
   Δύο ορατές επιλογές, όχι ένας σύνδεσμος. Ο επισκέπτης βλέπει ταυτόχρονα ΠΟΥ
   είναι και ΠΟΥ μπορεί να πάει, χωρίς να μαντεύει.

   Το κίτρινο πλακίδιο κάθεται κάτω από την ενεργή γλώσσα. Όταν περνάς πάνω από
   την άλλη, ΓΛΙΣΤΡΑΕΙ προς τα εκεί και η σημαία της παίρνει χρώμα: η κίνηση
   δείχνει το αποτέλεσμα του κλικ πριν το κλικ.

   Το πλακίδιο είναι τελευταίο στο HTML ώστε να το φτάνει ο κανόνας `~` από τους
   συνδέσμους. Το z-index το κρατά από κάτω. */
.lang{position:relative;display:inline-flex;align-items:center;padding:3px;
  border:1px solid var(--line);border-radius:999px;background:var(--paper-2);
  isolation:isolate}
.lang__o{position:relative;z-index:1;display:inline-flex;align-items:center;gap:7px;
  padding:6px 12px;border-radius:999px;text-decoration:none;
  font-size:11.5px;letter-spacing:.11em;font-weight:700;color:var(--ink-mute);
  transition:color .26s var(--ease)}
.lang__o b{font-weight:700;line-height:1}
.lang__o.is-on{color:var(--ink);cursor:default}
.lang__o:not(.is-on):hover{color:var(--ink)}

/* Η ανενεργή σημαία είναι ξεθωριασμένη — ξεχωρίζει αμέσως ποια γλώσσα τρέχει. */
.lang__f{width:19px;height:13px;flex:none;border-radius:2px;display:block;
  box-shadow:0 0 0 1px rgba(20,20,24,.16);
  filter:saturate(.12) opacity(.5);
  transition:filter .3s var(--ease),transform .3s var(--ease)}
.lang__o.is-on .lang__f{filter:none}
.lang__o:not(.is-on):hover .lang__f{filter:none;transform:scale(1.09)}

.lang__pill{position:absolute;z-index:0;top:3px;bottom:3px;left:3px;
  width:calc((100% - 6px) / 2);border-radius:999px;background:var(--yellow);
  transition:transform .34s var(--ease),background .26s var(--ease)}
/* Με τρεις γλώσσες το πλακίδιο πιάνει το ένα τρίτο. Το πλάτος υπολογίζεται
   ΑΚΡΙΒΩΣ, ώστε το translateX(100%) να μετακινεί ακριβώς μία θέση. */
.lang--n3 .lang__pill{width:calc((100% - 6px) / 3)}
.lang--el .lang__pill{transform:translateX(0)}
.lang--de .lang__pill{transform:translateX(100%)}
.lang--en .lang__pill{transform:translateX(200%)}
/* Το γλίστρημα στο hover: η θέση ορίζεται από τη ΣΕΙΡΑ της επιλογής, όχι από
   το ποια είναι ενεργή — έτσι ο κανόνας δουλεύει για οποιονδήποτε συνδυασμό. */
.lang__o:nth-of-type(1):hover ~ .lang__pill,
.lang__o:nth-of-type(1):focus-visible ~ .lang__pill{transform:translateX(0)}
.lang__o:nth-of-type(2):hover ~ .lang__pill,
.lang__o:nth-of-type(2):focus-visible ~ .lang__pill{transform:translateX(100%)}
.lang__o:nth-of-type(3):hover ~ .lang__pill,
.lang__o:nth-of-type(3):focus-visible ~ .lang__pill{transform:translateX(200%)}
.lang__o:not(.is-on):hover ~ .lang__pill{background:var(--yellow-2)}
.lang__o:focus-visible{outline:2px solid var(--ink);outline-offset:2px}

@media (prefers-reduced-motion:reduce){
  .lang__pill,.lang__f{transition:none}
  .lang__o:not(.is-on):hover .lang__f{transform:none}
}
@media (max-width:760px){
  .lang__o{padding:5px 9px;gap:5px;font-size:10.5px;letter-spacing:.08em}
  .lang__f{width:16px;height:11px}
}

/* Το header είναι ΜΠΑΡΑ, όχι στήλη κειμένου. Του δίνουμε λίγο παραπάνω πλάτος
   από το --wrap ώστε το CTA να πλησιάζει την άκρη της οθόνης — ζητήθηκε από τον
   Βύρωνα (07/09). Κάτω από ~1200px επανέρχεται στο --wrap, ώστε το κουμπί μενού
   να μένει στοιχισμένο με το κείμενο του hero. */
@media (min-width:1200px){
  .hdr__in{max-width:none;padding-inline:clamp(30px,3.2vw,54px)}
}

/* ============================ ΜΕΝΟΥ ============================ */
.nav{position:fixed;inset:0;z-index:80;background:var(--ink);color:var(--paper);display:none;overflow-y:auto}
.nav.is-open{display:block}
.nav__bar{max-width:var(--wrap);margin:0 auto;padding:0 var(--gut);height:var(--hdr-h);display:flex;align-items:center;justify-content:space-between;border-bottom:1px solid var(--line-dark)}
.nav__close{font-size:12.5px;letter-spacing:.2em;text-transform:uppercase;font-weight:600}
.nav__close:hover{color:var(--yellow)}
.nav__bar img{height:64px;width:auto;border-radius:50%;background:#fff}
.nav__cols{max-width:var(--wrap);margin:0 auto;padding:clamp(38px,6.5vw,78px) var(--gut) 60px;display:grid;grid-template-columns:repeat(3,1fr);gap:clamp(28px,5vw,64px)}
.nav__h{font-size:12.5px;letter-spacing:.18em;text-transform:uppercase;font-weight:600;color:var(--yellow);margin:0 0 20px;font-family:var(--sans)}
.nav__list{list-style:none;margin:0;padding:0}
.nav__list a{display:inline-block;text-decoration:none;padding:7px 0;font-family:var(--serif);font-size:clamp(19px,2vw,24px);border-bottom:1px solid transparent;transition:border-color .2s var(--ease),color .2s var(--ease)}
.nav__list a:hover{color:var(--yellow);border-color:var(--yellow)}
.nav__list .sub{list-style:none;padding:0;margin:2px 0 8px}
.nav__list .sub a{font-family:var(--sans);font-size:15px;color:#B5B0A3;padding:4px 0 4px 18px}
.nav__foot{max-width:var(--wrap);margin:0 auto;padding:24px var(--gut) 56px;border-top:1px solid var(--line-dark);font-size:14.5px;color:#8B8679;display:flex;flex-wrap:wrap;gap:10px 28px}
.nav__foot a{text-decoration:none}
.nav__foot a:hover{color:var(--yellow)}
@media (max-width:820px){.nav__cols{grid-template-columns:1fr;gap:32px}}

/* ============================================================
   ΣΕΛΙΔΑ ΥΠΗΡΕΣΙΑΣ
   ============================================================ */

/* ---------- ψίχουλα ---------- */
.crumbs{font-size:13.5px;color:var(--ink-mute);padding-top:26px;display:flex;gap:8px;flex-wrap:wrap}
.crumbs a{text-decoration:none}
.crumbs a:hover{color:var(--amber-ink)}
.crumbs span[aria-current]{color:var(--ink)}

/* ---------- hero σελίδας ---------- */
.shero{padding-block:clamp(34px,4.5vw,58px) clamp(46px,6vw,84px);position:relative;overflow:hidden}
.shero__grid{display:grid;grid-template-columns:1.22fr .78fr;gap:clamp(30px,5vw,68px);align-items:start}
.shero h1{font-size:clamp(2.15rem,5.4vw,3.75rem);letter-spacing:-.03em;max-width:16ch}
.shero__kick{font-family:var(--serif);font-size:clamp(1.12rem,2vw,1.5rem);color:var(--ink-soft);margin-top:20px;max-width:32ch;font-weight:400;line-height:1.32}
.shero__lede{margin-top:26px;display:grid;gap:17px;max-width:60ch;color:var(--ink-soft);font-weight:300;font-size:clamp(16.5px,1.5vw,18.5px)}
.shero__lede strong{font-weight:600;color:var(--ink)}
.shero__acts{display:flex;flex-wrap:wrap;gap:14px;margin-top:34px}
/* Διακριτική υφή στο βάθος. ΑΧΡΗΣΙΜΟΠΟΙΗΤΗ από 27/08 — ο Βύρων ζήτησε να
   φύγει η θολή εικόνα από Γερμανικά και Ταξίδια. Ο κανόνας μένει εδώ: αν
   ξαναχρειαστεί, αρκεί ένα "art": "..." στο make-pages.py. */
.shero__art{position:absolute;right:-6%;top:-14%;width:min(52%,620px);aspect-ratio:3/2;pointer-events:none;
  background:var(--img,none) center/cover no-repeat;
  opacity:.11;filter:grayscale(1) contrast(1.05) sepia(.45) saturate(1.7) hue-rotate(-12deg) blur(2px);
  -webkit-mask-image:radial-gradient(120% 100% at 78% 22%,#000 8%,transparent 68%);
  mask-image:radial-gradient(120% 100% at 78% 22%,#000 8%,transparent 68%);}
@media (max-width:900px){.shero__grid{grid-template-columns:1fr}.shero h1{max-width:none}.shero__art{display:none}}

/* ---------- ευρετήριο σελίδας (sticky) ---------- */
.idx{position:sticky;top:calc(var(--hdr-h) + 26px);border-top:2px solid var(--ink);padding-top:18px}
.idx__h{font-size:12.5px;letter-spacing:.18em;text-transform:uppercase;font-weight:600;color:var(--ink-mute);margin-bottom:14px;font-family:var(--sans)}
.idx ol{list-style:none;margin:0;padding:0;counter-reset:ix}
.idx li{counter-increment:ix;border-bottom:1px solid var(--line)}
.idx a{display:grid;grid-template-columns:30px 1fr;gap:6px;align-items:baseline;text-decoration:none;padding:10px 0;font-size:15px;color:var(--ink-soft);transition:color .2s var(--ease),padding-left .25s var(--ease)}
.idx a::before{content:counter(ix,decimal-leading-zero);font-size:11.5px;letter-spacing:.08em;color:var(--ink-mute);font-variant-numeric:tabular-nums}
.idx a:hover{color:var(--ink);padding-left:5px}
.idx a.is-here{color:var(--ink);font-weight:600}
.idx a.is-here::before{color:var(--red)}
@media (max-width:900px){.idx{position:static;margin-top:38px}}

/* ---------- η ραχοκοκαλιά των υπηρεσιών ---------- */
.spine{position:relative;padding-block:clamp(20px,3vw,40px) 0}
.spine::before{content:"";position:absolute;left:calc(var(--gut) - 1px);top:0;bottom:0;width:1px;background:var(--line)}
.spine__fill{position:absolute;left:calc(var(--gut) - 1px);top:0;width:1px;background:var(--yellow-2);height:0;transition:height .12s linear}
@media (max-width:900px){.spine::before,.spine__fill{display:none}}

.svc{padding-block:clamp(46px,6vw,86px);border-bottom:1px solid var(--line)}
.svc:last-of-type{border-bottom:0}
.svc__grid{display:grid;grid-template-columns:clamp(96px,13vw,168px) 1fr;gap:clamp(22px,4vw,60px);align-items:start}
.svc__no{position:sticky;top:calc(var(--hdr-h) + 34px)}
.svc__no b{display:block;font-family:var(--serif);font-size:clamp(2.4rem,5vw,3.6rem);line-height:.9;font-weight:600;color:var(--ink);font-variant-numeric:tabular-nums}
.svc__no i{display:block;font-style:normal;font-size:11.5px;letter-spacing:.18em;text-transform:uppercase;color:var(--ink-mute);margin-top:10px;font-weight:600}
.svc__no::after{content:"";display:block;width:26px;height:2px;background:var(--yellow);margin-top:14px}
.svc h2{font-size:clamp(1.55rem,3.1vw,2.3rem);letter-spacing:-.022em;max-width:20ch}
.svc__sub{font-family:var(--serif);font-size:clamp(1.02rem,1.7vw,1.24rem);color:var(--amber-ink);margin-top:12px;max-width:36ch;line-height:1.34;font-weight:400}
.svc__body{margin-top:22px;display:grid;gap:16px;max-width:62ch;color:var(--ink-soft);font-weight:300}
.svc__body strong{font-weight:600;color:var(--ink)}
.svc__acts{margin-top:26px}
@media (max-width:900px){
  .svc__grid{grid-template-columns:1fr;gap:16px}
  .svc__no{position:static;display:flex;align-items:baseline;gap:12px}
  .svc__no b{font-size:2rem}
  .svc__no::after{display:none}
  .svc h2,.svc__sub{max-width:none}
}

/* ---------- Πρότυπο Α: κάθετη ετικέτα αντί για αριθμό ----------
   Η στήλη αριστερά κρατά την κατηγορία («ΠΙΣΤΟΠΟΙΗΣΕΙΣ») και χάνει το «03».
   Ο επισκέπτης μαθαίνει τι είναι η ενότητα, όχι το πολλοστό της. */
.svc--rail .svc__grid{grid-template-columns:clamp(56px,7vw,88px) 1fr}
.svc__rail{position:sticky;top:calc(var(--hdr-h) + 34px);display:flex;flex-direction:column;align-items:flex-start;gap:16px}
.svc__rail::before{content:"";display:block;width:26px;height:2px;background:var(--yellow);flex:none}
.svc__rail i{writing-mode:vertical-rl;transform:rotate(180deg);font-style:normal;
  font-size:11.5px;letter-spacing:.22em;text-transform:uppercase;font-weight:600;
  color:var(--ink-mute);white-space:nowrap}
.svc--dark .svc__rail i{color:var(--yellow)}
.svc--dark .svc__rail::before{background:var(--yellow)}
@media (max-width:900px){
  .svc--rail .svc__grid{grid-template-columns:1fr;gap:14px}
  .svc__rail{position:static;flex-direction:row;align-items:center;gap:12px}
  .svc__rail::before{width:18px}
  .svc__rail i{writing-mode:horizontal-tb;transform:none;letter-spacing:.18em}
}

/* ---------- Πρότυπο Γ: λημματικό δίστηλο ----------
   Ο τίτλος και η κατηγορία αριστερά, το κείμενο δεξιά — σαν γλωσσάρι.
   Για σελίδες με πολλές, ισοδύναμες ενότητες. */
.svc--lex .svc__grid{grid-template-columns:clamp(210px,26vw,320px) 1fr;
  gap:clamp(22px,3.4vw,52px);align-items:start}
.svc--lex{padding-block:clamp(34px,4vw,54px)}
.svc__lead{display:flex;flex-direction:column;gap:9px}
.svc__cat{font-size:11.5px;letter-spacing:.16em;text-transform:uppercase;font-weight:600;color:var(--red)}
.svc--lex .svc h2,.svc--lex h2{font-size:clamp(1.3rem,2.3vw,1.62rem);max-width:none}
.svc--lex .svc__sub{margin-top:0;margin-bottom:14px;max-width:none}
.svc--lex .svc__body{margin-top:0}
.svc--dark .svc__cat{color:var(--yellow)}

/* ---------- Πρότυπο Β: η ερώτηση ως τίτλος ----------
   Η ενότητα ξεκινά από την πραγματική απορία του επισκέπτη.
   Οι ερωτήσεις είναι δικές της, από την ίδια σελίδα του υλικού. */
.svc--ask .svc__grid{grid-template-columns:1.02fr .98fr;gap:clamp(26px,4vw,56px);align-items:start}
.svc__q{font-family:var(--serif);font-size:clamp(1.5rem,2.9vw,2.15rem);font-weight:600;
  line-height:1.18;letter-spacing:-.025em;margin:0 0 16px;max-width:18ch}
.svc__q::before{content:"“";display:block;font-family:var(--serif);font-size:2.6em;
  line-height:.42;color:var(--red);margin-bottom:.14em}
.svc--ask h2{font-size:clamp(1.14rem,1.9vw,1.32rem);max-width:none;color:var(--ink-soft)}
.svc--ask .svc__main{border-left:1px solid var(--line);padding-left:clamp(22px,3vw,44px)}
.svc--dark.svc--ask .svc__main{border-left-color:var(--line-dark)}
.svc--dark.svc--ask h2{color:#C9C4B7}
.svc--dark .svc__q::before{color:var(--yellow)}

@media (max-width:900px){
  .svc--lex .svc__grid,.svc--ask .svc__grid{grid-template-columns:1fr;gap:16px}
  .svc--ask .svc__main{border-left:0;padding-left:0}
  .svc__q{max-width:none}
}

/* σκούρα παραλλαγή — σπάει τον ρυθμό */
/* Το .spine είναι ήδη σε πλήρες πλάτος και οι εσωτερικές αποστάσεις τις δίνει
   το .wrap — αρνητικά περιθώρια εδώ δημιουργούσαν οριζόντια υπερχείλιση. */
/* Ίδια μεταχείριση με τις σκούρες ζώνες της αρχικής: δύο αχνά φωτεινά κέντρα
   αντί για επίπεδο μαύρο. Το overlay είναι διακοσμητικό και μένει από κάτω. */
.svc--dark{background:var(--ink);color:var(--paper);border-bottom:0;
  position:relative;overflow:hidden}
.svc--dark::before{content:"";position:absolute;inset:0;pointer-events:none;z-index:0;
  background:
    radial-gradient(110% 80% at 90% -14%, rgba(var(--glow-warm),.13), transparent 58%),
    radial-gradient(95% 75% at -6% 114%, rgba(var(--glow-eu),.26), transparent 62%);}
.svc--dark::after{content:"";position:absolute;inset:0 0 auto;height:2px;z-index:1;
  background:linear-gradient(90deg,var(--yellow) 0%,var(--yellow-2) 32%,transparent 76%)}
.svc--dark > .wrap{position:relative;z-index:2}
.svc--dark .svc__no b{color:var(--paper)}
.svc--dark .svc__no i{color:#8B8679}
.svc--dark .svc__sub{color:var(--yellow)}
.svc--dark .svc__body{color:#C9C4B7}
.svc--dark .svc__body strong{color:var(--paper)}
.svc--dark .ideal{border-color:var(--line-dark);background:rgba(255,255,255,.03)}
.svc--dark .ideal i{color:var(--yellow)}
.svc--dark .chip{border-color:var(--line-dark);color:#C9C4B7}
.svc--dark .mk{background-image:linear-gradient(var(--yellow),var(--yellow));color:var(--ink)}

/* ---------- εικόνες ----------
   Οι εικόνες της πελάτισσας έχουν κείμενο ψημένο μέσα τους (τίτλους, λίστες,
   διαγράμματα). Γι' αυτό ΔΕΝ τους επιβάλλουμε αναλογία και δεν τις κόβουμε με
   object-fit:cover — ένα crop θα έκοβε τα λόγια της. Δείχνονται ολόκληρες,
   στη φυσική τους αναλογία, και η στοίχιση προκύπτει από το πλαίσιο.

   width/height στο <img> είναι υποχρεωτικά: χωρίς αυτά ο browser δεν ξέρει
   πόσο χώρο να κρατήσει και η σελίδα αναπηδά καθώς φορτώνει (layout shift). */
.fig{margin:32px 0 0;border:1px solid var(--line);border-radius:var(--r);overflow:hidden;
  background:var(--paper-2);max-width:62ch}
.fig img{display:block;width:100%;height:auto}
.fig figcaption{border-top:1px solid var(--line);border-left:3px solid var(--yellow);
  padding:11px 16px;font-size:13.5px;line-height:1.5;color:var(--ink-mute);background:var(--paper)}

/* Πιο πλατύ από τη στήλη κειμένου — για τα infographics που θέλουν χώρο. */
.fig--wide{max-width:none}

/* Λωρίδα κάτω από τον τίτλο της σελίδας, πριν ξεκινήσουν οι υπηρεσίες. */
.fig--band{margin:0 0 clamp(28px,4vw,48px);max-width:none}

.svc--dark .fig{border-color:var(--line-dark);background:var(--ink-2)}
.svc--dark .fig figcaption{border-top-color:var(--line-dark);background:var(--ink-2);color:#A9A497}

@media (max-width:700px){
  .fig{margin-top:24px}
  .fig figcaption{font-size:12.5px;padding:9px 13px}
}

/* ---------- «Ιδανικό για» ---------- */
.ideal{margin-top:26px;border:1px solid var(--line);border-left:3px solid var(--yellow);border-radius:var(--r);
  padding:16px 20px;background:var(--paper-2);max-width:62ch}
.ideal i{display:block;font-style:normal;font-size:11.5px;letter-spacing:.16em;text-transform:uppercase;font-weight:600;color:var(--amber-ink);margin-bottom:6px}
.ideal p{font-size:16px;color:var(--ink-soft);font-weight:300}

/* ---------- chips (δεξιότητες / περιεχόμενα) ---------- */
.chips{display:flex;flex-wrap:wrap;gap:8px;margin-top:24px;max-width:62ch}
.chip{border:1px solid var(--line);border-radius:100px;padding:7px 15px;font-size:14.5px;color:var(--ink-soft);
  transition:border-color .2s var(--ease),background .2s var(--ease),transform .2s var(--ease)}
.chip:hover{border-color:var(--yellow-2);background:var(--paper-2);transform:translateY(-2px)}

/* ---------- ζώνη κοινού ---------- */
/* Απαλή διαβάθμιση αντί για ένα σκέτο κρεμ: η ζώνη «γεμίζει» καθώς κατεβαίνει
   και δεν διαβάζεται ως άδειο πλαίσιο. */
.aud{border-block:1px solid var(--line);
  background:linear-gradient(178deg, var(--paper-2) 0%, #F7F0DE 62%, var(--paper-3) 100%)}
.aud__grid{display:grid;grid-template-columns:repeat(auto-fit,minmax(238px,1fr));gap:1px;background:var(--line);
  border:1px solid var(--line);border-radius:var(--r);overflow:hidden;margin-top:clamp(30px,4vw,46px)}
.aud__cell{background:var(--paper-2);padding:clamp(22px,3vw,32px);transition:background .28s var(--ease)}
.aud__cell:hover{background:var(--paper)}
.aud__cell h3{font-size:1.16rem;letter-spacing:-.015em}
.aud__cell p{margin-top:10px;font-size:15.5px;color:var(--ink-soft);font-weight:300}
.aud__cell b{display:block;font-family:var(--sans);font-size:11.5px;letter-spacing:.16em;text-transform:uppercase;
  color:var(--red);font-weight:600;margin-bottom:12px}

/* ---------- Πρότυπο ΣΤ: ασύμμετρα πλακίδια ----------
   Η ιεραρχία βγαίνει από το μέγεθος και τον τόνο, όχι από αρίθμηση.
   Το «κύριο» κοινό παίρνει διπλό, σκούρο πλακίδιο. */
.tiles{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:16px;
  margin-top:clamp(30px,4vw,46px)}
.tile{background:var(--paper);border:1px solid var(--line);border-radius:var(--r);
  padding:clamp(22px,3vw,30px);display:flex;flex-direction:column;gap:10px;
  transition:border-color .24s var(--ease),transform .24s var(--ease)}
.tile:hover{border-color:var(--yellow-2);transform:translateY(-2px)}
.tile__mark{display:block;width:22px;height:3px;background:var(--red);flex:none}
.tile__mark--amber{background:var(--yellow-2)}
.tile__mark--ink{background:var(--ink)}
.tile h3{font-size:1.24rem;letter-spacing:-.018em;line-height:1.22}
.tile p{font-size:15px;color:var(--ink-soft);font-weight:300;line-height:1.58;max-width:52ch}
.tile .ulink{align-self:flex-start;margin-top:4px}

.tile--lead{grid-column:span 2;background:var(--ink);color:var(--paper);border-color:var(--ink);
  justify-content:space-between;gap:18px}
.tile--lead:hover{border-color:var(--yellow)}
.tile--lead .kick{font-size:11.5px;letter-spacing:.16em;text-transform:uppercase;
  font-weight:600;color:var(--yellow)}
.tile--lead h3{font-size:clamp(1.5rem,2.6vw,1.95rem);margin-top:12px}
.tile--lead p{color:#C9C4B7;font-size:15.5px;max-width:54ch;margin-top:10px}
.tile--lead .ulink{color:var(--yellow);border-color:#3A3A44}
.tile--lead .ulink:hover{border-color:var(--yellow);color:var(--yellow)}

.tile--wide{grid-column:span 2;flex-direction:row;align-items:center;gap:30px}
.tile--wide>div{flex-grow:1}
.tile--wide .ulink{flex:none;align-self:center;margin-top:0}

@media (max-width:900px){
  .tiles{grid-template-columns:1fr 1fr}
  .tile--lead,.tile--wide{grid-column:span 2}
  .tile--wide{flex-direction:column;align-items:flex-start;gap:14px}
  .tile--wide .ulink{align-self:flex-start}
}
@media (max-width:600px){
  .tiles{grid-template-columns:1fr}
  .tile--lead,.tile--wide{grid-column:span 1}
}

/* ---------- διαδρομή (βέλη) ---------- */
.path{display:flex;flex-wrap:wrap;align-items:center;gap:10px 6px;margin-top:clamp(26px,3vw,38px)}
.path span{font-family:var(--serif);font-size:clamp(1.02rem,2vw,1.34rem);font-weight:600;
  border-bottom:3px solid var(--yellow);padding-bottom:3px}
.path em{font-style:normal;color:var(--ink-mute);padding-inline:4px}

/* ---------- ερωτήσεις που σκέφτεται ο επισκέπτης ---------- */
.qs{display:grid;grid-template-columns:repeat(auto-fit,minmax(230px,1fr));gap:14px;margin-top:clamp(26px,3vw,38px)}
.qs p{border-top:2px solid var(--ink);padding-top:14px;font-family:var(--serif);font-size:1.06rem;line-height:1.36}

/* ---------- κλείσιμο ---------- */
/* Καθρεφτισμένο ως προς το .svc--dark, ώστε οι δύο σκούρες ζώνες μιας σελίδας
   να μη μοιάζουν αντίγραφο η μία της άλλης. */
.close{background:var(--ink);color:var(--paper);position:relative;overflow:hidden}
.close::before{content:"";position:absolute;inset:0;pointer-events:none;z-index:0;
  background:
    radial-gradient(100% 80% at 8% 112%, rgba(var(--glow-warm),.15), transparent 60%),
    radial-gradient(90% 70% at 94% -12%, rgba(var(--glow-eu),.24), transparent 64%);}
.close > .wrap{position:relative;z-index:2}
.close h2{font-size:clamp(1.8rem,4.2vw,2.9rem);letter-spacing:-.026em;max-width:20ch}
.close__sub{margin-top:20px;color:#C9C4B7;font-weight:300;max-width:56ch;font-size:clamp(16.5px,1.5vw,18px)}
.close__sig{margin-top:30px;font-family:var(--serif);font-size:1.16rem;color:var(--yellow)}
.close__acts{display:flex;flex-wrap:wrap;gap:14px;margin-top:32px}
/* το σκούρο κουμπί χάνεται πάνω σε σκούρο φόντο — εδώ θέλει περίγραμμα */
.close .btn--dark{background:transparent;border:1px solid #3A3A44}
.close .btn--dark:hover{background:#22222A;border-color:var(--yellow)}

/* ---------- επόμενες πόρτες ---------- */
.next{border-top:1px solid var(--line-dark);margin-top:clamp(46px,6vw,74px);padding-top:30px}
.next__h{font-size:12.5px;letter-spacing:.18em;text-transform:uppercase;font-weight:600;color:#8B8679;margin-bottom:18px}
.next__grid{display:grid;grid-template-columns:repeat(auto-fit,minmax(220px,1fr));gap:12px}
.next__grid a{text-decoration:none;border:1px solid var(--line-dark);border-radius:var(--r);padding:18px 20px;
  display:flex;justify-content:space-between;align-items:center;gap:14px;font-family:var(--serif);font-size:1.06rem;
  transition:border-color .22s var(--ease),background .22s var(--ease),transform .22s var(--ease)}
.next__grid a:hover{border-color:var(--yellow);background:rgba(255,222,89,.06);transform:translateY(-2px)}
.next__grid a span{color:var(--yellow);flex:none}

/* ============================ FOOTER ============================ */
.ftr{background:var(--ink);color:var(--paper);padding-block:clamp(48px,6vw,76px) 34px;border-top:1px solid var(--line-dark)}
.ftr__grid{display:grid;grid-template-columns:1.3fr 1fr 1fr;gap:clamp(26px,4vw,52px)}
.ftr h4{font-size:12.5px;letter-spacing:.18em;text-transform:uppercase;font-weight:600;color:var(--yellow);font-family:var(--sans);margin-bottom:16px}
.ftr ul{list-style:none;margin:0;padding:0}
.ftr li{margin-bottom:9px}
.ftr a{text-decoration:none;font-size:15.5px;color:#C9C4B7;transition:color .2s var(--ease)}
.ftr a:hover{color:var(--yellow)}
.ftr__about{font-size:15.5px;color:#A9A497;font-weight:300;max-width:38ch;margin-top:14px}
.ftr__logo img{height:88px;width:auto;border-radius:50%;background:#fff}
.ftr__btm{margin-top:36px;padding-top:22px;border-top:1px solid var(--line-dark);display:flex;flex-wrap:wrap;gap:12px 28px;justify-content:space-between;font-size:14px;color:#8B8679}
.ftr__btm a{font-size:14px}
@media (max-width:900px){.ftr__grid{grid-template-columns:1fr 1fr}}
@media (max-width:540px){.ftr__grid{grid-template-columns:1fr}}

/* ============================ ΚΙΝΗΣΗ ============================ */
.rev{opacity:0;transform:translateY(18px);transition:opacity .7s var(--ease),transform .7s var(--ease)}
.rev.in{opacity:1;transform:none}
.stag>*{opacity:0;transform:translateY(14px);transition:opacity .6s var(--ease),transform .6s var(--ease)}
.stag.in>*{opacity:1;transform:none}
.stag.in>*:nth-child(1){transition-delay:.02s}
.stag.in>*:nth-child(2){transition-delay:.08s}
.stag.in>*:nth-child(3){transition-delay:.14s}
.stag.in>*:nth-child(4){transition-delay:.20s}
.stag.in>*:nth-child(5){transition-delay:.26s}
.stag.in>*:nth-child(6){transition-delay:.32s}
.stag.in>*:nth-child(7){transition-delay:.38s}
.stag.in>*:nth-child(8){transition-delay:.44s}

@media (prefers-reduced-motion:reduce){
  html{scroll-behavior:auto}
  *{animation:none!important;transition:none!important}
  .rev,.stag>*{opacity:1;transform:none}
  .mk{background-size:100% .42em}
  .svc--dark .mk,.close .mk{background-size:100% 1.32em}
  .spine__fill{display:none}
}

.demobar{background:var(--red);color:#fff;font-size:13px;letter-spacing:.04em;text-align:center;padding:7px 16px;font-weight:500}