:root {
  --color-ink: #0b0d12;
  --color-ink-soft: #12151d;
  --color-surface: #171b25;
  --color-surface-2: #1f2431;
  --color-line: rgba(255, 255, 255, 0.12);
  --color-text: #f5f7fc;
  --color-text-dim: #c3c9d6;
  --color-accent: #ff5f1f;
  --color-accent-dark: #d13f06;
  --color-teal: #2ee6a8;
  --color-white: #ffffff;
  --radius-sm: 10px;
  --radius-md: 18px;
  --radius-lg: 28px;
  --shadow-soft: 0 18px 50px rgba(0, 0, 0, 0.35);
  --shadow-strong: 0 30px 80px rgba(0, 0, 0, 0.55);
  --font-display: "Bebas Neue", "Oswald", "Arial Narrow", sans-serif;
  --font-body: "Inter", "Segoe UI", Roboto, Arial, sans-serif;
  --transition: 0.35s cubic-bezier(0.22, 0.61, 0.36, 1);
  --header-h: 88px;
}

* {
  box-sizing: border-box;
}

html {
  scroll-behavior: smooth;
}

body {
  margin: 0;
  background-color: var(--color-ink);
  color: var(--color-text);
  font-family: var(--font-body);
  font-size: 1rem;
  line-height: 1.7;
  -webkit-font-smoothing: antialiased;
  overflow-x: hidden;
}

body.no-scroll {
  overflow: hidden;
}

h1,
h2,
h3,
h4,
h5 {
  font-family: var(--font-display);
  letter-spacing: 0.02em;
  line-height: 1.05;
  color: var(--color-text);
  margin: 0 0 0.6em;
  text-transform: uppercase;
}

h1 {
  font-size: clamp(2.6rem, 6vw, 5rem);
}

h2 {
  font-size: clamp(2rem, 4.2vw, 3.4rem);
}

h3 {
  font-size: clamp(1.35rem, 2.4vw, 1.9rem);
}

h4 {
  font-size: 1.2rem;
}

p {
  margin: 0 0 1.15rem;
  color: var(--color-text-dim);
}

a {
  color: var(--color-accent);
  text-decoration: none;
  transition: color var(--transition);
}

a:hover,
a:focus-visible {
  color: var(--color-white);
}

img {
  max-width: 100%;
  height: auto;
  display: block;
}

ul {
  padding-left: 1.1rem;
}

::selection {
  background: var(--color-accent);
  color: #0b0d12;
}

:focus-visible {
  outline: 3px solid var(--color-teal);
  outline-offset: 3px;
}

.section {
  position: relative;
  padding: 96px 0;
}

.section--tight {
  padding: 64px 0;
}

.section--dark {
  background-color: var(--color-ink-soft);
}

.section--surface {
  background-color: var(--color-surface);
}

.section--overlay {
  background-size: cover;
  background-position: center;
  background-repeat: no-repeat;
  color: var(--color-white);
}

.section--overlay p,
.section--overlay h1,
.section--overlay h2,
.section--overlay h3 {
  color: var(--color-white);
}

.section__glow {
  position: absolute;
  inset: auto -10% -40% 60%;
  height: 420px;
  background: radial-gradient(circle at center, rgba(255, 95, 31, 0.28), transparent 65%);
  pointer-events: none;
  filter: blur(20px);
}

.eyebrow {
  display: inline-flex;
  align-items: center;
  gap: 10px;
  font-family: var(--font-body);
  font-size: 0.78rem;
  font-weight: 700;
  letter-spacing: 0.24em;
  text-transform: uppercase;
  color: var(--color-teal);
  margin-bottom: 18px;
}

.eyebrow::before {
  content: "";
  width: 42px;
  height: 2px;
  background: var(--color-teal);
  display: inline-block;
}

.section-title {
  max-width: 780px;
  margin-bottom: 18px;
}

.section-lead {
  max-width: 680px;
  font-size: 1.06rem;
}

.text-accent {
  color: var(--color-accent);
}

.text-teal {
  color: var(--color-teal);
}

.divider {
  height: 1px;
  background: var(--color-line);
  border: 0;
  margin: 48px 0;
}

.btn {
  font-family: var(--font-body);
  font-weight: 700;
  letter-spacing: 0.06em;
  text-transform: uppercase;
  font-size: 0.82rem;
  border-radius: 999px;
  padding: 15px 32px;
  border: 2px solid transparent;
  transition: transform var(--transition), background-color var(--transition),
    color var(--transition), border-color var(--transition), box-shadow var(--transition);
  display: inline-flex;
  align-items: center;
  gap: 10px;
}

.btn-brand {
  background-color: var(--color-accent);
  color: #0b0d12;
  box-shadow: 0 14px 34px rgba(255, 95, 31, 0.32);
}

.btn-brand:hover,
.btn-brand:focus-visible {
  background-color: var(--color-white);
  color: #0b0d12;
  transform: translateY(-3px);
}

.btn-ghost {
  background-color: transparent;
  color: var(--color-white);
  border-color: rgba(255, 255, 255, 0.45);
}

.btn-ghost:hover,
.btn-ghost:focus-visible {
  background-color: var(--color-white);
  color: #0b0d12;
  border-color: var(--color-white);
  transform: translateY(-3px);
}

.btn-teal {
  background-color: var(--color-teal);
  color: #06231a;
}

