/* site.css · Construction Andros
 * Φορτώνεται ΤΕΛΕΥΤΑΙΟ, μετά τα CSS του Renius. Μόνο ό,τι χρειάζεται για τα δικά μας κείμενα και τις προσαρμογές του
 * PATTERN MAP (Design/PATTERN-MAP.md στο vault). Τα χρώματα μόνο από tokens.css.
 */

/* Τα vars του Renius δείχνουν στα semantic tokens */
:root {
  --primaryColor: var(--accent);
  --secondaryColor: var(--accent-soft);
  --optionalColor: var(--accent-strong);
  --paraColor: var(--fg-muted);
  --titleColor: var(--fg);
  --altoColor: var(--border);
}

/* Μετάβαση στο περιεχόμενο (πληκτρολόγιο) */
.skip-link {
  position: absolute; left: 16px; top: -60px; z-index: 10000;
  padding: 10px 16px; background: var(--accent-strong); color: var(--on-accent);
  border-radius: 8px; transition: top var(--dur-fast) var(--ease-out);
}
.skip-link:focus { top: 16px; }
/* Εστίαση πληκτρολογίου (floor, έλεγχος 24/10, Α-01, Α-04): ορατός δακτύλιος σε κάθε στοιχείο που εστιάζεται. Το Renius σβήνει το
   outline (outline: 0/none) με μεγαλύτερη ειδικότητα, γι' αυτό !important. Σκούρο πορτοκαλί σε ανοιχτά φόντα, λευκό σε σκούρα. */
:where(a, button, input, select, textarea, summary, [tabindex]):focus-visible { outline: 3px solid var(--focus-ring) !important; outline-offset: 3px !important; }
.footer-area, .about-area, .hero-area, .cta-area, .theme-dark, .fslightbox-container { --focus-ring: var(--focus-ring-on-dark); }
.switch input:focus-visible + .slider { outline: 3px solid var(--focus-ring); outline-offset: 3px; }
/* Πάνω σε φωτογραφία, ή πλωτό πάνω από κάθε φόντο, ένα χρώμα δεν φτάνει (κουμπί παύσης 1,98:1, 24/10): δίχρωμος δείκτης, μαύρος
   δακτύλιος (outline, 3 έως 6 px) ανάμεσα σε δύο λευκούς (box-shadow, 0 έως 3 και 6 έως 9 px) */
.contact-photos .photos-toggle:focus-visible, .viber-float:focus-visible, .switch input:focus-visible + .slider {
  outline-color: var(--focus-ring-duo) !important; box-shadow: 0 0 0 3px var(--focus-ring-duo-halo), 0 0 0 9px var(--focus-ring-duo-halo); }
button.progress-wrap:focus-visible { outline-color: var(--focus-ring-duo) !important;
  box-shadow: inset 0 0 0 2px var(--primaryColor), 0 0 0 3px var(--focus-ring-duo-halo), 0 0 0 9px var(--focus-ring-duo-halo); }
/* Ό,τι εστιάζεται φαίνεται, ακόμη κι αν το scrollCue δεν το έχει αποκαλύψει (Ε-29) */
[data-cue]:focus-within { opacity: 1 !important; }
/* Η εστίαση και οι άγκυρες σταματούν κάτω από το σταθερό header (Α-05): ο browser αφήνει τόσο χώρο από πάνω */
html { scroll-padding-top: 120px; }
@media only screen and (max-width: 991px) { html { scroll-padding-top: 100px; } }

/* Λογότυπο ως κείμενο (δεν υπάρχει λογότυπο) */
.navbar-brand .wordmark {
  font-family: var(--secondaryFont); font-weight: 700; font-size: 24px; line-height: 1;
  color: var(--fg); letter-spacing: .01em; white-space: nowrap;
}
.navbar-brand .wordmark b { color: var(--accent); font-weight: 700; }
.theme-dark .navbar-brand .wordmark { color: var(--white); }

/* Hero: ο υπότιτλος στη θέση του κουμπιού βίντεο, οι τίτλοι καρτών ως <p> (σειρά επικεφαλίδων) */
.hero-area.style-two .hero-lead { font-size: 18px; line-height: 1.6; margin-bottom: 15px; }
.hero-feature-card div .hero-card-title {
  font-family: var(--secondaryFont); font-size: 20px; font-weight: 600; line-height: 30px; margin-bottom: 6px;
}

/* Αντίθεση (floor a11y): το πορτοκαλί του Renius σε μικρό κείμενο πάνω σε ανοιχτό φόντο δίνει 3,06:1.
 * Σκουρότερη απόχρωση της ίδιας οικογένειας (≥ 4,5:1)· στο σκούρο φόντο μένει το φωτεινό πορτοκαλί. */
.text_primary { color: var(--accent-text) !important; }
.bg-optional .text_primary, .footer-area .text_primary { color: var(--accent) !important; }
.link.style-one { color: var(--accent-text); }
.navbar-area .menu-section a.active, .navbar-area .menu-section a:hover { color: var(--accent-text) !important; }
/* Πάνω στη ροζ ζώνη τίτλου (έλεγχος 24/10, Α-08, Ε-18): breadcrumb (το #FF5E14 του Renius έδινε 2,58:1), σύνδεσμοι του υπότιτλου,
   ενεργό μενού και τηλέφωνο του header πριν γίνει σταθερό (το --accent-text έδινε 4,37:1). Στο λευκό μένει το --accent-text. */
