:root{
    --bg:#ffffff;
    --bg-soft:#f4f4f4;
    --ink:#0a0a0a;
    --ink-2:#1f1f1f;
    --muted:#6f6f6f;
    --line:rgba(10,10,10,.12);
    --line-2:rgba(10,10,10,.24);
    --radius:14px;
    --maxw:1180px;
    --nav-h:74px;
    --shadow:0 1px 2px rgba(10,10,10,.05), 0 14px 34px -22px rgba(10,10,10,.30);
  }
  *{box-sizing:border-box}
  html{scroll-behavior:smooth}
  body{
    margin:0; background:var(--bg); color:var(--ink);
    font-family:"Inter",-apple-system,BlinkMacSystemFont,"Segoe UI",Roboto,Helvetica,Arial,sans-serif;
    font-size:16.5px; line-height:1.65;
    -webkit-font-smoothing:antialiased; overflow-x:hidden;
  }
  a{color:inherit;text-decoration:none}
  img{max-width:100%;display:block}
  figure{margin:0}
  ::selection{background:rgba(10,10,10,.14)}
  button{font:inherit}

  /* ─────────── 3D LOGO ─────────── */
  #stage{
    position:fixed; inset:0; z-index:0;
    display:grid; place-items:center start;
    padding:var(--nav-h) 0 0 clamp(22px, 3.4vw, 52px);
    pointer-events:none;
    perspective:1400px; perspective-origin:22% 50%;
    will-change:opacity, transform;
    animation:stageIn 1.6s ease .2s backwards;
  }
  /* Εσωτερικές σελίδες (όχι η αρχική): το 3D λογότυπο fixed στο ΚΕΝΤΡΟ */
  body[data-stage="center"] #stage{
    place-items:center;
    padding-left:0;
    perspective-origin:50% 50%;
  }
  @keyframes stageIn{ from{opacity:0} to{opacity:var(--stage-max,.9)} }
  @media (prefers-reduced-motion: reduce){ #stage{animation:none} }
  #logo3d{
    position:relative; width:min(42vw,620px); aspect-ratio:1200/493;
    transform-style:preserve-3d; will-change:transform;
  }
  .logo-layer,.logo-glow{
    position:absolute; inset:0; width:100%; height:100%;
    object-fit:contain; pointer-events:none;
  }
  .logo-layer{ transform-style:preserve-3d; }
  .logo-back{ transform:translateZ(-26px); filter:brightness(1.25); opacity:.5; }
  #logo3d.no-mask .logo-layer{display:none}
  .logo-glow{ filter:blur(44px); opacity:.16; transform:translateZ(-120px) scale(1.05); }
  .logo-shadow{
    position:absolute; left:9%; right:9%; bottom:-13%; height:28%;
    background:radial-gradient(50% 50% at 50% 50%, rgba(10,10,10,.30), rgba(10,10,10,0) 70%);
    filter:blur(28px); transform:translateZ(-34px);
  }
  .logo-front{ filter:drop-shadow(0 20px 32px rgba(10,10,10,.22)); animation:pulse 7s ease-in-out infinite; }
  @keyframes pulse{
    0%,100%{ filter:drop-shadow(0 18px 30px rgba(10,10,10,.18)) }
    50%    { filter:drop-shadow(0 24px 40px rgba(10,10,10,.30)) }
  }
  .grid-lines{
    position:fixed; inset:0; z-index:1; pointer-events:none;
    background-image:
      linear-gradient(to right, rgba(10,10,10,.045) 1px, transparent 1px),
      linear-gradient(to bottom, rgba(10,10,10,.045) 1px, transparent 1px);
    background-size:76px 76px;
    -webkit-mask-image:radial-gradient(80% 64% at 42% 42%, #000 22%, transparent 80%);
    mask-image:radial-gradient(80% 64% at 42% 42%, #000 22%, transparent 80%);
  }
  .vignette{
    position:fixed; inset:0; z-index:1; pointer-events:none;
    background:
      radial-gradient(122% 90% at 42% 36%, rgba(255,255,255,0) 58%, rgba(255,255,255,.62) 90%, #fff 100%),
      linear-gradient(to bottom, rgba(255,255,255,.74) 0%, rgba(255,255,255,.20) 26%, rgba(255,255,255,.58) 100%);
  }
  @media (prefers-reduced-motion: reduce){
    .logo-front{animation:none}
    html{scroll-behavior:auto}
  }

  
/* ═══════════ ΕΣΩΤΕΡΙΚΕΣ ΣΕΛΙΔΕΣ (company / services / contact / project) ═══════════ */
body.page::before{
  content:""; position:fixed; inset:0; z-index:1; pointer-events:none;
  background:linear-gradient(to bottom, rgba(255,255,255,.90) 0%, rgba(255,255,255,.62) 30%, rgba(255,255,255,0) 58%);
}
.page-head{ padding:calc(var(--nav-h) + 52px) 0 0 }
.page-head .eyebrow{ margin-bottom:18px }
.page-head h1{
  font-size:clamp(1.9rem,5vw,3.4rem); font-weight:800; text-transform:uppercase;
  letter-spacing:.01em; line-height:1.06; max-width:24ch;
}
.page-head .co-line{ margin-top:20px }
.page-head + section{ padding-top:64px }
.cta-band{ padding:0 0 104px; text-align:center }
@media (max-width:720px){
  .page-head{ padding-top:calc(var(--nav-h) + 32px) }
  .page-head + section{ padding-top:48px }
}

/* ─────────── LOADER (overlay με το λογότυπο) ─────────── */
  html.cps-loading body{overflow:hidden}
  .loader{
    position:fixed; inset:0; z-index:300; background:#fff;
    display:grid; place-items:center;
    animation:loaderFallback 2.8s ease forwards;
  }
  .loader.off{ animation:none; opacity:0; visibility:hidden; transition:opacity .55s ease, visibility 0s .55s }
  .loader-inner{ display:grid; place-items:center; gap:26px; width:min(300px,54vw) }
  .loader-logo{ width:100%; height:auto; opacity:0; animation:loaderLogo .5s cubic-bezier(.2,.7,.3,1) 0s forwards }
  .loader-bar{ position:relative; width:100%; height:1px; background:rgba(10,10,10,.14); overflow:hidden }
  .loader-bar i{ position:absolute; top:0; bottom:0; left:0; width:0; background:var(--ink); animation:loaderBar 1.4s cubic-bezier(.45,.05,.2,1) .06s forwards }
  @keyframes loaderLogo{ from{ opacity:0; transform:translateY(9px) } to{ opacity:1; transform:none } }
  @keyframes loaderBar{ from{ width:0 } to{ width:100% } }
  @keyframes loaderFallback{ 0%,72%{ opacity:1 } 100%{ opacity:0; visibility:hidden } }
  @media (prefers-reduced-motion: reduce){
    .loader-logo{animation:none; opacity:1}
    .loader-bar i{animation:none; width:100%}
  }

  /* ─────────── NAV ─────────── */
  header.nav{
    position:fixed; top:0; left:0; right:0; z-index:50; height:var(--nav-h);
    backdrop-filter:blur(14px); -webkit-backdrop-filter:blur(14px);
    background:linear-gradient(to bottom, rgba(255,255,255,.94), rgba(255,255,255,.66));
    border-bottom:1px solid transparent;
    transition:background .3s ease, border-color .3s ease, box-shadow .3s ease;
  }
  header.nav.scrolled{
    background:rgba(255,255,255,.95); border-bottom-color:var(--line);
    box-shadow:0 10px 30px -26px rgba(10,10,10,.45);
  }
  .nav-inner{height:100%; width:100%; padding:0 20px; display:flex; align-items:center; position:relative}
  .brand{display:flex; align-items:center; flex:0 0 auto; z-index:2}
  .brand img{height:34px; width:auto}
  nav.links{
    position:absolute; left:50%; top:50%; transform:translate(-50%,-50%);
    display:flex; align-items:center; gap:2px;
  }
  nav.links a{
    font-size:12.5px; font-weight:600; color:#4a4a4a; letter-spacing:.1em; text-transform:uppercase;
    padding:9px 13px; border-radius:8px; white-space:nowrap;
    transition:color .2s ease, background .2s ease;
  }
  nav.links a:hover{color:var(--ink); background:rgba(10,10,10,.05)}
  .nav-right{margin-left:auto; display:flex; align-items:center; gap:12px; z-index:2}
  .social{ display:flex; align-items:center; gap:2px }
  .social a{
    display:grid; place-items:center; width:32px; height:32px; border-radius:8px;
    color:var(--ink); opacity:.68; transition:opacity .2s ease, background .2s ease;
  }
  .social a:hover{ opacity:1; background:rgba(10,10,10,.06) }
  .social svg{ width:17px; height:17px }

  .lang{display:flex; align-items:center; gap:6px; font-size:12px; font-weight:700}
  .lang button{
    background:none; border:0; padding:6px 2px; cursor:pointer;
    color:#a3a3a3; letter-spacing:.1em; font-weight:700;
    border-bottom:1.5px solid transparent; transition:.2s;
  }
  .lang button:hover{color:var(--ink)}
  .lang button.on{color:var(--ink); border-bottom-color:var(--ink)}
  .btn{
    display:inline-flex; align-items:center; justify-content:center; gap:9px;
    font-weight:600; font-size:12.5px; letter-spacing:.1em; text-transform:uppercase;
    padding:12px 20px; border-radius:9px; border:1px solid var(--line-2); cursor:pointer;
    transition:transform .18s ease, background .2s ease, border-color .2s ease, color .2s;
  }
  .btn:hover{transform:translateY(-1px)}
  .btn-primary{background:var(--ink); color:#fff; border-color:var(--ink)}
  .btn-primary:hover{background:#2a2a2a}
  .btn-ghost{color:var(--ink); background:#fff}
  .btn-ghost:hover{background:var(--bg-soft)}
  .nav-cta{padding:10px 16px; font-size:11.5px}
  .burger{
    display:none; background:#fff; border:1px solid var(--line);
    border-radius:9px; width:42px; height:38px; cursor:pointer;
    align-items:center; justify-content:center; flex-direction:column; gap:5px;
  }
  .burger span{display:block; width:17px; height:1.7px; background:var(--ink); border-radius:2px; transition:.25s}
  .burger.open span:nth-child(1){transform:translateY(6.7px) rotate(45deg)}
  .burger.open span:nth-child(2){opacity:0}
  .burger.open span:nth-child(3){transform:translateY(-6.7px) rotate(-45deg)}

  main{position:relative; z-index:2}
  .wrap{max-width:var(--maxw); margin:0 auto; padding:0 24px}
  section{padding:104px 0}
  .eyebrow{
    display:inline-flex; align-items:center; gap:10px;
    font-size:11.5px; font-weight:700; letter-spacing:.2em; text-transform:uppercase;
    color:var(--ink); margin:0 0 20px;
  }
  .eyebrow::before{content:""; width:26px; height:1px; background:var(--ink); opacity:.5}
  h1,h2,h3{line-height:1.14; letter-spacing:-.022em; margin:0; color:var(--ink)}
  h2{font-size:clamp(1.7rem,3.5vw,2.7rem); font-weight:700; text-transform:uppercase; letter-spacing:.005em}
  h3{font-size:1.16rem; font-weight:700; letter-spacing:-.01em}
  p{margin:0 0 1.05em}
  .muted{color:var(--muted)}

  /* ─────────── HERO (ακριβώς 50/50, blended κόψιμο) ─────────── */
  #hero{min-height:100svh; display:flex; align-items:stretch; padding:var(--nav-h) 0 0}
  .hero-inner{width:100%; display:grid; grid-template-columns:1fr 1fr; gap:0; align-items:stretch}
  .hero-logo-slot{position:relative}
  .hero-carousel{position:relative; overflow:hidden; background:#f1f1f1}
  /* απαλό πέρασμα του λευκού πάνω στην εικόνα → χωρίς απότομη γραμμή */
  .hero-carousel::before{
    content:""; position:absolute; top:0; bottom:0; left:0; width:22%; z-index:2; pointer-events:none;
    background:linear-gradient(to right, #fff 0%, rgba(255,255,255,.66) 40%, rgba(255,255,255,0) 100%);
  }
  .hero-carousel::after{
    content:""; position:absolute; left:0; right:0; bottom:0; height:16%; z-index:2; pointer-events:none;
    background:linear-gradient(to top, rgba(255,255,255,.92) 0%, rgba(255,255,255,0) 100%);
  }
  .slides{position:absolute; inset:0}
  .slide{position:absolute; inset:0; opacity:0; transition:opacity 1.15s ease}
  .slide.is-active{opacity:1}
  .slide img{width:100%; height:100%; object-fit:cover; transform:scale(1.06); transition:transform 8s linear}
  .slide.is-active img{transform:scale(1)}
  .reduce-motion .slide{transition:opacity .5s ease}
  .reduce-motion .slide img{transform:none; transition:none}

  /* ─── statement (σαν το «THE IDEAL») ─── */
  #statement{padding:clamp(90px,14vh,150px) 0; text-align:center}
  .stmt-kicker{
    font-size:clamp(.66rem,1.15vw,.78rem); letter-spacing:.3em; text-transform:uppercase;
    color:var(--muted); font-weight:600; margin:0 0 26px;
  }
  .stmt{
    font-size:clamp(2.1rem,7vw,5.4rem); font-weight:800; text-transform:uppercase;
    letter-spacing:.02em; line-height:1.02; margin:0;
  }
  .stmt-sub{
    font-size:clamp(.66rem,1.15vw,.78rem); letter-spacing:.3em; text-transform:uppercase;
    color:var(--muted); font-weight:600; margin:30px 0 0;
  }

  /* kpi */
  #kpi{padding:0 0 96px}
  .stats{
    display:grid; grid-template-columns:repeat(3,1fr); gap:1px;
    background:var(--line); border:1px solid var(--line);
    border-radius:var(--radius); overflow:hidden; box-shadow:var(--shadow);
  }
  .stat{background:#fff; padding:22px}
  .stat b{display:block; font-size:1.2rem; font-weight:700; letter-spacing:.02em; text-transform:uppercase}
  .stat span{font-size:12.4px; color:var(--muted)}

  /* blocks */
  .panel{background:#fff; border:1px solid var(--line); border-radius:var(--radius); padding:30px 28px; box-shadow:var(--shadow)}
  .cards{display:grid; grid-template-columns:repeat(3,1fr); gap:20px; margin-top:44px}
  .card{
    background:#fff; border:1px solid var(--line); border-radius:var(--radius);
    padding:30px 26px; position:relative; overflow:hidden;
    transition:transform .28s cubic-bezier(.2,.7,.3,1), border-color .28s, box-shadow .28s;
    box-shadow:0 1px 2px rgba(10,10,10,.04);
  }
  .card::after{
    content:""; position:absolute; inset:0;
    background:radial-gradient(70% 60% at 20% 0%, rgba(10,10,10,.05), transparent 70%);
    opacity:0; transition:opacity .35s;
  }
  .card:hover{transform:translateY(-5px); border-color:var(--line-2); box-shadow:var(--shadow)}
  .card:hover::after{opacity:1}
  .card .ico{
    width:46px; height:46px; border-radius:11px; display:grid; place-items:center;
    background:rgba(10,10,10,.04); border:1px solid var(--line); margin-bottom:20px;
  }
  .card .ico svg{width:22px; height:22px; stroke:var(--ink); fill:none; stroke-width:1.7}
  .card ul{margin:14px 0 0; padding-left:0; list-style:none}
  .card ul li{position:relative; padding-left:20px; font-size:14.6px; color:#3a3a3a; margin-bottom:7px}
  .card ul li::before{content:""; position:absolute; left:2px; top:.62em; width:7px; height:1.5px; background:var(--ink); border-radius:2px}

  .co-line{
    margin:22px 0 0; font-size:clamp(.68rem,1.15vw,.78rem); letter-spacing:.2em;
    text-transform:uppercase; color:var(--muted); font-weight:600; max-width:36ch; line-height:1.9;
  }
  .two-col{display:grid; grid-template-columns:minmax(0,1fr) minmax(0,1fr); gap:52px; align-items:start}
  .factors{display:grid; grid-template-columns:1fr 1fr; gap:14px 26px; margin-top:26px; padding:0; list-style:none}
  .factors li{font-size:14.7px; color:#3a3a3a; padding-left:24px; position:relative}
  .factors li::before{content:""; position:absolute; left:0; top:.5em; width:9px; height:9px; border-radius:2px; background:var(--ink)}

  /* works */
  .filters{display:flex; flex-wrap:wrap; gap:8px; margin:34px 0 26px}
  .chip{
    font-size:11.5px; font-weight:600; letter-spacing:.1em; text-transform:uppercase; color:var(--muted);
    padding:10px 15px; border-radius:6px; cursor:pointer; border:1px solid var(--line); background:#fff; transition:.22s;
  }
  .chip:hover{color:var(--ink); border-color:var(--line-2)}
  .chip.active{color:#fff; border-color:var(--ink); background:var(--ink)}
  .projects{display:grid; grid-template-columns:repeat(3,1fr); gap:14px}
  .proj{
    position:relative; overflow:hidden; cursor:pointer;
    background:#ececec; border-radius:6px;
  }
  .proj .thumb{aspect-ratio:1/1; overflow:hidden}
  .proj .thumb img{width:100%; height:100%; object-fit:cover; transition:transform .8s cubic-bezier(.2,.7,.3,1), filter .5s ease}
  .proj:hover .thumb img{transform:scale(1.06)}
  .proj .cap{
    position:absolute; left:0; right:0; bottom:0; padding:44px 16px 14px;
    background:linear-gradient(to top, rgba(255,255,255,.97) 0%, rgba(255,255,255,.86) 45%, rgba(255,255,255,0) 100%);
    transform:translateY(6px); opacity:0; transition:opacity .35s ease, transform .35s ease;
  }
  .proj:hover .cap{transform:none; opacity:1}
  .proj .cap .tag{font-size:10.5px; letter-spacing:.18em; text-transform:uppercase; color:var(--muted); font-weight:700}
  .proj .cap h3{margin:6px 0 2px; font-size:.98rem; text-transform:uppercase; letter-spacing:.04em}
  .proj .cap .loc{font-size:12.4px; color:var(--muted)}

  .works-list{margin-top:56px; border-top:1px solid var(--line)}
  .works-list h3{
    font-size:11.5px; letter-spacing:.2em; text-transform:uppercase; color:var(--muted);
    font-weight:700; margin:26px 0 14px;
  }
  .wlist{display:grid; grid-template-columns:1fr 1fr; gap:0 44px}
  .wlist a{
    display:flex; justify-content:space-between; gap:18px; align-items:baseline;
    padding:13px 2px; border-bottom:1px solid var(--line);
    font-size:13.4px; letter-spacing:.06em; text-transform:uppercase;
    transition:padding-left .25s ease, color .2s ease;
  }
  .wlist a:hover{padding-left:10px; color:var(--ink)}
  .wlist a span:last-child{color:var(--muted); text-transform:none; letter-spacing:.02em; font-size:12.6px}

  .contact-grid{display:grid; grid-template-columns:minmax(0,.9fr) minmax(0,1.1fr); gap:52px}
  .info-row{display:flex; gap:14px; padding:17px 0; border-bottom:1px solid var(--line)}
  .info-row:last-child{border-bottom:0}
  .info-row .k{font-size:11.5px; letter-spacing:.16em; text-transform:uppercase; color:var(--muted); min-width:104px; padding-top:3px}
  .info-row .v{font-weight:600}
  form{display:grid; gap:14px}
  .field{display:grid; gap:7px}
  label{font-size:11.5px; letter-spacing:.16em; text-transform:uppercase; color:var(--muted); font-weight:600}
  input,textarea,select{
    width:100%; padding:13px 15px; border-radius:9px; background:#fff;
    border:1px solid var(--line-2); color:var(--ink); font:inherit; font-size:15px;
    transition:border-color .2s, box-shadow .2s;
  }
  input:focus,textarea:focus,select:focus{outline:none; border-color:var(--ink); box-shadow:0 0 0 4px rgba(10,10,10,.08)}
  textarea{min-height:132px; resize:vertical}
  .row-2{display:grid; grid-template-columns:1fr 1fr; gap:14px}
  .form-note{font-size:12.8px; color:var(--muted); margin:2px 0 0}

  /* newsletter */
  #newsletter{padding:0 0 104px}
  .nl{
    border:1px solid var(--line); border-radius:var(--radius); background:#fff;
    padding:38px 32px; box-shadow:var(--shadow);
    display:grid; grid-template-columns:minmax(0,1fr) minmax(0,1fr); gap:30px; align-items:center;
  }
  .nl h3{font-size:1.1rem; letter-spacing:.16em; text-transform:uppercase; font-weight:700}
  .nl p{margin:10px 0 0; font-size:14.4px}
  .nl-form{display:flex; gap:10px}
  .nl-form input{flex:1}
  .nl-msg{grid-column:1 / -1; font-size:13px; color:var(--muted); margin:0}

  footer{
    position:relative; z-index:2; border-top:1px solid var(--line);
    background:linear-gradient(to bottom, rgba(255,255,255,.78), #f6f6f6);
    padding:54px 0 34px;
  }
  .foot-grid{display:grid; grid-template-columns:1.4fr 1fr 1fr; gap:36px}
  .foot-logo img{height:30px; opacity:.92}
  .foot-grid h4{font-size:11.5px; letter-spacing:.18em; text-transform:uppercase; color:var(--muted); margin:0 0 14px; font-weight:700}
  .foot-grid a{display:block; font-size:13.6px; color:#3a3a3a; padding:5px 0; transition:color .2s}
  .foot-grid a:hover{color:var(--ink)}
  .foot-bottom{
    display:flex; justify-content:space-between; gap:18px; flex-wrap:wrap;
    margin-top:44px; padding-top:22px; border-top:1px solid var(--line);
    font-size:12px; color:var(--muted); letter-spacing:.04em;
  }
  .foot-bottom a:hover{color:var(--ink)}

  .reveal{opacity:0; transform:translateY(26px); transition:opacity .8s cubic-bezier(.2,.7,.3,1), transform .8s cubic-bezier(.2,.7,.3,1)}
  .reveal.in{opacity:1; transform:none}

  @media (max-width:1180px){ nav.links a{padding:9px 8px; font-size:11.5px} }
  @media (max-width:1080px){
    #logo3d{width:min(44vw,560px)}
    .nav-cta{display:none}
  }  @media (max-width:980px){
    .two-col,.contact-grid,.nl{grid-template-columns:1fr; gap:30px}
    .cards{grid-template-columns:1fr 1fr}
    .projects{grid-template-columns:1fr 1fr}
    .wlist{grid-template-columns:1fr}
    .foot-grid{grid-template-columns:1fr 1fr}
  }
  @media (max-width:860px){
    .hero-inner{display:block}
    #stage{place-items:start start; padding:calc(var(--nav-h) + 14px) 0 0 0; perspective-origin:50% 20%}
    #logo3d{width:100vw}
    .hero-logo-slot{width:100%; aspect-ratio:1200/493; margin-bottom:18px}
    .hero-carousel{height:58svh}
    .hero-carousel::before{display:none}
    .hero-carousel::after{height:12%}
    #kpi{padding-bottom:70px}
  }
  @media (max-width:720px){
    :root{--nav-h:66px}
    section{padding:74px 0}
    nav.links{
      position:fixed; left:0; right:0; top:var(--nav-h); transform:none;
      flex-direction:column; align-items:stretch; gap:2px;
      background:rgba(255,255,255,.98); backdrop-filter:blur(18px);
      padding:16px 20px 24px; border-bottom:1px solid var(--line);
      box-shadow:0 24px 40px -30px rgba(10,10,10,.45);
      opacity:0; pointer-events:none; transition:.26s;
    }
    nav.links.open{opacity:1; pointer-events:auto}
    nav.links a{padding:13px 12px; font-size:14px}
    .burger{display:flex}
    .cards,.projects,.factors,.row-2,.wlist{grid-template-columns:1fr}
    .stats{grid-template-columns:1fr}
    .foot-grid{grid-template-columns:1fr}
    .brand img{height:28px}
    .nl-form{flex-direction:column}
    body{font-size:16px}
  }

/* ═══════════ ΣΕΛΙΔΑ ΕΡΓΟΥ (project.html) ═══════════ */
.proj{display:block}

#pdetail{padding:calc(var(--nav-h) + 46px) 0 0}

.back{
  display:inline-flex; align-items:center; gap:9px;
  font-size:11.5px; font-weight:600; letter-spacing:.14em; text-transform:uppercase;
  color:var(--muted); padding:6px 0; transition:color .2s, gap .2s;
}
.back:hover{color:var(--ink); gap:13px}
.back::before{content:"←"; font-size:14px; letter-spacing:0}

.phead{margin-top:26px; max-width:min(100%, 980px)}
.phead h1{
  font-size:clamp(2rem,5.4vw,4rem); font-weight:800; text-transform:uppercase;
  letter-spacing:.01em; line-height:1.04; margin:0;
}
.phead .ploc{
  margin:16px 0 0; font-size:clamp(.78rem,1.3vw,.9rem);
  letter-spacing:.24em; text-transform:uppercase; color:var(--muted); font-weight:600;
}

.phero{
  margin:36px 0 0; width:100%;
  height:min(46vh,440px); overflow:hidden; background:#ececec; cursor:zoom-in;
}
.phero img{width:100%; height:100%; object-fit:cover}

.pbody-grid{
  display:grid; grid-template-columns:minmax(0,1.25fr) minmax(0,.75fr);
  gap:52px; align-items:start; margin-top:48px;
}
.pbody p{font-size:clamp(1rem,1.5vw,1.12rem); color:var(--ink-2); max-width:62ch}
.pnote{font-size:12.6px; color:var(--muted); margin:18px 0 0}

.pspecs{margin:0; border-top:1px solid var(--line)}
.pspecs > div{
  display:flex; justify-content:space-between; gap:18px; align-items:baseline;
  padding:15px 0; border-bottom:1px solid var(--line);
  font-size:11.5px; letter-spacing:.16em; text-transform:uppercase; font-weight:600;
}
.pspecs dt{color:var(--muted); margin:0}
.pspecs dd{margin:0; text-transform:none; letter-spacing:.02em; font-size:14px; font-weight:600; text-align:right}

#pphotos{padding:74px 0 0}
.pgallery{display:flex; flex-wrap:wrap; gap:10px; margin-top:20px}
.pgallery:empty{display:none}
.pgallery figure{
  width:168px; height:168px; overflow:hidden; background:#ececec;
  border-radius:6px; cursor:zoom-in; position:relative;
}
.pgallery img{width:100%; height:100%; object-fit:cover; transition:transform .6s cubic-bezier(.2,.7,.3,1)}
.pgallery figure:hover img{transform:scale(1.07)}
.pgallery figure::after{
  content:"⤢"; position:absolute; right:8px; bottom:6px;
  font-size:13px; color:#fff; opacity:0; transition:opacity .25s, transform .25s;
  text-shadow:0 1px 6px rgba(0,0,0,.55); transform:translateY(3px);
}
.pgallery figure:hover::after{opacity:1; transform:none}
.pzoom-hint{font-size:12.2px; color:var(--muted); margin:14px 0 0}

/* ═══════════ LIGHTBOX ═══════════ */
.lightbox{
  position:fixed; inset:0; z-index:200; display:none; place-items:center;
  padding:26px; cursor:zoom-out;
  background:rgba(255,255,255,.965);
  backdrop-filter:blur(7px); -webkit-backdrop-filter:blur(7px);
}
.lightbox.on{display:grid}
.lightbox .lb-img{
  max-width:min(1480px,94vw); max-height:84vh; width:auto; height:auto;
  object-fit:contain; cursor:default; border-radius:4px;
  box-shadow:0 40px 90px -46px rgba(10,10,10,.55);
}
.lb-btn{
  position:absolute; background:#fff; border:1px solid var(--line-2); color:var(--ink);
  width:46px; height:46px; border-radius:50%; cursor:pointer; font-size:20px; line-height:1;
  display:grid; place-items:center; transition:background .2s, transform .2s;
}
.lb-btn:hover{background:var(--ink); color:#fff; border-color:var(--ink); transform:scale(1.05)}
.lb-close{top:20px; right:22px}
.lb-prev{left:18px; top:50%; margin-top:-23px}
.lb-next{right:18px; top:50%; margin-top:-23px}
.lb-cap{
  position:absolute; left:0; right:0; bottom:18px; text-align:center;
  font-size:11.5px; letter-spacing:.18em; text-transform:uppercase; color:var(--muted); font-weight:600;
  padding:0 70px;
}
@media (max-width:860px){
  .pgallery figure{width:calc(50% - 5px); height:auto; aspect-ratio:1/1}
  .lb-prev{left:8px} .lb-next{right:8px}
  .lb-btn{width:40px;height:40px}
}

.pnav{
  display:flex; justify-content:space-between; gap:22px; align-items:stretch;
  margin-top:72px; border-top:1px solid var(--line); padding-top:26px;
}
.pnav a{display:block; padding:6px 0; transition:padding .25s ease}
.pnav a:hover{padding-left:8px}
.pnav a.next:hover{padding-left:0; padding-right:8px}
.pnav .lbl{display:block; font-size:11px; letter-spacing:.18em; text-transform:uppercase; color:var(--muted); font-weight:600}
.pnav b{display:block; margin-top:7px; font-size:1rem; text-transform:uppercase; letter-spacing:.03em; font-weight:700}
.pnav .next{text-align:right; margin-left:auto}

@media (max-width:860px){
  .pbody-grid{grid-template-columns:1fr; gap:34px}
  .phero{height:40vh}
}
@media (max-width:560px){
  .pnav{flex-direction:column; gap:18px}
  .pnav .next{text-align:left; margin-left:0}
}

/* ═══════════ ΒΕΛΑΚΙ «ΠΙΣΩ» (εμφανίζεται παντού εκτός από την αρχική) ═══════════ */
.backtop{
  position:fixed; z-index:60;
  top:calc(var(--nav-h) + 8px); left:clamp(22px, 3.4vw, 52px);
  width:42px; height:42px; border-radius:50%;
  display:grid; place-items:center;
  background:rgba(255,255,255,.92); border:1px solid var(--line); color:var(--ink);
  box-shadow:0 12px 26px -20px rgba(10,10,10,.55);
  backdrop-filter:blur(10px); -webkit-backdrop-filter:blur(10px);
  transition:background .22s ease, color .22s ease, border-color .22s ease, transform .22s ease;
  animation:backTopIn .5s cubic-bezier(.2,.7,.3,1) 1s backwards;
}
@keyframes backTopIn{ from{opacity:0; transform:translateX(-10px)} to{opacity:1; transform:none} }
.backtop:hover{ background:var(--ink); color:#fff; border-color:var(--ink); transform:translateX(-3px) }
.backtop svg{
  width:19px; height:19px; fill:none; stroke:currentColor;
  stroke-width:1.7; stroke-linecap:round; stroke-linejoin:round;
}
@media (prefers-reduced-motion: reduce){ .backtop{animation:none} }
/* χώρος κάτω από το nav ώστε το βελάκι να μην πατάει τον τίτλο */
#pdetail{ padding-top:calc(var(--nav-h) + 62px) }
@media (max-width:720px){
  .backtop{ width:38px; height:38px; left:14px }
  .backtop svg{ width:17px; height:17px }
  .page-head{ padding-top:calc(var(--nav-h) + 64px) }
}

/* ═══════════ FAQ (services.html) ═══════════ */
#faq{padding-top:0}
.faq{max-width:900px; margin:34px auto 0; border-top:1px solid var(--line)}
.faq-item{border-bottom:1px solid var(--line)}
.faq-item summary{
  cursor:pointer; list-style:none; padding:20px 0; display:flex; align-items:center; justify-content:space-between;
  gap:20px; font-size:1.02rem; font-weight:600; color:var(--ink); transition:padding .2s ease;
}
.faq-item summary::-webkit-details-marker{display:none}
.faq-item summary::after{content:"+"; font-size:19px; line-height:1; color:var(--muted); transition:opacity .2s}
.faq-item[open] summary::after{content:"–"}
.faq-item summary:hover{padding-left:8px}
.faq-item p{margin:0 0 22px; color:var(--muted); font-size:14.8px; max-width:74ch}
@media (max-width:720px){
  .faq-item summary{font-size:.97rem; padding:17px 0}
  .faq-item summary:hover{padding-left:0}
}