/* Luma launch and case-study entry points. */
.project-launch-badge,.detail-launch-badge{display:inline-flex;align-items:center;gap:7px;width:max-content;white-space:nowrap;border:1px solid #18181b18;border-radius:999px;background:#f4f2ec;color:#282828;font:500 10px/1 Interference,monospace;letter-spacing:.025em;padding:9px 12px}
.project-launch-badge::before,.detail-launch-badge::before{content:'';width:6px;height:6px;border-radius:50%;background:#f46a43;flex:none}
.project-launch-badge{position:absolute;left:12px;top:12px;z-index:5;pointer-events:none}
.detail-launch-badge{font-size:10px;vertical-align:middle;margin-left:12px;padding:7px 10px;letter-spacing:.025em}
dialog.is-luma-case .detail-title{overflow:visible;display:flex;align-items:flex-start;gap:12px}
dialog.is-luma-case .detail-title-text{flex:1;min-width:0}
dialog.is-luma-case .detail-launch-badge{flex:none;margin:7px 0 0}
@media(max-width:760px){
 .project-launch-badge{left:8px;top:8px;font-size:8px;padding:7px 9px;gap:5px}
 .detail-launch-badge{font-size:8px;margin-left:9px;padding:6px 8px}

 dialog.is-luma-case .detail-title{max-width:none}
}

.lm-build-points{display:block;margin:24px 0 0;border-top:1px solid var(--line)}
.lm-build-points>div{display:block;padding:16px 0;border-bottom:1px solid var(--line)}
.lm-build-points dt,.lm-build-points dd{padding:0;border:0;width:auto;min-height:0}
.lm-build-points dt{font:500 clamp(20px,2vw,24px)/1.15 Teka,Basis,sans-serif;letter-spacing:-.025em}
.lm-build-points dd{margin:7px 0 0;font-size:14px;line-height:1.5;color:var(--muted);max-width:40ch}

/* ---- 9 Oct: launch badge, quiet "New", case-study link ---- */
/* Grid: a small badge on the photo's top-left corner, the same family as the gallery tags. */
.project-launch-badge{left:12px;top:12px;right:auto;width:auto;height:auto;display:inline-flex!important;flex-direction:row!important;align-items:center;gap:6px!important;padding:6px 9px 5px!important;border:0!important;border-radius:3px!important;background:#F5F6F7eb!important;color:#18181B!important;font:500 9px/1 Interference,ui-monospace,monospace!important;letter-spacing:.06em!important;text-transform:uppercase;transform:none!important;box-shadow:0 1px 2px #0000001a;backdrop-filter:blur(6px)}
.project-launch-badge span+span::before{content:' '}
.project-launch-badge::before{content:''!important;display:block!important;width:6px;height:6px;border-radius:50%;background:#F46A43;flex:none}
html.tf-framed .tf-work .portfolio:not(.is-list) .project-launch-badge{left:calc(17.568cqw + 12px);top:calc(17.568cqw + 12px)}
/* cqw here is the photo's content box: frame padding 13% (4.5% on phones) of the tile = 17.568cqw (4.945cqw) */
@media(max-width:600px){html.tf-framed .tf-work .portfolio:not(.is-list) .project-launch-badge,.project-launch-badge{left:calc(4.945cqw + 8px)!important;top:calc(4.945cqw + 8px)!important;font-size:8px!important;line-height:1!important;padding:6px 8px 5.5px 7px!important;gap:6px!important;border-radius:3px!important}}
/* Project window: "New" sits quietly in the status line, after CLIENT PROJECT. */
dialog.is-luma-case .detail-title{display:block!important}
dialog.is-luma-case .detail-title-text{display:inline}
dialog .project-status .detail-launch-badge{all:unset;display:inline-flex;align-items:center;gap:6px;margin:0 0 0 14px!important;color:#F46A43;font:inherit;letter-spacing:inherit;text-transform:uppercase}
dialog .project-status .detail-launch-badge::before{content:'';width:5px;height:5px;border-radius:50%;background:currentColor}
/* Read the case study: the site's link pattern (words, then an ink square with the arrow), as a quiet full-width row. */

/* Any gallery image that opens a full page says so. */
.gallery-image.has-full{position:relative}
.gallery-image.has-full::after{content:'Full page \2197';position:absolute;left:10px;top:10px;z-index:2;font:500 9px/1 Interference,ui-monospace,monospace;letter-spacing:.05em;text-transform:uppercase;background:#18181Be0;color:#F5F6F7;padding:6px 8px 5px;border-radius:3px;pointer-events:none;backdrop-filter:blur(4px)}
@media(hover:none){.gallery-image.has-full::after{content:'Tap for the full page'}}

/* 9 Oct (4): Luma case-study button = the header "Let's chat" component; boxed New; badge 12px from the frame corner above phones */
dialog.is-luma-case .detail-info>.detail-link{display:inline-flex!important;align-items:center!important;gap:20px!important;width:auto!important;max-width:none!important;min-height:44px!important;margin:0 0 20px!important;padding:0 7px 0 0!important;border:0!important;border-radius:0!important;background:none!important;color:var(--ink)!important;font:700 18px/1.15 Basis,Arial,sans-serif!important;letter-spacing:-.045em!important;text-decoration:none!important;cursor:pointer;transition:color .45s}
dialog.is-luma-case .detail-link .link-arrow{position:relative;display:block;flex:none;width:13px;height:13px;isolation:isolate}
dialog.is-luma-case .detail-link .link-arrow::before{content:'';position:absolute;inset:-6.5px;z-index:-1;background:#DEDFE3;transition:background .45s}
dialog.is-luma-case .detail-link .link-arrow svg{display:block;width:13px;height:13px;transform:rotate(135deg);transition:transform .65s cubic-bezier(.2,.65,.3,1)}
@media(hover:hover) and (pointer:fine){dialog.is-luma-case .detail-link:hover .link-arrow svg{transform:translateY(2px) rotate(135deg)}dialog.is-luma-case .detail-link:hover .link-arrow::before{background:#D3D4D8}}
dialog.is-luma-case .detail-link:active .link-arrow::before{background:#C9CACE}
dialog.is-luma-case .detail-link:focus-visible{outline:2px solid var(--accent)!important;outline-offset:6px!important}
body.dark dialog.is-luma-case .detail-link .link-arrow::before{background:#2A2A2E}
dialog.is-luma-case .detail-copy{margin-bottom:20px!important}
@media(max-width:760px){dialog.is-luma-case .detail-info>.detail-link{font-size:17px!important}}
dialog .project-status:has(.detail-launch-badge){display:flex;align-items:center;gap:12px}
dialog .project-status .detail-launch-badge{all:unset;display:inline-flex!important;align-items:center;gap:5px;box-sizing:border-box;height:19px;padding:0 7px 0 6px!important;margin:0!important;border:1px solid #18181B1f;border-radius:3px;background:#F5F6F7;color:#18181B;font:inherit;line-height:1;letter-spacing:inherit;text-transform:uppercase}
dialog .project-status .detail-launch-badge::before{content:''!important;display:block!important;width:4px;height:4px;border-radius:50%;background:#F46A43;flex:none}
body.dark dialog .project-status .detail-launch-badge{background:#232326;border-color:#ffffff1f;color:#F5F6F7}
html.tf-framed .tf-work .portfolio:not(.is-list) .project-launch-badge{left:12px;top:12px}