/* ============================================================
   Trans-Digi Global — contact.html
   Extends the homepage system (style.css). Per-page styles only.
   ============================================================ */

/* ---- reach-first hero band (below page-hero) ---- */
.reach{padding:60px 0;background:var(--bg)}
.reach__grid{display:grid;grid-template-columns:1.05fr .95fr;gap:26px;align-items:stretch;margin-top:8px}

/* big WhatsApp-first action card (dark, hero of the page) */
.reach-wa{position:relative;border-radius:16px;overflow:hidden;color:#fff;padding:40px 40px 36px;background:
  radial-gradient(90% 130% at 80% 15%,#0e4a2d 0%,#083020 55%,#052015 100%)}
.reach-wa::before{content:"";position:absolute;inset:0;background:
  repeating-linear-gradient(115deg,rgba(255,255,255,.02) 0 2px,transparent 2px 26px);opacity:.55;pointer-events:none}
.reach-wa>*{position:relative}
.reach-wa__eyebrow{font-family:var(--font-head);font-weight:600;text-transform:uppercase;letter-spacing:.16em;font-size:.72rem;color:var(--lime)}
.reach-wa h2{font-family:var(--font-head);font-weight:700;color:#fff;font-size:clamp(1.5rem,2.4vw,2rem);line-height:1.12;margin-top:8px;letter-spacing:-.01em}
.reach-wa__lead{color:#cbd7d0;font-size:.95rem;line-height:1.65;margin:12px 0 22px;max-width:440px}
.reach-wa .btn--wa{font-size:.92rem;padding:16px 26px}
.reach-wa__promise{display:inline-flex;align-items:center;gap:9px;margin-top:20px;color:#dbe6df;font-size:.86rem}
.reach-wa__promise svg{width:19px;height:19px;stroke:var(--lime);stroke-width:1.7;fill:none;flex:none}
.reach-wa__jason{display:flex;align-items:center;gap:12px;margin-top:24px;padding-top:22px;border-top:1px solid rgba(255,255,255,.12)}
.reach-wa__avatar{width:46px;height:46px;border-radius:50%;background:rgba(107,192,84,.16);display:grid;place-items:center;flex:none}
.reach-wa__avatar svg{width:24px;height:24px;stroke:var(--lime);stroke-width:1.6;fill:none}
.reach-wa__jason strong{display:block;color:#fff;font-family:var(--font-head);font-weight:600;font-size:.95rem}
.reach-wa__jason span{font-size:.8rem;color:#9fb3a8}

/* stacked direct-contact cards (right column) */
.reach-list{display:flex;flex-direction:column;gap:14px}
.contact-card{display:flex;gap:15px;align-items:flex-start;background:var(--bg);border:1px solid var(--line);border-radius:var(--radius);box-shadow:var(--shadow);padding:22px 24px;transition:.2s}
a.contact-card:hover{transform:translateY(-2px);box-shadow:0 16px 34px rgba(4,24,14,.1);border-color:#cfe0d5}
.contact-card__ic{width:46px;height:46px;border-radius:12px;background:var(--green-850);display:grid;place-items:center;flex:none}
.contact-card__ic svg{width:22px;height:22px;stroke:#fff;stroke-width:1.6;fill:none}
.contact-card__body{min-width:0}
.contact-card__label{font-family:var(--font-head);font-weight:600;text-transform:uppercase;letter-spacing:.1em;font-size:.66rem;color:var(--accent);display:block;margin-bottom:4px}
.contact-card__value{font-family:var(--font-head);font-weight:700;color:var(--ink);font-size:1.02rem;line-height:1.25}
.contact-card__meta{font-size:.82rem;color:var(--body);margin-top:3px}
.contact-card__note{display:inline-flex;align-items:center;gap:5px;font-size:.72rem;color:#9aa39d;margin-top:5px}
.contact-card__note svg{width:13px;height:13px;stroke:currentColor;stroke-width:1.8;fill:none;flex:none}

/* ---- RFQ / enquiry form + engineering booking ---- */
.enquiry{padding:60px 0;background:var(--bg-soft)}
.enquiry__grid{display:grid;grid-template-columns:1.15fr .85fr;gap:26px;align-items:start;margin-top:38px}
.form-card{background:var(--bg);border:1px solid var(--line);border-radius:var(--radius);box-shadow:var(--shadow);padding:32px 32px 30px}
.form-card__head h3{font-family:var(--font-head);font-weight:700;color:var(--ink);font-size:1.28rem}
.form-card__head p{font-size:.88rem;margin:6px 0 4px}
.form-card__head .divider{margin:12px 0 22px}
.rfq-form{display:grid;grid-template-columns:1fr 1fr;gap:16px}
.field{display:flex;flex-direction:column;gap:6px}
.field--full{grid-column:1/-1}
.field label{font-family:var(--font-head);font-weight:600;color:var(--ink);font-size:.8rem}
.field label .req{color:var(--accent)}
.field input,.field select,.field textarea{width:100%;border:1px solid var(--line);border-radius:9px;padding:12px 14px;font-family:var(--font-body);font-size:.9rem;color:var(--ink);background:#fff;transition:.18s}
.field input::placeholder,.field textarea::placeholder{color:#a7b1ab}
.field input:focus,.field select:focus,.field textarea:focus{outline:none;border-color:var(--accent);box-shadow:0 0 0 3px rgba(63,155,69,.12)}
.field textarea{resize:vertical;min-height:110px}
.field select{appearance:none;background-image:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%235a6660' stroke-width='2'%3E%3Cpath d='m6 9 6 6 6-6'/%3E%3C/svg%3E");background-repeat:no-repeat;background-position:right 12px center;background-size:16px;padding-right:38px}
.rfq-form__submit{grid-column:1/-1;display:flex;flex-wrap:wrap;align-items:center;gap:16px;margin-top:4px}
.rfq-form__submit .btn{flex:none}
.rfq-form__alt{font-size:.82rem;color:var(--body)}
.rfq-form__alt a{color:var(--accent);font-weight:600}
.form-note{display:flex;align-items:flex-start;gap:8px;margin-top:16px;padding:12px 14px;background:var(--bg-soft);border:1px dashed #cdd8d1;border-radius:10px;font-size:.78rem;color:#6b756f}
.form-note svg{width:16px;height:16px;stroke:var(--accent);stroke-width:1.8;fill:none;flex:none;margin-top:1px}

/* engineering-services booking (right column of enquiry) */
.eng-card{background:var(--bg);border:1px solid var(--line);border-radius:var(--radius);box-shadow:var(--shadow);padding:28px 28px 26px}
.eng-card__eyebrow{font-family:var(--font-head);font-weight:600;text-transform:uppercase;letter-spacing:.14em;font-size:.7rem;color:var(--accent)}
.eng-card h3{font-family:var(--font-head);font-weight:700;color:var(--ink);font-size:1.22rem;margin-top:8px;line-height:1.2}
.eng-card>p{font-size:.86rem;margin:10px 0 4px}
.eng-card .divider{margin:12px 0 18px}
.eng-list{display:flex;flex-direction:column;gap:12px}
.eng-item{display:flex;gap:13px;align-items:flex-start}
.eng-item__ic{width:40px;height:40px;border-radius:10px;background:rgba(63,155,69,.09);display:grid;place-items:center;flex:none}
.eng-item__ic svg{width:20px;height:20px;stroke:var(--accent);stroke-width:1.7;fill:none}
.eng-item strong{display:block;font-family:var(--font-head);font-weight:700;color:var(--ink);font-size:.92rem;margin-bottom:2px}
.eng-item span{font-size:.8rem;line-height:1.45;display:block}
.eng-card__cta{margin-top:22px;padding-top:20px;border-top:1px solid var(--line)}
.eng-card__cta .btn{width:100%}

/* ---- closing cta wrapper ---- */
.contact-cta{padding:60px 0;background:var(--bg)}
.contact-cta .cta-band{margin-top:0}

/* ============================================================
   COMPACT DESKTOP SCALE (matches homepage/about 75% density)
   ============================================================ */
@media(min-width:992px){
  .reach{padding:45px 0}
  .reach__grid{gap:20px}
  .reach-wa{padding:30px 30px 28px}
  .reach-list{gap:11px}
  .contact-card{padding:17px 19px}
  .contact-card__ic{width:40px;height:40px}
  .enquiry{padding:45px 0}
  .enquiry__grid{gap:20px;margin-top:29px}
  .form-card{padding:26px 26px 24px}
  .rfq-form{gap:13px}
  .eng-card{padding:22px 22px 20px}
  .eng-item__ic{width:34px;height:34px}
  .contact-cta{padding:45px 0}
}

/* ============================================================
   RESPONSIVE
   ============================================================ */
@media(max-width:900px){
  .reach__grid{grid-template-columns:1fr}
  .enquiry__grid{grid-template-columns:1fr}
  /* iOS zoom guard: keep form inputs >=16px on mobile (beats .field specificity) */
  .field input,.field select,.field textarea{font-size:16px}
}
@media(max-width:560px){
  .reach-wa{padding:30px 24px 28px}
  .form-card{padding:24px 20px 22px}
  .rfq-form{grid-template-columns:1fr}
  .rfq-form__submit .btn{width:100%}
  .rfq-form__alt{width:100%;text-align:center}
}