/* ===========================================================================
   04 · SERVICES — THE TWO TRACKS       prefix .svc-  /  .svc__

   Two cards, not three.  The measured template geometry that still applies is
   kept (the 12px grey shell, the 12px gutter, the 48px pill), because those
   numbers tie this section to the rest of the page.  Everything the accordion
   needed — flex-grow ratios, the collapsed 220px text column, the :has()
   fallback — is gone, because there is nothing left to expand.

   Written logical-first: no physical side properties anywhere in the file. The
   whole file works in both directions from one set of rules, and the two
   direction-dependent things (the diagonal arrows, and mono letter-spacing on
   Arabic) are handled explicitly at the bottom of each block.
   =========================================================================== */

.svc {
  padding: 96px 0;
  background: #fff;
  /* every diagonal arrow in this section reads this; RTL flips it once */
  --flip: 1;
}

/* -- header block -------------------------------------------------------- */

.svc__head {
  max-width: 752px;
  margin-inline: auto;
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 20px;
  text-align: center;
}

.svc__title {
  margin: 0;
  font-size: 48px;
  line-height: 56.16px;
  font-weight: 500;
  letter-spacing: -0.06em;            /* -2.88px at 48px */
  color: var(--ink);
}

.svc__lede {
  max-width: 560px;
  color: var(--body);
  text-wrap: balance;
}

/* -- the grey shell ------------------------------------------------------ */

.svc__shell {
  margin-top: 64px;
  display: grid;
  grid-template-columns: 1fr 1fr;     /* two equal tracks, never 2fr 1fr */
  gap: 12px;
  padding: 12px;
  border-radius: 24px;
  background: var(--card-grey);
}

/* -- one card ------------------------------------------------------------ */

.svc-card {
  position: relative;
  display: flex;
  flex-direction: column;
  padding: 12px;
  border-radius: 16px;
  background: #fff;
  box-shadow: 0 3px 6px rgba(0, 0, 0, .06);
  transition: box-shadow .35s, transform .35s cubic-bezier(.22,.61,.36,1);
}
.svc-card:hover,
.svc-card:focus-within {
  transform: translateY(-4px);
  box-shadow: 0 16px 34px rgba(6, 46, 82, .13);
}

.svc-card__shot {
  height: clamp(160px, 14vw, 208px);
  border-radius: 12px;
  overflow: hidden;
  background: #dfe4ea;                /* holds the box before the jpeg lands */
}
/* Both photographs Ahmad supplied are 2:3 portrait and this slot is 3.16:1, so
   `cover` keeps about a fifth of each image and throws the rest away. Where
   that fifth is taken from is therefore a real decision, not a default:
   the office is aimed at the desk and the painting behind it, and the phone at
   the top of its screen where the interface reads. Both measured against the
   crop, not guessed. */
.svc-card--apps .svc-card__shot img { object-position: 50% 30%; }
.svc-card--pm   .svc-card__shot img { object-position: 50% 58%; }

.svc-card__shot img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  transform: scale(1.02);
  transition: transform .6s cubic-bezier(.22,.61,.36,1);
}
.svc-card:hover .svc-card__shot img { transform: scale(1.07); }

.svc-card__body {
  flex: 1;
  display: flex;
  flex-direction: column;
  padding: 0 12px 12px;
}

/* The badge is pulled up over the photo and punched out of it with a white
   ring, so the flat placeholder art reads as a panel rather than a gap. */
.svc-card__icon {
  position: relative;
  z-index: 1;
  pointer-events: none;               /* it sits over the card's own link */
  margin-block-start: -28px;
  margin-inline-start: 8px;
  width: 56px;
  height: 56px;
  border-radius: 16px;
  background: var(--lime);
  box-shadow: 0 0 0 6px #fff;
  display: grid;
  place-items: center;
}
.svc-card__icon svg { width: 28px; height: 28px; fill: var(--ink); }

/* track 2 inverts the badge — same shape, opposite fill, so the pair reads as
   two options rather than a repeated item */
.svc-card--pm .svc-card__icon { background: var(--ink); }
.svc-card--pm .svc-card__icon svg { fill: var(--lime); }

.svc-card__title {
  margin: 20px 0 0;
  font-size: 24px;
  line-height: 32px;
  font-weight: 500;
  letter-spacing: -0.04em;            /* -0.96px at 24px */
  color: var(--ink);
}

.svc-card__link { display: inline-flex; align-items: center; gap: 10px; }
/* The whole card is the target for this link. Two things lift themselves back
   above it: the quote button, so it keeps its own destination, and the
   description, because an overlay that covers a paragraph makes that paragraph
   impossible to select — you drag across it and start a link drag instead. */
