/* --------- Design tokens --------- */
:root{
  --sand:#efebe5;
  /*--wheat:#dcc9a3;    /* πιο “μπισκοτένιο”, πιο καθαρό δίπλα στο μπλε */
  --wheat:#d9cea0;
  --ink:#1c1f24;
  --ink-soft:#2b3139;
  --white:#ffffff;

  /* footer color */
  --navy: #0e2a3a;     /* σκουρο μπλε */
  --navy-2: #081f2c;   /* πιο βαθύ για gradient */


  /*--sea:#446e83;  /* μπλε φωτη */
  /*--sea: #d0e2ed; /* baby blue*/ 
  /*--sea:#26415c; /* DAAARK */
  --sea:#dde9ee;

  /* Header height */
  --header-h: 64px;

  /* Page fixed background (edit me) TODO */
  /* --bg-image: url("img/sea-bg.jpg"); */
  --bg-overlay: linear-gradient(to bottom, rgba(255,255,255,.35), rgba(255,255,255,.55));
}



/* --------- Base / Reset --------- */
*{ box-sizing:border-box }
html{ 
  scroll-behavior:smooth;
  height:100%;
  background: var(--sand);   /* TODO */
}

/* Main γεμίζει τον διαθέσιμο χώρο */
main{ flex: 1 0 auto }

body{
  margin:0; 
  min-height:100%;
  display: flex;
  flex-direction: column;
  font-family: system-ui,-apple-system, Segoe UI, Roboto, Ubuntu, Cantarell, Noto Sans, Helvetica, Arial, "Apple Color Emoji","Segoe UI Emoji";
  color:var(--ink);
  line-height:1.6;
  background: transparent; /* αφήνουμε να φανεί το fixed bg */
}

body::before{
  content:"";
  position:fixed; inset:0; z-index:-1; pointer-events:none;
  background:
    var(--bg-overlay);
    /*, var(--bg-image); */
  background-repeat:no-repeat, no-repeat;
  background-position:center center, center center;
  background-size:cover, cover;
}

.container{ width:min(1100px, 92%); margin:0 auto }

/* ========== Header ========== */
.site-header{
  position:fixed; top:0; left:0; right:0; z-index:1000;
  /* backdrop-filter: blur(6px) saturate(100%);
  -webkit-backdrop-filter: blur(6px) saturate(130%); */
  background: rgba(255,255,255,.92);  /* πιο αδιαφανές αντί για blur */
  border-bottom: 1px solid rgba(0,0,0,.08);
}

.site-header .nav{
  display:flex; align-items:center;
  gap:10px; min-height:var(--header-h);
}
.site-header .nav .brand{ margin-right:auto; }

/* Brand: logo πάνω, title κάτω, κεντραρισμένα */
.brand{
  display:inline-flex;
  flex-direction:column;
  align-items:center;
  gap:2px;
  color:var(--ink);
  text-decoration:none;
}

/* logo */
.brand-logo{
  width:82px;
  height:32px;
  display:block;
}

/* title logo */
.brand-title{
  font-weight:600;
  font-size:12px;
  line-height:1.1;
  text-align:center;
}


/* Menu */
.nav ul{
  display:flex; align-items:center; gap:6px;
  list-style:none; margin:0; padding:0
}

.nav a{
  padding:2px 12px; border-radius:10px;
  color:var(--ink-soft); transition:.2s; text-decoration:none;
  position: relative;
  display: inline-block;
}
.nav a:hover{ background:rgba(158,193,207,.18); color:var(--ink) }

/* active link: χωρίς background */
.nav a[aria-current="page"]{
  background: transparent;
  color: var(--ink);
  text-decoration: none; /* για να μην υπάρχει το κλασικό underline */
}

/* η γραμμή */
.nav a[aria-current="page"]::after{
  content:"";
  position:absolute;

  /* αυτά (12px) ταιριάζουν με το padding σου: 8px 12px */
  left:12px;
  right:12px;

  bottom:1px;     /* παίξε λίγο: 0px–6px */
  height:1px;
  background:#000;

  transform: scaleX(0);
  transform-origin: left;
  animation: nav-underline .28s ease-out forwards;
}

@keyframes nav-underline{
  to{ transform: scaleX(1); }
}

/* να μην “κουμπώνει” background στο hover όταν είναι active */
.nav a[aria-current="page"]:hover{
  background: transparent;
}

/* ========== Mobile menu (απλό & μικρό) ========== */
.mobile-toggle{
  appearance:none; border:0; background:transparent; font-size:22px;
  padding:6px 8px; border-radius:10px; color:var(--ink); display:none;
}

