/* ─── FONT FALLBACKS ────────────────────────────────
   Local stand-ins whose metrics are adjusted to match the Google fonts, so the
   swap from fallback to web font does not re-wrap text and shift layout.
   size-adjust was calibrated by rendering the real pages in Chrome with the
   Google Fonts requests blocked and sweeping the value until the fallback
   document height matched the web-font render; Inter 111% / Space Grotesk 102%
   was the best fit across index, contact, projects, services, about and blog
   (residual 0-31px per page). ascent/descent/line-gap come from each font's
   hhea table divided by that size-adjust.
   If none of the local() faces exist the rule is dropped and the stack falls
   through to the generic sans-serif as before. */
@font-face {
  font-family: 'Inter Fallback';
  src: local('Arial'), local('Helvetica'), local('Liberation Sans');
  size-adjust: 111%;
  ascent-override: 87.27%;
  descent-override: 21.73%;
  line-gap-override: 0%;
}
@font-face {
  font-family: 'Space Grotesk Fallback';
  src: local('Arial'), local('Helvetica'), local('Liberation Sans');
  size-adjust: 102%;
  ascent-override: 96.47%;
  descent-override: 28.63%;
  line-gap-override: 0%;
}
@font-face {
  font-family: 'Ubuntu Fallback';
  src: local('Arial'), local('Helvetica'), local('Liberation Sans');
  size-adjust: 107.5%;
  ascent-override: 86.70%;
  descent-override: 17.58%;
  line-gap-override: 2.60%;
}

