/* ==========================================================================
   Services page template — shared by all five individual service pages
   (services-explainer-video.html, services-lottie-animation.html,
   services-3d-product.html, services-logo-animation.html,
   services-motion-graphics.html). One stylesheet, five instances: only the
   copy/images/icon differ per page, the markup and classes are identical.

   Structural ideas are borrowed from the site's existing inner-page pattern
   (css/about.css: alternating text/photo rows, near-black section shades
   with small static accent spots, closing .cta-liquid band) but every class
   is original under a `.services__` prefix, per the project's naming rule —
   no about__/pitch__/roadmap__ class names are reused here.
   ========================================================================== */

/* On a single service the page is built from several stacked section blocks, so
   the radial-gradient background must sit on the PAGE once (not repeat per
   block) — otherwise the accent blobs restart at the top of every section and
   read as separate panels. The content sections go transparent; the closing CTA
   keeps its own darker band. */
body.single-rm_service main#main {
  background-color: #0c0c10;
  background-image: radial-gradient(circle at 12% 4%, rgba(91, 42, 134, 0.16), transparent 26%),
    radial-gradient(circle at 88% 97%, rgba(255, 122, 26, 0.1), transparent 24%);
}
body.single-rm_service .services-details,
body.single-rm_service .about-story {
  background: transparent;
}

/* --- Detail rows: "What's Included" bullet list + "Who It's For"/process copy --- */

/* padding-top matches every other inner page's own top section (Shop,
   Blog, Portfolio, Product, the Blog article template) — var(--space-16),
   the same fixed gap below .page-header's own hairline everywhere;
   bottom padding is unrelated and stays as it was. */
.services-details {
  position: relative;
  background-color: #0c0c10;
  background-image: radial-gradient(circle at 12% 10%, rgba(91, 42, 134, 0.16), transparent 34%),
    radial-gradient(circle at 88% 90%, rgba(255, 122, 26, 0.1), transparent 32%);
  padding-top: var(--space-16);
  padding-bottom: var(--space-16);
}

.services__block {
  display: grid;
  grid-template-columns: minmax(420px, 1fr) minmax(420px, 1fr);
  align-items: center;
  gap: 80px;
  max-width: var(--container-max);
  margin-inline: auto;
  padding-inline: var(--container-pad);
}

/* --- Hero row (currently only services-explainer-video.html — the other
   four service pages keep the older .services__block layout as their
   template until this one's approved). Same two-column shape as the
   homepage's own .banner__inner, minus its animated mosaic/glow — this
   section keeps .services-details' own plain radial-gradient background
   instead. align-items: stretch (not center, unlike .services__block
   above) is what lets the CTA below sit flush with the video's own
   bottom edge regardless of how long the description text runs — see
   .services__hero-cta-wrap's own note below. */
/* align-items: start (не stretch) — так медіа-колонка не витягується під
   висоту тексту: рамка завжди дорівнює власному відео 16:9, без порожньої
   смуги з градієнтом під ним на вужчих екранах. */
.services__hero-row {
  display: grid;
  grid-template-columns: minmax(0, 1fr) minmax(0, 1fr);
  align-items: start;
  gap: 80px;
  max-width: var(--container-max);
  margin-inline: auto;
  padding-inline: var(--container-pad);
}

.services__hero-content {
  display: flex;
  flex-direction: column;
}

/* Same size/line-height as .product__title (css/product.css) — the whole
   page now reads off that one scale (26px headings, 16px/1.7 body, 20px
   heading-to-text gap) instead of a bespoke bigger-hero-heading size. */
.services__hero-title {
  font-family: var(--font-heading);
  font-size: 26px;
  font-weight: 700;
  line-height: 1.2;
  letter-spacing: -0.01em;
  color: var(--color-text);
}

/* Same size/line-height as .product__body. */
.services__hero-text {
  margin-top: var(--space-5);
  font-size: var(--fs-body);
  line-height: 1.7;
  color: var(--color-text-muted);
}

/* margin-top: auto docks the button to the bottom of this column no
   matter how short or long .services__hero-text runs — the column
   itself is already stretched to the video's own height (align-items:
   stretch on .services__hero-row above), so the button's bottom edge
   always lines up with the video frame's bottom edge. */
.services__hero-cta-wrap {
  margin-top: auto;
  padding-top: var(--space-8);
  width: fit-content;
}

.services__hero-media {
  position: relative;
}

