/* οι <img> παίρνουν width/height (κατά του CLS)· χωρίς αυτό, όπου το CSS ορίζει μόνο πλάτος θα τεντώνονταν */
img{height:auto}
/* Demo δομής. Κανόνας: ΠΟΤΕ text-transform:uppercase (ελληνικοί τόνοι). Τα κεφαλαία γράφονται στο κείμενο.
   Ρευστό σύστημα: 1rem = 10px στο πλάτος αναφοράς κάθε ζώνης (375 / 768 / 1920) και κλιμακώνεται με την οθόνη. */
:root{
  /* Corporate παλέτα από το λογότυπο (18/09: ο Βασίλης απέρριψε λαχανί/ροζ/πορτοκαλί)
     μπλε Verticom #0018FE · γκρι λογοτύπου #3A3A3B · ναυτικό για σκούρες ενότητες · ψυχρά ανοιχτά */
  --black:#0b1233; --ink:#070b22; --cream:#f4f6fb; --lime:#9fb0ff; --purple:#0018fe;
  --logo-ink:#3a3a3b; --lilac:#e6ebff; --blue:#eef1f7; --orange:#d7defa; --muted:rgba(11,18,51,.62);
  --ice:#e6ebff; --steel:#c9d3ee;
  --gx:1.6rem;
  --sans:"Inter Tight",system-ui,Arial,sans-serif;
  --serif:"Inter Tight",system-ui,Arial,sans-serif; /* ΜΙΑ οικογένεια παντού (18/09: η σέριφ «παλιακή») */
  --eo4:cubic-bezier(.165,.84,.44,1); --eio4:cubic-bezier(.76,0,.24,1); --eo3:cubic-bezier(.33,1,.68,1);
}
html{font-size:2.6666667vw;-webkit-text-size-adjust:100%}
@media (min-width:768px){html{font-size:1.3020833vw}:root{--gx:2.4rem}}
@media (min-width:1200px){html{font-size:.5208333vw}:root{--gx:3.2rem}}

*,*::before,*::after{box-sizing:border-box}
body{margin:0;background:var(--cream);color:var(--black);font-family:var(--sans);font-size:1.6rem;line-height:1.5;overflow-x:clip;-webkit-font-smoothing:antialiased}
@media (min-width:1200px){body{font-size:1.8rem}}
body.is-loading{overflow:hidden}
img,video{display:block;max-width:100%}
a{color:inherit;text-decoration:none}
button{font:inherit;color:inherit;background:none;border:0;padding:0;cursor:pointer}
h1,h2,h3,h4,p{margin:0}
h1,h2,h3{font-weight:400;letter-spacing:-.02em;line-height:1.05}
:focus-visible{outline:2px solid var(--purple);outline-offset:3px}
html.lenis,html.lenis body{height:auto}
.lenis.lenis-smooth{scroll-behavior:auto!important}

/* ---------- κοινά ---------- */
.split .ln{overflow:hidden;padding-bottom:.06em;margin-bottom:-.06em}
.flip{display:inline-grid;overflow:hidden;line-height:1.2;height:1.2em}
.flip>span{grid-area:1/1;transition:transform .5s var(--eo4)}
.flip>span+span{transform:translateY(110%)}
/* Το κύλισμα στο πέρασμα του ποντικιού είναι ΔΙΑΚΟΣΜΗΣΗ: η flip() του boot.php βάζει την ΙΔΙΑ λέξη
   δύο φορές, οπότε κυλάει και φαίνεται ίδια. Όπου όμως οι δύο λέξεις είναι ΔΙΑΦΟΡΕΤΙΚΕΣ και δείχνουν
   κατάσταση (αναπαραγωγή/παύση, ήχος, μενού) μπαίνει .flip--state: εκεί το hover ΔΕΝ τις αλλάζει.
   Πριν (ως 05/10/2026) το ίδιο εφέ εξυπηρετούσε και τα δύο, οπότε κάθε φορά που ακουμπούσες το
   κουμπί σου έδειχνε την ΑΝΤΙΘΕΤΗ κατάσταση από την πραγματική. */
a:hover>.flip:not(.flip--state)>span:first-child,button:hover>.flip:not(.flip--state)>span:first-child,.ct:hover .flip:not(.flip--state)>span:first-child{transform:translateY(-110%)}
a:hover>.flip:not(.flip--state)>span+span,button:hover>.flip:not(.flip--state)>span+span,.ct:hover .flip:not(.flip--state)>span+span{transform:none}
.is-open .flip>span:first-child{transform:translateY(-110%)!important}
.is-open .flip>span+span{transform:none!important}

