/* ============================================================
   Services page — page-specific styles.
   Reuses tokens/components already defined in styles.css:
   --red / --black / --white / --grey-soft / --text-secondary,
   --font-display / --font-text, --ease, .container, .reveal,
   .hero__eyebrow / .hero__eyebrow-line / .hero__eyebrow-text,
   .btn / .btn--primary.
   Entirely self-contained — the homepage's own Services section
   (.services / .service-row / .services__extra*) lives in
   styles.css and is untouched by anything in this file.
   ============================================================ */

.services-page .container{ max-width: var(--container-default); margin-left: auto; }

/* ---------- Top intro ----------
   padding-bottom was 72px while .svc-actions (Get a Quote / Call Us /
   chat CTAs) still sat below the text, filling that space visually;
   now that block is gone, so this is trimmed to match — otherwise the
   text is followed by a tall dead gap before the catalogue even starts,
   pushing the whole service list below the fold on ordinary laptop
   screens. */
.svc-hero{
  padding-top: 68px;
  padding-bottom: 28px;
}
.svc-hero__inner{
  max-width: 740px;
  margin: 0 auto;
  text-align: center;
}
.svc-hero__inner .hero__eyebrow{ justify-content: center; }
.svc-hero__inner .hero__eyebrow::after{
  content: "";
  width: 24px;
  height: 2px;
  background: var(--red);
  flex-shrink: 0;
}
.svc-hero__heading{
  margin: 0 auto;
  font-family: var(--font-display);
  font-weight: 800;
  /* Capped at 3rem (48px) rather than the spec's full 54px — at the
     wider end that size pushed the heading past a single line even
     at this block's own max-width, turning the intended two-line
     heading into three. */
  font-size: clamp(2.1rem, 3.4vw, 3rem);
  line-height: 1.08;
  letter-spacing: -0.015em;
  color: var(--black);
}
.svc-hero__heading span{
  color: var(--red);
}
.svc-hero__text{
  max-width: 32rem;
  margin: 18px auto 0;
  font-family: var(--font-text);
  font-size: 1rem;
  line-height: 1.55;
  color: var(--text-secondary);
}

.svc-catalogue{ padding-top: 40px; padding-bottom: 22px; }

/* ---------- Interactive catalogue — all 12 services in one
   hover-preview, two-column list. Breakpoint below must stay in
   sync with the ACCORDION_BREAKPOINT constant in
   services-catalog.js: that script decides (by the same width)
   whether a row's link previews-then-navigates or navigates straight
   away, and that decision only makes sense while the CSS below is
   actually rendering the matching layout. ---------- */
.svc-catalog{
  position: relative;
  width: 100%;
  max-width: var(--container-w);
  margin-left: 0;
  margin-right: auto;
  padding-inline: var(--pad-inline);
  display: grid;
  grid-template-columns: 36fr 64fr;
  column-gap: 56px;
  align-items: start;
}

.svc-catalog__list{
  min-width: 0;
}

.svc-row{
  position: relative;
  display: flex;
  align-items: flex-start;
  gap: 24px;
  padding: 32px 30px;
  border-bottom: 1px solid #E6E6E6;
  border-radius: 12px;
  transition: background-color 0.25s var(--ease);
}
.svc-catalog__list .svc-row:last-child{
  border-bottom: none;
}
.svc-row.is-active{
  background: #F7F7F6;
}

/* Stretched link: an absolutely-positioned box always paints above the
   row's ordinary in-flow children regardless of DOM order, so this makes
   the whole row a single accessible link without needing z-index or a
   click handler on every visible child. */
.svc-row__hit{
  position: absolute;
  inset: 0;
  border-radius: inherit;
}
.svc-row__hit:focus-visible{
  outline: 2px solid var(--red);
  outline-offset: -2px;
}

.svc-row__icon{
  flex: none;
  display: inline-flex;
  width: 40px;
  height: 40px;
  margin-top: 2px;
  color: var(--black);
  transition: color 0.25s var(--ease);
}
.svc-row__icon svg{ width: 100%; height: 100%; }
.svc-row.is-active .svc-row__icon{ color: var(--red); }

