/* HERO */
.hero {
  padding:96px 0 32px;
  position:relative;
  min-height:calc(100vh - 0px);
  display:flex;
  flex-direction:column;
  align-items:stretch;
  width:100%;
  max-width:100%;
  overflow:hidden;
}
.hero > .wrap { align-self:center; min-width:0; }

.hero-brick {
  position:absolute;
  border:1.5px solid var(--ink);
  border-radius:5px;
  box-shadow: 0 3px 0 var(--ink);
  z-index:1;
}
.hero-brick-1 {
  width:36px; height:24px;
  background:var(--yellow);
  top:100px; right:2%;
  transform:rotate(-8deg);
  animation:float1 6s ease-in-out infinite;
}
.hero-brick-2 {
  width:28px; height:28px;
  background:var(--red);
  top:100px; left:2%;
  transform:rotate(15deg);
  animation:float3 8s ease-in-out infinite;
}
@keyframes float1 {
  0%,100% { transform:rotate(-8deg) translateY(0) }
  50% { transform:rotate(-4deg) translateY(-8px) }
}
@keyframes float3 {
  0%,100% { transform:rotate(15deg) translateY(0) }
  50% { transform:rotate(18deg) translateY(-6px) }
}

.hero-meta {
  display:flex;
  justify-content:space-between;
  align-items:center;
  margin-bottom:24px;
  padding-bottom:16px;
  border-bottom:1px solid var(--line);
  font-family:var(--font-mono);
  font-size:10px;
  font-weight:500;
  color:var(--ink-soft);
  letter-spacing:0.6px;
  text-transform:uppercase;
  position:relative;
  z-index:2;
}
.hero-meta-left { display:flex; align-items:center; gap:9px }
.hero-meta-dot {
  width:7px; height:7px; border-radius:50%;
  background:var(--green);
  box-shadow: 0 0 0 0 rgba(6,167,125,.7);
  animation:livepulse 2s infinite;
}
.hero-meta-right { display:flex; gap:8px; align-items:center }
.hero-meta-divider {
  width:3px; height:3px; border-radius:50%;
  background:var(--gray-3);
}

