/* Inter, self-hosted (assets/fonts, SIL Open Font License) so that no
   visitor data is sent to Google Fonts. One variable file covers all
   weights used on the site, Latin and Greek. */
@font-face {
  font-family: "Inter";
  src: url("/assets/fonts/InterVariable.woff2") format("woff2");
  font-weight: 100 900;
  font-style: normal;
  font-display: swap;
}

/* ============================================================
   Π. Καραχρήστου & Συνεργάτες — site stylesheet
   Design tokens follow the approved mockup:
   teal #006A61 (brand), cream #F5F1E6 (ground), charcoal #21221F (text)
   ============================================================ */

:root {
  --teal: #006A61;
  --teal-dark: #004F49;
  --cream: #F5F1E6;
  --cream-line: #E3DCC8;
  --panel: #EDE7D6;
  --ink: #21221F;
  --ink-soft: #55564F;
  --white: #FFFFFF;

  /* One typeface sitewide: Inter was drawn with its own Greek glyphs
     (not an auto-extended Latin face), so Greek, Latin and numerals
     sit at the same weight and height — no mismatched "μ" in headings.
     --serif is kept as a name for backward compatibility with the
     selectors below; it now points to the same family as --sans. */
  --serif: 'Inter', system-ui, -apple-system, 'Segoe UI', sans-serif;
  --sans: 'Inter', system-ui, -apple-system, 'Segoe UI', sans-serif;

  --max: 1120px;
  --radius: 4px;
}

* { box-sizing: border-box; }

html { scroll-behavior: smooth; }

body {
  margin: 0;
  font-family: var(--sans);
  background: var(--cream);
  color: var(--ink);
  line-height: 1.6;
  -webkit-font-smoothing: antialiased;
}

img { max-width: 100%; height: auto; display: block; }

a { color: var(--teal); text-decoration: none; }
a:hover { color: var(--teal-dark); }

h1, h2, h3, h4 {
  font-family: var(--serif);
  font-weight: 600;
  letter-spacing: -0.01em;
  color: var(--ink);
  margin: 0 0 0.5em 0;
}

h1 { font-size: 2.6rem; line-height: 1.15; font-weight: 700; }
h2 { font-size: 1.9rem; line-height: 1.2; }
h3 { font-size: 1.3rem; line-height: 1.3; }

p {
  margin: 0 0 1.1em 0;
  max-width: 68ch;
  text-align: justify;
  text-justify: inter-word;
  -webkit-hyphens: auto;
  hyphens: auto;
}

.container {
  max-width: var(--max);
  margin: 0 auto;
  padding: 0 24px;
}

:focus-visible {
  outline: 2px solid var(--teal);
  outline-offset: 2px;
}

/* ---------- Skip link ---------- */
.skip-link {
  position: absolute;
  left: -999px;
  top: 0;
  background: var(--ink);
  color: var(--white);
  padding: 10px 18px;
  z-index: 200;
}
.skip-link:focus { left: 12px; top: 12px; }

/* ---------- Header ---------- */
.site-header {
  position: sticky;
  top: 0;
  z-index: 100;
  background: rgba(245, 241, 230, 0.92);
  backdrop-filter: blur(6px);
  border-bottom: 1px solid var(--cream-line);
}

.site-header .container {
  display: flex;
  align-items: center;
  justify-content: space-between;
  padding-top: 18px;
  padding-bottom: 18px;
}

.brand {
  display: flex;
  align-items: center;
  gap: 12px;
  flex-shrink: 0;
}

.brand img { width: 32px; height: 32px; flex-shrink: 0; }

.brand-name {
  font-family: var(--serif);
  font-weight: 600;
  font-size: 1.05rem;
  line-height: 1.2;
  color: var(--ink);
}

.main-nav {
  display: flex;
  align-items: center;
  flex-wrap: nowrap;
  flex-shrink: 0;
  gap: 26px;
}

.main-nav a {
  color: var(--ink);
  font-size: 0.88rem;
  font-weight: 500;
  white-space: nowrap;
}

.main-nav a[aria-current="page"] {
  color: var(--teal);
}

