/* fonts.css · Discover Andros · self-host (GDPR, design-language §5.6)
 * Commissioner (τίτλοι) και Manrope (κείμενο), variable woff2 από το Google Fonts, άδεια SIL OFL 1.1.
 * Μόνο τα subsets latin, latin-ext, greek. Κατέβηκαν 2026-10-26. */

/* Commissioner · greek */
@font-face {
  font-family: "Commissioner";
  font-style: normal;
  font-weight: 600 700;
  font-display: swap;
  src: url("/assets/fonts/commissioner-greek.woff2") format("woff2");
  unicode-range: U+0370-0377, U+037A-037F, U+0384-038A, U+038C, U+038E-03A1, U+03A3-03FF;
}

/* Commissioner · latin-ext */
@font-face {
  font-family: "Commissioner";
  font-style: normal;
  font-weight: 600 700;
  font-display: swap;
  src: url("/assets/fonts/commissioner-latin-ext.woff2") format("woff2");
  unicode-range: U+0100-02BA, U+02BD-02C5, U+02C7-02CC, U+02CE-02D7, U+02DD-02FF, U+0304, U+0308, U+0329, U+1D00-1DBF, U+1E00-1E9F, U+1EF2-1EFF, U+2020, U+20A0-20AB, U+20AD-20C4, U+2113, U+2C60-2C7F, U+A720-A7FF;
}

/* Commissioner · latin */
@font-face {
  font-family: "Commissioner";
  font-style: normal;
  font-weight: 600 700;
  font-display: swap;
  src: url("/assets/fonts/commissioner-latin.woff2") format("woff2");
  unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+0304, U+0308, U+0329, U+2000-206F, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD;
}

/* Manrope · greek */
@font-face {
  font-family: "Manrope";
  font-style: normal;
  font-weight: 400 700;
  font-display: swap;
  src: url("/assets/fonts/manrope-greek.woff2") format("woff2");
  unicode-range: U+0370-0377, U+037A-037F, U+0384-038A, U+038C, U+038E-03A1, U+03A3-03FF;
}

/* Manrope · latin-ext */
@font-face {
  font-family: "Manrope";
  font-style: normal;
  font-weight: 400 700;
  font-display: swap;
  src: url("/assets/fonts/manrope-latin-ext.woff2") format("woff2");
  unicode-range: U+0100-02BA, U+02BD-02C5, U+02C7-02CC, U+02CE-02D7, U+02DD-02FF, U+0304, U+0308, U+0329, U+1D00-1DBF, U+1E00-1E9F, U+1EF2-1EFF, U+2020, U+20A0-20AB, U+20AD-20C4, U+2113, U+2C60-2C7F, U+A720-A7FF;
}

/* Manrope · latin */
@font-face {
  font-family: "Manrope";
  font-style: normal;
  font-weight: 400 700;
  font-display: swap;
  src: url("/assets/fonts/manrope-latin.woff2") format("woff2");
  unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+0304, U+0308, U+0329, U+2000-206F, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD;
}

/* tokens.css · Discover Andros Rentals
 * Token contract του hypesquared-design-language: primitives από το ζωντανό discoverandros.gr (computed styles 26/10,
 * DESIGN-DIRECTION §0) και τα HOUSE semantic ονόματα. Τα components χρησιμοποιούν μόνο semantic tokens.
 *
 * Αντίθεση (floor, design-language §7): το τιρκουάζ του site #13A89E δίνει 2,95:1 με λευκό, κάτω από το 4,5:1 για
 * κείμενο και το 3:1 για στοιχεία ελέγχου. Ό,τι έχει κείμενο ή είναι κουμπί/σύνδεσμος παίρνει το teal-600 #0F837C
 * (ίδια απόχρωση και κορεσμός, 4,61:1)· το teal-500 μένει μόνο για επιφάνειες χωρίς κείμενο και απαλούς τόνους.
 * Λευκό φόντο: εγκεκριμένο στοιχείο του ζωντανού site, υπερισχύει του default «ποτέ #FFF flat» (§6 Ιεραρχία πηγών).
 */
