/* ============================================================================
   DIRECTION D — "Clear"
   Modern, minimal. One centred column and a lot of nothing.

   The brief was "more modern, just clean and simple", so this direction is
   defined as much by what it removes as what it adds. Gone: the ruled ledger
   and numbering of A, the split panel and photograph of B, the bar field of C.
   What is left is the logo, three lines, a phone number and one button.

   The moves that make it read as designed rather than empty:
   · ONE accent. The brand blue appears on the primary button and the status
     dot, nowhere else. Everything else is navy on white.
   · The two languages sit on ONE line — English left, Arabic right — so the
     pair reads as a single item. In the earlier directions the Arabic
     right-aligned across a wide column and drifted away from its English.
   · Hairlines at the very edge of visible (#EDF1F6). They organise without
     drawing.
   · Type does the work: tight tracking on the large sizes, wide tracking on
     the small caps, and generous line-height everywhere.
   · A barely-there blue wash in the background so the white is not flat.

   The logo is the client's own file, unmodified, as everywhere in this round.
   ========================================================================= */

body {
  font-family: 'Figtree', system-ui, -apple-system, sans-serif;
  color: var(--ink); background: #fff;
  line-height: 1.6;
  -webkit-font-smoothing: antialiased;
}

/* An almost-invisible wash, so a large white page has some depth to it rather
   than reading as a blank document. */
.wash {
  position: fixed; inset: 0; z-index: 0; pointer-events: none;
  background:
    radial-gradient(60rem 40rem at 50% -10%, rgba(50,143,206,.10), transparent 70%),
    radial-gradient(40rem 30rem at 92% 108%, rgba(34,53,102,.07), transparent 72%);
}

.shell {
  position: relative; z-index: 1;
  min-height: 100svh; width: 100%;
  padding: clamp(20px, 3.2svh, 44px) clamp(22px, 5vw, 48px) clamp(62px, 7svh, 88px);
  display: flex; flex-direction: column; align-items: center;
}

/* --- one status line, top ---------------------------------------------------- */
.status {
  flex-shrink: 0;
  display: inline-flex; align-items: center; gap: 9px;
  font-size: .68rem; font-weight: 600; letter-spacing: .2em; text-transform: uppercase;
  color: var(--muted);
}
.status .dot {
  width: 7px; height: 7px; border-radius: 50%; background: var(--blue); flex-shrink: 0;
  box-shadow: 0 0 0 5px rgba(50,143,206,.14);
}

/* --- the column -------------------------------------------------------------- */
.col {
  flex: 1 1 auto; display: flex; flex-direction: column; justify-content: center;
  align-items: center; text-align: center;
  width: 100%; max-width: 620px;
  padding: clamp(16px, 2.8svh, 40px) 0;
  min-height: 0;
}

.brandmark h1 { font: inherit; margin: 0 }
/* Sized by the SMALLER of width and height so the whole column still clears a
   1366x768 laptop and a 900px-tall window without the page having to scroll —
   a holding page that scrolls has failed at the one thing it does. */
.brandmark .logo {
  width: auto; height: clamp(118px, min(18vw, 23svh), 186px); margin-inline: auto;
}
.tagline {
  margin-top: clamp(13px, 1.9svh, 20px);
  font-size: clamp(.68rem, .95vw, .76rem); font-weight: 600;
  letter-spacing: .26em; text-transform: uppercase; color: var(--muted);
}

/* --- activities: one line per activity, a language at each end ---------------- */
.acts {
  list-style: none; width: 100%;
  margin-top: clamp(20px, 3.4svh, 42px);
  border-top: 1px solid #EDF1F6;
}
.act {
  display: flex; align-items: baseline; justify-content: space-between;
  gap: clamp(12px, 3vw, 30px);
  padding: clamp(10px, 1.6svh, 15px) 2px;
  border-bottom: 1px solid #EDF1F6;
  text-align: left;
}
.act-en {
  font-size: clamp(.98rem, 1.35vw, 1.14rem); font-weight: 600;
  color: var(--navy); letter-spacing: -.008em; line-height: 1.35;
}
.act-ar {
  direction: rtl; font-family: var(--arabic); font-weight: 400;
  font-size: clamp(.9rem, 1.2vw, 1rem); line-height: 1.9; color: var(--muted);
  white-space: nowrap;
}

