/* ============================================================
   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("/static/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("/static/section-dark--photo.webp");
  --dark-pos: center 42%;
}
.section-dark--photo::before{
  content:"";

  /* Runs 12% past the bottom of the section so the parent's overflow:hidden
     cuts the last sliver of the artwork off. online-bg.webp carries a
     watermark bar across its bottom 20px of 280 (7.1%), and on a narrow
     screen `cover` fits the whole height of the image into the section,
     which would put that bar on screen. Scaling up and clipping keeps it
     out of frame at every width. */
  position:absolute; inset:0 0 auto 0; height:112%; 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);
}


/* ---------- tint section with a photograph behind it ----------
   The light counterpart to .section-dark--photo above. Same structure —
   picture on ::before, scrim on ::after — but the wash goes toward --tint
   instead of --blue, because the copy here is --ink on a light surface and
   has to keep its contrast. Add the class alongside .section-tint and point
   --tint-img at the artwork:

     <section class="section section-tint section-tint--photo" id="reviews">

   The scrim is deliberately light: this artwork is already a pale, washed-out
   blue that sits very close to --tint, so the heavy wash .section-dark--photo
   needs would erase it entirely. It only has to lift the mid-tones on the
   right — the desk and monitors — enough for the lede's --muted grey, since
   the title on the left already has near-white behind it and the review cards
   are opaque white anyway. */
.section-tint--photo{
  position:relative;
  isolation:isolate;
  overflow:hidden;

  --tint-img: url("/static/section-tint--photo.jpg");
  --tint-pos: center 50%;
}
.section-tint--photo::before{
  content:"";
  position:absolute; inset:0; z-index:-2;
  background:var(--tint) var(--tint-img) var(--tint-pos) / cover no-repeat;
}
.section-tint--photo::after{
  content:"";
  position:absolute; inset:0; z-index:-1;
  background:
    linear-gradient(100deg,
      rgba(239,239,248,.62)  0%,
      rgba(239,239,248,.50) 35%,
      rgba(239,239,248,.50) 65%,
      rgba(239,239,248,.52) 100%),
    linear-gradient(rgba(239,239,248,.18), rgba(239,239,248,.34));
}

/* The lede in this section used to be --muted on flat --tint. Over the photo
   that drops to ~3.4:1 against the mid-blue of the monitors behind it, so it
   takes the --ink weight instead — the same trade .section-dark--photo makes
   when it turns the steps panel into a real glass card. Measured worst case
   behind this paragraph is now ~9.7:1. */
.section-tint--photo .reviews-head .lede{ color:var(--ink); }

.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; }
.article-cta{ max-width:760px; }
.article-back{ max-width:760px; margin:28px 0 0; }
.article-back a{ color:var(--blue); font-weight:600; }

