/* ============================================================
   Service detail pages — shared styles for every /services/<slug>/
   page (12 pages, one shared template rendered by
   scripts/build-service-pages.mjs).
   Reuses tokens/components already defined in ../styles.css:
   --red / --black / --white / --grey-light / --grey-soft / --text-secondary,
   --font-display / --font-text, --ease, .container, .reveal,
   .hero__eyebrow / .hero__eyebrow-line / .hero__eyebrow-text,
   .btn / .btn--primary / .btn--outline, .faq__list / .faq__item /
   .faq__question / .faq__toggle* / .faq__answer* (about-animation.js
   already binds the accordion behaviour to .faq__item sitewide).
   ============================================================ */

.service-page .container{ max-width: var(--container-narrow); margin-left: auto; }
/* The tilted testimonial card (.svcd-trust-card--front) pokes ~1px past
   the viewport on 320-375px phones, adding a sideways scroll. clip (not
   hidden) trims only what is already off-screen, without creating a
   scroll container, so sticky/animation behaviour is unchanged. */
.service-page{ overflow-x: clip; }

/* Every service page — reusable marker for any .container that needs
   to line up with the header logo's left edge and use the sitewide
   full container width, instead of the narrow, centred 1180px default
   above. Generic (not scoped to a specific parent section) so it can
   be applied to the hero's container, the breadcrumb, and the
   included/who-for/testimonial columns section alike. Three classes so
   this reliably outranks the centring rule above regardless of source
   order. */
.service-page .container.svcd-hero__container--left{
  margin-left: 0;
  max-width: var(--container-w);
}

/* ---------- Breadcrumb ---------- */
.svcd-breadcrumb{
  padding-top: 36px;
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 8px;
  font-family: var(--font-text);
  font-size: 0.86rem;
  color: var(--text-secondary);
}
.svcd-breadcrumb a{ color: var(--text-secondary); transition: color 0.2s var(--ease); }
.svcd-breadcrumb a:hover{ color: var(--red); }
.svcd-breadcrumb span[aria-hidden]{ color: var(--grey-border); }
.svcd-breadcrumb .is-current{ color: var(--black); }

/* ---------- Hero ----------
   One shared layout for all 12 service pages: a fixed-height media
   frame (object-fit: contain, so photos of any native ratio — 3:2,
   4:3, or the square Unpacking Service shot — sit letterboxed inside
   an identical box rather than each stretching the row to its own
   height) plus a fr-based grid (not a fixed-pixel track) so the
   text/image split stays the same proportion at any viewport instead
   of the image column grabbing a near-fixed pixel width that starved
   the text column on some pages and not others. */
.svcd-hero{
  position: relative;
  overflow: hidden;
  padding-top: 32px;
  padding-bottom: 48px;
}
.svcd-hero__grid{
  display: grid;
  grid-template-columns: minmax(0, 0.9fr) minmax(0, 1.1fr);
  align-items: center;
  gap: 72px;
  min-height: 548px;
}
/* No hero photo on this page: collapse to one column instead of
   leaving an empty second track, and drop the height floor the image
   column would otherwise reserve. */
.svcd-hero__grid--no-media{ grid-template-columns: 1fr; min-height: 0; }
.svcd-hero__inner{ max-width: 680px; }
.svcd-hero__media{
  position: relative;
  height: 548px;
  background: transparent;
  border: none;
  box-shadow: none;
  outline: none;
}
.svcd-hero__media img{
  width: 100%;
  height: 100%;
  /* contain, not cover: every service photo keeps its own proportions
     (never cropped or stretched). No frame/background behind it any
     more, so on the site's white page background the studio-shot
     photos (already isolated on white) sit freestanding instead of
     inside a boxed panel. */
  object-fit: contain;
  object-position: center;
  border: none;
  box-shadow: none;
}
.svcd-hero__trust{
  margin-top: 30px;
  padding-top: 24px;
  border-top: 1px solid var(--grey-soft);
  display: flex;
  flex-wrap: wrap;
  column-gap: 28px;
  row-gap: 12px;
}
.svcd-hero__trust li{
  display: flex;
  align-items: center;
  gap: 9px;
  font-family: var(--font-text);
  font-size: 0.88rem;
  font-weight: 600;
  color: var(--black);
}
.svcd-hero__trust svg{
  flex-shrink: 0;
  width: 18px;
  height: 18px;
  color: var(--red);
}
.svcd-hero__icon{
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 46px;
  height: 46px;
  margin-bottom: 22px;
  color: var(--red);
}
.svcd-hero__icon svg{ width: 100%; height: 100%; }
/* Scoped, not the shared .hero__eyebrow rule (used sitewide), so only
   the service hero's own rhythm changes. */
