/* =========================================================
   CONTACT PAGE
   UVC CONTRACTING LLC
========================================================= */


/* =========================================================
   CONTACT HERO
========================================================= */

.contact-hero {
  position: relative;

  overflow: clip;

  padding:
    clamp(68px, 6.5vw, 96px)
    0;

  background:
    radial-gradient(
      circle at 8% 15%,
      rgba(137, 198, 232, 0.12),
      transparent 28%
    ),
    linear-gradient(
      180deg,
      #FBFDFE 0%,
      #F1F6F8 100%
    );
}


.contact-hero-grid {
  position: absolute;

  inset: 0;

  pointer-events: none;

  opacity: 0.45;

  background-image:
    linear-gradient(
      rgba(90, 140, 163, 0.055) 1px,
      transparent 1px
    ),
    linear-gradient(
      90deg,
      rgba(90, 140, 163, 0.055) 1px,
      transparent 1px
    );

  background-size:
    54px 54px;

  mask-image:
    linear-gradient(
      to right,
      black,
      transparent 82%
    );
}


.contact-hero-layout {
  position: relative;

  z-index: 2;

  display: grid;

  grid-template-columns:
    minmax(0, 1.12fr)
    minmax(340px, 0.68fr);

  align-items: center;

  gap:
    clamp(
      55px,
      7vw,
      105px
    );
}


/* =========================================================
   CONTENT
========================================================= */

.contact-hero-content {
  max-width: 760px;
}


.contact-hero-kicker {
  display: flex;

  align-items: center;

  gap: 12px;

  margin:
    0
    0
    18px;

  color:
    var(--uvc-deep-blue);

  font-size: 0.72rem;

  font-weight: 800;

  letter-spacing: 0.12em;

  text-transform: uppercase;
}


.contact-hero-kicker::before {
  content: "";

  width: 34px;
  height: 2px;

  background:
    linear-gradient(
      90deg,
      var(--uvc-deep-blue),
      var(--uvc-light-blue)
    );
}


.contact-hero h1 {
  max-width: 760px;

  margin:
    0
    0
    22px;

  color:
    var(--uvc-dark);

  font-size:
    clamp(
      2.8rem,
      4.1vw,
      4.4rem
    );

  line-height: 1.03;

  letter-spacing:
    -0.044em;

  font-weight: 780;
}


.contact-hero h1 span {
  display: block;

  color:
    var(--uvc-primary);
}


.contact-hero-intro {
  max-width: 630px;

  margin:
    0
    0
    31px;

  color:
    var(--uvc-text);

  font-size:
    clamp(
      1rem,
      1.1vw,
      1.06rem
    );

  line-height: 1.75;
}


/* =========================================================
   CONTACT META
========================================================= */

.contact-hero-meta {
  display: flex;

  align-items: center;

  flex-wrap: wrap;

  gap:
    12px;
}


.contact-hero-meta > a {
  min-width: 210px;

  padding:
    12px
    15px;

  border:
    1px solid
    rgba(90, 140, 163, 0.15);

  border-radius: 7px;

  background:
    rgba(255, 255, 255, 0.68);

  text-decoration: none;

  transition:
    border-color 0.25s ease,
    background-color 0.25s ease,
    transform 0.25s ease;
}


.contact-hero-meta > a:hover {
  transform:
    translateY(-2px);

  border-color:
    rgba(90, 140, 163, 0.27);

  background:
    #FFFFFF;
}


.contact-hero-meta small {
  display: block;

  margin-bottom: 4px;

  color:
    var(--uvc-primary);

  font-size:
    0.58rem;

  font-weight: 800;

  letter-spacing: 0.09em;
}


.contact-hero-meta strong {
  display: block;

  color:
    var(--uvc-dark);

  font-size:
    0.87rem;

  font-weight: 700;
}


/* =========================================================
   HERO PANEL
========================================================= */

.contact-hero-panel {
  overflow: hidden;

  border:
    1px solid
    rgba(90, 140, 163, 0.17);

  border-radius: 15px;

  background:
    rgba(255, 255, 255, 0.78);

  box-shadow:
    0 24px 55px
    rgba(24, 35, 41, 0.09);

  backdrop-filter:
    blur(10px);
}


.contact-hero-panel-head {
  display: flex;

  align-items: center;

  gap: 15px;

  padding:
    20px
    21px;

  border-bottom:
    1px solid
    rgba(90, 140, 163, 0.12);
}


.contact-hero-panel-head > span {
  color:
    rgba(90, 140, 163, 0.18);

  font-size: 2.8rem;

  line-height: 1;

  font-weight: 800;
}


.contact-hero-panel-head small {
  display: block;

  margin-bottom: 3px;

  color:
    var(--uvc-primary);

  font-size:
    0.59rem;

  font-weight: 800;

  letter-spacing: 0.09em;
}


