/* Clarion Business Centre — one photographic scene per beat, the red dot as the only ornament. */

:root {
  --red: #C0202F;
  --red-deep: #9C1A26;
  --ink: #16130F;
  --ink-soft: #4A443C;
  --ground: #FAF8F5;
  --ground-deep: #F1EDE7;
  --line: #DDD6CC;
  --white: #FFFFFF;
  /* Both faces carry Latin and Greek, so EN/EL render in one type system.
     Verified against the served Google Fonts CSS rather than assumed:
     Marcellus and Hanken Grotesk were dropped earlier because neither ships
     Greek and headings silently fell back to Times. Russian was removed in
     Sept 2026, so Cyrillic is no longer a constraint. */
  --font-display: "Manrope", "Helvetica Neue", Arial, sans-serif;
  --font-body: "Commissioner", "Helvetica Neue", Arial, sans-serif;
  /* The wordmark is the logo, not body typography: it keeps the original
     serif so the brand mark is untouched by the type change. */
  --font-wordmark: "EB Garamond", "Times New Roman", serif;
  /* Hero scrim colour as raw RGB channels, so the three-layer gradient reads
     one value instead of repeating it nine times. Warm near-black: the
     anthracite variants were built, reviewed and rejected. */
  --scrim-rgb: 12, 10, 8;
  --ease-out: cubic-bezier(0.16, 1, 0.3, 1);
  /* One vertical rhythm for every section — the client asked for more air
     between them. Tune it here, never per-section. The scale is a rem floor
     plus a vw slope, so it keeps shrinking through laptop widths instead of
     hitting its ceiling at 1280px the way a pure-vw clamp did: a 13" screen
     no longer gets the same 160px gaps as a 27" monitor. */
  --section-pad: clamp(4rem, 2.25rem + 5.6vw, 10rem);
  --container: 1200px;
  --gutter: clamp(1.25rem, 4vw, 3rem);
}

*, *::before, *::after { box-sizing: border-box; }

html { scroll-behavior: smooth; }

body {
  margin: 0;
  font-family: var(--font-body);
  font-size: 1rem;
  line-height: 1.65;
  color: var(--ink);
  background: var(--ground);
  caret-color: var(--red);
  -webkit-font-smoothing: antialiased;
}

::selection { background: var(--red); color: var(--white); }

body::-webkit-scrollbar { width: 10px; }
body::-webkit-scrollbar-track { background: var(--ground-deep); }
body::-webkit-scrollbar-thumb { background: var(--ink-soft); border-radius: 5px; border: 2px solid var(--ground-deep); }

img { max-width: 100%; display: block; }
/* Responsive <picture> wrappers must not add a box of their own: the <img>
   keeps sizing against the slide, card or figure exactly as before. The hero
   picture is the exception — it is the positioned media layer. */
picture:not(.hero-media) { display: contents; }

h1, h2, h3 { margin: 0; font-family: var(--font-display); font-weight: 700; text-wrap: balance; }

p { margin: 0 0 1rem; }
p:last-child { margin-bottom: 0; }

a { color: var(--red); text-decoration-thickness: 1px; text-underline-offset: 0.2em; }
a:hover { color: var(--red-deep); }

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

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

.skip-link {
  position: absolute; left: 0.75rem; top: 0.75rem; z-index: 100;
  background: var(--ink); color: var(--white); padding: 0.6rem 1rem;
  text-decoration: none; transform: translateY(-300%);
  transition: transform 0.2s var(--ease-out);
}
.skip-link:focus-visible { transform: none; color: var(--white); }

/* ---------- Buttons ---------- */

.btn {
  display: inline-flex; align-items: center; justify-content: center;
  font-family: var(--font-body); font-weight: 600; font-size: 0.8125rem;
  letter-spacing: 0.14em; text-transform: uppercase; text-decoration: none;
  padding: 0.9rem 1.6rem; border: 1px solid transparent; cursor: pointer;
  transition: background-color 0.25s var(--ease-out), color 0.25s var(--ease-out),
              border-color 0.25s var(--ease-out), transform 0.25s var(--ease-out);
}
.btn:active { transform: translateY(1px); }
.btn-lg { padding: 1.05rem 2rem; font-size: 0.875rem; }

.btn-primary { background: var(--red); color: var(--white); }
.btn-primary:hover { background: var(--red-deep); color: var(--white); }

.btn-ghost { border-color: rgba(255, 255, 255, 0.6); color: var(--white); }
.btn-ghost:hover { border-color: var(--white); background: rgba(255, 255, 255, 0.12); color: var(--white); }

.btn-outline { border-color: var(--ink); color: var(--ink); }
.btn-outline:hover { background: var(--ink); color: var(--white); }

/* ---------- Wordmark ---------- */

.wordmark {
  display: inline-flex; flex-direction: column; align-items: center;
  text-decoration: none; color: inherit; line-height: 1;
}
.wordmark:hover { color: inherit; }
.wordmark-name {
  font-family: var(--font-wordmark); font-size: 1.5rem; letter-spacing: 0.06em;
}
.wordmark-i { position: relative; }
.wordmark-i::after {
  content: ""; position: absolute; left: 50%; top: -0.34em;
  width: 0.34em; height: 0.34em; border-radius: 50%;
  background: var(--red); transform: translateX(-50%);
}
.wordmark-rule {
  width: 100%; height: 2px; background: var(--red); margin: 0.28em 0 0.3em;
}
.wordmark-sub {
  font-family: var(--font-body); font-size: 0.5rem; font-weight: 600;
  letter-spacing: 0.52em; text-transform: uppercase; text-indent: 0.52em;
}

/* ---------- Header ---------- */

.site-header {
  position: fixed; inset: 0 0 auto 0; z-index: 50;
  color: var(--white);
  transition: background-color 0.3s var(--ease-out), color 0.3s var(--ease-out),
              box-shadow 0.3s var(--ease-out);
}
.header-inner {
  display: flex; align-items: center; justify-content: space-between;
  gap: 1.5rem; padding: 0.9rem var(--gutter);
  max-width: 1400px; margin-inline: auto;
}
/* Over the photo, every mark in the bar is white and sits on its own scrim */
.site-header::before {
  content: ""; position: absolute; inset: 0; z-index: -1;
  background: linear-gradient(to bottom, rgba(12, 10, 8, 0.5), rgba(12, 10, 8, 0));
  transition: opacity 0.3s var(--ease-out);
}
.site-header.scrolled::before { opacity: 0; }
.site-header .wordmark-name,
.site-header .wordmark-sub { color: var(--white); }
.site-header.scrolled .wordmark-name,
.site-header.scrolled .wordmark-sub { color: var(--ink); }

