/* ==========================================================================
   SERVICE PAGES — shared template
   Used by: Branding, Digital Marketing, Design & Print, Websites.
   Sections in page order:
   1. Hero (title + large image)     5. Gallery (6 real pieces, dark textured)
   2. Overview (centered statement)  6. Audience ("Who it's for")
   3. Components (what's included)   6b. Monthly plans (trial)
                                     7. FAQ (accordion)
   4. Process (shared .process)      8. Closing CTA
   ========================================================================== */

/* Shared heading sizes for this template */
.svc-h2 {
  font-size: var(--text-3xl);
  font-weight: var(--weight-regular);
  line-height: var(--leading-tight);
}

.svc-lead {
  max-width: 610px;
  color: var(--color-text-strong);
  font-size: var(--text-18);
  line-height: var(--leading-relaxed);
}

/* Media frame: every image in this template is cropped to a fixed ratio */
.svc-media {
  width: 100%;
  height: auto;
  object-fit: cover;
  background: var(--gray-300);
}

/* --------------------------------------------------------------------------
   1. HERO
   The image overlaps the next section by 70px (see .svc-overview padding).
   -------------------------------------------------------------------------- */
.svc-hero {
  position: relative;
  z-index: 1;
  padding-top: var(--header-offset);
  background: var(--blue-900);
  color: var(--white);
  text-align: center;
  isolation: isolate;
}

/* Purple wash over the navy background */
.svc-hero::before {
  content: "";
  position: absolute;
  inset: 0;
  z-index: -1;
  background: var(--purple-900);
  opacity: 0.7;
}

.svc-hero__inner {
  display: flex;
  flex-direction: column;
  align-items: center;
}

.svc-hero__title {
  font-size: clamp(3.5rem, 8vw, 7.25rem);
  font-weight: var(--weight-regular);
  line-height: var(--leading-tight);
}

.svc-hero__text {
  max-width: 610px;
  margin-top: 20px;
  font-size: var(--text-20);
  line-height: var(--leading-relaxed);
}

.svc-hero__media {
  aspect-ratio: 1.8 / 1;
  margin: 56px 0 -70px;
}

/* HERO WALL (Mike, 7-oct-2026)
   Model: the "Tile Designs" video of the homepage intro, rebuilt with real
   portfolio pieces. A masonry wall (every tile keeps its own shape) larger than
   the frame, and a "camera" that travels over it in a 10 s loop:
   tiles pop in → flat wall with one piece jumping to the front → tilted wall →
   close-up pan → rotated wall with a slow zoom → tiles fade out → again.
   Every size is in cqw (1cqw = 1% of the frame width), so the composition is
   the same on desktop and phone. With "reduce motion" the wall stays still.
   To tune: the loop length is --wall-loop; the camera stops are in
   @keyframes svc-wall-camera. */
.svc-wall {
  --wall-loop: 10s;
  --wall-gap: 1cqw;
  position: relative;
  overflow: hidden;
  container-type: inline-size;
  background: var(--black);
}

.svc-wall__camera {
  position: absolute;
  inset: 0;
  perspective: 140cqw;
}

.svc-wall__stage {
  position: absolute;
  top: 50%;
  left: 50%;
  display: flex;
  align-items: flex-start;
  gap: var(--wall-gap);
  width: 150cqw;
  translate: -50% -50%;
  transform: scale(0.72);
}

.svc-wall__col {
  display: flex;
  flex: 1;
  flex-direction: column;
  gap: var(--wall-gap);
}

.svc-wall__col:nth-child(even) {
  margin-top: -5cqw;
}

.svc-wall__tile {
  display: block;
  width: 100%;
  height: auto;
}

/* The piece that jumps to the front: 3 images stacked, shown one after another,
   cropped to a square and centered in the frame */
.svc-wall__spot {
  position: absolute;
  top: 50%;
  left: 50%;
  width: 40cqw;
  aspect-ratio: 1;
  translate: -50% -50%;
  box-shadow: var(--shadow-m);
  opacity: 0;
}

/* Websites: the captures are tall phone screens, so they keep their shape */
.svc-wall__spot--phone {
  width: 23cqw;
  aspect-ratio: 430 / 932;
}

.svc-wall__spot img {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  object-fit: cover;
}

