/* ==========================================================================
   Θάλεια Κορατζάνη & Συνεργάτες — Αρχιτεκτονικό Γραφείο
   Design system + motion. Vanilla CSS, no framework.
   ========================================================================== */

/* --- Fonts ---------------------------------------------------------------- */
/* Μία οικογένεια, ένα request. Inter: πλήρες ελληνικό σετ, γεωμετρικός
   σκελετός που δένει με το σήμα. Τα Light βάρη κάνουν τη δουλειά που έκανε
   πριν το serif — «elegant και καθαρή» χωρίς καλλιγραφία.
   Σημ.: Montserrat / Playfair Display / Cormorant Garamond / Cinzel / Lato
   ΔΕΝ έχουν ελληνικά στο Google Fonts. */
/* Φορτώνεται με <link> στο <head> κάθε σελίδας — το @import εδώ θα πρόσθετε
   έναν επιπλέον γύρο αιτήματος πριν καν ξεκινήσει το κατέβασμα της γραμματοσειράς. */

/* --- Tokens --------------------------------------------------------------- */
:root {
  /* Palette — warm limewash + the sage joinery of the Kos restoration */
  --ink:        #14130f;
  --ink-2:      #3a3831;
  --muted:      #6b675c;
  --line:       #d9d3c6;
  --line-soft:  #e6e1d6;
  --paper:      #f3f0e8;
  --paper-2:    #eae5d9;
  --paper-3:    #fbfaf6;
  --sage:       #7c8466;
  --sage-dk:    #5d6349;
  --clay:       #a9633f;

  --sel-bg:     #14130f;
  --sel-fg:     #f3f0e8;

  /* Type */
  --font-display: 'Inter', -apple-system, BlinkMacSystemFont, 'Helvetica Neue', Arial, sans-serif;
  --font-body:    'Inter', -apple-system, BlinkMacSystemFont, 'Helvetica Neue', Arial, sans-serif;

  --fs-display-1: clamp(2.7rem, 7.4vw, 7.1rem);
  --fs-display-2: clamp(2.1rem, 4.6vw, 4.0rem);
  --fs-h2:        clamp(1.65rem, 3.0vw, 2.7rem);
  --fs-h3:        clamp(1.2rem, 1.6vw, 1.55rem);
  --fs-lead:      clamp(1.05rem, 1.4vw, 1.3rem);
  --fs-body:      1.0625rem;
  --fs-small:     0.9375rem;
  --fs-label:     0.6875rem;

  /* Space — spacious scale */
  --s-1: 0.5rem;  --s-2: 0.75rem; --s-3: 1rem;    --s-4: 1.5rem;
  --s-5: 2rem;    --s-6: 3rem;    --s-7: 4rem;    --s-8: 6rem;
  --s-9: 8rem;    --s-10: 11rem;

  --section-y: clamp(5rem, 11vw, 11rem);
  --gutter:    clamp(1.25rem, 5vw, 5rem);
  --maxw:      1560px;
  --measure:   62ch;

  /* Motion */
  --e-out:   cubic-bezier(0.22, 1, 0.36, 1);
  --e-inout: cubic-bezier(0.76, 0, 0.24, 1);
  --e-soft:  cubic-bezier(0.33, 1, 0.68, 1);
  --d-fast:  180ms;
  --d-base:  320ms;
  --d-slow:  760ms;
  --d-reveal: 1150ms;

  /* Το header μένει ΠΑΝΩ από το overlay: το burger είναι το X που το κλείνει. */
  --z-menu:   400;
  --z-header: 500;
  --z-cursor: 900;
  --z-intro:  1000;
}

/* --- Reset ---------------------------------------------------------------- */
*, *::before, *::after { box-sizing: border-box; }
* { margin: 0; }

html {
  -webkit-text-size-adjust: 100%;
  scroll-behavior: smooth;
  /* offset for the fixed header when jumping to #anchors */
  scroll-padding-top: 6rem;
}

body {
  background: var(--paper);
  color: var(--ink);
  font-family: var(--font-body);
  font-size: var(--fs-body);
  line-height: 1.75;
  font-synthesis-weight: none;
  -webkit-font-smoothing: antialiased;
  -moz-osx-font-smoothing: grayscale;
  overflow-x: hidden;
}

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

a { color: inherit; text-decoration: none; }
button { font: inherit; color: inherit; background: none; border: 0; cursor: pointer; }
ul, ol { list-style: none; padding: 0; }

::selection { background: var(--sel-bg); color: var(--sel-fg); }

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

.skip-link {
  position: absolute; left: 50%; top: 0; transform: translate(-50%, -120%);
  z-index: calc(var(--z-intro) + 1);
  background: var(--ink); color: var(--paper);
  padding: 0.75rem 1.25rem; font-size: var(--fs-small);
  transition: transform var(--d-base) var(--e-out);
}
.skip-link:focus { transform: translate(-50%, 0); }

.visually-hidden {
  position: absolute !important; width: 1px; height: 1px;
  padding: 0; margin: -1px; overflow: hidden;
  clip: rect(0 0 0 0); clip-path: inset(50%); white-space: nowrap;
}

/* --- Typography ----------------------------------------------------------- */
h1, h2, h3, h4, .display {
  font-family: var(--font-display);
  font-weight: 300;
  line-height: 1.08;
  letter-spacing: -0.022em;
  text-wrap: balance;
}