.btn{display:inline-flex;align-items:center;min-height:4.4rem;padding:0 2.2rem;border-radius:2.2rem;font-size:1.3rem;font-weight:600;letter-spacing:.06em;transition:background .4s var(--eo3),color .4s var(--eo3)}
@media (min-width:1200px){.btn{min-height:5.2rem;padding:0 2.8rem;border-radius:2.6rem;font-size:1.5rem}}
.btn--lime{background:var(--lime);color:var(--black)}
.btn--lime:hover,.ct:hover .btn--lime{background:#fff}
.btn--dark{background:var(--black);color:var(--cream)}
.btn--dark:hover{background:var(--purple)}
.btn--light{background:var(--cream);color:var(--black)}
.ct:hover .btn--light{background:var(--lime)}

.tag,.tags span{display:inline-flex;align-items:center;height:2.8rem;padding:0 1.2rem;border-radius:1.4rem;font-size:1.1rem;font-weight:600;letter-spacing:.08em;background:rgba(243,239,235,.18);color:#fff;backdrop-filter:blur(8px);-webkit-backdrop-filter:blur(8px)}
@media (min-width:1200px){.tag,.tags span{height:3.2rem;padding:0 1.6rem;font-size:1.3rem;border-radius:1.6rem}}
.tags{display:flex;flex-wrap:wrap;gap:.8rem}
.tags--dark span{background:rgba(30,30,30,.08);color:var(--black);backdrop-filter:none}

.link{position:relative;display:inline-block;font-weight:600;font-size:1.5rem;padding-bottom:.3rem}
.link::after{content:"";position:absolute;left:0;right:0;bottom:0;height:1px;background:currentColor;transform-origin:right;transition:transform .6s var(--eio4)}
.link:hover::after{transform:scaleX(0);transform-origin:left}
@media (min-width:1200px){.link{font-size:1.8rem}}

.arrow{width:4.4rem;height:4.4rem;border-radius:50%;background:var(--lime);color:var(--black);font-size:1.8rem;display:grid;place-items:center;transition:transform .4s var(--eo4),background .3s}
.arrow:hover{transform:scale(1.08);background:#fff}
.arrow--dark{background:var(--black);color:var(--cream)}
.arrow--dark:hover{background:var(--purple);color:#fff}
@media (min-width:1200px){.arrow{width:5.6rem;height:5.6rem;font-size:2rem}}

.eyebrow{font-size:1.3rem;font-weight:600;letter-spacing:.06em;color:var(--muted)}
@media (min-width:1200px){.eyebrow{font-size:1.6rem}}

/* ---------- προφόρτωση ---------- */
.pre{position:fixed;inset:0;z-index:100;background:var(--cream);display:grid;place-items:center}
.pre-logo{width:16rem;overflow:hidden}.pre-logo .vlogo{display:block;width:100%;height:auto}
.pre-num{position:absolute;right:var(--gx);bottom:var(--gx);font-weight:300;font-size:6rem;line-height:1;overflow:hidden}
@media (min-width:1200px){.pre-logo{width:26rem}.pre-num{font-size:12rem}}

/* ---------- κεφαλίδα ---------- */
.hd{position:fixed;inset:0 0 auto;z-index:60;display:flex;align-items:center;justify-content:space-between;padding:1.2rem var(--gx);pointer-events:none}
.hd>*{pointer-events:auto}
@media (min-width:1200px){.hd{padding:2.4rem var(--gx)}}
.pill{display:inline-flex;align-items:center;gap:1rem;height:4.4rem;padding:0 1.8rem;border-radius:2.2rem;background:var(--lime);color:var(--black);font-size:1.3rem;font-weight:700;letter-spacing:.08em;transition:background .3s}
.pill:hover{background:#fff}
@media (min-width:1200px){.pill{height:5.2rem;padding:0 2.4rem;border-radius:2.6rem;font-size:1.5rem}}
.burger{display:grid;gap:.4rem;width:1.6rem}
.burger i{display:block;height:2px;background:currentColor;transition:transform .5s var(--eo4)}
.is-open .burger i:first-child{transform:translateY(.3rem) rotate(45deg)}
.is-open .burger i:last-child{transform:translateY(-.3rem) rotate(-45deg)}
.hd-logo{position:fixed;z-index:61;top:1.9rem;left:50%;width:13rem;line-height:0}
.hd-logo .vlogo{display:block;width:100%;height:auto}
@media (min-width:1200px){.hd-logo{width:19rem;top:3.2rem}}
.hd.pill-dark .pill{background:var(--black);color:var(--lime)}
.hd.pill-dark .pill:hover{background:var(--purple);color:#fff}
.pill{transition:background .4s,color .4s}
.pill--quote{display:none}
@media (max-width:767px){.hd{justify-content:flex-end}.hd-logo{left:var(--gx);top:2.2rem;width:12rem}}
@media (min-width:768px){.pill--quote{display:inline-flex}}

/* ---------- μενού ---------- */
.ov{position:fixed;inset:0;z-index:55;background:var(--black);color:var(--cream);clip-path:inset(0 0 100% 0);visibility:hidden;overflow-y:auto;overscroll-behavior:contain}
.ov-in{min-height:100%;display:grid;gap:4rem;padding:8.8rem var(--gx) 4rem}
@media (min-width:1200px){.ov-in{grid-template-columns:1.2fr 1fr;align-items:end;padding:14rem var(--gx) 6rem;gap:8rem}}
.ov-tiles{display:grid;gap:1.2rem}
@media (min-width:768px){.ov-tiles{grid-template-columns:1fr 1fr}}
.tile{position:relative;display:flex;flex-direction:column;gap:1.2rem;min-height:22rem;padding:2rem;border-radius:1.6rem;color:var(--black);overflow:hidden}
.tile--lime{background:var(--lime)}.tile--purple{background:var(--lilac)}
.tile .tag{background:rgba(30,30,30,.1);color:var(--black);backdrop-filter:none;align-self:flex-start}
.tile strong{font-family:var(--serif);font-weight:300;font-size:3rem;line-height:1.05;letter-spacing:-.02em;margin-top:auto}
.tile-p{font-size:1.4rem;color:rgba(30,30,30,.7);max-width:34ch}
.tile-go{position:absolute;right:2rem;top:2rem;font-size:2.4rem;transition:transform .5s var(--eo4)}
.tile:hover .tile-go{transform:translateX(.6rem) rotate(-45deg)}
@media (min-width:1200px){.tile{min-height:44rem;padding:3.2rem;border-radius:2.4rem}.tile strong{font-size:5.2rem}.tile-p{font-size:1.8rem}.tile-go{right:3.2rem;top:3.2rem;font-size:3.2rem}}
.ov-nav{display:flex;flex-direction:column}
.ov-nav a{font-family:var(--serif);font-weight:300;font-size:4rem;line-height:1.15;letter-spacing:-.02em;overflow:hidden;display:block;transition:color .3s,padding .5s var(--eo4)}
.ov-nav a:hover{color:var(--lime);padding-left:1.6rem}
@media (min-width:1200px){.ov-nav a{font-size:7.2rem}}

/* ---------- 1. hero ---------- */
.hero{position:relative;height:100vh;height:100svh;min-height:56rem;overflow:hidden;background:var(--cream)}
.hero-word{position:absolute;left:0;right:0;bottom:-.02em;padding:0 var(--gx);font-weight:700;line-height:.8;letter-spacing:-.04em;white-space:nowrap;text-align:center;pointer-events:none}
.hero-word .hw{display:inline-block}
.hero-word--base{color:#e7e1da}
.hero-word--lit{color:var(--cream)}
.lit-layer{position:absolute;inset:0;z-index:2;clip-path:polygon(50% 50%,50% 50%,50% 50%,50% 50%,50% 50%,50% 50%)}
.beam{position:absolute;inset:0;background:var(--purple);z-index:1;clip-path:polygon(50% 50%,50% 50%,50% 50%,50% 50%,50% 50%,50% 50%)}
.hero-ui{position:absolute;inset:0;z-index:3;display:grid;grid-template-rows:auto 1fr auto;padding:8.4rem var(--gx) 0;pointer-events:none}
.hero-ui a,.hero-ui button{pointer-events:auto}
.hero-copy{max-width:32rem}
.hero-h{position:relative;display:grid;font-family:var(--serif);font-weight:300;font-size:4.2rem;line-height:1;letter-spacing:-.03em;min-height:2.05em}
.hh{grid-area:1/1;align-self:start}
.hh:not(.on){visibility:hidden}
.hero-p{margin-top:1.4rem;font-size:1.4rem;color:var(--muted);max-width:30ch}
.hero-side{display:none}
.card{position:relative;align-self:center;justify-self:center;width:28rem;aspect-ratio:17/9;border-radius:1.6rem;overflow:hidden;background:var(--black);box-shadow:0 3rem 6rem -2rem rgba(30,30,30,.45);transform:rotate(-4deg);margin-bottom:12vh}
.cs{position:absolute;inset:0;display:grid;place-items:center;text-align:center;clip-path:polygon(0 0,130% 0,100% 100%,-30% 100%)}
.cs+.cs{clip-path:polygon(130% 0,130% 0,100% 100%,100% 100%)}
.cs--dark{background:var(--black)}.cs--lime{background:var(--lime)}.cs--purple{background:var(--purple);color:#fff}
.cs-word{color:var(--lime);font-weight:700;letter-spacing:.2em;font-size:1.8rem}
.cs-line{font-family:var(--serif);font-weight:300;font-size:2.2rem;line-height:1.05;padding:0 2rem}
.cs--photo img{position:absolute;inset:0;width:100%;height:100%;object-fit:cover}
.cs-cap{position:absolute;left:1.2rem;bottom:1.2rem;font-size:1.1rem;font-weight:600;letter-spacing:.06em;color:#fff;background:rgba(30,30,30,.45);padding:.4rem 1rem;border-radius:1rem;backdrop-filter:blur(6px)}
@media (min-width:768px){
  .hero-ui{grid-template-columns:1fr auto 1fr;grid-template-rows:1fr;align-items:center;padding:0 var(--gx)}
  .hero-copy{align-self:center;max-width:none;padding-bottom:18vh}
  .card{grid-column:2;width:34rem;margin-bottom:18vh}
  .hero-side{display:flex;flex-direction:column;align-items:flex-end;gap:2rem;align-self:center;justify-self:end;padding-bottom:18vh;text-align:right;font-size:1.4rem;color:var(--muted);max-width:22rem}
}
@media (min-width:1200px){
  .hero-h{font-size:8.8rem}.hero-p{font-size:2.2rem;margin-top:2.4rem}.hero-copy{max-width:60rem}
  .card{width:54rem;border-radius:2.4rem}
  .cs-word{font-size:3rem}.cs-line{font-size:4rem}.cs-cap{font-size:1.4rem;left:2rem;bottom:2rem;padding:.6rem 1.4rem;border-radius:1.4rem}
  .hero-side{font-size:2rem;max-width:36rem}
}
.scroll-cue{display:inline-flex;align-items:center;gap:1rem;font-size:1.2rem;font-weight:700;letter-spacing:.12em;color:var(--black)}
.scroll-cue i{position:relative;width:1px;height:4.8rem;background:rgba(30,30,30,.2);overflow:hidden}
.scroll-cue i::after{content:"";position:absolute;inset:0;background:var(--black);animation:cue 2s var(--eio4) infinite}
@keyframes cue{0%{transform:translateY(-100%)}60%,100%{transform:translateY(100%)}}

/* ---------- 2. showreel ---------- */
.reel{position:relative;height:260vh;background:var(--cream)}
.reel-stick{position:sticky;top:0;height:100vh;height:100svh;display:grid;place-items:center;overflow:hidden}
.reel-frame{position:relative;width:100%;height:100%;overflow:hidden;background:var(--black);transform-origin:50% 50%}
.reel-frame video{position:absolute;inset:0;width:100%;height:100%;object-fit:cover}
.reel-shade{position:absolute;inset:0;background:radial-gradient(ellipse at center,rgba(0,0,0,.5),rgba(0,0,0,.72))}
.reel-txt{position:absolute;left:50%;top:50%;transform:translate(-50%,-50%);width:calc(100% - 2*var(--gx));max-width:120rem;text-align:center;color:#fff;font-family:var(--serif);font-weight:400;font-size:3.4rem;line-height:1.05;letter-spacing:-.02em;text-shadow:0 .2rem 3rem rgba(0,0,0,.4)}
@media (min-width:1200px){.reel-txt{font-size:8.8rem}}
.reel-ctl{position:absolute;right:var(--gx);bottom:var(--gx);display:flex;align-items:center;gap:1.4rem;color:#fff;font-size:1.2rem;font-weight:700;letter-spacing:.12em}
.mute{height:4.4rem;padding:0 1.8rem;border-radius:2.2rem;border:1px solid rgba(255,255,255,.5);font-size:1.2rem;font-weight:700;letter-spacing:.1em;transition:background .3s,color .3s}
.mute:hover{background:#fff;color:var(--black)}
.mute[aria-pressed=false] .flip>span:first-child{transform:translateY(-110%)}
.mute[aria-pressed=false] .flip>span+span{transform:none}
@media (min-width:1200px){.reel-ctl,.mute{font-size:1.4rem}.mute{height:5.2rem;border-radius:2.6rem}}

/* ---------- 3. δήλωση RGB ---------- */
.state{background:var(--lime);padding:10rem var(--gx) 0}
@media (min-width:1200px){.state{padding:20rem var(--gx) 0}}
.rgb{position:relative;display:grid;max-width:150rem}
.rgb>*{grid-area:1/1;font-family:var(--serif);font-weight:300;font-size:3.6rem;line-height:1.05;letter-spacing:-.025em}
@media (min-width:768px){.rgb>*{font-size:5.6rem}}
@media (min-width:1200px){.rgb>*{font-size:11rem}}
.rgb-real{position:relative;z-index:2;color:var(--black)}
.rgb-l{mix-blend-mode:multiply;will-change:transform,opacity}
.rgb-l--r{color:#0018fe}.rgb-l--b{color:#00a3ff}
.state-img{margin:8rem calc(-1*var(--gx)) 0;height:70vh;overflow:hidden;clip-path:inset(12% 8% 0 8% round 2rem)}
.state-img img{width:100%;height:120%;object-fit:cover;transform:translateY(-10%)}
@media (min-width:1200px){.state-img{margin-top:16rem;height:100vh}}

/* ---------- 4. έργα ---------- */
.work{position:relative;height:500vh;background:var(--black)}
.work-stick{position:sticky;top:0;height:100vh;height:100svh;overflow:hidden;color:#fff}
.ws{position:absolute;inset:0;clip-path:polygon(0% 0%,130% 0%,130% 100%,-30% 100%)}
.ws+.ws{clip-path:polygon(130% 0%,130% 0%,130% 100%,110% 100%)}
.ws>img{position:absolute;inset:0;width:100%;height:100%;object-fit:cover}
.ws::after{content:"";position:absolute;inset:0;background:linear-gradient(180deg,rgba(0,0,0,.45) 0%,rgba(0,0,0,0) 35%,rgba(0,0,0,.15) 55%,rgba(0,0,0,.75) 100%)}
.ws-body{position:absolute;z-index:2;left:var(--gx);right:var(--gx);top:8.8rem;bottom:13rem;display:flex;flex-direction:column}
.ws-eye{margin-top:auto;font-size:1.3rem;font-weight:600;letter-spacing:.06em;opacity:.8}
.ws h3{font-family:var(--serif);font-weight:300;font-size:4.4rem;line-height:1;margin-top:1rem;max-width:14ch}
.ws-stat{margin-top:1.6rem;font-size:1.5rem;max-width:34ch;opacity:.9}
.ws--cta .ws-body{justify-content:center;align-items:flex-start}
.ws--cta .ws-eye{margin-top:0}.ws--cta .btn{margin-top:3rem}
.work-ui{position:absolute;z-index:3;left:var(--gx);right:var(--gx);bottom:var(--gx);display:flex;align-items:center;justify-content:space-between;gap:1.2rem}
.work-nav{display:flex;align-items:center;gap:1rem}
.work-count{font-size:1.3rem;font-weight:600;letter-spacing:.06em;margin-right:.6rem;font-variant-numeric:tabular-nums}
@media (min-width:1200px){
  .ws-body{top:14rem;bottom:14rem}
  .ws h3{font-size:12rem;max-width:16ch}
  .ws-stat{position:absolute;right:0;bottom:0;text-align:right;font-size:2rem;max-width:40rem}
  .ws-eye{font-size:1.6rem}.work-count{font-size:1.6rem}
}

/* ---------- 5. πελάτες ---------- */
.clients{position:relative;background:var(--black);color:var(--cream)}
.cl-stick{position:sticky;top:0;height:100vh;height:100svh;overflow:hidden;display:grid;grid-template-rows:auto 1fr auto;padding:8.8rem var(--gx) 3rem}
.cl-h{font-family:var(--serif);font-weight:300;font-size:3.2rem;line-height:1.05;max-width:12ch}
.cl-list-wrap{position:relative;overflow:hidden;-webkit-mask:linear-gradient(transparent,#000 30%,#000 70%,transparent);mask:linear-gradient(transparent,#000 30%,#000 70%,transparent)}
.cl-list{list-style:none;margin:0;padding:0;position:absolute;left:0;right:0;top:50%}
.cl-list li{font-size:3.4rem;line-height:1.25;font-weight:500;letter-spacing:-.02em;color:rgba(243,239,235,.25);transition:color .35s,transform .5s var(--eo4);transform-origin:left center;white-space:nowrap}
.cl-list li.on{color:var(--lime);transform:translateX(1rem)}
.cl-logo{position:relative;height:12rem;display:grid;place-items:center;border-top:1px solid rgba(243,239,235,.15)}
.lg{position:absolute;inset:0;display:flex;align-items:center;justify-content:center;gap:1.4rem;opacity:0;transform:scale(.9);transition:opacity .45s,transform .7s var(--eo4)}
.lg.on{opacity:1;transform:none}
.lg i{flex:none;width:4.4rem;height:4.4rem;background:var(--lime)}
.lg b{font-size:2.6rem;letter-spacing:.02em}
@media (min-width:1200px){
  .cl-stick{grid-template-columns:1fr 1.2fr 1fr;grid-template-rows:1fr;align-items:center;padding:0 var(--gx)}
  .cl-h{font-size:6.4rem;align-self:start;padding-top:16rem}
  .cl-list-wrap{height:100%}
  .cl-list li{font-size:7.2rem;line-height:1.2}
  .cl-logo{height:40rem;border:0;border-left:1px solid rgba(243,239,235,.15)}
  .lg i{width:9rem;height:9rem}.lg b{font-size:5rem}
}

/* ---------- 6. υπηρεσίες ---------- */
.services{position:relative;background:var(--black)}
.svc{position:sticky;top:0;min-height:100vh;min-height:100svh;background:var(--bg);overflow:hidden}
.svc-in{min-height:inherit;display:grid;align-content:start;gap:2.4rem;padding:8.8rem var(--gx) 3.2rem;transform-origin:50% 0}
.svc-head{display:flex;align-items:baseline;justify-content:space-between;border-bottom:1px solid rgba(30,30,30,.2);padding-bottom:1.6rem}
.svc-head h3{font-family:var(--serif);font-weight:300;font-size:4.6rem;line-height:.95;order:1}
.svc-n{order:2;font-weight:300;font-size:3.2rem;line-height:1;font-variant-numeric:tabular-nums}
.svc-body{display:grid;gap:1.8rem;align-content:start}
.svc-body p{font-size:1.6rem;max-width:44ch}
.svc-img{position:relative;height:30vh;border-radius:1.6rem;overflow:hidden}
.svc-img img{position:absolute;inset:0;width:100%;height:100%;object-fit:cover;transition:transform 1.2s var(--eo4),opacity .6s}
.svc-img img+img{opacity:0}
.svc:hover .svc-img img:first-child{transform:scale(1.06)}
.svc:hover .svc-img img+img{opacity:1;transform:scale(1.06)}
@media (min-width:1200px){
  .svc-in{grid-template-columns:1fr 1fr;grid-template-rows:auto 1fr;gap:4rem 8rem;padding:14rem var(--gx) 6rem}
  .svc-head{grid-column:1/-1;padding-bottom:3rem}
  .svc-head h3{font-size:18rem}.svc-n{font-size:18rem}
  .svc-body{align-self:end;gap:3rem}.svc-body p{font-size:2.2rem}
  .svc-img{height:auto;min-height:38rem;border-radius:2.4rem}
}

/* ---------- 7. μαρτυρίες ---------- */
.cases{background:var(--cream);padding:10rem 0 8rem}
.cases-top{padding:0 var(--gx);display:grid;gap:1.6rem}
.cases-top h2,.nums-head h2,.cities-head h2,.ins-head h2{font-family:var(--serif);font-weight:300;font-size:4rem;line-height:1.02;max-width:16ch}
@media (min-width:1200px){.cases{padding:20rem 0 14rem}.cases-top h2,.nums-head h2,.cities-head h2,.ins-head h2{font-size:9.6rem}}
/* ---- 7. Ημερολόγιο = ατζέντα ανά μήνα (21/09). Ίδια γλώσσα με το site:
   γέμισμα φόντου από κάτω στο hover (όπως .row), φωτογραφία με διαγώνιο σκούπισμα (όπως τα slides),
   κουμπιά flip, λεπτά μεγάλα νούμερα, pills κλάδου. ---- */
.ag{padding:0 var(--gx);margin-top:4rem;display:grid;gap:3.2rem}
.ag-m{font-size:1.2rem;font-weight:700;letter-spacing:.14em;color:var(--muted);margin:0 0 1.2rem;padding-left:.4rem}
.ag-g{display:grid;gap:.8rem}
.ag-r{position:relative;display:grid;grid-template-columns:8.4rem 1fr;gap:1.6rem 1.6rem;align-items:start;padding:1.6rem;border-radius:1.6rem;background:#fff;overflow:hidden;isolation:isolate}
.ag-r::before{content:"";position:absolute;inset:0;z-index:-1;background:var(--ice);transform:scaleY(0);transform-origin:bottom;transition:transform .6s var(--eo4)}
.ag-r:hover::before,.ag-r:focus-within::before{transform:scaleY(1)}
.ag-r.is-next{box-shadow:inset 0 0 0 2px var(--purple)}
.ag-hit{position:absolute;inset:0;z-index:1;border-radius:inherit}
.ag-d{display:grid;justify-items:center;align-content:center;gap:.6rem;aspect-ratio:1;border-radius:1.2rem;background:var(--black);color:#fff;line-height:1}
.ag-d b{font-weight:300;font-size:3.2rem;letter-spacing:-.04em}
.ag-d span{font-size:1rem;font-weight:700;letter-spacing:.12em;color:var(--lime)}
.ag-d--two b{font-size:2.2rem;letter-spacing:-.05em}   /* «27–28»: να χωράει σε μία γραμμή */
.ag-r.is-next .ag-d{background:var(--purple)}.ag-r.is-next .ag-d span{color:#fff}
.ag-t{display:grid;gap:.8rem;min-width:0}
.ag-soon{font-size:1.2rem;font-weight:700;letter-spacing:.1em;color:var(--purple)}
.ag-t h3{font-family:var(--serif);font-weight:300;font-size:2.6rem;line-height:1.02;letter-spacing:-.045em}
.ag-v{font-size:1.4rem;color:var(--muted)}
.ag-t .tags span{font-size:1.1rem}
.ag-img{display:none}
.ag-a{grid-column:1/-1;position:relative;z-index:2;display:flex;flex-wrap:wrap;gap:.8rem}
.ag-a .btn{flex:1 1 auto;justify-content:center}
.ag-all{padding:4rem var(--gx) 0}
@media (min-width:1000px){
  .ag{margin-top:8rem;gap:4.8rem}
  .ag-m{font-size:1.4rem}
  .ag-r{grid-template-columns:12rem 1fr 22rem auto;align-items:center;gap:3.2rem;padding:2rem 2rem 2rem 2rem;border-radius:2.4rem;min-height:16rem}
  .ag-d b{font-size:5.2rem}.ag-d span{font-size:1.2rem}
  .ag-d--two b{font-size:3.4rem}
  .ag-t h3{font-size:4.8rem}.ag-v{font-size:1.6rem}
  .ag-img{display:block;position:relative;align-self:stretch;border-radius:1.6rem;overflow:hidden;background:var(--black);
    clip-path:polygon(130% 0%,130% 0%,100% 100%,100% 100%);transition:clip-path .9s var(--eo4)}
  .ag-img img:first-child{width:100%;height:100%;object-fit:cover;opacity:.75;transform:scale(1.2);transition:transform 1.4s var(--eo4)}
  .ag-lg{position:absolute;left:1.2rem;right:1.2rem;bottom:1.2rem;width:auto;height:3.6rem;object-fit:contain;object-position:left bottom}
  .ag-r:hover .ag-img,.ag-r:focus-within .ag-img,.ag-r.is-next .ag-img{clip-path:polygon(-30% 0%,130% 0%,100% 100%,-60% 100%)}
  .ag-r:hover .ag-img img:first-child,.ag-r.is-next .ag-img img:first-child{transform:none}
  .ag-a{grid-column:auto;flex-direction:column;align-items:stretch}
  .ag-all{padding:6rem var(--gx) 0}
}
.q.on{background:var(--black);color:var(--cream)}
.q.on footer,.q.on footer b{color:var(--cream)}
.q-ui{display:flex;align-items:center;gap:1rem;margin-top:2rem}
.q-count{margin-right:auto;font-weight:600;font-variant-numeric:tabular-nums;font-size:1.4rem}

/* ---------- 8. αριθμοί ---------- */
.nums{background:var(--black);color:var(--cream);padding:10rem var(--gx)}
.nums-head{display:grid;gap:2.4rem;justify-items:start}
.nums-head h2{color:var(--cream)}
.nums-grid{margin-top:5rem;display:grid;gap:0}
.num{padding:2.4rem 0;border-top:1px solid rgba(243,239,235,.18);display:grid;grid-template-columns:auto 1fr;gap:.4rem 2rem;align-items:baseline}
.num strong{grid-row:span 2;font-weight:300;font-size:6.4rem;line-height:1;letter-spacing:-.04em;color:var(--lime);font-variant-numeric:tabular-nums}
.num b{font-weight:600;font-size:1.5rem}
.num p{font-size:1.4rem;color:rgba(243,239,235,.6)}
@media (min-width:1200px){
  .nums{padding:20rem var(--gx)}
  .nums-head{grid-template-columns:1fr auto;align-items:end}
  .nums-grid{margin-top:10rem;grid-template-columns:repeat(5,1fr);gap:3.2rem}
  .num{grid-template-columns:1fr;padding:3.2rem 0 0}
  .num strong{grid-row:auto;font-size:12rem}
  .num b{font-size:2rem;margin-top:2rem}.num p{font-size:1.7rem}
}

/* ---------- 9. πόλεις ---------- */
.cities{background:var(--cream);padding:10rem 0}
.cities-head{padding:0 var(--gx);display:grid;gap:2rem}
.cities-head p{max-width:46ch;color:var(--muted)}
.tabs{display:flex;flex-wrap:wrap;gap:.8rem}
.tabs button{height:4.4rem;padding:0 1.8rem;border-radius:2.2rem;border:1px solid rgba(30,30,30,.25);font-size:1.2rem;font-weight:700;letter-spacing:.08em;transition:background .3s,color .3s,border-color .3s}
.tabs button[aria-selected=true]{background:var(--black);color:var(--lime);border-color:var(--black)}
.mq{margin-top:4rem;overflow:hidden;white-space:nowrap}
.mq+.mq{margin-top:1rem}
.mq-t{display:inline-flex;will-change:transform;transition:opacity .4s}
.mq-t span{font-family:var(--serif);font-weight:300;font-size:5.6rem;line-height:1.1;padding-right:3rem;letter-spacing:-.02em}
.mq-t span::after{content:"✦";font-family:var(--sans);font-size:.4em;vertical-align:middle;margin-left:3rem;color:var(--purple)}
.mq--rev .mq-t span{color:transparent;-webkit-text-stroke:1px var(--black)}
@media (min-width:1200px){.cities{padding:20rem 0}.tabs button{height:5.2rem;padding:0 2.4rem;font-size:1.4rem;border-radius:2.6rem}.mq{margin-top:8rem}.mq-t span{font-size:16rem;padding-right:6rem}.mq-t span::after{margin-left:6rem}}

/* ---------- 10. νέα ---------- */
.insights{background:var(--cream);padding:0 var(--gx) 10rem}
.ins-head{display:grid;gap:2.4rem;justify-items:start}
.ins-head p{margin-top:1.6rem;color:var(--muted);max-width:44ch}
.ins-grid{margin-top:4rem;display:grid;gap:4rem}
.ins{display:grid;gap:1.2rem}
.ins-img{aspect-ratio:4/5;border-radius:1.6rem;overflow:hidden}
.ins-img img{width:100%;height:100%;object-fit:cover;transform:scale(1.08);transition:transform 1.2s var(--eo4)}
.ins:hover .ins-img img{transform:scale(1)}
.ins time{font-size:1.3rem;font-weight:600;color:var(--muted);margin-top:.8rem}
.ins h3{font-family:var(--serif);font-weight:300;font-size:2.6rem;line-height:1.1}
.ins p{font-size:1.4rem;color:var(--muted)}
@media (min-width:768px){.ins-grid{grid-template-columns:repeat(3,1fr);gap:2.4rem}}
@media (min-width:1200px){.insights{padding-bottom:20rem}.ins-head{grid-template-columns:1fr auto;align-items:end}.ins-grid{margin-top:8rem;gap:3.2rem}.ins-img{border-radius:2.4rem}.ins h3{font-size:3.6rem}.ins p,.ins time{font-size:1.7rem}}

/* ---------- 11. επικοινωνία ---------- */
.contact{display:grid;gap:.8rem;padding:.8rem;background:var(--cream)}
@media (min-width:768px){.contact{grid-template-columns:1fr 1fr}}
.ct{position:relative;min-height:56rem;border-radius:1.6rem;overflow:hidden;color:#fff;display:flex}
.ct img{position:absolute;inset:0;width:100%;height:100%;object-fit:cover;transform:scale(1.04);transition:transform 1.4s var(--eo4)}
.ct::after{content:"";position:absolute;inset:0;background:linear-gradient(180deg,rgba(0,0,0,.2),rgba(0,0,0,.7));transition:background .6s}
.ct:hover img{transform:scale(1.12)}
.ct:hover::after{background:linear-gradient(180deg,rgba(128,114,255,.35),rgba(0,0,0,.75))}
.ct-in{position:relative;z-index:1;display:flex;flex-direction:column;align-items:flex-start;gap:1.4rem;padding:2.4rem;width:100%}
.ct-in h2{font-family:var(--serif);font-weight:300;font-size:4.4rem;line-height:1;margin-top:auto}
.ct-in strong{font-size:1.8rem;font-weight:600}
.ct-in p{font-size:1.5rem;opacity:.85;max-width:36ch}
.ct-in .btn{margin-top:1rem}
@media (min-width:1200px){.contact{gap:1.2rem;padding:1.2rem}.ct{min-height:92vh;border-radius:2.4rem}.ct-in{padding:4.8rem;gap:2rem}.ct-in h2{font-size:10rem}.ct-in strong{font-size:2.8rem}.ct-in p{font-size:2rem}}

/* ---------- υποσέλιδο ---------- */
.ft{background:var(--black);color:var(--cream);padding:8rem var(--gx) 2rem;overflow:hidden}
.ft-top{display:grid;gap:5rem}
.ft-top h2{font-family:var(--serif);font-weight:300;font-size:5rem;line-height:1}
.ft-cols{display:grid;grid-template-columns:1fr 1fr;gap:3.2rem}
.ft-cols>div:first-child{grid-column:1/-1}
.ft-cols h4,.ft-cols .ft-h{font-size:1.2rem;font-weight:700;letter-spacing:.1em;color:rgba(243,239,235,.5);margin:0 0 1.2rem}
.ft-cols a{display:block;padding:.4rem 0;transition:color .3s}
.ft-cols a:hover{color:var(--lime)}
.ft-cols p{line-height:1.7}
.ft-word{margin-top:6rem;font-weight:700;line-height:.8;letter-spacing:-.04em;white-space:nowrap;text-align:center;color:var(--lime);overflow:hidden}
.ft-word .hw{display:inline-block}
.ft-legal{margin-top:2.4rem;display:flex;flex-wrap:wrap;gap:1.2rem 2.4rem;font-size:1.2rem;color:rgba(243,239,235,.55)}
.ft-legal span{margin-right:auto}
.ft-legal a:hover{color:var(--cream)}
@media (min-width:1200px){
  .ft{padding:min(16rem,14vh) var(--gx) 3rem}
  .ft-top{grid-template-columns:1fr 1.3fr;gap:min(8rem,7.4vh)}
  .ft-top h2{font-size:12rem}
  .ft-cols{grid-template-columns:1.4fr 1fr 1fr}.ft-cols>div:first-child{grid-column:auto}
  .ft-cols h4,.ft-cols .ft-h{font-size:1.4rem}.ft-cols{font-size:2rem}
  .ft-legal{font-size:1.5rem}
}

/* ---------- Verticom: λογότυπο & θέματα κεφαλίδας ---------- */
.vlogo .lm{fill:var(--purple)}.vlogo .ll{fill:var(--logo-ink)}
.vlogo path,.vlogo polygon{fill-rule:nonzero}
.hd-logo .lm,.hd-logo .ll{transition:fill .4s}
body.hd-dark .hd-logo .ll,body.hd-dark .hd-logo .lm{fill:#fff}
body.hd-lime .hd-logo .ll{fill:var(--black)}
body.hd-lime .pill,body.hd-light .pill--dark-on-light{background:var(--black);color:var(--lime)}
body.hd-lime .pill:hover{background:var(--purple);color:#fff}
body.menu-open .hd-logo .ll,body.menu-open .hd-logo .lm{fill:#fff}
.hero-word .vlogo{display:block;width:100%;height:auto}
.hero-word--base .lm,.hero-word--base .ll{fill:#e6e0d9}
.hero-word--lit .lm,.hero-word--lit .ll{fill:var(--cream)}
.hero-word{bottom:1.6rem}
.cs-logo{width:74%;height:auto}.cs-logo .lm{fill:var(--lime)}.cs-logo .ll{fill:#fff}
.ws-venue{display:block;margin-top:.8rem;font-size:.85em;opacity:.75}
.lg-card{display:grid;place-items:center;width:26rem;height:15rem;border-radius:1.6rem;padding:2.4rem;border:1px solid rgba(243,239,235,.14)}
.lg-card.is-dark{background:#fff}
.lg-card img{max-width:100%;max-height:100%;object-fit:contain}
@media (min-width:1200px){.lg-card{width:44rem;height:26rem;border-radius:2.4rem;padding:4.8rem}}
@media (min-width:1200px){.nums-grid--4{grid-template-columns:repeat(4,1fr)}}
@media (min-width:1200px){.ins-grid--4{grid-template-columns:repeat(4,1fr)}}
@media (min-width:768px) and (max-width:1199px){.ins-grid--4{grid-template-columns:repeat(2,1fr)}}
.cl-list li{font-size:3rem}
@media (min-width:1200px){.cl-list li{font-size:6.4rem}}
.ws h3{max-width:18ch}

/* ---------- υποσέλιδο: το λογότυπο ΦΑΙΝΕΤΑΙ ΠΑΝΤΑ και το φως το «ανάβει» καθώς περνά ----------
   (19/09 ο Βασίλης: ο μαύρος φακός έκρυβε το λογότυπο· τώρα προσθέτουμε φως αντί να αφαιρούμε) */
.ft{display:flex;flex-direction:column}
.ft-mark{position:relative;margin:0 0 6rem;order:-1;--mx:50%}
.ft-mark .vlogo{display:block;width:100%;height:auto}
.ft-base .lm,.ft-base .ll{fill:rgba(255,255,255,.14)}
.ft-lit{position:absolute;inset:0;
  -webkit-mask-image:radial-gradient(60% 150% at var(--mx) 50%,#000 0%,#000 26%,rgba(0,0,0,.35) 52%,transparent 78%);
  mask-image:radial-gradient(60% 150% at var(--mx) 50%,#000 0%,#000 26%,rgba(0,0,0,.35) 52%,transparent 78%)}
.ft-lit .lm{fill:#8fa2ff}.ft-lit .ll{fill:#fff}
.ft-glow{position:absolute;inset:-20% -10%;pointer-events:none;
  background:radial-gradient(38% 90% at var(--mx) 50%,rgba(143,162,255,.20),rgba(143,162,255,0) 70%)}
@media (min-width:1200px){.ft-mark{margin-bottom:10rem}}

/* Inter Tight: οι μεγάλοι τίτλοι θέλουν πιο σφιχτό διάστιχο/διάκενο */
.hero-h,.reel-txt,.rgb>*,.ws h3,.cl-h,.svc-head h3,.cases-top h2,.nums-head h2,.cities-head h2,.ins-head h2,.ct-in h2,.ft-top h2,.tile strong,.ov-nav a,.mq-t span,.q p,.ins h3{letter-spacing:-.045em}
.hero-h{line-height:.95}
.rgb>*{line-height:1}

/* =====================================================================
   CORPORATE ΠΑΛΕΤΑ: ό,τι ήταν λαχανί φόντο γίνεται μπλε Verticom με λευκό κείμενο,
   οι ανοιχτές επιφάνειες γίνονται ανοιχτό μπλε (--ice). Το --lime μένει μόνο ως
   ανοιχτό μπλε ΚΕΙΜΕΝΟ πάνω σε σκούρο φόντο.
   ===================================================================== */
.btn--lime{background:var(--purple);color:#fff}
.btn--lime:hover,.ct:hover .btn--lime{background:#fff;color:var(--purple)}
.ct:hover .btn--light{background:var(--purple);color:#fff}
.btn--dark:hover{background:var(--purple);color:#fff}
.arrow{background:var(--purple);color:#fff}
.arrow:hover{background:#fff;color:var(--purple)}
.arrow--dark{background:var(--black);color:#fff}
.pill{background:var(--purple);color:#fff}
.pill:hover{background:var(--black);color:#fff}
body.hd-dark .pill:hover,body.menu-open .pill:hover{background:#fff;color:var(--purple)}
body.hd-lime .pill{background:var(--black);color:#fff}
body.hd-lime .pill:hover{background:var(--purple);color:#fff}
.tile--lime{background:var(--purple);color:#fff}
.tile--lime .tag{background:rgba(255,255,255,.16);color:#fff}
.tile--lime .tile-p{color:rgba(255,255,255,.82)}
.tile--purple{background:var(--ice)}
.cs--lime{background:var(--ice);color:var(--black)}
.cs-logo .lm{fill:#6f82ff}.cs-logo .ll{fill:#fff}
.state{background:var(--ice)}
.tabs button[aria-selected=true]{background:var(--purple);color:#fff;border-color:var(--purple)}
.hero-word--base .lm,.hero-word--base .ll{fill:#e2e7f2}
.hero-word--lit .lm,.hero-word--lit .ll{fill:#fff}
.ft-lit .lm{fill:#6f82ff}
.q.on{background:var(--black)}

/* =====================================================================
   18/09 (Βασίλης): το λογότυπο της κεφαλίδας χανόταν σε ορισμένα φόντα.
   Μπαίνει σε ΛΕΥΚΗ ΚΑΨΟΥΛΑ, ίδιου ύψους με τα κουμπιά, με τα κανονικά του χρώματα.
   Έτσι διαβάζεται πάνω σε οτιδήποτε (φωτογραφία, ναυτικό, ανοιχτό μπλε).
   ===================================================================== */
.hd-logo{display:flex;align-items:center;justify-content:center;width:auto;height:4.4rem;padding:0 1.8rem;border-radius:2.2rem;background:#fff;box-shadow:0 .4rem 2.4rem rgba(11,18,51,.14);top:1.2rem}
.hd-logo .vlogo{width:10.4rem}
@media (min-width:1200px){.hd-logo{height:5.2rem;padding:0 2.4rem;border-radius:2.6rem;top:2.4rem}.hd-logo .vlogo{width:15rem}}
@media (max-width:767px){.hd-logo{left:var(--gx);top:1.2rem}}
.hd-logo .lm,body.hd-dark .hd-logo .lm,body.menu-open .hd-logo .lm{fill:var(--purple)}
.hd-logo .ll,body.hd-dark .hd-logo .ll,body.hd-lime .hd-logo .ll,body.menu-open .hd-logo .ll{fill:var(--logo-ink)}

/* ενιαίο σετ λογοτύπων διοργανώσεων/brands (μονόχρωμα, ίδιο οπτικό βάρος) */
.lg-mono{display:block;width:30rem;height:auto}
@media (min-width:1200px){.lg-mono{width:56rem}}
.ws-logo{width:18rem;height:auto;padding:0;background:none;backdrop-filter:none;-webkit-backdrop-filter:none;border-radius:0;filter:drop-shadow(0 .2rem 1.2rem rgba(0,0,0,.35))}
.ws-logo img{display:block;width:100%;height:auto;max-height:none}
@media (min-width:1200px){.ws-logo{width:30rem;height:auto;padding:0;border-radius:0}}

/* επαναφορά κανόνων που είχαν χαθεί στην αλλαγή του υποσέλιδου (18/09) */
.ws-top{display:flex;justify-content:space-between;align-items:flex-start;gap:1.6rem}
.ws-logo{display:block;flex:none}
@media (max-width:767px){.work-ui>.btn{display:none}.work-ui{justify-content:flex-end}.ws-logo{width:14rem}}
.svc-head{gap:1.6rem}
.svc-head h3{hyphens:none}
@media (min-width:1200px){.svc-head h3{font-size:13rem}.svc-n{font-size:13rem}}
@media (max-width:767px){.svc-head h3{font-size:4rem}}
@media (min-width:1200px){.ws-logo{width:40rem}}

/* =====================================================================
   ΚΕΦΑΛΙΔΑ «Α · ΛΕΠΤΗ ΓΡΑΜΜΗ» (20/09, επιλογή Βασίλη — τέλος τα τρία «χάπια»)
   Σταθερή στην κορυφή· στην αρχή διάφανη, μόλις κυλήσεις παίρνει θαμπό φόντο
   ώστε τα γράμματα να διαβάζονται πάνω από κάθε φωτογραφία.
   ===================================================================== */
.hd{display:flex;align-items:center;justify-content:space-between;gap:2.4rem;padding:1.6rem var(--gx);
  border-bottom:1px solid transparent;transition:background .45s var(--eo3),border-color .45s,padding .45s var(--eo3)}
.hd::before{content:"";position:absolute;inset:0;z-index:-1;opacity:0;transition:opacity .45s;
  background:rgba(11,18,51,.72);backdrop-filter:blur(14px);-webkit-backdrop-filter:blur(14px)}
body.hd-solid .hd::before{opacity:1}
body.hd-solid .hd{border-color:rgba(255,255,255,.14);padding-top:1.2rem;padding-bottom:1.2rem}
.hd-logo{position:static;display:block;width:14rem;flex:none;background:none;box-shadow:none;height:auto;padding:0;border-radius:0}
.hd-logo .vlogo{width:100%;height:auto}
.hd-nav{display:none;gap:2.8rem;font-size:1.5rem;font-weight:500;letter-spacing:-.01em}
.hd-nav a{position:relative;padding:.4rem 0}
.hd-nav a::after{content:"";position:absolute;left:0;right:0;bottom:0;height:1px;background:currentColor;transform:scaleX(0);transform-origin:right;transition:transform .5s var(--eo4)}
.hd-nav a:hover::after{transform:scaleX(1);transform-origin:left}
.hd-cta{display:none;align-items:center;font-size:1.35rem;font-weight:700;letter-spacing:.06em;padding-bottom:.5rem;
  border-bottom:2px solid var(--purple);transition:border-color .3s,color .3s}
.hd-cta:hover{border-color:currentColor}
.hd-menu{display:inline-flex;align-items:center;gap:1.2rem;font-size:1.35rem;font-weight:700;letter-spacing:.08em}
.hd-menu .burger{width:2.6rem}
@media (min-width:1000px){
  .hd{padding:2.4rem var(--gx)}
  .hd-logo{width:17rem}
  .hd-nav{display:flex}
  .hd-cta{display:inline-flex}
  .hd-menu{display:none}
}
/* χρώματα ανά ενότητα: σκούρο φόντο -> λευκά γράμματα, ανοιχτό -> ναυτικά */
.hd{color:var(--black)}
.hd .vlogo .lm{fill:var(--purple)}.hd .vlogo .ll{fill:var(--logo-ink)}
body.hd-dark .hd,body.hd-solid .hd,body.menu-open .hd{color:#fff}
body.hd-dark .hd .vlogo .ll,body.hd-solid .hd .vlogo .ll,body.menu-open .hd .vlogo .ll{fill:#fff}
body.hd-dark .hd .vlogo .lm,body.hd-solid .hd .vlogo .lm,body.menu-open .hd .vlogo .lm{fill:#8fa2ff}
body.hd-solid .hd-cta,body.hd-dark .hd-cta{border-color:#8fa2ff}

/* ================= Προσβασιμότητα & νέα στοιχεία (21/09) ================= */
/* παράκαμψη προς το περιεχόμενο: αόρατο μέχρι να πάρει focus από πληκτρολόγιο */
.skip{position:fixed;left:1.6rem;top:1.6rem;z-index:200;padding:1.2rem 2rem;border-radius:.8rem;background:var(--black);color:#fff;
  font-weight:600;font-size:1.5rem;transform:translateY(-200%);transition:transform .2s}
.skip:focus{transform:none}
/* ορατό περίγραμμα εστίασης σε ΟΛΑ τα διαδραστικά (μόνο στο πληκτρολόγιο) */
:focus-visible{outline:2px solid var(--purple);outline-offset:3px;border-radius:.4rem}
[data-hd="dark"] :focus-visible,.hd-solid .hd :focus-visible,.ov :focus-visible,.ft :focus-visible{outline-color:#9fb0ff}
/* διακόπτης γλώσσας: στόχος αφής >= 44px */
.hd-lang{display:inline-flex;align-items:center;justify-content:center;min-width:4.4rem;min-height:4.4rem;flex:none;
  font-size:1.3rem;font-weight:700;letter-spacing:.08em;border:1px solid currentColor;border-radius:2.2rem}
.hd-lang:hover{box-shadow:inset 0 0 0 1px currentColor}
.hd{gap:1.6rem}
.hd-menu{margin-left:0}
.ov-lang{font-size:1.6rem!important;opacity:.7;margin-top:1.6rem}
/* σελίδα 404 */
.e404{min-height:72vh;display:grid;align-content:center;gap:2.4rem;padding:16rem var(--gx) 8rem}
.e404-p{font-size:1.8rem;color:var(--muted);max-width:52ch}
.e404-go{display:flex;flex-wrap:wrap;gap:1.2rem}
/* κινητό / λιγότερη κίνηση: χωρίς προφόρτωση ΑΠΟ ΤΟ ΠΡΩΤΟ ΚΑΡΕ (πριν τρέξει JS) */
@media (max-width:767px){.pre{display:none}body.is-loading{overflow:auto}}
/* λιγότερη κίνηση: ΜΟΝΟ οι CSS animations. ΠΟΤΕ transition-duration σε *: συγκρούεται με τα inline styles του GSAP
   (οι γραμμές της ατζέντας έμεναν αόρατες, 22/09). */
@media (prefers-reduced-motion:reduce){*,*::before,*::after{animation-duration:.01ms!important;animation-iteration-count:1!important}}

/* κουμπί «Παύση κίνησης» στο υποσέλιδο: ίδια εμφάνιση με τους νομικούς συνδέσμους, στόχος αφής >= 44px */
.mo-btn{font:inherit;color:inherit;background:none;border:0;padding:0;min-height:4.4rem;cursor:pointer;opacity:.7;text-decoration:underline;text-underline-offset:.3em}
.mo-btn:hover,.mo-btn[aria-pressed="true"]{opacity:1}

/* media & πλατφόρμες: το στιγμιότυπο της αρχικής του κάθε site μέσα σε ΠΛΑΙΣΙΟ.
   Οριζόντιο 16:10 = το σχήμα της ίδιας της οθόνης. Ως τις 15/10 ήταν 4:5, σχήμα φτιαγμένο για
   φωτογραφίες άρθρων (18/09), και τα στιγμιότυπα που μπήκαν μετά κόβονταν στη μέση.
   Η εικόνα μένει ΤΕΤΡΑΓΩΝΗ και ΑΚΕΡΑΙΗ: η στρογγυλή γωνία και το ζουμ 8% έκοβαν ακριβώς τη γωνία
   όπου κάθεται το λογότυπο κάθε site — γι αυτό μπήκε padding και object-fit:contain (15/10). */
.ins-img--site{aspect-ratio:16/10;background:#fff;padding:.8rem;box-shadow:inset 0 0 0 1px rgba(11,18,51,.1)}
.ins-img--site img{object-fit:contain;object-position:center;transform:none}
.ins:hover .ins-img--site img{transform:none}

/* Η σελίδα που βλέπεις, τονισμένη στο μενού (15/10): η ίδια υπογράμμιση του hover, μόνιμη.
   currentColor, ώστε να ακολουθεί το χρώμα της κεφαλίδας σε σκούρο και σε ανοιχτό φόντο. */
.hd-nav a[aria-current="page"]{font-weight:600}
.hd-nav a[aria-current="page"]::after{transform:scaleX(1);transform-origin:left}
.ov-nav a[aria-current="page"]{color:var(--lime);padding-left:1.6rem}

/* Περιοχές αφής ≥44px σε οθόνες αφής (έλεγχος κινητού 17/10/2026: ΜΕΝΟΥ 110×16, Απόρρητο/Cookies 18,
   links υποσέλιδου 32). Σε px, όχι rem: η ρίζα της γραμματοσειράς κλιμακώνεται (~7px), το δάχτυλο όχι.
   Το ΜΕΝΟΥ μεγαλώνει με padding + αρνητικό margin, ώστε η κεφαλίδα να μη μετακινηθεί. */
@media (pointer:coarse){
  .hd-menu{min-height:44px;padding:14px 10px;margin:-14px -10px}
  .ft-cols a,.ft-legal a,.ft-legal button{display:inline-flex;align-items:center;min-height:44px}
  .ft-cols a{display:flex}
  .svc-body .link,a[href^="tel:"],a[href^="mailto:"]{display:inline-flex;align-items:center;min-height:44px}
}