/* ---------- 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-cover{
  display:block; width:100%; height:auto; margin:0 0 32px;
  border-radius:16px; box-shadow:0 18px 40px -24px rgba(9,0,141,.45);
}
.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 strong{ color:var(--ink); }
.prose ol{ margin:0 0 1.1em; counter-reset:prose-step; }
.prose ol li{
  position:relative; padding-left:36px; margin-bottom:12px; color:var(--muted);
  counter-increment:prose-step;
}
.prose ol li::before{
  content:counter(prose-step); position:absolute; left:0; top:.15em;
  width:24px; height:24px; border-radius:50%; display:grid; place-items:center;
  background:var(--tint); color:var(--blue); font-size:.8rem; font-weight:700;
}
.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("/static/page-hero--services.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("/static/page-hero--news.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:has(.post-thumb){ grid-template-columns:150px 1fr 160px; }
.post-thumb{
  display:block; aspect-ratio:1; overflow:hidden;
  border-radius:var(--radius); box-shadow:var(--shadow-sm);
}
.post-thumb img{
  display:block; width:100%; height:100%; object-fit:cover;
  transition:transform .4s var(--ease);
}
.post:hover .post-thumb img{ transform:scale(1.05); }
.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; }
.latest-news{
  display:flex; align-items:center; gap:18px;
  margin-bottom:clamp(30px,3.5vw,44px);
  padding:14px 22px 14px 14px;
  background:var(--white);
  border:1px solid var(--tint-line);
  border-left:4px solid var(--cyan);
  border-radius:var(--radius);
  box-shadow:var(--shadow-sm);
  color:inherit; text-decoration:none;
  transition:border-color .22s var(--ease), box-shadow .22s var(--ease);
}
.latest-news[hidden]{ display:none; }
.latest-news:hover{ border-color:var(--cyan); box-shadow:var(--shadow-md); }
.latest-news-thumb{
  flex-shrink:0; width:72px; height:72px; overflow:hidden; border-radius:12px;
}
.latest-news-thumb img{ display:block; width:100%; height:100%; object-fit:cover; }
.latest-news-body{ flex:1; min-width:0; display:grid; gap:4px; }
.latest-news-label{
  font-size:.74rem; font-weight:700; letter-spacing:.12em; text-transform:uppercase;
  color:var(--cyan-deep);
}
.latest-news-label time{ color:var(--muted); font-weight:600; margin-left:8px; }
.latest-news-title{ font-weight:700; font-size:1.05rem; line-height:1.35; color:var(--blue); }
.latest-news-go{
  flex-shrink:0; display:inline-flex; align-items:center; gap:6px;
  font-weight:700; font-size:.92rem; color:var(--blue);
}
.latest-news-go svg{ width:16px; height:16px; transition:transform .22s var(--ease); }
.latest-news:hover .latest-news-go svg{ transform:translateX(4px); }
.post h3 a{ color:inherit; text-decoration:none; transition:color .22s var(--ease); }
.post h3 a:hover{ color:var(--cyan-deep); text-decoration:underline; text-underline-offset:3px; }
.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){
  /* the artwork is ~2.3:1; once the section turns narrow and tall, `cover`
     crops to the middle and throws away the desk on the right. Pull the
     focal point across so the kept slice is the part worth keeping. */
  .section-tint--photo{ --tint-pos: 72% 50%; }
  .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;
    /* inherit, not visible/auto: a child set to visible stays clickable
       inside the shut (visibility:hidden) panel and covers the page. */
    opacity:1; visibility:inherit; pointer-events:inherit;
    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){
  /* on phones the copy spans the full width instead of sitting in the left
     column, so the angled scrim can no longer protect it — go flat and
     heavier, and let the photo read as texture rather than subject. */
  .section-tint--photo{ --tint-pos: 78% 50%; }
  .section-tint--photo::after{
    background:linear-gradient(rgba(239,239,248,.72), rgba(239,239,248,.62));
  }
  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; }
  .post:has(.post-thumb){ grid-template-columns:1fr; }
  .latest-news{ gap:14px; padding:12px 14px 12px 12px; }
  .latest-news-thumb{ width:60px; height:60px; }
  .latest-news-title{ font-size:.97rem; }
  .latest-news-label time{ display:block; margin:2px 0 0; }
  .latest-news-go{ display:none; }
  .post-thumb{ order:-1; width:120px; }
  .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; }
}


/* ---------- contact section with a photograph behind it ----------
   Third use of the .section-tint--photo pattern, so this only has to
   re-point the artwork and fix the two things the contact layout does
   differently from #reviews.

   The photo is framed with its empty, blown-out left third under the
   address list and the handshake itself under the gap between the two
   columns, so --tint-pos holds it at `left center`: cropping from the
   right on narrow viewports drops the second figure before it touches
   anything that has to stay readable.

   The scrim is lighter than the #reviews one — this artwork is already
   near-white on the left where the --muted dt labels sit, and the extra
   wash the reviews photo needs would flatten the handshake out of the
   frame entirely. It steps up toward the right instead, where the mid-
   tone navy trousers and the plant would otherwise sit right behind the
   form card's edge. */
.section-contact--photo{
  --tint-img: url("/static/section-contact--photo.jpg");
  --tint-pos: left center;
}
.section-contact--photo::after{
  background:
    linear-gradient(100deg,
      rgba(239,239,248,.42)  0%,
      rgba(239,239,248,.52) 40%,
      rgba(239,239,248,.72) 72%,
      rgba(239,239,248,.80) 100%),
    linear-gradient(rgba(239,239,248,.20), rgba(239,239,248,.30));
}