.btn-teal:hover,
.btn-teal:focus-visible {
  background-color: var(--color-white);
  color: #0b0d12;
  transform: translateY(-3px);
}

.btn-block {
  width: 100%;
  justify-content: center;
}

.site-header {
  position: fixed;
  top: 0;
  left: 0;
  right: 0;
  z-index: 1030;
  padding: 18px 0;
  transition: background-color var(--transition), padding var(--transition),
    box-shadow var(--transition), backdrop-filter var(--transition);
}

.site-header.is-stuck {
  padding: 10px 0;
  background-color: rgba(11, 13, 18, 0.92);
  backdrop-filter: blur(14px);
  box-shadow: 0 12px 40px rgba(0, 0, 0, 0.45);
  border-bottom: 1px solid var(--color-line);
}

.site-header__inner {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 20px;
}

.site-header__brand {
  display: flex;
  align-items: center;
  gap: 12px;
}

.site-header__brandtext {
  font-family: var(--font-display);
  font-size: 1.5rem;
  letter-spacing: 0.14em;
  color: var(--color-white);
  text-transform: uppercase;
}

.site-nav {
  display: flex;
  align-items: center;
  gap: 26px;
}

.site-nav__link {
  color: var(--color-text);
  font-size: 0.86rem;
  font-weight: 600;
  letter-spacing: 0.08em;
  text-transform: uppercase;
  position: relative;
  padding-bottom: 4px;
}

.site-nav__link::after {
  content: "";
  position: absolute;
  left: 0;
  bottom: 0;
  width: 0;
  height: 2px;
  background: var(--color-accent);
  transition: width var(--transition);
}

.site-nav__link:hover::after,
.site-nav__link:focus-visible::after,
.site-nav__link.is-active::after {
  width: 100%;
}

.site-header__meta {
  display: flex;
  align-items: center;
  gap: 22px;
  font-size: 0.82rem;
  color: var(--color-text-dim);
}

.site-header__meta i {
  color: var(--color-accent);
  margin-right: 6px;
}

.nav-toggle {
  display: none;
  background: transparent;
  border: 1px solid var(--color-line);
  color: var(--color-white);
  width: 48px;
  height: 48px;
  border-radius: 12px;
  font-size: 1.1rem;
  cursor: pointer;
}

.mobile-nav {
  position: fixed;
  inset: 0;
  z-index: 1040;
  background: rgba(11, 13, 18, 0.97);
  backdrop-filter: blur(10px);
  padding: 32px 24px;
  display: flex;
  flex-direction: column;
  gap: 18px;
  transform: translateX(100%);
  transition: transform var(--transition);
  overflow-y: auto;
}

.mobile-nav.is-open {
  transform: translateX(0);
}

.mobile-nav__link {
  color: var(--color-white);
  font-family: var(--font-display);
  font-size: 1.7rem;
  text-transform: uppercase;
  letter-spacing: 0.05em;
  border-bottom: 1px solid var(--color-line);
  padding-bottom: 12px;
}

.mobile-nav__close {
  align-self: flex-end;
  background: transparent;
  border: 0;
  color: var(--color-white);
  font-size: 1.6rem;
  cursor: pointer;
}

.hero {
  position: relative;
  min-height: 100vh;
  display: flex;
  align-items: center;
  padding: calc(var(--header-h) + 60px) 0 80px;
  background-size: cover;
  background-position: center;
  overflow: hidden;
}

.hero--page {
  min-height: 62vh;
  padding: calc(var(--header-h) + 80px) 0 80px;
}

.hero__inner {
  position: relative;
  z-index: 2;
}

.hero__title {
  margin-bottom: 22px;
}

.hero__lead {
  font-size: 1.12rem;
  max-width: 620px;
  color: var(--color-text);
}

.hero__actions {
  display: flex;
  flex-wrap: wrap;
  gap: 16px;
  margin-top: 30px;
}

.hero__stats {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(150px, 1fr));
  gap: 26px;
  margin-top: 60px;
  border-top: 1px solid var(--color-line);
  padding-top: 34px;
}

.hero__scroll {
  position: absolute;
  left: 50%;
  bottom: 28px;
  transform: translateX(-50%);
  z-index: 3;
  color: var(--color-white);
  font-size: 1.3rem;
  animation: floatDown 2.4s ease-in-out infinite;
}

@keyframes floatDown {
  0%,
  100% {
    transform: translate(-50%, 0);
    opacity: 0.5;
  }
  50% {
    transform: translate(-50%, 12px);
    opacity: 1;
  }
}

.stat {
  text-align: left;
}

.stat__value {
  font-family: var(--font-display);
  font-size: clamp(2rem, 4vw, 3rem);
  color: var(--color-accent);
  line-height: 1;
}

.stat__label {
  font-size: 0.82rem;
  letter-spacing: 0.14em;
  text-transform: uppercase;
  color: var(--color-text-dim);
  margin-top: 6px;
}

.hero-slider .carousel-item {
  min-height: 100vh;
  background-size: cover;
  background-position: center;
}

.hero-slider .carousel-indicators [data-bs-target] {
  width: 34px;
  height: 4px;
  border-radius: 4px;
  background-color: var(--color-accent);
  border: 0;
  opacity: 0.4;
}

.hero-slider .carousel-indicators .active {
  opacity: 1;
}

.hero-slider .carousel-control-prev,
.hero-slider .carousel-control-next {
  width: 64px;
  opacity: 0.8;
}

