/* ============================================================
   Prices page — page-specific styles.
   Reuses tokens/components already defined in ../styles.css and
   ../service-detail.css: --red / --black / --white / --grey-light /
   --grey-soft / --text-secondary, --font-display / --font-text,
   --ease, --container-w / --pad-inline / --header-h, .container,
   .reveal, .hero__eyebrow*, .btn*. The intro reuses .svc-hero* and the
   final CTA reuses .about-cta*, both from ../services-page.css (also
   loaded by this page).
   ============================================================ */

/* Match the Services page's own container sizing exactly (max-width +
   centring) — the same rule services-page.css applies via its
   .services-page ancestor class — so this page's overall width/scale
   reads identically to services.html instead of falling back to the
   sitewide flush-left 1760px .container. */
.prices-page .container{ max-width: var(--container-default); margin-left: auto; }

/* ---------- Service list — the Services-page component, reused as-is
   (.svc-catalog / .svc-row / .svc-catalog__visual / .svc-visual__panel
   all live in ../services-page.css, loaded unchanged on this page).
   Only the compact pricing panel below is new, scoped under
   .prices-page / .svc-row.is-open so services.html is never touched. ---------- */
/* The row's hit element is a <button> here (toggles pricing) instead
   of the Services page's <a> (navigates) — everything else about the
   row is untouched. flex-wrap lets .pr-price take its own full-width
   line below icon/title/plus without disturbing that row's layout. */
.prices-page .svc-row{ flex-wrap: wrap; }

/* Background only — the shared .is-active / .is-open states
   (services-page.css) paint the row #F7F7F6 (grey); swap that to
   white here. Nothing else about the row (radius, padding, spacing,
   borders) is touched. */
.prices-page .svc-row.is-active,
.prices-page .svc-row.is-open{
  background: #FFFFFF;
}

/* Plus → minus should reflect the OPEN pricing panel at every width;
   the Services page only ever rotates this in its own mobile accordion,
   so this is scoped to Prices to leave services.html untouched. */
.prices-page .svc-row.is-open .svc-row__plus::after{
  transform: translate(-50%, -50%) rotate(90deg);
  opacity: 0;
}

/* The row no longer navigates on Prices, so the decorative "Read more"
   text (which implied it would) is misleading here — the real, working
   link now lives inside .pr-price instead. */
.prices-page .svc-row__readmore{ display: none; }

.pr-price{
  flex: 1 0 100%;
  display: grid;
  grid-template-rows: 0fr;
  transition: grid-template-rows 0.28s var(--ease);
  /* .svc-row's own flex `gap` (24px desktop / 20px ≤900px, see
     services-page.css) still reserves space above this item even while
     its track is 0fr — cancel it here so a closed row has no leftover
     gap, then rebuild the breathing room as padding-top below, which
     collapses along with the track instead of sitting outside it. */
  margin-top: -24px;
  /* Lifts this panel's own link above the row's full-bleed .svc-row__hit
     button so the link stays clickable instead of the toggle eating the tap. */
  position: relative;
  z-index: 1;
}
.svc-row.is-open .pr-price{ grid-template-rows: 1fr; }
.pr-price__inner{ overflow: hidden; min-height: 0; }
.pr-price__body{ padding: 18px 0 28px; }

@media (max-width: 900px){
  .pr-price{ margin-top: -20px; }
}

.pr-rows{ display: flex; flex-direction: column; }
.pr-row{
  display: flex;
  align-items: baseline;
  justify-content: space-between;
  gap: 16px;
  padding: 9px 0;
  border-bottom: 1px solid var(--grey-soft);
  font-family: var(--font-text);
  font-size: 0.92rem;
  line-height: 1.4;
}
.pr-row:last-child{ border-bottom: none; }
.pr-row__label{ color: var(--text-secondary); }
.pr-row__price{ font-weight: 700; color: var(--black); white-space: nowrap; }
.pr-row__price--quote{ font-weight: 600; color: var(--red); }

.pr-price__link{
  display: inline-flex;
  align-items: center;
  gap: 6px;
  margin-top: 16px;
  font-family: var(--font-text);
  font-weight: 600;
  font-size: 0.86rem;
  color: var(--red);
}
.pr-price__link svg{ transition: transform 0.2s var(--ease); }
.pr-price__link:hover svg{ transform: translateX(3px); }

@media (prefers-reduced-motion: reduce){
  .pr-price{ transition: none; }
}

/* ---------- What affects your price — centered, editorial, no cards ---------- */
.price-factors{ padding: 92px 0; background: var(--white); }
/* Narrower than the page's own 1250px container — deliberately kept
   tighter so this editorial block reads as a single centered column. */
