:root{
  --stone:#f5f2ea;
  --bronze:#bfa677;
  --ink:#20201f;
  --ink-soft:#3b3b39;
  --accent:#23364a;
  --accent-2:#334d6e;
  --line:#e3dac8;
  --paper:#ffffff;
}
*{box-sizing:border-box}
html,body{margin:0;padding:0;background:var(--stone);color:var(--ink);font-family:"Source Serif 4", serif}
img{max-width:100%;height:auto;display:block}
a{color:var(--accent);text-decoration:none}
a:hover{text-decoration:underline}
.small{font-size:.92rem;color:#5a5a59}
.note{color:#6b6b69;font-size:.95rem}

/* Top frieze */
.frieze{height:26px;background:repeating-linear-gradient(90deg, var(--bronze) 0 26px, rgba(0,0,0,.08) 26px 52px);box-shadow:inset 0 -1px 0 rgba(0,0,0,.15)}

/* Meander separator */
.meander{height:14px;background:repeating-linear-gradient(90deg, var(--accent) 0 12px, transparent 12px 24px)}

/* Grid */
.columns{display:grid;grid-template-columns:repeat(12,1fr);gap:18px;max-width:1100px;margin:0 auto;padding:0 18px}
.col{grid-column:span 12}
@media(min-width:900px){
  .col-6{grid-column:span 6}
  .col-4{grid-column:span 4}
  .col-8{grid-column:span 8}
  .col-12{grid-column:span 12}
}

/* Hero */
header.hero{position:relative;padding:38px 0 28px;text-align:center;background:
  radial-gradient(1000px 420px at 50% -180px,#fff 0,var(--stone) 70%);
  overflow:hidden}
/* Hide watermark on phones for καθαρή συμμετρία */
header.hero::after{display:none}
@media(min-width:900px){
  header.hero{padding:64px 0 44px}
  header.hero::after{
    content:"";position:absolute;inset:-10% -5% auto -5%;height:110%;
    background-image:url('../images/logo.png');background-repeat:no-repeat;background-position:center 40%;background-size:420px;
    opacity:.06;pointer-events:none;filter:grayscale(1);display:block
  }
}
.logo{width:88px;margin:0 auto 12px;filter:drop-shadow(0 1px 0 rgba(0,0,0,.08))}
@media(min-width:900px){.logo{width:120px;margin-bottom:14px}}
h1{font-family:"Cormorant Garamond",serif;
   font-size:clamp(24px,6.2vw,46px);
   line-height:1.15;letter-spacing:.3px;margin:8px auto 8px;
   max-width:18ch;text-wrap:balance}
.tagline{text-align:center;margin:0 auto 10px;color:var(--ink-soft);font-family:Inter,system-ui,-apple-system,Segoe UI,Roboto,Arial,sans-serif;max-width:34ch}

/* NAV */
nav.mainnav{position:sticky;top:0;z-index:50;background:rgba(245,242,234,.85);backdrop-filter:saturate(120%) blur(6px);
  border-top:3px solid var(--bronze);border-bottom:1px solid var(--line);transition:box-shadow .25s ease}
nav.mainnav.scrolled{box-shadow:0 6px 18px rgba(0,0,0,.08)}
.nav-inner{display:flex;align-items:center;justify-content:space-between;padding:10px 18px}
.brand{display:flex;align-items:center;gap:10px;font:700 14px/1 Inter,system-ui,-apple-system,Segoe UI,Roboto,Arial,sans-serif;letter-spacing:.5px;text-transform:uppercase;color:var(--ink)}
.brandmark{width:28px;height:auto;filter:grayscale(1)}
.brandtext{display:none}
@media(min-width:900px){.brandtext{display:inline-block}}

/* Hamburger */
.hamburger{appearance:none;border:0;background:transparent;width:40px;height:32px;display:grid;place-items:center;gap:4px;padding:0;cursor:pointer}
.hamburger span{display:block;width:22px;height:2px;background:var(--ink);transition:transform .2s ease,opacity .2s ease}
/* Menu container */
.navmenu{display:flex;gap:18px}
.navmenu a{font:600 14px/1 Inter,system-ui,-apple-system,Segoe UI,Roboto,Arial,sans-serif;letter-spacing:.4px;text-transform:uppercase;padding:8px 10px;border-radius:6px}
.navmenu a:hover{background:#fff;box-shadow:0 0 0 1px var(--line) inset}

@media(max-width:899.98px){
  .navmenu{position:absolute;left:0;right:0;top:100%;display:none;flex-direction:column;background:#fff;border-bottom:1px solid var(--line);box-shadow:0 12px 24px rgba(0,0,0,.12)}
  .navmenu a{padding:14px 22px;border-radius:0}
  .navmenu.open{display:flex}
  /* animate hamburger into X */
  .hamburger[aria-expanded="true"] span:nth-child(1){transform:translateY(6px) rotate(45deg)}
  .hamburger[aria-expanded="true"] span:nth-child(2){opacity:0}
  .hamburger[aria-expanded="true"] span:nth-child(3){transform:translateY(-6px) rotate(-45deg)}
}

/* Sections */
section{padding:48px 0;border-bottom:1px solid #e9e4d7}
@media(min-width:900px){section{padding:56px 0}}
.readable{--measure:68ch;max-width:var(--measure)}
.readable p{line-height:1.72;text-align:justify;text-wrap:pretty}
#about .readable p:first-of-type::first-letter{
  font-family:"Cormorant Garamond",serif;font-size:3.2rem;line-height:.8;padding:.2rem .5rem .2rem 0;color:var(--accent)
}

/* Panels */
.panel{background:var(--paper);border:1px solid #e7e0d2;border-radius:18px;box-shadow:0 10px 30px rgba(0,0,0,.05)}
.panel.pad{padding:22px}
@media(min-width:900px){.panel.pad{padding:26px}}
.card h2,.card h3{font-family:"Cormorant Garamond",serif}
.card h2{font-size:24px;margin:0 0 8px}
.card h3{font-size:20px;margin:8px 0 10px}
@media(min-width:900px){
  .card h2{font-size:28px}
  .card h3{font-size:22px}
}

/* Lists */
.checklist{padding-left:0;list-style:none}
.checklist li{padding-left:28px;position:relative;margin:6px 0}
.checklist li::before{content:"◆";position:absolute;left:6px;top:0;color:var(--accent);font-size:.8rem}

/* Images */
.figure{border:1px solid #e3dac8;background:#fff;border-radius:14px;overflow:hidden}
.framed{box-shadow:0 10px 30px rgba(0,0,0,.06)}
.gallery .figure img{aspect-ratio:3/2;object-fit:cover}

/* CTA buttons */
.cta{display:inline-block;padding:10px 16px;border:1px solid var(--accent);border-radius:999px;font-weight:700;font-family:Inter,system-ui,-apple-system,Segoe UI,Roboto,Arial,sans-serif}
.cta.primary{background:var(--accent);color:#fff;border-color:var(--accent);text-decoration:none}
.cta.primary:hover{background:var(--accent-2);border-color:var(--accent-2)}

/* Contact grid */
.contact-grid{display:grid;grid-template-columns:repeat(12,1fr);gap:12px;margin-bottom:6px}
.contact-grid > *{grid-column:span 12}
@media(min-width:900px){.contact-grid > *{grid-column:span 4}}

/* Footer */
footer{padding:34px 0;background:#f0ede6;border-top:3px solid var(--bronze)}

/* Sticky phone/email pill */
.bar{position:fixed;right:14px;bottom:14px;background:#fff;border:1px solid var(--line);box-shadow:0 8px 24px rgba(0,0,0,.15);padding:10px 14px;border-radius:12px}
.bar a{font-weight:700}


/* --- Dropdown for Κλάδοι δικαίου --- */
.navmenu { align-items: center; }
.navmenu .dropdown{ position:relative; }
.navmenu .dropbtn{
  font:600 14px/1 Inter,system-ui,-apple-system,Segoe UI,Roboto,Arial,sans-serif;
  letter-spacing:.4px;text-transform:uppercase;padding:8px 10px;border-radius:6px;
  border:0;background:transparent;color:var(--ink);cursor:pointer
}
.navmenu .dropbtn:hover{ background:#fff; box-shadow:0 0 0 1px var(--line) inset }
.navmenu .dropdown-menu{
  position:absolute; top:calc(100% + 6px); right:0; min-width:280px;
  background:#fff;border:1px solid var(--line); box-shadow:0 12px 24px rgba(0,0,0,.12);
  border-radius:10px; padding:8px; display:none; z-index:60;
}
.navmenu .dropdown-menu a{
  display:block; padding:10px 12px; border-radius:6px; text-transform:none; letter-spacing:0;
}
.navmenu .dropdown-menu a:hover{ background:#f6f4ef }
@media(min-width:900px){
  .navmenu .dropdown:hover .dropdown-menu{ display:block }
}
@media(max-width:899.98px){
  .navmenu .dropdown-menu{ position:static; display:none; box-shadow:none; border:0; padding:0; }
  .navmenu .dropdown.open .dropdown-menu{ display:block }
  .navmenu .dropbtn{ width:100%; text-align:left; padding:14px 22px; border-radius:0 }
  .navmenu .dropdown-menu a{ padding:12px 22px }
}
/* Content pages */
.page-hero{padding:28px 0 10px;text-align:center}
.page-hero h1{margin:8px 0 0}
.content article.panel h2{margin-top:0}
.content .lead{font-weight:600;margin:.2rem 0 1rem;color:var(--ink-soft)}

/* --- Fix: keep dropdown open when moving mouse from button to menu (bridge the gap) --- */
.navmenu .dropdown{ position:relative; padding-bottom:8px; } /* extends hover area under button */
.navmenu .dropdown-menu{ top:100%; } /* remove vertical gap */
@media(min-width:900px){
  .navmenu .dropdown:hover .dropdown-menu,
  .navmenu .dropdown:focus-within .dropdown-menu{ display:block; } /* also open when focused/clicked */
}

/* --- Normalize nav item vertical alignment (desktop) --- */
@media(min-width:900px){
  .mainnav .nav-inner{ align-items:center; }
  .navmenu{ display:flex; align-items:center; gap:18px; }
  .navmenu a,
  .navmenu .dropbtn{
    display:inline-flex;
    align-items:center;
    height:42px;
    padding:0 12px;
    margin:0;
    line-height:1;
    vertical-align:middle;
    background:transparent;
    border:0;
    color:var(--ink);
    font:600 14px/1 Inter,system-ui,-apple-system,Segoe UI,Roboto,Arial,sans-serif;
    letter-spacing:.4px;
    text-transform:uppercase;
  }
}

/* --- Desktop fix: keep perfect alignment and preserve hover area --- */
@media(min-width:900px){
  .navmenu .dropdown{ padding-bottom:0; } /* remove extra height that lowered the button */
  .navmenu .dropdown::after{
    content:"";
    position:absolute;
    left:0; right:0;
    top:100%;
    height:10px; /* invisible bridge so the menu doesn't close */
  }
  .navmenu .dropdown-menu{ top:calc(100% + 0px); }
}

/* --- Image hero with rotating quotes --- */
.hero-banner{position:relative;overflow:hidden;background:#000}
.hero-banner .hero-media img{width:100%;height:340px;object-fit:cover;display:block;filter:brightness(.55)}
.hero-banner .hero-overlay{position:absolute;inset:0;display:flex;align-items:center;justify-content:center;text-align:center;padding:20px}
.hero-banner .rotator{max-width:1100px;margin:0 auto;color:#fff;font:600 24px/1.35 "Source Serif 4", Georgia, serif;text-shadow:0 2px 12px rgba(0,0,0,.6);opacity:0;transition:opacity .45s ease}
.hero-banner .rotator.show{opacity:1}
@media(min-width:900px){
  .hero-banner .hero-media img{height:400px}
  .hero-banner .rotator{font-size:30px}
}

/* --- Hero title: exactly 2 lines on laptop --- */
.hero .hero-content .hero-title{ 
  font-family:"Cormorant Garamond", Georgia, serif;
  font-weight:700;
  line-height:1.1;
  margin:8px 0 0;
  text-align:center;
}
.hero .hero-content .hero-title .t1,
.hero .hero-content .hero-title .t2{ display:block; }
@media(min-width:900px){
  .hero .hero-content .hero-title{ font-size:44px; }
  .hero .hero-content .hero-title .t2{ white-space:nowrap; }
}
@media(min-width:1200px){
  .hero .hero-content .hero-title{ font-size:50px; }
}

/* --- Force hero title to 2 lines on laptops --- */
@media(min-width:900px){
  .hero .hero-inner{ max-width:1200px; margin:0 auto; }
  .hero .hero-content{ max-width:1100px; margin:0 auto; }
  .hero .hero-content .hero-title{ font-size:clamp(40px, 4.2vw, 54px); }
  .hero .hero-content .hero-title .t1{ white-space:nowrap; }
  .hero .hero-content .hero-title .t2{ white-space:nowrap; overflow-wrap:normal; word-break:normal; }
}


/* --- Center hero title and ensure it fits in 2 lines on laptops --- */
@media(min-width:900px){
  .hero .hero-inner{ max-width:unset; }
  .hero .hero-content{ max-width:min(1100px, 90vw); margin-left:auto; margin-right:auto; text-align:center; }
  .hero .hero-content .hero-title{ font-size:clamp(32px, 3.2vw, 48px); }
  .hero .hero-content .hero-title .t1{ white-space:nowrap; }
  .hero .hero-content .hero-title .t2{ white-space:nowrap; }
}


/* --- Center & fit hero title to exactly two lines on laptops --- */
@media(min-width:900px){
  .hero .hero-content{ text-align:center; }
  .hero .hero-content .hero-title{
    max-width: 1200px;
    margin-left:auto; margin-right:auto;
    font-size: clamp(32px, 3vw, 42px); /* smaller cap so line 2 fits */
  }
  .hero .hero-content .hero-title .t1,
  .hero .hero-content .hero-title .t2{ white-space:nowrap; }
}


/* --- Mobile fix: center hero title on small screens --- */
@media(max-width: 899.98px){
  .hero .hero-content{ text-align:center; }
  .hero .hero-content .hero-title{
    margin-left:auto; margin-right:auto;
    text-align:center;
    font-size: clamp(28px, 8vw, 40px);
  }
  .hero .hero-content .hero-title .t1,
  .hero .hero-content .hero-title .t2{
    white-space: normal; /* allow natural wrapping on mobile */
  }
}

.hero-banner .hero-media img {
  transition: opacity 0.8s ease;
}


/* --- Always-visible fixed nav --- */
nav.mainnav {
  position: fixed;      /* αντί για sticky */
  top: 0;
  left: 0;
  right: 0;
  z-index: 1000;
  background: rgba(245,242,234,.95); /* ή #fff αν προτιμάς */
  backdrop-filter: saturate(120%) blur(6px);
  border-top: 3px solid var(--bronze);
  border-bottom: 1px solid var(--line);
  box-shadow: 0 6px 18px rgba(0,0,0,.08);
}

/* Δίνουμε χώρο στο περιεχόμενο για να μην “μπει” κάτω από το fixed nav */
body.has-fixed-nav {
  padding-top: var(--navH, 72px); /* set από JS ανάλογα με το ύψος του nav */
}

:root {
  --team-thumb-h: 260px;  /* adjust as needed; ~x2 από πριν */
}

/* Μόνο τα 3 κάτω κάτω στον #team */
#team .gallery .figure img {
  width: 100%;
  height: var(--team-thumb-h);
  object-fit: cover;   /* γιατί: να γεμίζει χωρίς παραμόρφωση */
  display: block;
  /* προαιρετικό: border-radius κλπ. κρατάνε από το .framed */
}



/* ΜΟΒΙLE FIX: μην κόβεις τις εικόνες */
@media (max-width: 640px) {
  /* 1 στήλη για περισσότερο πλάτος */
  #team .gallery { grid-template-columns: 1fr; }

  /* Σταμάτα το crop: άφησε τις εικόνες να πάρουν φυσικό ύψος */
  #team .gallery .figure img {
    height: auto !important;   /* ακυρώνει το προηγούμενο fixed height */
    max-height: none;
    width: 100%;
    object-fit: contain;       /* πλήρης εικόνα, χωρίς κόψιμο */
    display: block;
  }

  /* Αν κόβονται και στο #office, ξεκλείδωσε κι εκεί */
  #office .gallery .figure img {
    height: auto !important;
    max-height: none;
    width: 100%;
    object-fit: contain;
    display: block;
  }
}

@media (max-width: 900px) {
  /* το container της μπάρας */
  .entablature.mainnav .nav-inner {
    position: relative;
    min-height: 56px;           /* σταθερό ύψος για σωστό vertical centering */
    display: flex;
    align-items: center;         /* backup centering */
  }

  /* HAMBURGER: απόλυτο κεντράρισμα μέσα στη μπάρα */
  .hamburger {
    position: absolute;
    left: 50%;
    top: 50%;
    transform: translate(-50%, -50%);  /* οριζόντια + κάθετα στο κέντρο */
    margin: 0;
  }

  /* (προαιρετικό) ευθυγράμμιση brand αριστερά στο ίδιο ύψος */
  .brand {
    position: absolute;
    left: 8px;
    top: 50%;
    transform: translateY(-50%);
  }

  /* (προαιρετικό) αν τα GR/EN είναι μέσα στο nav δεξιά */
  .nav-lang {
    position: absolute;
    right: 8px;
    top: 50%;
    transform: translateY(-50%);
  }
}