@import url('https://cdnjs.cloudflare.com/ajax/libs/font-awesome/6.3.0/css/all.min.css');
@import url('https://fonts.googleapis.com/css2?family=Poppins:ital,wght@0,100;0,400;0,500;0,600;0,700;1,100;1,400;1,500;1,600;1,700&display=swap');

/* #region GLOBAL STYLES */

:root {
    --bordeaux: #66011a;
    /* --logoBordeaux: #883946; */
    /* --navy: #1B263B; */
    --logoNavy: #111235;
    /* --beige: #F5E9E2; */
    --logoBeige: #f9f3ea;
    /* --neon: #39FF14; */
    --logoNeon: #a6f753;
    --textBG: rgba(245, 241, 235, 0.1);
    --textShadow: rgba(245, 241, 235, 0.3);
}

* {
    margin: 0;
    padding: 0;
    box-sizing: border-box;
}

html, body {
  height: 100%;
  background: linear-gradient(135deg, var(--logoNavy), var(--bordeaux));
  background-repeat: no-repeat;
  background-attachment: fixed;
  background-size: cover;
}

html {
    font-size: 18px;
    color: var(--logoBeige);
}

body {
    font-family: 'Poppins', sans-serif;
    font-weight: 400;
    text-align: center;
    display: flex;
    flex-direction: column;
    min-height: 100vh;
}

main {
    flex: 1;
}

section {
    margin: 60px 0px;
}

h1,
.behavelikeh1 {
  font-size: clamp(2.3rem, 3.3vw, 4.2rem);
  margin-bottom: 1.5rem;
  line-height: 1.15;
}

h2,
.behavelikeh2 {
  font-size: clamp(1.8rem, 2.6vw, 3.3rem);
  line-height: 1.2;
  margin-bottom: 1.2rem;
}

h3,
.behavelikeh3 {
  font-size: clamp(1.4rem, 2.0vw, 2.6rem);
  line-height: 1.25;
  margin-bottom: 1rem;
}

h4,
.behavelikeh4 {
  font-size: clamp(1.2rem, 1.6vw, 2.0rem);
  line-height: 1.3;
}

.strong {
    font-weight: 600;
}

.container {
    margin: 0 rem;
}

/* #endregion */

/* #region HEADER */

header {
    position: sticky;
    top: 0;
    z-index: 1000;
    display: block;
}

/* NAVIGATION - my-nav.js */

nav {
    display: flex;
    align-items: center;
    justify-content: space-between;
    padding: 20px 40px;
    transition: background-color .2s ease, backdrop-filter .2s ease;
}

.logo {
    display: flex;
    align-items: center;
    text-decoration: none;
    color: inherit;
    flex-direction: column;
    font-size: 10px;
    line-height: 0;
}

/* Hamburger button (shown only on small screens) */
.nav-toggle {
    display: none;
    background: var(--textBG);
    border: 0;
    border-radius: 5px;
    box-shadow: 1px 1px 2px var(--textShadow);
    padding: 8px;
    cursor: pointer;
    gap: 5px;
    flex-direction: column;
}

/* 3-line icon using pure CSS */
.nav-toggle .bar {
    display: block;
    width: 24px;
    height: 2px;
    background: var(--logoBeige);
}

/* --- A11y helper for the button label --- */
.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;
}

.nav-links {
    display: flex;
    gap: 60px;
    list-style-type: none;
}

.nav-links a {
    text-decoration: none;
    color: var(--logoBeige);
    font-weight: 400;
    font-size: 18px;
}

.nav-links a:hover {
    color: var(--logoNeon);
    /* text-decoration: underline; */
}

.nav-links a.active {
  font-weight: 600;
  position: relative;
}

.nav-links a.active::after {
  content: '';
  position: absolute;
  left: 0;
  /* bottom: -4px; */
  width: 100%;
  height: 2px;
  background-color: var(--logoNeon);
}

@media (max-width: 768px) {
    .nav-toggle {
        display: inline-flex;
    }

    /* Stack the links in a dropdown panel */
    .nav-links {
        position: absolute;
        top: 100%;
        left: 0;
        right: 0;
        display: grid;
        gap: 8px;
        background: var(--logoNavy);
        box-shadow: 0 2px 24px rgba(17, 18, 53, 0.8);
        border-top: 1px solid var(--logoBeige);
        padding: 16px 40px;

        /* collapsed state */
        max-height: 0;
        overflow: hidden;
        opacity: 0;
        pointer-events: none;
        transition: max-height .2s ease, opacity .2s ease;
    }

    /* opened by JS toggle */
    .nav-links.open {
        max-height: 50vh;
        opacity: 1;
        pointer-events: auto;
    }
}

/* #endregion */

/* #region INDEX/HOME */

