/* ==========================================================================
   Services — "The Programme" (page-services.php)
   The white counterpart of the black Agency page: a programme's cover with
   its contents, then six numbered services set as large rows on hairlines,
   each opening in place (services-page.js), and a closing invitation.
   Orange marks state and sequence only: the open row's rule, its number and
   button, the labels' leads, the titles' full stops.
   ========================================================================== */

.services-page {
  --sv-line: rgba(4, 4, 4, 0.14);
  --sv-line-strong: rgba(4, 4, 4, 0.32);
  background: var(--cm-white); color: var(--cm-black);
}
.services-page main { color-scheme: light; }
.services-page .site-footer { color: var(--color-text); }   /* the footer stays on the black stage */
.services-page main ::selection { background: var(--cm-black); color: var(--cm-white); }
.sv-stop { color: var(--cm-orange); }

/* ---------- Hero: the programme's cover ---------- */
.sv-hero { padding-block: calc(var(--header-h) + var(--space-9)) var(--space-8); }
.sv-hero__grid { display: grid; grid-template-columns: repeat(12, minmax(0, 1fr)); column-gap: var(--grid-gap); row-gap: var(--space-6); }
.sv-hero .page-label { grid-column: 1 / -1; color: var(--cm-ink-600); }
.sv-hero__title {
  grid-column: 1 / 9; grid-row: 2; margin: 0;
  font-size: clamp(3rem, 0.6rem + 9vw, 11rem); line-height: 0.92; letter-spacing: var(--tracking-display);
}
:lang(ar) .sv-hero__title { font-size: clamp(3rem, 0.8rem + 8vw, 10rem); line-height: 1.25; }
.sv-line { display: block; overflow: hidden; padding-block-end: 0.12em; margin-block-end: -0.12em; }
:lang(ar) .sv-line { padding-block-end: 0.2em; margin-block-end: -0.2em; }
.sv-line__in { display: block; }
.sv-hero__aside { grid-column: 1 / -1; display: grid; grid-template-columns: subgrid; row-gap: var(--space-6); margin-block-start: var(--space-8); padding-block-start: var(--space-6); border-block-start: 1px solid var(--cm-black); }
.sv-hero__intro { grid-column: 1 / 7; margin: 0; font-size: var(--text-lead); font-weight: var(--weight-light); line-height: 1.5; color: var(--cm-ink-600); max-inline-size: 40ch; }
:lang(ar) .sv-hero__intro { line-height: 1.9; }
.sv-index { grid-column: 8 / -1; }
.sv-index__label { margin: 0 0 var(--space-3); font-size: var(--text-label); font-weight: var(--weight-medium); letter-spacing: var(--tracking-label); text-transform: uppercase; color: var(--cm-orange-ink); }
:lang(ar) .sv-index__label { text-transform: none; font-size: 14px; font-weight: var(--weight-semibold); }
.sv-index ol { display: grid; grid-template-columns: 1fr 1fr; column-gap: var(--grid-gap); }
.sv-index a {
  display: flex; align-items: baseline; gap: var(--space-3); min-block-size: 44px; padding-block: var(--space-2);
  border-block-end: 1px solid var(--sv-line); text-decoration: none; font-size: 15px; font-weight: var(--weight-medium);
  transition: color var(--dur-micro) var(--ease-standard);
}
.sv-index a .latin { font-size: 12px; letter-spacing: 0.1em; color: var(--cm-ink-500); }
.sv-index a:hover { color: var(--cm-orange-ink); }

@media (prefers-reduced-motion: no-preference) {
  .js:not(.motion-reduce) .sv-line__in { animation: sv-rise var(--dur-cinematic) var(--ease-curtain) 120ms both; }
  .js:not(.motion-reduce) .sv-line + .sv-line .sv-line__in { animation-delay: 260ms; }
  .js:not(.motion-reduce) .sv-hero__aside { animation: sv-fade var(--dur-cinematic) var(--ease-out) 650ms both; }
}
@keyframes sv-rise { from { transform: translateY(105%); } to { transform: none; } }
@keyframes sv-fade { from { opacity: 0; transform: translateY(var(--reveal-distance)); } to { opacity: 1; transform: none; } }

