/* ===== Style.css Master Order =====
   This file follows page order as much as the current cascade allows:
   1. Global foundation: tokens, reset, wrappers, typography, buttons, nav
   2. Splash page
   3. Homepage: hero, who, stats, services, previous work, CTA, footer
   4. Shared helpers: animations, dropdowns, floating buttons
   5. About page
   6. Service page
   7. Portfolio exterior page
   8. Contact page
   9. Portfolio interior page

*/
/* ===== Global Foundation ===== */
:root {
  --olive: #BBBE64;
  --purple: #443850;
  --light: #EAF0CF;
  --white: #ffffff;
  --red: #ff2d2d;
}

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

html {
  overflow-x: hidden;
  max-width: 100%;
}

body {
  font-family: 'Didact Gothic', sans-serif;
  background: var(--white);
  color: #1f1f1f;
  overflow-x: hidden;
  width: 100%;
  max-width: 100%;
}

.site-scale-shell,
.site-scale-canvas {
  position: relative;
  width: 100%;
  max-width: 100%;
  min-height: 0;
  margin: 0;
  padding: 0;
  overflow: visible;
  display: block;
}

.site-scale-canvas {
  transform: none !important;
  transform-origin: initial;
  will-change: auto;
}

img,
video,
canvas,
svg {
  display: block;
  max-width: 100%;
}

a {
  color: inherit;
  text-decoration: none;
}

p,
.stat-item span,
.footer-links li,
.copyright {
 font-family: 'Didact Gothic', sans-serif;
 font-weight: 400;
}

h1{
	 font-family: 'Epilogue', sans-serif;
}
h2,
h3,
.menu,
.btn,
.word,
.stat-item strong,
.previous-head h2 {
  font-family: 'Outfit', sans-serif;
  font-weight: 700;
}

.page {
  width: calc(100% - 80px);
  margin-inline: auto;
}

.btn {
  display: inline-block;
  font-weight: 700;
  letter-spacing: 0.01em;
  padding: 0.8vw 2.2vw;
  font-size: 1.1vw;
  text-align: center;
}

.btn-outline {
  border: 0.12vw solid #ffffff;
  color: #ffffff;
  background: transparent;
  transition: color 0.2s ease, border-color 0.2s ease;
}


.nav .btn-outline {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  min-width: 10.8vw;
  padding: 0.9vw 1.8vw;
  font-size: 1.12vw;
  line-height: 1;
  font-weight: 700;
  box-sizing: border-box;
}

/* Splash Page */
body.splash-body {
  min-height: 100%;
  font-family: "Epilogue", sans-serif;
  background: var(--white);
  overflow: hidden;
}

body.splash-body .splash-page {
  position: relative;
  min-height: 100vh;
  overflow: hidden;
  isolation: isolate;
}

body.splash-body .splash-exit-mask {
  position: absolute;
  left: 0;
  right: 0;
  top: -24vh;
  height: 124vh;
  z-index: 20;
  background: var(--white);
  border-bottom-left-radius: 48% 12%;
  border-bottom-right-radius: 48% 12%;
  transform: translateY(calc(-100% - 16vh));
  pointer-events: none;
  will-change: transform;
}

body.splash-body .splash-page.is-exiting .splash-exit-mask {
  animation: splashExitCover 0.88s cubic-bezier(0.22, 1, 0.36, 1) forwards;
}

body.splash-body .splash-page.is-exiting .splash-logo,
body.splash-body .splash-page.is-exiting .enter-btn,
body.splash-body .splash-page.is-exiting .headline-top,
body.splash-body .splash-page.is-exiting .headline-bottom {
  animation: none;
}

body.splash-body .tool {
  --start-x: 0px;
  --start-y: 0px;
  --base-rotate: 0deg;
  position: absolute;
  z-index: 1;
  opacity: 0;
  pointer-events: none;
  transform: translate3d(0, 0, 0) rotate(var(--base-rotate));
  transform-origin: center center;
  filter: drop-shadow(0 1vw 1.8vw rgba(68, 56, 80, 0.14));
  transition: transform 0.7s cubic-bezier(0.22, 1, 0.36, 1);
  will-change: transform, opacity;
}

body.splash-body .tool.is-visible {
  animation: toolSlideIn 1.28s cubic-bezier(0.22, 1, 0.36, 1) forwards;
}

body.splash-body .tool-screwdriver {
  top: -10vw;
  left: -5.6vw;
  width: 32vw;
  --start-x: -30vw;
  --start-y: -14vw;
}

body.splash-body .tool-roller {
  top: -9vw;
  left: 60vw;
  width: 28vw;
  --start-x: 22vw;
  --start-y: -18vw;
}

body.splash-body .tool-drill {
  top: 5vw;
  right: -12vw;
  width: 30vw;
  --start-x: 28vw;
  --start-y: -10vw;
}

body.splash-body .tool-wrench {
  left: -6.4vw;
  bottom: -3vw;
  width: 25vw;
  --start-x: -24vw;
  --start-y: 20vw;
}

body.splash-body .tool-pliers {
  left: 8.8vw;
  bottom: -12.6vw;
  width: 25.6vw;
  --start-x: -10vw;
  --start-y: 24vw;
}

body.splash-body .tool-hammer {
  right: -15vw;
  bottom: -2vw;
  width: 35vw;
  --start-x: 22vw;
  --start-y: 18vw;
}

body.splash-body .splash-copy {
  position: absolute;
  inset: 0;
  z-index: 2;
  display: grid;
  place-items: center;
  pointer-events: none;
}

body.splash-body .headline {
  position: absolute;
  display: flex;
  align-items: flex-end;
  gap: 0;
  line-height: 0.5;
}

body.splash-body .headline-top {
  top: 23.8vh;
  left: 17.6vw;
}

body.splash-body .headline-bottom {
  top: 69vh;
  right: 17.7vw;
}

body.splash-body .headline-small,
body.splash-body .headline-large,
body.splash-body .splash-logo,
body.splash-body .enter-btn {
  opacity: 0;
}

body.splash-body .headline-small {
  font-family: "Epilogue", sans-serif;
  font-size: 4.7vw;
  font-weight: 500;
  color: var(--purple);
  transform: translateX(0);
}

body.splash-body .headline-large {
  font-family: "Epilogue", sans-serif;
  font-size: 10vw;
  font-weight: 700;
  color: var(--olive);
  transform: translateX(0);
}

body.splash-body .headline-top .headline-small,
body.splash-body .headline-bottom .headline-small {
  transform: translateX(-1.1vw);
}

body.splash-body .headline-top .headline-large,
body.splash-body .headline-bottom .headline-large {
  transform: translateX(1.1vw);
}

body.splash-body .headline-top.is-visible .headline-small,
body.splash-body .headline-top.is-visible .headline-large,
body.splash-body .headline-bottom.is-visible .headline-small,
body.splash-body .headline-bottom.is-visible .headline-large {
  animation: phraseFadeIn 0.95s ease forwards;
}

body.splash-body .headline-top.is-revealed .headline-small,
body.splash-body .headline-top.is-revealed .headline-large,
body.splash-body .headline-bottom.is-revealed .headline-small,
body.splash-body .headline-bottom.is-revealed .headline-large,
body.splash-body .splash-logo.is-revealed,
body.splash-body .enter-btn.is-revealed {
  opacity: 1;
}

body.splash-body .splash-logo {
  position: absolute;
  z-index: 3;
  top: 39.6vh;
  left: 50%;
  width: 15vw;
  min-width: 0;
  transform: translateX(-50%);
}

body.splash-body .splash-logo.is-visible {
  animation: logoFadeIn 0.9s ease forwards;
}

body.splash-body .enter-btn {
  position: absolute;
  z-index: 3;
  top: 86.2vh;
  left: 50%;
  transform: translateX(-50%);
  width: 250px;
  min-width: 250px;
  padding: 0.95vw 3vw;
  background: var(--purple);
  color: var(--white);
  text-decoration: none;
  font-family: "Outfit", sans-serif;
  font-size: 20px;
  font-weight: 600;
  line-height: 1;
  letter-spacing: 0.02em;
  text-align: center;
  pointer-events: auto;
  border: 0;
  transition: transform 0.5s cubic-bezier(0.22, 1, 0.36, 1), color 0.5s cubic-bezier(0.22, 1, 0.36, 1), box-shadow 0.5s cubic-bezier(0.22, 1, 0.36, 1), background-color 0.5s cubic-bezier(0.22, 1, 0.36, 1);
}

body.splash-body .enter-btn.is-visible {
  animation: buttonFadeIn 0.9s ease forwards;
}

body.splash-body .enter-btn:hover {
  color: var(--purple);
  background: transparent;
  box-shadow: inset 0 0 0 0.22vw var(--gray, #7F8693);
  transform: translateX(-50%) translateY(-0.2vw) scale(1.03);
}

body.splash-body .splash-page.is-floating .headline-top {
  animation: copyFloat 4.8s ease-in-out infinite;
}

body.splash-body .splash-page.is-floating .headline-bottom {
  animation: copyFloat 4.8s ease-in-out 0.45s infinite;
}

@keyframes splashExitCover {
  0% {
    transform: translateY(calc(-100% - 16vh));
  }
  100% {
    transform: translateY(0);
  }
}

@keyframes toolSlideIn {
  0% {
    opacity: 0;
    transform: translate3d(var(--start-x), var(--start-y), 0) rotate(var(--base-rotate)) scale(1);
  }
  8% {
    opacity: 1;
  }
  100% {
    opacity: 1;
    transform: translate3d(0, 0, 0) rotate(var(--base-rotate)) scale(1);
  }
}

@keyframes phraseFadeIn {
  0% {
    opacity: 0;
  }
  100% {
    opacity: 1;
  }
}

@keyframes logoFadeIn {
  0% {
    opacity: 0;
    transform: translateX(-50%) scale(0.92);
  }
  100% {
    opacity: 1;
    transform: translateX(-50%) scale(1);
  }
}

@keyframes buttonFadeIn {
  0% {
    opacity: 0;
    transform: translateX(-50%) translateY(1.2vw);
  }
  100% {
    opacity: 1;
    transform: translateX(-50%) translateY(0);
  }
}

@keyframes copyFloat {
  0%, 100% {
    transform: translateY(0);
  }
  50% {
    transform: translateY(-0.55vw);
  }
}

@media (max-width: 1024px) {
  body.splash-body .headline-top {
    top: 17vh;
    left: 8vw;
  }

  body.splash-body .headline-bottom {
    top: 67vh;
    right: 8vw;
  }

  body.splash-body .headline-small {
    font-size: clamp(34px, 8vw, 56px);
  }

  body.splash-body .headline-large {
    font-size: clamp(74px, 16vw, 130px);
  }

  body.splash-body .splash-logo {
    top: 43vh;
    width: min(38vw, 300px);
  }

  body.splash-body .enter-btn {
    top: 84vh;
    width: 250px;
    min-width: 250px;
    padding: 16px 42px;
    font-size: 20px;
  }
}
.btn-outline:hover {
  color: #443850;
  border-color: #443850;
}
.btn-dark {
	width: auto;
  color: #ffffff;
  background: var(--purple);
	  font-weight: 600;
}

.btn-light {
  color: var(--purple);
  background: var(--light);
  width: 16vw;
  min-width: 16vw;
  padding: 1vw 3.2vw;
  font-size: 1.15vw;
  border: 0.12vw solid transparent;
  transition: color 0.2s ease, background-color 0.2s ease, border-color 0.2s ease;
}

.btn-light:hover {
  color: #ffffff;
  background: transparent;
  border-color: #BBBE64;
}

/* ===== Homepage: Hero ===== */
.hero {
  position: relative;
  min-height: 100vh;
  background: transparent;
  border-radius: 0 0 50% 50% / 0 0 40% 40%;
  overflow: hidden;
  padding-top: 7.5vw;
}

@media (min-width: 1201px) {
  body:not(.about-page):not(.service-page):not(.contact-page):not(.portfolio-exterior-page):not(.portfolio-interior-page) .hero {
    min-height: min(100vh, 64vw);
    height: min(100vh, 64vw);
  }
}

.hero::before {
  content: "";
  position: absolute;
  inset: 0;
  background: linear-gradient(180deg, rgba(68, 56, 80, 0.20) 0%, rgba(187, 190, 100, 0.00) 100%);
  z-index: 1;
  pointer-events: none;
  opacity: 0;
  animation: heroOverlayFadeIn 1.1s ease 0.9s forwards;
}

.hero::after {
  content: "";
  position: absolute;
  inset: 0;
  background: #BBBE64;
  z-index: 3;
  pointer-events: none;
  animation: heroOliveDrop 1.35s cubic-bezier(0.22, 1, 0.36, 1) forwards;
}

.hero-video {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  object-fit: cover;
  object-position: center 20%;
  z-index: 0;
  pointer-events: none;
  opacity: 0;
  animation: heroVideoFadeIn 0.7s ease 0.72s forwards;
}

.nav {
  position: fixed;
  top: 0;
  left: 0;
  right: 0;
  width: 100%;
  margin-inline: 0;
  padding: 0.5vw 32px;
  box-sizing: border-box;
  z-index: 10000;
  display: grid;
  grid-template-columns: minmax(0, 1fr) auto minmax(0, 1fr);
  align-items: center;
  transition: background-color 0.25s ease, box-shadow 0.25s ease, backdrop-filter 0.25s ease;
}

.nav-progress {
  position: absolute;
  left: 0;
  right: 0;
  bottom: -0.18vw;
  height: 0.22vw;
  background: #BBBE64;
  transform: scaleX(0);
  transform-origin: left center;
  opacity: 0;
  transition: transform 0.08s linear, opacity 0.24s ease;
  pointer-events: none;
  z-index: 0;
}

.nav > a:first-child,
.nav > .btn-outline {
  position: relative;
  z-index: 2;
  opacity: 0;
  transform: translateY(-1.1vw) scale(0.985);
  filter: blur(4px);
  animation: headerSlideDownSoft 0.72s cubic-bezier(0.2, 0.8, 0.2, 1) forwards;
}

.menu > li {
  position: relative;
  z-index: 2;
  opacity: 0;
  transform: translateY(-1.1vw) scale(0.985);
  filter: blur(4px);
  animation: headerSlideDownSoft 0.72s cubic-bezier(0.2, 0.8, 0.2, 1) forwards;
}

.nav > a:first-child {
  justify-self: start;
  animation-delay: 0.78s;
}

.menu > .menu-home { animation-delay: 0.86s; }
.menu > .menu-about { animation-delay: 0.92s; }
.menu > .menu-service { animation-delay: 0.98s; }
.menu > .menu-dropdown { animation-delay: 1.04s; }
.menu > .menu-contact { animation-delay: 1.1s; }
.menu > .menu-portfolio-mobile {
  animation: none;
  opacity: 1;
  transform: none;
  filter: none;
}

.nav > .btn-outline {
  justify-self: end;
  animation-delay: 1.16s;
}

.logo {
    width: 11vw;
    height: auto;
}

.menu {
  list-style: none;
  display: flex;
  gap: 3.4vw;
  justify-self: center;
  color: #ffffff;
  font-size: 1.22vw;
  font-weight: 700;
}

.menu .active {
  color: #BBBE64;
}

.menu .active::after {
  transform: scaleX(1);
  background: #ffffff;
}

.menu a {
  position: relative;
  color: #ffffff;
}

.menu a::after {
  content: "";
  position: absolute;
  left: 0;
  bottom: -0.35vw;
  width: 100%;
  height: 0.12vw;
  background: #BBBE64;
  transform: scaleX(0);
  transform-origin: left;
  transition: transform 0.22s ease;
}

.menu a:hover {
  color: #443850;
}

.menu a:hover::after {
  transform: scaleX(1);
  background: #ffffff;
}

.menu .active:hover {
  color: #BBBE64;
}

.menu .active:hover::after {
  transform: scaleX(1);
  background: #ffffff;
}

.nav.is-sticky {
  background: rgba(255, 255, 255, 0.88);
  backdrop-filter: blur(6px);
  box-shadow: 0 2px 12px rgba(0, 0, 0, 0.08);
}

.nav.is-sticky .menu a {
  color: #443850;
}

.nav.is-sticky .menu .active {
  color: #BBBE64;
}

.nav.is-sticky .menu a::after {
  background: #BBBE64;
}

.nav.is-sticky .menu a:hover {
  color: #BBBE64;
}

.nav.is-sticky .menu a:hover::after {
  transform: scaleX(1);
  background: #443850;
}

.nav.is-sticky .menu .active::after {
  transform: scaleX(1);
  background: #443850;
}

.nav.is-sticky .menu .active:hover {
  color: #BBBE64;
}

.nav.is-sticky .menu .active:hover::after {
  transform: scaleX(1);
  background: #443850;
}

.nav.is-sticky .btn-outline {
  border-color: #BBBE64;
  color: #BBBE64;
}

.nav.is-sticky .btn-outline:hover {
  border-color: #443850;
  color: #443850;
}
.nav.is-sticky 
.nav .btn-outline {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  min-width: 12.6vw;
  padding: 0.95vw 1.85vw;
  font-size: 1.12vw;
  line-height: 1;
  font-weight: 700;
  box-sizing: border-box;
}
.btn-outline:hover {
  border-color: #443850;
  color: #443850;
}

.hero-content {
  color: #ffffff;
  text-align: center;
  padding-top: 10.8vw;
  position: relative;
  z-index: 4;
	
}

.hero-content h1 {
  	margin-top: 2.4vw;
    font-size: 10vw;
    line-height: 1;
    opacity: 0;
    transform: translateY(3.8vw);
    animation: heroTitleLiftIn 1s cubic-bezier(0.22, 1, 0.36, 1) 1.55s forwards;
}

.hero-title-text {
  position: relative;
  display: inline-block;
  color: #443850;
	
}

.hero-title-text::before {
  content: "MUHIBAH";
  position: absolute;
  inset: 0;
  background: linear-gradient(90deg, rgba(187, 190, 100, 0) 0%, rgba(187, 190, 100, 0.82) 28%, rgba(234, 240, 207, 1) 50%, rgba(187, 190, 100, 0.98) 68%, rgba(187, 190, 100, 0) 100%);
  background-size: 26% 100%;
  background-repeat: no-repeat;
  background-position: -30% 0;
  color: transparent;
  -webkit-background-clip: text;
  background-clip: text;
  opacity: 0;
  filter: drop-shadow(0 0 0.55vw rgba(187, 190, 100, 0.55));
  animation: heroTitleBeam 1.15s cubic-bezier(0.22, 1, 0.36, 1) 1.88s forwards;
}

.hero-title-text::after {
  content: "MUHIBAH";
  position: absolute;
  inset: 0;
  color: #ffffff;
  clip-path: inset(0 100% 0 0);
  animation: heroTitleSweep 1.05s cubic-bezier(0.22, 1, 0.36, 1) 1.95s forwards;
}

.hero-content p {
    margin-top: 3vw;
    font-size: 2.55vw;
  font-weight: 700;
  line-height: 1.12;
  	font-family: 'Epilogue', sans-serif;
    opacity: 0;
    transform: translateY(1.2vw);
    animation: heroTaglineFadeUp 0.8s ease 2.1s forwards;
}

.hero-bottom-curve {
  display: none;
}

/* ===== Homepage: Who We Are ===== */
.who {
  position: relative;
  margin-top: 1.8vw;
  display: grid;
  grid-template-columns: 1.04fr 0.96fr;
  gap: 6vw;
  align-items: center;
}

.who-grid {
  position: relative;
  min-height: 37vw;
	margin-top:80px;
}

.img-frame {
  border: 0.38vw solid var(--olive);
  object-fit: cover;
}

.img-1 {
  width: 15vw;
  height: 20.5vw;
  position: absolute;
  left: 0.3vw;
  top: 0.4vw;
  opacity: 0;
  transform: translateY(2.2vw);
  transition: opacity 0.75s ease, transform 0.75s ease;
}

.img-2 {
width: 15vw;
  height: 20.5vw;
  position: absolute;
  left: 16.5vw;
  top: 15vw;
  opacity: 0;
  transform: translateY(-2.2vw);
  transition: opacity 0.75s ease 0.06s, transform 0.75s ease 0.06s;
}

.img-3 {
 width: 15vw;
  height: 20.5vw;
  position: absolute;
  left: 32.8vw;
  top: 0;
  opacity: 0;
  transform: translateY(2.2vw);
  transition: opacity 0.75s ease 0.12s, transform 0.75s ease 0.12s;
}

.img-3-wrap {
  background: var(--olive);
  padding: 0.42vw;
  clip-path: polygon(0 0, 50% 0, 100% 29%, 100% 100%, 0 100%);
}

.img-3-inner {
  width: 100%;
  height: 100%;
  object-fit: cover;
  clip-path: polygon(0 0, 50% 0, 100% 29%, 100% 100%, 0 100%);
}

.word {
  position: absolute;
  color: var(--olive);
  font-size: 4.85vw;
  font-weight: 700;
  opacity: 0;
  transition: opacity 0.7s ease;
}

.we {
  left: 20vw;
  top: 4.2vw;
}

.who-word {
  left:1.5vw;
  top: 24vw;
}

.are {
  left: 35.9vw;
  top: 24vw;
}

.who-text {
	margin-top: 120px;
  position: relative;
  min-height: 37vw;
  padding: 5.8vw 1.8vw 2.2vw 2.7vw;
  display: flex;
  flex-direction: column;
  justify-content: flex-start;
  align-items: flex-start;

}

.frame-box {
  position: relative;
  border-right: 0.24vw solid var(--olive);
}

.frame-box::before {
  content: '';
  position: absolute;
  top: 0;
  right: 0;
  width: 36%;
  height: 0.24vw;
  background: var(--olive);
}

.frame-box::after {
  content: '';
  position: absolute;
  left: 26%;
  right: 0;
  bottom: 0;
  height: 0.24vw;
  background: var(--olive);
}

.who-text p {
  max-width: 31vw;
  font-size: 1.08vw;
  line-height: 1.45;
	margin-top: 20px;
  margin-bottom: 3vw;
  text-align: justify;
  opacity: 0;
  transition: opacity 0.7s ease 0.22s;
}

.who-text .btn-dark {
  padding: 0.95vw 3vw;
   font-size: 1.15vw;
	width: 360px;
  min-width: 300px;
  max-width: 360px;
  font-weight: 600;
  align-self: flex-start;
	margin-top: 100px;
}

.btn-learn {
	margin-left: 0;
  border: 0.22vw solid transparent;
  box-sizing: border-box;
  transition: background-color 0.2s ease, color 0.2s ease, border-color 0.2s ease, opacity 0.7s ease 0.34s;
  opacity: 0;
}

.who-text .about-learn {
  width: 280px !important;
  min-width: 280px !important;
  max-width: 280px !important;
  
}

@media (min-width: 1025px) {
  .who-text .about-learn {
    display: inline-flex !important;
    align-items: center;
    justify-content: center;
    width: 280px !important;
    min-width: 280px !important;
    max-width: 280px !important;
    box-sizing: border-box;
  }
}

.btn-learn:hover {
  background: #FFFFFF;
  color: #443850;
  border-color: #8E95A3;
}

.mini-logo {
  position: absolute;
  right: 1.1vw;
  bottom: 1vw;
  width: 4.8vw;
  height: auto;
  z-index: 4;
}

.about-hammer {
  position: absolute;
  right: -35.7vw;
  top: -15.2vw;
  width: 35vw;
  height: auto;
  z-index: 6;
  pointer-events: none;
  opacity: 0;
  transform-origin: 20% 60%;
  transform: translateX(7vw) translateY(-26vw) scaleX(-1) rotate(-88deg);
  transition: opacity 0.18s ease-out;
  will-change: transform, opacity;
  backface-visibility: hidden;
}

.who.hammer-active .about-hammer {
  opacity: 1;
  animation: hammerSmashIn 0.96s ease-out forwards;
}

.who.hammer-idle .about-hammer {
  animation: hammerSway 2.3s ease-in-out infinite alternate;
}

/* ===== Homepage: Stats ===== */
.stats {
  position: relative;
  margin-top: 1.5vw;
  background: #443850;
  padding: 3vw 0;
  overflow: visible;
  z-index: 3;
}

.stats-roller {
  position: absolute;
  left: -10.8vw;
  top: -15.6vw;
  width: 25.6vw;
  height: auto;
  z-index: 12;
  pointer-events: none;
  opacity: 0;
  transform-origin: 26% 82%;
  transform: translateX(-5.1vw) translateY(2.8vw) rotate(68deg);
  transition: opacity 0.3s ease, transform 1.06s cubic-bezier(0.22, 1, 0.36, 1);
  will-change: transform, opacity;
}

.stats.roller-active .stats-roller {
  opacity: 1;
  transform: translateX(0) translateY(0) rotate(38deg);
}

.stats.roller-retract .stats-roller {
  opacity: 1;
  animation: rollerRetract 1.08s cubic-bezier(0.22, 1, 0.36, 1) forwards;
}

.stats.roller-idle .stats-roller {
  animation: rollerSway 2.35s ease-in-out infinite alternate;
}

.stats::before {
  content: "";
  position: absolute;
  inset: 0;
  background-image: url('Images/homepage/background_logo.png');
  background-repeat: no-repeat;
  background-position: left center;
  background-size: auto 300%;
  z-index: 6;
  opacity: 0.8;
  pointer-events: none;
}

.stats-grid {
  position: relative;
  z-index: 1;
  padding-top: 0.9vw;
  display: grid;
  grid-template-columns: repeat(4, 1fr);
  text-align: center;
  color: var(--white);
}

.stat-item {
  opacity: 0;
  transform: translateY(2vw) scale(0.96);
}

.stat-item strong {
  position: relative;
  display: inline-block;
  color: var(--olive);
  font-size: 6vw;
  line-height: 1;
  isolation: isolate;
  z-index: 1;
	
}

.stat-item strong.stat-light {
  color: #EAF0CF;
}

.stat-item strong::after {
  content: "";
  position: absolute;
  left: 0;
  right: 0;
  top: 63%;
  height: 56%;
  background: #443850;
  opacity: 1;
  pointer-events: none;
  z-index: 4;
}

.stat-item span {
  position: relative;
  z-index: 5;
  display: block;
  margin-top: 5px;
  font-size: 1.3vw;
}

.stats.is-visible .stat-item {
  animation: statBounceIn 0.82s cubic-bezier(0.22, 1, 0.36, 1) forwards;
}

.stats.is-visible .stat-item:nth-child(2) {
  animation-delay: 0.08s;
}

.stats.is-visible .stat-item:nth-child(3) {
  animation-delay: 0.16s;
}

.stats.is-visible .stat-item:nth-child(4) {
  animation-delay: 0.24s;
}

/* ===== Homepage: Services Preview ===== */
.services {
  position: relative;
  padding: 5.4vw 0 4.2vw;
  display: grid;
  grid-template-columns: 0.98fr 1.02fr;
  gap: 3.2vw;
  align-items: start;
}

.services::after {
  content: "";
  position: absolute;
  left: 50%;
  bottom: -5vw;
  width: 100vw;
  height: 7.2vw;
  transform: translateX(-50%);
  background: var(--purple);
  z-index: 10;
  pointer-events: none;
}

.services-text,
.services-media {
  position: relative;
  z-index: 8;
}

.services h2 {
  font-size: 5vw;
  line-height: 0.94;
  color: var(--purple);
  margin-bottom: 3.1vw;
}

.services h2 span {
  color: var(--olive);
}

.services-text p {
	margin-top: 0;
	margin-left: 0;
  width: 35vw;
  font-size: 1.02vw;
  line-height: 1.36;
  text-align: justify;
  margin-bottom: 2.6vw;
}

.services-media {
  position: relative;
  min-height: 40vw;
}

.services-media h3 {
  color: var(--olive);
  font-size: 3.5vw;
  font-weight: 700;
}

.interior {
	margin-left: -2vw;
	margin-top: 2vw;
  position: absolute;
  left: 6.4vw;
  top: 1vw;
}

.exterior {
	margin-right: 0;
	margin-bottom: 0;
  position: absolute;
  right: 7.4vw;
  bottom: 6.5vw;
}

.svc-a {
	margin-left: 0;
	margin-top: 0;
  width: 21vw;
  height: 26vw;
  position: absolute;
  left: 0;
  top: 9vw;
}

.svc-b {
	margin-right: 0;
 width: 21vw;
  height: 26vw;
  position: absolute;
  right: 3.5vw;
  top: 1.2vw;
}


.services-text h2,
.services-text p,
.services-text .btn-dark,
.interior,
.exterior,
.svc-a,
.svc-b {
  opacity: 0;
}

.services-text h2,
.services-text p,
.services-text .btn-dark {
  transform: translateY(1.6vw);
  transition: opacity 0.72s ease, transform 0.72s ease;
}

.interior,
.svc-a {
  transform: translateY(2.2vw);
  transition: opacity 0.78s ease, transform 0.78s ease;
}

.exterior,
.svc-b {
  transform: translateY(-2.2vw);
  transition: opacity 0.78s ease, transform 0.78s ease;
}

.services.is-visible .services-text h2 {
  opacity: 1;
  transform: translateY(0);
  transition-duration: 1.02s;
}

.services.is-visible .services-text p {
  opacity: 1;
  transform: translateY(0);
  transition-delay: 0.1s;
  transition-duration: 1.02s;
	
}

.services.is-visible .services-text .btn-dark {
  opacity: 1;
  transform: translateY(0);
  transition-delay: 0.2s;
  transition-duration: 1.02s;
	width: 200px;
}

.services.is-visible .interior,
.services.is-visible .svc-a,
.services.is-visible .exterior,
.services.is-visible .svc-b {
  opacity: 1;
  transform: translateY(0);
  transition-duration: 1.08s;
}

.services.is-visible .interior,
.services.is-visible .svc-a {
  transition-delay: 0.08s;
}

.services.is-visible .exterior,
.services.is-visible .svc-b {
  transition-delay: 0.16s;
}

.services-text .btn-dark {
  min-width: 16vw;
  padding: 1vw 3.2vw;
  font-size: 1.15vw;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  margin-left: 0 !important;
  border: 0.22vw solid transparent;
  box-sizing: border-box;
  transition: background-color 0.05s linear, color 0.05s linear, border-color 0.05s linear, opacity 0.18s ease, transform 0.18s ease !important;
}

.services-text .btn-dark:hover {
  background: #FFFFFF;
  color: #443850;
  border-color: #8E95A3;
}

.services-media > .svc-a,
.services-media > .svc-b,
.services-media > .interior,
.services-media > .exterior {
  will-change: transform, filter;
  transform-origin: center center;
}

.services.is-floating .svc-a {
  animation: servicesFloatOne 4.8s ease-in-out infinite;
}

.services.is-floating .svc-b {
  animation: servicesFloatThree 5s ease-in-out infinite 0.08s;
}

.services.is-floating .interior {
  animation: servicesFloatWordOne 4.6s ease-in-out infinite 0.05s;
}

.services.is-floating .exterior {
  animation: servicesFloatWordThree 4.9s ease-in-out infinite 0.1s;
}

.services.is-floating .svc-a:hover,
.services.is-floating .svc-b:hover,
.services.is-floating .interior:hover,
.services.is-floating .exterior:hover {
  animation: none;
  translate: 0 -1vw;
  transform: scale(1.1);
  z-index: 12;
  filter: drop-shadow(0 1.3vw 2.3vw rgba(68, 56, 80, 0.22));
}

.services-wrench-wrap {
  position: absolute;
  left: 23vw;
  bottom: -0.2vw;
	height: 23vw;
  width: 24vw;
  pointer-events: none;
  z-index: 9;
}

.services-wrench {
  display: block;
  width: 15.5vw;
  height: auto;
  z-index: 9;
  pointer-events: none;
  opacity: 0;
  transform-origin: 50% 90%;
  transform: translateX(-2.2vw) translateY(7.2vw) rotate(-88deg);
  will-change: transform, opacity;
  backface-visibility: hidden;
}

.services.wrench-active .services-wrench {
  opacity: 1;
  animation: wrenchEnter 1.02s cubic-bezier(0.22, 1, 0.36, 1) forwards;
}

.services.wrench-idle .services-wrench {
  animation: wrenchSway 2.1s ease-in-out infinite alternate;
}
/* ===== Homepage: Previous Work ===== */
.previous {
  position: relative;
  z-index: 11;
  background: var(--purple);
  color: var(--white);
  padding: 2.6vw 0 3.2vw;
}

.previous-head,
.slider-window,
.previous-bottom {
  position: relative;
  z-index: 1;
}

.previous-screwdriver {
  position: absolute;
  right: -11vw;
  top: 24.8vw;
  width: 24vw;
  height: auto;
  z-index: 7;
  pointer-events: none;
  opacity: 0;
  transform-origin: 88% 82%;
  transform: translateX(6vw) translateY(-22vw) rotate(58deg);
  will-change: transform, opacity;
}

.previous.screwdriver-active .previous-screwdriver {
  opacity: 1;
  animation: screwdriverEnter 1.08s cubic-bezier(0.22, 1, 0.36, 1) 0.12s forwards;
}

.previous.screwdriver-retract .previous-screwdriver {
  opacity: 1;
  animation: screwdriverRetract 1.08s cubic-bezier(0.22, 1, 0.36, 1) forwards;
}

.previous.screwdriver-idle .previous-screwdriver {
  animation: screwdriverSway 2.3s ease-in-out infinite alternate;
}

.previous-head {
  display: grid;
  grid-template-columns: 0.88fr 1.12fr;
  gap: 3vw;
  align-items: start;
  margin-bottom: 2vw;
}

.previous-head p {
	margin-top: 0;
  max-width: 31vw;
  font-size: 0.98vw;
  line-height: 1.32;
  padding-right: 0;
  padding-left: 2.6vw;
  padding-top: 4.2vw;
  text-align: justify;
}

.previous-head h2 {
	margin-right: -50px;
  color: var(--white);
  background: var(--olive);
  font-size: 70px;
  padding: 1.25vw 3.2vw 1.35vw 3.4vw;
  line-height: 1;
  font-weight: 800;
  clip-path: polygon(8% 0, 100% 0, 100% 100%, 0 100%, 0 58%);
}

@media (min-width: 1201px) {
  .previous-head h2 {
    margin-right: 0;
    width: 120%;
    font-size: clamp(54px, 4.6vw, 70px);
    white-space: nowrap;
  }
}

.slider-window {
  overflow: hidden;
  width: 100%;
}

.slider-track {
  --slide-width: 20.2vw;
  --slide-gap: 1.1vw;
  --slide-count: 12;
  display: flex;
  width: max-content;
  gap: var(--slide-gap);
  animation: previousWorkSlide 70s linear infinite;
  transition: gap 0.78s cubic-bezier(0.22, 1, 0.36, 1);
}

.slide {
  width: var(--slide-width);
  height: 16.2vw;
  flex: 0 0 var(--slide-width);
  overflow: hidden;
  transition: flex-basis 0.78s cubic-bezier(0.22, 1, 0.36, 1), width 0.78s cubic-bezier(0.22, 1, 0.36, 1), transform 0.78s cubic-bezier(0.22, 1, 0.36, 1), filter 0.78s cubic-bezier(0.22, 1, 0.36, 1);
}

.slide img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  transition: transform 0.78s cubic-bezier(0.22, 1, 0.36, 1);
}

