/* Top info bar — dark trust strip above the header, items left-aligned */
.top-bar {
  background: var(--ink);
  border-bottom: 0;
  color: var(--paper);
  font-size: 0.82rem;
  letter-spacing: 0.04em;
}
.top-bar__inner {
  max-width: 1400px;
  margin: 0 auto;
  padding: 0.7rem 1.5rem;
  display: flex;
  justify-content: space-between;
  align-items: center;
  gap: 2rem;
  flex-wrap: wrap;
}
.top-bar__cluster {
  display: flex;
  gap: 2rem;
  align-items: center;
  flex-wrap: wrap;
}
.top-bar__item {
  display: inline-flex;
  align-items: center;
  gap: 0.5rem;
  color: var(--paper);
  opacity: 0.92;
}
.top-bar__icon { width: 16px; height: 16px; }
@media (max-width: 640px) {
  .top-bar { font-size: 0.74rem; }
  .top-bar__inner { padding: 0.6rem 1rem; gap: 1.25rem; }
  .top-bar__cluster { gap: 1.25rem; }
  .top-bar__icon { width: 14px; height: 14px; }
}

/* Hero lede (subtitle paragraph) */
.hero-lede {
  font-size: clamp(1.05rem, 1.4vw, 1.2rem);
  line-height: 1.55;
  color: var(--ink);
  opacity: 0.78;
}

/* Outline button — secondary CTA */
.btn-outline {
  display: inline-flex;
  align-items: center;
  gap: 0.6rem;
  padding: 0.95rem 1.5rem;
  border: 1px solid var(--ink);
  background: transparent;
  color: var(--ink);
  font-family: inherit;
  font-size: 0.75rem;
  letter-spacing: 0.18em;
  text-transform: uppercase;
  font-weight: 600;
  text-decoration: none;
  transition: background 200ms ease, color 200ms ease;
}
.btn-outline:hover { background: var(--ink); color: var(--paper); }
.btn-outline .arrow { transition: transform 200ms ease; }
.btn-outline:hover .arrow { transform: translateX(0.3rem); }

/* Hero trust badges — three small icon+text pairs below the CTAs */
.hero-badges {
  list-style: none;
  margin: 0; padding: 1.5rem 0 0;
  display: grid;
  grid-template-columns: 1fr;
  gap: 1rem;
  border-top: 1px solid var(--rule);
  max-width: 560px;
}
.hero-badges li {
  display: flex;
  align-items: flex-start;
  gap: 0.65rem;
}
.hero-badge__icon {
  width: 1.15rem; height: 1.15rem;
  flex-shrink: 0;
  margin-top: 0.15rem;
}
.hero-badge__title {
  display: block;
  font-size: 0.88rem;
  font-weight: 500;
  color: var(--ink);
}
.hero-badge__sub {
  display: block;
  font-size: 0.75rem;
  color: var(--muted);
}
@media (min-width: 640px) {
  .hero-badges { grid-template-columns: repeat(3, 1fr); gap: 1.25rem; }
}

/* Stats row — four big serif numbers, hairline-divided */
.stats-row {
  list-style: none;
  margin: 0; padding: 1.75rem 0;
  display: grid;
  grid-template-columns: repeat(2, 1fr);
  gap: 2.25rem 1.5rem;
  border-top: 1px solid var(--ink);
  border-bottom: 1px solid var(--ink);
}
.stats-row > li {
  display: flex;
  flex-direction: column;
  gap: 0.3rem;
}
.stats-row__num {
  font-family: 'Fraunces', serif;
  font-size: clamp(2.5rem, 6vw, 4.25rem);
  line-height: 1;
  letter-spacing: -0.03em;
  font-weight: 300;
}
.stats-row__plus,
.stats-row__den {
  font-size: 0.55em;
  font-style: italic;
  opacity: 0.55;
  margin-left: 0.04em;
}
.stats-row__label {
  font-size: 0.95rem;
  font-weight: 500;
  letter-spacing: -0.005em;
  margin-top: 0.2rem;
}
.stats-row__sub {
  font-size: 0.78rem;
  color: var(--muted);
}
@media (min-width: 768px) {
  .stats-row {
    grid-template-columns: repeat(4, 1fr);
    gap: 2rem;
    padding: 2.25rem 0;
  }
  .stats-row > li + li {
    border-left: 1px solid var(--rule);
    padding-left: 2rem;
  }
}

/* Trust bar — four reassuring items above the footer on every page */
.trust-bar {
  border-top: 1px solid var(--rule);
  background: var(--paper);
}
.trust-bar__inner {
  max-width: 1400px;
  margin: 0 auto;
  padding: 3rem 1.5rem;
  display: grid;
  grid-template-columns: repeat(2, 1fr);
  gap: 2rem 1.5rem;
}
.trust-bar__item {
  display: flex;
  align-items: flex-start;
  gap: 0.85rem;
}
.trust-bar__icon {
  width: 1.6rem; height: 1.6rem;
  flex-shrink: 0;
  color: var(--ink);
  margin-top: 0.15rem;
}
.trust-bar__title {
  display: block;
  font-size: 0.95rem;
  font-weight: 500;
  color: var(--ink);
  letter-spacing: -0.005em;
}
.trust-bar__sub {
  display: block;
  font-size: 0.78rem;
  color: var(--muted);
  margin-top: 0.2rem;
}
@media (min-width: 768px) {
  .trust-bar__inner {
    grid-template-columns: repeat(4, 1fr);
    padding: 3.5rem 1.5rem;
    gap: 2.5rem;
  }
  .trust-bar__item + .trust-bar__item {
    border-left: 1px solid var(--rule);
    padding-left: 2rem;
  }
}
@media (min-width: 1024px) {
  .trust-bar__inner { padding: 3.5rem 3rem; }
}

/* Scroll progress indicator — hairline at top of viewport */
#scroll-progress {
  position: fixed;
  top: 0;
  left: 0;
  height: 2px;
  width: 0;
  background: #0a0a0a;
  z-index: 100;
  transition: width 80ms linear;
  pointer-events: none;
}

/* Hanging quote mark — editorial print-style decoration on testimonials */
.quote-figure {
  position: relative;
}
.hanging-quote {
  position: absolute;
  font-family: 'Fraunces', serif;
  font-weight: 300;
  font-style: italic;
  font-size: clamp(7rem, 14vw, 12rem);
  line-height: 0.7;
  color: #0a0a0a;
  opacity: 0.08;
  top: -1.5rem;
  left: -0.5rem;
  pointer-events: none;
  user-select: none;
}
@media (min-width: 1024px) {
  .hanging-quote { left: -3.5rem; top: -2.5rem; }
}

/* Honour users who prefer reduced motion */
@media (prefers-reduced-motion: reduce) {
  *,
  *::before,
  *::after {
    animation-duration: 0.01ms !important;
    animation-iteration-count: 1 !important;
    transition-duration: 0.01ms !important;
    scroll-behavior: auto !important;
  }
}

/* alleklussers — editorial design tokens */
:root {
  --ink: #0a0a0a;
  --paper: #fafafa;
  --rule: #e5e5e5;
  --muted: #6b6b6b;
  /* Warm amber accent — picks up the incandescent filament theme, used
     sparingly for interactive states and the bulb's halo. */
  --accent: #b45309;
  --accent-soft: rgba(180, 83, 9, 0.12);
}

* {
  -webkit-font-smoothing: antialiased;
  -moz-osx-font-smoothing: grayscale;
}

html { scroll-behavior: smooth; }

/* Keyboard focus ring — accent for clear visibility without harming mouse UX */
:focus { outline: none; }
:focus-visible {
  outline: 2px solid var(--accent);
  outline-offset: 3px;
}