.page-hero .br-menu li a, .page-hero .hero-lead a { color: var(--accent-text-on-tint); }
html:not(.theme-dark) .navbar-area.in-band:not(.sticky) .menu-section a.active,
html:not(.theme-dark) .navbar-area.in-band:not(.sticky) .menu-section a:hover,
html:not(.theme-dark) .navbar-area.in-band:not(.sticky) .contact-link .text_primary { color: var(--accent-text-on-tint) !important; }
/* Σκούρο θέμα (Α-07, Ε-31): το σκούρο πορτοκαλί του ανοιχτού θέματος σε μαύρο έδινε 2,5 έως 4,1:1. Ένα πιο ανοιχτό πορτοκαλί για
   μικρό κείμενο σε όλα τα σκούρα φόντα: σελίδα, σταθερό header, κάρτες, ζώνη τίτλου. */
.theme-dark .text_primary, .theme-dark .navbar-area .menu-section a.active, .theme-dark .navbar-area .menu-section a:hover,
.theme-dark .category-widget ul li a[aria-current="page"], .theme-dark .link.style-one,
.theme-dark .page-hero .br-menu li a, .theme-dark .page-hero .hero-lead a { color: var(--accent-text-on-dark) !important; }
/* Σύνδεσμος μέσα σε κείμενο: ξεχωρίζει και χωρίς χρώμα */
.feature-lead a, .section-lead a, .text-offwhite a, .wh-content p a { text-decoration: underline; text-underline-offset: 3px; }

/* Αριθμοί σελίδων του hero πάνω στη φωτογραφία: σκούρο ημιδιάφανο πλαίσιο, ώστε να διαβάζονται με κάθε εικόνα */
.hero-slider-one .hero-pagination { background: color-mix(in srgb, var(--accent-strong) 72%, transparent); border-radius: 16px; padding: 12px 10px; }
.hero-slider-one .hero-pagination .swiper-pagination-bullet { color: var(--white); }

/* Υπηρεσίες: δύο γραμμές των τριών αντί για slider (Ιωάννης 23/10) */
/* Υπηρεσίες (hands-on #11, 24/10): κάτω από 992 px το slider του Renius (site.js)· από 992 και πάνω πλέγμα 3 + 3 χωρίς Swiper */
@media only screen and (min-width: 992px) {
  .service-area .ca-service-slider { overflow: visible; }
  .service-area .ca-service-slider .swiper-wrapper { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); column-gap: 24px; }
  .service-area .ca-service-slider .swiper-slide { width: auto; height: auto; }
  .service-area .ca-service-slider .service-card { margin-bottom: 40px; }
}
@media only screen and (max-width: 767px) { .service-area .slider-btn { margin-top: 24px; } }
.service-area .section-lead { margin: 20px 0 0; max-width: 640px; }

/* Ένας μετρητής αντί για τρεις */
.about-area.style-two .counter-card.style-two { max-width: 260px; }
/* οι ετικέτες του μετρητή ως <p> (όχι επικεφαλίδες), με τις τιμές των h6/h4 του Renius */
.counter-card.style-two p.cc-label { font-family: var(--secondaryFont); font-size: 12px; color: var(--border); margin-bottom: 85px; }
.counter-card.style-two p.cc-num { font-size: 36px; line-height: 1; margin-bottom: 3px; }

/* Ενότητες με μπλοκ απάντησης κάτω από τον τίτλο */
.feature-lead { max-width: 640px; margin-bottom: 40px; }

/* Κουκκίδα «σημείο του νησιού» στο wh-area χωρίς τις 4 κουκκίδες */
.wh-area.style-two .wh-content p { margin-bottom: 30px; }

/* CTA: κυκλικό κείμενο στα ελληνικά */
.cta-area.style-two .circle-text-wrap .circle-text-el { width: 100%; height: 100%; }
/* Ο κύκλος πατιέται (έλεγχος 24/10, Α-22): το κυκλικό κείμενο και το βέλος κάθονταν πάνω από τον σύνδεσμο (z-2 πάνω από z-1, όπως
   και στο demo), οπότε ποντίκι και δάχτυλο δεν έφταναν σε αυτόν */
.cta-area .circle-text-wrap .circle-text-el, .cta-area .circle-text-wrap img { pointer-events: none; }
/* Ο κύκλος κόβει (overflow: hidden) τον δακτύλιο του συνδέσμου που έχει μέσα του, οπότε με Tab δεν φαινόταν τίποτα. Ο δακτύλιος
   μπαίνει στον ίδιο τον κύκλο, δίχρωμος, αφού ο κύκλος κάθεται πάνω σε φωτογραφία */
.cta-area .circle-text-wrap:has(> a:focus-visible) { outline: 3px solid var(--focus-ring-duo); outline-offset: 3px;
  box-shadow: 0 0 0 3px var(--focus-ring-duo-halo), 0 0 0 9px var(--focus-ring-duo-halo); }

/* Υποσέλιδο: 3 στήλες */
.footer-area .contact-info-list a { color: inherit; }

/* Viber, σταθερό κάτω δεξιά, πάνω από το κουμπί επιστροφής */
/* Viber = το χρώμα του Viber σε κάθε κουμπί και CTA του site (Ιωάννης 24/10). Μία απόχρωση για όλα: το μωβ του Viber 12% πιο
   σκούρο, γιατί το λευκό κείμενο στο καθαρό #7360F2 βγάζει 4,48:1 (κάτω από 4,5)· έτσι 5,5:1. Κουμπί: class="btn btn-viber". */