.display-1 { font-size: var(--fs-display-1); font-weight: 200; line-height: 1.0; letter-spacing: -0.035em; }
.display-2 { font-size: var(--fs-display-2); font-weight: 200; line-height: 1.04; letter-spacing: -0.03em; }
.h2        { font-size: var(--fs-h2); letter-spacing: -0.025em; }
.h3        { font-size: var(--fs-h3); font-weight: 400; line-height: 1.25; letter-spacing: -0.012em; }

.lead {
  font-size: var(--fs-lead);
  line-height: 1.62;
  color: var(--ink-2);
  max-width: 48ch;
  text-wrap: pretty;
}

.body-text { max-width: var(--measure); color: var(--ink-2); text-wrap: pretty; }
.body-text + .body-text { margin-top: 1.15em; }

.label {
  font-family: var(--font-body);
  font-size: var(--fs-label);
  font-weight: 500;
  letter-spacing: 0.2em;
  text-transform: uppercase;
  color: var(--muted);
  line-height: 1;
}

.serif-em { color: var(--sage-dk); }

.num {
  font-variant-numeric: tabular-nums lining-nums;
  font-feature-settings: 'tnum' 1;
}

/* --- Layout --------------------------------------------------------------- */
.wrap {
  width: 100%;
  max-width: var(--maxw);
  margin-inline: auto;
  padding-inline: var(--gutter);
}

.section { padding-block: var(--section-y); }
.section--tight { padding-block: clamp(3rem, 7vw, 6.5rem); }

.grid { display: grid; grid-template-columns: repeat(12, 1fr); gap: var(--s-4); }

.rule {
  height: 1px; width: 100%;
  background: var(--line);
  transform-origin: left center;
  border: 0;
}

/* --- Header --------------------------------------------------------------- */
.header {
  position: fixed; inset: 0 0 auto 0;
  z-index: var(--z-header);
  padding-block: clamp(1rem, 1.8vw, 1.5rem);
  transition: background var(--d-base) var(--e-soft),
              box-shadow var(--d-base) var(--e-soft),
              padding var(--d-base) var(--e-soft);
}
.header::after {
  content: ''; position: absolute; inset: auto 0 0 0; height: 1px;
  background: var(--line);
  transform: scaleX(0); transform-origin: left;
  transition: transform var(--d-slow) var(--e-out);
}
.header.is-stuck {
  background: color-mix(in srgb, var(--paper) 88%, transparent);
  backdrop-filter: saturate(140%) blur(14px);
  -webkit-backdrop-filter: saturate(140%) blur(14px);
  padding-block: 0.85rem;
}
.header.is-stuck::after { transform: scaleX(1); }

/* Over the hero the header sits on an image whose brightness we don't control,
   so it carries its own scrim — otherwise the mark and the burger disappear
   against a sunlit façade. */
.header.is-over-media:not(.is-stuck) { color: var(--paper-3); }
.header.is-over-media:not(.is-stuck)::before {
  content: ''; position: absolute; inset: 0 0 auto 0; height: 260%;
  z-index: -1; pointer-events: none;
  background: linear-gradient(to bottom, rgba(14,13,10,0.46) 0%, rgba(14,13,10,0.22) 45%, rgba(14,13,10,0) 100%);
}
.header.is-over-media:not(.is-stuck) .nav-link { color: color-mix(in srgb, var(--paper-3) 82%, transparent); }
.header.is-over-media:not(.is-stuck) .nav-link:hover,
.header.is-over-media:not(.is-stuck) .nav-link[aria-current='page'] { color: var(--paper-3); }
.header.is-over-media:not(.is-stuck) .burger-line { background: var(--paper-3); }

.header__inner {
  display: flex; align-items: center; justify-content: space-between;
  gap: var(--s-4);
}

.brand { display: flex; align-items: center; gap: 0.7rem; flex-shrink: 0; }
.brand__mark { width: auto; height: clamp(30px, 3.2vw, 40px); color: currentColor; }
.brand__mark svg { height: 100%; width: auto; }
.brand__text { display: flex; flex-direction: column; gap: 0.18rem; }
.brand__name {
  font-family: var(--font-display);
  font-weight: 500;
  font-size: clamp(0.94rem, 1.1vw, 1.08rem);
  line-height: 1; letter-spacing: -0.005em;
}
.brand__role {
  font-size: 0.5625rem; letter-spacing: 0.22em; text-transform: uppercase;
  color: color-mix(in srgb, currentColor 62%, transparent);
  line-height: 1;
}

.nav { display: flex; align-items: center; gap: clamp(1.25rem, 2.6vw, 2.75rem); }
.nav-list { display: flex; align-items: center; gap: clamp(1.25rem, 2.4vw, 2.5rem); }

.nav-link {
  position: relative;
  font-size: var(--fs-small);
  color: var(--ink-2);
  padding-block: 0.35rem;
  transition: color var(--d-fast) var(--e-soft);
}
.nav-link::after {
  content: ''; position: absolute; left: 0; bottom: 0; height: 1px; width: 100%;
  background: currentColor;
  transform: scaleX(0); transform-origin: right center;
  transition: transform var(--d-base) var(--e-out);
}
.nav-link:hover { color: var(--ink); }
.nav-link:hover::after { transform: scaleX(1); transform-origin: left center; }
.nav-link[aria-current='page'] { color: var(--ink); }
.nav-link[aria-current='page']::after { transform: scaleX(1); }

