/* ==========================================================================
   ZYNGLE — HOMEPAGE
   Loaded on the front page only.
   ========================================================================== */

/* --------------------------------------------------------------------------
   Hero — Act I
   -------------------------------------------------------------------------- */

.zg-hero { padding-block: clamp(4rem, 2rem + 8vw, 8rem) clamp(3rem, 2rem + 4vw, 6rem); }

.zg-hero__grid {
	display: grid;
	grid-template-columns: minmax(0, 1.05fr) minmax(0, 0.95fr);
	gap: clamp(2rem, 1rem + 4vw, 5rem);
	align-items: center;
}

@media (max-width: 980px) {
	.zg-hero__grid { grid-template-columns: 1fr; }
}

.zg-hero__eyebrow { margin-bottom: var(--zg-6); }
.zg-hero__title { margin-bottom: var(--zg-6); max-width: 14ch; }
.zg-hero__lead { margin-bottom: var(--zg-8); max-width: 48ch; }

.zg-hero__signal {
	display: flex;
	align-items: center;
	gap: var(--zg-3);
	margin-top: var(--zg-12);
	padding-top: var(--zg-6);
	border-top: 1px solid var(--zg-border);
	font-family: var(--zg-font-mono);
	font-size: var(--zg-text-caption);
	color: var(--zg-text-muted);
}

/* --------------------------------------------------------------------------
   The Plan — the signature element.
   Four capability blocks, one trunk, one outcome node. Hairlines only.
   -------------------------------------------------------------------------- */

.zg-plan { width: 100%; height: auto; overflow: visible; }

.zg-plan__grid line { stroke: var(--zg-border); stroke-width: 0.5; }

.zg-plan__block {
	fill: none;
	stroke: var(--zg-border-strong);
	stroke-width: 1;
	transition: stroke var(--zg-duration) var(--zg-ease);
}

.zg-plan__route {
	fill: none;
	stroke: var(--zg-border-strong);
	stroke-width: 1;
	transition: stroke var(--zg-duration) var(--zg-ease), opacity var(--zg-duration) var(--zg-ease);
}

.zg-plan__label {
	font-family: var(--zg-font-mono);
	font-size: 11px;
	letter-spacing: 0.08em;
	fill: var(--zg-text-secondary);
	transition: fill var(--zg-duration) var(--zg-ease);
}

.zg-plan__node { fill: var(--zg-bg); stroke: var(--zg-accent); stroke-width: 1.5; }
.zg-plan__node-label { font-family: var(--zg-font-mono); font-size: 11px; letter-spacing: 0.08em; fill: var(--zg-text); }

/* The single marigold route. One accent, one place. */
.zg-plan__route--lit { stroke: var(--zg-accent); }

/* Draw-in on load. Runs once. */
.zg-plan[data-animate="true"] .zg-plan__route,
.zg-plan[data-animate="true"] .zg-plan__block {
	stroke-dasharray: 900;
	stroke-dashoffset: 900;
	animation: zg-draw 900ms var(--zg-ease) forwards;
}

.zg-plan[data-animate="true"] .zg-plan__group:nth-child(1) * { animation-delay: 0ms; }
.zg-plan[data-animate="true"] .zg-plan__group:nth-child(2) * { animation-delay: 90ms; }
.zg-plan[data-animate="true"] .zg-plan__group:nth-child(3) * { animation-delay: 180ms; }
.zg-plan[data-animate="true"] .zg-plan__group:nth-child(4) * { animation-delay: 270ms; }

@keyframes zg-draw { to { stroke-dashoffset: 0; } }

/* Hover coupling: highlighting a capability row lights its route. */
.zg-plan[data-active] .zg-plan__group { opacity: 0.3; }
.zg-plan[data-active="growth"] .zg-plan__group[data-plane="growth"],
.zg-plan[data-active="digital-experience"] .zg-plan__group[data-plane="digital-experience"],
.zg-plan[data-active="technology"] .zg-plan__group[data-plane="technology"],
.zg-plan[data-active="brand"] .zg-plan__group[data-plane="brand"] { opacity: 1; }

.zg-plan__group { transition: opacity var(--zg-duration) var(--zg-ease); }

