/* ==========================================================================
   One Take Productions — component library v2 (design pool) · 3/10/2026
   Extracted from Nikos' prototype v39 (v39.css / v39.js) + home-v2 desktop layer (v2.css)
   + client corrections (call 24/9, email 28/9). Requires ../assets/tokens.css first.

   Colours: only tokens.css variables (+ color-mix of them). The few v39 neutrals that are
   not in tokens.css are declared once below as --x-* («derived») — candidates for tokens.css.
   Component-internal sizes (11px buttons, 30px row arrow …) are v39's exact values;
   the type scale, spacing, radii and tap size come from tokens.
   Every block notes its v39 source selector.
   Greek capitals: only via text-transform with lang="el" on an ancestor.
   ========================================================================== */

@property --ot-fly { syntax: "<length>"; inherits: true; initial-value: 0px; }

:root {
  /* derived from v39 — not in tokens.css (yet) */
  --x-black: #000;          /* hero gradient end (.hero) */
  --x-hero-hi: #222;        /* hero gradient start (.hero) */
  --x-hero-mid: #090909;    /* hero gradient middle (.hero) */
  --x-ink: #111;            /* .nav-cta, .form (v39 V1) */
  --x-panel-hi: #141414;    /* .form gradient top */
  --x-panel-lo: #0d0d0d;    /* .form gradient bottom */
  --x-input: #101010;       /* .input */
  --x-footer: #050505;      /* .footer-v35 */
  --x-ember-hi: #46301f;    /* .band (work band) */
  --x-ember-lo: #0a0807;
  --x-brush: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 180 18' preserveAspectRatio='none'%3E%3Cpath fill='%23ff6a00' fill-opacity='.9' d='M2 9C18 4 38 7 55 4c23-3 42 2 65-1 22-3 38 2 57 0-8 3-22 4-32 6-25 4-46 1-70 5-26 4-47 0-72 2 7-3 4-5-1-7Z'/%3E%3Cpath d='M6 15c31-4 65 0 103-4 28-3 49-2 66-4' fill='none' stroke='%23ff6a00' stroke-width='1.5' stroke-linecap='round' opacity='.5'/%3E%3Cpath d='M13 5c37-5 74 0 119-3 18-1 30 0 40-1' fill='none' stroke='%23ff6a00' stroke-width='1' stroke-linecap='round' opacity='.38'/%3E%3Cpath d='M142 13c13-2 25-1 35-3' fill='none' stroke='%23ff6a00' stroke-width='.9' stroke-linecap='round' opacity='.45'/%3E%3C/svg%3E");
  --x-grain: url("data:image/svg+xml,%3Csvg viewBox='0 0 180 180' xmlns='http://www.w3.org/2000/svg'%3E%3Cfilter id='n'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='.92' numOctaves='4' stitchTiles='stitch'/%3E%3C/filter%3E%3Crect width='100%25' height='100%25' filter='url(%23n)' opacity='.8'/%3E%3C/svg%3E");

  /* context (dark by default) — swapped by .ot-light / cream bands */
  --ot-fg: var(--c-cream);
  --ot-fg-2: var(--c-muted);
  --ot-line: var(--c-line-dark);
  --ot-accent-text: var(--c-orange);          /* small accent TEXT: orange on dark, dark on cream (decision 3/10: never small orange text on cream) */
  --ot-header-h: 70px;
  interpolate-size: allow-keywords;
}

/* ---------- contexts & bands  (v39: .black .charcoal .cream · .section) ---------- */
.ot-dark, .ot-band--void, .ot-band--charcoal, .ot-band--graphite {
  --ot-fg: var(--c-cream); --ot-fg-2: var(--c-muted); --ot-line: var(--c-line-dark); --ot-accent-text: var(--c-orange);
  color: var(--ot-fg);
}
.ot-light, .ot-band--cream {
  --ot-fg: var(--c-void); --ot-fg-2: var(--c-ink-muted); --ot-line: var(--c-line-light); --ot-accent-text: var(--c-void);
  color: var(--ot-fg);
}
.ot-band { padding-block: var(--band-y); }
.ot-band--void { background: var(--c-void); }
.ot-band--charcoal { background: var(--c-void-2); }
.ot-band--graphite { background: var(--c-void-3); }
.ot-band--cream { background: var(--c-cream); }
.ot-wrap { width: min(var(--container), 100% - 2 * var(--gutter)); margin-inline: auto; }

/* ---------- typography ---------- */
/* Eyebrow — v39: html body .eyebrow (V39 face, uppercase) + ::after (V28 brush, V38 5px) */
.ot-eyebrow {
  display: table; margin: 0 0 18px; padding-right: 7px;
  font: 400 var(--fs-eyebrow)/1.02 var(--f-hand); letter-spacing: 0; text-transform: uppercase;
  color: var(--c-orange);                 /* brand orange everywhere (decision 3/10) */
}
.ot-light .ot-eyebrow, .ot-menu .ot-eyebrow { font-size: max(22px, var(--fs-eyebrow)); }   /* on cream orange text only large (≥22px) */
.ot-eyebrow::after {
  content: ""; display: block; width: 68%; height: 5px; margin: 2px 0 0 1px;
  background: var(--x-brush) center / 100% 100% no-repeat;          /* stroke stays #ff6a00 on cream */
  transform: rotate(-1.4deg) skewX(-3deg); transform-origin: left center; pointer-events: none;
}
.ot-h1 {  /* v39: .hero h1 — weight 750, uppercase only via CSS */
  margin: 0 0 20px; font-weight: 750; font-size: var(--fs-h1); line-height: var(--lh-h1);
  letter-spacing: var(--ls-h1); text-transform: uppercase;
}
.ot-h1 > span { display: block; }
.ot-h2 {  /* v39: .section h2 — weight 700, sentence case */
  margin: 0 0 18px; max-width: 16ch; font-weight: 700; font-size: var(--fs-h2);
  line-height: var(--lh-h2); letter-spacing: var(--ls-h2);
}
.ot-h2--caps { text-transform: uppercase; }   /* v39: .final h2 (contact) */
.ot-h3 { margin: 0 0 8px; font-weight: 700; font-size: var(--fs-h3); line-height: 1.1; letter-spacing: -.025em; }
.ot-intro {  /* v39: .section-intro (15px, opacity .74) → 17px desktop (call 24/9) */
  max-width: 560px; margin: 0 0 29px; font-size: var(--fs-body); line-height: var(--lh-body); opacity: .74;
}
.ot-body { font-size: var(--fs-body); line-height: var(--lh-body); }
.ot-hero-copy { /* v39: .hero-copy */
  max-width: 390px; margin: 0 0 27px; font-size: 16px; line-height: 1.5;
  color: color-mix(in srgb, var(--c-cream) 93%, var(--c-void));
}
.ot-meta { /* v39: .meta / .destination-card .meta */
  font: 700 var(--fs-label)/1.3 var(--f-sans); letter-spacing: var(--ls-label); text-transform: uppercase; color: var(--ot-accent-text);
}
.ot-locations { /* v39: .locations */
  margin-top: 22px; font-size: 10px; letter-spacing: .11em; text-transform: uppercase; color: var(--ot-fg-2);
}
.ot-scroll-note { /* v39: .scroll-note — nowrap fixes the «broken» desktop note (call 24/9) */
  position: absolute; right: 14px; bottom: 35px; z-index: 3; writing-mode: vertical-rl; white-space: nowrap;
  font-size: 9px; letter-spacing: .16em; text-transform: uppercase; color: var(--c-muted);
}
.ot-breadcrumb { /* v39: .service-breadcrumb */
  display: flex; flex-wrap: wrap; align-items: center; gap: 0 8px; margin: 0 0 17px; padding: 0; list-style: none;
  font-size: 10px; letter-spacing: .13em; text-transform: uppercase; color: color-mix(in srgb, var(--ot-fg) 68%, transparent);
}
.ot-breadcrumb li + li::before { content: "/"; margin-right: 8px; opacity: .5; }
.ot-breadcrumb a { display: inline-flex; align-items: center; min-height: var(--tap); color: var(--ot-accent-text); text-decoration: none; }
.ot-breadcrumb a:hover { text-decoration: underline; text-underline-offset: 3px; }
.ot-light .ot-breadcrumb a { text-decoration: underline; text-decoration-color: var(--c-orange); text-underline-offset: 3px; }
.ot-quote { /* v39: .quote-panel blockquote / cite */
  margin: 0; font-size: clamp(31px, 8.2vw, 44px); line-height: 1.08; letter-spacing: -.04em;
}
.ot-quote cite { display: block; margin-top: 23px; font-size: 10px; font-style: normal; letter-spacing: .12em; text-transform: uppercase; color: var(--ot-fg-2); }
.ot-prose a { /* v39: .seo a (underline orange = line, not text) */
  font-weight: 700; color: inherit; text-decoration: underline; text-decoration-color: var(--c-orange);
  text-decoration-thickness: 1px; text-underline-offset: 3px;
}
.ot-prose p { max-width: 760px; font-size: var(--fs-body); line-height: 1.72; }

/* ---------- brush shapes («πινελιές») ---------- */
.ot-brush { position: relative; display: inline-block; }            /* underline any word */
.ot-brush::after {
  content: ""; position: absolute; left: 0; right: 4%; bottom: -.18em; height: .22em;
  background: var(--x-brush) center / 100% 100% no-repeat; transform: rotate(-1.4deg) skewX(-3deg); transform-origin: left center; pointer-events: none;
}
.ot-brush-dash { /* v39 V25 «09» brush dash: 64×5, radius 60% 35% 55% 38% + clip-path */
  display: block; width: 64px; height: 5px; background: var(--c-orange); border-radius: 60% 35% 55% 38%;
  transform: rotate(-2.2deg);
  clip-path: polygon(0 38%,8% 18%,18% 30%,30% 12%,43% 27%,57% 10%,70% 24%,82% 15%,94% 26%,100% 43%,96% 70%,84% 61%,72% 77%,58% 66%,43% 81%,29% 68%,15% 78%,3% 65%);
}
.ot-blob { /* v39 V25 «08» brush radius as an organic shape */
  display: inline-grid; place-items: center; width: 64px; aspect-ratio: 1; background: var(--c-orange);
  border-radius: 55% 35% 60% 38%; color: var(--c-void);
}

