/* ============================================================================
   DIRECTION C — "Skyline"
   No photograph. The brand's own mark becomes the artwork.

   The idea: RANCO's logo already contains a strong graphic device — the rising
   field of vertical bars behind the truck. Blown up and run across the foot of
   the page in graduated brand blues, it gives the page a signature that no
   stock library can supply and no competitor can copy, because it IS their
   mark. The three activities sit as equal columns above it, so the page reads
   at a glance as "these are the three things we do".

   Pure CSS — the skyline is a repeating gradient, not an image, so it costs
   nothing to load and stays crisp at any width.
   ========================================================================= */

body {
  font-family: 'Schibsted Grotesk', system-ui, sans-serif;
  color: var(--ink); background: #F4F8FC;
  line-height: 1.55;
}

/* --- the skyline ------------------------------------------------------------ */
.skyline {
  position: fixed; inset: auto 0 0 0; z-index: 0; pointer-events: none;
  height: clamp(160px, 32svh, 350px);
  /* Three fields at different pitches, densities and start heights. A single
     evenly-spaced field reads as a hatch pattern; the logo's bars are uneven,
     and it is the unevenness that makes it read as a skyline. */
  background:
    repeating-linear-gradient(to right,
      rgba(50,143,206,.55) 0 8px, transparent 8px 23px);
  /* A mask on the parent applies to the whole subtree, so this one governs all
     three layers. It fades out again at the very bottom for two reasons: the
     bars read better rising out of nothing than stopping dead at the page edge,
     and the footer's legal line sits in that band — muted text over a field of
     55%-opacity bars is exactly the low-contrast footer the playbook forbids. */
  -webkit-mask-image: linear-gradient(to top, transparent 0, rgba(0,0,0,.9) 14%, #000 32%, rgba(0,0,0,.45) 62%, transparent 100%);
          mask-image: linear-gradient(to top, transparent 0, rgba(0,0,0,.9) 14%, #000 32%, rgba(0,0,0,.45) 62%, transparent 100%);
}
.skyline::before, .skyline::after { content: ""; position: absolute; inset: 0 }
.skyline::before {
  inset: 18% 0 0 0;
  background: repeating-linear-gradient(to right,
    rgba(34,53,102,.34) 0 5px, transparent 5px 31px);
  -webkit-mask-image: linear-gradient(to top, #000 16%, transparent 100%);
          mask-image: linear-gradient(to top, #000 16%, transparent 100%);
}
.skyline::after {
  inset: 46% 0 0 0;
  background: repeating-linear-gradient(to right,
    rgba(50,143,206,.4) 0 3px, transparent 3px 14px);
  -webkit-mask-image: linear-gradient(to top, #000 24%, transparent 100%);
          mask-image: linear-gradient(to top, #000 24%, transparent 100%);
}

.shell {
  position: relative; z-index: 1;
  width: 100%; max-width: 1180px; margin: 0 auto; min-height: 100svh;
  padding: clamp(18px, 3svh, 40px) clamp(22px, 5vw, 56px) clamp(56px, 7svh, 84px);
  display: flex; flex-direction: column; text-align: center;
}

.top {
  flex-shrink: 0; display: flex; justify-content: space-between; align-items: baseline;
  gap: 14px; flex-wrap: wrap; text-align: left;
  font-size: .69rem; letter-spacing: .26em; text-transform: uppercase;
  font-weight: 600; color: var(--muted);
}
.top .ar { font-size: .81rem; 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;
  align-items: center; justify-content: center; gap: clamp(18px, 3svh, 40px);
  padding: clamp(20px, 3.4svh, 52px) 0;
}

.brandmark h1 { font: inherit; margin: 0 }
.brandmark .logo {
  width: auto; height: clamp(132px, min(23vw, 30svh), 258px); margin-inline: auto;
}
.tagline {
  margin-top: clamp(12px, 1.8svh, 20px);
  font-size: clamp(.66rem, 1vw, .76rem); font-weight: 600;
  letter-spacing: .3em; text-transform: uppercase; color: var(--navy);
}

/* --- three equal columns ----------------------------------------------------- */
.acts {
  list-style: none; display: grid; width: 100%;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  gap: clamp(12px, 1.6vw, 22px);
}
.act {
  background: rgba(255,255,255,.86);
  border: 1px solid #DCE5F0; border-top: 3px solid var(--blue);
  border-radius: 3px;
  padding: clamp(13px, 2svh, 22px) clamp(11px, 1.3vw, 18px);
  display: flex; flex-direction: column; gap: .25em;
  transition: transform .3s var(--ease), box-shadow .3s var(--ease);
}
@media (hover: hover) and (pointer: fine) {
  .act:hover { transform: translateY(-4px); box-shadow: 0 14px 30px rgba(34,53,102,.1) }
}
@media (prefers-reduced-motion: reduce) { .act, .act:hover { transform: none; transition: none } }
.act-en {
  font-size: clamp(.94rem, 1.25vw, 1.14rem); font-weight: 600;
  color: var(--navy); line-height: 1.3;
}
.act-ar {
  direction: rtl; font-family: var(--arabic);
  font-size: clamp(.86rem, 1.1vw, .98rem); line-height: 1.75; color: var(--muted);
}

/* --- contact: one horizontal bar, centred ------------------------------------ */
.card {
  width: 100%; background: #fff; border: 1px solid #DCE5F0; border-radius: 3px;
  padding: clamp(15px, 2.2svh, 24px) clamp(18px, 2.2vw, 32px);
  box-shadow: 0 10px 34px rgba(34,53,102,.07);
  display: flex; align-items: center; justify-content: space-between;
  gap: clamp(14px, 2.4vw, 40px); flex-wrap: wrap; text-align: left;
}
.card .who { min-width: 0 }
.card .role {
  font-size: .62rem; letter-spacing: .24em; text-transform: uppercase;
  color: var(--muted); margin-bottom: 4px;
}
.card h2 {
  font-size: clamp(.98rem, 1.3vw, 1.12rem); font-weight: 600; 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) }
.card .reach { display: flex; align-items: center; gap: clamp(12px, 2vw, 26px); flex-wrap: wrap }
.tel {
  font-size: clamp(1.22rem, 1.9vw, 1.56rem); font-weight: 300; color: var(--navy);
  white-space: nowrap;
}
.tel:hover { color: var(--blue-tx) }
.actions { display: flex; gap: 9px; flex-wrap: wrap }
.actions .btn {
  padding: 10px 22px; font-size: .85rem; font-weight: 600; min-height: 44px; border-radius: 3px;
}
/* White on the raw brand blue #328FCE is only 3.53:1 — it FAILS AA at button
   text size. The darkened brand blue reaches 5.39:1. Measured, not eyeballed:
   this shipped in the concept round and qa.py's contrast check caught it. */
.btn-call { background: var(--blue-tx); color: #fff }
.btn-call:hover { background: var(--navy) }
.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: none }

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

/* --- responsive -------------------------------------------------------------- */
@media (max-width: 860px) {
  .acts { grid-template-columns: minmax(0, 1fr); gap: 9px }
  .act { flex-direction: row; align-items: baseline; justify-content: space-between;
         gap: 14px; border-top: 1px solid #DCE5F0; border-left: 3px solid var(--blue) }
  .act-ar { text-align: right }
  .card { flex-direction: column; align-items: stretch; gap: 14px }
  .card .reach { justify-content: space-between }
  .brandmark .logo { height: clamp(112px, 20svh, 190px) }
}
@media (max-width: 560px) {
  .top { font-size: .61rem; letter-spacing: .16em; gap: 5px 10px }
  .act { flex-direction: column; align-items: flex-start; gap: .2em }
  .actions { width: 100% }
  .actions .btn { flex: 1 1 auto }
  .card .reach { flex-direction: column; align-items: flex-start; gap: 10px }
  .foot { flex-direction: column; align-items: flex-start; gap: 6px }
}