@media (prefers-reduced-motion: no-preference) {
  .svc-wall__stage {
    animation: svc-wall-camera var(--wall-loop) infinite;
    will-change: transform;
  }

  .svc-wall__tile {
    animation: svc-wall-tile var(--wall-loop) infinite both;
    animation-delay: calc(var(--i) * 15ms);
  }

  .svc-wall__spot {
    animation: svc-wall-spot var(--wall-loop) infinite;
  }

  .svc-wall__spot img:nth-child(2) {
    animation: svc-wall-spot-2 var(--wall-loop) infinite;
  }

  .svc-wall__spot img:nth-child(3) {
    animation: svc-wall-spot-3 var(--wall-loop) infinite;
  }

  /* Off screen: everything waits (main.js › 20) */
  .svc-wall.is-paused :is(.svc-wall__stage, .svc-wall__col, .svc-wall__tile, .svc-wall__spot, .svc-wall__spot img) {
    animation-play-state: paused;
  }
}

@keyframes svc-wall-camera {
  0% {
    transform: translate3d(0, 0, 0) rotateX(0deg) rotateZ(0deg) scale(1.05);
    animation-timing-function: cubic-bezier(0.3, 0, 0.2, 1);
  }
  9% {
    transform: translate3d(0, 0, 0) rotateX(0deg) rotateZ(0deg) scale(0.72);
    animation-timing-function: linear;
  }
  30% {
    transform: translate3d(-3cqw, -1cqw, 0) rotateX(0deg) rotateZ(0deg) scale(0.72);
    animation-timing-function: cubic-bezier(0.65, 0, 0.35, 1);
  }
  37% {
    transform: translate3d(-6cqw, -10cqw, 0) rotateX(52deg) rotateZ(-28deg) scale(1.5);
    animation-timing-function: linear;
  }
  48% {
    transform: translate3d(-14cqw, -14cqw, 0) rotateX(52deg) rotateZ(-28deg) scale(1.5);
    animation-timing-function: cubic-bezier(0.65, 0, 0.35, 1);
  }
  54% {
    transform: translate3d(12cqw, -8cqw, 0) rotateX(0deg) rotateZ(0deg) scale(1.7);
    animation-timing-function: linear;
  }
  68% {
    transform: translate3d(-12cqw, 8cqw, 0) rotateX(0deg) rotateZ(0deg) scale(1.7);
    animation-timing-function: cubic-bezier(0.65, 0, 0.35, 1);
  }
  75% {
    transform: translate3d(0, 0, 0) rotateX(0deg) rotateZ(-24deg) scale(1.15);
    animation-timing-function: linear;
  }
  100% {
    transform: translate3d(2cqw, -2cqw, 0) rotateX(0deg) rotateZ(-24deg) scale(1.5);
  }
}

/* Route B (Design & Print; "motion": "b" in the page JSON). Same wall, other trip:
   the tiles pop in on a wall tilted the opposite way → it flattens and a piece
   jumps to the front → rotated wall with a slow zoom. All along, neighbouring
   columns slide in opposite directions. */
@media (prefers-reduced-motion: no-preference) {
  .svc-wall--b .svc-wall__stage {
    animation-name: svc-wall-camera-b;
  }

  .svc-wall--b .svc-wall__col {
    animation: svc-wall-col-up var(--wall-loop) linear infinite;
  }

  .svc-wall--b .svc-wall__col:nth-child(even) {
    animation-name: svc-wall-col-down;
  }

  .svc-wall--b .svc-wall__spot {
    animation-name: svc-wall-spot-b;
  }

  .svc-wall--b .svc-wall__spot img:nth-child(2) {
    animation-name: svc-wall-spot-b-2;
  }

  .svc-wall--b .svc-wall__spot img:nth-child(3) {
    animation-name: svc-wall-spot-b-3;
  }
}

@keyframes svc-wall-camera-b {
  0% {
    transform: translate3d(6cqw, -10cqw, 0) rotateX(52deg) rotateZ(28deg) scale(1.5);
    animation-timing-function: linear;
  }
  30% {
    transform: translate3d(14cqw, -14cqw, 0) rotateX(52deg) rotateZ(28deg) scale(1.5);
    animation-timing-function: cubic-bezier(0.65, 0, 0.35, 1);
  }
  38% {
    transform: translate3d(0, 0, 0) rotateX(0deg) rotateZ(0deg) scale(0.72);
    animation-timing-function: linear;
  }
  62% {
    transform: translate3d(2cqw, 1cqw, 0) rotateX(0deg) rotateZ(0deg) scale(0.72);
    animation-timing-function: cubic-bezier(0.65, 0, 0.35, 1);
  }
  70% {
    transform: translate3d(0, 0, 0) rotateX(0deg) rotateZ(18deg) scale(1.2);
    animation-timing-function: linear;
  }
  100% {
    transform: translate3d(-3cqw, 2cqw, 0) rotateX(0deg) rotateZ(18deg) scale(1.6);
  }
}

