/* ============================================================
   EcoEcho Homepage Redesign · Editorial Travel Zine
   Phase 3.1 , Hero + Shell
   ============================================================ */

/* ----- 0.0 · v2.1.64 HOTFIXES (mobile menu + width + trust widget) -----
   1) WPCode snippet "EcoEcho Burger Menu v2" (ID 25298, now deactivated)
      used to inject <button id="eco-burger"> + <div id="eco-menu-overlay">
      INSIDE <head>. Browser auto-closed head, leaving an orphan overlay
      with position:fixed; transform:translateX(-100%) that triggered iOS
      Safari containing-block compression (content squeezed to half width).
      Belt+braces below in case anything re-introduces these IDs.
   2) Trustindex.io "Trusted Site Certificate" widget (JS-loaded from CDN,
      injected by an active WPCode snippet) drops a sticky button on the
      right edge of the viewport. Useful on desktop, distracting on mobile.
      Hide the sticky button on viewports under 768px so phone users get a
      clean canvas. Desktop keeps the trust badge for conversion. */
#eco-burger,
#eco-menu-overlay { display: none !important; }
/* v2.6.65b , ΔΥΟ μαθήματα σε μία μέρα:
   1. overflow-x:hidden ΚΑΙ στο body νεκρώνει το position:sticky (το body γίνεται
      clip container) , γι αυτό ο header δεν κόλλαγε πουθενά.
   2. Η «διόρθωση» με overflow-x:clip στο ΡΙΖΙΚΟ στοιχείο νεκρώνει ΟΛΟ το
      προγραμματικό scroll στο Chromium: scrollTo, scrollIntoView, ΚΑΙ ΤΑ ANCHOR
      LINKS (#book, #faq). Μετρημένο: scrollingElement.scrollTop=3000 → μένει 0.
   ΣΩΣΤΟ pattern: overflow-x:hidden ΜΟΝΟ στο html (ο root-scroller κρατά κάθετο
   scroll και anchors), το body ΚΑΘΑΡΟ ώστε το sticky να δουλεύει. */
html { width: 100%; max-width: 100%; overflow-x: hidden; }
body { width: 100%; max-width: 100%; }
/* Hide Trustindex floating widget on ALL viewports (user feedback 2026-05-21:
   even desktop has a slight floating presence). Permanent fix is deactivating
   the Trustindex WPCode snippet; this rule keeps it invisible regardless. */
.ti-sticky-button,
.ti-widget,
.ti-position-right,
.ti-certificate { display: none !important; }

/* ----- 0 · RESET ----- */
*,
*::before,
*::after { box-sizing: border-box; }

html { -webkit-text-size-adjust: 100%; tab-size: 4; }

body {
  margin: 0;
  min-height: 100vh;
  background: var(--paper);
  color: var(--ink);
  font-family: var(--font-body);
  font-size: var(--t-body);
  line-height: 1.6;
  font-feature-settings: "ss01", "cv11";
  text-rendering: optimizeLegibility;
  -webkit-font-smoothing: antialiased;
  -moz-osx-font-smoothing: grayscale;
}

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

h1, h2, h3, h4, p, ul, ol, figure { margin: 0; padding: 0; }

ul, ol { list-style: none; }

a { color: inherit; text-decoration: none; }

button { font: inherit; background: none; border: 0; color: inherit; cursor: pointer; }

:focus-visible {
  outline: 2px solid var(--tulip);
  outline-offset: 3px;
  border-radius: 2px;
}

/* ----- 1 · TOKENS ----- */
:root {
  /* color */
  --ink: #1a1612;
  --ink-muted: #5c5650;
  --paper: #f5f1ea;
  --paper-raised: #ffffff;
  --paper-deep: #ebe6dc;
  --tulip: #c9462c;
  /* v2.6.63 , ΜΟΝΟ για μικρά κείμενα (labels, eyebrows, meta, αστέρια). Το
     brand tulip #c9462c σε paper δίνει 4.24:1 και σε section bg 3.84:1, δηλαδή
     κάτω από το 4.5:1 του WCAG AA για κείμενο κάτω των 18px. Τα κουμπιά, τα
     display headings και κάθε μεγάλο στοιχείο κρατούν ΤΟ ΑΡΧΙΚΟ --tulip: η
     ταυτότητα δεν αλλάζει, μόνο τα ψιλά γράμματα γίνονται αναγνώσιμα. */
  --tulip-text: #b03a20;
  --tulip-hover: #a83a23;
  --sky: #3a5f7d;
  --moss: #2c5e2e;
  --line: rgba(26, 22, 18, 0.12);
  --line-strong: rgba(26, 22, 18, 0.24);

  /* typography */
  /* v2.1.38 , Literata first so Greek copy ("Άμστερνταμ", "Τρομερά διαβασμένος…")
     renders with proper italic kerning/baseline. Fraunces (Latin-only italic)
     follows as a stylistic hint; OS fallbacks last. */
  --font-display: "Fraunces", "Iowan Old Style", "Apple Garamond", Georgia, serif; /* definition line: keep literal, never var() (cycle) */
  --font-body: "Inter", -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, sans-serif;
  --font-mono: "JetBrains Mono", ui-monospace, "SF Mono", Menlo, Consolas, monospace;

  --t-hero: clamp(44px, 6vw + 1rem, 108px);
  --t-display: clamp(40px, 5vw + 0.5rem, 88px);
  --t-h2: clamp(32px, 3.5vw + 0.5rem, 64px);
  --t-h3: clamp(22px, 1.5vw + 0.5rem, 32px);
  --t-lede: clamp(18px, 0.5vw + 1rem, 22px);
  --t-body: 17px;
  --t-small: 14px;
  --t-meta: 12px;

  /* spacing (4px rhythm) */
  --sp-1: 4px;
  --sp-2: 8px;
  --sp-3: 12px;
  --sp-4: 16px;
  --sp-6: 24px;
  --sp-8: 32px;
  --sp-10: 40px;
  --sp-12: 48px;
  --sp-16: 64px;
  --sp-20: 80px;
  --sp-24: 96px;
  --sp-32: 128px;

  /* layout */
  --container: 1360px;
  --gutter: clamp(20px, 4vw, 56px);
  --nav-h: 72px;

  /* motion */
  --easing: cubic-bezier(0.2, 0.6, 0.2, 1);
}

@media (prefers-reduced-motion: reduce) {
  *, *::before, *::after {
    animation-duration: 0.01ms !important;
    animation-iteration-count: 1 !important;
    transition-duration: 0.01ms !important;
    scroll-behavior: auto !important;
  }
}

/* ----- 2 · UTIL ----- */
.skip-link {
  position: absolute;
  top: -100px;
  left: var(--sp-4);
  background: var(--ink);
  color: var(--paper);
  padding: var(--sp-3) var(--sp-4);
  border-radius: 4px;
  z-index: 9999;
  transition: top 0.2s var(--easing);
}
.skip-link:focus-visible { top: var(--sp-4); }

.container {
  width: 100%;
  max-width: var(--container);
  margin-inline: auto;
  padding-inline: var(--gutter);
}

.meta {
  font-family: var(--font-mono);
  font-size: var(--t-meta);
  font-weight: 500;
  letter-spacing: 0.08em;
  text-transform: uppercase;
  color: var(--ink-muted);
}

/* ----- 3 · NAV ----- */
.site-nav {
  position: sticky;
  top: 0;
  z-index: 500;
  background: rgba(245, 241, 234, 0.92);
  backdrop-filter: saturate(140%) blur(10px);
  -webkit-backdrop-filter: saturate(140%) blur(10px);
  border-bottom: 1px solid var(--line);
}

/* v2.1.35 + v2.1.57: Logged-in users see the WP admin bar (32px desktop,
   46px mobile), which is itself position: fixed at top: 0. Offset the sticky
   site nav so the logo and links never get clipped under it.
   v2.1.57 fix: bumped specificity (body.admin-bar header.site-nav) +
   !important so the rule wins against any later cascade that resets top:0. */
body.admin-bar header.site-nav,
body.admin-bar .site-nav { top: 32px !important; }
@media screen and (max-width: 782px) {
  body.admin-bar header.site-nav,
  body.admin-bar .site-nav { top: 46px !important; }
}

.site-nav__inner {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: var(--sp-6);
  height: var(--nav-h);
  max-width: var(--container);
  margin-inline: auto;
  padding-inline: var(--gutter);
}

.site-nav__brand {
  display: flex;
  align-items: center;
  gap: var(--sp-3);
  min-width: 0;
}

.site-nav__brand-mark {
  position: relative;
  display: grid;
  place-items: center;
  width: 38px;
  height: 38px;
  border-radius: 50%;
  background: var(--ink);
  color: var(--paper);
  font-family: var(--font-display);
  font-weight: 700;
  font-size: 22px;
  letter-spacing: -0.02em;
  line-height: 1;
  padding-bottom: 2px;
}
.site-nav__brand-dot {
  position: absolute;
  right: -2px;
  bottom: 3px;
  width: 7px;
  height: 7px;
  border-radius: 50%;
  background: var(--tulip);
}
.site-nav__brand-text {
  display: flex;
  flex-direction: column;
  line-height: 1.1;
}
.site-nav__brand-name {
  font-family: var(--font-display);
  font-weight: 600;
  font-size: 20px;
  letter-spacing: -0.01em;
}
.site-nav__brand-sub {
  font-family: var(--font-mono);
  font-size: 10px;
  letter-spacing: 0.12em;
  text-transform: uppercase;
  color: var(--ink-muted);
}

.site-nav__menu ul {
  display: flex;
  align-items: center;
  gap: clamp(var(--sp-4), 1.5vw, var(--sp-8));
}
.site-nav__menu a {
  position: relative;
  font-size: 15px;
  font-weight: 500;
  color: var(--ink);
  padding: var(--sp-2) 0;
}
.site-nav__menu a::after {
  content: "";
  position: absolute;
  left: 50%;
  bottom: 0;
  height: 2px;
  width: 0;
  background: var(--tulip);
  transition: width 0.25s var(--easing), left 0.25s var(--easing);
}
.site-nav__menu a:hover::after,
.site-nav__menu a:focus-visible::after {
  width: 100%;
  left: 0;
}

.site-nav__actions {
  display: flex;
  align-items: center;
  gap: var(--sp-3);
}
.site-nav__whatsapp {
  display: inline-flex;
  align-items: center;
  gap: var(--sp-2);
  padding: 10px 16px;
  border-radius: 999px;
  background: var(--ink);
  color: var(--paper);
  font-size: 13px;
  font-weight: 500;
  letter-spacing: 0.01em;
  transition: background 0.2s var(--easing), transform 0.2s var(--easing);
}
.site-nav__whatsapp:hover { background: var(--tulip); transform: translateY(-1px); }
.site-nav__whatsapp svg { flex-shrink: 0; }

.site-nav__toggle {
  display: none;
  /* v2.6.62 , 40px ήταν κάτω από το ελάχιστο 44px· είναι το ΠΡΩΤΕΥΟΝ touch control
     κάθε σελίδας κάτω από 1100px. */
  width: 44px;
  height: 44px;
  padding: 0;
  border-radius: 6px;
  align-items: center;
  justify-content: center;
  flex-direction: column;
  gap: 5px;
}
.site-nav__toggle span {
  display: block;
  width: 20px;
  height: 2px;
  background: var(--ink);
  border-radius: 1px;
  transition: transform 0.25s var(--easing), opacity 0.2s var(--easing);
}
.site-nav__toggle[aria-expanded="true"] span:nth-child(1) { transform: translateY(7px) rotate(45deg); }
.site-nav__toggle[aria-expanded="true"] span:nth-child(2) { opacity: 0; }
.site-nav__toggle[aria-expanded="true"] span:nth-child(3) { transform: translateY(-7px) rotate(-45deg); }

.site-nav__mobile {
  display: none;
  padding: var(--sp-4) var(--gutter) var(--sp-8);
  border-top: 1px solid var(--line);
  background: var(--paper);
  max-height: calc(100vh - var(--nav-h));
  max-height: calc(100dvh - var(--nav-h));
  overflow-y: auto;
  -webkit-overflow-scrolling: touch;
  overscroll-behavior: contain;
}
.site-nav__mobile[hidden] { display: none; }
.site-nav__mobile:not([hidden]) { display: block; }
.site-nav__mobile ul {
  display: flex;
  flex-direction: column;
  gap: var(--sp-1);
}
.site-nav__mobile a {
  display: block;
  padding: var(--sp-4) 0;
  font-family: var(--font-display);
  font-size: 28px;
  font-weight: 500;
  letter-spacing: -0.01em;
  border-bottom: 1px solid var(--line);
}
.site-nav__mobile-contact {
  margin-top: var(--sp-6);
  display: flex;
  flex-direction: column;
  gap: var(--sp-2);
  font-family: var(--font-mono);
  font-size: 13px;
  color: var(--ink-muted);
}
/* v2.6.0 (2026-06-04) , the mobile menu was taller than the viewport, so the last
   items (Contact, Greek) were clipped. Scroll within the available height + tighten
   the type on small phones so it all fits comfortably. */
body.admin-bar .site-nav__mobile { max-height: calc(100dvh - var(--nav-h) - 46px); }
@media (max-width: 600px) {
  .site-nav__mobile a { font-size: 22px; padding: 12px 0; }
  .site-nav__mobile-contact { margin-top: 20px; }
}

/* Header collapse breakpoint raised to 1100px so iPad portrait/landscape
   doesn't cram nav + WhatsApp + burger together. !important ensures we win
   against any inline page-template CSS that uses 900px breakpoint. */
@media (max-width: 1100px) {
  .site-nav__menu { display: none !important; }
  .site-nav__whatsapp span { display: none; }
  .site-nav__whatsapp { padding: 10px; ; min-width: 44px; min-height: 44px; justify-content: center; }
  .site-nav__toggle { display: inline-flex !important; }
}
/* Above 1100px, force desktop nav visible + hide burger. */
@media (min-width: 1101px) {
  .site-nav__menu { display: flex !important; }
  .site-nav__toggle { display: none !important; }
}

/* ----- 4 · BUTTONS ----- */
.btn {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: var(--sp-2);
  padding: 16px 28px;
  border-radius: 999px;
  font-size: 16px;
  font-weight: 600;
  letter-spacing: 0.005em;
  cursor: pointer;
  transition: background 0.2s var(--easing), color 0.2s var(--easing), transform 0.15s var(--easing), box-shadow 0.2s var(--easing);
  white-space: nowrap;
  text-decoration: none;
}
/* v2.7.1 (27/8/2026) , AA στα κουμπιά. Μετρημένο: paper σε --tulip #c9462c δίνει
   4,24:1, κάτω από το 4,5 για το 13-15px κείμενο των κουμπιών. Τα τουρ είχαν ήδη
   λύση (#a83a23 στο isolated), αλλά ΜΟΝΟ στο hover και μόνο εκεί: οι φόρμες των 6
   σελίδων (contacts, work-with-us, δύο ελληνικές, taxidiotika, greek-speaking)
   έμεναν στο 4,24. Η βάση γίνεται --tulip-hover (#a83a23 = 5,66:1), το --tulip
   μένει ανέγγιχτο για μεγάλα διακοσμητικά. */