body {
  background: var(--paper);
  color: var(--ink);
  font-family: 'Manrope', system-ui, sans-serif;
  font-weight: 400;
  line-height: 1.55;
  /* Safety net — clip any accidental horizontal overflow without breaking
     position: sticky on the header (which 'hidden' would). */
  overflow-x: clip;
}

.font-serif {
  font-family: 'Fraunces', 'Times New Roman', serif;
  letter-spacing: -0.02em;
}

/* Section swaps */
.view { display: none; }
.view.is-active {
  display: block;
  animation: rise 380ms cubic-bezier(.22,.61,.36,1);
}
@keyframes rise {
  from { opacity: 0; transform: translateY(8px); }
  to   { opacity: 1; transform: translateY(0); }
}

/* Nav links — hairline underline that grows */
.navlink {
  position: relative;
  padding: 0.25rem 0;
}
.navlink::after {
  content: "";
  position: absolute;
  left: 0; right: 0; bottom: -2px;
  height: 1px;
  background: var(--accent);
  transform: scaleX(0);
  transform-origin: right center;
  transition: transform 320ms cubic-bezier(.22,.61,.36,1);
}
.navlink:hover,
.navlink.is-active { color: var(--accent); }
.navlink:hover::after,
.navlink.is-active::after {
  transform: scaleX(1);
  transform-origin: left center;
}

/* Hamburger button — three bars that morph into an X when .is-open is added */
.menu-btn {
  padding: 0.75rem;
  margin: -0.75rem;
  margin-right: -0.5rem;
  background: transparent;
  border: 0;
  cursor: pointer;
  color: var(--ink);
  position: relative;
  z-index: 60;        /* sits above the overlay so the X is tappable */
}
.menu-icon {
  display: block;
  position: relative;
  width: 22px;
  height: 16px;
}
.menu-icon__bar {
  position: absolute;
  left: 0;
  right: 0;
  height: 1.5px;
  background: currentColor;
  transform-origin: center;
  transition: transform 320ms cubic-bezier(.22,.61,.36,1),
              opacity 220ms ease;
}
.menu-icon__bar:nth-child(1) { top: 0; }
.menu-icon__bar:nth-child(2) { top: 50%; margin-top: -0.75px; }
.menu-icon__bar:nth-child(3) { bottom: 0; }
.menu-btn.is-open .menu-icon__bar:nth-child(1) { transform: translateY(7.25px) rotate(45deg); }
.menu-btn.is-open .menu-icon__bar:nth-child(2) { opacity: 0; transform: scaleX(0); }
.menu-btn.is-open .menu-icon__bar:nth-child(3) { transform: translateY(-7.25px) rotate(-45deg); }

/* Full-screen mobile menu — inverted (ink on paper for the rest of the site,
   so this is paper on ink). Strong contrast vs the page below so the open
   state reads instantly as "I'm in the menu now". */
.mobile-menu {
  position: fixed;
  top: 0; left: 0; right: 0;
  bottom: 0;
  background: var(--ink);
  color: var(--paper);
  z-index: 45;
  padding: 6rem 1.5rem max(2rem, env(safe-area-inset-bottom));
  display: flex;
  flex-direction: column;
  justify-content: space-between;
  gap: 2rem;
  opacity: 0;
  pointer-events: none;
  transform: translateY(-12px);
  transition: opacity 280ms ease,
              transform 360ms cubic-bezier(.22,.61,.36,1);
}
.mobile-menu.is-open {
  opacity: 1;
  pointer-events: auto;
  transform: translateY(0);
}
.mobile-menu__nav {
  display: flex;
  flex-direction: column;
}
.mobile-menu__link {
  font-family: 'Fraunces', serif;
  font-size: clamp(1.875rem, 7.5vw, 2.75rem);
  font-weight: 300;
  letter-spacing: -0.025em;
  line-height: 1.1;
  padding: 1rem 0;
  border-bottom: 1px solid rgba(250, 250, 250, 0.14);
  display: block;
  color: var(--paper);
  transition: padding-left 360ms cubic-bezier(.22,.61,.36,1),
              font-style 200ms ease;
}
.mobile-menu__link:active,
.mobile-menu__link:hover {
  padding-left: 0.75rem;
  font-style: italic;
}
.mobile-menu__footer {
  display: flex;
  flex-direction: column;
  gap: 0.85rem;
  font-size: 0.95rem;
  color: rgba(250, 250, 250, 0.55);
  border-top: 1px solid rgba(250, 250, 250, 0.14);
  padding-top: 1.5rem;
}
.mobile-menu__contact {
  color: var(--paper);
  padding: 0.4rem 0;
}
/* Stagger nav links into view when menu opens */
.mobile-menu.is-open .mobile-menu__link {
  animation: menu-link-rise 460ms cubic-bezier(.22,.61,.36,1) backwards;
}
.mobile-menu.is-open .mobile-menu__link:nth-child(1) { animation-delay: 80ms; }
.mobile-menu.is-open .mobile-menu__link:nth-child(2) { animation-delay: 140ms; }
.mobile-menu.is-open .mobile-menu__link:nth-child(3) { animation-delay: 200ms; }
.mobile-menu.is-open .mobile-menu__link:nth-child(4) { animation-delay: 260ms; }
.mobile-menu.is-open .mobile-menu__link:nth-child(5) { animation-delay: 320ms; }
@keyframes menu-link-rise {
  from { opacity: 0; transform: translateY(8px); }
  to   { opacity: 1; transform: translateY(0); }
}

/* When menu is open: lock body scroll, hide floating chrome so the overlay
   reads as a focused, dedicated nav surface. Header fades to transparent
   so the dark menu reads as one continuous surface; hamburger morph
   recolours to paper to stay visible against ink. */
body.menu-open { overflow: hidden; }
body.menu-open #contact-widget,
body.menu-open #scroll-progress {
  opacity: 0;
  pointer-events: none;
  transition: opacity 200ms ease;
}
body.menu-open header {
  background: transparent !important;
  border-color: transparent;
  backdrop-filter: none;
  -webkit-backdrop-filter: none;
}
body.menu-open header > div > a:first-child,
body.menu-open header .lang-select {
  opacity: 0;
  pointer-events: none;
  transition: opacity 200ms ease;
}
body.menu-open .menu-btn { color: var(--paper); }
body.menu-open .menu-icon__bar { background: var(--paper); }

/* Nav "Meer" dropdown */
.nav-more {
  position: relative;
}
.nav-more__trigger {
  display: inline-flex;
  align-items: center;
  gap: 0.4rem;
  background: transparent;
  color: var(--ink);
  font: inherit;
  cursor: pointer;
}
.nav-more__caret {
  transition: transform 220ms cubic-bezier(.22,.61,.36,1);
}
.nav-more.is-open .nav-more__caret {
  transform: rotate(180deg);
}
.nav-more__menu {
  position: absolute;
  top: calc(100% + 1.1rem);
  right: 0;
  min-width: 180px;
  background: var(--paper);
  border: 1px solid var(--ink);
  padding: 0.35rem 0;
  display: flex;
  flex-direction: column;
  opacity: 0;
  pointer-events: none;
  transform: translateY(-4px);
  transition: opacity 200ms ease, transform 200ms ease;
  z-index: 50;
}
.nav-more.is-open .nav-more__menu {
  opacity: 1;
  pointer-events: auto;
  transform: translateY(0);
}
.nav-more__menu a {
  padding: 0.65rem 1.1rem;
  font-size: 0.85rem;
  color: var(--ink);
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 0.5rem;
  transition: background 160ms ease, padding-left 220ms cubic-bezier(.22,.61,.36,1);
}
.nav-more__menu a:hover {
  background: var(--ink);
  color: var(--paper);
  padding-left: 1.35rem;
}
.nav-more__ext span { opacity: 0.6; }