@keyframes svc-wall-col-up {
  from { translate: 0 4cqw; }
  to { translate: 0 -4cqw; }
}

@keyframes svc-wall-col-down {
  from { translate: 0 -4cqw; }
  to { translate: 0 4cqw; }
}

@keyframes svc-wall-spot-b {
  0%, 39.5% {
    opacity: 0;
    scale: 0.6;
    animation-timing-function: cubic-bezier(0.2, 1.4, 0.4, 1);
  }
  41%, 60.5% {
    opacity: 1;
    scale: 1;
  }
  62%, 100% {
    opacity: 0;
    scale: 0.8;
  }
}

@keyframes svc-wall-spot-b-2 {
  0%, 47.4% { opacity: 0; }
  47.6%, 100% { opacity: 1; }
}

@keyframes svc-wall-spot-b-3 {
  0%, 53.9% { opacity: 0; }
  54.1%, 100% { opacity: 1; }
}

/* Each tile pops in at the start of the loop and fades out before it restarts
   (the camera jumps back to the start while every tile is hidden) */
@keyframes svc-wall-tile {
  0% {
    opacity: 0;
    scale: 0.5;
    animation-timing-function: cubic-bezier(0.2, 1.4, 0.4, 1);
  }
  3%, 90% {
    opacity: 1;
    scale: 1;
  }
  93%, 100% {
    opacity: 0;
    scale: 0.8;
  }
}

@keyframes svc-wall-spot {
  0%, 9.5% {
    opacity: 0;
    scale: 0.6;
    animation-timing-function: cubic-bezier(0.2, 1.4, 0.4, 1);
  }
  11%, 29.5% {
    opacity: 1;
    scale: 1;
  }
  31%, 100% {
    opacity: 0;
    scale: 0.8;
  }
}

@keyframes svc-wall-spot-2 {
  0%, 16.9% { opacity: 0; }
  17.1%, 100% { opacity: 1; }
}

@keyframes svc-wall-spot-3 {
  0%, 23.4% { opacity: 0; }
  23.6%, 100% { opacity: 1; }
}

/* --------------------------------------------------------------------------
   2. OVERVIEW
   -------------------------------------------------------------------------- */
.svc-overview {
  padding: calc(70px + var(--space-xl)) 0 var(--space-section);
  background: var(--gray-100);
  text-align: center;
}

.svc-overview__inner {
  display: flex;
  flex-direction: column;
  align-items: center;
  max-width: 760px;
}

.svc-overview .svc-lead {
  margin-top: 22px;
}

/* --------------------------------------------------------------------------
   3. COMPONENTS (numbered list of what the work can include)
   -------------------------------------------------------------------------- */
.svc-components {
  padding: var(--space-section) 0;
  background: var(--white);
}

.svc-components__head {
  display: grid;
  grid-template-columns: repeat(var(--grid-columns), minmax(0, 1fr));
  column-gap: var(--grid-gap);
  row-gap: 30px;
  align-items: end;
  margin-bottom: 44px;
}

.svc-components__head > :first-child { grid-column: 1 / 7; }
.svc-components__head > :last-child  { grid-column: 7 / -1; }

.svc-components__head .svc-lead {
  max-width: 470px;
}

.svc-list {
  margin: 0;
  padding: 0;
  list-style: none;
  border-bottom: 1px solid var(--gray-300);
}

.svc-list__item {
  display: grid;
  grid-template-columns: repeat(var(--grid-columns), minmax(0, 1fr));
  column-gap: var(--grid-gap);
  row-gap: 16px;
  align-items: start;
  padding: 20px 0;
  border-top: 1px solid var(--gray-300);
}

.svc-list__number { grid-column: 1; }
.svc-list__title  { grid-column: 2 / 7; }
.svc-list__text   { grid-column: 7 / -1; }

.svc-list__number,
.svc-list__title {
  font-family: var(--font-display);
  font-size: var(--text-20);
  font-weight: var(--weight-semibold);   /* Mike, 28-sep-2026 (was regular) */
  line-height: var(--leading-snug);
}

.svc-list__number,
.svc-list__title {
  color: var(--color-text-strong);
}