.btn--primary {
  background: var(--tulip-hover);
  color: var(--paper);
  box-shadow: 0 1px 0 var(--tulip-hover), 0 4px 14px -6px rgba(201, 70, 44, 0.55);
}
.btn--primary:hover {
  background: #8f3019; /* σκουρότερο από τη νέα βάση, ώστε το hover να φαίνεται */
  transform: translateY(-1px);
  box-shadow: 0 1px 0 var(--tulip-hover), 0 8px 18px -6px rgba(201, 70, 44, 0.55);
}
.btn--primary:active { transform: translateY(0); }

.btn--ghost {
  background: transparent;
  color: var(--ink);
  padding-inline: var(--sp-4);
  position: relative;
}
.btn--ghost::after {
  content: "";
  position: absolute;
  left: 16px;
  right: 16px;
  bottom: 12px;
  height: 1.5px;
  background: var(--ink);
  transform-origin: left;
  transition: transform 0.25s var(--easing), background 0.25s var(--easing);
}
.btn--ghost:hover { color: var(--tulip); }
.btn--ghost:hover::after { background: var(--tulip); transform: scaleX(1.05); }

/* ----- 5 · HERO ----- */
.hero {
  padding-top: var(--sp-16);
  padding-bottom: 0;
  position: relative;
}

.hero__grid {
  max-width: var(--container);
  margin-inline: auto;
  padding-inline: var(--gutter);
  display: grid;
  grid-template-columns: minmax(0, 1.15fr) minmax(0, 1fr);
  align-items: center;
  gap: clamp(40px, 6vw, 96px);
  padding-bottom: var(--sp-16);
}

.hero__text { max-width: 720px; }

.hero__meta {
  font-family: var(--font-mono);
  font-size: var(--t-meta);
  font-weight: 500;
  letter-spacing: 0.14em;
  text-transform: uppercase;
  color: var(--ink-muted);
  display: flex;
  align-items: center;
  gap: var(--sp-2);
  margin-bottom: var(--sp-8);
}
.hero__meta-sep { opacity: 0.5; }

.hero__display {
  font-family: var(--font-display);
  font-variation-settings: "opsz" 144;
  font-weight: 500;
  font-size: var(--t-hero);
  line-height: 0.95;
  letter-spacing: -0.025em;
  color: var(--ink);
  margin-bottom: var(--sp-6);
}
.hero__display br { display: block; }

.hero__rule {
  display: block;
  width: 96px;
  height: 3px;
  background: var(--tulip);
  margin-bottom: var(--sp-8);
  border-radius: 2px;
}

.hero__h1 {
  font-family: var(--font-display);
  font-variation-settings: "opsz" 36;
  font-weight: 500;
  font-style: italic;
  font-size: clamp(22px, 1.6vw + 0.75rem, 30px);
  line-height: 1.25;
  letter-spacing: -0.005em;
  color: var(--ink-muted);
  margin-bottom: var(--sp-6);
  max-width: 26ch;
}

.hero__lede {
  font-family: var(--font-body);
  font-weight: 500;
  font-size: var(--t-lede);
  line-height: 1.55;
  color: var(--ink);
  max-width: 42ch;
  margin-bottom: var(--sp-10);
}

.hero__ctas {
  display: flex;
  align-items: center;
  gap: var(--sp-4);
  flex-wrap: wrap;
  margin-bottom: var(--sp-12);
}

.hero__trust {
  display: flex;
  flex-wrap: wrap;
  gap: var(--sp-4) var(--sp-8);
  padding-top: var(--sp-6);
  border-top: 1px solid var(--line);
  max-width: 620px;
}
.hero__trust li {
  display: flex;
  align-items: center;
  gap: var(--sp-2);
  font-family: var(--font-mono);
  font-size: 12px;
  font-weight: 500;
  letter-spacing: 0.06em;
  text-transform: uppercase;
  color: var(--ink-muted);
}
/* v2.2.0 (2026-06-01) , size every trust-strip icon uniformly. The older
   inline SVGs (circles/phone-off/spark/flame/bike) ship a viewBox but no
   width/height attribute, so without this rule they collapse to 0x0 and the
   chip reads as an icon-less text appendage. 18px matches the vr/leaf glyphs. */
.hero__trust li svg {
  width: 18px;
  height: 18px;
  flex: 0 0 auto;
}
.hero__stars {
  color: var(--tulip);
  font-family: var(--font-body);
  letter-spacing: 0.05em;
}

/* hero photo plate */
.hero__plate {
  position: relative;
  display: flex;
  flex-direction: column;
  gap: var(--sp-4);
  transform: rotate(0.8deg);
}

.hero__plate-frame {
  position: relative;
  background: var(--paper-raised);
  padding: 14px 14px 60px;
  box-shadow: 0 2px 4px rgba(26, 22, 18, 0.04),
              0 14px 38px -16px rgba(26, 22, 18, 0.22),
              0 40px 70px -30px rgba(26, 22, 18, 0.18);
  border: 1px solid var(--line);
}
.hero__plate-frame::after {
  content: "EcoEcho · Amsterdam";
  position: absolute;
  left: 0;
  right: 0;
  bottom: 18px;
  text-align: center;
  font-family: var(--font-display);
  font-style: italic;
  font-size: 16px;
  color: var(--ink-muted);
}
.hero__plate-frame img {
  width: 100%;
  aspect-ratio: 3 / 4;
  object-fit: cover;
  display: block;
  filter: contrast(1.02) saturate(1.05);
}

.hero__plate-caption {
  font-family: var(--font-mono);
  font-size: 11px;
  letter-spacing: 0.1em;
  text-transform: uppercase;
  color: var(--ink-muted);
  display: flex;
  gap: var(--sp-3);
  padding-inline: var(--sp-2);
}
.hero__plate-caption span:first-child {
  color: var(--tulip);
  font-weight: 500;
}

/* hero ticker */
.hero__ticker {
  overflow: hidden;
  border-top: 1px solid var(--line);
  border-bottom: 1px solid var(--line);
  background: var(--paper);
  padding-block: 14px;
}
.hero__ticker-inner {
  display: flex;
  gap: var(--sp-6);
  white-space: nowrap;
  animation: ticker 45s linear infinite;
  font-family: var(--font-mono);
  font-size: 12px;
  letter-spacing: 0.12em;
  text-transform: uppercase;
  color: var(--ink-muted);
  width: max-content;
}
.hero__ticker-inner span { flex-shrink: 0; }
.hero__ticker-inner span:nth-child(odd):not(:empty) {
  color: var(--ink);
  font-weight: 500;
}

@keyframes ticker {
  from { transform: translateX(0); }
  to { transform: translateX(-50%); }
}
/* 12/9/2026 (audit, WCAG 2.2.2): παύση με hover χωρίς JS, και ΣΤΑΤΙΚΟ σε αφή όπου hover δεν υπάρχει. */
.hero__ticker:hover .hero__ticker-inner { animation-play-state: paused; }
@media (hover: none) { .hero__ticker-inner { animation: none; } }

@media (max-width: 900px) {
  .hero { padding-top: var(--sp-10); }
  .hero__grid {
    grid-template-columns: minmax(0, 1fr);
    gap: var(--sp-12);
    padding-bottom: var(--sp-12);
  }
  .hero__plate {
    /* v2.6.34 (2026-08-07) , order:-1 put the photo above the headline, so the
       first phone screen carried no title, no price, no proof and no button.
       Measured at 375 before the change: H1 at 841px, CTA at 1111px. The photo
       keeps its slot, it just stops jumping the queue, and it is capped so it
       cannot swallow a short phone. NOTE: this rule is duplicated byte for byte
       in main.css and homepage.css, and homepage.css wins on load order, so
       both must always be edited together. */
    max-width: 420px;
    margin: 0 auto;
    transform: rotate(-0.6deg);
  }
  .hero__plate-frame img { max-height: 34svh; object-fit: cover; }
  /* aria-hidden decoration that repeats the H1. It costs 84px of the first
     screen on a phone and reads to nobody. */
  .hero__display { display: none; }
  .hero__plate-frame img { aspect-ratio: 4 / 5; }
  .hero__meta { margin-bottom: var(--sp-4); }
  .hero__display { margin-bottom: var(--sp-4); }
  .hero__rule { margin-bottom: var(--sp-4); }
  .hero__h1 { margin-bottom: var(--sp-4); }
  .hero__lede { margin-bottom: var(--sp-8); }
  .hero__ctas { margin-bottom: var(--sp-8); }
  .hero__ctas .btn { flex: 1; }

  /* v2.6.50 (2026-08-15) , ΤΡΙΤΗ εκδοχή της σειράς του hero στο κινητό (founder:
     η φωτογραφία ερχόταν μία οθόνη πιο κάτω, «λες και ξεκινάει άρθρο»). Το
     v2.6.34 έκοψε το order:-1 γιατί το φωτογραφία-πρώτα έθαβε το H1 στα 841px·
     το κείμενο-πρώτα έθαψε μετά τη φωτογραφία. Καμία από τις δύο σειρές δεν
     δουλεύει, γιατί η φωτογραφία ανήκει ΑΝΑΜΕΣΑ σε τίτλο και κείμενο:
     display:contents διαλύει το .hero__text ώστε τα παιδιά του και το plate να
     μοιράζονται το ίδιο grid, και το order τα στήνει ως masthead, τίτλος,
     φωτογραφία, lede, κουμπιά, απόδειξη. Το gap μηδενίζει, τον ρυθμό τον
     κρατούν τα υπάρχοντα margin-bottom. ΔΙΠΛΟ ΑΡΧΕΙΟ: main.css ΚΑΙ
     homepage.css, πάντα μαζί. */
  .hero__grid { gap: 0; }
  .hero__text { display: contents; }
  .hero__text > * { order: 9; }
  .hero__meta { order: 1; }
  .hero__rule { order: 2; }
  .hero__h1 { order: 3; }
  .hero__plate { order: 4; margin-bottom: var(--sp-6); }
  .hero__lede { order: 5; }
  .hero__ctas { order: 6; }
  .hero__trust { order: 7; }
}

@media (max-width: 480px) {
  .hero__ctas { flex-direction: column; align-items: stretch; }
  .hero__ctas .btn { width: 100%; }
}

/* ----- 6 · PROOF BAND (above-fold trust) ----- */
.proof {
  background: var(--ink);
  color: var(--paper);
  padding-block: clamp(48px, 6vw, 88px);
  position: relative;
  overflow: hidden;
}
.proof::before,
.proof::after {
  content: "";
  position: absolute;
  left: 0;
  right: 0;
  height: 1px;
  background: rgba(245, 241, 234, 0.14);
}
.proof::before { top: 24px; }
.proof::after { bottom: 24px; }

.proof__inner {
  max-width: var(--container);
  margin-inline: auto;
  padding-inline: var(--gutter);
  display: grid;
  grid-template-columns: minmax(0, 1.4fr) minmax(0, 1fr);
  gap: clamp(40px, 5vw, 96px);
  align-items: center;
}

/* v2.1.33 , simplified review layout */
.proof__headline {
  display: flex;
  flex-direction: column;
  gap: var(--sp-3);
}
.proof__stars {
  font-family: var(--font-body);
  font-size: 22px;
  letter-spacing: 0.12em;
  color: var(--tulip);
}
.proof__h2 {
  font-family: var(--font-display);
  font-variation-settings: "opsz" 144;
  font-weight: 500;
  font-size: clamp(40px, 5vw + 0.5rem, 72px);
  line-height: 1.02;
  letter-spacing: -0.025em;
  color: var(--paper);
  margin: 0;
  max-width: 16ch;
}
.proof__h2 em {
  font-style: italic;
  color: var(--tulip);
}
.proof__sub {
  font-family: var(--font-body);
  font-size: clamp(16px, 1vw + 0.5rem, 19px);
  line-height: 1.55;
  color: rgba(245, 241, 234, 0.7);
  max-width: 42ch;
  margin: 0;
}

.proof__platforms-row {
  display: block;
  list-style: none;
  padding: 0;
  margin: 0;
}
.proof__platforms-row li {
  display: block;
  margin: 0 0 12px;
}
.proof__platforms-row li + li {
  /* no divider, matches staging */
}
.proof__platforms-row a {
  display: block;
  padding: var(--sp-4) var(--sp-3);
  font-family: var(--font-display);
  font-weight: 500;
  font-size: clamp(18px, 1.5vw + 0.25rem, 24px);
  letter-spacing: -0.01em;
  color: var(--paper);
  text-decoration: none;
  transition: background 0.2s var(--easing), color 0.2s var(--easing);
}
.proof__platforms-row a:hover {
  background: rgba(245, 241, 234, 0.04);
  color: var(--tulip);
}

@media (max-width: 800px) {
  .proof__inner { grid-template-columns: 1fr; }
  .proof__platforms-row { flex-direction: column; }
  .proof__platforms-row li + li {
    border-left: 0;
    border-top: 1px solid rgba(245, 241, 234, 0.12);
  }
}

.proof__quote {
  position: relative;
  padding-top: var(--sp-2);
}
.proof__quote::before {
  content: "“";
  position: absolute;
  top: -36px;
  left: -12px;
  font-family: var(--font-display);
  font-size: 160px;
  line-height: 1;
  color: var(--tulip);
  opacity: 0.35;
  pointer-events: none;
}
.proof__quote blockquote {
  margin: 0;
}
.proof__quote p {
  font-family: var(--font-display);
  font-style: italic;
  font-weight: 400;
  font-size: clamp(22px, 1.8vw + 0.5rem, 30px);
  line-height: 1.35;
  letter-spacing: -0.005em;
  color: var(--paper);
  max-width: 36ch;
  margin: 0;
}
.proof__quote figcaption {
  margin-top: var(--sp-6);
  display: flex;
  gap: var(--sp-3);
  align-items: baseline;
  font-family: var(--font-mono);
  font-size: 12px;
  letter-spacing: 0.12em;
  text-transform: uppercase;
  color: rgba(245, 241, 234, 0.7);
}
.proof__quote-src { color: rgba(245, 241, 234, 0.45); }

.proof__link {
  display: inline-flex;
  align-items: center;
  gap: var(--sp-2);
  margin-top: var(--sp-8);
  padding-bottom: 4px;
  font-family: var(--font-body);
  font-size: 14px;
  font-weight: 500;
  color: var(--paper);
  border-bottom: 1.5px solid var(--tulip);
  transition: color 0.2s var(--easing), border-color 0.2s var(--easing);
}
.proof__link:hover {
  color: var(--tulip);
}
.proof__link span { transition: transform 0.2s var(--easing); }
.proof__link:hover span { transform: translateX(3px); }

