/* =====================================================================
   Contact (rebuilt 2026-09-07). One dark sheet for both editions:
   a large sentence-case title, the email with two outlined chat buttons
   beside it, one rule, then the enquiry form (one question at a time,
   Next until the last step) on the left and a small static globe with
   the offices written under it on the right. Logical properties
   throughout; the globe's dots are physical (they are projected).
   No clocks, no scramble, no boxes: rows and hairlines only.
   ===================================================================== */
.cp{
  --pad:clamp(1rem, 3vw, 2.5rem);
  --l1:color-mix(in srgb, var(--paper) 22%, transparent);
  --l2:color-mix(in srgb, var(--paper) 38%, transparent);
  --t2:color-mix(in srgb, var(--paper) 62%, transparent);
  --t3:color-mix(in srgb, var(--paper) 45%, transparent);
  --warn:#E0A16A;
  display:block; background:var(--ink); color:var(--paper); overflow-x:clip;
}
.cp p{margin:0}
.cp a{color:inherit}
.cp .mono{font-family:var(--mono); font-size:.66rem; letter-spacing:.12em; text-transform:uppercase}
[dir="rtl"] .cp .mono{letter-spacing:0; font-size:.74rem}

/* ---- title, email, the two buttons, one rule ------------------------ */
.cp-hero{padding:max(14rem, 26vh) var(--pad) 0}
.cp-h{
  font-family:var(--display); font-weight:400; font-size:clamp(3.6rem, 10vw, 10rem); line-height:1.02; letter-spacing:.005em;
  margin:0 0 clamp(1.8rem, 3vw, 2.6rem); max-width:15ch; text-wrap:balance;
}
[dir="rtl"] .cp-h{letter-spacing:0; line-height:1.3}
.cp-reach{display:flex; flex-wrap:wrap; align-items:center; gap:1.2rem clamp(1.6rem, 4vw, 3.5rem); padding-bottom:clamp(1.6rem, 3vw, 2.4rem); border-bottom:1px solid var(--l2)}
.cp-mail{font-family:var(--sans); font-weight:400; font-size:clamp(1.5rem, 2.9vw, 2.7rem); line-height:1.1; text-decoration:none; letter-spacing:-.01em; transition:color .3s}
.cp-mail:hover{color:var(--t2)}
.cp-chat{display:flex; gap:.6rem}
.cp-btn{
  display:inline-flex; align-items:center; gap:.55rem; padding:.72rem 1.1rem; border:1px solid var(--l2); border-radius:999px;
  text-decoration:none; color:var(--paper); transition:border-color .3s, background .3s;
}
.cp-btn svg{width:15px; height:15px; display:block}
.cp-btn:hover, .cp-btn:active{border-color:var(--paper); background:color-mix(in srgb, var(--paper) 6%, transparent)}

/* ---- two columns ---------------------------------------------------- */
.cp-grid{display:grid; grid-template-columns:minmax(0, 1fr) minmax(0, .82fr); gap:3rem clamp(3rem, 7vw, 8rem); padding:clamp(2.6rem, 5vh, 4rem) var(--pad) clamp(5rem, 10vh, 8rem)}
.cp-k{display:block; color:var(--t2); margin-bottom:clamp(2.2rem, 4vh, 3.2rem)}