/* The form was a --tint card on a flat --tint section: no photo behind it,
   so a 1px --tint-line was enough to read as a panel. Over the artwork that
   same fill goes translucent against the mid-tones and the card loses its
   edge, the same failure .section-dark--photo's steps panel had. It becomes
   a real glass card here, and the inputs go solid white so their borders
   keep their contrast against it. */
.section-contact--photo .contact-form{
  background:rgba(255,255,255,.78);
  border-color:rgba(9,0,141,.14);
  backdrop-filter:blur(16px) saturate(118%);
  -webkit-backdrop-filter:blur(16px) saturate(118%);
  box-shadow:0 18px 50px rgba(5,0,63,.13);
}

/* The address list's rules are --tint-line, tuned for a flat surface. Over
   the photo they vanish against the bright left third, so they take a real
   ink-based alpha instead. */
.section-contact--photo .contact-details dl > div{ border-bottom-color:rgba(9,0,141,.16); }
.section-contact--photo .contact-details dl > div:first-child{ border-top-color:rgba(9,0,141,.16); }

/* Same trade #reviews makes for its lede: --muted grey drops below 4.5:1
   over the warmer patch left of the handshake, so the note takes --ink. */
.section-contact--photo .contact-note{ color:var(--ink); }


/* ---------- FAQ section with a photograph behind it ----------
   Fourth use of the .section-tint--photo pattern. This artwork needs the
   least work of the three: the accordion is capped at 80ch and sits hard
   left, so the whole right half of the section is empty and the photo's
   subject — laptop, question mark, speech bubbles — lands in it without
   anything on top. --tint-pos holds it `right center` for that reason,
   the mirror of what #contact does: here it's the blown-out left third
   that gets cropped away first on narrow viewports, and losing empty
   white costs nothing.

   The scrim is the lightest of the set and runs the other way, heaviest
   on the left under the eyebrow and title and easing off toward the
   right so the question mark keeps its edges. The artwork is already a
   near-white lavender that sits almost on top of --tint, so anything
   stronger would erase it. */
.section-faq--photo{
  --tint-img: url("/static/section-faq--photo.jpg");
  --tint-pos: right center;
}
.section-faq--photo::after{
  background:
    linear-gradient(100deg,
      rgba(239,239,248,.70)  0%,
      rgba(239,239,248,.58) 38%,
      rgba(239,239,248,.40) 70%,
      rgba(239,239,248,.34) 100%),
    linear-gradient(rgba(239,239,248,.16), rgba(239,239,248,.26));
}

/* The accordion cards are already opaque --white, so unlike the contact
   form they don't need to become glass — they read as panels over the
   photo as they are. Only the closed-state border needs help: --tint-line
   is tuned against flat --tint and disappears where the desk's highlight
   runs behind the lower rows. */
.section-faq--photo .faq details{ border-color:rgba(9,0,141,.14); }
.section-faq--photo .faq details[open]{ border-color:var(--cyan); }

/* Below 1000px the accordion stops being a left-hand column with empty
   space beside it and goes full-bleed, so `right center` no longer parks
   the subject in a gap — it drags the darkest part of the frame, the suit
   shoulder, up behind the section title. Measured worst case against
   --ink there is 4.75:1: past the 3:1 large-text bar the title actually
   has to clear, but the thinnest margin of any section on the page. The
   crop moves inboard to hold the laptop and question mark instead of the
   suit, and the scrim flattens to an even wash since there is no longer a
   left-to-right split to protect. Worst case goes to ~14:1. */
@media (max-width:1000px){
  .section-faq--photo{ --tint-pos: 72% center; }
  .section-faq--photo::after{
    background:
      linear-gradient(rgba(239,239,248,.74), rgba(239,239,248,.66));
  }
}