.site-header.scrolled {
  background: rgba(250, 248, 245, 0.94);
  -webkit-backdrop-filter: blur(10px); backdrop-filter: blur(10px);
  color: var(--ink);
  box-shadow: 0 1px 0 var(--line);
}

/* ---------- Announcement bar ----------
   Built by main.js from js/announcement.js, only while one is showing.
   The bar is in normal flow; .header-dock is a zero-height sticky box that
   carries the header, so the header starts under the bar and pins to the top
   of the viewport once the bar has scrolled away. */
.announcement { background: var(--ink); color: var(--ground); }
.announcement-inner {
  max-width: 1400px; margin: 0 auto; padding: 0.7rem var(--gutter); list-style: none;
  display: flex; flex-wrap: wrap; align-items: baseline; justify-content: center;
  gap: 0.3rem 2.5rem; text-align: center;
  font-size: 1.0625rem; line-height: 1.45;
}
.announcement-item { display: flex; flex-wrap: wrap; align-items: baseline; justify-content: center; gap: 0.15rem 1rem; }
.announcement-text::before {
  content: ""; display: inline-block; width: 0.45em; height: 0.45em;
  margin-right: 0.6em; border-radius: 50%; background: var(--red);
  vertical-align: 0.12em;
}
.announcement a { color: var(--white); font-weight: 600; white-space: nowrap; }
.announcement a:hover { color: var(--white); text-decoration-color: var(--red); }
.header-dock { position: sticky; top: 0; height: 0; z-index: 50; }
.header-dock .site-header { position: absolute; }
/* Keep the bar above the full-screen mobile menu so the header isn't left
   floating beneath an empty strip. */
body.menu-open .announcement { position: relative; z-index: 51; }

.site-nav { display: none; }

.header-cta { display: none; }

.menu-toggle {
  display: inline-flex; flex-direction: column; justify-content: center; gap: 7px;
  width: 48px; height: 48px; padding: 12px;
  background: transparent; border: 0; cursor: pointer; color: inherit;
}
.menu-toggle-bar {
  display: block; width: 24px; height: 2px; background: currentColor;
  transition: transform 0.3s var(--ease-out);
}
.menu-toggle[aria-expanded="true"] .menu-toggle-bar:nth-child(1) { transform: translateY(4.5px) rotate(45deg); }
.menu-toggle[aria-expanded="true"] .menu-toggle-bar:nth-child(2) { transform: translateY(-4.5px) rotate(-45deg); }

/* ---------- Language switch ---------- */

/* The brief pins the mobile header to CLARION + hamburger, so the switch lives
   inside the menu there. Legal pages have no menu, so it stays in their bar. */
.site-header .lang-switch { display: none; }
.legal-page .site-header .lang-switch { display: flex; margin-left: auto; }

.lang-switch { display: flex; align-items: center; gap: 0.1rem; }
.lang-switch button {
  position: relative;
  font-family: var(--font-body); font-size: 0.75rem; font-weight: 600;
  letter-spacing: 0.1em; text-transform: uppercase;
  color: inherit; background: transparent; border: 0; cursor: pointer;
  padding: 0.7rem 0.45rem; opacity: 0.68;
  transition: opacity 0.25s var(--ease-out);
}
.lang-switch button:hover { opacity: 1; }
/* The dot marks the active language, as it marks everything else */
.lang-switch button::after {
  /* Centred by half its own width in rem rather than translateX(-50%), so the
     scale animation stays on the compositor. */
  content: ""; position: absolute; left: calc(50% - 0.15rem); bottom: 0.3rem;
  width: 0.3rem; height: 0.3rem; border-radius: 50%; background: var(--red);
  transform: scale(0);
  transition: transform 0.25s var(--ease-out);
}
.lang-switch button.is-active { opacity: 1; }
.lang-switch button.is-active::after { transform: scale(1); }

.lang-switch-mobile {
  display: flex; flex-wrap: wrap; gap: 0.5rem;
  margin-top: 1.6rem; padding-top: 1.5rem; border-top: 1px solid var(--line);
}
.lang-switch-mobile button {
  flex: 1 1 auto; min-height: 52px;
  font-size: 0.8125rem; letter-spacing: 0.06em; text-transform: none;
  border: 1px solid var(--line); color: var(--ink); opacity: 1;
  padding-bottom: 1.1rem;
}
.lang-switch-mobile button.is-active { border-color: var(--ink); }

/* ---------- Cookie notice ----------
   The site sets no tracking cookies, so this states a fact and is dismissed.
   It is not a consent gate, and it never blocks the page. */

.cookie-notice {
  position: fixed; z-index: 46;
  left: 1rem; right: 1rem; bottom: calc(0.9rem + env(safe-area-inset-bottom));
  background: var(--ink); color: var(--ground);
  padding: 1.15rem 1.3rem;
  display: flex; flex-direction: column; gap: 0.95rem;
  box-shadow: 0 12px 34px rgba(22, 19, 15, 0.32);
  /* A fixed rem offset, not a percentage: a box-relative translate can't run
     on the compositor. Hidden it is invisible anyway, so it only needs to
     drop a little, and must not catch clicks meant for the page below. */
  transform: translateY(2rem); opacity: 0; pointer-events: none;
  transition: transform 0.45s var(--ease-out), opacity 0.45s var(--ease-out);
}
.cookie-notice.visible { transform: none; opacity: 1; pointer-events: auto; }
/* The open menu ends in the language switch, which the notice would sit on top
   of — exactly what a first-time Greek visitor came to the menu for. */
body.menu-open .cookie-notice {
  opacity: 0; visibility: hidden; pointer-events: none;
  transform: translateY(2rem);
}
.cookie-notice p { margin: 0; font-size: 0.9375rem; line-height: 1.55; max-width: 70ch; }
.cookie-actions { display: flex; align-items: center; gap: 1.3rem; flex-wrap: wrap; }
.cookie-actions a {
  font-size: 0.8125rem; font-weight: 600;
  letter-spacing: 0.12em; text-transform: uppercase;
  text-underline-offset: 0.3em; text-decoration-color: var(--red);
}
.cookie-actions .btn { padding: 0.8rem 1.6rem; }