.home-page,
.about-page {
  flex: 0 0 auto;
  width: 100%;
  overflow: hidden;
}

.home-page + footer,
.about-page + footer { flex-shrink: 0; }

.home-eyebrow,
.about-eyebrow {
  margin-bottom: 1rem;
  color: var(--logoNeon);
  font-size: .76rem;
  font-weight: 600;
  letter-spacing: .14em;
  text-transform: uppercase;
}

.home-hero {
  display: grid;
  grid-template-columns: minmax(0, 1.1fr) minmax(420px, .9fr);
  gap: clamp(3rem, 7vw, 8rem);
  align-items: center;
  width: min(1450px, calc(100% - 4rem));
  min-height: calc(100vh - 100px);
  margin: 0 auto;
  padding: 4rem 0 6rem;
  text-align: left;
}

.home-hero h1 {
  margin-bottom: 1.75rem;
  font-size: clamp(2.8rem, 5.4vw, 6rem);
  line-height: 1.05;
}

.home-hero h1 span { color: var(--logoNeon); font-style: italic; font-weight: 400; }

.home-lead {
  max-width: 720px;
  color: rgba(249, 243, 234, .78);
  font-size: clamp(1rem, 1.35vw, 1.2rem);
  line-height: 1.8;
}

.home-actions,
.about-cta__actions { display: flex; flex-wrap: wrap; gap: 1.25rem; align-items: center; margin-top: 2.2rem; }

.home-button,
.about-button {
  display: inline-flex;
  gap: .9rem;
  align-items: center;
  justify-content: center;
  min-height: 3.2rem;
  color: var(--logoBeige);
  font-size: .82rem;
  font-weight: 600;
  text-decoration: none;
  transition: all .2s ease;
}

.home-button--primary,
.about-button--primary {
  padding: .8rem 1.35rem;
  border: 1px solid var(--logoNeon);
  border-radius: 7px;
  background: var(--logoNeon);
  color: var(--logoNavy);
  font-weight: 700;
}

.home-button--primary:hover,
.about-button--primary:hover { background: transparent; color: var(--logoNeon); box-shadow: 0 0 25px rgba(166, 247, 83, .17); transform: translateY(-2px); }

.home-button--link,
.about-button--link { border-bottom: 1px solid rgba(249, 243, 234, .4); }
.home-button--link:hover,
.about-button--link:hover { border-color: var(--logoNeon); color: var(--logoNeon); }

.home-hero__visual {
  position: relative;
  display: grid;
  min-height: 590px;
  place-items: center;
}

.home-hero__visual::before {
  content: '';
  position: absolute;
  inset: 15% 10%;
  border: 1px solid rgba(249, 243, 234, .08);
  border-radius: 38px 130px 38px 130px;
  background:
    linear-gradient(145deg, rgba(17, 18, 53, .98), rgba(17, 18, 53, .72)),
    var(--logoNavy);
  box-shadow: 0 28px 80px rgba(7, 7, 27, .38), 0 0 70px rgba(166, 247, 83, .04);
  transform: rotate(-5deg);
}

.home-hero__visual img { position: relative; z-index: 2; width: min(72%, 410px); height: auto; filter: drop-shadow(0 22px 35px rgba(7, 7, 27, .35)); }

.home-orbit {
  position: absolute;
  border: 1px solid rgba(249, 243, 234, .1);
  border-radius: 45px 150px 45px 150px;
}

.home-orbit--outer {
  inset: 4% 1%;
  transform: rotate(4deg);
}

.home-orbit--inner {
  inset: 19% 14%;
  border-color: rgba(166, 247, 83, .24);
  border-radius: 120px 35px 120px 35px;
  transform: rotate(-2deg);
}

.home-visual-note {
  position: absolute;
  z-index: 3;
  display: flex;
  gap: .7rem;
  align-items: center;
  padding: .65rem .9rem;
  border: 1px solid rgba(249, 243, 234, .14);
  border-radius: 999px;
  background: rgba(17, 18, 53, .78);
  font-size: .72rem;
  backdrop-filter: blur(10px);
}

.home-visual-note span { color: var(--logoNeon); }
.home-visual-note--top { top: 17%; right: 0; }
.home-visual-note--bottom { bottom: 17%; left: 0; }

.home-services,
.home-process,
.home-cta {
  width: min(1300px, calc(100% - 4rem));
  margin: 0 auto clamp(7rem, 12vw, 11rem);
}

.home-section-heading {
  display: grid;
  grid-template-columns: 1.15fr .85fr;
  gap: 4rem;
  align-items: end;
  margin-bottom: 4rem;
  text-align: left;
}

.home-section-heading h2 { max-width: 780px; margin: 0; }
.home-section-heading > p { color: rgba(249, 243, 234, .68); line-height: 1.75; }

