/* ============================================================
   ΤΗΛΕΜΑΤΙΚΗ ICT — swipe.css   (Home, Services, Projects, News)
   "Feed" navigation for phones & tablets, TikTok-style:
     · swipe up / down  → next / previous section  (CSS scroll-snap)
     · swipe left/right → next / previous page      (js/swipe.js)
   Activated by <html class="tm-swipe">, which the inline snippet in
   <head> sets when the viewport is narrower than 1024px.
   URL flags: ?swipe forces it on (any width) · ?noswipe turns it off.
   Desktop layout is untouched — every rule here is scoped to .tm-swipe.
   ============================================================ */
:root { --swipe-bar: 0px; }   /* bottom page bar removed (was 56px) — slides use the whole screen */

html.tm-swipe { scroll-snap-type: y mandatory; scroll-padding-top: 0; overflow-x: hidden; }
html.tm-swipe body { overflow-x: hidden; overflow-x: clip; }   /* nothing may widen the page → no zoom-out on Android */
html.tm-swipe .tm-progress { display: none; }
/* The footer is its own snap stop, otherwise mandatory snapping would pull
   the reader back to the (taller) contact slide before they can reach it */
html.tm-swipe .site-footer { scroll-snap-align: end; }

/* ---------- Slides ---------- */
html.tm-swipe .swipe-slide {
  position: relative;
  box-sizing: border-box;
  height: 100vh;
  height: 100dvh;
  padding: calc(var(--header-h) + 6px) 0 calc(var(--swipe-bar) + 16px + env(safe-area-inset-bottom, 0px));
  display: flex;
  flex-direction: column;
  justify-content: center;
  scroll-snap-align: start;
  scroll-snap-stop: always;
  overflow: hidden; overflow: clip;   /* decor layers (aurora, orbs) must not make the slide scroll */
  isolation: isolate;
}
html.tm-swipe .swipe-slide > .container { width: 100%; flex: none; }
/* last resort, set by swipe.js: content still taller than the screen after auto-fit → let this slide scroll */
html.tm-swipe .swipe-slide[data-overflow] { overflow-y: auto; overflow-x: hidden; }
/* Portrait phones: the desktop left→right overlay gradients leave text over
   bright footage, so every video slide gets an even, darker wash instead */
html.tm-swipe .swipe-slide[data-bg-video] .video-overlay {
  background: linear-gradient(180deg, rgba(8,20,38,.9) 0%, rgba(8,20,38,.74) 55%, rgba(8,20,38,.9) 100%) !important;
}
html.tm-swipe .swipe-slide .divider-wave { display: none; }

/* Last slide (contact + form) flows naturally; the footer follows it */
html.tm-swipe .swipe-slide--flow {
  height: auto; min-height: 100dvh; overflow: visible; justify-content: flex-start;
  padding-top: calc(var(--header-h) + 24px); padding-bottom: calc(var(--swipe-bar) + 36px);
}
html.tm-swipe .site-footer { padding-bottom: calc(var(--swipe-bar) + 24px); }