.nav-cta-book {
  background: var(--teal);
  color: var(--cream) !important;
  padding: 10px 20px;
  border-radius: 999px;
  font-weight: 600 !important;
  white-space: nowrap;
  flex-shrink: 0;
}
.nav-cta-book:hover { background: var(--teal-dark); color: var(--cream) !important; }

.nav-phone {
  color: var(--ink-soft) !important;
  font-weight: 500 !important;
  font-size: 0.88rem;
  white-space: nowrap;
  flex-shrink: 0;
}
.nav-phone:hover { color: var(--teal) !important; }

.lang-switch {
  display: flex;
  align-items: center;
  justify-content: center;
  width: 30px;
  height: 30px;
  white-space: nowrap;
  flex-shrink: 0;
  border: 1px solid var(--cream-line);
  border-radius: 50%;
  overflow: hidden;
}
.lang-switch:hover { border-color: var(--teal); }
.lang-switch svg { width: 18px; height: 18px; border-radius: 50%; display: block; }

/* ---------- Nav dropdown: Τομείς Δικαίου ---------- */
.nav-dropdown {
  position: relative;
  display: flex;
  align-items: center;
  gap: 2px;
  flex-shrink: 0;
}
.nav-dropdown-link {
  color: var(--ink);
  font-size: 0.88rem;
  font-weight: 500;
  white-space: nowrap;
}
.nav-dropdown-link[aria-current="page"] { color: var(--teal); }
.nav-dropdown.nav-dropdown-active > .nav-dropdown-link { color: var(--teal); }
.nav-dropdown-toggle {
  background: none;
  border: none;
  margin: 0;
  padding: 6px 2px;
  color: var(--ink-soft);
  cursor: pointer;
  display: flex;
  align-items: center;
  line-height: 0;
}
.nav-dropdown-toggle:hover { color: var(--teal); }
.nav-dropdown-menu {
  display: none;
  position: absolute;
  top: calc(100% + 10px);
  left: 0;
  min-width: 280px;
  background: var(--white);
  border: 1px solid var(--cream-line);
  border-radius: var(--radius);
  box-shadow: 0 14px 34px rgba(33, 34, 31, 0.14);
  padding: 8px;
  z-index: 110;
}
/* Invisible bridge over the 10px visual gap above the menu: without it,
   the pointer crosses a dead zone with no hoverable element underneath
   while moving from the "Τομείς Δικαίου" link down into the menu, the
   CSS :hover state drops for an instant, and the menu closes before a
   sub-area can be clicked. This keeps hover continuous across the gap. */
.nav-dropdown-menu::before {
  content: "";
  position: absolute;
  top: -10px;
  left: 0;
  right: 0;
  height: 10px;
}
.nav-dropdown-menu a {
  display: block;
  padding: 10px 12px;
  font-size: 0.88rem;
  font-weight: 500;
  color: var(--ink);
  border-radius: var(--radius);
  white-space: nowrap;
}
.nav-dropdown-menu a:hover,
.nav-dropdown-menu a[aria-current="page"] { background: var(--cream); color: var(--teal); }

.nav-dropdown:hover .nav-dropdown-menu,
.nav-dropdown:focus-within .nav-dropdown-menu,
.nav-dropdown.open .nav-dropdown-menu {
  display: block;
}

.nav-toggle {
  display: none;
  background: none;
  border: 1px solid var(--ink);
  border-radius: var(--radius);
  width: 42px;
  height: 38px;
  align-items: center;
  justify-content: center;
  cursor: pointer;
}
.nav-toggle span,
.nav-toggle span::before,
.nav-toggle span::after {
  content: "";
  display: block;
  width: 18px;
  height: 2px;
  background: var(--ink);
  position: relative;
}
.nav-toggle span::before { position: absolute; top: -6px; }
.nav-toggle span::after { position: absolute; top: 6px; }

