/* ============================================================
   ALFA PLAN CONSTRUCTIONS GROUP — shared design system
   Τυπογραφία, χρώματα, navigation, κινήσεις.
   Άλλαξε εδώ και αλλάζουν όλες οι σελίδες.
   ============================================================ */

:root {
    --navy: #171e19;
    --sage: #b7c6c2;
    --taupe: #9f8d8b;
    --cyan: #d5f4f9;
    --charcoal: #302b2f;

    /* Γραμματοσειρές με πλήρη ελληνική & λατινική υποστήριξη */
    --font-display: 'Fira Sans Extra Condensed', 'Fira Sans Condensed', 'Roboto Condensed', 'Noto Sans Display', Impact, sans-serif;
    --font-body: 'Manrope', 'Noto Sans', system-ui, -apple-system, sans-serif;

    --ease: cubic-bezier(0.16, 1, 0.3, 1);
}

@view-transition { navigation: auto; }

* { -webkit-font-smoothing: antialiased; -moz-osx-font-smoothing: grayscale; }

/* Το overflow-x:hidden δημιουργεί scroll container και σπάει το
   position:sticky των παιδιών — δηλαδή το καρφωμένο hero. Το clip
   κόβει την υπερχείλιση ΧΩΡΙΣ να δημιουργεί scroll container.
   Το hidden μένει ως εφεδρεία για παλιότερους browsers. */
html {
    overflow-x: hidden;
    overflow-x: clip;
}

/* ── ΤΡΙΤΗ ΓΡΑΜΜΗ ΑΜΥΝΑΣ ────────────────────────────────────
   Καμία ενότητα δεν επιτρέπεται να τραβήξει τη σελίδα πλάγια.
   Αρκεί ΕΝΑ παιδί πιο φαρδύ από την οθόνη για να αποκτήσει
   ολόκληρο το έγγραφο οριζόντια κύλιση — και τότε κόβονται τα
   κείμενα παντού, ακόμη κι εκεί που δεν φταίει τίποτα.

   Χρησιμοποιούμε clip και όχι hidden: το hidden θα ανάγκαζε τον
   κάθετο άξονα σε auto, δημιουργώντας scroll container που σπάει
   το position:sticky των παιδιών (τη μπάρα φίλτρων, το hero).

   Το #portal εξαιρείται: το .portal-stage του κάνει ήδη τη δουλειά
   με overflow:hidden, και δεν θέλουμε να πειράξουμε το sticky hero. */
body header:not(.portal),
body section,
body footer,
body main { overflow-x: clip; }

/* ── Η ΠΡΑΓΜΑΤΙΚΗ ΑΙΤΙΑ ΤΗΣ ΟΡΙΖΟΝΤΙΑΣ ΚΥΛΙΣΗΣ ──────────────
   Ένα grid 12 στηλών με κενό 48px χρειάζεται 11 κενά × 48 = 528px
   ΜΟΝΟ για τα κενά — πριν μπει ούτε ένα γράμμα. Τα κενά του grid
   δεν συμπιέζονται ποτέ, όσο στενή κι αν είναι η οθόνη. Σε κινητό
   440px (ωφέλιμο πλάτος 376px) η σελίδα αναγκαζόταν στα 560px, και
   κάθε κείμενο μέσα της στοιχιζόταν σε αυτό το πλάτος — γι' αυτό
   έφευγαν όλα δεξιά και κόβονταν.

   Στο κινητό όλα τα παιδιά είναι col-span-12, δηλαδή πλήρους
   πλάτους· το κενό στηλών δεν εξυπηρετεί τίποτα. Το μηδενίζουμε. */
@media (max-width: 767px) {
    .grid.grid-cols-12 { column-gap: 0; }
}

body {
    font-family: var(--font-body);
    background-color: var(--navy);
    cursor: crosshair;
    overflow-x: hidden;
    overflow-x: clip;
}

/* Το `html` μπροστά ανεβάζει τη specificity ώστε να μη μας
   ακυρώνει το preflight του Tailwind CDN, που φορτώνει μετά. */
