.elementor-kit-5{--e-global-color-primary:#0C1D22;--e-global-color-secondary:#8E430F;--e-global-color-text:#4E5D60;--e-global-color-accent:#D16D27;--e-global-color-49b6026:#F1F3F1;--e-global-color-364a765:#FFFFFF;--e-global-color-120e20c:#DBDFD9;--e-global-color-b69ea97:#EFEDE6;--e-global-color-ccd0d29:#AFC0C4;--e-global-color-5352b2e:#24B2C0;--e-global-color-cec5244:#E05C72;--e-global-color-e52310a:#8E86C8;--e-global-typography-primary-font-family:"Roboto";--e-global-typography-primary-font-weight:600;--e-global-typography-secondary-font-family:"Roboto Slab";--e-global-typography-secondary-font-weight:400;--e-global-typography-text-font-family:"Roboto";--e-global-typography-text-font-weight:400;--e-global-typography-accent-font-family:"Roboto";--e-global-typography-accent-font-weight:500;}.elementor-kit-5 e-page-transition{background-color:#FFBC7D;}.elementor-section.elementor-section-boxed > .elementor-container{max-width:1440px;}.e-con{--container-max-width:1440px;}.elementor-widget:not(:last-child){--kit-widget-spacing:20px;}.elementor-element{--widgets-spacing:20px 20px;--widgets-spacing-row:20px;--widgets-spacing-column:20px;}{}h1.entry-title{display:var(--page-title-display);}.site-header .site-branding{flex-direction:column;align-items:stretch;}.site-header{padding-inline-end:0px;padding-inline-start:0px;}.site-footer .site-branding{flex-direction:column;align-items:stretch;}@media(max-width:1024px){.elementor-section.elementor-section-boxed > .elementor-container{max-width:1024px;}.e-con{--container-max-width:1024px;}}@media(max-width:767px){.elementor-section.elementor-section-boxed > .elementor-container{max-width:767px;}.e-con{--container-max-width:767px;}}/* Start custom CSS *//* ==========================================================================
   MIRANANDA . ΤΟ ΕΝΑ ΣΤΥΛ ΓΙΑ ΟΛΟ ΤΟ SITE
   Elementor > Site Settings > Custom CSS. Μπαίνει ΜΙΑ φορα, στο τελος.
   ΠΟΤΕ μεσα σε widget: το CSS ενος widget πιανει ολη τη σελιδα.
   Ολα ζουν κατω απο .mrn, ωστε να μην πειραξουν το theme.
   Πλατος 1440 (αποφαση D39, αντικαθιστα το 1280).
   ========================================================================== */
.mrn *{box-sizing:border-box}
body{margin:0;font-family:var(--ff);color:var(--ink);line-height:1.66;-webkit-font-smoothing:antialiased;
  background:transparent;position:relative;overflow-x:hidden}
.mrn img{max-width:100%;display:block}
.mrn a{color:inherit;text-decoration:none}
.mrn .wrap{width:100%;max-width:1440px;margin:0 auto;padding-left:var(--pad);padding-right:var(--pad)}
.mrn .kicker{font-size:.7rem;font-weight:600;letter-spacing:.24em;color:var(--deep-acc)}
.mrn .d1{font-weight:700;font-size:clamp(2.9rem,7.4vw,6.2rem);line-height:1.04;letter-spacing:-.052em}
.mrn .d2{font-weight:700;font-size:clamp(2rem,4.6vw,3.8rem);line-height:1.08;letter-spacing:-.046em}
.mrn .d3{font-weight:600;font-size:clamp(1.16rem,1.9vw,1.5rem);line-height:1.26;letter-spacing:-.032em}
.mrn .lead{font-size:clamp(1.04rem,1.4vw,1.2rem);line-height:1.72;color:var(--muted);font-weight:300;max-width:44ch}
.mrn .btn:hover{background:var(--acc-d)}
/* ΔΥΟ κλασεις μαζι, ωστε να ΜΗΝ εξαρταται απο τη σειρα των κανονων.
   Μετρημενο: το .btn--light εχανε απο το .btn και το κουμπι εβγαινε
   πορτοκαλι με λευκα γραμματα, οποτε στο hover γινοταν λευκο σε λευκο
   και εξαφανιζοταν. Κωστας, 10 Σεπ. */
.mrn .btn.btn--light{background:var(--bone);color:var(--ink)}
/* ΚΑΙ το χρωμα, οχι μονο το φοντο. Κωστας, 10 Σεπ: «on hover makes the
   button completly white». Οταν για οποιονδηποτε λογο δεν περασει η
   βαση, το hover εδινε ΛΕΥΚΟ πανω σε ΛΕΥΚΟ και το κουμπι εξαφανιζοταν.
   Τωρα το γραμμα ειναι παντα σκουρο, ο,τι κι αν γινει με τη βαση. */
.mrn .btn.btn--light, .mrn .btn.btn--light:hover{color:var(--ink)}
.mrn .btn.btn--light:hover{background:#fff}
.mrn .hdr::after{content:"";position:absolute;left:0;right:0;bottom:0;height:1px;background:transparent;
  transition:background .25s ease}
.mrn .hdr.is-stuck::after{background:var(--line)}
.mrn .hdr__in{display:grid;grid-template-columns:auto 1fr auto;align-items:center;
  gap:clamp(18px,3vw,48px);min-height:96px;padding-top:16px;padding-bottom:16px}
.mrn .brand{flex:none;display:inline-flex;align-items:center}
.mrn .brand img{height:clamp(42px,4.2vw,56px);width:auto}
.mrn .nav{justify-self:center;display:flex;align-items:center;gap:clamp(16px,2.4vw,40px)}
.mrn .nav a:hover{color:var(--ink)}
.mrn .nav a:hover::after, .mrn .nav a[aria-current="page"]::after{transform:scaleX(1)}
.mrn .hdr .btn{justify-self:end;font-size:.72rem;font-weight:600;letter-spacing:.14em;padding:16px 26px}
.mrn .ftr__in{display:grid;grid-template-columns:minmax(0,1.3fr) minmax(0,1fr) minmax(0,1fr);
  gap:clamp(30px,5vw,90px);padding:clamp(64px,7vw,110px) 0 clamp(44px,5vw,70px)}
.mrn .ftr__logo{height:56px;width:auto;filter:brightness(0) saturate(100%) invert(84%) sepia(9%)
  saturate(400%) hue-rotate(340deg) brightness(103%) contrast(94%)}
.mrn .ftr__who{margin-top:22px;font-size:1.02rem;font-weight:500;letter-spacing:-.02em}
.mrn .ftr__where{margin-top:8px;font-size:.96rem;color:var(--bone-mute);font-weight:300;max-width:26ch}
.mrn .ftr h3{font-size:.72rem;font-weight:600;letter-spacing:.22em;
  color:#E39A5C;margin-bottom:22px}
.mrn .ftr li{margin-bottom:14px}
.mrn .ftr li a, .mrn .ftr li span{font-size:1rem;color:var(--bone);font-weight:300;position:relative}
.mrn .ftr li a::after{content:"";position:absolute;left:0;right:0;bottom:-3px;height:1px;
  background:rgba(245,240,232,.5);transform:scaleX(0);transform-origin:left;transition:transform .22s ease}
.mrn .ftr li a:hover::after{transform:scaleX(1)}
.mrn .ftr__bar{border-top:1px solid rgba(245,240,232,.16);padding:26px 0 34px;
  display:flex;flex-wrap:wrap;gap:14px clamp(16px,2.4vw,34px);align-items:center;
  font-size:.88rem;color:var(--bone-mute);font-weight:300}
.mrn .ftr__bar a{color:var(--bone-mute);position:relative}
.mrn .ftr__bar a:hover{color:var(--bone)}
.mrn .ftr__bar .sep{opacity:.4}
.mrn .ftr__legal{margin-left:auto;display:flex;flex-wrap:wrap;gap:14px clamp(16px,2.4vw,30px)}
.mrn .ftr__by{display:inline-flex;align-items:center;gap:6px;
  padding-left:clamp(16px,2.4vw,30px);border-left:1px solid rgba(245,240,232,.16)}
.mrn .ftr__by a{color:var(--bone);font-weight:500}
.mrn .ftr__by a:hover{color:#E39A5C}
.mrn .ftr__heart{color:#D0552A;font-size:1rem;line-height:1}
@media (max-width:1180px){.mrn .nav{gap:clamp(12px,1.8vw,24px)}.mrn .nav a{font-size:.68rem;letter-spacing:.12em}.mrn .hdr .btn{padding:15px 20px;font-size:.68rem}}
/* ══════════════════════════════════════════════════════════════════════════
   ΚΙΝΗΤΟ. D55, Κώστας 9 Σεπ: «You optimize the whole website for mobile.»
   Το πρόβλημα, μετρημένο στα 375px: τα πέντε links του μενού έσπαγαν σε ΤΡΕΙΣ
   σειρές και το header έπιανε 233px, το 29% της οθόνης. Ο τίτλος της σελίδας
   ξεκινούσε στα 328px, δηλαδή κάτω από το ένα τρίτο.
   Η λύση: κάτω από 900px τα links μπαίνουν πίσω από ένα κουμπί. Το header
   πέφτει στα 64px. Το κουμπί κλήσης πάει ΜΕΣΑ στο ανοιγμένο μενού.
   ══════════════════════════════════════════════════════════════════════════ */
/* Το κουμπί μέσα στο μενού υπάρχει ΜΟΝΟ στο κινητό. Σε μεγάλη οθόνη το
   κουμπί είναι ήδη δεξιά στο header, και φαινόταν δύο φορές. */
.mrn .nav__cta{display:none}
.mrn .burger{display:none;width:44px;height:44px;border:0;border-radius:10px;cursor:pointer;
  background:transparent;padding:0;place-items:center;justify-self:end;
  font-family:var(--ff);color:currentColor}
.mrn .burger span{display:block;width:22px;height:1.6px;background:currentColor;border-radius:2px;
  position:relative;transition:transform .25s ease,background .1s ease}
.mrn .burger span::before, .mrn .burger span::after{content:"";position:absolute;left:0;width:22px;
  height:1.6px;background:currentColor;border-radius:2px;transition:transform .25s ease}
.mrn .burger span::before{top:-7px}
.mrn .burger span::after{top:7px}
.mrn .hdr.is-open .burger span{background:transparent}
.mrn .hdr.is-open .burger span::before{transform:translateY(7px) rotate(45deg)}
.mrn .hdr.is-open .burger span::after{transform:translateY(-7px) rotate(-45deg)}
@media (max-width:560px){.mrn .d1, .mrn .hero__h1{font-size:clamp(2.05rem,10.2vw,2.7rem);line-height:1.02;letter-spacing:-.035em}.mrn .d2{font-size:clamp(1.65rem,7.6vw,2.2rem);line-height:1.06;letter-spacing:-.034em}.mrn .d3{font-size:1.14rem}.mrn .lead, .mrn .hero__sub{font-size:1rem;line-height:1.62}/* τα κείμενα δεν στριμώχνονται στην άκρη της οθόνης */
  :root{--pad:20px}/* πίνακες και ό,τι φαρδύ κυλά μέσα στο κουτί του, ποτέ όλη η σελίδα */
  .mrn table{min-width:520px}}
/* ══ ΚΑΡΤΕΣ ΣΤΗΝ ΙΔΙΑ ΣΕΙΡΑ: ΙΔΙΟ ΥΨΟΣ, ΙΔΙΑ ΓΡΑΜΜΗ ═══════════════════════
   Κωστας, 10 Σεπ: «this sections in most of the pages are inbalanced», με
   φωτογραφια απο το Elementor οπου η δεξια στηλη καθεται πιο χαμηλα.
   Στα δικα μας αρχεια μετρηθηκαν ΕΥΘΥΓΡΑΜΜΙΣΜΕΝΕΣ στα 1440, 1200 και 1024.
   Αρα κατι στο Elementor αλλαζει το πλαισιο: τα container του ειναι flex και
   οι καρτες σταματουν να τεντωνονται.
   Κανονας του σπιτιου: «Cards in one row: height:100% on the card».
   Αυτο κρατα και σε grid ΚΑΙ σε flex, οποτε δουλευει και στις δυο περιπτωσεις. */
/* Με !important επιτηδες. Το Elementor και το θεμα βαζουν δικα τους flex
   και οι καρτες σταματουν να τεντωνονται. Η επιδραση ειναι αυστηρα μεσα
   στο .mrn. Κωστας, 10 Σεπ, δευτερη φορα: «it hasnt been fixed». */
.mrn .grid7, .mrn .duo, .mrn .ways, .mrn .stack, .mrn .says, .mrn .cards{display:grid !important;align-items:stretch !important}
.mrn .grid7{grid-template-columns:repeat(2,minmax(0,1fr)) !important}
.mrn .grid7>article, .mrn .duo>article, .mrn .ways>.way, .mrn .stack>article, .mrn .says>.say, .mrn .cards>article{
  height:100% !important;align-self:stretch !important;margin:0 !important}
/* Η κλιση στις τρεις καρτες μενει, ειναι μερος του σχεδιου, αλλα δεν
   μετακινει πια καθετα ωστε να μη χαλαει η γραμμη. */
.mrn .stack>article:nth-child(2){transform:translateY(0)}
/* ══ ΚΑΜΙΑ ΚΟΥΚΚΙΔΑ ΣΕ ΚΑΜΙΑ ΔΙΚΗ ΜΑΣ ΛΙΣΤΑ ═══════════════════════════════
   Κωστας, 10 Σεπ, με φωτογραφια του footer γεματο κουκκιδες.
   ΑΙΤΙΑ, μετρημενη: το κοινο CSS ΔΕΝ ΕΙΧΕ ΚΑΜΙΑ γραμμη list-style. Το βασικο
   reset των λιστων δεν ηταν ΑΚΡΙΒΩΣ ιδιο σε ολες τις σελιδες, οποτε η
   γεννητρια το θεωρησε «μη κοινο» και το πεταξε ολοκληρο. Ετσι τις λιστες τις
   ανελαβε το θεμα του WordPress και εβαλε κουκκιδες.
   ΠΡΟΣΟΧΗ: κανενα αγκυλο σε αυτο το σχολιο. Ο τεμαχιστης CSS νομιζει οτι ειναι
   κανονας, σπαει το σχολιο στη μεση, και ο επομενος κανονας χανει το .mrn.
   Το επαθα ακριβως εδω.
   Το !important ειναι επιτηδες: παλευουμε με CSS τριτου, και η επιδραση ειναι
   αυστηρα μεσα στο .mrn. */
.mrn ul, .mrn ol{list-style:none !important;padding-left:0;margin-left:0}
.mrn li{list-style:none !important}
.mrn li::marker{content:""}
/* ══ ΚΑΜΙΑ ΚΑΡΤΑ ΔΕΝ ΜΕΤΑΚΙΝΕΙΤΑΙ ΠΟΤΕ. ΕΓΓΥΗΣΗ. ═════════════════════════════
   Κωστας, 10 Σεπ: «The problem should not be present in any formation.»
   ΤΟ ΠΡΑΓΜΑΤΙΚΟ ΛΑΘΟΣ, μετρημενο ΣΤΟ ΖΩΝΤΑΝΟ SITE στα 1920, 1600 και 1366:
   transform matrix(1,0,0,1,0,30) πανω στις καρτες. Δηλαδη ειχαν μεινει
   κολλημενες 30px πιο κατω, απο ενα gsap.from(...y:30) που δεν τελειωσε ποτε.
   Γι' αυτο η δεξια στηλη φαινοταν χαμηλοτερα.
   Τα reveals ΑΦΑΙΡΕΘΗΚΑΝ. Αυτο εδω ειναι η ΔΕΥΤΕΡΗ γραμμη αμυνας: ακομη κι αν
   καποιο script ξαναβαλει transform, η καρτα ΔΕΝ κουνιεται. Το hover ζει.
   Και αν δεν τρεξει καθολου JavaScript, ολα ειναι ηδη στη θεση τους. */
.mrn .grid7>article:not(:hover), .mrn .duo>article:not(:hover), .mrn .ways>.way:not(:hover), .mrn .stack>article:not(:hover), .mrn .says>.say:not(:hover), .mrn .cards>article:not(:hover), .mrn .mosaic figure:not(:hover), .mrn .voices .v:not(:hover), .mrn .ev__row, .mrn .four li, .mrn .track>.card:not(:hover){transform:none !important}
/* Και ποτε αορατο: αν μια κινηση παγωσει στο 0, το περιεχομενο χανεται. */
.mrn .grid7>article, .mrn .duo>article, .mrn .ways>.way, .mrn .stack>article, .mrn .says>.say, .mrn .cards>article, .mrn .mosaic figure, .mrn .voices .v, .mrn .ev__row, .mrn .four li, .mrn .track>.card{opacity:1 !important}

/* ---- ΚΕΛΥΦΟΣ: header, footer, μενου κινητου. Τα widget NAV και FOOTER
        ζουν αποκλειστικα πανω σε αυτο, δεν εχουν δικο τους style. ---- */
/* ============================================================================
   MIRANANDA V5 · ΑΡΧΙΚΗ
   Χρώμα, γραμματοσειρά, πλάτος, κουμπιά: από τη σελίδα «Νιώσε Καλύτερα Κάθε
   Μέρα» που κλείδωσε ο Κώστας (D35). Header και footer: D40.
   ΟΜΩΣ Η ΔΟΜΗ ΕΙΝΑΙ ΔΙΚΗ ΤΗΣ. Η αρχική δεν πουλάει το πρόγραμμα, το δείχνει.
   Δεν έχει: το πλάγιο ραφάκι των πέντε ενοτήτων, την τιμή σε ολόκληρη οθόνη,
   το μωσαϊκό των επτά, τις κριτικές σε τρεις στήλες, τη μεγάλη λίστα ερωτήσεων.
   Ολα αυτά ζουν στη σελίδα «Το Πρόγραμμα».
   ΤΟ HERO ΕΙΝΑΙ ΤΟ ΠΑΛΙΟ HERO ΤΗΣ ΑΡΧΙΚΗΣ, όπως ήταν: ζώνη με το χρώμα της
   ώρας, blooms από πίσω, οι τέσσερις επιλογές, το τόξο της ημέρας και η
   γυάλινη λωρίδα με το σήμα RYT 500. Το μηχανάκι ΔΕΝ ΑΛΛΑΞΕ. D37.
   ========================================================================== */
:root{
  --brand:#D06820; --acc:#B85713; --acc-d:#8F410B; --deep-acc:#9C4A12;
  --paper:#F7F3ED; --cream:#FAEFE1; --sand:#F0E8DC;
  --ink:#1D1B19; --muted:#6E665C; --line:#E2D7C6;
  --deep:#2B211A; --bone:#F5F0E8; --bone-mute:#A79C90;
  --ff:"Geologica",-apple-system,BlinkMacSystemFont,"Segoe UI",Roboto,sans-serif;
  --pad:clamp(18px,4.4vw,80px);
  --r:25px;
  /* Το τετράωρο σύστημα. Δικό μας, μόνο εδώ. D37. */
  --h07:#D16D27; --h07d:#9A4A14; --h07a:#FBF4EA; --h07b:#F4E4CD;
  --h12:#24B2C0; --h12d:#0A6F7B; --h12a:#EEF7F8; --h12b:#D7EDF1;
  --h19:#E05C72; --h19d:#A8283F; --h19a:#FDF1EF; --h19b:#F6DEDA;
  --h22:#8E86C8; --h22d:#B9B2E4; --h22a:#0B1A20; --h22b:#1D2E40;
  --acc-hour:var(--h07); --acc-hour-solid:var(--h07);
}
/* ΕΝΑ φόντο για όλο το site, καρφωμένο στο html. D32. */
html{
  background:
    radial-gradient(760px circle at 8% 12%,#F4E4CD 0%,rgba(244,228,205,0) 55%),
    radial-gradient(720px circle at 94% 22%,#D7EDF1 0%,rgba(215,237,241,0) 55%),
    radial-gradient(880px circle at 22% 92%,#F6DEDA 0%,rgba(246,222,218,0) 58%),
    linear-gradient(180deg,#F7F3ED 0%,#F3F1EC 42%,#F8F3EA 70%,#F2F1EB 100%);
  background-attachment:fixed;background-repeat:no-repeat;min-height:100%;
}
.mrn h1, .mrn h2, .mrn h3, .mrn p, .mrn ul, .mrn li, .mrn figure, .mrn blockquote{margin:0}
.mrn ul{padding:0;list-style:none}
.mrn .sec{padding-top:clamp(80px,10vw,150px);padding-bottom:clamp(80px,10vw,150px)}
.mrn .btn{display:inline-flex;align-items:center;justify-content:center;gap:12px;
  padding:19px 34px;border:0;border-radius:8px;cursor:pointer;
  font-family:var(--ff);font-weight:500;font-size:1.02rem;line-height:1;letter-spacing:-.01em;
  background:var(--acc);color:#fff;transition:background .18s ease}
/* ── ΤΟ ΜΕΝΟΥ. Κλειδωμένο σχήμα, D40: sticky, διάφανο στην κορυφή ώστε να
   φαίνεται η φωτογραφία, γυαλί και λεπτή γραμμή μόλις κατεβείς.
   Στην κορυφή τα γράμματα είναι ανοιχτά, γιατί από κάτω τους είναι η φωτογραφία. */
.mrn .hdr{position:sticky;top:0;z-index:50;transition:background .25s ease;
  color:var(--bone)}
.mrn .hdr.is-stuck{background:rgba(247,243,237,.86);color:var(--ink);
  -webkit-backdrop-filter:blur(16px) saturate(150%);backdrop-filter:blur(16px) saturate(150%)}
/* Στην κορυφή το λογότυπο κάθεται σε σκούρα φωτογραφία, άρα γίνεται ανοιχτό. */
/* ΤΟ ΛΕΥΚΟ ΛΟΓΟΤΥΠΟ ΜΟΝΟ ΠΑΝΩ ΣΤΗ ΦΩΤΟΓΡΑΦΙΑ. Κώστας, 10 Σεπ:
   «The logo on the header when its not on the homepage its white so nobody can
   see it.» Ειχε δικιο, και τα links ειχαν το ιδιο προβλημα.
   Ο κανονας ισχυε παντου επειδη το header ειναι ΚΟΙΝΟ. Τωρα κλειδωνει πισω απο
   την κλαση hdr--photo, που τη βαζει η JavaScript ΜΟΝΟ οταν η σελιδα εχει τη
   σκουρα ζωνη .top, δηλαδη μονο στην αρχικη. */
.mrn .brand img{transition:filter .25s ease}
.mrn .hdr--photo:not(.is-stuck) .brand img{filter:brightness(0) saturate(100%) invert(97%)
  sepia(6%) saturate(220%) hue-rotate(340deg) brightness(104%) contrast(96%)}
/* Τα links: ΣΚΟΥΡΑ παντου. Ανοιχτα ΜΟΝΟ πανω στη φωτογραφια της αρχικης. */
.mrn .nav a{font-size:.72rem;font-weight:600;letter-spacing:.16em;
  color:var(--muted);padding:12px 0;position:relative;transition:color .2s ease}
.mrn .hdr--photo:not(.is-stuck) .nav a{color:var(--bone-mute)}
.mrn .hdr--photo:not(.is-stuck) .nav a:hover{color:var(--bone)}
.mrn .nav a::after{content:"";position:absolute;left:0;right:0;bottom:4px;height:1px;
  background:var(--acc-hour);transform:scaleX(0);transform-origin:left;transition:transform .22s ease}
/* ── FOOTER, αντιγραφή από header-footer.html. D40. ───────────────────────── */
.mrn .ftr{background:var(--deep);color:var(--bone)}
@media (max-width:1180px){.mrn .nav{gap:clamp(12px,1.8vw,24px)}.mrn .nav a{font-size:.68rem;letter-spacing:.12em}.mrn .hdr .btn{padding:15px 20px;font-size:.68rem}}
@media (max-width:900px){.mrn .nav{grid-column:1 / -1;justify-self:stretch;order:3;flex-wrap:wrap;gap:8px 20px;
    padding:14px 0 4px;border-top:1px solid rgba(239,237,230,.18)}.mrn .hdr.is-stuck .nav{border-top-color:var(--line)}}
@media (max-width:900px){.mrn .brand img{height:38px}.mrn .burger{display:grid}.mrn .hdr .btn{display:none}/* τα links πέφτουν σε ένα πάνελ που ανοίγει, όχι σε τρεις σειρές */
  .mrn .nav{position:absolute;left:0;right:0;top:100%;z-index:60;
    display:grid;gap:0;justify-self:stretch;order:0;
    background:rgba(247,243,237,.98);
    -webkit-backdrop-filter:blur(16px) saturate(150%);backdrop-filter:blur(16px) saturate(150%);
    border-top:1px solid var(--line);border-bottom:1px solid var(--line);
    padding:4px clamp(18px,4.4vw,80px) 20px;
    max-height:0;overflow:hidden;visibility:hidden;
    transition:max-height .3s ease,visibility .3s ease}.mrn .hdr.is-open .nav{max-height:80vh;overflow:auto;visibility:visible}.mrn .nav a{font-size:.8rem;letter-spacing:.13em;padding:16px 0;color:var(--ink);
    border-bottom:1px solid var(--line)}.mrn .nav a::after{display:none}.mrn .nav a[aria-current="page"]{color:var(--acc)}/* λίγο αέρα λιγότερο παντού, ώστε να χωράει περισσότερο περιεχόμενο */
  .mrn .sec{padding-top:clamp(56px,13vw,80px);padding-bottom:clamp(56px,13vw,80px)}}
@media (max-width:560px){.mrn .d1, .mrn .hero__h1{font-size:clamp(2.05rem,10.2vw,2.7rem);line-height:1.02;letter-spacing:-.035em}.mrn .d2{font-size:clamp(1.65rem,7.6vw,2.2rem);line-height:1.06;letter-spacing:-.034em}.mrn .d3{font-size:1.14rem}.mrn .lead, .mrn .hero__sub{font-size:1rem;line-height:1.62}/* τα κείμενα δεν στριμώχνονται στην άκρη της οθόνης */
  :root{--pad:20px}}

/* Το .mrn δεν βαφει ποτε. Απο κατω του περναει το ενα φοντο του site (D32). */
.mrn{background:transparent}/* End custom CSS */