/* ═══════════════════════════════════════════
   CONTACT PAGE
   Colors, fonts and type tokens come from global.css
   (this file no longer redefines :root — that was
    forcing Plus Jakarta Sans / DM Sans instead of Gotham)
═══════════════════════════════════════════ */

/* ═══════════════════════════════
   TRUST RIBBON
═══════════════════════════════ */

#ribbon{background:#f3f2ef;border-bottom:1px solid var(--border);padding:9px 0;}

.rib-row{display:flex;justify-content:center;flex-wrap:wrap;}

.ri{
  display:inline-flex;align-items:center;gap:7px;
  font-family:var(--fb);font-size:var(--fs-tag);font-weight:var(--fw-med);
  color:var(--g1);padding:3px 24px;position:relative;
}

.ri+.ri::before{content:'';position:absolute;left:0;top:50%;transform:translateY(-50%);width:1px;height:13px;background:var(--border);}

.ri i{color:var(--red);font-size:13px;}

/* ═══════════════════════════════
   HERO
═══════════════════════════════ */

#hero{
  background:#fff;
  display:grid;
  grid-template-columns:1fr 1fr;
  min-height:420px;
  overflow:hidden;
}

.hero-left{
  padding:64px 52px 64px 0;
  padding-left:max(20px, calc((100vw - 1200px)/2));
  display:flex;flex-direction:column;justify-content:center;
  min-width:0;
}

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

.hero-eyebrow{
  display:inline-flex;align-items:center;gap:10px;
  font-family:var(--fb);font-size:var(--fs-eye);font-weight:var(--fw-bold);
  letter-spacing:2px;text-transform:uppercase;color:var(--red);
  line-height:var(--lh-eye);
  margin-bottom:20px;
}

.hero-eyebrow::after{content:'';width:40px;height:2px;background:var(--red);flex-shrink:0;}

.hero-h{
  font-family:var(--fh);
  font-size:var(--fs-h1);
  font-weight:var(--fw-bold);color:var(--ink);
  line-height:var(--lh-h1);letter-spacing:-.02em;
  margin-bottom:16px;
}

.hero-h em{color:var(--red);font-style:normal;display:block;}

.hero-p{
  font-family:var(--fb);font-size:var(--fs-lead);font-weight:var(--fw-light);
  color:var(--g2);line-height:var(--lh-lead);max-width:400px;
}

.hero-right{position:relative;overflow:hidden;background:var(--surface);}

.hero-right img{
  position:absolute;inset:0;width:100%;height:100%;
  object-fit:cover;
  filter:brightness(.82) saturate(1.05);
  transition:transform .8s ease;
}

.hero-right:hover img{transform:scale(1.04);}

.hero-right::before{
  content:'';
  position:absolute;left:-2px;top:0;bottom:0;
  width:90px;z-index:2;background:#fff;
  clip-path:polygon(0 0,55% 0,0 100%);
}

.hero-right::after{
  content:'';position:absolute;bottom:0;left:0;right:0;
  height:4px;background:var(--red);z-index:3;
}

/* Floating info card over the image */

.hero-float-card{
  position:absolute;
  bottom:32px;right:32px;z-index:4;
  background:#fff;border-radius:12px;
  padding:18px 22px;
  box-shadow:0 12px 40px rgba(0,0,0,.15);
  display:flex;align-items:center;gap:14px;
  min-width:230px;max-width:calc(100% - 64px);
  animation:card-in .8s .4s both;
}

@keyframes card-in{from{opacity:0;transform:translateY(12px);}to{opacity:1;transform:none;}}

.hfc-icon{
  width:48px;height:48px;border-radius:10px;
  background:var(--red-bg);
  display:flex;align-items:center;justify-content:center;
  font-size:22px;color:var(--red);flex-shrink:0;
}

.hfc-num{
  font-family:var(--fh);font-size:var(--fs-h4);font-weight:var(--fw-bold);
  color:var(--ink);line-height:1;
}

.hfc-label{
  font-family:var(--fb);font-size:var(--fs-small);color:var(--g2);
  margin-top:3px;line-height:var(--lh-snug);
}

/* ISO badge top-right */

.hero-iso{
  position:absolute;top:24px;right:24px;z-index:4;
  background:var(--red);color:#fff;
  font-family:var(--fb);font-size:var(--fs-tag);font-weight:var(--fw-bold);
  letter-spacing:1.5px;text-transform:uppercase;
  padding:6px 14px;border-radius:30px;
}