html h1, html h2, html h3, html h4, .font-display {
    font-family: var(--font-display);
    font-weight: 800;
    letter-spacing: -0.005em;
    line-height: 0.95;
}

/* Ελαφρώς πιο ανοιχτό tracking στα ελληνικά κεφαλαία — αλλιώς κλείνουν */
html[lang="el"] h1,
html[lang="el"] h2,
html[lang="el"] h3,
html[lang="el"] h4,
html[lang="el"] .font-display { letter-spacing: 0.004em; }

.text-outline {
    -webkit-text-stroke: 1px var(--sage);
    color: transparent;
}

/* ── FIT-TO-WIDTH TYPOGRAPHY ──────────────────────────────────
   Οι τίτλοι υπολογίζονται από JS ώστε να γεμίζουν ακριβώς το
   πλάτος τους — δουλεύει σε κάθε γλώσσα και κάθε οθόνη.        */

.fit {
    display: inline-block;
    white-space: nowrap;
    line-height: 0.86;
    font-size: 11vw; /* αρχική τιμή πριν μπει το JS */
}

/* Δεύτερη γραμμή άμυνας. Τα στοιχεία grid και flex έχουν εξ ορισμού
   min-width:auto — αρνούνται δηλαδή να συρρικνωθούν κάτω από το
   περιεχόμενό τους. Ο τίτλος έχει white-space:nowrap, άρα το
   ελάχιστο πλάτος του είναι ΟΛΟΚΛΗΡΗ η φράση σε μία γραμμή. Αν για
   οποιονδήποτε λόγο βγει μεγαλύτερος από τη στήλη — π.χ. η
   πραγματική γραμματοσειρά φορτώσει αργότερα και είναι φαρδύτερη
   από την εφεδρική — η στήλη ανοίγει, παρασύρει τη σελίδα και ΟΛΑ
   τα κείμενα κόβονται δεξιά. Το clip τον σταματά επιτόπου. */
.fit-wrap {
    display: block;
    width: 100%;
    min-width: 0;
    max-width: 100%;
    overflow-x: clip;   /* μόνο οριζόντια — κάθετα τα γράμματα μένουν ελεύθερα */
}

/* Στο κινητό το 100vh περιλαμβάνει τη μπάρα διευθύνσεων, οπότε το
   περιεχόμενο κόβεται. Το dvh ακολουθεί το πραγματικό ορατό ύψος. */
.min-h-dvh { min-height: 100vh; min-height: 100dvh; }

/* ── NAVIGATION ─────────────────────────────────────────────── */

.mix-blend-nav { mix-blend-mode: difference; }

/* Στις οθόνες αφής το κλείνουμε. Το mix-blend-mode πάνω σε καρφωμένο
   στοιχείο αναγκάζει τον browser να ξανασυνθέτει τη μπάρα με το
   περιεχόμενο που περνά από πίσω σε κάθε καρέ — στα κινητά αυτό
   αφήνει μουτζούρες και ίχνη στο κείμενο καθώς σκρολάρεις.
   Και οι τέσσερις σελίδες έχουν σκούρα κεφαλίδα, οπότε το λευκό
   κείμενο διαβάζεται ούτως ή άλλως χωρίς τη μίξη. */
@media (pointer: coarse) {
    .mix-blend-nav { mix-blend-mode: normal; }
}

.nav-scrolled {
    background-color: rgba(23, 30, 25, 0.95);
    backdrop-filter: blur(8px);
    -webkit-backdrop-filter: blur(8px);
    padding-top: 1.5rem !important;
    padding-bottom: 1.5rem !important;
    mix-blend-mode: normal !important;
}

/* ── ΚΟΥΜΠΙ ΚΛΗΣΗΣ (μόνο κινητό) ─────────────────────────────
   Στο κινητό ολόκληρο το μενού κρύβεται πίσω από το hamburger,
   οπότε δεν υπάρχει καμία ορατή πράξη μέχρι να σκρολάρεις πολύ
   βαθιά. Για κατασκευαστική εταιρεία το τηλέφωνο είναι η πράξη
   με τη μεγαλύτερη αξία — μένει πάντα ένα άγγιγμα μακριά.
   Το εικονίδιο είναι μάσκα CSS και όχι θυγατρικό <svg>, γιατί ο
   μηχανισμός γλώσσας ξαναγράφει innerHTML και θα το έσβηνε. */
