/* ═══════════════════════════════════════════════════════════
   V4 — "Φως" (Light) · v2 cleanup
   White + lime + black only. Photos as content.
   ═══════════════════════════════════════════════════════════ */

:root{
  --bg:        #fafaf7;
  --paper:     #ffffff;
  --ink:       #0a0a0a;
  --ink-soft:  #1a1a1a;
  --muted:     #6b6b66;
  --line:      #e8e6df;
  --line-2:    #d8d6cf;
  --accent:    #89F336;
  --accent-rgb:137,243,54;
  --accent-ink:#0a0a0a;

  --serif: "Instrument Serif", "Times New Roman", Georgia, serif;
  --sans:  "IBM Plex Sans", system-ui, -apple-system, "Segoe UI", Roboto, sans-serif;
  --mono:  "IBM Plex Mono", ui-monospace, SFMono-Regular, Menlo, monospace;

  --pad: clamp(20px, 4vw, 56px);
  --gap: clamp(16px, 2vw, 28px);
  --nav-h: 76px;

  --ease-out: cubic-bezier(.16,1,.3,1);
  --ease-quart: cubic-bezier(.76,0,.24,1);
}

*,
*::before,
*::after { box-sizing: border-box; }
html, body { margin:0; padding:0; }

html {
  background: var(--bg);
  color: var(--ink);
  font-family: var(--sans);
  font-size: 16px;
  -webkit-font-smoothing: antialiased;
  -moz-osx-font-smoothing: grayscale;
  text-rendering: optimizeLegibility;
}
body {
  min-height: 100vh;
  overflow-x: hidden;
  font-weight: 400;
  line-height: 1.55;
  letter-spacing: -0.005em;
}
img { max-width: 100%; display:block; }
a { color: inherit; text-decoration: none; }
button {
  font: inherit; color: inherit; background: transparent;
  border: 0; padding: 0; cursor: pointer;
}
::selection { background: var(--accent); color: var(--accent-ink); }

/* ─── Scroll progress bar (top) ─── */
.scroll-bar {
  position: fixed;
  top: 0; left: 0;
  height: 3px;
  width: 100%;
  background: transparent;
  z-index: 60;
  pointer-events: none;
}
.scroll-bar::before {
  content: "";
  position: absolute;
  top: 0; left: 0;
  width: 100%;
  height: 100%;
  background: var(--accent);
  transform: scaleX(var(--p, 0));
  transform-origin: left center;
  transition: transform .12s linear;
  box-shadow: 0 0 12px rgba(var(--accent-rgb),.6);
}

/* ─── Cursor (desktop only) ─── */
.cursor { position: fixed; inset: 0; pointer-events: none; z-index: 999; display: none; }
@media (hover: hover) and (pointer: fine) {
  .cursor { display: block; }
  body { cursor: none; }
  a, button, label, input, select, textarea, .magnetic { cursor: none; }
}
.cursor__dot, .cursor__ring {
  position: absolute; top: 0; left: 0;
  border-radius: 50%; pointer-events: none; will-change: transform;
}
.cursor__dot {
  width: 6px; height: 6px;
  background: var(--ink);
  margin: -3px 0 0 -3px;
}
.cursor__ring {
  width: 36px; height: 36px;
  border: 1px solid rgba(10,10,10,.4);
  margin: -18px 0 0 -18px;
  transition: width .25s var(--ease-out), height .25s var(--ease-out),
              margin .25s var(--ease-out), border-color .25s var(--ease-out),
              background .25s var(--ease-out);
}
.cursor.is-hover .cursor__ring {
  width: 56px; height: 56px;
  margin: -28px 0 0 -28px;
  border-color: rgba(var(--accent-rgb), .9);
  background: rgba(var(--accent-rgb), .12);
}

/* ─── Nav (top of page, NOT sticky) ─── */
.nav {
  position: relative;
  z-index: 30;
  display: flex;
  justify-content: flex-start;
  align-items: center;
  padding: 22px var(--pad);
}
.nav__brand {
  display: inline-flex;
  align-items: center;
  gap: 12px;
  font-family: var(--sans);
  font-size: 14px;
  letter-spacing: -0.01em;
  line-height: 1;
  color: var(--ink);
}
.nav__sign { width: 56px; height: 56px; object-fit: contain; display: block; }
.nav__name {
  display: inline-flex;
  align-items: baseline;
  gap: 2px;
  font-weight: 400;
}
.nav__name strong { font-weight: 700; letter-spacing: -0.01em; }

@media (max-width: 600px) {
  .nav__name { display: none; }
}

/* Floating menu dot (always visible, top-right) */
.menu-fab {
  position: fixed;
  top: 22px; right: var(--pad);
  z-index: 55;
  display: inline-flex;
  align-items: center;
  gap: 12px;
  font-family: var(--mono);
  font-size: 12px;
  letter-spacing: 0.16em;
  text-transform: uppercase;
  color: var(--ink);
  background: rgba(250,250,247,0.7);
  backdrop-filter: blur(8px) saturate(120%);
  -webkit-backdrop-filter: blur(8px) saturate(120%);
  padding: 10px 18px 10px 14px;
  border-radius: 999px;
  border: 1px solid var(--line-2);
  transition: color .3s ease, border-color .3s ease, background .3s ease, transform .35s var(--ease-out);
}
.menu-fab__dot {
  width: 18px; height: 18px;
  background: var(--accent);
  border-radius: 50%;
  box-shadow: 0 0 0 2px rgba(var(--accent-rgb),.18),
              0 4px 14px rgba(var(--accent-rgb),.45);
  transition: transform .3s var(--ease-out), box-shadow .3s ease;
}
.menu-fab:hover .menu-fab__dot {
  transform: scale(1.2);
  box-shadow: 0 0 0 4px rgba(var(--accent-rgb),.24),
              0 6px 20px rgba(var(--accent-rgb),.6);
}
.menu-fab:hover { border-color: var(--ink); }
.menu-open .menu-fab .menu-fab__dot {
  background: var(--ink);
  box-shadow: 0 0 0 2px rgba(0,0,0,.08);
}
.menu-open .menu-fab { color: var(--ink); border-color: rgba(0,0,0,.18); }

@media (max-width: 600px) {
  .menu-fab__label { display: none; }
  .menu-fab { padding: 10px; border-radius: 50%; }
}

/* ─── Lime menu overlay (corner quarter-disc, click to open) ─── */
.menu {
  position: fixed;
  inset: 0;
  z-index: 45;
  background: var(--accent);
  pointer-events: none;
  visibility: hidden;
  clip-path: circle(0% at 100% 0%);
  transition: clip-path .85s var(--ease-quart), visibility 0s linear .85s;
}
.menu.is-open {
  pointer-events: auto;
  visibility: visible;
  clip-path: circle(85% at 100% 0%);
  transition: clip-path .85s var(--ease-quart), visibility 0s linear 0s;
}
.menu__circle { display: none; } /* deprecated — using clip-path now */

.menu__inner {
  position: absolute;
  top: 0; right: 0;
  width: min(540px, 78vw);
  max-height: 100vh;
  display: grid;
  grid-template-rows: 1fr auto;
  padding: clamp(96px, 14vh, 140px) clamp(24px, 4vw, 56px) clamp(28px, 4vw, 48px);
  opacity: 0;
  transform: translateY(8px);
  transition: opacity .35s ease, transform .45s var(--ease-out);
}
.menu.is-open .menu__inner {
  opacity: 1;
  transform: translateY(0);
  transition-delay: .35s;
}

.menu__list {
  list-style: none;
  margin: 0;
  padding: 0;
  display: grid;
  align-content: center;
  justify-items: end;
  text-align: right;
  gap: clamp(2px, 0.5vw, 8px);
}
.menu__list a {
  position: relative;
  display: inline-flex;
  align-items: baseline;
  gap: 14px;
  font-family: var(--serif);
  font-size: clamp(28px, 4.4vw, 52px);
  font-weight: 400;
  line-height: 1.05;
  letter-spacing: -0.02em;
  color: var(--ink);
  padding: 4px 0;
  transition: transform .35s var(--ease-out), opacity .35s ease;
}
.menu__list a i {
  font-style: normal;
  font-family: var(--mono);
  font-size: 11px;
  letter-spacing: 0.16em;
  font-weight: 500;
  color: rgba(0,0,0,.55);
}
.menu__list a::before {
  content: "";
  position: absolute;
  right: 100%;
  top: 50%;
  transform: translateY(-50%);
  width: 0;
  height: 1px;
  background: var(--ink);
  transition: width .4s var(--ease-out);
  margin-right: 14px;
}
.menu__list a:hover { transform: translateX(-10px); }
.menu__list a:hover::before { width: 44px; }

.menu__meta {
  display: grid;
  gap: 6px;
  text-align: right;
  font-family: var(--mono);
  font-size: 11px;
  letter-spacing: 0.06em;
  color: rgba(0,0,0,.72);
  border-top: 1px solid rgba(0,0,0,.18);
  padding-top: 18px;
  margin-top: 24px;
}
.menu__meta a { color: rgba(0,0,0,.85); }
.menu__meta a:hover { color: var(--ink); border-bottom: 1px solid currentColor; }
.menu__meta span { color: rgba(0,0,0,.55); }