/* ---------- Hero ---------- */
.hero {
  padding: 64px 0 48px 0;
}
.hero .container {
  display: flex;
  align-items: center;
  gap: 56px;
}
.hero-copy { flex: 1 1 52%; }
.hero-eyebrow {
  font-size: 0.85rem;
  letter-spacing: 1px;
  color: var(--teal);
  text-transform: uppercase;
  font-weight: 600;
  margin-bottom: 18px;
}
.hero h1 { margin-bottom: 20px; }
.hero p.lead {
  font-size: 1.08rem;
  color: var(--ink-soft);
  max-width: 46ch;
}
.hero-actions {
  display: flex;
  align-items: center;
  gap: 26px;
  flex-wrap: wrap;
  margin-top: 22px;
}
.btn {
  display: inline-block;
  background: var(--teal);
  color: var(--cream);
  padding: 15px 30px;
  border-radius: 999px;
  font-weight: 600;
  font-size: 0.92rem;
  border: 1px solid var(--teal);
}
.btn:hover { background: var(--teal-dark); border-color: var(--teal-dark); color: var(--cream); }
.btn-ghost {
  background: transparent;
  color: var(--ink);
  border: 1px solid var(--ink);
}
.btn-ghost:hover { background: var(--ink); color: var(--cream); }
.link-more {
  font-weight: 500;
  color: var(--ink);
  border-bottom: 1px solid var(--ink);
  padding-bottom: 2px;
}
.link-more:hover { color: var(--teal); border-color: var(--teal); }

.hero-figure {
  flex: 1 1 40%;
  aspect-ratio: 4 / 5;
  background: var(--teal);
  border-radius: var(--radius);
  display: flex;
  align-items: center;
  justify-content: center;
  overflow: hidden;
}
.hero-figure img { width: 100%; height: 100%; object-fit: cover; }
.hero-figure .placeholder {
  color: rgba(245,241,230,0.7);
  font-size: 0.85rem;
  text-align: center;
  padding: 0 24px;
}

/* ---------- Practice strip ---------- */
.practice-strip {
  border-top: 1px solid var(--cream-line);
  padding: 30px 0;
}
.practice-strip .container {
  display: flex;
  flex-wrap: wrap;
  gap: 40px;
}
.practice-strip a {
  display: inline-flex;
  align-items: center;
  gap: 9px;
  font-size: 0.88rem;
  color: var(--ink-soft);
}
.practice-strip a:hover { color: var(--teal); }
.practice-strip a svg { flex-shrink: 0; width: 18px; height: 18px; color: var(--teal); }

/* ---------- Practice-area icon badge (Τομείς Δικαίου page) ---------- */
.practice-icon {
  display: flex;
  align-items: center;
  justify-content: center;
  width: 46px;
  height: 46px;
  border-radius: 50%;
  background: var(--panel);
  color: var(--teal);
  margin-bottom: 16px;
}
.section-alt .practice-icon { background: var(--white); }
.practice-icon svg { width: 22px; height: 22px; }

/* ---------- Generic sections ---------- */
.section {
  padding: 64px 0;
}
.section-alt {
  background: var(--panel);
}
.section-head {
  margin-bottom: 40px;
}
.section-head .hero-eyebrow { margin-bottom: 14px; }
/* Intro paragraphs under a section heading span the full container,
   aligned with the cards below them (overrides p { max-width: 68ch }). */
.section-head p { max-width: none; }
/* No body paragraph lives in .section-head (only the eyebrow label + h2), so
   there is no long line of body text here that needs a ch-based width limit.
   A max-width on this block previously also capped the h2 inside it — a
   block child can't be wider than its parent regardless of its own
   max-width — which wrapped the heading well before the container's real
   width ran out. Let the block use the full container width instead. */

.card-grid {
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  gap: 28px;
}
.card {
  background: var(--white);
  border: 1px solid var(--cream-line);
  border-radius: var(--radius);
  padding: 30px;
}
.card h3 { margin-bottom: 10px; }
.card p { margin-bottom: 0; color: var(--ink-soft); font-size: 0.95rem; }