.home-service-list { border-top: 1px solid rgba(249, 243, 234, .16); }

.home-service {
  display: grid;
  grid-template-columns: 3rem 4.5rem 1fr 3rem;
  gap: 2rem;
  align-items: center;
  padding: 2rem 1rem;
  border-bottom: 1px solid rgba(249, 243, 234, .16);
  color: var(--logoBeige);
  text-align: left;
  text-decoration: none;
  transition: background .25s ease, padding-left .25s ease;
}

.home-service:hover { padding-left: 1.5rem; background: rgba(17, 18, 53, .38); }
.home-service__number { color: rgba(249, 243, 234, .3); font-size: .75rem; }
.home-service__icon { display: grid; width: 3.4rem; height: 3.4rem; place-items: center; border: 1px solid rgba(166, 247, 83, .38); border-radius: 50%; color: var(--logoNeon); }
.home-service__text { display: grid; gap: .25rem; }
.home-service__text strong { font-size: clamp(1rem, 1.5vw, 1.3rem); }
.home-service__text small { color: rgba(249, 243, 234, .62); font-size: .8rem; }
.home-service__arrow { justify-self: end; color: var(--logoNeon); transition: transform .2s ease; }
.home-service:hover .home-service__arrow { transform: translateX(.4rem); }

.home-process {
  display: grid;
  grid-template-columns: minmax(0, .8fr) minmax(480px, 1.2fr);
  gap: clamp(3rem, 8vw, 8rem);
  align-items: start;
  text-align: left;
}

.home-process__intro { position: sticky; top: 130px; }
.home-process__intro > p:last-child { color: rgba(249, 243, 234, .68); line-height: 1.75; }
.home-process__steps { border-top: 1px solid rgba(249, 243, 234, .16); list-style: none; }
.home-process__steps li { display: grid; grid-template-columns: 3rem 1fr; gap: 1.25rem; padding: 1.8rem 0; border-bottom: 1px solid rgba(249, 243, 234, .16); }
.home-process__steps span { color: var(--logoNeon); font-size: .75rem; font-weight: 600; }
.home-process__steps h3 { margin-bottom: .4rem; font-size: 1.1rem; }
.home-process__steps p { color: rgba(249, 243, 234, .64); font-size: .82rem; line-height: 1.7; }

.home-cta {
  position: relative;
  padding: clamp(3rem, 8vw, 7rem);
  overflow: hidden;
  border: 1px solid rgba(166, 247, 83, .23);
  border-radius: 14px;
  background: rgba(17, 18, 53, .58);
}

.home-cta::after { content: ''; position: absolute; right: -10rem; bottom: -14rem; width: 30rem; height: 30rem; border: 1px solid rgba(166, 247, 83, .15); border-radius: 50%; box-shadow: 0 0 80px rgba(166, 247, 83, .05); }
.home-cta h2 { position: relative; z-index: 1; max-width: 850px; margin-right: auto; margin-left: auto; }
.home-cta .home-button { position: relative; z-index: 1; margin-top: 1rem; }

@media (max-width: 960px) {
  .home-hero { grid-template-columns: 1fr; width: min(780px, calc(100% - 3rem)); padding-top: 5rem; }
  .home-hero__visual { min-height: 480px; }
  .home-section-heading,
  .home-process { grid-template-columns: 1fr; gap: 2rem; }
  .home-process__intro { position: static; }
}

@media (max-width: 600px) {
  .home-services,
  .home-process,
  .home-cta { width: calc(100% - 2rem); }
  .home-hero { width: calc(100% - 2rem); min-height: auto; }
  .home-hero__visual { min-height: 380px; }
  .home-service { grid-template-columns: 2.7rem 1fr 1.5rem; gap: 1rem; padding-right: .5rem; padding-left: .5rem; }
  .home-service__number { display: none; }
  .home-service__icon { width: 2.7rem; height: 2.7rem; }
  .home-actions { align-items: stretch; flex-direction: column; }
  .home-button { width: 100%; }
}

/* #endregion */

/* #region ABOUT ME */

.about-intro {
  width: min(1200px, calc(100% - 4rem));
  margin: clamp(4rem, 10vw, 9rem) auto clamp(6rem, 11vw, 10rem);
  text-align: left;
}

.about-intro h1 { max-width: 1000px; font-size: clamp(2.7rem, 5.5vw, 5.8rem); line-height: 1.06; }
.about-intro h1 span { color: var(--logoNeon); font-style: italic; font-weight: 400; }
.about-intro > p:last-child { max-width: 750px; margin-top: 2rem; color: rgba(249, 243, 234, .72); font-size: 1.05rem; line-height: 1.8; }