.contact-hero-panel-head strong {
  color:
    var(--uvc-dark);

  font-size:
    0.90rem;

  font-weight: 700;
}


.contact-hero-panel-list {
  display: grid;
}


.contact-hero-panel-list > div {
  display: grid;

  grid-template-columns:
    32px
    1fr;

  align-items: center;

  gap: 10px;

  min-height: 52px;

  padding:
    10px
    20px;

  border-bottom:
    1px solid
    rgba(90, 140, 163, 0.09);
}


.contact-hero-panel-list span {
  color:
    var(--uvc-primary);

  font-size:
    0.64rem;

  font-weight: 800;
}


.contact-hero-panel-list p {
  margin: 0;

  color:
    #52626A;

  font-size:
    0.82rem;

  font-weight: 650;
}


.contact-hero-panel-link {
  display: flex;

  justify-content: space-between;

  padding:
    17px
    20px;
}


/* =========================================================
   TABLET
========================================================= */

@media (max-width: 900px) {

  .contact-hero-layout {
    grid-template-columns:
      1fr;

    gap: 48px;
  }


  .contact-hero-panel {
    max-width: 650px;
  }

}


/* =========================================================
   MOBILE
========================================================= */

@media (max-width: 600px) {

  .contact-hero {
    padding:
      54px
      0
      64px;
  }


  .contact-hero h1 {
    font-size:
      clamp(
        2.4rem,
        10.5vw,
        3.25rem
      );
  }


  .contact-hero h1 span {
    display: inline;
  }


  .contact-hero h1 span::before {
    content: " ";
  }


  .contact-hero-meta {
    display: grid;

    grid-template-columns:
      1fr;
  }


  .contact-hero-meta > a {
    min-width: 0;
  }

}

/* =========================================================
   PROJECT ENQUIRY
========================================================= */

.contact-enquiry {
  position: relative;

  overflow: clip;

  scroll-margin-top:
    calc(
      var(--header-height, 88px) + 20px
    );

  padding:
    clamp(82px, 7.5vw, 115px)
    0;

  background:
    #FFFFFF;
}


/* =========================================================
   LAYOUT
========================================================= */

.contact-enquiry-layout {
  display: grid;

  grid-template-columns:
    minmax(0, 1.35fr)
    minmax(300px, 0.55fr);

  align-items: start;

  gap:
    clamp(
      55px,
      7vw,
      100px
    );
}


/* =========================================================
   FORM HEADING
========================================================= */

.contact-form-head {
  max-width:
    760px;

  margin-bottom:
    38px;
}


.contact-form-kicker {
  display: flex;

  align-items: center;

  gap: 11px;

  margin:
    0
    0
    16px;

  color:
    var(--uvc-deep-blue);

  font-size:
    0.70rem;

  font-weight:
    800;

  letter-spacing:
    0.11em;

  text-transform:
    uppercase;
}


.contact-form-kicker::before {
  content: "";

  width: 32px;
  height: 2px;

  flex-shrink: 0;

  background:
    linear-gradient(
      90deg,
      var(--uvc-deep-blue),
      var(--uvc-light-blue)
    );
}


.contact-form-head h2 {
  margin:
    0
    0
    17px;

  color:
    var(--uvc-dark);

  font-size:
    clamp(
      2.45rem,
      3.7vw,
      3.9rem
    );

  line-height:
    1.04;

  letter-spacing:
    -0.042em;

  font-weight:
    760;
}


.contact-form-head h2 span {
  color:
    var(--uvc-primary);
}


.contact-form-head > p:last-child {
  max-width:
    650px;

  margin: 0;

  color:
    var(--uvc-text);

  font-size:
    0.95rem;

  line-height:
    1.72;
}


/* =========================================================
   FORM STATUS
========================================================= */

.contact-form-status {
  margin-bottom: 20px;

  padding:
    13px
    15px;

  border:
    1px solid
    rgba(90, 140, 163, 0.18);

  border-radius:
    7px;

  font-size:
    0.84rem;

  line-height:
    1.55;
}


.contact-form-status.is-success {
  color:
    #315E4A;

  border-color:
    rgba(49, 94, 74, 0.22);

  background:
    #F0F8F4;
}


.contact-form-status.is-error {
  color:
    #7B4141;

  border-color:
    rgba(123, 65, 65, 0.20);

  background:
    #FCF3F3;
}

/* =========================================================
   FORM
========================================================= */

.project-enquiry-form {
  padding:
    clamp(25px, 3vw, 36px);

  border:
    1px solid
    rgba(90, 140, 163, 0.16);

  border-radius:
    14px;

  background:
    linear-gradient(
      145deg,
      #FFFFFF,
      #FAFCFD
    );

  box-shadow:
    0 20px 48px
    rgba(24, 35, 41, 0.055);
}