.hero-slider .carousel-control-prev-icon,
.hero-slider .carousel-control-next-icon {
  width: 42px;
  height: 42px;
  background-color: rgba(11, 13, 18, 0.6);
  border-radius: 50%;
  background-size: 42%;
}

.feature-card {
  height: 100%;
  background: var(--color-surface);
  border: 1px solid var(--color-line);
  border-radius: var(--radius-md);
  padding: 34px 28px;
  transition: transform var(--transition), border-color var(--transition),
    background-color var(--transition);
}

.feature-card:hover {
  transform: translateY(-8px);
  border-color: rgba(255, 95, 31, 0.55);
  background: var(--color-surface-2);
}

.feature-card__icon {
  width: 58px;
  height: 58px;
  border-radius: 14px;
  display: grid;
  place-items: center;
  font-size: 1.4rem;
  background: rgba(255, 95, 31, 0.14);
  color: var(--color-accent);
  margin-bottom: 22px;
}

.feature-card__title {
  font-size: 1.35rem;
  margin-bottom: 12px;
}

.feature-card__list {
  list-style: none;
  padding: 0;
  margin: 18px 0 0;
}

.feature-card__list li {
  position: relative;
  padding-left: 26px;
  color: var(--color-text-dim);
  margin-bottom: 8px;
}

.feature-card__list li::before {
  content: "\f00c";
  font-family: "Font Awesome 6 Free";
  font-weight: 900;
  position: absolute;
  left: 0;
  color: var(--color-teal);
  font-size: 0.8rem;
}

.service-card {
  position: relative;
  border-radius: var(--radius-md);
  overflow: hidden;
  background: var(--color-surface);
  border: 1px solid var(--color-line);
  height: 100%;
  display: flex;
  flex-direction: column;
  transition: transform var(--transition), box-shadow var(--transition);
}

.service-card:hover {
  transform: translateY(-8px);
  box-shadow: var(--shadow-soft);
}

.service-card__media {
  position: relative;
  aspect-ratio: 16 / 10;
  overflow: hidden;
}

.service-card__media img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  transition: transform 0.8s var(--transition);
}

.service-card:hover .service-card__media img {
  transform: scale(1.08);
}

.service-card__badge {
  position: absolute;
  top: 16px;
  left: 16px;
  background: var(--color-accent);
  color: #0b0d12;
  font-size: 0.72rem;
  font-weight: 800;
  letter-spacing: 0.14em;
  text-transform: uppercase;
  padding: 7px 14px;
  border-radius: 999px;
}

.service-card__body {
  padding: 26px;
  display: flex;
  flex-direction: column;
  flex-grow: 1;
}

.service-card__title {
  font-size: 1.5rem;
  margin-bottom: 10px;
}

.service-card__meta {
  display: flex;
  justify-content: space-between;
  align-items: center;
  margin-top: auto;
  padding-top: 18px;
  border-top: 1px solid var(--color-line);
  font-size: 0.9rem;
}

.service-card__price {
  font-family: var(--font-display);
  font-size: 1.6rem;
  color: var(--color-teal);
}

.price-card {
  height: 100%;
  background: var(--color-surface);
  border: 1px solid var(--color-line);
  border-radius: var(--radius-lg);
  padding: 40px 32px;
  display: flex;
  flex-direction: column;
  transition: transform var(--transition), border-color var(--transition);
}

.price-card:hover {
  transform: translateY(-8px);
  border-color: rgba(46, 230, 168, 0.5);
}

.price-card--featured {
  background: linear-gradient(160deg, #1b2130, #12151d);
  border-color: var(--color-accent);
  box-shadow: var(--shadow-soft);
}

.price-card__label {
  font-size: 0.78rem;
  font-weight: 800;
  letter-spacing: 0.2em;
  text-transform: uppercase;
  color: var(--color-teal);
  margin-bottom: 16px;
}

.price-card__amount {
  font-family: var(--font-display);
  font-size: 3.2rem;
  line-height: 1;
  color: var(--color-white);
}

.price-card__period {
  font-size: 0.86rem;
  color: var(--color-text-dim);
  margin-bottom: 24px;
}

.price-card__list {
  list-style: none;
  padding: 0;
  margin: 0 0 30px;
  flex-grow: 1;
}

.price-card__list li {
  position: relative;
  padding-left: 28px;
  margin-bottom: 12px;
  color: var(--color-text-dim);
}

.price-card__list li i {
  position: absolute;
  left: 0;
  top: 6px;
  color: var(--color-accent);
  font-size: 0.86rem;
}

.process {
  display: grid;
  gap: 26px;
  counter-reset: step;
}

.process-step {
  position: relative;
  padding: 28px 28px 28px 96px;
  background: var(--color-surface);
  border: 1px solid var(--color-line);
  border-radius: var(--radius-md);
  transition: border-color var(--transition), transform var(--transition);
}

.process-step:hover {
  border-color: rgba(255, 95, 31, 0.5);
  transform: translateX(6px);
}

.process-step__num {
  counter-increment: step;
  position: absolute;
  left: 26px;
  top: 50%;
  transform: translateY(-50%);
  font-family: var(--font-display);
  font-size: 2.2rem;
  color: var(--color-accent);
  line-height: 1;
}

.process-step__num::before {
  content: "0" counter(step);
}

.process-step__title {
  font-size: 1.3rem;
  margin-bottom: 6px;
}

.gallery-item {
  position: relative;
  border-radius: var(--radius-md);
  overflow: hidden;
  aspect-ratio: 4 / 3;
}

.gallery-item img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  transition: transform 0.9s var(--transition);
}

