/* One Dot Million — Landing Page (Figma: need-to-dev) */

:root {
  --white: #ffffff;
  --red: #fa0101;
  --red-dark: #c60101;
  --red-maroon: #450000;
  --red-deep: #420606;
  --red-gradient-end: #690000;
  --text-dark: #171616;
  --text-gray: #656363;
  --text-muted: #4b4949;
  --text-light: #e5e5e5;
  --bg-light: #f8f8f8;
  --bg-pink: #fff2f2;
  --bg-pink-soft: #ffdede;
  --bg-pink-faint: rgba(255, 217, 217, 0.09);
  --footer-bg: #121212;
  --footer-bar: #312f2f;
  --hero-gradient: radial-gradient(ellipse 120% 100% at 65% 50%, #ffffff 12%, #ffdee8 100%);
  --testimonial-gradient: radial-gradient(circle at 49% 46%, #ff0000 0%, #690000 100%);
  --container: clamp(1100px, 88vw, 1760px);
  --side: max(0px, calc((100vw - var(--container)) / 2));
  --pad-x: clamp(19px, 4.42vw, 96px);
  --font: "Urbanist", sans-serif;
}

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

html {
  scroll-behavior: smooth;
  overflow-x: clip;
  scrollbar-color: #fa0101 var(--bg-light);
}

::-webkit-scrollbar {
  width: 12px;
}

::-webkit-scrollbar-track {
  background: var(--bg-light);
}

::-webkit-scrollbar-thumb {
  background: #fa0101;
  border-radius: 100px;
}

::-webkit-scrollbar-thumb:hover {
  background: #c60101;
}

body {
  font-family: var(--font);
  color: var(--text-dark);
  background: var(--white);
  overflow-x: clip;
}

img {
  display: block;
  max-width: 100%;
}

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

button {
  font: inherit;
  border: none;
  background: none;
  cursor: pointer;
}

.page {
  width: 100%;
  overflow-x: clip;
}

/* ── Typography ── */
/* clamp(min, vw-at-1440px, max): scales fluidly with viewport width */
.text-h1 {
  font-weight: 800;
  font-size: clamp(28px, 5.28vw, 102px);
  line-height: clamp(32px, 5.83vw, 114px);
  text-transform: capitalize;
}

.text-h2 {
  font-weight: 600;
  font-size: clamp(18px, 2.45vw, 48px);
  line-height: clamp(22px, 3.34vw, 66px);
  text-transform: capitalize;
}

.text-h2-center {
  font-weight: 600;
  font-size: clamp(18px, 2.45vw, 48px);
  line-height: clamp(22px, 3.34vw, 66px);
  text-transform: capitalize;
  text-align: center;
}

.break-mobile {
  display: none;
}

.text-h3 {
  font-weight: 600;
  font-size: clamp(12px, 1vw, 19px);
  line-height: clamp(14px, 1.17vw, 22px);
  text-transform: capitalize;
}

.text-h4 {
  font-weight: 600;
  font-size: clamp(13px, 1.34vw, 26px);
  line-height: clamp(14px, 1.34vw, 26px);
  text-transform: capitalize;
}

.text-h5 {
  font-weight: 600;
  font-size: clamp(12px, 1.11vw, 22px);
  line-height: clamp(14px, 1.34vw, 26px);
  text-transform: capitalize;
}

.text-h6 {
  font-weight: 600;
  font-size: clamp(14px, 1.78vw, 35px);
  line-height: clamp(18px, 2.11vw, 42px);
  text-transform: capitalize;
}

.text-para {
  font-weight: 400;
  font-size: clamp(12px, 0.89vw, 16px);
  line-height: clamp(18px, 1.67vw, 30px);
}

.text-para-muted {
  font-weight: 400;
  font-size: clamp(12px, 0.89vw, 16px);
  line-height: clamp(18px, 1.67vw, 30px);
  color: var(--text-muted);
  text-align: justify;
}

.text-red {
  color: var(--red);
}

.text-white {
  color: var(--white);
}

/* ── Buttons ── */
.btn-primary {
  display: inline-flex;
  align-items: center;
  gap: clamp(12px, 1.34vw, 26px);
  padding: clamp(6px, 0.55vw, 11px) clamp(6px, 0.55vw, 11px) clamp(6px, 0.55vw, 11px) clamp(10px, 1vw, 19px);
  background: #fa0101;
  color: var(--white);
  border-radius: 100px;
  font-weight: 500;
  font-size: clamp(11px, 0.89vw, 16px);
  line-height: 1.6;
  text-transform: capitalize;
  transition: background 0.3s ease;
}

.btn-primary:hover {
  background: #c60101;
}

.btn-primary:active {
  background: #9b0101;
}

.btn-primary .btn-icon {
  width: clamp(28px, 2.5vw, 44px);
  height: clamp(28px, 2.5vw, 44px);
  background: var(--white);
  border-radius: 100px;
  display: flex;
  align-items: center;
  justify-content: center;
  flex-shrink: 0;
  overflow: hidden;
  transform: scale(0.3);
  transition: transform 0.3s ease;
}

/* Hover: dot grows to full size */
.btn-primary:hover .btn-icon {
  transform: scale(1);
}

/* Default: icon hidden */
.btn-primary .btn-icon img {
  width: 55%;
  height: 55%;
  object-fit: contain;
  display: block;
  opacity: 0;
  transform: scale(0.4) rotate(-45deg);
  transition: opacity 0.3s ease, transform 0.3s ease;
}

/* Hover: icon appears */
.btn-primary:hover .btn-icon img {
  opacity: 1;
  transform: scale(1) rotate(0deg);
}

/* WhatsApp icon larger on hover */
.btn-whatsapp:hover .btn-icon img {
  width: 75%;
  height: 75%;
  opacity: 1;
  transform: scale(1) rotate(0deg);
}

.btn-primary--outline {
  border: 1px solid var(--white);
}

/* ── Section label ── */
.section-label img {
  height: 24px;
  width: auto;
  max-width: 100%;
  display: block;
}

/* ── WhatsApp CTA button ── */
.btn-whatsapp {
  background: #fa0101;
}
.btn-whatsapp:hover {
  background: #c60101;
}
.btn-whatsapp:active {
  background: #9b0101;
}

/* ── Floating WhatsApp button — fixed, visible over every section ── */
.whatsapp-float {
  position: fixed;
  right: clamp(16px, 2vw, 32px);
  bottom: clamp(56px, 6vw, 90px);
  z-index: 950;
  width: 60px;
  height: 60px;
  border-radius: 50%;
  background: #1da851;
  display: flex;
  align-items: center;
  justify-content: center;
  box-shadow: 0 6px 20px rgba(0, 0, 0, 0.25);
  animation: whatsapp-bounce 2.4s ease-in-out infinite;
  transition: transform 0.3s ease;
}

.whatsapp-float:hover {
  animation-play-state: paused;
  transform: scale(1.08);
}

.whatsapp-float img {
  width: 46px;
  height: 46px;
}

@keyframes whatsapp-bounce {
  0%, 100% { transform: translateY(0); }
  10% { transform: translateY(-10px); }
  20% { transform: translateY(0); }
  25% { transform: translateY(-5px); }
  30% { transform: translateY(0); }
}

@media (max-width: 600px) {
  .whatsapp-float {
    width: 52px;
    height: 52px;
  }

  .whatsapp-float img {
    width: 38px;
    height: 38px;
  }
}

@media (prefers-reduced-motion: reduce) {
  .whatsapp-float {
    animation: none;
  }

  .footer-cta__social-item,
  .footer-cta__social-item:hover img:first-child {
    animation: none;
    transition: none;
  }
}

.back-to-top {
  position: fixed;
  right: clamp(16px, 2vw, 32px);
  bottom: clamp(16px, 2vw, 32px);
  z-index: 950;
  width: 44px;
  height: 44px;
  border: none;
  border-radius: 10px;
  background: var(--text-dark);
  color: var(--white);
  display: flex;
  align-items: center;
  justify-content: center;
  cursor: pointer;
  box-shadow: 0 6px 20px rgba(0, 0, 0, 0.25);
  opacity: 0;
  visibility: hidden;
  transform: translateY(10px);
  transition: opacity 0.3s ease, transform 0.3s ease, background 0.2s ease;
}

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

.back-to-top:hover {
  background: var(--red);
}

@media (max-width: 600px) {
  .back-to-top {
    width: 38px;
    height: 38px;
  }
}

/* ── Header ── */
.header {
  position: sticky;
  top: 0;
  z-index: 1000;
  background: var(--white);
  height: clamp(65px, 5.5vw, 125px);
  display: flex;
  align-items: center;
  border-bottom: 1px solid #e5e5e5;
}

.header__inner {
  width: 100%;
  max-width: var(--container);
  margin: 0 auto;
  height: 100%;
  padding: 0 var(--pad-x) 0 clamp(26px, 4vw, 74px);
  display: flex;
  align-items: center;
  gap: clamp(14px, 2vw, 48px);
}

.header__logo-link {
  flex-shrink: 0;
  display: flex;
  align-items: center;
}

.header__logo {
  width: clamp(72px, 7.72vw, 144px);
  height: auto;
  object-fit: contain;
  display: block;
}

.header__nav {
  display: flex;
  align-items: center;
  justify-content: center;
  gap: clamp(28px, 3.5vw, 60px);
  margin: 0 clamp(10px, 1.6vw, 29px);
  flex: 1;
}

.header__nav a {
  font-size: clamp(11px, 0.89vw, 14px);
  line-height: 1.6;
  color: var(--text-dark);
  white-space: nowrap;
}

.header__nav a.active {
  color: var(--red);
}

.header__nav a:hover {
  color: var(--red);
}

.header__cta {
  flex-shrink: 0;
  margin-left: auto;
  width: auto;
  white-space: nowrap;
  height: clamp(35px, 3.11vw, 56px);
  padding: clamp(5px, 0.55vw, 10px) clamp(5px, 0.55vw, 10px) clamp(5px, 0.55vw, 10px) clamp(10px, 1.06vw, 19px);
  justify-content: space-between;
  gap: clamp(8px, 1vw, 16px);
}

/* Hamburger button */
.header__hamburger {
  display: none;
  flex-direction: column;
  justify-content: center;
  gap: 5px;
  width: 44px;
  height: 44px;
  padding: 10px;
  margin-left: auto;
  flex-shrink: 0;
  cursor: pointer;
}

.header__hamburger span {
  display: block;
  width: 24px;
  height: 2px;
  background: var(--text-dark);
  border-radius: 2px;
  transition: transform 0.3s, opacity 0.3s;
}

/* Mobile Nav — a full-width dropdown anchored under the header, not a
   full-screen swap or side drawer. --header-h is kept in sync with the
   header's real rendered height by main.js. Leaving the backdrop show a
   dimmed page behind it is what reads as "panel on the same page" rather
   than "new page". */
.mobile-nav-backdrop {
  position: fixed;
  top: var(--header-h, 72px);
  left: 0;
  right: 0;
  bottom: 0;
  background: rgba(0, 0, 0, 0.45);
  z-index: 1999;
  opacity: 0;
  pointer-events: none;
  transition: opacity 0.3s ease;
}

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

.mobile-nav {
  position: fixed;
  top: var(--header-h, 72px);
  left: 0;
  right: 0;
  max-height: calc(100vh - var(--header-h, 72px));
  background: var(--white);
  box-shadow: 0 16px 32px rgba(0, 0, 0, 0.15);
  z-index: 2000;
  overflow-y: auto;
  opacity: 0;
  visibility: hidden;
  pointer-events: none;
  transform: translateY(-12px);
  transition: opacity 0.3s ease, transform 0.3s ease, visibility 0s linear 0.3s;
}

.mobile-nav.is-open {
  opacity: 1;
  visibility: visible;
  pointer-events: auto;
  transform: translateY(0);
  transition: opacity 0.3s ease, transform 0.3s ease, visibility 0s linear 0s;
}

.mobile-nav__inner {
  display: flex;
  flex-direction: column;
  gap: 4px;
  padding: 8px 24px 24px;
}

.mobile-nav__top {
  display: flex;
  align-items: center;
  justify-content: flex-end;
}

.mobile-nav__close {
  width: 44px;
  height: 44px;
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  gap: 0;
  padding: 10px;
  cursor: pointer;
}

.mobile-nav__close span {
  display: block;
  width: 24px;
  height: 2px;
  background: var(--text-dark);
  border-radius: 2px;
}

.mobile-nav__close span:first-child {
  transform: rotate(45deg) translate(1px, 1px);
}

.mobile-nav__close span:last-child {
  transform: rotate(-45deg) translate(1px, -1px);
}

.mobile-nav__links {
  display: flex;
  flex-direction: column;
  gap: 8px;
}

.mobile-nav__links a {
  font-size: 22px;
  font-weight: 600;
  color: var(--text-dark);
  padding: 12px 0;
  border-bottom: 1px solid #f0f0f0;
}

.mobile-nav__links a.active,
.mobile-nav__links a:hover {
  color: var(--red);
}

.mobile-nav__cta {
  width: fit-content;
}

/* ── Hero ── */
.hero {
  position: relative;
  min-height: clamp(400px, 51.44vw, 960px);
  background: var(--hero-gradient);
  scroll-margin-top: clamp(56px, 6.17vw, 120px);
}

.hero__inner {
  display: flex;
  align-items: center;
  gap: clamp(16px, 2.28vw, 48px);
  padding: clamp(16px, 1.55vw, 32px) var(--pad-x) clamp(180px, 22.66vw, 440px);
  max-width: var(--container);
  min-width: 0;
  margin: 0 auto;
}

.hero__content {
  display: flex;
  flex-direction: column;
  align-items: flex-start;
  gap: clamp(13px, 1.66vw, 35px);
  flex: 0 0 48%;
  min-width: 0;
}

.hero__headline-block {
  display: flex;
  flex-direction: column;
  gap: 24px;
}

.hero__headline {
  color: var(--text-dark);
}

.hero__desc {
  max-width: 100%;
  color: var(--text-gray);
  text-align: justify;
}

.hero__image-wrap {
  position: relative;
  flex: 0 0 46%;
  aspect-ratio: 630 / 543;
  border-radius: clamp(14px, 2.64vw, 38px);
  overflow: hidden;
  margin-left: auto;
}

.hero__image {
  width: 100%;
  height: 100%;
  object-fit: cover;
  object-position: center;
  display: block;
}

.hero__decor {
  position: absolute;
  width: clamp(80px, 11.2vw, 256px);
  height: clamp(84px, 10.96vw, 202px);
  left: calc(38% - clamp(64px, 4.8vw, 144px));
  bottom: clamp(160px, 17vw, 310px);
  object-fit: cover;
  z-index: 3;
  pointer-events: none;
  transform: rotate(-15deg) scale(1.1);
}

/* Marquee */
.marquee-wrap {
  position: relative;
  left: -246px;
  width: calc(100% + 492px);
  margin-top: clamp(-208px, -11.39vw, -96px);
  height: clamp(50px, 5.56vw, 100px);
  z-index: 10;
}

.marquee {
  display: flex;
  overflow: hidden;
  padding: clamp(11px, 1.34vw, 26px) clamp(18px, 2.45vw, 48px);
  position: absolute;
  top: 0;
  left: 0;
  width: 100%;
  transform-origin: center center;
}

.marquee--red {
  background: var(--red);
  transform: rotate(-6deg);
  z-index: 2;
}

.marquee--dark {
  background: var(--text-dark);
  transform: rotate(6deg);
  z-index: 1;
}

.marquee__track {
  display: flex;
  align-items: center;
  gap: clamp(29px, 4.17vw, 80px);
  animation: marquee 48s linear infinite;
  flex-shrink: 0;
  min-width: max-content;
}

.marquee--dark .marquee__track {
  animation-direction: reverse;
  animation-duration: 56s;
}

.marquee__item {
  display: flex;
  align-items: center;
  gap: 16px;
  white-space: nowrap;
  flex-shrink: 0;
}

.marquee__item img {
  width: clamp(16px, 1.94vw, 38px);
  height: clamp(16px, 1.94vw, 38px);
}

.marquee__item span {
  font-weight: 600;
  font-size: clamp(14px, 1.78vw, 35px);
  line-height: clamp(18px, 2.11vw, 42px);
  text-transform: capitalize;
  color: var(--white);
}

@keyframes marquee {
  0% {
    transform: translateX(0);
  }
  100% {
    transform: translateX(-50%);
  }
}

/* ── About ── */
.about {
  padding: clamp(90px, 9vw, 130px) 0 clamp(20px, 2.5vw, 36px);
  background: var(--white);
  /* --header-h (kept in sync with the header's real height by main.js) is
     used here instead of the clamp(...) other sections use for this — at
     narrow widths that clamp settles below the header's actual rendered
     height, still hiding a sliver of this section's top edge under it. */
  scroll-margin-top: var(--header-h, 72px);
}

.about__inner {
  display: flex;
  flex-direction: column;
  gap: clamp(16px, 2vw, 36px);
  max-width: var(--container);
  margin: 0 auto;
  padding: 0 var(--pad-x) 0 clamp(26px, 4vw, 74px);
}

.about__grid {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: clamp(14px, 1.7vw, 25px);
}

.about__visual {
  aspect-ratio: 4 / 3;
  border-radius: clamp(6px, 0.66vw, 13px);
  overflow: hidden;
}

.about__visual img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  display: block;
}

/* Physics pill-bubble visual */
.about__visual--physics {
  background: url('../public/images/about-bg.svg') bottom / cover no-repeat;
  position: relative;
  overflow: hidden;
  cursor: grab;
}
.about__visual--physics:active { cursor: grabbing; }

#pill-canvas {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  display: block;
}