.slider-window:hover .slider-track {
  animation-play-state: paused;
}

.slider-window:hover .slide {
  width: calc(var(--slide-width) * 0.9);
  flex-basis: calc(var(--slide-width) * 0.9);
}

.slider-window:hover .slide:hover {
  width: calc(var(--slide-width) * 1.28);
  flex-basis: calc(var(--slide-width) * 1.28);
  transform: translateY(-0.2vw);
  filter: drop-shadow(0 0.85vw 1.7vw rgba(0, 0, 0, 0.18));
}

.slider-window:hover .slide:hover img {
  transform: scale(1.04);
}

.previous-bottom {
  margin-top: 1.4vw;
  display: flex;
  justify-content: center;
  align-items: center;
  gap: 4.8vw;
}

.previous-explore-btn {
  width: 23vw;
  min-width: 23vw;
  padding: 1vw 1.8vw;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 0.28vw;
  font-size: 1.05vw;
  line-height: 1;
  white-space: nowrap;
}

.previous-explore-highlight {
  color: var(--olive);
}



.previous-head p,
.slider-window,
.previous-bottom {
  opacity: 0;
  transform: translateY(1.8vw);
  transition: opacity 0.78s ease, transform 0.78s ease;
}

.previous-head h2 {
  opacity: 0;
  transform: translateX(8vw);
  transition: opacity 0.82s ease, transform 0.82s cubic-bezier(0.22, 1, 0.36, 1);
}

.previous.is-visible .previous-head p {
  opacity: 1;
  transform: translateY(0);
}

.previous.is-visible .previous-head h2 {
  opacity: 1;
  transform: translateX(0);
}

.previous.is-visible .slider-window {
  opacity: 1;
  transform: translateY(0);
  transition-delay: 0.12s;
}

.previous.is-visible .previous-bottom {
  opacity: 1;
  transform: translateY(0);
  transition-delay: 0.22s;
}
.cta {
  position: relative;
  z-index: 6;
  display: flex;
  justify-content: center;
  margin-top: 0.8vw;
  margin-bottom: -6.8vw;
  transform: translateY(3.4vw);
}

.cta-card {
  position: relative;
  z-index: 6;
  width: 78%;
  min-height: 17vw;
  margin-inline: auto;
  background: url('Images/homepage/567d1b14-e99d-4c92-8e2e-8dac55b8539c.png') center/cover no-repeat;
  clip-path: polygon(6% 0, 85% 0, 100% 40%, 100% 100%, 0 100%, 0 0);
  display: flex;
  flex-direction: column;
  justify-content: center;
  align-items: center;
  text-align: center;
  padding: 2.2vw 1.4vw;
  overflow: hidden;
}

.cta-card::before {
  content: "";
  position: absolute;
  inset: 0;
  background: rgba(187, 190, 100, 0.50);
  z-index: 1;
}

.cta-card::after {
  content: "";
  position: absolute;
  inset: 1.6vw 3.8vw 1.8vw 3.8vw;
  background: rgba(68, 56, 80, 0.30);
  clip-path: polygon(6% 0, 85% 0, 100% 40%, 100% 100%, 0 100%, 0 0);
  z-index: 2;
}

.cta-card > * {
  position: relative;
  z-index: 3;
}

.cta-card h2 {
  color: var(--white);
  font-size: 3vw;
  line-height: 1.16;
  margin-bottom: 1.4vw;
}

.cta-card .btn-dark {
  width: 16vw;
  min-width: 16vw;
  padding: 0.95vw 2.6vw;
  font-size: 1.15vw;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  border: 0.14vw solid transparent;
  transition: color 0.2s ease, background-color 0.2s ease, border-color 0.2s ease;
}

.cta-card .btn-dark:hover {
  color: #FFFFFF;
  background: transparent;
  border-color: #7F8693;
}


.cta-card {
  opacity: 0;
  transition: opacity 0.9s ease;
}

.cta.is-visible .cta-card {
  opacity: 1;
}
.footer {
	margin-top: 250px;
  position: relative;
  z-index: 1;
  background: var(--olive);
  color: var(--white);
  padding: 13.2vw 0 0.8vw;
}

.footer-top-curve {
  position: absolute;
  left: -6%;
  right: -6%;
  top: -12.8vw;
  height: 18vw;
  background: var(--white);
  border-radius: 0 0 50% 50% / 0 0 50% 50%;
  z-index: 0;
}

.footer-grid {
  position: relative;
  z-index: 1;
  width: 68%;
  margin-inline: auto;
  display: flex;
  justify-content: space-between;
  align-items: flex-end;
  gap: 3vw;
}

.footer-logo {
  width: 9.4vw;
  margin-bottom: 0.7vw;
}

.footer p {
  font-size: 1.24vw;
  line-height: 1.45;
}

.socials {
  margin-top: 1vw;
  display: flex;
  gap: 0.8vw;
}

.socials a {
  width: 1.45vw;
  height: 1.45vw;
}

.socials img {
  width: 100%;
  height: 100%;
  padding: 0;
  background: transparent;
  border-radius: 0;
  display: block;
  box-sizing: border-box;
  object-fit: contain;
}

.footer-links h3 {
  font-size: 2.7vw;
  margin-bottom: 0.8vw;
}

.footer-links {
  margin-left: 0;
}

.footer-links ul {
  list-style: none;
}

.footer-links li {
  margin-top: 0.9vw;
  font-size: 1.12vw;
}

.footer-links a {
  transition: color 0.2s ease;
}

.footer-links a:hover {
  color: #443850;
}

.copyright {
  border-top: 0.1vw solid rgba(255, 255, 255, 0.56);
  display: block;
  width: 100%;
  font-size: 8px;
  margin-top: 1vw;
  text-align: center;
  padding-top: 0.5vw;
  line-height: 1.1;
}

.copyright-text {
  display: inline-block;
  transform: scale(0.62);
  transform-origin: center top;
}

.float-up,
.float-wa {
  position: fixed;
  right: 1.2vw;
  width: 4.9vw;
  height: 4.9vw;
  border-radius: 50%;
  display: grid;
  place-items: center;
  z-index: 20;
  transition: transform 0.22s ease, box-shadow 0.22s ease;
}

.float-up:hover,
.float-wa:hover {
  box-shadow: 0 0.8vw 1.8vw rgba(0, 0, 0, 0.18);
}

.float-up:hover {
  animation: floatPopWiggle 0.62s ease both;
}

.float-wa:hover {
  animation: floatPopWiggle 0.62s ease both;
}

.float-up img {
  display: none;
}

@keyframes floatPopWiggle {
  0% { transform: translateY(0) scale(1) rotate(0deg); }
  20% { transform: translateY(-0.18vw) scale(1.03) rotate(0deg); }
  40% { transform: translateY(-0.42vw) scale(1.10) rotate(-12deg); }
  68% { transform: translateY(-0.42vw) scale(1.10) rotate(10deg); }
  100% { transform: translateY(-0.42vw) scale(1.10) rotate(0deg); }
}

.float-up {
  bottom: 6.6vw;
  background: var(--purple);
  background-image: url('Images/header_and_footer_element/back-to-top icon.png');
  background-repeat: no-repeat;
  background-position: center; 
  background-size: 65%;
}

.float-wa {
  bottom: 1.35vw;
  background: #2dbb58;
}

.float-wa img {
  width: 2.6vw;
  height: 2.6vw;
}

@keyframes previousWorkSlide {
  from { transform: translateX(0); }
  to { transform: translateX(calc(-1 * ((var(--slide-width) + var(--slide-gap)) * var(--slide-count)))); }
}

@keyframes screwdriverEnter {
  0% {
    opacity: 0;
    transform: translateX(6vw) translateY(-22vw) rotate(58deg);
  }
  55% {
    opacity: 0.7;
  }
  100% {
    opacity: 1;
    transform: translateX(0) translateY(0) rotate(-24deg);
  }
}

@keyframes heroFadeIn {
  from {
    opacity: 0;
    transform: translateY(1vw);
  }
  to {
    opacity: 1;
    transform: translateY(0);
  }
}

@keyframes heroOliveDrop {
  0% {
    transform: translateY(-100%);
    opacity: 1;
  }
  52% {
    transform: translateY(0);
    opacity: 1;
  }
  72% {
    transform: translateY(0);
    opacity: 1;
  }
  100% {
    transform: translateY(0);
    opacity: 0;
  }
}

@keyframes heroVideoFadeIn {
  from {
    opacity: 0;
  }
  to {
    opacity: 1;
  }
}

@keyframes heroOverlayFadeIn {
  from {
    opacity: 0;
  }
  to {
    opacity: 1;
  }
}

@keyframes heroTitleLiftIn {
  0% {
    opacity: 0;
    transform: translateY(3.8vw);
  }
  100% {
    opacity: 1;
    transform: translate(0, 0);
  }
}

@keyframes heroTitleSweep {
  0% {
    clip-path: inset(0 100% 0 0);
  }
  58% {
    clip-path: inset(0 0 0 0);
  }
  100% {
    clip-path: inset(0 0 0 0);
  }
}

@keyframes heroTitleBeam {
  0% {
    opacity: 0;
    background-position: -30% 0;
  }
  10% {
    opacity: 1;
  }
  82% {
    opacity: 1;
    background-position: 130% 0;
  }
  100% {
    opacity: 0;
    background-position: 130% 0;
  }
}

@keyframes heroTaglineFadeUp {
  0% {
    opacity: 0;
    transform: translateY(1.2vw);
  }
  100% {
    opacity: 1;
    transform: translateY(0);
  }
}

@keyframes headerSlideDownSoft {
  0% {
    opacity: 0;
    transform: translateY(-1.1vw) scale(0.985);
    filter: blur(4px);
  }
  60% {
    opacity: 1;
    filter: blur(0);
  }
  100% {
    opacity: 1;
    transform: translateY(0) scale(1);
    filter: blur(0);
  }
}

@keyframes statBounceIn {
  0% {
    opacity: 0;
    transform: translateY(2vw) scale(0.96);
  }
  62% {
    opacity: 1;
    transform: translateY(-0.35vw) scale(1.02);
  }
  100% {
    opacity: 1;
    transform: translateY(0) scale(1);
  }
}

@keyframes hammerSmashIn {
  0% {
    opacity: 0;
    transform: translateX(7vw) translateY(-26vw) scaleX(-1) rotate(-88deg);
  }
  100% {
    opacity: 1;
    transform: translateX(0) translateY(0) scaleX(-1) rotate(31deg);
  }
}

@keyframes hammerSway {
  0% {
    transform: translateX(0) translateY(0) scaleX(-1) rotate(31deg);
  }
  100% {
    transform: translateX(0.08vw) translateY(-0.06vw) scaleX(-1) rotate(37deg);
  }
}

@keyframes rollerSway {
  0% {
    transform: translateX(0) translateY(0) rotate(38deg);
  }
  100% {
    transform: translateX(0.14vw) translateY(-0.08vw) rotate(44deg);
  }
}

@keyframes rollerRetract {
  0% {
    opacity: 1;
    transform: translateX(0) translateY(0) rotate(38deg);
  }
  100% {
    opacity: 0;
    transform: translateX(-5.1vw) translateY(2.8vw) rotate(68deg);
  }
}

@keyframes screwdriverSway {
  0% {
    transform: translateX(0) translateY(0) rotate(-24deg);
  }
  100% {
    transform: translateX(-0.08vw) translateY(-0.06vw) rotate(-19deg);
  }
}

@keyframes screwdriverRetract {
  0% {
    opacity: 1;
    transform: translateX(0) translateY(0) rotate(-24deg);
  }
  45% {
    opacity: 0.7;
  }
  100% {
    opacity: 0;
    transform: translateX(6vw) translateY(-22vw) rotate(58deg);
  }
}


.stats-grid .stat-item:nth-child(2) strong,
.stats-grid .stat-item:nth-child(4) strong {
  color: #EAF0CF;
}






















/* Who section floating and hover pop-up */
.who-grid > .img-1,
.who-grid > .img-2,
.who-grid > .img-3,
.who-grid > .word {
  will-change: transform, filter;
  transform-origin: center center;
  translate: 0 0;
  transition: transform 0.55s cubic-bezier(0.22, 1, 0.36, 1), translate 0.55s cubic-bezier(0.22, 1, 0.36, 1), filter 0.55s cubic-bezier(0.22, 1, 0.36, 1), box-shadow 0.55s cubic-bezier(0.22, 1, 0.36, 1);
}

.who .word,
.who .who-text p,
.who .btn-learn {
  transform: translateY(0.9vw);
  transition: color 0.2s ease, background-color 0.2s ease, border-color 0.2s ease;
}

.who.is-visible .img-1,
.who.is-visible .img-2,
.who.is-visible .img-3,
.who.is-visible .we,
.who.is-visible .who-word,
.who.is-visible .are,
.who.is-visible .who-text p,
.who.is-visible .btn-learn {
  animation-fill-mode: both;
  opacity: 1;
  translate: 0 0;
}

.who.is-visible .img-1,
.who.is-visible .img-3 {
  animation-name: whoRevealUpSmooth;
  animation-duration: 1.45s;
  animation-timing-function: cubic-bezier(0.22, 1, 0.36, 1);
}

.who.is-visible .img-2 {
  animation-name: whoRevealDownSmooth;
  animation-duration: 1.45s;
  animation-timing-function: cubic-bezier(0.22, 1, 0.36, 1);
  animation-delay: 0.06s;
}

.who.is-visible .we,
.who.is-visible .who-word,
.who.is-visible .are,
.who.is-visible .who-text p,
.who.is-visible .btn-learn {
  animation-name: whoRevealFadeSmooth;
  animation-duration: 1.3s;
  animation-timing-function: cubic-bezier(0.22, 1, 0.36, 1);
}

.who.is-visible .who-text p {
  animation-delay: 0.14s;
}

.who.is-visible .btn-learn {
  animation-delay: 0.22s;
}

.who.is-floating .who-grid > .img-1 {
  animation: whoFloatOne 4.8s ease-in-out infinite;
}

.who.is-floating .who-grid > .img-2 {
  animation: whoFloatTwo 5.3s ease-in-out infinite 0.15s;
}

.who.is-floating .who-grid > .img-3 {
  animation: whoFloatThree 5s ease-in-out infinite 0.08s;
}

.who.is-floating .who-grid > .we {
  animation: whoFloatWordOne 4.6s ease-in-out infinite 0.05s;
}

.who.is-floating .who-grid > .who-word {
  animation: whoFloatWordTwo 5.2s ease-in-out infinite 0.18s;
}

.who.is-floating .who-grid > .are {
  animation: whoFloatWordThree 4.9s ease-in-out infinite 0.1s;
}

.who.is-floating .who-grid > .img-1:hover,
.who.is-floating .who-grid > .img-2:hover,
.who.is-floating .who-grid > .img-3:hover,
.who.is-floating .who-grid > .word:hover {
  animation: none;
  translate: 0 -1vw;
  transform: scale(1.1);
  z-index: 12;
  filter: drop-shadow(0 1.3vw 2.3vw rgba(68, 56, 80, 0.22));
}

@keyframes whoFloatOne {
  0%, 100% { translate: 0 0; }
  50% { translate: 0 -0.7vw; }
}

@keyframes whoFloatTwo {
  0%, 100% { translate: 0 0; }
  50% { translate: 0 0.8vw; }
}

@keyframes whoFloatThree {
  0%, 100% { translate: 0 0; }
  50% { translate: 0 -0.8vw; }
}

@keyframes whoFloatWordOne {
  0%, 100% { translate: 0 0; }
  50% { translate: 0 -0.45vw; }
}

@keyframes whoFloatWordTwo {
  0%, 100% { translate: 0 0; }
  50% { translate: 0 0.5vw; }
}

@keyframes whoFloatWordThree {
  0%, 100% { translate: 0 0; }
  50% { translate: 0 -0.45vw; }
}

@keyframes whoRevealUpSmooth {
  0% {
    opacity: 0;
    transform: translateY(2.6vw);
  }
  100% {
    opacity: 1;
    transform: translateY(0);
  }
}

@keyframes whoRevealDownSmooth {
  0% {
    opacity: 0;
    transform: translateY(-2.6vw);
  }
  100% {
    opacity: 1;
    transform: translateY(0);
  }
}

@keyframes whoRevealFadeSmooth {
  0% {
    opacity: 0;
    transform: translateY(1.1vw);
  }
  100% {
    opacity: 1;
    transform: translateY(0);
  }
}

@keyframes servicesFloatOne {
  0%, 100% { translate: 0 0; }
  50% { translate: 0 -0.7vw; }
}

@keyframes servicesFloatThree {
  0%, 100% { translate: 0 0; }
  50% { translate: 0 -0.8vw; }
}

@keyframes servicesFloatWordOne {
  0%, 100% { translate: 0 0; }
  50% { translate: 0 -0.45vw; }
}