.btn-ghost {
  display: inline-flex; align-items: center; gap: 0.55rem;
  font-size: var(--fs-small);
  border: 1px solid currentColor;
  padding: 0.62rem 1.35rem;
  border-radius: 100px;
  color: inherit;
  transition: background var(--d-base) var(--e-soft), color var(--d-base) var(--e-soft);
}
.btn-ghost:hover { background: var(--ink); color: var(--paper); border-color: var(--ink); }
.header.is-over-media:not(.is-stuck) .btn-ghost:hover { background: var(--paper-3); color: var(--ink); border-color: var(--paper-3); }

/* Burger */
.burger {
  display: none;
  width: 44px; height: 44px;
  align-items: center; justify-content: center;
  flex-direction: column; gap: 6px;
  margin-right: -10px;
}
.burger-line {
  display: block; width: 24px; height: 1.5px; background: var(--ink);
  transition: transform var(--d-base) var(--e-out), opacity var(--d-fast) linear;
}
.menu-open .burger-line:nth-child(1) { transform: translateY(3.75px) rotate(45deg); }
.menu-open .burger-line:nth-child(2) { transform: translateY(-3.75px) rotate(-45deg); }

/* Με ανοιχτό μενού το header βρίσκεται πάνω από χαρτί, όχι πάνω από εικόνα:
   ό,τι χρώμα είχε πάρει για το hero πρέπει να αναιρεθεί. */
.menu-open .header,
.menu-open .header.is-over-media:not(.is-stuck) { color: var(--ink); background: none; backdrop-filter: none; }
.menu-open .header.is-over-media:not(.is-stuck)::before { display: none; }
.menu-open .header::after { transform: scaleX(0); }
.menu-open .burger-line { background: var(--ink); }

/* --- Overlay menu (mobile / tablet) --------------------------------------- */
.menu {
  position: fixed; inset: 0; z-index: var(--z-menu);
  background: var(--paper);
  display: flex; flex-direction: column; justify-content: center;
  padding: 6rem var(--gutter) 3rem;
  clip-path: inset(0 0 100% 0);
  transition: clip-path var(--d-slow) var(--e-inout);
  visibility: hidden;
}
.menu.is-open { clip-path: inset(0 0 0 0); visibility: visible; }

.menu__list { display: flex; flex-direction: column; gap: 0.35rem; }
.menu__item { overflow: hidden; }
.menu__link {
  display: flex; align-items: baseline; gap: 1rem;
  font-family: var(--font-display);
  font-weight: 250;
  font-size: clamp(2.1rem, 10vw, 3.3rem);
  line-height: 1.22;
  letter-spacing: -0.032em;
  transform: translateY(110%);
  transition: transform var(--d-slow) var(--e-out);
}
.menu.is-open .menu__link { transform: translateY(0); }
.menu.is-open .menu__item:nth-child(1) .menu__link { transition-delay: 90ms; }
.menu.is-open .menu__item:nth-child(2) .menu__link { transition-delay: 150ms; }
.menu.is-open .menu__item:nth-child(3) .menu__link { transition-delay: 210ms; }
.menu.is-open .menu__item:nth-child(4) .menu__link { transition-delay: 270ms; }
.menu.is-open .menu__item:nth-child(5) .menu__link { transition-delay: 330ms; }
.menu__link .num { font-family: var(--font-body); font-size: 0.7rem; color: var(--muted); letter-spacing: 0.14em; }

.menu__foot {
  margin-top: var(--s-7);
  display: flex; flex-wrap: wrap; gap: 0.4rem 2rem;
  opacity: 0; transition: opacity var(--d-slow) var(--e-out) 380ms;
}
.menu.is-open .menu__foot { opacity: 1; }

/* --- Hero ----------------------------------------------------------------- */
.hero {
  position: relative;
  min-height: 100svh;
  display: flex; align-items: flex-end;
  overflow: hidden;
  color: var(--paper-3);
  isolation: isolate;
}
.hero__media {
  position: absolute; inset: 0; z-index: -2;
  overflow: hidden;
  clip-path: inset(7% 9% 7% 9%);
  animation: aperture var(--d-reveal) var(--e-inout) 120ms forwards;
}

/* Το picture() τυλίγει την εικόνα σε .fig χωρίς δικό του ύψος: σε στενές
   οθόνες κατέρρεε στο φυσικό ύψος της φωτογραφίας και το κάτω μισό του hero
   έμενε σκέτο scrim. Εδώ γεμίζει πάντα όλο το hero. */
.hero__media .fig { height: 100%; }
@keyframes aperture { to { clip-path: inset(0% 0% 0% 0%); } }

.hero__media img {
  width: 100%; height: 100%; object-fit: cover;
  transform: scale(1.14);
  animation: heroSettle 2400ms var(--e-out) 120ms forwards;
  will-change: transform;
}
@keyframes heroSettle { to { transform: scale(1); } }

/* Two scrims: one lifts the bottom (headline + cue), one the left column.
   Together they keep white type legible over bright façades. */
.hero::before {
  content: ''; position: absolute; inset: 0; z-index: -1;
  background:
    linear-gradient(to right, rgba(14,13,10,0.50) 0%, rgba(14,13,10,0.20) 38%, rgba(14,13,10,0) 68%),
    linear-gradient(to top, rgba(14,13,10,0.78) 0%, rgba(14,13,10,0.42) 34%, rgba(14,13,10,0.16) 62%, rgba(14,13,10,0.36) 100%);
}

