/* James's original Framer project card. All sizes scale with the card width (cqw). */
.fcw{container-type:inline-size}
.fc{--t:#2f5d3a;position:relative;display:block;overflow:hidden;isolation:isolate;aspect-ratio:738/578;border-radius:max(16px,3cqw);background:var(--t);color:#fff;text-decoration:none;-webkit-tap-highlight-color:transparent}
.fc-copy{position:relative;z-index:2;display:flex;flex-direction:column;height:100%;width:47%;padding:4.6cqw 0 5cqw 5.4cqw}
.fc-tags{display:flex;flex-wrap:wrap;gap:1.1cqw;margin-bottom:3.4cqw}
.fc-tags li{font:italic 700 max(9px,1.25cqw)/1 'Inter',system-ui,sans-serif;letter-spacing:.04em;text-transform:uppercase;padding:max(5px,.8cqw) max(10px,1.9cqw);border-radius:999px;background:#fff;color:var(--t)}
.fc-title{font:500 max(28px,6.4cqw)/.98 'Playfair Display',Georgia,serif;letter-spacing:-.025em;margin:0 0 2.6cqw;text-wrap:balance}
.fc-desc{font:400 max(14px,2.3cqw)/1.32 'Inter',system-ui,sans-serif;letter-spacing:-.005em;max-width:24em;opacity:.96}
.fc-m{display:flex;gap:3cqw;margin-top:auto;padding-top:3cqw}
.fc-m dt{font:600 max(20px,3.9cqw)/1 'Inter',system-ui,sans-serif;letter-spacing:-.03em}
.fc-m dd{margin:.8cqw 0 0;font:400 max(11px,1.5cqw)/1.25 'Inter',system-ui,sans-serif;opacity:.82;max-width:10em}
.fc-status{margin-top:auto;align-self:flex-start;font:italic 700 max(10px,1.4cqw)/1 'Inter',system-ui,sans-serif;text-transform:uppercase;letter-spacing:.04em;padding:1cqw 2cqw;border-radius:999px;background:#fff;color:var(--t)}
.fc-mark{position:absolute;z-index:1;right:-5cqw;top:-5cqw;width:24cqw;aspect-ratio:1;color:#fff;opacity:.16}
/* media */
.fm{position:absolute;inset:0;z-index:1;pointer-events:none}
.fm img{position:absolute;max-width:none;transition:transform .9s cubic-bezier(.2,.7,.2,1)}
.fm-sheet{position:absolute;overflow:hidden;background:#fff;transition:transform .9s cubic-bezier(.2,.7,.2,1)}
.fm-sheet img{position:static;width:100%}
.fm-nbn .fm-sheet{left:64%;top:12%;width:68%;height:120%;border-radius:2.4cqw;transform-origin:0 0;transform:rotate(14deg);box-shadow:0 2cqw 6cqw rgba(0,0,0,.28)}
.fm-search .fm-sheet{left:46.5%;top:11.5%;width:50%;height:100%;border-radius:2.2cqw 2.2cqw 0 0}
.fm-data img{width:37%;top:14%}
.fm-data .f{left:54%}
.fm-data .b1{left:51.5%;top:16%;filter:brightness(.7)}
.fm-data .b2{left:56.5%;top:16%;filter:brightness(.7)}
.fm-indi .f{left:49%;top:11%;width:44%}
.fm-gyg .fm-rot{position:absolute;left:55%;top:-14%;width:48%;height:130%;transform:rotate(24deg);transform-origin:50% 50%}
.fm-gyg img{filter:drop-shadow(0 1.2cqw 2.4cqw rgba(0,0,0,.25))}
.fm-gyg .p1{width:50%;left:46%;top:2%}
.fm-gyg .p2{width:50%;left:18%;top:52%}
.fm-gyg .p3{width:50%;left:70%;top:46%}
.fm-gyg .t1,.fm-gyg .t2,.fm-gyg .t3{width:24%;border-radius:1.2cqw}
.fm-gyg .t1{left:18%;top:12%}.fm-gyg .t2{left:12%;top:28%}.fm-gyg .t3{left:22%;top:40%}
/* hover: the work rises, nothing else moves */
a.fc:hover .fm-sheet,a.fc:focus-visible .fm-sheet{transform:translateY(-1.6cqw)}
a.fc:hover .fm-nbn .fm-sheet,a.fc:focus-visible .fm-nbn .fm-sheet{transform:rotate(12deg) translateY(-1.6cqw)}
a.fc:hover .fm img,a.fc:focus-visible .fm img{transform:translateY(-1.6cqw)}
a.fc:focus-visible{outline:3px solid #fff;outline-offset:-6px}

/* Framer phone layout: portrait card, copy on top, mockups below */
@container (max-width:520px){
  .fc{aspect-ratio:auto;display:flex;flex-direction:column;border-radius:22px}
  .fc-copy{width:100%;height:auto;padding:24px 24px 0}
  .fc-tags{gap:8px;margin-bottom:18px}
  .fc-tags li{font-size:10px;padding:6px 12px}
  .fc-title{font-size:max(32px,10.5cqw);margin-bottom:12px}
  .fc-desc{font-size:15px;max-width:none}
  .fc-m{margin-top:16px;padding-top:0;gap:22px}
  .fc-m dt{font-size:22px}.fc-m dd{font-size:11px}
  .fc-status{margin-top:16px}
  .fc-mark{width:36cqw;right:-8cqw;top:-8cqw}
  .fm{position:relative;inset:auto;flex:none;height:68cqw;margin-top:8px;overflow:hidden}
  .fm-nbn .fm-sheet{left:28%;top:12%;width:90%;height:150%}
  .fm-search .fm-sheet{left:18%;top:8%;width:76%;height:120%}
  .fm-data img{width:52%;top:6%}.fm-data .f{left:36%}.fm-data .b1{left:31%;top:9%}.fm-data .b2{left:41%;top:9%}
  .fm-indi .f{left:24%;top:6%;width:56%}
  .fm-gyg .fm-rot{left:26%;top:-30%;width:80%;height:200%}
}
@media (prefers-reduced-motion:reduce){.fm img,.fm-sheet{transition:none}}