/* Language selector — compact globe + 2-letter code trigger, dropdown of 6 langs */
.lang-select {
  position: relative;
}
.lang-select__trigger {
  display: inline-flex;
  align-items: center;
  gap: 0.4rem;
  padding: 0.4rem 0.65rem;
  border: 1px solid var(--ink);
  border-radius: 999px;
  background: transparent;
  color: var(--ink);
  font-size: 0.7rem;
  letter-spacing: 0.12em;
  text-transform: uppercase;
  font-weight: 600;
  cursor: pointer;
  transition: background 200ms ease, color 200ms ease;
}
.lang-select__trigger:hover { background: var(--ink); color: var(--paper); }
.lang-select.is-open .lang-select__trigger { background: var(--ink); color: var(--paper); }
.lang-select__globe { width: 14px; height: 14px; }
.lang-select__caret {
  width: 8px; height: 5px;
  transition: transform 220ms ease;
}
.lang-select.is-open .lang-select__caret { transform: rotate(180deg); }
.lang-select__menu {
  position: absolute;
  top: calc(100% + 0.5rem);
  right: 0;
  background: var(--paper);
  border: 1px solid var(--ink);
  min-width: 200px;
  padding: 0.4rem 0;
  z-index: 100;
  opacity: 0;
  visibility: hidden;
  transform: translateY(-6px);
  transition: opacity 220ms ease, transform 220ms ease, visibility 220ms ease;
}
.lang-select.is-open .lang-select__menu {
  opacity: 1;
  visibility: visible;
  transform: translateY(0);
}
.lang-select__menu button {
  display: flex;
  align-items: center;
  gap: 0.85rem;
  width: 100%;
  padding: 0.65rem 1rem;
  background: transparent;
  border: 0;
  text-align: left;
  font-size: 0.85rem;
  color: var(--ink);
  cursor: pointer;
  transition: background 160ms ease;
}
.lang-select__menu button:hover { background: rgba(0,0,0,0.04); }
.lang-select__menu button.is-active {
  background: var(--ink);
  color: var(--paper);
}
.lang-select__menu button > span {
  font-size: 0.65rem;
  letter-spacing: 0.15em;
  font-weight: 600;
  text-transform: uppercase;
  min-width: 22px;
  opacity: 0.55;
}
.lang-select__menu button.is-active > span { opacity: 1; }
[dir="rtl"] .lang-select__menu {
  right: auto;
  left: 0;
}
[dir="rtl"] .lang-select__menu button {
  text-align: right;
}

/* Service rows — title-only with arrow that slides on hover */
.service-row {
  display: grid;
  grid-template-columns: 3rem 1fr auto;
  align-items: center;
  gap: 1.5rem;
  padding: 1.75rem 0;
  border-top: 1px solid var(--rule);
  cursor: pointer;
  transition: padding-left 420ms cubic-bezier(.22,.61,.36,1),
              color 200ms ease;
}
ol li:last-child .service-row {
  border-bottom: 1px solid var(--rule);
}
.service-row .arrow {
  display: inline-block;
  font-size: 1.5rem;
  transition: transform 420ms cubic-bezier(.22,.61,.36,1);
}
.service-row:hover { padding-left: 1rem; }
.service-row:hover .arrow { transform: translateX(0.6rem); }
.service-row:hover .service-title { font-style: italic; }

