/* Area (location) pages, e.g. areas/bunker-hill.html.
   Built on service.css (hero, areas map, trust card) + home.css (carousels, FAQ); only area-specific bits live here. */

/* Hero: title block -> intro is 20px in the design (service hero uses 32) */
.page-hero--area .page-hero__inner { gap: 20px; }

/* Services slider (all 9 services, same cards as the homepage) */
.area-services .section-heading { max-width: 874px; }
.area-services .carousel__track { margin-top: clamp(32px, 2.5vw, 48px); }
.area-services .carousel__track > * { width: calc(var(--container-w) * 0.345); }   /* 526 of 1524 */
.area-services__controls { display: flex; justify-content: center; margin-top: var(--space-heading); }

/* Featured projects intro: two paragraphs, 8px apart */
.projects-feat__head .para-stack p { font-size: var(--fs-lead); line-height: 1.4; }
.projects-feat__head strong { font-weight: 600; }

/* ---------- How we work: text | progress rail | scrolling steps ----------
   Same behaviour as the reference: the section keeps its normal height (no pinning); the steps sit in a
   fixed-height box with a hidden scrollbar, the mouse wheel scrolls that box slowly, and the rail fills as it moves. */
.process { margin-top: var(--section-space); background: #000; color: var(--white); }
.process__band { padding-block: var(--space-dark); }
.process__grid {
  display: grid;
  grid-template-columns: minmax(0, 621fr) minmax(0, 280fr) minmax(0, 623fr);
  align-items: center;
}
.process__text { display: grid; gap: 20px; }
.process__head { display: grid; gap: 16px; }
.process__text h2 { color: var(--white); }
.process__text p { font-size: var(--fs-lead); line-height: 1.4; }

/* Rail: 8px track, brand-colour fill (starts at 20%, grows with the scroll), 16px dot fixed at the top */
.process__rail {
  position: relative;
  justify-self: center;
  width: 8px;
  height: 323px;
  flex: none;
}
.process__track { display: block; width: 100%; height: 100%; border-radius: 999px; background: rgba(255, 255, 255, 0.15); overflow: visible; }
.process__fill {
  display: block;
  width: 100%;
  height: var(--fill, 20%);
  border-radius: 999px;
  background: var(--teal);
  transition: height 300ms ease-out;
}
.process__dot {
  position: absolute;
  top: 0;
  left: 50%;
  z-index: 1;
  width: 16px;
  height: 16px;
  border-radius: 50%;
  background: var(--teal);
  transform: translateX(-50%);
}

/* Steps box: fixed height, inner scroll, no visible scrollbar */
.process__viewport {
  height: 323px;
  overflow-y: auto;
  overscroll-behavior: contain;
  scrollbar-width: none;
  -ms-overflow-style: none;
}
.process__viewport::-webkit-scrollbar { display: none; }
.process__viewport:focus-visible { outline-offset: 4px; }
.process__steps { display: grid; gap: 40px; counter-reset: step; }
.process__step { counter-increment: step; opacity: 0.3; transition: opacity 300ms ease-out; }
.process__step.is-active { opacity: 1; }
.process__title { font-size: var(--fs-h3); line-height: 1.33; font-weight: 600; text-transform: uppercase; }
.process__title::before { content: counter(step) ". "; }
.process__step p { margin-top: 16px; font-size: var(--fs-lead); line-height: 1.4; }

/* Without JS (or if the script has not run) every step is readable */
html:not(.js) .process__step { opacity: 1; }

/* Phones and tablets: plain list, no inner scroll, no rail */
@media (max-width: 899px) {
  .process__viewport { height: auto; overflow: visible; }
  .process__step { opacity: 1; }
  .process__rail { display: none; }
}
@media (prefers-reduced-motion: reduce) {
  .process__fill, .process__step { transition: none; }
}
@media (max-width: 1099px) {
  .area-services .carousel__track > * { width: clamp(280px, 62vw, 526px); }
}
@media (max-width: 899px) {
  .process__grid { grid-template-columns: minmax(0, 1fr); gap: 40px; }
}
@media (max-width: 639px) {
  .area-services .carousel__track > * { width: min(86vw, 420px); }
}