.pf-section { --pf-surface: #0b130b; }
.pf-card[hidden], .pf-filter[hidden], .pf-modal-info[hidden], .pf-modal-help[hidden] { display: none; }
.pf-grid { grid-template-columns: repeat(4,minmax(0,1fr)); }
.pf-saas-grid { grid-template-columns: repeat(2,minmax(0,1fr)); }
.pf-card { background: var(--pf-surface); transition: border-color .2s ease; }
.pf-card:hover { transform: none; border-color: var(--green); }
.pf-card .video-preview { transition: transform .25s ease; }
.pf-card .motion-poster:hover .video-preview, .pf-card .motion-poster:focus-visible .video-preview { transform: scale(1.04); }
.pf-card .motion-poster:focus-visible { z-index: 1; }
.pf-card-copy { align-content: start; grid-template-rows: auto auto 1fr auto; gap: .55rem; flex: 1; }
.pf-grid .pf-card { display: flex; flex-direction: column; }
.pf-grid .pf-card[hidden] { display: none; }
.pf-card-copy h3 { font-size: 1.02rem; }
.pf-card-copy p { font-size: .84rem; line-height: 1.5; }
.pf-card-copy .btn { min-height: 44px; color: #fff; padding: .45rem .85rem; }
.pf-badge { color: var(--green-2); font-size: .68rem; font-weight: 800; letter-spacing: .08em; text-transform: uppercase; }
.pf-feature { display: grid; grid-template-columns: minmax(0,1fr) minmax(0,1fr); align-items: center; margin-top: 1.4rem; min-height: 15rem; }
.pf-feature .motion-frame { max-width: 100%; }
.pf-feature:not(:has(.motion-frame-wide)) { grid-template-columns: minmax(0, 19rem) minmax(0, 1fr); }
.pf-feature .pf-card-copy { padding: clamp(1rem,4vw,3rem); gap: .9rem; }
.pf-feature h3 { font-family: "Space Grotesk",sans-serif; font-size: clamp(1.4rem,3vw,2.55rem); }
.pf-feature p { font-size: 1rem; }
.pf-filter { display: flex; flex-wrap: wrap; gap: .55rem; margin-top: 1.5rem; }
.pf-filter .btn { color: #fff; min-height: 44px; padding: .55rem .9rem; background: #111a10; border: 1px solid var(--line); }
.pf-filter .btn[aria-pressed="true"] { border-color: var(--green-2); background: #163619; font-weight: 800; }
.pf-filter .btn[aria-pressed="true"]::before { content: "✓"; margin-right: .25rem; }
.pf-sr { position: absolute; width: 1px; height: 1px; overflow: hidden; clip-path: inset(50%); white-space: nowrap; }
.pf-inquiry { text-align: center; margin-top: clamp(2.8rem,6vw,5rem); padding: clamp(1.5rem,5vw,3.5rem) 1rem; border: 1px solid var(--line); border-radius: 1.4rem; background: #0e1a0d; }
.pf-inquiry p { margin: 0 auto 1.25rem; }
.pf-inquiry .btn { min-height: 46px; }
.video-modal.pf-project-open .video-modal-dialog { flex-direction: column; gap: .65rem; align-items: stretch; width: min(960px,92vw,126vh); }
.video-modal.pf-project-open .video-modal-dialog.vertical { width: min(360px,88vw,max(200px,39vh)); }
.video-modal.pf-project-open .modal-close { top: 0; right: 0; }
.pf-modal-info { padding-right: 3.25rem; min-height: 46px; }
.pf-modal-info span { color: var(--green-2); font-size: .72rem; }
.pf-modal-info h2 { font-size: clamp(1rem,3vw,1.35rem); line-height: 1.2; }
.pf-modal-help { display: flex; gap: .65rem; justify-content: space-between; flex-wrap: wrap; font-size: .75rem; }
.pf-modal-help a { color: var(--green-2); text-decoration: underline; }
.pf-section :focus-visible, .pf-inquiry :focus-visible, .pf-project-open :focus-visible { outline: 2px solid var(--green-2); outline-offset: 2px; }
@media (max-width: 1050px) { .pf-grid:not(.pf-saas-grid) { grid-template-columns: repeat(3,minmax(0,1fr)); } }
@media (max-width: 900px) { .motion-library:has(.pf-section) .motion-story { grid-template-columns: minmax(0,1fr); } }
@media (max-width: 760px) { .pf-grid:not(.pf-saas-grid) { grid-template-columns: repeat(2,minmax(0,1fr)); } }
@media (max-width: 550px) {
  .pf-saas-grid, .pf-feature, .pf-feature:not(:has(.motion-frame-wide)) { grid-template-columns: minmax(0,1fr); }
  .pf-feature:not(:has(.motion-frame-wide)) .motion-frame { width: min(100%,15rem); justify-self: center; }
  .pf-feature .pf-card-copy { padding: 1rem; }
  .pf-card-copy .btn { font-size: .75rem; padding-inline: .55rem; }
}
@media (prefers-reduced-motion: reduce) { .pf-card, .pf-card .video-preview { transition: none; } }

/* Featured AI UGC project: compact media and a short creative breakdown. */
.pf-feature.pf-feature-ugc {
  grid-template-columns: minmax(0, 14rem) minmax(0, 1fr);
  gap: clamp(1rem, 3vw, 2.75rem);
  padding: clamp(.85rem, 2vw, 1.65rem);
  min-height: 0;
  background: linear-gradient(116deg, #101c10, #0c140c 65%);
  border-color: #2a4528;
}
.pf-feature-ugc .motion-frame { border: 1px solid var(--line); border-radius: 1rem; min-height: 0; }
.pf-feature-ugc .pf-card-copy { padding: .45rem clamp(.1rem, 1vw, 1rem) .45rem 0; gap: .85rem; grid-template-rows: none; }
.pf-ugc-labels { display: flex; align-items: center; flex-wrap: wrap; gap: .65rem; }
.pf-ugc-feature-label { padding: .28rem .57rem; border: 1px solid #355633; border-radius: 2rem; color: #f1faee; font-size: .68rem; font-weight: 800; text-transform: uppercase; letter-spacing: .08em; }
.pf-feature-ugc .pf-card-copy > p { max-width: 54ch; color: #cbd8c9; }
.pf-ugc-notes { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: .55rem; margin: .2rem 0 .45rem; max-width: 38rem; }
.pf-ugc-notes div { min-width: 0; border: 1px solid #2a4428; border-radius: .7rem; padding: .65rem .75rem; background: #111e10; }
.pf-ugc-notes dt { font-size: .67rem; color: #a9c4a6; text-transform: uppercase; letter-spacing: .05em; }
.pf-ugc-notes dd { margin: .18rem 0 0; color: #f5fbf4; font-weight: 800; font-size: .88rem; }
.pf-filter .btn:hover { border-color: #80de72; }
@media (max-width: 650px) {
  .pf-feature.pf-feature-ugc { grid-template-columns: minmax(0, 1fr); }
  .pf-feature.pf-feature-ugc .motion-frame { width: min(100%, 11rem); justify-self: center; }
  .pf-feature-ugc .pf-card-copy { padding: 0; }
  .pf-ugc-notes div { padding: .5rem .42rem; }
  .pf-ugc-notes dd { font-size: .75rem; }
}