.svcd-hero__inner .hero__eyebrow{ margin-bottom: 26px; }
.svcd-hero__heading{
  font-family: var(--font-display);
  font-weight: 800;
  font-size: clamp(2.75rem, 3.4vw, 4rem);
  line-height: 1.03;
  letter-spacing: -0.02em;
  color: var(--black);
  text-wrap: balance;
}
/* Opt-in modifier for the handful of titles long enough (roughly 25+
   characters, e.g. "Furniture & Large Item Delivery") that the default
   size would force a third line — everything else uses the base size
   above so the system stays shared, not per-page. */
.svcd-hero__heading--long{
  font-size: clamp(2.15rem, 2.3vw, 3rem);
  line-height: 1.1;
}
.svcd-hero__sub{
  margin-top: 26px;
  max-width: 620px;
  font-family: var(--font-text);
  font-size: 1.15rem;
  line-height: 1.6;
  color: var(--text-secondary);
}
.svcd-hero__intro{ margin-top: 28px; }
.svcd-hero__intro .text-link{ margin-top: 26px; }
.svcd-hero__actions{
  margin-top: 32px;
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 14px;
}

/* ---------- Generic section shell ---------- */
.svcd-section{ padding: 116px 0; }
.svcd-section--tint{ background: var(--grey-light); }
.svcd-section__head{ max-width: 640px; margin-bottom: 36px; }
.svcd-h2{
  font-family: var(--font-display);
  font-weight: 700;
  font-size: var(--text-h2);
  line-height: 1.15;
  letter-spacing: -0.015em;
  color: var(--black);
}
.svcd-section__lede{
  margin-top: 14px;
  font-family: var(--font-text);
  font-size: 1.05rem;
  line-height: 1.6;
  color: var(--text-secondary);
}

/* ---------- Intro (editorial paragraphs) ---------- */
.svcd-intro p{
  max-width: 700px;
  font-family: var(--font-text);
  font-size: 1.08rem;
  line-height: 1.7;
  color: var(--text-secondary);
}
.svcd-intro p + p{ margin-top: 18px; }
.svcd-intro strong{ color: var(--black); }

/* ---------- Three-column: What's included / Who it's for / reviews ---------- */
.svcd-columns{
  display: grid;
  grid-template-columns: 1fr 1fr 1fr;
  gap: 48px;
}
/* House Removals only — third column is the .svcd-trust-stack (see
   below) instead of the plain .svcd-testimonials the other 11 service
   pages use there; it's slightly narrower since its cards don't need
   to fill the full column width the way a text list does. */
.svcd-columns--trust{ grid-template-columns: 1fr 1fr 0.9fr; align-items: start; }
.svcd-col__title{
  font-family: var(--font-display);
  font-weight: 700;
  font-size: 1.15rem;
  color: var(--black);
  margin-bottom: 18px;
}
.svcd-list{ display: flex; flex-direction: column; gap: 14px; }
.svcd-list__item{
  display: flex;
  align-items: flex-start;
  gap: 12px;
  font-family: var(--font-text);
  font-size: 0.98rem;
  line-height: 1.55;
  color: var(--text-secondary);
}
.svcd-list__item svg{ flex-shrink: 0; margin-top: 3px; color: var(--red); }

/* ---------- Editorial two-column block — House Removals only: plain
   white background, no card/shadow/border, eyebrow + heading + lede
   above each checklist. Replaces .svcd-columns above for this one
   page; the other 11 service pages are untouched. ---------- */
.svcd-edit-columns{
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  column-gap: 88px;
  align-items: start;
}
/* With the trust stack back as a third column: narrower than the two
   equal text columns, since its cards don't need to fill the same
   width, and the stack's own top padding (see .svcd-trust-stack)
   already brings its front card roughly level with the column
   headings above it. */
