/* Cinematic service cards; fuller scope remains in native disclosures. */
#services { padding-block-end: var(--space-8); }
#services + #selected-work { padding-block-start: var(--space-8); }
/* Keep the Visionovisor feature compact and aligned with its poster. */
#work.section--evidence { padding-block: 2rem; }
#work .evidencefeature__media { max-inline-size: 22rem; }
#work .evidencefeature__media .project-card__poster { margin-block-start: 0; }
@media (min-width: 64.001rem) {
  #work .evidencefeature { grid-template-columns: minmax(0, 22rem) minmax(0, 1fr); align-items: center; gap: clamp(2rem, 4vw, 4rem); }
}
#services .sectionintro { max-inline-size: none; }
#services .sectionintro > p { max-inline-size: 72ch; }
#services .services-list { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); align-items: stretch; gap: 1.5rem; }
#services .services-list:has(.serviceoffer__disclosure[open]) .serviceoffer { align-self: start; }
#services .serviceoffer,
#services .serviceoffer:hover {
  position: relative; isolation: isolate; display: flex; min-inline-size: 0; padding: 0; overflow: hidden;
  color: #fff; background: #0b1624; border: 1px solid #cbd5e1; border-radius: 18px;
  box-shadow: 0 8px 28px rgb(11 16 32 / .08); transform: none;
  transition: border-color .3s ease, box-shadow .3s ease;
}
#services .serviceoffer:hover,
#services .serviceoffer:focus-within { border-color: #6d9ba8; box-shadow: 0 16px 40px rgb(11 16 32 / .16); }
#services .serviceoffer__media { position: absolute; z-index: -1; inset: 0; overflow: hidden; pointer-events: none; }
#services .serviceoffer__video { display: block; inline-size: 100%; block-size: 100%; max-block-size: 46rem; object-fit: cover; object-position: center center; transition: transform 1s ease; }
#services .serviceoffer:hover .serviceoffer__video { transform: scale(1.035); }
#services .serviceoffer__media::after {
  content: ''; position: absolute; inset: 0;
  background: linear-gradient(180deg, transparent 0%, transparent 40%, rgb(5 15 26 / .9) 52%, rgb(5 15 26 / .98) 70%, #0b1624 100%);
}
#services .serviceoffer__content { display: flex; flex-direction: column; gap: 1rem; inline-size: 100%; min-block-size: 39rem; padding: 2rem; }
#services .serviceoffer__topline { display: flex; justify-content: space-between; align-items: center; min-block-size: 2.5rem; margin-block-end: 10rem; }
#services .serviceoffer__index { display: inline-flex; align-items: center; gap: .75rem; color: #fff; font-size: .875rem; font-weight: 600; font-variant-numeric: tabular-nums; line-height: 1; text-shadow: 0 1px 8px #081523; }
#services .serviceoffer__index::before { content: ''; inline-size: 1.5rem; block-size: 1px; background: #fff; }
#services .serviceoffer h3 { max-inline-size: 23ch; margin: 0; color: #fff; font-size: clamp(1.5rem, 2.25vw, 1.875rem); line-height: 1.25; min-block-size: 2.5em; font-weight: 600; letter-spacing: -.025em; text-wrap: balance; text-shadow: 0 1px 3px #000, 0 2px 10px #000; }
#services .serviceoffer p,
#services .serviceoffer .service-scope { margin: 0; color: #e0e7ef; font-size: var(--type-essential); line-height: var(--leading-essential); text-shadow: 0 1px 4px rgb(0 0 0 / .9); }
#services .serviceoffer .serviceoffer__examples { color: #a8dce8; font-size: .875rem; line-height: 1.65; }
#services .serviceoffer__deliverable { display: grid; gap: .4rem; margin-block-start: .25rem !important; padding-block-start: 1rem; border-block-start: 1px solid rgb(212 228 240 / .23); }
#services .serviceoffer__deliverable strong { color: #a8dce8; font-size: .75rem; font-weight: 600; letter-spacing: .1em; line-height: 1.5; text-transform: uppercase; }
#services .serviceoffer__deliverable > span { font-size: .9375rem; line-height: 1.6; }
#services .serviceoffer__cta { display: flex; justify-content: space-between; align-items: center; gap: 1rem; min-block-size: 3.25rem; margin-block-start: 0; padding-block: .5rem; color: #fff; font-size: 1rem; font-weight: 600; line-height: 1.5; text-decoration: none; }
#services .serviceoffer__cta::after { content: '↗'; display: grid; place-items: center; flex-shrink: 0; inline-size: 2.5rem; block-size: 2.5rem; color: #fff; border: 1px solid rgb(212 228 240 / .4); border-radius: 50%; font-size: 1.25rem; font-weight: 400; transition: background .2s ease, color .2s ease, border-color .2s ease; }
#services .serviceoffer__cta:hover { color: #a8e7f4; }
#services .serviceoffer__cta:hover::after { color: #081523; background: #a8e7f4; border-color: #a8e7f4; }
#services .serviceoffer__disclosure { inline-size: 100%; border-block-start: 1px solid rgb(212 228 240 / .23); }
#services .serviceoffer__disclosure > summary { display: flex; justify-content: space-between; align-items: center; gap: 1rem; min-block-size: 2.75rem; padding-block-start: .75rem; color: #c3d2df; list-style: none; font-size: .875rem; line-height: 1.5; cursor: pointer; }
#services .serviceoffer__disclosure > summary::-webkit-details-marker { display: none; }
#services .serviceoffer__disclosure > summary::after { content: '+'; font-size: 1.5rem; line-height: 1; font-weight: 400; }
#services .serviceoffer__disclosure[open] > summary::after { content: '−'; }
#services .serviceoffer__disclosure > summary:hover { color: #fff; }
#services .serviceoffer :is(a, button, summary):focus-visible { outline: 3px solid #a8e7f4; outline-offset: 4px; border-radius: 4px; }
#services .serviceoffer:focus-visible { outline: 3px solid var(--color-action); outline-offset: 4px; }
#services .serviceoffer .service-meta { display: grid; gap: 1.5rem; margin-block-start: 1.5rem; padding: 0; border: 0; }
#services .serviceoffer .service-meta__label { color: #fff; }
#services .serviceoffer .service-meta__item p { margin-block-start: .5rem; }
#services .serviceoffer__disclosure > p { margin-block-start: 1rem; }
#services .service-entry-links a { color: #a8e7f4; text-decoration: underline; text-underline-offset: .2em; }
#services .service-entry-links a:hover { color: #fff; }
#service-feasibility-investment .serviceoffer__video { object-position: center 80%; }
#service-training-capability .serviceoffer__video { object-position: center bottom; }
html[dir='rtl'] #services .serviceoffer__cta::after { transform: scaleX(-1); }
html[lang='ar'] #services .serviceoffer h3 { line-height: 1.5; min-block-size: 3em; letter-spacing: 0; }
html[lang='ar'] #services .serviceoffer__deliverable strong { letter-spacing: 0; }
html[lang='ar'] #services .serviceoffer__deliverable > span { font-size: var(--type-essential); line-height: var(--leading-essential); }
/* On wide screens, keep each portrait video in its native 9:20 proportion. */
@media (min-width: 64rem) {
  #services > .container,
  #selected-work > .container { width: min(1600px, 100% - 2.5rem); }
  #services .services-list { grid-template-columns: repeat(4, minmax(0, 1fr)); gap: 1rem; }
  #services .serviceoffer__media { inset: 0 0 auto; aspect-ratio: 9 / 20; }
  #services .serviceoffer__video { max-block-size: none; object-position: center; }
  #services .serviceoffer__content { min-block-size: max(46rem, calc((min(1600px, 100vw - 2.5rem) - 3rem) * .5556)); padding: 1.25rem; gap: .875rem; }
  #services .serviceoffer__topline { margin-block-end: clamp(10rem, calc(25vw - 5rem), 19rem); }
  #services .serviceoffer h3 { font-size: 1.25rem; line-height: 1.35; min-block-size: 4.05em; letter-spacing: 0; }
  #services .serviceoffer__cta { gap: .5rem; }
  #services .serviceoffer__cta::after { inline-size: 2.25rem; block-size: 2.25rem; }
  html[lang='ar'] #services .serviceoffer h3 { line-height: 1.5; min-block-size: 4.5em; }
}
@media (min-width: 48.001rem) { #services .services-list:not(:has(.serviceoffer__disclosure[open])) { grid-auto-rows: 1fr; } }
@media (max-width: 48rem) {
  #services .services-list { grid-template-columns: minmax(0, 1fr); gap: 1.25rem; }
  #services .serviceoffer__content { min-block-size: 36rem; padding: 1.5rem; }
  #services .serviceoffer__topline { margin-block-end: 3.5rem; }
  #services .serviceoffer h3 { margin-block-start: auto; font-size: 1.75rem; min-block-size: 0; }
  #service-ai-digital .serviceoffer__video { object-position: center bottom; }
}
/* An open disclosure can move its heading higher, so retain contrast there. */
#services .serviceoffer:has(.serviceoffer__disclosure[open]) .serviceoffer__media::after {
  background: linear-gradient(180deg, rgb(5 15 26 / .16) 0, rgb(5 15 26 / .28) 5rem, rgb(5 15 26 / .8) 10rem, rgb(5 15 26 / .97) 22rem, #0b1624 31rem);
}
@media (prefers-reduced-motion: reduce) {
  #services .serviceoffer, #services .serviceoffer *, #services .serviceoffer *::after { transition: none; }
  #services .serviceoffer:hover .serviceoffer__video { transform: none; }
}

/* Align the homepage to the same responsive edges as the service cards. */
body.home-page { --home-content-width: min(1120px, 100% - 3rem); }
body.home-page .site-header .nav,
body.home-page main > section > .container,
body.home-page #process .delivery-section__callout > .container,
body.home-page .site-footer > .container { inline-size: var(--home-content-width); }
@media (min-width: 64rem) {
  body.home-page { --home-content-width: min(1600px, 100% - 2.5rem); }
}
@media (max-width: 48rem) {
  body.home-page { --home-content-width: min(1120px, 100% - 2rem); }
}