/* ==========================================================================
   Service pages, explicit-play videos and service links.
   Loaded only by the five service templates, the homepage and case studies.
   Builds on lz-core.css tokens; no global selectors.
   ========================================================================== */

.lzs-hero__note { margin-top: 0.9rem; }

/* Hero service list (agency hub) */
.lzs-hero__services { background: var(--lz-ink-2); border: 1px solid rgba(255, 255, 255, 0.12); border-radius: var(--lz-radius-lg); padding: 1.25rem; }
.lzs-hero__services-title { font-weight: 700; color: var(--lz-signal); margin: 0 0 0.5rem; }
.lzs-hero__services ul { list-style: none; margin: 0; padding: 0; display: grid; }
.lzs-hero__services a { display: grid; gap: 0.15rem; padding: 0.85rem 0; border-top: 1px solid rgba(255, 255, 255, 0.12); color: var(--lz-on-ink); text-decoration: none; }
.lzs-hero__services a:hover strong { text-decoration: underline; text-decoration-color: var(--lz-signal); text-decoration-thickness: 3px; text-underline-offset: 0.2em; }
.lzs-hero__services strong { font-family: var(--lz-font-display); font-stretch: 108%; font-size: 1.05rem; }
.lzs-hero__services span { font-size: 0.92rem; color: var(--lz-on-ink-muted); }

/* Landing page anatomy illustration */
.lzs-anatomy { margin: 0; display: grid; justify-items: center; gap: 0.75rem; }
.lzs-anatomy__phone { width: min(100%, 280px); padding: 1.1rem 0.9rem 1.4rem; background: var(--lz-surface); border: 8px solid var(--lz-ink-3); border-radius: 28px; display: grid; gap: 0.5rem; box-shadow: 0 30px 60px -30px rgba(0, 0, 0, 0.6); }
.lzs-anatomy__row { display: block; padding: 0.65rem 0.75rem; border-radius: var(--lz-radius-sm); background: var(--lz-paper); border-left: 3px solid var(--lz-line-strong); color: var(--lz-ink); font-size: 0.85rem; font-weight: 600; line-height: 1.3; }
.lzs-anatomy__row--head { background: var(--lz-ink); color: var(--lz-on-ink); border-left-color: var(--lz-signal); font-family: var(--lz-font-display); font-stretch: 108%; font-size: 0.95rem; }
.lzs-anatomy__row--cta { background: var(--lz-signal); border-left-color: var(--lz-ink); text-align: center; }
.lzs-anatomy figcaption { color: var(--lz-on-ink-muted); text-align: center; }

/* What's included: a ruled list rather than a card grid */
.lzs-included { gap: 0; border-top: 2px solid var(--lz-ink); }
.lzs-included__item { padding: 1.25rem 1.5rem 1.4rem 0; border-bottom: 1px solid var(--lz-line); }
.lzs-included__item h3 { font-size: var(--lz-step-1); margin-bottom: 0.35rem; }
.lzs-included__item p { margin: 0; color: var(--lz-muted); }
@media (min-width: 961px) {
	.lzs-included__item:not(:nth-child(3n + 1)) { padding-left: 1.5rem; border-left: 1px solid var(--lz-line); }
}
@media (min-width: 641px) and (max-width: 960px) {
	.lzs-included__item:nth-child(even) { padding-left: 1.5rem; border-left: 1px solid var(--lz-line); }
}
.lzs-notfit ul { padding-left: 1.2rem; color: var(--lz-muted); }
.lzs-reported { font-weight: 700; color: var(--lz-ink) !important; }

/* Related services */
.lzs-related { list-style: none; margin: 0; padding: 0; display: grid; grid-template-columns: repeat(auto-fit, minmax(220px, 1fr)); gap: 0.75rem; }
.lzs-related a { display: grid; gap: 0.3rem; height: 100%; padding: 1.1rem 1.2rem; background: var(--lz-surface); border: 1px solid var(--lz-line); border-left: 4px solid var(--lz-signal); border-radius: var(--lz-radius); text-decoration: none; color: var(--lz-text); }
.lzs-related a:hover { border-color: var(--lz-ink); border-left-color: var(--lz-signal); color: var(--lz-text); }
.lzs-related strong { font-family: var(--lz-font-display); font-stretch: 106%; font-size: 1.05rem; color: var(--lz-ink); }
.lzs-related span { font-size: 0.93rem; color: var(--lz-muted); }

.lzs-call { margin: 0.5rem 0 0; padding-left: 1.2rem; color: var(--lz-ink-2); }
.lzs-call li { margin-bottom: 0.25rem; }

