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

html {
  background: #FAFAF7;
}

body {
  font-family: 'Figtree', sans-serif;
  background: #FAFAF7;
  display: flex;
  flex-direction: column;
  align-items: center;
  min-height: 100vh;
  padding: 0;
}

.page-wrap {
  position: relative;
  z-index: 1;
  background: #FAFAF7;
  width: 100%;
  display: flex;
  flex-direction: column;
  align-items: center;
  padding: 10px 10px 0;
  transition: padding 0.1s ease-out;
}

.content-area {
  position: relative;
  width: 100%;
  max-width: 1440px;
  display: flex;
  flex-direction: column;
  align-items: center;
}

.grid-overlay {
  position: absolute;
  top: 0;
  bottom: 0;
  left: 50%;
  transform: translateX(-50%);
  width: 1309px;
  max-width: calc(100% - 110px);
  pointer-events: none;
  z-index: 0;
  background-image: repeating-linear-gradient(
    to right,
    rgba(15, 22, 32, 0.07) 0,
    rgba(15, 22, 32, 0.07) 1px,
    transparent 1px,
    transparent calc((100% - 1px) / 6)
  );
}

.content-area .grid-overlay {
  bottom: -50px;
}

.hero {
  position: relative;
  width: calc(100% + 20px);
  max-width: none;
  margin: -10px -10px 0;
  height: 100vh;
  background: #0b1b33;
  border-radius: 0;
  overflow: hidden;
  color: white;
}

@keyframes hero-fade-in {
  from { opacity: 0; transform: translateY(30px); }
  to { opacity: 1; transform: translateY(0); }
}

@keyframes hero-image-in {
  from { transform: scale(1.1); opacity: 0.7; }
  to { transform: scale(1); opacity: 1; }
}