/* ========== Language toggle (EN / EL) ========== */
.lang-toggle{
  display: inline-flex;
  align-items: center;
  gap: 6px;
  padding: 5px 11px;
  border-radius: 999px;
  border: 1px solid color-mix(in oklab, var(--ink), white 65%);
  background: rgba(255,255,255,.55);
  color: var(--ink);
  text-decoration: none;
  font-family: ui-monospace, "IBM Plex Mono", SFMono-Regular, Menlo, Consolas, monospace;
  font-size: 11px;
  font-weight: 700;
  letter-spacing: .14em;
  text-transform: uppercase;
  line-height: 1;
  white-space: nowrap;
  transition: background .2s ease, color .2s ease, border-color .2s ease, transform .12s ease;
}
.lang-toggle:hover,
.lang-toggle:focus-visible{
  background: var(--navy);
  color: #fff;
  border-color: var(--navy);
  outline: 0;
}
.lang-toggle:active{ transform: translateY(1px); }
.lang-toggle__globe{
  width: 12px; height: 12px;
  flex: 0 0 auto;
  opacity: .85;
}

@media (max-width:900px){
  :root{ --header-h:56px }
  .mobile-toggle{ display:inline-block }
  .nav{ flex-wrap:wrap }
  .nav ul{
    width:100%; flex-direction:column; align-items:stretch; gap:4px;
    max-height:0; overflow:hidden; padding:0;
    transition:max-height .25s ease, padding .25s ease;
  }
  .nav.open ul{ max-height:70vh; padding:6px 0 }
  .nav a{ padding:10px 12px }

  /* Keep lang toggle + burger on the top row, ul wraps below */
  .lang-toggle{ order: 1; padding: 4px 9px; font-size: 10.5px; }
  .mobile-toggle{ order: 2; }
  .nav ul{ order: 3; }
  .nav ul .lang-toggle{ display: none; } /* never inside the menu */
}

/* ===== Hero με video — σωστή στοίβαξη ===== */

:root{
  --hero-h: clamp(420px, 82svh, 820px);
}
@supports not (height: 1svh){
  :root{ --hero-h: clamp(420px, 82vh, 820px) } /* fallback */
}

.hero{
  position: fixed;
  top: 0; left: 0; right: 0;
  height: var(--hero-h);
  overflow: hidden;
  background: transparent;
  z-index: 0;
}
.hero .wrap{
  display:grid;
  grid-template-columns: 1.2fr .8fr;
  gap:40px;
  padding:calc(var(--header-h) + 16px) 0 64px; /*Δημιουργει κενο αναμεσα στο main Και το hero TODO*/ 
}
@media (max-width: 960px){ 
  .hero .wrap{ 
    padding:calc(var(--header-h) + 16px) 0 64px; /*Δημιουργει κενο αναμεσα στο main Και το hero TODO*/ 
    grid-template-columns:1fr
  } 
}

.hero.hero-with-video{
  isolation: isolate;
  color:#fff;
}
.hero.hero-with-video .hero-video-wrap{
  position:absolute; 
  inset:0;
  z-index: 0;
  overflow:hidden;
  background:#000;
}
.hero.hero-with-video .hero-video{
  position:absolute;
  inset:0;
  width:100%;
  height:100%;
  object-fit:cover;
  object-position: 45%;
  display:block;
}

.hero.hero-with-video .hero-overlay{
  position:absolute; inset:0;
  background: linear-gradient(180deg, rgba(0,0,0,.25), rgba(0,0,0,.35));
  z-index:1; pointer-events:none;
}
.hero.hero-with-video .hero-content{
  position:relative; 
  z-index:2; 
  margin-top: 10px;
}

/*TODO PIO SKOTINO ME AYTO */
/* Δώσε λίγη ανάσα στα στοιχεία */
.hero.hero-with-video .cta{ margin-top: 20px; gap: 12px }
.hero.hero-with-video .kicker{ letter-spacing:.18em; font-weight:800; font-size:12px }

/*TODO PIO SKOTINO ME AYTO */

.kicker{ font-weight:800; color:var(--sea); letter-spacing:.2em; text-transform:uppercase; font-size:12px }
h1{ font-size: clamp(28px, 4vw, 46px); margin:.2em 0 .4em }
.lead{ font-size: clamp(16px, 2.2vw, 20px); color:var(--wheat-soft) }
.cta{ display:flex; gap:12px; flex-wrap:wrap; margin-top:18px }

