/* =========================================================
   Rountos Elevators — Ρούντος Ανελκυστήρες
   Its own design, taken from the old rountos-elevators.gr:
   light pages, cyan #009ED5 + charcoal #383938 (the logo),
   the blue-grey #97B2B9 of the old background, and the square
   tiles of the old banners. Square corners throughout.
   Fonts: Ubuntu (headings, close to the logo's rounded wordmark) + Noto Sans.
   ========================================================= */

:root {
  --ink: #232a2e;
  --char: #383938;        /* logo grey */
  --grey: #494949;        /* the old site's footer band */
  --night: #1d2326;       /* header */
  --night-2: #151a1c;
  --cyan: #009ed5;        /* logo cyan: tiles, rules, accents */
  --cyan-dk: #0079ad;     /* buttons and links (AA with white) */
  --cyan-2: #00618b;
  --cyan-lt: #4cc0ea;
  --cyan-bg: #e5f4fa;
  --sky: #97b2b9;         /* the old site's background blue-grey */
  --mist: #f1f5f6;
  --mist-2: #e4ebed;
  --head-bg: radial-gradient(ellipse 55% 75% at 100% 30%, rgba(0, 158, 213, .2), transparent 65%), radial-gradient(ellipse 40% 45% at 0% 45%, rgba(76, 192, 234, .2), transparent 70%), linear-gradient(180deg, #e6f4fb 0%, #d2ebf7 100%);   /* page heads: light blue from the logo cyan */
  --line: #d7e0e3;
  --mute: #5b676d;
  --white: #fff;

  --r: 3px;
  --shadow: 0 1px 2px rgba(35, 42, 46, .06), 0 14px 34px -18px rgba(35, 42, 46, .28);
  --ease: cubic-bezier(.2, .7, .2, 1);
  --head: "Ubuntu", "Noto Sans", system-ui, sans-serif;
  --body: "Noto Sans", system-ui, -apple-system, "Segoe UI", Roboto, Arial, sans-serif;
  --hdr-h: 84px;
  --top-h: 37px;          /* top bar + its rule; the dark head runs up behind both */
  --gutter: clamp(16px, 4vw, 32px);
  --max: 1200px;
  --lift: clamp(56px, 7vw, 100px);   /* inner pages: how far the content rises into the head's fade */
}

*, *::before, *::after { box-sizing: border-box; }
html { -webkit-text-size-adjust: 100%; scroll-behavior: smooth; scroll-padding-top: 100px; }
body { margin: 0; font: 400 16px/1.7 var(--body); color: var(--ink); background: var(--white); -webkit-font-smoothing: antialiased; }
img { max-width: 100%; display: block; }
a { color: inherit; }
p { margin: 0 0 1em; }
p:last-child { margin-bottom: 0; }
h1, h2, h3, h4 { margin: 0; font-family: var(--head); font-weight: 500; line-height: 1.15; letter-spacing: -.01em; color: var(--char); }
em { font-style: normal; color: var(--cyan); }
html.is-locked, body.is-locked { overflow: hidden; }
:focus-visible { outline: 3px solid var(--cyan); outline-offset: 2px; }
.sr-only { position: absolute; left: -9999px; top: 8px; z-index: 300; padding: 10px 16px; background: var(--char); color: #fff; }
.sr-only:focus { left: 8px; }
.wrap { width: 100%; max-width: var(--max); margin: 0 auto; padding-inline: var(--gutter); }
.wrap--narrow { max-width: 860px; }

.ico { width: 22px; height: 22px; flex: none; fill: none; stroke: currentColor; stroke-width: 1.7; stroke-linecap: round; stroke-linejoin: round; }
.arr { width: 18px; height: 18px; flex: none; fill: none; stroke: currentColor; stroke-width: 2; stroke-linecap: round; stroke-linejoin: round; transition: transform .3s var(--ease); }
a:hover > .arr, a:hover .arr, button:hover .arr { transform: translateX(3px); }

/* ---------- buttons, links ---------- */
.btn {
  --bg: var(--cyan-dk); --fg: #fff;
  display: inline-flex; align-items: center; justify-content: center; gap: 10px;
  padding: 13px 22px; border: 0; border-radius: var(--r);
  background: var(--bg); color: var(--fg); text-decoration: none; cursor: pointer;
  font: 500 .95rem/1.2 var(--head); letter-spacing: .01em;
  transition: background .2s, box-shadow .2s, color .2s;
}
.btn { position: relative; overflow: hidden; isolation: isolate; }
.btn::before { content: ""; position: absolute; z-index: -1; left: -14px; top: 50%; width: 10px; height: 10px; margin-top: -5px; background: rgba(255, 255, 255, .28); transition: left .45s var(--ease), transform .45s var(--ease); }
.btn:hover::before { left: calc(100% - 4px); transform: rotate(90deg); }
.btn--line::before, .btn--white::before { background: var(--cyan); opacity: .35; }
.btn:hover { --bg: var(--cyan-2); box-shadow: 0 10px 22px -12px rgba(0, 121, 173, .7); }
.btn--line { --bg: transparent; --fg: var(--char); box-shadow: inset 0 0 0 1.5px var(--line); }
.btn--line:hover { --bg: var(--white); box-shadow: inset 0 0 0 1.5px var(--cyan); }
.btn--white { --bg: #fff; --fg: var(--cyan-dk); }
.btn--white:hover { --bg: var(--cyan-bg); }
.btn--block { width: 100%; }
.btn .ico { width: 18px; height: 18px; }
.more { display: inline-flex; align-items: center; gap: 8px; color: var(--cyan-dk); font: 500 .95rem var(--head); text-decoration: none; }
.more:hover { color: var(--cyan-2); }
.acts { display: flex; flex-wrap: wrap; gap: 10px; }

/* ---------- the tiles ---------- */
/* squares in the brand colours; --o is each one's opacity, main.js lights a few at a time */
.c1 { background: var(--cyan); }
.c2 { background: var(--cyan-lt); }
.c3 { background: var(--sky); }
.c4 { background: var(--char); }
.c5 { background: #fff; }
.tilerow i, .ctabox__tiles i { display: block; aspect-ratio: 1; opacity: var(--o, 1); transition: opacity 1.4s ease, transform 1.4s var(--ease); }
.tilerow i.is-lit { opacity: .95; transform: translateY(-6px); }
.mosaic { display: grid; grid-template-columns: repeat(var(--cols), 1fr); gap: 4px; }
.mosaic i { display: block; aspect-ratio: 1; opacity: var(--o, 1); }
/* the animated squares (main.js, canvas) replace the still mosaic once drawn */
.tiles canvas { position: absolute; inset: 0; width: 100%; height: 100%; }
.tiles.is-on .mosaic { visibility: hidden; }

/* section heading: three squares, like a corner of the banners */
.t-head { position: relative; padding-left: 34px; margin-bottom: 18px; font-size: clamp(1.6rem, 2.6vw, 2.2rem); }
.t-head::before {
  content: ""; position: absolute; left: 0; top: .42em; width: 10px; height: 10px; background: var(--cyan);
  box-shadow: 13px 0 0 var(--sky), 0 -13px 0 rgba(0, 158, 213, .35);
}
.t-head small { margin-left: 8px; font: 400 .9rem var(--body); color: var(--mute); letter-spacing: 0; }

.lead { font-size: 1.1rem; color: var(--mute); }

/* reveal */
.rv { opacity: 0; transform: translateY(20px); transition: opacity .7s var(--ease), transform .7s var(--ease); }
.rv.is-in { opacity: 1; transform: none; }
@media (prefers-reduced-motion: reduce) {
  html { scroll-behavior: auto; }
  .rv { opacity: 1; transform: none; }
  *, *::before, *::after { transition-duration: 0s !important; animation: none !important; }
}

/* =========================================================
   Top bar + header: dark, sticky, with its own animated squares
   ========================================================= */
.topbar { position: relative; z-index: 101; color: var(--mute); font-size: .82rem; border-bottom: 1px solid var(--line); }
.topbar__in { display: flex; justify-content: space-between; align-items: center; gap: 16px; height: 36px; }
.topbar span, .topbar a { display: inline-flex; align-items: center; gap: 7px; text-decoration: none; }
.topbar .ico { width: 15px; height: 15px; color: var(--cyan); }
.topbar a:hover { color: var(--cyan-dk); }
.topbar__r { gap: 20px !important; }

/* transparent over the light page head (one block with it); white and blurred once the page scrolls */
.hdr { position: sticky; top: 0; z-index: 100; background: transparent; color: var(--ink); isolation: isolate; transition: box-shadow .3s, background .3s; }
.hdr::after { content: ""; position: absolute; left: 0; right: 0; bottom: 0; height: 2px; background: linear-gradient(90deg, transparent, var(--cyan) 30%, var(--cyan-lt) 70%, transparent); opacity: 0; transition: opacity .3s; }
.hdr.is-stuck::after { opacity: .5; }
.hdr.is-stuck { background: rgba(255, 255, 255, .92); -webkit-backdrop-filter: blur(14px) saturate(1.3); backdrop-filter: blur(14px) saturate(1.3); box-shadow: 0 12px 30px -20px rgba(35, 42, 46, .35); }
.hdr__in { position: relative; display: flex; align-items: center; gap: 24px; height: var(--hdr-h); }
.brand { flex: none; }
.brand img { height: 52px; width: auto; }

.nav { margin-left: auto; }
.nav__list { display: flex; align-items: center; gap: 2px; margin: 0; padding: 0; list-style: none; }
.nav__item { position: relative; }
.nav__link {
  position: relative; display: flex; align-items: center; gap: 7px; height: var(--hdr-h); padding: 0 14px;
  font: 500 .98rem var(--head); color: var(--char); text-decoration: none; transition: color .2s;
}
/* hover / current: a small cyan square slides in under the label */
.nav__link::after { content: ""; position: absolute; left: 14px; bottom: 18px; width: 7px; height: 7px; background: var(--cyan); opacity: 0; transform: translateX(-8px); transition: opacity .25s, transform .35s var(--ease), width .35s var(--ease); }
.nav__link:hover { color: var(--cyan-dk); }
.nav__item:hover > .nav__link::after { opacity: 1; transform: none; }
.nav__item.is-current > .nav__link { color: var(--ink); }
.nav__item.is-current > .nav__link::after { opacity: 1; transform: none; width: 22px; }
.nav__caret { width: 7px; height: 7px; border-right: 1.7px solid currentColor; border-bottom: 1.7px solid currentColor; transform: rotate(45deg) translateY(-2px); transition: transform .25s; }
.nav__item--has:hover .nav__caret { transform: rotate(-135deg) translateY(-2px); }
.nav__sub {
  position: absolute; top: calc(100% - 8px); left: 0; min-width: 330px; margin: 0; padding: 8px; list-style: none;
  background: var(--white); border: 1px solid var(--line); border-top: 2px solid var(--cyan);
  box-shadow: 0 30px 60px -24px rgba(35, 42, 46, .35);
  opacity: 0; visibility: hidden; transform: translateY(8px); transition: opacity .2s, transform .3s var(--ease), visibility .2s;
}
.nav__item--has:hover .nav__sub, .nav__item--has:focus-within .nav__sub { opacity: 1; visibility: visible; transform: none; }
.nav__sub a { display: flex; align-items: center; gap: 14px; padding: 10px 12px; text-decoration: none; font: 500 .95rem var(--head); color: var(--char); transition: background .2s; }
.nav__sub a:hover { background: var(--mist); }
.nav__sub .ico { width: 36px; height: 36px; padding: 8px; background: var(--cyan-bg); color: var(--cyan-dk); transition: background .2s, color .2s; }
.nav__sub a:hover .ico { background: var(--cyan); color: #fff; }
.nav__sub small { display: block; font: 400 .8rem var(--body); color: var(--mute); }
.nav__sub--grid { display: grid; grid-template-columns: 1fr 1fr; min-width: 620px; left: auto; right: -120px; }
.nav__foot { display: none; }

.hdr__tel { display: flex; flex-direction: column; line-height: 1.15; text-decoration: none; font: 700 1.05rem var(--head); color: var(--char); white-space: nowrap; }
.hdr__tel small { font: 400 .74rem var(--body); color: var(--cyan-dk); letter-spacing: .02em; }

.burger { display: none; position: relative; width: 44px; height: 44px; padding: 0; border: 1px solid var(--line); border-radius: var(--r); background: var(--white); cursor: pointer; }
.burger span, .burger span::before, .burger span::after { position: absolute; left: 50%; width: 18px; height: 2px; margin-left: -9px; background: var(--char); transition: transform .3s var(--ease), background .2s; }
.burger span { top: 50%; margin-top: -1px; }
.burger span::before, .burger span::after { content: ""; left: 0; margin-left: 0; }
.burger span::before { top: -6px; }
.burger span::after { top: 6px; }
.burger.is-open span { background: transparent; }
.burger.is-open span::before { transform: translateY(6px) rotate(45deg); }
.burger.is-open span::after { transform: translateY(-6px) rotate(-45deg); }
.scrim { position: fixed; inset: 0; z-index: 90; background: rgba(15, 19, 21, .55); opacity: 0; visibility: hidden; transition: opacity .3s, visibility .3s; }
.scrim.is-on { opacity: 1; visibility: visible; }

@media (max-width: 1180px) { .hdr__tel { display: none; } }
@media (max-width: 1020px) {
  :root { --hdr-h: 70px; }
  .brand img { height: 44px; }
  .burger { display: block; }
  .burger { margin-left: auto; }
  .nav {
    position: fixed; z-index: 95; top: var(--hdr-h); left: 0; right: 0; max-height: calc(100dvh - var(--hdr-h)); overflow-y: auto;
    margin: 0; padding: 8px var(--gutter) 24px; background: var(--white); border-top: 1px solid var(--line); box-shadow: 0 30px 50px -20px rgba(35, 42, 46, .3);
    opacity: 0; visibility: hidden; transform: translateY(-8px); transition: opacity .25s, transform .3s var(--ease), visibility .25s;
  }
  .nav.is-open { opacity: 1; visibility: visible; transform: none; }
  .hdr:has(.nav.is-open) { background: var(--white); }
  .nav__list { flex-direction: column; align-items: stretch; gap: 0; }
  .nav__item { border-bottom: 1px solid var(--line); }
  .nav__link { height: auto; padding: 15px 2px; justify-content: space-between; font-size: 1.08rem; color: var(--char); }
  .nav__link::after { display: none; }
  .nav__item.is-current > .nav__link { color: var(--cyan-dk); }
  .nav__sub { position: static; display: none; min-width: 0; padding: 0 0 10px; border: 0; background: none; box-shadow: none; opacity: 1; visibility: visible; transform: none; }
  .nav__sub--grid { grid-template-columns: 1fr; }
  .nav__item--has.is-open .nav__sub { display: block; }
  .nav__item--has.is-open .nav__caret { transform: rotate(-135deg); }
  .nav__foot { display: grid; gap: 4px; margin-top: 18px; padding: 16px; background: var(--mist); color: var(--mute); }
  .nav__foot a { text-decoration: none; color: var(--char); font-weight: 600; }
}
@media (max-width: 760px) { :root { --top-h: 0px; } .topbar { display: none; } }

/* =========================================================
   Home: slider, text and a four-photo grid per slide (the old slides)
   ========================================================= */
.stage {
  position: relative; overflow: hidden; isolation: isolate;
  margin-top: calc(-1 * (var(--hdr-h) + var(--top-h)));
  padding: calc(var(--hdr-h) + var(--top-h) + clamp(20px, 3vw, 40px)) 0 clamp(72px, 7vw, 100px);
  background: var(--head-bg);
  color: var(--ink);
}
.stage__bg { position: absolute; z-index: -2; inset: 0; }
/* a still patch of squares in the bottom left corner of the slider */
.stage__deco { position: absolute; z-index: -1; left: 0; bottom: 0; width: clamp(200px, 20vw, 320px); opacity: .55; pointer-events: none; }
.stage__deco .mosaic { gap: 5px; }
@media (max-width: 900px) { .stage__deco { width: 150px; opacity: .4; } }
/* white at the top, so the header sits on white, fading into the tinted head below (squares included) */
.stage::before, .phead::before {
  content: ""; position: absolute; z-index: -1; left: 0; right: 0; top: 0; height: calc(var(--hdr-h) + var(--top-h) + clamp(70px, 9vw, 130px)); pointer-events: none;
  background: linear-gradient(180deg, #fff 0, #fff calc(var(--hdr-h) + var(--top-h) - 10px), rgba(255, 255, 255, 0) 100%);
}
/* long eased fade from the dark head into the white page (squares included) */
.stage::after, .phead::after {
  content: ""; position: absolute; z-index: -1; left: 0; right: 0; bottom: 0; height: var(--fade); pointer-events: none;
  background: linear-gradient(180deg, rgba(255, 255, 255, 0) 0%, rgba(255, 255, 255, .04) 20%, rgba(255, 255, 255, .16) 40%, rgba(255, 255, 255, .42) 60%, rgba(255, 255, 255, .76) 80%, #fff 100%);
}
/* home: no fade here; the blue runs on behind the service boxes and fades out under them (.teasers) */
.stage { --fade: 0px; padding-bottom: clamp(36px, 4vw, 56px); }
.stage::after { display: none; }
.stage__bg .mosaic { position: absolute; top: 0; right: 0; width: min(64%, 900px); opacity: .5;
  -webkit-mask-image: linear-gradient(to left, #000 20%, transparent); mask-image: linear-gradient(to left, #000 20%, transparent); }
.stage__in { position: relative; display: grid; grid-template-columns: 1fr 1.1fr; gap: clamp(32px, 5vw, 72px); align-items: center; }
.stage__text { max-width: 560px; }
.stage__text { display: grid; }
.stage__slide { grid-area: 1 / 1; opacity: 0; visibility: hidden; transform: translateY(14px); transition: opacity .6s, transform .7s var(--ease), visibility .6s; }
.stage__slide.is-on { opacity: 1; visibility: visible; transform: none; transition-delay: .15s; }
.stage__title { margin: 0 0 16px; font: 500 clamp(2rem, 3.6vw, 3.1rem)/1.08 var(--head); letter-spacing: -.025em; color: var(--char); }
.stage__lead { max-width: 500px; font-size: 1.02rem; line-height: 1.7; color: var(--mute); }
.stage__acts { display: flex; flex-wrap: wrap; gap: 12px; margin-top: 26px; }
.stage .btn--line { --bg: rgba(255, 255, 255, .7); }
/* controls, the usual way: round arrows at the two edges of the slider and dots centred at the bottom.
   .stage__nav is an overlay over the slider; only its buttons take clicks */
.stage__nav { position: absolute; z-index: 2; pointer-events: none; }
.stage__nav > * { pointer-events: auto; }
.stage__arr {
  position: absolute; top: 50%; display: grid; place-items: center; width: 48px; height: 48px; margin-top: -24px; padding: 0; cursor: pointer;
  color: var(--char); background: rgba(255, 255, 255, .92); border: 0; border-radius: 50%; box-shadow: 0 10px 26px -12px rgba(35, 42, 46, .55);
  transition: background .25s, color .25s;
}
.stage__arr--prev { left: 18px; }
.stage__arr:not(.stage__arr--prev) { right: 18px; }
.stage__arr .arr { width: 18px; height: 18px; }
.stage__arr--prev .arr { transform: scaleX(-1); }
.stage__arr:hover { background: var(--cyan-dk); color: #fff; }
.stage__arr:hover .arr { transform: none; }
.stage__arr--prev:hover .arr { transform: scaleX(-1); }
.stage__dots { position: absolute; left: 0; right: 0; bottom: 18px; display: flex; justify-content: center; gap: 10px; }
.stage__dot { width: 10px; height: 10px; padding: 0; border: 2px solid #fff; border-radius: 50%; background: rgba(56, 57, 56, .35); cursor: pointer; box-shadow: 0 1px 4px rgba(0, 0, 0, .25); transition: background .25s, transform .25s; }
.stage__dot:hover { background: rgba(56, 57, 56, .6); }
.stage__dot.is-on { background: var(--cyan); transform: scale(1.15); }

/* the slide's four photos: on wide screens a grid in the hero background on the right (below the header,
   fading out to the left and at the bottom); on phones a compact block above the text */
.stage__pic { position: relative; display: grid; grid-template-columns: repeat(4, 1fr); grid-template-rows: repeat(3, 1fr); gap: 8px; aspect-ratio: 4 / 3; }
.stage__pic::before { content: ""; position: absolute; z-index: -1; left: -14px; bottom: -14px; width: 38%; height: 46%; background: var(--sky); opacity: .45; }
.slot { position: relative; overflow: hidden; background: var(--mist-2); box-shadow: 0 24px 50px -30px rgba(35, 42, 46, .5); }
.slot img { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; opacity: 0; transform: scale(1.05); transition: opacity 1s ease, transform 8s linear; }
.slot img.is-on { opacity: 1; transform: none; }
.slot--a { grid-column: 1 / span 2; grid-row: 1 / span 3; }
.slot--b { grid-column: 3 / span 2; grid-row: 1; }
.slot--c { grid-column: 3; grid-row: 2 / span 2; }
.slot--d { grid-column: 4; grid-row: 2 / span 2; }
.slot--b img { transition-delay: .1s, 0s; }
.slot--c img { transition-delay: .2s, 0s; }
.slot--d img { transition-delay: .3s, 0s; }
@media (min-width: 901px) {
  /* the overlay covers the whole slider below the header: arrows at its left and right edges,
     dots centred at the bottom; the text keeps clear of the left arrow */
  .stage__nav { top: calc(var(--hdr-h) + var(--top-h)); left: 0; right: 0; bottom: 0; }
  .stage__arr--prev { left: max(16px, calc((100% - var(--max)) / 2 - 64px)); }
  .stage__arr:not(.stage__arr--prev) { right: max(16px, calc((100% - var(--max)) / 2 - 64px)); }
  .stage__dots { bottom: clamp(18px, 2vw, 28px); }
  .stage__in { padding-inline: max(var(--gutter), 84px); }
  .stage__in { position: static; grid-template-columns: minmax(0, 46%); min-height: clamp(340px, 30vw, 440px); }
  .stage__pic {
    position: absolute; z-index: -3; top: calc(var(--hdr-h) + var(--top-h)); right: 0; bottom: 0; width: 56%; aspect-ratio: auto; gap: 4px;
    -webkit-mask-image: linear-gradient(90deg, transparent 0, rgba(0, 0, 0, .6) 20%, #000 42%), linear-gradient(180deg, #000 72%, transparent 100%);
    -webkit-mask-composite: source-in; mask-image: linear-gradient(90deg, transparent 0, rgba(0, 0, 0, .6) 20%, #000 42%), linear-gradient(180deg, #000 72%, transparent 100%); mask-composite: intersect;
  }
  .stage__pic::before { display: none; }
  .stage__pic .slot { box-shadow: none; }
}
@media (max-width: 900px) {
  .stage__in { grid-template-columns: 1fr; gap: 28px; }
  /* phones: over the photo block, which is the first row of the grid */
  .stage__nav { top: 0; left: var(--gutter); right: var(--gutter); aspect-ratio: 16 / 10; }
  .stage__arr { width: 40px; height: 40px; margin-top: -20px; }
  .stage__arr--prev { left: 10px; }
  .stage__arr:not(.stage__arr--prev) { right: 10px; }
  .stage__dots { bottom: 12px; }
  .stage__pic { order: -1; gap: 6px; aspect-ratio: 16 / 10; }
  .stage__pic::before { left: -8px; bottom: -8px; }
}

/* the three services, overlapping the slider (as the three boxes under the old slider) */
/* below the hero's fade, on white: no overlap with the dark head */
.teasers { position: relative; z-index: 2; padding: clamp(8px, 1.5vw, 20px) 0 clamp(32px, 4vw, 56px); background: linear-gradient(180deg, #d2ebf7 0, #d2ebf7 40px, rgba(210, 235, 247, .45) 110px, #fff 170px); }
.teasers + .sec { padding-top: clamp(64px, 7vw, 96px); }
.teasers__in { display: grid; grid-template-columns: repeat(3, 1fr); gap: 24px; }
.teaser { position: relative; display: flex; flex-direction: column; background: var(--white); box-shadow: var(--shadow); text-decoration: none; transition: transform .35s var(--ease), box-shadow .35s; }
.teaser::after { content: ""; position: absolute; left: 0; right: 0; bottom: 0; height: 3px; background: var(--cyan); transform: scaleX(0); transform-origin: left; transition: transform .4s var(--ease); }
.teaser:hover { transform: translateY(-6px); box-shadow: 0 28px 50px -26px rgba(0, 121, 173, .55); }
.teaser:hover::after { transform: none; }
.teaser__img { aspect-ratio: 16 / 9; overflow: hidden; background: var(--mist-2); }
.teaser__img img { width: 100%; height: 100%; object-fit: cover; transition: transform .8s var(--ease); }
.teaser:hover .teaser__img img { transform: scale(1.05); }
/* the old site's pictures: shown whole on white, not cropped */
/* the old site's pictures, in a circle as on the old boxes */
.teaser__img--pic { display: grid; place-items: center; padding: 26px 0 30px; background: #fff; }
.teaser__img--pic img { width: min(150px, 80%); height: auto; aspect-ratio: 1; padding: 16px; border-radius: 50%; background: #fff; object-fit: contain; box-shadow: 0 0 0 6px rgba(0, 158, 213, .12), 0 16px 30px -18px rgba(35, 42, 46, .45); }
/* centred under the round picture */
.teaser__body { display: flex; flex-direction: column; align-items: center; flex: 1; padding: 4px 26px 28px; text-align: center; }
.teaser h3 { font-size: 1.35rem; margin-bottom: 8px; }
.teaser p { color: var(--mute); font-size: .97rem; }
.teaser .more { margin-top: auto; padding-top: 16px; }
@media (max-width: 900px) { .teasers__in { grid-template-columns: 1fr; } .teaser { flex-direction: row; } .teaser__img { flex: 0 0 34%; aspect-ratio: auto; } .teaser__body { padding: 20px; align-items: flex-start; text-align: left; } }
@media (max-width: 520px) { .teaser { flex-direction: column; } .teaser__body { align-items: center; text-align: center; padding-top: 4px; } .teaser__img { flex: none; aspect-ratio: 16 / 9; } .teaser__img--pic { aspect-ratio: auto; padding: 24px 0 18px; } .teaser__img--pic img { width: 120px; padding: 12px; } .teaser .more { padding-top: 12px; } }

/* =========================================================
   Sections
   ========================================================= */
.sec { padding: clamp(64px, 8vw, 104px) 0; }
.sec--tight { padding: clamp(48px, 6vw, 72px) 0; }
.sec--mist { background: var(--mist); }
/* the squares again, as a small cluster in one corner of a section */
.sec--tiles { position: relative; isolation: isolate; overflow: hidden; }
.sec__tiles { position: absolute; z-index: -1; inset: 0; pointer-events: none; }
.sec__head { max-width: 760px; margin-bottom: clamp(28px, 4vw, 44px); }
.sec__head--row { max-width: none; display: flex; justify-content: space-between; align-items: end; gap: 16px 40px; flex-wrap: wrap; }
.sec__head--row > div { max-width: 680px; }
.sec__head .lead { margin: 0; }

.intro { display: grid; grid-template-columns: 1fr 1fr; gap: clamp(32px, 6vw, 80px); align-items: start; }
.intro__big { font: 300 clamp(1.6rem, 2.9vw, 2.4rem)/1.3 var(--head); color: var(--char); margin-top: 8px; }
.intro .lead { margin-top: 12px; }
.intro .more { margin-top: 26px; }
@media (max-width: 860px) { .intro { grid-template-columns: 1fr; } }

.ticks { display: grid; gap: 10px; margin: 22px 0 0; padding: 0; list-style: none; }
.ticks li { position: relative; padding-left: 26px; }
.ticks li::before { content: ""; position: absolute; left: 0; top: .55em; width: 10px; height: 10px; background: var(--cyan); }
.ticks--row { display: flex; flex-wrap: wrap; gap: 10px 32px; font-weight: 600; }

/* the old home page's quoted question, with the documents next to it */
.band { position: relative; overflow: hidden; padding: clamp(56px, 7vw, 88px) 0; color: #fff; background: var(--cyan-dk); }
.callout { display: grid; grid-template-columns: 1.5fr 1fr 1fr; gap: clamp(16px, 2vw, 24px); align-items: stretch; }
.callout__q { position: relative; padding: clamp(8px, 1vw, 12px) clamp(24px, 4vw, 56px) clamp(8px, 1vw, 12px) 0; }
.callout__q::after { content: ""; position: absolute; right: 18px; top: 4px; width: 12px; height: 12px; background: #fff; box-shadow: -16px 0 0 var(--sky), 0 16px 0 rgba(255, 255, 255, .4); }
.callout__q p { font: 400 clamp(1.25rem, 2vw, 1.6rem)/1.4 var(--head); margin-bottom: 24px; padding-right: 36px; }
.callout__doc { display: flex; flex-direction: column; gap: 10px; padding: 26px; border: 1px solid rgba(255, 255, 255, .12); border-radius: 6px; background: rgba(255, 255, 255, .05); text-decoration: none; transition: background .2s, border-color .2s; }
.callout__doc:hover { background: rgba(255, 255, 255, .12); border-color: rgba(255, 255, 255, .45); }
.callout__doc .ico { width: 40px; height: 40px; padding: 8px; border-radius: 4px; background: rgba(255, 255, 255, .15); color: #fff; }
.callout__doc b { display: block; font: 500 1.05rem var(--head); color: #fff; }
.callout__doc span { color: rgba(255, 255, 255, .85); font-size: .92rem; }
.callout__doc .arr { margin-top: auto; color: #fff; }
@media (max-width: 900px) { .callout { grid-template-columns: 1fr; } .callout__q { padding: 0 0 8px; } .callout__doc { flex-direction: row; align-items: center; } .callout__doc .arr { margin: 0 0 0 auto; } }

/* products: an even grid of cards, photo on top and a label block below */
.wall { display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); gap: 20px; }
.wall--3 { grid-template-columns: repeat(3, minmax(0, 1fr)); margin-top: 12px; }
.blk .wall:not(.wall--3) { grid-template-columns: repeat(auto-fill, minmax(210px, 1fr)); }
.wall__i { position: relative; display: flex; flex-direction: column; background: var(--white); box-shadow: var(--shadow); text-decoration: none; transition: transform .35s var(--ease), box-shadow .35s; }
.wall__i::after { content: ""; position: absolute; left: 0; right: 0; bottom: 0; height: 3px; background: var(--cyan); transform: scaleX(0); transform-origin: left; transition: transform .4s var(--ease); }
.wall__i:hover { transform: translateY(-4px); box-shadow: 0 24px 44px -24px rgba(0, 121, 173, .5); }
.wall__i:hover::after { transform: none; }
.wall__img { position: relative; display: block; aspect-ratio: 4 / 3; overflow: hidden; background: var(--mist); }
.wall__img img { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; transition: transform .9s var(--ease); }
.wall__i--page .wall__img img { object-fit: contain; padding: 14px; }
.wall__i:hover .wall__img img { transform: scale(1.05); }
.wall__lbl { display: flex; flex-direction: column; flex: 1; padding: 16px 18px 18px; }
.wall__lbl b { font: 500 1.08rem/1.3 var(--head); color: var(--char); }
.wall__lbl small { margin-top: 4px; font-size: .85rem; line-height: 1.5; color: var(--mute); }
.wall__meta { display: flex; align-items: center; gap: 6px; margin-top: auto; padding-top: 14px; font: 500 .85rem var(--head); color: var(--cyan-dk); }
.wall__meta .ico { width: 15px; height: 15px; transition: transform .3s var(--ease); }
.wall__i:hover .wall__meta .ico { transform: translateX(4px); }
.wall__i--all { justify-content: flex-end; min-height: 100%; background: var(--cyan-dk); color: #fff; }
.wall__i--all > .ico { position: absolute; top: 22px; left: 18px; width: 36px; height: 36px; }
.wall__i--all .wall__lbl { flex: 0 0 auto; }
.wall__i--all .wall__lbl b, .wall__i--all .wall__lbl small, .wall__i--all .wall__meta { color: #fff; }
.wall__i--all::after { background: #fff; }
@media (max-width: 1020px) { .wall { grid-template-columns: repeat(2, minmax(0, 1fr)); } .wall--3 { grid-template-columns: repeat(3, minmax(0, 1fr)); } }
@media (max-width: 760px) { .wall, .wall--3, .blk .wall:not(.wall--3) { grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 12px; } .wall__lbl { padding: 12px 14px 14px; } }
@media (max-width: 420px) { .wall__lbl b { font-size: .95rem; } .wall__lbl small { font-size: .8rem; } }

/* clients */
.stats { display: grid; grid-template-columns: repeat(3, 1fr); gap: 28px; }
.stat { padding-top: 22px; border-top: 3px solid var(--cyan); }
.stat + .stat { border-top-color: var(--sky); }
.stat__n { display: block; font: 300 clamp(2.8rem, 5vw, 4.1rem)/1 var(--head); color: var(--cyan-dk); letter-spacing: -.03em; }
.stat__n small { margin-left: 8px; font: 500 .95rem var(--head); color: var(--char); letter-spacing: 0; }
.stat h3 { margin: 14px 0 6px; font-size: 1.1rem; }
.stat p { color: var(--mute); font-size: .95rem; }
@media (max-width: 860px) { .stats { grid-template-columns: 1fr; } }

/* partner logos: a grid of squares with hairlines */
.logos { display: grid; grid-template-columns: repeat(4, 1fr); gap: 1px; background: var(--line); border: 1px solid var(--line); }
.logos__i { display: flex; align-items: center; justify-content: center; gap: 14px; min-height: 120px; padding: 18px; background: var(--white); text-decoration: none; transition: background .2s; }
.logos__mark { display: grid; place-items: center; }
.logos__mark img { max-height: 46px; max-width: 150px; width: auto; filter: grayscale(1); opacity: .6; transition: filter .3s, opacity .3s; }
.logos__mark b { font: 700 1.3rem var(--head); color: var(--char); opacity: .55; letter-spacing: .02em; transition: opacity .3s, color .3s; }
a.logos__i:hover img, a.logos__i:focus-visible img { filter: none; opacity: 1; }
a.logos__i:hover b, a.logos__i:focus-visible b { opacity: 1; color: var(--cyan-dk); }
.logos--detail { grid-template-columns: repeat(3, 1fr); }
.logos--detail .logos__i { flex-direction: column; align-items: flex-start; justify-content: flex-start; min-height: 0; padding: 24px; }
.logos--detail .logos__mark { height: 52px; }
.logos--detail .logos__i > span:last-child { color: var(--mute); font-size: .9rem; }
.logos--detail .logos__i > span:last-child b { display: block; font: 500 1.02rem var(--head); color: var(--char); opacity: 1; }
@media (max-width: 860px) { .logos, .logos--detail { grid-template-columns: 1fr 1fr; } }

/* contact block (as the old "Επικοινωνία" box) + map */
.reach { display: grid; grid-template-columns: .95fr 1.05fr; gap: 24px; align-items: stretch; }
.reach__box { padding: clamp(24px, 3vw, 36px); background: var(--white); border: 1px solid var(--line); border-top: 4px solid var(--cyan); }
.reach__list { display: grid; grid-template-columns: 1fr 1fr; gap: 18px 24px; margin: 6px 0 28px; }
.reach__list dt { font-size: .74rem; font-weight: 600; letter-spacing: .1em; text-transform: uppercase; color: var(--mute); }
.reach__list dd { margin: 2px 0 0; font-weight: 600; }
.reach__list a { text-decoration: none; }
.reach__list a:hover { color: var(--cyan-dk); }
.reach__list small { display: block; font-weight: 400; font-size: .85rem; color: var(--mute); }
.reach__tel { font: 700 1.4rem var(--head); color: var(--cyan-dk); }
.map { display: block; width: 100%; min-height: 380px; height: 100%; border: 0; filter: grayscale(.35); }
.map--wide { height: 420px; margin-bottom: clamp(56px, 7vw, 88px); }
@media (max-width: 860px) { .reach { grid-template-columns: 1fr; } }
@media (max-width: 460px) { .reach__list { grid-template-columns: 1fr; } }

/* a row of squares on the edge of the footer */
.tilerow { display: grid; grid-template-columns: repeat(48, 1fr); align-items: end; background: linear-gradient(transparent 50%, var(--grey) 50%); }

/* =========================================================
   Footer (the old site's grey band)
   ========================================================= */
.ftr { padding: clamp(40px, 5vw, 64px) 0 24px; background: var(--grey); color: #cfd6d9; font-size: .93rem; }
.ftr__grid { display: grid; grid-template-columns: 1.4fr 1fr 1fr 1.2fr; gap: 36px; }
.ftr__logo { height: 58px; width: auto; margin-bottom: 14px; }
.ftr__motto { font: 500 .95rem var(--head); color: var(--cyan-lt); letter-spacing: .03em; }
.ftr h4 { margin-bottom: 14px; font-size: .8rem; font-weight: 500; letter-spacing: .12em; text-transform: uppercase; color: #fff; }
.ftr .ftr__h4b { margin-top: 26px; }
.ftr ul { display: grid; gap: 7px; margin: 0; padding: 0; list-style: none; }
.ftr a { text-decoration: none; }
.ftr a:hover { color: #fff; }
.ftr__tel { display: block; margin-bottom: 8px; font: 700 1.4rem var(--head); color: #fff; }
.ftr__social { display: flex; gap: 8px; margin-top: 16px; }
.ftr__social a { display: grid; place-items: center; width: 40px; height: 40px; border: 1px solid rgba(255, 255, 255, .22); color: #fff; }
.ftr__social a:hover { background: var(--cyan-dk); border-color: var(--cyan-dk); }
.ftr__social .ico { width: 19px; height: 19px; }
.ftr__bot { display: flex; justify-content: space-between; flex-wrap: wrap; gap: 10px 24px; margin-top: 44px; padding-top: 20px; border-top: 1px solid rgba(255, 255, 255, .14); font-size: .85rem; }
@media (max-width: 900px) { .ftr__grid { grid-template-columns: 1fr 1fr; } }
@media (max-width: 520px) { .ftr__grid { grid-template-columns: 1fr; } }

/* mobile call bar */
.callbar { display: none; }
@media (max-width: 680px) {
  .callbar {
    position: fixed; z-index: 80; left: 0; right: 0; bottom: 0; display: grid; grid-template-columns: 1fr 1fr;
    transform: translateY(100%); transition: transform .35s var(--ease); box-shadow: 0 -8px 24px -12px rgba(0, 0, 0, .35);
  }
  .callbar.is-on { transform: none; }
  .callbar a { display: flex; justify-content: center; align-items: center; gap: 8px; padding: 15px; color: #fff; text-decoration: none; font: 500 1rem var(--head); background: var(--char); }
  .callbar a:first-child { background: var(--cyan-dk); }
  .callbar .ico { width: 18px; height: 18px; }
  .ftr { padding-bottom: 80px; }
}

/* =========================================================
   Inner pages: light head with squares, sidebar menu + content
   ========================================================= */
.phead {
  position: relative; overflow: hidden; isolation: isolate; color: var(--ink);
  margin-top: calc(-1 * (var(--hdr-h) + var(--top-h)));
  --fade: clamp(90px, 10vw, 140px);
  padding: calc(var(--hdr-h) + var(--top-h) + clamp(22px, 3vw, 40px)) 0 calc(var(--lift) + clamp(52px, 6vw, 84px));
  background: var(--head-bg);
}
.phead__tiles { position: absolute; z-index: -2; inset: 0; }
.phead__tiles .mosaic { position: absolute; top: 0; right: 0; width: min(54%, 660px);
  -webkit-mask-image: linear-gradient(to left, #000 30%, transparent); mask-image: linear-gradient(to left, #000 30%, transparent); }
.phead__in { position: relative; }
.phead__in > * { max-width: 780px; }
.crumb { display: flex; flex-wrap: wrap; align-items: center; gap: 6px; margin-bottom: 20px; font-size: .85rem; color: var(--mute); }
.crumb b { margin-right: 6px; color: var(--char); font-weight: 600; }
.crumb i { font-style: normal; color: var(--cyan); }
.crumb a { text-decoration: none; }
.crumb a:hover { color: var(--cyan-dk); }
.crumb span { color: var(--ink); }
.phead h1 { font-size: clamp(2rem, 4vw, 3.1rem); letter-spacing: -.02em; color: var(--char); }
.phead__lead { margin-top: 16px; font-size: 1.12rem; line-height: 1.7; color: var(--mute); max-width: 660px; }
@media (max-width: 760px) { .phead__tiles .mosaic { width: 100%; opacity: .45; } }

/* inner pages: the content rises into the bottom of the head's gradient */
.phead + * { position: relative; z-index: 1; margin-top: calc(-1 * var(--lift)); }
.phead + .layout { padding-top: 0; }
.layout { display: grid; grid-template-columns: 280px minmax(0, 1fr); gap: clamp(32px, 4vw, 56px); align-items: start; padding-top: clamp(36px, 5vw, 60px); padding-bottom: clamp(64px, 8vw, 100px); }
.side { position: sticky; top: calc(var(--hdr-h) + 24px); display: grid; gap: 16px; }
/* the menu: a light card with a small label, soft rows, the current page tinted with a thin cyan bar */
.side__menu { padding: 8px; background: var(--white); border: 1px solid #e6edef; border-radius: 6px; box-shadow: 0 18px 40px -30px rgba(35, 42, 46, .35); }
.side__menu summary {
  display: flex; justify-content: space-between; align-items: center; padding: 10px 12px 12px; list-style: none; cursor: pointer;
  font: 600 .74rem var(--body); letter-spacing: .12em; text-transform: uppercase; color: var(--mute);
}
.side__menu summary::-webkit-details-marker { display: none; }
.side__menu summary::after { content: ""; width: 7px; height: 7px; border-right: 1.6px solid currentColor; border-bottom: 1.6px solid currentColor; transform: rotate(-135deg); transition: transform .25s; display: none; }
.side__menu > ul { margin: 0; padding: 0; list-style: none; display: grid; gap: 2px; }
.side__menu li a {
  position: relative; display: flex; align-items: center; gap: 12px; padding: 9px 12px; border-radius: 4px;
  color: var(--char); text-decoration: none; font-size: .94rem; transition: background .2s, color .2s;
}
.side__menu li a:hover { background: var(--mist); color: var(--ink); }
.side__menu .ico { flex: none; width: 32px; height: 32px; padding: 7px; border-radius: 4px; background: var(--mist); color: var(--sky); transition: background .2s, color .2s; }
.side__menu li a:hover .ico { color: var(--cyan-dk); }
.side__menu a[aria-current] { background: var(--cyan-bg); color: var(--ink); font-weight: 600; }
.side__menu a[aria-current]::before { content: ""; position: absolute; left: 0; top: 10px; bottom: 10px; width: 3px; border-radius: 0 3px 3px 0; background: var(--cyan); }
.side__menu a[aria-current] .ico { background: var(--white); color: var(--cyan-dk); }
/* the page's galleries, under the current page: a thin guide line with the one in view highlighted (scroll spy) */
.side__menu li ul { position: relative; margin: 4px 0 8px 27px; padding: 0 0 0 14px; list-style: none; border-left: 1px solid var(--line); }
.side__menu li ul a { padding: 6px 10px; font-size: .88rem; color: var(--mute); font-weight: 400; }
.side__menu li ul a::before { content: ""; position: absolute; left: -15px; top: 50%; width: 1px; height: 0; background: var(--cyan); transition: height .3s var(--ease), top .3s var(--ease); }
.side__menu li ul small { margin-left: auto; padding: 1px 7px; border-radius: 10px; background: var(--mist); color: var(--mute); font-size: .74rem; }
.side__menu li ul a.is-on { color: var(--ink); font-weight: 600; background: transparent; }
.side__menu li ul a.is-on::before { top: 4px; height: calc(100% - 8px); width: 2px; left: -15.5px; }
.side__menu li ul a.is-on small { background: var(--cyan-bg); color: var(--cyan-dk); }

/* phones / tablets: sticky row of gallery chips under the header */
.secnav { display: none; }
/* contact card: quiet, with the phone number as the one strong line */
.side__contact { padding: 22px; border-radius: 6px; background: linear-gradient(160deg, var(--cyan-bg), #fff 70%); border: 1px solid #e3f0f6; }
.side__contact h3 { margin-bottom: 6px; font: 600 .74rem var(--body); letter-spacing: .12em; text-transform: uppercase; color: var(--mute); }
.side__tel { display: block; font: 700 1.4rem var(--head); color: var(--ink); text-decoration: none; letter-spacing: -.01em; }
.side__tel:hover { color: var(--cyan-dk); }
.side__contact p { margin: 8px 0 18px; font-size: .88rem; line-height: 1.75; color: var(--mute); }
.side__contact p a { text-decoration: none; color: var(--mute); }
.side__contact p a:hover { color: var(--cyan-dk); }
.side__contact .btn { border-radius: 4px; }
.main { min-width: 0; }
@media (max-width: 980px) {
  .layout { grid-template-columns: 1fr; padding-top: 24px; }
  .side { position: static; }
  .side__contact { display: none; }
  /* phones: the menu folds; its label becomes the toggle */
  .side__menu summary { padding: 12px; font-size: .8rem; color: var(--char); }
  .side__menu summary::after { display: block; transform: rotate(45deg) translate(-2px, -2px); }
  .side__menu[open] summary::after { transform: rotate(-135deg); }
  .secnav {
    display: block; position: sticky; z-index: 50; top: var(--hdr-h); margin: 0 calc(-1 * var(--gutter)) 20px;
    background: rgba(255, 255, 255, .94); -webkit-backdrop-filter: blur(12px); backdrop-filter: blur(12px); border-bottom: 1px solid var(--line);
  }
  .secnav__in { display: flex; gap: 8px; padding: 10px var(--gutter); overflow-x: auto; scrollbar-width: none; -webkit-overflow-scrolling: touch; scroll-snap-type: x proximity; }
  .secnav__in::-webkit-scrollbar { display: none; }
  .secnav a {
    flex: none; display: inline-flex; align-items: center; gap: 8px; padding: 8px 14px; scroll-snap-align: start;
    border: 1px solid var(--line); border-radius: var(--r); background: var(--white); color: var(--char); text-decoration: none;
    font: 500 .9rem var(--head); white-space: nowrap; transition: background .25s, border-color .25s, color .25s;
  }
  .secnav small { font: 500 .75rem var(--body); color: var(--mute); }
  .secnav a.is-on { background: var(--cyan-dk); border-color: var(--cyan-dk); color: #fff; }
  .secnav a.is-on small { color: rgba(255, 255, 255, .8); }
  .bsec { scroll-margin-top: calc(var(--hdr-h) + 76px); }
}

/* content blocks */
.blk + .blk, .blk + .docbox, .docbox + .blk, .figure + .blk, .figpair + .blk, .sign + .blk, .blk + .sign, .docbox + .sign, .docbox + .pdf { margin-top: clamp(44px, 5.5vw, 68px); }
.blk p { color: #4b565c; }
.blk .lead { color: var(--mute); }
.blk a:not(.btn):not(.more):not(.wall__i):not(.logos__i):not(.gal__i) { color: var(--cyan-dk); }
.figure { margin: 0 0 clamp(36px, 4vw, 52px); }
.figure img { width: 100%; aspect-ratio: 16 / 7; object-fit: cover; }
.figpair { display: grid; grid-template-columns: 1.4fr 1fr; gap: 8px; margin-bottom: clamp(36px, 4vw, 52px); }
.figpair img { width: 100%; height: 100%; aspect-ratio: 4 / 3; object-fit: cover; }
.figpair img + img { aspect-ratio: auto; }
.note { margin-top: 12px; font-size: .86rem; color: var(--mute) !important; }

.cards { display: grid; grid-template-columns: repeat(auto-fill, minmax(230px, 1fr)); gap: 10px; }
.card { padding: 22px; border: 1px solid var(--line); background: var(--white); transition: border-color .25s; }
.card:hover { border-color: var(--cyan); }
.card .ico { width: 40px; height: 40px; padding: 9px; background: var(--cyan-bg); color: var(--cyan-dk); }
.card h3 { margin: 14px 0 6px; font-size: 1.06rem; }
.card p { font-size: .92rem; color: var(--mute) !important; }

.alert { display: grid; grid-template-columns: 1fr auto; gap: 28px; align-items: center; padding: 26px 28px; background: var(--mist); border-left: 4px solid var(--cyan); }
.alert__tels a { display: block; font: 700 1.6rem var(--head); color: var(--cyan-dk) !important; text-decoration: none; }
.alert__tels span { font-size: .9rem; color: var(--mute); }
@media (max-width: 640px) { .alert { grid-template-columns: 1fr; } }

.steps { display: grid; grid-template-columns: repeat(3, 1fr); gap: 28px 24px; margin: 0; padding: 0; list-style: none; counter-reset: st; }
.steps li { position: relative; padding-top: 50px; counter-increment: st; }
.steps li::before { content: counter(st); position: absolute; top: 0; left: 0; display: grid; place-items: center; width: 34px; height: 34px; background: var(--char); color: #fff; font: 500 .9rem var(--head); }
.steps li::after { content: ""; position: absolute; top: 17px; left: 46px; right: 0; height: 1px; background: var(--line); }
.steps h3 { margin-bottom: 6px; font-size: 1.05rem; }
.steps p { font-size: .93rem; color: var(--mute) !important; }
@media (max-width: 760px) { .steps { grid-template-columns: 1fr 1fr; } }
@media (max-width: 480px) { .steps { grid-template-columns: 1fr; } }

.docbox { display: grid; grid-template-columns: auto 1fr auto; gap: 20px; align-items: center; padding: 22px 26px; background: var(--white); border: 1px solid var(--line); border-left: 4px solid var(--cyan); }
.docbox > .ico { width: 48px; height: 48px; padding: 11px; background: var(--cyan-bg); color: var(--cyan-dk); }
.docbox h3 { font-size: 1.1rem; }
.docbox p { margin: 4px 0 0; font-size: .92rem; color: var(--mute); }
.docbox__acts { display: flex; flex-wrap: wrap; gap: 10px; }
@media (max-width: 700px) { .docbox { grid-template-columns: 1fr; } }
.pdf { display: block; width: 100%; height: min(86vh, 980px); margin-top: 16px; border: 1px solid var(--line); background: var(--mist); }
@media (max-width: 760px) { .pdf { display: none; } }

.quote { margin: 0 0 22px; padding-left: 22px; border-left: 4px solid var(--cyan); }
.quote p { font: 400 1.25rem/1.45 var(--head); color: var(--char) !important; }
.quote cite { display: block; margin-top: 8px; font-size: .86rem; font-style: normal; color: var(--mute); }

/* the client's sign-off */
.sign { position: relative; margin: 0; padding: clamp(26px, 3.5vw, 40px); background: var(--char); color: #fff; overflow: hidden; }
.sign::after { content: ""; position: absolute; right: 22px; top: 22px; width: 12px; height: 12px; background: var(--cyan); box-shadow: -16px 0 0 var(--sky), 0 16px 0 rgba(0, 158, 213, .4); }
.sign blockquote { margin: 0 0 14px; padding-right: 40px; font: 400 clamp(1.25rem, 2.2vw, 1.6rem)/1.35 var(--head); }
.sign blockquote::before { content: "«"; } .sign blockquote::after { content: "»"; }
.sign p { color: #c7d0d4; }
.sign figcaption { margin-top: 14px; color: #a9b8bd; font-size: .92rem; }
.sign figcaption b { color: #fff; font-weight: 600; }
.fbox .sign { margin-top: 32px; }

/* call to action: a cyan band with squares */
.ctabox { position: relative; display: grid; grid-template-columns: 1fr auto; gap: 28px; align-items: center; margin-top: clamp(44px, 5.5vw, 68px); padding: clamp(26px, 3.5vw, 38px); background: var(--cyan-dk); color: #fff; overflow: hidden; isolation: isolate; }
.ctabox__tiles { position: absolute; z-index: -1; top: 0; right: 0; bottom: 0; width: 270px; display: grid; grid-template-columns: repeat(6, 1fr); align-content: start; gap: 4px; opacity: .35; }
.ctabox__tiles i { background: #fff !important; }
.ctabox h2 { color: #fff; font-size: clamp(1.4rem, 2.4vw, 1.9rem); }
.ctabox p { margin-top: 8px; color: rgba(255, 255, 255, .86); }
.ctabox__acts { display: flex; flex-direction: column; align-items: flex-end; gap: 12px; }
.ctabox__tel { display: inline-flex; align-items: center; gap: 8px; color: #fff; text-decoration: none; font: 500 1.05rem var(--head); }
@media (max-width: 760px) { .ctabox { grid-template-columns: 1fr; } .ctabox__acts { align-items: flex-start; } }

.links { display: grid; grid-template-columns: 1fr 1fr; gap: 10px; }
.links a { display: flex; align-items: center; gap: 14px; padding: 18px; border: 1px solid var(--line); text-decoration: none; color: var(--ink) !important; transition: border-color .2s, background .2s; }
.links a:hover { border-color: var(--cyan); background: var(--mist); }
.links .ico { color: var(--cyan-dk); }
.links span { font-size: .88rem; color: var(--mute); }
.links b { display: block; font: 500 1.02rem var(--head); color: var(--char); }
.links .arr { margin-left: auto; color: var(--cyan-dk); }
@media (max-width: 640px) { .links { grid-template-columns: 1fr; } }

.names { display: grid; grid-template-columns: 1fr 1fr; gap: 0 28px; margin: 0; padding: 0; list-style: none; border-top: 1px solid var(--line); }
.names li { position: relative; padding: 14px 0 14px 22px; border-bottom: 1px solid var(--line); }
.names li::before { content: ""; position: absolute; left: 0; top: 23px; width: 9px; height: 9px; background: var(--cyan); }
.names b { display: block; font-weight: 600; }
.names small { color: var(--mute); }
@media (max-width: 560px) { .names { grid-template-columns: 1fr; } }
.stats--col .stat h3 { font-size: 1.02rem; }

/* ---------- galleries ---------- */
.bsec { scroll-margin-top: calc(var(--hdr-h) + 20px); }
.bsec__head { display: flex; justify-content: space-between; align-items: end; gap: 12px 32px; flex-wrap: wrap; margin-bottom: 18px; }
.bsec__head .t-head { margin-bottom: 0; }
.bsec__head p { margin: 6px 0 0; color: var(--mute); }
.gal { --min: 180px; display: grid; grid-template-columns: repeat(auto-fill, minmax(var(--min), 1fr)); gap: 8px; }
.gal--wide { --min: 280px; }
.gal__i { display: flex; flex-direction: column; background: #fff; border: 1px solid var(--line); text-decoration: none; cursor: zoom-in; transition: border-color .25s, box-shadow .25s; }
.gal__i:hover { border-color: var(--cyan); box-shadow: var(--shadow); }
.gal__img { position: relative; aspect-ratio: var(--ar, 3 / 4); display: grid; place-items: center; padding: 8px; }
.gal__img img { width: 100%; height: 100%; object-fit: contain; }
.gal--cover .gal__img { padding: 0; }
.gal--cover .gal__img img { position: absolute; inset: 0; object-fit: cover; }
.gal__cap { padding: 8px 10px 9px; border-top: 1px solid var(--line); font: 500 .78rem var(--head); color: var(--char); }
.js .gal__i.is-more { display: none; }
.gal.is-all .gal__i.is-more { display: flex; }
.gal__foot { display: none; margin-top: 18px; text-align: center; }
.js .gal__foot { display: block; }
.gal.is-all + .gal__foot { display: none; }
@media (max-width: 560px) { .gal { --min: 130px; gap: 6px; } .gal--wide { --min: 100%; } }

.lb { position: fixed; inset: 0; z-index: 300; grid-template-rows: auto minmax(0, 1fr) auto; width: 100%; max-width: none; height: 100%; max-height: none; margin: 0; padding: 0; border: 0; background: rgba(28, 33, 36, .97); color: #fff; }
.lb[open] { display: grid; }
.lb::backdrop { background: rgba(28, 33, 36, .9); }
.lb__bar { display: flex; justify-content: space-between; align-items: center; gap: 16px; padding: 14px var(--gutter); font-size: .9rem; color: #b5c2c7; }
.lb__stage { position: relative; display: flex; align-items: center; justify-content: center; min-height: 0; padding: 0 84px; touch-action: pan-y; }
.lb__stage img { max-width: 100%; max-height: 100%; width: auto; height: auto; object-fit: contain; background: #fff; }
.lb__cap { min-height: 56px; padding: 14px var(--gutter) 18px; text-align: center; font: 500 1rem var(--head); }
.lb button { display: grid; place-items: center; width: 48px; height: 48px; padding: 0; border: 1px solid rgba(255, 255, 255, .22); background: rgba(255, 255, 255, .06); color: #fff; cursor: pointer; transition: background .2s, border-color .2s; }
.lb button:hover { background: var(--cyan-dk); border-color: var(--cyan-dk); }
.lb button svg { width: 20px; height: 20px; fill: none; stroke: currentColor; stroke-width: 2; stroke-linecap: round; stroke-linejoin: round; }
.lb__prev, .lb__next { position: absolute; top: 50%; margin-top: -24px; }
.lb__prev { left: 20px; }
.lb__next { right: 20px; }
@media (max-width: 680px) {
  .lb { grid-template-rows: auto minmax(0, 1fr) auto auto; }
  .lb__stage { padding: 0 8px; }
  .lb__nav { display: flex; justify-content: center; gap: 16px; padding-bottom: 18px; }
  .lb__prev, .lb__next { position: static; margin: 0; }
}

/* =========================================================
   Contact page + form
   ========================================================= */
.contact { display: grid; grid-template-columns: 1.35fr .65fr; gap: 28px; align-items: start; padding-top: clamp(36px, 5vw, 60px); padding-bottom: 32px; }
.contact .reach__box { position: sticky; top: calc(var(--hdr-h) + 20px); }
.contact .reach__list { grid-template-columns: 1fr; margin-bottom: 0; }
@media (max-width: 900px) { .contact { grid-template-columns: 1fr; } .contact .reach__box { position: static; } }
.fbox { padding: clamp(22px, 3.5vw, 38px); background: var(--white); border: 1px solid var(--line); }
.form { display: grid; gap: 16px; margin-top: 8px; }
.form__row { display: grid; grid-template-columns: 1fr 1fr; gap: 16px; }
@media (max-width: 600px) { .form__row { grid-template-columns: 1fr; } }
.field label { display: block; margin-bottom: 6px; font-size: .86rem; font-weight: 600; }
.field input, .field textarea { width: 100%; padding: 13px 14px; border: 1.5px solid var(--line); border-radius: var(--r); background: var(--mist); font: 400 1rem var(--body); color: var(--ink); transition: border-color .2s, background .2s; }
.field textarea { min-height: 140px; resize: vertical; }
.field input:focus, .field textarea:focus { outline: 0; border-color: var(--cyan); background: #fff; }
.chips { display: flex; flex-wrap: wrap; gap: 8px; margin: 0; padding: 0; border: 0; }
.chips legend { margin-bottom: 8px; font-size: .86rem; font-weight: 600; }
.chips label { position: relative; }
.chips input { position: absolute; inset: 0; opacity: 0; }
.chips span { display: inline-block; padding: 9px 15px; border: 1.5px solid var(--line); border-radius: var(--r); font-size: .9rem; cursor: pointer; transition: all .2s; }
.chips input:checked + span { background: var(--char); border-color: var(--char); color: #fff; }
.chips input:focus-visible + span { outline: 3px solid var(--cyan); outline-offset: 2px; }
.agree { display: flex; gap: 12px; align-items: flex-start; font-size: .9rem; color: var(--mute); cursor: pointer; }
.agree input { flex: none; width: 20px; height: 20px; margin-top: 2px; accent-color: var(--cyan-dk); }
.agree a, .form__rc a { color: var(--cyan-dk); }
.hp { position: absolute; left: -9999px; width: 1px; height: 1px; overflow: hidden; }
.form__status { min-height: 1.4em; font-weight: 600; font-size: .95rem; }
.form__status.is-ok { color: #1f7a3d; }
.form__status.is-err { color: #b3261e; }
.form__status.is-busy { color: var(--mute); }
.form__rc { margin: 0; font-size: .8rem; color: var(--mute); }
.grecaptcha-badge { visibility: hidden; }
.form__fallback { display: none; padding: 14px 18px; font-weight: 600; }
.form__fallback:target { display: block; }
.form__fallback--ok { background: #e7f4ec; color: #1f7a3d; }
.form__fallback--err { background: #fbeaea; color: #b3261e; }

/* legal */
.legal h2 { margin: 36px 0 10px; font-size: 1.3rem; }
.legal h2:first-child { margin-top: 0; }
.legal p { color: var(--mute); }
.legal a { color: var(--cyan-dk); }
.legal__date { margin-top: 36px; font-size: .9rem; }