:root {

  --bg: #060606;

  --panel: #101011;

  --panel-2: #151516;

  --text: #F7F5EF;

  --muted: #A8A7A2;

  --yellow: #F3D045;

  --pink: #C62561;

  --border: rgba(255, 255, 255, .13);

  --max: 1280px;

  --radius: 2px;

}



* {

  box-sizing: border-box

}



html {

  scroll-behavior: smooth;

  background: var(--bg)

}



body {

  margin: 0;

  background: var(--bg);

  color: var(--text);

  font-family: "Poppins", Arial, sans-serif;

  overflow-x: hidden

}



a {

  color: inherit;

  text-decoration: none

}



button,

input,

textarea,

select {

  font: inherit

}



img,

video {

  max-width: 100%;

  display: block

}



.wrap {

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

  margin: auto

}



.display,

h1,

h2,

h3,

.clock,

.metric strong {

  font-family: "Gemunu Libre", "Arial Narrow", sans-serif;

  font-weight: 800;

  letter-spacing: -.025em

}



.eyebrow {

  font: 700 12px/1.1 "Poppins", sans-serif;

  letter-spacing: .17em;

  text-transform: uppercase;

  color: var(--yellow)

}



.subtle {

  color: var(--muted)

}



.topline {

  height: 34px;

  background: var(--yellow);

  color: #080808;

  display: flex;

  align-items: center;

  justify-content: center;

  font-size: 11px;

  font-weight: 800;

  letter-spacing: .12em;

  text-transform: uppercase;

  white-space: nowrap;

  overflow: hidden

}



.nav {

  height: 80px;

  position: fixed;

  top: 34px;

  left: 0;

  right: 0;

  z-index: 50;

  display: flex;

  align-items: center;

  background: linear-gradient(180deg, rgba(0, 0, 0, .9), rgba(0, 0, 0, .25));

  border-bottom: 0;

  transition: top .22s ease, background .22s ease, box-shadow .22s ease

}



.nav.scrolled {

  background: rgba(6, 6, 6, .97);

  backdrop-filter: blur(18px);

  box-shadow: 0 12px 30px rgba(0, 0, 0, .28)

}



.nav .wrap {

  display: flex;

  align-items: center;

  gap: 28px;

  justify-content: space-between;

}



.nav .nav-right {

  display: flex;

  align-items: center;

  gap: 28px;

}



.logo {

  width: 155px;

  height: auto

}



.navlinks {

  display: flex;

  align-items: center;

  gap: 25px;

  margin-left: auto;

  font-size: 11px;

  font-weight: 700;

  letter-spacing: .09em;

  text-transform: uppercase

}



.navlinks a {

  opacity: .78

}



.navlinks a:hover {

  opacity: 1;

  color: var(--yellow)

}



.lang {

  display: flex;

  gap: 7px;

  margin-left: 8px

}



.lang a {

  opacity: .55

}



.lang a.active {

  opacity: 1;

  color: var(--yellow)

}



.btn {

  display: inline-flex;

  align-items: center;

  justify-content: center;

  min-height: 48px;

  padding: 0 19px;

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

  font-size: 11px;

  font-weight: 800;

  letter-spacing: .1em;

  text-transform: uppercase;

  transition: .2s;

  background: transparent;

  cursor: pointer

}



.btn:hover {

  transform: translateY(-1px);

  border-color: rgba(255, 255, 255, .35)

}



.btn.primary {

  background: var(--pink);

  border-color: var(--pink);

  color: #fff

}



.btn.primary:hover {

  background: #dc2c72;

  border-color: #dc2c72;

}



.btn.pink {

  background: var(--pink);

  border-color: var(--pink);

  color: white

}



.btn.ghost {

  background: rgba(0, 0, 0, .28);

  backdrop-filter: blur(7px)

}



.hero {

  height: 100svh;

  min-height: 760px;

  position: relative;

  overflow: hidden;

  display: flex;

  align-items: flex-end

}



.hero video,

.hero>.heroimg {

  position: absolute;

  inset: 0;

  width: 100%;

  height: 100%;

  object-fit: cover

}



.hero:after {

  content: "";

  position: absolute;

  inset: 0;

  background: linear-gradient(90deg, rgba(0, 0, 0, .88) 0%, rgba(0, 0, 0, .52) 48%, rgba(0, 0, 0, .15) 78%), linear-gradient(0deg, rgba(0, 0, 0, .86) 0%, transparent 55%)

}



.heroContent {

  position: relative;

  z-index: 2;

  padding-bottom: 80px

}



.heroMeta {

  display: flex;

  gap: 10px;

  flex-wrap: wrap;

  margin-bottom: 18px

}



.pill {

  display: inline-flex;

  align-items: center;

  gap: 8px;

  padding: 8px 10px;

  border: 1px solid rgba(255, 255, 255, .23);

  background: rgba(0, 0, 0, .35);

  font-size: 10px;

  font-weight: 800;

  letter-spacing: .1em;

  text-transform: uppercase;

  backdrop-filter: blur(5px);

  font-family: "Poppins", Arial, sans-serif;

}



.hero h1.home_hero_title {

  font-size: clamp(68px, 9.4vw, 142px);

  line-height: .79;

  text-transform: uppercase;

  margin: 0;

  max-width: 1040px;

}



.hero h1.home_hero_title span {

  color: var(--yellow)

}



.hero p {

  font-size: 18px;

  line-height: 1.55;

  max-width: 720px;

  margin: 24px 0 28px;

  color: #e0ded8;

}



.heroBtns {

  display: flex;

  gap: 10px;

  flex-wrap: wrap

}



.scrollCue {

  position: absolute;

  z-index: 3;

  right: 30px;

  bottom: 28px;

  font-size: 10px;

  letter-spacing: .14em;

  text-transform: uppercase;

  opacity: .6;

  writing-mode: vertical-rl

}



.metrics {

  background: #0b0b0c;

  border-bottom: 1px solid var(--border)

}



.metrics .wrap {

  display: grid;

  grid-template-columns: repeat(5, 1fr)

}



.metric {

  padding: 23px 20px;

  border-right: 1px solid var(--border)

}



.metric:first-child {

  border-left: 1px solid var(--border)

}



.metric strong {

  display: block;

  font-size: 30px;

  line-height: 1;

  color: var(--yellow)

}



.metric span {

  display: block;

  color: var(--muted);

  font-size: 9px;

  letter-spacing: .1em;

  text-transform: uppercase;

  margin-top: 6px

}



section {

  padding: 100px 0

}



.sectionHead {

  display: grid;

  grid-template-columns: 1.2fr .8fr;

  gap: 46px;

  align-items: end;

  margin-bottom: 44px

}



.sectionHead h2 {

  font-size: clamp(54px, 6.2vw, 92px);

  line-height: .85;

  text-transform: uppercase;

  margin: 10px 0 0

}



.sectionHead p {

  margin: 0;

  color: var(--muted);

  font-size: 16px;

  line-height: 1.65;

  max-width: 570px

}



.steps {

  display: grid;

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

  gap: 12px

}



.step {

  min-height: 325px;

  background: var(--panel);

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

  padding: 30px;

  position: relative;

  overflow: hidden

}



.step .num {

  position: absolute;

  right: 20px;

  top: 5px;

  font-family: "Gemunu Libre", sans-serif;

  font-size: 108px;

  font-weight: 800;

  line-height: 1;

  color: rgba(255, 255, 255, .045)

}



.step h3 {

  font-size: 41px;

  line-height: .92;

  text-transform: uppercase;

  margin: 94px 0 12px

}



.step p {

  color: var(--muted);

  line-height: 1.6;

  margin: 0

}



.step:before {

  content: "";

  position: absolute;

  left: 0;

  top: 0;

  height: 4px;

  width: 90px;

  background: var(--yellow)

}



.step:nth-child(2):before {

  background: var(--pink)

}



.missions {

  display: grid;

  grid-template-columns: 1fr 1fr;

  gap: 14px

}



.mission {

  height: 650px;

  position: relative;

  overflow: hidden;

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

  display: flex;

  align-items: flex-end;

  background: #111

}



.mission img {

  position: absolute;

  inset: 0;

  width: 100%;

  height: 100%;

  object-fit: cover;

  transition: transform .5s ease

}



.mission:hover img {

  transform: scale(1.025)

}



.mission:after {

  content: "";

  position: absolute;

  inset: 0;

  background: linear-gradient(0deg, rgba(0, 0, 0, .94) 0%, rgba(0, 0, 0, .22) 67%, rgba(0, 0, 0, .06) 100%)

}



.missionContent {

  position: relative;

  z-index: 2;

  padding: 34px

}



.mission .tag {

  display: inline-flex;

  padding: 7px 10px;

  background: var(--yellow);

  color: #080808;

  font-size: 9px;

  font-weight: 900;

  letter-spacing: .11em;

  text-transform: uppercase

}



.mission.foam .tag {

  background: var(--pink);

  color: white

}



.mission h3 {

  font-size: 64px;

  text-transform: uppercase;

  line-height: .9;

  margin: 14px 0 8px

}



.mission p {

  max-width: 485px;

  color: #ddd;

  line-height: 1.55;

  margin: 0 0 21px

}



.challengeGrid {

  display: grid;

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

  grid-auto-rows: 230px;

  gap: 11px

}



.challenge {

  position: relative;

  overflow: hidden;

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

  background: #111

}



.challenge img {

  width: 100%;

  height: 100%;

  object-fit: cover;

  transition: .4s

}



.challenge:hover img {

  transform: scale(1.03)

}



.challenge:after {

  content: "";

  position: absolute;

  inset: 0;

  background: linear-gradient(0deg, rgba(0, 0, 0, .9), transparent 62%)

}



.challenge span {

  position: absolute;

  z-index: 2;

  left: 18px;

  bottom: 14px;

  font-family: "Gemunu Libre";

  font-weight: 800;

  font-size: 31px;

  text-transform: uppercase

}



.challenge.big {

  grid-column: span 7;

  grid-row: span 2

}



.challenge.med {

  grid-column: span 5

}



.challenge.small {

  grid-column: span 4

}



.challenge.wide {

  grid-column: span 8

}



.challenge-btns {

  display: flex;

  justify-content: center;

  margin-top: 30px;

}



.darkBand {

  background: #0c0c0d;

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

  border-bottom: 1px solid var(--border)

}



.groupCards {

  display: grid;

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

  gap: 12px

}



.groupCard {

  min-height: 315px;

  background: var(--panel);

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

  padding: 30px;

  display: flex;

  flex-direction: column;

  justify-content: flex-end;

  position: relative;

  overflow: hidden

}



.groupCard:before {

  content: "";

  position: absolute;

  left: 0;

  top: 0;

  width: 68px;

  height: 4px;

  background: var(--yellow)

}



.groupCard:nth-child(2):before {

  background: var(--pink)

}



.groupCard .arrow {

  position: absolute;

  right: 22px;

  top: 18px;

  font-size: 27px

}



.groupCard h3 {

  font-size: 44px;

  line-height: .9;

  text-transform: uppercase;

  margin: 0 0 11px

}



.groupCard p {

  color: var(--muted);

  line-height: 1.55;

  margin: 0

}



.split {

  display: grid;

  grid-template-columns: 1fr 1fr;

  gap: 14px

}



.photoPanel {

  min-height: 560px;

  position: relative;

  overflow: hidden;

  border: 1px solid var(--border)

}



.photoPanel img {

  position: absolute;

  inset: 0;

  width: 100%;

  height: 100%;

  object-fit: cover

}



.copyPanel {

  background: var(--panel);

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

  padding: 54px;

  display: flex;

  flex-direction: column;

  justify-content: center

}



.copyPanel h2 {

  font-size: 65px;

  line-height: .84;

  text-transform: uppercase;

  margin: 10px 0 22px

}



.copyPanel p {

  color: var(--muted);

  font-size: 16px;

  line-height: 1.7;

  margin: 0 0 20px

}



.bullets {

  display: grid;

  gap: 12px;

  margin: 4px 0 27px

}



.bullet {

  display: flex;

  gap: 11px;

  align-items: flex-start;

  color: #ddd;

  font-size: 14px;

  line-height: 1.5

}



.dot {

  width: 8px;

  height: 8px;

  flex: 0 0 auto;

  background: var(--yellow);

  margin-top: 7px

}



.reviewBand {

  padding: 50px 0;

  background: var(--yellow);

  color: #070707

}



.reviewBand .wrap {

  display: flex;

  align-items: center;

  justify-content: space-between;

  gap: 35px

}



.reviewBand strong {

  font-family: "Gemunu Libre";

  font-size: 42px;

  line-height: .9;

  text-transform: uppercase

}



.reviewBand p {

  max-width: 650px;

  margin: 0;

  font-weight: 600;

  line-height: 1.55

}



.faq {

  display: grid;

  grid-template-columns: 1fr;

  gap: 12px;

  max-width: 920px;

  margin: 0 auto

}



.faqItem {

  background: var(--panel);

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

  border-radius: 12px;

  overflow: hidden;

  padding: 0

}



.faqItem summary {

  list-style: none;

  cursor: pointer;

  position: relative;

  padding: 20px 58px 20px 22px;

  font-family: "Gemunu Libre", sans-serif;

  font-size: 21px;

  font-weight: 800;

  line-height: 1.15;

  color: var(--text)

}



.faqItem summary::-webkit-details-marker {

  display: none

}



.faqItem summary::after {

  content: "";

  position: absolute;

  right: 22px;

  top: 50%;

  font-family: "Poppins", sans-serif;

  font-size: 22px;

  font-weight: 400;

  color: #9e9e9e;

  width: 8px;

  height: 8px;

  border-right: 2px solid currentColor;

  border-bottom: 2px solid currentColor;

  transform: translateY(-2px) rotate(45deg);

  transition: transform 0.25s ease;

}



.faqItem[open] summary::after {

  transform: translateY(-46%) rotate(222deg);

  color: var(--yellow)

}



.faqItem[open] summary {

  border-bottom: 1px solid var(--border)

}



.faqAnswer {

  padding: 16px 22px 20px

}



.faqItem p {

  color: var(--muted);

  line-height: 1.65;

  margin: 0;

  font-size: 16px

}



.network {

  display: grid;

  grid-template-columns: 1fr 1fr;

  gap: 14px

}



.networkVisual {

  min-height: 560px;

  position: relative;

  overflow: hidden;

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

  background: #111

}



.networkVisual>img {

  position: absolute;

  inset: 0;

  width: 100%;

  height: 100%;

  object-fit: cover;

  opacity: .45

}



.networkVisual:after {

  content: "";

  position: absolute;

  inset: 0;

  background: linear-gradient(90deg, rgba(0, 0, 0, .15), rgba(0, 0, 0, .8))

}



.networkCopy {

  position: relative;

  z-index: 2;

  padding: 42px;

  max-width: 650px

}



.networkCopy h3,

.opportunity h3 {

  font-size: 65px;

  line-height: .82;

  text-transform: uppercase;

  margin: 10px 0 18px

}



.networkCopy p,

.opportunity p {

  color: #cbc9c3;

  line-height: 1.6;

  max-width: 540px

}



.cityGrid {

  display: grid;

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

  gap: 8px;

  margin-top: 25px

}



.city {

  padding: 13px 11px;

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

  background: rgba(255, 255, 255, .025);

  font-size: 10px;

  font-weight: 800;

  letter-spacing: .08em;

  text-transform: uppercase

}



.city:hover {

  border-color: var(--yellow)

}