@media (max-width: 900px) {
  .proof__inner {
    grid-template-columns: minmax(0, 1fr);
    gap: var(--sp-10);
  }
  .proof__rating { flex-direction: row; align-items: baseline; gap: var(--sp-4); }
  .proof__score { font-size: 80px; }
  .proof__quote::before { top: -24px; font-size: 100px; }
}

/* ----- 7 · SECTION META (shared) ----- */
/* 27/8/2026 , το .section-meta είναι σκούρο πορτοκαλί, σωστό πάνω σε χαρτί
   (5,66:1) αλλά ΜΟΝΟ 2,82:1 στις δύο ΣΚΟΥΡΕΣ ενότητες του κάθε τουρ,
   «Beyond the Sights» και «For the trade». Ίδια απόχρωση, ανοιχτότερη,
   μετρημένη στο 5,68:1 πάνω σε μελάνι. */
.tour-edu .section-meta,
.tour-b2b .section-meta { color: #e0705a; border-bottom-color: #e0705a; }

.section-meta {
  font-family: var(--font-mono);
  font-size: 12px;
  font-weight: 500;
  letter-spacing: 0.2em;
  text-transform: uppercase;
  color: var(--tulip-text);
  margin-bottom: var(--sp-8);
  display: inline-block;
  border-bottom: 1px solid var(--tulip-text);
  padding-bottom: 6px;
}

/* ----- 7.1 · VIBE CHECK ----- */
.vibe {
  padding-block: clamp(72px, 8vw, 128px);
  background: var(--paper);
  border-top: 1px solid var(--line);
}
.vibe__inner {
  max-width: var(--container);
  margin-inline: auto;
  padding-inline: var(--gutter);
  display: grid;
  grid-template-columns: minmax(0, 1fr) minmax(0, 1.2fr);
  gap: clamp(48px, 6vw, 96px);
  align-items: start;
}

.vibe__lead { position: sticky; top: calc(var(--nav-h) + 24px); }
.vibe__h2 {
  font-family: var(--font-display);
  font-variation-settings: "opsz" 144;
  font-weight: 500;
  font-size: clamp(48px, 5vw + 0.75rem, 96px);
  line-height: 0.95;
  letter-spacing: -0.03em;
  color: var(--ink);
  margin-bottom: var(--sp-6);
}
.vibe__sub {
  font-family: var(--font-display);
  font-style: italic;
  font-weight: 400;
  font-size: clamp(20px, 1vw + 0.75rem, 28px);
  line-height: 1.4;
  color: var(--ink-muted);
  margin-bottom: var(--sp-10);
  max-width: 22ch;
}
.vibe__cta { align-self: flex-start; }

.vibe__list {
  display: flex;
  flex-direction: column;
}
.vibe__list li {
  display: grid;
  grid-template-columns: 64px 72px 1fr;
  align-items: start;
  gap: var(--sp-4);
  padding: clamp(28px, 2vw + 0.5rem, 44px) 0;
  border-bottom: 1px solid var(--line);
  position: relative;
  transition: padding-left 0.3s var(--easing);
}
.vibe__list li:first-child { border-top: 1px solid var(--line); }
.vibe__list li:hover { padding-left: 8px; }
.vibe__list li:hover .vibe__idx { color: var(--tulip); }

.vibe__idx {
  font-family: var(--font-mono);
  font-size: 13px;
  font-weight: 500;
  letter-spacing: 0.16em;
  color: var(--ink-muted);
  padding-top: 6px;
  transition: color 0.2s var(--easing);
}
.vibe__icon {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: clamp(36px, 2.4vw + 1rem, 44px);
  height: clamp(36px, 2.4vw + 1rem, 44px);
  color: var(--tulip, #c9462c);
  padding-top: 2px;
  transition: color 0.25s var(--easing), transform 0.35s var(--easing);
}
.vibe__icon svg {
  width: 100%;
  height: 100%;
  display: block;
}
.vibe__list li:hover .vibe__icon { transform: translateY(-1px); }
.vibe__list p {
  font-family: var(--font-body);
  font-size: clamp(16px, 0.3vw + 0.95rem, 18px);
  line-height: 1.6;
  color: var(--ink);
}

@media (max-width: 900px) {
  .vibe__inner { grid-template-columns: minmax(0, 1fr); gap: var(--sp-10); }
  .vibe__lead { position: static; }
  .vibe__list li {
    grid-template-columns: 48px 1fr;
    grid-template-rows: auto auto;
    gap: var(--sp-2) var(--sp-3);
  }
  .vibe__idx { grid-column: 1 / -1; padding-top: 0; margin-bottom: 4px; }
  .vibe__icon { grid-row: 2; }
  .vibe__list p { grid-row: 2; }
}

/* ----- 7.2 · WHAT WE DO ----- */
.what {
  padding-block: clamp(72px, 8vw, 128px);
  background: var(--paper-deep);
  border-top: 1px solid var(--line);
  position: relative;
  overflow: hidden;
}
.what::before {
  content: "03";
  position: absolute;
  right: -6vw;
  top: 4vw;
  font-family: var(--font-display);
  font-weight: 700;
  font-size: 42vw;
  line-height: 0.8;
  color: var(--ink);
  opacity: 0.03;
  pointer-events: none;
}
.what__inner {
  max-width: var(--container);
  margin-inline: auto;
  padding-inline: var(--gutter);
  position: relative;
  z-index: 1;
}
.what__pull {
  font-family: var(--font-display);
  font-variation-settings: "opsz" 144;
  font-weight: 500;
  font-size: clamp(44px, 6vw + 0.5rem, 108px);
  line-height: 0.98;
  letter-spacing: -0.03em;
  color: var(--ink);
  margin-bottom: clamp(48px, 5vw, 96px);
  max-width: 14ch;
}
.what__grid {
  display: grid;
  grid-template-columns: minmax(0, 1.6fr) minmax(0, 1fr);
  gap: clamp(40px, 5vw, 72px);
  align-items: start;
}
.what__body {
  font-family: var(--font-body);
  font-size: clamp(17px, 0.3vw + 1rem, 19px);
  line-height: 1.7;
  color: var(--ink);
  max-width: 58ch;
}
.what__body::first-letter {
  font-family: var(--font-display);
  font-weight: 600;
  font-size: 4.5em;
  line-height: 0.85;
  float: left;
  margin: 6px 12px 0 0;
  color: var(--tulip);
}

.what__card {
  padding: clamp(24px, 2vw + 0.5rem, 36px);
  background: var(--paper-raised);
  border: 1px solid var(--line);
  display: flex;
  flex-direction: column;
  gap: var(--sp-6);
}
.what__card-line {
  display: flex;
  align-items: center;
  gap: var(--sp-3);
  font-family: var(--font-mono);
  font-size: 12px;
  letter-spacing: 0.12em;
  text-transform: uppercase;
  color: var(--ink-muted);
  padding-bottom: var(--sp-4);
  border-bottom: 1px solid var(--line);
}
.what__card-line .hero__stars { font-size: 16px; }

.what__tags {
  display: flex;
  flex-wrap: wrap;
  gap: var(--sp-2);
}
.what__tags li {
  font-family: var(--font-mono);
  font-size: 11px;
  font-weight: 500;
  letter-spacing: 0.12em;
  text-transform: uppercase;
  color: var(--ink);
  padding: 6px 10px;
  border: 1px solid var(--line-strong);
  border-radius: 999px;
}

.what__cta { align-self: flex-start; }

@media (max-width: 900px) {
  .what__grid { grid-template-columns: minmax(0, 1fr); }
  .what__pull { margin-bottom: var(--sp-10); }
}

/* ----- 7.3 · ABOUT THE HOST ----- */
.host {
  padding-block: clamp(72px, 8vw, 128px);
  background: var(--paper);
  border-top: 1px solid var(--line);
}
.host__inner {
  max-width: var(--container);
  margin-inline: auto;
  padding-inline: var(--gutter);
  display: grid;
  grid-template-columns: minmax(0, 1fr) minmax(0, 1.2fr);
  gap: clamp(48px, 6vw, 96px);
  align-items: center;
}

.host__portrait {
  position: relative;
  margin: 0;
  max-width: 520px;
  justify-self: start;
  transform: rotate(-0.5deg);
}
.host__portrait-frame {
  background: var(--paper-raised);
  padding: 12px 12px 56px;
  border: 1px solid var(--line);
  box-shadow: 0 2px 4px rgba(26, 22, 18, 0.04),
              0 18px 42px -18px rgba(26, 22, 18, 0.22);
  position: relative;
}
.host__portrait-frame::after {
  content: "Iliadis Antonis"; /* v2.1.41 , em-dash removed (no-em-dash rule) */
  position: absolute;
  left: 0;
  right: 0;
  bottom: 18px;
  text-align: center;
  font-family: var(--font-display);
  font-style: italic;
  font-size: 15px;
  color: var(--ink-muted);
}
.host__portrait img {
  width: 100%;
  aspect-ratio: 4 / 5;
  object-fit: cover;
  filter: contrast(1.02) saturate(1.05);
  display: block;
}
.host__portrait figcaption {
  margin-top: var(--sp-4);
  font-family: var(--font-mono);
  font-size: 11px;
  letter-spacing: 0.12em;
  text-transform: uppercase;
  color: var(--ink-muted);
  padding-left: var(--sp-2);
}

.host__text { max-width: 560px; }
.host__h2 {
  font-family: var(--font-display);
  font-variation-settings: "opsz" 144;
  font-weight: 500;
  font-size: clamp(44px, 5vw + 0.5rem, 80px);
  line-height: 0.98;
  letter-spacing: -0.025em;
  color: var(--ink);
  margin-bottom: var(--sp-8);
}
.host__sub {
  font-family: var(--font-display);
  font-style: italic;
  font-weight: 400;
  font-size: clamp(20px, 0.8vw + 1rem, 26px);
  line-height: 1.45;
  color: var(--ink-muted);
  margin-bottom: var(--sp-8);
  padding-bottom: var(--sp-8);
  border-bottom: 1px solid var(--line);
}
.host__body {
  font-family: var(--font-body);
  font-size: clamp(17px, 0.3vw + 1rem, 19px);
  line-height: 1.7;
  color: var(--ink);
  margin-bottom: var(--sp-6);
}
.host__signature {
  font-family: var(--font-display);
  font-style: italic;
  font-weight: 500;
  font-size: 28px;
  color: var(--ink);
  display: flex;
  align-items: center;
  gap: var(--sp-3);
}
.host__signature span:first-child { color: var(--tulip); font-size: 36px; line-height: 0.5; }

@media (max-width: 900px) {
  .host__inner { grid-template-columns: minmax(0, 1fr); gap: var(--sp-10); }
  .host__portrait { max-width: 380px; margin: 0 auto; }
}

/* ----- 7.4 · REAL FEEDBACK ----- */
.feedback {
  padding-block: clamp(80px, 9vw, 140px);
  background: var(--paper-deep);
  border-top: 1px solid var(--line);
  position: relative;
  overflow: hidden;
}
.feedback__inner {
  max-width: var(--container);
  margin-inline: auto;
  padding-inline: var(--gutter);
}

.feedback__head { max-width: 720px; margin-bottom: clamp(40px, 4vw, 64px); }
.feedback__h2 {
  font-family: var(--font-display);
  font-variation-settings: "opsz" 144;
  font-weight: 500;
  font-size: clamp(48px, 5vw + 0.5rem, 88px);
  line-height: 0.98;
  letter-spacing: -0.03em;
  color: var(--ink);
  margin-bottom: var(--sp-4);
}
.feedback__sub {
  font-family: var(--font-display);
  font-style: italic;
  font-size: clamp(22px, 1vw + 0.75rem, 30px);
  color: var(--ink-muted);
  margin-bottom: 6px;
}
.feedback__disclaimer {
  font-family: var(--font-mono);
  font-size: 12px;
  letter-spacing: 0.12em;
  text-transform: uppercase;
  color: var(--ink-muted);
  /* 27/8: το opacity 0.7 έριχνε την αντίθεση από 6,64:1 σε 3,33:1. */
}

.feedback__aggregate {
  display: flex;
  align-items: baseline;
  gap: var(--sp-4);
  padding: clamp(20px, 2vw, 28px) 0;
  border-top: 2px solid var(--ink);
  border-bottom: 1px solid var(--line);
  margin-bottom: clamp(40px, 5vw, 72px);
  flex-wrap: wrap;
}
.feedback__aggregate-stars {
  font-family: var(--font-body);
  font-size: 20px;
  letter-spacing: 0.1em;
  color: var(--tulip);
}
.feedback__aggregate-score {
  font-family: var(--font-display);
  font-variation-settings: "opsz" 144;
  font-weight: 500;
  font-size: clamp(36px, 2.5vw + 0.5rem, 56px);
  line-height: 1;
  letter-spacing: -0.02em;
}
.feedback__aggregate-text {
  font-family: var(--font-mono);
  font-size: 12px;
  letter-spacing: 0.14em;
  text-transform: uppercase;
  color: var(--ink-muted);
}

.feedback__platforms {
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  gap: clamp(12px, 1vw, 20px);
  margin-bottom: clamp(64px, 7vw, 112px);
}
.feedback__platforms a {
  display: grid;
  grid-template-columns: 1fr auto;
  grid-template-areas:
    "name name"
    "stars score"
    "count count"
    "cta cta";
  align-items: baseline;
  row-gap: 8px;
  column-gap: var(--sp-3);
  padding: clamp(20px, 2vw, 28px);
  background: var(--paper-raised);
  border: 1px solid var(--line);
  transition: transform 0.25s var(--easing), border-color 0.25s var(--easing), box-shadow 0.25s var(--easing);
}
.feedback__platforms a:hover {
  transform: translateY(-3px);
  border-color: var(--tulip);
  box-shadow: 0 14px 28px -16px rgba(26, 22, 18, 0.22);
}
.feedback__platform-name {
  grid-area: name;
  font-family: var(--font-display);
  font-weight: 500;
  font-size: 22px;
  letter-spacing: -0.01em;
  padding-bottom: 10px;
  border-bottom: 1px solid var(--line);
}
.feedback__platform-stars { grid-area: stars; color: var(--tulip); font-size: 15px; letter-spacing: 0.08em; }
.feedback__platform-score {
  grid-area: score;
  font-family: var(--font-display);
  font-weight: 600;
  font-size: 24px;
  letter-spacing: -0.01em;
}
.feedback__platform-count {
  grid-area: count;
  font-family: var(--font-mono);
  font-size: 12px;
  letter-spacing: 0.1em;
  color: var(--ink-muted);
}
.feedback__platform-cta {
  grid-area: cta;
  font-family: var(--font-body);
  font-size: 13px;
  font-weight: 500;
  color: var(--tulip);
  margin-top: var(--sp-2);
  display: inline-flex;
  align-items: center;
  gap: 4px;
}

.feedback__quotes {
  display: flex;
  flex-direction: column;
  gap: clamp(48px, 5vw, 88px);
  margin-bottom: clamp(48px, 5vw, 80px);
}
.feedback__quote {
  position: relative;
  max-width: 820px;
  display: grid;
  grid-template-columns: 56px 1fr;
  gap: var(--sp-6);
  align-items: start;
}
.feedback__quote--right {
  margin-left: auto;
  justify-items: end;
  text-align: right;
}
.feedback__quote--right blockquote p { margin-left: auto; }
.feedback__quote--right figcaption { justify-content: flex-end; }

.feedback__quote-idx {
  font-family: var(--font-display);
  font-weight: 600;
  font-size: 20px;
  color: var(--tulip);
  letter-spacing: 0.02em;
  padding-top: 10px;
  border-top: 2px solid var(--tulip);
  min-width: 40px;
}

.feedback__quote blockquote { margin: 0; }
.feedback__quote p {
  font-family: var(--font-display);
  font-style: italic;
  font-weight: 400;
  font-size: clamp(22px, 1.6vw + 0.75rem, 38px);
  line-height: 1.3;
  letter-spacing: -0.01em;
  color: var(--ink);
  max-width: 30ch;
}
.feedback__quote figcaption {
  margin-top: var(--sp-4);
  display: flex;
  gap: var(--sp-3);
  align-items: baseline;
  font-family: var(--font-mono);
  font-size: 12px;
  letter-spacing: 0.12em;
  text-transform: uppercase;
  color: var(--ink-muted);
}
.feedback__quote-src { opacity: 0.7; }

.feedback__cta-wrap {
  display: flex;
  justify-content: center;
  padding-top: var(--sp-6);
  border-top: 1px solid var(--line);
}

/* v2.1.35: 3-button row at the bottom of the reviews section.
   Stacks on mobile, sits inline on tablet and up. */
.feedback__cta-wrap--row {
  flex-wrap: wrap;
  gap: var(--sp-3);
}
.feedback__cta-wrap--row .btn { white-space: nowrap; }
@media (max-width: 640px) {
  .feedback__cta-wrap--row { flex-direction: column; align-items: stretch; }
  .feedback__cta-wrap--row .btn { text-align: center; }
}

@media (max-width: 900px) {
  .feedback__platforms { grid-template-columns: minmax(0, 1fr); }
  .feedback__quote,
  .feedback__quote--right {
    margin-left: 0;
    text-align: left;
    justify-items: start;
    grid-template-columns: 40px 1fr;
    gap: var(--sp-4);
  }
  .feedback__quote--right blockquote p { margin-left: 0; }
  .feedback__quote--right figcaption { justify-content: flex-start; }
}

/* ----- 7.5 · FIELD NOTES ----- */
.field {
  padding-block: clamp(72px, 8vw, 128px);
  background: var(--paper);
  border-top: 1px solid var(--line);
}
.field__inner {
  max-width: var(--container);
  margin-inline: auto;
  padding-inline: var(--gutter);
}
.field__head {
  margin-bottom: clamp(40px, 4vw, 72px);
  display: flex;
  flex-wrap: wrap;
  align-items: flex-end;
  justify-content: space-between;
  gap: var(--sp-6);
}
.field__h2 {
  font-family: var(--font-display);
  font-variation-settings: "opsz" 144;
  font-weight: 500;
  font-size: clamp(44px, 5vw + 0.5rem, 80px);
  line-height: 0.95;
  letter-spacing: -0.025em;
  color: var(--ink);
}
.field__h2 em {
  font-style: italic;
  font-weight: 400;
  color: var(--ink-muted);
  font-size: 0.55em;
  display: block;
  margin-top: 4px;
  letter-spacing: -0.01em;
}

.field__grid {
  display: grid;
  grid-template-columns: repeat(6, minmax(0, 1fr));
  gap: clamp(16px, 1.5vw, 28px);
}
.field__tile {
  background: var(--paper-raised);
  padding: 10px 10px 44px;
  border: 1px solid var(--line);
  box-shadow: 0 2px 4px rgba(26, 22, 18, 0.04),
              0 12px 28px -14px rgba(26, 22, 18, 0.22);
  position: relative;
  transform: rotate(var(--r, 0deg));
  transition: transform 0.3s var(--easing), box-shadow 0.3s var(--easing), z-index 0s 0.3s;
  z-index: 1;
}
.field__tile:hover {
  transform: rotate(0deg) translateY(-4px) scale(1.02);
  box-shadow: 0 2px 4px rgba(26, 22, 18, 0.04),
              0 24px 48px -16px rgba(26, 22, 18, 0.32);
  z-index: 2;
  transition: transform 0.3s var(--easing), box-shadow 0.3s var(--easing);
}
.field__tile img {
  width: 100%;
  aspect-ratio: 4 / 5;
  object-fit: cover;
  display: block;
  filter: contrast(1.02) saturate(1.05);
}
.field__tile-cap {
  position: absolute;
  left: 0;
  right: 0;
  bottom: 14px;
  text-align: center;
  font-family: var(--font-display);
  font-style: italic;
  font-size: 13px;
  color: var(--ink-muted);
}

.field__follow {
  margin-top: clamp(32px, 3vw, 56px);
  text-align: center;
  font-family: var(--font-mono);
  font-size: 12px;
  letter-spacing: 0.14em;
  text-transform: uppercase;
  color: var(--ink-muted);
}
.field__follow a {
  color: var(--ink);
  border-bottom: 1.5px solid var(--tulip);
  padding-bottom: 2px;
  margin-left: var(--sp-2);
  transition: color 0.2s var(--easing);
}
.field__follow a:hover { color: var(--tulip); }

@media (max-width: 900px) {
  .field__grid { grid-template-columns: repeat(3, minmax(0, 1fr)); }
}
@media (max-width: 560px) {
  .field__grid { grid-template-columns: repeat(2, minmax(0, 1fr)); }
}

/* ----- 7.5b · B-ROLL (Reels, editorial contact sheet) -----
   v2.1.64: 5 vertical 9:16 reels placed between Real Feedback (05) and
   Field Notes (06). Pentagram-grade editorial contact sheet, NOT Instagram.
   No rotation, no polaroid frame. Strict 5-col grid on desktop, scroll-snap
   rail on tablet and mobile. Videos lazy-mount via IntersectionObserver
   (see inline script in front-page.php) so LCP is unaffected.
*/
.broll {
  padding-block: clamp(64px, 7vw, 112px);
  background: var(--paper-deep);
  border-top: 1px solid var(--line);
  border-bottom: 1px solid var(--line);
}
.broll__inner {
  max-width: var(--container);
  margin-inline: auto;
  padding-inline: var(--gutter);
}
.broll__head {
  margin-bottom: clamp(32px, 3.5vw, 56px);
  max-width: 720px;
}
.broll__h2 {
  font-family: var(--font-display);
  font-variation-settings: "opsz" 144;
  font-weight: 500;
  font-size: clamp(40px, 4.5vw + 0.5rem, 72px);
  line-height: 0.95;
  letter-spacing: -0.025em;
  color: var(--ink);
  margin: 0;
}
.broll__h2 em {
  font-style: italic;
  font-weight: 400;
  color: var(--ink-muted);
  font-size: 0.55em;
  display: block;
  margin-top: 4px;
  letter-spacing: -0.01em;
}
.broll__lede {
  font-family: var(--font-body, var(--font-body,Inter), system-ui, sans-serif);
  font-size: var(--t-lede);
  line-height: 1.5;
  color: var(--ink-muted);
  margin-top: var(--sp-6);
  max-width: 56ch;
}
/* v2.1.66 (2026-05-21): Ultra-specific selector + !important to defeat
   any inherited list/flex rules from main.css predecessors or WP Rocket
   Used CSS regen that mis-classifies these as unused. Desktop+laptop
   ALWAYS shows 5-column grid; only narrow viewports get scroll-snap. */
ol.broll__rail,
.broll__rail {
  list-style: none !important;
  margin: 0 !important;
  padding: 0 !important;
  display: grid !important;
  grid-template-columns: repeat(5, minmax(0, 1fr)) !important;
  gap: clamp(12px, 1vw, 20px) !important;
  align-items: stretch !important;
}
ol.broll__rail > li.broll__cell,
.broll__rail > .broll__cell {
  min-width: 0 !important;
}
.broll__cell { margin: 0; }
.broll__frame {
  position: relative;
  margin: 0;
  background: var(--paper-raised);
  border: 1px solid var(--line);
  padding: 0;
  overflow: hidden;
  box-shadow:
    0 2px 4px rgba(26, 22, 18, 0.04),
    0 14px 32px -18px rgba(26, 22, 18, 0.28);
  transition: transform 0.3s var(--easing), box-shadow 0.3s var(--easing);
}
.broll__frame:hover {
  transform: translateY(-3px);
  box-shadow:
    0 2px 4px rgba(26, 22, 18, 0.05),
    0 28px 52px -20px rgba(26, 22, 18, 0.34);
}
.broll__video {
  display: block;
  width: 100%;
  aspect-ratio: 9 / 16;
  object-fit: cover;
  background: var(--paper-deep);
}
.broll__badge {
  position: absolute;
  top: 12px;
  right: 12px;
  width: 26px;
  height: 26px;
  border-radius: 50%;
  background: rgba(26, 22, 18, 0.72);
  background-image: url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='%23f5f1ea'><path d='M8 5v14l11-7z'/></svg>");
  background-size: 14px 14px;
  background-position: 55% 50%;
  background-repeat: no-repeat;
  pointer-events: none;
  z-index: 2;
  transition: opacity 0.25s var(--easing);
}
.broll__video[data-mounted="1"] + .broll__badge { opacity: 0; }
.broll__cap {
  display: flex;
  gap: var(--sp-2);
  align-items: baseline;
  padding: 10px 12px 14px;
  background: var(--paper-raised);
  border-top: 1px solid var(--line);
  font-family: var(--font-mono);
  font-size: 11px;
  letter-spacing: 0.08em;
  text-transform: lowercase;
  color: var(--ink-muted);
}
.broll__cap-num {
  color: var(--tulip);
  font-weight: 600;
}
.broll__cap-text {
  flex: 1;
  min-width: 0;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}
/* v2.1.66 (2026-05-21): bumped breakpoint from 1023→767 so desktop +
   laptop (any viewport >= 768px) always gets the 5-col grid. Only true
   tablet/phone viewports get the scroll-snap rail. */
@media (max-width: 767px) {
  ol.broll__rail,
  .broll__rail {
    display: flex !important;
    grid-template-columns: none !important;
    overflow-x: auto !important;
    scroll-snap-type: x mandatory;
    scroll-padding-inline: var(--gutter);
    gap: var(--sp-4) !important;
    padding-bottom: var(--sp-4);
    scrollbar-width: none;
    -webkit-overflow-scrolling: touch;
  }
  .broll__rail::-webkit-scrollbar { display: none; }
  .broll__cell {
    flex: 0 0 calc((100% - 2 * var(--sp-4)) / 2.4);
    scroll-snap-align: start;
  }
}
@media (max-width: 767px) {
  .broll__cell { flex: 0 0 86%; }
  .broll__h2 { font-size: clamp(36px, 9vw, 56px); }
  .broll__lede { font-size: 16px; }
}
@media (prefers-reduced-motion: reduce) {
  .broll__video[data-mounted="1"] + .broll__badge { opacity: 1; }
  .broll__frame:hover { transform: none; }
}

/* ----- 7.6 · TOURS SHARED (Private + Small Group) ----- */
.tours {
  padding-block: clamp(80px, 8vw, 140px);
  border-top: 1px solid var(--line);
}
.tours--private { background: var(--paper); }
.tours--group {
  background: var(--ink);
  color: var(--paper);
}

.tours__inner {
  max-width: var(--container);
  margin-inline: auto;
  padding-inline: var(--gutter);
}

.tours__head {
  display: grid;
  grid-template-columns: minmax(0, 1.2fr) minmax(0, 1fr);
  align-items: end;
  gap: clamp(24px, 3vw, 48px);
  margin-bottom: clamp(48px, 5vw, 88px);
  padding-bottom: clamp(24px, 2vw, 40px);
  border-bottom: 2px solid currentColor;
}
.tours__h2 {
  grid-column: 1;
  font-family: var(--font-display);
  font-variation-settings: "opsz" 144;
  font-weight: 500;
  font-size: clamp(44px, 5vw + 0.5rem, 88px);
  line-height: 0.98;
  letter-spacing: -0.025em;
}
.tours__h2 em {
  font-style: italic;
  font-weight: 400;
  opacity: 0.75;
}
.tours__lede {
  grid-column: 1;
  font-family: var(--font-display);
  font-style: italic;
  font-size: clamp(20px, 1vw + 0.75rem, 28px);
  line-height: 1.4;
  opacity: 0.8;
  margin-top: var(--sp-4);
  max-width: 32ch;
}
.tours__head-meta {
  grid-column: 2;
  grid-row: 1 / span 2;
  display: flex;
  flex-direction: column;
  gap: var(--sp-2);
  font-family: var(--font-mono);
  font-size: 12px;
  letter-spacing: 0.12em;
  text-transform: uppercase;
  opacity: 0.75;
  align-self: flex-end;
}
.tours__head-meta span { display: flex; align-items: center; gap: var(--sp-2); }
.tours--group .tours__head-meta .hero__stars,
.tours--private .tours__head-meta .hero__stars { color: var(--tulip); }

.tours__head-cta {
  grid-column: 1 / -1;
  justify-self: start;
  margin-top: var(--sp-6);
}
.tours--group .tours__head-cta { color: var(--paper); }
.tours--group .tours__head-cta::after { background: var(--paper); }
.tours--group .tours__head-cta:hover { color: var(--tulip); }
.tours--group .tours__head-cta:hover::after { background: var(--tulip); }

.tours__grid {
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  gap: clamp(20px, 2vw, 32px);
}

/* ----- 7.7 · TOUR CARD ----- */
.card {
  background: var(--paper-raised);
  color: var(--ink);
  border: 1px solid var(--line);
  transition: transform 0.3s var(--easing), box-shadow 0.3s var(--easing), border-color 0.3s var(--easing);
}
.tours--group .card {
  background: var(--ink);
  color: var(--paper);
  border-color: rgba(245, 241, 234, 0.14);
}
.card:hover {
  transform: translateY(-4px);
  box-shadow: 0 24px 48px -20px rgba(26, 22, 18, 0.35);
  border-color: var(--tulip);
}
.card__link {
  display: flex;
  flex-direction: column;
  height: 100%;
  color: inherit;
  text-decoration: none;
}
.card__media {
  position: relative;
  margin: 0;
  overflow: hidden;
  aspect-ratio: 4 / 3;
  background: var(--paper-deep);
}
.card__media img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  transition: transform 0.6s var(--easing);
}
.card:hover .card__media img { transform: scale(1.04); }

/* 14/9/2026: το .card__badge αφαιρέθηκε, βλ. .card__type στο homepage.css. */

.card__body {
  padding: clamp(20px, 2vw, 28px);
  display: flex;
  flex-direction: column;
  gap: var(--sp-4);
  flex: 1;
}
.card__type {
  font-family: var(--font-mono);
  font-size: 11px;
  font-weight: 500;
  letter-spacing: 0.14em;
  text-transform: uppercase;
  opacity: 0.7;
}
.card__h3 {
  font-family: var(--font-display);
  font-variation-settings: "opsz" 72;
  font-weight: 500;
  font-size: clamp(22px, 1.2vw + 0.75rem, 28px);
  line-height: 1.15;
  letter-spacing: -0.015em;
}
.card__desc {
  font-family: var(--font-body);
  font-size: 15px;
  line-height: 1.55;
  opacity: 0.85;
}
.card__details {
  display: flex;
  flex-direction: column;
  gap: 8px;
  padding: var(--sp-4) 0;
  border-top: 1px solid currentColor;
  border-bottom: 1px solid currentColor;
  border-color: var(--line);
  margin-top: auto;
}
.tours--group .card__details { border-color: rgba(245, 241, 234, 0.14); }
.card__details li {
  display: flex;
  align-items: center;
  gap: var(--sp-3);
  font-family: var(--font-body);
  font-size: 13px;
  opacity: 0.9;
}

.card__foot {
  display: flex;
  align-items: flex-end;
  justify-content: space-between;
  gap: var(--sp-3);
  /* v2.7.0 , ο founder είδε νεκρό χώρο ΚΑΤΩ από την τιμή στο κινητό: μόνο το
     .card__details είχε margin-top:auto, αλλά οι home κάρτες ΔΕΝ εκπέμπουν
     details, οπότε τίποτα δεν έσπρωχνε το foot στη βάση. Καρφώνεται εδώ, με
     hairline ώστε η γραμμή τιμής να διαβάζεται ως πάτος της κάρτας. */
  margin-top: auto;
  padding-top: 14px;
  border-top: 1px solid var(--line);
}
.card__details + .card__foot, .card__details ~ .card__foot { border-top: 0; padding-top: 10px; }
.tours--group .card__foot { border-color: rgba(245, 241, 234, 0.14); }
.card__price {
  font-variant-numeric: tabular-nums;
  font-family: var(--font-display);
  font-weight: 600;
  font-size: 22px;
  letter-spacing: -0.01em;
  line-height: 1.1;
}
.card__price em {
  display: block;
  font-family: var(--font-mono);
  font-style: normal;
  font-weight: 500;
  font-size: 10px;
  letter-spacing: 0.18em;
  text-transform: uppercase;
  opacity: 0.55;
  margin-bottom: 2px;
}
.card__price small {
  font-family: var(--font-mono);
  font-size: 10px;
  letter-spacing: 0.12em;
  text-transform: uppercase;
  opacity: 0.55;
  font-weight: 500;
  display: block;
  margin-top: 2px;
}
.card__cta {
  font-family: var(--font-body);
  font-size: 14px;
  font-weight: 600;
  color: var(--tulip);
  display: inline-flex;
  align-items: center;
  gap: 4px;
  padding-bottom: 3px;
  border-bottom: 1.5px solid var(--tulip);
  transition: transform 0.2s var(--easing);
}
.card:hover .card__cta { transform: translateX(3px); }

@media (max-width: 1100px) {
  .tours__grid { grid-template-columns: repeat(2, minmax(0, 1fr)); }
}
@media (max-width: 700px) {
  .tours__grid { grid-template-columns: minmax(0, 1fr); }
  .tours__head {
    grid-template-columns: minmax(0, 1fr);
  }
  .tours__head-meta {
    grid-column: 1;
    grid-row: auto;
    flex-direction: row;
    flex-wrap: wrap;
    gap: var(--sp-2) var(--sp-4);
  }
  .tours__head-cta { grid-column: 1; }
}

/* ----- 7.8 · THE ECOECHO DIFFERENCE ----- */
.diff {
  padding-block: clamp(80px, 8vw, 140px);
  background: var(--paper);
  border-top: 1px solid var(--line);
}
.diff__inner {
  max-width: var(--container);
  margin-inline: auto;
  padding-inline: var(--gutter);
}
.diff__head {
  max-width: 820px;
  margin-bottom: clamp(48px, 5vw, 88px);
  padding-bottom: clamp(32px, 3vw, 56px);
  border-bottom: 2px solid var(--ink);
}
.diff__h2 {
  font-family: var(--font-display);
  font-variation-settings: "opsz" 144;
  font-weight: 500;
  font-size: clamp(44px, 5vw + 0.5rem, 88px);
  line-height: 0.98;
  letter-spacing: -0.025em;
  color: var(--ink);
  margin-bottom: var(--sp-6);
}
.diff__h2 em { font-style: italic; font-weight: 400; color: var(--ink-muted); }
.diff__lede {
  font-family: var(--font-body);
  font-size: clamp(18px, 0.5vw + 1rem, 22px);
  line-height: 1.55;
  color: var(--ink);
  max-width: 52ch;
}

.diff__cols {
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  gap: clamp(24px, 2.5vw, 48px);
  counter-reset: none;
}
.diff__cols li {
  display: flex;
  flex-direction: column;
  gap: var(--sp-4);
  padding-top: var(--sp-6);
  border-top: 1px solid var(--line);
  position: relative;
}
.diff__num {
  font-family: var(--font-display);
  font-variation-settings: "opsz" 144;
  font-weight: 500;
  font-size: clamp(80px, 7vw, 120px);
  line-height: 0.9;
  letter-spacing: -0.04em;
  color: var(--tulip);
  margin-bottom: var(--sp-2);
}
.diff__h3 {
  font-family: var(--font-display);
  font-weight: 500;
  font-size: clamp(24px, 1.3vw + 0.75rem, 30px);
  line-height: 1.2;
  letter-spacing: -0.015em;
  color: var(--ink);
}
.diff__cols p {
  font-family: var(--font-body);
  font-size: 16px;
  line-height: 1.6;
  color: var(--ink);
  max-width: 32ch;
}
.diff__tags {
  display: flex;
  flex-wrap: wrap;
  gap: 6px;
  margin-top: var(--sp-2);
}
.diff__tags li {
  padding: 6px 12px;
  border: 1px solid var(--line-strong);
  border-radius: 999px;
  font-family: var(--font-mono);
  font-size: 11px;
  font-weight: 500;
  letter-spacing: 0.12em;
  text-transform: uppercase;
  color: var(--ink);
  background: none;
  display: inline-block;
}

@media (max-width: 900px) {
  .diff__cols { grid-template-columns: minmax(0, 1fr); gap: var(--sp-12); }
}

/* ----- 7.9 · MID-PAGE CTA ----- */
.bigcta {
  padding-block: clamp(96px, 10vw, 180px);
  background: var(--tulip);
  color: var(--paper);
  text-align: center;
  position: relative;
  overflow: hidden;
}
.bigcta::before,
.bigcta::after {
  content: "";
  position: absolute;
  left: 0;
  right: 0;
  height: 2px;
  background: rgba(245, 241, 234, 0.2);
}
.bigcta::before { top: 32px; }
.bigcta::after { bottom: 32px; }
.bigcta__inner {
  max-width: 820px;
  margin-inline: auto;
  padding-inline: var(--gutter);
}
.bigcta__meta {
  color: rgba(245, 241, 234, 0.7);
  border-color: rgba(245, 241, 234, 0.5);
}
.bigcta__h2 {
  font-family: var(--font-display);
  font-variation-settings: "opsz" 144;
  font-weight: 500;
  font-size: clamp(48px, 6vw + 0.5rem, 96px);
  line-height: 0.95;
  letter-spacing: -0.03em;
  color: var(--paper);
  margin-bottom: var(--sp-4);
}
.bigcta__sub {
  font-family: var(--font-display);
  font-style: italic;
  font-size: clamp(22px, 1vw + 0.75rem, 30px);
  color: rgba(245, 241, 234, 0.85);
  margin-bottom: clamp(32px, 3vw, 56px);
}
.bigcta__btn {
  background: var(--paper);
  color: var(--ink);
  padding: 18px 36px;
  border-radius: 999px;
  font-weight: 600;
  box-shadow: 0 4px 0 rgba(26, 22, 18, 0.25);
  transition: transform 0.2s var(--easing), box-shadow 0.2s var(--easing), background 0.2s var(--easing);
}
.bigcta__btn:hover {
  transform: translateY(-2px);
  background: var(--ink);
  color: var(--paper);
  box-shadow: 0 6px 0 rgba(26, 22, 18, 0.35);
}

/* ----- 7.10 · FAQ ----- */
.faq {
  padding-block: clamp(80px, 8vw, 140px);
  background: var(--paper);
  border-top: 1px solid var(--line);
}
.faq__inner {
  max-width: 1100px;
  margin-inline: auto;
  padding-inline: var(--gutter);
}
.faq__head {
  margin-bottom: clamp(40px, 4vw, 72px);
  padding-bottom: clamp(24px, 2vw, 40px);
  border-bottom: 2px solid var(--ink);
}
.faq__h2 {
  font-family: var(--font-display);
  font-variation-settings: "opsz" 144;
  font-weight: 500;
  font-size: clamp(44px, 5vw + 0.5rem, 80px);
  line-height: 0.98;
  letter-spacing: -0.025em;
  color: var(--ink);
  margin-bottom: var(--sp-3);
}
.faq__sub {
  font-family: var(--font-display);
  font-style: italic;
  font-size: clamp(20px, 1vw + 0.75rem, 26px);
  color: var(--ink-muted);
}

.faq__list { display: flex; flex-direction: column; }
.faq__list li { border-bottom: 1px solid var(--line); }
.faq__list li:first-child { border-top: 1px solid var(--line); }

.faq details { padding: 0; }
.faq summary {
  display: grid;
  grid-template-columns: auto 1fr auto;
  align-items: center;
  gap: var(--sp-6);
  padding: clamp(20px, 2vw, 28px) 0;
  cursor: pointer;
  list-style: none;
  transition: padding-left 0.25s var(--easing);
}
.faq summary::-webkit-details-marker { display: none; }
.faq summary:hover { padding-left: 8px; }
.faq details[open] summary { padding-left: 8px; }

/* v2.6.62 , τα FAQ δεν είχαν ΚΑΝΕΝΑΝ οπτικό δείκτη ότι ανοίγουν: ο εγγενής
   τρίγωνος κρύβεται (::-webkit-details-marker) και το .faq__icon span ήταν
   άδειο, χωρίς κανένα style. Ο επισκέπτης δεν είχε τρόπο να καταλάβει ότι οι
   ερωτήσεις είναι πατητές. Chevron από καθαρό CSS, στο ήδη υπάρχον span. */
.faq__icon {
  position: relative;
  display: block;
  width: 14px;
  height: 14px;
  flex: 0 0 14px;
  opacity: 0.55;
  transition: transform 0.25s var(--easing), opacity 0.25s var(--easing);
}
.faq__icon::before,
.faq__icon::after {
  content: "";
  position: absolute;
  top: 50%;
  width: 9px;
  height: 1.5px;
  background: currentColor;
  border-radius: 2px;
}
.faq__icon::before { left: 0;    transform: translateY(-50%) rotate(45deg); }
.faq__icon::after  { right: 0;   transform: translateY(-50%) rotate(-45deg); }
.faq summary:hover .faq__icon { opacity: 1; }
.faq details[open] .faq__icon { transform: rotate(180deg); opacity: 1; }
@media (prefers-reduced-motion: reduce) {
  .faq__icon { transition: none; }
}

.faq__idx {
  font-family: var(--font-mono);
  font-size: 12px;
  font-weight: 500;
  letter-spacing: 0.14em;
  color: var(--tulip-text);
  min-width: 52px;
}
.faq__q {
  font-family: var(--font-display);
  font-weight: 500;
  font-size: clamp(18px, 0.7vw + 0.75rem, 24px);
  line-height: 1.3;
  color: var(--ink);
  letter-spacing: -0.01em;
}
.faq__plus {
  width: 32px;
  height: 32px;
  border: 1px solid var(--line-strong);
  border-radius: 50%;
  position: relative;
  flex-shrink: 0;
  transition: background 0.25s var(--easing), border-color 0.25s var(--easing);
}
.faq__plus::before,
.faq__plus::after {
  content: "";
  position: absolute;
  left: 50%;
  top: 50%;
  width: 12px;
  height: 1.5px;
  background: var(--ink);
  transform: translate(-50%, -50%);
  transition: transform 0.3s var(--easing), background 0.25s var(--easing);
}
.faq__plus::after { transform: translate(-50%, -50%) rotate(90deg); }
.faq details[open] .faq__plus {
  background: var(--tulip);
  border-color: var(--tulip);
}
.faq details[open] .faq__plus::before,
.faq details[open] .faq__plus::after {
  background: var(--paper);
}
.faq details[open] .faq__plus::after { transform: translate(-50%, -50%) rotate(0deg); }

.faq__a {
  padding: 0 0 clamp(24px, 2.5vw, 36px) 60px;
  max-width: 70ch;
}
.faq__a p {
  font-family: var(--font-body);
  font-size: clamp(16px, 0.3vw + 0.95rem, 18px);
  line-height: 1.65;
  color: var(--ink);
}

.faq__foot {
  margin-top: clamp(32px, 3vw, 56px);
  padding-top: clamp(24px, 2vw, 40px);
  border-top: 1px solid var(--line);
  font-family: var(--font-display);
  font-style: italic;
  font-size: clamp(20px, 1vw + 0.75rem, 26px);
  color: var(--ink-muted);
}
.faq__foot a {
  color: var(--ink);
  font-style: normal;
  font-weight: 500;
  border-bottom: 1.5px solid var(--tulip);
  padding-bottom: 3px;
  margin-left: var(--sp-2);
  transition: color 0.2s var(--easing);
}
.faq__foot a:hover { color: var(--tulip); }

@media (max-width: 600px) {
  .faq summary { grid-template-columns: auto 1fr; gap: var(--sp-4); }
  .faq__plus { grid-column: 1; grid-row: 2; justify-self: start; }
  .faq__a { padding-left: 0; }
}

/* ----- 8 · PLACEHOLDER STUBS (deprecated) ----- */
.stub { display: none; }

/* ----- 9 · FOOTER (editorial masthead) ----- */
.site-footer {
  background: var(--ink);
  color: var(--paper);
  padding-block: clamp(64px, 7vw, 112px);
}
.site-footer__inner {
  max-width: var(--container);
  margin-inline: auto;
  padding-inline: var(--gutter);
  display: flex;
  flex-direction: column;
  gap: clamp(48px, 5vw, 80px);
}

.site-footer__top {
  display: grid;
  grid-template-columns: auto minmax(0, 1fr);
  gap: clamp(32px, 4vw, 72px);
  align-items: start;
  padding-bottom: clamp(32px, 3vw, 56px);
  border-bottom: 1px solid rgba(245, 241, 234, 0.14);
}
.site-footer__brand {
  display: flex;
  align-items: center;
  gap: var(--sp-3);
}
.site-footer__brand .site-nav__brand-mark { background: var(--paper); color: var(--ink); }
.site-footer__brand .site-nav__brand-name { color: var(--paper); }
.site-footer__brand .site-nav__brand-sub { color: rgba(245, 241, 234, 0.55); }
.site-footer__tagline {
  font-family: var(--font-display);
  font-weight: 500;
  font-size: clamp(22px, 1.8vw + 0.5rem, 36px);
  line-height: 1.3;
  letter-spacing: -0.015em;
  max-width: 28ch;
  color: var(--paper);
  justify-self: end;
  text-align: right;
}

.site-footer__cols {
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  gap: clamp(32px, 4vw, 72px);
}
.site-footer__col h3 {
  font-family: var(--font-mono);
  font-size: 11px;
  font-weight: 500;
  letter-spacing: 0.2em;
  text-transform: uppercase;
  color: rgba(245, 241, 234, 0.55);
  margin-bottom: var(--sp-6);
  padding-bottom: var(--sp-3);
  border-bottom: 1px solid rgba(245, 241, 234, 0.14);
}
.site-footer__col ul { display: flex; flex-direction: column; gap: var(--sp-3); }
.site-footer__col a {
  font-family: var(--font-display);
  font-size: 18px;
  color: var(--paper);
  transition: color 0.2s var(--easing);
  display: inline-flex;
  align-items: center;
  gap: var(--sp-2);
}
.site-footer__col a:hover { color: var(--tulip); }
.site-footer__col li { font-family: var(--font-body); font-size: 15px; color: rgba(245, 241, 234, 0.85); display: flex; align-items: center; gap: var(--sp-2); }
.site-footer__col li a { font-family: var(--font-body); font-size: 15px; }

.site-footer__whats {
  margin-top: var(--sp-6);
  padding-top: var(--sp-4);
  border-top: 1px solid rgba(245, 241, 234, 0.12);
  font-family: var(--font-mono);
  font-size: 12px;
  letter-spacing: 0.08em;
  color: rgba(245, 241, 234, 0.55);
}
.site-footer__whats a {
  color: var(--paper);
  font-family: var(--font-body);
  border-bottom: 1.5px solid var(--tulip);
  padding-bottom: 2px;
  margin-left: 4px;
}

.site-footer__social { flex-direction: row !important; gap: var(--sp-3) !important; margin-top: var(--sp-6); }
.site-footer__social a {
  font-family: var(--font-mono);
  font-size: 11px;
  font-weight: 500;
  letter-spacing: 0.14em;
  text-transform: uppercase;
  padding: 8px 14px;
  border: 1px solid rgba(245, 241, 234, 0.18);
  border-radius: 999px;
  color: var(--paper);
}
.site-footer__social a:hover { background: var(--tulip); border-color: var(--tulip); color: var(--paper); }

.site-footer__base {
  display: flex;
  justify-content: space-between;
  align-items: center;
  flex-wrap: wrap;
  gap: var(--sp-4);
  padding-top: clamp(24px, 2vw, 40px);
  border-top: 1px solid rgba(245, 241, 234, 0.14);
}
.site-footer__legal {
  font-family: var(--font-mono);
  font-size: 11px;
  letter-spacing: 0.1em;
  color: rgba(245, 241, 234, 0.45);
}
.site-footer__bottom-cta {
  font-family: var(--font-mono);
  font-size: 11px;
  letter-spacing: 0.1em;
  text-transform: uppercase;
  color: rgba(245, 241, 234, 0.7);
  display: flex;
  align-items: center;
  gap: var(--sp-2);
  flex-wrap: wrap;
}
.site-footer__bottom-cta .hero__stars { color: var(--tulip); letter-spacing: 0.1em; font-size: 12px; }
.site-footer__bottom-cta a {
  color: var(--paper);
  font-family: var(--font-body);
  text-transform: none;
  letter-spacing: 0;
  font-size: 13px;
  font-weight: 500;
  border-bottom: 1.5px solid var(--tulip);
  padding-bottom: 2px;
  margin-left: var(--sp-2);
}

@media (max-width: 900px) {
  .site-footer__top { grid-template-columns: minmax(0, 1fr); }
  .site-footer__tagline { justify-self: start; text-align: left; }
  .site-footer__cols { grid-template-columns: minmax(0, 1fr); }
}

/* ============================================================
 * TOUR PAGE , editorial template for /services/* pages
 * ============================================================ */

.tour-hero {
  padding-top: clamp(48px, 5vw, 88px);
  padding-bottom: clamp(32px, 3vw, 56px);
  background: var(--paper);
  border-bottom: 1px solid var(--line);
  position: relative;
  overflow: hidden;
}

.tour-hero__breadcrumb {
  max-width: var(--container);
  margin: 0 auto clamp(16px, 2vw, 32px);
  padding-inline: var(--gutter);
  font-family: var(--font-mono);
  font-size: 11px;
  letter-spacing: 0.14em;
  text-transform: uppercase;
  color: var(--ink-muted);
}
.tour-hero__breadcrumb a {
  color: var(--ink-muted);
  border-bottom: 1px solid transparent;
  transition: color 0.2s var(--easing), border-color 0.2s var(--easing);
}
.tour-hero__breadcrumb a:hover { color: var(--tulip); border-color: var(--tulip); }
.tour-hero__breadcrumb-sep { opacity: 0.4; margin-inline: 8px; }

.tour-hero__grid {
  max-width: var(--container);
  margin-inline: auto;
  padding-inline: var(--gutter);
  display: grid;
  grid-template-columns: minmax(0, 1.2fr) minmax(0, 1fr);
  gap: clamp(40px, 5vw, 80px);
  align-items: center;
}

/* ============================================================================
   14/9/2026 , Η ΓΡΑΜΜΗ ΠΡΟΔΙΑΓΡΑΦΩΝ. Αντικαθιστά την κάψουλα .tour-hero__badge.
   Αφαίρεση: κανένα γέμισμα, καμία στρογγυλότητα, κανένα άσπρο σε πορτοκαλί.
   Δύναμη: τα τρία γεγονότα γίνονται τρία δεδομένα, ο H1 παίρνει όλο το βάρος, και
   το χρώμα της μάρκας μένει σημάδι (ένα τετράγωνο 6px) αντί για επιφάνεια, ώστε
   να μην ανταγωνίζεται το κουμπί κράτησης που είναι κι αυτό τερακότα.
   Στα 520px η γραμμή γίνεται στήλη: το παλιό pill τύλιγε σε τρεις σειρές μέσα σε
   σχήμα που υπόσχεται μία, που είναι ακριβώς αυτό που φαινόταν σπασμένο.
   ========================================================================== */
.tour-hero__spec {
  display: flex;
  flex-wrap: wrap;
  align-items: baseline;
  column-gap: clamp(16px, 2.2vw, 26px);
  row-gap: 8px;
  list-style: none;
  margin: 0 0 var(--sp-6, 20px);
  padding: 0;
  font-family: var(--font-mono);
  font-size: 11.5px;
  font-weight: 500;
  letter-spacing: 0.18em;
  text-transform: uppercase;
  line-height: 1.25;
}
.tour-hero__spec li { margin: 0; color: rgba(26, 22, 18, 0.68); }
.tour-hero__spec li:first-child {
  display: inline-flex;
  align-items: center;
  gap: 9px;
  color: #a83a23;
}
.tour-hero__spec li:first-child::before {
  content: "";
  flex: 0 0 6px;
  width: 6px;
  height: 6px;
  background: #a83a23;
}
@media (max-width: 520px) {
  .tour-hero__spec { flex-direction: column; row-gap: 7px; }
}

.tour-hero__h1 {
  font-family: var(--font-display);
  font-variation-settings: "opsz" 144;
  font-weight: 500;
  font-size: clamp(36px, 3.5vw + 0.5rem, 64px);
  line-height: 1.02;
  letter-spacing: -0.02em;
  color: var(--ink);
  margin-bottom: var(--sp-6);
  max-width: 18ch;
}

.tour-hero__subtitle {
  font-family: var(--font-display);
  font-style: italic;
  font-weight: 400;
  font-size: clamp(20px, 1vw + 0.75rem, 26px);
  line-height: 1.3;
  color: var(--ink-muted);
  margin-bottom: var(--sp-4);
  max-width: 26ch;
}

.tour-hero__tagline {
  font-family: var(--font-body);
  font-size: clamp(16px, 0.5vw + 0.75rem, 18px);
  line-height: 1.5;
  color: var(--ink);
  margin-bottom: var(--sp-8);
  max-width: 38ch;
  font-weight: 500;
}

.tour-hero__stats {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: var(--sp-4);
  padding: var(--sp-5) 0;
  border-top: 1px solid var(--line);
  border-bottom: 1px solid var(--line);
  margin-bottom: var(--sp-8);
  max-width: 440px;
}
.tour-hero__stat {
  display: flex;
  flex-direction: column;
  gap: 2px;
}
.tour-hero__stat-label {
  font-family: var(--font-mono);
  font-size: 10px;
  letter-spacing: 0.16em;
  text-transform: uppercase;
  color: var(--ink-muted);
}
.tour-hero__stat-value {
  font-family: var(--font-display);
  font-size: 20px;
  font-weight: 600;
  letter-spacing: -0.01em;
  color: var(--ink);
}

.tour-hero__ctas {
  display: flex;
  align-items: center;
  gap: var(--sp-4);
  flex-wrap: wrap;
  margin-bottom: var(--sp-6);
}

.tour-hero__trust {
  display: flex;
  flex-wrap: wrap;
  gap: var(--sp-2) var(--sp-4);
  padding-top: var(--sp-4);
  border-top: 1px solid var(--line);
  font-family: var(--font-mono);
  font-size: 11px;
  letter-spacing: 0.1em;
  text-transform: uppercase;
  color: var(--ink-muted);
}
.tour-hero__trust strong { color: var(--tulip); font-weight: 500; }

.tour-hero__plate {
  position: relative;
  transform: rotate(0.8deg);
}
.tour-hero__plate-frame {
  background: var(--paper-raised);
  padding: 14px 14px 60px;
  border: 1px solid var(--line);
  box-shadow: 0 2px 4px rgba(26, 22, 18, 0.04),
              0 18px 42px -18px rgba(26, 22, 18, 0.22),
              0 40px 72px -30px rgba(26, 22, 18, 0.16);
}
.tour-hero__plate-frame img {
  width: 100%;
  aspect-ratio: 3 / 4;
  object-fit: cover;
  filter: contrast(1.02) saturate(1.05);
}
.tour-hero__plate-caption {
  position: absolute;
  left: 14px;
  right: 14px;
  bottom: 18px;
  text-align: center;
  font-family: var(--font-display);
  font-style: italic;
  font-size: 15px;
  color: var(--ink-muted);
}

@media (max-width: 900px) {
  .tour-hero__grid { grid-template-columns: minmax(0, 1fr); gap: var(--sp-10); }
  .tour-hero__plate { order: -1; max-width: 420px; margin: 0 auto; transform: rotate(-0.6deg); }
  .tour-hero__plate-frame img { aspect-ratio: 4 / 5; }
  .tour-hero__stats { max-width: 100%; }
}

/* INTRO */
.tour-intro {
  padding-block: clamp(56px, 6vw, 96px);
  background: var(--paper-deep);
}
.tour-intro__inner {
  max-width: 900px;
  margin-inline: auto;
  padding-inline: var(--gutter);
}
.tour-intro__lede {
  font-family: var(--font-display);
  font-style: italic;
  font-weight: 500;
  font-size: clamp(22px, 1.5vw + 0.75rem, 32px);
  line-height: 1.45;
  color: var(--ink);
  text-align: center;
  letter-spacing: -0.01em;
}

/* QUICK FACTS */
.tour-facts {
  padding-block: clamp(56px, 6vw, 96px);
  background: var(--paper);
  border-top: 1px solid var(--line);
}
.tour-facts__inner {
  max-width: var(--container);
  margin-inline: auto;
  padding-inline: var(--gutter);
}
.tour-facts__head {
  margin-bottom: clamp(32px, 3vw, 56px);
  padding-bottom: var(--sp-4);
  border-bottom: 2px solid var(--ink);
}
.tour-facts__h2 {
  font-family: var(--font-display);
  font-weight: 500;
  font-size: clamp(32px, 2.5vw + 0.5rem, 48px);
  line-height: 1.1;
  letter-spacing: -0.02em;
  color: var(--ink);
}
.tour-facts__grid {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(200px, 1fr));
  gap: var(--sp-8);
}
.tour-facts__item {
  display: flex;
  flex-direction: column;
  gap: 4px;
  padding-top: var(--sp-4);
  border-top: 1px solid var(--line);
}
.tour-facts__item-label {
  font-family: var(--font-mono);
  font-size: 11px;
  letter-spacing: 0.14em;
  text-transform: uppercase;
  color: var(--tulip);
}
.tour-facts__item-value {
  font-family: var(--font-display);
  font-size: 22px;
  font-weight: 500;
  color: var(--ink);
  line-height: 1.25;
}
.tour-facts__item-note {
  font-family: var(--font-body);
  font-size: 13px;
  color: var(--ink-muted);
  margin-top: 4px;
}
.tour-facts__item-value a { color: inherit; border-bottom: 1px solid var(--tulip); padding-bottom: 2px; }