.hero__inner {
  position: relative;
  width: 100%;
  padding-block: clamp(4rem, 9vh, 8rem) clamp(3rem, 7vh, 5.5rem);
}

.hero__label { color: color-mix(in srgb, var(--paper-3) 74%, transparent); margin-bottom: var(--s-4); }
/* Πάνω σε φωτογραφία τα πολύ λεπτά βάρη «σπάνε» — ελάχιστα πιο γεμάτο εδώ,
   χωρίς να χάνεται η ελαφρότητα. */
.hero__title { max-width: 16ch; font-weight: 250; }
.hero__sub {
  margin-top: var(--s-4);
  max-width: 44ch;
  color: color-mix(in srgb, var(--paper-3) 86%, transparent);
  font-size: var(--fs-lead);
  line-height: 1.6;
}

.hero__foot {
  margin-top: clamp(2.5rem, 6vh, 4.5rem);
  display: flex; align-items: flex-end; justify-content: space-between;
  gap: var(--s-5); flex-wrap: wrap;
}

.scroll-cue {
  display: inline-flex; align-items: center; gap: 0.75rem;
  color: color-mix(in srgb, var(--paper-3) 78%, transparent);
}
.scroll-cue__line {
  display: block; width: 54px; height: 1px;
  background: currentColor; transform-origin: left;
  animation: cueSweep 2.4s var(--e-inout) infinite;
}
@keyframes cueSweep {
  0%, 100% { transform: scaleX(0.25); opacity: 0.45; }
  50%      { transform: scaleX(1);    opacity: 1; }
}

/* --- Page head (interior pages) ------------------------------------------- */
.pagehead {
  padding-block: clamp(9rem, 18vh, 13rem) clamp(2.5rem, 6vw, 5rem);
  border-bottom: 1px solid var(--line);
}
.pagehead__label { margin-bottom: var(--s-4); }
.pagehead__title { max-width: 18ch; }
.pagehead__lead { margin-top: var(--s-5); }

/* --- Buttons / links ------------------------------------------------------ */
.btn {
  display: inline-flex; align-items: center; gap: 0.7rem;
  background: var(--ink); color: var(--paper);
  padding: 1rem 1.9rem; border-radius: 100px;
  font-size: var(--fs-small); letter-spacing: 0.01em;
  transition: background var(--d-base) var(--e-soft), transform var(--d-base) var(--e-out);
  will-change: transform;
}
.btn:hover { background: var(--sage-dk); }
.btn__arrow { transition: transform var(--d-base) var(--e-out); }
.btn:hover .btn__arrow { transform: translateX(4px); }

.link-arrow {
  display: inline-flex; align-items: center; gap: 0.6rem;
  font-size: var(--fs-small);
  padding-bottom: 0.3rem;
  position: relative;
}
.link-arrow::after {
  content: ''; position: absolute; left: 0; bottom: 0; height: 1px; width: 100%;
  background: currentColor; transform: scaleX(1); transform-origin: right;
  transition: transform var(--d-base) var(--e-out);
}
.link-arrow:hover::after { transform: scaleX(0); }
.link-arrow svg { transition: transform var(--d-base) var(--e-out); }
.link-arrow:hover svg { transform: translateX(5px); }

/* --- Reveal primitives ----------------------------------------------------
   ΑΡΧΗ: το περιεχόμενο είναι ΠΑΝΤΑ ορατό από προεπιλογή. Οι αποκαλύψεις
   γίνονται με CSS scroll-driven animations (animation-timeline: view()) —
   δηλαδή από τον ίδιο μηχανισμό που κάνει render τη σελίδα. Δεν υπάρχει
   JavaScript στη διαδρομή της ορατότητας, άρα δεν υπάρχει τρόπος να μείνει
   μια φωτογραφία μόνιμα κρυμμένη επειδή κάτι δεν πυροδότησε.
   Σε browser χωρίς υποστήριξη (π.χ. Firefox) απλώς δεν παίζει η κίνηση.
   -------------------------------------------------------------------------- */

.fig {
  position: relative;
  overflow: hidden;
  background: var(--ph, var(--paper-2));
}
.fig img { width: 100%; height: 100%; object-fit: cover; }

.reveal-lines .line { display: block; overflow: hidden; }
.reveal-lines .line > span { display: block; }
.reveal-words .w { display: inline-block; overflow: hidden; vertical-align: top; }
.reveal-words .w > span { display: inline-block; }

@keyframes riseIn   { from { opacity: 0; transform: translateY(28px); } }
@keyframes lineIn   { from { transform: translateY(105%); } }
@keyframes ruleIn   { from { transform: scaleX(0); } }
@keyframes curtain  { from { clip-path: inset(0 0 100% 0); } }
@keyframes imgSettle{ from { transform: scale(1.16); } }

@supports (animation-timeline: view()) {
  [data-reveal] {
    animation: riseIn 1ms linear both;
    animation-timeline: view();
    animation-range: entry 5% entry 45%;
  }
  [data-rule] {
    transform-origin: left center;
    animation: ruleIn 1ms linear both;
    animation-timeline: view();
    animation-range: entry 5% entry 55%;
  }
  .reveal-lines .line > span,
  .reveal-words .w > span {
    animation: lineIn 1ms linear both;
    animation-timeline: view();
    animation-range: entry 10% entry 55%;
  }
  .fig--reveal {
    animation: curtain 1ms linear both;
    animation-timeline: view();
    animation-range: entry 0% entry 55%;
  }
  .fig--reveal img {
    animation: imgSettle 1ms linear both;
    animation-timeline: view();
    animation-range: entry 0% entry 85%;
  }
}