/* Bubble tag cloud (replaces about image) */
.about__visual--bubble {
  background: var(--red);
  display: flex;
  align-items: center;
  justify-content: center;
  padding: clamp(20px, 2.78vw, 48px);
  overflow: visible;
}

.bubble-cloud {
  display: flex;
  flex-wrap: wrap;
  gap: clamp(8px, 0.89vw, 14px);
  justify-content: center;
  align-items: center;
}

.bubble {
  background: rgba(255, 255, 255, 0.15);
  color: var(--white);
  border: 1.5px solid rgba(255, 255, 255, 0.35);
  border-radius: 100px;
  padding: clamp(6px, 0.55vw, 10px) clamp(12px, 1.11vw, 20px);
  font-size: clamp(11px, 0.83vw, 14px);
  font-weight: 500;
  white-space: nowrap;
  backdrop-filter: blur(4px);
  transition: background 0.2s, border-color 0.2s;
}

.bubble:hover {
  background: rgba(255, 255, 255, 0.28);
  border-color: rgba(255, 255, 255, 0.6);
}

.about__content {
  display: flex;
  flex-direction: column;
  justify-content: space-between;
  gap: clamp(8px, 0.89vw, 16px);
}

.section-label--about img {
  height: 24px;
  width: auto;
}

.about__label {
  display: flex;
  margin-left: calc(50% + clamp(7px, 0.85vw, 12.5px));
}

