/* ==========================================================================
   KY CONSTRUCTION — SITE STYLESHEET
   Thesis: «Η επιφάνεια που μιλάει»
   Style : premium industrial drawing sheet (hairline rules + shared grids + giant YK)
   Type  : IBM Plex Sans (display+UI) · Manrope (body) · JetBrains Mono (data only)
   NOTE  : Exo 2 and IBM Plex Mono ship NO greek subset — verified against Google
           Fonts METADATA.pb and the live css2 response. On this 100% Greek site
           they never rendered a single glyph. Do not reintroduce them.
   Motion: persona Confident — cubic-bezier(.16,1,.3,1), 450-700ms for entrances;
           cubic-bezier(.4,0,.2,1) @ 180ms for hovers/states.
   NOTE  : shared by every page. Structured for a future WordPress conversion —
           header/footer/components are self-contained blocks.
   ========================================================================== */

/* ============ 1. TOKENS ============ */
:root{
  /* ---------- PALETTE — LOCKED. Not one brand hex moves. ---------- */
  --canvas:#FAFAF8;
  --ink:#181818;
  --amber:#F0A200;
  --whisper:#F4E9CE;
  --dark:#101010;
  --charcoal:#232323;
  --muted:#3d3d3d;
  --muted-light:rgba(255,255,255,.68);

  /* ---------- AMBER DERIVATIVES — same hue, three jobs, all measured ----------
     --amber-hover  #DE9700  amber −6%, primary CTA hover fill (ink label 9.4:1)
     --amber-edge   #C07F00  3.20:1 on canvas → clears WCAG 1.4.11 as a control
                             boundary (raw amber on canvas is only 2.07:1).
     --amber-deep   #9A6600  4.70:1 on canvas → the ONLY amber permitted as small
                             TEXT on a light ground. The old #C98600 was 2.91:1.
     On DARK grounds raw --amber is 8.91:1 and stays exactly as it is. */
  --amber-hover:#DE9700;
  --amber-edge:#C07F00;
  --amber-deep:#9A6600;

  /* ---------- LINE SYSTEM — three weights, three jobs, never improvise a fourth. */
  --rule:rgba(24,24,24,.34);        /* THE DRAWN LINE. 2.15:1. Shared card-grid
                                       hairlines, section separators, .rule, panel
                                       frames, spec-table frame. */
  --hairline:rgba(24,24,24,.14);    /* soft INTERIOR dividers only. */
  --edge:rgba(24,24,24,.48);        /* CONTROL BOUNDARIES ONLY. 3.14:1 on canvas. */
  --rule-light:rgba(255,255,255,.22);
  --hairline-light:rgba(255,255,255,.12);
  --edge-light:rgba(255,255,255,.38);   /* 3.57:1 on #101010 */
  --line:rgba(24,24,24,.14);        /* UNCHANGED alias — the blueprint grid is a
                                       texture, not a structural line. */
  --line-light:rgba(255,255,255,.14);

  /* ---------- BORDER WEIGHT — 2.5px is retired from the project ---------- */
  --bw:1px;                         /* was 2.5px. Everything structural. */
  --bw-cta:1.5px;                   /* the ONE heavier edge: secondary .btn + .svc-arrow */
  --hair:1.5px;                     /* the DECORATIVE strokes only (hamburger bars,
                                       .faq-q-ic plus/minus, .check-list tick, and
                                       the .founder/.quote amber margin mark — the
                                       last two were 2px and failed lint #4). */

  /* ---------- RADIUS — carries hierarchy instead of being a constant ---------- */
  --r:2px;                          /* CONTROLS — machined */
  --r-panel:0;                      /* PANELS — poured slab */

  /* ---------- SHADOWS — the neo-brutalist tell, deleted, not softened ----------
     Set to `none`, NOT deleted: any legacy rule that reaches for them gets nothing. */
  --shadow-sm:none;
  --shadow:none;
  --shadow-lg:none;
  --shadow-amber:none;
  --shadow-light:none;
  /* The ONLY elevation on the site, and only for things that genuinely float:
     .subnav, .callfab-menu, .callfab-btn, .to-top, .form-status. */
  --elev:0 1px 2px rgba(24,24,24,.04),0 12px 32px -16px rgba(24,24,24,.10);
  --elev-drawer:0 0 48px rgba(0,0,0,.16);

  /* ---------- GROUND TINTS — what replaces elevation ---------- */
  --tint:var(--whisper);
  --tint-press:#EFE2C0;
  --tint-dark:rgba(255,255,255,.07);
  --tint-dark-press:rgba(255,255,255,.12);

  /* ---------- MOTION — two curves ---------- */
  --ease:cubic-bezier(.16,1,.3,1);       /* persona Confident — scroll entrances,
                                            hero intro, drawer, view transitions */
  --ease-nav:cubic-bezier(.22,1,.36,1);
  --ease-ui:cubic-bezier(.4,0,.2,1);     /* hovers, states, micro only */
  --t-ui:180ms;
  --t-press:90ms;
  --t-reveal:550ms;
  --ease-stab:cubic-bezier(.16,1,.3,1);  /* NEUTRALISED, not deleted — was the only
                                            literally bouncy curve in the file. */

  /* ---------- TYPE — families + ten fluid rungs ---------- */
  --ff-display:'IBM Plex Sans','Manrope',system-ui,'Segoe UI',Roboto,sans-serif;
  --ff-body:'Manrope',system-ui,'Segoe UI',Roboto,sans-serif;
  --ff-mono:'JetBrains Mono',ui-monospace,'SFMono-Regular',Menlo,Consolas,monospace;

  --t-hero:clamp(2.375rem,6.6vw,4.6rem);    /* 38 → 73.6 */
  --t-h1p:clamp(2.25rem,6.2vw,4.2rem);      /* 36 → 67.2 */
  --t-h2:clamp(1.8rem,4.4vw,3rem);          /* 28.8 → 48 */
  --t-h2s:clamp(1.5rem,3.2vw,2rem);         /* 24 → 32 — the missing rung */
  --t-h3:clamp(1.15rem,1.9vw,1.375rem);     /* 18.4 → 22 */
  /* lead was clamp(1.0625rem,1.4vw,1.25rem) → 17px at BOTH 390 and 768, i.e. only
     1.05× body on every phone and 1.015× at 768: the rung collapsed into body.  */
  --t-lead:clamp(1.15rem,1.6vw,1.3rem);     /* 18.4 → 20.8 */
  --t-body:clamp(1rem,.97rem + .16vw,1.0938rem);
  --t-small:.9rem;
  --t-label:.6875rem;                        /* 11px */

  --tr-hero:-.028em;
  --tr-h2:-.022em;
  --tr-h3:-.012em;
  --tr-label:.12em;   /* NOT .14em — Greek caps (Ω Φ Ψ Ξ Μ) are structurally wider */
  --tr-mono:.08em;    /* JetBrains Mono sets wide by default */

  /* ---------- GEOMETRY — unchanged ---------- */
  --pad:clamp(64px,8vw,128px);    /* section rhythm */
  --gut:clamp(20px,5vw,48px);
  --max:1240px;
  --max-wide:1340px;

  --z-head:900; --z-backdrop:999; --z-drawer:1000; --z-fab:1100; --z-veil:2000;
}

/* ============ 2. RESET ============ */
*,*::before,*::after{box-sizing:border-box;margin:0;padding:0}
html{scroll-behavior:smooth;scroll-padding-top:96px;-webkit-text-size-adjust:100%}
body{
  font-family:var(--ff-body);
  background:var(--canvas);
  color:var(--ink);
  overflow-x:hidden;
  -webkit-font-smoothing:antialiased;
}
img,video,picture,svg,iframe{display:block;max-width:100%}
/* media wrappers must fill their fixed-ratio box (αλλιώς ξεμένει λωρίδα φόντου) */
.svc-media picture,.proj-media picture,.cross-thumb picture,.fr-thumb picture,.ba-layer picture{display:block;width:100%;height:100%}
a{color:inherit;text-decoration:none}
button{font-family:inherit;cursor:pointer;color:inherit}
input,textarea,select{font-family:inherit;font-size:16px}
ul,ol{list-style:none}
::selection{background:var(--amber);color:var(--ink)}
/* FOCUS — 3px ink + amber halo. Raw amber is 2.07:1 on canvas and fails
   WCAG 2.4.11 / 1.4.11. Do NOT thin this to 2px. */
:focus-visible{
  outline:3px solid var(--ink);
  outline-offset:2px;
  box-shadow:0 0 0 6px rgba(240,162,0,.40);
}
/* Every ink/dark GROUND must be enumerated here, not only the sections that
   remembered .on-dark. .box--ink and .stats paint --ink inside plain light
   sections (about/contact/faq/services/epoxy) — an ink ring on an ink box is
   1.07:1, i.e. no focus indicator at all. */
.on-dark :focus-visible,.hero :focus-visible,.page-hero :focus-visible,
.why :focus-visible,.about :focus-visible,.cta-band--ink :focus-visible,
.site-foot :focus-visible,.nav-mobile :focus-visible,
.box--ink :focus-visible,.stats :focus-visible{
  outline-color:#fff;box-shadow:0 0 0 6px rgba(240,162,0,.55);
}
/* .why--light flips the ground back to canvas — so the ring flips back to ink. */
.why--light :focus-visible{outline-color:var(--ink);box-shadow:0 0 0 6px rgba(240,162,0,.40)}
.skip-link{position:absolute;left:-9999px;top:0;z-index:3000;background:var(--ink);color:var(--canvas);padding:12px 20px;font-family:var(--ff-display);font-weight:600}
.skip-link:focus{left:8px;top:8px}
.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}

/* ============ 3. TYPE ============ */
/* WEIGHT CEILING = 600. Exactly two exceptions, both hero-scale: .hero h1 /
   .page-hero h1 and the display numerals (.stat-num, .proc-big-num) at 700.
   The ceiling enforces itself at the font-file level: Google Fonts caps IBM Plex
   Sans at wght 700 and we request 500..700.
   THE SCALE IS FLUID AT EVERY RUNG so the ladder survives 390px. */

/* ---------- BASE ---------- */
body{
  font-size:var(--t-body);
  line-height:1.68;                 /* Greek needs more leading than Latin — the
                                       accents live above cap-height */
  font-weight:400;
  letter-spacing:0;                 /* NEVER letterspace lowercase Greek */
  font-variant-numeric:proportional-nums;
}

/* ---------- HEADINGS — sentence case, 600 ceiling, size carries emphasis ---------- */
h1,h2,h3,h4{
  font-family:var(--ff-display);
  font-weight:600;
  line-height:1.14;
  letter-spacing:var(--tr-h3);
  text-transform:none;              /* guard — no heading is ever uppercase */
  text-wrap:balance;
}

/* HERO — the only 700 besides the display numerals. */
.hero h1{
  font-size:var(--t-hero);
  font-weight:700;
  line-height:1.10;
  letter-spacing:var(--tr-hero);
  margin:18px 0 20px;
  max-width:18ch;
}
.page-hero h1{
  font-size:var(--t-h1p);
  font-weight:700;
  line-height:1.10;
  letter-spacing:var(--tr-hero);
  margin:16px 0 0;
  max-width:17ch;
  color:#fff;
}

/* H2 — section heads */
.sec-head h2,.cta-inner h2{
  font-size:var(--t-h2);
  font-weight:600;
  line-height:1.14;
  letter-spacing:var(--tr-h2);
  margin-top:14px;
}
.sec-head p{margin-top:18px;max-width:58ch;color:var(--muted);font-size:var(--t-body);line-height:1.62}