.svcd-edit-columns--trust{ grid-template-columns: 1.2fr 1fr 0.85fr; column-gap: 64px; }
.svcd-edit-col__heading{
  font-family: var(--font-display);
  font-weight: 700;
  font-size: var(--text-h2);
  line-height: 1.15;
  letter-spacing: -0.015em;
  color: var(--black);
}
.svcd-edit-col__lede{
  margin-top: 14px;
  max-width: 30rem;
  font-family: var(--font-text);
  font-size: 1rem;
  line-height: 1.6;
  color: var(--text-secondary);
}
.svcd-edit-list{
  margin-top: 32px;
  display: flex;
  flex-direction: column;
  gap: 16px;
}
.svcd-edit-list__item{
  display: flex;
  align-items: center;
  gap: 14px;
  font-family: var(--font-text);
  font-size: 0.98rem;
  line-height: 1.5;
  color: var(--text-secondary);
}
.svcd-edit-list__icon{
  display: inline-flex;
  align-items: center;
  justify-content: center;
  flex-shrink: 0;
  width: 24px;
  height: 24px;
  border-radius: 50%;
  background: var(--red-tint);
  color: var(--red);
}
.svcd-edit-list__icon svg{ width: 12px; height: 12px; }

/* ---------- Testimonial card stack (beside "who it's for") ---------- */
.svcd-testimonials{
  position: relative;
  padding-top: 4px;
}
.svcd-testimonial-card{
  background: var(--white);
  border: 1px solid var(--grey-soft);
  border-radius: 14px;
  padding: 20px 22px 18px;
  box-shadow: 0 18px 30px rgba(17,17,17,0.055);
}
.svcd-testimonial-card + .svcd-testimonial-card{
  margin-top: -16px;
  margin-left: 22px;
}
.svcd-testimonial-card__stars{ color: var(--red); display: block; margin-bottom: 12px; }
.svcd-testimonial-card blockquote{
  margin: 0;
  font-family: var(--font-text);
  font-size: 0.9rem;
  line-height: 1.55;
  color: var(--black);
}
.svcd-testimonial-card figcaption{
  margin-top: 14px;
  display: flex;
  flex-direction: column;
  gap: 2px;
}
.svcd-testimonial-card__name{
  font-family: var(--font-display);
  font-weight: 700;
  font-size: 0.86rem;
  color: var(--black);
}
.svcd-testimonial-card__role{
  font-family: var(--font-text);
  font-size: 0.8rem;
  color: var(--text-secondary);
}

/* ---------- Trust stack: the third column of .svcd-edit-columns--trust
   on every service page, a 3-card overlapping testimonial composition
   (front card + two partly-hidden cards fanned up-left behind it) with
   a soft red ambient glow on the front card. The two text columns
   beside it stay top-aligned (.svcd-edit-columns's align-items: start),
   but this column overrides that with align-self so the stack is
   vertically centred against the full row height — which is set by
   the longer "what's included" checklist, not by this stack's own
   height. ---------- */
.svcd-trust-stack{
  position: relative;
  display: grid;
  max-width: 100%;
  align-self: center;
  padding: 0;
  margin-left: -8px;
}
.svcd-trust-card{
  grid-area: 1 / 1;
  display: flex;
  flex-direction: column;
  background: var(--white);
  border: 1px solid rgba(17,17,17,0.045);
  border-radius: 26px;
  padding: 38px 32px 30px;
  min-height: 280px;
}
.svcd-trust-card__quote{
  color: var(--grey-border);
  opacity: 0.7;
}
.svcd-trust-card blockquote{
  margin: 18px 0 0;
  font-family: var(--font-text);
  font-size: 1.05rem;
  line-height: 1.6;
  color: var(--black);
}
.svcd-trust-card figcaption{
  margin-top: auto;
  padding-top: 22px;
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 12px;
}
.svcd-trust-card__name{
  font-family: var(--font-display);
  font-weight: 700;
  font-size: 0.92rem;
  color: var(--text-secondary);
}
.svcd-trust-card__stars{ color: var(--red); flex-shrink: 0; }