.gallery-item:hover img {
  transform: scale(1.07);
}

.gallery-item__caption {
  position: absolute;
  inset: auto 0 0 0;
  padding: 22px;
  background: linear-gradient(to top, rgba(11, 13, 18, 0.92), transparent);
  color: var(--color-white);
  font-size: 0.95rem;
}

.team-card {
  text-align: center;
  background: var(--color-surface);
  border: 1px solid var(--color-line);
  border-radius: var(--radius-md);
  padding: 30px 22px;
  height: 100%;
  transition: transform var(--transition), border-color var(--transition);
}

.team-card:hover {
  transform: translateY(-6px);
  border-color: rgba(46, 230, 168, 0.5);
}

.team-card__photo {
  width: 130px;
  height: 130px;
  margin: 0 auto 20px;
  border-radius: 50%;
  overflow: hidden;
  border: 3px solid var(--color-accent);
}

.team-card__photo img {
  width: 100%;
  height: 100%;
  object-fit: cover;
}

.team-card__role {
  font-size: 0.78rem;
  letter-spacing: 0.18em;
  text-transform: uppercase;
  color: var(--color-teal);
  margin-bottom: 12px;
}

.team-card__socials {
  display: flex;
  justify-content: center;
  gap: 14px;
  margin-top: 16px;
}

.team-card__socials a {
  width: 38px;
  height: 38px;
  display: grid;
  place-items: center;
  border-radius: 50%;
  border: 1px solid var(--color-line);
  color: var(--color-text);
}

.team-card__socials a:hover {
  background: var(--color-accent);
  color: #0b0d12;
  border-color: var(--color-accent);
}

.testimonial {
  background: var(--color-surface);
  border: 1px solid var(--color-line);
  border-radius: var(--radius-md);
  padding: 34px 30px;
  height: 100%;
  display: flex;
  flex-direction: column;
}

.testimonial__stars {
  color: #ffc531;
  margin-bottom: 16px;
  letter-spacing: 2px;
}

.testimonial__text {
  font-size: 1.02rem;
  color: var(--color-text);
  flex-grow: 1;
}

.testimonial__author {
  display: flex;
  align-items: center;
  gap: 14px;
  margin-top: 22px;
  padding-top: 20px;
  border-top: 1px solid var(--color-line);
}

.testimonial__avatar {
  width: 52px;
  height: 52px;
  border-radius: 50%;
  overflow: hidden;
  flex-shrink: 0;
}

.testimonial__avatar img {
  width: 100%;
  height: 100%;
  object-fit: cover;
}

.testimonial__name {
  font-weight: 700;
  color: var(--color-text);
  font-size: 0.96rem;
}

.testimonial__meta {
  font-size: 0.82rem;
  color: var(--color-text-dim);
}

.partner-strip {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  justify-content: center;
  gap: 46px;
  opacity: 0.85;
}

.partner-strip__item {
  filter: grayscale(1) brightness(1.9);
  transition: filter var(--transition), transform var(--transition);
  max-width: 140px;
}

.partner-strip__item:hover {
  filter: none;
  transform: translateY(-4px);
}

.timeline {
  position: relative;
  padding-left: 34px;
}

.timeline::before {
  content: "";
  position: absolute;
  left: 6px;
  top: 6px;
  bottom: 6px;
  width: 2px;
  background: linear-gradient(to bottom, var(--color-accent), rgba(255, 95, 31, 0.05));
}

.timeline__item {
  position: relative;
  padding-bottom: 34px;
}

.timeline__item::before {
  content: "";
  position: absolute;
  left: -34px;
  top: 8px;
  width: 14px;
  height: 14px;
  border-radius: 50%;
  background: var(--color-accent);
  box-shadow: 0 0 0 5px rgba(255, 95, 31, 0.15);
}

.timeline__year {
  font-family: var(--font-display);
  font-size: 1.5rem;
  color: var(--color-teal);
}

.timeline__title {
  font-size: 1.15rem;
  margin: 4px 0 8px;
}

.faq-item {
  background: var(--color-surface);
  border: 1px solid var(--color-line);
  border-radius: var(--radius-sm);
  margin-bottom: 14px;
  overflow: hidden;
}

.faq-item__question {
  width: 100%;
  background: transparent;
  border: 0;
  color: var(--color-text);
  font-weight: 600;
  font-size: 1.02rem;
  text-align: left;
  padding: 22px 24px;
  cursor: pointer;
  display: flex;
  justify-content: space-between;
  align-items: center;
  gap: 16px;
}

.faq-item__question i {
  color: var(--color-accent);
  transition: transform var(--transition);
}

.faq-item.is-open .faq-item__question i {
  transform: rotate(45deg);
}

.faq-item__answer {
  max-height: 0;
  overflow: hidden;
  transition: max-height 0.45s ease;
}

.faq-item.is-open .faq-item__answer {
  max-height: 520px;
}

.faq-item__answer-inner {
  padding: 0 24px 24px;
  color: var(--color-text-dim);
}

.form-panel {
  background: var(--color-surface);
  border: 1px solid var(--color-line);
  border-radius: var(--radius-lg);
  padding: 40px 34px;
  box-shadow: var(--shadow-soft);
}

.form-field {
  margin-bottom: 20px;
}