.price-factors .container{ max-width: 1100px; margin-left: auto; margin-right: auto; }

.price-factors__head{ max-width: 640px; margin: 0 auto; text-align: center; }
.price-factors__eyebrow{ justify-content: center; }
.price-factors__heading{ margin-top: 18px; text-align: center; }
.price-factors__lede{
  margin-top: 26px;
  font-family: var(--font-text);
  font-size: 1.05rem;
  line-height: 1.65;
  color: var(--text-secondary);
}

.price-factors__grid{
  margin-top: 56px;
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  row-gap: 28px;
}
.price-factors__item{
  display: flex;
  align-items: center;
  gap: 16px;
  padding: 0 32px;
}
.price-factors__item:nth-child(3n+1){ padding-left: 0; }
.price-factors__item:nth-child(3n){ padding-right: 0; }
.price-factors__item:nth-child(3n+2),
.price-factors__item:nth-child(3n){
  border-left: 1px solid var(--grey-soft);
}
.price-factors__icon{
  flex: none;
  display: flex;
  align-items: center;
  justify-content: center;
  width: 48px;
  height: 48px;
  border-radius: 50%;
  background: rgba(225, 6, 0, 0.08);
  color: var(--red);
}
.price-factors__icon svg{ width: 24px; height: 24px; }
.price-factors__item span:last-child{
  font-family: var(--font-text);
  font-weight: 600;
  font-size: 0.96rem;
  line-height: 1.4;
  color: var(--black);
}

@media (max-width: 900px){
  .price-factors{ padding: 68px 0; }
  .price-factors__grid{ margin-top: 44px; }
}

@media (max-width: 760px){
  .price-factors__grid{ grid-template-columns: repeat(2, 1fr); row-gap: 22px; }
  .price-factors__item{ padding: 0 20px; }
  .price-factors__item:nth-child(3n+1){ padding-left: 20px; }
  .price-factors__item:nth-child(3n){ padding-right: 20px; }
  .price-factors__item:nth-child(3n+2),
  .price-factors__item:nth-child(3n){ border-left: none; }
  .price-factors__item:nth-child(odd){ padding-left: 0; }
  .price-factors__item:nth-child(even){ padding-right: 0; }
}

@media (max-width: 560px){
  .price-factors{ padding: 52px 0; }
  .price-factors__grid{ grid-template-columns: 1fr; row-gap: 20px; margin-top: 36px; }
  .price-factors__item,
  .price-factors__item:nth-child(odd),
  .price-factors__item:nth-child(even){ padding: 0; border-left: none; }
}

/* ============================================================
   Responsive
   ============================================================ */
/* Matches the Services page's own accordion breakpoint (see
   services-page.css / ACCORDION_BREAKPOINT) — below it the row's plus
   already needs a larger, easier touch target. */
@media (max-width: 700px){
  .prices-page .svc-row__plus{ width: 22px; height: 22px; }
  .pr-price__body{ padding-bottom: 22px; }

  /* Background only — services-page.css paints the image area
     #F7F7F6 (grey) here; swap to white. Size/radius/spacing untouched. */
  .prices-page .svc-row__panel-media{ background: #FFFFFF; }

  /* Coordinated open/close — mobile only, desktop's own .pr-price
     animation (base rule above) is untouched. grid-template-rows: 0fr
     doesn't reliably collapse to a true 0px here, so both panels
     (desc/image and pricing rows) rest at an explicit height: 0 / auto;
     the open/close between them is a measured px height animation run
     by window.RedRouteAccordion (about-animation.js) on the same
     duration/curve for both, so they finish together. The contents
     fade/slide in slightly behind the height, and back out on close. */
  .prices-page .svc-row__panel,
  .prices-page .pr-price{
    display: block;
    overflow: hidden;
    height: 0;
    transition: none;
  }
  .prices-page .svc-row.is-open .svc-row__panel,
  .prices-page .svc-row.is-open .pr-price{
    height: auto;
  }
}
@media (max-width: 700px) and (prefers-reduced-motion: no-preference){
  .prices-page .svc-row__panel-inner,
  .prices-page .pr-price__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);
  }
  .prices-page .svc-row.is-open .svc-row__panel-inner,
  .prices-page .svc-row.is-open .pr-price__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;
  }
}

@media (prefers-reduced-motion: reduce){
  .prices-page .svc-row__panel-inner,
  .prices-page .pr-price__inner{
    transition: none;
    transform: none;
  }
}