:root { --viber-surface: color-mix(in srgb, var(--viber-500) 88%, black); --viber-surface-hover: color-mix(in srgb, var(--viber-500) 72%, black); }
.btn.btn-viber span.btn-text, .btn.btn-viber span.btn-icon, .btn.btn-viber span.btn-icon i { color: var(--white); }
.btn.btn-viber span.btn-text:before, .btn.btn-viber span.btn-icon:before { background-color: var(--viber-surface); border-radius: 50px; }
.btn.btn-viber span.btn-text:after, .btn.btn-viber span.btn-icon:after { background-color: var(--viber-surface-hover); }
.btn.btn-viber:hover span.btn-text, .btn.btn-viber:hover span.btn-icon, .btn.btn-viber:hover span.btn-icon i { color: var(--white); }
.viber-float {
  position: fixed; right: 30px; bottom: 100px; z-index: 999;
  display: inline-flex; align-items: center; gap: 8px; min-height: 48px; padding: 0 18px 0 14px;
  border-radius: 999px; background: var(--viber-surface); color: var(--white);
  font-family: var(--primaryFont); font-weight: 600; font-size: 15px;
  box-shadow: 0 6px 18px rgba(0, 0, 0, .18);
  transition: transform var(--dur-fast) var(--ease-out);
}
.viber-float i { font-size: 22px; line-height: 1; }
.viber-float:hover { color: var(--white); transform: translateY(-2px); }
.viber-float:active { transform: scale(.98); }
@media (max-width: 767px) {
  .viber-float { right: 16px; bottom: 84px; padding: 0 14px 0 12px; }
}
@media (prefers-reduced-motion: reduce) {
  .viber-float, .skip-link { transition: none; }
}
/* Κουμπί «πάνω» ως πραγματικό <button> (έλεγχος 24/10, Α-21): ίδια εμφάνιση με το div του Renius */
button.progress-wrap { border: 0; padding: 0; background: transparent; }

/* Preloader (έλεγχος 24/10, Ε-21): μένει, αλλά για το πολύ 0,8 s. Το main.js το σβήνει στο window.onload, δηλαδή αφού κατέβουν
   όλες οι εικόνες· σε αργό δίκτυο η σελίδα ήταν έτοιμη στα 6,8 s και φαινόταν στα 12,0 s. Χωρίς JavaScript: noscript στο base.html. */
.preloader-area { animation: ca-preloader-cap 0s linear .8s forwards; }
@keyframes ca-preloader-cap { to { visibility: hidden; opacity: 0; } }

/* Λιγότερη κίνηση (floor, έλεγχος 24/10, Ε-22, Α-12, Α-24): όταν η συσκευή το ζητά, καμία κίνηση του template. Οι κινήσεις CSS
   σταματούν στην τελική τους θέση, οι αποκαλύψεις του scrollCue φαίνονται αμέσως, χωρίς preloader, κέρσορα που ακολουθεί και
   μετακινήσεις από την κύλιση (GSAP). Lenis και μετρητής: assets/js/reduce-motion.js πριν από το main.js. Για όλους τους άλλους
   δεν αλλάζει τίποτα. */
@media (prefers-reduced-motion: reduce) {
  *, *::before, *::after { animation-duration: .01ms !important; animation-delay: 0s !important; animation-iteration-count: 1 !important;
    transition-duration: .01ms !important; transition-delay: 0s !important; scroll-behavior: auto !important; }
  [data-cue], [data-cues] > * { opacity: 1 !important; animation: none !important; }
  .preloader-area, .cursor, .cursor-inner { display: none !important; }
  .move-left, .move-right, .move-top, .move-bottom, .tilt-img { transform: none !important; }
}

/* Φωτογραφίες αρχικής (Magnific, 23/10): αντί για τις εικόνες του demo. Πηγές: Work/Designs/construction-andros/stock/ */
.hero-slider-one .hero-slide-item.bg-1 { background-image: url(../img/ca/home/hero-petrino-spiti.webp); }
.hero-slider-one .hero-slide-item.bg-2 { background-image: url(../img/ca/home/hero-vapsimo.webp); }
.hero-slider-one .hero-slide-item.bg-3 { background-image: url(../img/ca/home/hero-kamares.webp); }
@media only screen and (max-width: 767px) {
  .hero-slider-one .hero-slide-item.bg-1 { background-image: url(../img/ca/home/hero-petrino-spiti-m.webp); }
  .hero-slider-one .hero-slide-item.bg-2 { background-image: url(../img/ca/home/hero-vapsimo-m.webp); }
  .hero-slider-one .hero-slide-item.bg-3 { background-image: url(../img/ca/home/hero-kamares-m.webp); }
}
.about-area.style-two .about-bg { background-image: url(../img/ca/home/poioi-eimaste-pelekanos.webp); background-position: center; }
.cta-area.style-two { background-image: url(../img/ca/home/cta-petra.webp); }
.service-card.style-two .service-img img { width: 100%; height: 100%; object-fit: cover; }
/* Κάρτες εργασιών της αρχικής: η φωτογραφία πιάνει το 80% του πλάτους της κάρτας (Ιωάννης 24/10: πρώτα όλο, μετά «στο 80%»),
   με την αναλογία και το σχήμα του Renius (196×178, γωνίες 50%). Μόνο στην αρχική: οι ίδιες κάρτες στις Οικοδομικές μένουν όπως είναι. */
