/* =========================
   CONTACT PAGE BASE
========================= */


:root {
  --primary-teal: #3DAEA5;
  --primary-teal-dark: #2E8B84;
  --text-dark: #1A1A1A;
  --text-gray: #666666;
  --text-light: #999999;
  --bg-light: #FAFAFA;
  --white: #FFFFFF;
  --border-light: #E5E5E5;
  --shadow-soft: 0 4px 20px rgba(0, 0, 0, 0.06);
  --shadow-medium: 0 10px 40px rgba(0, 0, 0, 0.08);
}

body {
  font-family: 'Poppins', sans-serif;
  background: #eef3f1;
  -webkit-font-smoothing: antialiased;
  -moz-osx-font-smoothing: grayscale;
  color: var(--text-dark);
  background: var(--bg-light);
  overflow-x: hidden;
  width: 100%;
}

.mobile-sub {
  display: none;
}

.contact-page {
  min-height: 400px;
  background: #E6EBEA;
  display: flex;
  align-items: center;
  justify-content: center;
  width: 100%;
  overflow-x: hidden;
  padding-top: 40px;
}

/* =========================
   HERO
========================= */
.contact-hero {
  text-align: center;
  max-width: 100%;
  width: 100%;
  padding: 20px 50px;
  /* Align with nav */
}

/* =========================
   HEADLINES
========================= */
.contact-title-hero {
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 16px;
  flex-wrap: wrap;


  color: #000;

  font-family: Poppins;
  font-size: 58px;
  font-style: normal;
  font-weight: 600;
  line-height: 64px;
}

.contact-title-hero.secondary {
  margin-top: 14px;
}

.contact-title-hero .muted {
  font-weight: 600;
  color: rgba(19, 19, 19, 0.70);
}

.contact-title-hero .bold {
  font-weight: 600;
}

.contact-title-hero .teal {
  color: #3A9F91;
}