.about-story {
  display: grid;
  grid-template-columns: minmax(380px, .85fr) minmax(0, 1.15fr);
  gap: clamp(3rem, 8vw, 8rem);
  align-items: center;
  width: min(1350px, calc(100% - 4rem));
  margin: 0 auto clamp(7rem, 12vw, 11rem);
  text-align: left;
}

.about-story__image { position: relative; }
.about-story__image::before { content: ''; position: absolute; z-index: -1; top: -1.5rem; left: -1.5rem; width: 55%; height: 55%; border-top: 1px solid var(--logoNeon); border-left: 1px solid var(--logoNeon); opacity: .55; }
.about-story__image img { display: block; width: 100%; min-height: 610px; max-height: 760px; border-radius: 10px; box-shadow: 0 30px 80px rgba(7, 7, 27, .35); object-fit: cover; }
.about-story__caption { position: absolute; right: -1.5rem; bottom: 1.5rem; display: grid; gap: .1rem; min-width: 160px; padding: 1rem 1.2rem; border: 1px solid rgba(249, 243, 234, .15); border-radius: 8px; background: rgba(17, 18, 53, .86); backdrop-filter: blur(12px); }
.about-story__caption span { color: var(--logoNeon); font-size: .8rem; font-weight: 600; }
.about-story__caption small { color: rgba(249, 243, 234, .58); font-size: .65rem; }

.about-story__content h2 { margin-bottom: 1.5rem; }
.about-story__content > p:not(.about-eyebrow) { margin-bottom: 1.2rem; color: rgba(249, 243, 234, .7); line-height: 1.8; }
.about-story__content .about-story__lead { padding-left: 1.25rem; border-left: 2px solid var(--logoNeon); color: var(--logoBeige); font-size: 1.05rem; }

.about-vision-new {
  position: relative;
  display: grid;
  grid-template-columns: minmax(0, 1.1fr) minmax(320px, .9fr);
  gap: clamp(3rem, 8vw, 8rem);
  align-items: center;
  width: min(1250px, calc(100% - 4rem));
  margin: 0 auto clamp(7rem, 12vw, 11rem);
  padding: clamp(3rem, 7vw, 6rem);
  overflow: hidden;
  border: 1px solid rgba(249, 243, 234, .13);
  border-radius: 14px;
  background: rgba(17, 18, 53, .52);
  text-align: left;
}

.about-vision-new__mark { position: absolute; top: -4rem; left: 1rem; color: rgba(166, 247, 83, .08); font-family: Georgia, serif; font-size: 20rem; line-height: 1; }
.about-vision-new > div { position: relative; z-index: 1; }
.about-vision-new > div > p:last-child { color: rgba(249, 243, 234, .68); line-height: 1.8; }
.about-vision-new__statement { position: relative; z-index: 1; padding-left: 2rem; border-left: 1px solid rgba(166, 247, 83, .45); color: var(--logoBeige); font-size: clamp(1.05rem, 1.7vw, 1.35rem); font-style: italic; line-height: 1.75; }

.about-values {
  display: grid;
  grid-template-columns: minmax(0, .75fr) minmax(500px, 1.25fr);
  gap: clamp(3rem, 8vw, 8rem);
  width: min(1300px, calc(100% - 4rem));
  margin: 0 auto clamp(7rem, 12vw, 11rem);
  text-align: left;
}

.about-values__heading { position: sticky; top: 130px; align-self: start; }
.about-values__list { border-top: 1px solid rgba(249, 243, 234, .16); }
.about-value { display: grid; grid-template-columns: 3rem minmax(150px, .55fr) 1fr; gap: 1.5rem; align-items: start; padding: 1.8rem 0; border-bottom: 1px solid rgba(249, 243, 234, .16); }
.about-value > span { color: var(--logoNeon); font-size: .72rem; font-weight: 600; }
.about-value h3 { margin: 0; font-size: 1.05rem; }
.about-value p { color: rgba(249, 243, 234, .64); font-size: .8rem; line-height: 1.7; }

.about-cta {
  display: grid;
  grid-template-columns: 1fr auto;
  gap: 3rem;
  align-items: center;
  width: min(1200px, calc(100% - 4rem));
  margin: 0 auto clamp(6rem, 10vw, 9rem);
  padding: clamp(2.5rem, 5vw, 4.5rem);
  border-top: 1px solid rgba(166, 247, 83, .38);
  border-bottom: 1px solid rgba(249, 243, 234, .14);
  text-align: left;
}

.about-cta h2 { margin: 0; }
.about-cta__actions { justify-content: flex-end; margin: 0; }

@media (max-width: 950px) {
  .about-story,
  .about-vision-new,
  .about-values,
  .about-cta { grid-template-columns: 1fr; }
  .about-story { width: min(760px, calc(100% - 3rem)); }
  .about-story__image { max-width: 580px; }
  .about-values__heading { position: static; }
  .about-cta__actions { justify-content: flex-start; }
}