/* ---------- Legal pages ---------- */

.legal-page { background: var(--ground); }
.legal { padding: 7.5rem 0 clamp(4rem, 9vw, 6.5rem); }
.legal-inner {
  max-width: 68ch; margin-inline: auto; padding-inline: var(--gutter);
}
.legal-back {
  display: inline-flex; align-items: center; color: var(--ink-soft);
  font-size: 0.8125rem; font-weight: 600; letter-spacing: 0.12em;
  text-transform: uppercase; text-decoration: none; margin-bottom: 2.6rem;
}
.legal-back:hover { color: var(--red); }
.legal-back .arrow { transition: transform 0.3s var(--ease-out); }
.legal-back:hover .arrow { transform: translateX(-4px); }
.legal h1 {
  font-size: clamp(2.1rem, 5vw, 3.2rem); line-height: 1.12;
  letter-spacing: 0.02em; margin-bottom: 0.7rem;
}
.legal-updated {
  color: var(--ink-soft); font-size: 0.8125rem; font-weight: 600;
  letter-spacing: 0.12em; text-transform: uppercase; margin-bottom: 2rem;
}
.legal-lede {
  font-size: 1.1875rem; line-height: 1.6; color: var(--ink);
  padding-bottom: 2rem; margin-bottom: 0; border-bottom: 1px solid var(--line);
}
.legal h2 {
  font-size: clamp(1.25rem, 2.4vw, 1.5rem); letter-spacing: 0.04em;
  margin: 2.8rem 0 0.9rem;
}
.legal h2::after {
  content: "\2060";   /* word joiner: see .section-title::after */
  padding-left: calc(0.4rem + 0.4em);
  background: radial-gradient(circle closest-side, var(--red) 96%, transparent)
              right 0 bottom 0.42em / 0.4rem 0.4rem no-repeat;
}
.legal p { color: var(--ink-soft); margin-bottom: 1.1rem; }
.legal-crosslink {
  margin-top: 3.5rem; padding-top: 1.6rem; border-top: 1px solid var(--line);
}
.legal-crosslink a {
  font-size: 0.8125rem; font-weight: 600; letter-spacing: 0.12em; text-transform: uppercase;
}

/* ---------- Mobile menu ---------- */

.mobile-menu {
  position: fixed; inset: 0; z-index: 40;
  background: var(--ground);
  display: flex; align-items: center;
  padding: 5.5rem var(--gutter) 3rem;
  opacity: 0; visibility: hidden;
  transition: opacity 0.3s var(--ease-out), visibility 0.3s;
}
.mobile-menu.open { opacity: 1; visibility: visible; }
.mobile-menu nav { width: 100%; }
.mobile-menu ul { list-style: none; margin: 0 0 2.5rem; padding: 0; }
.mobile-menu li + li { border-top: 1px solid var(--line); }
.mobile-menu ul a {
  display: flex; align-items: center; gap: 0.9rem;
  font-family: var(--font-display); font-size: 2rem; color: var(--ink);
  text-decoration: none; padding: 1.1rem 0.25rem;
}
.mobile-menu ul a::before {
  content: ""; width: 0.5rem; height: 0.5rem; border-radius: 50%;
  background: var(--red); flex: none;
  transform: scale(0); transition: transform 0.25s var(--ease-out);
}
.mobile-menu ul a:hover::before,
.mobile-menu ul a:focus-visible::before { transform: scale(1); }
.mobile-menu-cta { width: 100%; padding-block: 1.15rem; }

body.menu-open { overflow: hidden; }

/* ---------- Hero ---------- */

.hero {
  position: relative; min-height: 100svh;
  display: flex; align-items: flex-end;
  color: var(--white); overflow: hidden;
}
.hero-media, .hero-media img {
  position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover;
}
.js .hero-media img { animation: hero-settle 2.6s var(--ease-out) both; }
@keyframes hero-settle {
  from { transform: scale(1.07); }
  to { transform: scale(1); }
}
/* The facade is pale, so white display type needs a real scrim. The first wash is
   directional: it darkens the lower-left text column and releases the road and
   treetops on the right, so the photograph still reads as a photograph. */
.hero-scrim {
  position: absolute; inset: 0;
  background:
    linear-gradient(to top right, rgba(var(--scrim-rgb), 0.94) 0%, rgba(var(--scrim-rgb), 0.86) 30%, rgba(var(--scrim-rgb), 0.5) 55%, rgba(var(--scrim-rgb), 0) 82%),
    linear-gradient(to top, rgba(var(--scrim-rgb), 0.82) 0%, rgba(var(--scrim-rgb), 0.45) 34%, rgba(var(--scrim-rgb), 0) 66%),
    linear-gradient(to bottom, rgba(var(--scrim-rgb), 0.6) 0%, rgba(var(--scrim-rgb), 0.16) 16%, rgba(var(--scrim-rgb), 0) 30%);
}

.hero-content {
  position: relative; width: 100%; max-width: 1400px; margin-inline: auto;
  padding: 0 var(--gutter) clamp(4rem, 11svh, 7.5rem);
}
.hero h1 {
  /* Sized by height as well as width: laptops are wide but short, and a
     width-only clamp gave a 1280x720 screen the full 84px headline, which
     filled a third of the first view. */
  font-size: clamp(2.25rem, min(1rem + 4.2vw, 8.6svh), 5.25rem);
  line-height: 1.06; letter-spacing: -0.025em;
  /* 20ch holds the English headline to its two-line composition and lets the
     longer Greek setting run to three. */
  max-width: 20ch;
  text-shadow: 0 2px 28px rgba(12, 10, 8, 0.6);
}
/* The break is a desktop composition; below that the heading balances itself */
.hero-break { display: none; }
.js .hero h1, .js .hero-sub, .js .hero-actions {
  animation: hero-rise 1.1s var(--ease-out) both;
}
.js .hero-sub { animation-delay: 0.15s; }
.js .hero-actions { animation-delay: 0.3s; }
@keyframes hero-rise {
  from { opacity: 0; transform: translateY(1.4rem); }
  to { opacity: 1; transform: none; }
}
.hero-sub {
  margin: 1.4rem 0 0; font-size: clamp(1rem, 0.85rem + 0.4vw, 1.25rem);
  line-height: 1.55; max-width: 44ch; color: rgba(255, 255, 255, 0.92);
}
.hero-actions { display: flex; flex-wrap: wrap; gap: 0.9rem; margin-top: 2.1rem; }