:root {
  /* PRIMITIVES · τιμές του ζωντανού site */
  --petrol-700: #246A84;   /* κύριο: τίτλοι, footer · 6,05:1 σε λευκό */
  --teal-500: #13A89E;     /* τόνος του brand · μόνο χωρίς κείμενο (2,95:1 με λευκό) */
  --teal-600: #0F837C;     /* ίδιος τόνος, σκουρότερος: κουμπιά, eyebrows, σύνδεσμοι · 4,61:1 με λευκό */
  --grey-600: #616161;     /* κείμενο · 6,19:1 */
  --grey-500: #767676;     /* placeholders, τριτεύον · 4,54:1 */
  --grey-400: #8A8A8A;     /* περίγραμμα πεδίων · 3,45:1 (WCAG 1.4.11) */
  --line-200: #ECECEC;     /* περίγραμμα καρτών, διαχωριστικά (διακοσμητικά) */
  --paper-100: #F4F3F3;    /* πλαίσιο χαρακτηριστικών, ανοιχτές επιφάνειες */
  --white: #FFFFFF;

  /* SEMANTIC · HOUSE ονόματα, ίδια σε κάθε project */
  --bg: var(--white);
  --surface: var(--white);
  --surface-alt: var(--paper-100);
  --fg: var(--grey-600);
  --fg-muted: var(--grey-600);
  --fg-subtle: var(--grey-500);
  --border: var(--grey-400);
  --rule: var(--line-200);
  --accent: var(--teal-600);
  --accent-strong: var(--petrol-700);
  --accent-soft: color-mix(in srgb, var(--teal-500) 12%, var(--white));
  --on-accent: var(--white);
  --accent-hover: color-mix(in srgb, var(--accent) 85%, black);
  --focus-ring: var(--petrol-700);
  --focus-ring-on-dark: var(--white);
  --success: #1F7A3D;  --on-success: var(--white);
  --warning: #B7791F;  --on-warning: var(--white);
  --error: #B42318;    --on-error: var(--white);
  --info: #1D5FA8;     --on-info: var(--white);
  --opacity-disabled: 0.5;
  --dur-fast: 140ms;
  --dur-base: 240ms;
  --dur-slow: 480ms;
  --ease-out: cubic-bezier(0.22, 0.61, 0.36, 1);
  --ease-standard: cubic-bezier(0.4, 0, 0.2, 1);

  /* ΕΠΕΚΤΑΣΕΙΣ PROJECT · ρόλοι του site που δεν έχει το HOUSE */
  --heading: var(--petrol-700);            /* τίτλοι, τίτλοι καρτών, τιμές χαρακτηριστικών */
  --surface-brand: var(--petrol-700);      /* footer, πλαίσιο στοιχείων επικοινωνίας */
  --on-surface-brand: var(--paper-100);    /* κείμενο πάνω στο surface-brand · 5,46:1 */
  --brand-tint: var(--teal-500);           /* διακοσμητικές επιφάνειες χωρίς κείμενο */
  --scrim: color-mix(in srgb, var(--petrol-700) 50%, transparent);         /* φίλτρο φωτογραφιών, άκρες */
  --scrim-strong: color-mix(in srgb, var(--petrol-700) 84%, transparent);  /* πίσω από το κείμενο: λευκό ≥ 4,5:1 στο ανοιχτό νερό (contrast.py 26/10) */

  /* Γραμματοσειρές (fonts.css) */
  --font-head: "Commissioner", system-ui, sans-serif;
  --font-body: "Manrope", system-ui, sans-serif;

  /* Τυπογραφική κλίμακα 1440 → 390 (DESIGN-DIRECTION §0) */
  --fs-h1: clamp(30px, 13.66px + 4.19vw, 74px);   /* γραμμικά: 30 στα 390, 74 στα 1440 */
  --fs-h2: clamp(28px, 22.06px + 1.524vw, 44px);  /* 28 στα 390, 44 στα 1440 */
  --fs-h3: 20px;
  --fs-eyebrow: 16px;
  --fs-body: 16px;
  --fs-lead: 18px;
  --lh-head: 1.2;
  --lh-body: 1.7;

  /* Γωνίες: κάθε επίπεδο δική του (όχι ίδια παντού, design-language ΠΟΤΕ 3) */
  --radius-block: 46px;      /* hero, κεφαλίδες, μπάντα CTA */
  --radius-card: 30px;       /* κάρτες στόλου, πλαίσια */
  --radius-capsule-lg: 200px;
  --radius-capsule-sm: 160px;
  --radius-menu: 20px;       /* υπομενού του header */
  --radius-row: 12px;        /* ερωτήσεις FAQ */
  --radius-btn: 10px;        /* κουμπί header */
  --radius-pill: 100px;      /* κουμπιά ενοτήτων */
  --radius-field: 10px;

  /* Διάταξη */
  --container: 1300px;
  --block-inset: 50px;       /* εσοχή των ενοτήτων-μπλοκ στο desktop · 0 στο κινητό */
  --section-gap: 110px;
  --header-h: 130px;
}

@media (max-width: 767px) {
  :root { --block-inset: 0px; --section-gap: 72px; --header-h: 96px; }
}

/* site.css · Discover Andros Rentals
 * Το design του ζωντανού discoverandros.gr (DESIGN-DIRECTION, computed styles 26/10) σε δικό μας CSS.
 * Μόνο semantic tokens (tokens.css)· καμία τιμή χρώματος εδώ.
 */

/* ---------- βάση ---------- */
*, *::before, *::after { box-sizing: border-box; }
html { -webkit-text-size-adjust: 100%; scroll-padding-top: 24px; }
body { margin: 0; background: var(--bg); color: var(--fg); font: 400 var(--fs-body)/var(--lh-body) var(--font-body); overflow-x: hidden; }
img, svg { display: block; max-width: 100%; }
img { height: auto; }
a { color: inherit; }
h1, h2, h3 { font-family: var(--font-head); color: var(--heading); line-height: var(--lh-head); margin: 0; }
h1 { font-size: var(--fs-h1); font-weight: 700; }
h2 { font-size: var(--fs-h2); font-weight: 700; }
h3 { font-size: var(--fs-h3); font-weight: 600; }
p { margin: 0 0 1em; }
ul { margin: 0; padding: 0; }
button { font: inherit; }
:focus-visible { outline: 3px solid var(--focus-ring); outline-offset: 3px; }
.sr-only { position: absolute; width: 1px; height: 1px; overflow: hidden; clip: rect(0 0 0 0); white-space: nowrap; }
.skip { position: absolute; left: 16px; top: -60px; z-index: 50; padding: 10px 18px; border-radius: var(--radius-btn); background: var(--surface-brand); color: var(--on-surface-brand); font-weight: 700; }
.skip:focus { top: 16px; }
main:focus { outline: none; }
.icon { width: 20px; height: 20px; flex: none; fill: none; stroke: currentColor; stroke-width: 1.7; stroke-linecap: round; stroke-linejoin: round; }