/* ---------- related services (service pages) with a photograph ----------
   Fifth use of the .section-tint--photo pattern: a woman at a desk on the
   phone. The still is only 540x360, so at desktop `cover` upscales it
   ~3.5x; the scrim is a touch heavier than the others partly to keep that
   softness from reading as blur. The subject sits in the left-centre of the
   frame, right under the title, so the wash is heaviest on the left and
   eases off to the right where the laptop is. The link pills and the
   .notfound panel are opaque white already and need nothing. */
.section-related--photo{
  --tint-img: url("/static/section-related--photo.jpg");
  --tint-pos: center 28%;
}
.section-related--photo::after{
  background:
    linear-gradient(100deg,
      rgba(239,239,248,.74)  0%,
      rgba(239,239,248,.62) 40%,
      rgba(239,239,248,.50) 75%,
      rgba(239,239,248,.46) 100%),
    linear-gradient(rgba(239,239,248,.16), rgba(239,239,248,.28));
}
.section-related--photo .related a{ border-color:rgba(9,0,141,.14); }
@media (max-width:1000px){
  .section-related--photo{ --tint-pos: 40% 25%; }
  .section-related--photo::after{
    background:linear-gradient(rgba(239,239,248,.76), rgba(239,239,248,.68));
  }
}


/* ---------- full-bleed photo band ----------
   A third way of putting a picture behind a section, alongside
   .section-dark--photo and .section-tint--photo above. Those two both
   use `cover`, and `cover` destroys an ultra-wide banner photograph.

   The measurement that forced this: #services is 1727x2291 at desktop —
   taller than it is wide, ratio 0.75 — while these banner stills are
   2.63:1. Covering a 0.75 box with a 2.63 image draws it 6018px wide and
   shows 29% of it, the dead centre. Everything the photograph is *of*
   gets cropped away and you are left with blank desk. A banner still has
   to be shown whole across the full width or not at all.

   So the picture is laid in as a full-bleed band: `100% auto` pins it
   edge to edge, and aspect-ratio gives ::before the image's own height
   rather than the section's — which is the part that matters, because it
   lets the mask fade run in band space instead of section space. Below
   the band the mask hands back to flat --tint, so the cards underneath
   keep the plain surface they were designed on.

   Point --band-img at the artwork and add the class alongside
   .section-tint. Add .is-titled as well if text sits over the band, and
   .is-extended if the still's foot is light enough to continue — see
   below, it is a property of the photograph, not a free choice. */