.form-field label {
  display: block;
  font-size: 0.8rem;
  font-weight: 700;
  letter-spacing: 0.14em;
  text-transform: uppercase;
  color: var(--color-text-dim);
  margin-bottom: 8px;
}

.form-field .form-control,
.form-field select,
.form-field textarea {
  width: 100%;
  background-color: var(--color-ink);
  border: 1px solid var(--color-line);
  border-radius: var(--radius-sm);
  color: var(--color-text);
  padding: 15px 18px;
  font-family: var(--font-body);
  font-size: 0.98rem;
  transition: border-color var(--transition), box-shadow var(--transition);
}

.form-field .form-control::placeholder,
.form-field textarea::placeholder {
  color: #8b93a4;
}

.form-field .form-control:focus,
.form-field select:focus,
.form-field textarea:focus {
  outline: none;
  border-color: var(--color-accent);
  box-shadow: 0 0 0 4px rgba(255, 95, 31, 0.16);
}

.form-field.is-invalid .form-control,
.form-field.is-invalid select,
.form-field.is-invalid textarea {
  border-color: #ff5a5a;
}

.form-field__error {
  display: none;
  color: #ff9a9a;
  font-size: 0.82rem;
  margin-top: 6px;
}

.form-field.is-invalid .form-field__error {
  display: block;
}

.form-check-row {
  display: flex;
  align-items: flex-start;
  gap: 12px;
  margin-bottom: 22px;
  font-size: 0.9rem;
  color: var(--color-text-dim);
}

.form-check-row input {
  margin-top: 5px;
  width: 18px;
  height: 18px;
  accent-color: var(--color-accent);
}

.notification {
  position: fixed;
  right: 24px;
  bottom: 24px;
  z-index: 1080;
  max-width: 380px;
  background: var(--color-surface-2);
  border: 1px solid var(--color-teal);
  border-left: 5px solid var(--color-teal);
  border-radius: var(--radius-sm);
  padding: 18px 22px;
  color: var(--color-text);
  box-shadow: var(--shadow-strong);
  transform: translateY(24px);
  opacity: 0;
  pointer-events: none;
  transition: transform var(--transition), opacity var(--transition);
}

.notification.is-visible {
  transform: translateY(0);
  opacity: 1;
  pointer-events: auto;
}

.notification__title {
  font-family: var(--font-display);
  font-size: 1.2rem;
  letter-spacing: 0.06em;
  color: var(--color-teal);
  margin-bottom: 4px;
}

.notification__text {
  font-size: 0.92rem;
  margin: 0;
}

.notification--error {
  border-color: #ff5a5a;
  border-left-color: #ff5a5a;
}

.notification--error .notification__title {
  color: #ff9a9a;
}

.newsletter {
  background: var(--color-surface);
  border: 1px solid var(--color-line);
  border-radius: var(--radius-lg);
  padding: 44px 38px;
}

.newsletter__form {
  display: flex;
  flex-wrap: wrap;
  gap: 14px;
  margin-top: 22px;
}

.newsletter__form .form-control {
  flex: 1 1 240px;
  background-color: var(--color-ink);
  border: 1px solid var(--color-line);
  border-radius: 999px;
  color: var(--color-text);
  padding: 15px 24px;
}

.newsletter__form .form-control:focus {
  outline: none;
  border-color: var(--color-accent);
  box-shadow: 0 0 0 4px rgba(255, 95, 31, 0.16);
}

.map-frame {
  border: 1px solid var(--color-line);
  border-radius: var(--radius-md);
  overflow: hidden;
  line-height: 0;
}

.map-frame iframe {
  width: 100%;
  height: 440px;
  border: 0;
  filter: grayscale(0.4) invert(0.9) contrast(0.9);
}

.cta-band {
  padding: 70px 0;
  background-size: cover;
  background-position: center;
}

.cta-band__inner {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  justify-content: space-between;
  gap: 26px;
}

.contact-block {
  display: flex;
  gap: 16px;
  align-items: flex-start;
  margin-bottom: 26px;
}

.contact-block__icon {
  width: 50px;
  height: 50px;
  flex-shrink: 0;
  border-radius: 12px;
  display: grid;
  place-items: center;
  background: rgba(255, 95, 31, 0.14);
  color: var(--color-accent);
  font-size: 1.1rem;
}

.contact-block__label {
  font-size: 0.78rem;
  letter-spacing: 0.18em;
  text-transform: uppercase;
  color: var(--color-teal);
  margin-bottom: 4px;
}

.contact-block__value {
  color: var(--color-text);
  font-size: 1rem;
  word-break: break-word;
}

.tag-list {
  display: flex;
  flex-wrap: wrap;
  gap: 10px;
  list-style: none;
  padding: 0;
  margin: 0;
}

.tag-list li {
  background: rgba(255, 255, 255, 0.06);
  border: 1px solid var(--color-line);
  border-radius: 999px;
  padding: 8px 18px;
  font-size: 0.84rem;
  color: var(--color-text-dim);
}

.legal-body h2 {
  font-size: 1.7rem;
  margin-top: 40px;
}

.legal-body h3 {
  font-size: 1.24rem;
  margin-top: 26px;
}

.legal-body ul {
  color: var(--color-text-dim);
}

.legal-body a {
  text-decoration: underline;
}

.blog-card {
  background: var(--color-surface);
  border: 1px solid var(--color-line);
  border-radius: var(--radius-md);
  overflow: hidden;
  height: 100%;
  display: flex;
  flex-direction: column;
  transition: transform var(--transition), box-shadow var(--transition);
}

