/*
 * ProSocial Agency - Service and industry pages
 * 11-page-service.css
 * Deferred tier. Loaded on the four hub and detail templates.
 *
 * Hero styles live in 05-hero.css, which is critical tier, so interior
 * heroes are styled on first paint.
 *
 * These pages carry the FAQ block, which is the primary answer engine
 * surface. All three client sites have one. The previous ProSocial
 * theme had none, which is why nothing here was quotable.
 */

/* -------- FAQ -------- */

.faq { max-width: 780px; }

.faq__item { border-bottom: 1px solid var(--rule); }
.faq__item:first-child { border-top: 1px solid var(--rule); }

.faq__trigger {
  width: 100%;
  display: flex;
  align-items: flex-start;
  justify-content: space-between;
  gap: var(--space-6);
  padding-block: var(--space-6);
  background: none;
  border: none;
  text-align: left;
  cursor: pointer;
  font-family: var(--font-display);
  font-size: var(--text-md);
  font-weight: var(--weight-medium);
  letter-spacing: var(--tracking-tight);
  color: var(--ink);
  line-height: var(--leading-snug);
  transition: var(--transition-color);
}

.faq__trigger:hover { color: var(--action); }

.faq__icon {
  flex-shrink: 0;
  width: 20px;
  height: 20px;
  position: relative;
  margin-top: 4px;
}

.faq__icon::before,
.faq__icon::after {
  content: '';
  position: absolute;
  background: var(--action);
  transition: transform var(--dur-base) var(--ease-out),
              opacity var(--dur-fast) var(--ease-out);
}

.faq__icon::before { top: 9px; left: 0; width: 20px; height: 1.5px; }
.faq__icon::after  { left: 9px; top: 0; width: 1.5px; height: 20px; }

.faq__item.is-open .faq__icon::after { transform: scaleY(0); opacity: 0; }

.faq__answer {
  max-height: 0;
  overflow: hidden;
  transition: max-height var(--dur-slow) var(--ease-out);
}

.faq__item.is-open .faq__answer { max-height: 900px; }

.faq__answer p {
  font-family: var(--font-text);
  font-size: var(--text-base);
  line-height: var(--leading-normal);
  color: var(--ink-body);
  max-width: 64ch;
  padding-bottom: var(--space-6);
}

/* -------- Responsive -------- */

@media (max-width: 767px) {
  .faq__trigger { font-size: var(--text-base); }
}

@media (prefers-reduced-motion: reduce) {
  .faq__answer,
  .faq__icon::before,
  .faq__icon::after,
}


/* =================================================
   SCROLL LINKED PROCESS TIMELINE
   =================================================
   Replaces the static numbered list. The left column pins while the
   steps scroll past it, a rail runs down the left of the steps, and a
   progress line fills that rail as the reader moves through them.

   The active step brightens and its marker fills. Everything before it
   stays filled, everything after stays muted, so the rail doubles as a
   position indicator.

   Driven by assets/js/steps.js, which sets --steps-progress on the
   list and toggles is-active on each step.
   ================================================= */

.steps-layout {
  display: grid;
  grid-template-columns: 0.85fr 1.15fr;
  gap: var(--space-16);
  align-items: start;
}

.steps-aside {
  position: sticky;
  top: calc(var(--nav-height-shrunk) + var(--space-10));
}

.steps-aside__count {
  font-family: var(--font-heading);
  font-size: var(--text-sm);
  font-weight: var(--weight-medium);
  letter-spacing: var(--tracking-widest);
  text-transform: uppercase;
  color: var(--color-text-muted);
  margin-top: var(--space-6);
  display: block;
}

.steps-aside__count b {
  color: var(--color-action);
  font-weight: var(--weight-semibold);
  font-variant-numeric: tabular-nums;
}

/* -------- Rail -------- */
/* Geometry comes from steps.js as --rail-top and --rail-height, so the
   line runs from the center of the first marker to the center of the
   last. Hard coded insets overshot by 38px at the top and 114px at the
   bottom, which is what made it look bolted on.

   One hairline, not two pixels. The markers are the element that reads;
   the line only connects them. */

.steps-track {
  position: relative;
  padding-left: var(--space-10);
}

.steps-track::before {
  content: '';
  position: absolute;
  left: 10px;
  top: var(--rail-top, 0px);
  height: var(--rail-height, 0px);
  width: 1px;
  background: var(--color-border);
  opacity: 0.9;
}

.steps-track::after {
  content: '';
  position: absolute;
  left: 10px;
  top: var(--rail-top, 0px);
  width: 1px;
  height: calc(var(--steps-progress, 0) * var(--rail-height, 0px));
  background: var(--color-action);
  opacity: 0.55;
  transition: height var(--duration-slow) linear;
}