.hero-photo {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  object-fit: cover;
  /* Anchor on the faces (~30% down), not the very top: on short/wide viewports
     this keeps both faces centred instead of pushing them to the bottom edge,
     while still never cropping the tops of their heads (heads sit ~28% down). */
  object-position: center 30%;
  display: block;
  /* Subtle sharpen (SVG filter defined in front-page.php) to offset WebP softening. */
  filter: url(#hero-sharpen);
  animation: hero-image-in 1.8s cubic-bezier(0.16, 1, 0.3, 1) both;
}

/* Mobile hero photo: hidden on desktop, swapped in at ≤768px (see media query). */
.hero-photo-mobile {
  display: none;
}

.hero-vector {
  position: absolute;
  pointer-events: none;
  opacity: 0;
  --parallax-y: 0px;
  transform: translateY(var(--parallax-y));
  transition: opacity 1.4s cubic-bezier(0.16, 1, 0.3, 1);
}

.hero-ready .hero-vector {
  opacity: 1;
  transition-delay: 0.2s;
}

.hero-vector img {
  width: 100%;
  height: 100%;
  display: block;
}

/* Large dark blue overlay — covers left side & bottom.
   Pulled left so the diagonal edge stays clear of the left-hand face at
   narrower desktop widths, while its lower (wider) part still backs the
   heading text for legibility. */
.hero-vector-dark {
  top: -251px;
  left: -2092px;
  width: 3192px;
  height: 1357px;
}

/* Lighter blue overlay — accent shape on top of dark.
   Bottom-anchored and dropped low so its peak stays well below both faces at
   any viewport width/height (it used to collide with the right-hand face on
   wide desktops). */
.hero-vector-light {
  top: auto;
  bottom: -880px;
  left: 376px;
  width: 2735px;
  height: 1196px;
}

/* Accent shape on right edge — overlaps light blue to create darker corner */
.hero-vector-accent {
  top: auto;
  bottom: -880px;
  left: 376px;
  width: 2735px;
  height: 1196px;
}

/* Outlined stroke decoration — follows the lowered blue shape */
.hero-vector-stroke {
  top: auto;
  bottom: -460px;
  left: calc(50% + 400.5px - 699.5px);
  width: 1399px;
  height: 612px;
}

/* Smaller outlined stroke decoration — mobile only */
.hero-vector-stroke-small {
  display: none;
  top: 274px;
  left: calc(50% - 387px);
  width: 774px;
  height: 339px;
}

/* Taller, large desktop aspect ratios (≈16:10 and squarer, tall viewports):
   the base placement leaves the navy shape sitting high and the blue shape
   barely visible in the corner. Drop the navy and raise the blue for better
   balance. Gated on min-height so shorter viewports keep the base placement
   (where lowering the navy would drop it below the heading text), and on
   max-aspect-ratio so the wider/shorter base rules keep the blue low where it
   would otherwise collide with the right-hand face. */
@media (min-width: 1200px) and (min-height: 1000px) and (max-aspect-ratio: 7 / 4) {
  .hero-vector-dark {
    top: 120px;
  }

  .hero-vector-light,
  .hero-vector-accent {
    bottom: -640px;
  }

  .hero-vector-stroke {
    bottom: -220px;
  }

  /* Drop the hero text to match the lowered navy so it stays within it.
     (.hero scope raises specificity over the base .hero-content rule, which
     appears later in the file.) */
  .hero .hero-content {
    top: 520px;
  }
}

/* Fixed logo */
.fixed-logo {
  position: fixed;
  top: 50px;
  left: 30px;
  z-index: 100;
  border-radius: 10px;
  height: 58px;
  padding: 0 16px;
  display: flex;
  align-items: center;
  text-decoration: none;
  background: transparent;
  transition: background 0.3s ease;
  animation: hero-fade-in 1s cubic-bezier(0.16, 1, 0.3, 1) 0.3s both;
}

.fixed-logo.scrolled {
  background: white;
}

.fixed-logo img {
  width: 182px;
  height: auto;
  display: block;
  transition: opacity 0.3s ease, width 0.3s ease;
}

.fixed-logo.scrolled img {
  width: 120px;
}

.logo-dark {
  position: absolute;
  opacity: 0;
}

.fixed-logo.scrolled .logo-white {
  opacity: 0;
}

.fixed-logo.scrolled .logo-dark {
  opacity: 1;
}

/* Fixed navigation */
.fixed-nav {
  position: fixed;
  top: 45px;
  right: 40px;
  z-index: 100;
  display: flex;
  align-items: center;
  background: white;
  border-radius: 100px;
  padding: 6px;
  animation: hero-fade-in 1s cubic-bezier(0.16, 1, 0.3, 1) 0.3s both;
}

.nav-links {
  position: relative;
  display: flex;
  align-items: center;
  gap: 30px;
  padding-left: 30px;
  padding-right: 20px;
}

.nav-link {
  font-weight: 400;
  font-size: 17px;
  color: black;
  text-decoration: none;
  white-space: nowrap;
  transition: color 0.3s ease;
}

.nav-link:hover {
  color: #70A6C8;
}

.nav-link-active {
  color: #70A6C8;
}

.nav-cta {
  background: #0b1b33;
  color: white;
  font-weight: 400;
  font-size: 17px;
  text-decoration: none;
  white-space: nowrap;
  padding: 14px 24px;
  border-radius: 100px;
  transition: background 0.3s ease;
}

.nav-cta:hover {
  background: #1E3A6B;
}


/* Hero heading */
.hero-content {
  position: absolute;
  left: 65px;
  top: 327px;
  width: 438px;
  max-width: calc(100% - 130px);
  display: flex;
  flex-direction: column;
  align-items: flex-start;
  gap: 30px;
}

.hero-heading {
  width: 356px;
  max-width: 100%;
  font-size: 70px;
  line-height: 1;
  color: white;
  opacity: 0;
  transform: translateY(30px);
}

.hero-ready .hero-heading {
  animation: hero-fade-in 1s cubic-bezier(0.16, 1, 0.3, 1) 0.2s both;
}

.heading-light {
  font-weight: 300;
}

.heading-accent {
  font-weight: 400;
  color: #dcf2fd;
}

/* Hero subtitle */
.hero-subtitle {
  width: 594px;
  max-width: 100%;
  font-weight: 300;
  font-size: 24px;
  line-height: 1.3;
  color: white;
  opacity: 0;
  transform: translateY(30px);
}

.hero-ready .hero-subtitle {
  animation: hero-fade-in 1s cubic-bezier(0.16, 1, 0.3, 1) 0.45s both;
}

/* CTA buttons */
.hero-actions {
  position: relative;
  display: flex;
  align-items: center;
  gap: 0;
  border-radius: 50px;
  overflow: hidden;
  width: fit-content;
  opacity: 0;
  transform: translateY(30px);
}

.hero-ready .hero-actions {
  animation: hero-fade-in 1s cubic-bezier(0.16, 1, 0.3, 1) 0.7s both;
}

.hero-actions::before {
  content: '';
  position: absolute;
  inset: 0;
  background: #B41020;
  border-radius: 50px;
  transform: scaleX(0);
  transform-origin: right;
  transition: transform 1s cubic-bezier(0.22, 1, 0.36, 1);
  z-index: 0;
}

.hero-actions:hover::before {
  transform: scaleX(1);
  transform-origin: left;
}

.hero-actions > * {
  position: relative;
  z-index: 1;
}

.btn-get-started {
  display: flex;
  align-items: center;
  justify-content: center;
  height: 48px;
  background: #B41020;
  color: white;
  font-weight: 400;
  font-size: 17px;
  padding: 0 30px;
  border-radius: 50px;
  text-decoration: none;
  white-space: nowrap;
}

.btn-arrow {
  display: flex;
  align-items: center;
  justify-content: center;
  width: 48px;
  height: 48px;
  margin-left: -4px;
}

.btn-arrow svg {
  width: 100%;
  height: 100%;
  display: block;
  transition: transform 1s cubic-bezier(0.22, 1, 0.36, 1);
}

.hero-actions:hover .btn-arrow svg {
  transform: rotate(45deg);
}

.arrow-bg {
  fill: #B41020;
}

.btn-arrow img {
  width: 100%;
  height: 100%;
  display: block;
}

/* Section 02 */
.section-02 {
  position: relative;
  width: 100%;
  max-width: 1440px;
  padding: 80px 55px 80px;
}

.s02-inner {
  position: relative;
}

.s02-tag {
  display: inline-flex;
  align-items: center;
  gap: 10px;
  background: white;
  border-radius: 8px;
  padding: 10px;
}

.s02-tag-dot {
  width: 6px;
  height: 6px;
  border-radius: 50%;
  background: #70A6C8;
}

.s02-tag span:last-child {
  font-size: 15px;
  font-weight: 400;
  color: #0b1b33;
  text-transform: uppercase;
  letter-spacing: 1.5px;
}

.s02-grid {
  display: grid;
  grid-template-columns: 655fr 217fr 436fr;
  margin-top: 43px;
  align-items: start;
}

.s02-heading {
  grid-column: 1;
  font-size: 60px;
  font-weight: 300;
  line-height: 1.1;
  color: #0b1b33;
}

.s02-highlight {
  color: #70A6C8;
}

.s02-right {
  grid-column: 3;
}

.s02-body {
  font-size: 20px;
  font-weight: 300;
  line-height: 1.55;
  color: #0b1b33;
  opacity: 0;
  transform: translateY(20px);
  transition: opacity 0.8s cubic-bezier(0.16, 1, 0.3, 1), transform 0.8s cubic-bezier(0.16, 1, 0.3, 1);
  transition-delay: 0.2s;
}

.s02-body.in-view {
  opacity: 1;
  transform: translateY(0);
}

.s02-body + .s02-body {
  margin-top: 24px;
}

.char-reveal {
  color: #C8CDD6;
  transition: color 0.15s ease;
}

.s02-heading .char-reveal {
  color: #C8CDD6;
}

.s02-heading .s02-highlight .char-reveal {
  color: #C8CDD6;
}

.char-reveal.revealed {
  color: #0b1b33;
}

.s02-heading .s02-highlight .char-reveal.revealed {
  color: #70A6C8;
}

.s05-heading .char-reveal {
  color: #C8CDD6;
}

.s05-heading .s05-highlight .char-reveal {
  color: #C8CDD6;
}

.s05-heading .char-reveal.revealed {
  color: #0b1b33;
}

.s05-heading .s05-highlight .char-reveal.revealed {
  color: #70A6C8;
}

.s04-heading .char-reveal {
  color: #C8CDD6;
}

.s04-heading .s04-highlight .char-reveal {
  color: #C8CDD6;
}

.s04-heading .char-reveal.revealed {
  color: #0b1b33;
}

.s04-heading .s04-highlight .char-reveal.revealed {
  color: #B41020;
}

.s07-heading .char-reveal {
  color: #C8CDD6;
}

.s07-heading .s07-highlight .char-reveal {
  color: #C8CDD6;
}

.s07-heading .char-reveal.revealed {
  color: #0b1b33;
}

.s07-heading .s07-highlight .char-reveal.revealed {
  color: #70A6C8;
}

.s02-actions {
  position: relative;
  display: flex;
  align-items: center;
  gap: 0;
  margin-top: 50px;
  border-radius: 50px;
  width: fit-content;
  overflow: hidden;
  opacity: 0;
  transform: translateY(40px);
  transition: opacity 0.9s cubic-bezier(0.16, 1, 0.3, 1), transform 0.9s cubic-bezier(0.16, 1, 0.3, 1);
  transition-delay: 0.55s;
}

.s02-actions::before {
  content: '';
  position: absolute;
  inset: 0;
  background: #1E3A6B;
  border-radius: 50px;
  transform: scaleX(0);
  transform-origin: right;
  transition: transform 1s cubic-bezier(0.22, 1, 0.36, 1);
  z-index: 0;
}

.s02-actions:hover::before {
  transform: scaleX(1);
  transform-origin: left;
}

.s02-actions > * {
  position: relative;
  z-index: 1;
}

.s02-actions.in-view {
  opacity: 1;
  transform: translateY(0);
}

.btn-discover {
  display: flex;
  align-items: center;
  justify-content: center;
  height: 48px;
  background: #1E3A6B;
  color: white;
  font-weight: 400;
  font-size: 17px;
  padding: 0 30px;
  border-radius: 50px;
  text-decoration: none;
  white-space: nowrap;
}

.btn-arrow-dark {
  display: flex;
  align-items: center;
  justify-content: center;
  width: 48px;
  height: 48px;
  margin-left: -4px;
}

.btn-arrow-dark svg {
  width: 100%;
  height: 100%;
  display: block;
  transition: transform 1s cubic-bezier(0.22, 1, 0.36, 1);
}

.s02-actions:hover .btn-arrow-dark svg {
  transform: rotate(45deg);
}

/* Section 03 */
.section-03 {
  position: relative;
  width: 100%;
  max-width: 1440px;
  padding: 30px 55px 60px 55px;
}

.s03-left {
  margin-bottom: 30px;
}

.s03-tag {
  display: inline-flex;
  align-items: center;
  gap: 10px;
  background: white;
  border-radius: 8px;
  padding: 10px;
}

.s03-tag-dot {
  width: 6px;
  height: 6px;
  border-radius: 50%;
  background: #70A6C8;
}

.s03-tag span:last-child {
  font-size: 15px;
  font-weight: 400;
  color: #0b1b33;
  text-transform: uppercase;
  letter-spacing: 1.5px;
}

.s03-cards {
  display: flex;
  gap: 0;
}

.s03-card {
  flex: 1;
  border-radius: 0;
  padding: 30px;
  display: flex;
  flex-direction: column;
  justify-content: space-between;
  min-height: 418px;
  opacity: 0;
  transform: translateY(80px);
  transition:
    opacity 0.9s cubic-bezier(0.16, 1, 0.3, 1),
    transform 0.9s cubic-bezier(0.16, 1, 0.3, 1);
}

.s03-card:nth-child(1) { transition-delay: 0s; }
.s03-card:nth-child(2) { transition-delay: 0.5s; }
.s03-card:nth-child(3) { transition-delay: 1s; }

.s03-card.in-view {
  opacity: 1;
  transform: translateY(0);
}

@keyframes icon-draw {
  from { stroke-dashoffset: var(--path-length); }
  to { stroke-dashoffset: 0; }
}

.s03-icon-animated .icon-path {
  stroke-dasharray: 500;
  stroke-dashoffset: 500;
  --path-length: 500;
}

.s03-card.in-view .icon-path-1 {
  animation: icon-draw 2s cubic-bezier(0.25, 0.1, 0.25, 1) 0.3s forwards;
}

.s03-card.in-view .icon-path-2 {
  animation: icon-draw 2s cubic-bezier(0.25, 0.1, 0.25, 1) 0.8s forwards;
}

.s03-card.in-view .icon-path-3 {
  animation: icon-draw 2s cubic-bezier(0.25, 0.1, 0.25, 1) 1.3s forwards;
}

.s03-card.in-view .icon-path-4 {
  animation: icon-draw 2s cubic-bezier(0.25, 0.1, 0.25, 1) 1.8s forwards;
}

.s03-card-dark {
  background: #1E3A6B;
  color: white;
}

.s03-card-light {
  background: #DCF2FD;
  color: #0B1B33;
}

.s03-card-red {
  background: #B41020;
  color: white;
}

.s03-card-top {
  display: flex;
  justify-content: space-between;
  align-items: flex-start;
}

.s03-icon {
  width: 100px;
  height: 100px;
}

.s03-number {
  font-size: 15px;
  font-weight: 400;
  text-transform: uppercase;
  letter-spacing: 1.5px;
}

.s03-card-bottom {
  display: flex;
  flex-direction: column;
  gap: 30px;
}

.s03-card-title {
  font-size: 40px;
  font-weight: 300;
  line-height: 1;
  max-width: 335px;
  /* Reserve two lines so one- and two-line titles push their description
     to the same baseline across the side-by-side cards. */
  min-height: 80px;
}

.s03-card-text {
  font-size: 20px;
  font-weight: 300;
  line-height: 1.55;
}

.s03-card-red .s03-card-text {
  color: rgba(255, 255, 255, 0.85);
}

.s03-card-dark .s03-card-text,
.s03-card-red .s03-card-text {
  color: #fafaf7;
}

.s03-card-light .s03-card-text {
  color: rgba(11, 27, 51, 0.75);
}

.s03-card-red .icon-path {
  stroke: white;
}

.s03-card-red .s03-number {
  color: white;
}

.s03-card-light .icon-path {
  stroke: #0B1B33;
}

.s03-marquee {
  width: 100%;
  overflow: hidden;
}

.s03-marquee-track {
  display: inline-flex;
  gap: 0.3em;
  white-space: nowrap;
  will-change: transform;
  font-size: clamp(80px, 10.4vw, 150px);
  font-weight: 400;
  line-height: 1.1;
  color: #0b1b33;
}

.s03-marquee-track span {
  padding-right: 0.3em;
}

/* Section 04 */
.section-04 {
  position: relative;
  width: 100%;
  max-width: 1440px;
  padding: 100px 55px 0;
}

.s04-inner {
  position: relative;
  display: grid;
  grid-template-columns: repeat(6, 1fr);
  column-gap: 0;
  row-gap: 0;
}

.s04-line {
  display: none;
}

.s04-tag {
  grid-column: 1 / 4;
  grid-row: 1;
  display: inline-flex;
  align-items: center;
  gap: 10px;
  background: white;
  border-radius: 8px;
  padding: 10px;
  margin-bottom: 47px;
  width: fit-content;
}

.s04-tag-dot {
  width: 6px;
  height: 6px;
  border-radius: 50%;
  background: #70A6C8;
}

.s04-tag span:last-child {
  font-size: 15px;
  font-weight: 400;
  color: #0b1b33;
  text-transform: uppercase;
  letter-spacing: 1.5px;
}

.s04-image {
  grid-column: 1 / 4;
  grid-row: 2;
  width: 100%;
  height: 100%;
  max-height: 700px;
  overflow: hidden;
}

.s04-image img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  object-position: center top;
  display: block;
}