.svc-list__text {
  color: var(--color-text-strong);
  font-size: var(--text-16);
  line-height: var(--leading-relaxed);
}

/* --------------------------------------------------------------------------
   5. GALLERY
   -------------------------------------------------------------------------- */
.svc-gallery {
  padding-bottom: var(--space-section);
}

/* The textured (dark) gallery gets its background from .bg-texture instead */
.svc-gallery:not(.bg-texture) {
  background: var(--white);
}

/* The classic gallery (no modifier) now follows the dark process section: it needs its own top space */
.process + .svc-gallery:not([class*="svc-gallery--"]) {
  padding-top: var(--space-section);
}

.svc-gallery__wide {
  aspect-ratio: 3.2 / 1;
}

.svc-gallery__pair {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: var(--grid-gap);
  margin-top: var(--grid-gap);
}

.svc-gallery__pair .svc-media {
  aspect-ratio: 1.7 / 1;
}

/* Masonry version (Mike, 5-oct-2026; real work + dark background 7-oct-2026).
   Same black texture and grid lines as the homepage intro (.intro in home.css:
   texture at 30% over black). 3 independent columns of 2 tiles, so every column
   keeps its own staggered heights. Each tile sets its shape with --ratio (inline)
   and, when the crop needs help, its focal point with --pos (inline). */
.svc-gallery--masonry {
  --texture-opacity: 0.3;
  padding-block: var(--space-xl);
  color: var(--white);
}

.svc-masonry {
  display: flex;
  align-items: flex-start;
  gap: var(--grid-gap);
}

.svc-masonry__col {
  display: flex;
  flex: 1 1 0;
  flex-direction: column;
  gap: var(--grid-gap);
  min-width: 0;
}

/* The tile is the reveal frame (components.css › IMAGE REVEAL + PARALLAX) and holds the crop
   shape. The gallery keeps the opening (Top Appear) but not the drift inside the frame
   (Mike, 7-oct-2026): --reveal-overscan 1 = photo not enlarged, no parallax. */
.svc-masonry__item {
  --reveal-overscan: 1;
  --reveal-position: var(--pos, 50% 50%);   /* each tile's own crop point (inline --pos, from the page JSON) */
  margin: 0;
  aspect-ratio: var(--ratio, 1 / 1);
  border-radius: var(--radius-card);
  background: var(--gray-300);
}

/* Phone screenshots (Websites): 430 px wide originals, so they stay small and sharp
   in a row of 6, every other one lower for the staggered look */
.svc-masonry--phones {
  display: grid;
  grid-template-columns: repeat(6, minmax(0, 1fr));
}

.svc-masonry--phones .svc-masonry__item:nth-child(even) {
  margin-top: clamp(40px, 6vw, 88px);
}

/* "See more" CTA under the gallery */
.svc-gallery__more {
  display: flex;
  margin-top: var(--space-xl);
}

@media (max-width: 991px) {
  .svc-masonry--phones {
    grid-template-columns: repeat(3, minmax(0, 1fr));
  }

  .svc-masonry--phones .svc-masonry__item:nth-child(even) {
    margin-top: 0;
  }

  .svc-masonry--phones .svc-masonry__item:nth-child(3n + 2) {
    margin-top: clamp(40px, 6vw, 88px);
  }
}

/* Phones: 2 columns. The 3 desktop columns dissolve and the 6 tiles flow into 2 balanced ones */
@media (max-width: 767px) {
  .svc-masonry:not(.svc-masonry--phones) {
    display: block;
    column-count: 2;
    column-gap: var(--grid-gap);
  }

  .svc-masonry__col {
    display: contents;
  }

  .svc-masonry:not(.svc-masonry--phones) .svc-masonry__item {
    break-inside: avoid;
    margin-bottom: var(--grid-gap);
  }

  .svc-masonry--phones {
    grid-template-columns: repeat(2, minmax(0, 1fr));
  }

  .svc-masonry--phones .svc-masonry__item:nth-child(3n + 2) {
    margin-top: 0;
  }

  .svc-masonry--phones .svc-masonry__item:nth-child(even) {
    margin-top: 40px;
  }

  .svc-gallery__more .btn {
    --btn-pad: 24px;
    max-width: 100%;
    white-space: normal;
    text-align: center;
  }
}

/* Carousel version (Branding): orbit carousel on --cyan-900, full width */
.svc-gallery--carousel {
  padding-block: var(--space-section);
  background: var(--cyan-900);
}