.hero-cue {
  position: absolute; left: 50%; bottom: 1.4rem; transform: translateX(-50%);
  width: 44px; height: 44px; border: 1px solid rgba(255, 255, 255, 0.45); border-radius: 50%;
  display: none; align-items: center; justify-content: center;
}
.hero-cue-dot { width: 8px; height: 8px; border-radius: 50%; background: var(--red); }
.js .hero-cue-dot { animation: cue-drift 2.2s var(--ease-out) infinite; }
@keyframes cue-drift {
  0%, 100% { transform: translateY(-3px); }
  50% { transform: translateY(3px); }
}

/* On a narrow viewport the text column is the full width, so the wash is vertical
   rather than diagonal, and it has to reach further up to carry the headline. */
@media (max-width: 799px) {
  .hero-scrim {
    background:
      linear-gradient(to top, rgba(12, 10, 8, 0.92) 0%, rgba(12, 10, 8, 0.84) 42%, rgba(12, 10, 8, 0.68) 62%, rgba(12, 10, 8, 0.34) 82%, rgba(12, 10, 8, 0.12) 100%),
      linear-gradient(to bottom, rgba(12, 10, 8, 0.55) 0%, rgba(12, 10, 8, 0) 22%);
  }
  .site-header::before {
    background: linear-gradient(to bottom, rgba(12, 10, 8, 0.72), rgba(12, 10, 8, 0.28) 70%, rgba(12, 10, 8, 0));
  }
}

/* ---------- Intro ---------- */

.intro { padding: var(--section-pad) 0; }
.intro-grid { display: grid; gap: 2.5rem; }
.intro-statement {
  font-size: clamp(1.45rem, 0.95rem + 1.6vw, 2.5rem);
  line-height: 1.28; letter-spacing: -0.015em; max-width: 24ch;
}
.intro-facts { max-width: 52ch; color: var(--ink-soft); }
.intro-facts p { margin-bottom: 1.1rem; }

/* ---------- Section titles ---------- */

.section-title {
  font-size: clamp(1.75rem, 1.1rem + 1.6vw, 2.9rem);
  letter-spacing: -0.02em; line-height: 1.08;
  margin-bottom: clamp(1.5rem, 0.9rem + 1.8vw, 3rem);
}
.section-title::after {
  /* Inline, not a flex sibling: as a flex item the wrapped text took the full
     line width and pushed the dot to the far edge of the column. The content
     is a word joiner (U+2060), so the dot can never wrap away from the last
     word onto a line of its own; the dot itself is painted as a background. */
  content: "\2060";
  padding-left: calc(0.55rem + 0.2em);
  background: radial-gradient(circle closest-side, var(--red) 96%, transparent)
              right 0 bottom 0.36em / 0.55rem 0.55rem no-repeat;
}

/* ---------- Spaces ---------- */

.spaces { padding: 0 0 var(--section-pad); }
.spaces-grid { display: grid; gap: clamp(2.2rem, 5vw, 2.5rem); }

.space-card {
  display: flex; flex-direction: column;
  color: var(--ink); text-decoration: none;
}
.space-card-title {
  display: block;
  /* 600, not the 400 inherited from the serif era: a grotesque set in caps at
     0.1em needs weight to hold its own beside 700 section titles. Steps are
     700 display / 700 headline / 600 title / 400 body. */
  font-family: var(--font-display); font-size: clamp(1.125rem, 0.8rem + 0.55vw, 1.45rem);
  font-weight: 600;
  letter-spacing: 0.1em; text-transform: uppercase; line-height: 1.15;
  padding-bottom: 0.8rem;
}
/* The dot is a plain inline box holding a word joiner, painted with a
   background — not an inline-block, which Chrome will wrap onto a line of its
   own ("ΑΙΘΟΥΣΕΣ ΣΥΣΚΕΨΕΩΝ" in a quarter column did). Hover grows the painted
   dot, since transforms don't apply to inline boxes. */
.space-card-title .dot::before { content: "\2060"; }
.space-card-title .dot {
  padding-left: calc(0.5rem + 0.55rem);
  background: radial-gradient(circle closest-side, var(--red) 96%, transparent)
              right 0 center / 0.5rem 0.5rem no-repeat;
  transition: background-size 0.3s var(--ease-out);
}
.space-card:hover .space-card-title .dot { background-size: 0.72rem 0.72rem; }
.space-card-media {
  display: block; overflow: hidden; aspect-ratio: 4 / 3; background: var(--ground-deep);
}
.space-card-media img {
  width: 100%; height: 100%; object-fit: cover;
  transition: transform 0.8s var(--ease-out);
}
.space-card:hover .space-card-media img,
.space-card:focus-visible .space-card-media img { transform: scale(1.045); }
.space-card-body { display: block; padding-top: 1rem; }
.space-card-text { display: block; color: var(--ink-soft); max-width: 46ch; }
.space-card-cta {
  display: inline-flex; align-items: center; margin-top: 0.8rem;
  font-weight: 600; font-size: 0.8125rem; letter-spacing: 0.14em; text-transform: uppercase;
  color: var(--red);
}
.space-card-cta .arrow { transition: transform 0.3s var(--ease-out); }
.space-card:hover .space-card-cta .arrow { transform: translateX(4px); }

/* Cards whose media isn't a single link but a browsable carousel: the
   title and body stay separate clickable links inside a plain container. */
.space-card-carousel { cursor: default; }
.space-card-carousel .space-card-title,
.space-card-carousel .space-card-body { color: inherit; text-decoration: none; cursor: pointer; }

.space-card-media.carousel { position: relative; }
.carousel-track {
  display: flex; width: 100%; height: 100%; margin: 0; padding: 0; list-style: none;
  transition: transform 0.5s var(--ease-out);
}
.carousel-slide { flex: 0 0 100%; width: 100%; height: 100%; cursor: pointer; }
.carousel-slide img { width: 100%; height: 100%; object-fit: cover; display: block; }
@media (prefers-reduced-motion: reduce) { .carousel-track { transition: none; } }