.s04-right {
  grid-column: 4 / 7;
  grid-row: 2;
  padding-left: 61px;
}

.s04-heading {
  font-size: 50px;
  font-weight: 300;
  line-height: 1.12;
  color: #0b1b33;
  margin: 0;
}

.s04-highlight {
  color: #70A6C8;
}

.s04-body {
  margin-top: 40px;
  font-size: 20px;
  font-weight: 300;
  line-height: 1.55;
  color: #0b1b33;
}

.s04-body p {
  margin-bottom: 20px;
}

.s04-body p:last-child {
  margin-bottom: 0;
}

.s04-bold {
  font-weight: 500;
}

.s04-actions {
  position: relative;
  display: flex;
  align-items: center;
  gap: 0;
  margin-top: 40px;
  border-radius: 50px;
  width: fit-content;
  overflow: hidden;
}

.s04-actions::before {
  content: '';
  position: absolute;
  inset: 0;
  background: #1E3A6B;
  border-radius: 50px;
  transform: scaleX(0);
  transform-origin: right;
  transition: transform 1s cubic-bezier(0.22, 1, 0.36, 1);
  z-index: 0;
}

.s04-actions:hover::before {
  transform: scaleX(1);
  transform-origin: left;
}

.s04-actions > * {
  position: relative;
  z-index: 1;
}

.s04-actions:hover .btn-arrow-dark svg {
  transform: rotate(45deg);
}

/* Section 05 — Services */
.section-05 {
  position: relative;
  width: 100%;
  max-width: 1440px;
  padding: 100px 55px 40px;
}

.s05-inner {
  position: relative;
  display: grid;
  grid-template-columns: 1fr 1fr 1fr;
  column-gap: 0;
  row-gap: 0;
}

.s05-tag {
  grid-column: 1;
  display: inline-flex;
  align-items: center;
  gap: 10px;
  background: white;
  border-radius: 8px;
  padding: 10px;
  width: fit-content;
}

.s05-tag-dot {
  width: 6px;
  height: 6px;
  border-radius: 50%;
  background: #70A6C8;
}

.s05-tag span:last-child {
  font-size: 15px;
  font-weight: 400;
  color: #0b1b33;
  text-transform: uppercase;
  letter-spacing: 1.5px;
}

.s05-left {
  grid-column: 1;
  grid-row: 2;
  margin-top: 43px;
}

.s05-heading {
  font-size: 60px;
  font-weight: 300;
  line-height: 1.1;
  color: #0b1b33;
  max-width: 437px;
  margin-top: 0;
  margin-bottom: 0;
}

.s05-highlight {
  color: #70A6C8;
}

.s05-grid {
  grid-column: 2 / 4;
  grid-row: 2;
  display: grid;
  grid-template-columns: 1fr 1fr;
  grid-template-rows: repeat(4, auto);
  grid-auto-flow: row;
  gap: 0;
  margin-top: 43px;
  background-color: #FAFAF7;
  background-image:
    linear-gradient(rgba(15, 22, 32, 0.07), rgba(15, 22, 32, 0.07)),
    linear-gradient(rgba(15, 22, 32, 0.07), rgba(15, 22, 32, 0.07));
  background-size: 1px 100%, 1px 100%;
  background-position: center 0, right 0;
  background-repeat: no-repeat;
}

.s05-actions {
  width: fit-content;
}

.s05-item {
  display: flex;
  flex-direction: column;
  padding: 35px 30px;
  background: transparent;
  border-top: 1px solid rgba(15, 22, 32, 0.07);
  text-decoration: none;
  position: relative;
  opacity: 0;
  transform: translateY(20px);
  transition: opacity 1.2s ease, transform 1.2s cubic-bezier(0.16, 1, 0.3, 1), background 0.4s ease;
}