/* Το hero είναι πάντα στην κορυφή της σελίδας: μπαίνει με κίνηση στο load,
   όχι με το scroll. Το animation-timeline:auto ακυρώνει το view() παραπάνω. */
.hero [data-reveal] {
  animation: riseIn 900ms var(--e-out) var(--delay, 0ms) both;
  animation-timeline: auto;
}
.hero .reveal-lines .line > span {
  animation: lineIn 1100ms var(--e-out) var(--delay, 0ms) both;
  animation-timeline: auto;
}

.fig--ratio-3-2  { aspect-ratio: 3 / 2; }
.fig--ratio-2-3  { aspect-ratio: 2 / 3; }
.fig--ratio-4-5  { aspect-ratio: 4 / 5; }
.fig--ratio-1-1  { aspect-ratio: 1 / 1; }
.fig--ratio-4-3  { aspect-ratio: 4 / 3; }
.fig--ratio-16-9 { aspect-ratio: 16 / 9; }

.caption {
  margin-top: 0.85rem;
  font-size: 0.8125rem;
  color: var(--muted);
  line-height: 1.5;
  max-width: 40ch;
}

/* Parallax inner image. No will-change here: promoting a dozen full-width
   photos to their own layers costs more GPU memory than it saves. */
.parallax img { transform: translateZ(0) scale(1.12); }

/* --- Statement ------------------------------------------------------------ */
.statement {
  font-family: var(--font-display);
  font-weight: 250;
  font-size: clamp(1.5rem, 3.4vw, 2.9rem);
  line-height: 1.22;
  letter-spacing: -0.028em;
  max-width: 22ch;
  text-wrap: balance;
}
.statement em { font-style: normal; color: var(--sage-dk); }

/* --- Two-column editorial block ------------------------------------------- */
.editorial { display: grid; gap: var(--s-6) var(--s-5); grid-template-columns: repeat(12, 1fr); align-items: start; }
.editorial__aside { grid-column: 1 / -1; }
.editorial__main  { grid-column: 1 / -1; }

@media (min-width: 900px) {
  .editorial__aside { grid-column: 1 / 5; position: sticky; top: 7.5rem; }
  .editorial__main  { grid-column: 6 / 13; }
}

/* --- Featured project ----------------------------------------------------- */
.feature { display: block; }
.feature__media { position: relative; }
.feature__meta {
  margin-top: var(--s-4);
  display: flex; flex-wrap: wrap; align-items: baseline;
  gap: 0.5rem var(--s-5);
  justify-content: space-between;
}
.feature__title { font-size: clamp(1.45rem, 2.6vw, 2.2rem); font-weight: 300; letter-spacing: -0.028em; }

/* Σε στενή οθόνη ο τίτλος και η τοποθεσία δεν χωράνε δίπλα-δίπλα: η
   τοποθεσία έβγαινε εκτός οθόνης. Εδώ στοιβάζονται. */
@media (max-width: 760px) {
  .feature__meta { flex-direction: column; align-items: flex-start; gap: 0.45rem; }
  .feature__meta .label { max-width: 100%; }
}

.feature:hover .feature__media img { transform: scale(1.035); }
.feature__media img { transition: transform 1400ms var(--e-out); }

.feature__underline {
  display: block; height: 1px; background: var(--line); margin-top: var(--s-4);
  transform-origin: left; transform: scaleX(1);
  transition: background var(--d-base) var(--e-soft);
}
.feature:hover .feature__underline { background: var(--ink); }

/* --- Services rows -------------------------------------------------------- */
.srv-list { border-top: 1px solid var(--line); }
.srv-row {
  position: relative;
  display: grid;
  grid-template-columns: auto 1fr auto;
  align-items: center;
  gap: var(--s-3) var(--s-5);
  padding-block: clamp(1.5rem, 3.4vw, 2.6rem);
  border-bottom: 1px solid var(--line);
  transition: padding-inline var(--d-slow) var(--e-out);
}
.srv-row__num { font-size: var(--fs-label); letter-spacing: 0.18em; color: var(--muted); }
.srv-row__title {
  font-family: var(--font-display);
  font-weight: 300;
  font-size: clamp(1.25rem, 2.6vw, 2.15rem);
  line-height: 1.16; letter-spacing: -0.028em;
  text-wrap: balance;
}
.srv-row__go { color: var(--muted); transition: transform var(--d-base) var(--e-out), color var(--d-base) var(--e-soft); }

@media (hover: hover) and (min-width: 900px) {
  .srv-row:hover { padding-inline: 1.5rem; }
  .srv-row::before {
    content: ''; position: absolute; inset: 0; z-index: -1;
    background: var(--paper-2);
    transform: scaleY(0); transform-origin: bottom;
    transition: transform var(--d-slow) var(--e-out);
  }
  .srv-row:hover::before { transform: scaleY(1); transform-origin: top; }
  .srv-row:hover .srv-row__go { transform: translateX(6px); color: var(--ink); }
}

