/* ===== Shared: pinned image shadow + rise ===== */
@keyframes pinRise {
  from { opacity: 0; transform: translateY(18px); }
  to   { opacity: 1; transform: translateY(0); }
}
.feature-pin img{
  box-shadow: 0 30px 60px rgba(0,0,0,.18), 0 10px 24px rgba(0,0,0,.10);
  border-radius: 16px;
  will-change: transform, opacity;
  animation: pinRise .6s ease-out both;
}
@media (prefers-reduced-motion: reduce){
  .feature-pin img{ animation: none; }
}

/* ===== Shared: specs band (desktop) ===== */
.specs-band { position: relative; width: 100%; background:#f4f4f4; min-height:1000px; }
.specs-inner { padding-top:40px; padding-bottom:340px; }
.specs-grid {
  display:grid;
  grid-template-columns: 1fr 1fr 1fr;
  column-gap:280px;
  align-items:start;
}
.feature-pin {
  position:absolute; left:50%; transform:translateX(-50%);
  bottom:130px; width:min(1180px,92vw);
}

/* ===== Shared: SPA defaults (centered) ===== */
.project-spa .spa-cta__pin,
.project-spa .spa-cta__stage { min-height: 100svh; }

.project-spa .spa-cta__slide{
  min-height:100svh;
  display:flex;
  flex-direction:column;
  justify-content:center;
  align-items:center;
  padding:0 24px;
  text-align:center;
}
.project-spa .spa-cta__headline{
  margin:0 0 24px;
  display:flex; align-items:baseline; gap:10px; justify-content:center;
  color:#fff;
  font-size:clamp(40px,6vw,72px);
  line-height:1.1;
}
.project-spa .spa-cta__headline .kicker{
  font-size:clamp(14px,2.1vw,18px);
  letter-spacing:.16em; opacity:.95; color:#fff;
  /* uppercase is controlled globally; keep neutral here */
}
.project-spa .projects-sub,
.project-spa ul{
  color:#fff; font-size:clamp(18px,2.2vw,22px); line-height:1.55; margin:0; max-width:820px;
}
.project-spa .spa-body{ display:flex; flex-direction:column; gap:14px; align-items:center; }
.project-spa ul{ list-style:none; padding:0; margin-top:12px; }
.project-spa .spa-body li{ margin:6px 0; font-weight:300; }

/* ===== Shared: small utilities ===== */
.back-row{ padding-top:14px; }
.back-link{
  font-size:14px; color:#757575; text-decoration:none;
  display:inline-flex; align-items:center; gap:6px;
}
.back-link:hover{ color:#111; text-decoration:underline; }

/* ===== MOBILE (≤720px): shared responsive tweaks ===== */
@media (max-width: 720px){

  /* Hero → first image gap + fluid images */
  .hero + .container .showreel-card { margin-top: 16px; }
  .showreel-card img { display:block; width:100%; height:auto; }

  /* Specs stack + pinned image becomes inline to avoid huge white gap */
  .specs-band { min-height: auto; }
  .specs-inner { padding-top: 24px; padding-bottom: 24px; }
  .specs-grid {
    grid-template-columns: 1fr;
    column-gap: 0;
    row-gap: 18px;
  }
  .specs-grid h4 { margin:0 0 8px; }
  .specs-grid p, .specs-grid ul { margin:0; }
  .specs-grid ul li { line-height:1.4; }

  .feature-pin {
    position: static;
    transform: none;
    left: auto;
    bottom: auto;
    width: 100%;
    padding: 0 24px;
    margin-top: 20px;
  }
  .feature-pin img { width:100%; height:auto; }

  /* Interstitials */
  .interstitial-300 { height: 240px; }
}

/* ======================================================
   PER‑PROJECT OVERRIDES
   ====================================================== */

/* Closetry: left-aligned SPA + lowercase “the” */
.page-closetry #spa-closetry { background:#000; }
.page-closetry #spa-closetry .spa-cta__slide{ align-items:flex-start; text-align:left; }
.page-closetry #spa-closetry .spa-body{ align-items:flex-start; }
.page-closetry #spa-closetry .spa-cta__headline{ justify-content:flex-start; }
.page-closetry #spa-closetry .spa-cta__headline .kicker{ text-transform:none; }

@media (max-width: 720px){
    /* Missing bit: ensure project images align to container gutters on phones */
  .container .showreel-card { margin-left: 0; margin-right: 0; }
  .container .showreel-card + .showreel-card { margin-top: 20px; }
}