.about__label img {
  height: 24px;
  width: auto;
}

.about__block {
  display: flex;
  flex-direction: column;
  gap: 12px;
}

.about__block-title {
  color: var(--red);
  font-size: clamp(14px, 1.67vw, 24px);
  line-height: clamp(14px, 1.67vw, 24px);
}

.about__block-title::before {
  content: "";
  display: inline-block;
  width: 24px;
  height: 24px;
  margin-right: 8px;
  vertical-align: middle;
  background-color: var(--red);
  -webkit-mask-image: url('../public/images/icons/service-icon.svg');
  -webkit-mask-size: contain;
  -webkit-mask-repeat: no-repeat;
  -webkit-mask-position: center;
  mask-image: url('../public/images/icons/service-icon.svg');
  mask-size: contain;
  mask-repeat: no-repeat;
  mask-position: center;
}

.about__block-text {
  max-width: 100%;
}

.about .text-para-muted {
  text-align: justify;
}

.projects__header .text-para-muted {
  text-align: center;
}

.about__content .text-h2 {
  font-size: clamp(20px, 3.056vw, 44px);
  line-height: clamp(28px, 4.167vw, 60px);
}

/* ── Video ── */
.video-section {
  padding: clamp(24px, 3.34vw, 64px) 0;
  background: var(--white);
}

.video-section__frame {
  width: 100%;
  max-width: calc(var(--container) - 2 * var(--pad-x));
  height: clamp(208px, 32.83vw, 560px);
  margin: 0 auto;
  border-radius: clamp(8px, 0.83vw, 16px);
  overflow: hidden;
  background: #9f9f9f;
  position: relative;
}

.video-section__frame img {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  object-fit: cover;
  object-position: center;
}

.video-section__frame video {
  position: absolute;
  top: 50%;
  left: 50%;
  width: clamp(208px, 32.83vw, 560px);
  height: 100vw;
  max-width: none;
  max-height: none;
  object-fit: cover;
  object-position: center;
  transform: translate(-50%, -50%) rotate(270deg);
}

/* ── Services ── */
.services {
  padding: clamp(32px, 4.11vw, 88px) 0;
  background: var(--bg-light);
  scroll-margin-top: clamp(56px, 6.17vw, 120px);
}