/* Primary button */
.btn-ink {
  display: inline-flex;
  align-items: center;
  gap: 0.75rem;
  background: var(--ink);
  color: var(--paper);
  padding: 1rem 1.6rem;
  font-size: 0.75rem;
  letter-spacing: 0.18em;
  text-transform: uppercase;
  font-weight: 600;
  transition: background 200ms ease;
}
.btn-ink:hover { background: #000; }
.btn-ink .arrow { transition: transform 200ms ease; }
.btn-ink:hover .arrow { transform: translateX(0.3rem); }

/* Footer inverted */
.footer-dark {
  background: var(--ink);
  color: var(--paper);
}
.footer-dark a:hover {
  text-decoration: underline;
  text-underline-offset: 4px;
}

/* Multilingual visibility — hide all language spans by default,
   then show only the one matching the active <html data-lang>. */
.lang-nl, .lang-en, .lang-tr, .lang-ar, .lang-pl, .lang-de { display: none; }
[data-lang="nl"] .lang-nl,
[data-lang="en"] .lang-en,
[data-lang="tr"] .lang-tr,
[data-lang="ar"] .lang-ar,
[data-lang="pl"] .lang-pl,
[data-lang="de"] .lang-de { display: inline; }

/* Arabic: render in Noto Naskh, drop italic emphasis (Arabic has no italic), */
/* lean a little heavier instead, and flip arrow glyphs to point the right way. */
[data-lang="ar"] body,
[data-lang="ar"] .font-serif,
[data-lang="ar"] em {
  font-family: 'Noto Naskh Arabic', 'Fraunces', serif;
}
[data-lang="ar"] em {
  font-style: normal;
  font-weight: 700;
}
[dir="rtl"] .arrow {
  display: inline-block;
  transform: scaleX(-1);
}
[dir="rtl"] .nav-more__caret,
[dir="rtl"] .lang-select__caret {
  /* These already point downward — leave them. */
}
/* In RTL the editorial photo strip should fade from the opposite side */
[dir="rtl"] .hero-grid::before {
  background-position: left 20% center;
  mask-image: linear-gradient(to left,
    transparent 0%, transparent 28%, rgba(0,0,0,0.25) 42%,
    rgba(0,0,0,0.75) 56%, #000 70%, #000 100%);
  -webkit-mask-image: linear-gradient(to left,
    transparent 0%, transparent 28%, rgba(0,0,0,0.25) 42%,
    rgba(0,0,0,0.75) 56%, #000 70%, #000 100%);
}

/* Eyebrow label */
.eyebrow {
  font-size: 0.7rem;
  letter-spacing: 0.22em;
  text-transform: uppercase;
  color: var(--muted);
  font-weight: 500;
}
/* Editorial eyebrow with a short leading dash (— LABEL) */
.eyebrow--dash {
  display: inline-flex;
  align-items: center;
  gap: 0.7rem;
}
.eyebrow--dash::before {
  content: '';
  width: 1.75rem;
  height: 1px;
  background: currentColor;
  opacity: 0.55;
  flex-shrink: 0;
}
/* Mobile-only hero buttons — hidden on desktop, shown on mobile via overrides */
.hero-cta__contact,
.hero-cta__projects { display: none; }
.hero-cta__icon { width: 1.05rem; height: 1.05rem; flex-shrink: 0; }

.hairline { height: 1px; background: var(--ink); width: 100%; }

/* Italic emphasis in serif headlines */
em {
  font-style: italic;
  font-family: 'Fraunces', serif;
  font-weight: 300;
}

/* Logo image — the source PNG is square with the wordmark sitting in a
   narrow horizontal band; aspect-ratio + object-fit crop the white
   margin visually without touching the file. mix-blend-mode removes
   any remaining white so the mark melds with the page. */
.logo-img {
  display: block;
  aspect-ratio: 1080 / 275;
  width: auto;
  object-fit: cover;
  object-position: center 48%;
  mix-blend-mode: multiply;
}
.logo-img--inverted {
  filter: invert(1);
  mix-blend-mode: screen;
}

/* Responsive display type */
.h-display {
  font-size: clamp(2.75rem, 8.5vw, 7.5rem);
  line-height: 0.95;
  letter-spacing: -0.04em;
  font-weight: 300;
  overflow-wrap: break-word;
  word-break: normal;
  hyphens: manual;
}
.h-section {
  font-size: clamp(2rem, 5vw, 4rem);
  line-height: 1.05;
  letter-spacing: -0.025em;
  font-weight: 300;
}

/* Hero composition layout.
   - Desktop: text on the left, bulb illustration on the right, with a very
     subtle grayscale photo backdrop tinted behind the whole hero.
   - Mobile: bulb is hidden (it looked cramped); the photo backdrop comes
     forward as the brand visual and text sits cleanly on top.
   The backdrop only appears if hero.jpg exists at the repo root — drop the
   file in and it shows up. No <img> error if it's absent.
   dvh is a progressive enhancement over vh for mobile Safari URL-bar shrink. */
.hero-grid {
  position: relative;
  isolation: isolate;
  display: grid;
  grid-template-columns: 1fr;
  grid-template-areas:
    "photo"
    "content";
  align-items: center;
  gap: 0;
  min-height: auto;
}
.hero-grid::before {
  content: none; /* photo handled by .hero-photo on mobile, ::before on desktop */
}
/* Mobile editorial cover — full-bleed framed photo at the very top, with the
   eyebrow chip and a small bulb mark floating on it, headline flows below. */
.hero-photo {
  grid-area: photo;
  position: relative;
  margin-left: -1.5rem;
  margin-right: -1.5rem;
  margin-top: 0;
  aspect-ratio: 4/5;
  background: url('hero.png') center 18% / cover no-repeat;
  /* slight color, matches desktop treatment — cables read blue/yellow */
  filter: grayscale(0.25) contrast(1.28) brightness(0.9) saturate(1.12);
  border-bottom: 1px solid var(--rule);
  overflow: hidden;
}
/* Bottom-up dark veil so the overlaid label stays legible */
.hero-photo::after {
  content: '';
  position: absolute;
  inset: 0;
  background: linear-gradient(to top,
    rgba(10,10,10,0.55) 0%,
    rgba(10,10,10,0.15) 32%,
    transparent 55%);
}
/* Floating eyebrow chip + bulb mark live in markup-free pseudo? No — we add a
   real overlay element. Style below targets .hero-photo__tag if present. */
.hero-photo__tag {
  position: absolute;
  left: 1.5rem;
  bottom: 1.5rem;
  z-index: 2;
  display: flex;
  align-items: center;
  gap: 0.6rem;
  color: var(--paper);
  font-size: 0.7rem;
  letter-spacing: 0.22em;
  text-transform: uppercase;
  font-weight: 500;
}
.hero-photo__tag::before {
  content: '';
  width: 1.75rem;
  height: 1px;
  background: var(--accent);
}
.hero-photo__bulb {
  position: absolute;
  top: 1.25rem;
  right: 1.25rem;
  z-index: 2;
  width: 44px;
  height: auto;
  color: var(--paper);
  opacity: 0.92;
}
.hero-content {
  grid-area: content;
  display: flex;
  flex-direction: column;
  justify-content: center;
  padding-top: 2.5rem;
  padding-bottom: 2rem;
}
.hero-art-col {
  display: none; /* shown only on desktop via media query */
  color: var(--ink);
  width: 100%;
}
.hero-art {
  display: block;
  width: 100%;
}
.hero-art svg {
  width: 100%;
  height: auto;
  max-width: 480px;
  margin-left: auto;
  display: block;
}
@media (min-width: 1024px) {
  .hero-grid {
    grid-template-columns: 1.5fr 1fr;
    grid-template-areas: "content art";
    gap: 0;
    min-height: 78vh;
    min-height: 78dvh;
  }
  /* Photo is no longer full-bleed — it lives only in the right column.
     Both pseudo-elements are cleared here. */
  .hero-grid::before { content: none; }
  .hero-grid::after  { content: none; }
  .hero-photo { display: none; }
  .hero-content {
    padding-top: 0;
    padding-bottom: 0;
    /* Left column stays pure --paper, no z-index tricks needed */
  }
  /* Right column: photo fills exactly this box, zero bleed into text area */
  .hero-art-col {
    grid-area: art;
    position: relative;
    overflow: hidden;
    display: flex;
    flex-direction: column;
    justify-content: space-between;
    /* Reduced top padding pushes bulb higher into the photo */
    padding: 1.5rem 2rem 3rem 1.5rem;
  }
  /* Photo lives as a pseudo on the column — clipped by overflow: hidden */
  .hero-art-col::before {
    content: '';
    position: absolute;
    inset: 0;
    background: url('hero.png') center / cover no-repeat;
    /* 25% desaturated — cable blues/yellows and screwdriver tip show through */
    filter: grayscale(0.25) contrast(1.3) brightness(0.92) saturate(1.15);
    /* Feather the left edge 4% so there's no hard vertical cut */
    mask-image: linear-gradient(to right, transparent 0%, #000 4%);
    -webkit-mask-image: linear-gradient(to right, transparent 0%, #000 4%);
    z-index: 0;
  }
  /* Bottom fade: trust cards get a clean readable background */
  .hero-art-col::after {
    content: '';
    position: absolute;
    inset: 0;
    pointer-events: none;
    background: linear-gradient(to bottom,
      transparent 0%,
      transparent 42%,
      rgba(250,250,250,0.55) 65%,
      rgba(250,250,250,0.92) 82%,
      var(--paper) 100%);
    z-index: 1;
  }
  /* All children above both pseudo layers */
  .hero-art {
    display: block;
    max-width: none;
    position: relative;
    z-index: 2;
  }
  .hero-art svg {
    width: 46%;
    max-width: 190px;
    /* pushed to top-right corner, away from the craftsman subject */
    margin-left: auto;
    margin-right: 0;
    display: block;
    margin-top: 0;
  }
}

/* 5 — desktop trust mini-cards below the bulb in the right column */
.hero-trust-mini { display: none; }
@media (min-width: 1024px) {
  .hero-trust-mini {
    display: flex;
    flex-direction: column;
    gap: 0;
    margin-top: 2rem;
    position: relative;
    z-index: 2;
    /* Solid white card — fully opaque, sharp edge, no photo bleed */
    background: var(--paper);
    border: 1px solid var(--rule);
    padding: 0 1.1rem;
  }
  .hero-trust-mini li {
    display: flex;
    align-items: flex-start;
    gap: 0.9rem;
    padding: 0.95rem 0;
    border-top: 1px solid var(--rule);
  }
  .hero-trust-mini li:first-child { border-top: none; }
  .hero-trust-mini__icon {
    width: 1.25rem;
    height: 1.25rem;
    flex-shrink: 0;
    margin-top: 0.1rem;
    color: var(--accent);
    stroke-width: 1.6;
  }
  .hero-trust-mini__title {
    display: block;
    font-size: 0.85rem;
    font-weight: 600;
    color: var(--ink);
    letter-spacing: -0.015em;
  }
  .hero-trust-mini__sub {
    display: block;
    font-size: 0.74rem;
    color: #444;
    margin-top: 0.2rem;
    line-height: 1.45;
  }
}

/* Pendant bulb behaviour — filament breath, glow, hover wake-up, click flash.
   The pendulum sway and the mouse-tracking tilt are handled in script.js so
   they compose smoothly into a single SVG rotate. Disabled in aggregate by
   prefers-reduced-motion lower in this file. */

/* Filament traces itself in on first load, then breathes. The path length
   is large enough to cover the longest stroke segment. */
.hero-filament {
  stroke-dasharray: 800;
  stroke-dashoffset: 800;
  opacity: 0;
  animation:
    filament-draw 1.8s cubic-bezier(.25,1,.5,1) 600ms forwards,
    filament-fade 600ms ease-out 600ms forwards,
    filament-glow 4.2s ease-in-out 2.6s infinite;
}
@keyframes filament-draw {
  to { stroke-dashoffset: 0; }
}
@keyframes filament-fade {
  to { opacity: 1; }
}
@keyframes filament-glow {
  0%, 100% { opacity: 0.55; stroke: var(--ink); }
  50%      { opacity: 1;    stroke: #5a2e08; }
}

/* Glow halo behind the filament — blurred copy, fades in after the draw.
   Picks up a slightly more saturated warm tone because the blur amplifies it. */
.hero-filament-glow {
  opacity: 0;
  animation:
    filament-fade 800ms ease-out 1800ms forwards,
    halo-glow 4.2s ease-in-out 2.6s infinite;
}
@keyframes halo-glow {
  0%, 100% { opacity: 0.25; stroke: var(--ink); }
  50%      { opacity: 0.7;  stroke: var(--accent); }
}

/* Random sparks — spawned by JS at intervals. Each one fades up, peaks,
   then fades out while scaling outward, like a brief electrical zap. */
.hero-spark {
  opacity: 0;
  transform-box: fill-box;
  transform-origin: center;
}
.hero-spark.is-active {
  animation: spark-flash 1s cubic-bezier(.22,.61,.36,1) forwards;
}
@keyframes spark-flash {
  0%   { opacity: 0;   transform: scale(0.4); }
  25%  { opacity: 1;   transform: scale(1); }
  60%  { opacity: 0.6; transform: scale(1.15); }
  100% { opacity: 0;   transform: scale(1.4); }
}

/* Light cone on the floor — quiet at rest, brighter on hover. */
.hero-cone { opacity: 0.18; transition: opacity 400ms ease; }

/* Radiance particles — eight, staggered 0–2.4s, opacity 0.2–1. */
.hero-radiance circle {
  animation: radiance-pulse 3.6s ease-in-out infinite;
}
.hero-radiance circle:nth-child(1) { animation-delay: 0s; }
.hero-radiance circle:nth-child(2) { animation-delay: 0.4s; }
.hero-radiance circle:nth-child(3) { animation-delay: 0.8s; }
.hero-radiance circle:nth-child(4) { animation-delay: 1.2s; }
.hero-radiance circle:nth-child(5) { animation-delay: 1.6s; }
.hero-radiance circle:nth-child(6) { animation-delay: 2.0s; }
.hero-radiance circle:nth-child(7) { animation-delay: 2.4s; }
.hero-radiance circle:nth-child(8) { animation-delay: 2.8s; }
@keyframes radiance-pulse {
  0%, 100% { opacity: 0.2; }
  50%      { opacity: 1; }
}

/* Hover the hero-art region — the bulb "wakes up": faster glow, fatter
   filament, brighter halo, snappier particles, visible light cone. */
.hero-art {
  cursor: pointer;
}
.hero-art svg {
  transition: transform 320ms cubic-bezier(.22,.61,.36,1);
}
.hero-art:hover .hero-filament       { stroke-width: 2; animation-duration: 1.6s, 600ms, 1.6s; }
.hero-art:hover .hero-filament-glow  { animation-duration: 800ms, 1.6s; }
.hero-art:hover .hero-radiance circle { animation-duration: 1.4s; }
.hero-art:hover .hero-cone           { opacity: 0.35; }

/* Click — full flash for ~700ms: everything jumps to peak, bulb scales up.
   Triggered by JS adding .is-flashing to .hero-art. */
.hero-art.is-flashing svg {
  transform: scale(1.035);
}
.hero-art.is-flashing .hero-filament {
  animation: none;
  opacity: 1;
  stroke-width: 2.6;
  stroke-dashoffset: 0;
}
.hero-art.is-flashing .hero-filament-glow {
  animation: none;
  opacity: 0.95;
}
.hero-art.is-flashing .hero-radiance circle {
  animation: none;
  opacity: 1;
}
.hero-art.is-flashing .hero-cone {
  opacity: 0.55;
}

/* About — lede paragraph + editorial stat row + optional portrait photo */
.about-block {
  display: grid;
  grid-template-columns: 1fr;
  gap: 2.5rem;
}
@media (min-width: 1024px) {
  .about-block {
    grid-template-columns: 1fr 300px;
    gap: 4rem;
    align-items: start;
  }
}
.about-lede {
  font-size: clamp(1.4rem, 3.6vw, 2.2rem);
  line-height: 1.25;
  font-weight: 400;
  letter-spacing: -0.015em;
  color: var(--ink);
}

.about-photo {
  position: relative;
  aspect-ratio: 4 / 5;
  width: 100%;
  max-width: 300px;
  margin: 0;
  background: var(--ink);
  overflow: hidden;
}
.about-photo::before {
  content: '';
  position: absolute;
  inset: 0;
  background-image: repeating-linear-gradient(135deg,
    rgba(250, 250, 250, 0.06) 0 14px,
    transparent 14px 28px);
}
.about-photo img {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  object-fit: cover;
  z-index: 1;
}
.about-photo__label {
  position: absolute;
  bottom: 1rem;
  left: 1rem;
  color: var(--paper);
  opacity: 0.5;
  font-size: 0.62rem;
  letter-spacing: 0.22em;
  text-transform: uppercase;
  font-weight: 500;
}
@media (min-width: 1024px) {
  .about-photo { margin: 0 0 0 auto; }
}

.about-stats {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 1rem;
}
.about-stats > div {
  display: flex;
  flex-direction: column;
  gap: 0.35rem;
}
.about-stats dd {
  font-size: clamp(1.5rem, 4vw, 2.5rem);
  line-height: 1;
  letter-spacing: -0.02em;
  font-weight: 300;
}
@media (min-width: 768px) {
  .about-stats { gap: 2.5rem; }
  .about-stats > div { padding-left: 0; }
  .about-stats > div + div {
    border-left: 1px solid var(--rule);
    padding-left: 2.5rem;
  }
}

/* --- About: new editorial layout ---------------------------------------- */

/* Top: text column on the left, photo card on the right */
.about-intro {
  display: grid;
  grid-template-columns: 1fr;
  gap: 2.25rem;
  padding-top: 4.5rem;
  padding-bottom: 3rem;
  align-items: center;
}
@media (min-width: 1024px) {
  .about-intro {
    grid-template-columns: 1.05fr 1fr;
    gap: 4.5rem;
    padding-top: 7rem;
    padding-bottom: 5rem;
  }
}
.about-intro__text {
  display: flex;
  flex-direction: column;
}

/* Wide photo card variant — used inside .about-intro */
.about-photo--wide {
  position: relative;
  aspect-ratio: 4 / 3;
  width: 100%;
  max-width: none;
  margin: 0;
  background: var(--paper);
  border: 1px solid var(--rule);
  overflow: hidden;
  box-shadow: 0 24px 56px rgba(10, 10, 10, 0.08);
}
.about-photo--wide::before { content: none; }
.about-photo--wide img {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  object-fit: cover;
  object-position: 45% center;
  /* Touch of color, gentle contrast */
  filter: contrast(1.06) saturate(1.08);
}

/* Rich stats: each block gets a supporting line of muted copy below */
.about-stats--rich > div {
  gap: 0.55rem;
}
.about-stats--rich dd {
  font-weight: 300;
}
.about-stats__sub {
  margin-top: 0.7rem;
  font-size: 0.85rem;
  color: var(--muted);
  line-height: 1.45;
  letter-spacing: 0;
  max-width: 28ch;
}
/* The language list is long — let it shrink to fit the column without wrapping awkwardly */
.about-stats__lang {
  font-size: clamp(1.15rem, 2.5vw, 1.85rem) !important;
  letter-spacing: 0.02em;
  white-space: nowrap;
}

/* Trust items now consolidated into the global .trust-bar above the footer. */

/* Home services — featured 4 cards + small editorial photo */
.home-services__head {
  display: grid;
  grid-template-columns: 1fr;
  gap: 2.5rem;
  align-items: end;
}
@media (min-width: 768px) {
  .home-services__head {
    grid-template-columns: 1.4fr 1fr;
    gap: 3rem;
  }
}

.home-photo {
  position: relative;
  aspect-ratio: 4 / 5;
  width: 100%;
  max-width: 280px;
  margin: 0 0 0 auto;
  background: var(--ink);
  overflow: hidden;
}
.home-photo::before {
  content: '';
  position: absolute;
  inset: 0;
  background-image: repeating-linear-gradient(135deg,
    rgba(250, 250, 250, 0.06) 0 14px,
    transparent 14px 28px);
}
.home-photo img {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  object-fit: cover;
  z-index: 1;
}
.home-photo__label {
  position: absolute;
  bottom: 1rem;
  left: 1rem;
  color: var(--paper);
  opacity: 0.5;
  font-size: 0.62rem;
  letter-spacing: 0.22em;
  text-transform: uppercase;
  font-weight: 500;
}

.home-services__grid {
  display: grid;
  grid-template-columns: 1fr;
  gap: 1rem;
  margin-top: 3rem;
}
@media (min-width: 640px) {
  .home-services__grid { grid-template-columns: repeat(2, 1fr); }
}
@media (min-width: 1024px) {
  .home-services__grid { grid-template-columns: repeat(4, 1fr); gap: 1.25rem; }
}

.home-card {
  display: flex;
  flex-direction: column;
  gap: 0.85rem;
  padding: 1.75rem 1.5rem 1.5rem;
  border: 1px solid var(--rule);
  background: var(--paper);
  transition: border-color 240ms ease, transform 240ms ease;
}
.home-card:hover {
  border-color: var(--accent);
  transform: translateY(-2px);
  box-shadow: 0 14px 28px -16px var(--accent-soft);
}
.home-card__icon {
  width: 1.6rem;
  height: 1.6rem;
  color: var(--ink);
  opacity: 0.7;
  margin-bottom: 0.5rem;
  transition: opacity 240ms ease, transform 420ms cubic-bezier(.22,.61,.36,1);
}
.home-card:hover .home-card__icon {
  opacity: 1;
  color: var(--accent);
  transform: rotate(-8deg);
}
.home-card:hover .home-card__cta { color: var(--accent); }
.home-card__title {
  font-family: 'Fraunces', serif;
  font-size: 1.5rem;
  line-height: 1.15;
  letter-spacing: -0.015em;
  font-weight: 400;
}
.home-card__desc {
  font-size: 0.85rem;
  color: var(--muted);
  line-height: 1.55;
  flex: 1;
}
.home-card__cta {
  display: inline-flex;
  align-items: center;
  gap: 0.5rem;
  margin-top: 0.5rem;
  padding-top: 1rem;
  border-top: 1px solid var(--rule);
  font-size: 0.7rem;
  letter-spacing: 0.18em;
  text-transform: uppercase;
  font-weight: 600;
  color: var(--ink);
}
.home-card__cta .arrow {
  transition: transform 200ms cubic-bezier(.22,.61,.36,1);
}
.home-card:hover .home-card__cta .arrow {
  transform: translateX(0.4rem);
}

.home-services__all {
  margin-top: 2.5rem;
  text-align: center;
}
.home-services__all .arrow {
  margin-left: 0.4rem;
  transition: transform 200ms ease;
  display: inline-block;
}
.home-services__all a:hover .arrow {
  transform: translateX(0.3rem);
}

/* Service rows — icon + arrow group */
.service-action {
  display: inline-flex;
  align-items: center;
  gap: 1.5rem;
}
.service-icon {
  display: block;
  width: 1.5rem;
  height: 1.5rem;
  color: var(--ink);
  opacity: 0.32;
  transition: opacity 220ms ease,
              transform 460ms cubic-bezier(.22,.61,.36,1);
}
.service-row:hover .service-icon {
  opacity: 1;
  color: var(--accent);
  transform: rotate(-8deg);
}
.service-row:hover .arrow,
.service-row:hover .service-title { color: var(--accent); }
@media (max-width: 640px) {
  .service-icon { width: 1.25rem; height: 1.25rem; }
  .service-action { gap: 0.85rem; }
  /* Long titles like "Mutatieonderhoud" / "Complete verbouwing" need less air */
  .service-row {
    grid-template-columns: 2.25rem 1fr auto;
    gap: 1rem;
    padding: 1.4rem 0;
  }
  .service-title {
    font-size: 1.625rem;
    line-height: 1.15;
    text-wrap: balance;
  }
}

/* Project cards grid — placeholder media frames.
   On mobile this becomes a horizontal scroll-snap carousel so users swipe
   through projects instead of scrolling a long vertical column. */
.projects-grid {
  display: flex;
  overflow-x: auto;
  overflow-y: visible;
  scroll-snap-type: x mandatory;
  scroll-padding-left: 1.5rem;
  gap: 1.25rem;
  padding: 0.5rem 1.5rem 0.5rem 1.5rem;
  margin: 0 -1.5rem;
  scrollbar-width: none;
  -webkit-overflow-scrolling: touch;
}
.projects-grid::-webkit-scrollbar { display: none; }
.projects-grid > .project-card {
  flex: 0 0 78%;
  scroll-snap-align: start;
}
@media (min-width: 640px) {
  /* Tablet+ — fall back to grid layout */
  .projects-grid {
    display: grid;
    grid-template-columns: repeat(2, 1fr);
    gap: 2.5rem 2rem;
    overflow: visible;
    padding: 0;
    margin: 0;
  }
  .projects-grid > .project-card { flex: initial; }
}
@media (min-width: 1024px) {
  .projects-grid { grid-template-columns: repeat(3, 1fr); gap: 3rem 2rem; }
}
.project-card {
  display: flex;
  flex-direction: column;
  gap: 0.25rem;
}
.project-card__media {
  aspect-ratio: 4 / 5;
  background: var(--ink);
  position: relative;
  overflow: hidden;
  transition: transform 600ms cubic-bezier(.22,.61,.36,1);
}
/* Diagonal-stripe pattern so empty frames still feel intentional */
.project-card__media::before {
  content: '';
  position: absolute;
  inset: 0;
  background-image: repeating-linear-gradient(135deg,
    rgba(250, 250, 250, 0.06) 0 14px,
    transparent 14px 28px);
}
.project-card__media img {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  object-fit: cover;
  z-index: 2;            /* covers the stripe pattern + label once loaded */
}
.project-card__media span {
  position: absolute;
  bottom: 1rem;
  left: 1rem;
  color: var(--paper);
  opacity: 0.5;
  font-size: 0.62rem;
  letter-spacing: 0.22em;
  text-transform: uppercase;
  font-weight: 500;
}
.project-card:hover .project-card__media {
  transform: scale(0.98);
}
.project-card h3 {
  font-size: 1.4rem;
  line-height: 1.2;
  letter-spacing: -0.015em;
  font-weight: 400;
  margin-top: 0.25rem;
}
.project-card__meta {
  font-size: 0.85rem;
  color: var(--muted);
  margin-top: 0.15rem;
}

/* Floating contact widget — pill button bottom-right + anchored popover */
#contact-widget {
  position: fixed;
  right: max(1.25rem, env(safe-area-inset-right));
  bottom: max(1.25rem, env(safe-area-inset-bottom));
  z-index: 60;
}

#contact-fab {
  display: inline-flex;
  align-items: center;
  gap: 0.55rem;
  background: var(--ink);
  color: var(--paper);
  padding: 0.85rem 1.15rem;
  border: 0;
  border-radius: 999px;
  font-family: inherit;
  font-size: 0.78rem;
  letter-spacing: 0.12em;
  text-transform: uppercase;
  font-weight: 600;
  cursor: pointer;
  box-shadow: 0 6px 20px rgba(10, 10, 10, 0.18);
  transition: transform 220ms cubic-bezier(.22,.61,.36,1),
              box-shadow 220ms ease,
              background 220ms ease;
  opacity: 0;
  transform: translateY(12px);
  animation: contact-fab-rise 480ms cubic-bezier(.22,.61,.36,1) 400ms forwards;
}
@keyframes contact-fab-rise {
  to { opacity: 1; transform: translateY(0); }
}
#contact-fab:hover {
  transform: translateY(-2px);
  box-shadow: 0 10px 28px rgba(10, 10, 10, 0.28);
  background: #000;
}
#contact-fab svg {
  width: 1.05rem;
  height: 1.05rem;
}
#contact-widget.is-open #contact-fab {
  background: var(--paper);
  color: var(--ink);
  box-shadow: 0 6px 20px rgba(10, 10, 10, 0.12),
              inset 0 0 0 1px var(--ink);
}

#contact-pop {
  position: absolute;
  right: 0;
  bottom: calc(100% + 0.85rem);
  width: 360px;
  max-width: calc(100vw - 2.5rem);
  background: var(--paper);
  border: 1px solid var(--ink);
  padding: 1.5rem 1.5rem 1.75rem;
  opacity: 0;
  pointer-events: none;
  transform: translateY(8px) scale(0.98);
  transform-origin: bottom right;
  transition: opacity 220ms ease,
              transform 240ms cubic-bezier(.22,.61,.36,1);
  box-shadow: 0 14px 36px rgba(10, 10, 10, 0.14);
}
#contact-widget.is-open #contact-pop {
  opacity: 1;
  pointer-events: auto;
  transform: translateY(0) scale(1);
}

