/* Brand identity project and service. */
.bg-zb{background:#ece6dc;color:#14181d}
.card .bg-zb .clbadge-zb{width:clamp(95px,9vw,122px);height:auto;border-radius:0;top:clamp(24px,2.6vw,36px);inset-inline-end:clamp(24px,2.6vw,36px)}
.card .bg-zb .ctitle::before{display:block;width:clamp(108px,10vw,140px);height:clamp(70px,7vw,90px)}
.brand-visual{width:100%;margin:clamp(20px,3vw,32px) 0 0;aspect-ratio:1.5;overflow:hidden;border-radius:12px 12px 0 0}
.brand-visual img{width:100%;height:100%;object-fit:contain}
.branding-offer{max-width:1180px;margin:clamp(60px,8vw,120px) auto;padding:clamp(22px,4vw,52px);display:grid;grid-template-columns:minmax(0,1fr) minmax(0,.9fr);gap:clamp(28px,5vw,72px);align-items:center;border:1px solid rgba(255,255,255,.18);border-radius:24px;background:#14181d;color:#f4efe6;scroll-margin-top:110px}
.branding-offer .kicker{color:#8badff}
.branding-offer h2{font-size:clamp(2.2rem,4.6vw,4.8rem);line-height:1.05;letter-spacing:-.03em;margin:.5em 0 .35em}
.branding-offer p{max-width:46ch;line-height:1.7;color:rgba(244,239,230,.78)}
.branding-offer ul{list-style:none;padding:0;margin:25px 0;display:grid;gap:8px}
.branding-offer li::before{content:'↗';color:#8badff;margin-inline-end:10px}
.branding-offer-actions{display:flex;gap:15px 25px;flex-wrap:wrap;margin-top:28px}
.branding-offer-actions a{border-bottom:1px solid currentColor;padding-bottom:5px;color:#f4efe6;font-weight:650}
.branding-offer-actions a:hover{color:#8badff}
.branding-offer-actions a:focus-visible,.card:focus-visible{outline:2px solid #8badff;outline-offset:5px}
.branding-offer-image{min-width:0;aspect-ratio:1;overflow:hidden;border-radius:14px}
.branding-offer-image img{width:100%;height:100%;object-fit:cover}
body.flow-case .brand-case-image img{width:100%;margin:auto}
body.flow-case .brand-case-image figcaption,body.flow-case .brand-case-gallery figcaption{font-size:.78rem;color:rgba(14,14,14,.58);margin-top:10px}
body.flow-case .brand-case-image figcaption{margin-inline:auto}
body.flow-case .brand-case-gallery{display:grid;grid-template-columns:1.35fr 1fr;gap:20px;margin-block:60px}
body.flow-case .brand-case-gallery figure{min-width:0}
body.flow-case .brand-case-gallery img{width:100%;height:100%;max-height:420px;object-fit:cover;border-radius:14px}
@media(max-width:700px){.branding-offer{grid-template-columns:1fr;margin-inline:20px}.branding-offer h2{font-size:2.5rem}.branding-offer-image{aspect-ratio:1.25}body.flow-case .brand-case-gallery{grid-template-columns:1fr}}
@media(max-width:480px){.card .bg-zb .clbadge-zb{width:88px;top:22px;inset-inline-end:22px}.card .bg-zb .ctitle::before{width:99px;height:60px}}

/* Give the branding project the same full-row emphasis as the featured website. */
.card.card-brand-feature{grid-column:1/-1}
.flow-home #work .card.card-brand-feature .media,.flow-work-page .card.card-brand-feature .media{display:grid;grid-template-columns:minmax(0,.65fr) minmax(0,1fr);align-items:center;gap:clamp(28px,4vw,58px);min-height:510px;padding:clamp(30px,3.8vw,48px);border-radius:22px}
.card.card-brand-feature .brand-card-copy{min-width:0}
.card.card-brand-feature .bg-zb .clbadge-zb{position:static;width:clamp(140px,14vw,185px);height:auto;display:block;margin-bottom:40px}
.card.card-brand-feature .bg-zb .ctitle{font-size:clamp(2rem,3.5vw,3.3rem);line-height:1.08;max-width:11em;margin:0;letter-spacing:-.025em}
.card.card-brand-feature .bg-zb .ctitle::before{display:none}
.brand-card-summary{font-size:clamp(.95rem,1.2vw,1.12rem);line-height:1.6;max-width:29ch;color:rgba(20,24,29,.62);margin:24px 0 0}
.card.card-brand-feature .brand-visual{margin:0;aspect-ratio:1.5;border-radius:14px;overflow:hidden}
.card.card-brand-feature .brand-visual img{display:block;object-fit:contain}
html[dir="rtl"] .card.card-brand-feature .bg-zb .ctitle{font-family:Alexandria,sans-serif;line-height:1.35;letter-spacing:0}

/* Individual logo versions, colour specifications and applications. */
.zb-identity-showcase{margin-bottom:clamp(34px,5vw,66px);scroll-margin-top:115px}
.zb-logo-variants{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:16px}
.zb-logo-panel{min-width:0;margin:0;padding:clamp(24px,3vw,38px);border-radius:16px;display:flex;flex-direction:column;justify-content:center;align-items:center;aspect-ratio:1.05;border:1px solid rgba(20,24,29,.09)}
.zb-logo-panel img{width:100%;max-width:260px;height:auto;max-height:205px;flex:1;object-fit:contain}
.zb-logo-panel figcaption{font:500 .74rem/1.5 Inter,sans-serif;opacity:.65;margin-top:28px;text-align:center}
.zb-bone{background:#F4EFE6;color:#14181D}
.zb-ink{background:#14181D;color:#F4EFE6}
.zb-cobalt{background:#2563EB;color:#fff}
.zb-colour-palette{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));margin-top:16px;border-radius:16px;overflow:hidden;border:1px solid rgba(20,24,29,.09)}
.zb-colour-palette>div{min-height:150px;padding:24px;display:flex;flex-direction:column;justify-content:flex-end;gap:7px}
.zb-colour-palette span{font-weight:600;font-size:.9rem}
.zb-colour-palette code{font:.75rem/1.5 ui-monospace,Consolas,monospace;direction:ltr;unicode-bidi:isolate}
.zb-system-caption{font-size:.8rem;line-height:1.65;color:rgba(14,14,14,.6);margin:14px 0 0;max-width:66ch}
.zb-applications{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:22px;margin-bottom:clamp(45px,6vw,80px)}
.zb-applications figure{margin:0;min-width:0}
.zb-applications img{display:block;width:100%;aspect-ratio:1;height:auto;object-fit:contain;background:#E7E1D7;border-radius:16px}
.zb-applications figcaption{font-size:.8rem;line-height:1.6;margin-top:12px;color:rgba(14,14,14,.6)}
html[dir="rtl"] .zb-logo-panel figcaption{font-family:Alexandria,sans-serif}
@media(max-width:760px){
 .flow-home #work .card.card-brand-feature .media,.flow-work-page .card.card-brand-feature .media{grid-template-columns:1fr;min-height:0;padding:26px 22px 22px;gap:30px}
 .card.card-brand-feature .bg-zb .clbadge-zb{width:125px;margin-bottom:24px}
 .card.card-brand-feature .bg-zb .ctitle{font-size:clamp(1.65rem,6.8vw,2.5rem);max-width:13em}
 .brand-card-summary{font-size:.9rem;margin-top:15px;max-width:31ch}
 .card.card-brand-feature .brand-visual{border-radius:10px}
 .zb-logo-variants{grid-template-columns:1fr;gap:12px}
 .zb-logo-panel{aspect-ratio:1.45;padding:28px}
 .zb-logo-panel img{max-width:230px;max-height:170px}
 .zb-logo-panel figcaption{margin-top:16px}
 .zb-colour-palette>div{padding:16px 12px;min-height:115px}
 .zb-colour-palette span{font-size:.78rem}
 .zb-colour-palette code{font-size:.67rem}
 .zb-applications{grid-template-columns:1fr;gap:28px}
 .zb-applications img{aspect-ratio:1.2;object-fit:contain;background:#E7E1D7}
}