/* One Take 2026 — theme layer on top of the design pool (tokens.css → components.css → this).
Only page scaffolding the pool does not cover: base, section heads, grids, prose, page heads,
contact layout, packages, sticky CTA, cookie banner. Mobile-first; 768 / 1024 / 1366. */
/* ---------- base ---------- */
*, *::before, *::after { box-sizing: border-box; }
html { -webkit-text-size-adjust: 100%; text-size-adjust: 100%; background: var(--c-void); scroll-padding-top: calc(var(--ot-header-h) + 8px); }
body { margin: 0; background: var(--c-void); color: var(--c-cream); font: 400 var(--fs-body)/var(--lh-body) var(--f-sans); -webkit-font-smoothing: antialiased; overflow-x: clip; }
img, video, svg, iframe { max-width: 100%; }
img { height: auto; }
a { color: inherit; }
h1, h2, h3, h4 { margin: 0; }
p { margin: 0 0 1em; }
button, input, select, textarea { font: inherit; }
main { display: block; outline: 0; }
:focus-visible { outline: 2px solid var(--c-orange); outline-offset: 3px; }
::selection { background: var(--c-orange); color: var(--c-void); }
[hidden] { display: none !important; }
.ot-field-reveal[hidden] { display: grid !important; } /* pool animates the reveal */
/* ---------- header extras ---------- */
.ot-topbar.is-scrolled { background: linear-gradient(180deg, rgb(0 0 0 / .86), rgb(0 0 0 / .55)); }
.ot-topbar__lang { display: none; }
.ot-topbar__cta .ot-cta-short { display: none; }
.ot-topbar__nav a[aria-current="page"] { color: var(--c-orange); }
@media (min-width: 1024px) {
.ot-topbar.is-scrolled { background: rgb(11 11 11 / .94); }
.ot-topbar__nav { margin-left: auto; }
.ot-topbar__logo { margin-right: 0; }
.ot-topbar__lang { display: inline-flex; background: rgb(255 255 255 / .04); }
.ot-topbar__lang a { min-width: 36px; min-height: 32px; padding: 0 8px; color: var(--c-muted); }
.ot-topbar__lang a[aria-current="page"] { background: var(--c-cream); color: var(--c-void); }
/* 1024–1365: short CTA «Προσφορά» (q16) */
.ot-topbar__cta .ot-cta-long { display: none; }
.ot-topbar__cta .ot-cta-short { display: inline; }
}
@media (min-width: 1366px) {
.ot-topbar__cta .ot-cta-long { display: inline; }
.ot-topbar__cta .ot-cta-short { display: none; }
}
/* ---------- hero variants ---------- */
.ot-hero--page { --ot-hero-h: 78svh; }
.ot-hero--home { --ot-hero-h: 100svh; }
.ot-hero .ot-breadcrumb { margin-bottom: 14px; }
.ot-hero .ot-h1 { overflow-wrap: anywhere; hyphens: manual; }
.ot-hero--page .ot-h1 { font-size: clamp(34px, 9vw, 72px); }
@media (min-width: 1024px) {
.ot-hero--page { --ot-hero-h: 640px; }
.ot-hero--home { --ot-hero-h: min(100svh, 860px); }
.ot-hero__content { max-width: 640px; }
}
/* ---------- page head (no media hero) ---------- */
.ot-page-head { padding: calc(var(--ot-header-h) + 34px) 0 44px; border-bottom: 1px solid var(--c-line-dark); }
.ot-h1--page { font-size: clamp(32px, 7.5vw, 64px); max-width: 22ch; overflow-wrap: anywhere; }
.ot-page-head__meta { margin: 6px 0 0; color: var(--c-muted); }
.ot-page-head__intro { margin: 18px 0 0; opacity: .82; }
.ot-page-head__intro p:last-child { margin-bottom: 0; }
@media (min-width: 1024px) { .ot-page-head { padding: 150px 0 64px; } }
/* ---------- section heads ---------- */
.ot-section-head { margin-bottom: 28px; }
.ot-section-head .ot-intro { margin-bottom: 0; }
.ot-section-head .ot-h2 { max-width: 20ch; }
.ot-more { margin: 22px 0 0; }
@media (min-width: 1024px) {
.ot-section-head { display: grid; grid-template-columns: minmax(0, 1.1fr) minmax(0, .9fr); column-gap: 64px; align-items: end; margin-bottom: 40px; }
.ot-section-head .ot-eyebrow { grid-column: 1 / -1; }
.ot-section-head .ot-h2 { margin-bottom: 0; }
.ot-section-head .ot-intro { justify-self: end; }
}
/* ---------- BLUF ---------- */
.ot-bluf { padding-block: clamp(44px, 6vw, 80px); }
.ot-bluf__text { max-width: 880px; font-size: clamp(19px, 2.1vw, 27px); line-height: 1.42; letter-spacing: -.015em; }
.ot-bluf__text p:last-child { margin-bottom: 0; }
.ot-bluf__text a { text-decoration-color: var(--c-orange); text-underline-offset: 4px; }
/* ---------- prose (imported HTML) ---------- */
.ot-prose { max-width: 820px; }
.ot-prose h2 { margin: 1.6em 0 .55em; font-size: clamp(24px, 3vw, 36px); font-weight: 700; line-height: 1.12; letter-spacing: -.025em; }
.ot-prose h3 { margin: 1.4em 0 .5em; font-size: var(--fs-h3); font-weight: 700; line-height: 1.2; }
.ot-prose h4 { margin: 1.2em 0 .4em; font-size: 17px; }
.ot-prose > :first-child { margin-top: 0; }
.ot-prose p, .ot-prose li { font-size: var(--fs-body); line-height: 1.72; }
.ot-prose ul, .ot-prose ol { padding-left: 1.2em; margin: 0 0 1.2em; }
.ot-prose li { margin: .25em 0; }
.ot-prose li::marker { color: var(--c-orange); }
.ot-prose img, .ot-prose figure { display: block; max-width: 100%; height: auto; margin: 1.6em 0; border-radius: var(--r-media); }
.ot-prose figure img { margin: 0; }
.ot-prose figcaption { margin-top: 8px; font-size: 13px; color: var(--ot-fg-2); }
.ot-prose iframe, .ot-prose video { display: block; width: 100%; aspect-ratio: 16 / 9; height: auto; border: 0; border-radius: var(--r-media); margin: 1.6em 0; }
.ot-prose blockquote { margin: 1.6em 0; padding: 4px 0 4px 20px; border-left: 3px solid var(--c-orange); font-size: 1.1em; }
.ot-prose table { width: 100%; border-collapse: collapse; margin: 1.6em 0; font-size: 15px; display: block; overflow-x: auto; }
.ot-prose th, .ot-prose td { padding: 12px 14px; border-bottom: 1px solid var(--ot-line); text-align: left; vertical-align: top; }
.ot-prose th { font-weight: 700; }
.ot-prose hr { border: 0; height: 8px; margin: 40px 0; background: var(--x-brush-divider) center / 100% 100% no-repeat; opacity: .8; }
.ot-prose strong { font-weight: 700; }
.ot-prose--article { max-width: 760px; margin-inline: auto; }
.ot-light .ot-prose a { color: var(--c-void); }
/* ---------- tl;dr / article ---------- */
.ot-tldr { padding-block: 36px; }
.ot-tldr__box { max-width: 760px; margin-inline: auto; padding: 22px 22px 6px; border-left: 4px solid var(--c-orange); background: rgb(255 255 255 / .35); border-radius: 0 var(--r-media) var(--r-media) 0; font-size: clamp(17px, 1.6vw, 20px); line-height: 1.5; }
.ot-article__wrap { max-width: 860px; }
.ot-article__fig { margin: 0 0 40px; }
.ot-article__fig img { display: block; width: 100%; border-radius: var(--r-media); }
/* ---------- main media (project) ---------- */
.ot-main-media { padding-block: 32px 0; }
.ot-main-media__fig { margin: 0; }
.ot-main-media__fig img { display: block; width: 100%; max-height: 78svh; object-fit: cover; border-radius: var(--r-media); }
/* ---------- grids ---------- */
.ot-grid { display: grid; gap: 16px; grid-template-columns: 1fr; margin: 0; padding: 0; }
@media (min-width: 768px) { .ot-grid--3, .ot-grid--cards { grid-template-columns: repeat(2, 1fr); } }
@media (min-width: 1024px) { .ot-grid--3, .ot-grid--cards { grid-template-columns: repeat(3, 1fr); gap: 20px; } }
.ot-grid--cards .ot-card { --ot-card-ratio: 4 / 5; }
/* ---------- carousels ---------- */
.ot-carousel--videos { --ot-per: 86%; }
.ot-carousel--videos .ot-facade { aspect-ratio: 16 / 9; }
.ot-carousel--gallery .ot-card { --ot-card-ratio: 4 / 5; }
@media (min-width: 768px) { .ot-carousel--videos { --ot-per: calc((100% - var(--ot-gap)) / 1.6); } }
@media (min-width: 1024px) { .ot-carousel--videos { --ot-per: calc((100% - 2 * var(--ot-gap)) / 3); } }
.ot-video-single { max-width: 980px; }
/* mobile: carousels bleed to the right edge only inside the wrap */
.ot-carousel__track { scroll-padding-left: 0; }
/* ---------- chips (static lists) ---------- */
.ot-chips--static { list-style: none; padding: 0; margin: 0; }
.ot-chips--static .ot-chip { cursor: default; }
.ot-chips--static a.ot-chip { cursor: pointer; text-decoration: none; }
.ot-light .ot-chips--static a.ot-chip { text-decoration: underline; text-decoration-color: var(--c-orange); text-underline-offset: 3px; }
/* ---------- numbered (non-link) ---------- */
.ot-numbered--static li { border-bottom: 1px solid var(--ot-line); }
.ot-numbered__row { display: grid; grid-template-columns: 34px 1fr; gap: 10px; padding: 18px 0; }
.ot-numbered__row strong { display: block; font-size: 18px; font-weight: 600; }
.ot-numbered__row p { margin: 6px 0 0; color: var(--ot-fg-2); font-size: 15px; line-height: 1.55; }
.ot-numbered li { list-style: none; }
/* ---------- price / packages / practical ---------- */
.ot-price .ot-stat b small { font-size: .4em; font-weight: 600; letter-spacing: .06em; text-transform: uppercase; vertical-align: middle; color: var(--ot-fg-2); }
.ot-price__factors-h { margin-top: 32px; }
.ot-package { position: relative; display: flex; flex-direction: column; gap: 10px; margin: 0; padding: 24px 20px 20px; border: 1px solid var(--ot-line); border-radius: var(--r-card); background: rgb(255 255 255 / .03); }
.ot-light .ot-package { background: rgb(255 255 255 / .3); }
.ot-package .ot-h3 { margin: 0; }
.ot-package__list { margin: 0; padding: 0 0 0 1.1em; font-size: 15px; line-height: 1.55; color: var(--ot-fg-2); flex: 1; }
.ot-package__list li::marker { color: var(--c-orange); }
.ot-package__price { margin: 6px 0 0; font-size: 28px; font-weight: 700; letter-spacing: -.03em; }
.ot-package__price small { font-size: 12px; text-transform: uppercase; letter-spacing: .1em; color: var(--ot-fg-2); }
.ot-practical__list dd { margin: 0; color: var(--ot-fg-2); font-size: 15px; line-height: 1.55; }
/* ---------- split (image + text) ---------- */
.ot-split { display: grid; gap: 28px; align-items: center; }
.ot-split__media img { display: block; width: 100%; height: auto; border-radius: var(--r-media); }
@media (min-width: 1024px) {
.ot-split { grid-template-columns: 1fr 1fr; gap: 64px; }
.is-reverse .ot-split__media { order: 2; }
}
.ot-target__card { max-width: 320px; }
.ot-quote--sm { font-size: clamp(22px, 3vw, 32px); }
.ot-quote-band .ot-quote { max-width: 26ch; }
/* ---------- logos ticker with images ---------- */
.ot-ticker__logo img { display: block; height: 34px; width: auto; max-width: 150px; object-fit: contain; filter: grayscale(1); opacity: .8; }
.ot-dark .ot-ticker__logo img { filter: grayscale(1) brightness(0) invert(1); opacity: .7; }
/* ---------- contact / form band ---------- */
.ot-contact__grid { display: grid; gap: 36px; }
.ot-contact__intro .ot-h2 { max-width: 14ch; }
@media (min-width: 1024px) {
.ot-contact__grid { grid-template-columns: minmax(0, .9fr) minmax(0, 1.1fr); gap: 72px; align-items: start; }
.ot-contact__intro { position: sticky; top: 110px; }
}
.ot-phones { list-style: none; margin: 28px 0 0; padding: 0; display: grid; gap: 6px; }
.ot-phones a, .ot-phones li > div { display: flex; align-items: center; gap: 14px; min-height: var(--tap); padding: 6px 0; color: var(--ot-fg); text-decoration: none; }
.ot-phones a:hover { color: var(--c-orange); }
.ot-phones small { display: block; font-size: 10px; letter-spacing: .12em; text-transform: uppercase; color: var(--ot-fg-2); }
.ot-phones .ot-icon-btn { pointer-events: none; }
.ot-phones--cards { gap: 10px; }
.ot-phones--cards a, .ot-phones--cards li > div { padding: 12px 14px; border: 1px solid var(--ot-line); border-radius: var(--r-card); font-size: 18px; }
.ot-form__legal { margin: 14px 0 0; font-size: 11px; line-height: 1.5; color: var(--c-muted); }
.ot-form__legal a { color: inherit; text-decoration: none; } /* 20/10 Xenofon: no orange underline on the consent line (all forms); a quiet underline on hover only */
.ot-form__legal a:is(:hover, :focus-visible) { text-decoration: underline; text-decoration-color: currentColor; text-underline-offset: 2px; }
.ot-hp { position: absolute !important; left: -9999px; width: 1px; height: 1px; overflow: hidden; }
.ot-form.is-sent .ot-step { opacity: .5; pointer-events: none; }
/* ---------- CTA band ---------- */
.ot-cta-band__inner { display: grid; gap: 22px; justify-items: start; }
.ot-cta-band__text { margin: 0; max-width: 28ch; font-size: clamp(24px, 3.2vw, 40px); font-weight: 700; line-height: 1.1; letter-spacing: -.03em; }
@media (min-width: 1024px) { .ot-cta-band__inner { grid-template-columns: 1fr auto; align-items: center; } }
/* ---------- archive ---------- */
.ot-archive__cats, .ot-archive__filter { margin: 0 0 22px; }
.ot-archive__cats .ot-chip { text-decoration: none; }
.ot-archive__cats .ot-chip[aria-current="page"] { border-color: var(--c-orange); background: color-mix(in srgb, var(--c-orange) 12%, transparent); font-weight: 600; }
.ot-postcard .ot-card__title { font-size: 21px; }
.ot-pager { display: flex; align-items: center; justify-content: space-between; gap: 16px; margin-top: 36px; }
.ot-pager__count { color: var(--c-muted); font-size: 12px; letter-spacing: .12em; }
/* ---------- map card ---------- */
.ot-map__card { --ot-card-ratio: 16 / 9; max-width: 980px; }
@media (max-width: 767px) { .ot-map__card { --ot-card-ratio: 4 / 5; } }
/* ---------- 404 ---------- */
.ot-notfound .ot-hero__actions { margin: 10px 0 30px; }
/* ---------- sticky mobile CTA ---------- */
.ot-sticky {
position: fixed; z-index: 45; left: 12px; right: 12px; bottom: max(12px, env(safe-area-inset-bottom));
display: flex; gap: 10px; align-items: center; justify-content: flex-end;
opacity: 0; transform: translateY(16px); pointer-events: none; transition: opacity var(--dur-base) var(--ease-out), transform var(--dur-base) var(--ease-out);
}
.ot-sticky.is-on { opacity: 1; transform: none; pointer-events: auto; }
.ot-sticky .ot-icon-btn svg { width: 18px; height: 18px; }
.ot-sticky__cta { min-width: 0; min-height: 48px; padding-left: 18px; gap: 12px; background: rgb(11 11 11 / .86); }
.ot-sticky__cta .ot-btn__arrow { width: 32px; height: 32px; }
@media (min-width: 1024px) { .ot-sticky { display: none; } }
/* ---------- cookie banner (light) ---------- */
.ot-cookie {
position: fixed; z-index: 70; left: 12px; right: 12px; bottom: 12px; display: grid; gap: 12px; max-width: 560px; padding: 16px 16px 14px;
border-radius: var(--r-card); background: var(--c-cream); color: var(--c-void); box-shadow: 0 20px 60px rgb(0 0 0 / .4);
}
.ot-cookie__text { margin: 0; font-size: 13px; line-height: 1.5; }
.ot-cookie__text a { color: var(--c-void); text-decoration-color: var(--c-orange); text-underline-offset: 3px; }
.ot-cookie__actions { display: flex; flex-wrap: wrap; gap: 10px; }
.ot-cookie .ot-btn--secondary { color: var(--c-void); min-height: 40px; padding: 0 16px; font-size: 11px; }
.ot-cookie .ot-cookie__accept { background: var(--c-void); border-color: var(--c-void); color: var(--c-cream); }
.ot-cookie .ot-cookie__accept:hover { background: var(--c-orange); border-color: var(--c-orange); color: var(--c-void); }
@media (min-width: 768px) { .ot-cookie { left: 24px; bottom: 24px; } }
/* ---------- footer extras ---------- */
.ot-footer__lines li { list-style: none; }
.ot-footer { padding-bottom: 96px; }
@media (min-width: 1024px) { .ot-footer { padding-bottom: 48px; } }
/* hero with an mp4 but no poster image: the first frame is the poster */
.ot-hero--vposter .ot-hero__media video { opacity: .9; }
/* reviews: full text, clamped with «περισσότερα» */
.ot-review__text.is-clamped { display: -webkit-box; -webkit-line-clamp: 6; -webkit-box-orient: vertical; overflow: hidden; }
.ot-review__more { align-self: flex-start; margin: -10px 0 14px; min-height: 36px; }
.ot-review__more::after { content: none; }
/* home hero pillars line (PLANNING · ENTERTAINMENT · IMAGE · PRODUCTION) */
.ot-hero-pillars { margin: -6px 0 18px; font: 700 var(--fs-label)/1.4 var(--f-sans); letter-spacing: var(--ls-label); text-transform: uppercase; color: var(--c-orange); }
.ot-hero--home .ot-h1 { font-size: clamp(36px, 9.6vw, 84px); }
/* trusted: logos + reviews in one band */
.ot-trusted .ot-ticker { margin-bottom: 36px; }
.ot-seo .ot-prose p { font-size: clamp(16px, 1.3vw, 18px); }
.ot-section-head .ot-eyebrow, .ot-contact__intro .ot-eyebrow { justify-self: start; width: fit-content; }
.ot-ticker__logo img { height: 40px; }
/* carousel dash indicator: never wider than the screen (14 items × 44px overflowed at 390 → zoomed-out page) */
.ot-carousel__controls { min-width: 0; max-width: 100%; }
.ot-dots { flex-wrap: wrap; min-width: 0; max-width: 100%; }
@media (max-width: 1023px) { .ot-dot { min-width: 26px; width: 26px; } }
.ot-prose__video { margin: 1.6em 0; max-width: 760px; }
/* imported galleries inside prose (one image per paragraph) → grid of tiles */
.ot-prose > p:has(> img:only-child), .ot-prose > p:has(> a:only-child > img) { display: inline-block; width: calc(50% - 6px); margin: 0 8px 8px 0; vertical-align: top; }
.ot-prose > p:has(> img:only-child) img, .ot-prose > p:has(> a:only-child > img) img { width: 100%; aspect-ratio: 4 / 3; object-fit: cover; margin: 0; }
@media (min-width: 1024px) {
.ot-prose > p:has(> img:only-child), .ot-prose > p:has(> a:only-child > img) { width: calc(33.333% - 8px); }
}
/* ---------- 4/10 polish ---------- */
/* [gallery] grid in project/article text: 2 cols mobile, 3 tablet, 4 desktop */
.ot-gallery-grid { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 8px; margin: 28px 0; }
@media (min-width: 768px) { .ot-gallery-grid { grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 12px; } }
@media (min-width: 1024px) { .ot-gallery-grid { grid-template-columns: repeat(4, minmax(0, 1fr)); } }
.ot-gallery-grid__item { display: block; aspect-ratio: 4 / 5; overflow: hidden; border-radius: var(--r-media); background: var(--c-void-2); }
.ot-gallery-grid__item img { display: block; width: 100%; height: 100%; object-fit: cover; transition: transform .5s var(--ease-out, ease); }
.ot-gallery-grid__item:hover img, .ot-gallery-grid__item:focus-visible img { transform: scale(1.04); }
.ot-prose .gallery { display: contents; } /* legacy wrapper if any */
/* article hero: never a full-screen portrait */
.ot-article__fig img { aspect-ratio: 16 / 9; max-height: 62svh; object-fit: cover; object-position: center 30%; }
/* price factors as a readable list (not chips) */
.ot-price__factors { margin: 0 0 8px; padding-left: 1.1em; max-width: 760px; line-height: 1.55; }
.ot-price__factors li { margin: 0 0 6px; }
.ot-price__factors li::marker { color: var(--c-orange); }
.ot-price-band .ot-more { margin-top: 24px; }
/* contact map façade (no iframe, no API): branded street grid + pin */
.ot-map__card--facade { background: var(--c-void-2); }
.ot-map__facade { position: absolute; inset: 0; display: block;
background:
radial-gradient(circle at 50% 46%, color-mix(in srgb, var(--c-orange) 22%, transparent), transparent 34%),
repeating-linear-gradient(28deg, transparent 0 46px, rgb(255 255 255 / .07) 46px 48px),
repeating-linear-gradient(-62deg, transparent 0 70px, rgb(255 255 255 / .06) 70px 73px),
linear-gradient(160deg, #1d1d1d, #0e0e0e); }
.ot-map__pin { position: absolute; left: 50%; top: 46%; width: 34px; height: 34px; translate: -50% -100%; background: var(--c-orange);
border-radius: 50% 50% 50% 0; rotate: -45deg; box-shadow: 0 6px 18px rgb(0 0 0 / .45); }
.ot-map__pin::after { content: ""; position: absolute; inset: 11px; border-radius: 50%; background: var(--c-void); }
.ot-prose:has(.ot-gallery-grid) { max-width: 1240px; }
.ot-prose:has(.ot-gallery-grid) > :not(.ot-gallery-grid):not(h2):not(h3) { max-width: 820px; }
.ot-map__card--facade .ot-card__body, .ot-map__card--facade .ot-card__title { color: var(--c-cream); }
.ot-map__card--facade .ot-meta { color: color-mix(in srgb, var(--c-cream) 72%, transparent); }
/* price: range on one line, wider tiles */
.ot-stats.ot-price { grid-template-columns: repeat(auto-fit, minmax(min(100%, 360px), 1fr)); }
.ot-price .ot-stat b { font-size: clamp(28px, 6.4vw, 52px); white-space: nowrap; }
.ot-price .ot-stat span { display: block; }
/* ======================= content sections (4/10 follow-up: v39 section look) ======================= */
/* text: eyebrow + H2 left, text right (desktop), max 65ch */
.ot-text__grid { display: grid; gap: 0 72px; }
.ot-text__head .ot-h2 { max-width: 18ch; }
.ot-text__body, .ot-text .ot-prose { max-width: 65ch; }
.ot-text__body > :last-child { margin-bottom: 0; }
.ot-text__break { margin: 34px 0; }
.ot-text__media { margin: 40px 0; gap: 28px; }
.ot-text__media .ot-split__media img { aspect-ratio: 4 / 3; object-fit: cover; }
@media (min-width: 1024px) {
.ot-text__grid { grid-template-columns: minmax(0, .85fr) minmax(0, 1.15fr); align-items: start; }
.ot-text__head { grid-column: 1; grid-row: 1 / span 99; position: sticky; top: 110px; }
.ot-text__body, .ot-text__break { grid-column: 2; }
.ot-text__media { grid-column: 1 / -1; margin: 56px 0; }
}
/* small titles + brush-check bullets inside prose */
.ot-prose h3 { margin: 1.5em 0 .45em; font-size: clamp(18px, 1.5vw, 21px); font-weight: 700; letter-spacing: -.015em; line-height: 1.25; }
.ot-prose h4 { font-size: 13px; font-weight: 700; letter-spacing: var(--ls-label); text-transform: uppercase; color: var(--ot-fg-2); }
.ot-prose ul { list-style: none; padding-left: 0; }
.ot-prose ul > li { position: relative; padding-left: 30px; }
.ot-prose ul > li::before {
content: ""; position: absolute; left: 0; top: .28em; width: 19px; height: 19px; background: var(--c-orange);
-webkit-mask: url("../shapes/brush-check.svg") center / contain no-repeat; mask: url("../shapes/brush-check.svg") center / contain no-repeat;
}
.ot-prose .ot-lead, .ot-prose p.ot-lead { font-size: clamp(18px, 1.6vw, 22px); line-height: 1.45; letter-spacing: -.01em; }
/* features: grid cards on dark, numbered in Helvetica orange or brush check */
.ot-features__grid { gap: 14px; }
.ot-feature {
position: relative; display: flex; flex-direction: column; gap: 10px; padding: 26px 22px 24px;
border: 1px solid var(--ot-line); border-radius: var(--r-card); background: rgb(255 255 255 / .025);
transition: border-color var(--dur-fast) var(--ease-out), transform var(--dur-fast) var(--ease-out), background-color var(--dur-fast) var(--ease-out);
}
.ot-feature:hover { border-color: color-mix(in srgb, var(--c-orange) 55%, transparent); background: color-mix(in srgb, var(--c-orange) 4%, transparent); transform: translateY(-2px); }
.ot-feature__no { font-size: 14px; }
.ot-feature__icon { color: var(--c-orange); }
.ot-feature__icon .ot-glyph { width: 30px; height: 30px; }
.ot-feature__img img { display: block; width: 100%; aspect-ratio: 16 / 10; object-fit: cover; border-radius: var(--r-media); }
.ot-feature .ot-h3 { margin: 4px 0 0; }
.ot-feature__text { color: var(--ot-fg-2); font-size: 15px; line-height: 1.6; }
.ot-feature__text p:last-child, .ot-feature__text ul:last-child { margin-bottom: 0; }
.ot-light .ot-feature { background: rgb(255 255 255 / .3); }
/* places: city cards (title + text, «Δείτε →» if a city page exists) */
.ot-places__grid { gap: 12px; }
.ot-place {
display: flex; flex-direction: column; gap: 8px; min-height: 150px; padding: 22px 20px; border-radius: var(--r-card);
border: 1px solid var(--ot-line); color: var(--ot-fg); text-decoration: none; position: relative; overflow: hidden;
background: radial-gradient(circle at 92% 0%, color-mix(in srgb, var(--c-orange) 16%, transparent), transparent 45%);
}
.ot-place .ot-h3 { margin: 0; }
.ot-place p { margin: 0; color: var(--ot-fg-2); font-size: 15px; line-height: 1.55; flex: 1; }
.ot-light .ot-place .ot-city__cta { color: var(--c-void); }
a.ot-place:hover { border-color: var(--c-orange); }
a.ot-place:hover .ot-city__arrow { transform: translateX(var(--nudge)); }
/* media + text 50/50 */
.ot-media-text .ot-split__media img { aspect-ratio: 4 / 3; object-fit: cover; }
.ot-media-text .ot-prose { max-width: 60ch; }
/* ======================= QA 4/10 (Fable 5) fixes ======================= */
/* 12: menu group labels in caps via CSS (stored labels normalised to sentence case) */
.ot-dd__btn, .ot-menu__toggle { text-transform: uppercase; }
.ot-menu__toggle { font-size: 26px; letter-spacing: -.01em; }
@media (min-width: 391px) { .ot-menu__toggle { font-size: 28px; } }
/* 3: header CTA — long label only from 1500px (the Greek label overflowed at 1440) */
@media (min-width: 1024px) { .ot-topbar__cta .ot-cta-long { display: none !important; } .ot-topbar__cta .ot-cta-short { display: inline !important; } }
@media (min-width: 1500px) { .ot-topbar__cta .ot-cta-long { display: inline !important; } .ot-topbar__cta .ot-cta-short { display: none !important; } }
/* 2: images inside prose — full column width; runs of image-only paragraphs → 2-up grid */
.ot-prose img { display: block; max-width: 100%; width: auto; height: auto; margin: 1.4em 0; border-radius: var(--r-media); }
.ot-prose p > img, .ot-prose p > a > img, .ot-prose figure img { width: 100%; }
.ot-prose > p:has(> img:only-child), .ot-prose > p:has(> a:only-child > img) { display: block; width: 100%; margin: 0 0 1.2em; }
.ot-prose > p:has(> img:only-child) img, .ot-prose > p:has(> a:only-child > img) img { aspect-ratio: auto; object-fit: initial; margin: 0; }
.ot-prose > p:has(> img:only-child):has(+ p > img:only-child),
.ot-prose > p:has(> img:only-child) + p:has(> img:only-child) { display: inline-block; width: calc(50% - 6px); margin: 0 8px 8px 0; vertical-align: top; }
.ot-prose > p:has(> img:only-child):has(+ p > img:only-child) img,
.ot-prose > p:has(> img:only-child) + p:has(> img:only-child) img { aspect-ratio: 4 / 3; object-fit: cover; }
.ot-prose .wp-caption, .ot-prose figure { max-width: 100% !important; width: auto !important; }
.ot-prose .wp-caption-text, .ot-prose figcaption { overflow-wrap: anywhere; white-space: normal; }
/* 6: never small orange text on cream */
.ot-card__no { font-size: 15px; }
.ot-light .ot-num, .ot-light .ot-feature__no, .ot-light .ot-package .ot-card__no { color: var(--c-void); }
.ot-light .ot-facade__caption span:last-child { color: var(--c-cream); }
/* 13: cookie banner — compact bottom bar on mobile; hero content lifted while it is shown */
@media (max-width: 767px) {
.ot-cookie { left: 0; right: 0; bottom: 0; max-width: none; border-radius: 14px 14px 0 0; padding: 10px 14px calc(10px + env(safe-area-inset-bottom)); gap: 8px; grid-template-columns: 1fr auto; align-items: center; }
.ot-cookie__text { font-size: 11.5px; line-height: 1.35; }
.ot-cookie__actions { flex-direction: column; gap: 6px; }
.ot-cookie .ot-btn--secondary { min-height: 36px; padding: 0 12px; font-size: 10px; }
html.ot-has-cookie .ot-hero { padding-bottom: 150px; }
}
@media (min-width: 768px) { .ot-cookie { left: auto; right: 24px; max-width: 420px; } }
/* 14: long hero titles stay within 3–4 lines */
.ot-h1--long { font-size: clamp(32px, 7.4vw, 64px); }
.ot-h1--xlong { font-size: clamp(28px, 6.4vw, 52px); }
.ot-h1--page.ot-h1--long { font-size: clamp(30px, 6.6vw, 56px); }
.ot-h1--page.ot-h1--xlong { font-size: clamp(26px, 5.8vw, 46px); max-width: 28ch; }
@media (min-width: 1024px) {
.ot-hero--home .ot-hero__content { max-width: 980px; }
.ot-hero--home .ot-h1 { font-size: clamp(40px, 4.6vw, 66px); }
.ot-hero--page .ot-hero__content { max-width: 760px; }
}
/* 15: carousels with many slides show a counter instead of dashes */
.ot-dots__count { font: 600 12px/1 var(--f-sans); font-variant-numeric: tabular-nums; letter-spacing: .12em; color: var(--ot-fg-2); }
.ot-dots__count b { color: var(--ot-fg); font-weight: 700; }
/* article text walls: breaks + subheads (no new text) */
.ot-article__break { margin: 2.4em 0; }
figure.ot-article__break img { display: block; width: 100%; aspect-ratio: 16 / 9; object-fit: cover; border-radius: var(--r-media); margin: 0; }
.ot-prose--article > p:has(> strong:only-child), .ot-prose--article > p:has(> b:only-child) { margin: 1.8em 0 .5em; font-size: clamp(19px, 1.7vw, 22px); line-height: 1.3; letter-spacing: -.015em; }
.ot-prose--article h3 { margin-top: 1.8em; }
/* legacy h5/h6 subheads in imported prose */
.ot-prose h5, .ot-prose h6 { margin: 1.6em 0 .5em; font-size: clamp(18px, 1.5vw, 21px); font-weight: 700; line-height: 1.25; letter-spacing: -.015em; color: var(--ot-fg); }
.ot-prose h5 strong, .ot-prose h6 strong { font-weight: inherit; }
.ot-review__lang { display: block; margin-top: 10px; font-size: 11px; letter-spacing: .1em; text-transform: uppercase; color: var(--ot-fg-2); }
/* ======================= variety layer (owner 5/10) ======================= */
.ot-js .ot-reveal[style*="--i"] { transition-delay: calc(min(var(--i), 8) * 70ms); }
.ot-band--glow { position: relative; isolation: isolate; }
.ot-text__divider { margin: 0 0 clamp(36px, 5vw, 56px); max-width: 420px; }
/* (b) lead: pull statement + two narrow columns */
.ot-text__lead { max-width: 30ch; margin: 8px 0 clamp(28px, 4vw, 48px); font-size: clamp(26px, 3.4vw, 36px); font-weight: 600; line-height: 1.18; letter-spacing: -.025em; }
.ot-text__lead strong { font-weight: 700; }
.ot-text--lead .ot-text__head { margin-bottom: 18px; }
.ot-text__cols { max-width: none; }
@media (min-width: 1024px) {
.ot-text__cols { columns: 2; column-gap: 64px; }
.ot-text__cols > * { break-inside: avoid-column; }
.ot-text__cols > :first-child { margin-top: 0; }
}
/* (c) split image: full-height image on one side, alternating */
.ot-text__split { display: grid; gap: 28px; }
.ot-text__split-media { margin: 0; }
.ot-text__split-media img { display: block; width: 100%; height: 100%; min-height: 280px; max-height: 80svh; object-fit: cover; border-radius: var(--r-panel); }
@media (min-width: 1024px) {
.ot-text__split { grid-template-columns: minmax(0, .95fr) minmax(0, 1.05fr); gap: 72px; align-items: stretch; }
.ot-text__split.is-reverse .ot-text__split-media { order: 2; }
.ot-text__split-media { position: sticky; top: 100px; align-self: start; height: min(78svh, 720px); }
}
/* (d) numbered index: sticky title column, big orange numbers in Helvetica */
.ot-text__grid--index { display: grid; gap: 32px; }
.ot-index { margin: 0; padding: 0; list-style: none; border-top: 1px solid var(--ot-line); }
.ot-index__item { display: grid; grid-template-columns: 64px 1fr; gap: 16px; padding: 26px 0; border-bottom: 1px solid var(--ot-line); }
.ot-index__no { font: 700 clamp(30px, 3.4vw, 46px)/1 var(--f-sans); font-variant-numeric: tabular-nums; letter-spacing: -.04em; color: var(--c-orange); }
.ot-light .ot-index__no { color: var(--c-void); }
.ot-light .ot-index__no::after { content: ""; display: block; width: 34px; height: 5px; margin-top: 8px; background: var(--x-brush-short) center / 100% 100% no-repeat; }
.ot-index__title { margin: 4px 0 8px; font-size: clamp(19px, 1.7vw, 23px); font-weight: 700; line-height: 1.2; letter-spacing: -.015em; }
.ot-index .ot-prose > :last-child { margin-bottom: 0; }
.ot-text__intro { margin-top: 18px; }
@media (min-width: 1024px) {
.ot-text__grid--index { grid-template-columns: minmax(0, .8fr) minmax(0, 1.2fr); gap: 72px; align-items: start; }
.ot-text__aside { position: sticky; top: 110px; }
.ot-index__item { grid-template-columns: 88px 1fr; }
}
/* (e) quote: big brush quote mark on dark */
.ot-bigquote { position: relative; margin: 8px 0 0; padding: 56px 0 0; max-width: 24ch; }
.ot-bigquote::before { content: "“"; position: absolute; left: -4px; top: -28px; font: 700 140px/1 Georgia, serif; color: var(--c-orange); }
.ot-bigquote::after { content: ""; display: block; width: 180px; height: 10px; margin-top: 26px; background: var(--x-brush-long) center / 100% 100% no-repeat; }
.ot-bigquote p { margin: 0; font-size: clamp(28px, 4vw, 52px); font-weight: 700; line-height: 1.08; letter-spacing: -.035em; }
.ot-text__after { margin-top: 36px; }
/* (f) facts strip */
.ot-facts { display: grid; grid-template-columns: repeat(2, 1fr); gap: 0; margin: 0 0 28px; border-top: 1px solid var(--ot-line); border-left: 1px solid var(--ot-line); }
.ot-fact { padding: 18px 14px; border-right: 1px solid var(--ot-line); border-bottom: 1px solid var(--ot-line); }
.ot-fact b { display: block; font-size: clamp(32px, 4vw, 54px); font-weight: 700; letter-spacing: -.04em; line-height: 1; }
.ot-fact span { display: block; margin-top: 8px; font-size: 11px; letter-spacing: .12em; text-transform: uppercase; color: var(--ot-fg-2); }
@media (min-width: 1024px) { .ot-facts { grid-template-columns: repeat(auto-fit, minmax(140px, 1fr)); } }
/* long URLs / emails in imported text never widen the page */
.ot-prose, .ot-text__lead, .ot-index, .ot-bigquote, .ot-feature__text, .ot-place, .ot-faq__a { overflow-wrap: anywhere; }
.ot-text__grid > *, .ot-text__split > *, .ot-text__grid--index > * { min-width: 0; }
.ot-text__rest { max-width: 65ch; }
/* ---- 5/10 fixes: display text never breaks Greek words; readable measures ---- */
.ot-text__lead, .ot-bigquote, .ot-bigquote p { overflow-wrap: normal; word-break: normal; hyphens: manual; }
.ot-text__lead { max-width: 32ch; min-width: min(18ch, 100%); font-size: clamp(24px, 2.6vw, 36px); line-height: 1.2; }
.ot-bigquote { max-width: min(100%, 32ch); width: 100%; }
.ot-bigquote p { font-size: clamp(24px, 2.6vw, 40px); line-height: 1.2; letter-spacing: -.02em; }
@media (min-width: 1024px) { .ot-bigquote { min-width: 60%; max-width: 32ch; } .ot-text--quote .ot-wrap { display: block; } }
.ot-text__cols, .ot-text__split-body .ot-prose, .ot-index .ot-prose { min-width: 0; }
@media (min-width: 1024px) { .ot-text__cols { columns: 2 30ch; } }
/* ---- logos: square transparent PNGs with built-in padding → render the square large, crop the empty band ---- */
.ot-ticker { padding: 26px 0; }
.ot-ticker__track { align-items: center; gap: 28px; }
.ot-ticker__logo { display: flex; flex: 0 0 auto; align-items: center; justify-content: center; width: 110px; height: 44px; overflow: visible; }
.ot-ticker__logo img { display: block; width: 110px; height: 110px; max-width: none; max-height: none; margin: -33px 0; object-fit: contain; opacity: .85; transition: filter var(--dur-fast) var(--ease-out), opacity var(--dur-fast) var(--ease-out); }
.ot-dark .ot-ticker__logo img { filter: grayscale(1) brightness(0) invert(.93) sepia(.08); }
.ot-light .ot-ticker__logo img { filter: grayscale(1) brightness(0); opacity: .78; }
.ot-ticker__logo:hover img { filter: none; opacity: 1; }
@media (min-width: 1024px) {
.ot-ticker__track { gap: 40px; }
.ot-ticker__logo { width: 160px; height: 56px; }
.ot-ticker__logo img { width: 160px; height: 160px; margin: -52px 0; }
}
/* logos with a filled background turned into black bars under brightness(0) → greyscale instead */
.ot-light .ot-ticker__logo img { filter: grayscale(1); opacity: .85; }
.ot-dark .ot-ticker__logo img { filter: grayscale(1) invert(1); opacity: .8; }
.ot-ticker__logo:hover img { filter: none; opacity: 1; }
.ot-text__lead a, .ot-bigquote a { overflow-wrap: anywhere; }
/* ======================= hero loop, variant B (home, owner 5/10) ======================= */
.ot-hero--loop-b .ot-hero__media { inset: 0; left: 0; -webkit-mask-image: none; mask-image: none; }
.ot-hero--loop-b .ot-hero__poster, .ot-hero--loop-b .ot-hero__loop, .ot-hero--loop-b .ot-hero__full { object-position: 50% 50%; }
/* #173: .999 keeps the loop a hair smaller than the poster ![]()
, so the early poster stays the LCP (the video fades in at ~7s on slow phones and, at equal size, became the LCP) */
.ot-hero--loop-b .ot-hero__media video.ot-hero__loop { opacity: 0; transform: scale(.999); transition: opacity .6s var(--ease-out), transform .9s var(--ease-out), filter .9s var(--ease-out); }
.ot-hero--loop-b.is-looping .ot-hero__media video.ot-hero__loop { opacity: 1; }
.ot-hero--loop-b.is-playing .ot-hero__media video.ot-hero__loop { opacity: 0; }
.ot-hero--loop-b .ot-hero__media video.ot-hero__full { opacity: 0; }
.ot-hero--loop-b.is-playing .ot-hero__media video.ot-hero__full { opacity: 1; }
.ot-hero--loop-b .ot-hero__scrim { background: linear-gradient(180deg, rgb(0 0 0 / .35) 0%, rgb(0 0 0 / .18) 35%, rgb(0 0 0 / .78) 92%), linear-gradient(90deg, rgb(0 0 0 / .62), rgb(0 0 0 / .1) 70%); }
/* the whole media area is the play target; text lets clicks through, links/buttons stay clickable */
.ot-hero__hit { position: absolute; inset: 0; z-index: 2; width: 100%; height: 100%; padding: 0; border: 0; background: transparent; cursor: pointer; }
.ot-hero__hit:focus-visible { outline: 2px solid var(--c-orange); outline-offset: -6px; }
.ot-hero--loop-b .ot-hero__content { pointer-events: none; }
.ot-hero--loop-b .ot-hero__content a, .ot-hero--loop-b .ot-hero__content button { pointer-events: auto; }
.ot-hero--loop-b.is-playing .ot-hero__hit { cursor: default; }
/* hover (desktop): the loop brightens / zooms 2%, a small label follows the cursor */
@media (hover: hover) and (pointer: fine) {
.ot-hero--loop-b.is-hovering:not(.is-playing) .ot-hero__loop, .ot-hero--loop-b.is-hovering:not(.is-playing) .ot-hero__poster { transform: scale(1.02); filter: brightness(1.12); }
.ot-hero--loop-b .ot-hero__poster { transition: transform .9s var(--ease-out), filter .9s var(--ease-out); }
}
.ot-hero__cursor {
position: absolute; z-index: 5; left: 0; top: 0; display: inline-flex; align-items: center; gap: 8px; padding: 8px 14px 8px 10px;
border-radius: var(--r-pill); background: var(--c-orange); color: var(--c-void); font: 700 11px/1 var(--f-sans); letter-spacing: .12em; text-transform: uppercase;
pointer-events: none; opacity: 0; transition: opacity .2s ease; white-space: nowrap;
}
.ot-hero__cursor svg { width: 14px; height: 14px; }
.ot-hero--loop-b.is-hovering:not(.is-playing) .ot-hero__cursor { opacity: 1; }
/* the play disc invites: soft pulse + brush ring */
.ot-hero--loop-b .ot-play__disc::after { animation: ot-pulse 2.4s var(--ease-out) infinite; }
.ot-hero--loop-b .ot-play__disc::before {
content: ""; position: absolute; inset: -14px; background: var(--c-orange);
-webkit-mask: url("../shapes/brush-ring.svg") center / contain no-repeat; mask: url("../shapes/brush-ring.svg") center / contain no-repeat;
opacity: .55; animation: ot-ring-spin 9s linear infinite; pointer-events: none;
}
@keyframes ot-pulse { 0% { inset: -7px; opacity: .9; } 70% { inset: -20px; opacity: 0; } 100% { inset: -20px; opacity: 0; } }
@keyframes ot-ring-spin { to { transform: rotate(360deg); } }
@media (prefers-reduced-motion: reduce) { .ot-hero--loop-b .ot-play__disc::after, .ot-hero--loop-b .ot-play__disc::before { animation: none; } }
/* ======================= brand circle buttons: exact centring (owner 5/10) ======================= */
.ot-icon-btn { display: inline-grid; place-items: center; width: var(--tap); height: var(--tap); line-height: 0; }
.ot-icon-btn > span { display: grid; place-items: center; line-height: 0; }
.ot-icon-btn > span[hidden], .ot-hero__controls [data-state="off"] .ot-i-on, .ot-hero__controls [data-state="on"] .ot-i-off { display: none; }
.ot-icon-btn svg:not(.ot-ring), .ot-icon-btn .ot-glyph { display: block; width: 20px; height: 20px; }
.ot-icon-btn--lg svg:not(.ot-ring) { width: 22px; height: 22px; }
/* the brush ring is sized to the button, never the 20px icon rule */
.ot-icon-btn .ot-ring { position: absolute; inset: -6px; width: calc(100% + 12px); height: calc(100% + 12px); max-width: none; display: block; }
/* ======================= eyebrow brush: barely-there idle motion after the draw-in ======================= */
@keyframes ot-brush-idle {
0%, 100% { transform: rotate(-1.4deg) skewX(-3deg) scaleX(.985) translateY(0); }
50% { transform: rotate(-1.4deg) skewX(-3deg) scaleX(1.015) translateY(1px); }
}
.ot-eyebrow.is-drawn.is-idle::after { animation: ot-brush-idle 6s ease-in-out 1s infinite; will-change: transform; }
.ot-eyebrow.is-drawn:not(.is-idle)::after { animation-play-state: paused; }
@media (prefers-reduced-motion: reduce) { .ot-eyebrow::after, .ot-eyebrow.is-drawn.is-idle::after { animation: none !important; } }
.ot-icon-btn svg.ot-ring.ot-draw { position: absolute; inset: -6px; width: calc(100% + 12px); height: calc(100% + 12px); }
.ot-sticky .ot-icon-btn svg:not(.ot-ring) { width: 18px; height: 18px; }
/* ======================= header / contact (owner 5/10) ======================= */
@media (min-width: 1024px) { .ot-topbar .ot-topbar__menu { display: none !important; } } /* approved desktop = open menu, no hamburger */
.ot-topbar__contact { display: none; }
@media (min-width: 1280px) { .ot-topbar__nav > .ot-topbar__contact { display: inline-flex; } }
.ot-dd.is-open .ot-dd__panel { opacity: 1; visibility: visible; transform: none; }
.ot-dd.is-open .ot-chev { transform: rotate(180deg); }
.ot-dd__all { font-weight: 600; }
.ot-footer__wa { display: inline-flex; align-items: center; gap: 8px; justify-content: flex-end; }
.ot-footer__wa svg { width: 16px; height: 16px; color: var(--c-orange); }
.ot-sticky__wa svg { width: 18px; height: 18px; }
/* TODO remove before go-live: font demo pill (staging) */
/* ---- header 5/10 (owner): groups + «More», WhatsApp circle, dropdown heading, no hamburger ≥1024 ---- */
.ot-dd__heading { margin: 4px 0 6px; padding: 6px 0 10px; font: 600 12px/1.2 var(--f-sans); letter-spacing: .14em; text-transform: uppercase; color: var(--c-ink-muted); cursor: default; user-select: none; position: relative; }
.ot-dd__heading::after { content: ""; position: absolute; left: 0; bottom: 2px; width: 64px; height: 5px; background: var(--x-brush-short) center / 100% 100% no-repeat; }
.ot-dd__panel { min-width: 260px; }
.ot-dd--more .ot-dd__panel { left: auto; right: -18px; }
.ot-topbar__wa svg { width: 19px; height: 19px; }
.ot-topbar__wa svg path:first-child { fill: none; }
/* mobile: logo · WhatsApp · search · menu (search back in the flow) */
@media (max-width: 1023px) {
.ot-topbar__search { position: static; transform: none; }
.ot-topbar__search:active { transform: scale(.94); }
.ot-topbar { gap: 8px; }
.ot-topbar__logo { width: min(150px, 40vw); }
}
@media (min-width: 1024px) {
.ot-topbar .ot-topbar__menu { display: none !important; }
.ot-topbar__nav { gap: 12px; }
.ot-topbar { gap: 12px; }
.ot-topbar__nav > .ot-dd .ot-dd__btn { font-size: 12.5px; }
.ot-topbar__logo { width: 128px; }
.ot-topbar__lang a { min-width: 32px; padding: 0 6px; }
}
@media (min-width: 1280px) {
.ot-topbar__nav { gap: 20px; }
.ot-topbar { gap: 16px; }
.ot-topbar__nav > .ot-dd .ot-dd__btn { font-size: 13.5px; }
.ot-topbar__logo { width: 150px; }
}
@media (min-width: 1024px) and (max-width: 1279px) {
.ot-topbar { padding-left: 22px; padding-right: 22px; gap: 10px; }
.ot-topbar__nav { gap: 10px; }
.ot-topbar__cta { padding-inline: 12px; }
}
.ot-hero .ot-hero-copy, .ot-hero .ot-hero-pillars, .ot-hero .ot-locations { transition: opacity var(--ot-hero-fade, .8s) var(--ease-out); }
.ot-hero.is-playing .ot-hero-copy, .ot-hero.is-playing .ot-hero-pillars, .ot-hero.is-playing .ot-locations { opacity: 0; }
/* ---- header icons (owner 5/10): phone · WhatsApp · email · search; mobile = logo · phone · WhatsApp · menu ---- */
.ot-topbar__phone svg, .ot-topbar__mail svg { width: 19px; height: 19px; }
@media (max-width: 1023px) {
.ot-topbar .ot-topbar__search, .ot-topbar .ot-topbar__mail { display: none; }
}
.ot-menu__tools { display: flex; flex-wrap: wrap; gap: 8px 18px; margin-top: 16px; }
.ot-menu__tool { display: inline-flex; align-items: center; gap: 10px; min-height: var(--tap); padding: 0; border: 0; background: none; color: var(--c-void); font: 400 15px/1 var(--f-sans); text-decoration: none; cursor: pointer; }
.ot-menu__tool svg { width: 18px; height: 18px; }
@media (min-width: 1024px) and (max-width: 1279px) {
/* room for 4 icons: language switch moves into «Περισσότερα», smaller gaps */
.ot-topbar .ot-topbar__lang { display: none; }
.ot-topbar__nav > .ot-dd .ot-dd__btn { font-size: 12px; }
.ot-topbar { gap: 8px; }
.ot-topbar__nav { gap: 9px; }
}
.ot-dd__lang { display: none; }
@media (min-width: 1024px) and (max-width: 1279px) { .ot-dd__lang { display: flex; gap: 6px; padding: 10px 0 4px; } }
@media (min-width: 1280px) and (max-width: 1499px) {
.ot-topbar { gap: 10px; }
.ot-topbar__nav { gap: 14px; }
.ot-topbar__nav > .ot-dd .ot-dd__btn { font-size: 13px; }
}
/* ---- typography pass vs v39 (owner 5/10) — one scale for every template ----
v39 is a 390px prototype: mobile values follow it, desktop values are capped so H2 ≈ 1.0–1.05× H1
no longer happens and long Greek headings stay at 2–3 lines. */
/* (type tokens moved to tokens.css — guideline v2.1) */
.ot-seo .ot-prose p { font-size: var(--fs-body); }
.ot-bluf__text { font-size: clamp(19px, 1.75vw, 24px); }
.ot-text__lead { font-size: clamp(22px, 2.1vw, 30px); }
.ot-prose .ot-lead, .ot-prose p.ot-lead { font-size: clamp(18px, 1.45vw, 21px); }
.ot-card__text { font-size: 12px; }
@media (min-width: 1024px) {
.ot-hero-copy { font-size: 18px; }
.ot-card__title { font-size: 22px; }
.ot-stat b { font-size: 56px; }
}
@media (min-width: 1024px) { .ot-hero--page .ot-h1:not(.ot-h1--long):not(.ot-h1--xlong) { font-size: clamp(40px, 4.6vw, 66px); } } /* same H1 as home */
/* ---- BLUF «Σε αυτή τη σελίδα» mini index (owner 5/10) ---- */
.ot-toc { margin-top: 32px; }
.ot-toc__title { position: relative; display: inline-block; margin: 0 0 14px; padding-bottom: 8px; font: 700 var(--fs-label)/1.3 var(--f-sans); letter-spacing: var(--ls-label); text-transform: uppercase; color: var(--ot-fg-2); }
.ot-toc__title::after { content: ""; position: absolute; left: 0; bottom: 0; width: 56px; height: 5px; background: var(--x-brush-short) left center / 100% 100% no-repeat; opacity: .85; }
.ot-toc__list { margin: 0; padding: 0; list-style: none; counter-reset: none; }
.ot-toc__list li { border-top: 1px solid var(--ot-line); }
.ot-toc__list li:last-child { border-bottom: 1px solid var(--ot-line); }
.ot-toc__list a { display: grid; grid-template-columns: 2.6em 1fr; align-items: baseline; gap: 10px; min-height: var(--tap); padding: 11px 0; color: inherit; text-decoration: none; font-size: 15px; line-height: 1.3; }
.ot-toc__no { font: 700 13px/1 var(--f-sans); font-variant-numeric: tabular-nums; letter-spacing: .04em; color: var(--c-orange); }
.ot-toc__label { position: relative; justify-self: start; padding-bottom: 3px; }
.ot-toc__label::after { content: ""; position: absolute; left: 0; right: 0; bottom: -3px; height: 5px; background: var(--x-brush-short) left center / 100% 100% no-repeat; clip-path: inset(0 100% 0 0); transition: clip-path .35s var(--ease-out); }
.ot-toc__list a:hover .ot-toc__label::after, .ot-toc__list a:focus-visible .ot-toc__label::after { clip-path: inset(0 0 0 0); }
@media (min-width: 1024px) {
.ot-bluf__wrap--toc { display: grid; grid-template-columns: minmax(0, 1fr) minmax(260px, 34%); gap: clamp(40px, 5vw, 96px); align-items: start; }
.ot-bluf__wrap--toc .ot-toc { margin-top: 6px; }
}
@media (prefers-reduced-motion: reduce) { .ot-toc__label::after { transition: none; } }
h2[id^="ot-s"] { scroll-margin-top: 96px; }
/* ---- hero media from _ot_hero_media on every service / band / city page (owner 5/10) ---- */
.ot-hero__yt { position: absolute; inset: 0; z-index: 1; width: 100%; height: 100%; border: 0; background: #000; }
.ot-hero__controls--yt [data-ot-pause], .ot-hero__controls--yt [data-ot-sound] { display: none; }
.ot-hero--loop-b.is-playing .ot-hero__controls--yt { z-index: 6; }
.ot-hero--loop-b.is-vertical .ot-hero__poster { opacity: 0; }
/* one scrim for every hero (home = service = band = city): the variant-B gradient */
.ot-hero .ot-hero__scrim { background: linear-gradient(180deg, rgb(0 0 0 / .35) 0%, rgb(0 0 0 / .18) 35%, rgb(0 0 0 / .78) 92%), linear-gradient(90deg, rgb(0 0 0 / .62), rgb(0 0 0 / .1) 70%); }
.ot-hero--loop-b.is-playing .ot-hero__hit, .ot-hero--loop-b.is-playing .ot-hero__content, .ot-hero--loop-b.is-playing .ot-hero__content * { pointer-events: none; }
.ot-hero--loop-b.is-playing:has(.ot-hero__yt) { cursor: auto; }
.ot-hero--loop-b.is-playing:has(.ot-hero__yt) .ot-hero__controls { top: 96px; bottom: auto; opacity: 1; visibility: visible; transform: none; }
/* optical centring of the header glyphs (measured on 4× renders: bbox centre → 0–0.3px off the circle centre) */
.ot-topbar__search .ot-search-icon { transform: translate(-.75px, -2.75px); }
@media (min-width: 1024px) {
.ot-topbar__wa svg { transform: translate(.4px, -.25px); }
.ot-topbar__phone svg { transform: translate(.75px, -.25px); }
.ot-topbar__mail svg { transform: translate(.5px, 0); }
}
.ot-toc__no { font-size: 15px; }
.ot-toc__list a { font-size: 16px; padding: 9px 0; }
@media (max-width: 767px) { .ot-toc { display: none; } } /* phones: the BLUF stays a single readable block */
@media (min-width: 1024px) {
.ot-hero--page .ot-h1 { font-size: clamp(40px, 4.6vw, 66px); }
.ot-hero--page .ot-h1.ot-h1--long { font-size: clamp(38px, 4.2vw, 60px); }
.ot-hero--page .ot-h1.ot-h1--xlong { font-size: clamp(32px, 3.6vw, 50px); }
}
/* TOC v2 (coordinator 5/10): content sections only, max 6, compact rows; whole hero copy fades under the film */
.ot-toc__list a { min-height: 36px; padding: 6px 0; font-size: 15px; }
.ot-toc__title { margin-bottom: 10px; }
.ot-hero .ot-hero__content { transition: opacity var(--ot-hero-fade, .8s) var(--ease-out); }
.ot-hero.is-playing .ot-hero__content { opacity: 0; }
.ot-toc__label { min-width: 0; max-width: 100%; overflow: hidden; white-space: nowrap; text-overflow: ellipsis; padding-bottom: 5px; }
.ot-toc__label::after { bottom: 0; }
/* =================== owner 5/10 (afternoon) =================== */
/* 1. BLUF drop cap — real text (::first-letter), ink colour (orange on cream fails contrast), Helvetica bold, 3 lines */
.ot-bluf__text > p:first-child::first-letter {
float: left; margin: .06em .09em 0 -.02em; padding: 0;
font: 750 calc(1.42em * 3 - .2em)/.8 var(--f-sans); letter-spacing: -.02em; color: var(--ot-fg, currentColor);
}
@supports (initial-letter: 3) {
.ot-bluf__text > p:first-child::first-letter { float: none; margin: 0 .1em 0 0; font-size: 1em; line-height: 1; initial-letter: 3; }
}
/* 2. TOC — quieter */
.ot-toc__title { font-size: 11px; font-weight: 600; letter-spacing: .16em; color: var(--ot-fg-2); opacity: .85; }
.ot-toc__title::after { width: 40px; height: 4px; opacity: .6; }
.ot-toc__list li { border-top: 1px solid color-mix(in srgb, currentColor 9%, transparent); }
.ot-toc__list li:last-child { border-bottom: 1px solid color-mix(in srgb, currentColor 9%, transparent); }
.ot-toc__list a { font-size: 14px; font-weight: 400; color: var(--ot-fg-2); transition: color .2s ease; }
.ot-toc__list a:hover, .ot-toc__list a:focus-visible { color: var(--ot-fg); }
.ot-toc__no { font-size: 12px; font-weight: 500; color: color-mix(in srgb, var(--ot-fg-2) 70%, transparent); transition: color .2s ease; }
.ot-toc__list a:hover .ot-toc__no { color: var(--c-orange); }
.ot-toc__label::after { height: 4px; opacity: .8; }
/* sticky mini index (built by theme.js from the BLUF index): pill under the header, expands; visible only over the content sections */
.ot-tocbar { position: fixed; z-index: 40; top: var(--ot-tocbar-top, 84px); left: 50%; width: max-content; max-width: calc(100vw - 32px); transform: translate(-50%, -8px); opacity: 0; visibility: hidden; pointer-events: none;
transition: opacity .25s ease, transform .25s ease, visibility 0s linear .25s; font-family: var(--f-sans); }
.ot-tocbar.is-on { opacity: 1; visibility: visible; transform: translate(-50%, 0); pointer-events: auto; transition: opacity .25s ease, transform .25s ease, visibility 0s; }
.ot-tocbar__btn { display: flex; align-items: center; gap: 10px; max-width: 100%; min-height: 40px; padding: 0 16px; border: 1px solid rgb(255 255 255 / .12); border-radius: var(--r-pill); background: rgb(14 14 14 / .78); -webkit-backdrop-filter: blur(10px); backdrop-filter: blur(10px); color: var(--c-cream); font-family: inherit; font-size: 13px; font-weight: 400; line-height: 1; cursor: pointer; box-shadow: 0 8px 24px rgb(0 0 0 / .18); }
.ot-tocbar__btn b { font-weight: 500; color: rgb(243 235 224 / .62); letter-spacing: .1em; text-transform: uppercase; font-size: 10.5px; white-space: nowrap; }
.ot-tocbar__no { color: var(--c-orange); font-weight: 600; font-size: 12px; font-variant-numeric: tabular-nums; }
.ot-tocbar__cur { overflow: hidden; white-space: nowrap; text-overflow: ellipsis; max-width: 46vw; }
.ot-tocbar__chev { width: 8px; height: 8px; border-right: 1.4px solid currentColor; border-bottom: 1.4px solid currentColor; transform: translateY(-2px) rotate(45deg); opacity: .7; transition: transform .2s ease; flex: none; }
.ot-tocbar.is-open .ot-tocbar__chev { transform: translateY(2px) rotate(-135deg); }
.ot-tocbar__panel { position: absolute; top: calc(100% + 6px); left: 50%; transform: translateX(-50%); width: min(340px, calc(100vw - 32px)); margin: 0; padding: 6px 14px; list-style: none; border-radius: 14px; background: rgb(14 14 14 / .9); -webkit-backdrop-filter: blur(12px); backdrop-filter: blur(12px); box-shadow: 0 18px 40px rgb(0 0 0 / .3); }
.ot-tocbar__panel[hidden] { display: none; }
.ot-tocbar__panel a { display: grid; grid-template-columns: 2.2em 1fr; align-items: center; min-height: 40px; color: rgb(243 235 224 / .72); text-decoration: none; font-size: 14px; }
.ot-tocbar__panel li + li a { border-top: 1px solid rgb(255 255 255 / .07); }
.ot-tocbar__panel a span:first-child { color: rgb(243 235 224 / .4); font-size: 12px; font-variant-numeric: tabular-nums; }
.ot-tocbar__panel a[aria-current="true"] { color: var(--c-cream); }
.ot-tocbar__panel a[aria-current="true"] span:first-child { color: var(--c-orange); }
.ot-tocbar__panel a span:last-child { overflow: hidden; white-space: nowrap; text-overflow: ellipsis; }
@media (max-width: 767px) { .ot-tocbar__btn { min-height: 44px; } .ot-tocbar__btn b { display: none; } .ot-tocbar__panel a { min-height: 44px; } }
@media (min-width: 1024px) {
/* desktop: pinned to the right edge of the content column */
.ot-tocbar { left: auto; right: max(var(--gutter), calc((100% - var(--container)) / 2)); transform: translateY(-8px); }
.ot-tocbar.is-on { transform: none; }
.ot-tocbar__panel { left: auto; right: 0; transform: none; }
.ot-tocbar__cur { max-width: 260px; }
}
@media (prefers-reduced-motion: reduce) { .ot-tocbar, .ot-tocbar.is-on { transition: none; } }
/* 3. Locations → photo city cards («Πόλη · Υπηρεσία» on the dark vignette, «Δείτε» visible, text 2 lines) */
.ot-places__grid { display: grid; gap: 14px; grid-template-columns: 1fr; }
@media (min-width: 768px) { .ot-places__grid--2 { grid-template-columns: repeat(2, 1fr); } .ot-places__grid--3 { grid-template-columns: repeat(3, 1fr); } }
.ot-place-card { --ot-card-ratio: 4 / 3; }
@media (min-width: 768px) { .ot-place-card { --ot-card-ratio: 4 / 5; } }
.ot-place-card::after { background: linear-gradient(to top, rgb(0 0 0 / .9) 0%, rgb(0 0 0 / .55) 38%, rgb(0 0 0 / .08) 70%, rgb(0 0 0 / 0) 100%); }
.ot-place-card .ot-card__body { inset: auto 20px 20px 20px; }
.ot-place-card .ot-city__label { margin: 0 0 6px; font-size: 10.5px; letter-spacing: .13em; }
.ot-place-card .ot-card__title { margin: 0 0 6px; font-size: clamp(22px, 2vw, 28px); }
.ot-place-card__text { display: -webkit-box; -webkit-box-orient: vertical; -webkit-line-clamp: 2; overflow: hidden; max-width: 34ch; font-size: 13px; line-height: 1.45; opacity: .8; }
.ot-place-card .ot-city__cta { margin-top: 12px; padding: 9px 14px 9px 16px; border-radius: var(--r-pill); background: rgb(255 255 255 / .1); -webkit-backdrop-filter: blur(6px); backdrop-filter: blur(6px); font-size: 14px; color: var(--c-cream); }
.ot-place-card:hover .ot-city__cta { background: var(--c-orange); color: var(--c-void); }
.ot-place-card:hover .ot-city__cta .ot-city__arrow { color: var(--c-void); }
.ot-light .ot-place-card .ot-city__cta { color: var(--c-cream); }
div.ot-place-card { cursor: default; }
div.ot-place-card:hover .ot-card__media { transform: none; }
/* 4. «The details» (split text + photo): balanced columns, lead paragraph + brush divider, photo sized to the text */
.ot-text__split-body .ot-text__head + .ot-prose > p:first-child { position: relative; margin-bottom: 1.2em; padding-bottom: 1.1em; font-size: clamp(18px, 1.5vw, 21px); line-height: 1.5; letter-spacing: -.01em; }
.ot-text__split-body .ot-text__head + .ot-prose > p:first-child strong { font-weight: 600; }
.ot-text__split-body .ot-text__head + .ot-prose > p:first-child::after { content: ""; position: absolute; left: 0; bottom: 0; width: 72px; height: 6px; background: var(--x-brush-short) left center / 100% 100% no-repeat; }
.ot-text__split-media { position: relative; }
.ot-text__split-media::after { content: ""; position: absolute; left: 10%; bottom: -12px; width: 44%; height: 12px; background: var(--x-brush-long) center / 100% 100% no-repeat; opacity: .9; pointer-events: none; }
@media (min-width: 1024px) {
.ot-text__split { grid-template-columns: minmax(0, .9fr) minmax(0, 1.1fr); gap: clamp(48px, 6vw, 96px); align-items: center; }
.ot-text__split.is-short .ot-text__split-media { position: relative; top: auto; height: auto; align-self: center; }
.ot-text__split.is-short .ot-text__split-media img { height: auto; aspect-ratio: 4 / 3; min-height: 0; max-height: none; }
.ot-text__split-body { padding-block: 8px; }
}
/* 5. σχήμα cards: own loop on hover (desktop pointer only — JS adds the video on first hover) */
.ot-card__loop { position: absolute; inset: 0; z-index: -1; width: 100%; height: 100%; object-fit: cover; opacity: 0; transition: opacity .35s ease; pointer-events: none; }
.ot-card.is-loop .ot-card__loop, .ot-facade.is-loop .ot-card__loop { opacity: 1; } /* #68: video façades too */
/* 6. Hero (loop): 20/10 (Xenofon) the loop fills the whole width like the playing film — the 2,39:1 file is shown uncropped
(the frame has the same ratio); the copy stays readable over the .ot-hero__scrim (dark left + bottom). Was: v2 media right ~58% (17/10). */
@media (min-width: 1024px) {
.ot-hero--loop-b .ot-hero__media { left: 0; -webkit-mask-image: linear-gradient(to right, transparent 42%, #000 65%); mask-image: linear-gradient(to right, transparent 42%, #000 65%); } /* the v2 black fade, as before (black to ~42%, melting by ~65%) — Xenofon 20/10 */
.ot-hero--loop-b.is-playing .ot-hero__media { left: 0; -webkit-mask-image: none; mask-image: none; }
.ot-hero--loop-b .ot-hero__poster, .ot-hero--loop-b .ot-hero__loop { object-position: 50% 50%; }
}
@media (max-width: 1023px) {
/* phones/tablets: video behind, bottom-up gradient keeps the copy readable */
.ot-hero .ot-hero__scrim { background: linear-gradient(to top, rgb(0 0 0 / .94) 0%, rgb(0 0 0 / .72) 38%, rgb(0 0 0 / .28) 72%, rgb(0 0 0 / .38) 100%); }
}
/* ===== brand audit fixes (5/10) ===== */
/* 4. brushes only for emphasis: clean 1.5px checks for info bullets/icons; one brush divider per zone */
.ot-prose ul > li::before {
width: 16px; height: 16px; top: .32em;
-webkit-mask: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23000' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M5 12.6 9.6 17 19 7.4'/%3E%3C/svg%3E") center / contain no-repeat;
mask: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23000' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M5 12.6 9.6 17 19 7.4'/%3E%3C/svg%3E") center / contain no-repeat;
}
.ot-feature__icon svg { width: 26px; height: 26px; }
.ot-text__break ~ .ot-text__break { height: 1px; opacity: 1; background: color-mix(in srgb, currentColor 12%, transparent); }
.ot-text__break ~ .ot-text__break::before { content: none; }
.ot-text__split-media::after { content: none; }
/* 5. no small orange text on cream: current page in the dropdown = ink + orange underline */
.ot-dd__panel a[aria-current="page"], .ot-topbar__nav .ot-dd__panel a[aria-current="page"] { color: var(--c-void); text-decoration: underline; text-decoration-color: var(--c-orange); text-decoration-thickness: 2px; text-underline-offset: 5px; }
.ot-toc__list a:hover .ot-toc__no { color: var(--ot-fg); }
/* 6. nothing under 11px */
.ot-scroll-note { font-size: 11px; }
.ot-stat span, .ot-search__meta, .ot-footer__label, .ot-phones small, .ot-play__meta small, .ot-tocbar__btn b, .ot-place-card .ot-city__label { font-size: 11px; }
.ot-city__label { font-size: 11px; }
.ot-lang a { font-size: 11px; }
.ot-breadcrumb { font-size: 11px; }
.ot-footer__heading { font-size: 12px; }
.ot-footer__bottom { font-size: 12px; }
@media (min-width: 1024px) { .ot-scroll-note { font-size: 11px; } }
/* 9. footer: tap targets ≥44px in the bottom row, readable cookie buttons */
.ot-footer .ot-footer__legal a { display: inline-flex; align-items: center; min-height: 44px; }
.ot-cookie .ot-btn--secondary, .ot-cookie .ot-btn { min-height: 44px; font-size: 12px; }
/* header CTA: full label whenever it fits (inline measure in header.php), short otherwise */
@media (min-width: 1024px) {
.ot-topbar.is-cta-long .ot-topbar__cta .ot-cta-long { display: inline !important; }
.ot-topbar.is-cta-long .ot-topbar__cta .ot-cta-short { display: none !important; }
.ot-topbar:not(.is-cta-long) .ot-topbar__cta .ot-cta-long { display: none !important; }
.ot-topbar:not(.is-cta-long) .ot-topbar__cta .ot-cta-short { display: inline !important; }
}
/* article galleries: photos fill their 4:5 frames (prose `img{height:auto}` won the cascade → black gap) */
.ot-prose .ot-gallery-grid .ot-gallery-grid__item img, .ot-gallery-grid .ot-gallery-grid__item img { width: 100%; height: 100%; max-width: none; margin: 0; aspect-ratio: auto; object-fit: cover; }
.ot-prose .ot-gallery-grid .ot-gallery-grid__item, .ot-prose .ot-gallery-grid p { margin: 0; }
/* min 11px on phones too */
@media (max-width: 1023px) { .ot-locations, .ot-link { font-size: 11px; } }
/* full CTA label that needs room: GR/EN moves into «Περισσότερα» (as at 1024–1279) and the gaps tighten */
@media (min-width: 1024px) {
.ot-topbar.is-cta-compact { gap: 10px; }
.ot-topbar.is-cta-compact .ot-topbar__nav { gap: 14px; }
.ot-topbar.is-cta-compact .ot-topbar__lang { display: none; }
.ot-topbar.is-cta-compact .ot-dd__lang { display: flex; gap: 6px; padding: 10px 0 4px; }
.ot-topbar.is-cta-compact .ot-topbar__cta { padding-inline: 18px; letter-spacing: .1em; }
}
/* SEO audit T6 (CLS): the hero eyebrow keeps one line while DK Lemon swaps in (the wider fallback wrapped to 2 lines → 20px shift) */
.ot-hero .ot-eyebrow { white-space: nowrap; max-width: 100%; }
/* «Σχετικά άρθρα» on service pages */
.ot-related-posts__grid { display: grid; gap: 14px; grid-template-columns: 1fr; }
@media (min-width: 768px) { .ot-related-posts__grid { grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 20px; } }
.ot-related-post { display: flex; flex-direction: column; overflow: hidden; border-radius: var(--r-card); border: 1px solid var(--ot-line); color: inherit; text-decoration: none; transition: border-color .2s ease, transform .2s ease; }
.ot-related-post:hover { border-color: var(--c-orange); }
.ot-related-post__media { display: block; aspect-ratio: 16 / 10; overflow: hidden; }
.ot-related-post__media img { display: block; width: 100%; height: 100%; object-fit: cover; transition: transform .5s ease; }
.ot-related-post:hover .ot-related-post__media img { transform: scale(1.03); }
.ot-related-post__body { display: flex; flex-direction: column; gap: 8px; padding: 18px 18px 22px; }
.ot-related-post__title { margin: 0; font-size: clamp(17px, 1.4vw, 20px); font-weight: 700; line-height: 1.2; letter-spacing: -.015em; }
.ot-related-post__text { font-size: 14px; line-height: 1.5; color: var(--ot-fg-2); }
.ot-related-post .ot-meta { font-size: 11px; }
/* ======================= owner round 4 (5/10 evening) ======================= */
/* 1. prices: fluid figure per box (container query), wrap only after the dash, 2 columns ≤1280 */
.ot-stats.ot-price { grid-template-columns: 1fr; }
@media (min-width: 640px) { .ot-stats.ot-price { grid-template-columns: repeat(2, minmax(0, 1fr)); } }
@media (min-width: 1281px) { .ot-stats.ot-price:has(> .ot-stat:nth-child(3):last-child), .ot-stats.ot-price:has(> .ot-stat:nth-child(6):last-child) { grid-template-columns: repeat(3, minmax(0, 1fr)); } }
.ot-price .ot-stat { container-type: inline-size; min-width: 0; }
.ot-price .ot-stat b, .ot-stats.ot-price .ot-stat b { font-size: clamp(26px, 9cqi, 52px); line-height: 1.08; white-space: normal; overflow-wrap: normal; word-break: normal; hyphens: none; }
.ot-nw { white-space: nowrap; }
/* 2. no sticky headings/columns inside sections (only header, TOC pill and mobile bar stay fixed) */
@media (min-width: 1024px) {
.ot-text__head, .ot-text__aside, .ot-text__split-media, .ot-contact__intro { position: static; top: auto; }
.ot-text__split-media { height: auto; }
.ot-text__split-media img { height: auto; aspect-ratio: 4 / 5; max-height: min(78svh, 720px); }
.ot-text__split.is-short .ot-text__split-media img { aspect-ratio: 4 / 3; }
}
/* 3. section subtitle = a lead under the H2 (one treatment site-wide) */
@media (min-width: 1024px) {
.ot-section-head { display: block; margin-bottom: 40px; }
.ot-section-head .ot-h2 { margin-bottom: 0; }
.ot-section-head .ot-intro { justify-self: auto; }
}
.ot-section-head .ot-intro { max-width: 48ch; margin: 16px 0 0; font-size: clamp(17px, 1.35vw, 20px); line-height: 1.5; color: var(--ot-fg-2); opacity: 1; }
/* 4. footer language switch */
.ot-footer__lang { display: flex; flex-wrap: wrap; align-items: center; gap: 4px 14px; margin-top: 18px; }
.ot-footer__lang .ot-footer__label { margin-right: 6px; }
.ot-footer__lang a { display: inline-flex; align-items: center; min-height: 44px; color: var(--c-cream); text-decoration: none; font-size: 14px; }
.ot-footer__lang a:hover { color: var(--c-orange); }
.ot-footer__lang a[aria-current="page"] { text-decoration: underline; text-decoration-color: var(--c-orange); text-decoration-thickness: 2px; text-underline-offset: 6px; }
/* 5. «Περισσότερα»: language as the last row — «Γλώσσα GR · EN» */
.ot-topbar .ot-dd__panel .ot-dd__lang { align-items: center; gap: 2px; margin-top: 4px; padding: 6px 0 0; border-top: 1px solid var(--c-line-light); }
.ot-dd__lang-label { margin-right: auto; font: 600 11px/1 var(--f-sans); letter-spacing: .14em; text-transform: uppercase; color: var(--c-ink-muted); }
.ot-topbar .ot-dd__panel .ot-dd__lang a { display: inline-flex; justify-content: center; min-width: 44px; min-height: 44px; padding: 0 6px; border: 0; font-size: 14px; font-weight: 500; color: var(--c-void-3); }
.ot-topbar .ot-dd__panel .ot-dd__lang a + a::before { content: "·"; position: relative; left: -10px; color: var(--c-ink-muted); text-decoration: none; }
.ot-topbar .ot-dd__panel .ot-dd__lang a[aria-current="page"] { font-weight: 700; color: var(--c-void); text-decoration: underline; text-decoration-color: var(--c-orange); text-decoration-thickness: 2px; text-underline-offset: 5px; }
/* 6. category tag on photo cards: solid pill, readable over any photo (cream on 74% ink ≥ 7:1) */
.ot-card .ot-card__body > .ot-meta, .ot-postcard .ot-meta, .ot-project .ot-meta {
display: inline-block; width: fit-content; margin-bottom: 8px; padding: 5px 10px; border-radius: var(--r-pill);
background: rgb(11 11 11 / .74); -webkit-backdrop-filter: blur(4px); backdrop-filter: blur(4px); color: var(--c-cream); font-size: 11px; line-height: 1.2;
}
/* the figure's nowrap parts must not pick up the label style of `.ot-stat span` */
.ot-stat b .ot-nw, .ot-price .ot-stat b .ot-nw { display: inline; margin: 0; font-size: inherit; font-weight: inherit; letter-spacing: inherit; text-transform: none; color: inherit; white-space: nowrap; }
/* 7. articles on phones: the scrolled header was a 86→55% gradient, so body text showed through it → solid bar */
.ot-topbar.is-scrolled { background: rgb(11 11 11 / .95); -webkit-backdrop-filter: blur(8px); backdrop-filter: blur(8px); }
/* TOC v3 (coordinator): a slim full-width strip attached under the header — never floats over text */
.ot-tocbar, .ot-tocbar.is-on, .ot-tocbar.is-on:not(.x) {
left: 0; right: 0; width: auto; max-width: none; top: var(--ot-tocbar-top, 76px);
padding: 0 max(var(--gutter, 20px), calc((100% - var(--container, 1240px)) / 2));
background: rgb(11 11 11 / .95); -webkit-backdrop-filter: blur(8px); backdrop-filter: blur(8px);
border-top: 1px solid rgb(255 255 255 / .06); border-bottom: 1px solid rgb(255 255 255 / .06);
}
.ot-tocbar { transform: translateY(-100%); clip-path: inset(0 0 0 0); z-index: 49; transition: transform .25s ease, opacity .25s ease, visibility 0s linear .25s; }
.ot-tocbar.is-on { transform: none; }
.ot-tocbar.is-open { clip-path: none; }
.ot-tocbar__in { position: relative; display: flex; align-items: center; justify-content: space-between; gap: 12px; min-height: 40px; }
.ot-tocbar__btn, .ot-tocbar.is-on .ot-tocbar__btn { min-height: 40px; padding: 0; border: 0; border-radius: 0; background: none; box-shadow: none; -webkit-backdrop-filter: none; backdrop-filter: none; }
.ot-tocbar__cur { max-width: min(52vw, 520px); }
.ot-tocbar__step { display: flex; gap: 4px; }
.ot-tocbar__step button { display: inline-grid; place-items: center; width: 40px; height: 40px; padding: 0; border: 0; border-radius: 50%; background: none; color: var(--c-cream); font-size: 16px; line-height: 1; cursor: pointer; }
.ot-tocbar__step button:hover:not(:disabled) { color: var(--c-orange); }
.ot-tocbar__step button:disabled { opacity: .3; cursor: default; }
.ot-tocbar__panel, .ot-tocbar .ot-tocbar__panel { top: 100%; left: 0; right: auto; transform: none; margin-top: 1px; border-radius: 0 0 14px 14px; }
@media (max-width: 1023px) {
.ot-tocbar__in { min-height: 44px; }
.ot-tocbar__btn, .ot-tocbar.is-on .ot-tocbar__btn { min-height: 44px; }
.ot-tocbar__step button { width: 44px; height: 44px; }
.ot-tocbar__btn b { display: none; }
}
@media (prefers-reduced-motion: reduce) { .ot-tocbar, .ot-tocbar.is-on { transition: none; } }
h2[id^="ot-s"] { scroll-margin-top: var(--ot-anchor-offset, 140px); }
.ot-tocbar .ot-tocbar__panel { background: rgb(14 14 14 / .97); }
@media (max-width: 767px) { .ot-tocbar .ot-tocbar__panel { left: calc(-1 * var(--gutter, 20px)); width: 100vw; border-radius: 0 0 14px 14px; padding-inline: var(--gutter, 20px); } }
/* index layout (numbered sections): the left column (eyebrow + H2) is the ONE sticky element — desktop only,
inside its own grid so it releases at the end of the section; JS sets the offset and only allows it when it fits */
@media (min-width: 1024px) {
.ot-text--index .ot-text__aside.is-sticky { position: sticky; top: var(--ot-sticky-top, 100px); align-self: start; }
}
/* T03 «Με μια ματιά»: Line-up · Repertoire · Ideal for as three equal cards */
.ot-glance__grid { display: grid; gap: 14px; grid-template-columns: 1fr; }
@media (min-width: 768px) { .ot-glance__grid { grid-template-columns: repeat(2, minmax(0, 1fr)); } .ot-glance__grid--3 > :last-child { grid-column: 1 / -1; } }
@media (min-width: 1024px) { .ot-glance__grid--3 { grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 20px; } .ot-glance__grid--3 > :last-child { grid-column: auto; } }
.ot-glance__card { display: flex; flex-direction: column; gap: 12px; padding: 26px 24px 28px; border: 1px solid var(--ot-line); border-radius: var(--r-card); background: color-mix(in srgb, var(--ot-fg) 3%, transparent); }
.ot-glance__top { display: flex; align-items: baseline; gap: 12px; }
.ot-glance__no { font: 700 12px/1 var(--f-sans); font-variant-numeric: tabular-nums; letter-spacing: .08em; color: var(--c-orange); }
.ot-light .ot-glance__no { color: var(--c-void); text-decoration: underline; text-decoration-color: var(--c-orange); text-decoration-thickness: 2px; text-underline-offset: 4px; }
.ot-glance__label { font: 400 20px/1 var(--f-hand); text-transform: uppercase; color: var(--ot-accent-text); }
.ot-glance__title { margin: 0; font-size: clamp(21px, 1.8vw, 26px); font-weight: 700; line-height: 1.15; letter-spacing: -.02em; }
.ot-glance__text { margin: 0; font-size: var(--fs-body); line-height: 1.6; color: var(--ot-fg-2); }
.ot-glance__chips { margin-top: auto; padding-top: 6px; }
.ot-glance__chips a.ot-chip:hover { border-color: var(--c-orange); }
/* T03 «Τι περιλαμβάνει / What you get» (owner 8/10): one H2, short intro, numbered cards 01–04 (glance card language) */
.ot-includes__intro { max-width: 68ch; margin: -4px 0 28px; color: var(--ot-fg-2); font-size: var(--fs-body); line-height: 1.65; }
.ot-includes__intro > :first-child { margin-top: 0; }
.ot-includes__intro > :last-child { margin-bottom: 0; }
.ot-includes__intro a { color: inherit; text-decoration: underline; text-decoration-color: var(--c-orange); text-underline-offset: 3px; }
@media (min-width: 768px) { .ot-glance__grid--4 > :last-child { grid-column: auto; } }
@media (min-width: 1024px) { .ot-glance__grid--4 { gap: 20px; } }
.ot-includes__where { display: flex; align-items: flex-start; gap: 8px; margin: 0; font-size: 15px; line-height: 1.5; font-weight: 600; color: var(--ot-fg); }
.ot-includes__where svg, .ot-includes__checks svg { flex: none; width: 18px; height: 18px; margin-top: 2px; color: var(--c-orange); }
.ot-light .ot-includes__where svg, .ot-light .ot-includes__checks svg { color: var(--ot-accent-text); }
.ot-includes__checks { display: grid; gap: 8px; margin: 0; padding: 0; list-style: none; font-size: var(--fs-body); line-height: 1.5; color: var(--ot-fg-2); }
.ot-includes__checks li { display: flex; gap: 10px; align-items: flex-start; min-width: 0; }
.ot-includes__checks li span { min-width: 0; overflow-wrap: anywhere; }
.ot-includes__note { font-size: 15px; }
/* ===== home «What we create» — option B, typographic index (mock redesign/what-we-create .b) ===== */
.ot-create__grid { display: grid; gap: 24px; margin-top: 8px; }
.ot-create__list { border-top: 1px solid var(--ot-line); }
.ot-create__row { display: grid; grid-template-columns: 72px minmax(0, 1fr) 36px; gap: 14px; align-items: center; padding: 18px 0; border-bottom: 1px solid var(--ot-line); color: inherit; text-decoration: none; }
.ot-create__no { display: none; font: 700 15px/1 var(--f-sans); font-variant-numeric: tabular-nums; color: var(--ot-fg-2); transition: color .2s ease; }
.ot-create__thumb { display: block; width: 72px; height: 72px; border-radius: 10px; object-fit: cover; }
.ot-create__title { display: block; margin: 0; font-size: 28px; font-weight: 700; line-height: 1; letter-spacing: -.035em; transition: transform .35s var(--ease-out); }
.ot-create__text { display: block; margin: 8px 0 0; font-size: 14px; line-height: 1.5; color: var(--ot-fg-2); }
.ot-create__ar { display: grid; place-items: center; width: 36px; height: 36px; border: 1px solid var(--ot-line); border-radius: 50%; transition: background .2s ease, border-color .2s ease, transform .2s ease, color .2s ease; }
.ot-create__ar svg { width: 16px; height: 16px; }
.ot-create__row:focus-visible { outline: 2px solid var(--c-orange); outline-offset: 4px; }
.ot-create__media { display: none; }
@media (min-width: 1024px) {
.ot-create__grid { grid-template-columns: minmax(0, 1.25fr) minmax(0, 1fr); gap: clamp(40px, 5vw, 64px); align-items: start; margin-top: 12px; }
.ot-create__row { grid-template-columns: 56px minmax(0, 1fr) 40px; gap: 12px; padding: 20px 0; }
.ot-create__no { display: block; }
.ot-create__thumb { display: none; }
.ot-create__title { font-size: clamp(40px, 3.9vw, 56px); }
.ot-create__text { max-width: 46ch; max-height: 0; overflow: hidden; opacity: 0; font-size: 15px; transition: max-height .4s var(--ease-out), opacity .3s ease; }
.ot-create__ar { width: 40px; height: 40px; }
.ot-create__row.is-on .ot-create__no { color: var(--c-orange); }
.ot-create__row.is-on .ot-create__title { transform: translateX(8px); }
.ot-create__row.is-on .ot-create__text { max-height: 90px; opacity: 1; }
.ot-create__row.is-on .ot-create__ar { background: var(--c-orange); border-color: var(--c-orange); color: var(--c-void); transform: rotate(-45deg); }
.ot-create__media { display: block; position: sticky; top: calc(var(--ot-header-h, 76px) + 24px); aspect-ratio: 4 / 5; border-radius: 16px; overflow: hidden; background: var(--c-void-2); }
.ot-create__media img { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; opacity: 0; transform: scale(1.04); transition: opacity .45s ease, transform .9s var(--ease-out); }
.ot-create__media img.is-on { opacity: 1; transform: none; }
.ot-create__cap { position: absolute; left: 14px; bottom: 14px; z-index: 1; padding: 6px 10px; border-radius: var(--r-pill); background: rgb(11 11 11 / .74); color: var(--c-cream); font-size: 11px; letter-spacing: .14em; text-transform: uppercase; }
}
@media (prefers-reduced-motion: reduce) { .ot-create__title, .ot-create__text, .ot-create__ar, .ot-create__media img { transition: none; } }
.ot-light .ot-phones .ot-icon-btn { background: var(--c-void); border-color: var(--c-void); color: var(--c-cream); } /* cream contact band (task 61): grey discs looked washed out */
/* ---- task 66 (owner 6/10): ONE card for the whole site — tall 5:8, 5 per row on desktop, 2.5 + swipe on phones, no numbers.
Bands, «Υπογραφές», stories, projects, portfolio/blog, related articles, videos. Out of scope: places (task 60),
photo galleries (task 70), reviews (--wide), complementary services (now a photo-less list, task 65). ---- */
.ot-project, .ot-postcard, .ot-grid--cards .ot-card { --ot-card-ratio: 5 / 8; }
.ot-project .ot-card__body, .ot-postcard .ot-card__body { inset: auto 13px 15px 13px; }
.ot-project .ot-card__title, .ot-postcard .ot-card__title { margin: 5px 0 7px; font-size: 19px; line-height: 1.05; }
.ot-project .ot-card__text { font-size: 11px; line-height: 1.4; }
.ot-carousel:not(.ot-carousel--wide):not(.ot-carousel--gallery):not(.ot-places .ot-carousel) { --ot-per: calc((100% - 2 * var(--ot-gap)) / 2.5); }
.ot-carousel--videos .ot-facade { aspect-ratio: 5 / 8; }
.ot-carousel--videos .ot-facade img { object-position: center; }
.ot-carousel--videos .ot-facade__caption span:first-child { font-size: 15px; line-height: 1.15; }
.ot-grid--cards { grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 12px; }
.ot-city__label { color: color-mix(in srgb, var(--c-cream) 82%, transparent); } /* less orange where the label sat on the photo */
@media (min-width: 768px) {
.ot-carousel:not(.ot-carousel--wide):not(.ot-carousel--gallery):not(.ot-places .ot-carousel) { --ot-per: calc((100% - 3 * var(--ot-gap)) / 3.5); }
.ot-grid--cards { grid-template-columns: repeat(3, minmax(0, 1fr)); }
}
@media (min-width: 1024px) {
.ot-carousel:not(.ot-carousel--wide):not(.ot-carousel--gallery):not(.ot-places .ot-carousel) { --ot-per: calc((100% - 4 * var(--ot-gap)) / 5); }
.ot-grid--cards { grid-template-columns: repeat(5, minmax(0, 1fr)); gap: 20px; }
}
/* task 66: a «gallery» carousel that holds project cards (planning pages «Projects») is a card row too; photo galleries stay as they are (task 70) */
.ot-carousel--gallery .ot-project { --ot-card-ratio: 5 / 8; }
.ot-carousel--gallery:has(.ot-project) { --ot-per: calc((100% - 2 * var(--ot-gap)) / 2.5); }
@media (min-width: 768px) { .ot-carousel--gallery:has(.ot-project) { --ot-per: calc((100% - 3 * var(--ot-gap)) / 3.5); } }
@media (min-width: 1024px) { .ot-carousel--gallery:has(.ot-project) { --ot-per: calc((100% - 4 * var(--ot-gap)) / 5); } }
/* task 66 — narrow cards: text never climbs over the photo (3 lines max, hidden on phones), smaller title on phones, cream video titles (less orange) */
.ot-card .ot-card__text { display: -webkit-box; -webkit-box-orient: vertical; -webkit-line-clamp: 3; overflow: hidden; }
.ot-card .ot-card__title { overflow-wrap: anywhere; hyphens: auto; }
.ot-carousel--videos .ot-facade__caption span:first-child, .ot-light .ot-carousel--videos .ot-facade__caption span:first-child { color: var(--c-cream); letter-spacing: -.01em; }
@media (max-width: 767px) {
.ot-card .ot-card__text { display: none; }
.ot-card .ot-card__title, .ot-project .ot-card__title, .ot-postcard .ot-card__title { font-size: 15px; line-height: 1.1; }
.ot-card .ot-card__body > .ot-meta, .ot-project .ot-meta, .ot-postcard .ot-meta { font-size: 10px; padding: 4px 8px; margin-bottom: 6px; }
.ot-carousel--videos .ot-facade__caption span:first-child { font-size: 13px; }
.ot-carousel--videos .ot-play__disc { transform: scale(.72); }
}
.ot-meta__loc { color: var(--c-orange); } /* project card tag: the city in orange (owner 6/10) — orange on the 74% ink pill ≈ 5.6:1 */
/* project/article cards (owner 7/10): tags on one baseline across a row — the title gets a fixed 3-line slot under the tag,
the tag stays on one line, no mid-word hyphenation; a little more inner padding */
.ot-project .ot-card__body, .ot-postcard .ot-card__body { inset: auto 16px 18px 16px; display: flex; flex-direction: column; align-items: flex-start; }
.ot-project .ot-card__title, .ot-postcard .ot-card__title { min-height: calc(3 * 1.08em); margin: 8px 0 0; line-height: 1.08; display: -webkit-box; -webkit-box-orient: vertical; -webkit-line-clamp: 3; overflow: hidden; }
.ot-card .ot-card__title { hyphens: manual; overflow-wrap: break-word; }
.ot-project .ot-meta, .ot-postcard .ot-meta, .ot-card .ot-card__body > .ot-meta { max-width: 100%; margin-bottom: 0; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
@media (max-width: 767px) {
.ot-project .ot-card__body, .ot-postcard .ot-card__body { inset: auto 10px 12px 10px; }
.ot-project .ot-card__title, .ot-postcard .ot-card__title { margin-top: 6px; }
}
@media (max-width: 767px) { .ot-meta--loc .ot-meta__cat { display: none; } } /* phones: city only in the tag */
/* city page families (owner 7/10) */
.ot-loc-fam__text { max-width: 68ch; margin: 0 0 28px; }
.ot-loc-fam__text p + p { margin-top: .6em; }
.ot-loc-fam__projects { margin-bottom: 32px; }
.ot-loc-fam__links { margin-top: 0; }
/* t156 (Nikos 10/10 doc 03 «πλαίσια στο aspect ratio του portfolio»): the hub uses the portfolio grid + 5:8 cards — no own ratio/title size */
/* mobile (owner 8/10): reviews 1.5 per screen; places taller (4:5) and 1.5 per screen — they carry label + title + «Δείτε» */
@media (max-width: 767px) {
.ot-carousel--wide { --ot-per: calc((100% - var(--ot-gap)) / 1.5); }
.ot-places .ot-carousel { --ot-per: calc((100% - var(--ot-gap)) / 1.5); }
.ot-places .ot-carousel .ot-card { --ot-card-ratio: 4 / 5; }
}
.ot-city__cta--soon { opacity: .5; padding: 0; color: var(--c-cream); font-weight: 600; letter-spacing: .02em; cursor: default; } /* place without a city page yet */
/* reviews on phones at 1.5 per screen (owner 8/10): smaller text, clean 8-line clamp (no line cut in half) */
@media (max-width: 767px) {
.ot-review__text { font-size: 16px; line-height: 1.4; letter-spacing: -.01em; }
.ot-review__text.is-clamped { -webkit-line-clamp: 8; } /* clamp only while closed: «Περισσότερα» removes .is-clamped (fix 8/10) */
.ot-review { padding: 18px 16px; }
}
.ot-review__text.is-clamped { flex: none; } .ot-review__more { margin-bottom: auto; } /* a clamped text never stretches when a neighbour card opens (fix 8/10); the author line stays at the bottom */
.ot-review__more { margin-top: -16px; } .ot-review__more + .ot-review__by, .ot-review__more ~ .ot-review__by { margin-top: 20px; } /* «Περισσότερα»: closer to the text, more air before the author (owner 8/10) */
.ot-review__more { border-bottom-color: var(--c-orange); } /* underline always orange (owner 8/10) */
.ot-footer__credit { margin: 6px 0 0; font-size: 11px; letter-spacing: .02em; opacity: .7; } .ot-footer__credit a { color: inherit; text-decoration: underline; text-decoration-color: var(--c-orange); text-underline-offset: 3px; } .ot-footer__credit a:hover { color: var(--c-cream); }
/* task 57 (owner): client logos always in their own colours, the ticker never pauses on hover.
On dark bands each logo sits on a light tile, so dark logos stay visible. */
.ot-ticker:hover .ot-ticker__track { animation-play-state: running; }
.ot-ticker__logo img, .ot-light .ot-ticker__logo img, .ot-dark .ot-ticker__logo img, .ot-ticker__logo:hover img { filter: none; opacity: 1; }
.ot-dark .ot-ticker__logo { background: #f3ebde; border-radius: 10px; overflow: hidden; padding: 0 8px; }
/* ---------- tasks 64/65 (owner 8/10): «Αναλυτικά» — all sales/intro texts in one section, collapsed behind «Διαβάστε περισσότερα» ---------- */
.ot-details__body { position: relative; max-width: 820px; display: grid; gap: var(--s-8); }
.ot-details__part .ot-prose { max-width: none; }
.ot-details__title { font-size: var(--fs-h3); font-weight: 600; line-height: 1.25; margin: 0 0 var(--s-3); }
.ot-details__part h4 { font-size: 17px; font-weight: 600; margin: var(--s-5) 0 var(--s-2); }
.ot-details__body.is-collapsed { max-height: 380px; overflow: hidden; -webkit-mask-image: linear-gradient(#000 55%, transparent); mask-image: linear-gradient(#000 55%, transparent); }
.ot-details__actions { display: flex; flex-wrap: wrap; align-items: center; gap: var(--s-6); margin: var(--s-8) 0 0; }
.ot-details__toggle { background: none; border: 0; padding: 0; min-height: var(--tap); font: inherit; font-weight: 600; color: inherit; cursor: pointer; text-decoration: underline; text-decoration-color: var(--c-orange); text-underline-offset: 6px; text-decoration-thickness: 2px; }
.ot-details__toggle:focus-visible { outline: 2px solid var(--c-orange); outline-offset: 4px; }
/* ---------- task 65: «Πώς δουλεύουμε» as a compact strip (title + one line per step) ---------- */
.ot-process--strip { padding-block: clamp(56px, 6vw, 88px); }
.ot-steps { list-style: none; margin: 0; padding: 0; display: grid; gap: var(--s-5); grid-template-columns: 1fr; counter-reset: none; }
.ot-steps__item { display: grid; align-content: start; gap: var(--s-2); padding-top: var(--s-4); border-top: 2px solid var(--c-orange); }
.ot-steps__no { font: 600 13px/1 var(--f-sans); font-variant-numeric: tabular-nums; letter-spacing: .08em; color: var(--ot-accent-text); }
.ot-steps__title { font-size: 18px; font-weight: 600; line-height: 1.3; }
.ot-steps__text { margin: 0; font-size: 15px; line-height: 1.5; opacity: .82; }
@media (min-width: 768px) { .ot-steps { grid-template-columns: repeat(2, 1fr); gap: var(--s-6); } }
@media (min-width: 1024px) { .ot-steps { grid-template-columns: none; grid-auto-flow: column; grid-auto-columns: minmax(0, 1fr); } }
/* ---------- owner 8/10: no frames on service pages — price and types read as open items with an orange rule (same language as the process strip) ---------- */
.ot-stats.ot-price { border: 0; gap: var(--s-6) var(--s-8); grid-template-columns: repeat(auto-fit, minmax(min(100%, 260px), max-content)); }
.ot-price .ot-stat { border: 0; padding: var(--s-4) 0 0; border-top: 2px solid var(--c-orange); }
.ot-features__grid { gap: var(--s-8) var(--s-6); }
.ot-feature, .ot-light .ot-feature { border: 0; border-radius: 0; background: none; padding: var(--s-4) 0 0; border-top: 2px solid var(--c-orange); box-shadow: none; }
.ot-feature:hover { background: none; transform: none; }
.ot-feature__icon { display: none; }
.ot-stats.ot-price .ot-stat { container-type: normal; }
.ot-stats.ot-price .ot-stat b, .ot-price .ot-stat b { font-size: clamp(34px, 4.6vw, 64px); }
/* city pages (owner 8/10): services per family = one compact line of links, not full-width rows */
.ot-loc-fam__links { display: flex; flex-wrap: wrap; align-items: baseline; gap: var(--s-2) var(--s-4); margin-top: var(--s-8); font-size: 15px; }
.ot-loc-fam__links-label { font-weight: 600; }
.ot-loc-fam__links ul { display: flex; flex-wrap: wrap; gap: var(--s-2) 0; margin: 0; padding: 0; list-style: none; }
.ot-loc-fam__links li:not(:last-child)::after { content: "·"; margin: 0 var(--s-3); color: var(--c-orange); }
.ot-loc-fam__links a { display: inline-block; padding-block: 10px; color: inherit; text-decoration: underline; text-decoration-color: var(--c-orange); text-underline-offset: 5px; text-decoration-thickness: 1px; }
.ot-loc-fam__links a:hover { color: var(--c-orange); }
.ot-loc-fam__links { display: block; line-height: 2.4; max-width: 980px; }
.ot-loc-fam__links-label { margin-right: var(--s-3); }
.ot-loc-fam__links ul, .ot-loc-fam__links li { display: inline; }
.ot-loc-fam__links a { display: inline; padding: 0; }
.ot-loc-fam__links li { white-space: nowrap; }
.ot-loc-fam__links li, .ot-loc-fam__links-label { display: inline-block; white-space: nowrap; line-height: 1.6; margin-block: 6px; }
.ot-loc-fam__links { display: flex; flex-wrap: wrap; align-items: baseline; column-gap: 0; } .ot-loc-fam__links ul { display: contents; }
.ot-loc-fam__links li { white-space: normal; max-width: 100%; }
/* ---------- tasks 59 + 48 (owner 8/10): home «What we create» = 5 category cards; hover / first tap shows the services ---------- */
.ot-fam { isolation: isolate; }
.ot-fam__link { position: absolute; inset: 0; z-index: 1; color: inherit; text-decoration: none; }
.ot-fam .ot-card__title { font-size: clamp(22px, 2vw, 28px); }
.ot-fam .ot-card__text { font-size: 13px; }
.ot-fam__panel { position: absolute; inset: 0; z-index: 2; display: flex; flex-direction: column; justify-content: flex-end; padding: 18px 16px; background: rgb(11 11 11 / .9); opacity: 0; visibility: hidden; transition: opacity var(--dur-base) ease, visibility var(--dur-base); }
.ot-fam__h { margin: 0 0 10px; font-size: clamp(20px, 1.8vw, 26px); font-weight: 700; letter-spacing: -.03em; color: var(--c-cream); }
.ot-fam__panel ul { list-style: none; margin: 0; padding: 0; border-top: 2px solid var(--c-orange); }
.ot-fam__panel li a { display: flex; justify-content: space-between; align-items: center; gap: 8px; min-height: 40px; padding: 6px 0; border-bottom: 1px solid rgb(255 255 255 / .14); color: var(--c-cream); text-decoration: none; font-size: 14px; line-height: 1.25; }
.ot-fam__panel li a span { color: var(--c-orange); transition: transform var(--dur-fast) ease; }
.ot-fam__panel li a:hover { color: var(--c-orange); }
.ot-fam__panel li a:hover span { transform: translateX(3px); }
.ot-fam.is-open .ot-fam__panel, .ot-fam:focus-within .ot-fam__panel { opacity: 1; visibility: visible; }
@media (hover: hover) and (pointer: fine) { .ot-fam:hover .ot-fam__panel { opacity: 1; visibility: visible; } }
@media (prefers-reduced-motion: reduce) { .ot-fam__panel { transition: none; } }
.ot-fam__panel { background: rgb(11 11 11 / .96); }
.ot-fam.is-open .ot-card__body, .ot-fam:focus-within .ot-card__body { opacity: 0; }
@media (hover: hover) and (pointer: fine) { .ot-fam:hover .ot-card__body { opacity: 0; } }
/* phones/tablets: category cards 1.5 per screen so the services list fits */
/* t119 (Nikos 10/10): phones show 2,5 «Μία ομάδα» cards, like «Οι υπογραφές μας» — the old 1,5-per-screen rule is gone (tablets keep 2,5 below) */
@media (min-width: 768px) and (max-width: 1023px) { .ot-create--cards .ot-carousel { --ot-per: calc((100% - 2 * var(--ot-gap)) / 2.5) !important; } }
/* 59/48 (owner 8/10): softer panel — fade in, photo still visible behind */
.ot-fam__panel { background: linear-gradient(to top, rgb(11 11 11 / .9) 0%, rgb(11 11 11 / .72) 55%, rgb(11 11 11 / .45) 100%); -webkit-backdrop-filter: blur(2px); backdrop-filter: blur(2px); transition: opacity 450ms ease, visibility 450ms; }
.ot-fam__panel ul, .ot-fam__h { transform: translateY(8px); transition: transform 450ms ease; }
.ot-fam.is-open .ot-fam__panel ul, .ot-fam.is-open .ot-fam__h, .ot-fam:focus-within .ot-fam__panel ul, .ot-fam:focus-within .ot-fam__h { transform: none; }
@media (hover: hover) and (pointer: fine) { .ot-fam:hover .ot-fam__panel ul, .ot-fam:hover .ot-fam__h { transform: none; } }
.ot-fam .ot-card__body { transition: opacity 300ms ease; }
@media (prefers-reduced-motion: reduce) { .ot-fam__panel ul, .ot-fam__h { transform: none; transition: none; } }
/* ---------- task 54: browser-language note (no redirect) ---------- */
.ot-langnote { position: fixed; z-index: 60; top: 88px; right: 16px; left: auto; max-width: calc(100vw - 32px); display: flex; align-items: center; gap: 4px; padding: 4px 4px 4px 16px; border-radius: var(--r-pill); background: rgb(11 11 11 / .88); -webkit-backdrop-filter: blur(6px); backdrop-filter: blur(6px); box-shadow: 0 10px 30px rgb(0 0 0 / .25), inset 0 0 0 1px rgb(255 106 0 / .45); color: var(--c-cream); font-size: 14px; opacity: 0; transform: translateY(-6px); transition: opacity 400ms ease, transform 400ms ease; }
.ot-langnote.is-on { opacity: 1; transform: none; }
.ot-langnote[hidden] { display: none; }
.ot-langnote a { color: inherit; text-decoration: none; padding: 10px 4px; }
.ot-langnote a span { color: var(--c-orange); }
.ot-langnote a:hover { color: var(--c-orange); }
.ot-langnote__x { width: 36px; height: 36px; border: 0; border-radius: 50%; background: none; color: inherit; font-size: 20px; line-height: 1; cursor: pointer; }
.ot-langnote__x:hover, .ot-langnote__x:focus-visible { background: rgb(255 255 255 / .1); outline: none; }
@media (min-width: 1024px) { .ot-langnote { top: 110px; right: 24px; } }
@media (prefers-reduced-motion: reduce) { .ot-langnote { transition: none; } }
/* ---------- task 70 (Nikos 5/10): masonry gallery — real shape of each photo, thin orange line under it, swipe row on phones ---------- */
.ot-wrap--gallery { max-width: 1440px; }
.ot-masonry { display: flex; gap: 12px; margin: var(--s-8) calc(-1 * var(--gutter)) 0; padding: 0 var(--gutter) 6px; overflow-x: auto; scroll-snap-type: x mandatory; scrollbar-width: none; overscroll-behavior-x: contain; }
.ot-masonry::-webkit-scrollbar { display: none; }
.ot-masonry__item { flex: none; display: block; scroll-snap-align: start; color: inherit; }
.ot-masonry__item img { display: block; height: min(62vh, 420px); width: auto; max-width: 82vw; object-fit: cover; border-radius: var(--r-media); background: var(--c-void-2); transition: transform .5s var(--ease-out, ease), filter .3s ease; }
.ot-masonry__item::after { content: ""; display: block; height: 2px; margin: 10px 12% 0; border-radius: 2px; background: linear-gradient(90deg, transparent, var(--c-orange) 50%, transparent); opacity: .9; }
@media (min-width: 768px) {
.ot-masonry { display: block; columns: 2; column-gap: 18px; margin: var(--s-8) 0 0; padding: 0; overflow: visible; }
.ot-masonry__item { break-inside: avoid; margin: 0 0 22px; overflow: hidden; }
.ot-masonry__item img { width: 100%; height: auto; max-width: none; }
.ot-masonry__item:hover img, .ot-masonry__item:focus-visible img { filter: brightness(1.06); }
}
@media (min-width: 1024px) { .ot-masonry { columns: 3; column-gap: 22px; } .ot-masonry[data-n="2"], .ot-masonry[data-n="4"] { columns: 2; } }
.ot-prose:has(.ot-masonry) { max-width: 1240px; }
.ot-prose:has(.ot-masonry) > :not(.ot-masonry):not(h2):not(h3) { max-width: 820px; }
.ot-prose .ot-masonry img { margin: 0; }
.ot-prose .ot-masonry .ot-masonry__item { margin-top: 0; }
@media (prefers-reduced-motion: reduce) { .ot-masonry__item img { transition: none; } }
.ot-masonry { scroll-padding-inline: var(--gutter); }
.ot-masonry__item::after { content: none; } /* owner 8/10: no line under the photos */
/* ---------- task 70: project pages — title + main media one dark band, same wide hero everywhere, videos stack, one «Αναλυτικά» ---------- */
.ot-main-media--joined { padding-top: 0; }
.ot-page-head + .ot-main-media--joined, .ot-page-head + main .ot-main-media--joined { margin-top: 0; }
.ot-main-media .ot-main-media__fig, .ot-main-media > .ot-wrap > .ot-facade { aspect-ratio: 16 / 9; max-height: 72svh; width: 100%; overflow: hidden; border-radius: var(--r-media); margin: 0; }
.ot-main-media .ot-main-media__fig img, .ot-main-media > .ot-wrap > .ot-facade img { width: 100%; height: 100%; object-fit: cover; }
.ot-videos__stack { display: grid; gap: var(--s-8); max-width: 1100px; }
.ot-videos__stack .ot-prose__video { margin: 0; }
.ot-details--project .ot-details__prose { max-width: 860px; }
.ot-details--project .ot-details__prose h2 { margin-top: clamp(40px, 5vw, 64px); }
.ot-details--project .ot-details__prose > h2:first-child { margin-top: 0; }
/* owner 8/10: every video play = the home-hero disc (brush ring + pulse) + the «Δείτε το βίντεο» label that follows the pointer */
.ot-play__disc::after { animation: ot-pulse 2.4s var(--ease-out) infinite; }
.ot-play__disc::before {
content: ""; position: absolute; inset: -14px; background: var(--c-orange);
-webkit-mask: url("../shapes/brush-ring.svg") center / contain no-repeat; mask: url("../shapes/brush-ring.svg") center / contain no-repeat;
opacity: .55; animation: ot-ring-spin 9s linear infinite; pointer-events: none;
}
.ot-facade__cursor { display: none; }
@media (hover: hover) and (pointer: fine) {
.ot-facade__cursor { display: inline-flex; }
.ot-facade.is-hovering .ot-facade__cursor { opacity: 1; }
.ot-facade.is-hovering { cursor: none; }
}
@media (prefers-reduced-motion: reduce) { .ot-play__disc::after, .ot-play__disc::before { animation: none; } }
/* ---------- task 70 (owner 8/10): project text — chapters; staging layout demos ?ot_layout=a|b|c|d|bd ---------- */
.ot-details--project .ot-pl__intro, .ot-details--project .ot-pl__chap { max-width: 860px; }
.ot-details--project .ot-pl__chap { margin-top: clamp(40px, 5vw, 64px); }
.ot-details--project .ot-pl__chap > h2:first-child, .ot-details--project .ot-pl__head h2 { margin-top: 0; }
.ot-details--project .ot-details__body { display: block; max-width: none; }
/* a · a photo between chapters */
.ot-pl__photo { margin: clamp(40px, 5vw, 72px) 0 0; max-width: 1240px; }
.ot-pl__photo img { display: block; width: 100%; height: auto; aspect-ratio: 16 / 9; object-fit: cover; border-radius: var(--r-media); }
/* b · key facts as cards */
.ot-facts { display: grid; grid-template-columns: repeat(auto-fit, minmax(min(100%, 200px), 1fr)); gap: var(--s-6) var(--s-8); margin: 0 0 clamp(40px, 5vw, 64px); }
.ot-facts__item { padding-top: var(--s-4); border-top: 2px solid var(--c-orange); }
.ot-facts dt { font: 600 11px/1.3 var(--f-sans); letter-spacing: .14em; text-transform: uppercase; opacity: .7; margin-bottom: 8px; }
.ot-facts dd { margin: 0; font-size: 18px; font-weight: 600; line-height: 1.35; }
/* c · two columns: sticky chapter title | text */
@media (min-width: 1024px) {
.ot-pl--c .ot-pl__chap { display: grid; grid-template-columns: minmax(0, 1fr) minmax(0, 2fr); gap: clamp(32px, 4vw, 72px); max-width: none; align-items: start; }
.ot-pl--c .ot-pl__head { position: sticky; top: 130px; }
.ot-pl--c .ot-pl__head h2 { font-size: clamp(24px, 2.2vw, 32px); line-height: 1.12; }
.ot-pl--c .ot-pl__intro { max-width: none; margin-left: calc(33.333% + 24px); }
}
/* d · typography: bigger lead, numbered chapters */
.ot-pl--d .ot-pl__intro > p:first-child, .ot-pl--bd .ot-pl__intro > p:first-child { font-size: clamp(20px, 1.7vw, 25px); line-height: 1.5; }
.ot-pl--d .ot-details__body, .ot-pl--bd .ot-details__body, .ot-pl--d, .ot-pl--bd { counter-reset: none; }
.ot-pl--d .ot-wrap, .ot-pl--bd .ot-wrap { counter-reset: ch; }
.ot-pl--d .ot-pl__chap:not(.ot-pl__faq) > h2::before, .ot-pl--bd .ot-pl__chap:not(.ot-pl__faq) > h2::before { counter-increment: ch; content: counter(ch, decimal-leading-zero); display: block; margin-bottom: 10px; font: 600 14px/1 var(--f-sans); letter-spacing: .1em; color: var(--c-orange); }
.ot-pl--d .ot-pl__chap p strong, .ot-pl--bd .ot-pl__chap p strong { background: linear-gradient(transparent 62%, color-mix(in srgb, var(--c-orange) 28%, transparent) 62%); }
/* owner 8/10: single video = centred, heading centred above it (balance) */
.ot-videos:has(.ot-video-single) .ot-section-head, .ot-videos--prose .ot-section-head { text-align: center; margin-inline: auto; }
.ot-videos:has(.ot-video-single) .ot-section-head .ot-eyebrow, .ot-videos--prose .ot-section-head .ot-eyebrow { margin-inline: auto; }
.ot-video-single, .ot-videos__stack { max-width: 1100px; margin-inline: auto; }
.ot-videos:has(.ot-video-single) .ot-section-head, .ot-videos--prose .ot-section-head { max-width: 900px; } .ot-videos:has(.ot-video-single) .ot-section-head > *, .ot-videos--prose .ot-section-head > * { margin-inline: auto; max-width: none; }
/* cd = two columns + typography */
@media (min-width: 1024px) {
.ot-pl--cd .ot-pl__chap { display: grid; grid-template-columns: minmax(0, 1fr) minmax(0, 2fr); gap: clamp(32px, 4vw, 72px); max-width: none; align-items: start; }
.ot-pl--cd .ot-pl__head { position: sticky; top: 130px; }
.ot-pl--cd .ot-pl__head h2 { font-size: clamp(24px, 2.2vw, 32px); line-height: 1.12; }
.ot-pl--cd .ot-pl__intro { max-width: none; margin-left: calc(33.333% + 24px); }
}
.ot-pl--cd .ot-wrap { counter-reset: ch; }
.ot-pl--cd .ot-pl__intro > p:first-child { font-size: clamp(20px, 1.7vw, 25px); line-height: 1.5; }
.ot-pl--cd .ot-pl__chap:not(.ot-pl__faq) .ot-pl__head h2::before { counter-increment: ch; content: counter(ch, decimal-leading-zero); display: block; margin-bottom: 10px; font: 600 14px/1 var(--f-sans); letter-spacing: .1em; color: var(--c-orange); }
.ot-pl--cd .ot-pl__chap p strong { background: linear-gradient(transparent 62%, color-mix(in srgb, var(--c-orange) 28%, transparent) 62%); }
/* studio pages (owner 8/10): a real, lazy map */
.ot-map__embed { margin-top: var(--s-8); aspect-ratio: 16 / 7; min-height: 320px; overflow: hidden; border-radius: var(--r-card); background: var(--c-void-2); }
.ot-map__embed iframe { display: block; width: 100%; height: 100%; border: 0; filter: grayscale(.35) contrast(1.05); }
.ot-map__addr { display: flex; flex-wrap: wrap; justify-content: space-between; gap: var(--s-3) var(--s-6); margin: var(--s-5) 0 0; font-size: 17px; font-weight: 600; }
@media (max-width: 767px) { .ot-map__embed { aspect-ratio: 4 / 5; } }
.ot-pl--cd .ot-pl__head, .ot-pl--c .ot-pl__head { position: static; } /* owner 8/10: titles do not stick */
.ot-pl--cd .ot-wrap:not(:has(.ot-pl__chap:not(.ot-pl__faq))) .ot-pl__intro { margin-left: 0; max-width: 860px; }
.ot-pl__head h2 { line-height: 1.12; margin-bottom: 16px; }
/* article demo (cd): photos / videos / tables in the flow break out to the full width of both columns */
@media (min-width: 1024px) {
.ot-pl--cd .ot-pl__chap > .ot-prose > :is(.ot-masonry, .ot-prose__video, figure, .ot-gallery-grid, table) { margin-left: calc(-50% - clamp(32px, 4vw, 72px)); width: calc(150% + clamp(32px, 4vw, 72px)); max-width: none; }
}
.ot-pl__tldr { font-size: clamp(20px, 1.7vw, 25px); line-height: 1.5; font-weight: 500; margin-bottom: var(--s-6); }
.ot-pl__tldr p { margin: 0 0 .6em; }
.ot-details--project .ot-prose, .ot-pl__intro, .ot-pl__tldr { overflow-wrap: anywhere; min-width: 0; } .ot-pl__chap > * { min-width: 0; }
.ot-pl__head h2, .ot-details--project h2 { overflow-wrap: anywhere; }
.ot-prose .instagram-media, .ot-prose blockquote.instagram-media { min-width: 0 !important; max-width: 100% !important; width: 100% !important; margin-inline: 0 !important; }
.ot-prose iframe.instagram-media { aspect-ratio: auto !important; width: 100% !important; max-width: 540px !important; min-width: 0 !important; }
.ot-prose iframe.instagram-media { max-width: min(540px, calc(100vw - 2 * var(--gutter))) !important; }
/* owner 8/10 (fotografisi-sti-mykono): media stay inside the text column — breaking out covered the chapter titles */
@media (min-width: 1024px) {
.ot-pl--cd .ot-pl__chap > .ot-prose > :is(.ot-masonry, .ot-prose__video, figure, .ot-gallery-grid, table) { margin-left: 0; width: auto; max-width: 100%; }
}
.ot-pl__chap .ot-prose figure img, .ot-pl__intro figure img { max-height: 78vh; width: auto; max-width: 100%; height: auto; }
.ot-pl__chap .ot-prose figure, .ot-pl__intro figure { margin: 1.6em 0; }
.ot-pl__chap .ot-prose figcaption { font-size: 13px; opacity: .7; margin-top: 8px; }
@media (min-width: 1024px) { .ot-pl--cd .ot-pl__intro, .ot-pl--c .ot-pl__intro { margin-left: 0; max-width: 980px; } } /* owner 8/10: the opening text runs from the left edge, before 01 */
@media (min-width: 1024px) { .ot-pl--cd .ot-pl__intro, .ot-pl--c .ot-pl__intro { max-width: none; } } /* owner 8/10: opening text full width */
/* owner 8/10: title band + featured image read as one — no line, the corner glow fades out before the photo */
.ot-page-head:has(+ .ot-main-media--joined) { border-bottom: 0; padding-bottom: 36px; background: radial-gradient(60% 120% at 92% 0%, color-mix(in srgb, var(--c-orange) 16%, transparent), transparent 70%), var(--c-void); }
.ot-main-media--joined { background: var(--c-void); }
@media (min-width: 1024px) { .ot-pl--cd .ot-pl__intro > *, .ot-pl--cd .ot-pl__tldr, .ot-pl--cd .ot-pl__tldr > * { max-width: none; } }
.ot-details--project .ot-prose p:empty, .ot-details--project .ot-prose p:has(> br:only-child) { display: none; }
.ot-pl__chap--lead { margin-top: var(--s-8); }
/* opening sub-titles in the left column (owner 8/10) */
.ot-pl__chap--lead { margin-top: var(--s-8); }
.ot-pl__chap--lead .ot-pl__head :is(h3, h4, h5, h6, .ot-pl__subtitle) { margin: 0; font-size: clamp(19px, 1.6vw, 22px); line-height: 1.25; font-weight: 700; letter-spacing: -.015em; }
.ot-pl__chap--lead .ot-pl__head .ot-pl__subtitle strong { font-weight: inherit; background: none; }
.ot-pl__chap--lead .ot-prose > :first-child { margin-top: 0; }
/* Instagram link card (owner 8/10) */
.ot-ig { display: flex; align-items: center; gap: 14px; max-width: 460px; margin: 1.6em 0; padding: 14px 18px 14px 14px; border-radius: var(--r-card); background: var(--c-void); color: var(--c-cream); text-decoration: none !important; box-shadow: 0 12px 30px rgb(0 0 0 / .14); transition: transform var(--dur-fast) ease; }
.ot-ig:hover { transform: translateY(-2px); }
.ot-ig__icon { display: grid; place-items: center; flex: none; width: 46px; height: 46px; border-radius: 12px; background: var(--c-orange); color: var(--c-void); }
.ot-ig__icon svg { width: 22px; height: 22px; }
.ot-ig__txt { display: grid; gap: 2px; min-width: 0; }
.ot-ig__txt strong { font-size: 16px; background: none !important; overflow-wrap: anywhere; }
.ot-ig__txt span { font-size: 13px; opacity: .75; }
.ot-ig__ar { margin-left: auto; color: var(--c-orange); font-size: 20px; }
.ot-prose a.ot-ig, .ot-prose a.ot-ig .ot-ig__txt, .ot-prose a.ot-ig .ot-ig__txt * { color: var(--c-cream) !important; text-decoration: none !important; border: 0 !important; } .ot-prose a.ot-ig .ot-ig__ar { color: var(--c-orange) !important; } .ot-prose a.ot-ig .ot-ig__icon { color: var(--c-void) !important; }
/* ---------- owner 8/10: blog / portfolio — header and body are one dark surface; cards get a thin orange outline ---------- */
.ot-page-head:has(+ .ot-archive) { border-bottom: 0; padding-bottom: 8px; background: radial-gradient(55% 140% at 92% 0%, color-mix(in srgb, var(--c-orange) 15%, transparent), transparent 70%), var(--c-void); }
.ot-archive.ot-band { background: radial-gradient(70% 55% at 0% 100%, color-mix(in srgb, var(--c-orange) 7%, transparent), transparent 70%), var(--c-void) !important; padding-top: clamp(24px, 3vw, 40px); }
.ot-archive.ot-band::before, .ot-archive.ot-band::after { content: none !important; }
.ot-archive .ot-card { outline: 1px solid color-mix(in srgb, var(--c-orange) 38%, transparent); outline-offset: -1px; transition: outline-color var(--dur-fast) ease, transform var(--dur-fast) ease; }
.ot-archive .ot-card:hover, .ot-archive .ot-card:focus-visible { outline-color: var(--c-orange); transform: translateY(-3px); }
/* ---------- owner 8/10: archive — the orange light sits lower, in the body; each card catches it on a different edge ---------- */
.ot-page-head:has(+ .ot-archive) { background: var(--c-void); }
.ot-archive.ot-band { background: radial-gradient(45% 38% at 88% 22%, color-mix(in srgb, var(--c-orange) 16%, transparent), transparent 75%), radial-gradient(40% 35% at 6% 78%, color-mix(in srgb, var(--c-orange) 9%, transparent), transparent 75%), var(--c-void) !important; }
.ot-archive .ot-card { outline: 0; }
.ot-archive .ot-card::before { content: ""; position: absolute; inset: 0; z-index: 3; border-radius: inherit; border: 1.5px solid var(--c-orange); pointer-events: none; opacity: .85;
-webkit-mask: radial-gradient(circle at var(--ot-glint, 0% 0%), #000 0, transparent 38%); mask: radial-gradient(circle at var(--ot-glint, 0% 0%), #000 0, transparent 38%); transition: opacity var(--dur-base) ease; }
.ot-archive__item:nth-child(5n+1) .ot-card { --ot-glint: 0% 0%; }
.ot-archive__item:nth-child(5n+2) .ot-card { --ot-glint: 100% 28%; }
.ot-archive__item:nth-child(5n+3) .ot-card { --ot-glint: 72% 100%; }
.ot-archive__item:nth-child(5n+4) .ot-card { --ot-glint: 0% 66%; }
.ot-archive__item:nth-child(5n+5) .ot-card { --ot-glint: 100% 100%; }
.ot-archive .ot-card:hover::before { opacity: 1; -webkit-mask: none; mask: none; }
/* numbered pager (owner 8/10) */
.ot-pager { display: flex; justify-content: center; margin-top: clamp(40px, 5vw, 64px); }
.ot-pager__list { display: flex; flex-wrap: wrap; align-items: center; justify-content: center; gap: 8px; margin: 0; padding: 0; list-style: none; }
.ot-pager .page-numbers { display: inline-grid; place-items: center; min-width: 46px; height: 46px; padding: 0 12px; border-radius: var(--r-pill); border: 1px solid var(--c-line-dark); color: var(--c-cream); font: 600 14px/1 var(--f-sans); font-variant-numeric: tabular-nums; letter-spacing: .04em; text-decoration: none; transition: border-color var(--dur-fast) ease, background var(--dur-fast) ease, color var(--dur-fast) ease, transform var(--dur-fast) ease; }
.ot-pager a.page-numbers:hover, .ot-pager a.page-numbers:focus-visible { border-color: var(--c-orange); color: var(--c-orange); }
.ot-pager .page-numbers.current { background: var(--c-orange); border-color: var(--c-orange); color: var(--c-void); }
.ot-pager .page-numbers.dots { border: 0; min-width: 24px; padding: 0; color: var(--c-muted); }
.ot-pager .prev, .ot-pager .next { padding: 0; width: 46px; }
.ot-pager .prev svg, .ot-pager .next svg { width: 20px; height: 20px; }
.ot-pager .next { margin-left: 8px; } .ot-pager .prev { margin-right: 8px; }
.ot-pager a.next:hover, .ot-pager a.prev:hover { transform: translateX(2px); } .ot-pager a.prev:hover { transform: translateX(-2px); }
.ot-light .ot-pager .page-numbers { border-color: var(--c-line-light); color: var(--c-void); }
.ot-pager .screen-reader-text { position: absolute; width: 1px; height: 1px; overflow: hidden; clip: rect(0 0 0 0); white-space: nowrap; }
@media (min-width: 1024px) { .ot-section-head .ot-intro { max-width: 76ch; } } /* owner 8/10: one-line intros did not need to wrap at 48ch */
/* owner 8/10: lightbox with a video = playful but discreet brand backdrop (slow-drifting orange light + grain), not flat black */
.ot-lightbox:has(iframe, video) { background: var(--c-void); overflow: hidden; isolation: isolate; }
.ot-lightbox:has(iframe, video)::before { content: ""; position: absolute; inset: -20%; z-index: -1; pointer-events: none;
background:
radial-gradient(28% 34% at 18% 22%, color-mix(in srgb, var(--c-orange) 26%, transparent), transparent 70%),
radial-gradient(30% 36% at 84% 78%, color-mix(in srgb, var(--c-orange) 18%, transparent), transparent 70%),
radial-gradient(22% 26% at 70% 12%, color-mix(in srgb, #ffb36b 10%, transparent), transparent 70%);
filter: blur(10px); animation: ot-lb-drift 18s ease-in-out infinite alternate; }
.ot-lightbox:has(iframe, video)::after { content: ""; position: absolute; inset: 0; z-index: -1; pointer-events: none; background: url("../shapes/grain.svg"); opacity: .16; mix-blend-mode: overlay; }
@keyframes ot-lb-drift { 0% { transform: translate(0, 0) rotate(0deg); } 50% { transform: translate(3%, -2%) rotate(4deg); } 100% { transform: translate(-3%, 2%) rotate(-3deg); } }
@media (prefers-reduced-motion: reduce) { .ot-lightbox:has(iframe, video)::before { animation: none; } }
.ot-lightbox:has(iframe, video) .ot-lightbox__caption { display: none; } /* owner 8/10: videos without caption */
/* T100: WebP wrapper from ot_img() adds no box (layout and img selectors unchanged) · generic sr-only text */
.ot-pic { display: contents; }
.screen-reader-text { position: absolute !important; width: 1px; height: 1px; margin: -1px; padding: 0; overflow: hidden; clip: rect(0 0 0 0); white-space: nowrap; border: 0; }
/* ==========================================================================
t150 · t159 · t115–t117 (Nikos 10–17/10): hero locked to the film, quieter hero type, trail at the page end
========================================================================== */
/* frame = the film's ratio: 2,39:1 on desktop (max 1920×803, centred), 9:16 on portrait phones. The v2 composition stays as approved
(film on the right melting into black, title on the left, full width on play — Nikos 12/10 & 16/10): only the frame changes. */
@media (min-width: 1024px) {
/* 20/10 (Xenofon): edge to edge on every screen (was max 1920×803 centred → black bars on wide screens); the frame keeps the film's ratio, so nothing is cropped */
.ot-hero--ratio { --ot-hero-h: auto; aspect-ratio: 2.39 / 1; /* min-height stays auto: a long copy may grow the frame a little (the film covers) instead of spilling under the header */ width: 100%; max-width: none; max-height: 803px; /* height as before (Xenofon 20/10): above 1920px the frame widens, the film covers */ margin-inline: 0; align-items: flex-end; padding-top: clamp(96px, 8vw, 132px); padding-bottom: clamp(34px, 3.6vw, 60px);
padding-inline: max(var(--gutter), calc((100% - var(--container)) / 2)); } /* the copy keeps the logo's line */
}
@media (max-width: 767px) and (orientation: portrait) {
.ot-hero--ratio.ot-hero--has-v { --ot-hero-h: auto; aspect-ratio: 9 / 16; }
.ot-hero--loop-b.ot-hero--has-v.is-vertical .ot-hero__poster { opacity: 1; }
}
/* t116: smaller hero titles (caps read loud) */
.ot-hero--page .ot-h1 { font-size: clamp(28px, 7.4vw, 56px); }
.ot-hero--home .ot-h1 { font-size: clamp(30px, 8vw, 64px); }
.ot-hero .ot-h1.ot-h1--long { font-size: clamp(26px, 6.4vw, 48px); }
.ot-hero .ot-h1.ot-h1--xlong { font-size: clamp(24px, 5.6vw, 42px); }
@media (min-width: 1024px) {
.ot-hero--page .ot-h1, .ot-hero--page .ot-h1:not(.ot-h1--long):not(.ot-h1--xlong), .ot-hero--home .ot-h1 { font-size: clamp(32px, 3.5vw, 52px); }
.ot-hero--page .ot-h1.ot-h1--long { font-size: clamp(30px, 3.2vw, 46px); }
.ot-hero--page .ot-h1.ot-h1--xlong { font-size: clamp(26px, 2.8vw, 40px); }
}
/* t115/t117: play = the disc only, next to the CTA on phones too */
.ot-hero__actions .ot-play { gap: 0; }
@media (max-width: 1023px) { .ot-hero__actions { flex-wrap: nowrap; gap: 14px; } .ot-hero__actions .ot-btn { flex: 0 1 auto; } }
/* t117: scroll cue = a thin line with a chevron (desktop only — on phones it ran into the locations) */
.ot-scroll-note--arrow { writing-mode: horizontal-tb; width: 14px; height: 46px; }
.ot-scroll-note--arrow::before { content: ""; position: absolute; left: 50%; top: 0; bottom: 6px; width: 1px; background: currentColor; opacity: .6; }
.ot-scroll-note--arrow::after { content: ""; position: absolute; left: 50%; bottom: 2px; width: 8px; height: 8px; border-right: 1px solid currentColor; border-bottom: 1px solid currentColor; transform: translateX(-50%) rotate(45deg); }
@media (max-width: 1023px) { .ot-scroll-note--arrow { display: none; } }
/* t115: the trail at the end of the page, small and quiet */
.ot-crumbs-end { padding: 22px 0 6px; }
.ot-crumbs-end .ot-breadcrumb { margin: 0; font-size: 10px; opacity: .8; }
/* ==========================================================================
t126 · t128 · t107 (Nikos 10/10 doc 02 «Mobile» · Xenofon 18/10): mobile menu sizes, search next to the phone,
the language note never covers the open menu
========================================================================== */
/* t126: families smaller (26 → 20), services larger (13 → 15) */
.ot-menu__toggle { font-size: 20px; }
@media (min-width: 391px) { .ot-menu__toggle { font-size: 21px; } }
.ot-menu__links a { font-size: 15px; }
/* t128: 🔍 in the phone bar, right before the phone: logo · 🔍 · phone · WhatsApp · menu */
@media (max-width: 1023px) {
.ot-topbar .ot-topbar__search { display: inline-grid; }
.ot-topbar__search { order: 1; }
.ot-topbar__phone { order: 2; }
.ot-topbar__wa { order: 3; }
.ot-topbar__menu { order: 4; }
.ot-topbar__logo { width: min(140px, 34vw); }
}
@media (max-width: 374px) { /* small phones (360px): the 4 buttons stay on one line */
.ot-topbar { gap: 6px; padding-inline: 14px; }
.ot-topbar .ot-icon-btn { width: 40px; height: 40px; }
}
/* menu (or lightbox) open: the «also available in …» note steps aside */
body.ot-locked .ot-langnote, body:has(.ot-search.is-open) .ot-langnote { display: none; }
/* t127: Τοποθεσίες · Portfolio · Blog in one row, Επικοινωνία alone below */
.ot-menu__secondary--row { grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 0 14px; }
.ot-menu__secondary--row a { font-size: 17px; }
.ot-menu__contact { display: flex; align-items: center; min-height: 52px; margin-top: 10px; border-bottom: 1px solid var(--ot-line); color: var(--c-void); font-size: 20px; line-height: 1.05; font-weight: 650; text-decoration: underline; text-decoration-color: var(--c-orange); text-decoration-thickness: 2px; text-underline-offset: 6px; }
/* cookie bar on a 9:16 hero: the frame is fixed and the bar only covers what lies below it — no extra 150px that pushed the copy under the header */
@media (max-width: 767px) and (orientation: portrait) { html.ot-has-cookie .ot-hero--ratio.ot-hero--has-v { padding-bottom: 38px; } }
/* t119: «Μία ομάδα» cards at the 2,5-per-screen size on phones — lighter type so title, line and the tap panel fit */
@media (max-width: 767px) {
.ot-fam .ot-card__title { font-size: 17px; }
.ot-fam .ot-card__text { font-size: 11.5px; line-height: 1.35; }
.ot-fam .ot-fam__h { font-size: 13px; }
.ot-fam__panel { padding: 12px 10px; }
.ot-fam .ot-fam__h { margin-bottom: 6px; }
.ot-fam__panel li a { min-height: 24px; padding: 3px 0; font-size: 11.5px; line-height: 1.25; gap: 4px; } /* up to 6 services fit a 210px card; 24px = WCAG 2.2 target size */
}
/* t121 (Nikos 10/10): «Όλα τα έργα» under the stories — the arrow in the site's orange, like the cards' «Δείτε →» */
.ot-stories .ot-more .ot-link::after { content: "→"; color: var(--c-orange); font-size: 1.35em; line-height: 0; }
.ot-stories .ot-more .ot-link:hover::after { transform: translateX(3px); }
/* t58: numbers strip under the home hero — thin, one row on desktop, 2 × 2 on phones */
.ot-stats-strip { padding: 18px 0; }
.ot-stats--strip { margin: 0; border: 0; grid-template-columns: 1fr 1fr; }
.ot-stats--strip .ot-stat { padding: 12px 10px; border: 0; }
.ot-stats--strip .ot-stat b { font-size: 30px; }
.ot-stats--strip .ot-stat span { font-size: 10px; margin-top: 2px; }
@media (min-width: 1024px) {
.ot-stats-strip { padding: 26px 0; }
.ot-stats--strip { grid-template-columns: repeat(4, 1fr); }
.ot-stats--strip .ot-stat { padding: 6px 24px; border-left: 1px solid var(--ot-line); }
.ot-stats--strip .ot-stat:first-child { padding-left: 0; border-left: 0; }
.ot-stats--strip .ot-stat b { font-size: 44px; }
.ot-stats--strip .ot-stat span { font-size: 11px; }
}
/* ==========================================================================
t118 (Nikos 10/10 doc 02, «Desktop – ΑΡΧΙΚΗ»): home cards get the portfolio's orange line, a stronger zoom,
and a brush (as long as the word) under the opened category instead of the full-width rule
20/10 (#67, Ξενοφών): the same glint on EVERY photo card of the site (projects, ensembles, places, location pages); «Σύντομα» cards excluded, flagship keeps its full frame
========================================================================== */
:is(.ot-create, .ot-cards, .ot-stories, .ot-projects, .ot-ensembles, .ot-places, .ot-loc-fam, .ot-cities) .ot-card { outline: 0; }
:is(.ot-create, .ot-cards, .ot-stories, .ot-projects, .ot-ensembles, .ot-places, .ot-loc-fam, .ot-cities) .ot-card:not(.ot-card--soon)::before { content: ""; position: absolute; inset: 0; z-index: 3; border-radius: inherit; border: 1.5px solid var(--c-orange); pointer-events: none; opacity: .85;
-webkit-mask: radial-gradient(circle at var(--ot-glint, 0% 0%), #000 0, transparent 38%); mask: radial-gradient(circle at var(--ot-glint, 0% 0%), #000 0, transparent 38%); transition: opacity var(--dur-base) ease; }
:is(.ot-create, .ot-cards, .ot-stories, .ot-projects, .ot-ensembles, .ot-places, .ot-loc-fam, .ot-cities) .ot-card:nth-child(5n+2) { --ot-glint: 100% 28%; }
:is(.ot-create, .ot-cards, .ot-stories, .ot-projects, .ot-ensembles, .ot-places, .ot-loc-fam, .ot-cities) .ot-card:nth-child(5n+3) { --ot-glint: 72% 100%; }
:is(.ot-create, .ot-cards, .ot-stories, .ot-projects, .ot-ensembles, .ot-places, .ot-loc-fam, .ot-cities) .ot-card:nth-child(5n+4) { --ot-glint: 0% 66%; }
:is(.ot-create, .ot-cards, .ot-stories, .ot-projects, .ot-ensembles, .ot-places, .ot-loc-fam, .ot-cities) .ot-card:nth-child(5n+5) { --ot-glint: 100% 100%; }
:is(.ot-create, .ot-cards, .ot-stories, .ot-projects, .ot-ensembles, .ot-places, .ot-loc-fam, .ot-cities) .ot-card:is(:hover, :focus-within, .is-open)::before { opacity: 1; -webkit-mask: none; mask: none; }
:is(.ot-create, .ot-cards, .ot-stories, .ot-projects, .ot-ensembles, .ot-places, .ot-loc-fam, .ot-cities) .ot-card:hover .ot-card__media { transform: scale(1.08); } /* was 1.04 */
/* the opened category: brush under the word, as long as the word (the list below stays as it is) */
.ot-fam__panel ul { border-top: 0; }
.ot-fam__h { width: fit-content; max-width: 100%; }
.ot-fam__h::after { content: ""; display: block; width: 100%; height: 6px; margin-top: 4px; background: var(--x-brush) center / 100% 100% no-repeat; transform: rotate(-1.4deg) skewX(-3deg); transform-origin: left center; }
/* t129: One Take The Band = flagship — a stronger orange frame, always on, and the word on the photo */
.ot-card--flagship::before { content: ""; position: absolute; inset: 0; z-index: 3; border-radius: inherit; border: 2.5px solid var(--c-orange) !important; opacity: 1 !important; -webkit-mask: none !important; mask: none !important; pointer-events: none; }
.ot-card__flag { position: absolute; top: 12px; left: 12px; z-index: 4; padding: 5px 10px 4px; border-radius: 999px; background: var(--c-orange); color: var(--c-void); font: 700 10px/1 var(--f-sans); letter-spacing: .14em; text-transform: uppercase; pointer-events: none; }
/* t132: «Ταιριάζει σε» chips — no orange underline; the linked ones show they are clickable on hover */
.ot-glance__chips a.ot-chip { text-decoration: none; transition: border-color var(--dur-fast) ease, color var(--dur-fast) ease; }
.ot-glance__chips a.ot-chip:hover, .ot-glance__chips a.ot-chip:focus-visible { border-color: var(--c-orange); text-decoration: underline; text-decoration-color: var(--c-orange); text-underline-offset: 3px; }
/* ==========================================================================
t133 (Nikos 10/10 doc 03: «τοποθεσίες στο aspect ratio της αρχικής, ΠΑΝΤΟΥ» · «τιμές να μικρύνουν ΠΑΝΤΟΥ»)
========================================================================== */
/* «Τοποθεσίες» on the landing pages = the home stories card: 5:8, 5 per row (desktop), 2,5 per screen (phones) */
.ot-places .ot-place-card, .ot-places .ot-carousel .ot-card { --ot-card-ratio: 5 / 8; }
@media (max-width: 767px) { .ot-places .ot-carousel { --ot-per: 43.5%; } .ot-places .ot-place-card__text { display: none; } }
.ot-place-card__text { display: -webkit-box; -webkit-box-orient: vertical; -webkit-line-clamp: 2; overflow: hidden; }
/* prices: ~35% smaller everywhere (the range used to be almost as big as the page title) */
.ot-stats.ot-price .ot-stat b, .ot-price .ot-stat b { font-size: clamp(24px, 3vw, 40px); }
/* card audit 19/10: «Τοποθεσίες» rows use exactly the site's card row (2,5 / 3,5 / 5 per screen) like every other carousel */
.ot-places .ot-carousel { --ot-per: calc((100% - 2 * var(--ot-gap)) / 2.5); }
@media (min-width: 768px) { .ot-places .ot-carousel { --ot-per: calc((100% - 3 * var(--ot-gap)) / 3.5); } }
@media (min-width: 1024px) { .ot-places .ot-carousel { --ot-per: calc((100% - 4 * var(--ot-gap)) / 5); } }
/* #122–#124 (Nikos 10/10, form): smaller title · step labels without the orange brush, italic and quiet ·
fields as framed boxes like the chips · send arrow moves like the video play disc */
.ot-contact .ot-h2 { font-size: clamp(24px, 2.3vw, 34px); max-width: 20ch; }
.ot-step__label { font: italic 400 12px/1.3 var(--f-sans); letter-spacing: .06em; text-transform: none; color: var(--c-muted); }
.ot-step__label::after { content: none; }
.ot-step__label .ot-step__check { color: var(--c-orange); }
.ot-form .ot-input {
min-height: 50px; padding: 13px 16px; border: 1px solid color-mix(in srgb, var(--c-cream) 22%, transparent); border-radius: 14px;
background: color-mix(in srgb, var(--c-cream) 3%, transparent); transition: border-color .18s ease, background-color .18s ease;
}
.ot-form .ot-input:hover { border-color: color-mix(in srgb, var(--c-cream) 40%, transparent); }
.ot-form .ot-input:focus, .ot-form .ot-input:focus-visible { outline: none; border-color: var(--c-orange); box-shadow: none; background: color-mix(in srgb, var(--c-orange) 5%, transparent); }
.ot-form .ot-input[aria-invalid="true"] { border-color: var(--c-orange); }
.ot-form .ot-datefield__ph { left: 17px; }
.ot-form .ot-datefield input[type="date"]::-webkit-calendar-picker-indicator {
opacity: 1; width: 18px; height: 18px; background: var(--c-orange); filter: none;
-webkit-mask: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23000' stroke-width='1.6' stroke-linecap='round'%3E%3Crect x='3.5' y='5' width='17' height='15.5' rx='2.5'/%3E%3Cpath d='M3.5 10h17M8 3v4M16 3v4'/%3E%3C/svg%3E") center / contain no-repeat;
mask: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23000' stroke-width='1.6' stroke-linecap='round'%3E%3Crect x='3.5' y='5' width='17' height='15.5' rx='2.5'/%3E%3Cpath d='M3.5 10h17M8 3v4M16 3v4'/%3E%3C/svg%3E") center / contain no-repeat;
}
.ot-form select.ot-input {
appearance: none; -webkit-appearance: none; padding-right: 44px; cursor: pointer;
background: color-mix(in srgb, var(--c-cream) 3%, transparent) url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23ff6a00' stroke-width='1.8' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M6 9l6 6 6-6'/%3E%3C/svg%3E") right 16px center / 16px no-repeat;
}
.ot-form select.ot-input option { background: var(--c-void); color: var(--c-cream); }
.ot-form .ot-btn__arrow { outline: 1px solid transparent; outline-offset: 6px; transition: transform .25s ease, outline-offset .25s ease, outline-color .25s ease, background-color .18s ease, border-color .18s ease; }
.ot-form .ot-btn:not([aria-disabled="true"]) .ot-btn__arrow { outline-color: color-mix(in srgb, var(--c-orange) 55%, transparent); }
.ot-form .ot-btn:not([aria-disabled="true"]):hover .ot-btn__arrow { transform: scale(1.06); outline-offset: 10px; outline-color: color-mix(in srgb, var(--c-orange) 35%, transparent); }
.ot-form .ot-btn.is-ready .ot-btn__arrow { animation: ot-ring-ping 1.1s ease-out 1; }
@keyframes ot-ring-ping { 0% { outline-offset: 6px; } 55% { outline-offset: 16px; outline-color: transparent; } 100% { outline-offset: 6px; } }
@media (prefers-reduced-motion: reduce) { .ot-form .ot-btn.is-ready .ot-btn__arrow { animation: none; } }
/* #139: full screen button for the self-hosted hero film; YouTube films have their own */
.ot-hero__controls--yt [data-ot-fs] { display: none; }
/* #137 (Nikos 10/10): article/project titles on two lines at most on desktop · article meta in sentence case */
@media (min-width: 1024px) {
.single .ot-page-head .ot-h1--page { max-width: 34ch; }
.single .ot-page-head .ot-h1--page.ot-h1--long { font-size: clamp(30px, 3.4vw, 48px); }
.single .ot-page-head .ot-h1--page.ot-h1--xlong { font-size: clamp(26px, 2.9vw, 40px); max-width: 100%; }
}
.ot-page-head__meta--plain { text-transform: none; letter-spacing: .02em; font-size: 13px; }
/* #125 (Nikos 10/10): contact page on phones/tablets: the form first, then the contact cards, two per row and smaller */
@media (max-width: 1023px) {
.ot-contact--page .ot-contact__grid > .ot-form { order: -1; }
.ot-contact--page .ot-contact__intro .ot-h2 { font-size: clamp(24px, 6vw, 32px); }
.ot-contact--page .ot-phones--cards { grid-template-columns: 1fr 1fr; gap: 8px; margin-top: 18px; }
.ot-contact--page .ot-phones--cards a, .ot-contact--page .ot-phones--cards li > div { flex-direction: column; align-items: flex-start; gap: 8px; padding: 12px; font-size: 14px; line-height: 1.3; height: 100%; }
.ot-contact--page .ot-phones--cards .ot-icon-btn { width: 34px; height: 34px; }
.ot-contact--page .ot-phones--cards .ot-icon-btn svg { width: 16px; height: 16px; }
.ot-contact--page .ot-phones--cards li:has(a[href^="mailto:"]), .ot-contact--page .ot-phones--cards li:has(a[href*="google.com/maps"]), .ot-contact--page .ot-phones--cards li:has(> div) { grid-column: 1 / -1; }
.ot-contact--page .ot-phones--cards li:has(a[href^="mailto:"]) a, .ot-contact--page .ot-phones--cards li:has(a[href*="google.com/maps"]) a, .ot-contact--page .ot-phones--cards li:has(> div) > div { flex-direction: row; align-items: center; }
}
/* #134 (Nikos 10/10): links inside page-head intros without underline; brighter than the text (≥3:1, WCAG 1.4.1) and orange on hover */
.ot-page-head__intro a { text-decoration: none; color: var(--c-cream); font-weight: 600; transition: color .18s ease; }
.ot-page-head__intro a:hover, .ot-page-head__intro a:focus-visible { color: var(--c-orange); }
/* #138 (Nikos 10/10): footer contact = the contact-page cards (hours already sit in the footer's last line) */
.ot-footer__cards { margin-top: 26px; }
.ot-footer__cards .ot-phones { margin: 0; grid-template-columns: 1fr 1fr; gap: 8px; }
.ot-footer__cards .ot-phones a, .ot-footer__cards .ot-phones li > div { border-color: var(--c-line-dark); font-size: 15px; color: var(--c-cream); padding: 10px 12px; }
.ot-footer__cards .ot-phones a:hover { color: var(--c-orange); border-color: color-mix(in srgb, var(--c-orange) 55%, transparent); }
.ot-footer__cards .ot-phones li:has(> div) { display: none; }
.ot-footer__cards .ot-phones li:has(a[href^="mailto:"]), .ot-footer__cards .ot-phones li:has(a[href*="google.com/maps"]) { grid-column: 1 / -1; }
@media (max-width: 767px) { .ot-footer__cards .ot-phones a { flex-direction: column; align-items: flex-start; gap: 8px; font-size: 14px; }
.ot-footer__cards .ot-phones li:has(a[href^="mailto:"]) a, .ot-footer__cards .ot-phones li:has(a[href*="google.com/maps"]) a { flex-direction: row; align-items: center; } }
@media (min-width: 1024px) { .ot-footer__cards .ot-phones { grid-template-columns: repeat(3, 1fr); }
.ot-footer__cards .ot-phones li:has(a[href^="mailto:"]), .ot-footer__cards .ot-phones li:has(a[href*="google.com/maps"]) { grid-column: auto; } }
/* #135 (Nikos 10/10): long galleries show ~3 rows on tablet/desktop + «see more»; the rest stays in the HTML, lazy-loaded */
.ot-masonry-clip.is-clipped { overflow: hidden; -webkit-mask: linear-gradient(#000 calc(100% - 120px), transparent); mask: linear-gradient(#000 calc(100% - 120px), transparent); }
.ot-masonry__more { display: flex; margin: 18px auto 0; }
.ot-masonry__more[hidden] { display: none; }
/* #148 (Nikos 10/10): phones — every frame vertical (4:5, like the other galleries), 2.5 per screen */
@media (max-width: 767px) {
.ot-masonry__item { width: calc((100vw - 2 * var(--gutter) - 24px) / 2.5); }
.ot-masonry__item img { width: 100%; height: auto; max-width: none; aspect-ratio: 4 / 5; object-fit: cover; }
}
/* #131 (Nikos 10/10): video cards show their title on the photo (like the place cards) + a small «Δείτε το βίντεο» */
.ot-facade:has(.ot-facade__caption--title)::after { content: ""; position: absolute; inset: 0; background: linear-gradient(to top, rgb(0 0 0 / .85) 0%, rgb(0 0 0 / .45) 34%, rgb(0 0 0 / 0) 62%); pointer-events: none; z-index: -1; }
.ot-facade__caption--title { z-index: 2; flex-direction: column; align-items: flex-start; justify-content: flex-end; gap: 6px; text-align: left; color: var(--c-cream); pointer-events: none; }
.ot-facade__caption--title > span { display: -webkit-box; -webkit-box-orient: vertical; -webkit-line-clamp: 3; overflow: hidden; font-size: clamp(16px, 1.4vw, 20px) !important; font-weight: 600 !important; line-height: 1.15; color: var(--c-cream) !important; }
.ot-facade__caption--title > small { font: 600 10.5px/1 var(--f-sans); letter-spacing: .13em; text-transform: uppercase; color: color-mix(in srgb, var(--c-cream) 82%, transparent); }
.ot-facade__caption--title > small { display: none; } /* 19/10: the hover cursor «Δείτε το βίντεο» stays (the pointer is hidden over façades) — no second label on the card */
@media (max-width: 767px) { .ot-facade__caption--title > span { font-size: 13px !important; } .ot-facade__caption--title { left: 10px; right: 10px; bottom: 10px; } }
/* #16 (Nikos 11/10): thicker logo (OTP_Logo_Medium.svg). Same box width as before = same letter size (its viewBox is tighter); the image is a few px taller */
/* #110: link to each review on Google + «all reviews» */
.ot-review__src { color: inherit; text-decoration: none; border-bottom: 1px solid color-mix(in srgb, currentColor 35%, transparent); transition: color .18s ease, border-color .18s ease; }
.ot-review__src:hover, .ot-review__src:focus-visible { color: var(--c-orange); border-color: var(--c-orange); }
.ot-reviews__all { margin: 22px 0 0; font-size: 14px; }
/* t102: announced ensembles without a page — not a link, muted, «Σύντομα» badge */
.ot-card--soon { cursor: default; }
.ot-card--soon .ot-card__media { filter: grayscale(1); opacity: .55; }
.ot-card__flag--soon { background: var(--c-cream); }
/* Nikos 20/10: video cards — no browser focus ring (cut off by the carousel, stayed after closing the video); the same
thin orange frame as the other cards: a glint in one corner, the full frame on hover / keyboard focus */
.ot-facade, .ot-facade:focus-visible { outline: 0; }
.ot-facade::before { content: ""; position: absolute; inset: 0; z-index: 3; border-radius: inherit; border: 1.5px solid var(--c-orange); pointer-events: none; opacity: .85;
-webkit-mask: radial-gradient(circle at var(--ot-glint, 0% 0%), #000 0, transparent 38%); mask: radial-gradient(circle at var(--ot-glint, 0% 0%), #000 0, transparent 38%); transition: opacity var(--dur-base) ease; }
.ot-carousel .ot-facade:nth-child(5n+2) { --ot-glint: 100% 28%; }
.ot-carousel .ot-facade:nth-child(5n+3) { --ot-glint: 72% 100%; }
.ot-carousel .ot-facade:nth-child(5n+4) { --ot-glint: 0% 66%; }
.ot-carousel .ot-facade:nth-child(5n+5) { --ot-glint: 100% 100%; }
.ot-facade:is(:hover, :focus-visible)::before { opacity: 1; -webkit-mask: none; mask: none; }
/* 20/10 (Xenofon): playing in the page = full width, same height as the loop (the film may crop a little top/bottom on very wide screens);
in fullscreen (the ⛶ button puts the