/* N · Framer project cards — a 1:1 copy of the published Framer cards (wild-palette-430926.framer.app).
   Every number below was measured from the live page. Breakpoints are Framer's own:
   Desktop ≥1660 · Laptop 1440–1659 · Tablet 810–1439 · Phone <810 (tablet and phone share the 360px card).
   Hover is Framer's spring (bounce .2, duration .4), reproduced as a CSS linear() curve. */
:root{--spring:linear(0 0%,.0475 3.3%,.1581 6.7%,.2959 10%,.4375 13.3%,.5691 16.7%,.6833 20%,.7775 23.3%,.8518 26.7%,.908 30%,.9487 33.3%,.977 36.7%,.9954 40%,1.0066 43.3%,1.0125 46.7%,1.0149 50%,1.015 53.3%,1.0137 56.7%,1.0118 60%,1.0096 63.3%,1.0076 66.7%,1.0057 70%,1.0041 73.3%,1.0028 76.7%,1.0018 80%,1.0011 83.3%,1.0006 86.7%,1.0002 90%,1 93.3%,.9998 96.7%,.9998 100%)}

/* ---------- grid ---------- */
.pc-grid{display:grid;grid-template-columns:repeat(2,740px);gap:28px}
.pc-grid>li{min-width:0}

/* ---------- the card ---------- */
.pc{--c:#19603b;position:relative;isolation:isolate;display:block;width:740px;height:582px;overflow:hidden;border-radius:23.33px;background:var(--c);color:#fff;text-decoration:none;-webkit-tap-highlight-color:transparent}
.pc-nbn{--c:#19603b}.pc-search{--c:#972666}.pc-data{--c:#685113}.pc-gyg{--c:#202ca7}.pc-indi{--c:#6e2593}
a.pc:focus-visible{outline:3px solid #fff;outline-offset:4px}

/* media: absolutely placed, animated with the spring on hover */
.pc-media{position:absolute;inset:0}
.m{position:absolute;display:block;overflow:hidden;border-radius:19.21px;transform-origin:50% 50%;
  transition:left .45s var(--spring),top .45s var(--spring),width .45s var(--spring),height .45s var(--spring),transform .45s var(--spring)}
.m img{display:block;width:100%;height:100%;object-fit:cover;object-position:50% 50%;user-select:none}
.m-strip-a,.m-strip-b,.m-t1,.m-t2,.m-t3{border-radius:0}
.m-group{overflow:visible;border-radius:0}
.m-group .m img{object-fit:fill}
.pc-nbn .m-sheet img{object-position:47.5% 0}
.pc-search .m-sheet img{object-position:49.2% 0}
.pc-data .m-front img{object-position:50.2% 2.1%}
/* data's back phones swap screenshots on hover; laptop has its own pair */
.m img[class^=sw-]{position:absolute;inset:0}
.sw-dh,.sw-l,.sw-lh{visibility:hidden}

.pc-roundel{position:absolute;z-index:1;left:648px;top:4px;width:104px;height:173px;pointer-events:none}
.pc-roundel svg{display:block;width:100%;height:100%}

/* the "Project in development!" pill sits behind the phone, exactly as on Framer */
.pc-status{position:absolute;left:396px;top:277px;width:260px;height:69px;display:grid;place-items:center;border-radius:17px;background:#fff;color:#000;font:italic 700 17px/20.4px var(--sans)}

/* ---------- copy ---------- */
.pc-copy{position:absolute;z-index:2;left:40px;top:33px;width:273px;display:flex;flex-direction:column;gap:16.47px}
.pc-tags{display:flex;gap:16px;height:18px}
.pc-tags li{display:grid;place-items:center;flex:none;width:110px;height:18px;border-radius:119.39px 124.88px 97.43px 122.13px;background:#fff;color:var(--c);font:italic 700 8.23px/1 var(--sans);white-space:nowrap}
.pc-gyg .pc-tags li{font-size:8px}
.pc-main{display:flex;flex-direction:column;gap:32px}
.pc-text{display:flex;flex-direction:column;gap:16px}
.pc-title{margin:0;font:500 54px/.92 'Playfair Display',Georgia,serif;letter-spacing:-.05em;color:#fff}
.pc-desc{font:400 18px/1.2 var(--sans);color:#fff}
.pc-stats{display:flex;gap:2px}
.pc-stats>div{width:120px}
.pc-stats dt{font:700 30px/1.1 var(--sans);color:#f7f1e8}
.pc-stats dd{width:102px;margin:6px 0 0;font:400 14px/.99 var(--sans);letter-spacing:-.01em;color:#fff}
.bp-l,.bp-t{display:none}

/* ---------- desktop (≥1660): 740 × 582 ---------- */
.pc-nbn .pc-title,.pc-nbn .pc-desc{width:274px}
.pc-search .pc-title,.pc-data .pc-title,.pc-gyg .pc-title,.pc-indi .pc-title{width:262px}
.pc-search .pc-desc,.pc-data .pc-desc,.pc-gyg .pc-desc{width:252px}
.pc-indi .pc-title{font-size:54px;line-height:.88;letter-spacing:-.08em}
.pc-indi .pc-desc{width:244px;font-size:20px;line-height:.99}
@media (min-width:1660px){.pc-indi .pc-text{gap:13px}}
.pc-nbn .m-sheet{left:309px;top:126px;width:426px;height:819px;transform:rotate(16deg)}
.pc-search .m-strip-a{left:401px;top:303px;width:256px;height:57px;transform:translateY(-28.4375px)}
.pc-search .m-strip-b{left:400px;top:197px;width:256px;height:64px}
.pc-search .m-sheet{left:344px;top:67px;width:369px;height:745px}
.pc-data .m-b1{left:389px;top:98px;width:260px;height:525px;transform:rotate(-3deg)}
.pc-data .m-b2{left:425px;top:93px;width:260px;height:525px;transform:rotate(3deg)}
.pc-data .m-front{left:402px;top:84px;width:267px;height:539px}
.pc-gyg .m-t1{left:392px;top:380px;width:124px;height:155px;transform:translateX(-62px) rotate(12deg)}
.pc-gyg .m-t2{left:474px;top:187px;width:111px;height:138px;transform:rotate(14deg)}
.pc-gyg .m-t3{left:558px;top:62px;width:123px;height:153px;transform:rotate(11deg)}
.pc-gyg .m-group{left:353px;top:37px;width:464px;height:960px;transform:rotate(36deg)}
.pc-gyg .m-p1{left:15px;top:-37px;width:218px;height:453px}
.pc-gyg .m-p2{left:15px;top:412px;width:218px;height:453px}
.pc-gyg .m-p3{left:230px;top:196px;width:219px;height:452px}
.pc-indi .m-phone{left:344px;top:27px;width:369px;height:745px}

@media (hover:hover) and (min-width:1660px){
  a.pc-nbn:hover .m-sheet{left:303px;top:82px;width:402px;height:773px}
  a.pc-search:hover .m-strip-a{left:339px;top:154px;transform:none}
  a.pc-search:hover .m-strip-b{left:463px;top:75px}
  a.pc-search:hover .m-sheet{top:257px}
  .pc-data:hover .m-b1{left:331px;top:72px;width:258px;height:521px;transform:rotate(-9deg)}
  .pc-data:hover .m-b2{left:489px;top:68px;transform:rotate(6deg)}
  .pc-data:hover .m-front{left:413px;top:236px;width:256px;height:517px}
  .pc-data:hover .sw-d{visibility:hidden}.pc-data:hover .sw-dh{visibility:visible}
  a.pc-gyg:hover .m-t1{left:268px;top:370px;transform:rotate(12deg)}
  a.pc-gyg:hover .m-t2{left:377px;top:268px;transform:translateY(-69.2188px) rotate(50deg)}
  a.pc-gyg:hover .m-t3{left:528px;top:42px;transform:rotate(-10deg)}
  a.pc-gyg:hover .m-group{left:433px;top:63px;width:411px;height:851px}
  a.pc-gyg:hover .m-p1{left:13px;top:-33px;width:193px;height:401px}
  a.pc-gyg:hover .m-p2{left:13px;top:366px;width:193px;height:401px}
  a.pc-gyg:hover .m-p3{left:204px;top:174px;width:194px;height:400px}
}

/* ---------- laptop (1440–1659): 625 × 582 ---------- */
@media (min-width:1440px) and (max-width:1659px){
  .pc-grid{grid-template-columns:repeat(2,625px)}
  .pc{width:625px}
  .bp-d{display:none}.bp-l{display:inline}
  .pc-roundel{left:533px}
  .pc-nbn .pc-title,.pc-data .pc-title{width:225px}
  .pc-search .pc-title{width:199px}
  .pc-nbn .pc-desc{width:200px}.pc-search .pc-desc{width:198px}.pc-data .pc-desc{width:237px}
  .pc-gyg .pc-title{width:262px;font-size:44px;line-height:.94;letter-spacing:-.05em}
  .pc-gyg .pc-desc{width:225px;font-size:14px;line-height:1.05}
  .pc-indi .pc-title{width:199px;font-size:44px;line-height:.88;letter-spacing:-.08em}
  .pc-indi .pc-desc{width:199px;font-size:14px;line-height:.99}
  .pc-stats>div{width:100px}
  .pc-stats dt{font-size:24px}
  .pc-stats dd{width:90px;margin-top:2px;font-size:10px;letter-spacing:-.01em}
  .pc-nbn .m-sheet{left:267px;top:149px;width:373px;height:717px;transform:rotate(21deg)}
  .pc-search .m-strip-a{left:306px;top:307px;width:256px;height:57px;transform:none}
  .pc-search .m-strip-b{left:305px;top:227px}
  .pc-search .m-sheet{left:278px;top:110px;width:323px;height:652px}
  .pc-data .m-b1{left:324px;top:150px;width:235px;height:474px}
  .pc-data .m-b2{left:360px;top:150px;width:235px;height:474px}
  .pc-data .m-front{left:335px;top:135px;width:242px;height:489px}
  .pc-data .sw-d{visibility:hidden}.pc-data .sw-l{visibility:visible}
  .pc-gyg .m-t1{left:331px}.pc-gyg .m-t2{left:359px}.pc-gyg .m-t3{left:443px}
  .pc-gyg .m-group{left:238px}
  .pc-indi .m-phone{left:278px;top:80px;width:323px;height:652px}
  .pc-indi .m-phone img{object-fit:contain}
  .pc-status{left:311px}
}
@media (hover:hover) and (min-width:1440px) and (max-width:1659px){
  a.pc-nbn:hover .m-sheet{left:252px;top:84px;transform:rotate(12deg)}
  a.pc-search:hover .m-strip-a{left:253px;top:146px}
  a.pc-search:hover .m-strip-b{left:360px;top:75px}
  a.pc-search:hover .m-sheet{top:250px}
  .pc-data:hover .m-b1{left:291px;top:64px;width:258px;height:521px;transform:rotate(-6deg)}
  .pc-data:hover .m-b2{left:415px;top:68px;width:258px;height:521px;transform:rotate(3deg)}
  .pc-data:hover .m-front{left:348px;top:208px;width:232px;height:468px}
  .pc-data:hover .sw-l{visibility:hidden}.pc-data:hover .sw-lh{visibility:visible}
}

/* ---------- tablet and phone (<1440): 360 × 582 ---------- */
@media (max-width:1439px){
  .pc-grid{grid-template-columns:repeat(2,360px)}
  .pc{width:360px}
  .bp-d{display:none}.bp-t{display:inline}
  .pc-copy{left:29.5px}
  .pc-main{gap:16px}
  .pc-title{font-size:44px;line-height:.94;letter-spacing:-.05em}
  .pc-desc{font-size:14px;line-height:1.05}
  .pc-nbn .pc-title{width:245px}.pc-search .pc-title{width:226px}.pc-data .pc-title{width:203px}.pc-gyg .pc-title{width:228px}
  .pc-nbn .pc-desc,.pc-search .pc-desc{width:274px}.pc-data .pc-desc{width:183px}.pc-gyg .pc-desc{width:188px}
  .pc-indi .pc-title{width:226px;font-size:44px;line-height:.88;letter-spacing:-.08em}
  .pc-indi .pc-desc{width:248px;font-size:14px;line-height:.99}
  .pc-stats dt{font-size:24px}
  .pc-stats dd{width:108px;margin-top:2px;font-size:10px}
  .pc-data .pc-stats{flex-direction:column;gap:22px}
  .pc-roundel{left:288px}
  .pc-nbn .pc-roundel{left:290px;width:105px;height:175px}
  .pc-data .pc-roundel{left:268px}.pc-gyg .pc-roundel{left:298px}
  .pc-nbn .m-sheet{left:-44px;top:325px;width:299px;height:575px;transform:rotate(28deg)}
  .pc-search .m-strip-a,.pc-search .m-strip-b,.pc-data .m-b1,.pc-data .m-b2,.pc-gyg .m-t1,.pc-gyg .m-t2,.pc-gyg .m-t3{display:none}
  .pc-search .m-sheet{left:30.5px;top:347px;width:299px;height:604px}
  .pc-data .m-front{left:169px;top:232px;width:242px;height:489px;transform:rotate(18deg)}
  .pc-gyg .m-group{left:98px;top:174px;width:318px;height:658px;transform:rotate(35deg)}
  .pc-gyg .m-p1{left:10px;top:-25px;width:149px;height:311px}
  .pc-gyg .m-p2{left:10px;top:282px;width:149px;height:311px}
  .pc-gyg .m-p3{left:158px;top:134px;width:150px;height:310px}
  .pc-indi .m-phone{left:30.5px;top:201px;width:299px;height:604px}
  .pc-status{left:90px;top:333px;width:178px;height:43px;border-radius:12.23px;font-size:12px;line-height:14.4px}
}
@media (max-width:809px){
  .pc-grid{grid-template-columns:360px}
}
/* below Framer's smallest layout the 360px card scales down rather than scrolling sideways (WCAG 1.4.10) */
.pc-fit>.pc{transform-origin:0 0}
@media (max-width:389px){.pc-grid{grid-template-columns:minmax(0,1fr)}.pc-fit{width:100%;max-width:360px;overflow:hidden}}

@media (prefers-reduced-motion:reduce){.m{transition:none}}
@media (forced-colors:active){.pc{border:2px solid CanvasText}.pc-tags li{border:1px solid CanvasText}}

/* ---------- breathing room ----------
   Framer's cards set the copy tight (8px tags, .92 titles, 1.2 body, .99 stat labels). These keep the same fonts,
   imagery and positions but give the copy room: a larger inset, readable tags, open leading and real gaps. */
.pc .pc-copy{left:44px;top:44px;gap:26px}
.pc .pc-tags{gap:8px;height:auto}
.pc .pc-tags li{width:auto;height:26px;padding:0 12px;border-radius:999px;font:600 10.5px/1 var(--sans);letter-spacing:.06em}
.pc .pc-main{gap:30px}
.pc .pc-text{gap:18px}
.pc .pc-title{font-size:46px;line-height:1;letter-spacing:-.035em}
.pc .pc-desc{font-size:16px;line-height:1.45;color:rgba(255,255,255,.86)}
.pc .pc-stats{gap:28px}
.pc .pc-stats>div{width:auto;max-width:120px}
.pc .pc-stats dt{font-size:28px;line-height:1}
.pc .pc-stats dd{width:auto;margin-top:8px;font-size:12.5px;line-height:1.3;letter-spacing:0;color:rgba(255,255,255,.8)}
.pc-indi .pc-title{letter-spacing:-.04em}
@media (min-width:1440px) and (max-width:1659px){
  .pc .pc-copy{left:40px;top:40px}
  .pc .pc-title{font-size:40px}
  .pc .pc-desc{font-size:15px}
  .pc .pc-stats dt{font-size:24px}
  .pc .pc-stats{gap:20px}
  .pc .pc-stats>div{max-width:100px}
  .pc .pc-stats dd{font-size:11.5px}
}
/* the 360px card: copy on top, so the imagery moves down to make room for it */
@media (max-width:1439px){
  .pc .pc-copy{left:28px;top:30px;right:28px;width:auto;gap:20px}
  .pc .pc-tags li{height:24px;padding:0 10px;font-size:9.5px}
  .pc .pc-main{gap:22px}
  .pc .pc-text{gap:12px}
  .pc .pc-title{font-size:36px;line-height:1.02}
  .pc .pc-desc{font-size:14px;line-height:1.4}
  .pc .pc-stats dt{font-size:22px}
  .pc .pc-stats dd{margin-top:6px;font-size:11px}
  .pc-data .pc-stats{gap:16px}
  .pc .pc-media{top:56px;bottom:-56px}
  .pc-indi .pc-media,.pc-gyg .pc-media{top:30px;bottom:-30px}
}