
.cffg,.cffg *{box-sizing:border-box}
.cffg{
  --cffg-edge:clamp(18px,3vw,48px);
  --cffg-gap:6px;
  width:100%;
  padding:clamp(54px,7vw,96px) var(--cffg-edge);
  background:#050505;
  color:#fff;
  overflow:hidden;
  -webkit-tap-highlight-color:transparent;
}
.cffg-header{max-width:1000px;margin:0 auto clamp(28px,4vw,48px);text-align:center}
.cffg-eyebrow{margin:0 0 12px;color:#d52b1e;font-size:.72rem;font-weight:800;letter-spacing:.17em;text-transform:uppercase}
.cffg-header h2{margin:0!important;color:#fff!important;font-size:clamp(2.7rem,5.4vw,5.6rem)!important;line-height:.94!important;font-weight:500!important;letter-spacing:-.045em!important}
.cffg-intro{max-width:760px;margin:16px auto 0;color:rgba(255,255,255,.62);font-size:clamp(.95rem,1.15vw,1.08rem);line-height:1.55}
.cffg-grid{display:grid;grid-template-columns:repeat(4,minmax(0,1fr));gap:var(--cffg-gap)}
.cffg-card{
  position:relative;
  display:block;
  min-width:0;
  aspect-ratio:1.18/1;
  overflow:hidden;
  background:#111;
  color:#fff!important;
  text-decoration:none!important;
  isolation:isolate;
}
.cffg-image,.cffg-video{
  position:absolute;inset:0;width:100%;height:100%;object-fit:cover;display:block;
  transition:opacity .28s ease,transform .7s cubic-bezier(.2,.75,.25,1);
}
.cffg-video{opacity:0;background:#000}
.cffg-card.is-playing .cffg-video{opacity:1}
.cffg-card.is-playing .cffg-image{opacity:0}
.cffg-card:hover .cffg-image,.cffg-card:hover .cffg-video{transform:scale(1.035)}
.cffg-shade{position:absolute;inset:0;z-index:1;background:linear-gradient(180deg,rgba(0,0,0,.06) 0%,rgba(0,0,0,.08) 38%,rgba(0,0,0,.86) 100%)}
.cffg-number{
  position:absolute;top:12px;left:14px;z-index:2;
  color:rgba(255,255,255,.5);
  font-family:Georgia,serif;
  font-size:clamp(2.2rem,4vw,4rem);
  line-height:1;
  font-weight:400;
}
.cffg-copy{position:absolute;left:16px;right:16px;bottom:16px;z-index:3;display:flex;flex-direction:column;align-items:flex-start}
.cffg-category{margin-bottom:6px;color:#f04437;font-size:.61rem;font-weight:800;letter-spacing:.11em;text-transform:uppercase}
.cffg-copy strong{
  display:block;max-width:92%;color:#fff;font-family:Georgia,serif;
  font-size:clamp(1.2rem,1.75vw,2rem);font-weight:400;line-height:1.02;letter-spacing:-.02em
}
.cffg-project-link{margin-top:12px;color:rgba(255,255,255,.72);font-size:.64rem;font-weight:700;letter-spacing:.08em;text-transform:uppercase}
.cffg-project-link b{margin-left:8px;color:#e42b20;font-size:1rem;font-weight:400}
.cffg-card:focus-visible{outline:2px solid #fff;outline-offset:-3px}
.cffg-footer{display:flex;justify-content:center;padding-top:clamp(28px,4vw,46px)}
.cffg-view-all{
  display:inline-flex;align-items:center;justify-content:center;gap:12px;min-height:48px;padding:0 22px;
  border:1px solid #9b7425;color:#fff!important;text-decoration:none!important;
  font-size:.72rem;font-weight:800;letter-spacing:.11em;text-transform:uppercase
}
.cffg-view-all span{color:#e42b20;font-size:1.1rem}
.cffg-empty{padding:18px;background:#111;color:#fff}
@media(max-width:980px){
  .cffg-grid{grid-template-columns:repeat(2,minmax(0,1fr));gap:8px}
  .cffg-card{aspect-ratio:1.15/1}
}
@media(max-width:620px){
  .cffg{
    --cffg-edge:10px;
    padding-top:44px;
    padding-bottom:54px;
  }
  .cffg-header{text-align:left;margin-bottom:24px;padding:0 4px}
  .cffg-header h2{font-size:clamp(2.35rem,11vw,4rem)!important}
  .cffg-intro{font-size:.9rem}
  .cffg-grid{grid-template-columns:repeat(2,minmax(0,1fr));gap:6px}
  .cffg-card{aspect-ratio:.92/1}
  .cffg-number{top:8px;left:10px;font-size:2.35rem}
  .cffg-copy{left:10px;right:10px;bottom:10px}
  .cffg-category{font-size:.5rem;letter-spacing:.08em}
  .cffg-copy strong{font-size:clamp(1rem,4.6vw,1.3rem)}
  .cffg-project-link{margin-top:8px;font-size:.52rem}
  .cffg-footer{padding-top:24px}
  .cffg-view-all{width:100%;max-width:360px}
}
@media(hover:none),(pointer:coarse){
  .cffg-video{display:none}
  .cffg-card:hover .cffg-image{transform:none}
}
@media(prefers-reduced-motion:reduce){
  .cffg-image,.cffg-video{transition:none!important}
  .cffg-card:hover .cffg-image,.cffg-card:hover .cffg-video{transform:none}
}