@media (prefers-reduced-motion: reduce) {
	.zg-plan[data-animate="true"] .zg-plan__route,
	.zg-plan[data-animate="true"] .zg-plan__block { stroke-dasharray: none; stroke-dashoffset: 0; animation: none; }
}

.zg-hero__plan { min-width: 0; }

@media (max-width: 980px) {
	/* Crop to the central blocks rather than scaling the whole schematic down
	   to illegibility on a phone. */
	.zg-hero__plan { margin-inline: calc(var(--zg-gutter) * -1); }
	.zg-hero__plan .zg-plan { min-height: 240px; }
}

/* --------------------------------------------------------------------------
   Trust strip
   -------------------------------------------------------------------------- */

.zg-trust { padding-block: var(--zg-8); border-top: 1px solid var(--zg-border); border-bottom: 1px solid var(--zg-border); }
.zg-trust__inner { display: grid; grid-template-columns: minmax(0, 0.5fr) minmax(0, 1fr); gap: var(--zg-8); align-items: center; }
.zg-trust__label { font-family: var(--zg-font-mono); font-size: var(--zg-text-label); letter-spacing: 0.08em; color: var(--zg-text-muted); text-transform: uppercase; }

@media (max-width: 780px) {
	.zg-trust__inner { grid-template-columns: 1fr; gap: var(--zg-4); }
}

.zg-logo-wall { display: flex; flex-wrap: wrap; align-items: center; gap: var(--zg-8); }
.zg-logo-wall img { max-height: 28px; width: auto; opacity: 0.7; filter: grayscale(1); transition: opacity var(--zg-duration) var(--zg-ease); }
.zg-logo-wall img:hover { opacity: 1; }

/* --------------------------------------------------------------------------
   Capability index — replaces the services card grid entirely.
   Four full-width rows. No cards, no icons in a grid.
   -------------------------------------------------------------------------- */

.zg-capabilities__list { border-top: 1px solid var(--zg-border); margin-top: var(--zg-16); }

.zg-capability {
	display: block;
	border-bottom: 1px solid var(--zg-border);
	padding-block: clamp(1.75rem, 1rem + 2vw, 2.75rem);
	transition: background-color var(--zg-duration) var(--zg-ease);
}

.zg-capability__row {
	display: grid;
	grid-template-columns: 6ch minmax(0, 1fr) minmax(0, 1fr) auto;
	gap: var(--zg-6);
	align-items: baseline;
}

.zg-capability__index { font-family: var(--zg-font-mono); font-size: var(--zg-text-caption); color: var(--zg-text-muted); }

.zg-capability__name {
	font-family: var(--zg-font-display);
	font-size: clamp(1.5rem, 1rem + 2vw, 2.5rem);
	font-weight: 500;
	letter-spacing: -0.03em;
	line-height: 1.05;
	transition: color var(--zg-duration) var(--zg-ease);
}

.zg-capability__services { display: flex; flex-wrap: wrap; gap: var(--zg-2) var(--zg-4); list-style: none; }
.zg-capability__services li { font-family: var(--zg-font-mono); font-size: var(--zg-text-caption); color: var(--zg-text-secondary); }

.zg-capability__arrow { width: 18px; height: 18px; color: var(--zg-text-muted); transition: transform var(--zg-duration) var(--zg-ease), color var(--zg-duration) var(--zg-ease); }

.zg-capability:hover .zg-capability__name { color: var(--zg-text); }
.zg-capability:hover .zg-capability__arrow { transform: translate(3px, -3px); color: var(--zg-accent); }

.zg-capability__detail {
	max-width: 60ch;
	margin-top: var(--zg-3);
	padding-left: calc(6ch + var(--zg-6));
	color: var(--zg-text-secondary);
	font-size: var(--zg-text-sm);
}

/* On pointer devices the detail is revealed on hover; on touch it is always
   visible, because replacing an interaction is better than removing it. */