.nav-call { display: none; }

@media (max-width: 767px) {
    .nav-call {
        display: inline-flex;
        align-items: center;
        justify-content: center;
        width: 44px;
        height: 44px;
        flex: none;
        border: 1px solid rgba(213, 244, 249, 0.45);
        border-radius: 999px;
        color: var(--cyan);
        transition: background-color 0.3s var(--ease), color 0.3s var(--ease);
    }
    .nav-call::before {
        content: '';
        width: 18px;
        height: 18px;
        background: currentColor;
        -webkit-mask: var(--icon-phone) center / contain no-repeat;
        mask: var(--icon-phone) center / contain no-repeat;
    }
    .nav-call:active {
        background-color: var(--cyan);
        color: var(--navy);
    }
}

:root {
    --icon-phone: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23000' stroke-width='2.1' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M22 16.92v3a2 2 0 0 1-2.18 2 19.79 19.79 0 0 1-8.63-3.07 19.5 19.5 0 0 1-6-6 19.79 19.79 0 0 1-3.07-8.67A2 2 0 0 1 4.11 2h3a2 2 0 0 1 2 1.72 12.84 12.84 0 0 0 .7 2.81 2 2 0 0 1-.45 2.11L8.09 9.91a16 16 0 0 0 6 6l1.27-1.27a2 2 0 0 1 2.11-.45 12.84 12.84 0 0 0 2.81.7A2 2 0 0 1 22 16.92z'/%3E%3C/svg%3E");
}

.nav-link { position: relative; }
.nav-link::after {
    content: '';
    position: absolute;
    left: 0; bottom: -6px;
    width: 0; height: 1px;
    background: currentColor;
    transition: width 0.4s var(--ease);
}
@media (hover: hover) and (pointer: fine) {
    .nav-link:hover::after { width: 100%; }
}
.nav-link[aria-current="page"] { color: var(--sage); }
.nav-link[aria-current="page"]::after { width: 100%; background: var(--sage); }

/* ── ΚΟΥΜΠΙΑ-ΣΦΡΑΓΙΔΑ ─────────────────────────────────────────
   Διπλό μετατοπισμένο περίγραμμα σαν σφραγίδα πιστοποίησης. Στο
   hover το πίσω πλαίσιο κουμπώνει στο μπροστινό και το γέμισμα
   σαρώνει από αριστερά. Ο κύβος στα αριστερά είναι νεύμα στα
   τετράγωνα του λογοτύπου.

   Χρησιμοποιείται και για την ΕΠΙΚΟΙΝΩΝΙΑ (λευκό) και για την
   ΑΝΑΚΥΚΛΩΣΗ (.is-sage). Ίδια γεωμετρία, διαφορετικό χρώμα.     */

/* inline-flex ώστε το πλαίσιο να εφάπτεται ακριβώς στο κουμπί —
   με inline-block το line-height θα πρόσθετε ύψος στα πλαίσια */
.nav-stamp {
    position: relative;
    display: inline-flex;
    isolation: isolate;
    --stamp-ink: #ffffff;
    --stamp-ghost: rgba(255, 255, 255, 0.4);
    --stamp-cube: var(--cyan);
}

.nav-stamp.is-sage {
    --stamp-ink: var(--sage);
    --stamp-ghost: rgba(183, 198, 194, 0.45);
}

/* το πίσω, «ξεκούμπωτο» πλαίσιο */
.nav-stamp::before {
    content: '';
    position: absolute;
    inset: 0;
    border: 1px solid var(--stamp-ghost);
    transform: translate(4px, 4px);
    transition: transform 0.45s var(--ease), opacity 0.45s var(--ease);
    pointer-events: none;
}