.contact-pop__head {
  display: flex;
  align-items: flex-start;
  justify-content: space-between;
  gap: 1rem;
  margin-bottom: 1.5rem;
}
.contact-pop__head h2 {
  font-size: 1.6rem;
  line-height: 1.05;
  letter-spacing: -0.02em;
  font-weight: 300;
  margin: 0;
}
#contact-pop-close {
  background: transparent;
  border: 0;
  padding: 0.25rem;
  margin: -0.25rem;
  cursor: pointer;
  color: var(--ink);
  opacity: 0.55;
  transition: opacity 180ms ease;
}
#contact-pop-close:hover { opacity: 1; }
#contact-pop-close svg { width: 0.95rem; height: 0.95rem; display: block; }

.contact-pop__half {
  display: flex;
  flex-direction: column;
  align-items: flex-start;
  padding: 0.4rem 0;
}
.contact-pop__value {
  display: block;
  font-size: 1.2rem;
  font-weight: 400;
  letter-spacing: -0.01em;
  color: var(--ink);
  margin: 0.5rem 0 1.1rem;
  transition: font-style 180ms ease;
}
.contact-pop__value:hover { font-style: italic; }

.contact-pop__divider {
  height: 1px;
  background: var(--rule);
  margin: 0.5rem 0;
}