.section-band--photo{
  position:relative;
  isolation:isolate;
  overflow:hidden;
}
.section-band--photo::before,
.section-band--photo::after{
  content:"";
  position:absolute;
  inset:0 0 auto 0;          /* full width, top-anchored, height from ratio */
  aspect-ratio:var(--band-ratio, 2033 / 774);
}
.section-band--photo::before{
  z-index:-2;
  background:var(--band-img) center top / 100% auto no-repeat;
  -webkit-mask-image:var(--band-mask,
    linear-gradient(to bottom, #000 0%, #000 46%, transparent 100%));
  mask-image:var(--band-mask,
    linear-gradient(to bottom, #000 0%, #000 46%, transparent 100%));
}

/* ---------- extending the band to fill the section ----------
   The band cannot literally cover its section — a 2.63:1 still in a 0.75
   box can only do that by cropping to 29% or by stretching — so what gets
   extended is the surface, not the picture. The section's own background
   picks up the photograph's bottom edge and settles into --tint, and the
   mask is relaxed so the picture runs at full strength through its whole
   subject instead of dissolving halfway down it. The join disappears and
   the section reads as one continuous desk down to the cards.

   This only works where the still's foot is already close to --tint, so
   it is opt-in rather than the default. Measured across the bottom 40 rows
   in fifths:

     services-bg  157,161,160 | 231,231,252 | 241,241,254 | 235,235,252 | 226,226,247
     news-bg      235,237,253 | 235,235,250 | 192,190,204 |  66, 72, 94 |  96, 96,104

   The services desk qualifies: four of five fifths land within a few
   points of --tint. Its one outlier is the blurred plant in the bottom-
   left corner, and that is the whole reason the relaxed mask still fades
   at all — letting go over the last fifth loses that corner without
   eating the calculator or the briefcase above it.

   news-bg does not qualify and deliberately keeps the default mask: its
   right half ends on the reader's navy suit and the chair, 60-100 against
   a 239 surface. Continuing that edge would either band a dark strip
   across the section or cut hard where the suit meets the join, so that
   picture fades out mid-frame as before. */
.section-band--photo.is-extended{
  background-image:linear-gradient(to bottom,
    var(--band-edge) 0%,
    var(--tint) 62%);
  --band-mask:linear-gradient(to bottom, #000 0%, #000 80%, transparent 100%);
}
/* Both of these desks are already near-white, so the shared wash is light:
   it mostly just stops the marble's warm highlight reading as a colour
   shift against the --tint the band fades into. */
.section-band--photo::after{
  z-index:-1;
  background:linear-gradient(to bottom,
    rgba(239,239,248,.46) 0%,
    rgba(239,239,248,.38) 45%,
    rgba(239,239,248,0)  100%);
}

/* Only for a band that carries a heading — #services on the home page.
   The Υπηρεσίες and Ενημερώσεις bands run straight into their card grids
   with no text over them, and spending density there would dim the
   artwork to buy nothing.

   Where there is a heading it is genuinely needed: the title sits at the
   left edge of --wrap and the flatlay's navy folder and calculator
   intrude about 180px past the gutter into its box, measured 2.81:1
   against --ink — under even the 3:1 bar large text has to clear.
   Washing the whole band to cover that would erase the artwork, so the
   density is spent only where the title is and falls off before it
   reaches the briefcase and headphones on the right. The left cluster
   softens behind the heading rather than disappearing, and worst case
   goes to ~13:1. */
.section-band--photo.is-titled::after{
  background:
    radial-gradient(760px 300px at 20% 34%,
      rgba(239,239,248,.93) 0%,
      rgba(239,239,248,.78) 45%,
      rgba(239,239,248,0)  78%),
    linear-gradient(to bottom,
      rgba(239,239,248,.46) 0%,
      rgba(239,239,248,.38) 45%,
      rgba(239,239,248,0)  100%);
}

/* Υπηρεσίες — a border composition: calendar, car key, calculator and
   folders down the left margin, house keys, briefcase and headphones down
   the right, empty desk between. The --wrap gutter is 288px a side at
   desktop, so both clusters clear the card grid. */
.section-services--photo{
  --band-img:url("/static/section-services--photo.jpg");
  --band-edge:rgb(236,236,253);   /* mean of its middle three fifths */
}
/* Home page only: the #services section is ~4x taller than the still, so it
   uses a copy extended downward (soft marble reflection that falls out of
   focus and settles into --tint) instead of stopping a quarter of the way
   down. The Υπηρεσίες page keeps the original still. */
.section-services--photo.is-titled{
  --band-img:url("/static/section-services--photo-2.jpg");
  --band-ratio:2033 / 2374;
}

/* Ενημερώσεις — weighted right rather than a border: the reader, tablet
   and papers sit in the right third and the left half is empty marble.
   Same band mechanics, and the subject lands in the right-hand gutter
   beside the post cards. One pixel shorter than the other still, hence
   its own ratio — at 1727px wide that is a 1.3px difference in band
   height, but it keeps the aspect-ratio honest to the file. */
.section-news--photo{
  --band-img:url("/static/section-news--photo.jpg");
  --band-ratio:2033 / 773;
}

/* single-file build: only one route is on screen at a time */
.route[hidden]{ display:none !important; }

/* ═══════════════ NEWSLETTER ═══════════════
   Δύο σημεία εγγραφής: η κάρτα στο τέλος των Ενημερώσεων (.nl-card) και το
   αναδυόμενο (.nl-pop), που εμφανίζεται μόνο αφού ο επισκέπτης έχει
   περιηγηθεί — δείτε το newsletter block στο JS. */

.nl-card{
  margin-top:22px;
  padding:clamp(24px,3.4vw,40px);
  border-radius:var(--radius-lg);
  background:linear-gradient(118deg, var(--blue) 0%, var(--blue-soft) 100%);
  color:var(--white);
  box-shadow:var(--shadow-md);
}
.nl-card h3{ margin:0 0 10px; font-size:clamp(1.3rem,2.4vw,1.7rem); color:var(--white); }
.nl-card h3 em{ color:var(--cyan); font-style:italic; }
.nl-card > p{ margin:0 0 22px; color:rgba(255,255,255,.85); max-width:58ch; }

/* Το αναδυόμενο */
.nl-pop{ position:fixed; inset:0; z-index:120; display:grid; place-items:center; padding:20px; }
.nl-pop[hidden]{ display:none !important; }
.nl-scrim{
  position:absolute; inset:0; border:0; padding:0; cursor:pointer;
  background:rgba(5,0,63,.58); -webkit-backdrop-filter:blur(3px); backdrop-filter:blur(3px);
}
.nl-box{
  position:relative; width:min(520px,100%);
  max-height:calc(100vh - 40px); overflow-y:auto;
  padding:clamp(24px,3.4vw,38px);
  background:var(--white); border-radius:var(--radius-lg);
  box-shadow:0 30px 80px rgba(5,0,63,.38);
}
.js .nl-pop:not([hidden]) .nl-box{ animation:nl-rise .32s cubic-bezier(.2,.8,.3,1) both; }
@keyframes nl-rise{ from{ opacity:0; transform:translateY(18px); } to{ opacity:1; transform:none; } }

.nl-box .nl-eyebrow{
  margin:0 0 6px; font-size:.78rem; font-weight:800; letter-spacing:.12em;
  text-transform:uppercase; color:var(--cyan-deep);
}
.nl-box h2{ margin:0 0 10px; font-size:clamp(1.35rem,2.6vw,1.75rem); }
.nl-box h2 em{ color:var(--cyan-deep); font-style:italic; }
.nl-box > p{ margin:0 0 20px; color:var(--muted); font-size:1rem; }

.nl-close{
  position:absolute; top:12px; right:12px;
  width:38px; height:38px; display:grid; place-items:center;
  border:0; border-radius:50%; cursor:pointer;
  background:var(--tint); color:var(--muted);
}
.nl-close:hover{ background:var(--tint-line); color:var(--ink); }
.nl-close svg{ width:18px; height:18px; }

/* Φόρμα — κοινή για τα δύο σημεία */
.nl-form .field{ margin-bottom:14px; }
.nl-card .field label{ color:rgba(255,255,255,.9); }
.nl-card .field input{
  background:rgba(255,255,255,.12); border-color:rgba(255,255,255,.3); color:var(--white);
}
.nl-card .field input::placeholder{ color:rgba(255,255,255,.55); }
.nl-card .field input:focus{ background:rgba(255,255,255,.18); border-color:var(--cyan); }

.nl-consent{ display:flex; gap:10px; align-items:flex-start; margin:4px 0 18px; font-size:.86rem; line-height:1.5; }
.nl-consent input{ margin-top:3px; width:17px; height:17px; flex:none; accent-color:var(--cyan-deep); }
.nl-consent span{ color:var(--muted); }
.nl-card .nl-consent span{ color:rgba(255,255,255,.78); }
.nl-card .nl-consent a{ color:var(--cyan); }

.nl-form .form-status{ margin-top:12px; }
.nl-card .form-status.is-ok{ color:#7CF0B4; }
.nl-card .form-status.is-error{ color:#FFB3B3; }

.nl-note{ margin:14px 0 0; font-size:.8rem; color:var(--muted); }
.nl-card .nl-note{ color:rgba(255,255,255,.6); }

@media (max-width:560px){
  .nl-box{ padding:26px 20px; }
}
@media (prefers-reduced-motion: reduce){
  .js .nl-pop:not([hidden]) .nl-box{ animation:none; }
}

/* ── static pages ── */
.page-head .crumbs{ display:flex; flex-wrap:wrap; gap:8px; margin:0 0 18px; font-size:.88rem; color:rgba(255,255,255,.7); }
.page-head .crumbs a{ color:rgba(255,255,255,.85); text-decoration:none; }
.page-head .crumbs a:hover{ color:#fff; text-decoration:underline; }
.page-head .lede{ margin:16px 0 0; max-width:760px; color:rgba(255,255,255,.86); font-size:1.08rem; }