/* The portfolio follows the homepage's compact, colorful cards. */
.flow-site .portfolio-hero { padding: 38px 0 30px; }
.flow-site .portfolio-hero .page-hero-content { width: min(1160px, calc(100% - 48px)); max-width: 1160px; margin: auto; display: flex; align-items: center; justify-content: space-between; gap: 36px; text-align: start; }
.flow-site .portfolio-hero .flow-page-icon { display: none; }
.flow-site .portfolio-hero h1 { font-size: clamp(30px, 3.6vw, 46px); line-height: 1.13; margin: 0 0 16px; letter-spacing: -.04em; }
.flow-site .portfolio-hero .eyebrow { margin-bottom: 12px; font-size: 11px; }
.flow-site .portfolio-hero .hero-copy { margin: 0; max-width: 630px; font-size: 16px; line-height: 1.6; }
.portfolio-hero .btn { flex-shrink: 0; }
.flow-site .portfolio-section { padding: 0 0 44px; }
.portfolio-section > .container { max-width: 1208px; }
.portfolio-heading { margin: 32px 0 20px; }
.portfolio-heading h2 { font-size: 23px; line-height: 1.2; letter-spacing: -.02em; }
.project-grid { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); align-items: start; gap: 16px; }
.project-card { --card-color: #eaf1ff; background: var(--card-color); min-width: 0; border-radius: 20px; padding: 20px 22px 0; border: 1px solid transparent; scroll-margin-top: 108px; transition: border-color .2s, box-shadow .2s, transform .2s; }
.project-card:hover, .project-card:focus-within { border-color: #a7bdea; box-shadow: 0 8px 22px #22417109; }
.project-card--barons { --card-color: #fcecd8; }
.project-card--workforce { --card-color: #eee8ff; }
.project-card--smartatm { --card-color: #e3f2e8; }
.project-card--novapro { --card-color: #fff2cd; }
.project-card--alma { --card-color: #e4f1f0; }
.project-card-top { display: flex; align-items: center; justify-content: space-between; gap: 10px; min-height: 64px; margin-bottom: 18px; }
.portfolio-logo { position: relative; display: grid; place-items: center; width: 140px; max-width: 100%; height: 64px; flex-shrink: 0; overflow: hidden; }
/* Home and work use different body classes; fit images within the component. */
.portfolio-logo > img { display: block; min-width: 0; min-height: 0; width: 100%; max-width: 100%; height: 100%; object-fit: contain; object-position: center; }
.portfolio-logo--faben { width: 56px; height: 56px; border-radius: 15px; }
.portfolio-logo--barons, .portfolio-logo--workforce { mix-blend-mode: multiply; }
.portfolio-logo--barons, .portfolio-logo--workforce { width: 150px; height: 70px; }
.portfolio-logo--barons > img, .portfolio-logo--workforce > img { filter: contrast(1.15); }
.portfolio-logo--novapro { width: 130px; }
.portfolio-logo--smartatm { width: 112px; }
.portfolio-logo--alma { width: 142px; height: 52px; background: #0c1c23; border-radius: 10px; padding: 5px; }
.project-stage { font-size: 10px; line-height: 1.4; font-weight: 600; color: #526078; background: #ffffffb3; border-radius: 8px; padding: 6px 8px; text-align: center; max-width: 110px; }
.project-category { font-size: 10px; line-height: 1.4; color: #626c7c; margin: 0 0 8px; }
.project-copy h3 { font-size: 20px; line-height: 1.2; letter-spacing: -.025em; margin: 0 0 10px; }
.project-copy .project-teaser { font-size: 14px; line-height: 1.6; color: #515e71; margin: 0 0 16px; min-height: 45px; }
.project-detail { border-top: 1px solid #2a416519; }
.project-detail summary { display: flex; justify-content: space-between; align-items: center; gap: 15px; min-height: 48px; padding: 8px 0; list-style: none; cursor: pointer; font-size: 13px; font-weight: 600; color: #28466f; }
.project-detail summary::-webkit-details-marker { display: none; }
.peek-plus { width: 25px; height: 25px; display: grid; place-items: center; background: #ffffffc2; border-radius: 50%; font-size: 19px; font-weight: 400; transition: transform .2s; flex-shrink: 0; }
.project-detail[open] .peek-plus { transform: rotate(45deg); }
.project-detail-body { padding: 4px 0 20px; }
.project-detail-body h4 { font-size: 16px; line-height: 1.4; margin: 4px 0 12px; }
.project-detail-body p, .project-detail-body li { font-size: 13px; line-height: 1.65; color: #515e71; }
.project-detail-body p { margin: 0 0 12px; }
.project-detail-body ol { padding-inline-start: 20px; margin: 12px 0; }
.project-detail-body li + li { margin-top: 5px; }
.project-delivery { margin: 0 0 12px; }
.project-delivery > div { padding: 12px 0; border-bottom: 1px solid #2a416519; }
.project-delivery dt { font-size: 12px; font-weight: 650; color: #283c61; margin-bottom: 5px; }
.project-delivery dd { margin: 0; font-size: 13px; line-height: 1.65; color: #515e71; }
.project-link { display: flex; align-items: center; justify-content: space-between; gap: 10px; font-size: 13px; min-height: 40px; color: #2155f5; font-weight: 600; text-decoration: none; }
.project-link:hover { text-decoration: underline; text-underline-offset: 4px; }
.project-card:target { border-color: #2155f5; }
.project-flagship { display: grid; grid-template-columns: minmax(0, .95fr) minmax(0, 1fr); gap: 32px; background: #f2f3ff; border: 1px solid #e7e9f8; border-radius: 22px; padding: 24px; align-items: center; scroll-margin-top: 108px; }
.flagship-art { position: relative; border-radius: 15px; overflow: hidden; background: #fff; }
.flow-site .flagship-art > img { display: block; width: 100%; height: 255px; object-fit: contain; }
.flagship-caption { display: block; padding: 0 12px 12px; text-align: center; font-size: 10px; line-height: 1.5; color: #717886; }
.flagship-copy h2 { font-size: clamp(24px, 2.7vw, 33px); line-height: 1.17; letter-spacing: -.025em; margin: 9px 0 13px; max-width: 420px; }
.flagship-copy > p:not(.project-category) { font-size: 14px; line-height: 1.65; color: #576277; margin-bottom: 13px; }
.flagship-copy > .flagship-teaser { color: #283c61; font-weight: 600; }
.flow-site .portfolio-closing { background: #f7f8fc; padding: 32px 0; }
.portfolio-closing .container { display: flex; align-items: center; justify-content: space-between; gap: 28px; text-align: start; }
.portfolio-closing .section-label { margin-bottom: 10px; }
.portfolio-closing h2 { font-size: 27px; line-height: 1.2; margin: 0 0 10px; }
.portfolio-closing p { font-size: 14px; max-width: 570px; margin: 0; }
.portfolio-closing .btn { flex-shrink: 0; }
/* Keep the approved homepage composition; give each brand a measured frame. */
.portfolio-proof { background: #f7f8fb; }
.portfolio-proof-heading { display: flex; justify-content: space-between; gap: 32px; align-items: center; }
.portfolio-proof-heading h2 { font-size: clamp(27px, 3vw, 40px); line-height: 1.18; margin: 0 0 14px; letter-spacing: -.03em; }
.portfolio-proof-heading p:not(.eyebrow) { font-size: 16px; color: #616571; max-width: 660px; line-height: 1.6; }
.portfolio-proof-heading > .text-link { white-space: nowrap; }
.portfolio-marks { display: grid; grid-template-columns: repeat(5, minmax(0, 1fr)); gap: 16px; margin-top: 30px; }
.portfolio-mark { display: flex; align-items: center; justify-content: center; min-width: 0; height: 90px; padding: 10px; background: #fff; border: 1px solid #eceef2; border-radius: 14px; transition: border-color .2s, box-shadow .2s; }
.portfolio-mark--alma { background: #0c1c23; }
.portfolio-mark:hover, .portfolio-mark:focus-visible { border-color: #afc4ed; box-shadow: 0 6px 18px #2155f510; }
.portfolio-marks .portfolio-logo { animation: brand-bob 6s ease-in-out infinite; }
.portfolio-mark:nth-child(2) .portfolio-logo { animation-delay: -1.4s; animation-duration: 7s; }
.portfolio-mark:nth-child(3) .portfolio-logo { animation-delay: -3.2s; }
.portfolio-mark:nth-child(4) .portfolio-logo { animation-delay: -4s; animation-duration: 7.8s; }
.portfolio-mark:nth-child(5) .portfolio-logo { animation-delay: -2s; animation-duration: 6.8s; }
.portfolio-marks:hover .portfolio-logo, .portfolio-marks:focus-within .portfolio-logo { animation-play-state: paused; }
.project-card:hover .portfolio-logo, .project-card:focus-within .portfolio-logo { animation: brand-greet .55s ease both; }
@keyframes brand-bob { 0%, 100% { transform: translateY(2px) rotate(-.7deg); } 50% { transform: translateY(-3px) rotate(.7deg); } }
@keyframes brand-greet { 0%, 100% { transform: rotate(0); } 40% { transform: rotate(-3deg) translateY(-3px); } 70% { transform: rotate(2deg); } }
.shared-hebrew .portfolio-hero h1, .shared-hebrew .project-copy h3, .shared-hebrew .flagship-copy h2, .shared-hebrew .portfolio-proof-heading h2 { letter-spacing: 0; }
@media(max-width: 1000px) { .project-grid { grid-template-columns: repeat(2, minmax(0, 1fr)); } .project-flagship { gap: 22px; padding: 20px; } .flow-site .portfolio-hero .page-hero-content { gap: 20px; } }
@media(max-width: 700px) {
 .flow-site .portfolio-hero { padding: 26px 0 22px; }
 .flow-site .portfolio-hero .page-hero-content { width: calc(100% - 32px); display: block; }
 .flow-site .portfolio-hero h1 { font-size: 30px; }
 .flow-site .portfolio-hero .hero-copy { font-size: 14px; }
 .portfolio-hero .btn { display: inline-flex; margin-top: 18px; padding: 10px 16px; font-size: 13px; }
 .project-flagship { grid-template-columns: 1fr; padding: 16px; gap: 17px; border-radius: 18px; }
 .flow-site .flagship-art > img { height: 160px; }
 .flagship-caption { font-size: 9px; padding-bottom: 8px; }
 .flagship-copy h2 { font-size: 25px; }
 .flagship-copy > p:not(.project-category) { font-size: 13px; margin-bottom: 11px; }
 .portfolio-heading { margin: 26px 0 16px; }
 .portfolio-heading h2 { font-size: 20px; }
 .project-grid { grid-template-columns: 1fr; gap: 12px; }
 .project-card { padding: 16px 18px 0; border-radius: 16px; }
 .project-card-top { min-height: 48px; margin-bottom: 12px; }
 .project-card-top .portfolio-logo--faben { width: 46px; height: 46px; }
 .project-copy h3 { font-size: 19px; margin-bottom: 7px; }
 .project-copy .project-teaser { min-height: 0; font-size: 13px; margin-bottom: 12px; }
 .flow-site .portfolio-closing { padding: 26px 0; }
 .portfolio-closing .container { display: block; }
 .portfolio-closing h2 { font-size: 24px; }
 .portfolio-closing .btn { display: inline-flex; margin-top: 16px; }
 .portfolio-proof-heading { display: block; }
 .portfolio-proof-heading > .text-link { display: inline-block; margin-top: 18px; }
 .portfolio-marks { grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 10px; margin-top: 22px; }
 .portfolio-mark { height: 78px; padding: 10px; }
 .portfolio-mark .portfolio-logo { height: 48px; }
 .portfolio-mark .portfolio-logo--faben { width: 48px; }
 .portfolio-proof .eyebrow { font-size: 11px; }
 .portfolio-proof { padding-block: 38px; }
}
@media(max-width: 480px) {
 .portfolio-marks { grid-template-columns: repeat(2, minmax(0, 1fr)); }
 .portfolio-mark:last-child { grid-column: 1 / -1; width: calc((100% - 10px) / 2); justify-self: center; }
}
.access-motion .portfolio-logo, .access-motion .peek-plus { animation: none !important; transition: none !important; }
@media(prefers-reduced-motion: reduce) { .portfolio-logo, .peek-plus, .project-card, .portfolio-mark { animation: none !important; transition: none !important; } }