/* Same glowing rotating-ring recipe as the homepage's own
   .banner__media-bloom/.banner__media-frame (css/banner.css) — a blurred
   copy of the ring sitting behind it for ambient glow, plus the crisp
   ring itself: an oversized conic-gradient square spinning behind the
   frame, clipped down to a thin ring by overflow:hidden + 2px padding.
   Keyframe is duplicated under its own name (servicesFrameSpin) rather
   than reusing bannerFrameSpin since this page never loads banner.css. */
.services__hero-media-bloom {
  position: absolute;
  inset: -40px;
  z-index: 0;
  overflow: hidden;
  border-radius: var(--radius-md);
  filter: blur(42px);
  opacity: 0.4;
}

.services__hero-media-bloom::before {
  content: "";
  position: absolute;
  inset: -100%;
  background: conic-gradient(var(--color-purple), var(--color-magenta), var(--color-orange), var(--color-magenta), var(--color-purple));
  animation: servicesFrameSpin 16s linear infinite;
}

.services__hero-frame {
  position: relative;
  z-index: 1;
  overflow: hidden;
  padding: 2px;
  border-radius: var(--radius-md);
  background: #07070b;
  box-shadow: 0 30px 96px rgba(0, 0, 0, 0.64), 0 0 30px rgba(91, 42, 134, 0.34),
    0 0 34px rgba(192, 41, 139, 0.26), 0 0 58px rgba(255, 122, 26, 0.16);
}

.services__hero-frame::before {
  content: "";
  position: absolute;
  inset: -100%;
  z-index: 0;
  background: conic-gradient(var(--color-purple), var(--color-magenta), var(--color-orange), var(--color-magenta), var(--color-purple));
  animation: servicesFrameSpin 16s linear infinite;
}

@keyframes servicesFrameSpin {
  to {
    rotate: 360deg;
  }
}

.services__hero-frame-inner {
  position: relative;
  z-index: 1;
  aspect-ratio: 16 / 9;
  border-radius: calc(var(--radius-md) - 2px);
  overflow: hidden;
  background: #07070b;
}

.services__hero-video {
  width: 100%;
  height: 100%;
  display: block;
  object-fit: cover;
  background: #07070b;
}

/* Full-width statement below the hero row — same "plain full-width
   paragraph" idea as .about__statement (css/about.css), just its own
   recipe since about.css isn't loaded here. */
/* Same size/line-height as .product__body — see the note on
   .services__hero-title above. */
.services__hero-note {
  max-width: var(--container-max);
  margin: var(--space-16) auto var(--space-16);
  padding-inline: var(--container-pad);
  font-size: var(--fs-body);
  line-height: 1.7;
  color: var(--color-text-muted);
}

/* --- Spotlight strip: a few portfolio works filtered to this service's own
   category (see portfolio.html's data-filter-tags="explainer-video" items),
   reusing the shop card's visual language (elevated bg, border, hover lift)
   under its own class prefix since this is a curated, non-filterable strip
   rather than the Shop grid itself. --- */

/* Explicit gap above this section — same 64px (var(--space-16)) rhythm as
   .services__block + .services__block, the standard inner-page section gap
   (96px is reserved for the homepage only). Without this, the gap above relied
   on .services__block's two columns happening to differ in height (the
   shorter one leaving visible space below it) rather than on any real
   margin — every element resets to margin: 0 (css/base.css), so once the
   copy column grew taller than the cross-sell grid beside it, that
   coincidental gap collapsed to 0. */
.services__spotlight {
  padding-top: var(--space-16);
  padding-bottom: var(--space-16);
}

.services__spotlight-inner {
  max-width: var(--container-max);
  margin-inline: auto;
  padding-inline: var(--container-pad);
}

/* Heading above a card grid / carousel. Uses space-6 (24px), not the 20px
   used above body text: cards/carousels start flush at their top edge with
   no line-leading, so a literal 20px reads visually tighter than the same
   20px above a paragraph (whose first line carries ~5px of leading). The
   extra 4px makes the heading→cards gap LOOK identical to heading→text. */
.services__section-title {
  font-size: 26px;
  margin-bottom: var(--space-6);
  color: var(--color-text); /* explicit white — otherwise it inherits the muted
                               grey of .product__body when the carousel block is
                               placed on a product page */
}

