/* ============================================================
   Bio Cleaning Experts Χιωτάκης — Foundation stylesheet
   Vanilla CSS. Cerebro design system + brand palette.
   ============================================================ */

/* ---------- Self-hosted fonts (assets/fonts, no third-party requests) ----------
   Variable woff2 files: one file per subset covers all weights.
   Hanken Grotesk has no Greek subset — Greek glyphs fall back via --ff-display. */
@font-face {
  font-family: 'Hanken Grotesk';
  font-style: normal;
  font-weight: 400 900;
  font-display: swap;
  src: url('assets/fonts/hanken-grotesk-latin.woff2') format('woff2');
  unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+0304, U+0308, U+0329, U+2000-206F, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD;
}
@font-face {
  font-family: 'Hanken Grotesk';
  font-style: italic;
  font-weight: 700;
  font-display: swap;
  src: url('assets/fonts/hanken-grotesk-italic-latin.woff2') format('woff2');
  unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+0304, U+0308, U+0329, U+2000-206F, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD;
}
@font-face {
  font-family: 'Inter';
  font-style: normal;
  font-weight: 300 600;
  font-display: swap;
  src: url('assets/fonts/inter-greek.woff2') format('woff2');
  unicode-range: U+0370-0377, U+037A-037F, U+0384-038A, U+038C, U+038E-03A1, U+03A3-03FF;
}
@font-face {
  font-family: 'Inter';
  font-style: normal;
  font-weight: 300 600;
  font-display: swap;
  src: url('assets/fonts/inter-latin.woff2') format('woff2');
  unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+0304, U+0308, U+0329, U+2000-206F, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD;
}