.s05-item:nth-child(7),
.s05-item:nth-child(8) {
  border-bottom: 1px solid rgba(15, 22, 32, 0.07);
}


.s05-item::before {
  content: '';
  position: absolute;
  top: -1px;
  left: 0;
  right: 0;
  height: 2px;
  background: #1E3A6B;
  transform: scaleX(0);
  transform-origin: left;
  transition: transform 0.6s cubic-bezier(0.16, 1, 0.3, 1);
}

.s05-item:hover::before {
  transform: scaleX(1);
}

.s05-arrow {
  position: absolute;
  top: 0;
  left: 0;
  width: 64px;
  height: 64px;
  border-radius: 50%;
  background: #1E3A6B;
  display: flex;
  align-items: center;
  justify-content: center;
  opacity: 0;
  pointer-events: none;
  transform: translate(-50%, -50%) scale(0.7);
  transition: opacity 0.3s ease, transform 0.3s cubic-bezier(0.16, 1, 0.3, 1);
  z-index: 2;
}

.s05-arrow svg {
  width: 20px;
  height: 20px;
}

.s05-item:hover .s05-arrow {
  opacity: 1;
}


.s05-item.in-view {
  opacity: 1;
  transform: translateY(0);
}

.s05-item:nth-child(1) { transition-delay: 0s; }
.s05-item:nth-child(2) { transition-delay: 0.1s; }
.s05-item:nth-child(3) { transition-delay: 0.2s; }
.s05-item:nth-child(4) { transition-delay: 0.3s; }
.s05-item:nth-child(5) { transition-delay: 0.4s; }
.s05-item:nth-child(6) { transition-delay: 0.5s; }
.s05-item:nth-child(7) { transition-delay: 0.6s; }
.s05-item:nth-child(8) { transition-delay: 0.7s; }

.s05-number {
  font-size: 14px;
  font-weight: 400;
  color: #B41020;
  letter-spacing: 1px;
  margin-bottom: 14px;
}

.s05-title {
  font-size: 25px;
  font-weight: 500;
  color: #0b1b33;
  margin-bottom: 10px;
}

.s05-desc {
  font-size: 16px;
  font-weight: 300;
  color: rgba(11, 27, 51, 0.5);
  line-height: 1.6;
}

.s05-actions {
  position: relative;
  display: flex;
  align-items: center;
  gap: 0;
  margin-top: 50px;
  border-radius: 50px;
  width: fit-content;
  overflow: hidden;
}

.s05-actions::before {
  content: '';
  position: absolute;
  inset: 0;
  background: #B41020;
  border-radius: 50px;
  transform: scaleX(0);
  transform-origin: right;
  transition: transform 1s cubic-bezier(0.22, 1, 0.36, 1);
  z-index: 0;
}

.s05-actions:hover::before {
  transform: scaleX(1);
  transform-origin: left;
}

.s05-actions > * {
  position: relative;
  z-index: 1;
}

.s05-actions .btn-discover {
  background: #B41020;
}

.s05-actions .arrow-bg-dark {
  fill: #B41020;
}

.s05-actions:hover .btn-arrow-dark svg {
  transform: rotate(45deg);
}


/* ─── Service Overlay ─── */
.s05-overlay {
  position: absolute;
  inset: 0;
  background: #0b1b33;
  z-index: 10;
  display: none;
  align-items: center;
  justify-content: center;
  opacity: 0;
  transition: opacity 0.5s cubic-bezier(0.16, 1, 0.3, 1);
}

.s05-overlay.is-active {
  display: flex;
}

.s05-overlay.is-visible {
  opacity: 1;
}

.s05-overlay-close {
  position: absolute;
  top: 40px;
  right: 40px;
  width: 48px;
  height: 48px;
  border-radius: 50%;
  border: 1px solid rgba(255, 255, 255, 0.15);
  background: transparent;
  display: flex;
  align-items: center;
  justify-content: center;
  cursor: pointer;
  z-index: 12;
  transition: border-color 0.3s ease, background 0.3s ease;
}

.s05-overlay-close:hover {
  border-color: rgba(255, 255, 255, 0.4);
  background: rgba(255, 255, 255, 0.05);
}

.s05-overlay-nav {
  position: absolute;
  bottom: 40px;
  right: 40px;
  display: flex;
  gap: 10px;
  z-index: 12;
}

.s05-overlay-prev,
.s05-overlay-next {
  width: 48px;
  height: 48px;
  border-radius: 50%;
  border: 1px solid rgba(255, 255, 255, 0.15);
  background: transparent;
  display: flex;
  align-items: center;
  justify-content: center;
  cursor: pointer;
  transition: border-color 0.3s ease, background 0.3s ease;
}

.s05-overlay-prev:hover,
.s05-overlay-next:hover {
  border-color: rgba(255, 255, 255, 0.4);
  background: rgba(255, 255, 255, 0.05);
}

.s05-overlay-panel {
  display: none;
  grid-template-columns: 1fr 1.5fr;
  gap: 80px;
  padding: 80px 60px;
  width: 100%;
  height: 100%;
  align-items: start;
  opacity: 0;
  transform: translateY(20px);
  transition: opacity 0.5s cubic-bezier(0.16, 1, 0.3, 1) 0.1s, transform 0.5s cubic-bezier(0.16, 1, 0.3, 1) 0.1s;
}

.s05-overlay-panel.is-active {
  display: grid;
}

.s05-overlay-panel.is-visible {
  opacity: 1;
  transform: translateY(0);
}

.s05-overlay-left {
  display: flex;
  flex-direction: column;
  gap: 20px;
}

.s05-overlay-number {
  font-size: 14px;
  font-weight: 400;
  color: #70A6C8;
  letter-spacing: 1.5px;
}

.s05-overlay-title {
  font-size: 52px;
  font-weight: 300;
  color: white;
  line-height: 1.1;
}

.s05-overlay-right {
  display: flex;
  flex-direction: column;
  gap: 30px;
}

.s05-overlay-intro {
  font-size: 18px;
  font-weight: 300;
  color: rgba(255, 255, 255, 0.7);
  line-height: 1.7;
}

.s05-overlay-list {
  list-style: none;
  padding: 0;
  display: flex;
  flex-direction: column;
  gap: 14px;
}

.s05-overlay-list li {
  font-size: 16px;
  font-weight: 400;
  color: white;
  padding-left: 20px;
  position: relative;
  line-height: 1.5;
}

.s05-overlay-list li::before {
  content: '';
  position: absolute;
  left: 0;
  top: 9px;
  width: 6px;
  height: 6px;
  border-radius: 50%;
  background: #70A6C8;
}

.s05-overlay-cta {
  display: flex;
  align-items: center;
  gap: 0;
  margin-top: 10px;
  width: fit-content;
  border-radius: 50px;
  overflow: hidden;
  position: relative;
}

.s05-overlay-cta::before {
  content: '';
  position: absolute;
  inset: 0;
  background: #70A6C8;
  border-radius: 50px;
  transform: scaleX(0);
  transform-origin: right;
  transition: transform 1s cubic-bezier(0.22, 1, 0.36, 1);
  z-index: 0;
}

.s05-overlay-cta:hover::before {
  transform: scaleX(1);
  transform-origin: left;
}

.btn-overlay-cta {
  background: #70A6C8;
  position: relative;
  z-index: 1;
}

.btn-overlay-arrow {
  position: relative;
  z-index: 1;
}

.s05-overlay-cta:hover .btn-overlay-arrow svg circle {
  fill: #70A6C8;
  transition: fill 0.4s ease;
}

.s05-overlay-cta:hover .btn-overlay-arrow svg {
  transform: rotate(45deg);
}