.blog-card:hover {
  transform: translateY(-8px);
  box-shadow: var(--shadow-soft);
}

.blog-card__media {
  aspect-ratio: 16 / 9;
  overflow: hidden;
}

.blog-card__media img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  transition: transform 0.8s var(--transition);
}

.blog-card:hover .blog-card__media img {
  transform: scale(1.07);
}

.blog-card__body {
  padding: 26px;
  display: flex;
  flex-direction: column;
  flex-grow: 1;
}

.blog-card__date {
  font-size: 0.78rem;
  letter-spacing: 0.16em;
  text-transform: uppercase;
  color: var(--color-teal);
  margin-bottom: 10px;
}

.site-footer {
  background-color: #080a0e;
  border-top: 1px solid var(--color-line);
  padding: 80px 0 30px;
}

.site-footer__title {
  font-family: var(--font-display);
  font-size: 1.15rem;
  letter-spacing: 0.12em;
  text-transform: uppercase;
  color: var(--color-white);
  margin-bottom: 20px;
}

.site-footer__list {
  list-style: none;
  padding: 0;
  margin: 0;
}

.site-footer__list li {
  margin-bottom: 11px;
}

.site-footer__list a,
.site-footer__list span {
  color: var(--color-text-dim);
  font-size: 0.94rem;
}

.site-footer__list a:hover {
  color: var(--color-accent);
}

.site-footer__bottom {
  margin-top: 54px;
  padding-top: 24px;
  border-top: 1px solid var(--color-line);
  display: flex;
  flex-wrap: wrap;
  justify-content: space-between;
  gap: 14px;
  font-size: 0.84rem;
  color: var(--color-text-dim);
}

.site-footer__socials {
  display: flex;
  gap: 12px;
  margin-top: 20px;
}

.site-footer__socials a {
  width: 40px;
  height: 40px;
  display: grid;
  place-items: center;
  border-radius: 50%;
  border: 1px solid var(--color-line);
  color: var(--color-text);
}

.site-footer__socials a:hover {
  background: var(--color-accent);
  color: #0b0d12;
  border-color: var(--color-accent);
}

.to-top {
  position: fixed;
  right: 24px;
  bottom: 24px;
  z-index: 1050;
  width: 48px;
  height: 48px;
  border-radius: 50%;
  border: 0;
  background: var(--color-accent);
  color: #0b0d12;
  font-size: 1rem;
  display: grid;
  place-items: center;
  cursor: pointer;
  opacity: 0;
  pointer-events: none;
  transform: translateY(16px);
  transition: opacity var(--transition), transform var(--transition);
}

.to-top.is-visible {
  opacity: 1;
  pointer-events: auto;
  transform: translateY(0);
}

.cookie-banner {
  position: fixed;
  left: 20px;
  right: 20px;
  bottom: 20px;
  z-index: 1090;
  background: rgba(18, 21, 29, 0.98);
  border: 1px solid var(--color-line);
  border-radius: var(--radius-md);
  box-shadow: var(--shadow-strong);
  padding: 24px 26px;
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 20px;
  transform: translateY(30px);
  opacity: 0;
  transition: transform var(--transition), opacity var(--transition);
}

.cookie-banner.is-visible {
  transform: translateY(0);
  opacity: 1;
}

.cookie-banner__text {
  flex: 1 1 320px;
  margin: 0;
  font-size: 0.94rem;
}

.cookie-banner__actions {
  display: flex;
  flex-wrap: wrap;
  gap: 12px;
}

.cookie-banner__actions .btn {
  padding: 12px 24px;
}

.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;
}

@media (max-width: 1199px) {
  .site-header__meta {
    display: none;
  }
}

@media (max-width: 991px) {
  .site-nav {
    display: none;
  }

  .nav-toggle {
    display: inline-grid;
    place-items: center;
  }

  .section {
    padding: 72px 0;
  }

  .hero {
    min-height: auto;
  }

  .hero-slider .carousel-item {
    min-height: 88vh;
  }
}

@media (max-width: 767px) {
  body {
    font-size: 0.96rem;
  }

  .section {
    padding: 58px 0;
  }

  .process-step {
    padding: 24px 22px 24px 22px;
  }

  .process-step__num {
    position: static;
    transform: none;
    display: block;
    margin-bottom: 8px;
  }

  .form-panel,
  .newsletter {
    padding: 28px 22px;
  }

  .cookie-banner {
    left: 12px;
    right: 12px;
    bottom: 12px;
    padding: 20px;
  }

  .map-frame iframe {
    height: 320px;
  }
}

@media (prefers-reduced-motion: reduce) {
  * {
    animation-duration: 0.001ms !important;
    transition-duration: 0.001ms !important;
  }

  html {
    scroll-behavior: auto;
  }
}
/* ===== Mobile header / hero overlap fix ===== */
/* Ensure the collapsed navigation is hidden on small screens even if the
   external Bootstrap stylesheet has not loaded yet, so the fixed header
   keeps a predictable height. */
@media (max-width: 991px) {
  .site-header .navbar-collapse.collapse:not(.show) {
    display: none !important;
  }

  .site-header .navbar-collapse.collapse.show {
    display: block !important;
  }

  /* Push the page content below the fixed header so the hero section is
     no longer covered by the header on mobile. */
  body {
    padding-top: 104px;
  }
}

