/* ───────── Preloader ───────── */
.preloader {
  position: fixed;
  inset: 0;
  z-index: 99999;
  display: flex;
  align-items: center;
  justify-content: center;
  background: #030303;
  transition: opacity 0.6s ease, visibility 0.6s ease;
}
.preloader.hidden {
  opacity: 0;
  visibility: hidden;
  pointer-events: none;
}

.loader-wrapper {
  position: relative;
  display: flex;
  align-items: center;
  justify-content: center;
  width: 100px;
  height: 100px;
  font-family: "Plus Jakarta Sans", "Inter", sans-serif;
  font-size: 1.2em;
  font-weight: 600;
  color: var(--yellow);
  border-radius: 50%;
  background-color: rgba(252, 201, 36, 0.05);
  box-shadow: 0 0 60px -10px rgba(252, 201, 36, 0.3);
  user-select: none;
}

.preloader .loader {
  position: absolute;
  top: 0;
  left: 0;
  width: 100%;
  aspect-ratio: 1 / 1;
  border-radius: 50%;
  background-color: transparent;
  animation: loader-rotate 2s linear infinite;
  z-index: 0;
}

@keyframes loader-rotate {
  0% {
    transform: rotate(90deg);
    box-shadow:
      0 10px 20px 0 var(--yellow) inset,
      0 20px 30px 0 rgba(252, 201, 36, 0.3) inset,
      0 60px 60px 0 rgba(252, 201, 36, 0.1) inset;
  }
  50% {
    transform: rotate(270deg);
    box-shadow:
      0 10px 20px 0 var(--yellow) inset,
      0 20px 10px 0 rgba(252, 201, 36, 0.6) inset,
      0 40px 60px 0 rgba(252, 201, 36, 0.2) inset;
  }
  100% {
    transform: rotate(450deg);
    box-shadow:
      0 10px 20px 0 var(--yellow) inset,
      0 20px 30px 0 rgba(252, 201, 36, 0.3) inset,
      0 60px 60px 0 rgba(252, 201, 36, 0.1) inset;
  }
}

.loader-letter {
  display: inline-block;
  opacity: 0.4;
  transform: translateY(0);
  animation: loader-letter-anim 2s infinite;
  z-index: 1;
  border-radius: 50ch;
  border: none;
  filter: blur(2px);
  margin: 0.35em;
}

.loader-letter:nth-child(1)  { animation-delay: 0s; }
.loader-letter:nth-child(2)  { animation-delay: 0.1s; }
.loader-letter:nth-child(3)  { animation-delay: 0.2s; }
.loader-letter:nth-child(4)  { animation-delay: 0.3s; }
.loader-letter:nth-child(5)  { animation-delay: 0.4s; }
.loader-letter:nth-child(6)  { animation-delay: 0.5s; }
.loader-letter:nth-child(7)  { animation-delay: 0.6s; }
.loader-letter:nth-child(8)  { animation-delay: 0.7s; }
.loader-letter:nth-child(9)  { animation-delay: 0.8s; }
.loader-letter:nth-child(10) { animation-delay: 0.9s; }
.loader-letter:nth-child(11) { animation-delay: 1.0s; }
.loader-letter:nth-child(12) { animation-delay: 1.1s; }
.loader-letter:nth-child(13) { animation-delay: 1.2s; }
.loader-letter:nth-child(14) { animation-delay: 1.3s; }

@keyframes loader-letter-anim {
  0%, 100% {
    opacity: 0.2;
    transform: translateY(0);
    filter: blur(2px);
    color: rgb(255, 255, 255);
  }
  20% {
    opacity: 1;
    transform: scale(1.2) translateY(-1px);
    filter: blur(0px);
    text-shadow: 0px 0px 4px var(--yellow), 0px 0px 10px rgb(255, 255, 255);
    color: #ffffff;
  }
  40% {
    opacity: 0.6;
    transform: translateY(0);
    filter: blur(2px);
    color: #ffffff;
  }
}

.star {
  position: absolute;
  width: 6px;
  height: 6px;
  border-radius: 50%;
  background-color: #fff;
  transform: translate(20px, 90px);
  animation: blur-anim 2s infinite;
  box-shadow: 0 0 8px 0 #fff;
  filter: blur(4px);
  opacity: 0.2;
}
.star:nth-of-type(2) {
  transform: translate(56px, 46px);
  scale: 1.05;
  animation-delay: 0.2s;
}
.star:nth-of-type(3) {
  transform: translate(-26px, 56px);
  scale: 1.4;
  animation-delay: 0.4s;
}
.star:nth-of-type(4) {
  transform: translate(-50px, -70px);
  scale: 0.95;
  animation-delay: 0.7s;
}
.star:nth-of-type(5) {
  transform: translate(32px, -66px);
  scale: 1.3;
  animation-delay: 0.35s;
}
.star:nth-of-type(6) {
  transform: translate(82px, -36px);
  scale: 1;
  animation-delay: 0.9s;
}
.star:nth-of-type(7) {
  transform: translate(-92px, 26px);
  scale: 1;
  animation-delay: 0.95s;
}

@keyframes blur-anim {
  0%, 100% {
    opacity: 0.2;
    filter: blur(4px);
  }
  50% {
    opacity: 0.3;
    filter: blur(1px);
  }
}
/* ───────── End Preloader ───────── */

@font-face {
  font-family: 'Skecther';
  src: url('assets/fonts/Skecther.otf') format('opentype');
  font-weight: normal;
  font-style: normal;
  font-display: swap;
}
:root{
  --yellow:#FCC924;
  --black:#030303;
  --dark:#101010;
  --soft:#f6f6f6;
  --line:#e9e9e9;
  --text:#111;
  --muted:#666;
  --container:min(1180px, calc(100% - clamp(32px, 6vw, 80px)));
  --hero-container:min(1712px, calc(100% - clamp(32px, 16.4vw, 336px)));
  --wide-container:min(1728px, calc(100% - clamp(32px, 15.625vw, 320px)));
  --heading:'Skecther', sans-serif;
  --body:"Plus Jakarta Sans",Arial,sans-serif;
  --header-height: 165px;
}

*{box-sizing:border-box;margin:0;padding:0}
html.lenis,html.lenis body{height:auto}
.lenis.lenis-smooth{scroll-behavior:auto}
.lenis.lenis-smooth [data-lenis-prevent]{overscroll-behavior:contain}
.lenis.lenis-stopped{overflow:hidden}
body{
  font-family:var(--body);
  color:var(--text);
  overflow-x:hidden;
  background:#fff;
}
img,video,iframe{max-width:100%;display:block}
img{height:auto}
a{text-decoration:none;color:inherit}
button,input,select,textarea{font:inherit}
section{position:relative}
.container{width:var(--container);margin-inline:auto}
.wide-container{width:var(--wide-container);margin-inline:auto}

h1,h2,h3,h4{
  font-family:var(--heading);
  text-transform:uppercase;
  line-height:.9;
  letter-spacing:0;
  font-weight:400;
}
h1{font-size:clamp(3.8rem, 15vw, 6.7rem)}
h2{font-size:clamp(2.25rem, 8vw, 4.4rem)}
h3{font-size:clamp(1.35rem, 4vw, 2rem)}
h4{font-size:clamp(1.15rem, 3vw, 1.55rem)}
p{font-size:clamp(.88rem, 1.2vw, 1rem);line-height:1.72;color:var(--muted)}
.small{font-size:.78rem}
.yellow{color:var(--yellow)}
.center{text-align:center}

