/* ── Featured projects + film band ──────────────────────────────────
   Added 2026-09-13. Linked from index.html only. Uses the tokens
   already defined in site.css (--ink, --paper, --rule, --red, --mono…).
   ------------------------------------------------------------------ */

/* Featured projects ------------------------------------------------ */
.fp-grid{
  display:grid;
  grid-template-columns:minmax(0,1fr);
  gap:1px;
  background:var(--rule);
  border:1px solid var(--rule);
}
.fp-grid>*{min-width:0}
@media (min-width:820px){
  .fp-grid{grid-template-columns:repeat(2,minmax(0,1fr))}
}

.fp-card{
  display:flex;
  flex-direction:column;
  background:var(--paper);
  text-decoration:none;
  color:inherit;
  transition:background 260ms var(--ease);
}
.fp-card:hover{background:#fff}

.fp-shot{
  position:relative;
  overflow:hidden;
  background:var(--ink);
}
.fp-shot img{
  display:block;
  width:100%;
  aspect-ratio:4/3;
  object-fit:cover;
  transition:transform 800ms var(--ease);
}
.fp-card:hover .fp-shot img{transform:scale(1.045)}

.fp-flag{
  position:absolute;
  top:0; left:0;
  display:flex; align-items:center; gap:.5rem;
  padding:.45rem .7rem;
  background:var(--red);
  color:#fff;
  font-family:var(--mono);
  font-size:9.5px;
  font-weight:700;
  letter-spacing:.16em;
  text-transform:uppercase;
}
.fp-flag.is-quiet{background:var(--ink)}

.fp-body{
  padding:clamp(1.1rem,2vw,1.6rem);
  display:flex;
  flex-direction:column;
  gap:.6rem;
  flex:1;
}
.fp-body .num{
  font-family:var(--mono);
  font-size:10.5px;
  letter-spacing:.16em;
  color:var(--red);
  font-weight:700;
  text-transform:uppercase;
}
.fp-body h3{font-size:1.28rem;letter-spacing:-.025em;margin:0}
.fp-body p{color:var(--fg-2);font-size:14.8px;line-height:1.62;margin:0}
.fp-body .fp-go{
  margin-top:auto;
  padding-top:.85rem;
  border-top:1px solid var(--rule);
  display:flex; align-items:center; justify-content:space-between;
  gap:1rem;
  font-family:var(--mono);
  font-size:10px;
  letter-spacing:.15em;
  text-transform:uppercase;
  color:var(--ink);
}
.fp-card:hover .fp-go span:last-child{transform:translateX(4px)}
.fp-go span:last-child{transition:transform 240ms var(--ease)}

/* Film band -------------------------------------------------------- */
.filmband{background:var(--ink);color:var(--fg-dk)}
.filmband .section-head h2{color:#fff}
.filmband .section-head p{color:var(--fg-dk-2)}
.filmband .eyebrow{color:var(--red-lift)}

.film-grid{
  display:grid;
  grid-template-columns:minmax(0,1fr);
  gap:clamp(1.6rem,3.5vw,3rem);
  align-items:center;
}
.film-grid>*{min-width:0}
@media (min-width:900px){
  .film-grid{grid-template-columns:340px minmax(0,1fr)}
}
@media (min-width:1080px){
  .film-grid{grid-template-columns:330px minmax(0,1fr)}
}

/* Same portrait window as the quoting-tool intro (.heroplay .screen):
   9:16, phone width, and the picture fills it. The file is already 720×1280,
   so contain shows every pixel and leaves no black margin. The column is a
   fixed width because the picture is absolutely positioned and has no
   intrinsic size for an auto column to use. */
.film-frame{
  position:relative;
  width:100%;
  max-width:340px;
  aspect-ratio:9/16;
  justify-self:center;
  overflow:hidden;
  background:#000;
  box-shadow:0 30px 70px -34px rgba(0,0,0,.9), 0 0 0 1px rgba(255,255,255,.14);
}
@media(min-width:1080px){
  .film-frame{max-width:330px}
}
.film-frame img,
.film-frame video{
  position:absolute; inset:0;
  width:100%; height:100%;
  display:block;
  background:#000;
  object-fit:contain;
}

.film-frame::after{
  content:"";
  position:absolute; inset:0;
  background:linear-gradient(rgba(11,14,18,.10),rgba(11,14,18,.62));
  pointer-events:none;
}
.film-frame.is-live::after,
.film-frame.is-live .film-badge,
.film-frame.is-live .film-poster,
.film-frame.is-live .film-play{display:none}

.film-play{
  position:absolute;
  inset:0;
  z-index:3;
  display:grid;
  place-items:center;
  margin:0;
  padding:0;
  border:0;
  background:transparent;
  color:#fff;
  cursor:pointer;
}
.film-play-face{
  display:inline-flex;
  align-items:center;
  gap:.55rem;
  padding:.9rem 1.3rem .9rem 1.05rem;
  background:var(--red);
  border-radius:999px;
  font-family:var(--mono);
  font-size:12px;
  font-weight:700;
  letter-spacing:.16em;
  text-transform:uppercase;
  box-shadow:0 16px 40px -12px rgba(0,0,0,.75);
}
.film-play svg{width:18px;height:18px;display:block}
.film-play:hover .film-play-face,
.film-play:focus-visible .film-play-face{background:var(--red-lift)}
.film-play:focus-visible{outline:none}
.film-play:focus-visible .film-play-face{outline:2px solid #fff;outline-offset:4px}
.film-play:disabled{cursor:progress}
.film-play:disabled .film-play-face{opacity:.85}

.film-badge{
  position:absolute;
  left:0; bottom:0;
  z-index:2;
  display:flex; align-items:center; gap:.55rem;
  padding:.55rem .8rem;
  background:rgba(11,14,18,.86);
  border-top:1px solid rgba(255,255,255,.16);
  border-right:1px solid rgba(255,255,255,.16);
  font-family:var(--mono);
  font-size:9.5px;
  letter-spacing:.16em;
  text-transform:uppercase;
  color:rgba(255,255,255,.92);
}
.film-badge .dot{
  width:6px; height:6px; flex:none;
  border-radius:50%;
  background:var(--red-lift);
}

.film-copy h3{color:#fff;font-size:1.3rem;letter-spacing:-.025em;margin:0 0 .7rem}
.film-copy p{color:var(--fg-dk-2);font-size:15px;line-height:1.68;margin:0 0 1rem}
.film-list{
  margin:0 0 1.4rem;
  padding:0;
  list-style:none;
  border-top:1px solid rgba(255,255,255,.14);
}
.film-list li{
  padding:.6rem 0;
  border-bottom:1px solid rgba(255,255,255,.14);
  display:flex; gap:.8rem; align-items:baseline;
  font-size:14.5px;
  color:var(--fg-dk-2);
}
.film-list li b{
  font-family:var(--mono);
  font-size:10px;
  letter-spacing:.15em;
  text-transform:uppercase;
  color:var(--red-lift);
  flex:none;
  min-width:3.4rem;
}