.form-grid {
  display: grid;

  grid-template-columns:
    repeat(2, minmax(0, 1fr));

  gap:
    22px
    18px;
}


.form-field {
  display: grid;

  gap:
    8px;
}


.form-field-full {
  grid-column:
    1 / -1;
}


/* =========================================================
   LABELS
========================================================= */

.form-field label {
  color:
    #34454D;

  font-size:
    0.78rem;

  font-weight:
    750;
}


.form-field label > span {
  color:
    var(--uvc-primary);
}


.form-field label small {
  margin-left:
    5px;

  color:
    #96A3A9;

  font-size:
    0.66rem;

  font-weight:
    600;
}


/* =========================================================
   INPUTS
========================================================= */

.form-field input,
.form-field select,
.form-field textarea {
  width: 100%;

  min-height:
    49px;

  padding:
    12px
    13px;

  border:
    1px solid
    rgba(90, 140, 163, 0.20);

  border-radius:
    6px;

  outline:
    none;

  color:
    var(--uvc-dark);

  background:
    #FFFFFF;

  font: inherit;

  font-size:
    0.88rem;

  transition:
    border-color 0.25s ease,
    box-shadow 0.25s ease,
    background-color 0.25s ease;
}


.form-field textarea {
  min-height:
    145px;

  resize:
    vertical;

  line-height:
    1.6;
}


.form-field input::placeholder,
.form-field textarea::placeholder {
  color:
    #A0ABB0;
}


.form-field input:focus,
.form-field select:focus,
.form-field textarea:focus {
  border-color:
    var(--uvc-primary);

  box-shadow:
    0 0 0 3px
    rgba(96, 144, 167, 0.10);

  background:
    #FFFFFF;
}


/* =========================================================
   FORM FOOTER
========================================================= */

.contact-form-footer {
  display: flex;

  align-items: center;

  justify-content: space-between;

  gap:
    25px;

  margin-top:
    28px;

  padding-top:
    24px;

  border-top:
    1px solid
    rgba(90, 140, 163, 0.13);
}


.contact-form-footer p {
  margin: 0;

  color:
    #8A979D;

  font-size:
    0.72rem;
}


.contact-form-footer p span {
  color:
    var(--uvc-primary);
}


.contact-submit {
  border: 0;

  cursor: pointer;
}


/* =========================================================
   HONEYPOT
========================================================= */

.form-honeypot {
  position: absolute !important;

  width: 1px;
  height: 1px;

  overflow: hidden;

  clip:
    rect(0 0 0 0);

  clip-path:
    inset(50%);

  white-space:
    nowrap;
}


/* =========================================================
   RIGHT SIDE
========================================================= */

.contact-enquiry-side {
  position: sticky;

  top:
    calc(
      var(--header-height, 88px) + 30px
    );

  display: grid;

  gap:
    16px;

  align-self: start;
}


/* =========================================================
   CONTACT CARD
========================================================= */

.contact-side-card {
  position: relative;

  overflow: hidden;

  padding:
    28px;

  border-radius:
    13px;

  color:
    #FFFFFF;

  background:
    linear-gradient(
      145deg,
      #182329,
      #233943
    );
}


.contact-side-card::before {
  content: "";

  position: absolute;

  width: 180px;
  height: 180px;

  top: -100px;
  right: -90px;

  border:
    1px solid
    rgba(137, 198, 232, 0.14);

  border-radius:
    50%;

  pointer-events:
    none;
}


.contact-side-kicker {
  margin:
    0
    0
    13px;

  color:
    var(--uvc-light-blue);

  font-size:
    0.64rem;

  font-weight:
    800;

  letter-spacing:
    0.10em;

  text-transform:
    uppercase;
}


.contact-side-card h3 {
  margin:
    0
    0
    11px;

  color:
    #FFFFFF;

  font-size:
    1.45rem;

  line-height:
    1.25;

  font-weight:
    750;
}


.contact-side-card > p {
  margin:
    0
    0
    25px;

  color:
    #B6C4CA;

  font-size:
    0.86rem;

  line-height:
    1.65;
}


/* =========================================================
   CONTACT DETAILS
========================================================= */

.contact-side-details {
  display: grid;

  gap:
    9px;
}


.contact-side-details a {
  display: block;

  padding:
    12px
    13px;

  border:
    1px solid
    rgba(255, 255, 255, 0.09);

  border-radius:
    6px;

  background:
    rgba(255, 255, 255, 0.035);

  text-decoration:
    none;

  transition:
    border-color 0.25s ease,
    background-color 0.25s ease;
}


.contact-side-details a:hover {
  border-color:
    rgba(137, 198, 232, 0.26);

  background:
    rgba(137, 198, 232, 0.07);
}


