/* ==========================================================================
   1) RESET / BASE NORMALIZE
   ========================================================================== */

html,
body,
div,
span,
applet,
object,
iframe,
h1,
h2,
h3,
h4,
h5,
h6,
p,
blockquote,
pre,
a,
abbr,
acronym,
address,
big,
cite,
code,
del,
dfn,
em,
img,
ins,
kbd,
q,
s,
samp,
small,
strike,
strong,
sub,
sup,
tt,
var,
b,
u,
i,
center,
dl,
dt,
dd,
ol,
ul,
li,
fieldset,
form,
label,
legend,
table,
caption,
tbody,
tfoot,
thead,
tr,
th,
td,
article,
aside,
canvas,
details,
figcaption,
figure,
footer,
header,
hgroup,
menu,
nav,
section,
summary,
time,
mark,
audio,
video {
  margin: 0;
  padding: 0;
  border: 0;
  font-size: 100%;
  font: inherit;
  vertical-align: baseline;
}

article,
aside,
details,
figcaption,
figure,
footer,
header,
hgroup,
menu,
nav,
section {
  display: block;
}

ol,
ul {
  list-style: none;
}

blockquote,
q {
  quotes: none;
}

blockquote:before,
blockquote:after,
q:before,
q:after {
  content: "";
  content: none;
}

table {
  border-collapse: collapse;
  border-spacing: 0;
}

img {
  vertical-align: middle;
  max-width: 100%;
  height: auto;
}

svg {
  max-height: 100%;
  max-width: 100%;
  vertical-align: middle;
  height: auto;
  fill: currentColor;
}

* {
  -webkit-font-smoothing: antialiased;
  -moz-osx-font-smoothing: grayscale;
}

/* ==========================================================================
   2) BOX SIZING
   ========================================================================== */

body {
  -webkit-box-sizing: border-box;
  box-sizing: border-box;
}

body *,
body *:before,
body *:after {
  -webkit-box-sizing: inherit;
  box-sizing: inherit;
}

/* ==========================================================================
   3) VIEWPORT / ROOT SCALE
   ========================================================================== */

:root {
  --size: 800;
  --vh-full: 100vh;
}

html {
  height: 100%;
  height: -webkit-fill-available;
  font-size: calc(10 * 100vw / 800);
  font-size: calc(10 * 100vw / var(--size));
}

body {
  min-height: 100vh;
  min-height: -webkit-fill-available;
}

/* ==========================================================================
   4) BASE TYPOGRAPHY / LINKS
   ========================================================================== */

body {
  font: 16px/1.75 "Lato", sans-serif;
  background: #fff;
  -webkit-text-size-adjust: none;
  color: #333f48;
}

/* Prevent transitions before the page is ready */
body:not(.loaded) * {
-webkit-transition: none !important;
transition: none !important
}

a {
  text-decoration: none;
  -webkit-transition: all 1.5s cubic-bezier(0.77, 0, 0.175, 1);
  transition: all 1.5s cubic-bezier(0.77, 0, 0.175, 1);
  color: inherit;
}

h1,
h2,
h3,
h4,
h5,
h6 {
  margin: 0;
  font-weight: bold;
}

strong {
  font-weight: bold;
}

em {
  font-style: italic;
}

del {
  text-decoration: line-through;
}

th,
td {
  vertical-align: top;
}

th {
  font-weight: normal;
  text-align: left;
}

address,
cite,
dfn {
  font-style: normal;
}

sub,
sup {
  position: relative;
  font-size: 75%;
  line-height: 0;
}

sup {
  top: -0.5em;
}

sub {
  bottom: -0.25em;
}

/* Underline style used in your design */
u {
  text-decoration: none;
  position: relative;
  display: inline-block;
}

u:before {
  content: "";
  display: block;
  position: absolute;
  bottom: 0.075em;
  left: 0;
  width: 100%;
  border-bottom: 0.035em solid currentColor;
}

/* ==========================================================================
   5) TYPOGRAPHY SCALE (HEADINGS / PARAGRAPH)
   ========================================================================== */

p {
  font-size: max(17px, min(999px, 2rem));
}

p + p {
  margin-top: 1em;
}

.h1,
h1 {
  font-size: 13.3rem;
  font-weight: normal;
  margin-bottom: 4rem;
  font-family: "Lora", serif;
  line-height: 1.1;
}

h2,
.h2 {
  font-weight: normal;
  line-height: 1.1;
  margin-bottom: 0.7em;
  font-size: 5.6rem;
  font-family: "Lora", serif;
}

.h4 {
  font-size: max(12px, min(9999px, 1.6rem));
  margin-bottom: 3rem;
  line-height: 1;
  text-transform: uppercase;
  font-weight: bold;
  font-family: "Lato", sans-serif;
}

/* ==========================================================================
   6) GENERIC LAYOUT HELPERS
   ========================================================================== */

.body-wrap {
  overflow: hidden;
}

.container {
  margin: 0 auto;
  padding: 8rem;
}

.gray-box {
  left: 0%;
  right: 0;
  z-index: -5;
  top: 0;
  bottom: 0;
  position: absolute;
  background: hsl(0, 0%, 95%);
}

/* Background media */
.bg {
  position: absolute;
  top: 0;
  bottom: 0;
  left: 0;
  right: 0;
  background-size: contain;
  -o-object-fit: cover;
  object-fit: cover;
  -o-object-position: 50% 25%;
  object-position: 50% 25%;
  overflow: hidden;
  width: 100%;
  height: 100%;
  z-index: -2;
}

.bg.contain {
  -o-object-fit: contain;
  object-fit: contain;
}

/* ==========================================================================
   7) SECTIONS (HORIZONTAL SCROLL SYSTEM)
   ========================================================================== */