@media (max-width: 600px) {
  .about-intro,
  .about-story,
  .about-vision-new,
  .about-values,
  .about-cta { width: calc(100% - 2rem); }
  .about-story__image img { min-height: 460px; }
  .about-story__caption { right: .75rem; }
  .about-vision-new { padding: 2.5rem 1.3rem; }
  .about-value { grid-template-columns: 2.3rem 1fr; gap: .8rem; }
  .about-value p { grid-column: 2; }
  .about-cta__actions { align-items: stretch; flex-direction: column; }
  .about-button { width: 100%; }
}

/* #endregion */

/* #region SERVICES */

.services-page {
  flex: 0 0 auto;
  width: 100%;
  overflow: hidden;
}

.services-page + footer { flex-shrink: 0; }

.services-eyebrow {
  margin-bottom: 1rem;
  color: var(--logoNeon);
  font-size: .76rem;
  font-weight: 600;
  letter-spacing: .14em;
  text-transform: uppercase;
}

.services-hero {
  position: relative;
  width: min(1120px, calc(100% - 4rem));
  margin: clamp(4rem, 10vw, 9rem) auto clamp(6rem, 12vw, 11rem);
  text-align: left;
}

.services-hero::after {
  content: 'JOOLS';
  position: absolute;
  z-index: -1;
  top: 50%;
  right: -18%;
  color: rgba(249, 243, 234, .025);
  font-size: clamp(8rem, 22vw, 20rem);
  font-weight: 700;
  line-height: 1;
  transform: translateY(-50%);
}

.services-hero h1 {
  max-width: 900px;
  margin-bottom: 1.75rem;
  font-size: clamp(2.6rem, 5.6vw, 6rem);
}

.services-hero h1 span { color: var(--logoNeon); font-style: italic; font-weight: 400; }

.services-lead {
  max-width: 760px;
  margin-bottom: 2rem;
  color: rgba(249, 243, 234, .78);
  font-size: clamp(1rem, 1.4vw, 1.2rem);
  line-height: 1.8;
}

.services-text-link {
  display: inline-flex;
  gap: .8rem;
  align-items: center;
  padding-bottom: .35rem;
  border-bottom: 1px solid var(--logoNeon);
  color: var(--logoBeige);
  font-weight: 600;
  text-decoration: none;
}

.services-text-link i { color: var(--logoNeon); transition: transform .2s ease; }
.services-text-link:hover { color: var(--logoNeon); }
.services-text-link:hover i { transform: translateX(.35rem); }

.service-feature {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: clamp(1.5rem, 3vw, 3rem);
  align-items: stretch;
  width: min(1400px, calc(100% - 4rem));
  margin: 0 auto clamp(7rem, 12vw, 11rem);
}

.service-feature--reverse .service-feature__image { grid-column: 2; grid-row: 1; }
.service-feature--reverse .service-feature__content { grid-column: 1; grid-row: 1; }

.service-feature__image {
  position: relative;
  min-height: 600px;
  overflow: hidden;
  border-radius: 12px;
  box-shadow: 0 25px 70px rgba(7, 7, 27, .35);
}

.service-feature__image::after {
  content: '';
  position: absolute;
  inset: 0;
  background: linear-gradient(to top, rgba(17, 18, 53, .42), transparent 50%);
}

.service-feature__image img {
  display: block;
  width: 100%;
  height: 100%;
  min-height: 600px;
  object-fit: cover;
}

.service-feature__number {
  position: absolute;
  z-index: 1;
  right: 1.5rem;
  bottom: .7rem;
  color: rgba(249, 243, 234, .85);
  font-size: clamp(4rem, 8vw, 7rem);
  font-weight: 600;
  line-height: 1;
}

.service-feature__content {
  position: relative;
  display: flex;
  flex-direction: column;
  justify-content: center;
  padding: clamp(2.5rem, 5vw, 5rem);
  border: 1px solid rgba(249, 243, 234, .14);
  border-radius: 12px;
  background: rgba(17, 18, 53, .68);
  box-shadow: 0 25px 70px rgba(7, 7, 27, .25);
  text-align: left;
  backdrop-filter: blur(16px);
}

.service-feature__content h2 { margin-bottom: 1.4rem; }

.service-feature__content > p:not(.services-eyebrow):not(.service-audience) {
  color: rgba(249, 243, 234, .78);
  line-height: 1.75;
}

.service-benefits {
  display: grid;
  gap: 1rem;
  margin: 2rem 0;
  list-style: none;
}

.service-benefits li { display: grid; grid-template-columns: 1.7rem 1fr; gap: .7rem; align-items: start; line-height: 1.55; }
.service-benefits i { display: grid; width: 1.35rem; height: 1.35rem; margin-top: .12rem; place-items: center; border-radius: 50%; background: rgba(166, 247, 83, .14); color: var(--logoNeon); font-size: .58rem; }
.service-benefits strong { color: var(--logoBeige); }