.opportunity {

  min-height: 560px;

  padding: 44px;

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

  background: linear-gradient(135deg, #1b0c12, #080808 50%, #171507);

  display: flex;

  flex-direction: column;

  justify-content: flex-start;

  position: relative;

  overflow: hidden

}



.opportunity:before {

  content: "OPEN";

  position: absolute;

  top: -38px;

  right: -8px;

  font-family: "Gemunu Libre";

  font-weight: 800;

  font-size: 220px;

  color: rgba(198, 37, 97, .08)

}



.proPoints {

  display: flex;

  gap: 8px;

  flex-wrap: wrap;

  margin: 18px 0 28px

}



.proPoints span {

  padding: 8px 10px;

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

  font-size: 9px;

  font-weight: 800;

  letter-spacing: .1em;

  text-transform: uppercase

}



.pageHero {

  min-height: 650px;

  height: 74vh;

  position: relative;

  display: flex;

  align-items: flex-end;

  overflow: hidden;

  padding-top: 110px

}



.pageHero img,

.pageHero video {

  position: absolute;

  inset: 0;

  width: 100%;

  height: 100%;

  object-fit: cover

}



.pageHero:after {

  content: "";

  position: absolute;

  inset: 0;

  background: linear-gradient(90deg, rgba(0, 0, 0, .9), rgba(0, 0, 0, .45) 58%, rgba(0, 0, 0, .22)), linear-gradient(0deg, rgba(0, 0, 0, .8), transparent 60%)

}



.pageHero .wrap {

  position: relative;

  z-index: 2;

  padding-bottom: 62px

}



.pageHero h1 {

  font-size: clamp(62px, 8vw, 118px);

  line-height: .8;

  text-transform: uppercase;

  margin: 8px 0 20px;

  max-width: 1050px

}



.pageHero p {

  max-width: 740px;

  font-size: 17px;

  line-height: 1.6;

  color: #dedbd4;

  margin: 0 0 25px

}



.pageHero .pinkText {

  color: #f26a96

}



.pageHero .yellowText {

  color: var(--yellow)

}



.offerGrid {

  display: grid;

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

  gap: 10px

}



.offer {

  padding: 24px;

  background: var(--panel);

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

  min-height: 160px

}



.offer strong {

  display: block;

  font-family: "Gemunu Libre";

  font-size: 34px;

  color: var(--yellow);

  line-height: 1

}



.offer span {

  display: block;

  margin-top: 7px;

  color: var(--muted);

  font-size: 11px;

  text-transform: uppercase;

  letter-spacing: .08em

}



.seoCopy {

  max-width: 900px

}



.seoCopy h2 {

  font-size: 58px;

  line-height: .9;

  text-transform: uppercase;

  margin: 0 0 24px

}



.seoCopy h3 {

  font-size: 32px;

  text-transform: uppercase;

  margin: 34px 0 10px

}



.seoCopy p {

  color: var(--muted);

  line-height: 1.75

}



.ctaBox {

  padding: 50px;

  background: var(--yellow);

  color: #080808;

  display: flex;

  align-items: center;

  justify-content: space-between;

  gap: 30px

}



.ctaBox h2 {

  font-size: 58px;

  line-height: .86;

  text-transform: uppercase;

  margin: 0

}



.ctaBox p {

  max-width: 560px;

  margin: 10px 0 0;

  font-weight: 600

}



.ctaBox .btn {

  background: var(--pink) !important;

  border-color: var(--pink) !important;

  color: #fff !important;

}



.footer {

  padding: 62px 0 28px;

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

  background: #040404

}



.footerTop {

  display: grid;

  grid-template-columns: 1.4fr repeat(3, .7fr);

  gap: 36px

}



.footer img {

  width: 176px

}



.footer p {

  color: var(--muted);

  max-width: 420px;

  line-height: 1.6;

  font-size: 13px

}



.footer h4 {

  font-size: 10px;

  letter-spacing: .12em;

  text-transform: uppercase;

  color: #6f6e6a

}



.footer a {

  display: block;

  margin: 10px 0;

  font-size: 13px

}



.fine {

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

  margin-top: 42px;

  padding-top: 21px;

  display: flex;

  justify-content: space-between;

  gap: 20px;

  color: #666;

  font-size: 10px

}



.mobileBook {

  display: none

}



.cityModal {

  position: fixed;

  inset: 0;

  background: rgba(0, 0, 0, .9);

  backdrop-filter: blur(14px);

  z-index: 100;

  display: none;

  align-items: center;

  justify-content: center;

  padding: 20px

}



.cityModal.open {

  display: flex

}



.modalBox {

  width: min(900px, 100%);

  max-height: 88vh;

  overflow: auto;

  background: #0d0d0e;

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

  padding: 30px

}



.modalTop {

  display: flex;

  align-items: center;

  justify-content: space-between;

  gap: 20px;

  margin-bottom: 20px

}



.modalTop h3 {

  font-size: 50px;

  text-transform: uppercase;

  margin: 0

}



.close {

  width: 42px;

  height: 42px;

  background: transparent;

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

  color: white;

  font-size: 20px;

  padding: 0;

  cursor: pointer;

}



.modalCities {

  display: grid;

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

  gap: 8px

}



.modalCities a {

  padding: 15px;

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

  background: var(--panel)

}



.modalCities a:hover {

  border-color: var(--yellow)

}



.country {

  grid-column: 1/-1;

  color: var(--yellow);

  font-size: 10px;

  font-weight: 800;

  letter-spacing: .13em;

  text-transform: uppercase;

  margin-top: 9px

}



.bs-error-page {

  position: relative;

  display: flex;

  align-items: center;

  min-height: calc(100vh - 80px);

  padding: 120px 7vw 100px;

  overflow: hidden;

  color: #f5f1e9;

  background: #111

}



.bs-error-page__inner {

  position: relative;

  z-index: 2;

  width: 100%;

  max-width: 1200px;

  margin: 0 auto;

}



.bs-error-page__eyebrow {

  display: inline-flex;

  align-items: center;

  margin-bottom: 28px;

  padding: 9px 13px;

  border: 1px solid rgba(245, 241, 233, 0.28);

  color: #f5f1e9;

  font-size: 12px;

  font-weight: 700;

  line-height: 1;

  letter-spacing: 0.03em;

  text-transform: uppercase;

}



.bs-error-page__dot {

  width: 7px;

  height: 7px;

  margin-right: 9px;

  border-radius: 50%;

  background: var(--yellow);

}



.bs-error-page__code {

  position: absolute;

  top: -100px;

  right: -20px;

  z-index: -1;

  color: transparent;

  font-size: clamp(190px, 28vw, 440px);

  font-weight: 900;

  line-height: 0.85;

  letter-spacing: -0.07em;

  -webkit-text-stroke: 2px rgba(255, 212, 42, 0.09);

  pointer-events: none;

  user-select: none;

}



.bs-error-page__title {

  max-width: 950px;

  margin: 0;

  color: #f5f1e9;

  font-size: clamp(65px, 8vw, 125px);

  font-weight: 900;

  line-height: 0.85;

  letter-spacing: -0.045em;

  text-transform: uppercase;

}



.bs-error-page__title span {

  display: block;

  color: var(--yellow);

}



.bs-error-page__description {

  max-width: 620px;

  margin: 32px 0 0;

  color: rgba(245, 241, 233, 0.85);

  font-size: 18px;

  line-height: 1.55;

}



.bs-error-page__actions {

  display: flex;

  flex-wrap: wrap;

  gap: 14px;

  margin-top: 38px;

}



.bs-error-page__button {

  display: inline-flex;

  gap: 15px;

  align-items: center;

  justify-content: center;

  min-height: 48px;

  padding: 16px 20px;

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

  color: #fff;

  font-size: 12px;

  font-weight: 800;

  line-height: 1;

  text-decoration: none;

  text-transform: uppercase;

  transition:

    background-color 0.25s ease,

    border-color 0.25s ease,

    color 0.25s ease,

    transform 0.25s ease;

}



.bs-error-page__button--primary {

  background: var(--pink);

}



.bs-error-page__button--outline {

  border-color: rgba(245, 241, 233, 0.6);

  background: transparent;

}



.bs-error-page__button:hover {

  color: #fff;

  transform: translateY(-3px);

}



.bs-error-page__button--primary:hover {

  border-color: var(--pink);

  background: var(--pink);

  opacity: 0.9;

}



.bs-error-page__button--outline:hover {

  border-color: var(--pink);

  background: var(--pink);

}



.bs-error-page__button span {

  display: inline-block;

  font-size: 17px;

  transition: transform 0.25s ease;

}



.bs-error-page__button:hover span {

  transform: translate(3px, -2px);

}



.bs-error-page__footer-text {

  position: absolute;

  right: -20px;

  bottom: -20px;

  left: -20px;

  display: flex;

  justify-content: space-between;

  color: rgba(245, 241, 233, 0.025);

  font-size: clamp(100px, 16vw, 250px);

  font-weight: 900;

  line-height: 0.75;

  letter-spacing: -0.06em;

  white-space: nowrap;

  pointer-events: none;

}



@media only screen and (max-width: 980px) {

  .bs-error-page {

    min-height: 700px;

    padding: 110px 40px 80px;

  }



  .bs-error-page__code {

    top: -30px;

    right: -10px;

  }



  .bs-error-page__title {

    font-size: clamp(60px, 10vw, 90px);

  }

}



@media only screen and (max-width: 767px) {

  .bs-error-page {

    min-height: 650px;

    padding: 90px 20px 65px;

  }



  .bs-error-page__eyebrow {

    margin-bottom: 22px;

    font-size: 10px;

  }



  .bs-error-page__code {

    top: -15px;

    right: -15px;

    font-size: 170px;

    -webkit-text-stroke-width: 1px;

  }



  .bs-error-page__title {

    font-size: clamp(48px, 15vw, 68px);

    line-height: 0.88;

  }



  .bs-error-page__description {

    margin-top: 25px;

    font-size: 16px;

  }



  .bs-error-page__actions {

    flex-direction: column;

    margin-top: 30px;

  }



  .bs-error-page__button {

    width: 100%;

  }



  .bs-error-page__footer-text {

    display: none;

  }

}



@media(max-width:980px) {

  .wrap {

    width: min(var(--max), calc(100% - 28px))

  }



  .topline {

    height: 28px;

    font-size: 9px

  }



  .nav {

    top: 28px;

    height: 68px

  }



  .logo {

    width: 100px

  }



  .navlinks,

  .lang {

    display: none

  }



  .nav .btn.primary {

    margin-left: auto;

    min-height: 40px;

    padding: 0 13px

  }



  .hero {

    min-height: 690px

  }



  .heroContent {

    padding-bottom: 58px

  }



  .hero h1.home_hero_title {

    font-size: clamp(61px, 16vw, 105px)

  }



  .hero p {

    font-size: 15px;

    max-width: 620px

  }



  .scrollCue {

    display: none

  }



  .metrics .wrap {

    grid-template-columns: 1fr 1fr

  }



  .metric {

    border-bottom: 1px solid var(--border)

  }



  .metric:last-child {

    grid-column: 1/-1

  }



  section {

    padding: 76px 0

  }



  .sectionHead {

    grid-template-columns: 1fr;

    gap: 17px

  }



  .sectionHead h2 {

    font-size: 58px

  }



  .sectionHead p {

    font-size: 15px

  }



  .steps,

  .missions,

  .groupCards,

  .split,

  .faq,

  .network {

    grid-template-columns: 1fr

  }



  .mission {

    height: 540px

  }



  .challengeGrid {

    grid-template-columns: 1fr;

    grid-auto-rows: 270px

  }



  .challenge.big,

  .challenge.med,

  .challenge.small,

  .challenge.wide {

    grid-column: 1;

    grid-row: auto

  }



  .copyPanel {

    padding: 36px 27px

  }



  .copyPanel h2 {

    font-size: 55px

  }



  .photoPanel {

    min-height: 430px

  }



  .reviewBand .wrap {

    display: block

  }



  .reviewBand p {

    margin-top: 15px

  }



  .cityGrid {

    grid-template-columns: 1fr 1fr

  }



  .networkCopy {

    padding: 30px

  }



  .opportunity {

    padding: 32px

  }



  .offerGrid {

    grid-template-columns: 1fr 1fr

  }



  .pageHero {

    min-height: 610px;

    height: 74vh

  }



  .ctaBox {

    display: block;

    padding: 35px

  }



  .ctaBox .btn {

    margin-top: 24px

  }



  .footerTop {

    grid-template-columns: 1fr 1fr

  }



  .footerTop>div:first-child {

    grid-column: 1/-1

  }



  .modalCities {

    grid-template-columns: 1fr 1fr

  }



  .mobileBook {

    display: flex;

    position: fixed;

    bottom: 12px;

    left: 12px;

    right: 12px;

    z-index: 49;

    min-height: 54px;

    background: var(--yellow);

    color: #080808;

    align-items: center;

    justify-content: center;

    font-size: 11px;

    font-weight: 900;

    letter-spacing: .1em;

    text-transform: uppercase;

    box-shadow: 0 15px 35px rgba(0, 0, 0, .5)

  }

}



@media(max-width:560px) {

  .topline {

    justify-content: flex-start;

    padding-left: 12px

  }



  .heroMeta .pill:nth-child(n+3) {

    display: none

  }



  .hero h1.home_hero_title {

    font-size: 57px

  }



  .hero p {

    font-size: 14px

  }



  .heroBtns {

    display: grid;

    grid-template-columns: 1fr

  }



  .heroBtns .btn {

    width: 100%

  }



  .metrics .wrap {

    width: 100%

  }



  .metric {

    padding: 18px 14px

  }



  .metric strong {

    font-size: 26px

  }



  .sectionHead h2 {

    font-size: 50px

  }



  .step {

    min-height: 275px

  }



  .mission {

    height: 480px

  }



  .mission h3 {

    font-size: 54px

  }



  .groupCard {

    min-height: 260px

  }



  .copyPanel h2 {

    font-size: 50px

  }



  .reviewBand strong {

    font-size: 35px

  }



  .cityGrid {

    grid-template-columns: 1fr

  }



  .networkCopy h3,

  .opportunity h3 {

    font-size: 54px

  }



  .offerGrid {

    grid-template-columns: 1fr 1fr

  }



  .offer {

    min-height: 130px;

    padding: 19px

  }



  .pageHero h1 {

    font-size: 58px

  }



  .pageHero p {

    font-size: 14px

  }



  .seoCopy h2,

  .ctaBox h2 {

    font-size: 48px

  }



  .footerTop {

    grid-template-columns: 1fr

  }



  .footerTop>div:first-child {

    grid-column: auto

  }



  .fine {

    display: block;

    line-height: 1.7

  }



  .modalCities {

    grid-template-columns: 1fr

  }

}



/* ===== V3 additions ===== */

.nav .wrap {

  position: relative

}



.brandCluster {

  display: flex;

  align-items: center;

  gap: 15px;

  flex: 0 0 auto

}



.cityBadge {

  display: inline-flex;

  align-items: center;

  gap: 8px;

  min-height: 36px;

  padding: 0 13px;

  border: 1px solid rgba(243, 208, 69, .45);

  background: rgba(7, 7, 7, .58);

  color: var(--yellow);

  font: 700 10px/1 "Poppins", sans-serif;

  letter-spacing: .22em;

  text-transform: uppercase;

  backdrop-filter: blur(8px)

}



.cityPulse {

  width: 6px;

  height: 6px;

  border-radius: 50%;

  background: #e63946;

  box-shadow: 0 0 0 rgba(230, 57, 70, .65);

  animation: cityPulse 1.55s infinite

}



@keyframes cityPulse {

  0% {

    box-shadow: 0 0 0 0 rgba(230, 57, 70, .72);

    opacity: 1

  }



  70% {

    box-shadow: 0 0 0 8px rgba(230, 57, 70, 0);

    opacity: .8

  }



  100% {

    box-shadow: 0 0 0 0 rgba(230, 57, 70, 0);

    opacity: 1

  }

}



.navlinks {

  gap: 20px

}



.navItem {

  position: relative;

  height: 80px;

  display: flex;

  align-items: center

}



.navItem>a,

.navItem>button {

  font: 700 11px/1 "Poppins", sans-serif;

  letter-spacing: .09em;

  text-transform: uppercase;

  color: var(--text);

  opacity: .82;

  background: none;

  border: 0;

  padding: 0;

  cursor: pointer

}



.navItem>a:hover,

.navItem>button:hover,

.navItem a.active {

  opacity: 1;

  color: var(--yellow)

}



/*.navItem.hasDrop>button:after {

     content:"/f107";

     font-size:12px;

     margin-left:6px;

     color:var(--yellow)

}

 */

/* Dropdown parent */

.navItem.hasDrop {

  position: relative;

}



/* Dropdown button */

.navItem.hasDrop>button {

  display: inline-flex;

  align-items: center;

  gap: 8px;

  margin: 0;

  padding: 0;

  border: 0;

  background: transparent;

  color: inherit;

  font: inherit;

  cursor: pointer;

  white-space: nowrap;

}



/* Dropdown arrow */

.navItem.hasDrop>button::after {

  content: "";

  width: 6px;

  height: 6px;

  border-right: 1px solid currentColor;

  border-bottom: 1px solid currentColor;

  transform: translateY(-2px) rotate(45deg);

  transition: transform 0.25s ease;

}



.navItem.hasDrop>button:hover,

.navItem.hasDrop>button:active {

  color: var(--yellow);

}



.dropdown {

  position: absolute;

  z-index: 99;

  top: 67px;

  left: -18px;

  min-width: 220px;

  padding: 9px;

  background: rgba(10, 10, 10, .98);

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

  opacity: 0;

  visibility: hidden;

  transform: translateY(8px);

  transition: .18s;

  box-shadow: 0 18px 50px rgba(0, 0, 0, .45)

}



.navItem:hover .dropdown,

.navItem:focus-within .dropdown {

  opacity: 1;

  visibility: visible;

  transform: translateY(0)

}



.dropdown a {

  display: block;

  padding: 13px 12px;

  border-bottom: 1px solid rgba(255, 255, 255, .07);

  font-size: 10px;

  font-weight: 700;

  letter-spacing: .08em;

  text-transform: uppercase;

  opacity: .9

}



.dropdown a:last-child {

  border-bottom: 0

}



.dropdown a:hover {

  background: #151515;

  color: var(--yellow)

}



.langSelect {

  display: flex;

  align-items: center;

  gap: 6px;

  padding: 0 2px;

  font-size: 10px;

  font-weight: 800;

  letter-spacing: .08em;

  text-transform: uppercase;

  white-space: nowrap

}



.langSelect a,

.langSelect a:visited {

  opacity: .45;

  color: var(--text);

}



.langSelect a.active {

  opacity: 1;

  color: var(--yellow)

}



.missionContent {

  width: 100%

}



.missionKicker {

  font: 600 10px/1.1 "Poppins", sans-serif;

  letter-spacing: .22em;

  text-transform: uppercase;

  color: #e5e1dc;

  margin-bottom: 8px;

  opacity: .9

}



.missionTitle {

  font-family: "Gemunu Libre", sans-serif;

  font-size: clamp(48px, 4.4vw, 72px);

  font-weight: 800;

  line-height: .82;

  text-transform: uppercase;

  margin: 4px 0 14px

}



.mission.paint .missionTitle span {

  color: var(--pink)

}



.mission.foam .missionTitle span {

  color: #4dd8fb

}



.difficulty {

  display: grid;

  grid-template-columns: 1fr 1fr;

  gap: 24px;

  margin: 23px 0 24px;

  max-width: 540px

}



.diffLabel {

  font: 600 9px/1.2 "Poppins", sans-serif;

  letter-spacing: .18em;

  text-transform: uppercase;

  color: #c7c5c1;

  margin-bottom: 8px;

  display: flex;

  justify-content: space-between;

  gap: 8px

}



.diffBars {

  display: grid;

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

  gap: 4px

}



.diffBars i {

  display: block;

  height: 6px;

  background: rgba(255, 255, 255, .24)

}



.mission.paint .diffBars i.on {

  background: var(--yellow);

  box-shadow: 0 0 10px rgba(243, 208, 69, .36)

}



.mission.foam .diffBars i.on {

  background: #4dd8fb;

  box-shadow: 0 0 10px rgba(77, 216, 251, .36)

}



.pressSection {

  padding: 74px 0;

  background: #f5e7e9;

  color: #121212;

  border-top: 1px solid rgba(0, 0, 0, .08);

  border-bottom: 1px solid rgba(0, 0, 0, .08)

}



.pressSection .eyebrow {

  color: #5d5d5d;

  text-align: center

}



.pressSection h2 {

  text-align: center;

  font-family: "Gemunu Libre";

  font-size: 52px;

  line-height: .9;

  text-transform: uppercase;

  margin: 8px 0 34px;

  color: #1a1a1a

}



.pressGrid {

  display: grid;

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

  gap: 10px;

  align-items: stretch

}



.pressLogo {

  min-height: 92px;

  display: flex;

  align-items: center;

  justify-content: center;

  padding: 14px;

  border: 1px solid rgba(0, 0, 0, .07);

  background: rgba(255, 255, 255, .23);

  transition: .2s;

  position: relative

}



.pressLogo:hover {

  transform: translateY(-2px);

  background: rgba(255, 255, 255, .55);

  border-color: rgba(0, 0, 0, .16)

}



.pressWord {

  display: inline-block;

  color: #111;

  text-align: center;

  line-height: .95;

  font-weight: 800;

  font-size: 17px;

  letter-spacing: -.02em

}



.pressWord.leparisien {

  font-family: Arial, sans-serif;

  font-size: 18px;

  font-weight: 900

}



.pressWord.capital {

  font-family: Arial, sans-serif;

  font-size: 20px;

  font-weight: 900

}



.pressWord.sortiraparis {

  font-size: 12px;

  letter-spacing: -.04em

}



.pressWord.bonbon {

  font-family: Georgia, serif;

  font-style: italic;

  font-size: 19px

}



.pressWord.sudouest {

  font-family: Georgia, serif;

  font-size: 19px

}



.pressWord.provence {

  font-family: Georgia, serif;

  font-size: 18px

}



.pressWord.voix {

  font-family: Georgia, serif;

  font-size: 17px

}



.pressNote {

  max-width: 860px;

  margin: 18px auto 0;

  text-align: center;

  color: #69605f;

  font-size: 10px;

  line-height: 1.5

}



.storyTeaser {

  padding: 86px 0;

  background: #09090b;

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

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

  overflow: hidden

}



.storyGrid {

  display: grid;

  grid-template-columns: .9fr 1.1fr;

  gap: 56px;

  align-items: center

}



.storyVisual {

  height: 520px;

  position: relative

}



.storyVisual img.bowen {

  position: absolute;

  left: -70px;

  bottom: -95px;

  width: min(670px, 112%);

  filter: drop-shadow(0 28px 60px rgba(0, 0, 0, .55))

}



.storyCopy h2 {

  font-family: "Gemunu Libre";

  font-size: clamp(62px, 6vw, 98px);

  font-weight: 800;

  line-height: .86;

  text-transform: uppercase;

  margin: 12px 0 20px

}



.storyCopy h2 span {

  color: var(--yellow);

  text-shadow: 0 0 24px rgba(243, 208, 69, .14)

}



.storyCopy p {

  color: #c8c6c2;

  line-height: 1.7;

  max-width: 660px;

  margin: 0 0 24px

}



.storyFaces {

  display: flex;

  gap: 12px;

  margin: 20px 0 28px

}



.storyFaces img {

  width: 68px;

  height: 68px;

  object-fit: cover;

  border: 2px solid rgba(243, 208, 69, .4);

  transform: rotate(-2deg)

}



.storyFaces img:nth-child(even) {

  transform: rotate(2deg)

}



.storyBtns {

  display: flex;

  gap: 10px;

  flex-wrap: wrap

}



.contactStrip {

  padding: 76px 0;

  background: #0e0e0f

}



.contactGrid {

  display: grid;

  grid-template-columns: 1fr 1fr;

  gap: 14px

}



.contactCard {

  background: var(--panel);

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

  padding: 42px

}



.contactCard h2 {

  font-family: "Gemunu Libre";

  font-size: 58px;

  line-height: .86;

  text-transform: uppercase;

  margin: 8px 0 18px

}



.contactCard p {

  color: var(--muted);

  line-height: 1.7

}



.contactFacts {

  display: grid;

  gap: 11px;

  margin: 24px 0

}



.contactFact {

  padding: 13px 0;

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

  display: flex;

  justify-content: space-between;

  gap: 20px;

  font-size: 13px

}



.contactFact span:first-child {

  color: #73726f;

  text-transform: uppercase;

  letter-spacing: .08em;

  font-size: 10px

}



.contactPhoto {

  min-height: 430px;

  position: relative;

  overflow: hidden;

  border: 1px solid var(--border)

}



.contactPhoto img {

  position: absolute;

  inset: 0;

  width: 100%;

  height: 100%;

  object-fit: cover

}



/* Team building V3 */

.tbHero {

  min-height: 720px;

  height: 84vh;

  position: relative;

  display: flex;

  align-items: flex-end;

  padding-top: 114px;

  overflow: hidden

}



.tbHero>img {

  position: absolute;

  inset: 0;

  width: 100%;

  height: 100%;

  object-fit: cover

}



.tbHero:after {

  content: "";

  position: absolute;

  inset: 0;

  background: linear-gradient(90deg, rgba(0, 0, 0, .92), rgba(0, 0, 0, .38) 62%, rgba(0, 0, 0, .18)), linear-gradient(0deg, rgba(0, 0, 0, .83), transparent 55%)

}



.tbHero .wrap {

  z-index: 2;

  position: relative;

  padding-bottom: 56px

}



.tbHero h1 {

  font-family: "Gemunu Libre";

  font-size: clamp(62px, 8vw, 120px);

  font-weight: 800;

  line-height: .82;

  text-transform: uppercase;

  margin: 8px 0 18px;

  max-width: 1020px

}



.tbHero p {

  font-size: 17px;

  line-height: 1.65;

  max-width: 720px;

  color: #dedbd4

}



.tbStats {

  display: grid;

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

  background: #0b0b0c;

  border-bottom: 1px solid var(--border)

}



.tbStat {

  padding: 22px 18px;

  border-right: 1px solid var(--border)

}



.tbStat strong {

  display: block;

  font-family: "Gemunu Libre";

  font-size: 30px;

  line-height: 1;

  color: var(--yellow)

}



.tbStat span {

  display: block;

  margin-top: 6px;

  color: var(--muted);

  font-size: 9px;

  letter-spacing: .1em;

  text-transform: uppercase

}



.featureGrid {

  display: grid;

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

  gap: 11px

}



.featureBox {

  padding: 28px;

  background: var(--panel);

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

  min-height: 190px

}



.featureBox h3 {

  font-family: "Gemunu Libre";

  font-size: 31px;

  line-height: .92;

  text-transform: uppercase;

  margin: 0 0 12px

}



.featureBox p {

  color: var(--muted);

  line-height: 1.6;

  margin: 0;

  font-size: 14px

}



.timeline {

  display: grid;

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

  gap: 0;

  border: 1px solid var(--border)

}



.timeStep {

  padding: 24px;

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

  background: #0d0d0e

}



.timeStep:last-child {

  border-right: 0

}



.timeStep strong {

  display: block;

  color: var(--yellow);

  font-family: "Gemunu Libre";

  font-size: 30px

}



.timeStep span {

  font-size: 12px;

  color: #c8c7c2;

  line-height: 1.45

}



.reception {

  display: grid;

  grid-template-columns: 1fr 1fr;

  gap: 14px

}



.receptionPhoto {

  min-height: 560px;

  position: relative;

  overflow: hidden;

  border: 1px solid var(--border)

}



.receptionPhoto img {

  position: absolute;

  inset: 0;

  width: 100%;

  height: 100%;

  object-fit: cover

}



.receptionCopy {

  padding: 48px;

  background: var(--panel);

  border: 1px solid var(--border)

}



.receptionCopy h2 {

  font-family: "Gemunu Libre";

  font-size: 62px;

  line-height: .86;

  text-transform: uppercase;

  margin: 8px 0 20px

}



.checklist {

  display: grid;

  gap: 10px;

  margin: 22px 0 28px

}



.checklist div {

  font-size: 14px;

  color: #d7d5d0

}



.checklist div:before {

  content: "✓";

  color: var(--yellow);

  font-weight: 900;

  margin-right: 10px

}



.trustGrid {

  display: grid;

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

  gap: 8px

}



.trust {

  min-height: 90px;

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

  background: #111;

  display: flex;

  align-items: center;

  justify-content: center;

  color: #aaa;

  font-weight: 800;

  text-transform: uppercase;

  letter-spacing: .06em;

  font-size: 12px;

  text-align: center;

  padding: 14px

}



.quoteGrid {

  display: grid;

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

  gap: 11px

}



.quoteCard {

  background: var(--panel);

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

  padding: 28px

}



.quoteCard p {

  color: #ddd;

  line-height: 1.65;

  font-size: 14px

}



.quoteCard strong {

  display: block;

  margin-top: 18px;

  font-size: 12px

}



.quoteCard span {

  display: block;

  color: var(--muted);

  font-size: 10px;

  margin-top: 4px

}



.formGrid {

  display: grid;

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

  gap: 14px

}



.formGrid label {

  display: grid;

  gap: 7px

}



.formGrid label.full {

  grid-column: 1/-1

}



.formGrid span {

  font-size: 9px;

  letter-spacing: .12em;

  text-transform: uppercase;

  color: #81807c

}



.formGrid input,

.formGrid textarea {

  background: #111;

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

  color: white;

  padding: 14px;

  outline: none;

  width: 100% !important;

  font-size: 16px !important;

  line-height: 1.6 !important;

}



input.wpcf7-form-control.wpcf7-submit.has-spinner.btn.primary {

  margin-top: 15px;

}



.formGrid input:focus,

.formGrid textarea:focus {

  border-color: var(--yellow)

}



.wpcf7-not-valid-tip {

  color: #dc3232 !important;

  margin-top: 15px !important;

}



@media(max-width:1120px) {

  .pressGrid {

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

  }



  .navlinks {

    gap: 13px

  }



  .navItem>a,

  .navItem>button {

    font-size: 10px

  }



  .brandCluster {

    gap: 9px

  }



  .logo {

    width: 145px

  }

}



@media(max-width:980px) {

  .brandCluster {

    gap: 10px

  }



  .cityBadge {

    min-height: 32px;

    padding: 0 9px;

    font-size: 9px

  }



  .navItem {

    height: auto

  }



  .pressGrid {

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

  }



  .storyGrid,

  .contactGrid,

  .reception {

    grid-template-columns: 1fr

  }



  .storyVisual {

    height: 390px

  }



  .storyVisual img.bowen {

    left: 50%;

    transform: translateX(-50%);

    bottom: -115px;

    width: min(560px, 110%)

  }



  .featureGrid,

  .quoteGrid {

    grid-template-columns: 1fr

  }



  .timeline {

    grid-template-columns: 1fr 1fr

  }



  .timeStep {

    border-bottom: 1px solid var(--border)

  }



  .tbStats {

    grid-template-columns: 1fr 1fr

  }



  .tbStat:last-child {

    grid-column: 1/-1

  }



  .trustGrid {

    grid-template-columns: 1fr 1fr

  }

}



@media(max-width:560px) {

  .cityBadge {

    display: none

  }



  .difficulty {

    grid-template-columns: 1fr;

    gap: 13px

  }



  .pressGrid {

    grid-template-columns: 1fr 1fr

  }



  .pressLogo {

    min-height: 76px

  }



  .storyVisual {

    height: 310px

  }



  .storyVisual img.bowen {

    bottom: -90px

  }



  .storyCopy h2 {

    font-size: 57px

  }



  .storyFaces img {

    width: 54px;

    height: 54px

  }



  .contactCard {

    padding: 30px 24px

  }



  .contactCard h2 {

    font-size: 50px

  }



  .timeline {

    grid-template-columns: 1fr

  }



  .tbStats {

    grid-template-columns: 1fr 1fr

  }



  .formGrid {

    grid-template-columns: 1fr

  }



  .formGrid label.full {

    grid-column: auto

  }



  .trustGrid {

    grid-template-columns: 1fr 1fr

  }

}



/* ---------- V4 deploy-ready additions ---------- */

.footerClaim {

  display: grid;

  grid-template-columns: 220px 1fr;

  gap: 38px;

  align-items: center;

  padding: 46px 0;

  border-bottom: 1px solid var(--border)

}



.footerClaim img {

  width: 190px

}



.footerClaim strong {

  font-family: "Gemunu Libre", sans-serif;

  font-size: clamp(42px, 5vw, 72px);

  line-height: .86;

  text-transform: uppercase

}



.footerClaim strong span {

  color: var(--yellow)

}



.footerClaim p {

  margin: 12px 0 0;

  color: var(--muted);

  font-size: 13px

}



.footerLinksOnly {

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

  padding-top: 34px

}



.footerLinksOnly>div:first-child img {

  display: none

}



.footerLinksOnly span {

  display: block;

  color: #7f7e79;

  font-size: 11px;

  line-height: 1.8

}



.legalFine {

  margin-top: 0;

  padding-top: 12px;

  border-top: 0

}



.pageDifficulty {

  max-width: 560px;

  margin: 25px 0

}



.pageHero .diffBars i.on {

  background: var(--yellow)

}



.pageHero .foamText {

  color: #4dd8fb

}



.pageHero .pageDifficulty .diffBars i {

  height: 7px

}



.simpleHero {

  padding: 210px 0 95px;

  background: radial-gradient(circle at 80% 20%, rgba(198, 37, 97, .16), transparent 32%), #080809;

  border-bottom: 1px solid var(--border)

}



.simpleHero h1 {

  font-family: "Gemunu Libre";

  font-size: clamp(72px, 9vw, 132px);

  line-height: .8;

  text-transform: uppercase;

  margin: 12px 0 22px

}



.simpleHero h1 span {

  color: var(--yellow)

}



.simpleHero p {

  max-width: 760px;

  color: #cbc9c3;

  font-size: 17px;

  line-height: 1.65

}



.locationsWrap {

  display: grid;

  gap: 56px

}



.locationCountry h2 {

  font-family: "Gemunu Libre";

  font-size: 52px;

  text-transform: uppercase;

  margin: 0 0 18px

}



.locationGrid {

  display: grid;

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

  gap: 10px

}



.locationCard {

  min-height: 130px;

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

  background: var(--panel);

  padding: 22px;

  display: flex;

  flex-direction: column;

  justify-content: space-between

}



.locationCard span {

  font-family: "Gemunu Libre";

  font-size: 34px;

  text-transform: uppercase

}



.locationCard b {

  font-size: 9px;

  letter-spacing: .1em;

  text-transform: uppercase;

  color: var(--yellow)

}



.locationCard:hover {

  border-color: var(--yellow);

  transform: translateY(-2px)

}



.proHero {

  min-height: 780px;

  height: 88vh;

  position: relative;

  display: flex;

  align-items: flex-end;

  overflow: hidden;

  padding-top: 114px

}



.proHero>img {

  position: absolute;

  inset: 0;

  width: 100%;

  height: 100%;

  object-fit: cover

}



.proHero:after {

  content: "";

  position: absolute;

  inset: 0;

  background: linear-gradient(90deg, rgba(0, 0, 0, .94), rgba(0, 0, 0, .48) 65%, rgba(0, 0, 0, .18)), linear-gradient(0deg, rgba(0, 0, 0, .88), transparent 60%)

}



.proHero .wrap {

  z-index: 2;

  position: relative;

  padding-bottom: 60px

}



.proHero h1 {

  font-family: "Gemunu Libre";

  font-size: clamp(68px, 8.5vw, 128px);

  line-height: .82;

  text-transform: uppercase;

  margin: 8px 0 20px;

  max-width: 1050px

}



.proHero h1 span {

  color: var(--yellow)

}



.proHero p {

  font-size: 17px;

  line-height: 1.65;

  max-width: 760px;

  color: #dedbd5

}



.proFeatureGrid .featureBox {

  min-height: 220px

}



.leadForm {

  max-width: 900px;

  background: var(--panel);

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

  padding: 34px

}



.formHint {

  font-size: 10px;

  color: #777;

  margin: 14px 0 0

}



.formGrid select {

  background: #111;

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

  color: white;

  padding: 14px;

  outline: none

}



.contactChoice {

  display: grid;

  grid-template-columns: 1fr 1fr;

  gap: 14px

}



.choiceCard {

  background: var(--panel);

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

  padding: 42px;

  min-height: 360px;

  display: flex;

  flex-direction: column;

  align-items: flex-start;

  justify-content: space-between;

}



.choiceCard h2 {

  font-family: "Gemunu Libre";

  font-size: 58px;

  line-height: .88;

  text-transform: uppercase;

  margin: 10px 0 16px;

}



.choiceCard p {

  color: var(--muted);

  line-height: 1.65;

  max-width: 520px;

}



.globalFacts {

  max-width: 900px;

  margin: auto;

}



.storyHero {

  min-height: 820px;

  height: 90vh;

  position: relative;

  display: flex;

  align-items: flex-end;

  overflow: hidden;

  padding-top: 114px

}



.storyHero>img {

  position: absolute;

  inset: 0;

  width: 100%;

  height: 100%;

  object-fit: cover

}



.storyHero:after {

  content: "";

  position: absolute;

  inset: 0;

  background: linear-gradient(90deg, rgba(0, 0, 0, .9), rgba(0, 0, 0, .32) 65%, rgba(0, 0, 0, .1)), linear-gradient(0deg, rgba(0, 0, 0, .9), transparent 58%)

}



.storyHero .wrap {

  z-index: 2;

  position: relative;

  padding-bottom: 70px

}



.storyHero h1 {

  font-family: "Gemunu Libre";

  font-size: clamp(65px, 8vw, 122px);

  line-height: .82;

  text-transform: uppercase;

  margin: 10px 0 20px;

  max-width: 1050px

}



.storyHero h1 span {

  color: var(--yellow)

}



.storyHero p {

  max-width: 720px;

  color: #dedbd5;

  font-size: 17px;

  line-height: 1.7

}



.storyChapter {

  display: grid;

  grid-template-columns: 1fr 1fr;

  gap: 64px;

  align-items: center

}



.storyChapter.reverse {

  grid-template-columns: 1fr 1fr

}



.storyChapter img {

  width: 100%;

  max-height: 620px;

  object-fit: contain

}



.storyChapter h2 {

  font-family: "Gemunu Libre";

  font-size: clamp(55px, 6vw, 88px);

  line-height: .86;

  text-transform: uppercase;

  margin: 10px 0 20px

}



.storyChapter p {

  color: var(--muted);

  font-size: 16px;

  line-height: 1.72

}



.characterGrid {

  display: grid;

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

  gap: 10px

}



.characterCard {

  background: var(--panel);

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

  overflow: hidden

}



.characterCard img {

  width: 100%;

  height: 285px;

  object-fit: contain;

  background: radial-gradient(circle at 50% 40%, rgba(243, 208, 69, .08), transparent 56%);

  padding: 12px 12px 0

}



.characterCard>div {

  padding: 22px

}



.characterCard h3 {

  font-family: "Gemunu Libre";

  font-size: 35px;

  text-transform: uppercase;

  margin: 0 0 9px

}



.characterCard p {

  color: var(--muted);

  font-size: 12px;

  line-height: 1.58;

  margin: 0

}



.conspiracyBand {

  background: var(--yellow);

  color: #090909

}



.conspiracyBand .eyebrow {

  color: #6b5911

}



.conspiracyBand h2 {

  font-family: "Gemunu Libre";

  font-size: clamp(58px, 6.3vw, 94px);

  line-height: .86;

  text-transform: uppercase;

  margin: 12px 0 20px;

  max-width: 1100px

}



.conspiracyBand p {

  max-width: 800px;

  font-weight: 600;

  line-height: 1.7

}



.bdSection {

  background: #0b0b0d

}



.bdModule {

  display: grid;

  grid-template-columns: .7fr 1.3fr;

  gap: 60px;

  align-items: center;

  max-width: 1050px

}



.bdModule>img {

  width: min(420px, 100%);

  margin: auto;

  filter: drop-shadow(0 28px 35px rgba(0, 0, 0, .45))

}



.bdModule h2 {

  font-family: "Gemunu Libre";

  font-size: clamp(58px, 6vw, 90px);

  line-height: .85;

  text-transform: uppercase;

  margin: 10px 0 18px

}



.bdModule p {

  color: var(--muted);

  line-height: 1.7

}



.bdBuy {

  display: flex;

  align-items: center;

  justify-content: space-between;

  gap: 20px;

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

  padding-top: 22px;

  margin-top: 24px

}



.bdBuy strong {

  display: block

}



.bdBuy span {

  display: block;

  color: #777;

  font-size: 10px;

  margin-top: 4px

}



.giftHero {

  padding: 200px 0 80px;

  background: radial-gradient(circle at 80% 30%, rgba(243, 208, 69, .11), transparent 35%), #090909

}



.giftHeroGrid {

  display: grid;

  grid-template-columns: 1.1fr .9fr;

  gap: 50px;

  align-items: center

}



.giftHero h1 {

  font-family: "Gemunu Libre";

  font-size: clamp(68px, 8vw, 118px);

  line-height: .82;

  text-transform: uppercase;

  margin: 10px 0 22px

}



.giftHero h1 span {

  color: var(--yellow)

}



.giftHero p {

  color: #ccc9c2;

  font-size: 17px;

  line-height: 1.7;

  max-width: 690px

}



.giftHero img {

  max-height: 520px;

  object-fit: contain;

  filter: drop-shadow(0 28px 40px rgba(0, 0, 0, .5))

}



.giftPrice {

  display: flex;

  align-items: center;

  justify-content: space-between;

  gap: 40px;

  padding: 48px;

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

  background: linear-gradient(120deg, #121213, #1a1608)

}



.giftPrice strong {

  display: block;

  font-family: "Gemunu Libre";

  font-size: 90px;

  line-height: .9;

  color: var(--yellow)

}



.giftPrice p {

  color: var(--muted);

  margin: 10px 0 0

}



.giftSteps .step {

  min-height: 300px

}



.localSimpleHero {

  background: radial-gradient(circle at 85% 20%, rgba(243, 208, 69, .12), transparent 30%), #080809

}



.contactPageGrid {

  display: grid;

  grid-template-columns: .85fr 1.15fr;

  gap: 14px

}



.contactInfoPanel,

.contactForm {

  background: var(--panel);

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

  padding: 42px

}



.contactInfoPanel h2,

.contactForm h2 {

  font-family: "Gemunu Libre";

  font-size: 58px;

  line-height: .86;

  text-transform: uppercase;

  margin: 8px 0 20px

}



.wideContactPhoto {

  min-height: 520px

}



.pressGrid6 {

  grid-template-columns: repeat(6, 1fr)

}



.pressWord.capital small {

  font-size: 9px;

  letter-spacing: .08em

}



.mediaProof {

  background: var(--yellow);

  color: #090909

}



.mediaProof .wrap {

  display: grid;

  grid-template-columns: 1fr 1fr

}



.mediaProof a {

  display: flex;

  justify-content: space-between;

  gap: 20px;

  padding: 20px 28px;

  border-right: 1px solid rgba(0, 0, 0, .18);

  font-size: 11px;

  text-transform: uppercase;

  letter-spacing: .08em

}



.mediaProof a:last-child {

  border-right: 0

}



.mediaProof span {

  font-weight: 800

}



@media(max-width:1100px) {

  .locationGrid {

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

  }



  .characterGrid {

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

  }



  .pressGrid6 {

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

  }

}



@media(max-width:900px) {



  .footerClaim,

  .giftHeroGrid,

  .storyChapter,

  .storyChapter.reverse,

  .bdModule,

  .contactChoice,

  .contactPageGrid {

    grid-template-columns: 1fr

  }



  .footerLinksOnly {

    grid-template-columns: 1fr 1fr !important

  }



  .footerClaim img {

    width: 150px

  }



  .locationGrid {

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

  }



  .characterGrid {

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

  }



  .bdModule>img {

    max-height: 420px

  }



  .mediaProof .wrap {

    grid-template-columns: 1fr

  }



  .mediaProof a {

    border-right: 0;

    border-bottom: 1px solid rgba(0, 0, 0, .18)

  }

}



@media(max-width:560px) {

  .footerLinksOnly {

    grid-template-columns: 1fr !important

  }



  .locationGrid {

    grid-template-columns: 1fr

  }



  .characterGrid {

    grid-template-columns: 1fr

  }



  .characterCard img {

    height: 260px

  }



  .giftPrice {

    align-items: flex-start;

    flex-direction: column

  }



  .giftPrice strong {

    font-size: 72px

  }



  .pressGrid6 {

    grid-template-columns: 1fr 1fr

  }



  .bdBuy {

    align-items: flex-start;

    flex-direction: column

  }



  .simpleHero {

    padding-top: 170px

  }



  .storyHero {

    min-height: 720px

  }



  .storyChapter {

    gap: 24px

  }



  .storyChapter.reverse>img {

    order: 2

  }

}



.formTrust {

  grid-column: 1/-1;

  margin-top: 4px;

  color: var(--muted);

  font-size: 12px;

  letter-spacing: .02em

}



/* ---------- V5 final polish ---------- */

body {

  padding-top: 0

}



.topline {

  position: fixed;

  top: 0;

  left: 0;

  right: 0;

  z-index: 70;

  transition: transform .22s ease, opacity .22s ease

}



.nav {

  top: 34px;

  background: rgba(6, 6, 6, .94);

  backdrop-filter: blur(18px);

  border-bottom: 0;

  transition: top .22s ease, background .22s ease, box-shadow .22s ease

}



.nav.scrolled {

  background: rgba(6, 6, 6, .97);

  top: 0;

  box-shadow: 0 12px 30px rgba(0, 0, 0, .28)

}



.hero,

.pageHero,

.tbHero,

.storyHero,

.proHero,

.simpleHero,

.giftHero,

.missionDetailHero {

  scroll-margin-top: 114px

}



.menuToggle {

  display: none;

  margin-left: auto;

  width: 44px;

  height: 44px;

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

  background: #0b0b0b;

  align-items: center;

  justify-content: center;

  flex-direction: column;

  gap: 5px;

  cursor: pointer

}



.menuToggle span {

  display: block;

  width: 20px;

  height: 2px;

  background: var(--text);

  transition: .2s

}



.menuToggle.open span:nth-child(1) {

  transform: translateY(7px) rotate(45deg)

}



.menuToggle.open span:nth-child(2) {

  opacity: 0

}



.menuToggle.open span:nth-child(3) {

  transform: translateY(-7px) rotate(-45deg)

}



.mobileMenu {

  position: fixed;

  top: 114px;

  left: 0;

  right: 0;

  z-index: 65;

  background: rgba(5, 5, 5, .985);

  max-height: 0;

  overflow: hidden;

  transition: max-height .28s ease, top .22s ease;

}



.mobileMenu.open {

  max-height: calc(100vh - 114px);

  overflow: auto

}



.mobileMenuInner {

  width: min(var(--max), calc(100% - 28px));

  margin: auto;

  padding: 22px 0 30px;

  display: grid;

  gap: 3px

}



.mobileMenuInner>a {

  padding: 13px 6px;

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

  font-family: "Gemunu Libre", sans-serif;

  font-size: 25px;

  font-weight: 800;

  text-transform: uppercase

}



.mobileMenuInner>a.btn {

  font-family: "Poppins", sans-serif;

  font-size: 11px;

  margin-top: 15px;

  border-bottom: 0

}



.mobileGroupLabel {

  color: var(--yellow);

  font-size: 9px;

  font-weight: 800;

  text-transform: uppercase;

  letter-spacing: .16em;

  padding: 13px 6px 3px

}



.mobileLang {

  display: flex;

  gap: 9px;

  padding: 15px 6px 6px;

  font-size: 11px;

  font-weight: 800;

  text-transform: uppercase

}



.mobileLang a.active {

  color: var(--yellow)

}



.brandLink {

  display: flex;

  align-items: center

}



.topline.hidden {

  transform: translateY(-100%);

  opacity: 0;

  pointer-events: none

}



.nav.scrolled .mobileMenu {

  top: 80px

}



.mission>video {

  position: absolute;

  inset: 0;

  width: 100%;

  height: 100%;

  object-fit: cover;

  transition: transform .5s ease

}



.mission:hover>video {

  transform: scale(1.025)

}



.missionKicker {

  font-size: 10px;

  font-weight: 800;

  letter-spacing: .18em;

  text-transform: uppercase;

  color: #eee;

  margin-bottom: 12px

}



.missionTitle {

  font-family: "Gemunu Libre", sans-serif;

  font-size: clamp(48px, 5vw, 72px);

  font-weight: 800;

  line-height: .83;

  text-transform: uppercase;

  margin-bottom: 14px

}



.mission.paint .missionTitle span,

.mission.paint .missionTitle {

  color: var(--text)

}



.mission.paint .missionTitle span {

  color: var(--pink)

}



.mission.foam .missionTitle span {

  color: #4dd8fb

}



.difficulty {

  display: grid;

  grid-template-columns: 1fr 1fr;

  gap: 26px;

  margin: 22px 0 24px

}



.diffLabel {

  display: flex;

  justify-content: space-between;

  gap: 8px;

  font-size: 9px;

  letter-spacing: .14em;

  text-transform: uppercase;

  color: #ddd

}



.diffLabel b {

  color: white

}



.diffBars {

  display: grid;

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

  gap: 5px;

  margin-top: 8px

}



.diffBars i {

  height: 6px;

  background: rgba(255, 255, 255, .18)

}



.diffBars i.on {

  background: var(--yellow)

}



.mission.foam .diffBars i.on {

  background: #4dd8fb

}



.missionDetailHero {

  min-height: 780px;

  height: 88vh;

  position: relative;

  display: flex;

  align-items: flex-end;

  overflow: hidden;

  padding-top: 114px

}



.page-template-city-mission-foam .missionDetailHero .diffBars i.on {

  background: #67d5ff !important;

  box-shadow: 0 0 0 1px rgba(103, 213, 255, .16);

}



.missionDetailHero>video {

  position: absolute;

  inset: 0;

  width: 100%;

  height: 100%;

  object-fit: cover

}



.missionDetailHero:after {

  content: "";

  position: absolute;

  inset: 0;

  background: linear-gradient(90deg, rgba(0, 0, 0, .94) 0%, rgba(0, 0, 0, .55) 52%, rgba(0, 0, 0, .14) 82%), linear-gradient(0deg, rgba(0, 0, 0, .92), transparent 55%)

}



.missionDetailHeroCopy {

  z-index: 2;

  position: relative;

  padding-bottom: 65px

}



.missionDetailHero h1 {

  font-family: "Gemunu Libre", sans-serif;

  font-size: clamp(72px, 8.6vw, 132px);

  line-height: .8;

  text-transform: uppercase;

  margin: 12px 0 20px;

  max-width: 1040px

}



.missionDetailHero h1 span {

  color: var(--yellow)

}



.missionDetailHero h1 .foamText {

  color: #4dd8fb

}



.missionDetailHero p {

  max-width: 740px;

  color: #ddd;

  font-size: 17px;

  line-height: 1.65

}



.missionDetailHero .difficulty {

  max-width: 560px

}



.missionDetails {

  padding-top: 85px

}



.missionRow {

  display: grid;

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

  gap: 42px;

  align-items: center;

  min-height: 360px;

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

  padding: 36px 0

}



.missionRow:last-child {

  border-bottom: 1px solid var(--border)

}



.missionPicto {

  display: flex;

  align-items: center;

  justify-content: center;

  min-height: 220px

}



.missionPicto img {

  width: 155px;

  height: 155px;

  object-fit: contain;

  filter: brightness(0) invert(1);

  opacity: .9

}



.missionRowCopy {

  position: relative

}



.rowNum {

  font-family: "Gemunu Libre", sans-serif;

  font-size: 18px;

  color: var(--yellow);

  font-weight: 800;

  letter-spacing: .12em

}



.missionRowCopy h2 {

  font-family: "Gemunu Libre", sans-serif;

  font-size: 58px;

  text-transform: uppercase;

  line-height: .88;

  margin: 6px 0 15px

}



.missionRowCopy p {

  color: var(--muted);

  font-size: 16px;

  line-height: 1.7;

  margin: 0;

  max-width: 620px

}



.missionAnim {

  min-height: 300px;

  background: #f0f0f0;

  display: flex;

  align-items: center;

  justify-content: center;

  overflow: hidden

}



.missionAnim>img {

  width: 100%;

  height: 100%;

  object-fit: contain

}



.foamRow .missionPicto {

  min-height: 180px

}



.foamPicto span {

  width: 140px;

  height: 140px;

  border: 8px solid #ff9000;

  border-radius: 50%;

  display: flex;

  align-items: center;

  justify-content: center;

  font-family: "Gemunu Libre", sans-serif;

  font-size: 80px;

  font-weight: 800;

  color: #ff9000

}



.foamAnim {

  background: #080808;

  border: 1px solid var(--border)

}



.foamGameDemo {

  width: 100%;

  height: 300px;

  position: relative;

  display: flex;

  align-items: center;

  justify-content: center;

  overflow: hidden;

  background: radial-gradient(circle at center, #242424, #080808 70%)

}



.numbersDemo {

  gap: 16px

}



.numbersDemo i {

  width: 44px;

  height: 44px;

  border-radius: 50%;

  background: #f3d045;

  animation: demoPulse 1.4s infinite

}



.numbersDemo i:nth-child(2) {

  background: #c62561;

  animation-delay: .25s

}



.numbersDemo i:nth-child(3) {

  background: #4dd8fb;

  animation-delay: .5s

}



.numbersDemo i:nth-child(4) {

  background: #7ed957;

  animation-delay: .75s

}



.numbersDemo span {

  position: absolute;

  bottom: 28px;

  font-family: "Gemunu Libre";

  font-size: 28px;

  letter-spacing: .18em

}



.switchDemo {

  gap: 12px

}



.switchDemo span {

  width: 62px;

  height: 62px;

  border: 3px solid var(--yellow);

  display: flex;

  align-items: center;

  justify-content: center;

  font-family: "Gemunu Libre";

  font-size: 38px;

  font-weight: 800

}



.switchDemo b {

  position: absolute;

  width: 120%;

  height: 3px;

  background: #ff1616;

  box-shadow: 0 0 12px #ff1616;

  animation: laserMove 2s infinite alternate

}



.switchDemo b:nth-of-type(2) {

  transform: rotate(25deg);

  animation-delay: .5s

}



.switchDemo b:nth-of-type(3) {

  transform: rotate(-22deg);

  animation-delay: 1s

}



.riddlesDemo {

  gap: 14px

}



.riddlesDemo span {

  font-family: "Gemunu Libre";

  font-size: 68px;

  color: var(--yellow);

  animation: demoPulse 1.8s infinite

}



.riddlesDemo span:nth-child(2) {

  color: #4dd8fb;

  animation-delay: .3s

}



.riddlesDemo span:nth-child(3) {

  color: var(--pink);

  animation-delay: .6s

}



.riddlesDemo span:nth-child(4) {

  color: white;

  animation-delay: .9s

}



.memoryDemo {

  display: grid;

  grid-template-columns: repeat(4, 50px);

  grid-template-rows: repeat(4, 50px);

  gap: 5px

}



.memoryDemo i {

  background: #222;

  animation: tileFlash 2.2s infinite

}



.memoryDemo i:nth-child(3n) {

  animation-delay: .35s

}



.memoryDemo i:nth-child(4n) {

  animation-delay: .8s

}



.memoryDemo i:nth-child(5n) {

  animation-delay: 1.2s

}



.foamBombDemo {

  width: 100%;

  height: 300px;

  object-fit: cover

}



@keyframes demoPulse {



  0%,

  100% {

    transform: scale(.92);

    opacity: .45

  }



  50% {

    transform: scale(1.08);

    opacity: 1

  }

}



@keyframes laserMove {

  from {

    top: 25%;

    left: -10%

  }



  to {

    top: 75%;

    left: -5%

  }

}



@keyframes tileFlash {



  0%,

  70%,

  100% {

    background: #222

  }



  25% {

    background: #4dd8fb

  }



  45% {

    background: var(--pink)

  }

}



.photoCarousel {

  position: relative

}



.carouselTrack {

  display: flex;

  gap: 12px;

  overflow-x: auto;

  scroll-snap-type: x mandatory;

  scrollbar-width: none;

  padding: 2px

}



.carouselTrack::-webkit-scrollbar {

  display: none

}



.carouselTrack figure {

  flex: 0 0 50%;

  height: 430px;

  margin: 0;

  scroll-snap-align: start;

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

  overflow: hidden;

  background: #111

}



.carouselTrack img {

  width: 100%;

  height: 100%;

  object-fit: cover

}



.carouselBtn {

  position: absolute;

  z-index: 3;

  top: 50%;

  transform: translateY(-50%);

  width: 48px;

  height: 48px;

  border: 1px solid rgba(255, 255, 255, .3);

  background: rgba(0, 0, 0, .72);

  color: white;

  font-size: 35px;

  cursor: pointer

}



.carouselBtn.prev {

  left: 12px

}



.carouselBtn.next {

  right: 12px

}



.birthdayGallery {

  background: #0c0c0d

}



.birthdayGrid {

  display: grid;

  grid-template-columns: 1.2fr .8fr 1fr;

  gap: 12px

}



.birthdayGrid img {

  width: 100%;

  height: 430px;

  object-fit: cover;

  border: 1px solid var(--border)

}



/* keep both top banner and header pinned, no dead gap after scrolling */

@media(max-width:980px) {

  .topline {

    height: 28px

  }



  .nav {

    top: 28px;

    height: 68px

  }



  .mobileMenu {

    top: 96px

  }



  .nav.scrolled .mobileMenu {

    top: 68px

  }



  .navlinks,

  .langSelect,

  .desktopCta {

    display: none !important

  }



  .menuToggle {

    display: flex

  }



  .brandCluster {

    margin-right: auto

  }



  .logo {

    width: 135px

  }



  .hero {

    min-height: 690px

  }



  .heroContent {

    padding-bottom: 70px

  }



  .missionRow {

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

    gap: 24px

  }



  .missionRowCopy h2 {

    font-size: 48px

  }



  .missionAnim,

  .foamGameDemo,

  .foamBombDemo {

    min-height: 240px;

    height: 240px

  }



  .carouselTrack figure {

    flex-basis: 72%;

    height: 390px

  }

}



@media(max-width:720px) {

  .missionRow {

    grid-template-columns: 84px 1fr;

    gap: 16px;

    padding: 28px 0

  }



  .missionPicto {

    min-height: 100px

  }



  .missionPicto img {

    width: 76px;

    height: 76px

  }



  .foamPicto span {

    width: 74px;

    height: 74px;

    border-width: 5px;

    font-size: 42px

  }



  .missionAnim {

    grid-column: 1/-1;

    min-height: 280px

  }



  .foamGameDemo,

  .foamBombDemo {

    height: 280px

  }



  .missionRowCopy h2 {

    font-size: 43px

  }



  .difficulty {

    grid-template-columns: 1fr;

    gap: 13px

  }



  .birthdayGrid {

    grid-template-columns: 1fr

  }



  .birthdayGrid img {

    height: 310px

  }



  .carouselTrack figure {

    flex-basis: 88%;

    height: 330px

  }

}



@media(max-width:560px) {

  .topline {

    font-size: 8px;

    letter-spacing: .08em

  }



  .nav .wrap,

  .nav .nav-right {

    gap: 12px

  }



  .cityBadge {

    display: inline-flex !important;

    font-size: 9px;

    padding: 7px 8px

  }



  .hero h1.home_hero_title {

    font-size: 58px

  }



  .mission {

    height: 570px

  }



  .missionContent {

    padding: 24px

  }



  .missionTitle {

    font-size: 51px

  }



  .missionDetailHero {

    min-height: 720px

  }



  .missionDetailHero h1 {

    font-size: 61px

  }



  .missionDetailHeroCopy {

    padding-bottom: 48px

  }



  .pressGrid6 {

    grid-template-columns: 1fr 1fr

  }



  .carouselBtn {

    display: none

  }

}



.missionAnim>video {

  width: 100%;

  height: 100%;

  object-fit: contain;

  background: #f0f0f0

}



/* ---------- V5.2 polish ---------- */

:focus-visible {

  outline: 2px solid var(--yellow);

  outline-offset: 3px

}



.nav,

.nav.scrolled {

  border-bottom: 0 !important

}



.nav.scrolled .mobileMenu.open {

  max-height: calc(100vh - 80px)

}



.birthdayHero>img {

  object-position: center 42%

}



.birthdayHero:after {

  background: linear-gradient(90deg, rgba(0, 0, 0, .94) 0%, rgba(0, 0, 0, .63) 46%, rgba(0, 0, 0, .18) 76%), linear-gradient(0deg, rgba(0, 0, 0, .82), transparent 62%)

}



.birthdayHero .wrap {

  max-width: 1280px

}



.birthdayGallery .birthdayGrid img {

  background: #111

}



@media(max-width:980px) {

  .nav.scrolled .mobileMenu.open {

    max-height: calc(100vh - 68px)

  }



  .pageHero,

  .tbHero,

  .storyHero,

  .proHero,

  .missionDetailHero {

    padding-top: 96px

  }



  .footerClaim {

    gap: 24px

  }

}



@media(max-width:720px) {

  section {

    padding: 68px 0

  }



  .pageHero {

    min-height: 660px;

    height: auto;

    padding-top: 96px

  }



  .pageHero .wrap {

    padding-bottom: 46px

  }



  .pageHero h1 {

    font-size: clamp(52px, 15vw, 72px)

  }



  .pageHero p {

    max-width: 92%;

    font-size: 14px

  }



  .footerClaim {

    grid-template-columns: 1fr;

    padding: 34px 0

  }



  .footerClaim img {

    width: 150px

  }



  .fine {

    gap: 8px

  }



  .birthdayHero>img {

    object-position: 58% center

  }

}



@media(max-width:560px) {

  .topline {

    padding: 0 12px;

    justify-content: center;

    text-align: center

  }



  .nav {

    box-shadow: none

  }



  .nav.scrolled {

    box-shadow: 0 8px 20px rgba(0, 0, 0, .32)

  }



  .mobileMenuInner>a {

    font-size: 23px

  }



  .birthdayHero>img {

    object-position: 62% center

  }

}



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

  html {

    scroll-behavior: auto

  }



  *,

  *::before,

  *::after {

    animation-duration: .01ms !important;

    animation-iteration-count: 1 !important;

    transition-duration: .01ms !important

  }

}



/* v5.3 targeted polish */

.nav {

  background: rgba(5, 5, 5, .96)

}



.nav.scrolled {

  background: rgba(5, 5, 5, .98)

}



.topline {

  border-bottom: none

}



.pressLogo.logoCard {

  padding: 18px 16px;

  background: #fff

}



.pressLogo img {

  max-width: 100%;

  max-height: 62px;

  object-fit: contain;

  display: block;

  margin: auto

}



.pressWord.sortiraparis {

  font-size: 20px;

  line-height: 1.1

}



.downloadStrip {

  margin-top: 18px;

  display: flex;

  flex-wrap: wrap;

  gap: 14px;

  align-items: center;

  background: #0b0b0b;

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

  border-radius: 22px;

  padding: 18px 22px

}



.downloadStrip strong {

  display: block;

  font-size: 14px;

  letter-spacing: .12em;

  text-transform: uppercase;

  color: var(--muted)

}



.downloadStrip p {

  margin: 4px 0 0;

  color: var(--text)

}



.programSection .programLayout {

  display: grid;

  grid-template-columns: 1.7fr .95fr;

  gap: 26px;

  align-items: start

}



.programCards {

  display: grid;

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

  gap: 18px

}



.programCard,

.programOffer,

.packageCard,

.logoQuote {

  background: linear-gradient(180deg, #121212, #0b0b0b);

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

  border-radius: 24px;

  padding: 24px;

  box-shadow: 0 20px 40px rgba(0, 0, 0, .25)

}



.programCard h3,

.programOffer h3,

.packageCard h3 {

  margin: 0 0 10px;

  font-size: 36px;

  line-height: .98;

  text-transform: uppercase;

  font-family: 'Gemunu Libre', sans-serif

}



.programCard p,

.programOffer li,

.packageCard li,

.logoQuote p {

  color: var(--text)

}



.programNum {

  display: inline-flex;

  align-items: center;

  justify-content: center;

  width: 42px;

  height: 42px;

  border-radius: 999px;

  background: var(--yellow);

  color: #111;

  font-weight: 800;

  margin-bottom: 16px

}



.offerBadge {

  display: inline-block;

  padding: 8px 12px;

  border-radius: 999px;

  background: rgba(247, 210, 23, .12);

  color: var(--yellow);

  font-size: 13px;

  font-weight: 700;

  letter-spacing: .08em;

  text-transform: uppercase;

  margin-bottom: 14px

}



.programOffer ul,

.packageCard ul {

  list-style: none;

  padding: 0;

  margin: 16px 0 22px;

  display: grid;

  gap: 10px

}



.programOffer li,

.packageCard li {

  position: relative;

  padding-left: 18px

}



.programOffer li:before,

.packageCard li:before {

  content: '•';

  position: absolute;

  left: 0;

  top: 0;

  color: var(--yellow);

  font-size: 18px;

  line-height: 1

}



.programOffer h3 span,

.priceTag strong {

  color: var(--yellow)

}



.packageGrid {

  display: grid;

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

  gap: 22px

}



.stars {

  color: var(--yellow);

  letter-spacing: 4px;

  font-size: 18px;

  margin: 4px 0 14px

}



.priceTag {

  margin-top: 18px;

  padding: 12px 16px;

  border-radius: 18px;

  background: var(--yellow);

  color: #111;

  font-weight: 700;

  display: inline-block

}



.logoQuoteGrid {

  display: grid;

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

  gap: 18px;

  margin-top: 24px

}



.logoQuote p {

  font-style: italic

}



.logoStrip {

  display: grid;

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

  gap: 18px;

  margin-top: 28px

}



.logoTile {

  background: #fff;

  border-radius: 16px;

  min-height: 88px;

  padding: 12px;

  display: flex;

  align-items: center;

  justify-content: center;

  color: #111;

  font-weight: 700;

  text-align: center

}



.teamCounter {

  display: flex;

  align-items: center;

  gap: 12px;

  margin: 8px 0 0

}



.teamCounter strong {

  font-size: 44px;

  line-height: 1;

  color: var(--yellow);

  font-family: 'Gemunu Libre', sans-serif

}



.teamCounter span {

  color: var(--muted);

  text-transform: uppercase;

  letter-spacing: .12em;

  font-size: 13px

}



.mapEmbed {

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

  border-radius: 28px;

  overflow: hidden;

  background: #0d0d0d

}



.mapEmbed iframe {

  display: block;

  width: 100%;

  height: 420px;

  border: 0

}



.footer {

  padding: 56px 0 34px

}



.footerClaim {

  padding-bottom: 20px;

  margin-bottom: 20px

}



.footerClaim p {

  margin-top: 10px;

  font-size: 14px;

  max-width: 480px

}



.footerTop.footerLinksOnly {

  gap: 24px

}



.footer .fine {

  flex-wrap: wrap;

  gap: 12px;

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

  padding-top: 16px;

  margin-top: 16px;

  font-size: 13px;

  color: var(--muted)

}



.missionAnim img {

  width: 100%;

  height: 100%;

  object-fit: contain;

  display: block

}



.foamPictoImage {

  width: 120px;

  height: 120px;

  object-fit: contain;

  filter: drop-shadow(0 10px 20px rgba(0, 0, 0, .35))

}



@media (max-width:980px) {



  .programSection .programLayout,

  .packageGrid,

  .logoQuoteGrid,

  .logoStrip {

    grid-template-columns: 1fr

  }



  .programCards {

    grid-template-columns: 1fr

  }



  .teamCounter {

    margin-bottom: 10px

  }

}



.logoWall {

  margin-top: 28px;

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

  border-radius: 20px;

  overflow: hidden;

  background: #050505

}



.logoWall img {

  display: block;

  width: 100%;

  height: auto

}



/* V6.0 final polish */

.nav,

.nav .wrap {

  border: 0 !important;

  outline: 0 !important

}



.nav:after {

  content: "";

  position: absolute;

  left: 0;

  right: 0;

  bottom: -2px;

  height: 3px;

  background: #050505;

  pointer-events: none;

  z-index: -1

}



.nav.scrolled:after {

  background: #060606

}



.missionPicto img {

  filter: none !important;

  opacity: 1 !important

}



.missionAnim {

  background: #060606 !important;

  border: 0 !important;

  min-height: 300px

}



.missionAnim>img {

  width: auto !important;

  height: auto !important;

  max-width: 300px !important;

  max-height: 300px !important;

  object-fit: contain !important

}



.foamPictoImage {

  width: 155px !important;

  height: 155px !important

}



.pressLogo {

  background: transparent !important;

  border-color: rgba(0, 0, 0, .1) !important

}



.pressLogo img {

  max-width: 88%;

  max-height: 62px;

  object-fit: contain

}



.footer {

  padding: 38px 0 22px !important

}



.footerClaim {

  grid-template-columns: 155px 1fr !important;

  gap: 24px !important;

  padding: 24px 0 26px !important;

  margin-bottom: 0 !important

}



.footerClaim img {

  width: 145px !important

}



.footerClaim strong {

  font-size: clamp(32px, 3.6vw, 50px) !important

}



.footerClaim p {

  font-size: 12px !important;

  margin-top: 7px !important

}



.footerLinksOnly {

  padding-top: 22px !important;

  gap: 20px !important

}



.footer h4 {

  font-size: 9px !important;

  margin-bottom: 8px

}



.footer a {

  font-size: 12px !important;

  margin: 6px 0 !important

}



.footerLinksOnly span {

  font-size: 10px !important

}



.footer .fine {

  margin-top: 14px !important;

  padding-top: 12px !important;

  font-size: 10px !important

}



.legalFine {

  padding-top: 6px !important

}



.logoWall {

  margin-top: 28px;

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

  overflow: hidden;

  background: #050505

}



.logoWall img {

  display: block;

  width: 100%;

  height: auto

}



@media(max-width:900px) {

  .footerClaim {

    grid-template-columns: 1fr !important

  }



  .footerClaim img {

    width: 130px !important

  }



  .footerLinksOnly {

    grid-template-columns: 1fr 1fr !important

  }



  .missionAnim>img {

    max-width: 250px !important;

    max-height: 250px !important

  }

}



@media(max-width:620px) {

  .footerLinksOnly {

    grid-template-columns: 1fr !important

  }



  .footerClaim strong {

    font-size: 38px !important

  }

}



/* ---------- V6.1 mobile + footer audit ---------- */

/* General legibility */

.metric span {

  font-size: 11px;

  line-height: 1.35;

  letter-spacing: .08em;

  color: #c8c6c0

}



.logoWall {

  padding: 18px 20px 16px;

  background: #080808;

  border-radius: 20px

}



.logoWallTitle {

  font-size: 13px;

  font-weight: 700;

  letter-spacing: .1em;

  text-transform: uppercase;

  text-align: center;

  color: #b9b7b1;

  margin: 0 0 14px

}



.logoWall img {

  width: 100%;

  height: auto;

  border-radius: 12px

}



/* The character must remain inside its own visual area. */

.storyVisual {

  overflow: hidden

}



/* Footer: one coherent compact system on every page. */

.footer {

  padding: 36px 0 22px !important;

  background: #040404;

  border-top: 1px solid rgba(255, 255, 255, .10)

}



.footer .wrap {

  width: min(var(--max), calc(100% - 48px))

}



.footerClaim {

  display: grid !important;

  grid-template-columns: 132px minmax(0, 1fr) !important;

  gap: 24px !important;

  align-items: center !important;

  padding: 0 0 24px !important;

  margin: 0 0 22px !important;

  border-bottom: 1px solid rgba(255, 255, 255, .10) !important

}



.footerClaim img {

  width: 125px !important;

  margin: 0 !important

}



.footerClaim strong {

  font-size: clamp(30px, 3vw, 44px) !important;

  line-height: .9 !important;

  letter-spacing: -.02em !important

}



.footerClaim p {

  font-size: 13px !important;

  line-height: 1.5 !important;

  margin: 7px 0 0 !important;

  color: #aaa8a2 !important

}



.footerTop.footerLinksOnly {

  display: grid !important;

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

  gap: 42px !important;

  padding: 0 0 20px !important;

  margin: 0 !important

}



.footer h4 {

  font-size: 11px !important;

  line-height: 1.3 !important;

  letter-spacing: .12em !important;

  margin: 0 0 10px !important;

  color: #8e8c86 !important

}



.footer a {

  font-size: 13px !important;

  line-height: 1.45 !important;

  margin: 6px 0 !important

}



.footerLinksOnly span {

  font-size: 12px !important;

  line-height: 1.55 !important;

  color: #aaa8a2 !important

}



.footer .fine {

  display: flex !important;

  align-items: center !important;

  justify-content: space-between !important;

  gap: 22px !important;

  margin: 0 !important;

  padding: 13px 0 0 !important;

  border-top: 1px solid rgba(255, 255, 255, .08) !important;

  font-size: 11.5px !important;

  line-height: 1.5 !important;

  color: #8f8d87 !important

}



.footer .fine+.fine {

  border-top: 0 !important;

  padding-top: 7px !important

}



.footer .fine a {

  display: inline !important;

  font-size: 11.5px !important;

  margin: 0 !important;

  color: #b7b5af !important;

  outline: none;

}



@media(max-width:980px) {



  /* Avoid oversized empty cards on tablet/mobile. */

  .featureBox {

    min-height: 0 !important;

    padding: 23px 24px !important

  }



  .featureBox h3 {

    font-size: 31px !important;

    margin: 0 0 9px !important;

    line-height: .98 !important

  }



  .featureBox p {

    font-size: 15px !important;

    line-height: 1.55 !important

  }



  .groupCard {

    min-height: 220px !important

  }



  /* Bowen no longer escapes from his column. */

  .storyVisual {

    height: 330px !important;

    margin: 0 0 24px !important

  }



  .storyVisual img.bowen {

    left: 50% !important;

    bottom: 0 !important;

    transform: translateX(-50%) !important;

    width: min(430px, 92vw) !important;

    max-height: 100% !important;

    object-fit: contain !important;

    object-position: center bottom !important

  }



  .footerClaim {

    grid-template-columns: 115px minmax(0, 1fr) !important;

    gap: 20px !important

  }



  .footerClaim img {

    width: 110px !important

  }



  .footerTop.footerLinksOnly {

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

    gap: 24px !important

  }

}



@media(max-width:720px) {



  /* Cards become content-height rather than poster-height. */

  .featureGrid {

    gap: 10px !important

  }



  .featureBox {

    min-height: 0 !important;

    padding: 21px 22px !important

  }



  .featureBox h3 {

    font-size: 29px !important

  }



  .featureBox p {

    font-size: 15px !important;

    line-height: 1.5 !important

  }



  .groupCard {

    min-height: 190px !important;

    padding: 24px !important

  }



  /* Metric labels remain readable, desktop and mobile. */

  .metric {

    padding: 19px 20px !important

  }



  .metric strong {

    font-size: 30px !important

  }



  .metric span {

    font-size: 11px !important;

    line-height: 1.35 !important;

    letter-spacing: .07em !important

  }



  .storyVisual {

    height: 285px !important;

    margin-bottom: 18px !important

  }



  .storyVisual img.bowen {

    bottom: 0 !important;

    width: min(360px, 90vw) !important

  }



  .storyCopy h2 {

    font-size: 50px !important

  }



  .logoWall {

    padding: 16px 14px 13px !important

  }



  .logoWallTitle {

    font-size: 12px !important;

    line-height: 1.35 !important;

    margin-bottom: 12px !important

  }



  .footer {

    padding: 30px 0 88px !important

  }



  .footer .wrap {

    width: calc(100% - 32px) !important

  }



  .footerClaim {

    grid-template-columns: 94px minmax(0, 1fr) !important;

    gap: 15px !important;

    padding-bottom: 20px !important;

    margin-bottom: 20px !important

  }



  .footerClaim img {

    width: 90px !important

  }



  .footerClaim strong {

    font-size: 29px !important;

    line-height: .92 !important

  }



  .footerClaim p {

    font-size: 12px !important;

    line-height: 1.45 !important;

    margin-top: 6px !important

  }



  .footerTop.footerLinksOnly {

    grid-template-columns: 1fr 1fr !important;

    gap: 22px 30px !important;

    padding-bottom: 18px !important

  }



  .footerTop.footerLinksOnly>div:nth-child(3) {

    grid-column: 1/-1 !important

  }



  .footer h4 {

    font-size: 11px !important;

    margin-bottom: 7px !important

  }



  .footer a {

    font-size: 13px !important;

    margin: 5px 0 !important

  }



  .footerLinksOnly span {

    font-size: 12px !important

  }



  .footer .fine {

    display: grid !important;

    grid-template-columns: 1fr !important;

    gap: 4px !important;

    font-size: 11px !important;

    padding-top: 11px !important

  }



  .footer .fine a {

    font-size: 11px !important

  }

}



@media(max-width:480px) {

  .featureBox {

    padding: 19px 18px !important

  }



  .featureBox h3 {

    font-size: 27px !important

  }



  .featureBox p {

    font-size: 14.5px !important

  }



  .storyVisual {

    height: 250px !important

  }



  .storyVisual img.bowen {

    width: min(325px, 92vw) !important

  }



  .storyCopy h2 {

    font-size: 46px !important

  }



  .footerClaim {

    grid-template-columns: 82px minmax(0, 1fr) !important

  }



  .footerClaim img {

    width: 78px !important

  }



  .footerClaim strong {

    font-size: 26px !important

  }



  .footerTop.footerLinksOnly {

    gap: 20px 18px !important

  }

}



/* v6.2 licence brochure polish */

#locations .opportunity {

  min-height: 430px;

  padding: 36px

}



#locations .opportunity .proPoints {

  margin: 8px 0 22px

}



.licenseBrochure {

  padding: 28px 0 0;

  background: #070707

}



.licenseBrochureCard {

  display: grid;

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

  gap: 28px;

  align-items: center;

  background: linear-gradient(110deg, var(--yellow) 0%, #f0c900 64%, #d9b600 100%);

  border-radius: 28px;

  padding: 34px 38px;

  color: #090909;

  box-shadow: 0 26px 70px rgba(0, 0, 0, .32);

  position: relative;

  overflow: hidden

}



.licenseBrochureCard:after {

  content: 'PDF';

  position: absolute;

  right: 18%;

  top: -54px;

  font-family: 'Gemunu Libre', sans-serif;

  font-weight: 800;

  font-size: 190px;

  color: rgba(0, 0, 0, .055);

  pointer-events: none

}



.licenseBrochureIcon {

  width: 78px;

  height: 78px;

  border-radius: 22px;

  background: #090909;

  color: var(--yellow);

  display: flex;

  align-items: center;

  justify-content: center;

  font-family: 'Gemunu Libre', sans-serif;

  font-size: 54px;

  font-weight: 800;

  line-height: 1;

  position: relative;

  z-index: 1

}



.licenseBrochureCopy {

  position: relative;

  z-index: 1

}



.licenseBrochureCopy .eyebrow {

  color: #090909;

  opacity: .7;

  margin-bottom: 7px

}



.licenseBrochureCopy h2 {

  font-family: 'Gemunu Libre', sans-serif;

  text-transform: uppercase;

  font-size: 48px;

  line-height: .9;

  margin: 0 0 10px;

  color: #090909

}



.licenseBrochureCopy p {

  margin: 0;

  max-width: 650px;

  color: #181818;

  font-size: 16px;

  line-height: 1.55

}



.licenseBrochureBtn {

  position: relative;

  z-index: 1;

  background: #090909 !important;

  color: #fff !important;

  border-color: #090909 !important;

  white-space: nowrap;

  padding: 17px 22px !important

}



.licenseBrochureBtn:hover {

  transform: translateY(-2px);

  background: #222 !important

}



@media (max-width:980px) {

  #locations .opportunity {

    min-height: 390px

  }



  .licenseBrochureCard {

    grid-template-columns: 72px 1fr;

    padding: 28px;

    gap: 20px

  }



  .licenseBrochureIcon {

    width: 64px;

    height: 64px;

    font-size: 44px

  }



  .licenseBrochureCopy h2 {

    font-size: 40px

  }



  .licenseBrochureBtn {

    grid-column: 1/-1;

    justify-self: start

  }

}



@media (max-width:640px) {

  #locations .opportunity {

    min-height: auto;

    padding: 28px

  }



  .licenseBrochure {

    padding-top: 18px

  }



  .licenseBrochureCard {

    display: block;

    border-radius: 22px;

    padding: 24px

  }



  .licenseBrochureIcon {

    margin-bottom: 18px

  }



  .licenseBrochureCopy h2 {

    font-size: 36px

  }



  .licenseBrochureCopy p {

    font-size: 15px

  }



  .licenseBrochureBtn {

    display: flex;

    margin-top: 20px;

    width: 100%;

    justify-content: center

  }

}