/* INCLUDED / NOT INCLUDED */
.tour-included {
  padding-block: clamp(56px, 6vw, 96px);
  background: var(--paper-deep);
  border-top: 1px solid var(--line);
}
.tour-included__inner {
  max-width: var(--container);
  margin-inline: auto;
  padding-inline: var(--gutter);
  display: grid;
  grid-template-columns: minmax(0, 1.4fr) minmax(0, 1fr);
  gap: clamp(32px, 4vw, 64px);
  align-items: start;
}
.tour-included__h2 {
  font-family: var(--font-display);
  font-weight: 500;
  font-size: clamp(28px, 2vw + 0.5rem, 40px);
  line-height: 1.1;
  letter-spacing: -0.02em;
  color: var(--ink);
  margin-bottom: var(--sp-6);
}
.tour-included__list {
  display: flex;
  flex-direction: column;
}
.tour-included__list li {
  display: flex;
  align-items: flex-start;
  gap: var(--sp-4);
  padding: var(--sp-4) 0;
  border-bottom: 1px solid var(--line);
  font-family: var(--font-body);
  font-size: 17px;
  line-height: 1.4;
}
.tour-included__list--excluded li { color: var(--ink-muted); }
.tour-included__check {
  color: var(--tulip);
  font-size: 20px;
  line-height: 1;
  flex-shrink: 0;
  padding-top: 2px;
}
.tour-included__list--excluded .tour-included__check { color: var(--ink-muted); opacity: 0.5; }
@media (max-width: 900px) {
  .tour-included__inner { grid-template-columns: minmax(0, 1fr); }
}

