/* =========================================================
   ORGANICMETRIC — CONTACT PAGE
   Premium light / technology / growth aesthetic
   ========================================================= */


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

.contact-hero{
  position:relative;
  overflow:hidden;
  min-height:500px;
  display:flex;
  align-items:center;
  background:
    radial-gradient(circle at 72% 42%,rgba(110,78,255,.10),transparent 25%),
    radial-gradient(circle at 88% 20%,rgba(47,124,255,.11),transparent 20%),
    linear-gradient(135deg,#f8fbff 0%,#ffffff 48%,#f6f5ff 100%);
  border-bottom:1px solid #edf0f6;
}

.contact-hero-inner{
  position:relative;
  z-index:5;
  display:grid;
  grid-template-columns:1.04fr .96fr;
  gap:50px;
  align-items:center;
  padding-top:78px;
  padding-bottom:78px;
}


/* Hero copy */

.contact-hero-copy{
  position:relative;
  z-index:10;
  max-width:720px;
}

.contact-kicker{
  display:flex;
  align-items:center;
  gap:9px;
  color:#3979ff;
  font-size:11px;
  line-height:1;
  font-weight:800;
  letter-spacing:2px;
  text-transform:uppercase;
}

.contact-kicker span{
  width:24px;
  height:2px;
  display:block;
  border-radius:999px;
  background:linear-gradient(90deg,#2f7cff,#7047ff);
}

.contact-hero h1{
  margin:20px 0 22px;
  max-width:760px;
  color:#11182c;
  font-family:"Space Grotesk",sans-serif;
  font-size:clamp(48px,5.7vw,76px);
  line-height:.98;
  font-weight:700;
  letter-spacing:-4px;
}

.contact-hero h1 span{
  display:block;
  color:#2f7cff;
  background:linear-gradient(100deg,#2f7cff,#7047ff);
  -webkit-background-clip:text;
  background-clip:text;
  -webkit-text-fill-color:transparent;
}

.contact-hero-copy>p{
  max-width:690px;
  margin:0;
  color:#657087;
  font-size:17px;
  line-height:1.75;
}


/* =========================================================
   HERO BENEFITS
   ========================================================= */

.contact-hero-benefits{
  display:flex;
  flex-wrap:wrap;
  gap:14px;
  margin-top:30px;
}

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

.contact-benefit-icon{
  width:40px;
  height:40px;
  flex:0 0 40px;
  display:grid;
  place-items:center;
  border:1px solid rgba(82,112,255,.14);
  border-radius:13px;
  background:linear-gradient(145deg,#eef5ff,#f3efff);
  color:#416cff;
  box-shadow:0 8px 22px rgba(52,85,180,.08);
}

.contact-benefit-icon span{
  font-size:17px;
  font-weight:700;
}

.contact-benefit strong{
  display:block;
  margin-bottom:2px;
  color:#151d31;
  font-size:12px;
  font-weight:800;
}

.contact-benefit small{
  display:block;
  color:#7b8597;
  font-size:10px;
  line-height:1.4;
}


/* =========================================================
   HERO ART
   ========================================================= */

.contact-hero-art{
  position:relative;
  min-height:390px;
  height:100%;
  display:flex;
  align-items:center;
  justify-content:center;
  isolation:isolate;
}

.contact-art-glow{
  position:absolute;
  width:330px;
  height:230px;
  border-radius:50%;
  background:
    radial-gradient(
      ellipse,
      rgba(88,108,255,.24) 0%,
      rgba(120,75,255,.13) 42%,
      transparent 72%
    );
  filter:blur(10px);
  transform:rotate(-12deg);
  z-index:-1;
}


/* Sphere */

.contact-art-sphere{
  position:absolute;
  width:285px;
  height:285px;
  border-radius:50%;
  background:
    radial-gradient(
      circle at 32% 27%,
      #b9d7ff 0%,
      #6b91ff 15%,
      #3d54bb 35%,
      #252264 58%,
      #15183d 78%,
      #10162a 100%
    );
  box-shadow:
    0 30px 90px rgba(51,61,171,.23),
    inset -35px -28px 70px rgba(3,7,35,.48),
    inset 18px 15px 38px rgba(255,255,255,.18);
  transform:translate(25px,28px);
}

.contact-art-sphere-core{
  position:absolute;
  inset:16%;
  border-radius:50%;
  background:
    radial-gradient(
      circle at 30% 30%,
      rgba(255,255,255,.34),
      transparent 22%
    );
  opacity:.75;
}

.contact-art-sphere-ring{
  position:absolute;
  width:355px;
  height:110px;
  left:50%;
  top:52%;
  transform:translate(-50%,-50%) rotate(-15deg);
  border:2px solid rgba(91,133,255,.65);
  border-radius:50%;
  box-shadow:
    0 0 18px rgba(67,115,255,.35);
}


/* Orbits */

.contact-art-orbit{
  position:absolute;
  border:1px solid rgba(76,103,255,.18);
  border-radius:50%;
  pointer-events:none;
}

.orbit-one{
  width:430px;
  height:175px;
  transform:rotate(-18deg);
}

.orbit-two{
  width:500px;
  height:250px;
  transform:rotate(22deg);
  border-color:rgba(112,71,255,.12);
}

.orbit-three{
  width:350px;
  height:350px;
  border-color:rgba(47,124,255,.08);
}


/* Paper plane */

.contact-paper-plane{
  position:absolute;
  width:105px;
  height:78px;
  right:22px;
  top:72px;
  transform:rotate(-12deg);
  filter:
    drop-shadow(0 18px 22px rgba(61,63,190,.18));
}

.plane-body{
  position:absolute;
  width:0;
  height:0;
  border-left:90px solid #7047ff;
  border-top:28px solid transparent;
  border-bottom:25px solid transparent;
}

.plane-wing{
  position:absolute;
  left:21px;
  top:28px;
  width:69px;
  height:3px;
  background:#a3a8ff;
  transform:rotate(26deg);
  transform-origin:left center;
}


/* Handwritten-style note */

.contact-art-note{
  position:absolute;
  right:100px;
  top:24px;
  display:flex;
  flex-direction:column;
  color:#5271ed;
  font-family:cursive;
  font-size:23px;
  line-height:1.05;
  transform:rotate(-7deg);
  opacity:.92;
}

.contact-art-note span:nth-child(2){
  margin-left:18px;
}

.contact-art-note span:nth-child(3){
  margin-left:42px;
}


/* Hero caption */

.contact-art-caption{
  position:absolute;
  right:40px;
  bottom:30px;
  display:flex;
  flex-direction:column;
  gap:3px;
  color:#61709a;
  text-align:right;
  font-size:9px;
  letter-spacing:2px;
}

.contact-art-caption strong{
  color:#2e3b6c;
  font-size:10px;
  letter-spacing:2.3px;
}


/* =========================================================
   MAIN
   ========================================================= */

.contact-main{
  position:relative;
  padding:70px 0 90px;
  background:
    radial-gradient(circle at 5% 12%,rgba(47,124,255,.035),transparent 25%),
    linear-gradient(#f8f9fc,#ffffff);
}


/* =========================================================
   CARDS
   ========================================================= */

.contact-grid{
  display:grid;
  grid-template-columns:.92fr 1.08fr;
  gap:20px;
  align-items:stretch;
}

.contact-card{
  position:relative;
  background:rgba(255,255,255,.94);
  border:1px solid #e7ebf2;
  border-radius:26px;
  box-shadow:
    0 20px 65px rgba(22,32,61,.075),
    0 2px 8px rgba(22,32,61,.025);
}

.contact-information-card{
  padding:31px;
}

.contact-card-label{
  margin-bottom:9px;
  color:#4b7fff;
  font-size:9px;
  line-height:1;
  font-weight:800;
  letter-spacing:1.8px;
  text-transform:uppercase;
}

.contact-card h2{
  margin:0 0 8px;
  color:#11192d;
  font-family:"Space Grotesk",sans-serif;
  font-size:29px;
  line-height:1.1;
  font-weight:700;
  letter-spacing:-1.2px;
}

.contact-card>p{
  margin:0 0 24px;
  color:#737d91;
  font-size:13px;
  line-height:1.7;
}


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

.contact-details{
  display:grid;
  gap:10px;
}

.contact-detail{
  position:relative;
  display:flex;
  align-items:center;
  gap:13px;
  padding:14px 13px;
  border:1px solid #edf0f5;
  border-radius:17px;
  background:linear-gradient(135deg,#fbfcfe,#ffffff);
  transition:
    transform .22s ease,
    border-color .22s ease,
    box-shadow .22s ease;
}

.contact-detail:hover{
  transform:translateY(-2px);
  border-color:#dce5fa;
  box-shadow:0 10px 28px rgba(38,76,160,.07);
}

.contact-icon{
  width:43px;
  height:43px;
  flex:0 0 43px;
  display:grid;
  place-items:center;
  border-radius:14px;
  font-size:18px;
}

.contact-icon.phone{
  background:linear-gradient(145deg,#edf5ff,#e7efff);
  color:#347cff;
}

.contact-icon.whatsapp{
  background:linear-gradient(145deg,#e9fbf2,#ddf8eb);
  color:#13aa6c;
}

.contact-icon.email{
  background:linear-gradient(145deg,#f3efff,#eee9ff);
  color:#7047ff;
}

.contact-icon.location{
  background:linear-gradient(145deg,#fff0f0,#ffe9ec);
  color:#df5260;
}

.contact-detail-content{
  min-width:0;
  flex:1;
}

.contact-detail b{
  display:block;
  margin-bottom:3px;
  color:#172034;
  font-size:12px;
  font-weight:800;
}

.contact-detail span,
.contact-detail a{
  display:block;
  color:#707a8d;
  font-size:11px;
  line-height:1.5;
}

.contact-detail a{
  color:#53627e;
  font-weight:600;
}

.contact-detail a:hover{
  color:#4d63e9;
}

.contact-detail-arrow{
  width:27px!important;
  height:27px;
  display:grid!important;
  place-items:center;
  flex:0 0 27px;
  border:1px solid #e9edf4;
  border-radius:50%;
  color:#68758c!important;
  font-size:12px!important;
  transition:.2s ease;
}

.contact-detail:hover .contact-detail-arrow{
  background:#f1f4ff;
  border-color:#dce3ff;
  color:#4a62e9!important;
}


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

.contact-map-card{
  padding:14px;
  overflow:hidden;
}

.contact-map-head{
  display:flex;
  align-items:flex-start;
  justify-content:space-between;
  gap:20px;
  padding:16px 16px 12px;
}

.contact-map-head h2{
  margin-bottom:6px;
}

.contact-map-head p{
  margin:0;
}

.map-top-button{
  display:inline-flex;
  align-items:center;
  gap:7px;
  flex:0 0 auto;
  padding:9px 12px;
  border:1px solid #e3e8f1;
  border-radius:11px;
  background:#fff;
  color:#303a51;
  font-size:10px;
  font-weight:800;
  box-shadow:0 5px 18px rgba(26,38,73,.05);
}

.map-top-button:hover{
  border-color:#cdd8ff;
  color:#4a5fe8;
}

.contact-map{
  height:365px;
  overflow:hidden;
  border:1px solid #e3e8ef;
  border-radius:20px;
  background:#e9edf4;
}

.contact-map iframe{
  width:100%;
  height:100%;
  display:block;
  border:0;
}

.contact-map-placeholder{
  height:100%;
  display:grid;
  place-items:center;
  text-align:center;
  padding:30px;
  background:
    radial-gradient(circle at 50% 45%,rgba(88,123,255,.12),transparent 25%),
    linear-gradient(135deg,#f0f3f8,#e8edf5);
  color:#68758a;
}

.contact-map-placeholder strong{
  display:block;
  margin:10px 0 7px;
  color:#172035;
  font:700 20px "Space Grotesk";
}

.contact-map-placeholder span{
  display:block;
  max-width:300px;
  font-size:11px;
  line-height:1.6;
}

.map-placeholder-pin{
  width:48px;
  height:48px;
  margin:0 auto;
  display:grid;
  place-items:center;
  border-radius:16px;
  background:linear-gradient(145deg,#e7f0ff,#eeeaff);
  color:#4777ff;
  font-size:22px;
  box-shadow:0 12px 30px rgba(58,88,192,.13);
}

.map-actions{
  display:flex;
  justify-content:flex-end;
  padding:10px 3px 2px;
}

.map-link{
  display:inline-flex;
  align-items:center;
  padding:10px 13px;
  border:1px solid #e2e7ef;
  border-radius:11px;
  background:#fff;
  color:#424d63;
  font-size:10px;
  font-weight:800;
}

.map-link:hover{
  border-color:#ccd8ff;
  color:#4663e9;
}


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

.contact-enquiry-layout{
  display:grid;
  grid-template-columns:minmax(0,1fr) 280px;
  gap:20px;
  margin-top:20px;
}


/* Form card */

.contact-form-card{
  padding:31px;
}

.contact-form{
  display:grid;
  grid-template-columns:1fr 1fr;
  gap:15px;
}

.contact-form .field{
  min-width:0;
}

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

.contact-form .field label{
  display:block;
  margin:0 0 6px;
  color:#4d586c;
  font-size:10px;
  font-weight:800;
}

.contact-form input,
.contact-form textarea,
.contact-form select{
  width:100%;
  box-sizing:border-box;
  outline:0;
  border:1px solid #dfe5ed;
  border-radius:12px;
  background:#fff;
  color:#1c2539;
  font:inherit;
  font-size:12px;
  transition:
    border-color .2s ease,
    box-shadow .2s ease,
    background .2s ease;
}

.contact-form input,
.contact-form select{
  height:45px;
  padding:0 13px;
}

.contact-form textarea{
  min-height:125px;
  padding:13px;
  resize:vertical;
  line-height:1.55;
}

.contact-form input::placeholder,
.contact-form textarea::placeholder{
  color:#9ba4b3;
}

.contact-form input:focus,
.contact-form textarea:focus,
.contact-form select:focus{
  border-color:#7895ff;
  background:#fcfdff;
  box-shadow:0 0 0 4px rgba(67,105,255,.08);
}

.contact-submit{
  width:100%;
  min-height:47px;
  display:flex;
  align-items:center;
  justify-content:space-between;
  gap:20px;
  padding:0 17px;
  border:0;
  border-radius:12px;
  background:linear-gradient(100deg,#2f7cff,#7047ff);
  color:#fff;
  font-size:12px;
  font-weight:800;
  cursor:pointer;
  box-shadow:
    0 12px 28px rgba(74,91,235,.22),
    inset 0 1px 0 rgba(255,255,255,.2);
  transition:
    transform .2s ease,
    box-shadow .2s ease;
}

.contact-submit:hover{
  transform:translateY(-2px);
  box-shadow:
    0 17px 34px rgba(74,91,235,.28),
    inset 0 1px 0 rgba(255,255,255,.2);
}

.contact-submit b{
  font-size:15px;
}


/* =========================================================
   NOT SURE WHERE TO START CARD
   ========================================================= */

.contact-start-card{
  position:relative;
  overflow:hidden;
  min-height:100%;
  padding:27px 25px;
  border:1px solid #e1e5f3;
  border-radius:25px;
  background:
    radial-gradient(circle at 75% 5%,rgba(112,71,255,.17),transparent 28%),
    radial-gradient(circle at 20% 30%,rgba(47,124,255,.12),transparent 30%),
    linear-gradient(145deg,#f5f7ff,#fbfbff 55%,#f4f2ff);
  box-shadow:0 20px 60px rgba(30,43,91,.075);
}

.contact-start-card:after{
  content:"";
  position:absolute;
  width:190px;
  height:190px;
  right:-95px;
  bottom:-95px;
  border:1px solid rgba(89,98,220,.14);
  border-radius:50%;
}

.contact-start-orb{
  position:relative;
  width:70px;
  height:70px;
  margin-bottom:23px;
  display:grid;
  place-items:center;
  border-radius:50%;
  background:
    radial-gradient(circle,#dce7ff 0%,#eae7ff 58%,transparent 60%);
}

.contact-start-orb-ring{
  position:absolute;
  inset:-8px;
  border:1px solid rgba(75,103,236,.18);
  border-radius:50%;
  transform:rotate(-18deg);
}

.contact-start-orb-ring:after{
  content:"";
  position:absolute;
  width:8px;
  height:8px;
  top:3px;
  left:11px;
  border-radius:50%;
  background:#4e75ff;
  box-shadow:0 0 12px rgba(78,117,255,.6);
}

.contact-start-icon{
  width:38px;
  height:38px;
  display:grid;
  place-items:center;
  border-radius:13px;
  background:linear-gradient(145deg,#536eff,#7147ff);
  color:#fff;
  font-size:17px;
  box-shadow:0 10px 25px rgba(79,82,220,.23);
}

.contact-start-label{
  margin-bottom:8px;
  color:#6277d9;
  font-size:9px;
  font-weight:800;
  letter-spacing:1.5px;
}

.contact-start-card h3{
  margin:0 0 10px;
  color:#151d33;
  font:700 23px/1.15 "Space Grotesk";
  letter-spacing:-.7px;
}

.contact-start-card h3 span{
  display:block;
  color:#394762;
}

.contact-start-card>p{
  margin:0 0 20px;
  color:#707a8e;
  font-size:11px;
  line-height:1.7;
}

.contact-start-card ul{
  display:grid;
  gap:11px;
  margin:0;
  padding:0;
  list-style:none;
}

.contact-start-card li{
  display:flex;
  align-items:center;
  gap:9px;
  color:#445066;
  font-size:11px;
}

.contact-start-card li span{
  width:19px;
  height:19px;
  display:grid;
  place-items:center;
  border:1px solid #bdcbff;
  border-radius:50%;
  background:#eef2ff;
  color:#4c68e8;
  font-size:9px;
  font-weight:800;
}

.contact-start-divider{
  height:1px;
  margin:23px 0 17px;
  background:rgba(95,108,174,.15);
}

.contact-start-bottom{
  color:#536078;
  font-family:cursive;
  font-size:17px;
  line-height:1.1;
  transform:rotate(-3deg);
}

.contact-start-bottom strong{
  display:block;
  color:#334eae;
  font-weight:600;
}


/* =========================================================
   OFFICE SECTION
   ========================================================= */

.contact-branch-section{
  position:relative;
  overflow:hidden;
  padding:10px 0 100px;
  background:
    linear-gradient(180deg,#ffffff,#f7f9fd);
}

.section-head{
  display:grid;
  grid-template-columns:minmax(0,1fr) 330px;
  gap:40px;
  align-items:end;
  margin-bottom:30px;
}

.section-head .kicker{
  margin-bottom:12px;
  color:#4b7fff;
  font-size:10px;
  font-weight:800;
  letter-spacing:1.8px;
  text-transform:uppercase;
}

.section-head h2{
  max-width:680px;
  margin:0;
  color:#11192e;
  font:700 clamp(37px,4.2vw,58px)/1 "Space Grotesk";
  letter-spacing:-2.8px;
}

.section-head h2 span{
  display:block;
}

.office-section-side{
  padding-bottom:4px;
}

.office-section-side p{
  margin:0 0 16px;
  color:#727d91;
  font-size:12px;
  line-height:1.7;
}

.office-section-side>a{
  display:inline-flex;
  align-items:center;
  gap:8px;
  padding:10px 13px;
  border:1px solid #dfe5ef;
  border-radius:12px;
  background:#fff;
  color:#39455b;
  font-size:10px;
  font-weight:800;
  box-shadow:0 7px 20px rgba(26,38,72,.04);
}

.office-section-side>a:hover{
  border-color:#cbd7ff;
  color:#4965e8;
}


/* Branch cards */

.branch-grid{
  display:grid;
  grid-template-columns:repeat(3,1fr);
  gap:16px;
}

.branch-card{
  position:relative;
  overflow:hidden;
  padding:23px;
  border:1px solid #e5e9f0;
  border-radius:21px;
  background:#fff;
  box-shadow:0 14px 42px rgba(26,38,68,.055);
}

.branch-card:before{
  content:"";
  position:absolute;
  width:90px;
  height:90px;
  right:-40px;
  top:-40px;
  border-radius:50%;
  background:linear-gradient(135deg,rgba(47,124,255,.08),rgba(112,71,255,.10));
}

.branch-card h3{
  position:relative;
  margin:0 0 7px;
  color:#151d32;
  font:700 21px "Space Grotesk";
  letter-spacing:-.5px;
}

.branch-card p{
  position:relative;
  margin:0 0 15px;
  color:#737d90;
  font-size:12px;
  line-height:1.65;
}

.branch-meta{
  position:relative;
  display:grid;
  gap:7px;
}

.branch-meta a{
  color:#536078;
  font-size:11px;
}

.branch-meta a:hover{
  color:#4e64e7;
}


/* =========================================================
   RESPONSIVE
   ========================================================= */

@media(max-width:1100px){

  .contact-hero-inner{
    grid-template-columns:1fr .85fr;
    gap:25px;
  }

  .contact-hero-art{
    transform:scale(.9);
  }

  .contact-enquiry-layout{
    grid-template-columns:minmax(0,1fr) 270px;
  }

}


@media(max-width:900px){

  .contact-hero-inner{
    grid-template-columns:1fr;
    padding-top:65px;
    padding-bottom:45px;
  }

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

  .contact-hero-art{
    min-height:300px;
    margin-top:-10px;
    transform:scale(.82);
  }

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

  .contact-map{
    height:360px;
  }

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

  .contact-start-card{
    min-height:0;
  }

  .section-head{
    grid-template-columns:1fr;
    gap:20px;
    align-items:start;
  }

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

}


@media(max-width:650px){

  .contact-hero{
    min-height:0;
  }

  .contact-hero-inner{
    padding-top:48px;
    padding-bottom:25px;
  }

  .contact-hero h1{
    margin-top:16px;
    font-size:46px;
    line-height:.99;
    letter-spacing:-2.8px;
  }

  .contact-hero-copy>p{
    font-size:14px;
    line-height:1.7;
  }

  .contact-hero-benefits{
    display:grid;
    grid-template-columns:1fr;
    gap:11px;
    margin-top:24px;
  }

  .contact-benefit-icon{
    width:36px;
    height:36px;
    flex-basis:36px;
  }

  .contact-hero-art{
    min-height:245px;
    margin-top:0;
    transform:scale(.69);
    transform-origin:center top;
  }

  .contact-art-sphere{
    width:245px;
    height:245px;
  }

  .contact-art-sphere-ring{
    width:305px;
  }

  .contact-art-note{
    right:45px;
    top:15px;
    font-size:19px;
  }

  .contact-paper-plane{
    right:0;
    top:60px;
    transform:scale(.8) rotate(-12deg);
  }

  .contact-art-caption{
    right:5px;
    bottom:5px;
  }

  .contact-main{
    padding:48px 0 65px;
  }

  .contact-information-card,
  .contact-form-card{
    padding:22px;
    border-radius:21px;
  }

  .contact-card h2{
    font-size:26px;
  }

  .contact-map-card{
    padding:10px;
    border-radius:21px;
  }

  .contact-map-head{
    display:block;
    padding:14px 12px 11px;
  }

  .map-top-button{
    margin-top:13px;
  }

  .contact-map{
    height:300px;
    border-radius:17px;
  }

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

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

  .contact-start-card{
    padding:24px 22px;
    border-radius:21px;
  }

  .section-head{
    margin-bottom:24px;
  }

  .section-head h2{
    font-size:39px;
    letter-spacing:-2px;
  }

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

  .contact-branch-section{
    padding-bottom:75px;
  }

}


@media(max-width:390px){

  .contact-hero h1{
    font-size:41px;
    letter-spacing:-2.4px;
  }

  .contact-hero-art{
    transform:scale(.60);
    min-height:215px;
  }

  .contact-detail{
    padding:12px 10px;
  }

  .contact-detail-arrow{
    display:none!important;
  }

}


/* =========================================================
   ACCESSIBILITY / REDUCED MOTION
   ========================================================= */

@media(prefers-reduced-motion:reduce){

  .contact-detail,
  .contact-submit{
    transition:none;
  }

  .contact-detail:hover,
  .contact-submit:hover{
    transform:none;
  }

}


/* =========================================================
   ORGANICMETRIC — CONTACT PAGE FINAL UI OVERRIDES
   ---------------------------------------------------------
   Purpose:
   - Improve overall readability
   - Keep normal text at 14px or larger
   - Make the contact page feel more premium and spacious
   - Support the real Google Maps iframe used by contact.html
   - Build a more convincing digital globe
   - Keep globe interaction compatible with the page JavaScript
   - Preserve the existing contact-page structure and styling
   ========================================================= */


/* =========================================================
   GLOBAL CONTACT-PAGE READABILITY
   ========================================================= */

.contact-hero-copy > p,
.contact-benefit small,
.contact-card > p,
.contact-detail-content span,
.contact-detail-content a,
.contact-map-head p,
.office-section-side p,
.contact-start-card > p,
.contact-start-card li,
.branch-card p,
.branch-meta a {
  font-size: 14px;
  line-height: 1.65;
}

.contact-kicker,
.contact-card-label,
.contact-start-label,
.section-head .kicker {
  font-size: 13px;
  line-height: 1.2;
  letter-spacing: 1.8px;
}

.contact-benefit strong,
.contact-detail-content b {
  font-size: 15px;
  line-height: 1.35;
}

.contact-card h2 {
  font-size: clamp(29px, 3vw, 40px);
  line-height: 1.08;
}

.contact-start-card h3 {
  font-size: clamp(28px, 3vw, 38px);
  line-height: 1.08;
}

.contact-form .field label {
  font-size: 13px;
  line-height: 1.35;
}

.contact-form input,
.contact-form textarea,
.contact-form select {
  font-size: 14px;
}

.contact-submit {
  font-size: 14px;
}

.map-top-button,
.map-link,
.office-section-side > a {
  font-size: 13px;
}

.section-head h2 {
  font-size: clamp(39px, 4.2vw, 58px);
}


/* =========================================================
   HERO — MORE PREMIUM SPACE
   ========================================================= */

.contact-hero {
  min-height: 560px;
}

.contact-hero-inner {
  padding-top: 82px;
  padding-bottom: 82px;
}

.contact-hero h1 {
  font-size: clamp(52px, 5.7vw, 78px);
  letter-spacing: -4px;
}

.contact-hero-copy > p {
  max-width: 700px;
  font-size: 18px;
  line-height: 1.72;
}

.contact-hero-benefits {
  gap: 20px;
  margin-top: 34px;
}

.contact-benefit {
  gap: 11px;
}

.contact-benefit-icon {
  width: 43px;
  height: 43px;
  flex-basis: 43px;
}

.contact-benefit-icon span {
  font-size: 18px;
}

.contact-benefit strong {
  margin-bottom: 3px;
}

.contact-benefit small {
  color: #788398;
}


/* =========================================================
   HERO ART — DIGITAL GLOBE
   ========================================================= */

.contact-hero-art {
  min-height: 430px;
  perspective: 1100px;
  transform-style: preserve-3d;
}

.contact-art-glow {
  width: 390px;
  height: 285px;
  background:
    radial-gradient(
      ellipse,
      rgba(88,108,255,.28) 0%,
      rgba(120,75,255,.16) 40%,
      rgba(47,124,255,.08) 58%,
      transparent 74%
    );
  filter: blur(12px);
}


/* ---------------------------------------------------------
   Globe outer shell
   --------------------------------------------------------- */

.contact-art-sphere {
  --globe-tilt-x: 0deg;
  --globe-tilt-y: 0deg;
  --globe-scale: 1;

  position: absolute;
  width: 300px;
  height: 300px;
  border-radius: 50%;

  transform:
    translate3d(25px, 28px, 0)
    rotateX(var(--globe-tilt-y))
    rotateY(var(--globe-tilt-x))
    scale(var(--globe-scale));

  transform-style: preserve-3d;
  perspective: 1000px;

  background:
    radial-gradient(
      circle at 32% 27%,
      #c9e0ff 0%,
      #6f9bff 14%,
      #3d55bd 34%,
      #262468 56%,
      #15183d 76%,
      #10162a 100%
    );

  box-shadow:
    0 34px 100px rgba(51,61,171,.25),
    inset -38px -30px 72px rgba(3,7,35,.52),
    inset 18px 16px 40px rgba(255,255,255,.18),
    0 0 0 1px rgba(255,255,255,.12);

  will-change: transform;
}


/* ---------------------------------------------------------
   Globe core becomes the actual spherical viewport
   --------------------------------------------------------- */

.contact-art-sphere-core {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  overflow: hidden;
  border-radius: 50%;
  isolation: isolate;
  background:
    radial-gradient(
      circle at 30% 25%,
      rgba(255,255,255,.12),
      transparent 32%
    );
}


/* ---------------------------------------------------------
   SVG globe
   --------------------------------------------------------- */

.contact-globe-svg {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  display: block;
  overflow: visible;

  filter:
    drop-shadow(0 0 14px rgba(47,124,255,.28))
    drop-shadow(0 0 32px rgba(109,74,255,.20));
}


/* ---------------------------------------------------------
   Rotating digital world layer
   Controlled by contact-page JavaScript.
   --------------------------------------------------------- */

.contact-globe-surface {
  transform-origin: 150px 150px;
  transform-box: view-box;
  will-change: transform;
}


/* ---------------------------------------------------------
   Globe grid
   --------------------------------------------------------- */

.contact-globe-grid {
  opacity: .78;
  stroke: rgba(207,225,255,.86);
  mix-blend-mode: screen;
}


/* ---------------------------------------------------------
   Digital land
   --------------------------------------------------------- */

.contact-globe-land {
  opacity: .86;
  filter:
    drop-shadow(0 0 5px rgba(201,255,74,.34))
    drop-shadow(0 0 12px rgba(201,255,74,.18));
}


/* ---------------------------------------------------------
   Globe points / network
   --------------------------------------------------------- */

.contact-globe-svg g[fill="#ffffff"] {
  filter:
    drop-shadow(0 0 4px rgba(255,255,255,.7));
}


/* ---------------------------------------------------------
   Globe highlight / atmosphere
   --------------------------------------------------------- */

.contact-globe-highlight {
  pointer-events: none;
  mix-blend-mode: screen;
  opacity: .46;
}

.contact-globe-glow {
  pointer-events: none;
  filter: blur(1px);
}


/* ---------------------------------------------------------
   Globe rim
   --------------------------------------------------------- */

.contact-art-sphere::after {
  content: "";
  position: absolute;
  inset: 2px;
  border-radius: 50%;
  pointer-events: none;

  border:
    1px solid rgba(255,255,255,.30);

  box-shadow:
    inset 0 0 28px rgba(137,176,255,.16),
    0 0 24px rgba(70,111,255,.16);
}


/* ---------------------------------------------------------
   Existing orbit ring around globe
   --------------------------------------------------------- */

.contact-art-sphere-ring {
  width: 375px;
  height: 116px;
  left: 50%;
  top: 52%;
  border-width: 2px;
  border-color: rgba(91,133,255,.72);

  box-shadow:
    0 0 18px rgba(67,115,255,.35),
    0 0 42px rgba(67,115,255,.12);
}


/* =========================================================
   HERO ORBITS
   ========================================================= */

.contact-art-orbit {
  opacity: .9;
}

.orbit-one {
  width: 455px;
  height: 190px;
}

.orbit-two {
  width: 525px;
  height: 270px;
}

.orbit-three {
  width: 375px;
  height: 375px;
}


/* =========================================================
   HERO PAPER PLANE
   ========================================================= */

.contact-paper-plane {
  width: 112px;
  height: 82px;
  right: 12px;
  top: 64px;
  z-index: 8;
  filter:
    drop-shadow(0 18px 22px rgba(61,63,190,.18))
    drop-shadow(0 0 10px rgba(112,71,255,.10));
  will-change: transform;
}

.plane-body {
  border-left-width: 94px;
  border-top-width: 29px;
  border-bottom-width: 26px;
}

.plane-wing {
  left: 22px;
  top: 29px;
  width: 72px;
}


/* =========================================================
   HERO NOTE
   ========================================================= */

.contact-art-note {
  right: 94px;
  top: 19px;
  font-size: 25px;
  line-height: 1.06;
  z-index: 9;
  text-shadow: 0 5px 18px rgba(76,91,190,.10);
  will-change: transform;
}

.contact-art-note span:nth-child(2) {
  margin-left: 19px;
}

.contact-art-note span:nth-child(3) {
  margin-left: 45px;
}


/* =========================================================
   HERO CAPTION
   ========================================================= */

.contact-art-caption {
  right: 34px;
  bottom: 25px;
  font-size: 11px;
  letter-spacing: 2.1px;
  z-index: 9;
  will-change: transform;
}

.contact-art-caption strong {
  font-size: 12px;
  letter-spacing: 2.5px;
}


/* =========================================================
   MAIN CONTACT AREA
   ========================================================= */

.contact-main {
  padding: 78px 0 96px;
}

.contact-grid {
  gap: 24px;
}

.contact-card {
  border-radius: 28px;
  box-shadow:
    0 24px 72px rgba(22,32,61,.08),
    0 2px 8px rgba(22,32,61,.025);
}

.contact-information-card,
.contact-form-card {
  padding: 34px;
}

.contact-card-label {
  margin-bottom: 11px;
}

.contact-card > p {
  margin-bottom: 27px;
  color: #707b90;
}


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

.contact-details {
  gap: 12px;
}

.contact-detail {
  gap: 14px;
  padding: 16px 15px;
  border-radius: 18px;
}

.contact-icon {
  width: 46px;
  height: 46px;
  flex-basis: 46px;
  border-radius: 15px;
  font-size: 19px;
}

.contact-detail b {
  margin-bottom: 4px;
}

.contact-detail span,
.contact-detail a {
  font-size: 14px;
  line-height: 1.55;
}

.contact-detail-arrow {
  width: 30px !important;
  height: 30px;
  flex-basis: 30px;
  font-size: 13px !important;
}


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

.contact-map-card {
  padding: 15px;
}

.contact-map-head {
  padding: 18px 17px 14px;
}

.contact-map-head p {
  max-width: 510px;
  margin: 0;
  font-size: 14px;
}

.map-top-button {
  padding: 11px 14px;
  border-radius: 12px;
  font-size: 13px;
}

.contact-map {
  position: relative;
  height: 390px;
  overflow: hidden;
  border-radius: 21px;
  border: 1px solid #e1e6ef;
  background: #edf1f7;
}

.contact-map iframe {
  display: block;
  width: 100%;
  height: 100%;
  min-height: 390px;
  border: 0;
}

.map-actions {
  padding: 11px 4px 3px;
}

.map-link {
  padding: 11px 14px;
  border-radius: 12px;
  font-size: 13px;
}


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

.contact-enquiry-layout {
  grid-template-columns: minmax(0, 1fr) 310px;
  gap: 24px;
  margin-top: 24px;
}

.contact-form {
  gap: 17px;
}

.contact-form .field label {
  margin-bottom: 7px;
  color: #4a566c;
}

.contact-form input,
.contact-form select {
  height: 49px;
  padding: 0 14px;
  border-radius: 13px;
}

.contact-form textarea {
  min-height: 145px;
  padding: 14px;
  border-radius: 13px;
  line-height: 1.6;
}

.contact-submit {
  min-height: 51px;
  padding: 0 18px;
  border-radius: 13px;
}


/* =========================================================
   CONSULTATION CARD
   ========================================================= */

.contact-start-card {
  padding: 30px 27px;
  border-radius: 27px;
}

.contact-start-orb {
  width: 76px;
  height: 76px;
  margin-bottom: 25px;
}

.contact-start-icon {
  width: 41px;
  height: 41px;
  border-radius: 14px;
  font-size: 18px;
}

.contact-start-label {
  margin-bottom: 10px;
}

.contact-start-card > p {
  margin-bottom: 23px;
}

.contact-start-card ul {
  gap: 12px;
}

.contact-start-card li {
  gap: 10px;
  font-size: 14px;
}

.contact-start-card li span {
  width: 21px;
  height: 21px;
  flex: 0 0 21px;
  font-size: 10px;
}

.contact-start-divider {
  margin: 25px 0 18px;
}

.contact-start-bottom {
  font-size: 18px;
}


/* =========================================================
   OFFICE SECTION
   ========================================================= */

.contact-branch-section {
  padding: 18px 0 105px;
}

.section-head {
  margin-bottom: 34px;
}

.office-section-side p {
  font-size: 14px;
}

.office-section-side > a {
  padding: 11px 14px;
  border-radius: 12px;
  font-size: 13px;
}

.branch-grid {
  gap: 18px;
}

.branch-card {
  padding: 25px;
  border-radius: 22px;
}

.branch-card h3 {
  font-size: 22px;
}

.branch-card p {
  font-size: 14px;
}

.branch-meta {
  gap: 8px;
}

.branch-meta a {
  font-size: 14px;
}


/* =========================================================
   LARGE DESKTOP
   ========================================================= */

@media (min-width: 1200px) {

  .contact-hero {
    min-height: 610px;
  }

  .contact-hero-inner {
    padding-top: 92px;
    padding-bottom: 92px;
  }

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

  .contact-hero-copy > p {
    font-size: 18px;
  }

  .contact-hero-art {
    min-height: 480px;
  }

  .contact-art-sphere {
    width: 320px;
    height: 320px;
  }

  .contact-map {
    height: 410px;
  }

  .contact-map iframe {
    min-height: 410px;
  }
}


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

@media (max-width: 1100px) {

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

  .contact-hero h1 {
    font-size: clamp(48px, 6vw, 68px);
  }

  .contact-hero-copy > p {
    font-size: 17px;
  }

  .contact-hero-art {
    transform: scale(.92);
  }

  .contact-enquiry-layout {
    grid-template-columns: minmax(0, 1fr) 290px;
  }

  .contact-map {
    height: 370px;
  }

  .contact-map iframe {
    min-height: 370px;
  }
}


/* =========================================================
   TABLET / SMALL LAPTOP
   ========================================================= */

@media (max-width: 900px) {

  .contact-hero-inner {
    grid-template-columns: 1fr;
    padding-top: 68px;
    padding-bottom: 48px;
  }

  .contact-hero-copy {
    max-width: 780px;
  }

  .contact-hero-art {
    min-height: 360px;
    margin-top: -5px;
    transform: scale(.88);
  }

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

  .contact-map {
    height: 370px;
  }

  .contact-map iframe {
    min-height: 370px;
  }

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

  .contact-start-card {
    min-height: 0;
  }

  .section-head {
    grid-template-columns: 1fr;
    gap: 22px;
    align-items: start;
  }

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


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

@media (max-width: 650px) {

  .contact-hero {
    min-height: 0;
  }

  .contact-hero-inner {
    padding-top: 50px;
    padding-bottom: 22px;
  }

  .contact-hero h1 {
    margin-top: 17px;
    font-size: clamp(42px, 12vw, 52px);
    line-height: .99;
    letter-spacing: -2.8px;
  }

  .contact-hero-copy > p {
    font-size: 15px;
    line-height: 1.7;
  }

  .contact-hero-benefits {
    display: grid;
    grid-template-columns: 1fr;
    gap: 12px;
    margin-top: 25px;
  }

  .contact-benefit {
    gap: 11px;
  }

  .contact-benefit-icon {
    width: 40px;
    height: 40px;
    flex-basis: 40px;
  }

  .contact-benefit strong {
    font-size: 15px;
  }

  .contact-benefit small {
    font-size: 14px;
  }


  /* -----------------------------------------
     Mobile hero artwork
     ----------------------------------------- */

  .contact-hero-art {
    min-height: 285px;
    margin-top: 5px;
    transform: scale(.73);
    transform-origin: center top;
  }

  .contact-art-sphere {
    width: 255px;
    height: 255px;
    transform:
      translate3d(10px, 20px, 0)
      rotateX(var(--globe-tilt-y))
      rotateY(var(--globe-tilt-x))
      scale(var(--globe-scale));
  }

  .contact-art-sphere-ring {
    width: 320px;
    height: 102px;
  }

  .contact-art-note {
    right: 40px;
    top: 12px;
    font-size: 21px;
  }

  .contact-art-note span:nth-child(2) {
    margin-left: 15px;
  }

  .contact-art-note span:nth-child(3) {
    margin-left: 34px;
  }

  .contact-paper-plane {
    right: 0;
    top: 58px;
    transform: scale(.82) rotate(-12deg);
  }

  .contact-art-caption {
    right: 4px;
    bottom: 3px;
    font-size: 10px;
  }

  .contact-art-caption strong {
    font-size: 11px;
  }


  /* -----------------------------------------
     Main content
     ----------------------------------------- */

  .contact-main {
    padding: 52px 0 70px;
  }

  .contact-information-card,
  .contact-form-card {
    padding: 24px;
    border-radius: 22px;
  }

  .contact-card h2 {
    font-size: 29px;
  }

  .contact-card > p {
    font-size: 14px;
  }

  .contact-detail {
    padding: 14px 12px;
    border-radius: 17px;
  }

  .contact-icon {
    width: 43px;
    height: 43px;
    flex-basis: 43px;
  }

  .contact-detail-content {
    min-width: 0;
  }

  .contact-detail b {
    font-size: 14px;
  }

  .contact-detail span,
  .contact-detail a {
    font-size: 14px;
  }


  /* -----------------------------------------
     Map
     ----------------------------------------- */

  .contact-map-card {
    padding: 10px;
    border-radius: 22px;
  }

  .contact-map-head {
    display: block;
    padding: 15px 13px 12px;
  }

  .contact-map-head p {
    font-size: 14px;
  }

  .map-top-button {
    margin-top: 14px;
    padding: 11px 13px;
    font-size: 13px;
  }

  .contact-map {
    height: 315px;
    border-radius: 18px;
  }

  .contact-map iframe {
    min-height: 315px;
  }

  .map-actions {
    padding-top: 10px;
  }

  .map-link {
    font-size: 13px;
  }


  /* -----------------------------------------
     Form
     ----------------------------------------- */

  .contact-form {
    grid-template-columns: 1fr;
    gap: 15px;
  }

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

  .contact-form .field label {
    font-size: 13px;
  }

  .contact-form input,
  .contact-form select {
    height: 49px;
    font-size: 14px;
  }

  .contact-form textarea {
    min-height: 140px;
    font-size: 14px;
  }

  .contact-submit {
    min-height: 51px;
    font-size: 14px;
  }


  /* -----------------------------------------
     Consultation
     ----------------------------------------- */

  .contact-start-card {
    padding: 26px 23px;
    border-radius: 22px;
  }

  .contact-start-card h3 {
    font-size: 30px;
  }

  .contact-start-card > p {
    font-size: 14px;
  }

  .contact-start-card li {
    font-size: 14px;
  }


  /* -----------------------------------------
     Offices
     ----------------------------------------- */

  .contact-branch-section {
    padding-bottom: 78px;
  }

  .section-head {
    margin-bottom: 25px;
  }

  .section-head h2 {
    font-size: 40px;
    letter-spacing: -2px;
  }

  .office-section-side p {
    font-size: 14px;
  }

  .office-section-side > a {
    font-size: 13px;
  }

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

  .branch-card {
    padding: 23px;
  }

  .branch-card h3 {
    font-size: 22px;
  }

  .branch-card p,
  .branch-meta a {
    font-size: 14px;
  }
}


/* =========================================================
   SMALL PHONES
   ========================================================= */

@media (max-width: 390px) {

  .contact-hero h1 {
    font-size: 40px;
    letter-spacing: -2.4px;
  }

  .contact-hero-copy > p {
    font-size: 14px;
  }

  .contact-hero-art {
    transform: scale(.63);
    min-height: 245px;
  }

  .contact-detail {
    padding: 13px 10px;
  }

  .contact-detail-arrow {
    display: none !important;
  }

  .contact-information-card,
  .contact-form-card {
    padding: 21px;
  }

  .contact-map {
    height: 290px;
  }

  .contact-map iframe {
    min-height: 290px;
  }

  .section-head h2 {
    font-size: 36px;
  }
}


/* =========================================================
   VERY SMALL PHONES
   ========================================================= */

@media (max-width: 340px) {

  .contact-hero h1 {
    font-size: 37px;
  }

  .contact-hero-art {
    transform: scale(.57);
    min-height: 220px;
  }

  .contact-card h2 {
    font-size: 26px;
  }

  .contact-start-card h3 {
    font-size: 27px;
  }
}


/* =========================================================
   ACCESSIBILITY / REDUCED MOTION
   ========================================================= */

@media (prefers-reduced-motion: reduce) {

  .contact-art-sphere,
  .contact-globe-surface,
  .contact-paper-plane,
  .contact-art-note,
  .contact-art-caption,
  .contact-detail,
  .contact-submit {
    transition: none !important;
    animation: none !important;
  }

  .contact-detail:hover,
  .contact-submit:hover {
    transform: none;
  }
}


/* =========================================================
   END — CONTACT PAGE FINAL OVERRIDES
   ========================================================= */


/* =========================================================
   ORGANICMETRIC — EXISTING SPHERE DIGITAL-WORLD EFFECT
   IMPORTANT: This does NOT create a second globe.
   The canvas is drawn INSIDE .contact-art-sphere-core so the
   original round sphere remains the only globe on the page.
   ========================================================= */

.contact-art-sphere-core{
  position:absolute;
  inset:0;
  width:100%;
  height:100%;
  overflow:hidden;
  border-radius:50%;
  isolation:isolate;
  pointer-events:none;
}

.contact-globe-canvas{
  position:absolute;
  inset:0;
  display:block;
  width:100%;
  height:100%;
  border-radius:50%;
  pointer-events:none;
  opacity:.96;
}

/* The old SVG globe is no longer used. */
.contact-globe-svg{
  display:none !important;
}

@media(max-width:900px){
  .contact-globe-canvas{ opacity:.94; }
}

@media(prefers-reduced-motion:reduce){
  .contact-globe-canvas{ opacity:.9; }
}