.page-hero{ position: relative; padding-top: 170px; padding-bottom: 90px; padding-left: var(--pad-x); padding-right: var(--pad-x); background: var(--navy-black); color: #fff; overflow: hidden; }
.page-hero::before{ content:''; position:absolute; inset:0; background: radial-gradient(ellipse 60% 50% at 90% 30%, rgba(0,160,223,.30), transparent 60%), radial-gradient(ellipse 50% 60% at 0% 100%, rgba(13,152,122,.20), transparent 60%); }
.page-hero .wave-bg{ z-index:0; }
.page-hero-inner{ position:relative; z-index:2; }
.page-hero .eyebrow{ margin-bottom: 22px; }
.page-hero h1{ color: #fff; max-width: 22ch; }
.page-hero h1 .em{ color: var(--cyan); }
.page-hero .lead{ color: rgba(255,255,255,.78); margin-top: 28px; max-width: 640px; }
.page-hero-meta{ position:absolute; top: 76px; left: 0; right: 0; z-index: 3; display:flex; justify-content:space-between; align-items:center; padding: 14px var(--pad-x); border-bottom: 1px solid rgba(255,255,255,.08); font-family: var(--mono); font-size:11px; letter-spacing: .14em; text-transform: uppercase; color: rgba(255,255,255,.50); }
.page-hero-meta a{ color: rgba(255,255,255,.70); transition: color .25s var(--ease); }
.page-hero-meta a:hover{ color: var(--cyan); }

/* Contact cards strip */
.info-strip{ padding: clamp(60px, 8vw, 100px) var(--pad-x); background: var(--paper); }
.info-grid{ display: grid; grid-template-columns: 1fr 1fr 1fr; gap: clamp(16px, 2vw, 24px); margin-top: clamp(30px, 4vw, 50px); }
/* .info-card now owned by the applab/info-card block */

@media (max-width: 980px){ .info-grid{ grid-template-columns: 1fr; } }

/* Form section */
.form-section{ padding: clamp(80px, 11vw, 160px) var(--pad-x); background: var(--off); }
.form-wrap{
 display: grid;
 grid-template-columns: 1fr 1.4fr;
 gap: clamp(40px, 6vw, 80px);
 margin-top: clamp(40px, 6vw, 70px);
 align-items: start;
}
.form-intro h2{ max-width: 14ch; }
.form-intro h2 .em{ color: var(--blue); }
.form-intro .lead{ margin-top: 22px; }
.form-intro .meta{
 margin-top: 36px;
 padding: 24px;
 background: var(--paper);
 border: 1px solid var(--line);
 border-radius: 18px;
 font-family: var(--mono); font-size: 11px;
 letter-spacing: .14em; text-transform: uppercase;
 color: var(--grey-2);
}
.form-intro .meta b{
 display: block;
 font-family: var(--display); font-weight: 600;
 font-size: 16px;
 letter-spacing: -.015em;
 color: var(--ink);
 text-transform: none;
 margin-bottom: 8px;
}
.form-intro .meta .pulse{
 display: inline-flex; align-items: center; gap: 8px;
 font-size: 10px;
}
.form-intro .meta .pulse::before{
 content:''; width: 8px; height: 8px; border-radius: 50%;
 background: var(--teal);
 box-shadow: 0 0 0 0 rgba(13,152,122,.7);
 animation: pulse 2s infinite;
}
@keyframes pulse{
 0% { box-shadow: 0 0 0 0 rgba(13,152,122,.7); }
 70% { box-shadow: 0 0 0 8px rgba(13,152,122,0); }
 100% { box-shadow: 0 0 0 0 rgba(13,152,122,0); }
}

.form-card{
 background: var(--paper);
 border: 1px solid var(--line);
 border-radius: var(--rad);
 padding: clamp(32px, 4vw, 56px);
}
.form-row{ display: grid; grid-template-columns: 1fr 1fr; gap: 18px; margin-bottom: 18px; }
.form-row.full{ grid-template-columns: 1fr; }
.field{ display: flex; flex-direction: column; gap: 8px; }
.field label{
 font-family: var(--mono); font-size: 10px;
 letter-spacing: .16em; text-transform: uppercase;
 color: var(--grey-2);
}
/* Contact Form 7 always wraps each field tag in a
   <span class="wpcf7-form-control-wrap"> (inc/cf7.php disables its extra
   <p>/<br> autop wrapping, but this span is the tag's own generated
   markup and always exists) — it's a direct .field flex child so it
   stretches automatically, but being inline-level by default it doesn't
   pass that width down to the actual control, so the textarea/select
   inside would otherwise fall back to their `cols`/intrinsic size
   instead of filling the row. */
.field .wpcf7-form-control-wrap{ display: block; width: 100%; }
.field input, .field textarea, .field select{
 width: 100%;
 box-sizing: border-box;
 padding: 14px 16px;
 background: var(--off);
 border: 1px solid var(--line);
 border-radius: 12px;
 font-family: var(--body);
 font-size: 15px;
 color: var(--ink);
 transition: all .3s var(--ease);
}
.field input:focus, .field textarea:focus, .field select:focus{
 outline: none;
 border-color: var(--blue);
 background: var(--paper);
 box-shadow: 0 0 0 3px rgba(42,125,225,.10);
}
.field textarea{ resize: vertical; min-height: 130px; font-family: var(--body); }
.field.is-invalid input, .field.is-invalid textarea, .field.is-invalid select{
 border-color: #c41818;
 background: #fff6f6;
}
.field.is-invalid input:focus, .field.is-invalid textarea:focus, .field.is-invalid select:focus{
 box-shadow: 0 0 0 3px rgba(196,24,24,.12);
}
.field .field-error{
 color: #c41818;
 font-size: 13px;
 line-height: 1.4;
 margin: 2px 0 0;
}
.form-card .submit-row{
 margin-top: 28px;
 display: flex;
 align-items: center;
 justify-content: space-between;
 gap: 20px;
 flex-wrap: wrap;
}
.form-card .privacy{
 font-size: 12px;
 color: var(--grey-2);
 max-width: 36ch;
 line-height: 1.5;
}
.form-card .privacy a{ color: var(--blue); border-bottom: 1px solid currentColor; }

@media (max-width: 980px){
 .form-wrap{ grid-template-columns: 1fr; }
 .form-row{ grid-template-columns: 1fr; }
}

/* MENA map */
.map-section{ padding: clamp(80px, 11vw, 160px) var(--pad-x); background: var(--ink); color: #fff; position: relative; overflow: hidden; }
.map-section::before{ content:''; position:absolute; inset:0; background: radial-gradient(ellipse 60% 50% at 30% 50%, rgba(0,160,223,.18), transparent 60%); }
.map-section > *{ position:relative; z-index:2; }
.map-section h2{ color: #fff; }
.map-section h2 .em{ color: var(--cyan); }
.map-section .lead{ color: rgba(255,255,255,.75); }

.map-canvas{
 margin-top: clamp(40px, 6vw, 70px);
 background:
 radial-gradient(ellipse 70% 40% at 60% 50%, rgba(0,160,223,.10), transparent 60%);
 border: 1px solid rgba(255,255,255,.10);
 border-radius: 24px;
 padding: clamp(40px, 5vw, 60px);
 position: relative;
 overflow: hidden;
 min-height: 380px;
}
.map-canvas::before{
 content:'';
 position: absolute; inset: 0;
 background-image:
 linear-gradient(rgba(255,255,255,.04) 1px, transparent 1px),
 linear-gradient(90deg, rgba(255,255,255,.04) 1px, transparent 1px);
 background-size: 40px 40px;
 opacity: .5;
}
.map-pins{
 position: relative; z-index: 2;
 display: grid;
 grid-template-columns: 1fr 1fr 1fr;
 gap: clamp(20px, 3vw, 40px);
 height: 100%;
}
/* .pin now owned by the applab/map-pin block */

@media (max-width: 880px){ .map-pins{ grid-template-columns: 1fr; gap: 16px; } }

.cta{ padding: clamp(100px, 14vw, 200px) var(--pad-x); background: var(--navy-black); color: #fff; position: relative; overflow: hidden; }
.cta::before{ content:''; position:absolute; inset:0; background: radial-gradient(ellipse 60% 40% at 50% 100%, rgba(0,160,223,.22), transparent 60%); }
.cta > *{ position: relative; z-index: 2; }
.cta .eyebrow{ color: var(--cyan); margin-bottom: 28px; }
.cta .eyebrow::before{ background: var(--cyan); }
.cta h2{ color: #fff; max-width: 22ch; }
.cta h2 .em{ color: var(--cyan); }
.cta .lead{ color: rgba(255,255,255,.7); margin-top: 26px; }
.cta-actions{ margin-top: clamp(40px, 6vw, 70px); display: flex; gap: 14px; flex-wrap: wrap; }