/* ITINERARY */
.tour-itinerary {
  padding-block: clamp(72px, 7vw, 120px);
  background: var(--paper);
  border-top: 1px solid var(--line);
}
.tour-itinerary__inner {
  max-width: var(--container);
  margin-inline: auto;
  padding-inline: var(--gutter);
}
.tour-itinerary__head {
  max-width: 720px;
  margin-bottom: clamp(40px, 4vw, 72px);
}
.tour-itinerary__h2 {
  font-family: var(--font-display);
  font-weight: 500;
  font-size: clamp(36px, 3vw + 0.5rem, 64px);
  line-height: 1.0;
  letter-spacing: -0.02em;
  color: var(--ink);
  margin-bottom: var(--sp-4);
}
.tour-itinerary__sub {
  font-family: var(--font-display);
  font-style: italic;
  color: var(--ink-muted);
  font-size: clamp(18px, 0.8vw + 0.75rem, 22px);
}
.tour-itinerary__list {
  display: flex;
  flex-direction: column;
  gap: clamp(32px, 4vw, 56px);
  max-width: 900px;
}
.tour-itinerary__stop {
  display: grid;
  grid-template-columns: 80px 1fr;
  gap: var(--sp-6);
  padding-bottom: clamp(24px, 3vw, 40px);
  border-bottom: 1px solid var(--line);
}
.tour-itinerary__stop:last-child { border-bottom: 0; }
.tour-itinerary__stop-num {
  font-family: var(--font-display);
  font-weight: 500;
  font-size: clamp(48px, 4vw, 72px);
  line-height: 0.9;
  color: var(--tulip);
  letter-spacing: -0.03em;
}
.tour-itinerary__stop-title {
  font-family: var(--font-display);
  font-weight: 500;
  font-size: clamp(22px, 1.2vw + 0.75rem, 28px);
  line-height: 1.2;
  letter-spacing: -0.01em;
  color: var(--ink);
  margin-bottom: var(--sp-3);
}
.tour-itinerary__stop-title em {
  font-style: italic;
  color: var(--ink-muted);
  font-weight: 400;
  display: block;
  font-size: 0.65em;
  margin-top: 2px;
}
.tour-itinerary__stop-body {
  font-family: var(--font-body);
  font-size: clamp(16px, 0.3vw + 0.95rem, 18px);
  line-height: 1.6;
  color: var(--ink);
}
/* v2.1.34 , optional per-stop photo. Slot `stop_N` rendered only when the
 * admin uploaded an attachment. Lays out beside body copy on wide screens,
 * stacks underneath on mobile. */
