/* ROAD X ASSIST
   Σκοτεινή βάση σαν νυχτερινός δρόμος, μπλε της βαφής, λευκά πλάγια στενά κεφαλαία όπως
   τα γράμματα στο πλάι του φορτηγού, κόκκινο Χ. Στρογγυλεμένες επιφάνειες, απαλές λάμψεις,
   κόκκος φιλμ, φωτογραφίες με κείμενο πάνω τους, ένας υπερμεγέθης αριθμός ανά ενότητα. */

:root {
  --bg: #070c22;
  --bg-2: #0c143a;
  --surface: rgba(255,255,255,.05);
  --surface-2: rgba(255,255,255,.09);
  --navy: #0d1f5c;
  --blue: #2f53b8;
  --blue-bright: #5a84ff;
  --red: #ef2b35;
  --white: #fff;
  --paper: #f4f6fc;
  --ink: #0b1230;
  --muted: #98a4cc;
  --muted-dark: #5f6a86;
  --line: rgba(255,255,255,.1);
  --r: 14px; --r-lg: 22px;
  --gutter: clamp(24px, 5.5vw, 72px);
  --max: 1240px;
  --red-bright: #ff3d47;
  --font: "Inter", system-ui, -apple-system, "Segoe UI", Roboto, sans-serif;
  --display: "Sofia Sans Extra Condensed", "Sofia Sans Condensed", "Roboto Condensed", system-ui, sans-serif;
  --display-2: "Sofia Sans Condensed", "Roboto Condensed", system-ui, sans-serif;
  --shadow: 0 30px 60px -20px rgba(0,0,0,.6), 0 0 0 1px rgba(255,255,255,.06) inset;
  --glow-blue: 0 0 80px -10px rgba(90,132,255,.45);
}