/* Flag pills */
.flag-pill {
  display:inline-flex;
  align-items:center;
  gap:6px;
  padding:4px 9px 4px 5px;
  background:var(--white);
  border:1px solid var(--line);
  border-radius:6px;
  font-family:var(--font-mono);
  font-size:10px;
  font-weight:700;
  color:var(--ink);
  letter-spacing:0.6px;
  text-transform:uppercase;
  transition:border-color .15s, transform .15s;
}
.flag-pill:hover {
  transform:translateY(-1px);
  border-color:var(--ink);
}
.flag {
  display:inline-block;
  width:16px; height:11px;
  border-radius:2px;
  border:1px solid var(--ink);
  overflow:hidden;
  position:relative;
  flex-shrink:0;
}
/* NL flag - red/white/blue horizontal */
.flag-nl {
  background:linear-gradient(to bottom,
    #AE1C28 0%, #AE1C28 33.33%,
    #FFFFFF 33.33%, #FFFFFF 66.66%,
    #21468B 66.66%, #21468B 100%);
}
/* BE flag - black/yellow/red vertical */
.flag-be {
  background:linear-gradient(to right,
    #000000 0%, #000000 33.33%,
    #FAE042 33.33%, #FAE042 66.66%,
    #ED2939 66.66%, #ED2939 100%);
}

/* Since 2018 badge - prominent */
.since-badge {
  display:inline-flex;
  align-items:center;
  gap:6px;
  padding:4px 11px;
  background:var(--ink);
  color:var(--white);
  border:1px solid var(--ink);
  border-radius:6px;
  font-family:var(--font-mono);
  font-size:10px;
  font-weight:600;
  letter-spacing:0.6px;
  text-transform:uppercase;
  transition:transform .15s;
}
.since-badge:hover {
  transform:translateY(-1px);
}
.since-badge strong {
  font-family:var(--font-display);
  font-weight:400;
  color:var(--orange);
  font-size:13px;
  letter-spacing:-0.3px;
}

.hero-top {
  display:grid;
  grid-template-columns: 5fr 7fr;
  gap:48px;
  align-items:center;
  flex:1;
  margin-bottom:24px;
}

.hero-text { position:relative; z-index:2 }

.hero h1 {
  font-family:var(--font-display);
  font-size:clamp(26px, 6.5vw, 60px);
  font-weight:400;
  line-height:.96;
  letter-spacing:-1.5px;
  color:var(--ink);
  margin-bottom:20px;
  text-transform:uppercase;
}
.hero h1 .line {
  display:block;
  opacity:0;
  transform:translateY(30px);
  animation:reveal .9s cubic-bezier(.2,.7,.2,1) forwards;
}
.hero h1 .line:nth-child(1) { animation-delay:.1s }
.hero h1 .line:nth-child(2) { animation-delay:.22s }
.hero h1 .line:nth-child(3) { animation-delay:.34s }

.brick-word {
  display:inline-block;
  position:relative;
  padding: 0.05em 0.3em 0.1em;
  color:var(--white);
  background:var(--orange);
  border:1.5px solid var(--ink);
  border-radius:0.18em;
  box-shadow: 0 0.08em 0 var(--ink);
  transform:rotate(-1.5deg);
  margin: 0 0.06em;
  line-height:1;
}
.brick-word::before, .brick-word::after {
  content:'';
  position:absolute;
  width:0.22em; height:0.22em;
  background:var(--orange);
  border:1.5px solid var(--ink);
  border-bottom:none;
  border-radius:50% 50% 0 0;
  top:-0.18em;
}
.brick-word::before { left:20%; }
.brick-word::after  { right:20%; }

.hero h1 .accent {
  position:relative;
  display:inline-block;
  color:var(--ink);
  z-index:1;
}
.hero h1 .accent::after {
  content:'';
  position:absolute;
  bottom:0.32em; left:-0.05em; right:-0.05em;
  height:0.28em;
  background:var(--yellow);
  border-radius:0.06em;
  z-index:-1;
  transform:rotate(-1deg);
}

.hero-lead {
  font-family:var(--font-ui);
  font-size:15.5px;
  color:var(--ink-soft);
  line-height:1.5;
  max-width:460px;
  letter-spacing:-0.15px;
  margin-bottom:24px;
  opacity:0;
  animation:reveal .9s cubic-bezier(.2,.7,.2,1) .45s forwards;
}
.hero-lead a {
  font-weight:700;
  color:var(--orange-d);
  position:relative;
  white-space:nowrap;
  padding: 0 3px;
}
.hero-lead a::after {
  content:'';
  position:absolute;
  left:0; right:0; bottom:0;
  height:5px;
  background:var(--yellow);
  z-index:-1;
  transition:height .25s;
}
.hero-lead a:hover::after { height:100% }

.hero-cta {
  display:flex;
  gap:8px;
  align-items:center;
  flex-wrap:wrap;
  opacity:0;
  animation:reveal .9s cubic-bezier(.2,.7,.2,1) .55s forwards;
}

/* HERO CARDS */
.hero-services {
  display:flex;
  flex-direction:column;
  gap:14px;
  position:relative;
  z-index:2;
  opacity:0;
  animation:reveal .9s cubic-bezier(.2,.7,.2,1) .65s forwards;
}
.svc {
  background:var(--white);
  border-radius:14px;
  text-decoration:none;
  color:inherit;
  display:grid;
  grid-template-columns: 168px 1fr auto;
  align-items:center;
  gap:20px;
  transition:transform .2s cubic-bezier(.2,.7,.2,1), box-shadow .2s, border-color .2s;
  border:1px solid var(--line);
  box-shadow: 0 2px 0 var(--line-soft);
  position:relative;
  padding:16px 20px 16px 14px;
}
.svc:hover {
  transform:translateY(-2px);
  box-shadow: 0 4px 0 var(--ink);
  border-color:var(--ink);
}

/* Studs hidden on the small service cards — kept only on big blocks */
.svc-studs { display:none }

.svc-img {
  width:168px;
  height:112px;
  overflow:hidden;
  position:relative;
  background:var(--bg-warm);
  border:1px solid var(--line);
  border-radius:9px;
}
.svc-img img {
  width:100%; height:100%; object-fit:cover;
  transition:transform .5s cubic-bezier(.2,.7,.2,1);
}
.svc:hover .svc-img img { transform:scale(1.06) }

.svc-num {
  position:absolute;
  top:8px;
  left:156px;
  font-family:var(--font-mono);
  font-size:9.5px;
  font-weight:700;
  letter-spacing:0.8px;
  color:var(--ink);
  background:var(--white);
  border:1px solid var(--line);
  border-radius:5px;
  padding:2px 5px;
  z-index:30;
  letter-spacing:0.5px;
}
/* No per-card color override — all cards use the same neutral badge */
.svc:nth-child(2) .svc-num,
.svc:nth-child(3) .svc-num {
  background:var(--white);
  color:var(--ink);
}

.svc-body {
  display:flex;
  flex-direction:column;
  gap:6px;
  min-width:0;
}
.svc-body h3 {
  font-family:var(--font-display);
  font-size:19px;
  font-weight:400;
  letter-spacing:-0.4px;
  line-height:1.02;
  color:var(--ink);
  text-transform:uppercase;
}
.svc-body p {
  font-size:13px;
  color:var(--gray-1);
  line-height:1.45;
  display:-webkit-box;
  -webkit-line-clamp:2;
  -webkit-box-orient:vertical;
  overflow:hidden;
}
.svc-meta {
  display:flex;
  gap:0;
  align-items:center;
  margin-top:2px;
  font-family:var(--font-mono);
  font-size:10px;
  font-weight:600;
  letter-spacing:0.6px;
  text-transform:uppercase;
  color:var(--gray-1);
}
.svc-meta span {
  padding:0;
  background:none;
  border:none;
  color:inherit;
}
.svc-meta span + span::before {
  content:'·';
  padding:0 7px;
  color:var(--gray-3);
}

.svc-arrow {
  width:36px;
  height:36px;
  background:transparent;
  border-radius:50%;
  display:flex;
  align-items:center;
  justify-content:center;
  color:var(--ink);
  flex-shrink:0;
  transition:background .2s, color .2s, transform .25s;
  border:1px solid var(--line);
}
.svc-arrow svg { width:14px; height:14px }
.svc:hover .svc-arrow {
  background:var(--ink);
  color:var(--white);
  border-color:var(--ink);
  transform:rotate(-45deg);
}