/* Cursor-following preview for service rows (desktop only) */
.srv-peek {
  position: fixed; top: 0; left: 0;
  width: 250px; aspect-ratio: 3 / 4;
  z-index: 320;
  pointer-events: none;
  opacity: 0;
  overflow: hidden;
  transform: translate3d(-50%, -50%, 0) scale(0.9);
  transition: opacity 420ms var(--e-out), transform 620ms var(--e-out);
}
.srv-peek.is-on { opacity: 1; transform: translate3d(-50%, -50%, 0) scale(1); }
.srv-peek img { width: 100%; height: 100%; object-fit: cover; }

/* --- Timeline ------------------------------------------------------------- */
.timeline { display: grid; gap: var(--s-5); grid-template-columns: 1fr; }
@media (min-width: 760px) { .timeline { grid-template-columns: repeat(3, 1fr); gap: var(--s-6); } }

.tl-item { border-top: 1px solid var(--line); padding-top: var(--s-4); }
.tl-item__year {
  font-family: var(--font-display);
  font-weight: 200;
  font-size: clamp(2.4rem, 5.4vw, 4.0rem);
  line-height: 1.0; letter-spacing: -0.045em;
  font-variant-numeric: lining-nums tabular-nums;
}
.tl-item__text { margin-top: var(--s-3); color: var(--ink-2); max-width: 30ch; font-size: var(--fs-small); }

/* --- Marquee -------------------------------------------------------------- */
.marquee {
  overflow: hidden;
  border-block: 1px solid var(--line);
  padding-block: clamp(1.1rem, 2.2vw, 1.7rem);
  --marquee-duration: 46s;
}
.marquee__track {
  display: flex; width: max-content;
  animation: marquee var(--marquee-duration) linear infinite;
}
.marquee:hover .marquee__track { animation-play-state: paused; }
@keyframes marquee { to { transform: translate3d(-50%, 0, 0); } }

.marquee__group { display: flex; align-items: center; flex-shrink: 0; }
.marquee__item {
  display: inline-flex; align-items: center; gap: clamp(1.5rem, 3vw, 3rem);
  padding-inline: clamp(0.75rem, 1.5vw, 1.5rem);
  font-family: var(--font-display);
  font-weight: 300;
  font-size: clamp(1rem, 1.8vw, 1.6rem);
  letter-spacing: -0.01em;
  white-space: nowrap;
}
.marquee__dot { width: 5px; height: 5px; border-radius: 50%; background: var(--sage); flex-shrink: 0; }

/* --- Gallery (project detail) --------------------------------------------- */
.gal { display: grid; grid-template-columns: repeat(12, 1fr); gap: var(--gutter); }
.gal > * { grid-column: 1 / -1; }

@media (min-width: 760px) {
  .gal-full   { grid-column: 1 / -1; }
  .gal-wide   { grid-column: 2 / 12; }
  .gal-left   { grid-column: 1 / 8; }
  .gal-right  { grid-column: 6 / 13; }
  .gal-half-l { grid-column: 1 / 7; }
  .gal-half-r { grid-column: 7 / 13; }
  .gal-narrow { grid-column: 3 / 11; }
  .gal-inset-l{ grid-column: 2 / 7; }
  .gal-inset-r{ grid-column: 8 / 13; }
  .gal-offset { margin-top: clamp(3rem, 8vw, 9rem); }
}

/* Off-screen gallery figures are skipped entirely. On a 34-image project page
   this is the difference between a smooth scroll and a stuttering one.
   The aspect-ratio on .fig gives a deterministic intrinsic size, so nothing
   jumps as figures enter and leave. */
.gal > figure { content-visibility: auto; contain-intrinsic-size: auto 60vh; }

.gal-counter {
  position: fixed; right: var(--gutter); bottom: 2rem;
  z-index: 300;
  font-size: var(--fs-label); letter-spacing: 0.2em;
  color: var(--muted);
  display: flex; align-items: center; gap: 0.55rem;
  padding: 0.5rem 0.85rem;
  background: color-mix(in srgb, var(--paper) 82%, transparent);
  backdrop-filter: blur(10px);
  -webkit-backdrop-filter: blur(10px);
  border-radius: 100px;
  opacity: 0; transform: translateY(10px);
  transition: opacity var(--d-base) var(--e-soft), transform var(--d-base) var(--e-out);
}
.gal-counter.is-on { opacity: 1; transform: none; }

/* --- Πριν / Μετά ---------------------------------------------------------
   Σε έργο «αισθητικής αναβάθμισης όψεων» το πριν/μετά ΕΙΝΑΙ η δουλειά:
   χωρίς αυτό ο επισκέπτης δεν βλέπει τι έγινε. Δίπλα-δίπλα και όχι slider,
   γιατί οι λήψεις δεν έχουν το ίδιο κάδρο — ένας slider θα έδειχνε λάθος
   αντιστοίχιση. Στοιβάζεται σε στενή οθόνη. */
.ba { display: grid; gap: var(--s-4); grid-template-columns: 1fr; }
@media (min-width: 760px) { .ba { grid-template-columns: 1fr 1fr; gap: clamp(1rem, 2vw, 2rem); } }

.ba__item { position: relative; }
.ba__tag {
  position: absolute; top: 0; left: 0; z-index: 2;
  background: var(--ink); color: var(--paper);
  font-size: var(--fs-label); font-weight: 500;
  letter-spacing: 0.2em; text-transform: uppercase;
  padding: 0.5rem 0.9rem;
}
.ba__item--after .ba__tag { background: var(--sage-dk); }
.ba__cap { margin-top: 0.75rem; font-size: 0.8125rem; color: var(--muted); }