.service-audience {
  padding-top: 1.4rem;
  border-top: 1px solid rgba(249, 243, 234, .14);
  color: rgba(249, 243, 234, .65);
  font-size: .82rem;
  line-height: 1.65;
}

.service-audience span { color: var(--logoNeon); font-weight: 600; }

.services-extra {
  width: min(1300px, calc(100% - 4rem));
  margin: 0 auto clamp(7rem, 12vw, 11rem);
}

.services-extra__heading {
  display: grid;
  grid-template-columns: 1.15fr .85fr;
  gap: 4rem;
  align-items: end;
  margin-bottom: 4rem;
  text-align: left;
}

.services-extra__heading h2 { max-width: 750px; margin: 0; }
.services-extra__heading > p { color: rgba(249, 243, 234, .7); line-height: 1.75; }

.services-extra__list {
  border-top: 1px solid rgba(249, 243, 234, .16);
}

.extra-service {
  display: grid;
  grid-template-columns: 3rem 4.5rem minmax(190px, .7fr) minmax(300px, 1.3fr);
  gap: clamp(1rem, 3vw, 3rem);
  align-items: center;
  padding: 2rem 1rem;
  border-bottom: 1px solid rgba(249, 243, 234, .16);
  text-align: left;
  transition: background .25s ease, padding-left .25s ease, border-color .25s ease;
}

.extra-service:hover {
  padding-left: 1.5rem;
  border-color: rgba(166, 247, 83, .4);
  background: rgba(17, 18, 53, .38);
}

.extra-service__number {
  color: rgba(249, 243, 234, .32);
  font-size: .75rem;
  font-weight: 600;
}

.extra-service__icon {
  display: grid;
  width: 3.4rem;
  height: 3.4rem;
  place-items: center;
  border: 1px solid rgba(166, 247, 83, .38);
  border-radius: 50%;
  color: var(--logoNeon);
  font-size: 1.15rem;
}

.extra-service h3 {
  margin: 0;
  font-size: clamp(1rem, 1.5vw, 1.3rem);
}

.extra-service p {
  color: rgba(249, 243, 234, .68);
  font-size: .85rem;
  line-height: 1.7;
}

.services-cta {
  position: relative;
  width: min(1100px, calc(100% - 4rem));
  margin: 0 auto clamp(6rem, 10vw, 9rem);
  padding: clamp(3rem, 7vw, 6rem);
  overflow: hidden;
  border: 1px solid rgba(166, 247, 83, .25);
  border-radius: 14px;
  background: rgba(17, 18, 53, .62);
}

.services-cta::after { content: ''; position: absolute; right: -8rem; bottom: -11rem; width: 23rem; height: 23rem; border: 1px solid rgba(166, 247, 83, .16); border-radius: 50%; box-shadow: 0 0 80px rgba(166, 247, 83, .06); }
.services-cta h2 { position: relative; z-index: 1; }
.services-cta > p:not(.services-eyebrow) { position: relative; z-index: 1; max-width: 640px; margin: 0 auto 2rem; color: rgba(249, 243, 234, .72); line-height: 1.7; }

.services-cta__button {
  position: relative;
  z-index: 1;
  display: inline-flex;
  gap: 1rem;
  align-items: center;
  padding: .9rem 1.4rem;
  border: 1px solid var(--logoNeon);
  border-radius: 7px;
  background: var(--logoNeon);
  color: var(--logoNavy);
  font-size: .85rem;
  font-weight: 700;
  text-decoration: none;
  transition: all .2s ease;
}

.services-cta__button:hover { background: transparent; color: var(--logoNeon); box-shadow: 0 0 25px rgba(166, 247, 83, .18); transform: translateY(-2px); }

@media (max-width: 1000px) {
  .service-feature { grid-template-columns: 1fr; width: min(800px, calc(100% - 3rem)); }
  .service-feature--reverse .service-feature__image,
  .service-feature--reverse .service-feature__content { grid-column: 1; }
  .service-feature--reverse .service-feature__image { grid-row: 1; }
  .service-feature--reverse .service-feature__content { grid-row: 2; }
  .service-feature__image { min-height: 430px; }
  .service-feature__image img { min-height: 430px; }
  .services-extra__heading { grid-template-columns: 1fr; gap: 1.5rem; }

  .extra-service {
    grid-template-columns: 2.5rem 3.8rem 1fr;
  }

  .extra-service p {
    grid-column: 3;
  }
}

@media (max-width: 760px) {
  .services-hero,
  .services-extra,
  .services-cta { width: calc(100% - 2rem); }
  .services-hero { margin-top: 3rem; }
}

