/* ============================================================================
   DIRECTION B — "Split"
   A hard vertical split: white information panel, duotone photograph.

   The idea: keep the photograph, but stop it from being wallpaper. Ajyal put the
   picture BEHIND everything and floated glass on top; here the picture is a
   panel of its own, cropped to a column, duotoned into the brand navy so it
   reads as a designed surface rather than stock. The logo sits on clean white
   and never has to fight an image for legibility — which is the whole reason
   the mark can stay in its original colours.

   The seam between the two halves is the logo's own bar motif, drawn in CSS.
   ========================================================================= */

body {
  font-family: 'Figtree', system-ui, sans-serif;
  color: var(--ink); background: var(--paper);
  line-height: 1.55;
}

.split {
  display: grid; grid-template-columns: minmax(0, 1fr) minmax(0, .92fr);
  min-height: 100svh;
}

/* --- the picture panel ----------------------------------------------------- */
.pane {
  position: relative; background: var(--navy) url('../assets/split-photo.webp') center 44% / cover no-repeat;
  min-height: 100%;
}
/* The bar motif, lifted from the logo's skyline, drawn as a fine seam. It was
   26px of hard dashes in the first pass and read as a rendering fault rather
   than a detail — a seam should be noticed second, not first. */
.pane::before {
  content: ""; position: absolute; inset: 0 auto 0 0; width: 7px; z-index: 2;
  background: repeating-linear-gradient(
    to bottom, var(--blue) 0 14px, rgba(255,255,255,.55) 14px 21px);
}
.pane .stamp {
  position: absolute; z-index: 2; right: clamp(18px, 2.4vw, 34px); bottom: clamp(16px, 2.4svh, 30px);
  color: #fff; font-size: .66rem; letter-spacing: .26em; text-transform: uppercase;
  font-weight: 600; text-shadow: 0 1px 12px rgba(15, 26, 52, .8);
}

/* --- the information panel ------------------------------------------------- */
.panel {
  display: flex; flex-direction: column;
  padding: clamp(20px, 3.4svh, 48px) clamp(22px, 4vw, 62px) clamp(54px, 6svh, 74px);
  min-width: 0;
}
.top {
  flex-shrink: 0; display: flex; justify-content: space-between; align-items: baseline;
  gap: 12px; flex-wrap: wrap;
  font-size: .68rem; letter-spacing: .24em; text-transform: uppercase;
  font-weight: 600; color: var(--muted);
}
.top .ar { font-size: .8rem; letter-spacing: normal; text-transform: none }
.top .right { display: inline-flex; align-items: center; gap: 9px; white-space: nowrap }
.top .right .dot { width: 7px; height: 7px; border-radius: 50%; background: var(--blue); flex-shrink: 0 }

.mid { flex: 1 1 auto; min-height: 0; display: flex; flex-direction: column; justify-content: center;
       padding: clamp(14px, 2.2svh, 30px) 0 }

/* The whole column — logo, three activities, contact card — has to clear a
   1366x768 laptop, which is the screen this design failed on first time round.
   The logo is sized by the SMALLER of width and height so it yields on short
   screens instead of pushing the Call button under the fold. */
.brandmark h1 { font: inherit; margin: 0 }
.brandmark .logo { width: auto; height: clamp(104px, min(15vw, 21svh), 190px) }
.tagline {
  margin-top: clamp(10px, 1.5svh, 18px);
  font-size: clamp(.64rem, .9vw, .72rem); font-weight: 700;
  letter-spacing: .26em; text-transform: uppercase; color: var(--blue-tx);
}

/* --- activities: stacked, rule on the left ----------------------------------
   Capped measure on purpose: with no rule spanning the row (unlike direction A)
   a full-width right-aligned Arabic line drifts away from the English it
   belongs to. Holding both to ~34rem keeps the pair reading as one item. */
.acts { list-style: none; margin-top: clamp(14px, 2.2svh, 28px); max-width: 34rem }
.act {
  padding: clamp(7px, 1.1svh, 12px) 0 clamp(7px, 1.1svh, 12px) clamp(14px, 1.5vw, 19px);
  border-left: 3px solid #DCE5F0;
  transition: border-color .3s var(--ease);
}
.act:hover { border-left-color: var(--blue) }
.act-en {
  display: block; font-size: clamp(1rem, 1.5vw, 1.24rem); font-weight: 600;
  color: var(--navy); line-height: 1.3;
}
.act-ar {
  display: block; direction: rtl; text-align: right; margin-top: .12em;
  font-family: var(--arabic); font-size: clamp(.9rem, 1.2vw, 1.02rem);
  line-height: 1.8; color: var(--muted);
}