/* V6.3 — experience cards: clearer numbering + compact mobile */

:root {

  --blue: #4dd8fb

}



.steps {

  gap: 14px

}



.step {

  min-height: 270px;

  padding: 26px 28px 24px;

  border-radius: 10px;

  background: linear-gradient(180deg, #111112, #0d0d0e);

  display: flex;

  flex-direction: column;

  justify-content: flex-end

}



.step:before {

  height: 5px;

  width: 100%;

  left: 0;

  top: 0;

  background: var(--yellow)

}



.step:nth-child(2):before {

  background: var(--pink)

}



.step:nth-child(3):before {

  background: var(--blue)

}



.step .num {

  right: 22px;

  top: 14px;

  font-size: 86px;

  color: rgba(243, 208, 69, .28);

  opacity: 1

}



.step:nth-child(2) .num {

  color: rgba(198, 37, 97, .34)

}



.step:nth-child(3) .num {

  color: rgba(77, 216, 251, .30)

}



.step h3 {

  font-size: 38px;

  margin: 74px 0 10px

}



.step p {

  font-size: 15px;

  line-height: 1.55

}



@media (max-width:700px) {

  .steps {

    gap: 10px

  }



  .step {

    min-height: 0 !important;

    padding: 18px 18px 18px 20px;

    border-radius: 8px;

    justify-content: flex-start

  }



  .step:before {

    width: 6px;

    height: 100%;

    right: auto;

    bottom: 0

  }



  .step .num {

    top: 14px;

    right: 16px;

    font-size: 54px;

    line-height: .85

  }



  .step h3 {

    font-size: 30px !important;

    line-height: .92 !important;

    margin: 4px 72px 8px 0 !important;

    max-width: none

  }



  .step p {

    font-size: 14.5px !important;

    line-height: 1.48 !important;

    margin: 0 !important;

    padding-right: 0

  }

}



/* V6.4 — centered full-width yellow KPI bands + booking page */

.metrics {

  background: var(--yellow) !important;

  border-top: 0 !important;

  border-bottom: 0 !important;

  color: #090909

}



.metrics .wrap {

  width: 100% !important;

  max-width: none !important;

  margin: 0 !important;

  display: grid;

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

  padding: 0 !important

}



.metric {

  min-height: 104px;

  padding: 20px 18px !important;

  display: flex;

  flex-direction: column;

  align-items: center;

  justify-content: center;

  text-align: center;

  border-right: 1px solid rgba(0, 0, 0, .18) !important;

  border-bottom: 0 !important

}



.metric:first-child {

  border-left: 0 !important

}



.metric:last-child {

  border-right: 0 !important

}



.metric strong {

  color: #090909 !important;

  font-size: 32px !important;

  line-height: 1 !important

}



.metric span {

  color: #24220d !important;

  font-size: 12px !important;

  line-height: 1.3 !important;

  letter-spacing: .075em !important;

  margin-top: 7px !important;

  font-weight: 600

}



.proMetrics {

  background: var(--yellow) !important

}



/* Same 01/02/03 language everywhere the generic three-step component is used. */

.steps>.step:nth-child(1):before {

  background: var(--yellow) !important

}



.steps>.step:nth-child(2):before {

  background: var(--pink) !important

}



.steps>.step:nth-child(3):before {

  background: var(--blue) !important

}



.steps>.step:nth-child(1) .num {

  color: rgba(243, 208, 69, .42) !important

}



.steps>.step:nth-child(2) .num {

  color: rgba(198, 37, 97, .48) !important

}



.steps>.step:nth-child(3) .num {

  color: rgba(77, 216, 251, .44) !important

}



.bookingHero {

  padding: 178px 0 54px;

  background: radial-gradient(circle at 78% 30%, rgba(198, 37, 97, .12), transparent 34%), #070707

}



.bookingHero .wrap {

  display: grid;

  grid-template-columns: minmax(0, 1.15fr) minmax(320px, .85fr);

  gap: 54px;

  align-items: end

}



.bookingHero h1 {

  font-family: 'Gemunu Libre', sans-serif;

  font-size: clamp(66px, 7.7vw, 112px);

  line-height: .82;

  text-transform: uppercase;

  margin: 10px 0 18px;

  letter-spacing: -.035em

}



.bookingHero h1 span {

  color: var(--yellow)

}



.bookingHero p {

  font-size: 17px;

  line-height: 1.65;

  color: #cfcdc7;

  max-width: 700px;

  margin: 0

}



.bookingQuick {

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

  background: #101011;

  padding: 24px;

  border-radius: 22px;

  display: grid;

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

  gap: 1px;

  background-color: var(--border)

}



.bookingQuick div {

  background: #101011;

  padding: 19px 18px;

  min-height: 92px;

  display: flex;

  flex-direction: column;

  justify-content: center

}



.bookingQuick strong {

  font-family: 'Gemunu Libre', sans-serif;

  color: var(--yellow);

  font-size: 28px;

  line-height: 1

}



.bookingQuick span {

  font-size: 11px;

  line-height: 1.35;

  text-transform: uppercase;

  letter-spacing: .08em;

  color: #c6c3bd;

  margin-top: 5px

}



.bookingSection {

  padding: 48px 0 90px

}



.bookingFrameShell {

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

  border-radius: 28px;

  background: #0b0b0c;

  overflow: hidden;

  box-shadow: 0 30px 80px rgba(0, 0, 0, .28)

}



.bookingFrameTop {

  display: flex;

  justify-content: space-between;

  align-items: center;

  gap: 20px;

  padding: 18px 22px;

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

  background: #111112

}



.bookingFrameTop strong {

  font-size: 13px;

  letter-spacing: .11em;

  text-transform: uppercase

}



.bookingFrameTop span {

  font-size: 12px;

  color: var(--muted)

}



.bookingIframePlaceholder {

  min-height: 720px;

  display: grid;

  place-items: center;

  padding: 48px;

  background: linear-gradient(180deg, #090909, #050505)

}



.bookingPlaceholderInner {

  max-width: 650px;

  text-align: center;

  border: 1px dashed rgba(243, 208, 69, .45);

  border-radius: 24px;

  padding: 50px 34px;

  background: rgba(243, 208, 69, .025)

}



.bookingPlaceholderIcon {

  width: 70px;

  height: 70px;

  border-radius: 50%;

  display: grid;

  place-items: center;

  margin: 0 auto 18px;

  background: var(--yellow);

  color: #090909;

  font-family: 'Gemunu Libre', sans-serif;

  font-size: 36px;

  font-weight: 800

}



.bookingPlaceholderInner h2 {

  font-family: 'Gemunu Libre', sans-serif;

  font-size: 48px;

  line-height: .92;

  text-transform: uppercase;

  margin: 0 0 14px

}



.bookingPlaceholderInner p {

  color: #bdbab4;

  line-height: 1.6;

  margin: 0

}



.bookingPlaceholderCode {

  display: inline-block;

  margin-top: 20px;

  padding: 10px 13px;

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

  font: 12px/1.3 ui-monospace, SFMono-Regular, Menlo, monospace;

  color: #ddd;

  background: #101010;

  border-radius: 8px

}



@media(max-width:900px) {

  .metrics .wrap {

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

  }



  .metric {

    min-height: 88px !important;

    border-bottom: 1px solid rgba(0, 0, 0, .16) !important

  }



  .metric:nth-child(2n) {

    border-right: 0 !important

  }



  .metric:last-child {

    grid-column: 1/-1;

    border-bottom: 0 !important

  }



  .bookingHero {

    padding: 145px 0 42px

  }



  .bookingHero .wrap {

    grid-template-columns: 1fr;

    gap: 28px

  }



  .bookingQuick {

    max-width: 620px

  }



  .bookingIframePlaceholder {

    min-height: 580px

  }

}



@media(max-width:560px) {

  .metric {

    padding: 15px 10px !important;

    min-height: 80px !important

  }



  .metric strong {

    font-size: 27px !important

  }



  .metric span {

    font-size: 10.5px !important;

    letter-spacing: .055em !important

  }



  .bookingHero {

    padding: 124px 0 34px

  }



  .bookingHero h1 {

    font-size: 58px

  }



  .bookingHero p {

    font-size: 15px

  }



  .bookingQuick {

    padding: 1px;

    border-radius: 16px

  }



  .bookingQuick div {

    min-height: 78px;

    padding: 14px

  }



  .bookingQuick strong {

    font-size: 24px

  }



  .bookingQuick span {

    font-size: 10px

  }



  .bookingSection {

    padding: 28px 0 72px

  }



  .bookingFrameTop {

    display: block;

    padding: 14px 16px

  }



  .bookingFrameTop span {

    display: block;

    margin-top: 3px

  }



  .bookingIframePlaceholder {

    min-height: 500px;

    padding: 20px

  }



  .bookingPlaceholderInner {

    padding: 34px 18px

  }



  .bookingPlaceholderInner h2 {

    font-size: 38px

  }



  .bookingPlaceholderCode {

    font-size: 10px;

    overflow-wrap: anywhere

  }

}



/* ===================================================================== V6.5 — GLOBAL READABILITY PASS + COMPACT GROUP CARDS Readable UI copy is deliberately kept >= 12px for labels and >= 15px for paragraphs. Footer stays intentionally more compact. ===================================================================== */

/* Header / navigation: readable on large screens without losing density. */

.topline {

  font-size: 13px !important;

  letter-spacing: .095em !important;

  font-weight: 800 !important;

}



.navlinks,

.navItem>a,

.navItem>button {

  font-size: 13px !important;

  letter-spacing: .065em !important;

}



.navlinks {

  gap: 18px !important

}



.dropdown a {

  font-size: 12px !important;

  line-height: 1.25 !important

}



.langSelect {

  font-size: 12px !important

}



.cityBadge {

  font-size: 11px !important;

  cursor: pointer;

}



.btn {

  font-size: 12px !important;

  letter-spacing: .075em !important

}



.pill {

  font-size: 11.5px !important

}



/* Short UI labels that users actually need to understand. */

.metric span,

.tbStat span {

  font-size: 13px !important;

  line-height: 1.35 !important;

  letter-spacing: .06em !important;

  font-weight: 650 !important

}



.tag {

  font-size: 11px !important

}



.city {

  font-size: 12px !important

}



.proPoints span {

  font-size: 11px !important

}



.offer span {

  font-size: 13px !important

}



.country {

  font-size: 12px !important

}



.locationCard b {

  font-size: 11.5px !important

}



.diffLabel {

  font-size: 11px !important

}



.contactFact span:first-child {

  font-size: 12px !important

}



.formGrid span {

  font-size: 12px !important

}



.formHint {

  font-size: 12px !important;

  line-height: 1.5 !important

}



.pressNote {

  font-size: 12px !important

}



.mobileGroupLabel {

  font-size: 12px !important

}



.mobileLang {

  font-size: 13px !important

}



.bookingQuick span {

  font-size: 12px !important

}



.bookingFrameTop span {

  font-size: 13px !important

}



.bdBuy span {

  font-size: 12px !important

}



/* Core readable copy. */

.step p,

.groupCard p,

.mission p,

.sectionHead p,

.copyPanel p,

.faqItem p,

.featureBox p,

.quoteCard p,

.storyCopy p,

.storyChapter p,

.characterCard p,

.bdModule p,

.receptionCopy p,

.contactCard p,

.contactInfoPanel p,

.contactForm p,

.seoCopy p,

.programCard p,

.programOffer p,

.packageCard p,

.logoQuote p,

.bookingPlaceholderInner p {

  font-size: 16px !important;

  line-height: 1.6 !important;

}



.bullet,

.checklist div,

.timeStep span {

  font-size: 15px !important;

  line-height: 1.55 !important

}



.quoteCard strong {

  font-size: 13px !important

}



.quoteCard span {

  font-size: 12px !important

}



.characterCard p {

  font-size: 15px !important

}



/* The 3 local group cards were too wide on desktop. Keep the mobile treatment unchanged but give the desktop composition a tighter, more premium reading width. */

@media(min-width:981px) {

  .groupCards {

    max-width: 1080px !important;

    margin-left: auto !important;

    margin-right: auto !important;

    gap: 16px !important;

  }



  .groupCard {

    min-height: 272px !important;

    padding: 28px 30px !important;

  }



  .groupCard h3 {

    font-size: 42px !important

  }



  .groupCard p {

    font-size: 16px !important;

    line-height: 1.55 !important

  }

}



/* Team-building KPI bar now uses the same full-width yellow language as the other Bomb Squad KPI bars. */

.tbStats {

  width: 100% !important;

  background: var(--yellow) !important;

  color: #090909 !important;

  border: 0 !important;

  display: grid !important;

  grid-template-columns: repeat(5, minmax(0, 1fr)) !important;

}



.tbStat {

  min-height: 104px !important;

  padding: 20px 18px !important;

  display: flex !important;

  flex-direction: column !important;

  align-items: center !important;

  justify-content: center !important;

  text-align: center !important;

  border-right: 1px solid rgba(0, 0, 0, .18) !important;

  border-bottom: 0 !important;

}



.tbStat:last-child {

  border-right: 0 !important

}



.tbStat strong {

  color: #090909 !important;

  font-size: 32px !important;

  line-height: 1 !important

}



.tbStat span {

  color: #24220d !important;

  margin-top: 7px !important

}



/* Mobile readability floor. */

@media(max-width:980px) {

  .topline {

    height: 32px !important;

    padding: 0 12px !important;

    justify-content: center !important;

    font-size: 12px !important;

    letter-spacing: .065em !important;

  }



  .nav {

    top: 32px !important

  }



  .nav.scrolled {

    top: 0 !important

  }



  .mobileMenu {

    top: 100px !important

  }



  .nav.scrolled .mobileMenu {

    top: 68px !important

  }



  .mobileMenuInner>a {

    font-size: 27px !important;

    line-height: 1.05 !important;

    padding: 14px 6px !important

  }



  .mobileMenuInner>a.btn {

    font-size: 13px !important

  }



  .cityBadge {

    font-size: 11px !important

  }



  .hero p,

  .pageHero p,

  .tbHero p,

  .proHero p,

  .storyHero p,

  .bookingHero p {

    font-size: 16px !important;

    line-height: 1.58 !important;

  }



  .sectionHead p,

  .copyPanel p,

  .groupCard p,

  .featureBox p,

  .step p,

  .faqItem p,

  .storyCopy p,

  .storyChapter p,

  .characterCard p,

  .bdModule p,

  .quoteCard p,

  .contactCard p,

  .seoCopy p,

  .programCard p,

  .programOffer p,

  .packageCard p {

    font-size: 15.5px !important;

    line-height: 1.55 !important;

  }



  .metrics .wrap,

  .tbStats {

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

  }



  .metric,

  .tbStat {

    min-height: 86px !important;

    padding: 15px 12px !important;

    border-bottom: 1px solid rgba(0, 0, 0, .16) !important

  }



  .metric strong,

  .tbStat strong {

    font-size: 29px !important

  }



  .metric span,

  .tbStat span {

    font-size: 12px !important;

    line-height: 1.3 !important;

    letter-spacing: .045em !important

  }



  .metric:nth-child(2n),

  .tbStat:nth-child(2n) {

    border-right: 0 !important

  }



  .metric:last-child,

  .tbStat:last-child {

    grid-column: 1/-1 !important;

    border-bottom: 0 !important

  }



  /* Group cards were already working well on mobile: only improve type. */

  .groupCard {

    min-height: 190px !important;

    padding: 24px !important

  }



  .groupCard h3 {

    font-size: 38px !important;

    line-height: .92 !important

  }



  .groupCard p {

    font-size: 16px !important;

    line-height: 1.5 !important

  }

}



@media(max-width:560px) {

  .topline {

    font-size: 11.5px !important;

    letter-spacing: .045em !important

  }



  .metric,

  .tbStat {

    min-height: 82px !important;

    padding: 13px 9px !important

  }



  .metric strong,

  .tbStat strong {

    font-size: 28px !important

  }



  .metric span,

  .tbStat span {

    font-size: 12px !important

  }



  .bookingQuick span {

    font-size: 12px !important

  }



  .bookingFrameTop span {

    font-size: 12.5px !important

  }

}



/* V6.6 — booking pricing panel */

.bookingPrices {

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

  border-radius: 24px;

  overflow: hidden;

  background: #0d0d0e;

  box-shadow: 0 22px 60px rgba(0, 0, 0, .2)

}



.bookingPricesHead {

  padding: 20px 22px 16px;

  background: linear-gradient(135deg, rgba(243, 208, 69, .12), rgba(198, 37, 97, .08));

  border-bottom: 1px solid var(--border)

}



.bookingPricesHead strong {

  display: block;

  font-family: 'Gemunu Libre', sans-serif;

  font-size: 30px;

  line-height: 1;

  text-transform: uppercase;

  color: var(--yellow)

}



.bookingPricesHead span {

  display: block;

  margin-top: 5px;

  font-size: 13px;

  line-height: 1.4;

  color: #c9c6bf

}



.priceRow {

  display: flex;

  align-items: center;

  justify-content: space-between;

  gap: 18px;

  padding: 15px 22px;

  border-bottom: 1px solid var(--border)

}



.priceRow:last-child {

  border-bottom: 0

}



.priceRow>span {

  font-size: 16px;

  font-weight: 600;

  color: #f4f2ed

}



.priceRow>strong {

  font-family: 'Gemunu Libre', sans-serif;

  font-size: 27px;

  line-height: 1;

  color: var(--yellow);

  white-space: nowrap

}



.priceRow small {

  font-family: 'Poppins', sans-serif;

  font-size: 11px;

  font-weight: 600;

  text-transform: uppercase;

  letter-spacing: .045em;

  color: #bdb9b1

}



@media(max-width:900px) {

  .bookingPrices {

    max-width: 620px;

    width: 100%

  }

}



@media(max-width:560px) {

  .bookingPrices {

    border-radius: 18px

  }



  .bookingPricesHead {

    padding: 16px 18px 13px

  }



  .bookingPricesHead strong {

    font-size: 27px

  }



  .bookingPricesHead span {

    font-size: 13px

  }



  .priceRow {

    padding: 12px 18px

  }



  .priceRow>span {

    font-size: 15.5px

  }



  .priceRow>strong {

    font-size: 25px

  }



  .priceRow small {

    font-size: 10.5px

  }

}



/* ===== V7.0 architecture + mobile navigation ===== */

.globalSite .nav {

  top: 0 !important

}



.globalSite .mobileMenu {

  top: 80px !important

}



.globalSite .hero,

.globalSite .pageHero,

.globalSite .storyHero,

.globalSite .proHero,

.globalSite .simpleHero {

  scroll-margin-top: 80px

}



.globalSite .hero {

  padding-top: 80px

}



.mobileBook, .globalSite .mobileBook.globalFind{

  background: #D3105E;

  color: #fff;

}



/* Fixed footer area inside mobile menu: language + CTA always visible */

.mobileMenuInner {

  height: 100%;

  min-height: 0;

  padding: 0 !important;

  display: grid !important;

  grid-template-rows: minmax(0, 1fr) auto !important;

  gap: 0 !important

}



.mobileMenuLinks {

  overflow-y: auto;

  padding: 20px 0 18px;

  min-height: 0

}



.mobileMenuLinks a {

  display: block;

  padding: 13px 6px;

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

  font-family: "Gemunu Libre", sans-serif;

  font-size: 25px;

  font-weight: 800;

  text-transform: uppercase

}



.mobileMenuLinks .mobileGroupLabel {

  padding: 15px 6px 5px

}



.mobileNavItem.hasDrop button {

  background: none;

  border: none;

  color: var(--yellow);

  font-size: 12px;

  font-weight: 800;

  text-transform: uppercase;

  letter-spacing: .16em;

  padding: 10px 6px 3px !important;

}



.mobileMenuFooter {

  position: relative;

  z-index: 3;

  background: #070707;

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

  padding: 12px 6px 16px;

  display: grid;

  grid-template-columns: auto minmax(170px, 1fr);

  gap: 14px;

  align-items: center

}



.mobileMenuFooter .mobileLang {

  margin: 0 !important;

  padding: 0 !important

}



.mobileMenuFooter>.btn {

  margin: 0 !important;

  min-height: 52px !important;

  font-size: 13px !important

}



.mobileMenu.open {

  height: calc(100dvh - 114px) !important;

  max-height: none !important;

  overflow: hidden !important

}



.nav.scrolled .mobileMenu.open {

  height: calc(100dvh - 80px) !important;

  max-height: none !important

}



.globalSite .mobileMenu.open {

  height: calc(100dvh - 80px) !important

}



/* Team building V7: lighter proof band and four compact stats */

.tbStats {

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

}



.tbStat {

  min-height: 104px !important;

  display: flex;

  flex-direction: column;

  justify-content: center;

  align-items: center;

  text-align: center;

  padding: 18px 14px !important

}



.tbStat strong {

  font-size: 31px !important

}



.companyLogoCarousel {

  margin-top: 18px;

  overflow: hidden;

  position: relative;

  padding: 0 6px

}



.companyLogoTrack {

  display: flex;

  align-items: center;

  gap: 16px;

  width: max-content;

  animation: logoTicker 28s linear infinite;

  will-change: transform

}



.companyLogoCarousel:hover .companyLogoTrack {

  animation-play-state: paused

}



.companyLogo {

  flex: 0 0 210px;

  width: 210px;

  height: 76px;

  background: #fff;

  border-radius: 14px;

  display: flex;

  align-items: center;

  justify-content: center;

  padding: 10px 14px;

  overflow: hidden

}



.companyLogo img {

  max-width: 84%;

  max-height: 38px;

  width: auto;

  height: auto;

  object-fit: contain

}



@keyframes logoTicker {

  from {

    transform: translateX(0)

  }



  to {

    transform: translateX(-50%)

  }

}



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

  .companyLogoTrack {

    animation: none

  }

}



@media(max-width:980px) {

  .globalSite .nav {

    top: 0 !important

  }



  .globalSite .mobileMenu {

    top: 68px !important

  }



  .globalSite .hero {

    padding-top: 68px

  }



  .mobileMenu.open {

    height: calc(100dvh - 96px) !important

  }



  .nav.scrolled .mobileMenu.open {

    height: calc(100dvh - 68px) !important

  }



  .globalSite .mobileMenu.open {

    height: calc(100dvh - 68px) !important

  }



  .tbStats {

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

  }



  .tbStat:last-child {

    grid-column: auto !important

  }

}



@media(max-width:560px) {

  .mobileMenuLinks a {

    font-size: 27px !important;

    line-height: 1.03 !important;

    padding: 14px 6px !important

  }



  .mobileMenuFooter {

    grid-template-columns: auto 1fr;

    gap: 10px;

    padding: 10px 6px 12px

  }



  .mobileMenuFooter>.btn {

    font-size: 12px !important;

    letter-spacing: .06em !important;

    padding: 0 14px !important

  }



  .companyLogo {

    flex-basis: 170px;

    width: 170px;

    height: 68px;

    padding: 8px 10px

  }



  .companyLogo img {

    max-height: 30px;

    max-width: 80%

  }



  .tbStat {

    min-height: 82px !important;

    padding: 12px 8px !important

  }



  .tbStat strong {

    font-size: 28px !important

  }

}



.reviewBand .reviewProof {

  font-family: inherit;

  font-size: inherit;

  line-height: inherit;

  text-transform: none;

  font-weight: 800

}



/* V7.3 FAQ accordion */

@media(max-width:560px) {

  .faq {

    gap: 10px !important

  }



  .faqItem summary {

    font-size: 19px !important;

    padding: 17px 48px 17px 18px !important

  }



  .faqItem summary::after {

    right: 17px !important;

    font-size: 20px !important

  }



  .faqAnswer {

    padding: 14px 18px 18px !important

  }



  .faqItem p {

    font-size: 15.5px !important;

    line-height: 1.6 !important

  }

}



/* V7.8.7 final corrective pass */

/* Mobile homepage: only the central tagline remains inside the hero. Floating CTA stays visible. */

@media(max-width:768px) {

  body.homeHeroMinimal .hero {

    height: 100dvh !important;

    min-height: 100dvh !important;

    padding-top: 0 !important;

    position: relative !important;

    display: flex !important;

    align-items: center !important;

    justify-content: center !important;

  }



  body.homeHeroMinimal .heroContent {

    position: relative !important;

    inset: auto !important;

    transform: none !important;

    width: 100% !important;

    max-width: none !important;

    margin: 0 !important;

    padding: 0 18px !important;

    display: flex !important;

    flex-direction: column !important;

    align-items: center !important;

    justify-content: center !important;

    text-align: center !important;

  }



  body.homeHeroMinimal .heroMeta,

  body.homeHeroMinimal .hero p,

  body.homeHeroMinimal .heroBtns,

  body.homeHeroMinimal .scrollCue {

    display: none !important;

  }



  body.homeHeroMinimal .hero h1.home_hero_title {

    display: block !important;

    width: 100% !important;

    max-width: none !important;

    margin: 0 auto !important;

    padding: 0 6px !important;

    text-align: center !important;

    font-size: clamp(54px, 17vw, 78px) !important;

    line-height: .84 !important;

  }

}



/* EVG price: text must stay readable on yellow tag. */

.priceTag strong {

  color: #111 !important;

}



/* Team-building lead form: 50% participants + 25% date + 25% time on desktop. */

.tbLeadForm {

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

}



.tbLeadForm .half {

  grid-column: span 2;

}



.tbLeadForm .quarter {

  grid-column: span 1;

}



.tbLeadForm .full {

  grid-column: 1/-1 !important;

}



@media(max-width:700px) {

  .tbLeadForm {

    grid-template-columns: 1fr !important;

  }



  .tbLeadForm .half,

  .tbLeadForm .quarter,

  .tbLeadForm .full {

    grid-column: auto !important;

  }

}



/* BD excerpt medley */

.bdMedley {

  columns: 3 280px;

  column-gap: 14px;

  margin-top: 30px;

}



.bdMedley figure {

  break-inside: avoid;

  margin: 0 0 14px;

  overflow: hidden;

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

  background: #0d0d0d;

}



.bdMedley img {

  display: block;

  width: 100%;

  height: auto;

}



.bdMedley figure:nth-child(2n) {

  transform: translateY(8px);

}



@media(max-width:700px) {

  .bdMedley {

    columns: 2 150px;

    column-gap: 8px;

    margin-top: 20px;

  }



  .bdMedley figure {

    margin-bottom: 8px;

  }



  .bdMedley figure:nth-child(2n) {

    transform: none;

  }

}



/* V7.9.1 — mobile navigation cleanup */

@media(max-width:980px) {



  /* Keep language switcher permanently visible in the header. */

  .nav .langSelect {

    display: flex !important;

    align-items: center !important;

    gap: 6px !important;

    margin-left: auto !important;

    padding: 0 !important;

    font-size: 12px !important;

    line-height: 1 !important;

    white-space: nowrap !important;

    flex: 0 0 auto !important;

  }



  .nav .langSelect a {

    opacity: .58 !important;

  }



  .nav .langSelect a.active {

    opacity: 1 !important;

    color: var(--yellow) !important;

  }



  .menuToggle {

    margin-left: 8px !important;

    flex: 0 0 44px !important;

  }



  /* Language selector is no longer duplicated inside the open menu. */

  .mobileMenuFooter .mobileLang {

    display: none !important;

  }



  .mobileMenuFooter {

    grid-template-columns: 1fr !important;

    padding: 10px 6px 14px !important;

  }



  /* Remove the dead strip above the first menu item. */

  .mobileMenuLinks {

    padding: 0 0 14px !important;

  }



  .mobileMenuLinks .mobileGroupLabel:first-child {

    padding-top: 12px !important;

  }

}



@media(max-width:560px) {



  .nav .wrap,

  .nav .nav-right {

    gap: 8px !important;

  }



  .nav .langSelect {

    font-size: 11.5px !important;

    gap: 5px !important;

  }



  .cityBadge {

    padding: 6px 7px !important;

  }



  .menuToggle {

    margin-left: 4px !important;

  }

}



/* ===== V7.9.2 — mobile menu geometry + reliable close control ===== */

@media(max-width:980px) {



  /* Keep the close control above the menu overlay and make its state visible from aria-expanded as well as the legacy .open class. */

  .menuToggle {

    position: relative !important;

    z-index: 90 !important;

    pointer-events: auto !important;

  }



  .menuToggle[aria-expanded="true"] span:nth-child(1) {

    transform: translateY(7px) rotate(45deg) !important;

  }



  .menuToggle[aria-expanded="true"] span:nth-child(2) {

    opacity: 0 !important;

  }



  .menuToggle[aria-expanded="true"] span:nth-child(3) {

    transform: translateY(-7px) rotate(-45deg) !important;

  }



  /* JavaScript now pins top/height to the real header bottom. These are only safe fallbacks for the first paint. */

  body:not(.globalSite) .mobileMenu {

    top: 96px !important;

  }



  body:not(.globalSite) .nav.scrolled .mobileMenu {

    top: 68px !important;

  }



  .globalSite .mobileMenu {

    top: 68px !important;

  }



  /* No dead strip before the first visible navigation item. */

  .mobileMenuInner {

    padding-top: 0 !important;

  }



  .mobileMenuLinks {

    padding: 0 0 12px !important;

    margin: 0 !important;

  }



  .mobileMenuLinks .mobileGroupLabel:first-child {

    padding: 0 6px 3px !important;

    margin: 0 !important;

  }



  /* Language is permanently in the header, never duplicated in the drawer. */

  .mobileMenuFooter .mobileLang {

    display: none !important;

  }



  .mobileMenuFooter {

    grid-template-columns: 1fr !important;

  }

}



/* ===== V8.0 — final mobile navigation geometry ===== The nav uses backdrop-filter, which creates a containing block for fixed descendants in Chromium/WebKit. The old position:fixed mobile drawer therefore inherited an extra offset equal to the top banner height. Keep the drawer absolute to .nav. */

@media(max-width:980px) {

  body:not(.globalSite) .topline {

    height: 32px !important;

  }



  body:not(.globalSite) .nav {

    top: 32px !important;

    height: 68px !important;

    overflow: visible !important;

    border-bottom: 0 !important;

  }



  body:not(.globalSite) .nav.scrolled {

    top: 0 !important;

  }



  .globalSite .nav {

    top: 0 !important;

    height: 68px !important;

    overflow: visible !important;

    border-bottom: 0 !important;

  }



  .mobileMenu,

  body:not(.globalSite) .mobileMenu,

  body:not(.globalSite) .nav.scrolled .mobileMenu,

  .globalSite .mobileMenu {

    position: absolute !important;

    top: calc(100% - 1px) !important;

    left: 0 !important;

    right: 0 !important;

    bottom: auto !important;

    height: 0 !important;

    max-height: 0 !important;

    margin: 0 !important;

    padding: 0 !important;

    border: 0 !important;

    overflow: hidden !important;

    background: rgba(5, 5, 5, .992) !important;

    transition: height .24s ease !important;

  }



  .mobileMenu.open,

  body:not(.globalSite) .mobileMenu.open {

    height: calc(100dvh - 99px) !important;

    max-height: none !important;

    overflow: hidden !important;

    border-top: 0 !important;

    border-bottom: 1px solid var(--border) !important;

  }



  body:not(.globalSite) .nav.scrolled .mobileMenu.open,

  .globalSite .mobileMenu.open {

    height: calc(100dvh - 67px) !important;

  }



  .mobileMenuInner {

    height: 100% !important;

    min-height: 0 !important;

    padding-top: 0 !important;

  }



  .mobileMenuLinks {

    margin: 0 !important;

    padding-top: 0 !important;

  }



  .mobileMenuLinks .mobileGroupLabel:first-child {

    margin-top: 0 !important;

    padding-top: 10px !important;

  }



  body.menuOpen {

    overflow: hidden !important;

  }



  .nav+.hero,

  .nav+.pageHero,

  .nav+.tbHero,

  .nav+.storyHero,

  .nav+.proHero,

  .nav+.simpleHero,

  .nav+.giftHero,

  .nav+.missionDetailHero {

    border-top: 0 !important;

    margin-top: 0 !important;

  }

}



@media (max-width: 768px) {

  .hero .heroContent {

    text-align: center;

  }



  .hero .heroMeta {

    justify-content: center;

    margin-left: auto;

    margin-right: auto;

  }



  .hero .heroContent h1,

  .hero .heroContent p {

    margin-left: auto;

    margin-right: auto;

  }



  .hero .heroContent p {

    max-width: 24ch;

  }



  .hero .heroBtns {

    justify-content: center;

    align-items: center;

  }



  .hero .heroBtns .btn {

    margin-left: auto;

    margin-right: auto;

  }

}



.footerExtras {

  margin: 28px 0 22px;

  padding: 20px 0 0;

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

  display: grid;

  grid-template-columns: 1.3fr .9fr;

  gap: 24px;

  align-items: start;

}



.footerBlockTitle {

  font-family: inherit;

  font-size: 11px;

  letter-spacing: .18em;

  text-transform: uppercase;

  color: var(--muted, #9c9c9c);

  margin: 0 0 14px;

  font-weight: 700;

}



.partnerStrip {

  display: flex;

  flex-wrap: wrap;

  gap: 12px;

  align-items: center;

}



.partnerLogoCard {

  display: flex;

  align-items: center;

  justify-content: center;

  min-width: 104px;

  height: 62px;

  padding: 10px 16px;

  border-radius: 14px;

  background: #fff;

  border: 1px solid rgba(0, 0, 0, .08);

  box-shadow: 0 10px 24px rgba(0, 0, 0, .12);

}



.partnerLogoCard img {

  display: block;

  max-width: 110px;

  max-height: 34px;

  width: auto;

  height: auto;

  object-fit: contain;

}



.socialLinks {

  display: flex;

  flex-wrap: wrap;

  gap: 12px;

  align-items: center;

}



.socialLinks .socialLink {

  display: inline-flex;

  align-items: center;

  gap: 10px;

  min-height: 46px;

  padding: 0 14px;

  border-radius: 999px;

  border: 1px solid rgba(255, 255, 255, .14);

  color: #fff;

  text-decoration: none;

  background: rgba(255, 255, 255, .03);

  transition: transform .2s ease, border-color .2s ease, background .2s ease;

}



.socialLink:hover {

  transform: translateY(-1px);

  border-color: rgba(255, 212, 0, .45);

  background: rgba(255, 255, 255, .06);

}



.socialLink svg {

  width: 18px;

  height: 18px;

  fill: currentColor;

  flex: 0 0 auto;

}



.socialLink span {

  font-weight: 700;

  font-size: 13px;

  letter-spacing: .04em;

}



@media (max-width: 900px) {

  .footerExtras {

    grid-template-columns: 1fr;

    gap: 18px;

  }

}



@media (max-width: 640px) {

  .partnerLogoCard {

    min-width: 88px;

    height: 54px;

    padding: 8px 12px;

  }



  .partnerLogoCard img {

    max-width: 90px;

    max-height: 28px;

  }



  .socialLinks {

    gap: 10px;

  }



  .socialLink {

    padding: 0 12px;

    min-height: 42px;

  }



  .socialLink span {

    font-size: 12px;

  }

}



/* Style CSS for Legal and Terms page BOX */

.terms-contact-form-text {

  outline: none;

  width: 100%;

  height: 117px;

  padding: 14px;

  overflow-y: auto;

  box-sizing: border-box;

  border: 1px solid #444;

  border-radius: 2px;

  background: #111;

  color: #fff;

}



.terms-contact-form-text {

  width: 100%;

  height: 360px;

  padding: 14px;

  overflow-y: auto;

  box-sizing: border-box;

  border: 1px solid #444;

  border-radius: 2px;

  background: #111;

  color: #fff;



  p {

    margin: 0 0 12px;

    line-height: 1.5;

  }



  strong {

    font-weight: 700;

  }

}



/* Global missions page */

.globalMissionsPage {

  padding: 138px 0 86px;

  background: radial-gradient(circle at 88% 6%, rgba(243, 208, 69, .045), transparent 24%), #060606

}



.globalMissionsIntro {

  display: grid;

  grid-template-columns: minmax(0, 1.05fr) minmax(300px, .95fr);

  gap: 36px;

  align-items: center;

  margin-bottom: 34px;

  min-height: 210px;

  position: relative

}



.globalMissionsIntro h1 {

  font-family: 'Gemunu Libre', sans-serif;

  font-size: clamp(66px, 7vw, 106px);

  line-height: .84;

  text-transform: uppercase;

  margin: 12px 0 14px

}



.globalMissionsIntro p {

  color: #c8c6c0;

  font-size: 16px;

  line-height: 1.55;

  max-width: 640px;

  margin: 0

}



.globalMissionsWatermark {

  justify-self: end;

  width: min(470px, 90%);

  opacity: .13;

  filter: grayscale(1) contrast(1.4);

  transform: rotate(-3deg)

}



.globalMissionGrid {

  display: grid;

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

  gap: 20px

}



.globalMissionCard {

  --accent: var(--yellow);

  min-height: 610px;

  position: relative;

  overflow: hidden;

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

  background: #111

}



.globalMissionCard::before {

  content: '';

  position: absolute;

  inset: 0;

  background-image: var(--mission-image);

  background-size: cover;

  background-position: center 28%;

  transform: scale(1.01)

}



.globalMissionCard::after {

  content: '';

  position: absolute;

  inset: 0;

  background: linear-gradient(180deg, rgba(0, 0, 0, .04) 12%, rgba(0, 0, 0, .18) 42%, rgba(4, 4, 4, .93) 78%, #070707 100%)

}



.globalMissionCard.foam {

  --accent: #4dd8fb

}



.globalMissionCard.smoke {

  --accent: var(--pink)

}



.globalMissionCard.kids {

  --accent: #9edc25

}



.globalMissionCopy {

  position: absolute;

  z-index: 2;

  left: 28px;

  right: 28px;

  bottom: 26px

}



.missionKicker {

  font-size: 10px;

  font-weight: 800;

  letter-spacing: .16em;

  text-transform: uppercase;

  color: #fff;

  margin-bottom: 10px

}



.globalMissionCard h2 {

  font-family: 'Gemunu Libre', sans-serif;

  font-size: clamp(44px, 4vw, 66px);

  line-height: .86;

  text-transform: uppercase;

  margin: 0 0 14px

}



.globalMissionCard p {

  font-size: 14px;

  line-height: 1.55;

  color: #eeeae2;

  max-width: 660px;

  margin: 0

}



.globalMissionDifficulty {

  display: grid;

  grid-template-columns: 1fr 1fr;

  gap: 24px;

  margin-top: 22px

}



.globalMissionDifficulty span {

  display: flex;

  justify-content: space-between;

  gap: 10px;

  font-size: 9px;

  font-weight: 800;

  letter-spacing: .13em;

  text-transform: uppercase;

  color: #fff

}



.globalMissionDifficulty b {

  font-size: 11px

}



.globalBars {

  display: grid;

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

  gap: 5px;

  margin-top: 8px

}



.globalBars i {

  height: 6px;

  background: rgba(255, 255, 255, .19)

}



.globalBars i.on {

  background: var(--accent);

  box-shadow: 0 0 10px color-mix(in srgb, var(--accent) 30%, transparent)

}



@media(max-width: 900px) {

  .globalMissionsIntro {

    grid-template-columns: 1fr

  }



  .globalMissionsWatermark {

    display: none

  }



  .globalMissionGrid {

    grid-template-columns: 1fr

  }



  .globalMissionCard {

    min-height: 590px

  }



  .globalMissionsPage {

    padding-top: 108px

  }

}



@media(max-width: 560px) {

  .globalMissionsPage {

    padding: 96px 0 78px

  }



  .globalMissionsIntro {

    min-height: 0;

    margin-bottom: 22px

  }



  .globalMissionsIntro h1 {

    font-size: 58px

  }



  .globalMissionsIntro p {

    font-size: 15px

  }



  .globalMissionCard {

    min-height: 560px

  }



  .globalMissionCopy {

    left: 20px;

    right: 20px;

    bottom: 20px

  }



  .globalMissionCard h2 {

    font-size: 47px

  }



  .globalMissionCard p {

    font-size: 14px

  }



  .globalMissionDifficulty {

    gap: 14px

  }



  .globalMissionDifficulty span {

    font-size: 8.5px

  }

}



/* Blog listing: whole card is clickable */

.blogCardLink {

  display: block;

  color: inherit;

  text-decoration: none

}



.blogCardLink .programCard {

  height: 100%;

  transition: transform .2s ease, border-color .2s ease

}



.blogCardLink:hover .programCard {

  transform: translateY(-3px);

  border-color: rgba(198, 37, 97, .7)

}



/* Article template */

.articlePage {

  padding: 142px 0 90px;

  background: #060606

}



.articleBreadcrumb {

  display: flex;

  flex-wrap: wrap;

  gap: 10px;

  align-items: center;

  color: #85837d;

  font-size: 10px;

  letter-spacing: .08em;

  text-transform: uppercase;

  margin: 0 0 26px

}



.articleBreadcrumb a {

  color: var(--yellow)

}



.articleHeader {

  max-width: 980px;

  margin-bottom: 30px

}



.articleHeader h1 {

  font-family: 'Gemunu Libre', sans-serif;

  font-size: clamp(62px, 7vw, 105px);

  line-height: .84;

  text-transform: uppercase;

  margin: 12px 0 16px

}



.articleHeader>p {

  max-width: 760px;

  color: #c9c6bf;

  font-size: 16px;

  line-height: 1.6

}



.articleMeta {

  display: flex;

  flex-wrap: wrap;

  gap: 22px;

  margin-top: 20px;

  color: #ddd;

  font-size: 10px;

  font-weight: 700;

  letter-spacing: .08em;

  text-transform: uppercase

}



.articleMeta span {

  color: #ddd

}



.articleMeta span::first-letter {

  color: var(--yellow)

}



.articleLayout {

  display: grid;

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

  gap: 46px;

  align-items: start

}



.articleHeroImage {

  width: 100%;

  aspect-ratio: 16/9;

  object-fit: cover;

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

  margin-bottom: 20px

}



.articleLead {

  font-size: 15px;

  line-height: 1.7;

  color: #d5d2cc;

  margin: 0 0 12px

}



.articleStep {

  display: grid;

  grid-template-columns: 48px 1fr;

  gap: 14px;

  padding: 21px 0;

  border-bottom: 1px solid var(--border)

}



.articleStepNum {

  width: 34px;

  height: 34px;

  display: flex;

  align-items: center;

  justify-content: center;

  background: var(--yellow);

  color: #080808;

  font-weight: 900;

  font-size: 12px

}



.articleStep h2 {

  font-size: 30px;

  line-height: 1;

  text-transform: uppercase;

  margin: 2px 0 8px

}



.articleStep p {

  font-size: 14px;

  line-height: 1.6;

  color: #c4c1bb;

  margin: 0

}



.articleTags {

  display: flex;

  flex-wrap: wrap;

  align-items: center;

  gap: 8px;

  margin: 28px 0 4px;

  color: var(--yellow);

  font-size: 10px;

  font-weight: 800;

  letter-spacing: .1em;

  text-transform: uppercase

}



.articleTags b {

  padding: 8px 10px;

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

  color: #ddd;

  font-weight: 700

}



.articleSidebar {

  display: grid;

  gap: 18px;

  position: sticky;

  top: 92px

}



.articleSideBox {

  border: 1px solid rgba(243, 208, 69, .58);

  padding: 22px;

  background: #0a0a0b

}



.articleSideBox h3 {

  font-size: 26px;

  text-transform: uppercase;

  line-height: 1;

  margin: 0 0 12px;

  color: var(--yellow)

}



.articleSideBox p {

  font-size: 13px;

  line-height: 1.6;

  color: #aaa7a1

}



.articleReserveBox img {

  width: 100%;

  height: 165px;

  object-fit: cover;

  margin-top: 18px;

  opacity: .82

}



.recentArticle {

  display: block;

  padding: 13px 0;

  border-top: 1px solid var(--border)

}



.recentArticle:first-of-type {

  border-top: 0

}



.recentArticle strong {

  display: block;

  font-family: 'Gemunu Libre', sans-serif;

  font-size: 19px;

  line-height: 1.05;

  text-transform: uppercase

}



.recentArticle span {

  display: block;

  margin-top: 5px;

  color: #75736e;

  font-size: 9px;

  letter-spacing: .08em

}



.articlePager {

  display: grid;

  grid-template-columns: 1fr 1fr;

  gap: 20px;

  margin-top: 34px

}



.articlePager>a {

  min-height: 108px;

  border: 1px solid rgba(243, 208, 69, .55);

  padding: 22px;

  display: flex;

  flex-direction: column;

  justify-content: center

}



.articlePager>a:last-child {

  text-align: right

}



.articlePager span {

  color: var(--yellow);

  font-size: 10px;

  font-weight: 800;

  letter-spacing: .1em

}



.articlePager strong {

  font-size: 12px;

  margin-top: 8px;

  text-transform: uppercase

}



@media(max-width: 980px) {

  .articleLayout {

    grid-template-columns: 1fr

  }



  .articleSidebar {

    position: static;

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

  }



  .articleReserveBox {

    grid-row: span 2

  }



  .articlePage {

    padding-top: 120px

  }

}



@media(max-width: 640px) {

  .articlePage {

    padding: 108px 0 72px

  }



  .articleHeader h1 {

    font-size: 54px

  }



  .articleHeader>p {

    font-size: 15px

  }



  .articleMeta {

    gap: 10px 14px

  }



  .articleLayout {

    gap: 28px

  }



  .articleSidebar {

    grid-template-columns: 1fr

  }



  .articleReserveBox {

    grid-row: auto

  }



  .articleStep {

    grid-template-columns: 38px 1fr;

    gap: 10px

  }



  .articleStep h2 {

    font-size: 26px

  }



  .articleStep p {

    font-size: 14px

  }



  .articlePager {

    grid-template-columns: 1fr

  }



  .articlePager>a:last-child {

    text-align: left

  }

}



/* Newsletter popup */

/* Newsletter popup — Paris homepage only */

.srOnly {

  position: absolute !important;

  width: 1px !important;

  height: 1px !important;

  padding: 0 !important;

  margin: -1px !important;

  overflow: hidden !important;

  clip: rect(0, 0, 0, 0) !important;

  white-space: nowrap !important;

  border: 0 !important

}



.newsletterPopup {

  position: fixed;

  inset: 0;

  z-index: 140;

  display: none;

  align-items: center;

  justify-content: center;

  padding: 24px

}



.newsletterPopup.open {

  display: flex

}



.newsletterBackdrop {

  position: absolute;

  inset: 0;

  background: rgba(0, 0, 0, .82);

  backdrop-filter: blur(4px)

}



.newsletterCard {

  position: relative;

  z-index: 1;

  width: min(720px, 100%);

  max-height: 94vh;

  background: #fff;

  color: #111;

  border-radius: 14px;

  box-shadow: 0 35px 100px rgba(0, 0, 0, .65)

}



.newsletterVisual {

  width: 100%;

  height: 300px;

  object-fit: cover;

  object-position: center 48%;

  border-radius: 14px 14px 0 0

}



.newsletterClose {

  position: absolute;

  z-index: 4;

  top: -18px;

  right: -18px;

  width: 56px;

  height: 56px;

  border-radius: 50%;

  border: 2px solid #fff;

  background: #0b0b0b;

  color: #fff;

  font-size: 36px;

  line-height: 1;

  display: grid;

  place-items: center;

  cursor: pointer;

  padding: 0;

}



.newsletterBody {

  padding: 26px 32px 30px

}



.newsletterBody>p {

  font-size: 18px;

  line-height: 1.45;

  margin: 0 0 18px

}



.newsletterForm {

  display: grid;

  gap: 13px

}



.newsletterForm>input[type="email"] {

  height: 54px;

  border: 1px solid #cfcfcf;

  border-radius: 7px;

  padding: 0 15px;

  font-size: 17px;

  color: #111;

  background: #fff

}



.newsletterConsent {

  display: flex;

  align-items: center;

  gap: 10px;

  font-size: 14px

}



.newsletterConsent input {

  width: 18px;

  height: 18px

}



.newsletterSubmit {

  justify-self: center;

  min-width: 250px;

  font-family: 'Gemunu Libre', sans-serif;

  font-size: 25px !important;

  letter-spacing: 0 !important

}



.newsletterSecurity {

  display: grid;

  grid-template-columns: 42px 1fr 42px;

  gap: 10px;

  align-items: center;

  border: 1px solid #d8d8d8;

  border-radius: 5px;

  padding: 13px 14px;

  color: #222;

  background: #fafafa

}



.securityShield {

  font-size: 28px;

  color: #444

}



.newsletterSecurity strong {

  display: block;

  font-size: 13px

}



.newsletterSecurity small {

  display: block;

  color: #555;

  font-size: 11px;

  margin-top: 3px

}



.securityRefresh {

  font-size: 32px;

  text-align: right

}



.newsletterSuccess {

  font-size: 13px;

  font-weight: 700;

  color: #236a2e;

  text-align: center;

  min-height: 1em

}



@media(max-width: 640px) {

  .newsletterPopup {

    padding: 12px

  }



  .newsletterCard {

    border-radius: 10px;

    max-height: 92dvh

  }



  .newsletterVisual {

    height: 190px

  }



  .newsletterClose {

    top: 8px;

    right: 8px;

    width: 44px;

    height: 44px;

    font-size: 29px

  }



  .newsletterBody {

    padding: 20px 18px 22px

  }



  .newsletterBody>p {

    font-size: 16px

  }



  .newsletterSubmit {

    width: 100%;

    min-width: 0

  }



  .newsletterSecurity {

    grid-template-columns: 34px 1fr 32px;

    padding: 10px

  }



  .securityRefresh {

    font-size: 26px

  }

}





.blogPagination {

  display: flex;

  align-items: center;

  justify-content: center;

  margin-top: 56px;

}



.blogPagination .page-numbers {

  display: inline-flex;

  align-items: center;

  justify-content: center;

  min-width: 42px;

  height: 42px;

  margin: 0 4px;

  padding: 0 5px;

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

  border-radius: 100px;

  color: #fff;

  font-weight: 600;

  line-height: 1;

  text-decoration: none;

  transition:

    background-color 0.25s ease,

    border-color 0.25s ease,

    color 0.25s ease,

    transform 0.25s ease;

}



.blogPagination a.page-numbers:hover {

  background: var(--pink);

  border-color: var(--pink);

  color: #fff;

  transform: translateY(-2px);

}



.blogPagination .page-numbers.current {

  background: var(--pink);

  border-color: var(--pink);

  color: #fff;

}



.blogPagination .dots {

  border-color: transparent;

  background: transparent;

  color: var(--yellow);

}



@media only screen and (max-width: 767px) {

  .blogPagination {

    margin-top: 40px;

    flex-wrap: wrap;

    gap: 4px;

  }

}



/* ---------- V8.3 author pages ---------- */

.articleAuthorLink {

  color: #ddd;

  text-decoration: none;

  transition: color .2s ease

}



.articleAuthorLink::first-letter {

  color: var(--yellow)

}



.articleAuthorLink:hover {

  color: var(--yellow)

}



.authorHero {

  padding: 150px 0 72px;

  background: radial-gradient(circle at 78% 28%, rgba(198, 37, 97, .16), transparent 34%), #070708;

  border-bottom: 1px solid var(--border)

}



.authorHeroGrid {

  display: grid;

  grid-template-columns: minmax(300px, .82fr) minmax(0, 1.18fr);

  gap: 56px;

  align-items: center

}



.authorPhoto {

  min-height: 440px;

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

  overflow: hidden;

  background: #101010

}



.authorPhoto img {

  display: block;

  width: 100%;

  height: 100%;

  min-height: 440px;

  object-fit: cover;

  filter: saturate(.78) contrast(1.04)

}



.authorIntro h1 {

  font-family: 'Gemunu Libre', sans-serif;

  font-size: clamp(70px, 8vw, 118px);

  line-height: .8;

  text-transform: uppercase;

  margin: 12px 0 22px

}



.authorIntro h1 span {

  color: var(--yellow)

}



.authorIntro>p {

  max-width: 720px;

  color: #c9c6bf;

  font-size: 16px;

  line-height: 1.7

}



.authorMeta {

  display: flex;

  flex-wrap: wrap;

  gap: 10px;

  margin-top: 24px

}



.authorMeta span {

  padding: 9px 12px;

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

  font-size: 10px;

  font-weight: 800;

  letter-spacing: .1em;

  text-transform: uppercase;

  color: #ddd

}



.authorArticles {

  padding-top: 74px

}



.authorArticleGrid {

  margin-top: 24px

}



@media(max-width: 900px) {

  .authorHero {

    padding-top: 120px

  }



  .authorHeroGrid {

    grid-template-columns: 1fr;

    gap: 30px

  }



  .authorPhoto {

    min-height: 340px

  }



  .authorPhoto img {

    min-height: 340px

  }



  .authorIntro h1 {

    font-size: 72px

  }

}



@media(max-width: 560px) {

  .authorHero {

    padding: 108px 0 48px

  }



  .authorPhoto,

  .authorPhoto img {

    min-height: 280px

  }



  .authorIntro h1 {

    font-size: 58px

  }



  .authorIntro>p {

    font-size: 14px

  }

}