* { box-sizing: border-box; }
html { -webkit-text-size-adjust: 100%; scroll-behavior: smooth; }
body { margin: 0; font-family: var(--font); font-size: 18px; line-height: 1.55; color: var(--white); background: var(--bg); padding-bottom: 68px; position: relative; }
body::before { /* κόκκος φιλμ */
  content: ""; position: fixed; inset: 0; pointer-events: none; z-index: 1; opacity: .07; mix-blend-mode: overlay;
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='160' height='160'%3E%3Cfilter id='n'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='.9' numOctaves='2' stitchTiles='stitch'/%3E%3C/filter%3E%3Crect width='100%25' height='100%25' filter='url(%23n)'/%3E%3C/svg%3E");
}
@media (min-width: 900px) { body { padding-bottom: 0; } }
img, video, picture, svg { display: block; max-width: 100%; }
a { color: inherit; }
p { margin: 0; }
h1, h2, h3 { font-family: var(--display); margin: 0; line-height: .92; font-weight: 900; }
h2 { font-size: clamp(42px, 5.6vw, 80px); font-style: italic; text-transform: uppercase; letter-spacing: 0; text-wrap: balance; }
h3 { font-family: var(--display-2); font-weight: 800; font-size: clamp(23px, 2.4vw, 30px); line-height: 1.05; letter-spacing: .005em; }
.wrap { width: 100%; max-width: var(--max); margin-inline: auto; }
.top, .subnav, .section, .hero, .hero-plain, .hero-split, .callout, footer { padding-inline: var(--gutter); }
:focus-visible { outline: 3px solid var(--red); outline-offset: 3px; }
.skip { position: absolute; left: -999px; top: 8px; background: var(--white); color: var(--ink); padding: 8px 12px; z-index: 100; }
.skip:focus { left: 8px; }
strong { color: var(--white); }
::selection { background: var(--red); color: var(--white); }
html { scrollbar-color: #3b63d6 var(--bg); }

/* ---------- κουμπιά ---------- */
.btn {
  display: inline-flex; align-items: center; justify-content: center; gap: 10px;
  font-family: var(--display-2); font-weight: 800; font-style: italic; text-transform: uppercase; letter-spacing: .05em;
  font-size: 20px; padding: 16px 28px; border-radius: 999px; text-decoration: none; border: 1.5px solid transparent;
  transition: transform .18s, box-shadow .18s, background-color .18s;
}
.btn:hover { transform: translateY(-2px); }
.btn svg { width: 20px; height: 20px; flex: none; }
.btn-blue { background: linear-gradient(135deg, #3b63d6, #2446a6); color: var(--white); box-shadow: 0 12px 30px -10px rgba(59,99,214,.8); }
.btn-white { background: var(--white); color: var(--ink); box-shadow: 0 12px 30px -10px rgba(0,0,0,.6); }
.btn-red { background: linear-gradient(135deg, #f2303a, #c80f19); color: var(--white); box-shadow: 0 12px 30px -10px rgba(239,43,53,.8); }
.btn-ghost { border-color: rgba(255,255,255,.4); color: var(--white); backdrop-filter: blur(8px); background: rgba(255,255,255,.06); }
.btn-ghost:hover { background: rgba(255,255,255,.14); }
.btn-outline { border-color: rgba(90,132,255,.7); color: var(--white); }
.btn-outline:hover { background: rgba(90,132,255,.14); }

/* ---------- λογότυπο ---------- */
.brand { display: inline-flex; align-items: center; font-family: var(--display); font-weight: 900; font-style: italic; font-size: 30px; letter-spacing: .01em; color: var(--white); text-decoration: none; line-height: 1; text-transform: uppercase; }
.brand .x { width: .8em; height: .8em; margin: 0 .1em 0 .14em; }
.brand .x path { stroke: var(--red); }

/* ---------- κεφαλίδα ---------- */
.top { position: sticky; top: 0; z-index: 50; background: rgba(7,12,34,.72); backdrop-filter: blur(18px) saturate(140%); -webkit-backdrop-filter: blur(18px) saturate(140%); border-bottom: 1px solid var(--line); }
.top .wrap { display: flex; align-items: center; gap: 28px; min-height: 74px; }
.top nav { display: none; gap: 2px; margin-left: 8px; }
.top nav a { font-family: var(--display-2); font-weight: 700; font-size: 18px; letter-spacing: .05em; text-transform: uppercase; color: var(--muted); text-decoration: none; padding: 10px 14px; border-radius: 999px; }
.top nav a:hover { color: var(--white); background: var(--surface); }
.top nav a[aria-current="page"] { color: var(--white); background: var(--surface-2); }
.top .call { margin-left: auto; }
.top .call .btn { padding: 11px 20px; font-size: 18px; }
.top .call .btn span { display: none; }
@media (min-width: 900px) { .top nav { display: flex; } .top .call .btn span { display: inline; } }
.subnav { display: flex; gap: 6px; background: var(--bg); padding-block: 10px; overflow-x: auto; scrollbar-width: none; }
.subnav::-webkit-scrollbar { display: none; }
.subnav a { flex: 0 0 auto; font-family: var(--display-2); font-weight: 700; font-size: 15px; text-transform: uppercase; letter-spacing: .05em; color: var(--muted); text-decoration: none; padding: 8px 13px; border-radius: 999px; border: 1px solid var(--line); white-space: nowrap; }
.subnav a[aria-current="page"] { color: var(--white); background: var(--blue); border-color: transparent; }
@media (min-width: 900px) { .subnav { display: none; } }

/* ---------- η ράγα: λωρίδα όπως στο πλάι του φορτηγού ---------- */
.rail { background: linear-gradient(90deg, #2446a6, #3b63d6 50%, #2446a6); color: var(--white); padding: 13px 0; line-height: 1.2; overflow: hidden; display: flex; white-space: nowrap; font-family: var(--display); font-weight: 900; font-style: italic; font-size: 24px; letter-spacing: .06em; text-transform: uppercase; box-shadow: 0 -1px 0 rgba(255,255,255,.2) inset, 0 1px 0 rgba(255,255,255,.2) inset; }
.rail span { padding: 0 44px; display: inline-flex; align-items: center; gap: 44px; animation: rail 30s linear infinite; }
.rail .x { width: .9em; height: .9em; display: inline-block; }
.rail .x path { stroke: #ff6b72; }
.rail .rx { color: #c4d3ff; }
@keyframes rail { to { transform: translateX(-100%); } }

/* ---------- hero, αρχική ---------- */
.hero { position: relative; background: var(--bg); overflow: hidden; }
.hero .media { position: absolute; inset: 0; }
.hero .media img, .hero .media video { width: 100%; height: 100%; object-fit: cover; }
.hero .media video { display: none; }
.hero .media::after { content: ""; position: absolute; inset: 0; background: linear-gradient(180deg, rgba(7,12,34,.15) 25%, rgba(7,12,34,.88) 70%, var(--bg) 100%); }
.hero .wrap { position: relative; min-height: calc(100svh - 74px - 58px - 68px); display: flex; flex-direction: column; justify-content: flex-end; padding: 80px 0 40px; }
.hero h1 { font-size: clamp(60px, 9vw, 124px); font-style: italic; text-transform: uppercase; letter-spacing: .005em; line-height: .9; max-width: 20ch; text-wrap: balance; }
.hero h1 em, .hero-plain h1 em, .hero-split h1 em { font-style: inherit; color: var(--red-bright); text-shadow: 0 2px 24px rgba(7,12,34,.85), 0 1px 2px rgba(7,12,34,.6); }
.hero h1 { text-shadow: 0 2px 40px rgba(7,12,34,.7); }
.hero .lead { font-size: clamp(17px, 2vw, 23px); max-width: 46ch; margin: 20px 0 28px; color: #cfd8f7; }
.hero .cta { display: flex; flex-wrap: wrap; gap: 12px; }
@media (max-width: 899px) { .hero .media video.mob { display: block; } .hero .media img.mob-hide { display: none; } }
@media (min-width: 900px) {
  .hero .wrap { min-height: min(80vh, 720px); padding: 100px 0 64px; }
  .hero .media::after { background: linear-gradient(90deg, rgba(7,12,34,.95) 0%, rgba(7,12,34,.72) 42%, rgba(7,12,34,.15) 100%), linear-gradient(0deg, var(--bg) 0%, rgba(7,12,34,0) 40%); }
}

/* hero με βίντεο-φόντο κάτω από μπλε χρώμα: το βίντεο φαίνεται αχνά, η σελίδα μένει navy */
.hero-tint .media video { display: block; opacity: .85; filter: saturate(.75) contrast(1.05); }
.hero-tint .media::after { background: linear-gradient(180deg, rgba(7,12,34,.85) 0%, rgba(7,12,34,.35) 45%, rgba(7,12,34,.6) 75%, var(--bg) 100%); }
.hero-tint .media::before { content: ""; position: absolute; inset: 0; background: var(--navy); mix-blend-mode: color; }
.hero-tint .media { isolation: isolate; }
.hero-tint .wrap { z-index: 1; }
@media (min-width: 900px) { .hero-tint .media::after { background: linear-gradient(180deg, rgba(7,12,34,.9) 0%, rgba(7,12,34,.1) 48%, rgba(7,12,34,0) 60%), linear-gradient(90deg, rgba(7,12,34,.8) 0%, rgba(7,12,34,.4) 50%, rgba(7,12,34,.1) 100%), linear-gradient(0deg, var(--bg) 0%, rgba(7,12,34,0) 40%); } }
@media (max-width: 899px) { .hero-tint .wrap { min-height: calc(100svh - 74px - 58px - 68px); } }

/* hero κειμένου (Ευρώπη) και δύο στηλών (φύλαξη) */
.hero-plain, .hero-split { background: var(--bg); position: relative; overflow: hidden; }
.hero-plain::before, .hero-split::before { content: ""; position: absolute; inset: 0; pointer-events: none; background: radial-gradient(ellipse 55% 60% at 85% 15%, rgba(59,99,214,.5), transparent 70%), radial-gradient(ellipse 40% 40% at 5% 95%, rgba(239,43,53,.22), transparent 70%); }
.hero-plain { padding-block: clamp(56px, 8vw, 96px) clamp(48px, 6vw, 72px); }
.hero-plain .wrap, .hero-split .wrap { position: relative; }
.hero-plain h1, .hero-split h1 { font-size: clamp(56px, 7.4vw, 104px); font-style: italic; text-transform: uppercase; letter-spacing: .005em; line-height: .9; max-width: 20ch; text-wrap: balance; }
.hero-plain .lead, .hero-split .lead { font-size: clamp(17px, 2vw, 22px); max-width: 54ch; margin: 22px 0 30px; color: #cfd8f7; }
.hero-plain .cta, .hero-split .cta { display: flex; flex-wrap: wrap; gap: 12px; }
.hero-split .wrap { display: grid; gap: 36px; padding: clamp(48px, 7vw, 96px) 0 clamp(40px, 6vw, 80px); }
.hero-split figure { margin: 0; align-self: center; position: relative; }
.hero-split figure img, .hero-split figure video { width: 100%; aspect-ratio: 4 / 3; object-fit: cover; border-radius: var(--r-lg); box-shadow: var(--shadow), var(--glow-blue); }
.hero-split figcaption { font-size: 14px; color: var(--muted); padding: 12px 4px 0; }
@media (min-width: 900px) {
  .hero-split .wrap { grid-template-columns: 1.05fr .95fr; gap: 72px; align-items: center; }
  .hero-split figure img, .hero-split figure video { aspect-ratio: 4 / 5; max-height: 660px; }
}

/* διαδρομή Ευρώπης */
.route { list-style: none; margin: 44px 0 0; padding: 24px; display: grid; position: relative; background: var(--surface); border: 1px solid var(--line); border-radius: var(--r-lg); backdrop-filter: blur(10px); }
.route li { position: relative; padding: 0 0 16px 30px; display: grid; gap: 2px; }
.route li::before { content: ""; position: absolute; left: 3px; top: 8px; width: 12px; height: 12px; border-radius: 50%; background: var(--bg); border: 3px solid var(--blue-bright); box-shadow: 0 0 12px rgba(90,132,255,.8); }
.route li::after { content: ""; position: absolute; left: 10px; top: 24px; bottom: -4px; width: 2px; background: repeating-linear-gradient(180deg, rgba(255,255,255,.45) 0 6px, transparent 6px 12px); }
.route li:last-child::after { display: none; }
.route li:first-child::before, .route li:last-child::before { background: var(--red); border-color: var(--red); box-shadow: 0 0 14px rgba(239,43,53,.9); }
.route b { font-family: var(--display-2); font-weight: 800; font-style: italic; text-transform: uppercase; font-size: 23px; letter-spacing: .02em; }
.route span { font-size: 15px; color: var(--muted); }
@media (min-width: 900px) {
  .route { grid-template-columns: repeat(7, 1fr); margin-top: 64px; padding: 32px 28px 28px; }
  .route li { padding: 28px 12px 0 0; }
  .route li::before { left: 0; top: 0; }
  .route li::after { left: 18px; right: -4px; top: 5px; bottom: auto; width: auto; height: 2px; background: repeating-linear-gradient(90deg, rgba(255,255,255,.45) 0 6px, transparent 6px 12px); }
}

/* πίνακας αναχωρήσεων Γερμανία → Αθήνα */
.board { margin: 44px 0 0; background: var(--surface); border: 1px solid var(--line); border-radius: var(--r-lg); backdrop-filter: blur(10px); overflow: hidden; }
.board header { display: flex; justify-content: space-between; align-items: baseline; gap: 12px; padding: 18px 22px; background: linear-gradient(90deg, var(--red), #c81c26); border-bottom: 1px solid var(--line); font-family: var(--display-2); font-weight: 800; font-style: italic; text-transform: uppercase; font-size: 22px; letter-spacing: .04em; }
.board header small { font-family: var(--font); font-style: normal; font-weight: 500; text-transform: none; letter-spacing: 0; font-size: 14px; color: rgba(255,255,255,.8); }
.board ul { list-style: none; margin: 0; padding: 6px 0; }
.board li { display: grid; grid-template-columns: 1fr auto auto; gap: 18px; align-items: baseline; padding: 12px 22px; border-bottom: 1px solid rgba(255,255,255,.06); }
.board li:last-child { border-bottom: 0; }
.board b { font-family: var(--display-2); font-weight: 800; font-style: italic; text-transform: uppercase; font-size: 22px; letter-spacing: .02em; }
.board b small { display: block; font-family: var(--font); font-style: normal; font-weight: 400; text-transform: none; letter-spacing: 0; font-size: 13px; color: var(--muted); }
.board .km, .board .days { font-family: var(--display-2); font-weight: 700; font-size: 20px; font-variant-numeric: tabular-nums; color: #cfd8f7; white-space: nowrap; }
.board .days { color: var(--white); }
.board .days::before { content: ""; display: inline-block; width: 8px; height: 8px; border-radius: 50%; background: #2ad465; margin-right: 10px; box-shadow: 0 0 10px #2ad465; }
.board footer { padding: 14px 22px; font-size: 14px; color: var(--muted); border-top: 1px solid var(--line); }
@media (max-width: 599px) {
  .board header { flex-direction: column; align-items: flex-start; gap: 2px; padding: 16px 20px; }
  .board li { grid-template-columns: 1fr auto; grid-template-rows: auto auto; gap: 4px 14px; }
  .board b { grid-column: 1 / -1; font-size: 21px; }
  .board b small { display: inline; margin-left: 8px; }
  .board .km { font-size: 17px; }
  .board .days { font-size: 17px; justify-self: end; }
}
@media (min-width: 900px) { .board { margin-top: 56px; } .board ul { display: grid; grid-template-columns: 1fr 1fr; padding: 0; } .board li { padding: 16px 26px; } .board li:nth-child(odd) { border-right: 1px solid rgba(255,255,255,.06); } .board li:nth-last-child(2) { border-bottom: 0; } }

/* ---------- ενότητες ---------- */
.section-paper .steps li { background: var(--white); border-color: rgba(11,18,48,.08); box-shadow: 0 2px 0 rgba(11,18,48,.04), 0 20px 40px -24px rgba(11,18,48,.25); }
.section-paper .steps p { color: var(--muted-dark); }
.section-paper .steps a { color: var(--blue); }
.section-paper .facts div { background: var(--white); border-color: rgba(11,18,48,.08); box-shadow: 0 2px 0 rgba(11,18,48,.04); }
.section-paper .facts b { color: var(--ink); }
.section-paper .facts span { color: var(--muted-dark); }
.section-paper .trio figure { box-shadow: 0 24px 48px -24px rgba(11,18,48,.4); }
.section-paper .section-head h2::before { background: var(--red); }
.section { padding-block: clamp(64px, 9vw, 128px); position: relative; overflow: clip; }
.section-tint { background: linear-gradient(180deg, var(--bg-2), var(--bg)); }
.section-paper { background: var(--paper); color: var(--ink); }
.section-paper h2, .section-paper h3, .section-paper strong { color: var(--ink); }
.section-paper .section-head p { color: var(--muted-dark); }
.section-head { max-width: 70ch; margin-bottom: clamp(32px, 5vw, 64px); position: relative; }
.section-head h2 { position: relative; }
.section-head h2::before { /* μικρό κόκκινο Χ πάνω από τον τίτλο */
  content: ""; display: block; width: 18px; height: 18px; margin-bottom: 18px;
  background: var(--red); clip-path: polygon(20% 0, 0 20%, 30% 50%, 0 80%, 20% 100%, 50% 70%, 80% 100%, 100% 80%, 70% 50%, 100% 20%, 80% 0, 50% 30%);
}
.section-head p { font-size: clamp(19px, 1.8vw, 23px); color: var(--muted); margin-top: 18px; max-width: 56ch; }
.ghost { /* τεράστιο αχνό νούμερο/λέξη πίσω από ενότητα */
  position: absolute; right: -.05em; top: .1em; font-family: var(--display); font-weight: 900; font-style: italic; font-size: clamp(120px, 18vw, 260px); line-height: 1;
  color: transparent; -webkit-text-stroke: 1px rgba(255,255,255,.08); pointer-events: none; user-select: none; white-space: nowrap;
}
.section-paper .ghost { -webkit-text-stroke-color: rgba(11,18,48,.08); }

/* για ποιες επιχειρήσεις: bento κάρτες σε χαρτί */
.segments { display: grid; gap: 14px; }
.segments > div { background: var(--white); border-radius: var(--r); padding: 24px 22px 26px; display: grid; gap: 8px; align-content: start; position: relative; box-shadow: 0 2px 0 rgba(11,18,48,.04), 0 20px 40px -24px rgba(11,18,48,.25); border: 1px solid rgba(11,18,48,.06); transition: transform .25s, box-shadow .25s; }
.segments > div:hover { transform: translateY(-4px); box-shadow: 0 2px 0 rgba(11,18,48,.04), 0 30px 50px -22px rgba(11,18,48,.35); }
.segments > div::before { content: ""; width: 36px; height: 6px; border-radius: 999px; background: var(--blue); margin-bottom: 8px; }
.segments > div:nth-child(1), .segments > div:nth-child(4) { background: linear-gradient(145deg, #1b3a9e, #0d1f5c); color: var(--white); }
.segments > div:nth-child(1) h3, .segments > div:nth-child(4) h3 { color: var(--white); }
.segments > div:nth-child(1) p, .segments > div:nth-child(4) p { color: #c4d0f5; }
.segments > div:nth-child(1)::before, .segments > div:nth-child(4)::before { background: var(--red); }
.segments > div:nth-child(1) a, .segments > div:nth-child(4) a { color: #fff; }
.segments h3 { color: var(--navy); font-size: clamp(22px, 2.2vw, 28px); }
.segments p { color: var(--muted-dark); font-size: 18px; }
.segments a { color: var(--blue); }
@media (min-width: 700px) { .segments { grid-template-columns: 1fr 1fr; gap: 18px; } .segments > div { padding: 34px 32px 38px; } }
@media (min-width: 1000px) { .segments { grid-template-columns: repeat(3, 1fr); } .segments > div:nth-child(1) { grid-column: span 2; } .segments > div:nth-child(4) { grid-column: span 2; } }

/* όροι: κείμενο + φωτογραφία σε κάρτα */
.terms { display: grid; gap: 40px; align-items: center; }
.terms figure { margin: 0; position: relative; }
.terms img { width: 100%; aspect-ratio: 4 / 3; object-fit: cover; border-radius: var(--r-lg); box-shadow: var(--shadow); }
.terms figcaption { font-size: 14px; color: var(--muted); padding: 12px 4px; }
@media (min-width: 900px) { .terms { grid-template-columns: 1fr 1fr; gap: 72px; } .terms img { transform: rotate(-1.5deg); } }

/* λίστες */
.checks { list-style: none; padding: 0; margin: 24px 0 0; display: grid; gap: 12px; }
.checks li { position: relative; padding: 14px 16px 14px 48px; font-size: 18px; color: #d7def7; background: var(--surface); border: 1px solid var(--line); border-radius: var(--r); }
.checks li::before { content: ""; position: absolute; left: 16px; top: 19px; width: 18px; height: 18px; background: var(--blue-bright); clip-path: polygon(14% 44%, 0 65%, 40% 100%, 100% 20%, 86% 5%, 40% 70%); }
.checks.red li::before { background: var(--red); clip-path: polygon(20% 0, 0 20%, 30% 50%, 0 80%, 20% 100%, 50% 70%, 80% 100%, 100% 80%, 70% 50%, 100% 20%, 80% 0, 50% 30%); }
.section-paper .checks li { color: #2c3450; background: var(--white); border-color: rgba(11,18,48,.08); }
.section-paper .checks li::before { background: var(--blue); }
.cols { display: grid; gap: 44px; }
@media (min-width: 800px) { .cols { grid-template-columns: 1fr 1fr; gap: 72px; } }

/* χώρες */
.countries { display: flex; flex-wrap: wrap; gap: 8px; margin-top: 18px; }
.countries span { font-family: var(--display-2); font-weight: 800; font-style: italic; text-transform: uppercase; letter-spacing: .05em; font-size: 18px; padding: 8px 16px; border-radius: 999px; background: var(--surface); border: 1px solid var(--line); }

/* τι ανεβαίνει: bento φωτο-κάρτες με κείμενο πάνω στη φωτογραφία */
.loads { display: grid; gap: 12px; grid-template-columns: 1fr 1fr; }
.loads figure { margin: 0; position: relative; aspect-ratio: 4 / 5; overflow: hidden; background: var(--bg-2); border-radius: var(--r); box-shadow: var(--shadow); }
.loads img { width: 100%; height: 100%; object-fit: cover; transition: transform .7s cubic-bezier(.2,.7,.2,1); }
.loads figure:hover img { transform: scale(1.06); }
.loads .cap { position: absolute; inset: auto 0 0 0; padding: 70px 18px 18px; background: linear-gradient(0deg, rgba(7,12,34,.96) 0%, rgba(7,12,34,.6) 55%, transparent 100%); }
.loads h3 { font-family: var(--display); font-weight: 900; font-style: italic; text-transform: uppercase; font-size: clamp(23px, 2.4vw, 32px); letter-spacing: .01em; }
.loads p { color: var(--muted); font-size: 15px; margin-top: 4px; }
@media (min-width: 700px) {
  .loads { grid-template-columns: repeat(4, 1fr); gap: 16px; }
  .loads figure { aspect-ratio: 1; }
  .loads figure:nth-child(1), .loads figure:nth-child(6) { grid-column: span 2; aspect-ratio: 2 / 1; }
  .loads .cap { padding: 80px 24px 22px; } .loads p { font-size: 17px; }
}

/* βήματα: τεράστιοι αριθμοί σε περίγραμμα */
.steps { display: grid; gap: 20px; counter-reset: step; padding: 0; margin: 0; }
.steps li { list-style: none; position: relative; padding: 26px 24px 28px; background: var(--surface); border: 1px solid var(--line); border-radius: var(--r-lg); overflow: hidden; }
.steps li::before { counter-increment: step; content: "0" counter(step); position: absolute; right: 18px; top: -4px; font-family: var(--display); font-weight: 900; font-style: italic; font-size: clamp(72px, 6.5vw, 104px); line-height: 1; color: transparent; -webkit-text-stroke: 1.5px rgba(255,61,71,.7); pointer-events: none; }
.section-paper .steps li::before { -webkit-text-stroke: 1.5px var(--red); color: rgba(239,43,53,.07); }
.steps h3 { margin-bottom: 8px; font-family: var(--display); font-weight: 900; font-style: italic; text-transform: uppercase; letter-spacing: .01em; font-size: clamp(26px, 2.4vw, 32px); position: relative; max-width: 66%; }
.steps.four h3 { max-width: 62%; }
.steps p { color: var(--muted); position: relative; font-size: 18px; }
@media (min-width: 800px) { .steps { grid-template-columns: repeat(3, 1fr); gap: 20px; } .steps.four { grid-template-columns: repeat(4, 1fr); } .steps li { padding: 34px 28px 32px; } }

/* gallery: οριζόντια λωρίδα, full-bleed */
.gallery { display: flex; align-items: flex-end; gap: 12px; overflow-x: auto; scroll-snap-type: x mandatory; padding: 0 var(--gutter) 16px; margin: 0 calc(-1 * var(--gutter)); scrollbar-width: none; }
.gallery::-webkit-scrollbar { display: none; }
.gallery figure { margin: 0; flex: 0 0 auto; width: min(70vw, 400px); scroll-snap-align: start; }
.gallery img { width: 100%; aspect-ratio: 3 / 4; object-fit: cover; border-radius: var(--r); box-shadow: var(--shadow); }
.gallery figcaption { font-family: var(--display-2); font-weight: 700; text-transform: uppercase; letter-spacing: .06em; font-size: 15px; color: var(--muted); padding: 12px 4px 0; }
.gallery figure:nth-child(3n) { width: min(88vw, 520px); }
.gallery figure:nth-child(3n) img { aspect-ratio: 4 / 3; }
@media (min-width: 800px) { .gallery { gap: 18px; } }

/* τρεις φωτογραφίες του χώρου, η πρώτη μεγάλη */
.trio { display: grid; gap: 12px; }
.trio figure { margin: 0; position: relative; overflow: hidden; border-radius: var(--r); box-shadow: var(--shadow); aspect-ratio: 4 / 3; }
.trio img { width: 100%; height: 100%; object-fit: cover; }
.trio figcaption { position: absolute; inset: auto 0 0 0; padding: 56px 18px 16px; font-family: var(--display-2); font-weight: 800; font-style: italic; text-transform: uppercase; letter-spacing: .04em; font-size: 18px; color: var(--white); background: linear-gradient(0deg, rgba(7,12,34,.92) 0%, rgba(7,12,34,.55) 55%, transparent 100%); }
@media (min-width: 800px) { .trio { grid-template-columns: 2fr 1fr; grid-template-rows: 1fr 1fr; gap: 16px; } .trio figure:first-child { grid-row: span 2; aspect-ratio: auto; } }
.facts { display: grid; gap: 12px; grid-template-columns: 1fr 1fr; margin-bottom: clamp(28px, 4vw, 48px); }
.facts div { padding: 18px 20px; background: var(--surface); border: 1px solid var(--line); border-radius: var(--r); }
.facts b { display: block; font-family: var(--display); font-weight: 900; font-style: italic; text-transform: uppercase; letter-spacing: .01em; font-size: clamp(24px, 2.4vw, 32px); line-height: 1; margin-bottom: 6px; }
.facts span { color: var(--muted); font-size: 15px; }
@media (min-width: 800px) { .facts { grid-template-columns: repeat(4, 1fr); gap: 16px; } }

/* δύο φωτογραφίες */
.duo { display: grid; gap: 16px; }
.duo figure { margin: 0; }
.duo img { width: 100%; aspect-ratio: 4 / 5; object-fit: cover; border-radius: var(--r-lg); box-shadow: var(--shadow); }
.duo figcaption { font-size: 14px; color: var(--muted); padding: 12px 4px; }
@media (min-width: 800px) { .duo { grid-template-columns: 1fr 1fr; gap: 24px; } }

/* φόρμα προσφοράς */
.quote { display: grid; gap: 40px; }
@media (min-width: 900px) { .quote { grid-template-columns: .9fr 1.1fr; gap: 80px; align-items: start; } }
.form { display: grid; gap: 16px; padding: 28px; background: var(--surface); border: 1px solid var(--line); border-radius: var(--r-lg); backdrop-filter: blur(10px); }
.form label { display: grid; gap: 8px; font-family: var(--display-2); font-weight: 700; text-transform: uppercase; letter-spacing: .06em; font-size: 15px; color: var(--muted); }
.form input { width: 100%; min-width: 0; font: inherit; font-family: var(--font); font-weight: 400; font-size: 17px; padding: 14px 16px; border-radius: 10px; border: 1px solid rgba(255,255,255,.18); background: rgba(7,12,34,.6); color: var(--white); }
.form input::placeholder { color: rgba(255,255,255,.32); }
.form input:focus { border-color: var(--blue-bright); outline: none; box-shadow: 0 0 0 4px rgba(90,132,255,.2); }
.form .row { display: grid; gap: 16px; grid-template-columns: 1fr 1fr; }
.form .btn { justify-self: start; margin-top: 6px; }
.form .note { font-size: 14px; color: var(--muted); }

/* ερωτήσεις */
.faq { display: grid; gap: 10px; }
.faq details { background: var(--surface); border: 1px solid var(--line); border-radius: var(--r); padding: 0 22px; }
.faq details[open] { background: var(--surface-2); }
.faq summary { cursor: pointer; list-style: none; padding: 20px 0; font-family: var(--display-2); font-weight: 700; font-size: clamp(21px, 2.1vw, 26px); display: flex; justify-content: space-between; gap: 16px; align-items: center; }
.faq summary::-webkit-details-marker { display: none; }
.faq summary::after { content: "+"; color: var(--red); font-weight: 800; font-size: 30px; line-height: 1; }
.faq details[open] summary::after { content: "–"; }
.faq details p { padding: 0 0 22px; color: var(--muted); max-width: 66ch; font-size: 18px; }
.faq a { color: var(--blue-bright); }

/* οι 3 υπηρεσίες: πάνελ με κείμενο πάνω στη φωτογραφία, το μεσαίο σηκωμένο */
.services { display: grid; gap: 14px; }
.services a { position: relative; display: block; aspect-ratio: 4 / 5; overflow: hidden; text-decoration: none; color: inherit; background: var(--bg-2); border-radius: var(--r-lg); box-shadow: var(--shadow); transition: transform .3s; }
.services a:hover { transform: translateY(-6px); }
.services img, .services .route-art { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; aspect-ratio: auto; transition: transform .7s cubic-bezier(.2,.7,.2,1); }
.services a:hover img, .services a:hover .route-art { transform: scale(1.05); }
.services .route-art text { font-family: var(--display-2); }
.services .route-art { background: #0d1f5c; object-fit: contain; }
.services .cap { position: absolute; inset: auto 0 0 0; padding: 90px 24px 26px; background: linear-gradient(0deg, rgba(7,12,34,.97) 0%, rgba(7,12,34,.7) 50%, transparent 100%); display: grid; gap: 8px; }
.services h3 { font-family: var(--display); font-weight: 900; font-style: italic; text-transform: uppercase; font-size: clamp(28px, 2.6vw, 36px); letter-spacing: .01em; }
.services p { color: var(--muted); font-size: 16px; }
.services .more { font-family: var(--display-2); font-weight: 800; font-style: italic; text-transform: uppercase; letter-spacing: .04em; font-size: 17px; color: var(--white); display: inline-flex; align-items: center; gap: 10px; }
.services .more::after { content: ""; width: 40px; height: 2px; background: var(--red); transform: scaleX(.55); transform-origin: left; transition: transform .2s; }
.services a:hover .more::after { transform: scaleX(1); }
.services a[aria-current="page"] { outline: 2px solid var(--red); outline-offset: -2px; }
.services a[aria-current="page"] .more::after { display: none; }
@media (min-width: 800px) { .services { grid-template-columns: repeat(3, 1fr); gap: 18px; align-items: end; } .services a { aspect-ratio: 3 / 4; } .services a:nth-child(2) { margin-bottom: 28px; } }

/* ---------- τελική κλήση ---------- */
.callout { position: relative; padding-block: clamp(72px, 10vw, 140px); color: var(--white); overflow: hidden; background: radial-gradient(ellipse 70% 90% at 85% 50%, #3b63d6, #0d1f5c 60%, var(--bg) 100%); }
.callout::before { content: ""; position: absolute; left: 50%; top: -30%; width: 70vw; height: 160%; background: radial-gradient(closest-side, rgba(239,43,53,.25), transparent); filter: blur(40px); pointer-events: none; }
.callout .wrap { position: relative; display: grid; gap: 28px; }
.callout h2 { font-size: clamp(46px, 5.8vw, 80px); max-width: 16ch; text-wrap: balance; }
.callout p { color: #eef2ff; max-width: 52ch; font-size: clamp(17px, 1.6vw, 20px); margin-top: 18px; }
.callout .cta { display: flex; flex-wrap: wrap; gap: 12px; }
@media (min-width: 900px) { .callout .wrap { grid-template-columns: 1.3fr .7fr; align-items: center; } .callout .cta { justify-content: flex-end; } }

/* ---------- υποσέλιδο ---------- */
footer { background: var(--bg); border-top: 1px solid var(--line); padding-block: 56px 32px; font-size: 15px; color: var(--muted); }
footer .wrap { display: grid; gap: 32px; }
footer .big { font-family: var(--display); font-weight: 900; font-style: italic; font-size: clamp(40px, 4.5vw, 56px); color: var(--white); text-decoration: none; letter-spacing: .02em; }
footer ul { list-style: none; padding: 0; margin: 0; display: grid; gap: 8px; }
footer ul a { color: #d7def7; text-decoration: none; }
footer ul a:hover { color: var(--white); text-decoration: underline; }
footer h3 { font-family: var(--font); font-size: 13px; text-transform: uppercase; letter-spacing: .12em; color: var(--muted); margin: 0 0 12px; font-weight: 600; }
footer .copy { grid-column: 1 / -1; border-top: 1px solid var(--line); padding-top: 20px; font-size: 14px; }
@media (min-width: 800px) { footer .wrap { grid-template-columns: 1.4fr 1fr 1fr; } }

/* ---------- μπάρα κλήσης, μόνο κινητό ---------- */
.callbar { position: fixed; left: 0; right: 0; bottom: 0; z-index: 60; display: flex; gap: 8px; padding: 10px 12px calc(10px + env(safe-area-inset-bottom)); background: linear-gradient(0deg, rgba(7,12,34,.98), rgba(7,12,34,.85)); backdrop-filter: blur(12px); }
.callbar a { flex: 1; display: flex; align-items: center; justify-content: center; gap: 10px; font-family: var(--display-2); font-weight: 800; font-style: italic; text-transform: uppercase; font-size: 19px; letter-spacing: .03em; text-decoration: none; padding: 15px 8px; border-radius: 999px; color: var(--white); white-space: nowrap; background: linear-gradient(135deg, #3b63d6, #2446a6); box-shadow: 0 10px 24px -10px rgba(59,99,214,.9); }
.callbar a.wa { flex: 0 0 auto; padding-inline: 18px; background: linear-gradient(135deg, #16a349, #0f7f37); box-shadow: 0 10px 24px -10px rgba(22,163,73,.7); }
.callbar svg { width: 22px; height: 22px; }
@media (min-width: 900px) { .callbar { display: none; } }

/* ---------- κινητό ---------- */
@media (max-width: 799px) {
  .btn { white-space: normal; text-align: center; }
  .hero .cta .btn, .hero-split .cta .btn, .hero-plain .cta .btn, .callout .cta .btn { flex: 1 1 100%; }
  .hero .cta a[href^="tel:"], .hero-plain .cta a[href^="tel:"] { display: none; }
  .form { padding: 20px; }
  .form .row { grid-template-columns: 1fr; }
  .route { margin-top: 30px; padding: 20px; }
  .route li { padding-bottom: 10px; }
  .route b { font-size: 20px; }
  .services a { aspect-ratio: 16 / 10; }
  .services .cap { padding: 60px 18px 18px; }
  .services p { display: none; }
  .services .route-art text { display: none; }
  .ghost { display: none; }
  body { font-size: 17px; }
  .section-head p { font-size: 18px; }
  .checks li, .segments p, .steps p, .faq details p { font-size: 17px; }
}

@media (prefers-reduced-motion: reduce) {
  html { scroll-behavior: auto; }
  .rail span { animation: none; }
  .hero .media video { display: none !important; }
  .hero-tint .media { background: var(--navy) url(assets/hero-yard-poster.webp) center/cover; }
  .hero .media img.mob-hide { display: block !important; }
  .loads img, .services img, .services .route-art, .services a, .segments > div, .btn { transition: none; }
}