/* Same prev/viewport/track/next mechanics as the blog article's own
   "Keep reading" carousel (js/article-related-carousel.js) — an infinite
   loop built by cloning the edge cards, sliding one card at a time on a
   timer or an arrow click. js/services-spotlight-carousel.js drives this
   one under its own data attributes since it needs its own VISIBLE count
   (4, not 5 — square cards read better wider than that carousel's 16:9
   ones) and this page never loads article.css. */
.services__spotlight-carousel {
  display: flex;
  align-items: center;
  gap: var(--space-4);
}

/* Same outline + hover-outline-swap recipe as .article__related-arrow. */
.services__spotlight-arrow {
  flex-shrink: 0;
  width: 40px;
  height: 40px;
  border-radius: 50%;
  display: flex;
  align-items: center;
  justify-content: center;
  border: 1px solid var(--color-border);
  background: var(--color-bg-elevated);
  color: var(--color-text-muted);
  cursor: pointer;
  transition: background var(--duration-fast) var(--ease-standard),
    color var(--duration-fast) var(--ease-standard),
    border-color var(--duration-fast) var(--ease-standard);
}

.services__spotlight-arrow:hover {
  background: var(--color-bg-elevated-hover);
  color: var(--color-text);
  border-color: var(--color-border-strong);
}

.services__spotlight-arrow svg {
  width: 20px;
  height: 20px;
}

/* container-type lets .services__spotlight-card size itself off THIS box's
   width (via cqw, below) rather than the track's oversized one — same
   reasoning as .article__related-viewport. */
.services__spotlight-viewport {
  flex: 1;
  min-width: 0;
  overflow: hidden;
  container-type: inline-size;
}

.services__spotlight-track {
  display: flex;
  gap: var(--space-5);
  transition: transform 900ms ease-in-out;
}

/* Exactly 4 fit the viewport width (3 gaps between them) — cqw resolves
   against .services__spotlight-viewport above, not this track. Same card
   shape (radius, elevated bg, border) as .shop__card. Border-only hover,
   no lift/shadow — same reasoning as .article__related-card: the carousel
   can be mid-slide under the cursor, so movement-on-hover would fight the
   slide animation. A <button>, not an <a> (clicking opens the lightbox
   video instead of navigating), so it needs its own reset of the browser's
   default button chrome. */
/* display: flex + flex-direction: column (not the browser's default block
   button box) is what pins the media to the top no matter what — a plain
   <button> taller than its own content centers that content vertically by
   default in some browsers, which is exactly what made the thumbnail
   "jump" and leave blank space above it whenever a neighboring card's
   2-line name made this row's flex item (the whole button, stretched by
   .services__spotlight-track's default align-items: stretch) taller than
   a 1-line-name card's own content. Column flex packs children from the
   top (justify-content defaults to flex-start), so any leftover height
   lands after .services__spotlight-name instead — and with that name now
   reserving a fixed 2-line height below, there normally isn't any
   leftover height to begin with. */
.services__spotlight-card {
  flex: 0 0 calc((100cqw - 3 * var(--space-5)) / 4);
  display: flex;
  flex-direction: column;
  width: 100%;
  border-radius: var(--radius-md);
  background: var(--color-bg-elevated);
  border: 1px solid var(--color-border);
  overflow: hidden;
  padding: 0;
  font: inherit;
  text-align: left;
  color: inherit;
  cursor: pointer;
  transition: border-color var(--duration-fast) var(--ease-standard);
}

.services__spotlight-card:hover,
.services__spotlight-card:focus-visible {
  border-color: var(--color-border-strong);
}

/* The carousel card reuses .works__trigger (for the hover-preview + lightbox
   behaviour). On inner pages WP loads css/works.css globally, and its
   .works__trigger { display: block } + ::before 16:9 spacer would break this
   card's flex-column layout and stack a phantom 16:9 block under the real media
   (the static verstka never loads works.css on a service page, so it never saw
   this). Re-assert flex and kill the spacer — higher specificity wins. */
.services__spotlight-card.works__trigger {
  display: flex;
}
.services__spotlight-card.works__trigger::before {
  content: none;
  display: none;
  padding-bottom: 0;
}

/* 16:9 — the standing ratio for every individual portfolio-work thumbnail
   on the site (Shop/Works cards, this carousel); only the "other services"
   cross-sell grid above uses a different crop. object-fit: contain (not
   cover) + a solid fill behind it — a few of the source stills in
   assets/portfolio/ aren't actually cut to 16:9 themselves, and cover
   would crop those hard; contain always shows the full frame, letterboxed
   on the odd one out instead of cropped. */