.svcd-trust-card--front{
  position: relative;
  z-index: 3;
  box-shadow:
    0 28px 54px rgba(17,17,17,0.10),
    0 10px 28px rgba(225,6,0,0.07);
}
.svcd-trust-card--front::before{
  content: "";
  position: absolute;
  inset: -26px;
  z-index: -1;
  border-radius: inherit;
  background: radial-gradient(60% 60% at 50% 45%, rgba(225,6,0,0.14), transparent 72%);
  filter: blur(22px);
}
.svcd-trust-card--back-1{
  z-index: 2;
  opacity: 0.92;
  transform: translate(-16px, -16px) rotate(-2deg);
  box-shadow: 0 16px 32px rgba(17,17,17,0.06);
}
.svcd-trust-card--back-2{
  z-index: 1;
  opacity: 0.8;
  transform: translate(-30px, -30px) rotate(-4deg);
  box-shadow: 0 12px 24px rgba(17,17,17,0.05);
}
.svcd-trust-card--back-1 blockquote,
.svcd-trust-card--back-2 blockquote{ color: var(--text-secondary); }

/* ---------- Process (4 steps) ---------- */
.svcd-process{
  display: grid;
  grid-template-columns: repeat(4, 1fr);
  gap: 0;
}
.svcd-process__step{
  position: relative;
  padding: 0 28px 0 0;
  border-left: 1px solid var(--grey-soft);
  padding-left: 24px;
}
.svcd-process__step:first-child{ border-left: 0; padding-left: 0; }
.svcd-process__num{
  display: block;
  font-family: var(--font-display);
  font-weight: 800;
  font-size: 1.6rem;
  color: rgba(17,17,17,0.14);
  margin-bottom: 10px;
}
.svcd-process__title{
  font-family: var(--font-display);
  font-weight: 700;
  font-size: 1.02rem;
  color: var(--black);
  margin-bottom: 8px;
}
.svcd-process__text{
  font-family: var(--font-text);
  font-size: 0.92rem;
  line-height: 1.55;
  color: var(--text-secondary);
}

/* ---------- Optional / additional services ---------- */
.svcd-addons__list{
  display: flex;
  flex-wrap: wrap;
  gap: 12px;
}
.svcd-addons__link{
  display: inline-flex;
  align-items: center;
  gap: 10px;
  padding: 12px 18px;
  border: 1px solid var(--grey-soft);
  border-radius: 10px;
  font-family: var(--font-text);
  font-weight: 600;
  font-size: 0.9rem;
  color: var(--black);
  transition: border-color 0.2s var(--ease), color 0.2s var(--ease), transform 0.2s var(--ease);
}
.svcd-addons__link svg{ color: var(--red); transition: transform 0.2s var(--ease); }
.svcd-addons__link:hover{ border-color: var(--red); color: var(--red); transform: translateY(-1px); }
.svcd-addons__link:hover svg{ transform: translateX(3px); }

/* ---------- Pricing teaser ---------- */
.svcd-pricing{
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  justify-content: space-between;
  gap: 24px;
  padding: 34px 40px;
  border: 1px solid var(--grey-soft);
  border-radius: 14px;
}
.svcd-pricing__label{
  font-family: var(--font-text);
  font-weight: 700;
  font-size: 0.76rem;
  letter-spacing: 0.1em;
  text-transform: uppercase;
  color: var(--red);
}
.svcd-pricing__value{
  margin-top: 8px;
  font-family: var(--font-display);
  font-weight: 800;
  font-size: clamp(1.6rem, 2.6vw, 2.1rem);
  color: var(--black);
}
.svcd-pricing__note{
  margin-top: 6px;
  max-width: 34rem;
  font-family: var(--font-text);
  font-size: 0.92rem;
  line-height: 1.5;
  color: var(--text-secondary);
}

/* ---------- Combined price + addons — House Removals only: one
   horizontal section (price card left, addon chips right) replacing
   the two separate .svcd-pricing / .svcd-addons__list sections every
   other service page still uses. ---------- */