.contact-side-details small {
  display: block;

  margin-bottom:
    3px;

  color:
    #8198A2;

  font-size:
    0.56rem;

  font-weight:
    800;

  letter-spacing:
    0.09em;
}


.contact-side-details strong {
  color:
    #FFFFFF;

  font-size:
    0.83rem;

  font-weight:
    700;
}


/* =========================================================
   HELPFUL INFORMATION
========================================================= */

.contact-project-info {
  padding:
    26px;

  border:
    1px solid
    rgba(90, 140, 163, 0.15);

  border-radius:
    12px;

  background:
    #F5F9FB;
}


.contact-project-info > small {
  display: block;

  margin-bottom:
    8px;

  color:
    var(--uvc-primary);

  font-size:
    0.59rem;

  font-weight:
    800;

  letter-spacing:
    0.09em;
}


.contact-project-info h3 {
  margin:
    0
    0
    18px;

  color:
    var(--uvc-dark);

  font-size:
    1.20rem;

  font-weight:
    750;
}


.contact-project-info ul {
  display: grid;

  gap:
    10px;

  margin:
    0
    0
    20px;

  padding:
    0;

  list-style:
    none;
}


.contact-project-info li {
  position: relative;

  padding-left:
    17px;

  color:
    #586970;

  font-size:
    0.82rem;

  line-height:
    1.5;
}


.contact-project-info li::before {
  content: "";

  position: absolute;

  left: 0;
  top: 0.6em;

  width: 5px;
  height: 5px;

  border-radius:
    50%;

  background:
    var(--uvc-light-blue);
}


.contact-project-info > p {
  margin: 0;

  padding-top:
    16px;

  border-top:
    1px solid
    rgba(90, 140, 163, 0.13);

  color:
    #75848B;

  font-size:
    0.78rem;

  line-height:
    1.6;
}


/* =========================================================
   TABLET
========================================================= */

@media (max-width: 900px) {

  .contact-enquiry-layout {
    grid-template-columns:
      1fr;

    gap:
      50px;
  }


  .contact-enquiry-side {
    position:
      static;

    grid-template-columns:
      repeat(2, 1fr);
  }

}


/* =========================================================
   MOBILE
========================================================= */

@media (max-width: 600px) {

  .contact-enquiry {
    padding:
      70px
      0;
  }


  .contact-form-head h2 {
    font-size:
      clamp(
        2.25rem,
        10vw,
        3.1rem
      );
  }


  .project-enquiry-form {
    padding:
      22px
      18px;
  }


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


  .form-field-full {
    grid-column:
      auto;
  }


  .contact-form-footer {
    align-items:
      flex-start;

    flex-direction:
      column;

    gap:
      15px;
  }


  .contact-submit {
    width:
      100%;

    justify-content:
      center;
  }


  .contact-enquiry-side {
    grid-template-columns:
      1fr;
  }

}

/* =========================================================
   DUBAI OFFICE
========================================================= */

.contact-office {
  position: relative;

  overflow: clip;

  padding:
    clamp(82px, 7.5vw, 115px)
    0;

  color:
    #FFFFFF;

  background:
    linear-gradient(
      135deg,
      #182329 0%,
      #213640 100%
    );
}


/* =========================================================
   BACKGROUND GRID
========================================================= */

.contact-office-grid {
  position: absolute;

  inset: 0;

  pointer-events: none;

  opacity: 0.18;

  background-image:
    linear-gradient(
      rgba(137, 198, 232, 0.10) 1px,
      transparent 1px
    ),
    linear-gradient(
      90deg,
      rgba(137, 198, 232, 0.10) 1px,
      transparent 1px
    );

  background-size:
    58px 58px;

  mask-image:
    linear-gradient(
      to right,
      transparent,
      black 15%,
      black 85%,
      transparent
    );
}


/* =========================================================
   LAYOUT
========================================================= */

.contact-office-layout {
  position: relative;

  z-index: 2;

  display: grid;

  grid-template-columns:
    minmax(0, 0.95fr)
    minmax(380px, 0.75fr);

  align-items: center;

  gap:
    clamp(
      60px,
      8vw,
      120px
    );
}


/* =========================================================
   LEFT CONTENT
========================================================= */

.contact-office-content {
  max-width:
    680px;
}


.contact-office-kicker {
  display: flex;

  align-items: center;

  gap: 11px;

  margin:
    0
    0
    17px;

  color:
    var(--uvc-light-blue);

  font-size:
    0.70rem;

  font-weight:
    800;

  letter-spacing:
    0.11em;

  text-transform:
    uppercase;
}


.contact-office-kicker::before {
  content: "";

  width: 32px;
  height: 2px;

  flex-shrink: 0;

  background:
    var(--uvc-light-blue);
}