/* Fix: prevent the header from overlapping the page hero on mobile/tablet.
   On small screens the header is placed back into the document flow so it can
   never cover the hero section, and the hero's top padding is reduced to the
   available space instead of reserving room for a fixed header. */
@media (max-width: 991.98px) {
  .site-header,
  .site-header.is-stuck {
    position: static;
  }

  .hero,
  .hero--page {
    padding-top: 56px;
  }
}

/* ==========================================================================
   QA overrides: mobile header overlap + dropdown toggle normalization
   Appended rules only, original styles above are untouched.
   ========================================================================== */

/* The "Diensten" nav dropdown is now a <button> (no placeholder href="#"),
   keep its look identical to the other nav links. */
button.nav-link.site-nav__link {
  background: none;
  border: 0;
  cursor: pointer;
  font-family: var(--font-body);
  font-size: 0.86rem;
  font-weight: 600;
  letter-spacing: 0.08em;
  text-transform: uppercase;
}

/* On mobile/tablet the header must not overlay the hero:
   take it out of the fixed layer so it reserves real space in the flow. */
@media (max-width: 991.98px) {
  #inject-header,
  #inject-header .site-header,
  .site-header {
    position: static;
    top: auto;
    left: auto;
    right: auto;
    width: 100%;
  }

  /* Keep the collapsed menu collapsed even if the Bootstrap CSS fails to
     load, so the header keeps a small, predictable height. */
  .site-header #primaryNavigation {
    display: none;
  }

  .site-header #primaryNavigation.show,
  .site-header #primaryNavigation.collapsing {
    display: block;
  }

  /* The header is no longer fixed on small screens, so the hero does not
     need the large fixed-header offset any more. */
  .hero {
    min-height: auto;
    padding-top: 48px;
  }

  .hero--page {
    padding-top: 48px;
  }
}

/* ==========================================================================
   QA fix pass: robust mobile header overlap neutralisation.
   The collapse/meta visibility below must not depend on the external
   Bootstrap stylesheet (d-none / collapse utilities), otherwise the header
   grows tall and its fixed position covers the hero at 360px.
   ========================================================================== */
@media (max-width: 991.98px) {
  #inject-header,
  #inject-header .site-header,
  header.site-header {
    position: static !important;
    top: auto !important;
    left: auto !important;
    right: auto !important;
    width: 100%;
  }

  body {
    padding-top: 0 !important;
  }

  /* Hide the desktop contact meta row regardless of Bootstrap availability. */
  .site-header .site-header__meta,
  .site-header__meta {
    display: none !important;
  }

  /* Keep the collapsed navigation closed on small screens regardless of
     whether the external Bootstrap stylesheet has loaded. */
  .site-header #primaryNavigation,
  .site-header .navbar-collapse {
    display: none !important;
    position: static;
  }

  .site-header #primaryNavigation.show,
  .site-header .navbar-collapse.show,
  .site-header .navbar-collapse.collapsing {
    display: block !important;
  }

  /* Header is in the document flow again, so the hero needs only a small
     internal top padding and no reserved fixed-header offset. */
  .hero,
  .hero--page {
    min-height: auto !important;
    padding-top: 32px !important;
  }
}

/* ==========================================================================
   QA fix pass 2: definitive mobile header / hero overlap neutralisation.
   At 360px the header (measured ~220px tall) still covers the top of the
   page hero. Reserving that space on the page body guarantees the hero
   never starts underneath the header, regardless of whether the header is
   rendered fixed or in normal flow.
   ========================================================================== */
@media (max-width: 991.98px) {
  body {
    padding-top: 224px !important;
  }

  .hero,
  .hero--page {
    margin-top: 0 !important;
  }
}

/* ==========================================================================
   QA fix pass 2: definitively neutralise the fixed-header/hero overlap on
   small screens (<=991.98px). The header is placed back into the normal
   document flow with very high specificity so it can never cover the hero,
   regardless of whether the external Bootstrap stylesheet loaded.
   ========================================================================== */
@media (max-width: 991.98px) {
  html body {
    padding-top: 0 !important;
  }

  #inject-header,
  #inject-header > .site-header,
  body > #inject-header .site-header,
  header.site-header,
  .site-header,
  .site-header.is-stuck {
    position: relative !important;
    top: auto !important;
    left: auto !important;
    right: auto !important;
    bottom: auto !important;
    width: 100% !important;
    min-height: 0 !important;
    z-index: 1030 !important;
  }

  /* Keep the desktop contact meta row hidden on small screens. */
  .site-header .site-header__meta,
  .site-header__meta {
    display: none !important;
  }

  /* Keep the collapsed navigation closed on small screens, independent of
     the external Bootstrap utilities. */
  .site-header .navbar-collapse,
  .site-header #primaryNavigation {
    display: none !important;
  }

  .site-header .navbar-collapse.show,
  .site-header .navbar-collapse.collapsing,
  .site-header #primaryNavigation.show,
  .site-header #primaryNavigation.collapsing {
    display: block !important;
  }

  /* Header now reserves real space, so the hero only needs a small internal
     top padding and no reserved fixed-header offset. */
  .hero,
  .hero--page {
    min-height: auto !important;
    padding-top: 40px !important;
  }
}

/* ==========================================================================
   QA fix pass 3: guarantee the fixed header never covers the hero on mobile.
   The header is taken out of the fixed layer and reserved via body padding so
   the hero always starts below the header at 360px, independent of the
   external Bootstrap stylesheet.
   ========================================================================== */