.section {
  overflow: hidden;
  font-size: 1.6rem;
  vertical-align: top;
  -webkit-box-align: center;
  -ms-flex-align: center;
  align-items: center;
  white-space: normal;
  position: relative;
  z-index: 1;
}

.section p,
.section h2,
.section .btn,
.section .h2,
.section .h4 {
  -webkit-transition: all 1.5s ease;
  transition: all 1.5s ease;
}

/* Animate the bullet list the same way as the other text blocks */
.section .service-list li{
  transition: all 1.5s ease;           /* same feel as your other elements */
}

.section:not(.in-view) .service-list li{
  opacity: 0;
  transform: translateY(5vh);
}

.section.in-view .service-list li{
  opacity: 1;
  transform: none;
}

/* Optional: premium stagger */
.section.in-view .service-list li:nth-child(1){ transition-delay: .15s; }
.section.in-view .service-list li:nth-child(2){ transition-delay: .25s; }
.section.in-view .service-list li:nth-child(3){ transition-delay: .35s; }
.section.in-view .service-list li:nth-child(4){ transition-delay: .45s; }
.section.in-view .service-list li:nth-child(5){ transition-delay: .55s; }

.section:not(.in-view) p,
.section:not(.in-view) h2,
.section:not(.in-view) .btn,
.section:not(.in-view) .h2,
.section:not(.in-view) .h4 {
  opacity: 0;
  -webkit-transform: translateY(5vh);
  transform: translateY(5vh);
}

.section.bg-gray {
  background: #333f48;
  color: #fff;
}

.section.section-small-text {
  min-width: 50px;
}

/* Hero strip */
.hero-scroll {
  display: -webkit-box;
  display: -ms-flexbox;
  display: flex;
  -webkit-box-align: center;
  -ms-flex-align: center;
  align-items: center;
  white-space: nowrap;
  position: relative;
  z-index: 1;
}

.hero-scroll .h4 {
  margin: 0 2rem 0 0;
  opacity: 1;
  -webkit-transform: translateY(0);
  transform: translateY(0);
}

/* Text block used in horizontal sections */
.text {
  width: 55rem;
  min-width: 55rem;
  margin: 0 10rem;
}

/* Right-side image block */
.right-image {
  position: absolute;
  right: 0;
  top: 0;
  bottom: 0;
  width: 40%;
  overflow: hidden;
}

/* Full-cover iframe usage */
iframe {
  position: absolute;
  width: 100%;
  height: 100%;
  left: 0;
  top: 0;
}

/* Overlay container */
.over {
  display: -webkit-box;
  display: -ms-flexbox;
  display: flex;
  margin-left: 10%;
  position: absolute;
  left: 0;
  right: 0;
  margin: auto;
  top: 0;
  height: 70%;
  -webkit-box-pack: center;
  -ms-flex-pack: center;
  justify-content: center;
  bottom: 0;
}

.over .item {
  width: 60%;
}

.v-space {
  opacity: 0;
  pointer-events: none;
}

/* ==========================================================================
   8) ABOUT BOXES
   ========================================================================== */

.about-boxes {
  display: -webkit-box;
  display: -ms-flexbox;
  display: flex;
  padding-right: 9rem;
}

.about-box {
  position: relative;
  width: 52.2rem;
  min-height: 64.8rem;
  padding: 8.5rem 6.5rem;
  z-index: 2;
  margin-left: 9rem;
  display: -webkit-box;
  display: -ms-flexbox;
  display: flex;
  -webkit-box-orient: vertical;
  -webkit-box-direction: normal;
  -ms-flex-direction: column;
  flex-direction: column;
  color: #fff;
}

/* Your generated color steps (kept exactly) 
.about-box:nth-child(1):before { background-color: rgb(57.343902439, 70.8365853659, 80.956097561); }
.about-box:nth-child(2):before { background-color: rgb(63.687804878, 78.6731707317, 89.912195122); }
.about-box:nth-child(3):before { background-color: rgb(70.0317073171, 86.5097560976, 98.8682926829); }
.about-box:nth-child(4):before { background-color: rgb(76.3756097561, 94.3463414634, 107.8243902439); }
.about-box:nth-child(5):before { background-color: rgb(82.7195121951, 102.1829268293, 116.7804878049); }
.about-box:nth-child(6):before { background-color: rgb(89.0634146341, 110.0195121951, 125.7365853659); }
*/
.about-box .h2 {
  margin-top: auto;
}

.about-box .number {
  width: 17rem;
  height: 17rem;
  display: -webkit-box;
  display: -ms-flexbox;
  display: flex;
  -webkit-box-align: center;
  -ms-flex-align: center;
  align-items: center;
  -ms-flex-negative: 0;
  flex-shrink: 0;
  margin-bottom: 8rem;
  -webkit-box-pack: center;
  -ms-flex-pack: center;
  justify-content: center;
  text-align: center;
  position: relative;
}

.about-box .number:before {
  content: "";
  position: absolute;
  left: 0;
  right: 0;
  top: 0;
  bottom: 0;
  border-radius: 50%;
  opacity: 0.2;
  border: 1px solid currentColor;
}

/* Entry animation */
.about-box:before {
  content: "";
  background: #333f48;
  position: absolute;
  left: 0;
  right: 0;
  z-index: -1;
  height: 100%;
  -webkit-transition: all 1.5s cubic-bezier(0.77, 0, 0.175, 1);
  transition: all 1.5s cubic-bezier(0.77, 0, 0.175, 1);
  -webkit-transform-origin: 0 100%;
  transform-origin: 0 100%;
  bottom: 0;
  -webkit-transform: scale(1, 0);
  transform: scale(1, 0);
}

.about-box .h2,
.about-box p,
.about-box .number {
  opacity: 0;
  -webkit-transition: all 1.5s ease;
  transition: all 1.5s ease;
  -webkit-transition-delay: 1.2s;
  transition-delay: 1.2s;


}