.container { width: 100%; max-width: calc(var(--container) + 20px); margin: 0 auto; padding: 0 10px; }
.container--narrow { max-width: 1000px; }
.container--text { max-width: 1120px; }
.section { padding: var(--section-gap) 0 0; }
.section--first { padding-top: 90px; }
.section-head { max-width: 720px; margin: 0 auto 48px; text-align: center; }
.section-head p:last-child { font-size: var(--fs-lead); margin: 16px 0 0; }
.section-more { display: flex; justify-content: center; margin: 48px 0 0; }
.lead { font-size: var(--fs-lead); line-height: 1.7; }
.lead--center { max-width: 860px; margin: 0 auto 40px; text-align: center; }

/* eyebrow «# …» */
.eyebrow { margin: 0 0 14px; font: 600 var(--fs-eyebrow)/1.2 var(--font-head); color: var(--accent); }
.eyebrow__hash { color: inherit; }

/* ---------- κουμπιά (χάπι + κύκλος με βέλος, όπως στο Novaride) ---------- */
.btn { display: inline-flex; align-items: center; gap: 6px; max-width: 100%; text-decoration: none; font: 700 16px/1 var(--font-body); text-transform: uppercase; letter-spacing: .01em; cursor: pointer; border: 0; background: none; color: inherit; padding: 0; }
/* Μεγάλη ετικέτα σε στενή οθόνη: σπάει σε δύο γραμμές, το βελάκι δεν κόβεται (320px, en/contact-us). */
.btn__label { display: inline-flex; align-items: center; min-width: 0; min-height: 48px; padding: 8px 25px; line-height: 1.2; border-radius: var(--radius-pill); background: var(--accent); color: var(--on-accent); transition: background var(--dur-fast) var(--ease-out); }
.btn__arrow { display: grid; place-items: center; flex: none; width: 48px; height: 48px; border-radius: 50%; background: var(--accent); color: var(--on-accent); transition: transform var(--dur-fast) var(--ease-out), background var(--dur-fast) var(--ease-out); }
.btn__arrow .icon { width: 18px; height: 18px; stroke-width: 2.2; }
.btn:hover .btn__label, .btn:hover .btn__arrow { background: var(--accent-hover); }
.btn:hover .btn__arrow { transform: rotate(45deg); }
.btn--light .btn__label, .btn--light .btn__arrow { background: var(--surface); color: var(--heading); }
.btn--light:hover .btn__label, .btn--light:hover .btn__arrow { background: var(--surface-alt); }
.btn--outline .btn__label { background: transparent; color: var(--accent); box-shadow: inset 0 0 0 2px var(--accent); }
.btn--outline .btn__arrow { background: transparent; color: var(--accent); box-shadow: inset 0 0 0 2px var(--accent); }
.btn--outline:hover .btn__label, .btn--outline:hover .btn__arrow { background: var(--accent-soft); }
.btn--block { width: 100%; }
.btn--block .btn__label { width: 100%; justify-content: center; }
.btn--head { min-height: 48px; padding: 0 25px; border-radius: var(--radius-btn); background: var(--accent); color: var(--on-accent); transition: background var(--dur-fast) var(--ease-out); }
.btn--head:hover { background: var(--accent-hover); }
.btn:active { transform: scale(.98); }
.text-link { display: inline-flex; align-items: center; gap: 6px; color: var(--accent); font-weight: 700; text-decoration: underline; text-underline-offset: 4px; }
.text-link .icon { width: 16px; height: 16px; }
.link-btn { background: none; border: 0; padding: 0; color: inherit; text-decoration: underline; text-underline-offset: 3px; cursor: pointer; }

/* ---------- header ---------- */
.site-head { position: relative; z-index: 20; background: var(--surface); }
.site-head__inner { max-width: calc(var(--container) + 20px); margin: 0 auto; padding: 0 10px; height: var(--header-h); display: flex; align-items: center; justify-content: space-between; gap: 24px; }
.site-head__logo img { width: 228px; height: auto; }
.site-nav { display: flex; align-items: center; gap: 32px; flex: 1; justify-content: space-between; margin-left: 32px; }
.site-nav__list { list-style: none; display: flex; align-items: center; gap: 4px; margin: 0 auto; }
.site-nav__list a { display: inline-flex; align-items: center; gap: 6px; min-height: 44px; padding: 0 15px; white-space: nowrap; text-decoration: none; font: 600 16px/1 var(--font-body); text-transform: uppercase; color: var(--heading); border-radius: var(--radius-btn); }
.site-nav__list a:hover, .site-nav__list a[aria-current="page"] { color: var(--accent); }
.site-nav__lang a { text-transform: none; }
.site-nav__lang .icon { width: 18px; height: 18px; }
.site-head__toggle { display: none; width: 44px; height: 44px; border: 0; border-radius: 8px; background: var(--accent); color: var(--on-accent); cursor: pointer; place-items: center; }
.site-head__toggle .icon { width: 24px; height: 24px; }
.site-head__toggle .icon--close { display: none; }
/* υπομενού Στόλου (ElementsKit του WordPress: πάνελ 20px, 8px 20px ανά γραμμή, άνοιγμα με fade και 10px κίνηση).
 * Φόντο --accent αντί για το #13A89E: εκεί το λευκό κείμενο δίνει 2,95:1, εδώ 4,61:1. */