.service-area .service-card.style-two .service-img { width: 80%; height: auto; aspect-ratio: 196 / 178; }
/* Αντίθεση: οι κάρτες του hero κάθονται πάνω σε ανοιχτές φωτογραφίες (λευκός τοίχος, πέτρα). Το γυαλί του Renius (λευκό 12%)
   έδινε 1,6 έως 3,6 στο λευκό κείμενο· σκούρο γυαλί με το ίδιο blur. Μέτρηση ανά στοιχείο, 23/10. */
.hero-slider-one .hero-slide-item .hero-feature-card { background-color: color-mix(in srgb, var(--accent-strong) 86%, transparent); }
/* CTA: δύο κανονικά κουμπιά κάτω από τον τίτλο (Ιωάννης 23/10: «δεν βλέπω πού να κλικάρω»· ο αριθμός έφυγε από τον τίτλο 24/10) */
.cta-area.style-two .cta-buttons { gap: 16px; margin-top: 28px; }
/* Στο κινητό, όπου ο κύκλος πέφτει από κάτω, τίτλος και κουμπιά στο κέντρο (hands-on #14, 24/10) */
@media only screen and (max-width: 767px) {
  .cta-area.style-two .section-title { text-align: center; }
  .cta-area.style-two .cta-buttons { justify-content: center; }
}
.hero-feature-card .hero-card-title a { color: inherit; }
/* Αντίθεση: λευκό σε #FF5E14 = 3,04 (κάτω από 4,5). Το «χάπι» με το κείμενο παίρνει τη σκουρότερη απόχρωση του ίδιου πορτοκαλί·
   ο κύκλος με το εικονίδιο μένει όπως είναι (εικονίδιο, όριο 3:1). Μέτρηση στα pixel, 23/10. */
.btn.style-one span.btn-text:before { background-color: var(--accent-text); }
/* Header σε μία γραμμή (hands-on #3, 24/10): στα 992–1199 πιο σφιχτό μενού, στα 1200–1439 μόνο το εικονίδιο του τηλεφώνου
   (το «Καλέστε μας: …» φαίνεται από τα 1440). Μέτρηση: _dev/navwrap.mjs, EL και EN σε 7 πλάτη. */
@media only screen and (min-width: 992px) and (max-width: 1199px) {
  .menu > ul > li { margin-right: 8px; }
  .navbar-area.style-two .menu > ul > li > a { font-size: 15px; }
  .navbar-area .menu-section { margin-left: 20px; }
  .navbar-brand .wordmark { font-size: 20px; }
}
@media only screen and (min-width: 992px) {
  .navbar-area .menu-section { white-space: nowrap; }
}
@media only screen and (min-width: 992px) and (max-width: 1079px) {
  /* στο στενότερο desktop το εικονίδιο τηλεφώνου φεύγει· το κουμπί «Ζητήστε εκτίμηση» μένει */
  .navbar-area .other-options .contact-link.d-lg-flex { display: none !important; }
}
@media only screen and (min-width: 1200px) and (max-width: 1439px) {
  .navbar-area .other-options .contact-link .d-xl-inline { display: none !important; }
  .navbar-area .menu-section { margin-left: 25px; }
}
/* Κενό που έλειπε (hands-on #4, 24/10): ανάμεσα στο CTA και στο «Σε ποιες περιοχές» το Renius είχε τα «Awards», που φύγανε.
   Το .mt-120 δεν υπάρχει στο template· ορίζεται εδώ με τα ίδια βήματα με το δικό του .mb-120. Έλεγχος: _dev/gaps.mjs. */
.mt-120 { margin-top: 120px; }
@media only screen and (max-width: 767px) { .mt-120 { margin-top: 60px; } }
@media only screen and (min-width: 768px) and (max-width: 991px) { .mt-120 { margin-top: 80px; } }
@media only screen and (min-width: 992px) and (max-width: 1199px) { .mt-120 { margin-top: 100px; } }
/* Ο αριθμός τηλεφώνου δεν σπάει σε δύο γραμμές (hands-on #5) */
a[href^="tel:"] { white-space: nowrap; }
/* Υποσέλιδο: λογότυπο και στοιχεία αριστερά (24/10). Προσωρινά το όνομα ως κείμενο, μέχρι να έρθει το λογότυπο. */
.footer-area .footer-logo { margin-bottom: 26px; }
.footer-area .footer-logo .wordmark { font-family: var(--secondaryFont); font-weight: 700; line-height: 1; color: var(--white); font-size: 30px; white-space: nowrap; }
.footer-area .footer-logo .wordmark b { color: var(--accent); font-weight: 700; }
/* Λογότυπο (αρχείο πελάτη 24/10, Work/Designs/construction-andros/logo/): πρωτότυπο σε ανοιχτό φόντο, ανοιχτή εκδοχή σε σκούρο */
.navbar-brand .site-logo { display: block; }
.navbar-brand .logo-on-dark, .theme-dark .navbar-brand .logo-on-light { display: none; }
.theme-dark .navbar-brand .logo-on-dark { display: block; }
/* Μεγαλύτερο λογότυπο (hands-on #15, 24/10). Το Renius κόβει την εικόνα στα 100 px πλάτος στο κινητό και στα 120 px στα 992-1199,
   γι' αυτό max-width: none. Τα πλάτη κρατούν το μενού σε μία γραμμή (έλεγχος _dev/navwrap.mjs). */
