.project-portfolio{background:linear-gradient(180deg,#f5fafd,#f8fcfd)}
.portfolio-heading{max-width:930px;margin-bottom:44px}
.portfolio-heading h2{font-size:clamp(32px,3.2vw,46px);line-height:1.17;letter-spacing:-.045em}
.portfolio-heading h2 span{color:#087e85}
.portfolio-heading>p:not(.eyebrow){max-width:850px;margin-inline:auto;line-height:1.75}
.portfolio-grid{--category-row:25px;--title-row:36px;--description-row:84px;--capabilities-row:38px;display:grid;grid-template-columns:repeat(2,minmax(0,1fr));grid-auto-rows:1fr;gap:28px;align-items:stretch}
.project-card{display:grid;grid-template-rows:auto 1fr;min-width:0;overflow:hidden;background:#fff;border:1px solid #d2e6ec;border-radius:22px;box-shadow:0 9px 28px #083d5408;transition:border-color .25s ease,box-shadow .25s ease}
.project-media{position:relative;display:block;overflow:hidden;text-decoration:none;aspect-ratio:16/10;background:#e9f4f7;border-bottom:1px solid #d2e6ec}
.project-image{display:block;width:100%;height:100%;aspect-ratio:16/10;object-fit:cover;object-position:center;transition:transform .65s cubic-bezier(.2,.65,.2,1)}
.project-image-zoom{position:absolute;right:17px;bottom:17px;display:grid;place-items:center;width:44px;height:44px;border:1px solid #ffffff73;border-radius:50%;background:#003448e8;color:#fff;box-shadow:0 4px 15px #00202e26;transition:opacity .2s ease,transform .2s ease}
.project-image-zoom .icon{width:21px;height:21px}
.project-info{display:grid;grid-template-rows:var(--category-row) var(--title-row) var(--description-row) var(--capabilities-row) 46px;align-content:start;justify-items:center;align-items:start;gap:13px;min-width:0;padding:27px;text-align:center}
.project-info .project-category{font-size:16px;line-height:25px;color:#087b82;font-weight:650;max-width:100%}
.project-info h3{font-size:26px;line-height:36px;letter-spacing:-.035em;color:#00354b;max-width:100%}
.project-info .project-description{font-size:16px;line-height:28px;color:#4d6e85;max-width:560px;width:100%;height:100%;margin:0}
.project-capabilities{display:flex;flex-wrap:wrap;justify-content:center;align-content:flex-start;gap:8px;margin:0;padding:0;list-style:none;max-width:100%;height:100%}
.project-capabilities li{font-size:16px;font-weight:500;line-height:23px;padding:6px 9px;border:1px solid #dcebf0;border-radius:7px;color:#466d7e;background:#f6fafc}
.project-visit{display:inline-flex;align-items:center;justify-content:center;gap:10px;width:245px;max-width:100%;min-height:46px;padding:8px 15px;border:1px solid #b2d9dc;border-radius:12px;background:#f0fafb;font-size:16px;font-weight:700;line-height:26px;color:#087c83;text-decoration:none;white-space:nowrap}
.project-visit .icon{width:21px;height:21px;transition:transform .25s ease}
.project-card:focus-within{border-color:#3eb6b4;box-shadow:0 17px 38px #07566c17}
.project-media:focus-visible{outline:3px solid #6cf5e9;outline-offset:-6px}
.project-visit:focus-visible{outline:3px solid #0c8f91;outline-offset:4px}
.project-concept{display:flex;flex-direction:column;align-items:center;justify-content:center;gap:24px;aspect-ratio:16/10;overflow:hidden;padding:28px;border-bottom:1px solid #d2e6ec;background:radial-gradient(ellipse at 50% 15%,#1b6974,transparent 65%),linear-gradient(135deg,#002c40,#073c50);color:#fff;text-align:center}
.project-concept-mark{display:grid;place-items:center;width:76px;height:76px;border:1px solid #6be2d571;border-radius:23px;background:#155568;box-shadow:0 12px 40px #001e2b3b}
.project-concept-mark .icon{width:43px;height:43px;color:#69e9d9;stroke-width:1.3}
.project-concept-heading{font-size:clamp(25px,2.4vw,37px);line-height:1.3;letter-spacing:-.045em;font-weight:750}
.project-concept-heading strong{font-weight:750;color:#63e8d9}
.project-visit--invitation{background:#063b4d;border-color:#063b4d;color:#e2fffa}
.portfolio-scope{max-width:950px;margin:30px auto 0;text-align:center;font-size:16px;line-height:1.8;color:#4d6e85}
.portfolio-visual-note{margin:12px auto 0;text-align:center;font-size:16px;line-height:1.6;color:#668493}
@media(hover:hover) and (pointer:fine){
  .project-card:hover{border-color:#78c9cd;box-shadow:0 20px 38px #074b6112}
  .project-media:hover .project-image{transform:scale(1.035)}
  .project-image-zoom{opacity:0;transform:translateY(6px)}
  .project-media:hover .project-image-zoom,.project-media:focus-visible .project-image-zoom{opacity:1;transform:none}
  .project-visit:hover{background:#e2f6f5;border-color:#67bcbc}
  .project-visit--invitation:hover{background:#0a5363;color:#fff}
  .project-visit:hover .icon{transform:translate(2px,-2px)}
}
@media(min-width:1024px) and (max-width:1279px){.portfolio-grid{--description-row:112px;--capabilities-row:82px;gap:24px}.project-info{padding:24px}.project-info h3{font-size:25px}}
@media(min-width:768px) and (max-width:1023px){
  .portfolio-grid{--description-row:140px;--capabilities-row:82px;gap:22px}
  .project-info{padding:23px;gap:12px}
  .project-info h3{font-size:24px}
  .project-concept{gap:16px;padding:20px}
  .project-concept-mark{width:58px;height:58px;border-radius:18px}
  .project-concept-mark .icon{width:34px;height:34px}
  .project-concept-heading{font-size:27px}
}
@media(max-width:767px){
  .portfolio-heading{margin-bottom:30px}
  .portfolio-heading h2{font-size:clamp(30px,6.7vw,42px)}
  .portfolio-heading>p:not(.eyebrow){font-size:17px;line-height:1.75}
  .portfolio-grid{grid-template-columns:minmax(0,1fr);grid-auto-rows:auto;gap:24px}
  .project-card{border-radius:19px}
  .project-info{grid-template-rows:none;grid-auto-rows:auto;padding:24px 23px;gap:13px}
  .project-info .project-category{line-height:1.55}
  .project-info h3{font-size:26px;line-height:1.35}
  .project-info .project-description{font-size:16px;line-height:1.75;height:auto}
  .project-capabilities{margin-block:2px 4px;height:auto}
  .project-visit{white-space:normal;min-height:48px;width:245px}
  .project-concept{gap:16px;padding:22px}
  .project-concept-mark{width:53px;height:53px;border-radius:16px}
  .project-concept-mark .icon{width:31px;height:31px}
  .project-concept-heading{font-size:28px}
  .portfolio-scope{margin-top:26px}
}
@media(prefers-reduced-motion:reduce){.project-card,.project-image,.project-image-zoom,.project-visit .icon{transition:none!important;transform:none!important}}