.services__inner {
  max-width: var(--container);
  margin: 0 auto;
  padding: 0 var(--pad-x);
  display: flex;
  flex-direction: column;
  gap: clamp(40px, 5.72vw, 112px);
}

.services__header {
  display: flex;
  flex-direction: column;
  gap: clamp(19px, 2.55vw, 48px);
}

.services__header-top {
  display: flex;
  align-items: flex-end;
  justify-content: space-between;
  gap: clamp(16px, 2.22vw, 48px);
  flex-wrap: wrap;
}

.services__header-text {
  display: flex;
  flex-direction: column;
  gap: 16px;
  flex: 1 1 auto;
  min-width: 0;
}

.services__grid {
  display: flex;
  flex-direction: column;
  gap: 20px;
}

.services__row {
  display: flex;
  gap: 20px;
}

.service-card {
  flex: 1;
  padding: clamp(13px, 1.66vw, 32px);
  border-radius: clamp(6px, 0.66vw, 13px);
  border: 1px solid var(--bg-pink);
  background: var(--white);
  display: flex;
  flex-direction: column;
  gap: clamp(11px, 1.34vw, 26px);
  min-height: clamp(144px, 18.28vw, 336px);
}

.service-card {
  transition: background 0.25s ease, border-color 0.25s ease;
}

.service-card:hover {
  background: var(--red-dark);
  border-color: var(--red-dark);
}

.service-card__icon-wrap {
  display: inline-flex;
  padding: 10px;
  background: var(--bg-pink);
  border-radius: 6px;
  width: fit-content;
  transition: background 0.25s ease;
}

.service-card__icon-wrap img {
  width: clamp(18px, 1.89vw, 37px);
  height: clamp(18px, 1.89vw, 37px);
  transition: filter 0.25s ease;
}

.service-card:hover .service-card__icon-wrap {
  background: rgba(255, 255, 255, 0.2);
}

.service-card:hover .service-card__icon-wrap img {
  filter: brightness(0) invert(1);
}

.service-card__body {
  display: flex;
  flex-direction: column;
  gap: 12px;
}

.service-card:hover .service-card__title {
  color: var(--white);
}

.service-card:hover .service-card__desc {
  color: var(--text-light);
}

.service-card__desc {
  max-width: 100%;
}

/* ── Projects ── */
.projects {
  position: relative;
  /* padding-top matches header height so content starts below nav when section is pinned —
     must equal .header's height (clamp(56px, 6.17vw, 120px)), not a smaller value,
     otherwise the title sits underneath the sticky nav while pinned. */
  padding: clamp(56px, 6.17vw, 120px) 0 0;
  background: var(--white);
  overflow: hidden;
  scroll-margin-top: clamp(56px, 6.17vw, 120px);
}

/* The reel scroll-pin animation (main.js) only runs at this same breakpoint —
   it settles with the last card 40% of its own height short of
   .projects__cards's bottom edge, so pull the next section up (partially;
   0.25 of the 0.4 shortfall, leaving some breathing room) to shrink the
   trailing gap without touching .projects__cards's own height (which every
   card's bottom:0 start/rest position is measured against, so shrinking it
   would shift all three cards, not just the gap). Below this width the cards
   stack normally with no such gap to close — pulling the section up there
   just hides the last card behind the next section. */
@media (min-width: 1200px) {
  .projects {
    margin-bottom: calc(-1 * (var(--container) - 2 * var(--pad-x) - 20px) / 2 * 1.26398 * 0.25);
  }
}

.projects__watermark {
  position: absolute;
  top: -20px;                       /* JS overrides this via fit() */
  left: 50%;
  width: var(--container);
  text-align: center;
  transform: translateX(-50%);      /* centred in the container, not left-anchored */
  font-family: "Poppins", sans-serif;
  font-weight: 730;
  font-size: 200px;
  line-height: 1.2;
  text-transform: uppercase;
  color: #cccbcb;
  opacity: 0.52;
  pointer-events: none;
  white-space: nowrap;
  overflow: visible;
  transform-origin: center center;  /* GSAP scales from centre */
  will-change: transform, opacity;
}

.projects__header {
  position: relative;
  z-index: 1;                   /* below cards container (z-index:20) */
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 14px;
  text-align: center;
  max-width: clamp(288px, 39.55vw, 688px);
  margin: 0 auto 0;
}

/* Cards outer container — in front of section heading via z-index */
.projects__cards {
  position: relative;
  z-index: 20;                          /* above heading text (z-index:10) */
  max-width: calc(var(--container) - 2 * var(--pad-x));
  margin: 0 auto;
  /* Card height follows its own fluid width (container width, minus the 20px
     gap, halved) scaled by the 798:631.45 card ratio — kept in sync with the
     .project-card width/aspect-ratio below. Full height — do not shrink this;
     every card's bottom:0 start/rest position is measured against it, so
     shrinking it shifts all three cards, not just the trailing gap. */
  height: calc(clamp(16px, 2vw, 32px) + (var(--container) - 2 * var(--pad-x) - 20px) / 2 * 1.26398);
}

/* Mask wrapper — clip-path top extends so cards exit through heading; bottom clips hidden cards */
.projects__cards-mask {
  position: absolute;
  inset: 0;
  overflow: visible;
  clip-path: inset(-100vh 0 0 0);
  isolation: isolate;
}

/* All cards: half-width (minus half the 20px gap), anchored at container
   bottom — fluid, so the left/right cards always sit exactly 20px apart and
   scale up to fill the container on wide screens instead of capping out.
   Overall card ratio is 631.45:798 (the photo inside keeps its own separate
   631.45:574 ratio — see .project-card__image). */
.project-card {
  position: absolute;
  width: calc(50% - 10px);
  aspect-ratio: 631.45 / 798;
  border: 1px solid var(--bg-pink-soft);
  border-radius: clamp(8px, 0.89vw, 16px);
  overflow: hidden;
  background: var(--white);
  display: flex;
  flex-direction: column;
  will-change: transform, opacity;
}

/* Card 1 — right lane */
.project-card--1 {
  bottom: 0;
  top: auto;
  right: 0;
  z-index: 3;
}

/* Card 2 — left lane */
.project-card--2 {
  bottom: 0;
  top: auto;
  left: 0;
  z-index: 2;
}

/* Card 3 — right lane */
.project-card--3 {
  bottom: 0;
  top: auto;
  right: 0;
  left: auto;
  z-index: 1;
}

.project-card__image {
  /* Fills whatever height .project-card__body's content doesn't use, so the
     card never ends in dead space below the button — the card's own
     aspect-ratio (631.45:798) is taller than the image's native ratio
     (631.45:574) plus the body's natural content height combined, and a
     fixed-ratio image here left that difference as blank space at the
     bottom. flex:1 lets the image absorb it instead (cropped via cover). */
  flex: 1 1 auto;
  min-height: 0;
  overflow: hidden;
  border-radius: clamp(8px, 0.89vw, 16px) clamp(8px, 0.89vw, 16px) 0 0;
}

.project-card__image img {
  width: 100%;
  height: 100%;
  object-fit: cover;
}


