/* 19/29 Agency homepage — the three businesses, agency first. Uses base.css. */

/* ---------- Shared: a full-bleed photo/video panel with text at the bottom ---------- */
.g-hero, .g-card {
	position: relative; isolation: isolate; overflow: hidden;
	display: flex; flex-direction: column; justify-content: flex-end;
	background: var(--g-ink); color: var(--g-on-dark);
}

/* ---------- Agency hero: the whole first screen ---------- */
.g-hero {
	min-height: 100svh;
	padding: 110px var(--g-gutter) calc(32px + env(safe-area-inset-bottom));
}
.g-hero__media, .g-hero__video, .g-hero__poster, .g-hero__poster img {
	position: absolute; inset: 0; width: 100%; height: 100%;
}
.g-hero__media { z-index: -1; }
.g-hero__video, .g-hero__poster img { object-fit: cover; }
.g-hero__video { z-index: 1; opacity: 0; transition: opacity .6s var(--g-ease); }
.g-video-on .g-hero__video { opacity: 1; }
.g-hero__media::after {
	content: ""; position: absolute; inset: 0; z-index: 2;
	background:
		linear-gradient(180deg, rgba(0,0,0,.5) 0%, rgba(0,0,0,0) 20%),
		linear-gradient(0deg, rgba(0,0,0,.85) 0%, rgba(0,0,0,.45) 40%, rgba(0,0,0,0) 70%);
}

.g-hero__title {
	margin: 0; max-width: 12ch;
	font-size: clamp(44px, 12vw, 104px); font-weight: 600; line-height: .98; letter-spacing: -.02em;
	text-wrap: balance;
}
.g-hero__text {
	margin: 16px 0 0; max-width: 34ch;
	font-size: 18px; line-height: 1.45; color: var(--g-on-dark-muted);
}




/* ---------- Cocktail Shop + AKI: photo panels ---------- */
.g-family__title {
	position: absolute; width: 1px; height: 1px; overflow: hidden; clip: rect(0 0 0 0); white-space: nowrap;
}
.g-family__list { list-style: none; margin: 0; padding: 0; display: grid; }

.g-card {
	min-height: 78svh;
	padding: 0 var(--g-gutter) calc(32px + env(safe-area-inset-bottom));
	border-top: 1px solid rgba(255, 255, 255, .16);
}
.g-card__media { position: absolute; inset: 0; z-index: -1; }
.g-card__img { width: 100%; height: 100%; object-fit: cover; transition: transform .8s var(--g-ease); }
.g-card:hover .g-card__img { transform: scale(1.03); }
.g-card__media::after {
	content: ""; position: absolute; inset: 0;
	background: linear-gradient(0deg, rgba(0,0,0,.85) 0%, rgba(0,0,0,.4) 38%, rgba(0,0,0,0) 65%);
}
.g-card__body { display: flex; flex-direction: column; align-items: flex-start; gap: 8px; }
.g-card__name { margin: 0; font-size: clamp(30px, 8vw, 44px); font-weight: 600; line-height: 1.05; letter-spacing: -.01em; }
.g-card__text { margin: 0 0 14px; max-width: 30ch; font-size: 18px; line-height: 1.45; color: var(--g-on-dark-muted); }

/* ---------- Tablet ---------- */
@media (min-width: 768px) {
	.g-hero { min-height: var(--g-screen); padding-bottom: 56px; }
	.g-hero__text { font-size: 20px; }
	.g-family__list { grid-template-columns: 1fr 1fr; }
	.g-card { min-height: 64svh; padding-bottom: 40px; }
	.g-card + .g-card { border-left: 1px solid rgba(255, 255, 255, .16); }
	.g-card__name { font-size: 34px; }
}

/* ---------- Desktop: agency fills two thirds, the other two stack beside it ---------- */
@media (min-width: 1024px) {
	.g-main { display: grid; grid-template-columns: 2fr 1fr; min-height: var(--g-screen); }
	.g-home .g-top { right: calc(100% / 3); padding-left: 56px; padding-right: 40px; }
	.g-hero { min-height: var(--g-screen); padding: 140px 56px 64px; }
	.g-hero__title { font-size: clamp(64px, 6.4vw, 104px); }

	.g-family { display: flex; }
	.g-family__list { grid-template-columns: 1fr; grid-template-rows: 1fr 1fr; flex: 1; }
	.g-card { min-height: calc(var(--g-screen) / 2); padding: 0 32px 32px; }
	.g-card + .g-card { border-left: 0; }
	.g-card:first-child { border-top: 0; }
	.g-family { border-left: 1px solid rgba(255, 255, 255, .16); }
	.g-card__name { font-size: 30px; }
	.g-card__text { font-size: 17px; margin-bottom: 10px; }
}

@media (min-width: 1440px) {
	.g-hero { padding: 160px 80px 80px; }
	.g-card { padding: 0 40px 40px; }
}

@media (prefers-reduced-motion: reduce) {
	.g-hero__video { display: none; }
	.g-card:hover .g-card__img { transform: none; }
}