/* ═══════════════════════════════
   MAIN CONTACT SECTION
═══════════════════════════════ */

#contact-main{
  padding:64px 0 72px;
  background:var(--surface);
  border-top:1px solid var(--border);
}

.contact-grid{
  display:grid;
  grid-template-columns:380px 1fr;
  gap:32px;
  align-items:start;
}

.contact-info{display:flex;flex-direction:column;gap:0;min-width:0;}

/* Intro card */

.ci-intro{
  background:var(--ink2);border-radius:12px 12px 0 0;
  padding:32px 28px;
  position:relative;overflow:hidden;
}

.ci-intro::before{content:'';position:absolute;bottom:-40px;right:-30px;width:140px;height:140px;border-radius:50%;background:rgba(192,57,43,.08);}

.ci-intro-h{font-family:var(--fh);font-size:var(--fs-h4);font-weight:var(--fw-bold);color:#fff;margin-bottom:8px;letter-spacing:-.01em;line-height:var(--lh-h4);position:relative;z-index:1;}

.ci-intro-h em{color:var(--red);font-style:normal;}

.ci-intro-p{font-family:var(--fb);font-size:var(--fs-small);color:rgba(255,255,255,.45);line-height:var(--lh-body);position:relative;z-index:1;}

/* Contact details list */

.ci-details{
  background:#fff;border:1.5px solid var(--border);border-top:none;
  border-radius:0 0 4px 4px;
  overflow:hidden;
}

.ci-row{
  display:flex;align-items:flex-start;gap:14px;
  padding:18px 22px;
  border-bottom:1px solid var(--border);
  transition:background .18s;
  text-decoration:none;
}

.ci-row:last-child{border-bottom:none;}
.ci-row:hover{background:var(--red-bg);}

.ci-row-icon{
  width:40px;height:40px;border-radius:8px;
  background:var(--red-bg);
  display:flex;align-items:center;justify-content:center;
  font-size:17px;color:var(--red);flex-shrink:0;
  margin-top:1px;
  transition:background .18s,color .18s;
}

.ci-row:hover .ci-row-icon{background:var(--red);color:#fff;}

.ci-row-label{font-family:var(--fb);font-size:var(--fs-eye);font-weight:var(--fw-bold);letter-spacing:1.5px;text-transform:uppercase;color:var(--g3);margin-bottom:3px;line-height:var(--lh-eye);}

.ci-row-val{font-family:var(--fb);font-size:var(--fs-small);font-weight:var(--fw-bold);color:var(--ink);line-height:var(--lh-small);}

.ci-row-link{
  display:inline-flex;align-items:center;gap:4px;
  font-family:var(--fb);font-size:var(--fs-small);font-weight:var(--fw-bold);color:var(--red);
  margin-top:4px;text-decoration:none;
}

.ci-row-link i{font-size:11px;transition:transform .18s;}

.ci-row:hover .ci-row-link i{transform:translateX(3px);}

/* Channels strip below details */

.ci-channels{
  display:grid;grid-template-columns:1fr 1fr;
  gap:8px;margin-top:8px;
}

.ci-ch{
  display:flex;align-items:center;gap:10px;
  padding:12px 14px;border-radius:8px;
  border:1.5px solid var(--border);background:#fff;
  text-decoration:none;min-width:0;
  transition:border-color .18s,background .18s;
}

.ci-ch:hover{border-color:var(--red);background:var(--red-bg);}

.ci-ch-icon{
  width:36px;height:36px;border-radius:50%;
  display:flex;align-items:center;justify-content:center;
  font-size:16px;color:#fff;flex-shrink:0;
}

.ci-ch-icon.green{background:#22c55e;}
.ci-ch-icon.blue{background:#0077b5;}

.ci-ch-label{font-family:var(--fb);font-size:var(--fs-small);font-weight:var(--fw-bold);color:var(--ink);line-height:var(--lh-small);}

/* ── Right: Form ── */

.form-card{
  background:#fff;border-radius:12px;
  border:1.5px solid var(--border);
  padding:40px 36px;
  box-shadow:0 4px 24px rgba(0,0,0,.05);
  min-width:0;
}

.form-h{font-family:var(--fh);font-size:var(--fs-h3);font-weight:var(--fw-bold);color:var(--ink);margin-bottom:4px;letter-spacing:-.01em;line-height:var(--lh-h3);}

.form-h em{color:var(--red);font-style:normal;}

.form-rule{width:40px;height:3px;background:var(--red);border-radius:2px;margin:12px 0 28px;}

.form-row{display:grid;grid-template-columns:1fr 1fr;gap:14px;margin-bottom:14px;}

.f-field{display:flex;flex-direction:column;min-width:0;}

/* was inline style="margin-bottom:14px" in the blade */
.f-field--gap{margin-bottom:14px;}

.f-field label{font-family:var(--fb);font-size:var(--fs-eye);font-weight:var(--fw-bold);letter-spacing:1.5px;text-transform:uppercase;color:var(--g2);margin-bottom:6px;line-height:var(--lh-eye);}

.f-field label .req{color:var(--red);}

.f-field input,.f-field select,.f-field textarea{
  font-family:var(--fb);font-size:var(--fs-small);color:var(--ink);
  border:1.5px solid var(--border);border-radius:8px;
  padding:12px 16px;background:#fff;outline:none;
  transition:border-color .2s,box-shadow .2s;width:100%;
}

.f-field input:focus,.f-field select:focus,.f-field textarea:focus{
  border-color:var(--red);box-shadow:0 0 0 3px rgba(192,57,43,.08);
}

.f-field input::placeholder,.f-field textarea::placeholder{color:var(--g4);}

.f-field textarea{resize:vertical;min-height:130px;}

.form-footer{margin-top:18px;}
.btn-send{
  position:relative;
  z-index:1;
  display:inline-flex;align-items:center;gap:8px;
  background:transparent;
  color:#fff;border:none;
  border-radius:0;
  padding:13px 34px;
  font-family:var(--fb);font-size:var(--fs-btn);font-weight:var(--fw-bold);
  white-space:nowrap;cursor:pointer;
  transition:transform .18s;
}

.btn-send::before{
  content:"";
  position:absolute;
  top:0;left:0;
  width:100%;height:100%;
  background-color:var(--red);
  transform:skew(-20deg);
  z-index:-1;
  transition:background .2s;
}

.btn-send:hover{transform:translateY(-2px);}
.btn-send:hover::before{background-color:var(--red-d);}

/* ═══════════════════════════════
   MAP
═══════════════════════════════ */

#map-section{border-top:1px solid var(--border);}

.map-grid{display:grid;grid-template-columns:1fr 1fr;min-height:320px;}

.map-wrap{position:relative;overflow:hidden;min-height:320px;background:#e8eaed;}

.map-static{position:absolute;inset:0;display:flex;align-items:center;justify-content:center;}

.map-static::before{
  content:'';position:absolute;inset:0;
  background-image:linear-gradient(rgba(175,180,185,.35) 1px,transparent 1px),linear-gradient(90deg,rgba(175,180,185,.35) 1px,transparent 1px);
  background-size:38px 38px;
}

.map-road{position:absolute;background:rgba(255,255,255,.75);}

/* NOTE: these were .h1 / .h2 which collided with the global heading
   rules in global.css. Renamed — update the blade to match:
   <div class="map-road road-h1"></div>  etc. */
.map-road.road-h1{top:42%;left:0;right:0;height:9px;transform:rotate(-2deg);}
.map-road.road-h2{top:68%;left:0;right:0;height:5px;transform:rotate(1deg);}
.map-road.road-v1{left:33%;top:0;bottom:0;width:7px;transform:rotate(1.5deg);}
.map-road.road-v2{left:60%;top:0;bottom:0;width:4px;}

.map-pin{display:flex;flex-direction:column;align-items:center;position:relative;z-index:2;animation:pin-bounce 2.2s ease-in-out infinite;}

@keyframes pin-bounce{0%,100%{transform:translateY(0);}50%{transform:translateY(-10px);}}

.map-pin i{font-size:54px;color:var(--red);filter:drop-shadow(0 6px 14px rgba(192,57,43,.4));}

.map-pin-label{background:#fff;border-radius:6px;padding:5px 12px;font-family:var(--fb);font-size:var(--fs-small);font-weight:var(--fw-bold);color:var(--ink);box-shadow:0 2px 12px rgba(0,0,0,.12);margin-top:6px;white-space:nowrap;}

.map-dir-btn{
  position:absolute;bottom:18px;left:50%;transform:translateX(-50%);
  display:inline-flex;align-items:center;gap:8px;
  background:var(--red);color:#fff;border:none;border-radius:30px;
  padding:10px 22px;font-family:var(--fb);font-size:var(--fs-small);font-weight:var(--fw-bold);
  box-shadow:0 4px 16px rgba(192,57,43,.35);cursor:pointer;white-space:nowrap;z-index:3;
  text-decoration:none;
  transition:transform .18s,box-shadow .18s;
}

.map-dir-btn:hover{transform:translateX(-50%) translateY(-2px);box-shadow:0 8px 22px rgba(192,57,43,.4);color:#fff;}

.map-right{
  padding:48px 52px;background:#fff;
  display:flex;flex-direction:column;justify-content:center;
  min-width:0;
}

.map-right-h{font-family:var(--fh);font-size:var(--fs-h3);font-weight:var(--fw-bold);color:var(--ink);margin-bottom:4px;letter-spacing:-.01em;line-height:var(--lh-h3);}

.map-right-h em{color:var(--red);font-style:normal;}

.map-right-rule{width:36px;height:3px;background:var(--red);border-radius:2px;margin:12px 0 22px;}

.map-info-list{display:flex;flex-direction:column;gap:14px;}

.mi-item{display:flex;align-items:flex-start;gap:12px;}

.mi-icon{font-size:16px;color:var(--red);flex-shrink:0;margin-top:2px;}

.mi-label{font-family:var(--fb);font-size:var(--fs-small);font-weight:var(--fw-bold);color:var(--ink);margin-bottom:2px;line-height:var(--lh-small);}

.mi-val{font-family:var(--fb);font-size:var(--fs-small);color:var(--g2);line-height:var(--lh-body);}

/* ═══════════════════════════════
   FOOTER CERTS
═══════════════════════════════ */

.foot-certs{display:flex;flex-wrap:wrap;gap:8px;}

.foot-cert{border:1px solid rgba(255,255,255,.12);border-radius:4px;padding:8px 12px;text-align:center;}

.foot-cert .ci{font-family:var(--fh);font-size:var(--fs-small);font-weight:var(--fw-med);color:var(--red);display:block;line-height:var(--lh-eye);}

.foot-cert p{font-family:var(--fb);font-size:var(--fs-small);color:rgba(255,255,255,.35);margin:3px 0 0;line-height:var(--lh-eye);}

/* ════════════════════════════════════════
   RESPONSIVE — standard breakpoints
   1024 tablet landscape | 768 tablet portrait | 480 phone
   (was 6 overlapping blocks fighting with !important)
════════════════════════════════════════ */

@media(max-width:1024px){
  .contact-grid{grid-template-columns:320px 1fr;gap:24px;}
  .map-right{padding:36px 32px;}
  .form-card{padding:32px 26px;}
}

@media(max-width:768px){
  #hero{grid-template-columns:1fr;min-height:auto;padding-top:0px!important;padding-bottom:0px!importantimportant;}

  .hero-right{
    order:1;
    height:auto;aspect-ratio:16/10;
  }
  .hero-right::before{display:none;}

  /* FIXED: ISO badge and float card were both absolutely positioned
     top-right / bottom-right and collided on narrow screens.
     Both now sit in normal flow, stacked under the image. */
  .hero-iso{
    position:static;
    display:inline-flex;align-items:center;gap:6px;
    margin:14px 20px 0;
  }

  .hero-float-card{
    position:static;
    margin:12px 20px 0;
    min-width:0;max-width:none;
    box-shadow:none;
    border:1.5px solid var(--border);
    animation:none;
  }

  /* FIXED: 44px top padding here was the white gap above the image */
  .hero-left{
    order:2;
    padding:24px 20px 32px;
  }

  #contact-main{padding:40px 0 56px;}
  .contact-grid{grid-template-columns:1fr;gap:24px;}
  .ci-intro{border-radius:10px 10px 0 0;padding:26px 20px;}
  .ci-channels{grid-template-columns:1fr 1fr;}

  .form-card{padding:26px 20px;}

  .map-grid{grid-template-columns:1fr;}
  .map-wrap{min-height:280px;}
  .map-right{padding:28px 20px;}
}

@media(max-width:480px){
  .hero-right{aspect-ratio:3/2;}
  .hero-left{padding:20px 18px 28px;}
  .hero-iso,.hero-float-card{margin-left:18px;margin-right:18px;}

  #contact-main{padding:32px 0 48px;}
  .ci-row{padding:16px;}
  .ci-channels{grid-template-columns:1fr;}

  .form-card{padding:22px 16px;}
  .form-row{grid-template-columns:1fr;}
  .btn-send{width:100%;justify-content:center;}

  .map-wrap{min-height:240px;}
  .map-right{padding:24px 16px;}
}