.tour-itinerary__stop.has-photo {
  grid-template-columns: 80px 1.4fr 1fr;
  align-items: start;
}
.tour-itinerary__stop-figure {
  margin: 0;
  border-radius: 6px;
  overflow: hidden;
  background: var(--ink-soft, #f1ece2);
  aspect-ratio: 4 / 3;
}
.tour-itinerary__stop-photo {
  display: block;
  width: 100%;
  height: 100%;
  object-fit: cover;
  transition: transform 0.6s ease;
}
.tour-itinerary__stop.has-photo:hover .tour-itinerary__stop-photo {
  transform: scale(1.03);
}
@media (max-width: 900px) {
  .tour-itinerary__stop.has-photo {
    grid-template-columns: 80px 1fr;
    grid-template-areas:
      "num body"
      ".   photo";
  }
  .tour-itinerary__stop.has-photo .tour-itinerary__stop-num { grid-area: num; }
  .tour-itinerary__stop.has-photo .tour-itinerary__stop-body { grid-area: body; }
  .tour-itinerary__stop.has-photo .tour-itinerary__stop-figure { grid-area: photo; margin-top: var(--sp-4); }
}
@media (max-width: 700px) {
  .tour-itinerary__stop { grid-template-columns: 56px 1fr; gap: var(--sp-4); }
  .tour-itinerary__stop-num { font-size: 36px; }
  .tour-itinerary__stop.has-photo { grid-template-columns: 56px 1fr; }
}

/* EDUCATIONAL */
.tour-edu {
  padding-block: clamp(72px, 7vw, 120px);
  background: var(--ink);
  color: var(--paper);
  border-top: 1px solid var(--line);
}
.tour-edu__inner {
  max-width: var(--container);
  margin-inline: auto;
  padding-inline: var(--gutter);
}
.tour-edu__head {
  max-width: 800px;
  margin-bottom: clamp(40px, 4vw, 72px);
}
.tour-edu__h2 {
  font-family: var(--font-display);
  font-weight: 500;
  font-size: clamp(32px, 2.8vw + 0.5rem, 56px);
  line-height: 1.0;
  letter-spacing: -0.02em;
  margin-bottom: var(--sp-3);
}
.tour-edu__h2 em {
  font-style: italic;
  opacity: 0.75;
}
.tour-edu__blocks {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(280px, 1fr));
  gap: clamp(24px, 3vw, 48px);
}
.tour-edu__block {
  position: relative;
  border-top: 1px solid rgba(245, 241, 234, 0.16);
  padding-top: 26px;
}
/* Το σημάδι: 34px τερακότα πάνω στην τρίχινη γραμμή. Ένα επαναλαμβανόμενο στοιχείο αντί για
   πλαίσιο. Σε σκούρο φόντο η κάρτα είναι περιττή, το ίδιο το σκοτάδι ξεχωρίζει το τμήμα. */
