/* AVENIDA RENT A CAR — v2 · AGENTHS 2026 · design-dna v3
   Thesis: «Η λεωφόρος στις 07:00» — μία συνεχής άσφαλτος από το hero ως το footer.
   Ύλη: ο ασβεστόλιθος του Λευκού Πύργου στις 07:00. Το γαλάζιο του λογότυπου = ΧΑΡΑΞΗ, όχι επιφάνεια.
   Motion persona: Confident · cubic-bezier(.16,1,.3,1) */

/* ---------- TOKENS ---------- */
:root{
  --canvas:#F2EFE6; --canvas-warm:#E9E2D2; --panel:#FBF9F3;
  --deep:#0F2A36; --deep-2:#173D4E;
  --ink:#1D2426; --ink-soft:#55605C;
  --brand:#62CCE9; --brand-deep:#0E5C7A;
  --signal:#C43C17; --signal-deep:#9E2E10;
  --whisper:#DFD9C9; --line-strong:#8A8272; --asphalt:#33383A;
  /* κάθε scrim πάνω σε φωτογραφία βγαίνει από ΕΔΩ — ποτέ hardcoded navy */
  --shade-rgb:15 42 54;
  --veil:rgb(242 239 230 / .94);

  --font-display:"EB Garamond","EBG-fallback",Georgia,"Times New Roman",serif;
  --font-text:"Commissioner","CMS-fallback","Helvetica Neue",Arial,sans-serif;
  --font-mono:"JetBrains Mono","JBM-fallback",ui-monospace,SFMono-Regular,monospace;

  --ease:cubic-bezier(.16,1,.3,1);
  --ease-hover:cubic-bezier(.4,0,.2,1);
  --dur:620ms; --dur-hover:220ms; --dur-drawer:340ms;

  --r:4px;
  --wrap:min(1280px, 100% - 2.5rem);
  --wrap-narrow:min(920px, 100% - 2.5rem);

  --z-header:900; --z-backdrop:999; --z-drawer:1000; --z-float:1050; --z-cookie:1100;
  --z-pre:1200;
}

*,*::before,*::after{box-sizing:border-box}
html{-webkit-text-size-adjust:100%;scroll-behavior:smooth}
@media (prefers-reduced-motion:reduce){html{scroll-behavior:auto}}
body{
  margin:0;background:var(--canvas);color:var(--ink);
  font-family:var(--font-text);font-size:1.06rem;line-height:1.7;font-weight:400;
  -webkit-font-smoothing:antialiased;overflow-x:hidden;
}
img,video,svg{max-width:100%;display:block}
a{color:inherit;text-decoration:none}
button{font:inherit;color:inherit}
h1,h2,h3,h4{font-family:var(--font-display);font-weight:600;line-height:1.06;margin:0;text-wrap:balance;letter-spacing:-.025em}
p{margin:0 0 1em}
:focus-visible{outline:3px solid var(--brand-deep);outline-offset:3px;border-radius:2px}
::selection{background:var(--brand);color:var(--deep)}

