.portfolio { padding: 175px 0 80px; background: #080a0b; }
.portfolio-intro { display: grid; grid-template-columns: 1fr .7fr; align-items: end; gap: 80px; margin-bottom: 58px; }
.portfolio-intro .eyebrow { color: #89afc6; margin-bottom: 24px; }
.portfolio h1 { font-size: clamp(58px,7.5vw,110px); line-height: 1; letter-spacing: -.06em; font-weight: 450; }
.portfolio h1 span { color: #79b9e0; }
@supports (background-clip: text) or (-webkit-background-clip: text) {
  .portfolio h1 span { background: linear-gradient(105deg,#f3f5f6,#aebfcb 35%,#218acb 85%); background-clip: text; -webkit-background-clip: text; color: transparent; -webkit-text-fill-color: transparent; }
}
.portfolio-description { max-width: 370px; color: #a5b0b9; font-size: 15px; line-height: 1.8; }
.portfolio-description .portfolio-hint { margin-top: 18px; font-size: 12px; color: #7f939f; }
.portfolio-description .hero-work-link { margin-top: 9px; }
.portfolio-grid { display: grid; grid-template-columns: repeat(3,minmax(0,1fr)); gap: 24px; }
.portfolio-grid .portfolio-card { padding: 0; }
.portfolio-card .work-image { height: auto; aspect-ratio: 4/5; }
.portfolio-card .work-image img { filter: none; object-position: 50% 62%; }
.care-process { padding: 100px 0 44px; background: #f1f3f2; color: #11191d; }
.process-heading { display: grid; grid-template-columns: 1.2fr .8fr; align-items: end; gap: 70px; margin-bottom: 78px; }
.process-heading .eyebrow { color: #527185; margin-bottom: 23px; }
.process-heading h2 { font-size: clamp(52px, 5.2vw, 78px); font-weight: 450; line-height: 1.04; letter-spacing: -.06em; }
.process-heading h2 span { background: linear-gradient(105deg,#687d89 5%,#2789be 65%,#087bb9); background-clip: text; -webkit-background-clip: text; color: transparent; }
.process-summary { max-width: 350px; margin-left: auto; padding-bottom: 5px; }
.process-summary p { color: #5c6e79; font-size: 15px; line-height: 1.8; margin-bottom: 22px; }
.process-summary .line-link { display: inline-block; padding-block: 7px; font-size: 13px; }
.process-summary .line-link::after { transform: scaleX(1); }
.process-steps { --process-progress: 1; position: relative; list-style: none; padding: 0; margin: 0; display: grid; grid-template-columns: repeat(4, minmax(0,1fr)); gap: 44px; }
.process-steps::before, .process-steps::after { content: ''; position: absolute; top: 0; left: 0; width: 100%; height: 1px; }
.process-steps::before { background: #d5dfe3; }
.process-steps::after { background: linear-gradient(90deg,#a7c1d0,#278dc2 70%,#b8d5e5); transform: scaleX(var(--process-progress)); transform-origin: left; }
.process-step { position: relative; padding-top: 39px; }
.process-node { position: absolute; z-index: 1; top: -3px; left: 0; width: 7px; height: 7px; border-radius: 50%; background: #398bb8; box-shadow: 0 0 0 6px #f1f3f2; }
.process-step .process-icon { width: 35px; height: 35px; stroke-width: 1.25; stroke-linecap: round; stroke-linejoin: round; color: #638395; margin-bottom: 28px; transition: color .3s, transform .4s; }
.process-step h3 { font-size: clamp(20px,1.7vw,25px); line-height: 1.25; font-weight: 480; letter-spacing: -.035em; margin-bottom: 17px; transition: color .3s; }
.process-step p { color: #5c6e79; font-size: 13px; line-height: 1.85; max-width: 270px; }
.process-footnote { margin-top: 58px; padding-top: 23px; border-top: 1px solid #d9e1e4; display: flex; align-items: center; justify-content: space-between; gap: 24px; font-size: 11px; color: #617b8a; }
.process-footnote .line-link { padding-block: 5px; color: #324f61; font-size: 12px; }
@media (hover:hover) {
  .process-step:hover h3 { color: #087bb9; }
  .process-step:hover .process-icon { color: #087bb9; transform: translateY(-3px); }
}
@media(max-width:980px) {
  .process-heading { gap: 35px; }
  .process-steps { gap: 24px; }
  .process-step h3 { font-size: 21px; }
}
@media(max-width:700px) {
  .care-process { padding: 66px 0 30px; }
  .process-heading { grid-template-columns: 1fr; gap: 26px; margin-bottom: 40px; }
  .process-heading h2 { font-size: clamp(48px,10.5vw,66px); }
  .process-heading .eyebrow { margin-bottom: 20px; }
  .process-summary { max-width: 100%; margin: 0; padding: 0; }
  .process-summary p { font-size: 13px; margin-bottom: 12px; max-width: 340px; }
  .process-steps { grid-template-columns: 1fr; gap: 0; margin-left: 5px; }
  .process-steps::before, .process-steps::after { width: 1px; height: 100%; }
  .process-steps::after { transform: scaleY(var(--process-progress)); transform-origin: top; background: linear-gradient(180deg,#a7c1d0,#278dc2 70%,#b8d5e5); }
  .process-step { padding: 0 0 35px 29px; display: grid; grid-template-columns: 1fr 28px; column-gap: 16px; }
  .process-step:last-child { padding-bottom: 8px; }
  .process-node { left: -3px; top: 10px; }
  .process-step h3 { grid-row: 1; grid-column: 1; margin-bottom: 12px; font-size: 24px; }
  .process-step .process-icon { grid-row: 1; grid-column: 2; width: 28px; height: 28px; margin: 0; }
  .process-step p { grid-column: 1 / -1; font-size: 13px; max-width: 370px; }
  .process-footnote { margin-top: 32px; flex-direction: column; align-items: flex-start; gap: 12px; }
}
@media(prefers-reduced-motion:reduce) { .process-step .process-icon, .process-step h3 { transition: none; transform: none; } }
@media(forced-colors:active) { .process-heading h2 span { background: none; color: CanvasText; } .process-node { background: CanvasText; } }
.portfolio-contact { background: #0f171c; padding: 80px 0; }
.portfolio-contact > .container { display: grid; grid-template-columns: 1fr 1fr; gap: 70px; align-items: center; }
.portfolio-contact .eyebrow { color: #85b2cd; margin-bottom: 20px; }
.portfolio-contact p:not(.eyebrow) { color: #a7b4be; max-width: 330px; font-size: 14px; line-height: 1.8; margin-bottom: 25px; }
.portfolio-contact .hero-work-link { margin-left: 23px; }
.line-link[aria-current="page"]::after { transform: scaleX(1); transform-origin: left; }
.gallery-status { position: absolute; width: 1px; height: 1px; padding: 0; margin: -1px; overflow: hidden; clip-path: inset(50%); white-space: nowrap; }
@media(max-width:980px) { .portfolio-intro { gap: 35px; } .portfolio-grid { gap: 16px; } }
@media(max-width:700px) {
  .portfolio { padding: 130px 0 45px; }
  .portfolio-intro { grid-template-columns: 1fr; gap: 27px; margin-bottom: 30px; }
  .portfolio h1 { font-size: 66px; }
  .portfolio-description { font-size: 13px; }
  .portfolio-grid { grid-template-columns: 1fr 1fr; gap: 12px; }
  .portfolio-contact { padding: 60px 0; }
  .portfolio-contact > .container { grid-template-columns: 1fr; gap: 30px; }
  .portfolio-contact .hero-work-link { margin-left: 18px; }
}
@media(max-width:380px) { .portfolio-grid { grid-template-columns: 1fr; } }
@media(forced-colors:active) { .portfolio h1 span { background: none; color: CanvasText; -webkit-text-fill-color: CanvasText; } }