/* Official client logos, intact proportions, shared by Home and Work. */
.project-previews{--preview-ease:cubic-bezier(.23,1,.32,1);display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:28px}
.project-preview{display:flex;flex-direction:column;min-width:0;border-radius:var(--radius);background:var(--concrete);color:var(--ink);position:relative;transition:transform 220ms var(--preview-ease)}
.project-preview-visual{aspect-ratio:1.95;overflow:hidden;border-radius:var(--radius) var(--radius) 0 0;display:grid;place-items:center;background:#e7e8e1;padding:clamp(32px,5vw,76px)}
.project-preview-visual>.client-logo{display:block;width:100%;max-width:350px;height:auto;max-height:120px;object-fit:contain;filter:grayscale(1);transition:filter 220ms ease,transform 400ms var(--preview-ease)}
.project-preview--strategy .project-preview-visual{background:#f8f9f5}
.project-preview--karno .project-preview-visual{background:var(--ink)}
.project-preview-visual>.client-logo--karno{max-width:250px;max-height:100px}
.project-preview-visual>.client-logo--extraot{max-width:310px}
.project-preview-caption{display:flex;justify-content:space-between;align-items:center;gap:24px;padding:24px 28px;min-height:106px;flex:1}
.project-preview-caption h3{font-size:23px;font-weight:400;line-height:1.15;margin:0 0 8px;letter-spacing:-.025em}
.project-preview-caption p{font-size:14px;line-height:1.4;margin:0;color:var(--muted)}
.project-preview-arrow{display:grid;place-items:center;width:44px;height:44px;flex-shrink:0;border:1px solid #20231f35;border-radius:var(--radius);transition:background-color 180ms ease,color 180ms ease,border-color 180ms ease}
.project-preview-arrow svg{width:20px;height:20px;transition:transform 180ms var(--preview-ease)}
.project-preview--film{background:var(--ink);color:var(--paper)}
.project-preview--film .project-preview-caption p{color:#c5c7bf}
.project-preview--film .project-preview-arrow{border-color:#f2f1eb50}
a.project-preview:focus-visible{outline:2px solid currentColor;outline-offset:6px}
@media(hover:hover) and (pointer:fine){
  .project-preview:hover .client-logo{filter:grayscale(0)}
  a.project-preview:hover{transform:translateY(-5px)}
  a.project-preview:hover .client-logo{transform:scale(1.045)}
  a.project-preview:hover .project-preview-arrow{background:var(--ink);color:var(--paper);border-color:var(--ink)}
  a.project-preview--film:hover .project-preview-arrow{background:var(--orange);color:var(--ink);border-color:var(--orange)}
  a.project-preview:hover .project-preview-arrow svg{transform:translate(2px,-2px)}
}
a.project-preview:active{transform:translateY(-1px) scale(.99)}
@media(max-width:800px){
  .project-previews{gap:20px}
  .project-preview-visual{aspect-ratio:1.5;padding:32px}
  .project-preview-caption{padding:20px;gap:14px;min-height:106px}
  .project-preview-caption h3{font-size:21px}.project-preview-caption p{font-size:13px}
}
@media(max-width:560px){
  .project-previews{grid-template-columns:1fr;gap:22px}
  .project-preview-visual{aspect-ratio:1.85;padding:38px}
  .project-preview-caption{min-height:100px;padding:22px 24px}
}
@media(prefers-reduced-motion:reduce){.project-preview,.project-preview *{transition:none!important}}
body[data-input="keyboard"] .project-preview,body[data-input="keyboard"] .project-preview *{transition:none!important}