.tour-edu__block::before {
  content: "";
  position: absolute;
  top: -1px;
  left: 0;
  width: 34px;
  height: 2px;
  background: #e06a4f;
}
.tour-edu__block h3 {
  font-family: var(--font-display);
  font-weight: 500;
  font-size: clamp(20px, 1vw + 0.75rem, 26px);
  margin-bottom: var(--sp-3);
  color: #e06a4f;
  line-height: 1.2;
}
.tour-edu__block p {
  font-family: var(--font-body);
  font-size: 15px;
  line-height: 1.65;
  color: rgba(245, 241, 234, 0.82);
}

/* BOOKING (FareHarbor frame) */
.tour-booking {
  padding-block: clamp(72px, 7vw, 120px);
  background: var(--paper);
  border-top: 1px solid var(--line);
}
.tour-booking__inner {
  max-width: var(--container);
  margin-inline: auto;
  padding-inline: var(--gutter);
}
.tour-booking__head {
  text-align: center;
  max-width: 680px;
  margin: 0 auto clamp(32px, 3vw, 56px);
}
.tour-booking__h2 {
  font-family: var(--font-display);
  font-weight: 500;
  font-size: clamp(36px, 3vw + 0.5rem, 64px);
  letter-spacing: -0.02em;
  line-height: 1.0;
  margin-bottom: var(--sp-4);
}
.tour-booking__sub {
  font-family: var(--font-display);
  font-style: italic;
  color: var(--ink-muted);
  font-size: clamp(18px, 0.8vw + 0.75rem, 22px);
}
.tour-booking__frame {
  max-width: 980px;
  margin: 0 auto;
  background: var(--paper-raised);
  border: 1px solid var(--line);
  box-shadow: 0 14px 42px -22px rgba(26, 22, 18, 0.35);
  padding: clamp(12px, 2vw, 24px);
  border-radius: 4px;
}
.tour-booking__frame iframe {
  width: 100%;
  min-height: 620px;
  border: 0;
  display: block;
}
.tour-booking__trust {
  margin-top: var(--sp-6);
  text-align: center;
  font-family: var(--font-mono);
  font-size: 12px;
  letter-spacing: 0.12em;
  text-transform: uppercase;
  color: var(--ink-muted);
}
.tour-booking__trust span { margin-inline: 6px; opacity: 0.5; }

/* GUIDE CARD */
.tour-guide {
  padding-block: clamp(56px, 6vw, 96px);
  background: var(--paper-deep);
  border-top: 1px solid var(--line);
}
.tour-guide__inner {
  max-width: 980px;
  margin-inline: auto;
  padding-inline: var(--gutter);
  display: grid;
  grid-template-columns: auto 1fr;
  gap: clamp(24px, 3vw, 48px);
  align-items: center;
}
.tour-guide__portrait {
  width: clamp(120px, 12vw, 180px);
  height: clamp(120px, 12vw, 180px);
  border-radius: 50%;
  overflow: hidden;
  background: var(--paper-raised);
  border: 3px solid var(--paper-raised);
  box-shadow: 0 14px 32px -16px rgba(26, 22, 18, 0.3);
  flex-shrink: 0;
}
.tour-guide__portrait img {
  width: 100%;
  height: 100%;
  object-fit: cover;
}
.tour-guide__name {
  font-family: var(--font-mono);
  font-size: 11px;
  letter-spacing: 0.16em;
  text-transform: uppercase;
  color: var(--tulip);
  margin-bottom: 4px;
}
.tour-guide__title {
  font-family: var(--font-display);
  font-size: clamp(22px, 1.5vw + 0.5rem, 32px);
  font-weight: 500;
  color: var(--ink);
  margin-bottom: var(--sp-3);
  line-height: 1.2;
}
.tour-guide__creds {
  font-family: var(--font-mono);
  font-size: 11px;
  letter-spacing: 0.12em;
  text-transform: uppercase;
  color: var(--ink-muted);
  margin-bottom: var(--sp-4);
}
.tour-guide__bio {
  font-family: var(--font-display);
  font-style: italic;
  font-size: clamp(16px, 0.4vw + 0.85rem, 19px);
  line-height: 1.55;
  color: var(--ink);
}
@media (max-width: 700px) {
  .tour-guide__inner { grid-template-columns: minmax(0, 1fr); text-align: center; }
  .tour-guide__portrait { margin: 0 auto; }
}

/* STICKY BOOKING FOOTER */
.tour-sticky {
  position: fixed;
  left: 0;
  right: 0;
  bottom: 0;
  z-index: 400;
  background: var(--ink);
  color: var(--paper);
  padding: 12px var(--gutter);
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: var(--sp-4);
  box-shadow: 0 -4px 24px -8px rgba(0, 0, 0, 0.35);
  transform: translateY(100%);
  transition: transform 0.35s var(--easing);
  /* v2.6.62 , κρυμμένη ΜΟΝΟ με transform: τα links της έμεναν εστιάσιμα
     από πληκτρολόγιο ενώ ήταν εκτός οθόνης (WCAG 2.4.3/2.4.11). */
  visibility: hidden;
}
.tour-sticky.is-visible { transform: translateY(0); visibility: visible; }
.tour-sticky__price {
  display: flex;
  align-items: baseline;
  gap: var(--sp-2);
}
.tour-sticky__price-label {
  font-family: var(--font-mono);
  font-size: 10px;
  letter-spacing: 0.16em;
  text-transform: uppercase;
  opacity: 0.7;
}
.tour-sticky__price-value {
  font-family: var(--font-display);
  font-size: 22px;
  font-weight: 600;
  letter-spacing: -0.01em;
}
.tour-sticky__note {
  font-family: var(--font-mono);
  font-size: 10px;
  letter-spacing: 0.12em;
  text-transform: uppercase;
  opacity: 0.65;
  flex: 1;
  text-align: center;
}
.tour-sticky__btn {
  background: var(--tulip);
  color: var(--paper);
  padding: 12px 22px;
  border-radius: 999px;
  font-family: var(--font-body);
  font-size: 14px;
  font-weight: 600;
  white-space: nowrap;
  transition: background 0.2s var(--easing), transform 0.2s var(--easing);
}
.tour-sticky__btn:hover { background: var(--tulip-hover); transform: translateY(-1px); }
@media (max-width: 700px) {
  .tour-sticky__note { display: none; }
}

/* ============================================================
   v2.1.38 , Greek-locale display-font polish + Greek-page primitives
   The Literata variable italic ships with proper Greek glyphs; we use
   it as the primary display face. On :lang(el) views we add a hair more
   line-height and a touch of letter-spacing because Greek diacritics
   (τόνος, διαλυτικά) need vertical room and reading rhythm differs.
   ============================================================ */
:lang(el) h1,
:lang(el) h2,
:lang(el) h3,
:lang(el) .hero__sub,
:lang(el) .section__title,
:lang(el) .cat-card__h3,
:lang(el) .faq-item summary,
:lang(el) .review-card__quote {
  font-family: "Literata", var(--font-display,var(--font-display,Fraunces)), "Iowan Old Style", Georgia, serif;
  letter-spacing: -0.012em;
}
:lang(el) h1 em,
:lang(el) h2 em,
:lang(el) .hero__sub,
:lang(el) .review-card__quote {
  font-style: italic;
  line-height: 1.12;
}
:lang(el) .hero__sub,
:lang(el) .review-card__quote {
  line-height: 1.55;
}