.contact-office-content h2 {
  max-width:
    650px;

  margin:
    0
    0
    20px;

  color:
    #FFFFFF;

  font-size:
    clamp(
      2.45rem,
      3.8vw,
      4rem
    );

  line-height:
    1.04;

  letter-spacing:
    -0.042em;

  font-weight:
    760;
}


.contact-office-content h2 span {
  display: block;

  color:
    var(--uvc-light-blue);
}


.contact-office-intro {
  max-width:
    590px;

  margin:
    0
    0
    38px;

  color:
    #B8C6CC;

  font-size:
    0.95rem;

  line-height:
    1.75;
}


/* =========================================================
   OFFICE DETAILS
========================================================= */

.contact-office-details {
  display: grid;

  border-top:
    1px solid
    rgba(255, 255, 255, 0.10);
}


.contact-office-detail {
  display: grid;

  grid-template-columns:
    45px
    1fr;

  gap:
    16px;

  padding:
    19px
    0;

  border-bottom:
    1px solid
    rgba(255, 255, 255, 0.10);
}


.contact-office-number {
  padding-top:
    3px;

  color:
    var(--uvc-light-blue);

  font-size:
    0.65rem;

  font-weight:
    800;
}


.contact-office-detail small {
  display: block;

  margin-bottom:
    5px;

  color:
    #7F959F;

  font-size:
    0.58rem;

  font-weight:
    800;

  letter-spacing:
    0.09em;
}


.contact-office-detail strong,
.contact-office-detail a {
  display: block;

  color:
    #FFFFFF;

  font-size:
    0.93rem;

  font-weight:
    700;

  text-decoration:
    none;
}


.contact-office-detail a {
  width:
    fit-content;

  transition:
    color 0.25s ease;
}


.contact-office-detail a:hover {
  color:
    var(--uvc-light-blue);
}


.contact-office-detail p {
  margin:
    5px
    0
    0;

  color:
    #A6B6BD;

  font-size:
    0.82rem;

  line-height:
    1.55;
}


/* =========================================================
   LOCATION CARD
========================================================= */

.contact-location-card {
  overflow: hidden;

  border:
    1px solid
    rgba(255, 255, 255, 0.11);

  border-radius:
    14px;

  background:
    rgba(255, 255, 255, 0.035);

  box-shadow:
    0 25px 60px
    rgba(0, 0, 0, 0.16);
}


/* =========================================================
   GOOGLE MAP
========================================================= */

.contact-location-map {
  position: relative;

  width: 100%;
  height: 330px;

  overflow: hidden;

  border-bottom:
    1px solid
    rgba(255, 255, 255, 0.09);

  background:
    #E7ECEF;
}


.contact-location-map iframe {
  display: block;

  width: 100%;
  height: 100%;

  border: 0;
}

/* =========================================================
   OFFICE LABEL ON MAP
========================================================= */

.contact-map-office-label {
  position: absolute;

  left: 18px;
  bottom: 18px;

  z-index: 3;

  display: flex;

  align-items: flex-start;

  gap: 11px;

  max-width: 330px;

  padding:
    12px
    14px;

  border:
    1px solid
    rgba(90, 140, 163, 0.18);

  border-radius: 8px;

  background:
    rgba(255, 255, 255, 0.96);

  box-shadow:
    0 10px 28px
    rgba(24, 35, 41, 0.18);

  backdrop-filter:
    blur(8px);

  pointer-events: none;
}


.contact-map-pin {
  width: 10px;
  height: 10px;

  margin-top: 5px;

  flex-shrink: 0;

  border-radius: 50%;

  background:
    var(--uvc-primary);

  box-shadow:
    0 0 0 5px
    rgba(96, 144, 167, 0.12);
}


.contact-map-office-label small {
  display: block;

  margin-bottom: 3px;

  color:
    var(--uvc-primary);

  font-size: 0.56rem;

  font-weight: 800;

  letter-spacing: 0.09em;
}


.contact-map-office-label strong {
  display: block;

  margin-bottom: 3px;

  color:
    var(--uvc-dark);

  font-size: 0.78rem;

  font-weight: 750;
}


.contact-map-office-label p {
  margin: 0;

  color:
    #6B797F;

  font-size: 0.68rem;

  line-height: 1.45;
}

/* =========================================================
   LOCATION INFO
========================================================= */

.contact-location-info {
  padding:
    22px
    23px
    24px;
}


.contact-location-info small {
  display: block;

  margin-bottom:
    4px;

  color:
    var(--uvc-light-blue);

  font-size:
    0.57rem;

  font-weight:
    800;

  letter-spacing:
    0.09em;
}


.contact-location-info h3 {
  margin:
    0
    0
    5px;

  color:
    #FFFFFF;

  font-size:
    1.05rem;

  font-weight:
    750;
}