@media (max-width: 600px) {
  .menu__inner { width: 92vw; padding-top: 80px; }
  .menu.is-open { clip-path: circle(140% at 100% 0%); }
}

/* ─── Buttons ─── */
.btn {
  display: inline-flex;
  align-items: center;
  gap: 10px;
  padding: 14px 22px;
  border-radius: 999px;
  font-family: var(--mono);
  font-size: 13px;
  letter-spacing: 0.04em;
  transition: transform .3s var(--ease-out),
              background .25s ease, color .25s ease, border-color .25s ease;
  will-change: transform;
}
.btn--primary { background: var(--accent); color: var(--accent-ink); }
.btn--primary:hover { background: var(--ink); color: var(--bg); }
.btn--ghost { background: transparent; color: var(--ink); border: 1px solid var(--line-2); }
.btn--ghost:hover { border-color: var(--ink); }
.btn--submit {
  background: var(--accent);
  color: var(--accent-ink);
  width: 100%;
  justify-content: center;
  padding: 18px 22px;
  font-size: 14px;
}
.btn--submit:hover { background: var(--ink); color: var(--bg); }

/* ─── Section heads ─── */
.kicker {
  display: inline-block;
  font-family: var(--mono);
  font-size: 11px;
  letter-spacing: 0.18em;
  text-transform: uppercase;
  color: var(--muted);
  padding-bottom: 4px;
  border-bottom: 1px solid var(--line-2);
}
.kicker--inv {
  color: var(--ink);
  border-bottom-color: rgba(0,0,0,.25);
  font-weight: 500;
}
.sec-head {
  max-width: 880px;
  margin: 0 0 clamp(36px, 5vw, 64px) 0;
  display: grid;
  gap: 18px;
}
.sec-head__title {
  font-family: var(--serif);
  font-weight: 400;
  font-size: clamp(40px, 5.5vw, 80px);
  line-height: 1.0;
  letter-spacing: -0.025em;
  margin: 0;
  text-wrap: balance;
}
.sec-head__title em {
  font-style: italic;
  color: var(--muted);
}
.sec-head__title--tight {
  font-size: clamp(34px, 4.6vw, 68px);
  white-space: nowrap;
}
@media (max-width: 700px) {
  .sec-head__title--tight { white-space: normal; font-size: clamp(28px, 7vw, 48px); }
}
.sec-head__lede {
  max-width: 56ch;
  font-size: clamp(15px, 1.3vw, 18px);
  color: var(--muted);
  line-height: 1.55;
  margin: 0;
}

/* (Hero polygon SVG decorations removed 2026-04-25 — they sat over the
   hero text and looked busy. The hero photo's clip-path puzzle pieces
   carry the cobblestone visual hook now.) */

/* ─── Hero ─── */
.hero {
  display: grid;
  grid-template-columns: 1.05fr 1fr;
  gap: clamp(24px, 4vw, 56px);
  padding: clamp(40px, 8vh, 80px) var(--pad) clamp(60px, 8vw, 100px);
  align-items: stretch;
  position: relative;
}
.hero__left {
  display: flex;
  flex-direction: column;
  justify-content: center;
  padding-right: clamp(0px, 2vw, 24px);
}
.hero__meta {
  display: flex;
  justify-content: space-between;
  align-items: baseline;
  gap: 16px;
  margin-bottom: clamp(28px, 4vw, 48px);
  font-family: var(--mono);
  font-size: 12px;
  letter-spacing: 0.06em;
}
.hero__year { color: var(--muted); font-size: 11px; letter-spacing: 0.18em; }
/* The hero "Από το 2020" sticker — slight extra top margin so the tape strip
   doesn't collide with the kicker line above. */
.hero__year-sticker { margin-top: 8px; align-self: flex-start; }
.hero__title {
  font-family: var(--serif);
  font-weight: 400;
  font-size: clamp(56px, 9vw, 148px);
  line-height: 0.94;
  letter-spacing: -0.035em;
  margin: 0 0 clamp(24px, 3vw, 36px) 0;
}
.hero__title em { font-style: italic; color: var(--muted); display: block; }
.hero__lede {
  max-width: 44ch;
  font-size: clamp(15px, 1.25vw, 18px);
  color: var(--ink-soft);
  line-height: 1.55;
  margin: 0 0 clamp(28px, 4vw, 40px) 0;
}
.hero__ctas { display: flex; gap: 12px; flex-wrap: wrap; margin-bottom: clamp(28px, 4vw, 44px); }
.hero__proof {
  display: flex; align-items: center; flex-wrap: wrap; gap: 12px;
  font-family: var(--mono); font-size: 12px;
  color: var(--muted); letter-spacing: 0.04em;
}
.hero__rating { color: var(--ink); letter-spacing: 0.08em; font-size: 11px; }
.hero__rating em { font-style: normal; margin-left: 4px; color: var(--muted); }
.hero__sep { color: var(--line-2); }

.hero__right { position: relative; border-radius: 14px; overflow: visible; }

/* Hero photo — POLYGONAL PUZZLE (restored).
   The .hero__photo wrapper is a positioning container for 5 .puzzle__piece
   children. Each piece is the SAME image, absolutely positioned to fill the
   wrapper, then clip-pathed to a different polygon shard. Tiny translate
   offsets create thin chalk gaps between pieces — like a jigsaw mid-assembly. */
.hero__photo {
  position: relative;
  height: 100%;
  min-height: clamp(420px, 60vh, 620px);
  margin: 0;
  border-radius: 0;
  overflow: visible;          /* allow piece offsets to "pop out" */
  isolation: isolate;
  background: var(--bg);
}

.puzzle__piece {
  position: absolute;
  inset: 0;
  overflow: hidden;
  isolation: isolate;
  transition: transform .65s var(--ease-out), filter .5s ease;
  will-change: transform;
}
.puzzle__piece img {
  width: 100%; height: 100%;
  object-fit: cover;
  transform-origin: center center;
}

/* Piece 1 — top-left shard */
.puzzle__piece--1 {
  clip-path: polygon(0% 6%, 56% 0%, 62% 48%, 0% 54%);
  transform: translate(-2px, -2px);
  z-index: 4;
}
.puzzle__piece--1:hover { transform: translate(-8px, -8px); }

/* Piece 2 — top-right shard */
.puzzle__piece--2 {
  clip-path: polygon(56% 0%, 100% 8%, 100% 52%, 62% 48%);
  transform: translate(3px, -2px);
  z-index: 3;
}
.puzzle__piece--2:hover { transform: translate(10px, -7px); }

/* Piece 3 — middle-right (the "popped out" shard) */
.puzzle__piece--3 {
  clip-path: polygon(62% 48%, 100% 52%, 100% 100%, 70% 96%);
  transform: translate(8px, 6px);
  z-index: 5;
  filter: drop-shadow(0 12px 30px rgba(10,10,10,.18));
}
.puzzle__piece--3:hover { transform: translate(16px, 12px); }

/* Piece 4 — bottom-left shard */
.puzzle__piece--4 {
  clip-path: polygon(0% 54%, 62% 48%, 70% 96%, 36% 100%, 0% 92%);
  transform: translate(-2px, 4px);
  z-index: 2;
}
.puzzle__piece--4:hover { transform: translate(-8px, 10px); }

/* Piece 5 — small "loose tile" floating below */
.puzzle__piece--5 {
  clip-path: polygon(36% 80%, 70% 76%, 64% 96%, 30% 96%);
  transform: translate(0, 26px) rotate(-2deg);
  z-index: 6;
  filter: drop-shadow(0 14px 22px rgba(10,10,10,.22));
}
.puzzle__piece--5:hover { transform: translate(0, 36px) rotate(-3.5deg); }

@media (prefers-reduced-motion: reduce) {
  .puzzle__piece, .puzzle__piece:hover { transition: none; transform: none; }
}
@media (max-width: 880px) {
  .puzzle__piece--3 { transform: translate(4px, 4px); }
  .puzzle__piece--5 { transform: translate(0, 8px) rotate(-2deg); }
}

.hero__cap {
  position: absolute;
  left: 16px; bottom: 16px;
  display: inline-flex; align-items: center;
  gap: 8px;
  background: rgba(250,250,247,0.92);
  backdrop-filter: blur(8px);
  padding: 8px 14px;
  border-radius: 999px;
  font-family: var(--mono);
  font-size: 11px;
  letter-spacing: 0.06em;
}
.dot { width: 6px; height: 6px; border-radius: 50%; display: inline-block; }
.dot--lime { background: var(--accent); box-shadow: 0 0 0 3px rgba(var(--accent-rgb),.25); }

