/* ============================================================
   BRIX INDUSTRIAL — brix.css
   Thesis: ΔΕΛΤΙΟ ΣΥΣΦΙΞΗΣ / torque report
   Motion persona: Precise · Tier T2
   ============================================================ */

/* ---------- 1. TOKENS ----------
   Παλέτα v2 (18/08/2026, εντολή Giorgos): ΜΑΥΡΟ · ΑΣΗΜΙ · ΑΣΠΡΟ.
   Το πορτοκαλί (#F2600C) και το μπλε steel (#4A7A9B) αποσύρθηκαν.
   Ιεραρχία τώρα: μαύρο φόντο → ασημί κείμενο/δομή → ΛΕΥΚΟ = δράση.
   Το «signal» δεν είναι πια χρώμα, είναι ΥΛΙΚΟ: κατεργασμένο ατσάλι. */
:root{
  --canvas:#08090A;
  --surface:#0E1113;
  --surface-2:#161A1D;
  --ink:#E9ECEE;
  --ink-dim:#A4ACB1;
  --ink-faint:#788186;
  --rule:#242A2E;
  --rule-soft:#1A1F22;
  --steel:#93A0A7;
  --steel-dim:#5D686E;
  --signal:#FFFFFF;
  --signal-dim:#C9D0D4;
  --rust:#5A6165;
  /* brushed-steel plate: για CTA και ό,τι πρέπει να μοιάζει με μέταλλο */
  --plate:linear-gradient(178deg,#FFFFFF 0%,#E4E8EA 46%,#C6CDD1 100%);
  --plate-hot:linear-gradient(178deg,#FFFFFF 0%,#F2F5F6 50%,#DDE3E6 100%);

  --ff-display:"Commissioner",system-ui,sans-serif;
  --ff-text:"IBM Plex Sans",system-ui,sans-serif;
  --ff-mono:"Noto Sans Mono",ui-monospace,monospace;

  --e-base:cubic-bezier(.4,0,.2,1);
  --e-exit:cubic-bezier(.4,0,1,1);
  --t-micro:180ms;
  --t-base:340ms;
  --t-reveal:460ms;

  --container:min(1240px,92vw);
  --pad-s:56px;
  --pad-m:72px;
  --pad-l:88px;
  --r:2px;

  --z-header:900;
  --z-backdrop:999;
  --z-drawer:1000;
  --z-float:1050;
  --z-preload:1200;
}
@media (min-width:900px){
  :root{ --pad-s:96px; --pad-l:160px; --pad-m:128px; }
}

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

/* ---------- 3. GRAIN ---------- */
/* ΟΧΙ mix-blend-mode εδώ: fixed full-screen blend layer σημαίνει ότι ΚΑΘΕ repaint
   κάτω από αυτό ξαναπερνάει από blending. Σε μαύρο καμβά η διαφορά είναι αόρατη. */
.grain{
  position:fixed;inset:0;z-index:1;pointer-events:none;
  opacity:.026;
  background-image:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='140' height='140'%3E%3Cfilter id='n'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='.9' numOctaves='3'/%3E%3C/filter%3E%3Crect width='140' height='140' filter='url(%23n)'/%3E%3C/svg%3E");
}

/* ---------- 4. LAYOUT PRIMITIVES ---------- */
.wrap{width:var(--container);margin-inline:auto}
.section{padding-block:var(--pad-m);position:relative}
.section--tight{padding-block:var(--pad-s)}
.section--rule{border-top:1px solid var(--rule)}

.eyebrow{
  font-family:var(--ff-mono);font-size:.68rem;font-weight:500;
  letter-spacing:.16em;text-transform:uppercase;color:var(--steel);
  display:flex;align-items:center;gap:10px;margin-bottom:22px;
}
.eyebrow::before{
  content:"";width:26px;height:1px;background:var(--signal);flex:none;
}
.eyebrow--plain::before{display:none}

.h-xl{font-size:clamp(2.6rem,7.5vw,6.4rem)}
.h-l{font-size:clamp(2rem,4.6vw,3.6rem)}
.h-m{font-size:clamp(1.5rem,2.6vw,2.1rem);letter-spacing:-.02em}
.h-s{font-size:clamp(1.15rem,1.7vw,1.35rem);letter-spacing:-.015em;font-weight:700}

.lead{font-size:clamp(1.05rem,1.5vw,1.25rem);color:var(--ink-dim);max-width:62ch;line-height:1.65}
.dim{color:var(--ink-dim)}
.mono{font-family:var(--ff-mono);font-size:.72rem;letter-spacing:.12em;text-transform:uppercase;color:var(--ink-faint)}

/* technical corner brackets */
.brackets{position:relative}
.brackets::before,.brackets::after{
  content:"";position:absolute;width:14px;height:14px;pointer-events:none;
  border:1px solid var(--steel-dim);
}
.brackets::before{top:0;left:0;border-right:0;border-bottom:0}
.brackets::after{bottom:0;right:0;border-left:0;border-top:0}

/* ---------- 5. BUTTONS ---------- */
.btn{
  display:inline-flex;align-items:center;justify-content:center;gap:10px;
  min-height:52px;padding:0 26px;border-radius:var(--r);
  font-family:var(--ff-mono);font-size:.76rem;font-weight:500;
  letter-spacing:.12em;text-transform:uppercase;
  transition:background var(--t-micro) var(--e-base),color var(--t-micro) var(--e-base),border-color var(--t-micro) var(--e-base),transform var(--t-micro) var(--e-base);
}
/* CTA = πλάκα κατεργασμένου ατσαλιού, όχι «πορτοκαλί κουμπί» */
.btn--signal{
  background:var(--plate);color:var(--canvas);font-weight:500;
  box-shadow:inset 0 1px 0 rgba(255,255,255,.95),inset 0 -1px 0 rgba(0,0,0,.22),0 1px 0 rgba(0,0,0,.5);
}
.btn--signal:hover{background:var(--plate-hot);transform:translateY(-1px);box-shadow:inset 0 1px 0 rgba(255,255,255,1),0 6px 18px rgba(0,0,0,.5)}
.btn--ghost{border:1px solid var(--rule);color:var(--ink)}
.btn--ghost:hover{border-color:var(--signal);color:var(--signal)}
.btn--block{width:100%}

/* ---------- 6. HEADER ---------- */
.header{
  position:sticky;top:0;z-index:var(--z-header);
  background:rgba(8,9,10,.94);
  border-bottom:1px solid var(--rule);
}
.header__in{
  width:var(--container);margin-inline:auto;
  display:grid;grid-template-columns:auto 1fr auto;align-items:center;gap:16px;
  height:64px;
}
.brand{display:flex;align-items:center;gap:0}
.brand svg,.brand img{height:26px;width:auto;color:var(--ink)}
.nav-desktop{display:none}
.header__actions{display:flex;align-items:center;gap:10px;justify-self:end}

.menu-toggle{
  display:grid;place-items:center;width:44px;height:44px;
  border:1px solid var(--rule);border-radius:var(--r);margin-left:-6px;
}
.menu-toggle span{display:block;width:18px;height:1px;background:var(--ink);position:relative}
.menu-toggle span::before,.menu-toggle span::after{
  content:"";position:absolute;left:0;width:18px;height:1px;background:var(--ink);
  transition:transform var(--t-micro) var(--e-base);
}
.menu-toggle span::before{top:-6px}
.menu-toggle span::after{top:6px}
.menu-toggle[aria-expanded="true"] span{background:transparent}
.menu-toggle[aria-expanded="true"] span::before{transform:translateY(6px) rotate(45deg)}
.menu-toggle[aria-expanded="true"] span::after{transform:translateY(-6px) rotate(-45deg)}

.lang{
  display:flex;align-items:center;gap:2px;
  font-family:var(--ff-mono);font-size:.68rem;letter-spacing:.1em;
  border:1px solid var(--rule);border-radius:var(--r);overflow:hidden;
}
.lang button{padding:12px 12px;min-height:44px;display:grid;place-items:center;color:var(--ink-faint);transition:color var(--t-micro),background var(--t-micro)}
.lang button[aria-pressed="true"]{color:var(--canvas);background:var(--ink)}

.call-btn{
  display:grid;place-items:center;width:44px;height:44px;
  border:1px solid var(--signal);border-radius:var(--r);color:var(--signal);
  transition:background var(--t-micro) var(--e-base),color var(--t-micro) var(--e-base);
}
.call-btn:hover{background:var(--signal);color:var(--canvas)}
.call-btn svg{width:17px;height:17px}
.call-btn .phone-txt{display:none}
@media (max-width:999px){
  .header__in{position:relative}
  .brand{position:absolute;left:50%;top:50%;transform:translate(-50%,-50%)}
  .lang button{padding:12px 10px;font-size:.64rem}
}

@media (min-width:1000px){
  .header__in{height:76px;grid-template-columns:auto 1fr auto}
  .menu-toggle{display:none}
  .brand svg,.brand img{height:30px}
  .nav-desktop{
    display:flex;justify-content:center;gap:30px;
    font-family:var(--ff-mono);font-size:.72rem;letter-spacing:.11em;text-transform:uppercase;
  }
  .nav-desktop a{color:var(--ink-dim);position:relative;padding-block:6px;transition:color var(--t-micro) var(--e-base)}
  .nav-desktop a::after{
    content:"";position:absolute;left:0;bottom:0;width:100%;height:1px;background:var(--signal);
    transform:scaleX(0);transform-origin:left;transition:transform var(--t-base) var(--e-base);
  }
  .nav-desktop a:hover,.nav-desktop a[aria-current="page"]{color:var(--ink)}
  .nav-desktop a:hover::after,.nav-desktop a[aria-current="page"]::after{transform:scaleX(1)}
  .call-btn{width:auto;padding:0 18px;height:44px;gap:9px;font-family:var(--ff-mono);font-size:.74rem;letter-spacing:.1em}
  .call-btn .phone-txt{display:inline}
}

/* ---------- 7. MOBILE DRAWER (locked pattern) ---------- */
.nav-mobile{
  position:fixed;top:0;left:0;bottom:0;z-index:var(--z-drawer);
  width:clamp(260px,62vw,340px);
  transform:translateX(-105%);visibility:hidden;
  display:flex;flex-direction:column;gap:2px;
  padding:calc(22px + env(safe-area-inset-top)) 24px calc(24px + env(safe-area-inset-bottom));
  background:var(--surface);border-right:1px solid var(--rule);
  box-shadow:0 0 60px rgba(0,0,0,.5);overflow-y:auto;
  transition:transform .34s var(--e-base),visibility 0s linear .34s;
}
.nav-mobile.open{transform:none;visibility:visible;transition:transform .34s var(--e-base)}
.nav-mobile__brand{margin-bottom:26px;color:var(--ink)}
.nav-mobile__brand svg,.nav-mobile__brand img{height:24px;width:auto}
.nav-mobile a.nav-link{
  display:flex;align-items:center;gap:12px;min-height:50px;
  border-bottom:1px solid var(--rule-soft);
  font-family:var(--ff-display);font-weight:700;font-size:1.05rem;letter-spacing:-.01em;
}
.nav-mobile a.nav-link .n{font-family:var(--ff-mono);font-size:.62rem;color:var(--steel);font-weight:400;letter-spacing:.1em}
.nav-mobile__foot{margin-top:auto;padding-top:26px;display:grid;gap:10px}
.nav-backdrop{
  position:fixed;inset:0;z-index:var(--z-backdrop);
  background:rgba(4,5,6,.72);
  opacity:0;pointer-events:none;transition:opacity .3s var(--e-base);
}
.nav-backdrop.show{opacity:1;pointer-events:auto}
body.nav-open{overflow:hidden}
@media (prefers-reduced-motion:reduce){
  .nav-mobile,.nav-backdrop{transition:none}
}

/* ---------- 8. PRELOADER (v3 — compositor only) ----------
   ΤΡΕΧΕΙ ΜΙΑ ΦΟΡΑ ΑΝΑ SESSION. Inline script στο <head> βάζει .no-preload στο
   <html> από τη 2η σελίδα και μετά → καμία αυλαία, μηδέν καθυστέρηση στην πλοήγηση.

   v2 είχε SVG stroke-dashoffset animation πάνω σε compound path: κάθε frame
   ξανάκανε layout ΟΛΟ το SVG subtree (μετρήθηκε LayoutDuration 2074ms σε παράθυρο
   3s με 4x CPU throttle). Τώρα το λογότυπο είναι ένα div με CSS mask και κινείται
   ΜΟΝΟ με clip-path + transform — μηδέν layout, μηδέν mix-blend-mode. */
html.no-preload .preload{display:none!important}
.preload{
  position:fixed;inset:0;z-index:var(--z-preload);
  background:var(--canvas);display:grid;place-items:center;
  transition:clip-path .45s var(--e-base);
  clip-path:inset(0 0 0 0);
  contain:layout paint;
}
.preload[data-done]{clip-path:inset(0 0 100% 0);pointer-events:none}
.preload__in{display:grid;justify-items:center;gap:20px;width:min(340px,78vw)}
.preload__logo{display:none}
@supports ((mask-image:url("/assets/logo/brix-logo.svg")) or (-webkit-mask-image:url("/assets/logo/brix-logo.svg"))){
  .preload__logo{
    display:block;width:100%;aspect-ratio:1634/736;position:relative;overflow:hidden;
    background:var(--plate);
    -webkit-mask:url("/assets/logo/brix-logo.svg") center/contain no-repeat;
            mask:url("/assets/logo/brix-logo.svg") center/contain no-repeat;
    clip-path:inset(0 100% 0 0);
    animation:logoWipe .6s var(--e-base) .04s forwards;
  }
}
@keyframes logoWipe{to{clip-path:inset(0 0 0 0)}}
.preload__logo::after{
  content:"";position:absolute;inset:0;pointer-events:none;
  background:linear-gradient(104deg,transparent 40%,rgba(255,255,255,.92) 50%,transparent 60%);
  transform:translateX(-130%);
  animation:plateSweep .8s var(--e-base) .42s both;
}
@keyframes plateSweep{to{transform:translateX(130%)}}
.preload__bar{width:100%;height:1px;background:var(--rule);position:relative;overflow:hidden}
.preload__bar i{
  position:absolute;inset:0;background:var(--signal);
  transform:scaleX(0);transform-origin:left;
  animation:barIn 1.05s var(--e-base) forwards;
}
@keyframes barIn{to{transform:scaleX(1)}}
.preload__read{
  font-family:var(--ff-mono);font-size:.66rem;letter-spacing:.16em;
  color:var(--ink-faint);display:flex;justify-content:space-between;width:100%;
}
.preload__read b{color:var(--steel);font-weight:400}
@media (prefers-reduced-motion:reduce){
  .preload__bar i{animation-duration:1ms;animation-delay:0s}
  .preload__logo{clip-path:none!important;animation:none!important}
  .preload__logo::after{display:none}
  .preload{transition:none}
}

/* ---------- 9. HERO ---------- */
.hero{
  position:relative;min-height:100svh;display:grid;
  grid-template-rows:1fr auto;isolation:isolate;
  border-bottom:1px solid var(--rule);
}
.hero__media{position:absolute;inset:0;z-index:-2;overflow:hidden}
/* ΚΡΙΣΙΜΟ: εικόνα και video πρέπει να είναι ΣΤΟΙΒΑΓΜΕΝΑ, όχι σε κανονική ροή.
   Χωρίς position:absolute το <video> έμπαινε 899px ΚΑΤΩ από την εικόνα και το
   overflow:hidden το έκοβε — έπαιζε κανονικά αλλά δεν φαινόταν ποτέ. */
.hero__media > picture,
.hero__media img,
.hero__media video{
  position:absolute;inset:0;
  width:100%;height:100%;object-fit:cover;
  /* παλέτα v2: το media μπαίνει στο μαύρο/ασημί, δεν φέρνει δικά του χρώματα */
  filter:saturate(.1) contrast(1.12) brightness(.7);
}
.hero__media > picture{filter:none}
.hero__media video{z-index:1}
.hero__media video{opacity:0;transition:opacity 1s var(--e-base)}
.hero__media video.ready{opacity:1}
.hero__scrim{
  position:absolute;inset:0;z-index:-1;
  background:
    linear-gradient(180deg,rgba(8,9,10,.72) 0%,rgba(8,9,10,.28) 34%,rgba(8,9,10,.58) 72%,var(--canvas) 100%),
    radial-gradient(120% 80% at 50% 45%,transparent 30%,rgba(8,9,10,.55) 100%);
}
.hero__in{
  width:var(--container);margin-inline:auto;
  display:grid;align-content:center;justify-items:center;text-align:center;
  padding-block:110px 40px;gap:0;
}
.hero h1{margin-bottom:20px}
.hero h1 .ln{display:block;overflow:hidden}
.hero h1 .ln > span{display:block;transform:translateY(105%)}
/* Η χορογραφία του hero ΞΕΚΙΝΑΕΙ όταν σηκωθεί η αυλαία του preloader
   (το JS αφαιρεί το .is-loading). Αλλιώς έπαιζε από πίσω και δεν την έβλεπε κανείς. */
body:not(.is-loading) .hero h1 .ln > span{animation:lineUp .7s var(--e-base) .18s forwards}
body:not(.is-loading) .hero h1 .ln:nth-child(2) > span{animation-delay:.27s}
@keyframes lineUp{to{transform:none}}
.hero__sub{max-width:56ch;margin:0 auto 30px;color:var(--ink-dim);font-size:clamp(1rem,1.4vw,1.18rem)}
.hero__cta{display:flex;gap:12px;flex-wrap:wrap;justify-content:center}
.hero__eyebrow{justify-content:center}
/* mobile: τα δύο CTA ίδιου πλάτους — όχι δύο διαφορετικά κουμπιά στοιβαγμένα */
@media (max-width:559px){
  .hero__cta{display:grid;grid-template-columns:1fr;gap:10px;width:min(100%,340px);margin-inline:auto}
  .hero__cta .btn{width:100%}
}

/* ---- ΤΑΜΠΕΛΑ ΤΑΥΤΟΤΗΤΑΣ: το λογότυπο ως πλάκα κατεργασμένου ατσαλιού ----
   Χαράσσεται με wipe, μετά περνάει ανάκλαση φωτός πάνω από τα γράμματα.
   Το mask κρατάει την ανάκλαση ΜΕΣΑ στο σχήμα του λογοτύπου. */
.hero__plate{
  display:flex;align-items:center;justify-content:center;
  gap:clamp(12px,2vw,20px);margin-bottom:clamp(18px,3vw,28px);
  clip-path:inset(0 100% 0 0);
}
body:not(.is-loading) .hero__plate{animation:plateIn .85s var(--e-base) .05s forwards}
@keyframes plateIn{to{clip-path:inset(0 0 0 0)}}
.hero__mark{display:none}
@supports ((mask-image:url("/assets/logo/brix-logo.svg")) or (-webkit-mask-image:url("/assets/logo/brix-logo.svg"))){
  .hero__mark{
    display:block;flex:none;position:relative;overflow:hidden;
    width:clamp(150px,22vw,250px);aspect-ratio:1634/736;
    background:var(--plate);
    -webkit-mask:url("/assets/logo/brix-logo.svg") center/contain no-repeat;
            mask:url("/assets/logo/brix-logo.svg") center/contain no-repeat;
  }
}
.hero__mark::after{
  content:"";position:absolute;inset:0;
  background:linear-gradient(104deg,transparent 38%,rgba(255,255,255,.98) 50%,transparent 62%);
  transform:translateX(-130%);
}
body:not(.is-loading) .hero__mark::after{animation:markSweep 1.15s var(--e-base) .5s both}
@keyframes markSweep{from{transform:translateX(-130%)}to{transform:translateX(130%)}}
.hero__plate-rule{width:1px;height:36px;background:var(--rule);flex:none}
.hero__plate .hero__eyebrow{margin:0;text-align:left;max-width:30ch;line-height:1.7}
@media (max-width:719px){
  .hero__plate{flex-direction:column;gap:13px}
  .hero__plate-rule{width:46px;height:1px}
  .hero__plate .hero__eyebrow{text-align:center;justify-content:center;max-width:none}
}
@media (prefers-reduced-motion:reduce){
  .hero__plate{clip-path:none;animation:none}
  .hero__mark::after{display:none}
}

/* ---- Header πάνω στο hero: διάφανο + κρυμμένο λογότυπο (ο ήρωας είναι η ταμπέλα).
   Μόλις κυλήσει η σελίδα, το header «κλειδώνει» και το λογότυπο επανέρχεται. ---- */
body.has-hero .header{
  background:transparent;backdrop-filter:none;border-bottom-color:transparent;
  transition:background var(--t-base) var(--e-base),border-color var(--t-base) var(--e-base);
}
body.has-hero.scrolled .header{
  background:rgba(8,9,10,.94);border-bottom-color:var(--rule);
}
body.has-hero .header .brand{
  opacity:0;pointer-events:none;transform:translateY(-6px);
  transition:opacity var(--t-base) var(--e-base),transform var(--t-base) var(--e-base);
}
body.has-hero.scrolled .header .brand{opacity:1;pointer-events:auto;transform:none}
@media (max-width:999px){
  body.has-hero .header .brand{transform:translate(-50%,-50%) translateY(-6px)}
  body.has-hero.scrolled .header .brand{transform:translate(-50%,-50%)}
}

/* readout strip — the anti-cliché device */
.readout{
  border-top:1px solid var(--rule);
  background:linear-gradient(180deg,rgba(8,9,10,.35),var(--canvas));
}
.readout__in{
  width:var(--container);margin-inline:auto;
  display:grid;grid-template-columns:repeat(2,1fr);
  font-family:var(--ff-mono);font-size:.64rem;letter-spacing:.13em;text-transform:uppercase;
}
.readout__cell{
  padding:14px 0;display:flex;flex-direction:column;gap:3px;
  border-left:1px solid var(--rule);padding-left:14px;
}
.readout__cell:first-child{border-left:0;padding-left:0}
.readout__k{color:var(--ink-faint);font-size:.6rem}
.readout__v{color:var(--ink);font-size:.78rem;letter-spacing:.06em}
.readout__v em{font-style:normal;color:var(--signal)}
@media (min-width:760px){
  .readout__in{grid-template-columns:repeat(4,1fr)}
  .readout__cell{padding-left:20px}
}
@media (prefers-reduced-motion:reduce){
  .hero h1 .ln > span{transform:none;animation:none}
  .hero__media video{opacity:1;transition:none}
}

/* ---------- 10. REVEALS (Precise: clip + slide, never plain fade-up) ---------- */
[data-rv]{opacity:0}
[data-rv].in{opacity:1}
[data-rv="clip"]{clip-path:inset(0 100% 0 0);transition:clip-path var(--t-reveal) var(--e-base),opacity var(--t-micro) linear}
[data-rv="clip"].in{clip-path:inset(0 0 0 0)}
[data-rv="up"]{transform:translateY(18px);transition:transform var(--t-reveal) var(--e-base),opacity var(--t-base) linear}
[data-rv="up"].in{transform:none}
[data-rv="line"]{transform:scaleX(0);transform-origin:left;transition:transform var(--t-reveal) var(--e-base);opacity:1}
[data-rv="line"].in{transform:none}
@media (prefers-reduced-motion:reduce){
  [data-rv]{opacity:1!important;clip-path:none!important;transform:none!important;transition:none!important}
}

/* ---------- 11. CAPABILITIES GRID ---------- */
.caps{display:grid;gap:1px;background:var(--rule);border:1px solid var(--rule)}
@media (min-width:680px){.caps{grid-template-columns:repeat(2,1fr)}}
@media (min-width:1060px){.caps{grid-template-columns:repeat(3,1fr)}}
/* mobile: swipe row instead of an endless stack (MOBILE-STANDARD §3) */
@media (max-width:679px){
  .caps{
    grid-auto-flow:column;grid-auto-columns:78vw;gap:10px;
    background:none;border:0;overflow-x:auto;scroll-snap-type:x mandatory;
    padding-bottom:14px;margin-inline:calc(50% - 50vw);
    padding-inline:max(4vw,calc(50vw - var(--container)/2));
    scroll-padding-inline:max(4vw,calc(50vw - var(--container)/2));
    scrollbar-width:thin;scrollbar-color:var(--rule) transparent;
  }
  .caps .cap{border:1px solid var(--rule);border-radius:var(--r);scroll-snap-align:start}
  .caps::after{content:"";width:1px;flex:none}
}
.cap{
  background:var(--canvas);padding:28px 24px 26px;
  display:grid;gap:10px;align-content:start;position:relative;
  transition:background var(--t-base) var(--e-base);
}
.cap:hover{background:var(--surface)}
.cap__n{font-family:var(--ff-mono);font-size:.66rem;letter-spacing:.16em;color:var(--steel)}
.cap h3{font-size:1.12rem;font-weight:700;letter-spacing:-.015em;line-height:1.25}
.cap p{margin:0;font-size:.94rem;color:var(--ink-dim);line-height:1.6}
.cap__more{
  font-family:var(--ff-mono);font-size:.64rem;letter-spacing:.14em;text-transform:uppercase;
  color:var(--ink-faint);margin-top:4px;display:inline-flex;gap:8px;align-items:center;min-height:44px;
  transition:color var(--t-micro) var(--e-base);
}
.cap:hover .cap__more{color:var(--signal)}

/* ---------- 12. SIGNATURE — Η ΑΚΟΛΟΥΘΙΑ ---------- */
.seq{background:var(--surface);border-block:1px solid var(--rule)}
.seq__grid{display:grid;gap:44px;align-items:center}
@media (min-width:940px){.seq__grid{grid-template-columns:5fr 7fr;gap:64px}}
.seq__fig{position:relative;justify-self:center;width:min(420px,86vw)}
.seq__svg{width:100%;height:auto;overflow:visible}
.seq__svg .flange{fill:var(--surface-2);stroke:var(--rule);stroke-width:2}
.seq__svg .bore{fill:var(--canvas);stroke:var(--rule);stroke-width:2}
.seq__svg .stud{fill:var(--canvas);stroke:var(--rule);stroke-width:2;transition:fill var(--t-base) var(--e-base),stroke var(--t-base) var(--e-base)}
.seq__svg .studnum{font-family:var(--ff-mono);font-size:11px;fill:var(--ink-faint);text-anchor:middle;dominant-baseline:central;transition:fill var(--t-base) var(--e-base)}
.seq__svg g.on .stud{fill:var(--signal);stroke:var(--signal);filter:drop-shadow(0 0 7px rgba(255,255,255,.34))}
.seq__svg g.on .studnum{fill:var(--canvas);font-weight:500}
.seq__svg .ring{fill:none;stroke:var(--steel-dim);stroke-width:1;stroke-dasharray:3 5;opacity:.55}
.seq__read{
  position:absolute;left:50%;top:50%;transform:translate(-50%,-50%);
  display:grid;justify-items:center;gap:2px;pointer-events:none;
}
.seq__bar{font-family:var(--ff-mono);font-size:clamp(1.5rem,4vw,2rem);color:var(--ink);letter-spacing:.02em;font-weight:500}
.seq__unit{font-family:var(--ff-mono);font-size:.6rem;letter-spacing:.24em;color:var(--steel)}
.seq__steps{display:grid;gap:0;border-top:1px solid var(--rule)}
.seq__step{
  display:grid;grid-template-columns:auto 1fr;gap:16px;
  padding:18px 0;border-bottom:1px solid var(--rule);align-items:start;
  opacity:.42;transition:opacity var(--t-base) var(--e-base);
}
.seq__step.on{opacity:1}
.seq__step b{font-family:var(--ff-mono);font-size:.68rem;letter-spacing:.14em;color:var(--steel);font-weight:400;padding-top:3px}
.seq__step h3{font-size:1rem;font-weight:700;letter-spacing:-.01em;margin-bottom:3px}
.seq__step p{margin:0;font-size:.9rem;color:var(--ink-dim);line-height:1.55}
.seq__note{
  margin-top:20px;font-family:var(--ff-mono);font-size:.62rem;letter-spacing:.09em;
  color:var(--ink-faint);line-height:1.7;
}

/* ---------- 13. FULL-BLEED BAND ---------- */
.band{
  position:relative;isolation:isolate;overflow:hidden;
  min-height:min(58vh,460px);display:grid;align-items:center;
  border-block:1px solid var(--rule);
}
.band__bg{position:absolute;inset:0;z-index:-2}
.band__bg img{width:100%;height:100%;object-fit:cover;filter:saturate(.1) contrast(1.12) brightness(.5)}
.band__bg::after{
  content:"";position:absolute;inset:0;
  background:linear-gradient(90deg,rgba(8,9,10,.9) 0%,rgba(8,9,10,.5) 55%,rgba(8,9,10,.75) 100%);
}
.band__in{width:var(--container);margin-inline:auto;padding-block:64px;max-width:none}
.band__in .h-l{max-width:20ch}
.band__in p{max-width:52ch;margin-top:16px}

/* swipe affordance */
.swipe-hint{
  display:flex;align-items:center;gap:8px;margin-top:10px;
  font-family:var(--ff-mono);font-size:.6rem;letter-spacing:.14em;text-transform:uppercase;color:var(--ink-faint);
}
.swipe-hint::after{content:"→";color:var(--steel)}
@media (min-width:680px){.swipe-hint{display:none}}

/* ---------- 14. FIELD GALLERY ---------- */
.field{
  display:grid;grid-auto-flow:column;grid-auto-columns:74vw;gap:12px;
  overflow-x:auto;scroll-snap-type:x mandatory;
  padding-bottom:14px;margin-inline:calc(50% - 50vw);padding-inline:max(4vw,calc(50vw - var(--container)/2));scroll-padding-inline:max(4vw,calc(50vw - var(--container)/2));
  scrollbar-width:thin;scrollbar-color:var(--rule) transparent;
}
.field figure{margin:0;scroll-snap-align:start;position:relative}
.field img{width:100%;aspect-ratio:3/4;object-fit:cover;border:1px solid var(--rule);border-radius:var(--r);filter:saturate(.25) contrast(1.06)}
.field figcaption{
  font-family:var(--ff-mono);font-size:.62rem;letter-spacing:.11em;text-transform:uppercase;
  color:var(--ink-faint);padding-top:9px;
}
@media (min-width:760px){
  .field{grid-auto-columns:minmax(0,1fr);grid-auto-flow:row;grid-template-columns:repeat(4,1fr);overflow:visible;margin-inline:0;padding-inline:0}
}

/* ---------- 15. SECTORS ---------- */
.sectors{display:grid;gap:0;border-top:1px solid var(--rule)}
.sector{
  display:grid;grid-template-columns:auto 1fr auto;gap:16px;align-items:center;
  padding:20px 0;border-bottom:1px solid var(--rule);
  transition:padding-left var(--t-base) var(--e-base);
}
.sector:hover{padding-left:10px}
.sector b{font-family:var(--ff-mono);font-size:.66rem;color:var(--steel);font-weight:400;letter-spacing:.14em}
.sector h3{font-size:clamp(1.1rem,2.2vw,1.5rem);font-weight:700}
.sector span{font-size:.85rem;color:var(--ink-faint);text-align:right;max-width:26ch;line-height:1.5}
@media (max-width:640px){
  .sector{grid-template-columns:auto 1fr;gap:12px}
  .sector span{grid-column:2;text-align:left;max-width:none;font-size:.82rem}
}

/* ---------- 16. SERVICE DETAIL (ypiresies) ---------- */
.svc{display:grid;gap:28px;padding-block:var(--pad-s);border-top:1px solid var(--rule)}
@media (min-width:900px){
  .svc{grid-template-columns:7fr 5fr;gap:56px;align-items:center}
  .svc:nth-child(even) .svc__media{order:2}
}
.svc__media{position:relative;border:1px solid var(--rule);border-radius:var(--r);overflow:hidden}
.svc__media img{width:100%;aspect-ratio:3/2;object-fit:cover;filter:saturate(.25) contrast(1.06)}
.svc__media figcaption{
  position:absolute;left:0;bottom:0;padding:8px 12px;
  background:rgba(8,9,10,.82);border-top:1px solid var(--rule);border-right:1px solid var(--rule);
  font-family:var(--ff-mono);font-size:.58rem;letter-spacing:.12em;text-transform:uppercase;color:var(--ink-faint);
}
.svc__body h2{margin-bottom:14px}
.svc__list{list-style:none;margin:20px 0 0;padding:0;display:grid;gap:0;border-top:1px solid var(--rule)}
.svc__list li{
  display:grid;grid-template-columns:auto 1fr;gap:12px;
  padding:11px 0;border-bottom:1px solid var(--rule-soft);
  font-size:.93rem;color:var(--ink-dim);line-height:1.5;
}
.svc__list li::before{content:"—";color:var(--steel);font-family:var(--ff-mono);font-size:.8rem}

/* ---------- 17. STEPS / METHOD ---------- */
.steps{display:grid;gap:1px;background:var(--rule);border:1px solid var(--rule)}
@media (min-width:760px){.steps{grid-template-columns:repeat(4,1fr)}}
@media (max-width:759px){
  .steps{
    grid-auto-flow:column;grid-auto-columns:74vw;gap:10px;background:none;border:0;
    overflow-x:auto;scroll-snap-type:x mandatory;padding-bottom:14px;
    margin-inline:calc(50% - 50vw);padding-inline:max(4vw,calc(50vw - var(--container)/2));
    scroll-padding-inline:max(4vw,calc(50vw - var(--container)/2));
    scrollbar-width:thin;scrollbar-color:var(--rule) transparent;
  }
  .steps .step{border:1px solid var(--rule);border-radius:var(--r);scroll-snap-align:start}
}
.step{background:var(--canvas);padding:26px 22px;display:grid;gap:9px;align-content:start}
.step b{font-family:var(--ff-mono);font-size:.66rem;letter-spacing:.16em;color:var(--signal);font-weight:400}
.step h3{font-size:1.02rem;font-weight:700}
.step p{margin:0;font-size:.9rem;color:var(--ink-dim);line-height:1.55}

/* ---------- 18. FAQ ---------- */
.faq{border-top:1px solid var(--rule)}
.faq details{border-bottom:1px solid var(--rule)}
.faq summary{
  list-style:none;cursor:pointer;padding:20px 40px 20px 0;position:relative;
  font-family:var(--ff-display);font-weight:700;font-size:1.02rem;letter-spacing:-.01em;
}
.faq summary::-webkit-details-marker{display:none}
.faq summary::after{
  content:"";position:absolute;right:6px;top:50%;width:11px;height:11px;
  border-right:1px solid var(--steel);border-bottom:1px solid var(--steel);
  transform:translateY(-70%) rotate(45deg);transition:transform var(--t-base) var(--e-base);
}
.faq details[open] summary::after{transform:translateY(-20%) rotate(-135deg)}
.faq p{padding:0 0 20px;margin:0;color:var(--ink-dim);font-size:.96rem;max-width:76ch}

/* ---------- 19. CTA BAND ---------- */
.cta{position:relative;isolation:isolate;overflow:hidden;border-top:1px solid var(--rule)}
.cta__bg{position:absolute;inset:0;z-index:-2}
.cta__bg img{width:100%;height:100%;object-fit:cover;filter:saturate(.1) contrast(1.08) brightness(.4)}
.cta__in{width:var(--container);margin-inline:auto;padding-block:var(--pad-s);display:grid;gap:22px;justify-items:start}
.cta__in .h-l{max-width:18ch}
.cta__row{display:flex;gap:12px;flex-wrap:wrap}

/* ---------- 20. FORM ---------- */
.form{display:grid;gap:14px}
.form__row{display:grid;gap:14px}
@media (min-width:640px){.form__row{grid-template-columns:1fr 1fr}}
.field-l{display:grid;gap:7px}
.field-l > span{font-family:var(--ff-mono);font-size:.64rem;letter-spacing:.13em;text-transform:uppercase;color:var(--ink-faint)}
.form input,.form select,.form textarea{
  /* WCAG 1.4.11: το περίγραμμα του πεδίου χρειάζεται ≥3:1 για να αναγνωρίζεται
     ως στοιχείο ελέγχου — το --rule (1.3:1) δεν έφτανε. */
  width:100%;background:var(--surface);border:1px solid var(--steel-dim);border-radius:var(--r);
  color:var(--ink);font-family:var(--ff-text);font-size:16px;padding:13px 14px;
  transition:border-color var(--t-micro) var(--e-base),background var(--t-micro) var(--e-base);
}
.form textarea{min-height:132px;resize:vertical}
.form input:focus,.form select:focus,.form textarea:focus{border-color:var(--steel);background:var(--surface-2);outline:none}
.form .hp{position:absolute;left:-9999px;width:1px;height:1px;overflow:hidden}
.form__msg{font-family:var(--ff-mono);font-size:.72rem;letter-spacing:.08em;min-height:1.2em}
/* σε μονόχρωμη παλέτα η κατάσταση ΔΕΝ δηλώνεται μόνο με χρώμα (WCAG 1.4.1) */
.form__msg.ok{color:var(--ink)}
.form__msg.ok::before{content:"[OK] ";color:var(--steel)}
.form__msg.err{color:var(--signal);font-weight:500}
.form__msg.err::before{content:"[!] ";color:var(--signal)}

/* ---------- 21. CONTACT CARDS ---------- */
.info{display:grid;gap:1px;background:var(--rule);border:1px solid var(--rule)}
@media (min-width:720px){.info{grid-template-columns:repeat(3,1fr)}}
.info__c{background:var(--canvas);padding:24px 22px;display:grid;gap:6px;align-content:start}
.info__c b{font-family:var(--ff-mono);font-size:.62rem;letter-spacing:.15em;text-transform:uppercase;color:var(--ink-faint);font-weight:400}
.info__c a,.info__c p{font-size:1.02rem;margin:0;color:var(--ink)}
.info__c a:hover{color:var(--signal)}

/* ---------- 22. FOOTER ---------- */
.footer{border-top:1px solid var(--rule);background:var(--surface);padding-block:44px 22px}
.footer__grid{display:grid;gap:28px}
@media (max-width:819px){.footer__grid{grid-template-columns:1fr 1fr}
.footer__brand{grid-column:1 / -1}}
@media (min-width:820px){.footer__grid{grid-template-columns:2fr 1fr 1fr}}
.footer__brand svg,.footer__brand img{height:28px;width:auto;color:var(--ink);margin-bottom:14px}
.footer__brand p{color:var(--ink-dim);font-size:.92rem;max-width:40ch}
.footer h4{font-family:var(--ff-mono);font-size:.64rem;letter-spacing:.15em;text-transform:uppercase;color:var(--ink-faint);font-weight:400;margin-bottom:12px}
.footer ul{list-style:none;margin:0;padding:0;display:grid;gap:2px;font-size:.93rem}
.footer ul a{display:inline-flex;align-items:center;min-height:44px}
.footer ul a{color:var(--ink-dim);transition:color var(--t-micro) var(--e-base)}
.footer ul a:hover{color:var(--ink)}
.footer__bottom{
  margin-top:40px;padding-top:18px;border-top:1px solid var(--rule);
  display:flex;flex-wrap:wrap;gap:12px;justify-content:space-between;
  font-family:var(--ff-mono);font-size:.62rem;letter-spacing:.1em;color:var(--ink-faint);
}
.footer__bottom a{display:inline-block;padding-block:10px}
.footer__bottom a:hover{color:var(--ink)}

/* ---------- 23. FLOATS ---------- */
.float-call{
  position:fixed;right:16px;bottom:calc(16px + env(safe-area-inset-bottom));z-index:var(--z-float);
  display:grid;place-items:center;width:54px;height:54px;border-radius:50%;
  background:var(--plate);color:var(--canvas);box-shadow:0 8px 24px rgba(0,0,0,.55),inset 0 1px 0 rgba(255,255,255,.9);
  transition:transform var(--t-micro) var(--e-base);
}
.float-call:hover{transform:scale(1.05)}
.float-call svg{width:22px;height:22px}
@media (min-width:1000px){.float-call{display:none}}
/* Στην πρώτη οθόνη του hero υπάρχει ήδη το κουμπί κλήσης — το FAB θα κάλυπτε
   το readout. Εμφανίζεται μόλις αρχίσει το scroll. */
body.has-hero .float-call{
  opacity:0;pointer-events:none;transform:scale(.85);
  transition:opacity var(--t-base) var(--e-base),transform var(--t-base) var(--e-base);
}
body.has-hero.scrolled .float-call{opacity:1;pointer-events:auto;transform:none}

.to-top{
  position:fixed;left:16px;bottom:calc(16px + env(safe-area-inset-bottom));z-index:var(--z-float);
  width:40px;height:40px;display:grid;place-items:center;border-radius:var(--r);
  border:1px solid var(--rule);background:rgba(14,17,19,.92);color:var(--ink-dim);
  opacity:0;pointer-events:none;transition:opacity var(--t-base) var(--e-base);
}
.to-top.show{opacity:1;pointer-events:auto}
.to-top svg{width:15px;height:15px}

/* ---------- 24. BREADCRUMB / PAGE HEAD ---------- */
.phead{padding-block:calc(var(--pad-s) + 12px) var(--pad-s);border-bottom:1px solid var(--rule);position:relative}
.phead .crumb{font-family:var(--ff-mono);font-size:.64rem;letter-spacing:.13em;text-transform:uppercase;color:var(--ink-faint);margin-bottom:18px}
.phead .crumb a:hover{color:var(--steel)}
.phead h1{max-width:18ch}
.phead .lead{margin-top:18px}

/* ---------- 25. LANG VISIBILITY (must beat any component display rule) ---------- */
html[lang="el"] [data-en]{display:none!important}
html[lang="en"] [data-el]{display:none!important}

/* ---------- 26. UTIL ---------- */
.sr-only{position:absolute;width:1px;height:1px;padding:0;margin:-1px;overflow:hidden;clip:rect(0,0,0,0);white-space:nowrap;border:0}
.skip{position:absolute;left:-9999px;top:0;z-index:2000;background:var(--signal);color:var(--canvas);padding:10px 16px;font-family:var(--ff-mono);font-size:.72rem}
.skip:focus{left:8px;top:8px}
.rule{height:1px;background:var(--rule);border:0;margin:0}
.stack-s > * + *{margin-top:14px}
.mt-l{margin-top:44px}
.mt-m{margin-top:28px}

/* ---------- 26b. ΑΝΕΣΤΡΑΜΜΕΝΕΣ ΖΩΝΕΣ — ΑΣΗΜΙ ΦΥΛΛΟ ----------
   Δεν είναι «άσπρο section για ποικιλία». Το site είναι ΔΕΛΤΙΟ ΣΥΣΦΙΞΗΣ: αυτές οι
   ζώνες είναι το ΤΥΠΩΜΕΝΟ ΦΥΛΛΟ — ασημί χαρτί με μαύρη χάραξη, ανάμεσα στις
   σκοτεινές ζώνες του πεδίου. Ίδιο σύστημα, ανεστραμμένα tokens: ό,τι είναι
   χτισμένο με var() γυρίζει μόνο του, χωρίς δεύτερο stylesheet.
   Όλοι οι λόγοι αντίθεσης ελεγμένοι (ink 16:1 · dim 7:1 · faint 4.6:1 · borders ≥3:1). */
.inv{
  --canvas:#E6E9EB;
  --surface:#F1F3F4;
  --surface-2:#D8DDE0;
  --ink:#0A0C0D;
  --ink-dim:#454E53;
  --ink-faint:#61696E;
  --rule:#BFC7CB;
  --rule-soft:#D3D9DC;
  --steel:#556066;
  --steel-dim:#6F787D;
  --signal:#0A0C0D;
  --signal-dim:#3A4247;
  --plate:linear-gradient(178deg,#2A3135 0%,#12171A 52%,#080A0B 100%);
  --plate-hot:linear-gradient(178deg,#3A4247 0%,#1B2125 52%,#0E1214 100%);
  background:var(--canvas);
  color:var(--ink);
  border-block:1px solid #C8CFD3;
}
/* λεπτή σκιά στα όρια, ώστε το φύλλο να «κάθεται» πάνω στο μαύρο αντί να κολλάει */
.inv::before,.inv::after{
  content:"";position:absolute;left:0;right:0;height:26px;pointer-events:none;
}
.inv::before{top:0;background:linear-gradient(180deg,rgba(0,0,0,.16),transparent)}
.inv::after{bottom:0;background:linear-gradient(0deg,rgba(0,0,0,.12),transparent)}
.inv{position:relative}
/* η λάμψη των κοχλιών ήταν λευκή — σε ασημί φύλλο πρέπει να είναι σκιά */
.inv .seq__svg g.on .stud{filter:drop-shadow(0 1px 2px rgba(0,0,0,.35))}
/* το CTA γίνεται μαύρη πλάκα με ανοιχτό κείμενο */
.inv .btn--signal{box-shadow:inset 0 1px 0 rgba(255,255,255,.14),0 1px 0 rgba(0,0,0,.25)}
.inv .btn--signal:hover{box-shadow:inset 0 1px 0 rgba(255,255,255,.2),0 6px 18px rgba(0,0,0,.28)}
.inv .btn--ghost{border-color:var(--steel-dim)}
.inv .call-btn,.inv .float-call{color:inherit}

/* Στις /ypiresies η ανεστραμμένη ζώνη δεν είναι full-bleed band αλλά ΦΥΛΛΟ:
   ασημί χαρτί ακουμπισμένο πάνω στο μαύρο, μία υπηρεσία ανά φύλλο. */
.svc.inv{
  padding-inline:clamp(18px,3vw,42px);
  border:1px solid #C8CFD3;border-radius:var(--r);
  margin-block:18px;
  box-shadow:0 18px 40px rgba(0,0,0,.45);
}
.svc.inv::before,.svc.inv::after{display:none}
/* το figcaption κάθεται σε ΣΚΟΥΡΟ overlay πάνω στη φωτογραφία, όχι στο ασημί
   φύλλο — άρα μένει ανοιχτόχρωμο ακόμα και μέσα στην ανεστραμμένη ζώνη */
.inv .svc__media figcaption{color:#C9D0D4}

/* ---------- 27. MOBILE PASS (v2 · 18/08/2026) ----------
   Μετρημένο σε 320 / 360 / 390 / 414 / 430 px, και στις 10 σελίδες:
   (α) κανένα στοιχείο αφής κάτω από 44px,
   (β) κανένα mono label κάτω από 11px — στο κινητό τα τεχνικά labels
       ήταν 9.3-10.9px και απλά δεν διαβάζονταν.
   Το desktop μένει ΑΚΡΙΒΩΣ όπως σχεδιάστηκε. */
@media (max-width:999px){
  /* α. tap targets */
  .footer__bottom a{min-height:44px;display:inline-flex;align-items:center;padding-block:0}
  .footer__bottom span{display:inline-flex;flex-wrap:wrap;align-items:center;gap:0 6px}
  .footer__bottom{gap:4px 12px}
  .to-top{width:44px;height:44px}
  .brand{min-height:44px}
  .skip{padding:13px 16px}
  .info__c a{min-height:44px;display:inline-flex;align-items:center}

  /* β. τυπογραφικό δάπεδο */
  .eyebrow{font-size:.72rem}
  .readout__in{font-size:.7rem}
  .readout__k{font-size:.7rem}
  .readout__v{font-size:.82rem}
  .seq__unit,.swipe-hint,.field figcaption,.seq__note,.info__c b,.footer__bottom,
  .nav-mobile a.nav-link .n,.phead .crumb,.field-l > span,.footer h4,
  .cap__more,.cap__n,.sector b,.step b,.seq__step b,.preload__read,
  .mono,.footer ul{font-size:.72rem}
  .svc__media figcaption,.lang button{font-size:.7rem}
  .footer ul{font-size:.95rem}
}