.svcd-price-combo-section{ padding: 84px 0; }
.svcd-price-combo__title{
  margin-bottom: 24px;
  font-family: var(--font-display);
  font-weight: 700;
  font-size: var(--text-h2);
  line-height: 1.1;
  letter-spacing: -0.015em;
  color: var(--black);
}
.svcd-price-combo{
  display: grid;
  grid-template-columns: 1.6fr 1fr;
  column-gap: 40px;
  align-items: start;
}
.svcd-price-combo__card{
  position: relative;
  overflow: hidden;
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  justify-content: space-between;
  gap: 24px;
  background: linear-gradient(135deg, #FF3B2E 0%, var(--red) 48%, var(--red-dark) 100%);
  border: none;
  border-radius: 16px;
  padding: 28px 32px;
  box-shadow: 0 28px 56px rgba(185,4,0,0.24);
}
/* Soft glow, top-right */
.svcd-price-combo__card::before{
  content: "";
  position: absolute;
  top: -55%;
  right: -12%;
  width: 320px;
  height: 320px;
  background: radial-gradient(circle, rgba(255,255,255,0.18), transparent 70%);
  border-radius: 50%;
  pointer-events: none;
}
/* Faint top-down sheen for internal shading */
.svcd-price-combo__card::after{
  content: "";
  position: absolute;
  inset: 0;
  background: linear-gradient(180deg, rgba(255,255,255,0.08) 0%, transparent 45%);
  pointer-events: none;
}
.svcd-price-combo__text{
  position: relative;
  z-index: 1;
  flex: 1 1 260px;
  display: flex;
  align-items: center;
  flex-wrap: wrap;
  column-gap: 20px;
  row-gap: 4px;
}
.svcd-price-combo__label{
  flex-basis: 100%;
  font-family: var(--font-text);
  font-weight: 700;
  font-size: 0.76rem;
  letter-spacing: 0.1em;
  text-transform: uppercase;
  color: rgba(255,255,255,0.82);
}
.svcd-price-combo__value{
  font-family: var(--font-display);
  font-weight: 800;
  font-size: clamp(1.5rem, 2.2vw, 1.9rem);
  color: var(--white);
}
.svcd-price-combo__note{
  flex: 1 1 260px;
  max-width: 26rem;
  font-family: var(--font-text);
  font-size: 0.9rem;
  line-height: 1.45;
  color: rgba(255,255,255,0.8);
}
.svcd-price-combo__btn{
  position: relative;
  z-index: 1;
  flex-shrink: 0;
  background: var(--white);
  color: var(--black);
  border-color: transparent;
}
.svcd-price-combo__btn .btn__arrow{ color: var(--red); }
.svcd-price-combo__btn:hover{
  background: var(--grey-light);
  color: var(--black);
  border-color: transparent;
}
.svcd-price-combo__addons{ padding-top: 2px; }
.svcd-price-combo__addons-title{
  font-family: var(--font-display);
  font-weight: 700;
  font-size: 1.15rem;
  color: var(--black);
}
.svcd-price-combo__addons-sub{
  margin-top: 6px;
  font-family: var(--font-text);
  font-size: 0.9rem;
  color: var(--text-secondary);
}
.svcd-price-combo__chips{
  margin-top: 18px;
  display: flex;
  flex-wrap: wrap;
  gap: 12px;
}
.svcd-chip{
  display: inline-flex;
  align-items: center;
  padding: 9px 16px;
  border-radius: 999px;
  border: 1px solid var(--grey-soft);
  background: var(--white);
  font-family: var(--font-text);
  font-weight: 500;
  font-size: 0.84rem;
  color: var(--black);
  transition: border-color 0.2s var(--ease), color 0.2s var(--ease);
}
.svcd-chip:hover{ border-color: var(--red); color: var(--red); }

/* ---------- Why RedRoute (compact, 3 items) ---------- */
.svcd-why{
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 40px;
}
.svcd-why__item{ display: flex; flex-direction: column; gap: 12px; }
.svcd-why__icon{
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 40px;
  height: 40px;
  color: var(--red);
}
.svcd-why__icon svg{ width: 100%; height: 100%; }
.svcd-why__title{
  font-family: var(--font-display);
  font-weight: 700;
  font-size: 1.02rem;
  color: var(--black);
}
.svcd-why__text{
  font-family: var(--font-text);
  font-size: 0.92rem;
  line-height: 1.55;
  color: var(--text-secondary);
}

/* ---------- Editorial "Why RedRoute" — House Removals only: intro
   message left, 3 stacked feature rows right. Reuses the same
   title/text/icon data as .svcd-why above (other 11 pages), just in a
   two-column editorial layout instead of a 3-up icon grid. ---------- */
.svcd-edit-why-section{ overflow: hidden; }
.svcd-edit-why{
  display: grid;
  grid-template-columns: 1fr 1.3fr;
  column-gap: 96px;
  align-items: center;
}
.svcd-edit-why__heading{
  margin-top: 18px;
  font-family: var(--font-display);
  font-weight: 700;
  font-size: var(--text-h2);
  line-height: 1.12;
  letter-spacing: -0.015em;
  color: var(--black);
}
.svcd-edit-why__lede{
  margin-top: 18px;
  max-width: 24rem;
  font-family: var(--font-text);
  font-size: 1rem;
  line-height: 1.6;
  color: var(--text-secondary);
}
.svcd-edit-why__footnote{
  margin-top: 40px;
  display: flex;
  align-items: center;
  gap: 10px;
  font-family: var(--font-text);
  font-weight: 600;
  font-size: 0.72rem;
  letter-spacing: 0.1em;
  text-transform: uppercase;
  color: var(--grey-border);
}
.svcd-edit-why__footnote-line{
  width: 20px;
  height: 1px;
  background: var(--grey-border);
  flex-shrink: 0;
}
.svcd-edit-why__rows{ display: flex; flex-direction: column; }
.svcd-edit-why__row{
  display: flex;
  align-items: center;
  gap: 24px;
  padding: 26px 20px;
  border-radius: 14px;
  border-top: 1px solid var(--grey-soft);
  transition: background-color 0.2s var(--ease), transform 0.2s var(--ease);
}
.svcd-edit-why__row:last-child{ border-bottom: 1px solid var(--grey-soft); }
.svcd-edit-why__row:hover{
  background: var(--grey-light);
  transform: translateX(4px);
}
.svcd-edit-why__icon{
  display: inline-flex;
  align-items: center;
  justify-content: center;
  flex-shrink: 0;
  width: 56px;
  height: 56px;
  border-radius: 50%;
  background: var(--red-tint);
  color: var(--red);
}
.svcd-edit-why__icon svg{ width: 24px; height: 24px; }
.svcd-edit-why__copy{ flex: 1 1 auto; min-width: 0; }
.svcd-edit-why__title{
  font-family: var(--font-display);
  font-weight: 700;
  font-size: 1.05rem;
  color: var(--black);
}
.svcd-edit-why__text{
  margin-top: 6px;
  font-family: var(--font-text);
  font-size: 0.92rem;
  line-height: 1.55;
  color: var(--text-secondary);
}
.svcd-edit-why__chevron{
  flex-shrink: 0;
  color: var(--grey-border);
  transition: transform 0.2s var(--ease), color 0.2s var(--ease);
}
.svcd-edit-why__row:hover .svcd-edit-why__chevron{
  transform: translateX(4px);
  color: var(--red);
}

/* ---------- FAQ wrapper (reuses .faq__list/.faq__item/.faq__question/
   .faq__toggle*/.faq__answer* verbatim from ../styles.css — the
   accordion behaviour is already bound sitewide by about-animation.js
   against those exact class names, so no extra script is needed here) ---------- */