.section{
  padding-block:clamp(3.4rem, 8vw, 6.5rem);
}
.btn{
  min-height:44px;
  display:inline-flex;
  align-items:center;
  justify-content:center;
  gap:.5rem;
  padding:.85rem 1.4rem;
  background:var(--yellow);
  color:#000;
  border:0;
  cursor:pointer;
  font-weight:900;
  text-transform:uppercase;
  font-size:clamp(.72rem, 1.1vw, .84rem);
  line-height:1;
  white-space:normal;
  text-align:center;
}
.btn.dark{background:#000;color:#fff}
.kicker{
  font-family:var(--heading);
  color:var(--yellow);
  font-size:clamp(1rem, 2vw, 1.35rem);
  text-transform:uppercase;
  font-weight:900;
  line-height:1;
  margin-bottom:.55rem;
}

/* HEADER */
.header{
  position:absolute;
  inset:0 0 auto;
  z-index:50;
  color:#fff;
  width:100%;
}
.hero-container{
  width:var(--hero-container);
  margin-inline:auto;
}
.topbar{
  height:80px;
  background:#000;
}
.topbar-inner{
  height:100%;
  display:flex;
  align-items:center;
  justify-content:flex-end;
  gap:34px;
}
.contact-link{
  display:inline-flex;
  align-items:center;
  gap:10px;
  color:#f2f2f2;
  font-size:clamp(18px, 1.18vw, 24px);
  line-height:1;
  font-weight:400;
  letter-spacing:0;
}
.contact-link svg{
  width:22px;
  height:22px;
  flex:0 0 auto;
  color:var(--yellow);
}
.nav-wrap{
  position:relative;
  height:145px;
  border-bottom:1px solid rgba(255,255,255,.12);
  background:linear-gradient(180deg,rgba(1,7,10,.18),rgba(1,7,10,.1));
}
.nav{
  position:relative;
  height:100%;
  display:flex;
  align-items:center;
  justify-content:flex-start;
  gap:34px;
  color:#fff;
}
.brand-logo{
  display:block;
  width:118px;
  flex:0 0 auto;
  color:#fff;
}
.brand-logo img{
  width:100%;
  height:auto;
}
.logo{
  display:flex;
  align-items:center;
  gap:.55rem;
  min-width:max-content;
  font-family:var(--heading);
  font-weight:900;
  text-transform:uppercase;
  font-size:clamp(1.15rem, 2.2vw, 1.45rem);
}
.logo-mark{
  width:clamp(30px, 4vw, 38px);
  aspect-ratio:1;
  border:2px solid currentColor;
  display:grid;
  place-items:center;
  font-size:.78rem;
}
.menu{
  position:absolute;
  top:100%;
  left:0;
  right:0;
  background:rgba(0,0,0,.94);
  padding:1.25rem clamp(20px, 5vw, 64px);
  display:none;
  flex-direction:column;
  gap:1rem;
  font-size:1rem;
  font-weight:300;
  text-transform:none;
  letter-spacing:0;
}
.menu.open{display:flex}
.nav-cta{display:none}
.quote-btn{
  padding: 0 42px;
  height:clamp(58px, 3.23vw, 66px);
  display:inline-flex;
  align-items:center;
  justify-content:center;
  gap:24px;
  background:var(--yellow);
  color:#000;
  border:0;
  font-size:clamp(19px, 1.18vw, 24px);
  font-weight:500;
  line-height:1;
  transition: background-color 0.3s ease, color 0.3s ease, transform 0.3s cubic-bezier(0.16, 1, 0.3, 1), box-shadow 0.3s ease;
}
.quote-btn:hover{
  background-color: #fff;
  color: #000;
  transform: translateY(-3px);
  box-shadow: 0 10px 25px rgba(255, 255, 255, 0.25);
}
.btn-dots{
  width:22px;
  height:22px;
  display:inline-block;
  flex:0 0 auto;
  background:url("assets/buttondots.png") center/contain no-repeat;
}
.hamburger{
  width:52px;
  height:52px;
  border:1px solid rgba(255,255,255,.18);
  border-radius:50%;
  background:rgba(255,255,255,.08);
  color:#fff;
  cursor:pointer;
  display:none;
  place-items:center;
  position:relative;
  transition:background .2s ease, border-color .2s ease, transform .2s ease;
}
.hamburger:hover{
  background:rgba(252,201,36,.18);
  border-color:rgba(252,201,36,.75);
}
.hamburger span{
  position:absolute;
  width:22px;
  height:2px;
  border-radius:999px;
  background:#fff;
  transition:transform .25s ease, opacity .2s ease, top .25s ease;
}
.hamburger span:nth-child(1){top:17px}
.hamburger span:nth-child(2){top:25px}
.hamburger span:nth-child(3){top:33px}
.hamburger.is-open{
  background:var(--yellow);
  border-color:var(--yellow);
}
.hamburger.is-open span{
  background:#000;
}
.hamburger.is-open span:nth-child(1){
  top:25px;
  transform:rotate(45deg);
}
.hamburger.is-open span:nth-child(2){
  opacity:0;
}
.hamburger.is-open span:nth-child(3){
  top:25px;
  transform:rotate(-45deg);
}

/* HERO */
.hero{
  --hero-image:url("assets/banner1.jpg");
  min-height:clamp(900px, 61.7vw, 1263px);
  padding-top:clamp(280px, 16.8vw, 344px);
  padding-bottom:clamp(84px, 5.5vw, 112px);
  color:#fff;
  position:relative;
  isolation:isolate;
  overflow:hidden;
  background:
    linear-gradient(90deg,rgba(1,9,12,.98) 0%,rgba(1,9,12,.94) 20%,rgba(4,13,18,.66) 52%,rgba(4,13,18,.08) 78%),
    linear-gradient(180deg,rgba(0,0,0,0) 60%,rgba(2,8,10,.64) 100%),
    var(--hero-image) center top/cover no-repeat;
}
.hero-content{
  max-width:895px;
  transition:opacity .28s ease, transform .28s ease;
}
.hero.is-changing .hero-content{
  opacity:.18;
  transform:translateY(10px);
}
.hero-eyebrow{
  color:var(--yellow);
  font-size:clamp(20px, 1.42vw, 29px);
  line-height:1.2;
  font-weight:300;
  margin-bottom:22px;
}
.hero h1{
  margin:0;
  font-family:var(--heading);
  font-weight:400;
  text-transform:uppercase;
  line-height:.93;
  letter-spacing:0;
}
.hero-title-top{
  display:block;
  color:#fff;
  font-size:clamp(42px, 3.37vw, 69px);
}
.hero-title-main{
  display:block;
  color:var(--yellow);
  font-size:clamp(74px, 6.55vw, 134px);
  line-height:.88;
  margin-top:8px;
}
.hero-subtitle{
  color:#fff;
  font-size:clamp(20px, 1.47vw, 30px);
  line-height:1.2;
  font-weight:300;
}
.hero-copy{
  color:rgba(255,255,255,.68);
  max-width:620px;
  margin-top:29px;
  font-size:clamp(18px, 1.27vw, 18px);
  line-height:1.28;
  font-weight:300;
}
.hero-actions{
  display:flex;
  align-items:center;
  gap:28px;
  margin-top:30px;
}
.hero-action{
  min-height:clamp(56px, 3.23vw, 66px);
  display:inline-flex;
  align-items:center;
  justify-content:center;
  gap:32px;
  padding:0 28px;
  color:#000;
  font-size:clamp(17px, 1.22vw, 25px);
  line-height:1;
  font-weight:300;
  white-space:nowrap;
  transition: background-color 0.3s ease, color 0.3s ease, border-color 0.3s ease, transform 0.3s cubic-bezier(0.16, 1, 0.3, 1), box-shadow 0.3s ease;
  border: 1px solid transparent;
}
.hero-action:hover{
  transform: translateY(-4px);
}
.hero-action-primary{
  min-width:clamp(250px, 17.2vw, 352px);
  background:var(--yellow);
}
.hero-action-primary:hover{
  background-color: #fff;
  color: #000;
  box-shadow: 0 12px 28px rgba(255, 255, 255, 0.25);
}
.hero-action-light{
  min-width:clamp(235px, 15.7vw, 322px);
  background:#fff;
}
.hero-action-light:hover{
  background-color: transparent;
  color: #fff;
  border-color: #fff;
  box-shadow: 0 12px 28px rgba(255, 255, 255, 0.1);
}
.hero-stats{
  width:clamp(640px, 38.3vw, 784px);
  min-height:clamp(138px, 8.1vw, 166px);
  margin-top:48px;
  display:grid;
  grid-template-columns:repeat(3,1fr);
  align-items:center;
  border:1px solid rgba(255,255,255,.24);
  background:rgba(10,22,29,.16);
  backdrop-filter:blur(1px);
}
.hero-stat{
  min-height:clamp(72px, 4vw, 82px);
  padding-left:clamp(24px, 2.2vw, 45px);
  display:flex;
  flex-direction:column;
  justify-content:center;
}
.hero-stat + .hero-stat{border-left:1px solid rgba(255,255,255,.24)}
.hero-stat strong{
  display:block;
  font-family:var(--secondary-font);
  color:var(--yellow);
  font-size:clamp(48px, 3.22vw, 66px);
  line-height:.85;
  font-weight:500;
  letter-spacing:0;
}
.hero-stat span{
  display:block;
  color:#fff;
  font-size:clamp(16px, 1.08vw, 22px);
  line-height:1.1;
  font-weight:300;
  margin-top:12px;
}
.hero-slide-badge{
  position:absolute;
  right:0;
  bottom:clamp(100px, 7.5vw, 154px);
  width:clamp(160px, 10.65vw, 218px);
  height:clamp(78px, 4.93vw, 101px);
  display:flex;
  align-items:center;
  justify-content:center;
  gap:18px;
  background:#fff;
  color:#000;
  font-size:clamp(42px, 2.73vw, 56px);
  line-height:1;
  font-weight:400;
  z-index:3;
  border:0;
  cursor:pointer;
  transition:background-color .25s ease, transform .25s ease;
}
.hero-slide-badge:hover,
.hero-slide-badge:focus-visible{
  background:var(--yellow);
}
.hero-slide-badge:focus-visible{
  outline:3px solid rgba(252,201,36,.45);
  outline-offset:4px;
}
.hero-slide-badge span:last-child{
  font-size:clamp(36px, 2.44vw, 50px);
  margin-top:-5px;
}
.hero-slide-badge span:last-child .arrow-svg {
  width: clamp(36px, 2.44vw, 50px);
  height: clamp(36px, 2.44vw, 50px);
  display: block;
}
.hero-dots{
  display:none;
}
.hero-cut{
  position:absolute;
  left:50%;
  bottom:-1px;
  width:min(1320px, 66vw);
  height:39px;
  transform:translateX(-50%);
  background:#fff;
  border-radius:20px 20px 0 0;
  clip-path:polygon(4% 100%, 7% 0, 93% 0, 96% 100%);
  z-index:2;
}

/* PROOF MOSAIC */
.proof-mosaic{
  background:#fff;
  padding-block:clamp(56px, 5.2vw, 100px) clamp(72px, 6vw, 116px);
  overflow:hidden;
}
.proof-grid{
  display:grid;
  grid-template-columns:repeat(4, minmax(0, 1fr));
  gap:clamp(18px, 1.56vw, 32px);
}
.proof-tile{
  position:relative;
  min-width:0;
  aspect-ratio:681 / 635;
  overflow:hidden;
  clip-path:polygon(0 0, calc(100% - clamp(52px, 4.2vw, 78px)) 0, 100% clamp(52px, 4.2vw, 78px), 100% 100%, 0 100%);
}
.proof-image img{
  width:100%;
  height:100%;
  object-fit:cover;
}
.proof-stat{
  display:flex;
  flex-direction:column;
  justify-content:space-between;
  padding:clamp(34px, 3.05vw, 62px) clamp(30px, 2.75vw, 56px) clamp(42px, 3.05vw, 62px);
}
.proof-stat--yellow{background:var(--yellow);color:#000}
.proof-stat--cream{background:#fff0be;color:#000}
.proof-stat--black{background:#000;color:#fff}
.proof-stat--grey{background:#e9e9e9;color:#000}
.proof-value{
  display:block;
  font-family:var(--heading);
  font-size:clamp(72px, 5.85vw, 120px);
  line-height:.82;
  font-weight:500;
  letter-spacing:0;
}
.proof-stat--black .proof-value{color:var(--yellow)}
.proof-copy h2{
  color:inherit;
  font-family:var(--body);
  font-size:clamp(22px, 1.54vw, 32px);
  line-height:1.1;
  text-transform:none;
  font-weight:800;
  margin-bottom:14px;
}
.proof-copy p{
  color:rgba(0,0,0,.58);
  font-size:clamp(17px, 1.3vw, 27px);
  line-height:1.2;
  font-weight:500;
}
.proof-stat--black .proof-copy p{color:rgba(255,255,255,.78)}

/* CLIENTS */
.clients{
  background:#fff;
  padding-block:36px 126px;
  overflow:hidden;
}
.client-title{
  font-family:var(--heading);
  text-transform:uppercase;
  font-weight:500;
  text-align:center;
  font-size:clamp(44px, 3.7vw, 76px);
  line-height:.92;
  color:#000;
  margin-bottom:20px;
}
.client-copy{
  width:min(760px,100%);
  margin:0 auto;
  color:#808080;
  text-align:center;
  font-size:clamp(12px, 1.02vw, 18px);
  line-height:1.45;
  font-weight:400;
}
.client-logos{
  --marquee-item-width: 280px;
  width:100%;
  margin:92px auto 0;
  overflow:hidden;
  position:relative;
  display:block;
}
.client-logos::before,
.client-logos::after {
  content: "";
  position: absolute;
  top: 0;
  height: 100%;
  width: 150px;
  z-index: 2;
  pointer-events: none;
}
.client-logos::before {
  left: 0;
  background: linear-gradient(to right, #fff 0%, transparent 100%);
}
.client-logos::after {
  right: 0;
  background: linear-gradient(to left, #fff 0%, transparent 100%);
}
.client-logos .marquee-track {
  display: flex;
  align-items: center;
  width: max-content;
  animation: marquee-scroll 35s linear infinite;
}
.client-logo{
  width: var(--marquee-item-width);
  min-height:160px;
  display:flex;
  align-items:center;
  justify-content:center;
  padding-inline:48px;
  flex-shrink:0;
  border-right: 2px solid #ececec;
}
.client-logo img {
  max-width: 100%;
  max-height: 90px;
  object-fit: contain;
  opacity: .5;
  transition: opacity 0.3s ease, filter 0.3s ease;
  filter: grayscale(100%);
}
.client-logo img:hover {
  opacity: 1;
  filter: grayscale(0%);
}

@keyframes marquee-scroll {
  0% {
    transform: translateX(0);
  }
  100% {
    transform: translateX(calc(-1 * var(--marquee-item-width) * 10));
  }
}

/* PACK */
.why-section{
  background:#fff;
  padding-block:0 178px;
  overflow:hidden;
}
.why-top{
  display:grid;
  grid-template-columns:minmax(280px, 1fr) minmax(320px, 1fr) 292px;
  gap:clamp(42px, 3.5vw, 72px);
  align-items:center;
  margin-bottom: clamp(42px, 4vw, 56px);
}
.why-title{
  color:#000;
  font-size:clamp(50px, 3.7vw, 76px);
  line-height:1.15;
  font-weight:300;
  letter-spacing:0;
}
.why-copy{
  color:#858585;
  font-size:clamp(12px, 1.02vw, 18px);
  line-height:1.45;
  font-weight:400;
}
.why-controls{
  justify-self:end;
  display:flex;
  align-items:center;
}
.why-nav{
  display:flex;
  align-items:center;
  gap:12px;
}
.why-nav-btn{
  width:54px;
  height:54px;
  border-radius:50%;
  border:1.5px solid #222;
  background:transparent;
  color:#222;
  display:grid;
  place-items:center;
  cursor:pointer;
  transition:all 0.3s cubic-bezier(0.16, 1, 0.3, 1);
}
.why-nav-btn .arrow-svg{
  width:20px;
  height:20px;
}
.why-nav-btn:hover:not(:disabled){
  background:#222;
  color:var(--yellow);
  border-color:#222;
  transform:scale(1.05);
}
.why-nav-btn:active:not(:disabled){
  transform:scale(0.95);
}
.why-nav-btn:disabled{
  opacity:0.35;
  cursor:not-allowed;
  border-color:#d7d7d7;
  color:#a7a7a7;
}
.why-slider-shell{
  margin-left:calc((100vw - var(--wide-container)) / 2);
  width:calc(100vw - ((100vw - var(--wide-container)) / 2));
}
.why-track{
  display:flex;
  gap:24px;
  overflow-x:auto;
  overscroll-behavior-x:contain;
  scroll-snap-type:x mandatory;
  scroll-padding-left:0;
  cursor:grab;
  user-select:none;
  -webkit-overflow-scrolling:touch;
  scrollbar-width:none;
}
.why-track::-webkit-scrollbar{display:none}
.why-track.dragging{
  cursor:grabbing;
  scroll-snap-type:none;
}
.why-card{
  position:relative;
  flex:0 0 clamp(360px, 29.8vw, 610px);
  height:clamp(620px, 36.6vw, 750px);
  background:#242424;
  overflow:hidden;
  scroll-snap-align:start;
}
.why-card img{
  width:100%;
  height:100%;
  object-fit:cover;
  pointer-events:none;
}
.why-card img[src*="card4.png"]{
  object-fit:contain;
  object-position:top center;
}
.why-card:first-child img{
  object-position:center top;
  background:#242424;
}
.why-card-copy{
  position:absolute;
  right:0;
  bottom:0;
  width:calc(100% - clamp(116px, 7.8vw, 160px));
  min-height:clamp(270px, 17.3vw, 354px);
  background:#030303;
  padding:clamp(34px, 2.2vw, 45px) clamp(28px, 2.65vw, 54px) clamp(30px, 2.2vw, 46px);
}
.why-card h3{
  color:var(--yellow);
  font-family:var(--body);
  font-size:clamp(25px, 1.66vw, 34px);
  line-height:1.08;
  font-weight:500;
  text-transform:none;
  margin-bottom:18px;
}
.why-card p{
  color:#fff;
  font-size:clamp(16px, 1.03vw, 21px);
  line-height:1.24;
  font-weight:100;
}
.why-card-num{
  position:absolute;
  left:0;
  bottom:0;
  width:clamp(116px, 7.8vw, 160px);
  height:clamp(116px, 7.8vw, 160px);
  display:grid;
  place-items:center;
  background:var(--yellow);
  color:#151a26;
  font-family:var(--heading);
  font-size:clamp(58px, 3.7vw, 76px);
  line-height:.9;
  font-weight:500;
  text-align:center;
}

/* DARK SOLUTIONS */
.dark-section{
  background:#000;
  color:#fff;
  padding-block:clamp(104px, 7vw, 142px) clamp(158px, 10vw, 220px);
  overflow:hidden;
}
.solutions-top{
  display:grid;
  grid-template-columns:minmax(600px, 650px) 1fr;
  gap:clamp(96px, 10.7vw, 220px);
  align-items:start;
}
.solutions-copy{
  padding-top:26px;
}
.solutions-copy h2{
  color:#fff;
  font-size:clamp(54px, 3.52vw, 72px);
  line-height:1.06;
  margin-bottom:24px;
}
.solutions-copy p{
  color:#bdbdbd;
  width:min(470px,100%);
  font-size:clamp(12px, 1.02vw, 18px);
  line-height:1.45;
  font-weight:400;
}
.solutions-cta{
  width:max-content;
  min-height:64px;
  margin-top:34px;
  display:inline-flex;
  align-items:center;
  justify-content:center;
  gap:28px;
  padding:0 28px;
  background:var(--yellow);
  color:#000;
  font-size:clamp(17px, 1.12vw, 23px);
  line-height:1;
  font-weight:500;
  transition: background-color 0.3s ease, color 0.3s ease, transform 0.3s cubic-bezier(0.16, 1, 0.3, 1), box-shadow 0.3s ease;
}
.solutions-cta:hover{
  background-color: #fff;
  color: #000;
  transform: translateY(-3px);
  box-shadow: 0 10px 25px rgba(255, 255, 255, 0.25);
}
.solutions-hero{
  width:100%;
  aspect-ratio:804/449;
  object-fit:cover;
}
.project-label{
  margin-top:72px;
  display:grid;
  grid-template-columns:1fr auto 1fr;
  align-items:center;
  gap:24px;
  color:#e1e1e1;
  font-size:clamp(18px, 1.2vw, 24px);
  line-height:1;
  letter-spacing:14px;
  text-transform:uppercase;
  white-space:nowrap;
}
.project-label::before,
.project-label::after{
  content:"";
  height:1px;
  background:#2d2d2d;
}
.project-types{
  margin-top:50px;
  display:grid;
  grid-template-columns:repeat(5,minmax(0,1fr));
  list-style:none;
}
.project-item{
  border-left:1px solid #272727;
}
.project-item:first-child{
  border-left:0;
}
.project-type{
  width:100%;
  min-height:164px;
  padding:0 clamp(18px, 1.6vw, 36px);
  display:grid;
  align-content:start;
  gap:14px;
  background:transparent;
  border:0;
  color:#fff;
  text-align:left;
  cursor:default;
  transition:transform 0.4s cubic-bezier(0.16, 1, 0.3, 1);
  will-change:transform;
}
.project-item:first-child .project-type{padding-left:0}
.project-type img{
  width:72px;
  height:72px;
  object-fit:contain;
  transition:transform 0.4s cubic-bezier(0.16, 1, 0.3, 1), filter 0.4s ease;
}
.project-type-title{
  display:block;
  color:var(--yellow);
  font-family:var(--body);
  font-size:clamp(20px, 1.33vw, 27px);
  line-height:1.08;
  font-weight:500;
  text-transform:none;
  transition:text-shadow 0.4s ease;
}
.project-type-copy{
  display:block;
  color:#9b9b9b;
  font-size:clamp(17px, 1.11vw, 23px);
  line-height:1.3;
  transition:color 0.4s ease;
}

@media (hover: hover) {
  .project-type:hover img {
    filter: drop-shadow(0 4px 12px rgba(255, 191, 0, 0.4));
  }
  .project-type:hover .project-type-title {
    text-shadow: 0 0 10px rgba(255, 191, 0, 0.35);
  }
  .project-type:hover .project-type-copy {
    color: #e1e1e1;
  }
}

@media (hover: hover) and (min-width: 600px) {
  .project-type:hover {
    transform: translateY(-8px);
  }
  .project-type:hover img {
    transform: translateY(-4px) scale(1.06);
  }
}
.popular-project{
  position:relative;
  margin-top:104px;
  height:clamp(650px, 38.1vw, 780px);
  min-height:0;
  display:block;
  background:#000;
  overflow:hidden;
}
.popular-ribbon{
  position:absolute;
  left:0;
  top:0;
  z-index:3;
  width:52px;
  height:219px;
  display:grid;
  place-items:center;
  background:var(--yellow);
  color:#191919;
  font-size:18px;
  line-height:1;
  letter-spacing:1px;
  text-transform:uppercase;
  writing-mode:vertical-rl;
  transform:rotate(180deg);
}
.popular-image-wrap{
  position:relative;
  width:100%;
  height:100%;
}
.popular-image{
  width:100%;
  height:100%;
  object-fit:cover;
  object-position:center;
}
.popular-pagination {
  display: none;
  position: absolute;
  right: 55%;
  bottom: 24px;
  z-index: 10;
  background: rgba(1, 9, 12, 0.72);
  backdrop-filter: blur(8px);
  -webkit-backdrop-filter: blur(8px);
  border: 1px solid rgba(255, 255, 255, 0.12);
  color: rgba(255, 255, 255, 0.6);
  font-family: var(--body);
  font-size: 15px;
  font-weight: 500;
  padding: 8px 18px;
  border-radius: 30px;
  box-shadow: 0 4px 12px rgba(0,0,0,0.4);
  letter-spacing: 1px;
  pointer-events: none;
}
.pop-current {
  color: var(--yellow);
  font-weight: 700;
}
.pop-total {
  color: #ffffff;
}
.popular-copy{
  position:absolute;
  right:0;
  bottom:0;
  width:53%;
  height:74%;
  min-height:0;
  background:#292929;
  padding:clamp(70px, 4.7vw, 96px) clamp(58px, 5.1vw, 104px) clamp(58px, 4vw, 82px) clamp(88px, 5.85vw, 120px);
  clip-path:polygon(9% 0, 100% 0, 100% 100%, 0 100%, 0 21%);
}
.popular-copy h3{
  color:var(--yellow);
  font-family:var(--body);
  font-size:clamp(26px, 1.72vw, 35px);
  line-height:1.08;
  font-weight:800;
  text-transform:none;
  margin-bottom:22px;
}
.popular-copy p{
  color:#b9b9b9;
  width:min(620px,100%);
  font-size:clamp(17px, 1.05vw, 21px);
  line-height:1.38;
  margin-bottom:30px;
}
.popular-features{
  display:grid;
  gap:17px;
  list-style:none;
}
.popular-features li{
  display:grid;
  grid-template-columns:20px 1fr;
  align-items:start;
  gap:14px;
  color:#fff;
  font-size:clamp(16px, .96vw, 20px);
  line-height:1.32;
}
.feature-badge{
  width:20px;
  height:20px;
  margin-top:3px;
  object-fit:contain;
}
.popular-nav{
  position:absolute;
  left:calc(47% - clamp(86px, 6.1vw, 124px) + 2px);
  bottom:0;
  z-index:4;
  display:grid;
}
.popular-nav button{
  width:clamp(86px, 6.1vw, 124px);
  height:clamp(86px, 6.1vw, 124px);
  display:grid;
  place-items:center;
  border:0;
  cursor:pointer;
  font-size:36px;
  line-height:1;
  transition: background-color 0.3s cubic-bezier(0.16, 1, 0.3, 1), color 0.3s cubic-bezier(0.16, 1, 0.3, 1), transform 0.3s cubic-bezier(0.16, 1, 0.3, 1);
}
.popular-nav button .arrow-svg {
  transition: transform 0.3s cubic-bezier(0.16, 1, 0.3, 1);
}
.popular-next{
  background:#000;
  color:var(--yellow);
}
.popular-next:hover{
  background:var(--yellow);
  color:#000;
}
.popular-next:hover .arrow-svg{
  transform: rotate(180deg) translate(4px, 0);
}
.popular-prev{
  background:#fff;
  color:#111;
}
.popular-prev:hover{
  background:#000;
  color:#fff;
}
.popular-prev:hover .arrow-svg{
  transform: rotate(0deg) translate(-4px, 0);
}

@media (min-width: 1440px) {
  .solutions-top {
    grid-template-columns: 600px 1fr;
    gap: 70px;
  }
}

.services-cut{
  position:absolute;
  left:50%;
  right:auto;
  bottom:-1px;
  width:min(1320px, 66vw);
  height:55px;
  transform:translateX(-50%);
  background:#fff;
  border-radius:20px 20px 0 0;
  clip-path:polygon(4% 100%, 7% 0, 93% 0, 96% 100%);
  z-index:2;
}

/* INDUSTRIES */
.industries {
  text-align: center;
  background: #fdfdfd; /* Subtly lighter off-white for contrast */
}

.industries-subtitle {
  font-family: var(--body);
  font-size: clamp(12px, 1.02vw, 18px);
  font-weight: 400;
  color: var(--muted);
  max-width: 720px;
  margin: 1.25rem auto 3.5rem;
  line-height: 1.6;
}
.industry-grid {
  margin-top: clamp(1.7rem, 4vw, 2.5rem);
  display: grid;
  grid-template-columns: 1fr;
  gap: 1.5rem;
}
.industry-card {
  background: #fff;
  border: 1px solid var(--line);
  padding: 1.75rem 2rem;
  display: flex;
  align-items: center;
  gap: 1.25rem;
  text-align: left;
  transition: all 0.3s cubic-bezier(0.16, 1, 0.3, 1);
}
.industry-card:hover {
  border-color: var(--yellow);
  box-shadow: 0 10px 30px rgba(0, 0, 0, 0.04);
  transform: translateY(-2px);
}
.industry-icon-wrap {
  width: 48px;
  height: 48px;
  border-radius: 50%;
  background: var(--yellow);
  color: #111;
  display: flex;
  align-items: center;
  justify-content: center;
  flex-shrink: 0;
}
.industry-icon-wrap img {
  width: 22px;
  height: 22px;
  object-fit: contain;
}
.industry-name {
  font-family: var(--body);
  font-size: clamp(0.95rem, 1.1vw, 1.15rem);
  font-weight: 700;
  color: #030303;
  line-height: 1.3;
}

/* PROCESS */
.process-section{
  background:#fff;
  color:#050505;
  padding-block:clamp(96px, 7.4vw, 152px) clamp(78px, 6vw, 124px);
}
.process-layout{
  display:grid;
  grid-template-columns:minmax(440px, 655px) minmax(560px, 766px);
  gap:clamp(72px, 8.1vw, 166px);
  align-items:start;
}
.process-left{
  position:sticky;
  top:calc(var(--header-height) + 30px);
  align-self:start;
}
.process-left h2{
  color:#000;
  font-size:clamp(52px, 3.32vw, 68px);
  line-height:1.14;
  margin-bottom:28px;
}
.process-intro{
  max-width:620px;
  color:#8a8a8a;
  font-size:clamp(12px, 1.02vw, 18px);
  font-weight:400;
  line-height:1.45;
  margin-bottom:50px;
}
.process-stats{
  display:grid;
  grid-template-columns:repeat(2,minmax(0,1fr));
  gap:14px;
  width:min(640px,100%);
}
.process-stat{
  min-height:186px;
  padding:34px 44px;
  display:flex;
  flex-direction:column;
  justify-content:center;
  background:
    linear-gradient(90deg,rgba(255,255,255,.65),rgba(245,245,245,.9) 48%,rgba(255,255,255,.65)),
    #f4f4f4;
}
.process-stat strong{
  color:#050505;
  font-size:clamp(34px, 2.1vw, 43px);
  line-height:1;
  font-weight:600;
  letter-spacing:0;
}
.process-stat span{
  display:block;
  color:#222;
  font-size:clamp(17px, 1.05vw, 21px);
  line-height:1.25;
  margin-top:10px;
}
.process-steps{
  list-style:none;
  display:grid;
}
.process-step{
  position:relative;
  min-height:clamp(242px, 16.7vw, 342px);
  display:grid;
  grid-template-columns:132px 1fr;
  gap:30px;
  align-items:start;
  padding:clamp(28px, 2.15vw, 44px) clamp(76px, 4.6vw, 94px) clamp(54px, 4.35vw, 89px) 0;
  border-bottom:1px solid #e4e4e4;
}
.process-step + .process-step{
  padding-top:clamp(72px, 5vw, 102px);
}
.process-icon{
  width:96px;
  height:96px;
  display:grid;
  place-items:center;
  color:#111;
}
.process-icon img{
  width:100%;
  height:100%;
  object-fit:contain;
}
.process-step-copy h3{
  color:#111;
  font-family:var(--body);
  font-size:clamp(24px, 1.45vw, 30px);
  line-height:1.2;
  font-weight:500;
  text-transform:none;
  margin-bottom:18px;
}
.process-step-copy p{
  color:#8b8b8b;
  font-size:clamp(18px, 1.12vw, 23px);
  line-height:1.42;
  font-weight:400;
}
.process-step-copy{
  padding-right:clamp(28px, 3vw, 62px);
}
.process-number{
  position:absolute;
  top:clamp(28px, 2.15vw, 44px);
  right:0;
  width:clamp(46px, 3vw, 62px);
  height:clamp(46px, 3vw, 62px);
  display:grid;
  place-items:center;
  border-radius:50%;
  background:var(--yellow);
  color:#050505;
  font-size:clamp(18px, 1.2vw, 24px);
  line-height:1;
  font-weight:800;
}
.process-step + .process-step .process-number{
  top:clamp(72px, 5vw, 102px);
}

/* LEADER */
.proof-section{
  background:#fff;
  color:#080808;
  padding-block:clamp(76px, 8.3vw, 170px) clamp(82px, 5.86vw, 120px);
  overflow:hidden;
}

.founder-block{
  margin-top:0;
  display:grid;
  grid-template-columns:.98fr 1.02fr;
  gap:clamp(32px, 2.45vw, 50px);
  align-items:start;
  min-height:clamp(760px, 43.45vw, 890px);
}
.founder-copy{
  position:relative;
  z-index:2;
}
.founder-kicker{
  margin-bottom:clamp(22px, 1.27vw, 26px);
  color:#c9c9c9;
  font-family:var(--body);
  font-size:clamp(30px, 2.44vw, 50px);
  line-height:1;
  font-weight:300;
  text-transform:uppercase;
}
.founder-copy h2{
  font-size:clamp(48px, 4.2vw, 86px);
  line-height:1.08;
  margin-bottom:clamp(24px, 1.37vw, 28px);
}
.founder-copy p{
  max-width:840px;
  color:#737373;
  font-size:clamp(17px, 1.12vw, 23px);
  line-height:1.36;
  font-weight:500;
}
.founder-copy p + p{margin-top:clamp(24px, 1.55vw, 32px)}
.leader-break{display:none}
.founder-stats{
  margin-top:clamp(46px, 3.5vw, 72px);
  display:flex;
  align-items:flex-start;
}
.founder-stat{
  min-width:0;
  flex:0 0 auto;
  padding-right:clamp(38px, 2.93vw, 60px);
}
.founder-stat + .founder-stat{
  border-left:1px solid #bdbdbd;
  padding-left:clamp(38px, 2.93vw, 60px);
}
.founder-stat strong{
  display:block;
  color:#020202;
  font-family:var(--body);
  font-size:clamp(42px, 3.52vw, 72px);
  line-height:.88;
  font-weight:800;
}
.founder-stat span{
  display:block;
  margin-top:12px;
  color:#111;
  font-size:clamp(17px, 1.22vw, 25px);
  line-height:1.14;
  font-weight:500;
}
.founder-visual{
  position:relative;
  z-index:1;
  min-height:clamp(760px, 43.45vw, 890px);
}
.founder-portrait-wrap{
  position:absolute;
  inset:0;
  pointer-events:none;
}
.founder-portrait{
  width:clamp(860px, 62.4vw, 1278px);
  max-width:none;
  height:auto;
  position:absolute;
  top:clamp(-366px, -17.1vw, -246px);
  right:clamp(-132px, -5.86vw, -74px);
  z-index:1;
  filter:none;
}
.founder-name{
  position:absolute;
  z-index:2;
  top:clamp(614px, 35.1vw, 719px);
  width:clamp(860px, 62.4vw, 1278px);
  right:clamp(-112px, -4.86vw, -64px);
  left:auto;
  margin-top:0;
  transform:translateX(65px);
  text-align:center;
}
.founder-name h3{
  font-size:clamp(44px, 3.66vw, 75px);
  line-height:.9;
}
.founder-name p{
  margin-top:14px;
  color:#4a4a4a;
  font-size:clamp(17px, 1.27vw, 26px);
  line-height:1.42;
  font-weight:500;
}

/* COMPARE / GALLERY */
.compare-section{
  min-height:clamp(860px, 59.95vw, 1228px);
  padding-block:clamp(96px, 7.55vw, 154px) clamp(104px, 7.8vw, 160px);
  background:#000;
  color:#fff;
  overflow:hidden;
}
.compare-inner{
  width:min(1368px, calc(100% - clamp(32px, 14vw, 340px)));
  margin-inline:auto;
  text-align:center;
}
.compare-section h2{
  color:#fff;
  font-size:clamp(44px, 3.72vw, 76px);
  line-height:.9;
}
.compare-subtitle{
  width:min(640px, 100%);
  margin:clamp(18px, 1.2vw, 24px) auto 0;
  color:#d7d7d7;
  font-size:clamp(12px, 1.02vw, 18px);
  line-height:1.45;
  font-weight:400;
}
.compare-table-wrap{
  margin-top:clamp(34px, 2.1vw, 43px);
  overflow-x:auto;
  -webkit-overflow-scrolling:touch;
}
.compare-table{
  width:100%;
  min-width:920px;
  border-collapse:collapse;
  table-layout:fixed;
  text-align:left;
  border:1px solid #454545;
  background:#010101;
}
.compare-table col:nth-child(1){width:30%}
.compare-table col:nth-child(2){width:38%}
.compare-table col:nth-child(3){width:32%}
.compare-table th,
.compare-table td{
  border:1px solid #363636;
  padding-inline:clamp(26px, 1.75vw, 36px);
  vertical-align:middle;
}
.compare-table th{
  height:clamp(70px, 4.35vw, 89px);
  background:#505050;
  color:#f3f3f3;
  font-family:var(--body);
  font-size:clamp(19px, 1.22vw, 25px);
  line-height:1;
  font-weight:500;
}
.compare-table th:nth-child(2){
  background:
    radial-gradient(circle at 26% 40%, rgba(252,201,36,.24), transparent 34%),
    linear-gradient(90deg, rgba(252,201,36,.22), rgba(255,255,255,.02) 38%, #1b1b1a);
}
.compare-table td{
  height:clamp(60px, 3.82vw, 78px);
  color:#f3f3f3;
  font-size:clamp(15px, 1vw, 20px);
  line-height:1.18;
  font-weight:500;
  text-shadow:1px 1px 0 rgba(255,255,255,.22);
}
.compare-table td:nth-child(2){
  background:
    radial-gradient(circle at 52% 98%, rgba(252,201,36,.32), transparent 46%),
    linear-gradient(90deg, rgba(252,201,36,.1), rgba(255,255,255,.03) 45%, rgba(252,201,36,.09));
  color:#fff;
  font-weight:700;
}
.compare-table td:nth-child(3){
  color:#cfcfcf;
}
.compare-value{
  display:inline-flex;
  align-items:center;
  gap:13px;
}
.compare-mark{
  display:inline-block;
  min-width:19px;
  font-size:24px;
  line-height:1;
  font-weight:900;
  text-shadow:none;
}
.compare-mark--good{color:#35d52e}
.compare-mark--bad{color:#ff3328}

.project-gallery-section{
  background:#fff;
  color:#020202;
  padding-block:clamp(82px, 7.52vw, 154px) clamp(82px, 6.93vw, 142px);
  overflow:hidden;
}
.gallery-heading{
  text-align:center;
}
.gallery-heading h2{
  font-size:clamp(42px, 3.52vw, 72px);
  line-height:.9;
}
.gallery-heading p{
  width:min(660px, calc(100% - 32px));
  margin:clamp(18px, 1.32vw, 27px) auto 0;
  color:#3f3f3f;
  font-size:clamp(12px, 1.02vw, 18px);
  line-height:1.45;
  font-weight:400;
}
.gallery-carousel-wrapper {
  position: relative;
  width: 100vw;
  margin-left: 50%;
  transform: translateX(-50%);
  overflow: hidden;
  margin-top: clamp(52px, 3.71vw, 76px);
}
.gallery {
  position: relative;
  width: 100%;
  height: clamp(450px, 34vw, 700px);
  display: flex;
  align-items: center;
  justify-content: center;
}
.gallery-item {
  position: absolute;
  transition: all 1.2s cubic-bezier(0.16, 1, 0.3, 1);
  opacity: 0;
  pointer-events: none;
  z-index: 1;
}
.gallery-item img {
  display: block;
  width: 100%;
  height: 100%;
  object-fit: cover;
  cursor: pointer;
}
.gallery-item.active {
  width: clamp(620px, 47.65vw, 976px);
  height: clamp(440px, 33.3vw, 682px);
  opacity: 1;
  pointer-events: auto;
  z-index: 3;
  transform: translateX(0);
}
.gallery-item.prev {
  width: clamp(320px, 25vw, 512px);
  height: clamp(390px, 26.55vw, 544px);
  opacity: 1;
  pointer-events: auto;
  z-index: 2;
  transform: translateX(calc(-50% - clamp(160px, 12vw, 240px)));
}
.gallery-item.next {
  width: clamp(320px, 25vw, 512px);
  height: clamp(390px, 26.55vw, 544px);
  opacity: 1;
  pointer-events: auto;
  z-index: 2;
  transform: translateX(calc(50% + clamp(160px, 12vw, 240px)));
}
.gallery-item.hidden-left {
  width: clamp(320px, 25vw, 512px);
  height: clamp(390px, 26.55vw, 544px);
  opacity: 0;
  z-index: 1;
  transform: translateX(calc(-100% - clamp(200px, 15vw, 300px)));
}
.gallery-item.hidden-right {
  width: clamp(320px, 25vw, 512px);
  height: clamp(390px, 26.55vw, 544px);
  opacity: 0;
  z-index: 1;
  transform: translateX(calc(100% + clamp(200px, 15vw, 300px)));
}

.gallery-nav {
  position: absolute;
  top: 50%;
  transform: translateY(-50%);
  width: clamp(60px, 5vw, 84px);
  aspect-ratio: 1;
  border: 0;
  border-radius: 50%;
  cursor: pointer;
  z-index: 10;
  display: grid;
  place-items: center;
  font-size: clamp(24px, 2vw, 32px);
  box-shadow: 0 4px 20px rgba(0,0,0,0.15);
  transition: all 0.3s ease;
}
.gallery-nav--prev {
  left: clamp(30px, 8vw, 140px);
  background: #000;
  color: var(--yellow);
}
.gallery-nav--next {
  right: clamp(30px, 8vw, 140px);
  background: #000;
  color: var(--yellow);
}
.gallery-nav:hover {
  transform: translateY(-50%) scale(1.08);
}
.gallery-nav--prev:hover {
  background: var(--yellow);
  color: #000;
}
.gallery-nav--next:hover {
  background: var(--yellow);
  color: #000;
}
/* TESTIMONIAL / FAQ */
.video-showcase-section{
  background:#fff;
  color:#050505;
  padding-block:clamp(88px, 7.58vw, 155px) clamp(84px, 6.9vw, 142px);
}
.video-showcase-heading{
  text-align:center;
}
.video-showcase-heading h2{
  font-size:clamp(44px, 4.1vw, 84px);
  line-height:.9;
}
.video-showcase-heading p{
  width:min(650px, calc(100% - 32px));
  margin:clamp(20px, 1.45vw, 30px) auto 0;
  color:#464646;
  font-size:clamp(12px, 1.02vw, 18px);
  line-height:1.45;
  font-weight:400;
}
.video-frame{
  width:100%;
  margin:clamp(48px, 3.7vw, 76px) auto 0;
  position:relative;
  overflow:hidden;
  aspect-ratio:1284 / 580;
  background:#ddd;
}
.video-frame img{
  width:100%;
  height:100%;
  object-fit:cover;
}
.video-play{
  width:clamp(86px, 7.95vw, 163px);
  aspect-ratio:1;
  position:absolute;
  inset:50% auto auto 50%;
  transform:translate(-50%, -50%);
  border:0;
  border-radius:50%;
  background:url("assets/vdobutton.png") center/contain no-repeat;
  cursor:pointer;
  box-shadow:none;
  transition: transform 0.4s cubic-bezier(0.16, 1, 0.3, 1), box-shadow 0.3s ease;
}
.video-play:hover{
  transform: translate(-50%, -50%) scale(1.08);
  box-shadow: 0 10px 30px rgba(0, 0, 0, 0.4);
}
.testimonials-section{
  background:#fff;
  color:#050505;
  padding-block:clamp(38px, 2.8vw, 58px) clamp(92px, 7.15vw, 146px);
}
.testimonials-section h2{
  text-align:center;
  font-size:clamp(44px, 4.1vw, 84px);
  line-height:.9;
}
.testimonial-grid{
  width:100%;
  margin:clamp(74px, 5.35vw, 110px) auto 0;
  display:grid;
  grid-template-columns:repeat(3, minmax(0, 1fr));
  gap:clamp(20px, 1.43vw, 29px);
}
.testimonial{
  min-height:clamp(330px, 24.8vw, 508px);
  position:relative;
  border:1px solid #dcdcdc;
  background:#fff;
  padding:clamp(58px, 4.55vw, 93px) clamp(34px, 3.38vw, 69px) clamp(36px, 3.28vw, 67px);
  text-align:left;
  transition: transform 0.4s cubic-bezier(0.16, 1, 0.3, 1), border-color 0.4s cubic-bezier(0.16, 1, 0.3, 1), box-shadow 0.4s cubic-bezier(0.16, 1, 0.3, 1);
}
.testimonial:hover {
  transform: translateY(-8px);
  border-color: var(--yellow);
  box-shadow: 0 20px 40px rgba(0, 0, 0, 0.06);
}
.quote{
  width:clamp(48px, 3.66vw, 75px);
  aspect-ratio:1;
  position:absolute;
  top:0;
  left:clamp(54px, 4.05vw, 83px);
  transform:translateY(-50%);
  border-radius:50%;
  background:var(--yellow);
  display:grid;
  place-items:center;
  color:#fff;
  font-family:Georgia, serif;
  font-size:clamp(30px, 2.25vw, 46px);
  line-height:.85;
  font-weight:900;
  transition: transform 0.4s cubic-bezier(0.16, 1, 0.3, 1), background-color 0.4s cubic-bezier(0.16, 1, 0.3, 1);
}
.testimonial:hover .quote {
  background-color: var(--black);
  transform: translateY(-50%) scale(1.08);
}
.testimonial-text{
  color:#171717;
  font-size:clamp(17px, 1.2vw, 24px);
  line-height:1.34;
  font-weight:400;
}
.testimonial-rule{
  width:100%;
  height:1px;
  margin:clamp(34px, 3.05vw, 62px) 0 clamp(22px, 1.75vw, 36px);
  background:#dedede;
}
.testimonial-name{
  color:#111;
  font-family:var(--body);
  font-size:clamp(18px, 1.25vw, 26px);
  line-height:1.2;
  font-weight:700;
  text-transform:none;
}
.testimonial-role{
  margin-top:8px;
  color:#808080;
  font-size:clamp(14px, .92vw, 19px);
  line-height:1.35;
  font-weight:400;
}
/* FAQ / ESTIMATE */
.faq-section{
  background:#fff;
  color:#050505;
  padding-block:clamp(86px, 7.86vw, 110px) clamp(74px, 6.43vw, 90px);
}
.faq-grid{
  width:var(--wide-container);
  margin-inline:auto;
  display:grid;
  grid-template-columns:minmax(340px, 430px) minmax(0, 1fr);
  gap:clamp(56px, 5.2vw, 96px);
  align-items:start;
}
.faq-intro{
  position:sticky;
  top:calc(var(--header-height) + 30px);
}
.faq-intro h2{
  font-size:clamp(44px, 4.42vw, 62px);
  line-height:1.08;
  white-space:nowrap;
}
.faq-intro p{
  width:min(560px, 100%);
  margin-top:clamp(24px, 2.05vw, 29px);
  color:#666;
  font-size:clamp(12px, 1.02vw, 18px);
  line-height:1.45;
  font-weight:400;
}
.faq-list{
  display:grid;
  gap:24px;
}
.faq-item{
  border:1px solid #dedede;
  border-radius:12px;
  background:#fff;
  overflow:hidden;
  box-shadow:0 1px 3px rgba(0,0,0,.04);
}
.faq-item.open{
  border-color:#f2d382;
  box-shadow:none;
}
.faq-q{
  width:100%;
  min-height:73px;
  padding:24px 24px 24px 24px;
  background:transparent;
  border:0;
  display:flex;
  align-items:center;
  justify-content:space-between;
  gap:18px;
  color:#161616;
  font-size:clamp(22px, 1.68vw, 24px);
  line-height:1.2;
  font-weight:500;
  text-align:left;
  cursor:pointer;
}
.faq-q span{
  flex:0 0 auto;
  color:#111;
  display: flex;
  align-items: center;
  justify-content: center;
}
.faq-item.open .faq-q{
  min-height:62px;
  align-items:flex-start;
  padding:32px 24px 16px 28px;
}
.faq-item.open .faq-q span{
  color:var(--yellow);
}
.faq-a {
  max-height: 0;
  overflow: hidden;
  opacity: 0;
  max-width: 930px;
  padding: 0 58px 32px 28px;
  color: #6f6f6f;
  font-size: clamp(18px, 1.44vw, 22px);
  line-height: 1.42;
  font-weight: 200;
  transition: max-height 0.8s cubic-bezier(0.16, 1, 0.3, 1), opacity 0.8s cubic-bezier(0.16, 1, 0.3, 1);
}
.faq-item.open .faq-a {
  opacity: 1;
}

.estimate-section{
  background:#fff;
  color:#050505;
  padding-block:clamp(110px, 9.6vw, 196px) clamp(112px, 7.8vw, 160px);
}
.estimate-grid{
  width:var(--wide-container);
  margin-inline:auto;
  display:grid;
  grid-template-columns:minmax(560px, 1fr) minmax(0, 924px);
  gap:clamp(64px, 4.45vw, 91px);
  align-items:start;
}
.estimate-copy h2{
  font-size:clamp(56px, 4.1vw, 82px);
  line-height:1.08;
  white-space:nowrap;
}
.estimate-copy > p{
  width:min(620px, 100%);
  margin-top:clamp(34px, 2.45vw, 50px);
  color:#6d6d6d;
  font-size:clamp(12px, 1.02vw, 18px);
  line-height:1.45;
  font-weight:400;
}
.benefits{
  margin-top:clamp(72px, 5vw, 102px);
  display:grid;
}
.benefit{
  display:grid;
  grid-template-columns:96px 1fr;
  gap:22px;
  align-items:start;
  padding-block:0 54px;
  transition: transform 0.4s cubic-bezier(0.16, 1, 0.3, 1);
}
.benefit + .benefit{
  border-top:1px solid #e3e3e3;
  padding-top:54px;
}
.benefit-icon{
  width:96px;
  aspect-ratio:1;
  border-radius:50%;
  background:var(--yellow);
  display:grid;
  place-items:center;
  transition: transform 0.4s cubic-bezier(0.16, 1, 0.3, 1), background-color 0.4s cubic-bezier(0.16, 1, 0.3, 1), box-shadow 0.4s cubic-bezier(0.16, 1, 0.3, 1);
}
.benefit-icon img{
  width:58px;
  height:58px;
  object-fit:contain;
  transition: filter 0.4s cubic-bezier(0.16, 1, 0.3, 1);
}
.benefit h3{
  font-family:var(--body);
  color:#171717;
  font-size:clamp(22px, 1.42vw, 29px);
  line-height:1.2;
  font-weight:700;
  text-transform:none;
  margin-bottom:14px;
}
.benefit p{
  color:#666;
  font-size:clamp(18px, 1.16vw, 24px);
  line-height:1.45;
  font-weight:400;
}
.benefit:hover {
  transform: translateX(8px);
}
.benefit:hover .benefit-icon {
  background-color: var(--black);
  transform: scale(1.08);
  box-shadow: 0 8px 24px rgba(0, 0, 0, 0.12);
}
.benefit:hover .benefit-icon img {
  filter: brightness(0) saturate(100%) invert(82%) sepia(48%) saturate(1450%) hue-rotate(357deg) brightness(105%) contrast(97%);
}
.estimate-form{
  background:#000;
  color:#fff;
  border:1px solid #424242;
  width:100%;
  max-width:924px;
  padding:clamp(56px, 3.8vw, 78px) clamp(54px, 3.8vw, 78px);
}
.estimate-form h3{
  font-family:var(--body);
  font-size:clamp(28px, 1.9vw, 39px);
  line-height:1.15;
  font-weight:700;
  text-transform:none;
}
.estimate-form-subtitle{
  margin-top:12px;
  color:#8e8e8e;
  font-size:clamp(17px, 1vw, 21px);
  line-height:1.4;
}
.form-grid{
  margin-top:44px;
  display:grid;
  grid-template-columns:repeat(2, minmax(0, 1fr));
  gap:30px 32px;
}
.form-field{
  display:grid;
  gap:18px;
}
.form-field--wide{
  grid-column:1 / -1;
}
.form-field label{
  color:#a0a0a0;
  font-size:clamp(18px, 1.05vw, 22px);
  line-height:1.2;
  font-weight:600;
}
.estimate-form input,
.estimate-form select,
.estimate-form textarea{
  width:100%;
  min-height:60px;
  background:#f5f5f5;
  color:#111;
  border:0;
  border-radius:0;
  padding:0 20px;
  outline:none;
  font-size:clamp(16px, .95vw, 19px);
}
.estimate-form input::placeholder,
.estimate-form textarea::placeholder{
  color:#aaa;
}
.estimate-form select{
  appearance: none;
  -webkit-appearance: none;
  -moz-appearance: none;
  background-image: url("data:image/svg+xml;utf8,<svg fill='%23111111' height='24' viewBox='0 0 24 24' width='24' xmlns='http://www.w3.org/2000/svg'><path d='M7 10l5 5 5-5z'/><path d='M0 0h24v24H0z' fill='none'/></svg>");
  background-repeat: no-repeat;
  background-position: right 15px center;
  background-size: 20px;
  padding-right: 40px !important;
}
.estimate-form textarea{
  min-height:142px;
  padding-block:20px;
  resize:vertical;
}
.estimate-submit{
  width:100%;
  min-height:58px;
  margin-top:30px;
  border:0;
  background:var(--yellow);
  color:#050505;
  font-size:clamp(16px, .9vw, 18px);
  line-height:1;
  font-weight:700;
  cursor:pointer;
  transition: background-color 0.3s ease, color 0.3s ease, transform 0.3s cubic-bezier(0.16, 1, 0.3, 1), box-shadow 0.3s ease;
}
.estimate-submit:hover{
  background-color: #fff;
  color: #000;
  transform: translateY(-3px);
  box-shadow: 0 10px 25px rgba(255, 255, 255, 0.2);
}
.estimate-submit:disabled{
  cursor:not-allowed;
  opacity:.68;
  transform:none;
  box-shadow:none;
}
.estimate-confidential{
  margin-top:34px;
  color:#9a9a9a;
  font-size:clamp(15px, .88vw, 18px);
  line-height:1.45;
}

/* CUSTOM SELECT DROPDOWNS */
.custom-select-wrapper {
  position: relative;
  width: 100%;
}
.custom-select-trigger {
  width: 100%;
  min-height: 60px;
  background: #f5f5f5;
  color: #111;
  border: 0;
  border-radius: 0;
  padding: 0 20px;
  display: flex;
  align-items: center;
  justify-content: space-between;
  cursor: pointer;
  font-size: clamp(16px, .95vw, 19px);
  position: relative;
  user-select: none;
}
.custom-select-trigger::after {
  content: "";
  width: 14px;
  height: 14px;
  background-color: currentColor;
  display: block;
  mask: url("data:image/svg+xml;utf8,<svg fill='none' stroke='black' stroke-width='3' stroke-linecap='round' stroke-linejoin='round' viewBox='0 0 24 24' xmlns='http://www.w3.org/2000/svg'><path d='M20 12H4M4 12L11 5M4 12L11 19'/></svg>") no-repeat center/contain;
  -webkit-mask: url("data:image/svg+xml;utf8,<svg fill='none' stroke='black' stroke-width='3' stroke-linecap='round' stroke-linejoin='round' viewBox='0 0 24 24' xmlns='http://www.w3.org/2000/svg'><path d='M20 12H4M4 12L11 5M4 12L11 19'/></svg>") no-repeat center/contain;
  transform: rotate(-90deg);
  transition: transform 0.3s ease;
}
.custom-select-wrapper.open .custom-select-trigger::after {
  transform: rotate(90deg);
}

/* ARROW SVG STYLES */
.arrow-svg {
  width: 24px;
  height: 24px;
  display: block;
  transition: transform 0.3s ease;
}
.arrow-svg--left {
  transform: rotate(0deg);
}
.arrow-svg--right {
  transform: rotate(180deg);
}
.arrow-svg--down-left {
  transform: rotate(-45deg);
}
.arrow-svg--up-right {
  transform: rotate(135deg);
}
.popular-nav button .arrow-svg {
  width: 36px;
  height: 36px;
}
.gallery-nav .arrow-svg {
  width: clamp(24px, 2vw, 32px);
  height: clamp(24px, 2vw, 32px);
}
.faq-item .arrow-svg {
  transform: rotate(135deg);
}
.faq-item.open .arrow-svg {
  transform: rotate(-45deg);
}
.custom-select-options {
  position: absolute;
  top: 100%;
  left: 0;
  right: 0;
  background: #101010;
  border: 1px solid #333;
  z-index: 100;
  display: none;
  list-style: none;
  padding: 0;
  margin: 0;
  max-height: 250px;
  overflow-y: auto;
  box-shadow: 0 8px 16px rgba(0,0,0,0.5);
}
.custom-select-wrapper.open .custom-select-options {
  display: block;
}
.custom-select-option {
  padding: 14px 20px;
  cursor: pointer;
  color: #ccc;
  font-size: clamp(15px, .9vw, 18px);
  transition: all 0.2s ease;
  text-align: left;
}
.custom-select-option:hover {
  background: var(--yellow);
  color: #000;
}
.custom-select-option.selected {
  background: #2d2d2d;
  color: var(--yellow);
}
.form-msg{
  display:none;
  margin-top:14px;
  font-weight:800;
}
.form-msg--success{
  color:#8eff8e;
}
.form-msg--error{
  color:#ff8e8e;
}

/* CTA / FOOTER */
.cta{
  background:var(--yellow);
  color:#000;
  padding-block:clamp(82px, 6.15vw, 112px) clamp(84px, 6.25vw, 114px);
  text-align:center;
}
.cta-inner{
  width:var(--wide-container);
  margin-inline:auto;
}
.cta h2{
  font-size:clamp(48px, 3.63vw, 66px);
  line-height:.95;
  margin-bottom:clamp(22px, 1.65vw, 30px);
}
.cta p{
  color:#2f2a18;
  font-size:clamp(18px, 1.3vw, 24px);
  line-height:1.35;
  font-weight:400;
}
.cta-actions{
  margin-top:clamp(30px, 2.2vw, 40px);
  display:flex;
  justify-content:center;
  align-items:center;
  gap:24px;
}
.cta-action{
  min-height:60px;
  display:inline-flex;
  align-items:center;
  justify-content:space-between;
  gap:18px;
  padding:0 24px;
  font-size:clamp(19px, 1.32vw, 24px);
  line-height:1;
  font-weight:400;
  text-transform:none;
  flex:0 0 auto;
  transition: background-color 0.3s ease, color 0.3s ease, transform 0.3s cubic-bezier(0.16, 1, 0.3, 1), box-shadow 0.3s ease, border-color 0.3s ease;
  border: 1px solid transparent;
}
.cta-action:hover{
  transform: translateY(-4px);
}
.cta-action--dark{
  width:320px;
  min-width:0;
  background:#000;
  color:#fff;
}
.cta-action--dark:hover{
  background-color: #fff;
  color: #000;
  box-shadow: 0 10px 25px rgba(255, 255, 255, 0.25);
}
.cta-action--light{
  width:420px;
  min-width:0;
  background:#fff;
  color:#000;
}
.cta-action--light:hover{
  background-color: #000;
  color: #fff;
  border-color: #fff;
  box-shadow: 0 10px 25px rgba(255, 255, 255, 0.1);
}
.cta-action img{
  width:18px;
  height:18px;
  flex:0 0 auto;
  transition: filter 0.3s ease;
}
.cta-action--dark img{
  filter:invert(1);
}
.cta-action--dark:hover img{
  filter: none;
}
.cta-action--light:hover img{
  filter: invert(1);
}

.site-footer{
  background:#000;
  color:#fff;
  padding-block:clamp(92px, 8.45vw, 154px) clamp(40px, 2.97vw, 54px);
}
.footer-shell{
  width:min(1522px, calc(100% - clamp(48px, 16.36vw, 298px)));
  margin-inline:auto;
}
.footer-top{
  display:grid;
  grid-template-columns:150px minmax(760px, 860px) auto;
  align-items:center;
  column-gap:75px;
}
.footer-logo img{
  width:110px;
  height:auto;
}
.footer-logo-container{
  display: block;
}
.footer-iso-logo{
  display: none;
}
.footer-description{
  max-width:860px;
  color:#8e8e8e;
  font-size:clamp(20px, 1.32vw, 24px);
  line-height:1.34;
  font-weight:400;
}
.footer-socials{
  justify-self:end;
  display:flex;
  align-items:center;
  gap:21px;
}
.footer-social{
  width:56px;
  height:56px;
  border-radius:50%;
  background:#2d2d2d;
  color:#c9c9c9;
  display:grid;
  place-items:center;
  transition:background .2s ease, color .2s ease;
}
.footer-social:hover{
  background:var(--yellow);
  color:#000;
}
.footer-social--facebook:hover {
  background: #1877F2;
  color: #fff;
}
.footer-social--instagram:hover {
  background: radial-gradient(circle at 30% 107%, #fdf497 0%, #fdf497 5%, #fd5949 45%, #d6249f 60%, #285ae5 90%);
  color: #fff;
}
.footer-social--youtube:hover {
  background: #FF0000;
  color: #fff;
}
.footer-social svg{
  width:26px;
  height:26px;
}
.footer-main{
  margin-top:clamp(70px, 4.95vw, 90px);
  display:grid;
  grid-template-columns:150px 370px 300px minmax(420px, 1fr);
  column-gap:75px;
  align-items:start;
}
.footer-col--services{
  grid-column:2;
}
.footer-heading{
  font-family:var(--body);
  color:#fff;
  font-size:clamp(22px, 1.42vw, 26px);
  line-height:1.2;
  font-weight:700;
  text-transform:none;
  margin-bottom:36px;
}
.footer-links{
  display:grid;
  gap:24px;
}
.footer-links a{
  color:#d5d5d5;
  font-size:clamp(20px, 1.38vw, 25px);
  line-height:1.25;
  font-weight:400;
  display:inline-block;
  width:max-content;
  transition:color 0.3s cubic-bezier(0.16, 1, 0.3, 1), transform 0.3s cubic-bezier(0.16, 1, 0.3, 1);
}
.footer-links a:hover{
  color:var(--yellow);
  transform:translateX(6px);
}
.footer-contact{
  display:grid;
  gap:42px;
}
.footer-contact-item{
  display:grid;
  grid-template-columns:56px 1fr;
  gap:16px;
  align-items:center;
  text-decoration:none;
}
a.footer-contact-item {
  transition:transform 0.3s cubic-bezier(0.16, 1, 0.3, 1);
}
a.footer-contact-item .footer-contact-icon {
  transition:background-color 0.3s ease, color 0.3s ease, transform 0.3s cubic-bezier(0.16, 1, 0.3, 1), box-shadow 0.3s ease;
}
a.footer-contact-item .footer-contact-value {
  transition:color 0.3s cubic-bezier(0.16, 1, 0.3, 1);
}
a.footer-contact-item:hover {
  transform:translateY(-2px);
}
a.footer-contact-item:hover .footer-contact-icon {
  background-color:#fff;
  color:#000;
  box-shadow:0 4px 15px rgba(255, 255, 255, 0.15);
}
a.footer-contact-item:hover .footer-contact-value {
  color:var(--yellow);
}
.footer-contact-icon{
  width:56px;
  height:56px;
  border-radius:50%;
  background:var(--yellow);
  color:#000;
  display:grid;
  place-items:center;
}
.footer-contact-icon svg{
  width:26px;
  height:26px;
}
.footer-contact-label{
  display:block;
  color:#8e8e8e;
  font-size:clamp(18px, 1.2vw, 22px);
  line-height:1.2;
  margin-bottom:6px;
}
.footer-contact-value{
  display:block;
  color:#fff;
  font-size:clamp(18px, 1.05vw, 20px);
  line-height:1.35;
  font-weight:700;
}
.footer-bottom{
  margin-top:clamp(72px, 5.35vw, 98px);
  padding-top:39px;
  border-top:1px solid #333;
  display:flex;
  align-items:center;
  justify-content:space-between;
  gap:24px;
  color:#777;
  font-size:clamp(15px, 1.05vw, 19px);
  line-height:1.4;
}
.footer-legal{
  display:flex;
  align-items:center;
  gap:28px;
}
.footer-legal a,
.footer-legal span{
  color:#777;
}
.footer-legal a {
  transition:color 0.3s cubic-bezier(0.16, 1, 0.3, 1);
}
.footer-legal a:hover {
  color:var(--yellow);
}

@media (min-width:1201px) and (max-width:1600px){
  .footer-shell{
    width:var(--wide-container);
  }
  .footer-top{
    grid-template-columns:120px minmax(560px, 1fr) auto;
    column-gap:56px;
  }
  .footer-logo img{
    width:92px;
  }
  .footer-description{
    max-width:none;
    font-size:20px;
  }
  .footer-socials{
    gap:14px;
  }
  .footer-social{
    width:48px;
    height:48px;
  }
  .footer-social svg{
    width:22px;
    height:22px;
  }
  .footer-main{
    grid-template-columns:120px minmax(260px, 1fr) minmax(220px, .9fr) minmax(340px, 1.2fr);
    column-gap:56px;
  }
  .footer-links a{
    font-size:20px;
  }
  .footer-contact-item{
    grid-template-columns:48px 1fr;
  }
  .footer-contact-icon{
    width:48px;
    height:48px;
  }
  .footer-contact-icon svg{
    width:22px;
    height:22px;
  }
}

@media (max-width:1200px){
  .footer-shell{
    width:calc(100% - 64px);
  }
  .footer-top{
    grid-template-columns:120px 1fr;
    gap:34px 54px;
  }
  .footer-socials{
    grid-column:2;
    justify-self:start;
  }
  .footer-main{
    grid-template-columns:repeat(3, minmax(0, 1fr));
    column-gap:42px;
  }
  .footer-col--services{
    grid-column:auto;
  }
}

@media (max-width:760px){
  .cta-actions{
    flex-direction:column;
    align-items:stretch;
    width:min(360px, 100%);
    margin-inline:auto;
  }
  .cta-action,
  .cta-action--dark,
  .cta-action--light{
    width:100%;
    min-width:0;
  }
  .footer-shell{
    width:calc(100% - 40px);
  }
  .footer-logo-container{
    display: flex;
    align-items: center;
    justify-content: space-between;
    width: 100%;
    margin-bottom: 24px;
  }
  .footer-iso-logo{
    display: block;
    height: 68px;
    width: auto;
    object-fit: contain;
  }
  .footer-top,
  .footer-main{
    grid-template-columns:1fr;
  }
  .footer-socials{
    grid-column:auto;
  }
  .footer-main{
    gap: 0;
  }
  .footer-accordion {
    border-bottom: 1px solid #222;
  }
  .footer-accordion .footer-heading {
    cursor: pointer;
    display: flex;
    align-items: center;
    justify-content: space-between;
    margin-bottom: 0;
    padding-block: 20px 16px;
  }
  .footer-accordion .footer-heading::after {
    content: "";
    display: inline-block;
    width: 8px;
    height: 8px;
    border-right: 2px solid var(--yellow);
    border-bottom: 2px solid var(--yellow);
    transform: rotate(45deg);
    transition: transform 0.3s cubic-bezier(0.16, 1, 0.3, 1);
    margin-right: 8px;
    flex-shrink: 0;
  }
  .footer-accordion.active .footer-heading::after {
    transform: rotate(-135deg);
  }
  .footer-accordion .footer-links {
    max-height: 0;
    overflow: hidden;
    opacity: 0;
    transition: max-height 0.4s cubic-bezier(0.16, 1, 0.3, 1), opacity 0.3s ease;
    padding-top: 0;
    padding-bottom: 0;
  }
  .footer-accordion.active .footer-links {
    max-height: 450px;
    opacity: 1;
    padding-top: 8px;
    padding-bottom: 28px;
  }
  .footer-col:not(.footer-accordion) {
    margin-top: 32px;
  }
  .footer-bottom{
    flex-direction:column;
    align-items:flex-start;
  }
}

/* MODAL */
.modal{
  position:fixed;
  inset:0;
  z-index:10000;
  background:rgba(0,0,0,.92);
  display:none;
  place-items:center;
  padding:1.25rem;
}
.modal.open{display:grid}
.modal-box{
  width:min(920px,100%);
  position:relative;
  max-height: 90svh;
  display: flex;
  flex-direction: column;
  align-items: center;
}
.modal-box img,.modal-box iframe{
  width:100%;
  max-height:82svh;
  object-fit:contain;
  background:#000;
}
.close{
  position:absolute;
  right: -12px;
  top: -12px;
  width:48px;
  height:48px;
  border:0;
  background: #fff;
  color:#1a1a1a;
  font-size:1.5rem;
  font-weight: 700;
  cursor:pointer;
  transition: transform 0.3s cubic-bezier(0.16, 1, 0.3, 1), background 0.3s ease, color 0.3s ease;
  z-index: 10001;
  border-radius: 50%;
  display: flex;
  align-items: center;
  justify-content: center;
  line-height: 1;
  box-shadow: 0 4px 16px rgba(0,0,0,0.5);
}
.close:hover{
  transform: scale(1.15);
  background: var(--yellow);
  color: #030303;
}

/* FORM MODAL CUSTOM STYLES (COMPACTED TO FIT VIEWPORT) */
#formModal {
  overflow-y: auto;
  padding: 20px 1.25rem;
}
#formModal.open {
  display: flex;
  justify-content: center;
  align-items: center;
}
.form-modal-box {
  width: min(924px, 100%);
  margin: auto 0;
  position: relative;
}
.form-modal-box .close {
  position: absolute;
  top: 24px;
  right: 32px;
  z-index: 10;
  background: transparent;
  color: #ffffff;
  font-size: 2.25rem;
  width: 44px;
  height: 44px;
  backdrop-filter: none;
  -webkit-backdrop-filter: none;
  border-radius: 0;
  transition: transform 0.3s cubic-bezier(0.16, 1, 0.3, 1), color 0.3s ease;
}
.form-modal-box .close:hover {
  transform: rotate(90deg) scale(1.2);
  color: var(--yellow);
}
body.modal-open {
  overflow: hidden;
}

#formModal .estimate-form {
  padding: 24px 32px;
  max-width: 900px;
}
#formModal .estimate-form h3 {
  font-size: clamp(20px, 1.6vw, 24px);
}
#formModal .estimate-form-subtitle {
  font-size: 13px;
  margin-top: 2px;
}
#formModal .form-grid {
  margin-top: 18px;
  gap: 12px 16px;
  grid-template-columns: repeat(3, minmax(0, 1fr));
}
#formModal .form-field {
  gap: 4px;
}
#formModal .form-field label {
  font-size: 12px;
  font-weight: 500;
}
#formModal .estimate-form input,
#formModal .custom-select-trigger {
  min-height: 38px;
  padding: 0 12px;
  font-size: 13px;
  border: 1px solid #d5d5d5;
  background: #fdfdfd;
}
#formModal .estimate-form input::placeholder,
#formModal .estimate-form textarea::placeholder {
  color: #666;
}
#formModal .estimate-form input:focus,
#formModal .estimate-form textarea:focus,
#formModal .custom-select-wrapper.open .custom-select-trigger {
  border-color: var(--yellow);
  background: #ffffff;
}
#formModal .custom-select-options {
  font-size: 13px;
}
#formModal .custom-select-option {
  padding: 8px 12px;
}
#formModal .estimate-form textarea {
  min-height: 60px;
  padding-block: 8px;
  font-size: 13px;
  border: 1px solid #d5d5d5;
  background: #fdfdfd;
}