/* Section 06 — Client Stories */
.section-06 {
  position: relative;
  width: 100%;
  max-width: 1440px;
  padding: 100px 55px 100px;
}

.s06-inner {
  position: relative;
  display: grid;
  grid-template-columns: repeat(6, 1fr);
  column-gap: 0;
  row-gap: 0;
}

.s06-line {
  display: none;
}

.s06-left {
  grid-column: 1 / 3;
  grid-row: 1;
}

.s06-tag {
  display: inline-flex;
  align-items: center;
  gap: 10px;
  background: white;
  border-radius: 8px;
  padding: 10px;
}

.s06-tag-dot {
  width: 6px;
  height: 6px;
  border-radius: 50%;
  background: #70A6C8;
}

.s06-tag span:last-child {
  font-size: 15px;
  font-weight: 400;
  color: #0b1b33;
  text-transform: uppercase;
  letter-spacing: 1.5px;
}

.s06-right {
  grid-column: 3 / 7;
  grid-row: 1;
}

.s06-heading {
  font-size: 60px;
  font-weight: 300;
  line-height: 1.1;
  color: #0b1b33;
  max-width: 900px;
  margin-bottom: 80px;
}

.s06-highlight {
  color: #B41020;
}

.s06-slider {
  position: relative;
}

.s06-slides {
  position: relative;
  min-height: 320px;
}

.s06-slide {
  position: absolute;
  inset: 0;
  opacity: 0;
  transform: translateY(20px);
  pointer-events: none;
  transition: opacity 0.8s ease, transform 0.8s cubic-bezier(0.16, 1, 0.3, 1);
}

.s06-slide.is-active {
  opacity: 1;
  transform: translateY(0);
  pointer-events: auto;
  position: relative;
}

.s06-slide-content {
  max-width: 1000px;
}

.s06-quote {
  font-size: clamp(32px, 3.3vw, 48px);
  font-weight: 300;
  line-height: 1.3;
  color: #0b1b33;
  margin-bottom: 50px;
}

.s06-person {
  display: flex;
  align-items: center;
  gap: 20px;
}

.s06-avatar {
  width: 60px;
  height: 60px;
  border-radius: 50%;
  background: #1E3A6B;
  display: flex;
  align-items: center;
  justify-content: center;
  color: white;
  font-size: 18px;
  font-weight: 500;
  flex-shrink: 0;
}

.s06-meta {
  display: flex;
  flex-direction: column;
  gap: 4px;
}

.s06-name {
  font-size: 18px;
  font-weight: 500;
  color: #0b1b33;
}

.s06-role {
  font-size: 15px;
  font-weight: 300;
  color: rgba(11, 27, 51, 0.6);
}

.s06-controls {
  display: flex;
  align-items: center;
  justify-content: space-between;
  margin-top: 60px;
  padding-top: 30px;
  border-top: 1px solid rgba(15, 22, 32, 0.07);
}

.s06-counter {
  font-size: 16px;
  font-weight: 400;
  color: #0b1b33;
  letter-spacing: 1px;
}

.s06-counter .s06-current {
  color: #B41020;
}

.s06-nav {
  display: flex;
  gap: 12px;
}

.s06-btn {
  width: 48px;
  height: 48px;
  border-radius: 50%;
  background: #1E3A6B;
  border: none;
  display: flex;
  align-items: center;
  justify-content: center;
  cursor: pointer;
  transition: background 0.3s ease, transform 0.3s ease;
}

.s06-btn:hover {
  background: #0b1b33;
  transform: scale(1.05);
}


/* Section 07 — CTA */
.section-07 {
  position: relative;
  width: 100vw;
  padding: 50px 65px 150px;
  border-bottom-left-radius: 20px;
  border-bottom-right-radius: 20px;
  overflow: visible;
}

.s07-decoration {
  position: absolute;
  left: calc(50% - 633.5px);
  bottom: -150px;
  width: 1267px;
  aspect-ratio: 1550 / 678;
  pointer-events: none;
  will-change: transform;
  z-index: 2;
}

.s07-decoration img {
  width: 100%;
  height: 100%;
  display: block;
}

.s07-inner {
  position: relative;
  z-index: 1;
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 40px;
  max-width: 1100px;
  margin: 0 auto;
}

.s07-heading {
  font-size: 60px;
  font-weight: 300;
  line-height: 1.1;
  color: #0b1b33;
  text-align: center;
  white-space: nowrap;
}

.s07-highlight {
  color: #70A6C8;
}

.s07-body {
  font-size: 20px;
  font-weight: 300;
  line-height: 1.55;
  color: #0b1b33;
  max-width: 625px;
  text-align: center;
  opacity: 0;
  transform: translateY(20px);
  transition: opacity 0.8s cubic-bezier(0.16, 1, 0.3, 1), transform 0.8s cubic-bezier(0.16, 1, 0.3, 1);
  transition-delay: 0.2s;
}

.s07-body.in-view {
  opacity: 1;
  transform: translateY(0);
}

.s07-actions {
  position: relative;
  display: flex;
  align-items: center;
  gap: 0;
  border-radius: 50px;
  overflow: hidden;
  margin-top: 10px;
  opacity: 0;
  transform: translateY(20px);
  transition: opacity 0.8s cubic-bezier(0.16, 1, 0.3, 1), transform 0.8s cubic-bezier(0.16, 1, 0.3, 1);
  transition-delay: 0.4s;
}

.s07-actions.in-view {
  opacity: 1;
  transform: translateY(0);
}

.s07-actions::before {
  content: '';
  position: absolute;
  inset: 0;
  background: #b41020;
  border-radius: 50px;
  transform: scaleX(0);
  transform-origin: right;
  transition: transform 1s cubic-bezier(0.22, 1, 0.36, 1);
  z-index: 0;
}

.s07-actions:hover::before {
  transform: scaleX(1);
  transform-origin: left;
}

.s07-actions > * {
  position: relative;
  z-index: 1;
}

.s07-actions:hover .btn-arrow svg {
  transform: rotate(45deg);
}

.s07-actions .btn-get-started {
  background: #b41020;
}

.s07-actions .arrow-bg {
  fill: #b41020;
}

/* Section 08 — Footer */
.section-08 {
  position: fixed;
  bottom: 0;
  left: 0;
  width: 100vw;
  background: #0f1620;
  overflow: hidden;
  color: white;
  z-index: 0;
}

/* All other body children sit above the fixed footer */
.hero,
.section-02,
.section-03,
.section-04,
.section-05,
.section-06,
.section-07,
.s03-marquee {
  position: relative;
  z-index: 1;
  background: transparent;
}

.section-07 {
  background: #FAFAF7;
  z-index: 2;
}


.hero {
  background: transparent;
}

.s08-vector-tl {
  position: absolute;
  top: -130px;
  left: -600px;
  width: 1267px;
  pointer-events: none;
  opacity: 0.35;
}

.s08-vector-tl img {
  width: 100%;
  height: auto;
  display: block;
}

.s08-vector-br {
  position: absolute;
  bottom: -130px;
  right: -600px;
  width: 1267px;
  pointer-events: none;
  opacity: 0.35;
}

.s08-vector-br img {
  width: 100%;
  height: auto;
  display: block;
}

.s08-inner {
  position: relative;
  max-width: 1440px;
  margin: 0 auto;
  padding: 140px 65px 150px;
  z-index: 1;
}

.s08-cols {
  display: grid;
  grid-template-columns: 240px auto auto auto auto;
  gap: 70px;
  margin-bottom: 100px;
}

.s08-col-logo .s08-logo img {
  width: 182px;
  height: 48px;
  display: block;
}

.s08-col-title {
  font-size: 13px;
  font-weight: 600;
  letter-spacing: 1.3px;
  text-transform: uppercase;
  color: white;
  margin-bottom: 30px;
}

.s08-list {
  list-style: none;
  display: flex;
  flex-direction: column;
  gap: 23px;
}

