/* anakainisinow.gr — coming-soon page */
@font-face{font-family:"ANW Manrope";font-style:normal;font-weight:200 800;font-display:swap;src:url(../fonts/anw-manrope-greek.woff2) format("woff2");unicode-range:U+0370-0377,U+037A-037F,U+0384-038A,U+038C,U+038E-03A1,U+03A3-03FF}
@font-face{font-family:"ANW Manrope";font-style:normal;font-weight:200 800;font-display:swap;src:url(../fonts/anw-manrope-latin.woff2) format("woff2");unicode-range:U+0000-00FF,U+0131,U+0152-0153,U+02BB-02BC,U+02C6,U+02DA,U+02DC,U+0304,U+0308,U+0329,U+2000-206F,U+20AC,U+2122,U+2191,U+2193,U+2212,U+2215,U+FEFF,U+FFFD}
:root{--orange:#ff5e14;--navy:#0a1027;--text:#c4c8d6}
*,*::before,*::after{box-sizing:border-box}
html,body{height:100%}
body{margin:0;font-family:"ANW Manrope",system-ui,-apple-system,"Segoe UI",Roboto,Arial,sans-serif;font-weight:500;line-height:1.7;color:var(--text);background:var(--navy);-webkit-font-smoothing:antialiased}
a{color:inherit;text-decoration:none;transition:color .3s}
a:hover{color:var(--orange)}
img,svg{display:block;max-width:100%}
.icon{width:1em;height:1em;fill:none;stroke:currentColor;stroke-width:1.8;stroke-linecap:round;stroke-linejoin:round;flex:none}

.cs{position:relative;min-height:100%;display:flex;flex-direction:column;overflow:hidden;isolation:isolate}
.cs::before{content:"";position:absolute;inset:0;z-index:-2;background:url(../img/photos/hero-2.webp) center/cover no-repeat;transform:scale(1.08);animation:kb 24s ease-in-out infinite alternate}
.cs::after{content:"";position:absolute;inset:0;z-index:-1;background:linear-gradient(100deg,rgba(10,16,39,.96) 0%,rgba(10,16,39,.86) 50%,rgba(10,16,39,.55) 100%)}
@keyframes kb{to{transform:scale(1)}}

.cs-top,.cs-main,.cs-foot{width:100%;max-width:1240px;margin:0 auto;padding:0 24px}
.cs-top{display:flex;justify-content:space-between;align-items:center;gap:20px;padding-top:34px;padding-bottom:34px}
.cs-top img{width:230px;height:auto}
.cs-lang{font-weight:700;font-size:14px;letter-spacing:.06em;color:#fff;border:1px solid rgba(255,255,255,.25);padding:6px 12px}

.cs-main{flex:1;display:grid;grid-template-columns:1.25fr .75fr;gap:60px;align-items:center;padding-top:20px;padding-bottom:60px}
.cs-eyebrow{position:relative;display:inline-block;padding-left:56px;font-size:15px;font-weight:800;letter-spacing:.12em;text-transform:uppercase;color:var(--orange);margin:0 0 14px}
.cs-eyebrow::before{content:"";position:absolute;left:0;top:50%;width:42px;height:3px;background:var(--orange)}
.cs h1{font-size:clamp(38px,6vw,76px);line-height:1.06;letter-spacing:-.02em;font-weight:800;color:#fff;margin:0 0 22px}
.cs h1 span{color:var(--orange)}
.cs-lead{font-size:18px;max-width:600px;margin:0 0 34px;color:#d5d8e2}
.cs-en{font-size:15px;max-width:600px;margin:0 0 34px;padding-left:16px;border-left:3px solid var(--orange);color:#aab0c2}

.cs-contact{display:flex;flex-wrap:wrap;gap:14px}
.cs-contact a,.cs-contact span{display:inline-flex;align-items:center;gap:12px;padding:14px 20px;background:rgba(255,255,255,.06);border:1px solid rgba(255,255,255,.12);color:#fff;font-weight:600}
.cs-contact .icon{font-size:20px;color:var(--orange)}
.cs-contact a.primary{background:var(--orange);border-color:var(--orange)}
.cs-contact a.primary .icon{color:#fff}
.cs-contact a.primary:hover{background:#fff;color:var(--navy)}
.cs-contact a.primary:hover .icon{color:var(--orange)}
.cs-contact a:hover{border-color:var(--orange)}

/* animated logo-tiles: the house is being "renovated" */
.cs-art{justify-self:center;width:min(360px,80vw);aspect-ratio:1}
.cs-art svg{width:100%;height:100%;overflow:visible}
.cs-art .wall{fill:none;stroke:#fff;stroke-width:6;stroke-linejoin:miter}
.cs-art .tile{fill:#fff;opacity:0;transform-box:fill-box;transform-origin:center;animation:tileIn 6s infinite}
.cs-art .t2{animation-delay:.35s}.cs-art .t3{animation-delay:.7s}
.cs-art .accent{fill:var(--orange);opacity:0;transform-box:fill-box;transform-origin:center;animation:accentIn 6s infinite;animation-delay:1.1s}
.cs-art .spark{stroke:var(--orange);stroke-width:3;stroke-linecap:round;opacity:0;animation:spark 6s infinite;animation-delay:1.1s}
@keyframes tileIn{0%{opacity:0;transform:translateY(-14px)}8%,85%{opacity:1;transform:none}95%,100%{opacity:0;transform:none}}
@keyframes accentIn{0%{opacity:0;transform:translate(26px,-30px) rotate(40deg)}12%{opacity:1;transform:translate(0,0) rotate(16deg)}80%{opacity:1;transform:rotate(16deg)}92%,100%{opacity:0;transform:rotate(16deg)}}
@keyframes spark{0%,10%{opacity:0}14%,30%{opacity:1}40%,100%{opacity:0}}

.cs-progress{margin-top:26px;text-align:center;font-size:13px;font-weight:700;letter-spacing:.1em;text-transform:uppercase;color:#aab0c2}
.cs-bar{position:relative;height:6px;margin:10px auto 0;width:220px;background:rgba(255,255,255,.12);overflow:hidden}
.cs-bar::after{content:"";position:absolute;left:0;top:0;bottom:0;width:72%;background:var(--orange);animation:bar 2.4s ease-in-out infinite alternate}
@keyframes bar{from{width:58%}to{width:86%}}

.cs-foot{display:flex;justify-content:space-between;flex-wrap:wrap;gap:12px;padding-top:22px;padding-bottom:26px;border-top:1px solid rgba(255,255,255,.1);font-size:14px;color:#8f9199}
.cs-foot span{display:inline-flex;align-items:center;gap:8px}
.cs-foot .icon{color:var(--orange)}

@media (max-width:900px){
  .cs-main{grid-template-columns:1fr;gap:40px}
  .cs-art{order:-1;width:min(200px,50vw)}
  .cs-progress{display:none}
}
@media (max-width:560px){
  .cs-top,.cs-main,.cs-foot{padding-left:16px;padding-right:16px}
  .cs-top img{width:180px}
  .cs-lead{font-size:16px}
  .cs-contact a,.cs-contact span{width:100%}
}
@media (prefers-reduced-motion:reduce){
  .cs::before,.cs-art .tile,.cs-art .accent,.cs-art .spark,.cs-bar::after{animation:none}
  .cs-art .tile,.cs-art .accent,.cs-art .spark{opacity:1}
  .cs-art .accent{transform:rotate(16deg)}
}