.navbar-area .navbar-brand .site-logo { width: 220px; height: auto; max-width: none; }
@media only screen and (max-width: 1599px) { .navbar-area .navbar-brand .site-logo { width: 200px; } }
@media only screen and (max-width: 1399px) { .navbar-area .navbar-brand .site-logo { width: 190px; } }
@media only screen and (max-width: 1199px) { .navbar-area .navbar-brand .site-logo { width: 160px; } }
@media only screen and (max-width: 991px) { .navbar-area .navbar-brand .site-logo { width: 170px; max-width: 46vw; } }
.footer-area .footer-logo img { height: 80px; width: auto; display: block; }
/* Επιλογή γλώσσας στο header */
.navbar-area .lang-switch { font-family: var(--optionalFont); font-weight: 600; font-size: 14px; letter-spacing: .06em; color: var(--titleColor);
  border: 1px solid var(--rule); border-radius: 50px; padding: 8px 12px; line-height: 1; display: inline-block; }
.navbar-area .lang-switch:hover { color: var(--accent-text); border-color: currentColor; }
/* Σκούρο θέμα: κρατούσε το σκούρο χρώμα τίτλου, μαύρο σε μαύρο πάνω από το hero και αχνό στο σταθερό header (24/10) */
.theme-dark .navbar-area .lang-switch { color: var(--white); border-color: color-mix(in srgb, var(--white) 35%, transparent); }
.theme-dark .navbar-area .lang-switch:hover { color: var(--accent); border-color: currentColor; }
/* Υπομενού «Building works» και με πληκτρολόγιο (έλεγχος 24/10, Α-03): ό,τι κάνει το hover του Renius, και όταν η εστίαση είναι
   μέσα· με Esc κλείνει (site.js, κλάση submenu-closed ώσπου να φύγει η εστίαση ή το ποντίκι) */
@media only screen and (min-width: 992px) {
  .menu ul li:focus-within > .menu-subs { margin-top: -7px; opacity: 1; visibility: visible; }
  .menu ul li.submenu-closed > .menu-subs { opacity: 0 !important; visibility: hidden !important; }
}
/* Μενού κινητού (Α-02): όσο είναι κλειστό, έξω από την οθόνη ΚΑΙ έξω από τη σειρά του Tab (το Renius το έσπρωχνε μόνο αριστερά).
   Η ορατότητα αλλάζει μετά το κλείσιμο, για να προλαβαίνει η κίνηση· το ίδιο και το υπομενού. Πίσω από ανοιχτό υπομενού, οι
   σύνδεσμοι του πρώτου επιπέδου βγαίνουν κι αυτοί από το Tab. Εστίαση, Esc, aria-expanded: site.js. */
@media only screen and (max-width: 991px) {
  .menu { visibility: hidden; transition: transform .5s ease-in-out, visibility 0s linear .5s; }
  .menu.active { visibility: visible; transition: transform .5s ease-in-out, visibility 0s; }
  .menu > ul > li .menu-subs { visibility: hidden; transition: var(--transition), visibility 0s linear .5s; }
  .menu > ul > li .menu-subs.active { visibility: visible; transition: var(--transition), visibility 0s; }
  .menu .menu-section:has(.menu-subs.active) > li > a { visibility: hidden; }
}
/* Κάτω γραμμή του υποσέλιδου: ελεύθερη η κάτω δεξιά γωνία, όπου κάθονται το Viber και το «πάνω» */
.footer-area .copyright-text { font-size: 14px; }
@media only screen and (min-width: 768px) { .footer-area .footer-bottom > .row { padding-right: 64px; } }
@media only screen and (max-width: 767px) { .footer-area .footer-bottom > .row { padding-bottom: 140px; row-gap: 8px; } }

/* Σύνδεσμοι μέσα σε κείμενο: χρώμα του site, όχι το μπλε του Bootstrap (Ιωάννης 24/10, hands-on #12) */
main p a:not([class]), main label a:not([class]) { color: var(--accent-text); text-decoration: underline; text-decoration-thickness: 1px; text-underline-offset: 3px; }
.theme-dark main p a:not([class]), .theme-dark main label a:not([class]) { color: var(--accent); }
main p a:not([class]):hover, main label a:not([class]):hover { color: var(--titleColor); }

/* Σελίδα υπηρεσίας (service-single του Renius, _build/templates/service.html) */
.breadcrumb-area .br-menu li { text-transform: uppercase; }
/* Ζώνη τίτλου ως hero του κειμένου (Ιωάννης 24/10): breadcrumb ως υπέρτιτλος, H1, υπότιτλος, κουμπί */
/* Όπως στο Renius (style-four): στο desktop το header κατεβαίνει μέσα στη ζώνη και αφήνει κενό από πάνω (10 px, 15 px από τα 1400,
   20 px από τα 1920)· κάτω από τα 992 η ζώνη φτάνει ως την κορυφή, χωρίς πάνω γωνίες. Η ζώνη ανεβαίνει όσο το δικό μας header,
   που στο κινητό το ορίζει το λογότυπο (πλάτος min(170px, 46vw), αναλογία 180/500 = 0,36, padding 14 + 14)· το κενό ως τον τίτλο
   μένει του Renius (45 px, 59 px στα 768-991). Ιωάννης 24/10. */