@media (max-width: 520px) {
  .service-feature { width: calc(100% - 2rem); }
  .service-feature__image,
  .service-feature__image img { min-height: 320px; }
  .service-feature__content { padding: 2rem 1.25rem; }
  .service-feature__number { font-size: 4rem; }

  .extra-service {
    grid-template-columns: 2.5rem 1fr;
    gap: .8rem 1rem;
    padding: 1.5rem .5rem;
  }

  .extra-service__icon {
    grid-column: 1;
    grid-row: 2 / span 2;
    width: 2.5rem;
    height: 2.5rem;
    font-size: .9rem;
  }

  .extra-service h3,
  .extra-service p {
    grid-column: 2;
  }
}

/* #endregion */

/* #region CONTACT */

.contact-page {
  /* Een lange contactpagina mag niet tot de resterende viewport-hoogte
     worden verkleind door de algemene main { flex: 1; }-regel. */
  flex: 0 0 auto;
  width: 100%;
  min-height: auto;
  overflow: hidden;
}

.contact-page + footer {
  position: relative;
  z-index: 1;
  flex-shrink: 0;
}

.contact-layout {
  position: relative;
  display: grid;
  grid-template-columns: minmax(0, .9fr) minmax(520px, 1.1fr);
  gap: clamp(3rem, 7vw, 8rem);
  align-items: center;
  width: min(1500px, calc(100% - 4rem));
  margin: clamp(3rem, 8vw, 7rem) auto;
  text-align: left;
}

.contact-layout::before {
  content: '';
  position: absolute;
  z-index: -1;
  top: 2%;
  left: -18%;
  width: 34rem;
  height: 34rem;
  border: 1px solid rgba(166, 247, 83, .18);
  border-radius: 50%;
  box-shadow: 0 0 100px rgba(166, 247, 83, .07), inset 0 0 80px rgba(249, 243, 234, .03);
}

.contact-eyebrow {
  margin-bottom: 1rem;
  color: var(--logoNeon);
  font-size: .76rem;
  font-weight: 600;
  letter-spacing: .14em;
  text-transform: uppercase;
}

.contact-introduction h1 { max-width: 10ch; }

.contact-introduction h1 span {
  color: var(--logoNeon);
  font-style: italic;
  font-weight: 400;
}

.contact-lead {
  max-width: 580px;
  color: rgba(249, 243, 234, .82);
  line-height: 1.8;
}

.contact-details {
  max-width: 560px;
  margin-top: 3rem;
  border-top: 1px solid rgba(249, 243, 234, .16);
}

.contact-detail {
  display: flex;
  gap: 1rem;
  align-items: center;
  padding: 1.1rem 0;
  border-bottom: 1px solid rgba(249, 243, 234, .16);
  color: var(--logoBeige);
  text-decoration: none;
  transition: color .2s ease, padding-left .2s ease;
}

a.contact-detail:hover { padding-left: .35rem; color: var(--logoNeon); }

.contact-detail__icon {
  display: grid;
  flex: 0 0 2.4rem;
  width: 2.4rem;
  height: 2.4rem;
  place-items: center;
  border: 1px solid rgba(166, 247, 83, .45);
  border-radius: 50%;
  color: var(--logoNeon);
}

.contact-detail small {
  display: block;
  margin-bottom: .1rem;
  color: rgba(249, 243, 234, .55);
  font-size: .7rem;
  letter-spacing: .1em;
  text-transform: uppercase;
}

.contact-card {
  position: relative;
  padding: clamp(2rem, 4vw, 4rem);
  border: 1px solid rgba(249, 243, 234, .16);
  border-radius: 18px;
  background: rgba(17, 18, 53, .72);
  box-shadow: 0 30px 90px rgba(7, 7, 27, .35);
  backdrop-filter: blur(18px);
}

.contact-card::before {
  content: '';
  position: absolute;
  top: -1px;
  right: 3rem;
  width: 7rem;
  height: 3px;
  background: var(--logoNeon);
  box-shadow: 0 0 20px rgba(166, 247, 83, .7);
}

.contact-card__heading {
  display: flex;
  gap: 1.5rem;
  align-items: flex-start;
  margin-bottom: 2.25rem;
}

.contact-card__heading > span { color: rgba(249, 243, 234, .24); font-size: .9rem; font-weight: 600; }
.contact-card__heading .contact-eyebrow { margin-bottom: .4rem; }
.contact-card__heading h2 { margin: 0; font-size: clamp(1.65rem, 2.3vw, 2.6rem); }

.contact-form { display: grid; gap: 1.4rem; }

.contact-form__row {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: 1.25rem;
}

.contact-field { min-width: 0; }

.contact-field label,
.contact-field legend {
  display: block;
  margin-bottom: .55rem;
  color: rgba(249, 243, 234, .82);
  font-size: .78rem;
  font-weight: 500;
}

