/* ============================================================
   MyKEP Kozani — design system
   Palette derived from the logo artwork itself:
   #09008D is the exact background colour of the logo PNG, so the
   logo sits flush on the header/footer with no visible seam.
   ============================================================ */

:root{
  --blue:       #09008D;   /* brand deep blue — logo background */
  --blue-dark:  #05003F;   /* footer base line */
  --blue-soft:  #1E14B4;   /* lifted blue for gradients */
  --cyan:       #28D3FF;   /* logo cyan — accent */
  --cyan-deep:  #17ABCF;   /* logo secondary cyan — hover */
  --ink:        #14142B;   /* body text */
  --muted:      #55556E;   /* secondary text */
  --tint:       #EFEFF8;   /* lavender surface */
  --tint-line:  #DCDCEE;   /* hairlines on tint */
  --white:      #FFFFFF;

  --wrap: 1200px;
  --radius: 14px;
  --radius-lg: 22px;

  --shadow-sm: 0 1px 2px rgba(9,0,141,.06), 0 4px 14px rgba(9,0,141,.05);
  --shadow-md: 0 2px 6px rgba(9,0,141,.08), 0 18px 40px rgba(9,0,141,.10);

  --ease: cubic-bezier(.22,.61,.36,1);
}

/* ---------- reset ---------- */
*,*::before,*::after{ box-sizing:border-box; }
html{ -webkit-text-size-adjust:100%; scroll-behavior:smooth; scroll-padding-top:90px; }
body{
  margin:0;
  font-family:"Noto Sans", "Helvetica Neue", Arial, sans-serif;
  font-size:17px;
  line-height:1.7;
  color:var(--ink);
  background:var(--white);
  -webkit-font-smoothing:antialiased;
  text-rendering:optimizeLegibility;
}
img{ max-width:100%; height:auto; display:block; }
svg{ display:block; }
a{ color:inherit; }
h1,h2,h3{ margin:0; line-height:1.12; letter-spacing:-.025em; font-weight:800; }
p{ margin:0 0 1.1em; }
p:last-child{ margin-bottom:0; }
ul,ol{ margin:0; padding:0; list-style:none; }
button,input,textarea{ font:inherit; color:inherit; }

.wrap{ width:100%; max-width:var(--wrap); margin-inline:auto; padding-inline:24px; }

.skip-link{
  position:absolute; left:-9999px; top:0; z-index:200;
  background:var(--cyan); color:var(--blue); font-weight:700;
  padding:12px 20px; border-radius:0 0 var(--radius) 0;
}
.skip-link:focus{ left:0; }

:focus-visible{ outline:3px solid var(--cyan); outline-offset:3px; border-radius:4px; }

/* ---------- shared type roles ---------- */

/* utility face: wide-tracked, uppercase, small */
.eyebrow{
  margin:0 0 22px;
  font-size:.75rem;
  font-weight:700;
  letter-spacing:.16em;
  text-transform:uppercase;
  color:var(--cyan);
  line-height:1.5;
}
.eyebrow-dark{ color:var(--blue); }

/* the logo sets "my" in italic cyan — that becomes the emphasis
   treatment for every headline on the site */
h1 em, h2 em, h3 em{
  font-style:italic;
  color:var(--cyan);
  font-weight:800;
}
.section-title em, .value-head em, .cta em{ color:var(--cyan-deep); }

.lede{ font-size:1.075rem; line-height:1.75; }

/* ---------- buttons ---------- */
.btn{
  display:inline-flex; align-items:center; justify-content:center;
  gap:8px;
  padding:15px 28px;
  border:2px solid transparent;
  border-radius:999px;
  font-weight:700;
  font-size:.98rem;
  letter-spacing:-.005em;
  text-decoration:none;
  cursor:pointer;
  transition:transform .18s var(--ease), background-color .18s var(--ease),
             color .18s var(--ease), border-color .18s var(--ease), box-shadow .18s var(--ease);
}
.btn:hover{ transform:translateY(-2px); }
.btn:active{ transform:translateY(0); }