.testimonial-quote {
  font-size: 0.95rem;
  color: var(--ink-soft);
  margin-bottom: 16px;
}
.testimonial-author {
  margin-bottom: 0;
  font-weight: 600;
  color: var(--ink);
  font-size: 0.9rem;
}
.testimonial-translation-note {
  font-size: 0.8rem;
  color: var(--ink-soft);
  font-style: italic;
}

.two-col {
  display: flex;
  gap: 56px;
  align-items: flex-start;
}
.two-col > * { flex: 1; }

/* ---------- Page header (interior pages) ---------- */
.page-header {
  padding: 56px 0 40px 0;
  border-bottom: 1px solid var(--cream-line);
}
.breadcrumbs { font-size: 0.82rem; color: var(--ink-soft); margin-bottom: 16px; }
.breadcrumbs a { color: var(--ink-soft); }
.breadcrumbs a:hover { color: var(--teal); }
.breadcrumbs span[aria-current] { color: var(--ink); }
.page-header .hero-eyebrow { margin-bottom: 14px; }
.page-header h1 { margin-bottom: 14px; }
/* max-width: none overrides the generic "p { max-width: 68ch }" rule —
   without it, a short subtitle wraps at ~68 characters even though the
   page header has much more room, which can cut an awkward spot
   mid-word (hyphens:auto breaks the trailing word onto its own line). */
.page-header p.lead { color: var(--ink-soft); font-size: 1.05rem; max-width: none; }

/* ---------- Team / bio ---------- */
.bio {
  display: flex;
  gap: 48px;
  align-items: flex-start;
}
.bio-figure {
  flex: 0 0 260px;
  aspect-ratio: 3/4;
  background: var(--panel);
  border-radius: var(--radius);
  display: flex;
  align-items: center;
  justify-content: center;
  color: var(--ink-soft);
  font-size: 0.8rem;
  text-align: center;
  padding: 20px;
  overflow: hidden;
}
.bio-figure img { width: 100%; height: 100%; object-fit: cover; }
.bio-body { flex: 1; }
.bio-body h3 { margin-bottom: 4px; }
.bio-body .role { color: var(--teal); font-weight: 600; font-size: 0.9rem; margin-bottom: 18px; }

/* ---------- Associates list ---------- */
.assoc-list { display: grid; grid-template-columns: repeat(2, minmax(0,1fr)); gap: 24px 48px; }
.assoc-item { border-top: 1px solid var(--cream-line); padding-top: 16px; }
.assoc-item .name { font-family: var(--serif); font-weight: 600; font-size: 1.05rem; }
.assoc-item .desc { color: var(--ink-soft); font-size: 0.9rem; margin-top: 4px; }

/* ---------- Blog list ---------- */
.post-list { display: flex; flex-direction: column; gap: 0; }
.post-item {
  padding: 28px 0;
  border-bottom: 1px solid var(--cream-line);
  display: flex;
  justify-content: space-between;
  gap: 24px;
  align-items: baseline;
}
.post-item .post-main { flex: 1 1 auto; min-width: 0; }
.post-item .post-title { font-family: var(--serif); font-size: 1.45rem; font-weight: 600; }
.post-item .post-title a { color: var(--ink); }
.post-item .post-title a:hover { color: var(--teal); }
.post-item .post-meta { flex: 0 0 auto; color: var(--ink-soft); font-size: 0.82rem; white-space: nowrap; }
.post-item .post-excerpt { color: var(--ink-soft); font-size: 0.95rem; margin: 6px 0 0 0; }

article.post-body p { color: var(--ink); max-width: none; }
.post-date { color: var(--ink-soft); font-size: 0.85rem; margin-bottom: 8px; }
.post-author { color: var(--ink-soft); font-size: 0.85rem; margin: 0 0 8px 0; }
.post-category { color: var(--teal); font-size: 0.8rem; font-weight: 600; text-transform: uppercase; letter-spacing: 0.03em; margin: 0 0 6px 0; }