.about-box .h2,
.about-box p {
  -webkit-transform: translateY(4rem);
  transform: translateY(4rem);
  -webkit-transition-delay: 0.6s;
  transition-delay: 0.6s;
}

.about-box .h2 {
  -webkit-transition-delay: 0.5s;
  transition-delay: 0.5s;
}

.about-box .h4 {
  -webkit-transition-delay: 0.5s;
  transition-delay: 0.5s;
}

.about-box.in-view:before {
  -webkit-transform: scale(1, 1);
  transform: scale(1, 1);
}

.about-box.in-view .h2,
.about-box.in-view p,
.about-box.in-view .number {
  opacity: 1;
  -webkit-transform: none;
  transform: none;
}

/* Make about-box usable as a link without changing layout */
.about-box {
  text-decoration: none;
  color: #fff;
}

/* Use per-brand background instead of nth-child hardcoding */
.about-box:before {
  background: var(--box-bg, #333f48);
}

/* Put logo inside the existing circle */
.about-box .number img {
  width: 70%;
  height: 70%;
  object-fit: contain;
  display: block;
}

/* Optional: subtle CTA */
.about-box__cta {
  margin-top: 3rem;
  display: inline-block;
  opacity: .85;
  letter-spacing: .02em;
  text-transform: uppercase;
  font-size: max(12px, min(9999px, 1.3rem));
}
.about-box:hover .about-box__cta {
  opacity: 1;
}

/* ===============================
   SERVICES LIST polish
   =============================== */

.service-list {
  margin: 2.2rem 0 2.2rem;
  padding: 0;
}

.service-list li {
  font-size: max(14px, min(9999px, 2.0rem)); /* bigger than before */
  line-height: 1.65;
  margin: .45rem 0;
  padding-left: 2.2rem;
  position: relative;
  font-family: "Lato", sans-serif;
  font-weight: 600;
  letter-spacing: .01em;
}

.service-list li::before {
  content: "—";
  position: absolute;
  left: 0;
  top: 0;
  opacity: .7;
}


/* ===============================
   BRAND CARDS: remove dead space + bigger logos
   =============================== */

/* 1) Stop pushing the title to the bottom (this is what creates the huge empty space) */
.about-box .h2 {
  margin-top: 2.2rem;  /* was auto */
}

/* 2) Make the paragraph take the remaining space */
.about-box p {
  margin-top: 1.4rem;
  flex: 1 1 auto;
  text-align: justify;
}

/* 3) Push CTA to the bottom instead (so cards align nicely) */
.about-box__cta {
  margin-top: auto;     /* keeps "Explore →" at bottom */
  padding-top: 2.2rem;
}

/* 4) Bigger logo circle */
.about-box .number {
  width: 25.2rem;        /* was 7.2rem */
  height: 25.2rem;
  margin-bottom: 5rem;  /* was 8rem (tighten a bit) */
}

/* 5) Bigger logo inside the circle */
.about-box .number img {
  width: 86%;
  height: 86%;
  object-fit: contain;
  display: block;
}

/* Optional: make the circle border a touch more visible */
.about-box .number:before {
  opacity: 0.28; /* was 0.2 */
}

/* Optional: slightly tighter vertical rhythm */
.about-box {
  padding: 7.5rem 6.5rem; /* was 8.5rem 6.5rem */
}


/* ==========================================================================
   9) BUTTONS
   ========================================================================== */

.btn {
  margin-top: 4rem;
  display: -webkit-inline-box;
  display: -ms-inline-flexbox;
  display: inline-flex;
  -webkit-box-align: center;
  -ms-flex-align: center;
  align-items: center;
  -webkit-box-pack: center;
  -ms-flex-pack: center;
  justify-content: center;
  font-size: max(14px, min(9999px, 1.7rem));
  padding: 1.5rem 3rem;
  letter-spacing: 0.05em;
  text-transform: uppercase;
  position: relative;
  color: #fff;
  z-index: 1;
}

.btn:before {
  content: "";
  position: absolute;
  left: 0;
  border-radius: 10rem;
  z-index: -1;
  right: 0;
  top: 0;
  background: rgb(82.7195121951, 102.1829268293, 116.7804878049);
  bottom: 0;
  -webkit-transition: all 0.4s cubic-bezier(0.7, 0, 0.3, 1);
  transition: all 0.4s cubic-bezier(0.7, 0, 0.3, 1);
}

.btn:hover:before {
  background: rgb(29.8536585366, 36.8780487805, 42.1463414634);
  -webkit-transform: scale(1.1);
  transform: scale(1.1);
}

.btn-icon {
  display: -webkit-box;
  display: -ms-flexbox;
  display: flex;
  -webkit-box-align: center;
  -ms-flex-align: center;
  align-items: center;
  -webkit-box-pack: center;
  -ms-flex-pack: center;
  justify-content: center;
  width: 7rem;
  z-index: 5;
  padding: 1.4rem;
  float: right;
  height: 7rem;
  position: relative;
}

.btn-icon:before {
  content: "";
  position: absolute;
  left: 0;
  right: 0;
  top: 0;
  bottom: 0;
  border-radius: 50%;
  border: 1px solid #fff;
  opacity: 0.5;
  -webkit-transition: all 0.5s ease;
  transition: all 0.5s ease;
}

.btn-icon.lg {
  width: 10rem;
  padding: 3rem;
  height: 10rem;
}

a:hover .btn-icon:before,
.btn-icon:hover:before {
  opacity: 1;
  -webkit-transform: scale(1.1);
  transform: scale(1.1);
}

.section-hero .btn-icon:before {
  -webkit-animation: pulse 2s infinite;
  animation: pulse 2s infinite;
}

/* ==========================================================================
   10) HEADER / NAV
   ========================================================================== */

.header {
  position: fixed;
  left: 0;
  top: 0;
  z-index: 9;
  width: 9rem;
  color: #fff;
  bottom: 0;
  -webkit-transition: all 0.75s ease;
  transition: all 0.75s ease;
  display: -webkit-box;
  display: -ms-flexbox;
  display: flex;
  -webkit-box-orient: vertical;
  -webkit-box-direction: normal;
  -ms-flex-direction: column;
  flex-direction: column;
}

.header .menu-trigger,
.header .menu-trigger:before {
  -webkit-transition: all 0.75s ease;
  transition: all 0.75s ease;
}

.logo {
  font-size: 3.6rem;
  display: -webkit-box;
  display: -ms-flexbox;
  display: flex;
  -webkit-box-align: center;
  -ms-flex-align: center;
  align-items: center;
  white-space: nowrap;
  -webkit-box-pack: center;
  -ms-flex-pack: center;
  justify-content: center;
  height: 12rem;
  line-height: 1;
  padding: 2rem 5rem;
  min-width: 30rem;
  color: #fff;
  position: relative;
  -webkit-transition: none;
  transition: none;
  font-family: "Lora", serif;
}

.logo:before {
  content: "";
  position: absolute;
  left: 0;
  right: 0;
  top: 0;
  bottom: 0;
  z-index: -1;
  background: #333f48;
}

.menu-trigger {
  display: -webkit-box;
  display: -ms-flexbox;
  display: flex;
  -webkit-box-flex: 1;
  -ms-flex-positive: 1;
  flex-grow: 1;
  cursor: pointer;
  position: relative;
  -webkit-box-pack: center;
  -ms-flex-pack: center;
  justify-content: center;
  -webkit-box-align: center;
  -ms-flex-align: center;
  align-items: center;
  text-transform: uppercase;
}

.menu-trigger:before {
  content: "";
  position: absolute;
  left: -50rem;
  right: 0;
  top: 0;
  bottom: 0;
  z-index: -1;
  background: rgb(82.7195121951, 102.1829268293, 116.7804878049);
}

.menu-trigger .bars {
  width: 50%;
  height: 5rem;
  max-width: 6rem;
  display: -webkit-box;
  display: -ms-flexbox;
  display: flex;
  -webkit-box-orient: vertical;
  -webkit-box-direction: normal;
  -ms-flex-direction: column;
  flex-direction: column;
  -webkit-box-pack: center;
  -ms-flex-pack: center;
  justify-content: center;
}

.menu-trigger .bars span {
  -webkit-transform: translateY(-0.7rem);
  transform: translateY(-0.7rem);
  -webkit-transition: all 0.75s ease;
  transition: all 0.75s ease;
  display: block;
  -webkit-transform-origin: 50% 50%;
  transform-origin: 50% 50%;
  margin-bottom: -2px;
  height: 2px;
  background: currentColor;
  width: 100%;
}

.menu-trigger .bars span + span {
  -webkit-transform: translateY(0.7rem);
  transform: translateY(0.7rem);
}

.active-menu .menu-trigger .bars span:nth-child(1) {
  -webkit-transform: rotate(45deg);
  transform: rotate(45deg);
}

.active-menu .menu-trigger .bars span:nth-child(2) {
  -webkit-transform: rotate(-45deg);
  transform: rotate(-45deg);
}

/* Contacts block */
.contacts {
  text-align: right;
  margin-bottom: 3rem;
  display: -webkit-box;
  display: -ms-flexbox;
  display: flex;
  -webkit-box-orient: vertical;
  -webkit-box-direction: normal;
  -ms-flex-direction: column;
  flex-direction: column;
}

.contacts .h4 {
  margin: 3rem 0 0;
  padding: 0;
}

.contacts a {
  margin-left: auto;
  font-size: 3rem;
  display: block;
  position: relative;
  -webkit-transition: all 0.5s ease;
  transition: all 0.5s ease;
  overflow: hidden;
  margin-top: 0.5rem;
}

.contacts a:before {
  content: "";
  position: absolute;
  right: 0;
  -webkit-transition: all 0.5s ease;
  transition: all 0.5s ease;
  top: 0;
  margin: auto 0;
  bottom: 0;
  background: #333f48;
  -webkit-transform: translateX(110%);
  transform: translateX(110%);
  height: 0.5rem;
  width: 3rem;
}

.contacts a:hover {
  padding-right: 4rem;
}

.contacts a:hover:before {
  -webkit-transform: translateX(0%);
  transform: translateX(0%);
}

/* Main nav panel */
.main-nav {
  position: fixed;
  left: 9.9rem;
  right: 0;
  background: rgb(29.8536585366, 36.8780487805, 42.1463414634);
  top: 0;
  bottom: 0;
  -webkit-transform: translateX(-100vw);
  transform: translateX(-100vw);
  font-size: 6.4rem;
  color: #fff;
  overflow: auto;
  z-index: 8;
  display: -webkit-box;
  display: -ms-flexbox;
  display: flex;
  font-family: "Lora", serif;
  -webkit-box-align: end;
  -ms-flex-align: end;
  align-items: flex-end;
}

.main-nav .container {
  width: 100%;
  display: -webkit-box;
  display: -ms-flexbox;
  display: flex;
  -webkit-box-pack: justify;
  -ms-flex-pack: justify;
  justify-content: space-between;
  -webkit-box-align: end;
  -ms-flex-align: end;
  align-items: flex-end;
}

.main-nav .right {
  -webkit-transform: translateY(5vh);
  transform: translateY(5vh);
  opacity: 0;
  -webkit-transition: all 0.1s ease;
  transition: all 0.1s ease;
  -webkit-transition-delay: 0.7s;
  transition-delay: 0.7s;
}

.active-menu .main-nav .right {
  -webkit-transform: translateY(0);
  transform: translateY(0);
  opacity: 1;
  -webkit-transition: all 1.5s ease;
  transition: all 1.5s ease;
  -webkit-transition-delay: 0.5s;
  transition-delay: 0.5s;
}

.main-nav .social {
  display: -webkit-box;
  display: -ms-flexbox;
  display: flex;
  margin-left: -3rem;
  -webkit-box-pack: end;
  -ms-flex-pack: end;
  justify-content: flex-end;
}

.main-nav .social li {
  margin-left: 3rem;
}

/* Menu list */
.menu {
  display: -webkit-box;
  display: -ms-flexbox;
  display: flex;
  -webkit-box-orient: vertical;
  -webkit-box-direction: normal;
  -ms-flex-direction: column;
  flex-direction: column;
}

.menu li {
  margin-right: auto;
  padding-top: 1rem;
  opacity: -1;
  -webkit-transition: all 1.2s ease;
  transition: all 1.2s ease;
  -webkit-transform: translateX(calc(-100% - 10rem));
  transform: translateX(calc(-100% - 10rem));
}

.active-menu .menu li {
  -webkit-transform: none;
  transform: none;
  opacity: 1;
}

.menu a {
  display: block;
  position: relative;
  -webkit-transition: all 0.5s ease;
  transition: all 0.5s ease;
  overflow: hidden;
}

.menu a:before {
  content: "";
  position: absolute;
  left: 0;
  -webkit-transition: all 0.5s ease;
  transition: all 0.5s ease;
  top: 0;
  margin: auto 0;
  bottom: 0;
  background: #333f48;
  -webkit-transform: translateX(-110%);
  transform: translateX(-110%);
  height: 0.5rem;
  width: 4rem;
}

.menu a:hover {
  padding-left: 5rem;
}

.menu a:hover:before {
  -webkit-transform: translateX(0%);
  transform: translateX(0%);
}

/* ==========================================================================
   11) HERO SECTION
   ========================================================================== */

.section-hero {
  color: #fff;
  -webkit-box-align: end;
  -ms-flex-align: end;
  align-items: flex-end;
  padding-left: 9rem;
  margin-right: -1px;
}

.section-hero h1 {
  max-width: 98rem;
}

.section-hero .bg {
  -o-object-position: 50% 65%;
  object-position: 50% 65%;
}

.section-hero .container {
  display: -webkit-box;
  display: -ms-flexbox;
  display: flex;
  -webkit-box-pack: justify;
  -ms-flex-pack: justify;
  justify-content: space-between;
  width: 100%;
  -webkit-box-align: center;
  -ms-flex-align: center;
  align-items: center;
}

.section-hero:before {
  content: "";
  position: absolute;
  z-index: -1;
  left: 0;
  right: 0;
  background: -webkit-gradient(linear, left top, left bottom, from(rgba(0, 0, 0, 0)), to(#333f48));
  background: linear-gradient(180deg, rgba(0, 0, 0, 0), #333f48);
  height: 60%;
  backdrop-filter: blur(5px);
  bottom: -1px;
  -webkit-mask: -webkit-gradient(linear, left top, left bottom, from(transparent), color-stop(60%, black));
  -webkit-mask: linear-gradient(transparent, black 60%);
  mask: -webkit-gradient(linear, left top, left bottom, from(transparent), color-stop(60%, black));
  mask: linear-gradient(transparent, black 60%);
  mix-blend-mode: multiply;
}

/* ==========================================================================
   12) PRELOADER
   ========================================================================== */

.preloader {
  position: fixed;
  left: 0;
  right: 0;
  top: 0;
  bottom: 0;
  -webkit-box-pack: center;
  -ms-flex-pack: center;
  justify-content: center;
  z-index: 99;
  overflow: hidden;
  display: -webkit-box;
  display: -ms-flexbox;
  display: flex;
  -webkit-box-align: center;
  -ms-flex-align: center;
  align-items: center;
  background: rgb(29.8536585366, 36.8780487805, 42.1463414634);
}

.preloader .logo {
  height: 12rem;
  pointer-events: none;
}

.preloader .logo:before {
  opacity: 0;
  -webkit-transition-delay: 0.5s;
  transition-delay: 0.5s;
  -webkit-transition: all 1.5s ease;
  transition: all 1.5s ease;
}

.loaded .preloader .logo:before {
  opacity: 1;
}

/* ==========================================================================
   13) PERSON ITEM / OVERLAY TITLE
   ========================================================================== */

.person-item {
  overflow: hidden;
  background: #333f48;
  z-index: 4;
  position: relative;
}

.person-item .bg {
  max-width: none;
  opacity: 0;
  -webkit-transition: all 1.5s cubic-bezier(0.77, 0, 0.175, 1);
  transition: all 1.5s cubic-bezier(0.77, 0, 0.175, 1);
}

.person-item .person-info {
  -webkit-transition: all 1.5s ease;
  transition: all 1.5s ease;
  -webkit-transform: translateY(100%);
  transform: translateY(100%);
  -webkit-transition-delay: 0.5s;
  transition-delay: 0.5s;
}

.person-item.in-view .bg {
  opacity: 1;
}

.person-item.in-view .person-info {
  -webkit-transform: translateY(0%);
  transform: translateY(0%);
}

.over-title {
  position: absolute;
  left: 0;
  color: #fff;
  padding: 4rem;
  right: 0;
  margin: 0;
  bottom: 0;
}

.over-title:before {
  content: "";
  position: absolute;
  left: 0;
  right: 0;
  bottom: 0;
  z-index: -1;
  background: -webkit-gradient(linear, left top, left bottom, from(rgba(0, 0, 0, 0)), to(#333f48));
  background: linear-gradient(180deg, rgba(0, 0, 0, 0), #333f48);
  height: 60vh;
  backdrop-filter: blur(5px);
  -webkit-mask: -webkit-gradient(linear, left top, left bottom, from(transparent), color-stop(60%, black));
  -webkit-mask: linear-gradient(transparent, black 60%);
  mask: -webkit-gradient(linear, left top, left bottom, from(transparent), color-stop(60%, black));
  mask: linear-gradient(transparent, black 60%);
  mix-blend-mode: multiply;
}

/* ==========================================================================
   14) ANIMATIONS
   ========================================================================== */

@-webkit-keyframes pulse {
  0% {
    -webkit-transform: scale(1);
    transform: scale(1);
    opacity: 0.5;
  }
  50% {
    -webkit-transform: scale(1.15);
    transform: scale(1.15);
    opacity: 0.8;
  }
  100% {
    -webkit-transform: scale(1);
    transform: scale(1);
    opacity: 0.5;
  }
}

@keyframes pulse {
  0% {
    -webkit-transform: scale(1);
    transform: scale(1);
    opacity: 0.5;
  }
  50% {
    -webkit-transform: scale(1.15);
    transform: scale(1.15);
    opacity: 0.8;
  }
  100% {
    -webkit-transform: scale(1);
    transform: scale(1);
    opacity: 0.5;
  }
}

/* ==========================================================================
   15) RESPONSIVE (KEEPING HORIZONTAL SCROLL ON DESKTOP)
   ========================================================================== */

@media (min-width: 768px) {
  :root {
    --size: 1200;
  }
}

@media (min-width: 992px) {
  :root {
    --size: 2200;
  }

  @media (min-width: 992px) {
  #scroll-container { will-change: transform; transform: translate3d(0,0,0); }
  .bg { will-change: transform; }
  }

  #scroll-container { 
        will-change: transform; 
  }
  /* Horizontal scroll "track" */
  .body {
    -webkit-box-flex: 1;
    -ms-flex-positive: 1;
    flex-grow: 1;
    white-space: nowrap;
    position: fixed;
    left: 0;
    right: 0;
    font-size: 0;
    top: 0;
    bottom: 0;
  }

  /* Sections become inline panels */
  .section {
    display: -webkit-inline-box;
    display: -ms-inline-flexbox;
    display: inline-flex;
    height: 100vh;
    min-width: calc(60vw - 13rem);
  }

  .section:last-child {
    margin-left: 8px;
  }

  .section.section-image {
    z-index: -1;
    margin: 0 -1px;
  }

  .section.section-small {
    min-width: calc(50vw - 13rem);
  }

  .section-text {
    width: calc(60vw - 13rem);
  }

  .section-text .container {
    max-width: 90%;
    width: 110rem;
  }

  .about-box .h2 {
    font-size: 4.5rem;
  }

  /* Header hover behaviour */
  .active-menu .header .menu-trigger,
  .header:hover .menu-trigger {
    -webkit-transform: translateX(1rem);
    transform: translateX(1rem);
  }

  .active-menu .header .menu-trigger:before,
  .header:hover .menu-trigger:before {
    -webkit-transform: translateX(1rem);
    transform: translateX(1rem);
  }

  /* Prevent the hover "nudge" from interfering with the intro animation */
  body:not(.intro-done) .header:hover .menu-trigger,
  body:not(.intro-done).active-menu .header .menu-trigger {
    transform: none !important;
  }

  body:not(.intro-done) .header:hover .menu-trigger:before,
  body:not(.intro-done).active-menu .header .menu-trigger:before {
    transform: none !important;
  }

  /* Menu stagger delays */
  .active-menu .menu li:nth-child(1)  { -webkit-transition-delay: 1.1s; transition-delay: 1.1s; }
  .active-menu .menu li:nth-child(2)  { -webkit-transition-delay: 1s;   transition-delay: 1s; }
  .active-menu .menu li:nth-child(3)  { -webkit-transition-delay: .9s;  transition-delay: .9s; }
  .active-menu .menu li:nth-child(4)  { -webkit-transition-delay: .8s;  transition-delay: .8s; }
  .active-menu .menu li:nth-child(5)  { -webkit-transition-delay: .7s;  transition-delay: .7s; }
  .active-menu .menu li:nth-child(6)  { -webkit-transition-delay: .6s;  transition-delay: .6s; }
  .active-menu .menu li:nth-child(7)  { -webkit-transition-delay: .5s;  transition-delay: .5s; }
  .active-menu .menu li:nth-child(8)  { -webkit-transition-delay: .4s;  transition-delay: .4s; }
  .active-menu .menu li:nth-child(9)  { -webkit-transition-delay: .3s;  transition-delay: .3s; }
  .active-menu .menu li:nth-child(10) { -webkit-transition-delay: .2s;  transition-delay: .2s; }

  /* Horizontal item spacing */
  .person-item + .person-item {
    margin-left: 0.2rem;
  }

  .person-item + :not(.person-item) {
    margin-left: -1px;
    z-index: 5;
  }
}

@media (min-width: 992px){
  .section-hero{
    min-width: 100vw; /* full building */
  }
}

@media (max-width: 991.98px) {
  .body {
    -webkit-transform: none !important;
    transform: none !important;
  }

  .section {
    padding: 12rem 0;
    width: 100%;
    -webkit-box-pack: center;
    -ms-flex-pack: center;
    justify-content: center;
    display: -webkit-box;
    display: -ms-flexbox;
    display: flex;
    -webkit-box-orient: vertical;
    -webkit-box-direction: normal;
    -ms-flex-direction: column;
    flex-direction: column;
  }

  .section.section-small {
    height: 80vh;
    min-height: 350px;
  }

  .section.section-image {
    height: 90vw;
    min-height: 350px;
    padding: 0;
  }

  .hero-scroll svg {
    -webkit-transform: rotate(90deg);
    transform: rotate(90deg);
  }

  .text {
    margin: 0;
    padding: 8rem;
    width: auto;
    min-width: 0;
  }

  .right-image {
    position: relative;
    width: 100%;
    height: 50vw;
    margin-bottom: -12rem;
  }

  .v-space {
    display: none;
  }

  .about-boxes {
    display: block;
    padding: 8rem;
  }

  .about-box {
    width: auto;
    min-height: 50vh;
    height: auto;
    margin: 0 0 9rem;
  }

  .about-box:last-child {
    margin-bottom: 0;
  }

  p {
    font-size: max(15px, min(999px, 2rem));
  }

  .h1,
  h1 {
    font-size: 10rem;
  }

  .section:not(.section-hero) .h1,
  .section:not(.section-hero) h1 {
    font-size: 8rem;
  }

  h2,
  .h2 {
    font-size: 6rem;
  }

  .header {
    height: 12rem;
    width: auto;
    right: 0;
    -webkit-box-orient: horizontal;
    -webkit-box-direction: normal;
    -ms-flex-direction: row;
    flex-direction: row;
    bottom: auto;
  }

  .logo {
    height: 100%;
    width: auto;
    padding: 0 5rem;
    font-size: 4rem;
  }

  .menu-trigger:before {
    left: 0;
  }

  .menu-trigger .bars {
    margin-left: auto;
    margin-right: 5rem;
  }

  .contacts {
    text-align: center;
    margin: 3rem 0 5rem;
  }

  .contacts a {
    margin-right: auto;
  }

  .main-nav {
    left: 0;
    padding: 6rem;
  }

  .main-nav .container {
    margin: auto;
    -webkit-box-align: center;
    -ms-flex-align: center;
    align-items: center;
    -webkit-box-pack: center;
    -ms-flex-pack: center;
    justify-content: center;
    -webkit-box-orient: vertical;
    -webkit-box-direction: normal;
    -ms-flex-direction: column;
    flex-direction: column;
  }

  .active-menu .main-nav .right {
    -webkit-transition-delay: 1.5s;
    transition-delay: 1.5s;
  }

  .main-nav .social {
    -webkit-box-pack: center;
    -ms-flex-pack: center;
    justify-content: center;
  }

  .menu li {
    margin: 0 auto;
    -webkit-transform: translateX(calc(-100% - 50vw));
    transform: translateX(calc(-100% - 50vw));
  }

  .active-menu .menu li:nth-child(1)  { -webkit-transition-delay: .5s; transition-delay: .5s; }
  .active-menu .menu li:nth-child(2)  { -webkit-transition-delay: .6s; transition-delay: .6s; }
  .active-menu .menu li:nth-child(3)  { -webkit-transition-delay: .7s; transition-delay: .7s; }
  .active-menu .menu li:nth-child(4)  { -webkit-transition-delay: .8s; transition-delay: .8s; }
  .active-menu .menu li:nth-child(5)  { -webkit-transition-delay: .9s; transition-delay: .9s; }
  .active-menu .menu li:nth-child(6)  { -webkit-transition-delay: 1s;  transition-delay: 1s;  }
  .active-menu .menu li:nth-child(7)  { -webkit-transition-delay: 1.1s; transition-delay: 1.1s; }
  .active-menu .menu li:nth-child(8)  { -webkit-transition-delay: 1.2s; transition-delay: 1.2s; }
  .active-menu .menu li:nth-child(9)  { -webkit-transition-delay: 1.3s; transition-delay: 1.3s; }
  .active-menu .menu li:nth-child(10) { -webkit-transition-delay: 1.4s; transition-delay: 1.4s; }

  .section-hero {
    padding: 0;
    min-height: var(--vh-full);
    -webkit-box-pack: end;
    -ms-flex-pack: end;
    justify-content: flex-end;
  }

  .section-hero .container {
    display: block;
  }
}

/* Small phones */
@media (max-width: 767.98px) {
  .container {
    padding-left: 4rem;
    padding-right: 4rem;
  }
}

/* Preloader must disappear (otherwise it covers the page) 
.preloader { transition: opacity .6s ease; }
body.loaded .preloader { opacity: 0; pointer-events: none; }
*/

/* Preloader slide like Temide */
.preloader{
  transform: translate3d(0,0,0);
  will-change: transform;
}
body.reveal .preloader{
  transform: translate3d(-100vw,0,0);
  transition: transform 1s cubic-bezier(0.77, 0, 0.175, 1);
  pointer-events: none;
}

/* Preloader logo: square BORDER before reveal, then filled block */
.preloader .logo:before{
  background: transparent;
  border: 2px solid rgba(255,255,255,.55);
  opacity: 1;
}
body.loaded .preloader .logo:before{
  background: #333f48;
  border-color: transparent;
  transition: all 1.5s ease;
}

/* Nav open state */
.main-nav { transition: transform .75s ease; will-change: transform; }
body.active-menu .main-nav { transform: translateX(0); }


@media (min-width: 2400px){
  html{ font-size: 10px; } /* default is 16px */
}

/* ==========================================================================
   CONTACT FORM (clean, corporate, matches site)
   ========================================================================== */

/* Contact status */

/* Hide status box when empty */
.notice:empty{
  display: none;
  padding: 0;
  margin: 0;
  border: 0;
}

.notice{
  margin: 2rem 0 2.5rem;
  padding: 1.6rem 2rem;
  border-radius: 1.2rem;
  background: rgba(255,255,255,.05);
  border: 1px solid rgba(255,255,255,.10);
  color: #fff;
  max-width: 72rem;
}
.notice--ok{
  border-color: rgba(80, 200, 120, .35);
}
.notice--error{
  border-color: rgba(255, 120, 120, .35);
}

/* Contact form layout */
.contact-form{
  max-width: 72rem;
}

.contact-form .field{
  margin-bottom: 2.2rem;
}

.contact-form label{
  display: block;
  font-size: 1.3rem;
  letter-spacing: .08em;
  text-transform: uppercase;
  opacity: .85;
  margin-bottom: .9rem;
}

.contact-form input,
.contact-form textarea,
.contact-form select{
  width: 100%;
  border-radius: 1.1rem;
  padding: 1.6rem 1.8rem;
  border: 1px solid rgba(255,255,255,.14);
  background: rgba(255,255,255,.06);
  color: #fff;
  outline: none;
  transition: border-color .2s ease, background-color .2s ease, transform .2s ease;
}

.contact-form textarea{
  min-height: 16rem;
  resize: vertical;
}

.contact-form input:focus,
.contact-form textarea:focus,
.contact-form select:focus{
  border-color: rgba(255,255,255,.35);
  background: rgba(255,255,255,.08);
}

/* Select: closed state styling */
.contact-form select{
  appearance: none;
  background-image:
    linear-gradient(45deg, transparent 50%, rgba(255,255,255,.8) 50%),
    linear-gradient(135deg, rgba(255,255,255,.8) 50%, transparent 50%);
  background-position:
    calc(100% - 2.2rem) 50%,
    calc(100% - 1.6rem) 50%;
  background-size: .6rem .6rem, .6rem .6rem;
  background-repeat: no-repeat;
  padding-right: 4.2rem;
}

/* Some browsers honour option theming, some don’t */
.contact-form select option{
  background: #333f48;
  color: #fff;
}

/* Turnstile spacing */
.contact-form .cf-turnstile{
  margin-top: .6rem;
}

/* Button */
.contact-form button[type="submit"],
.contact-form input[type="submit"]{
  margin-top: 2rem;
  border: 0;
  cursor: pointer;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  padding: 1.6rem 3.2rem;
  border-radius: 10rem;
  text-transform: uppercase;
  letter-spacing: .06em;
  font-size: 1.5rem;
  color: #fff;
  background: rgba(255,255,255,.10);
  border: 1px solid rgba(255,255,255,.14);
  transition: transform .2s ease, background-color .2s ease, opacity .2s ease;
}

.contact-form button[type="submit"]:hover{
  transform: scale(1.03);
  background: rgba(255,255,255,.14);
}

.contact-form button[disabled]{
  opacity: .55;
  cursor: not-allowed;
}

/* Honeypot hidden */
.contact-form .hp{
  position: absolute;
  left: -9999px;
  width: 1px;
  height: 1px;
  overflow: hidden;
}

/* Notice overlay (doesn't push the form down) */
#contact .contact-form {
  position: relative;
}

#contact-status {
  display: none;
}

#contact-status.notice--ok,
#contact-status.notice--error {
  display: block;
}

/* When notice is visible, reserve space so it doesn't overlap inputs */
#contact .contact-form.has-status {
  padding-top: 0rem;
}

#contact .contact-form.has-status #contact-status {
  position: absolute;
  top: 0;
  left: 0;
  right: 0;
}

/* Services list readability */
.service-list li{
  font-size: max(14px, min(9999px, 1.9rem));
  line-height: 1.7;
  margin-bottom: .6rem;
}

/* Bigger brand logo badge */
.about-box .number{
  width: 20rem;
  height: 20rem;
  margin-bottom: 6rem;
}
.about-box .number img{
  width: 82%;
  height: 82%;
}

/* Remove the awkward “huge empty gap” for short brand descriptions */
.about-box .h2{ margin-top: 2rem; }      /* override the margin-top:auto behaviour */
.about-box__cta{ margin-top: auto; }     /* keep CTA pinned to bottom instead */

/* CONTACT HOVER */
/* Premium hover: slightly darker card */
.about-box{
  transition: transform .5s cubic-bezier(.77,0,.175,1);
  will-change: transform;
}

/* Add a subtle dark overlay that we can intensify on hover */
.about-box .bg-mask{
  position: absolute;
  inset: 0;
  background: rgba(0,0,0,.0);
  transition: background .5s cubic-bezier(.77,0,.175,1);
  z-index: 0;
}

/* Ensure content sits above the overlay */
.about-box > *{
  position: relative;
  z-index: 1;
}

/* Darken + lift on hover (desktop) */
@media (hover: hover) and (pointer: fine){
  .about-box:hover{
    transform: translate3d(0,-2.4rem,0);
  }

  .about-box:hover::before{
    filter: brightness(.92); /* slightly darker */
  }

  .about-box:hover .bg-mask{
    background: rgba(0,0,0,.12); /* extra richness */
  }
}


/* ===============================
   CONTACT FORM: animate on in-view
   =============================== */

/* Animate the whole form as one block (clean + no weird input/caret issues) */
.section .contact-form,
.section .notice,
.section #contact-status,
.section .cf-turnstile{
  transition: all 1.5s ease;
}

.section:not(.in-view) .contact-form,
.section:not(.in-view) .notice,
.section:not(.in-view) #contact-status,
.section:not(.in-view) .cf-turnstile{
  opacity: 0;
  transform: translateY(5vh);
}

.section.in-view .contact-form,
.section.in-view .notice,
.section.in-view #contact-status,
.section.in-view .cf-turnstile{
  opacity: 1;
  transform: none;
}

/* Optional: premium stagger inside the form (fields + button) */
.section .contact-form .field,
.section .contact-form button[type="submit"]{
  transition: all 1.2s ease;
}

.section:not(.in-view) .contact-form .field,
.section:not(.in-view) .contact-form button[type="submit"]{
  opacity: 0;
  transform: translateY(3rem);
}

.section.in-view .contact-form .field:nth-of-type(1){ transition-delay: .15s; }
.section.in-view .contact-form .field:nth-of-type(2){ transition-delay: .25s; }
.section.in-view .contact-form .field:nth-of-type(3){ transition-delay: .35s; }
.section.in-view .contact-form .field:nth-of-type(4){ transition-delay: .45s; }
.section.in-view .contact-form button[type="submit"]{ transition-delay: .60s; }