.s08-list a {
  font-size: 16px;
  font-weight: 300;
  color: rgba(255, 255, 255, 0.7);
  text-decoration: none;
  transition: color 0.3s ease;
}

.s08-list a:hover {
  color: rgba(255, 255, 255, 1);
}

.s08-col-contact {
  position: relative;
}

.s08-socials {
  display: flex;
  gap: 20px;
  margin-top: 40px;
}

.s08-socials a {
  width: 40px;
  height: 40px;
  display: flex;
  align-items: center;
  justify-content: center;
  transition: opacity 0.3s ease;
}

.s08-socials a:hover {
  opacity: 0.7;
}

.s08-socials img {
  width: 100%;
  height: 100%;
  display: block;
}

.s08-address {
  font-style: normal;
  font-size: 16px;
  font-weight: 300;
  line-height: 2;
  color: white;
  margin-bottom: 18px;
}

.s08-contact-item {
  font-size: 16px;
  font-weight: 300;
  line-height: 2;
  color: white;
  display: flex;
  align-items: center;
  gap: 10px;
}

.s08-contact-icon {
  flex-shrink: 0;
  color: white;
}

.s08-contact-item a {
  color: white;
  text-decoration: none;
  transition: opacity 0.3s ease;
  display: inline-flex;
  align-items: center;
  min-height: 48px;
  padding: 4px 0;
}

.s08-contact-item a:hover {
  opacity: 0.7;
}

.s08-bottom {
  display: grid;
  grid-template-columns: 1fr auto 1fr;
  align-items: center;
  gap: 30px;
}

.s08-copyright {
  font-size: 15px;
  font-weight: 300;
  color: white;
}

.s08-legal {
  list-style: none;
  display: flex;
  gap: 43px;
  justify-content: center;
}

.s08-legal a {
  font-size: 15px;
  font-weight: 300;
  color: white;
  text-decoration: none;
  transition: opacity 0.3s ease;
}

.s08-legal a:hover {
  opacity: 0.7;
}

.s08-credit {
  font-size: 15px;
  font-weight: 400;
  color: white;
  text-align: right;
}

.s08-credit a {
  font-weight: 600;
  color: white;
  text-decoration: none;
}

.footer-spacer {
  height: 684px;
  width: 100%;
  pointer-events: none;
  margin-top: -20px;
}

/* Intro loader */
.intro-loader {
  position: fixed;
  inset: 0;
  background: #0b1b33;
  z-index: 1000;
  display: flex;
  align-items: center;
  justify-content: center;
  transition: transform 0.9s cubic-bezier(0.76, 0, 0.24, 1), opacity 0.5s ease;
}

.intro-loader.hide {
  transform: translateY(-100%);
}

.intro-loader-logo {
  width: 560px;
  height: auto;
  display: block;
  overflow: visible;
}

.intro-logo-text {
  opacity: 0;
  animation: intro-text-in 0.8s cubic-bezier(0.16, 1, 0.3, 1) 0.1s forwards;
}

.intro-logo-caret {
  opacity: 0;
  transform: translateY(-12px);
  animation: intro-caret-in 0.7s cubic-bezier(0.34, 1.56, 0.64, 1) 0.6s forwards;
  transform-box: fill-box;
  transform-origin: center;
}

@keyframes intro-text-in {
  to {
    opacity: 1;
  }
}

@keyframes intro-caret-in {
  to {
    opacity: 1;
    transform: translateY(0);
  }
}

/* ─── Hamburger button (hidden on desktop) ─── */
.nav-hamburger {
  display: none;
  width: 48px;
  height: 48px;
  border: none;
  background: #0b1b33;
  border-radius: 50%;
  cursor: pointer;
  position: relative;
  flex-shrink: 0;
  align-items: center;
  justify-content: center;
}

.hamburger-line {
  display: block;
  width: 18px;
  height: 1.5px;
  background: white;
  position: absolute;
  left: 50%;
  transform: translateX(-50%);
  transition: transform 0.3s ease, top 0.3s ease, bottom 0.3s ease;
}

.hamburger-line:first-child { top: 19px; }
.hamburger-line:last-child { bottom: 19px; }

.nav-hamburger.is-open .hamburger-line:first-child {
  top: 50%;
  transform: translateX(-50%) translateY(-50%) rotate(45deg);
}

.nav-hamburger.is-open .hamburger-line:last-child {
  bottom: 50%;
  transform: translateX(-50%) translateY(50%) rotate(-45deg);
}

/* ─── Mobile menu overlay (hidden on desktop) ─── */
.mobile-menu {
  display: none;
  position: fixed;
  inset: 0;
  background: #0b1b33;
  z-index: 99;
  opacity: 0;
  pointer-events: none;
  transition: opacity 0.4s cubic-bezier(0.16, 1, 0.3, 1);
}

.mobile-menu.is-open {
  opacity: 1;
  pointer-events: auto;
}

.mobile-menu-inner {
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  height: 100%;
  gap: 30px;
}

.mobile-menu-link {
  font-size: 32px;
  font-weight: 300;
  color: white;
  text-decoration: none;
  opacity: 0;
  transform: translateY(20px);
  transition: opacity 0.5s ease 0.1s, transform 0.5s cubic-bezier(0.16, 1, 0.3, 1) 0.1s;
}

.mobile-menu-link:nth-child(2) {
  transition-delay: 0.2s;
}

.mobile-menu.is-open .mobile-menu-link {
  opacity: 1;
  transform: translateY(0);
}

.mobile-menu-cta {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  height: 52px;
  background: #70A6C8;
  color: white;
  font-weight: 400;
  font-size: 18px;
  padding: 0 36px;
  border-radius: 50px;
  text-decoration: none;
  margin-top: 10px;
  opacity: 0;
  transform: translateY(20px);
  transition: opacity 0.5s ease 0.3s, transform 0.5s cubic-bezier(0.16, 1, 0.3, 1) 0.3s;
}

.mobile-menu.is-open .mobile-menu-cta {
  opacity: 1;
  transform: translateY(0);
}

/* ═══════════════════════════════════════════
   TABLET — max-width: 1024px
   ═══════════════════════════════════════════ */
@media (max-width: 1024px) {
  .section-02,
  .section-03,
  .section-04,
  .section-05,
  .section-06 {
    padding-left: 30px;
    padding-right: 30px;
  }

  .s08-inner {
    padding-left: 30px;
    padding-right: 30px;
  }

  .section-07 {
    padding-left: 30px;
    padding-right: 30px;
  }

  .hero-content {
    left: 40px;
  }

  .hero-heading {
    font-size: 50px;
  }

  .hero-subtitle {
    font-size: 20px;
    width: 480px;
  }

  /* Section 02 */
  .s02-grid {
    grid-template-columns: 1fr;
    gap: 0;
  }

  .s02-heading {
    grid-column: 1;
    font-size: 44px;
  }

  .s02-right {
    grid-column: 1;
  }

  /* Section 03 cards */
  .s03-card {
    min-height: 360px;
    padding: 25px;
  }

  .s03-card-title {
    font-size: 32px;
  }

  .s03-card-text {
    font-size: 17px;
  }

  /* Section 04 */
  .s04-inner {
    grid-template-columns: 1fr;
  }

  .s04-tag {
    grid-column: 1;
  }

  .s04-image {
    grid-column: 1;
    grid-row: 2;
    max-height: 400px;
    border-radius: 12px;
  }

  .s04-right {
    grid-column: 1;
    grid-row: 3;
    padding-left: 0;
    padding-top: 40px;
  }

  .s04-heading {
    font-size: 40px;
  }

  .s04-body {
    font-size: 18px;
  }

  /* Section 05 */
  .s05-inner {
    grid-template-columns: 1fr;
  }

  .s05-tag {
    grid-column: 1;
  }

  .s05-left {
    grid-column: 1;
    grid-row: 2;
  }

  .s05-heading {
    font-size: 44px;
    max-width: none;
  }

  .s05-grid {
    grid-column: 1;
    grid-row: 3;
    margin-top: 50px;
  }

  /* Section 05 overlay */
  .s05-overlay-panel {
    gap: 40px;
    padding: 60px 40px;
  }

  .s05-overlay-title {
    font-size: 40px;
  }

  /* Section 06 */
  .s06-inner {
    grid-template-columns: 1fr;
  }

  .s06-left {
    grid-column: 1;
    grid-row: 1;
  }

  .s06-right {
    grid-column: 1;
    grid-row: 2;
    margin-top: 30px;
  }

  .s06-quote {
    font-size: clamp(26px, 3.3vw, 40px);
  }

  /* Section 07 */
  .s07-heading {
    font-size: 44px;
    white-space: normal;
  }

  /* Footer */
  .s08-cols {
    grid-template-columns: 1fr 1fr 1fr;
    gap: 50px 40px;
  }

  .s08-col-logo {
    grid-column: 1 / -1;
  }

  .footer-spacer {
    height: 900px;
  }
}