.services__spotlight-media {
  display: block;
  position: relative;
  aspect-ratio: 16 / 9;
  overflow: hidden;
  background: #07070b;
}

.services__spotlight-media img {
  width: 100%;
  height: 100%;
  object-fit: contain;
}

/* Hover reveal — same recipe as the Works archive (css/works.css): the
   image itself never zooms (per the user's own standing instruction), but
   a muted preview loop, a dark shade, and the play button (.works__play,
   shared via components.css) are all hidden until hover/focus and fade in
   together, exactly like portfolio.html. Duplicated here under the same
   class names since this page never loads works.css. */
.works__preview {
  display: block;
  position: absolute;
  inset: 0;
  z-index: 1;
  opacity: 0;
  transition: opacity 950ms var(--ease-standard);
}

.services__spotlight-card:hover .works__preview,
.services__spotlight-card:focus-visible .works__preview {
  opacity: 1;
}

.works__preview-video {
  width: 100%;
  height: 100%;
  object-fit: cover;
}

.works__shade {
  position: absolute;
  inset: 0;
  background: rgba(12, 6, 18, 0.78);
}

/* min-height reserves the worst case — 2 clamped lines at this font-size/
   line-height, plus the padding above and below — so a 1-line name leaves
   the extra space at the bottom of this box instead of the card shrinking
   and every card in the row (same .services__spotlight-track, all
   stretched to the tallest one) ending up a different height. Same
   "measured worst case" reasoning as .works__card/.shop__card's own
   min-height in their own files. .clamp-2 (components.css) truncates
   anything past 2 lines with an ellipsis rather than growing the box. */
.services__spotlight-name {
  min-height: 72px;
  padding: var(--space-4);
  font-size: 15px;
  font-weight: 700;
  color: var(--color-text);
  line-height: 1.3;
}
/* The name is a direct flex child of the card/body, which blockifies its display
   to flow-root and kills -webkit-line-clamp. So the 2-line clamp lives on an
   INNER span (a normal block child), which the browser leaves as -webkit-box. */
.services__spotlight-name .clamp-2 {
  display: -webkit-box;
  -webkit-box-orient: vertical;
  -webkit-line-clamp: 2;
  overflow: hidden;
}

/* Product / post carousel cards — an <a>, with a text body (name + price/date)
   under the media. Products and posts carry real cropped imagery, so their
   thumbnails cover the 16:9 frame (works keep `contain` for the odd un-cropped
   still). The body owns the padding, so the name inside it resets its own. */
.services__spotlight-card--link {
  text-decoration: none;
}
.services__spotlight-body {
  padding: var(--space-4);
  display: flex;
  flex-direction: column;
  gap: 6px;
}
.services__spotlight-body .services__spotlight-name {
  min-height: 0;
  padding: 0;
}
.services__spotlight-price {
  font-size: 15px;
  font-weight: 700;
  color: var(--color-text);
}
.services__spotlight-meta {
  font-size: 12px;
  color: var(--color-text-muted);
  text-transform: uppercase;
  letter-spacing: 0.04em;
}
.services__spotlight--products .services__spotlight-media img,
.services__spotlight--posts .services__spotlight-media img {
  object-fit: cover;
}

/* Products/posts carousels reuse the REAL cards: products → shop card, posts →
   the compact «Читайте також» related card (like at the bottom of an article).
   Give them the carousel's own 4→2→1 sizing so they slide like the works cards. */
.services__spotlight-track > .shop__card,
.services__spotlight-track > .blog__card,
.services__spotlight-track > .article__related-card {
  flex: 0 0 calc((100cqw - 3 * var(--space-5)) / 4);
  width: 100%;
}
@media (max-width: 900px) {
  .services__spotlight-track > .shop__card,
  .services__spotlight-track > .blog__card,
  .services__spotlight-track > .article__related-card {
    flex-basis: calc((100cqw - var(--space-5)) / 2);
  }
}
@media (max-width: 560px) {
  .services__spotlight-track > .shop__card,
  .services__spotlight-track > .blog__card,
  .services__spotlight-track > .article__related-card {
    flex-basis: 100cqw;
  }
}

/* In the carousel, product cards size to their content (no grid min-height) and
   the rating follows the text instead of docking to the bottom — so a short
   description no longer leaves a big empty gap under the card. */