.carousel-btn {
  position: absolute; top: 50%; transform: translateY(-50%);
  width: 2.25rem; height: 2.25rem; border-radius: 50%; z-index: 2;
  display: flex; align-items: center; justify-content: center;
  background: rgba(255, 255, 255, 0.85); color: var(--ink);
  border: none; cursor: pointer; font-size: 1rem; line-height: 1; padding: 0;
  opacity: 0.85; transition: opacity 0.2s ease, background 0.2s ease;
}
.carousel-btn:hover, .carousel-btn:focus-visible { opacity: 1; background: var(--white); }
.carousel-prev { left: 0.6rem; }
.carousel-next { right: 0.6rem; }


.carousel-dots {
  position: absolute; left: 0; right: 0; bottom: 0.35rem; z-index: 2;
  display: flex; justify-content: center; align-items: center;
}
.carousel-dot {
  width: 1.5rem; height: 1.5rem; padding: 0; border: none; background: none; cursor: pointer;
  display: flex; align-items: center; justify-content: center;
}
.carousel-dot::before {
  content: ""; width: 0.4rem; height: 0.4rem; border-radius: 50%;
  background: rgba(255, 255, 255, 0.55);
  transition: background 0.2s ease, transform 0.2s ease;
}
.carousel-dot.is-active::before { background: var(--white); transform: scale(1.4); }
/* Touch targets are binding in this system (DESIGN.md, Layout). The carousel
   arrows measured 36px and the dots 24px — both under 44. On coarse pointers
   the hit areas grow to 44px; the visible arrow glyph and the dot ornament
   are untouched, so The One Ornament Rule still holds. */
@media (pointer: coarse) {
  .carousel-btn { width: 2.75rem; height: 2.75rem; }
  .carousel-dot { width: 2.75rem; height: 2.75rem; }
  .carousel-dots { bottom: 0; }
}

.spaces-note {
  margin-top: clamp(2rem, 4vw, 2.8rem);
  padding-top: 1.2rem;
  border-top: 1px solid var(--line);
  color: var(--ink-soft);
  /* The Measured Column Rule: supporting text runs 44-46ch. The rule above
     still spans the grid; only the sentence is measured. */
  max-width: 46ch;
}

/* ---------- Gallery ---------- */

.gallery { padding: 0; }
.gallery-strip {
  display: grid; grid-auto-flow: column;
  grid-auto-columns: 78%;
  gap: 0.75rem;
  overflow-x: auto; scroll-snap-type: x mandatory;
  padding-inline: var(--gutter);
  scrollbar-width: none;
}
.gallery-strip::-webkit-scrollbar { display: none; }
.gallery-item { margin: 0; scroll-snap-align: center; }
.gallery-item img { width: 100%; height: auto; aspect-ratio: 3 / 2; object-fit: cover; }

/* ---------- Services ---------- */