/* ═══════════════════════════════════════════
   MOBILE — max-width: 768px
   ═══════════════════════════════════════════ */
@media (max-width: 768px) {
  html, body {
    overflow-x: hidden;
  }

  .hero-photo {
    object-position: 50% top;
  }

  /* Swap to the mobile hero photo when one is set. */
  .hero-photo-desktop {
    display: none;
  }

  .hero-photo-mobile {
    display: block;
  }

  /* Navigation: show hamburger, hide desktop links */
  .nav-links {
    display: none;
  }

  .nav-cta {
    display: none;
  }

  .nav-hamburger {
    display: flex;
  }

  .fixed-nav {
    padding: 4px;
    top: 30px;
    right: 20px;
    background: transparent;
  }

  .fixed-logo {
    top: 30px;
    left: 20px;
    height: 48px;
    padding: 0 10px;
  }

  .fixed-logo img {
    width: 140px;
  }

  .fixed-logo .logo-white {
    opacity: 0;
  }

  .fixed-logo .logo-dark {
    opacity: 1;
  }

  .fixed-logo.menu-open .logo-white {
    opacity: 1;
  }

  .fixed-logo.menu-open .logo-dark {
    opacity: 0;
  }

  .fixed-logo.menu-open {
    background: transparent;
  }

  .fixed-logo.scrolled img {
    width: 110px;
  }

  .mobile-menu {
    display: block;
  }

  /* Page wrap */
  .page-wrap {
    padding: 6px 6px 0;
  }

  /* Hero */
  .hero {
    width: calc(100% + 12px);
    margin: -6px -6px 0;
    height: 600px;
  }

  .hero-content {
    left: 24px;
    top: auto;
    bottom: 20px;
    width: calc(100% - 48px);
    max-width: none;
    gap: 10px;
  }

  .hero-heading {
    font-size: 32px;
    width: 100%;
  }

  .hero-subtitle {
    font-size: 16px;
    width: 100%;
  }

  .hero-vector-dark {
    top: 80px;
    left: -2042px;
    width: 3192px;
    height: 1357px;
    transform: translateY(var(--parallax-y)) rotate(-16.42deg);
  }

  .hero-vector-light {
    top: 160px;
    left: -62px;
    width: 1597px;
    height: 698px;
    transform: translateY(var(--parallax-y));
  }

  .hero-vector-accent {
    top: 427px;
    left: 376px;
    width: 2735px;
    height: 1196px;
  }

  .hero-vector-stroke {
    top: 519px;
    left: calc(50% + 920.5px - 699.5px);
    width: 1399px;
  }

  .hero-vector-stroke-small {
    display: block;
    top: 274px;
    left: calc(50% - 387px);
    width: 774px;
    height: 339px;
  }

  /* Grid overlay */
  .grid-overlay {
    max-width: calc(100% - 40px);
  }

  /* Tags — smaller on mobile */
  .s02-tag span:last-child,
  .s03-tag span:last-child,
  .s04-tag span:last-child,
  .s05-tag span:last-child,
  .s06-tag span:last-child {
    font-size: 12px;
    letter-spacing: 1.2px;
  }

  .s02-tag,
  .s03-tag,
  .s04-tag,
  .s05-tag,
  .s06-tag {
    padding: 8px;
    gap: 8px;
    border-radius: 6px;
  }

  .s02-tag-dot,
  .s03-tag-dot,
  .s04-tag-dot,
  .s05-tag-dot,
  .s06-tag-dot {
    width: 5px;
    height: 5px;
  }

  /* Grid overlay — fewer lines on mobile */
  .grid-overlay {
    max-width: calc(100% - 40px);
    background-image: repeating-linear-gradient(
      to right,
      rgba(15, 22, 32, 0.07) 0,
      rgba(15, 22, 32, 0.07) 1px,
      transparent 1px,
      transparent calc((100% - 1px) / 3)
    );
  }

  /* Section 02 */
  .section-02 {
    padding: 60px 20px;
  }

  .s02-heading {
    font-size: 34px;
  }

  .s02-body {
    font-size: 17px;
    margin-top: 30px;
  }

  .s02-actions {
    margin-top: 35px;
  }

  /* Section 03 */
  .section-03 {
    padding: 30px 20px 40px;
  }

  .s03-cards {
    flex-direction: column;
    gap: 0;
  }

  .s03-card {
    min-height: 320px;
    padding: 25px;
  }

  .s03-card-title {
    font-size: 30px;
    /* Cards stack here, so no cross-card alignment to maintain. */
    min-height: 0;
  }

  .s03-card-text {
    font-size: 16px;
  }

  .s03-card:nth-child(2) { transition-delay: 0.2s; }
  .s03-card:nth-child(3) { transition-delay: 0.4s; }

  /* Marquee */
  .s03-marquee-track {
    font-size: clamp(50px, 12vw, 80px);
  }

  /* Section 04 */
  .section-04 {
    padding: 60px 20px 0;
  }

  .s04-image {
    max-height: 300px;
    border-radius: 10px;
  }

  .s04-heading {
    font-size: 34px;
  }

  .s04-body {
    font-size: 17px;
    margin-top: 30px;
  }

  .s04-body p {
    margin-bottom: 16px;
  }

  /* Section 05 */
  .section-05 {
    padding: 60px 20px 30px;
  }

  .s05-heading {
    font-size: 34px;
  }

  .s05-grid {
    grid-template-columns: 1fr;
    grid-auto-flow: row;
    margin-top: 40px;
    background-image:
      linear-gradient(rgba(15, 22, 32, 0.07), rgba(15, 22, 32, 0.07)),
      linear-gradient(rgba(15, 22, 32, 0.07), rgba(15, 22, 32, 0.07));
    background-size: 1px 100%, 1px 100%;
    background-position: left 0, right 0;
  }

  .s05-item:nth-child(3) {
    border-bottom: none;
  }

  .s05-item:last-child {
    border-bottom: 1px solid rgba(15, 22, 32, 0.07);
  }

  .s05-title {
    font-size: 22px;
  }

  .s05-desc {
    font-size: 15px;
  }

  .s05-actions {
    margin-top: 40px;
  }

  /* Section 05 overlay */
  .s05-overlay-panel {
    grid-template-columns: 1fr;
    gap: 30px;
    padding: 100px 24px 100px;
    overflow-y: auto;
    align-items: start;
    align-content: start;
  }

  .s05-overlay-title {
    font-size: 34px;
  }

  .s05-overlay-intro {
    font-size: 16px;
  }

  .s05-overlay-nav {
    bottom: 24px;
    right: 24px;
  }

  .s05-overlay-close {
    top: 24px;
    right: 24px;
  }

  /* Section 06 */
  .section-06 {
    padding: 60px 20px;
  }

  .s06-quote {
    font-size: 26px;
    margin-bottom: 30px;
  }

  .s06-slides {
    min-height: 280px;
  }

  .s06-controls {
    margin-top: 40px;
  }

  /* Section 07 */
  .section-07 {
    padding: 40px 20px 120px;
    overflow: hidden;
  }

  .s07-heading {
    font-size: 34px;
    white-space: normal;
  }

  .s07-body {
    font-size: 17px;
  }

  .s07-decoration {
    left: calc(50% - 400px);
    width: 800px;
  }

  /* Footer — switch from fixed to static on mobile */
  .section-08 {
    position: relative;
    z-index: 1;
  }

  .footer-spacer {
    display: none;
  }

  .s08-inner {
    padding: 80px 20px 60px;
  }

  .s08-cols {
    grid-template-columns: 1fr 1fr;
    gap: 40px 30px;
  }

  .s08-col-logo {
    grid-column: 1 / -1;
  }

  .s08-col-logo .s08-logo img {
    width: 140px;
    height: 37px;
  }

  .s08-bottom {
    grid-template-columns: 1fr;
    text-align: center;
    gap: 20px;
  }

  .s08-legal {
    justify-content: center;
    gap: 24px;
  }

  .s08-credit {
    text-align: center;
  }

  /* Intro loader */
  .intro-loader-logo {
    width: 280px;
  }
}