/* ΜΟΝΟ όταν υπάρχει hero πριν από το main, πρόσθεσε offset ίσο με το ύψος του hero */
.hero + main{
  margin-top: var(--hero-h);
  position: relative;
  z-index: 1;
  background: var(--sea);            /* TODO  main only for index.html*/
  padding-top: 1px;                  /* μόνο για να σπάσει το collapsing */
}

main{ background: var(--sea);}      /* TODO main for ALL .html*/

/* ========================= SEPARATOR ========================= */
.separator {
  width: 80%;
  height: 1px;
  background-color: #0b2a3c;
  margin: 2rem auto;
  border-radius: 1px;
}


/* =============== Wave separator — inline SVG =============== */
:root{
  /* Γεωμετρία */
  --wave-h: 50px;
  --wave-overlap: clamp(10px, 6svh, 64px);

  /* Κίνηση (δεξιά → κάτω → επιστροφή) */
  --wave-shift-px: 80px;   /* οριζόντια μετατόπιση σε px (ασφαλής για overscan) */
  --wave-bob-y: 10px;      /* κάθετο “βούτηγμα” */
  --wave-duration: 5s;    /* διάρκεια loop */

  /* Overscan: πόσο πιο φαρδύ από το 100% είναι το SVG ώστε να μη φανούν άκρα */
  --wave-overscan: 30%;    /* αύξησέ το αν ποτέ ξαναδεις άκρα (π.χ. 40%) */
}

/* Κορυφή του main */
.wave-sep{
  position: relative;
  height: calc(var(--wave-h) + var(--wave-overlap));
  margin-top: calc(-1 * var(--wave-h) - var(--wave-overlap));
  background: transparent;
  pointer-events: none;
  overflow: hidden;
  z-index: 3;
}

/* SVG μένει σταθερό με overscan (δεν μετακινείται το ίδιο ποτέ) */
.wave-sep svg{
  position: absolute;
  top: -1px; /* 1px overlap για να μη φανεί γραμμή */
  left: calc(-1 * var(--wave-overscan) / 2);
  width: calc(100% + var(--wave-overscan));
  height: calc(100% + 2px);
  display: block;
}

.wave-sep .wave-slide{
  transform-box: fill-box;
  transform-origin: 50% 50%;
  will-change: transform;
  animation: wave-horiz var(--wave-duration) ease-in-out infinite;
}

/* Χρώμα κύματος */
.wave-path{ fill: var(--sea) }

@keyframes wave-horiz{
  0%   { transform: translateX(calc(-1 * var(--wave-shift-px))) } /* αριστερά */
  50%  { transform: translateX(var(--wave-shift-px)) }            /* δεξιά */
  100% { transform: translateX(calc(-1 * var(--wave-shift-px))) } /* αριστερά */
}

@media (prefers-reduced-motion: reduce){
  .wave-sep .wave-slide{ animation: none }
}

/* ==================== BUTTOMS ==================== */
.btn{
  display:inline-flex; align-items:center; justify-content:center; gap:8px;
  padding:12px 16px; border-radius:14px; border:1px solid transparent;
  font-weight: 800; text-decoration:none;
  transition: background-color .2s ease, border-color .2s ease, transform .05s ease;
}

/* Primary */
.btn.btn-primary{
  background: var(--sea);
  border-color: color-mix(in oklab, var(--sea), black 12%);
  color: var(--ink); /* σκουρόχρωμο κείμενο για κοντράστ */
}
.btn.btn-primary:hover{ 
  background: color-mix(in oklab, var(--sea), transparent 70%);
  background: rgb(from var(--sea) r g b / .30);   /* when is supported otherwise goes up to fallback */
  
  border-color: color-mix(in oklab, var(--sea), black 12%);
  color: var(--sea);
}
.btn.btn-primary:active{ 
  transform: translateY(1px)
}

/* Ghost = διάφανο με περίγραμμα στο wheat */
.btn.btn-ghost{
  background: color-mix(in oklab, var(--wheat), transparent 70%);
  background: rgb(from var(--wheat) r g b / .30);   /* when is supported otherwise goes up to fallback */
  
  border-color: color-mix(in oklab, var(--wheat), black 12%);
  color: var(--wheat);
}

.btn.btn-ghost:hover{
  background: var(--wheat);
  border-color: color-mix(in oklab, var(--wheat), black 12%);
  color: var(--ink); /* σκουρόχρωμο κείμενο για κοντράστ */
}
.btn.btn-ghost:active{ transform: translateY(1px) }