.site-nav__has-sub { position: relative; display: flex; align-items: center; }
.site-nav__list .site-nav__has-sub > a { padding-right: 2px; }
.site-nav__sub-toggle { display: grid; place-items: center; width: 30px; height: 44px; margin-right: 8px; padding: 0; border: 0; border-radius: var(--radius-btn); background: none; color: var(--heading); cursor: pointer; }
.site-nav__sub-toggle .icon { width: 16px; height: 16px; transition: transform var(--dur-fast) var(--ease-out); }
.site-nav__has-sub:hover > a, .site-nav__has-sub:hover > .site-nav__sub-toggle, .site-nav__sub-toggle[aria-expanded="true"] { color: var(--accent); }
.site-nav__sub-toggle[aria-expanded="true"] .icon { transform: rotate(180deg); }
.site-nav__sub { position: absolute; top: 100%; left: 0; z-index: 30; min-width: 220px; margin: 0; padding: 5px 0; list-style: none; white-space: nowrap; overflow: hidden; background: var(--accent); border-radius: var(--radius-menu); opacity: 0; visibility: hidden; transform: translateY(-10px); transition: opacity var(--dur-base) var(--ease-out), transform var(--dur-base) var(--ease-out), visibility 0s linear var(--dur-base); }
.site-nav__sub--cols { columns: 2; column-gap: 0; }
.site-nav__sub li { break-inside: avoid; }
.site-nav__has-sub.is-open > .site-nav__sub { opacity: 1; visibility: visible; transform: none; transition-delay: 0s; }
@media (hover: hover) and (min-width: 992px) {
  .site-nav__has-sub:hover > .site-nav__sub { opacity: 1; visibility: visible; transform: none; transition-delay: 0s; }
}
.site-nav__list .site-nav__sub a { display: flex; min-height: 44px; padding: 8px 20px; border: 0; border-radius: 0; font: 600 16px/1.7 var(--font-body); text-transform: none; color: var(--on-accent); }
.site-nav__list .site-nav__sub a:hover { color: var(--on-accent); background: var(--accent-hover); }
.site-nav__list .site-nav__sub a[aria-current="page"] { color: var(--on-accent); text-decoration: underline; text-underline-offset: 5px; }
.site-nav__sub a:focus-visible { outline-color: var(--focus-ring-on-dark); outline-offset: -4px; }

/* ---------- hero (στρογγυλεμένο μπλοκ με φωτογραφία) ---------- */
.hero { position: relative; margin: 0 var(--block-inset); border-radius: var(--radius-block); overflow: hidden; min-height: 680px; display: grid; place-items: center; text-align: center; isolation: isolate; }
.hero__media { position: absolute; inset: 0; z-index: -1; }
.hero__media img { width: 100%; height: 100%; object-fit: cover; }
.hero__media::after { content: ""; position: absolute; inset: 0; background: radial-gradient(ellipse 62% 58% at 50% 52%, var(--scrim-strong) 0%, var(--scrim-strong) 45%, var(--scrim) 100%); }
.hero__content { max-width: 960px; padding: 100px 24px; color: var(--on-accent); }
.hero .eyebrow { color: var(--on-accent); }
.hero .eyebrow__hash { color: var(--brand-tint); }
.hero h1 { color: var(--on-accent); margin: 0 0 24px; }
.hero__text { max-width: 760px; margin: 0 auto 32px; font-size: var(--fs-lead); line-height: 1.7; }

/* ---------- «Γιατί εμάς» με τις κάψουλες ---------- */
.about__grid { display: grid; grid-template-columns: 590px 1fr; gap: 60px; align-items: center; }
.about__media { position: relative; height: 662px; }
.capsule { position: absolute; object-fit: cover; }
.capsule--lg { left: 0; top: 0; width: 410px; height: 562px; border-radius: var(--radius-capsule-lg); }
.capsule--sm { left: 269px; top: 222px; width: 321px; height: 440px; border-radius: var(--radius-capsule-sm); border: 8px solid var(--surface); }
.about__body h2 { margin: 0 0 20px; }
.features { list-style: none; margin: 8px 0 32px; }
.feature { display: grid; grid-template-columns: 56px 1fr; gap: 20px; padding: 24px 0; border-bottom: 1px solid var(--rule); }
.feature__icon { display: grid; place-items: center; width: 56px; height: 56px; border-radius: 50%; background: var(--accent-soft); color: var(--heading); }
.feature__icon .icon { width: 26px; height: 26px; stroke-width: 1.5; }
.feature h3 { margin: 4px 0 8px; }
.feature p { margin: 0; font-size: 17px; line-height: 1.6; }