.project-card__body {
  flex-shrink: 0;
  padding: clamp(8px, 0.78vw, 14px) clamp(10px, 1vw, 19px);
  display: flex;
  flex-direction: column;
  align-items: flex-start;
  gap: clamp(6px, 0.55vw, 10px);
}

.project-card__info {
  display: flex;
  flex-direction: column;
  gap: 6px;
}

.project-card__info .text-para-muted {
  display: -webkit-box;
  -webkit-line-clamp: 2;
  line-clamp: 2;
  -webkit-box-orient: vertical;
  overflow: hidden;
}


/* ── Marquee after projects — standalone section below projects ── */
.marquee-wrap--after-projects {
  background: var(--white);
  margin-top: 0;
}

/* ── Clients ── */
.clients {
  padding: clamp(29px, 3.83vw, 80px) 0 clamp(24px, 3.28vw, 64px);
  background: var(--bg-light);
  overflow: hidden;
}

.clients__inner {
  max-width: 100%;
  margin: 0 auto;
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 24px;
}

/* Scrolling marquee row for client logos */
.clients__scroll-wrap {
  width: 100vw;
  overflow: hidden;
  padding: 8px 0;
  display: flex;
  align-items: center;
}

.clients__scroll-track {
  display: flex;
  flex-wrap: nowrap;
  align-items: center;
  gap: 20px;
  width: max-content;
  white-space: nowrap;
  animation: clients-rtl 48s linear infinite;
}

.clients__scroll-wrap:hover .clients__scroll-track {
  animation-play-state: paused;
}

.clients__scroll-track--reverse {
  animation-direction: reverse;
}

@keyframes clients-rtl {
  0%   { transform: translateX(0); }
  100% { transform: translateX(-50%); }
}

.client-logo {
  width: clamp(96px, 10.94vw, 192px);
  height: clamp(53px, 6vw, 106px);
  border: 1px solid #ddd;
  border-radius: 6px;
  background: var(--white);
  display: flex;
  align-items: center;
  justify-content: center;
  overflow: hidden;
  flex-shrink: 0;
  transition: border-color 0.3s;
}

.client-logo:hover {
  border-color: var(--red);
}

.client-logo img {
  max-width: 80%;
  max-height: 70%;
  object-fit: contain;
  filter: grayscale(1);
  transition: filter 0.35s ease;
}

.client-logo:hover img {
  filter: grayscale(0);
}

/* ── Testimonial ── */
.testimonial {
  position: relative;
  min-height: clamp(320px, 40.78vw, 800px);
  background: var(--testimonial-gradient);
  overflow: hidden;
  scroll-margin-top: clamp(56px, 6.17vw, 120px);
}

.testimonial__bg {
  position: absolute;
  inset: 0;
  width: 105%;
  height: 207%;
  object-fit: cover;
  left: -3%;
  top: -32%;
  opacity: 0.4;
  pointer-events: none;
}

.testimonial__inner {
  position: relative;
  z-index: 1;
  padding: clamp(32px, 4.34vw, 96px) var(--pad-x);
  max-width: var(--container);
  margin: 0 auto;
}

.testimonial__card {
  background: rgba(8, 8, 8, 0.72);
  border: 1px solid var(--white);
  border-radius: clamp(6px, 0.66vw, 13px);
  padding: clamp(32px, 5.55vw, 112px) clamp(32px, 6.06vw, 120px);
  display: flex;
  align-items: center;
  gap: clamp(19px, 3.28vw, 64px);
  min-height: clamp(300px, 40.14vw, 608px);
}

.testimonial__avatars {
  display: flex;
  flex-direction: row;
  align-items: center;
  justify-content: center;
  gap: clamp(8px, 1.11vw, 16px);
  padding: clamp(7px, 0.97vw, 14px) clamp(14px, 1.94vw, 28px);
  background: var(--red-deep);
  border: 1px solid var(--white);
  border-radius: clamp(6px, 0.66vw, 13px);
  height: clamp(148px, 20.56vw, 296px);
  width: clamp(80px, 11.67vw, 168px);
  flex-shrink: 0;
  overflow: hidden;
}

.testimonial__avatar-icon {
  display: flex;
  align-items: center;
  justify-content: center;
  flex-shrink: 0;
}

.testimonial__avatar-icon img {
  width: clamp(12px, 1.67vw, 24px);
  height: auto;
}

.testimonial__avatar-stack {
  display: flex;
  flex-direction: column;
  gap: clamp(12px, 2.22vw, 32px);
  align-items: center;
  flex-shrink: 0;
  will-change: transform;
}

.testimonial__avatar {
  width: clamp(32px, 4.72vw, 68px);
  height: clamp(32px, 4.72vw, 68px);
  border-radius: 50%;
  overflow: hidden;
  border: 1px solid var(--white);
  opacity: 0.3;
  flex-shrink: 0;
  cursor: pointer;
  transition: opacity 0.25s ease, transform 0.25s ease;
}

.testimonial__avatar--active {
  opacity: 1;
}

.testimonial__avatar img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  transform: scale(1.15);
}

.testimonial__content {
  display: flex;
  flex-direction: column;
  gap: clamp(14px, 1.89vw, 38px);
  flex: 1;
  transition: opacity 0.3s ease;
}

.testimonial__heading-block {
  display: flex;
  flex-direction: column;
  gap: 12px;
}

.testimonial__heading-block .section-label img {
  opacity: 0.85;
}

.testimonial__quote {
  color: var(--text-light);
  max-width: clamp(320px, 47.22vw, 880px);
}

.testimonial__divider {
  width: 100%;
  height: 1px;
  background: var(--text-light);
}

.testimonial__author {
  display: flex;
  justify-content: space-between;
  align-items: flex-end;
}

.testimonial__author-info {
  display: flex;
  flex-direction: column;
  gap: 6px;
}

.testimonial__role {
  color: var(--text-light);
}

/* ── Chrome Dino Game Section ── */
.dino-section {
  width: 100%;
  background: #fff;
  overflow: hidden;
}

.dino-section__inner {
  max-width: var(--container);
  margin: 0 auto;
  padding: 0 var(--pad-x);
  display: flex;
  flex-direction: column;
  align-items: center;
}

.dino-hint {
  font-family: monospace;
  font-size: 24px;
  font-weight: 700;
  letter-spacing: 1px;
  color: #535353;
  text-align: center;
  margin: 24px 0 16px;
  transition: opacity 0.2s ease;
}

.dino-hint.is-hidden {
  opacity: 0;
  pointer-events: none;
}

.dino-section__frame {
  width: 100%;
  margin: 0 auto;
  overflow: hidden;
  display: flex;
  justify-content: center;
  align-items: flex-start;
  height: calc(150px * var(--dino-scale, 2.2)); /* 150px game height * current scale */
}

.dino-runner {
  position: relative;
  width: 600px; /* fixed — never squished by the frame; only ever visually resized via transform */
  flex-shrink: 0; /* frame is display:flex — without this the item shrinks back to fit, undoing the fixed width */
  transform: scale(var(--dino-scale, 2.2));
  /* Must match the frame's align-items: flex-start — a "center" origin scales
     around the box's own middle, which doesn't line up with a top-aligned flex
     item and pushes the bottom of the game past the frame's clipped edge. */
  transform-origin: top center;
}

.dino-runner .runner-container {
  position: relative;
}

