@import url("https://fonts.googleapis.com/css2?family=Nunito+Sans:wght@400;600;700;800;900&display=swap");



:root {

  --blue: #3d7eae;

  --blue-dark: #286591;

  --blue-deep: #143f61;

  --blue-ink: #0c2b43;

  --gold: #e6b96f;

  --gold-dark: #c99445;

  --senegal-green: #138a4a;

  --senegal-red: #c8483d;

  --teranga-clay: #b9673c;

  --mint: #9bd8bb;

  --ink: #272b31;

  --muted: #5f6872;

  --soft: #f4f7fb;

  --soft-2: #edf3f8;

  --white: #ffffff;

  --line: rgba(35, 68, 96, 0.12);

  --shadow: 0 22px 54px rgba(20, 52, 78, 0.14);

  --shadow-soft: 0 12px 30px rgba(20, 52, 78, 0.1);

  --radius: 8px;

  --section: clamp(72px, 8vw, 118px);

}



* {

  box-sizing: border-box;

}



html {

  scroll-behavior: smooth;

}



body {

  margin: 0;

  font-family: "Nunito Sans", Arial, sans-serif;

  color: var(--ink);

  background:

    linear-gradient(180deg, #ffffff 0%, #f9fbfd 44%, #ffffff 100%);

  line-height: 1.65;

  text-rendering: optimizeLegibility;

}



img {

  display: block;

  max-width: 100%;

}



a {

  color: inherit;

  text-decoration: none;

}



button,

input,

textarea {

  font: inherit;

}



:focus-visible {

  outline: 3px solid rgba(230, 185, 111, 0.62);

  outline-offset: 3px;

}



.topbar {

  position: relative;

  background:

    linear-gradient(90deg, var(--blue-deep), var(--blue), var(--blue-dark));

  color: var(--white);

  font-size: 14px;

  font-weight: 800;

}



.topbar::after {

  content: "";

  position: absolute;

  left: 0;

  right: 0;

  bottom: 0;

  height: 3px;

  background: linear-gradient(90deg, var(--senegal-green), var(--gold) 50%, var(--senegal-red));

}



.topbar__inner,

.nav__inner,

.container {

  width: min(1216px, calc(100% - 48px));

  margin: 0 auto;

}



.topbar__inner {

  min-height: 46px;

  display: flex;

  align-items: center;

  gap: 30px;

}



.topbar__item {

  display: inline-flex;

  align-items: center;

  gap: 10px;

  white-space: nowrap;

  opacity: 0.96;

  transition: opacity 0.18s ease, transform 0.18s ease;

}



.topbar__item:hover {

  opacity: 1;

  transform: translateY(-1px);

}



.topbar__item svg {

  width: 21px;

  height: 21px;

  stroke-width: 3;

}



.topbar__socials {

  margin-left: auto;

  display: flex;

  align-items: center;

  gap: 12px;

}



.topbar__social {

  width: 34px;

  height: 34px;

  display: inline-flex;

  align-items: center;

  justify-content: center;

  border-radius: 999px;

  color: var(--white);

  background: rgba(255, 255, 255, 0.08);

  transition: background 0.18s ease, transform 0.18s ease, color 0.18s ease;

}



.topbar__social:hover {

  background: rgba(255, 255, 255, 0.14);

  color: var(--gold);

  transform: translateY(-1px);

}



.topbar__social img {

  width: 22px;

  height: 22px;

  display: block;

  object-fit: cover;

  border-radius: 7px;

  box-shadow: 0 2px 8px rgba(0, 0, 0, 0.18);

}



.site-header {

  position: sticky;

  top: 0;

  z-index: 50;

  background: rgba(255, 255, 255, 0.94);

  border-bottom: 1px solid rgba(31, 82, 125, 0.08);

  box-shadow: 0 10px 30px rgba(17, 43, 65, 0.06);

  backdrop-filter: blur(14px);

}



.nav__inner {

  height: 118px;

  display: flex;

  align-items: center;

  justify-content: space-between;

}



.brand {

  display: inline-flex;

  align-items: center;

}



.brand img {

  width: 104px;

  height: auto;

  transition: transform 0.2s ease, filter 0.2s ease;

}



.brand:hover img {

  transform: translateY(-2px);

  filter: drop-shadow(0 10px 16px rgba(31, 82, 125, 0.16));

}



.main-nav {

  display: flex;

  align-items: center;

  gap: 10px;

  color: var(--blue-deep);

  font-size: 15.5px;

  font-weight: 800;

}



.main-nav a {

  position: relative;

  padding: 10px 13px;

  border-radius: 999px;

  transition: color 0.18s ease, background 0.18s ease, transform 0.18s ease;

}



.main-nav a:hover,

.main-nav a[aria-current="page"] {

  color: var(--gold-dark);

  background: rgba(230, 185, 111, 0.12);

  transform: translateY(-1px);

}



.main-nav a::after {

  content: "";

  position: absolute;

  left: 16px;

  right: 16px;

  bottom: 5px;

  height: 3px;

  border-radius: 999px;

  background: linear-gradient(90deg, var(--senegal-green), var(--gold), var(--senegal-red));

  opacity: 0;

  transform: scaleX(0.35);

  transition: opacity 0.18s ease, transform 0.18s ease;

}



.main-nav a:hover::after,

.main-nav a[aria-current="page"]::after {

  opacity: 1;

  transform: scaleX(1);

}



.menu-button {

  display: none;

  width: 44px;

  height: 44px;

  border: 0;

  border-radius: 8px;

  color: var(--blue-deep);

  background: var(--soft);

  align-items: center;

  justify-content: center;

  cursor: pointer;

}



.menu-button svg {

  width: 24px;

  height: 24px;

}



.eyebrow {

  color: var(--gold-dark);

  font-weight: 900;

  line-height: 1.2;

  text-transform: none;

  letter-spacing: 0.01em;

}



.eyebrow::before,

.eyebrow::after {

  content: "";

  display: inline-block;

  width: 34px;

  height: 2px;

  margin: 0 8px 4px;

  border-radius: 999px;

  background: currentColor;

}



.section-head {

  text-align: center;

  max-width: 900px;

  margin: 0 auto 54px;

}



.section-head h2,

.split-copy h2,

.contact-intro h1 {

  margin: 12px 0 18px;

  font-size: clamp(38px, 4.2vw, 52px);

  line-height: 1.15;

  font-weight: 900;

  letter-spacing: 0;

  color: #2c3036;

}



.section-head p,

.split-copy p,

.contact-intro p {

  color: var(--muted);

  font-size: 17px;

}



.hero {

  position: relative;

  min-height: 410px;

  display: grid;

  place-items: center;

  overflow: hidden;

  color: var(--white);

  background-position: center;

  background-size: cover;

}



.hero--home {

  min-height: 540px;

  isolation: isolate;

  background-image:

    linear-gradient(90deg, rgba(7, 18, 29, 0.84), rgba(31, 82, 125, 0.46), rgba(8, 23, 35, 0.28)),

    url("assets/hero-home-famille-senegalaise.webp");

}



.hero--home::before {

  content: "";

  position: absolute;

  inset: 0;

  z-index: 0;

  pointer-events: none;

  background:

    linear-gradient(180deg, rgba(255, 255, 255, 0.08), transparent 38%, rgba(20, 52, 78, 0.22)),

    linear-gradient(115deg, rgba(155, 216, 187, 0.11), transparent 38%, rgba(230, 185, 111, 0.1)),

    repeating-linear-gradient(135deg, rgba(230, 185, 111, 0.08) 0 2px, transparent 2px 24px);

  opacity: 0.72;

}



.hero--home::after,

.hero--subpage::after,

.hero--cleaning::after,

.hero--process::after,

.hero--cta::after {

  content: "";

  position: absolute;

  inset: auto 0 0;

  height: 120px;

  pointer-events: none;

  background: linear-gradient(180deg, transparent, rgba(6, 20, 32, 0.28));

}



.hero--cleaning {

  min-height: 430px;

  background-image:

    linear-gradient(90deg, rgba(11, 31, 48, 0.58), rgba(16, 28, 40, 0.44)),

    url("assets/hero-cleaning.webp");

}



.hero--subpage {

  min-height: 430px;

  background-size: 106% 106%;

  background-position: center;

  animation: hero-subpage-drift 18s ease-in-out infinite alternate;

}



.hero--subpage::before {

  content: "";

  position: absolute;

  inset: 0;

  z-index: 1;

  pointer-events: none;

  background:

    linear-gradient(115deg, transparent 0%, rgba(255, 255, 255, 0.13) 42%, transparent 56%),

    radial-gradient(circle at 18% 25%, rgba(230, 185, 111, 0.16), transparent 28%),

    radial-gradient(circle at 82% 64%, rgba(61, 126, 174, 0.16), transparent 32%);

  mix-blend-mode: screen;

  opacity: 0.52;

  animation: hero-subpage-sheen 8s ease-in-out infinite;

}



.hero--services {

  background-image:

    linear-gradient(90deg, rgba(12, 40, 62, 0.72), rgba(17, 48, 72, 0.5)),

    url("assets/hero-services-senegal.webp");

}



.hero--about {

  background-image:

    linear-gradient(90deg, rgba(9, 28, 44, 0.72), rgba(24, 63, 91, 0.5)),

    url("assets/hero-about-senegal.webp");

}



.hero--results {

  background-image:

    linear-gradient(90deg, rgba(9, 28, 44, 0.74), rgba(52, 77, 92, 0.48)),

    url("assets/hero-results-senegal.webp");

}



.hero--contact {

  background-image:

    linear-gradient(90deg, rgba(9, 28, 44, 0.76), rgba(46, 88, 119, 0.48)),

    url("assets/hero-contact-senegal.webp");

}



.hero--process {

  min-height: 472px;

  background-image:

    linear-gradient(90deg, rgba(47, 102, 153, 0.85), rgba(8, 18, 28, 0.76)),

    url("assets/hero-process-senegal.webp");

}



.hero--cta {

  min-height: 318px;

  background-image:

    linear-gradient(rgba(8, 10, 12, 0.66), rgba(8, 10, 12, 0.66)),

    url("assets/hero-process-senegal.webp");

}



.hero__content {

  width: min(1050px, calc(100% - 48px));

  margin: 0 auto;

  text-align: center;

  position: relative;

  z-index: 2;

  padding: 56px 0;

}



.hero h1 {

  margin: 18px 0 22px;

  font-size: clamp(38px, 5.8vw, 70px);

  line-height: 1.12;

  font-weight: 900;

  letter-spacing: 0;

  text-shadow: 0 10px 26px rgba(0, 0, 0, 0.24);

}



.hero--home h1 {

  font-size: clamp(42px, 6.4vw, 70px);

}



.hero--cleaning h1,

.hero--subpage h1 {

  font-size: clamp(38px, 5vw, 50px);

  max-width: 820px;

  margin-left: auto;

  margin-right: auto;

}



.hero p {

  max-width: 760px;

  margin: 0 auto;

  font-size: 16px;

  font-weight: 800;

  color: rgba(255, 255, 255, 0.92);

}



.hero--subpage .hero__content {

  text-align: left;

}



.hero--subpage h1 {

  max-width: 700px;

  margin-left: 0;

  margin-right: 0;

}



.hero--subpage p {

  max-width: 600px;

  margin-left: 0;

}



.hero__accent {

  color: var(--gold);

  text-shadow: 0 8px 22px rgba(150, 97, 24, 0.24);

}



.hero--home .hero__content {

  text-shadow: 0 10px 28px rgba(0, 0, 0, 0.24);

}



.hero--home .hero__arrow,

.hero--home .scroll-dot {

  z-index: 3;

}



.hero__actions {

  margin-top: 42px;

  display: flex;

  justify-content: center;

  gap: 22px;

  flex-wrap: wrap;

}



@keyframes hero-subpage-drift {

  from {

    background-position: center center;

    background-size: 106% 106%;

  }



  to {

    background-position: 52% 48%;

    background-size: 112% 112%;

  }

}



@keyframes hero-subpage-sheen {

  0%,

  100% {

    opacity: 0.36;

    transform: translateX(-4%);

  }



  50% {

    opacity: 0.58;

    transform: translateX(4%);

  }

}



@media (prefers-reduced-motion: reduce) {

  .hero--subpage,

  .hero--subpage::before,

  .senegal-space::before,

  .senegal-space::after {

    animation: none;

  }

}



.hero__arrow {

  position: absolute;

  top: 50%;

  transform: translateY(-50%);

  width: 70px;

  height: 70px;

  border: 0;

  border-radius: 50%;

  color: var(--white);

  background: rgba(255, 255, 255, 0.15);

  display: grid;

  place-items: center;

}



.hero__arrow svg {

  width: 32px;

  height: 32px;

}



.hero__arrow--left {

  left: 16px;

}



.hero__arrow--right {

  right: 16px;

}



.scroll-dot {

  position: absolute;

  left: 50%;

  bottom: 8px;

  transform: translateX(-50%);

  width: 30px;

  height: 48px;

  border-radius: 999px;

  background: rgba(255, 255, 255, 0.92);

  display: grid;

  place-items: center;

  color: var(--ink);

  box-shadow: 0 10px 26px rgba(10, 25, 38, 0.2);

  transition: transform 0.18s ease, box-shadow 0.18s ease;

}



.scroll-dot:hover {

  transform: translateX(-50%) translateY(-3px);

  box-shadow: 0 16px 28px rgba(10, 25, 38, 0.22);

}



.scroll-dot span {

  width: 7px;

  height: 7px;

  border-radius: 50%;

  background: var(--ink);

}



.btn {

  position: relative;

  overflow: hidden;

  display: inline-flex;

  align-items: center;

  justify-content: center;

  gap: 8px;

  min-height: 50px;

  padding: 14px 32px;

  border-radius: 999px;

  border: 2px solid transparent;

  color: var(--white);

  background:

    linear-gradient(135deg, var(--blue), var(--blue-dark));

  font-weight: 900;

  line-height: 1;

  cursor: pointer;

  box-shadow: 0 13px 28px rgba(38, 92, 138, 0.22);

  transition: transform 0.18s ease, box-shadow 0.18s ease, background 0.18s ease, border-color 0.18s ease;

}



.btn::after {

  content: "";

  position: absolute;

  inset: 0;

  pointer-events: none;

  background: linear-gradient(110deg, transparent 0 38%, rgba(255, 255, 255, 0.32) 48%, transparent 58% 100%);

  transform: translateX(-120%);

  transition: transform 0.55s ease;

}



.btn:hover::after {

  transform: translateX(120%);

}



.btn:hover {

  transform: translateY(-3px);

  box-shadow: 0 18px 34px rgba(38, 92, 138, 0.28);

  background:

    linear-gradient(135deg, var(--blue-dark), var(--blue-deep));

}



.btn--outline {

  color: var(--white);

  background: rgba(255, 255, 255, 0.08);

  border-color: rgba(255, 255, 255, 0.78);

  box-shadow: none;

  backdrop-filter: blur(9px);

}



.btn--outline:hover {

  background: rgba(255, 255, 255, 0.15);

}



.btn--light {

  color: var(--blue-dark);

  background: var(--white);

  box-shadow: 0 13px 28px rgba(12, 43, 67, 0.18);

}



.btn--gold {

  background: linear-gradient(135deg, var(--gold), var(--gold-dark));

}



.btn svg {

  width: 16px;

  height: 16px;

  stroke-width: 3;

}



.soft-section {

  background:

    linear-gradient(180deg, var(--soft), #ffffff 92%);

  position: relative;

  overflow: hidden;

}



.wave-top {

  position: relative;

  padding-top: var(--section);

}



.wave-top::before {

  content: "";

  position: absolute;

  top: -95px;

  left: 50%;

  width: 150vw;

  height: 200px;

  transform: translateX(-50%);

  background: var(--white);

  border-radius: 0 0 50% 50% / 0 0 100% 100%;

}



.wave-top > * {

  position: relative;

}



.trust {

  padding-bottom: 112px;

}



.trust-grid {

  display: flex;

  align-items: stretch;

  gap: 24px;

  perspective: 1500px;

}



.trust-card {

  min-width: 0;

  height: 350px;

  flex: 1 1 0;

  position: relative;

  border-radius: 8px;

  background: transparent;

  box-shadow: none;

  transition:

    flex-grow 0.32s ease,

    transform 0.32s ease,

    filter 0.32s ease;

}



.teaser-card:hover,

.testimonial-card:hover,

.value-card:hover,

.result-stat:hover,

.contact-card:hover {

  transform: translateY(-4px);

  box-shadow: 0 22px 38px rgba(22, 39, 56, 0.18);

}



.trust-card:hover,

.trust-card:focus {

  flex-grow: 1.12;

  transform: translateY(-6px);

  filter: drop-shadow(0 26px 36px rgba(18, 43, 65, 0.18));

}



.trust-card:focus-visible {

  outline: 3px solid rgba(226, 181, 112, 0.7);

  outline-offset: 4px;

}



.trust-card__inner {

  width: 100%;

  height: 100%;

  position: relative;

  border-radius: 8px;

  transform-style: preserve-3d;

  transition: transform 1.05s cubic-bezier(0.18, 0.72, 0.2, 1);

}



.trust-card:hover .trust-card__inner,

.trust-card:focus .trust-card__inner {

  transform: rotateY(180deg);

}



.trust-card__face {

  position: absolute;

  inset: 0;

  display: flex;

  flex-direction: column;

  align-items: center;

  justify-content: center;

  overflow: hidden;

  border-radius: 8px;

  backface-visibility: hidden;

  -webkit-backface-visibility: hidden;

}



.trust-card__front {

  position: relative;

  padding: 38px 28px;

  text-align: center;

  color: var(--ink);

  border: 1px solid rgba(63, 121, 170, 0.16);

  background: #ffffff;

  box-shadow: 0 18px 40px rgba(22, 39, 56, 0.08);

}



.trust-card__front::before,

.process-card::before,

.form-card::before {

  content: "";

  position: absolute;

  left: 0;

  right: 0;

  top: 0;

  height: 5px;

  background: linear-gradient(90deg, var(--senegal-green), var(--gold), var(--senegal-red));

}



.trust-card__back {

  padding: 26px 28px 24px;

  text-align: center;

  color: var(--white);

  background:

    radial-gradient(circle at 50% 20%, rgba(63, 121, 170, 0.28), transparent 42%),

    linear-gradient(145deg, #292c38 0%, #172c42 58%, #123b5b 100%);

  box-shadow: 0 26px 52px rgba(18, 43, 65, 0.24);

  transform: rotateY(180deg);

  justify-content: flex-start;

}



.trust-icon {

  width: 78px;

  height: 78px;

  margin-bottom: 32px;

  display: inline-flex;

  align-items: center;

  justify-content: center;

  border-radius: 50%;

  color: var(--white);

  background:

    linear-gradient(145deg, var(--blue), var(--blue-dark));

  box-shadow: 0 15px 30px rgba(63, 121, 170, 0.22);

}



.trust-icon svg {

  width: 38px;

  height: 38px;

  stroke-width: 2.4;

}



.trust-card__back img {

  display: block;

  width: 100%;

  height: 166px;

  margin: 0 0 18px;

  border-radius: 4px;

  object-fit: cover;

  object-position: center;

  background: transparent;

  box-shadow: 0 16px 30px rgba(0, 0, 0, 0.18);

  transform: translateZ(42px);

}



.trust-card h3 {

  min-height: 0;

  margin: 0 0 14px;

  font-size: clamp(21px, 2vw, 25px);

  line-height: 1.12;

  font-weight: 900;

  letter-spacing: 0;

  color: var(--blue-dark);

  transform: translateZ(28px);

}



.trust-card__back h3 {

  color: var(--white);

  text-shadow: 0 8px 18px rgba(0, 0, 0, 0.22);

  margin-bottom: 8px;

  font-size: clamp(20px, 1.85vw, 24px);

  line-height: 1.08;

  transform: none;

}



.trust-card p {

  max-width: 260px;

  margin: 0;

  color: var(--muted);

  font-size: 16px;

  line-height: 1.5;

  font-weight: 800;

  transform: translateZ(22px);

}



.trust-card__back p {

  color: rgba(255, 255, 255, 0.88);

  max-width: 100%;

  font-size: 15.5px;

  line-height: 1.38;

  transform: none;

}



.senegal-space {

  position: relative;

  overflow: hidden;

  isolation: isolate;

  padding: var(--section) 0;

  color: var(--white);

  background:

    linear-gradient(128deg, rgba(5, 15, 24, 0.86) 0%, rgba(10, 35, 53, 0.72) 47%, rgba(246, 250, 252, 0.98) 47.2%, #ffffff 100%),

    url("assets/monument-renaissance-senegal-bg.webp"),

    linear-gradient(128deg, rgba(12, 43, 67, 0.96) 0%, rgba(28, 100, 137, 0.92) 52%, #ffffff 52.2%, #ffffff 100%);

  background-position: center, left 44%, center;

  background-repeat: no-repeat;

  background-size: auto, min(58vw, 840px) auto, auto;

}



.senegal-space::before {

  content: "";

  position: absolute;

  inset: 0;

  pointer-events: none;

  z-index: 0;

  clip-path: polygon(0 0, 55% 0, 43% 100%, 0 100%);

  background:

    linear-gradient(112deg, transparent 0 30%, rgba(19, 138, 74, 0.58) 36%, rgba(230, 185, 111, 0.76) 40%, rgba(200, 72, 61, 0.56) 44%, transparent 52%),

    repeating-linear-gradient(135deg, rgba(230, 185, 111, 0.11) 0 2px, transparent 2px 20px),

    linear-gradient(90deg, rgba(155, 216, 187, 0.13), transparent 40%);

  background-size: 230% 100%, auto, auto;

  opacity: 0.72;

  mix-blend-mode: screen;

  animation: senegal-flag-sweep 8.5s linear infinite;

}



.senegal-space::after {

  content: "";

  position: absolute;

  left: -10%;

  right: 42%;

  bottom: 8%;

  z-index: 0;

  height: 30%;

  pointer-events: none;

  background:

    linear-gradient(100deg, transparent 0 14%, rgba(19, 138, 74, 0.74) 24%, transparent 34%),

    linear-gradient(100deg, transparent 0 30%, rgba(230, 185, 111, 0.86) 41%, transparent 52%),

    linear-gradient(100deg, transparent 0 48%, rgba(200, 72, 61, 0.72) 58%, transparent 68%);

  background-size: 180% 100%;

  filter: blur(0.3px);

  opacity: 0.72;

  transform: rotate(-7deg);

  mix-blend-mode: screen;

  animation: senegal-flag-ribbon 6.8s ease-in-out infinite alternate;

}



.senegal-space__grid {

  position: relative;

  z-index: 2;

  display: grid;

  grid-template-columns: minmax(0, 0.95fr) minmax(420px, 1fr);

  gap: clamp(34px, 6vw, 76px);

  align-items: center;

}



.senegal-space .eyebrow {

  color: var(--gold);

}



.senegal-space__copy h2 {

  max-width: 620px;

  margin: 14px 0 20px;

  color: var(--white);

  font-size: clamp(36px, 4vw, 52px);

  line-height: 1.12;

  font-weight: 900;

  letter-spacing: 0;

}



.senegal-space__copy p {

  max-width: 610px;

  margin: 0 0 32px;

  color: rgba(255, 255, 255, 0.88);

  font-size: 17px;

  font-weight: 800;

}



.senegal-space__visual {

  position: relative;

  min-height: 410px;

  display: grid;

  align-content: center;

  gap: 0;

  padding: 36px 0 36px 38px;

  color: var(--blue-ink);

}



.senegal-motif {

  position: absolute;

  inset: 0;

  border-radius: 8px;

  border: 1px solid rgba(33, 86, 125, 0.12);

  background:

    linear-gradient(180deg, rgba(255, 255, 255, 0.9), rgba(247, 251, 249, 0.96)),

    repeating-linear-gradient(90deg, rgba(230, 185, 111, 0.14) 0 12px, transparent 12px 26px),

    repeating-linear-gradient(135deg, rgba(19, 138, 74, 0.08) 0 3px, transparent 3px 18px);

  box-shadow: 0 24px 54px rgba(9, 28, 44, 0.12);

}



.senegal-motif::before {

  content: "";

  position: absolute;

  inset: 24px;

  border-radius: 8px;

  border: 2px solid rgba(230, 185, 111, 0.34);

  background:

    linear-gradient(135deg, transparent 0 34%, rgba(155, 216, 187, 0.28) 34% 36%, transparent 36% 64%, rgba(61, 126, 174, 0.16) 64% 66%, transparent 66%),

    repeating-linear-gradient(135deg, rgba(12, 43, 67, 0.06) 0 2px, transparent 2px 18px);

}



.senegal-note {

  position: relative;

  z-index: 1;

  display: grid;

  grid-template-columns: 48px 126px minmax(0, 1fr);

  gap: 18px;

  align-items: center;

  padding: 22px 28px;

  border-bottom: 1px solid rgba(34, 82, 116, 0.12);

}



.senegal-note:last-child {

  border-bottom: 0;

}



.senegal-note svg {

  width: 48px;

  height: 48px;

  padding: 12px;

  border-radius: 50%;

  color: var(--white);

  background: linear-gradient(145deg, var(--blue), var(--blue-dark));

  box-shadow: 0 12px 24px rgba(32, 82, 122, 0.18);

}



.senegal-note:nth-child(3) svg {

  background: linear-gradient(145deg, var(--gold), var(--gold-dark));

}



.senegal-note strong {

  color: var(--blue-deep);

  font-size: 20px;

  line-height: 1.1;

  font-weight: 900;

}



.senegal-note span {

  color: var(--muted);

  font-size: 15.5px;

  font-weight: 800;

  line-height: 1.48;

}



@keyframes senegal-flag-sweep {

  from {

    background-position: 120% 0, 0 0, 0 0;

  }



  to {

    background-position: -80% 0, 0 0, 0 0;

  }

}



@keyframes senegal-flag-ribbon {

  from {

    transform: translateX(-4%) rotate(-7deg);

    opacity: 0.5;

  }



  to {

    transform: translateX(8%) rotate(-7deg);

    opacity: 0.82;

  }

}



.home-services {

  padding: var(--section) 0 96px;

}



.home-services .section-head {

  margin-bottom: 66px;

}



.home-services__layout {

  display: grid;

  grid-template-columns: minmax(0, 1fr) minmax(420px, 0.9fr);

  align-items: start;

  gap: 0;

}



.home-services__layout--centered {

  width: min(1050px, calc(100% - 48px));

  margin: 0 auto;

  display: block;

}



.home-services__image {

  position: sticky;

  top: 122px;

  height: 610px;

  overflow: hidden;

  box-shadow: inset -40px 0 70px rgba(20, 52, 78, 0.08);

}



.home-services__image img {

  width: 100%;

  height: 100%;

  object-fit: cover;

  object-position: center;

}



.service-teasers {

  display: grid;

  gap: 24px;

  padding: 0 min(5vw, 66px) 0 0;

  transform: translateX(-22px);

}



.home-services__layout--centered .service-teasers {

  max-width: 980px;

  margin: 0 auto;

  padding: 0;

  transform: none;

  grid-template-columns: repeat(3, minmax(0, 1fr));

}



.teaser-card {

  min-height: 216px;

  padding: 34px 40px 31px;

  border-radius: var(--radius);

  border: 1px solid var(--line);

  background:

    linear-gradient(180deg, #ffffff, #fbfdff);

  box-shadow: var(--shadow);

  transition: transform 0.22s ease, box-shadow 0.22s ease, border-color 0.22s ease;

}



.home-services__layout--centered .teaser-card {

  min-height: 300px;

  display: flex;

  flex-direction: column;

  align-items: center;

  justify-content: center;

  text-align: center;

}



.home-services__layout--centered .teaser-card .icon-disc {

  margin: 0 auto 24px;

}



.home-services__layout--centered .teaser-card a {

  margin-top: 18px;

}



.service-timeline {

  width: min(990px, calc(100% - 48px));

  margin: 0 auto;

  position: relative;

  display: grid;

  gap: 58px;

  padding: 18px 0 14px;

}



.service-timeline::before {

  content: "";

  position: absolute;

  top: 0;

  bottom: 0;

  left: 50%;

  width: 1px;

  transform: translateX(-50%);

  background:

    linear-gradient(180deg, transparent, rgba(63, 121, 170, 0.22) 8%, rgba(63, 121, 170, 0.22) 92%, transparent);

}



.service-timeline__item {

  min-height: 190px;

  position: relative;

  display: grid;

  grid-template-columns: minmax(0, 1fr) 88px minmax(0, 1fr);

  align-items: center;

}



.service-timeline__marker {

  grid-column: 2;

  grid-row: 1;

  z-index: 2;

  width: 66px;

  height: 66px;

  margin: 0 auto;

  display: grid;

  place-items: center;

  border-radius: 50%;

  color: var(--white);

  background:

    linear-gradient(145deg, var(--blue), var(--blue-dark));

  box-shadow: 0 18px 36px rgba(32, 82, 122, 0.24);

}



.service-timeline__marker img {

  width: 34px;

  height: 34px;

  object-fit: contain;

  filter: brightness(0) invert(1);

}



.service-timeline__marker svg {

  width: 31px;

  height: 31px;

  stroke-width: 2.2;

}



.service-timeline__item:nth-child(even) .service-timeline__marker {

  background:

    linear-gradient(145deg, var(--gold), #d9a75b);

  box-shadow: 0 18px 36px rgba(182, 126, 48, 0.22);

}



.service-timeline__card {

  position: relative;

  min-height: 176px;

  padding: 32px 38px;

  overflow: hidden;

  border: 1px solid rgba(63, 121, 170, 0.12);

  border-radius: 8px;

  background: #ffffff;

  box-shadow: 0 18px 42px rgba(22, 39, 56, 0.1);

}



.service-timeline__item--right .service-timeline__card {

  grid-column: 3;

  text-align: left;

}



.service-timeline__item--left .service-timeline__card {

  grid-column: 1;

  text-align: right;

}



.service-timeline__card h3 {

  position: relative;

  z-index: 1;

  margin: 0;

  color: var(--ink);

  font-size: clamp(23px, 2.2vw, 28px);

  line-height: 1.15;

  font-weight: 900;

}



.service-timeline__card span {

  position: relative;

  z-index: 1;

  display: block;

  width: 34px;

  height: 2px;

  margin: 18px 0 16px;

  background: var(--gold);

}



.service-timeline__item--left .service-timeline__card span {

  margin-left: auto;

}



.service-timeline__card p {

  position: relative;

  z-index: 1;

  max-width: 360px;

  margin: 0;

  color: var(--muted);

  font-size: 16px;

  line-height: 1.68;

  font-weight: 800;

}



.service-timeline__item--left .service-timeline__card p {

  margin-left: auto;

}



.service-timeline__ghost {

  position: absolute;

  right: -8px;

  bottom: -12px;

  width: 76px;

  height: 76px;

  color: rgba(63, 121, 170, 0.12);

  opacity: 0.18;

  object-fit: contain;

  filter: grayscale(1) brightness(0.65);

}



.service-timeline__item--left .service-timeline__ghost {

  right: auto;

  left: -8px;

}



.service-timeline__ghost svg,

svg.service-timeline__ghost {

  width: 76px;

  height: 76px;

  stroke-width: 1.8;

}



.service-timeline__item.reveal {

  transform: translateY(42px);

}



.service-timeline__item--left.reveal {

  transform: translateX(-34px) translateY(36px);

}



.service-timeline__item--right.reveal {

  transform: translateX(34px) translateY(36px);

}



.service-timeline__item.reveal.is-visible {

  transform: translate(0, 0);

}



.teaser-card:hover {

  border-color: rgba(230, 185, 111, 0.55);

}



.icon-disc {

  width: 78px;

  height: 78px;

  border-radius: 50%;

  display: grid;

  place-items: center;

  margin-bottom: 18px;

  color: var(--white);

  background:

    linear-gradient(145deg, var(--blue), var(--blue-deep));

  box-shadow: 0 14px 26px rgba(38, 92, 138, 0.22);

}



.icon-disc img {

  width: 47px;

  height: 47px;

  object-fit: contain;

  filter: brightness(0) invert(1);

}



.icon-disc svg {

  width: 42px;

  height: 42px;

  stroke-width: 1.9;

}



.teaser-card h3,

.service-panel h2,

.value-card h3 {

  margin: 0 0 4px;

  color: var(--blue-dark);

  font-size: 21px;

  line-height: 1.2;

  font-weight: 900;

}



.teaser-card p,

.service-panel p,

.value-card p {

  margin: 0;

  color: var(--muted);

}



.teaser-card a {

  margin-top: 16px;

  display: inline-flex;

  color: var(--blue-dark);

  font-weight: 900;

}



.center-action {

  text-align: center;

  margin-top: 28px;

}



.testimonials {

  padding: 88px 0 78px;

}



.testimonial-grid {

  display: grid;

  grid-template-columns: repeat(3, 1fr);

  gap: 20px;

}



.testimonial-card {

  position: relative;

  overflow: hidden;

  min-height: 195px;

  padding: 28px 30px;

  border-radius: var(--radius);

  text-align: center;

  border: 1px solid var(--line);

  background:

    linear-gradient(180deg, #ffffff, var(--soft-2));

  display: grid;

  align-content: center;

  transition: transform 0.22s ease, box-shadow 0.22s ease;

}



.testimonial-card::before {

  content: "“";

  color: rgba(230, 185, 111, 0.42);

  font-size: 58px;

  line-height: 0.6;

  font-weight: 900;

}



.testimonial-card::after {

  content: "";

  position: absolute;

  inset: auto 0 0;

  height: 5px;

  background: linear-gradient(90deg, var(--senegal-green), var(--gold), var(--senegal-red));

}



.home-proof {

  padding: 92px 0;

  background:

    linear-gradient(135deg, rgba(244, 247, 251, 0.96), rgba(255, 255, 255, 0.98)),

    linear-gradient(90deg, rgba(155, 216, 187, 0.16), transparent 48%, rgba(230, 185, 111, 0.12));

}



.proof-grid {

  display: grid;

  grid-template-columns: minmax(0, 0.95fr) minmax(360px, 0.75fr);

  gap: 54px;

  align-items: center;

}



.proof-media {

  position: relative;

  overflow: hidden;

  border-radius: var(--radius);

  box-shadow: var(--shadow);

  background: #111820;

}



.proof-media::after {

  content: "";

  position: absolute;

  inset: 0;

  pointer-events: none;

  border: 1px solid rgba(255, 255, 255, 0.18);

}



.proof-media video,

.proof-media img {

  width: 100%;

  height: 470px;

  display: block;

  object-fit: cover;

}



.proof-copy h2 {

  margin: 14px 0 20px;

  font-size: clamp(38px, 4vw, 50px);

  line-height: 1.14;

  font-weight: 900;

}



.proof-copy p {

  margin: 0 0 28px;

  color: var(--muted);

  font-size: 17px;

}



.proof-video-card {

  overflow: hidden;

  border-radius: 8px;

  border: 1px solid rgba(63, 121, 170, 0.14);

  background: #ffffff;

  box-shadow: 0 16px 34px rgba(22, 39, 56, 0.1);

}



.proof-video-card span {

  display: block;

  padding: 12px 14px;

  color: var(--ink);

  font-weight: 900;

}



.proof-video-card:first-child span {

  color: var(--senegal-red);

}



.proof-video-card:last-child span {

  color: var(--senegal-green);

}



.proof-video-card video {

  width: 100%;

  aspect-ratio: 1 / 1;

  display: block;

  object-fit: cover;

  background: #111820;

}



.testimonial-card blockquote {

  margin: 0 0 16px;

  font-size: 17px;

  color: #3f4147;

}



.testimonial-card strong {

  display: block;

  margin-bottom: 4px;

  font-weight: 900;

}



.faq-split {

  display: grid;

  grid-template-columns: 1fr 1fr;

  background: var(--soft);

}



.faq-copy {

  padding: 96px max(44px, calc((100vw - 1216px) / 2)) 80px max(44px, calc((100vw - 1216px) / 2));

}



.faq-copy .section-head {

  text-align: left;

  margin-bottom: 30px;

}



.faq-copy .section-head h2 {

  font-size: clamp(38px, 4vw, 46px);

}



.faq-image {

  min-height: 530px;

  overflow: hidden;

}



.faq-image img {

  width: 100%;

  height: 100%;

  object-fit: cover;

}



.accordion {

  display: grid;

  gap: 18px;

}



.accordion__item {

  border-radius: 22px;

  overflow: hidden;

  border: 1px solid var(--line);

  background: var(--white);

  box-shadow: 0 12px 28px rgba(20, 52, 78, 0.08);

}



.accordion__heading {

  margin: 0;

  font: inherit;

}



.accordion__button {

  width: 100%;

  min-height: 56px;

  border: 0;

  padding: 16px 20px;

  display: flex;

  align-items: center;

  justify-content: space-between;

  gap: 18px;

  text-align: left;

  color: var(--white);

  background: linear-gradient(135deg, var(--blue), var(--blue-dark) 72%, var(--senegal-green));

  font-weight: 900;

  cursor: pointer;

}



.accordion__button span {

  min-width: 20px;

  width: 20px;

  height: 20px;

  border-radius: 50%;

  display: grid;

  place-items: center;

  color: var(--blue);

  background: var(--white);

  font-size: 14px;

  line-height: 1;

}



.accordion__panel {

  display: none;

  padding: 20px;

  color: var(--muted);

}



.accordion__item.is-open .accordion__panel {

  display: block;

}



.accordion__item.is-open .accordion__button {

  color: var(--muted);

  background: var(--white);

}



.accordion__item.is-open .accordion__button span {

  color: var(--white);

  background: var(--blue);

}



.quote-block {

  padding: 96px 0;

}



.quote-grid {

  display: grid;

  grid-template-columns: 0.85fr 1.15fr;

  gap: 76px;

  align-items: center;

}



.quote-grid--contact {

  grid-template-columns: 1fr 1fr;

  align-items: start;

  padding-top: 34px;

}



.split-copy {

  max-width: 500px;

}



.split-copy h2 {

  font-size: clamp(42px, 4.5vw, 52px);

}



.split-copy .instagram {

  display: inline-flex;

  align-items: center;

  justify-content: center;

  margin-top: 30px;

  color: var(--blue);

}



.split-copy .instagram img {

  width: 26px;

  height: 26px;

  display: block;

  object-fit: cover;

  border-radius: 7px;

}



.form-card {

  position: relative;

  overflow: hidden;

  padding: 44px 48px 48px;

  border-radius: var(--radius);

  border: 1px solid var(--line);

  background: linear-gradient(180deg, #ffffff, #fbfdff);

  box-shadow: var(--shadow);

}



.form-card--accent {

  border-top: 0;

}



.form-card p {

  color: var(--blue-deep);

  margin: 0 0 22px;

}



.lead-call {

  min-height: 122px;

  margin-bottom: 30px;

  padding: 28px 30px;

  border-radius: var(--radius);

  color: var(--white);

  background: linear-gradient(135deg, var(--blue), var(--blue-deep));

  box-shadow: 0 18px 32px rgba(46, 92, 135, 0.24);

  display: flex;

  align-items: center;

  gap: 20px;

}



.lead-call .call-icon {

  min-width: 48px;

  width: 48px;

  height: 48px;

  border-radius: 50%;

  display: grid;

  place-items: center;

  color: var(--blue);

  background: var(--white);

}



.lead-call svg {

  width: 26px;

  height: 26px;

  stroke-width: 3;

}



.lead-call strong {

  display: block;

  font-size: 20px;

  line-height: 1.2;

}



.lead-call a {

  display: inline-flex;

  align-items: center;

  color: var(--gold);

  font-size: 18px;

  font-weight: 900;

  white-space: nowrap;

}

.lead-call__phones {

  display: flex;

  align-items: center;

  gap: 10px;

  flex-wrap: nowrap;

  white-space: nowrap;

}



.quote-form {

  display: grid;

  gap: 12px;

  margin-top: 30px;

}



.form-row {

  display: grid;

  grid-template-columns: 205px 1fr;

  gap: 10px;

  align-items: start;

}



.quote-form label {

  color: var(--blue-deep);

  font-size: 15px;

  font-weight: 800;

}



.quote-form .required {

  color: #e43838;

}



.quote-form input,

.quote-form textarea {

  width: 100%;

  border: 1px solid rgba(31, 82, 125, 0.22);

  border-radius: var(--radius);

  padding: 8px 10px;

  min-height: 38px;

  color: var(--ink);

  background: #fbfdff;

  transition: border-color 0.16s ease, box-shadow 0.16s ease, background 0.16s ease;

}



.quote-form input:focus,

.quote-form textarea:focus {

  border-color: rgba(63, 126, 174, 0.72);

  box-shadow: 0 0 0 4px rgba(63, 126, 174, 0.12);

  background: var(--white);

  outline: 0;

}



.quote-form input[type="tel"] {

  max-width: none;

}



.quote-form textarea {

  min-height: 92px;

  resize: vertical;

}



.quote-form .btn {

  min-height: 44px;

  width: 150px;

  margin-left: 205px;

  padding: 10px 20px;

  border: 0;

  background: linear-gradient(135deg, var(--blue), var(--blue-dark));

  font-weight: 900;

}



.reason-list {

  margin-top: 42px;

  display: grid;

  gap: 30px;

}



.reason-pill {

  min-height: 56px;

  padding: 16px 26px 16px 20px;

  border: 0;

  border-radius: 999px;

  color: var(--white);

  background: linear-gradient(135deg, var(--blue), var(--blue-dark));

  display: flex;

  align-items: center;

  justify-content: space-between;

  font-weight: 900;

  text-align: left;

  box-shadow: 0 12px 25px rgba(38, 92, 138, 0.16);

  transition: transform 0.18s ease, box-shadow 0.18s ease;

}



.reason-pill:hover {

  transform: translateX(4px);

  box-shadow: 0 16px 30px rgba(38, 92, 138, 0.2);

}



.reason-pill.is-active,

.reason-pill[aria-pressed="true"] {

  background: linear-gradient(135deg, var(--senegal-green), var(--gold-dark));

  box-shadow: 0 16px 30px rgba(19, 138, 74, 0.2);

}



.reason-pill span {

  min-width: 17px;

  width: 17px;

  height: 17px;

  border-radius: 50%;

  display: grid;

  place-items: center;

  color: var(--blue);

  background: var(--white);

  font-size: 13px;

}



.services-page {

  padding: 86px 0 20px;

}



.service-feature {

  position: relative;

  display: grid;

  grid-template-columns: 1fr 1fr;

  align-items: center;

  margin: 0 0 92px;

}



.service-feature:nth-child(even) .service-image {

  grid-column: 2;

}



.service-feature:nth-child(even) .service-panel {

  grid-column: 1;

  grid-row: 1;

  margin-left: 90px;

  margin-right: -70px;

}



.service-feature:nth-child(odd) .service-panel {

  margin-left: -70px;

  margin-right: 90px;

}



.service-image {

  position: relative;

  height: 400px;

  overflow: hidden;

  border-radius: var(--radius);

  background: var(--blue-ink);

  box-shadow: var(--shadow-soft);

}



.service-image::after {

  content: "";

  position: absolute;

  inset: auto 0 0;

  height: 7px;

  background: linear-gradient(90deg, var(--senegal-green), var(--gold), var(--senegal-red));

}



.service-image img {

  width: 100%;

  height: 100%;

  object-fit: cover;

  transition: transform 0.45s ease, filter 0.45s ease;

}



.service-feature:hover .service-image img {

  transform: scale(1.035);

  filter: saturate(1.04) contrast(1.02);

}



.service-panel {

  position: relative;

  overflow: hidden;

  isolation: isolate;

  z-index: 2;

  padding: 42px 40px 36px;

  border-radius: var(--radius);

  border: 1px solid var(--line);

  background: linear-gradient(180deg, #ffffff, #fbfdff);

  box-shadow: var(--shadow);

}



.service-panel::after {

  content: "";

  position: absolute;

  right: -58px;

  bottom: -58px;

  width: 190px;

  height: 190px;

  border-radius: 50%;

  background:

    repeating-linear-gradient(135deg, rgba(230, 185, 111, 0.18) 0 3px, transparent 3px 17px),

    radial-gradient(circle, rgba(19, 138, 74, 0.16), transparent 68%);

  z-index: -1;

}



.check-grid {

  margin: 18px 0 30px;

  display: grid;

  grid-template-columns: repeat(2, minmax(0, 1fr));

  gap: 18px 30px;

}



.check-item {

  display: grid;

  grid-template-columns: 24px 1fr;

  gap: 14px;

  align-items: start;

  color: var(--muted);

  line-height: 1.35;

  font-weight: 700;

}



.check-item svg {

  width: 24px;

  height: 24px;

  color: var(--blue);

  stroke-width: 2.2;

}



.process {

  padding: 84px 0 56px;

  color: var(--white);

}



.process .section-head h2 {

  color: var(--white);

}



.process-grid {

  display: grid;

  grid-template-columns: repeat(4, 1fr);

  gap: 18px;

}



.process-card {

  position: relative;

  min-height: 222px;

  padding: 42px 38px 28px;

  border-radius: var(--radius);

  overflow: hidden;

  border: 1px solid rgba(255, 255, 255, 0.14);

  background: rgba(28, 80, 119, 0.72);

  box-shadow: 0 18px 36px rgba(0, 0, 0, 0.16);

  backdrop-filter: blur(10px);

  transition: transform 0.2s ease, background 0.2s ease;

}



.process-card:hover {

  transform: translateY(-4px);

  background: rgba(37, 100, 147, 0.78);

}



.process-card h3 {

  margin: 0 0 20px;

  color: var(--white);

  font-size: 20px;

  line-height: 1.05;

  font-weight: 900;

}



.process-card p {

  margin: 0;

  font-weight: 800;

}



.process-card span {

  position: absolute;

  right: 24px;

  bottom: 10px;

  color: rgba(255, 255, 255, 0.22);

  font-size: 48px;

  font-weight: 900;

}



.about-section {

  padding: 92px 0;

}



.about-grid {

  display: grid;

  grid-template-columns: 1fr 1fr;

  gap: 32px;

  align-items: center;

}



.about-photo {

  position: relative;

}



.about-photo > img {

  width: 100%;

  height: 535px;

  object-fit: cover;

  border-radius: var(--radius);

  box-shadow: var(--shadow-soft);

}



.stat-float {

  position: absolute;

  left: 30%;

  bottom: -50px;

  min-width: 238px;

  padding: 22px;

  border-radius: var(--radius);

  background: var(--white);

  box-shadow: var(--shadow);

  display: flex;

  gap: 16px;

  align-items: center;

}



.stat-float .icon-disc {

  width: 46px;

  height: 46px;

  margin: 0;

}



.stat-float strong {

  display: block;

  color: var(--blue);

  font-size: 30px;

  line-height: 1;

}



.stat-float span {

  display: block;

  color: var(--muted);

  font-weight: 800;

}



.about-copy {

  padding-left: 26px;

}



.about-copy h2 {

  margin: 14px 0 24px;

  font-size: clamp(40px, 4vw, 52px);

  line-height: 1.18;

  font-weight: 900;

}



.about-copy p {

  color: var(--muted);

  font-size: 17px;

  font-weight: 700;

}



.values {

  padding: 88px 0 78px;

  background:

    linear-gradient(180deg, #fbfdff, var(--soft));

}



.values-grid {

  display: grid;

  grid-template-columns: repeat(4, 1fr);

  gap: 18px;

}



.value-card {

  min-height: 288px;

  padding: 42px 36px;

  border-radius: var(--radius);

  border: 1px solid var(--line);

  background:

    linear-gradient(180deg, #ffffff, #fbfdff);

  box-shadow: var(--shadow);

  transition: transform 0.22s ease, box-shadow 0.22s ease, border-color 0.22s ease;

}



.value-card:hover {

  border-color: rgba(230, 185, 111, 0.5);

}



.value-card .icon-disc {

  width: 54px;

  height: 54px;

}



.value-card .icon-disc svg {

  width: 30px;

  height: 30px;

  stroke-width: 2.5;

}



.numbers {

  padding: 88px 0;

}



.numbers-grid {

  display: grid;

  grid-template-columns: 1fr 1fr;

  gap: 18px;

  align-items: center;

}



.numbers-board {

  display: grid;

  grid-template-columns: repeat(2, 1fr);

  align-items: center;

}



.number-tile {

  min-height: 150px;

  padding: 34px 22px;

  display: grid;

  place-items: center;

  text-align: center;

  color: var(--blue);

  background:

    linear-gradient(180deg, #ffffff, #f8fbfe);

  border: 1px solid var(--line);

}



.number-tile:nth-child(2),

.number-tile:nth-child(3) {

  color: var(--white);

  background:

    linear-gradient(135deg, var(--gold), var(--gold-dark));

  border-radius: 4px;

  box-shadow: 0 12px 22px rgba(65, 45, 20, 0.14);

}



.number-tile strong {

  display: block;

  font-size: 52px;

  line-height: 1;

  font-weight: 900;

}



.number-tile span {

  display: block;

  margin-top: 14px;

  color: var(--ink);

  font-size: 20px;

  font-weight: 900;

}



.number-tile:nth-child(2) span,

.number-tile:nth-child(3) span {

  color: var(--white);

}



.numbers-image {

  height: 464px;

  overflow: hidden;

  border-radius: var(--radius);

  box-shadow: var(--shadow-soft);

}



.numbers-image img {

  width: 100%;

  height: 100%;

  object-fit: cover;

}



.promise {

  padding: 82px 0 84px;

  background:

    linear-gradient(180deg, #ffffff, #f8fbfe);

}



.promise-grid {

  display: grid;

  grid-template-columns: 1fr 1fr;

  gap: 34px;

  align-items: center;

}



.promise-image {

  height: 397px;

  overflow: hidden;

  border-radius: var(--radius);

  box-shadow: var(--shadow-soft);

}



.promise-image img {

  width: 100%;

  height: 100%;

  object-fit: cover;

}



.promise-copy h2 {

  margin: 14px 0 22px;

  font-size: clamp(40px, 4vw, 50px);

  line-height: 1.1;

  font-weight: 900;

}



.promise-copy p,

.promise-copy li {

  color: var(--muted);

  font-size: 17px;

}



.promise-copy ul {

  margin: 8px 0 0;

  padding-left: 20px;

}



.realizations-page {

  padding: 88px 0 96px;

  background:

    linear-gradient(180deg, #ffffff 0%, #f4f8fc 48%, #ffffff 100%);

}



.realization-intro {

  max-width: 860px;

  margin: 0 auto 54px;

  text-align: center;

}



.realization-intro h2 {

  margin: 14px 0 18px;

  font-size: clamp(38px, 4.4vw, 54px);

  line-height: 1.12;

  font-weight: 900;

}



.realization-intro p {

  margin: 0;

  color: var(--muted);

  font-size: 17px;

}



.realization-tabs {

  display: flex;

  flex-wrap: wrap;

  justify-content: center;

  gap: 10px;

  margin: 0 0 28px;

}



.realization-tab {

  min-height: 36px;

  padding: 8px 19px;

  border: 1px solid rgba(31, 82, 125, 0.16);

  border-radius: 999px;

  color: var(--blue-deep);

  background: rgba(255, 255, 255, 0.92);

  box-shadow: 0 8px 18px rgba(20, 52, 78, 0.06);

  font-size: 13px;

  font-weight: 900;

  cursor: pointer;

  transition: color 0.18s ease, background 0.18s ease, border-color 0.18s ease, transform 0.18s ease, box-shadow 0.18s ease;

}



.realization-tab:hover {

  transform: translateY(-1px);

  box-shadow: 0 12px 22px rgba(20, 52, 78, 0.1);

}



.realization-tab.is-active {

  color: var(--white);

  border-color: var(--blue-deep);

  background: var(--blue-deep);

}



.realization-tab:nth-child(2):not(.is-active) {

  color: var(--senegal-green);

  border-color: rgba(19, 138, 74, 0.24);

}



.realization-tab:nth-child(3):not(.is-active) {

  color: var(--blue-dark);

}



.realization-tab:nth-child(4):not(.is-active) {

  color: var(--teranga-clay);

  border-color: rgba(185, 103, 60, 0.24);

}



.realization-tab:nth-child(5):not(.is-active) {

  color: var(--blue-ink);

}



.results-comment-flow {

  position: relative;

  overflow: hidden;

  margin: 0 0 30px;

  padding: 8px 0 18px;

}



.results-comment-flow::before,

.results-comment-flow::after {

  content: "";

  position: absolute;

  z-index: 2;

  top: 0;

  bottom: 0;

  width: min(120px, 18vw);

  pointer-events: none;

}



.results-comment-flow::before {

  left: 0;

  background: linear-gradient(90deg, #ffffff, rgba(255, 255, 255, 0));

}



.results-comment-flow::after {

  right: 0;

  background: linear-gradient(270deg, #ffffff, rgba(255, 255, 255, 0));

}



.results-comment-track {

  display: flex;

  width: max-content;

  gap: 16px;

  animation: commentFlow 28s linear infinite;

}



.results-comment-flow:hover .results-comment-track {

  animation-play-state: paused;

}



.flow-quote-card {

  position: relative;

  flex: 0 0 330px;

  min-height: 124px;

  padding: 19px 20px 19px 56px;

  border: 1px solid rgba(31, 82, 125, 0.12);

  border-radius: var(--radius);

  background: linear-gradient(180deg, #ffffff, #f8fbfd);

  box-shadow: 0 12px 26px rgba(20, 52, 78, 0.09);

}



.flow-quote-card svg {

  position: absolute;

  top: 20px;

  left: 19px;

  width: 24px;

  height: 24px;

  color: var(--gold);

  fill: rgba(230, 185, 111, 0.2);

  stroke-width: 2.6;

}



.flow-quote-card blockquote {

  margin: 0 0 10px;

  color: #414b55;

  font-size: 14px;

  line-height: 1.45;

  font-weight: 800;

}



.flow-quote-card cite {

  color: var(--blue-deep);

  font-size: 13px;

  font-style: normal;

  font-weight: 900;

}



@keyframes commentFlow {

  from {

    transform: translateX(0);

  }



  to {

    transform: translateX(calc(-50% - 8px));

  }

}



.compare-carousel {

  position: relative;

  width: min(100%, 1060px);

  margin: 0 auto;

}



.compare-carousel__stage {

  position: relative;

}



.featured-result {

  position: relative;

  overflow: hidden;

  min-height: 395px;

  border: 1px solid rgba(21, 49, 73, 0.12);

  border-radius: var(--radius);

  background: #101820;

  box-shadow: 0 24px 54px rgba(20, 52, 78, 0.18);

}



[data-compare-slide]:not(.is-active) {

  display: none;

}



.compare-slider {

  position: relative;

  min-height: 395px;

  cursor: ew-resize;

  user-select: none;

  touch-action: none;

}



.compare-slider::after {

  content: "";

  position: absolute;

  inset: 0;

  pointer-events: none;

  border: 1px solid rgba(255, 255, 255, 0.2);

}



.compare-image {

  width: 100%;

  height: 395px;

  display: block;

  object-fit: cover;

  object-position: center center;

}



.compare-image--left {

  position: relative;

  z-index: 1;

}



.compare-layer {

  position: absolute;

  z-index: 2;

  inset: 0;

  clip-path: inset(0 0 0 var(--split));

  pointer-events: none;

}



.featured-badge {

  position: absolute;

  z-index: 4;

  top: 22px;

  padding: 8px 14px;

  border-radius: 999px;

  color: #ffffff;

  box-shadow: 0 10px 18px rgba(17, 32, 48, 0.18);

  font-size: 13px;

  font-weight: 900;

}



.compare-badge--left {

  left: 24px;

  background: var(--senegal-green);

}



.compare-badge--right {

  right: 24px;

  background: var(--senegal-red);

}



.comparison-handle {

  position: absolute;

  z-index: 5;

  top: 0;

  bottom: 0;

  left: var(--split);

  width: 2px;

  background: rgba(255, 255, 255, 0.72);

  transform: translateX(-50%);

}



.comparison-handle::before {

  content: "";

  position: absolute;

  top: 50%;

  left: 50%;

  width: 42px;

  height: 42px;

  border-radius: 999px;

  background: rgba(255, 255, 255, 0.96);

  box-shadow: 0 10px 22px rgba(14, 31, 47, 0.18);

  transform: translate(-50%, -50%);

}



.comparison-handle svg {

  position: absolute;

  top: 50%;

  left: 50%;

  width: 19px;

  height: 19px;

  color: var(--blue-deep);

  stroke-width: 2.4;

  transform: translate(-50%, -50%);

}



.compare-range {

  position: absolute;

  z-index: 6;

  inset: 0;

  width: 100%;

  height: 100%;

  opacity: 0;

  cursor: ew-resize;

}



.compare-nav {

  position: absolute;

  z-index: 8;

  top: 50%;

  width: 46px;

  height: 46px;

  display: inline-flex;

  align-items: center;

  justify-content: center;

  border: 1px solid rgba(31, 82, 125, 0.14);

  border-radius: 999px;

  color: var(--blue-deep);

  background: rgba(255, 255, 255, 0.96);

  box-shadow: 0 14px 28px rgba(20, 52, 78, 0.16);

  cursor: pointer;

  transform: translateY(-50%);

  transition: transform 0.18s ease, box-shadow 0.18s ease, background 0.18s ease;

}



.compare-nav:hover {

  background: #ffffff;

  box-shadow: 0 18px 34px rgba(20, 52, 78, 0.2);

  transform: translateY(-50%) scale(1.04);

}



.compare-nav svg {

  width: 24px;

  height: 24px;

  stroke-width: 3;

}



.compare-nav--prev {

  left: -23px;

}



.compare-nav--next {

  right: -23px;

}



.result-case-grid {

  display: grid;

  grid-template-columns: repeat(4, minmax(0, 1fr));

  gap: 18px;

  margin-top: 24px;

}



.result-case-card {

  overflow: hidden;

  border: 1px solid rgba(31, 82, 125, 0.12);

  border-radius: var(--radius);

  background: #ffffff;

  box-shadow: 0 14px 30px rgba(20, 52, 78, 0.1);

  transition: transform 0.2s ease, box-shadow 0.2s ease, opacity 0.18s ease;

}



.result-case-card[hidden] {

  display: none;

}



.result-case-card:hover {

  transform: translateY(-3px);

  box-shadow: 0 18px 34px rgba(20, 52, 78, 0.15);

}



.result-case-media {

  height: 158px;

  overflow: hidden;

  background: #111820;

}



.result-case-media img {

  width: 100%;

  height: 100%;

  object-fit: cover;

  transition: transform 0.35s ease, filter 0.35s ease;

}



.result-case-card:hover .result-case-media img {

  filter: saturate(1.04) contrast(1.02);

  transform: scale(1.035);

}



.result-case-body {

  padding: 15px 16px 17px;

}



.result-case-body span {

  display: block;

  margin-bottom: 3px;

  color: var(--gold-dark);

  font-size: 12px;

  font-weight: 900;

}



.result-case-body h3 {

  margin: 0 0 3px;

  color: var(--blue-deep);

  font-size: 17px;

  line-height: 1.16;

  font-weight: 900;

}



.result-case-body p,

.result-case-body time {

  display: block;

  margin: 0;

  color: var(--muted);

  font-size: 13px;

  line-height: 1.35;

  font-weight: 800;

}



.results-testimonials {

  margin-top: 34px;

}



.results-testimonials h2 {

  margin: 0 0 16px;

  text-align: center;

  color: var(--blue-deep);

  font-size: 24px;

  line-height: 1.2;

  font-weight: 900;

}



.results-testimonial-grid {

  display: grid;

  grid-template-columns: repeat(3, minmax(0, 1fr));

  gap: 18px;

}



.result-quote-card {

  position: relative;

  min-height: 132px;

  padding: 21px 20px 20px 58px;

  border: 1px solid rgba(31, 82, 125, 0.12);

  border-radius: var(--radius);

  background: linear-gradient(180deg, #ffffff, #f8fbfd);

  box-shadow: 0 12px 26px rgba(20, 52, 78, 0.1);

}



.result-quote-card svg {

  position: absolute;

  top: 20px;

  left: 20px;

  width: 24px;

  height: 24px;

  color: var(--gold);

  fill: rgba(230, 185, 111, 0.2);

  stroke-width: 2.6;

}



.result-quote-card blockquote {

  margin: 0 0 12px;

  color: #414b55;

  font-size: 14px;

  line-height: 1.45;

  font-weight: 800;

}



.result-quote-card cite {

  color: var(--blue-deep);

  font-size: 13px;

  font-style: normal;

  font-weight: 900;

}



.result-stats {

  display: grid;

  grid-template-columns: repeat(3, 1fr);

  gap: 18px;

  margin-bottom: 46px;

}



.result-stat {

  min-height: 138px;

  padding: 28px 24px;

  border-radius: var(--radius);

  border: 1px solid var(--line);

  background:

    linear-gradient(180deg, #ffffff, #fbfdff);

  box-shadow: var(--shadow-soft);

  text-align: center;

  transition: transform 0.22s ease, box-shadow 0.22s ease;

}



.result-stat strong {

  display: block;

  color: var(--blue);

  font-size: 42px;

  line-height: 1;

  font-weight: 900;

}



.result-stat span {

  display: block;

  margin-top: 12px;

  color: var(--muted);

  font-weight: 900;

}



.realization-grid {

  display: grid;

  grid-template-columns: repeat(2, minmax(0, 1fr));

  gap: 28px;

}



.realization-card {

  position: relative;

  overflow: hidden;

  border-radius: var(--radius);

  border: 1px solid var(--line);

  background: var(--white);

  box-shadow: var(--shadow);

  transition: transform 0.22s ease, box-shadow 0.22s ease;

}



.realization-card:hover {

  transform: translateY(-4px);

  box-shadow: 0 24px 42px rgba(22, 39, 56, 0.18);

}



.realization-card--wide {

  grid-column: 1 / -1;

  display: grid;

  grid-template-columns: 1fr 0.86fr;

}



.realization-card--video-pair {

  grid-column: 1 / -1;

  display: block;

  background:

    linear-gradient(135deg, rgba(244, 247, 251, 0.98), rgba(255, 255, 255, 0.98)),

    linear-gradient(90deg, rgba(19, 138, 74, 0.12), transparent 45%, rgba(230, 185, 111, 0.12));

}



.realization-video-pair {

  width: 100%;

  margin: 0;

  display: grid;

  grid-template-columns: repeat(2, minmax(0, 1fr));

  gap: 18px;

  padding: 22px;

}



.realization-video-pair .proof-video-card {

  box-shadow: 0 14px 30px rgba(22, 39, 56, 0.12);

}



.realization-media {

  position: relative;

  background: #111820;

}



.realization-media video,

.realization-media img {

  width: 100%;

  height: 430px;

  display: block;

  object-fit: cover;

  transition: transform 0.45s ease, filter 0.45s ease;

}



.realization-card:hover .realization-media video,

.realization-card:hover .realization-media img {

  transform: scale(1.025);

  filter: saturate(1.04) contrast(1.02);

}



.realization-card--wide .realization-media video,

.realization-card--wide .realization-media img {

  height: 100%;

  min-height: 420px;

}



.realization-tag {

  position: absolute;

  left: 18px;

  top: 18px;

  z-index: 2;

  padding: 8px 14px;

  border-radius: 999px;

  color: var(--white);

  background: rgba(201, 148, 69, 0.96);

  box-shadow: 0 10px 18px rgba(41, 27, 8, 0.18);

  font-size: 13px;

  font-weight: 900;

}



.realization-body {

  padding: 28px 30px 32px;

}



.realization-body h3 {

  margin: 0 0 10px;

  color: var(--blue-dark);

  font-size: 23px;

  line-height: 1.15;

  font-weight: 900;

}



.realization-body p {

  margin: 0 0 18px;

  color: var(--muted);

}



.client-return {

  margin: 0;

  padding: 20px;

  border-left: 4px solid var(--gold);

  border-radius: var(--radius);

  background:

    linear-gradient(180deg, var(--soft), #ffffff);

}



.client-return p {

  margin: 0 0 14px;

  color: #3f4147;

  font-size: 16px;

  font-weight: 800;

}



.client-return cite {

  color: var(--blue-deep);

  font-style: normal;

  font-weight: 900;

}



.realization-cta {

  margin-top: 54px;

  padding: 44px;

  border-radius: var(--radius);

  color: var(--white);

  background:

    linear-gradient(135deg, rgba(63, 121, 170, 0.98), rgba(31, 82, 125, 0.96)),

    radial-gradient(circle at 90% 10%, rgba(229, 182, 111, 0.28), transparent 36%);

  display: flex;

  justify-content: space-between;

  gap: 30px;

  align-items: center;

}



.realization-cta h2 {

  margin: 0 0 8px;

  font-size: clamp(30px, 3vw, 40px);

  line-height: 1.15;

}



.realization-cta p {

  margin: 0;

  max-width: 670px;

  font-weight: 800;

}



.contact-section {

  padding: 92px 0 82px;

}



.contact-info-grid {

  display: grid;

  grid-template-columns: 1fr 1.2fr;

  gap: 46px;

  align-items: center;

}



.contact-cards {

  display: grid;

  grid-template-columns: repeat(2, minmax(0, 1fr));

  gap: 24px;

}



.contact-card {

  min-height: 170px;

  padding: 24px;

  border-radius: var(--radius);

  border: 1px solid var(--line);

  background: #ffffff;

  box-shadow: var(--shadow-soft);

  transition: transform 0.22s ease, box-shadow 0.22s ease;

}



.contact-card:nth-child(2),

.contact-card:nth-child(3) {

  color: var(--white);

  background: var(--gold);

  box-shadow: 0 12px 24px rgba(80, 55, 22, 0.16);

}



.contact-card h3 {

  margin: 14px 0 4px;

  color: var(--blue-dark);

  font-size: 20px;

  font-weight: 900;

}



.contact-card:nth-child(2) h3,

.contact-card:nth-child(3) h3 {

  color: var(--white);

}



.contact-card p {

  margin: 0;

  color: var(--muted);

  font-weight: 800;

}



.contact-card:nth-child(2) p,

.contact-card:nth-child(3) p {

  color: var(--white);

}



.contact-card .icon-disc {

  width: 54px;

  height: 54px;

  margin: 0;

}



.contact-card:nth-child(2) .icon-disc,

.contact-card:nth-child(3) .icon-disc {

  color: var(--blue);

  background: var(--white);

}



.map-wrap h2 {

  margin: 16px 0 20px;

  font-size: clamp(40px, 4vw, 48px);

  line-height: 1.15;

  font-weight: 900;

}



.map-wrap p {

  color: var(--muted);

  font-size: 17px;

}



.map {

  width: 100%;

  height: 252px;

  border: 1px solid var(--line);

  border-radius: var(--radius);

  margin-top: 26px;

  box-shadow: var(--shadow-soft);

}



.site-footer {

  color: var(--white);

  background:

    linear-gradient(135deg, #123b5b, var(--blue-dark) 62%, #326f9f);

  padding: 58px 0 58px;

}



.footer-grid {

  display: grid;

  grid-template-columns: 1.1fr 1fr 1fr 1.1fr;

  gap: 54px;

}



.footer-logo {

  width: 96px;

  filter: brightness(0) invert(1);

  opacity: 0.96;

}



.footer-about p {

  margin: 26px 0 0;

  max-width: 300px;

  font-weight: 800;

}



.footer-col h3 {

  margin: 0 0 22px;

  font-size: 22px;

  line-height: 1.2;

  font-weight: 900;

}



.footer-line {

  width: 60px;

  height: 3px;

  margin-bottom: 22px;

  background: var(--gold);

}



.footer-col a,

.footer-contact__item {

  transition: color 0.18s ease, transform 0.18s ease;

}



.footer-col a:hover,

.footer-contact__item:hover {

  color: #ffe2ad;

  transform: translateX(3px);

}



.footer-col ul {

  list-style: none;

  margin: 0;

  padding: 0;

  display: grid;

  gap: 9px;

  font-weight: 900;

}



.footer-contact {

  display: grid;

  gap: 26px;

}



.footer-contact__item {

  display: grid;

  grid-template-columns: 24px 1fr;

  gap: 10px;

  align-items: start;

  font-weight: 900;

}



.footer-contact__item svg {

  width: 24px;

  height: 24px;

  fill: currentColor;

  stroke-width: 3;

}



.footer-bottom {

  margin-top: 70px;

  padding-top: 36px;

  border-top: 1px solid rgba(255, 255, 255, 0.3);

  display: flex;

  justify-content: space-between;

  gap: 24px;

  font-size: 14px;

  font-weight: 900;

}



.footer-bottom__right {

  display: flex;

  flex-direction: column;

  align-items: flex-end;

  gap: 10px;

  text-align: right;

}



.footer-credit {

  color: rgba(255, 255, 255, 0.42);

  font-size: 11px;

  font-weight: 500;

}



.site-footer {

  color: var(--white);

  background: #3f79aa;

  padding: 52px 0 56px;

}



.footer-logo {

  opacity: 1;

}



.footer-col a,

.footer-contact__item {

  transition: none;

}



.footer-col a:hover,

.footer-contact__item:hover {

  color: var(--white);

  transform: none;

}



.reveal {

  opacity: 0;

  transform: translateY(20px);

  transition: opacity 0.6s ease, transform 0.6s ease;

}



.reveal.is-visible {

  opacity: 1;

  transform: translateY(0);

}



@media (max-width: 1100px) {

  .trust-grid {

    display: grid;

    grid-template-columns: repeat(2, 1fr);

    perspective: 1200px;

  }



  .trust-grid,

  .process-grid,

  .values-grid {

    grid-template-columns: repeat(2, 1fr);

  }



  .trust-card:hover,

  .trust-card:focus {

    transform: translateY(-6px);

  }



  .home-services__layout,

  .proof-grid,

  .faq-split,

  .quote-grid,

  .quote-grid--contact,

  .about-grid,

  .numbers-grid,

  .promise-grid,

  .senegal-space__grid,

  .contact-info-grid {

    grid-template-columns: 1fr;

  }



  .senegal-space {

    background:

      linear-gradient(180deg, rgba(5, 15, 24, 0.86) 0%, rgba(10, 35, 53, 0.74) 54%, #f7fbfc 54.2%, #ffffff 100%),

      url("assets/monument-renaissance-senegal-bg.webp"),

      linear-gradient(180deg, rgba(12, 43, 67, 0.96), #ffffff);

    background-position: center top, center 28%, center;

    background-repeat: no-repeat;

    background-size: auto, 100% auto, auto;

  }



  .senegal-space::before {

    clip-path: polygon(0 0, 100% 0, 100% 56%, 0 56%);

  }



  .senegal-space::after {

    right: -8%;

    bottom: 46%;

    height: 18%;

  }



  .senegal-space__visual {

    min-height: 0;

    padding: 30px 18px;

  }



  .home-services__image {

    position: static;

    height: 420px;

  }



  .service-teasers {

    padding: 28px 24px 0;

    transform: none;

  }



  .home-services__layout--centered .service-teasers {

    grid-template-columns: repeat(3, minmax(0, 1fr));

    padding: 0;

  }



  .service-timeline {

    width: min(920px, calc(100% - 40px));

  }



  .service-timeline__item {

    grid-template-columns: minmax(0, 1fr) 78px minmax(0, 1fr);

  }



  .service-timeline__card {

    padding: 28px 30px;

  }



  .faq-copy {

    padding: 72px 32px;

  }



  .service-feature,

  .service-feature:nth-child(even) {

    grid-template-columns: 1fr;

  }



  .service-feature:nth-child(even) .service-image,

  .service-feature:nth-child(even) .service-panel,

  .service-feature:nth-child(odd) .service-panel {

    grid-column: auto;

    grid-row: auto;

    margin: -70px 28px 0;

  }



  .footer-grid {

    grid-template-columns: repeat(2, 1fr);

  }



  .realization-card--wide {

    grid-template-columns: 1fr;

  }



  .realization-card--video-pair {

    grid-template-columns: 1fr;

  }



  .realization-card--wide .realization-media video,

  .realization-card--wide .realization-media img {

    height: 430px;

    min-height: 0;

  }

}



@media (max-width: 820px) {

  .topbar__inner,

  .nav__inner,

  .container {

    width: min(100% - 28px, 1216px);

  }



  .topbar__inner {

    flex-wrap: wrap;

    gap: 8px 18px;

    padding: 8px 0;

  }



  .topbar__socials {

    margin-left: 0;

  }



  .nav__inner {

    height: 92px;

  }



  .brand img {

    width: 78px;

  }



  .menu-button {

    display: inline-flex;

  }



  .main-nav {

    position: absolute;

    left: 14px;

    right: 14px;

    top: calc(100% - 10px);

    padding: 18px;

    border-radius: 10px;

    background: var(--white);

    box-shadow: var(--shadow);

    flex-direction: column;

    align-items: stretch;

    gap: 4px;

    display: none;

  }



  .main-nav.is-open {

    display: flex;

  }



  .main-nav a {

    padding: 10px 12px;

  }



  .hero,

  .hero--home,

  .hero--subpage,

  .hero--cleaning {

    min-height: 520px;

  }



  .hero--subpage .hero__content {

    text-align: center;

  }



  .hero--subpage h1,

  .hero--subpage p {

    margin-left: auto;

    margin-right: auto;

  }



  .hero__arrow,

  .scroll-dot {

    display: none;

  }



  .trust-grid,

  .testimonial-grid,

  .realization-grid,

  .result-stats,

  .process-grid,

  .values-grid,

  .contact-cards,

  .footer-grid {

    grid-template-columns: 1fr;

  }



  .trust-card {

    height: 340px;

  }



  .trust-card:hover,

  .trust-card:focus {

    transform: translateY(-4px);

  }



  .trust-card__front {

    padding: 34px 24px;

  }



  .trust-card__back {

    padding: 24px;

  }



  .trust-card__back img {

    height: 148px;

    margin-bottom: 14px;

  }



  .trust-card__back h3 {

    font-size: 21px;

  }



  .trust-card__back p {

    font-size: 15px;

    line-height: 1.34;

  }



  .section-head h2,

  .split-copy h2,

  .contact-intro h1,

  .about-copy h2,

  .promise-copy h2,

  .map-wrap h2 {

    font-size: 36px;

  }



  .teaser-card,

  .service-panel,

  .form-card {

    padding: 30px 24px;

    border-radius: 18px;

  }



  .home-services__layout--centered .service-teasers {

    grid-template-columns: 1fr;

  }



  .home-services__layout--centered .teaser-card {

    min-height: 240px;

  }



  .senegal-space__copy {

    text-align: center;

  }



  .senegal-space__copy h2,

  .senegal-space__copy p {

    margin-left: auto;

    margin-right: auto;

  }



  .senegal-note {

    grid-template-columns: 48px minmax(0, 1fr);

    gap: 10px 16px;

  }



  .senegal-note span {

    grid-column: 2;

  }



  .service-timeline {

    width: min(100% - 28px, 620px);

    gap: 28px;

    padding-left: 34px;

  }



  .service-timeline::before {

    left: 33px;

  }



  .service-timeline__item {

    min-height: 0;

    grid-template-columns: 66px minmax(0, 1fr);

  }



  .service-timeline__marker {

    grid-column: 1;

    width: 56px;

    height: 56px;

  }



  .service-timeline__marker img,

  .service-timeline__marker svg {

    width: 29px;

    height: 29px;

  }



  .service-timeline__item--left .service-timeline__card,

  .service-timeline__item--right .service-timeline__card {

    grid-column: 2;

    text-align: left;

  }



  .service-timeline__item--left .service-timeline__card span,

  .service-timeline__item--left .service-timeline__card p {

    margin-left: 0;

  }



  .service-timeline__item--left.reveal,

  .service-timeline__item--right.reveal {

    transform: translateY(26px);

  }



  .service-timeline__item.reveal.is-visible {

    transform: translateY(0);

  }



  .service-image {

    height: 330px;

  }



  .check-grid {

    grid-template-columns: 1fr;

  }



  .form-row {

    grid-template-columns: 1fr;

    gap: 4px;

  }



  .quote-form .btn {

    margin-left: 0;

  }



  .footer-bottom {

    flex-direction: column;

  }



  .footer-bottom__right {

    align-items: flex-start;

    text-align: left;

  }



  .home-proof,

  .realizations-page {

    padding: 72px 0;

  }



  .proof-media video,

  .proof-media img,

  .realization-media video,

  .realization-media img,

  .realization-card--wide .realization-media video,

  .realization-card--wide .realization-media img {

    height: 360px;

  }



  .realization-video-pair {

    grid-template-columns: 1fr;

  }



  .realization-body {

    padding: 24px;

  }



  .realization-cta {

    padding: 30px 24px;

    flex-direction: column;

    align-items: stretch;

  }

}



@media (max-width: 560px) {

  .topbar__item {

    white-space: normal;

  }



  .hero__content {

    width: calc(100% - 28px);

  }



  .hero h1,

  .hero--home h1,

  .hero--subpage h1,

  .hero--cleaning h1 {

    max-width: 340px;

    margin-left: auto;

    margin-right: auto;

    font-size: 30px;

    overflow-wrap: break-word;

  }



  .hero p {

    max-width: 340px;

    font-size: 15px;

  }



  .hero--home {

    min-height: 560px;

  }



  .hero__actions {

    gap: 12px;

  }



  .btn {

    width: 100%;

    padding-left: 18px;

    padding-right: 18px;

  }



  .senegal-space {

    padding: 70px 0;

  }



  .senegal-space__copy h2 {

    font-size: 31px;

  }



  .senegal-space__visual {

    padding: 18px 12px;

  }



  .senegal-motif::before {

    inset: 14px;

  }



  .senegal-note {

    grid-template-columns: 1fr;

    justify-items: center;

    text-align: center;

    padding: 22px 18px;

  }



  .senegal-note span {

    grid-column: auto;

  }



  .service-feature:nth-child(even) .service-panel,

  .service-feature:nth-child(odd) .service-panel {

    margin: -42px 14px 0;

  }



  .about-photo > img,

  .numbers-image,

  .promise-image,

  .faq-image {

    height: 320px;

  }



  .proof-media video,

  .proof-media img,

  .realization-media video,

  .realization-media img,

  .realization-card--wide .realization-media video,

  .realization-card--wide .realization-media img {

    height: 300px;

  }



  .stat-float {

    position: static;

    margin: -30px auto 0;

  }



  .number-tile strong {

    font-size: 40px;

  }

}



@media (max-width: 1080px) {

  .featured-result,

  .compare-slider,

  .compare-image {

    min-height: 370px;

  }



  .compare-image {

    height: 370px;

  }



  .result-case-grid {

    grid-template-columns: repeat(2, minmax(0, 1fr));

  }



  .results-testimonial-grid {

    grid-template-columns: 1fr;

  }



  .compare-nav {

    width: 42px;

    height: 42px;

  }



  .compare-nav--prev {

    left: 12px;

  }



  .compare-nav--next {

    right: 12px;

  }

}



@media (max-width: 820px) {

  .realization-intro {

    margin-bottom: 28px;

  }



  .realization-tabs {

    justify-content: flex-start;

    overflow-x: auto;

    flex-wrap: nowrap;

    padding-bottom: 4px;

    scrollbar-width: none;

  }



  .realization-tabs::-webkit-scrollbar {

    display: none;

  }



  .realization-tab {

    flex: 0 0 auto;

  }



  .results-comment-flow {

    margin-bottom: 22px;

  }



  .flow-quote-card {

    flex-basis: 286px;

    min-height: 128px;

  }



  .featured-result {

    min-height: 0;

    overflow: hidden;

  }



  .compare-slider,

  .compare-image {

    min-height: 320px;

  }



  .compare-image {

    height: 320px;

  }



  .compare-badge--left {

    left: 16px;

  }



  .compare-badge--right {

    right: 16px;

  }

}



@media (max-width: 560px) {

  .realization-tabs {

    margin-left: -4px;

    margin-right: -4px;

  }



  .realization-tab {

    min-height: 34px;

    padding: 8px 15px;

    font-size: 12px;

  }



  .results-comment-flow::before,

  .results-comment-flow::after {

    width: 42px;

  }



  .results-comment-track {

    gap: 12px;

    animation-duration: 24s;

  }



  .flow-quote-card {

    flex-basis: 260px;

    padding: 50px 18px 18px;

  }



  .compare-slider,

  .compare-image {

    min-height: 255px;

  }



  .compare-image {

    height: 255px;

  }



  .result-case-grid {

    grid-template-columns: 1fr;

  }



  .featured-badge {

    top: 14px;

    padding: 7px 12px;

    font-size: 12px;

  }



  .compare-nav {

    width: 38px;

    height: 38px;

  }



  .compare-nav svg {

    width: 21px;

    height: 21px;

  }



  .comparison-handle::before {

    width: 36px;

    height: 36px;

  }



  .result-case-media {

    height: 190px;

  }



  .result-quote-card {

    padding: 52px 20px 20px;

  }

}





/* Contact map switcher */

.map-switcher {

  display: inline-flex;

  align-items: center;

  gap: 8px;

  margin-bottom: 26px;

  padding: 6px;

  border: 1px solid var(--line);

  border-radius: 999px;

  background: rgba(255, 255, 255, 0.88);

  box-shadow: 0 12px 30px rgba(20, 58, 86, 0.08);

}



.map-switcher__button {

  display: inline-flex;

  align-items: center;

  justify-content: center;

  gap: 9px;

  min-height: 46px;

  padding: 10px 18px;

  border: 0;

  border-radius: 999px;

  color: var(--blue-dark);

  background: transparent;

  font: inherit;

  font-size: 14px;

  font-weight: 900;

  cursor: pointer;

  transition: color 180ms ease, background 180ms ease, box-shadow 180ms ease, transform 180ms ease;

}



.map-switcher__button svg {

  width: 18px;

  height: 18px;

}



.map-switcher__button:hover {

  transform: translateY(-1px);

}



.map-switcher__button.is-active {

  color: var(--white);

  background: linear-gradient(135deg, var(--blue), var(--blue-dark));

  box-shadow: 0 8px 20px rgba(20, 58, 86, 0.2);

}



.map-switcher__button:focus-visible {

  outline: 3px solid rgba(218, 159, 62, 0.35);

  outline-offset: 3px;

}



.map-panel {

  animation: mapPanelIn 240ms ease both;

}



.map-panel[hidden] {

  display: none;

}



.map-address {

  display: flex;

  align-items: center;

  gap: 13px;

  width: fit-content;

  margin-top: 18px;

  padding: 13px 16px;

  border: 1px solid rgba(31, 93, 134, 0.13);

  border-radius: 14px;

  color: var(--blue-dark);

  background: rgba(31, 93, 134, 0.06);

  font-size: 14px;

  line-height: 1.45;

}



.map-address svg {

  flex: 0 0 auto;

  width: 22px;

  height: 22px;

  color: var(--gold);

}



.map--headquarters {

  height: 320px;

}



.map-directions {

  display: inline-flex;

  align-items: center;

  justify-content: center;

  gap: 9px;

  margin-top: 16px;

  padding: 12px 18px;

  border-radius: 999px;

  color: var(--white);

  background: var(--gold);

  box-shadow: 0 10px 22px rgba(190, 130, 44, 0.22);

  font-weight: 900;

  text-decoration: none;

  transition: transform 180ms ease, box-shadow 180ms ease;

}



.map-directions:hover {

  transform: translateY(-2px);

  box-shadow: 0 14px 28px rgba(190, 130, 44, 0.28);

}



.map-directions svg {

  width: 18px;

  height: 18px;

}



@keyframes mapPanelIn {

  from { opacity: 0; transform: translateY(8px); }

  to { opacity: 1; transform: translateY(0); }

}



@media (max-width: 620px) {

  .map-switcher {

    display: grid;

    grid-template-columns: 1fr 1fr;

    width: 100%;

    border-radius: 18px;

  }



  .map-switcher__button {

    min-width: 0;

    padding-inline: 10px;

    border-radius: 13px;

    font-size: 13px;

  }



  .map,

  .map--headquarters {

    height: 300px;

  }
.footer-contact__phones {
  display: flex !important;
  align-items: center !important;
  gap: 10px !important;
  flex-wrap: nowrap !important;
}

.footer-contact__phones i {
  flex: 0 0 auto !important;
}

.footer-contact__phones span,
.footer-phone-line {
  display: inline-flex !important;
  align-items: center !important;
  gap: 5px !important;
  white-space: nowrap !important;
  flex-wrap: nowrap !important;
  font-size: 14px !important;
  line-height: 1.2 !important;
}

.footer-phone-line a {
  color: inherit !important;
  text-decoration: none !important;
  display: inline !important;
  white-space: nowrap !important;
}