.wrap{width:var(--wrap);margin-inline:auto}
.wrap-narrow{width:var(--wrap);margin-inline:auto}
.wrap-narrow>*{max-width:920px}
.sr-only{position:absolute;width:1px;height:1px;padding:0;margin:-1px;overflow:hidden;clip:rect(0 0 0 0);white-space:nowrap;border:0}
.skip-link{position:absolute;left:-9999px;top:0;z-index:2000;background:var(--deep);color:#fff;padding:12px 20px}
.skip-link:focus{left:8px;top:8px}

/* ---------- TYPE SCALE ---------- */
.h-hero{font-size:clamp(2.7rem,7.6vw,6.6rem);letter-spacing:-.04em;line-height:.98}
.h1{font-size:clamp(2.3rem,5vw,4.2rem);letter-spacing:-.035em}
.h2{font-size:clamp(1.95rem,4vw,3.35rem)}
.h3{font-size:clamp(1.25rem,2vw,1.6rem);letter-spacing:-.015em}
.lead{font-size:clamp(1.08rem,1.5vw,1.28rem);color:var(--ink-soft);line-height:1.65;max-width:40.45em}
.eyebrow{font-family:var(--font-text);font-size:.72rem;font-weight:800;letter-spacing:.16em;text-transform:uppercase;color:var(--brand-deep);display:flex;align-items:center;gap:.7em;margin:0 0 1.1rem}
.eyebrow::before{content:"";width:26px;height:2px;background:var(--brand);flex:none}
.on-deep .eyebrow,.hero .eyebrow,.page-head .eyebrow,.section-deep .eyebrow{color:var(--brand)}
.mono{font-family:var(--font-mono);font-variant-numeric:tabular-nums}
.num{font-family:var(--font-mono);font-variant-numeric:tabular-nums;letter-spacing:-.03em}

/* ---------- SECTION RHYTHM ---------- */
.section{padding-block:clamp(64px,9vw,136px)}
.section-tight{padding-block:clamp(52px,6vw,96px)}
.section-deep{background:var(--deep);color:#EAF3F6}
.section-deep h1,.section-deep h2,.section-deep h3{color:#fff}
.section-warm{background:var(--canvas-warm)}
.section-head{max-width:39.15em;margin-bottom:clamp(32px,4vw,56px)}
.section-head.split{max-width:none;display:grid;gap:24px;align-items:end}
@media(min-width:900px){.section-head.split{grid-template-columns:7fr 5fr;gap:56px}}

/* ---------- THE ROAD (signature) ---------- */
/* Η «λεωφόρος» ορίζεται πλέον ως SVG στο DNA v3 block παρακάτω. */
.lane{height:14px;background:var(--asphalt);position:relative;overflow:hidden}
.lane::before{content:"";position:absolute;top:0;bottom:0;left:0;width:200%;background:repeating-linear-gradient(90deg,var(--canvas) 0 44px,transparent 44px 96px);
  opacity:.85;will-change:transform;animation:lane-run 9s linear infinite}
@keyframes lane-run{to{transform:translate3d(-96px,0,0)}}

/* ---------- HEADER ---------- */
.header{position:fixed;top:0;left:0;right:0;z-index:var(--z-header);isolation:isolate;transition:background var(--dur-hover) var(--ease-hover),box-shadow var(--dur-hover)}
.header::before{content:"";position:absolute;inset:0;z-index:-1;pointer-events:none;background:linear-gradient(to bottom,rgb(var(--shade-rgb)/.62),rgb(var(--shade-rgb)/0));transition:opacity var(--dur-hover)}
.header.solid::before{opacity:0}
.header-in{width:var(--wrap);margin-inline:auto;display:flex;align-items:center;gap:20px;min-height:74px}
.header.solid{background:var(--veil);backdrop-filter:blur(10px);box-shadow:0 1px 0 var(--whisper)}
.brand{display:flex;align-items:center;flex:none}
.brand img{height:26px;width:auto}
@media(min-width:900px){.brand img{height:30px}}
.brand .logo-light{display:block}.brand .logo-dark{display:none}
.header.solid .brand .logo-light{display:none}.header.solid .brand .logo-dark{display:block}


.nav-desktop{display:none;margin-inline:auto;gap:30px}
@media(min-width:1000px){.nav-desktop{display:flex}}
.nav-desktop a{font-size:.94rem;font-weight:600;color:#fff;position:relative;padding-block:6px;transition:color var(--dur-hover)}
.header.solid .nav-desktop a{color:var(--ink)}
.nav-desktop a::after{content:"";position:absolute;left:0;right:0;bottom:0;height:2px;background:var(--brand);transform:scaleX(0);transform-origin:left;transition:transform var(--dur-hover) var(--ease-hover)}
.nav-desktop a:hover::after,.nav-desktop a[aria-current]::after{transform:scaleX(1)}
.header-actions{display:flex;align-items:center;gap:10px;margin-left:auto}
.lang{display:flex;gap:2px;font-family:var(--font-mono);font-size:.76rem;font-weight:600}
.lang a{padding:11px 10px;color:#fff;opacity:1;letter-spacing:.04em;min-height:44px;display:inline-flex;align-items:center}
.header:not(.solid) .lang a:not([aria-current]){color:rgba(255,255,255,.8)}
.header.solid .lang a{color:var(--ink)}
.lang a[aria-current]{opacity:1;color:var(--brand-deep)!important;background:rgba(98,204,233,.16);border-radius:2px}
.menu-toggle{display:inline-flex;flex-direction:column;justify-content:center;gap:5px;width:44px;height:44px;padding:0 10px;background:none;border:0;cursor:pointer;order:-1}
@media(min-width:1000px){.menu-toggle{display:none}}
.menu-toggle span{display:block;height:2px;background:#fff;transition:background var(--dur-hover)}
.header.solid .menu-toggle span{background:var(--ink)}
.menu-toggle span:nth-child(2){width:70%}

/* buttons */
.btn{display:inline-flex;align-items:center;justify-content:center;gap:.55em;padding:14px 24px;border-radius:var(--r);border:0;cursor:pointer;
  font-family:var(--font-text);font-weight:700;font-size:.95rem;letter-spacing:.01em;line-height:1;text-align:center;
  transition:transform var(--dur-hover) var(--ease-hover),background var(--dur-hover),color var(--dur-hover),box-shadow var(--dur-hover);min-height:48px}
.btn:hover{transform:translateY(-2px)}
.btn:active{transform:translateY(0)}
.btn-signal{background:var(--signal);color:#fff}
.btn-signal:hover{background:var(--signal-deep);color:#fff}
.btn-deep{background:var(--deep);color:#fff}
.btn-deep:hover{background:var(--deep-2)}
.btn-ghost{background:transparent;color:var(--ink);box-shadow:inset 0 0 0 1.5px var(--line-strong)}
.btn-ghost:hover{box-shadow:inset 0 0 0 1.5px var(--brand-deep);color:var(--brand-deep)}
.on-deep .btn-ghost{color:#fff;box-shadow:inset 0 0 0 1.5px rgba(255,255,255,.28)}
.on-deep .btn-ghost:hover{box-shadow:inset 0 0 0 1.5px var(--brand);color:var(--brand)}
.btn-sm{padding:10px 16px;min-height:42px;font-size:.86rem}
.btn-phone{background:rgba(255,255,255,.12);color:#fff;box-shadow:inset 0 0 0 1px rgba(255,255,255,.3);font-family:var(--font-mono);font-weight:600}
.header.solid .btn-phone{background:var(--signal);color:#fff;box-shadow:none}

/* ---------- MOBILE DRAWER ---------- */
.nav-mobile{position:fixed;top:0;left:0;bottom:0;z-index:var(--z-drawer);width:clamp(260px,62vw,340px);
  transform:translateX(-105%);visibility:hidden;display:flex;flex-direction:column;
  padding:calc(22px + env(safe-area-inset-top)) 24px calc(24px + env(safe-area-inset-bottom));
  background:var(--deep);color:#fff;box-shadow:0 0 60px rgba(0,0,0,.3);overflow-y:auto;
  transition:transform var(--dur-drawer) var(--ease),visibility 0s linear var(--dur-drawer)}
.nav-mobile.open{transform:none;visibility:visible;transition:transform var(--dur-drawer) var(--ease)}
.nav-mobile .drawer-logo{height:24px;width:auto;margin-bottom:26px}
.nav-mobile a.drawer-link{display:flex;align-items:center;min-height:50px;font-family:var(--font-display);font-size:1.35rem;font-weight:600;
  color:#fff;border-bottom:1px solid rgba(255,255,255,.1);transition:color var(--dur-hover),transform var(--dur-hover) var(--ease-hover)}
.nav-mobile a.drawer-link:hover{color:var(--brand);transform:translateX(6px)}
.drawer-foot{margin-top:auto;padding-top:26px;display:grid;gap:10px}
.drawer-foot .mono{font-size:.8rem;color:var(--brand);letter-spacing:.06em}
.nav-mobile .btn-ghost{color:#fff;box-shadow:inset 0 0 0 1.5px rgba(255,255,255,.34)}
.nav-mobile .btn-ghost:hover{color:var(--brand);box-shadow:inset 0 0 0 1.5px var(--brand)}
.nav-backdrop{position:fixed;inset:0;z-index:var(--z-backdrop);background:rgb(var(--shade-rgb)/.55);backdrop-filter:blur(7px) saturate(.85);-webkit-backdrop-filter:blur(7px) saturate(.85);opacity:0;pointer-events:none;transition:opacity .3s}
.nav-backdrop.show{opacity:1;pointer-events:auto}
body.nav-open{overflow:hidden}
@media (prefers-reduced-motion:reduce){.nav-mobile,.nav-backdrop{transition:none}}

/* ---------- HERO ---------- */
.hero{position:relative;min-height:100svh;display:flex;flex-direction:column;justify-content:flex-end;background:var(--deep);overflow:hidden}
.hero-media{position:absolute;inset:0}
.hero-media img,.hero-media video{width:100%;height:100%;object-fit:cover}
.hero-media::after{content:"";position:absolute;inset:0;
  background:linear-gradient(100deg,rgb(var(--shade-rgb)/.9) 0%,rgb(var(--shade-rgb)/.62) 42%,rgb(var(--shade-rgb)/.2) 78%),
             linear-gradient(to top,rgb(var(--shade-rgb)/.92) 0%,rgb(var(--shade-rgb)/0) 46%)}
.grain{position:absolute;inset:0;pointer-events:none;opacity:.045;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='.85' numOctaves='3'/%3E%3C/filter%3E%3Crect width='160' height='160' filter='url(%23n)'/%3E%3C/svg%3E")}
.hero-in{position:relative;width:var(--wrap);margin-inline:auto;padding-top:120px;padding-bottom:36px;color:#fff}
@media(min-width:900px){.hero-in{padding-bottom:56px}}
.hero h1{color:#fff}
.hero .line{display:block;overflow:hidden}
.hero .line>span{display:block;transform:translateY(110%);animation:line-up var(--dur) var(--ease) forwards}
.hero .line:nth-child(1)>span{animation-delay:.10s}
.hero .line:nth-child(2)>span{animation-delay:.18s}
.hero .line:nth-child(3)>span{animation-delay:.26s}
@keyframes line-up{to{transform:translateY(0)}}
.hero-sub{max-width:30.02em;color:rgba(255,255,255,.82);margin-top:22px;font-size:clamp(1rem,1.4vw,1.16rem);opacity:0;animation:fade-in var(--dur) var(--ease) .42s forwards}
@keyframes fade-in{to{opacity:1}}
.hero-from{display:inline-flex;align-items:baseline;gap:.4em;margin-top:20px;padding:8px 14px;border-radius:999px;background:rgba(255,255,255,.1);
  box-shadow:inset 0 0 0 1px rgba(255,255,255,.2);font-size:.86rem;opacity:0;animation:fade-in var(--dur) var(--ease) .5s forwards}
.hero-from b{font-family:var(--font-mono);color:var(--brand);font-size:1.05rem}
.hero-scroll{position:absolute;right:calc((100vw - var(--wrap))/2);bottom:40px;display:none;writing-mode:vertical-rl;
  font-size:.68rem;letter-spacing:.2em;text-transform:uppercase;color:rgba(255,255,255,.6)}
@media(min-width:1100px){.hero-scroll{display:block}}
@media (prefers-reduced-motion:reduce){
  .hero .line>span{transform:none;animation:none}
  .hero-sub,.hero-from{opacity:1;animation:none}
  .lane::before{animation:none}
}

/* ---------- BOOKING CONSOLE ---------- */
.console-wrap{position:relative;z-index:2;margin-top:-1px}
.console{background:var(--deep-2);color:#fff;box-shadow:0 24px 48px -24px rgb(var(--shade-rgb)/.45)}
.console-in{width:var(--wrap);margin-inline:auto;padding:22px 0 24px}
.console-title{display:flex;align-items:center;gap:10px;font-size:.72rem;font-weight:800;letter-spacing:.16em;text-transform:uppercase;color:var(--brand);margin-bottom:14px}
.console-grid{display:grid;gap:12px}
@media(min-width:760px){.console-grid{grid-template-columns:repeat(2,1fr)}}
@media(min-width:1080px){.console-grid{grid-template-columns:1.2fr 1.2fr 1fr 1fr auto;align-items:end}}
.field{display:flex;flex-direction:column;gap:6px}
.field label{font-size:.7rem;font-weight:800;letter-spacing:.12em;text-transform:uppercase;color:rgba(255,255,255,.62)}
.field select,.field input{text-overflow:ellipsis;font-family:var(--font-text);font-size:16px;font-weight:600;color:#fff;background:rgba(255,255,255,.07);
  border:1px solid rgba(255,255,255,.18);border-radius:var(--r);padding:12px 13px;min-height:50px;width:100%;
  transition:border-color var(--dur-hover),background var(--dur-hover);appearance:none}
.field select{background-image:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='12' height='8' fill='none' stroke='%2362CCE9' stroke-width='1.8'%3E%3Cpath d='M1 1l5 5 5-5'/%3E%3C/svg%3E");background-repeat:no-repeat;background-position:right 13px center;padding-right:34px}
.field input::-webkit-calendar-picker-indicator{filter:invert(1) sepia(1) saturate(3) hue-rotate(150deg);cursor:pointer}
.field select:focus,.field input:focus{border-color:var(--brand);background:rgba(255,255,255,.12)}
.field select:focus-visible,.field input:focus-visible{outline:3px solid var(--brand);outline-offset:2px}
.field select option{color:var(--ink);background:var(--panel)}
.console .btn{width:100%}
@media(min-width:1080px){.console .btn{width:auto;padding-inline:30px}}
.console-note{display:flex;flex-wrap:wrap;gap:8px 20px;margin-top:16px;font-size:.8rem;color:rgba(255,255,255,.65)}
.console-note span{display:flex;align-items:center;gap:7px}
.console-note svg{flex:none;color:var(--brand)}

/* ---------- CARDS / FLEET ---------- */
.filters{display:flex;flex-wrap:wrap;gap:8px;margin-bottom:28px}
.filters button{padding:10px 16px;border-radius:999px;border:1.5px solid var(--line-strong);background:transparent;cursor:pointer;
  font-size:.85rem;font-weight:700;color:var(--ink-soft);min-height:44px;
  transition:background var(--dur-hover) var(--ease-hover),border-color var(--dur-hover),color var(--dur-hover)}
.filters button:hover{border-color:var(--brand-deep);color:var(--brand-deep)}
.filters button[aria-pressed="true"]{background:var(--deep);border-color:var(--deep);color:#fff}

.grid-fleet{display:grid;gap:20px}
@media(min-width:640px){.grid-fleet{grid-template-columns:repeat(2,1fr)}}
@media(min-width:1040px){.grid-fleet{grid-template-columns:repeat(3,1fr);gap:24px}}
.card{position:relative;background:var(--panel);border-radius:var(--r);overflow:hidden;box-shadow:0 0 0 1px var(--whisper);
  display:flex;flex-direction:column;transition:box-shadow var(--dur-hover) var(--ease-hover),transform var(--dur-hover) var(--ease-hover)}
.card:hover{box-shadow:0 0 0 1px var(--brand),0 18px 32px -20px rgb(var(--shade-rgb)/.4);transform:translateY(-3px)}
.card-media{position:relative;aspect-ratio:3/2;overflow:hidden;background:var(--whisper)}
.card-media img{width:100%;height:100%;object-fit:cover;transition:transform 700ms var(--ease)}
.card:hover .card-media img{transform:scale(1.035)}
.card-tag{position:absolute;top:12px;left:12px;background:rgb(var(--shade-rgb)/.85);color:#fff;font-size:.68rem;font-weight:800;
  letter-spacing:.1em;text-transform:uppercase;padding:6px 10px;border-radius:2px;backdrop-filter:blur(4px)}
.card-code{position:absolute;top:12px;right:12px;font-family:var(--font-mono);font-size:.72rem;font-weight:600;color:var(--deep);
  background:var(--brand);padding:6px 9px;border-radius:2px}
.card-body{padding:20px 20px 22px;display:flex;flex-direction:column;flex:1;gap:12px}
.card-class{font-size:.7rem;font-weight:800;letter-spacing:.14em;text-transform:uppercase;color:var(--brand-deep)}
.card h3{font-size:1.16rem;line-height:1.25;letter-spacing:-.01em}
.card p{font-size:.92rem;color:var(--ink-soft);margin:0;line-height:1.55}
.specs{display:flex;flex-wrap:wrap;gap:6px;margin-top:auto;padding-top:4px}
.spec{display:inline-flex;align-items:center;gap:5px;font-size:.76rem;font-weight:600;color:var(--ink-soft);
  background:var(--canvas);border-radius:2px;padding:5px 8px}
.spec svg{flex:none;color:var(--brand-deep)}
.card-foot{display:flex;align-items:flex-end;justify-content:space-between;gap:12px;border-top:1px solid var(--whisper);padding-top:14px;margin-top:2px}
.price{display:flex;flex-direction:column;line-height:1.15}
.price small{font-size:.68rem;font-weight:800;letter-spacing:.1em;text-transform:uppercase;color:var(--ink-soft)}
.price b{font-family:var(--font-mono);font-size:1.6rem;font-weight:600;color:var(--deep);letter-spacing:-.04em}
.price b i{font-style:normal;font-size:.9rem;color:var(--ink-soft)}
.card-link{font-size:.86rem;font-weight:700;color:var(--brand-deep);display:inline-flex;align-items:center;gap:6px;white-space:nowrap;padding-block:8px}
.card-link svg{transition:transform var(--dur-hover) var(--ease-hover)}
.card:hover .card-link svg{transform:translateX(4px)}
.card-hit{position:absolute;inset:0;z-index:1}

/* ---------- STOPS (σημεία) ---------- */
.stops{display:grid;gap:0;position:relative}
.stop{position:relative;display:grid;gap:6px 22px;padding:26px 0 26px 54px;border-top:1px solid var(--whisper)}
.stop:last-child{border-bottom:1px solid var(--whisper)}
@media(min-width:860px){.stop{grid-template-columns:1fr 1.25fr;align-items:start;padding-left:76px;padding-block:34px}}
.stop::before{content:"";position:absolute;left:15px;top:0;bottom:0;width:2px;
  background:repeating-linear-gradient(to bottom,var(--whisper) 0 8px,transparent 8px 18px)}
@media(min-width:860px){.stop::before{left:26px}}
.stop:first-child::before{top:34px}
.stop:last-child::before{bottom:auto;height:34px}
.stop-num{position:absolute;left:5px;top:26px;width:22px;height:22px;border-radius:50%;background:var(--brand);color:var(--deep);
  font-family:var(--font-mono);font-size:.66rem;font-weight:600;display:grid;place-items:center;box-shadow:0 0 0 5px var(--canvas)}
@media(min-width:860px){.stop-num{left:16px;top:36px}}
.stop h3{font-size:clamp(1.2rem,2vw,1.55rem)}
.stop-meta{font-family:var(--font-mono);font-size:.76rem;color:var(--brand-deep);letter-spacing:.03em;margin-top:6px}
.stop p{color:var(--ink-soft);font-size:.96rem;margin:0}
.section-deep .stop{border-color:rgba(255,255,255,.12)}
.section-deep .stop::before{background:repeating-linear-gradient(to bottom,rgba(255,255,255,.2) 0 8px,transparent 8px 18px)}
.section-deep .stop-num{box-shadow:0 0 0 5px var(--deep)}
.section-deep .stop p{color:rgba(234,243,246,.72)}

/* ---------- STEPS ---------- */
.steps{display:grid;gap:18px;counter-reset:s}
@media(min-width:860px){.steps{grid-template-columns:repeat(3,1fr);gap:24px}}
.step{position:relative;padding:26px 22px 24px;background:var(--panel);border-radius:var(--r);box-shadow:0 0 0 1px var(--whisper)}
.step::before{counter-increment:s;content:"0" counter(s);position:absolute;top:-16px;left:20px;font-family:var(--font-mono);
  font-size:2.4rem;font-weight:600;color:var(--brand);letter-spacing:-.06em;line-height:1}
.step h3{font-size:1.1rem;margin:16px 0 8px}
.step p{font-size:.93rem;color:var(--ink-soft);margin:0}

/* ---------- WHY (offset 7/5) ---------- */
.why{display:grid;gap:36px}
@media(min-width:960px){.why{grid-template-columns:5fr 7fr;gap:64px;align-items:start}}
.why-list{display:grid;gap:2px}
.why-item{display:grid;gap:6px;padding:22px 0;border-top:1px solid rgba(255,255,255,.14)}
@media(min-width:700px){.why-item{grid-template-columns:auto 1fr;gap:26px;align-items:baseline}}
.why-item .k{font-family:var(--font-mono);font-size:.74rem;color:var(--brand);letter-spacing:.08em;white-space:nowrap}
.why-item h3{font-size:1.12rem;margin-bottom:5px}
.why-item p{margin:0;font-size:.95rem;color:rgba(234,243,246,.74)}

/* ---------- DESTINATIONS ---------- */
.dest-row{display:grid;grid-auto-flow:column;grid-auto-columns:78%;gap:16px;overflow-x:auto;scroll-snap-type:x mandatory;
  padding-bottom:14px;margin-inline:calc((100% - var(--wrap))/2 * -1);padding-inline:calc((100% - var(--wrap))/2);scrollbar-width:thin}
.dest-row>*{scroll-snap-align:start}
@media(min-width:640px){.dest-row{grid-auto-columns:44%}}
@media(min-width:1040px){.dest-row{grid-auto-flow:row;grid-template-columns:repeat(4,1fr);overflow:visible;gap:22px;margin-inline:0;padding-inline:0}}
.dest{position:relative;display:block;border-radius:var(--r);overflow:hidden;aspect-ratio:3/4;background:var(--deep);isolation:isolate}
@media(min-width:1040px){.dest{aspect-ratio:3/4}}
.dest img{position:absolute;inset:0;width:100%;height:100%;object-fit:cover;transition:transform 800ms var(--ease)}
.dest:hover img{transform:scale(1.06)}
.dest::after{content:"";position:absolute;inset:0;background:linear-gradient(to top,rgb(var(--shade-rgb)/.92) 6%,rgb(var(--shade-rgb)/.25) 48%,rgb(var(--shade-rgb)/.05) 100%)}
.dest-body{position:absolute;left:0;right:0;bottom:0;padding:20px;color:#fff;z-index:1}
.dest-body h3{font-size:1.3rem;color:#fff}
.dest-km{display:flex;gap:14px;font-family:var(--font-mono);font-size:.74rem;color:var(--brand);margin-top:8px;letter-spacing:.03em}
.dest-lead{font-size:.88rem;color:rgba(255,255,255,.78);margin:8px 0 0;line-height:1.5;display:-webkit-box;-webkit-line-clamp:2;-webkit-box-orient:vertical;overflow:hidden}
.swipe-hint{font-size:.76rem;color:var(--ink-soft);margin-top:10px;display:flex;align-items:center;gap:6px}
@media(min-width:1040px){.swipe-hint{display:none}}

/* ---------- PRICE TABLE ---------- */
.table-scroll{overflow-x:auto;-webkit-overflow-scrolling:touch;border-radius:var(--r);box-shadow:0 0 0 1px var(--whisper)}
table.prices{width:100%;border-collapse:collapse;background:var(--panel);min-width:560px;font-size:.94rem}
table.prices th,table.prices td{padding:14px 16px;text-align:left;border-bottom:1px solid var(--whisper)}
table.prices thead th{background:var(--deep);color:#fff;font-size:.7rem;font-weight:800;letter-spacing:.12em;text-transform:uppercase;white-space:nowrap}
table.prices thead th small{display:block;font-weight:500;letter-spacing:.02em;text-transform:none;color:rgba(255,255,255,.6);font-size:.72rem;margin-top:3px}
table.prices tbody tr:last-child td{border-bottom:0}
table.prices tbody tr:hover{background:var(--canvas)}
table.prices td.name{font-weight:700}
table.prices td.name small{display:block;font-weight:500;color:var(--ink-soft);font-size:.8rem}
table.prices td.p{font-family:var(--font-mono);font-variant-numeric:tabular-nums;font-weight:600;white-space:nowrap}
table.prices td.p.hi{color:var(--deep)}
.table-note{font-size:.82rem;color:var(--ink-soft);margin-top:12px}

/* ---------- FAQ ---------- */
.faq{border-top:1px solid var(--whisper)}
.faq details{border-bottom:1px solid var(--whisper)}
.faq summary{cursor:pointer;list-style:none;padding:20px 44px 20px 0;position:relative;font-family:var(--font-display);
  font-size:clamp(1.02rem,1.6vw,1.2rem);font-weight:600;line-height:1.35;transition:color var(--dur-hover)}
.faq summary::-webkit-details-marker{display:none}
.faq summary:hover{color:var(--brand-deep)}
.faq summary::after{content:"";position:absolute;right:8px;top:50%;width:12px;height:12px;margin-top:-8px;
  border-right:2px solid var(--brand-deep);border-bottom:2px solid var(--brand-deep);transform:rotate(45deg);transition:transform var(--dur-hover) var(--ease-hover)}
.faq details[open] summary::after{transform:rotate(-135deg);margin-top:-3px}
.faq .answer{padding:0 0 22px;color:var(--ink-soft);font-size:.98rem;max-width:46.98em}
.faq .answer p:last-child{margin-bottom:0}

/* ---------- REVEALS ---------- */
.rv{opacity:0;transform:translateY(22px)}
.rv.in{opacity:1;transform:none;transition:opacity var(--dur) var(--ease),transform var(--dur) var(--ease)}
.rv-clip{clip-path:inset(14% 0 0 0);opacity:0}
.rv-clip.in{clip-path:inset(0 0 0 0);opacity:1;transition:clip-path 900ms var(--ease),opacity 700ms var(--ease)}
@supports (animation-timeline:view()){
  @media (prefers-reduced-motion:no-preference){
    .rv{opacity:1;transform:none;animation:rv-in linear both;animation-timeline:view();animation-range:entry 8% cover 26%}
    @keyframes rv-in{from{opacity:0;transform:translateY(22px)}to{opacity:1;transform:none}}
    .rv-clip{opacity:1;animation:rv-clip-in linear both;animation-timeline:view();animation-range:entry 6% cover 30%}
    @keyframes rv-clip-in{from{clip-path:inset(14% 0 0 0);opacity:0}to{clip-path:inset(0 0 0 0);opacity:1}}
  }
}
@media (prefers-reduced-motion:reduce){.rv,.rv-clip{opacity:1!important;transform:none!important;clip-path:none!important;animation:none!important}}

/* ---------- CTA BAND ---------- */
.cta-band{background:var(--deep-2);color:#fff;position:relative;overflow:hidden}
.cta-in{width:var(--wrap);margin-inline:auto;padding:clamp(56px,7vw,96px) 0;display:grid;gap:26px;position:relative;z-index:1}
@media(min-width:900px){.cta-in{grid-template-columns:1.4fr 1fr;align-items:center;gap:56px}}
.cta-band h2{color:#fff}
.cta-actions{display:flex;flex-wrap:wrap;gap:12px}
@media(min-width:900px){.cta-actions{justify-content:flex-end}}

/* ---------- FOOTER ---------- */
.footer{background:var(--deep);color:rgba(234,243,246,.72);padding-top:clamp(48px,6vw,80px)}
.footer-grid{display:grid;gap:34px;padding-bottom:44px}
@media(min-width:760px){.footer-grid{grid-template-columns:1.4fr 1fr 1fr}}
@media(min-width:1040px){.footer-grid{grid-template-columns:1.6fr 1fr 1fr 1fr;gap:44px}}
.footer h4,.footer-head{font-family:var(--font-text);font-size:.72rem;font-weight:800;letter-spacing:.14em;text-transform:uppercase;color:var(--brand);margin:0 0 14px}
.footer a{transition:color var(--dur-hover)}
.footer a:hover{color:var(--brand)}
.footer ul{list-style:none;margin:0;padding:0;display:grid;gap:2px;font-size:.93rem}
.footer ul a{display:inline-flex;align-items:center;min-height:40px}
.footer-bar a{display:inline-flex;align-items:center;min-height:40px}
.footer .f-logo{height:30px;width:auto;margin-bottom:16px}
.footer p{font-size:.92rem;line-height:1.6}
.f-contact{display:grid;gap:8px;font-size:.95rem}
.f-contact a{display:inline-flex;align-items:center;gap:9px}
.f-contact svg{color:var(--brand);flex:none}
.footer-bar{border-top:1px solid rgba(255,255,255,.1);padding:20px 0 calc(22px + env(safe-area-inset-bottom));
  display:flex;flex-wrap:wrap;gap:10px 20px;justify-content:space-between;font-size:.8rem}
.footer-bar a{color:rgba(234,243,246,.6)}
.credit{font-size:11px;color:rgba(234,243,246,.64)}
.credit a{color:rgba(234,243,246,.62)}

/* ---------- FLOATS ---------- */
.float-wa{position:fixed;right:16px;bottom:calc(16px + env(safe-area-inset-bottom));z-index:var(--z-float);
  width:54px;height:54px;border-radius:50%;background:#25D366;display:grid;place-items:center;color:#fff;
  box-shadow:0 8px 24px -6px rgba(0,0,0,.4);transition:transform var(--dur-hover) var(--ease-hover)}
.float-wa:hover{transform:scale(1.07)}
.to-top{position:fixed;left:16px;bottom:calc(16px + env(safe-area-inset-bottom));z-index:var(--z-float);
  width:44px;height:44px;border-radius:50%;background:var(--deep);color:#fff;border:0;cursor:pointer;display:grid;place-items:center;
  opacity:0;pointer-events:none;transform:translateY(8px);transition:opacity .3s,transform .3s var(--ease)}
.to-top.show{opacity:.92;pointer-events:auto;transform:none}
@media(min-width:1100px){.to-top{left:auto;right:16px;bottom:calc(82px + env(safe-area-inset-bottom))}}

/* ---------- PAGE HEADER (inner pages) ---------- */
.page-head{background:var(--deep);color:#fff;padding-top:120px;padding-bottom:clamp(44px,5vw,72px);position:relative;overflow:hidden}
.page-head.has-media{padding-top:150px;padding-bottom:clamp(52px,6vw,88px)}
.page-head-media{position:absolute;inset:0}
.page-head-media img{width:100%;height:100%;object-fit:cover}
.page-head-media::after{content:"";position:absolute;inset:0;background:linear-gradient(90deg,rgb(var(--shade-rgb)/.92),rgb(var(--shade-rgb)/.55) 65%,rgb(var(--shade-rgb)/.3))}
.page-head-in{position:relative;width:var(--wrap);margin-inline:auto}
.page-head h1{color:#fff;max-width:8.64em}
.page-head .lead{color:rgba(255,255,255,.78);margin-top:18px}
.crumbs{display:flex;flex-wrap:wrap;gap:8px;font-size:.78rem;color:rgba(255,255,255,.62);margin-bottom:18px;font-family:var(--font-mono)}
.crumbs a:hover{color:var(--brand)}
.crumbs span{opacity:.5}

/* ---------- VEHICLE DETAIL ---------- */
.veh{display:grid;gap:34px}
@media(min-width:980px){.veh{grid-template-columns:7fr 5fr;gap:56px;align-items:start}}
.veh-side{position:sticky;top:96px;display:grid;gap:16px;background:var(--panel);border-radius:var(--r);box-shadow:0 0 0 1px var(--whisper);padding:24px}
@media(max-width:979px){.veh-side{position:static}}
.veh-price{display:flex;align-items:baseline;gap:8px;border-bottom:1px solid var(--whisper);padding-bottom:14px}
.veh-price b{font-family:var(--font-mono);font-size:2.4rem;font-weight:600;color:var(--deep);letter-spacing:-.05em;line-height:1}
.veh-price span{font-size:.88rem;color:var(--ink-soft)}
.spec-grid{display:grid;grid-template-columns:repeat(2,1fr);gap:1px;background:var(--whisper);border-radius:var(--r);overflow:hidden}
@media(min-width:560px){.spec-grid{grid-template-columns:repeat(3,1fr)}}
.spec-grid div{background:var(--panel);padding:16px 14px;display:grid;gap:4px}
.spec-grid dt,.spec-grid .l{font-size:.68rem;font-weight:800;letter-spacing:.1em;text-transform:uppercase;color:var(--ink-soft)}
.spec-grid dd,.spec-grid .v{margin:0;font-weight:700;font-size:1rem;display:flex;align-items:center;gap:7px}
.spec-grid .v svg{color:var(--brand-deep);flex:none}
.incl{list-style:none;margin:0;padding:0;display:grid;gap:11px}
.incl li{display:flex;gap:11px;align-items:flex-start;font-size:.95rem}
.incl svg{color:var(--brand-deep);flex:none;margin-top:4px}
.veh-media{border-radius:var(--r);overflow:hidden;box-shadow:0 0 0 1px var(--whisper);background:var(--whisper);aspect-ratio:3/2}
.veh-media img{width:100%;height:100%;object-fit:cover}

/* ---------- FORMS (booking / contact) ---------- */
.form-card{background:var(--panel);border-radius:var(--r);box-shadow:0 0 0 1px var(--whisper);padding:clamp(22px,3vw,36px)}
.form-grid{display:grid;gap:16px}
@media(min-width:700px){.form-grid.two{grid-template-columns:repeat(2,1fr)}}
.f{display:flex;flex-direction:column;gap:7px}
.f label{font-size:.72rem;font-weight:800;letter-spacing:.11em;text-transform:uppercase;color:var(--ink-soft)}
.f input,.f select,.f textarea{font-family:var(--font-text);font-size:16px;padding:13px 14px;border:1.5px solid var(--line-strong);
  border-radius:var(--r);background:var(--canvas);min-height:50px;width:100%;transition:border-color var(--dur-hover),background var(--dur-hover)}
.f textarea{min-height:130px;resize:vertical;line-height:1.6}
.f input:focus,.f select:focus,.f textarea:focus{border-color:var(--brand-deep);background:var(--panel)}
.f :focus-visible{outline:3px solid var(--brand-deep);outline-offset:2px}
.console :focus-visible,.section-deep :focus-visible,.nav-mobile :focus-visible,.cta-band :focus-visible,.footer :focus-visible,.page-head :focus-visible,.hero :focus-visible{outline:3px solid var(--brand)}
.f input.is-error,.f select.is-error,.f textarea.is-error{border-color:#9A3412;border-width:2px}
.form-err{display:flex;gap:8px;align-items:center;color:#9A3412;font-weight:700}
.f .hint{font-size:.78rem;color:var(--ink-soft)}
.f-check{display:flex;gap:11px;align-items:flex-start;font-size:.88rem;color:var(--ink-soft)}
.f-check input{width:20px;height:20px;min-height:0;flex:none;margin-top:2px;accent-color:var(--brand-deep)}
.steps-bar{display:flex;gap:0;margin-bottom:26px;border-bottom:1px solid var(--whisper);flex-wrap:wrap}
.steps-bar div{display:flex;align-items:center;gap:9px;padding:12px 18px 14px;font-size:.85rem;font-weight:700;color:var(--ink-soft);border-bottom:2px solid transparent;margin-bottom:-1px}
.steps-bar div.on{color:var(--deep);border-color:var(--brand)}
.steps-bar b{font-family:var(--font-mono);font-size:.75rem;width:22px;height:22px;border-radius:50%;background:var(--whisper);color:var(--deep);display:grid;place-items:center}
.steps-bar div.on b{background:var(--brand)}

/* ---------- PROSE (legal / terms) ---------- */
.prose{max-width:48.28em}
.prose h2{font-size:clamp(1.5rem,2.6vw,2.1rem);margin:44px 0 14px}
.prose h3{font-size:1.15rem;margin:30px 0 10px}
.prose ul,.prose ol{padding-left:1.3em;margin:0 0 1.2em}
.prose li{margin-bottom:.5em}
.prose>:first-child{margin-top:0}

/* ---------- MISC ---------- */
.chips{display:flex;flex-wrap:wrap;gap:8px;margin-top:18px}
.chip{display:inline-flex;align-items:center;gap:7px;font-size:.8rem;font-weight:600;padding:8px 13px;border-radius:999px;
  background:var(--panel);box-shadow:0 0 0 1px var(--whisper);color:var(--ink-soft)}
.chip svg{color:var(--brand-deep);flex:none}
.on-deep .chip{background:rgba(255,255,255,.08);box-shadow:0 0 0 1px rgba(255,255,255,.16);color:rgba(255,255,255,.85)}
.on-deep .chip svg{color:var(--brand)}
.pill-note{display:inline-flex;align-items:center;gap:8px;font-size:.8rem;color:var(--ink-soft);background:var(--canvas-warm);
  box-shadow:0 0 0 1px var(--whisper);padding:9px 14px;border-radius:999px}
.big-num{font-family:var(--font-mono);font-size:clamp(3.4rem,9vw,7rem);font-weight:600;line-height:.85;letter-spacing:-.06em;color:var(--whisper)}
.related{display:grid;gap:16px}
@media(min-width:700px){.related{grid-template-columns:repeat(auto-fit,minmax(260px,1fr))}}

/* ---------- MOBILE: fleet as swipe row on the homepage (anti-endless-scroll) ---------- */
@media(max-width:639px){
  .grid-fleet.swipe-m{grid-auto-flow:column;grid-auto-columns:80%;overflow-x:auto;scroll-snap-type:x mandatory;
    padding-bottom:14px;margin-inline:calc((100% - var(--wrap))/2 * -1);padding-inline:calc((100% - var(--wrap))/2);scrollbar-width:thin}
  .grid-fleet.swipe-m>*{scroll-snap-align:start}
  .grid-fleet.swipe-m .card p{display:-webkit-box;-webkit-line-clamp:3;-webkit-box-orient:vertical;overflow:hidden}
}

/* hidden must win over display utilities */
[hidden]{display:none!important}

/* ---------- MOBILE POLISH ---------- */
@media(max-width:640px){
  .hero{min-height:86svh}                       /* η κονσόλα ξεμυτίζει — CTA ορατό χωρίς scroll */
  .btn-phone span{position:absolute;width:1px;height:1px;overflow:hidden;clip:rect(0 0 0 0);white-space:nowrap}
  .btn-phone{width:44px;padding:0;min-height:44px}
  .header-in{gap:8px}
  .price b{white-space:nowrap}
  .card-foot{gap:8px}
}
@media(max-width:400px){
  .lang a{padding:5px 5px}
}
.price b{white-space:nowrap}

/* ---------- MOTION VARIETY (όχι ένα fade-up παντού) ---------- */
.rv-left{opacity:0;transform:translateX(-26px)}
.rv-left.in{opacity:1;transform:none;transition:opacity var(--dur) var(--ease),transform var(--dur) var(--ease)}
.rv-scale{opacity:0;transform:scale(.965)}
.rv-scale.in{opacity:1;transform:none;transition:opacity var(--dur) var(--ease),transform 780ms var(--ease)}
.grid-fleet>.rv-clip:nth-child(3n+2),.dest-row>.rv-scale:nth-child(3n+2){transition-delay:70ms;animation-delay:70ms}
.grid-fleet>.rv-clip:nth-child(3n+3),.dest-row>.rv-scale:nth-child(3n+3){transition-delay:140ms;animation-delay:140ms}
.stops>.rv-left:nth-child(2){transition-delay:80ms;animation-delay:80ms}
.stops>.rv-left:nth-child(3){transition-delay:160ms;animation-delay:160ms}
@supports (animation-timeline:view()){
  @media (prefers-reduced-motion:no-preference){
    .rv-left{opacity:1;transform:none;animation:rv-left-in linear both;animation-timeline:view();animation-range:entry 8% cover 26%}
    @keyframes rv-left-in{from{opacity:0;transform:translateX(-26px)}to{opacity:1;transform:none}}
    .rv-scale{opacity:1;transform:none;animation:rv-scale-in linear both;animation-timeline:view();animation-range:entry 6% cover 28%}
    @keyframes rv-scale-in{from{opacity:0;transform:scale(.965)}to{opacity:1;transform:none}}
  }
}
@media (prefers-reduced-motion:reduce){.rv-left,.rv-scale{opacity:1!important;transform:none!important;animation:none!important}}
html.no-js .rv,html.no-js .rv-clip,html.no-js .rv-left,html.no-js .rv-scale{opacity:1!important;transform:none!important;clip-path:none!important;animation:none!important}

/* ---------- MOBILE: η τιμή της κατηγορίας ανεβαίνει πάνω ---------- */
@media(max-width:979px){
  .veh{display:flex;flex-direction:column}
  .veh-side{order:-1}
  .steps-bar{gap:0}
  .steps-bar div{padding:11px 13px 12px;font-size:.8rem}
}
main:focus{outline:none}

/* ============================================================================
   DNA v3 — «Λευκός Πύργος στις 07:00»
   Προστέθηκε στο v2 pass: τυπογραφία EB Garamond/Commissioner, κεντραρισμένο hero,
   κυριαρχία τιμής, χρηστικός τιμοκατάλογος σε κινητό, preloader, drawer με
   κουμπί επιστροφής, και το signature «Η λεωφόρος».
   ============================================================================ */

/* ---------- ΤΥΠΟΓΡΑΦΙΑ: το Garamond θέλει αέρα, ο μικρός τίτλος θέλει sans ---------- */
h1,h2,h3,h4{line-height:1.12;letter-spacing:-.018em}
.h-hero{font-size:clamp(2.9rem,7.4vw,6.4rem);letter-spacing:-.028em;line-height:1.02}
.h1{font-size:clamp(2.3rem,5vw,4.2rem);letter-spacing:-.024em;line-height:1.08}
.h2{font-size:clamp(1.95rem,4vw,3.35rem);line-height:1.1}
/* Οι τίτλοι καρτών/βημάτων ΔΕΝ πάνε σε serif: στα 1.1rem το Garamond γίνεται αδύναμο. */
.card h3,.step h3,.why-item h3,.stop h3,.dest-body h3{font-family:var(--font-text);font-weight:700;letter-spacing:-.012em;line-height:1.3}
.card h3{font-size:1.1rem}
.dest-body h3{font-size:1.24rem}
/* Η δεύτερη γραμμή του hero σε πλάγια — η μόνη χρήση italic στο site. */
.say-it{font-style:italic;font-weight:500}

/* ---------- HERO: ΚΕΝΤΡΑΡΙΣΜΕΝΟ σε desktop ΚΑΙ mobile ---------- */
.hero{justify-content:center;text-align:center;min-height:92svh}
.hero-in{display:flex;flex-direction:column;align-items:center;
  padding-top:calc(74px + 6vh);padding-bottom:clamp(48px,9vh,104px)}
.hero .eyebrow{justify-content:center;margin-bottom:1.4rem}
.hero .eyebrow::after{content:"";width:26px;height:2px;background:var(--brand);flex:none}
.hero h1{max-width:7.68em}
/* το overflow:hidden της μάσκας έκοβε τις ουρές του Garamond (ρ, μ, γ) */
.hero .line{padding-bottom:.14em;margin-bottom:-.14em}
.hero-sub{max-width:33.93em;margin-inline:auto;text-align:center}
.hero-scroll{display:none!important}

/* Το scrim ακολουθεί το κείμενο: σκοτεινό στο κέντρο, ανοιχτό στις άκρες,
   ώστε ο Λευκός Πύργος να παραμένει ορατός. */
.hero-media::after{
  background:
    radial-gradient(ellipse 92% 74% at 50% 42%, rgb(13 19 21/.76) 0%, rgb(13 19 21/.60) 56%, rgb(13 19 21/.30) 100%),
    linear-gradient(to top, rgb(var(--shade-rgb)/.86) 0%, rgb(var(--shade-rgb)/0) 42%);
}

/* ---------- Η ΤΙΜΗ ΕΙΝΑΙ ΤΟ ΜΕΓΑΛΥΤΕΡΟ ΠΡΑΓΜΑ ΣΤΗΝ ΚΑΡΤΑ ---------- */
.card-foot{flex-wrap:wrap;row-gap:10px;align-items:flex-end}
/* line-height 1.32 = ΑΚΡΙΒΩΣ το ύψος που θα πιάσει το odometer (ascent+descent του
   JetBrains Mono). Το κρατάμε ίδιο και στις δύο καταστάσεις ώστε η αντικατάσταση
   του κειμένου από τα κυλιόμενα ψηφία να ΜΗΝ μεγαλώνει την κάρτα — μετρημένο CLS. */
.price b{font-size:clamp(2rem,3.2vw,2.6rem);line-height:1.32;color:var(--deep);letter-spacing:-.045em}
.price b i{font-size:.4em;color:var(--ink-soft);letter-spacing:0;margin-left:.14em}
.price small{font-size:.66rem;margin-bottom:2px}
.card-link{font-size:.84rem;margin-left:auto}
.veh-price b{font-size:clamp(2.8rem,5vw,3.6rem)}
.hero-from{font-size:.95rem;padding:11px 20px;background:rgb(255 255 255/.12);box-shadow:inset 0 0 0 1px rgb(255 255 255/.26)}
.hero-from b{font-size:1.6rem;font-weight:700;letter-spacing:-.03em}
/* η υψηλή περίοδος είναι η τιμή που καθορίζει την απόφαση το καλοκαίρι */
table.prices td.p.hi{color:var(--signal-deep);font-weight:700}
table.prices thead th:last-child{background:var(--deep-2)}

/* ---------- ΤΙΜΟΚΑΤΑΛΟΓΟΣ ΣΕ ΚΙΝΗΤΟ: στοίβα, όχι οριζόντιο scroll ----------
   Στα 390px ο πίνακας 4 στηλών έκρυβε την υψηλή περίοδο πίσω από scroll χωρίς ένδειξη. */
@media(max-width:760px){
  .table-scroll:has(.prices-seasonal){overflow:visible;box-shadow:none;border-radius:0}
  table.prices.prices-seasonal{min-width:0;display:block;background:transparent;font-size:1rem}
  .prices-seasonal thead{position:absolute;width:1px;height:1px;overflow:hidden;clip:rect(0 0 0 0);white-space:nowrap}
  .prices-seasonal tbody,.prices-seasonal tr,.prices-seasonal td{display:block;width:100%}
  .prices-seasonal tr{background:var(--panel);box-shadow:0 0 0 1px var(--whisper);border-radius:var(--r);
    padding:14px 16px 12px;margin-bottom:12px}
  .prices-seasonal tr:hover{background:var(--panel)}
  .prices-seasonal td{border:0;padding:0}
  .prices-seasonal td.name{font-size:1.05rem;margin-bottom:10px;padding-bottom:10px;border-bottom:1px solid var(--whisper)}
  .prices-seasonal td.p{display:flex;justify-content:space-between;align-items:baseline;gap:14px;padding:5px 0;font-size:1.15rem}
  .prices-seasonal td.p::before{content:attr(data-label);font-family:var(--font-text);font-size:.7rem;font-weight:800;
    letter-spacing:.1em;text-transform:uppercase;color:var(--ink-soft);white-space:nowrap}
  .prices-seasonal td.p.hi{font-size:1.4rem}
}

/* ---------- PRELOADER (ζητήθηκε ρητά — βλ. DESIGN-DEBT §5) ----------
   Καθαρά CSS: κρύβεται μόνο του στα 700ms ακόμα κι αν το JS δεν τρέξει ποτέ.
   Δεν περιέχει περιεχόμενο — το crawler-first DOM μένει ανέπαφο. */
.pre{position:fixed;inset:0;z-index:var(--z-pre);background:var(--canvas);
  display:grid;place-items:center;align-content:center;gap:22px;
  animation:pre-out 220ms var(--ease) 480ms forwards}
.pre img{height:34px;width:auto;opacity:0;animation:pre-mark 400ms var(--ease) 40ms forwards}
.pre-road{width:min(180px,42vw);height:2px;background:var(--whisper);position:relative;overflow:hidden}
.pre-road::after{content:"";position:absolute;inset:0;transform-origin:left;transform:scaleX(0);
  background:repeating-linear-gradient(90deg,var(--asphalt) 0 14px,transparent 14px 26px);
  animation:pre-draw 500ms var(--ease) 60ms forwards}
@keyframes pre-mark{to{opacity:1}}
@keyframes pre-draw{to{transform:scaleX(1)}}
@keyframes pre-out{to{opacity:0;visibility:hidden}}
.pre[hidden]{display:none}
html.no-js .pre{display:none}

/* ---------- DRAWER: κουμπί επιστροφής (ζητήθηκε ρητά) ---------- */
.drawer-head{display:flex;align-items:center;justify-content:space-between;gap:14px;margin-bottom:22px}
.nav-mobile .drawer-logo{margin-bottom:0}
.drawer-close{display:inline-flex;align-items:center;gap:7px;min-height:44px;padding:8px 15px 8px 11px;
  background:rgb(255 255 255/.08);box-shadow:inset 0 0 0 1px rgb(255 255 255/.22);border:0;border-radius:999px;
  color:#fff;font-family:var(--font-text);font-size:.82rem;font-weight:700;cursor:pointer;
  transition:background var(--dur-hover) var(--ease-hover),box-shadow var(--dur-hover),color var(--dur-hover)}
.drawer-close:hover{background:rgb(255 255 255/.16);box-shadow:inset 0 0 0 1px var(--brand);color:var(--brand)}

/* ---------- SIGNATURE: «Η ΛΕΩΦΟΡΟΣ» ----------
   Από κάθετη γραμμή σε πραγματική διαδρομή: χαράσσεται με το scroll, έχει δείκτη θέσης
   που τρέχει πάνω της, και στάσεις που ανάβουν καθώς τις περνάει. */
.road-rail{position:fixed;left:6px;top:0;bottom:0;width:16px;z-index:5;pointer-events:none;
  background:none;opacity:1;
  -webkit-mask-image:linear-gradient(to bottom,transparent 0,#000 5%,#000 86%,transparent 100%);
          mask-image:linear-gradient(to bottom,transparent 0,#000 5%,#000 86%,transparent 100%)}
@media(min-width:1100px){.road-rail{left:22px;width:26px}}
.road-rail svg{width:100%;height:100%;display:block;overflow:visible}
.road-base{stroke:var(--whisper);stroke-width:2;fill:none}
.road-draw{stroke:var(--asphalt);stroke-width:2;fill:none;
  stroke-dasharray:1000;stroke-dashoffset:calc(1000 * (1 - var(--sp,0)))}
.road-dot{fill:var(--brand);transform:translateY(calc(var(--sp,0) * 900px));
  filter:drop-shadow(0 0 5px rgb(98 204 233/.75))}
.road-mark{stroke:var(--line-strong);stroke-width:2;fill:none;
  opacity:clamp(0,calc((var(--sp,0) - var(--at,2)) * 40),1)}

/* ---------- ΚΟΝΣΟΛΑ: «άναψε το ταμπλό» ---------- */
.console .field{position:relative}
.console .field::after{content:"";position:absolute;inset:-1px;border:1px solid var(--brand);border-radius:var(--r);
  opacity:0;pointer-events:none}
/* Zero-JS feedback: αν λείπει υποχρεωτικό πεδίο, το CTA χάνει κορεσμό. */
.console form:has(:invalid) .btn-signal{filter:saturate(.5)}
.console .btn-signal{transition:filter var(--dur-hover) var(--ease-hover),transform var(--dur-hover) var(--ease-hover),background var(--dur-hover)}

/* ---------- STICKY-STACK: οι τρεις στάσεις (1 pinned scene) ---------- */
@media(min-width:900px) and (prefers-reduced-motion:no-preference){
  .stops-stack .stop{position:sticky;background:var(--canvas);
    top:calc(96px + var(--i,0) * 12px);z-index:calc(1 + var(--i,0))}
  .stops-stack .stop:last-child{box-shadow:0 -1px 0 var(--whisper),0 18px 40px -34px rgb(var(--shade-rgb)/.5)}
  .section-warm .stops-stack .stop{background:var(--canvas-warm)}
  .section-deep .stops-stack .stop{background:var(--deep)}
}

/* ---------- FLIP στα φίλτρα στόλου ---------- */
.card.is-leaving{opacity:0;transform:scale(.94);transition:opacity 220ms var(--ease-hover),transform 220ms var(--ease-hover)}

/* ---------- ODOMETER: κυλιόμενα ψηφία ----------
   Το markup χτίζεται από το JS ώστε το raw HTML να κρατάει τον σκέτο αριθμό
   (crawler-first + λειτουργεί χωρίς JS). «Prime & release»: μπαίνει στη θέση
   n+10 χωρίς transition, και στο επόμενο frame κυλάει προς το n. */
.odo{--oh:1.32em;display:inline-flex;align-items:baseline;font-variant-numeric:tabular-nums}
.odo-d{display:inline-block;overflow:hidden;height:var(--oh);vertical-align:-.3em}
.odo-strip{display:block;transform:translateY(calc(var(--n,0) * -1 * var(--oh)));
  transition:transform 520ms var(--ease) calc(var(--i,0) * 40ms)}
.odo-strip>span{display:block;height:var(--oh);line-height:var(--oh)}
.odo.is-primed .odo-strip{transform:translateY(calc((var(--n,0) + 10) * -1 * var(--oh)));transition:none}

/* ---------- SCROLL-DRIVEN: μόνο όπου υποστηρίζεται και επιτρέπεται ---------- */
@supports (animation-timeline:scroll()){
  @media (prefers-reduced-motion:no-preference){
    @keyframes road-cut{from{stroke-dashoffset:1000}to{stroke-dashoffset:0}}
    @keyframes road-run{from{transform:translateY(0)}to{transform:translateY(900px)}}
    .road-draw{animation:road-cut linear both;animation-timeline:scroll(root)}
    .road-dot{animation:road-run linear both;animation-timeline:scroll(root)}
  }
}
@supports (animation-timeline:view()){
  @media (prefers-reduced-motion:no-preference){
    @keyframes boot-in{from{opacity:0;transform:translateY(9px)}to{opacity:1;transform:none}}
    @keyframes boot-flash{0%{opacity:0}35%{opacity:.9}100%{opacity:0}}
    .console-grid>*{animation:boot-in linear both;animation-timeline:view();animation-range:entry 4% cover 22%}
    .console-grid>*:nth-child(2){animation-range:entry 8% cover 26%}
    .console-grid>*:nth-child(3){animation-range:entry 12% cover 30%}
    .console-grid>*:nth-child(4){animation-range:entry 16% cover 34%}
    .console-grid>*:nth-child(5){animation-range:entry 20% cover 38%}
    .console .field::after{animation:boot-flash linear both;animation-timeline:view();animation-range:entry 10% cover 34%}
  }
}

/* ---------- VELOCITY: skew στις εικόνες καρτών (WOW B) ---------- */
@media (prefers-reduced-motion:no-preference){
  .card-media img,.dest img{transform:skewY(calc(var(--vskew,0) * 1deg)) scale(1.02)}
  .card:hover .card-media img{transform:skewY(calc(var(--vskew,0) * 1deg)) scale(1.05)}
  .dest:hover img{transform:skewY(calc(var(--vskew,0) * 1deg)) scale(1.07)}
}

/* ---------- VIEW TRANSITIONS (cross-document) ---------- */
@view-transition{navigation:auto}
::view-transition-old(root),::view-transition-new(root){
  animation-duration:.4s;animation-timing-function:cubic-bezier(.16,1,.3,1)}
::view-transition-group(*){animation-duration:.42s;animation-timing-function:cubic-bezier(.16,1,.3,1)}

/* ---------- REDUCED MOTION: πλήρης εμπειρία, μηδέν κίνηση ---------- */
@media (prefers-reduced-motion:reduce){
  .pre{display:none}
  .road-draw{stroke-dashoffset:0}
  .road-dot{transform:translateY(900px)}
  .road-mark{opacity:1}
  .lane::before{animation:none}
  .odo-strip{transition:none}
  .card-media img,.dest img,.card:hover .card-media img,.dest:hover img{transform:none}
  @view-transition{navigation:none}
}

/* ---------- ΤΕΛΕΥΤΑΙΕΣ ΛΕΠΤΟΜΕΡΕΙΕΣ ---------- */
.card-code{background:var(--brand);color:var(--deep);font-weight:700}
.stop-num{background:var(--brand);color:var(--deep);font-weight:700}
.step::before{color:var(--brand-deep)}

/* ---------- HERO: char-split στην τρίτη γραμμή + weight morph ---------- */
.hero .line>span.split{transform:none;animation:none}
.hero .line .w{display:inline-block}
.hero .line .ch{display:inline-block;transform:translateY(112%);
  animation:line-up var(--dur) var(--ease) var(--d,0s) forwards}
/* Το βάρος μορφώνεται μόνο σε desktop, όπου οι τρεις γραμμές δεν αναδιπλώνονται
   — έτσι η αλλαγή πλάτους γλυφών δεν μπορεί να μετακινήσει τίποτα (CLS 0). */
@media (min-width:900px) and (prefers-reduced-motion:no-preference){
  @keyframes hero-weight{from{font-variation-settings:"wght" 400}to{font-variation-settings:"wght" 600}}
  .hero h1{animation:hero-weight 700ms var(--ease) both}
}
@media (prefers-reduced-motion:reduce){
  .hero .line .ch{transform:none;animation:none}
  .hero h1{animation:none}
}

/* ============================================================================
   v3.1 — ΕΞΕΥΓΕΝΙΣΜΟΣ (εντολή Giorgos 26/08)
   «οι γραμμές του καρουζέλ τύπου αυτοκινητόδρομο δεν είναι ωραίες — κάτι πιο
    premium και elegant», λογότυπο στο hero, πλουσιότερο preloader, καλύτερη
    παρουσίαση των αυτοκινήτων.
   Αρχή: η πολυτέλεια είναι η σιγουριά, όχι ο θόρυβος. Αφαιρούμε, δεν προσθέτουμε.
   ============================================================================ */

/* ---------- Η ΛΩΡΙΔΑ: από ζωγραφιστή άσφαλτο σε ΧΑΡΑΞΗ ----------
   Η παλιά ήταν 14px μαύρη μπάρα με άσπρες παύλες που έτρεχαν — καρτούν.
   Τώρα: μία τρίχα φωτός που διασχίζει αργά τη σελίδα. Ίδιο νόημα («η λεωφόρος»),
   μηδέν θόρυβος. */
.lane{height:3px;position:relative;overflow:hidden;background:none}
.lane::after{content:"";position:absolute;left:0;right:0;top:1px;height:1px;opacity:.45;
  background:linear-gradient(90deg,transparent,var(--line-strong) 9%,var(--line-strong) 91%,transparent)}
.lane::before{content:"";position:absolute;top:0;height:3px;left:0;width:22%;
  background:linear-gradient(90deg,transparent,rgb(98 204 233/.85),transparent);
  animation:lane-sweep 13s cubic-bezier(.45,0,.55,1) infinite}
@keyframes lane-sweep{0%{transform:translateX(-130%)}100%{transform:translateX(560%)}}
.on-deep .lane::after,.console-wrap .lane::after{
  background:linear-gradient(90deg,transparent,rgb(255 255 255/.3) 9%,rgb(255 255 255/.3) 91%,transparent);opacity:1}
@media (prefers-reduced-motion:reduce){.lane::before{animation:none;opacity:0}}

/* ---------- ΤΑ ΑΥΤΟΚΙΝΗΤΑ: λιγότερος θόρυβος, περισσότερο βλέμμα ----------
   Πέντε κουτάκια με εικονίδια τσακώνονταν με τη φωτογραφία και την τιμή.
   Μία τυπογραφική γραμμή διαβάζεται πιο γρήγορα ΚΑΙ δείχνει πιο ακριβή. */
.specs{display:block;margin-top:auto;padding-top:8px;font-size:.84rem;line-height:1.65;
  color:var(--ink-soft);font-weight:500}
.spec{display:inline;background:none;padding:0;border-radius:0;font-weight:500;white-space:nowrap}
.spec svg{display:none}
.spec + .spec::before{content:"·";margin:0 .48em;color:var(--line-strong);opacity:.75}

/* Η φωτογραφία αποκτά χαραγμένο περίγραμμα — δένει με τη γλώσσα του DNA v3. */
.card-media::after{content:"";position:absolute;inset:0;pointer-events:none;z-index:1;
  box-shadow:inset 0 0 0 1px rgb(var(--shade-rgb)/.14)}
.card-media{background:var(--canvas-warm)}
/* Ο κωδικός κατηγορίας γίνεται διακριτική χάραξη, όχι έντονο πλακάκι. */
.card-code{background:rgb(var(--shade-rgb)/.72);color:#fff;font-weight:600;letter-spacing:.06em;
  backdrop-filter:blur(3px)}
.card-tag{background:rgb(var(--shade-rgb)/.78);backdrop-filter:blur(3px);font-weight:700;letter-spacing:.08em}
.card:hover{box-shadow:0 0 0 1px var(--brand),0 22px 44px -26px rgb(var(--shade-rgb)/.45);transform:translateY(-4px)}
.card-class{letter-spacing:.14em}

/* ---------- HERO: το λογότυπο μπαίνει στη σκηνή (ζητήθηκε ρητά) ---------- */
.hero-mark{height:clamp(28px,3.8vw,42px);width:auto;margin:0 auto 24px;display:block;
  opacity:0;animation:fade-in 700ms var(--ease) .1s forwards}
@media (prefers-reduced-motion:reduce){.hero-mark{opacity:1;animation:none}}
.hero .eyebrow{margin-bottom:1.5rem;opacity:.92}

/* ---------- PRELOADER: πιο πλούσιο, ίδια διάρκεια ----------
   Το λογότυπο εμφανίζεται, η γραμμή χαράσσεται ΑΠΟ ΤΟ ΚΕΝΤΡΟ προς τα έξω,
   και από κάτω αποκαλύπτεται η πόλη. Όλο μέσα σε 700ms. */
.pre{gap:24px}
.pre img{height:clamp(30px,4vw,40px);animation:pre-mark 460ms var(--ease) 40ms forwards}
.pre-road{width:min(240px,56vw);height:1px;background:none;overflow:visible}
.pre-road::before{content:"";position:absolute;inset:0;background:var(--whisper)}
.pre-road::after{content:"";position:absolute;inset:0;transform-origin:center;transform:scaleX(0);
  background:linear-gradient(90deg,transparent,var(--brand-deep) 20%,var(--brand) 50%,var(--brand-deep) 80%,transparent);
  animation:pre-draw 520ms var(--ease) 70ms forwards}
.pre-cap{font-family:var(--font-mono);font-size:.68rem;font-weight:500;letter-spacing:.34em;
  text-transform:uppercase;color:var(--ink-soft);opacity:0;
  animation:pre-cap 460ms var(--ease) 230ms forwards}
@keyframes pre-cap{from{opacity:0;letter-spacing:.5em}to{opacity:.75;letter-spacing:.34em}}

/* ---------- ΝΕΟ: η ταυτότητα σε τέσσερις αριθμούς ----------
   Κάθεται αμέσως κάτω από την κονσόλα. Απαντάει τις τέσσερις πρώτες ερωτήσεις
   πριν καν κατέβει ο επισκέπτης: πόσα, από πόσο, πού, πότε. */
.facts{border-block:1px solid var(--whisper);background:var(--canvas)}
.facts-in{width:var(--wrap);margin-inline:auto;display:grid;grid-template-columns:1fr 1fr;
  gap:0;padding-block:clamp(22px,3vw,34px)}
@media(min-width:820px){.facts-in{grid-template-columns:repeat(4,1fr)}}
.fact{display:flex;flex-direction:column;gap:5px;padding:14px clamp(12px,2vw,26px);position:relative}
.fact + .fact::before{content:"";position:absolute;left:0;top:12%;bottom:12%;width:1px;background:var(--whisper)}
@media(max-width:819px){.fact:nth-child(3)::before,.fact:nth-child(odd)::before{content:none}}
.fact b{font-family:var(--font-mono);font-size:clamp(1.5rem,2.6vw,2rem);font-weight:600;
  color:var(--deep);letter-spacing:-.035em;line-height:1;font-variant-numeric:tabular-nums}
.fact b i{font-style:normal;font-size:.5em;color:var(--ink-soft);margin-left:.15em;letter-spacing:0}
.fact span{font-size:.78rem;font-weight:700;letter-spacing:.11em;text-transform:uppercase;color:var(--ink-soft)}

/* ---------- ΝΕΟ: η καθησυχαστική σειρά «τι περιλαμβάνεται» ----------
   Πριν το FAQ. Ο επισκέπτης που έφτασε ως εδώ ρωτάει «τι πληρώνω τελικά;» */
.incl-row{display:grid;gap:10px 26px;grid-template-columns:1fr;margin-top:6px}
@media(min-width:640px){.incl-row{grid-template-columns:1fr 1fr}}
@media(min-width:1040px){.incl-row{grid-template-columns:repeat(3,1fr)}}
.incl-row li{display:flex;gap:10px;align-items:flex-start;font-size:.96rem;color:var(--ink);
  list-style:none;padding:9px 0;border-bottom:1px solid var(--whisper)}
.incl-row li svg{flex:none;margin-top:4px;color:var(--brand-deep)}

/* ---------- ΛΕΠΤΟΜΕΡΕΙΕΣ ΠΟΥ ΔΕΙΧΝΟΥΝ ΑΚΡΙΒΕΙΕΣ ---------- */
.section-head .h2{text-wrap:balance}
.btn-signal{box-shadow:0 10px 26px -14px rgb(196 60 23/.55)}
.btn-signal:hover{box-shadow:0 14px 30px -14px rgb(158 46 16/.6)}
.filters button{transition:background var(--dur-hover) var(--ease-hover),color var(--dur-hover),
  border-color var(--dur-hover),transform var(--dur-hover) var(--ease-hover)}
.filters button:hover{transform:translateY(-1px)}
.dest{box-shadow:0 0 0 1px rgb(var(--shade-rgb)/.1)}
.footer{border-top:1px solid rgb(255 255 255/.08)}

/* Το κείμενο του hero κάθεται πάνω σε φωτογραφία με λαμπερό αμάξι — μια πολύ απαλή
   σκιά κρατάει τα γράμματα καθαρά χωρίς να χρειαστεί να σκοτεινιάσει άλλο η εικόνα. */
.hero h1,.hero-sub,.hero .eyebrow,.hero-mark{text-shadow:0 2px 22px rgb(8 14 16/.5),0 1px 3px rgb(8 14 16/.35)}
.hero-mark{filter:drop-shadow(0 2px 14px rgb(8 14 16/.45))}

/* Το hero video μπαίνει με ήρεμο fade ΑΦΟΥ φορτώσει η σελίδα (βλ. site.js):
   έτσι το LCP παραμένει η φωτογραφία και δεν το διεκδικεί το βίντεο. */
.hero-video{opacity:0;transition:opacity 900ms var(--ease)}
.hero-video.is-live{opacity:1}
@media (prefers-reduced-motion:reduce){.hero-video{display:none}}

/* ═══════════════════════════════════════════════════════════════════
   ΑΝΑΖΗΤΗΣΗ ΔΙΑΘΕΣΙΜΟΤΗΤΑΣ — v3.7 (07/09/2026)
   Η κονσόλα έγινε πλήρης φόρμα: παραλαβή/επιστροφή με ώρα, ηλικία,
   κουπόνι. Στο κινητό μία στήλη· από 760px μπαίνει η ώρα δίπλα στην
   ημερομηνία· από 1080px κάθε σκέλος σε δική του σειρά.
   ═══════════════════════════════════════════════════════════════════ */

@media(min-width:760px){
  .console-grid{grid-template-columns:1.4fr 1fr .8fr}
  .console-grid .field-extra{grid-column:span 1}
  .console-go{grid-column:1/-1}
}
@media(min-width:1080px){
  .console-grid{grid-template-columns:1.5fr 1fr .8fr 1.5fr 1fr .8fr;align-items:end}
  .console-grid .field-extra{grid-column:span 2}
  .console-go{grid-column:span 4;justify-self:stretch;align-self:end}
}
.console-go svg{margin-left:2px}

/* ---------- αποτελέσματα ---------- */
.res-count{font-size:.86rem;font-weight:700;color:var(--ink-soft);margin-bottom:18px}
.res-h2{margin:38px 0 18px}

.res-empty{display:flex;gap:14px;align-items:flex-start;background:var(--panel);
  border-radius:var(--r);box-shadow:0 0 0 1px var(--line);padding:20px 22px;margin-bottom:34px}
.res-empty svg{flex:none;color:var(--brand-deep);margin-top:2px}
.res-empty p{margin:0;color:var(--ink-soft);max-width:56ch}

.res{display:grid;gap:0;background:var(--panel);border-radius:var(--r);
  box-shadow:0 0 0 1px var(--line);overflow:hidden;margin-bottom:14px}
@media(min-width:900px){.res{grid-template-columns:300px 1fr 250px;align-items:stretch}}

.res-pic{position:relative;background:var(--canvas-warm)}
.res-pic picture,.res-pic img{display:block;width:100%;height:100%;object-fit:cover}
@media(max-width:899px){.res-pic img{aspect-ratio:16/10}}

.res-body{padding:20px 22px;display:flex;flex-direction:column;justify-content:center;gap:4px}
.res-name{font-family:var(--font-head);font-size:1.24rem;font-weight:600;line-height:1.2;
  letter-spacing:-.01em;margin:2px 0 8px}
.res-body .specs{margin:0}

.res-price{display:flex;flex-direction:column;justify-content:center;gap:3px;
  padding:20px 22px;background:var(--canvas-warm);text-align:left}
@media(min-width:900px){.res-price{box-shadow:inset 1px 0 0 var(--line);text-align:right;align-items:flex-end}}
.res-total{font-family:var(--font-head);font-size:2rem;font-weight:600;line-height:1.1;
  letter-spacing:-.02em;color:var(--deep)}
.res-days{font-size:.86rem;font-weight:700;color:var(--ink)}
.res-per{font-size:.82rem;color:var(--ink-soft)}
.res-split{font-family:var(--font-mono);font-size:.74rem;color:var(--ink-soft);opacity:.85}
.res-km{display:inline-flex;align-items:center;gap:6px;font-size:.78rem;color:var(--brand-deep);
  font-weight:700;margin-top:4px}
.res-km svg{flex:none}
.res-price .btn{margin-top:12px;width:100%;justify-content:center}
@media(min-width:900px){.res-price .btn{width:auto}}

/* ═══════════════════════════════════════════════════════════════════
   v4.0 — Η ΚΡΑΤΗΣΗ ΜΠΡΟΣΤΑ (εντολή Giorgos, 08/09/2026)

   Ο επισκέπτης δεν διαβάζει· ψάχνει αμάξι. Το hero έγινε: λογότυπο,
   μία γραμμή, ΚΑΙ Η ΦΟΡΜΑ — όλα μέσα στην πρώτη οθόνη. Η αναζήτηση
   έγινε δύο στήλες: φίλτρα καρφωμένα αριστερά, αυτοκίνητα δύο-δύο.

   Desktop και κινητό ΔΕΝ είναι η ίδια σελίδα σε άλλο πλάτος:
     · desktop  — πανοραμική φωτογραφία, η φόρμα αιωρείται από πάνω
     · κινητό   — κοντό hero, η φόρμα κάθεται συμπαγής, 54px πεδία
   ═══════════════════════════════════════════════════════════════════ */

/* ---------- HERO: λογότυπο, μία γραμμή, και ΑΜΕΣΩΣ η φόρμα ---------- */
.hero-book{min-height:100svh;justify-content:center;
  padding-top:clamp(86px,11vh,118px);padding-bottom:clamp(26px,4vh,48px)}
.hero-book .hero-in{width:min(1260px,100% - 2.5rem);padding-top:0;padding-bottom:0}
.hero-book .console-wrap{width:100%}
/* Το λογότυπο είναι η ταυτότητα, όχι υποσημείωση — ζητήθηκε ρητά μεγαλύτερο. */
.hero-book .hero-mark{height:clamp(44px,5.2vw,72px);margin:0 auto 18px}
.hero-book .eyebrow{margin-bottom:13px}

/* Ο τίτλος δεν είναι πια αφίσα — είναι ταμπέλα πάνω από τη φόρμα. */
.hero-book .h-hero{font-size:inherit;line-height:inherit;letter-spacing:normal;max-width:none}
.hh-lead{display:block;font-family:var(--font-display);font-weight:600;color:#fff;
  font-size:clamp(2.05rem,5.2vw,3.75rem);line-height:1.02;letter-spacing:-.035em;text-wrap:balance}
.hh-sub{display:block;margin:13px auto 0;max-width:36em;font-family:var(--font-text);font-weight:500;
  font-size:clamp(.94rem,1.5vw,1.08rem);line-height:1.55;letter-spacing:0;color:rgb(255 255 255/.86)}
/* το weight-morph ήταν για τον τρίστιχο τίτλο· εδώ θα χάλαγε το βάρος του υπότιτλου */
@media(min-width:900px){.hero-book .h-hero{animation:none}}

/* ---------- Η ΦΟΡΜΑ: μία γραμμή σε desktop, στοίβα σε κινητό ---------- */
.console-grid{display:flex;flex-wrap:wrap;gap:10px;align-items:end}
.console-head{flex:1 1 100%;display:flex;flex-wrap:wrap;align-items:center;justify-content:space-between;
  gap:8px 18px;margin-bottom:2px}
.console-title{margin-bottom:0}
.console-grid .field{flex:1 1 100%;min-width:0}
.console-grid .field-day{flex:1 1 56%}
.console-grid .field-hour{flex:1 1 30%}
.console-go{flex:1 1 100%;justify-content:center}

/* Το «Επιστροφή σε» ξεκινάει κρυφό: οι 9 στις 10 κρατήσεις επιστρέφουν εκεί
   που παρέλαβαν, και κάθε πεδίο που δεν χρειάζεται είναι ένας λόγος να φύγει. */
.field-drop{display:none}
.console-grid:has(.drop-toggle input:checked) .field-drop{display:flex}
.drop-toggle{display:inline-flex;align-items:center;gap:9px;cursor:pointer;min-height:40px;
  font-size:.82rem;font-weight:600;color:rgb(255 255 255/.8);user-select:none}
.drop-toggle:hover{color:#fff}
.drop-toggle input{appearance:none;-webkit-appearance:none;flex:none;width:20px;height:20px;margin:0;
  border-radius:4px;cursor:pointer;background:rgb(255 255 255/.08);
  box-shadow:inset 0 0 0 1.5px rgb(255 255 255/.38);
  transition:background var(--dur-hover) var(--ease-hover),box-shadow var(--dur-hover)}
.drop-toggle input:checked{background:var(--brand);box-shadow:inset 0 0 0 1.5px var(--brand)}
.drop-toggle input:checked::after{content:"";display:block;width:5px;height:10px;margin:3px auto 0;
  border:solid var(--deep);border-width:0 2.5px 2.5px 0;transform:rotate(42deg)}
.drop-toggle input:focus-visible{outline:3px solid var(--brand);outline-offset:2px}

/* ---------- ΜΟΡΦΗ «hero»: αιωρούμενο ταμπλό πάνω στη φωτογραφία ---------- */
.console-hero{margin-top:clamp(20px,3vw,30px);z-index:3;text-align:left}
.console-hero .console{background:rgb(9 22 29/.84);border-radius:14px;
  -webkit-backdrop-filter:blur(12px) saturate(1.15);backdrop-filter:blur(12px) saturate(1.15);
  box-shadow:inset 0 0 0 1px rgb(255 255 255/.18),0 34px 70px -34px rgb(0 0 0/.75)}
.console-hero .console-in{width:auto;padding:clamp(15px,2vw,22px) clamp(15px,2.2vw,24px) clamp(14px,1.8vw,20px)}
.console-hero .console-note{justify-content:center}

/* ---------- ΜΟΡΦΗ «side»: κάθετη στήλη δίπλα στα αποτελέσματα ---------- */
.console-side{margin-top:0;z-index:1}
.console-side .console{background:var(--deep);border-radius:12px;
  box-shadow:0 0 0 1px rgb(var(--shade-rgb)/.16),0 20px 44px -30px rgb(var(--shade-rgb)/.55)}
.console-side .console-in{width:auto;padding:19px 19px 17px}
.console-side .console-head{flex-direction:column;align-items:flex-start;gap:6px;margin-bottom:6px}
.console-side .console-note{flex-direction:column;gap:7px;margin-top:14px;font-size:.76rem}
/* Σε στήλη 326px η ώρα στο 30% έκοβε το «10:00» στη μέση — και σε αγγλικό
   browser που δείχνει «10:00 AM» χρειάζεται ακόμα περισσότερο χώρο. */
.console-side .console-grid .field-day{flex:1 1 50%}
.console-side .console-grid .field-hour{flex:1 1 42%}
.console-side .console-grid .field input,
.console-side .console-grid .field select{padding-inline:11px}

/* ---------- DESKTOP: όλα σε μία σειρά ----------
   Τα flex-basis είναι μετρημένα ώστε το άθροισμά τους (+ τα κενά) να χωράει
   στο πλάτος του ταμπλό· αλλιώς το κουμπί πέφτει μόνο του σε δεύτερη γραμμή
   και μοιάζει ξεκρέμαστο. */
@media(min-width:900px){
  .console-hero .console-grid .field-where,
  .console-band .console-grid .field-where{flex:1 1 178px}
  .console-hero .console-grid .field-day,
  .console-band .console-grid .field-day{flex:1 1 150px}
  .console-hero .console-grid .field-hour,
  .console-band .console-grid .field-hour{flex:0 1 104px}
  .console-hero .console-grid .field-extra,
  .console-band .console-grid .field-extra{flex:1 1 126px}
  .console-hero .console-go,
  .console-band .console-go{flex:1 1 200px;width:auto}
}

/* Το «άναψε το ταμπλό» χτίστηκε για κονσόλα ΚΑΤΩ από το πρώτο πτυσσόμενο:
   τώρα που είναι μέσα στην πρώτη οθόνη, το scroll-timeline παγώνει τα
   περιγράμματα αναμμένα και τα πεδία δείχνουν μπλε κουτάκια. Το σβήνουμε. */
.console-hero .console-grid > *,
.console-side .console-grid > *,
.console-hero .console .field::after,
.console-side .console .field::after{animation:none;opacity:0}
.console-hero .console-grid > *,
.console-side .console-grid > *{opacity:1}

/* ---------- ΚΙΝΗΤΟ: άλλη σελίδα, όχι η ίδια στριμωγμένη ---------- */
@media(max-width:767px){
  .hero-book{min-height:auto;padding-top:94px;padding-bottom:24px}
  /* κάθετο scrim: τα γράμματα κάθονται καθαρά και η φόρμα πατάει σε σκοτάδι */
  .hero-book .hero-media::after{background:linear-gradient(180deg,
    rgb(var(--shade-rgb)/.5) 0%,rgb(var(--shade-rgb)/.72) 55%,rgb(var(--shade-rgb)/.93) 100%)}
  .hero-book .hero-mark{height:clamp(40px,11vw,52px);margin-bottom:13px}
  .hero-book .eyebrow{margin-bottom:11px;font-size:.66rem}
  .hh-lead{font-size:clamp(1.8rem,8.2vw,2.45rem)}
  .hh-sub{font-size:.92rem;margin-top:9px;max-width:26em}
  .console-hero{margin-top:20px}
  .console-hero .console{border-radius:16px;background:rgb(9 22 29/.92)}
  .console-hero .console-in{padding:16px 15px 15px}
  .console-title{font-size:.66rem}
  /* δάχτυλα, όχι ποντίκι */
  .console-grid .field select,.console-grid .field input{min-height:54px}
  .console-go{min-height:56px;font-size:1rem}
  .console-note{gap:6px 16px;margin-top:13px;font-size:.76rem}
}

/* ---------- ΣΕΛΙΔΑ ΑΠΟΤΕΛΕΣΜΑΤΩΝ ---------- */
/* Ο τίτλος της σελίδας αποτελεσμάτων δεν είναι αφίσα: ο επισκέπτης ήρθε εδώ
   για τιμές, όχι για να θαυμάσει ένα 4rem κεφαλαίο. Μικραίνει, ανεβαίνουν
   τα αυτοκίνητα. */
.page-head-slim{padding-top:96px;padding-bottom:clamp(20px,2.4vw,32px)}
.page-head-slim .h1{font-size:clamp(1.7rem,3.2vw,2.5rem);margin-bottom:6px}
.page-head-slim .lead{font-size:clamp(.95rem,1.2vw,1.05rem);max-width:52em}
.res-section{padding-block:clamp(28px,4vw,56px)}
.res-layout{position:relative;display:grid;gap:18px;align-items:start}
@media(min-width:1000px){.res-layout{grid-template-columns:326px minmax(0,1fr);gap:34px}}
.res-side{min-width:0}
@media(min-width:1000px){.res-side{position:sticky;top:88px}}
.res-main{min-width:0}

/* Κινητό: τα φίλτρα πίσω από ΕΝΑ κουμπί — τα αυτοκίνητα φαίνονται αμέσως.
   Καθαρό CSS (checkbox + ~), ώστε να δουλεύει και χωρίς JavaScript. */
.res-flt{position:absolute;left:0;top:0;width:1px;height:1px;opacity:0;pointer-events:none}
.res-flt-bar{display:flex;align-items:center;justify-content:center;gap:10px;min-height:52px;padding:0 18px;
  background:var(--deep);color:#fff;border-radius:10px;cursor:pointer;
  font-size:.92rem;font-weight:700;box-shadow:0 12px 28px -18px rgb(var(--shade-rgb)/.7)}
.res-flt-bar svg{flex:none;color:var(--brand)}
.res-flt:focus-visible + .res-flt-bar{outline:3px solid var(--brand-deep);outline-offset:3px}
@media(max-width:999px){
  .res-side{display:none}
  .res-flt:checked ~ .res-side{display:block}
}
@media(min-width:1000px){.res-flt-bar{display:none}}

/* ---------- ΤΑ ΑΥΤΟΚΙΝΗΤΑ: δύο-δύο, όχι ατέλειωτο scroll ---------- */
/* Δύο-δύο ΚΑΙ στο κινητό: με οκτώ κατηγορίες σε μία στήλη, η όγδοη είναι
   τέσσερις οθόνες κάτω και κανείς δεν φτάνει ως εκεί. */
.res-grid{display:grid;gap:12px;grid-template-columns:1fr}
@media(min-width:360px){.res-grid{grid-template-columns:1fr 1fr}}
@media(min-width:1000px){.res-grid{gap:20px}}

.res{display:flex;flex-direction:column;height:100%;margin-bottom:0;overflow:hidden;
  background:var(--panel);border-radius:10px;box-shadow:0 0 0 1px var(--whisper);
  transition:box-shadow var(--dur-hover) var(--ease-hover),transform var(--dur-hover) var(--ease-hover)}
.res:hover{transform:translateY(-3px);
  box-shadow:0 0 0 1px var(--brand-deep),0 22px 44px -28px rgb(var(--shade-rgb)/.45)}
.res-pic{aspect-ratio:16/10}
.res-pic img{aspect-ratio:16/10;height:100%}
.res-body{padding:13px 15px 8px;gap:1px;justify-content:flex-start}
.res-body .eyebrow{font-size:.63rem;margin:0 0 .45rem}
.res-name{font-size:clamp(1rem,2.3vw,1.2rem);margin:0 0 6px}
.res-price{margin-top:auto;padding:0 15px 15px;background:transparent;box-shadow:none;
  text-align:left;align-items:flex-start;gap:1px}
.res-total{font-size:clamp(1.55rem,4.2vw,1.95rem)}
.res-days,.res-per{font-size:.78rem}
.res-km{font-size:.75rem;margin-top:5px}
.res-price .btn{width:100%;justify-content:center;margin-top:11px}
/* Σε δύο στήλες στα 390px η κάρτα είναι ~170px: ό,τι δεν είναι φωτογραφία,
   όνομα, τιμή και κουμπί, είναι θόρυβος. */
@media(max-width:719px){
  .res .specs{display:none}
  .res-body{padding:11px 12px 6px}
  .res-body .eyebrow{font-size:.58rem;gap:.5em;margin-bottom:.35rem}
  .res-body .eyebrow::before{width:14px}
  .res-name{font-size:.95rem;line-height:1.25;margin-bottom:4px}
  .res-price{padding:0 12px 12px}
  .res-total{font-size:1.4rem}
  .res-days,.res-per{font-size:.72rem}
  .res-km{font-size:.68rem;gap:4px}
  .res-price .btn{margin-top:9px;padding-inline:10px;font-size:.86rem}
}
.res-count{margin-bottom:14px}

/* ═══════════════════════════════════════════════════════════════════
   ΔΙΚΑ ΜΑΣ ΧΕΙΡΙΣΤΗΡΙΑ — λίστες, ημερομηνία, ώρα   (v4.1 · 09/09/2026)

   Δύο περιβάλλοντα, ένα σύνολο κανόνων: τα χρώματα βγαίνουν από μεταβλητές
   που ξαναγράφονται μέσα στην κονσόλα (σκούρο ταμπλό) και στις φόρμες
   (ανοιχτό χαρτί). Έτσι το ίδιο widget δείχνει σωστό και στα δύο.

   Χωρίς JavaScript δεν εμφανίζεται τίποτα από αυτά: το native χειριστήριο
   μένει ορατό και λειτουργικό (βλ. .has-cc παρακάτω).
   ═══════════════════════════════════════════════════════════════════ */

.cc{position:relative}
/* Οι μεταβλητές μπαίνουν ΚΑΙ στο αναδυόμενο: στο κινητό μετακομίζει στο
   <body> (βλ. site.js) και εκεί δεν κληρονομεί τίποτα από το πεδίο του. */
.cc,.cc-pop.on-light{
  --cc-bg:var(--canvas); --cc-fg:var(--ink); --cc-bd:var(--line-strong); --cc-bdw:1.5px;
  --cc-pad:13px 14px; --cc-min:50px; --cc-r:var(--r);
  --cc-pop-bg:var(--panel); --cc-pop-fg:var(--ink); --cc-pop-bd:var(--whisper);
  --cc-hi:var(--brand-deep); --cc-hi-fg:#fff; --cc-soft:rgb(14 92 122/.1); --cc-mute:var(--ink-soft)}
.field .cc,.cc-pop.on-dark{
  --cc-bg:rgb(255 255 255/.07); --cc-fg:#fff; --cc-bd:rgb(255 255 255/.18); --cc-bdw:1px;
  --cc-pad:12px 13px;
  --cc-pop-bg:#10262F; --cc-pop-fg:#fff; --cc-pop-bd:rgb(255 255 255/.16);
  --cc-hi:var(--brand); --cc-hi-fg:var(--deep); --cc-soft:rgb(98 204 233/.16); --cc-mute:rgb(255 255 255/.55)}

/* Το native μένει στο DOM και υποβάλλεται· απλώς δεν το βλέπει κανείς.
   ΔΕΝ το κάνουμε display:none — ένα κρυμμένο έτσι «required» πεδίο μπλοκάρει
   την υποβολή χωρίς να μπορεί ο browser να δείξει πού. Το αφήνουμε 1px κάτω
   αριστερά, ώστε τυχόν μήνυμα ελέγχου να εμφανιστεί πάνω στο πεδίο. */
.cc>.cc-native{position:absolute!important;left:14px;bottom:4px;width:1px!important;height:1px!important;
  min-height:0!important;padding:0!important;margin:0!important;border:0!important;opacity:0!important;
  pointer-events:none;appearance:none;background:none!important;overflow:hidden}

.cc-btn{display:flex;align-items:center;justify-content:space-between;gap:10px;width:100%;
  min-height:var(--cc-min);padding:var(--cc-pad);border-radius:var(--cc-r);cursor:pointer;text-align:left;
  background:var(--cc-bg);color:var(--cc-fg);border:var(--cc-bdw) solid var(--cc-bd);
  font-family:var(--font-text);font-size:16px;font-weight:600;line-height:1.25;
  transition:border-color var(--dur-hover),background var(--dur-hover)}
.cc-btn:hover{border-color:var(--cc-hi)}
.cc.is-open .cc-btn{border-color:var(--cc-hi)}
.cc-val{overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
.cc-val.is-empty{color:var(--cc-mute);font-weight:500}
.cc-ico{flex:none;color:var(--cc-hi);opacity:.95;transition:transform var(--dur-hover) var(--ease-hover)}
.cc.is-open .cc-select .cc-ico,.cc-select.is-open .cc-ico{transform:rotate(180deg)}
.cc-date .cc-val,.cc-time .cc-val{font-size:15px;letter-spacing:-.01em}
/* το κόκκινο περίγραμμα του ελέγχου φορμών να φαίνεται και στο δικό μας κουμπί */
.cc:has(.cc-native.is-error) .cc-btn{border-color:#9A3412;border-width:2px}

/* ---------- το αναδυόμενο ---------- */
.cc-pop{position:absolute;z-index:60;top:calc(100% + 6px);left:0;min-width:100%;
  background:var(--cc-pop-bg);color:var(--cc-pop-fg);border-radius:10px;
  box-shadow:0 0 0 1px var(--cc-pop-bd),0 26px 54px -22px rgb(var(--shade-rgb)/.55);
  overflow:hidden}
.cc-pop.cc-up{top:auto;bottom:calc(100% + 6px)}
.cc-pop[hidden]{display:none}
.cc-body{max-height:min(320px,52vh);overflow:auto;overscroll-behavior:contain;padding:6px}
.cc-sheet-head{display:none}
@media (prefers-reduced-motion:no-preference){
  .cc-pop:not([hidden]){animation:cc-in 150ms var(--ease-hover) both}
  @keyframes cc-in{from{opacity:0;transform:translateY(-4px)}to{opacity:1;transform:none}}
}

/* ---------- επιλογές λίστας & ώρας ---------- */
.cc-opt{display:flex;align-items:center;gap:9px;min-height:44px;padding:9px 12px;border-radius:7px;
  cursor:pointer;font-size:.95rem;font-weight:600;line-height:1.35}
.cc-opt:hover,.cc-opt.is-cur{background:var(--cc-soft)}
.cc-opt.is-on{background:var(--cc-hi);color:var(--cc-hi-fg)}
.cc-opt[aria-disabled="true"]{opacity:.45;cursor:not-allowed}
.cc-time{font-family:var(--font-mono);font-variant-numeric:tabular-nums;justify-content:center;min-height:40px}

/* ---------- ημερολόγιο ---------- */
.cc-pop-date .cc-body{max-height:none;overflow:visible;padding:12px}
.cc-pop-date{min-width:296px}
.cc-cal-head{display:flex;align-items:center;justify-content:space-between;gap:8px;margin-bottom:10px}
.cc-cal-title{font-family:var(--font-text);font-size:.94rem;font-weight:700;letter-spacing:-.01em;text-align:center;flex:1}
.cc-nav{display:grid;place-items:center;width:36px;height:36px;flex:none;border:0;border-radius:8px;cursor:pointer;
  background:var(--cc-soft);color:inherit;transition:background var(--dur-hover)}
.cc-nav:hover{background:var(--cc-hi);color:var(--cc-hi-fg)}
.cc-dow{display:grid;grid-template-columns:repeat(7,1fr);gap:2px;margin-bottom:4px}
.cc-dow span{text-align:center;font-size:.66rem;font-weight:800;letter-spacing:.06em;text-transform:uppercase;
  color:var(--cc-mute);padding:4px 0}
.cc-grid{display:grid;grid-template-columns:repeat(7,1fr);gap:2px}
.cc-day{aspect-ratio:1;min-height:38px;border:0;border-radius:8px;cursor:pointer;background:none;color:inherit;
  font-family:var(--font-text);font-size:.9rem;font-weight:600;
  transition:background var(--dur-hover),color var(--dur-hover)}
.cc-day:hover:not(:disabled){background:var(--cc-soft)}
.cc-day:disabled{opacity:.26;cursor:default}
.cc-day.is-today{box-shadow:inset 0 0 0 1.5px var(--cc-hi)}
.cc-day.in-range{background:var(--cc-soft);border-radius:0}
.cc-day.is-mate{background:var(--cc-soft)}
.cc-day.is-on{background:var(--cc-hi);color:var(--cc-hi-fg);font-weight:800}
.cc-pad{min-height:38px}

/* ---------- ΚΙΝΗΤΟ: φύλλο από κάτω, όχι μικροσκοπικό αναδυόμενο ---------- */
.cc-veil{position:fixed;inset:0;z-index:1090;background:rgb(var(--shade-rgb)/.5);
  -webkit-backdrop-filter:blur(2px);backdrop-filter:blur(2px)}
.cc-veil[hidden]{display:none}
html.cc-lock,html.cc-lock body{overflow:hidden}
@media(max-width:719px){
  .cc-pop{position:fixed;z-index:1100;inset:auto 0 0 0;top:auto;min-width:0;width:100%;
    border-radius:16px 16px 0 0;padding-bottom:env(safe-area-inset-bottom);
    box-shadow:0 -18px 46px -18px rgb(var(--shade-rgb)/.6)}
  .cc-pop.cc-up{top:auto;bottom:0}
  .cc-sheet-head{display:flex;align-items:center;justify-content:space-between;gap:14px;
    padding:14px 16px 10px;border-bottom:1px solid var(--cc-pop-bd)}
  .cc-sheet-head b{font-family:var(--font-text);font-size:.74rem;font-weight:800;letter-spacing:.12em;
    text-transform:uppercase;color:var(--cc-mute)}
  .cc-x{display:grid;place-items:center;width:38px;height:38px;flex:none;border:0;border-radius:50%;
    cursor:pointer;background:var(--cc-soft);color:inherit}
  .cc-body{max-height:min(58vh,460px);padding:8px}
  .cc-opt{min-height:50px;font-size:1rem}
  .cc-time{min-height:46px}
  .cc-pop-date{min-width:0}
  .cc-day{min-height:44px;font-size:.98rem}
  .cc-pad{min-height:44px}
  @media (prefers-reduced-motion:no-preference){
    .cc-pop:not([hidden]){animation:cc-up 220ms var(--ease) both}
    @keyframes cc-up{from{transform:translateY(100%)}to{transform:none}}
  }
}

/* Με JavaScript κρύβουμε το native· χωρίς αυτήν μένει ακριβώς όπως ήταν. */
html:not(.has-cc) .cc-btn,html:not(.has-cc) .cc-pop{display:none}