@keyframes servicesFloatWordThree {
  0%, 100% { translate: 0 0; }
  50% { translate: 0 -0.45vw; }
}

@keyframes wrenchSway {
  0% {
    transform: translateY(0) rotate(19deg);
  }
  100% {
    transform: translateY(-0.12vw) rotate(26deg);
  }
}

@keyframes wrenchEnter {
  0% {
    opacity: 0;
    transform: translateX(-2.2vw) translateY(7.2vw) rotate(-88deg);
  }
  100% {
    opacity: 1;
    transform: translateX(0) translateY(0) rotate(19deg);
  }
}

@media (max-width: 1024px) {
  .who.is-floating .who-grid > .img-1:hover,
  .who.is-floating .who-grid > .img-2:hover,
  .who.is-floating .who-grid > .img-3:hover,
  .who.is-floating .who-grid > .word:hover {
    animation: none;
    translate: 0 -10px;
    transform: scale(1.095);
    filter: drop-shadow(0 14px 26px rgba(68, 56, 80, 0.22));
  }

  @keyframes whoFloatOne {
    0%, 100% { translate: 0 0; }
    50% { translate: 0 -6px; }
  }

  @keyframes whoFloatTwo {
    0%, 100% { translate: 0 0; }
    50% { translate: 0 7px; }
  }

  @keyframes whoFloatThree {
    0%, 100% { translate: 0 0; }
    50% { translate: 0 -7px; }
  }

  @keyframes whoFloatWordOne {
    0%, 100% { translate: 0 0; }
    50% { translate: 0 -4px; }
  }

  @keyframes whoFloatWordTwo {
    0%, 100% { translate: 0 0; }
    50% { translate: 0 4px; }
  }

  @keyframes whoFloatWordThree {
    0%, 100% { translate: 0 0; }
    50% { translate: 0 -4px; }
  }

  .services.is-floating .svc-a:hover,
  .services.is-floating .svc-b:hover,
  .services.is-floating .interior:hover,
  .services.is-floating .exterior:hover {
    animation: none;
    translate: 0 -10px;
    transform: scale(1.095);
    filter: drop-shadow(0 14px 26px rgba(68, 56, 80, 0.22));
  }

  @keyframes servicesFloatOne {
    0%, 100% { translate: 0 0; }
    50% { translate: 0 -6px; }
  }

  @keyframes servicesFloatThree {
    0%, 100% { translate: 0 0; }
    50% { translate: 0 -7px; }
  }

  @keyframes servicesFloatWordOne {
    0%, 100% { translate: 0 0; }
    50% { translate: 0 -4px; }
  }

  @keyframes servicesFloatWordThree {
    0%, 100% { translate: 0 0; }
    50% { translate: 0 -4px; }
  }

  .services-wrench-wrap {
    left: 72px;
    bottom: -116px;
  }

  .services-wrench {
    width: 126px;
  }

  @keyframes wrenchSway {
    0% {
      transform: translateY(0) rotate(19deg);
    }
    100% {
      transform: translateY(-2px) rotate(26deg);
    }
  }
}






/* Header portfolio dropdown */
.menu > li {
  position: relative;
}

.menu-dropdown {
  position: relative;
  z-index: 1010;
}

.menu-dropdown > .dropdown-toggle {
  display: inline-flex;
  align-items: center;
  gap: 0.42vw;
}

.menu-dropdown > .dropdown-toggle::before {
  content: '';
  position: absolute;
  left: 0;
  right: 0;
  top: 100%;
  height: 1.1vw;
}

.submenu {
  position: absolute;
  top: calc(100% + 0.9vw);
  left: 50%;
  min-width: 14.5vw;
  padding: 0.85vw 1vw;
  border-radius: 0.9vw;
  background: rgba(68, 56, 80, 0.94);
  backdrop-filter: blur(8px);
  box-shadow: 0 0.9vw 2vw rgba(0, 0, 0, 0.16);
  display: flex;
  flex-direction: column;
  gap: 0.7vw;
  opacity: 0;
  pointer-events: none;
  transform: translateX(-50%) translateY(0.5vw);
  transition: opacity 0.24s ease, transform 0.24s ease;
  z-index: 10012;
}

.submenu li {
  list-style: none;
}

.submenu a {
  display: block;
  color: #ffffff;
  font-size: 0.92vw;
  line-height: 1.2;
  white-space: nowrap;
}

.submenu a:hover {
  color: #BBBE64;
}

.submenu a::after {
  bottom: -0.18vw;
}

.menu-dropdown:hover > .submenu,
.menu-dropdown:focus-within > .submenu,
.menu-dropdown.dropdown-open > .submenu {
  opacity: 1;
  pointer-events: auto;
  transform: translateX(-50%) translateY(0);
}

.nav.is-sticky .submenu {
  background: rgba(255, 255, 255, 0.96);
}

.nav.is-sticky .submenu a {
  color: #443850;
}

.nav.is-sticky .submenu a:hover {
  color: #BBBE64;
}
/* About Page Section */
body.about-page {
  background: var(--white);
}

/* ===== About Page: Hero ===== */
body.about-page .about-hero {
  position: relative;
  min-height: 41vw;
  background:
    linear-gradient(180deg, rgba(68, 56, 80, 0.1) 0%, rgba(187, 190, 100, 0.24) 100%),
    url("./Images/about page/bg.png") center 70% / 100% no-repeat;
  border-radius: 0 0 70% 70% / 0 0 70% 70%;
  overflow: hidden;
  padding-top: 7.5vw;
}

body.about-page .about-hero > .nav.page {
  position: absolute;
  top: 0;
  left: 0;
  right: 0;
  width: 100%;
  max-width: none;
  margin: 0;
  padding: 0.55vw 32px;
  z-index: 10;
}

body.about-page .about-hero::after {
  content: "";
  position: absolute;
  inset: 0;
  background: rgba(255, 255, 255, 0.06);
  pointer-events: none;
}

body.about-page .about-hero .menu .active {
  color: var(--olive);
}

body.about-page .about-hero .menu .active::after {
  transform: scaleX(1);
  background: #443850;
}

body.about-page .about-hero .nav-progress {
  bottom: 0;
}

body.about-page .about-hero .nav.is-sticky {
  position: fixed;
}

body.about-page .about-hero-content {
  position: absolute;
  inset: 0;
  z-index: 2;
  display: grid;
  place-items: center;
  padding-top: 4vw;
}

body.about-page .about-hero-content h1 {
  font-family: 'Outfit', sans-serif;
  font-size: 6.8vw;
  line-height: 1.18;
  font-weight: 700;
  letter-spacing: 0.02em;
	margin-left: 0;
	margin-top: -1vw;
  width: auto;
  text-align: center;
}

body.about-page .about-hero-line {
  position: relative;
  display: inline-block;
  color: #443850;
  opacity: 0;
  animation: aboutHeroTitleFadeUp 0.9s ease forwards;
}

body.about-page .about-hero-about {
  animation-delay: 0.52s;
}

body.about-page .about-hero-muhibah {
  animation-delay: 0.72s;
}

body.about-page .about-hero-line::before {
  content: attr(data-text);
  position: absolute;
  inset: 0;
  background: linear-gradient(90deg, rgba(187, 190, 100, 0) 0%, rgba(187, 190, 100, 0.82) 28%, rgba(234, 240, 207, 1) 50%, rgba(187, 190, 100, 0.98) 68%, rgba(187, 190, 100, 0) 100%);
  background-size: 26% 100%;
  background-repeat: no-repeat;
  background-position: -30% 0;
  -webkit-background-clip: text;
  background-clip: text;
  color: transparent;
  opacity: 0;
  filter: drop-shadow(0 0 0.55vw rgba(187, 190, 100, 0.55));
  pointer-events: none;
}

body.about-page .about-hero-line::after {
  content: attr(data-text);
  position: absolute;
  inset: 0;
  color: #ffffff;
  clip-path: inset(0 100% 0 0);
  pointer-events: none;
}

body.about-page .about-hero-about::before,
body.about-page .about-hero-about::after {
  animation-duration: 1.08s;
  animation-timing-function: cubic-bezier(0.22, 1, 0.36, 1);
  animation-delay: 0.98s;
  animation-fill-mode: forwards;
}

body.about-page .about-hero-muhibah::before,
body.about-page .about-hero-muhibah::after {
  animation-duration: 1.18s;
  animation-timing-function: cubic-bezier(0.22, 1, 0.36, 1);
  animation-delay: 1.24s;
  animation-fill-mode: forwards;
}

body.about-page .about-hero-about::before,
body.about-page .about-hero-muhibah::before {
  animation-name: heroTitleBeam;
}

body.about-page .about-hero-about::after,
body.about-page .about-hero-muhibah::after {
  animation-name: heroTitleSweep;
}

body.about-page .about-main {
  padding-top: 2.4vw;
}

body.about-page .about-hero-content.page,
body.about-page .about-main > .page {
  width: calc(100% - 80px);
  max-width: none;
}

@keyframes aboutHeroTitleFadeUp {
  from {
    opacity: 0;
    transform: translateY(1.8vw);
  }
  to {
    opacity: 1;
    transform: translateY(0);
  }
}


/* ===== About Page: Intro ===== */
body.about-page .about-intro {
  display: grid;
  grid-template-columns: 0.96fr 1.04fr;
  align-items: start;
  gap: 3.2vw;
  margin-top: 1.8vw;
}

body.about-page .about-intro-frame {
  position: relative;
  padding: 3.9vw 2.8vw 2.4vw 2.8vw;
  min-height: 39vw;
	margin-left: 100px;
  display: flex;
  flex-direction: column;
  justify-content: flex-start;
}

body.about-page .about-intro-frame::after {
  content: "";
  position: absolute;
  display: block;
  margin: 0;
  left: 5.6vw;
  top: auto;
  bottom: 6.2vw;
  width: 28vw;
  height: 0;
  border-color: var(--olive);
  border-style: solid;
  border-width: 0 0 0.28vw 0;
  opacity: 1;
  transform: scaleX(03);
  transform-origin: left center;
}

body.about-page .about-intro-frame h2 {
  font-size: 4.2vw;
  line-height: 1.02;
  color: var(--purple);
	margin-top: 0.2vw;
	margin-left: 2.8vw;
  margin-bottom: 2.8vw;
  width: 38vw;
  opacity: 0;
  transform: translateY(1vw);
	top: 200px;
}

body.about-page .about-intro-frame p {
  max-width: 30vw;
  font-size: 1.05vw;
  line-height: 1.48;
	margin-left: 2.8vw;
	text-align: justify;
  color: #1f1f1f;
  opacity: 0;
  transform: translateY(1vw);
}

body.about-page .about-intro-images {
  position: relative;
  height: 39vw;
  min-height: 0;
  margin-left: 0;
}

body.about-page .about-photo {
  position: absolute;
  border: none;
  overflow: visible;
  background: transparent;
  transition: transform 1.22s cubic-bezier(0.16, 1, 0.3, 1), box-shadow 1.22s cubic-bezier(0.16, 1, 0.3, 1), filter 1.22s cubic-bezier(0.16, 1, 0.3, 1);
  transform-origin: center center;
  will-change: transform, box-shadow, filter;
}

body.about-page .about-photo-float {
  width: 100%;
  height: 100%;
  border: 0.3vw solid var(--olive);
  overflow: hidden;
  background: #ddd;
  box-sizing: border-box;
}

body.about-page .about-photo img {
  display: block;
  width: 100%;
  height: 100%;
  object-fit: cover;
  transition: none;
}

body.about-page .about-photo-large {
  left: -10vw;
  bottom: 4.8vw;
  width: 29.2vw;
  height: 19.4vw;
  z-index: 3;
}

body.about-page .about-photo-tall {
  right: auto;
 right: 5vw;
  top: 0.9vw;
  width: 22vw;
  height: 26.6vw;
  z-index: 2;
}

/* ===== About Page: Values ===== */
body.about-page .about-values {
  margin-top: 4.4vw;
}

body.about-page .about-photo-large .about-photo-float {
  opacity: 0;
  transform: translateX(-3vw);
}

body.about-page .about-photo-tall .about-photo-float {
  opacity: 0;
  transform: translateY(3vw);
}

body.about-page .about-intro.is-visible .about-intro-frame h2,
body.about-page .about-intro.is-visible .about-intro-frame p,
body.about-page .about-intro.is-visible .about-photo-large .about-photo-float,
body.about-page .about-intro.is-visible .about-photo-tall .about-photo-float {
  animation-fill-mode: forwards;
}

body.about-page .about-intro.is-visible .about-intro-frame::after {
  animation: aboutIntroLineSlideIn 1.18s cubic-bezier(0.22, 1, 0.36, 1) 0.22s forwards;
}

body.about-page .about-intro.is-visible .about-intro-frame h2 {
  animation: aboutIntroFadeUp 1.62s ease forwards;
}

body.about-page .about-intro.is-visible .about-intro-frame p {
  animation: aboutIntroFadeUp 1.72s ease 0.18s forwards;
}

body.about-page .about-intro.is-visible .about-photo-large .about-photo-float {
  animation: aboutIntroSlideRight 1.88s cubic-bezier(0.22, 1, 0.36, 1) forwards;
}

body.about-page .about-intro.is-visible .about-photo-tall .about-photo-float {
  animation: aboutIntroSlideUp 1.88s cubic-bezier(0.22, 1, 0.36, 1) forwards;
}

body.about-page .about-intro.about-floating .about-photo-large .about-photo-float {
  opacity: 1;
  animation: aboutIntroFloatWide 2.8s ease-in-out infinite alternate;
}

body.about-page .about-intro.about-floating .about-photo-tall .about-photo-float {
  opacity: 1;
  animation: aboutIntroFloatTall 3.15s ease-in-out infinite alternate;
}

body.about-page .about-intro-images:hover .about-photo {
  transform: scale(0.978);
}

body.about-page .about-intro.about-floating .about-intro-images .about-photo.is-hovered,
body.about-page .about-intro-images .about-photo.is-hovered,
body.about-page .about-intro.about-floating .about-intro-images .about-photo:hover,
body.about-page .about-intro-images .about-photo:hover {
  transform: translateY(-0.3vw) scale(1.145);
  box-shadow: 0 1.25vw 2.7vw rgba(68, 56, 80, 0.18);
  filter: saturate(1.035);
  z-index: 5;
}

body.about-page .about-intro.about-floating .about-intro-images .about-photo.is-hovered .about-photo-float,
body.about-page .about-intro-images .about-photo.is-hovered .about-photo-float,
body.about-page .about-intro.about-floating .about-intro-images .about-photo:hover .about-photo-float,
body.about-page .about-intro-images .about-photo:hover .about-photo-float {
  animation-play-state: paused;
}

body.about-page .vision-row,
body.about-page .mission-row {
  display: grid;
  grid-template-columns: 0.92fr 1.08fr;
  align-items: center;
  column-gap: 6.4vw;
}

body.about-page .mission-row {
  grid-template-columns: 1.18fr 0.82fr;
  margin-top: 2.2vw;
  margin-left: clamp(-150px, -8vw, -80px);
  width: min(112vw, 2000px);
}


body.about-page .about-values h2 {
  font-size: 3.4vw;
  line-height: 1;
  color: var(--olive);
  opacity: 0;
  transform: translateY(1vw);
	margin-right: 200px;
}

body.about-page .vision-box,
body.about-page .mission-box {
  position: relative;
  padding: 2.15vw 2.5vw;
  opacity: 0;
	
}

body.about-page .vision-box {
  background: var(--olive);
  width: 150%;
	margin-left: -200px;
  min-height: 12vw;
  clip-path: polygon(15.5% 0, 100% 0, 100% 100%, 0 100%, 0 45%);
  justify-self: start;
}

body.about-page .vision-box p {
  font-size: 1.2vw;
	margin-top: 30px;
	margin-left: 90px;
  line-height: 1.4;
  color: var(--white);
	text-align: justify;
  max-width: 41vw;
}

body.about-page .mission-box {
  --mission-shape: polygon(0 0, 80% 0, 99% 40%, 99% 100%, 0 100%);
  --mission-inset-shape: polygon(0 0, 79.7% 0, 98.8% 41.0%, 98.8% 100%, 0 100%);
  --mission-border: 0.34vw;
  position: relative;
  margin-left: 0;
  min-height: 12.6vw;
  width: min(78vw, 1400px);
  padding: 0;
  background: var(--olive);
  overflow: hidden;
  isolation: isolate;
  justify-self: stretch;
  display: flex;
  align-items: center;
  clip-path: var(--mission-shape);
}

body.about-page .mission-box::before {
  content: "";
  position: absolute;
  inset: var(--mission-border);
  background: #ffffff;
  clip-path: var(--mission-inset-shape);
  z-index: 0;
}

body.about-page .mission-box p {
  position: relative;
  text-align: justify;
  margin-left: clamp(90px, 13vw, 250px);
  padding: 2.45vw 12vw 2.35vw 4.2vw;
  max-width: 100%;
  font-size: 1.2vw;
  line-height: 1.4;
  color: var(--purple);
  z-index: 1;
}

body.about-page .vision-row h2 {
	margin-top: 0;
  width: max-content;
  justify-self: start;
  margin-left: 9vw;
	margin-top: 160px;
}

@media (min-width: 1201px) and (max-width: 1600px) {
  body.about-page .about-values.page .vision-row {
    grid-template-columns: clamp(260px, 28vw, 430px) clamp(680px, 58vw, 900px);
    column-gap: clamp(28px, 3.8vw, 62px);
  }

  body.about-page .about-values.page .vision-row h2 {
    margin-top: clamp(100px, 8.2vw, 138px);
    margin-left: clamp(70px, 7vw, 112px);
    margin-right: 0;
  }

  body.about-page .about-values.page .vision-box {
    width: clamp(1200px, 58vw, 1300px);
    max-width: none;
    margin-left: clamp(-30px, -8vw, -22px);
  }

  body.about-page .about-values.page .vision-box p {
    margin-top: clamp(12px, 1.2vw, 22px);
    margin-left: clamp(64px, 6vw, 96px);
    max-width: clamp(440px, 39vw, 620px);
  }
}

body.about-page .mission-row h2 {
  width: max-content;
  justify-self: start;
	margin-top: 120px;
  margin-left: clamp(-4vw, -10vw, 0vw);
  margin-right: 0;
}

body.about-page .about-values.is-visible .vision-row h2,
body.about-page .about-values.is-visible .mission-row h2 {
  animation: aboutValuesFadeIn 1.28s ease forwards;
}

body.about-page .about-values.is-visible .vision-box {
  animation: aboutValuesSlideLeft 1.45s cubic-bezier(0.2, 0.8, 0.2, 1) forwards;
}

body.about-page .about-values.is-visible .mission-box {
  animation: aboutValuesSlideRight 1.45s cubic-bezier(0.2, 0.8, 0.2, 1) forwards;
}

body.about-page .about-values.about-values-floating .vision-box {
  opacity: 1;
  animation: aboutValuesSwayLeft 3.9s ease-in-out infinite alternate;
}

body.about-page .about-values.about-values-floating .mission-box {
  opacity: 1;
  animation: aboutValuesSwayRight 4.2s ease-in-out infinite alternate;
}

/* ===== About Page: Why Choose Muhibah ===== */
body.about-page .why-about {
  margin-top: 4.8vw;
  background: var(--purple);
  overflow: hidden;
}

@keyframes aboutIntroFloatWide {
  from {
    transform: translateY(0);
  }
  to {
    transform: translateY(-0.42vw);
  }
}

@keyframes aboutIntroFloatTall {
  from {
    transform: translateY(0);
  }
  to {
    transform: translateY(0.55vw);
  }
}

@keyframes aboutIntroFadeUp {
  from {
    opacity: 0;
    transform: translateY(1vw);
  }
  to {
    opacity: 1;
    transform: translateY(0);
  }
}

@keyframes aboutIntroLineSlideIn {
  from {
    opacity: 1;
    transform: scaleX(0);
  }

  to {
    opacity: 1;
    transform: scaleX(1);
  }
}

@keyframes aboutIntroSlideRight {
  from {
    opacity: 0;
    transform: translateX(-3vw);
  }
  to {
    opacity: 1;
    transform: translateX(0);
  }
}

@keyframes aboutIntroSlideUp {
  from {
    opacity: 0;
    transform: translateY(3vw);
  }
  to {
    opacity: 1;
    transform: translateY(0);
  }
}

@keyframes aboutValuesFadeIn {
  from {
    opacity: 0;
    transform: translateY(1vw);
  }
  to {
    opacity: 1;
    transform: translateY(0);
  }
}

@keyframes aboutValuesSlideLeft {
  from {
    opacity: 0;
    transform: translateX(4.6vw);
  }
  to {
    opacity: 1;
    transform: translateX(0);
  }
}

@keyframes aboutValuesSlideRight {
  from {
    opacity: 0;
    transform: translateX(-4.6vw);
  }
  to {
    opacity: 1;
    transform: translateX(0);
  }
}

@keyframes aboutValuesSwayLeft {
  from {
    transform: translateX(0);
  }
  to {
    transform: translateX(-0.85vw);
  }
}

@keyframes aboutValuesSwayRight {
  from {
    transform: translateX(0);
  }
  to {
    transform: translateX(0.85vw);
  }
}

body.about-page .why-about-grid {
	margin-top: 0;
  margin-left: 9%;
  margin-right: auto;
  width: min(86vw, 1380px);
  position: relative;
  min-height: 37.5vw;
  padding: 3.2vw 2.8vw 3.4vw;
  display: grid;
  grid-template-columns: 1.05fr 1fr 1fr;
  grid-template-rows: auto auto auto;
  column-gap: 3vw;
  row-gap: -1vw;
  align-items: start;
}

body.about-page .why-about-grid::before {
  content: "";
  position: absolute;
  inset: 0;
  background-image: url("Images/about page/background_logo.png");
  background-repeat: no-repeat;
  background-size: auto 100%;
  margin-left: clamp(-15vw, -10vw, -6vw);
	margin-top: 0;
  background-position: left bottom;
  opacity: 0.6;
  pointer-events: none;
  z-index: 0;
	
}

body.about-page .why-copy,
body.about-page .why-card,
body.about-page .why-stat {
  position: relative;
  z-index: 1;
}

body.about-page .why-copy {
  grid-column: 1;
  grid-row: 1;
  align-self: end;
  padding-left: 1.1vw;
}

body.about-page .why-copy h2 {
  font-size: 4.15vw;
  line-height: 1.02;
  color: var(--white);
  opacity: 0;
  transform: translateY(1vw);
	margin-bottom: 50px;
}

body.about-page .why-copy span {
  color: var(--olive);
}

body.about-page .why-card {
  --why-border: 0.34vw;
  position: relative;
  border: none;
  overflow: visible;
  background: transparent;
  isolation: isolate;
  opacity: 0;
  transform: translateY(3vw);
  transition: transform 0.72s cubic-bezier(0.16, 1, 0.3, 1), box-shadow 0.72s cubic-bezier(0.16, 1, 0.3, 1);
}

body.about-page .why-card::before {
  content: "";
  position: absolute;
  inset: 0;
  background: var(--light);
  clip-path: var(--why-cut);
  z-index: 0;
  will-change: background-color;
}

body.about-page .why-card img {
  position: absolute;
  inset: var(--why-border);
  display: block;
  width: calc(100% - (var(--why-border) * 2));
  height: calc(100% - (var(--why-border) * 2));
  object-fit: cover;
  clip-path: var(--why-cut);
  z-index: 1;
}

body.about-page .why-card-handshake::before,
body.about-page .why-card-sofa::before {
  background: var(--olive);
  animation: whyOutlineOliveToLight 3.4s ease-in-out infinite alternate;
}

body.about-page .why-card-sparks::before,
body.about-page .why-card-tool::before {
  background: var(--light);
  animation: whyOutlineLightToOlive 3.4s ease-in-out infinite alternate;
}

body.about-page .about-cut-top-right {
  --why-cut: polygon(0 0, 40% 0, 100% 40%, 100% 100%, 0 100%);
  clip-path: var(--why-cut);
}

body.about-page .about-cut-middle {
  --why-cut: polygon(0 0, 60% 0, 100% 60%, 100% 100%, 0 100%);
	clip-path: var(--why-cut);}

body.about-page .about-cut-bottom-left {
  --why-cut: polygon(0 0, 100% 0, 100% 100%, 50% 100%, 0 40%);
  clip-path: var(--why-cut);
}

body.about-page .about-cut-bottom-right {
 --why-cut: polygon(0 0, 100% 0, 100% 100%, 50% 100%, 0 40%);
  clip-path: var(--why-cut);
}

body.about-page .why-card-handshake {
  grid-column: 1;
  grid-row: 2;
  width: 22.2vw;
  height: 15.6vw;
  margin-left: 1.15vw;
  align-self: start;
	margin-top: 10px;
	margin-bottom: 50px;
}

body.about-page .why-card-sparks {
  grid-column: 2;
  grid-row: 1;
  width:22.2vw;
  height: 15.2vw;
  justify-self: center;
  margin-top: 1.6vw;
}

body.about-page .why-card-sofa {
  grid-column: 3;
  grid-row: 1 / span 2;
  width: 20.2vw;
  height: 32.6vw;
  justify-self: start;
}

body.about-page .why-card-tool {
  grid-column: 2;
  grid-row: 3;
  width: 22.2vw;
  height: 15.2vw;
  justify-self: center;
  margin-top: -2.35vw;
}

body.about-page .why-stat {
  color: var(--white);
  text-align: center;
  align-self: center;
  opacity: 0;
  transform: scale(0.76);
  transition: color 0.42s ease, transform 0.42s ease;
  will-change: transform, opacity;
  transform-origin: center center;
  backface-visibility: hidden;
}

body.about-page .why-stat strong {
  display: block;
  font-family: 'Outfit', sans-serif;
  font-size: 3.9vw;
  line-height: 1;
  font-weight: 700;
  transition: color 0.42s ease;
}

body.about-page .why-stat span {
  display: block;
  margin-top: 0.25vw;
  font-family: 'Outfit', sans-serif;
  font-size: 1.55vw;
  line-height: 1.18;
  font-weight: 700;
  transition: color 0.42s ease;
}