/* Reverse */
.btn.btn-ghost-rev{
  background: var(--wheat);
  border-color: color-mix(in oklab, var(--wheat), black 12%);
  color: var(--ink); /* σκουρόχρωμο κείμενο για κοντράστ */
}

.btn.btn-ghost-rev:hover{
  background: color-mix(in oklab, var(--wheat), transparent 70%);
  background: rgb(from var(--wheat) r g b / .30);   /* when is supported otherwise goes up to fallback */
  
  border-color: color-mix(in oklab, var(--wheat), black 12%);
  color: var(--wheat); 
}

.btn.btn-ghost-rev:active{
  transform: translateY(1px)
}

/* ///////////////////////////////////////////////////////////////// */
/* Στο hero, ενισχύουμε hover states πάνω σε σκοτεινό φόντο */
.hero.hero-with-video .btn.btn-primary:hover{
  box-shadow: 0 10px 30px rgba(0,0,0,.25);
}
.hero.hero-with-video .btn.btn-ghost{
  /* κάνε το περίγραμμα πιο ευδιάκριτο πάνω στο video */
  border-color: color-mix(in oklab, var(--wheat), white 10%);
}

/* ============================ CARD GRID ============================ */

.card-grid{ 
  display:grid;
  grid-template-columns: repeat(3,1fr);
  gap:16px;
}
@media (max-width: 900px){
  .card-grid{ 
    grid-template-columns: repeat(2,1fr)
  }
}
@media (max-width: 560px){
  .card-grid{ 
    grid-template-columns: 1fr 
  }
}

.card{
  background:var(--white);
  border:1px solid color-mix(in oklab, var(--wheat), black 10%);
  border-radius:18px; overflow:hidden;
  box-shadow: 0 10px 30px rgba(0,0,0,.04);
}
.card .img{ 
  aspect-ratio: 16/10;
  background:#dfe8eb; 
  overflow:hidden 
}
.card .img img{ 
  width:100%;
  height:100%;
  object-fit:cover; 
  display:block 
}
.card .body{ padding:16px }

/* Maybe delete TODO */
.card .btn.btn-ghost{
  background: transparent;
}
.card .btn.btn-ghost:hover{
  background: var(--wheat);
  color: var(--white);
}

/* ============================ WHY ============================ */

#why .prose{
  max-width:760px; margin:0 auto; text-align:center 
}
#why .prose p{ 
  margin:10px 0 0; line-height:1.6 
}
/* ===== Compact mode για κινητά (<= 640px) ===== */
@media (max-width: 640px){
  /* Μαζεύει το κάθετο padding του section */
  #why.section{ padding-block: 20px; }

  /* Κεντράρισμα τίτλου + μικρότερη κλίμακα */
  #trust-title{
    text-align:center;
    font-size: clamp(18px, 5.2vw, 24px);
    line-height: 1.15;
    margin: 0 0 10px;
  }

  /* Πιο «σφιχτή» τυπογραφία στο κείμενο */
  #why .prose{
    max-width: 60ch;          /* κρατά το πλάτος υγιές */
    margin: 0 auto;
    font-size: 0.95rem;       /* ~15.2px */
    line-height: 1.45;        /* λιγότερο ύψος γραμμής */
  }

  /* Μικρότερα κενά μεταξύ παραγράφων */
  #why .prose p{
    margin: 0 0 0.6rem;       /* αντί για 1rem+ */
  }

  /* Λίγο πιο διακριτά τα <strong> για να μη “φουσκώνουν” τη γραμμή */
  #why .prose strong{
    font-weight: 600;
  }
}

/* ===================== FAQ (compact accordion) ===================== */
.faq.section{ padding: 40px 0; text-align:center; }
.faq .sub{ text-align:center; margin-bottom: 14px; }

.faq .faq-list{
  width: min(760px, 100%);
  margin: 0 auto;
  display: grid;
  gap: 10px;
}

.faq .faq-item{
  background: rgba(255,255,255,.75);
  border: 1px solid rgba(0,0,0,.10);
  border-radius: 16px;
  padding: 10px 14px;
  box-shadow: 0 10px 30px rgba(0,0,0,.03);
}

.faq .faq-item summary{
  cursor: pointer;
  font-weight: 800;
  color: var(--ink);
  list-style: none;
  display: flex;
  align-items: center;
  gap: 10px;
}

.faq .faq-item summary::-webkit-details-marker{ display:none; }