/* --- Spec table ----------------------------------------------------------- */
.spec { border-top: 1px solid var(--line); }
.spec__row {
  display: grid; gap: 0.25rem var(--s-5);
  grid-template-columns: 1fr;
  padding-block: var(--s-3);
  border-bottom: 1px solid var(--line-soft);
}
@media (min-width: 620px) { .spec__row { grid-template-columns: 12rem 1fr; } }

/* Στη στενή sticky στήλη του έργου το δίστηλο spec στριμώχνει τις τιμές —
   εκεί μένει σε μία στήλη. */
.editorial__aside .spec__row { grid-template-columns: 1fr; gap: 0.35rem; }
.editorial__aside .spec__key { padding-top: 0; }
.spec__key { font-size: var(--fs-label); letter-spacing: 0.18em; text-transform: uppercase; color: var(--muted); padding-top: 0.35rem; }
.spec__val { color: var(--ink-2); }

/* --- Contact -------------------------------------------------------------- */
.contact-lines { display: grid; gap: var(--s-5); }
.contact-line { border-top: 1px solid var(--line); padding-top: var(--s-3); }
.contact-line__val {
  font-family: var(--font-display);
  font-weight: 300;
  font-size: clamp(1.25rem, 2.8vw, 2.2rem);
  line-height: 1.2; letter-spacing: -0.028em;
  display: inline-block; position: relative;
  overflow-wrap: anywhere;
}
a.contact-line__val::after {
  content: ''; position: absolute; left: 0; bottom: 0.08em; height: 1px; width: 100%;
  background: currentColor; transform: scaleX(0); transform-origin: right;
  transition: transform var(--d-base) var(--e-out);
}
a.contact-line__val:hover::after { transform: scaleX(1); transform-origin: left; }

/* --- CTA band ------------------------------------------------------------- */
.cta {
  background: var(--ink); color: var(--paper);
  padding-block: clamp(5rem, 12vw, 10rem);
}
.cta .label { color: color-mix(in srgb, var(--paper) 72%, transparent); }
.cta .btn { background: var(--paper); color: var(--ink); }
.cta .btn:hover { background: var(--sage); color: var(--ink); }

/* --- Footer --------------------------------------------------------------- */
.footer { padding-block: var(--s-7) var(--s-5); border-top: 1px solid var(--line); }
.footer__grid { display: grid; gap: var(--s-6) var(--s-5); grid-template-columns: 1fr; }
@media (min-width: 760px) { .footer__grid { grid-template-columns: 2fr 1fr 1fr; } }
.footer__list { display: grid; gap: 0.55rem; font-size: var(--fs-small); }
.footer__list a { color: var(--ink-2); transition: color var(--d-fast) var(--e-soft); }
.footer__list a:hover { color: var(--ink); }
.footer__bottom {
  margin-top: var(--s-7); padding-top: var(--s-3);
  border-top: 1px solid var(--line-soft);
  display: flex; flex-wrap: wrap; gap: 0.5rem var(--s-4); justify-content: space-between;
  font-size: 0.8125rem; color: var(--muted);
}

/* --- Scroll progress ------------------------------------------------------ */
.progress {
  position: fixed; inset: 0 0 auto 0; height: 2px; z-index: calc(var(--z-header) + 1);
  background: var(--sage-dk);
  transform: scaleX(0); transform-origin: left;
  will-change: transform;
}

/* --- Custom cursor (fine pointers only) ----------------------------------- */
.cursor, .cursor-dot {
  position: fixed; top: 0; left: 0; z-index: var(--z-cursor);
  pointer-events: none; border-radius: 50%;
  opacity: 0;
  will-change: transform;
}
.cursor {
  width: 38px; height: 38px;
  border: 1px solid var(--ink);
  margin: -19px 0 0 -19px;
  transition: width 380ms var(--e-out), height 380ms var(--e-out),
              margin 380ms var(--e-out), opacity 260ms linear,
              background 380ms var(--e-out), border-color 380ms var(--e-out);
  display: grid; place-items: center;
}
.cursor__label {
  font-size: 0.5625rem; letter-spacing: 0.16em; text-transform: uppercase;
  color: var(--paper); opacity: 0; transition: opacity 220ms linear;
  white-space: nowrap;
}
.cursor-dot { width: 5px; height: 5px; margin: -2.5px 0 0 -2.5px; background: var(--ink); }

.cursor.is-on, .cursor-dot.is-on { opacity: 1; }
.cursor.is-link { width: 64px; height: 64px; margin: -32px 0 0 -32px; background: color-mix(in srgb, var(--ink) 12%, transparent); }
.cursor.is-view {
  width: 96px; height: 96px; margin: -48px 0 0 -48px;
  background: var(--ink); border-color: var(--ink);
}
.cursor.is-view .cursor__label { opacity: 1; }
.cursor.is-view + .cursor-dot { opacity: 0; }
.cursor.is-light { border-color: var(--paper-3); }
.cursor.is-light + .cursor-dot { background: var(--paper-3); }

@media (hover: none), (pointer: coarse) {
  .cursor, .cursor-dot, .srv-peek { display: none !important; }
}

/* --- Intro overlay --------------------------------------------------------
   ΚΡΙΣΙΜΟ: το overlay φεύγει μόνο του, με CSS animation. Παλιότερα το
   απέσυρε JavaScript — που σημαίνει ότι αν το script δεν φόρτωνε (404,
   λάθος MIME type, σφάλμα), το πανί έμενε πάνω από ΟΛΟ το site για πάντα
   και ο επισκέπτης έβλεπε κενή σελίδα. Τώρα το JS μόνο επιταχύνει.
   -------------------------------------------------------------------------- */