.contact-location-info p {
  max-width:
    260px;

  margin: 0;

  color:
    #97AAB2;

  font-size:
    0.76rem;

  line-height:
    1.55;
}





/* =========================================================
   TABLET
========================================================= */

@media (max-width: 900px) {

  .contact-office-layout {
    grid-template-columns:
      1fr;

    gap:
      50px;
  }


  .contact-location-card {
    max-width:
      700px;
  }

}


/* =========================================================
   MOBILE
========================================================= */

@media (max-width: 600px) {

  .contact-office {
    padding:
      70px
      0;
  }


  .contact-office-content h2 {
    font-size:
      clamp(
        2.25rem,
        10vw,
        3.1rem
      );
  }


  .contact-location-visual {
    min-height:
      230px;
  }


  .contact-location-info {
    align-items:
      flex-start;

    flex-direction:
      column;

    gap:
      20px;
  }

    .contact-map-office-label {
    left: 10px;
    right: 10px;
    bottom: 10px;

    max-width: none;

    padding:
        10px
        11px;
    }
  

}

/* =========================================================
   CONTACT FINAL CTA
========================================================= */

.contact-final {
  position: relative;

  overflow: clip;

  padding:
    clamp(72px, 6.5vw, 96px)
    0;

  background:
    linear-gradient(
      180deg,
      #FFFFFF 0%,
      #F4F8FA 100%
    );
}


/* Decorative technical line */
.contact-final::before {
  content: "";

  position: absolute;

  top: 0;
  left: 50%;

  width:
    min(
      calc(100% - 48px),
      var(--container-width)
    );

  height: 1px;

  transform:
    translateX(-50%);

  background:
    linear-gradient(
      90deg,
      transparent,
      rgba(90, 140, 163, 0.18) 15%,
      rgba(90, 140, 163, 0.18) 85%,
      transparent
    );
}


/* =========================================================
   LAYOUT
========================================================= */

.contact-final-inner {
  position: relative;

  z-index: 2;

  display: grid;

  grid-template-columns:
    minmax(0, 1.15fr)
    minmax(280px, 0.45fr);

  align-items: center;

  gap:
    clamp(
      50px,
      7vw,
      100px
    );
}


/* =========================================================
   CONTENT
========================================================= */

.contact-final-content {
  max-width:
    760px;
}


.contact-final-kicker {
  margin:
    0
    0
    14px;

  color:
    var(--uvc-deep-blue);

  font-size:
    0.69rem;

  font-weight:
    800;

  letter-spacing:
    0.11em;

  text-transform:
    uppercase;
}


.contact-final-content h2 {
  max-width:
    760px;

  margin:
    0
    0
    19px;

  color:
    var(--uvc-dark);

  font-size:
    clamp(
      2.45rem,
      3.8vw,
      4rem
    );

  line-height:
    1.04;

  letter-spacing:
    -0.042em;

  font-weight:
    760;
}


.contact-final-content h2 span {
  display: block;

  color:
    var(--uvc-primary);
}


.contact-final-content > p {
  max-width:
    640px;

  margin: 0;

  color:
    var(--uvc-text);

  font-size:
    0.95rem;

  line-height:
    1.72;
}


/* =========================================================
   ACTIONS
========================================================= */

.contact-final-actions {
  display: flex;

  flex-direction:
    column;

  align-items:
    flex-start;

  gap:
    20px;
}


.contact-final-actions .btn {
  min-width:
    190px;
}



/* =========================================================
   TABLET
========================================================= */

@media (max-width: 800px) {

  .contact-final-inner {
    grid-template-columns:
      1fr;

    gap:
      35px;
  }


  .contact-final-actions {
    flex-direction:
      row;

    align-items:
      center;

    flex-wrap:
      wrap;

    gap:
      25px;
  }

}


/* =========================================================
   MOBILE
========================================================= */

@media (max-width: 600px) {

  .contact-final {
    padding:
      64px
      0;
  }


  .contact-final-content h2 {
    font-size:
      clamp(
        2.25rem,
        10vw,
        3.1rem
      );
  }


  .contact-final-actions {
    flex-direction:
      column;

    align-items:
      flex-start;

    gap:
      20px;
  }


  .contact-final-actions .btn {
    width:
      100%;

    justify-content:
      center;
  }

}

/* =========================================================
   UVC CONTACT PAGE
   DESIGN SYSTEM REFINEMENT
   2026
========================================================= */


/* =========================================================
   CONTACT HERO
   MATCH HOME / ABOUT / SERVICES SYSTEM
========================================================= */

.contact-hero {
  padding:
    clamp(
      58px,
      5.5vw,
      82px
    )
    0;
}


.contact-hero-layout {
  grid-template-columns:
    minmax(0, 1.16fr)
    minmax(340px, 0.64fr);

  gap:
    clamp(
      48px,
      6vw,
      82px
    );
}