/* ---------- fills & scrims ---------- */
.ot-fill-hero { /* v39: .hero background */
  background:
    radial-gradient(circle at 75% 25%, color-mix(in srgb, var(--c-orange) 33%, transparent), transparent 29%),
    linear-gradient(150deg, var(--x-hero-hi) 0%, var(--x-hero-mid) 52%, var(--x-black) 100%);
}
.ot-fill-ember { /* v39: .band */
  background:
    linear-gradient(180deg, rgb(0 0 0 / .15), rgb(0 0 0 / .82)),
    radial-gradient(circle at 50% 32%, color-mix(in srgb, var(--c-orange) 55%, transparent), transparent 31%),
    linear-gradient(150deg, var(--x-ember-hi), var(--x-ember-lo) 68%);
}
.ot-fill-glow-corner { /* v39: .quote-panel / .search-panel (V29) */
  background: radial-gradient(circle at 88% 10%, color-mix(in srgb, var(--c-orange) 18%, transparent), transparent 35%), var(--c-void);
}
.ot-fill-panel { /* v39: .form (V4) */
  position: relative;
  background: linear-gradient(180deg, var(--x-panel-hi), var(--x-panel-lo));
  border: 1px solid color-mix(in srgb, var(--c-cream) 15%, transparent);
  box-shadow: 0 30px 80px rgb(0 0 0 / .36), inset 0 1px 0 rgb(255 255 255 / .025);
}
.ot-fill-panel::before { /* orange hairline on top edge */
  content: ""; position: absolute; left: 22px; right: 22px; top: 0; height: 1px; opacity: .7;
  background: linear-gradient(90deg, transparent, var(--c-orange), transparent);
}
.ot-fill-placeholder { /* v39: .selection1 — image-less card */
  background:
    linear-gradient(180deg, rgb(0 0 0 / .08), rgb(0 0 0 / .76)),
    radial-gradient(circle at 48% 28%, color-mix(in srgb, var(--c-orange) 58%, transparent), transparent 27%),
    linear-gradient(135deg, var(--x-ember-hi), var(--x-ember-lo));
}
.ot-grain { /* v39: .grain (opacity .08) */
  position: absolute; inset: 0; z-index: 1; opacity: .08; pointer-events: none; background-image: var(--x-grain);
}
.ot-scrim-bottom { position: absolute; inset: 0; pointer-events: none; /* v39: .hero:before */
  background: linear-gradient(180deg, rgb(0 0 0 / .02), rgb(0 0 0 / .3) 42%, rgb(0 0 0 / .78));
}
.ot-scrim-card { position: absolute; inset: 0; pointer-events: none; /* v2.css: .compact-card .card-bg::after */
  background: linear-gradient(to top, rgb(0 0 0 / .86) 0%, rgb(0 0 0 / .35) 45%, rgb(0 0 0 / .08) 100%);
}
.ot-scrim-side { position: absolute; inset: 0; pointer-events: none; /* v39: .service-hero::before */
  background:
    linear-gradient(180deg, rgb(0 0 0 / .18) 0%, rgb(0 0 0 / .2) 31%, rgb(0 0 0 / .9) 91%),
    linear-gradient(90deg, rgb(0 0 0 / .45), transparent 75%);
}
.ot-fade-left { /* v2.css: .v2-hero-img mask — photo melts into the void on the left */
  -webkit-mask-image: linear-gradient(to right, transparent 0%, #000 38%); mask-image: linear-gradient(to right, transparent 0%, #000 38%);
}

/* ---------- buttons ---------- */
/* Primary pill — v39: .cta.luxury-cta + .cta-arrow */
.ot-btn {
  --ot-fly: 0px;
  position: relative; overflow: hidden; display: inline-flex; align-items: center; justify-content: space-between; gap: 18px;
  min-width: 214px; min-height: 54px; padding: 8px 8px 8px 20px;
  border: 1px solid color-mix(in srgb, var(--c-orange) 82%, transparent); border-radius: var(--r-pill);
  background: color-mix(in srgb, var(--c-void) 50%, transparent); color: var(--c-cream);
  -webkit-backdrop-filter: blur(10px); backdrop-filter: blur(10px);
  box-shadow: inset 0 0 0 1px rgb(255 255 255 / .025), 0 12px 36px rgb(0 0 0 / .18);
  font: 600 11px/1.2 var(--f-sans); letter-spacing: .13em; text-transform: uppercase; text-align: left; text-decoration: none;
  cursor: pointer; -webkit-tap-highlight-color: transparent;
  transition: border-color .18s ease, background-color .18s ease, transform .12s ease;
}
.ot-btn::before { content: ""; position: absolute; inset: 0; pointer-events: none;
  background: linear-gradient(105deg, color-mix(in srgb, var(--c-orange) 8%, transparent), transparent 44%); }
.ot-btn__arrow, .ot-row-arrow {
  position: relative; display: inline-grid; place-items: center; flex: 0 0 auto; overflow: hidden;
  border: 1px solid color-mix(in srgb, var(--c-orange) 78%, transparent); border-radius: 50%;
}
.ot-btn__arrow { width: 38px; height: 38px; background: var(--c-orange); border-color: var(--c-orange); color: var(--c-void); }
.ot-btn__arrow::before, .ot-row-arrow::before { /* chevron */
  content: ""; width: 10px; height: 10px; margin-left: -4px; border-top: 1px solid currentColor; border-right: 1px solid currentColor;
  transform: translateX(var(--ot-fly)) rotate(45deg); transition: transform var(--dur-fast) var(--ease-out);
}
.ot-btn__arrow::after, .ot-row-arrow::after { /* shaft */
  content: ""; position: absolute; width: 12px; height: 1px; background: currentColor;
  transform: translateX(calc(var(--ot-fly) - 2px)); transition: transform var(--dur-fast) var(--ease-out);
}
.ot-btn:hover { border-color: var(--c-orange); background-color: color-mix(in srgb, var(--c-orange) 8%, color-mix(in srgb, var(--c-void) 50%, transparent)); }
.ot-btn:hover .ot-btn__arrow, .ot-btn:focus-visible .ot-btn__arrow { --ot-fly: var(--nudge); }   /* CTA micro-animation (guideline · Κίνηση) */
.ot-btn:focus-visible, .ot-icon-btn:focus-visible, .ot-chip:focus-visible, .ot-link:focus-visible, .ot-dot:focus-visible,
.ot-card:focus-visible, .ot-facade:focus-visible, .ot-service-row:focus-visible, .ot-play:focus-visible {
  outline: 2px solid var(--c-orange); outline-offset: 3px;
}
.ot-btn:active { transform: scale(.98); }
.ot-btn:disabled, .ot-btn[aria-disabled="true"] {
  cursor: not-allowed; opacity: .45; border-color: color-mix(in srgb, var(--c-cream) 30%, transparent); transform: none;
}
.ot-btn:disabled .ot-btn__arrow, .ot-btn[aria-disabled="true"] .ot-btn__arrow { background: var(--c-muted); border-color: var(--c-muted); --ot-fly: 0px; }
.ot-btn--block { width: 100%; min-width: 0; }
.ot-btn__arrow--brush::before, .ot-btn__arrow--brush::after { content: none; }    /* option: brush arrow in the disc (⚑ v39 has the clean CSS arrow) */
.ot-btn__arrow--brush .ot-glyph { width: 20px; height: 20px; transform: translateX(var(--ot-fly)); transition: transform var(--dur-fast) var(--ease-out); }
.ot-btn--solid { background: var(--x-ink); }                                   /* v39: .nav-cta (menu) */
.ot-light .ot-btn:not(.ot-btn--secondary):not(.ot-dark .ot-btn) { background: var(--c-void); }      /* on cream: solid void pill (not in v39) */
.ot-btn.is-sending .ot-btn__arrow { animation: ot-fly .7s cubic-bezier(.6, 0, .3, 1) both; }
@keyframes ot-fly {
  0% { --ot-fly: 0px; } 45% { --ot-fly: 30px; } 46% { --ot-fly: -30px; } 100% { --ot-fly: 0px; }
}
/* Secondary — v2.css: .v2-deskcta (outline pill, 44px) */
.ot-btn--secondary {
  min-width: 0; min-height: var(--tap); padding: 0 22px; gap: 10px; justify-content: center;
  border-color: var(--c-orange); background: transparent; box-shadow: none; -webkit-backdrop-filter: none; backdrop-filter: none;
  color: var(--ot-fg); letter-spacing: .14em; white-space: nowrap;
}
.ot-btn--secondary::before { content: none; }
.ot-btn--secondary:hover { background: var(--c-orange); color: var(--c-void); }
/* Ghost text link — v39: .text-link */
.ot-link {
  display: inline-flex; align-items: center; gap: 8px; min-height: var(--tap); padding: 0;
  border: 0; border-bottom: 1px solid color-mix(in srgb, var(--ot-fg) 45%, transparent); background: none;
  color: var(--ot-fg); font: 400 10px/1.2 var(--f-sans); letter-spacing: .12em; text-transform: uppercase; text-decoration: none; cursor: pointer;
  transition: color .16s ease, border-color .16s ease;
}
.ot-link::after { content: "↗"; color: var(--ot-accent-text); transition: transform .18s ease; }
.ot-link:hover { border-color: var(--c-orange); }
.ot-link:hover::after { transform: translate(2px, -2px); }
.ot-link[aria-disabled="true"] { opacity: .45; pointer-events: none; }
/* Icon circle — v39: .search-btn / .menu-btn (V4/V29), 44px per v2.css */
.ot-icon-btn {
  appearance: none; position: relative; display: inline-grid; place-items: center; flex: 0 0 auto;
  width: var(--tap); height: var(--tap); padding: 0; border-radius: 50%;
  border: 1px solid color-mix(in srgb, var(--c-cream) 26%, transparent); background: rgb(7 7 7 / .42); color: var(--c-cream);
  -webkit-backdrop-filter: blur(8px); backdrop-filter: blur(8px); cursor: pointer; text-decoration: none;
  transition: border-color .18s ease, background-color .18s ease, color .18s ease, opacity .16s ease, transform .16s ease;
}
.ot-icon-btn svg { width: 18px; height: 18px; }
.ot-icon-btn:hover { border-color: var(--c-orange); background: color-mix(in srgb, var(--c-orange) 12%, transparent); color: var(--c-orange); }
.ot-icon-btn:active { transform: scale(.94); }
.ot-icon-btn:disabled { opacity: .3; cursor: default; pointer-events: none; }
.ot-icon-btn--on-cream { border-color: color-mix(in srgb, var(--c-void) 25%, transparent); background: transparent; color: var(--c-void); -webkit-backdrop-filter: none; backdrop-filter: none; }
.ot-icon-btn--on-cream:hover { color: var(--c-orange); }   /* icon = shape */
.ot-icon-btn--lg { width: 64px; height: 64px; }
.ot-icon-btn--lg svg { width: 22px; height: 22px; }
/* CSS-drawn header glyphs — v39: .menu-lines / .search-icon */
.ot-menu-lines, .ot-menu-lines::before, .ot-menu-lines::after { content: ""; display: block; width: 17px; height: 1px; background: currentColor; position: relative; }
.ot-menu-lines::before { position: absolute; top: -5px; }
.ot-menu-lines::after { position: absolute; top: 5px; }
.ot-search-icon { position: relative; display: block; width: 15px; height: 15px; border: 1.4px solid currentColor; border-radius: 50%; }
.ot-search-icon::after { content: ""; position: absolute; right: -4px; bottom: -3px; width: 6px; height: 1.4px; border-radius: 2px; background: currentColor; transform: rotate(45deg); transform-origin: left center; }
/* Play — orange disc (façade, hero) */
.ot-play {
  appearance: none; display: inline-flex; align-items: center; gap: 14px; padding: 0; border: 0; background: none;
  color: var(--c-cream); font: 600 11px/1.2 var(--f-sans); letter-spacing: .13em; text-transform: uppercase; cursor: pointer; border-radius: var(--r-pill);
}
.ot-play__disc {
  position: relative; display: grid; place-items: center; width: 64px; height: 64px; border-radius: 50%;
  background: var(--c-orange); color: var(--c-void); box-shadow: 0 12px 36px rgb(0 0 0 / .3); transition: transform .2s ease;
}
.ot-play__disc::after { /* soft ring */
  content: ""; position: absolute; inset: -7px; border-radius: 50%; border: 1px solid color-mix(in srgb, var(--c-orange) 55%, transparent);
  transition: inset .25s ease, opacity .25s ease;
}
.ot-play__disc svg { width: 22px; height: 22px; margin-left: 3px; }
.ot-play:hover .ot-play__disc { transform: scale(1.06); }
.ot-play:hover .ot-play__disc::after { inset: -11px; opacity: .6; }
.ot-play__meta small { display: block; margin-top: 4px; color: var(--c-muted); font-weight: 400; letter-spacing: .11em; }
/* Row & view arrows — v39: .row-arrow / .view-arrow */
.ot-row-arrow { width: 30px; height: 30px; color: var(--c-orange); background: color-mix(in srgb, var(--c-orange) 4%, transparent); transition: background-color .18s ease, color .18s ease; }
.ot-view-arrow { position: relative; display: inline-block; flex: 0 0 18px; width: 18px; height: 10px; color: var(--c-orange); transform: translateY(1px); transition: transform .18s ease; }
.ot-view-arrow::before { content: ""; position: absolute; left: 0; top: 50%; width: 16px; height: 1px; background: currentColor; transform: translateY(-50%); }
.ot-view-arrow::after { content: ""; position: absolute; right: 0; top: 2px; width: 6px; height: 6px; border-top: 1px solid currentColor; border-right: 1px solid currentColor; transform: rotate(45deg); }

/* ---------- cards ---------- */
/* Service card — v39: .compact-card (V25: aspect 5/8, radius 16) + v2.css photo/scrim */
.ot-card {
  position: relative; display: block; aspect-ratio: var(--ot-card-ratio, 5 / 8); overflow: hidden; border-radius: var(--r-card);
  background: var(--c-void-3); color: var(--c-cream); text-decoration: none; scroll-snap-align: start;
  box-shadow: 0 16px 38px rgb(0 0 0 / .16), inset 0 0 0 1px rgb(255 255 255 / .045); isolation: isolate;
}
.ot-light .ot-card { box-shadow: 0 16px 34px rgb(25 20 15 / .14), inset 0 0 0 1px rgb(255 255 255 / .055); }
.ot-card__media { position: absolute; inset: 0; z-index: -1; width: 100%; height: 100%; object-fit: cover; transition: transform .6s ease; }
.ot-card::after { content: ""; position: absolute; inset: 0; z-index: -1; pointer-events: none;
  background: linear-gradient(to top, rgb(0 0 0 / .86) 0%, rgb(0 0 0 / .35) 45%, rgb(0 0 0 / .08) 100%); }
.ot-card:hover .ot-card__media { transform: scale(1.04); }
.ot-card__body { position: absolute; inset: auto 13px 15px 13px; }
.ot-num, .ot-card__no { /* numbering = our sans, never handwriting (Nikos via owner 4/10; v39 .card-no was DK Lemon) */
  display: block; font: 600 12px/1.1 var(--f-sans); font-variant-numeric: tabular-nums; letter-spacing: .08em; color: var(--c-orange);
}
.ot-card__no { margin-bottom: 7px; }
.ot-card__title { margin: 5px 0 7px; font-size: 19px; font-weight: 700; line-height: 1.02; letter-spacing: -.035em; }
.ot-card__text { margin: 0; font-size: 9.7px; line-height: 1.37; opacity: .78; }
/* City / destination card — v39: .destination-card + corrections 24/9 (label at bottom, «Δείτε →» visible) */
.ot-city__label { display: block; margin-top: 10px; font: 700 9px/1.3 var(--f-sans); letter-spacing: .11em; text-transform: uppercase; color: var(--c-orange); }
.ot-city__cta { display: inline-flex; align-items: center; gap: 8px; margin-top: 8px; font-size: 14px; font-weight: 600; color: var(--c-cream); }
.ot-city::after { background: linear-gradient(to top, rgb(0 0 0 / .9) 0%, rgb(0 0 0 / .45) 42%, rgb(0 0 0 / .05) 100%); }
.ot-city:hover .ot-city__arrow, .ot-city:focus-visible .ot-city__arrow { transform: translateX(var(--nudge)); }
/* Project card — v39: .feature-card / .media-frame */
.ot-project { --ot-card-ratio: 4 / 5; }
.ot-project .ot-card__body { inset: auto 17px 18px 17px; }
.ot-project .ot-card__title { margin: 6px 0 8px; font-size: 26px; line-height: 1; }
.ot-project .ot-card__text { font-size: 12px; line-height: 1.45; opacity: .74; }
.ot-project__badge { position: absolute !important; top: 14px; right: 14px; width: var(--tap) !important; height: var(--tap) !important; pointer-events: none; }
.ot-project__badge svg { width: 16px !important; height: 16px !important; margin-left: 2px !important; }
.ot-project__badge::after { content: none !important; }
/* Review — v39: .review-scroller .review (V29) */
.ot-review {
  display: flex; flex-direction: column; min-height: 248px; margin: 0; padding: 24px 18px 20px; scroll-snap-align: start;
  border: 1px solid color-mix(in srgb, var(--ot-fg) 13%, transparent); border-radius: var(--r-card);
  background: rgb(255 255 255 / .22); box-shadow: 0 14px 34px rgb(25 20 15 / .07);
}
.ot-dark .ot-review { background: rgb(255 255 255 / .03); box-shadow: none; }
.ot-stars { display: flex; gap: 3px; color: var(--c-orange); }    /* stars = shapes (SVG), may stay #ff6a00 on cream */
.ot-stars svg { width: 13px; height: 13px; }
.ot-review__text { flex: 1; margin: 14px 0 20px; font-size: 19px; line-height: 1.34; letter-spacing: -.025em; }
.ot-review__by { display: block; font-size: 11px; line-height: 1.4; letter-spacing: .06em; color: var(--ot-fg-2); }
/* Stat tiles — v39: .numbers / .num */
.ot-stats { display: grid; grid-template-columns: 1fr 1fr; margin: 28px 0 0; border-top: 1px solid var(--ot-line); border-left: 1px solid var(--ot-line); }
.ot-stat { padding: 24px 14px; border-right: 1px solid var(--ot-line); border-bottom: 1px solid var(--ot-line); }
.ot-stat b { display: block; font-size: 38px; font-weight: 700; letter-spacing: -.04em; line-height: 1.1; }
.ot-stat span { display: block; margin-top: 4px; font-size: 9px; letter-spacing: .13em; text-transform: uppercase; color: var(--ot-fg-2); }

/* ---------- carousel — v39: .compact-scroller + setupSwipeIndicator (v39.js) ---------- */
.ot-carousel { position: relative; --ot-per: 43.5%; --ot-gap: 11px; }
.ot-carousel__track {
  display: grid; grid-auto-flow: column; grid-auto-columns: var(--ot-per); gap: var(--ot-gap);
  overflow-x: auto; scroll-snap-type: x mandatory; overscroll-behavior-x: contain; scrollbar-width: none;
  padding-right: var(--gutter); margin-right: calc(-1 * var(--gutter)); scroll-padding-left: 0;
}
.ot-carousel__track::-webkit-scrollbar { display: none; }
.ot-carousel__track > * { scroll-snap-align: start; min-width: 0; }
.ot-carousel--wide { --ot-per: 88%; --ot-gap: 13px; }       /* reviews (v39 88%) */
.ot-carousel--feature { --ot-per: 80%; --ot-gap: 12px; }    /* projects / galleries (v39 .feature-scroller) */
.ot-carousel__controls { display: flex; align-items: center; justify-content: center; gap: 12px; margin-top: 15px; }
.ot-carousel__arrows { display: none; gap: 10px; }
.ot-dots { display: flex; align-items: center; justify-content: center; gap: 0; min-height: 24px; }
.ot-dot { /* v39: .swipe-marker (dash) — tap area 44px (v2.css), dash stays 14/27px */
  appearance: none; position: relative; min-width: var(--tap); min-height: var(--tap); width: 19px; padding: 0; border: 0; background: transparent; cursor: pointer; border-radius: var(--r-pill);
}
.ot-dot::before {
  content: ""; position: absolute; top: 50%; left: 50%; width: 14px; height: 2px; border-radius: 99px; background: var(--c-orange);
  opacity: .24; transform: translate(-50%, -50%); transition: width .2s ease, opacity .2s ease, box-shadow .2s ease;
}
.ot-dot[aria-current="true"]::before { width: 27px; opacity: 1; box-shadow: 0 0 10px color-mix(in srgb, var(--c-orange) 34%, transparent); }
.ot-dot:hover::before { opacity: .6; }

/* ---------- lists & chips ---------- */
/* Service list — v39: .service-strip / .service-row + .row-arrow */
.ot-service-list { margin: 34px 0 0; padding: 0; list-style: none; border-top: 1px solid var(--ot-line); }
.ot-service-row {
  display: flex; align-items: center; justify-content: space-between; gap: 16px; min-height: 64px; padding: 18px 2px;
  border-bottom: 1px solid var(--ot-line); color: var(--ot-fg); font-size: 17px; font-weight: 430; letter-spacing: -.015em; text-decoration: none;
}
.ot-service-row:hover .ot-row-arrow, .ot-service-row:focus-visible .ot-row-arrow { background: var(--c-orange); color: var(--c-void); }
.ot-service-row:hover .ot-row-arrow::before { --ot-fly: 2px; }
/* Numbered list — v39: .related-list (numbers DK Lemon) */
.ot-numbered { margin: 29px 0 0; padding: 0; list-style: none; border-top: 1px solid var(--ot-line); }
.ot-numbered a { display: grid; grid-template-columns: 34px 1fr 32px; gap: 10px; align-items: center; min-height: 60px; padding: 14px 0; border-bottom: 1px solid var(--ot-line); color: var(--ot-fg); text-decoration: none; }
.ot-numbered__no { font: 600 13px/1 var(--f-sans); font-variant-numeric: tabular-nums; letter-spacing: .08em; color: var(--ot-accent-text); }
.ot-numbered strong { font-size: 18px; font-weight: 520; }
.ot-numbered a:hover .ot-row-arrow { background: var(--c-orange); color: var(--c-void); }
/* Chip — v39: .chip (V4) · ≥44px (v2.css) */
.ot-chips { display: flex; flex-wrap: wrap; gap: 9px; margin-top: 16px; }
.ot-chip {
  appearance: none; display: inline-flex; align-items: center; justify-content: center; gap: 6px; min-height: var(--tap); min-width: var(--tap); padding: 11px 14px;
  border: 1px solid color-mix(in srgb, var(--c-cream) 17%, transparent); border-radius: var(--r-pill);
  background: rgb(255 255 255 / .015); color: color-mix(in srgb, var(--c-cream) 90%, var(--c-void));
  font: 400 11px/1.2 var(--f-sans); cursor: pointer; transition: background-color .18s, border-color .18s, color .18s;
}
.ot-chip:hover { border-color: color-mix(in srgb, var(--c-cream) 40%, transparent); }
.ot-chip[aria-pressed="true"], .ot-chip[aria-checked="true"] {
  border-color: color-mix(in srgb, var(--c-orange) 90%, transparent); background: color-mix(in srgb, var(--c-orange) 12%, transparent);
  color: var(--c-cream); font-weight: 600; box-shadow: inset 0 0 0 1px color-mix(in srgb, var(--c-orange) 8%, transparent);
}
.ot-chip:disabled { opacity: .4; cursor: not-allowed; }
.ot-light .ot-chip:not(.ot-dark .ot-chip) { border-color: color-mix(in srgb, var(--c-void) 22%, transparent); background: transparent; color: var(--c-void); }
.ot-light .ot-chip[aria-pressed="true"]:not(.ot-dark .ot-chip), .ot-light .ot-chip[aria-checked="true"]:not(.ot-dark .ot-chip) { border-color: var(--c-orange); background: color-mix(in srgb, var(--c-orange) 14%, transparent); color: var(--c-void); }
/* Language toggle — v39: .language-toggle (V35) */
.ot-lang { display: inline-flex; align-items: center; padding: 3px; border: 1px solid color-mix(in srgb, var(--ot-fg) 20%, transparent); border-radius: var(--r-pill); background: rgb(255 255 255 / .35); }
.ot-dark .ot-lang { background: rgb(255 255 255 / .04); }
.ot-lang a { display: inline-flex; align-items: center; justify-content: center; min-width: var(--tap); min-height: 38px; padding: 0 10px; border-radius: var(--r-pill); color: var(--ot-fg-2); font-size: 10px; font-weight: 700; letter-spacing: .11em; text-decoration: none; }
.ot-lang a[aria-current="page"] { background: var(--c-void); color: var(--c-cream); }
.ot-dark .ot-lang a[aria-current="page"] { background: var(--c-cream); color: var(--c-void); }
/* Logo ticker — v39: .logo-marquee / .logos (20s linear) */
.ot-ticker { overflow: hidden; margin: 28px 0 0; padding: 19px 0; border-block: 1px solid var(--ot-line); }
.ot-ticker__track { display: flex; gap: 42px; width: max-content; white-space: nowrap; animation: ot-marquee 20s linear infinite; }
.ot-ticker__track > * { flex: 0 0 auto; font-size: 14px; font-weight: 800; letter-spacing: .06em; color: var(--ot-fg-2); }
.ot-ticker:hover .ot-ticker__track { animation-play-state: paused; }
@keyframes ot-marquee { to { transform: translateX(-50%); } }

/* ---------- header (v39 topbar V29/V35 + v2.css desktop nav) ---------- */
.ot-topbar {
  position: fixed; z-index: 50; top: 0; left: 0; right: 0; display: flex; align-items: center; gap: 12px;
  min-height: var(--ot-header-h); padding: 13px 18px 17px;
  background: linear-gradient(180deg, rgb(0 0 0 / .7), rgb(0 0 0 / 0)); color: var(--c-cream);
  --ot-fg: var(--c-cream); --ot-fg-2: var(--c-muted); --ot-line: var(--c-line-dark); --ot-accent-text: var(--c-orange);
}
.ot-topbar > * { flex-shrink: 0; }   /* the logo must never collapse (img width:100% → min-content 0) */
.ot-topbar__logo { position: relative; z-index: 2; display: block; width: min(154px, 38vw); line-height: 0; filter: drop-shadow(0 2px 12px rgb(0 0 0 / .24)); margin-right: auto; }
.ot-topbar__logo img { display: block; width: 100%; height: auto; }
.ot-topbar__search { position: absolute; left: 50%; top: 13px; transform: translateX(-50%); }
.ot-topbar__search:active { transform: translateX(-50%) scale(.94); }
.ot-topbar__nav, .ot-topbar__cta { display: none; }
.ot-topbar.is-search-open > :not(.ot-search) { opacity: 0; pointer-events: none; }
.ot-dd { position: relative; }
.ot-topbar__nav > a, .ot-dd__btn {
  display: inline-flex; align-items: center; min-height: var(--tap); padding: 0; border: 0; background: none;
  color: var(--c-cream); font: 500 14px/1 var(--f-sans); letter-spacing: .01em; text-decoration: none; cursor: pointer; white-space: nowrap;
}
.ot-topbar__nav > a:hover, .ot-dd__btn:hover, .ot-dd:focus-within .ot-dd__btn { color: var(--c-orange); }
.ot-chev { transition: transform var(--dur-base) var(--ease-out); }
[aria-expanded="true"] > .ot-chev { transform: rotate(180deg); }
.ot-dd__btn .ot-chev { width: 16px; height: 16px; margin-left: 6px; color: var(--c-orange); transition: transform var(--dur-base) var(--ease-out); }
.ot-dd:hover .ot-chev, .ot-dd:focus-within .ot-chev { transform: rotate(180deg); }
.ot-dd__panel {
  position: absolute; top: 100%; left: -18px; min-width: 250px; padding: 10px 18px; border-radius: var(--r-card);
  background: var(--c-cream); box-shadow: 0 24px 60px rgb(0 0 0 / .35);
  opacity: 0; visibility: hidden; transform: translateY(6px); transition: opacity .18s ease, transform .18s ease, visibility .18s;
}
.ot-dd:hover .ot-dd__panel, .ot-dd:focus-within .ot-dd__panel { opacity: 1; visibility: visible; transform: none; }
.ot-dd__panel a { display: flex; align-items: center; min-height: var(--tap); border-bottom: 1px solid var(--c-line-light); color: var(--c-void-3); font-size: 14px; text-decoration: none; }
.ot-dd__panel a:last-child { border-bottom: 0; }
.ot-dd__panel a:hover { text-decoration: underline; text-decoration-color: var(--c-orange); text-decoration-thickness: 2px; text-underline-offset: 4px; }

/* Menu overlay — v39: .overlay (.35s ease, translateY -102%) + V35 groups */
.ot-menu {
  position: fixed; z-index: 60; inset: 0; display: flex; flex-direction: column; overflow-y: auto; overscroll-behavior: contain;
  padding: 74px 22px 28px; background: var(--c-cream); color: var(--c-void);
  transform: translateY(-102%); visibility: hidden; transition: transform var(--dur-panel) ease, visibility 0s linear var(--dur-panel);
  --ot-fg: var(--c-void); --ot-fg-2: var(--c-ink-muted); --ot-line: var(--c-line-light); --ot-accent-text: var(--c-void);
}
.ot-menu.is-open { transform: translateY(0); visibility: visible; transition: transform var(--dur-panel) ease, visibility 0s; }
.ot-menu__close { position: absolute; top: 20px; right: 20px; }
.ot-menu__groups { border-top: 1px solid var(--ot-line); }
.ot-menu__group { border-bottom: 1px solid var(--ot-line); }
.ot-menu__toggle, .ot-menu__direct {
  display: flex; align-items: center; justify-content: space-between; gap: 14px; width: 100%; min-height: 52px; padding: 8px 1px;
  border: 0; background: transparent; color: var(--c-void); font: 400 31px/1 var(--f-sans); letter-spacing: -.045em; text-align: left; text-decoration: none; cursor: pointer;
}
.ot-menu__toggle::after {
  content: "+"; display: grid; place-items: center; flex: 0 0 30px; width: 30px; height: 30px; border: 1px solid color-mix(in srgb, var(--c-void) 22%, transparent);
  border-radius: 50%; font-size: 20px; font-weight: 300; letter-spacing: 0; transition: transform .24s ease, color .24s ease, border-color .24s ease;
}
.ot-menu__toggle[aria-expanded="true"]::after { color: var(--c-orange); border-color: color-mix(in srgb, var(--c-orange) 55%, transparent); transform: rotate(45deg); }
.ot-menu__panel { display: grid; grid-template-rows: 0fr; transition: grid-template-rows .28s ease; }
.ot-menu__panel > div { min-height: 0; overflow: hidden; }
.ot-menu__panel.is-open { grid-template-rows: 1fr; }
.ot-menu__links { display: grid; padding: 0 0 12px 18px; }
.ot-menu__links a { position: relative; display: flex; align-items: center; min-height: var(--tap); padding-right: 30px; color: var(--c-ink-muted); font-size: 13px; line-height: 1.25; text-decoration: none; }
.ot-menu__links a::after { content: ""; position: absolute; top: 50%; right: 5px; width: 9px; height: 9px; border-top: 1px solid var(--c-orange); border-right: 1px solid var(--c-orange); transform: translateY(-50%) rotate(45deg); }
.ot-menu__links a:hover { color: var(--c-void); }
.ot-menu__secondary { display: grid; grid-template-columns: 1fr 1fr; gap: 0 18px; margin-top: 18px; }
.ot-menu__secondary a { display: flex; align-items: center; min-height: var(--tap); border-bottom: 1px solid var(--ot-line); color: var(--c-void); font-size: 18px; line-height: 1.05; letter-spacing: -.025em; text-decoration: none; }
.ot-menu__secondary .is-contact { font-weight: 650; text-decoration: underline; text-decoration-color: var(--c-orange); text-decoration-thickness: 2px; text-underline-offset: 5px; }   /* v39 #ff6a00 text on cream → dark + orange underline (decision 3/10) */
.ot-menu__tertiary { display: flex; align-items: center; justify-content: space-between; gap: 18px; margin-top: 17px; }
.ot-menu__tertiary > a { display: inline-flex; align-items: center; min-height: var(--tap); color: var(--c-ink-muted); font-size: 12px; text-decoration: none; }
.ot-menu .ot-btn { width: 100%; margin-top: 22px; flex: 0 0 auto; }
.ot-menu .ot-eyebrow { margin-bottom: 10px; }

/* Search — v39 V30: inline pill that grows from the header circle */
.ot-search {
  position: fixed; z-index: 80; top: 11px; left: 50%; width: 40px; max-width: 532px; padding: 0;
  opacity: 0; visibility: hidden; pointer-events: none; transform: translateX(-50%); transform-origin: center top;
  transition: width .3s var(--ease-panel), opacity .12s ease, visibility 0s linear .3s;
}
.ot-search.is-open { width: calc(100% - 22px); opacity: 1; visibility: visible; pointer-events: auto; transition: width .3s var(--ease-panel), opacity .12s ease, visibility 0s; }
.ot-search__field {
  position: relative; z-index: 2; display: flex; align-items: center; gap: 12px; height: 46px; padding: 0 50px 0 16px; overflow: hidden;
  border: 1px solid color-mix(in srgb, var(--c-cream) 34%, transparent); border-radius: var(--r-pill);
  background: rgb(10 10 10 / .96); box-shadow: 0 10px 28px rgb(0 0 0 / .32); -webkit-backdrop-filter: blur(14px); backdrop-filter: blur(14px);
}
.ot-search__field:focus-within { border-color: var(--c-orange); box-shadow: 0 0 0 1px color-mix(in srgb, var(--c-orange) 22%, transparent), 0 10px 28px rgb(0 0 0 / .36); }
.ot-search__field .ot-search-icon { flex: 0 0 15px; color: var(--c-orange); }
.ot-search__input {
  width: 100%; min-width: 0; height: 100%; padding: 0; border: 0; outline: 0; background: transparent; color: var(--c-cream); caret-color: var(--c-orange);
  font: 400 19px/1.35 var(--f-sans);   /* v39 .search-input */
}
.ot-search__input::placeholder { color: color-mix(in srgb, var(--c-cream) 45%, transparent); }
.ot-search__input::-webkit-search-cancel-button, .ot-search__input::-webkit-search-decoration { -webkit-appearance: none; appearance: none; }
.ot-search__close {
  appearance: none; position: absolute; top: 1px; right: 1px; z-index: 3; display: grid; place-items: center; width: var(--tap); height: var(--tap);
  border: 0; border-radius: 50%; background: transparent; color: var(--c-cream); cursor: pointer; transition: color .16s ease, transform .16s ease;
}
.ot-search__close svg { width: 18px; height: 18px; }
.ot-search__close:hover, .ot-search__close:focus-visible { color: var(--c-orange); outline: none; transform: rotate(5deg); }
.ot-search__status, .ot-search__results { opacity: 0; transform: translateY(-5px); transition: opacity .16s ease .16s, transform .2s ease .16s; background: rgb(10 10 10 / .97); box-shadow: 0 18px 42px rgb(0 0 0 / .34); }
.ot-search.is-open .ot-search__status, .ot-search.is-open .ot-search__results { opacity: 1; transform: none; }
.ot-search__status { min-height: 39px; margin: 7px 7px 0; padding: 12px 14px 8px; border: 1px solid color-mix(in srgb, var(--c-cream) 13%, transparent); border-bottom: 0; border-radius: 14px 14px 0 0; color: var(--c-muted); font-size: 11px; line-height: 1.5; }
.ot-search__results { max-height: min(58svh, 410px); margin: 0 7px; padding: 0 14px 5px; overflow-y: auto; border: 1px solid color-mix(in srgb, var(--c-cream) 13%, transparent); border-top: 0; border-radius: 0 0 14px 14px; }
.ot-search__result { display: flex; align-items: center; justify-content: space-between; gap: 18px; min-height: 56px; padding: 12px 2px; border-top: 1px solid color-mix(in srgb, var(--c-cream) 11%, transparent); color: var(--c-cream); text-decoration: none; transition: color .16s ease, padding-left .16s ease; }
.ot-search__result:hover, .ot-search__result:focus-visible { padding-left: 5px; color: var(--c-orange); outline: 0; }
.ot-search__result .ot-view-arrow { color: var(--c-cream); opacity: .78; }
.ot-search__result:hover .ot-view-arrow, .ot-search__result:focus-visible .ot-view-arrow { color: var(--c-orange); opacity: 1; }
.ot-search__title { display: block; font-size: 16px; font-weight: 600; letter-spacing: -.015em; }
.ot-search__meta { display: block; margin-top: 3px; color: var(--c-muted); font-size: 9px; letter-spacing: .12em; text-transform: uppercase; }
.ot-search mark { background: none; color: var(--c-orange); }

/* ---------- hero (v39 .hero / .service-hero + v2.css desktop + call 24/9 video) ---------- */
.ot-hero {
  position: relative; display: flex; align-items: flex-end; min-height: var(--ot-hero-h, 100svh); overflow: hidden;
  padding: 112px 24px 38px; color: var(--c-cream); isolation: isolate;
}
.ot-hero__content { position: relative; z-index: 3; width: 100%; max-width: 620px; transition: opacity .5s ease, transform .5s ease, visibility 0s; }
.ot-hero__media { position: absolute; inset: 0; z-index: 0; overflow: hidden; transition: left .6s var(--ease-panel), opacity .4s ease; }
.ot-hero__media img, .ot-hero__media video { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; object-position: var(--ot-pos, center); }
.ot-hero__media video { opacity: 0; transition: opacity .5s ease; }
.ot-hero__scrim { z-index: 1; transition: opacity .5s ease; }
.ot-hero .ot-grain { z-index: 2; }
.ot-hero__actions { display: flex; flex-wrap: wrap; align-items: center; gap: 18px 22px; }
/* playing (Netflix-like, owner 4/10): no player chrome — text + overlay fade out, the video fades in full-bleed;
   small brand circles (pause · sound · close) appear only while the pointer moves / on tap */
.ot-hero { --ot-hero-fade: 800ms; }
.ot-hero__content { transition: opacity var(--ot-hero-fade) var(--ease-out), transform var(--ot-hero-fade) var(--ease-out), visibility 0s; }
.ot-hero__scrim, .ot-hero .ot-grain, .ot-hero .ot-scroll-note { transition: opacity var(--ot-hero-fade) var(--ease-out); }
.ot-hero__media img { transition: opacity var(--ot-hero-fade) var(--ease-out); }
.ot-hero__media video { transition: opacity var(--ot-hero-fade) var(--ease-out); }
.ot-hero.is-playing .ot-hero__content { opacity: 0; transform: translateY(12px); visibility: hidden; transition: opacity var(--ot-hero-fade) var(--ease-out), transform var(--ot-hero-fade) var(--ease-out), visibility 0s linear var(--ot-hero-fade); }
.ot-hero.is-playing .ot-hero__scrim, .ot-hero.is-playing .ot-grain, .ot-hero.is-playing .ot-scroll-note { opacity: 0; }
.ot-hero.is-playing .ot-hero__media { left: 0 !important; -webkit-mask-image: none; mask-image: none; }
.ot-hero.is-playing .ot-hero__media img { opacity: 0; }
.ot-hero.is-playing .ot-hero__media video { opacity: 1; }
.ot-hero video::-webkit-media-controls { display: none !important; }
.ot-hero__controls {
  position: absolute; z-index: 4; right: 18px; bottom: 24px; display: flex; gap: 10px;
  opacity: 0; visibility: hidden; transform: translateY(6px);
  transition: opacity var(--dur-base) var(--ease-out), transform var(--dur-base) var(--ease-out), visibility 0s linear var(--dur-base);
}
.ot-hero.is-playing.is-ui .ot-hero__controls, .ot-hero.is-playing .ot-hero__controls:has(:focus-visible) {
  opacity: 1; visibility: visible; transform: none; transition: opacity var(--dur-base) var(--ease-out), transform var(--dur-base) var(--ease-out), visibility 0s;
}
.ot-hero.is-playing:not(.is-ui) { cursor: none; }
.ot-hero__controls [data-state="off"] .ot-i-on, .ot-hero__controls [data-state="on"] .ot-i-off { display: none; }
/* loop variant: muted 5–7 shot loop, click → full video in the lightbox */
.ot-hero--loop .ot-hero__media video { opacity: 1; }
.ot-hero--loop { --ot-tile-w: min(46vw, 600px); }
.ot-loop-open { position: absolute; z-index: 3; right: 18px; top: calc(var(--ot-header-h) + 12px); }

/* ---------- step form — v39 .form/.step/.chip/.input + call 24/9 (steps, budget only for «Οργάνωση») ---------- */
.ot-form { position: relative; padding: 11px 19px 19px; border-radius: var(--r-panel); color: var(--c-cream); }
.ot-step { padding: 23px 0; border-bottom: 1px solid var(--c-line-dark); }
.ot-step:last-of-type { border-bottom: 0; }
.ot-step__label { /* v39: .step-label (was DK Lemon) → sans label: numbering is never handwriting (4/10) */
  display: table; margin: 0 0 11px; padding-right: 8px; font: 600 12px/1.2 var(--f-sans); font-variant-numeric: tabular-nums;
  letter-spacing: var(--ls-label); text-transform: uppercase; color: var(--c-orange);
}
.ot-step__label::after { content: ""; display: block; width: 64%; height: 4px; margin-top: 6px; background: var(--x-brush) center / 100% 100% no-repeat; transform: rotate(-1.4deg) skewX(-3deg); transform-origin: left center; }
.ot-step__title { display: block; font-size: 19px; font-weight: 500; line-height: 1.25; letter-spacing: -.02em; }
.ot-step__note { margin-top: 5px; font: italic 12px/1.4 "Palatino Linotype", "Book Antiqua", Palatino, Georgia, serif; color: var(--c-muted); }  /* v39 V4 */
.ot-step__body { display: grid; grid-template-rows: 1fr; transition: grid-template-rows .32s ease, opacity .32s ease; }
.ot-step__body > div { min-height: 0; overflow: hidden; }
.ot-step[data-state="locked"] .ot-step__body { grid-template-rows: 0fr; opacity: 0; }
.ot-step[data-state="locked"] .ot-step__head { opacity: .38; }
.ot-step__head { transition: opacity .32s ease; }
.ot-fields { display: grid; grid-template-columns: 1fr 1fr; gap: 10px; margin-top: 13px; }
.ot-fields--one { grid-template-columns: 1fr; }
.ot-input {
  width: 100%; min-height: 48px; padding: 14px 2px; border: 0; border-bottom: 1px solid color-mix(in srgb, var(--c-cream) 22%, transparent); border-radius: 0;
  background: var(--x-input); color: var(--c-cream); font: 400 16px/1.3 var(--f-sans); outline: none; color-scheme: dark;
}
.ot-input:focus { border-bottom-color: var(--c-orange); box-shadow: 0 1px 0 var(--c-orange); }
.ot-input::placeholder { color: color-mix(in srgb, var(--c-cream) 50%, transparent); }
.ot-input[aria-invalid="true"] { border-bottom-color: var(--c-orange); }
select.ot-input { color: color-mix(in srgb, var(--c-cream) 78%, transparent); }
textarea.ot-input { min-height: 92px; resize: vertical; }
.ot-field-reveal { display: grid; grid-template-rows: 1fr; transition: grid-template-rows .28s ease, opacity .28s ease; }
.ot-field-reveal > * { min-height: 0; overflow: hidden; }
.ot-field-reveal[hidden] { display: grid; grid-template-rows: 0fr; opacity: 0; }
.ot-summary { margin-top: 12px; padding: 14px; border: 1px solid color-mix(in srgb, var(--c-orange) 20%, transparent); border-radius: 12px; background: color-mix(in srgb, var(--c-orange) 4.5%, transparent); color: color-mix(in srgb, var(--c-cream) 82%, transparent); font-size: 12px; line-height: 1.5; }
.ot-summary[hidden] { display: none; }
.ot-form .ot-btn { width: 100%; min-width: 0; margin-top: 18px; }
.ot-form__note { margin: 14px 0 0; padding: 12px 13px; border: 1px solid color-mix(in srgb, var(--c-orange) 22%, transparent); border-radius: 10px; color: var(--c-muted); font-size: 12px; line-height: 1.45; }
.ot-form__note[hidden] { display: none; }

/* ---------- FAQ — v39: .faq-list (V35) ---------- */
.ot-faq { margin-top: 31px; border-top: 1px solid var(--ot-line); }
.ot-faq details { border-bottom: 1px solid var(--ot-line); }
.ot-faq details::details-content { block-size: 0; overflow: hidden; transition: block-size .28s ease, content-visibility .28s allow-discrete; }
.ot-faq details[open]::details-content { block-size: auto; }
.ot-faq summary { position: relative; display: block; padding: 19px 44px 19px 0; color: var(--ot-fg); font-size: 16px; line-height: 1.3; list-style: none; cursor: pointer; }
.ot-faq summary::-webkit-details-marker { display: none; }
.ot-faq summary::before, .ot-faq summary::after { /* «+» drawn as two orange strokes (shape, ok on cream) */
  content: ""; position: absolute; top: 50%; right: 6px; width: 14px; height: 1.5px; background: var(--c-orange); transition: transform .2s ease;
}
.ot-faq summary::after { transform: rotate(90deg); }
.ot-faq details[open] summary::before { transform: rotate(45deg); }
.ot-faq details[open] summary::after { transform: rotate(135deg); }
.ot-faq summary:focus-visible { outline: 2px solid var(--c-orange); outline-offset: 2px; }
.ot-faq__a { margin: -2px 36px 21px 0; color: var(--ot-fg-2); font-size: 14px; line-height: 1.6; }

/* ---------- video façade & lightbox ---------- */
.ot-facade { /* poster + play; player loads on click (guideline rule 8) */
  appearance: none; position: relative; display: block; width: 100%; aspect-ratio: 16 / 9; padding: 0; overflow: hidden; border: 0; border-radius: var(--r-media);
  background: var(--c-void-3); color: var(--c-cream); cursor: pointer; text-align: left; isolation: isolate;
}
.ot-facade img { position: absolute; inset: 0; z-index: -1; width: 100%; height: 100%; object-fit: cover; transition: transform .6s ease; }
.ot-facade::after { content: ""; position: absolute; inset: 0; z-index: -1; background: linear-gradient(180deg, transparent 48%, rgb(0 0 0 / .65)); }
.ot-facade .ot-play__disc { position: absolute; top: 50%; left: 50%; margin: -32px 0 0 -32px; }
.ot-facade:hover img { transform: scale(1.03); }
.ot-facade:hover .ot-play__disc { transform: scale(1.06); }
.ot-facade__caption { position: absolute; right: 16px; bottom: 15px; left: 16px; display: flex; align-items: flex-end; justify-content: space-between; gap: 12px; }
.ot-facade__caption span:first-child { font-size: 19px; font-weight: 520; letter-spacing: -.02em; }
.ot-facade__caption span:last-child { font: 600 12px/1 var(--f-sans); font-variant-numeric: tabular-nums; letter-spacing: .08em; color: var(--c-orange); }   /* duration, sans */
.ot-facade iframe, .ot-facade video { position: absolute; inset: 0; width: 100%; height: 100%; border: 0; }

.ot-lightbox {
  position: fixed; z-index: 90; inset: 0; display: grid; grid-template-rows: auto 1fr auto; padding: 16px;
  background: color-mix(in srgb, var(--c-void) 92%, transparent); color: var(--c-cream);
  -webkit-backdrop-filter: blur(6px); backdrop-filter: blur(6px);
  opacity: 0; visibility: hidden; transition: opacity .25s ease, visibility 0s linear .25s;
}
.ot-lightbox.is-open { opacity: 1; visibility: visible; transition: opacity .25s ease, visibility 0s; }
.ot-lightbox__bar { display: flex; align-items: center; justify-content: space-between; gap: 12px; min-height: var(--tap); }
.ot-lightbox__count { font-size: 11px; letter-spacing: .14em; text-transform: uppercase; color: var(--c-muted); }
.ot-lightbox__count b { color: var(--c-cream); font-weight: 600; }
.ot-lightbox__stage { position: relative; display: grid; place-items: center; min-height: 0; touch-action: pan-y; }
.ot-lightbox__figure { display: grid; justify-items: center; gap: 12px; max-width: 100%; max-height: 100%; margin: 0; transition: opacity .2s ease, transform .2s ease; }
.ot-lightbox__figure.is-leaving { opacity: 0; transform: translateX(var(--ot-dir, 16px)); }
.ot-lightbox__figure img, .ot-lightbox__figure video, .ot-lightbox__figure iframe {
  display: block; max-width: min(100%, 1240px); max-height: calc(100svh - 190px); border-radius: var(--r-media); background: var(--x-black);
}
.ot-lightbox__figure video, .ot-lightbox__figure iframe { width: min(100vw - 32px, 1240px); aspect-ratio: 16 / 9; height: auto; border: 0; }
.ot-lightbox__caption { max-width: 60ch; text-align: center; font-size: 15px; line-height: 1.45; color: color-mix(in srgb, var(--c-cream) 86%, transparent); }
.ot-lightbox__caption .ot-meta { display: block; margin-bottom: 4px; }
.ot-lightbox__nav { display: flex; align-items: center; justify-content: center; gap: 14px; padding-top: 12px; }
.ot-lightbox__prev, .ot-lightbox__next { position: static; }

/* ---------- footer — v39: .footer-v35 + v2.css ---------- */
.ot-footer { padding: 32px 22px 42px; background: var(--x-footer); border-top: 1px solid var(--c-line-dark); color: var(--c-muted); }
.ot-footer__grid { display: grid; grid-template-columns: 1.08fr .92fr; gap: 28px; }
.ot-footer__grid > :last-child { text-align: right; }
.ot-footer__heading { display: block; margin-bottom: 8px; color: var(--c-cream); font-size: 10px; font-weight: 700; letter-spacing: .12em; text-transform: uppercase; }
.ot-footer__lines { margin: 0; padding: 0; list-style: none; font-size: 12px; line-height: 1.65; }
.ot-footer__lines a { display: inline-flex; align-items: center; min-height: var(--tap); color: inherit; text-decoration: none; }
.ot-footer__lines a:hover { color: var(--c-orange); }
.ot-footer__contact { display: grid; margin-top: 26px; border-top: 1px solid var(--c-line-dark); }
.ot-footer__contact a { display: grid; grid-template-columns: 1fr auto; gap: 15px; align-items: center; min-height: var(--tap); padding: 6px 0; border-bottom: 1px solid var(--c-line-dark); text-decoration: none; }
.ot-footer__label { color: var(--c-muted); font-size: 9px; letter-spacing: .12em; text-transform: uppercase; }
.ot-footer__value { color: color-mix(in srgb, var(--c-cream) 88%, var(--c-void)); font-size: 12px; text-align: right; overflow-wrap: anywhere; transition: color .16s ease; }
.ot-footer__contact a:hover .ot-footer__value, .ot-footer__contact a:focus-visible .ot-footer__value { color: var(--c-orange); }
.ot-social { display: flex; align-items: center; gap: 9px; margin-top: 20px; }
.ot-social a { display: grid; place-items: center; width: var(--tap); height: var(--tap); border: 1px solid color-mix(in srgb, var(--c-cream) 18%, transparent); border-radius: 50%; color: var(--c-cream); transition: color .2s ease, border-color .2s ease, background-color .2s ease; }
.ot-social a:hover, .ot-social a:focus-visible { color: var(--c-orange); border-color: color-mix(in srgb, var(--c-orange) 72%, transparent); background: color-mix(in srgb, var(--c-orange) 6%, transparent); outline: none; }
.ot-social svg { width: 16px; height: 16px; fill: currentColor; }
.ot-footer__bottom { margin-top: 24px; color: color-mix(in srgb, var(--c-muted) 80%, var(--c-void)); font-size: 10px; line-height: 1.55; }
.ot-footer__legal { display: flex; flex-wrap: wrap; gap: 0 16px; margin-top: 10px; }
.ot-footer__legal a { display: inline-flex; align-items: center; min-height: var(--tap); color: inherit; }

/* ---------- brush line family (owner direction 3/10) — tapered, hand-made, #ff6a00, used sparingly ----------
   Files: ../assets/shapes/brush-*.svg (filled tapered paths derived from the v39 eyebrow stroke).
   Draw-in: inline SVG = filled path masked by a stroke along its centreline (pathLength=1);
   stroke-dashoffset 1 → 0 reveals the brush in drawing order. Backgrounds reveal with clip-path.
   Content never depends on motion: without JS everything is already drawn. */
:root {
  --x-brush-long: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 240 14' preserveAspectRatio='none' fill='%23ff6a00'%3E%3Cpath d='M3.01 10.14L6.99 10.47 10.97 10.54 14.94 10.54 18.91 10.49 22.88 10.42 26.85 10.34 30.82 10.27 34.78 10.20 38.75 10.13 42.72 10.07 46.68 10.00 50.64 9.91 54.61 9.81 58.57 9.70 62.52 9.57 66.49 9.44 70.45 9.31 74.41 9.20 78.38 9.11 82.34 9.05 86.31 9.03 90.27 9.04 94.24 9.06 98.21 9.09 102.18 9.12 106.15 9.13 110.11 9.11 114.08 9.06 118.05 8.99 122.02 8.90 125.99 8.80 129.96 8.71 133.92 8.63 137.89 8.57 141.86 8.52 145.82 8.49 149.79 8.45 153.76 8.40 157.73 8.33 161.69 8.22 165.66 8.08 169.63 7.91 173.60 7.72 177.57 7.51 181.54 7.30 185.51 7.08 189.48 6.87 193.45 6.66 197.42 6.45 201.38 6.22 205.35 5.99 209.31 5.74 213.27 5.46 217.23 5.16 221.19 4.84 225.15 4.50 229.10 4.13 233.05 3.74 237.01 3.34 236.99 3.03 233.02 2.99 229.04 2.98 225.07 3.00 221.10 3.05 217.13 3.11 213.16 3.19 209.20 3.28 205.23 3.38 201.27 3.47 197.31 3.56 193.34 3.62 189.38 3.64 185.42 3.62 181.45 3.57 177.49 3.49 173.52 3.40 169.56 3.31 165.59 3.24 161.62 3.20 157.66 3.19 153.69 3.21 149.72 3.26 145.75 3.33 141.78 3.41 137.81 3.48 133.84 3.54 129.87 3.58 125.91 3.61 121.94 3.63 117.97 3.65 114.01 3.69 110.04 3.75 106.07 3.85 102.11 3.98 98.14 4.14 94.17 4.30 90.20 4.47 86.24 4.62 82.27 4.74 78.30 4.83 74.32 4.89 70.35 4.94 66.38 4.98 62.40 5.04 58.43 5.13 54.46 5.27 50.48 5.45 46.52 5.67 42.55 5.93 38.59 6.21 34.62 6.51 30.66 6.81 26.70 7.12 22.74 7.43 18.78 7.76 14.83 8.12 10.88 8.53 6.93 9.03 2.99 9.83Z'/%3E%3C/svg%3E");
  --x-brush-short: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 96 12' preserveAspectRatio='none' fill='%23ff6a00'%3E%3Cpath d='M2.01 8.52L4.39 8.88 6.77 9.00 9.14 9.07 11.51 9.10 13.87 9.08 16.24 9.00 18.59 8.89 20.95 8.78 23.31 8.68 25.68 8.64 28.04 8.64 30.40 8.67 32.77 8.69 35.13 8.68 37.48 8.62 39.83 8.53 42.18 8.43 44.54 8.36 46.90 8.32 49.26 8.31 51.62 8.29 53.98 8.24 56.35 8.13 58.71 7.96 61.08 7.75 63.44 7.52 65.81 7.30 68.18 7.11 70.55 6.94 72.92 6.75 75.28 6.54 77.64 6.27 80.00 5.96 82.34 5.60 84.69 5.23 87.03 4.86 89.36 4.47 91.69 4.04 94.01 3.52 93.99 3.26 91.60 3.15 89.22 3.19 86.86 3.27 84.49 3.35 82.13 3.43 79.77 3.50 77.41 3.58 75.06 3.68 72.72 3.80 70.37 3.91 68.03 3.97 65.68 3.96 63.32 3.88 60.96 3.75 58.60 3.63 56.24 3.54 53.88 3.52 51.52 3.57 49.16 3.67 46.79 3.77 44.42 3.85 42.05 3.90 39.68 3.94 37.30 4.01 34.93 4.15 32.57 4.37 30.21 4.64 27.85 4.93 25.50 5.20 23.14 5.42 20.78 5.59 18.42 5.73 16.06 5.89 13.71 6.09 11.35 6.36 9.00 6.69 6.66 7.08 4.32 7.53 1.99 8.26Z'/%3E%3C/svg%3E");
  --x-brush-divider: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 600 10' preserveAspectRatio='none' fill='%23ff6a00'%3E%3Cpath d='M2.00 6.09L8.70 6.12 15.40 6.13 22.09 6.11 28.79 6.09 35.49 6.05 42.18 6.00 48.88 5.95 55.58 5.91 62.27 5.87 68.97 5.83 75.67 5.80 82.36 5.78 89.06 5.78 95.76 5.78 102.45 5.79 109.15 5.80 115.85 5.82 122.54 5.84 129.24 5.86 135.94 5.88 142.63 5.90 149.33 5.92 156.02 5.94 162.71 5.96 169.41 5.98 176.10 6.01 182.80 6.05 189.49 6.09 196.19 6.14 202.89 6.20 209.58 6.27 216.28 6.35 222.97 6.44 229.67 6.53 236.37 6.63 243.06 6.72 249.76 6.80 256.46 6.87 263.16 6.93 269.85 6.97 276.55 6.99 283.25 6.98 289.95 6.96 296.65 6.91 303.35 6.85 310.05 6.76 316.75 6.67 323.45 6.58 330.14 6.48 336.84 6.38 343.54 6.29 350.23 6.21 356.93 6.13 363.63 6.07 370.33 6.01 377.02 5.95 383.72 5.90 390.42 5.85 397.11 5.80 403.81 5.74 410.50 5.68 417.20 5.62 423.89 5.56 430.59 5.49 437.28 5.42 443.98 5.36 450.67 5.31 457.37 5.27 464.06 5.24 470.76 5.22 477.46 5.20 484.15 5.20 490.85 5.21 497.55 5.22 504.24 5.24 510.94 5.26 517.64 5.28 524.33 5.30 531.03 5.31 537.72 5.31 544.42 5.30 551.12 5.28 557.82 5.26 564.51 5.22 571.21 5.18 577.91 5.12 584.60 5.06 591.30 4.98 598.00 4.89 598.00 4.69 591.30 4.51 584.61 4.33 577.91 4.16 571.22 4.00 564.52 3.86 557.82 3.72 551.13 3.60 544.43 3.49 537.74 3.40 531.04 3.32 524.34 3.25 517.64 3.20 510.95 3.16 504.25 3.12 497.55 3.08 490.86 3.05 484.16 3.02 477.46 2.98 470.76 2.95 464.07 2.91 457.37 2.87 450.67 2.84 443.97 2.82 437.27 2.80 430.57 2.81 423.87 2.83 417.18 2.87 410.48 2.92 403.78 2.99 397.08 3.07 390.39 3.17 383.69 3.27 376.99 3.37 370.30 3.47 363.60 3.56 356.91 3.64 350.21 3.70 343.51 3.74 336.82 3.77 330.12 3.77 323.43 3.75 316.73 3.72 310.04 3.67 303.34 3.62 296.65 3.56 289.96 3.49 283.26 3.43 276.57 3.38 269.87 3.33 263.18 3.29 256.48 3.26 249.79 3.24 243.09 3.22 236.40 3.21 229.70 3.19 223.00 3.17 216.31 3.15 209.61 3.12 202.91 3.09 196.21 3.05 189.51 3.02 182.82 2.98 176.12 2.95 169.42 2.94 162.72 2.93 156.02 2.95 149.32 2.99 142.62 3.06 135.92 3.14 129.22 3.25 122.53 3.37 115.83 3.50 109.13 3.64 102.44 3.79 95.74 3.94 89.04 4.08 82.35 4.22 75.65 4.36 68.96 4.48 62.26 4.61 55.56 4.73 48.87 4.84 42.17 4.96 35.48 5.08 28.78 5.22 22.08 5.36 15.39 5.52 8.69 5.70 2.00 5.89Z'/%3E%3C/svg%3E");
}
.ot-draw { display: inline-block; flex: 0 0 auto; overflow: visible; vertical-align: middle; }
.ot-draw__m { fill: none; stroke: #fff; stroke-linecap: butt; stroke-linejoin: round; stroke-dasharray: 1 1; stroke-dashoffset: 0;
  transition: stroke-dashoffset var(--dur-draw) var(--ease-out); }
.ot-draw__m + .ot-draw__m { transition-delay: calc(var(--dur-draw) * .45); }          /* 2nd stroke (arrow head, ×) follows */
.ot-js [data-draw="view"]:not(.is-drawn) .ot-draw__m { stroke-dashoffset: 1; transition: none; }
/* underline variants */
.ot-mark { position: relative; display: inline-block; }                                /* one word in a headline, max once per screen */
.ot-mark::after { content: ""; position: absolute; left: -2%; right: -4%; bottom: -.16em; height: .2em;
  background: var(--x-brush-long) center / 100% 100% no-repeat; pointer-events: none;
  clip-path: inset(0 0 0 0); transition: clip-path var(--dur-draw) var(--ease-out); }
.ot-underline-short, .ot-divider { position: relative; display: block; border: 0; }
.ot-underline-short { width: 72px; height: 9px; }
.ot-divider { height: 8px; margin: 40px 0; opacity: .8; }
.ot-underline-short::before, .ot-divider::before { /* brush on a pseudo so the clip-path reveal does not hide the element from IntersectionObserver */
  content: ""; position: absolute; inset: 0; clip-path: inset(0 0 0 0); transition: clip-path var(--dur-draw) var(--ease-out); }
.ot-underline-short::before { background: var(--x-brush-short) center / 100% 100% no-repeat; }
.ot-divider::before { background: var(--x-brush-divider) center / 100% 100% no-repeat; transition-duration: calc(var(--dur-draw) * 1.4); }
.ot-js .ot-eyebrow:not(.is-drawn)::after, .ot-js .ot-step__label:not(.is-drawn)::after,
.ot-js .ot-mark:not(.is-drawn)::after, .ot-js .ot-underline-short:not(.is-drawn)::before, .ot-js .ot-divider:not(.is-drawn)::before { clip-path: inset(0 100% 0 0); transition: none; }
.ot-eyebrow::after, .ot-step__label::after { transition: clip-path var(--dur-draw) var(--ease-out) 80ms; }
/* ring — drawn around icon circles on hover / keyboard focus (JS injects .ot-ring into .ot-icon-btn) */
.ot-ring { position: absolute; inset: -6px; width: calc(100% + 12px); height: calc(100% + 12px); color: var(--c-orange); pointer-events: none; }
.ot-ring .ot-draw__m { stroke-dashoffset: 1; transition-duration: var(--dur-fast); }
.ot-icon-btn:hover .ot-ring .ot-draw__m, .ot-icon-btn:focus-visible .ot-ring .ot-draw__m, .ot-ring.is-drawn .ot-draw__m { stroke-dashoffset: 0; transition-duration: var(--dur-draw); }
.ot-icon-btn:has(.ot-ring):hover { border-color: color-mix(in srgb, var(--c-cream) 26%, transparent); }   /* the ring replaces the border flash */
.ot-icon-btn--on-cream:has(.ot-ring):hover { border-color: color-mix(in srgb, var(--c-void) 25%, transparent); }
.ot-icon-btn:has(.ot-ring):focus-visible { outline-color: transparent; }                 /* ring = focus indicator (2.5px, orange) */
/* glyphs: brush arrow, chevron, close, check (fill = currentColor) */
.ot-glyph { width: 20px; height: 20px; fill: currentColor; }
.ot-icon-btn .ot-glyph { width: 20px; height: 20px; }
.ot-city__arrow { width: 20px; height: 20px; color: var(--c-orange); transition: transform var(--dur-fast) var(--ease-out); }
.ot-step__check { width: 0; height: 20px; margin-right: 0; color: var(--c-orange); vertical-align: -3px; transition: width var(--dur-fast) var(--ease-out), margin var(--dur-fast) var(--ease-out); }
.ot-step__check .ot-draw__m { stroke-dashoffset: 1; }
.ot-step[data-state="done"] .ot-step__check { width: 20px; margin-right: 6px; }
.ot-step[data-state="done"] .ot-step__check .ot-draw__m { stroke-dashoffset: 0; transition-delay: var(--dur-fast); }

/* ---------- scroll reveal (guideline · Κίνηση: fade-up 12px, 300ms, once; content visible without JS) ---------- */
.ot-js .ot-reveal { opacity: 0; transform: translateY(12px); transition: opacity var(--dur-base) var(--ease-out), transform var(--dur-base) var(--ease-out); }
.ot-js .ot-reveal.is-in { opacity: 1; transform: none; }

/* ---------- utilities ---------- */
.ot-sr { position: absolute !important; width: 1px; height: 1px; margin: -1px; padding: 0; overflow: hidden; clip: rect(0 0 0 0); white-space: nowrap; border: 0; }
.ot-skip { position: absolute; left: 12px; top: -80px; z-index: 1000; display: inline-flex; align-items: center; min-height: var(--tap); padding: 0 16px; background: var(--c-cream); color: var(--c-void); }
.ot-skip:focus { top: 12px; }
body.ot-locked { overflow: hidden; }

@media (min-width: 391px) {   /* v39 values above 390px (v39 had them as max-width:390 overrides) */
  .ot-menu__toggle, .ot-menu__direct { min-height: 57px; font-size: 34px; }
  .ot-menu__secondary a { font-size: 20px; }
  .ot-carousel { --ot-per: 43%; }
  .ot-carousel--feature { --ot-per: 76%; }
}
@media (min-width: 361px) {
  .ot-search { top: 12px; }
  .ot-search.is-open { width: calc(100% - 28px); }
}
/* ======================= tablet ≥768 ======================= */
@media (min-width: 768px) {
  .ot-carousel { --ot-per: calc((100% - 2 * var(--ot-gap)) / 2.6); }
  .ot-carousel--wide { --ot-per: calc((100% - var(--ot-gap)) / 1.7); }
  .ot-carousel--feature { --ot-per: calc((100% - var(--ot-gap)) / 1.6); }
}

/* ======================= desktop ≥1024 (v2.css + call 24/9) ======================= */
@media (min-width: 1024px) {
  .ot-eyebrow { margin-bottom: 22px; }
  .ot-hero-copy { max-width: 520px; font-size: 19px; }
  .ot-locations { font-size: 12px; }
  .ot-scroll-note { right: max(var(--gutter), calc((100% - var(--container)) / 2)); bottom: 72px; font-size: 10px; }
  .ot-breadcrumb { font-size: 11px; }
  .ot-faq summary { font-size: 19px; }
  .ot-faq__a { font-size: var(--fs-body); max-width: 70ch; }
  .ot-btn { font-size: 12px; }
  .ot-link { font-size: 11px; }
  .ot-chip { font-size: 13px; padding-inline: 18px; }

  .ot-card__title { font-size: 24px; }
  .ot-card__text { font-size: 13px; }
  .ot-card__body { inset: auto 18px 20px 18px; }
  .ot-city__label { font-size: 11px; }
  .ot-city__cta { font-size: 15px; }
  .ot-project .ot-card__title { font-size: 30px; }
  .ot-project .ot-card__text { font-size: 14px; }
  .ot-review__text { font-size: 21px; }
  .ot-stats { grid-template-columns: repeat(4, 1fr); margin-top: 48px; }
  .ot-stat { padding: 36px 28px; }
  .ot-stat b { font-size: 64px; }
  .ot-stat span { font-size: 11px; }
  .ot-service-row { font-size: 26px; padding-block: 24px; }

  /* carousels: arrows on desktop (call 24/9), swipe stays on touch */
  .ot-carousel { --ot-per: calc((100% - 3 * var(--ot-gap)) / 4); --ot-gap: 20px; }
  .ot-carousel--5 { --ot-per: calc((100% - 4 * var(--ot-gap)) / 5); }
  .ot-carousel--wide { --ot-per: calc((100% - 2 * var(--ot-gap)) / 3); }
  .ot-carousel--feature { --ot-per: calc((100% - 2 * var(--ot-gap)) / 3); }
  .ot-carousel__track { padding-right: 0; margin-right: 0; }
  .ot-carousel__controls { justify-content: space-between; }
  .ot-carousel__arrows { display: flex; }
  .ot-carousel.is-static .ot-carousel__controls { display: none; }    /* everything fits → no controls */
  .ot-carousel--grid-desktop .ot-carousel__track { grid-auto-flow: row; grid-template-columns: repeat(var(--ot-cols, 4), 1fr); overflow: visible; }
  .ot-carousel--grid-desktop .ot-carousel__controls { display: none; }

  /* header: open nav instead of hamburger (v2.css) */
  .ot-topbar {
    gap: 18px; min-height: 76px; padding: 14px max(var(--gutter), calc((100% - var(--container)) / 2));
    background: rgb(11 11 11 / .9); -webkit-backdrop-filter: blur(10px); backdrop-filter: blur(10px);
  }
  .ot-topbar__logo { width: 150px; }
  .ot-topbar__nav { display: flex; align-items: center; gap: 18px; }
  .ot-topbar__nav > a, .ot-dd__btn { font-size: 13px; }
  .ot-topbar__cta { padding-inline: 16px; letter-spacing: .08em; }
  .ot-topbar__search { position: static; transform: none; }
  .ot-topbar__search:active { transform: scale(.94); }
  .ot-topbar__cta { display: inline-flex; }
  .ot-topbar__menu, .ot-menu { display: none; }
  .ot-search { left: auto; right: max(var(--gutter), calc((100% - var(--container)) / 2)); top: 16px; transform: none; }
  .ot-search.is-open { width: 560px; }

  /* hero: text left, media right that melts into the void; full width when playing */
  .ot-hero { align-items: center; padding: 140px max(var(--gutter), calc((100% - var(--container)) / 2)) 72px; }
  .ot-hero__media--right { left: 44%; -webkit-mask-image: linear-gradient(to right, transparent 0%, #000 38%); mask-image: linear-gradient(to right, transparent 0%, #000 38%); }
  .ot-hero--loop .ot-hero__media { inset: auto max(var(--gutter), calc((100% - var(--container)) / 2)) auto auto; top: 50%; left: auto; width: var(--ot-tile-w); aspect-ratio: 16 / 9; transform: translateY(-50%); border-radius: var(--r-media); -webkit-mask-image: none; mask-image: none; box-shadow: 0 30px 80px rgb(0 0 0 / .45); }
  .ot-hero--loop .ot-hero__scrim { display: none; }
  .ot-loop-open { top: auto; left: auto; right: calc(max(var(--gutter), calc((100% - var(--container)) / 2)) + 16px); bottom: calc(50% - var(--ot-tile-w) * 9 / 32 + 16px); }
  .ot-hero--loop .ot-hero__content { max-width: min(560px, 46%); }
  .ot-hero__controls { right: max(var(--gutter), calc((100% - var(--container)) / 2)); bottom: 40px; }

  .ot-form { padding: 16px 32px 28px; }
  .ot-fields { gap: 16px; }
  .ot-step__note { font-size: 13px; }
  .ot-step__title { font-size: 22px; }

  .ot-lightbox { padding: 24px 32px; grid-template-columns: var(--tap) 1fr var(--tap); grid-template-rows: auto 1fr; column-gap: 24px; }
  .ot-lightbox__bar { grid-column: 1 / -1; }
  .ot-lightbox__stage { grid-column: 2; grid-row: 2; }
  .ot-lightbox__nav { display: contents; }
  .ot-lightbox__prev { grid-column: 1; grid-row: 2; align-self: center; }
  .ot-lightbox__next { grid-column: 3; grid-row: 2; align-self: center; }
  .ot-lightbox__figure img, .ot-lightbox__figure video, .ot-lightbox__figure iframe { max-height: calc(100svh - 170px); }
  .ot-lightbox__figure video, .ot-lightbox__figure iframe { width: min(100vw - 200px, 1240px); }

  .ot-footer { padding: 64px max(var(--gutter), calc((100% - var(--container)) / 2)) 48px; }
  .ot-footer__grid { grid-template-columns: 1fr 1fr; }
  .ot-footer__contact { grid-template-columns: 1fr 1fr; column-gap: 64px; }
  .ot-footer__lines { font-size: 14px; }
  .ot-footer__value { font-size: 13px; }
}
@media (min-width: 1280px) {  /* v2.css: roomier header from 1280 */
  .ot-topbar { gap: 28px; }
  .ot-topbar__nav { gap: 26px; }
  .ot-topbar__nav > a, .ot-dd__btn { font-size: 14px; }
  .ot-topbar__cta { padding-inline: 22px; letter-spacing: .14em; }
}

/* ======================= reduced motion (v39 block + video/ticker) ======================= */
@media (prefers-reduced-motion: reduce) {
  *, *::before, *::after { scroll-behavior: auto !important; animation-duration: .01ms !important; animation-iteration-count: 1 !important; transition-duration: .01ms !important; }
  .ot-hero { --ot-hero-fade: 0ms; }
  .ot-ticker__track { animation: none !important; flex-wrap: wrap; width: auto; white-space: normal; row-gap: 12px; }
  .ot-ticker__track [aria-hidden="true"] { display: none; }
  .ot-js .ot-reveal { opacity: 1; transform: none; }
  .ot-card:hover .ot-card__media, .ot-facade:hover img { transform: none; }
  .ot-js [data-draw="view"]:not(.is-drawn) .ot-draw__m, .ot-step__check .ot-draw__m { stroke-dashoffset: 0; }
  .ot-js .ot-eyebrow:not(.is-drawn)::after, .ot-js .ot-step__label:not(.is-drawn)::after,
  .ot-js .ot-mark:not(.is-drawn)::after, .ot-js .ot-underline-short:not(.is-drawn)::before, .ot-js .ot-divider:not(.is-drawn)::before { clip-path: inset(0 0 0 0); }
  .ot-ring .ot-draw__m { stroke-dashoffset: 1 !important; }
  .ot-icon-btn:hover .ot-ring .ot-draw__m, .ot-icon-btn:focus-visible .ot-ring .ot-draw__m { stroke-dashoffset: 0 !important; }
  .ot-btn:hover .ot-btn__arrow, .ot-city:hover .ot-city__arrow { --ot-fly: 0px; transform: none; }
}

/* task 61 (6/10): date field = native calendar; visible placeholder while empty (date inputs ignore placeholder) */
.ot-datefield { position: relative; display: block; }
.ot-datefield__ph { position: absolute; left: 2px; top: 50%; transform: translateY(-50%); pointer-events: none; color: color-mix(in srgb, var(--c-cream) 50%, transparent); font: 400 16px/1.3 var(--f-sans); }
.ot-datefield:has(input:valid) .ot-datefield__ph, .ot-datefield:has(input:focus) .ot-datefield__ph { display: none; }
.ot-datefield input:invalid:not(:focus)::-webkit-datetime-edit { color: transparent; }
.ot-datefield input:invalid:not(:focus) { color: transparent; } /* Firefox shows dd/mm/yyyy under the label otherwise */
.ot-datefield input[type="date"] { min-height: 48px; cursor: pointer; }
.ot-datefield input[type="date"]::-webkit-calendar-picker-indicator { cursor: pointer; opacity: .75; }
/* form band is cream now (task 61): keep a seam if the band before it is cream as well */
.ot-band--cream + .ot-band--cream.ot-contact { border-top: 1px solid var(--c-line-light); }