/* ---- the form: one step at a time ------------------------------------ */
.cp-form{max-width:38rem}
.cp-step{display:none; border:0; padding:0; margin:0; min-width:0}
.cp-step.is-on{display:block; animation:cp-in .24s ease both}
@keyframes cp-in{from{opacity:0; transform:translateY(8px)} to{opacity:1; transform:none}}
.cp-q{font-size:clamp(1.3rem, 1.8vw, 1.6rem); font-weight:500; line-height:1.25; padding:0; margin:0 0 .55rem}
.cp-q:focus-visible{outline:1px solid var(--l2); outline-offset:6px}
.cp-hint{color:var(--t2); font-size:.95rem; line-height:1.5; margin:0 0 1.6rem}
.cp-step > .cp-opts, .cp-step > .cp-fields, .cp-step > .cp-field{margin-top:.4rem}
.cp-opts{display:grid; grid-template-columns:1fr 1fr; gap:0 2.5rem; border-top:1px solid var(--l1)}
.cp-opt{position:relative; display:flex; justify-content:space-between; align-items:center; gap:1rem; padding:1rem 0; border-bottom:1px solid var(--l1); cursor:pointer; font-size:1.02rem; line-height:1.3; transition:border-color .3s}
.cp-opt:hover{border-bottom-color:var(--l2)}
.cp-opt input{position:absolute; inset:0; opacity:0; margin:0; cursor:pointer}
.cp-opt i{flex:0 0 auto; width:.8rem; height:.8rem; border:1px solid var(--l2); border-radius:2px; transition:background .2s, border-color .2s}
.cp-opts.is-one .cp-opt i{border-radius:50%}
.cp-opt-t{display:block; min-width:0}
.cp-opt-t small{display:block; font-size:.78rem; color:var(--t3); margin-top:.2rem; line-height:1.35}
.cp-ctx{display:block; color:var(--t2); margin-bottom:.9rem}
.cp-opt input:checked ~ i{background:var(--paper); border-color:var(--paper)}
.cp-opt input:focus-visible ~ i{outline:2px solid var(--paper); outline-offset:3px}
.cp-alert{display:block; color:var(--warn); margin-top:1rem}
.cp-fields{display:grid; grid-template-columns:1fr 1fr; gap:0 2.5rem}
.cp-field{position:relative; display:block; padding:1rem 0 .55rem; border-bottom:1px solid var(--l1); transition:border-color .3s}
.cp-field:focus-within{border-bottom-color:var(--paper)}
.cp-field.has-error{border-bottom-color:var(--warn)}
.cp-lab{display:block; color:var(--t2); margin-bottom:.3rem}
.cp-field-hint{display:block; color:var(--t2); font-size:.82rem; line-height:1.5; margin-top:.4rem}
.cp-in{width:100%; background:none; border:0; outline:0; color:var(--paper); font:inherit; font-size:1.05rem; line-height:1.4; padding:.15rem 0; border-radius:0; -webkit-appearance:none}
.cp-in::placeholder{color:var(--t3)}
textarea.cp-in{resize:vertical; min-height:5.5rem}
.cp-err{display:block; margin-top:.4rem; color:var(--warn)}
.cp-nav{display:flex; justify-content:space-between; align-items:center; gap:1.5rem; margin-top:clamp(2rem, 4vh, 2.8rem)}
.cp-back{background:none; border:0; padding:.4rem 0; color:var(--t2); cursor:pointer; transition:color .3s}
.cp-back:hover{color:var(--paper)}
.cp-next{
  display:inline-flex; align-items:center; gap:.9rem; margin-inline-start:auto; background:none; border:0; padding:.4rem 0; cursor:pointer;
  color:var(--paper); font-family:var(--sans); font-weight:500; font-size:1.05rem; letter-spacing:.06em; text-transform:uppercase; line-height:1;
}
.cp-next:disabled{opacity:.45; cursor:default}
.cp-arr{display:inline-block; font-size:1.5rem; line-height:1; transition:transform .35s var(--e-out)}
[dir="rtl"] .cp-arr{transform:scaleX(-1)}
.cp-next:hover .cp-arr, .cp-next:active .cp-arr{transform:translateX(6px)}
[dir="rtl"] .cp-next:hover .cp-arr, [dir="rtl"] .cp-next:active .cp-arr{transform:scaleX(-1) translateX(6px)}
.cp-next:focus-visible, .cp-back:focus-visible, .cp-dot:focus-visible, .cp-office-b:focus-visible{outline:2px solid var(--paper); outline-offset:4px}
.cp-done{margin-top:1.6rem; line-height:1.55}
.cp-done a{text-underline-offset:4px; text-decoration-color:var(--l2)}
.cp-fail{margin-top:1.6rem; line-height:1.55; color:var(--warn)}
.cp-fail a{color:var(--paper); text-underline-offset:4px; text-decoration-color:var(--l2)}
.cp-hp{position:absolute; inset-inline-start:0; top:0; width:1px; height:1px; opacity:0; pointer-events:none; clip-path:inset(50%)}   /* never off-screen: a negative offset is scrollable overflow in RTL */