/* --- contact ------------------------------------------------------------------ */
.contact { margin-top: clamp(20px, 3.4svh, 42px); width: 100% }
.contact .who {
  font-size: .82rem; color: var(--muted);
  display: flex; align-items: center; justify-content: center;
  gap: 8px; flex-wrap: wrap;
}
.contact .who b { color: var(--navy); font-weight: 600 }
.contact .who .ar { color: var(--muted); direction: rtl }
.contact .who .sep { color: #C3D2E4 }

.tel {
  display: block; margin: clamp(5px, .9svh, 10px) auto clamp(14px, 2.2svh, 22px);
  font-size: clamp(1.55rem, 3.8vw, 2.25rem); font-weight: 500; color: var(--navy);
  letter-spacing: -.022em; line-height: 1.1;
  transition: color .25s var(--ease);
}
.tel:hover { color: var(--blue-tx) }

.actions { display: flex; gap: 10px; flex-wrap: wrap; justify-content: center }
.actions .btn {
  padding: 13px 28px; font-size: .9rem; font-weight: 600;
  min-height: 48px; border-radius: 999px;
}
.btn-call {
  background: var(--navy); color: #fff;
  box-shadow: 0 8px 20px rgba(34,53,102,.2);
}
.btn-call:hover { background: #16244A; box-shadow: 0 10px 26px rgba(34,53,102,.28) }
.btn-wa, .btn-mail { color: var(--navy); border-color: #DCE5F0; background: rgba(255,255,255,.7) }
.btn-wa:hover, .btn-mail:hover { border-color: var(--navy); background: #fff }
.btn-wa .wa-dot { width: 8px; height: 8px; border-radius: 50%; background: #16A34A; flex-shrink: 0 }

.mail {
  display: inline-block; margin-top: clamp(13px, 2svh, 20px);
  padding: 4px 2px;                    /* clears the WCAG 2.2 24px target */
  font-size: .85rem; color: var(--muted); overflow-wrap: anywhere;
  transition: color .25s var(--ease);
}
.mail:hover { color: var(--navy) }

/* --- foot: one quiet line ------------------------------------------------------ */
.foot {
  flex-shrink: 0; width: 100%; max-width: 620px;
  padding-top: clamp(14px, 2svh, 20px);
  display: flex; justify-content: space-between; align-items: baseline;
  gap: 8px 20px; flex-wrap: wrap;
  font-size: .76rem; color: var(--muted);
}
.foot a { color: var(--muted); transition: color .25s var(--ease) }
.foot a:hover { color: var(--navy) }

/* --- responsive ----------------------------------------------------------------
   The one-line activity pairing is the first thing to go on a narrow screen —
   two scripts cannot share a 340px line without one of them wrapping badly.
   -------------------------------------------------------------------------- */
@media (max-width: 600px) {
  .act {
    flex-direction: column; align-items: stretch; gap: 1px;
    padding: clamp(9px, 1.5svh, 14px) 2px;
  }
  .act-ar { text-align: right; white-space: normal }
  .brandmark .logo { height: clamp(108px, 19svh, 168px) }
  .actions .btn { flex: 1 1 auto }
  .foot { justify-content: center; text-align: center }
}
/* Short-screen tiers. The generous rhythm is the design, so it is given up in
   measured steps rather than all at once: 1366x768 (the most common laptop) and
   a 375x667 phone both have to hold the whole column without scrolling. */
@media (max-height: 820px) {
  .acts, .contact { margin-top: clamp(15px, 2.3svh, 26px) }
  .col { padding: clamp(10px, 1.8svh, 22px) 0 }
  .shell { padding-bottom: clamp(54px, 6svh, 72px) }
}
/* Small phones stack each activity onto two lines, which costs height the
   laptop tiers above never pay — so they get their own step. Mind the SPACE
   before the second bracket: `and(` is a function token and kills the whole
   query in every browser. */
@media (max-width: 600px) and (max-height: 780px) {
  .brandmark .logo { height: clamp(92px, 16svh, 130px) }
  .acts, .contact { margin-top: 13px }
  .act { padding: 7px 2px }
  .tel { font-size: clamp(1.42rem, 7vw, 1.75rem); margin-bottom: 12px }
  .mail { margin-top: 9px }
}
@media (max-height: 700px) {
  .brandmark .logo { height: clamp(92px, 15svh, 132px) }
  .tagline { margin-top: 9px; font-size: .66rem }
  .acts, .contact { margin-top: 13px }
  .act { padding: 8px 2px }
  .tel { font-size: clamp(1.4rem, 3.2vw, 1.8rem); margin-bottom: 12px }
  .actions .btn { min-height: 44px; padding: 11px 24px }
  .mail { margin-top: 10px }
}