/* ============================================================
   SERVICE PAGE — συμπλήρωμα του styles.css
   Οι σελίδες υπηρεσίας χρησιμοποιούν ΤΟ ΙΔΙΟ nav, footer και
   ta-* σύστημα με την αρχική. Εδώ μπαίνει μόνο ό,τι δεν υπάρχει:
   το μικρό hero και η τυπογραφία κειμένου μέσα στο .ta-box.
   ============================================================ */

/* ── Μικρό hero ── */
.svc-hero {
    position: relative;
    background-color: var(--gold);
    background-image:
        linear-gradient(to right, rgba(13,26,45,0.86) 0%, rgba(13,26,45,0.60) 60%, rgba(13,26,45,0.80) 100%),
        url('688bc305-6129-4485-a56f-d72fdc729791.png');
    background-size: cover;
    background-position: center center;
    padding: 118px 0 52px;
}
.svc-hero-in {
    max-width: 1100px; margin: 0 auto; padding: 0 24px;
    display: flex; align-items: center; gap: 34px;
}
.svc-hero-logo { width: 96px; height: 96px; flex-shrink: 0; }
.svc-hero-logo img { width: 100%; height: 100%; object-fit: contain; display: block; }
.svc-hero-txt { min-width: 0; }
.svc-hero .svc-kicker {
    font-family: 'Barlow Condensed', sans-serif;
    font-size: 12.5px; letter-spacing: 3.4px; text-transform: uppercase;
    color: var(--warm); font-weight: 600; margin: 0 0 10px;
}
.svc-hero h1 {
    font-family: 'Playfair Display', serif; font-weight: 700;
    font-size: clamp(26px, 4.2vw, 42px); line-height: 1.14;
    color: var(--white); margin: 0 0 14px;
}
.svc-hero .svc-lede {
    font-family: 'Source Sans 3', sans-serif;
    font-size: clamp(15.5px, 1.7vw, 18px); line-height: 1.66;
    color: rgba(255,255,255,0.88); margin: 0;
}
.svc-hero .svc-lede strong { color: var(--warm2); font-weight: 600; }
@media (max-width: 700px) {
    .svc-hero { padding: 84px 0 38px; }
    .svc-hero-in { padding: 0 20px; gap: 18px; flex-direction: column; align-items: flex-start; }
    .svc-hero-logo { width: 74px; height: 74px; margin-left: 12px; }
    .svc-hero-logo img { width: 60px; height: 60px; }
}

/* ── Breadcrumb ── */
.svc-crumb {
    max-width: 1100px; margin: 0 auto; padding: 18px 24px 0;
    font-family: 'Source Sans 3', sans-serif; font-size: 13px; color: var(--stone);
}
.svc-crumb a { color: var(--gold2); text-decoration: none; }
.svc-crumb a:hover { text-decoration: underline; }

/* ── Κείμενο μέσα στο .ta-box — ΠΛΗΡΕΣ πλάτος, ίδιο padding 24px ── */
.svc-prose { padding: 6px 24px 2px; }
.svc-prose h2 {
    font-family: 'Playfair Display', serif; font-weight: 700;
    font-size: clamp(20px, 2.7vw, 27px); line-height: 1.3;
    color: var(--gold); margin: 20px 0 12px;
}
.svc-prose h2:first-child { margin-top: 6px; }
.svc-prose h3 {
    font-family: 'Barlow Condensed', sans-serif; font-weight: 600;
    font-size: 18px; letter-spacing: 1.3px; text-transform: uppercase;
    color: var(--gold2); margin: 22px 0 8px;
}
.svc-prose p,
.svc-prose li {
    font-family: 'Source Sans 3', sans-serif;
    font-size: 16.5px; line-height: 1.74; color: var(--ink2);
}
.svc-prose p  { margin: 0 0 13px; }
.svc-prose ul { margin: 0 0 13px; padding-left: 20px; }
.svc-prose li { margin-bottom: 7px; }
.svc-prose li::marker { color: var(--warm); }
.svc-prose strong { color: var(--ink); font-weight: 600; }