.navbar-area.in-band { margin-top: 10px; }
@media only screen and (min-width: 1400px) { .navbar-area.in-band { margin-top: 15px; } }
@media only screen and (min-width: 1920px) { .navbar-area.in-band { margin-top: 20px; } }
@media only screen and (max-width: 991px) {
  .navbar-area.in-band { margin-top: 0; }
  .breadcrumb-area.page-hero { --hdr: calc(min(170px, 46vw) * .36 + 28px); margin-top: calc(-1 * var(--hdr)); }
}
@media only screen and (max-width: 767px) { .breadcrumb-area.page-hero { padding-top: calc(var(--hdr) + 45px); } }
@media only screen and (min-width: 768px) and (max-width: 991px) { .breadcrumb-area.page-hero { padding-top: calc(var(--hdr) + 59px); } }
.page-hero .br-menu { margin-bottom: 22px; }
/* Οι γραμμές του φόντου της ζώνης κρατούν την αναλογία τους (έλεγχος 24/10, Ε-28: τεντώνονταν ως 85% στο κινητό) */
.page-hero .br-line-shape { object-fit: cover; }
.page-hero h1 { margin-bottom: 22px; text-wrap: balance; }
/* Στο κινητό οι τελείες του Renius έπεφταν πάνω στον υπότιτλο· πάνε πάνω αριστερά, δίπλα στο breadcrumb */
@media only screen and (max-width: 767px) { .page-hero .br-shape-one { top: 100px; bottom: auto; left: 16px; } }
.page-hero .hero-buttons { display: flex; flex-wrap: wrap; justify-content: center; gap: 16px; }
.page-hero .hero-lead { max-width: 640px; margin: 0 auto 34px; font-size: 18px; line-height: 1.6; color: var(--fg-muted); }
/* Σκούρο θέμα: ο υπότιτλος κρατούσε το γκρι του ανοιχτού θέματος πάνω στη σκούρα ζώνη· παίρνει το χρώμα κειμένου του σκούρου Renius (24/10) */
.theme-dark .page-hero .hero-lead { color: var(--darkParaColor); }
/* Οι ερωτήσεις είναι H2 με την εμφάνιση των h6 του Renius (PATTERN MAP) */
.service-desc .single-para h2 { font-size: 20px; }
.service-desc .single-para h2.single-title { font-size: 32px; }
@media only screen and (max-width: 767px) { .service-desc .single-para h2.single-title { font-size: 28px; } }
/* Οι 4 κάρτες: τίτλος σε <p> (δεν είναι επικεφαλίδες ενότητας), ίδια εμφάνιση με το h3 του Renius */
.service-desc .feature-card .feature-title { margin-top: 32px; font-size: 16px; line-height: 26px; color: var(--titleColor); }
/* Σκούρο θέμα (έλεγχος 24/10, Α-06): ως <p> δεν τις πιάνει ο κανόνας του Renius για τους τίτλους, και έμεναν μαύρες σε μαύρο */
.theme-dark .service-desc .feature-card .feature-title { color: var(--white); }
/* Accordion: η ερώτηση είναι H2 με κουμπί μέσα· η κατάσταση από το κουμπί, όχι από το item (βλ. service.html) */
.service-desc .accordion-header { margin: 0; font-size: inherit; line-height: inherit; }
.accordion.style-one .accordion-item:has(.accordion-button:not(.collapsed)) { border-color: color-mix(in srgb, var(--accent-strong) 10%, transparent); }
.accordion.style-one .accordion-item .accordion-header .accordion-button:not(.collapsed) .accord-arrow i.plus { visibility: hidden; opacity: 0; }
.accordion.style-one .accordion-item .accordion-header .accordion-button:not(.collapsed) .accord-arrow i.minus { visibility: visible; opacity: 1; }
.accordion.style-one .accordion-item .accordion-header .accordion-button:focus-visible { outline: 3px solid var(--focus-ring); outline-offset: 2px; }
/* Το testimonial του Renius ως φράση του κειμένου που ξεχωρίζει (Ιωάννης 24/10)· χωρίς αστέρια, γιατί δεν είναι κριτική */
.testimonial-card.style-two.highlight-card { margin-left: 0; margin-right: 0; }
/* Φράση και φωτογραφία στο ίδιο ύψος (Ιωάννης 24/10): όταν κάθονται δίπλα δίπλα, η φωτογραφία γεμίζει το ύψος της στήλης */
.highlight-row { margin-bottom: 30px; }
.highlight-row .highlight-card { margin-bottom: 30px; }
@media only screen and (min-width: 768px) {
  .highlight-row .highlight-card, .highlight-row .highlight-photo { height: 100%; margin-bottom: 0; }
  .highlight-row .highlight-photo img { width: 100%; height: 100%; object-fit: cover; }
}
.testimonial-card.style-two.highlight-card blockquote p { font-family: var(--secondaryFont); }
.testimonial-card.style-two .highlight-by { padding-left: 86px; font-size: 20px; line-height: 1.3; }
.testimonial-card.style-two .highlight-by:before { position: absolute; top: 12px; left: 0; content: ""; width: 70px; height: 1px; background-color: color-mix(in srgb, var(--fg) 18%, transparent); }
/* Πλάι: η τρέχουσα σελίδα στη λίστα, και το κουτί εκτίμησης (κουμπιά όπως στο CTA της αρχικής) */
.category-widget ul li a[aria-current="page"] { color: var(--accent-text); }
.estimate-widget .estimate-buttons { gap: 16px; margin: 22px 0 20px; }
/* Το κουμπί του hero οδηγεί εδώ (#estimate)· η απόσταση κρατά τον τίτλο κάτω από το σταθερό header */
.estimate-widget { scroll-margin-top: 10px; }
/* Άγκυρες των blocks (#microcement, #built-in, #roofs από αρχική, υποσέλιδο και πλαϊνό): ίδια απόσταση με το #estimate */
.service-desc .single-para[id] { scroll-margin-top: 10px; }
/* Κάρτες προς τις υποσελίδες (Οικοδομικές): οι κάρτες της αρχικής, δύο δίπλα δίπλα από 768 px */
.service-desc .subpages .service-card { margin-bottom: 30px; }
/* Ο τίτλος της κάρτας (H3) ως 24 px του Renius έβγαινε μεγαλύτερος από το H2 της ενότητας (20 px, βλ. πάνω): ίδιο μέγεθος με τα H2 */
.service-desc .subpages .service-card h3 { font-size: 20px; line-height: 30px; margin-top: 28px; }
/* Φόρμα «Call me back» (_callback_form.html), στο πλάι κάθε σελίδας υπηρεσίας και στην Επικοινωνία (Ιωάννης 24/10). Το Renius κρύβει το checkbox με
   display: none και σβήνει την εστίαση στα πεδία· εδώ το checkbox μένει προσβάσιμο (αόρατο πάνω στο κουτάκι) και η εστίαση φαίνεται. */