@media (max-width: 991.98px) {
  html body {
    padding-top: 0 !important;
  }

  #inject-header .site-header,
  header.site-header,
  .site-header,
  .site-header.is-stuck {
    position: static !important;
    top: auto !important;
    bottom: auto !important;
    left: auto !important;
    right: auto !important;
    width: 100% !important;
    z-index: 1030 !important;
  }

  /* Keep the collapsed navigation hidden so the header stays compact. */
  .site-header .navbar-collapse:not(.show),
  .site-header #primaryNavigation:not(.show) {
    display: none !important;
  }

  .site-header .site-header__meta,
  .site-header__meta {
    display: none !important;
  }

  /* Header now occupies real space in the flow; give the hero a normal
     internal top padding only. */
  .hero,
  .hero--page {
    min-height: auto !important;
    margin-top: 0 !important;
    padding-top: 40px !important;
  }
}

/* ==========================================================================
   QA final pass: guarantee the header never covers the hero on small screens.
   The header is forced into the normal document flow at <=991.98px so the
   hero always starts below it, regardless of the external Bootstrap CSS.
   ========================================================================== */
@media (max-width: 991.98px) {
  html,
  body {
    padding-top: 0 !important;
    margin-top: 0 !important;
  }

  #inject-header,
  #inject-header .site-header,
  header.site-header,
  .site-header,
  .site-header.is-stuck {
    position: static !important;
    top: auto !important;
    left: auto !important;
    right: auto !important;
    bottom: auto !important;
    width: 100% !important;
    height: auto !important;
    max-height: none !important;
  }

  #inject-header {
    display: block !important;
  }

  /* Desktop contact meta and the collapsed navigation must not add height. */
  .site-header .site-header__meta,
  .site-header__meta {
    display: none !important;
  }

  .site-header .navbar-collapse,
  .site-header #primaryNavigation,
  .site-header .navbar-collapse.collapse:not(.show) {
    display: none !important;
  }

  .site-header .navbar-collapse.show,
  .site-header .navbar-collapse.collapsing,
  .site-header #primaryNavigation.show,
  .site-header #primaryNavigation.collapsing {
    display: block !important;
  }

  /* Header now occupies real space in the flow, so the hero only needs a
     modest internal top padding and must not be pulled upward. */
  .hero,
  .hero--page {
    min-height: auto !important;
    margin-top: 0 !important;
    padding-top: 40px !important;
  }
}

/* ==========================================================================
   QA final pass: mobile fixed-header / hero overlap.
   The header is kept out of the fixed layer at mobile widths (so it reserves
   real space in the document flow) and the page body reserves an equivalent
   offset. Both belts-and-braces so the page hero can never sit underneath
   the header at 360px, whether or not the external Bootstrap stylesheet is
   available.
   ========================================================================== */
@media (max-width: 991.98px) {
  /* Highest-specificity rule so the header follows normal flow. */
  html body #inject-header > .site-header,
  html body #inject-header > header.site-header,
  html body > #inject-header .site-header {
    position: relative !important;
    top: auto !important;
    left: auto !important;
    right: auto !important;
    bottom: auto !important;
    width: 100% !important;
    z-index: 1030 !important;
  }

  /* Make sure the optional, tall header parts stay hidden at 360px. */
  html body #inject-header .site-header .site-header__meta {
    display: none !important;
  }

  html body #inject-header .site-header .navbar-collapse,
  html body #inject-header .site-header #primaryNavigation {
    display: none !important;
  }

  html body #inject-header .site-header .navbar-collapse.show,
  html body #inject-header .site-header #primaryNavigation.show {
    display: block !important;
  }

  /* The header is in flow again: no artificial body offset is required and
     the hero only needs a small internal top padding. */
  html body {
    padding-top: 0 !important;
  }

  .hero,
  .hero--page {
    min-height: auto !important;
    padding-top: 40px !important;
  }
}

/* ==========================================================================
   QA definitive fix: mobile fixed-header / hero overlap.
   The fixed header measured ~220px tall at 360px and covered the hero
   (hero top = 0px). We reserve an equal amount of space on the page body and
   keep the header pinned to the top of the viewport, so the hero content can
   never sit underneath the header. Highest-specificity + last-in-file so it
   wins over all earlier mobile header overrides.
   ========================================================================== */
@media (max-width: 991.98px) {
  html body {
    padding-top: 224px !important;
  }

  html body #inject-header,
  html body #inject-header > .site-header,
  html body header.site-header,
  html body .site-header,
  html body .site-header.is-stuck {
    position: static !important;
    top: auto !important;
    left: auto !important;
    right: auto !important;
    bottom: auto !important;
    width: 100% !important;
  }

  /* Keep the header compact: hide the desktop contact meta row and the
     collapsed navigation regardless of the external Bootstrap stylesheet. */
  html body #inject-header .site-header .site-header__meta {
    display: none !important;
  }

  html body #inject-header .site-header .navbar-collapse:not(.show),
  html body #inject-header .site-header #primaryNavigation:not(.show) {
    display: none !important;
  }

  html body #inject-header .site-header .navbar-collapse.show,
  html body #inject-header .site-header #primaryNavigation.show {
    display: block !important;
  }

  html body .hero,
  html body .hero--page {
    margin-top: 0 !important;
    min-height: auto !important;
  }
}