.dino-runner .controller {
  position: absolute;
  inset: 0;
  z-index: 1;
  /* This overlay is a sibling of .runner-container (not a descendant), so a
     tap on it never bubbles to the container's own touchstart listener —
     which is what the game's restart-after-crash logic checks for
     (e.currentTarget === containerEl). Passing touches straight through lets
     the container's listener see and handle every tap, jump and restart alike. */
  pointer-events: none;
}

.dino-runner canvas.runner-canvas {
  display: block;
}


/* ── Footer CTA ── */
.footer-cta {
  position: relative;
  background: var(--footer-bg);
  min-height: clamp(450px, 60vw, 700px);
  overflow: hidden;
}

/* Canvas: centred, max 1440px — mirrors how .projects__cards constrains project cards */
.footer-cta__canvas {
  position: absolute;
  top: 0;
  bottom: 0;
  left: 0;
  right: 0;
  max-width: 1440px;
  margin: 0 auto;
  pointer-events: none;
}

/* All % values are relative to the 1440×935 canvas — pixel-perfect at 1440px */
.footer-cta__hand-left {
  position: absolute;
  left: 0%;
  top: 7.03%;    /* 90 / 935  */
  width: 40%;
  height: auto;
  z-index: 1;
}

.footer-cta__hand-right {
  position: absolute;
  left: 70%;
  top: 25%;
  width: 38%;
  right: 0;
  height: auto;
  z-index: 3;
  transform: rotate(20.22deg);
  transform-origin: 0 0;

}

/* Footer logo with tagline */
.footer-cta__logo-wrap {
  display: flex;
  flex-direction: column;
  gap: 4px;
  margin-bottom: clamp(13px, 1.89vw, 40px);
  cursor: pointer;
}

.footer-cta__tagline {
  color: var(--text-light);
  font-size: clamp(10px, 0.72vw, 13px);
  font-weight: 500;
  letter-spacing: 0.08em;
  text-transform: uppercase;
  opacity: 0.7;
}

.footer-cta__social {
  position: relative;
  z-index: 2;
  width: 100%;
  max-width: var(--container);
  margin: 0 auto;
  display: flex;
  align-items: center;
  justify-content: space-between;
  padding: clamp(10px, 1.8vw, 26px) var(--pad-x) 0;
}

.footer-cta__social-item {
  display: flex;
  align-items: center;
  gap: 14px;
  padding: 8px 11px;
  background: rgba(255, 255, 255, 0.13);
  border-radius: 6px;
  transition: transform 0.45s cubic-bezier(0.34, 1.56, 0.64, 1), background 0.3s ease;
}

.footer-cta__social-item:hover {
  transform: translateY(-4px) scale(1.05);
  background: rgba(255, 255, 255, 0.22);
}

.footer-cta__social-item:hover img:first-child {
  animation: social-icon-bounce 0.5s cubic-bezier(0.34, 1.56, 0.64, 1);
}

@keyframes social-icon-bounce {
  0% { transform: scale(1) rotate(0deg); }
  40% { transform: scale(1.3) rotate(-8deg); }
  70% { transform: scale(0.92) rotate(4deg); }
  100% { transform: scale(1) rotate(0deg); }
}

.footer-cta__social-item img {
  width: 24px;
  height: 24px;
}

.footer-cta__social-item span {
  font-weight: 600;
  font-size: clamp(11px, 1.11vw, 22px);
  line-height: clamp(14px, 1.34vw, 26px);
  color: var(--text-light);
}

.footer-cta__main {
  position: relative;
  z-index: 5;
  padding: clamp(28px, 6.2vw, 96px) var(--pad-x) clamp(66px, 6.2vw, 96px) 0;
  max-width: clamp(304px, 34.44vw, 496px);
  margin-left: max(var(--pad-x), calc((100vw - var(--container)) / 2 + var(--pad-x)));
}

.footer-cta__logo {
  width: clamp(72px, 8vw, 140px);
  height: auto;
  object-fit: contain;
  margin-bottom: clamp(10px, 1.4vw, 30px);
}

.footer-cta__text-block {
  display: flex;
  flex-direction: column;
  gap: 34px;
}

.footer-cta__heading {
  color: var(--white);
}

.footer-cta__heading .text-red {
  color: var(--red);
}

.footer-cta__desc {
  max-width: clamp(160px, 20.94vw, 400px);
  color: var(--text-light);
}

.footer-cta__actions {
  display: flex;
  gap: 20px;
}

.footer-cta__photo {
  position: absolute;
  border: 1.5px solid rgba(255, 255, 255, 0.6);
  overflow: hidden;
  z-index: 2;
}

/* lower — 305×173 @ top:627 left:522 on the 1440×935 canvas */
.footer-cta__photo--1 {
  left: 36.25%;
  top: 67.06%;
  width: 21.18%;
  height: auto;
  aspect-ratio: 305 / 173;
  border-radius: 16px;
  border-width: 1px;
  z-index: 4;
  pointer-events: auto;
}

/* upper right — 305×206 @ top:151 left:771 on the 1440×935 canvas */
.footer-cta__photo--2 {
  left: 53.54%;
  top: 16.15%;
  width: 21.18%;
  height: auto;
  aspect-ratio: 305 / 206;
  border-radius: 16px;
  border-width: 4px;
  z-index: 5;
  pointer-events: auto;
}

.footer-cta__photo img {
  width: 100%;
  height: 100%;
  object-fit: cover;
}

.footer-cta__bar {
  position: absolute;
  bottom: 0;
  left: 0;
  right: 0;
  height: clamp(35px, 3vw, 58px);
  background: var(--footer-bar);
  display: flex;
  align-items: center;
  justify-content: space-between;
  padding: 12px calc(var(--side) + var(--pad-x));
  z-index: 6;
}

.footer-cta__bar p {
  font-size: clamp(10px, 0.89vw, 14px);
  line-height: 1.6;
  color: var(--white);
}

.footer-cta__bar .highlight {
  color: var(--white);
  font-weight: 400;
}

/* ── Section centering — CSS grid guarantees equal side gaps at all zoom levels ── */
.hero,
.about,
.video-section,
.services,
.clients,
.testimonial {
  display: grid;
  grid-template-columns: 1fr min(var(--container), 100%) 1fr;
}

/* Place every inner container in the centered middle column */
.hero__inner,
.about__inner,
.video-section__frame,
.services__inner,
.clients__inner,
.testimonial__inner {
  grid-column: 2;
}

/* Projects uses padding centering — absolute-positioned cards need block context */
.projects {
  padding-left: var(--side);
  padding-right: var(--side);
}