.faq .faq-item summary::after{
  content: "›";
  margin-left: auto;
  transform: rotate(90deg);
  transition: transform .18s ease;
  opacity: .8;
  font-size: 18px;
}

.faq .faq-item[open] summary::after{
  transform: rotate(-90deg);
}

.faq .faq-a{
  padding-top: 8px;
  color: var(--ink-soft);
  font-size: 14px;
  line-height: 1.55;
}

.faq .faq-a p{ margin: 0; }

@media (max-width: 640px){
  .faq.section{ padding: 30px 0; }
  .faq .faq-item{ padding: 10px 12px; border-radius: 14px; }
  .faq .faq-a{ font-size: 13.5px; }
}




/* ============================ SECTION ============================ */
.section{
  padding:56px 0;
  text-align: center;
  overflow-x: clip;
}
.section h2{ 
  color: var(--ink-soft); /* TODO */
  font-size: clamp(22px, 3vw, 34px);
  margin:0 0 8px;
  /* extras για το brash efe */
  position: relative;
  display: inline-block;

  z-index: 0;
  padding: .15em .6em;
}

.section h2::before{
  content:"";
  position:absolute;
  left: -10%;
  right: -10%;
  top: -20%;
  bottom: -20%;
  z-index:-1;
  background: url("assets/BRUSH.svg") center / 100% auto no-repeat;
  pointer-events:none;
}


.section .sub{ color:var(--ink-soft); margin:0 0 22px }

/* ============================ FOOTER (Dark / Premium) ============================ */

.footer{
  position: relative;
  z-index: 2;
  padding: 44px 0 18px;
  color: rgba(255,255,255,.82);
  background: linear-gradient(180deg, var(--navy), var(--navy-2));
  border-top: 1px solid rgba(255,255,255,.12);
}

.footer a{
  color: rgba(255,255,255,.86);
  text-decoration: none;
}
.footer a:hover{ color: var(--wheat); }

.footer-inner{
  display: grid;
  grid-template-columns: 1.5fr 1fr 1fr;
  gap: 28px;
  align-items: start;
}

.footer-logo{
  display: inline-flex;
  align-items: center;
  gap: 10px;
  color: #fff;
  font-weight: 800;
  letter-spacing: .2px;
}
.footer-logo img{ width: 36px; height: 36px; }
.footer-logo img{
  width: 36px;
  height: 36px;

  /* white circle behind transparent logo */
  background: rgba(255,255,255,.96);
  border-radius: 999px;
  /* padding: 1px;              το “κυκλακι” γύρω από το logo */
  box-sizing: content-box;   /* για να μη μικρύνει το logo */
  border: 1px solid rgba(0,0,0,.10);
}



.footer-tagline{
  margin: 10px 0 14px;
  max-width: 48ch;
  line-height: 1.6;
  color: rgba(255,255,255,.75);
}

.footer-title{
  margin: 2px 0 12px;
  font-size: 13px;
  letter-spacing: .14em;
  text-transform: uppercase;
  color: rgba(255,255,255,.72);
}

.footer-list{
  list-style: none;
  margin: 0;
  padding: 0;
  display: grid;
  gap: 8px;
}

.footer .socials{
  display: inline-flex;
  gap: 10px;
  align-items: center;
}
.footer .socials a{
  width: 38px;
  height: 38px;
  border-radius: 999px;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  background: rgba(255,255,255,.08);
  border: 1px solid rgba(255,255,255,.14);
  color: rgba(255,255,255,.9);
  transition: transform .18s ease, background .18s ease, border-color .18s ease;
}
.footer .socials a:hover{
  transform: translateY(-1px);
  background: rgba(255,255,255,.12);
  border-color: rgba(255,255,255,.22);
  color: #fff;
}
.footer .socials svg{ width: 18px; height: 18px; display:block; }

.footer-bottom{
  margin-top: 26px;
  padding-top: 14px;
  border-top: 1px solid rgba(255,255,255,.12);
  display: flex;
  justify-content: space-between;
  gap: 10px;
  flex-wrap: wrap;
  font-size: 13px;
  color: rgba(255,255,255,.72);
}

.footer-legal{
  display: inline-flex;
  gap: 10px;
  align-items: center;
}


.footer .footer-list a{
  overflow-wrap: anywhere;
  word-break: break-word;
}


@media (max-width: 820px){
  .footer-inner{
    grid-template-columns: repeat(2, minmax(0,1fr));
    gap: 14px;
  }

  .footer-col--brand{ grid-column: 1 / -1; }

  .footer-bottom{
    flex-direction: column;
    align-items: flex-start;
  }
  
  .footer{ padding: 38px 0 16px; }
  .footer-title{ margin-bottom: 10px; }
}