/* --- contact: an outlined card, not a filled block --------------------------- */
.card {
  margin-top: clamp(14px, 2.2svh, 26px);
  border: 2px solid var(--navy); border-radius: 4px;
  padding: clamp(12px, 1.8svh, 20px) clamp(16px, 1.9vw, 24px);
  background: #fff;
}
.card .role {
  font-size: .63rem; letter-spacing: .24em; text-transform: uppercase;
  color: var(--muted); margin-bottom: clamp(6px, 1svh, 11px);
}
.card h2 {
  font-size: clamp(.98rem, 1.3vw, 1.12rem); font-weight: 700; color: var(--navy);
  display: flex; align-items: baseline; gap: 11px; flex-wrap: wrap;
}
.card h2 .ar { font-weight: 400; font-size: .94em; color: var(--muted); direction: rtl }
.card .pos { font-size: .84rem; color: var(--muted); margin-top: 1px }
.tel {
  display: inline-block; margin: clamp(5px, .9svh, 10px) 0 clamp(9px, 1.4svh, 14px);
  font-size: clamp(1.22rem, 1.85vw, 1.52rem); font-weight: 400; color: var(--navy);
}
.tel:hover { color: var(--blue-tx) }
.actions { display: flex; gap: 9px; flex-wrap: wrap }
.actions .btn {
  padding: 10px 22px; font-size: .86rem; font-weight: 600; min-height: 44px; border-radius: 999px;
}
.btn-call { background: var(--navy); color: #fff }
.btn-call:hover { background: #16244A }
.btn-wa, .btn-mail { color: var(--navy); border-color: #B9C8DC }
.btn-wa:hover, .btn-mail:hover { border-color: var(--navy) }
.btn-wa .wa-dot { width: 8px; height: 8px; border-radius: 50%; background: #16A34A; flex-shrink: 0 }
.card .mail {
  display: inline-block; margin-top: clamp(7px, 1.2svh, 12px); font-size: .85rem;
  color: var(--muted); border-bottom: 1px solid #C3D2E4;
  padding: 4px 0 3px;               /* clears the WCAG 2.2 24px target */
  overflow-wrap: anywhere;
}
.card .mail:hover { color: var(--navy); border-color: var(--navy) }

.foot {
  flex-shrink: 0; padding-top: clamp(11px, 1.6svh, 17px); border-top: 1px solid #DCE5F0;
  display: flex; justify-content: space-between; align-items: baseline;
  gap: 8px 20px; flex-wrap: wrap; font-size: .74rem; color: var(--muted);
}
.foot a { color: var(--muted); border-bottom: 1px solid #C3D2E4; padding-bottom: 1px }
.foot a:hover { color: var(--navy); border-color: var(--navy) }

/* --- responsive -------------------------------------------------------------
   Below 900px the split becomes a band: the photograph keeps a presence at the
   top but surrenders the screen to the information, because on a phone the
   phone number has to be reachable without scrolling.
   -------------------------------------------------------------------------- */
@media (max-width: 900px) {
  .split { grid-template-columns: minmax(0, 1fr); grid-template-rows: auto 1fr }
  .pane {
    min-height: 0; height: clamp(120px, 20svh, 200px);
    background-image: url('../assets/split-photo-wide.webp');
    background-position: center 46%;
  }
  .pane::before { inset: auto 0 0 0; width: auto; height: 8px;
    background: repeating-linear-gradient(to right, var(--blue) 0 22px, transparent 22px 34px) }
  .pane .stamp { right: auto; left: clamp(20px, 5vw, 32px); bottom: 16px }
  .brandmark { display: flex; flex-direction: column; align-items: center }
  .tagline { text-align: center }
  .mid { padding: clamp(16px, 2.6svh, 34px) 0 }
  .brandmark .logo { height: clamp(112px, 19svh, 176px) }
}
@media (max-width: 560px) {
  .top { font-size: .6rem; letter-spacing: .16em; gap: 5px 10px }
  .actions .btn { flex: 1 1 auto }
  .foot { flex-direction: column; align-items: flex-start; gap: 6px }
}