/* ── Responsive ── */
@media (max-width: 1200px) {
  .hero__inner {
    flex-direction: column;
    padding: 40px 40px 220px;
  }

  .hero__image-wrap {
    position: relative;
    left: auto;
    top: auto;
    flex: 0 1 auto;
    width: 100%;
    min-width: 0;
    max-width: 630px;
    height: 420px;
    aspect-ratio: auto;
  }

  .hero__decor {
    left: calc(50% - 60px);
    top: auto;
    bottom: 140px;
    width: 200px;
    height: 210px;
  }

  .about__inner {
    flex-direction: column;
  }

  .about__label {
    margin-left: 0;
    justify-content: center;
    margin-top: 14px;
  }

  .about__grid {
    grid-template-columns: 1fr;
  }

  .about__content {
    width: 100%;
    max-width: 626px;
    flex: 0 1 auto;
    padding-left: 0;
    margin-top: 0;
  }

  .about__visual {
    width: 100%;
    max-width: 630px;
    height: auto;
    aspect-ratio: 1;
  }

  .services__row {
    flex-direction: column;
  }

  .projects__cards {
    height: auto;
    overflow: visible;
  }

  .projects__cards-mask {
    position: relative;
    inset: auto;
    clip-path: none;
    display: flex;
    flex-direction: column;
    align-items: stretch; /* per-card align-self below controls left/right, same as the desktop lanes */
    gap: 24px;
  }

  /* Height grows to fit content on mobile — the photo shows uncropped
     (see .project-card__image override below), so the fixed desktop
     aspect-ratio no longer applies. */
  .project-card {
    position: relative;
    top: auto;
    bottom: auto;
    left: auto;
    right: auto;
    width: 85%;
    max-width: 631.45px;
    height: auto;
  }

  .project-card--1,
  .project-card--2,
  .project-card--3 {
    align-self: center;
    z-index: auto;
  }

  .project-card__image {
    aspect-ratio: auto;
  }

  .project-card__image img {
    height: auto;
    object-fit: contain;
  }

  /* Card height grows to fit content on mobile (see .project-card above),
     so there's no need to clamp the description — show it in full. */
  .project-card__info .text-para-muted {
    display: block;
    -webkit-line-clamp: unset;
    line-clamp: unset;
    overflow: visible;
  }

  .projects {
    min-height: auto;
    overflow: visible;
    /* The rotated marquee ribbon right after this section (±6deg) visually
       extends above its own box at the edges — without breathing room here
       it reads as creeping into/behind the last stacked card. */
    padding-bottom: clamp(48px, 8vw, 80px);
  }

  .testimonial__card {
    flex-direction: column;
    padding: 40px;
  }

  /* Header: switch to hamburger */
  .header__nav {
    display: none;
  }

  .header__hamburger {
    display: flex;
  }

  .header__cta {
    font-size: 13px;
    padding: 6px 6px 6px 12px;
    gap: 10px;
    width: auto;
    height: auto;
  }

  .header__inner {
    padding: 0 24px;
    gap: 12px;
  }

  .footer-cta__social {
    flex-wrap: wrap;
    gap: 20px;
    padding: 30px 30px 0;
  }

  .about__visual--bubble {
    width: 100%;
    max-width: 630px;
    aspect-ratio: 1;
  }
}

@media (max-width: 768px) {
  .break-mobile {
    display: inline;
  }

  .hero__headline {
    font-size: 48px;
    line-height: 58px;
  }

  .service-card__desc {
    max-width: 100%;
  }

  .marquee__item span {
    font-size: 22px;
    line-height: 28px;
  }

  .marquee__item img {
    width: 25px;
    height: 25px;
  }

  .header {
    height: 72px;
  }

  .header__logo {
    width: 100px;
    height: 53px;
  }

  .projects__watermark {
    font-size: 48px;
    line-height: 60px;
    width: calc(100% - 32px);
  }

  .footer-cta__hand-left,
  .footer-cta__hand-right {
    display: none;
  }

  /* Text column narrows so both photos have clear room on the right —
     one above the "Next Level" heading, one below it. Original (non-square)
     aspect ratios are kept, just resized for the narrower mobile canvas. */
  .footer-cta__main {
    max-width: 58%;
  }

  .footer-cta__photo {
    left: auto;
    right: 5%;
    width: 34%;
  }

  .footer-cta__photo--2 {
    top: 32%; /* clears the social row above, sits just above the heading */
  }

  .footer-cta__photo--1 {
    top: 58%; /* sits below the heading, beside the (left-aligned) description */
  }

  .testimonial__card {
    padding: 40px 24px;
    gap: 30px;
  }

  .section-label img {
    height: 36px;
  }

  .clients__row {
    flex-wrap: wrap;
    justify-content: center;
  }
}

@media (max-width: 480px) {
  .header__inner {
    padding: 0 16px;
    gap: 8px;
  }

  .header__cta {
    padding: 6px 6px 6px 10px;
    gap: 6px;
  }

  .header__cta .btn-icon {
    width: 26px;
    height: 26px;
  }

  .hero {
    min-height: auto;
    padding-bottom: 0;
  }

  .hero__inner {
    padding: 30px 20px 180px;
  }

  .hero__image-wrap {
    border-radius: 20px;
    height: 280px;
  }

  .hero__decor {
    width: 140px;
    height: 148px;
    bottom: 80px;
    left: calc(50% - 40px);
  }

  .hero__content {
    gap: 20px;
  }

  .hero__headline-block {
    gap: 16px;
  }

  .about {
    padding: 40px 20px;
  }

  .about__visual {
    height: auto;
    aspect-ratio: 1;
  }

  .services {
    padding: 40px 20px;
  }

  .services__inner {
    gap: 40px;
  }

  .services__header-top {
    flex-direction: column;
    align-items: flex-start;
  }

  .video-section {
    padding: 40px 20px;
  }

  .projects {
    padding: 60px 20px 80px;
  }

  .projects__watermark {
    font-size: 36px;
    line-height: 44px;
  }

  .testimonial__inner {
    padding: 30px 16px;
  }

  .testimonial__card {
    flex-direction: row;
    align-items: flex-start;
    padding: 20px 16px;
    gap: 16px;
  }

  .testimonial__avatars {
    width: clamp(64px, 20vw, 80px);
    height: auto;
    align-self: stretch;
  }

  .testimonial__quote {
    max-width: 100%;
  }

  .testimonial__author {
    flex-direction: column;
    align-items: flex-start;
    gap: 8px;
  }

  .dino-section__inner {
    padding-bottom: 48px;
  }

  .footer-cta__main {
    padding: 40px 20px 90px; /* extra bottom clearance so the absolutely-positioned copyright bar doesn't overlap the Contact Us button */
    max-width: 58%; /* leaves clear room on the right for the two photos */
    margin-left: 0;
  }

  .footer-cta__social {
    padding: 30px 20px 0;
    gap: 12px;
  }

  .section-label img {
    height: 28px;
  }

  .footer-cta__bar {
    flex-direction: column;
    gap: 4px;
    text-align: center;
    height: auto;
    padding: 12px 20px;
  }
}

/* ── Contact Modal ── */
.contact-modal {
  display: none;
  position: fixed;
  inset: 0;
  z-index: 9000;
  align-items: center;
  justify-content: center;
  padding: 16px;
}

.contact-modal.is-open {
  display: flex;
}

.contact-modal__overlay {
  position: absolute;
  inset: 0;
  background: rgba(0, 0, 0, 0.55);
  backdrop-filter: blur(3px);
}

.contact-modal__box {
  position: relative;
  z-index: 1;
  background: #fff;
  border-radius: 12px;
  padding: 60px 64px;
  width: min(752px, calc(100vw - 32px));
  max-height: calc(100vh - 40px);
  overflow-y: auto;
  box-shadow: 0 24px 64px rgba(0, 0, 0, 0.22);
  animation: modal-in 0.3s cubic-bezier(0.34, 1.56, 0.64, 1) both;
}

