/* "Our Process" - four alternating steps, under the promise band.
 *
 * Rows alternate picture/copy, copy/picture. The pictures do not exist yet, so
 * every shot is a placeholder box at the final aspect ratio: when photos arrive
 * they drop straight in and nothing about the layout moves.
 *
 * White band. The promise band above it is #f5f5f5 and the breadcrumb bar below
 * it is #f5f5f5 too, so white is what separates this from both.
 *
 * Loaded after promise.css. Same reason as the last two light bands:
 * sections.css paints `.sos-band h2` white for the dark bands, and source order
 * is what lets this restate the colour without !important.
 */

.sos-process {
  background: #fff;
  padding: 64px 0;
}

/* ---- head --------------------------------------------------------------- */

.sos-process .sos-ps-head {
  max-width: 760px;
  margin: 0 auto 46px;
  text-align: center;
}

/* sections.css sets .sos-band h2 to #fff for the dark bands. Restated, not
   fought - this sheet loads later, so plain source order settles it. */
.sos-process h2 {
  color: #1a1a1a;
  margin: 0;
}

.sos-process .sos-ps-sub {
  color: #666;
  font-size: 1.02rem;
  line-height: 1.7;
  margin: 14px 0 0;
  padding: 0;
}

/* ---- the rows -----------------------------------------------------------
   Flex rather than grid, for one reason: `flex-direction` does all three jobs
   at once - two columns, the alternation on even rows, and the stack on small
   screens - without any child needing to know which row it is in.

   The rows sit in their own .sos-ps-rows wrapper so that nth-child counts rows
   and nothing else. Without it the head and the CTA are siblings too, the
   parity shifts by one, and the section alternates off by a row - which still
   looks deliberate enough to miss by eye. */

.sos-process .sos-ps-row {
  display: flex;
  align-items: center;
  gap: 46px;
  margin-bottom: 40px;
}

.sos-process .sos-ps-rows .sos-ps-row:last-child {
  margin-bottom: 0;
}

.sos-process .sos-ps-rows .sos-ps-row:nth-child(even) {
  flex-direction: row-reverse;
}

.sos-process .sos-ps-shot,
.sos-process .sos-ps-step {
  flex: 1 1 0;
  min-width: 0;
}

/* ---- the placeholder shot -----------------------------------------------
   [EDIT] These are empty on purpose - there are no process photos yet. The box
   is already at the ratio the photo will be, so dropping one in later changes
   nothing about the layout: give the box a background-image, or put an <img>
   inside it, and delete the glyph rule below.

   A styled box rather than an <img> with no src: an image that fails to load
   with alt="" renders as literally nothing, which is how a missing photo would
   silently turn into a blank column. */

.sos-process .sos-ps-shot {
  aspect-ratio: 3 / 2;
  border-radius: 8px;
  background: #ececec;
  border: 1px solid #e2e2e2;
  /* A faint camera glyph, drawn rather than fetched - same approach as the
     promise band's tick. No asset, no request. */
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23c4c4c4' stroke-width='1.4' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M23 19a2 2 0 0 1-2 2H3a2 2 0 0 1-2-2V8a2 2 0 0 1 2-2h4l2-3h6l2 3h4a2 2 0 0 1 2 2z'/%3E%3Ccircle cx='12' cy='13' r='4'/%3E%3C/svg%3E");
  background-repeat: no-repeat;
  background-position: center;
  background-size: 54px 54px;
}

/* Fallback for browsers without aspect-ratio: without it the box collapses to
   zero height and the row looks like it lost a column. */
@supports not (aspect-ratio: 3 / 2) {
  .sos-process .sos-ps-shot {
    min-height: 260px;
  }
}

/* ---- the step copy ------------------------------------------------------ */

.sos-process .sos-ps-num {
  display: block;
  font-family: 'Inter', Helvetica, Arial, sans-serif;
  font-size: 0.76rem;
  font-weight: 700;
  letter-spacing: 0.16em;
  text-transform: uppercase;
  color: #dd5c26;
  margin-bottom: 10px;
}

.sos-process .sos-ps-step h3 {
  font-family: 'Poppins', 'Archivo', Helvetica, Arial, sans-serif;
  font-weight: 800;
  font-size: clamp(1.25rem, 1.9vw, 1.6rem);
  line-height: 1.15;
  text-transform: uppercase;
  color: #1a1a1a;
  margin: 0 0 12px;
  padding: 0;
}

.sos-process .sos-ps-step p {
  font-size: 1rem;
  line-height: 1.7;
  color: #3d3d3d;
  margin: 0;
  padding: 0;
}

/* ---- closing CTA -------------------------------------------------------- */

.sos-process .sos-ps-cta {
  text-align: center;
  margin-top: 48px;
}

.sos-process .sos-ps-btn {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 0.5rem;
  font-family: 'Inter', Helvetica, Arial, sans-serif;
  font-weight: 600;
  font-size: 1.05rem;
  line-height: 1.4;
  padding: 15px 34px;
  border-radius: 6px;
  background: #dd5c26;
  color: #fff;
  text-decoration: none;
  transition: background 0.15s ease, transform 0.12s ease;
}

.sos-process .sos-ps-btn:hover {
  background: #b8481b;
  color: #fff;
  transform: translateY(-1px);
}

/* ---- stacked ------------------------------------------------------------
   `column`, never `column-reverse`, and it overrides the row-reverse above so
   it applies to the even rows too: stacked, every row must read picture then
   copy. Alternation only looks deliberate side by side - once it is one column,
   a row that puts its copy first just looks like a mistake. */

@media all and (max-width: 980px) {
  .sos-process {
    padding: 48px 0;
  }
  .sos-process .sos-ps-head {
    margin-bottom: 34px;
  }
  .sos-process .sos-ps-row,
  .sos-process .sos-ps-rows .sos-ps-row:nth-child(even) {
    flex-direction: column;
    align-items: stretch;
    gap: 20px;
    margin-bottom: 34px;
  }
  .sos-process .sos-ps-shot {
    max-width: 520px;
    width: 100%;
  }
}

@media all and (max-width: 620px) {
  .sos-process .sos-ps-shot {
    background-size: 42px 42px;
  }
  .sos-process .sos-ps-btn {
    width: 100%;
  }
}