/* ---------- The programme: six rows ---------- */
.sv-programme { padding-block: var(--space-8) var(--space-section); }
.sv-list { border-block-start: 1px solid var(--cm-black); }
.svc { position: relative; border-block-end: 1px solid var(--sv-line); }
.svc::before {   /* the open row's orange rule draws across */
  content: ""; position: absolute; inset-block-start: -1px; inset-inline: 0; block-size: 2px; z-index: 1;
  background: var(--cm-orange); transform: scaleX(0); transform-origin: 0 50%;
  transition: transform var(--dur-cinematic) var(--ease-out);
}
[dir="rtl"] .svc::before { transform-origin: 100% 50%; }
.svc.is-open::before { transform: scaleX(1); }
.svc__head { margin: 0; font: inherit; }
.svc__toggle {
  display: grid; grid-template-columns: 5rem minmax(0, 1fr) auto 3.5rem; align-items: center; column-gap: var(--grid-gap);
  inline-size: 100%; padding-block: clamp(1.5rem, 0.9rem + 1.6vw, 2.75rem); padding-inline: 0;
  background: none; border: 0; color: inherit; text-align: start; text-decoration: none; cursor: pointer;
}
.svc__n { align-self: start; padding-block-start: 0.9em; font-size: 13px; font-weight: var(--weight-medium); letter-spacing: 0.1em; color: var(--cm-ink-500); transition: color var(--dur-ui) var(--ease-standard); }
.svc__name {
  font-size: clamp(2.25rem, 1rem + 4.4vw, 6rem); font-weight: var(--weight-bold); line-height: 1; letter-spacing: var(--tracking-display);
  transition: transform var(--dur-ui) var(--ease-out);
}
:lang(ar) .svc__name { font-size: clamp(1.9rem, 0.9rem + 3.4vw, 4.75rem); line-height: 1.35; }
.svc__scope { max-inline-size: 22rem; text-align: end; font-size: 12px; font-weight: var(--weight-medium); letter-spacing: 0.1em; text-transform: uppercase; color: var(--cm-ink-500); }
:lang(ar) .svc__scope { text-transform: none; letter-spacing: 0; font-size: 14px; }
.svc__icon {
  position: relative; justify-self: end; inline-size: 48px; block-size: 48px; border-radius: 50%;
  border: 1px solid var(--sv-line-strong);
  transition: background-color var(--dur-ui) var(--ease-standard), border-color var(--dur-ui) var(--ease-standard), transform var(--dur-ui) var(--ease-out);
}
.svc__icon:not(.svc__icon--go)::before, .svc__icon:not(.svc__icon--go)::after {
  content: ""; position: absolute; inset-block-start: 50%; inset-inline-start: 50%; inline-size: 14px; block-size: 1.5px;
  margin: -0.75px 0 0 -7px; background: currentColor;
}
.svc__icon:not(.svc__icon--go)::after { transform: rotate(90deg); }
.svc__icon--go { display: grid; place-items: center; }
.svc__icon--go svg { inline-size: 18px; block-size: 18px; transform: scaleX(var(--dir)); }

.svc__toggle:hover .svc__name, .svc__toggle:focus-visible .svc__name { transform: translateX(calc(var(--dir) * 0.6rem)); }
.svc__toggle:hover .svc__icon { border-color: var(--cm-black); }
.svc__toggle:hover .svc__n, .svc.is-open .svc__n { color: var(--cm-orange-ink); }
.svc.is-open .svc__icon { background: var(--cm-orange); border-color: var(--cm-orange); transform: rotate(45deg); }
.svc--static .svc__toggle:hover .svc__icon { background: var(--cm-orange); border-color: var(--cm-orange); }
.svc__toggle:focus-visible { outline-offset: -2px; }

/* Panel: open by default (no script); services-page.js closes them and adds .svc-ready */
.svc__panel { display: grid; grid-template-rows: 1fr; transition: grid-template-rows var(--dur-reveal) var(--ease-in-out); }
.svc-ready .svc:not(.is-open) .svc__panel { grid-template-rows: 0fr; }
.svc__body { min-block-size: 0; overflow: hidden; }
.svc__inner {
  display: grid; grid-template-columns: repeat(12, minmax(0, 1fr)); column-gap: var(--grid-gap); row-gap: var(--space-8);
  padding-block: var(--space-2) var(--space-9);
}
.svc-ready .svc__inner > * { opacity: 0; transform: translateY(16px); transition: opacity var(--dur-ui) var(--ease-standard), transform var(--dur-ui) var(--ease-out); }
.svc-ready .svc.is-open .svc__inner > * { opacity: 1; transform: none; transition-duration: var(--dur-reveal); }
.svc-ready .svc.is-open .svc__inner > :nth-child(1) { transition-delay: 160ms; }
.svc-ready .svc.is-open .svc__inner > :nth-child(2) { transition-delay: 240ms; }
.svc-ready .svc.is-open .svc__inner > :nth-child(3) { transition-delay: 320ms; }
.svc-ready .svc.is-open .svc__inner > :nth-child(4) { transition-delay: 400ms; }