body.about-page .why-stat-left {
  grid-column: 1;
  grid-row: 3;
  justify-self: center;
  align-self: start;
  margin-top: 2vw;
}

body.about-page .why-stat-center {
  grid-column: 2;
  grid-row: 2;
  justify-self: center;
  align-self: center;
  margin-top: -2.4vw;
}

body.about-page .why-stat-center strong,
body.about-page .why-stat-center span {
  color: var(--olive);
}

body.about-page .why-stat-right {
  grid-column: 3;
  grid-row: 3;
  justify-self: center;
	margin-top: 2.2vw;
  align-self: start;
  text-align: center;
}

body.about-page .why-stat-right strong,
body.about-page .why-stat-right span {
  color: var(--white);
}

body.about-page .why-stat-left:hover strong,
body.about-page .why-stat-left:hover span,
body.about-page .why-stat-right:hover strong,
body.about-page .why-stat-right:hover span {
  color: var(--olive);
}

body.about-page .why-stat-center:hover strong,
body.about-page .why-stat-center:hover span {
  color: var(--light);
}

body.about-page .why-about.is-visible .why-copy h2 {
  animation: whyCopyFadeIn 1s ease forwards;
}

body.about-page .why-about.is-visible .why-card-sofa {
  animation: whyCardBounceUp 1.34s cubic-bezier(0.2, 0.82, 0.22, 1) 0.22s forwards;
}

body.about-page .why-about.is-visible .why-card-sparks,
body.about-page .why-about.is-visible .why-card-tool {
  animation: whyCardBounceUp 1.34s cubic-bezier(0.2, 0.82, 0.22, 1) 0.74s forwards;
}

body.about-page .why-about.is-visible .why-card-handshake {
  animation: whyCardBounceUp 1.34s cubic-bezier(0.2, 0.82, 0.22, 1) 1.2s forwards;
}

body.about-page .why-about.is-visible .why-stat-left {
  animation: whyStatBounceInCenter 1.02s cubic-bezier(0.22, 0.82, 0.24, 1) 1.62s forwards;
}

body.about-page .why-about.is-visible .why-stat-center {
  animation: whyStatBounceInCenter 1.02s cubic-bezier(0.22, 0.82, 0.24, 1) 1.76s forwards;
}

body.about-page .why-about.is-visible .why-stat-right {
  animation: whyStatBounceInCenter 1.02s cubic-bezier(0.22, 0.82, 0.24, 1) 1.9s forwards;
}

body.about-page .why-about.why-floating .why-card {
  opacity: 1;
}

body.about-page .why-about.why-floating .why-card-handshake {
  animation: whyCardFloatA 3.4s ease-in-out infinite alternate;
}

body.about-page .why-about.why-floating .why-card-sparks,
body.about-page .why-about.why-floating .why-card-tool {
  animation: whyCardFloatB 3.8s ease-in-out infinite alternate;
}

body.about-page .why-about.why-floating .why-card-sofa {
  animation: whyCardFloatC 3.6s ease-in-out infinite alternate;
}

body.about-page .why-about.why-floating .why-stat {
  opacity: 1;
  animation: whyStatFloat 3.1s ease-in-out infinite alternate;
}

@keyframes whyCopyFadeIn {
  from {
    opacity: 0;
    transform: translateY(1vw);
  }
  to {
    opacity: 1;
    transform: translateY(0);
  }
}

@keyframes whyCardBounceUp {
  from {
    opacity: 0;
    transform: translateY(2.4vw);
  }
  38% {
    opacity: 0.72;
  }
  100% {
    opacity: 1;
    transform: translateY(0);
  }
}

@keyframes whyStatBounceInCenter {
  0% {
    opacity: 0;
    transform: translateY(0.7vw) scale(0.78);
  }
  18% {
    opacity: 1;
  }
  64% {
    opacity: 1;
    transform: translateY(-0.14vw) scale(1.045);
  }
  100% {
    opacity: 1;
    transform: translateY(0) scale(1);
  }
}

@keyframes whyCardFloatA {
  from {
    transform: translateY(0);
  }
  to {
    transform: translateY(-0.38vw);
  }
}

@keyframes whyCardFloatB {
  from {
    transform: translateY(0.14vw);
  }
  to {
    transform: translateY(-0.3vw);
  }
}

@keyframes whyCardFloatC {
  from {
    transform: translateY(0);
  }
  to {
    transform: translateY(-0.34vw);
  }
}

@keyframes whyStatFloat {
  from {
    transform: translateY(0);
  }
  to {
    transform: translateY(-0.24vw);
  }
}

@keyframes whyOutlineOliveToLight {
  0% {
    background-color: var(--olive);
  }
  100% {
    background-color: var(--light);
  }
}

@keyframes whyOutlineLightToOlive {
  0% {
    background-color: var(--light);
  }
  100% {
    background-color: var(--olive);
  }
}

/* ===== About Page: Core Values ===== */
body.about-page .core-values {
  padding-top: 3.2vw;
  padding-bottom: 1.2vw;
  position: relative;
  z-index: 3;
}

body.about-page .core-values h2 {
  text-align: center;
  font-size: 3.45vw;
  color: var(--olive);
  margin-bottom: 2.2vw;
  opacity: 0;
  transform: translateY(0.9vw);

}

body.about-page .core-grid {
  display: grid;
  margin-top: 0;
  margin-left: 0;
  grid-template-columns: repeat(4, 14.9vw);
  justify-content: center;
  gap: 1.1vw;
  align-items: start;
  position: relative;
  z-index: 3;
}

body.about-page .core-card {
  position: relative;
  top: 0;
  min-height: 21vw;
  width: 14.9vw;
	height: 21vw;
  padding: 1.45vw 1.15vw 1.25vw;
  background: var(--white);
  opacity: 0;
  transform: translateY(2.4vw);
  isolation: isolate;
  display: flex;
  flex-direction: column;
  transition: top 0.72s cubic-bezier(0.16, 1, 0.3, 1), box-shadow 0.72s cubic-bezier(0.16, 1, 0.3, 1);
  will-change: top, box-shadow;
  z-index: 3;
}

body.about-page .about-cut-top-right-card {
  --core-cut: polygon(0 0, 50% 0, 100% 30%, 100% 100%, 0 100%);
  clip-path: var(--core-cut);
}

body.about-page .core-card::before {
  content: "";
  position: absolute;
  inset: 0;
  background: var(--purple);
  clip-path: var(--core-cut);
  z-index: 0;
}

body.about-page .core-card::after {
  content: "";
  position: absolute;
  inset: 0.18vw;
  background: var(--white);
  clip-path: var(--core-cut);
  z-index: 1;
}

body.about-page .core-card > * {
  position: relative;
  z-index: 2;
}

body.about-page .core-card:hover {
  top: -0.9vw;
  box-shadow: 0 1.35vw 2.8vw rgba(68, 56, 80, 0.2);
  z-index: 6;
}

body.about-page .footer {
  margin-top: 0;
}

body.about-page .core-card img:not(.core-card-icon-large) {
	margin-top: 0 !important;
	margin-left: 0 !important;
  width: 3.9vw !important;
  height: 3.9vw !important;
  margin-bottom: 1.2vw;
  align-self: flex-start;
}

body.about-page .core-card h3 {
  font-size: 1.5vw;
  line-height: 1.08;
  color: var(--purple);
	margin-top: 0 !important;
  margin-bottom: 1vw;
  min-height: 3.9vw;
  display: flex;
  align-items: flex-start;
}

body.about-page .core-card p {
  font-size: 0.78vw;
  line-height: 1.5;
	text-align: justify;
  color: #474747;
}

body.about-page .core-card-icon-large {
  width: 500px;
  height: auto;
  margin-top: 0;
  margin-left: 0;
  margin-bottom: 1.2vw;
  align-self: flex-start;
}

body.about-page .core-card-title-lower {
  margin-top: 0 !important;
  min-height: 6.4vw;
}

body.about-page .core-card:first-child .core-card-icon-large {
  margin-top: 0.6vw;
  margin-bottom: 2vw;
}

body.about-page .core-card:first-child p {
  margin-top: -5px;
}

body.about-page .core-card-title-tight {
  margin-top: -1.6vw !important;
}

body.about-page .core-values.is-visible h2 {
  animation: coreTitleFadeIn 0.9s ease forwards;
}

body.about-page .core-values.is-visible .core-card:nth-child(1) {
  animation: coreCardSlideUp 0.92s cubic-bezier(0.22, 1, 0.36, 1) 0.16s forwards;
}

body.about-page .core-values.is-visible .core-card:nth-child(2) {
  animation: coreCardSlideUp 0.92s cubic-bezier(0.22, 1, 0.36, 1) 0.32s forwards;
}

body.about-page .core-values.is-visible .core-card:nth-child(3) {
  animation: coreCardSlideUp 0.92s cubic-bezier(0.22, 1, 0.36, 1) 0.48s forwards;
}

body.about-page .core-values.is-visible .core-card:nth-child(4) {
  animation: coreCardSlideUp 0.92s cubic-bezier(0.22, 1, 0.36, 1) 0.64s forwards;
}

@keyframes coreTitleFadeIn {
  from {
    opacity: 0;
    transform: translateY(0.9vw);
  }
  to {
    opacity: 1;
    transform: translateY(0);
  }
}

@keyframes coreCardSlideUp {
  from {
    opacity: 0;
    transform: translateY(2.4vw);
  }
  to {
    opacity: 1;
    transform: translateY(0);
  }
}

@keyframes serviceIntroFadeIn {
  from {
    opacity: 0;
    transform: translateY(18px);
  }
  to {
    opacity: 1;
    transform: translateY(0);
  }
}

@keyframes serviceCopySlideIn {
  from {
    opacity: 0;
    transform: translateX(-36px);
  }
  to {
    opacity: 1;
    transform: translateX(0);
  }
}

@keyframes serviceCopySlideInRight {
  from {
    opacity: 0;
    transform: translateX(36px);
  }
  to {
    opacity: 1;
    transform: translateX(0);
  }
}

@keyframes serviceTruckDriveIn {
  from {
    opacity: 0;
    transform: translateX(44vw);
  }
  to {
    opacity: 1;
    transform: translateX(0);
  }
}

@keyframes serviceCopyTitleBeam {
  0% {
    opacity: 0;
    background-position: -36% 0;
  }
  20% {
    opacity: 1;
  }
  100% {
    opacity: 0;
    background-position: 136% 0;
  }
}

@keyframes serviceCopyTitleOliveSweep {
  from {
    clip-path: inset(0 100% 0 0);
  }
  to {
    clip-path: inset(0 0 0 0);
  }
}

@keyframes serviceFeatureBounceIn {
  0% {
    opacity: 0;
    transform: translate(-42px, -42px) scale(0.62);
  }
  58% {
    opacity: 1;
    transform: translate(0, 0) scale(1.12);
  }
  78% {
    opacity: 1;
    transform: translate(0, 0) scale(0.97);
  }
  90% {
    opacity: 1;
    transform: translate(0, 0) scale(1.02);
  }
  100% {
    opacity: 1;
    transform: translate(0, 0) scale(1);
  }
}

@keyframes serviceWorkSlideUp {
  from {
    opacity: 0;
    transform: translateY(88px);
  }
  to {
    opacity: 1;
    transform: translateY(0);
  }
}

@keyframes serviceWorkSlideDown {
  from {
    opacity: 0;
    transform: translateY(-88px);
  }
  to {
    opacity: 1;
    transform: translateY(0);
  }
}

@keyframes serviceAssuranceBarSlideIn {
  from {
    opacity: 0;
    transform: translateX(220px);
  }
  to {
    opacity: 1;
    transform: translateX(0);
  }
}

@keyframes serviceAssuranceBarSweep {
  0% {
    transform: translateX(0);
  }
  100% {
    transform: translateX(102%);
  }
}

@keyframes serviceAssuranceBarSway {
  0% {
    translate: 0 0;
  }
  25% {
    translate: -14px 0;
  }
  50% {
    translate: 10px 0;
  }
  75% {
    translate: -6px 0;
  }
  100% {
    translate: 0 0;
  }
}

@keyframes serviceMapFadeIn {
  0% {
    opacity: 0;
  }
  100% {
    opacity: 1;
  }
}

@keyframes serviceTruckSway {
  0% {
    translate: 0 0;
  }
  25% {
    translate: -16px 0;
  }
  50% {
    translate: 12px 0;
  }
  75% {
    translate: -8px 0;
  }
  100% {
    translate: 0 0;
  }
}

@keyframes serviceImageFloat {
  0% {
    translate: 0 0;
  }
  50% {
    translate: 0 -12px;
  }
  100% {
    translate: 0 0;
  }
}




/* Service Page Section */
body.service-page {
  background: var(--white);
  color: var(--purple);
}

body.service-page main .page {
  width: calc(100% - 2.4vw);
  max-width: none;
  margin-inline: auto;
}

/* ===== Service Page: Hero ===== */
body.service-page .service-hero {
  position: relative;
  min-height: 41vw;
  background:
    linear-gradient(180deg, rgba(68, 56, 80, 0.1) 0%, rgba(187, 190, 100, 0.24) 100%),
    url("./Images/service page/1bf54ce8-c8a3-49a9-a0ea-363b6cd5a6a6.png") center 36% / 100% no-repeat,
    #d8d4c7;
  border-radius: 0 0 70% 70% / 0 0 70% 70%;
  overflow: hidden;
  padding-top: 7.5vw;
}

body.service-page .service-hero::after {
  content: "";
  position: absolute;
  inset: 0;
  background: rgba(255, 255, 255, 0.06);
  pointer-events: none;
}

body.service-page .service-hero .nav.page {
  position: absolute;
  top: 0;
  left: 0;
  right: 0;
  width: 100%;
  max-width: none;
  margin: 0;
  padding: 0.55vw 32px;
  z-index: 10;
}

body.service-page .service-hero .nav.is-sticky {
  position: fixed;
}

body.service-page .service-hero .nav-progress {
  bottom: 0;
}

body.service-page .service-hero .menu .active {
  color: var(--olive);
}

body.service-page .service-hero .menu .active::after {
  transform: scaleX(1);
  background: #443850;
}

body.service-page .service-hero-content {
  position: absolute;
  inset: 0;
  z-index: 2;
  display: grid;
  place-items: center;
  padding-top: 4vw;
  text-align: center;
}

body.service-page .service-hero-content h1 {
  margin: -1vw 0 0;
  font-family: "Outfit", sans-serif;
  font-size: 6.8vw;
  font-weight: 700;
  letter-spacing: 0.02em;
  line-height: 1.18;
  width: auto;
}

body.service-page .service-hero-line {
  position: relative;
  display: inline-block;
  color: #443850;
  opacity: 0;
  animation: aboutHeroTitleFadeUp 0.9s ease forwards;
}

body.service-page .service-hero-our {
  animation-delay: 0.52s;
}

body.service-page .service-hero-services {
  animation-delay: 0.72s;
}

body.service-page .service-hero-line::before {
  content: attr(data-text);
  position: absolute;
  inset: 0;
  background: linear-gradient(90deg, rgba(187, 190, 100, 0) 0%, rgba(187, 190, 100, 0.82) 28%, rgba(234, 240, 207, 1) 50%, rgba(187, 190, 100, 0.98) 68%, rgba(187, 190, 100, 0) 100%);
  background-size: 26% 100%;
  background-repeat: no-repeat;
  background-position: -30% 0;
  color: transparent;
  -webkit-background-clip: text;
  background-clip: text;
  opacity: 0;
  filter: drop-shadow(0 0 0.55vw rgba(187, 190, 100, 0.55));
  pointer-events: none;
}

body.service-page .service-hero-line::after {
  content: attr(data-text);
  position: absolute;
  inset: 0;
  color: #ffffff;
  clip-path: inset(0 100% 0 0);
  pointer-events: none;
}

body.service-page .service-hero-our::before,
body.service-page .service-hero-our::after {
  animation-duration: 1.08s;
  animation-timing-function: cubic-bezier(0.22, 1, 0.36, 1);
  animation-delay: 0.98s;
  animation-fill-mode: forwards;
}

body.service-page .service-hero-services::before,
body.service-page .service-hero-services::after {
  animation-duration: 1.18s;
  animation-timing-function: cubic-bezier(0.22, 1, 0.36, 1);
  animation-delay: 1.24s;
  animation-fill-mode: forwards;
}

body.service-page .service-hero-our::before,
body.service-page .service-hero-services::before {
  animation-name: heroTitleBeam;
}

body.service-page .service-hero-our::after,
body.service-page .service-hero-services::after {
  animation-name: heroTitleSweep;
}

body.service-page .service-hero-bottom-curve {
  display: none;
}

body.service-page .service-hero-content.page {
  width: calc(100% - 80px);
  max-width: none;
}

/* Portfolio Exterior Page */
body.portfolio-exterior-page {
  background: var(--white);
}

/* ===== Portfolio Exterior Page: Hero ===== */
body.portfolio-exterior-page .portfolio-exterior-hero {
  position: relative;
  min-height: 41vw;
  background:
    linear-gradient(180deg, rgba(68, 56, 80, 0.1) 0%, rgba(187, 190, 100, 0.24) 100%),
    url("Images/portfolio_exterior/page element/pe_bg.png") center 40% / 100% no-repeat;
  border-radius: 0 0 70% 70% / 0 0 70% 70%;
  overflow: hidden;
  padding-top: 7.5vw;
}

body.portfolio-exterior-page .portfolio-exterior-hero::after {
  content: "";
  position: absolute;
  inset: 0;
  background: rgba(255, 255, 255, 0.06);
  pointer-events: none;
}

body.portfolio-exterior-page .portfolio-exterior-hero > .nav.page {
  position: absolute;
  top: 0;
  left: 0;
  right: 0;
  width: 100%;
  max-width: none;
  margin: 0;
  padding: 0.55vw 32px;
  z-index: 10;
}

body.portfolio-exterior-page .portfolio-exterior-hero .menu .active {
  color: var(--olive);
}

body.portfolio-exterior-page .portfolio-exterior-hero .menu .active::after {
  transform: scaleX(1);
  background: #443850;
}

body.portfolio-exterior-page .portfolio-exterior-hero .nav.is-sticky {
  position: fixed;
}

body.portfolio-exterior-page .portfolio-exterior-hero .nav-progress {
  bottom: 0;
}

body.portfolio-exterior-page .portfolio-exterior-hero-content {
  position: absolute;
  inset: 0;
  z-index: 2;
  display: grid;
  place-items: center;
  padding-top: 4vw;
}

body.portfolio-exterior-page .portfolio-exterior-hero-content h1 {
  font-family: "Outfit", sans-serif;
  font-size: 6.8vw;
  line-height: 1.18;
  font-weight: 700;
  letter-spacing: 0.02em;
  margin-left: 0;
  margin-top: -1vw;
  margin-bottom: 0;
  width: auto;
  text-align: center;
}

body.portfolio-exterior-page .portfolio-exterior-hero-line {
  position: relative;
  display: inline-block;
  color: #443850;
  opacity: 0;
  animation: aboutHeroTitleFadeUp 0.9s ease forwards;
}

body.portfolio-exterior-page .portfolio-exterior-hero-title {
  animation-delay: 0.52s;
}

body.portfolio-exterior-page .portfolio-exterior-hero-line::before {
  content: attr(data-text);
  position: absolute;
  inset: 0;
  background: linear-gradient(90deg, rgba(187, 190, 100, 0) 0%, rgba(187, 190, 100, 0.82) 28%, rgba(234, 240, 207, 1) 50%, rgba(187, 190, 100, 0.98) 68%, rgba(187, 190, 100, 0) 100%);
  background-size: 42% 100%;
  background-repeat: no-repeat;
  background-position: -30% 0;
  -webkit-background-clip: text;
  background-clip: text;
  color: transparent;
  opacity: 0;
  filter: drop-shadow(0 0 0.55vw rgba(187, 190, 100, 0.55));
  pointer-events: none;
}

body.portfolio-exterior-page .portfolio-exterior-hero-line::after {
  content: attr(data-text);
  position: absolute;
  inset: 0;
  color: #ffffff;
  clip-path: inset(0 100% 0 0);
  pointer-events: none;
}

body.portfolio-exterior-page .portfolio-exterior-hero-title::before,
body.portfolio-exterior-page .portfolio-exterior-hero-title::after {
  animation-duration: 1.08s;
  animation-timing-function: cubic-bezier(0.22, 1, 0.36, 1);
  animation-delay: 0.98s;
  animation-fill-mode: forwards;
}

body.portfolio-exterior-page .portfolio-exterior-hero-title::before {
  animation-name: heroTitleBeam;
}

body.portfolio-exterior-page .portfolio-exterior-hero-title::after {
  animation-name: heroTitleSweep;
}

body.portfolio-exterior-page .portfolio-exterior-main {
  padding-top: 2.4vw;
}

body.portfolio-exterior-page .portfolio-exterior-hero-content.page {
  width: calc(100% - 80px);
  max-width: none;
}

/* ===== Portfolio Exterior Page: Intro ===== */
body.portfolio-exterior-page .portfolio-exterior-intro {
  width: min(78vw, 1640px);
  margin-inline: auto;
  display: grid;
  grid-template-columns: minmax(0, 1.14fr) minmax(30rem, 37vw);
  gap: 0.45vw;
  align-items: stretch;
  padding-bottom: 4.4vw;
}

body.portfolio-exterior-page .portfolio-exterior-copy {
  display: flex;
  opacity: 0;
  transform: translateX(-64px);
  transition: opacity 0.8s ease, transform 0.8s ease;
}

body.portfolio-exterior-page .portfolio-exterior-feature {
  opacity: 0;
  transform: translateX(64px);
  transition: opacity 0.8s ease, transform 0.8s ease;
}

body.portfolio-exterior-page .portfolio-exterior-intro.is-visible .portfolio-exterior-copy,
body.portfolio-exterior-page .portfolio-exterior-intro.is-visible .portfolio-exterior-feature {
  opacity: 1;
  transform: translateX(0);
}

body.portfolio-exterior-page .portfolio-exterior-intro.is-visible .portfolio-exterior-feature {
  animation: portfolioFeatureFloat 4.8s ease-in-out infinite;
  animation-delay: 0.85s;
}

body.portfolio-exterior-page .portfolio-exterior-copy-frame {
  position: relative;
  flex: 1;
  border-left: 0.3vw solid var(--olive);
  border-bottom: 0.3vw solid var(--olive);
  padding: 2.5vw 2.5vw 2.2vw 2.4vw;
  max-width: 45vw;
  height: auto;
}

body.portfolio-exterior-page .portfolio-exterior-copy-frame::before {
  content: "";
  position: absolute;
  top: 0;
  left: 0;
  width: 42%;
  height: 0.3vw;
  background: var(--olive);
}

body.portfolio-exterior-page .portfolio-exterior-copy-frame h2 {
  margin: 0 0 1.15vw;
  color: var(--purple);
  font-family: "Outfit", sans-serif;
  font-size: clamp(52px, 3.7vw, 72px);
  font-weight: 700;
  line-height: 0.95;
}

body.portfolio-exterior-page .portfolio-exterior-copy-frame h2 span {
  color: #bbbe64;
  font-size: 1.4em;
}

body.portfolio-exterior-page .portfolio-exterior-copy-frame p {
margin-top: 50px;
	margin-bottom: 50px;
  max-width: 33vw;
  color: #443850;
  font-size: clamp(15px, 1.02vw, 18px);
  line-height: 1.6;
	text-align: justify;
}

body.portfolio-exterior-page .portfolio-exterior-points {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: 0.8vw 1.9vw;
}

body.portfolio-exterior-page .portfolio-exterior-points ul {
  list-style: none;
  margin: 0;
  padding: 0;
}

body.portfolio-exterior-page .portfolio-exterior-points li {
  position: relative;
  padding-left: 1.45vw;
  margin-top: 0.42vw;
  color: #443850;
  font-size: 18px;
  line-height: 1.5;
  opacity: 0;
  transform: translateY(18px);
}

body.portfolio-exterior-page .portfolio-exterior-points li::before {
  content: "";
  position: absolute;
  left: 0;
  top: 0.62em;
  width: 0.82vw;
  height: 0.82vw;
  background: var(--purple);
  transform: translateY(-50%);
}

body.portfolio-exterior-page .portfolio-exterior-intro.is-visible .portfolio-exterior-points li {
  animation: portfolioPointRise 0.52s ease forwards;
  animation-delay: calc(0.7s + (var(--point-order) * 0.12s));
}