/* ---------- στόλος: πλέγμα 3 (απόφαση Ιωάννη 26/10, πρόταση Α) ---------- */
.car-grid { display: grid; grid-template-columns: repeat(3, 1fr); gap: 30px; }
.car-card { position: relative; display: flex; flex-direction: column; padding: 20px; border: 1px solid var(--rule); border-radius: var(--radius-card); background: var(--surface); transition: border-color var(--dur-fast) var(--ease-out); }
.car-card:hover { border-color: var(--accent); }
.car-card__img { aspect-ratio: 765 / 373; display: grid; place-items: center; }
.car-card__img img { width: 100%; height: 100%; object-fit: contain; }
.car-card__title { margin: 18px 0 4px; font-size: 22px; font-weight: 600; }
.car-card__title a { text-decoration: none; }
.car-card__title a::after { content: ""; position: absolute; inset: 0; border-radius: var(--radius-card); }
.car-card__title a:focus-visible { outline: none; }
.car-card:has(a:focus-visible) { outline: 3px solid var(--focus-ring); outline-offset: 3px; }
.badge { align-self: flex-start; margin: 6px 0 0; padding: 4px 12px; border-radius: var(--radius-pill); background: var(--accent-soft); color: var(--heading); font-size: 14px; font-weight: 600; line-height: 1.4; }
.specs { list-style: none; display: grid; grid-template-columns: 1fr 1fr; gap: 10px 16px; margin: 16px 0 0; padding: 16px 0 0; border-top: 1px solid var(--rule); }
.specs li { display: flex; align-items: center; gap: 8px; font-size: 16px; line-height: 1.4; }
.specs .icon { color: var(--heading); }
.specs b { color: var(--heading); font-weight: 700; }
.car-card__foot { margin: auto 0 0; padding-top: 20px; display: flex; align-items: center; justify-content: space-between; gap: 12px; font-weight: 700; color: var(--heading); }
.circle { display: grid; place-items: center; width: 40px; height: 40px; border-radius: 50%; background: var(--accent); color: var(--on-accent); flex: none; transition: transform var(--dur-fast) var(--ease-out); }
.circle .icon { width: 16px; height: 16px; stroke-width: 2.4; }
.car-card:hover .circle { transform: rotate(45deg); }

.filters { display: flex; flex-wrap: wrap; justify-content: center; gap: 10px; margin: 0 0 32px; }
.chip { min-height: 44px; padding: 0 20px; border-radius: var(--radius-pill); border: 1px solid var(--border); background: var(--surface); color: var(--heading); font-weight: 600; cursor: pointer; }
.chip[aria-pressed="true"] { background: var(--accent); border-color: var(--accent); color: var(--on-accent); }
.filters__empty { text-align: center; margin: 24px 0 0; }
.car-card[hidden] { display: none; }

/* ---------- ερωτήσεις (accordion με <details>) ---------- */
.faq-list { display: grid; gap: 16px; margin: 32px 0 0; }
.faq { border: 1px solid var(--rule); border-radius: var(--radius-row); background: var(--surface); overflow: hidden; }
.faq summary { list-style: none; display: flex; align-items: center; justify-content: space-between; gap: 16px; min-height: 64px; padding: 16px 24px; cursor: pointer; }
.faq summary::-webkit-details-marker { display: none; }
.faq__q { font: 600 18px/1.4 var(--font-body); color: var(--heading); margin: 0; }
.faq__icon .icon { width: 22px; height: 22px; stroke-width: 2.2; color: var(--heading); transition: transform var(--dur-base) var(--ease-out); }
.faq[open] { border-color: var(--accent); }
.faq[open] summary { background: var(--accent); }
.faq[open] .faq__q, .faq[open] .faq__icon .icon { color: var(--on-accent); }
.faq[open] .faq__icon .icon { transform: rotate(45deg); }
.faq__a { padding: 18px 24px 4px; background: var(--accent); color: var(--on-accent); }
.faq__a p { font-size: 17px; line-height: 1.7; }

/* ---------- μπάντα κράτησης ---------- */
.cta-band { margin: var(--section-gap) var(--block-inset) 0; border-radius: var(--radius-block); background: var(--accent); color: var(--on-accent); }
.cta-band__inner { max-width: calc(var(--container) + 20px); margin: 0 auto; padding: 100px 40px; display: grid; grid-template-columns: 1fr 1fr; gap: 40px; align-items: center; }
.cta-band h2 { color: var(--on-accent); margin: 0 0 20px; }
.cta-band p { font-size: var(--fs-lead); line-height: 1.7; margin: 0 0 32px; }