.btn-ink--sm {
  padding: 0.65rem 1.05rem;
  font-size: 0.7rem;
  letter-spacing: 0.14em;
}
.btn-outline--sm {
  padding: 0.6rem 1.05rem;
  font-size: 0.7rem;
  letter-spacing: 0.14em;
}

@media (max-width: 640px) {
  #contact-widget {
    right: max(1rem, env(safe-area-inset-right));
    bottom: max(1rem, env(safe-area-inset-bottom));
  }
  #contact-fab {
    padding: 1rem;        /* 48x48 hit target — above the 44px iOS minimum */
  }
  #contact-fab .contact-fab__label { display: none; }
  #contact-fab svg { width: 1.4rem; height: 1.4rem; }
  #contact-pop { width: calc(100vw - 2rem); }
}

/* Contact page — two halves divided by a hairline */
.contact-split {
  display: grid;
  grid-template-columns: 1fr;
  gap: 4rem;
}
.contact-half {
  display: flex;
  flex-direction: column;
  align-items: flex-start;
  padding: 1rem 0;
}
.contact-value {
  font-size: clamp(1.75rem, 4.5vw, 3.25rem);
  line-height: 1.05;
  letter-spacing: -0.025em;
  font-weight: 300;
  color: var(--ink);
  transition: font-style 200ms ease;
}
.contact-value:hover { font-style: italic; }