@keyframes portfolioPointRise {
  from {
    opacity: 0;
    transform: translateY(18px);
  }

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

body.portfolio-exterior-page .portfolio-exterior-feature {
  --feature-shape: polygon(0 0, 60% 0, 100% 40%, 100% 100%, 0 100%);
  --feature-border: 0.45vw;
  align-self: stretch;
  justify-self: end;
  width: min(100%, 32vw);
  margin: 0;
  padding: var(--feature-border);
  background: #5a4d6d;
  clip-path: var(--feature-shape);
  box-shadow: 0 1vw 2.4vw rgba(68, 56, 80, 0.1);
  overflow: hidden;
}

body.portfolio-exterior-page .portfolio-exterior-feature-media {
  width: 100%;
  height: 100%;
  background: #ffffff;
  clip-path: var(--feature-shape);
  overflow: hidden;
}

body.portfolio-exterior-page .portfolio-exterior-feature img {
  width: 100%;
  height: 100%;
  display: block;
  aspect-ratio: 0.84;
  object-fit: cover;
}

@keyframes portfolioFeatureFloat {
  0%,
  100% {
    transform: translate(0, 0);
  }

  50% {
    transform: translate(0, -10px);
  }
}

@keyframes portfolioGallerySquareToImage {
  0% {
    opacity: 0;
    transform: scale(0.06);
  }

  100% {
    opacity: 1;
    transform: scale(1);
  }
}

@keyframes portfolioGallerySquareFade {
  0% {
    opacity: 1;
    transform: scale(1);
  }

  70% {
    opacity: 1;
    transform: scale(1);
  }

  100% {
    opacity: 0;
    transform: scale(1);
  }
}

@keyframes portfolioGalleryImagePopIn {
  0% {
    opacity: 0;
    transform: scale(1);
  }

  100% {
    opacity: 1;
    transform: scale(1);
  }
}

body.portfolio-exterior-page .portfolio-exterior-gallery-wrap {
  background: #ffffff;
  padding: 0.8vw 0 0;
}

/* ===== Portfolio Exterior Page: Gallery Head ===== */
body.portfolio-exterior-page .portfolio-exterior-gallery-head {
  width: min(88vw, 1360px);
  margin-inline: auto;
  text-align: center;
  position: relative;
  padding-bottom: 1vw;
  margin-bottom: 0;
  opacity: 0;
  transition: opacity 0.85s ease;
}

body.portfolio-exterior-page .portfolio-exterior-gallery-head::after {
  content: "";
  position: absolute;
  left: 50%;
  bottom: 0;
  width: 100vw;
  height: clamp(3px, 0.22vw, 5px);
  background: #bbbe64;
  transform: translateX(-50%);
}

body.portfolio-exterior-page .portfolio-exterior-gallery-head.is-visible {
  opacity: 1;
}

body.portfolio-exterior-page .portfolio-exterior-gallery-head h2 {
  margin: 0 0 0.35vw;
  color: var(--purple);
  font-family: "Outfit", sans-serif;
  font-size: clamp(42px, 3.25vw, 66px);
  font-weight: 800;
  line-height: 0.94;
}

body.portfolio-exterior-page .portfolio-exterior-gallery-head h2 span {
  color: #bbbe64;
}

body.portfolio-exterior-page .portfolio-exterior-gallery-panel {
  background-color: #443850;
  background-image: url("Images/homepage/background_logo.png");
  background-repeat: no-repeat;
  background-position: center bottom;
  background-size: 100% auto;
  padding: 1.15vw 0 3.2vw;
  position: relative;
  z-index: 0;
}

body.portfolio-exterior-page .portfolio-exterior-actions {
  display: flex;
  justify-content: center;
  align-items: flex-start;
  gap: 5.2vw;
  width: min(88vw, 1360px);
  margin: 0 auto 1.55vw;
  padding: 0;
  background: transparent;
  position: relative;
  z-index: 20;
}

body.portfolio-exterior-page .portfolio-exterior-action {
  min-width: clamp(210px, 18vw, 320px);
  padding: 0.94vw 1.8vw;
  border: none;
  background: #f2f4d8;
  color: var(--purple);
  font-family: "Outfit", sans-serif;
  font-size: clamp(16px, 1vw, 20px);
  font-weight: 700;
  line-height: 1;
  text-align: center;
  transition:
    background-color 0.28s ease,
    color 0.28s ease,
    outline-color 0.28s ease,
    box-shadow 0.28s ease,
    transform 0.28s ease;
}

body.portfolio-exterior-page .portfolio-exterior-action-primary {
  background: #bbbe64;
  color: #ffffff;
}

body.portfolio-exterior-page .portfolio-exterior-action-primary:hover,
body.portfolio-exterior-page .portfolio-exterior-action-primary:focus-visible {
  background: transparent;
  color: #ffffff;
  outline: 2px solid #ffffff;
  outline-offset: 0;
}

body.portfolio-exterior-page .portfolio-exterior-dropdown-toggle:hover,
body.portfolio-exterior-page .portfolio-exterior-dropdown-toggle:focus-visible {
  background: #bbbe64;
  color: #ffffff;
  outline: 2px solid #eaf0cf;
  outline-offset: 0;
}

body.portfolio-exterior-page .portfolio-exterior-dropdown-toggle:hover .portfolio-exterior-dropdown-caret-icon-black,
body.portfolio-exterior-page .portfolio-exterior-dropdown-toggle:focus-visible .portfolio-exterior-dropdown-caret-icon-black {
  opacity: 0;
}

body.portfolio-exterior-page .portfolio-exterior-dropdown-toggle:hover .portfolio-exterior-dropdown-caret-icon-white,
body.portfolio-exterior-page .portfolio-exterior-dropdown-toggle:focus-visible .portfolio-exterior-dropdown-caret-icon-white {
  opacity: 1;
}

body.portfolio-exterior-page .portfolio-exterior-dropdown {
  position: relative;
  z-index: 30;
}

body.portfolio-exterior-page .portfolio-exterior-dropdown-toggle {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 0.8vw;
}

body.portfolio-exterior-page .portfolio-exterior-dropdown-caret {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  position: relative;
  width: 1.1vw;
  min-width: 16px;
  height: 0.78vw;
  min-height: 11px;
  transition: transform 0.2s ease;
}

body.portfolio-exterior-page .portfolio-exterior-dropdown-caret-icon {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  object-fit: contain;
  transition: opacity 0.2s ease;
}

body.portfolio-exterior-page .portfolio-exterior-dropdown-caret-icon-white {
  opacity: 0;
}

body.portfolio-exterior-page .portfolio-exterior-dropdown.is-open .portfolio-exterior-dropdown-toggle {
  background: #bbbe64;
  color: #ffffff;
}

body.portfolio-exterior-page .portfolio-exterior-dropdown.is-open .portfolio-exterior-dropdown-caret {
  transform: rotate(180deg);
}

body.portfolio-exterior-page .portfolio-exterior-dropdown.is-open .portfolio-exterior-dropdown-caret-icon-black {
  opacity: 0;
}

body.portfolio-exterior-page .portfolio-exterior-dropdown.is-open .portfolio-exterior-dropdown-caret-icon-white {
  opacity: 1;
}

body.portfolio-exterior-page .portfolio-exterior-dropdown-menu {
  position: absolute;
  top: 100%;
  left: 0;
  width: 100%;
  min-width: clamp(210px, 18vw, 320px);
  background: #f2f4d8;
  border: 0.12vw solid #bbbe64;
  box-shadow: 0 0.8vw 2vw rgba(20, 12, 30, 0.2);
  max-height: 0;
  opacity: 0;
  visibility: hidden;
  pointer-events: none;
  overflow: hidden;
  transform: translateY(-10px);
  transform-origin: top center;
  transition:
    max-height 0.32s ease,
    opacity 0.24s ease,
    transform 0.32s ease,
    visibility 0s linear 0.32s;
  z-index: 40;
}

body.portfolio-exterior-page .portfolio-exterior-dropdown.is-open .portfolio-exterior-dropdown-menu {
  max-height: 32rem;
  opacity: 1;
  visibility: visible;
  pointer-events: auto;
  transform: translateY(0);
  transition:
    max-height 0.32s ease,
    opacity 0.24s ease,
    transform 0.32s ease,
    visibility 0s linear 0s;
}

body.portfolio-exterior-page .portfolio-exterior-dropdown-item {
  width: 100%;
  padding: 1vw 1.2vw;
  border: 1px solid #bbbe64;
  border-top: 0;
  background: #f2f4d8;
  color: #443850;
  font-family: "Outfit", sans-serif;
  font-size: clamp(16px, 1vw, 20px);
  font-weight: 500;
  line-height: 1.15;
  text-align: center;
  cursor: pointer;
}

body.portfolio-exterior-page .portfolio-exterior-dropdown-item:first-child {
  border-top: 1px solid #bbbe64;
}

body.portfolio-exterior-page .portfolio-exterior-dropdown-item:hover,
body.portfolio-exterior-page .portfolio-exterior-dropdown-item:focus-visible {
  background: #bbbe64;
  color: #eaf0cf;
  border-color: #eaf0cf;
  outline: none;
}

body.portfolio-exterior-page .portfolio-exterior-gallery {
  width: min(88vw, 1660px);
  margin-inline: auto;
  margin-bottom: 15vw;
  column-count: 4;
  column-gap: 0.9vw;
  background: transparent;
  padding-top: 0;
  position: relative;
  z-index: 0;
  isolation: isolate;
}

body.portfolio-exterior-page .portfolio-card {
  position: relative;
  margin: 0;
  margin-bottom: 0.9vw;
  border: 5px solid #bbbe64;
  overflow: hidden;
  background: #bbbe64;
  cursor: pointer;
  break-inside: avoid;
  display: block;
  opacity: 0;
  transform: scale(0.06);
  transform-origin: center center;
  transition: transform 0.24s ease, box-shadow 0.24s ease;
  will-change: transform, opacity;
}

body.portfolio-exterior-page .portfolio-card::before {
  content: "";
  position: absolute;
  inset: 0;
  background: #bbbe64;
  opacity: 1;
  z-index: 0;
  will-change: transform, opacity;
}

body.portfolio-exterior-page .portfolio-card img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  display: block;
  opacity: 0;
  transform: scale(1);
  filter: blur(0);
  transition: transform 0.24s ease;
  will-change: transform, opacity, filter;
}

body.portfolio-exterior-page .portfolio-card.is-visible {
  animation: portfolioGallerySquareToImage 0.62s cubic-bezier(0.22, 0.72, 0.2, 1) forwards;
  animation-delay: var(--enter-delay, 0s);
}

body.portfolio-exterior-page .portfolio-card.is-visible::before {
  animation: portfolioGallerySquareFade 0.62s ease-out forwards;
  animation-delay: var(--enter-delay, 0s);
}

body.portfolio-exterior-page .portfolio-card.is-visible img {
  animation: portfolioGalleryImagePopIn 0.28s ease-out forwards;
  animation-delay: var(--enter-delay, 0s);
}

body.portfolio-exterior-page .portfolio-card:hover,
body.portfolio-exterior-page .portfolio-card:focus-visible {
  transform: translateY(-8px) scale(1.02);
  box-shadow: 0 14px 28px rgba(20, 12, 30, 0.26);
  z-index: 2;
}

body.portfolio-exterior-page .portfolio-card:hover img,
body.portfolio-exterior-page .portfolio-card:focus-visible img {
  transform: scale(1.04);
}

body.portfolio-exterior-page .portfolio-card:focus-visible {
  outline: 0.24vw solid #bbbe64;
  outline-offset: 0.18vw;
}

body.portfolio-exterior-page .portfolio-card.square,
body.portfolio-exterior-page .portfolio-card.portrait,
body.portfolio-exterior-page .portfolio-card.tall,
body.portfolio-exterior-page .portfolio-card.wide {
  width: 100%;
}

body.portfolio-exterior-page .portfolio-card.square {
  aspect-ratio: 1 / 1;
}

body.portfolio-exterior-page .portfolio-card.portrait {
  aspect-ratio: 0.72 / 1;
}

body.portfolio-exterior-page .portfolio-card.tall {
  aspect-ratio: 0.68 / 1;
}

body.portfolio-exterior-page .portfolio-card.wide {
  aspect-ratio: 1.5 / 1;
}

@media (max-width: 1024px) {
  body.portfolio-exterior-page .portfolio-exterior-gallery {
    column-count: 3;
  }
}

@media (max-width: 768px) {
  body.portfolio-exterior-page .portfolio-exterior-gallery {
    column-count: 2;
    column-gap: 8px;
  }

  body.portfolio-exterior-page .portfolio-card {
    margin-bottom: 8px;
  }
}

/* ===== Portfolio Exterior Page: CTA ===== */
body.portfolio-exterior-page .portfolio-exterior-cta {
  position: relative;
  z-index: 1;
  display: flex;
  justify-content: center;
  margin-top: -7vw;
  margin-bottom: -2.6vw;
  transform: translateY(-4.2vw);
}

body.portfolio-exterior-page .portfolio-lightbox {
  position: fixed;
  inset: 0;
  display: flex;
  align-items: center;
  justify-content: center;
  padding: 2vw;
  background: rgba(27, 20, 36, 0.82);
  opacity: 0;
  visibility: hidden;
  pointer-events: none;
  transition:
    opacity 0.36s ease,
    visibility 0s linear 0.36s;
  z-index: 9999;
  will-change: opacity;
}

body.portfolio-exterior-page .portfolio-lightbox.is-open {
  opacity: 1;
  visibility: visible;
  pointer-events: auto;
  transition:
    opacity 0.36s ease,
    visibility 0s linear 0s;
}

body.portfolio-exterior-page .portfolio-lightbox-dialog {
  position: relative;
  max-width: min(92vw, 1200px);
  max-height: 88vh;
  opacity: 0;
  transform: translateY(22px) scale(0.975);
  transition:
    opacity 0.38s ease,
    transform 0.38s ease;
  will-change: opacity, transform;
}

body.portfolio-exterior-page .portfolio-lightbox.is-open .portfolio-lightbox-dialog {
  opacity: 1;
  transform: translateY(0) scale(1);
}

body.portfolio-exterior-page .portfolio-lightbox-image {
  display: block;
  max-width: 100%;
  max-height: 88vh;
  border: 0.32vw solid #bbbe64;
  background: #ffffff;
  box-shadow: 0 1.2vw 3vw rgba(0, 0, 0, 0.28);
}

body.portfolio-exterior-page .portfolio-lightbox-close {
  position: absolute;
  top: 0.6vw;
  right: 0.6vw;
  width: 4.4vw;
  min-width: 64px;
  height: 4.4vw;
  min-height: 64px;
  border: 0;
  border-radius: 999px;
  background: #bbbe64;
  color: #443850;
  cursor: pointer;
  z-index: 1;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  transition:
    transform 0.22s ease,
    box-shadow 0.22s ease,
    background-color 0.22s ease,
    outline-color 0.22s ease;
}

body.portfolio-exterior-page .portfolio-lightbox-close-icon {
  position: absolute;
  width: 38%;
  height: 38%;
  object-fit: contain;
  transition: opacity 0.22s ease;
}

body.portfolio-exterior-page .portfolio-lightbox-close-icon-white {
  opacity: 0;
}

body.portfolio-exterior-page .portfolio-lightbox-close:hover,
body.portfolio-exterior-page .portfolio-lightbox-close:focus-visible {
  transform: scale(1.06);
  box-shadow: 0 10px 24px rgba(20, 12, 30, 0.24);
  background: transparent;
  outline: 2px solid #ffffff;
  outline-offset: 0;
}

body.portfolio-exterior-page .portfolio-lightbox-close:hover .portfolio-lightbox-close-icon-black,
body.portfolio-exterior-page .portfolio-lightbox-close:focus-visible .portfolio-lightbox-close-icon-black {
  opacity: 0;
}

body.portfolio-exterior-page .portfolio-lightbox-close:hover .portfolio-lightbox-close-icon-white,
body.portfolio-exterior-page .portfolio-lightbox-close:focus-visible .portfolio-lightbox-close-icon-white {
  opacity: 1;
}

body.portfolio-lightbox-open {
  overflow: hidden;
}

body.portfolio-exterior-page .portfolio-exterior-cta .cta-card {
  width: 78%;
  min-height: 17vw;
  opacity: 0;
  transition: opacity 0.9s ease;
}

body.portfolio-exterior-page .portfolio-exterior-cta.is-visible .cta-card {
  opacity: 1;
}

body.portfolio-exterior-page .footer {
  position: relative;
  z-index: 0;
  margin-top: 60px;
}

@media (max-width: 1024px) {
  body.portfolio-exterior-page .portfolio-exterior-hero {
    min-height: 360px;
    background-size: cover;
    background-position: center;
  }

  body.portfolio-exterior-page .portfolio-exterior-hero-content h1 {
    font-size: clamp(42px, 8vw, 72px);
  }

  body.portfolio-exterior-page .portfolio-exterior-intro,
  body.portfolio-exterior-page .portfolio-exterior-gallery,
  body.portfolio-exterior-page .portfolio-exterior-gallery-head {
    width: calc(100% - 52px);
  }

  body.portfolio-exterior-page .portfolio-exterior-intro {
    grid-template-columns: 1fr;
    gap: 28px;
  }

  body.portfolio-exterior-page .portfolio-exterior-copy-frame {
    max-width: 100%;
  }

  body.portfolio-exterior-page .portfolio-exterior-copy-frame h2 {
    font-size: clamp(38px, 6vw, 60px);
  }

  body.portfolio-exterior-page .portfolio-exterior-copy-frame p {
    max-width: 100%;
    font-size: 14px;
  }

  body.portfolio-exterior-page .portfolio-exterior-points li {
    font-size: 13px;
    padding-left: 14px;
  }

  body.portfolio-exterior-page .portfolio-exterior-points li::before {
    width: 6px;
    height: 6px;
    top: 10px;
  }

  body.portfolio-exterior-page .portfolio-exterior-feature {
    justify-self: center;
    width: min(100%, 420px);
  }

  body.portfolio-exterior-page .portfolio-exterior-gallery-head h2 {
    font-size: clamp(32px, 5vw, 50px);
  }

  body.portfolio-exterior-page .portfolio-exterior-actions {
    flex-wrap: wrap;
    gap: 12px;
  }

  body.portfolio-exterior-page .portfolio-exterior-action {
    min-width: 180px;
    padding: 12px 20px;
    font-size: 13px;
  }

  body.portfolio-exterior-page .portfolio-exterior-gallery {
    grid-template-columns: repeat(3, minmax(0, 1fr));
    grid-auto-rows: 120px;
  }

  body.portfolio-exterior-page .portfolio-exterior-cta .cta-card {
    width: 88%;
  }
}

@media (max-width: 768px) {
  body.portfolio-exterior-page .portfolio-exterior-hero {
    min-height: 430px;
    border-radius: 0 0 82% 82% / 0 0 26% 26%;
  }

  body.portfolio-exterior-page .portfolio-exterior-hero > .nav.page {
    padding: 18px 16px;
  }

  body.portfolio-exterior-page .portfolio-exterior-main {
    padding-top: 36px;
  }

  body.portfolio-exterior-page .portfolio-exterior-intro,
  body.portfolio-exterior-page .portfolio-exterior-gallery,
  body.portfolio-exterior-page .portfolio-exterior-gallery-head {
    width: calc(100% - 32px);
  }

  body.portfolio-exterior-page .portfolio-exterior-copy-frame {
    padding: 24px 18px 20px 14px;
    border-left-width: 3px;
    border-bottom-width: 3px;
  }

  body.portfolio-exterior-page .portfolio-exterior-copy-frame::before {
    height: 3px;
  }

  body.portfolio-exterior-page .portfolio-exterior-feature {
    width: min(100%, 360px);
    --feature-border: 4px;
  }

  body.portfolio-exterior-page .portfolio-exterior-points {
    grid-template-columns: 1fr;
    gap: 8px;
  }

  body.portfolio-exterior-page .portfolio-exterior-gallery-wrap {
    padding: 28px 0 34px;
  }

  body.portfolio-exterior-page .portfolio-exterior-gallery {
    grid-template-columns: repeat(2, minmax(0, 1fr));
    grid-auto-rows: 120px;
    gap: 8px;
  }

  body.portfolio-exterior-page .portfolio-card.wide {
    grid-column: span 2;
  }

  body.portfolio-exterior-page .portfolio-exterior-cta .cta-card {
    width: calc(100% - 32px);
    min-height: 180px;
  }
}

body.service-page main {
  position: relative;
  z-index: 3;
}

/* ===== Service Page: Intro ===== */
body.service-page .service-intro {
  padding: 4.6vw 0 2vw;
  text-align: center;
  margin-top: 0;
}

body.service-page .service-intro h2 {
  margin: 0 0 1.6vw;
  display: inline-flex;
  align-items: baseline;
  justify-content: center;
  gap: 1.15vw;
  font-family: "Outfit", sans-serif;
  font-size: 3.85vw;
  font-weight: 800;
  letter-spacing: 0.02em;
  line-height: 1;
  color: var(--purple);
  opacity: 0;
}

body.service-page .service-intro h2 .olive {
  color: var(--olive);
}

body.service-page .service-intro p {
  width: min(76vw, 1100px);
  margin: 0 auto;
  color: #1f1a22;
  font-family: "Didact Gothic", sans-serif;
  font-size: 1.05vw;
  line-height: 1.48;
  opacity: 0;
}

body.service-page .service-intro.is-visible h2 {
  animation: serviceIntroFadeIn 0.9s ease 0.12s forwards;
}

body.service-page .service-intro.is-visible p {
  animation: serviceIntroFadeIn 0.9s ease 0.34s forwards;
}

/* Service feature layout */
body.service-page .service-feature {
  display: grid;
  grid-template-columns: minmax(27vw, 31vw) minmax(28vw, 32vw);
  justify-content: center;
  align-items: center;
  gap: 4.8vw;
  padding: 3.4vw 0 3.8vw;
}

/* ===== Service Page: Exterior ===== */
body.service-page .service-feature-exterior {
  margin-top: 4vw;
  grid-template-columns: minmax(24vw, 27vw) minmax(24vw, 28vw);
  gap: 3.4vw;
}

body.service-page .service-feature-exterior .service-copy h3,
body.service-page .service-feature-exterior .service-copy p,
body.service-page .service-feature-exterior .service-copy .btn-dark {
  opacity: 0;
}

/* Service feature copy */
body.service-page .service-feature .service-copy h3 {
  transform: translateX(-36px);
}

body.service-page .service-feature-exterior .service-collage {
  width: 92%;
  margin-left: 0;
  justify-self: end;
}

/* Service feature title animation */
body.service-page .service-copy-title-text {
  position: relative;
  display: inline-block;
  color: #ffffff;
}

body.service-page .service-copy-title-text::before,
body.service-page .service-copy-title-text::after {
  content: attr(data-text);
  position: absolute;
  inset: 0;
}

body.service-page .service-copy-title-text::before {
  color: transparent;
  background: linear-gradient(90deg, rgba(68, 56, 80, 0) 0%, rgba(68, 56, 80, 0.24) 18%, rgba(68, 56, 80, 1) 50%, rgba(68, 56, 80, 0.24) 82%, rgba(68, 56, 80, 0) 100%);
  background-size: 28% 100%;
  background-repeat: no-repeat;
  background-position: -36% 0;
  -webkit-background-clip: text;
  background-clip: text;
  opacity: 0;
}

body.service-page .service-copy-title-text::after {
  color: var(--olive);
  clip-path: inset(0 100% 0 0);
}

body.service-page .service-feature.is-visible .service-copy-title-text::before {
  animation: serviceCopyTitleBeam 1.2s cubic-bezier(0.22, 1, 0.36, 1) 0.28s forwards;
}

body.service-page .service-feature.is-visible .service-copy-title-text::after {
  animation: serviceCopyTitleOliveSweep 1.08s cubic-bezier(0.22, 1, 0.36, 1) 0.38s forwards;
}

body.service-page .service-feature-exterior.is-visible .service-copy h3 {
  animation: serviceCopySlideIn 1.08s cubic-bezier(0.22, 1, 0.36, 1) 0.12s forwards;
}

body.service-page .service-feature-exterior.is-visible .service-copy p {
  animation: serviceCopySlideIn 1.1s cubic-bezier(0.22, 1, 0.36, 1) 0.32s forwards;
}

body.service-page .service-feature-exterior.is-visible .service-copy .btn-dark {
  animation: serviceCopySlideIn 1.14s cubic-bezier(0.22, 1, 0.36, 1) 0.52s forwards;
}

/* ===== Service Page: Interior ===== */
body.service-page .service-feature-interior {
  margin-top: 3vw;
  grid-template-columns: minmax(24vw, 28vw) minmax(24vw, 27vw);
  gap: 3.4vw;
}

body.service-page .service-feature-interior .service-collage {
  width: 92%;
  margin-left: 0;
}

body.service-page .service-feature-interior .service-copy {
  opacity: 0;
  transform: translateX(36px);
  justify-self: end;
  text-align: right;
  margin-right: 4.5vw;
  margin-top: -0.4vw;
  width: 37vw;
  max-width: 37vw;
}

body.service-page .service-feature-interior.is-visible .service-copy {
  animation: serviceCopySlideInRight 1.02s cubic-bezier(0.22, 1, 0.36, 1) 0.04s forwards;
}

body.service-page .service-feature-interior .service-copy h3 {
  width: 100%;
  margin-right: 0;
}

body.service-page .service-feature-interior .service-copy p,
body.service-page .service-feature-interior .service-copy .btn-dark {
  margin-left: auto;
  margin-right: -70px;
}

body.service-page .service-feature-interior .service-copy .btn-dark {
  width: 16vw;
  max-width: 16vw;
}

body.service-page .service-copy {
  padding-top: 0;
  max-width: 27vw;
  justify-self: start;
  align-self: center;
  margin: 0;
  margin-top: 0;
  margin-left: 0;
}

body.service-page .service-copy-exterior h3 {
  margin-left: 0px;
	margin-bottom: 30px;
  color: var(--olive);
  font-family: "Outfit", sans-serif;
  font-size: 4.95vw;
  font-weight: 700;
  letter-spacing: 0.02em;
  line-height: 0.98;
}

body.service-page .service-copy-interior h3 {
  margin-left: 110px;
	margin-bottom: 30px;
  color: var(--olive);
  font-family: "Outfit", sans-serif;
  font-size: 4.95vw;
  font-weight: 700;
  letter-spacing: 0.02em;
  line-height: 0.98;
}

body.service-page .service-copy-exterior p,
body.service-page .service-copy-interior p {
  max-width: 27vw;
  margin: 0 0 2.3vw;
  font-family: "Didact Gothic", sans-serif;
  font-size: 1.05vw;
  line-height: 1.48;
  text-align: justify;
  color: #201a23;
}

body.service-page .service-copy-exterior .btn-dark,
body.service-page .service-copy-interior .btn-dark {
  display: inline-flex;
  justify-content: center;
  align-items: center;
  margin-top: 0;
  margin-left: 0;
  min-width: 16vw;
  width: 18vw;
  padding: 0.95vw 2.6vw;
  background: var(--purple);
  color: var(--white);
  font-family: "Outfit", sans-serif;
  font-size: 1.05vw;
  font-weight: 600;
  border: 0.14vw solid transparent;
  transition: color 0.2s ease, background-color 0.2s ease, border-color 0.2s ease;
}

body.service-page .service-copy-exterior .btn-dark:hover,
body.service-page .service-copy-interior .btn-dark:hover {
  color: #443850;
  background: transparent;
  border-color: #7F8693;
}

