.projects{overflow:hidden;background:radial-gradient(circle at 78% 38%,rgba(178,31,10,.16),transparent 27%),linear-gradient(180deg,#070708,#09080a)}
.projects::before{content:"";position:absolute;inset:0;background-image:linear-gradient(rgba(255,255,255,.018) 1px,transparent 1px),linear-gradient(90deg,rgba(255,255,255,.018) 1px,transparent 1px);background-size:52px 52px;mask-image:linear-gradient(transparent,#000 18%,#000 82%,transparent);pointer-events:none}
.project-grid{position:relative;display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:18px}
.project-card{position:relative;width:100%;display:grid;overflow:hidden;border:1px solid rgba(255,89,32,.25);border-radius:22px;background:linear-gradient(145deg,#151316,#0d0d0f);box-shadow:0 24px 70px rgba(0,0,0,.4);transition:transform .3s,border-color .3s,box-shadow .3s}
.project-card:hover{transform:translateY(-7px);border-color:rgba(255,97,41,.68);box-shadow:0 32px 95px rgba(0,0,0,.55),0 0 45px rgba(255,49,18,.1)}
.project-card--featured{grid-column:1/-1;grid-template-columns:1.15fr .85fr}
.project-image{position:relative;overflow:hidden;background:#050506}
.project-card--featured .project-image{min-height:490px}
.project-image::before{content:"";position:absolute;z-index:2;inset:14px;border:1px solid rgba(255,114,62,.17);border-radius:13px;pointer-events:none}
.project-image::after{content:"";position:absolute;inset:0;background:linear-gradient(90deg,transparent 58%,rgba(16,15,17,.98)),linear-gradient(transparent 68%,rgba(4,4,5,.35))}
.project-image img{width:100%;height:100%;object-fit:cover;object-position:center;transition:transform .6s,filter .6s}
.project-card:hover .project-image img{transform:scale(1.035);filter:saturate(1.08)}
.project-badge{position:absolute;z-index:3;top:25px;left:25px;padding:7px 10px;border:1px solid rgba(92,255,151,.3);border-radius:6px;color:#9effbf;background:rgba(13,68,36,.8);box-shadow:0 8px 24px rgba(0,0,0,.35);font-size:8px;font-weight:800;letter-spacing:.12em}
.project-card--development .project-badge{border-color:rgba(255,115,66,.32);color:#ff9b70;background:rgba(95,29,13,.82)}
.project-info{position:relative;z-index:2;display:flex;flex-direction:column;justify-content:center;align-items:flex-start;padding:clamp(34px,5vw,58px);background:linear-gradient(100deg,transparent,rgba(13,13,15,.76) 18%)}
.project-category{margin-bottom:15px;color:var(--orange2);font-size:8px;font-weight:800;letter-spacing:.15em}
.project-info h3{margin-bottom:16px;font-size:clamp(42px,5vw,58px);letter-spacing:-.045em}
.project-info h3 span{display:block;margin-top:6px;color:var(--orange2);font-size:.43em;letter-spacing:.055em;text-transform:uppercase}
.project-info>p:not(.project-category){color:var(--muted);font-size:13px;line-height:1.8}
.project-link{min-height:46px;display:inline-flex;align-items:center;align-self:flex-end;gap:7px;margin-top:auto;padding:0 18px;border:1px solid rgba(255,87,31,.46);border-radius:11px;background:rgba(255,68,25,.07);font-size:13px;font-weight:800;transition:transform .2s,border-color .2s,background .2s,box-shadow .2s}.project-link:hover{transform:translateY(-2px);border-color:rgba(255,99,43,.82);background:rgba(255,68,25,.13);box-shadow:0 10px 28px rgba(255,55,20,.12)}
.project-link b{display:inline-block;margin-left:5px;color:var(--orange2);transition:transform .2s}
.project-card:hover .project-link b{transform:translate(3px,-3px)}
.project-preview-strip{width:100%;display:grid;grid-template-columns:repeat(3,1fr);gap:7px;margin:18px 0 3px}.project-preview-strip img{width:100%;height:105px;object-fit:cover;border:1px solid rgba(255,91,37,.25);border-radius:10px;filter:saturate(.92);transition:transform .25s,filter .25s,border-color .25s}.project-preview-strip img:hover{transform:translateY(-3px);filter:saturate(1.1);border-color:rgba(255,91,37,.65)}
.project-card--compact{grid-template-columns:1fr;grid-template-rows:auto 1fr}
.project-card--compact .project-image{min-height:275px;aspect-ratio:12/7}
.project-card--compact .project-image::after{background:linear-gradient(transparent 57%,#121114)}
.project-card--compact .project-info{min-height:245px;justify-content:flex-start;padding:29px;background:#121114}
.project-card--compact .project-info h3{margin-bottom:12px;font-size:31px;letter-spacing:-.035em}
.project-card--compact .project-info>p:not(.project-category){margin-bottom:0}
.project-card--compact .project-link{margin-top:auto}
.project-card--compact:nth-child(3){border-color:rgba(183,74,255,.24)}
.project-card--compact:nth-child(3):hover{border-color:rgba(211,105,255,.6);box-shadow:0 32px 95px rgba(0,0,0,.55),0 0 45px rgba(181,65,255,.1)}
.project-card--compact:nth-child(3) .project-category,.project-card--compact:nth-child(3) .project-link b{color:#d76cff}
.project-card--compact:nth-child(4){border-color:rgba(255,108,41,.24)}
.project-card--compact:nth-child(5){border-color:rgba(126,112,255,.24)}
.project-card--compact:nth-child(5):hover{border-color:rgba(151,137,255,.62);box-shadow:0 32px 95px rgba(0,0,0,.55),0 0 45px rgba(110,88,255,.12)}
.project-card--compact:nth-child(5) .project-category,.project-card--compact:nth-child(5) .project-link b{color:#9c91ff}
@media(max-width:760px){.project-grid{grid-template-columns:1fr}.project-card--featured{grid-column:auto;grid-template-columns:1fr}.project-card--featured .project-image{min-height:auto;aspect-ratio:1.08}.project-image::after{background:linear-gradient(transparent 65%,#121114)}.project-card--featured .project-info{padding:32px;background:#121114}.project-info h3{font-size:42px}.project-card--compact .project-image{min-height:auto}}
@media(max-width:420px){.project-card{border-radius:18px}.project-card--featured .project-image{aspect-ratio:1}.project-card--featured .project-info,.project-card--compact .project-info{padding:26px}.project-info h3,.project-card--compact .project-info h3{font-size:32px}}

.project-toggle{display:contents;color:inherit;font:inherit}
.project-mobile-bar{display:none}
.project-toggle:focus-visible .project-image{outline:3px solid #ffae7b;outline-offset:-4px}
.project-chevron{display:grid;place-items:center}
.project-chevron svg{width:20px;height:20px;fill:none;stroke:currentColor;stroke-width:2.2;stroke-linecap:round;stroke-linejoin:round}

@media(max-width:760px){
  .project-grid{grid-template-columns:repeat(2,minmax(0,1fr));gap:12px;align-items:start}
  .project-card,.project-card--featured,.project-card--compact{grid-column:auto;display:block;border-radius:16px}
  .project-toggle{width:100%;display:block;padding:0;border:0;color:inherit;text-align:left;background:transparent;cursor:pointer}
  .project-card--featured .project-image,.project-card--compact .project-image{min-height:0;aspect-ratio:1}
  .project-image::before{inset:8px;border-radius:10px}
  .project-image::after{background:linear-gradient(transparent 67%,rgba(4,4,5,.76))}
  .project-badge{top:11px;left:11px;max-width:calc(100% - 22px);padding:5px 7px;overflow:hidden;font-size:6px;letter-spacing:.08em;text-overflow:ellipsis;white-space:nowrap}
  .project-mobile-bar{min-height:62px;display:flex;align-items:center;justify-content:space-between;gap:8px;padding:11px 12px 12px;border-top:1px solid rgba(255,255,255,.07);background:#121114}
  .project-mobile-bar>strong{min-width:0;overflow:hidden;font-size:11px;line-height:1.25;text-overflow:ellipsis}
  .project-chevron{width:31px;height:31px;flex:none;border:1px solid rgba(255,99,44,.34);border-radius:50%;color:var(--orange2);background:linear-gradient(145deg,rgba(255,86,35,.16),rgba(255,255,255,.02));box-shadow:0 7px 18px rgba(0,0,0,.3);transition:transform .3s,color .3s,border-color .3s}
  .project-card.is-open{grid-column:1/-1}
  .project-card.is-open .project-chevron{transform:rotate(180deg);border-color:var(--orange2);color:#fff;background:linear-gradient(145deg,#ff5c32,#a92112)}
  .project-grid.is-single .project-card:not([hidden]){grid-column:1/-1;width:calc(50% - 6px);justify-self:center}
  .project-grid.is-single .project-card.is-open{width:100%}
  .project-card .project-info,.project-card--featured .project-info,.project-card--compact .project-info{min-height:0;padding:20px;background:#121114}
  .project-info h3,.project-card--compact .project-info h3{font-size:27px}
  .project-preview-strip{margin-top:13px}.project-preview-strip img{height:92px}
  .project-card--featured .project-info>*:not(.project-preview-strip):not(.project-link){display:none}
  .project-card--featured .project-info{padding:14px}
  .project-card--featured .project-preview-strip{margin:0;gap:8px}
  .project-card--featured .project-preview-strip img{height:118px;border-radius:12px}
  .project-card--featured .project-link{min-height:44px;display:inline-flex;align-self:flex-end;margin-top:13px;padding-inline:16px}
  .js .project-card .project-info{max-height:0;padding-top:0;padding-bottom:0;overflow:hidden;visibility:hidden;opacity:0;transform:translateY(-7px);transition:max-height .42s ease,padding .42s ease,opacity .25s ease,transform .32s ease,visibility 0s linear .42s}
  .js .project-card.is-open .project-info{max-height:520px;padding-top:20px;padding-bottom:22px;visibility:visible;opacity:1;transform:none;transition:max-height .48s ease,padding .42s ease,opacity .3s ease .08s,transform .35s ease .04s,visibility 0s}
}

@media(max-width:390px){
  .project-grid{gap:9px}
  .project-grid.is-single .project-card:not([hidden]){width:calc(50% - 4.5px)}
  .project-mobile-bar{min-height:58px;padding-inline:10px}
  .project-mobile-bar>strong{font-size:10px}
  .project-chevron{width:28px;height:28px}
  .project-chevron svg{width:17px;height:17px}
}