html{scroll-behavior:smooth}
body{margin:0;font-family:sans-serif}
.topbar{display:flex;justify-content:space-between;align-items:center;padding:12px 20px;background:#fff;height:72px;border-bottom:1px solid #eee;position:sticky;top:0;z-index:999}
.brand-link{display:flex;align-items:center;text-decoration:none;color:#000;transform:scale(1.1)}
.brand-icon{width:32px;margin-right:10px}
.nav a{margin-left:20px;text-decoration:none;font-weight:400;position:relative;color:#000}

.grid{display:grid;grid-template-columns:repeat(3,1fr)}
.cell{aspect-ratio:1/1;position:relative;overflow:hidden}

.bg-left-top{background:#FFEDB0}
.bg-center-top{background:#D689DC}
.bg-left-bottom{background:#A4D587}
.bg-form{background:#e8a869}

.video-cell video{width:100%;height:100%;object-fit:cover}

.center{text-align:center;display:flex;flex-direction:column;justify-content:center;align-items:center}

.btn-black{background:#000;color:#fff;padding:12px 20px;border:none;text-decoration:none;margin-top:10px;box-shadow:0 4px 0 rgba(0,0,0,0.4);min-width:140px;text-align:center;border-radius:2px}

.marquee{overflow:hidden;width:100%;white-space:nowrap;margin-top:10px}
.marquee span{display:inline-block;padding-left:100%;animation:marquee 12s linear infinite}
@keyframes marquee{0%{transform:translateX(0)}100%{transform:translateX(-100%)}}

.animate-in{opacity:0;transform:translateY(20px);animation:fadeIn 0.8s forwards}
.delay1{animation-delay:0.2s}
.delay2{animation-delay:0.4s}
.delay3{animation-delay:0.6s}
@keyframes fadeIn{to{opacity:1;transform:translateY(0)}}

.handwritten{font-family:'Mynerve',cursive;font-size:22px}
.about-top{background:#f3e1a3;padding:40px;display:flex;align-items:center;justify-content:space-between}
.about-bottom{background:#e8a869;padding:40px;display:flex;align-items:center}


/* Micro-animations (premium & subtle) */
@keyframes floaty {
  0%,100% { transform: translateY(0); }
  50% { transform: translateY(-8px); }
}
@keyframes floaty2 {
  0%,100% { transform: translateY(0) rotate(0deg); }
  50% { transform: translateY(-6px) rotate(-0.6deg); }
}
.btn-black{ transition: transform .15s ease, box-shadow .15s ease; ;min-width:140px;text-align:center;border-radius:2px}
.btn-black:hover{ transform: translateY(-1px); box-shadow:0 6px 0 rgba(0,0,0,0.35); }

/* Respect reduced motion */
@media (prefers-reduced-motion: reduce){
  .balloon-img, .coat-img, .animate-in, .marquee span { animation: none !important; }
  .btn-black{ transition:none !important; ;min-width:140px;text-align:center;border-radius:2px}
}


.cover-img{position:absolute;inset:0;width:100%;height:100%;object-fit:cover;display:block}

.hero-video{width:100%;height:100%;object-fit:cover;display:block}

.brand-name{font-weight:900}
.brand-sub{font-weight:300}



/* Brand one-line */
.brand-link{transform:none}
.brand-inline{display:flex;align-items:baseline;gap:10px;white-space:nowrap}
.brand-name{font-weight:900}
.brand-sub{font-weight:300}

/* Menu spacing + hover */
.nav{display:flex;gap:25px}
.nav a{color:#000;text-decoration:none;font-weight:400;letter-spacing:0.08em;font-size:15px}
.nav a:hover{font-weight:700;text-decoration:none}

@media (max-width: 980px){ .grid{grid-template-columns:repeat(2,1fr)} }
@media (max-width: 680px){ .grid{grid-template-columns:1fr} .cell{aspect-ratio:auto;min-height:520px} }

.bg-center-top{padding:18px}
.title-img{max-width:86%;height:auto}
.subtitle{font-size:1.15em;font-weight:800;line-height:1.25;margin:10px 0 8px}

.marquee{margin-top:26px;font-size:1.05em}
.marquee span{animation-duration:24s}

.coat-cell{background:#A9553D}

.form{width:min(420px,85%);align-items:flex-start;text-align:left}
.form h2{margin:0 0 14px}
.form input[type="email"]{width:100%;padding:10px 0;border:none;border-bottom:2px solid #000;background:transparent}
.form label{display:flex;gap:10px;align-items:flex-start;margin:14px 0 16px;max-width:100%}
.form button{align-self:flex-start}
#formMessage{margin-top:12px;font-weight:700}

.footer{padding:24px 20px;background:#fff}
.footer-inner{display:flex;justify-content:space-between;align-items:center;gap:20px}
.footer-brand{display:flex;flex-direction:column}
.footer-name{font-weight:800}
.footer-sub{font-weight:300}
.footer-actions{display:flex;gap:14px;align-items:center}
.footer-fb{width:42px;height:42px;border-radius:999px;background:#000;color:#fff;display:flex;align-items:center;justify-content:center;text-decoration:none;font-weight:800}
.footer-phones{margin-top:10px;font-size:10px}

.about-page{display:flex;flex-direction:column}
.about-strip{position:relative;display:flex;gap:30px;align-items:flex-start;padding:50px 60px}
.about-cream{background:#f3e1a3}
.about-orange{background:#e8a869;align-items:center}
.about-copy{max-width:620px}

.about-copy h1{
  margin:0 0 14px;
  font-family:'Mynerve', cursive;
  font-weight:400;
}



.about-paras p{margin:0 0 14px;line-height:1.5}
.about-arrow{position:absolute;left:60px;top:185px;width:520px;max-width:60vw;pointer-events:none}
.about-hi{width:min(360px,32vw);height:auto;align-self:flex-start;margin-left:auto}
.about-portrait{width:min(360px,28vw);height:auto}
.about-bio{max-width:720px}
.about-role{font-family:'Mynerve',cursive;font-size:28px;margin-top:6px}
@media (max-width: 900px){
  .about-strip{flex-direction:column;padding:34px 22px}
  .about-arrow{position:static;width:min(520px,90%);margin:10px 0}
  .about-hi{width:min(320px,80%);margin-left:0}
  .about-portrait{width:min(320px,80%)}
}

/* Overlap hero elements (balloon & coat) */
.balloon-cell, .coat-cell{overflow:visible !important; z-index:5}
/* Footer layout v5 */
.footer-inner{
  display:grid;
  grid-template-columns: 1fr auto 1fr;
  align-items:center;
}
.footer-brand{justify-self:start}
.footer-phones{
  justify-self:center;
  font-size:15.6px; /* ~30% larger than 12px baseline */
  font-weight:400;
}
.footer-right{justify-self:end}
.footer-mail{
  margin-top:12px;
  text-align:center;
  font-size:15.6px;
}
.mail-label{font-weight:800}

/* Video: no stroke/border */
.hero-video, .video-cell video{
  border:0 !important;
  outline:0 !important;
  box-shadow:none !important;
  display:block;
}

/* Push button + ticker lower */
.bg-center-top .btn-black{margin-top:46px}
.marquee{margin-top:70px}

.btn-black{font-size:16px;font-weight:600;letter-spacing:0.02em}
.form button.btn-black{font-size:16px;font-weight:600}

/* Overlap hero elements resized + float */
.balloon-cell, .coat-cell{overflow:visible !important; z-index:5}
@keyframes floaty {
  0%,100% { transform: translateY(0); }
  50% { transform: translateY(-8px); }
}
@keyframes floaty2 {
  0%,100% { transform: translateY(0) rotate(0deg); }
  50% { transform: translateY(-6px) rotate(-0.6deg); }
}
@media (prefers-reduced-motion: reduce){
  .balloon-img,}

/* About refinements */
.about-cream{align-items:flex-start}
.about-copy{position:relative}
.about-arrow{
  position:static !important;
  width:min(156px, 28vw) !important; /* ~30% of previous 520px */
  max-width:28vw !important;
  margin-left:18px !important;
}
/* Put arrow to the right of the text block by using a row wrapper */
.about-cream{gap:22px}
.about-hi{width:min(450px,40vw) !important} /* +25% */
.about-portrait{width:min(306px,24vw) !important} /* -15% from 360 */
.role-gap{height:12px}

/* Footer v6: mail inline row */
.footer-inner{
  display:grid;
  grid-template-columns: auto 1fr auto auto;
  align-items:baseline;
  gap:22px;
}
.footer-brand{justify-self:start}
.footer-phones{justify-self:center;font-size:15.6px}
.footer-mailbtn{
  justify-self:center;
  font-size:15.6px;
  color:#000;
  text-decoration:none;
  white-space:nowrap;
}
.footer-mailbtn:hover{text-decoration:underline}

/* Header alignment v6 */
.topbar{align-items:center}
.brand-link{display:flex;align-items:center;gap:10px}
.brand-inline{display:flex;gap:10px;align-items:baseline;white-space:nowrap}

/* Overlap sizing v6 (+110%) */
.balloon-cell, .coat-cell{overflow:visible !important}
/* v7 swap: balloon now in top-left */
.bg-left-top.balloon-cell{overflow:visible !important; z-index:6}
/* bottom-left now covers: keep overflow hidden */
.bg-left-bottom{overflow:hidden !important}

/* Simple content page */
.page-simple{
  max-width: 980px;
  margin: 0 auto;
  padding: 36px 20px 60px;
}
.page-simple h1{margin:0 0 12px}
.page-simple .lead{font-size:1.05em;line-height:1.45;margin:0 0 20px}
.page-simple h2{margin:22px 0 10px}
.page-simple p{margin:0 0 12px;line-height:1.55}
.page-simple ul{margin:0 0 12px 18px}
.page-actions{display:flex;gap:14px;flex-wrap:wrap;margin-top:18px}

/* v9 balloon + coat 150% larger */
/* v10 adjustments */
/* Ensure title above everything */
.bg-center-top img.title-img,
.bg-center-top .title-img,
.bg-center-top .title{
  position:relative;
  z-index:100 !important;
}

/* v11 balloon double size, keep overlap same */
@media (max-width:720px){
  .footer-contact{flex-direction:column;gap:6px}
}
/* Ensure menu visible on all pages (DESKTOP only; allow hamburger on mobile) */
@media (min-width: 861px){
  .topbar .nav{display:flex !important; opacity:1 !important; visibility:visible !important}
}

/* v13: keep header/menu same size on all pages */
.topbar{
  height:72px;
  padding:14px 28px;
  box-sizing:border-box;
}
.brand-name{font-size:20px; font-weight:900; line-height:1}
.brand-sub{font-size:16px; font-weight:300; line-height:1}
.nav a{
  font-size:15px;
  line-height:1;
  letter-spacing:0.10em; /* keep the airy look */
  padding:6px 0;
}
/* prevent any page styles from inflating header */
.page-simple, .about-page, body{font-size:16px}

/* v13: balloon sizing/position (override previous 200%) */
@media (max-width: 900px){
  }

.brand-link{align-items:center !important}
.brand-icon{width:34px !important; height:34px !important}
.brand-name{font-size:20px !important; font-weight:900 !important; line-height:1 !important}
.brand-sub{font-size:16px !important; font-weight:300 !important; line-height:1 !important}
.nav{gap:26px !important}
.nav a{
  font-size:15px !important;
  line-height:1 !important;
  letter-spacing:0.10em !important;
  padding:6px 0 !important;
}

/* v14: balloon slightly more right */
/* v15 fade-in animation for contact form */
.fade-in{
  opacity:0;
  transform:translateY(24px);
  transition:opacity 0.9s cubic-bezier(.22,.61,.36,1), transform 0.9s cubic-bezier(.22,.61,.36,1);
}
.fade-in.visible{
  opacity:1;
  transform:translateY(0);
}

/* v16 balloon 30% more left */


/* ===== Consolidated FINAL overrides (clean) ===== */

/* Header/menu: identical on every page */
header.topbar, .topbar{
  display:flex;
  justify-content:space-between;
  align-items:center;
  height:72px !important;
  padding:12px 20px !important;
  background:#fff;
  box-sizing:border-box !important;
}
.brand-link{display:flex;align-items:center;gap:10px;text-decoration:none;color:#000;transform:none !important}
.brand-icon{width:34px !important;height:34px !important}
.brand-inline{display:flex;align-items:baseline;gap:10px;white-space:nowrap}
.brand-name{font-size:20px !important;font-weight:900 !important;line-height:1 !important}
.brand-sub{font-size:16px !important;font-weight:300 !important;line-height:1 !important}
.nav{display:flex;gap:26px !important}
.nav a{
  color:#000 !important;
  text-decoration:none !important;
  font-size:15px !important;
  font-weight:400;
  letter-spacing:0.08em !important;
  line-height:1 !important;
  padding:6px 0 !important;
}
.nav a:hover{font-weight:700;text-decoration:none !important}

/* Balloon (top-left) */
.bg-left-top.balloon-cell{overflow:visible !important; z-index:6}
.bg-left-top .balloon-img{
  position:absolute;
  width:min(92%, 520px) !important;
  left:60% !important;           /* <-- άλλαζεις αυτό για θέση */
  top:10% !important;
  transform:translateX(-50%);
  object-fit:contain;
  z-index:60 !important;
}
@media (max-width: 900px){
  .bg-left-top .balloon-img{
    width:min(88%, 420px) !important;
    left:18% !important;
    top:14% !important;
  }
}

/* Coat (bottom-right or wherever it sits) */
.coat-cell{overflow:visible !important}
.coat-img{
  position:absolute;
  width:72% !important;
  right:33% !important;
  top:-10% !important;
  object-fit:contain;
  z-index:60 !important;
}

/* Subtle float (disable if reduced motion) */
@keyframes floaty {
  0%,100% { transform: translateY(0) translateX(-50%); }
  50% { transform: translateY(-8px) translateX(-50%); }
}
@keyframes floaty2 {
  0%,100% { transform: translateY(0); }
  50% { transform: translateY(-6px); }
}
.bg-left-top .balloon-img{animation: floaty 3.6s ease-in-out infinite}
.coat-img{animation: floaty2 4.2s ease-in-out infinite}
@media (prefers-reduced-motion: reduce){
  .bg-left-top .balloon-img, .coat-img{animation:none !important}
}


/* =========================
   Global page fade-in
   ========================= */
body.page-fade {
  opacity: 0;
  transform: translateY(8px);
  transition: opacity 450ms ease, transform 450ms ease;
}
body.page-fade.is-ready {
  opacity: 1;
  transform: translateY(0);
}

.topbar{

  position:sticky;
  top:0;
  z-index:999;

  height:72px;

  display:flex;
  justify-content:space-between;
  align-items:center;

  padding:12px 22px;

  background:#fff;

  box-sizing:border-box;

  border-bottom:1px solid #eee;
}


/* brand */

.brand-link{

  display:flex;
  align-items:center;

  gap:10px;

  text-decoration:none;
  color:#000;

}


.brand-icon{

  width:34px;
  height:34px;

}


.brand-inline{

  display:flex;
  align-items:baseline;

  gap:10px;

  white-space:nowrap;

}


.brand-name{

  font-size:20px;
  font-weight:900;
  line-height:1;

}


.brand-sub{

  font-size:16px;
  font-weight:300;
  line-height:1;

}


/* menu */

.nav{

  display:flex;
  align-items:center;

  gap:26px;

}


.nav a{

  font-size:15px;
  font-weight:400;

  letter-spacing:0.08em;

  text-decoration:none;

  color:#000;

  line-height:1;

  padding:6px 0;

}


.nav a:hover{

  font-weight:700;

}
/* =========================
   Footer (same on ALL pages)
   ========================= */
.site-footer{
  background: #fff;
  border-top: 1px solid rgba(0,0,0,0.08);
}
.site-footer .footer-inner{
  max-width: 1400px;
  margin: 0 auto;
  padding: 18px 20px;
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 18px;
  font-size: 16px; /* same size for ALL footer text */
}
.site-footer .footer-inner > *{ white-space: nowrap; }
.site-footer .footer-left{ min-width: 240px; }
.site-footer .footer-thin{ font-weight: 300; }
.site-footer .footer-center{ flex: 1; display:flex; justify-content:center; align-items:center; gap:18px; }
.site-footer .footer-center strong{ font-weight: 900; }
.site-footer .footer-center a{ color: inherit; text-decoration: none; }
.site-footer .footer-center a:hover{ text-decoration: underline; }
.site-footer .footer-right{ min-width: 52px; display:flex; justify-content:flex-end; }
.site-footer .fb-btn{ display:inline-flex; align-items:center; justify-content:center; width:42px; height:42px; border-radius:999px; background:#000; color:#fff; text-decoration:none; font-weight:900; font-family: Arial, sans-serif; }

@media (max-width: 860px){
  .nav-links{ gap: 16px; letter-spacing: 0.12em; }
  .site-header .header-inner{ padding: 14px 16px; }
  .footer-inner{ padding: 14px 16px; }
}
@media (max-width: 560px){
  .footer-inner{ flex-wrap: wrap; justify-content: center; }
}

/* =========================
   Instructions (portfolio slider)
   ========================= */
.instructions-page{ background: var(--cream, #FFEDB0); min-height: calc(100vh - 120px); }
.instructions-wrap{ max-width: 1400px; margin: 0 auto; padding: 34px 22px 70px; }
.instructions-slider{ display: grid; grid-template-columns: 1fr 420px; gap: 34px; align-items: center; }
.slide-media{ position: relative; display:flex; align-items:center; justify-content:center; }
.slide-media img{ max-height: 78vh; width:auto; max-width:100%; border-radius:12px; box-shadow:0 10px 30px rgba(0,0,0,0.12); background:no; }
.slide-text{ padding: 16px 6px; }
.slide-text h2{ margin:0 0 10px; font-size:28px; }
.slide-text p{ margin:0; line-height:1.6; }
.slide-nav{ margin-top:18px; display:flex; gap:12px; align-items:center; }
.slide-media{ position:relative; }
.nav-btn{ border:0; background:transparent; cursor:pointer; padding:4px; transition: transform 160ms ease, opacity 160ms ease; }
.nav-btn:hover{ transform: translateY(-1px); }
.nav-btn:active{ transform: translateY(0); opacity:0.85; }
.nav-btn img{ height:18px; width:auto; display:block; }

/* Instructions arrows: sit outside the image (left/right) */
.nav-left{ position:absolute; left:-30px; top:50%; transform:translateY(-50%); }
.nav-right{ position:absolute; right:-30px; top:50%; transform:translateY(-50%); }

/* =============================
   Mobile-first responsive header
   ============================= */

.menu-toggle{ display:none; width:44px; height:44px; border:0; background:transparent; cursor:pointer; border-radius:10px; align-items:center; justify-content:center; gap:5px; }
.menu-toggle span{ display:block; width:22px; height:2px; background:#000; border-radius:99px; }

@media (max-width: 860px){
  .topbar{ padding:10px 14px; height:auto; }

  .menu-toggle{ display:grid; }

  /* Mobile nav panel */
  .topbar .nav{ 
    display:none;
    position:fixed;
    left:12px; right:12px;
    top:76px;
    background:#fff;
    border:1px solid #eee;
    border-radius:16px;
    padding:10px 12px;
    box-shadow:0 12px 30px rgba(0,0,0,0.12);
    flex-direction:column;
    gap:10px !important;
    z-index:1000;
  }
  .topbar .nav a{ margin:0 !important; padding:10px 8px; font-size:15px; letter-spacing:0.06em; }

  html.nav-open .topbar .nav{ display:flex; }

  /* Prevent taps behind the menu feeling weird */
  html.nav-open body{ overflow:hidden; }
}

/* Slider arrows closer to photo (desktop + mobile) */
.nav-left{ left:-16px; }
.nav-right{ right:-16px; }

@media (max-width: 860px){
  .nav-left{ left:6px; }
  .nav-right{ right:6px; }
  .nav-btn img{ height:20px; }
}
.slide-counter{ font-weight:400; opacity:0.75; font-size:12px; font-style:italic; }
.slide-text h2{ font-family: 'Mynerve',cursive; font-weight:400; }
.slide-fade{ opacity:0; transform: translateY(6px); transition: opacity 260ms ease, transform 260ms ease; }
.slide-fade.is-visible{ opacity:1; transform: translateY(0); }
@media (max-width: 980px){
  .instructions-slider{ grid-template-columns: 1fr; }
  .slide-text{ text-align:center; }
  .slide-nav{ justify-content:center; }
}

/* =========================
   MOBILE FIXES (non-desktop impacting)
   - footer doesn't overflow/cut
   - balloon stays on-screen
   ========================= */

/* Prevent horizontal cut/overflow on small screens */
@media (max-width: 860px){
  *{ box-sizing:border-box; }
  body{ overflow-x:hidden; }
}

/* Footer: allow wrap on mobile (was forced nowrap) */
@media (max-width: 560px){
  .site-footer .footer-inner{
    flex-wrap: wrap;
    justify-content: center;
  }
  .site-footer .footer-inner > *{
    white-space: normal !important;
  }
}

/* Balloon: keep inside viewport on mobile */
@media (max-width: 768px){
  .bg-left-top .balloon-img{
    width: min(78%, 320px) !important;
    left: 50% !important;
    top: 8% !important;
    transform: translateX(-50%) !important;
  }
}

/* Extra-small phones */
@media (max-width: 420px){
  .bg-left-top .balloon-img{
    width: min(86%, 300px) !important;
    top: 6% !important;
  }
}




.menu-toggle span{
  background: #000 !important;
}



/* ===== Header styles that MATCH header.js ===== */
#site-header .header-container{
  display:flex;
  justify-content:space-between;
  align-items:center;
  padding:12px 20px;
  background:#fff;
  border-bottom:1px solid #eee;
  position:sticky;
  top:0;
  z-index:999;
}

#site-header .logo{
  font-weight:900;
  color:#000;
}

/* Desktop nav */
#site-header #nav{
  display:flex;
  gap:26px;
  align-items:center;
}
#site-header #nav a{
  color:#000;
  text-decoration:none;
  font-size:15px;
  letter-spacing:0.08em;
}
#site-header #nav a:hover{ font-weight:700; }

/* Hamburger: NO box, black icon */
#site-header .hamburger{
  display:none;            /* hidden on desktop */
  background:transparent;
  border:0;
  color:#000;
  font-size:30px;
  line-height:1;
  cursor:pointer;
  user-select:none;
  padding:6px 10px;
}

/* Mobile behavior */
@media (max-width: 860px){
  #site-header .hamburger{ display:block; }

  #site-header #nav{
    display:none;          /* closed by default */
    position:fixed;
    left:12px; right:12px;
    top:76px;
    background:#fff;
    border:1px solid #eee;
    border-radius:16px;
    padding:10px 12px;
    box-shadow:0 12px 30px rgba(0,0,0,0.12);
    flex-direction:column;
    gap:10px;
    z-index:1000;
  }

  #site-header #nav.open{ display:flex; } /* <-- αυτό ανοίγει με το JS */

  #site-header #nav a{
    padding:10px 8px;
    margin:0;
  }
}














/* ===== HEADER (matches header.js) ===== */
#site-header .header-container{
  display:flex;
  justify-content:space-between;
  align-items:center;
  padding:12px 20px;
  background:#fff;
  height:72px;
  border-bottom:1px solid #eee;
  position:sticky;
  top:0;
  z-index:999;
}

#site-header .logo{
  font-weight:900;
  color:#000;
}

/* Desktop nav */
#site-header #nav{
  display:flex;
  gap:22px;
  align-items:center;
}
#site-header #nav a{
  color:#000;
  text-decoration:none;
}

/* Hamburger: black icon, NO box */
#site-header .hamburger{
  color:#000;
  background:transparent;
  border:0;
  box-shadow:none;
  padding:6px 10px;
  font-size:30px;
  line-height:1;
  cursor:pointer;
  user-select:none;
  display:none; /* hide on desktop */
}

/* Mobile */
@media (max-width: 860px){
  #site-header .hamburger{ display:block; }  /* show on mobile */
  #site-header #nav{ display:none; }         /* closed by default */
  #site-header #nav.open{
    display:flex;
    position:fixed;
    left:12px; right:12px;
    top:76px;
    background:#fff;
    border:1px solid #eee;
    border-radius:16px;
    padding:12px;
    flex-direction:column;
    gap:10px;
    z-index:1000;
  }
}








.demo-download{
display:flex;
flex-direction:column;
align-items:center;
margin-top:15px;
text-decoration:none;
}

.demo-download-icon{
width:130px;
cursor:pointer;
transition:transform 0.2s ease;
}

.demo-download-icon:hover{
transform:scale(1.08);
}

.demo-download-text{
font-family:"Mynerve", cursive;
font-size:17px;
margin-top:8px;
color:#000;
}





/* ensure feedback header sits below main header */
.feedback-header{
  margin-top:72px;
}








/* Contact form title styling */
.contact-title{
  margin:0 0 14px;
  line-height:1.15;
}

.contact-title-top{
  display:block;
  font-family:'Mynerve', cursive;
  font-weight:400;
  font-size:28px;
  margin-bottom:4px;
}

.contact-title-bottom{
  display:block;
  font-family:sans-serif;
  font-weight:700;
  font-size:20px; /* 2pt smaller from typical 22px look */
}





/* Hero subtitle typography refinement */

.subtitle{
  text-align:center;
}

/* main message → lighter + extended */
.subtitle-main{
  display:block;
  font-weight:500;          /* λιγότερο bold */
  letter-spacing:0em;    /* extended feel */
  font-size:1.0em;
  line-height:1.35;
}

/* audience → cursive elegant */
.subtitle-audience{
  display:block;
  margin-top:40px;
  font-family:'Mynerve', cursive;
  font-weight:500;
  font-size:1.40em;
  letter-spacing:0.00em;
  line-height:1.4;
}




/* Name + role on one line */
.about-name-role{
  margin:0 0 14px;
  display:flex;
  align-items:baseline;
  gap:12px;
  flex-wrap:wrap; /* mobile safety */
}

/* name NOT bold */
.about-name{
  font-weight:100;
  font-size:28px;
}

/* role cursive */
.about-role{
  font-family:'Mynerve', cursive;
  font-weight:400;
  font-size:28px;
}




/* Custom "τι είναι;" button using PNG bubble */
.bg-center-top .btn-black{

  /* keep same size footprint */
  min-width:150px;
  height:100px;

  /* use your PNG */
  background:url("btn-what.png") no-repeat center center;
  background-size:100% 100%;

  /* remove old styling */
  border:none;
  box-shadow:none;

  /* text styling */
  font-size:23px;       /* <-- άλλαξε όσο θέλεις */
  font-weight:700;
  letter-spacing:0.04em;

  /* alignment */
  display:flex;
  align-items:center;
  justify-content:center;

  /* keep positioning same */
  padding:0 22px;

  /* keep text readable */
  color:#000;
}





/* Marquee κάτω από τη φόρμα — εμφανίζεται με scroll */
.marquee-contact{
  margin-top:28px;
  width:100%;
  text-align:center;

  opacity:0;
  transform:translateY(10px);
  transition:opacity 380ms ease, transform 380ms ease;
  pointer-events:none;
}

.marquee-contact.is-visible{
  opacity:1;
  transform:translateY(0);
}

.marquee-contact span{
  color:#000;
  font-weight:400;
  letter-spacing:0.06em;
  font-size:14px;
  text-shadow:none;
}





/* κρατά το section ως reference */
.bg-form{
  position:relative;
}

/* το marquee πάει χαμηλά, χωρίς να μετακινεί τη φόρμα */
.marquee-contact{
  position:absolute;
  left:0;
  right:0;
  bottom:14px;   /* ρύθμισε αυτό για ακριβή θέση */

  text-align:center;
}

.marquee-contact span{
  color:#000;
  font-weight:400;
  letter-spacing:0.06em;
  font-size:14px;
  text-shadow:none;
}