/* --------------------------------------------------------------------------
   6. AUDIENCE
   -------------------------------------------------------------------------- */
.svc-audience {
  padding: var(--space-section) 0;
  background: var(--blue-850);
  color: var(--white);
}

.svc-audience__inner {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 38px;
  align-items: center;
}

.svc-audience__text {
  margin: 20px 0;
  font-size: var(--text-16);
  line-height: var(--leading-relaxed);
}

.svc-audience__list {
  margin: 0;
  padding: 0;
  list-style: none;
}

.svc-audience__list li {
  padding: 16px 0;
  border-bottom: 1px solid var(--gray-700);
  font-family: var(--font-display);
  font-size: var(--text-20);
  line-height: var(--leading-cozy);
}

.svc-audience__media {
  aspect-ratio: 1.45 / 1;
}

/* --------------------------------------------------------------------------
   6b. MONTHLY PLANS (trial — Mike, 7-oct-2026)
   Model: "Membership Plans" of arpeggio.framer.website. Three columns:
   plan card · switch + price · what the plan includes. The switch swaps the
   three at once (main.js › 21), with no transition. Content: plans.json.
   -------------------------------------------------------------------------- */
.svc-plans {
  padding: var(--space-section) 0;
  background: var(--gray-100);
}

.svc-plans__head {
  display: flex;
  flex-direction: column;
  align-items: center;
  margin-bottom: var(--space-xl);
  text-align: center;
}

.svc-plans__head .svc-lead {
  margin-top: 20px;
}

.svc-plans__body {
  display: grid;
  grid-template-columns: repeat(var(--grid-columns), minmax(0, 1fr));
  column-gap: var(--grid-gap);
  align-items: center;
}

.svc-plans [hidden] {
  display: none;
}

/* Left: the plan card (texture + giant word, in place of the reference's box photo) */
.svc-plans__card {
  position: relative;
  grid-column: 1 / 5;
  display: flex;
  flex-direction: column;
  container-type: inline-size;
  aspect-ratio: 4 / 5;
  padding: var(--space-m);
  overflow: hidden;
  border-radius: var(--radius-card);
  color: var(--white);
}

.svc-plans__card-name {
  font-family: var(--font-display);
  font-size: var(--text-l);
  line-height: var(--leading-snug);
}

.svc-plans__card-name span {
  display: block;
  color: var(--gold-500);
  font-family: var(--font-body);
  font-size: var(--text-14);
  font-weight: var(--weight-medium);
}

.svc-plans__card-word {
  margin-top: auto;
  font-family: var(--font-display);
  font-size: 27cqw;
  font-weight: var(--weight-semibold);
  line-height: 0.85;
  letter-spacing: var(--tracking-tight);
  text-transform: uppercase;
  white-space: nowrap;
}

.bg-texture--black .svc-plans__card-word {
  color: var(--gold-500);
}

.svc-plans__card-note {
  margin-top: var(--space-s);
  font-size: var(--text-14);
}

/* Center: switch, price and buttons */
.svc-plans__center {
  grid-column: 5 / 9;
  display: flex;
  flex-direction: column;
  align-items: center;
  padding-inline: var(--space-s);
  text-align: center;
}

.svc-plans__switch {
  display: inline-flex;
  padding: 3px;
  border: 1px solid var(--blue-900);
  border-radius: var(--radius-pill);
}

.svc-plans__tab {
  min-height: 44px;
  padding: 8px 20px;
  border: 0;
  border-radius: var(--radius-pill);
  background: none;
  color: var(--blue-900);
  font-family: var(--font-body);
  font-size: var(--text-14);
  font-weight: var(--weight-semibold);
  cursor: pointer;
}

.svc-plans__tab[aria-selected="true"] {
  background: var(--blue-900);
  color: var(--white);
}

.svc-plans__tab:focus-visible {
  outline: 2px solid var(--color-focus);
  outline-offset: 2px;
}

.svc-plans__tagline {
  margin-top: var(--space-m);
  color: var(--color-label);
  font-size: var(--text-2xl);
  font-weight: var(--weight-regular);
  line-height: var(--leading-snug);
}

.svc-plans__price {
  display: flex;
  align-items: flex-start;
  gap: 6px;
  margin-top: var(--space-s);
  color: var(--color-heading);
  font-family: var(--font-display);
  font-size: var(--text-6xl);
  font-weight: var(--weight-semibold);
  line-height: var(--leading-none);
}