/* Divider ανάμεσα σε "Σύνδεσμοι" και "Επικοινωνία" (μόνο σε mobile 2-col) */
@media (max-width: 820px){
  .footer-col--links{
    position: relative;
    padding-right: 14px;
  }

  .footer-col--links::after{
    content:"";
    position: absolute;
    top: 6px;
    bottom: 6px;
    right: -9px;
    width: 1px;
    background: rgba(255,255,255,.14);
  }

  .footer-col--contact{
    padding-left: 14px;
  }
}

/* ========================= scoped στο #services ========================= */
#services { position: relative; }

#services h2{ text-align:center; }
#services .cards{ display:grid; gap:16px; grid-template-columns:repeat(4, minmax(0,1fr)); }
@media (max-width:1024px){ #services .cards{ grid-template-columns:repeat(2,1fr) } }
@media (max-width:560px){
  #services .cards{
    display:flex;
    gap:12px;
    overflow-x:auto;

    /* Κεντράρισμα καρέ: padding ίσο με το μισό του (100% - 85%) */
    padding-inline: 7.5%;
    /* Βοηθάει το programmatic scroll να “στοχεύει” το κέντρο */
    scroll-padding-inline: 7.5%;

    scroll-snap-type:x mandatory;
    -webkit-overflow-scrolling: touch;
    overscroll-behavior-x: contain;
  }

  #services .card{
    /* Σταθερό πλάτος card ως ποσοστό, ώστε να ξέρουμε το “κέντρο” */
    flex: 0 0 85%;
    /* Snap στο κέντρο (όχι στην αρχή) */
    scroll-snap-align: center;
    scroll-snap-stop: always;
    min-height: 300px;
  }

  /* H εικόνα κάθεται σωστά */
  #services .card .bg{
    width:100%; height:100%;
    object-fit:cover; object-position:center;
  }

  /* Τα clickccles keys*/
  #srvPrev, #srvNext{
    position: absolute;
    top: 50%;
    transform: translateY(-50%);
    width: 44px; height: 44px;             /* 44px touch target */
    border-radius: 9999px;
    border: 1px solid rgba(255,255,255,.25);
    background: rgba(10,10,10,.55);        /* ημιδιαφανές dark glass */
    color: #fff;
    display: grid;
    place-items: center;
    box-shadow: 0 8px 20px rgba(0,0,0,.25);
    backdrop-filter: blur(6px);
    -webkit-backdrop-filter: blur(6px);
    z-index: 5;
    cursor: pointer;
    opacity: .95;
    transition: opacity .2s ease, transform .2s ease, background .2s ease;
  }

  #srvPrev{ left: 8px; }
  #srvNext{ right: 8px; }

  #srvPrev:hover, #srvNext:hover{ opacity: 1; transform: translateY(-50%) scale(1.03); }
  #srvPrev:active, #srvNext:active{ transform: translateY(-50%) scale(.98); }

  #srvPrev:disabled, #srvNext:disabled{
    opacity: .45;
    cursor: default;
    background: rgba(10,10,10,.35);
  }

  /* Αν μέσα έχεις SVG ή pseudo chevron, εξασφάλισε σωστό μέγεθος */
  /* #srvPrev svg, #srvNext svg{
    width: 18px; height: 18px; pointer-events: none;
  } */
}

/* Κάρτα ως “σκηνή” */
#services .card{
  position:relative; min-height:300px; border-radius:14px; overflow:hidden;
  box-shadow:0 6px 16px rgba(0,0,0,.08);
  isolation:isolate;
}

/* Εικόνα background */
#services .card .bg{
  position:absolute; inset:0; width:100%; height:100%;
  object-fit:cover; object-position:center;
  z-index:0;
}

/* Διπλό overlay: λίγο σκοτάδι ΚΑΙ επάνω ΚΑΙ κάτω για αναγνωσιμότητα */
#services .card::before, 
#services .card::after{
  content:""; position:absolute; inset:0; z-index:1; pointer-events:none;
}
#services .card::before{
  /* κάτω → για περιγραφή/κουμπί */
  background: linear-gradient(
    to top,
    rgba(0,0,0,.55) 0%,
    rgba(0,0,0,.30) 35%,
    rgba(0,0,0,.10) 60%,
    rgba(0,0,0,0) 80%
  );
}
#services .card::after{
  /* πάνω → για τίτλο */
  background: linear-gradient(
    to bottom,
    rgba(0,0,0,.45) 0%,
    rgba(0,0,0,.18) 35%,
    rgba(0,0,0,0) 60%
  );
}