@keyframes modal-in {
  from { opacity: 0; transform: scale(0.92) translateY(20px); }
  to   { opacity: 1; transform: scale(1)    translateY(0);    }
}

.contact-modal__close {
  position: absolute;
  top: 24px;
  right: 24px;
  width: 36px;
  height: 36px;
  border-radius: 50%;
  border: 1.5px solid #ccc;
  background: transparent;
  font-size: 14px;
  cursor: pointer;
  display: flex;
  align-items: center;
  justify-content: center;
  color: #888;
  transition: border-color 0.2s, color 0.2s;
}

.contact-modal__close:hover {
  border-color: #c60101;
  color: #c60101;
}

/* Section label icon */
.contact-modal__label-img {
  width: 150px;
  height: 28px;
  display: block;
  object-fit: contain;
  object-position: left center;
  margin-bottom: 30px;
}

/* Heading */
.contact-modal__title {
  font-family: "Urbanist", sans-serif;
  font-weight: 600;
  font-size: 44px;
  line-height: 60px;
  letter-spacing: 0;
  text-transform: capitalize;
  color: #171616;
  margin: 0 0 40px;
}

.contact-modal__title .text-red {
  color: #c60101;
}

/* Form */
.contact-modal__form {
  display: flex;
  flex-direction: column;
  gap: 26px;
}

.contact-modal__row {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 26px;
}

/* All field controls */
.contact-modal__field input,
.contact-modal__field select,
.contact-modal__field textarea {
  width: 100%;
  height: 58px;
  padding: 0 23px;
  border: 1.8px solid #e5e5e5;
  border-radius: 7px;
  font-family: "Urbanist", sans-serif;
  font-size: 16px;
  font-weight: 400;
  line-height: 30px;
  color: #171616;
  background: #fff;
  outline: none;
  transition: border-color 0.2s;
  box-sizing: border-box;
}

.contact-modal__field input::placeholder,
.contact-modal__field textarea::placeholder {
  color: #7f7c7c;
  font-family: "Urbanist", sans-serif;
  font-size: 16px;
  font-weight: 400;
  text-align: left;
}

.contact-modal__field select {
  color: #7f7c7c;
  font-family: "Urbanist", sans-serif;
  font-size: 16px;
  font-weight: 400;
  text-align: left;
  appearance: none;
  -webkit-appearance: none;
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='12' height='8' viewBox='0 0 12 8'%3E%3Cpath d='M1 1l5 5 5-5' stroke='%23999797' stroke-width='1.8' fill='none' stroke-linecap='round' stroke-linejoin='round'/%3E%3C/svg%3E");
  background-repeat: no-repeat;
  background-position: right 20px center;
  padding-right: 44px;
  cursor: pointer;
}

.contact-modal__field select option:not([value=""]) {
  color: #171616;
}

.contact-modal__field input:focus,
.contact-modal__field select:focus,
.contact-modal__field textarea:focus {
  border-color: #c60101;
}

.contact-modal__field textarea {
  height: 113px;
  padding: 14px 23px;
  resize: vertical;
  min-height: unset;
  line-height: 30px;
}

/* Checkbox */
.contact-modal__checkbox {
  display: flex;
  align-items: center;
  gap: 14px;
  font-family: "Poppins", sans-serif;
  font-size: 13px;
  color: #312f2f;
  cursor: pointer;
  margin-top: 16px;
}

.contact-modal__checkbox input[type="checkbox"] {
  appearance: none;
  -webkit-appearance: none;
  width: 20px;
  height: 20px;
  border: 0.5px solid #000;
  border-radius: 6px;
  background: #fff;
  flex-shrink: 0;
  cursor: pointer;
  position: relative;
  transition: background 0.15s, border-color 0.15s;
}

.contact-modal__checkbox input[type="checkbox"]:checked {
  background: #c60101;
  border-color: #c60101;
}

.contact-modal__checkbox input[type="checkbox"]:checked::after {
  content: '';
  position: absolute;
  left: 5px;
  top: 2px;
  width: 6px;
  height: 10px;
  border: 2px solid #fff;
  border-top: none;
  border-left: none;
  transform: rotate(45deg);
}

.contact-modal__status {
  display: none;
  margin: -10px 0 0;
  font-family: "Urbanist", sans-serif;
  font-size: 14px;
  font-weight: 500;
}

.contact-modal__status.is-success {
  display: block;
  color: #1a7f37;
}

.contact-modal__status.is-error {
  display: block;
  color: #c60101;
}

/* Submit button — always show arrow, fixed height */
.contact-modal__submit {
  align-self: flex-start;
  height: 55px;
  margin-top: 16px;
}

.contact-modal__submit .btn-icon {
  transform: scale(1) !important;
}

.contact-modal__submit .btn-icon img {
  opacity: 1 !important;
  transform: scale(1) rotate(0deg) !important;
}

/* Mobile */
@media (max-width: 600px) {
  .contact-modal__box {
    padding: 24px 20px;
    max-height: calc(100vh - 24px);
  }

  .contact-modal__label-img {
    width: 120px;
    height: 22px;
    margin-bottom: 14px;
  }

  .contact-modal__title {
    font-size: 26px;
    line-height: 34px;
    margin-bottom: 18px;
  }

  .contact-modal__form {
    gap: 14px;
  }

  .contact-modal__row {
    grid-template-columns: 1fr;
    gap: 14px;
  }

  .contact-modal__field input,
  .contact-modal__field select,
  .contact-modal__field textarea {
    height: 44px;
    padding: 0 16px;
    font-size: 14px;
    line-height: normal;
  }

  .contact-modal__field textarea {
    height: 60px;
    padding: 10px 16px;
  }

  .contact-modal__checkbox {
    margin-top: 4px;
  }

  .contact-modal__submit {
    align-self: stretch;
    justify-content: center;
    height: 46px;
    margin-top: 4px;
  }
}

/* ── Custom cursor dot ── */
.cursor-dot {
  position: fixed;
  top: 0;
  left: 0;
  width: 10px;
  height: 10px;
  border-radius: 50%;
  background: var(--red);
  pointer-events: none;
  z-index: 9999;
  transform: translate(-50%, -50%);
  transition: opacity 0.2s ease, transform 0.08s ease-out;
  opacity: 0;
}

.cursor-dot.is-active {
  opacity: 1;
}

@media (hover: none), (pointer: coarse) {
  .cursor-dot {
    display: none;
  }
}

/* ── Fixed blurred strip pinned to the bottom of the viewport ── */
.viewport-bottom-blur {
  position: fixed;
  left: 0;
  right: 0;
  bottom: 0;
  height: 100px;
  backdrop-filter: blur(6px);
  -webkit-backdrop-filter: blur(6px);
  -webkit-mask-image: linear-gradient(to top, #000 0%, transparent 100%);
  mask-image: linear-gradient(to top, #000 0%, transparent 100%);
  pointer-events: none;
  z-index: 998;
  opacity: 1;
  transition: opacity 0.3s ease;
}

.viewport-bottom-blur.is-hidden {
  opacity: 0;
}