/* ---- the globe and the offices ---------------------------------------- */
.cp-globe{position:relative; width:min(100%, 24rem); aspect-ratio:1; margin:0 0 clamp(2rem, 4vh, 2.8rem)}
.cp-globe img{width:100%; height:auto; display:block}
.cp-globe[data-land]{touch-action:pan-y; cursor:grab; user-select:none; -webkit-user-select:none}
.cp-globe.is-drag{cursor:grabbing}
.cp-canvas{display:block; width:100%; height:auto}
.cp-globe.is-live img{display:none}
.cp-dot[hidden]{display:none}
.cp-zoom{display:flex; align-items:center; gap:.4rem; margin:-1.2rem 0 clamp(1.6rem, 3vh, 2.2rem); color:var(--t3)}
.cp-z{width:2rem; height:2rem; border:1px solid var(--l1); border-radius:999px; background:none; color:var(--paper); font:500 1rem/1 var(--sans); cursor:pointer; display:grid; place-items:center; transition:border-color .3s}
.cp-z.cp-zr{width:auto; padding:0 .8rem; font-family:var(--mono); font-size:.62rem; letter-spacing:.12em; text-transform:uppercase}
.cp-z:hover{border-color:var(--l2)}
.cp-zoom-h{margin-inline-start:auto; font-size:.72rem}
[dir="rtl"] .cp-zoom-h{font-size:.78rem}
.cp-dot{
  position:absolute; transform:translate(-50%, -50%); width:26px; height:26px; display:grid; place-items:center; direction:ltr;
  background:none; border:0; padding:0; cursor:pointer; color:var(--ink);
}
/* the button box is the pin alone, so the projected point is the pin's centre; the label hangs off it */
.cp-dot i{
  display:block; width:7px; height:7px; border-radius:50%; background:var(--ink); box-sizing:content-box;
  border:3px solid var(--paper); box-shadow:0 0 0 1px var(--ink); transition:background .25s, box-shadow .25s;
}
.cp-dot.is-on i, .cp-dot:hover i{background:var(--teal); box-shadow:0 0 0 1.5px var(--teal)}
.cp-dot span{position:absolute; left:100%; top:50%; transform:translateY(-50%); margin-left:.1rem; font-family:var(--mono); font-size:.6rem; letter-spacing:.1em; text-transform:uppercase; white-space:nowrap; line-height:1}
.cp-dot.is-left span{left:auto; right:100%; margin-left:0; margin-right:.1rem}   /* Baghdad sits just under Erbil: its label goes the other way */
[dir="rtl"] .cp-dot span{letter-spacing:0; font-size:.68rem}
.cp-offices{list-style:none; margin:0; padding:0; border-top:1px solid var(--l1); max-width:34rem}
.cp-office{display:grid; grid-template-columns:8.5rem minmax(0, 1fr); gap:.4rem 2rem; padding:1.35rem 0 1.35rem 1rem; border-bottom:1px solid var(--l1)}
.cp-office-b{background:none; border:0; padding:0; margin:0; text-align:start; color:inherit; font:inherit; cursor:pointer; align-self:start}
.cp-city{display:block; position:relative; font-weight:500; font-size:1.1rem; line-height:1.2; color:var(--t2); transition:color .25s}
.cp-office.is-on .cp-city, .cp-office-b:hover .cp-city{color:var(--paper)}
.cp-city::before{content:""; position:absolute; inset-inline-start:-1rem; top:.45em; width:6px; height:6px; border-radius:50%; background:var(--teal); opacity:0; transition:opacity .25s}   /* outside the text, so city and country stay on one edge */
.cp-office.is-on .cp-city::before{opacity:1}
.cp-country{display:block; font-size:.82rem; color:var(--t3); margin-top:.25rem}
.cp-addr{font-style:normal; line-height:1.55; color:color-mix(in srgb, var(--paper) 84%, transparent)}
.cp-addr.is-soon{color:var(--t3)}
.cp-lines{margin-top:.45rem; font-size:.9rem; color:var(--t2); line-height:1.6}
.cp-lines a{text-decoration:underline; text-decoration-color:var(--l2); text-underline-offset:4px; transition:color .3s, text-decoration-color .3s}
.cp-lines a:hover{color:var(--paper); text-decoration-color:var(--paper)}
.cp-sep{margin:0 .55rem; color:var(--t3)}
.cp .ltr{direction:ltr; unicode-bidi:isolate; display:inline-block}

/* ---- responsive ---------------------------------------------------------- */
@media (max-width:1023px){
  .cp-grid{grid-template-columns:1fr; gap:4rem}
  .cp-side{max-width:38rem}
}
@media (max-width:720px){
  .cp-hero{padding-top:7.5rem}
  .cp-h{font-size:clamp(3rem, 16vw, 4.8rem)}
  .cp-reach{gap:1rem 1.4rem}
  .cp-mail{font-size:clamp(1.35rem, 6.5vw, 1.8rem)}
  .cp-mail{display:inline-flex;align-items:center;min-height:44px}
  .cp-btn{min-height:44px}
  .cp-in{font-size:max(16px,1.05rem);min-height:44px}
  .cp-opts, .cp-fields{grid-template-columns:1fr}
  .cp-globe{width:min(100%, 19rem)}
  .cp-zoom-h{display:none}
  .cp-z{width:44px; height:44px}
  .cp-dot{width:44px; height:44px}
  .cp-next, .cp-back{min-height:44px}
  .cp-office{grid-template-columns:1fr; gap:.5rem; padding-inline-start:1rem}
  .cp-grid{padding-bottom:4rem}
}
@media (prefers-reduced-motion:reduce){
  .cp-step.is-on{animation:none}
  .cp-arr, .cp-dot i, .cp-city{transition:none}
}