/* ── FAQ (μέσα στο ta-box) ── */
.svc-faq { padding: 2px 24px 18px; }
.svc-faq details { border-bottom: 1px solid rgba(201,168,108,.3); padding: 13px 0; }
.svc-faq details:last-child { border-bottom: none; }
.svc-faq summary {
    cursor: pointer; list-style: none;
    font-family: 'Barlow Condensed', sans-serif; font-size: 18px;
    letter-spacing: 0.7px; color: var(--gold);
    display: flex; justify-content: space-between; align-items: center; gap: 14px;
}
.svc-faq summary::-webkit-details-marker { display: none; }
.svc-faq summary::after { content: '+'; font-size: 21px; color: var(--warm); flex-shrink: 0; line-height: 1; }
.svc-faq details[open] summary::after { content: '\2212'; }
.svc-faq details p {
    font-family: 'Source Sans 3', sans-serif;
    margin: 11px 0 2px; font-size: 16px; line-height: 1.72; color: var(--ink2);
}
.svc-faq details p strong { color: var(--ink); font-weight: 600; }

/* ── Σχετικές υπηρεσίες ── */
.svc-related {
    padding: 4px 24px 22px;
    display: grid; grid-template-columns: repeat(auto-fit, minmax(230px, 1fr)); gap: 13px;
}
.svc-related a {
    display: block; background: var(--cream); text-decoration: none;
    border: 1px solid rgba(201,168,108,.45); padding: 16px 18px;
    transition: border-color .25s, transform .25s, box-shadow .25s;
}
.svc-related a:hover { border-color: var(--warm); transform: translateY(-2px); box-shadow: 0 6px 20px rgba(0,0,0,.07); }
.svc-related b {
    display: block; font-family: 'Barlow Condensed', sans-serif;
    font-size: 17px; letter-spacing: 0.8px; color: var(--gold); margin-bottom: 4px;
}
.svc-related span { font-family: 'Source Sans 3', sans-serif; font-size: 14.5px; color: var(--stone); line-height: 1.55; }

/* ── Οι κάρτες του tapGrid όταν γίνονται σύνδεσμοι ── */
a.tap-item-link { text-decoration: none; color: inherit; display: block; transition: opacity .2s; }
a.tap-item-link:hover .tap-item-t { color: var(--warm); text-decoration: underline; }

/* ============================================================
   ΕΥΘΥΓΡΑΜΜΙΣΕΙΣ & ΣΥΜΜΕΤΡΙΕΣ
   Ο κατακόρυφος άξονας είναι ένας: max-width 1100px, padding 24px.
   Τον ακολουθούν hero, breadcrumb και κάθε ενότητα του .ta-box.
   ============================================================ */

/* Τα τέσσερα βήματα: ίσα ύψη, ίσο εσωτερικό περιθώριο */
.ta-steps { align-items: stretch; }
.ta-steps > li { display: flex; align-items: flex-start; }

/* Οι κάρτες «σχετικές υπηρεσίες»: ίσα ύψη σε κάθε σειρά */
.svc-related { align-items: stretch; grid-auto-rows: 1fr; }
.svc-related a { display: flex; flex-direction: column; justify-content: flex-start; }

/* Τα τέσσερα στατιστικά: ίσο μερίδιο πλάτους, κεντραρισμένα μεταξύ τους */
.ta-stat-strip > .ta-stat { flex: 1 1 0; min-width: 0; }

/* Το lang-toggle στις σελίδες υπηρεσίας είναι <a>, όχι <button> */
.lang-toggle a.lang-btn {
    display: flex; align-items: center;
    text-decoration: none; cursor: pointer;
}
.lang-toggle a.lang-btn .lcode { text-decoration: none; }

/* Ο τίτλος του hero και το κείμενο ξεκινούν από τον ίδιο άξονα */
.svc-hero-txt > * { max-width: 78ch; }

/* Ίδιο περιθώριο με τις υπόλοιπες ενότητες του κουτιού */
.svc-prose > h2:first-child { margin-top: 10px; }
.svc-prose > *:last-child { margin-bottom: 4px; }

/* ============================================================
   ΟΠΤΙΚΗ ΑΝΑΒΑΘΜΙΣΗ
   ============================================================ */

/* ── Ασφάλεια: χωρίς JavaScript το περιεχόμενο μένει ορατό ── */
html:not(.js) [data-reveal] { opacity: 1 !important; transform: none !important; }