/* το γέμισμα που σαρώνει */
.nav-stamp::after {
    content: '';
    position: absolute;
    inset: 0;
    background: var(--stamp-ink);
    transform: scaleX(0);
    transform-origin: left center;
    transition: transform 0.5s var(--ease);
    pointer-events: none;
}

.nav-stamp > a {
    position: relative;
    z-index: 1;
    display: inline-flex;
    align-items: center;
    gap: 0.6rem;
    padding: 0.7rem 1.15rem;
    border: 1px solid var(--stamp-ink);
    color: var(--stamp-ink);
    font-family: var(--font-display);
    font-weight: 800;
    font-size: 14px;
    letter-spacing: 0.15em;
    text-transform: uppercase;
    white-space: nowrap;
    transition: color 0.4s var(--ease);
}

/* σε στενές οθόνες μαζεύουν ώστε να μη στριμώχνει το nav */
@media (max-width: 1279px) {
    .nav-stamp > a { font-size: 13px; letter-spacing: 0.1em; padding: 0.65rem 0.9rem; }
}

/* ο μικρός κύβος πριν την ετικέτα — ψευδοστοιχείο, άρα επιβιώνει
   της αλλαγής γλώσσας που ξαναγράφει το innerHTML */
.nav-stamp > a::before {
    content: '';
    width: 6px;
    height: 6px;
    flex-shrink: 0;
    background: var(--stamp-cube);
    transition: background-color 0.4s var(--ease), transform 0.5s var(--ease);
}

@media (hover: hover) and (pointer: fine) {
    .nav-stamp:hover::before { transform: translate(0, 0); opacity: 0; }
    .nav-stamp:hover::after { transform: scaleX(1); }
    .nav-stamp:hover > a { color: var(--navy); }
    .nav-stamp:hover > a::before { background: var(--navy); transform: rotate(45deg); }
}

/* τρέχουσα σελίδα: μόνιμα γεμάτο, χωρίς το πίσω πλαίσιο */
.nav-stamp[data-current]::after { transform: scaleX(1); }
.nav-stamp[data-current]::before { opacity: 0; }
.nav-stamp[data-current] > a { color: var(--navy); }
.nav-stamp[data-current] > a::before { background: var(--navy); transform: rotate(45deg); }

@media (prefers-reduced-motion: reduce) {
    .nav-stamp::before { transform: none; opacity: 0; }
    .nav-stamp::after,
    .nav-stamp > a,
    .nav-stamp > a::before { transition: none; }
}

/* ── ΚΥΡΙΟ CTA ΤΟΥ NAV: ΑΝΑΚΥΚΛΩΣΗ ───────────────────────────
   Το μοναδικό κουμπί της γραμμής πλοήγησης. Όλα τα υπόλοιπα
   είναι απλοί σύνδεσμοι, ώστε να υπάρχει μία ξεκάθαρη κύρια
   ενέργεια ανά οθόνη.

   Τα δύο εικονίδια μπαίνουν ως CSS mask από SVG data URI, όχι
   ως θυγατρικά στοιχεία: ο μηχανισμός γλώσσας ξαναγράφει το
   innerHTML του συνδέσμου και θα τα εξαφάνιζε.               */

.nav-cta { display: inline-flex; }

.nav-cta > a {
    display: inline-flex;
    align-items: center;
    gap: 0.6rem;
    min-height: 44px;              /* ελάχιστος στόχος αφής */
    padding: 0.72rem 1.3rem;
    border: 1px solid var(--cyan);
    background: var(--cyan);
    color: var(--navy);
    font-family: var(--font-display);
    font-weight: 800;
    font-size: 14px;
    letter-spacing: 0.14em;
    text-transform: uppercase;
    white-space: nowrap;
    /* Μόνο χρώμα αλλάζει — οι διαστάσεις μένουν σταθερές,
       ώστε το hover να μη μετακινεί τα γειτονικά στοιχεία. */
    transition: background-color 0.22s var(--ease),
                border-color 0.22s var(--ease),
                color 0.22s var(--ease);
}

