/* Four projects, one consistent overview; the hero retains its current treatment. */
.portfolio-section{padding-top:24px;padding-bottom:40px}
.portfolio-section .section-heading>p{max-width:320px}
.portfolio-grid{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:24px}
.portfolio-card{min-width:0;display:flex;flex-direction:column;border:1px solid var(--line);border-radius:15px;background:#fff;box-shadow:0 4px 14px rgba(29,41,61,.035);overflow:hidden}
.portfolio-card-heading{padding:24px 25px 20px}
.portfolio-status{display:block;color:#566984;font-size:12px;line-height:1.7;margin-bottom:7px}
.portfolio-card h3{font-size:24px;line-height:1.4;font-weight:600;letter-spacing:-.35px}
.portfolio-media{display:grid;grid-template-rows:minmax(0,1fr) 44px;justify-items:center;align-items:center;height:460px;padding:14px 18px;gap:8px;margin:0 25px;background:#f4f6fa;border:1px solid #e9edf3;border-radius:10px;color:inherit;text-align:left;width:calc(100% - 50px)}
.portfolio-media img{display:block;width:auto;max-width:100%;height:auto;max-height:380px;object-fit:contain;border:1px solid #e1e6ee;border-radius:9px;transition:filter .2s}
.portfolio-media:hover img{filter:brightness(.985)}
.portfolio-media-records img{width:100%;border:0}
.portfolio-card-content{display:flex;flex-direction:column;flex:1;padding:20px 25px 24px}
.portfolio-card-content>p{font-size:16px;line-height:1.8;color:var(--muted)}
.portfolio-tags{display:flex;gap:6px 14px;flex-wrap:wrap;list-style:none;padding:0;margin:15px 0 21px;color:#5a616d;font-size:12px;line-height:1.8}
.portfolio-tags li+li::before{content:'·';color:#a8afba;margin-right:14px}
.portfolio-actions{display:flex;align-items:center;flex-wrap:wrap;gap:7px 24px;margin-top:auto}
.portfolio-actions .text-link{font-size:14px;min-height:44px}
.portfolio-note{padding-top:20px;color:var(--muted);font-size:13px;line-height:1.8}
.portfolio-note p+p{margin-top:5px}
.portfolio-media-notification{display:flex;justify-content:center;font:inherit;cursor:pointer;padding:18px;align-items:center}
.inquiry-illustration{display:block;width:100%;min-width:0;max-width:380px}
.inquiry-illustration-label{display:block;font-size:11px;line-height:1.5;color:#60718b;margin-bottom:10px}
.inquiry-message{display:block;background:#fff;border:1px solid #e1e7ee;border-radius:9px;padding:16px 18px;font-size:12px;line-height:1.75;overflow-wrap:anywhere}
.inquiry-message b{font-size:13px;font-weight:600;color:#303947}
.inquiry-message .inquiry-lines{display:block;color:#5d6572;margin-top:10px}
#notification-dialog{max-width:560px}
#notification-dialog>.inquiry-illustration{max-width:none}
#notification-dialog .inquiry-message{display:block;background:#f5f7fa;font-size:14px}
#notification-dialog .inquiry-message b{font-size:15px}
#notification-dialog>.inquiry-illustration>.inquiry-illustration-label{display:none}
@media(max-width:760px){
 .portfolio-section{padding-top:12px;padding-bottom:32px}
 .portfolio-grid{grid-template-columns:1fr;gap:20px}
 .portfolio-section .section-heading>p{max-width:none}
 .portfolio-card-heading{padding:21px 21px 17px}
 .portfolio-card h3{font-size:23px}
 .portfolio-media{margin-inline:21px;width:calc(100% - 42px)}
 .portfolio-card-content{padding:19px 21px 22px}
 .portfolio-note{font-size:13px}
}
@media(max-width:390px){
 .portfolio-card-heading{padding:19px 18px 16px}
 .portfolio-card h3{font-size:22px}
 .portfolio-media{margin-inline:18px;width:calc(100% - 36px);height:460px;padding-inline:12px}
 .portfolio-card-content{padding:18px}
 .portfolio-card-content>p{font-size:15px}
 .portfolio-tags{gap:5px 10px;font-size:11px}
 .portfolio-tags li+li::before{margin-right:10px}
 .portfolio-actions{gap:6px 17px}
 .portfolio-media-notification{padding:13px}
 .inquiry-message{padding:13px;font-size:11px}
 .inquiry-message b{font-size:12px}
}

.portfolio-preview-action{display:flex;align-items:center;justify-content:center;gap:9px;font-size:13px;line-height:1.6;color:var(--blue);min-height:44px;text-align:center}
@media(max-width:390px){.portfolio-preview-action{font-size:12px}}

/* The records and notification summaries do not need a phone-height frame. */
.portfolio-media-notification,.portfolio-media-records{height:320px}
.portfolio-media-records img{max-height:240px}