.ca-form .hp { position: absolute; left: -10000px; width: 1px; height: 1px; overflow: hidden; }
.ca-form .checkbox { position: relative; }
.ca-form .checkbox input { display: block; position: absolute; left: 0; top: 2px; width: 21px; height: 21px; margin: 0; opacity: 0; }
.ca-form .checkbox input:focus-visible + label:before { outline: 3px solid var(--focus-ring); outline-offset: 2px; }
/* Πεδίο «Εργασία»: το select με το βελάκι του Renius (όπως στα φίλτρα των Έργων) */
.ca-form .form-group select { -webkit-appearance: none; appearance: none; padding-right: 44px; cursor: pointer;
  background-image: url(../img/icons/down-arrow-gray.svg); background-position: calc(100% - 18px) 50%; background-repeat: no-repeat; background-size: 11px; }
/* Μήνυμα μετά την αποστολή (site.js): κάτω από το κουμπί, πράσινο για επιτυχία, κόκκινο για σφάλμα· στο σκούρο θέμα πιο ανοιχτά */
.ca-form .form-status { margin: 16px 0 0; font-size: 15px; line-height: 1.5; font-weight: 600; }
.ca-form .form-status:empty { display: none; }
.ca-form .form-status.is-ok { color: var(--success); }
.ca-form .form-status.is-error { color: var(--error); }
.theme-dark .ca-form .form-status.is-ok { color: color-mix(in srgb, var(--success) 45%, var(--white)); }
.theme-dark .ca-form .form-status.is-error { color: color-mix(in srgb, var(--error) 45%, var(--white)); }
/* Σκούρο θέμα: το Renius δίνει φόντο στα input και textarea του comment-form, όχι στο select (Επικοινωνία, 24/10) */
.theme-dark .comment-form .form-group select { background-color: var(--aztechColor); }
.ca-form .form-group input:focus-visible, .ca-form .form-group textarea:focus-visible, .ca-form .form-group select:focus-visible { outline: 3px solid var(--focus-ring); outline-offset: 2px; }

/* Επικοινωνία (contact.html): όταν οι 3 κάρτες στοιχείων κάθονται στη σειρά, ίδιο ύψος (η «Base» πιάνει δύο γραμμές) */
@media only screen and (min-width: 1200px) { .contact-card.style-one { height: calc(100% - 30px); } }
/* Χωρίς το σχέδιο κάτω από τη φόρμα (Ιωάννης 24/10), η φωτογραφία δίπλα παίρνει το ύψος της στήλης της φόρμας */
@media only screen and (min-width: 992px) {
  .contact-form-row .comp-map, .contact-form-row .comp-map img { height: 100%; }
  .contact-form-row .comp-map img { object-fit: cover; }
}
/* Εναλλασσόμενες φωτογραφίες (site.js): κουμπί παύσης κάτω αριστερά πάνω στη φωτογραφία (δεξιά κάθονται τα πλωτά Viber και «πάνω») */
.contact-photos .photos-toggle { position: absolute; left: 16px; bottom: 16px; z-index: 2; width: 44px; height: 44px; border: 0;
  border-radius: 50%; display: inline-flex; align-items: center; justify-content: center; font-size: 20px;
  background: color-mix(in srgb, var(--white) 88%, transparent); color: var(--fg); box-shadow: 0 4px 14px rgba(0, 0, 0, .18); }
.contact-photos .photos-toggle:hover { background: var(--white); }

/* 404 (error.html): στη θέση της εικόνας του Renius (καρτούν) μεγάλο «404» με τη γραμματοσειρά τίτλων και το πορτοκαλί του site */
.error-wrap .error-code { font-size: 180px; line-height: .9; letter-spacing: -.02em; color: var(--accent); }
@media only screen and (max-width: 767px) { .error-wrap .error-code { font-size: 112px; } }
.error-wrap h1 { text-wrap: balance; }

/* Νομικές σελίδες (legal.html): οι τίτλοι ενοτήτων είναι H2 (το H1 είναι στη ζώνη) με την εμφάνιση των h3 του Renius (28, κινητό 24) */
.terms-wrap .single-para h2 { font-size: 28px; }
@media only screen and (max-width: 767px) { .terms-wrap .single-para h2 { font-size: 24px; } }
/* Ό,τι λείπει ακόμη από το κείμενο (μόνο στην προεπισκόπηση· η σελίδα δεν πάει σε deploy όσο υπάρχει) */
.terms-wrap mark.pending { background-color: color-mix(in srgb, var(--accent) 22%, transparent); color: inherit; padding: 0 4px; border-radius: 3px; }