.contact-hero-content {
  max-width:
    800px;
}


.contact-hero-kicker {
  font-size:
    var(--section-kicker-size, 0.80rem);
}


.contact-hero h1 {
  max-width:
    800px;

  font-size:
    clamp(
      2.8rem,
      3.8vw,
      4.1rem
    );
}


.contact-hero-intro {
  max-width:
    680px;

  margin-bottom:
    27px;

  font-size:
    1rem;

  line-height:
    1.72;
}


/* Contact meta */
.contact-hero-meta > a {
  min-width:
    205px;

  padding:
    11px
    14px;
}


.contact-hero-meta strong {
  font-size:
    0.90rem;
}


/* Right hero panel */
.contact-hero-panel-list > div {
  min-height:
    49px;

  padding:
    9px
    19px;
}


.contact-hero-panel-list p {
  font-size:
    0.85rem;
}


/* =========================================================
   01. PROJECT ENQUIRY
   BETTER WIDTH + REDUCED EMPTY SPACE
========================================================= */

.contact-enquiry {
  padding:
    var(--section-space, clamp(74px, 6.2vw, 100px))
    0;
}


.contact-enquiry-layout {
  grid-template-columns:
    minmax(0, 1.30fr)
    minmax(320px, 0.58fr);

  gap:
    clamp(
      48px,
      5.5vw,
      78px
    );
}


/* =========================================================
   FORM HEADING
========================================================= */

.contact-form-head {
  max-width:
    800px;

  margin-bottom:
    31px;
}


.contact-form-kicker {
  font-size:
    var(--section-kicker-size, 0.80rem);
}


.contact-form-head h2 {
  font-size:
    clamp(
      2.8rem,
      3.7vw,
      4rem
    );
}


.contact-form-head > p:last-child {
  max-width:
    690px;

  font-size:
    1rem;

  line-height:
    1.70;
}


/* =========================================================
   FORM CARD
========================================================= */

.project-enquiry-form {
  padding:
    clamp(
      25px,
      2.6vw,
      33px
    );
}


.form-grid {
  gap:
    19px
    17px;
}


.form-field {
  gap:
    7px;
}


.form-field label {
  font-size:
    0.81rem;
}


.form-field input,
.form-field select,
.form-field textarea {
  min-height:
    48px;

  padding:
    11px
    13px;

  font-size:
    0.90rem;
}


.form-field textarea {
  min-height:
    132px;
}


/* Form footer */
.contact-form-footer {
  margin-top:
    24px;

  padding-top:
    21px;
}


/* =========================================================
   RIGHT CONTACT SIDEBAR
   STICKY BEHAVIOUR PRESERVED
========================================================= */

.contact-enquiry-side {
  position:
    sticky;

  top:
    calc(
      var(--header-height, 88px)
      + 28px
    );

  gap:
    14px;
}


/* Direct contact card */
.contact-side-card {
  padding:
    25px;
}


.contact-side-kicker {
  font-size:
    0.69rem;
}


.contact-side-card h3 {
  font-size:
    1.42rem;
}


.contact-side-card > p {
  margin-bottom:
    21px;

  font-size:
    0.90rem;

  line-height:
    1.62;
}


.contact-side-details a {
  padding:
    11px
    12px;
}


.contact-side-details strong {
  font-size:
    0.87rem;
}


/* Helpful information */
.contact-project-info {
  padding:
    23px
    24px;
}


.contact-project-info > small {
  font-size:
    0.64rem;
}


.contact-project-info h3 {
  margin-bottom:
    16px;

  font-size:
    1.22rem;
}


.contact-project-info ul {
  gap:
    8px;

  margin-bottom:
    17px;
}


.contact-project-info li {
  font-size:
    0.86rem;
}


.contact-project-info > p {
  padding-top:
    14px;

  font-size:
    0.81rem;
}


/* =========================================================
   02. DUBAI OFFICE
   BETTER MAP / CONTENT BALANCE
========================================================= */

.contact-office {
  padding:
    var(--section-space, clamp(74px, 6.2vw, 100px))
    0;
}


.contact-office-layout {
  grid-template-columns:
    minmax(0, 1fr)
    minmax(420px, 0.82fr);

  gap:
    clamp(
      52px,
      6vw,
      88px
    );
}


.contact-office-content {
  max-width:
    720px;
}


.contact-office-kicker {
  font-size:
    var(--section-kicker-size, 0.80rem);
}


.contact-office-content h2 {
  max-width:
    680px;

  font-size:
    clamp(
      2.8rem,
      3.8vw,
      4.1rem
    );
}


.contact-office-intro {
  max-width:
    620px;

  margin-bottom:
    31px;

  font-size:
    1rem;

  line-height:
    1.70;
}