@media (min-width: 768px) {
  #formModal .form-field:nth-child(1),
  #formModal .form-field:nth-child(2),
  #formModal .form-field:nth-child(3),
  #formModal .form-field:nth-child(4),
  #formModal .form-field:nth-child(5),
  #formModal .form-field:nth-child(6) {
    grid-column: span 1;
  }
  #formModal .form-field:nth-child(7),
  #formModal .form-field:nth-child(8) {
    grid-column: span 3;
  }
}

@media (max-width: 767px) {
  #formModal .form-grid {
    grid-template-columns: 1fr;
    gap: 10px;
  }
  #formModal .form-field {
    grid-column: auto !important;
  }
}

#formModal .estimate-submit {
  min-height: 40px;
  margin-top: 14px;
  font-size: 14px;
}
#formModal .estimate-confidential {
  margin-top: 10px;
  font-size: 11px;
  text-align: center;
}

/* 600px */
@media (min-width:1024px) and (max-width:1199px){
  .solutions-top{
    grid-template-columns:1fr;
    gap:44px;
  }
  .solutions-copy{padding-top:0}
  .solutions-copy p{width:min(620px,100%)}
}

@media (max-width:1023px){
  :root{
    --hero-container:calc(100% - clamp(32px, 8vw, 72px));
    --wide-container:calc(100% - clamp(32px, 8vw, 72px));
    --header-height: 124px;
  }
  .topbar{height:52px}
  .topbar-inner{
    justify-content:center;
    gap:18px;
  }
  .contact-link{
    font-size:clamp(12px, 2.7vw, 15px);
    gap:6px;
  }
  .contact-link svg{
    width:16px;
    height:16px;
  }
  .nav-wrap{height:92px}
  .brand-logo{width:82px}
  .quote-btn{display:none}
  .hamburger{
    display:grid;
    margin-left:auto;
  }
  .menu{
    top:calc(100% + 12px);
    left:auto;
    right:0;
    width:min(360px, calc(100vw - 32px));
    padding:12px;
    gap:6px;
    border:1px solid rgba(255,255,255,.16);
    border-radius:18px;
    background:rgba(5,7,8,.96);
    box-shadow:0 24px 70px rgba(0,0,0,.46);
    backdrop-filter:blur(18px);
    -webkit-backdrop-filter:blur(18px);
  }
  .menu a{
    width:100%;
    padding:14px 16px;
    border-radius:12px;
    color:rgba(255,255,255,.82);
    font-size:16px;
    line-height:1.1;
  }
  .menu a:hover,
  .menu a.active{
    background:rgba(252,201,36,.14);
    color:var(--yellow) !important;
  }
  .menu a::after{
    display:none;
  }
  .hero{
    min-height:auto;
    padding-top:190px;
    padding-bottom:84px;
    background-position:58% top;
  }
  .hero-content{max-width:680px}
  .hero-eyebrow{margin-bottom:14px}
  .hero-title-main{margin-top:4px}
  .hero-subtitle{margin-top:16px}
  .hero-copy{
    max-width:560px;
    margin-top:18px;
  }
  .hero-actions{
    flex-wrap:wrap;
    gap:14px;
    margin-top:26px;
  }
  .hero-action{
    min-width:min(100%, 310px);
    padding-inline:22px;
    gap:18px;
  }
  .hero-stats{
    width:min(100%, 640px);
    margin-top:36px;
  }
  .hero-slide-badge{display:none}
  .hero-dots {
    display: flex;
    justify-content: center;
    gap: 12px;
    position: absolute;
    bottom: 10px;
    left: 50%;
    transform: translateX(-50%);
    z-index: 10;
  }
  .hero-dot {
    width: 10px;
    height: 10px;
    border-radius: 50%;
    background: rgba(15, 23, 42, 0.2);
    cursor: pointer;
    transition: all 0.3s cubic-bezier(0.16, 1, 0.3, 1);
  }
  .hero-dot.active {
    background: #050708;
    transform: scale(1.3);
    box-shadow: 0 0 0 2.5px var(--yellow);
  }
  .hero-cut{
    width:82vw;
    height:30px;
  }
  .clients{padding-block:34px 76px}
  .proof-mosaic{
    padding-block:58px 78px;
  }
  .proof-grid{
    grid-template-columns:repeat(2, minmax(0, 1fr));
    gap:18px;
  }
  .proof-stat{
    padding:34px 30px 38px;
  }
  .client-logos{
    --marquee-item-width: 200px;
    margin-top:52px;
    display:block;
  }
  .client-logos::before,
  .client-logos::after {
    width: 60px;
  }
  .client-logo{
    min-height:110px;
    padding-inline:24px;
    border-right: 2px solid #ececec;
  }
  .client-logo img {
    max-height: 60px;
  }
  .why-section{padding-bottom:82px}
  .why-top{
    grid-template-columns:1fr;
    gap:22px;
    margin-bottom:42px;
  }
  .why-controls{
    justify-self:start;
  }
  .why-nav{
    justify-content:flex-start;
  }
  .why-slider-shell{
    margin-left:calc((100vw - var(--wide-container)) / 2);
    width:calc(100vw - ((100vw - var(--wide-container)) / 2));
  }
  .why-card{
    flex-basis:clamp(330px, 72vw, 520px);
    height:650px;
  }
  .dark-section{
    padding-block:86px 132px;
  }
  .solutions-top{
    grid-template-columns:1fr;
    gap:44px;
  }
  .solutions-copy{padding-top:0}
  .solutions-copy p{width:min(620px,100%)}
  .project-label{margin-top:52px}
  .project-types{
    grid-template-columns:repeat(2,1fr);
    border-top:1px solid #272727;
  }
  .project-item,
  .project-item:first-child{
    border-left:0;
    border-bottom:1px solid #272727;
  }
  .project-item:nth-child(even){border-left:1px solid #272727}
  .project-item:last-child{grid-column:1 / -1}
  .project-type,
  .project-item:first-child .project-type{
    padding:26px;
  }
  .popular-project{
    display: flex;
    flex-direction: column;
    height: auto;
    margin-top:68px;
    min-height:0;
    position: relative;
    background: #000;
  }
  .popular-image-wrap{
    width: 100%;
    height: 480px;
    position: relative;
  }
  .popular-image{
    width: 100%;
    height: 100%;
    object-fit: cover;
  }
  .popular-pagination{
    display: block;
    right: 20px;
    bottom: 20px;
  }
  .popular-copy{
    position: relative;
    width: 100%;
    height: auto;
    min-height:0;
    padding:48px 42px 116px;
    clip-path: none;
    background: #292929;
  }
  .popular-features {
    padding-right: 140px;
  }
  .popular-nav{
    display: grid;
    left:auto;
    right:0;
  }
  .process-section{
    padding-block:76px 84px;
  }
  .process-layout{
    grid-template-columns:1fr;
    gap:52px;
  }
  .process-left{
    position:static;
  }
  .process-left h2{
    font-size:clamp(44px, 8vw, 62px);
  }
  .process-intro{
    max-width:720px;
    margin-bottom:34px;
  }
  .process-stats{
    width:100%;
  }
  .process-step{
    min-height:0;
    grid-template-columns:92px 1fr;
    gap:24px;
    padding:36px 72px 54px 0;
  }
  .process-step + .process-step{
    padding-top:64px;
  }
  .process-icon{
    width:72px;
    height:72px;
  }
  .process-number{
    top:36px;
    right:0;
    width:48px;
    height:48px;
  }
  .process-step + .process-step .process-number{
    top:64px;
  }
  .proof-section{
    padding-block:86px 90px;
  }
  .founder-block{
    grid-template-columns:1fr;
    min-height:980px;
    gap:0;
  }
  .founder-copy p{
    max-width:820px;
  }
  .founder-visual{
    min-height:clamp(720px, 108vw, 850px);
    margin-top:54px;
  }
  .founder-portrait{
    top:-70px;
    right:auto;
    left:50%;
    width:min(980px, 118vw);
    transform:translateX(-55%);
  }
  .founder-name{
    top:clamp(590px, 92vw, 720px);
    left:50%;
    right:auto;
    width:min(980px, 118vw);
    transform:translateX(-55%);
  }
}

@media (max-width:899px){
  .faq-grid,
  .estimate-grid{
    width:calc(100% - 40px);
    grid-template-columns:1fr;
    gap:48px;
  }
  .faq-intro{
    position:static;
  }
  .faq-intro h2,
  .estimate-copy h2{
    white-space:normal;
  }

  .estimate-form{
    max-width:none;
  }
}

@media (max-width:599px){
  .topbar-inner{
    justify-content:center;
    overflow-x:auto;
  }
  .nav-wrap{height:82px}
  .brand-logo{width:72px}
  .hamburger{
    width:48px;
    height:48px;
  }
  .hamburger span:nth-child(1){top:15px}
  .hamburger span:nth-child(2){top:23px}
  .hamburger span:nth-child(3){top:31px}
  .hamburger.is-open span:nth-child(1),
  .hamburger.is-open span:nth-child(3){top:23px}
  .menu{
    top:calc(100% + 10px);
    width:min(340px, calc(100vw - 32px));
  }
  .hero{
    padding-top:150px;
    padding-bottom:46px;
    background:
      linear-gradient(90deg,rgba(1,9,12,.98) 0%,rgba(1,9,12,.9) 52%,rgba(4,13,18,.38) 100%),
      linear-gradient(180deg,rgba(0,0,0,0) 50%,rgba(2,8,10,.72) 100%),
      var(--hero-image) 62% top/cover no-repeat;
  }
  .hero-eyebrow{
    font-size:20px;
    margin-bottom:12px;
  }
  .hero-title-top{font-size:clamp(30px, 8.8vw, 38px)}
  .hero-title-main{font-size:clamp(52px, 14.5vw, 64px)}
  .hero-subtitle{
    font-size:20px;
    line-height:1.15;
  }
  .hero-copy{
    font-size:16px;
    line-height:1.34;
  }
  .hero-actions{display:grid}
  .hero-action{
    width:100%;
    min-height:58px;
    font-size:17px;
  }
  .hero-stats{
    grid-template-columns:repeat(3, minmax(0, 1fr));
    min-height:0;
    margin-top:24px;
  }
  .hero-stat{
    min-height:96px;
    padding:16px 8px;
    align-items:center;
    text-align:center;
  }
  .hero-stat + .hero-stat{
    border-left:1px solid rgba(255,255,255,.24);
    border-top:0;
  }
  .hero-stat strong{
    font-size:36px;
  }
  .hero-stat span{
    font-size:12px;
    line-height:1.2;
    margin-top:8px;
  }
  .clients{padding-block:32px 56px}
  .proof-mosaic{
    padding-block:42px 58px;
  }
  .proof-grid{
    grid-template-columns:1fr;
    gap:16px;
  }
  .proof-image{
    display:none;
  }
  .proof-tile{
    aspect-ratio:681 / 560;
  }
  .proof-stat{
    min-height:300px;
    padding:34px 28px 36px;
  }
  .proof-value{
    font-size:86px;
  }
  .proof-copy h2{
    font-size:24px;
  }
  .proof-copy p{
    font-size:19px;
  }
  .client-title{font-size:44px}
  .client-copy{font-size:16px}
  .client-logos{
    margin-top:34px;
  }
  .cmrl-mark{width:92px}
  .orchid-mark{width:244px}
  .grundfos-mark{width:226px}
  .fiitjee-mark{font-size:42px}
  .why-title{font-size:44px}
  .why-copy{font-size:17px}
  .why-nav-btn{
    width:44px;
    height:44px;
  }
  .why-slider-shell{
    width:100vw;
    margin-left:calc((100vw - var(--wide-container)) / 2);
  }
  .why-track{gap:16px}
  .why-card{
    flex-basis:min(82vw, 360px);
    height:612px;
  }
  .why-card-copy{
    width:calc(100% - 92px);
    min-height:258px;
    padding:28px 24px 26px;
  }
  .why-card h3{font-size:24px}
  .why-card p{font-size:15px}
  .why-card-num{
    width:92px;
    height:92px;
    font-size:50px;
  }
  .dark-section{
    padding-block:72px 116px;
  }
  .solutions-top{
    grid-template-columns:1fr;
    gap:34px;
  }
  .solutions-copy{padding-top:0}
  .solutions-copy h2{font-size:44px}
  .solutions-copy p{font-size:16px}
  .compare-subtitle,
  .gallery-heading p,
  .video-showcase-heading p,
  .faq-intro p,
  .estimate-copy > p{
    font-size:16px;
  }
  .solutions-cta{
    width:100%;
    min-height:58px;
    padding-inline:18px;
    gap:16px;
  }
  .project-label{
    margin-top:44px;
    grid-template-columns:1fr;
    gap:0;
    text-align:center;
    white-space:normal;
    letter-spacing:8px;
    line-height:1.4;
  }
  .project-label::before,
  .project-label::after{display:none}
  .project-types{
    margin-top:34px;
    grid-template-columns:1fr;
    gap:0;
    border-top:1px solid #272727;
  }
  .project-item,
  .project-item:first-child,
  .project-item:nth-child(even),
  .project-item:last-child{
    border-left:0;
    border-bottom:1px solid #272727;
    grid-column:auto;
  }
  .project-type,
  .project-item:first-child .project-type{
    min-height:0;
    padding:22px 0;
    grid-template-columns:1fr;
    gap:12px;
  }
  .project-type img{
    grid-row:auto;
    width:58px;
    height:58px;
  }
  .project-type-title{font-size:21px}
  .project-type-copy{font-size:16px}
  .popular-project{
    margin-top:54px;
  }
  .popular-image-wrap{
    height:360px;
  }
  .popular-copy{
    padding:34px 26px 96px;
  }
  .popular-copy h3{font-size:25px}
  .popular-copy p{font-size:16px}
  .popular-features {
    padding-right: 85px;
  }
  .popular-features li{font-size:15px}
  .popular-ribbon{
    width:42px;
    height:170px;
    font-size:14px;
  }
  .popular-nav{
    left:auto;
    right:0;
  }
  .popular-nav button{
    width:70px;
    height:70px;
    font-size:28px;
  }
  .services-cut{
    width:82vw;
    height:34px;
  }
  .process-section{
    padding-block:62px 70px;
  }
  .process-left h2{
    font-size:42px;
  }
  .process-intro{
    font-size:16px;
  }
  .process-stats{
    grid-template-columns:repeat(2,1fr);
    gap:12px;
  }
  .process-stat{
    min-height:100px;
    padding:16px 14px;
    border-radius:6px;
  }
  .process-stat strong{
    font-size:clamp(18px, 5.5vw, 24px);
    line-height:1.1;
  }
  .process-stat span{
    font-size:clamp(12px, 3.5vw, 14px);
    line-height:1.3;
    margin-top:6px;
  }
  .process-step{
    grid-template-columns:62px 1fr;
    gap:18px;
    padding:34px 54px 42px 0;
  }
  .process-step + .process-step{
    padding-top:56px;
  }
  .process-icon{
    width:56px;
    height:56px;
  }
  .process-number{
    position:absolute;
    top:34px;
    right:0;
    width:42px;
    height:42px;
    font-size:16px;
  }
  .process-step + .process-step .process-number{
    top:56px;
  }
  .process-step-copy{
    padding-right:18px;
  }
  .process-step-copy h3{
    font-size:21px;
    margin-bottom:10px;
  }
  .process-step-copy p{
    font-size:16px;
  }
  .proof-section{
    padding-block:62px 74px;
  }
  .founder-block{
    display: flex;
    flex-direction: column;
    min-height:0;
    gap:0;
  }
  .founder-copy {
    display: contents;
  }
  .founder-kicker{
    order: 1;
    font-size:24px;
    margin-bottom:18px;
  }
  .founder-copy h2{
    order: 2;
    font-size:42px;
    margin-bottom:24px;
  }
  .founder-copy p{
    order: 4;
    font-size:16px;
  }
  .founder-copy p + p{
    margin-top:20px;
  }
  .founder-stats{
    order: 5;
    display:grid;
    grid-template-columns:1fr;
    gap:18px;
    margin-top:36px;
  }
  .founder-stat{
    padding-right:0;
  }
  .founder-stat + .founder-stat{
    border-left:0;
    border-top:1px solid #d6d6d6;
    padding-left:0;
    padding-top:18px;
  }
  .founder-stat strong{
    font-size:38px;
  }
  .founder-visual{
    order: 3;
    position: relative;
    display: flex;
    flex-direction: column;
    align-items: center;
    width: 100%;
    max-width: 100%;
    min-width: 0;
    min-height: auto;
    margin-top: 0px;
    margin-bottom: 10px;
  }
  .founder-portrait-wrap {
    position: static;
    width: 100vw;
    max-width: none;
    margin-left: calc(50% - 50vw);
    display: flex;
    align-self: flex-start;
    justify-content: center;
    overflow: hidden;
    pointer-events: auto;
  }
  .founder-portrait{
    position: relative;
    transform: translateX(-260px);
    width: min(600px, 140vw);
    max-width: none;
    height: auto;
    flex: 0 0 auto;
    margin-top: -12%;
    margin-bottom: -40%;
  }
  .founder-name{
    position: static;
    transform: none;
    width: 100%;
    margin-top: 16px;
    padding-bottom: 20px;
    max-width:620px;
    text-align: center;
  }
  .founder-name h3{
    font-size:32px;
  }
  .founder-name p{
    font-size:16px;
  }
  .video-showcase-section{
    padding-block:64px 58px;
  }
  .video-showcase-heading h2,
  .testimonials-section h2{
    font-size:42px;
  }
  .video-frame{
    width:100%;
    margin-top:42px;
    aspect-ratio:16 / 9;
  }
  .gallery-carousel-wrapper {
    margin-top: 42px;
  }
  .gallery {
    height: clamp(280px, 40vw, 450px);
  }
  .gallery-item.active {
    width: calc(100% - 32px);
    height: 100%;
  }
  .gallery-item.prev,
  .gallery-item.next {
    opacity: 0;
    pointer-events: none;
  }
  .gallery-nav {
    width: 48px;
    font-size: 18px;
  }
  .gallery-nav--prev {
    left: 8px;
  }
  .gallery-nav--next {
    right: 8px;
  }
  .video-play{
    width:86px;
  }
  .testimonials-section{
    padding-block:58px 72px;
  }
  .testimonial-grid{
    width:100%;
    grid-template-columns:1fr;
    gap:54px;
    margin-top:62px;
  }
  .testimonial{
    min-height:0;
    padding:58px 28px 34px;
  }
  .quote{
    left:28px;
  }
  .faq-section{
    padding-block:58px 48px;
  }
  .faq-grid{
    width:calc(100% - 32px);
    grid-template-columns:1fr;
    gap:34px;
  }
  .faq-intro h2,
  .estimate-copy h2{
    font-size:42px;
    white-space:normal;
  }
  .faq-list{
    gap:12px;
  }
  .faq-q{
    min-height:64px;
    padding-inline:20px;
    font-size:18px;
  }
  .faq-item.open .faq-q{
    padding-top:22px;
  }
  .faq-a{
    padding:0 20px 24px;
    font-size:15px;
  }
  .estimate-section{
    padding-block:48px 64px;
  }
  .estimate-grid{
    width:calc(100% - 32px);
    grid-template-columns:1fr;
    gap:42px;
  }
  .benefits{
    margin-top:36px;
  }
  .benefit{
    grid-template-columns:1fr;
    gap:14px;
    padding-bottom:26px;
  }
  .benefit + .benefit{
    padding-top:26px;
  }
  .benefit-icon{
    width:56px;
  }
  .benefit-icon img{
    width:34px;
    height:34px;
  }
  .estimate-form{
    padding:30px 24px;
  }
  .form-grid{
    grid-template-columns:1fr;
    gap:16px;
  }
  .form-field--wide{
    grid-column:auto;
  }
}

@media (min-width:1500px){
  .founder-copy{
    width:930px;
  }
  .founder-copy p{
    max-width:none;
  }
  .leader-break{display:initial}
}

@media (min-width:600px){
  .logos{grid-template-columns:repeat(3,1fr)}
  .cards{grid-template-columns:repeat(2,1fr)}
  .industry-grid{grid-template-columns:repeat(2,1fr)}
  .services{grid-template-columns:repeat(2,1fr)}
  .testimonial-grid{grid-template-columns:repeat(2,1fr)}
  .form-grid{grid-template-columns:repeat(2,1fr)}
  textarea{grid-column:1 / -1}
  .footer-grid{grid-template-columns:repeat(2,1fr)}
}

/* 768px */
@media (min-width:768px){
  .intro-grid,
  .solution-top,
  .leader-grid{
    grid-template-columns:40% 1fr;
  }
  .cards{grid-template-columns:repeat(3,1fr)}
  .industry-grid{grid-template-columns:repeat(3,1fr)}
  .feature-panel{grid-template-columns:56% 44%;align-items:center}
  .panel-copy{margin-left:clamp(-3.2rem, -4vw, -2rem);position:relative}
}

/* 1024px */
@media (min-width:1024px){
  .menu{
    position:static;
    display:flex;
    flex-direction:row;
    background:transparent;
    padding:0;
    gap:clamp(34px, 2.65vw, 54px);
    align-items:center;
    font-size:clamp(18px, 1.18vw, 24px);
    margin-left:auto;
  }
  .hamburger{display:none}
  .quote-btn{
    display:inline-flex;
    margin-left:clamp(26px, 2.1vw, 42px);
  }
  .logos{grid-template-columns:repeat(5,1fr)}
  .services{grid-template-columns:repeat(5,1fr)}
  .industry-grid{grid-template-columns:repeat(4,1fr)}
  .testimonial-grid{grid-template-columns:repeat(3,1fr)}
  .footer-grid{grid-template-columns:1.5fr repeat(3,1fr)}
  .hero{
    min-height:clamp(900px, 61.7vw, 1263px);
    background-position:center;
  }
}

/* 1280px+ */
@media (min-width:1280px){
  .hero-content{max-width:895px}
  .card{min-height:430px}
}

@media (min-width:1024px) and (max-width:1499px){
  :root{
    --hero-container:min(1190px, calc(100% - 112px));
    --header-height: 133px;
  }
  .topbar{
    height:48px;
  }
  .topbar-inner{
    gap:24px;
  }
  .contact-link{
    font-size:15px;
  }
  .contact-link svg{
    width:16px;
    height:16px;
  }
  .nav-wrap{
    height:92px;
  }
  .brand-logo{
    width:82px;
  }
  .menu{
    gap:34px;
    font-size:16px;
  }
  .quote-btn{
    padding: 0 28px;
    height:52px;
    gap:18px;
    font-size:16px;
    margin-left:28px;
  }
  .quote-btn .btn-dots{
    width:18px;
    height:18px;
  }
  .hero{
    min-height:min(822px, 100svh);
    padding-top:174px;
    padding-bottom:34px;
    background-position:center top;
  }
  .hero-content{
    max-width:680px;
  }
  .hero-eyebrow{
    font-size:20px;
    margin-bottom:12px;
  }
  .hero-title-top{
    font-size:42px;
  }
  .hero-title-main{
    font-size:76px;
    margin-top:4px;
  }
  .hero-subtitle{
    font-size:20px;
    margin-top:8px;
  }
  .hero-copy{
    max-width:560px;
    margin-top:18px;
    font-size:16px;
    line-height:1.3;
  }
  .hero-actions{
    gap:22px;
    margin-top:26px;
  }
  .hero-action{
    min-height:52px;
    padding-inline:24px;
    gap:22px;
    font-size:16px;
  }
  .hero-action-primary{
    min-width:264px;
  }
  .hero-action-light{
    min-width:240px;
  }
  .hero-action .btn-dots{
    width:18px;
    height:18px;
  }
  .hero-stats{
    width:570px;
    min-height:104px;
    margin-top:34px;
  }
  .hero-stat{
    min-height:72px;
    padding-left:28px;
  }
  .hero-stat strong{
    font-size:42px;
  }
  .hero-stat span{
    font-size:13px;
    margin-top:8px;
  }
  .hero-slide-badge{
    width:132px;
    height:66px;
    bottom:40px;
    font-size:34px;
  }
  .hero-slide-badge span:last-child{
    font-size:30px;
  }
  .hero-cut{
    height:26px;
  }
  .founder-portrait{
    top:clamp(-316px, -13.5vw, -196px);
  }
  .founder-name{
    top:clamp(560px, 32vw, 650px);
    right:clamp(-132px, -5.86vw, -74px);
    transform:translateX(50px);
  }
  .process-left h2 {
    font-size: 40px;
    margin-bottom: 20px;
  }
  .process-intro {
    font-size: 15px;
    margin-bottom: 30px;
  }
  .process-stats {
    max-width: 480px;
    gap: 12px;
  }
  .process-stat {
    min-height: 120px;
    padding: 20px 24px;
  }
  .process-stat strong {
    font-size: 28px;
  }
  .process-stat span {
    font-size: 14px;
    margin-top: 6px;
    line-height: 1.25;
  }
}

/* 1920px+ */
@media (min-width:1920px){
  :root{--container:1320px}
  .hero{min-height:1263px}
}

/* STICKY HEADER & SCROLL EFFECTS */
.header {
  position: absolute;
  inset: 0 0 auto;
  z-index: 1000;
  transition: background-color 0.3s ease, box-shadow 0.3s ease;
}

.header.scrolled {
  position: fixed;
  background-color: rgba(3, 3, 3, 0.95);
  backdrop-filter: blur(12px);
  -webkit-backdrop-filter: blur(12px);
  box-shadow: 0 4px 30px rgba(0, 0, 0, 0.4);
}

.topbar {
  overflow: hidden;
  transition: height 0.3s ease, opacity 0.3s ease;
}

.nav-wrap {
  transition: height 0.3s ease;
}

.header.scrolled .nav-wrap {
  height: 85px; /* Shrunk height */
  border-bottom: 1px solid rgba(255, 255, 255, 0.08);
}

.brand-logo {
  transition: width 0.3s ease;
}

.header.scrolled .brand-logo {
  width: 75px; /* Shrunk logo width */
}

/* Responsive Sticky Nav Adjustments */
@media (max-width: 1023px) {
  .header.scrolled .nav-wrap {
    height: 72px;
  }
  .header.scrolled .brand-logo {
    width: 60px;
  }
}

@media (max-width: 599px) {
  .header.scrolled .nav-wrap {
    height: 65px;
  }
  .header.scrolled .brand-logo {
    width: 50px;
  }
  /* Ensure mobile menu attaches correctly to the shrunk header */
  .header.scrolled .menu {
    top: 100% !important;
  }
}

/* Section scroll margins for sticky header */
section[id] {
  scroll-margin-top: var(--header-height);
}

/* ACTIVE HEAD INK EFFECTS */
.menu a {
  position: relative;
  color: rgba(255, 255, 255, 0.7);
  transition: color 0.3s ease;
  padding-bottom: 6px;
  width: fit-content;
}

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

.menu a.active {
  color: var(--yellow) !important;
}

/* Sliding active/hover underline */
.menu a::after {
  content: "";
  position: absolute;
  bottom: 0;
  left: 0;
  width: 100%;
  height: 3px;
  background-color: var(--yellow);
  transform: scaleX(0);
  transform-origin: right;
  transition: transform 0.4s cubic-bezier(0.65, 0.05, 0.36, 1);
}

.menu a:hover::after,
.menu a.active::after {
  transform: scaleX(1);
  transform-origin: left;
}

@media (max-width:1023px){
  .menu{
    top:calc(100% + 12px);
    left:auto;
    right:0;
    width:min(360px, calc(100vw - 32px));
    padding:12px;
    gap:6px;
    border:1px solid rgba(255,255,255,.16);
    border-radius:18px;
    background:rgba(5,7,8,.96);
    box-shadow:0 24px 70px rgba(0,0,0,.46);
    backdrop-filter:blur(18px);
    -webkit-backdrop-filter:blur(18px);
  }
  .menu a{
    width:100%;
    padding:14px 16px;
    border-radius:12px;
    color:rgba(255,255,255,.82);
    font-size:16px;
    line-height:1.1;
  }
  .menu a:hover,
  .menu a.active{
    background:rgba(252,201,36,.14);
    color:var(--yellow) !important;
  }
  .menu a::after{
    display:none;
  }
}

@media (max-width:599px){
  :root {
    --header-height: 117px;
  }
  .menu{
    top:calc(100% + 10px);
    width:min(340px, calc(100vw - 32px));
  }
}

@media (max-width:599px){
  .project-types,
  .industry-grid,
  .process-steps,
  .proof-grid,
  .testimonial-grid,
  .benefits{
    display:flex;
    grid-template-columns:none;
    overflow-x:auto;
    overflow-y:hidden;
    scroll-snap-type:x mandatory;
    overscroll-behavior-x:contain;
    -webkit-overflow-scrolling:touch;
    scrollbar-width:none;
    gap:14px;
    width:100%;
    max-width:100%;
    min-width:0;
  }

  .process-layout,
  .process-left,
  .founder-block,
  .founder-copy,
  .estimate-grid,
  .estimate-copy{
    min-width:0;
  }

  .project-types::-webkit-scrollbar,
  .industry-grid::-webkit-scrollbar,
  .process-steps::-webkit-scrollbar,
  .proof-grid::-webkit-scrollbar,
  .testimonial-grid::-webkit-scrollbar,
  .benefits::-webkit-scrollbar{
    display:none;
  }

  .proof-grid{
    padding-bottom:8px;
  }

  .proof-tile{
    flex:0 0 82%;
    min-width:0;
    scroll-snap-align:start;
  }

  .project-types{
    margin-top:30px;
    border-top:0;
    padding-bottom:6px;
  }

  .project-item,
  .project-item:first-child,
  .project-item:nth-child(even),
  .project-item:last-child{
    flex:0 0 82%;
    min-width:0;
    border:1px solid #252525;
    background:#050505;
    scroll-snap-align:start;
    grid-column:auto;
  }

  .project-type,
  .project-item:first-child .project-type{
    min-height:220px;
    padding:28px 24px;
    grid-template-columns:1fr;
    gap:16px;
    align-content:center;
  }

  .project-type img{
    width:58px;
    height:58px;
  }

  .project-type-title{
    font-size:23px;
    line-height:1.08;
  }

  .project-type-copy{
    grid-column:auto;
    font-size:16px;
    line-height:1.3;
  }

  .industry-grid{
    margin-top:30px;
    padding-bottom:8px;
  }

  .industry-card{
    flex:0 0 82%;
    min-width:0;
    min-height:118px;
    padding:20px 22px;
    scroll-snap-align:start;
  }

  .industry-icon-wrap{
    width:58px;
    height:58px;
  }

  .industry-icon-wrap img{
    width:27px;
    height:27px;
  }

  .industry-name{
    font-size:18px;
    line-height:1.24;
  }

  .process-stats{
    display:grid;
    grid-template-columns:repeat(2,1fr);
    gap:12px;
    width:100%;
    margin-top:24px;
  }

  .process-stat{
    min-height:100px;
    padding:16px 14px;
    border-radius:6px;
    flex:none;
    scroll-snap-align:none;
  }

  .process-stat strong{
    font-size:clamp(18px, 5.5vw, 24px);
    line-height:1.1;
  }

  .process-stat span{
    font-size:clamp(12px, 3.5vw, 14px);
    line-height:1.3;
    margin-top:6px;
  }

  .process-steps{
    gap:16px;
    padding-bottom:8px;
  }

  .process-step,
  .process-step + .process-step{
    flex:0 0 88%;
    min-width:0;
    min-height:390px;
    grid-template-columns:58px 1fr;
    gap:18px;
    padding:96px 22px 30px;
    border:1px solid #e5e5e5;
    scroll-snap-align:start;
  }

  .process-step + .process-step{
    padding-top:96px;
  }

  .process-icon{
    width:52px;
    height:52px;
  }

  .process-number,
  .process-step + .process-step .process-number{
    top:24px;
    right:24px;
    width:48px;
    height:48px;
    font-size:18px;
  }

  .process-step-copy{
    padding-right:58px;
  }

  .process-step-copy h3{
    font-size:22px;
    line-height:1.16;
    margin-bottom:12px;
  }

  .process-step-copy p{
    font-size:16px;
    line-height:1.45;
  }

  .founder-stats{
    display:flex;
    flex-direction:column;
    align-items:center;
    gap:16px;
    margin-top:36px;
    width:100%;
  }

  .founder-stat,
  .founder-stat + .founder-stat{
    display:flex;
    flex-direction:column;
    align-items:center;
    justify-content:center;
    text-align:center;
    width:100%;
    max-width:320px;
    min-height:120px;
    padding:24px !important;
    border:1px solid #e0e0e0 !important;
    border-left:1px solid #e0e0e0 !important;
    border-top:1px solid #e0e0e0 !important;
    padding-left:24px !important;
    padding-right:24px !important;
    padding-top:24px !important;
    margin:0;
    scroll-snap-align:unset;
  }

  .founder-stat strong{
    font-size:46px;
  }

  .founder-stat span{
    font-size:17px;
    line-height:1.2;
  }

  .testimonial-grid{
    gap:16px;
    margin-top:56px;
    padding:34px 0 10px;
  }

  .testimonial{
    flex:0 0 88%;
    min-width:0;
    min-height:420px;
    padding:58px 24px 30px;
    scroll-snap-align:start;
  }

  .quote{
    left:24px;
    width:58px;
    font-size:34px;
  }

  .testimonial-text{
    font-size:17px;
    line-height:1.45;
  }

  .testimonial-rule{
    margin:30px 0 22px;
  }

  .testimonial-name{
    font-size:20px;
  }

  .testimonial-role{
    font-size:14px;
  }

  .benefits{
    margin-top:34px;
    gap:16px;
    padding:4px 0 10px;
  }

  .benefit,
  .benefit + .benefit{
    flex:0 0 88%;
    min-width:0;
    min-height:246px;
    grid-template-columns:1fr;
    gap:16px;
    padding:24px !important;
    border:1px solid #e5e5e5;
    scroll-snap-align:start;
  }

  .benefit-icon{
    width:58px;
  }

  .benefit-icon img{
    width:35px;
    height:35px;
  }

  .benefit h3{
    font-size:20px;
    line-height:1.18;
    margin-bottom:10px;
  }

  .benefit > div:last-child,
  .process-step-copy{
    min-width:0;
  }

  .benefit p{
    font-size:15px;
    line-height:1.42;
  }

  .benefit:hover{
    transform:none;
  }
}

/* FADE-UP REVEAL ANIMATIONS */
[data-fade]{
  opacity:0;
  transform:translateY(40px);
  transition:opacity 1.4s cubic-bezier(.16,1,.3,1), transform 1.4s cubic-bezier(.16,1,.3,1);
  will-change:opacity,transform;
}
[data-fade].is-visible{
  opacity:1;
  transform:translateY(0);
}
[data-fade-child] > *{
  opacity:0;
  transform:translateY(30px);
  transition:opacity 1.2s cubic-bezier(.16,1,.3,1), transform 1.2s cubic-bezier(.16,1,.3,1);
  will-change:opacity,transform;
}
[data-fade-child].is-visible > *{
  opacity:1;
  transform:translateY(0);
}
[data-fade-child].is-visible > *:nth-child(1){transition-delay:.1s}
[data-fade-child].is-visible > *:nth-child(2){transition-delay:.22s}
[data-fade-child].is-visible > *:nth-child(3){transition-delay:.34s}
[data-fade-child].is-visible > *:nth-child(4){transition-delay:.46s}
[data-fade-child].is-visible > *:nth-child(5){transition-delay:.58s}
[data-fade-child].is-visible > *:nth-child(6){transition-delay:.7s}
[data-fade-child].is-visible > *:nth-child(7){transition-delay:.82s}
[data-fade-child].is-visible > *:nth-child(8){transition-delay:.94s}
[data-fade-child].is-visible > *:nth-child(9){transition-delay:1.06s}
[data-fade-child].is-visible > *:nth-child(10){transition-delay:1.18s}
[data-fade-child].is-visible > *:nth-child(11){transition-delay:1.3s}
[data-fade-child].is-visible > *:nth-child(12){transition-delay:1.42s}

/* FLOATING CONTACT DOCK */
.floating-contact-dock {
  position: fixed;
  top: 60%;
  right: 30px;
  transform: translateY(-50%);
  z-index: 100;
  display: flex;
  flex-direction: column;
  gap: 16px;
  align-items: center;
}

.floating-btn {
  position: relative;
  width: 56px;
  height: 56px;
  border-radius: 50%;
  background: rgba(16, 16, 16, 0.85);
  backdrop-filter: blur(8px);
  -webkit-backdrop-filter: blur(8px);
  border: 1px solid var(--yellow);
  color: var(--yellow);
  display: grid;
  place-items: center;
  box-shadow: 0 8px 32px rgba(0, 0, 0, 0.3), inset 0 2px 4px rgba(255, 255, 255, 0.05);
  cursor: pointer;
  transition: all 0.4s cubic-bezier(0.16, 1, 0.3, 1);
  text-decoration: none;
}

.floating-btn svg {
  width: 22px;
  height: 22px;
  transition: transform 0.4s cubic-bezier(0.16, 1, 0.3, 1);
}

.whatsapp-icon {
  width: 24px;
  height: 24px;
  background-color: var(--yellow);
  -webkit-mask: url("assets/whatsapp.png") no-repeat center / contain;
  mask: url("assets/whatsapp.png") no-repeat center / contain;
  transition: background-color 0.4s cubic-bezier(0.16, 1, 0.3, 1), transform 0.4s cubic-bezier(0.16, 1, 0.3, 1);
}

/* Tooltip styles */
.floating-tooltip {
  position: absolute;
  right: 76px;
  top: 50%;
  transform: translateY(-50%) translateX(10px);
  background: var(--dark);
  color: #fff;
  border: 1px solid var(--yellow);
  padding: 8px 16px;
  border-radius: 6px;
  font-family: var(--body);
  font-size: 14px;
  font-weight: 500;
  white-space: nowrap;
  pointer-events: none;
  opacity: 0;
  visibility: hidden;
  box-shadow: 0 4px 15px rgba(0, 0, 0, 0.2);
  transition: all 0.3s cubic-bezier(0.16, 1, 0.3, 1);
}

.floating-tooltip::after {
  content: '';
  position: absolute;
  top: 50%;
  right: -6px;
  transform: translateY(-50%) rotate(45deg);
  width: 10px;
  height: 10px;
  background: var(--dark);
  border-top: 1px solid var(--yellow);
  border-right: 1px solid var(--yellow);
}

/* Hover effects */
.floating-btn:hover {
  transform: translateY(-5px) scale(1.05);
  box-shadow: 0 12px 30px rgba(252, 201, 36, 0.25), inset 0 2px 4px rgba(255, 255, 255, 0.1);
}

.floating-btn:hover svg,
.floating-btn:hover .whatsapp-icon {
  transform: scale(1.1);
}

.floating-btn:hover .floating-tooltip {
  opacity: 1;
  visibility: visible;
  transform: translateY(-50%) translateX(0);
}

/* Specific Hover Themes */
.floating-whatsapp:hover,
.floating-call:hover,
.floating-form:hover {
  background: var(--yellow);
  border-color: var(--yellow);
  color: #030303;
  box-shadow: 0 12px 30px rgba(252, 201, 36, 0.4);
}

.floating-whatsapp:hover .whatsapp-icon {
  background-color: #030303;
}

/* Specific tooltip color matching the hover states */
.floating-whatsapp:hover .floating-tooltip,
.floating-call:hover .floating-tooltip,
.floating-form:hover .floating-tooltip {
  background: var(--yellow);
  border-color: var(--yellow);
  color: #030303;
}

.floating-whatsapp:hover .floating-tooltip::after,
.floating-call:hover .floating-tooltip::after,
.floating-form:hover .floating-tooltip::after {
  background: var(--yellow);
  border-top-color: var(--yellow);
  border-right-color: var(--yellow);
}

/* MOBILE BOTTOM QUICK LINKS NAV */
.mobile-bottom-nav {
  position: fixed;
  bottom: 0;
  left: 0;
  width: 100%;
  height: 66px;
  z-index: 1000;
  background: rgba(12, 12, 12, 0.95);
  backdrop-filter: blur(10px);
  -webkit-backdrop-filter: blur(10px);
  border-top: 1px solid var(--yellow);
  display: none; /* hidden on desktop */
  grid-template-columns: repeat(3, 1fr);
  box-shadow: 0 -8px 24px rgba(0, 0, 0, 0.5);
  padding-bottom: env(safe-area-inset-bottom, 0px);
}

.mobile-nav-item {
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  gap: 6px;
  text-decoration: none;
  color: #fff;
  transition: background 0.25s ease;
}

.mobile-nav-item:not(:last-child) {
  border-right: 1px solid rgba(255, 255, 255, 0.08);
}

.mobile-nav-item svg {
  width: 22px;
  height: 22px;
  color: var(--yellow);
  transition: transform 0.2s ease;
}

.mobile-nav-item .whatsapp-icon {
  width: 22px;
  height: 22px;
  background-color: var(--yellow);
}

.mobile-nav-item .nav-label {
  font-family: var(--body);
  font-size: 11px;
  font-weight: 600;
  text-transform: uppercase;
  letter-spacing: 0.5px;
  color: #c9c9c9;
  transition: color 0.25s ease;
}

/* Tap state highlight */
.mobile-nav-item:active {
  background: rgba(255, 255, 255, 0.05);
}

.mobile-nav-item:active svg {
  transform: scale(0.9);
}

.mobile-nav-item:active .whatsapp-icon {
  transform: scale(0.9);
}

/* SCROLL TO TOP */
.scroll-to-top {
  position: fixed;
  right: 30px;
  bottom: 30px; /* position in the bottom-right corner */
  width: 50px;
  height: 50px;
  border-radius: 50%;
  background: rgba(16, 16, 16, 0.85);
  backdrop-filter: blur(8px);
  -webkit-backdrop-filter: blur(8px);
  border: 1px solid var(--yellow);
  color: var(--yellow);
  display: grid;
  place-items: center;
  cursor: pointer;
  z-index: 99;
  box-shadow: 0 8px 32px rgba(0, 0, 0, 0.3), inset 0 2px 4px rgba(255, 255, 255, 0.05);
  transition: all 0.4s cubic-bezier(0.16, 1, 0.3, 1);
  opacity: 0;
  visibility: hidden;
  transform: translateY(20px);
  outline: none;
}

.scroll-to-top svg {
  width: 20px;
  height: 20px;
  transition: transform 0.4s cubic-bezier(0.16, 1, 0.3, 1);
}

.scroll-to-top.visible {
  opacity: 1;
  visibility: visible;
  transform: translateY(0);
}

.scroll-to-top:hover {
  transform: translateY(-5px);
  background: var(--yellow);
  color: #030303;
  box-shadow: 0 12px 30px rgba(252, 201, 36, 0.35);
}

.scroll-to-top:hover svg {
  transform: translateY(-2px);
}

/* Responsive adjustments */
@media (max-width: 768px) {
  .floating-contact-dock {
    display: none !important;
  }
  .mobile-bottom-nav {
    display: grid;
  }
  body {
    padding-bottom: 66px;
  }
  .scroll-to-top {
    right: 20px;
    bottom: 86px; /* positioned 20px above the 66px mobile bottom nav */
    width: 44px;
    height: 44px;
  }
  .scroll-to-top svg {
    width: 18px;
    height: 18px;
  }
}

/* Desktop-specific spacing overrides to reduce unwanted white spaces */
@media (min-width: 1024px) {
  .project-gallery-section {
    padding-bottom: clamp(50px, 4vw, 75px);
  }
  .video-showcase-section {
    padding-top: clamp(50px, 4vw, 75px);
    padding-bottom: clamp(50px, 4vw, 75px);
  }
  .testimonials-section {
    padding-bottom: clamp(50px, 4vw, 75px);
  }
  .faq-section {
    padding-top: clamp(50px, 4vw, 75px);
  }
}

/* THANK YOU PAGE */
.thank-you-page{
  min-height:100vh;
  background:#030303;
  color:#fff;
}
.thank-you-header{
  position:absolute;
  top:0;
  left:0;
  right:0;
  z-index:5;
  width:min(1560px, calc(100% - clamp(32px, 8vw, 120px)));
  min-height:104px;
  margin-inline:auto;
  display:flex;
  align-items:center;
  justify-content:space-between;
  gap:28px;
}
.thank-you-logo{
  display:block;
  width:clamp(76px, 5.6vw, 112px);
}
.thank-you-nav{
  display:flex;
  align-items:center;
  gap:clamp(22px, 2.4vw, 46px);
  color:rgba(255,255,255,.72);
  font-size:clamp(14px, .95vw, 18px);
  font-weight:700;
}
.thank-you-nav a{
  transition:color .25s ease;
}
.thank-you-nav a:hover{
  color:var(--yellow);
}
.thank-you-main{
  min-height:100vh;
}
.thank-you-hero{
  position:relative;
  min-height:100vh;
  display:flex;
  align-items:center;
  overflow:hidden;
  background:
    linear-gradient(90deg, rgba(0,0,0,.96) 0%, rgba(0,0,0,.82) 45%, rgba(0,0,0,.36) 100%),
    url("assets/hero-steel-building.png") center right / cover no-repeat;
}
.thank-you-overlay{
  position:absolute;
  inset:auto 0 0;
  height:8px;
  background:var(--yellow);
}
.thank-you-content{
  position:relative;
  z-index:1;
  width:min(860px, calc(100% - clamp(32px, 10vw, 180px)));
  margin-left:clamp(20px, 8vw, 170px);
  padding-block:150px 72px;
}
.thank-you-kicker{
  color:var(--yellow);
  font-size:clamp(14px, 1vw, 18px);
  line-height:1;
  font-weight:800;
  letter-spacing:.22em;
  text-transform:uppercase;
}
.thank-you-content h1{
  margin-top:22px;
  color:#fff;
  font-size:clamp(54px, 7.6vw, 118px);
  line-height:.86;
  max-width:780px;
}
.thank-you-copy{
  max-width:660px;
  margin-top:28px;
  color:rgba(255,255,255,.78);
  font-size:clamp(17px, 1.3vw, 24px);
  line-height:1.5;
  font-weight:500;
}
.thank-you-actions{
  display:flex;
  flex-wrap:wrap;
  gap:14px;
  margin-top:38px;
}
.thank-you-btn{
  min-height:56px;
  display:inline-flex;
  align-items:center;
  justify-content:center;
  padding:0 26px;
  border:1px solid transparent;
  font-size:15px;
  line-height:1;
  font-weight:900;
  text-transform:uppercase;
  transition:background-color .25s ease, color .25s ease, border-color .25s ease, transform .25s ease;
}
.thank-you-btn:hover{
  transform:translateY(-2px);
}
.thank-you-btn--primary{
  background:var(--yellow);
  color:#040404;
}
.thank-you-btn--light{
  background:#fff;
  color:#050505;
}
.thank-you-btn--ghost{
  border-color:rgba(255,255,255,.34);
  color:#fff;
}
.thank-you-btn--ghost:hover{
  border-color:var(--yellow);
  color:var(--yellow);
}
.thank-you-steps{
  display:grid;
  grid-template-columns:repeat(3, minmax(0, 1fr));
  gap:1px;
  max-width:820px;
  margin-top:58px;
  border:1px solid rgba(255,255,255,.15);
  background:rgba(255,255,255,.14);
}
.thank-you-steps article{
  min-height:170px;
  padding:24px 22px;
  background:rgba(5,5,5,.78);
  backdrop-filter:blur(10px);
  -webkit-backdrop-filter:blur(10px);
}
.thank-you-steps span{
  color:var(--yellow);
  font-size:18px;
  line-height:1;
  font-weight:900;
}
.thank-you-steps h2{
  margin-top:22px;
  color:#fff;
  font-family:var(--body);
  font-size:18px;
  line-height:1.12;
  font-weight:800;
  text-transform:none;
}
.thank-you-steps p{
  margin-top:10px;
  color:rgba(255,255,255,.62);
  font-size:14px;
  line-height:1.45;
}

@media (max-width: 768px){
  .thank-you-page{
    padding-bottom:0;
  }
  .thank-you-header{
    width:calc(100% - 32px);
    min-height:86px;
  }
  .thank-you-logo{
    width:68px;
  }
  .thank-you-nav{
    display:none;
  }
  .thank-you-hero{
    align-items:flex-start;
    background:
      linear-gradient(180deg, rgba(0,0,0,.96) 0%, rgba(0,0,0,.82) 48%, rgba(0,0,0,.74) 100%),
      url("assets/hero-steel-building.png") center / cover no-repeat;
  }
  .thank-you-content{
    width:calc(100% - 32px);
    margin-inline:auto;
    padding-block:132px 42px;
  }
  .thank-you-content h1{
    font-size:56px;
  }
  .thank-you-copy{
    font-size:16px;
  }
  .thank-you-actions{
    display:grid;
    grid-template-columns:1fr;
  }
  .thank-you-btn{
    width:100%;
  }
  .thank-you-steps{
    grid-template-columns:1fr;
    margin-top:38px;
  }
  .thank-you-steps article{
    min-height:0;
  }
}