/* Greek-page WhatsApp + tel CTA pair (used on tour cards without real pages yet) */
.cat-card__cta-group {
  margin-top: auto;
  display: flex;
  flex-wrap: wrap;
  gap: 10px;
}
.cat-card__cta-group .btn,
.cat-card__cta-group .cat-card__cta-whatsapp,
.cat-card__cta-group .cat-card__cta-call {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 6px;
  padding: 10px 16px;
  border-radius: 999px;
  font: 600 12px/1 var(--font-body,var(--font-body,Inter)), "Noto Sans", system-ui, sans-serif;
  letter-spacing: 0.02em;
  text-decoration: none;
  transition: transform 0.2s ease, background 0.2s ease, color 0.2s ease;
}
.cat-card__cta-whatsapp {
  background: #25d366;
  color: #0b3d20;
}
.cat-card__cta-whatsapp:hover { background: #1ea952; color: #fff; transform: translateY(-1px); }
.cat-card__cta-call {
  background: transparent;
  color: var(--ink, #1a1612);
  border: 1px solid rgba(26, 22, 18, 0.18);
}
.cat-card__cta-call:hover { background: rgba(26, 22, 18, 0.05); transform: translateY(-1px); }
@media (max-width: 480px) {
  .cat-card__cta-group { flex-direction: column; align-items: stretch; }
}

/* Textured placeholder for empty card media slots (Greek page, v2.1.38).
   Subtle paper-on-paper gradient + corner emblem dot so it never reads as broken. */
.cat-card__media--placeholder {
  background:
    radial-gradient(circle at 22% 28%, rgba(201, 70, 44, 0.10), transparent 55%),
    linear-gradient(135deg, var(--paper-deep, #ebe6dc) 0%, var(--paper, #f5f1ea) 100%);
  display: flex;
  align-items: center;
  justify-content: center;
  position: relative;
}
.cat-card__media--placeholder::after {
  content: "EcoEcho";
  font: 500 11px/1 var(--font-mono,"JetBrains Mono"), monospace;
  letter-spacing: 0.18em;
  text-transform: uppercase;
  color: rgba(26, 22, 18, 0.32);
}

/* Deep-dive blocks that carry a list instead of a paragraph (question lists). */
.tour-edu__body {
  font-family: var(--font-body);
  font-size: 15px;
  line-height: 1.6;
  color: rgba(245, 241, 234, 0.88);
}
.tour-qlist {
  list-style: none;
  margin: 0;
  padding: 0;
  display: flex;
  flex-direction: column;
  gap: 10px;
}
.tour-qlist li {
  position: relative;
  padding-left: 22px;
  text-wrap: pretty;
}
.tour-qlist li::before {
  content: "?";
  position: absolute;
  left: 0;
  top: 0;
  font-family: var(--font-display);
  font-weight: 600;
  color: var(--tulip);
  opacity: 0.85;
}
@media (max-width: 600px) {
  .tour-qlist { gap: 12px; }
}

/* ============================================================
   HOMEPAGE TOUR CATALOGUE (v2.6.39, 2026-08-07)
   The only tour list on the homepage. Replaces .issue-rail AND the two
   .tours grids: every live tour appears exactly once, grouped by when it
   runs, filterable by group vs private. Cards are the site's existing
   .card component, untouched. Site tokens only, no new palette.
   ============================================================ */
.hcat { background: var(--paper); padding: var(--sp-12) 0 var(--sp-16); }
.hcat__inner { max-width: var(--container); margin: 0 auto; padding: 0 var(--gutter); }

.hcat__head {
  display: flex; justify-content: space-between; align-items: flex-end;
  gap: var(--sp-6); flex-wrap: wrap; margin-bottom: var(--sp-6);
}
.hcat__kicker { margin: 0 0 var(--sp-3); }
.hcat__h2 {
  margin: 0; font-family: var(--font-display); font-weight: 400;
  font-size: var(--t-h2); line-height: 1.04; letter-spacing: -.02em; color: var(--ink);
  text-wrap: balance;
}
.hcat__h2 em { font-style: italic; color: var(--tulip); }
.hcat__date {
  margin: 0; font-family: var(--font-mono); font-size: var(--t-meta);
  letter-spacing: .1em; color: var(--ink-muted); white-space: nowrap;
}

/* --- filters --- */
.hcat__filters {
  display: flex; gap: var(--sp-2); flex-wrap: wrap;
  padding-bottom: var(--sp-6); margin-bottom: var(--sp-8);
  border-bottom: 1px solid var(--line);
}
.hcat__filter {
  appearance: none; cursor: pointer; background: transparent;
  border: 1px solid var(--line-strong); border-radius: 999px;
  padding: 9px 16px; color: var(--ink);
  font-family: var(--font-mono); font-size: 12px;
  letter-spacing: .08em; text-transform: uppercase;
  transition: background .16s var(--easing), color .16s var(--easing), border-color .16s var(--easing);
}
.hcat__filter span {
  margin-left: 7px; color: var(--ink-muted);
  font-variant-numeric: tabular-nums;
}
.hcat__filter:hover { border-color: var(--ink); }
.hcat__filter.is-on { background: var(--ink); border-color: var(--ink); color: var(--paper); }
.hcat__filter.is-on span { color: rgba(245, 241, 234, .62); }
.hcat__filter:focus-visible { outline: 2px solid var(--tulip); outline-offset: 2px; }

/* --- season band --- */
.hcat__band { margin-bottom: var(--sp-12); }
.hcat__band:last-child { margin-bottom: 0; }
.hcat__band.is-empty { display: none; }

/* v2.7.0 (26/8/2026) , Η ΠΛΑΚΑ ΕΓΙΝΕ EDITORIAL ΚΕΦΑΛΙΔΑ. Ο founder είδε τη
   χρωματιστή πλάκα σε φαρδιά οθόνη: άδειο μπλε ορθογώνιο, κομμένο γραφικό,
   αιωρούμενο chip. Η νέα γραμματική είναι της υπόλοιπης σελίδας (Blueprint '26
   #19, το ιδίωμα του Locomotive): hairline, δείκτης 3px στο hue της εποχής,
   μεγάλο πλάγιο serif σε ΜΕΛΑΝΙ, το γραφικό μικρό στο hue, η περίοδος ως mono
   με υπογράμμιση hue. Το Bound Color System ΚΡΑΤΙΕΤΑΙ: το hue παραμένει ο
   κωδικός της εποχής, απλώς από πλάκα γίνεται σήμανση. */
.hcat__band--moss  { --bandhue: var(--moss); }
.hcat__band--sky   { --bandhue: var(--sky); }
.hcat__band--tulip { --bandhue: var(--tulip); }
.hcat__plate {
  position: relative; overflow: visible; color: var(--ink);
  display: flex; align-items: center; gap: var(--sp-4); flex-wrap: wrap;
  min-height: 0; padding: 20px 0 16px;
  margin-bottom: var(--sp-6); border-radius: 0;
  border-top: 1px solid var(--line); background: transparent;
}
.hcat__plate::before {
  content: ""; position: absolute; left: 0; top: -1px;
  width: 46px; height: 3px; background: var(--bandhue, var(--ink));
}
.hcat__art {
  position: static; width: 104px; max-width: 20vw; height: 52px;
  opacity: .5; pointer-events: none; color: var(--bandhue, var(--ink));
  flex: 0 0 auto; order: 2;
}
.hcat__word {
  position: relative; z-index: 2; order: 1;
  font-family: var(--font-display); font-style: italic; font-weight: 600;
  font-size: clamp(34px, 4vw, 56px); line-height: .9; letter-spacing: -.03em;
  color: var(--ink);
}
.hcat__tag {
  position: relative; z-index: 2; margin: 0 0 0 auto; order: 3;
  font-family: var(--font-mono); font-size: 11px; letter-spacing: .12em;
  text-transform: uppercase; color: var(--ink);
  background: transparent; padding: 0 0 6px; border-radius: 0; white-space: nowrap;
  border-bottom: 2px solid var(--bandhue, var(--ink));
  font-variant-numeric: tabular-nums;
}

/* Cards are the site's own component; only the filter state is added here. */
.hcat__grid > li.is-out { display: none; }

@media (max-width: 900px) {
  .hcat { padding: var(--sp-10) 0 var(--sp-12); }
  .hcat__plate { padding: 16px 0 12px; }
  .hcat__art { width: 84px; height: 42px; }
}
@media (max-width: 560px) {
  .hcat__filters { gap: 6px; }
  /* 44px minimum tap target: at 8px padding these measured 36px tall, which
     is below the comfortable-touch threshold on a phone. */
  .hcat__filter { padding: 12px 14px; min-height: 44px; font-size: 11px; letter-spacing: .06em; }
  .hcat__plate { padding: 14px 0 10px; }
  .hcat__art { display: none; } /* στο κινητό ο χώρος πάει στη λέξη και στην περίοδο */
  .hcat__word { font-size: clamp(28px, 9vw, 40px); }
  .hcat__tag { font-size: 10px; padding: 0 0 5px; }
  .hcat__head { margin-bottom: var(--sp-4); }
}
@media (prefers-reduced-motion: reduce) { .hcat__filter { transition: none; } }

.hcat__more {
  display: flex; gap: var(--sp-8); flex-wrap: wrap;
  margin: var(--sp-10) 0 0; padding-top: var(--sp-6);
  border-top: 1px solid var(--line);
}
.hcat__more a {
  font-family: var(--font-mono); font-size: 12px; letter-spacing: .08em;
  text-transform: uppercase; color: var(--ink); text-decoration: none;
}
.hcat__more a:hover, .hcat__more a:focus-visible { color: var(--tulip); text-decoration: underline; text-underline-offset: 4px; }
.hcat__more span { color: var(--tulip); }

/* v2.6.51 (2026-08-16, audit #93) , /private-tours/ στο κινητό: η πρώτη
   φωτογραφία ερχόταν στα 3148px, τέσσερις οθόνες κείμενο (hero 586 + answer
   1019 + pillars 962) πριν δει ο επισκέπτης το προϊόν. Ίδια λύση με το hero
   της αρχικής: flex order μόνο σε mobile, το DOM μένει ίδιο για crawlers.
   Σειρά: hero → κάρτες τουρ (#tours) → answer → υπόλοιπα με σειρά DOM. */
@media (max-width: 900px) {
  body.page-template-page-private-tours main {
    display: flex;
    flex-direction: column;
  }
  body.page-template-page-private-tours main > * { order: 5; }
  body.page-template-page-private-tours main > .hero { order: 1; }
  body.page-template-page-private-tours main > #tours { order: 2; }
  body.page-template-page-private-tours main > .pt-answer { order: 3; }
}

/* v2.6.58 , WhatsApp δίπλα στο κουμπί κράτησης στη sticky μπάρα. Στο κινητό ο
   χώρος είναι λίγος: το εικονίδιο μένει, το κείμενο κρύβεται, ώστε να μη
   σπρώξει ποτέ το κουμπί κράτησης εκτός οθόνης. */
.tour-sticky__wa { flex: 0 0 auto; }
.tour-sticky__wa:hover { border-color: rgba(245,241,234,.7); }
.tour-sticky__btn-short { display: none; }
@media (max-width: 600px) {
  /* Το πλήρες κείμενο του κουμπιού κρατούσε 218px και έδιωχνε το WhatsApp εκτός
     οθόνης σε συσκευές 360px. Κάτω από 600px το κουμπί λέει «Book», το WhatsApp
     γίνεται κύκλος 44px (ελάχιστο μέγεθος αφής) και τα τρία χωράνε πάντα. */
  .tour-sticky__btn-full { display: none; }
  .tour-sticky__btn-short { display: inline; }
  .tour-sticky__wa { width: 44px; height: 44px; padding: 0 !important; }
  .tour-sticky__wa span { display: none; }
}

/* v2.6.60 , στόχοι αφής footer χωρίς αλλαγή οπτικού rhythm */
.site-footer__col a, .site-footer__base a { padding-block: 10px; margin-block: -6px; display: inline-block; }

/* -------------------------------------------------------------------------
 * v2.6.65 , seasonal strip (UX rank 12). Η κλάση ΔΕΝ είχε κανένα CSS rule:
 * το κύριο μονοπάτι προς το Christmas τουρ αποδιδόταν ως γυμνό default link
 * κολλημένο στο x=0, σαν ξεχασμένο debug κείμενο, σε ΚΑΘΕ εσωτερική σελίδα.
 * Bound color system: κάθε season παίρνει το δικό της hue από το palette.
 * ------------------------------------------------------------------------- */
.seasonal-strip {
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 8px;
  min-height: 44px;
  padding: 10px clamp(16px, 4vw, 32px);
  font-family: var(--font-mono);
  font-size: 12px;
  font-weight: 500;
  letter-spacing: 0.1em;
  text-transform: uppercase;
  text-align: center;
  text-decoration: none;
  color: #f5f1ea;
  background: #0f172a;
  transition: background 0.18s ease;
}
.seasonal-strip:hover { background: #1e293b; color: #f5f1ea; }
.seasonal-strip--winter, .seasonal-strip--xmas { background: #143324; }
.seasonal-strip--winter:hover, .seasonal-strip--xmas:hover { background: #1b4530; }
.seasonal-strip--spring { background: #b03a20; }
.seasonal-strip--spring:hover { background: #c9462c; }
.seasonal-strip span { transition: transform 0.18s ease; }
.seasonal-strip:hover span { transform: translateX(3px); }
@media (max-width: 560px) {
  .seasonal-strip { font-size: 11px; letter-spacing: 0.06em; padding: 9px 14px; }
}
@media (prefers-reduced-motion: reduce) {
  .seasonal-strip, .seasonal-strip span { transition: none; }
}

/* ==========================================================================
   .screen-reader-text , 2026-08-22.
   ΔΕΝ ΟΡΙΖΟΤΑΝ ΠΟΥΘΕΝΑ στο theme, παρότι χρησιμοποιείται σε <caption> πινάκων.
   Αποτέλεσμα: το caption τυπωνόταν ΟΡΑΤΟ, μισοκομμένο, πάνω από τον πίνακα.
   Ο κανονικός τρόπος απόκρυψης που κρατά το κείμενο για τους screen readers.
   ========================================================================== */
.screen-reader-text{
	border:0;
	clip-path:inset(50%);
	height:1px;
	width:1px;
	margin:-1px;
	overflow:hidden;
	padding:0;
	position:absolute;
	white-space:nowrap;
}
.screen-reader-text:focus{
	clip-path:none;
	height:auto;
	width:auto;
	margin:0;
	padding:14px 20px;
	position:static;
	white-space:normal;
	background:#f5f1ea;
	color:#1a1612;
	z-index:100000;
}

/* ==========================================================================
   Footer , μέγεθος στόχου αφής σε κινητό. 23/8/2026.
   Μετρημένο στα 375: τρεις σύνδεσμοι στα 26, 34 και 42 pixel ύψος, κάτω από το
   ελάχιστο των 44 που ορίζει το WCAG 2.5.8 και οι οδηγίες πλατφορμών. Οι
   σύνδεσμοι δημοφιλών τουρ ήταν οι μικρότεροι, δηλαδή ακριβώς αυτοί που
   θέλουμε να πατιούνται. Δεν αλλάζει τίποτα σε desktop.
   ========================================================================== */
@media (max-width: 900px) {
	.site-footer a {
		min-height: 44px;
		display: inline-flex;
		align-items: center;
	}
	.site-footer li > a,
	.site-footer__popular a {
		padding-block: 6px;
	}
	/* Οι σύνδεσμοι μέσα σε τρεχούμενο κείμενο μένουν inline, αλλιώς σπάει η ροή. */
	.site-footer p a,
	.site-footer__about a,
	.site-footer__base a {
		min-height: 0;
		display: inline;
		padding-block: 0;
	}
	/* Εξαίρεση της εξαίρεσης: το «See all tours» είναι κουμπί δράσης μέσα σε <p>,
	   όχι σύνδεσμος μέσα σε πρόταση. Ο κανόνας από πάνω το είχε ρίξει στα 22px. */
	.site-footer__bottom-cta a {
		min-height: 44px;
		display: inline-flex;
		align-items: center;
		padding-block: 6px;
	}
}

/* v2.6.99 (26/8/2026) , Η ΦΘΗΝΟΤΕΡΗ ΑΝΑΒΑΘΜΙΣΗ ΤΟΥ 2026 (Blueprint '26 #18).
   balance στα headings κόβει τις ορφανές λέξεις, pretty στο σώμα κόβει τα
   ορφανά τέλη παραγράφων, tabular-nums όπου στοιχίζονται ψηφία. Το basement
   βάζει balance ΣΕ ΚΑΘΕ p, που είναι υπερβολή: ο browser το εφαρμόζει μόνο σε
   λίγες γραμμές αλλά το κοστολογεί παντού. Εδώ μόνο όπου έχει νόημα. */
h1,h2,h3{text-wrap:balance}
p,li,figcaption,blockquote{text-wrap:pretty}
.facts__value,.tour-facts__value,.eetcat__name,.pband__num,.pessay__terminal,
.hero__stars + span,time{font-variant-numeric:tabular-nums}