/* Service feature collage and cards */
body.service-page .service-collage {
  display: grid;
  width: 100%;
  margin: 0;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: 0.7vw;
	
}

body.service-page .service-card {
  position: relative;
  isolation: isolate;
  display: block;
  overflow: hidden;
  transition: transform 0.35s cubic-bezier(0.22, 1, 0.36, 1), scale 0.35s cubic-bezier(0.22, 1, 0.36, 1), box-shadow 0.35s cubic-bezier(0.22, 1, 0.36, 1);
  will-change: transform, scale, box-shadow;
  z-index: 1;
}

body.service-page .service-card::before {
  content: "";
  position: absolute;
  inset: 0;
  background: var(--olive);
  z-index: 0;
  clip-path: polygon(0 0, 78% 0, 100% 50%, 100% 100%, 0 100%);
}

body.service-page .service-card img {
  position: absolute;
  inset: 0.42vw;
  width: calc(100% - 0.84vw);
  height: calc(100% - 0.84vw);
  object-fit: cover;
  z-index: 1;
  pointer-events: none;
}

body.service-page .service-card:hover {
  box-shadow: 0 1.1vw 2.8vw rgba(68, 56, 80, 0.18);
}

body.service-page .service-grid-block:hover {
  transform: none;
  box-shadow: none;
}

body.service-page .service-grid-photo,
body.service-page .service-grid-block {
  min-width: 0;
  min-height: 0;
  aspect-ratio: 1 / 1;
  translate: 0 0;
  scale: 1;
}

body.service-page .service-grid-photo::before,
body.service-page .service-grid-block::before {
  content: "";
  position: absolute;
  inset: 0;
  z-index: 0;
}

body.service-page .service-grid-photo::before {
  background: var(--olive);
}

body.service-page .service-grid-photo::after {
  content: "";
  position: absolute;
  inset: 0.42vw;
  background: rgba(187, 190, 100, 0.7);
  opacity: 0;
  z-index: 2;
  transition: opacity 0.3s ease;
}

body.service-page .service-card-overlay-text {
  position: absolute;
  inset: 0.42vw;
  z-index: 3;
  display: flex;
  align-items: center;
  justify-content: center;
  padding: 1vw;
  color: var(--white);
  font-family: "Outfit", sans-serif;
  font-size: 1.45vw;
  font-weight: 700;
  line-height: 1.15;
  letter-spacing: 0.01em;
  text-align: center;
  opacity: 0;
  transition: opacity 0.3s ease;
  pointer-events: none;
}

body.service-page .service-grid-photo:hover::after,
body.service-page .service-grid-photo:hover .service-card-overlay-text {
  opacity: 1;
}

body.service-page .service-feature-exterior .service-card,
body.service-page .service-feature-interior .service-card {
  opacity: 0;
}

body.service-page .service-feature-exterior.is-visible .service-grid-block {
  animation: serviceFeatureBounceIn 1.08s cubic-bezier(0.22, 1, 0.36, 1) forwards;
}

body.service-page .service-feature-exterior.is-visible .exterior-block-top-right {
  animation:
    serviceFeatureBounceIn 1.08s cubic-bezier(0.22, 1, 0.36, 1) forwards,
    serviceImageFloat 4.95s ease-in-out 1.35s infinite;
}

body.service-page .service-feature-exterior.is-visible .service-grid-photo {
  animation-name: serviceFeatureBounceIn, serviceImageFloat;
  animation-duration: 1.08s, 4.6s;
  animation-timing-function: cubic-bezier(0.22, 1, 0.36, 1), ease-in-out;
  animation-delay: 0.18s, 1.45s;
  animation-iteration-count: 1, infinite;
  animation-fill-mode: forwards, both;
}

body.service-page .service-feature-exterior.is-visible .exterior-photo-top-left {
  animation-delay: 0.18s, 1.45s;
}

body.service-page .service-feature-exterior.is-visible .exterior-block-top-right {
  animation-delay: 0.42s;
}

body.service-page .service-feature-exterior.is-visible .exterior-photo-middle-left {
  animation-delay: 0.42s, 1.69s;
}

body.service-page .service-feature-exterior.is-visible .exterior-photo-middle-right,
body.service-page .service-feature-exterior.is-visible .exterior-photo-bottom-left {
  animation-delay: 0.66s, 1.93s;
}

body.service-page .service-feature-exterior.is-visible .exterior-photo-bottom-right {
  animation-delay: 0.9s, 2.17s;
}

body.service-page .service-feature-exterior.is-visible .exterior-photo-top-left,
body.service-page .service-feature-exterior.is-visible .exterior-photo-middle-right,
body.service-page .service-feature-exterior.is-visible .exterior-photo-bottom-left {
  animation-duration: 1.08s, 4.2s;
}

body.service-page .service-feature-exterior.is-visible .exterior-photo-middle-left,
body.service-page .service-feature-exterior.is-visible .exterior-photo-bottom-right {
  animation-duration: 1.08s, 4.9s;
}

body.service-page .service-feature-interior.is-visible .service-grid-photo {
  animation-name: serviceFeatureBounceIn, serviceImageFloat;
  animation-duration: 1.08s, 4.8s;
  animation-timing-function: cubic-bezier(0.22, 1, 0.36, 1), ease-in-out;
  animation-delay: 0.18s, 1.4s;
  animation-iteration-count: 1, infinite;
  animation-fill-mode: forwards, both;
}

body.service-page .service-feature-interior.is-visible .service-grid-block {
  animation: serviceFeatureBounceIn 1.08s cubic-bezier(0.22, 1, 0.36, 1) forwards;
}

body.service-page .service-feature-interior.is-visible .interior-block-top-left {
  animation:
    serviceFeatureBounceIn 1.08s cubic-bezier(0.22, 1, 0.36, 1) 0.42s forwards,
    serviceImageFloat 4.95s ease-in-out 1.62s infinite;
}

body.service-page .service-feature-interior.is-visible .interior-photo-top-right {
  animation-delay: 0.18s, 1.4s;
}

body.service-page .service-feature-interior.is-visible .interior-block-top-left {
  animation-delay: 0.42s;
}

body.service-page .service-feature-interior.is-visible .interior-photo-middle-right {
  animation-delay: 0.42s, 1.64s;
}

body.service-page .service-feature-interior.is-visible .interior-photo-middle-left,
body.service-page .service-feature-interior.is-visible .interior-photo-bottom-right {
  animation-delay: 0.66s, 1.88s;
}

body.service-page .service-feature-interior.is-visible .interior-photo-bottom-left {
  animation-delay: 0.9s, 2.12s;
}

body.service-page .service-grid-photo:hover {
  scale: 1.035;
  box-shadow: 0 1.35vw 3.2vw rgba(68, 56, 80, 0.24);
  z-index: 6;
}

/* Service feature shape variants */
body.service-page .exterior-photo-top-left::before,
body.service-page .exterior-photo-middle-left::before,
body.service-page .exterior-photo-middle-right::before,
body.service-page .exterior-photo-bottom-left::before,
body.service-page .exterior-photo-bottom-right::before {
  clip-path: polygon(0 0, 100% 0, 100% 100%, 0 100%);
}

body.service-page .exterior-block-top-right::before {
  background: var(--olive);
  clip-path: polygon(0 0, 60% 0, 100% 50%, 100% 100%, 0 100%);
}

body.service-page .interior-photo-top-right::before,
body.service-page .interior-photo-middle-left::before,
body.service-page .interior-photo-middle-right::before,
body.service-page .interior-photo-bottom-left::before,
body.service-page .interior-photo-bottom-right::before {
  clip-path: polygon(0 0, 100% 0, 100% 100%, 0 100%);
}

body.service-page .interior-block-top-left::before {
  clip-path: polygon(40% 0, 100% 0, 100% 100%, 0 100%, 0 50%);
}

/* Service feature grid placement */
body.service-page .exterior-photo-top-left {
  grid-column: 1;
  grid-row: 1;
}

body.service-page .exterior-block-top-right {
  grid-column: 2;
  grid-row: 1;
}

body.service-page .exterior-photo-middle-left {
  grid-column: 1;
  grid-row: 2;
}

body.service-page .exterior-photo-middle-right {
  grid-column: 2;
  grid-row: 2;
}

body.service-page .exterior-photo-bottom-left {
  grid-column: 1;
  grid-row: 3;
}

body.service-page .exterior-photo-bottom-right {
  grid-column: 2;
  grid-row: 3;
}

body.service-page .interior-block-top-left {
  grid-column: 1;
  grid-row: 1;
}

body.service-page .interior-photo-top-right {
  grid-column: 2;
  grid-row: 1;
}

body.service-page .interior-photo-middle-left {
  grid-column: 1;
  grid-row: 2;
}

body.service-page .interior-photo-middle-right {
  grid-column: 2;
  grid-row: 2;
}

body.service-page .interior-photo-bottom-left {
  grid-column: 1;
  grid-row: 3;
}

body.service-page .interior-photo-bottom-right {
  grid-column: 2;
  grid-row: 3;
}

/* ===== Service Page: How We Work ===== */
body.service-page .service-work {
  margin-top: 3.2vw;
  padding: 4.8vw 0 5.2vw;
  background: var(--purple);
}

body.service-page .service-work h2 {
  margin-top: 0;
  margin-bottom: 3.8vw;
  text-align: center;
  color: var(--white);
  font-family: "Outfit", sans-serif;
  font-size: 4.45vw;
  font-weight: 800;
  line-height: 1;
  opacity: 0;
  transform: translateY(18px);
}

body.service-page .service-work.is-visible h2 {
  animation: serviceIntroFadeIn 0.9s ease 0.06s forwards;
}

body.service-page .service-work h2 span {
  color: var(--olive);
}

body.service-page .service-work-grid {
  display: grid;
  grid-template-columns: repeat(4, minmax(0, 1fr));
  grid-template-areas:
    "icon-a step-2 icon-b step-4"
    "step-1 icon-c step-3 icon-d";
  align-items: center;
  justify-items: center;
  width: min(72vw, 1200px);
  margin-left: auto;
  margin-right: auto;
  gap: 2vw 10.4vw;
}

body.service-page .service-work-step {
  position: relative;
  height: 13.8vw;
  width: 12.8vw;
  aspect-ratio: 1 / 1;
  padding: 1vw 1.1vw;
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  background: var(--olive);
  clip-path: polygon(0 0, 62% 0, 100% 36%, 100% 100%, 0 100%);
  text-align: center;
  overflow: hidden;
  opacity: 0;
  backface-visibility: hidden;
  will-change: transform, opacity;
}

body.service-page .service-work-step-1 {
  grid-area: step-1;
}

body.service-page .service-work-step-2 {
  grid-area: step-2;
}

body.service-page .service-work-step-3 {
  grid-area: step-3;
}

body.service-page .service-work-step-1,
body.service-page .service-work-step-3 {
  transform: translateY(3.9vw);
  clip-path: polygon(0 0, 100% 0, 100% 64%, 62% 100%, 0 100%);
}

body.service-page .service-work-step-4 {
  grid-area: step-4;
}

body.service-page .service-work-step-2,
body.service-page .service-work-step-4 {
  transform: translateY(-3.9vw);
}

body.service-page .service-work.is-visible .service-work-icon-a {
  animation:
    serviceFeatureBounceIn 0.9s cubic-bezier(0.22, 1, 0.36, 1) 0.1s both,
    serviceImageFloat 4.7s ease-in-out 1.08s infinite;
}

body.service-page .service-work.is-visible .service-work-step-1 {
  animation: serviceWorkSlideUp 0.9s cubic-bezier(0.22, 1, 0.36, 1) 0.34s both;
}

body.service-page .service-work.is-visible .service-work-icon-c {
  animation:
    serviceFeatureBounceIn 0.9s cubic-bezier(0.22, 1, 0.36, 1) 0.58s both,
    serviceImageFloat 4.9s ease-in-out 1.56s infinite;
}

body.service-page .service-work.is-visible .service-work-step-2 {
  animation: serviceWorkSlideDown 0.9s cubic-bezier(0.22, 1, 0.36, 1) 0.82s both;
}

body.service-page .service-work.is-visible .service-work-icon-b {
  animation:
    serviceFeatureBounceIn 0.9s cubic-bezier(0.22, 1, 0.36, 1) 1.06s both,
    serviceImageFloat 4.8s ease-in-out 2.04s infinite;
}

body.service-page .service-work.is-visible .service-work-step-3 {
  animation: serviceWorkSlideUp 0.9s cubic-bezier(0.22, 1, 0.36, 1) 1.3s both;
}

body.service-page .service-work.is-visible .service-work-icon-d {
  animation:
    serviceFeatureBounceIn 0.9s cubic-bezier(0.22, 1, 0.36, 1) 1.54s both,
    serviceImageFloat 5s ease-in-out 2.52s infinite;
}

body.service-page .service-work.is-visible .service-work-step-4 {
  animation: serviceWorkSlideDown 0.9s cubic-bezier(0.22, 1, 0.36, 1) 1.78s both;
}

body.service-page .service-work-step-2 h3,
body.service-page .service-work-step-2 p,
body.service-page .service-work-step-4 h3,
body.service-page .service-work-step-4 p {
  position: relative;
  top: 1vw;
}

body.service-page .service-work-step-1 h3,
body.service-page .service-work-step-1 p,
body.service-page .service-work-step-3 h3,
body.service-page .service-work-step-3 p {
  position: relative;
  top: -1vw;
}

body.service-page .service-work-icon {
  width: 8.3vw;
  aspect-ratio: 1 / 1;
  display: grid;
  place-items: center;
  background: var(--white);
  border-radius: 50%;
  opacity: 0;
  transform: scale(0.82);
  backface-visibility: hidden;
  will-change: transform, opacity;
}

body.service-page .service-work-icon-a {
  grid-area: icon-a;
}

body.service-page .service-work-icon-b {
  grid-area: icon-b;
}

body.service-page .service-work-icon-c {
  grid-area: icon-c;
}

body.service-page .service-work-icon-d {
  grid-area: icon-d;
}

body.service-page .service-work-icon img {
  width: 4.2vw;
  height: 4.2vw;
  display: block;
  margin: auto;
  object-fit: contain;
  object-position: center;
  place-self: center;
}

body.service-page .service-work-step h3 {
  margin: 0 0 0.8vw;
  color: var(--white);
  font-family: "Outfit", sans-serif;
  font-size: 2.35vw;
  font-weight: 800;
  line-height: 1;
  text-align: center;
  margin-left: 0;
}

body.service-page .service-work-step p {
  margin: 0;
  color: var(--white);
  font-family: "Didact Gothic", sans-serif;
  font-size: 22px;
  text-align: center;
  line-height: 1.3;
  margin-left: 0;
}

body.service-page .service-work-step-detail {
  position: absolute;
  inset: 0;
  z-index: 2;
  display: flex;
  align-items: center;
  justify-content: center;
  padding: 1.15vw 1.2vw;
  background: #ffffff;
  color: #1f1a22;
  font-family: "Didact Gothic", sans-serif;
  font-size: 16px;
  line-height: 1.35;
  text-align:justify;
  opacity: 0;
  transform: translateY(100%);
  transition: transform 0.42s cubic-bezier(0.22, 1, 0.36, 1), opacity 0.32s ease;
	
}

body.service-page .service-work-step-1 .service-work-step-detail,
body.service-page .service-work-step-3 .service-work-step-detail {
  transform: translateY(-100%);
  padding-top: 1.0vw;
  padding-bottom: 3.3vw;
  padding-left: 1.8vw;
  padding-right: 1.8vw;
}

body.service-page .service-work-step-2 .service-work-step-detail,
body.service-page .service-work-step-4 .service-work-step-detail {
  transform: translateY(100%);
  padding-top: 4.5vw;
  padding-bottom: 1.85vw;
  padding-left: 1.8vw;
  padding-right: 1.8vw;
}



body.service-page .service-work-step:hover .service-work-step-detail {
  opacity: 1;
  transform: translateY(0);
}

/* Service assurance */
/* ===== Service Page: Assurance Statements ===== */
body.service-page .service-assurance {
  --service-assurance-people-width: 25vw;
  --service-assurance-people-left: -1.6vw;
  padding: 4.8vw 0 4.6vw;
}

body.service-page .service-assurance-grid {
  display: grid;
  grid-template-columns: minmax(0, 0.94fr) minmax(0, 1.26fr);
  align-items: start;
  gap: 3.2vw;
	
}

body.service-page .service-assurance-copy {
  position: relative;
  min-height: 34vw;
  padding: 0.8vw 0 0;
  overflow: visible;
}

body.service-page .service-assurance-copy-text {
  position: relative;
  z-index: 2;
  max-width: 36vw;
  padding-left: 2vw;
	
}

body.service-page .service-assurance-copy-text h2 {
  margin-left: clamp(220px, 11vw, 280px);
  opacity: 0;
  transform: translateX(-96px);
  color: var(--olive);
  font-family: "Recoleta", "Outfit", sans-serif;
  font-size: 4.3vw;
  font-weight: 700;
  line-height: 1.08;
}

body.service-page .service-assurance-copy-text p {
  margin-top: 2.6vw;
  margin-left: clamp(280px, 11vw, 300px);
  width: 20vw;
  opacity: 0;
  transform: translateX(-72px);
  color: var(--purple);
  font-family: "Didact Gothic", sans-serif;
  font-size: 1.0vw;
  line-height: 1.45;
  text-align: justify;
}

body.service-page .service-assurance-people {
  position: absolute;
  left: var(--service-assurance-people-left);
  bottom: 0;
  z-index: 1;
  width: clamp(270px, var(--service-assurance-people-width), 370px);
  display: block;
  pointer-events: none;
  opacity: 0;
  transform: translateX(-84px);
}

body.service-page .service-assurance.is-visible .service-assurance-copy-text h2 {
  animation: serviceCopySlideIn 0.82s cubic-bezier(0.22, 1, 0.36, 1) 0.08s forwards;
}

body.service-page .service-assurance.is-visible .service-assurance-people,
body.service-page .service-assurance.is-visible .service-assurance-copy-text p {
  animation: serviceCopySlideIn 0.92s cubic-bezier(0.22, 1, 0.36, 1) 0.34s forwards;
}

body.service-page .service-assurance-bars {
  display: grid;
  gap: 1.8vw;
  padding-top: 0.2vw;
}

body.service-page .service-assurance-bar {
  position: relative;
  isolation: isolate;
  min-height: 7.2vw;
  width: 108%;
  padding: 1.45vw 2.6vw 1.45vw 6vw;
  display: flex;
  flex-direction: column;
  align-items: flex-start;
  justify-content: center;
  background: var(--purple);
  color: var(--olive);
  clip-path: polygon(10% 0, 100% 0, 100% 100%, 0 100%, 0 62%);
  text-align: left;
  opacity: 0;
  transform: translateX(120px);
  transition:
    transform 0.38s cubic-bezier(0.22, 1, 0.36, 1),
    background-color 0.32s ease,
    color 0.32s ease;
}