/* ---------- κεφαλίδα εσωτερικών σελίδων ---------- */
.page-head { --bg-lg: none; --bg-sm: none; margin: 0 var(--block-inset); border-radius: var(--radius-block); overflow: hidden; background: var(--surface-brand) var(--bg-lg) center/cover no-repeat; position: relative; isolation: isolate; text-align: center; }
.page-head::after { content: ""; position: absolute; inset: 0; z-index: -1; background: radial-gradient(ellipse 60% 75% at 50% 50%, var(--scrim-strong) 0%, var(--scrim-strong) 40%, var(--scrim) 100%); }
.page-head--plain::after { display: none; }
.page-head__inner { padding: 120px 24px; color: var(--on-accent); }
.page-head h1 { color: var(--on-accent); }
.crumbs ol { list-style: none; display: flex; flex-wrap: wrap; justify-content: center; gap: 8px; margin: 18px 0 0; padding: 0; font: 500 18px/1.5 var(--font-body); }
.crumbs li + li::before { content: "/"; margin-right: 8px; opacity: .8; }
.crumbs a { color: var(--on-accent); text-decoration: underline; text-underline-offset: 4px; }
.crumbs [aria-current] { color: var(--on-surface-brand); }

/* ---------- σελίδα αυτοκινήτου ---------- */
.car-page { display: grid; grid-template-columns: 373px minmax(0, 1fr); gap: 60px; align-items: start; }
.car-specs { position: sticky; top: 24px; padding: 40px; border-radius: var(--radius-card); background: var(--surface-alt); }
.car-specs ul { list-style: none; }
.car-specs li { display: grid; grid-template-columns: 24px 1fr auto; align-items: center; gap: 12px; padding: 14px 0; border-bottom: 1px solid var(--rule); color: var(--heading); font-weight: 500; }
.car-specs li:first-child { border-top: 1px solid var(--rule); }
.car-specs .icon { width: 22px; height: 22px; }
.car-specs b { font-weight: 700; }
.car-page__main h2 { margin: 0 0 18px; }
.car-page__text { font-size: 19px; line-height: 1.75; }
.car-page__img { margin: 24px 0 56px; }
.car-page__img img { margin: 0 auto; }
.form-title { margin: 0; }
.contact-card__form .form-title { margin: 0 0 24px; }
.form-subtitle { margin: 6px 0 24px; font: 700 28px/1.2 var(--font-head); color: var(--accent); }
.more-cars { padding-bottom: 0; }

/* ---------- φόρμα ---------- */
/* minmax(0, …) και min-width: 0: μια στήλη δεν φαρδαίνει πια ως το φυσικό πλάτος του πεδίου της. Στο Safari τα πεδία
   ημερομηνίας και ώρας είναι πιο φαρδιά και έσπρωχναν τη σελίδα σε οριζόντια κύλιση (Ιωάννης 27/10). */
.form { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 18px 16px; }
.field { display: grid; gap: 6px; min-width: 0; }
.field--full { grid-column: 1 / -1; }
.field label { font: 600 15px/1.3 var(--font-body); color: var(--heading); }
.req { font-weight: 400; color: var(--fg-muted); font-size: 13px; }
.field input, .field select, .field textarea { width: 100%; min-width: 0; min-height: 48px; padding: 10px 14px; border: 1px solid var(--border); border-radius: var(--radius-field); background: var(--surface); color: var(--fg); font: 400 16px/1.4 var(--font-body); }
.field textarea { min-height: 96px; resize: vertical; }
/* Μόνο iOS (το feature query δεν ταιριάζει αλλού): χωρίς την εγγενή εμφάνιση το πεδίο ημερομηνίας/ώρας σέβεται το πλάτος. */
@supports (-webkit-touch-callout: none) {
  .field input[type="date"], .field input[type="time"] { -webkit-appearance: none; appearance: none; display: block; }
}
.field input::-webkit-date-and-time-value { text-align: left; }
.field input:focus-visible, .field select:focus-visible, .field textarea:focus-visible { outline: 3px solid var(--focus-ring); outline-offset: 1px; border-color: var(--heading); }
.field [aria-invalid="true"] { border-color: var(--error); }
.select { position: relative; }
.select select { appearance: none; padding-right: 44px; }
.select__icon { position: absolute; right: 14px; top: 50%; transform: translateY(-50%); pointer-events: none; color: var(--heading); fill: none; stroke: currentColor; stroke-width: 2; width: 18px; height: 18px; }
.hint { margin: 0; font-size: 14px; color: var(--fg-muted); }
.form__hp { position: absolute; left: -9999px; width: 1px; height: 1px; overflow: hidden; }
.form__privacy { margin: 0; font-size: 14px; }
.form__privacy a { color: var(--heading); }
.form__status { padding: 16px 18px; border-radius: var(--radius-row); font-size: 16px; }
.form__status p { margin: 0; display: flex; gap: 10px; align-items: flex-start; }
.form__status p + p { margin-top: 6px; }
.form__status .icon { margin-top: 2px; }
.form__status[data-kind="ok"] { background: var(--accent-soft); color: var(--heading); }
.form__status[data-kind="error"] { background: color-mix(in srgb, var(--error) 10%, var(--surface)); color: var(--error); }
.form__ok-title { font-weight: 700; }
.form[aria-busy="true"] [data-submit] { opacity: var(--opacity-disabled); pointer-events: none; }