.svc-row__body{
  flex: 1;
  min-width: 0;
}
.svc-row__top{
  display: flex;
  align-items: baseline;
  gap: 10px;
}
.svc-row__num{
  flex: none;
  font-family: var(--font-display);
  font-weight: 400;
  font-size: 0.9rem;
  color: var(--text-secondary);
}
.svc-row__title{
  margin: 0;
  font-family: var(--font-display);
  font-weight: 700;
  font-size: 1.32rem;
  line-height: 1.3;
  color: var(--black);
  transition: color 0.25s var(--ease);
}
.svc-row.is-active .svc-row__title{ color: var(--red); }

.svc-row__desc{
  margin: 8px 0 0;
  font-family: var(--font-text);
  font-size: 1rem;
  line-height: 1.5;
  color: var(--text-secondary);
  max-width: 34rem;
}

/* Panel holds the image + read-more, collapsed by default on mobile
   (see the accordion breakpoint below); the description now lives
   outside it (as .svc-row__desc's own rule, above) so it's never
   subject to the collapse and is always fully visible. */
.svc-row__panel-media,
.svc-row__readmore{
  display: none;
}

.svc-row__plus{
  position: relative;
  flex: none;
  width: 18px;
  height: 18px;
  margin-top: 5px;
}
.svc-row__plus::before,
.svc-row__plus::after{
  content: '';
  position: absolute;
  left: 50%;
  top: 50%;
  background: var(--black);
  transition: background-color 0.25s var(--ease), transform 0.3s var(--ease), opacity 0.3s var(--ease);
}
.svc-row__plus::before{ width: 12px; height: 1.5px; transform: translate(-50%, -50%); }
.svc-row__plus::after{ width: 1.5px; height: 12px; transform: translate(-50%, -50%); }
.svc-row.is-active .svc-row__plus::before,
.svc-row.is-active .svc-row__plus::after{ background: var(--red); }

/* Services page only — a chevron (border-right + border-bottom,
   rotated) instead of the plus/minus above; Prices reuses the same
   .svc-row__plus markup and keeps the original plus/minus, so this is
   scoped to .services-page rather than changed at the shared base.
   Points right at rest ("expand"), rotates to point down when a row
   opens on the mobile accordion (see is-open override below) — for
   this border-right+border-bottom corner, rotate(-45deg) is right,
   rotate(45deg) is down. */
.services-page .svc-row__plus::before{
  width: 8px;
  height: 8px;
  background: none;
  border-right: 1.5px solid var(--black);
  border-bottom: 1.5px solid var(--black);
  transform: translate(-50%, -60%) rotate(-45deg);
}
.services-page .svc-row__plus::after{ content: none; }
.services-page .svc-row.is-active .svc-row__plus::before{ border-color: var(--red); background: none; }

/* Right visual — sticky within the list's own height, so it settles
   back into normal flow once the list (always the taller column) ends,
   never overlapping the header or the section that follows. */
.svc-catalog__visual{
  position: sticky;
  top: calc(var(--header-h) + 32px);
  min-width: 0;
  align-self: start;
  display: flex;
  justify-content: flex-end;
}
.svc-catalog__visual-inner{
  position: relative;
  width: 100%;
  max-width: 930px;
  aspect-ratio: 4 / 3;
  margin-top: 24px;
  background: var(--white);
}
.svc-visual__panel{
  position: absolute;
  inset: 0;
  display: flex;
  align-items: center;
  justify-content: center;
  opacity: 0;
  transform: translateY(6px);
  transition: opacity 0.32s cubic-bezier(0.22, 1, 0.36, 1), transform 0.32s cubic-bezier(0.22, 1, 0.36, 1);
  pointer-events: none;
}
.svc-visual__panel.is-active{
  opacity: 1;
  transform: translateY(0);
  pointer-events: auto;
}
.svc-visual__panel img{
  display: block;
  width: 92%;
  height: 92%;
  object-fit: contain;
}

@media (prefers-reduced-motion: reduce){
  .svc-visual__panel{ transition: none; }
  .svc-row__plus::before,
  .svc-row__plus::after{ transition: none; }
  .svc-row__panel{ transition: none; }
}

@media (max-width: 1100px){
  .svc-catalog{ column-gap: 40px; }
}