@media (hover: hover) and (min-width: 781px) {
	.zg-capability__detail {
		max-height: 0;
		margin-top: 0;
		opacity: 0;
		overflow: hidden;
		transition: max-height var(--zg-duration-slow) var(--zg-ease), opacity var(--zg-duration) var(--zg-ease), margin-top var(--zg-duration) var(--zg-ease);
	}

	.zg-capability:hover .zg-capability__detail,
	.zg-capability:focus-within .zg-capability__detail {
		max-height: 8rem;
		margin-top: var(--zg-4);
		opacity: 1;
	}
}

@media (max-width: 780px) {
	.zg-capability__row { grid-template-columns: 1fr auto; gap: var(--zg-3); }
	.zg-capability__index { grid-column: 1 / -1; }
	.zg-capability__services { grid-column: 1 / -1; }
	.zg-capability__detail { padding-left: 0; }
}

/* --------------------------------------------------------------------------
   The argument — one screen, one point, one real artifact.
   -------------------------------------------------------------------------- */

.zg-argument__grid {
	display: grid;
	grid-template-columns: minmax(0, 1fr) minmax(0, 1.1fr);
	gap: clamp(2rem, 1rem + 5vw, 6rem);
	align-items: center;
}

@media (max-width: 900px) { .zg-argument__grid { grid-template-columns: 1fr; } }

.zg-argument__points { list-style: none; margin-top: var(--zg-8); display: grid; gap: var(--zg-6); }
.zg-argument__point { display: grid; gap: var(--zg-1); padding-left: var(--zg-6); border-left: 1px solid var(--zg-border); }
.zg-argument__point strong { font-weight: 600; }
.zg-argument__point span { color: var(--zg-text-secondary); font-size: var(--zg-text-sm); }

.zg-artifact { border: 1px solid var(--zg-border); border-radius: var(--zg-radius-sm); background: var(--zg-surface); overflow: hidden; }
.zg-artifact__bar { display: flex; align-items: center; justify-content: space-between; padding: var(--zg-3) var(--zg-4); border-bottom: 1px solid var(--zg-border); font-family: var(--zg-font-mono); font-size: var(--zg-text-label); color: var(--zg-text-muted); }
.zg-artifact__body { padding: var(--zg-6); }
.zg-artifact__placeholder { display: grid; place-items: center; min-height: 260px; text-align: center; gap: var(--zg-2); color: var(--zg-text-muted); font-size: var(--zg-text-caption); }

/* --------------------------------------------------------------------------
   Work — one featured study plus editorial split entries. Never three
   identical columns.
   -------------------------------------------------------------------------- */

.zg-work__list { display: grid; gap: var(--zg-16); margin-top: var(--zg-16); }

.zg-case { display: grid; gap: var(--zg-6); }

.zg-case--featured { grid-template-columns: minmax(0, 1.25fr) minmax(0, 1fr); gap: clamp(2rem, 1rem + 4vw, 4rem); align-items: center; }
.zg-case--split { grid-template-columns: minmax(0, 1fr) minmax(0, 1fr); gap: clamp(1.5rem, 1rem + 3vw, 3rem); align-items: center; }
.zg-case--split:nth-child(even) .zg-case__media { order: 2; }

@media (max-width: 860px) {
	.zg-case--featured,
	.zg-case--split { grid-template-columns: 1fr; }
	.zg-case--split:nth-child(even) .zg-case__media { order: 0; }
}

.zg-case__media { position: relative; overflow: hidden; border-radius: var(--zg-radius-sm); background: var(--zg-surface); border: 1px solid var(--zg-border); }
.zg-case__media img { width: 100%; aspect-ratio: 4 / 3; object-fit: cover; transition: transform 600ms var(--zg-ease); }
.zg-case:hover .zg-case__media img { transform: scale(1.02); }
.zg-case__media--empty { display: grid; place-items: center; aspect-ratio: 4 / 3; color: var(--zg-text-muted); font-family: var(--zg-font-mono); font-size: var(--zg-text-caption); }

.zg-case__content { min-width: 0; }
.zg-case__meta { display: flex; flex-wrap: wrap; gap: var(--zg-3); font-family: var(--zg-font-mono); font-size: var(--zg-text-label); color: var(--zg-text-muted); margin-bottom: var(--zg-4); }
.zg-case__title { margin-bottom: var(--zg-3); }
.zg-case__title a { transition: color var(--zg-duration-fast) var(--zg-ease); }
.zg-case:hover .zg-case__title a { color: var(--zg-accent); }
.zg-case__summary { color: var(--zg-text-secondary); max-width: 52ch; }
.zg-case__metrics { margin-top: var(--zg-8); }