/* ---------- επικοινωνία ---------- */
.contact-card { display: grid; grid-template-columns: minmax(0, 1.25fr) minmax(0, 1fr); gap: 36px; padding: 36px; border: 1px solid var(--rule); border-radius: var(--radius-card); background: var(--surface); }
.contact-card__info { position: relative; overflow: hidden; padding: 36px; border-radius: var(--radius-card); background: var(--surface-brand); color: var(--on-surface-brand); isolation: isolate; }
.contact-card__info::before, .contact-card__info::after { content: ""; position: absolute; z-index: -1; border-radius: 50%; background: color-mix(in srgb, var(--on-surface-brand) 12%, transparent); }
.contact-card__info::before { width: 100px; height: 100px; right: 70px; bottom: 80px; }
.contact-card__info::after { width: 240px; height: 240px; right: -60px; bottom: -90px; }
.contact-card__info h2 { color: var(--on-surface-brand); margin: 0 0 18px; }
.contact-list { list-style: none; display: grid; gap: 14px; margin: 24px 0; }
.contact-list li { display: flex; align-items: center; gap: 12px; }
.contact-list a { text-decoration: none; }
.contact-list a:hover { text-decoration: underline; text-underline-offset: 3px; }
.static-map { position: relative; margin: 0; border-radius: var(--radius-card); overflow: hidden; background: var(--surface-alt); }
.static-map img { width: 100%; height: 520px; object-fit: cover; filter: saturate(.75) hue-rotate(-8deg); }
.static-map__pin { position: absolute; left: 50%; top: 50%; width: 38px; height: 54px; transform: translate(-50%, -100%); filter: drop-shadow(0 2px 2px rgb(0 0 0 / .3)); }
.static-map__pin-body { fill: var(--surface-brand); stroke: var(--surface); stroke-width: 1.5; }
.static-map figcaption { position: absolute; right: 0; bottom: 0; padding: 4px 10px; background: color-mix(in srgb, var(--surface) 92%, transparent); font-size: 13px; border-top-left-radius: 8px; }
.static-map figcaption a { color: var(--fg); }

/* ---------- νομικά ---------- */
.legal h2 { font-size: 26px; margin: 40px 0 14px; }
.legal h2:first-of-type { margin-top: 0; }
.legal p, .legal li { font-size: 18px; line-height: 1.7; color: var(--heading); }
.legal ul { padding-left: 1.3em; margin: 0 0 1em; }
.legal li { margin: 0 0 .4em; }
.legal__updated { font-weight: 700; }
.notfound__actions { display: flex; flex-wrap: wrap; gap: 16px; margin: 24px 0 0; }
.notfound__en { margin-top: 64px; padding-top: 40px; border-top: 1px solid var(--rule); }

/* ---------- footer ---------- */
.site-foot { margin-top: var(--section-gap); background: var(--surface-brand) url("/assets/img/brand/footer-bg.svg") center top / cover no-repeat; color: var(--on-surface-brand); }
.site-foot__inner { max-width: calc(var(--container) + 20px); margin: 0 auto; padding: 70px 10px 40px; display: grid; grid-template-columns: 1.2fr 1fr 1fr; gap: 40px; }
.site-foot__brand img { width: 228px; margin-bottom: 8px; }
.site-foot__title { font: 600 20px/1.2 var(--font-head); color: var(--on-surface-brand); text-transform: uppercase; margin: 0 0 20px; }
.link-list { list-style: none; display: grid; gap: 10px; }
.link-list a { text-decoration: none; }
.link-list a:hover { text-decoration: underline; text-underline-offset: 3px; }
.site-foot__bar { max-width: calc(var(--container) + 20px); margin: 0 auto; padding: 24px 10px; display: flex; align-items: center; justify-content: space-between; gap: 16px; border-top: 1px solid color-mix(in srgb, var(--on-surface-brand) 25%, transparent); font-size: 15px; }
.site-foot__bar p { margin: 0; }
.site-foot :focus-visible { outline-color: var(--focus-ring-on-dark); }
.social { list-style: none; display: flex; gap: 10px; }
.social a { display: grid; place-items: center; width: 44px; height: 44px; border-radius: 50%; border: 1.5px solid currentColor; }
.social .icon { width: 18px; height: 18px; }
.social a:hover { background: color-mix(in srgb, var(--on-surface-brand) 15%, transparent); }
.contact-card__info :focus-visible { outline-color: var(--focus-ring-on-dark); }

/* ---------- παράθυρο συγκατάθεσης ---------- */
.consent { position: fixed; left: 16px; right: 16px; bottom: 16px; z-index: 60; max-width: 560px; margin: 0 auto; padding: 22px; border-radius: var(--radius-row); background: var(--surface); border: 1px solid var(--rule); box-shadow: 0 8px 30px rgb(0 0 0 / .14); }
.consent__title { font: 700 18px/1.3 var(--font-head); color: var(--heading); margin: 0 0 8px; }
.consent p { font-size: 15px; }
.consent a { color: var(--heading); }
.consent__actions { display: grid; grid-template-columns: 1fr 1fr; gap: 12px; }
.consent__actions .btn { justify-content: center; min-height: 48px; padding: 0 20px; border-radius: var(--radius-pill); background: var(--accent); color: var(--on-accent); }