@media (max-width: 900px){
  .svc-catalog{ width: 100%; padding-inline: 24px; column-gap: 32px; }
  .svc-row{ padding: 24px 20px; gap: 20px; }
  .svc-row__icon{ width: 34px; height: 34px; }
  .svc-row__title{ font-size: 1.15rem; }
  .svc-row__desc{ font-size: 0.92rem; }
}

/* Accordion breakpoint — single column, image moves inline per row.
   Keep this max-width equal to ACCORDION_BREAKPOINT in services-catalog.js. */
@media (max-width: 700px){
  .svc-catalog{
    display: block;
    width: 100%;
    padding-inline: 20px;
  }
  .svc-catalog__visual{ display: none; }

  .svc-row{
    padding: 20px 2px;
    border-radius: 0;
  }
  .svc-row.is-active{ background: none; }
  .svc-row.is-open{ background: #F7F7F6; border-radius: 12px; }

  .svc-row__icon{ width: 26px; height: 26px; }
  .svc-row__title{ font-size: 1.02rem; }

  /* Always fully visible now (sibling of .svc-row__panel, not inside
     it) — crisp, consistent typography, same left edge as the title,
     never clipped regardless of open/closed state. */
  .svc-row__desc{
    /* margin-left mirrors .svc-row__num's rendered width (~16px) + the
       10px gap in .svc-row__top, so the subtitle lines up with the
       title text — .svc-row__desc is a sibling of .svc-row__top, not
       nested in its flex layout, so it needs its own matching inset. */
    margin: 8px 0 0 26px;
    width: calc(100% - 26px);
    max-width: calc(100% - 26px);
    font-size: 14px;
    line-height: 1.45;
    font-weight: 400;
    color: var(--text-secondary);
  }

  /* Explicit height (not grid-template-rows: 0fr — the fr-track doesn't
     reliably collapse to a true 0px here). These are only the resting
     states: the open/close itself is a measured px height animation run
     by window.RedRouteAccordion (about-animation.js), so every row opens
     to its real height instead of racing a fixed max-height cap. */
  .svc-row__panel{
    overflow: hidden;
    height: 0;
  }
  .svc-row.is-open .svc-row__panel{ height: auto; }
  .svc-row__panel-inner{
    min-height: 0;
    padding-top: 10px;
  }

  .svc-row__panel-media,
  .svc-row__readmore{
    display: block;
  }
  .svc-row__panel-media{
    position: relative;
    margin-top: 14px;
    aspect-ratio: 4 / 3;
    border-radius: 10px;
    overflow: hidden;
    background: #F7F7F6;
  }
  .svc-row__panel-media img{
    display: block;
    width: 100%;
    height: 100%;
    object-fit: contain;
  }

  .svc-row__readmore{
    display: inline-flex;
    align-items: center;
    gap: 6px;
    margin: 14px 0 6px;
    font-family: var(--font-text);
    font-weight: 600;
    font-size: 0.85rem;
    color: var(--red);
  }

  .svc-row.is-open .svc-row__plus::after{
    transform: translate(-50%, -50%) rotate(90deg);
    opacity: 0;
  }
  .services-page .svc-row.is-open .svc-row__plus::before{
    transform: translate(-50%, -60%) rotate(45deg);
  }

  /* Services page only — white expanded content, blending into the
     page background, replacing the plain grey wash shared with
     Prices' accordion. No border/frame around the panel-inner. */
  .services-page .svc-row.is-open{
    background: var(--white);
  }
  .services-page .svc-row__panel-inner{
    margin-top: 10px;
    padding: 16px 16px 14px;
    background: var(--white);
    border: none;
    outline: none;
    box-shadow: none;
    border-radius: 0;
  }
  .services-page .svc-row__panel-media{
    margin-top: 4px;
    border-radius: 8px;
    background: var(--white);
    box-sizing: border-box;
    padding: 10px;
  }
}

/* Mobile accordion content motion (Services + Prices, which also loads
   this file): the panel's contents fade/slide in slightly behind the
   height animation, and the row's icon turns on the same curve. */
@media (max-width: 700px) and (prefers-reduced-motion: no-preference){
  .svc-row__panel-inner{
    opacity: 0;
    transform: translateY(8px);
    transition: opacity 200ms cubic-bezier(0.22, 1, 0.36, 1), transform 240ms cubic-bezier(0.22, 1, 0.36, 1);
  }
  .svc-row.is-open .svc-row__panel-inner{
    opacity: 1;
    transform: translateY(0);
    transition: opacity 380ms cubic-bezier(0.22, 1, 0.36, 1) 50ms, transform 420ms cubic-bezier(0.22, 1, 0.36, 1) 50ms;
  }
  .svc-row__plus::before,
  .svc-row__plus::after{
    transition: background-color 0.25s var(--ease), border-color 0.25s var(--ease), transform 460ms cubic-bezier(0.22, 1, 0.36, 1), opacity 460ms cubic-bezier(0.22, 1, 0.36, 1);
  }
}

@media (max-width: 900px){
  .svc-hero{ padding-top: 64px; padding-bottom: 38px; }
}

@media (max-width: 700px){
  .svc-catalogue{ padding-top: 58px; padding-bottom: 34px; }
}

/* ---------- Most popular services ---------- */
.svc-popular{
  padding: 122px 0 132px;
}
/* Guarantee this section's own container is horizontally centred on the
   screen regardless of the shared .container rules elsewhere. */
.svc-popular > .container{
  margin-left: auto;
  margin-right: auto;
}

/* Top: centred eyebrow/heading/tagline, promo pinned upper-right */
.svc-popular__top{
  position: relative;
}
.svc-popular__top-center{
  max-width: 640px;
  margin: 0 auto;
  text-align: center;
}
.svc-popular__eyebrow{
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 14px;
  color: var(--text-secondary);
  font-family: var(--font-text);
  font-size: 0.78rem;
  font-weight: 600;
  letter-spacing: 0.18em;
}
.svc-popular__eyebrow-line{
  width: 32px;
  height: 1px;
  flex-shrink: 0;
  background: var(--grey-border);
}
.svc-popular__heading{
  margin: 18px 0 0;
  font-family: var(--font-display);
  font-weight: 700;
  font-size: var(--text-h2);
  letter-spacing: -0.01em;
  color: var(--black);
}
.svc-popular__tagline{
  margin: 14px 0 0;
  font-family: var(--font-text);
  font-size: 1rem;
  color: var(--text-secondary);
}

.svc-popular__promo{
  position: absolute;
  top: 4px;
  right: 0;
  max-width: 240px;
  text-align: right;
}
.svc-popular__promo-arrow{
  position: absolute;
  top: 14px;
  right: calc(100% - 40px);
  width: 74px;
  height: auto;
  pointer-events: none;
}
.svc-popular__promo-heading{
  margin: 0;
  font-family: var(--font-display);
  font-weight: 700;
  font-size: 1.15rem;
  line-height: 1.25;
  color: var(--black);
}
.svc-popular__promo-text{
  margin: 10px 0 0;
  font-family: var(--font-text);
  font-size: 0.88rem;
  line-height: 1.5;
  color: var(--text-secondary);
}
.svc-popular__promo-line{
  display: block;
  width: 32px;
  height: 2px;
  margin: 16px 0 16px auto;
  background: var(--red);
}
/* Autoplay progress line — same track/fill/scaleX(animation) mechanism
   as .testimonial__countdown (styles.css), just its own scoped classes
   and --popular-duration custom property. */
.svc-popular__progress{
  display: flex;
  align-items: center;
  justify-content: flex-end;
  gap: 10px;
  margin-bottom: 12px;
}
.svc-popular__progress-index{
  font-family: var(--font-text);
  font-weight: 600;
  font-size: 0.78rem;
  color: var(--text-secondary);
  white-space: nowrap;
}
.svc-popular__progress-index #popularIndex{ color: var(--red); }
.svc-popular__progress-track{
  display: block;
  width: min(140px, 100%);
  height: 2px;
  background: var(--grey-soft);
  border-radius: 999px;
  overflow: hidden;
}
.svc-popular__progress-fill{
  display: block;
  height: 100%;
  width: 100%;
  background: var(--red);
  transform: scaleX(0);
  transform-origin: left;
}
.svc-popular__progress-fill.is-running{
  animation: svcPopularProgress var(--popular-duration, 6.5s) linear forwards;
}
.svc-popular__progress-fill.is-paused{
  animation-play-state: paused;
}
@keyframes svcPopularProgress{
  from{ transform: scaleX(0); }
  to{ transform: scaleX(1); }
}
.svc-popular__sr-status{
  position: absolute;
  width: 1px;
  height: 1px;
  overflow: hidden;
  clip: rect(0 0 0 0);
  white-space: nowrap;
}

.svc-popular__nav{
  display: flex;
  justify-content: flex-end;
  gap: 10px;
}
.svc-popular__nav-btn{
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 42px;
  height: 42px;
  border-radius: 50%;
  border: 1.5px solid var(--grey-border);
  background: var(--white);
  color: var(--black);
  transition: border-color 0.25s var(--ease), background-color 0.25s var(--ease), transform 0.25s var(--ease);
}
.svc-popular__nav-btn:hover{
  border-color: var(--black);
  background: #F7F7F6;
}
.svc-popular__nav-btn:active{
  transform: scale(0.94);
}

/* Left-aligned intro line above the 3-column row */
.svc-popular__intro{
  display: flex;
  align-items: center;
  gap: 14px;
  margin-top: 72px;
  margin-bottom: 40px;
}
.svc-popular__intro-line{
  width: 32px;
  height: 2px;
  flex-shrink: 0;
  background: var(--red);
}
.svc-popular__intro-text{
  font-family: var(--font-text);
  font-size: 0.95rem;
  color: var(--text-secondary);
}

/* Combination carousel — .svc-popular__row is just a stacking slot
   (every .svc-popular__combo sits in the same grid cell via
   grid-area: 1 / 1, exactly like .svcd-trust-stack's card stack), so
   the row's own height is always the tallest of the three combinations
   and switching between them never shifts anything below the section —
   the section heading, promo block and CTA banner never move.
   services-popular-carousel.js toggles which combo is .is-active
   (resting/visible) or .is-leaving (mid-exit); the actual crossfade
   lives entirely on each .svc-popular__col below, staggered per
   column, so per-item motion stays subtle and premium. */
.svc-popular__row{
  display: grid;
}

/* 3 equal columns with a red "+" between each — open and spacious,
   no divider lines, no cards, no backgrounds — showing the services
   are commonly combined rather than just listed side by side. */
.svc-popular__combo{
  grid-area: 1 / 1;
  display: grid;
  grid-template-columns: 1fr auto 1fr auto 1fr;
  /* stretch (not center): descriptions run 1–2 lines depending on the
     combo, so centering let the shorter column's icon/title/desc drift
     down relative to its neighbours — stretching keeps every column's
     content top-aligned, with .svc-popular__link's margin-top:auto
     doing the work of keeping "Read more" level across columns. */
  align-items: stretch;
  column-gap: 40px;
  pointer-events: none;
}
.svc-popular__combo.is-active{
  pointer-events: auto;
}
.svc-popular__col{
  display: flex;
  flex-direction: column;
  align-items: flex-start;
  text-align: left;
  opacity: 0;
  filter: blur(2px);
  transform: translate3d(10px, 0, 0);
  will-change: opacity, transform, filter;
  transition: opacity 0.5s cubic-bezier(0.22, 1, 0.36, 1),
              transform 0.5s cubic-bezier(0.22, 1, 0.36, 1),
              filter 0.5s cubic-bezier(0.22, 1, 0.36, 1);
}
.svc-popular__combo.is-active .svc-popular__col{
  opacity: 1;
  filter: blur(0);
  transform: translate3d(0, 0, 0);
}
.svc-popular__combo.is-leaving .svc-popular__col{
  opacity: 0;
  filter: blur(2px);
  transform: translate3d(-10px, 0, 0);
}
.svc-popular__col:nth-of-type(2){ transition-delay: 0.05s; }
.svc-popular__col:nth-of-type(3){ transition-delay: 0.1s; }
.svc-popular__plus{
  align-self: center;
  font-family: var(--font-display);
  font-weight: 500;
  font-size: 2.4rem;
  line-height: 1;
  color: var(--red);
  user-select: none;
}

.svc-popular__icon{
  display: inline-flex;
  width: 48px;
  height: 48px;
  margin-bottom: 24px;
  color: var(--red);
  transition: transform 0.25s var(--ease);
}
.svc-popular__icon svg{ width: 100%; height: 100%; }
.svc-popular__col:hover .svc-popular__icon{
  transform: translateY(-3px);
}
.svc-popular__title{
  margin: 0 0 10px;
  /* Fixed 2-line height (1.2rem * 1.25 line-height * 2) — some combos pair a
     short title with a longer one ("Flat / Apartment Removals", "Furniture
     Dismantling & Assembly") that wraps while its neighbours don't; without
     this, the description/link below would sit at a different height per
     column and break the row's alignment. */
  min-height: 3rem;
  font-family: var(--font-display);
  font-weight: 700;
  font-size: 1.2rem;
  line-height: 1.25;
  color: var(--black);
}
.svc-popular__desc{
  max-width: 22rem;
  margin: 0 0 22px;
  font-family: var(--font-text);
  font-size: 0.95rem;
  line-height: 1.55;
  color: var(--text-secondary);
}
.svc-popular__link{
  display: inline-flex;
  align-items: center;
  gap: 6px;
  margin-top: auto;
  font-family: var(--font-text);
  font-weight: 600;
  font-size: 0.86rem;
  color: var(--red);
}
.svc-popular__link svg{
  transition: transform 0.2s var(--ease);
}
.svc-popular__col:hover .svc-popular__link svg{
  transform: translateX(4px);
}

/* Bottom discount bar — black, generous padding, no heavy shadow */
.svc-popular__cta{
  display: flex;
  align-items: center;
  gap: 28px;
  margin-top: 72px;
  padding: 38px 46px;
  border-radius: 20px;
  background: #131313;
  box-shadow: 0 20px 44px rgba(0, 0, 0, 0.16);
}
.svc-popular__cta-icon{
  display: inline-flex;
  flex: none;
  align-items: center;
  justify-content: center;
  width: 60px;
  height: 60px;
  border-radius: 50%;
  background: rgba(255, 255, 255, 0.1);
  color: var(--white);
}
.svc-popular__cta-body{
  flex: 1;
  min-width: 0;
}
.svc-popular__cta-heading{
  margin: 0;
  font-family: var(--font-display);
  font-weight: 700;
  font-size: 1.3rem;
  color: var(--white);
}
.svc-popular__cta-text{
  margin: 6px 0 0;
  font-family: var(--font-text);
  font-size: 0.95rem;
  line-height: 1.5;
  color: rgba(255, 255, 255, 0.62);
}
.svc-popular__cta-btn{
  display: inline-flex;
  flex: none;
  align-items: center;
  gap: 10px;
  padding: 15px 26px;
  border-radius: 9999px;
  background: var(--white);
  color: var(--black);
  font-family: var(--font-text);
  font-weight: 600;
  font-size: 0.82rem;
  letter-spacing: 0.05em;
  text-transform: uppercase;
  white-space: nowrap;
  transition: background-color 0.25s var(--ease), transform 0.25s var(--ease);
}
.svc-popular__cta-btn:hover{
  background: #EDEDED;
}
.svc-popular__cta-btn:active{
  transform: translateY(1px);
}
.svc-popular__cta-btn .btn__arrow{
  color: var(--red);
  transition: transform 0.25s var(--ease);
}
.svc-popular__cta-btn:hover .btn__arrow{
  transform: translateX(3px);
}

@media (max-width: 1150px){
  .svc-popular__combo{ column-gap: 24px; }
  .svc-popular__plus{ font-size: 2rem; }

  .svc-popular__top{
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: 36px;
  }
  .svc-popular__promo{
    position: relative;
    max-width: 420px;
    text-align: center;
  }
  .svc-popular__promo-arrow{
    top: 6px;
    right: calc(100% - 26px);
    width: 52px;
  }
  .svc-popular__promo-line{ margin: 16px auto; }
  .svc-popular__progress{ justify-content: center; margin: 0 auto 12px; }
  .svc-popular__nav{ justify-content: center; }
}

@media (max-width: 900px){
  .svc-popular{ padding: 86px 0 94px; }
  .svc-popular__intro{ margin-top: 48px; margin-bottom: 28px; }

  /* Stack vertically: service, +, service, +, service. */
  .svc-popular__combo{
    grid-template-columns: 1fr;
    row-gap: 4px;
  }
  .svc-popular__plus{
    justify-self: start;
    padding-left: 2px;
  }
  .svc-popular__desc{ max-width: none; }
  /* Stacked cards don't need cross-column title alignment — drop the
     reserved 2-line height so short titles don't carry a dead gap. */
  .svc-popular__title{ min-height: 0; }

  .svc-popular__cta{
    margin-top: 48px;
    padding: 30px 28px;
  }
}

@media (max-width: 700px){
  .svc-popular__promo-arrow{
    top: 4px;
    right: calc(100% - 20px);
    width: 40px;
  }

  .svc-popular__cta{
    flex-direction: column;
    align-items: flex-start;
    gap: 18px;
    border-radius: 16px;
  }
  .svc-popular__cta-btn{
    width: 100%;
    justify-content: center;
  }
}

@media (prefers-reduced-motion: reduce){
  .svc-popular__combo,
  .svc-popular__icon,
  .svc-popular__link svg,
  .svc-popular__nav-btn,
  .svc-popular__cta-btn,
  .svc-popular__cta-btn .btn__arrow{
    transition: none;
  }
  /* Keep a short opacity-only fade instead of killing the crossfade
     outright — the translate3d slide, blur and per-column stagger are
     what get dropped. */
  .svc-popular__col{
    transform: none;
    filter: none;
    transition: opacity 0.15s linear;
    transition-delay: 0s;
  }
  .svc-popular__progress-fill{ animation: none; }
}

/* ---------- Bottom CTA — final "Ready to plan your move?" panel ---------- */
.about-cta{
  position: relative;
  padding: 142px 0 132px;
  overflow: hidden;
  background: var(--white);
}

/* Existing "Below Footer" watermark asset, used as-is — wider than the
   section (clipped by .about-cta's own overflow:hidden, so it still
   can't cause horizontal scroll), centred horizontally and nudged down so
   the lettering sits behind the button/trust row rather than the heading. */
.about-cta__bg{
  position: absolute;
  z-index: 0;
  top: 58%;
  left: 50%;
  transform: translate(-50%, -50%);
  width: 124%;
  max-width: none;
  height: auto;
  object-fit: contain;
  opacity: 0.3;
  pointer-events: none;
  user-select: none;
}

.about-cta__inner{
  position: relative;
  z-index: 2;
  max-width: 640px;
  margin: 0 auto;
  text-align: center;
}

.about-cta__eyebrow{
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 14px;
  margin-bottom: 20px;
  color: var(--red);
  font-family: var(--font-text);
  font-size: 0.8rem;
  font-weight: 600;
  letter-spacing: 0.18em;
  text-transform: uppercase;
}
.about-cta__eyebrow-line{
  width: 28px;
  height: 1px;
  flex-shrink: 0;
  background: var(--red);
}

.about-cta__heading{
  font-family: var(--font-display);
  font-weight: 700;
  font-size: var(--text-h2);
  color: var(--black);
}
.about-cta__text{
  max-width: 30rem;
  margin: 14px auto 0;
  font-family: var(--font-text);
  font-size: 1.05rem;
  line-height: 1.55;
  color: var(--text-secondary);
}
.about-cta__actions{
  margin-top: 32px;
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 16px;
  flex-wrap: wrap;
}

.about-cta__trust{
  display: flex;
  align-items: center;
  justify-content: center;
  flex-wrap: wrap;
  column-gap: 44px;
  row-gap: 16px;
  margin: 44px 0 0;
  padding: 0;
  list-style: none;
}
.about-cta__trust li{
  display: inline-flex;
  align-items: center;
  gap: 10px;
  font-family: var(--font-text);
  font-weight: 500;
  font-size: 0.88rem;
  color: var(--black);
  white-space: nowrap;
}
.about-cta__trust-icon{
  display: inline-flex;
  flex-shrink: 0;
  align-items: center;
  justify-content: center;
  width: 20px;
  height: 20px;
  border-radius: 50%;
  background: var(--red);
  color: var(--white);
}

@media (max-width: 700px){
  .about-cta{ padding: 94px 0 86px; }
  .about-cta__trust{
    column-gap: 24px;
    row-gap: 12px;
  }
}

/* The service-row titles are H2s (the first heading level after the page
   H1). Keep their own tracking rather than the site-wide `main h2`
   letter-spacing, so the change of tag is invisible. */
main h2.svc-row__title{ letter-spacing: normal !important; }