@media (min-width: 1024px) {
  .contact-split {
    grid-template-columns: 1fr 1fr;
    gap: 0;
  }
  .contact-half { padding: 1rem 4rem; }
  .contact-half + .contact-half { border-left: 1px solid var(--rule); }
  .contact-half:first-child { padding-left: 0; }
  .contact-half:last-child  { padding-right: 0; }
}

/* ============================================================
   Projecten — featured project layout + lightbox
   ============================================================ */

/* Editorial eyebrow with a short rule under it (matches reference design) */
.eyebrow--rule {
  display: inline-block;
  position: relative;
  padding-bottom: 0.65rem;
}
.eyebrow--rule::after {
  content: '';
  position: absolute;
  left: 0;
  bottom: 0;
  width: 2.5rem;
  height: 1px;
  background: var(--ink);
}

/* Featured project: detail card on the left, photo gallery on the right */
/* Project carousel — horizontal swipe of featured cards (Reels-style) */
.project-carousel {
  position: relative;
  margin-bottom: 2.5rem;
}
.project-carousel__track {
  display: flex;
  gap: 1.5rem;
  overflow-x: auto;
  scroll-snap-type: x mandatory;
  scroll-behavior: smooth;
  -webkit-overflow-scrolling: touch;
  scrollbar-width: none;
  padding-bottom: 0.5rem;
}
.project-carousel__track::-webkit-scrollbar { display: none; }

/* Each slide takes the full width and snaps into place */
.project-slide {
  flex: 0 0 100%;
  scroll-snap-align: center;
  display: grid;
  grid-template-columns: 1fr;
  gap: 1.75rem;
  align-items: center;
}
@media (min-width: 1024px) {
  .project-slide {
    grid-template-columns: 1fr 1.55fr;
    gap: 2.5rem;
    align-items: stretch;
  }
}

.project-slide__detail {
  border: 1px solid var(--rule);
  background: var(--paper);
  padding: 2rem 1.85rem;
  display: flex;
  flex-direction: column;
  gap: 1rem;
}
@media (min-width: 1024px) {
  .project-slide__detail {
    padding: 2.25rem 2.5rem;
    justify-content: flex-start;
  }
}
.project-slide__index {
  margin: 0;
}
.project-slide__title {
  font-size: clamp(1.6rem, 2.4vw, 2.25rem);
  line-height: 1.14;
  letter-spacing: -0.02em;
  font-weight: 400;
  margin: 0;
  max-width: 20ch;
}
.project-slide__meta {
  display: flex;
  align-items: center;
  gap: 0.85rem;
  font-size: 0.82rem;
  color: var(--muted);
}
.project-slide__meta-item {
  display: inline-flex;
  align-items: center;
  gap: 0.45rem;
}
.project-slide__meta-item svg {
  width: 1rem;
  height: 1rem;
  flex-shrink: 0;
}
.project-slide__meta-divider {
  color: var(--rule);
  font-weight: 300;
}
.project-slide__rule { margin: 0.35rem 0 !important; }
.project-slide__desc {
  font-size: 0.95rem;
  line-height: 1.6;
  color: #444;
  max-width: 42ch;
}
.project-slide__actions {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 0.75rem;
  margin-top: 0.4rem;
}
.project-slide__highlights {
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  gap: 1rem;
  margin-top: 1.25rem;
  padding-top: 1.25rem;
  border-top: 1px solid var(--rule);
  list-style: none;
}
.project-slide__highlights li {
  display: flex;
  flex-direction: column;
  align-items: center;
  text-align: center;
  gap: 0.6rem;
  font-size: 0.78rem;
  color: var(--ink);
  line-height: 1.3;
}
.project-slide__highlights li + li {
  border-left: 1px solid var(--rule);
}
.project-slide__highlights svg {
  width: 1.7rem;
  height: 1.7rem;
  color: var(--ink);
  opacity: 0.85;
}