:root {
  --white: #ffffff;
  --g50:   #f8fafc;
  --g100:  #f1f5f9;
  --g200:  #e2e8f0;
  --g300:  #cbd5e1;
  --g400:  #94a3b8;
  --g500:  #64748b;
  --g600:  #475569;
  --g700:  #334155;
  --g800:  #1e293b;
  --g900:  #0f172a;
  --blue:     #2563eb;
  --blue-l:   #60a5fa;
  --blue-d:   #1d4ed8;
  --blue-bg:  #eff6ff;
  /* --blue is tuned to be readable *as text*, which in dark theme means a light
     blue. A light blue is the wrong choice for a *fill* that carries white
     text, so filled surfaces use their own pair of tokens: --blue-fill keeps
     >=4.5:1 against #fff in both themes, --blue-fill-strong is its hover. */
  --blue-fill: #2563eb;
  --blue-fill-strong: #1d4ed8;
  /* Text/border blue for use on a permanently light surface (e.g. .btn-white,
     which stays white in both themes). */
  --blue-on-light: #1d4ed8;
  --dark:     #030712;
  --dark2:    #090e1b;
  --dark-card:#111827;
  --r:  16px;
  --rl: 32px;
  --shadow: 0 4px 24px rgba(0,0,0,.04);
  --shadow-md: 0 12px 48px rgba(0,0,0,.08);
  --shadow-lg: 0 20px 64px rgba(0,0,0,.12);
  --theme-bg: #ffffff;
  --theme-surface: #ffffff;
  --theme-surface-soft: #f8fafc;
  --theme-border: #e2e8f0;
  --theme-text: #0f172a;
  --theme-muted: #475569;
  --theme-nav-glass: rgba(255,255,255,.34);
  --theme-nav-glass-strong: rgba(255,255,255,.82);
  --theme-nav-text: rgba(15,23,42,.88);
  --theme-nav-tel: rgba(15,23,42,.76);
  --theme-toggle-bg: linear-gradient(135deg, #87ceeb 0%, #bfe4f7 55%, #e1f5fe 100%);
  --theme-toggle-border: rgba(148,163,184,.4);
  --theme-toggle-shadow: 0 10px 24px rgba(15,23,42,.14), inset 0 1px 0 rgba(255,255,255,.5);
  --theme-toggle-panel: linear-gradient(180deg, #1e3a8a, #2563eb);
  --theme-toggle-panel-line: rgba(186,230,253,.55);
  --theme-toggle-thumb-bg: radial-gradient(circle at 30% 30%, #fff7d6, #fbbf24 60%, #f59e0b);
  --theme-toggle-thumb-glow: 0 0 14px rgba(251,191,36,.7), 0 4px 10px rgba(245,158,11,.4);
  --theme-toggle-rays: rgba(254,240,138,.9);
  --theme-toggle-cloud: rgba(255,255,255,.95);
  --theme-toggle-stars: #fef9c3;
}

html[data-theme='dark'] {
  color-scheme: dark;
  --g50: #07111f;
  --g100: #101b2d;
  --g200: #1c2a40;
  --g300: #31445f;
  --g400: #7f95b1;
  --g500: #9cb0c9;
  --g600: #bdd0e1;
  --g700: #d6e1ed;
  --g800: #ebf2fa;
  --g900: #f8fbff;
  --blue: #60a5fa;
  --blue-l: #93c5fd;
  --blue-d: #3b82f6;
  --blue-bg: rgba(96,165,250,.16);
  --blue-fill: #1d4ed8;
  --blue-fill-strong: #1e40af;
  --blue-on-light: #1e40af;
  --shadow: 0 8px 30px rgba(0,0,0,.28);
  --shadow-md: 0 16px 48px rgba(0,0,0,.34);
  --shadow-lg: 0 24px 68px rgba(0,0,0,.42);
  --theme-bg: #050d19;
  --theme-surface: #0c1728;
  --theme-surface-soft: #0f1d31;
  --theme-border: #20324a;
  --theme-text: #f8fbff;
  --theme-muted: #bdd0e1;
  --theme-nav-glass: rgba(10,23,41,.76);
  --theme-nav-glass-strong: rgba(19,35,57,.96);
  --theme-nav-text: rgba(248,251,255,.92);
  --theme-nav-tel: rgba(222,233,245,.76);
  --theme-toggle-bg: linear-gradient(135deg, #060d1b 0%, #131f3a 55%, #1e3a5f 100%);
  --theme-toggle-border: rgba(96,165,250,.3);
  --theme-toggle-shadow: 0 12px 28px rgba(0,0,0,.4), inset 0 1px 0 rgba(147,197,253,.12);
  --theme-toggle-panel: linear-gradient(180deg, #0b1429, #18305a);
  --theme-toggle-panel-line: rgba(147,197,253,.55);
  --theme-toggle-thumb-bg: radial-gradient(circle at 35% 35%, #f8fafc, #cbd5e1 70%, #94a3b8);
  --theme-toggle-thumb-glow: 0 0 12px rgba(226,232,240,.45), inset -5px -2px 0 -1px #475569;
  --theme-toggle-rays: rgba(254,240,138,.9);
  --theme-toggle-cloud: rgba(255,255,255,0);
  --theme-toggle-stars: #fef9c3;
}

/* ─── RESET ───────────────────────────────────────────── */
*, *::before, *::after { box-sizing: border-box; margin: 0; padding: 0; }
html {
  scroll-behavior: smooth;
  -webkit-font-smoothing: antialiased;
  background: var(--theme-bg);
  width: 100%;
  max-width: 100%;
  overflow-x: hidden;
}
body {
  font-family: 'Inter', 'Inter Fallback', sans-serif;
  background: var(--theme-bg);
  color: var(--theme-text);
  width: 100%;
  max-width: 100%;
  overflow-x: hidden;
  line-height: 1.6;
}
img { display: block; max-width: 100%; transition: filter 0.5s ease; }
a { text-decoration: none; color: inherit; }
ul { list-style: none; }
input, textarea, select, button { font-family: inherit; }
button { cursor: pointer; border: none; background: none; }

/* ─── FOCUS VISIBILITY ────────────────────────────────
   One visible indicator for every keyboard-focusable control. The white ring
   under the blue one keeps the outline visible on both the light page surfaces
   and the permanently dark hero/footer, so no component needs its own rule. */
:where(a, button, input, select, textarea, summary, [tabindex]):focus-visible {
  outline: 3px solid var(--blue-fill);
  outline-offset: 2px;
  box-shadow: 0 0 0 5px rgba(255,255,255,.85);
  border-radius: 4px;
}
.footer :where(a, button):focus-visible,
.site-nav.nav-transparent :where(a, button):focus-visible,
.home-hero :where(a, button):focus-visible,
.why-dark :where(a, button):focus-visible,
.cta-stripe :where(a, button):focus-visible,
.mob-drawer :where(a, button, input):focus-visible {
  outline-color: #ffffff;
  box-shadow: 0 0 0 5px rgba(15,23,42,.85);
}

/* ─── SKIP LINK ───────────────────────────────────────
   First tab stop on every page; jumps past the header and drawer straight to
   <main id="main-content">. */
.skip-link {
  position: absolute;
  left: 1rem;
  top: -100px;
  z-index: 2100;
  padding: .85rem 1.4rem;
  border-radius: 0 0 12px 12px;
  background: var(--blue-fill);
  color: #ffffff;
  font-weight: 700;
  transition: top .2s ease;
}
.skip-link:focus { top: 0; }

/* Honour an explicit request for less motion: the reveal/parallax/marquee work
   from SPI-69 is decorative, and the carousel auto-advance is paused by
   js/main.js under the same media query. */
@media (prefers-reduced-motion: reduce) {
  html { scroll-behavior: auto; }
  *, *::before, *::after {
    animation-duration: .001ms !important;
    animation-iteration-count: 1 !important;
    transition-duration: .001ms !important;
    scroll-behavior: auto !important;
  }
}

/* ─── UTILITY ─────────────────────────────────────────── */
/* Visible to assistive technology, not on screen. */
.sr-only {
  position: absolute; width: 1px; height: 1px; padding: 0; margin: -1px;
  overflow: hidden; clip: rect(0 0 0 0); white-space: nowrap; border: 0;
}

.container   { max-width: 1320px; margin: 0 auto; padding: 0 2.5rem; }
.text-blue   { color: var(--blue); }
.text-muted  { color: var(--g500); }
.fw-800      { font-weight: 800; }

.section        { padding: 8rem 2.5rem; }
.section--gray  { background: var(--g50); }
.section--dark  { background: var(--dark); color: var(--white); }

.eyebrow {
  display: inline-block;
  font-size: .75rem; font-weight: 700;
  letter-spacing: .25em; text-transform: uppercase;
  color: var(--blue); margin-bottom: 1.2rem;
}

/* ─── TYPOGRAPHY ──────────────────────────────────────── */
.display, .h1, .h2, .h3 {
  overflow-wrap: break-word;
}
.display {
  font-family: 'Space Grotesk', 'Space Grotesk Fallback', sans-serif;
  font-size: clamp(2.5rem, 6vw, 4.5rem);
  font-weight: 800; line-height: 1.05; letter-spacing: -0.02em;
}
.h1 {
  font-family: 'Space Grotesk', 'Space Grotesk Fallback', sans-serif;
  font-size: clamp(2.8rem, 7vw, 6rem);
  font-weight: 800; line-height: 1; letter-spacing: -0.03em;
}
.h2 {
  font-family: 'Space Grotesk', 'Space Grotesk Fallback', sans-serif;
  font-size: clamp(2rem, 4.5vw, 3.5rem);
  font-weight: 800; line-height: 1.1; letter-spacing: -0.02em;
}
.h3 {
  font-family: 'Space Grotesk', 'Space Grotesk Fallback', sans-serif;
  font-size: 1.4rem; font-weight: 700; line-height: 1.3;
}
.lead { font-size: 1.15rem; color: var(--g600); line-height: 1.7; }

/* ─── BUTTONS ─────────────────────────────────────────── */
.btn {
  display: inline-flex; align-items: center; justify-content: center; gap: .75rem;
  font-weight: 700; font-size: .95rem;
  padding: 1rem 2rem; border-radius: 100px;
  transition: all 0.4s cubic-bezier(0.16, 1, 0.3, 1);
  white-space: nowrap; position: relative; overflow: hidden;
  z-index: 1;
}
.btn-blue {
  background: var(--blue-fill); color: var(--white);
  box-shadow: 0 8px 32px rgba(37,99,235,.2);
}
.btn-blue::before {
  content: ''; position: absolute; inset: 0; background: var(--blue-fill-strong);
  transform: scaleX(0); transform-origin: right; transition: transform 0.4s cubic-bezier(0.16, 1, 0.3, 1);
  z-index: -1;
}
.btn-blue:hover::before { transform: scaleX(1); transform-origin: left; }
.btn-blue:hover { transform: translateY(-3px); box-shadow: 0 12px 40px rgba(37,99,235,.3); }

.btn-outline {
  background: transparent; color: var(--g800);
  border: 2px solid var(--g200);
}
.btn-outline:hover { border-color: var(--blue); color: var(--blue); transform: translateY(-3px); }

.btn-white {
  background: var(--white); color: var(--blue-on-light);
  box-shadow: 0 8px 32px rgba(0,0,0,.08);
}
.btn-white:hover { transform: translateY(-3px); box-shadow: 0 12px 48px rgba(0,0,0,.15); }

.btn-sm { padding: .65rem 1.4rem; font-size: .85rem; }
.btn-lg { padding: 1.2rem 2.8rem; font-size: 1.05rem; }

/* ─── SITE HEADER NAV ────────────────────────────────── */
:root { --nav-h: 90px; }

.site-nav {
  position: fixed; top: 0; left: 0; right: 0;
  z-index: 900; height: var(--nav-h);
  display: flex; align-items: center;
  padding: 0 3.5rem; gap: 2rem;
  transition: all 0.5s cubic-bezier(0.16, 1, 0.3, 1);
}
.site-nav.nav-transparent {
  --home-nav-bar-bg: transparent;
  --home-nav-bar-border: transparent;
  --home-nav-shadow: none;
  --home-nav-pill-bg: rgba(7,24,49,.62);
  --home-nav-pill-border: rgba(255,255,255,.24);
  --home-nav-pill-color: #ffffff;
  --home-nav-pill-hover-bg: rgba(7,24,49,.78);
  --home-nav-pill-hover-color: var(--white);
  --home-nav-cta-bg: rgba(7,24,49,.72);
  --home-nav-cta-border: rgba(255,255,255,.3);
  --home-nav-cta-color: var(--white);
  --home-nav-cta-shadow: none;
  --home-nav-burger-bg: rgba(7,24,49,.56);
  --home-nav-burger-border: rgba(255,255,255,.22);
  --home-nav-burger-line: var(--white);
  top: 18px;
  left: 18px;
  right: 18px;
  padding: 0 1rem;
  height: 64px;
  border-radius: 999px;
  background: var(--home-nav-bar-bg);
  border: 1px solid var(--home-nav-bar-border);
  box-shadow: var(--home-nav-shadow);
  z-index: 950;
}
.site-nav.nav-transparent .nav-links {
  justify-content: flex-start;
  gap: .45rem;
  flex: 1 1 auto;
}
.site-nav.nav-transparent .nav-lnk {
  padding: .6rem .95rem;
  border-radius: 999px;
  background: var(--home-nav-pill-bg);
  border: 1px solid var(--home-nav-pill-border);
  backdrop-filter: blur(16px);
  -webkit-backdrop-filter: blur(16px);
  color: var(--home-nav-pill-color);
  font-size: .8rem;
}
.site-nav.nav-transparent .nav-lnk:hover,
.site-nav.nav-transparent .nav-lnk.active {
  background: var(--home-nav-pill-hover-bg);
  color: var(--home-nav-pill-hover-color);
}
.site-nav.nav-transparent .nav-brand {
  position: absolute;
  left: 50%;
  transform: translateX(-50%);
  padding: 0;
  border-radius: 0;
  background: transparent;
  border: 0;
  backdrop-filter: none;
  -webkit-backdrop-filter: none;
}
.site-nav.nav-transparent .nav-brand-img {
  height: 40px;
}
.site-nav.nav-transparent .nav-right {
  gap: .7rem;
  margin-left: auto;
}
.site-nav.nav-transparent .nav-tel {
  display: none;
}
.site-nav.nav-transparent .btn-sm {
  padding: .7rem 1.2rem;
  border-radius: 999px;
  background: var(--home-nav-cta-bg);
  border: 1px solid var(--home-nav-cta-border);
  color: var(--home-nav-cta-color);
  box-shadow: var(--home-nav-cta-shadow);
  backdrop-filter: blur(16px);
  -webkit-backdrop-filter: blur(16px);
}
.site-nav.nav-transparent .theme-toggle {
  background: var(--home-nav-pill-bg);
  border: 1px solid var(--home-nav-pill-border);
  box-shadow: none;
  backdrop-filter: blur(16px);
  -webkit-backdrop-filter: blur(16px);
}
.site-nav.nav-transparent.scrolled {
  top: 12px;
  left: 12px;
  right: 12px;
  height: 64px;
  border-radius: 999px;
  background: var(--home-nav-bar-bg);
  border-color: var(--home-nav-bar-border);
  box-shadow: var(--home-nav-shadow);
}
.site-nav.nav-transparent.nav-surface-dark {
  --home-nav-bar-bg: transparent;
  --home-nav-bar-border: transparent;
  --home-nav-shadow: none;
  --home-nav-pill-bg: rgba(7,24,49,.62);
  --home-nav-pill-border: rgba(255,255,255,.24);
  --home-nav-pill-color: #ffffff;
  --home-nav-pill-hover-bg: rgba(7,24,49,.78);
  --home-nav-pill-hover-color: var(--white);
  --home-nav-cta-bg: rgba(7,24,49,.72);
  --home-nav-cta-border: rgba(255,255,255,.3);
  --home-nav-cta-color: var(--white);
  --home-nav-cta-shadow: none;
  --home-nav-burger-bg: rgba(7,24,49,.56);
  --home-nav-burger-border: rgba(255,255,255,.22);
  --home-nav-burger-line: var(--white);
}
.site-nav.nav-transparent.nav-surface-dark.scrolled {
  --home-nav-bar-bg:
    linear-gradient(90deg, rgba(18,64,147,.84), rgba(29,120,232,.58) 54%, rgba(255,255,255,.18));
  --home-nav-bar-border: rgba(255,255,255,.12);
  --home-nav-shadow: 0 18px 48px rgba(3,7,18,.16);
}
.site-nav.nav-transparent.nav-surface-light {
  --home-nav-bar-bg: rgba(255,255,255,.72);
  --home-nav-bar-border: rgba(148,163,184,.18);
  --home-nav-shadow: 0 18px 40px rgba(15,23,42,.08);
  --home-nav-pill-bg: rgba(255,255,255,.72);
  --home-nav-pill-border: rgba(148,163,184,.26);
  --home-nav-pill-color: var(--g800);
  --home-nav-pill-hover-bg: rgba(37,99,235,.12);
  --home-nav-pill-hover-color: var(--blue-d);
  --home-nav-cta-bg: var(--blue);
  --home-nav-cta-border: var(--blue);
  --home-nav-cta-color: var(--white);
  --home-nav-cta-shadow: 0 10px 28px rgba(37,99,235,.24);
  --home-nav-burger-bg: rgba(255,255,255,.86);
  --home-nav-burger-border: rgba(148,163,184,.28);
  --home-nav-burger-line: var(--g900);
}
html[data-theme='dark'] .site-nav.nav-transparent.nav-surface-light {
  --home-nav-bar-bg: rgba(10,20,35,.88);
  --home-nav-bar-border: rgba(96,165,250,.14);
  --home-nav-shadow: 0 18px 40px rgba(0,0,0,.18);
  --home-nav-pill-bg: rgba(16,34,55,.72);
  --home-nav-pill-border: rgba(96,165,250,.16);
  --home-nav-pill-color: rgba(248,251,255,.88);
  --home-nav-pill-hover-bg: rgba(96,165,250,.18);
  --home-nav-pill-hover-color: var(--white);
  --home-nav-cta-bg: linear-gradient(135deg, #1d4ed8, #2563eb);
  --home-nav-cta-border: rgba(96,165,250,.24);
  --home-nav-cta-color: var(--white);
  --home-nav-cta-shadow: 0 10px 28px rgba(37,99,235,.24);
  --home-nav-burger-bg: rgba(12,23,40,.92);
  --home-nav-burger-border: rgba(96,165,250,.18);
  --home-nav-burger-line: var(--white);
}
.site-nav.nav-transparent.nav-surface-light.scrolled {
  --home-nav-bar-bg: rgba(255,255,255,.84);
  --home-nav-bar-border: rgba(148,163,184,.24);
  --home-nav-shadow: 0 18px 48px rgba(15,23,42,.10);
}
@media(max-width:1080px){
  .site-nav.nav-transparent {
    justify-content: space-between;
  }
  .site-nav.nav-transparent .nav-brand {
    position: static;
    transform: none;
  }
}
@media(max-width:992px){
  .site-nav.nav-transparent {
    display: grid;
    grid-template-columns: 1fr auto 1fr;
    align-items: center;
    justify-content: normal;
  }
  .site-nav.nav-transparent .nav-links,
  .site-nav.nav-transparent .nav-right {
    display: none;
  }
  .site-nav.nav-transparent .nav-brand {
    grid-column: 2;
    position: relative;
    left: auto;
    transform: none;
    justify-self: center;
    z-index: 2;
  }
  .site-nav.nav-transparent .nav-burger {
    display: flex !important;
    grid-column: 3;
    justify-self: end;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    gap: 5px;
    width: 48px;
    height: 48px;
    padding: 0;
    border-radius: 999px;
    background: var(--home-nav-burger-bg);
    border: 1px solid var(--home-nav-burger-border);
    backdrop-filter: none;
    -webkit-backdrop-filter: none;
    flex-shrink: 0;
    position: relative;
    right: auto;
    top: auto;
    transform: none;
    z-index: 3;
    box-shadow: 0 10px 28px rgba(3,7,18,.18);
    margin-left: 0;
    opacity: 1 !important;
    visibility: visible !important;
    appearance: none;
    -webkit-appearance: none;
  }
  .site-nav.nav-transparent .nav-burger span {
    display: block;
    flex: 0 0 auto;
    width: 20px;
    height: 2.5px;
    border-radius: 999px;
    background: var(--home-nav-burger-line) !important;
    opacity: 1 !important;
  }
}
@media(max-width:768px){
  .site-nav.nav-transparent {
    top: 14px;
    left: 14px;
    right: 14px;
    height: 68px;
    padding: 0 .95rem;
    grid-template-columns: 1fr auto 1fr;
    justify-content: normal;
    gap: .75rem;
  }
  .site-nav.nav-transparent .nav-brand {
    position: relative;
    left: auto;
    transform: none;
    padding: 0;
  }
  .site-nav.nav-transparent .nav-brand-img {
    height: 36px;
  }
  .site-nav.nav-transparent .nav-burger {
    width: 46px;
    height: 46px;
  }
}

.site-nav.nav-solid {
  top: 18px;
  left: 18px;
  right: 18px;
  height: 68px;
  padding: 0 1rem;
  border-radius: 999px;
  background:
    linear-gradient(90deg, rgba(22,78,194,.94) 0%, rgba(37,99,235,.84) 32%, rgba(255,255,255,.90) 72%, rgba(255,255,255,.97) 100%);
  border: 1px solid rgba(255,255,255,.64);
  box-shadow: 0 22px 54px rgba(15,23,42,.14);
  backdrop-filter: blur(20px) saturate(1.4);
  -webkit-backdrop-filter: blur(20px) saturate(1.4);
  overflow: hidden;
}
.site-nav.nav-solid::before {
  content: '';
  position: absolute;
  inset: 0;
  border-radius: inherit;
  background: linear-gradient(120deg, rgba(255,255,255,.24), transparent 34%, rgba(255,255,255,.10) 78%, rgba(255,255,255,.22));
  pointer-events: none;
}
.site-nav.nav-solid > * {
  position: relative;
  z-index: 1;
}
.site-nav.scrolled {
  height: 76px;
  background: rgba(255,255,255,.8);
  backdrop-filter: blur(20px) saturate(1.8);
  -webkit-backdrop-filter: blur(20px) saturate(1.8);
  box-shadow: 0 4px 30px rgba(0,0,0,.03);
}
.site-nav.nav-solid.scrolled {
  top: 12px;
  left: 12px;
  right: 12px;
  height: 64px;
  background:
    linear-gradient(90deg, rgba(23,84,208,.92) 0%, rgba(37,99,235,.80) 30%, rgba(255,255,255,.94) 74%, rgba(255,255,255,.98) 100%);
  border-color: rgba(255,255,255,.72);
  box-shadow: 0 18px 46px rgba(15,23,42,.16);
}

.nav-brand { display: flex; align-items: center; gap: 1rem; cursor: pointer; text-decoration: none; }
/* The brand sits after the link list in the DOM so it is not an adjacent
   duplicate of the "Αρχική" link; order restores its visual position in the
   flex layouts. Grid and absolute placements pin it explicitly and ignore this. */
.site-nav .nav-brand { order: -1; }
.nav-brand-img {
  height: 36px; width: auto; border-radius: 6px;
  object-fit: contain;
  transition: all 0.4s ease;
}
.site-nav.scrolled .nav-brand-img { height: 30px; }
.site-nav.nav-solid .nav-brand {
  position: absolute;
  left: 50%;
  transform: translateX(-50%);
  padding: 0;
  border-radius: 0;
  background: transparent;
  border: 0;
  z-index: 10;
  min-width: 60px;
  min-height: 50px;
}
.site-nav.nav-solid .nav-brand-img {
  height: 40px;
}
.site-nav.nav-solid.scrolled .nav-brand-img {
  height: 36px;
}

.nav-links { flex: 1; display: flex; justify-content: center; gap: .5rem; }
.nav-lnk {
  padding: .6rem 1.2rem; font-size: .9rem; font-weight: 600;
  color: var(--g500); border-radius: 100px;
  transition: all 0.3s ease; position: relative;
}
.nav-lnk:hover { color: var(--blue); background: var(--blue-bg); }
.nav-lnk.active { color: var(--blue); background: var(--blue-bg); }
.site-nav.nav-solid .nav-links {
  justify-content: flex-start;
  gap: .45rem;
  flex: 1 1 auto;
}
.site-nav.nav-solid .nav-lnk {
  padding: .62rem .98rem;
  font-size: .82rem;
  background: rgba(255,255,255,.34);
  color: rgba(15,23,42,.88);
  border: 1px solid rgba(255,255,255,.38);
  box-shadow: inset 0 1px 0 rgba(255,255,255,.20);
  backdrop-filter: blur(14px);
  -webkit-backdrop-filter: blur(14px);
}
.site-nav.nav-solid .nav-lnk:hover,
.site-nav.nav-solid .nav-lnk.active {
  background: rgba(255,255,255,.82);
  color: var(--blue-d);
  border-color: rgba(255,255,255,.72);
  transform: translateY(-1px);
}

.nav-right { display: flex; align-items: center; gap: 1.5rem; }
.nav-tel { font-weight: 700; font-size: .9rem; color: var(--g900); }
.site-nav.nav-solid .nav-right {
  gap: .8rem;
  margin-left: auto;
}
.site-nav.nav-solid .nav-tel {
  color: rgba(15,23,42,.76);
}
.site-nav.nav-solid .btn-sm {
  padding: .72rem 1.24rem;
  border-radius: 999px;
  background: rgba(37,99,235,.96);
  border: 1px solid rgba(37,99,235,.96);
  box-shadow: 0 12px 28px rgba(37,99,235,.24);
}

/* ─── NAV DROPDOWN ──────────────────────────────── */
.nav-item-drop { position: relative; }
.nav-drop-menu {
  position: absolute; top: calc(100% + .6rem); left: 50%;
  transform: translateX(-50%);
  min-width: 190px; padding: .5rem;
  background: rgba(255,255,255,.97);
  border: 1px solid rgba(200,215,240,.7);
  border-radius: 16px;
  box-shadow: 0 20px 40px rgba(15,23,42,.14), 0 0 0 1px rgba(255,255,255,.5) inset;
  backdrop-filter: blur(20px) saturate(1.8);
  -webkit-backdrop-filter: blur(20px) saturate(1.8);
  list-style: none; margin: 0;
  display: none; flex-direction: column; gap: .2rem;
  z-index: 200;
}
.nav-item-drop:hover .nav-drop-menu { display: flex; }
.nav-drop-menu li a {
  display: block; padding: .65rem 1.1rem;
  border-radius: 10px; font-size: .83rem; font-weight: 600;
  color: rgba(15,23,42,.85); text-decoration: none;
  transition: all .2s ease; white-space: nowrap;
}
.nav-drop-menu li a:hover { background: var(--blue-bg); color: var(--blue); }
.nav-lnk-drop::after { content: ' ▾'; font-size: .65rem; opacity: .7; vertical-align: 1px; }
html[data-theme='dark'] .nav-drop-menu {
  background: rgba(17,24,39,.97);
  border-color: rgba(255,255,255,.1);
}
html[data-theme='dark'] .nav-drop-menu li a { color: var(--theme-text); }
html[data-theme='dark'] .nav-drop-menu li a:hover { color: var(--blue); }
/* mobile sub-links inside drawer */
.mob-sub-links { display: flex; flex-direction: column; align-items: stretch; gap: .4rem; width: 100%; padding-left: 0; margin-top: -.25rem; margin-bottom: .1rem; }
.mob-sub-links a { font-size: 1rem !important; font-weight: 600 !important; padding: .55rem 1rem !important; }

.theme-toggle {
  position: relative;
  width: 76px;
  height: 36px;
  flex: 0 0 auto;
  display: inline-flex;
  align-items: stretch;
  justify-content: stretch;
  padding: 0;
  border-radius: 999px;
  border: 1px solid var(--theme-toggle-border);
  background: transparent;
  box-shadow: var(--theme-toggle-shadow);
  cursor: pointer;
  overflow: visible;
  transition: transform .35s cubic-bezier(0.16, 1, 0.3, 1), box-shadow .35s ease, border-color .35s ease;
}
.theme-toggle:hover { transform: translateY(-1px); }
.theme-toggle:focus-visible { outline: 2px solid var(--blue); outline-offset: 3px; }
.theme-toggle-track {
  position: relative;
  width: 100%;
  height: 100%;
  border-radius: inherit;
  overflow: hidden;
  background: var(--theme-toggle-bg);
  transition: background .55s ease;
}
.theme-toggle-stars {
  position: absolute; inset: 0; opacity: 0;
  transition: opacity .45s ease;
}
.theme-toggle-stars i {
  position: absolute; width: 2px; height: 2px; border-radius: 50%;
  background: var(--theme-toggle-stars);
  box-shadow: 0 0 6px rgba(254,240,138,.7);
  animation: tt-twinkle 2.4s ease-in-out infinite;
}
.theme-toggle-stars i:nth-child(1) { top: 7px; left: 38px; animation-delay: 0s; }
.theme-toggle-stars i:nth-child(2) { top: 22px; left: 46px; width: 3px; height: 3px; animation-delay: .6s; }
.theme-toggle-stars i:nth-child(3) { top: 11px; left: 54px; animation-delay: 1.2s; }
.theme-toggle-stars i:nth-child(4) { top: 24px; left: 62px; animation-delay: 1.8s; }
@keyframes tt-twinkle {
  0%, 100% { opacity: .35; transform: scale(.7); }
  50% { opacity: 1; transform: scale(1.15); }
}
.theme-toggle-clouds {
  position: absolute; inset: 0;
  transition: opacity .45s ease;
}
.theme-toggle-clouds i {
  position: absolute; background: var(--theme-toggle-cloud); border-radius: 999px;
  box-shadow: 4px 0 0 -1px var(--theme-toggle-cloud), -4px 0 0 -1px var(--theme-toggle-cloud);
}
.theme-toggle-clouds i:nth-child(1) {
  top: 9px; left: 40px; width: 10px; height: 4px;
  animation: tt-drift 7s ease-in-out infinite;
}
.theme-toggle-clouds i:nth-child(2) {
  top: 21px; left: 34px; width: 8px; height: 3px; opacity: .75;
  animation: tt-drift 9s ease-in-out infinite reverse;
}
@keyframes tt-drift {
  0%, 100% { transform: translateX(0); }
  50% { transform: translateX(8px); }
}
.theme-toggle-panel {
  position: absolute;
  top: 50%;
  right: 8px;
  width: 18px;
  height: 14px;
  border-radius: 3px;
  background: var(--theme-toggle-panel);
  border: 1px solid rgba(255,255,255,.18);
  box-shadow: 0 4px 8px rgba(15,23,42,.28), inset 0 0 6px rgba(255,255,255,.08);
  transform: translateY(-50%) perspective(40px) rotateX(10deg) skewX(-14deg);
  overflow: hidden;
  transition: right .55s cubic-bezier(0.16, 1, 0.3, 1), background .45s ease, box-shadow .45s ease;
}
.theme-toggle-panel i { position: absolute; background: var(--theme-toggle-panel-line); }
.theme-toggle-panel i:nth-child(1) { left: 6px; top: 0; bottom: 0; width: 1px; }
.theme-toggle-panel i:nth-child(2) { left: 12px; top: 0; bottom: 0; width: 1px; }
.theme-toggle-panel i:nth-child(3) { left: 0; right: 0; top: 7px; height: 1px; }
.theme-toggle-thumb {
  position: absolute;
  top: 50%;
  left: 5px;
  width: 26px;
  height: 26px;
  border-radius: 50%;
  background: var(--theme-toggle-thumb-bg);
  box-shadow: var(--theme-toggle-thumb-glow);
  transform: translateY(-50%);
  transition: left .55s cubic-bezier(0.34, 1.56, 0.64, 1), background .45s ease, box-shadow .45s ease;
  z-index: 2;
}
.theme-toggle-rays {
  position: absolute; inset: -7px; border-radius: 50%;
  background: conic-gradient(from 0deg,
    transparent 0deg 20deg, var(--theme-toggle-rays) 20deg 25deg,
    transparent 25deg 65deg, var(--theme-toggle-rays) 65deg 70deg,
    transparent 70deg 110deg, var(--theme-toggle-rays) 110deg 115deg,
    transparent 115deg 155deg, var(--theme-toggle-rays) 155deg 160deg,
    transparent 160deg 200deg, var(--theme-toggle-rays) 200deg 205deg,
    transparent 205deg 245deg, var(--theme-toggle-rays) 245deg 250deg,
    transparent 250deg 290deg, var(--theme-toggle-rays) 290deg 295deg,
    transparent 295deg 335deg, var(--theme-toggle-rays) 335deg 340deg,
    transparent 340deg 360deg);
  -webkit-mask: radial-gradient(circle, transparent 12px, #000 13px, #000 18px, transparent 19px);
          mask: radial-gradient(circle, transparent 12px, #000 13px, #000 18px, transparent 19px);
  opacity: .9;
  animation: tt-spin 14s linear infinite;
  transition: opacity .45s ease;
  pointer-events: none;
}
@keyframes tt-spin { to { transform: rotate(360deg); } }
.theme-toggle-craters {
  position: absolute; inset: 0; opacity: 0;
  transition: opacity .45s ease;
  pointer-events: none;
}
.theme-toggle-craters i {
  position: absolute;
  background: rgba(100,116,139,.5);
  border-radius: 50%;
  box-shadow: inset 1px 1px 0 rgba(15,23,42,.25);
}
.theme-toggle-craters i:nth-child(1) { width: 5px; height: 5px; top: 6px; left: 7px; }
.theme-toggle-craters i:nth-child(2) { width: 3px; height: 3px; top: 14px; left: 15px; }

html[data-theme='dark'] .theme-toggle-thumb {
  left: calc(100% - 31px);
}
html[data-theme='dark'] .theme-toggle-rays { opacity: 0; }
html[data-theme='dark'] .theme-toggle-craters { opacity: 1; }
html[data-theme='dark'] .theme-toggle-stars { opacity: 1; }
html[data-theme='dark'] .theme-toggle-clouds { opacity: 0; }
html[data-theme='dark'] .theme-toggle-panel {
  right: calc(100% - 26px);
}

.site-nav.nav-solid .theme-toggle { margin-left: .35rem; }
.site-nav.nav-transparent .theme-toggle {
  border-color: rgba(255,255,255,.22);
  box-shadow: 0 8px 22px rgba(0,0,0,.22);
}

.nav-burger { display: none; }

/* ─── MOBILE DRAWER ─── */
.mob-drawer {
  position: fixed; inset: 0; background: var(--white); color: var(--g900); z-index: 1000;
  display: flex; flex-direction: column; align-items: center; justify-content: flex-start; gap: 2rem;
  padding: 5rem 1.5rem 2rem;
  text-align: center;
  overflow-y: auto;
  -webkit-overflow-scrolling: touch;
  opacity: 0;
  visibility: hidden;
  pointer-events: none;
  transition: opacity 0.28s ease, visibility 0.28s ease;
}
.mob-drawer.open { opacity: 1; visibility: visible; pointer-events: auto; }
.mob-drawer .mob-drawer-menu {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: .75rem;
  width: min(100%, 340px);
  margin: auto 0;
  opacity: 1;
  visibility: visible;
}
.mob-drawer a {
  font-family: 'Space Grotesk', 'Space Grotesk Fallback', sans-serif;
  font-size: 1.55rem;
  font-weight: 800;
  color: var(--g900);
  line-height: 1;
  display: block;
  width: 100%;
  max-width: 320px;
  opacity: 1 !important;
  visibility: visible !important;
  transform: none !important;
}
.mob-drawer .btn.btn-blue { color: var(--white); }
.mob-drawer .close {
  position: absolute; top: 2rem; right: 2rem; font-size: 2rem; color: var(--g900);
  z-index: 2;
}
/* Hide floating third-party widgets (accessibility + chat) while the drawer is open */
body.drawer-open .asw-menu-btn,
body.drawer-open .asw-menu,
body.drawer-open [data-cbm-widget-root] {
  display: none !important;
}
/* Persistent per-widget visibility, controlled by the in-drawer toggles */
body.hide-asw .asw-menu-btn,
body.hide-asw .asw-menu {
  display: none !important;
}
body.hide-chat [data-cbm-widget-root] {
  display: none !important;
}

/* In-drawer toggle switches for the floating widgets */
.mob-drawer-widgets {
  width: 100%;
  display: flex;
  flex-direction: column;
  gap: .85rem;
  margin-top: 1.25rem;
  padding-top: 1.25rem;
  border-top: 1px solid var(--theme-border);
}
.mob-widget-toggle {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 1rem;
  cursor: pointer;
  font-size: .95rem;
  font-weight: 600;
  color: var(--theme-text);
  letter-spacing: .01em;
}
.mob-switch {
  position: relative;
  flex: 0 0 auto;
  width: 46px;
  height: 26px;
}
.mob-switch input {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  margin: 0;
  opacity: 0;
  cursor: pointer;
  z-index: 1;
}
.mob-switch-slider {
  position: absolute;
  inset: 0;
  border-radius: 999px;
  background: var(--g300);
  transition: background .25s ease;
  pointer-events: none;
}
.mob-switch-slider::before {
  content: '';
  position: absolute;
  top: 3px;
  left: 3px;
  width: 20px;
  height: 20px;
  border-radius: 50%;
  background: #fff;
  box-shadow: 0 2px 5px rgba(0,0,0,.25);
  transition: transform .25s ease;
}
.mob-switch input:checked + .mob-switch-slider {
  background: var(--blue);
}
.mob-switch input:checked + .mob-switch-slider::before {
  transform: translateX(20px);
}

/* ─── GSAP HELPER CLASSES ────────────────────────────── */
.reveal-gsap { opacity: 0; transform: translateY(40px); }
.parallax-img { overflow: hidden; }
.parallax-img img { height: 120%; width: 100%; object-fit: cover; margin-top: -10%; }

/* ─── STATS ─── */
.stats-row { display: grid; grid-template-columns: repeat(3, 1fr); background: var(--white); max-width: 900px; margin-left: auto; margin-right: auto; }
.stat-col { padding: 5rem 2rem; text-align: center; border-right: 1px solid var(--g100); }
.stat-num { font-family: 'Space Grotesk', 'Space Grotesk Fallback', sans-serif; font-size: 4.5rem; font-weight: 800; color: var(--blue); line-height: 1; }
.stat-lbl { font-size: .9rem; font-weight: 600; color: var(--g500); text-transform: uppercase; letter-spacing: .05em; margin-top: .5rem; }

/* ─── PRODUCTS LINK: Suntree and products pages only ───
   Προϊόντα appears only on suntree.html and products.html, and there it follows the
   CMS toggle through main.js. Everywhere else it is hidden in CSS, so the
   link never flashes before the script runs, whatever the CMS setting.
   Scoped to header, drawer and footer: in-page links such as the product
   page's back link stay visible. */
body:not([data-page="suntree"]):not([data-page="products"]) :is(.site-nav, .mob-drawer, .footer) a[href="products.html"],
body:not([data-page="suntree"]):not([data-page="products"]) :is(.site-nav, .footer) li:has(> a[href="products.html"]) {
  display: none !important;
}

/* ─── PARTNER BANNERS (ZTT / EnerCup / Suntree) ─── */
.partner-banners {
  display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 1.25rem;
  max-width: 1180px; margin: -.75rem auto 0; padding: 0 1.25rem 3.75rem;
}
.pb-card {
  position: relative; display: flex; flex-direction: column; gap: .5rem;
  min-height: 196px; padding: 1.6rem 1.85rem 1.55rem;
  border-radius: 20px; color: #fff; text-decoration: none;
  border: 1px solid rgba(255,255,255,.06);
  box-shadow: 0 10px 30px rgba(3,7,18,.12);
  transition: transform .35s cubic-bezier(.16,1,.3,1), box-shadow .35s cubic-bezier(.16,1,.3,1);
}
.pb-card:hover, .pb-card:focus-visible { transform: translateY(-4px); box-shadow: 0 18px 44px rgba(3,7,18,.22); }
.pb-card:focus-visible { outline: 3px solid #60a5fa; outline-offset: 3px; }
.pb-ztt { background: #0b2a6e; --pb-accent: #ff7580; --pb-cta: #bfdbfe; }
.pb-enercup { background: #0b0f13; --pb-accent: #55efe0; --pb-cta: #55efe0; }
.pb-suntree { background: #0d4a2c; --pb-accent: #f2b33d; --pb-cta: #bfeccb; }

/* brand lockup */
.pb-lockup { display: flex; align-items: center; flex-wrap: wrap; gap: .65rem .85rem; margin: .1rem 0 .55rem; }
.pb-brand {
  font-family: 'Ubuntu', 'Ubuntu Fallback', 'Inter', sans-serif; font-weight: 700;
  font-size: 1.38rem; letter-spacing: -.02em; line-height: 1; white-space: nowrap;
}
.pb-brand em { font-style: normal; color: #6fdfd3; }
.pb-x { font-weight: 300; font-size: 1.3rem; line-height: 1; opacity: .8; }
.pb-logo { display: block; height: 28px; width: auto; }
.pb-logo-ztt { height: 25px; }
.pb-logo-enercup { height: 23px; }
/* the Suntree mark carries its ring above the wordmark, so it needs more height for the same wordmark size */
.pb-logo-suntree { height: 38px; margin-block: -8px; transform: translateY(-5px); }

.pb-kicker {
  font-size: .86rem; font-weight: 600; line-height: 1.3;
  color: var(--pb-accent);
}
.pb-title {
  font-family: 'Space Grotesk', 'Space Grotesk Fallback', sans-serif;
  font-size: 1.2rem; font-weight: 700; line-height: 1.3; max-width: 24ch; color: #fff;
}
.pb-cta {
  display: inline-flex; align-items: center; gap: .45rem; margin-top: auto; padding-top: 1rem;
  font-size: .9rem; font-weight: 600;
  color: var(--pb-cta);
}
.pb-cta i { font-style: normal; transition: transform .3s cubic-bezier(.16,1,.3,1); }
.pb-card:hover .pb-cta i { transform: translateX(4px); }

@media (max-width: 1000px) {
  .partner-banners { grid-template-columns: repeat(2, minmax(0, 1fr)); max-width: 1040px; gap: 1.5rem; }
  .pb-suntree { grid-column: 1 / -1; }
}
@media (max-width: 860px) {
  .partner-banners { gap: 1.1rem; }
  .pb-card { min-height: 180px; padding: 1.4rem 1.45rem 1.35rem; }
  .pb-brand { font-size: 1.2rem; }
  .pb-title { font-size: 1.06rem; }
}
@media (max-width: 680px) {
  .partner-banners { grid-template-columns: 1fr; max-width: 520px; margin-top: -1rem; padding-bottom: 3rem; }
  .pb-suntree { grid-column: auto; }
  .pb-card { min-height: 0; }
}
@media (prefers-reduced-motion: reduce) {
  .pb-card, .pb-cta i { transition: none; }
}

/* ─── CARDS ─── */
.card {
  background: var(--white); border-radius: var(--rl); padding: 2.5rem;
  border: 1px solid var(--g100); transition: all 0.5s cubic-bezier(0.16, 1, 0.3, 1);
  box-shadow: var(--shadow);
}
.card:hover { transform: translateY(-10px); box-shadow: var(--shadow-lg); border-color: var(--blue-bg); }

/* ─── FOOTER ─── */
.footer { background: var(--dark); color: var(--white); padding: 8rem 2.5rem 4rem; }
.footer-grid { max-width: 1320px; margin: 0 auto; display: grid; grid-template-columns: 2fr 1fr 1fr 1fr; gap: 4rem; margin-bottom: 6rem; }
.footer-brand-logo {
  width: 180px;
  height: auto;
  max-width: 100%;
  margin-bottom: 2rem;
  object-fit: contain;
}
.footer-socials { display: flex; gap: 1rem; margin-top: 2rem; }
.footer-soc {
  width: 48px; height: 48px; border-radius: 14px; background: rgba(255,255,255,.05);
  display: flex; align-items: center; justify-content: center; transition: all 0.3s ease;
}
.footer-soc:hover { background: var(--blue); transform: translateY(-5px); }
.footer-col h2 { font-family: 'Space Grotesk', 'Space Grotesk Fallback', sans-serif; font-size: 1rem; font-weight: 700; line-height: 1.3; margin-bottom: 2rem; color: var(--white); }
.footer-col ul { display: flex; flex-direction: column; gap: 1rem; }
/* The footer surface is #030712 in both themes, so it must not use the
   theme-relative gray ramp — in dark theme --g300/--g400 invert to near-black
   and drop the legal row to about 2:1. These are fixed light-on-dark values. */
.footer-col a { color: #cbd5e1; transition: color 0.3s ease; }
.footer-col a:hover { color: var(--white); }

.footer-bottom { max-width: 1320px; margin: 0 auto; display: flex; justify-content: space-between; border-top: 1px solid rgba(255,255,255,.14); padding-top: 2rem; color: #cbd5e1; font-size: .9rem; }
.footer-bottom a { color: #cbd5e1; }
.footer-bottom a:hover, .footer-bottom a:focus-visible { color: var(--white); }
.footer p { color: #cbd5e1; }

/* ─── CONSENT MANAGER ───────────────────────────────── */
.consent-panel {
  position: fixed;
  left: 1rem;
  right: 1rem;
  bottom: 1rem;
  z-index: 2000;
}
.consent-panel.is-hidden { display: none; }
.consent-card {
  max-width: 1040px;
  margin: 0 auto;
  display: grid;
  grid-template-columns: minmax(0, .95fr) minmax(0, 1.35fr);
  gap: 1.25rem;
  padding: 1.25rem;
  border: 1px solid var(--theme-border);
  border-radius: 18px;
  background: var(--theme-surface);
  color: var(--theme-text);
  box-shadow: 0 24px 80px rgba(15,23,42,.22);
}
.consent-copy h2 {
  font-family: 'Space Grotesk', 'Space Grotesk Fallback', sans-serif;
  font-size: 1.45rem;
  line-height: 1.15;
  margin: .25rem 0 .65rem;
}
.consent-copy p { color: var(--theme-muted); margin: .25rem 0 .75rem; }
.consent-copy a { color: var(--blue); font-weight: 800; }
.consent-eyebrow {
  color: var(--blue);
  font-size: .72rem;
  font-weight: 800;
  letter-spacing: .16em;
  text-transform: uppercase;
}
.consent-form { display: grid; gap: .65rem; }
.consent-option {
  display: flex;
  align-items: flex-start;
  justify-content: space-between;
  gap: 1rem;
  padding: .85rem;
  border: 1px solid var(--theme-border);
  border-radius: 12px;
  background: var(--theme-surface-soft);
}
.consent-option strong { display: block; color: var(--theme-text); margin-bottom: .15rem; }
.consent-option small {
  display: block;
  color: var(--theme-muted);
  line-height: 1.35;
}
.consent-option input {
  width: 1.25rem;
  height: 1.25rem;
  flex: 0 0 auto;
  margin-top: .15rem;
  accent-color: var(--blue);
}
/* Accept and reject sit side by side at equal width so refusing is exactly as
   easy to find and hit as agreeing. */
.consent-actions {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: .6rem;
}
.consent-btn,
.consent-embed-placeholder button {
  border: 0;
  border-radius: 999px;
  padding: .78rem 1rem;
  font-weight: 800;
  font-size: 1rem;
  font-family: inherit;
  cursor: pointer;
}
.consent-btn-primary,
.consent-embed-placeholder button {
  background: var(--blue-fill);
  color: var(--white);
}
/* One shared class for both first-layer choices: identical colour, size and
   weight, so neither is visually privileged. */
.consent-btn-choice {
  width: 100%;
  background: var(--theme-text);
  color: var(--theme-bg);
}
.consent-btn-save {
  width: 100%;
  background: transparent;
  color: var(--theme-text);
  border: 1px solid var(--theme-border);
}
.consent-btn:focus-visible,
.consent-option input:focus-visible,
.consent-copy a:focus-visible {
  outline: 3px solid var(--blue);
  outline-offset: 2px;
}
.footer-legal {
  display: flex;
  flex-wrap: wrap;
  gap: .4rem 1.25rem;
  align-items: center;
  justify-content: center;
}
.footer-legal a {
  color: #cbd5e1;
  transition: color .3s ease;
}
.footer-legal a:hover,
.footer-legal a:focus-visible { color: var(--white); }
.footer-cookie-settings {
  color: #cbd5e1;
  font: inherit;
  transition: color .3s ease;
}
.footer-cookie-settings:hover,
.footer-cookie-settings:focus-visible { color: var(--white); }
.consent-embed-placeholder {
  position: absolute;
  inset: 0;
  z-index: 2;
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  gap: 1rem;
  padding: 1.5rem;
  text-align: center;
  background: var(--theme-surface-soft);
  color: var(--theme-text);
  border: 1px solid var(--theme-border);
}
.consent-embed-placeholder[hidden] { display: none !important; }
.consent-embed-placeholder p {
  margin: .35rem 0 0;
  color: var(--theme-muted);
}
.map-frame { position: relative; }

html[data-theme='dark'] .site-nav.nav-solid {
  background: linear-gradient(90deg, rgba(8,18,33,.96) 0%, rgba(13,29,48,.94) 42%, rgba(16,35,57,.98) 100%) !important;
  border: 1px solid rgba(96,165,250,.16) !important;
  box-shadow: 0 22px 54px rgba(0,0,0,.28) !important;
  backdrop-filter: blur(20px) saturate(1.2) !important;
  -webkit-backdrop-filter: blur(20px) saturate(1.2) !important;
}
html[data-theme='dark'] .site-nav.nav-solid.scrolled {
  background: linear-gradient(90deg, rgba(8,18,33,.98) 0%, rgba(13,29,48,.97) 46%, rgba(16,35,57,.99) 100%) !important;
  border: 1px solid rgba(96,165,250,.18) !important;
  box-shadow: 0 18px 46px rgba(0,0,0,.30) !important;
}
html[data-theme='dark'] .site-nav.nav-solid::before { display: none !important; }
html[data-theme='dark'] .site-nav.scrolled {
  background: rgba(10,20,35,.88);
  box-shadow: 0 10px 30px rgba(0,0,0,.26);
}
html[data-theme='dark'] .site-nav.nav-solid .nav-lnk {
  background: rgba(16,34,55,.72);
  color: var(--theme-nav-text);
  border-color: rgba(96,165,250,.14);
  box-shadow: inset 0 1px 0 rgba(255,255,255,.03);
}
html[data-theme='dark'] .site-nav.nav-solid .nav-lnk:hover,
html[data-theme='dark'] .site-nav.nav-solid .nav-lnk.active {
  background: rgba(96,165,250,.16);
  color: #f8fbff;
  border-color: rgba(147,197,253,.28);
}
html[data-theme='dark'] .site-nav.nav-solid .nav-tel { color: var(--theme-nav-tel); }
html[data-theme='dark'] .site-nav.nav-solid .btn-sm {
  background: linear-gradient(135deg, #1d4ed8, #2563eb);
  border-color: rgba(96,165,250,.26);
  box-shadow: 0 12px 28px rgba(37,99,235,.22);
}
html[data-theme='dark'] .mob-drawer {
  background: linear-gradient(180deg, #07111f, #0c1728);
}
html[data-theme='dark'] .mob-drawer a,
html[data-theme='dark'] .mob-drawer .close {
  color: var(--g900);
}
html[data-theme='dark'] .stats-row,
html[data-theme='dark'] .story,
html[data-theme='dark'] .timeline,
html[data-theme='dark'] .partners,
html[data-theme='dark'] .cta-final,
html[data-theme='dark'] .featured-article,
html[data-theme='dark'] .blog-section,
html[data-theme='dark'] .newsletter,
html[data-theme='dark'] .projects-section,
html[data-theme='dark'] .project-body,
html[data-theme='dark'] .gallery-section,
html[data-theme='dark'] .ba-section,
html[data-theme='dark'] .related-section,
html[data-theme='dark'] .contact-section,
html[data-theme='dark'] .services-hero,
html[data-theme='dark'] .services-intro,
html[data-theme='dark'] .services-grid-section,
html[data-theme='dark'] .process-section,
html[data-theme='dark'] .service-main,
html[data-theme='dark'] .detail-section,
html[data-theme='dark'] .detail-section--soft {
  background: var(--theme-bg) !important;
  color: var(--theme-text);
}
html[data-theme='dark'] .section--gray,
html[data-theme='dark'] .founder,
html[data-theme='dark'] .certs-section,
html[data-theme='dark'] .map-section,
html[data-theme='dark'] .social-video-strip,
html[data-theme='dark'] .blog-prev {
  background: var(--theme-surface-soft) !important;
}
html[data-theme='dark'] .card,
html[data-theme='dark'] .intro-card,
html[data-theme='dark'] .cred,
html[data-theme='dark'] .cert-card,
html[data-theme='dark'] .service-card,
html[data-theme='dark'] .support-card,
html[data-theme='dark'] .process-card,
html[data-theme='dark'] .contact-form-card,
html[data-theme='dark'] .gallery-card,
html[data-theme='dark'] .detail-card,
html[data-theme='dark'] .applications-card,
html[data-theme='dark'] .contact-card,
html[data-theme='dark'] .related-card,
html[data-theme='dark'] .stat-card,
html[data-theme='dark'] .service-side-card,
html[data-theme='dark'] .ba-card,
html[data-theme='dark'] .services-hero-panel,
html[data-theme='dark'] .service-hero-panel,
html[data-theme='dark'] .article-body,
html[data-theme='dark'] .map-frame,
html[data-theme='dark'] .f-input,
html[data-theme='dark'] .newsletter-form input,
html[data-theme='dark'] .filter-btn,
html[data-theme='dark'] .social-video-card {
  background: var(--theme-surface) !important;
  border-color: var(--theme-border) !important;
  color: var(--theme-text);
  box-shadow: var(--shadow);
}
html[data-theme='dark'] .filter-btn:hover {
  background: var(--theme-surface-soft) !important;
}
html[data-theme='dark'] .cert-pill {
  background: var(--theme-surface) !important;
  border-color: var(--theme-border) !important;
}
html[data-theme='dark'] .marquee-wrap::before {
  background: linear-gradient(to right, var(--theme-surface-soft), transparent) !important;
}
html[data-theme='dark'] .marquee-wrap::after {
  background: linear-gradient(to left, var(--theme-surface-soft), transparent) !important;
}
html[data-theme='dark'] .partner-strip {
  background: var(--theme-surface-soft);
  border-color: var(--theme-border);
}

/* ─── PAGE HERO (inner pages) ─────────────────────────── */
body[data-page="about"] .page-hero,
body[data-page="services"] .page-hero,
body[data-page="projects"] .page-hero,
body[data-page="blog"] .page-hero,
body[data-page="presences"] .page-hero,
body[data-page="contact"] .page-hero {
  position: relative;
  padding: calc(var(--nav-h) + 3.5rem) 0 3.5rem;
  background: var(--white);
  border-bottom: 1px solid var(--g100);
}
.page-hero--dark {
  background: var(--dark2); color: var(--white); border: none;
}
body[data-page="about"] .page-hero-grid,
body[data-page="services"] .page-hero-grid,
body[data-page="projects"] .page-hero-grid,
body[data-page="blog"] .page-hero-grid,
body[data-page="presences"] .page-hero-grid,
body[data-page="contact"] .page-hero-grid {
  display: block;
  max-width: 900px;
}
/* no card — bold editorial hero */
body[data-page="about"] .page-hero-copy,
body[data-page="services"] .page-hero-copy,
body[data-page="projects"] .page-hero-copy,
body[data-page="blog"] .page-hero-copy,
body[data-page="presences"] .page-hero-copy,
body[data-page="contact"] .page-hero-copy {
  position: relative;
  padding: 0;
  background: none;
  border: 0;
  border-radius: 0;
  box-shadow: none;
}
/* eyebrow = solid filled kicker slab */
body[data-page="about"] .page-hero-copy .eyebrow,
body[data-page="services"] .page-hero-copy .eyebrow,
body[data-page="projects"] .page-hero-copy .eyebrow,
body[data-page="blog"] .page-hero-copy .eyebrow,
body[data-page="presences"] .page-hero-copy .eyebrow,
body[data-page="contact"] .page-hero-copy .eyebrow {
  display: inline-block;
  margin-bottom: 1.6rem;
  padding: .52rem 1.05rem;
  background: var(--blue-fill);
  border: 0;
  border-radius: 6px;
  color: #fff;
  font-weight: 800;
  letter-spacing: .2em;
}
/* oversized display title + short thick accent underline */
body[data-page="about"] .page-hero-copy .display,
body[data-page="services"] .page-hero-copy .display,
body[data-page="projects"] .page-hero-copy .display,
body[data-page="blog"] .page-hero-copy .display,
body[data-page="presences"] .page-hero-copy .display,
body[data-page="contact"] .page-hero-copy .display {
  font-size: clamp(2.9rem, 7.5vw, 5.6rem);
  margin-bottom: 1.6rem;
}
body[data-page="about"] .page-hero-copy .display::after,
body[data-page="services"] .page-hero-copy .display::after,
body[data-page="projects"] .page-hero-copy .display::after,
body[data-page="blog"] .page-hero-copy .display::after,
body[data-page="presences"] .page-hero-copy .display::after,
body[data-page="contact"] .page-hero-copy .display::after {
  content: '';
  display: block;
  width: 68px;
  height: 5px;
  margin-top: 1.35rem;
  border-radius: 3px;
  background: #f59e0b;
}
body[data-page="about"] .page-hero-side,
body[data-page="services"] .page-hero-side,
body[data-page="projects"] .page-hero-side,
body[data-page="blog"] .page-hero-side,
body[data-page="presences"] .page-hero-side,
body[data-page="contact"] .page-hero-side {
  display: none;
}
.page-hero .breadcrumb {
  display: flex; align-items: center; gap: .4rem;
  /* --g400 (#94a3b8) is only 2.6:1 on the white hero; --g500 clears 4.5:1. */
  font-size: .8rem; color: var(--g500); margin-bottom: 1.5rem;
  flex-wrap: wrap;
}
.page-hero .breadcrumb a:hover,
.page-hero .breadcrumb a:focus-visible { color: var(--blue-on-light); }
.page-hero .eyebrow { display: block; margin-bottom: .9rem; }
.page-hero .display  { margin-bottom: 1rem; }
body[data-page="about"] .page-hero .lead,
body[data-page="services"] .page-hero .lead,
body[data-page="projects"] .page-hero .lead,
body[data-page="blog"] .page-hero .lead,
body[data-page="presences"] .page-hero .lead,
body[data-page="contact"] .page-hero .lead {
  max-width: 620px;
  color: var(--g600);
}

/* Every page-hero that opts into the white background above must also opt into
   the dark repaint, otherwise the theme-relative text colours land on white.
   services and presences were missing here, which left the presences hero at
   1.03:1 in dark theme. */
html[data-theme='dark'] body[data-page="about"] .page-hero,
html[data-theme='dark'] body[data-page="services"] .page-hero,
html[data-theme='dark'] body[data-page="projects"] .page-hero,
html[data-theme='dark'] body[data-page="presences"] .page-hero,
html[data-theme='dark'] body[data-page="blog"] .page-hero,
html[data-theme='dark'] body[data-page="contact"] .page-hero {
  background: var(--theme-bg);
  border-bottom-color: var(--theme-border);
}
html[data-theme='dark'] body[data-page="about"] .page-hero-copy,
html[data-theme='dark'] body[data-page="projects"] .page-hero-copy,
html[data-theme='dark'] body[data-page="blog"] .page-hero-copy,
html[data-theme='dark'] body[data-page="presences"] .page-hero-copy,
html[data-theme='dark'] body[data-page="contact"] .page-hero-copy {
  background: none;
  border: 0;
  box-shadow: none;
}
html[data-theme='dark'] body[data-page="about"] .page-hero .display,
html[data-theme='dark'] body[data-page="services"] .page-hero .display,
html[data-theme='dark'] body[data-page="projects"] .page-hero .display,
html[data-theme='dark'] body[data-page="blog"] .page-hero .display,
html[data-theme='dark'] body[data-page="presences"] .page-hero .display,
html[data-theme='dark'] body[data-page="contact"] .page-hero .display {
  color: var(--theme-text);
}
html[data-theme='dark'] body[data-page="about"] .page-hero .lead,
html[data-theme='dark'] body[data-page="services"] .page-hero .lead,
html[data-theme='dark'] body[data-page="projects"] .page-hero .lead,
html[data-theme='dark'] body[data-page="blog"] .page-hero .lead,
html[data-theme='dark'] body[data-page="presences"] .page-hero .lead,
html[data-theme='dark'] body[data-page="contact"] .page-hero .lead,
html[data-theme='dark'] body[data-page="about"] .page-hero .breadcrumb,
html[data-theme='dark'] body[data-page="services"] .page-hero .breadcrumb,
html[data-theme='dark'] body[data-page="projects"] .page-hero .breadcrumb,
html[data-theme='dark'] body[data-page="blog"] .page-hero .breadcrumb,
html[data-theme='dark'] body[data-page="presences"] .page-hero .breadcrumb,
html[data-theme='dark'] body[data-page="contact"] .page-hero .breadcrumb {
  color: var(--theme-muted);
}
/* The breadcrumb's "current page" segment is written inline as
   style="color:var(--g700)" on every hero; in dark theme that token inverts to
   a near-white that then sits on the repainted dark surface, which is correct,
   but on the light theme it must stay dark enough. Both are handled by --g700
   itself; this rule only pins the separator, which had no colour of its own. */
.page-hero .breadcrumb > span { color: inherit; }

/* ─── RESPONSIVE ─── */
@media (max-width: 1200px) {
  .site-nav { padding: 0 2rem; }
  .footer-grid { grid-template-columns: 1fr 1fr; gap: 3rem; }
}
@media (max-width: 992px) {
  .nav-links, .nav-right { display: none; }
  .site-nav .theme-toggle { display: none; }
  .theme-toggle {
    width: 64px;
    height: 32px;
    margin-left: auto;
    margin-right: .4rem;
  }
  .mob-drawer-theme {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 1rem;
    margin-top: 1.25rem;
    padding-top: 1.25rem;
    border-top: 1px solid var(--theme-border);
  }
  .mob-drawer-theme-label {
    font-weight: 600;
    color: var(--theme-text);
    letter-spacing: .02em;
  }
  .mob-drawer-theme .theme-toggle { margin: 0; }
  .theme-toggle-thumb { width: 22px; height: 22px; left: 4px; }
  .theme-toggle-rays { inset: -6px; -webkit-mask: radial-gradient(circle, transparent 10px, #000 11px, #000 15px, transparent 16px); mask: radial-gradient(circle, transparent 10px, #000 11px, #000 15px, transparent 16px); }
  html[data-theme='dark'] .theme-toggle-thumb { left: calc(100% - 26px); }
  .theme-toggle-panel { width: 15px; height: 12px; right: 6px; }
  .theme-toggle-panel i:nth-child(1) { left: 5px; }
  .theme-toggle-panel i:nth-child(2) { left: 10px; }
  .theme-toggle-panel i:nth-child(3) { top: 6px; }
  html[data-theme='dark'] .theme-toggle-panel { right: calc(100% - 22px); }
  .theme-toggle-stars i:nth-child(1) { top: 6px; left: 32px; }
  .theme-toggle-stars i:nth-child(2) { top: 19px; left: 39px; }
  .theme-toggle-stars i:nth-child(3) { top: 9px; left: 46px; }
  .theme-toggle-stars i:nth-child(4) { top: 21px; left: 52px; }
  .theme-toggle-clouds i:nth-child(1) { top: 8px; left: 34px; }
  .theme-toggle-clouds i:nth-child(2) { top: 18px; left: 28px; }
  .site-nav.nav-solid .theme-toggle { margin-left: auto; }
  .nav-burger { display: flex; flex-direction: column; gap: 6px; margin-left: auto; background: none; border: 0; padding: 8px; cursor: pointer; }
  .nav-burger span { width: 28px; height: 2px; background: var(--g900); display: block; }
  .site-nav.nav-solid {
    top: 14px;
    left: 14px;
    right: 14px;
    height: 66px;
    padding: 0 1rem;
  }
  .site-nav.nav-solid .nav-brand-img {
    height: 36px;
  }
  .site-nav.nav-solid .nav-burger {
    width: 48px;
    height: 48px;
    border-radius: 999px;
    background: rgba(255,255,255,.34);
    border: 1px solid rgba(255,255,255,.46);
    box-shadow: 0 12px 28px rgba(15,23,42,.12);
    justify-content: center;
    align-items: center;
    gap: 5px;
    padding: 0;
  }
  .site-nav.nav-solid .nav-burger span {
    width: 20px;
    height: 2px;
    border-radius: 999px;
    background: var(--g900);
  }
  .stats-row { grid-template-columns: repeat(3, 1fr); }
}
@media (max-width: 768px) {
  .section { padding: 5rem 1.5rem; }
  .stats-row {
    width: 100%;
    max-width: 100%;
    overflow: hidden;
    grid-template-columns: 1fr;
  }
  .stat-col {
    padding: 3rem 1rem;
  }
  .stat-num {
    font-size: clamp(2.6rem, 13vw, 3.3rem);
    line-height: .95;
  }
  .stat-lbl {
    font-size: .82rem;
    line-height: 1.45;
  }
  .footer-grid { grid-template-columns: 1fr; }
  .footer-bottom { flex-direction: column; gap: 1rem; text-align: center; }
  .consent-panel {
    left: .5rem;
    right: .5rem;
    bottom: .5rem;
  }
  .consent-card {
    grid-template-columns: 1fr;
    max-height: 85vh;
    overflow-y: auto;
  }
  .consent-actions { grid-template-columns: 1fr; }
  body[data-page="about"] .page-hero,
  body[data-page="services"] .page-hero,
  body[data-page="projects"] .page-hero,
  body[data-page="blog"] .page-hero,
  body[data-page="contact"] .page-hero {
    padding: calc(var(--nav-h) + 2.5rem) 0 3rem;
  }
  body[data-page="about"] .page-hero-copy .display,
  body[data-page="services"] .page-hero-copy .display,
  body[data-page="projects"] .page-hero-copy .display,
  body[data-page="blog"] .page-hero-copy .display,
  body[data-page="presences"] .page-hero-copy .display,
  body[data-page="contact"] .page-hero-copy .display {
    font-size: clamp(2rem, 8.5vw, 2.9rem);
    hyphens: auto;
  }
}

/* CMS rich content blocks */
.article-body .cms-image,
.project-body .cms-image {
  margin: 2rem auto;
}
.article-body .cms-image img,
.project-body .cms-image img {
  display: block;
  width: 100%;
  max-width: 100%;
  height: auto;
  border-radius: var(--rl);
}
.article-body .cms-image figcaption,
.project-body .cms-image figcaption {
  margin-top: .75rem;
  color: var(--g500);
  font-size: .9rem;
  line-height: 1.5;
  text-align: center;
}
.article-body .cms-image--left,
.project-body .cms-image--left {
  margin-left: 0;
}
.article-body .cms-image--right,
.project-body .cms-image--right {
  margin-right: 0;
}
.article-body .cms-image--small,
.project-body .cms-image--small {
  max-width: 360px;
}
.article-body .cms-image--medium,
.project-body .cms-image--medium {
  max-width: 620px;
}
.article-body .cms-image--large,
.project-body .cms-image--large {
  max-width: 900px;
}
.article-body .cms-image--full,
.project-body .cms-image--full {
  max-width: 100%;
}

/* YouTube embeds from the CMS editor. The iframe ships without src and the
   consent placeholder (js/consent.js) covers the frame until accepted. */
.article-body .cms-video {
  max-width: 900px;
  margin: 2rem auto;
}
.article-body .cms-video__frame {
  position: relative;
  /* A definite width stops min-height from widening the 16:9 box on phones */
  width: 100%;
  aspect-ratio: 16 / 9;
  min-height: 15rem;
  overflow: hidden;
  border-radius: var(--rl);
  background: #0b1220;
}
.article-body .cms-video__frame iframe {
  position: absolute;
  inset: 0;
  display: block;
  width: 100%;
  height: 100%;
  border: 0;
}
.article-body .cms-video__frame .consent-embed-placeholder {
  gap: .6rem;
  padding: .85rem 1rem;
  overflow-y: auto;
  font-size: .9rem;
  line-height: 1.4;
}
.article-body .cms-video__frame .consent-embed-placeholder p { margin-top: .25rem; }
.article-body .cms-video__frame .consent-embed-placeholder button {
  padding: .6rem 1rem;
  font-size: .9rem;
}
.article-body .cms-video figcaption {
  margin-top: .75rem;
  color: var(--g500);
  font-size: .9rem;
  line-height: 1.5;
  text-align: center;
}

/* ═══════════════════════════════════════════════════════
   SOLAR HERO — unified section hero
   (products, about, projects, blog, presences)
   The surface reads as PV glass: deep navy, a faint cell
   grid, one drifting sun glow. The bottom hairline runs
   amber → blue: sunlight in, electricity out.
═══════════════════════════════════════════════════════ */
.solar-hero {
  position: relative;
  overflow: hidden;
  padding: calc(var(--nav-h) + 2.75rem) 0 3rem;
  color: #fff;
  background: #081527;
}
.solar-hero::before {
  /* photovoltaic cell grid */
  content: '';
  position: absolute;
  inset: 0;
  background:
    linear-gradient(rgba(148, 163, 184, .06) 1px, transparent 1px),
    linear-gradient(90deg, rgba(148, 163, 184, .06) 1px, transparent 1px);
  background-size: 76px 76px;
  -webkit-mask-image: linear-gradient(180deg, rgba(0,0,0,.9), rgba(0,0,0,.3) 72%, transparent);
  mask-image: linear-gradient(180deg, rgba(0,0,0,.9), rgba(0,0,0,.3) 72%, transparent);
  pointer-events: none;
}
.solar-hero-line {
  position: absolute;
  left: 0;
  right: 0;
  bottom: 0;
  height: 3px;
  background: linear-gradient(90deg, #f59e0b, #fbbf24 26%, #60a5fa 62%, #2563eb);
}
.solar-hero .display {
  max-width: 900px;
  margin: 0 0 1.15rem;
  font-size: clamp(2.9rem, 6.6vw, 5.4rem);
  letter-spacing: -.03em;
}
.solar-hero .lead {
  max-width: 680px;
  color: rgba(226, 232, 240, .75);
}
@media (prefers-reduced-motion: no-preference) {
  .solar-hero .display,
  .solar-hero .lead {
    opacity: 0;
    transform: translateY(14px);
    animation: solar-rise .65s cubic-bezier(.22, .61, .36, 1) forwards;
  }
  .solar-hero .display { animation-delay: .1s; }
  .solar-hero .lead { animation-delay: .2s; }
}
@keyframes solar-rise {
  to { opacity: 1; transform: none; }
}
@media (max-width: 700px) {
  .solar-hero { padding: calc(var(--nav-h) + 2rem) 0 2.5rem; }
}