.svc__intro {
  grid-column: 2 / 8; margin: 0;
  font-size: clamp(1.375rem, 1.05rem + 1.1vw, 2.125rem); font-weight: var(--weight-light); line-height: 1.3; letter-spacing: -0.012em;
  text-wrap: pretty; max-inline-size: 30ch;
}
:lang(ar) .svc__intro { line-height: 1.75; letter-spacing: 0; max-inline-size: 34ch; }
.svc__includes { grid-column: 9 / -1; }
.svc__work { grid-column: 2 / -1; }
.svc__cta { grid-column: 2 / -1; margin: 0; }
.svc__cta-prompt { display: block; margin-block-end: var(--space-4); font-size: var(--text-lead); font-weight: var(--weight-light); line-height: 1.4; color: var(--cm-ink-600); }   /* optional per-service closing line (services.json cta.prompt) */
.svc__label {
  display: flex; align-items: center; gap: var(--space-3); margin: 0 0 var(--space-4);
  font-size: var(--text-label); font-weight: var(--weight-medium); letter-spacing: var(--tracking-label); text-transform: uppercase; color: var(--cm-ink-600);
}
.svc__label::before { content: ""; inline-size: 2rem; block-size: 2px; background: var(--cm-orange); }
:lang(ar) .svc__label { text-transform: none; font-size: 14px; font-weight: var(--weight-semibold); }
.svc__caps li {
  display: flex; align-items: baseline; gap: var(--space-4); padding-block: var(--space-3);
  border-block-end: 1px solid var(--sv-line); font-size: var(--text-body); line-height: 1.45;
}
.svc__caps li:first-child { border-block-start: 1px solid var(--sv-line); }
.svc__caps .latin { flex: none; min-inline-size: 2ch; font-size: 12px; letter-spacing: 0.1em; color: var(--cm-ink-500); }

/* Selected work: the existing project pages, square-cornered pictures */
.sv-projects { display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); gap: var(--space-6) var(--grid-gap); }
.sv-projects[data-count="1"] > li { grid-column: span 2; }
.sv-proj { display: grid; gap: var(--space-2); text-decoration: none; color: inherit; }
.sv-proj__media { display: block; aspect-ratio: 4 / 3; overflow: hidden; background: var(--cm-ink-050); margin-block-end: var(--space-2); }
.sv-proj__media img { inline-size: 100%; block-size: 100%; object-fit: cover; transition: transform var(--dur-cinematic) var(--ease-out); }
.sv-proj__name {
  justify-self: start; font-size: 1.125rem; font-weight: var(--weight-semibold); line-height: 1.3;
  background-image: linear-gradient(var(--cm-orange), var(--cm-orange)); background-size: 0% 2px; background-repeat: no-repeat; background-position: 0 100%;
  transition: background-size var(--dur-ui) var(--ease-out);
}
[dir="rtl"] .sv-proj__name { background-position: 100% 100%; }
.sv-proj__meta { font-size: 13px; color: var(--cm-ink-500); }
.sv-proj:hover .sv-proj__media img, .sv-proj:focus-visible .sv-proj__media img { transform: scale(1.04); }
.sv-proj:hover .sv-proj__name, .sv-proj:focus-visible .sv-proj__name { background-size: 100% 2px; }

/* ---------- Closing invitation (still on white) ---------- */
.sv-cta { padding-block: 0 var(--space-section); }
.sv-cta__inner { display: grid; gap: var(--space-7); justify-items: start; }
.sv-cta__title { margin: 0; font-size: var(--text-display-l); line-height: var(--leading-display); letter-spacing: var(--tracking-display); }
.sv-cta__title > span { display: block; }
.sv-cta__actions { display: flex; flex-wrap: wrap; gap: var(--space-4); }
.btn--ink { --btn-bg: transparent; --btn-fg: var(--cm-black); border-color: var(--sv-line-strong); }
.btn--ink:hover { --btn-bg: var(--cm-black); --btn-fg: var(--cm-white); border-color: var(--cm-black); }

/* ---------- Tablet and phone ---------- */
@media (max-width: 1023px) {
  .sv-hero__title { grid-column: 1 / -1; }
  .sv-hero__intro { grid-column: 1 / -1; }
  .sv-index { grid-column: 1 / -1; }
  .svc__toggle { grid-template-columns: 3rem minmax(0, 1fr) 3rem; }
  .svc__scope { display: none; }
  .svc--static .svc__scope { display: block; grid-column: 2 / 3; grid-row: 2; text-align: start; margin-block-start: var(--space-2); }
  .svc__intro, .svc__includes, .svc__work, .svc__cta { grid-column: 1 / -1; }
  .sv-projects { grid-template-columns: repeat(3, minmax(0, 1fr)); }
  .sv-projects[data-count="1"] > li { grid-column: span 2; }
}
@media (max-width: 599px) {
  .sv-hero { padding-block: calc(var(--header-h) + var(--space-7)) var(--space-6); }
  .sv-index ol { grid-template-columns: 1fr; }
  .svc__toggle { grid-template-columns: 2.25rem minmax(0, 1fr) 2.75rem; column-gap: var(--space-3); }
  .svc__n { padding-block-start: 0.55em; }
  .svc__icon { inline-size: 44px; block-size: 44px; }
  .sv-projects { grid-template-columns: repeat(2, minmax(0, 1fr)); gap: var(--space-5) var(--space-4); }
  .sv-projects[data-count="1"] > li { grid-column: 1 / -1; }
  .sv-proj__name { font-size: 1rem; }
  .sv-cta__actions .btn { flex: 1 1 100%; justify-content: center; }
}