/* Gallery: lead photo + 2×2 thumbnail grid */
.project-slide__gallery {
  display: grid;
  gap: 0.6rem;
}
.project-slide__photo {
  display: block;
  width: 100%;
  padding: 0;
  margin: 0;
  border: 0;
  background: var(--rule);
  cursor: pointer;
  overflow: hidden;
  position: relative;
  aspect-ratio: 1 / 1;
  transition: transform 320ms cubic-bezier(.22,.61,.36,1);
}
.project-slide__photo img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  display: block;
  transition: transform 540ms cubic-bezier(.22,.61,.36,1);
}
.project-slide__photo:hover img { transform: scale(1.04); }
.project-slide__photo--lead { aspect-ratio: 16 / 10; }
.project-slide__grid {
  display: grid;
  grid-template-columns: repeat(4, 1fr);
  gap: 0.6rem;
}

/* "+N more" overlay on the last thumbnail — refined, premium look */
.project-slide__photo--more::after {
  content: '';
  position: absolute;
  inset: 0;
  background: rgba(10, 10, 10, 0.42);
  transition: background 240ms ease;
}
.project-slide__photo--more:hover::after {
  background: rgba(10, 10, 10, 0.55);
}
.project-slide__count {
  position: absolute;
  inset: 0;
  z-index: 1;
  display: flex;
  align-items: center;
  justify-content: center;
  color: var(--paper);
  font-size: 1.35rem;
  font-weight: 300;
  letter-spacing: 0.04em;
  font-family: 'Fraunces', serif;
}

/* Duo gallery (Fitness — only 2 photos, stacked side by side) */
.project-slide__gallery--duo {
  grid-template-columns: repeat(2, 1fr);
}
.project-slide__gallery--duo .project-slide__photo { aspect-ratio: 3 / 4; }

/* Carousel arrows */
.project-carousel__nav {
  position: absolute;
  top: 50%;
  transform: translateY(-50%);
  z-index: 5;
  width: 48px;
  height: 48px;
  border-radius: 999px;
  border: 1px solid var(--rule);
  background: var(--paper);
  color: var(--ink);
  display: inline-flex;
  align-items: center;
  justify-content: center;
  cursor: pointer;
  box-shadow: 0 8px 24px rgba(10, 10, 10, 0.1);
  transition: background 200ms ease, color 200ms ease, opacity 200ms ease;
}
.project-carousel__nav:hover { background: var(--ink); color: var(--paper); }
.project-carousel__nav svg { width: 20px; height: 20px; }
.project-carousel__nav--prev { left: -10px; }
.project-carousel__nav--next { right: -10px; }
.project-carousel__nav[disabled] { opacity: 0.25; pointer-events: none; }
@media (max-width: 1023px) {
  .project-carousel__nav { display: none; }  /* swipe on touch devices */
}

/* Dots */
.project-carousel__dots {
  display: flex;
  justify-content: center;
  gap: 0.5rem;
  margin-top: 1.5rem;
}
.project-carousel__dot {
  width: 8px;
  height: 8px;
  border-radius: 999px;
  border: 0;
  padding: 0;
  background: var(--rule);
  cursor: pointer;
  transition: background 200ms ease, width 200ms ease;
}
.project-carousel__dot.is-active {
  background: var(--accent);
  width: 22px;
}

/* "Alle projecten bekijken" — wide bar with right-aligned arrow */
.project-all-bar {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 1rem;
  padding: 1.25rem 1.75rem;
  border: 1px solid var(--rule);
  font-size: 0.95rem;
  color: var(--ink);
  transition: background 240ms ease, border-color 240ms ease;
}
.project-all-bar:hover {
  background: rgba(180, 83, 9, 0.04);
  border-color: var(--accent);
  color: var(--accent);
}
.project-all-bar .arrow {
  transition: transform 320ms cubic-bezier(.22,.61,.36,1);
}
.project-all-bar:hover .arrow {
  transform: translateX(0.5rem);
}

/* Lightbox: fullscreen photo viewer */
.project-lightbox {
  position: fixed;
  inset: 0;
  background: rgba(10, 10, 10, 0.92);
  z-index: 200;
  display: flex;
  align-items: center;
  justify-content: center;
  opacity: 0;
  visibility: hidden;
  transition: opacity 240ms ease, visibility 240ms ease;
}
.project-lightbox.is-open {
  opacity: 1;
  visibility: visible;
}
body.lightbox-open {
  overflow: hidden;
}
.project-lightbox__figure {
  max-width: min(95vw, 1400px);
  max-height: 90vh;
  margin: 0;
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 1rem;
}
.project-lightbox__figure img {
  max-width: 100%;
  max-height: 82vh;
  object-fit: contain;
  display: block;
}
.project-lightbox__caption {
  color: rgba(250, 250, 250, 0.7);
  font-size: 0.78rem;
  letter-spacing: 0.18em;
  text-transform: uppercase;
}
.project-lightbox__close,
.project-lightbox__nav {
  position: absolute;
  background: transparent;
  border: 1px solid rgba(250, 250, 250, 0.25);
  color: var(--paper);
  width: 44px;
  height: 44px;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  cursor: pointer;
  transition: background 200ms ease, border-color 200ms ease;
}
.project-lightbox__close:hover,
.project-lightbox__nav:hover {
  background: rgba(250, 250, 250, 0.1);
  border-color: rgba(250, 250, 250, 0.5);
}
.project-lightbox__close { top: 1.25rem; right: 1.25rem; }
.project-lightbox__nav--prev { left: 1.25rem; top: 50%; transform: translateY(-50%); }
.project-lightbox__nav--next { right: 1.25rem; top: 50%; transform: translateY(-50%); }
.project-lightbox__close svg,
.project-lightbox__nav svg { width: 20px; height: 20px; }

/* Mobile */
@media (max-width: 1023px) {
  /* Reserve safe bottom space below the carousel on tablet/mobile so the
     floating contact bubble never overlaps the last thumbnail or dots. */
  .project-carousel { padding-bottom: 4.5rem; }
  .project-carousel__dots { margin-bottom: 0.5rem; }
}

@media (max-width: 767px) {
  .project-slide__title { font-size: 1.4rem; }
  .project-slide__actions .btn-ink,
  .project-slide__actions .btn-outline { flex: 1; justify-content: center; }
  /* Slightly tighter padding so the detail card doesn't dwarf the title */
  .project-slide__detail { padding: 1.65rem 1.4rem; }
  .project-slide__highlights {
    margin-top: 1rem;
    padding-top: 1rem;
    gap: 0.6rem;
  }
  .project-slide__highlights li { font-size: 0.7rem; }
  .project-slide__highlights svg { width: 1.45rem; height: 1.45rem; }
  /* Extra room above the floating contact bubble */
  .project-carousel { padding-bottom: 5.5rem; }
  .project-all-bar {
    padding: 1rem 1.25rem;
    font-size: 0.85rem;
  }
  .project-lightbox__close,
  .project-lightbox__nav {
    width: 38px;
    height: 38px;
  }
  .project-lightbox__close { top: 0.75rem; right: 0.75rem; }
  .project-lightbox__nav--prev { left: 0.5rem; }
  .project-lightbox__nav--next { right: 0.5rem; }
}