/* ---------- Design tokens ---------- */
:root {
  /* Brand palette (derived from logo) */
  --c-green:        #70A404;   /* PRIMARY — buttons, green text, accents */
  --c-green-light:  #98BF02;   /* lighter logo green — gradients, hover glow, leaf */
  --c-green-dark:   #557D02;   /* darker — pressed / hover depth */
  --c-green-soft:   #F2F7E0;   /* very soft green — section backgrounds */
  --c-white:        #ffffff;
  --c-bg-grey:      #F3F4EF;   /* light grey page background; cards stay white on it */
  --c-ink:          #0a0a0a;   /* black details, body text */
  --c-ink-2:        #141518;   /* slightly lifted dark — footer, to separate from CTA */
  --c-muted:        #6b6b6b;   /* secondary text, labels */
  --c-line:         rgba(10,10,10,0.08);
  --c-line-strong:  rgba(10,10,10,0.14);

  /* Brand gradient helper (logo "signature" look) */
  --grad-green: linear-gradient(135deg, #98BF02 0%, #70A404 100%);

  /* Backwards-compatible aliases (design-system naming) */
  --c-bg:    var(--c-bg-grey);
  --c-text:  var(--c-ink);

  /* Typography */
  --ff-display: 'Hanken Grotesk', 'Helvetica Neue', Helvetica, Arial, sans-serif;
  --ff-body:    'Inter', system-ui, sans-serif;

  /* Layout */
  --container: 1200px;
  --nav-h:     90px;   /* 70px on mobile (≤768px) */

  /* Radius */
  --radius-card:   10px;
  --radius-btn:    8px;
  --radius-pill:   999px;

  /* Easing */
  --ease-out:   cubic-bezier(0.22, 1, 0.36, 1);
  --ease-inout: cubic-bezier(0.4, 0, 0.2, 1);
}

@media (max-width: 768px) {
  :root { --nav-h: 70px; }
}

/* ---------- Reset / base ---------- */
*, *::before, *::after { box-sizing: border-box; }

html {
  scroll-behavior: smooth;
  -webkit-text-size-adjust: 100%;
}

body {
  margin: 0;
  font-family: var(--ff-body);
  font-weight: 400;
  color: var(--c-ink);
  background: var(--c-bg);
  line-height: 1.6;
  -webkit-font-smoothing: antialiased;
  text-rendering: optimizeLegibility;
  overflow-x: hidden;
}

a { color: inherit; text-decoration: none; }
img, svg { display: block; max-width: 100%; }
button { font-family: inherit; cursor: pointer; }

h1, h2, h3 {
  font-family: var(--ff-display);
  margin: 0;
  line-height: 1.05;
  letter-spacing: -0.02em;
}

/* ---------- Layout helpers ---------- */
.container {
  width: 100%;
  max-width: var(--container);
  margin: 0 auto;
  padding: 0 2.5rem;
}

.section {
  padding: 8rem 0;
  scroll-margin-top: calc(var(--nav-h) + 28px);   /* keep headings clear of the pill */
}

.section--soft { background: var(--c-green-soft); }

.section--hero {
  min-height: 92vh;
  display: flex;
  align-items: center;
  padding-top: calc(var(--nav-h) + 4rem);
  padding-bottom: 5rem;
}

/* ---------- Hero ---------- */
.hero-inner {
  display: flex;
  flex-direction: column;
  align-items: center;
  text-align: center;
}

.hero-eyebrow {
  font-family: var(--ff-body);
  font-weight: 600;
  font-size: 0.72rem;
  letter-spacing: 0.2em;
  text-transform: uppercase;
  color: var(--c-green-dark);
  margin: 0 0 1.5rem;
}

.hero-headline {
  font-family: var(--ff-display);
  font-weight: 900;
  font-size: clamp(2.5rem, 6vw, 5.4rem);
  line-height: 1.04;
  letter-spacing: -0.03em;
  margin: 0;
  max-width: 16ch;
}

.hero-line { display: block; }

/* Responsive line breaks — hidden on desktop, enabled on mobile only.
   They control wrapping without touching the .hw word-reveal structure. */
.hero-br, .eyebrow-br { display: none; }

/* Gradient-filled accent word */
.hero-accent {
  background: var(--grad-green);
  -webkit-background-clip: text;
  background-clip: text;
  -webkit-text-fill-color: transparent;
  color: var(--c-green);   /* fallback */
}

.hero-sub {
  font-family: var(--ff-body);
  font-weight: 400;
  font-size: clamp(1rem, 1.3vw, 1.12rem);
  line-height: 1.7;
  color: var(--c-muted);
  max-width: 620px;
  margin: 1.75rem auto 0;
}

.hero-actions {
  display: flex;
  flex-wrap: wrap;
  justify-content: center;
  gap: 1rem;
  margin-top: 2.5rem;
}

/* ---------- Shared buttons ---------- */
.btn {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 0.55rem;
  padding: 0.95rem 1.9rem;
  border-radius: var(--radius-pill);
  font-family: var(--ff-body);
  font-weight: 600;
  font-size: 0.98rem;
  border: 1.5px solid transparent;
  transition: transform .22s var(--ease-out), box-shadow .22s var(--ease-out),
              filter .22s var(--ease-out), background .22s var(--ease-out), color .22s var(--ease-out);
}

.btn--primary {
  background: var(--grad-green);
  color: var(--c-white);
  box-shadow: 0 6px 18px rgba(112,164,4,0.34);
}
.btn--primary:hover {
  transform: translateY(-2px);
  box-shadow: 0 10px 26px rgba(112,164,4,0.44);
  filter: brightness(1.04);
}
.btn--primary:active { transform: translateY(0); filter: brightness(0.94); }

.btn--ghost {
  background: var(--c-white);
  color: var(--c-green-dark);
  border-color: var(--c-green-dark);
}
.btn--ghost:hover {
  transform: translateY(-2px);
  background: var(--c-green-soft);
  box-shadow: 0 8px 20px rgba(112,164,4,0.16);
}
.btn--ghost:active { transform: translateY(0); }

.btn-arrow { transition: transform .22s var(--ease-out); }
.btn--ghost:hover .btn-arrow { transform: translateX(3px); }

/* ---------- Trust bar ---------- */
.hero-trust {
  list-style: none;
  display: flex;
  flex-wrap: wrap;
  justify-content: center;
  align-items: center;
  gap: 0.6rem 1.6rem;
  margin: 3rem 0 0;
  padding: 0;
}

.hero-trust-item {
  position: relative;
  display: inline-flex;
  align-items: center;
  gap: 0.45rem;
  font-family: var(--ff-body);
  font-size: 0.82rem;
  color: var(--c-muted);
}

/* Subtle divider between items */
.hero-trust-item:not(:last-child)::after {
  content: '';
  position: absolute;
  right: -0.8rem;
  top: 50%;
  transform: translateY(-50%);
  width: 1px;
  height: 14px;
  background: var(--c-line-strong);
}

.trust-icon {
  color: var(--c-green);
  flex-shrink: 0;
}

/* ============================================================
   ABOUT (#about)
   ============================================================ */
.about-grid {
  display: grid;
  grid-template-columns: 0.85fr 1fr;
  gap: 3.5rem 5rem;
  align-items: start;
}

.about-headline {
  font-size: clamp(2rem, 3.4vw, 3.6rem);
  max-width: 11ch;
}

.about-accent {
  background: var(--grad-green);
  -webkit-background-clip: text;
  background-clip: text;
  -webkit-text-fill-color: transparent;
  color: var(--c-green);   /* fallback */
}

.about-copy {
  font-family: var(--ff-body);
  font-size: 1.02rem;
  line-height: 1.75;
  color: #444;
  max-width: 720px;
  margin: 0;
}

.about-highlights {
  list-style: none;
  display: flex;
  flex-wrap: wrap;
  gap: 1rem 2rem;
  margin: 2.25rem 0 0;
  padding: 0;
}

.about-highlight {
  display: inline-flex;
  align-items: center;
  gap: 0.55rem;
  font-family: var(--ff-body);
  font-weight: 500;
  font-size: 0.9rem;
  color: var(--c-ink);
}

.highlight-icon {
  color: var(--c-green);
  flex-shrink: 0;
}

/* ============================================================
   SERVICES (#services)
   ============================================================ */
.section-header {
  max-width: 720px;
  margin: 0 auto 4rem;
  text-align: center;
}

.section-header .section-headline {
  font-size: clamp(2rem, 3.6vw, 3.9rem);
}

.section-intro {
  font-family: var(--ff-body);
  font-size: 1.02rem;
  line-height: 1.7;
  color: var(--c-muted);
  max-width: 620px;
  margin: 1.25rem auto 0;
}

.services-accent {
  background: var(--grad-green);
  -webkit-background-clip: text;
  background-clip: text;
  -webkit-text-fill-color: transparent;
  color: var(--c-green);   /* fallback */
}

.services-grid {
  display: flex;
  flex-wrap: wrap;
  justify-content: center;
  gap: 1.5rem;
}

.service-card {
  flex: 1 1 320px;
  max-width: 360px;
  background: var(--c-white);
  border: 1px solid var(--c-line);
  border-radius: var(--radius-card);
  padding: 2.5rem 2.25rem;
  box-shadow: 0 4px 18px rgba(10,10,10,0.04);
  transition: transform .28s var(--ease-out), box-shadow .28s var(--ease-out),
              border-color .28s var(--ease-out);
}

.service-card:hover {
  transform: translateY(-6px);
  box-shadow: 0 16px 38px rgba(10,10,10,0.10);
  border-color: var(--c-line-strong);
}

.service-icon {
  display: grid;
  place-items: center;
  width: 58px;
  height: 58px;
  border-radius: 50%;
  background: var(--c-green-soft);
  color: var(--c-green);
  margin-bottom: 1.5rem;
  transition: background .28s var(--ease-out), color .28s var(--ease-out), transform .28s var(--ease-out);
}

.service-card:hover .service-icon {
  background: var(--grad-green);
  color: var(--c-white);
  transform: scale(1.05);
}

.service-card-title {
  font-family: var(--ff-display);
  font-weight: 800;
  font-size: clamp(1.4rem, 2vw, 1.6rem);
  letter-spacing: -0.02em;
  margin: 0 0 0.75rem;
}

.service-card-desc {
  font-family: var(--ff-body);
  font-size: 0.95rem;
  line-height: 1.68;
  color: var(--c-muted);
  margin: 0;
}

.services-note {
  text-align: center;
  font-family: var(--ff-body);
  font-size: 0.95rem;
  color: var(--c-muted);
  margin: 3rem 0 0;
}

.services-note-link {
  color: var(--c-green-dark);
  font-weight: 600;
  text-decoration: underline;
  text-underline-offset: 3px;
  text-decoration-thickness: 1.5px;
  transition: color .22s var(--ease-out);
}
.services-note-link:hover { color: var(--c-green); }

/* ============================================================
   PROCESS (#process) — connected 4-step timeline
   ============================================================ */
.process-accent,
.gallery-accent,
.reviews-accent {
  background: var(--grad-green);
  -webkit-background-clip: text;
  background-clip: text;
  -webkit-text-fill-color: transparent;
  color: var(--c-green);   /* fallback */
}

.process-steps {
  list-style: none;
  max-width: 680px;
  margin: 0 auto;
  padding: 0;
}

.process-step {
  position: relative;
  display: grid;
  grid-template-columns: 58px 1fr;
  gap: 1.75rem;
  padding-bottom: 2.75rem;
}
.process-step:last-child { padding-bottom: 0; }

/* Thin vertical line connecting each marker to the next */
.process-step:not(:last-child)::before {
  content: '';
  position: absolute;
  top: 58px;
  left: 28px;   /* center of the 58px marker, minus half the 2px line */
  bottom: 0;
  width: 2px;
  background: linear-gradient(to bottom, var(--c-green-light), rgba(112,164,4,0.14));
}

.process-marker {
  position: relative;
  z-index: 1;
  display: grid;
  place-items: center;
  width: 58px;
  height: 58px;
  border-radius: 50%;
  background: var(--grad-green);
  box-shadow: 0 8px 20px rgba(112,164,4,0.26);
}

.process-num {
  font-family: var(--ff-display);
  font-weight: 800;
  font-size: 1.2rem;
  letter-spacing: -0.01em;
  color: var(--c-white);
}

.process-content { padding-top: 0.4rem; }

.process-label {
  font-family: var(--ff-body);
  font-weight: 600;
  font-size: 0.68rem;
  letter-spacing: 0.17em;
  text-transform: uppercase;
  color: var(--c-green-dark);
  margin: 0 0 0.45rem;
}

.process-title {
  font-family: var(--ff-display);
  font-weight: 800;
  font-size: clamp(1.3rem, 2vw, 1.6rem);
  letter-spacing: -0.02em;
  margin: 0 0 0.6rem;
}

.process-desc {
  font-family: var(--ff-body);
  font-size: 0.95rem;
  line-height: 1.68;
  color: var(--c-muted);
  max-width: 46ch;
  margin: 0;
}

/* ============================================================
   GALLERY (#gallery) — Before / After carousel
   ============================================================ */
.gallery-carousel {
  position: relative;
  max-width: 960px;
  margin: 0 auto;
}

.gallery-stage { position: relative; }

.gallery-viewport {
  overflow: hidden;
  border-radius: var(--radius-card);
}

.gallery-track {
  display: flex;
  list-style: none;
  margin: 0;
  padding: 0;
  transform: translateX(0);
  transition: transform 0.6s var(--ease-out);
  will-change: transform;
}

.gallery-slide {
  flex: 0 0 100%;
  min-width: 100%;
}

.gallery-pair {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 1rem;
}

.gallery-img {
  position: relative;
  margin: 0;
  aspect-ratio: 4 / 3;
  border-radius: var(--radius-card);
  overflow: hidden;
  background: var(--c-line);   /* soft placeholder before image loads */
  box-shadow: 0 10px 30px rgba(10,10,10,0.08);
}

.gallery-img img {
  display: block;
  width: 100%;
  height: 100%;
  object-fit: cover;
  object-position: center;
}

.gallery-badge {
  position: absolute;
  top: 0.8rem;
  left: 0.8rem;
  z-index: 2;
  padding: 0.35rem 0.7rem;
  border-radius: var(--radius-pill);
  font-family: var(--ff-body);
  font-weight: 700;
  font-size: 0.62rem;
  letter-spacing: 0.14em;
  color: var(--c-white);
  box-shadow: 0 2px 8px rgba(10,10,10,0.18);
}
.gallery-badge--before { background: var(--c-ink); }
.gallery-badge--after  { background: var(--grad-green); }

/* Prev / Next arrows */
.gallery-arrow {
  position: absolute;
  top: 50%;
  transform: translateY(-50%);
  z-index: 5;
  display: grid;
  place-items: center;
  width: 48px;
  height: 48px;
  border: none;
  border-radius: 50%;
  background: var(--grad-green);
  color: var(--c-white);
  cursor: pointer;
  box-shadow: 0 6px 18px rgba(112,164,4,0.32);
  transition: transform .2s var(--ease-out), box-shadow .2s var(--ease-out);
}
.gallery-arrow:hover {
  transform: translateY(-50%) scale(1.08);
  box-shadow: 0 10px 24px rgba(112,164,4,0.4);
}
.gallery-arrow:focus-visible {
  outline: 2px solid var(--c-green-dark);
  outline-offset: 3px;
}
.gallery-arrow--prev { left: 0.75rem; }
.gallery-arrow--next { right: 0.75rem; }

/* Dots */
.gallery-dots {
  display: flex;
  justify-content: center;
  gap: 0.35rem;
  margin-top: 1.5rem;
}
.gallery-dot {
  display: grid;
  place-items: center;
  width: 24px;
  height: 24px;
  padding: 0;
  border: none;
  background: none;
  cursor: pointer;
}
.gallery-dot::before {
  content: '';
  width: 9px;
  height: 9px;
  border-radius: 50%;
  background: var(--c-line-strong);
  transition: background .25s var(--ease-out), transform .25s var(--ease-out);
}
.gallery-dot--active::before {
  background: var(--c-green);
  transform: scale(1.3);
}
.gallery-dot:focus-visible { outline: 2px solid var(--c-green-dark); outline-offset: 2px; border-radius: 50%; }

/* CTA line */
.gallery-cta {
  text-align: center;
  font-family: var(--ff-body);
  font-size: 0.95rem;
  color: var(--c-muted);
  margin: 2.5rem 0 0;
}
.gallery-cta-link {
  color: var(--c-green-dark);
  font-weight: 600;
  text-decoration: underline;
  text-underline-offset: 3px;
  text-decoration-thickness: 1.5px;
  transition: color .22s var(--ease-out);
}
.gallery-cta-link:hover { color: var(--c-green); }

@media (prefers-reduced-motion: reduce) {
  .gallery-track { transition: none; }
}

/* ============================================================
   REVIEWS (#reviews) — Google reviews carousel
   ============================================================ */
.reviews-rating {
  display: inline-flex;
  align-items: center;
  flex-wrap: wrap;
  justify-content: center;
  gap: 0.55rem;
  margin: 1.75rem auto 0;
  padding: 0.6rem 1.15rem;
  border: 1px solid var(--c-line-strong);
  border-radius: var(--radius-pill);
  background: var(--c-white);
}
.reviews-g { display: inline-flex; line-height: 0; }
.reviews-rating-score {
  font-family: var(--ff-display);
  font-weight: 800;
  font-size: 1.05rem;
  color: var(--c-ink);
}
.reviews-rating-stars { display: inline-flex; gap: 1px; color: #fbbc05; line-height: 0; }

.reviews-carousel {
  position: relative;
  max-width: 720px;
  margin: 0 auto;
}

.reviews-stage { position: relative; }

.reviews-viewport {
  overflow: hidden;
  border-radius: var(--radius-card);
  padding: 1.5rem 0.75rem;   /* breathing room so the card shadow isn't clipped */
}

.reviews-track {
  display: flex;
  list-style: none;
  margin: 0;
  padding: 0;
  transform: translateX(0);
  transition: transform 0.6s var(--ease-out);
  will-change: transform;
}

.reviews-slide {
  flex: 0 0 100%;
  min-width: 100%;
}

.review-card {
  display: flex;
  flex-direction: column;
  gap: 1.1rem;
  height: 100%;
  min-height: 280px;
  background: var(--c-white);
  border: 1px solid var(--c-line);
  border-radius: var(--radius-card);
  box-shadow: 0 10px 30px rgba(10,10,10,0.07);
  padding: 2.25rem;
}

.review-head { display: flex; align-items: center; gap: 0.9rem; }

.review-avatar {
  display: grid;
  place-items: center;
  width: 48px;
  height: 48px;
  flex-shrink: 0;
  border-radius: 50%;
  background: var(--c-green-soft);
  color: var(--c-green);
  font-family: var(--ff-display);
  font-weight: 800;
  font-size: 1.25rem;
}

.review-name {
  font-family: var(--ff-display);
  font-weight: 800;
  font-size: 1.1rem;
  letter-spacing: -0.01em;
  margin: 0;
}
.review-source {
  display: flex;
  align-items: center;
  gap: 0.35rem;
  font-family: var(--ff-body);
  font-size: 0.78rem;
  color: var(--c-muted);
  margin: 0.15rem 0 0;
}
.review-g {
  display: inline-grid;
  place-items: center;
  width: 15px;
  height: 15px;
  border-radius: 50%;
  background: var(--grad-green);
  color: var(--c-white);
  font-family: var(--ff-display);
  font-weight: 800;
  font-size: 0.6rem;
}

.review-stars { display: flex; gap: 2px; color: #fbbc05; line-height: 0; }

.review-quote {
  font-family: var(--ff-body);
  font-size: 1rem;
  line-height: 1.7;
  color: #444;
  margin: 0;
  quotes: none;
}

/* Prev / Next arrows (shared look with the gallery) */
.reviews-arrow {
  position: absolute;
  top: 50%;
  transform: translateY(-50%);
  z-index: 5;
  display: grid;
  place-items: center;
  width: 48px;
  height: 48px;
  border: none;
  border-radius: 50%;
  background: var(--grad-green);
  color: var(--c-white);
  cursor: pointer;
  box-shadow: 0 6px 18px rgba(112,164,4,0.32);
  transition: transform .2s var(--ease-out), box-shadow .2s var(--ease-out);
}
.reviews-arrow:hover {
  transform: translateY(-50%) scale(1.08);
  box-shadow: 0 10px 24px rgba(112,164,4,0.4);
}
.reviews-arrow:focus-visible { outline: 2px solid var(--c-green-dark); outline-offset: 3px; }
.reviews-arrow--prev { left: -22px; }
.reviews-arrow--next { right: -22px; }

/* Dots */
.reviews-dots {
  display: flex;
  justify-content: center;
  gap: 0.35rem;
  margin-top: 1.75rem;
}
.reviews-dot {
  display: grid;
  place-items: center;
  width: 24px;
  height: 24px;
  padding: 0;
  border: none;
  background: none;
  cursor: pointer;
}
.reviews-dot::before {
  content: '';
  width: 9px;
  height: 9px;
  border-radius: 50%;
  background: var(--c-line-strong);
  transition: background .25s var(--ease-out), transform .25s var(--ease-out);
}
.reviews-dot--active::before { background: var(--c-green); transform: scale(1.3); }
.reviews-dot:focus-visible { outline: 2px solid var(--c-green-dark); outline-offset: 2px; border-radius: 50%; }

.reviews-cta { text-align: center; margin: 2.75rem 0 0; }

@media (prefers-reduced-motion: reduce) {
  .reviews-track { transition: none; }
}

/* ============================================================
   FINAL CTA (#cta) — light band, flows with the page rhythm
   ============================================================ */
.section--cta {
  position: relative;
  background: var(--c-green-soft);   /* soft green — alternates with the grey Reviews band above */
  color: var(--c-ink);
  overflow: hidden;
  padding-bottom: 12rem;   /* ≈96px clear between the buttons and the wave crest */
}

.cta-inner {
  position: relative;
  z-index: 1;
  display: flex;
  flex-direction: column;
  align-items: center;
  text-align: center;
}

.cta-eyebrow {
  font-family: var(--ff-body);
  font-weight: 600;
  font-size: 0.72rem;
  letter-spacing: 0.2em;
  text-transform: uppercase;
  color: var(--c-green-dark);
  margin: 0 0 1.5rem;
}

.cta-headline {
  font-family: var(--ff-display);
  font-weight: 900;
  font-size: clamp(2.2rem, 5vw, 4.4rem);
  line-height: 1.05;
  letter-spacing: -0.03em;
  color: var(--c-ink);
  margin: 0;
  max-width: 18ch;
}

.cta-accent {
  background: var(--grad-green);
  -webkit-background-clip: text;
  background-clip: text;
  -webkit-text-fill-color: transparent;
  color: var(--c-green);   /* fallback — readable on the light band */
}

.cta-sub {
  font-family: var(--ff-body);
  font-weight: 400;
  font-size: clamp(1rem, 1.3vw, 1.12rem);
  line-height: 1.7;
  color: var(--c-muted);
  max-width: 620px;
  margin: 1.5rem auto 0;
}

.cta-actions {
  display: flex;
  flex-wrap: wrap;
  justify-content: center;
  gap: 1rem;
  margin-top: 2.5rem;
}

/* Ghost button variant for the light CTA band — green outline on transparent */
.btn--ghost {
  background: transparent;
  color: var(--c-green-dark);
  border-color: var(--c-green-dark);
}
.btn--ghost:hover {
  transform: translateY(-2px);
  background: var(--c-green);
  border-color: var(--c-green);
  color: var(--c-white);
  box-shadow: 0 8px 22px rgba(112,164,4,0.22);
}
.btn--ghost:active { transform: translateY(0); }
.btn--ghost .wa-icon { flex-shrink: 0; }

/* ---------- Wave divider (CTA → footer seam) ---------- */
.cta-wave {
  position: absolute;
  left: 0;
  right: 0;
  bottom: -1px;            /* overlap the footer edge so no hairline gap appears */
  width: 100%;
  line-height: 0;
  z-index: 0;              /* sits behind the centred CTA content */
  pointer-events: none;
}
.cta-wave svg {
  display: block;
  width: 100%;
  height: 90px;
}
.cta-wave-layer--back  path { fill: var(--c-green-light); opacity: 0.35; }
.cta-wave-layer--mid   path { fill: var(--c-green);       opacity: 0.5; }
.cta-wave-layer--front path { fill: var(--c-ink-2); }
/* Gentle, slow horizontal drift — calm "water" motion, each layer at its own pace */
.cta-wave-layer {
  transform-box: fill-box;
  will-change: transform;
}
.cta-wave-layer--back  { animation: ctaWaveDrift 15s ease-in-out infinite alternate; }
.cta-wave-layer--mid   { animation: ctaWaveDrift 11s ease-in-out infinite alternate-reverse; }
.cta-wave-layer--front { animation: ctaWaveDrift  9s ease-in-out infinite alternate; }
@keyframes ctaWaveDrift {
  from { transform: translateX(0); }
  to   { transform: translateX(-30px); }
}
@media (prefers-reduced-motion: reduce) {
  .cta-wave-layer { animation: none; }
}

/* ---------- Typography components ---------- */
.section-eyebrow {
  font-family: var(--ff-body);
  font-weight: 500;
  font-size: 0.68rem;
  letter-spacing: 0.17em;
  text-transform: uppercase;
  color: var(--c-green-dark);
  margin: 0 0 1rem;
}

.section-headline {
  font-size: clamp(2rem, 3.8vw, 4.25rem);
  font-weight: 800;
}

/* ============================================================
   HEADER — floating rounded "pill"
   ============================================================ */
.nav-wrap {
  position: fixed;
  top: 0; left: 0; right: 0;
  z-index: 1000;
  padding: 1rem 1.25rem;
  padding-top: max(1rem, env(safe-area-inset-top));
  pointer-events: none;   /* only the pill itself is interactive */
}

.nav {
  pointer-events: auto;
  width: 100%;
  max-width: 1150px;
  margin: 0 auto;
  min-height: var(--nav-h);
  display: flex;
  align-items: center;
  gap: 1.25rem;
  padding: 8px 0.7rem 8px 1.35rem;   /* 8 + 72 logo + 8 + 2 border = 90px */
  background: var(--c-white);
  border: 1px solid var(--c-line);
  border-radius: var(--radius-pill);
  /* Always-on resting shadow so the floating pill reads at the top of the page */
  box-shadow: 0 10px 30px rgba(10,10,10,0.08), 0 2px 8px rgba(10,10,10,0.05);
  transition: box-shadow .3s var(--ease-out), background .3s var(--ease-out), padding .3s var(--ease-out);
}

.nav--scrolled {
  background: rgba(255,255,255,0.85);
  backdrop-filter: blur(16px);
  -webkit-backdrop-filter: blur(16px);
  box-shadow: 0 12px 38px rgba(10,10,10,0.14);
  padding-top: 8px;      /* same as resting: pill stays 90px */
  padding-bottom: 8px;
}

/* ---------- Brand / logo ---------- */
.brand {
  display: flex;
  align-items: center;
  flex-shrink: 0;
}

/* Sized by height (source is 300px tall, so no upscaling); 8px clear above
   and below inside the 90px desktop pill. Mobile overrides below. */
.brand-logo {
  display: block;
  height: 72px;
  width: auto;
  margin-block: 0;
}

/* ---------- Nav links (center track + CTA) ---------- */
.nav-links {
  flex: 1;
  display: flex;
  align-items: center;
  gap: 1.25rem;
}

/* The 4 links, centered within the free middle space */
.nav-menu {
  flex: 1;
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 1.9rem;
}

.nav-link {
  position: relative;
  font-family: var(--ff-body);
  font-weight: 500;
  font-size: 0.92rem;
  color: var(--c-ink);
  transition: color .22s var(--ease-out);
}

.nav-link:not(.nav-link--cta)::after {
  content: '';
  position: absolute;
  left: 0; bottom: -6px;
  width: 100%; height: 2px;
  background: var(--grad-green);
  transform: scaleX(0);
  transform-origin: left;
  transition: transform .28s var(--ease-out);
}

.nav-link:not(.nav-link--cta):hover { color: var(--c-green-dark); }
.nav-link:not(.nav-link--cta):hover::after { transform: scaleX(1); }

/* ---------- Primary call button ---------- */
.btn-call {
  display: inline-flex;
  align-items: center;
  gap: 0.5rem;
  flex-shrink: 0;
  padding: 0.7rem 1.35rem;
  background: var(--grad-green);
  color: var(--c-white);
  border-radius: var(--radius-pill);
  font-weight: 600;
  font-size: 0.9rem;
  box-shadow: 0 4px 14px rgba(112,164,4,0.32);
  transition: transform .22s var(--ease-out), box-shadow .22s var(--ease-out), filter .22s var(--ease-out);
}

.btn-call .call-icon { flex-shrink: 0; }

.btn-call:hover {
  transform: translateY(-1px);
  box-shadow: 0 8px 22px rgba(112,164,4,0.42);
  filter: brightness(1.04);
}

.btn-call:active { filter: brightness(0.94); transform: translateY(0); }

/* ---------- Hamburger ---------- */
.nav-menu-btn {
  display: none;
  flex-direction: column;
  justify-content: center;
  gap: 5px;
  width: 36px;
  height: 36px;
  padding: 6px;
  background: none;
  border: none;
}

.nav-menu-btn span {
  display: block;
  width: 100%;
  height: 2px;
  border-radius: 2px;
  background: var(--c-ink);
  transition: transform .28s var(--ease-out), opacity .28s;
}

.menu-btn--open span:first-child { transform: translateY(6.5px) rotate(45deg); }
.menu-btn--open span:last-child  { transform: translateY(-6.5px) rotate(-45deg); }

/* ============================================================
   FOOTER — compact, dark
   ============================================================ */
.footer {
  position: relative;
  background: var(--c-ink-2);   /* lifted dark shade — the single dark closing band */
  color: rgba(255,255,255,0.72);
  padding: 2.75rem 0 0;
  padding-bottom: env(safe-area-inset-bottom);
  overflow: hidden;
}

/* Subtle green radial glow — bottom-right, fading out well before the top edge */
.footer::before {
  content: '';
  position: absolute;
  bottom: -20%;
  right: -8%;
  left: auto;
  transform: none;
  width: 440px;
  max-width: 70%;
  aspect-ratio: 1;
  background: radial-gradient(circle, rgba(152,191,2,0.13) 0%, rgba(152,191,2,0.05) 38%, rgba(152,191,2,0) 70%);
  pointer-events: none;
}

.footer > .container { position: relative; z-index: 1; }

.footer-top {
  display: grid;
  grid-template-columns: 1.3fr 1fr 1fr;
  gap: 2rem 3rem;
  align-items: start;
  padding-bottom: 2rem;
}

/* ---- Brand column ---- */
.footer-brand {
  display: inline-flex;
}

.footer-logo {
  display: block;
  height: 96px;
  width: auto;
}

.footer-tagline {
  font-family: var(--ff-body);
  font-size: 0.9rem;
  line-height: 1.6;
  color: rgba(255,255,255,0.6);
  max-width: 34ch;
  margin: 1.1rem 0 0;
}

/* ---- Column titles ---- */
.footer-col-title {
  font-family: var(--ff-body);
  font-weight: 600;
  font-size: 0.68rem;
  letter-spacing: 0.17em;
  text-transform: uppercase;
  color: var(--c-green-light);
  margin: 0 0 1.1rem;
}

/* ---- Contact column ---- */
.footer-contact {
  list-style: none;
  margin: 0;
  padding: 0;
  display: flex;
  flex-direction: column;
  gap: 0.85rem;
}

.footer-contact-label {
  display: block;
  font-family: var(--ff-body);
  font-size: 0.7rem;
  letter-spacing: 0.06em;
  text-transform: uppercase;
  color: rgba(255,255,255,0.45);
  margin-bottom: 0.15rem;
}

.footer-contact-link,
.footer-contact-text {
  font-family: var(--ff-body);
  font-size: 0.95rem;
  color: rgba(255,255,255,0.85);
}

.footer-contact-link {
  transition: color .22s var(--ease-out);
  word-break: break-word;
}
.footer-contact-link:hover { color: var(--c-green-light); }

/* ---- Nav column ---- */
.footer-nav {
  list-style: none;
  margin: 0;
  padding: 0;
  display: flex;
  flex-direction: column;
  gap: 0.6rem;
}

.footer-nav-link {
  font-family: var(--ff-body);
  font-size: 0.95rem;
  color: rgba(255,255,255,0.75);
  transition: color .22s var(--ease-out);
}
.footer-nav-link:hover { color: var(--c-green-light); }

/* ---- Social icons ---- */
.footer-social {
  display: flex;
  gap: 0.6rem;
  margin-top: 1.5rem;
}

.footer-social-link {
  display: grid;
  place-items: center;
  width: 38px;
  height: 38px;
  border-radius: 50%;
  border: 1px solid rgba(255,255,255,0.18);
  color: rgba(255,255,255,0.65);
  transition: color .22s var(--ease-out), border-color .22s var(--ease-out),
              background .22s var(--ease-out), transform .22s var(--ease-out);
}
.footer-social-link:hover {
  color: var(--c-white);
  border-color: var(--c-green-light);
  background: rgba(152,191,2,0.14);
  transform: translateY(-2px);
}
.footer-social-link:focus-visible { outline: 2px solid var(--c-green-light); outline-offset: 2px; }

/* ---- Bottom bar ---- */
.footer-bottom {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  justify-content: space-between;
  gap: 0.6rem 1.5rem;
  padding: 1.1rem 0 1.25rem;
  padding-bottom: max(1.25rem, env(safe-area-inset-bottom));
  border-top: 1px solid rgba(255,255,255,0.1);
}

.footer-bottom-left {
  display: flex;
  flex-direction: column;
  gap: 0.2rem;
}

.footer-copy {
  font-family: var(--ff-body);
  font-size: 0.74rem;
  color: rgba(255,255,255,0.45);
  margin: 0;
}

.footer-powered {
  font-family: var(--ff-body);
  font-size: 0.72rem;
  color: rgba(255,255,255,0.35);
  margin: 0;
}
.footer-powered-link {
  color: rgba(255,255,255,0.55);
  font-weight: 500;
  transition: color .22s var(--ease-out);
}
.footer-powered-link:hover { color: var(--c-green-light); }

.footer-legal {
  display: flex;
  gap: 1.25rem;
}

.footer-legal-link {
  font-family: var(--ff-body);
  font-size: 0.74rem;
  color: rgba(255,255,255,0.5);
  transition: color .22s var(--ease-out);
  /* rendered as <button> — strip native chrome so it reads as a link */
  background: none;
  border: 0;
  padding: 0;
  margin: 0;
  cursor: pointer;
  line-height: inherit;
}
.footer-legal-link:hover { color: var(--c-green-light); }

/* ============================================================
   STICKY CALL / WHATSAPP FAB (mobile only)
   ============================================================ */
.fab-stack {
  display: none;   /* desktop: hidden — mobile media query shows it */
}

@media (max-width: 768px) {
  .fab-stack {
    display: flex;
    flex-direction: column;
    gap: 0.75rem;
    position: fixed;
    right: max(1rem, env(safe-area-inset-right));
    bottom: max(1rem, env(safe-area-inset-bottom));
    z-index: 90;   /* above page content, below the nav overlay (99) */
    /* Entrance: hidden until JS reveals it (hero buttons scrolled out of view) */
    opacity: 0;
    transform: translateY(16px) scale(0.9);
    transition: opacity .4s var(--ease-out), transform .4s var(--ease-out);
    pointer-events: none;
  }
  .fab-stack--visible {
    opacity: 1;
    transform: none;
    pointer-events: auto;
  }

  .fab {
    display: flex;
    align-items: center;
    justify-content: center;
    width: 56px;
    height: 56px;
    border-radius: var(--radius-pill);
    box-shadow: 0 8px 22px rgba(10, 10, 10, 0.26);
    -webkit-tap-highlight-color: transparent;
  }
  .fab--call {
    background: var(--grad-green);
    color: var(--c-white);
  }
  .fab--whatsapp {
    background: var(--c-white);
    color: var(--c-green-dark);
    border: 1px solid var(--c-line-strong);
  }

  /* The FAB hides once the footer is reached (main.js), so the bottom bar
     no longer reserves space for it — it ends right after the legal links.
     The footer itself drops its own safe-area padding so it isn't doubled. */
  .footer { padding-bottom: 0; }
  .footer-bottom {
    padding-bottom: calc(28px + env(safe-area-inset-bottom));
  }

  /* Hide + disable the FAB while the mobile nav overlay is open */
  body:has(.nav-links--open) .fab-stack {
    opacity: 0 !important;
    visibility: hidden !important;
    pointer-events: none !important;
  }
}

/* ============================================================
   LEGAL MODALS (Όροι Χρήσης / Πολιτική Απορρήτου)
   ============================================================ */
.modal {
  position: fixed;
  inset: 0;
  z-index: 2500;
  display: flex;
  align-items: center;
  justify-content: center;
  padding: 2.5rem 1.25rem;
  opacity: 0;
  visibility: hidden;
  transition: opacity .34s var(--ease-out), visibility .34s var(--ease-out);
}
.modal.is-open {
  opacity: 1;
  visibility: visible;
  transition: opacity .34s var(--ease-out), visibility 0s;
}

.modal-backdrop {
  position: absolute;
  inset: 0;
  background: rgba(10, 10, 10, 0.55);
  backdrop-filter: blur(2px);
  -webkit-backdrop-filter: blur(2px);
}

.modal-panel {
  position: relative;
  z-index: 1;
  width: 100%;
  max-width: 720px;
  max-height: 100%;
  display: flex;
  flex-direction: column;
  background: var(--c-white);
  border-radius: var(--radius-card);
  box-shadow: 0 24px 70px rgba(10, 10, 10, 0.28);
  overflow: hidden;
  transform: translateY(10px) scale(0.985);
  opacity: 0;
  transition: transform .34s var(--ease-out), opacity .34s var(--ease-out);
}
.modal.is-open .modal-panel {
  transform: none;
  opacity: 1;
}

.modal-close {
  position: absolute;
  top: 0.9rem;
  right: 0.9rem;
  z-index: 2;
  display: flex;
  align-items: center;
  justify-content: center;
  width: 42px;
  height: 42px;
  border: 0;
  border-radius: var(--radius-pill);
  background: rgba(10, 10, 10, 0.05);
  color: var(--c-ink);
  cursor: pointer;
  transition: background .22s var(--ease-out), color .22s var(--ease-out);
}
.modal-close:hover { background: var(--c-green-soft); color: var(--c-green-dark); }
.modal-close:focus-visible { outline: 2px solid var(--c-green); outline-offset: 2px; }

.modal-scroll {
  overflow-y: auto;
  -webkit-overflow-scrolling: touch;
  overscroll-behavior: contain;
}

.modal-content {
  padding: 3rem 3rem 3.25rem;
}

.modal-eyebrow {
  font-family: var(--ff-body);
  font-weight: 500;
  font-size: 0.68rem;
  letter-spacing: 0.17em;
  text-transform: uppercase;
  color: var(--c-green);
  margin: 0 0 0.6rem;
}

.modal-title {
  font-family: var(--ff-display);
  font-weight: 800;
  font-size: clamp(1.9rem, 3.2vw, 2.6rem);
  letter-spacing: -0.02em;
  line-height: 1.05;
  color: var(--c-ink);
  margin: 0 0 1.25rem;
}

.modal-content h3 {
  font-family: var(--ff-display);
  font-weight: 700;
  font-size: 1.08rem;
  letter-spacing: -0.01em;
  color: var(--c-green-dark);
  margin: 1.9rem 0 0.6rem;
}
.modal-content h3:first-of-type { margin-top: 0; }

.modal-content p {
  font-size: 0.94rem;
  line-height: 1.72;
  color: #444;
  margin: 0 0 0.9rem;
}

.modal-contact a {
  color: var(--c-green-dark);
  font-weight: 600;
  text-decoration: underline;
  text-underline-offset: 2px;
}
.modal-contact a:hover { color: var(--c-green); }

.modal-updated {
  margin-top: 2rem;
  font-size: 0.8rem;
  color: var(--c-muted);
}

@media (max-width: 768px) {
  .modal { padding: 0; }
  .modal-panel {
    max-width: 100%;
    max-height: 100%;
    height: 100%;
    border-radius: 0;
  }
  .modal-close {
    top: max(0.75rem, env(safe-area-inset-top));
    right: 0.75rem;
  }
  .modal-content {
    padding: calc(max(1.5rem, env(safe-area-inset-top)) + 2.5rem) 1.5rem
             calc(2.5rem + env(safe-area-inset-bottom));
  }
}

@media (prefers-reduced-motion: reduce) {
  .modal,
  .modal-panel { transition: opacity .001ms; }
  .modal-panel { transform: none; }
}

/* ============================================================
   GSAP initial hidden states (prevent flash before reveal)
   ============================================================ */
.section-eyebrow,
.section-headline,
.hero-eyebrow,
.hero-sub,
.hero-actions,
.hero-trust,
.about-copy,
.about-highlights,
.section-intro,
.service-card,
.services-note,
.process-step,
.gallery-carousel,
.gallery-cta,
.reviews-rating,
.reviews-carousel,
.reviews-cta,
.cta-eyebrow,
.cta-sub,
.cta-actions,
.footer-col,
.footer-bottom {
  opacity: 0;
}

/* Headline words start hidden; GSAP reveals them */
.hw { display: inline-block; opacity: 0; }

/* The nav is animated in by the hero entrance timeline */
.nav { opacity: 0; }

/* ============================================================
   MOBILE
   ============================================================ */
@media (max-width: 768px) {

  .container { padding: 0 1.5rem; }
  .section   { padding: 5rem 0; }

  /* Hero: NO vertical centering on mobile. The content is top-anchored and
     flows downward, so a tall stack can never be pulled up under the fixed
     header pill. We explicitly override the desktop base (which uses
     min-height:92vh + align-items:center to centre vertically):
       - flex-direction:column + justify-content:flex-start → top-anchored
       - align-items:center                                 → horizontal only
       - min-height:auto                                    → no forced height
     Top padding clears the full header footprint. With the eyebrow hidden on
     mobile, the HEADLINE is now the first element, so the padding must give it
     clear breathing room below the pill (not tuck under it):
     Fixed 200px clearance below the floating pill — the real rendered pill
     bottom is ≈88px, the headline box is ~101px tall; 200px guarantees the
     first line always sits ~120px clear of the pill on every phone, regardless
     of font metrics. Do not reintroduce var(--nav-h) math here — it undershoots
     with the real font. */
  .section--hero {
    display: flex;
    flex-direction: column;
    justify-content: flex-start;
    align-items: center;
    min-height: auto;
    padding-top: calc(200px + env(safe-area-inset-top));
    scroll-margin-top: 200px;
    padding-bottom: 3.5rem;
  }

  /* Eyebrow: hidden on mobile — it crowded the logo area and its info
     ("Επαγγελματικός βιοκαθαρισμός") is already repeated in the subtext.
     Kept in the HTML for desktop + SEO; only hidden here. The headline then
     becomes the first element, sitting below the header via the top padding. */
  .hero-eyebrow { display: none; }

  /* Headline: scaled to fit three clean lines at 375px; enable the break
     after «και» so line 2 splits into «στον καναπέ και» / «το στρώμα σας». */
  .hero-headline {
    font-size: clamp(1.85rem, 8vw, 2.35rem);
    line-height: 1.12;
    max-width: none;
  }
  .hero-br { display: inline; }

  /* Show hamburger — 44×44 tap target (WCAG), pinned to the pill's right edge */
  .nav-menu-btn {
    display: flex;
    z-index: 100;
    position: relative;
    width: 44px;
    height: 44px;
    padding: 10px;
    margin-right: -4px;   /* optical trim so bars align with pill padding */
  }

  /* Logo left, hamburger hard right, with comfortable inner padding on both
     sides so neither touches the pill edge (the fixed .nav-links overlay is
     out of flow, so without this the hamburger collapses next to the logo). */
  .nav {
    justify-content: space-between;
    gap: 0.75rem;
    padding: 13px 0.9rem 13px 1.25rem;   /* 72px tall at the top of the page */
  }
  .nav--scrolled { padding-top: 12px; padding-bottom: 12px; }   /* 70px = --nav-h */

  .brand-logo { height: 62px; margin-block: -9px; }   /* 4px / 3px clear inside the 72px / 70px pill */

  /* While the overlay is open, dim the pill logo so the X sits cleanly at the
     top-right with nothing to collide with (the centered watermark is the
     only brand mark). Degrades gracefully where :has() is unsupported. */
  .nav:has(.menu-btn--open) .brand {
    opacity: 0;
    pointer-events: none;
    transition: opacity .2s var(--ease-out);
  }

  /* Overlay: full-screen when open */
  .nav-links {
    flex: 0;
    display: none;
    position: fixed;
    top: 0; left: 0; right: 0;
    height: 100vh;
    height: 100dvh;
    background: var(--c-bg);
    flex-direction: column;
    align-items: center;
    justify-content: center;
    gap: 2.75rem;
    z-index: 99;
    overflow-y: auto;
    -webkit-overflow-scrolling: touch;
    padding-top: max(5rem, env(safe-area-inset-top));
    padding-bottom: max(3rem, env(safe-area-inset-bottom));
  }

  /* While the mobile menu is open, drop the transform GSAP leaves on the pill
     (and the scrolled-state backdrop-filter): either one makes the pill the
     containing block of the fixed overlay, shrinking it to the pill's width
     so the page shows through at the edges. Without them the overlay covers
     the whole viewport. */
  body:has(.nav-links--open) .nav {
    transform: none !important;
    -webkit-backdrop-filter: none !important;
    backdrop-filter: none !important;
  }

  .nav-links--open {
    display: flex;
    animation: navOverlayIn 0.38s var(--ease-out);
  }

  /* Brand watermark at top of overlay */
  .nav-links::before {
    content: 'BIO CLEANING';
    position: absolute;
    top: max(1.6rem, env(safe-area-inset-top));
    left: 0; right: 0;
    text-align: center;
    font-family: var(--ff-display);
    font-weight: 900;
    font-size: 0.78rem;
    letter-spacing: 0.20em;
    color: var(--c-muted);
    opacity: 0.32;
    pointer-events: none;
  }

  /* Links stack vertically in the overlay */
  .nav-menu {
    flex: 0;
    flex-direction: column;
    gap: 2.5rem;
  }

  /* Large display links in overlay */
  .nav-link {
    font-family: var(--ff-display);
    font-weight: 900;
    font-size: 2.1rem;
    letter-spacing: -0.03em;
    line-height: 1;
  }
  .nav-link::after { display: none; }

  /* Call CTA keeps its branded pill look inside the overlay */
  .btn-call {
    padding: 0.9rem 2.2rem;
    font-size: 1rem;
  }

  /* Staggered entrance for the menu links + CTA */
  .nav-links--open .nav-menu .nav-link,
  .nav-links--open .btn-call { animation: navLinkIn 0.48s var(--ease-out) both; }
  .nav-links--open .nav-menu .nav-link:nth-child(1) { animation-delay: 0.04s; }
  .nav-links--open .nav-menu .nav-link:nth-child(2) { animation-delay: 0.09s; }
  .nav-links--open .nav-menu .nav-link:nth-child(3) { animation-delay: 0.14s; }
  .nav-links--open .nav-menu .nav-link:nth-child(4) { animation-delay: 0.19s; }
  .nav-links--open .btn-call { animation-delay: 0.24s; }

  /* Hero mobile tuning — tighter vertical rhythm so the whole stack fits */
  .hero-actions { width: 100%; margin-top: 1.75rem; }
  .hero-sub { font-size: 0.98rem; margin-top: 1.25rem; }
  .hero-trust { margin-top: 2rem; }

  /* About stacks to a single column */
  .about-grid { grid-template-columns: 1fr; gap: 1.5rem; }
  .about-headline { max-width: none; }

  /* Services */
  .section-header { margin-bottom: 2.5rem; }
  .service-card { flex-basis: 100%; max-width: 420px; }

  /* Process — tighter marker column, keeps timeline aligned */
  .process-step {
    grid-template-columns: 50px 1fr;
    gap: 1.25rem;
    padding-bottom: 2.25rem;
  }
  .process-marker { width: 50px; height: 50px; }
  .process-num { font-size: 1.05rem; }
  .process-step:not(:last-child)::before { top: 50px; left: 24px; }

  .gallery-arrow { width: 44px; height: 44px; }
  .gallery-arrow--prev { left: 0.5rem; }
  .gallery-arrow--next { right: 0.5rem; }

  /* Reviews — arrows tuck inside so they never cause horizontal scroll */
  .review-card { padding: 1.9rem 1.6rem; min-height: 0; }
  .reviews-arrow { width: 44px; height: 44px; }
  .reviews-arrow--prev { left: 0.5rem; }
  .reviews-arrow--next { right: 0.5rem; }

  /* CTA — buttons stretch for easy tapping */
  .cta-actions { width: 100%; }
  .section--cta { padding-bottom: 156px; }   /* ≈88px clear above the wave crest */

  /* Wave — shorter so it stays within the CTA's reduced bottom padding */
  .cta-wave svg { height: 56px; }

  /* Glow — small and tucked into the bottom-right corner (centre just past
     the edge) so it stays clear of the bottom-bar text and the social icons */
  .footer::before { width: 280px; max-width: none; bottom: -160px; right: -150px; }

  /* Footer — collapse to two columns */
  .footer-top {
    grid-template-columns: repeat(2, 1fr);
    gap: 2.25rem 2rem;
  }
  .footer-col--brand { grid-column: 1 / -1; }
  .footer-logo { height: 80px; }
  .footer { padding-top: calc(2.75rem + 16px); }   /* more air below the wave */
}

@media (max-width: 480px) {
  .container { padding: 0 1.25rem; }
  .section   { padding: 4rem 0; }
  /* Hero must keep its own top clearance here: the generic .section rule
     above would otherwise reset it to 4rem and push the headline under the
     fixed header pill (pill bottom ≈88px). */
  .section--hero {
    padding-top: calc(110px + env(safe-area-inset-top));
    padding-bottom: 2.5rem;
  }
  /* Slightly tighter vertical rhythm so the whole hero fits one phone screen */
  .hero-sub     { margin-top: 1rem; }
  .hero-actions { margin-top: 1.5rem; }
  .hero-trust   { margin-top: 1.5rem; }

  /* Buttons stack full-width on small screens */
  .hero-actions .btn { width: 100%; }

  /* Drop the vertical dividers once the trust bar wraps */
  .hero-trust { gap: 0.75rem 1.1rem; }
  .hero-trust-item:not(:last-child)::after { display: none; }

  /* CTA — stack both buttons full-width */
  .cta-actions .btn { width: 100%; }
  .section--cta { padding-bottom: 140px; }   /* ≈72px clear above the wave crest */

  /* Gallery — before/after stack vertically on phones */
  .gallery-pair { grid-template-columns: 1fr; gap: 0.75rem; }

  /* Footer — single column, bottom bar stacks */
  .footer-top { grid-template-columns: 1fr; gap: 2rem; }
  .footer-bottom { flex-direction: column; align-items: flex-start; }

  /* Reviews — arrows move to their own row under the card so they never
     cover the review text; aligned with the card edges */
  .reviews-stage { padding-bottom: 44px; }
  .reviews-arrow,
  .reviews-arrow:hover { top: auto; bottom: 0; transform: none; }
  .reviews-arrow--prev { left: 0.75rem; }
  .reviews-arrow--next { right: 0.75rem; }
  .reviews-dots { margin-top: 1.25rem; }
}

@keyframes navOverlayIn {
  from { opacity: 0; transform: translateY(-8px); }
  to   { opacity: 1; transform: translateY(0); }
}
@keyframes navLinkIn {
  from { opacity: 0; transform: translateY(16px); }
  to   { opacity: 1; transform: translateY(0); }
}

/* ---------- Reduced motion ---------- */
@media (prefers-reduced-motion: reduce) {
  html { scroll-behavior: auto; }
  * { animation-duration: 0.001ms !important; animation-iteration-count: 1 !important; transition-duration: 0.001ms !important; }
}