.hero__stamp {
  position: absolute;
  right: -36px; bottom: -36px;
  width: 120px; height: 120px;
  background: var(--bg);
  border-radius: 50%;
  display: grid; place-items: center;
  z-index: 3;
  color: var(--ink);
  text-decoration: none;
  transition: background-color .35s var(--ease-out),
              transform .35s var(--ease-out),
              box-shadow .35s var(--ease-out);
}
.hero__stamp:hover {
  background: var(--accent);
  transform: scale(1.06);
  box-shadow: 0 18px 40px -16px rgba(var(--accent-rgb), .55);
}
.hero__stamp-svg {
  position: absolute; inset: 0;
  width: 100%; height: 100%;
  animation: spin 18s linear infinite;
  transition: opacity .3s var(--ease-out);
}
.hero__stamp-svg--hover { opacity: 0; }
.hero__stamp:hover .hero__stamp-svg--default { opacity: 0; }
.hero__stamp:hover .hero__stamp-svg--hover   { opacity: 1; }
.hero__stamp-arrow {
  position: absolute; inset: 0; margin: auto;
  width: 22px; height: 22px; z-index: 1;
  transition: transform .35s var(--ease-out);
}
.hero__stamp:hover .hero__stamp-arrow { transform: rotate(-45deg); }
@keyframes spin { to { transform: rotate(360deg); } }

@media (max-width: 880px) {
  .hero { grid-template-columns: 1fr; padding-top: 110px; }
  .hero__photo { min-height: 60vh; }
  .hero__stamp { right: -16px; bottom: -16px; width: 84px; height: 84px; }
}

/* ─── Ticker ─── */
.ticker {
  border-top: 1px solid var(--line);
  border-bottom: 1px solid var(--line);
  padding: 22px 0; overflow: hidden;
  background: var(--bg);
}
.ticker__track {
  display: flex; gap: 28px;
  white-space: nowrap;
  animation: tick 38s linear infinite;
  font-family: var(--mono);
  font-size: 14px;
  letter-spacing: 0.04em;
  color: var(--ink);
  width: max-content;
}
.ticker__sep { color: var(--accent); }
@keyframes tick { from { transform: translateX(0); } to { transform: translateX(-50%); } }

/* ─── Tour ─── */
.tour { padding: clamp(72px, 10vw, 140px) var(--pad); }

/* Tour header: 2-col grid (text left, composite scene right).
   IMPORTANT: must override .sec-head's `max-width: 880px` — otherwise the
   right column (.tour__scene) is starved of horizontal space and collapses
   to almost nothing visible. Also override its single-column gap. */
.tour__head {
  max-width: none;
  display: grid;
  grid-template-columns: 1fr 1.1fr;
  gap: clamp(24px, 4vw, 56px);
  align-items: center;
  margin: 0 0 clamp(28px, 3vw, 44px) 0;
}
.tour__head-text { display: grid; gap: 8px; align-self: center; max-width: 56ch; }
.tour__head-text .kicker { display: inline-block; }

/* COMPOSITE SCENE — interior photo + Matterport camera in foreground.
   Reads as "this exact camera, shooting this exact room." Mimics the
   reference image the client sent. */
.tour__scene {
  position: relative;
  margin: 0;
  aspect-ratio: 4 / 3;
  border-radius: 14px;
  overflow: hidden;
  isolation: isolate;
  box-shadow: 0 30px 60px -28px rgba(0,0,0,.35);
}
/* Background interior photo fills the whole frame */
.tour__scene-bg {
  position: absolute;
  inset: 0;
  z-index: 0;
}
.tour__scene-bg img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  display: block;
}
/* Camera layered in the foreground — narrow vertical profile (image 3),
   so we use a smaller width and let it stand tall on the left edge of the
   room photo. The tripod pole at the bottom of the PNG visually anchors
   the camera "into" the floor of the scene. */
.tour__scene-cam {
  position: absolute;
  left: 4%;
  bottom: -2%;
  width: 32%;
  height: auto;
  z-index: 2;
  filter: drop-shadow(0 18px 24px rgba(10,10,10,.5));
  pointer-events: none;
  transition: transform .6s var(--ease-out);
}
.tour__scene:hover .tour__scene-cam { transform: translateY(-6px); }
/* Soft lime tint at the camera's base so it looks "lit" by the room */
.tour__scene::after {
  content: "";
  position: absolute;
  left: 0; bottom: 0;
  width: 60%; height: 50%;
  background: radial-gradient(60% 80% at 20% 90%, rgba(var(--accent-rgb),.18), transparent 70%);
  z-index: 1;
  pointer-events: none;
}
/* Caption pill — sits on the photo top-right corner */
.tour__scene-cap {
  position: absolute;
  top: 14px; right: 14px;
  z-index: 3;
  display: inline-flex; align-items: center; gap: 8px;
  background: rgba(250,250,247,0.92);
  backdrop-filter: blur(8px);
  color: var(--ink);
  padding: 8px 14px;
  border-radius: 999px;
  font-family: var(--mono);
  font-size: 10px;
  letter-spacing: 0.14em;
  text-transform: uppercase;
}
.tour__scene-cap sup { font-size: 0.7em; }

@media (max-width: 880px) {
  .tour__head { grid-template-columns: 1fr; }
  .tour__scene { aspect-ratio: 16 / 11; }
  .tour__scene-cam { width: 36%; left: 4%; bottom: -2%; }
}