.contact-field input,
.contact-field textarea {
  width: 100%;
  border: 1px solid rgba(249, 243, 234, .2);
  border-radius: 7px;
  outline: none;
  background: rgba(249, 243, 234, .055);
  color: var(--logoBeige);
  font: inherit;
  font-size: .9rem;
  transition: border-color .2s ease, box-shadow .2s ease, background .2s ease;
}

.contact-field input { height: 3.2rem; padding: 0 1rem; }
.contact-field textarea { min-height: 9rem; padding: .9rem 1rem; resize: vertical; }
.contact-field input::placeholder,
.contact-field textarea::placeholder { color: rgba(249, 243, 234, .38); }

.contact-field input:focus,
.contact-field textarea:focus {
  border-color: var(--logoNeon);
  background: rgba(249, 243, 234, .08);
  box-shadow: 0 0 0 3px rgba(166, 247, 83, .11);
}

.contact-options { margin: 0; padding: 0; border: 0; }
.contact-options__list { display: flex; flex-wrap: wrap; gap: .65rem; }

.contact-options input {
  position: absolute;
  width: 1px;
  height: 1px;
  overflow: hidden;
  opacity: 0;
}

.contact-options label {
  margin: 0;
  padding: .55rem .9rem;
  border: 1px solid rgba(249, 243, 234, .2);
  border-radius: 999px;
  cursor: pointer;
}

.contact-options input:checked + label {
  border-color: var(--logoNeon);
  background: rgba(166, 247, 83, .12);
  color: var(--logoNeon);
}

.contact-options input:focus-visible + label { outline: 2px solid var(--logoNeon); outline-offset: 3px; }

.contact-consent {
  display: grid;
  grid-template-columns: auto 1fr;
  gap: .75rem;
  align-items: start;
}

.contact-consent input { width: 1rem; height: 1rem; margin-top: .18rem; accent-color: var(--logoNeon); }
.contact-consent label,
.contact-note { color: rgba(249, 243, 234, .62); font-size: .68rem; line-height: 1.6; }
.contact-consent a { color: var(--logoBeige); text-underline-offset: .2rem; }
.contact-consent a:hover { color: var(--logoNeon); }

.contact-submit {
  display: inline-flex;
  gap: 1rem;
  align-items: center;
  justify-content: center;
  justify-self: start;
  min-height: 3.3rem;
  padding: .8rem 1.25rem;
  border: 1px solid var(--logoNeon);
  border-radius: 7px;
  background: var(--logoNeon);
  color: var(--logoNavy);
  cursor: pointer;
  font: inherit;
  font-size: .82rem;
  font-weight: 700;
  transition: all .2s ease;
}

.contact-submit:hover {
  background: transparent;
  color: var(--logoNeon);
  box-shadow: 0 0 24px rgba(166, 247, 83, .18);
  transform: translateY(-2px);
}

.contact-submit:focus-visible { outline: 2px solid var(--logoBeige); outline-offset: 4px; }
.contact-note { margin-top: -.65rem; }

@media (max-width: 1080px) {
  .contact-layout { grid-template-columns: 1fr; width: min(800px, calc(100% - 3rem)); }
  .contact-introduction h1, .contact-lead, .contact-details { max-width: none; }
}

@media (max-width: 600px) {
  .contact-layout { width: min(100% - 2rem, 800px); margin: 2.5rem auto 4rem; }
  .contact-card { padding: 2rem 1.25rem; border-radius: 12px; }
  .contact-card::before { right: 1.25rem; }
  .contact-card__heading { gap: .85rem; }
  .contact-form__row { grid-template-columns: 1fr; }
  .contact-submit { width: 100%; }
}

/* #endregion */

/* #region FOOTER */

footer {
    font-family: 'Poppins', sans-serif;
    color: var(--beige);
    width: 100%;
    background-color: var(--logoNavy);
    box-shadow: 0 -1px 5px rgba(17, 18, 53, 0.8);
    /* box-shadow: 0 -1px 5px var(--textShadow); */
    display: block;
}

.footer-content {
    display: flex;
    flex-direction: column;
}

.footer-content a {
    text-decoration: none;
    color: var(--logoBeige);
}

.footer-content a:hover {
    color: var(--logoNeon);
}

.footer-top {
    display: flex;
    flex-direction: row;
    justify-content: space-around;
    margin-top: 20px;
    width: 100%;
    gap: 10px;
}

/* keep your bottom line centered */
.footer-bottom {
    font-size: 12px;
    margin: 20px 0;
    text-align: center;
}

@media (max-width: 918px) {
    .footer-top {
        flex-direction: column;
        align-items: center;
    }

    .footer-top div {
        margin-bottom: 10px;
    }
}

/* #endregion */