/* Explicit-play videos: nothing loads until the visitor presses play */
.lzs-videos { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: var(--lz-space-4); }
.lzs-videos:has(.lzs-video--landscape) { grid-template-columns: repeat(2, minmax(0, 1fr)); }
.lzs-video { margin: 0; }
.lzs-video__frame { position: relative; border-radius: var(--lz-radius); overflow: hidden; background: var(--lz-ink-3); }
.lzs-video video { display: block; width: 100%; height: 100%; object-fit: cover; background: var(--lz-ink-3); }
.lzs-video--portrait .lzs-video__frame { aspect-ratio: 9 / 16; max-height: 560px; }
.lzs-video--landscape .lzs-video__frame { aspect-ratio: 16 / 9; }
.lzs-video--landscape video { object-fit: contain; }
.lzs-video__play {
	position: absolute; inset: 0;
	display: grid; place-content: center; justify-items: center; gap: 0.6rem;
	width: 100%; border: 0; cursor: pointer;
	background:
		repeating-linear-gradient(90deg, rgba(255, 194, 61, 0.18) 0 2px, transparent 2px 24px) 0 100% / 100% 12px no-repeat,
		var(--lz-ink-2);
	color: var(--lz-on-ink);
	font: 700 1rem/1.2 var(--lz-font-body);
}
.lzs-video__icon { width: 64px; height: 64px; border-radius: 50%; background: var(--lz-signal); position: relative; transition: transform 0.15s var(--lz-ease); }
.lzs-video__icon::after { content: ""; position: absolute; left: 26px; top: 20px; border-left: 18px solid var(--lz-ink); border-top: 12px solid transparent; border-bottom: 12px solid transparent; }
.lzs-video__play:hover .lzs-video__icon { transform: scale(1.06); }
.lzs-video__play:focus-visible { outline: 3px solid var(--lz-signal); outline-offset: -6px; }
.lzs-video.is-active .lzs-video__play { display: none; }
.lzs-video figcaption { font-size: var(--lz-step--1); margin-top: 0.5rem; color: var(--lz-on-ink-muted); }
.lzd-section--paper .lzs-video figcaption, .lzd-section--surface .lzs-video figcaption { color: var(--lz-muted); }

@media (max-width: 960px) {
	.lzs-videos { grid-template-columns: repeat(2, minmax(0, 1fr)); }
}
@media (max-width: 640px) {
	.lzs-videos { grid-auto-flow: column; grid-template-columns: none; grid-auto-columns: 74%; overflow-x: auto; scroll-snap-type: x mandatory; padding-bottom: 0.75rem; }
	.lzs-videos:has(.lzs-video--landscape) { grid-auto-columns: 88%; }
	.lzs-video { scroll-snap-align: start; }
}

/* Homepage: links to the service pages */
.lzs-home-services { list-style: none; margin: 1.5rem 0 0; padding: 0; display: flex; flex-wrap: wrap; gap: 0.5rem 1.25rem; }
.lzs-home-services a { font-weight: 700; color: var(--lz-ink); text-decoration: underline; text-decoration-color: var(--lz-signal); text-decoration-thickness: 3px; text-underline-offset: 0.25em; }
.lzs-panel-link { display: inline-block; margin-top: 0.75rem; font-weight: 700; color: var(--lz-ink); text-decoration: underline; text-decoration-color: var(--lz-signal); text-decoration-thickness: 3px; text-underline-offset: 0.25em; }

/* Case studies: services used per case */
.lzs-case-services { list-style: none; margin: 0 0 1rem; padding: 0; display: flex; flex-wrap: wrap; gap: 0.4rem; }
.lzs-case-services a { display: inline-block; padding: 0.3rem 0.65rem; border: 1px solid var(--lz-line-strong); border-radius: var(--lz-radius-sm); font-size: 0.86rem; font-weight: 600; color: var(--lz-ink); text-decoration: none; background: var(--lz-surface); }
.lzs-case-services a:hover { border-color: var(--lz-ink); }
.lzs-case-summary { font-size: var(--lz-step-1); line-height: 1.5; color: var(--lz-text); max-width: 62ch; }
.lzs-videos--six { grid-template-columns: repeat(6, minmax(0, 1fr)); }
@media (max-width: 960px) { .lzs-videos--six { grid-template-columns: repeat(3, minmax(0, 1fr)); } }
@media (max-width: 640px) { .lzs-videos--six { grid-template-columns: none; } }
.lzd-on-ink a:not(.lzd-btn), .lzd-section--ink .lzd-head a { color: var(--lz-on-ink); }