.btn-accent{ background:var(--cyan); color:#00224A; box-shadow:0 8px 22px rgba(40,211,255,.28); }
.btn-accent:hover{ background:#5FE0FF; }

.btn-primary{ background:var(--blue); color:var(--white); box-shadow:0 8px 22px rgba(9,0,141,.22); }
.btn-primary:hover{ background:#1409A8; }

.btn-ghost{ background:transparent; color:var(--white); border-color:rgba(255,255,255,.4); }
.btn-ghost:hover{ border-color:var(--cyan); color:var(--cyan); }

/* e-Πληρωμή: filled in the palette's lifted blue, one step off the header's
   own --blue. That tonal gap alone is only ~1.3:1, so the shape does the rest
   of the work — a squared corner among otherwise pill-shaped buttons reads as
   "different" instantly — and a hairline border pins the edge down. Stays
   quieter than the solid cyan "Κλείστε Ραντεβού", which is the primary CTA. */
.btn-epay{
  background:var(--blue-soft);
  color:var(--white);
  border-color:rgba(255,255,255,.32);
  border-radius:9px;
  box-shadow:0 4px 14px rgba(5,0,63,.28);
}
.btn-epay:hover{ background:#2A1FD6; border-color:rgba(255,255,255,.6); }

.btn-sm{ padding:10px 20px; font-size:.9rem; }
.btn-block{ width:100%; }
.btn svg{ width:17px; height:17px; flex-shrink:0; }

.btn-row{ display:flex; flex-wrap:wrap; gap:14px; margin-top:32px; }
.btn-row.center{ justify-content:center; }

/* ============================================================
   HEADER — navy, so the logo's own navy background sits flush
   ============================================================ */
.site-header{
  position:sticky; top:0; z-index:100;
  background:var(--blue);
  border-bottom:1px solid rgba(255,255,255,.10);
}
/* The header bar is full-bleed, so its inner row does not have to obey the
   1200px content wrap — and it can't: six links plus two buttons need ~1034px,
   while a 1200px wrap leaves the nav only 956px after the logo and gap. Widening
   just this row is what stops the last items wrapping to a second line.
   Trade-off: on screens wider than 1320px the logo sits slightly outside the
   body text column. If the nav grows again, move a link to the footer rather
   than widening this further. */
.header-inner{
  display:flex; align-items:center; justify-content:space-between;
  gap:24px; min-height:78px;
  max-width:1320px;
}

.brand{ display:block; flex-shrink:0; }
.brand img{ width:172px; height:auto; }

/* Six links plus two CTAs. The header sits inside .wrap (max-width 1200), so
   the nav never gets more than ~956px no matter how wide the screen — at the
   original 30px gap the last items wrapped onto a second line. Keep this tight
   if you add nav items, or move one into the footer instead. */
.nav{ display:flex; align-items:center; gap:14px; }

/* the two header buttons carry tighter side padding than .btn-sm elsewhere;
   without it "e-Πληρωμή" + "Κλείστε Ραντεβού" overflow the 956px the nav gets */
.nav .btn-sm{ padding-inline:16px; }
.nav .nav-pay{ color:var(--white); }
.nav a{
  color:rgba(255,255,255,.88);
  text-decoration:none;
  font-size:.95rem;
  font-weight:600;
  position:relative;
  padding:6px 0;
  transition:color .18s var(--ease);
  /* flex items shrink by default, and these would rather break "Online
     Ραντεβού" across two lines than overflow — which silently made the whole
     header two rows tall. Hold them on one line instead. */
  white-space:nowrap;
  flex-shrink:0;
}
.nav a:not(.btn)::after{
  content:""; position:absolute; left:0; right:0; bottom:0; height:2px;
  background:var(--cyan); transform:scaleX(0); transform-origin:left;
  transition:transform .25s var(--ease);
}
.nav a:not(.btn):hover{ color:var(--cyan); }
.nav a:not(.btn):hover::after{ transform:scaleX(1); }
.nav .nav-cta{ color:#00224A; }

/* ---------- dropdown ----------
   Opens on hover AND on focus-within, so it is reachable by keyboard without
   any JS. The parent link still navigates to the index page on click, which
   is what touch devices get (they never fire hover). */
.has-sub{ position:relative; }
.has-sub > a{ display:inline-flex; align-items:center; gap:6px; }
.sub-caret{
  width:11px; height:11px; flex-shrink:0;
  transition:transform .22s var(--ease);
}
.has-sub:hover .sub-caret,
.has-sub:focus-within .sub-caret{ transform:rotate(180deg); }

/* invisible bridge across the gap, or the menu closes as the pointer
   travels from the link down to the panel */
.has-sub::after{
  content:"";
  position:absolute; top:100%; left:0; right:0; height:16px;
}

.submenu{
  position:absolute;
  top:calc(100% + 14px); left:50%;
  transform:translateX(-50%) translateY(-6px);
  z-index:120;
  display:grid;
  grid-template-columns:repeat(2, minmax(230px, 1fr));
  gap:2px 10px;
  padding:16px;
  background:var(--white);
  border-radius:var(--radius-lg);
  box-shadow:0 4px 12px rgba(5,0,63,.10), 0 24px 60px rgba(5,0,63,.26);
  opacity:0; visibility:hidden; pointer-events:none;
  transition:opacity .2s var(--ease), transform .2s var(--ease), visibility .2s;
}
.has-sub:hover .submenu,
.has-sub:focus-within .submenu{
  opacity:1; visibility:visible; pointer-events:auto;
  transform:translateX(-50%) translateY(0);
}
.has-sub.is-closed .submenu{
  opacity:0; visibility:hidden; pointer-events:none;
}

/* little pointer up at the parent link */
.submenu::before{
  content:"";
  position:absolute; bottom:100%; left:50%;
  transform:translateX(-50%);
  border:8px solid transparent;
  border-bottom-color:var(--white);
}

.nav .submenu a{
  display:block;
  padding:10px 14px;
  border-radius:9px;
  font-size:.9rem;
  font-weight:600;
  line-height:1.35;
  color:var(--blue);
  transition:background-color .16s var(--ease), color .16s var(--ease);
}
.nav .submenu a::after{ display:none; }
.nav .submenu a:hover,
.nav .submenu a:focus-visible{ background:var(--tint); color:var(--cyan-deep); }

.submenu .submenu-all{
  grid-column:1 / -1;
  margin-top:8px;
  padding-top:14px;
  border-top:1px solid var(--tint-line);
}
.nav .submenu .submenu-all a{ color:var(--cyan-deep); }

/* flex, not grid: grid rows would stretch to fill the 46px button and
   push the bars apart, breaking the X offsets below */
.nav-toggle{
  display:none;
  flex-direction:column;
  align-items:center;
  justify-content:center;
  width:46px; height:46px;
  background:transparent; border:1px solid rgba(255,255,255,.28);
  border-radius:10px; cursor:pointer;
  padding:0;
}
.nav-toggle{ transition:background-color .2s var(--ease), border-color .2s var(--ease), transform .12s var(--ease); }
/* a real press response — on touch there is no hover to confirm the tap landed */
.nav-toggle:active{ transform:scale(.92); }
.nav-toggle[aria-expanded="true"]{ background:rgba(255,255,255,.10); border-color:rgba(255,255,255,.5); }
.nav-toggle span{ display:block; width:20px; height:2px; background:var(--white); margin:4px auto; transition:transform .28s var(--ease), opacity .18s var(--ease); }
/* bars sit 10px apart (2px tall + 4px margin each side), so the
   collapse offset has to match that exactly or the X reads as a ">" */
.nav-toggle[aria-expanded="true"] span:nth-child(1){ transform:translateY(10px) rotate(45deg); }
.nav-toggle[aria-expanded="true"] span:nth-child(2){ opacity:0; }
.nav-toggle[aria-expanded="true"] span:nth-child(3){ transform:translateY(-10px) rotate(-45deg); }

/* ============================================================
   HERO
   ============================================================ */
/* The hero photograph carries the whole band. Its composition does the
   layout work for us: the abstract half sits left (under the headline),
   the subject sits right (behind the plain-words panel), so anchoring the
   crop to the right edge keeps the person in frame at every width while
   the copy lands on quiet pixels. The blue veils on top are what keep the
   brand colour — and AA text contrast — intact over a light photo. */
.hero{
  position:relative;
  isolation:isolate;
  background:var(--blue);
  color:var(--white);
  padding:clamp(64px,8vw,110px) 0 clamp(72px,9vw,120px);
  overflow:hidden;
}
.hero::before{
  content:"";
  position:absolute; inset:0; z-index:-2;
  background:url("../hero.jpg") right center / cover no-repeat;
}
.hero::after{
  content:"";
  position:absolute; inset:0; z-index:-1;
  background:
    /* cyan lift, kept from the original gradient so the accent still reads */
    radial-gradient(900px 480px at 88% -10%, rgba(40,211,255,.22), transparent 62%),
    /* horizontal scrim: solid brand blue under the copy, opening up to the
       photo on the right where the handshake and the desk are worth seeing.
       The panel that sits over the open end carries its own backdrop (see
       .plainwords), so this can stay light enough for the photo to read. */
    linear-gradient(100deg,
      rgba(9,0,141,.94)  0%,
      rgba(9,0,141,.88) 24%,
      rgba(9,0,141,.66) 44%,
      rgba(9,0,141,.34) 68%,
      rgba(9,0,141,.20) 100%),
    /* flat veil so no part of the photo blows out to white */
    linear-gradient(rgba(9,0,141,.20), rgba(5,0,63,.34));
}
.hero-grid{
  display:grid;
  grid-template-columns:1.15fr .85fr;
  gap:clamp(40px,5vw,72px);
  align-items:center;
}
.hero h1{
  font-size:clamp(2.5rem,6.2vw,4.4rem);
  letter-spacing:-.035em;
  margin-bottom:26px;
}
.hero .lede{ color:rgba(255,255,255,.84); max-width:56ch; }
.hero .lede + .lede{ margin-top:-.2em; }

/* ---------- signature: the plain-words panel ---------- */
/* This panel now floats over the hero photograph rather than flat colour,
   so it carries a real navy backdrop instead of a 5% white wash — that is
   what keeps its text at AA no matter which part of the photo lands behind
   it, and it lets the scrim above stay light. */
.plainwords{
  background:rgba(9,0,141,.58);
  border:1px solid rgba(255,255,255,.22);
  border-radius:var(--radius-lg);
  padding:clamp(26px,3vw,38px);
  backdrop-filter:blur(14px) saturate(120%);
  -webkit-backdrop-filter:blur(14px) saturate(120%);
  box-shadow:0 18px 50px rgba(5,0,63,.30);
}
.pw-label{
  margin:0 0 22px;
  font-size:.72rem; font-weight:700;
  letter-spacing:.16em; text-transform:uppercase;
  color:var(--cyan);
}
.pw-list{ display:flex; flex-direction:column; gap:2px; }
.pw-list li{
  position:relative;
  padding:11px 0 11px 20px;
  font-size:1.06rem;
  line-height:1.45;
  color:rgba(255,255,255,.62); /* 6.0:1 on --blue; .5 fell under AA */
  transition:color .45s var(--ease);
}
.pw-list li::before{
  content:""; position:absolute; left:0; top:50%; transform:translateY(-50%);
  width:3px; height:0; background:var(--cyan); border-radius:2px;
  transition:height .45s var(--ease);
}
.pw-list li.is-active{ color:var(--white); font-style:italic; font-weight:600; }
.pw-list li.is-active::before{ height:72%; }

.pw-answer{
  margin:26px 0 0;
  padding-top:22px;
  border-top:1px solid rgba(255,255,255,.16);
  font-size:.98rem;
  font-weight:600;
  color:var(--cyan);
  display:flex; gap:10px; align-items:flex-start;
}
.pw-arrow{ width:18px; height:18px; flex-shrink:0; margin-top:3px; }

/* ============================================================
   SECTIONS
   ============================================================ */
.section{ padding:clamp(72px,9vw,126px) 0; }
.section-tint{ background:var(--tint); }
.section-dark{
  background:
    radial-gradient(760px 420px at 92% 8%, rgba(40,211,255,.16), transparent 60%),
    var(--blue);
  color:var(--white);
}
.section-dark .lede{ color:rgba(255,255,255,.82); }

/* ---------- dark section with a photograph behind it ----------
   Same idea as .page-hero--photo: picture underneath, blue scrim over it,
   densest on the left where the copy sits. Add the class alongside
   .section-dark and point --dark-img at the artwork:

     <section class="section section-dark section-dark--photo" id="online">

   The artwork is mirrored so the subject sits in the open right-hand third,
   behind the frosted steps panel, instead of under the headline where the
   scrim would bury her. Nothing in the frame contains text, so the flip
   costs nothing. */
.section-dark--photo{
  position:relative;
  isolation:isolate;
  overflow:hidden;

  --dark-img: url("../online-bg.webp");
  --dark-pos: center 42%;
}
.section-dark--photo::before{
  content:"";
  position:absolute; inset:0; z-index:-2;
  background:var(--dark-img) var(--dark-pos) / cover no-repeat;
  transform:scaleX(-1);
}
.section-dark--photo::after{
  content:"";
  position:absolute; inset:0; z-index:-1;
  background:
    linear-gradient(100deg,
      rgba(9,0,141,.94)  0%,
      rgba(9,0,141,.88) 30%,
      rgba(9,0,141,.62) 55%,
      rgba(9,0,141,.38) 100%),
    linear-gradient(rgba(9,0,141,.24), rgba(5,0,63,.36));
}

/* the steps panel stops being a 5% white wash and becomes a real glass card,
   the same fix the hero's plain-words panel needed once a photo went behind it */
.section-dark--photo .steps-online{
  background:rgba(9,0,141,.55);
  border-color:rgba(255,255,255,.22);
  backdrop-filter:blur(14px) saturate(120%);
  -webkit-backdrop-filter:blur(14px) saturate(120%);
  box-shadow:0 18px 50px rgba(5,0,63,.30);
}

.section-title{
  font-size:clamp(2rem,4vw,3rem);
  margin-bottom:52px;
  max-width:20ch;
}
.section-title.center{ margin-inline:auto; text-align:center; max-width:24ch; }

/* ---------- value / audience blocks ---------- */
.value-grid{
  display:grid;
  grid-template-columns:1fr 1fr;
  gap:clamp(32px,5vw,72px);
  align-items:start;
}
.value-head{ font-size:clamp(1.9rem,3.8vw,2.9rem); }
.value-body{ color:var(--muted); font-size:1.06rem; }

.pillars{
  display:flex; flex-wrap:wrap; gap:12px;
  margin-top:clamp(36px,4vw,52px);
  padding-top:clamp(30px,3.5vw,42px);
  border-top:1px solid var(--tint-line);
}
.pillars li{
  padding:10px 20px;
  border:1px solid var(--blue);
  border-radius:999px;
  font-size:.92rem;
  font-weight:700;
  color:var(--blue);
}

/* ---------- service cards ---------- */
.cards{
  display:grid;
  grid-template-columns:repeat(auto-fit,minmax(290px,1fr));
  gap:20px;
}
.card{
  display:flex;
  flex-direction:column;
  background:var(--white);
  border:1px solid var(--tint-line);
  border-radius:var(--radius);
  padding:30px 28px 32px;
  box-shadow:var(--shadow-sm);
  transition:transform .22s var(--ease), box-shadow .22s var(--ease), border-color .22s var(--ease);
}

/* Everyday payments are quick errands rather than case files, so this
   one runs full width with its items on a single line. */
.card-wide{ grid-column:1 / -1; }
.card-wide ul{ display:flex; flex-wrap:wrap; gap:10px 40px; }
.card-wide ul li{ margin-bottom:0; }
.card:hover{ transform:translateY(-4px); box-shadow:var(--shadow-md); border-color:var(--cyan); }

.card-icon{
  display:grid; place-items:center;
  width:46px; height:46px;
  border-radius:12px;
  background:var(--blue);
  color:var(--cyan);
  margin-bottom:20px;
}
.card-icon svg{ width:23px; height:23px; }

.card h3{
  font-size:1.16rem;
  margin-bottom:16px;
  color:var(--blue);
  letter-spacing:-.02em;
  line-height:1.28;
}
.card ul li{
  position:relative;
  padding-left:20px;
  font-size:.955rem;
  line-height:1.55;
  color:var(--muted);
  margin-bottom:9px;
}
.card ul li:last-child{ margin-bottom:0; }
.card ul li::before{
  content:""; position:absolute; left:2px; top:.62em;
  width:6px; height:6px; border-radius:50%; background:var(--cyan-deep);
}

/* ---------- "can't find it" strip ---------- */
.notfound{
  display:flex; align-items:center; justify-content:space-between;
  flex-wrap:wrap; gap:28px;
  margin-top:clamp(36px,4vw,52px);
  padding:clamp(30px,3.5vw,44px);
  background:var(--white);
  border:1px dashed var(--blue);
  border-radius:var(--radius-lg);
}
.notfound h3{ font-size:1.4rem; color:var(--blue); margin-bottom:10px; }
.notfound p{ color:var(--muted); max-width:62ch; margin:0; }
.notfound .btn{ flex-shrink:0; }

/* ---------- online section ---------- */
.online-grid{
  display:grid;
  grid-template-columns:1.05fr .95fr;
  gap:clamp(40px,5vw,80px);
  align-items:center;
}
.online-copy h2{ font-size:clamp(1.9rem,3.8vw,2.9rem); margin-bottom:24px; }
/* practical footnote: sets expectations before the visitor clicks through to
   the booking tool, where the timezone and "no app needed" facts matter */
.online-note{
  margin-top:22px;
  padding-top:20px;
  border-top:1px solid rgba(255,255,255,.16);
  font-size:.95rem;
  color:rgba(255,255,255,.72);
}

/* numbered lists are used only where order genuinely carries meaning */
.steps-online{
  display:flex; flex-direction:column; gap:2px;
  background:rgba(255,255,255,.05);
  border:1px solid rgba(255,255,255,.16);
  border-radius:var(--radius-lg);
  padding:14px;
}
.steps-online li{
  display:flex; align-items:center; gap:18px;
  padding:18px 16px;
  border-radius:12px;
  transition:background-color .2s var(--ease);
}
.steps-online li:hover{ background:rgba(255,255,255,.06); }
.steps-online li + li{ border-top:1px solid rgba(255,255,255,.10); }
.steps-online .step-n{
  flex-shrink:0;
  width:38px; height:38px;
  display:grid; place-items:center;
  border-radius:50%;
  background:var(--cyan);
  color:#00224A;
  font-weight:800; font-size:1rem;
}
.steps-online p{ margin:0; font-size:1.02rem; font-weight:600; }

/* ---------- process ---------- */
.steps-process{
  display:grid;
  grid-template-columns:repeat(auto-fit,minmax(280px,1fr));
  gap:clamp(24px,3vw,40px);
  counter-reset:none;
}
.steps-process li{
  padding-top:26px;
  border-top:3px solid var(--tint-line);
  transition:border-color .25s var(--ease);
}
.steps-process li:hover{ border-top-color:var(--cyan); }
.steps-process .step-n{
  display:block;
  font-size:3.2rem;
  font-weight:800;
  line-height:1;
  letter-spacing:-.05em;
  color:var(--cyan-deep);
  margin-bottom:16px;
}
.steps-process h3{ font-size:1.3rem; color:var(--blue); margin-bottom:12px; }
.steps-process p{ color:var(--muted); margin:0; }

/* ---------- CTA band ---------- */
.cta{
  background:
    radial-gradient(700px 380px at 50% 120%, rgba(40,211,255,.22), transparent 62%),
    var(--blue);
  color:var(--white);
  padding:clamp(72px,8vw,110px) 0;
  text-align:center;
}
.cta-inner{ max-width:900px; }
.cta h2{ font-size:clamp(1.9rem,4vw,3rem); margin-bottom:22px; }
.cta em{ color:var(--cyan); }
.cta p{ color:rgba(255,255,255,.84); font-size:1.075rem; }

/* ---------- contact ---------- */
.contact-grid{
  display:grid;
  grid-template-columns:.9fr 1.1fr;
  gap:clamp(32px,4vw,64px);
  align-items:start;
}
.contact-details dl{ margin:0; }
.contact-details dl > div{
  padding:16px 0;
  border-bottom:1px solid var(--tint-line);
  display:grid;
  grid-template-columns:120px 1fr;
  gap:16px;
  align-items:baseline;
}
.contact-details dl > div:first-child{ border-top:1px solid var(--tint-line); }
.contact-details dt{
  font-size:.72rem; font-weight:700;
  letter-spacing:.14em; text-transform:uppercase;
  color:var(--muted);
}
.contact-details dd{ margin:0; font-size:1.08rem; font-weight:700; color:var(--blue); }
.contact-details dd a{ text-decoration:none; border-bottom:2px solid transparent; transition:border-color .18s var(--ease); }
.contact-details dd a:hover{ border-bottom-color:var(--cyan); }
.contact-note{ margin-top:24px; color:var(--muted); }

.contact-form{
  background:var(--tint);
  border:1px solid var(--tint-line);
  border-radius:var(--radius-lg);
  padding:clamp(26px,3vw,40px);
}
.contact-form h3{ font-size:1.35rem; color:var(--blue); margin-bottom:24px; }
.field{ margin-bottom:18px; }
.field-row{ display:grid; grid-template-columns:1fr 1fr; gap:18px; }
.field label{
  display:block;
  font-size:.8rem; font-weight:700;
  letter-spacing:.04em;
  margin-bottom:7px;
  color:var(--ink);
}
.field input, .field textarea{
  width:100%;
  padding:13px 15px;
  background:var(--white);
  border:1px solid var(--tint-line);
  border-radius:10px;
  font-size:1rem;
  transition:border-color .18s var(--ease), box-shadow .18s var(--ease);
}
.field input:focus, .field textarea:focus{
  outline:none;
  border-color:var(--blue);
  box-shadow:0 0 0 3px rgba(40,211,255,.35);
}
.field textarea{ resize:vertical; min-height:110px; }
.field input[aria-invalid="true"], .field textarea[aria-invalid="true"]{ border-color:#D63637; }
.form-status{ margin:14px 0 0; font-size:.92rem; font-weight:600; min-height:1.4em; }
.form-status.is-error{ color:#D63637; }
.form-status.is-ok{ color:#0B7A3B; }

/* ============================================================
   LEGAL / CONTENT PAGES
   ============================================================ */
.page-head{
  background:
    radial-gradient(700px 360px at 85% -20%, rgba(40,211,255,.18), transparent 62%),
    var(--blue);
  color:var(--white);
  padding:clamp(56px,7vw,90px) 0 clamp(48px,6vw,72px);
}
.page-head h1{ font-size:clamp(2rem,4.4vw,3.1rem); }
.page-head .updated{ margin:18px 0 0; color:rgba(255,255,255,.7); font-size:.92rem; }

.prose{ max-width:760px; }
.prose h2{
  font-size:1.45rem; color:var(--blue);
  margin:48px 0 14px;
}
.prose h2:first-child{ margin-top:0; }
.prose h3{ font-size:1.1rem; color:var(--ink); margin:28px 0 10px; }
.prose p{ color:var(--muted); }
.prose a{ color:var(--blue); font-weight:600; }
.prose ul{ margin:0 0 1.1em; }
.prose ul li{
  position:relative; padding-left:22px; margin-bottom:9px; color:var(--muted);
}
.prose ul li::before{
  content:""; position:absolute; left:3px; top:.65em;
  width:6px; height:6px; border-radius:50%; background:var(--cyan-deep);
}
.prose .callout{
  margin:36px 0 0;
  padding:22px 26px;
  background:var(--tint);
  border-left:3px solid var(--cyan-deep);
  border-radius:0 var(--radius) var(--radius) 0;
  font-size:.95rem;
}
.prose table{
  width:100%; border-collapse:collapse; margin:0 0 1.2em; font-size:.94rem;
}
.prose th, .prose td{
  text-align:left; padding:12px 14px; border-bottom:1px solid var(--tint-line); vertical-align:top;
}
.prose th{ color:var(--blue); font-weight:700; }
.prose td{ color:var(--muted); }
.table-scroll{ overflow-x:auto; }

/* ============================================================
   FOOTER
   ============================================================ */
.site-footer{ background:var(--blue); color:rgba(255,255,255,.78); padding-top:clamp(56px,6vw,80px); }
.footer-grid{
  display:grid;
  grid-template-columns:1.5fr 1fr 1fr;
  gap:clamp(32px,4vw,60px);
  padding-bottom:48px;
}
.footer-brand img{ width:190px; margin-bottom:20px; }
.footer-brand p{ font-size:.96rem; line-height:1.65; }
.social{
  display:grid; place-items:center;
  width:42px; height:42px;
  margin-top:20px;
  border:1px solid rgba(255,255,255,.28);
  border-radius:50%;
  color:var(--white);
  transition:background-color .2s var(--ease), border-color .2s var(--ease), color .2s var(--ease);
}
.social:hover{ background:var(--cyan); border-color:var(--cyan); color:var(--blue); }
.social svg{ width:19px; height:19px; }

.footer-title{
  font-size:.72rem; font-weight:700;
  letter-spacing:.16em; text-transform:uppercase;
  color:var(--cyan);
  margin-bottom:18px;
}
.footer-nav, .footer-contact{ display:flex; flex-direction:column; gap:11px; align-items:flex-start; }
.footer-nav a, .footer-contact a{
  text-decoration:none; font-size:.96rem;
  transition:color .18s var(--ease);
}
.footer-nav a:hover, .footer-contact a:hover{ color:var(--cyan); }

.footer-bottom{
  display:flex; flex-wrap:wrap; gap:14px;
  align-items:center; justify-content:space-between;
  padding-top:24px; padding-bottom:28px;
  border-top:1px solid rgba(255,255,255,.14);
  font-size:.87rem;
}
.footer-bottom p{ margin:0; }
.footer-legal{ display:flex; gap:22px; }
.footer-legal a{ text-decoration:none; }
.footer-legal a:hover{ color:var(--cyan); }

/* ============================================================
   SUB-PAGE HEADER — the photo stays exclusive to the homepage, so
   inner pages get the same blue band in a shorter, quieter form
   ============================================================ */
.page-hero{
  background:
    radial-gradient(820px 420px at 90% -20%, rgba(40,211,255,.20), transparent 62%),
    radial-gradient(640px 380px at 2% 120%, rgba(30,20,180,.55), transparent 60%),
    var(--blue);
  color:var(--white);
  padding:clamp(44px,5.5vw,72px) 0 clamp(52px,6.5vw,84px);
}
/* ---------- photo variant ----------
   Shared skeleton; each page supplies its own picture through --hero-img and,
   where the artwork needs it, its own scrim through --hero-scrim. The scrim is
   always densest on the left, under the breadcrumb / H1 / lede, and opens up
   on the right where the picture is worth seeing.

   How dense it has to be depends entirely on the photograph: a dark subject
   tolerates a light wash, a near-white one does not. Hence the two scrims
   below rather than one shared value. */
.page-hero--photo{
  position:relative;
  isolation:isolate;
  overflow:hidden;

  --hero-pos: center 22%;
  --hero-scrim:
    linear-gradient(100deg,
      rgba(9,0,141,.90)  0%,
      rgba(9,0,141,.82) 26%,
      rgba(9,0,141,.55) 46%,
      rgba(9,0,141,.26) 66%,
      rgba(9,0,141,.12) 100%),
    linear-gradient(rgba(9,0,141,.16), rgba(5,0,63,.28));
}
.page-hero--photo::before{
  content:"";
  position:absolute; inset:0; z-index:-2;
  background:var(--hero-img) var(--hero-pos) / cover no-repeat;
}
.page-hero--photo::after{
  content:"";
  position:absolute; inset:0; z-index:-1;
  background:var(--hero-scrim);
}

/* Υπηρεσίες — dark suit and navy chair, so the light default scrim holds. */
.page-hero--services{ --hero-img:url("../hero-ypiresies.jpg"); }

/* Ενημερώσεις — the report sheet is close to white, which would swallow white
   text, so this scrim stays dense until well past where the lede ends. */
.page-hero--news{
  --hero-img:url("../hero-enimeroseis.jpg");
  --hero-pos: center 46%;
  --hero-scrim:
    linear-gradient(100deg,
      rgba(9,0,141,.95)  0%,
      rgba(9,0,141,.92) 30%,
      rgba(9,0,141,.78) 52%,
      rgba(9,0,141,.48) 72%,
      rgba(9,0,141,.30) 100%),
    linear-gradient(rgba(9,0,141,.22), rgba(5,0,63,.34));
}

.page-hero h1{
  font-size:clamp(2.1rem,4.6vw,3.4rem);
  letter-spacing:-.03em;
  margin-bottom:20px;
  max-width:20ch;
}
.page-hero .lede{ color:rgba(255,255,255,.84); max-width:62ch; }

.crumbs{
  display:flex; flex-wrap:wrap; align-items:center; gap:8px;
  margin-bottom:26px;
  font-size:.85rem;
  color:rgba(255,255,255,.62);
}
.crumbs a{ color:rgba(255,255,255,.82); text-decoration:none; }
.crumbs a:hover{ color:var(--cyan); }
.crumbs span[aria-hidden]{ opacity:.5; }
.crumbs [aria-current]{ color:var(--cyan); font-weight:600; }

/* ============================================================
   SERVICE DETAIL
   ============================================================ */
.detail-grid{
  display:grid;
  grid-template-columns:1fr 340px;
  gap:clamp(36px,5vw,68px);
  align-items:start;
}
.detail-body h2{
  font-size:clamp(1.5rem,2.6vw,2rem);
  color:var(--blue);
  margin-bottom:18px;
}
.detail-body h2:not(:first-child){ margin-top:clamp(40px,4.5vw,58px); }
.detail-body p{ color:var(--muted); font-size:1.06rem; }

/* the ticked list is the page's workhorse: what we handle, what you bring */
.checklist{ display:grid; gap:12px; margin-top:8px; }
.checklist li{
  position:relative;
  padding:2px 0 2px 34px;
  font-size:1.02rem;
  line-height:1.55;
}
.checklist li::before{
  content:"";
  position:absolute; left:0; top:.28em;
  width:20px; height:20px; border-radius:50%;
  background:var(--blue);
}
.checklist li::after{
  content:"";
  position:absolute; left:6px; top:.62em;
  width:8px; height:4px;
  border-left:2px solid var(--cyan);
  border-bottom:2px solid var(--cyan);
  transform:rotate(-45deg);
}

/* ---------- sticky helper rail ---------- */
.detail-aside{ position:sticky; top:100px; display:grid; gap:18px; }
.aside-card{
  background:var(--white);
  border:1px solid var(--tint-line);
  border-radius:var(--radius-lg);
  padding:28px 26px;
  box-shadow:var(--shadow-sm);
}
.aside-card.is-blue{
  background:var(--blue);
  border-color:transparent;
  color:var(--white);
}
.aside-card h3{ font-size:1.1rem; color:var(--blue); margin-bottom:12px; }
.aside-card.is-blue h3{ color:var(--white); }
.aside-card p{ font-size:.97rem; color:var(--muted); margin-bottom:18px; }
.aside-card.is-blue p{ color:rgba(255,255,255,.8); }
.aside-card .btn{ width:100%; }
.aside-card .btn + .btn{ margin-top:10px; }
.aside-contact{ display:grid; gap:10px; margin-top:4px; font-size:.97rem; }
.aside-contact a{ text-decoration:none; font-weight:600; color:var(--blue); }
.aside-contact a:hover{ color:var(--cyan-deep); }

/* ---------- related services ---------- */
.related{ display:flex; flex-wrap:wrap; gap:10px; margin-top:22px; }
.related a{
  padding:10px 18px;
  border:1px solid var(--tint-line);
  border-radius:999px;
  background:var(--white);
  font-size:.92rem; font-weight:600;
  color:var(--blue);
  text-decoration:none;
  transition:border-color .18s var(--ease), color .18s var(--ease);
}
.related a:hover{ border-color:var(--cyan); color:var(--cyan-deep); }

/* ============================================================
   LINKED CARDS — the service grid now leads somewhere
   ============================================================ */
.card-link{ text-decoration:none; color:inherit; }
.card-more{
  display:inline-flex; align-items:center; gap:8px;
  margin-top:auto; padding-top:20px;
  font-size:.92rem; font-weight:700;
  color:var(--blue);
}
.card-more svg{ width:16px; height:16px; transition:transform .22s var(--ease); }
.card-link:hover .card-more{ color:var(--cyan-deep); }
.card-link:hover .card-more svg{ transform:translateX(4px); }

/* ============================================================
   ΕΝΗΜΕΡΩΣΕΙΣ — announcements list
   ============================================================ */
.posts{ display:grid; gap:18px; }
.post{
  display:grid;
  grid-template-columns:150px 1fr;
  gap:clamp(18px,3vw,38px);
  align-items:start;
  padding:clamp(26px,3vw,34px);
  background:var(--white);
  border:1px solid var(--tint-line);
  border-radius:var(--radius);
  box-shadow:var(--shadow-sm);
  transition:border-color .22s var(--ease), box-shadow .22s var(--ease);
}
.post:hover{ border-color:var(--cyan); box-shadow:var(--shadow-md); }
.post-meta{ display:grid; gap:10px; }
.post-date{
  font-size:.82rem; font-weight:700;
  letter-spacing:.1em; text-transform:uppercase;
  color:var(--muted);
}
.post-tag{
  justify-self:start;
  padding:5px 13px;
  border-radius:999px;
  background:var(--tint);
  border:1px solid var(--tint-line);
  font-size:.78rem; font-weight:700;
  color:var(--blue);
}
.post h3{ font-size:1.25rem; color:var(--blue); margin-bottom:12px; }
.post p{ color:var(--muted); margin-bottom:16px; }
.post .post-link{
  display:inline-flex; align-items:center; gap:8px;
  font-size:.93rem; font-weight:700;
  color:var(--blue); text-decoration:none;
}
.post .post-link svg{ width:16px; height:16px; transition:transform .22s var(--ease); }
.post .post-link:hover{ color:var(--cyan-deep); }
.post .post-link:hover svg{ transform:translateX(4px); }

/* homepage teaser strip */
.news-head{
  display:flex; flex-wrap:wrap; gap:20px;
  align-items:flex-end; justify-content:space-between;
  margin-bottom:40px;
}
.news-head .section-title{ margin-bottom:0; }

/* ============================================================
   ΣΥΧΝΕΣ ΕΡΩΤΗΣΕΙΣ
   Native <details>, so the answers exist in the DOM whether open or shut —
   which matters here: crawlers and AI assistants read the answer text either
   way, and it still works with JS off.
   ============================================================ */
.faq{ display:grid; gap:12px; max-width:80ch; }
.faq details{
  background:var(--white);
  border:1px solid var(--tint-line);
  border-radius:var(--radius);
  box-shadow:var(--shadow-sm);
  transition:border-color .2s var(--ease);
}
.faq details[open]{ border-color:var(--cyan); }
.faq summary{
  display:flex; align-items:flex-start; gap:14px;
  padding:20px 24px;
  cursor:pointer;
  font-weight:700;
  font-size:1.04rem;
  line-height:1.45;
  color:var(--blue);
  list-style:none;
}
.faq summary::-webkit-details-marker{ display:none; }
.faq summary::after{
  content:"";
  flex-shrink:0;
  width:11px; height:11px;
  margin-top:6px; margin-left:auto;
  border-right:2.5px solid var(--cyan-deep);
  border-bottom:2.5px solid var(--cyan-deep);
  transform:rotate(45deg);
  transition:transform .22s var(--ease);
}
.faq details[open] summary::after{ transform:rotate(-135deg); margin-top:10px; }
.faq summary:focus-visible{ outline:3px solid var(--cyan); outline-offset:2px; }
.faq-a{
  padding:0 24px 22px;
  color:var(--muted);
  font-size:1rem;
  line-height:1.7;
}
.faq-a p{ margin:0 0 .9em; }
.faq-a p:last-child{ margin-bottom:0; }
.faq-a a{ color:var(--blue); font-weight:600; }

/* ============================================================
   ΑΞΙΟΛΟΓΗΣΕΙΣ
   No Review/AggregateRating JSON-LD here on purpose: reviews of your own
   business on your own site are "self-serving" and make the page ineligible
   for Google's star rich results, so the markup buys nothing and carries
   manual-action risk. The stars users see in Google come from the Business
   Profile instead.
   ============================================================ */
.reviews-head{
  display:grid;
  grid-template-columns:auto 1fr;
  gap:clamp(24px,4vw,56px);
  align-items:center;
  margin-bottom:clamp(32px,4vw,48px);
}

.rating-badge{
  display:grid;
  justify-items:center;
  gap:6px;
  padding:clamp(22px,2.5vw,30px) clamp(28px,3vw,40px);
  background:var(--white);
  border:1px solid var(--tint-line);
  border-radius:var(--radius-lg);
  box-shadow:var(--shadow-sm);
  text-align:center;
}
.rating-score{
  font-size:clamp(2.6rem,5vw,3.4rem);
  font-weight:800;
  line-height:1;
  letter-spacing:-.04em;
  color:var(--blue);
}
.rating-count{ font-size:.92rem; color:var(--muted); }
.rating-count a{ color:var(--blue); font-weight:700; }

.stars{ display:flex; gap:3px; }
.stars svg{ width:19px; height:19px; color:#F5A623; }
.stars--sm svg{ width:15px; height:15px; }

.reviews{
  display:grid;
  grid-template-columns:repeat(auto-fit,minmax(300px,1fr));
  gap:20px;
}
.review{
  display:flex; flex-direction:column;
  padding:28px 26px 26px;
  background:var(--white);
  border:1px solid var(--tint-line);
  border-radius:var(--radius);
  box-shadow:var(--shadow-sm);
  transition:border-color .22s var(--ease), box-shadow .22s var(--ease);
}
.review:hover{ border-color:var(--cyan); box-shadow:var(--shadow-md); }
.review-top{
  display:flex; align-items:center; gap:12px;
  margin-bottom:14px;
}
.review-avatar{
  flex-shrink:0;
  width:42px; height:42px;
  display:grid; place-items:center;
  border-radius:50%;
  background:var(--blue);
  color:var(--white);
  font-weight:800; font-size:1.05rem;
}
.review-who{ display:grid; gap:3px; }
.review-name{ font-weight:700; font-size:.99rem; color:var(--ink); }
.review-date{ font-size:.82rem; color:var(--muted); }
.review p{ color:var(--muted); font-size:.99rem; line-height:1.65; margin:0; }
.review-src{
  display:flex; align-items:center; gap:7px;
  margin-top:18px; padding-top:14px;
  border-top:1px solid var(--tint-line);
  font-size:.82rem; color:var(--muted);
}
.review-src svg{ width:15px; height:15px; }

/* ============================================================
   ΠΛΗΡΩΜΗ
   ============================================================ */
.pay-grid{
  display:grid;
  grid-template-columns:repeat(auto-fit,minmax(280px,1fr));
  gap:20px;
}
.pay-card{
  display:flex; flex-direction:column;
  background:var(--white);
  border:1px solid var(--tint-line);
  border-radius:var(--radius);
  padding:30px 28px 32px;
  box-shadow:var(--shadow-sm);
}
.pay-card h3{ font-size:1.14rem; color:var(--blue); margin-bottom:14px; }
.pay-card p{ color:var(--muted); font-size:.99rem; }
.pay-card .btn{ margin-top:auto; }
.pay-rows{ display:grid; gap:12px; margin:4px 0 22px; }
.pay-rows div{
  display:grid; grid-template-columns:110px 1fr; gap:12px;
  padding-bottom:12px;
  border-bottom:1px solid var(--tint-line);
  font-size:.97rem;
}
.pay-rows div:last-child{ border-bottom:none; padding-bottom:0; }
.pay-rows dt{ color:var(--muted); }
.pay-rows dd{ margin:0; font-weight:700; color:var(--blue); word-break:break-all; }

.pay-note{
  margin-top:clamp(30px,3.5vw,44px);
  padding:clamp(24px,3vw,32px);
  background:var(--tint);
  border:1px solid var(--tint-line);
  border-radius:var(--radius);
  color:var(--muted);
  font-size:.97rem;
}
.pay-note strong{ color:var(--blue); }

/* ============================================================
   REVEAL — short, quiet, and off by default until JS opts in
   ============================================================ */
.js .reveal{ opacity:0; transform:translateY(16px); }
.js .reveal.is-in{
  opacity:1; transform:none;
  transition:opacity .55s var(--ease), transform .55s var(--ease);
}

/* ============================================================
   RESPONSIVE
   ============================================================ */
@media (max-width:1000px){
  .hero-grid, .online-grid, .value-grid, .contact-grid{ grid-template-columns:1fr; }
  .hero-grid{ gap:44px; }
  /* stacked layout puts copy over the whole photo, so the scrim has to
     run top-to-bottom instead of left-to-right */
  .hero::after{
    background:
      radial-gradient(700px 380px at 90% 0%, rgba(40,211,255,.20), transparent 62%),
      linear-gradient(178deg,
        rgba(9,0,141,.92)  0%,
        rgba(9,0,141,.80) 42%,
        rgba(9,0,141,.48) 72%,
        rgba(9,0,141,.34) 100%),
      linear-gradient(rgba(9,0,141,.24), rgba(5,0,63,.38));
  }
  .value-head{ max-width:18ch; }
  .footer-grid{ grid-template-columns:1fr 1fr; }
  .footer-brand{ grid-column:1 / -1; }
  .detail-grid{ grid-template-columns:1fr; }
  .detail-aside{ position:static; }
  /* narrow screens put the copy across the whole frame, so the scrim has to
     run top-to-bottom and sit heavier than it does on desktop */
  .page-hero--photo{
    --hero-scrim:
      linear-gradient(178deg,
        rgba(9,0,141,.92)  0%,
        rgba(9,0,141,.84) 45%,
        rgba(9,0,141,.58) 78%,
        rgba(9,0,141,.44) 100%),
      linear-gradient(rgba(9,0,141,.22), rgba(5,0,63,.34));
  }
  .section-dark--photo::after{
    background:
      linear-gradient(178deg,
        rgba(9,0,141,.94)  0%,
        rgba(9,0,141,.86) 45%,
        rgba(9,0,141,.66) 78%,
        rgba(9,0,141,.52) 100%),
      linear-gradient(rgba(9,0,141,.26), rgba(5,0,63,.38));
  }
  .page-hero--services{ --hero-pos:70% 22%; }
  .page-hero--news{
    --hero-pos:60% 46%;
    --hero-scrim:
      linear-gradient(178deg,
        rgba(9,0,141,.95)  0%,
        rgba(9,0,141,.90) 45%,
        rgba(9,0,141,.70) 78%,
        rgba(9,0,141,.56) 100%),
      linear-gradient(rgba(9,0,141,.26), rgba(5,0,63,.38));
  }
}

/* Six links plus two buttons need ~955px; below this the nav starts wrapping
   onto two lines, so the burger takes over. Raise this if you add nav items. */
@media (max-width:1200px){
  .nav-toggle{ display:flex; }
  /* The panel animates instead of snapping, which needs it laid out at all
     times — display:none cannot be transitioned. It is position:absolute, so
     keeping it in flow costs no layout; visibility does the hiding, and takes
     it out of the tab order while shut. Only opacity and transform are
     animated, both compositor-friendly on phones. */
  .nav{
    position:absolute; left:0; right:0; top:100%;
    flex-direction:column; align-items:stretch; gap:0;
    background:var(--blue);
    border-bottom:1px solid rgba(255,255,255,.14);
    padding:8px 24px 24px;
    display:flex;

    visibility:hidden;
    opacity:0;
    transform:translateY(-12px);
    pointer-events:none;
    box-shadow:0 20px 40px rgba(5,0,63,.35);
    /* visibility flips only after the fade finishes, so the panel does not
       vanish mid-animation on close */
    transition:opacity .26s var(--ease),
               transform .26s var(--ease),
               visibility 0s linear .26s;
  }
  .nav.is-open{
    visibility:visible;
    opacity:1;
    transform:translateY(0);
    pointer-events:auto;
    transition:opacity .26s var(--ease),
               transform .26s var(--ease),
               visibility 0s linear 0s;
  }

  .nav a{ padding:15px 0; border-bottom:1px solid rgba(255,255,255,.10); font-size:1.02rem; }
  .nav a:not(.btn)::after{ display:none; }

  /* Each row drifts in just behind the panel. Declared AFTER `.nav a` above:
     that rule sets `transition:color …`, and at equal specificity (0,1,1) the
     later declaration wins — put this block first and the links lose their
     opacity/transform transition and just pop in. Delays apply only in the
     open state, so closing collapses everything at once instead of playing
     the stagger backwards, which reads as sluggish. */
  .nav > a,
  .nav > .has-sub{
    opacity:0;
    transform:translateY(-8px);
    transition:opacity .3s var(--ease),
               transform .3s var(--ease),
               color .18s var(--ease);
  }
  .nav.is-open > a,
  .nav.is-open > .has-sub{ opacity:1; transform:translateY(0); }
  .nav.is-open > :nth-child(1){ transition-delay:.05s; }
  .nav.is-open > :nth-child(2){ transition-delay:.09s; }
  .nav.is-open > :nth-child(3){ transition-delay:.13s; }
  .nav.is-open > :nth-child(4){ transition-delay:.17s; }
  .nav.is-open > :nth-child(5){ transition-delay:.21s; }
  .nav.is-open > :nth-child(6){ transition-delay:.25s; }
  .nav.is-open > :nth-child(7){ transition-delay:.29s; }
  .nav.is-open > :nth-child(8){ transition-delay:.33s; }
  .nav .nav-pay{ margin-top:18px; border-bottom:none; justify-content:center; }
  .nav .nav-cta{ margin-top:10px; border-bottom:none; justify-content:center; }

  /* No hover on the burger panel: the submenu is simply always open, indented
     under its parent, so every service is reachable with one tap. */
  .has-sub::after{ display:none; }
  .has-sub > a{ border-bottom:1px solid rgba(255,255,255,.10); }
  .sub-caret{ display:none; }

  .submenu,
  .has-sub:hover .submenu,
  .has-sub:focus-within .submenu,
  .has-sub.is-closed .submenu{
    position:static;
    transform:none;
    opacity:1; visibility:visible; pointer-events:auto;
    display:block;
    min-width:0;
    padding:6px 0 10px 14px;
    background:transparent;
    border-radius:0;
    box-shadow:none;
  }
  .submenu::before{ display:none; }
  .nav .submenu a{
    padding:11px 0;
    border-bottom:1px solid rgba(255,255,255,.08);
    border-radius:0;
    font-size:.95rem;
    font-weight:500;
    color:rgba(255,255,255,.74);
  }
  .nav .submenu a:hover,
  .nav .submenu a:focus-visible{ background:transparent; color:var(--cyan); }
  .submenu .submenu-all{ margin-top:2px; padding-top:6px; border-top-color:rgba(255,255,255,.16); }
  .nav .submenu .submenu-all a{ color:var(--cyan); font-weight:700; }
}

@media (max-width:640px){
  body{ font-size:16px; }
  .wrap{ padding-inline:20px; }
  .field-row{ grid-template-columns:1fr; }
  .contact-details dl > div{ grid-template-columns:1fr; gap:4px; }
  .notfound{ flex-direction:column; align-items:flex-start; }
  .notfound .btn{ width:100%; }
  .btn-row .btn{ width:100%; }
  .footer-grid{ grid-template-columns:1fr; }
  .footer-bottom{ flex-direction:column; align-items:flex-start; }
  .post{ grid-template-columns:1fr; }
  .reviews-head{ grid-template-columns:1fr; justify-items:start; }
  .rating-badge{ justify-self:stretch; }
  .post-meta{ grid-auto-flow:column; justify-content:start; align-items:center; gap:14px; }
  .pay-rows div{ grid-template-columns:1fr; gap:2px; }
}

@media (prefers-reduced-motion:reduce){
  html{ scroll-behavior:auto; }
  *,*::before,*::after{
    animation-duration:.01ms !important;
    animation-iteration-count:1 !important;
    transition-duration:.01ms !important;
  }
  .js .reveal{ opacity:1; transform:none; }
}