.services { background: var(--ink); color: var(--ground); padding: var(--section-pad) 0; }
.services a, .site-footer a, .cookie-notice a { color: var(--ground); }
.services a:hover, .site-footer a:hover, .cookie-notice a:hover { color: var(--white); }
.services .section-title { color: var(--white); }
.services-grid { display: grid; gap: clamp(2rem, 4vw, 2.5rem); }
.services-lede { color: #C9C2B6; max-width: 40ch; font-size: 1.0625rem; }
.services-list {
  list-style: none; margin: 0; padding: 0;
  display: grid; gap: 0;
}
.services-list li {
  display: flex; align-items: center; gap: 0.9rem;
  padding: 0.95rem 0.25rem;
  border-top: 1px solid rgba(250, 248, 245, 0.16);
  font-size: 1.0625rem;
}
.services-list li:last-child { border-bottom: 1px solid rgba(250, 248, 245, 0.16); }
.services-list li::before {
  content: ""; width: 0.45rem; height: 0.45rem; border-radius: 50%;
  background: var(--red); flex: none;
}

/* ---------- Building Services (client change 11: their copy had no home on
   the site, and the new kitchen photographs had nowhere to go) ---------- */
.building { padding: var(--section-pad) 0; }
.building-grid { display: grid; gap: clamp(2.5rem, 5vw, 4rem); align-items: center; }
.building-body p { max-width: 52ch; color: var(--ink-soft); margin-bottom: 1.1rem; }
.building-lede {
  font-family: var(--font-display); font-weight: 600;
  font-size: clamp(1.1rem, 0.9rem + 0.5vw, 1.4rem); line-height: 1.35;
  color: var(--ink) !important; max-width: 40ch; margin-bottom: 1.6rem !important;
}
.building-closing {
  font-family: var(--font-display); font-weight: 700;
  letter-spacing: -0.01em; color: var(--ink) !important; margin-top: 1.6rem;
}
/* The kitchen photos are one carousel, built exactly like the space cards'
   (same markup, same script, same lightbox). The frame stays landscape at
   every width so it sits level with the text column beside it; the
   four-across portrait rule for the space cards doesn't reach it. */
.building-media .space-card-media { aspect-ratio: 4 / 3; }

@media (min-width: 900px) {
  .building-grid { grid-template-columns: 1fr 1.1fr; gap: clamp(3rem, 5vw, 5rem); }
}

/* ---------- About ---------- */

.about { display: grid; }
.about-media { overflow: hidden; }
.about-lede {
  font-family: var(--font-display); font-weight: 600;
  font-size: clamp(1.1rem, 0.9rem + 0.5vw, 1.4rem); line-height: 1.35;
  color: var(--ink); max-width: 40ch; margin-bottom: 1.6rem;
}
.about-closing {
  font-family: var(--font-display); font-weight: 700;
  letter-spacing: -0.01em; color: var(--ink); margin-top: 1.6rem;
}
/* Keep the Clarion building, which sits at the left edge of the frame, in shot */
.about-media img { width: 100%; height: 100%; object-fit: cover; object-position: left center; aspect-ratio: 4 / 3; }
.about-body {
  background: var(--ground-deep);
  padding: clamp(3rem, 1.5rem + 5vw, 6.9rem) var(--gutter);
  display: flex; flex-direction: column; justify-content: center; align-items: flex-start;
}
.about-body p { max-width: 52ch; color: var(--ink-soft); margin-bottom: 1.1rem; }
.about-body .btn { margin-top: 1.4rem; }

/* ---------- Contact ---------- */

/* ---------- Location (client change 5: "a clear section with Nicosia /
   address / map / Get Directions") ---------- */
.location { padding: var(--section-pad) 0; background: var(--ground-deep); }
.location-grid { display: grid; gap: clamp(2.5rem, 6vw, 4.5rem); align-items: start; }
.location-body p { max-width: 52ch; color: var(--ink-soft); margin-bottom: 1.1rem; }
.location-lede {
  font-family: var(--font-display); font-weight: 600;
  font-size: clamp(1.1rem, 0.9rem + 0.5vw, 1.4rem); line-height: 1.35;
  color: var(--ink) !important; max-width: 40ch;
  margin-bottom: 1.6rem !important;
}
.location-closing {
  font-family: var(--font-display); font-weight: 700;
  letter-spacing: -0.01em; color: var(--ink) !important;
  margin-top: 1.6rem;
}
.location-address {
  display: block; font-style: normal; margin-top: 2rem;
  padding-top: 1.4rem; border-top: 1px solid var(--line);
}
.location-address-label {
  display: block; font-family: var(--font-body); font-size: 0.75rem;
  font-weight: 600; letter-spacing: 0.14em; text-transform: uppercase;
  color: var(--ink-soft); margin-bottom: 0.4rem;
}
.location-directions {
  display: inline-flex; flex-direction: column; align-items: flex-start;
  gap: 0.15rem; margin-top: 1.6rem; text-align: left;
}
.location-directions-hint {
  font-size: 0.6875rem; letter-spacing: 0.06em; text-transform: none;
  opacity: 0.8; font-weight: 400;
}
.location-media { display: block; }
/* A real Google map, so people recognise it. It is an iframe, which means
   third-party cookies — privacy.html says so and _headers allows the frame.
   Reverting to a cookie-free static image means undoing both. */
.location-map {
  display: block; width: 100%; aspect-ratio: 4 / 3;
  border: 1px solid var(--line); filter: grayscale(0.15);
}
/* The placeholder stands in for the map until the visitor asks for it, and
   holds the same footprint so nothing jumps when the iframe replaces it. */
.location-map-consent {
  display: grid; place-content: center; justify-items: center; gap: 1.1rem;
  width: 100%; aspect-ratio: 4 / 3;
  padding: clamp(1.5rem, 4vw, 2.5rem);
  text-align: center;
  background: var(--ground);
  border: 1px solid var(--line);
}
.location-map-note { max-width: 36ch; color: var(--ink-soft); font-size: 0.9375rem; margin: 0; }

@media (min-width: 900px) {
  .location-grid { grid-template-columns: 1fr 1.05fr; gap: clamp(3rem, 5vw, 5rem); }
  .location-map,
  .location-map-consent { aspect-ratio: 3 / 4; max-height: 42rem; }
}

.contact { padding: var(--section-pad) 0 calc(var(--section-pad) * 1.1); }
.contact-grid { display: grid; gap: clamp(2.5rem, 5vw, 3rem); }
.contact-lede { color: var(--ink-soft); max-width: 40ch; font-size: 1.0625rem; }
.contact-details { margin: 2.2rem 0 0; display: grid; gap: 1.2rem; }
.contact-details div { border-top: 1px solid var(--line); padding-top: 1rem; }
.contact-details dt {
  font-size: 0.75rem; font-weight: 700; letter-spacing: 0.16em; text-transform: uppercase;
  color: var(--ink-soft); margin-bottom: 0.2rem;
}
.contact-details dd { margin: 0; font-size: 1.0625rem; }
.contact-details a { color: var(--ink); }
.contact-details a:hover { color: var(--red); }
.contact-secondary { color: var(--ink-soft); font-size: 0.9375rem; }

/* Social links: one icon row, used in the contact details and the footer.
   Each link is a 44px target; the icons take the surrounding text colour. */
.social-links { list-style: none; margin: 0; padding: 0; display: flex; flex-wrap: wrap; gap: 0.6rem; }
.social-links a {
  display: grid; place-items: center; width: 2.75rem; height: 2.75rem;
  border: 1px solid var(--line); border-radius: 50%;
  transition: color 0.2s, border-color 0.2s, background-color 0.2s;
}
.social-links svg { fill: currentColor; }
.contact-details .social-links { margin-top: 0.35rem; }
.contact-details .social-links a:hover { color: var(--white); background: var(--red); border-color: var(--red); }
.footer-social a { border-color: rgba(250, 248, 245, 0.28); }
.footer-social a:hover { color: var(--white); background: var(--red); border-color: var(--red); }
.contact-inline { color: var(--ink); }

.placeholder-line { font-style: normal; }
.placeholder-line, .placeholder-line a {
  text-decoration-line: underline; text-decoration-style: dashed;
  text-decoration-color: rgba(192, 32, 47, 0.5);
  text-decoration-thickness: 1px; text-underline-offset: 0.25em;
}

/* Change 6 asked for a simpler, more conversion-friendly form. No field was
   removed (the client also asked to ADD one), so the work is in the reading:
   more air between fields, quieter labels, and larger tap targets. */
.tour-form { display: grid; gap: 1.6rem; align-content: start; }
.field { display: grid; gap: 0.5rem; }
.field-row { display: grid; gap: 1.6rem; }
.field label {
  /* 0.16em caps at 700 shouted at every field. Sentence case, lighter and
     wider-set, reads as a question rather than a form header. */
  font-size: 0.8125rem; font-weight: 600; letter-spacing: 0.01em;
  text-transform: none; color: var(--ink);
}
.field .optional { color: var(--ink-soft); font-weight: 400; letter-spacing: 0; text-transform: none; font-size: 0.75rem; }
.field input, .field select, .field textarea {
  font: inherit; color: var(--ink); background: var(--white);
  border: 1px solid var(--line); border-radius: 0;
  padding: 0.95rem 1rem; width: 100%;   /* 48px tall: comfortable on touch */
  transition: border-color 0.2s var(--ease-out), box-shadow 0.2s var(--ease-out);
}
.field input::placeholder, .field textarea::placeholder { color: #837C71; }
.field input:focus-visible, .field select:focus-visible, .field textarea:focus-visible {
  outline: none; border-color: var(--red); box-shadow: 0 0 0 3px rgba(192, 32, 47, 0.15);
}
.field textarea { resize: vertical; min-height: 6.5rem; }
.field select {
  appearance: none; -webkit-appearance: none;
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='12' height='8'%3E%3Cpath d='M1 1l5 5 5-5' fill='none' stroke='%2316130F' stroke-width='1.5'/%3E%3C/svg%3E");
  background-repeat: no-repeat; background-position: right 0.9rem center;
  padding-right: 2.4rem;
}
.field input[aria-invalid="true"] { border-color: var(--red); }
.form-error { color: var(--red); font-weight: 600; margin: 0; }
.form-success { color: var(--ink); font-weight: 600; margin: 0; }
.form-note { color: var(--ink-soft); font-size: 0.875rem; margin: 0; max-width: 46ch; }

/* ---------- Photo lightbox (client change 4: clicking a card photo should
   open it larger, centred on screen) ---------- */
.lightbox {
  border: 0; padding: 0; background: transparent;
  width: min(92vw, 1500px); max-width: none;
  max-height: 92vh; overflow: visible;
  display: none;
}
.lightbox[open] { display: grid; grid-template-columns: auto 1fr auto; align-items: center; gap: clamp(0.5rem, 2vw, 1.5rem); }
.lightbox::backdrop { background: rgba(12, 10, 8, 0.95); }
.lightbox-figure { margin: 0; min-width: 0; width: 100%; display: grid; gap: 0.9rem; justify-items: center; }
/* The point of the request is that the photo gets BIG. Sizing it `auto` left it
   at its natural pixel size — barely larger than the card. It now fills the
   available space, with object-fit keeping the aspect ratio honest. */
.lightbox-img {
  display: block; width: 100%; height: auto;
  max-height: 80vh; object-fit: contain; background: var(--ink);
}
.lightbox-caption {
  color: #C9C2B6; font-size: 0.875rem; line-height: 1.45;
  max-width: 70ch; text-align: center; text-wrap: balance;
}
.lightbox-close, .lightbox-nav {
  background: transparent; border: 1px solid rgba(250, 248, 245, 0.35);
  color: var(--white); cursor: pointer; border-radius: 0;
  display: grid; place-items: center; flex: none;
  transition: background-color 0.2s var(--ease-out), border-color 0.2s var(--ease-out);
}
.lightbox-nav { width: 3rem; height: 3rem; font-size: 1.15rem; }
.lightbox-close {
  position: fixed; top: clamp(0.75rem, 2vw, 1.5rem); right: clamp(0.75rem, 2vw, 1.5rem);
  width: 2.75rem; height: 2.75rem; font-size: 1.6rem; line-height: 1;
}
.lightbox-close:hover, .lightbox-nav:hover { background: rgba(250, 248, 245, 0.14); border-color: var(--white); }
.lightbox-close:focus-visible, .lightbox-nav:focus-visible { outline: 2px solid var(--red); outline-offset: 3px; }
/* A single-photo card has nothing to step through. */
.lightbox[data-single="true"] .lightbox-nav { visibility: hidden; }

/* The media area is the click target, so say so. */
.space-card-media { cursor: zoom-in; }

@media (max-width: 640px) {
  .lightbox[open] { grid-template-columns: 1fr; }
  .lightbox-nav { position: fixed; bottom: 1.25rem; }
  .lightbox-prev { left: 1.25rem; }
  .lightbox-next { right: 1.25rem; }
  .lightbox-img { max-height: 68vh; }
}

@media (prefers-reduced-motion: no-preference) {
  .lightbox[open] { animation: lightbox-in 0.22s var(--ease-out) both; }
  @keyframes lightbox-in { from { opacity: 0; transform: scale(0.985); } to { opacity: 1; transform: none; } }
}

/* ---------- Footer ---------- */

.site-footer { background: var(--ink); color: var(--ground); padding: clamp(3.5rem, 2rem + 5vw, 6.9rem) 0 2.5rem; }
.footer-grid { display: grid; gap: 2rem; justify-items: start; }
.wordmark-footer .wordmark-sub { color: #C9C2B6; }
.footer-nav ul { list-style: none; margin: 0; padding: 0; display: flex; flex-wrap: wrap; gap: 1.6rem; }
.footer-nav a {
  color: var(--ground); text-decoration: none;
  font-size: 0.8125rem; font-weight: 600; letter-spacing: 0.14em; text-transform: uppercase;
}
.footer-nav a:hover { color: var(--white); text-decoration: underline; text-underline-offset: 0.3em; text-decoration-color: var(--red); }
.footer-meta { color: #C9C2B6; margin: 0; }
.footer-meta.placeholder-line { text-decoration-color: rgba(192, 32, 47, 0.6); }
.footer-copy { color: #8F887C; font-size: 0.875rem; margin: 0; }

/* ---------- Sticky mobile CTA ---------- */

.sticky-cta {
  position: fixed; z-index: 45;
  left: 1rem; right: 1rem; bottom: calc(0.9rem + env(safe-area-inset-bottom));
  display: flex; align-items: center; justify-content: center;
  background: var(--red); color: var(--white);
  font-weight: 700; font-size: 0.875rem; letter-spacing: 0.16em; text-transform: uppercase;
  text-decoration: none; padding: 1.05rem 1.5rem;
  box-shadow: 0 10px 30px rgba(22, 19, 15, 0.28);
  /* rem offset rather than a percentage, for the same reason as the cookie notice */
  transform: translateY(2rem); opacity: 0; pointer-events: none;
  transition: transform 0.4s var(--ease-out), opacity 0.4s var(--ease-out), background-color 0.25s var(--ease-out);
}
.sticky-cta.visible { transform: none; opacity: 1; pointer-events: auto; }
.sticky-cta:hover { background: var(--red-deep); color: var(--white); }
.sticky-cta .arrow { transition: transform 0.3s var(--ease-out); }
.sticky-cta:hover .arrow { transform: translateX(4px); }

/* ---------- Reveal on scroll ---------- */

.js .reveal { opacity: 0; transform: translateY(1.6rem); transition: opacity 0.8s var(--ease-out), transform 0.8s var(--ease-out); }
.js .reveal.in { opacity: 1; transform: none; }

/* ---------- Desktop ---------- */

@media (min-width: 800px) {
  /* Side by side, the photos must start at the same height. "Business Services"
     wraps to two lines where the others do not — and more so in Greek, where
     "Επιχειρηματικές Υπηρεσίες" is longer again — so every title reserves two
     lines and sits at the bottom of that space, hugging its photo. */
  .space-card-title { min-height: calc(2.3em + 0.8rem); align-content: end; }  /* 2 lines + its own padding (border-box) */

  .cookie-notice {
    left: auto; right: 1.25rem; bottom: 1.25rem; max-width: 34rem;
  }

  .hero-cue { display: flex; }
  .hero-break { display: inline; }

  /* Two across (800-1149px) the columns are wide, and a portrait frame there
     made each photo taller than a tablet or small laptop screen. Landscape
     until the four-across row, where the narrow column takes the portrait. */
  .space-card-media { aspect-ratio: 4 / 3; }

  .intro-grid { grid-template-columns: 1.1fr 0.9fr; gap: clamp(2.5rem, 5vw, 4rem); align-items: start; }

  /* Four cards, not three (the client asked for a Business Services card).
     2x2 beats 4-across at this container width: the photos stay large, which
     matters now that the photo itself is the thing you click. */
  /* Two across from 800px; all four land on one line at 1150px, which is where
     a quarter column is still wide enough for the card text to read. */
  .spaces-grid { grid-template-columns: repeat(2, 1fr); }

  .services-grid { grid-template-columns: 0.9fr 1.1fr; gap: clamp(2.5rem, 5vw, 4rem); }
  /* Closes the bottom of both columns: the last two DOM items always land
     one per column, whatever the total count */
  .services-list { grid-template-columns: 1fr 1fr; column-gap: 3rem; }
  .services-list li:nth-last-child(2) { border-bottom: 1px solid rgba(250, 248, 245, 0.16); }

  /* Full-bleed photographic band: the building speaks at page width */
  .gallery-strip {
    grid-auto-columns: unset;
    grid-auto-flow: row; grid-template-columns: repeat(5, 1fr);
    gap: 0; overflow: visible;
    max-width: none; padding-inline: 0;
  }
  .gallery-item img { aspect-ratio: 1 / 1; }

  .about { grid-template-columns: 1.05fr 0.95fr; }
  .about-media img { aspect-ratio: auto; }

  .contact-grid { grid-template-columns: 0.9fr 1.1fr; gap: clamp(3rem, 6vw, 5rem); }
  .field-row { grid-template-columns: 1fr 1fr; }

  .footer-grid {
    grid-template-columns: auto 1fr; align-items: center;
  }
  .footer-nav { justify-self: end; }
  .footer-meta { grid-column: 1 / -1; }
  .footer-social { grid-column: 1 / -1; }
  .footer-copy { grid-column: 1 / -1; }
}

/* The full desktop bar takes over at 960px, not 800: five nav links, the
   language switch and the CTA don't fit narrower than that (the Greek labels
   overflowed up to ~900px). Portrait tablets (810-834px) keep the phone header
   - CLARION + menu, with the sticky Book a Tour bar - while the page grids
   still open at 800. */
@media (min-width: 960px) {
  .site-nav { display: block; margin-left: auto; margin-right: 0.5rem; }
  .site-nav ul { list-style: none; display: flex; gap: clamp(1.1rem, 0.2rem + 1.6vw, 2rem); margin: 0; padding: 0; }
  .site-nav a {
    position: relative; display: inline-flex; align-items: center;
    color: inherit; text-decoration: none;
    font-size: 0.8125rem; font-weight: 600; letter-spacing: 0.14em; text-transform: uppercase;
    padding: 0.5rem 0;
  }
  .site-nav a::after {
    content: ""; position: absolute; left: calc(50% - 0.2rem); bottom: -0.1rem;
    width: 0.4rem; height: 0.4rem; border-radius: 50%; background: var(--red);
    transform: scale(0);
    transition: transform 0.25s var(--ease-out);
  }
  .site-nav a:hover::after, .site-nav a:focus-visible::after { transform: scale(1); }

  .header-cta { display: inline-flex; white-space: nowrap; }
  .menu-toggle, .mobile-menu { display: none; }
  .sticky-cta { display: none; }

  .site-header .lang-switch { display: flex; }
}

/* Between 960 and 1100px the bar is still tight, and the Greek labels run
   longer: pull the tracking and the CTA's side padding in a little. */
@media (min-width: 960px) and (max-width: 1099px) {
  .header-inner { gap: 1rem; }
  .site-nav a { font-size: 0.75rem; letter-spacing: 0.1em; }
  .header-cta { padding-inline: 1.1rem; letter-spacing: 0.1em; }
  .site-header .lang-switch button { padding-inline: 0.35rem; }
}

/* All four cards on one line. The gap tightens because a quarter of the
   container is narrower than a third was. */
@media (min-width: 1150px) {
  .spaces-grid { grid-template-columns: repeat(4, 1fr); gap: clamp(1.4rem, 2.2vw, 2rem); }
  /* The photograph is the argument: a portrait frame that fills the column */
  .space-card-media { aspect-ratio: 4 / 5; }
}

@media (min-width: 1080px) {
  .wordmark-name { font-size: 1.65rem; }
}

/* ---------- Reduced motion ---------- */

@media (prefers-reduced-motion: reduce) {
  html { scroll-behavior: auto; }
  .js .hero-media img, .js .hero h1, .js .hero-sub, .js .hero-actions, .js .hero-cue-dot { animation: none; }
  .js .reveal { opacity: 1; transform: none; transition: none; }
  .space-card-media img, .sticky-cta { transition: none; }
}

/* ---------- 404 page ---------- */
/* Moved out of an inline <style> block in 404.html so the CSP style-src
   needs no 'unsafe-inline'. */

.notfound {
  min-height: 100svh; display: flex; flex-direction: column;
  align-items: flex-start; justify-content: center;
  max-width: var(--container); margin-inline: auto; padding: 4rem var(--gutter);
}
.notfound h1 { font-size: clamp(2.25rem, 6vw, 4rem); line-height: 1.1; margin-bottom: 1rem; }
.notfound p { color: var(--ink-soft); max-width: 46ch; margin-bottom: 2rem; }
.notfound .lang-switch { display: flex; margin-bottom: 3rem; margin-left: -0.45rem; }
.notfound .wordmark { margin-bottom: 2rem; }