/* --------------------------------------------------------------------------
   Process — the plan spine, reused at lower fidelity.
   -------------------------------------------------------------------------- */

.zg-process { margin-top: var(--zg-16); }

.zg-process__track { display: grid; grid-template-columns: repeat(6, minmax(0, 1fr)); gap: var(--zg-6); position: relative; }
.zg-process__track::before { content: ""; position: absolute; top: 7px; left: 0; right: 0; height: 1px; background: var(--zg-border); }

.zg-process__step { position: relative; padding-top: var(--zg-8); }
.zg-process__step::before {
	content: "";
	position: absolute;
	top: 3px;
	left: 0;
	width: 9px;
	height: 9px;
	border: 1px solid var(--zg-border-strong);
	background: var(--zg-bg);
	border-radius: 50%;
}
.zg-process__step:first-child::before { border-color: var(--zg-accent); }

.zg-process__name { font-family: var(--zg-font-display); font-size: var(--zg-text-h4); font-weight: 500; letter-spacing: -0.02em; margin-bottom: var(--zg-2); }
.zg-process__body { font-size: var(--zg-text-sm); color: var(--zg-text-secondary); }

@media (max-width: 1000px) {
	.zg-process__track {
		display: flex;
		overflow-x: auto;
		scroll-snap-type: x mandatory;
		gap: var(--zg-8);
		padding-bottom: var(--zg-4);
		scrollbar-width: thin;
	}
	.zg-process__step { flex: 0 0 min(72vw, 280px); scroll-snap-align: start; }
}

/* --------------------------------------------------------------------------
   Insights
   -------------------------------------------------------------------------- */

.zg-insights__grid { display: grid; grid-template-columns: minmax(0, 1.3fr) minmax(0, 1fr); gap: clamp(2rem, 1rem + 4vw, 4rem); margin-top: var(--zg-16); }
@media (max-width: 860px) { .zg-insights__grid { grid-template-columns: 1fr; } }

.zg-article-card { display: grid; gap: var(--zg-3); }
.zg-article-card__meta { display: flex; gap: var(--zg-3); font-family: var(--zg-font-mono); font-size: var(--zg-text-label); color: var(--zg-text-muted); }
.zg-article-card__title { transition: color var(--zg-duration-fast) var(--zg-ease); }
.zg-article-card:hover .zg-article-card__title { color: var(--zg-accent); }
.zg-article-card__media { overflow: hidden; border-radius: var(--zg-radius-sm); border: 1px solid var(--zg-border); }
.zg-article-card__media img { aspect-ratio: 16 / 9; width: 100%; object-fit: cover; }

.zg-article-list { display: grid; gap: var(--zg-6); list-style: none; }
.zg-article-list li { padding-bottom: var(--zg-6); border-bottom: 1px solid var(--zg-border); }
.zg-article-list li:last-child { border-bottom: 0; padding-bottom: 0; }

/* --------------------------------------------------------------------------
   Closing contact — Act III
   -------------------------------------------------------------------------- */

.zg-close__grid { display: grid; grid-template-columns: minmax(0, 1fr) minmax(0, 0.85fr); gap: clamp(2rem, 1rem + 5vw, 6rem); align-items: start; }
@media (max-width: 900px) { .zg-close__grid { grid-template-columns: 1fr; } }

.zg-direct { display: grid; gap: var(--zg-6); margin-top: var(--zg-8); }
.zg-direct__item { display: grid; gap: var(--zg-1); padding-top: var(--zg-4); border-top: 1px solid var(--zg-border); }
.zg-direct__label { font-family: var(--zg-font-mono); font-size: var(--zg-text-label); letter-spacing: 0.06em; text-transform: uppercase; color: var(--zg-text-muted); }
.zg-direct__value { font-size: var(--zg-text-lg); }
.zg-direct__value a:hover { color: var(--zg-accent); }