.tour__frame {
  margin-top: clamp(24px, 3vw, 40px);
  border: 1px solid var(--line-2);
  border-radius: 16px; overflow: hidden;
  background: #000;
  box-shadow: 0 30px 80px -40px rgba(0,0,0,.25);
}
.tour__chrome {
  display: flex; align-items: center; gap: 8px;
  background: var(--paper);
  padding: 10px 14px;
  border-bottom: 1px solid var(--line);
  font-family: var(--mono);
  font-size: 11px; color: var(--muted);
}
.tour__chrome-dot { width: 10px; height: 10px; border-radius: 50%; background: var(--line-2); }
.tour__chrome-dot:nth-child(1) { background: #ff6058; }
.tour__chrome-dot:nth-child(2) { background: #ffbd2e; }
.tour__chrome-dot:nth-child(3) { background: #28c840; }
.tour__chrome-url { margin-left: 14px; letter-spacing: 0.04em; }
.tour__viewport { position: relative; aspect-ratio: 16 / 9; isolation: isolate; }
.tour__viewport iframe {
  position: absolute; inset: 0; width: 100%; height: 100%; border: 0;
  /* Disabled until user clicks the activate overlay. This kills the iframe's
     scroll-jacking — wheel events on top of an inactive iframe pass through
     to the page and the page scrolls normally. */
  pointer-events: none;
  transition: filter .4s ease;
  filter: saturate(0.85) brightness(0.92);
}
.tour__viewport.is-active iframe {
  pointer-events: auto;
  filter: none;
}

/* Click-to-explore overlay */
.tour__activate {
  position: absolute; inset: 0;
  display: grid; place-items: center;
  background: transparent;
  border: 0;
  padding: 0;
  cursor: pointer;
  z-index: 2;
  transition: opacity .35s ease, visibility .35s ease;
  font: inherit;
  color: inherit;
}
.tour__viewport.is-active .tour__activate {
  opacity: 0;
  visibility: hidden;
  pointer-events: none;
}
.tour__activate-bg {
  position: absolute; inset: 0;
  background:
    radial-gradient(60% 60% at 50% 50%, rgba(10,10,10,.18), rgba(10,10,10,.55) 80%),
    linear-gradient(180deg, rgba(10,10,10,.05) 0%, rgba(10,10,10,.35) 100%);
  transition: background .3s ease;
}
.tour__activate:hover .tour__activate-bg {
  background:
    radial-gradient(60% 60% at 50% 50%, rgba(10,10,10,.05), rgba(10,10,10,.4) 80%),
    linear-gradient(180deg, rgba(10,10,10,0) 0%, rgba(10,10,10,.25) 100%);
}
.tour__activate-inner {
  position: relative;
  display: inline-flex;
  align-items: center;
  gap: 18px;
  padding: 18px 26px 18px 22px;
  background: var(--accent);
  color: var(--ink);
  border: 1px solid var(--ink);
  border-radius: 999px;
  box-shadow: 0 18px 40px -16px rgba(0,0,0,.5);
  transition: transform .35s var(--ease-out), box-shadow .35s ease;
}
.tour__activate:hover .tour__activate-inner {
  transform: translateY(-3px) scale(1.03);
  box-shadow: 0 24px 50px -16px rgba(0,0,0,.55);
}
.tour__activate-icon {
  flex: 0 0 32px;
  color: var(--ink);
}
.tour__activate-label {
  display: grid;
  text-align: left;
  gap: 2px;
}
.tour__activate-label strong {
  font-family: var(--sans);
  font-size: clamp(14px, 1.15vw, 17px);
  font-weight: 600;
  letter-spacing: -0.005em;
  line-height: 1.2;
}
.tour__activate-label em {
  font-family: var(--mono);
  font-style: normal;
  font-size: 11px;
  letter-spacing: 0.08em;
  text-transform: uppercase;
  opacity: 0.7;
  line-height: 1.2;
}

/* ─── Stats ─── */
.stats {
  display: grid; grid-template-columns: repeat(3, 1fr);
  border-top: 1px solid var(--line);
  border-bottom: 1px solid var(--line);
}
.stat {
  padding: clamp(36px, 6vw, 72px) clamp(24px, 4vw, 56px);
  border-right: 1px solid var(--line);
  display: flex; flex-direction: column; gap: 14px;
}
.stat:last-child { border-right: 0; }
.stat__num {
  font-family: var(--serif);
  font-size: clamp(52px, 9vw, 132px);
  line-height: 1;
  letter-spacing: -0.04em;
  color: var(--ink);
}
.stat__lab {
  font-family: var(--mono);
  font-size: 12px; color: var(--muted);
  letter-spacing: 0.04em;
  line-height: 1.5;
  margin: 0;
}
@media (max-width: 720px) {
  .stats { grid-template-columns: 1fr; }
  .stat { border-right: 0; border-bottom: 1px solid var(--line); }
  .stat:last-child { border-bottom: 0; }
}

/* ─── Work / gallery (Project 01-08) ─── */
.work { padding: clamp(72px, 10vw, 140px) var(--pad); }
.work__grid {
  display: grid;
  grid-template-columns: repeat(6, 1fr);
  grid-auto-rows: clamp(220px, 22vw, 320px);
  gap: var(--gap);
  margin-top: clamp(24px, 3vw, 40px);
}
.card {
  position: relative;
  grid-column: span 2;
  grid-row: span 1;
  overflow: hidden;
  border-radius: 12px;
  background: #eee;
  isolation: isolate;
  transition: transform .5s var(--ease-out);
  display: block;
}
.card--lg   { grid-column: span 4; grid-row: span 2; }
.card--wide { grid-column: span 4; }
.card--tall { grid-row: span 2; }
.card img {
  width: 100%; height: 100%;
  object-fit: cover;
  transition: transform 1s var(--ease-out), filter .5s ease;
  will-change: transform;
}
.card__overlay {
  position: absolute; inset: 0;
  background: var(--accent);
  mix-blend-mode: multiply;
  opacity: 0;
  transition: opacity .4s var(--ease-out);
  z-index: 1;
}
.card:hover .card__overlay { opacity: 0.55; }
.card:hover img { transform: scale(1.06); filter: contrast(1.05); }

.card__num {
  position: absolute;
  left: 16px; top: 16px;
  background: rgba(250,250,247,0.95);
  backdrop-filter: blur(6px);
  padding: 8px 14px;
  border-radius: 999px;
  font-family: var(--mono);
  font-size: 12px;
  letter-spacing: 0.08em;
  color: var(--ink);
  z-index: 2;
  font-weight: 500;
  transition: background .3s ease, color .3s ease;
}
.card:hover .card__num {
  background: var(--ink);
  color: var(--bg);
}

.card__cta {
  position: absolute;
  right: 16px; bottom: 16px;
  background: var(--accent);
  color: var(--accent-ink);
  padding: 10px 16px;
  border-radius: 999px;
  font-family: var(--mono);
  font-size: 12px;
  letter-spacing: 0.04em;
  display: inline-flex; gap: 6px;
  z-index: 2;
  transition: background .3s ease, color .3s ease, transform .3s var(--ease-out);
}
.card:hover .card__cta {
  background: var(--ink);
  color: #ffffff;
}

@media (max-width: 1100px) {
  .work__grid { grid-template-columns: repeat(4, 1fr); }
  .card--lg, .card--wide { grid-column: span 4; }
}
@media (max-width: 720px) {
  .work__grid { grid-template-columns: repeat(2, 1fr); grid-auto-rows: 220px; }
  .card, .card--lg, .card--wide, .card--tall { grid-column: span 2; grid-row: span 1; }
}

/* ─── Why 360° — artistic 3D scroll deck ─── */
.why {
  position: relative;
  padding: clamp(72px, 10vw, 140px) var(--pad);
  background: var(--bg);
  display: grid;
  grid-template-columns: 1fr 1.15fr;
  gap: clamp(40px, 6vw, 96px);
  align-items: start;
  perspective: 1400px;
}
.why__left {
  position: sticky;
  top: 100px;
  display: grid;
  gap: 22px;
  align-self: start;
}
.why__title {
  font-family: var(--serif);
  font-weight: 400;
  font-size: clamp(48px, 7vw, 112px);
  line-height: 0.95;
  letter-spacing: -0.035em;
  margin: 14px 0 8px 0;
}
.why__title em { font-style: italic; color: var(--accent); display: block; }
.why__lede {
  font-size: clamp(15px, 1.2vw, 17px);
  color: var(--muted);
  line-height: 1.65;
  margin: 0;
  max-width: 44ch;
}
.why__tag {
  font-family: var(--mono);
  font-size: 13px;
  color: var(--ink);
  letter-spacing: 0.04em;
  margin: 8px 0 0 0;
}
.why__tag span { color: var(--accent); display: inline-block; animation: bob 2s ease-in-out infinite; margin-left: 6px; }
@keyframes bob { 0%, 100% { transform: translateY(0); } 50% { transform: translateY(4px); } }

.why__deck {
  list-style: none;
  margin: 0;
  padding: 0;
  display: grid;
  gap: clamp(20px, 2.5vw, 32px);
  transform-style: preserve-3d;
}
.why__card {
  position: relative;
  perspective: 1400px;
}
.why__card-inner {
  position: relative;
  background: var(--paper);
  border: 1px solid var(--line-2);
  border-radius: 18px;
  padding: clamp(28px, 3.5vw, 44px);
  display: grid;
  grid-template-columns: auto 1fr;
  grid-template-rows: auto auto;
  column-gap: clamp(20px, 3vw, 36px);
  row-gap: 12px;
  align-items: start;
  transform: rotateX(18deg) translateY(40px) scale(.95);
  opacity: 0;
  transition: transform .9s var(--ease-out),
              opacity .9s ease,
              box-shadow .5s ease,
              border-color .5s ease,
              background .4s ease;
  transform-origin: center top;
  will-change: transform, opacity;
  box-shadow: 0 8px 30px -20px rgba(0,0,0,.1);
}
.why__card.is-revealed .why__card-inner {
  transform: rotateX(0deg) translateY(0) scale(1);
  opacity: 1;
}
.why__card-inner:hover {
  transform: translateY(-6px) translateZ(40px) rotateX(-2deg);
  border-color: var(--ink);
  box-shadow: 0 30px 60px -25px rgba(0,0,0,.25),
              0 8px 18px -8px rgba(var(--accent-rgb),.35);
}
.why__card-num {
  font-family: var(--serif);
  font-size: clamp(64px, 7vw, 112px);
  line-height: 0.85;
  letter-spacing: -0.04em;
  color: var(--accent);
  grid-row: 1 / span 2;
  align-self: start;
}
.why__card-t {
  font-family: var(--serif);
  font-size: clamp(26px, 2.6vw, 40px);
  line-height: 1.05;
  letter-spacing: -0.02em;
  margin: 0;
  font-weight: 400;
  color: var(--ink);
  align-self: end;
}
.why__card-d {
  margin: 0;
  font-size: clamp(14px, 1vw, 16px);
  color: var(--muted);
  line-height: 1.65;
  grid-column: 2;
}
.why__card-tag {
  position: absolute;
  top: clamp(20px, 2.5vw, 32px);
  right: clamp(20px, 2.5vw, 32px);
  font-family: var(--mono);
  font-size: 10px;
  letter-spacing: 0.16em;
  text-transform: uppercase;
  color: var(--ink);
  background: var(--accent);
  padding: 5px 10px;
  border-radius: 999px;
  font-weight: 500;
}

/* alternating shift for visual rhythm */
.why__card:nth-child(even) .why__card-inner { margin-left: clamp(0px, 4vw, 60px); }

@media (max-width: 980px) {
  .why { grid-template-columns: 1fr; }
  .why__left { position: static; }
  .why__card:nth-child(even) .why__card-inner { margin-left: 0; }
}

/* ─── Process — lime/black inversion (BIG bold rows) ─── */
.proc {
  padding: 0;
  background: var(--accent);
  border-top: 1px solid var(--ink);
  border-bottom: 1px solid var(--ink);
  color: var(--ink);
}
.proc__head {
  padding: clamp(60px, 8vw, 100px) var(--pad) clamp(36px, 5vw, 56px);
  border-bottom: 1px solid var(--ink);
}
.proc__head .kicker { color: var(--ink); border-bottom-color: rgba(0,0,0,.3); font-weight: 500; }
.proc__head .sec-head__title { color: var(--ink); }

.proc__list {
  list-style: none;
  margin: 0;
  padding: 0;
}
.proc__row {
  display: grid;
  grid-template-columns: clamp(110px, 14vw, 220px) 1fr clamp(120px, 12vw, 180px) 60px;
  gap: clamp(20px, 3vw, 40px);
  padding: clamp(36px, 5vw, 60px) var(--pad);
  align-items: center;
  border-bottom: 1px solid var(--ink);
  background: var(--accent);
  color: var(--ink);
  position: relative;
  cursor: pointer;
  transition: background .5s var(--ease-out), color .5s var(--ease-out);
}
.proc__row:last-child { border-bottom: 0; }
.proc__row::before {
  content: "";
  position: absolute;
  inset: 0;
  background: var(--ink);
  transform: scaleY(0);
  transform-origin: bottom;
  transition: transform .5s var(--ease-out);
  z-index: 0;
}
.proc__row:hover { color: #ffffff; }
.proc__row:hover::before { transform: scaleY(1); }
.proc__row > * { position: relative; z-index: 1; }

.proc__num {
  font-family: var(--serif);
  font-weight: 400;
  font-size: clamp(80px, 10vw, 180px);
  line-height: 0.85;
  letter-spacing: -0.04em;
  color: var(--ink);
  transition: color .5s var(--ease-out);
}
.proc__row:hover .proc__num { color: #ffffff; }
.proc__body { display: grid; gap: 8px; }
.proc__t {
  font-family: var(--sans);
  font-weight: 700;
  font-size: clamp(28px, 3.6vw, 56px);
  line-height: 1.0;
  letter-spacing: -0.025em;
  margin: 0;
  color: var(--ink);
  transition: color .5s var(--ease-out);
}
.proc__row:hover .proc__t { color: #ffffff; }
.proc__d {
  font-family: var(--sans);
  font-size: clamp(14px, 1.05vw, 16px);
  line-height: 1.55;
  margin: 0;
  color: rgba(0,0,0,.72);
  max-width: 56ch;
  transition: color .5s var(--ease-out);
}
.proc__row:hover .proc__d { color: rgba(255,255,255,.8); }
.proc__tag {
  font-family: var(--mono);
  font-size: 12px;
  letter-spacing: 0.12em;
  text-transform: uppercase;
  color: var(--ink);
  text-align: right;
  font-weight: 500;
  transition: color .5s var(--ease-out);
}
.proc__row:hover .proc__tag { color: #ffffff; }
.proc__arrow {
  font-size: 28px;
  text-align: right;
  color: var(--ink);
  transform: translateX(0);
  transition: transform .4s var(--ease-out), color .5s var(--ease-out);
}
.proc__row:hover .proc__arrow {
  transform: translateX(8px);
  color: var(--accent);
}

@media (max-width: 880px) {
  .proc__row {
    grid-template-columns: clamp(70px, 16vw, 110px) 1fr;
    grid-template-rows: auto auto;
    gap: 14px clamp(16px, 4vw, 24px);
    padding: clamp(28px, 5vw, 40px) var(--pad);
  }
  .proc__num { font-size: clamp(56px, 16vw, 100px); grid-row: span 2; }
  .proc__tag { grid-column: 2; text-align: left; }
  .proc__arrow { display: none; }
}

/* ─── Packages — poster cards (white / lime / black) ─── */
.packs { padding: clamp(72px, 10vw, 140px) var(--pad); }
.packs__grid {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: clamp(20px, 2.5vw, 32px);
  margin-top: clamp(40px, 6vw, 64px);
  align-items: stretch;
}
.pack {
  position: relative;
  display: flex;
  flex-direction: column;
  padding: clamp(32px, 3.4vw, 50px);
  border-radius: 18px;
  /* visible (was hidden) so the floating Δημοφιλές badge isn't clipped */
  overflow: visible;
  border: 1px solid var(--ink);
  transition: transform .5s var(--ease-out),
              box-shadow .4s var(--ease-out),
              opacity .7s ease;
  opacity: 0;
  transform: translateY(20px);
}
.pack.is-revealed { opacity: 1; transform: translateY(0); }
.pack:hover {
  transform: translateY(-8px);
  box-shadow: 0 30px 60px -28px rgba(0,0,0,.25);
}

/* Tier 1 — light poster */
.pack--light {
  background: var(--paper);
  color: var(--ink);
  border-color: var(--ink);
}

/* Tier 2 — lime poster (lifted, featured) */
.pack--lime {
  background: var(--accent);
  color: var(--ink);
  border-color: var(--ink);
}
.pack--lime.is-revealed { transform: translateY(-12px); }
.pack--lime:hover { transform: translateY(-22px); box-shadow: 0 36px 70px -28px rgba(var(--accent-rgb),.55); }

/* Tier 3 — dark poster */
.pack--dark {
  background: var(--ink);
  color: #f5f2ec;
  border-color: var(--ink);
}

/* Polygon decorations on each pack */
.poly--pack1 {
  position: absolute;
  top: -28px; right: -28px;
  width: 160px; height: 160px;
  color: var(--accent);
  z-index: 0;
  transform: rotate(15deg);
}
.poly--pack2 {
  position: absolute;
  bottom: -36px; left: -36px;
  width: 180px; height: 180px;
  color: var(--ink);
  opacity: 0.08;
  z-index: 0;
  transform: rotate(-18deg);
}
.poly--pack3 {
  position: absolute;
  top: -32px; right: -32px;
  width: 170px; height: 170px;
  color: var(--accent);
  opacity: 0.95;
  z-index: 0;
  transform: rotate(-10deg);
}
.pack > *:not(.poly):not(.pack__badge) { position: relative; z-index: 1; }

/* Badge on featured — now styled as a tilted post-it sticker so it rhymes
   with the FAQ notes. Black sticker on lime card pops + reads as a note. */
.pack__badge {
  position: absolute;
  top: -18px;
  left: 50%;
  transform: translateX(-50%) rotate(-4deg);
  background: var(--ink);
  color: var(--accent);
  font-family: var(--mono);
  font-size: 12px;
  letter-spacing: 0.2em;
  text-transform: uppercase;
  padding: 10px 18px;
  border-radius: 2px;
  font-weight: 500;
  white-space: nowrap;
  z-index: 5;
  border: 1px solid rgba(0,0,0,.4);
  box-shadow:
    0 1px 0 rgba(0,0,0,.06),
    0 12px 22px -10px rgba(0,0,0,.5);
  transition: transform .35s var(--ease-out);
}
/* Tape strip on top of the badge — same trick as .sticker / .note__tape */
.pack__badge::before {
  content: "";
  position: absolute;
  top: -6px; left: 50%;
  transform: translateX(-50%) rotate(-2deg);
  width: 32px; height: 8px;
  background: rgba(255,255,255,.4);
  border: 1px solid rgba(0,0,0,.06);
  pointer-events: none;
}
.pack--lime:hover .pack__badge { transform: translateX(-50%) rotate(-1deg); }

/* Number eyebrow */
.pack__num {
  font-family: var(--mono);
  font-size: 13px;
  letter-spacing: 0.2em;
  font-weight: 500;
  color: currentColor;
  opacity: 0.65;
  margin-bottom: clamp(28px, 3vw, 40px);
}
.pack--lime .pack__num { opacity: 0.7; }

/* Tier name */
.pack__name {
  font-family: var(--sans);
  font-size: clamp(28px, 2.8vw, 40px);
  line-height: 1.05;
  letter-spacing: -0.015em;
  font-weight: 700;
  margin: 0 0 10px 0;
  color: currentColor;
}

/* Massive price */
.pack__price {
  font-family: var(--serif);
  font-weight: 400;
  font-size: clamp(80px, 9.5vw, 132px);
  line-height: 0.92;
  letter-spacing: -0.045em;
  margin: 4px 0 16px 0;
  display: inline-flex;
  align-items: baseline;
  gap: 4px;
  color: currentColor;
}
.pack__cur {
  font-size: 0.4em;
  font-style: italic;
  opacity: 0.55;
}
.pack__count { display: inline-block; font-variant-numeric: tabular-nums; }

.pack__scope {
  font-family: var(--mono);
  font-size: 13px;
  letter-spacing: 0.14em;
  text-transform: uppercase;
  margin: 0;
  opacity: 0.75;
}

.pack__rule {
  border: 0;
  height: 1px;
  background: currentColor;
  opacity: 0.18;
  margin: clamp(22px, 2.6vw, 34px) 0;
}

.pack__list {
  list-style: none;
  margin: 0;
  padding: 0;
  display: grid;
  gap: 22px;
  flex: 1;
}
.pack__list li {
  display: grid;
  gap: 8px;
  font-size: clamp(15px, 1.05vw, 17px);
  line-height: 1.6;
  color: currentColor;
  opacity: 0.92;
}
.pack__lab {
  display: inline-block;
  font-family: var(--mono);
  font-size: 11px;
  letter-spacing: 0.18em;
  text-transform: uppercase;
  font-weight: 500;
  opacity: 0.6;
}

.pack__cta {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 10px;
  margin-top: clamp(28px, 3.4vw, 38px);
  padding: 16px 24px;
  border-radius: 999px;
  font-family: var(--mono);
  font-size: 14px;
  letter-spacing: 0.05em;
  transition: background .25s ease, color .25s ease, transform .3s var(--ease-out);
}
/* light pack — outline button → fills ink on hover */
.pack--light .pack__cta {
  background: transparent;
  color: var(--ink);
  border: 1px solid var(--ink);
}
.pack--light .pack__cta:hover { background: var(--ink); color: var(--bg); }

/* lime pack — solid ink button → lime/ink invert on hover */
.pack--lime .pack__cta {
  background: var(--ink);
  color: var(--bg);
  border: 1px solid var(--ink);
}
.pack--lime .pack__cta:hover { background: var(--paper); color: var(--ink); }

/* dark pack — lime button */
.pack--dark .pack__cta {
  background: var(--accent);
  color: var(--ink);
  border: 1px solid var(--accent);
}
.pack--dark .pack__cta:hover { background: var(--paper); color: var(--ink); border-color: var(--paper); }

.packs__note {
  margin: clamp(40px, 5vw, 56px) auto 0;
  max-width: 64ch;
  text-align: center;
  font-family: var(--mono);
  font-size: 12px;
  letter-spacing: 0.04em;
  color: var(--muted);
  line-height: 1.7;
}

@media (max-width: 980px) {
  .packs__grid { grid-template-columns: 1fr; }
  .pack--lime.is-revealed { transform: translateY(0); }
  .pack--lime:hover { transform: translateY(-8px); }
}

/* ─── FAQ — corkboard of draggable post-it notes ─── */
.faq {
  position: relative;
  padding: clamp(72px, 10vw, 140px) var(--pad);
  background:
    /* faint paper-grain background to feel like a corkboard/desk */
    radial-gradient(circle at 30% 20%, rgba(0,0,0,.025) 1px, transparent 1.5px) 0 0/22px 22px,
    var(--bg);
  display: grid;
  grid-template-columns: 1fr 1.4fr;
  gap: clamp(40px, 6vw, 96px);
  align-items: start;
}
.faq__left {
  position: sticky;
  top: 100px;
  display: grid;
  gap: 22px;
  align-self: start;
}
.faq__title {
  font-family: var(--serif);
  font-weight: 400;
  font-size: clamp(80px, 12vw, 200px);
  line-height: 0.9;
  letter-spacing: -0.04em;
  margin: 14px 0 8px 0;
  text-transform: uppercase;
}
.faq__title em { font-style: italic; color: var(--accent); display: block; }
.faq__lede {
  font-size: clamp(15px, 1.2vw, 17px);
  color: var(--muted);
  line-height: 1.65;
  margin: 0;
  max-width: 44ch;
}
.faq__lede strong { color: var(--ink); font-weight: 600; }
.faq__tag {
  font-family: var(--mono);
  font-size: 13px;
  color: var(--muted);
  letter-spacing: 0.04em;
  margin: 8px 0 0 0;
}
.faq__tag a { color: var(--ink); text-decoration: none; border-bottom: 1px solid var(--accent); padding-bottom: 2px; }
.faq__tag a:hover { color: var(--accent); }

/* The board — a flex container; notes sit naturally then can be dragged
   anywhere via JS (which sets `position:absolute` + top/left at drag start). */
.faq__board {
  position: relative;
  min-height: clamp(560px, 70vh, 820px);
  display: flex;
  flex-wrap: wrap;
  gap: clamp(16px, 2vw, 28px);
  padding: clamp(20px, 3vw, 40px) 0;
  align-content: flex-start;
}

/* ─── A single note (used by FAQ board AND by the floating post-it) ─── */
.note {
  position: relative;
  width: clamp(240px, 24vw, 320px);
  /* Square-ish but allows answer to breathe — slightly taller than wide */
  min-height: clamp(240px, 24vw, 320px);
  padding: 30px 22px 36px;   /* extra bottom padding for drag-hint chip */
  display: flex;
  flex-direction: column;
  gap: 8px;
  background: var(--paper);
  color: var(--ink);
  border: 1px solid rgba(0,0,0,.08);
  border-radius: 2px;
  font-family: var(--serif);
  cursor: grab;
  transform: rotate(var(--rot, 0deg)) translate(var(--x, 0px), var(--y, 0px));
  transition: transform .35s var(--ease-out), box-shadow .3s ease, opacity .6s ease;
  box-shadow:
    0 1px 0 rgba(0,0,0,.06),
    0 14px 28px -16px rgba(0,0,0,.35),
    0 28px 56px -32px rgba(0,0,0,.25);
  user-select: none;
  touch-action: none;        /* let JS handle pointer drag without page scroll */
  opacity: 0;
}
.note.is-revealed { opacity: 1; }
.note.is-dragging {
  cursor: grabbing;
  transition: none;
  transform: rotate(0deg) translate(var(--x, 0px), var(--y, 0px));
  box-shadow:
    0 2px 0 rgba(0,0,0,.06),
    0 30px 60px -20px rgba(0,0,0,.45),
    0 50px 90px -36px rgba(0,0,0,.35);
  z-index: 30;
}
.note.is-open {
  /* Open state grows the note slightly + lifts shadow */
  z-index: 20;
  box-shadow:
    0 2px 0 rgba(0,0,0,.08),
    0 24px 48px -18px rgba(0,0,0,.42),
    0 6px 14px -6px rgba(var(--accent-rgb),.4);
}
.note:hover { transform: rotate(calc(var(--rot, 0deg) * 0.4)) translate(var(--x, 0px), calc(var(--y, 0px) - 4px)); }

/* Color variants — paper / lime / ink */
.note--paper { background: var(--paper); color: var(--ink); }
.note--lime  { background: var(--accent); color: var(--ink); border-color: rgba(0,0,0,.18); }
.note--ink   { background: var(--ink);    color: var(--paper); border-color: rgba(0,0,0,.4); }
.note--ink .note__num { color: var(--accent); }

/* Tape strip on top */
.note__tape {
  position: absolute;
  top: -10px;
  left: 50%;
  transform: translateX(-50%) rotate(-1.5deg);
  width: 64px; height: 18px;
  background: rgba(255,255,255,.35);
  border: 1px solid rgba(0,0,0,.06);
  box-shadow: 0 2px 4px rgba(0,0,0,.08);
  pointer-events: none;
}
.note--ink .note__tape { background: rgba(255,255,255,.18); }

.note__num {
  font-family: var(--mono);
  font-size: 12px;
  letter-spacing: 0.18em;
  font-weight: 500;
  color: rgba(0,0,0,.55);
  margin-bottom: 4px;
}
.note__q {
  font-family: var(--serif);
  font-size: clamp(18px, 1.7vw, 22px);
  line-height: 1.18;
  letter-spacing: -0.015em;
  font-weight: 400;
  margin: 0;
  text-wrap: balance;
}
.note__a {
  margin: 0;
  font-family: var(--sans);
  font-size: 13.5px;
  line-height: 1.5;
  color: currentColor;
  opacity: 0.92;
  flex: 1;
}
.note__a strong { font-weight: 600; }

/* Drag-hint chip: small icon + "σύρετε" label in bottom-right corner.
   Communicates the post-its are draggable without a tutorial. */
.note__drag {
  position: absolute;
  right: 12px; bottom: 10px;
  display: inline-flex;
  align-items: center;
  gap: 4px;
  font-family: var(--mono);
  font-size: 9px;
  letter-spacing: 0.16em;
  text-transform: uppercase;
  color: rgba(0,0,0,.4);
  pointer-events: none;
  transition: color .25s ease, transform .25s ease;
}
.note__drag em { font-style: normal; }
.note--ink .note__drag { color: rgba(255,255,255,.45); }
.note:hover .note__drag { color: rgba(0,0,0,.7); transform: rotate(-6deg); }
.note--ink:hover .note__drag { color: rgba(255,255,255,.85); }
.note.is-dragging .note__drag { opacity: 0; }

/* First-load wiggle on note 01 only — quick visual hint that they move */
@keyframes noteWiggleHint {
  0%, 100% { transform: rotate(var(--rot, 0deg)) translate(var(--x, 0px), var(--y, 0px)); }
  20%      { transform: rotate(calc(var(--rot, 0deg) + 4deg)) translate(var(--x, 0px), var(--y, 0px)); }
  40%      { transform: rotate(calc(var(--rot, 0deg) - 3deg)) translate(var(--x, 0px), var(--y, 0px)); }
  60%      { transform: rotate(calc(var(--rot, 0deg) + 2deg)) translate(var(--x, 0px), var(--y, 0px)); }
  80%      { transform: rotate(calc(var(--rot, 0deg) - 1deg)) translate(var(--x, 0px), var(--y, 0px)); }
}
.note[data-note="01"].is-revealed {
  animation: noteWiggleHint 1.4s ease-in-out 0.6s 1;
}
@media (prefers-reduced-motion: reduce) {
  .note[data-note="01"].is-revealed { animation: none; }
}

@media (max-width: 980px) {
  .faq { grid-template-columns: 1fr; }
  .faq__left { position: static; }
  .faq__board { min-height: auto; justify-content: center; }
  .note { width: min(80vw, 240px); }
}
@media (prefers-reduced-motion: reduce) {
  .note, .note:hover { transition: opacity .2s ease; transform: rotate(var(--rot, 0deg)); }
}

/* ─── Reusable post-it accents (sticker style for one-off labels) ─────────
   Use `.sticker` for any small tilted lime label that should rhyme with the
   FAQ notes. Examples: hero "Από το 2020" tag, "Δημοφιλές" badge on the
   featured pack. Set --rot in inline style or a modifier for the angle. */
.sticker {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  padding: 7px 14px;
  background: var(--accent);
  color: var(--ink);
  border: 1px solid rgba(0,0,0,.18);
  border-radius: 2px;
  font-family: var(--mono);
  font-size: 11px;
  letter-spacing: 0.16em;
  text-transform: uppercase;
  font-weight: 500;
  transform: rotate(var(--rot, -2deg));
  box-shadow:
    0 1px 0 rgba(0,0,0,.06),
    0 6px 12px -6px rgba(0,0,0,.3);
  position: relative;
}
/* Tiny tape strip on top of stickers */
.sticker::before {
  content: "";
  position: absolute;
  top: -6px; left: 50%;
  transform: translateX(-50%) rotate(-2deg);
  width: 28px; height: 8px;
  background: rgba(255,255,255,.45);
  border: 1px solid rgba(0,0,0,.06);
  pointer-events: none;
}
.sticker--paper { background: var(--paper); color: var(--ink); }
.sticker--ink   { background: var(--ink); color: var(--paper); }

/* ─── Contact (lime split) ─── */
.contact {
  display: grid;
  grid-template-columns: 1fr 1.05fr;
  min-height: 100vh;
  border-top: 1px solid var(--line);
}
.contact__left {
  background: var(--accent);
  color: var(--ink);
  position: relative;
  overflow: hidden;
}
.contact__left::before {
  content: "";
  position: absolute;
  inset: 0;
  background:
    radial-gradient(80% 60% at 0% 100%, rgba(0,0,0,.06), transparent 60%),
    repeating-linear-gradient(90deg, transparent 0 80px, rgba(0,0,0,.04) 80px 81px);
  pointer-events: none;
}
.contact__pad {
  position: relative;
  padding: clamp(56px, 8vw, 100px) clamp(32px, 5vw, 72px);
  display: flex;
  flex-direction: column;
  justify-content: space-between;
  height: 100%;
  min-height: 100vh;
  gap: 40px;
}
.contact__title {
  font-family: var(--serif);
  font-weight: 400;
  font-size: clamp(44px, 6.5vw, 96px);
  line-height: 0.98;
  letter-spacing: -0.03em;
  margin: 24px 0 20px 0;
  color: var(--ink);
}
.contact__title em { font-style: italic; color: var(--paper); }
.contact__lede {
  max-width: 38ch;
  color: rgba(10,10,10,.72);
  font-size: clamp(15px, 1.2vw, 18px);
  line-height: 1.55;
  margin: 0;
}
.contact__info {
  list-style: none;
  margin: 0;
  padding: 32px 0 0 0;
  display: grid; gap: 18px;
  border-top: 1px solid rgba(0,0,0,.18);
}
.contact__info li {
  display: grid;
  grid-template-columns: 110px 1fr;
  gap: 14px; align-items: baseline;
  font-family: var(--mono);
  font-size: 13px;
}
.contact__lab {
  color: rgba(10,10,10,.5);
  font-size: 11px;
  letter-spacing: 0.16em;
  text-transform: uppercase;
  font-weight: 500;
}
.contact__info a { color: var(--ink); border-bottom: 1px solid transparent; transition: border-color .25s ease; }
.contact__info a:hover { border-bottom-color: var(--ink); }

.contact__right {
  display: flex;
  align-items: center;
  padding: clamp(56px, 8vw, 100px) clamp(32px, 5vw, 72px);
  background: var(--bg);
}
.form { width: 100%; display: grid; gap: clamp(20px, 2.5vw, 28px); }
.form__row { display: grid; gap: 14px; }
.form__row--2 { grid-template-columns: 1fr 1fr; gap: 24px; }
.field { display: grid; gap: 8px; }
.field > span {
  font-family: var(--mono);
  font-size: 11px;
  letter-spacing: 0.12em;
  text-transform: uppercase;
  color: var(--muted);
}
.field input,
.field select,
.field textarea {
  border: 0;
  border-bottom: 1px solid var(--line-2);
  background: transparent;
  padding: 12px 0 14px;
  font: inherit;
  color: var(--ink);
  font-size: 16px;
  outline: 0;
  border-radius: 0;
  font-family: var(--sans);
  transition: border-color .25s ease;
}
.field input:focus,
.field select:focus,
.field textarea:focus { border-bottom-color: var(--ink); }
.field textarea { resize: vertical; min-height: 80px; }
.field select {
  appearance: none;
  background-image: url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' width='12' height='8' viewBox='0 0 12 8'><path fill='%230a0a0a' d='M6 8L0 0h12z'/></svg>");
  background-repeat: no-repeat;
  background-position: right 4px center;
  padding-right: 24px;
  cursor: pointer;
}
.check {
  display: flex; gap: 10px;
  align-items: flex-start;
  font-size: 13px; color: var(--muted);
  line-height: 1.4;
}
.check input { margin-top: 3px; accent-color: var(--accent); }
.hp { position: absolute; left: -9999px; width: 1px; height: 1px; overflow: hidden; }
.form__status {
  margin: 0;
  font-family: var(--mono);
  font-size: 13px;
  min-height: 18px;
}
.form__status.is-ok    { color: #1a7f37; }
.form__status.is-error { color: #c0392b; }

@media (max-width: 980px) {
  .contact { grid-template-columns: 1fr; }
  .contact__pad { min-height: auto; }
  .form__row--2 { grid-template-columns: 1fr; }
}

/* ─── Footer ─── */
.foot {
  padding: clamp(40px, 5vw, 64px) var(--pad);
  border-top: 1px solid var(--line);
  background: var(--bg);
}
.foot__top {
  display: grid;
  grid-template-columns: auto 1fr;
  gap: clamp(20px, 4vw, 56px);
  align-items: end;
  padding-bottom: 32px;
  border-bottom: 1px solid var(--line);
}
.foot__brand {
  display: inline-flex;
  align-items: center;
  gap: 14px;
}
.foot__logo { width: 72px; height: 72px; object-fit: contain; }
.foot__brandname {
  display: inline-flex;
  align-items: baseline;
  gap: 2px;
  font-family: var(--sans);
  font-size: 17px;
  letter-spacing: -0.015em;
  font-weight: 400;
  color: var(--ink);
}
.foot__brandname strong { font-weight: 700; }
.foot__tag {
  margin: 0;
  text-align: right;
  font-family: var(--mono);
  font-size: 12px;
  color: var(--muted);
  line-height: 1.6;
}
.foot__bot {
  display: flex; justify-content: space-between; align-items: center;
  padding-top: 24px;
  font-family: var(--mono);
  font-size: 12px;
  color: var(--muted);
  flex-wrap: wrap; gap: 16px;
}
.foot__nav { display: flex; gap: 20px; flex-wrap: wrap; }
.foot__nav a:hover { color: var(--ink); }
@media (max-width: 720px) {
  .foot__top { grid-template-columns: 1fr; }
  .foot__tag { text-align: left; }
}

/* ─── Scroll-to-top circle (white → lime on hover) ─── */
.totop {
  position: fixed;
  bottom: 28px; right: 28px;
  width: 76px; height: 76px;
  background: var(--bg);
  border: 1px solid var(--line-2);
  border-radius: 50%;
  display: grid; place-items: center;
  z-index: 40;
  color: var(--ink);
  text-decoration: none;
  opacity: 0;
  transform: scale(.8) translateY(12px);
  pointer-events: none;
  transition: opacity .35s var(--ease-out),
              transform .35s var(--ease-out),
              background .3s ease,
              border-color .3s ease,
              box-shadow .3s ease;
}
.totop.is-visible {
  opacity: 1;
  transform: scale(1) translateY(0);
  pointer-events: auto;
}
.totop:hover {
  background: var(--accent);
  border-color: var(--accent);
  box-shadow: 0 16px 36px -14px rgba(var(--accent-rgb),.55);
}
.totop__svg {
  position: absolute; inset: 0;
  width: 100%; height: 100%;
  animation: spin 18s linear infinite;
  color: var(--ink);
}
.totop__arrow {
  position: relative; z-index: 1;
  transition: transform .35s var(--ease-out);
}
.totop:hover .totop__arrow { transform: translateY(-3px); }

@media (max-width: 600px) {
  .totop { width: 60px; height: 60px; bottom: 20px; right: 20px; }
}

/* ─── Lightbox ─── */
.lb {
  position: fixed; inset: 0; z-index: 200;
  background: rgba(10,10,10,.92);
  display: none;
  padding: 24px;
  align-items: center; justify-content: center;
}
.lb.is-open { display: flex; }
.lb__inner {
  position: relative;
  width: 100%; max-width: 1400px;
  aspect-ratio: 16/9;
  border-radius: 12px; overflow: hidden;
  background: #000;
}
.lb__inner iframe { width: 100%; height: 100%; border: 0; }
.lb__close {
  position: absolute;
  top: 18px; right: 22px;
  width: 44px; height: 44px;
  border-radius: 50%;
  background: var(--bg);
  color: var(--ink);
  font-size: 24px; line-height: 1;
  z-index: 2;
  transition: background .2s ease;
}
.lb__close:hover { background: var(--accent); }

/* ─── Char-split reveal (added by JS) ─── */
.split .word {
  display: inline-block;
  white-space: nowrap;        /* keep whole word together — no mid-word breaks */
}
.split .char {
  display: inline-block;
  opacity: 0;
  transform: translateY(0.6em);
  transition: opacity .6s var(--ease-out), transform .8s var(--ease-out);
  transition-delay: calc(var(--i, 0) * 22ms);
}
.split.is-revealed .char { opacity: 1; transform: translateY(0); }

/* ─── Reduced motion ─── */
@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;
  }
  .ticker__track, .hero__stamp, .totop__svg { animation: none; }
  .split .char { opacity: 1; transform: none; }
  .why__card-inner { transform: none; opacity: 1; }
  .pack { transform: none; opacity: 1; }
  .manifesto__track { animation: none; }
}

/* ═══════════════════════════════════════════════════════════════
   Cookie consent banner (bottom-center card)
   ═══════════════════════════════════════════════════════════════ */
.cookie {
  position: fixed;
  left: 50%;
  bottom: 16px;
  z-index: 1500;
  width: min(760px, calc(100% - 32px));
  background: var(--paper);
  border: 1px solid var(--line);
  border-radius: 18px;
  box-shadow: 0 30px 60px rgba(10,10,10,.18), 0 8px 16px rgba(10,10,10,.06);
  padding: 18px 22px;
  font-family: 'IBM Plex Sans', system-ui, sans-serif;
  color: var(--ink);
  transform: translateX(-50%) translateY(140%);
  transition: transform .4s cubic-bezier(.22,.61,.36,1);
}
.cookie.is-visible { transform: translateX(-50%) translateY(0); }
.cookie[hidden] { display: none; }

.cookie__inner {
  display: flex;
  align-items: center;
  gap: 18px;
  flex-wrap: wrap;
}
.cookie__icon {
  flex: 0 0 auto;
  width: 42px;
  height: 42px;
  border-radius: 50%;
  background: var(--accent);
  display: grid;
  place-items: center;
  font-size: 22px;
  line-height: 1;
}
.cookie__text {
  flex: 1 1 280px;
  margin: 0;
  font-size: 13px;
  line-height: 1.55;
  color: var(--ink);
}
.cookie__text strong { font-weight: 600; }
.cookie__text a {
  color: var(--ink);
  text-decoration: underline;
  text-decoration-color: var(--accent);
  text-decoration-thickness: 2px;
  text-underline-offset: 3px;
  transition: background .2s ease;
}
.cookie__text a:hover { background: var(--accent); }
.cookie__actions {
  display: flex;
  gap: 8px;
  flex: 0 0 auto;
}
.cookie__actions .btn {
  font-size: 12px;
  padding: 9px 18px;
  border-radius: 999px;
  white-space: nowrap;
  letter-spacing: .04em;
}

@media (max-width: 640px) {
  .cookie {
    bottom: 8px;
    padding: 16px 18px;
    width: calc(100% - 16px);
    border-radius: 14px;
  }
  .cookie__inner { gap: 12px; }
  .cookie__icon { width: 36px; height: 36px; font-size: 18px; }
  .cookie__text { flex: 1 1 100%; font-size: 12.5px; }
  .cookie__actions { flex: 1 1 100%; }
  .cookie__actions .btn { flex: 1; justify-content: center; }
}

/* ═══════════════════════════════════════════════════════════════
   Legal pages (terms.html / privacy.html)
   ═══════════════════════════════════════════════════════════════ */
.legal {
  max-width: 920px;
  margin: 0 auto;
  padding: clamp(110px, 14vw, 180px) clamp(20px, 5vw, 60px) clamp(80px, 10vw, 120px);
}
.legal__head {
  margin-bottom: clamp(32px, 4vw, 56px);
  padding-bottom: clamp(24px, 3vw, 40px);
  border-bottom: 1px solid var(--line);
}
.legal__head .kicker { color: var(--muted); }
.legal__head h1 {
  font-family: 'Instrument Serif', Georgia, serif;
  font-weight: 400;
  font-size: clamp(44px, 7vw, 84px);
  line-height: 1;
  letter-spacing: -0.02em;
  margin: 14px 0 0;
  color: var(--ink);
}
.legal__head h1 em {
  font-style: italic;
  background: var(--accent);
  padding: 0 .14em;
}
.legal__date {
  font-family: 'IBM Plex Mono', monospace;
  font-size: 11.5px;
  letter-spacing: .14em;
  text-transform: uppercase;
  color: var(--muted);
  margin: 18px 0 0;
}
.legal__intro {
  font-family: 'IBM Plex Sans', system-ui, sans-serif;
  font-size: clamp(15px, 1.6vw, 18px);
  line-height: 1.65;
  color: var(--ink);
  margin: 18px 0 0;
  max-width: 65ch;
}
.legal__toc {
  background: var(--bg);
  border: 1px solid var(--line);
  border-radius: 14px;
  padding: 22px 24px;
  margin: 32px 0;
}
.legal__toc h2 {
  font-family: 'IBM Plex Mono', monospace;
  font-size: 11px;
  letter-spacing: .14em;
  text-transform: uppercase;
  color: var(--muted);
  margin: 0 0 12px;
  font-weight: 500;
}
.legal__toc ol {
  font-family: 'IBM Plex Sans', system-ui, sans-serif;
  font-size: 14px;
  line-height: 1.9;
  margin: 0;
  padding-left: 22px;
  color: var(--ink);
}
.legal__toc a {
  color: var(--ink);
  text-decoration: none;
  border-bottom: 1px solid transparent;
  transition: border-color .2s ease;
}
.legal__toc a:hover { border-bottom-color: var(--accent); }

.legal__section {
  margin: clamp(36px, 4vw, 56px) 0;
  scroll-margin-top: 90px;
}
.legal__section h2 {
  font-family: 'Instrument Serif', Georgia, serif;
  font-weight: 400;
  font-size: clamp(26px, 3vw, 36px);
  line-height: 1.2;
  letter-spacing: -0.01em;
  margin: 0 0 14px;
  color: var(--ink);
}
.legal__section h3 {
  font-family: 'IBM Plex Sans', system-ui, sans-serif;
  font-weight: 600;
  font-size: 16px;
  line-height: 1.4;
  margin: 24px 0 8px;
  color: var(--ink);
}
.legal__section p,
.legal__section li {
  font-family: 'IBM Plex Sans', system-ui, sans-serif;
  font-size: 15px;
  line-height: 1.75;
  color: var(--ink);
  margin: 10px 0;
}
.legal__section ul,
.legal__section ol {
  padding-left: 22px;
  margin: 10px 0;
}
.legal__section li { margin: 6px 0; }
.legal__section a {
  color: var(--ink);
  text-decoration: underline;
  text-decoration-color: var(--accent);
  text-decoration-thickness: 2px;
  text-underline-offset: 3px;
  transition: background .2s ease;
}
.legal__section a:hover { background: var(--accent); }
.legal__section strong { font-weight: 600; }
.legal__section em { font-style: italic; color: var(--muted); }

.legal__callout {
  background: var(--accent);
  color: var(--ink);
  border-radius: 14px;
  padding: 22px 26px;
  margin: 28px 0;
  font-size: 14.5px;
  line-height: 1.65;
}
.legal__callout p { margin: 0; }
.legal__callout strong { font-weight: 600; }

.legal__contact {
  background: var(--ink);
  color: var(--paper);
  border-radius: 16px;
  padding: 28px 30px;
  margin: 40px 0 0;
}
.legal__contact h3 {
  font-family: 'Instrument Serif', Georgia, serif;
  font-weight: 400;
  font-size: 26px;
  margin: 0 0 10px;
  color: var(--paper);
}
.legal__contact p { color: rgba(250,250,247,.85); margin: 4px 0; }
.legal__contact a {
  color: var(--accent);
  text-decoration: underline;
  text-decoration-thickness: 1.5px;
  text-underline-offset: 3px;
}

.legal__back {
  display: inline-flex;
  align-items: center;
  gap: 10px;
  margin-top: 48px;
  font-family: 'IBM Plex Mono', monospace;
  font-size: 11.5px;
  letter-spacing: .14em;
  text-transform: uppercase;
  color: var(--ink);
  text-decoration: none;
  padding: 12px 22px;
  border: 1px solid var(--ink);
  border-radius: 999px;
  transition: background .2s ease, color .2s ease;
}
.legal__back:hover { background: var(--ink); color: var(--paper); }

/* Footer legal nav (next to section nav) */
.foot__legal {
  display: inline-flex;
  gap: 14px;
  margin-left: 14px;
  padding-left: 14px;
  border-left: 1px solid rgba(10,10,10,.15);
}
.foot__legal a {
  font-size: 12px;
  color: var(--muted);
  text-decoration: none;
  transition: color .2s ease;
}
.foot__legal a:hover { color: var(--ink); }
@media (max-width: 720px) {
  .foot__legal {
    margin: 8px 0 0;
    padding: 0;
    border: none;
  }
}