/* Το wrapper του κειμένου δεν είναι πλέον positioned */
#services .body{
  position:static; color:#fff;
}

/* Τίτλος: πάνω-αριστερά */
#services .body h3{
  position:absolute; top:16px; left:16px; right:16px; z-index:2;
  margin:0; max-width:28ch; line-height:1.22;
  text-shadow:0 1px 2px rgba(0,0,0,.28);
  text-wrap:balance; word-break:normal; hyphens:manual;
}

/* Περιγραφή: κάτω-αριστερά, ακριβώς πάνω από το κουμπί */
#services .body p{
  position:absolute; left:16px; right:16px; bottom:56px; z-index:2;
  margin:0; max-width:32ch; line-height:1.35; opacity:.96;
  display:-webkit-box; -webkit-line-clamp:3; -webkit-box-orient:vertical; overflow:hidden;
}

/* Κουμπί: κάτω-αριστερά */
#services .actions{
  position:absolute; left:16px; bottom:16px; z-index:2;
}
#services .btn.btn-ghost{
  padding:6px 10px; font-size:14px; line-height:1; border-radius:10px;
  backdrop-filter:saturate(120%) blur(2px);
  background:rgba(20,20,20,.25);
  color:#fff; border-color:rgba(255,255,255,.34);
}
#services .btn.btn-ghost:hover{
  background:rgba(255,255,255,.18);
  border-color:rgba(255,255,255,.45);
  transform:none;
}


/* Contact block links */
/* ===================== CONTACT  ===================== */
.contact-wrap{
  display:grid;
  grid-template-columns: 1fr 1.1fr;
  gap: 28px;
  align-items: start;
}

/* κρίσιμο για να μη κάνει overflow σε mobile */
.contact-wrap > *{ min-width: 0; }

@media (max-width: 900px){
  .contact-wrap{ grid-template-columns: 1fr; }
}

.contact-kicker{
  font-size: 12px;
  letter-spacing: .18em;
  font-weight: 800;
  text-transform: uppercase;
  color: var(--sea);
  margin-bottom: 10px;
}

.contact-title{
  margin: 0 0 10px;
  font-size: clamp(34px, 4vw, 56px);
  line-height: 1.05;
}

.contact-lead{
  margin: 0 0 10px;
  color: var(--ink-soft);
  font-size: 16px;
  line-height: 1.7;
  max-width: 56ch;
}

.contact-hours{
  margin: 0 0 18px;
  color: var(--ink-soft);
  font-size: 14px;
  line-height: 1.6;
  opacity: .95;
}

.contact-list{
  display:flex;
  flex-direction: column;
  gap: 12px;
  margin-top: 8px;
}

.contact-row{
  display:grid;
  grid-template-columns: 44px 1fr;
  gap: 14px;
  align-items: start;

  text-decoration: none;
  color: var(--ink);

  padding: 14px 14px;
  border: 1px solid rgba(0,0,0,.08);
  border-radius: 16px;
  background: rgba(255,255,255,.72);
  backdrop-filter: blur(6px);

  transition: transform .15s ease, border-color .15s ease, background .15s ease;
}

.contact-row:hover{
  transform: translateY(-1px);
  border-color: rgba(0,0,0,.14);
  background: rgba(255,255,255,.86);
}

.contact-text{
  display:block;
  min-width: 0;
}

.contact-label{
  display:block;
  font-weight: 800;
  font-size: 18px;
  line-height: 1.2;
  margin: 2px 0 6px;
}

.contact-value{
  display:block;
  font-weight: 500;
  color: var(--ink-soft);
  font-size: 15px;
  line-height: 1.55;
}

.contact-note{
  display:block;
  margin-top: 6px;
  font-size: 13px;
  color: var(--ink-soft);
  opacity: .92;
}

/* Map */
.contact-map{
  border-radius: 18px;
  overflow: hidden;
  border: 1px solid rgba(0,0,0,.08);
  background: #fff;
  aspect-ratio: 16 / 12;
  min-height: 320px;
  width: 100%;
}

.contact-map iframe{
  width: 100%;
  height: 100%;
  border: 0;
  display: block;
}

@media (max-width: 900px){
  .contact-map{ min-height: 360px; }
}