.post-filters { display: flex; flex-wrap: wrap; gap: 8px; margin-bottom: 28px; }
.post-filter-btn {
  border: 1px solid var(--cream-line);
  background: #fff;
  color: var(--ink-soft);
  font-size: 0.85rem;
  padding: 7px 14px;
  border-radius: 999px;
  cursor: pointer;
}
.post-filter-btn:hover { border-color: var(--teal); color: var(--teal); }
.post-filter-btn.is-active { background: var(--teal); border-color: var(--teal); color: #fff; }

.post-category-badge {
  display: inline-block;
  color: var(--teal);
  font-size: 0.75rem;
  font-weight: 600;
  text-transform: uppercase;
  letter-spacing: 0.03em;
  margin-bottom: 4px;
}
.post-notice {
  background: var(--cream);
  border-left: 3px solid var(--teal);
  padding: 14px 18px;
  font-size: 0.9rem;
  color: var(--ink-soft);
  margin-bottom: 24px !important;
}

/* ---------- Office photo grid ---------- */
.photo-grid {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: 20px;
}
.photo-grid img {
  width: 100%;
  aspect-ratio: 4/3;
  object-fit: cover;
  border-radius: var(--radius);
}
@media (max-width: 880px) {
  .photo-grid { grid-template-columns: 1fr; }
}

/* ---------- Contact ---------- */
.contact-grid-single {
  max-width: 48ch;
}
.contact-details dt {
  font-weight: 600;
  color: var(--teal);
  font-size: 0.85rem;
  text-transform: uppercase;
  letter-spacing: 0.5px;
  margin-top: 22px;
}
.contact-details dt:first-child { margin-top: 0; }
.contact-details dd { margin: 6px 0 0 0; color: var(--ink); }

.contact-map {
  flex: 1 1 320px;
  border: 1px solid var(--cream-line);
  border-radius: var(--radius);
  overflow: hidden;
  background: var(--panel);
}
.contact-map iframe { display: block; width: 100%; height: 320px; }
.contact-grid-single .hero-actions { margin-top: 34px; }

/* ---------- Footer ---------- */
.site-footer {
  border-top: 1px solid var(--cream-line);
  background: var(--panel);
  padding: 56px 0 28px 0;
  margin-top: 64px;
}
.footer-grid {
  display: grid;
  grid-template-columns: 1.2fr 1fr 1fr 1fr;
  gap: 40px;
}
.footer-brand { display: flex; align-items: center; gap: 10px; margin-bottom: 14px; }
.footer-brand img { width: 26px; height: 26px; }
.footer-brand span { font-family: var(--serif); font-weight: 600; }
.footer-grid h4 {
  font-family: var(--sans);
  font-size: 0.8rem;
  text-transform: uppercase;
  letter-spacing: 0.5px;
  color: var(--ink-soft);
  margin-bottom: 14px;
}
.footer-grid ul { list-style: none; margin: 0; padding: 0; }
.footer-grid li { margin-bottom: 10px; font-size: 0.9rem; }
.footer-grid li a { color: var(--ink); }
.footer-grid li a:hover { color: var(--teal); }
.footer-bottom {
  margin-top: 40px;
  padding-top: 20px;
  border-top: 1px solid var(--cream-line);
  display: flex;
  justify-content: space-between;
  flex-wrap: wrap;
  gap: 10px;
  font-size: 0.8rem;
  color: var(--ink-soft);
}

/* ---------- Legal pages ---------- */
.legal-body h2 { margin-top: 2em; }
.legal-body p { max-width: none; }
.legal-body ul { padding-left: 1.2em; }
.legal-body li { margin-bottom: 0.5em; }

/* ============================================================
   Responsive
   ============================================================ */
/* The nav row (brand + links + phone + booking button) is the tightest
   piece of the layout — it needs to drop to the mobile hamburger menu
   well before the rest of the page would need to reflow, otherwise the
   items get force-shrunk and wrap ugly mid-word. Kept as its own,
   higher breakpoint so a longer brand name or nav label doesn't silently
   break the header again. */
@media (max-width: 1040px) {
  .main-nav { display: none; }
  .nav-toggle { display: flex; }

  /* While the menu is open, drop the header's translucent blur: a
     backdrop-filter makes the header the containing block for the panel
     and let page content bleed through it in Chromium. The panel is
     anchored to the header's bottom edge so it never overlaps it,
     whatever height the brand name wraps to. */
  body.nav-open .site-header {
    backdrop-filter: none;
    -webkit-backdrop-filter: none;
    background: var(--cream);
  }

  body.nav-open .main-nav {
    display: flex;
    flex-direction: column;
    align-items: flex-start;
    gap: 20px;
    position: absolute;
    top: 100%;
    left: 0;
    right: 0;
    background: var(--cream);
    border-bottom: 1px solid var(--cream-line);
    padding: 24px;
    z-index: 90;
    max-height: calc(100vh - 80px);
    overflow-y: auto;
  }

  .nav-dropdown { flex-direction: column; align-items: flex-start; width: 100%; }
  .nav-dropdown-toggle { display: none; }
  .nav-dropdown-menu {
    display: block;
    position: static;
    box-shadow: none;
    border: none;
    background: transparent;
    min-width: 0;
    padding: 2px 0 0 14px;
  }
  .nav-dropdown-menu a { padding: 8px 0; }
  .nav-phone { order: 1; }
  .nav-cta-book { order: 2; }
  .lang-switch { order: 3; align-self: flex-start; }
}

@media (max-width: 880px) {
  .hero .container { flex-direction: column; }
  .hero-figure { width: 100%; aspect-ratio: 16/10; }
  h1 { font-size: 2rem; }

  .card-grid { grid-template-columns: 1fr; }
  .two-col { flex-direction: column; gap: 32px; }
  .bio { flex-direction: column; }
  .bio-figure { width: 200px; }
  .assoc-list { grid-template-columns: 1fr; }
  .footer-grid { grid-template-columns: 1fr; gap: 28px; }
  .practice-strip .container { gap: 20px; }
}

@media (prefers-reduced-motion: reduce) {
  html { scroll-behavior: auto; }
}

/* Numbered step list (e.g. stages of a property purchase). */
.process-steps {
  list-style: none;
  padding: 0;
  margin: 0;
  counter-reset: step;
  display: grid;
  gap: 12px;
}
.process-steps li {
  counter-increment: step;
  position: relative;
  background: var(--white);
  border: 1px solid var(--cream-line);
  border-radius: var(--radius);
  padding: 16px 20px 16px 64px;
}
.process-steps li::before {
  content: counter(step);
  position: absolute;
  left: 20px;
  top: 16px;
  width: 28px;
  height: 28px;
  border-radius: 50%;
  background: var(--teal);
  color: var(--white);
  font-weight: 600;
  font-size: 0.9rem;
  display: flex;
  align-items: center;
  justify-content: center;
}
.process-steps strong { display: block; color: var(--ink); margin-bottom: 2px; }
.process-steps span { color: var(--ink-soft); font-size: 0.95rem; }

/* Cookie consent banner (js/consent.js). Accept and Reject are the same
   size and weight, so rejecting is as easy as accepting. */
.cookie-banner {
  position: fixed;
  left: 16px;
  right: 16px;
  bottom: 16px;
  z-index: 300;
  max-width: 760px;
  margin: 0 auto;
  background: var(--white);
  border: 1px solid var(--cream-line);
  border-radius: var(--radius);
  box-shadow: 0 10px 30px rgba(33, 34, 31, 0.15);
  padding: 20px 24px;
  display: flex;
  align-items: center;
  gap: 20px;
}
.cookie-banner p {
  margin: 0;
  max-width: none;
  font-size: 0.9rem;
  color: var(--ink-soft);
  text-align: left;
}
.cookie-banner p a { color: var(--teal); text-decoration: underline; }
.cookie-banner-actions { display: flex; gap: 10px; flex-shrink: 0; }
.cookie-banner .btn { padding: 11px 22px; cursor: pointer; font-family: inherit; }
@media (max-width: 640px) {
  .cookie-banner { flex-direction: column; align-items: stretch; padding: 18px; }
  .cookie-banner-actions .btn { flex: 1; }
}

/* Footer "Cookie settings" control: a button that looks like the
   neighbouring footer links. */
.link-button {
  background: none;
  border: 0;
  padding: 0;
  font: inherit;
  color: var(--teal);
  cursor: pointer;
}
.link-button:hover { text-decoration: underline; }

/* Button with a leading icon (e.g. phone). */
.btn-with-icon { display: inline-flex; align-items: center; gap: 8px; }
.btn-with-icon .btn-icon { flex-shrink: 0; }

/* Associates are grouped in pages of three for the mobile carousel; on
   larger screens the groups are "invisible" and the grid works as before. */
.assoc-page { display: contents; }

/* Mobile call / booking bar (homepage). Shown by js/main.js once the hero
   buttons have scrolled out of view; never shown on larger screens. */
.mobile-cta { display: none; }

/* Carousel dots, created by js/main.js for each .m-carousel. */
.m-carousel-dots { display: none; }

@media (max-width: 880px) {
  /* Swipeable carousels: associates (2 pages of 3), office photos,
     client reviews. The next slide peeks in so it is clear you can swipe. */
  .m-carousel,
  .card-grid.m-carousel,
  .photo-grid.m-carousel,
  .assoc-list.m-carousel {
    display: flex;
    gap: 16px;
    overflow-x: auto;
    scroll-snap-type: x mandatory;
    -webkit-overflow-scrolling: touch;
    scrollbar-width: none;
    margin: 0 -24px;
    padding: 0 24px 4px;
    scroll-padding: 0 24px;
  }
  .m-carousel::-webkit-scrollbar { display: none; }
  .m-carousel > * {
    flex: 0 0 86%;
    scroll-snap-align: start;
    min-width: 0;
  }
  .assoc-page { display: block; }
  .m-carousel > .card { padding: 22px; }
  .m-carousel .testimonial-quote { text-align: left; hyphens: auto; }
  .assoc-page .assoc-item + .assoc-item { margin-top: 18px; }

  .m-carousel-dots {
    display: flex;
    justify-content: center;
    gap: 8px;
    margin-top: 18px;
  }
  .m-carousel-dots button {
    width: 8px;
    height: 8px;
    padding: 0;
    border: 0;
    border-radius: 50%;
    background: var(--cream-line);
    cursor: pointer;
  }
  .m-carousel-dots button[aria-current="true"] { background: var(--teal); }

  .mobile-cta {
    position: fixed;
    left: 0;
    right: 0;
    bottom: 0;
    z-index: 150;
    display: flex;
    gap: 10px;
    padding: 12px 16px calc(12px + env(safe-area-inset-bottom));
    background: var(--cream);
    border-top: 1px solid var(--cream-line);
    box-shadow: 0 -6px 20px rgba(33, 34, 31, 0.08);
    transform: translateY(110%);
    transition: transform 0.25s ease;
  }
  .mobile-cta[hidden] { display: flex; visibility: hidden; }
  .mobile-cta.is-visible { transform: translateY(0); visibility: visible; }
  .mobile-cta .btn {
    flex: 1 1 auto;
    justify-content: center;
    text-align: center;
    white-space: nowrap;
    padding: 13px 14px;
  }
  body.has-mobile-cta { padding-bottom: 76px; }

  /* Homepage hero: the two buttons side by side, like the bottom bar. */
  .hero-actions[data-hero-cta] { flex-wrap: nowrap; gap: 10px; }
  .hero-actions[data-hero-cta] .btn {
    flex: 1 1 auto;
    justify-content: center;
    text-align: center;
    white-space: nowrap;
    padding: 13px 14px;
  }
}
@media (max-width: 420px) {
  .hero-actions[data-hero-cta] .btn,
  .mobile-cta .btn { font-size: 0.86rem; padding: 12px 10px; }
  .hero-actions[data-hero-cta] .btn-icon,
  .mobile-cta .btn-icon { width: 16px; height: 16px; }
}
@media (max-width: 350px) {
  .hero-actions[data-hero-cta] .btn,
  .mobile-cta .btn { font-size: 0.8rem; padding: 11px 8px; }
}
@media (prefers-reduced-motion: reduce) {
  .mobile-cta { transition: none; }
}

/* A single centred call-to-action button (homepage "Επικοινωνήστε μαζί μας"). */
.hero-actions.cta-center { justify-content: center; }

/* Body text that spans the whole content width (practice-area pages and
   the homepage intro; their side boxes were removed). */
.prose-full p { max-width: none; }

/* "See all our reviews on Google" under the client reviews. */
.reviews-link { text-align: center; margin: 28px auto 0; max-width: none; }

/* Practice-area icon next to the page title */
.area-title { display: flex; align-items: center; gap: 18px; margin-bottom: 14px; }
.area-title h1 { margin-bottom: 0; }
.area-icon { flex-shrink: 0; display: inline-flex; align-items: center; justify-content: center; width: 56px; height: 56px; border-radius: 14px; background: var(--teal); color: #fff; }
.area-icon svg { width: 30px; height: 30px; }
@media (max-width: 600px) {
  .area-title { flex-direction: column; align-items: flex-start; gap: 12px; }
  .area-icon { width: 44px; height: 44px; border-radius: 11px; }
  .area-icon svg { width: 24px; height: 24px; }
}

/* Practice-area card titles that link to their page */
.card-title-link { color: inherit; text-decoration: none; }
.card-title-link:hover, .card-title-link:focus-visible { color: var(--teal); text-decoration: underline; text-underline-offset: 4px; }

/* Tables in legal pages (cookie table in the Privacy Policy) */
.legal-table { width: 100%; border-collapse: collapse; margin: 1em 0 1.5em; font-size: 0.95rem; }
.legal-table th, .legal-table td { text-align: left; padding: 10px 12px; border-bottom: 1px solid var(--cream-line); vertical-align: top; }
.legal-table th { font-weight: 600; border-bottom-width: 2px; }
.legal-table td:first-child { font-family: ui-monospace, SFMono-Regular, Menlo, monospace; font-size: 0.9em; white-space: nowrap; }
@media (max-width: 600px) {
  .legal-table th, .legal-table td { padding: 8px 6px; }
  .legal-table td:first-child { white-space: normal; word-break: break-all; }
}

/* Client reviews: horizontal carousel on larger screens too (3 visible,
   arrows to move). On mobile the .m-carousel rules above apply. */
.reviews-nav { display: none; }
@media (min-width: 881px) {
  .card-grid.reviews-carousel {
    display: flex;
    gap: 24px;
    overflow-x: auto;
    scroll-snap-type: x mandatory;
    scroll-behavior: smooth;
    scrollbar-width: none;
  }
  .card-grid.reviews-carousel::-webkit-scrollbar { display: none; }
  .card-grid.reviews-carousel > .card {
    flex: 0 0 calc((100% - 48px) / 3);
    scroll-snap-align: start;
    min-width: 0;
  }
  .reviews-nav { display: flex; justify-content: center; gap: 12px; margin-top: 22px; }
  .reviews-nav button {
    width: 44px; height: 44px; border-radius: 50%;
    border: 1px solid var(--cream-line); background: var(--white); color: var(--ink);
    display: inline-flex; align-items: center; justify-content: center; cursor: pointer;
  }
  .reviews-nav button:hover:not(:disabled) { border-color: var(--teal); color: var(--teal); }
  .reviews-nav button:disabled { opacity: 0.35; cursor: default; }
}
@media (min-width: 881px) {
  .reviews-carousel .testimonial-quote { text-align: left; hyphens: auto; }
}

/* Five stars above each client review (all reviews shown are 5/5 on Google). */
.review-stars { display: flex; gap: 3px; margin-bottom: 14px; color: var(--teal); }
.review-stars svg { width: 16px; height: 16px; fill: currentColor; }

/* Blog list on phones: title and excerpt use the full width; the date sits
   on the same line as the category badge instead of taking a column. */
@media (max-width: 600px) {
  .post-item { display: block; position: relative; }
  .post-item .post-meta { position: absolute; top: 28px; right: 0; line-height: 1.6; }
  .post-item .post-excerpt { text-align: left; hyphens: manual; }
}