.svc-card__link::after {
  content: '';
  position: absolute;
  inset: 0;
  border-radius: 16px;
}
.svc-card__link:focus-visible { outline: 2px solid var(--ink); outline-offset: 4px; }

.svc-card__arrow {
  width: 18px;
  height: 18px;
  flex: none;
  color: var(--ink);
  opacity: .45;
  transform: scaleX(var(--flip));
  transition: transform .3s cubic-bezier(.22,.61,.36,1), opacity .3s;
}
.svc-card:hover .svc-card__arrow {
  opacity: 1;
  transform: scaleX(var(--flip)) translate(3px, -3px);
}

.svc-card__desc {
  position: relative;                 /* above .svc-card__link::after, so the
                                         paragraph can actually be selected */
  z-index: 1;
  margin-top: 10px;
  max-width: var(--measure);
  color: var(--body-soft);
}

.svc-card__foot {
  position: relative;
  z-index: 1;                         /* above .svc-card__link::after */
  margin-block-start: auto;           /* both cards' buttons line up */
  padding-block-start: 28px;
  display: flex;
}

/* ======================================================= RTL =========== */
/* Three things change direction, and nothing else does. */

/* 1. the diagonal arrows */
[dir="rtl"] .svc { --flip: -1; }

/* 2. positive tracking pulls Arabic letters apart at the joins */
[dir="rtl"] .svc .mono { letter-spacing: 0; }

/* 3. Arabic sits taller in the line box than Latin at the same size, and the
      Latin heading's -0.06em crowds the joins, so both are eased here rather
      than in the shared value. */
[dir="rtl"] .svc__title    { line-height: 1.34; letter-spacing: -0.02em; }
[dir="rtl"] .svc-card__title { line-height: 1.45; letter-spacing: -0.01em; }
[dir="rtl"] .svc-card__desc  { line-height: 1.75; }
[dir="rtl"] .svc__lede       { line-height: 1.7; }

/* ======================================================= RESPONSIVE ==== */

@media (max-width: 1279px) {
  /* one column: the two tracks stop being a side-by-side choice and become a
     sequence, which is the only honest way to show them on a narrow screen */
  .svc__shell { grid-template-columns: 1fr; }
  .svc__title { font-size: clamp(30px, 4.2vw, 48px); line-height: 1.17; }
  [dir="rtl"] .svc__title { line-height: 1.34; }
}

/* Between 810 and 1279 a stacked card is roughly 700–1230px wide.  Keeping the
   photo as a full-width band there left a 230px slab of art over two lines of
   type, so the card turns on its side instead: art on the inline-start edge,
   copy beside it, and the badge back in the flow where it has room. */
@media (min-width: 810px) and (max-width: 1279px) {
  /* One column, so the grid no longer equalises the two cards for us. Their
     copy differs by two lines, and because the photo is flex:0 0 32% of the
     card HEIGHT here, unequal cards meant two visibly different picture sizes
     stacked on top of each other. 1fr rows put that back. */
  .svc__shell { grid-auto-rows: 1fr; }
  .svc-card { flex-direction: row; align-items: stretch; gap: 20px; min-height: 268px; }
  .svc-card__shot { flex: 0 0 clamp(240px, 32%, 360px); height: auto; }
  .svc-card__body { padding-block: 12px; padding-inline: 0 12px; }
  .svc-card__icon {
    margin-block-start: 0;
    margin-inline-start: 0;
    box-shadow: none;
  }
  .svc-card__title { margin-block-start: 16px; }
}

@media (max-width: 809px) {
  .svc { padding: 64px 0; }
  .svc__shell { margin-top: 44px; border-radius: 20px; }
  .svc__lede { max-width: 100%; }
  .svc-card__shot { height: 168px; }
  .svc-card__desc { max-width: 100%; }
  .svc-card__foot { padding-block-start: 22px; }
}

/* Removing the transition and leaving the transform in place does not remove
   the motion — it makes it instantaneous, which is the one thing a visitor who
   asked for less movement least wants. Every hover transform is returned to its
   RESTING value, not to none: the second arrow is parked off-screen by a
   transform, and transform:none would drop it on top of the first. The hover
   still reads, through colour and opacity, which do not move. */
@media (prefers-reduced-motion: reduce) {
  .svc-card,
  .svc-card__shot img,
  .svc-card__arrow { transition: none; }

  .svc-card:hover, .svc-card:focus-within { transform: none; }
  .svc-card:hover .svc-card__shot img { transform: scale(1.02); }
  .svc-card:hover .svc-card__arrow { transform: scaleX(var(--flip)); }
}