/* Our Process page only (our-process.html). Loaded after styles.css and shared.css. */

/* ---------- Intro: photo 65% / dark panel 35%, touching ---------- */
.intro { padding-bottom: 0; }
.pintro { display: grid; grid-template-columns: 65fr 35fr; align-items: stretch; }
.pintro__img { min-height: clamp(380px, 38vw, 620px); overflow: hidden; }
.pintro__img img { width: 100%; height: 100%; object-fit: cover; transition: transform 1.1s var(--ease); }
.pintro__img:hover img { transform: scale(1.04); }
.pintro__copy { background: var(--secondary); color: var(--white); padding: var(--gutter); display: flex; flex-direction: column; justify-content: center; }
.pintro__copy p { opacity: .88; }
@media (max-width: 900px) {
  .pintro { grid-template-columns: 1fr; }
  .pintro__img { min-height: 0; aspect-ratio: 4 / 3; }
}
@media (prefers-reduced-motion: reduce) { .pintro__img img { transition: none; } }

/* ---------- The nine steps: a center line that fills as you scroll; text and photo alternate sides, the photo always opposite its text ---------- */
.steps { padding-top: clamp(40px, 5vw, 72px); }
.timeline {
  position: relative; --lane: 50%;
  display: grid; grid-auto-rows: 1fr; /* every step row is exactly as tall as the tallest one */
  --soft: color-mix(in srgb, var(--accent) 35%, transparent); /* divider + track colour */
}

/* the line: faint track, accent fill that js/process.js grows to the middle of the screen */
.timeline__track { position: absolute; top: 0; bottom: 0; left: var(--lane); width: 1px; transform: translateX(-50%); background: var(--soft); }
.timeline__fill { position: absolute; top: 0; left: -.5px; width: 2px; height: 0; background: var(--accent); }

/* start circle (top) and one node per step: outlined until the line reaches them, then filled with a single pulse ring */
.timeline__start, .pstep::before, .timeline__start::after, .pstep::after {
  content: ""; position: absolute; left: var(--lane); top: 0;
  transform: translate(-50%, -50%);
  border: 1px solid var(--accent); border-radius: 50%;
  box-sizing: border-box;
}
.timeline__start, .pstep::before { background: var(--bg); transition: background-color .4s var(--ease); z-index: 1; }
.timeline__start { width: 22px; height: 22px; }
.pstep::before { width: 13px; height: 13px; }
.timeline.is-started .timeline__start, .pstep.is-reached::before { background: var(--accent); }
.timeline__start::after, .pstep::after { inset: auto; left: 50%; top: 50%; width: 100%; height: 100%; opacity: 0; pointer-events: none; }
.pstep::after { left: var(--lane); top: 0; width: 13px; height: 13px; }
.timeline.is-started .timeline__start::after, .pstep.is-reached::after { animation: ringPulse 1.5s var(--ease) 1; }
@keyframes ringPulse {
  0%   { transform: translate(-50%, -50%) scale(1);   opacity: .85; }
  100% { transform: translate(-50%, -50%) scale(3.4); opacity: 0; }
}

.pstep {
  position: relative;
  display: grid; grid-template-columns: 1fr 1fr; column-gap: clamp(56px, 8vw, 160px);
  align-items: center;
  padding-block: calc(var(--section-y) / 2);
}
.pstep + .pstep { border-top: 1px solid var(--soft); } /* dividers only between steps */
.pstep:first-of-type::before, .pstep:first-of-type::after { content: none; } /* the start circle is step 1's marker */
.pstep__body { grid-column: 1; grid-row: 1; justify-self: start; max-width: 560px; transition: opacity .5s var(--ease); }
.pstep:nth-of-type(even) .pstep__body { grid-column: 2; justify-self: end; text-align: right; }
.pstep__img { grid-column: 2; grid-row: 1; aspect-ratio: 4 / 3; overflow: hidden; background: var(--secondary); transition: opacity .5s var(--ease); }
.pstep:nth-of-type(even) .pstep__img { grid-column: 1; }
.pstep__img img { width: 100%; height: 100%; object-fit: cover; transition: transform 1.1s var(--ease); }
.pstep__img:hover img { transform: scale(1.04); }

/* same big faded number as the home page process; the step name overlaps its bottom */
.pstep__num {
  display: block;
  font-family: var(--font-head);
  font-size: 84px; /* unique size, exception to the scale */
  position: relative; top: -8px;
  line-height: 1;
  color: var(--secondary);
  opacity: .08;
  transition: opacity .5s var(--ease), color .5s var(--ease);
}
.pstep h3 { margin-top: calc(84px * -.42); position: relative; }
.pstep p { margin-top: 20px; }

/* focus: once js is running, steps are dimmed until the line reaches them; the one at the middle of the screen lights up */
.timeline.is-live .pstep__body, .timeline.is-live .pstep__img { opacity: .4; }
.timeline.is-live .pstep.is-reached .pstep__body, .timeline.is-live .pstep.is-reached .pstep__img { opacity: .65; }
.timeline.is-live .pstep.is-active .pstep__body, .timeline.is-live .pstep.is-active .pstep__img { opacity: 1; }
.pstep.is-active .pstep__num { color: var(--accent); opacity: .3; }

/* phones and small tablets: the line moves to the left edge and every step is left-aligned beside it, at its natural height */
@media (max-width: 900px) {
  .timeline { --lane: 10px; grid-auto-rows: auto; }
  .pstep { grid-template-columns: 1fr; }
  .pstep__body, .pstep:nth-of-type(even) .pstep__body { grid-column: 1; justify-self: stretch; text-align: left; padding-left: 44px; max-width: none; }
  .pstep__img, .pstep:nth-of-type(even) .pstep__img { grid-column: 1; grid-row: 2; margin: 24px 0 0 44px; } /* photo under the text, beside the line */
}
@media (prefers-reduced-motion: reduce) {
  .pstep__body, .pstep__img, .pstep__img img, .pstep__num, .timeline__start, .pstep::before { transition: none; }
  .timeline.is-started .timeline__start::after, .pstep.is-reached::after { animation: none; }
}

/* ---------- Process FAQ: dark, questions flush left, soft divider lines only between questions, chevron on the right ---------- */
.pfaq { background: var(--secondary); color: var(--white); }
.pfaq .section-head { margin-bottom: clamp(32px, 4vw, 56px); }
.pfaq .faq-item { border-top: 1px solid color-mix(in srgb, var(--accent) 35%, transparent); }
.pfaq .faq-item:first-child { border-top: 0; } /* no line above the first or below the last */
.pfaq .faq-item__q { padding-block: 28px; text-align: left; color: var(--white); transition: color .3s var(--ease); }
.pfaq .faq-item__q:hover, .pfaq .faq-item.is-open .faq-item__q { color: var(--accent); }
.pfaq .faq-item__icon { width: 12px; height: 16px; }
.pfaq .faq-item__a p { max-width: 780px; padding: 0 56px 32px 0; }
.pfaq .faq-item.is-open .faq-item__a p { opacity: .88; }
@media (max-width: 768px) {
  .pfaq .faq-item__q { padding-block: 22px; }
  .pfaq .faq-item__a p { padding-right: 0; }
}
@media (prefers-reduced-motion: reduce) { .pfaq .faq-item__q { transition: none; } }