/* ── Μπάρα προόδου ανάγνωσης ── */
#progress {
    position: fixed; top: 0; left: 0; height: 2px; width: 0%;
    background: linear-gradient(90deg, var(--warm), var(--warm2));
    z-index: 9999; transition: width 0.1s linear;
}

/* ── HERO: βάθος, πλέγμα σχεδίασης, χρυσή βάση ── */
.svc-hero { overflow: hidden; isolation: isolate; }
.svc-hero::before {
    content: ''; position: absolute; inset: 0; z-index: 0; pointer-events: none;
    background-image:
        linear-gradient(rgba(201,168,108,0.055) 1px, transparent 1px),
        linear-gradient(90deg, rgba(201,168,108,0.055) 1px, transparent 1px);
    background-size: 46px 46px;
    mask-image: radial-gradient(ellipse 80% 70% at 30% 50%, #000 20%, transparent 78%);
    -webkit-mask-image: radial-gradient(ellipse 80% 70% at 30% 50%, #000 20%, transparent 78%);
}
.svc-hero::after {
    content: ''; position: absolute; left: 0; right: 0; bottom: 0; height: 2px; z-index: 2;
    background: linear-gradient(90deg, transparent, var(--warm) 22%, var(--warm2) 50%, var(--warm) 78%, transparent);
    opacity: 0.85;
}
.svc-hero-in { position: relative; z-index: 1; }

/* Το λογότυπο σε χρυσό δαχτυλίδι με απαλή λάμψη */
.svc-hero-logo {
    position: relative; width: 108px; height: 108px;
    display: flex; align-items: center; justify-content: center;
    border-radius: 50%;
    background: radial-gradient(circle at 50% 45%, rgba(46,95,138,0.42), rgba(29,58,92,0) 68%);
}
.svc-hero-logo::before {
    content: ''; position: absolute; inset: -9px; border-radius: 50%;
    border: 1px solid rgba(201,168,108,0.42);
}
.svc-hero-logo::after {
    content: ''; position: absolute; inset: -19px; border-radius: 50%;
    border: 1px solid rgba(201,168,108,0.16);
}
.svc-hero-logo img { width: 88px; height: 88px; filter: drop-shadow(0 6px 18px rgba(0,0,0,0.45)); }

/* Είσοδος κειμένου */
@keyframes svcUp { from { opacity: 0; transform: translateY(16px); } to { opacity: 1; transform: none; } }
.js .svc-hero .svc-kicker { animation: svcUp .7s var(--ease) .05s both; }
.js .svc-hero h1          { animation: svcUp .8s var(--ease) .16s both; }
.js .svc-hero .svc-lede   { animation: svcUp .8s var(--ease) .28s both; }
.js .svc-hero-logo        { animation: svcUp .9s var(--ease) both; }
@media (prefers-reduced-motion: reduce) {
    .js .svc-hero .svc-kicker, .js .svc-hero h1,
    .js .svc-hero .svc-lede, .js .svc-hero-logo { animation: none; }
}

/* ── Το κουτί περιεχομένου: περισσότερο βάθος ── */
.ta-box { box-shadow: 0 18px 60px rgba(13,26,45,.16), 0 3px 10px rgba(13,26,45,.07); }

/* ── Στατιστικά ──
   Η χρυσή γραμμή που έμπαινε κάτω δεξιά από κάθε στοιχείο αφαιρέθηκε:
   δεν διαχώριζε τίποτα και έκοβε οπτικά τη λωρίδα. */
.ta-stat-val { font-variant-numeric: tabular-nums; }

/* ── Βήματα: υπογράμμιση στο πέρασμα ── */
.ta-steps > li { transition: background .3s; border-radius: 3px; }
.ta-steps > li:hover { background: rgba(201,168,108,.07); }
.ta-step-num { transition: color .3s, transform .3s; }
.ta-steps > li:hover .ta-step-num { color: var(--gold2); transform: translateY(-1px); }

/* ── Κάρτες σχετικών: βέλος που προχωρά ── */
.svc-related a { position: relative; padding-right: 34px; }
.svc-related a::after {
    content: '\2192'; position: absolute; right: 16px; top: 16px;
    color: var(--warm); font-size: 17px; opacity: 0;
    transform: translateX(-6px); transition: opacity .28s, transform .28s;
}
.svc-related a:hover::after { opacity: 1; transform: translateX(0); }

/* ── FAQ: απαλό φόντο στο ανοιχτό ── */
.svc-faq details[open] { background: rgba(201,168,108,.05); border-radius: 3px; padding-left: 10px; padding-right: 10px; }

/* ── Lang toggle: σε μικρές οθόνες μόνο οι κωδικοί ── */
@media (max-width: 560px) {
    .lang-toggle .lflag { display: none; }
    .lang-toggle { padding: 3px 4px; }
    .lang-toggle a.lang-btn { padding: 4px 8px; gap: 0; }
}

/* ── Κινητό: το λογότυπο μικραίνει ώστε τα δαχτυλίδια να μην κόβονται.
   Μπαίνει στο τέλος γιατί ο κανόνας .svc-hero-logo της αναβάθμισης
   ορίζεται πιο πάνω και διαφορετικά θα υπερίσχυε. ── */
@media (max-width: 700px) {
    .svc-hero-logo { width: 76px; height: 76px; margin-left: 14px; }
    .svc-hero-logo img { width: 60px; height: 60px; }
    .svc-hero-logo::before { inset: -7px; }
    .svc-hero-logo::after  { inset: -14px; }
}

/* ============================================================
   ΠΛΑΤΟΣ — ΤΟ ΙΔΙΟ ΜΕ ΤΗΝ ΚΕΝΤΡΙΚΗ
   Η κεντρική χρησιμοποιεί .tap-outer / .ta-dual-row:
   max-width 1400px με padding 0 48px  ->  1304px περιεχόμενο.
   Οι σελίδες υπηρεσίας ακολουθούν ακριβώς αυτό.
   ============================================================ */
body .svc-hero-in,
body .svc-crumb,
body .ta-wrap {
    max-width: 1400px;
    padding-left: 48px;
    padding-right: 48px;
}
body .ta-wrap { padding-top: 48px; padding-bottom: 48px; }
body .ta-box  { max-width: none; }
body .svc-crumb { padding-top: 20px; padding-bottom: 0; }

/* Το κείμενο πιάνει όλο το πλάτος του κουτιού — κανένα max-width */
.svc-prose p, .svc-prose ul, .svc-prose li, .svc-prose h2, .svc-prose h3,
.svc-hero-txt > *, .svc-faq details p { max-width: none; }

@media (max-width: 900px) {
    body .svc-hero-in, body .svc-crumb, body .ta-wrap {
        padding-left: 16px; padding-right: 16px;
    }
}

/* Το εισαγωγικό, τώρα μέσα στο λευκό κουτί και όχι στο μπλε hero */
.svc-prose .svc-intro {
    font-size: 16.5px;
    line-height: 1.74;
    color: var(--ink);
    margin: 4px 0 20px;
    padding-left: 16px;
    border-left: 3px solid var(--warm);
}
.svc-prose .svc-intro strong { font-weight: 600; }

/* Το hero κρατά μόνο λογότυπο, kicker και τίτλο — πιο ήσυχο, πιο κοφτό */
.svc-hero { padding-top: 104px; padding-bottom: 46px; }
@media (max-width: 700px) { .svc-hero { padding-top: 82px; padding-bottom: 34px; } }


/* ============================================================
   ΤΥΠΟΓΡΑΦΙΚΗ ΟΜΟΙΟΓΕΝΕΙΑ ΜΕΣΑ ΣΤΟ ΚΟΥΤΙ
   Πριν: οι h2 ήταν Playfair/navy/πεζά, οι h3 Barlow/γαλάζιο/ΚΕΦΑΛΑΙΑ
   και οι ερωτήσεις του FAQ Barlow — τρεις διαφορετικές οικογένειες,
   τρία χρώματα, δύο τρόποι γραφής. Τώρα μία οικογένεια, ένα χρώμα,
   κανονική γραφή· η ιεραρχία δηλώνεται ΜΟΝΟ με το μέγεθος.
   ============================================================ */
.svc-prose h2,
.svc-prose h3,
.svc-faq summary {
    font-family: 'Playfair Display', Georgia, serif;
    color: var(--gold);
    text-transform: none;
    letter-spacing: 0;
    font-weight: 700;
}
.svc-prose h2   { font-size: clamp(21px, 2.6vw, 27px); line-height: 1.3;  margin: 26px 0 12px; }
/* Ο h3 είχε το ίδιο βάρος με τον h2 και μόνο 6px μικρότερο μέγεθος — η
   σχέση τους διαβαζόταν ως δύο διαφορετικές γραμματοσειρές αντί για δύο
   βαθμίδες. Ίδια οικογένεια, κανονικό βάρος: η ιεραρχία γίνεται σαφής. */
.svc-prose h3   { font-size: clamp(19px, 2.1vw, 22px); line-height: 1.35; margin: 24px 0 10px;
                  font-weight: 400; }
.svc-faq summary{ font-size: clamp(17px, 1.9vw, 20px); line-height: 1.4; }
.svc-prose h2:first-child, .svc-prose > .svc-intro + h2 { margin-top: 10px; }

/* Κινητό: τα τέσσερα στατιστικά να αναδιπλώνονται 2×2 όπως στην κεντρική,
   αντί να στριμώχνονται σε τέσσερις στήλες των ~70px. */
@media (max-width: 700px) {
    .ta-stat-strip > .ta-stat { flex: 0 1 auto; }
}

/* ── Γρήγορη επικοινωνία, αμέσως μετά το εισαγωγικό ──
   Το τηλέφωνο πρέπει να είναι ορατό χωρίς κύλιση. */
.svc-quick {
    display: flex; flex-wrap: wrap; align-items: stretch; gap: 10px;
    margin: 0 0 20px;
}
/* Και τα δύο κουμπιά: μία οικογένεια, ένα ύψος, μία κλίμακα.
   Η ιεραρχία βγαίνει από το χρώμα και το βάρος, όχι από διαφορετικά μεγέθη. */
.svc-quick a {
    display: inline-flex; align-items: center; gap: 9px;
    min-height: 45px; padding: 0 19px; border-radius: 5px; text-decoration: none;
    font-family: 'Barlow Condensed', sans-serif;
    font-size: 13px; font-weight: 600; line-height: 1;
    letter-spacing: 1.3px; text-transform: uppercase;
    transition: background .25s, border-color .25s, color .25s, transform .25s;
}
.svc-quick-call { background: var(--warm); color: var(--ink); }
.svc-quick-call:hover { background: var(--warm2); transform: translateY(-1px); }
.svc-quick-call i { font-size: 11px; }
.svc-quick-call span { display: flex; flex-direction: column; gap: 2px; }
.svc-quick-call small {
    font-family: 'Barlow Condensed', sans-serif;
    font-size: 9px; font-weight: 500; letter-spacing: 1.3px;
    text-transform: uppercase; opacity: .68; line-height: 1;
}
.svc-quick-call span { font-size: 15px; letter-spacing: 0.9px; }
.svc-quick-msg { border: 1px solid var(--gold); color: var(--gold); }
.svc-quick-msg:hover { background: var(--gold); color: var(--white); transform: translateY(-1px); }
@media (max-width: 560px) {
    .svc-quick { flex-direction: column; }
    .svc-quick a { justify-content: center; }
}

/* ── ΤΥΠΟΓΡΑΦΙΚΗ ΟΜΟΙΟΓΕΝΕΙΑ ΜΕΣΑ ΣΤΟ CONTAINER ──────────────────────────
   Πριν: το τρέχον κείμενο εμφανιζόταν σε δύο ασύνδετα μεγέθη (16,5px στην
   πρόζα, 12,5px στα βήματα, στην προειδοποίηση και στο κλείσιμο) και οι
   μικρές ετικέτες κεφαλαίων σε τέσσερις διαφορετικές γραμματοσειρές
   (Oswald 9px, Oswald 11px, IBM Plex Mono 9,5px, Source Sans 10,7px).
   Τώρα: δύο μεγέθη κειμένου και μία γραμματοσειρά για κάθε μικρή ετικέτα.
   Ο κανόνας μένει στο service-page.css, άρα ισχύει μόνο στις σελίδες
   υπηρεσιών — η κεντρική σελίδα δεν θίγεται. */
body .ta-box .ta-steps > li,
body .ta-box .ta-warning-body > p,
body .ta-box .ta-cta-text {
    font-size: 15px;
    line-height: 1.62;
}
body .ta-box .ta-stat-lbl,
body .ta-box .ta-badge span,
body .tap-graphic-tag {
    font-family: 'Oswald', sans-serif;
    font-size: 10.5px;
    font-weight: 500;
    letter-spacing: 2px;
    text-transform: uppercase;
}
body .ta-box .ta-warning-body > strong {
    font-family: 'Oswald', sans-serif;
    font-size: 13px;
    font-weight: 700;
    letter-spacing: 1.4px;
}

/* ── ΤΟ ΓΡΑΦΙΚΟ ΨΗΛΑ ΚΑΙ ΣΥΜΜΑΖΕΜΕΝΟ ──────────────────────────────────────
   Ανέβηκε πάνω από το κείμενο για να το δει ο επισκέπτης χωρίς κύλιση.
   Για να μη σπρώξει κάτω το τηλέφωνο, το ύψος του περιορίζεται· το SVG
   κρατά τις αναλογίες του και απλώς μικραίνει. */
.tap-graphic { padding: 10px 0 0; }
.tap-graphic svg { max-height: 285px; height: auto; }
@media (max-width: 900px)  { .tap-graphic svg { max-height: 240px; } }
@media (max-width: 560px)  { .tap-graphic svg { max-height: 205px; } }

/* ── ΚΙΝΗΤΟ: Η ΛΩΡΙΔΑ ΣΤΟΙΧΕΙΩΝ ΣΕ ΔΥΟ ΣΤΗΛΕΣ ────────────────────────────
   Τέσσερα στοιχεία σε τέσσερις σειρές έτρωγαν 166px από την πρώτη οθόνη
   και έσπρωχναν το τηλέφωνο κάτω από το όριο. */
@media (max-width: 700px) {
    body .ta-box .ta-stat-strip {
        display: grid; grid-template-columns: 1fr 1fr;
        gap: 0;
    }
    body .ta-box .ta-stat-sep { display: none; }
    body .ta-box .ta-stat { padding: 12px 14px; }
    body .ta-box .ta-stat-val { font-size: 19px; }
    body .svc-hero { padding-top: 74px; padding-bottom: 26px; }
}

/* ── ΖΩΝΤΑΝΕΜΑ: HOVER ΚΑΙ ΜΙΚΡΕΣ ΚΙΝΗΣΕΙΣ ────────────────────────────────
   Διακριτικά, στο ίδιο λεξιλόγιο με την κεντρική σελίδα: χρυσή γραμμή που
   μπαίνει από αριστερά, ελαφρύ σήκωμα, τίποτα που να αναπηδά. */
body .ta-box .ta-steps > li {
    position: relative;
    transition: background .28s var(--ease), box-shadow .28s var(--ease);
}
body .ta-box .ta-steps > li::before {
    content: ''; position: absolute; left: 0; top: 0; bottom: 0; width: 0;
    background: var(--warm); transition: width .28s var(--ease);
}
body .ta-box .ta-steps > li:hover { background: rgba(201,168,108,.07); }
body .ta-box .ta-steps > li:hover::before { width: 3px; }
body .ta-box .ta-steps > li:hover .ta-step-num { transform: scale(1.08); }
body .ta-box .ta-step-num { transition: transform .28s var(--ease); }

body .ta-box .ta-stat { transition: transform .3s var(--ease); }
body .ta-box .ta-stat:hover { transform: translateY(-2px); }
body .ta-box .ta-stat-icon { transition: transform .3s var(--ease), color .3s; }
body .ta-box .ta-stat:hover .ta-stat-icon { transform: scale(1.12); color: var(--warm); }

.svc-faq details summary { transition: color .25s, padding-left .25s var(--ease); }
.svc-faq details summary:hover { color: var(--warm); padding-left: 6px; }

.svc-prose ul li { transition: transform .25s var(--ease); }
.svc-prose ul li:hover { transform: translateX(3px); }

/* Το γραφικό ζωντανεύει ελαφρά όταν περνά από πάνω ο κέρσορας */
.tap-graphic { transition: transform .5s var(--ease); }
.tap-graphic:hover { transform: translateY(-3px); }

/* Το όνομα του γραφείου σε μία γραμμή, όπως στην αρχική */
.logo-text .name { white-space: nowrap; }