/* σύμβολο ανακύκλωσης */
.nav-cta > a::before {
    content: '';
    width: 18px; height: 18px;
    flex-shrink: 0;
    background: currentColor;
    -webkit-mask: url("data:image/svg+xml,%3Csvg%20xmlns%3D%27http%3A%2F%2Fwww.w3.org%2F2000%2Fsvg%27%20viewBox%3D%270%200%2024%2024%27%20fill%3D%27none%27%20stroke%3D%27black%27%20stroke-width%3D%272.3%27%20stroke-linecap%3D%27round%27%20stroke-linejoin%3D%27round%27%3E%3Cpath%20d%3D%27M7%2019H4.815a1.83%201.83%200%200%201-1.57-.881%201.785%201.785%200%200%201-.004-1.784L7.196%209.5%27%2F%3E%3Cpath%20d%3D%27M11%2019h8.203a1.83%201.83%200%200%200%201.556-.89%201.784%201.784%200%200%200%200-1.775l-1.226-2.12%27%2F%3E%3Cpath%20d%3D%27m14%2016-3%203%203%203%27%2F%3E%3Cpath%20d%3D%27M8.293%2013.596%207.196%209.5%203.1%2010.598%27%2F%3E%3Cpath%20d%3D%27m9.344%205.811%201.093-1.892A1.83%201.83%200%200%201%2011.985%203a1.784%201.784%200%200%201%201.546.888l3.943%206.843%27%2F%3E%3Cpath%20d%3D%27m13.378%209.633%204.096%201.098%201.097-4.096%27%2F%3E%3C%2Fsvg%3E") center / contain no-repeat;
            mask: url("data:image/svg+xml,%3Csvg%20xmlns%3D%27http%3A%2F%2Fwww.w3.org%2F2000%2Fsvg%27%20viewBox%3D%270%200%2024%2024%27%20fill%3D%27none%27%20stroke%3D%27black%27%20stroke-width%3D%272.3%27%20stroke-linecap%3D%27round%27%20stroke-linejoin%3D%27round%27%3E%3Cpath%20d%3D%27M7%2019H4.815a1.83%201.83%200%200%201-1.57-.881%201.785%201.785%200%200%201-.004-1.784L7.196%209.5%27%2F%3E%3Cpath%20d%3D%27M11%2019h8.203a1.83%201.83%200%200%200%201.556-.89%201.784%201.784%200%200%200%200-1.775l-1.226-2.12%27%2F%3E%3Cpath%20d%3D%27m14%2016-3%203%203%203%27%2F%3E%3Cpath%20d%3D%27M8.293%2013.596%207.196%209.5%203.1%2010.598%27%2F%3E%3Cpath%20d%3D%27m9.344%205.811%201.093-1.892A1.83%201.83%200%200%201%2011.985%203a1.784%201.784%200%200%201%201.546.888l3.943%206.843%27%2F%3E%3Cpath%20d%3D%27m13.378%209.633%204.096%201.098%201.097-4.096%27%2F%3E%3C%2Fsvg%3E") center / contain no-repeat;
    transition: transform 0.34s var(--ease);
}

/* βέλος που δείχνει τη μετάβαση */
.nav-cta > a::after {
    content: '';
    width: 14px; height: 14px;
    flex-shrink: 0;
    background: currentColor;
    opacity: 0.55;
    -webkit-mask: url("data:image/svg+xml,%3Csvg%20xmlns%3D%27http%3A%2F%2Fwww.w3.org%2F2000%2Fsvg%27%20viewBox%3D%270%200%2024%2024%27%20fill%3D%27none%27%20stroke%3D%27black%27%20stroke-width%3D%272.5%27%20stroke-linecap%3D%27round%27%20stroke-linejoin%3D%27round%27%3E%3Cpath%20d%3D%27M5%2012h14%27%2F%3E%3Cpath%20d%3D%27m12%205%207%207-7%207%27%2F%3E%3C%2Fsvg%3E") center / contain no-repeat;
            mask: url("data:image/svg+xml,%3Csvg%20xmlns%3D%27http%3A%2F%2Fwww.w3.org%2F2000%2Fsvg%27%20viewBox%3D%270%200%2024%2024%27%20fill%3D%27none%27%20stroke%3D%27black%27%20stroke-width%3D%272.5%27%20stroke-linecap%3D%27round%27%20stroke-linejoin%3D%27round%27%3E%3Cpath%20d%3D%27M5%2012h14%27%2F%3E%3Cpath%20d%3D%27m12%205%207%207-7%207%27%2F%3E%3C%2Fsvg%3E") center / contain no-repeat;
    transition: transform 0.22s var(--ease), opacity 0.22s var(--ease);
}