/* H2-small — the rung that stops .why-item h3 and .fr-title going off-scale */
.why-item h3,.fr-title{
  font-family:var(--ff-display);
  font-size:var(--t-h2s);
  font-weight:600;
  line-height:1.18;
  letter-spacing:-.018em;
}
.why-item h3{color:#fff}

/* H3 — card, step, list and prose titles */
h3,.box h3,.svc-body h3,.ps-body h3,.rail-step h3,.proj-body h3,
.cross-card h3,.prose h3{
  font-family:var(--ff-display);
  font-size:var(--t-h3);
  font-weight:600;
  line-height:1.26;
  letter-spacing:var(--tr-h3);
}
.prose h3{font-size:clamp(1.26rem,2.2vw,1.55rem);margin:1.7em 0 .6em}
.prose h3:first-child{margin-top:0}

/* H4 + footer column heads — uppercase micro-label register */
h4,.foot-col h3,.foot-col h4{
  font-family:var(--ff-display);
  font-size:var(--t-label);
  font-weight:600;
  line-height:1.5;
  text-transform:uppercase;
  letter-spacing:var(--tr-label);
}
.foot-col h3,.foot-col h4{color:rgba(255,255,255,.55);margin-bottom:15px}

/* ---------- LEAD + PROSE ---------- */
.lead{
  font-family:var(--ff-body);
  font-size:var(--t-lead);
  font-weight:400;line-height:1.6;letter-spacing:0;max-width:62ch;
}
.prose p{margin-bottom:1.05em;max-width:68ch;color:var(--muted);line-height:1.68}
.prose p:last-child{margin-bottom:0}
.prose strong{font-weight:600;color:var(--ink)}
.on-dark .prose p{color:var(--muted-light)}
.on-dark .prose strong{color:#fff}

/* ---------- EYEBROW — off mono, onto the display sans ---------- */
.eyebrow{
  font-family:var(--ff-display);
  font-weight:600;
  font-size:var(--t-label);
  text-transform:uppercase;         /* lang="el" drops the tonos correctly */
  letter-spacing:var(--tr-label);
  line-height:1.5;
  color:var(--ink);opacity:.66;     /* 4.9:1 on canvas — passes AA at 11px/600 */
  display:inline-flex;align-items:center;gap:.75em;
  font-feature-settings:"case" 1;   /* correct punctuation height in Greek caps */
}
.eyebrow::before{content:"";width:24px;height:1px;background:var(--amber);flex:0 0 auto}
/* Το eyebrow είναι ink by default — σε ΚΑΘΕ σκούρα επιφάνεια γίνεται λευκό,
   ανεξάρτητα από το αν ο συντάκτης θυμήθηκε το .on-dark. */
.on-dark .eyebrow,.eyebrow--light,
.page-hero .eyebrow,.hero .eyebrow,.why .eyebrow,.about .eyebrow,
.cta-band--ink .eyebrow,.box--ink .eyebrow,.site-foot .eyebrow{color:rgba(255,255,255,.86);opacity:1}
.page-hero .mono,.why .mono,.about .mono,.box--ink .mono{color:rgba(255,255,255,.8)}
.page-hero .b-num,.why .b-num,.box--ink .b-num{color:var(--amber)}

/* .amber as a text class — split by ground. Raw #F0A200 on canvas is 2.07:1. */
.amber{color:var(--amber-deep)}
.on-dark .amber,.hero .amber,.page-hero .amber,.why .amber,.about .amber,
.cta-band--ink .amber,.box--ink .amber,.site-foot .amber{color:var(--amber)}

/* ---------- THE 22 LABELS THAT LEAVE MONO ---------- */
.crumbs,.hero-trust,.scroll-cue,.page-key span,.swipe-hint,.faq-group-title,
.field label,.form-status,.ci-k,.cf-k,.nav-mobile .nm-head,.nav-mobile .nm-foot,
.pj-label,.areas span,.lang-btn,.quote cite,.ba-caption,.proc-big-label,
.stat-label,.photo-slot .ps-label,.photo-slot .ps-note,.map-embed .map-fallback{
  font-family:var(--ff-display);
  font-weight:600;
  text-transform:uppercase;
  letter-spacing:var(--tr-label);
}
.crumbs{font-size:var(--t-label)}
.hero-trust{font-size:var(--t-label)}
/* .18em on 9.3px Greek caps was the widest tracking left in the file and 50%
   above the --tr-label value this same sheet justifies at .12em. */
.scroll-cue{font-size:var(--t-label);letter-spacing:var(--tr-label)}
.page-key span{font-size:var(--t-label);letter-spacing:.10em}
.swipe-hint{font-size:.63rem;opacity:.64}   /* .5 = 3.35:1 on canvas at 10px — under AA */
.faq-group-title{font-size:var(--t-label);letter-spacing:.13em;color:var(--amber-deep)}
.field label{display:block;font-size:var(--t-label);letter-spacing:.11em;color:#333;margin-bottom:9px}
.form-status{font-size:.8rem;letter-spacing:.04em;text-transform:none;font-weight:500;line-height:1.5}
.ci-k,.cf-k{font-size:.62rem;letter-spacing:.13em;opacity:.62}
.nav-mobile .nm-head{font-size:.64rem;letter-spacing:var(--tr-label);opacity:.64}
.nav-mobile .nm-foot{font-size:.7rem;letter-spacing:.06em;text-transform:none;font-weight:500;opacity:.65;line-height:1.7}
.pj-label{font-size:var(--t-label);letter-spacing:.13em}
.areas span{font-size:var(--t-label);letter-spacing:.06em;text-transform:none;font-weight:500;color:#4a4a4a}
.lang-btn{font-size:var(--t-label);letter-spacing:.11em}
.quote cite{display:block;margin-top:18px;font-size:var(--t-label);letter-spacing:.12em;font-style:normal;opacity:.66}
.ba-caption{margin-top:14px;font-size:var(--t-label);letter-spacing:.09em;color:#5a5a5a}
.proc-big-label{margin-top:10px;font-size:var(--t-label);letter-spacing:.13em;color:var(--amber-deep)}
.stat-label{margin-top:10px;font-size:var(--t-label);letter-spacing:.11em;color:rgba(255,255,255,.66)}
.photo-slot .ps-label{font-size:var(--t-label);letter-spacing:.12em;line-height:1.7;color:rgba(255,255,255,.82)}
.photo-slot .ps-note{font-size:.6rem;letter-spacing:.11em;color:var(--amber);opacity:.9}
.map-embed .map-fallback{font-size:.72rem;letter-spacing:.10em;color:var(--amber)}
/* .finder-hint is a sentence, not a label — body sans, sentence case */
.finder-hint{font-family:var(--ff-body);font-weight:400;font-size:.9rem;letter-spacing:0;
             text-transform:none;color:#4d4d4d;line-height:1.55}

/* ---------- THE 20 THAT STAY MONO — genuinely machine-readable data ---------- */
.mono,.proj-meta,.spec-table th,.spec-table td,.head-phone,.hero-phone,
.ci-v,.cf-v,.sn-num,.nm-num,.pj-num,.b-num,.why-idx,.fr-kicker,
.svc-index,.proj-tag,.ba-badge,.foot-copy{
  font-family:var(--ff-mono);
  font-weight:500;
  font-variant-numeric:tabular-nums lining-nums;
}
.mono{text-transform:uppercase;letter-spacing:var(--tr-mono);font-size:var(--t-label)}
.proj-meta{font-size:var(--t-label);letter-spacing:var(--tr-mono);text-transform:uppercase;color:#5a5a5a}
.spec-table th{font-size:var(--t-label);letter-spacing:var(--tr-mono);text-transform:uppercase;color:#555}
.spec-table td{font-size:var(--t-small);letter-spacing:0;text-transform:none}
.head-phone,.hero-phone{font-size:.9375rem;letter-spacing:.01em;text-transform:none}
.ci-v,.cf-v{font-size:1rem;letter-spacing:.01em;line-height:1.35}
.sn-num,.nm-num,.pj-num,.b-num,.why-idx,.fr-kicker{
  font-size:var(--t-label);letter-spacing:var(--tr-mono);color:var(--amber-deep);font-weight:500;
}
.why-idx{color:var(--amber)}
.fr-kicker{text-transform:uppercase}
.svc-index,.proj-tag,.ba-badge{font-size:.63rem;letter-spacing:var(--tr-mono);text-transform:uppercase}
.foot-copy{font-size:var(--t-label);letter-spacing:.04em;color:rgba(255,255,255,.45)}
.rail-step::before{font-family:var(--ff-mono);font-weight:500;font-size:.74rem;font-variant-numeric:tabular-nums}
/* every figure that sits in a column or is compared is tabular */
.stat,.spec-table,.finder-result,.proc-step{font-variant-numeric:tabular-nums lining-nums}

/* ---------- DISPLAY NUMERALS — the two places 700 is licensed ---------- */
.stat-num{
  font-family:var(--ff-display);font-weight:700;
  font-size:clamp(2.25rem,5.2vw,3.9rem);
  line-height:1;letter-spacing:-.035em;color:#fff;
  font-variant-numeric:tabular-nums lining-nums;
}
.stat--sig .stat-num{color:var(--amber)}
/* A stat whose value is a WORD, not a numeral («Εκατοντάδες» = 11 unbreakable
   Greek glyphs). At the numeral rung its min-content width (~5.6em) exceeds the
   1fr track and blows the grid out; line-height:1 is also far too tight for a
   Greek word once it wraps. */
.stat-num--word{
  font-size:var(--t-h2s);line-height:1.18;letter-spacing:-.018em;
  overflow-wrap:break-word;
}
.proc-big-num{
  font-family:var(--ff-display);font-weight:700;
  font-size:clamp(4.5rem,9.5vw,8.5rem);line-height:.86;letter-spacing:-.045em;
  font-variant-numeric:tabular-nums lining-nums;
}
.ps-num{
  font-family:var(--ff-display);font-weight:600;
  font-size:clamp(1.75rem,4.2vw,2.7rem);line-height:.95;letter-spacing:-.035em;
  color:rgba(24,24,24,.55);   /* 3.79:1 — clears the large-text floor. .28 was 1.84:1
                                 and these numerals carry the step sequence. */
  font-variant-numeric:tabular-nums lining-nums;
  transition:color var(--t-ui) var(--ease-ui);
}

/* ---------- REMAINING DISPLAY SURFACES (former Exo 2 sites) ---------- */
.nav-desktop a{font-family:var(--ff-display);font-weight:600;font-size:.94rem;letter-spacing:0}
.nav-desktop a[aria-current="page"]{font-weight:700}
.subnav a{font-family:var(--ff-display);font-weight:600;font-size:.94rem;letter-spacing:0}
.nav-mobile a{font-family:var(--ff-display);font-weight:600;font-size:1.06rem;letter-spacing:-.005em}
.nav-mobile .nm-sub a{font-family:var(--ff-display);font-weight:500;font-size:.94rem}
.chip,.filter,.tag{font-family:var(--ff-display);font-weight:600;font-size:.92rem;letter-spacing:0}
.faq-list summary{font-family:var(--ff-display);font-weight:600;
                  font-size:clamp(1rem,1.8vw,1.16rem);letter-spacing:-.008em}
.founder .fn-name{font-family:var(--ff-display);font-weight:600;font-size:1.08rem;color:var(--amber)}
.on-light .founder .fn-name{color:var(--amber-deep)}
.quote p{font-family:var(--ff-display);font-weight:500;
         font-size:clamp(1.16rem,2.4vw,1.6rem);line-height:1.42;letter-spacing:-.012em;text-wrap:balance}
.quote::before{display:none}   /* the 9rem „ at 32% amber was pure decoration and the
                                  loudest single ornament on the page. */
.skip-link{font-family:var(--ff-display);font-weight:600}
.watermark{font-family:var(--ff-display);font-weight:700;letter-spacing:-.05em}
.gdpr,.foot-legal a{font-family:var(--ff-body);font-weight:400;font-size:.8rem;line-height:1.55;letter-spacing:0}
.foot-col a,.foot-col p,.foot-tag{font-family:var(--ff-body);font-weight:400;font-size:.93rem;line-height:1.6}

/* ============ 4. LAYOUT ============ */
.wrap{max-width:var(--max);margin:0 auto;padding-inline:var(--gut);width:100%}
.wrap--wide{max-width:var(--max-wide)}
section{position:relative}
.sec{padding-block:var(--pad)}
.sec--tight{padding-block:calc(var(--pad) * .62)}
.sec-head{max-width:780px;margin-bottom:clamp(34px,5vw,60px)}
.sec-head--center{margin-inline:auto;text-align:center}
.sec-head--center .eyebrow{justify-content:center}
.sec-head--center p{margin-inline:auto}
.on-dark{color:var(--canvas)}
.on-dark .sec-head h2,.on-dark h2,.on-dark h3{color:#fff}
.on-dark .sec-head p{color:var(--muted-light)}
.split{display:grid;gap:clamp(28px,4vw,56px)}
.rule{height:1px;background:var(--rule);border:0;margin-block:clamp(28px,4vw,48px)}
.on-dark .rule{background:var(--rule-light)}

/* ============ 5. SURFACE DECOR ============ */
.grain{
  position:absolute;inset:0;z-index:2;pointer-events:none;opacity:.024;
  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='0.82' numOctaves='3' stitchTiles='stitch'/%3E%3C/filter%3E%3Crect width='100%25' height='100%25' filter='url(%23n)'/%3E%3C/svg%3E");
  mix-blend-mode:overlay;
}
.watermark{
  position:absolute;font-family:var(--ff-display);font-weight:700;
  font-size:clamp(18rem,44vw,40rem);line-height:.78;letter-spacing:-.05em;
  color:currentColor;opacity:.03;pointer-events:none;user-select:none;z-index:0;white-space:nowrap;
}
/* blueprint grid — the «σωστή βάση» motif. PROMOTED: with the card borders gone
   this becomes the site's construction-native texture and must hold presence. */
.gridlines{
  position:absolute;inset:0;z-index:0;pointer-events:none;opacity:.68;
  background-image:linear-gradient(var(--line) 1px,transparent 1px),linear-gradient(90deg,var(--line) 1px,transparent 1px);
  background-size:64px 64px;
  -webkit-mask-image:radial-gradient(120% 90% at 50% 0%,#000 0%,transparent 72%);
          mask-image:radial-gradient(120% 90% at 50% 0%,#000 0%,transparent 72%);
}
.on-dark .gridlines{background-image:linear-gradient(rgba(255,255,255,.09) 1px,transparent 1px),linear-gradient(90deg,rgba(255,255,255,.09) 1px,transparent 1px)}
/* amber light shaft — echoes the hero video lighting */
.shaft{
  position:absolute;inset:0;z-index:0;pointer-events:none;
  background:radial-gradient(60% 80% at 78% 6%,rgba(240,162,0,.24),transparent 62%);
}
/* photo used as ambience behind a dark section */
.bg-photo{position:absolute;inset:0;z-index:0;width:100%;height:100%;object-fit:cover;opacity:.2;filter:grayscale(.35) contrast(1.05)}
.bg-scrim{position:absolute;inset:0;z-index:1;background:linear-gradient(115deg,rgba(16,16,16,.94) 0%,rgba(16,16,16,.66) 55%,rgba(16,16,16,.86) 100%)}
.layer{position:relative;z-index:4}

/* ============ 6. BUTTONS ============ */
/* Three explicit tiers. The hard-offset shadow is gone from every one of them,
   at rest, on hover AND on active. Nothing translates on hover.
   Affordance is carried by: a machined slab, a REAL value step on hover (full
   whisper), a 3.14:1 boundary, an immediate 180ms response, and a genuine 1px
   press on :active with an inset top edge.
   GREEK CASE: button labels stay SENTENCE CASE — Greek uppercase runs 12-18%
   wider and the header squeeze rule (769-1020px) is already one word from wrapping. */

/* ---------- BASE / TIER 2 · SECONDARY — transparent + the one 1.5px edge ---------- */
.btn{
  display:inline-flex;align-items:center;justify-content:center;gap:.6em;
  font-family:var(--ff-display);
  font-weight:600;font-size:.975rem;line-height:1.2;letter-spacing:0;
  padding:0 26px;min-height:50px;
  border-radius:var(--r);                    /* 2px — machined */
  border:var(--bw-cta) solid var(--edge);    /* 3.14:1 → clears WCAG 1.4.11 */
  background:transparent;color:var(--ink);
  box-shadow:none;                           /* never, in any state */
  text-align:center;text-decoration:none;white-space:nowrap;
  transition:background var(--t-ui) var(--ease-ui),
             border-color var(--t-ui) var(--ease-ui),
             color var(--t-ui) var(--ease-ui),
             transform var(--t-press) linear;
}
.btn svg{width:17px;height:17px;flex:0 0 auto;transition:transform var(--t-ui) var(--ease-ui)}
.btn:hover{background:var(--tint);border-color:var(--ink);box-shadow:none;transform:none}
.btn:hover svg{transform:translateX(3px)}
.btn:active{
  transform:translateY(1px);
  background:var(--tint-press);
  box-shadow:inset 0 1px 0 rgba(24,24,24,.20);
}
/* Focus is inherited from the global :focus-visible (3px ink + amber halo). */

/* MAGNETIC CURSOR-FOLLOW (site.js §13) composes through the `translate` property,
   NOT through `transform`. Written as a transform it produced an INLINE style,
   which beats every stylesheet declaration without !important — so :hover's
   transform:none and, worse, the new :active 1px press never rendered on the
   primary quote CTAs. translate and transform are independent properties, so the
   press now composes on top of the follow. Untransitioned on purpose: --t-press
   damping made the follow lag the pointer. */
.magnetic{translate:var(--mx,0) var(--my,0)}

/* ---------- TIER 1 · PRIMARY — amber fill, no ink border, no shadow ---------- */
.btn--amber{
  background:var(--amber);
  border:1px solid var(--amber-edge);
  color:var(--ink);
  padding:0 27px;                             /* +1px compensates the thinner border */
}
.btn--amber:hover{background:var(--amber-hover);border-color:var(--amber-edge);box-shadow:none;transform:none}
.btn--amber:active{background:var(--amber-edge);transform:translateY(1px);
                   box-shadow:inset 0 1px 0 rgba(24,24,24,.22)}
/* ink on amber 8.35:1 · ink on amber-hover 9.4:1 — AAA */

/* ---------- TIER 1b · SOLID DARK — for light sections beside the amber ---------- */
.btn--ink{
  background:var(--ink);color:var(--canvas);
  border:1px solid var(--ink);
  padding:0 27px;
  box-shadow:none;                            /* was 4px 4px 0 var(--amber) */
}
.btn--ink:hover{background:#2a2a2a;border-color:#2a2a2a;box-shadow:none;transform:none}
.btn--ink:active{background:#0d0d0d;transform:translateY(1px);
                 box-shadow:inset 0 1px 0 rgba(0,0,0,.45)}

/* ---------- SECONDARY ON DARK ----------
   THIS BLOCK OWNS ONLY THE SECONDARY TIER. Every selector here is a two-class
   descendant (0,2,0) and would otherwise outrank the single-class filled tiers
   declared above it — stripping .btn--amber of its fill, its ink label and its
   amber edge on every dark ground, so the primary CTA rendered as a transparent
   ghost identical to the phone links beside it. The :not() chain keeps the block
   honest about what it owns; do not remove it and do not add a filled tier here. */
.on-dark .btn:not(.btn--amber):not(.btn--ink):not(.btn--onvideo),
.page-hero .btn:not(.btn--amber):not(.btn--ink):not(.btn--onvideo),
.why .btn:not(.btn--amber):not(.btn--ink):not(.btn--onvideo),
.about .btn:not(.btn--amber):not(.btn--ink):not(.btn--onvideo),
.cta-band--ink .btn:not(.btn--amber):not(.btn--ink):not(.btn--onvideo),
.site-foot .btn:not(.btn--amber):not(.btn--ink):not(.btn--onvideo){
  border-color:var(--edge-light);color:#fff;background:transparent;
}
.on-dark .btn:not(.btn--amber):not(.btn--ink):not(.btn--onvideo):hover,
.page-hero .btn:not(.btn--amber):not(.btn--ink):not(.btn--onvideo):hover,
.why .btn:not(.btn--amber):not(.btn--ink):not(.btn--onvideo):hover,
.about .btn:not(.btn--amber):not(.btn--ink):not(.btn--onvideo):hover,
.cta-band--ink .btn:not(.btn--amber):not(.btn--ink):not(.btn--onvideo):hover,
.site-foot .btn:not(.btn--amber):not(.btn--ink):not(.btn--onvideo):hover{
  border-color:#fff;background:var(--tint-dark);
}
.on-dark .btn:not(.btn--amber):not(.btn--ink):not(.btn--onvideo):active,
.page-hero .btn:not(.btn--amber):not(.btn--ink):not(.btn--onvideo):active{
  background:var(--tint-dark-press);box-shadow:inset 0 1px 0 rgba(255,255,255,.18);
}

/* ---------- SECONDARY ON THE AMBER BAND ----------
   The full-bleed .cta-band is the one light-but-not-canvas ground in the system
   and no tier was tuned for it: --edge over #F0A200 composites to 2.65:1, under
   the 3:1 floor the token exists to guarantee, and the hover filled whisper cream
   on amber. Same 1.5px weight, no shadow, just a darker tone of the same ink. */
.cta-band:not(.cta-band--ink) .btn:not(.btn--amber):not(.btn--ink){
  border-color:rgba(24,24,24,.62);color:var(--ink);   /* 3.70:1 on amber */
}
.cta-band:not(.cta-band--ink) .btn:not(.btn--amber):not(.btn--ink):hover{
  background:rgba(24,24,24,.08);border-color:var(--ink);
}
.cta-band:not(.cta-band--ink) .btn:not(.btn--amber):not(.btn--ink):active{
  background:rgba(24,24,24,.14);box-shadow:inset 0 1px 0 rgba(24,24,24,.22);
}

/* ---------- TIER 3 · TERTIARY — no box at all: label + 1px rule + arrow ---------- */
.btn--ghost{
  background:transparent;
  border:0;border-bottom:1px solid var(--edge);
  border-radius:0;
  padding:0 2px 4px;min-height:44px;
  display:inline-flex;align-items:center;
  color:var(--ink);box-shadow:none;
  transition:border-color var(--t-ui) var(--ease-ui),color var(--t-ui) var(--ease-ui);
}
.btn--ghost:not(:has(svg))::after{
  content:"→";margin-left:.55em;display:inline-block;
  transition:transform var(--t-ui) var(--ease-ui);
}
.btn--ghost:hover{background:transparent;box-shadow:none;transform:none;border-bottom-color:var(--ink)}
.btn--ghost:hover::after{transform:translateX(4px)}
.btn--ghost:active{transform:none;box-shadow:none;opacity:.72}
.on-dark .btn--ghost,.page-hero .btn--ghost,.why .btn--ghost,.site-foot .btn--ghost{
  color:#fff;border-bottom-color:var(--edge-light);
}
.on-dark .btn--ghost:hover,.page-hero .btn--ghost:hover{border-bottom-color:#fff;background:transparent}

/* ---------- ON VIDEO — needs a perceivable edge against moving footage ---------- */
.btn--onvideo{
  color:#fff;
  border:1px solid rgba(255,255,255,.55);
  border-radius:var(--r);
  padding:0 26px;min-height:50px;
  background:rgba(16,16,16,.32);
  box-shadow:none;
  backdrop-filter:blur(6px);-webkit-backdrop-filter:blur(6px);
}
.btn--onvideo:hover{background:rgba(16,16,16,.58);border-color:#fff;box-shadow:none;transform:none}
.btn--onvideo:hover::after{transform:translateX(4px)}
.btn--onvideo:active{transform:translateY(1px);box-shadow:inset 0 1px 0 rgba(0,0,0,.35)}

/* ---------- SIZE MODIFIERS ---------- */
.btn--lg{padding:0 32px;min-height:56px;font-size:1.02rem}
.btn--amber.btn--lg,.btn--ink.btn--lg{padding:0 33px}
.btn--ghost.btn--lg{padding:0 2px 5px;min-height:48px;font-size:1.02rem}
.btn--block{width:100%}
.head-cta{min-height:44px;padding:0 20px;font-size:.9rem}
/* DECISION (recorded, because an earlier comment here claimed the opposite):
   .head-cta ships as `btn btn--amber head-cta` in all 12 pages and STAYS amber.
   It is the single desktop conversion control on a lead-gen site; demoting it to
   the secondary tier would have been a business change, not a de-brutalising one.
   The site therefore carries TWO permanent amber objects — this and the call FAB
   (three on mobile, with .mob-phone) — and that is deliberate. Amber scarcity is
   enforced everywhere it costs nothing instead: no amber chip behind .arrow-link,
   .filter.active inks rather than ambers, .page-jump chips never fill. */

/* ---------- TERTIARY TEXT LINK — the amber sticker chip becomes a bare arrow ---------- */
.arrow-link{
  display:inline-flex;align-items:center;gap:10px;min-height:44px;
  font-family:var(--ff-display);font-weight:600;font-size:.94rem;letter-spacing:0;
  border-bottom:1px solid var(--edge);padding-bottom:3px;align-self:flex-start;
  transition:border-color var(--t-ui) var(--ease-ui),color var(--t-ui) var(--ease-ui);
}
.arrow-link .arw{
  display:inline-flex;width:auto;height:auto;
  background:none;border:0;border-radius:0;color:var(--amber-deep);
  align-items:center;justify-content:center;flex:0 0 auto;
  transition:transform var(--t-ui) var(--ease-ui);
}
.arrow-link:hover{border-bottom-color:var(--ink)}
.arrow-link:hover .arw{transform:translateX(4px)}
.arrow-link svg{width:14px;height:14px}
/* .why sections are written `class="why sec"` with no .on-dark, and .box--ink is
   an ink box inside a light section — on both, --edge (rgba ink .48) is ~1.05:1
   and the underline plus its hover response were invisible. */
.on-dark .arrow-link,.why .arrow-link,.box--ink .arrow-link,.page-hero .arrow-link{
  border-bottom-color:var(--edge-light);color:#fff;
}
.on-dark .arrow-link:hover,.why .arrow-link:hover,
.box--ink .arrow-link:hover,.page-hero .arrow-link:hover{border-bottom-color:#fff}
.on-dark .arrow-link .arw,.why .arrow-link .arw,
.box--ink .arrow-link .arw,.page-hero .arrow-link .arw{color:var(--amber)}
/* .why--light puts the list back on canvas — so the link goes back to ink. */
.why--light .arrow-link{border-bottom-color:var(--edge);color:var(--ink)}
.why--light .arrow-link:hover{border-bottom-color:var(--ink)}
.why--light .arrow-link .arw{color:var(--amber-deep)}

/* ============ 7. HEADER ============ */
.site-head{
  position:sticky;top:0;z-index:var(--z-head);
  background:rgba(250,250,248,.9);backdrop-filter:blur(14px);-webkit-backdrop-filter:blur(14px);
  border-bottom:1px solid var(--line);
  transition:box-shadow .3s var(--ease),border-color .3s var(--ease);
}
/* border-color alone. The old rule ALSO stacked `box-shadow:0 1px 0 var(--rule)`
   in the same colour directly under it — a 2px scrolled edge in a 1px system. */
.site-head.scrolled{border-bottom-color:var(--rule)}
.head-inner{
  max-width:var(--max-wide);margin:0 auto;padding:10px var(--gut);
  display:flex;align-items:center;gap:16px;min-height:68px;position:relative;
}
.brand{display:inline-flex;align-items:center;flex:0 0 auto;z-index:2}
.brand-img{height:42px;width:auto}
.brand:hover .brand-img{transform:none}
.head-spacer{flex:1 1 auto}
.head-tools{display:flex;align-items:center;gap:12px;flex:0 0 auto;z-index:2}

/* desktop nav */
.nav-desktop{display:none;align-items:center;gap:26px}
.nav-desktop>li{position:relative;display:flex;align-items:center;gap:5px}
.nav-desktop a{
  white-space:nowrap;
  position:relative;padding:8px 0;display:inline-flex;align-items:center;gap:6px;
  transition:color var(--t-ui) var(--ease-ui);
}
.nav-desktop a::after{content:"";position:absolute;left:0;bottom:2px;height:1px;width:0;background:var(--amber);transition:width .3s var(--ease)}
.nav-desktop a:hover::after,.nav-desktop a[aria-current="page"]::after,.nav-desktop li.is-active>a::after{width:100%}
.nav-desktop a[aria-current="page"]{color:var(--ink)}
.nav-desktop .caret{width:11px;height:11px;transition:transform .3s var(--ease)}
.nav-desktop li:hover .caret,.nav-desktop li:focus-within .caret{transform:rotate(180deg)}
/* dropdown — one of the five elements licensed to use --elev */
.subnav{
  position:absolute;top:calc(100% + 14px);left:-18px;min-width:280px;
  background:var(--canvas);border:1px solid var(--rule);border-radius:var(--r-panel);box-shadow:var(--elev);
  padding:10px;display:flex;flex-direction:column;gap:2px;
  opacity:0;visibility:hidden;transform:translateY(-8px);
  transition:opacity .26s var(--ease),transform .26s var(--ease),visibility 0s linear .26s;
}
.nav-desktop li:hover .subnav,.nav-desktop li:focus-within .subnav{opacity:1;visibility:visible;transform:none;transition:opacity .26s var(--ease),transform .26s var(--ease)}
.subnav::before{content:"";position:absolute;top:-14px;left:0;right:0;height:14px}
.subnav a{padding:11px 14px;border-radius:var(--r);font-size:.94rem;font-family:var(--ff-display);font-weight:600;transition:background var(--t-ui) var(--ease-ui),padding-left var(--t-ui) var(--ease-ui)}
.subnav a::after{display:none}
.subnav a:hover,.subnav a[aria-current="page"]{background:var(--whisper);padding-left:19px}
.subnav .sn-num{margin-right:8px}

/* lang + phone + cta */
/* overflow:hidden CLIPPED the keyboard focus ring off the GR/EN buttons on all
   four sides (outline paints 2-5px outside the box). The radius moves to the
   children instead so nothing has to be clipped. */
.lang-switch{display:flex;border:1px solid var(--edge);border-radius:var(--r);flex:0 0 auto}
.lang-btn{background:var(--canvas);border:0;padding:0 12px;min-height:44px;
          display:inline-flex;align-items:center;justify-content:center;
          transition:background var(--t-ui) var(--ease-ui),color var(--t-ui) var(--ease-ui)}
.lang-btn:first-child{border-radius:var(--r) 0 0 var(--r)}
.lang-btn:last-child{border-radius:0 var(--r) var(--r) 0}
.lang-btn.active{background:var(--ink);color:var(--canvas)}
/* the active button's own ground is --ink: an ink ring on it would be 1.07:1 */
.lang-btn.active:focus-visible{outline-color:#fff}
.head-phone{
  display:none;align-items:center;gap:7px;white-space:nowrap;
}
.head-phone svg{width:16px;height:16px;color:var(--amber)}
.head-cta{display:none}
.mob-phone{
  display:inline-flex;align-items:center;justify-content:center;width:46px;height:46px;
  border:1px solid var(--amber-edge);border-radius:var(--r);box-shadow:none;background:var(--amber);
  transition:background var(--t-ui) var(--ease-ui),transform var(--t-press) linear;
}
.mob-phone:active{transform:translateY(1px);background:var(--amber-edge);box-shadow:inset 0 1px 0 rgba(24,24,24,.22)}
.mob-phone:hover{transform:none}
.mob-phone svg{width:21px;height:21px}

/* LOCKED: hamburger + left drawer */
.menu-toggle{display:flex;flex-direction:column;justify-content:center;gap:5px;background:none;border:0;padding:8px;width:46px;height:46px;flex:0 0 auto;z-index:2}
.menu-toggle span{width:24px;height:var(--hair);background:var(--ink);transition:transform .25s var(--ease),opacity .25s}
.menu-toggle[aria-expanded="true"] span:nth-child(1){transform:translateY(7.5px) rotate(45deg)}
.menu-toggle[aria-expanded="true"] span:nth-child(2){opacity:0}
.menu-toggle[aria-expanded="true"] span:nth-child(3){transform:translateY(-7.5px) rotate(-45deg)}
.nav-mobile{
  position:fixed;top:0;left:0;bottom:0;z-index:var(--z-drawer);width:clamp(268px,66vw,350px);
  transform:translateX(-105%);visibility:hidden;display:flex;flex-direction:column;
  padding:calc(20px + env(safe-area-inset-top)) 22px calc(22px + env(safe-area-inset-bottom));
  background:var(--canvas);border-right:1px solid var(--rule);box-shadow:var(--elev-drawer);
  overflow-y:auto;overscroll-behavior:contain;
  transition:transform .34s var(--ease-nav),visibility 0s linear .34s;
}
.nav-mobile.open{transform:none;visibility:visible;transition:transform .34s var(--ease-nav)}
.nav-backdrop{position:fixed;inset:0;z-index:var(--z-backdrop);background:rgba(10,10,10,.5);backdrop-filter:blur(2px);opacity:0;pointer-events:none;transition:opacity .3s}
.nav-backdrop.show{opacity:1;pointer-events:auto}
body.nav-open{overflow:hidden}
.nav-mobile .nm-logo{height:34px;width:auto;margin-bottom:20px}
.nav-mobile .nm-head{margin:16px 0 8px}
.nav-mobile .nm-head:first-of-type{margin-top:0}
.nav-mobile a{
  min-height:48px;
  display:flex;align-items:center;gap:10px;padding:6px 6px;border-bottom:1px solid var(--line);
  transition:color var(--t-ui) var(--ease-ui),padding-left var(--t-ui) var(--ease-ui);
}
/* The drawer's ground is --canvas, so raw --amber here was 2.04:1 at 17px/600 —
   and this is the current-page indicator, i.e. it renders on every phone visit.
   --amber-deep is the sheet's sanctioned amber-as-small-text-on-light token
   (4.70:1); the raw hue survives as a 2px inset mark, the same device .box--ink
   and faq[open] already use. */
.nav-mobile a:hover,.nav-mobile a[aria-current="page"]{
  color:var(--amber-deep);padding-left:12px;box-shadow:inset 2px 0 0 var(--amber);
}
.nav-mobile a .nm-num{font-size:var(--t-label)}
.nav-mobile .nm-sub a{padding-left:14px;min-height:44px}
.nav-mobile .nm-sub a:hover{padding-left:20px}
.nav-mobile .nm-cta{margin-top:22px;border:var(--bw) solid var(--edge);justify-content:center}
/* no padding-left step here: .nm-cta is justify-content:center, so the old 26px
   shoved the centred label ~10px right on hover. */
.nav-mobile .nm-cta:hover{color:var(--ink);box-shadow:none;padding-left:6px}
.nav-mobile .lang-switch{align-self:flex-start;margin-bottom:4px}
.nav-mobile .lang-btn{padding:9px 14px}
.nav-mobile .nm-foot{margin-top:auto;padding-top:22px}
.nav-mobile .nm-foot a{border:0;font-family:inherit;font-size:inherit;font-weight:500;min-height:auto;padding:0;display:inline}

/* ============ 8. FLOATS: call FAB + back to top ============ */
/* pointer-events:none στο container — αλλιώς το (κλειστό) menu box τρώει taps
   σε ~272×160px κάτω δεξιά σε ΚΑΘΕ σελίδα. Τα παιδιά τα ξαναενεργοποιούν. */
.callfab{position:fixed;right:16px;bottom:calc(16px + env(safe-area-inset-bottom));z-index:var(--z-fab);display:flex;flex-direction:column;align-items:flex-end;gap:10px;pointer-events:none}
.callfab-btn,.callfab.open .callfab-menu{pointer-events:auto}
/* όσο είναι ανοιχτό το drawer, τα floats φεύγουν από τη μέση (MOBILE-STANDARD §4.2) */
body.nav-open .callfab,body.nav-open .to-top{opacity:0;visibility:hidden;pointer-events:none;transition:opacity .2s var(--ease),visibility 0s linear .2s}
.callfab-menu{
  display:flex;flex-direction:column;gap:8px;
  background:var(--canvas);border:1px solid var(--rule);border-radius:var(--r-panel);box-shadow:var(--elev);
  padding:10px;min-width:250px;transform-origin:bottom right;
  opacity:0;visibility:hidden;transform:translateY(10px) scale(.94);
  transition:opacity .26s var(--ease),transform .26s var(--ease),visibility 0s linear .26s;
}
.callfab.open .callfab-menu{opacity:1;visibility:visible;transform:none;transition:opacity .26s var(--ease),transform .26s var(--ease)}
.callfab-menu a{display:flex;align-items:center;gap:11px;padding:11px 12px;border-radius:var(--r);min-height:48px;transition:background var(--t-ui) var(--ease-ui)}
.callfab-menu a:hover{background:var(--whisper)}
.callfab-menu .cf-ic{width:34px;height:34px;flex:0 0 auto;background:transparent;border:1px solid var(--edge);border-radius:var(--r);color:var(--amber-deep);display:flex;align-items:center;justify-content:center}
.callfab-menu .cf-ic svg{width:17px;height:17px}
.callfab-menu .cf-k{display:block;line-height:1.6}
.callfab-btn{
  width:58px;height:58px;border-radius:var(--r);background:var(--amber);border:1px solid var(--amber-edge);
  box-shadow:var(--elev);display:flex;align-items:center;justify-content:center;
  transition:background var(--t-ui) var(--ease-ui),transform var(--t-press) linear;
}
.callfab-btn:hover{transform:none;background:var(--amber-hover);box-shadow:var(--elev)}
.callfab-btn:active{transform:translateY(1px);background:var(--amber-edge)}
.callfab-btn svg{width:28px;height:28px;color:var(--ink);transition:transform .3s var(--ease)}
.callfab.open .callfab-btn svg{transform:rotate(135deg)}
.callfab.open .callfab-btn .ic-phone{display:none}
.callfab-btn .ic-close{display:none}
.callfab.open .callfab-btn .ic-close{display:block;transform:none}
/* radius = button radius + inset, so ring and button corners stay parallel */
.callfab-ring{position:absolute;inset:-6px;border:1px solid var(--amber);border-radius:calc(var(--r) + 6px);opacity:0;pointer-events:none}
.callfab-btn{position:relative}
@keyframes fabRing{0%{opacity:.75;transform:scale(.86)}100%{opacity:0;transform:scale(1.22)}}
.callfab:not(.open) .callfab-ring{animation:fabRing 2.4s var(--ease) infinite}
.to-top{
  position:fixed;left:16px;bottom:calc(16px + env(safe-area-inset-bottom));z-index:calc(var(--z-fab) - 10);
  width:44px;height:44px;border-radius:var(--r);background:var(--canvas);border:1px solid var(--edge);
  box-shadow:var(--elev);display:flex;align-items:center;justify-content:center;
  opacity:0;visibility:hidden;transform:translateY(12px);
  transition:opacity .35s var(--ease),transform .35s var(--ease),visibility .35s,background var(--t-ui) var(--ease-ui);
}
.to-top.show{opacity:1;visibility:visible;transform:none}
.to-top:hover{background:var(--tint);transform:none}
.to-top svg{width:20px;height:20px}

/* ============ 9. INTRO VEIL (home only) ============ */
/* Το intro είναι 100% CSS-driven: αν το JS δεν φορτώσει, η σελίδα εμφανίζεται
   κανονικά και ΔΕΝ μένει κλειδωμένη. Το JS κάνει μόνο (α) scroll lock κατά τη
   διάρκεια, (β) skip σε επαναλαμβανόμενη επίσκεψη. */
#veil{
  position:fixed;inset:0;z-index:var(--z-veil);background:var(--dark);
  display:flex;align-items:center;justify-content:center;
  animation:veilOut .5s var(--ease) .5s forwards;
}
#veil.gone{opacity:0;visibility:hidden;pointer-events:none;animation:none}
@keyframes veilOut{to{opacity:0;visibility:hidden;pointer-events:none}}
.veil-bar{width:min(180px,44vw);height:3px;background:rgba(255,255,255,.16);overflow:hidden;border-radius:var(--r)}
.veil-bar::after{content:"";display:block;height:100%;width:0;background:var(--amber);animation:veilFill .62s var(--ease) forwards}
@keyframes veilFill{to{width:100%}}
html.intro-lock,html.intro-lock body{overflow:hidden}

/* ============ 10. HOME HERO ============ */
.hero{
  position:relative;min-height:100svh;display:flex;align-items:center;justify-content:center;
  overflow:hidden;background:var(--dark);color:#fff;text-align:center;
}
/* Φωτεινό industrial background από πραγματικές φωτογραφίες έργων.
   Crossfade + πολύ αργό Ken-Burns· το πρώτο slide είναι ήδη ορατό χωρίς JS. */
.hero-slides{position:absolute;inset:0;z-index:0;background:var(--dark)}
.hero-slide{position:absolute;inset:0;opacity:0;transition:opacity 1.4s var(--ease)}
.hero-slide.is-on{opacity:1}
.hero-slide img{width:100%;height:100%;object-fit:cover;transform:scale(1.06)}
.hero-slide.is-on img{animation:heroPan 16s linear forwards}
@keyframes heroPan{from{transform:scale(1.03)}to{transform:scale(1.11)}}
.hero-video{position:absolute;inset:0;width:100%;height:100%;object-fit:cover;z-index:0;background:var(--dark)}
.hero-overlay{
  position:absolute;inset:0;z-index:1;
  background:linear-gradient(180deg,rgba(16,16,16,.66) 0%,rgba(16,16,16,.42) 30%,rgba(16,16,16,.5) 62%,rgba(16,16,16,.9) 100%);
}
.hero-overlay::after{content:"";position:absolute;inset:0;background:radial-gradient(80% 62% at 50% 46%,rgba(16,16,16,.5),transparent 72%)}
.hero .grain{z-index:3;opacity:.05}
.hero-inner{
  position:relative;z-index:4;width:100%;max-width:1000px;margin:0 auto;
  padding:calc(96px + env(safe-area-inset-top)) var(--gut) clamp(96px,15vh,140px);
  display:flex;flex-direction:column;align-items:center;
}
.hero-logo{width:clamp(230px,34vw,420px);height:auto;margin-bottom:clamp(22px,3.4vw,34px)}
.hero-eyebrow{color:rgba(255,255,255,.82);justify-content:center}
/* .hero h1 sizing lives in §3 TYPE — the fluid scale owns every rung. */
.hero h1 .line{display:block;overflow:hidden;padding-block:.08em}
.hero h1 .line>span{display:inline-block}
.hero-sub{max-width:56ch;font-size:clamp(1rem,1.25vw,1.16rem);color:rgba(255,255,255,.9)}
.hero-actions{display:flex;flex-wrap:wrap;gap:13px;align-items:center;justify-content:center;margin-top:clamp(26px,3.4vw,38px)}
.hero-phones{display:inline-flex;flex-wrap:wrap;gap:13px;align-items:center;justify-content:center}
.hero-phone{
  display:inline-flex;align-items:center;gap:9px;min-height:50px;padding:0 20px;
  border:1px solid var(--edge-light);border-radius:var(--r);
  color:#fff;
  transition:border-color var(--t-ui) var(--ease-ui),background var(--t-ui) var(--ease-ui);
}
.hero-phone:hover{border-color:var(--amber);background:rgba(240,162,0,.12)}
.hero-phone svg{width:17px;height:17px;color:var(--amber)}
.hero-trust{
  display:flex;flex-wrap:wrap;gap:8px 22px;justify-content:center;margin-top:clamp(24px,3vw,34px);
  color:rgba(255,255,255,.62);
}
.hero-trust span{display:inline-flex;align-items:center;gap:8px}
.hero-trust span::before{content:"";width:7px;height:7px;background:var(--amber);flex:0 0 auto}
.scroll-cue{
  position:absolute;left:50%;bottom:calc(18px + env(safe-area-inset-bottom));transform:translateX(-50%);z-index:4;
  display:flex;flex-direction:column;align-items:center;gap:7px;
  color:rgba(255,255,255,.66);
}
.scroll-cue .dot{width:5px;height:5px;border-radius:50%;background:var(--amber);animation:cue 1.7s var(--ease) infinite}
@keyframes cue{0%{transform:translateY(0);opacity:1}70%{transform:translateY(16px);opacity:0}100%{opacity:0}}

/* --- intro choreography: logo → title → CTA → page --- */
body.intro .hero-logo,
body.intro .hero-eyebrow,
body.intro .hero h1 .line>span,
body.intro .hero-sub,
body.intro .hero-actions>*,
body.intro .hero-trust,
body.intro .scroll-cue{opacity:0}
body.intro .hero-logo{transform:scale(.9)}
body.intro .hero h1 .line>span{transform:translateY(112%)}
body.intro .hero-sub,body.intro .hero-eyebrow,body.intro .hero-trust{transform:translateY(18px)}
body.intro .hero-actions>*{transform:translateY(14px)}

/* 1. λογότυπο → 2. τίτλος → 3. τα CTA → 4. beat πάνω στο βίντεο → σελίδα */
body.intro .hero-logo{animation:heroLogo .72s var(--ease) .85s forwards}
body.intro .hero-eyebrow{animation:fadeUp .6s var(--ease) 1.35s forwards}
body.intro .hero h1 .line:nth-child(1)>span{animation:lineUp .8s var(--ease) 1.5s forwards}
body.intro .hero h1 .line:nth-child(2)>span{animation:lineUp .8s var(--ease) 1.62s forwards}
body.intro .hero-sub{animation:fadeUp .66s var(--ease) 2s forwards}
body.intro .hero-actions>*:nth-child(1){animation:fadeUp .5s var(--ease) 2.25s forwards}
body.intro .hero-actions>*:nth-child(2){animation:fadeUp .5s var(--ease) 2.35s forwards}
body.intro .hero-actions>*:nth-child(3){animation:fadeUp .5s var(--ease) 2.45s forwards}
body.intro .hero-trust{animation:fadeUp .6s var(--ease) 2.72s forwards}
body.intro .scroll-cue{animation:fadeUp .6s var(--ease) 3.05s forwards}
@keyframes heroLogo{to{opacity:1;transform:none}}
@keyframes fadeUp{to{opacity:1;transform:none}}
@keyframes lineUp{to{opacity:1;transform:none}}

/* ============ 11. PAGE HERO (interior pages) ============ */
.page-hero{
  position:relative;overflow:hidden;background:var(--dark);color:#fff;
  padding-block:clamp(52px,8vw,96px) clamp(48px,7vw,86px);
  border-bottom:1px solid var(--rule-light);
}
.page-hero .bg-photo{opacity:.26}
.page-hero-inner{position:relative;z-index:4;max-width:var(--max);margin:0 auto;padding-inline:var(--gut)}
/* .page-hero h1 sizing lives in §3 TYPE. */
.page-hero .lead{margin-top:20px;color:rgba(255,255,255,.86)}
.page-hero .hero-actions{justify-content:flex-start;margin-top:clamp(24px,3vw,34px)}
.page-hero .watermark{color:#fff;opacity:.045;right:-3%;top:-18%}
.page-hero--compact{padding-block:clamp(40px,6vw,72px) clamp(36px,5vw,64px)}
.crumbs{display:flex;flex-wrap:wrap;align-items:center;gap:8px;color:rgba(255,255,255,.6);margin-bottom:6px}
.crumbs a{transition:color var(--t-ui) var(--ease-ui)}
.crumbs a:hover{color:var(--amber)}
.crumbs .sep{opacity:.45}
.crumbs [aria-current]{color:var(--amber)}
.page-key{
  display:flex;flex-wrap:wrap;gap:10px;margin-top:clamp(24px,3vw,32px);
}
.page-key span{
  display:inline-flex;align-items:center;gap:8px;padding:9px 15px;border:1px solid var(--edge-light);
  border-radius:var(--r);color:rgba(255,255,255,.86);
}
.page-key span::before{content:"";width:7px;height:7px;background:var(--amber);flex:0 0 auto}

/* ============ 12. STATS BAND ============ */
/* Already a shared-hairline grid — the strongest existing drawing-sheet component. */
.stats{background:var(--ink);color:var(--canvas);border-block:1px solid var(--rule-light)}
.stats-grid{display:grid;grid-template-columns:1fr 1fr;max-width:var(--max);margin:0 auto}
.stat{padding:clamp(24px,3.6vw,44px) var(--gut);border-bottom:1px solid var(--rule-light);border-right:1px solid var(--rule-light)}
.stat:nth-child(2n){border-right:0}
.stat:nth-last-child(-n+2){border-bottom:0}

/* ============ 13. SERVICE SHOWCASE (cards + horizontal track) ============ */
.svc-topbar{display:flex;justify-content:space-between;align-items:flex-end;gap:24px;flex-wrap:wrap}
.svc-nav{display:none;gap:10px}
.svc-arrow{width:48px;height:48px;border:var(--bw-cta) solid var(--edge);border-radius:var(--r);background:transparent;box-shadow:none;display:flex;align-items:center;justify-content:center;transition:background var(--t-ui) var(--ease-ui),border-color var(--t-ui) var(--ease-ui)}
.svc-arrow:hover{background:var(--tint);border-color:var(--ink);transform:none;box-shadow:none}
.svc-arrow:active{transform:translateY(1px)}
.svc-arrow svg{width:22px;height:22px}
.svc-track{display:flex;gap:24px;margin-top:clamp(30px,4vw,52px);overflow-x:auto;scroll-snap-type:x mandatory;padding-bottom:14px;scrollbar-width:none;-webkit-overflow-scrolling:touch}
.svc-track::-webkit-scrollbar{display:none}
/* DRAWING SHEET: the service card stops being a floating tile and becomes a ruled
   cell — image, one drawn rule, flush-left text. Three hover signals replace the
   shadow: the rule goes solid ink, the title shifts amber-deep, the image scales 1.03. */
.svc-card{
  scroll-snap-align:start;flex:0 0 min(82vw,400px);background:transparent;
  border:0;border-radius:var(--r-panel);box-shadow:none;
  display:flex;flex-direction:column;overflow:hidden;
  transition:none;
}
.svc-card:hover{transform:none;box-shadow:none}
.svc-media{position:relative;aspect-ratio:4/3;overflow:hidden;background:var(--charcoal);border-bottom:0;border-radius:var(--r-panel)}
.svc-media img{width:100%;height:100%;object-fit:cover;transition:transform 900ms var(--ease)}
.svc-card:hover .svc-media img{transform:scale(1.03)}
.svc-index{position:absolute;top:12px;left:12px;z-index:2;background:rgba(16,16,16,.82);color:var(--amber);padding:5px 10px;border-radius:var(--r);backdrop-filter:blur(3px);-webkit-backdrop-filter:blur(3px)}
.svc-body{padding:20px 0 24px;display:flex;flex-direction:column;flex:1;border-top:1px solid var(--rule);margin-top:0;transition:border-top-color var(--t-ui) var(--ease-ui)}
.svc-card:hover .svc-body{border-top-color:var(--ink)}
.svc-body h3{transition:color var(--t-ui) var(--ease-ui)}
.svc-card:hover h3{color:var(--amber-deep)}
.svc-desc{margin-top:9px;font-size:.95rem;color:var(--muted);line-height:1.55}
.svc-specs{margin:16px 0 20px;display:flex;flex-direction:column;gap:8px}
.svc-specs li{position:relative;padding-left:22px;font-size:.9rem;line-height:1.45;color:#2a2a2a}
.svc-specs li::before{content:"";position:absolute;left:0;top:.72em;width:12px;height:1px;background:var(--edge);border:0}
.svc-card .arrow-link{margin-top:auto}
.swipe-hint{margin-top:12px}

/* ============ 14. FLOOR FINDER ============ */
.finder{background:var(--whisper);border-block:1px solid var(--rule);overflow:hidden}
.finder .watermark{color:var(--ink);top:-8%;right:-4%}
.finder-grid{display:grid;gap:clamp(28px,4vw,54px);position:relative;z-index:1}
.chips{display:flex;flex-wrap:wrap;gap:11px;margin-top:20px}
.chip{
  padding:0 18px;min-height:46px;display:inline-flex;align-items:center;gap:8px;
  background:var(--canvas);border:1px solid var(--edge);border-radius:var(--r);box-shadow:none;
  transition:background var(--t-ui) var(--ease-ui),border-color var(--t-ui) var(--ease-ui),color var(--t-ui) var(--ease-ui);
}

/* in-page anchor nav για content-heavy σελίδες (MOBILE-STANDARD §3) */
.page-jump{background:var(--whisper);border-bottom:1px solid var(--rule)}
.page-jump .wrap{
  display:flex;align-items:center;gap:10px;padding-block:16px;
  overflow-x:auto;scrollbar-width:none;-webkit-overflow-scrolling:touch;
}
.page-jump .wrap::-webkit-scrollbar{display:none}
.page-jump .chip{flex:0 0 auto;padding:0 15px;min-height:44px;font-size:.9rem}
/* NOTE: no chip fills amber on hover any more — the amber fill lives only on
   .chip.active, which is one chip per grid at a time. The old .page-jump-specific
   hover override here was byte-identical to the generic .chip:hover below. */
.pj-label{
  flex:0 0 auto;opacity:.72;margin-right:4px;   /* .55 = 3.75:1 on --whisper at 11px */
}
/* .chip lives ONLY on --whisper grounds (.finder, .page-jump). Its --edge line
   composites to 2.73:1 against whisper on the outside — under 1.4.11 on the side
   that identifies the control — because the chip's own canvas fill sits under the
   semi-transparent border. Same 1px weight, darker tone: 3.72:1 out, 4.29:1 in. */
.finder .chip,.page-jump .chip{border-color:rgba(24,24,24,.58)}
.chip:hover{transform:none;box-shadow:none;background:var(--tint);border-color:var(--ink)}
.chip:active{transform:translateY(1px)}
.chip.active{transform:none;box-shadow:none;background:var(--amber);border-color:var(--amber-edge);color:var(--ink)}
.finder-hint{display:flex;align-items:center;gap:12px}
.finder-hint .pulse{flex:0 0 auto;width:9px;height:9px;background:var(--amber);border:0;animation:pulse 2s var(--ease) infinite}
@keyframes pulse{0%,100%{opacity:1}50%{opacity:.45}}
.finder-result{
  background:var(--canvas);border:1px solid var(--rule);border-radius:var(--r-panel);box-shadow:none;
  display:grid;grid-template-columns:118px 1fr;align-items:stretch;overflow:hidden;
  opacity:0;transform:translateY(12px);transition:opacity .5s var(--ease),transform .5s var(--ease);
}
.finder-result[hidden]{display:none}
.finder-result.show{opacity:1;transform:none}
.fr-thumb{background:var(--charcoal);overflow:hidden;border-right:1px solid var(--rule);min-height:158px}
.fr-thumb img{width:100%;height:100%;object-fit:cover}
.fr-body{padding:20px 22px;display:flex;flex-direction:column;justify-content:center;gap:4px}
.fr-line{font-size:.94rem;color:var(--muted);margin-bottom:14px;line-height:1.5}
.fr-actions{display:flex;flex-wrap:wrap;gap:10px}

/* ============ 15. PROCESS ============ */
.proc-layout{display:grid;gap:clamp(28px,4vw,58px)}
.proc-sticky{display:none}
/* DRAWING SHEET: the gaps close and the steps become a continuous ruled schedule. */
.proc-steps{display:flex;flex-direction:column;gap:0}
.proc-step{
  border:0;border-top:1px solid var(--rule);border-radius:var(--r-panel);background:transparent;box-shadow:none;
  padding:24px 20px 24px 0;display:grid;grid-template-columns:auto 1fr;gap:20px;align-items:start;
  /* padding-left IS in this list. It was not, so the 20px content jog on
     .active/:hover fired instantly while the ground faded over 180ms — four hard
     jolts running down the schedule. .subnav a and .nav-mobile a both ease it. */
  transition:background var(--t-ui) var(--ease-ui),color var(--t-ui) var(--ease-ui),
             box-shadow var(--t-ui) var(--ease-ui),padding-left var(--t-ui) var(--ease-ui);
}
.proc-step:last-child{border-bottom:1px solid var(--rule)}
.proc-step.active,.proc-step:hover{background:var(--ink);color:var(--canvas);transform:none;box-shadow:inset 3px 0 0 var(--amber);padding-left:20px}
.proc-step.active .ps-num,.proc-step:hover .ps-num{color:var(--amber)}
.ps-body h3{margin-bottom:7px}
.ps-body p{font-size:.96rem;line-height:1.55;opacity:.9}
.proc-step.active .ps-body p,.proc-step:hover .ps-body p{color:rgba(255,255,255,.82)}

/* --- steps rail: numbered application steps on service pages --- */
.steps-rail{position:relative;display:flex;flex-direction:column;gap:clamp(20px,3vw,30px);padding-left:clamp(38px,5vw,58px)}
.steps-rail::before{content:"";position:absolute;left:clamp(15px,2.2vw,25px);top:8px;bottom:8px;width:1px;background:var(--rule)}
.on-dark .steps-rail::before{background:var(--rule-light)}
.rail-step{position:relative}
.rail-step::before{
  content:attr(data-n);position:absolute;left:calc(-1 * clamp(38px,5vw,58px));top:0;
  width:clamp(30px,4vw,44px);height:clamp(30px,4vw,44px);
  background:transparent;border:1px solid var(--edge);border-radius:var(--r);
  display:flex;align-items:center;justify-content:center;
  font-family:var(--ff-mono);font-weight:500;font-size:.74rem;color:var(--ink);
}
.on-dark .rail-step::before{border-color:var(--edge-light);color:#fff}
.rail-step h3{margin-bottom:7px}
.rail-step p{color:var(--muted);font-size:.98rem;line-height:1.6;max-width:60ch}
.on-dark .rail-step p{color:var(--muted-light)}

/* ============ 16. WHY / NUMBERED EDITORIAL LIST ============ */
.why{background:var(--dark);color:var(--canvas);overflow:hidden;border-block:1px solid var(--rule-light)}
.why .grain{opacity:.035}
.why .watermark{color:#fff;bottom:-16%;left:-6%;top:auto;opacity:.045}
.why-list{display:flex;flex-direction:column;position:relative;z-index:4}
.why-item{display:grid;grid-template-columns:auto 1fr;gap:clamp(16px,3vw,42px);align-items:baseline;padding:clamp(20px,3.2vw,36px) 0;border-top:1px solid var(--line-light)}
.why-item:last-child{border-bottom:1px solid var(--line-light)}
.why-item p{grid-column:1/-1;margin-top:10px;color:var(--muted-light);max-width:54ch;font-size:.99rem}
/* light variant for use on canvas sections */
.why--light{background:var(--canvas);color:var(--ink);border-block:0}
.why--light .why-item{border-color:var(--line)}
.why--light .why-item:last-child{border-bottom-color:var(--line)}
.why--light .why-item h3{color:var(--ink)}
.why--light .why-item p{color:var(--muted)}
.why--light .why-idx{color:var(--amber-deep)}

/* ============ 17. FEATURE / BENEFIT BOXES ============ */
/* THE DRAWING SHEET — card grids lose their gaps and share ONE drawn rule, so a
   section reads as a spec sheet rather than a row of stickers. The borders did not
   disappear; they moved from around every object to around the page.

   MECHANISM (v2). The first version painted the CONTAINER --rule and let 1px gaps
   show through. That is the classic gap-over-background trap: any incomplete final
   row renders as a solid mid-grey slab the full height of a card — and the grids
   here are filtered by JS (projects.html) or reflow 3→2 columns at 600px, so an
   incomplete row is the NORMAL case, not the edge case.
   So the rule is drawn by the CELLS instead: container carries top+left only,
   each cell carries right+bottom, gap:0. Interior seams stay exactly 1px (never
   doubled), the outer frame still closes, and an empty track shows canvas.
   Corollary: nothing needs cancelling at ≤768px, because nothing is painted. */
.box-grid{display:grid;gap:0;border-top:1px solid var(--rule);border-left:1px solid var(--rule);border-radius:var(--r-panel)}
.on-dark .box-grid{border-color:var(--rule-light)}
.box{
  border:0;border-right:1px solid var(--rule);border-bottom:1px solid var(--rule);
  border-radius:var(--r-panel);background:var(--canvas);
  box-shadow:none;padding:clamp(24px,3vw,34px);
  transition:background var(--t-ui) var(--ease-ui);
}
.on-dark .box{border-color:var(--rule-light)}
.box:hover{transform:none;box-shadow:none;background:var(--tint)}
.box .b-num{display:block;padding-bottom:12px;margin-bottom:14px;border-bottom:1px solid var(--hairline)}
.box h3{margin:12px 0 9px}
.box p{font-size:.95rem;color:var(--muted);line-height:1.58}
.on-dark .box:not(.box--amber):not(.box--ink){background:var(--dark)}
.on-dark .box:not(.box--amber):not(.box--ink):hover{background:var(--charcoal)}
/* .why paints --dark but is written `class="why sec"` with NO .on-dark, so plain
   .box cells inside it fell through to background:var(--canvas) — white cards on a
   black section. That is why services.html carried inline background:transparent
   (with a white 4px hard-offset shadow bolted on beside it). Named explicitly here
   so the markup never has to patch it again. */
.why:not(.why--light) .box-grid{border-color:var(--rule-light)}
.why:not(.why--light) .box{border-color:var(--rule-light)}
.why:not(.why--light) .box:not(.box--amber):not(.box--ink){background:transparent}
.why:not(.why--light) .box:not(.box--amber):not(.box--ink):hover{background:var(--tint-dark)}
.why:not(.why--light) .box h3{color:#fff}
.why:not(.why--light) .box p{color:var(--muted-light)}
.why:not(.why--light) .box .b-num{border-bottom-color:var(--hairline-light)}
/* EXPLICIT DECISION: a single amber accent cell inside a grid is a signal, not
   sprawl. Hard limit: max ONE .box--amber per grid, never in the same viewport
   as the primary CTA. */
.box--amber{background:var(--amber)}
.box--amber:hover{background:var(--amber-hover)}
.box--amber p{color:#3a2a00}
.box--ink{background:var(--ink);color:var(--canvas);box-shadow:inset 3px 0 0 var(--amber)}
.box--ink h3{color:#fff}
.box--ink p{color:var(--muted-light)}
.box--ink:hover{background:#212121;box-shadow:inset 3px 0 0 var(--amber)}
.box--ink .b-num{border-bottom-color:var(--hairline-light)}

/* application tags — where a floor is used */
.tag-list{display:flex;flex-wrap:wrap;gap:10px;margin-top:22px}
.tag{
  display:inline-flex;align-items:center;gap:9px;
  border:1px solid var(--rule);border-radius:var(--r);background:transparent;
  padding:0 15px;min-height:38px;
  font-family:var(--ff-display);font-weight:600;font-size:.92rem;line-height:1.2;
}
.tag::before{content:"";width:6px;height:6px;background:var(--amber);flex:0 0 auto}
/* .tag used to declare transform:none and nothing else — no hover response at all,
   next to .chip and .filter which both have one. */
.tag{transition:background var(--t-ui) var(--ease-ui),border-color var(--t-ui) var(--ease-ui)}
.tag:hover{transform:none;background:var(--tint);border-color:var(--ink)}
.on-dark .tag{background:transparent;border-color:var(--rule-light);color:#fff}
.on-dark .tag:hover{background:var(--tint-dark);border-color:#fff}

/* spec / check list — amber becomes the MARK, not the field */
.check-list{display:grid;gap:12px}
.check-list li{position:relative;padding-left:34px;font-size:1rem;line-height:1.55}
.check-list li::before{
  content:"";position:absolute;left:0;top:.15em;width:18px;height:18px;
  background:transparent;border:1px solid var(--edge);border-radius:var(--r);
}
.check-list li::after{
  content:"";position:absolute;left:5px;top:.42em;width:8px;height:4px;
  border-left:var(--hair) solid var(--amber-deep);border-bottom:var(--hair) solid var(--amber-deep);transform:rotate(-45deg);
}
.on-dark .check-list li{color:rgba(255,255,255,.88)}
.on-dark .check-list li::before{border-color:var(--edge-light)}
.on-dark .check-list li::after{border-left-color:var(--amber);border-bottom-color:var(--amber)}

/* data table (τεχνικά χαρακτηριστικά) — the visual PROTOTYPE the card grids imitate */
.spec-table{width:100%;border-collapse:collapse;border:1px solid var(--rule);border-radius:var(--r-panel);background:var(--canvas);box-shadow:none}
.spec-table th,.spec-table td{padding:15px 18px;text-align:left;border-bottom:1px solid var(--hairline);vertical-align:top}
.spec-table th{width:40%;background:transparent}
.spec-table tr:last-child th,.spec-table tr:last-child td{border-bottom:0}
.table-scroll{overflow-x:auto;-webkit-overflow-scrolling:touch}

/* ============ 18. ABOUT / FOUNDER ============ */
.about{position:relative;background:var(--charcoal);color:var(--canvas);overflow:hidden}
/* --hair, not 2px: these were the only two structural 2px borders left in a 1px
   system and they failed the sheet's own pre-deploy lint. --hair is the declared
   decorative-stroke weight and a margin mark is decoration, so presence survives. */
.founder{margin-top:34px;border-left:var(--hair) solid var(--amber);padding:6px 0 6px 26px;max-width:64ch}
.founder .fn-name{margin-bottom:8px}
.founder p{color:rgba(255,255,255,.8);font-size:1rem;line-height:1.62}
.on-light .founder p{color:var(--muted)}
.quote{
  border:0;border-left:var(--hair) solid var(--amber);border-radius:0;background:var(--whisper);box-shadow:none;
  padding:clamp(24px,3.2vw,38px);position:relative;
}
/* .quote::before is display:none in §3 TYPE — do not re-add it. */

/* ============ 19. FAQ ============ */
.faq-list{max-width:900px}
.faq-list details{border:0;border-bottom:1px solid var(--rule);border-radius:var(--r-panel);background:transparent;box-shadow:none;margin-bottom:0;overflow:hidden;transition:background var(--t-ui) var(--ease-ui)}
.faq-list details:first-of-type{border-top:1px solid var(--rule)}
.faq-list details[open]{box-shadow:inset 2px 0 0 var(--amber);background:rgba(244,233,206,.34);transform:none}
.faq-list summary{list-style:none;cursor:pointer;padding:20px 20px 20px 0;display:flex;align-items:center;justify-content:space-between;gap:18px;min-height:60px}
.faq-list details[open] summary{padding-left:20px}
.faq-list summary::-webkit-details-marker{display:none}
.faq-q-ic{flex:0 0 auto;width:28px;height:28px;border:1px solid var(--edge);border-radius:var(--r);display:flex;align-items:center;justify-content:center;position:relative;transition:background var(--t-ui) var(--ease-ui),border-color var(--t-ui) var(--ease-ui)}
.faq-q-ic::before,.faq-q-ic::after{content:"";position:absolute;background:var(--ink);transition:transform .3s var(--ease)}
.faq-q-ic::before{width:12px;height:var(--hair)}
.faq-q-ic::after{width:var(--hair);height:12px}
details[open] .faq-q-ic{background:var(--amber);border-color:var(--amber-edge)}
details[open] .faq-q-ic::after{transform:scaleY(0)}
.faq-a{padding:0 20px 22px 0;color:var(--muted);line-height:1.66;max-width:72ch}
.faq-list details[open] .faq-a{padding-left:20px}
.faq-a p{margin-bottom:.9em}
.faq-a p:last-child{margin-bottom:0}
.faq-group-title{margin:clamp(30px,4vw,46px) 0 16px}
.faq-group-title:first-child{margin-top:0}

/* ============ 20. PROJECTS / PORTFOLIO ============ */
/* drawing sheet v2 — see §17. projects.html filters 21 cards with display:none,
   so under the old gap-over-background mechanism four of five filter states left
   a grey slab where the missing cells were. */
.proj-grid{display:grid;gap:0;border-top:1px solid var(--rule);border-left:1px solid var(--rule);border-radius:var(--r-panel)}
.on-dark .proj-grid{border-color:var(--rule-light)}
.proj-card{
  border:0;border-right:1px solid var(--rule);border-bottom:1px solid var(--rule);
  border-radius:var(--r-panel);background:var(--canvas);box-shadow:none;
  overflow:hidden;display:flex;flex-direction:column;
  transition:background var(--t-ui) var(--ease-ui);
}
.on-dark .proj-card{border-color:var(--rule-light)}
.proj-card:hover{transform:none;box-shadow:none;background:var(--tint)}
/* on hover the card fills --whisper, where --amber-deep drops to 4.07:1 — and
   --t-h3 bottoms out at 18.4px, 0.26px short of the large-text exemption. */
.proj-card:hover h3{color:#8A5B00}   /* 4.86:1 on whisper */
.proj-media{position:relative;aspect-ratio:4/3;overflow:hidden;border-bottom:1px solid var(--rule);background:var(--charcoal)}
.proj-media img{width:100%;height:100%;object-fit:cover;transition:transform 900ms var(--ease)}
.proj-card:hover .proj-media img{transform:scale(1.03)}
.proj-body{padding:18px 20px 22px}
.proj-body h3{transition:color var(--t-ui) var(--ease-ui)}
.proj-meta{display:flex;flex-wrap:wrap;gap:6px 14px;margin-top:9px}
.proj-meta span{display:inline-flex;align-items:center;gap:7px}
.proj-meta span::before{content:"";width:1px;height:10px;background:var(--edge);flex:0 0 auto}
.proj-tag{position:absolute;top:12px;left:12px;z-index:3;background:rgba(16,16,16,.82);color:var(--amber);padding:5px 10px;border-radius:var(--r);backdrop-filter:blur(3px);-webkit-backdrop-filter:blur(3px)}

/* PHOTO FRAME — the class that replaces the eleven inline
   `border:2.5px solid var(--ink);border-radius:4px;box-shadow:6px 6px 0 var(--ink)`
   attributes the CSS-only refactor could not reach. 1px rule, poured-slab radius,
   no shadow, no fourth radius value. */
.plate{display:block;border:1px solid var(--rule);border-radius:var(--r-panel);overflow:hidden}
.on-dark .plate,.why .plate,.box--ink .plate{border-color:var(--rule-light)}
.plate img{display:block;width:100%}

/* plain three-up photo row. Deliberately NOT .box-grid: that class draws a shared
   drawing-sheet rule and expects .box children, so using it as a bare layout
   wrapper put a grey field behind three loose photos and their captions. */
.photo-3up{display:grid;gap:clamp(16px,2.2vw,26px);grid-template-columns:1fr}
@media(min-width:700px){.photo-3up{grid-template-columns:repeat(3,1fr)}}

/* home-page projects teaser reuses .svc-card as the track wrapper but fills it
   with .proj-media/.proj-body, so it inherited none of the project-card hover
   vocabulary and none of the track's flush-left alignment. */
.svc-track .proj-body{padding:20px 0 24px}
.svc-card:hover .proj-media img{transform:scale(1.03)}

/* designed photo placeholder — where the real project shots land */
.photo-slot{
  position:absolute;inset:0;display:flex;flex-direction:column;align-items:center;justify-content:center;gap:12px;
  text-align:center;padding:22px;color:rgba(255,255,255,.9);
  background:
    repeating-linear-gradient(135deg,rgba(240,162,0,.13) 0 14px,transparent 14px 28px),
    linear-gradient(150deg,#2b2b2b,#161616);
}
.photo-slot .ps-ic{width:44px;height:44px;border:1px solid rgba(240,162,0,.55);border-radius:var(--r);display:flex;align-items:center;justify-content:center;color:var(--amber)}
.photo-slot .ps-ic svg{width:22px;height:22px}

/* before / after comparison slider */
.ba{position:relative;border:1px solid var(--rule);border-radius:var(--r-panel);box-shadow:none;overflow:hidden;aspect-ratio:16/10;background:var(--charcoal);touch-action:pan-y}
.ba-layer{position:absolute;inset:0}
.ba-layer img{width:100%;height:100%;object-fit:cover}
.ba-after{clip-path:inset(0 0 0 var(--pos,50%))}
.ba-badge{position:absolute;top:12px;z-index:4;background:var(--ink);color:#fff;padding:6px 11px;border-radius:var(--r);backdrop-filter:blur(3px);-webkit-backdrop-filter:blur(3px)}
.ba-badge--before{left:12px}
.ba-badge--after{right:12px;background:var(--amber);color:var(--ink)}
.ba-handle{
  position:absolute;top:0;bottom:0;left:var(--pos,50%);width:2px;background:var(--amber);z-index:5;
  transform:translateX(-50%);pointer-events:none;
}
/* the 48px amber circle with a 2.5px ink ring was the only round shape on the site.
   It becomes a 44px machined square drag control — more industrial, not less. */
.ba-handle::after{
  content:"";position:absolute;top:50%;left:50%;transform:translate(-50%,-50%);
  width:44px;height:44px;background:var(--amber);border:1px solid var(--ink);border-radius:var(--r);
  box-shadow:0 1px 3px rgba(0,0,0,.18);
}
/* The boundary is INK, not --amber-edge. This control floats over project
   photography, where amber-edge measures 2.34:1 against a bright concrete slab —
   the refactor removed the old 2.5px ink ring without replacing the contrast it
   was carrying. Ink is 8.35:1 on the amber fill and 12.4:1 against light concrete,
   at the system's 1px weight and with no shadow added. */
.ba-handle::before{
  content:"";position:absolute;top:50%;left:50%;z-index:2;
  transform:translate(-50%,-50%);width:20px;height:10px;
  background:
    linear-gradient(90deg,var(--ink) 0 1.5px,transparent 1.5px 5px,var(--ink) 5px 6.5px) no-repeat left center/9px 10px,
    linear-gradient(90deg,var(--ink) 0 1.5px,transparent 1.5px 5px,var(--ink) 5px 6.5px) no-repeat right center/9px 10px;
}
.ba-input{position:absolute;inset:0;z-index:6;width:100%;height:100%;opacity:0;cursor:ew-resize;margin:0}
/* The comparison control is a real <input type="range"> painted opacity:0, and
   opacity applies to the OUTLINE too — so the global focus ring rendered at zero
   alpha and a keyboard user got no indication whatsoever (2.4.7, total failure).
   Redirect the ring onto the visible handle. White is 19:1 against the dark half
   of any project photo and 8.35:1 against the amber fill. */
.ba-input:focus-visible{outline:none;box-shadow:none}
.ba:has(.ba-input:focus-visible) .ba-handle::after{outline:3px solid #fff;outline-offset:2px}
.ba:has(.ba-input:focus-visible) .ba-handle{background:#fff}

/* filter pills — portfolio filters stay INK when active while floor-finder chips go
   amber, so the page never shows two ambers competing. */
.filters{display:flex;flex-wrap:wrap;gap:10px;margin-bottom:clamp(26px,3.4vw,38px)}
.filter{
  padding:0 18px;min-height:44px;display:inline-flex;align-items:center;
  border:1px solid var(--edge);border-radius:var(--r);background:transparent;box-shadow:none;
  transition:background var(--t-ui) var(--ease-ui),border-color var(--t-ui) var(--ease-ui),color var(--t-ui) var(--ease-ui);
}
.filter:hover{transform:none;box-shadow:none;background:var(--tint);border-color:var(--ink)}
.filter:active{transform:translateY(1px)}
.filter.active{background:var(--ink);color:var(--canvas);border-color:var(--ink)}

/* ============ 21. CTA BAND ============ */
/* The full-bleed amber band STAYS amber — it is a brand moment, not a button. */
.cta-band{background:var(--amber);border-block:1px solid rgba(24,24,24,.22);position:relative;overflow:hidden}
.cta-band .watermark{color:var(--ink);opacity:.07;top:-14%;right:-2%}
.cta-inner{position:relative;z-index:2;display:grid;gap:26px;align-items:center;padding-block:clamp(44px,6vw,80px)}
.cta-inner p{margin-top:14px;max-width:52ch;color:#3a2a00;font-size:1.03rem}
.cta-actions{display:flex;flex-wrap:wrap;gap:13px}
.cta-band--ink{background:var(--ink);color:var(--canvas);border-block-color:var(--rule-light)}
.cta-band--ink .cta-inner h2{color:#fff}
.cta-band--ink .cta-inner p{color:var(--muted-light)}
.cta-band--ink .watermark{color:#fff;opacity:.05}

/* ============ 22. CONTACT ============ */
.contact{background:var(--whisper);border-top:1px solid var(--rule)}
.contact-grid{display:grid;gap:clamp(26px,4vw,52px)}
.form-card{background:var(--canvas);border:1px solid var(--rule);border-radius:var(--r-panel);box-shadow:none;padding:clamp(22px,3.6vw,38px)}
.field{margin-bottom:17px}
.field input,.field textarea,.field select{
  width:100%;padding:14px 16px;min-height:50px;border:1px solid var(--edge);border-radius:var(--r);
  background:var(--canvas);color:var(--ink);
  transition:border-color var(--t-ui) var(--ease-ui),box-shadow var(--t-ui) var(--ease-ui);
}
.field select{appearance:none;background-image:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23181818' stroke-width='1.8'%3E%3Cpath d='M6 9l6 6 6-6'/%3E%3C/svg%3E");background-repeat:no-repeat;background-position:right 14px center;background-size:17px;padding-right:44px}
.field input:hover,.field textarea:hover,.field select:hover{border-color:rgba(24,24,24,.64)}
.field input:focus,.field textarea:focus,.field select:focus{outline:none;border-color:var(--ink);box-shadow:inset 0 0 0 1px var(--ink),0 0 0 4px rgba(240,162,0,.30)}
/* Form fields were the one control family opting out of the site focus ring: the
   :focus rule above is (0,2,1) and silently beat the global :focus-visible, leaving
   a 1px boundary shift and a 1.34:1 amber glow as the whole signal. Keyboard focus
   gets the same 3px ink ring every other control has. */
.field input:focus-visible,.field textarea:focus-visible,.field select:focus-visible{
  outline:3px solid var(--ink);outline-offset:2px;border-color:var(--ink);
  box-shadow:inset 0 0 0 1px var(--ink),0 0 0 6px rgba(240,162,0,.40);
}
.field textarea{min-height:124px;resize:vertical;line-height:1.6}
.field input[type=file]{padding:11px;font-size:.86rem;cursor:pointer}
.field-row{display:grid;gap:17px}
.hp{position:absolute;left:-9999px;width:1px;height:1px;overflow:hidden}
.form-foot{display:flex;flex-direction:column;gap:13px;margin-top:4px}
.gdpr{color:#555}
.gdpr a{color:var(--ink);text-decoration:underline}
.form-status{padding:13px 15px;border:1px solid var(--edge);border-radius:var(--r);box-shadow:var(--elev);display:none}
.form-status.show{display:block}
.form-status.ok{background:var(--whisper)}
.form-status.err{background:#fde8e8}
.contact-aside{display:flex;flex-direction:column;gap:16px}
.ci-block{background:var(--canvas);border:1px solid var(--rule);border-radius:var(--r-panel);padding:22px;box-shadow:none}
.ci-row{display:flex;align-items:flex-start;gap:14px;padding:11px 0;border-bottom:1px solid var(--hairline);min-height:52px}
.ci-row:last-child{border-bottom:0}
.ci-ic{flex:0 0 auto;width:38px;height:38px;background:transparent;border:1px solid var(--edge);border-radius:var(--r);color:var(--amber-deep);display:flex;align-items:center;justify-content:center}
.ci-ic svg{width:19px;height:19px}
.ci-k{display:block;margin-bottom:3px}
.ci-v{display:block}
.wa-btn{display:inline-flex;align-items:center;justify-content:center;gap:10px;background:var(--amber);border:1px solid var(--amber-edge);border-radius:var(--r);font-family:var(--ff-display);font-weight:600;padding:0 22px;min-height:52px;box-shadow:none;transition:background var(--t-ui) var(--ease-ui),transform var(--t-press) linear}
.wa-btn:hover{transform:none;background:var(--amber-hover);box-shadow:none}
.wa-btn:active{transform:translateY(1px);background:var(--amber-edge)}
.wa-btn svg{width:21px;height:21px}
.map-embed{position:relative;aspect-ratio:16/9;border:1px solid var(--rule);border-radius:var(--r-panel);box-shadow:none;background:var(--dark);overflow:hidden}
.map-embed iframe{position:absolute;inset:0;width:100%;height:100%;border:0;filter:grayscale(.18) contrast(1.05)}
.map-embed .map-fallback{position:absolute;inset:0;display:flex;align-items:center;justify-content:center;pointer-events:none}

/* areas served */
.areas{display:flex;flex-wrap:wrap;gap:9px}
.areas span{padding:8px 13px;border:1px solid var(--rule);border-radius:var(--r);color:#4a4a4a}
.on-dark .areas span{border-color:var(--rule-light);color:rgba(255,255,255,.75)}

/* ============ 23. CROSS-NAV (other floors) ============ */
/* drawing sheet v2 — see §17 */
.cross-grid{display:grid;gap:0;border-top:1px solid var(--rule);border-left:1px solid var(--rule);border-radius:var(--r-panel)}
.on-dark .cross-grid{border-color:var(--rule-light)}
.cross-card{
  display:flex;align-items:center;gap:16px;padding:18px;
  border:0;border-right:1px solid var(--rule);border-bottom:1px solid var(--rule);
  border-radius:var(--r-panel);background:var(--canvas);box-shadow:none;
  transition:background var(--t-ui) var(--ease-ui);
}
.on-dark .cross-card{border-color:var(--rule-light)}
.cross-card:hover{transform:none;box-shadow:none;background:var(--tint)}
.cross-thumb{width:72px;height:72px;flex:0 0 auto;border:0;border-radius:var(--r);overflow:hidden;background:var(--charcoal)}
.cross-thumb img{width:100%;height:100%;object-fit:cover}
.cross-card p{font-size:.85rem;color:var(--muted);margin-top:5px;line-height:1.45}

/* ============ 24. FOOTER ============ */
.site-foot{background:var(--dark);color:rgba(255,255,255,.72);padding:clamp(44px,6vw,78px) 0 26px;border-top:1px solid var(--rule-light);position:relative;overflow:hidden}
.site-foot .watermark{color:#fff;opacity:.03;bottom:-22%;right:-4%;top:auto}
.foot-grid{display:grid;gap:32px;margin-bottom:38px;position:relative;z-index:2}
.foot-brand img{height:46px;width:auto;margin-bottom:16px}
.foot-tag{color:rgba(255,255,255,.62);max-width:36ch}
.foot-social{display:flex;gap:10px;margin-top:18px}
.foot-social a{width:44px;height:44px;border:1px solid var(--edge-light);border-radius:var(--r);box-shadow:none;display:flex;align-items:center;justify-content:center;transition:border-color var(--t-ui) var(--ease-ui),background var(--t-ui) var(--ease-ui),color var(--t-ui) var(--ease-ui)}
.foot-social a:hover{border-color:var(--amber);color:var(--amber);background:rgba(240,162,0,.1)}
.foot-social svg{width:19px;height:19px}
.foot-col a,.foot-col p{display:block;color:rgba(255,255,255,.74);margin-bottom:10px;transition:color var(--t-ui) var(--ease-ui)}
.foot-col a:hover{color:var(--amber)}
.foot-bottom{border-top:1px solid var(--hairline-light);padding-top:20px;display:flex;flex-wrap:wrap;gap:14px;justify-content:space-between;align-items:center;position:relative;z-index:2}
.foot-legal{display:flex;flex-wrap:wrap;gap:16px;align-items:center}
.foot-legal a{color:rgba(255,255,255,.55);transition:color var(--t-ui) var(--ease-ui)}
.foot-legal a:hover{color:var(--amber)}

/* ============ 25. REVEAL / MOTION SYSTEM ============ */
/* Different mechanism per content type — no fade-up monoculture.
   The Confident curve is unchanged; only the amplitudes tighten. */
@supports (animation-timeline: view()){
  [data-anim]{animation:linear both;animation-timeline:view();animation-range:entry 2% entry 46%}
  [data-anim="up"]{animation-name:aUp}
  [data-anim="left"]{animation-name:aLeft}
  [data-anim="right"]{animation-name:aRight}
  [data-anim="clip"]{animation-name:aClip}
  [data-anim="mask"]{animation-name:aMask}
  [data-anim="pop"]{animation-name:aPop}
}
@keyframes aUp{from{opacity:0;transform:translateY(14px)}to{opacity:1;transform:none}}
@keyframes aLeft{from{opacity:0;transform:translateX(-20px)}to{opacity:1;transform:none}}
@keyframes aRight{from{opacity:0;transform:translateX(20px)}to{opacity:1;transform:none}}
@keyframes aClip{from{opacity:.15;clip-path:inset(0 0 100% 0)}to{opacity:1;clip-path:inset(0 0 0 0)}}
@keyframes aMask{from{opacity:0;transform:translateY(100%)}to{opacity:1;transform:none}}
@keyframes aPop{from{opacity:0;transform:none}to{opacity:1;transform:none}}   /* nothing scales */
/* IntersectionObserver fallback */
.io-anim [data-anim]{opacity:0;transition:opacity var(--t-reveal) var(--ease),transform var(--t-reveal) var(--ease),clip-path var(--t-reveal) var(--ease)}
.io-anim [data-anim="up"]{transform:translateY(14px)}
.io-anim [data-anim="left"]{transform:translateX(-20px)}
.io-anim [data-anim="right"]{transform:translateX(20px)}
.io-anim [data-anim="clip"]{opacity:.15;clip-path:inset(0 0 100% 0)}
.io-anim [data-anim="mask"]{transform:translateY(100%)}
.io-anim [data-anim="pop"]{transform:none}
.io-anim [data-anim].seen{opacity:1;transform:none;clip-path:inset(0 0 0 0)}
[data-d="1"]{animation-delay:.07s;transition-delay:.07s}
[data-d="2"]{animation-delay:.14s;transition-delay:.14s}
[data-d="3"]{animation-delay:.21s;transition-delay:.21s}
[data-d="4"]{animation-delay:.28s;transition-delay:.28s}
[data-d="5"]{animation-delay:.35s;transition-delay:.35s}
/* masked headline lines */
.mask-line{display:block;overflow:hidden;padding-bottom:.05em}
.mask-line>span{display:inline-block}

/* page enter (cross-document) */
@view-transition{navigation:auto}
::view-transition-old(root){animation:vtOut .28s var(--ease) both}
::view-transition-new(root){animation:vtIn .42s var(--ease) both}
@keyframes vtOut{to{opacity:0;transform:translateY(-8px)}}
@keyframes vtIn{from{opacity:0;transform:translateY(14px)}}
.site-head{view-transition-name:site-head}
.site-foot{view-transition-name:site-foot}
.callfab{view-transition-name:callfab}

/* ============ 26. RESPONSIVE ============ */
@media(min-width:600px){
  .stats-grid{grid-template-columns:repeat(4,1fr)}
  .stat{border-bottom:0}
  .stat:nth-child(2n){border-right:1px solid var(--rule-light)}
  .stat:last-child{border-right:0}
  .field-row{grid-template-columns:1fr 1fr}
  .box-grid--2,.box-grid--3{grid-template-columns:repeat(2,1fr)}
  .proj-grid{grid-template-columns:repeat(2,1fr)}
  .cross-grid{grid-template-columns:repeat(2,1fr)}
}
@media(min-width:769px){
  html{scroll-padding-top:104px}
  .head-inner{min-height:78px;padding-block:12px}
  .brand-img{height:54px}
  .nav-desktop{display:flex}
  .menu-toggle{display:none}
  .nav-mobile{display:none!important}
  .mob-phone{display:none}
  .head-cta{display:inline-flex}
  .svc-nav{display:flex}
  .finder-grid{grid-template-columns:1.02fr 1fr;align-items:start}
  .contact-grid{grid-template-columns:1.12fr .88fr;align-items:start}
  .foot-grid{grid-template-columns:1.5fr 1fr 1fr}
  .proc-layout{grid-template-columns:.82fr 1.18fr;align-items:start}
  .proc-sticky{display:block;position:sticky;top:clamp(120px,17vh,160px);align-self:start}
  .split--2{grid-template-columns:1fr 1fr}
  .split--73{grid-template-columns:1.34fr 1fr}
  .split--37{grid-template-columns:1fr 1.34fr}
  .cta-inner{grid-template-columns:1.3fr auto}
  .cta-actions{justify-content:flex-end}
  .why-item{grid-template-columns:auto minmax(0,1.05fr) minmax(0,1fr)}
  .why-item p{grid-column:auto;margin-top:0;padding-top:.4em}
  /* The editorial stagger CANNOT live on transform: [data-anim] animates that same
     property to `transform:none` with fill:both (and the IO fallback's
     .io-anim [data-anim].seen wins on specificity), so on index.html and
     epoxy-floors.html — where every .why-item carries data-anim — the offset was
     permanently wiped the moment the item finished scrolling through its range.
     margin-inline-start is untouched by every reveal verb. */
  .why-item:nth-child(even){margin-inline-start:clamp(18px,4vw,76px)}
}
@media(min-width:900px){
  .box-grid--3{grid-template-columns:repeat(3,1fr)}
  .proj-grid{grid-template-columns:repeat(3,1fr)}
  .cross-grid{grid-template-columns:repeat(3,1fr)}
}
@media(min-width:1240px){.head-phone{display:inline-flex}}
/* η δεύτερη γραμμή εμφανίζεται μόνο όταν υπάρχει πραγματικός χώρος */
@media(max-width:1439px){.head-phone--alt{display:none !important}}
/* το header δεν σπάει ποτέ σε δεύτερη γραμμή: πρώτα φεύγει το τηλέφωνο, μετά η «Αρχική» */
@media(min-width:769px) and (max-width:1180px){
  .nav-desktop{gap:18px}
  .nav-desktop a{font-size:.88rem}
  .head-inner{gap:12px}
  .brand-img{height:46px}
}
@media(min-width:769px) and (max-width:1020px){
  .nav-desktop>li:first-child{display:none}   /* «Αρχική» — το λογότυπο κάνει τη δουλειά */
  .nav-desktop{gap:15px}
  .head-cta{padding:0 16px;font-size:.9rem;min-height:46px}
}

/* ============ 27. MOBILE COMPACT (≤768px) ============ */
@media(max-width:768px){
  /* --bw is NOT re-declared here: root is already 1px, so the old override was a
     vestigial no-op from when root was 2.5px. */
  :root{--pad:48px;--tr-hero:-.022em;--tr-label:.11em}
  html{scroll-padding-top:76px}
  .head-inner{min-height:62px;gap:8px;justify-content:space-between}
  .brand{position:absolute;left:50%;top:50%;transform:translate(-50%,-50%)}
  .brand-img{height:34px}
  .head-spacer{display:none}
  .head-tools{gap:8px}
  .head-inner>nav{display:none}
  .site-head .lang-switch{display:none}   /* γλώσσα ζει μέσα στο drawer σε mobile */
  .sec-head{margin-bottom:22px}
  /* NO per-size type overrides in this block. The one that was here resolved to
     38.4px at 768 while the fluid --t-h2 resolves to 33.8px at 769 — section
     headings SHRANK 12% as the viewport grew one pixel, and stayed smaller until
     873px. The fluid clamps own every rung; if 768 wants more, raise the vw
     coefficient on the token, never override the size here. */
  .sec-head p{margin-top:11px}
  .hero-inner{padding-top:calc(72px + env(safe-area-inset-top));padding-bottom:96px}
  .hero-eyebrow{font-size:.66rem;letter-spacing:.1em}
  .hero-eyebrow::before{display:none}
  .hero h1{margin:14px 0 16px;max-width:none}
  .arrow-link{min-height:44px}
  .nav-mobile .lang-btn{padding:15px 18px}
  .brand{min-height:44px;display:flex;align-items:center}
  .foot-col a{padding-block:9px;margin-bottom:2px}
  .foot-legal a{padding-block:6px}
  .hero-actions{margin-top:22px;gap:10px;width:100%;flex-direction:column;align-items:stretch}
  .hero-actions .btn,.hero-phone{width:100%}
  .hero-phones{display:flex;flex-direction:column;align-items:stretch;gap:10px;width:100%}
  .hero-trust{gap:6px 16px;font-size:.62rem}
  .page-hero h1{max-width:none}
  .page-hero .hero-actions{flex-direction:column;align-items:stretch;width:100%}
  .page-key span{font-size:.64rem;padding:8px 12px}
  .why-item{padding:16px 0}
  /* was font-size:1.2rem — 19.2px at 768 against 24.6px at 769 (+28% jump), and it
     split the shared --t-h2s rung in two (.fr-title 24px vs .why-item h3 19.2px). */
  .why-item p{font-size:.94rem;line-height:1.5;margin-top:7px}
  /* .proc-steps keeps gap:0 — the ruled schedule must stay continuous on mobile too */
  .proc-steps{gap:0}
  .proc-step{padding:16px 15px 16px 0;gap:13px}
  .proc-step.active,.proc-step:hover{padding-left:15px}
  .ps-num{font-size:1.7rem}
  .ps-body h3{font-size:1.06rem;margin-bottom:3px}
  .ps-body p{font-size:.9rem;line-height:1.45}
  .steps-rail{gap:16px}
  .rail-step p{font-size:.92rem;line-height:1.5}
  .svc-track{margin-top:20px;gap:14px}
  .svc-media{aspect-ratio:16/10}
  /* svc-body stays flush-left (0 inline padding) so the drawn rule aligns with the image */
  .svc-body{padding:16px 0 18px}
  .svc-desc{margin-top:6px;font-size:.91rem}
  .svc-specs{margin:12px 0 14px;gap:6px}
  .svc-specs li{font-size:.87rem}
  .finder-grid{gap:18px}
  .chips{margin-top:14px;gap:9px}
  .chip{padding:0 15px;font-size:.93rem}
  .finder-result{grid-template-columns:96px 1fr}
  .fr-thumb{min-height:130px}
  .fr-body{padding:15px 16px}
  .fr-line{font-size:.88rem;margin-bottom:11px}
  .stat{padding:18px var(--gut)}
  /* .stat-num override removed: it resolved to 43.2px at 768 against 40.0px at 769. */
  .box{padding:17px}
  .box h3{font-size:1.06rem;margin:8px 0 6px}
  .box p{font-size:.9rem;line-height:1.5}
  .tag{padding:0 13px;font-size:.87rem}
  .check-list li{font-size:.94rem;padding-left:31px}
  .spec-table th,.spec-table td{padding:12px 13px}
  .spec-table td{font-size:.9rem}
  .quote{padding:20px}
  .contact-grid{gap:18px}
  .field-row{grid-template-columns:1fr 1fr;gap:11px}
  .form-card,.ci-block{padding:16px}
  .field{margin-bottom:11px}
  .field label{margin-bottom:5px}
  .field input,.field textarea,.field select{padding:12px 14px}
  .field textarea{min-height:96px}
  .form-foot{gap:10px}
  .gdpr{font-size:.75rem}
  .ci-row{padding:9px 0}
  .ci-ic{width:36px;height:36px}
  .map-embed{aspect-ratio:4/3}
  .contact-aside{gap:12px}
  .founder{margin-top:20px;padding-left:17px}
  .faq-list details{margin-bottom:0}
  .faq-list summary{padding:16px 16px 16px 0;font-size:1rem}
  .faq-list details[open] summary{padding-left:16px}
  .faq-a{padding:0 16px 17px 0;font-size:.94rem}
  .faq-list details[open] .faq-a{padding-left:16px}
  /* (a .proj-body{padding:15px 16px 18px} rule lived here and was dead code — the
     two-column portfolio block further down overrides it unconditionally.) */
  .ba{aspect-ratio:4/3}
  .ba-handle::after{width:40px;height:40px}
  .cross-card{padding:13px;gap:13px}
  .cross-thumb{width:62px;height:62px}
  .cross-card h3{font-size:.99rem}
  .cross-card p{font-size:.81rem}
  .cta-inner{gap:20px}
  .cta-actions{flex-direction:column;align-items:stretch}
  .foot-grid{gap:20px;margin-bottom:24px}
  .foot-brand img{height:40px}
  /* .foot-col a keeps the 2px it was given above alongside its 9px padding-block —
     the old joint rule silently restored 8px and stacked 9+9+8 per link. */
  .foot-col p{margin-bottom:8px}
  .site-foot{padding-top:36px}
  .foot-bottom{padding-top:16px}
  .callfab-btn{width:56px;height:56px}
  .callfab-menu{min-width:min(78vw,272px);max-height:min(62vh,420px);overflow-y:auto;-webkit-overflow-scrolling:touch}
  .watermark{font-size:clamp(14rem,60vw,22rem)}

  /* ── ANTI-ENDLESS-SCROLL (MOBILE-STANDARD §3) ────────────────────────────
     Τα card grids γίνονται οριζόντιες swipe rows με ορατή τη μισή επόμενη
     κάρτα· το portfolio πέφτει σε 2 στήλες. Ίδιο περιεχόμενο, μισό ύψος.
     DRAWING-SHEET GUARD: the grid stops sharing rules here and each card closes
     its own frame, because 12px gaps mean there is no seam left to share.
     The .on-dark row is MANDATORY: without it .on-dark .box (0,2,0) outside this
     block loses to .box-grid>.box (0,2,0) declared later, and every dark-section
     scroller ends up with ink-coloured borders that are invisible on ink cards. */
  .box-grid,.cross-grid{border:0}
  .box-grid>.box,.cross-grid>.cross-card{border:1px solid var(--rule)}
  .on-dark .box-grid>.box,.on-dark .cross-grid>.cross-card,
  .why:not(.why--light) .box-grid>.box{border-color:var(--rule-light)}
  .box-grid{
    display:flex;gap:12px;overflow-x:auto;scroll-snap-type:x mandatory;
    padding-bottom:10px;scrollbar-width:none;-webkit-overflow-scrolling:touch;
  }
  .box-grid::-webkit-scrollbar{display:none}
  .box-grid>.box{flex:0 0 82%;scroll-snap-align:start}
  .cross-grid{
    display:flex;gap:12px;overflow-x:auto;scroll-snap-type:x mandatory;
    padding-bottom:10px;scrollbar-width:none;-webkit-overflow-scrolling:touch;
  }
  .cross-grid::-webkit-scrollbar{display:none}
  .cross-grid>.cross-card{flex:0 0 80%;scroll-snap-align:start}
  .proj-grid{grid-template-columns:1fr 1fr;gap:0}
  .proj-body{padding:11px 12px 13px}
  .proj-body h3{font-size:.92rem;line-height:1.25}
  .proj-meta{margin-top:6px;font-size:.6rem;gap:4px 9px}
  .proj-tag{font-size:.58rem;padding:4px 8px;top:8px;left:8px}
  .check-list{gap:9px}
  .check-list li{line-height:1.48}
  .tag-list{gap:8px;margin-top:16px}
  .steps-rail{padding-left:clamp(34px,11vw,46px)}
  .field input[type=file]{min-height:48px}
  .crumbs a{display:inline-block;padding-block:7px}
  .page-key{gap:8px;margin-top:18px}
}
@media(max-width:380px){
  .brand-img{height:30px}
  .menu-toggle,.mob-phone{width:42px;height:42px}
  .hero h1{font-size:clamp(1.85rem,8vw,2.2rem)}
}

/* ============ 28. REDUCED MOTION ============ */
@media (prefers-reduced-motion:reduce){
  html{scroll-behavior:auto}
  *,*::before,*::after{animation-duration:.001ms!important;animation-iteration-count:1!important;transition-duration:.001ms!important;scroll-behavior:auto!important}
  [data-anim]{opacity:1!important;transform:none!important;clip-path:none!important}
  .io-anim [data-anim]{opacity:1!important;transform:none!important;clip-path:none!important}
  html.intro-lock,html.intro-lock body{overflow:visible!important}
  body.intro .hero-logo,body.intro .hero-eyebrow,body.intro .hero h1 .line>span,
  body.intro .hero-sub,body.intro .hero-actions>*,body.intro .hero-trust,body.intro .scroll-cue{opacity:1!important;transform:none!important}
  #veil{display:none!important}
  .scroll-cue .dot,.finder-hint .pulse,.callfab-ring{animation:none!important}
  .hero-slide img{transform:none!important}
  .hero-slide:not(.is-on){display:none!important}
  /* the new 1px press and the arrow nudge are suppressed too */
  .btn:active,.btn--amber:active,.btn--ink:active,.btn--onvideo:active,
  .wa-btn:active,.mob-phone:active,.svc-arrow:active,.callfab-btn:active,
  .chip:active,.filter:active{transform:none!important}
  .btn svg,.btn--ghost::after,.arrow-link .arw{transform:none!important}
  /* site.js already returns early from magnetic() under RM; this is the belt to
     that braces, and it also covers a stale --mx left by a mid-session pref flip. */
  .magnetic{translate:none!important}
  @view-transition{navigation:none}
}