/* =========================
   IMAGE PILL
========================= */
.pill {
  width: 92px;
  height: 68px;
  /* border-radius: 999px; */
  overflow: hidden;
  display: inline-flex;
  align-items: center;
  justify-content: center;

  border-radius: 30.36px;
  background: linear-gradient(165deg, rgba(40, 141, 127, 0.00) -42.56%, #28A392 89.21%), #D9D9D9;
}

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

/* =========================
   SUBTEXT
========================= */
.contact-subtext {
  margin-top: 26px;

  color: rgba(19, 19, 19, 0.70);
  text-align: center;

  font-family: Poppins;
  font-size: 18px;
  font-style: normal;
  font-weight: 400;
  line-height: 28px;
}

/* =========================
   HERO ANIMATIONS
========================= */
.slide-left {
  opacity: 0;
  transform: translateX(-100vw);
  /* Start from far left */
  animation: slideLeft 1.5s ease-out forwards;
  /* Smoother, longer ease-out */
}

.slide-right {
  opacity: 0;
  transform: translateX(100vw);
  /* Start from far right */
  animation: slideRight 1.5s ease-out forwards;
}

.fade-in {
  opacity: 0;
  animation: fadeIn 0.8s ease forwards;
}

/* DELAYS */
.delay-1 {
  animation-delay: 0.1s;
}

.delay-2 {
  animation-delay: 0.3s;
}

.delay-3 {
  animation-delay: 0.9s;
}

.delay-4 {
  animation-delay: 0.9s;
}

.delay-5 {
  animation-delay: 0.9s;
}

.delay-6 {
  animation-delay: 1.2s;
}

/* KEYFRAMES */
@keyframes slideLeft {
  to {
    opacity: 1;
    transform: translateX(0);
  }
}

@keyframes slideRight {
  to {
    opacity: 1;
    transform: translateX(0);
  }
}

@keyframes fadeIn {
  to {
    opacity: 1;
  }
}

/* demo */


.demo-section {
  min-height: min(100vh, 760px);
  display: flex;
  align-items: flex-start;
  /* Remove center justify to allow top/left flow */
  /* justify-content: center; */
  padding: 48px 50px 28px;
  /* Align with nav */
  /* background-color: #FFFCF5; */
  /* Ensure only the SVG is used, no gradients */
  background-size: auto;
  overflow: hidden;
}

.demo-container {
  width: 100%;
  max-width: 100%;
  /* Allow full spread */
  position: relative;
  /* Ensure container doesn't block background */
  background: transparent;
}

/* Desktop layout wrapper */
.demo-wrapper {
  position: relative;
  width: 100%;
  max-width: none;
  /* Allow full alignment */
  margin: 0;
  min-height: 520px;
  display: grid;
  grid-template-columns: 0.9fr 1.1fr;
  gap: 80px;
  align-items: center;
}

/* Form panel - Fade in as image reveals */
.form-panel {
  opacity: 0;
  /* transform: translateX(-20px); */
  transition: opacity 1.2s ease, transform 1.2s ease;
  z-index: 2;
  /* Keep form above animated image panel at all times */
}

.form-panel.visible {
  opacity: 1;
  /* transform: translateX(0); */
  transition-delay: 0.5s;
  /* Wait for image to start moving */
}

.form-content {
  background: transparent;
  /* Seamless with section bg */
  padding: 0;
}

.form-header {
  margin-bottom: 40px;
}

.form-title {
  color: #000;
  font-family: Poppins;
  font-size: 48px;
  font-style: normal;
  font-weight: 600;
  line-height: 47px;
  margin-bottom: 16px;
}

.form-description {
  color: #555;
  font-family: Poppins;
  font-size: 16px;
  font-style: normal;
  font-weight: 400;
  line-height: 1.6;
}

.form-fields {
  display: flex;
  flex-direction: column;
  gap: 24px;
  /* More spacing */
}

.form-group {
  display: flex;
  flex-direction: column;
  gap: 8px;
}

.form-label {
  color: #1A1A1A;
  font-family: Poppins;
  font-size: 14px;
  font-weight: 600;
}

.form-label .required {
  color: #F00;
  margin-left: 2px;
}

.form-input,
.form-textarea {
  width: 100%;
  padding: 12px 0;
  border: none;
  border-bottom: 1px solid #D1D1D1;
  /* Lighter border */
  border-radius: 0;
  font-family: Poppins, sans-serif;
  font-size: 14px;
  color: #333;
  background: #FFFFFF;
  background-color: #FFFFFF;
  transition: border-color 0.3s ease;
  outline: none;
  -webkit-appearance: none;
  appearance: none;
}

.form-input::placeholder,
.form-textarea::placeholder {
  color: #999;
  font-size: 14px;
}

.form-input:focus,
.form-textarea:focus {
  border-bottom-color: #3A9F91;
}

.form-textarea {
  min-height: 40px;
  resize: none !important;
}

/* Keep browser autofill visually identical to normal field state */
.form-input:-webkit-autofill,
.form-input:-webkit-autofill:hover,
.form-input:-webkit-autofill:focus,
.form-input:-webkit-autofill:active,
.form-textarea:-webkit-autofill,
.form-textarea:-webkit-autofill:hover,
.form-textarea:-webkit-autofill:focus,
.form-textarea:-webkit-autofill:active {
  -webkit-text-fill-color: #333 !important;
  caret-color: #333;
  background-color: #FFFFFF !important;
  background-image: none !important;
  -webkit-box-shadow: 0 0 0 1000px #FFFFFF inset !important;
  box-shadow: 0 0 0 1000px #FFFFFF inset !important;
  border-bottom: 1px solid #D1D1D1;
  transition: background-color 9999s ease-out, color 9999s ease-out;
}

x .form-input:-webkit-autofill:focus,
.form-textarea:-webkit-autofill:focus {
  border-bottom-color: #3A9F91;
}

.form-input:autofill,
.form-textarea:autofill,
.form-input:-moz-autofill,
.form-textarea:-moz-autofill {
  color: #333 !important;
  background-color: #FFFFFF !important;
  background-image: none !important;
  box-shadow: 0 0 0 1000px #FFFFFF inset !important;
}

.submit-button {
  margin-top: 32px;
  width: auto;
  min-width: 180px;
  padding: 16px 32px;
  background: #3DAEA5;
  /* Teal color */
  border: none;
  border-radius: 8px;
  cursor: pointer;
  transition: all 0.3s ease;
  color: #FFF;
  font-family: Poppins;
  font-size: 16px;
  font-weight: 500;
  display: inline-block;
  align-self: flex-start;
}

.submit-button:hover {
  background: #2E8B84;
}

.submit-button:active {
  transform: scale(0.98);
}

/* Image panel - Curtain Animation REFINED */
.image-panel {
  position: absolute;
  top: 50%;
  right: 0;
  transform: translateY(-50%);
  /* Center vertically */

  width: 100%;
  /* Initially covers full width of container */
  height: 100%;
  /* Match screenshot aspect ratio better, not full bleed */
  border-radius: 24px;
  overflow: hidden;
  z-index: 1;

  /* Smooth Reveal Animation */
  transition: width 1.5s cubic-bezier(0.22, 1, 0.36, 1);
  will-change: width;
  animation: imagePanelAutoShift 1.5s cubic-bezier(0.22, 1, 0.36, 1) 0.2s forwards;
  /* box-shadow: 0 20px 40px rgba(0, 0, 0, 0.1); */
}

.image-panel.shifted {
  width: 50%;
  /* Occupy exactly half (the right column) */
  animation: none;
}

@keyframes imagePanelAutoShift {
  to {
    width: 50%;
  }
}

.image-wrapper {
  width: 100%;
  /* Fits the panel width exactly */
  height: 100%;
  border-radius: 24px;
  overflow: hidden;
}

.demo-image {
  width: 100%;
  height: 100%;
  object-fit: cover;
  /* Prioritize the top-center where the face usually is */
  object-position: center 20%;
}






/* contct  */
/* Contact Section Styles */

.contact-section {
  /* Match Demo Section Background Pattern */
  /* background-color: #FFFCF5; */
  background-size: auto;
  background-position: 0 0;

  margin: 0 auto;
  display: flex;
  justify-content: center;
  /* width: 100%; */

}

.contact-wrapper {
  max-width: 100%;
  min-height: 200px;
  width: 100%;
  padding: 0px 50px 28px 50px;
  /* Align with nav */
}

.contact-grid {
  display: grid;
  gap: 0;
}



.contact-info-item {
  display: flex;
  flex-direction: column;
  gap: 12px;
}

.contact-header {
  display: flex;
  align-items: center;
  gap: 10px;
}

.contact-icon {
  width: 20px;
  height: 20px;
  color: #2d9b94;
  flex-shrink: 0;
}

.contact-title {
  color: #000;
  font-family: Poppins;
  font-size: 24px;
  font-style: normal;
  font-weight: 600;
  line-height: 32px;
}

.contact-info {
  padding-left: 3px;
  display: flex;
  flex-direction: column;
  gap: 6px;

}

.contact-text {

  color: rgba(19, 19, 19, 0.70);

  font-family: Poppins;
  font-size: 16px;
  font-style: normal;
  font-weight: 400;
  line-height: 28px;
}

.contact-text a {
  color: #4a4a4a;
  text-decoration: none;
}

.contact-text a:hover {
  color: #2d9b94;
}

.flag {
  display: inline-block;
  margin-right: 4px;
}

/* Icon SVG Styles */
.icon-phone {
  fill: none;
  stroke: currentColor;
  stroke-width: 2;
  stroke-linecap: round;
  stroke-linejoin: round;
}

.icon-email {
  fill: none;
  stroke: currentColor;
  stroke-width: 2;
  stroke-linecap: round;
  stroke-linejoin: round;
}

.icon-location {
  fill: none;
  stroke: currentColor;
  stroke-width: 2;
  stroke-linecap: round;
  stroke-linejoin: round;
}


/* map  */

/* Section that reserves space */
.contact-map-section {
  width: 100%;
  background: #fff;
}

/* Map container */
.map-wrapper {
  position: relative;
  width: 100%;
  height: 518px;
  margin: 0 auto;
  /* ⬅ centers map */
  overflow: hidden;
}

/* iframe fills wrapper */
.map-wrapper iframe {
  width: 100%;
  height: 100%;
  border: 0;
  position: relative;
  z-index: 1;
  background: #e6ebea;
}

.map-loading {
  position: absolute;
  inset: 0;
  display: flex;
  align-items: center;
  justify-content: center;
  padding: 0 18px;
  color: rgba(19, 19, 19, 0.72);
  font-family: Poppins, sans-serif;
  font-size: 14px;
  line-height: 1.4;
  text-align: center;
  background: rgba(238, 243, 241, 0.92);
  z-index: 2;
  transition: opacity 0.25s ease;
  pointer-events: none;
}

.map-loading.loaded {
  opacity: 0;
  visibility: hidden;
}

.map-loading.slow {
  background: rgba(238, 243, 241, 0.96);
  color: rgba(19, 19, 19, 0.88);
}

/* Click overlay */
.map-click-layer {
  position: absolute;
  inset: 0;
  z-index: 3;
  cursor: pointer;
}

/* Mobile fix */
@media (max-width: 768px) {

  .map-wrapper {
    height: 280px;
    /* border-radius: 12px; */
  }
}

body:has(.contact-page) .desktop-margin {
  margin-top: 24px !important;
}

@media (max-width: 480px) {
  body:has(.contact-page) .desktop-margin {
    margin-top: 16px !important;
  }
}




/* close model  */

/* MODAL OVERLAY */
.modal-overlay {
  position: fixed;
  inset: 0;
  background: rgba(0, 0, 0, 0.55);
  display: flex;
  align-items: center;
  justify-content: center;
  z-index: 9999;
  opacity: 0;
  visibility: hidden;
  transition: all 0.3s ease;
}

/* SHOW STATE */
.modal-overlay.show {
  opacity: 1;
  visibility: visible;
}

/* MODAL CARD */
.modal-card {
  background: #ffffff;
  width: 90%;
  max-width: 520px;
  border-radius: 12px;
  padding: 40px 32px;
  text-align: center;
  position: relative;
  transform: scale(0.9);
  transition: transform 0.3s ease;
}

.modal-overlay.show .modal-card {
  transform: scale(1);
}

/* CLOSE BUTTON */
.modal-close {
  position: absolute;
  top: 14px;
  right: 16px;
  background: none;
  border: none;
  font-size: 22px;
  cursor: pointer;
  color: #666;
  transition: all 0.3s ease;
}

.modal-close:hover {
  color: #000;
  transform: scale(1);
}

/* ICON */
.modal-icon {
  width: 52px;
  height: 52px;
  border-radius: 50%;
  display: flex;
  align-items: center;
  justify-content: center;
  font-size: 26px;
  margin: 0 auto 20px;
}

/* TEXT */
.modal-title {
  color: #101828;
  text-align: center;
  font-family: Poppins;
  font-size: 30px;
  font-style: normal;
  font-weight: 600;
  line-height: 42px;
  padding-bottom: 10px;
  /* 140% */
}

.modal-text {
  margin-bottom: 28px;
  color: rgba(19, 19, 19, 0.70);
  text-align: center;
  font-family: Poppins;
  font-size: 14px;
  font-style: normal;
  font-weight: 500;
  line-height: 21px;
}

/* BUTTON */
.modal-btn {
  border: none;
  font-family: Poppins;
  font-style: normal;
  font-weight: 500;
  line-height: 21px;
  text-decoration: none;
  display: inline-block;
  padding: 12px 28px;
  color: #fff;
  font-size: 16px;
  transition: all .3s;
  position: relative;
  overflow: hidden;
  border-radius: 6px;
  z-index: 1;


  &:after {
    content: '';
    position: absolute;
    bottom: 0;
    left: 0;
    width: 100%;
    height: 100%;
    background-color: #3A9F91;
    /* border-radius: 10rem; */
    z-index: -2;
  }

  &:before {
    content: '';
    position: absolute;
    bottom: 0;
    left: 0;
    width: 0%;
    height: 100%;
    background-color: #297a6f;
    transition: all .3s;
    /* border-radius: 10rem; */
    z-index: -1;
  }

  &:hover {
    color: #fff;

    &:before {
      width: 100%;
    }
  }
}

/* ============================= */
/* 📱 MOBILE MODAL STYLES */
/* ============================= */
@media (max-width: 1025px) {
  .contact-hero {
    padding: 40px 20px;
  }

  .modal-overlay {
    align-items: flex-end;
  }

  .modal-card {
    width: 100%;
    max-width: 100%;
    border-radius: 16px 16px 0 0;
    padding: 32px 24px 36px;
    transform: translateY(100%);
  }

  .modal-overlay.show .modal-card {
    transform: translateY(0);
  }

  .modal-close {
    top: 12px;
    right: 14px;
    font-size: 26px;
  }


  .modal-icon {
    width: 48px;
    height: 48px;
    font-size: 24px;
    margin-bottom: 16px;
  }

  .modal-title {
    font-size: 18px;
    line-height: 1.3;
  }

  .modal-text {
    font-size: 13px;
    line-height: 1.5;
  }

  .modal-btn {
    width: 100%;
    padding: 14px;
    font-size: 15px;
    border-radius: 8px;
  }

  .mobile-sub {
    display: block !important;
  }

  .web-sub {
    display: none !important;
  }

  .contact-page {
    min-height: unset;
    margin-top: 60px;

  }

  .demo-section {
    padding: 40px 20px;
    overflow-x: hidden;
    min-height: unset;
  }

  .demo-wrapper {
    grid-template-columns: 100%;
    gap: 0;
    min-height: auto;
    width: 100%;
    overflow-x: hidden;
  }

  .image-panel {
    display: none;
    /* Keep it simple as per previous mobile design */
  }

  .form-panel {
    position: static;
    opacity: 1;
    transform: none;
    /* Reset transform */
    transition: none;
  }

  .form-content {
    padding: unset !important;
    border-radius: 16px;
  }

  .form-title {
    font-size: 2rem;
  }

  .form-description {
    font-size: 0.95rem;
  }

  .form-input,
  .form-textarea {
    /* padding: 12px 16px; */
    font-size: 0.9rem;
  }

  .submit-button {
    padding: 14px 28px;
    font-size: 0.95rem;
    width: 100%;
  }

  .contact-grid {
    grid-template-columns: repeat(2, 2fr) !important;
    gap: 0px 40px !important;
  }
}

/* Mobile Layout (≤767px) */

.contact-grid {
  grid-template-columns: 1fr;
  grid-template-areas:
    "sales"
    "divider1"
    "email-hr"
    "divider2"
    "address";
}

.contact-section {
  padding: 0px 16px 15px 16px;
  min-height: auto;
}

.contact-info-item.sales {
  /* grid-area: sales; */
  padding: 20px 0;
}

.contact-info-item.address {
  /* grid-area: address; */
  padding: 20px 0;
}

.contact-info-item.email {
  padding-bottom: 0px;
}

.contact-info-item.hr {
  padding: 20px 0;
  padding-bottom: 0px;
}

.email-hr-row {
  /* grid-area: email-hr; */
  display: grid;
  grid-template-columns: auto;
  gap: 0;
}

.contact-info-item.email {
  padding-right: 12px;
  padding-top: 20px;
}

.contact-info-item.hr {
  padding-left: 0px;
  padding-bottom: 20px;
}

.divider {
  height: 1px;
  background-color: #e0ddd5;
  margin: 0 -16px;
}

.contact-info {

  padding-left: 30px;
}

.contact-title {
  font-size: 18px !important;
}

.contact-text a {
  font-size: 16px !important
}

.contact-text {
  font-size: 16px;
  word-break: break-word;
}


/* Tablet Layout (768px – 1023px) */
@media (min-width: 768px) and (max-width: 1023px) {
  .contact-grid {

    gap: 24px 32px;
  }

  .contact-info-item {
    padding: 0;
  }

  .divider {
    display: none;
  }

  .email-hr-row {
    display: contents;
  }


}

/* Desktop Layout (≥1024px) */
@media (min-width: 1024px) {
  .contact-grid {
    grid-template-columns: repeat(4, 1fr) !important;
    gap: 48px;
  }

  .contact-info-item {
    padding: 0;
  }

  .divider {
    display: none;
  }

  .email-hr-row {
    display: contents;
  }
}

/* Mobile styles */
@media (max-width: 968px) {
  .mobile-sub {
    display: block !important;
  }

  .web-sub {
    display: none !important;
  }

  .contact-page {
    min-height: unset;
    margin-top: 60px;

  }

  .demo-section {
    padding: 40px 20px;
    overflow-x: hidden;
    min-height: unset;
  }

  .demo-wrapper {
    grid-template-columns: 100%;
    gap: 0;
    min-height: auto;
    width: 100%;
    overflow-x: hidden;
  }

  .image-panel {
    display: none;
    /* Keep it simple as per previous mobile design */
  }

  .form-panel {
    position: static;
    opacity: 1;
    transform: none;
    /* Reset transform */
    transition: none;
  }

  .form-content {
    padding: unset !important;
    border-radius: 16px;
  }

  .form-title {
    font-size: 2rem;
  }

  .form-description {
    font-size: 0.95rem;
  }

  .form-input,
  .form-textarea {
    /* padding: 12px 16px; */
    font-size: 0.9rem;
  }

  .submit-button {
    padding: 14px 28px;
    font-size: 0.95rem;
    width: 100%;
  }
}

@media (max-width: 480px) {
  .form-title {
    font-size: 1.75rem;
  }

}




/* =========================
   RESPONSIVE
========================= */
@media (max-width: 968px) {
  .form-container {
    grid-template-columns: 1fr;
    gap: 40px;
  }

  .form-image-wrapper {
    display: none;
  }

  .form-content {
    opacity: 1;
    transform: translateX(0);
    animation: none;
  }

  .form-title {
    font-size: 32px;
  }

  .info-container {
    grid-template-columns: 1fr;
  }
}

@media (max-width: 768px) {


  .contact-title-hero {
    font-size: 24px;
    gap: 10px;
    line-height: 30px;
  }

  .pill {
    width: 54px;
    height: 34px;
  }

  .contact-subtext {
    font-size: 14px;
    line-height: 22px;
    margin-top: 20px;
  }

  .form-section {
    padding: 60px 20px;
  }

  .form-title {
    font-size: 28px;
  }

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

}

@media (max-width: 480px) {
  .contact-title-hero {
    font-size: 24px;
    gap: 8px;
    line-height: 65px;
  }


  .contact-title-hero .bold {
    line-height: 8px;
  }

  .contact-title-hero.secondary {
    margin-top: -13px;

  }

  .pill {
    width: 44px;
    height: 28px;
  }

  .form-title {
    font-size: 24px;
  }

  .submit-btn {
    width: 100%;
  }
}


@media (max-width: 768px) {
  .contact-wrapper {
    padding: 0px 0px 0px 0px;
  }
}


@media (max-width: 578px) {
  .contact-hero {
    padding: 20px 20px;
  }

  .form-title {
    margin-bottom: 4px;
  }

  .contact-grid {
    grid-template-columns: repeat(1, 2fr) !important;
    gap: 0px 40px !important;
  }
}

.contact-grid {
  display: flex;
  flex-wrap: wrap;
  gap: 24px;
}

.contact-grid {
  display: grid;
  grid-template-columns: repeat(4, 1fr);
  gap: 24px;
}

@media (min-width: 1024px) and (max-width: 1280px) {
  .contact-grid {
    display: grid;
    grid-template-columns: repeat(2, 2fr) !important;
    gap: 24px;
  }

}

/* =========================
   FINAL CONTACT LAYOUT FIX
   iPad Mini and above
========================= */
@media (min-width: 768px) {
  .demo-section {
    min-height: auto !important;
    align-items: flex-start !important;
    padding: 70px 50px 70px !important
  }

  .demo-wrapper {
    min-height: auto !important;
    gap: 40px !important;
    align-items: start !important;
  }

  .contact-section {
    padding: 0 !important;
    min-height: auto !important;
  }

  .contact-wrapper {
    padding: 0 50px 18px !important;
    min-height: auto !important;
  }

  .contact-grid {
    display: grid !important;
    gap: 20px 32px !important;
    align-items: start !important;
  }

  .contact-map-section {
    margin-top: 0 !important;
  }

  .map-wrapper {
    height: clamp(220px, 28vw, 420px) !important;
  }
}

@media (min-width: 768px) and (max-width: 1023px) {
  .contact-grid {
    grid-template-columns: repeat(2, minmax(0, 1fr)) !important;
  }
}

@media (min-width: 1024px) and (max-width: 1439px) {
  .contact-grid {
    grid-template-columns: repeat(4, minmax(0, 1fr)) !important;
  }
}

@media (min-width: 1440px) {
  .contact-grid {
    grid-template-columns: repeat(4, minmax(0, 1fr)) !important;
    gap: 18px 36px !important;
  }


}

/* Hero spacing consistency across screen sizes */
.contact-page {
  padding: 0;
}

.contact-hero {
  padding-top: clamp(16px, 2.2vw, 28px);
  padding-bottom: clamp(16px, 2.2vw, 28px);
}

/* Mobile + Tablet hero spacing + heading rhythm fix (iPhone SE to iPad Pro) */
@media (max-width: 1024px) {
  .contact-hero {
    padding: 30px 20px;
  }

  .contact-title-hero {
    margin: 0;
    line-height: 1.15;
    column-gap: 10px;
    row-gap: 10px;
  }

  .contact-title-hero.secondary {
    margin-top: 10px;
    margin-bottom: 0;
  }

  .contact-title-hero .bold {
    line-height: inherit;
  }

  .contact-subtext {
    margin: 16px 0 0;
    padding-bottom: 0;
  }
}

/* Desktop/Laptop/Large screens: increase only top hero space */
@media (min-width: 1025px) {
  .contact-hero {
    padding-top: clamp(40px, 3.6vw, 72px);
  }
}