/* Hero + KPI strip share the first slide */
html.tm-swipe .swipe-slide--hero { padding-top: 0; justify-content: flex-start; background: #081426; }
html.tm-swipe .swipe-slide--hero .hero {
  min-height: 0; flex: 1 1 auto;
  display: flex; flex-direction: column; justify-content: center;
  padding-top: var(--header-h);
}
html.tm-swipe .swipe-slide--hero .kpi-strip { flex: none; padding-block: 12px; }
/* Soft navy wash over the live network where the copy sits — the graph stays
   visible above and below, but no longer competes with the text (user feedback) */
html.tm-swipe .swipe-slide--hero [data-hero-3d]::after {
  content: ""; position: absolute; inset: 0; pointer-events: none;
  background: linear-gradient(180deg, rgba(8,20,38,0) 0%, rgba(8,20,38,.36) 28%, rgba(8,20,38,.5) 60%, rgba(8,20,38,.15) 100%);
}

/* ---------- Compact typography inside slides ---------- */
html.tm-swipe .hero-copy h1 { font-size: clamp(40px, 11vw, 56px); margin-top: 12px; }   /* guidelines: 40px on mobile */
/* hero paragraph: lighter, larger, more air above and below (user feedback) */
html.tm-swipe .hero-copy .hero-sub { font-size: clamp(16px, 4.3vw, 18px); line-height: 1.6; color: #D3DBE8; margin-top: 22px; }
html.tm-swipe .hero-ctas { margin-top: 40px; gap: 10px; }
html.tm-swipe .kpi-num { font-size: 2.25rem; }
html.tm-swipe .kpi-txt { font-size: .68rem; letter-spacing: .14em; }
html.tm-swipe .kpi-copy, html.tm-swipe .kpi-track { gap: 26px; }

html.tm-swipe .swipe-slide h2 { font-size: clamp(26px, 7.6vw, 30px); }   /* guidelines: H2 28px on mobile */
html.tm-swipe .swipe-slide .lede { font-size: 16px !important; line-height: 1.5 !important; margin-top: 10px !important; }
html.tm-swipe .swipe-slide .tm-rule { margin: 12px 0 14px !important; }

/* 01 About */
html.tm-swipe #about .about-grid { display: block; }
html.tm-swipe #about .about-grid > div:first-child p { font-size: var(--fs-small) !important; margin-top: 10px !important; }
html.tm-swipe #about [data-stagger] { margin-top: 12px; }
html.tm-swipe #about .pillar { padding: 10px 0; gap: 12px; }
html.tm-swipe #about .pillar .tm-numeral { font-size: 22px; padding-top: 2px; }
html.tm-swipe #about .pillar h3 { font-size: 15px; }
html.tm-swipe #about .pillar p { font-size: 12.5px; line-height: 1.4; margin-top: 3px; }
/* (short-screen trimming is handled by the auto-fit rules at the end of this file) */

/* 02 Services — 10 compact tiles, 2 columns */
html.tm-swipe #services .svc-grid { grid-template-columns: 1fr 1fr; gap: 8px; }
html.tm-swipe #services .svc-card { padding: 10px 10px; display: flex; flex-direction: row; align-items: center; gap: 8px; min-height: 52px; }
html.tm-swipe #services .svc-card .icon-tile { width: 28px; height: 28px; margin: 0; flex: none; }
html.tm-swipe #services .svc-card .icon-tile svg { width: 16px; height: 16px; }
/* 12px/1.2: a two-line title stays within the tile's min-height, so every row is the same height */
html.tm-swipe #services .svc-card h3 { font-size: 12px; line-height: 1.2; margin: 0; }
html.tm-swipe #services .svc-card .card-desc,
html.tm-swipe #services .svc-card .svc-more { display: none; }

/* 03 Methodology — 2×2 */
html.tm-swipe #method .method-row { grid-template-columns: 1fr 1fr; gap: 10px; }
html.tm-swipe #method .method-card { padding: 14px; }
html.tm-swipe #method .method-card h3 { font-size: 14px; margin-top: 8px; }
html.tm-swipe #method .method-card p { font-size: 12px; line-height: 1.4; margin-top: 6px; }
html.tm-swipe #method .step-kicker .tm-numeral { font-size: 20px; }

/* 04 Industry 4.0 — numeral beside text */
html.tm-swipe .feature-points { grid-template-columns: 1fr; gap: 14px; margin-top: 18px; }
html.tm-swipe .feature-point { display: grid; grid-template-columns: 34px 1fr; column-gap: 12px; }
html.tm-swipe .feature-point .tm-numeral { font-size: 20px; grid-row: 1 / span 2; }
html.tm-swipe .feature-point h3 { font-size: 15px; margin-top: 0; }
html.tm-swipe .feature-point p { font-size: 12.5px; line-height: 1.4; margin-top: 4px; }

/* 05 Private 5G — text + diagram, cards hidden */
html.tm-swipe #fiveg .fiveg-grid { grid-template-columns: 1fr; gap: 10px; }
html.tm-swipe #fiveg .fiveg-grid > div:first-child > p { font-size: var(--fs-small) !important; margin-top: 10px !important; }
html.tm-swipe #fiveg .fiveg-cards { display: none; }
html.tm-swipe #fiveg .fiveg-tags { margin-top: 12px; gap: 6px; }
html.tm-swipe #fiveg .fiveg-panel { width: min(58vw, 270px); margin: 4px auto 0; }

/* €31T banner */
html.tm-swipe .stat-banner .banner-value { font-size: clamp(64px, 20vw, 110px); }

/* Partners — the marquee becomes a still 2×3 logo wall (all six visible,
   and no sideways motion that would read as "swipe me") */
html.tm-swipe .swipe-slide .tm-marquee { margin-top: 22px !important; -webkit-mask-image: none; mask-image: none; }
html.tm-swipe .swipe-slide .marquee-track {
  animation: none; display: grid; grid-template-columns: 1fr 1fr; gap: 10px;
  width: auto; padding: 0 var(--gutter); transform: none;
}
html.tm-swipe .swipe-slide .marquee-track .logo-card:nth-child(n+7) { display: none; }
html.tm-swipe .swipe-slide .logo-card { min-width: 0; width: auto; height: 64px; padding: 10px 16px; }

/* 06 Projects — 2×2 */
html.tm-swipe .bento { grid-template-columns: 1fr 1fr; gap: 10px; }
html.tm-swipe .bento > * { grid-column: auto; }
html.tm-swipe .bento .card { padding: 14px; }
html.tm-swipe .bento .card h3 { font-size: 14px !important; margin-top: 6px !important; }
html.tm-swipe .bento .card .tm-numeral { font-size: 18px !important; }
html.tm-swipe .bento .card .card-desc { font-size: 12px; line-height: 1.4; margin-top: 4px; }
html.tm-swipe .proj-cat-head { flex-direction: column; align-items: flex-start; gap: 10px; }
html.tm-swipe .proj-cat-head .btn { padding: 8px 12px; font-size: 13px; }

/* 07 Personas — bullets hidden, two compact cards */
html.tm-swipe #personas .persona-grid { gap: 10px; margin-top: 16px !important; }
html.tm-swipe #personas .persona-card { padding: 14px 16px; }
html.tm-swipe #personas .persona-card ul { display: none; }
html.tm-swipe #personas .persona-card h3 { font-size: 15px; margin-top: 8px !important; }
html.tm-swipe #personas .persona-card .btn { margin-top: 12px; width: 100%; justify-content: center; padding: 10px 14px; font-size: 13px; }


/* ---------- Swipe UI: dots, page bar, hint ---------- */
html:not(.tm-swipe) .swipe-hint { display: none !important; }

/* (dots rail and bottom page bar removed on request) */

.swipe-hint { display: none !important; }

.swipe-dots {
  position: fixed; right: 6px; top: 50%; transform: translateY(-50%); z-index: 60;
  display: flex; flex-direction: column; gap: 2px; padding: 6px 3px;
  border-radius: 999px; background: rgba(8, 20, 38, .32);
  backdrop-filter: blur(6px); -webkit-backdrop-filter: blur(6px);
}
.swipe-dot {
  width: 18px; min-height: 16px; border: 0; padding: 0; background: none; cursor: pointer;
  display: grid; place-items: center; -webkit-tap-highlight-color: transparent;
}
.swipe-dot::before {
  content: ""; width: 6px; height: 6px; border-radius: 999px;
  background: rgba(255, 255, 255, .58);
  transition: height .25s var(--ease-standard), background .25s var(--ease-standard);
}
.swipe-dot.is-active::before { height: 18px; background: var(--tm-cyan-500); }

.swipe-pagebar {
  position: fixed; left: 0; right: 0; bottom: 0; z-index: 60;
  height: calc(var(--swipe-bar) + env(safe-area-inset-bottom, 0px));
  padding: 0 4px env(safe-area-inset-bottom, 0px);
  display: flex; align-items: stretch;
  background: rgba(8, 20, 38, .80);
  backdrop-filter: blur(14px) saturate(1.2); -webkit-backdrop-filter: blur(14px) saturate(1.2);
  border-top: 1px solid rgba(255, 255, 255, .08);
}
.swipe-tab {
  flex: 1 1 0; min-width: 0; position: relative;
  display: flex; flex-direction: column; align-items: center; justify-content: center; gap: 3px;
  text-decoration: none; color: #AEBBD0; font-size: 10.5px; font-weight: 600; letter-spacing: .02em;
  white-space: nowrap; -webkit-tap-highlight-color: transparent;
}
.swipe-tab svg { width: 20px; height: 20px; }
.swipe-tab.is-active { color: #fff; }
.swipe-tab.is-active::after {
  content: ""; position: absolute; top: 0; left: 24%; right: 24%; height: 2px;
  background: var(--tm-cyan-500); border-radius: 0 0 2px 2px;
}

.swipe-hint {
  position: fixed; left: 50%; bottom: calc(var(--swipe-bar) + env(safe-area-inset-bottom, 0px) + 14px);
  transform: translateX(-50%); z-index: 59;
  display: flex; align-items: center; gap: 8px; padding: 8px 14px; border-radius: 999px;
  background: rgba(8, 20, 38, .72); color: #E6EEF8; font-size: 12px; font-weight: 600; white-space: nowrap;
  backdrop-filter: blur(8px); -webkit-backdrop-filter: blur(8px);
  pointer-events: none; opacity: 0; transition: opacity .4s var(--ease-standard);
}
.swipe-hint.is-on { opacity: 1; }
.swipe-hint svg { width: 16px; height: 16px; }
.swipe-hint--up svg { animation: swipe-nudge-y 1.4s ease-in-out infinite; }
.swipe-hint--x svg { animation: swipe-nudge-x 1.4s ease-in-out infinite; }
@keyframes swipe-nudge-y { 0%, 100% { transform: translateY(3px); opacity: .6; } 50% { transform: translateY(-3px); opacity: 1; } }
@keyframes swipe-nudge-x { 0%, 100% { transform: translateX(-4px); opacity: .6; } 50% { transform: translateX(4px); opacity: 1; } }

/* Page dots: one per page (Home · Services · Projects · News), the current
   one lit; a slim row at the very bottom, very discreet (user request) */
.swipe-pos {
  position: fixed; left: 50%; bottom: calc(5px + env(safe-area-inset-bottom, 0px)); transform: translateX(-50%);
  z-index: 58; display: flex; align-items: center; gap: 6px; padding: 5px 8px; border-radius: 999px;
  background: rgba(8, 20, 38, .30); backdrop-filter: blur(6px); -webkit-backdrop-filter: blur(6px);
  pointer-events: none; opacity: .4; transition: opacity .7s var(--ease-standard);
}
.swipe-pos.is-awake { opacity: .95; transition-duration: .2s; }
.swipe-pos.is-hidden { opacity: 0; }
.swipe-pos span { width: 5px; height: 5px; border-radius: 999px; background: rgba(255, 255, 255, .55); transition: width .35s var(--ease-standard), background .35s var(--ease-standard); }
.swipe-pos span.is-on { width: 14px; background: #fff; }
.swipe-pos span.is-next { background: var(--tm-cyan-500); animation: swipe-dot-pulse 1.1s ease-in-out infinite; }
@keyframes swipe-dot-pulse { 50% { transform: scale(1.5); } }
/* "Page turn" hint: the edge of the next page, its name written vertically */
.swipe-turn {
  position: fixed; top: 0; right: 0; bottom: 0; z-index: 61; border: 0; padding: 0;
  display: flex; flex-direction: column; align-items: center; justify-content: center; gap: 16px;
  background:
    radial-gradient(260px 300px at 100% 30%, rgba(91, 196, 236, .22), transparent 70%),
    linear-gradient(160deg, #0A2046 0%, #12346E 100%);
  color: #F4F7FB; cursor: pointer; -webkit-tap-highlight-color: transparent;
  transform: translateX(100%);
}
.swipe-turn-name {
  writing-mode: vertical-rl; white-space: nowrap;
  font: 800 clamp(20px, 6vw, 26px)/1 var(--font-display); letter-spacing: .16em; text-transform: uppercase;
}
.swipe-turn svg { width: 22px; height: 22px; color: var(--tm-cyan-500); animation: swipe-nudge-x 1.1s ease-in-out infinite; }
/* reduced motion: no slide, no fade (the site collapses every animation then) — the edge just shows, still */
.swipe-turn.is-static { transform: none; }
html:not(.tm-swipe) :is(.swipe-pos, .swipe-turn) { display: none; }
@media (prefers-reduced-motion: reduce) { .swipe-turn svg, .swipe-pos span.is-next { animation: none; } }

/* Page transition (main is translated by swipe.js) */
html.tm-swipe #main { transform-origin: 50% 40%; }

@media (prefers-reduced-motion: reduce) {
  .swipe-hint svg { animation: none; }
}

/* ---------- Auto-fit ----------
   swipe.js measures every slide and, while its content is taller than the
   screen, raises data-tight from 1 to 3. Each level trims a little more, so
   any phone (any width, any height, any font) gets a slide that fits. */
/* level 1: secondary copy goes */
html.tm-swipe .swipe-slide[data-tight] .lede,
html.tm-swipe .swipe-slide[data-tight]#about .about-grid > div:first-child p:nth-of-type(2),
html.tm-swipe .swipe-slide[data-tight]#fiveg .fiveg-tags { display: none !important; }
html.tm-swipe .swipe-slide[data-tight] .tm-rule { margin: 8px 0 10px !important; }
html.tm-swipe .swipe-slide[data-tight]#services .svc-card { padding: 8px 10px; }
html.tm-swipe .swipe-slide[data-tight]#services .svc-card h3 { font-size: 11.5px; }
html.tm-swipe .swipe-slide[data-tight]#services .svc-grid { gap: 6px; }
html.tm-swipe .swipe-slide[data-tight]#fiveg .fiveg-panel { width: min(48vw, 220px); }
html.tm-swipe .swipe-slide[data-tight]#personas .persona-card { padding: 12px 14px; }
html.tm-swipe .swipe-slide[data-tight]#personas .persona-grid { margin-top: 10px !important; }
html.tm-swipe .swipe-slide[data-tight]#method .method-row { gap: 8px; }
html.tm-swipe .swipe-slide[data-tight]#method .method-card { padding: 12px; }
/* level 2+: descriptions go, headings shrink */
html.tm-swipe .swipe-slide:is([data-tight="2"],[data-tight="3"],[data-tight="4"]) :is(.pillar p, .method-card p, .feature-point p, .bento .card-desc) { display: none !important; }
html.tm-swipe .swipe-slide:is([data-tight="2"],[data-tight="3"],[data-tight="4"]) h2 { font-size: clamp(22px, 6vw, 28px); }
html.tm-swipe .swipe-slide:is([data-tight="2"],[data-tight="3"],[data-tight="4"])#personas .persona-card .btn { padding: 8px 12px; font-size: 12.5px; margin-top: 8px; }
html.tm-swipe .swipe-slide:is([data-tight="2"],[data-tight="3"],[data-tight="4"])#personas .persona-card h3 { font-size: 14px; }
html.tm-swipe .swipe-slide:is([data-tight="2"],[data-tight="3"],[data-tight="4"]).stat-banner .banner-value { font-size: clamp(52px, 16vw, 90px); }
html.tm-swipe .swipe-slide:is([data-tight="2"],[data-tight="3"],[data-tight="4"]) .logo-card { height: 52px; }
/* level 3 / 4: last resort — scale the slide content down */
html.tm-swipe .swipe-slide[data-tight="3"] > :is(.container, .tm-marquee) { zoom: 0.86; }
html.tm-swipe .swipe-slide[data-tight="4"] > :is(.container, .tm-marquee) { zoom: 0.74; }

/* Longest service title («Συμβουλευτική & Διαχείριση Έργων») — slightly smaller
   so it stays on two lines and its row keeps the same height as the others */
html.tm-swipe #services .svc-card--long h3 { font-size: 10.5px !important; letter-spacing: -0.01em; }
/* Safety net: every row of the tile grid is the same height, whatever the phone width */
html.tm-swipe #services .svc-grid { grid-auto-rows: 1fr; }

/* 04 Industry 4.0 — more air: larger type, the three points spread over the
   screen with hairlines between them (user feedback 2026-11-07) */
html.tm-swipe #industry > .container { display: flex; flex-direction: column; }
html.tm-swipe #industry h2 { font-size: clamp(30px, 8.6vw, 40px); }
html.tm-swipe #industry .feature-points { gap: 0; margin-top: clamp(20px, 4vh, 40px); }
html.tm-swipe #industry .feature-point {
  grid-template-columns: 44px 1fr; column-gap: 14px;
  padding-block: clamp(14px, 3.2vh, 28px);
  border-top: 1px solid rgba(255, 255, 255, .12);
}
html.tm-swipe #industry .feature-point:last-child { border-bottom: 1px solid rgba(255, 255, 255, .12); }
html.tm-swipe #industry .feature-point .tm-numeral { font-size: 28px; line-height: 1; padding-top: 2px; }
html.tm-swipe #industry .feature-point h3 { font-size: 18px; }
html.tm-swipe #industry .feature-point p { font-size: 14px; line-height: 1.5; margin-top: 6px; color: #C3CEDF; }

/* Partners — bigger logo wall that fills the slide (user feedback 2026-11-07) */
html.tm-swipe #partners .section-head .tm-eyebrow { font-size: 14px; }
html.tm-swipe #partners .tm-marquee { margin-top: clamp(20px, 3.5vh, 34px) !important; }
html.tm-swipe #partners .marquee-track { gap: 14px; }
html.tm-swipe #partners .logo-card { height: clamp(100px, 16vh, 140px); padding: 10px 12px; border-radius: 14px; }
html.tm-swipe #partners .logo-card img,
html.tm-swipe #partners .logo-card img[src*="vantage"],
html.tm-swipe #partners .logo-card img[src*="deh"] { max-height: 66%; max-width: 90%; }

/* 05 Private 5G — copy sits higher, the IoT/5G diagram grows to fill the
   space below it (user feedback 2026-11-07) */
html.tm-swipe #fiveg.swipe-slide:not(.swipe-feed) { justify-content: flex-start; padding-top: calc(var(--header-h) + clamp(14px, 3vh, 28px)); }
html.tm-swipe #fiveg > .container { flex: 1 1 auto; display: flex; flex-direction: column; }
html.tm-swipe #fiveg .fiveg-grid { flex: 1 1 auto; display: flex; flex-direction: column; gap: 0; }
html.tm-swipe #fiveg .fiveg-panel {
  width: min(88vw, 44dvh, 440px); margin: auto;   /* centred in whatever height is left */
}
/* the marquee wrapper clips its overflow (needed for the scrolling strip on
   desktop) — the static mobile wall must let the card shadows show */
html.tm-swipe #partners .tm-marquee { overflow: visible; }
html.tm-swipe #partners .marquee-track { padding-bottom: 6px; }

/* Footer in swipe mode (home): the last full-screen card, laid out in three
   bands that fill the screen — contact tiles on top (phone + email side by
   side, address below), then about + certifications + the two link columns
   spread over the middle, then copyright and "back to top". No duplicate logo
   (the header shows it). User feedback 2026-11-07. */
html.tm-swipe .site-footer {
  padding: calc(var(--header-h) + 10px) 0 calc(14px + env(safe-area-inset-bottom, 0px));
  min-height: 100vh; min-height: 100dvh;
  display: flex; flex-direction: column;
  scroll-snap-align: start;
}
html.tm-swipe .site-footer > .container { width: 100%; flex: 1 1 auto; display: flex; flex-direction: column; gap: 18px; }
html.tm-swipe .site-footer .footer-grid > :first-child .brand { display: none !important; }
html.tm-swipe .site-footer .footer-grid > :first-child p { margin-top: 0 !important; }
/* contact tiles */
html.tm-swipe .site-footer .footer-contact {
  display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 10px;
  padding: 0; margin: 0; border: 0;
}
html.tm-swipe .site-footer .footer-contact::before {
  content: "Επικοινωνία"; grid-column: 1 / -1; margin-bottom: 2px;
  font: 600 var(--fs-eyebrow)/1.4 var(--font-body); letter-spacing: var(--ls-eyebrow); text-transform: uppercase; color: var(--tm-cyan-500);
}
html.tm-swipe[lang="en"] .site-footer .footer-contact::before { content: "Contact"; }
html.tm-swipe .site-footer .footer-contact-item {
  position: relative; display: block; min-width: 0;   /* label + value; the icon sits top-right */
  padding: 11px 12px; border-radius: 14px;
  background: rgba(255, 255, 255, .05); border: 1px solid rgba(255, 255, 255, .10);
  font-size: clamp(14px, 3.9vw, 16px); line-height: 1.3; overflow-wrap: anywhere;
}
html.tm-swipe .site-footer .footer-contact-item:last-child { grid-column: 1 / -1; flex-basis: auto; }
html.tm-swipe .site-footer .footer-contact-item svg { position: absolute; top: 10px; right: 10px; width: 18px; height: 18px; }
html.tm-swipe .site-footer .fci-label {
  display: block; margin-bottom: 3px; padding-right: 22px;
  font: 600 11px/1.3 var(--font-body); letter-spacing: .1em; text-transform: uppercase; color: #8FA3BF;
}
/* middle: about + certifications, then Company | Services — spread over the free height */
html.tm-swipe .site-footer .footer-grid {
  flex: 1 1 auto; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 18px 16px;
  align-content: space-evenly;
  padding-top: 16px; border-top: 1px solid rgba(255, 255, 255, .10);
}
html.tm-swipe .site-footer .footer-grid > :first-child p { font-size: 14px !important; line-height: 1.5; }
html.tm-swipe .site-footer .footer-certs { margin-top: 14px !important; }
html.tm-swipe .site-footer .footer-title { margin-bottom: 6px; }
html.tm-swipe .site-footer .footer-link { font-size: 15px; padding-block: 5px; }
html.tm-swipe .site-footer .footer-certs .badge { font-size: 12.5px; padding: 4px 10px; }
/* bottom: copyright | back to top */
html.tm-swipe .site-footer .footer-bottom {
  margin-top: 0; padding-top: 12px; flex-direction: row; flex-wrap: nowrap; align-items: center; justify-content: space-between; gap: 12px;
  font-size: 12px; line-height: 1.4;
}
html.tm-swipe .site-footer .footer-top {
  display: inline-flex; align-items: center; gap: 6px; flex: none;
  padding: 7px 12px; border-radius: 999px; border: 1px solid rgba(255, 255, 255, .16);
  color: #E6ECF4; font-weight: 600; text-decoration: none;
}
html.tm-swipe .site-footer .footer-top svg { width: 14px; height: 14px; }
/* short screens: tighter tiles and links, the one-line description goes */
@media (max-height: 700px) {
  html.tm-swipe .site-footer .footer-grid > :first-child > p { display: none; }
  html.tm-swipe .site-footer .footer-certs { margin-top: 0 !important; }
  html.tm-swipe .site-footer .footer-contact-item { padding: 9px 12px; }
  html.tm-swipe .site-footer .footer-link { padding-block: 3px; }
  html.tm-swipe .site-footer .footer-grid { padding-top: 12px; gap: 12px 16px; }
  html.tm-swipe .site-footer > .container { gap: 14px; }
}
/* Inner pages carry a mini footer (copyright + a few links): not a screen of its
   own — a slim strip under the last card */
html.tm-swipe .site-footer:not(:has(.footer-contact)) {
  min-height: 0; display: block; scroll-snap-align: end;
  padding: 18px 0 calc(18px + env(safe-area-inset-bottom, 0px));
}
html.tm-swipe .site-footer:not(:has(.footer-contact)) .footer-bottom { flex-direction: column; align-items: flex-start; gap: 6px; }

/* Contact — the whole slide fits one screen: compact intro, contact details as
   three short lines, form in two columns (user feedback 2026-11-07).
   Inputs keep 16px text so iOS does not zoom in on focus. */
html.tm-swipe #contact.swipe-slide { justify-content: flex-start; padding-top: calc(var(--header-h) + 12px); }
html.tm-swipe #contact .contact-grid { gap: 14px; grid-template-columns: minmax(0, 1fr); }
html.tm-swipe #contact .contact-grid > * { min-width: 0; }
html.tm-swipe #contact h2 { font-size: clamp(24px, 6.6vw, 30px); }
html.tm-swipe #contact .contact-grid > div:first-child > p { font-size: 13px !important; margin-top: 6px !important; }
html.tm-swipe #contact .contact-form { grid-template-columns: 1fr 1fr; gap: 8px 10px; padding: 14px; }
html.tm-swipe #contact .field { gap: 3px; }
html.tm-swipe #contact .field .label { font-size: 12px; }
html.tm-swipe #contact .input, html.tm-swipe #contact .select { padding: 7px 10px; font-size: 16px; height: 40px; }
html.tm-swipe #contact .textarea { padding: 8px 10px; font-size: 16px; min-height: 0; height: clamp(64px, 11dvh, 110px); resize: none; }
html.tm-swipe #contact .form-note { font-size: 11px; line-height: 1.35; }
html.tm-swipe #contact .contact-form .btn { width: 100%; justify-content: center; padding: 11px 16px; font-size: 15px; }
html.tm-swipe #contact .form-status { margin-top: 6px; }
/* auto-fit levels for the contact slide */
html.tm-swipe #contact[data-tight] .contact-grid > div:first-child > p { display: none !important; }
/* the GDPR note stays unless the screen is really short */
html.tm-swipe #contact:is([data-tight="2"],[data-tight="3"],[data-tight="4"]) .form-note { display: none !important; }
html.tm-swipe #contact[data-tight] .tm-rule { margin: 8px 0 8px !important; }

/* =====================================================================
   Inner pages in swipe mode — Services, Projects, News (2026-11-07)
   ===================================================================== */
html.tm-swipe .swipe-hide { display: none !important; }
/* An intro that adds nothing on a phone (News): out of the feed, but still in the
   page for search engines and screen readers (the H1 lives there) */
html.tm-swipe main .swipe-slide.swipe-sr-only {   /* 'main' outranks the .page-hero.swipe-slide padding rule below */
  position: absolute; width: 1px; height: 1px; padding: 0; margin: -1px; border: 0;
  overflow: hidden; clip-path: inset(50%); white-space: nowrap; scroll-snap-align: none;
}
/* …and the page then opens on a light section, so the header skips its
   "light text over a dark hero" state there */
html.tm-swipe body:has(.swipe-sr-only.page-hero) .site-header--overlay:not(.is-scrolled) {
  --text-title: inherit; --text-body: inherit; --text-muted: inherit; --text-numeral: inherit;
  background: var(--header-bg); border-bottom-color: var(--header-border);
  backdrop-filter: blur(var(--glass-blur)); -webkit-backdrop-filter: blur(var(--glass-blur));
}          /* empty placeholders (News: Insights "coming soon") */
html.tm-swipe .swipe-group { padding-block: 0; }                 /* wrapper whose children are the slides */
/* Inner-page hero: title block up top, an "on this page" index at the bottom
   (numbered jump links to the slides that follow) — the screen is filled with
   something useful instead of a small centred block (user feedback) */
.swipe-only { display: none; }
html.tm-swipe .swipe-only { display: block; }
html.tm-swipe .page-hero.swipe-slide { justify-content: flex-start; padding-top: calc(var(--header-h) + clamp(10px, 4dvh, 40px)); }
html.tm-swipe .page-hero.swipe-slide > .container { flex: 1 1 auto; display: flex; flex-direction: column; }
html.tm-swipe .page-hero.swipe-slide > .container > * { flex: none; }
html.tm-swipe .page-hero.swipe-slide .tm-rule { margin: 16px 0 18px !important; }
html.tm-swipe .page-hero.swipe-slide h1 { font-size: clamp(36px, 10vw, 46px); max-width: none; }
html.tm-swipe .page-hero.swipe-slide .lede { color: #CBD5E3; margin-top: 14px !important; }
html.tm-swipe .page-hero.swipe-slide .hero-chips { margin-top: 18px; }
html.tm-swipe .hero-toc { margin-top: clamp(20px, 4dvh, 36px); }   /* right under the intro, not pressed to the bottom (user feedback) */
html.tm-swipe .hero-toc-label {
  display: block; margin-bottom: 8px; color: #8FA3BF;
  font: 600 var(--fs-eyebrow)/1.4 var(--font-body); letter-spacing: var(--ls-eyebrow); text-transform: uppercase;
}
html.tm-swipe .hero-toc ol { list-style: none; margin: 0; padding: 0; display: grid; grid-template-columns: minmax(0, 1fr); column-gap: 18px; border-bottom: 1px solid rgba(255,255,255,.12); }
html.tm-swipe .hero-toc li { border-top: 1px solid rgba(255,255,255,.12); min-width: 0; }
html.tm-swipe .hero-toc a {
  display: flex; align-items: center; gap: 14px; padding: 9px 2px;
  color: #E6ECF4; text-decoration: none; font: 600 15px/1.25 var(--font-body);
  -webkit-tap-highlight-color: transparent;
}
html.tm-swipe .hero-toc a:active { background: rgba(255,255,255,.05); }
html.tm-swipe .hero-toc .tm-numeral { flex: none; min-width: 22px; font-size: 14px; color: #5BC4EC; }
html.tm-swipe .hero-toc-name { flex: 1 1 auto; min-width: 0; }
html.tm-swipe .hero-toc-name small { display: block; margin-top: 2px; font-size: 12.5px; font-weight: 400; color: #93A4BC; }
html.tm-swipe .hero-toc svg { flex: none; width: 16px; height: 16px; color: #5BC4EC; opacity: .75; }
/* auto-fit: two columns → compact rows → drop the index (it is a shortcut, not content).
   The intro paragraph always stays here (the generic level-1 rule hides .lede) */
html.tm-swipe .page-hero.swipe-slide[data-tight] .lede { display: block !important; }
/* one column as long as possible: compact rows → no label → two columns → no index */
html.tm-swipe .page-hero[data-tight] .hero-toc a { padding-block: 5px; font-size: 14px; }
html.tm-swipe .page-hero[data-tight] .hero-toc { margin-top: 16px; }
html.tm-swipe .page-hero:is([data-tight="2"],[data-tight="3"],[data-tight="4"]) .hero-toc-label { display: none; }
html.tm-swipe .page-hero:is([data-tight="2"],[data-tight="3"],[data-tight="4"]) .hero-toc a { padding-block: 4px; }
html.tm-swipe .page-hero:is([data-tight="3"],[data-tight="4"]) .hero-toc ol { grid-template-columns: repeat(2, minmax(0, 1fr)); }
html.tm-swipe .page-hero:is([data-tight="3"],[data-tight="4"]) :is(.hero-toc-name small, .hero-toc svg) { display: none; }
html.tm-swipe .page-hero:is([data-tight="3"],[data-tight="4"]) .hero-toc a { gap: 10px; }
html.tm-swipe .page-hero.swipe-slide:is([data-tight="3"],[data-tight="4"]) > .container { zoom: 1; }   /* no shrinking of the whole card here */
html.tm-swipe .page-hero[data-tight="4"] .hero-toc { display: none; }

/* Services — one service per screen: illustration on top, copy below */
/* The illustration sits right under the header and takes whatever height is
   left (between 110px and ~44% of the screen); the text below runs down to the
   bottom edge — no empty bands above or below (user feedback) */
/* Every service drawing has the same landscape box (16:9, capped on short
   screens) whatever the text below — so titles land at the same height on
   every swipe (user feedback) */
html.tm-swipe .svc-row.swipe-slide { display: flex; flex-direction: column; justify-content: flex-start; gap: 16px; border-bottom: 0; }
html.tm-swipe .svc-row .svc-illo {
  order: 1; flex: none; width: 100%; aspect-ratio: 16 / 9; height: auto; min-height: 0; max-height: 30dvh; padding: 12px;
}
html.tm-swipe .svc-row .svc-illo > div { height: 100%; width: 100%; display: flex; align-items: center; justify-content: center; }
/* the inline width:86%/height:auto on each drawing would let it spill below the box */
html.tm-swipe .svc-row .svc-illo svg { height: 100% !important; width: auto !important; max-width: 100% !important; }
html.tm-swipe .svc-row .svc-copy { order: 2; flex: none; }
html.tm-swipe .svc-copy .svc-idx .tm-numeral { font-size: 26px; }
html.tm-swipe .svc-copy h2 { font-size: clamp(24px, 7vw, 30px); margin-top: 6px; }
html.tm-swipe .svc-copy .svc-desc { font-size: 16px; line-height: 1.55; margin-top: 10px; }
html.tm-swipe .svc-copy ul { margin-top: 14px; gap: 8px; }
html.tm-swipe .svc-copy li { font-size: 15px; line-height: 1.45; }
html.tm-swipe .svc-proof { margin-top: 16px; font-size: 14.5px; line-height: 1.45; }
/* auto-fit: the drawing shrinks first (flex), then the proof line goes, then the description */
html.tm-swipe .svc-row[data-tight] .svc-proof { display: none; }
html.tm-swipe .svc-row:is([data-tight="2"],[data-tight="3"],[data-tight="4"]) .svc-desc { display: none; }

/* Projects — category carousels: compact cards */
html.tm-swipe .swipe-slide .proj-cat-head { margin-bottom: 14px; }
html.tm-swipe .swipe-slide .carousel-track > .proj-card { width: 82%; }
html.tm-swipe .swipe-slide .proj-card .card-desc { font-size: 14px; line-height: 1.5; }

/* News — a feed (swipe.js splitFeeds): Featured one card per screen, Events and
   Press two per screen; no carousels on phones. The card list takes the height
   left under the heading / label and the pictures absorb the spare room. */
html.tm-swipe .swipe-feed > .container { flex: 1 1 auto; display: flex; flex-direction: column; }
html.tm-swipe .swipe-feed > .container > * { flex: none; }
html.tm-swipe .swipe-feed .proj-cat-head { margin-bottom: 12px; }
/* "N έργα" sits at the right of the title line instead of taking a row of its own */
html.tm-swipe .swipe-feed .proj-cat-head { flex-direction: row; flex-wrap: nowrap; align-items: flex-end; justify-content: space-between; gap: 12px; }
html.tm-swipe .swipe-feed .proj-cat-head .section-head { flex: 1 1 auto; min-width: 0; }
html.tm-swipe .swipe-feed .proj-cat-head > .badge { flex: none; margin-bottom: 6px; }
html.tm-swipe .swipe-count { opacity: .65; }
html.tm-swipe .swipe-cont-label { display: block; margin: 4px 0 12px; }
html.tm-swipe .swipe-feed > .container > .swipe-cards { flex: 1 1 auto; display: grid; gap: 12px; margin-top: 12px; }
html.tm-swipe .swipe-cards--1 { grid-template-rows: 1fr; }
html.tm-swipe .swipe-cards--2 { grid-template-rows: 1fr 1fr; }
html.tm-swipe .swipe-slide--cont .swipe-cards { margin-top: 0 !important; }
html.tm-swipe .swipe-cards > .card {
  --space-6: 16px;                       /* card padding + picture bleed */
  display: flex; flex-direction: column; min-width: 0; width: auto;
  text-decoration: none; color: inherit;
}
html.tm-swipe .swipe-cards .press-thumb {
  flex: 1 1 0; min-height: 120px; height: auto; aspect-ratio: auto; margin-bottom: 12px; object-fit: cover;
}
html.tm-swipe .swipe-cards :is(h3, .card-desc) { flex: none; }
html.tm-swipe .swipe-cards .card-desc { margin-top: 8px; }
/* one per screen */
html.tm-swipe .swipe-cards--1 .press-thumb { min-height: 150px; }
html.tm-swipe .swipe-cards--1 h3 { font-size: clamp(20px, 5.6vw, 24px) !important; line-height: 1.25; margin-top: 8px; }
html.tm-swipe .swipe-cards--1 .card-desc { font-size: 15px; line-height: 1.55; }
html.tm-swipe .swipe-cards--1 .news-more { margin-top: 12px; }
/* two per screen */
html.tm-swipe .swipe-cards--2 h3 {
  font-size: 16px; line-height: 1.3; margin-top: 8px;
  display: -webkit-box; -webkit-line-clamp: 3; -webkit-box-orient: vertical; overflow: hidden;
}
html.tm-swipe .swipe-cards--2 .card-desc {
  font-size: 14px; line-height: 1.45;
  display: -webkit-box; -webkit-line-clamp: 2; -webkit-box-orient: vertical; overflow: hidden;
}
html.tm-swipe .swipe-cards--2 .press-foot { margin-top: 10px; }
html.tm-swipe .swipe-cards--2 .news-more { display: none; }   /* two-up story cards: the whole card is the link */
html.tm-swipe .swipe-cards--2 .ev-thumb--blank span { font-size: 34px; }
/* auto-fit: shorter descriptions, then none, then smaller pictures */
html.tm-swipe .swipe-slide[data-tight] .swipe-cards .card-desc { display: -webkit-box; -webkit-line-clamp: 2; -webkit-box-orient: vertical; overflow: hidden; }
html.tm-swipe .swipe-slide:is([data-tight="2"],[data-tight="3"],[data-tight="4"]) .swipe-cards .card-desc { display: none; }
html.tm-swipe .swipe-slide:is([data-tight="2"],[data-tight="3"],[data-tight="4"]) .swipe-cards .press-thumb { min-height: 84px; }
/* level 3 on a feed slide: two-line titles and slimmer pictures instead of scaling everything down */
html.tm-swipe .swipe-feed:is([data-tight="3"],[data-tight="4"]) .swipe-cards h3 { -webkit-line-clamp: 2; }
html.tm-swipe .swipe-feed:is([data-tight="3"],[data-tight="4"]) .swipe-cards .press-thumb { min-height: 60px; margin-bottom: 10px; }
html.tm-swipe .swipe-feed[data-tight="3"] > .container { zoom: 1; }
html.tm-swipe .swipe-feed[data-tight="4"] > .container { zoom: .9; }
/* Projects — one project per screen: photo (5G-TRACE, ITE) or a numbered navy
   panel, then tags, title, description and two key facts (desktop: hidden) */
html.tm-swipe .swipe-cards span.proj-thumb { display: flex; }
html.tm-swipe .swipe-cards .proj-thumb span { font-size: 56px; }
html.tm-swipe .swipe-cards .proj-card .proj-tags { margin-bottom: 0; }
/* the panel is decoration: it gives way before the facts do */
html.tm-swipe .swipe-cards--1 .proj-card .press-thumb { min-height: 110px; }
html.tm-swipe .swipe-slide[data-tight="1"] .swipe-cards .proj-card .press-thumb { min-height: 64px; }
html.tm-swipe .swipe-feed[data-tight] .proj-cat-head .tm-rule { display: none; }
/* continuation screens repeat the category head: same gap under it as on the first screen */
html.tm-swipe .swipe-slide--cont .proj-cat-head + .swipe-cards { margin-top: 12px !important; }
/* one picture height for every project card (swipe.js measures it: --proj-thumb-h) */
html.tm-swipe.tm-eq .swipe-cards--1 .proj-card .proj-thumb { flex: none; height: var(--proj-thumb-h); min-height: 0; }
/* spare room goes above the facts, so facts + "see the project" sit at the same place on every card */
html.tm-swipe.tm-eq .swipe-cards--1 .proj-card .proj-facts { margin-top: auto; }
html.tm-swipe.tm-eq .swipe-slide:is([data-tight="2"],[data-tight="3"],[data-tight="4"]) .swipe-cards--1 .proj-card .proj-more { margin-top: auto; }
html.tm-swipe .swipe-slide:is([data-tight="2"],[data-tight="3"],[data-tight="4"]) .swipe-cards .proj-card .press-thumb { min-height: 64px; }
html.tm-swipe .proj-facts { display: grid; grid-template-columns: minmax(0, 1fr); gap: 8px; margin: 14px 0 0; padding-top: 12px; border-top: 1px solid var(--border-subtle); }
html.tm-swipe .proj-facts div { display: block; }   /* label above value: long labels (ΧΡΗΜΑΤΟΔΟΤΗΣΗ) never collide */
html.tm-swipe .proj-facts dt { margin-bottom: 2px; }
html.tm-swipe .proj-facts dt { font: 600 11.5px/1.35 var(--font-body); letter-spacing: .06em; text-transform: uppercase; color: var(--text-eyebrow); }
html.tm-swipe .proj-facts dd { margin: 0; font-size: 13.5px; line-height: 1.4; color: var(--text-body); }
html.tm-swipe .swipe-cards .proj-more { margin-top: 12px; }
/* auto-fit on a project screen: facts go before the description */
html.tm-swipe .swipe-slide[data-tight="2"] .swipe-cards .proj-card .card-desc { display: -webkit-box; }
html.tm-swipe .swipe-slide:is([data-tight="2"],[data-tight="3"],[data-tight="4"]) .proj-facts { display: none; }