.services__spotlight-track > .shop__card {
  min-height: 0;
}
.services__spotlight-track .shop__card-body {
  flex: 0 0 auto;
}
.services__spotlight-track .shop__card-rating,
.services__spotlight-track .shop__card-footer {
  margin-top: var(--space-3);
}

/* A carousel placed inside a blog post breaks out of the narrow reading column
   to the full inner-page width (its own inner re-centres to the container). */
.article__content .services__spotlight {
  width: 100vw;
  margin-left: calc(50% - 50vw);
  margin-right: calc(50% - 50vw);
}

.services__block + .services__block {
  margin-top: var(--space-16);
}

.services__block--reverse .services__copy {
  order: 2;
}

.services__block--reverse .services__visual {
  order: 1;
}

/* Top-aligns both columns instead of the default vertical centering —
   used where the copy column should read at the same height as the media
   beside it rather than centered against it (e.g. once no eyebrow label
   sits above the title to naturally push it down to that level). */
.services__block--align-top {
  align-items: flex-start;
}

/* Cross-sell grid: replaces a single .services__visual image with a 2-up
   grid of other-service cards — same idea as the old .services-more
   scroll-snap strip, just laid out as a fixed grid (not a track) and
   sized to sit inside a copy row instead of its own full-width section.
   Grid (not flex), so it isn't capped at any particular card count —
   a 5th/6th card just starts a new row. */
.services__cross-col {
  align-self: stretch;
}

.services__cross-grid {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: var(--space-5);
}

/* Overrides .services__more-media's shared 4:3 aspect-ratio (components.css)
   with a 16:9 crop for this grid only — everything else about the card
   (radius, hover lift, zoom) still comes from the shared rules. */
.services__cross-media {
  aspect-ratio: 16 / 9;
}

/* Overrides components.css's shared .services__more-card:hover zoom for
   this grid only (higher specificity: 4 classes vs. its 3) — the other
   four service pages' own "other services" strip at the bottom keeps that
   zoom untouched, this cross-sell grid just doesn't want it. */
.services__cross-grid .services__more-card:hover .services__cross-media img {
  transform: none;
}

/* --- Copy column --- */

.services__eyebrow {
  display: inline-block;
  font-size: 12px;
  font-weight: 700;
  letter-spacing: 0.12em;
  text-transform: uppercase;
  color: var(--color-orange);
  margin-bottom: var(--space-3);
}

/* Same 26px/16px scale as every other inner-page heading/body pair on the
   site now (.about__title, .product__title, .services__hero-title, etc.)
   — shared by all five service page templates, not just Explainer Video's
   own hero-row markup. */
.services__title {
  font-family: var(--font-heading);
  font-size: 26px;
  font-weight: 700;
  line-height: 1.2;
  letter-spacing: -0.01em;
  color: var(--color-text);
}

.services__text {
  margin-top: var(--space-5);
  font-size: var(--fs-body);
  line-height: 1.7;
  color: var(--color-text-muted);
}

.services__text + .services__text {
  margin-top: var(--space-4);
}

/* Bullet list ("What's Included") */

.services__list {
  margin-top: var(--space-6);
  display: flex;
  flex-direction: column;
  gap: var(--space-4);
}

.services__list-item {
  display: flex;
  align-items: flex-start;
  gap: var(--space-3);
}

.services__list-icon {
  flex-shrink: 0;
  width: 26px;
  height: 26px;
  margin-top: 2px;
  border-radius: 50%;
  border: 1.5px solid var(--color-orange);
  display: flex;
  align-items: center;
  justify-content: center;
}

.services__list-icon svg {
  width: 12px;
  height: 12px;
}

.services__list-icon svg path {
  stroke: var(--color-orange);
}

.services__list-text {
  font-size: 16px;
  line-height: 1.5;
  color: var(--color-text-muted);
  padding-top: 2px;
}

/* --- Visual column --- */

.services__visual {
  position: relative;
  border-radius: var(--radius-md);
  overflow: hidden;
  border: 1px solid var(--color-border);
  box-shadow: 0 18px 54px rgba(0, 0, 0, 0.34), inset 0 1px 0 rgba(255, 255, 255, 0.08);
}

.services__visual img {
  width: 100%;
  height: 420px;
  object-fit: cover;
}

.services__visual::after {
  content: "";
  position: absolute;
  inset: 0;
  background: linear-gradient(180deg, transparent 60%, rgba(5, 5, 6, 0.55) 100%);
  pointer-events: none;
}