/* -------- Step -------- */

.step-item {
  position: relative;
  padding-block: var(--space-8);
  border-bottom: 1px solid var(--color-border);
  opacity: 0.45;
  transition:
    opacity   var(--duration-slow) var(--ease-out),
    transform var(--duration-slow) var(--ease-out);
}

.step-item:last-child { border-bottom: none; }

.step-item.is-active {
  opacity: 1;
  transform: translateX(4px);
}

/* Marker sitting on the rail. */
.step-item__marker {
  position: absolute;
  left: calc(var(--space-10) * -1);
  top: calc(var(--space-8) + 4px);
  width: 21px;
  height: 21px;
  border-radius: 50%;
  background: var(--color-bg-base);
  border: 1px solid var(--color-border);
  /* Halo in the section color, so the rail appears to pass behind the
     marker rather than through it. */
  box-shadow: 0 0 0 5px var(--color-bg-base);
  transition:
    background   var(--duration-base) var(--ease-out),
    border-color var(--duration-base) var(--ease-out),
    transform    var(--duration-base) var(--ease-bounce);
}

.step-item__marker::after {
  content: '';
  position: absolute;
  inset: 0;
  margin: auto;
  width: 6px;
  height: 6px;
  border-radius: 50%;
  background: var(--color-border);
  transition: background var(--duration-base) var(--ease-out);
}

.step-item.is-active .step-item__marker,
.step-item.is-passed .step-item__marker {
  background: var(--color-action);
  border-color: var(--color-action);
}

.step-item.is-active .step-item__marker::after,
.step-item.is-passed .step-item__marker::after {
  background: #fff;
}

.step-item.is-active .step-item__marker {
  transform: scale(1.18);
  box-shadow: 0 0 0 5px var(--color-bg-base), 0 0 0 10px var(--color-action-wash);
}

.step-item__num {
  font-family: var(--font-heading);
  font-size: var(--text-xs);
  font-weight: var(--weight-semibold);
  letter-spacing: var(--tracking-widest);
  color: var(--color-text-muted);
  display: block;
  margin-bottom: var(--space-2);
  font-variant-numeric: tabular-nums;
  transition: color var(--duration-base) var(--ease-out);
}

.step-item.is-active .step-item__num { color: var(--color-action); }

.step-item__title {
  font-family: var(--font-heading);
  font-size: var(--text-lg);
  font-weight: var(--weight-medium);
  letter-spacing: var(--tracking-tight);
  color: var(--color-text-primary);
  margin-bottom: var(--space-3);
}

.step-item__body {
  font-family: var(--font-body);
  font-size: var(--text-base);
  line-height: var(--leading-normal);
  color: var(--color-text-body);
}

.step-item__body p { max-width: none; }

@media (max-width: 880px) {
  .steps-layout {
    grid-template-columns: 1fr;
    gap: var(--space-8);
  }

  .steps-aside { position: static; }
  .steps-track { padding-left: var(--space-8); }
  .step-item__marker { left: calc(var(--space-8) * -1); }
  .step-item { opacity: 1; }
  .step-item.is-active { transform: none; }
}

@media (prefers-reduced-motion: reduce) {
  .step-item,
  .step-item__marker,
  .steps-track::after { transition: none; }

  .step-item { opacity: 1; }
  .step-item.is-active { transform: none; }
}

/* =================================================
   PROOF BAND
   =================================================
   Navy band with a background that travels slower than the page. The
   offset comes from --proof-shift, set in steps.js, so the movement is
   tied to scroll position rather than to a timer.
   ================================================= */

.proof {
  position: relative;
  overflow: hidden;
  background: var(--color-band);
  padding-block: var(--section-pad-y-lg);
  isolation: isolate;
}

/* Photograph, when one is set. Ported from the Hibiscus pattern: the
   url arrives as --proof-bg on the section, so the stylesheet does not
   need to know the file. Oversized and shifted by --proof-shift, which
   steps.js drives from scroll position. */
.proof__image {
  position: absolute;
  inset: -25% 0;
  z-index: -2;
  background-image: var(--proof-bg);
  background-size: cover;
  background-position: center;
  transform: translate3d(0, var(--proof-shift, 0px), 0);
  will-change: transform;
}

/* Scrim. Sits over the photograph and holds the type legible no matter
   what the image is. Without a photograph this gradient is the band. */
