/* The work itself leads: real websites, framed in their own brand colors. */
.visual-project .project-identity {
  position: absolute; top: 17%; inset-inline: 6%; display: flex;
  align-items: center; gap: 13px; text-align: start;
}
.project-logo { width: 42px; height: 42px; object-fit: contain; flex: none; }
.project-logo.inbar-logo { background: #81001a; mask: url('/assets/inbar-logo-mask.webp') center/contain no-repeat; -webkit-mask: url('/assets/inbar-logo-mask.webp') center/contain no-repeat; }
.project-name { display: block; font: 600 30px/1.15 var(--font); letter-spacing: -.025em; }
.project-name[dir="ltr"] { font-family: var(--english); }
.project-kind { display: block; font: 12px/1.6 var(--font); opacity: .8; margin-top: 5px; }
.project-showcase { position: absolute; top: 32%; bottom: 16%; left: 7%; right: 6%; direction: ltr; }
.browser-device { position: absolute; left: 0; bottom: 0; width: 89%; height: 100%; border: 5px solid #252630; border-radius: 10px; overflow: hidden; display: flex; flex-direction: column; background: #fff; box-shadow: 0 16px 28px #0004; }
.device-chrome { height: 17px; flex: none; display: flex; align-items: center; gap: 4px; padding-inline: 7px; background: #252630; }
.device-chrome i { display: block; width: 4px; height: 4px; background: #8c8996; border-radius: 50%; }
.browser-device>img { display: block; width: 100%; height: calc(100% - 17px); object-fit: cover; object-position: center top; }
.phone-device { position: absolute; right: 0; bottom: -2%; width: 19%; aspect-ratio: 375/844; border: 5px solid #202129; border-radius: 16px; overflow: hidden; background: #fff; box-shadow: 0 12px 22px #0005; transition: translate 200ms var(--ease-out); }
.phone-device:after { content: ''; position: absolute; width: 32%; height: 6px; border-radius: 0 0 5px 5px; background: #202129; top: 0; left: 34%; }
.phone-device>img { width: 100%; height: 100%; display: block; object-fit: cover; object-position: top; }
.visual-project.afek-real { background: #191b20; }
.visual-project.torim-real { background: #102b2b; }
.visual-project.inbar-real { background: #f7eee5; }
.visual-project .card-topline { font-size: 11px; }
.visual-project .card-bottom { min-height: 51px; }
.visual-project .card-bottom>span:last-child { font-size: 12px; }
@media (hover: hover) and (pointer: fine) {
  .visual-project:hover .phone-device { translate: 0 -5px; }
}
.case-dialog { --case-stage: #1d2430; --case-accent: #e0f4b3; }
#project-dialog.case-dialog { padding: 0; width: calc(100% - 48px); max-width: 1120px; max-height: calc(100svh - 32px); border-radius: 16px; background: #12101a; }
.case-dialog[data-theme="afek"] { --case-stage: #dfe3e9; --case-accent: #b6cdf4; }
.case-dialog[data-theme="inbar"] { --case-stage: #eddfd7; --case-accent: #f2bbc7; }
.case-dialog[data-theme="torim"] { --case-stage: #cfe4dc; --case-accent: #a6ebcd; }
.case-topbar { position: sticky; top: 0; z-index: 4; display: flex; align-items: center; justify-content: space-between; gap: 20px; min-height: 68px; padding: 12px 28px; background: #12101af5; border-bottom: 1px solid var(--line); }
.case-breadcrumb { font-size: 13px; color: var(--copy-secondary); }
.case-dialog .dialog-close { position: static; flex: none; width: 44px; height: 44px; }
.case-heading { padding: 32px 44px 28px; }
.case-heading .dialog-meta { margin-bottom: 12px; font-size: 13px; letter-spacing: 0; color: var(--case-accent); }
.case-heading h2 { margin: 0 0 16px; font: 500 clamp(34px, 4vw, 56px)/1.15 var(--font); letter-spacing: -.03em; direction: inherit; }
.case-heading #dialog-description { font-size: 16px; line-height: 1.85; max-width: 70ch; }
.case-controls { position: sticky; top: 68px; z-index: 3; padding: 14px 28px; display: flex; align-items: center; justify-content: space-between; gap: 12px; flex-wrap: wrap; background: #12101af5; border-block: 1px solid var(--line); }
.case-views, .case-shots { display: flex; align-items: center; gap: 4px; }
.case-tab { min-height: 44px; padding: 10px 17px; display: inline-flex; align-items: center; justify-content: center; gap: 9px; border: 1px solid transparent; border-radius: 6px; background: transparent; color: #bfb6cc; font-size: 14px; transition: color 160ms ease, background 160ms ease; }
.case-tab[aria-selected="true"] { background: #ece8f3; color: #211b2a; }
.case-tab svg { width: 19px; height: 19px; stroke: currentColor; stroke-width: 1.5; fill: none; }
.case-shots .case-tab { padding-inline: 12px; font-size: 13px; }
.case-shots .case-tab[aria-selected="true"] { background: #ffffff0c; color: var(--case-accent); border-color: #ffffff28; }
.case-preview { outline-offset: -4px; }
.case-stage { padding: 36px; display: grid; place-items: center; background: var(--case-stage); min-height: 320px; }
.case-browser { width: 100%; margin: 0; overflow: hidden; border: 6px solid #272631; border-radius: 10px; background: #fff; box-shadow: 0 18px 32px #0002; }
.case-browser-bar { height: 29px; display: flex; gap: 10px; align-items: center; padding: 0 12px; background: #272631; color: #ddd5e7; font: 11px var(--english); direction: ltr; }
.case-browser-bar .device-chrome { padding: 0; height: auto; background: transparent; }
.case-browser-bar .case-domain { margin-inline: auto; }
#case-image { display: block; width: 100%; height: auto; }
.case-preview[data-viewport="mobile"] .case-browser { max-width: 330px; border-width: 7px; border-radius: 24px; }
.case-preview[data-viewport="mobile"] .case-browser-bar { display: none; }
.case-preview[aria-busy="true"] .case-browser { opacity: .7; }
.case-image-note { padding: 12px 28px; font-size: 12px; color: var(--copy-quiet); border-bottom: 1px solid var(--line); }
.case-load-error { max-width: 38ch; color: #272631; font-size: 16px; }
.case-details { padding: 32px 44px; }
.case-details h3 { font-size: 21px; font-weight: 500; margin-bottom: 22px; }
.case-features { padding: 0; margin: 0; list-style: none; display: grid; grid-template-columns: repeat(3,1fr); gap: 28px; }
.case-features li { border-top: 1px solid var(--line); padding-top: 16px; }
.case-features strong { display: block; font-size: 15px; font-weight: 500; color: var(--case-accent); }
.case-features span { display: block; font-size: 14px; line-height: 1.8; color: var(--copy-secondary); margin-top: 8px; }
.case-details #dialog-scope { margin-top: 24px; font-size: 13px; color: var(--copy-quiet); line-height: 1.8; max-width: 70ch; }
.case-actions { padding: 0 44px 32px; display: flex; gap: 14px; flex-wrap: wrap; }
.case-actions .project-live-link { margin: 0; min-height: 48px; font-size: 14px; }
.case-actions .primary-link { min-height: 48px; }
.case-project-nav { border-top: 1px solid var(--line); display: grid; grid-template-columns: 1fr auto 1fr; gap: 12px; align-items: center; padding: 16px 28px; }
.case-project-nav button { min-height: 48px; background: transparent; display: flex; align-items: center; gap: 10px; font-size: 14px; padding: 8px; text-align: start; }
.case-project-nav button:last-child { justify-content: flex-end; text-align: end; }
.case-project-nav svg { width: 18px; height: 18px; fill: none; stroke: currentColor; stroke-width: 1.5; flex: none; }
.case-nav-copy small { display: block; font-size: 11px; color: var(--copy-quiet); margin-bottom: 3px; }
.case-count { font: 12px var(--english); color: var(--copy-quiet); font-variant-numeric: tabular-nums; }
.case-dialog[open]:not([data-keyboard="true"]) { animation: case-enter 220ms var(--ease-out); }
@keyframes case-enter { from { opacity: .85; translate: 0 8px; } to { opacity: 1; translate: 0 0; } }
html.hc .case-tab[aria-selected="true"] { background: #ffec60; color: #000; }
html.hc .case-shots .case-tab[aria-selected="true"] { color: #ffec60; background: #000; }
@media (max-width: 650px) {
  .visual-project .project-identity { top: 18%; gap: 9px; inset-inline: 6%; }
  .visual-project .project-logo { width: 34px; height: 34px; }
  .visual-project .project-name { font-size: 24px; }
  .visual-project .project-kind { font-size: 11px; margin-top: 3px; }
  .project-showcase { top: 37%; bottom: 18%; left: 6%; right: 5%; }
  .browser-device { width: 88%; border-width: 3px; border-radius: 7px; }
  .device-chrome { height: 12px; padding-inline: 5px; gap: 3px; }
  .device-chrome i { width: 3px; height: 3px; }
  .browser-device>img { height: calc(100% - 12px); }
  .phone-device { width: 24%; border-width: 3px; border-radius: 10px; }
  .phone-device:after { height: 4px; }
  #project-dialog.case-dialog { width: calc(100% - 16px); max-height: calc(100svh - 16px); border-radius: 12px; }
  .case-topbar { padding: 10px 16px; min-height: 64px; }
  .case-controls { top: 64px; padding: 10px 12px; gap: 6px; }
  .case-heading { padding: 24px 22px; }
  .case-heading .dialog-meta { font-size: 12px; }
  .case-heading #dialog-description { font-size: 14px; }
  .case-tab { font-size: 13px; padding-inline: 14px; }
  .case-shots { width: 100%; border-top: 1px solid var(--line); padding-top: 6px; }
  .case-stage { padding: 20px 14px; min-height: 220px; }
  .case-browser { border-width: 4px; }
  .case-browser-bar { height: 23px; font-size: 10px; padding-inline: 8px; }
  .case-preview[data-viewport="mobile"] .case-browser { max-width: 280px; }
  .case-image-note { padding: 12px 18px; line-height: 1.7; }
  .case-details { padding: 26px 22px; }
  .case-features { grid-template-columns: 1fr; gap: 18px; }
  .case-features span { margin-top: 5px; }
  .case-actions { padding: 0 22px 26px; flex-direction: column; }
  .case-actions a { justify-content: center; }
  .case-project-nav { padding: 12px 10px; gap: 5px; }
  .case-project-nav button { font-size: 12px; gap: 5px; }
  .case-count { font-size: 11px; }
}
@media (max-height: 550px) and (max-width: 650px) {
  .visual-project .project-identity { top: 22%; }
  .visual-project .project-name { font-size: 18px; }
  .visual-project .project-kind { display: none; }
  .project-showcase { top: 41%; bottom: 23%; }
}