@media (hover: hover) and (pointer: fine) {
    .nav-cta > a:hover {
        background: var(--navy);
        border-color: var(--cyan);
        color: var(--cyan);
    }
    /* ένα τρίτο της στροφής — όσα και τα βέλη του συμβόλου */
    .nav-cta > a:hover::before { transform: rotate(120deg); }
    .nav-cta > a:hover::after  { transform: translateX(3px); opacity: 1; }
}

.nav-cta > a:active { background: #c2e9f0; }

.nav-cta > a:focus-visible {
    outline: 2px solid #ffffff;
    outline-offset: 3px;
}

/* τρέχουσα σελίδα: αντεστραμμένο, χωρίς βέλος — δεν πας κάπου */
.nav-cta[data-current] > a {
    background: var(--navy);
    color: var(--cyan);
    border-color: var(--cyan);
    cursor: default;
}
.nav-cta[data-current] > a::after { display: none; }

@media (max-width: 1279px) {
    .nav-cta > a { font-size: 13px; letter-spacing: 0.1em; padding: 0.68rem 1rem; gap: 0.5rem; }
    .nav-cta > a::before { width: 16px; height: 16px; }
}

@media (prefers-reduced-motion: reduce) {
    .nav-cta > a,
    .nav-cta > a::before,
    .nav-cta > a::after { transition: none; }
    .nav-cta > a:hover::before { transform: none; }
    .nav-cta > a:hover::after { transform: none; }
}

#mobile-menu { transition: transform 0.6s var(--ease); }
#mobile-menu.open { transform: translateX(0); }

.mobile-overlay {
    opacity: 0;
    pointer-events: none;
    transition: opacity 0.4s ease;
}
.mobile-overlay.open { opacity: 1; pointer-events: auto; }

/* ── LANGUAGE TOGGLE ────────────────────────────────────────── */

/* Οπτικά μένει μικρός, αλλά η περιοχή αφής φτάνει τα 44px μέσω
   ψευδοστοιχείου — δεν μεγαλώνει τη γραμμή του nav. */
.lang-link { position: relative; }
.lang-link::after {
    content: '';
    position: absolute;
    left: 50%; top: 50%;
    width: 44px; height: 44px;
    transform: translate(-50%, -50%);
}

.lang-link.active { color: var(--sage) !important; }
.lang-transition { transition: opacity 0.3s ease; }
.lang-transition.fade { opacity: 0; }

/* ── MOTION ─────────────────────────────────────────────────── */

.floating-blur {
    filter: blur(120px);
    animation: float 12s ease-in-out infinite alternate;
}

@keyframes float {
    0% { transform: translate(0, 0); }
    100% { transform: translate(40px, -60px); }
}

@keyframes bounce-slow {
    0%, 100% { transform: translateY(0); }
    50% { transform: translateY(-10px); }
}

.animate-bounce-slow { animation: bounce-slow 2s ease-in-out infinite; }

.hero-word {
    display: inline-block;
    opacity: 0;
    animation: slideUp 0.6s var(--ease) forwards;
    position: relative;
}

.hero-word + .hero-word { margin-left: 0.28em; }

.hero-word::before {
    content: '';
    position: absolute;
    top: -20px;
    left: 50%;
    transform: translateX(-50%);
    width: 16px;
    height: 10px;
    background: var(--cyan);
    clip-path: polygon(0 0, 100% 0, 80% 100%, 20% 100%);
    opacity: 0;
    animation: inherit;
    animation-name: bucketDrop;
}

@keyframes slideUp {
    0% { transform: translateY(40px); opacity: 0; }
    100% { transform: translateY(0); opacity: 1; }
}

@keyframes bucketDrop {
    0% { transform: translate(-50%, -40px); opacity: 0; }
    50% { transform: translate(-50%, 0); opacity: 1; }
    100% { transform: translate(-50%, -20px); opacity: 0; }
}

.reveal-on-scroll {
    opacity: 0;
    transform: translateY(20px);
    transition: opacity 1s var(--ease), transform 1s var(--ease);
}

.reveal-on-scroll.active { opacity: 1; transform: translateY(0); }

.line-hover-trigger .line {
    width: 40px;
    transition: width 0.4s var(--ease);
}

@media (hover: hover) and (pointer: fine) {
    .line-hover-trigger:hover .line { width: 64px; }
    .arrow-hover:hover iconify-icon { transform: translateX(8px); }
    .project-card:hover img { transform: scale(1.1); }
    .project-card:hover .overlay { opacity: 1; }
}

/* ── FORMS ──────────────────────────────────────────────────── */

.field label {
    display: block;
    font-family: var(--font-display);
    font-size: 11px;
    font-weight: 700;
    letter-spacing: 0.22em;
    text-transform: uppercase;
    color: var(--taupe);
    margin-bottom: 0.35rem;
}

.field input,
.field select,
.field textarea {
    width: 100%;
    background: transparent;
    border: 0;
    border-bottom: 1px solid rgba(255, 255, 255, 0.2);
    padding: 0.9rem 0;
    color: #fff;
    font-family: var(--font-body);
    /* 16px ακριβώς: κάτω από αυτό το iOS Safari κάνει zoom μόλις
       εστιάσει το πεδίο και ο χρήστης χάνει τη θέση του. */
    font-size: 16px;
    transition: border-color 0.4s ease;
}

.field input:focus,
.field select:focus,
.field textarea:focus { outline: none; border-color: var(--cyan); }

.field select option { background: var(--navy); color: #fff; }
.field ::placeholder { color: rgba(255, 255, 255, 0.25); }
input[type="date"] { color-scheme: dark; }

/* Ίδια πεδία, σε ανοιχτό φόντο */
.field.on-light input,
.field.on-light select,
.field.on-light textarea {
    color: var(--navy);
    border-bottom-color: rgba(23, 30, 25, 0.2);
}
.field.on-light input:focus,
.field.on-light select:focus,
.field.on-light textarea:focus { border-bottom-color: var(--navy); }
.field.on-light select option { background: #fff; color: var(--navy); }
.field.on-light ::placeholder { color: rgba(23, 30, 25, 0.28); }
.field.on-light input[type="date"] { color-scheme: light; }

/* Μήνυμα κατάστασης φόρμας */
.form-status {
    grid-column: 1 / -1;
    font-size: 0.9rem;
    line-height: 1.6;
    margin-top: 1rem;
    min-height: 1.4em;
}
.form-status:empty { display: none; }
.form-status.is-busy { color: var(--taupe); }
.form-status.is-ok { color: var(--navy); font-weight: 600; }
.field.on-light ~ .form-status.is-ok,
.form-status.is-ok { color: inherit; }
.form-status.is-fallback { color: var(--taupe); }

/* σε σκούρο φόντο */
#bin-form .form-status.is-ok { color: var(--cyan); }
#bin-form .form-status { color: rgba(255, 255, 255, 0.55); }

/* το πεδίο-παγίδα για bots δεν πρέπει να φαίνεται ούτε να εστιάζεται */
.hp {
    position: absolute !important;
    left: -9999px;
    width: 1px; height: 1px;
    overflow: hidden;
}

/* ── ACCESSIBILITY ──────────────────────────────────────────── */

:focus-visible { outline: 2px solid var(--cyan); outline-offset: 3px; }

@media (prefers-reduced-motion: reduce) {
    .reveal-on-scroll, .hero-word {
        opacity: 1 !important;
        transform: none !important;
        animation: none !important;
    }
    .floating-blur, .animate-bounce-slow { animation: none !important; }
    * { scroll-behavior: auto !important; }
}