/* ======================================================
   TWIN BUILDERS — FULL HERO & PROJECT FIXES
====================================================== */

/* ================= RESET BODY / HEADER ================= */
body, .site-content, .page-template-default {
  margin: 0 !important;
  padding: 0 !important;
  overflow-x: hidden;
}

header,
.site-header {
  margin-bottom: 0 !important;
  padding-bottom: 0 !important;
  position: relative;
  z-index: 10;
}

/* ======================================================
   REMOVE HEADER GAP — HERO ATTACHED
====================================================== */
.project-hero,
.about-hero {
  margin-top: -1px !important; /* pull hero up */
}

/* ======================================================
   FORCE TRUE FULL WIDTH (DESKTOP + MOBILE)
====================================================== */
.project-hero,
.about-hero {
  width: 100vw !important;
  max-width: 100vw !important;
  margin-left: calc(-50vw + 50%) !important;
  padding: 0 !important;
  overflow: hidden !important;
}

.project-hero img,
.about-hero img {
  width: 100% !important;
  height: 100% !important;
  object-fit: cover !important;
  display: block !important;
}

/* ================= ABOUT HERO FULL WIDTH ================= */
.about-hero {
  position: relative;
  overflow: hidden;
  height: 70vh;
}

.about-hero img {
  animation: hero-motion 22s ease-in-out infinite;
}

@keyframes hero-motion {
  0% { transform: scale(1) translateX(0); }
  50% { transform: scale(1.06) translateX(-4%); }
  100% { transform: scale(1) translateX(0); }
}

/* ================= SPLIT SECTIONS ================= */
.split-section {
  display: flex !important;
  flex-direction: row !important;
  align-items: center !important;
  justify-content: space-between !important;
  max-width: 1200px;
  margin: 140px auto !important;
  padding: 0 24px !important;
  gap: 80px !important;
}

.split-section.reverse {
  flex-direction: row-reverse !important;
}

/* ================= SINGLE IMAGE ================= */
.split-image {
  flex-shrink: 0 !important;
}

.split-image img {
  width: 100% !important;
  max-width: 520px !important;
  height: auto !important;
  display: block !important;
  border-radius: 8px;
  box-shadow: 0 20px 50px rgba(0,0,0,0.12);
  transition: transform 0.35s ease, box-shadow 0.35s ease;
}

.split-image img:hover {
  transform: scale(1.04);
  box-shadow: 0 30px 70px rgba(0,0,0,0.18);
}

/* ================= STACKED IMAGE SECTION ================= */
.split-section.stacked-images {
  align-items: flex-start !important;
}

.split-image-stack {
  display: flex !important;
  flex-direction: column !important;
  gap: 40px !important;
  flex-shrink: 0 !important;
}

.split-image-stack img {
  width: 100% !important;
  max-width: 520px !important;
  height: auto !important;
  display: block !important;
  border-radius: 8px;
  box-shadow: 0 20px 50px rgba(0,0,0,0.12);
  transition: transform 0.35s ease, box-shadow 0.35s ease;
}

.split-image-stack img:hover {
  transform: scale(1.04);
  box-shadow: 0 30px 70px rgba(0,0,0,0.18);
}

/* ================= CONTENT ================= */
.split-content {
  max-width: 520px !important;
}

.split-content h2 {
  font-family: 'Montserrat', sans-serif;
  font-size: 36px;
  font-weight: 500;
  margin-bottom: 20px;
  color: #111;
  letter-spacing: -0.3px;
}

.split-content p {
  font-family: 'Montserrat', sans-serif;
  font-size: 18px;
  line-height: 1.8;
  color: #555;
}

/* ================= HEADER FONT CONTROL ================= */
header .sr-logo-text,
header .sr-nav a,
header .sr-mobile-logo,
header .mobile-link {
  font-weight: 400 !important;
  transition: font-weight 0.2s ease;
}

header .sr-logo-text:hover,
header .sr-nav a:hover,
header .sr-mobile-logo:hover,
header .mobile-link:hover {
  font-weight: 600 !important;
}

/* ================= MOBILE RESPONSIVENESS ================= */
@media (max-width: 1024px) {
  .split-section,
  .split-section.reverse,
  .split-section.stacked-images {
    flex-direction: column !important;
    text-align: center !important;
    gap: 50px !important;
    margin: 100px auto !important;
  }

  .split-image img,
  .split-image-stack img {
    width: 100% !important;
    max-width: 420px !important;
    margin: 0 auto !important;
  }

  .split-image-stack {
    align-items: center !important;
  }
}

@media (max-width: 768px) {
  .about-hero {
    height: 55vh;
  }

  .split-content h2 {
    font-size: 28px;
  }

  .split-content p {
    font-size: 16px;
  }
}

/* ======================================================
   PORTFOLIO — FULL WIDTH FIX
====================================================== */
.single-portfolio,
.single-portfolio body {
  overflow-x: hidden;
}

.single-portfolio .site,
.single-portfolio .site-content,
.single-portfolio .content-area,
.single-portfolio main,
.single-portfolio .wp-site-blocks {
  max-width: 100% !important;
  width: 100% !important;
  padding-left: 0 !important;
  padding-right: 0 !important;
  margin-left: 0 !important;
  margin-right: 0 !important;
  background: #fff !important;
}

.single-portfolio .alignwide,
.single-portfolio .alignfull {
  margin-left: 0 !important;
  margin-right: 0 !important;
  width: 100% !important;
  max-width: 100% !important;
}

/* ======================================================
   MOBILE HERO SAFETY
====================================================== */
@media (max-width: 900px) {
  .project-hero,
  .about-hero {
    height: 60vh !important;
  }
}


html, body, body * {
  font-family: 'Quattrocento Sans' !important;
}



/* Remove bottom border from section before logo */
.site-content,
.content-area,
main,
.elementor-section,
.elementor-container {
  border-bottom: none !important;
  box-shadow: none !important;
}

/* ======================================================
   FLUENT FORM SUBMIT BUTTON — BRAND BLUE
====================================================== */

.fluentform .ff-btn-submit,
.fluentform button[type="submit"],
.fluentform input[type="submit"] {
  background: #00001A !important;   /* blue */
  border-color: #00001A !important;
  color: #ffffff !important;
  font-family: 'Quattrocento Sans' !important;
  font-size: 16px;
  padding: 12px 28px;
  border-radius: 4px;
  transition: all 0.25s ease;
}

/* Hover */
.fluentform .ff-btn-submit:hover,
.fluentform button[type="submit"]:hover,
.fluentform input[type="submit"]:hover {
  background: #0F2A44 !important;
  border-color: #0F2A44 !important;
  transform: translateY(-1px);
}