.proof::before {
  content: '';
  position: absolute;
  inset: -25% -5%;
  z-index: -1;
  background:
    radial-gradient(42% 48% at 22% 30%, rgba(196, 92, 38, 0.30) 0%, transparent 62%),
    radial-gradient(38% 44% at 78% 68%, rgba(201, 150, 62, 0.20) 0%, transparent 60%),
    linear-gradient(160deg, var(--color-band-deep) 0%, var(--color-band) 55%, #24365C 100%);
  transform: translate3d(0, var(--proof-shift, 0px), 0);
  will-change: transform;
}

/* With a photograph the gradient becomes a dark wash rather than the
   surface itself, so the image reads through it. */
.proof--image::before {
  inset: 0;
  transform: none;
  background:
    linear-gradient(180deg, rgba(17, 28, 51, 0.86) 0%, rgba(17, 28, 51, 0.78) 55%, rgba(17, 28, 51, 0.90) 100%),
    radial-gradient(46% 52% at 24% 28%, rgba(196, 92, 38, 0.26) 0%, transparent 64%);
}

.proof__inner {
  max-width: 760px;
  margin-inline: auto;
  padding-inline: var(--section-pad-x);
  text-align: center;
}

.proof__eyebrow {
  display: block;
  font-family: var(--font-heading);
  font-size: var(--text-xs);
  font-weight: var(--weight-semibold);
  letter-spacing: var(--tracking-widest);
  text-transform: uppercase;
  color: var(--color-support);
  margin-bottom: var(--space-5);
}

.proof__heading {
  font-family: var(--font-heading);
  font-size: var(--text-section);
  font-weight: var(--weight-semibold);
  letter-spacing: var(--tracking-display);
  line-height: var(--leading-tight);
  color: var(--color-text-inverse);
  max-width: 100%;
}

.proof__sub {
  font-family: var(--font-body);
  font-size: var(--text-md);
  line-height: var(--leading-normal);
  color: var(--color-text-inverse-muted);
  margin-top: var(--space-5);
  max-width: 56ch;
  margin-inline: auto;
}

.proof__sub p { max-width: none; }

.proof__actions {
  display: flex;
  gap: var(--space-3);
  justify-content: center;
  flex-wrap: wrap;
  margin-top: var(--space-8);
}

@media (max-width: 880px) {
  .proof { padding-block: var(--section-pad-y); }
  .proof__actions .btn { flex: 1; justify-content: center; }
}

@media (prefers-reduced-motion: reduce) {
  .proof::before { transform: none; }
}

/* -------------------------------------------------
   CASE STUDY VARIANTS
   -------------------------------------------------
   A case study runs longer step bodies than a service page, because a
   reader deciding whether to hire you is judging reasoning rather than
   scanning a process. At the service page's 45 percent, a five line
   step reads as unavailable rather than merely inactive, so a skimmer
   skips it. Sixty recedes without obstructing.
   ------------------------------------------------- */

.steps-track--roomy .step-item {
  opacity: 0.6;
  padding-block: var(--space-10);
}

.steps-track--roomy .step-item.is-active { opacity: 1; }

.steps-track--roomy .step-item__body { max-width: none; }

.steps-aside__intro {
  margin-top: var(--space-4);
  font-size: var(--text-sm);
  line-height: 1.7;
  color: var(--color-text-body);
}

/* -------------------------------------------------
   CASE STUDY FIGURE
   ------------------------------------------------- */

.cs-figure {
  margin: 0;
}

.cs-figure__img {
  display: block;
  width: 100%;
  height: auto;
  border: 1px solid var(--color-border);
  border-radius: var(--radius-lg);
}

.cs-figure__caption {
  margin-top: var(--space-4);
  font-family: var(--font-heading);
  font-size: var(--text-sm);
  line-height: 1.6;
  color: var(--color-text-muted);
}

/* -------------------------------------------------
   HERO ASIDE
   -------------------------------------------------
   The hero's right column normally holds a photograph. When a template
   passes rendered markup instead, it needs no image sizing rules of its
   own, only the room to sit in.
   ------------------------------------------------- */

.hero__image--aside {
  display: flex;
  align-items: center;
  overflow: visible;
}

.lap--static { width: 100%; }

@media (max-width: 900px) {
  .steps-track--roomy .step-item { padding-block: var(--space-6); }
}

/* -------------------------------------------------
   CASE STUDY RESULTS CARDS
   -------------------------------------------------
   Four discrete claims, each with its own label and its own numbers.
   This replaced a navy band running a single column of prose down one
   half of a 1,395px section, with the other half empty. Navy is spent
   on the metric row above, where one band earns its keep. A second one
   underneath stopped reading as emphasis and started reading as a
   different page.
   ------------------------------------------------- */

/* The whole block is one centred column: heading, cards and closing
   paragraph share a left edge and the section is symmetrical. Capping
   only the grid left the heading spanning the full container and 228px
   of dead space down one side of the cards. */
.cs-results {
  width: 100%;
}

.cs-results__head { margin-bottom: var(--space-8); }

.cs-out-grid {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: var(--space-5);
}

.cs-out {
  background: var(--color-bg-white);
  border: 1px solid var(--color-border);
  border-radius: var(--radius-lg);
  padding: var(--space-6);
}

.cs-out__label {
  display: block;
  font-family: var(--font-heading);
  font-size: 0.68rem;
  letter-spacing: 0.13em;
  text-transform: uppercase;
  color: var(--color-action);
  margin-bottom: var(--space-4);
}

.cs-out__figure {
  margin: 0 0 var(--space-3);
  font-family: var(--font-heading);
  font-size: var(--text-2xl);
  line-height: 1;
  font-weight: 500;
  color: var(--color-text-primary);
}

.cs-out__figure span {
  font-size: var(--text-sm);
  font-weight: 400;
  color: var(--color-text-muted);
}

.cs-out__body p,
.cs-out__body li {
  font-size: var(--text-sm);
  line-height: 1.65;
  color: var(--color-text-body);
}

.cs-out__body p { margin: 0 0 var(--space-3); }
.cs-out__body p:last-child { margin-bottom: 0; }

.cs-out__body ul { margin: 0; padding-left: 1.1em; }
.cs-out__body strong { color: var(--color-text-primary); }

.cs-results__close {
  margin-top: var(--space-8);
}

/* -------------------------------------------------
   CASE STUDY ACCOUNT
   -------------------------------------------------
   One centred measure rather than a sticky label beside a short
   narrative. The old split expected far more prose on the right than
   this section carries.
   ------------------------------------------------- */

.cs-account__title {
  font-size: var(--text-xl);
  margin-top: var(--space-6);
  margin-bottom: var(--space-4);
}

.cs-account__title:first-of-type { margin-top: var(--space-5); }

/* -------------------------------------------------
   CASE STUDY SUMMARY
   -------------------------------------------------
   The lede, moved off the hero and onto the band above the figures. It
   gives the band a reason to exist beyond four numbers, and the summary
   now arrives before the evidence rather than after it.
   ------------------------------------------------- */

.cs-summary {
  margin: 0 0 var(--space-8);
  font-size: var(--text-md);
  line-height: 1.6;
  color: var(--ink-on-band);
}

@media (max-width: 860px) {
  .cs-out-grid   { grid-template-columns: 1fr; }
  .cs-out    { padding: var(--space-5); }
  .cs-summary { font-size: var(--text-base); margin-bottom: var(--space-6); }
}


/* -------------------------------------------------
   CASE STUDY PROSE WIDTH
   -------------------------------------------------
   16-blog.css sets .prose to 62ch, which is right for an article and
   wrong here. It was capping every prose block on a case study
   regardless of the container it sat in, which is where the narrow
   columns and the empty space beside them came from.

   Case study prose fills its container. The container decides the
   width, not the paragraph.
   ------------------------------------------------- */

/* 02-typography.css sets a global p { max-width: var(--measure) }, which
   is 52ch. That rule is on the paragraph itself, not its container,
   which is why widening containers and clearing .prose changed nothing:
   every paragraph on the page was pinned to 52 characters regardless of
   what it sat in.

   On a case study the container decides the width. Not the paragraph. */
.single-case_study .prose,
.single-case_study .prose p,
.single-case_study .prose li,
.single-case_study .cs-results__close,
.single-case_study .cs-results__close p,
.single-case_study .cs-results__close li,
.single-case_study .cs-summary,
.single-case_study .step-item__body p,
.single-case_study .cs-figure__caption {
  max-width: none;
}


/* -------------------------------------------------
   CASE STUDY PDF BUTTON
   -------------------------------------------------
   Appears twice on the page: in the hero, and in the steps aside where
   it stays pinned through the longest section. Same markup both times,
   built once in the template so the two cannot drift.

   Renders only when cs_pdf_url is set, so a case study without a report
   shows nothing rather than a dead button.
   ------------------------------------------------- */

.btn--pdf {
  display: inline-flex;
  align-items: center;
  gap: var(--space-3);
}

.btn--pdf svg {
  width: 17px;
  height: 17px;
  flex-shrink: 0;
}

/* In the aside it sits under the step counter, separated enough to read
   as a separate action rather than part of the count. */
.steps-aside__action { margin-top: var(--space-6); }

@media (max-width: 880px) {
  .steps-aside__action { margin-top: var(--space-5); }
}