/* ============================================================
   Pakistan & Counting — Contact Us (inner page)
   Shared header/footer/tokens in style.css; boxed headline,
   rainbow, ticker from industry-reports.css.
   ============================================================ */

/* ============================================================
   HERO  (GET IN TOUCH)   —  matches Figma, do not change
   ============================================================ */
.ct-hero{position:relative;margin-top:-84px;padding:170px 0 92px;text-align:center;overflow:hidden;
  background-color:#fff;
  background-image:
    repeating-linear-gradient(0deg,rgba(0,0,0,.06) 0 1px,transparent 1px 46px),
    repeating-linear-gradient(90deg,rgba(0,0,0,.06) 0 1px,transparent 1px 46px);
  background-size:46px 46px}
.ct-hero__inner{position:relative;z-index:1;max-width:1160px;margin:0 auto;padding:0 32px}
.ct-hero__kicker{display:inline-block;font-family:var(--ff);font-weight:700;
  font-size:clamp(16px,2.1vw,28px);letter-spacing:.2em;text-transform:uppercase;color:#000;margin-bottom:16px}
.ct-hero__title{font-family:var(--ff);font-weight:900;text-transform:uppercase;line-height:1;color:var(--dark)}
.ct-hero__title .ir-boxed{font-size:clamp(26px,5.4vw,60px);color:var(--dark);white-space:nowrap}
.ct-hero__sub{margin:40px auto 0;max-width:620px;font-family:var(--ff);font-weight:600;
  text-transform:none;color:#3a3a3a;font-size:clamp(16px,1.9vw,23px);line-height:1.5}

/* ============================================================
   CONTACT NOW   (green map panel  |  form)  — faint grid bg
   Figma-accurate:
   • The GREEN panel spans the FULL section height (rainbow bar down
     to the ticker) and bleeds to the left screen edge; a vertical
     "PAKISTAN & COUNTING" watermark runs down its left.
   • The MAP is ~square and STRADDLES the green panel's right edge —
     its left third sits over the green, its right two-thirds over the
     white — positioned in the upper area, with "VIEW LARGE ->" below.
   • The FORM occupies the right half; its right edge lines up with the
     header/footer container edge. Two equal fields per row.
   ============================================================ */
.ct-now{position:relative;overflow:hidden;background:#fff}
.ct-now::before{content:"";position:absolute;inset:0;z-index:0;pointer-events:none;
  background-image:
    repeating-linear-gradient(0deg,rgba(0,0,0,.06) 0 1px,transparent 1px 46px),
    repeating-linear-gradient(90deg,rgba(0,0,0,.06) 0 1px,transparent 1px 46px)}
/* same container as header/footer so the form edge aligns.
   Left zone (green + straddling map) ≈ 53%, form ≈ 47% — matches Figma. */
.ct-now__inner{position:relative;z-index:1;max-width:var(--wrap);margin:0 auto;padding:0 32px;
  display:grid;grid-template-columns:53% 47%;align-items:stretch;gap:0}

/* ---- GREEN MAP PANEL (left zone) ----
   The map + "View Large" FLOW together (padding positions the map, so the map is
   offset right to straddle the green, and "View Large" always sits right below it,
   centred under the map). The green block is an absolute full-height background that
   always stays behind them. */
.ct-map{position:relative;z-index:1;min-height:560px;text-align:center;padding:96px 1% 0 25%}
/* the green block: left ~55% of this zone (≈29% of the container), FULL column height
   (= form height), watermark from the side image, bleeding to the left screen edge */
.ct-map__panel{position:absolute;top:0;bottom:0;left:0;width:55%;z-index:0;
  background:var(--green)}
.ct-map__panel::before{content:"";position:absolute;top:0;bottom:0;right:100%;width:100vw;background:var(--green)}
/* the map — ~square, straddles the green's right edge onto the white, upper area */
.ct-map__frame{position:relative;z-index:1;display:block;width:100%;aspect-ratio:1/1.02;overflow:hidden;
  line-height:0;box-shadow:0 8px 26px rgba(0,0,0,.14)}
.ct-map__frame img{display:block;width:100%;height:100%;object-fit:cover}
/* "View Large ->" — flows right below the map, centred under it */
.ct-map__more{position:relative;z-index:2;display:inline-flex;align-items:center;gap:9px;margin-top:22px;
  font-family:var(--ff);font-weight:700;font-size:16px;letter-spacing:.06em;text-transform:uppercase;color:var(--dark)}
.ct-map__more svg{width:16px;height:16px;color:var(--green)}
.ct-map__more:hover{color:#0d2c22}

/* ---- FORM (right half) — vertical padding sets the section height ---- */
.ct-form-wrap{max-width:none;width:100%;padding:66px 0 78px;padding-left:52px}
.ct-form-head{font-family:var(--ff);font-weight:900;text-transform:uppercase;color:var(--dark);
  line-height:1;font-size:clamp(30px,3.9vw,48px);display:inline-block}
/* heading underline removed (client request) */
.ct-rule{display:none}
.ct-form__sub{margin:15px 0 0;font-family:var(--ff);font-weight:600;color:#3a3a3a;
  font-size:clamp(14px,1.2vw,16px)}
.ct-form{margin-top:30px}
/* spam honeypot — visually hidden, off-screen, never focusable/announced */
.ct-hp{position:absolute!important;left:-9999px!important;width:1px;height:1px;
  overflow:hidden;opacity:0;pointer-events:none}
/* submission result banner (success / error), shown above the form after POST */
.ct-alert{margin-top:22px;padding:14px 18px;border-radius:6px;font-family:var(--ff);
  font-weight:600;font-size:15px;line-height:1.5;border:1px solid transparent}
.ct-alert a{font-weight:800;text-decoration:underline}
.ct-alert--ok{background:#e9f9f2;border-color:#26B685;color:#137a56}
.ct-alert--bad{background:#fdecef;border-color:#EF2167;color:#b3123f}
.ct-form__grid{display:grid;grid-template-columns:1fr 1fr;gap:16px}
.ct-field{font-family:var(--ff);font-weight:500;font-size:15px;color:#3a3a3a;
  width:100%;padding:16px 18px;border:1px solid #e2e2e2;border-radius:6px;background:#fff;
  transition:border-color .15s,box-shadow .15s}
.ct-field::placeholder{color:#9b9b9b}
.ct-field:focus{outline:none;border-color:var(--green);box-shadow:0 0 0 3px rgba(38,182,133,.12)}
select.ct-field{appearance:none;-webkit-appearance:none;cursor:pointer;color:#9b9b9b;padding-right:44px;
  background-image:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='16' height='16' fill='none' stroke='%2326B685' stroke-width='2.4'%3E%3Cpath d='M4 6l4 4 4-4'/%3E%3C/svg%3E");
  background-repeat:no-repeat;background-position:right 18px center}
.ct-textarea{position:relative;margin-top:16px}
textarea.ct-field{min-height:150px;resize:vertical;line-height:1.55}
.ct-hint{position:absolute;right:16px;bottom:14px;font-family:var(--ff);font-size:12px;color:#a6a6a6;pointer-events:none}
.ct-submit{margin-top:26px;font-family:var(--ff);font-weight:900;font-size:clamp(15px,1.5vw,18px);
  letter-spacing:.02em;text-transform:uppercase;padding:16px 40px;border-radius:0;box-shadow:6px 7px 0 0 var(--dark)}
.ct-submit:hover{box-shadow:6px 7px 0 0 var(--dark);transform:translateY(-1px)}

/* ============================================================
   RESPONSIVE
   ============================================================ */
/* ---- TABLET & MOBILE (≤960): single column, full-bleed green band with a
        vertical watermark on the left (CSS text — sized/controlled, unlike the
        stretched side image), the map + "View Large" centred beside it,
        then the form ---- */
@media (max-width:960px){
  .ct-now__inner{grid-template-columns:1fr;gap:0;padding:0}
  /* map first — full-bleed green panel (watermark text removed, client request) */
  .ct-map{order:1;position:relative;min-height:0;overflow:hidden;text-align:center;
    padding:44px 32px 48px;background:var(--green)}
  .ct-map__panel{display:none}
  .ct-map::before{content:none}
  .ct-map__frame{position:relative;z-index:1;display:block;width:100%;max-width:520px;margin:0 auto;
    inset:auto;aspect-ratio:16/10;box-shadow:0 12px 30px rgba(0,0,0,.20)}
  .ct-map__more{position:relative;z-index:1;display:inline-flex;margin:20px 0 0;inset:auto;color:var(--dark)}
  .ct-map__more svg{color:var(--dark)}
  /* form below, with its own side padding */
  .ct-form-wrap{order:2;padding:48px 32px 10px}
}
@media (max-width:600px){
  .ct-hero{margin-top:-70px;padding:120px 0 56px}
  .ct-hero__title .ir-boxed{font-size:clamp(20px,7.4vw,40px)}
  .ct-map{padding:34px 20px 38px 66px}
  .ct-map::before{left:2px;font-size:clamp(34px,13vw,50px)}
  .ct-map__frame{aspect-ratio:4/3}
  .ct-form-wrap{padding:40px 20px 8px}
  .ct-form__grid{grid-template-columns:1fr;gap:14px}
}