/* N project cards: Summer's white card, reversed. A warm-white frame holds the panel on top and the coloured
   window of mockups below. */
.nc-grid{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:clamp(18px,2.2vw,32px);align-items:stretch;margin:0;padding:0;list-style:none}
.ncw{container-type:inline-size;height:100%}
.nc{--R:22px;--paper:#fbf8f3;--ink:#23110a;--body:#5a3d2f;--frame:clamp(10px,2.2cqw,14px);
  position:relative;display:flex;flex-direction:column;height:100%;padding:0 var(--frame) var(--frame);border-radius:32px;background:var(--paper);color:var(--ink);text-decoration:none;
  box-shadow:0 1px 2px rgba(0,0,0,.2),0 24px 48px -20px rgba(0,0,0,.6);transition:transform .45s cubic-bezier(.3,1.4,.5,1),rotate .45s cubic-bezier(.3,1.4,.5,1),box-shadow .45s}
.nc-body{position:relative;z-index:2;display:flex;flex-direction:column;padding:clamp(24px,7cqw,40px) clamp(14px,4.5cqw,26px) clamp(22px,5cqw,30px);background:var(--paper);border-radius:22px 22px 0 0}
.nc-tags{display:flex;flex-wrap:wrap;gap:8px;margin:0 0 clamp(18px,4cqw,26px);padding:0;list-style:none}
.nc-tags li{padding:8px 14px;border:1.5px solid var(--ink);border-radius:999px;font:600 11.5px/1 var(--read);letter-spacing:.05em}
.nc-title{margin:0 0 12px;padding-right:8px;font:700 max(28px,6.4cqw)/1.02 var(--display);letter-spacing:-.04em;color:var(--ink);text-wrap:balance}
.nc-desc{max-width:52ch;font:400 15.5px/1.55 var(--read);color:var(--body)}
.nc-m{display:grid;grid-auto-flow:column;grid-auto-columns:minmax(0,1fr);gap:10px;margin:22px 0 0}
.nc-m div{padding:16px 16px 18px;border-radius:20px;background:#fff;box-shadow:inset 0 0 0 1.5px rgba(35,17,10,.1)}
.nc-m dt{font:700 max(30px,6.6cqw)/1 var(--display);letter-spacing:-.045em}
.nc-m dd{margin:10px 0 0;font:500 13px/1.35 var(--read);color:var(--body)}
@container (max-width:380px){.nc-m{grid-auto-flow:row;grid-template-columns:minmax(0,1fr)}}
.nc-status{align-self:flex-start;margin-top:22px;padding:10px 18px;border-radius:999px;background:var(--t);color:#fff;font:600 13px/1 var(--read)}
/* the coloured window of mockups */
.nc-media{position:relative;flex:1 0 auto;min-height:0;aspect-ratio:16/10;overflow:hidden;isolation:isolate;border-radius:22px;background:var(--t)}

/* ---------- the window: the Framer card's mockup stage ----------
   Positions are Framer's desktop measurements (px on a 740 × 582 card) times --u, a unit that scales the stage to
   the window: the 582px card height maps to the window height (zoomed a little), and the stage is centred on the
   mockups. Hover runs Framer's spring (bounce .2, duration .4). */
.nc{--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%);
  --u:calc((100cqw - 2 * var(--frame)) * .625 * 1.15 / 582)}
@media (max-width:760px){.nc{--u:calc((100cqw - 2 * var(--frame)) * .6667 * 1.1 / 582)}}
.nc-stage{position:absolute;z-index:1;left:calc(50% - 530 * var(--u));top:0;width:calc(740 * var(--u));height:calc(582 * var(--u));pointer-events:none}
.nc-stage .m{position:absolute;display:block;overflow:hidden;border-radius:calc(19.21 * var(--u));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)}
.nc-stage .m img{display:block;width:100%;height:100%;object-fit:cover;object-position:50% 50%;user-select:none}
.nc-stage .m-strip-a,.nc-stage .m-strip-b,.nc-stage .m-t1,.nc-stage .m-t2,.nc-stage .m-t3{border-radius:0}
.nc-stage .m-group{overflow:visible;border-radius:0}
.nc-stage .m-group .m img{object-fit:fill}
.nc-nbn .m-sheet img{object-position:47.5% 0}
.nc-search .m-sheet img{object-position:49.2% 0}
.nc-data .m-front img{object-position:50.2% 2.1%}
.nc-stage .m img.sw-d,.nc-stage .m img.sw-dh{position:absolute;inset:0}
.nc-stage .sw-dh{visibility:hidden}
.nc-nbn .m-sheet{left:calc(309 * var(--u));top:calc(126 * var(--u));width:calc(426 * var(--u));height:calc(819 * var(--u));transform:rotate(16deg)}
.nc-search .m-strip-a{left:calc(401 * var(--u));top:calc(303 * var(--u));width:calc(256 * var(--u));height:calc(57 * var(--u));transform:translateY(calc(-28.4375 * var(--u)))}
.nc-search .m-strip-b{left:calc(400 * var(--u));top:calc(197 * var(--u));width:calc(256 * var(--u));height:calc(64 * var(--u))}
.nc-search .m-sheet{left:calc(344 * var(--u));top:calc(67 * var(--u));width:calc(369 * var(--u));height:calc(745 * var(--u))}
.nc-data .m-b1{left:calc(389 * var(--u));top:calc(98 * var(--u));width:calc(260 * var(--u));height:calc(525 * var(--u));transform:rotate(-3deg)}
.nc-data .m-b2{left:calc(425 * var(--u));top:calc(93 * var(--u));width:calc(260 * var(--u));height:calc(525 * var(--u));transform:rotate(3deg)}
.nc-data .m-front{left:calc(402 * var(--u));top:calc(84 * var(--u));width:calc(267 * var(--u));height:calc(539 * var(--u))}
.nc-gyg .m-t1{left:calc(392 * var(--u));top:calc(380 * var(--u));width:calc(124 * var(--u));height:calc(155 * var(--u));transform:translateX(calc(-62 * var(--u))) rotate(12deg)}
.nc-gyg .m-t2{left:calc(474 * var(--u));top:calc(187 * var(--u));width:calc(111 * var(--u));height:calc(138 * var(--u));transform:rotate(14deg)}
.nc-gyg .m-t3{left:calc(558 * var(--u));top:calc(62 * var(--u));width:calc(123 * var(--u));height:calc(153 * var(--u));transform:rotate(11deg)}
.nc-gyg .m-group{left:calc(353 * var(--u));top:calc(37 * var(--u));width:calc(464 * var(--u));height:calc(960 * var(--u));transform:rotate(36deg)}
.nc-gyg .m-p1{left:calc(15 * var(--u));top:calc(-37 * var(--u));width:calc(218 * var(--u));height:calc(453 * var(--u))}
.nc-gyg .m-p2{left:calc(15 * var(--u));top:calc(412 * var(--u));width:calc(218 * var(--u));height:calc(453 * var(--u))}
.nc-gyg .m-p3{left:calc(230 * var(--u));top:calc(196 * var(--u));width:calc(219 * var(--u));height:calc(452 * var(--u))}
.nc-indi .m-phone{left:calc(344 * var(--u));top:calc(27 * var(--u));width:calc(369 * var(--u));height:calc(745 * var(--u))}
@media (hover:hover){
  .nc-nbn:hover .m-sheet{left:calc(303 * var(--u));top:calc(82 * var(--u));width:calc(402 * var(--u));height:calc(773 * var(--u))}
  .nc-search:hover .m-strip-a{left:calc(339 * var(--u));top:calc(154 * var(--u));transform:none}
  .nc-search:hover .m-strip-b{left:calc(463 * var(--u));top:calc(75 * var(--u))}
  .nc-search:hover .m-sheet{top:calc(257 * var(--u))}
  .nc-data:hover .m-b1{left:calc(331 * var(--u));top:calc(72 * var(--u));width:calc(258 * var(--u));height:calc(521 * var(--u));transform:rotate(-9deg)}
  .nc-data:hover .m-b2{left:calc(489 * var(--u));top:calc(68 * var(--u));transform:rotate(6deg)}
  .nc-data:hover .m-front{left:calc(413 * var(--u));top:calc(236 * var(--u));width:calc(256 * var(--u));height:calc(517 * var(--u))}
  .nc-data:hover .sw-d{visibility:hidden}.nc-data:hover .sw-dh{visibility:visible}
  .nc-gyg:hover .m-t1{left:calc(268 * var(--u));top:calc(370 * var(--u));transform:rotate(12deg)}
  .nc-gyg:hover .m-t2{left:calc(377 * var(--u));top:calc(268 * var(--u));transform:translateY(calc(-69.2188 * var(--u))) rotate(50deg)}
  .nc-gyg:hover .m-t3{left:calc(528 * var(--u));top:calc(42 * var(--u));transform:rotate(-10deg)}
  .nc-gyg:hover .m-group{left:calc(433 * var(--u));top:calc(63 * var(--u));width:calc(411 * var(--u));height:calc(851 * var(--u))}
  .nc-gyg:hover .m-p1{left:calc(13 * var(--u));top:calc(-33 * var(--u));width:calc(193 * var(--u));height:calc(401 * var(--u))}
  .nc-gyg:hover .m-p2{left:calc(13 * var(--u));top:calc(366 * var(--u));width:calc(193 * var(--u));height:calc(401 * var(--u))}
  .nc-gyg:hover .m-p3{left:calc(204 * var(--u));top:calc(174 * var(--u));width:calc(194 * var(--u));height:calc(400 * var(--u))}
}
a.nc:hover,a.nc:focus-visible{transform:translateY(-8px) scale(1.01);box-shadow:0 2px 4px rgba(0,0,0,.2),0 40px 70px -24px rgba(0,0,0,.75)}
a.nc:focus-visible{outline:3px solid var(--cream,#f4efe6);outline-offset:4px}
@media (prefers-reduced-motion:reduce){.nc,.nc-stage .m{transition:none}a.nc:hover,a.nc:focus-visible{transform:none}}
@media (max-width:900px){.nc-grid{grid-template-columns:1fr}}
@media (max-width:760px){.nc-media{aspect-ratio:3/2}}
@media (forced-colors:active){.nc{border:2px solid CanvasText}}
/* the grid fills the page column (the Framer cards were fixed-width, so the column was shrink-wrapped) */
.page .projects{align-self:stretch;align-items:stretch}
.page .projects .grp{align-self:stretch;align-items:stretch}
@media (max-width:809px){.page .projects .sec-row{width:auto}}