/* SIMETRA — Simetra page (simetra.html) styles
   Light, editorial theme for this page specifically — the dark navbar
   floats above it, the dark footer book-ends it below. */

/* ============ STEP CARDS (compact grid, replaces the long vertical list) ============ */
.steps-grid{
  display:grid;
  grid-template-columns: repeat(3, 1fr);
  gap: var(--s4);
}
@media (max-width:980px){ .steps-grid{ grid-template-columns: repeat(2, 1fr); } }
@media (max-width:600px){ .steps-grid{ grid-template-columns: 1fr; } }
.step-card{
  position:relative;
  background:#fbf9f4;
  border:1px solid rgba(14,13,12,0.08);
  border-radius:6px;
  overflow:hidden;
  display:flex;
  flex-direction:column;
  opacity:0; transform:translateY(28px);
  /* closing (scrolled back up) plays slower than opening, so the collapse is clearly visible */
  transition: opacity 2.4s cubic-bezier(.16,1,.3,1), transform 2.4s cubic-bezier(.16,1,.3,1);
}
.step-card.in-view{
  opacity:1; transform:translateY(0);
  transition: opacity 1.3s cubic-bezier(.16,1,.3,1), transform 1.3s cubic-bezier(.16,1,.3,1);
}
@media (min-width:981px){
  /* each column slides in from its own side as the row enters view */
  .step-card:nth-child(3n+1){ transform:translateX(-56px); }
  .step-card:nth-child(3n+2){ transform:translateY(56px); }
  .step-card:nth-child(3n){ transform:translateX(56px); }
  .step-card.in-view{ transform:translateX(0) translateY(0); }
}
.step-card::after{
  content:'';
  position:absolute; inset:0;
  border-radius:inherit;
  border:1px solid var(--brass-dim);
  box-shadow:
    0 1px 2px rgba(14,13,12,0.05),
    0 10px 24px rgba(14,13,12,0.08),
    0 28px 56px rgba(169,131,91,0.14);
  opacity:0;
  transition: opacity .35s cubic-bezier(.16,1,.3,1);
  pointer-events:none;
}
.step-card:hover::after,
.step-card:focus-within::after{ opacity:1; }
.step-card:hover{ transform:translateY(-4px); }

.step-card .photo{
  /* matches the 3:2 source photos exactly so object-fit:cover never has to crop them */
  aspect-ratio:3/2; position:relative; overflow:hidden;
  background: repeating-linear-gradient(135deg, #efe9db 0 18px, #f6f3ea 18px 36px);
}
.step-card .photo img{ position:absolute; inset:0; width:100%; height:100%; object-fit:cover; }
.step-card .photo:not(.no-image)::before{
  content:'';
  position:absolute; inset:0; z-index:1;
  background:linear-gradient(to top, rgba(14,13,12,0.55), rgba(14,13,12,0) 60%);
  mix-blend-mode:multiply;
  pointer-events:none;
}
/* curtain reveal — panel covers the photo, then wipes away so the image opens from the box's left edge */
.step-card .photo::after{
  content:'';
  position:absolute; inset:0; z-index:2;
  background:var(--ink);
  transform:scaleX(1);
  transform-origin:right center;
  transition:transform 2.6s cubic-bezier(.16,1,.3,1);
  pointer-events:none;
}
.step-card.in-view .photo::after{
  transform:scaleX(0);
  transition:transform 1.7s cubic-bezier(.16,1,.3,1);
  transition-delay:.25s;
}
.step-card .photo span{
  position:absolute; inset:0; display:none; align-items:center; justify-content:center; text-align:center;
  color:#a89f8d; font-size:11.5px; letter-spacing:.08em; text-transform:uppercase; padding:var(--s3);
}
.step-card .photo.no-image span{ display:flex; }

.step-card .body{ padding: var(--s4) var(--s4) var(--s5); }
.step-card .num{
  font-family:var(--display); font-style:italic; font-weight:400; font-size:15px;
  color:var(--brass); letter-spacing:.02em; margin-bottom:10px;
}
.step-card .kicker{
  font-size:11px; letter-spacing:.14em; text-transform:uppercase; color:var(--brass);
  font-weight:700; margin-bottom:8px;
}
.step-card h4{
  font-family:var(--display); font-weight:500; font-size:21px; color:var(--ink);
  margin-bottom:10px; line-height:1.32;
}
.step-card p{ font-size:14.5px; line-height:1.7; color:#6f695d; }