/* ---------- κίνηση (MOTION_INTENSITY 2: fade-in όπως στο Elementor) ---------- */
.js .reveal { opacity: 0; transform: translateY(16px); transition: opacity var(--dur-slow) var(--ease-out), transform var(--dur-slow) var(--ease-out); }
.js .reveal.is-in { opacity: 1; transform: none; }
@media (prefers-reduced-motion: reduce) {
  *, *::before, *::after { transition-duration: 0s !important; animation-duration: 0s !important; }
  .js .reveal { opacity: 1; transform: none; }
}

/* ---------- responsive ---------- */
@media (max-width: 1199px) {
  .site-nav { gap: 16px; margin-left: 16px; }
  .site-nav__list a { padding: 0 10px; font-size: 15px; }
  .site-nav__list .site-nav__has-sub > a { padding-right: 0; }
  .site-nav__sub-toggle { width: 20px; margin-right: 4px; }
  .site-nav__sub-toggle .icon { width: 14px; height: 14px; }
  .about__grid { grid-template-columns: 1fr 1fr; gap: 40px; }
  .about__media { height: 560px; }
  .capsule--lg { width: 72%; height: 85%; }
  .capsule--sm { left: auto; right: 0; top: auto; bottom: 0; width: 56%; height: 66%; }
  .car-page { grid-template-columns: 320px minmax(0, 1fr); gap: 40px; }
}
/* 992 έως 1099: μενού και «Κάντε κράτηση» σε μία γραμμή (πριν έσπαγαν σε δύο στα 992) */
@media (min-width: 992px) and (max-width: 1099px) {
  .site-nav { gap: 12px; margin-left: 12px; }
  .site-nav__list a { padding: 0 8px; font-size: 14px; }
}
@media (max-width: 991px) {
  .site-head__toggle { display: grid; }
  .site-nav { position: absolute; left: 0; right: 0; top: 100%; margin: 0; display: none; flex-direction: column; align-items: stretch; gap: 16px; padding: 16px 20px 24px; background: var(--surface); border-top: 1px solid var(--rule); box-shadow: 0 16px 24px rgb(0 0 0 / .08); }
  .site-head.is-open .site-nav { display: flex; }
  .site-head.is-open .icon--menu { display: none; }
  .site-head.is-open .icon--close { display: block; }
  .site-nav__list { flex-direction: column; align-items: stretch; margin: 0; }
  .site-nav__list a { min-height: 48px; font-size: 16px; border-bottom: 1px solid var(--rule); border-radius: 0; }
  .site-nav__cta { justify-content: center; }
  .site-nav__has-sub { flex-wrap: wrap; }
  .site-nav__list .site-nav__has-sub > a { flex: 1; }
  .site-nav__sub-toggle { width: 48px; height: 48px; margin: 0; border-bottom: 1px solid var(--rule); border-radius: 0; }
  .site-nav__sub { position: static; flex-basis: 100%; display: none; margin: 8px 0 4px; columns: auto; opacity: 1; visibility: visible; transform: none; transition: none; }
  .site-nav__has-sub.is-open > .site-nav__sub { display: block; }
  .about__grid { grid-template-columns: 1fr; }
  .about__media { max-width: 560px; width: 100%; margin: 0 auto; height: 520px; }
  .car-grid { grid-template-columns: 1fr 1fr; gap: 20px; }
  .cta-band__inner { grid-template-columns: 1fr; padding: 72px 32px; }
  .car-page { grid-template-columns: minmax(0, 1fr); }
  .car-specs { position: static; }
  .contact-card { grid-template-columns: minmax(0, 1fr); padding: 24px; }
  .site-foot__inner { grid-template-columns: 1fr 1fr; }
  .site-foot__brand { grid-column: 1 / -1; }
}
@media (max-width: 767px) {
  .hero { border-radius: 0; min-height: 560px; }
  .hero__content { padding: 72px 20px; }
  .page-head { border-radius: 0; background-image: var(--bg-sm); }
  .page-head__inner { padding: 72px 20px; }
  .crumbs ol { font-size: 16px; }
  .cta-band { border-radius: 0; }
  .cta-band__inner { padding: 56px 20px; }
  .section--first { padding-top: 56px; }
  .section-head { margin-bottom: 32px; }
  .about__media { height: 440px; }
  .site-head__logo img { width: 180px; }
}
@media (max-width: 680px) {
  .car-grid { grid-template-columns: 1fr; }
  .form { grid-template-columns: minmax(0, 1fr); }
  .site-foot__inner { grid-template-columns: 1fr; padding-top: 56px; }
  .site-foot__bar { flex-direction: column; align-items: flex-start; }
  .contact-card__info { padding: 28px 22px; }
  .consent__actions { grid-template-columns: 1fr 1fr; }
  .static-map img { height: 380px; }
  .feature { grid-template-columns: 48px 1fr; gap: 16px; }
  .feature__icon { width: 48px; height: 48px; }
  .car-specs { padding: 28px 22px; }
  .btn__label { padding-inline: 20px; }
}
@media (max-width: 380px) {
  .about__media { height: 380px; }
  .specs { grid-template-columns: 1fr; }
  .btn__label { padding-inline: 16px; font-size: 15px; }
  .site-head__logo img { width: 160px; }
}

.static-map__pin-dot { fill: var(--surface); }