/* Portfolio first view: actual implementation work is the main visual. */
.fv{padding-block:42px 0}
.fv-intro{display:grid;grid-template-columns:1.15fr 1fr;gap:70px;align-items:end}
.fv-audience{font-size:12px;color:var(--shu);font-weight:700;letter-spacing:.08em;margin-bottom:18px}
.fv h1{font-size:clamp(42px,4.75vw,68px);font-weight:800;line-height:1.24;letter-spacing:-.055em}
.fv h1 span{display:block;white-space:nowrap}
.fv h1 span:last-child{color:var(--shu)}
.fv-message{padding-bottom:5px;max-width:450px}
.fv-description{font-size:14px;line-height:2.1;color:var(--body);max-width:31em}
.fv-phrase{display:inline-block}
.fv-sentence{display:block}
.fv-actions{display:flex;align-items:center;gap:24px;flex-wrap:wrap;margin-top:25px}
.fv-primary{display:inline-flex;align-items:center;justify-content:space-between;gap:25px;min-height:56px;padding:15px 23px;color:#fff;background:var(--shu);font-size:13px;font-weight:700;white-space:nowrap;transition:background .18s ease}
.fv-primary:hover{background:#91281b;text-decoration:none}
.fv-primary:active{transform:translateY(1px)}
.fv-secondary{display:inline-flex;align-items:center;gap:12px;min-height:44px;font-size:12px;white-space:nowrap;text-decoration:underline;text-underline-offset:5px}
.fv-projects{display:grid;grid-template-columns:1.9fr 1fr;gap:24px;margin-top:38px}
.fv-project{min-width:0}
.fv-project-media{padding:22px;background:#f0f1ef;min-width:0}
.fv-project-media--responsive{display:grid;grid-template-columns:minmax(0,1fr) 112px;align-items:end;gap:20px;background:#e9edee}
.fv-screen{min-width:0;overflow:hidden;border:1px solid #c1c5c6;background:#fff}
.fv-screen-label{padding:5px 10px;background:#fff;color:#595959;font:9px/1.5 var(--display);letter-spacing:.1em;border-bottom:1px solid #dedfdf}
.fv-window{height:280px;overflow:hidden;background:white}
.fv-window img{width:100%;height:auto;max-width:none;display:block}
.fv-screen--mobile{border:4px solid #282b2c;border-radius:14px}
.fv-screen--mobile .fv-screen-label{font-size:8px;text-align:center;padding:5px 0}
.fv-screen--mobile .fv-window{height:220px}
.fv-project figcaption{display:flex;flex-wrap:wrap;align-items:baseline;gap:4px 20px;padding-block:14px 0}
.fv-project-name{font-size:13px;font-weight:700;color:var(--ink)}
.fv-project-scope{font-size:11px;color:var(--muted)}
.fv-summary{display:flex;align-items:center;justify-content:space-between;gap:20px;border-bottom:1px solid var(--line);padding-block:25px 23px;margin-top:18px;font-size:11px;color:var(--muted)}
.fv-summary p:first-child{display:flex;align-items:baseline;gap:12px}
.fv-summary strong{font-size:24px;color:var(--ink);letter-spacing:-.05em}
@media(max-width:1150px){
  .fv-intro{gap:35px;grid-template-columns:1.08fr 1fr}
  .fv h1{font-size:clamp(36px,4.6vw,54px)}
  .fv-description{font-size:13px}
  .fv-actions{gap:12px;margin-top:20px}
  .fv-primary{font-size:12px;gap:16px;padding:13px 17px;min-height:50px}
  .fv-projects{gap:18px}
  .fv-project-media{padding:16px}
  .fv-project-media--responsive{grid-template-columns:minmax(0,1fr) 88px;gap:14px}
  .fv-window{height:220px}
  .fv-screen--mobile .fv-window{height:178px}
  .fv-summary{gap:15px;font-size:10px}
}
@media(max-width:768px){
  .fv{padding-top:28px}
  .fv-intro{grid-template-columns:1fr;gap:19px}
  .fv-audience{font-size:11px;margin-bottom:14px}
  .fv h1{font-size:clamp(34px,7vw,48px);line-height:1.28}
  .fv-message{max-width:580px;padding:0}
  .fv-description{font-size:13px;line-height:1.9;max-width:40em}
  .fv-actions{gap:20px;margin-top:21px}
  .fv-projects{grid-template-columns:1fr;margin-top:28px}
  .fv-project--secondary{display:none}
  .fv-project-media{padding:20px}
  .fv-project-media--responsive{grid-template-columns:minmax(0,1fr) 100px;gap:16px}
  .fv-window{height:260px}
  .fv-screen--mobile .fv-window{height:212px}
  .fv-project figcaption{padding-top:11px;gap:2px 12px}
  .fv-summary{margin-top:12px;flex-wrap:wrap;padding-block:18px;gap:8px 20px;font-size:11px}
  .fv-summary p:nth-child(2){display:none}
  .fv-summary strong{font-size:21px}
}
@media(max-width:480px){
  .fv h1{font-size:clamp(31px,8.7vw,39px)}
  .fv-primary{font-size:12px;padding-inline:15px;gap:18px}
  .fv-secondary{font-size:11px;gap:6px}
  .fv-actions{gap:15px}
  .fv-project-media{padding:12px}
  .fv-project-media--responsive{grid-template-columns:minmax(0,1fr) 68px;gap:10px}
  .fv-window{height:166px}
  .fv-screen--mobile{border-width:3px;border-radius:10px}
  .fv-screen--mobile .fv-window{height:138px}
  .fv-screen-label{font-size:7px;padding:4px 7px}
  .fv-screen--mobile .fv-screen-label{font-size:7px;padding:4px 0}
  .fv-project-name{font-size:12px}
  .fv-project-scope{font-size:10px}
  .fv-summary{gap:6px 12px}
  .fv-summary p:first-child{gap:8px}
}
@media(prefers-reduced-motion:reduce){.fv-primary{transition:none}}