.svcd-faq__list{ max-width: 760px; }

/* ---------- FAQ tape frame — reuses the exact RedRoute branded tape
   graphics and positioning already used on the homepage FAQ
   (assets/faq-tape-top.png, assets/faq-tape-bottom.png — the bottom
   PNG already has two crossing strips baked in). .faq__tape /
   .faq__tape--top / .faq__tape--bottom are defined once in ../styles.css
   and reused verbatim here; only the extra section padding (to make
   room for the rotated tape) and the stacking context are added. ---------- */
.svcd-section--faq{
  position: relative;
  overflow-x: clip;
  padding-top: calc(10.77vw + 44px);
  padding-bottom: calc(15.32vw + 60px);
}
.svcd-faq__inner{ position: relative; z-index: 2; }

@media (max-width: 900px){
  .svcd-section--faq{ padding-top: calc(11.27vw + 42px); padding-bottom: calc(15.32vw + 60px); }
}

/* ---------- Final CTA — the exact shared component used on
   services.html / about.html / prices/index.html (.about-cta).
   Duplicated here, not shared via a cross-page stylesheet, since this
   page doesn't otherwise load services-page.css — same convention as
   about-page.css. Keep in sync with that rule set. ---------- */
.about-cta{
  position: relative;
  padding: 142px 0 132px;
  overflow: hidden;
  background: var(--white);
}
.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);
}

/* ============================================================
   Responsive
   ============================================================ */