/* --- Closing CTA band --- */

.services-cta {
  position: relative;
  background-color: #0a0a0d;
  padding-block: var(--space-16);
  text-align: center;
}

.services-cta::before {
  content: "";
  position: absolute;
  top: 0;
  left: 0;
  right: 0;
  height: 1px;
  background: linear-gradient(90deg, transparent, rgba(91, 42, 134, 0.5), rgba(255, 122, 26, 0.5), transparent);
}

.services__cta-title {
  font-family: var(--font-heading);
  font-size: 26px;
  font-weight: 700;
  line-height: 1.2;
  letter-spacing: -0.01em;
  color: var(--color-text);
  max-width: 640px;
  margin-inline: auto;
}

.services__cta-text {
  margin: var(--space-5) auto 0;
  max-width: 520px;
  font-size: var(--fs-body);
  line-height: 1.7;
  color: var(--color-text-muted);
}

.services__cta-wrap {
  display: inline-block;
  margin-top: var(--space-8);
}

.services__more-card {
  flex: 0 0 260px;
  scroll-snap-align: start;
  display: block;
  border-radius: var(--radius-md);
  overflow: hidden;
  background: var(--color-bg-elevated);
  border: 1px solid var(--color-border);
  transition: transform var(--duration-fast) var(--ease-standard),
    border-color var(--duration-fast) var(--ease-standard),
    box-shadow var(--duration-fast) var(--ease-standard);
}

/* .services__more-card:hover, .services__more-media (+ its hover zoom)
   are defined once in css/components.css, shared with the equivalent
   Shop/Product/Blog card recipes. */

.services__more-name {
  display: block;
  padding: var(--space-4);
  font-size: 15px;
  font-weight: 700;
  color: var(--color-text);
  line-height: 1.3;
}

/* --- Tablet/mobile (≤1024px) --- */
@media (max-width: 1024px) {
  /* 1) Hero stacks to one column so the video never overflows the screen
     (two side-by-side columns couldn't fit at 900-1024px). The video's own
     16:9 ramka fix lives in the base rules above (align-items:start +
     no forced height), so it applies at every width. */
  .services__hero-row {
    grid-template-columns: 1fr;
    gap: var(--space-8);
  }

  /* 2) Hero CTA: full width, and it sticks under the header on scroll —
     same behaviour as the homepage banner button (js/banner-cta-sticky.js,
     opted in via data-sticky-cta). */
  .services__hero-cta-wrap {
    display: block;
    width: 100%;
    margin-top: var(--space-6);
    padding-top: 0;
  }
  .services__hero-cta {
    width: 100%;
  }
  .services__hero-cta-wrap.is-stuck {
    position: fixed;
    top: var(--header-height);
    left: var(--container-pad);
    right: var(--container-pad);
    width: auto;
    margin: 0;
    z-index: 40;
  }

  /* 3) "Explore other services": 3x2 -> 2x3 (see base rule; stays 2 columns
     all the way down, never a single column). */
  .services__cross-grid {
    grid-template-columns: 1fr 1fr;
  }

  /* 4) Closing "Ready to turn..." CTA band is dropped on mobile/tablet. */
  .services-cta {
    display: none;
  }
}

@media (max-width: 900px) {
  .services__intro-row {
    grid-template-columns: 1fr;
    gap: var(--space-8);
    text-align: center;
    justify-items: center;
  }

  .services__block,
  .services__hero-row {
    grid-template-columns: 1fr;
    gap: var(--space-8);
  }

  .services__block--reverse .services__copy,
  .services__block--reverse .services__visual {
    order: initial;
  }

  .services__block--align-top {
    align-items: initial;
  }

  .services__block + .services__block {
    margin-top: var(--space-12);
  }

  .services__visual img {
    height: 300px;
  }

  .services__more-card {
    flex-basis: 200px;
  }

  .services__divider {
    margin: var(--space-12) auto;
  }

  /* 2 visible instead of 4 — same cqw formula, one gap instead of three. */
  .services__spotlight-card {
    flex-basis: calc((100cqw - var(--space-5)) / 2);
  }
}

@media (max-width: 560px) {
  .services__spotlight-card {
    flex-basis: 100cqw;
  }
}


/* Mobile: product/post carousel price a touch smaller. */
@media (max-width: 767px) {
	.services__spotlight-price { font-size: 13px; }
}