/* Contact details */
.contact-office-detail {
  grid-template-columns:
    42px
    1fr;

  gap:
    14px;

  padding:
    16px
    0;
}


.contact-office-number {
  font-size:
    0.72rem;
}


.contact-office-detail small {
  font-size:
    0.62rem;
}


.contact-office-detail strong,
.contact-office-detail a {
  font-size:
    0.96rem;
}


.contact-office-detail p {
  font-size:
    0.86rem;
}


/* =========================================================
   GOOGLE MAP CARD
========================================================= */

.contact-location-map {
  height:
    300px;
}


.contact-location-info {
  padding:
    19px
    21px
    21px;
}


.contact-location-info small {
  font-size:
    0.61rem;
}


.contact-location-info h3 {
  font-size:
    1.10rem;
}


.contact-location-info p {
  max-width:
    310px;

  font-size:
    0.80rem;
}


/* Map office label */
.contact-map-office-label {
  max-width:
    350px;

  padding:
    11px
    13px;
}


.contact-map-office-label strong {
  font-size:
    0.80rem;
}


.contact-map-office-label p {
  font-size:
    0.70rem;
}


/* =========================================================
   03. FINAL CTA
   KEEP APPROVED DESIGN — UNIFORM TYPOGRAPHY
========================================================= */

.contact-final {
  padding:
    clamp(
      70px,
      6vw,
      92px
    )
    0;
}


.contact-final-inner {
  grid-template-columns:
    minmax(0, 1.16fr)
    minmax(260px, 0.40fr);

  gap:
    clamp(
      48px,
      6vw,
      82px
    );
}


.contact-final-kicker {
  font-size:
    var(--section-kicker-size, 0.80rem);
}


.contact-final-content h2 {
  font-size:
    clamp(
      2.8rem,
      3.8vw,
      4.1rem
    );
}


.contact-final-content > p {
  max-width:
    680px;

  font-size:
    1rem;

  line-height:
    1.70;
}


/* =========================================================
   TABLET
========================================================= */

@media (max-width: 950px) {

  .contact-enquiry-layout {
    grid-template-columns:
      1fr;

    gap:
      46px;
  }


  .contact-enquiry-side {
    position:
      static;

    grid-template-columns:
      repeat(2, 1fr);
  }


  .contact-office-layout {
    grid-template-columns:
      1fr;

    gap:
      46px;
  }


  .contact-location-card {
    max-width:
      720px;
  }

}


/* =========================================================
   MOBILE
========================================================= */

@media (max-width: 600px) {

  .contact-hero-kicker,
  .contact-form-kicker,
  .contact-office-kicker,
  .contact-final-kicker {
    font-size:
      0.73rem;
  }


  .contact-enquiry,
  .contact-office,
  .contact-final {
    padding:
      68px
      0;
  }


  .project-enquiry-form {
    padding:
      22px
      18px;
  }


  .form-grid {
    gap:
      18px;
  }


  .contact-enquiry-side {
    grid-template-columns:
      1fr;
  }


  .contact-side-card,
  .contact-project-info {
    padding:
      22px;
  }


  .contact-location-map {
    height:
      260px;
  }


  .contact-map-office-label {
    left:
      10px;

    right:
      10px;

    bottom:
      10px;

    max-width:
      none;
  }

}

/* =========================================================
   FINAL MOBILE LAYOUT SAFETY
========================================================= */

@media (max-width: 950px) {
  .contact-hero-layout,
  .contact-enquiry-layout,
  .contact-office-layout,
  .contact-final-inner {
    grid-template-columns: minmax(0, 1fr);
  }

  .contact-hero-content,
  .contact-hero-panel,
  .contact-form-wrap,
  .contact-enquiry-side,
  .contact-office-content,
  .contact-location-card,
  .contact-final-content,
  .contact-final-actions {
    min-width: 0;
    width: 100%;
  }

  .contact-hero-panel,
  .contact-location-card {
    max-width: 720px;
  }

  .contact-enquiry-side {
    position: static;
  }

  .contact-final-inner {
    gap: 35px;
  }
}

@media (max-width: 600px) {
  .contact-hero h1 {
    font-size: clamp(2.35rem, 10.5vw, 3.2rem);
  }

  .contact-form-head h2,
  .contact-office-content h2,
  .contact-final-content h2 {
    font-size: clamp(2.25rem, 10vw, 3.1rem);
  }

  .contact-hero-meta {
    grid-template-columns: minmax(0, 1fr);
  }

  .contact-hero-meta > a {
    min-width: 0;
    width: 100%;
  }

  .form-grid {
    grid-template-columns: minmax(0, 1fr);
  }

  .contact-final-actions {
    align-items: stretch;
  }

  .contact-final-actions .btn {
    width: 100%;
    min-width: 0;
    justify-content: center;
  }
}