.intro {
  position: fixed; inset: 0; z-index: var(--z-intro);
  display: grid; place-items: center;
  pointer-events: none;
  animation: introGone 1ms linear 2.95s forwards;
}
@keyframes introGone { to { visibility: hidden; } }

.intro__panel {
  position: absolute; left: 0; right: 0; height: 50.2%;
  background: var(--paper);
}
.intro__panel--t { top: 0;    animation: introUp   1000ms var(--e-inout) 2s forwards; }
.intro__panel--b { bottom: 0; animation: introDown 1000ms var(--e-inout) 2s forwards; }
@keyframes introUp   { to { transform: translateY(-101%); } }
@keyframes introDown { to { transform: translateY(101%); } }

.intro__mark {
  position: relative;
  width: clamp(74px, 12vw, 120px);
  color: var(--ink);
  animation: introMarkOut 420ms var(--e-soft) 2s forwards;
}
@keyframes introMarkOut { to { opacity: 0; transform: scale(0.94); } }

/* Το «ζωγράφισμα» χρειάζεται το --len που υπολογίζει το JS. Χωρίς JS η
   γραμμή απλώς εμφανίζεται συμπαγής — και το πανί φεύγει κανονικά. */
.intro__mark path { stroke-dasharray: var(--len); stroke-dashoffset: var(--len); }
.intro.is-drawing .intro__mark path { animation: draw 1250ms var(--e-inout) forwards; }
.intro.is-drawing .intro__mark path:nth-child(1) { animation-delay: 60ms; }
.intro.is-drawing .intro__mark path:nth-child(2) { animation-delay: 330ms; }
.intro.is-drawing .intro__mark path:nth-child(3) { animation-delay: 460ms; }
.intro.is-drawing .intro__mark path:nth-child(4) { animation-delay: 580ms; }
@keyframes draw { to { stroke-dashoffset: 0; } }

.intro[hidden] { display: none; }

/* --- View transitions (progressive enhancement) --------------------------- */
@view-transition { navigation: auto; }

::view-transition-old(root) { animation: vtOut 260ms var(--e-soft) both; }
::view-transition-new(root) { animation: vtIn 460ms var(--e-out) both; }
@keyframes vtOut { to { opacity: 0; } }
@keyframes vtIn  { from { opacity: 0; } }

::view-transition-group(project-cover) { animation-duration: 720ms; animation-timing-function: cubic-bezier(0.76, 0, 0.24, 1); }
::view-transition-old(project-cover),
::view-transition-new(project-cover) { animation: none; mix-blend-mode: normal; height: 100%; overflow: clip; }
::view-transition-old(project-cover) { object-fit: cover; }
::view-transition-new(project-cover) { object-fit: cover; }

/* --- Responsive nav ------------------------------------------------------- */
@media (max-width: 979px) {
  .nav-list, .nav .btn-ghost { display: none; }
  .burger { display: flex; }
}
@media (min-width: 980px) {
  .menu { display: none; }
}

/* --- Utilities ------------------------------------------------------------ */
.stack-1 > * + * { margin-top: var(--s-3); }
.stack-2 > * + * { margin-top: var(--s-4); }
.stack-3 > * + * { margin-top: var(--s-5); }
.stack-4 > * + * { margin-top: var(--s-6); }
.stack-5 > * + * { margin-top: var(--s-7); }

.mt-4 { margin-top: var(--s-6); }
.mt-5 { margin-top: var(--s-7); }
.mt-6 { margin-top: var(--s-8); }

.text-muted { color: var(--muted); }
.text-center { text-align: center; }

/* Mobile-first: κάθε στήλη πιάνει όλο το πλάτος μέχρι τα 900px. Χωρίς αυτό
   οι κάρτες auto-place-άρονται σε 1/12 του πλέγματος. */
.col-full, .col-6-l, .col-6-r, .col-7-l, .col-5-r, .col-8-c { grid-column: 1 / -1; }
@media (min-width: 900px) {
  .col-6-l { grid-column: 1 / 7; }
  .col-6-r { grid-column: 7 / 13; }
  .col-7-l { grid-column: 1 / 8; }
  .col-5-r { grid-column: 8 / 13; }
  .col-8-c { grid-column: 3 / 11; }
}

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

  *, *::before, *::after {
    animation-duration: 1ms !important;
    animation-iteration-count: 1 !important;
    transition-duration: 1ms !important;
    scroll-behavior: auto !important;
  }

  .hero__media { clip-path: none; animation: none; }
  .hero__media img { transform: none; animation: none; }

  /* Το `animation: none` παραπάνω αρκεί: χωρίς κίνηση, όλα μένουν στην
     τελική (ορατή) τους κατάσταση, γιατί αυτή είναι πλέον η προεπιλογή. */
  [data-reveal], [data-rule],
  .reveal-lines .line > span, .reveal-words .w > span,
  .fig--reveal, .fig--reveal img { animation: none !important; }

  .marquee__track { animation: none; }
  .scroll-cue__line { animation: none; transform: scaleX(1); }
  .cursor, .cursor-dot, .srv-peek { display: none !important; }
  .intro { display: none !important; }

  @view-transition { navigation: none; }
}