/* ═══════════════════════════════════════════
   TABLET PORTRAIT — 481px–768px
   Per-viewport hero framing overrides (phones ≤430 unaffected).
   ═══════════════════════════════════════════ */
@media (min-width: 481px) and (max-width: 768px) {
  /* 768 (iPad Mini portrait): drop the large pale "light" shape so its
     curve clears the right-hand subject's face. */
  .hero-vector-light {
    top: 350px; /* was 160px in the shared mobile block */
  }
}

/* ═══════════════════════════════════════════
   TABLET PORTRAIT (large) — 769px–1023px, portrait
   e.g. iPad Air / Pro 11 (820×1180). Excludes 1024 widths.
   ═══════════════════════════════════════════ */
@media (min-width: 769px) and (max-width: 1023px) and (orientation: portrait) {
  /* Drop the navy "dark" triangle so the left subject's face clears it. */
  .hero-vector-dark {
    top: 149px; /* was -251px (base) */
  }
  /* Move the hero text down to sit below the lowered diagonal. */
  .hero-content {
    top: 727px; /* was 327px (base) */
  }
  /* Raise the pale shapes so the blue corner shows. */
  .hero-vector-light,
  .hero-vector-accent {
    bottom: -300px; /* was -880px (base) */
  }
}

/* ═══════════════════════════════════════════
   TABLET PORTRAIT (XL) — 1024px–1199px, portrait
   e.g. iPad Pro 12.9 (1024×1366). Excludes 1024 landscape.
   ═══════════════════════════════════════════ */
@media (min-width: 1024px) and (max-width: 1199px) and (orientation: portrait) {
  /* Drop the navy "dark" triangle so the left subject's face clears it. */
  .hero-vector-dark {
    top: 149px; /* was -251px (base) */
  }
  /* Move the hero text down to sit below the lowered diagonal. */
  .hero-content {
    top: 727px; /* was 327px (base) */
  }
  /* Raise the pale shapes so the blue corner shows. */
  .hero-vector-light,
  .hero-vector-accent {
    bottom: -300px; /* was -880px (base) */
  }
}

/* ═══════════════════════════════════════════
   TABLET LANDSCAPE — 1024px–1279px, landscape
   e.g. iPad (1024×768). Laptops ≥1280 unaffected.
   ═══════════════════════════════════════════ */
@media (min-width: 1024px) and (max-width: 1279px) and (orientation: landscape) {
  .hero-vector-dark {
    top: -111px; /* was -251px (base) */
  }
  .hero-content {
    top: 467px; /* was 327px (base) */
  }
  /* Raise the pale shapes so the blue corner shows in this short viewport. */
  .hero-vector-light,
  .hero-vector-accent {
    bottom: -300px; /* was -880px (base) */
  }
}

/* ═══════════════════════════════════════════
   LAPTOP — 1280px–1439px
   e.g. 1280×800, 1366×768. Raise pale shapes into the short viewport.
   ═══════════════════════════════════════════ */
@media (min-width: 1280px) and (max-width: 1439px) {
  .hero-vector-light,
  .hero-vector-accent {
    bottom: -300px; /* was -880px (base) */
  }
}

/* ═══════════════════════════════════════════
   LAPTOP (large) — 1440px–1535px
   e.g. 1440×900. Raise pale shapes into view.
   ═══════════════════════════════════════════ */
@media (min-width: 1440px) and (max-width: 1535px) {
  .hero-vector-light,
  .hero-vector-accent {
    bottom: -300px; /* was -880px (base) */
  }
}

/* ═══════════════════════════════════════════
   DESKTOP — 1536px–1919px
   e.g. 1536×864. Raise pale shapes 200px into view.
   ═══════════════════════════════════════════ */
@media (min-width: 1536px) and (max-width: 1919px) {
  .hero-vector-light,
  .hero-vector-accent {
    bottom: -680px; /* was -880px (base) */
  }
}

/* ═══════════════════════════════════════════
   DESKTOP (Full HD) — 1920px–2559px
   e.g. 1920×1080. Raise pale shapes 200px into view.
   ═══════════════════════════════════════════ */
@media (min-width: 1920px) and (max-width: 2559px) {
  /* Navy "dark" triangle nudged 1px down from base; hero text stays. */
  .hero-vector-dark {
    top: -243px; /* was -251px (base) */
  }
  .hero-vector-light,
  .hero-vector-accent {
    bottom: -680px; /* was -880px (base) */
  }
}

/* ═══════════════════════════════════════════
   DESKTOP (QHD+) — 2560px and up
   e.g. 2560×1440. Drop navy + text 150px; raise pale shapes 100px.
   ═══════════════════════════════════════════ */
@media (min-width: 2560px) {
  .hero-vector-dark {
    top: -101px; /* was -251px (base) */
  }
  .hero-content {
    top: 477px; /* was 327px (base) */
  }
  .hero-vector-light,
  .hero-vector-accent {
    bottom: -780px; /* was -880px (base) */
  }
}

/* ═══════════════════════════════════════════
   SMALL MOBILE — max-width: 480px
   ═══════════════════════════════════════════ */
@media (max-width: 480px) {
  .hero-heading {
    font-size: 30px;
    line-height: 1;
  }

  .hero-heading .heading-light:first-child {
    display: block;
  }

  .hero-subtitle {
    font-size: 14px;
  }

  .hero-content {
    bottom: 25px;
    gap: 10px;
  }

  .s02-heading {
    font-size: 28px;
  }

  .s02-body {
    font-size: 16px;
  }

  .s03-card {
    min-height: 280px;
  }

  .s03-card-title {
    font-size: 26px;
  }

  .s03-card-text {
    font-size: 15px;
  }

  .s04-heading {
    font-size: 28px;
  }

  .s04-body {
    font-size: 16px;
  }

  .s05-heading {
    font-size: 28px;
  }

  .s06-quote {
    font-size: 22px;
  }

  .s06-slides {
    min-height: 260px;
  }

  .s07-heading {
    font-size: 28px;
  }

  .s07-body {
    font-size: 16px;
  }

  .s07-inner {
    gap: 30px;
  }

  .s08-cols {
    grid-template-columns: 1fr;
    gap: 40px;
  }

  .s08-col-logo {
    grid-column: 1;
  }

  .s08-address {
    font-size: 15px;
  }

  .btn-get-started,
  .btn-discover {
    font-size: 15px;
    padding: 0 24px;
    height: 44px;
  }

  .btn-arrow,
  .btn-arrow-dark {
    width: 44px;
    height: 44px;
  }

  .s05-overlay-title {
    font-size: 28px;
  }

  .s05-overlay-panel {
    padding: 90px 20px 90px;
  }
}