.contact-head{
  grid-column: 1 / -1;     /* πάνω από αριστερά + δεξιά */
  text-align: center;
  margin-top: -10px;        /* πιο πάνω (ρύθμισέ το -6 έως -16 αν θες) */
  margin-bottom: 18px;
}

/* για να μην έχει υπερβολικό κενό */
.contact-lead{ margin: 0 auto 10px; }
.contact-hours{ margin: 0 auto 0; }

/* Remove icon box completely */
.contact-ico{
  width: auto;
  height: auto;
  border: 0;
  background: transparent;
  border-radius: 0;
  display: block;       /* όχι grid */
  place-items: unset;   /* για σιγουριά */
  padding: 0;
}

.contact-ico svg{
  width: 32px;   /* παίξε 30–36 */
  height: 32px;
  display: block;
}
.contact-row{
  grid-template-columns: 34px 1fr; /* λίγο μεγαλύτερο από το svg */
  align-items: center;             /* κάθεται ωραία με το κείμενο */
}

/* ---------- Social ---------- */
#contact { text-align: center; }

.socials a{
  margin: 0 0.5rem;
  color: var(--ink);
  text-decoration: none;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  line-height: 0;
}

.socials a:hover{ color: var(--wheat); }

.socials svg{
  width: 24px;
  height: 24px;
  vertical-align: middle;
  transition: transform 0.2s ease;
}

.socials a:hover svg{
  transform: scale(1.1);
  color: var(--wheat-soft);
}

.social-cta{
  margin: 10px 0 8px;
  font-size: .8rem;
  color: var(--ink);
  opacity: .9;
  margin-top: 1px;
}


.socials-wrap{
  display: inline-flex;
  align-items: center;
  gap: 10px;
}

.socials-title{
  line-height: 1.05;
  margin-bottom: 2px;
}

/* ===================== ROUTES (about.html) ===================== */
.routes .sub{ text-align:center; }

.route-grid{
  display:grid;
  grid-template-columns: repeat(2, minmax(0,1fr));
  gap:16px;
  margin-top: 14px;
}

@media (max-width: 820px){
  .route-grid{ grid-template-columns: 1fr; }
}

.route-card{
  background: rgba(255,255,255,.78);
  border: 1px solid rgba(0,0,0,.10);
  border-radius: 18px;
  padding: 14px 14px;
  box-shadow: 0 10px 30px rgba(0,0,0,.03);
}

@media (min-width: 821px){
  .route-card--center{
    grid-column: 1 / -1;
    justify-self: center;
    width: calc(50% - 8px);
  }
}

.route-head{
  display:flex;
  align-items: baseline;
  justify-content: space-between;
  gap: 10px;
  padding-bottom: 10px;
  margin-bottom: 10px;
  border-bottom: 1px solid rgba(0,0,0,.08);
}

.route-head h3{
  margin: 0;
  font-weight: 900;
  letter-spacing: .2px;
}

.route-badge{
  display:inline-flex;
  align-items:center;
  justify-content:center;
  padding: 6px 10px;
  border-radius: 999px;
  font-weight: 800;
  font-size: 12px;
  letter-spacing: .08em;
  text-transform: uppercase;
  color: var(--ink);
  background: color-mix(in oklab, var(--sea) 55%, white);
  border: 1px solid rgba(0,0,0,.10);
}

.route-split{
  display:grid;
  grid-template-columns: 1fr 1fr;
  gap: 14px;
}

@media (max-width: 560px){
  .route-split{ grid-template-columns: 1fr; }
}

.route-kicker{
  font-size: 12px;
  letter-spacing: .14em;
  font-weight: 800;
  text-transform: uppercase;
  color: var(--ink);
  opacity: .75;
  margin: 0 0 8px;
}

/* two columns, no separators */
.route-cols{
  display:grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: 10px 18px;
  margin-top: 6px;
}

.route-cols.single{
  grid-template-columns: 1fr;
}

@media (max-width: 560px){
  .route-cols{
    grid-template-columns: 1fr;
    gap: 8px;
  }
}

.route-col{
  display:grid;
  gap: 6px;
  justify-items: center;
}

.route-item{
  text-align: center;
  color: var(--ink-soft);
  font-size: 14px;
  line-height: 1.4;
}


/* TODO */
.sticky-call{
  position:fixed;bottom:1.5rem;right:1.5rem;
  width:56px;height:56px;
  display:flex;align-items:center;justify-content:center;
  font-size:1.4rem;border-radius:50%;
  z-index: 9999;  /*Stick above all*/
  background:var(--primary);color:#fff;box-shadow:0 4px 12px rgba(0,0,0,.3)
}