/* Έργα (projects.html): ενιαίο gallery (Ιωάννης 24/10). Η κάρτα του Renius κρατά σχήμα, σκούρο στρώμα και αριθμό στο hover· η
   φωτογραφία φαίνεται πάντα (στο Renius μόνο στο hover, σκοτεινή και θολή) και όλη η κάρτα την ανοίγει μεγάλη στην ίδια σελίδα. */
.projects-grid .project-photo-card { display: flex; align-items: center; justify-content: center; aspect-ratio: 4 / 3; padding: 0; }
.projects-grid .project-photo-card .project-photo { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; z-index: -2;
  transition: transform var(--dur-slow) var(--ease-out); }
.projects-grid .project-photo-card:after { -webkit-backdrop-filter: none; backdrop-filter: none; background-color: color-mix(in srgb, var(--accent-strong) 45%, transparent); }
.projects-grid .project-photo-card .project-counter { margin: 0; opacity: 0; color: rgba(255, 255, 255, .6); transition: opacity var(--dur-base) var(--ease-out); }
.projects-grid .project-photo-card:hover .project-counter, .projects-grid .project-photo-card:focus-visible .project-counter { opacity: 1; color: rgba(255, 255, 255, .6); }
.projects-grid .project-photo-card:focus-visible:after { visibility: visible; opacity: 1; }
.projects-grid .project-photo-card:hover .project-photo { transform: scale(1.04); }
.projects-grid .project-photo-card:focus-visible { outline: 3px solid var(--focus-ring); outline-offset: 2px; }
@media (prefers-reduced-motion: reduce) { .projects-grid .project-photo-card .project-photo { transition: none; transform: none !important; } }

/* Αρχική, «Our Projects» (home.html, Ιωάννης 24/10): φωτογραφίες του πελάτη. Στο Renius η φωτογραφία φαίνεται μόνο στην «επόμενη»
   κάρτα του slider και στο hover, οπότε στο κινητό (μία κάρτα, χωρίς hover) δεν θα φαινόταν καμία. Όλες οι κάρτες παίρνουν την όψη
   της επόμενης (φωτογραφία, κίτρινη ετικέτα, λευκός τίτλος), χωρίς το θόλωμα, όπως στα Έργα. Ιωάννης 24/10: οι φωτογραφίες
   «θάβονταν» πίσω από το σκούρο. Γι' αυτό η κάρτα ψηλώνει (από 400 ως 540 px, με τον τίτλο κάτω), το σκούρο μένει μόνο πίσω από
   τον τίτλο, από τη μέση και κάτω, και η ετικέτα παίρνει δικό της σκούρο πλακίδιο. Η φωτογραφία φαίνεται καθαρή στο πάνω μισό.
   Λευκός δακτύλιος εστίασης πάνω στο σκούρο. */
.project-card.style-two.ca-photo { --focus-ring: var(--focus-ring-on-dark); --ca-scrim: color-mix(in srgb, var(--accent-strong) 85%, transparent);
  display: flex; flex-direction: column; justify-content: space-between; min-height: clamp(400px, 36vw, 540px); }
.project-card.style-two.ca-photo .project-photo { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; z-index: -2; }
/* Το slider μέσα στο container (Ιωάννης 25/10): χωρίς το περιθώριο των 12 px του Renius για το κινητό, που θα διπλασίαζε το κενό */
.container > .project-slider-two { margin-left: 0; margin-right: 0; }
/* Βελάκι στην άκρη (το Swiper απενεργοποιεί το κουμπί): αχνό και χωρίς το γέμισμα του hover, για να φαίνεται ότι δεν πάει πιο πέρα */
.slider-btn.style-one button:disabled { opacity: var(--opacity-disabled); cursor: default; }
.slider-btn.style-one button:disabled:before { opacity: 0 !important; width: 0 !important; }
.slider-btn.style-one button:disabled:hover img { filter: none; }
.project-card.style-two.ca-photo:after { visibility: visible; opacity: 1; -webkit-backdrop-filter: none; backdrop-filter: none;
  background: linear-gradient(to bottom, transparent 50%, var(--ca-scrim) calc(100% - 100px), var(--ca-scrim) 100%); }
.project-card.style-two.ca-photo .project-status { align-self: flex-start; padding: 6px 14px; border-radius: 999px; background-color: var(--ca-scrim);
  color: var(--secondaryColor); }
.project-card.style-two.ca-photo .project-counter { color: rgba(255, 255, 255, .28); }
.project-card.style-two.ca-photo .project-title h3 a { color: var(--whiteColor); }
.project-card.style-two.ca-photo .project-title .project-link { background-color: var(--primaryColor); }
.project-card.style-two.ca-photo .project-title .project-link img { filter: brightness(0) invert(1); }
/* Ζώνη CTA με γραμμή κειμένου (Έργα) */
.cta-area.style-two .cta-text { margin: 16px 0 0; max-width: 520px; font-size: 18px; line-height: 1.6; }

/* Κάθετη ταινία του hero (Renius index-2): το margin-right του template δεν χωρίζει τα στοιχεία σε writing-mode vertical-rl, και
   κολλούσαν («ΑΠΟ ΤΟ 1996ΣΕ ΟΛΗ ΤΗΝ ΑΝΔΡΟΠΡΩΤΑ…», Ιωάννης 29/10). Κενό στη ροή του κειμένου, όσο και στην οριζόντια ταινία (26 + 43 px). */
.hero-area.style-two .move-text-wrapper .move-text.style-two ul li {
  margin: 0;
  margin-inline-end: 69px;
}