body.service-page .service-assurance-bar::before {
  content: "";
  position: absolute;
  inset: 0;
  z-index: 0;
  background: linear-gradient(90deg, #BBBE64 0%, #BBBE64 72%, rgba(255, 255, 255, 0.96) 86%, #BBBE64 100%);
  pointer-events: none;
}

body.service-page .service-assurance-bar-top {
  margin-left: 0;
}

body.service-page .service-assurance-bar-middle {
  margin-left: 3vw;
}

body.service-page .service-assurance-bar-bottom {
  margin-left: 6vw;
}

body.service-page .service-assurance-bar h3 {
  margin: 0;
  position: relative;
  z-index: 1;
  font-family: "Recoleta", "Outfit", sans-serif;
  font-size: 3.05vw;
  font-weight: 700;
  line-height: 1.02;
  text-align: left;
  transition: color 0.32s ease;
}

body.service-page .service-assurance-bar-top h3,
body.service-page .service-assurance-bar-bottom h3 {
  color: #EAF0CF;
}

body.service-page .service-assurance-bar p {
  margin: 0;
  padding-top: 0.2vw;
  position: relative;
  z-index: 1;
  color: #EAF0CF;
  font-family: "Didact Gothic", sans-serif;
  font-size: 1.28vw;
  font-weight: 400;
  line-height: 1.1;
  text-align: left;
  transition: color 0.32s ease;
}

body.service-page .service-assurance-bar-middle p {
  color: #BBBE64;
}

body.service-page .service-assurance-bar-top p {
  color: #EAF0CF;
}

body.service-page .service-assurance-bar:hover {
  transform: translateX(-1.2vw);
  background: #BBBE64;
  color: var(--white);
}

body.service-page .service-assurance-bar:hover h3,
body.service-page .service-assurance-bar:hover p {
  color: var(--white);
}

body.service-page .service-assurance.is-visible .service-assurance-bar {
  animation:
    serviceAssuranceBarSlideIn 0.62s cubic-bezier(0.22, 1, 0.36, 1) both,
    serviceAssuranceBarSway 4.6s ease-in-out 0.72s infinite;
}

body.service-page .service-assurance.is-visible .service-assurance-bar::before {
  animation: serviceAssuranceBarSweep 1.05s cubic-bezier(0.22, 1, 0.36, 1) both;
}

body.service-page .service-assurance.is-visible .service-assurance-bar-top {
  animation-delay: 0.08s, 0.8s;
}

body.service-page .service-assurance.is-visible .service-assurance-bar-top::before {
  animation-delay: 0.38s;
}

body.service-page .service-assurance.is-visible .service-assurance-bar-middle {
  animation-delay: 0.42s, 1.14s;
}

body.service-page .service-assurance.is-visible .service-assurance-bar-middle::before {
  animation-delay: 0.72s;
}

body.service-page .service-assurance.is-visible .service-assurance-bar-bottom {
  animation-delay: 0.76s, 1.48s;
}

body.service-page .service-assurance.is-visible .service-assurance-bar-bottom::before {
  animation-delay: 1.06s;
}

/* ===== Service Page: We Serve At ===== */
body.service-page .service-area {
  padding: 4vw 0 4.8vw;
}

body.service-page .service-area-grid {
  display: grid;
  grid-template-columns: minmax(0, 0.78fr) minmax(0, 1.22fr);
  grid-template-areas:
    "map copy"
    "map truck";
  align-items: start;
  gap: 1vw 2.2vw;
}

body.service-page .service-area-map {
  grid-area: map;
  align-self: center;
  position: relative;
  opacity: 0;
  transform: translateX(-180px);
  backface-visibility: hidden;
  will-change: transform, opacity;
}

body.service-page .service-area-copy {
  grid-area: copy;
  align-self: end;
  padding: 0 0 0 0.6vw;
}

body.service-page .service-area-truck {
  grid-area: truck;
  align-self: start;
  margin-top: 5vw;
  margin-left: 10vw;
  width: 110%;
}

body.service-page .service-area-map img {
  width: 74%;
  height: auto;
  display: block;
  margin-inline: auto;
}

body.service-page .service-map-before {
  position: relative;
  z-index: 1;
  opacity: 1;
  transform: none;
}

body.service-page .service-map-after {
  position: absolute;
  inset: 0;
  z-index: 2;
  opacity: 0;
  transform: none;
  will-change: opacity;
}

body.service-page .service-area.is-visible .service-area-map {
  animation:
    serviceCopySlideIn 0.92s cubic-bezier(0.22, 1, 0.36, 1) 0.08s forwards,
    serviceImageFloat 5s ease-in-out 1.44s infinite;
}

body.service-page .service-area.is-visible .service-map-after {
  animation: serviceMapFadeIn 0.92s ease 0.24s forwards;
}

body.service-page .service-area-copy h2 {
  margin: 0 0 1.4vw;
  color: var(--olive);
  font-family: "Outfit", sans-serif;
  font-size: 4.45vw;
  font-weight: 700;
  line-height: 1;
  opacity: 0;
  transform: translateX(170px);
}

body.service-page .service-area-copy ul {
  margin: 0;
  padding-left: 1.4vw;
  color: var(--purple);
  font-family: "Didact Gothic", sans-serif;
  font-size: 1.15vw;
  line-height: 1.55;
  opacity: 0;
  transform: translateX(170px);
}

body.service-page .service-area-truck img {
  width: 108%;
  height: auto;
  display: block;
  margin-left: -5vw;
  opacity: 0;
  transform: translateX(44vw);
}

body.service-page .service-area.is-visible .service-area-copy h2 {
  animation: serviceCopySlideInRight 0.86s cubic-bezier(0.22, 1, 0.36, 1) 0.12s forwards;
}

body.service-page .service-area.is-visible .service-area-copy ul {
  animation: serviceCopySlideInRight 0.94s cubic-bezier(0.22, 1, 0.36, 1) 0.3s forwards;
}

body.service-page .service-area.is-visible .service-area-truck img {
  animation:
    serviceTruckDriveIn 1.12s cubic-bezier(0.22, 1, 0.36, 1) 0.42s forwards,
    serviceTruckSway 7s ease-in-out 1.62s infinite;
}

body.service-page .service-cta-wrap {
  position: relative;
  z-index: 3;
  padding: 1.6vw 0 0;
}

body.service-page .float-up,
body.service-page .float-wa {
  z-index: 9;
}

@media (max-width: 1200px) {
  body.service-page main .page {
    width: calc(100% - 48px);
  }

  body.service-page .service-hero {
    min-height: 62vw;
    background-size: cover;
    background-position: center;
    border-radius: 0 0 72% 72% / 0 0 42% 42%;
  }

  body.service-page .service-hero .nav.page {
    padding-inline: 48px;
  }

  body.service-page .service-hero-content,
  body.service-page .service-hero-content.page {
    min-height: 62vw;
  }

  body.service-page .service-hero-content h1 {
    font-size: 8.6vw;
  }

  body.service-page .service-intro h2 {
    font-size: 3.2vw;
  }

  body.service-page .service-intro p,
  body.service-page .service-copy p,
  body.service-page .service-area-copy ul {
    font-size: 1.45vw;
  }

  body.service-page .service-feature,
  body.service-page .service-area-grid,
  body.service-page .service-assurance-grid {
    grid-template-columns: 1fr;
  }

  body.service-page .service-collage {
    grid-template-columns: repeat(3, 1fr);
  }

  body.service-page .service-work-grid {
    grid-template-columns: repeat(2, minmax(0, 1fr));
    grid-template-areas:
      "icon-a step-2"
      "step-1 icon-b"
      "icon-c step-4"
      "step-3 icon-d";
    gap: 2.4vw 2vw;
  }

  body.service-page .service-work h2,
  body.service-page .service-area-copy h2,
  body.service-page .footer-links h3 {
    font-size: 120px;
  }

  body.service-page .service-work-step,
  body.service-page .service-work-icon {
    width: 24vw;
  }

  body.service-page .service-work-icon img {
    width: 7vw;
    height: 7vw;
  }

  body.service-page .service-work-step h3 {
    font-size: 3.2vw;
  }

  body.service-page .service-work-step p,
  body.service-page .service-assurance-copy-text p,
  body.service-page .service-assurance-bar p,
  body.service-page .footer-links a,
  body.service-page .footer p {
    font-size: 1.7vw;
  }

  body.service-page .service-work-step-detail {
    font-size: 1.45vw;
    padding: 2vw 2.1vw;
  }

  body.service-page .service-assurance-copy-text h2 {
    font-size: 5.6vw;
  }

  body.service-page .service-assurance-bar h3 {
    font-size: 4vw;
  }

  body.service-page .service-assurance-grid {
    gap: 3vw;
  }

  body.service-page .service-assurance-copy {
    min-height: 52vw;
  }

  body.service-page .service-assurance-copy-text {
    max-width: 100%;
    padding-left: 7vw;
  }

  body.service-page .service-assurance-copy-text p {
    max-width: 36vw;
    padding-left: 8vw;
  }

  body.service-page .service-assurance {
    --service-assurance-people-width: 10vw;
    --service-assurance-people-left: -1vw;
  }

  body.service-page .service-assurance-bar {
    min-height: 14vw;
    padding: 2.4vw 3vw 2.1vw 5vw;
  }

  body.service-page .service-cta-wrap .cta-card {
    width: 88%;
  }
}

@media (max-width: 768px) {
  body.service-page main .page {
    width: calc(100% - 32px);
  }

  body.service-page .service-hero {
    min-height: 128vw;
    background:
      linear-gradient(180deg, rgba(68, 56, 80, 0.42) 0%, rgba(187, 190, 100, 0.48) 100%),
      url("./Images/service page/1bf54ce8-c8a3-49a9-a0ea-363b6cd5a6a6.png") center 36% / cover no-repeat;
    border-radius: 0 0 82% 82% / 0 0 26% 26%;
  }

  body.service-page .service-hero .nav.page {
    padding: 18px 16px;
  }

  body.service-page .service-hero-content,
  body.service-page .service-hero-content.page {
    min-height: 128vw;
  }

  body.service-page .service-hero-content h1 {
    font-size: 50vw;
  }

  body.service-page .service-intro {
    padding: 14vw 0 8vw;
  }

  body.service-page .service-intro h2,
  body.service-page .service-copy h3,
  body.service-page .service-work h2,
  body.service-page .service-area-copy h2,
  body.service-page .footer-links h3 {
    font-size: 8vw;
  }

  body.service-page .service-intro p,
  body.service-page .service-copy p,
  body.service-page .service-work-step p,
  body.service-page .service-assurance-copy-text p,
  body.service-page .service-assurance-bar p,
  body.service-page .service-area-copy ul,
  body.service-page .footer p,
  body.service-page .footer-links a {
    font-size: 4vw;
    line-height: 1.7;
  }

  body.service-page .service-feature {
    gap: 8vw;
    padding: 8vw 0 10vw;
  }

  body.service-page .service-copy .btn-dark {
    min-width: 44vw;
    height: 13vw;
    font-size: 3.6vw;
  }

  body.service-page .service-card-overlay-text {
    font-size: 5vw;
    padding: 4vw;
  }

  body.service-page .service-collage {
    grid-template-columns: repeat(2, 1fr);
    gap: 3vw;
  }

  body.service-page .service-work {
    padding: 12vw 0 10vw;
  }

  body.service-page .service-work-grid {
    grid-template-columns: repeat(2, minmax(0, 1fr));
    grid-template-areas:
      "icon-a step-2"
      "step-1 icon-b"
      "icon-c step-4"
      "step-3 icon-d";
    gap: 6vw;
  }

  body.service-page .service-work-step,
  body.service-page .service-work-icon {
    width: 100%;
  }

  body.service-page .service-work-icon img {
    width: 12vw;
    height: 12vw;
  }

  body.service-page .service-work-step h3 {
    font-size: 4.4vw;
  }

  body.service-page .service-work-step-detail {
    font-size: 3.4vw;
    padding: 5vw 5.2vw;
  }

  body.service-page .service-assurance {
    padding: 10vw 0 8vw;
  }

  body.service-page .service-assurance-copy {
    min-height: auto;
    padding: 0;
  }

  body.service-page .service-assurance-copy-text {
    padding-left: 0;
  }

  body.service-page .service-assurance-copy-text h2 {
    font-size: 12vw;
  }

  body.service-page .service-assurance-copy-text p {
    max-width: none;
    padding-left: 0;
    margin-top: 4vw;
    font-size: 4.8vw;
  }

  body.service-page .service-assurance-people {
    position: static;
    width: 52vw;
    margin-top: 4vw;
  }

  body.service-page .service-assurance-bars {
    gap: 3vw;
    padding-top: 2vw;
  }

  body.service-page .service-assurance-bar,
  body.service-page .service-assurance-bar-top,
  body.service-page .service-assurance-bar-middle,
  body.service-page .service-assurance-bar-bottom {
    margin-left: 0;
    min-height: auto;
    padding: 5.6vw 5vw;
  }

  body.service-page .service-assurance-bar h3 {
    font-size: 8vw;
  }

  body.service-page .service-assurance-bar p {
    padding-top: 1vw;
    font-size: 4.8vw;
  }

  body.service-page .service-area {
    padding: 5vw 0 12vw;
  }

  body.service-page .service-area-grid {
    grid-template-columns: 1fr;
    grid-template-areas:
      "copy"
      "map"
      "truck";
    gap: 6vw;
  }

  body.service-page .service-area-copy {
    padding-left: 0;
  }

  body.service-page .service-area-copy h2 {
    font-size: 10vw;
  }

  body.service-page .service-area-copy ul {
    padding-left: 5vw;
    font-size: 4.8vw;
  }

  body.service-page .service-area-map img,
  body.service-page .service-area-truck img {
    width: 100%;
    margin-left: 0;
  }

  body.service-page .service-cta-wrap {
    padding-top: 10vw;
  }

  body.service-page .service-cta-wrap .cta-card {
    width: calc(100% - 32px);
  }
}

/* Contact Page */
body.contact-page {
  background: var(--white);
}

/* ===== Contact Page: Hero ===== */
body.contact-page .contact-hero {
  position: relative;
  min-height: 41vw;
  background:
    linear-gradient(180deg, rgba(68, 56, 80, 0.3) 0%, rgba(187, 190, 100, 0.3) 100%),
    url("./Images/Contact/kok.png") center 30% / 100% no-repeat;
  border-radius: 0 0 70% 70% / 0 0 70% 70%;
  overflow: hidden;
  padding-top: 7.5vw;
}

body.contact-page .contact-hero::before {
  content: "";
  position: absolute;
  inset: 0;
  background: rgba(255, 255, 255, 0.06);
}

body.contact-page .contact-hero > .nav.page {
  position: absolute;
  top: 0;
  left: 0;
  right: 0;
  width: 100%;
  max-width: none;
  margin: 0;
  padding: 0.55vw 32px;
  z-index: 10;
}

body.contact-page .contact-hero .menu .active {
  color: var(--olive);
}

body.contact-page .contact-hero .menu-contact > a,
body.contact-page .contact-hero > .nav.page > .btn-outline {
  color: #ffffff;
}

body.contact-page .contact-hero > .nav.page > .btn-outline {
  border-color: #ffffff;
}

body.contact-page .contact-hero > .nav.page.is-sticky > .btn-outline {
  color: #BBBE64;
  border-color: #BBBE64;
}

body.contact-page .contact-hero > .nav.page.is-sticky > .btn-outline:hover {
  color: #443850;
  border-color: #443850;
}

body.contact-page .contact-hero .menu .active::after {
  transform: scaleX(1);
  background: #443850;
}

body.contact-page .contact-hero .nav.is-sticky {
  position: fixed;
}

body.contact-page .contact-hero .nav-progress {
  bottom: 0;
}

body.contact-page .contact-hero-content {
  position: absolute;
  inset: 0;
  z-index: 2;
  display: grid;
  place-items: center;
  padding-top: 4vw;
}

body.contact-page .contact-hero-kicker {
  display: none;
}

body.contact-page .contact-hero-content h1 {
  margin: -1vw 0 0;
  font-family: "Outfit", sans-serif;
  font-size: 6.8vw;
  font-weight: 700;
  line-height: 1.18;
  letter-spacing: 0.02em;
  width: 150%;
  text-align: center;
}

body.contact-page .contact-hero-line {
  position: relative;
  display: inline-block;
  color: #443850;
  opacity: 0;
  animation: aboutHeroTitleFadeUp 0.9s ease forwards;
}

body.contact-page .contact-hero-contact {
  animation-delay: 0.52s;
}

body.contact-page .contact-hero-us {
  animation-delay: 0.72s;
}

body.contact-page .contact-hero-line::before {
  content: attr(data-text);
  position: absolute;
  inset: 0;
  background: linear-gradient(90deg, rgba(187, 190, 100, 0) 0%, rgba(187, 190, 100, 0.82) 28%, rgba(234, 240, 207, 1) 50%, rgba(187, 190, 100, 0.98) 68%, rgba(187, 190, 100, 0) 100%);
  background-size: 26% 100%;
  background-repeat: no-repeat;
  background-position: -30% 0;
  -webkit-background-clip: text;
  background-clip: text;
  color: transparent;
  opacity: 0;
  filter: drop-shadow(0 0 0.55vw rgba(187, 190, 100, 0.55));
  pointer-events: none;
}

body.contact-page .contact-hero-line::after {
  content: attr(data-text);
  position: absolute;
  inset: 0;
  color: #ffffff;
  clip-path: inset(0 100% 0 0);
  pointer-events: none;
}

body.contact-page .contact-hero-contact::before,
body.contact-page .contact-hero-contact::after {
  animation-duration: 1.08s;
  animation-timing-function: cubic-bezier(0.22, 1, 0.36, 1);
  animation-delay: 0.98s;
  animation-fill-mode: forwards;
}

body.contact-page .contact-hero-us::before,
body.contact-page .contact-hero-us::after {
  animation-duration: 1.18s;
  animation-timing-function: cubic-bezier(0.22, 1, 0.36, 1);
  animation-delay: 1.24s;
  animation-fill-mode: forwards;
}

body.contact-page .contact-hero-contact::before,
body.contact-page .contact-hero-us::before {
  animation-name: heroTitleBeam;
}

body.contact-page .contact-hero-contact::after,
body.contact-page .contact-hero-us::after {
  animation-name: heroTitleSweep;
}

body.contact-page .contact-hero-bottom-curve {
  display: none;
}

body.contact-page .contact-main {
  position: relative;
  z-index: 4;
}

/* ===== Contact Page: Contact Section ===== */
body.contact-page .contact-section {
  padding: 5.9vw 0 2.8vw;
}

body.contact-page .contact-shell {
  width: min(84vw, 1320px);
  margin: 0 auto;
  display: grid;
  grid-template-columns: minmax(0, 1fr) 32.8vw;
  column-gap: 4vw;
  align-items: start;
}

body.contact-page .contact-copy {
  padding-top: 1.05vw;
}

body.contact-page .contact-copy h2 {
  margin: 0 0 1.05vw;
  color: var(--purple);
  font-family: "Outfit", sans-serif;
  font-size: 4.0vw;
  font-weight: 700;
  line-height: 0.94;
  letter-spacing: 0em;
	width: 800px;
}

body.contact-page .contact-eyebrow {
  display: none;
}

body.contact-page .contact-intro {
  max-width: 33.5vw;
  margin: 0 0 3vw;
  color: #2f2938;
  font-family: "Didact Gothic", sans-serif;
  font-size: 1.03vw;
  line-height: 1.55;
	text-align: justify;
}

body.contact-page .contact-info-list {
  display: grid;
  gap: 1.9vw;
}

body.contact-page .contact-info-item {
  display: grid;
  grid-template-columns: 5vw 1fr;
  gap: 1.3vw;
  align-items: center;
}

body.contact-page .contact-info-icon {
  display: grid;
  place-items: center;
  width: 4.8vw;
  height: 4.8vw;
  margin-top: 0;
  background: #BBBE64;
  border-radius: 0.7vw;
  overflow: hidden;
}

body.contact-page .contact-info-icon img {
  width: 62%;
  height: 62%;
  object-fit: contain;
  display: block;
}

body.contact-page .contact-info-item h3 {
  margin: 0 0 0.28vw;
  color: var(--olive);
  font-family: "Outfit", sans-serif;
  font-size: 1.2vw;
  font-weight: 700;
  line-height: 1.15;
}

body.contact-page .contact-info-item p,
body.contact-page .contact-info-item a {
  margin: 0;
  color: #443850;
  font-family: "Didact Gothic", sans-serif;
  font-size: 0.92vw;
  line-height: 1.5;
}

body.contact-page .contact-inline-socials {
  display: flex;
  gap: 1.9vw;
  margin-top: 3.3vw;
}

body.contact-page .contact-inline-socials a {
  display: grid;
  place-items: center;
  width: 2.2vw;
  height: 2.2vw;
}

body.contact-page .contact-inline-socials img {
  width: 100%;
  height: 100%;
  object-fit: contain;
  display: block;
  transition: filter 0.28s ease, transform 0.28s ease;
}

body.contact-page .contact-inline-socials a:hover img {
  filter: grayscale(1) brightness(0);
  transform: translateY(-0.08vw);
}

body.contact-page .contact-form-wrap {
  padding-top: 3.2vw;
}

body.contact-page .contact-form {
  width: 100%;
  padding: 2.1vw 2.15vw 2.35vw;
  background: var(--olive);
  box-sizing: border-box;
}

body.contact-page .contact-form label {
  display: block;
  margin: 0 0 0.52vw;
  color: var(--purple);
  font-family: "Outfit", sans-serif;
  font-size: 0.94vw;
  font-weight: 700;
  line-height: 1.1;
}

body.contact-page .contact-form input,
body.contact-page .contact-form textarea {
  width: 100%;
  border: 0;
  background: #ffffff;
  color: #443850;
  font-family: "Didact Gothic", sans-serif;
  font-size: 0.96vw;
  padding: 0 0.9vw;
  margin-bottom: 1.78vw;
  box-sizing: border-box;
  outline: none;
}

body.contact-page .contact-form input {
  height: 2.55vw;
}

body.contact-page .contact-form textarea {
  height: 11.8vw;
  padding-top: 0.82vw;
  resize: none;
}

body.contact-page .contact-submit {
  width: 100%;
  min-width: 0;
  padding: 0.94vw 1vw;
  margin-top: 0.45vw;
  border: 0.14vw solid transparent;
  font-size: 0.9vw;
  font-weight: 500;
  letter-spacing: 0;
  transition: background-color 0.28s ease, border-color 0.28s ease, color 0.28s ease;
}

body.contact-page .contact-submit:hover {
  background: transparent;
  border-color: #ffffff;
  color: #ffffff;
}

body.contact-page .contact-map-section {
  padding: 1.4vw 0 4.2vw;
}

body.contact-page .contact-map-shell {
 width: min(84vw, 1320px);
  margin: 0 auto;
}

body.contact-page .contact-map-card {
  width: 100%;
  height: 18.8vw;
  margin: 0;
  overflow: hidden;
}

body.contact-page .contact-map-card iframe {
  width: 100%;
  height: 100%;
  border: 0;
  filter: saturate(0.9) contrast(0.94);
}

/* ===== Contact Page: Success Modal ===== */
body.contact-page .contact-success-modal {
  position: fixed;
  inset: 0;
  z-index: 3000;
  display: grid;
  place-items: center;
  padding: 2vw;
  opacity: 0;
  visibility: hidden;
  pointer-events: none;
  transition: opacity 0.38s ease, visibility 0.38s ease;
}

body.contact-page .contact-success-modal.is-visible {
  opacity: 1;
  visibility: visible;
  pointer-events: auto;
}

body.contact-page .contact-success-backdrop {
  position: absolute;
  inset: 0;
  background: rgba(68, 56, 80, 0.18);
  backdrop-filter: blur(3px);
  opacity: 0;
  transition: opacity 0.38s ease;
}

body.contact-page .contact-success-modal.is-visible .contact-success-backdrop {
  opacity: 1;
}

body.contact-page .contact-success-panel {
  position: relative;
  width: min(62vw, 900px);
  min-height: 29vw;
  padding: 3.4vw 4vw 3.2vw;
  background: #ffffff;
  clip-path: polygon(0 0, 86% 0, 100% 38%, 100% 100%, 0 100%);
  box-shadow: 0 1.4vw 3vw rgba(68, 56, 80, 0.16);
  overflow: hidden;
  opacity: 0;
  transform: translateY(1.6vw) scale(0.975);
  transition: opacity 0.48s ease, transform 0.48s cubic-bezier(0.22, 1, 0.36, 1);
  display: flex;
  flex-direction: column;
  justify-content: center;
  align-items: center;
  text-align: center;
}

body.contact-page .contact-success-modal.is-visible .contact-success-panel {
  opacity: 1;
  transform: translateY(0) scale(1);
}

body.contact-page .contact-success-panel::before {
  content: "";
  position: absolute;
  inset: 0;
  background: linear-gradient(180deg, rgba(255, 255, 255, 0.97) 0%, rgba(255, 255, 255, 0.93) 100%);
  opacity: 1;
  pointer-events: none;
}

body.contact-page .contact-success-logo {
  position: absolute;
  left: 0vw;
  bottom: -1vw;
  width: 35vw;
  height: 29vw;
  background: url("./Images/Contact/background_logo.png") left bottom / contain no-repeat;
  opacity: 0.6;
  pointer-events: none;
}

body.contact-page .contact-success-close {
  position: absolute;
  top: 1vw;
  right: 1.2vw;
  border: 0;
  background: transparent;
  color: #443850;
  font-size: 2vw;
  line-height: 1;
  cursor: pointer;
}

body.contact-page .contact-success-panel h2 {
  position: relative;
  z-index: 1;
  max-width: 46vw;
  margin: 0 auto 2.2vw;
  color: var(--olive);
  font-family: "Outfit", sans-serif;
  font-size: 4.7vw;
  font-weight: 800;
  line-height: 0.92;
  letter-spacing: -0.05em;
  text-align: center;
}

body.contact-page .contact-success-panel p {
  position: relative;
  z-index: 1;
  max-width: 40vw;
  margin: 0 auto;
  color: var(--purple);
  font-family: "Didact Gothic", sans-serif;
  font-size: 2vw;
  font-weight: 400;
  line-height: 1.35;
  text-align: center;
}

body.contact-page .footer {
  position: relative;
  margin-top: 250px;
  z-index: 1;
  background: var(--olive);
  color: var(--white);
  padding: 13.2vw 0 0.8vw;
}

body.contact-page .footer-top-curve {
  position: absolute;
  left: -6%;
  right: -6%;
  top: -12.8vw;
  height: 18vw;
  background: var(--white);
  border-radius: 0 0 50% 50% / 0 0 50% 50%;
  z-index: 0;
}

body.contact-page .footer-grid,
body.contact-page .copyright {
  position: relative;
  z-index: 1;
}

body.contact-page .footer-grid {
  width: 68%;
  margin-inline: auto;
  display: flex;
  justify-content: space-between;
  align-items: flex-end;
  gap: 3vw;
}

body.contact-page .footer-logo {
  width: 9.4vw;
  margin-bottom: 0.7vw;
}

body.contact-page .footer p,
body.contact-page .footer-links a,
body.contact-page .footer-links h3 {
  color: #ffffff;
}

body.contact-page .footer p {
  font-size: 1.24vw;
  line-height: 1.45;
}

body.contact-page .footer-links h3 {
  font-size: 2.7vw;
  margin-bottom: 0.8vw;
}

body.contact-page .footer-links {
  margin-left: 0;
}

body.contact-page .footer-links ul {
  list-style: none;
}

body.contact-page .footer-links li {
  margin-top: 0.9vw;
  margin-bottom: 0;
}

body.contact-page .footer-links a {
  font-size: 1.12vw;
  line-height: normal;
}

body.contact-page .footer-links a:hover {
  color: #443850;
}

body.service-page .footer-links a:hover,
body.about-page .footer-links a:hover {
  color: #443850;
}

body.contact-page .socials img {
  filter: none;
}

body.contact-page .socials {
  gap: 0.8vw;
  margin-top: 1vw;
}

body.contact-page .socials a {
  width: 1.45vw;
  height: 1.45vw;
}

body.contact-page .socials a img {
  width: 100%;
  height: 100%;
  object-fit: contain;
}

body.contact-page .copyright {
  color: var(--white);
}

@media (max-width: 1024px) {
  body.contact-page .contact-hero {
    min-height: 380px;
  }

  body.contact-page .contact-hero-content {
    min-height: 380px;
    padding-top: 40px;
  }

  body.contact-page .contact-hero-content h1 {
    font-size: clamp(42px, 8vw, 70px);
  }

  body.contact-page .contact-hero-bottom-curve,
  body.contact-page .footer-top-curve {
    height: 90px;
  }

  body.contact-page .contact-section {
    padding: 56px 0 24px;
  }

  body.contact-page .contact-shell,
  body.contact-page .contact-map-shell {
    width: calc(100% - 52px);
  }

  body.contact-page .contact-shell {
    grid-template-columns: 1fr;
    gap: 34px;
  }

  body.contact-page .contact-copy h2 {
    font-size: clamp(40px, 8vw, 60px);
  }

  body.contact-page .contact-intro {
    max-width: 100%;
    font-size: 14px;
  }

  body.contact-page .contact-info-item {
    grid-template-columns: 32px 1fr;
    gap: 12px;
  }

  body.contact-page .contact-info-icon {
    width: 28px;
    height: 28px;
  }

  body.contact-page .contact-info-item h3 {
    font-size: 16px;
  }

  body.contact-page .contact-info-item p,
  body.contact-page .contact-info-item a {
    font-size: 13px;
  }

  body.contact-page .contact-inline-socials {
    gap: 18px;
    margin-top: 24px;
  }

  body.contact-page .contact-inline-socials a {
    width: 20px;
    height: 20px;
  }

  body.contact-page .contact-form {
    width: min(100%, 360px);
    padding: 24px 18px 18px;
  }

  body.contact-page .contact-form label {
    margin-bottom: 6px;
    font-size: 12px;
  }

  body.contact-page .contact-form input {
    height: 38px;
    padding: 0 12px;
    margin-bottom: 12px;
    font-size: 14px;
  }

  body.contact-page .contact-form textarea {
    height: 120px;
    padding: 10px 12px;
    margin-bottom: 12px;
    font-size: 14px;
  }

  body.contact-page .contact-submit {
    padding: 12px 16px;
    font-size: 12px;
  }

  body.contact-page .contact-map-card {
    width: 100%;
    height: 220px;
  }

  body.contact-page .footer {
    padding-top: 68px;
  }

  body.contact-page .footer-logo {
    width: 92px;
  }

  body.contact-page .footer p {
    font-size: 13px;
  }

  body.contact-page .footer-links h3 {
    font-size: 18px;
    margin-bottom: 10px;
  }

  body.contact-page .footer-links a {
    font-size: 12px;
  }

  body.contact-page .socials {
    gap: 12px;
  }

  body.contact-page .socials a {
    width: 20px;
    height: 20px;
  }
}

/* Portfolio Interior Page (merged from portfolio_interior.css) */
/* Portfolio Interior Page */
body.portfolio-interior-page {
  background: var(--white);
}

/* ===== Portfolio Interior Page: Hero ===== */
body.portfolio-interior-page .portfolio-interior-hero {
  position: relative;
  min-height: 41vw;
  background:
    linear-gradient(180deg, rgba(68, 56, 80, 0.1) 0%, rgba(187, 190, 100, 0.24) 100%),
    url("Images/portfolio_interior/page element/pe_bg.png") center 40% / 100% no-repeat;
  border-radius: 0 0 70% 70% / 0 0 70% 70%;
  overflow: hidden;
  padding-top: 7.5vw;
}

body.portfolio-interior-page .portfolio-interior-hero::after {
  content: "";
  position: absolute;
  inset: 0;
  background: rgba(255, 255, 255, 0.06);
  pointer-events: none;
}

body.portfolio-interior-page .portfolio-interior-hero > .nav.page {
  position: absolute;
  top: 0;
  left: 0;
  right: 0;
  width: 100%;
  max-width: none;
  margin: 0;
  padding: 0.55vw 32px;
  z-index: 10;
}

body.portfolio-interior-page .portfolio-interior-hero .menu .active {
  color: var(--olive);
}

body.portfolio-interior-page .portfolio-interior-hero .menu .active::after {
  transform: scaleX(1);
  background: #443850;
}

body.portfolio-interior-page .portfolio-interior-hero .nav.is-sticky {
  position: fixed;
}

body.portfolio-interior-page .portfolio-interior-hero .nav-progress {
  bottom: 0;
}

body.portfolio-interior-page .portfolio-interior-hero-content {
  position: absolute;
  inset: 0;
  z-index: 2;
  display: grid;
  place-items: center;
  padding-top: 4vw;
}

body.portfolio-interior-page .portfolio-interior-hero-content h1 {
  font-family: "Outfit", sans-serif;
  font-size: 6.8vw;
  line-height: 1.18;
  font-weight: 700;
  letter-spacing: 0.02em;
  margin-left: 0;
  margin-top: -1vw;
  margin-bottom: 0;
  width: auto;
  text-align: center;
}

body.portfolio-interior-page .portfolio-interior-hero-line {
  position: relative;
  display: inline-block;
  color: #443850;
  opacity: 0;
  animation: aboutHeroTitleFadeUp 0.9s ease forwards;
}

body.portfolio-interior-page .portfolio-interior-hero-title {
  animation-delay: 0.52s;
}

body.portfolio-interior-page .portfolio-interior-hero-line::before {
  content: attr(data-text);
  position: absolute;
  inset: 0;
  background: linear-gradient(90deg, rgba(187, 190, 100, 0) 0%, rgba(187, 190, 100, 0.82) 28%, rgba(234, 240, 207, 1) 50%, rgba(187, 190, 100, 0.98) 68%, rgba(187, 190, 100, 0) 100%);
  background-size: 42% 100%;
  background-repeat: no-repeat;
  background-position: -30% 0;
  -webkit-background-clip: text;
  background-clip: text;
  color: transparent;
  opacity: 0;
  filter: drop-shadow(0 0 0.55vw rgba(187, 190, 100, 0.55));
  pointer-events: none;
}

body.portfolio-interior-page .portfolio-interior-hero-line::after {
  content: attr(data-text);
  position: absolute;
  inset: 0;
  color: #ffffff;
  clip-path: inset(0 100% 0 0);
  pointer-events: none;
}

body.portfolio-interior-page .portfolio-interior-hero-title::before,
body.portfolio-interior-page .portfolio-interior-hero-title::after {
  animation-duration: 1.08s;
  animation-timing-function: cubic-bezier(0.22, 1, 0.36, 1);
  animation-delay: 0.98s;
  animation-fill-mode: forwards;
}

body.portfolio-interior-page .portfolio-interior-hero-title::before {
  animation-name: heroTitleBeam;
}

body.portfolio-interior-page .portfolio-interior-hero-title::after {
  animation-name: heroTitleSweep;
}

body.portfolio-interior-page .portfolio-interior-main {
  padding-top: 2.4vw;
}

body.portfolio-interior-page .portfolio-interior-hero-content.page {
  width: calc(100% - 80px);
  max-width: none;
}

/* ===== Portfolio Interior Page: Intro ===== */
body.portfolio-interior-page .portfolio-interior-intro {
  width: min(78vw, 1640px);
  margin-inline: auto;
  display: grid;
  grid-template-columns: minmax(30rem, 40vw) minmax(0, 1fr);
  gap: 2.2vw;
  align-items: center;
  padding-bottom: 4.4vw;
}

body.portfolio-interior-page .portfolio-interior-copy {
  order: 2;
  opacity: 0;
  transform: translateX(-64px);
  transition: opacity 0.8s ease, transform 0.8s ease;
}

body.portfolio-interior-page .portfolio-interior-feature {
  order: 1;
  opacity: 0;
  transform: translateX(64px);
  transition: opacity 0.8s ease, transform 0.8s ease;
}

body.portfolio-interior-page .portfolio-interior-intro.is-visible .portfolio-interior-copy,
body.portfolio-interior-page .portfolio-interior-intro.is-visible .portfolio-interior-feature {
  opacity: 1;
  transform: translateX(0);
}

body.portfolio-interior-page .portfolio-interior-intro.is-visible .portfolio-interior-feature {
  animation: portfolioFeatureFloat 4.8s ease-in-out infinite;
  animation-delay: 0.85s;
}

body.portfolio-interior-page .portfolio-interior-copy-frame {
  position: relative;
  justify-self: end;
  border-right: 0.3vw solid var(--purple);
  border-bottom: 0.3vw solid var(--purple);
  padding: 2.3vw 2.1vw 2.1vw 0;
  max-width: 42vw;
  min-height: 40.5vw;
}

body.portfolio-interior-page .portfolio-interior-copy-frame::before {
  content: "";
  position: absolute;
  top: 0;
  right: 0;
  width: 42%;
  height: 0.3vw;
  background: var(--purple);
}

body.portfolio-interior-page .portfolio-interior-copy-frame h2 {
  margin: 3vw 0 1.9vw;
  color: var(--purple);
  font-family: "Outfit", sans-serif;
   font-size: clamp(52px, 3.7vw, 72px);
  font-weight: 700;
  line-height: 0.92;
}

body.portfolio-interior-page .portfolio-interior-copy-frame h2 span {
  color: #bbbe64;
  font-size: 1.4em;
}

body.portfolio-interior-page .portfolio-interior-copy-frame p {
  margin: 3.1vw 0 2.3vw;
  max-width: 35vw;
  color: #443850;
 font-size: clamp(15px, 1.02vw, 18px);
  line-height: 1.34;
  text-align: justify;
}

body.portfolio-interior-page .portfolio-interior-points {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: 0.55vw 2.8vw;
}

body.portfolio-interior-page .portfolio-interior-points ul {
  list-style: none;
  margin: 0;
  padding: 0;
}

body.portfolio-interior-page .portfolio-interior-points li {
  position: relative;
  padding-left: 1.45vw;
  margin-top: 0.75vw;
  color: #bbbe64;
  font-size: 18px;
  line-height: 1.5;
  opacity: 0;
  transform: translateY(18px);
}

body.portfolio-interior-page .portfolio-interior-points li::before {
  content: "";
  position: absolute;
  left: 0;
  top: 0.62em;
  width: 0.82vw;
  height: 0.82vw;
  background: var(--olive);
  transform: translateY(-50%);
}

body.portfolio-interior-page .portfolio-interior-intro.is-visible .portfolio-interior-points li {
  animation: portfolioPointRise 0.52s ease forwards;
  animation-delay: calc(0.7s + (var(--point-order) * 0.12s));
}

@keyframes portfolioPointRise {
  from {
    opacity: 0;
    transform: translateY(18px);
  }

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

body.portfolio-interior-page .portfolio-interior-feature {
  --feature-shape: polygon(0 0, 100% 0, 100% 100%, 39% 100%, 0 65%);
  --feature-border: 0.45vw;
  justify-self: start;
  width: min(100%, 34vw);
  margin: 0;
  padding: var(--feature-border);
  background: #bbbe64;
  clip-path: var(--feature-shape);
  box-shadow: 0 1vw 2.4vw rgba(68, 56, 80, 0.1);
  overflow: hidden;
}

body.portfolio-interior-page .portfolio-interior-feature-media {
  width: 100%;
  height: 100%;
  background: #ffffff;
  clip-path: var(--feature-shape);
  overflow: hidden;
}

body.portfolio-interior-page .portfolio-interior-feature img {
  width: 100%;
  display: block;
  aspect-ratio: 0.83;
  object-fit: cover;
}

@keyframes portfolioFeatureFloat {
  0%,
  100% {
    transform: translate(0, 0);
  }

  50% {
    transform: translate(0, -10px);
  }
}

@keyframes portfolioGallerySquareToImage {
  0% {
    opacity: 0;
    transform: scale(0.06);
  }

  100% {
    opacity: 1;
    transform: scale(1);
  }
}

@keyframes portfolioGallerySquareFade {
  0% {
    opacity: 1;
    transform: scale(1);
  }

  70% {
    opacity: 1;
    transform: scale(1);
  }

  100% {
    opacity: 0;
    transform: scale(1);
  }
}

@keyframes portfolioGalleryImagePopIn {
  0% {
    opacity: 0;
    transform: scale(1);
  }

  100% {
    opacity: 1;
    transform: scale(1);
  }
}

body.portfolio-interior-page .portfolio-interior-gallery-wrap {
  background: #ffffff;
  padding: 0.8vw 0 0;
}

/* ===== Portfolio Interior Page: Gallery Head ===== */
body.portfolio-interior-page .portfolio-interior-gallery-head {
  width: min(88vw, 1360px);
  margin-inline: auto;
  text-align: center;
  position: relative;
  padding-bottom: 1vw;
  margin-bottom: 0;
  opacity: 0;
  transition: opacity 0.85s ease;
}

body.portfolio-interior-page .portfolio-interior-gallery-head::after {
  content: "";
  position: absolute;
  left: 50%;
  bottom: 0;
  width: 100vw;
  height: clamp(3px, 0.22vw, 5px);
  background: #443850;
  transform: translateX(-50%);
}

body.portfolio-interior-page .portfolio-interior-gallery-head.is-visible {
  opacity: 1;
}

body.portfolio-interior-page .portfolio-interior-gallery-head h2 {
  margin: 0 0 0.35vw;
  color: var(--purple);
  font-family: "Outfit", sans-serif;
  font-size: clamp(42px, 3.25vw, 66px);
  font-weight: 800;
  line-height: 0.94;
}

body.portfolio-interior-page .portfolio-interior-gallery-head h2 span {
  color: #bbbe64;
}

body.portfolio-interior-page .portfolio-interior-gallery-panel {
  background-color: #bbbe64;
  background-image: url("Images/portfolio_interior/page element/background_logo_white.png");
  background-repeat: no-repeat;
  background-position: center bottom;
  background-size: 100% auto;
  padding: 1.15vw 0 3.2vw;
  position: relative;
  z-index: 0;
}

body.portfolio-interior-page .portfolio-interior-actions {
  display: flex;
  justify-content: center;
  align-items: flex-start;
  gap: 5.2vw;
  width: min(88vw, 1360px);
  margin: 0 auto 1.55vw;
  padding: 0;
  background: transparent;
  position: relative;
  z-index: 20;
}

body.portfolio-interior-page .portfolio-interior-action {
  min-width: clamp(210px, 18vw, 320px);
  padding: 0.94vw 1.8vw;
  border: none;
  background: #f2f4d8;
  color: var(--purple);
  font-family: "Outfit", sans-serif;
  font-size: clamp(18px, 1.18vw, 24px);
  font-weight: 700;
  line-height: 1;
  text-align: center;
  transition:
    background-color 0.28s ease,
    color 0.28s ease,
    outline-color 0.28s ease,
    box-shadow 0.28s ease,
    transform 0.28s ease;
}

body.portfolio-interior-page .portfolio-interior-action-primary {
  background: #443850;
  color: #ffffff;
}

body.portfolio-interior-page .portfolio-interior-action-primary:hover,
body.portfolio-interior-page .portfolio-interior-action-primary:focus-visible {
  background: transparent;
  color: #ffffff;
  outline: 2px solid #ffffff;
  outline-offset: 0;
}

body.portfolio-interior-page .portfolio-interior-dropdown-toggle:hover,
body.portfolio-interior-page .portfolio-interior-dropdown-toggle:focus-visible {
  background: #443850;
  color: #ffffff;
  outline: 2px solid #eaf0cf;
  outline-offset: 0;
}

body.portfolio-interior-page .portfolio-interior-dropdown-toggle:hover .portfolio-interior-dropdown-caret-icon-black,
body.portfolio-interior-page .portfolio-interior-dropdown-toggle:focus-visible .portfolio-interior-dropdown-caret-icon-black {
  opacity: 0;
}

body.portfolio-interior-page .portfolio-interior-dropdown-toggle:hover .portfolio-interior-dropdown-caret-icon-white,
body.portfolio-interior-page .portfolio-interior-dropdown-toggle:focus-visible .portfolio-interior-dropdown-caret-icon-white {
  opacity: 1;
}

body.portfolio-interior-page .portfolio-interior-dropdown {
  position: relative;
  z-index: 30;
}

body.portfolio-interior-page .portfolio-interior-dropdown-toggle {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 0.8vw;
}

body.portfolio-interior-page .portfolio-interior-dropdown-caret {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  position: relative;
  width: 1.1vw;
  min-width: 16px;
  height: 0.78vw;
  min-height: 11px;
  transition: transform 0.2s ease;
}

body.portfolio-interior-page .portfolio-interior-dropdown-caret-icon {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  object-fit: contain;
  transition: opacity 0.2s ease;
}

body.portfolio-interior-page .portfolio-interior-dropdown-caret-icon-white {
  opacity: 0;
}

body.portfolio-interior-page .portfolio-interior-dropdown.is-open .portfolio-interior-dropdown-toggle {
  background: #443850;
  color: #ffffff;
}

body.portfolio-interior-page .portfolio-interior-dropdown.is-open .portfolio-interior-dropdown-caret {
  transform: rotate(180deg);
}

body.portfolio-interior-page .portfolio-interior-dropdown.is-open .portfolio-interior-dropdown-caret-icon-black {
  opacity: 0;
}

body.portfolio-interior-page .portfolio-interior-dropdown.is-open .portfolio-interior-dropdown-caret-icon-white {
  opacity: 1;
}

body.portfolio-interior-page .portfolio-interior-dropdown-menu {
  position: absolute;
  top: 100%;
  left: 0;
  width: 100%;
  min-width: clamp(210px, 18vw, 320px);
  background: #f2f4d8;
  border: 0.12vw solid #443850;
  box-shadow: 0 0.8vw 2vw rgba(20, 12, 30, 0.2);
  max-height: 0;
  opacity: 0;
  visibility: hidden;
  pointer-events: none;
  overflow: hidden;
  transform: translateY(-10px);
  transform-origin: top center;
  transition:
    max-height 0.32s ease,
    opacity 0.24s ease,
    transform 0.32s ease,
    visibility 0s linear 0.32s;
  z-index: 40;
}

body.portfolio-interior-page .portfolio-interior-dropdown.is-open .portfolio-interior-dropdown-menu {
  max-height: 32rem;
  opacity: 1;
  visibility: visible;
  pointer-events: auto;
  transform: translateY(0);
  transition:
    max-height 0.32s ease,
    opacity 0.24s ease,
    transform 0.32s ease,
    visibility 0s linear 0s;
}

body.portfolio-interior-page .portfolio-interior-dropdown-item {
  display: flex;
  align-items: center;
  justify-content: center;
  width: 100%;
  min-height: 3.6vw;
  padding: 1vw 1.2vw;
  box-sizing: border-box;
  appearance: none;
  border: 1px solid #443850;
  border-top: 0;
  background: #f2f4d8;
  color: #443850;
  font-family: "Outfit", sans-serif;
  font-size: clamp(16px, 1vw, 20px);
  font-weight: 500;
  line-height: 1.15;
  text-align: center;
  cursor: pointer;
  position: relative;
  z-index: 1;
}

body.portfolio-interior-page .portfolio-interior-dropdown-item:first-child {
  border-top: 1px solid #443850;
}

body.portfolio-interior-page .portfolio-interior-dropdown-item:hover,
body.portfolio-interior-page .portfolio-interior-dropdown-item:focus-visible {
  background: #443850;
  color: #eaf0cf;
  border-color: #eaf0cf;
  outline: none;
}

body.portfolio-interior-page .portfolio-interior-gallery {
width: min(88vw, 1660px);
  margin-inline: auto;
  margin-bottom: 15vw;
  column-count: 4;
  column-gap: 0.9vw;
  background: transparent;
  padding-top: 0;
  position: relative;
  z-index: 0;
  isolation: isolate;
}

body.portfolio-interior-page .portfolio-card {
  position: relative;
  margin: 0;
  margin-bottom: 0.9vw;
  border: 5px solid #443850;
  overflow: hidden;
  background: #bbbe64;
  cursor: pointer;
  break-inside: avoid;
  display: inline-block;
  width: 100%;
  box-sizing: border-box;
  vertical-align: top;
  pointer-events: auto;
  opacity: 0;
  transform: scale(0.06);
  transform-origin: center center;
  transition: transform 0.32s ease, box-shadow 0.32s ease, filter 0.32s ease;
  will-change: transform, opacity;
  z-index: 0;
  isolation: isolate;
  contain: paint;
  backface-visibility: hidden;
}

body.portfolio-interior-page .portfolio-card::before {
  content: "";
  position: absolute;
  inset: 0;
  background: #443850;
  opacity: 1;
  z-index: 1;
  will-change: transform, opacity;
  pointer-events: none;
}

body.portfolio-interior-page .portfolio-card img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  display: block;
  opacity: 0;
  transform: scale(1);
  filter: blur(0);
  transition: transform 0.32s ease, filter 0.32s ease;
  will-change: transform, opacity, filter;
  backface-visibility: hidden;
  pointer-events: none;
}

body.portfolio-interior-page .portfolio-card.is-visible {
  animation: portfolioGallerySquareToImage 0.62s cubic-bezier(0.22, 0.72, 0.2, 1) forwards;
  animation-delay: var(--enter-delay, 0s);
}

body.portfolio-interior-page .portfolio-card.is-visible::before {
  animation: portfolioGallerySquareFade 0.62s ease-out forwards;
  animation-delay: var(--enter-delay, 0s);
}

body.portfolio-interior-page .portfolio-card.is-visible img {
  animation: portfolioGalleryImagePopIn 0.28s ease-out forwards;
  animation-delay: var(--enter-delay, 0s);
  opacity: 1;
}

body.portfolio-interior-page .portfolio-card:hover,
body.portfolio-interior-page .portfolio-card:focus-visible {
  transform: translateY(-16px);
  box-shadow: 0 26px 52px rgba(20, 12, 30, 0.34);
  z-index: 2;
}

body.portfolio-interior-page .portfolio-card:hover img,
body.portfolio-interior-page .portfolio-card:focus-visible img {
  transform: scale(1.1);
  filter: saturate(1.04);
}

body.portfolio-interior-page .portfolio-card:focus-visible {
  outline: 0.24vw solid #bbbe64;
  outline-offset: 0.18vw;
}

body.portfolio-interior-page .portfolio-card.square,
body.portfolio-interior-page .portfolio-card.portrait,
body.portfolio-interior-page .portfolio-card.tall,
body.portfolio-interior-page .portfolio-card.wide {
  width: 100%;
}

body.portfolio-interior-page .portfolio-card.square {
  aspect-ratio: 1 / 1;
}

body.portfolio-interior-page .portfolio-card.portrait {
  aspect-ratio: 0.72 / 1;
}

body.portfolio-interior-page .portfolio-card.tall {
  aspect-ratio: 0.68 / 1;
}

body.portfolio-interior-page .portfolio-card.wide {
  aspect-ratio: 1.5 / 1;
}

@media (max-width: 1024px) {
  body.portfolio-interior-page .portfolio-interior-gallery {
    column-count: 3;
  }
}

@media (max-width: 768px) {
  body.portfolio-interior-page .portfolio-interior-gallery {
    column-count: 2;
    column-gap: 8px;
  }

  body.portfolio-interior-page .portfolio-card {
    margin-bottom: 8px;
  }
}

/* ===== Portfolio Interior Page: CTA ===== */
body.portfolio-interior-page .portfolio-interior-cta {
  position: relative;
  z-index: 1;
  display: flex;
  justify-content: center;
  margin-top: -7vw;
  margin-bottom: -2.6vw;
  transform: translateY(-4.2vw);
}

body.portfolio-interior-page .footer {
  position: relative;
  z-index: 0;
}

body.portfolio-interior-page .portfolio-lightbox {
  position: fixed;
  inset: 0;
  display: flex;
  align-items: center;
  justify-content: center;
  padding: 2vw;
  background: rgba(27, 20, 36, 0.82);
  opacity: 0;
  visibility: hidden;
  pointer-events: none;
  transition:
    opacity 0.36s ease,
    visibility 0s linear 0.36s;
  z-index: 9999;
  will-change: opacity;
}

body.portfolio-interior-page .portfolio-lightbox.is-open {
  opacity: 1;
  visibility: visible;
  pointer-events: auto;
  transition:
    opacity 0.36s ease,
    visibility 0s linear 0s;
}

body.portfolio-interior-page .portfolio-lightbox-dialog {
  position: relative;
  max-width: min(92vw, 1200px);
  max-height: 88vh;
  opacity: 0;
  transform: translateY(22px) scale(0.975);
  transition:
    opacity 0.38s ease,
    transform 0.38s ease;
  will-change: opacity, transform;
}

body.portfolio-interior-page .portfolio-lightbox.is-open .portfolio-lightbox-dialog {
  opacity: 1;
  transform: translateY(0) scale(1);
}

body.portfolio-interior-page .portfolio-lightbox-image {
  display: block;
  max-width: 100%;
  max-height: 88vh;
  border: 0.32vw solid #443850;
  background: #ffffff;
  box-shadow: 0 1.2vw 3vw rgba(0, 0, 0, 0.28);
}

body.portfolio-interior-page .portfolio-lightbox-close {
  position: absolute;
  top: 0.6vw;
  right: 0.6vw;
  width: 4.4vw;
  min-width: 64px;
  height: 4.4vw;
  min-height: 64px;
  border: 0;
  border-radius: 999px;
  background: #bbbe64;
  color: #443850;
  cursor: pointer;
  z-index: 1;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  transition:
    transform 0.22s ease,
    box-shadow 0.22s ease,
    background-color 0.22s ease,
    outline-color 0.22s ease;
}

body.portfolio-interior-page .portfolio-lightbox-close-icon {
  position: absolute;
  width: 38%;
  height: 38%;
  object-fit: contain;
  transition: opacity 0.22s ease;
}

body.portfolio-interior-page .portfolio-lightbox-close-icon-white {
  opacity: 0;
}

body.portfolio-interior-page .portfolio-lightbox-close:hover,
body.portfolio-interior-page .portfolio-lightbox-close:focus-visible {
  transform: scale(1.06);
  box-shadow: 0 10px 24px rgba(20, 12, 30, 0.24);
  background: transparent;
  outline: 2px solid #ffffff;
  outline-offset: 0;
}

body.portfolio-interior-page .portfolio-lightbox-close:hover .portfolio-lightbox-close-icon-black,
body.portfolio-interior-page .portfolio-lightbox-close:focus-visible .portfolio-lightbox-close-icon-black {
  opacity: 0;
}

body.portfolio-interior-page .portfolio-lightbox-close:hover .portfolio-lightbox-close-icon-white,
body.portfolio-interior-page .portfolio-lightbox-close:focus-visible .portfolio-lightbox-close-icon-white {
  opacity: 1;
}

body.portfolio-lightbox-open {
  overflow: hidden;
}

body.portfolio-interior-page .portfolio-interior-cta .cta-card {
  width: 78%;
  min-height: 17vw;
  opacity: 0;
  transition: opacity 0.9s ease;
}

body.portfolio-interior-page .portfolio-interior-cta.is-visible .cta-card {
  opacity: 1;
}

body.portfolio-interior-page .footer {
  margin-top: 60px;
}

@media (max-width: 1024px) {
  body.portfolio-interior-page .portfolio-interior-hero {
    min-height: 360px;
    background-size: cover;
    background-position: center;
  }

  body.portfolio-interior-page .portfolio-interior-hero-content h1 {
    font-size: clamp(42px, 8vw, 72px);
  }

  body.portfolio-interior-page .portfolio-interior-intro,
  body.portfolio-interior-page .portfolio-interior-gallery,
  body.portfolio-interior-page .portfolio-interior-gallery-head {
    width: calc(100% - 52px);
  }

  body.portfolio-interior-page .portfolio-interior-intro {
    grid-template-columns: 1fr;
    gap: 28px;
  }

  body.portfolio-interior-page .portfolio-interior-copy-frame {
    max-width: 100%;
    min-height: auto;
    padding-right: 16px;
  }

  body.portfolio-interior-page .portfolio-interior-copy-frame h2 {
    font-size: clamp(38px, 6vw, 60px);
  }

  body.portfolio-interior-page .portfolio-interior-copy-frame p {
    max-width: 100%;
    font-size: 14px;
  }

  body.portfolio-interior-page .portfolio-interior-points li {
    font-size: 13px;
    padding-left: 14px;
  }

  body.portfolio-interior-page .portfolio-interior-points li::before {
    width: 6px;
    height: 6px;
    top: 10px;
  }

  body.portfolio-interior-page .portfolio-interior-feature {
    justify-self: center;
    width: min(100%, 420px);
  }

  body.portfolio-interior-page .portfolio-interior-gallery-head h2 {
    font-size: clamp(32px, 5vw, 50px);
  }

  body.portfolio-interior-page .portfolio-interior-actions {
    flex-wrap: wrap;
    gap: 12px;
  }

  body.portfolio-interior-page .portfolio-interior-action {
    min-width: 180px;
    padding: 12px 20px;
    font-size: 13px;
  }

  body.portfolio-interior-page .portfolio-interior-gallery {
    grid-template-columns: repeat(3, minmax(0, 1fr));
    grid-auto-rows: 120px;
  }

  body.portfolio-interior-page .portfolio-interior-cta .cta-card {
    width: 88%;
  }
}

@media (max-width: 768px) {
  body.portfolio-interior-page .portfolio-interior-hero {
    min-height: 430px;
    border-radius: 0 0 82% 82% / 0 0 26% 26%;
  }

  body.portfolio-interior-page .portfolio-interior-hero > .nav.page {
    padding: 18px 16px;
  }

  body.portfolio-interior-page .portfolio-interior-main {
    padding-top: 36px;
  }

  body.portfolio-interior-page .portfolio-interior-intro,
  body.portfolio-interior-page .portfolio-interior-gallery,
  body.portfolio-interior-page .portfolio-interior-gallery-head {
    width: calc(100% - 32px);
  }

  body.portfolio-interior-page .portfolio-interior-copy-frame {
    padding: 24px 16px 20px 0;
    border-right-width: 3px;
    border-bottom-width: 3px;
    min-height: auto;
  }

  body.portfolio-interior-page .portfolio-interior-copy-frame::before {
    height: 3px;
  }

  body.portfolio-interior-page .portfolio-interior-feature {
    width: min(100%, 360px);
    --feature-border: 4px;
  }

  body.portfolio-interior-page .portfolio-interior-points {
    grid-template-columns: 1fr;
    gap: 8px;
  }

  body.portfolio-interior-page .portfolio-interior-gallery-wrap {
    padding: 28px 0 34px;
  }

  body.portfolio-interior-page .portfolio-interior-gallery {
    grid-template-columns: repeat(2, minmax(0, 1fr));
    grid-auto-rows: 120px;
    gap: 8px;
  }

  body.portfolio-interior-page .portfolio-card.wide {
    grid-column: span 2;
  }

  body.portfolio-interior-page .portfolio-interior-cta .cta-card {
    width: calc(100% - 32px);
    min-height: 180px;
  }
}