.svc-plans__price span {
  margin-top: 0.5em;
  font-family: var(--font-body);
  font-size: var(--text-16);
  font-weight: var(--weight-medium);
}

.svc-plans__note {
  margin-top: var(--space-xs);
  font-size: var(--text-14);
}

.svc-plans__help {
  max-width: 300px;
  margin-top: var(--space-m);
  font-size: var(--text-m);
  line-height: var(--leading-normal);
}

.svc-plans__actions {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: var(--space-2xs);
  margin-top: var(--space-m);
}

/* Right: what the plan includes */
.svc-plans__features {
  grid-column: 9 / -1;
  margin: 0;
  padding: 0;
  list-style: none;
}

.svc-plans__features li {
  display: grid;
  grid-template-columns: 22px 1fr;
  column-gap: 14px;
  row-gap: 6px;
  padding: 18px 0;
  border-bottom: 1px solid var(--color-border);
}

.svc-plans__features li:first-child {
  padding-top: 0;
}

.svc-plans__features .icon {
  width: 22px;
  height: 22px;
  margin-top: 1px;
  color: var(--color-primary);
}

.svc-plans__features h4 {
  font-family: var(--font-display);
  font-size: var(--text-20);
  font-weight: var(--weight-medium);
  line-height: var(--leading-cozy);
}

.svc-plans__features p {
  grid-column: 2;
  color: var(--color-text-strong);
  font-size: var(--text-16);
  line-height: var(--leading-normal);
}

/* --------------------------------------------------------------------------
   7. FAQ
   Accordion styles live in components.css (.faq) — shared with other pages.
   -------------------------------------------------------------------------- */
.svc-faq {
  padding: var(--space-section) 0;
  background: var(--white);
}

.svc-faq__inner {
  display: grid;
  grid-template-columns: repeat(var(--grid-columns), minmax(0, 1fr));
  column-gap: var(--grid-gap);
  row-gap: 54px;
}

.svc-faq__inner > :first-child { grid-column: 1 / 5; }
.svc-faq__inner > :last-child  { grid-column: 5 / -1; }

/* --------------------------------------------------------------------------
   8. CLOSING CTA
   Shared by every page: see .closing-cta in components.css.
   -------------------------------------------------------------------------- */
/* --------------------------------------------------------------------------
   RESPONSIVE
   -------------------------------------------------------------------------- */
@media (max-width: 991px) {
  .svc-audience__inner {
    grid-template-columns: 1fr;
  }

  .svc-components__head > :first-child,
  .svc-components__head > :last-child,
  .svc-faq__inner > :first-child,
  .svc-faq__inner > :last-child {
    grid-column: 1 / -1;
  }

  .svc-faq__inner {
    row-gap: 32px;
  }

  /* Plans: card and price side by side, the list underneath */
  .svc-plans__body {
    row-gap: var(--space-l);
  }

  .svc-plans__card   { grid-column: 1 / 6; }
  .svc-plans__center { grid-column: 6 / -1; }
  .svc-plans__features { grid-column: 1 / -1; }

}

@media (max-width: 767px) {
  .svc-hero__media {
    margin-bottom: -40px;
  }

  .svc-overview {
    padding-top: calc(40px + var(--space-xl));
    padding-bottom: var(--space-section);
  }

  .svc-components,
  .svc-audience,
  .svc-plans,
  .svc-faq {
    padding-block: var(--space-section);
  }

  /* Plans in one column: switch and price first, then the list, the card last */
  .svc-plans__card,
  .svc-plans__center,
  .svc-plans__features {
    grid-column: 1 / -1;
  }

  .svc-plans__center { order: 1; padding-inline: 0; }
  .svc-plans__features { order: 2; }

  .svc-plans__card {
    order: 3;
    aspect-ratio: 16 / 10;
  }

  .svc-plans__card-word {
    font-size: 22cqw;
  }

  .svc-gallery {
    padding-bottom: var(--space-section);
  }

  .process + .svc-gallery:not([class*="svc-gallery--"]) {
    padding-top: var(--space-section);
  }

  .svc-gallery--carousel {
    padding-top: var(--space-xl);
  }

  .svc-list__item {
    grid-template-columns: 40px 1fr;
  }

  .svc-list__number { grid-column: 1; }
  .svc-list__title,
  .svc-list__text   { grid-column: 2; }

  .svc-gallery__wide {
    aspect-ratio: 1.7 / 1;
  }

  .svc-gallery__pair {
    grid-template-columns: 1fr;
  }
}