@media (max-width: 1100px){
  .svcd-why{ grid-template-columns: repeat(3, 1fr); gap: 28px; }
  .svcd-hero__grid{ grid-template-columns: minmax(0, 1fr) minmax(0, 1fr); gap: 40px; min-height: 0; }
  .svcd-hero__media{ height: 440px; }
  .svcd-columns{ grid-template-columns: 1fr 1fr; }
  .svcd-testimonials{ grid-column: 1 / -1; margin-top: 8px; max-width: 460px; }
  .svcd-edit-columns{ column-gap: 56px; }
  .svcd-edit-why{ column-gap: 56px; }
}
@media (max-width: 900px){
  .svcd-hero{ padding-bottom: 40px; }
  .svcd-hero__grid{ grid-template-columns: 1fr; gap: 32px; min-height: 0; }
  .svcd-hero__inner{ max-width: none; }
  .svcd-hero__media{ height: 380px; max-width: 480px; margin: 0 auto; }
  .svcd-section{ padding: 88px 0; }
  .svcd-columns{ grid-template-columns: 1fr; gap: 36px; }
  .svcd-testimonials{ max-width: 480px; }
  .svcd-edit-columns{ grid-template-columns: 1fr; row-gap: 40px; }
  .svcd-process{ grid-template-columns: repeat(2, 1fr); row-gap: 32px; }
  .svcd-process__step:nth-child(2){ border-left: 1px solid var(--grey-soft); padding-left: 24px; }
  .svcd-process__step:nth-child(odd){ border-left: 0; padding-left: 0; }
  .svcd-why{ grid-template-columns: 1fr; gap: 28px; }
  .svcd-price-combo{ grid-template-columns: 1fr; gap: 36px; }
  /* Card switches to a vertical stack here too (not just ≤700px) so
     there's no gap range where the outer section is already
     single-column but the card's own internals are still fighting
     for horizontal room. flex-wrap/flex-basis are reset explicitly:
     left as "wrap" + the desktop 260px flex-basis, flex-direction:
     column reinterprets both against the vertical axis and the text
     block silently wraps into a broken second column with a large
     phantom gap below it — this is what caused the clipped/cramped
     mobile card. */
  .svcd-price-combo__card{
    padding: 26px 24px;
    flex-direction: column;
    flex-wrap: nowrap;
    align-items: flex-start;
    gap: 24px;
  }
  .svcd-price-combo__text{
    display: block;
    width: 100%;
    flex: 0 1 auto;
  }
  .svcd-price-combo__label{ display: block; }
  .svcd-price-combo__value{ display: block; margin-top: 12px; }
  .svcd-price-combo__note{
    display: block;
    flex: 0 1 auto;
    max-width: 100%;
    margin-top: 14px;
  }
  .svcd-price-combo__btn{ width: 100%; justify-content: center; }
  .svcd-trust-stack{ max-width: 340px; align-self: auto; margin: 32px auto 0; padding-left: 22px; }
  .svcd-edit-why{ grid-template-columns: 1fr; row-gap: 36px; }
  .svcd-edit-why__lede{ max-width: none; }
  .svcd-edit-why__row{ padding: 22px 8px; gap: 18px; }
  .svcd-edit-why__row:hover{ transform: none; }
}
@media (max-width: 700px){
  .svcd-hero{ padding-top: 20px; padding-bottom: 40px; }
  .svcd-hero__actions{ gap: 12px; }
  .svcd-hero__actions .btn{ width: 100%; justify-content: center; }
  .svcd-hero__trust{ column-gap: 20px; margin-top: 24px; padding-top: 20px; }
  .svcd-hero__media{ height: 280px; max-width: none; margin: 0; }
  .svcd-testimonial-card + .svcd-testimonial-card{ margin-left: 12px; }
  .svcd-section{ padding: 72px 0; }
  .svcd-process{ grid-template-columns: 1fr; row-gap: 28px; }
  .svcd-process__step{ border-left: 0 !important; padding-left: 0 !important; }
  .svcd-pricing{ padding: 26px 24px; flex-direction: column; align-items: flex-start; }
  .about-cta{ padding: 94px 0 86px; }
  .about-cta__trust{ column-gap: 24px; row-gap: 12px; }
  .svcd-edit-why__icon{ width: 46px; height: 46px; }
  .svcd-edit-why__icon svg{ width: 20px; height: 20px; }
  .svcd-edit-why__chevron{ display: none; }
}

@media (prefers-reduced-motion: reduce){
  .svcd-addons__link{ transition: none; }
  .svcd-edit-why__row, .svcd-edit-why__chevron{ transition: none; }
  .svcd-chip{ transition: none; }
}