/* ==========================================================================
   HypeGrid Studio — main stylesheet
   ========================================================================== */

:root {
	--hg-primary:    #0A0A0A;
	--hg-bg:         #EFEFEF;
	--hg-accent:     #0A0A0A;
	--hg-text:       #0A0A0A;
	--hg-line:       rgba(10,10,10,0.10);
	--hg-line-strong:rgba(10,10,10,0.22);
	--hg-mute:       rgba(10,10,10,0.55);
	--hg-bg-dark:    #0A0A0A;
	--hg-text-light: #EFEFEF;
	--hg-ease:       cubic-bezier(.2,.7,.2,1);
	--hg-radius:     14px;
	--hg-header-h:   76px;
	--hg-content-w:  1280px;
	--hg-content-w-wide: 1480px;
}

/* ---------- Base ---------- */
*, *::before, *::after { box-sizing: border-box; }
html { scroll-behavior: smooth; }
body {
	margin: 0;
	background: var(--hg-bg);
	color: var(--hg-text);
	font-family: 'Inter', system-ui, -apple-system, 'Segoe UI', Roboto, Helvetica, Arial, sans-serif;
	font-size: 17px;
	line-height: 1.55;
	-webkit-font-smoothing: antialiased;
	-moz-osx-font-smoothing: grayscale;
	overflow-x: hidden;
}
img, video, iframe { max-width: 100%; display: block; }
a { color: inherit; text-decoration: none; }
button { font: inherit; cursor: pointer; }
::selection { background: var(--hg-primary); color: var(--hg-text-light); }

.hg-skip {
	position: absolute; left: -9999px; top: -9999px;
}
.hg-skip:focus { left: 1rem; top: 1rem; background: var(--hg-primary); color: var(--hg-text-light); padding: 8px 14px; z-index: 9999; border-radius: 8px; }

/* ---------- Layout ---------- */
.hg-container {
	width: 100%;
	max-width: var(--hg-content-w);
	margin: 0 auto;
	padding: 0 28px;
}
.hg-container--wide { max-width: var(--hg-content-w-wide); }
.hg-section { padding: clamp(72px, 10vw, 140px) 0; position: relative; }
.hg-section--dark { background: var(--hg-bg-dark); color: var(--hg-text-light); }
.hg-section--dark .hg-eyebrow { color: rgba(239,239,239,0.6); }
.hg-section--dark .hg-eyebrow::before { background: rgba(239,239,239,0.6); }

/* ---------- Typography ---------- */
.hg-eyebrow {
	font-family: 'Space Grotesk', 'Inter', sans-serif;
	font-size: 12px;
	letter-spacing: 0.22em;
	text-transform: uppercase;
	color: var(--hg-mute);
	margin: 0 0 22px;
	display: inline-flex;
	align-items: center;
	gap: 10px;
	font-weight: 500;
}
.hg-eyebrow::before {
	content: '';
	display: inline-block;
	width: 28px; height: 1px;
	background: var(--hg-mute);
}

.hg-display {
	font-family: 'Inter', sans-serif;
	font-weight: 800;
	font-size: clamp(36px, 6vw, 80px);
	line-height: 0.98;
	letter-spacing: -0.03em;
	margin: 0 0 28px;
}
.hg-display--xl  { font-size: clamp(48px, 8vw, 112px); }
.hg-display--xxl { font-size: clamp(56px, 11vw, 168px); }
.hg-display em { font-style: normal; font-weight: 800; color: var(--hg-mute); }

.hg-headline {
	font-size: clamp(24px, 3vw, 36px);
	font-weight: 700;
	line-height: 1.15;
	letter-spacing: -0.02em;
	margin: 0 0 16px;
}
.hg-lede {
	font-size: clamp(17px, 1.6vw, 22px);
	line-height: 1.5;
	color: var(--hg-text);
	max-width: 64ch;
	margin: 0 0 28px;
}

/* ---------- Buttons / Links ---------- */
.hg-btn {
	display: inline-flex; align-items: center; gap: 14px;
	padding: 14px 22px;
	border-radius: 999px;
	font-weight: 600;
	font-size: 15px;
	letter-spacing: -0.005em;
	transition: transform .25s var(--hg-ease), background .25s var(--hg-ease), color .25s var(--hg-ease), box-shadow .25s var(--hg-ease);
	border: 1px solid transparent;
	white-space: nowrap;
	line-height: 1;
}
.hg-btn--xl { padding: 18px 28px; font-size: 16px; }
.hg-btn--dark { background: var(--hg-primary); color: var(--hg-text-light); }
.hg-btn--dark:hover { transform: translateY(-2px); box-shadow: 0 10px 24px -10px rgba(10,10,10,0.45); }
.hg-btn--light { background: var(--hg-text-light); color: var(--hg-primary); }
.hg-btn--light:hover { transform: translateY(-2px); box-shadow: 0 10px 24px -10px rgba(239,239,239,0.35); }
.hg-btn--ghost { background: transparent; color: var(--hg-primary); border-color: var(--hg-line-strong); }
.hg-btn--ghost:hover { background: var(--hg-primary); color: var(--hg-text-light); border-color: var(--hg-primary); }
.hg-btn__arrow { display: inline-block; transition: transform .25s var(--hg-ease); }
.hg-btn:hover .hg-btn__arrow { transform: translateX(4px); }

.hg-link {
	display: inline-flex; align-items: center; gap: 8px;
	font-weight: 600;
	border-bottom: 1px solid currentColor;
	padding-bottom: 2px;
	transition: gap .25s var(--hg-ease);
}
.hg-link:hover { gap: 14px; }
.hg-link--inline { border-bottom-style: dashed; opacity: 0.8; }
.hg-link--light { color: var(--hg-text-light); }

/* ---------- Header / Nav ---------- */
.hg-header {
	position: sticky; top: 0; z-index: 100;
	background: rgba(239,239,239,0.78);
	backdrop-filter: blur(14px);
	-webkit-backdrop-filter: blur(14px);
	border-bottom: 1px solid var(--hg-line);
	transition: background .3s var(--hg-ease);
}
.hg-header.is-scrolled {
	background: rgba(239,239,239,0.95);
}
.hg-header__inner {
	max-width: var(--hg-content-w-wide);
	margin: 0 auto;
	padding: 0 28px;
	height: var(--hg-header-h);
	display: flex;
	align-items: center;
	gap: 32px;
}
.hg-header__logo { flex: 0 0 auto; }
.hg-header__logo .custom-logo { max-height: 44px; width: auto; }
.hg-header__logo .custom-logo-link { display: inline-flex; align-items: center; }
/* .hg-wordmark styling lives in the consolidated block below */

.hg-nav { margin-left: auto; }
.hg-nav__list {
	list-style: none; margin: 0; padding: 0;
	display: flex; gap: 8px;
}
.hg-nav__list a {
	display: inline-block;
	padding: 10px 14px;
	font-weight: 500;
	font-size: 15px;
	border-radius: 999px;
	transition: background .2s var(--hg-ease), color .2s var(--hg-ease);
}
.hg-nav__list a:hover,
.hg-nav__list .current-menu-item > a,
.hg-nav__list .current_page_item > a {
	background: var(--hg-primary);
	color: var(--hg-text-light);
}
.hg-header__cta { margin-left: 8px; }

.hg-menu-toggle {
	display: none;
	background: transparent; border: 0;
	width: 44px; height: 44px;
	flex-direction: column; justify-content: center; align-items: center; gap: 6px;
	margin-left: auto;
}
.hg-menu-toggle span { width: 22px; height: 2px; background: var(--hg-primary); transition: transform .25s var(--hg-ease), opacity .25s var(--hg-ease); }
.hg-menu-toggle[aria-expanded="true"] span:nth-child(1) { transform: translateY(8px) rotate(45deg); }
.hg-menu-toggle[aria-expanded="true"] span:nth-child(2) { opacity: 0; }
.hg-menu-toggle[aria-expanded="true"] span:nth-child(3) { transform: translateY(-8px) rotate(-45deg); }

@media (max-width: 900px) {
	.hg-nav, .hg-header__cta { display: none; }
	.hg-menu-toggle { display: inline-flex; }
	.hg-nav.is-open {
		display: block;
		position: fixed;
		inset: var(--hg-header-h) 0 0 0;
		background: var(--hg-bg);
		padding: 24px;
		overflow-y: auto;
		z-index: 99;
	}
	.hg-nav.is-open .hg-nav__list {
		flex-direction: column;
		gap: 0;
	}
	.hg-nav.is-open .hg-nav__list a {
		font-size: 28px;
		font-weight: 700;
		padding: 14px 0;
		border-bottom: 1px solid var(--hg-line);
		border-radius: 0;
		display: block;
	}
	.hg-nav.is-open .hg-nav__list a:hover { background: transparent; color: var(--hg-primary); }
}

/* ---------- Hero ---------- */
.hg-hero {
	position: relative;
	min-height: calc(100vh - var(--hg-header-h));
	display: flex;
	align-items: center;
	overflow: hidden;
	padding: 80px 0 60px;
}
.hg-hero__bg {
	position: absolute; inset: 0;
	pointer-events: none;
	mask-image: radial-gradient(ellipse at 80% 30%, #000 0%, transparent 70%);
	-webkit-mask-image: radial-gradient(ellipse at 80% 30%, #000 0%, transparent 70%);
	opacity: 0.5;
}
.hg-hero__grid {
	display: grid;
	grid-template-columns: repeat(20, 1fr);
	grid-auto-rows: 40px;
	gap: 0;
	height: 100%;
}
.hg-hero__grid span {
	border-right: 1px solid var(--hg-line);
	border-bottom: 1px solid var(--hg-line);
}
.hg-hero__inner {
	position: relative;
	max-width: 1320px;
}
.hg-hero__headline {
	margin: 8px 0 32px;
}
.hg-display__line {
	display: block;
	overflow: hidden;
}
.hg-display__line::after {
	content: '';
}
.hg-hero__sub {
	max-width: 60ch;
}
.hg-hero__cta {
	margin-top: 36px;
	display: flex; flex-wrap: wrap; align-items: center; gap: 24px;
}
.hg-hero__scroll {
	position: absolute;
	left: 28px;
	bottom: 28px;
	font-family: 'Space Grotesk', sans-serif;
	font-size: 11px;
	letter-spacing: 0.3em;
	color: var(--hg-mute);
	display: flex;
	align-items: center;
	gap: 12px;
}
.hg-hero__scroll-line {
	display: block;
	width: 1px;
	height: 60px;
	background: linear-gradient(to bottom, var(--hg-primary), transparent);
	animation: hg-scroll-tick 2.4s var(--hg-ease) infinite;
}
@keyframes hg-scroll-tick {
	0%   { transform: scaleY(0); transform-origin: top; }
	50%  { transform: scaleY(1); transform-origin: top; }
	51%  { transform-origin: bottom; }
	100% { transform: scaleY(0); transform-origin: bottom; }
}

/* ---------- Marquee ---------- */
.hg-marquee {
	border-top: 1px solid var(--hg-line);
	border-bottom: 1px solid var(--hg-line);
	overflow: hidden;
	padding: 22px 0;
	background: var(--hg-bg);
}
.hg-marquee__track {
	display: flex;
	width: max-content;
	animation: hg-marquee 38s linear infinite;
	will-change: transform;
}
.hg-marquee__group {
	display: flex;
	align-items: center;
	gap: 28px;
	padding-right: 28px;
}
.hg-marquee__item {
	font-family: 'Inter', sans-serif;
	font-weight: 700;
	font-size: clamp(22px, 3vw, 40px);
	letter-spacing: -0.02em;
	text-transform: uppercase;
}
.hg-marquee__dot { opacity: 0.4; font-size: 8px; }
@keyframes hg-marquee {
	from { transform: translateX(0); }
	to   { transform: translateX(-50%); }
}

/* ---------- Why Us ---------- */
.hg-whyus__inner {
	display: grid;
	grid-template-columns: 1fr 1fr;
	gap: clamp(40px, 6vw, 96px);
}
.hg-whyus__body p {
	font-size: clamp(17px, 1.4vw, 19px);
	margin: 0 0 18px;
	max-width: 56ch;
}
.hg-whyus__body p:last-of-type { margin-bottom: 28px; }
@media (max-width: 900px) {
	.hg-whyus__inner { grid-template-columns: 1fr; gap: 40px; }
}

.hg-pillars {
	display: grid;
	grid-template-columns: repeat(3, 1fr);
	gap: 1px;
	background: var(--hg-line);
	margin-top: 96px;
	border-top: 1px solid var(--hg-line);
	border-bottom: 1px solid var(--hg-line);
}
.hg-pillar {
	background: var(--hg-bg);
	padding: 40px 32px;
}
.hg-pillar__num {
	font-family: 'Space Grotesk', sans-serif;
	font-size: 14px;
	color: var(--hg-mute);
	letter-spacing: 0.1em;
	display: block;
	margin-bottom: 24px;
}
.hg-pillar__title {
	font-size: 24px;
	font-weight: 700;
	letter-spacing: -0.02em;
	margin: 0 0 12px;
}
.hg-pillar__body { color: var(--hg-mute); margin: 0; font-size: 16px; }
@media (max-width: 800px) {
	.hg-pillars { grid-template-columns: 1fr; }
}

/* ---------- Work preview / Work grid ---------- */
.hg-work-preview__head {
	display: flex; flex-wrap: wrap; align-items: end; justify-content: space-between;
	gap: 24px; margin-bottom: 56px;
}
.hg-work-preview__head .hg-display { margin: 0; flex: 1 1 auto; }

.hg-work-grid {
	display: grid;
	grid-template-columns: repeat(2, 1fr);
	gap: 28px;
}
.hg-work-grid--full {
	margin-top: 64px;
}
.hg-work-card {
	display: block;
	position: relative;
	border-radius: var(--hg-radius);
	overflow: hidden;
	transition: transform .3s var(--hg-ease);
}
.hg-work-card__media {
	position: relative;
	aspect-ratio: 16/10;
	background: #1a1a1a center/cover no-repeat;
	overflow: hidden;
}
.hg-work-card__media::after {
	content: '';
	position: absolute; inset: 0;
	background: linear-gradient(180deg, rgba(0,0,0,0) 50%, rgba(0,0,0,0.5) 100%);
	transition: opacity .3s var(--hg-ease);
}
.hg-work-card:hover .hg-work-card__media { transform: scale(1.02); }
.hg-work-card__play {
	position: absolute;
	top: 50%; left: 50%;
	transform: translate(-50%, -50%);
	width: 64px; height: 64px;
	border-radius: 50%;
	background: rgba(239,239,239,0.95);
	color: var(--hg-primary);
	display: grid; place-items: center;
	transition: transform .3s var(--hg-ease), background .3s var(--hg-ease);
	z-index: 2;
}
.hg-work-card__play .hg-icon { margin-left: 3px; }
.hg-work-card:hover .hg-work-card__play { transform: translate(-50%, -50%) scale(1.08); }
.hg-work-card__meta {
	padding: 18px 4px 4px;
	display: flex; justify-content: space-between; align-items: baseline;
	gap: 16px;
}
.hg-work-card__meta h3 { font-size: 20px; font-weight: 600; letter-spacing: -0.01em; margin: 0; }
.hg-work-card__meta p { margin: 0; color: var(--hg-mute); font-size: 14px; }
.hg-section--dark .hg-work-card__meta p { color: rgba(239,239,239,0.6); }
.hg-section--dark .hg-work-card__meta h3 { color: var(--hg-text-light); }

.hg-work-card--lg .hg-work-card__media { aspect-ratio: 16/11; }

/* Filter */
.hg-filter {
	margin: 56px 0 16px;
	display: flex; flex-wrap: wrap; gap: 8px;
	border-bottom: 1px solid var(--hg-line);
	padding-bottom: 16px;
}
.hg-filter__btn {
	background: transparent; border: 1px solid var(--hg-line-strong);
	border-radius: 999px;
	padding: 8px 16px;
	font-size: 14px; font-weight: 500;
	color: var(--hg-mute);
	transition: all .2s var(--hg-ease);
}
.hg-filter__btn:hover { color: var(--hg-primary); border-color: var(--hg-primary); }
.hg-filter__btn.is-active { background: var(--hg-primary); color: var(--hg-text-light); border-color: var(--hg-primary); }

@media (max-width: 720px) {
	.hg-work-grid { grid-template-columns: 1fr; gap: 24px; }
}

/* ---------- Single Work ---------- */
.hg-work-single__head { padding-bottom: 24px; }
.hg-work-single__meta {
	display: flex;
	flex-wrap: wrap;
	gap: 0;
	margin: 32px 0 0;
	border-top: 1px solid var(--hg-line);
	padding-top: 32px;
}
.hg-work-single__meta > div {
	flex: 1 1 200px;
	padding: 0 24px 0 0;
}
.hg-work-single__meta dt {
	font-family: 'Space Grotesk', sans-serif;
	font-size: 12px;
	letter-spacing: 0.18em;
	text-transform: uppercase;
	color: var(--hg-mute);
	margin-bottom: 6px;
}
.hg-work-single__meta dd {
	margin: 0;
	font-size: 18px;
	font-weight: 600;
}
.hg-work-single__media { padding: 24px 0 80px; }
.hg-video-frame {
	position: relative;
	width: 100%;
	aspect-ratio: 16/9;
	background: #000;
	border-radius: var(--hg-radius);
	overflow: hidden;
}
.hg-video-frame iframe,
.hg-video-frame video {
	position: absolute; inset: 0;
	width: 100%; height: 100%;
	border: 0;
}
.hg-work-single__image img {
	width: 100%; height: auto;
	border-radius: var(--hg-radius);
}

.hg-work-nav { background: var(--hg-bg-dark); color: var(--hg-text-light); padding: 48px 0; }
.hg-work-nav__inner { display: flex; justify-content: space-between; gap: 32px; }
.hg-work-nav__link { display: flex; flex-direction: column; gap: 6px; }
.hg-work-nav__link--right { text-align: right; align-items: flex-end; }
.hg-work-nav__label { font-family: 'Space Grotesk', sans-serif; font-size: 12px; letter-spacing: 0.18em; color: rgba(239,239,239,0.55); text-transform: uppercase; }
.hg-work-nav__title { font-size: 22px; font-weight: 700; letter-spacing: -0.01em; }
.hg-work-nav__link:hover .hg-work-nav__title { color: #fff; }

/* ---------- About ---------- */
.hg-about-hero .hg-display em { display: block; }
.hg-about-intro {
	margin-top: 32px;
	max-width: 70ch;
	font-size: clamp(17px, 1.4vw, 19px);
}
.hg-about-intro p { margin: 0 0 18px; }

.hg-team__head { margin-bottom: 56px; max-width: 36ch; }
.hg-team__grid {
	display: grid; grid-template-columns: repeat(3, 1fr); gap: 28px;
}
.hg-team__card {
	background: var(--hg-bg);
	border: 1px solid var(--hg-line);
	border-radius: var(--hg-radius);
	overflow: hidden;
	display: flex; flex-direction: column;
	transition: transform .3s var(--hg-ease), box-shadow .3s var(--hg-ease);
}
.hg-team__card:hover { transform: translateY(-4px); box-shadow: 0 18px 30px -22px rgba(10,10,10,0.35); }
.hg-team__media { aspect-ratio: 1/1; background: #ddd; overflow: hidden; }
.hg-team__media img { width: 100%; height: 100%; object-fit: cover; }
.hg-team__placeholder {
	width: 100%; height: 100%;
	display: grid; place-items: center;
	background: linear-gradient(135deg, #d9d9d9, #b0b0b0);
	color: var(--hg-bg);
	font-size: 96px; font-weight: 800;
}
.hg-team__body { padding: 24px 24px 28px; }
.hg-team__name { font-size: 22px; font-weight: 700; letter-spacing: -0.01em; margin: 0 0 4px; }
.hg-team__role { color: var(--hg-mute); margin: 0 0 14px; font-size: 14px; font-weight: 500; }
.hg-team__bio { margin: 0; color: var(--hg-text); font-size: 15px; line-height: 1.55; }
@media (max-width: 900px) {
	.hg-team__grid { grid-template-columns: 1fr; }
}

.hg-building__inner { max-width: 50ch; }

/* ---------- CTA Band / Footer ---------- */
.hg-cta-band {
	background: var(--hg-bg-dark);
	color: var(--hg-text-light);
	padding: clamp(80px, 12vw, 160px) 0;
	text-align: center;
	border-top: 1px solid rgba(255,255,255,0.06);
}
.hg-cta-band .hg-eyebrow { color: rgba(239,239,239,0.6); }
.hg-cta-band .hg-eyebrow::before { background: rgba(239,239,239,0.6); }
.hg-cta-band .hg-display { font-size: clamp(40px, 8vw, 120px); }
.hg-cta-band .hg-btn { margin-top: 16px; }

.hg-footer {
	background: var(--hg-bg-dark);
	color: var(--hg-text-light);
	padding: 80px 0 32px;
	border-top: 1px solid rgba(255,255,255,0.08);
}
.hg-footer__grid {
	display: grid;
	grid-template-columns: 2fr 1fr 1fr 1fr;
	gap: 48px;
	margin-bottom: 64px;
}
.hg-footer__brand .hg-wordmark { color: var(--hg-text-light); }
.hg-footer__brand .hg-wordmark em { opacity: 0.55; }
.hg-footer__tag { margin-top: 18px; color: rgba(239,239,239,0.55); max-width: 36ch; font-size: 14px; }
.hg-footer__title {
	font-family: 'Space Grotesk', sans-serif;
	font-size: 12px;
	letter-spacing: 0.22em;
	text-transform: uppercase;
	color: rgba(239,239,239,0.55);
	margin: 0 0 18px;
	font-weight: 500;
}
.hg-footer__address, .hg-footer__contact { color: rgba(239,239,239,0.85); line-height: 1.7; font-size: 14px; }
.hg-footer__contact a { color: rgba(239,239,239,0.85); }
.hg-footer__contact a:hover { color: #fff; }
.hg-footer__social { list-style: none; margin: 0; padding: 0; }
.hg-footer__social li { margin-bottom: 8px; }
.hg-footer__social a { color: rgba(239,239,239,0.85); font-size: 14px; }
.hg-footer__social a:hover { color: #fff; }

.hg-footer__bottom {
	display: flex; justify-content: space-between; align-items: center;
	padding-top: 24px;
	border-top: 1px solid rgba(255,255,255,0.08);
	font-size: 13px;
	color: rgba(239,239,239,0.5);
}
.hg-footer__nav { list-style: none; margin: 0; padding: 0; display: flex; gap: 24px; }
.hg-footer__nav a { color: rgba(239,239,239,0.5); }
.hg-footer__nav a:hover { color: #fff; }

@media (max-width: 900px) {
	.hg-footer__grid { grid-template-columns: 1fr 1fr; gap: 32px; }
	.hg-footer__bottom { flex-direction: column; gap: 16px; text-align: center; }
}
@media (max-width: 540px) {
	.hg-footer__grid { grid-template-columns: 1fr; }
}

/* ---------- 404 ---------- */
.hg-404 { min-height: 80vh; display: grid; place-items: center; position: relative; overflow: hidden; }
.hg-404__inner { text-align: center; max-width: 640px; position: relative; z-index: 1; }
.hg-404 .hg-display--xxl {
	font-size: clamp(140px, 30vw, 320px);
	letter-spacing: -0.06em;
	margin: 0 0 12px;
	-webkit-text-stroke: 2px var(--hg-primary);
	color: transparent;
}
.hg-404__actions { display: flex; flex-wrap: wrap; gap: 16px; justify-content: center; margin-top: 32px; }
.hg-404__grid {
	position: absolute; inset: 0;
	display: grid; grid-template-columns: repeat(8, 1fr); grid-auto-rows: 80px;
	pointer-events: none;
	z-index: 0;
	opacity: 0.4;
}
.hg-404__grid span { border-right: 1px solid var(--hg-line); border-bottom: 1px solid var(--hg-line); }

/* ---------- Prose (default page content) ---------- */
.hg-prose { max-width: 780px; }
.hg-prose h2 { font-size: 32px; font-weight: 700; letter-spacing: -0.02em; margin: 48px 0 16px; }
.hg-prose h3 { font-size: 22px; font-weight: 700; margin: 32px 0 12px; }
.hg-prose p { margin: 0 0 18px; }
.hg-prose ul, .hg-prose ol { padding-left: 24px; margin: 0 0 18px; }
.hg-prose li { margin-bottom: 8px; }
.hg-prose a { border-bottom: 1px solid var(--hg-line-strong); }
.hg-prose a:hover { border-color: var(--hg-primary); }
.hg-prose img { border-radius: var(--hg-radius); margin: 32px 0; }
.hg-prose blockquote {
	margin: 32px 0;
	padding: 16px 24px;
	border-left: 3px solid var(--hg-primary);
	font-size: 22px;
	font-style: italic;
}

/* ---------- Reveal animations ---------- */
[data-reveal] {
	opacity: 0;
	transform: translateY(20px);
	transition: opacity .8s var(--hg-ease), transform .8s var(--hg-ease);
}
[data-reveal].is-visible {
	opacity: 1;
	transform: translateY(0);
}
@media (prefers-reduced-motion: reduce) {
	[data-reveal] { opacity: 1; transform: none; transition: none; }
	.hg-marquee__track { animation: none; }
	.hg-hero__scroll-line { animation: none; }
	html { scroll-behavior: auto; }
}

/* ---------- Posts ---------- */
.hg-posts { display: grid; grid-template-columns: repeat(3, 1fr); gap: 28px; margin-top: 56px; }
.hg-post__thumb { display: block; border-radius: var(--hg-radius); overflow: hidden; aspect-ratio: 4/3; }
.hg-post__thumb img { width: 100%; height: 100%; object-fit: cover; transition: transform .4s var(--hg-ease); }
.hg-post__thumb:hover img { transform: scale(1.04); }
.hg-post__body { padding-top: 18px; }
.hg-post__title { font-size: 22px; font-weight: 700; letter-spacing: -0.01em; margin: 0 0 8px; }
.hg-post__title a:hover { opacity: 0.7; }
.hg-post__excerpt { color: var(--hg-mute); font-size: 15px; margin: 0 0 12px; }
@media (max-width: 900px) { .hg-posts { grid-template-columns: 1fr; } }

.hg-pagination { margin-top: 56px; }
.hg-pagination .page-numbers {
	display: inline-flex; align-items: center; justify-content: center;
	min-width: 42px; height: 42px;
	border-radius: 999px;
	border: 1px solid var(--hg-line);
	margin: 0 4px;
	font-weight: 600;
	padding: 0 14px;
}
.hg-pagination .page-numbers.current { background: var(--hg-primary); color: var(--hg-text-light); border-color: var(--hg-primary); }

/* ---------- Page header / generic ---------- */
.hg-page-header { margin-bottom: 32px; }
.hg-page-thumb { margin: 32px 0; border-radius: var(--hg-radius); overflow: hidden; }
.hg-page-thumb img { width: 100%; height: auto; }

/* ---------- Icons ---------- */
.hg-icon { display: inline-block; vertical-align: middle; flex-shrink: 0; }
.hg-btn .hg-icon { transition: transform .25s var(--hg-ease); }
.hg-btn:hover .hg-icon { transform: translateX(4px); }
.hg-link .hg-icon { transition: transform .25s var(--hg-ease); }
.hg-link:hover .hg-icon { transform: translate(3px, -3px); }

/* ---------- Wordmark / arrow logo ---------- */
.hg-wordmark {
	display: inline-flex; align-items: center; gap: 12px;
	font-family: 'Inter', sans-serif;
	color: var(--hg-primary);
}
.hg-wordmark__text {
	display: inline-flex; flex-direction: column;
	line-height: 0.9;
	font-weight: 900; letter-spacing: -0.04em;
}
.hg-wordmark__text span { font-size: 22px; }
.hg-wordmark__text em { font-style: normal; font-weight: 500; font-size: 9px; letter-spacing: 0.5em; opacity: 0.7; margin-top: 4px; }
.hg-wordmark__arrow { transition: transform .3s var(--hg-ease); }
.hg-wordmark:hover .hg-wordmark__arrow { transform: translateX(4px); }

/* ---------- Hero video background ---------- */
.hg-hero__video {
	position: absolute; inset: 0;
	overflow: hidden;
	pointer-events: none;
	z-index: 0;
}
.hg-hero__video iframe,
.hg-hero__video video {
	position: absolute;
	top: 50%; left: 50%;
	transform: translate(-50%, -50%);
	min-width: 100%; min-height: 100%;
	width: 177.78vh; height: 56.25vw;
	border: 0;
	object-fit: cover;
}
.hg-hero__video-tint {
	position: absolute; inset: 0;
	background: linear-gradient(180deg, rgba(239,239,239,0.7) 0%, rgba(239,239,239,0.55) 50%, rgba(239,239,239,0.85) 100%);
}
.hg-hero.has-video .hg-hero__inner { position: relative; z-index: 1; }

/* ---------- Pillar (with icon) ---------- */
.hg-pillar__top {
	display: flex; align-items: center; justify-content: space-between;
	margin-bottom: 24px;
}
.hg-pillar__icon {
	display: inline-flex; align-items: center; justify-content: center;
	width: 44px; height: 44px;
	border-radius: 12px;
	background: var(--hg-primary);
	color: var(--hg-text-light);
}
.hg-pillar__num {
	font-family: 'Space Grotesk', sans-serif;
	font-size: 13px;
	color: var(--hg-mute);
	letter-spacing: 0.15em;
}

/* ---------- Clients marquee ---------- */
.hg-clients { padding: clamp(64px, 8vw, 96px) 0; border-top: 1px solid var(--hg-line); border-bottom: 1px solid var(--hg-line); }
.hg-clients__head { text-align: center; margin-bottom: 56px; }
.hg-clients__head .hg-eyebrow { justify-content: center; }
.hg-clients__head .hg-eyebrow::before { display: none; }
.hg-clients__headline {
	font-size: clamp(22px, 2.5vw, 32px);
	font-weight: 600;
	letter-spacing: -0.02em;
	margin: 8px 0 0;
}
.hg-clients__strip {
	width: 100%;
	overflow: hidden;
	mask-image: linear-gradient(90deg, transparent 0, #000 8%, #000 92%, transparent 100%);
	-webkit-mask-image: linear-gradient(90deg, transparent 0, #000 8%, #000 92%, transparent 100%);
}
.hg-clients__track {
	display: flex;
	width: max-content;
	animation: hg-clients-scroll var(--hg-marquee-speed, 38s) linear infinite;
	will-change: transform;
}
.hg-clients__track:hover { animation-play-state: paused; }
.hg-clients__group {
	display: flex; align-items: center;
	gap: clamp(40px, 5vw, 72px);
	padding-right: clamp(40px, 5vw, 72px);
}
.hg-clients__logo {
	flex: 0 0 auto;
	height: 56px;
	display: inline-flex; align-items: center; justify-content: center;
	filter: grayscale(1);
	opacity: 0.7;
	transition: opacity .25s var(--hg-ease), filter .25s var(--hg-ease);
}
.hg-clients__logo:hover { opacity: 1; filter: grayscale(0); }
.hg-clients__logo img {
	max-height: 56px;
	width: auto;
	object-fit: contain;
	display: block;
}
@keyframes hg-clients-scroll {
	from { transform: translateX(0); }
	to   { transform: translateX(-50%); }
}

/* ---------- Empty work grid ---------- */
.hg-empty-grid {
	display: grid;
	grid-template-columns: repeat(4, 1fr);
	gap: 16px;
	margin-top: 56px;
}
.hg-empty-tile {
	aspect-ratio: 16/10;
	border: 1px dashed rgba(239,239,239,0.18);
	border-radius: var(--hg-radius);
	display: grid; place-items: center;
	color: rgba(239,239,239,0.35);
}
@media (max-width: 800px) {
	.hg-empty-grid { grid-template-columns: repeat(2, 1fr); }
}

/* ---------- Footer icons ---------- */
.hg-footer__title { display: inline-flex; align-items: center; gap: 8px; }
.hg-footer__title .hg-icon { opacity: 0.6; }
.hg-footer__social a {
	display: inline-flex; align-items: center; gap: 10px;
	transition: gap .2s var(--hg-ease);
}
.hg-footer__social a:hover { gap: 14px; }
.hg-footer__social .hg-icon { opacity: 0.7; }
.hg-footer__contact a {
	display: inline-flex; align-items: center; gap: 6px;
}

/* ---------- A11y reset for icon-only buttons ---------- */
.hg-menu-toggle:focus-visible,
.hg-btn:focus-visible,
.hg-link:focus-visible,
.hg-nav__list a:focus-visible {
	outline: 2px solid var(--hg-primary);
	outline-offset: 3px;
	border-radius: 999px;
}

/* ---------- Refined hero spacing for video version ---------- */
.hg-hero.has-video { background: var(--hg-bg); }
.hg-hero.has-video .hg-hero__bg { display: none; }

/* ---------- In the Studio — collage ---------- */
.hg-studio__head { text-align: center; max-width: 720px; margin: 0 auto 64px; }
.hg-studio__head .hg-eyebrow { justify-content: center; }
.hg-studio__head .hg-eyebrow::before { display: none; }
.hg-studio__head .hg-display { margin: 8px 0 0; }
.hg-studio__collage {
	max-width: 1240px;
	margin: 0 auto;
	padding: 0 28px;
	display: grid;
	grid-template-columns: repeat(12, 1fr);
	grid-auto-rows: 140px;
	gap: 18px;
}
.hg-studio__tile {
	margin: 0;
	overflow: hidden;
	border-radius: 18px;
	background: #ddd;
	transform: rotate(var(--hg-rot, 0));
	transition: transform .45s var(--hg-ease), box-shadow .45s var(--hg-ease);
	box-shadow: 0 12px 28px -22px rgba(10,10,10,0.45);
}
.hg-studio__tile:hover {
	transform: rotate(0) scale(1.02);
	box-shadow: 0 18px 36px -18px rgba(10,10,10,0.5);
	z-index: 2;
}
.hg-studio__tile img {
	width: 100%; height: 100%;
	object-fit: cover;
	display: block;
}
@media (max-width: 900px) {
	.hg-studio__collage { grid-auto-rows: 100px; gap: 12px; }
	.hg-studio__tile { border-radius: 12px; }
}
@media (max-width: 640px) {
	.hg-studio__collage {
		grid-template-columns: 1fr 1fr;
		grid-auto-rows: 130px;
	}
	.hg-studio__tile {
		grid-column: span 1 !important;
		grid-row: span 1 !important;
		transform: none;
	}
	.hg-studio__tile--lg, .hg-studio__tile--tall {
		grid-column: span 2 !important;
		grid-row: span 2 !important;
	}
}

/* ---------- Work page — carousel layout ---------- */
.hg-work-page { padding: clamp(64px, 9vw, 120px) 0; }
.hg-work-page__intro {
	display: grid;
	grid-template-columns: 1fr 1fr;
	gap: 48px;
	align-items: end;
	margin-bottom: clamp(40px, 6vw, 64px);
}
.hg-work-page__title {
	font-family: 'Space Grotesk', 'Inter', sans-serif;
	font-style: italic;
	font-weight: 600;
	font-size: clamp(38px, 5.5vw, 78px);
	line-height: 1.0;
	letter-spacing: -0.02em;
	margin: 0;
}
.hg-work-page__lede {
	font-style: italic;
	font-weight: 500;
	font-size: clamp(16px, 1.4vw, 19px);
	color: var(--hg-text);
	max-width: 42ch;
	margin: 0 0 8px;
	line-height: 1.5;
	margin-left: auto;
}
@media (max-width: 800px) {
	.hg-work-page__intro { grid-template-columns: 1fr; gap: 16px; }
	.hg-work-page__lede { margin-left: 0; }
}

/* The dark panel containing the carousel */
.hg-work-page__panel-wrap { padding: 0 28px; }
.hg-work-panel {
	position: relative;
	background: #0A0A0A;
	color: var(--hg-text-light);
	border-radius: 28px;
	padding: clamp(40px, 6vw, 72px) clamp(24px, 4vw, 48px) clamp(40px, 6vw, 64px);
	overflow: hidden;
}
.hg-work-panel__inner {
	display: grid;
	grid-template-columns: 220px 1fr;
	gap: 32px;
	align-items: start;
	margin-bottom: 48px;
}
.hg-work-panel__aside {
	font-style: italic;
	font-weight: 500;
	color: rgba(239,239,239,0.7);
	font-size: 13px;
	line-height: 1.5;
	max-width: 22ch;
}
.hg-work-panel__note { margin: 0; }
.hg-work-panel__title {
	font-family: 'Inter', sans-serif;
	font-weight: 800;
	font-size: clamp(54px, 11vw, 168px);
	line-height: 0.9;
	letter-spacing: -0.04em;
	margin: 0;
	color: var(--hg-text-light);
	text-transform: uppercase;
	text-align: right;
}
.hg-work-panel__title::last-letter {
	font-weight: 400;
}
@media (max-width: 800px) {
	.hg-work-panel__inner { grid-template-columns: 1fr; }
	.hg-work-panel__title { text-align: left; font-size: 18vw; }
}

/* The carousel itself */
.hg-carousel { position: relative; }
.hg-carousel__viewport {
	overflow-x: auto;
	scroll-snap-type: x mandatory;
	scrollbar-width: none;
	-ms-overflow-style: none;
	padding-bottom: 8px;
}
.hg-carousel__viewport::-webkit-scrollbar { display: none; }
.hg-carousel__track {
	display: flex;
	gap: 18px;
	padding: 0 4px;
}
.hg-carousel__card {
	flex: 0 0 220px;
	scroll-snap-align: center;
	display: block;
	transition: transform .35s var(--hg-ease);
}
.hg-carousel__card--featured {
	flex: 0 0 290px;
	transform: translateY(-12px);
}
.hg-carousel__media {
	position: relative;
	aspect-ratio: 3 / 4.6;
	background: #1a1a1a center/cover no-repeat;
	border-radius: 22px;
	overflow: hidden;
	box-shadow: 0 24px 40px -24px rgba(0,0,0,0.6);
}
.hg-carousel__card--featured .hg-carousel__media {
	aspect-ratio: 3 / 5.2;
}
.hg-carousel__card:hover .hg-carousel__media {
	transform: translateY(-4px);
	transition: transform .35s var(--hg-ease);
}
.hg-carousel__overlay {
	position: absolute; inset: 0;
	background: linear-gradient(180deg, rgba(0,0,0,0) 50%, rgba(0,0,0,0.78) 100%);
	pointer-events: none;
}
.hg-carousel__tag {
	position: absolute;
	top: 16px; left: 16px;
	display: inline-flex; align-items: center;
	background: rgba(239,239,239,0.92);
	color: #0A0A0A;
	font-family: 'Inter', sans-serif;
	font-size: 12px;
	font-weight: 600;
	padding: 6px 12px;
	border-radius: 999px;
	z-index: 2;
}
.hg-carousel__play {
	position: absolute;
	top: 16px; right: 16px;
	width: 36px; height: 36px;
	border-radius: 50%;
	background: rgba(239,239,239,0.92);
	color: #0A0A0A;
	display: grid; place-items: center;
	z-index: 2;
}
.hg-carousel__play .hg-icon { margin-left: 2px; }
.hg-carousel__caption {
	position: absolute;
	left: 18px; right: 18px; bottom: 18px;
	color: var(--hg-text-light);
	z-index: 2;
}
.hg-carousel__title {
	font-family: 'Inter', sans-serif;
	font-weight: 600;
	font-size: 16px;
	letter-spacing: -0.01em;
	margin: 0;
	line-height: 1.2;
	text-shadow: 0 2px 12px rgba(0,0,0,0.5);
}
.hg-carousel__card--featured .hg-carousel__title { font-size: 18px; }
.hg-carousel__meta {
	font-size: 11px;
	color: rgba(239,239,239,0.7);
	margin: 4px 0 0;
}

/* Controls */
.hg-carousel__controls {
	display: flex;
	justify-content: center;
	gap: 12px;
	margin-top: 40px;
}
.hg-carousel__btn {
	width: 54px; height: 54px;
	border-radius: 999px;
	border: 1px solid rgba(239,239,239,0.25);
	background: transparent;
	color: var(--hg-text-light);
	display: grid; place-items: center;
	transition: background .25s var(--hg-ease), transform .25s var(--hg-ease), border-color .25s var(--hg-ease);
}
.hg-carousel__btn:hover { background: rgba(239,239,239,0.08); border-color: rgba(239,239,239,0.45); }
.hg-carousel__btn[data-hg-carousel-prev] .hg-icon { transform: rotate(180deg); }
.hg-carousel__btn--active { background: rgba(239,239,239,0.95); color: #0A0A0A; border-color: rgba(239,239,239,0.95); }
.hg-carousel__btn--active:hover { background: #fff; }
.hg-carousel__btn[disabled] { opacity: 0.4; cursor: not-allowed; }

.hg-carousel__filters {
	display: flex; flex-wrap: wrap; gap: 8px;
	justify-content: center;
	margin-top: 32px;
}
.hg-carousel__chip {
	border: 1px solid rgba(239,239,239,0.22);
	border-radius: 999px;
	padding: 8px 14px;
	font-size: 13px;
	color: rgba(239,239,239,0.85);
	transition: all .2s var(--hg-ease);
}
.hg-carousel__chip:hover { background: rgba(239,239,239,0.1); color: #fff; }

.hg-carousel__hint {
	color: rgba(239,239,239,0.7);
	font-size: 14px;
	text-align: center;
	margin-top: 24px;
}

/* Empty state inside panel */
.hg-empty-tile--portrait { aspect-ratio: 3/4.6; }
.hg-carousel--empty .hg-empty-grid {
	grid-template-columns: repeat(5, 1fr);
	margin: 0;
	gap: 16px;
}
@media (max-width: 800px) {
	.hg-carousel--empty .hg-empty-grid { grid-template-columns: repeat(2, 1fr); }
}

/* ==========================================================================
   v1.2.5 -- iOS-style motion layer (loaded after main.css)
   ========================================================================== */

:root {
	/* Apple-ish easing curves */
	--hg-ease:        cubic-bezier(0.22, 1, 0.36, 1);   /* easeOutQuint - smooth as butter */
	--hg-ease-spring: cubic-bezier(0.34, 1.56, 0.64, 1);/* slight bounce, very iOS */
	--hg-ease-snap:   cubic-bezier(0.16, 1, 0.3, 1);    /* fast start, gentle stop */
	--hg-ease-glide:  cubic-bezier(0.65, 0, 0.35, 1);
	--hg-dur-fast:    .35s;
	--hg-dur-base:    .6s;
	--hg-dur-slow:    .9s;
}

* { -webkit-tap-highlight-color: transparent; }

html { scroll-behavior: smooth; }

/* ---------- Smoother reveal ---------- */
[data-reveal] {
	opacity: 0;
	transform: translateY(28px) scale(0.985);
	filter: blur(6px);
	transition:
		opacity   var(--hg-dur-slow) var(--hg-ease-snap),
		transform var(--hg-dur-slow) var(--hg-ease-snap),
		filter    var(--hg-dur-slow) var(--hg-ease-snap);
	will-change: opacity, transform, filter;
}
[data-reveal].is-visible {
	opacity: 1;
	transform: translateY(0) scale(1);
	filter: blur(0);
}

/* Hero word-by-word staggered fade */
.hg-hero__headline .hg-display__line {
	opacity: 0;
	transform: translateY(36px);
	filter: blur(8px);
	transition:
		opacity .9s var(--hg-ease-snap),
		transform .9s var(--hg-ease-snap),
		filter .9s var(--hg-ease-snap);
	transition-delay: calc(var(--d, 0ms) + 120ms);
}
.hg-hero__headline.is-visible .hg-display__line,
[data-reveal].is-visible .hg-display__line {
	opacity: 1;
	transform: translateY(0);
	filter: blur(0);
}

/* ---------- Header: smarter sticky with iOS-grade blur ---------- */
.hg-header {
	transition:
		background var(--hg-dur-fast) var(--hg-ease-glide),
		transform var(--hg-dur-fast) var(--hg-ease-glide),
		box-shadow var(--hg-dur-fast) var(--hg-ease-glide),
		backdrop-filter var(--hg-dur-fast) var(--hg-ease-glide);
	backdrop-filter: blur(8px) saturate(150%);
	-webkit-backdrop-filter: blur(8px) saturate(150%);
}
.hg-header.is-scrolled {
	background: rgba(239,239,239,0.78);
	backdrop-filter: blur(22px) saturate(180%);
	-webkit-backdrop-filter: blur(22px) saturate(180%);
	box-shadow: 0 1px 0 rgba(10,10,10,0.06), 0 14px 30px -28px rgba(10,10,10,0.35);
}
.hg-header.is-hidden { transform: translateY(-105%); }

/* ---------- Buttons: silky scale + magnetic ---------- */
.hg-btn {
	transition:
		transform .45s var(--hg-ease-spring),
		background .35s var(--hg-ease),
		box-shadow .45s var(--hg-ease),
		color .35s var(--hg-ease);
	will-change: transform;
}
.hg-btn:hover {
	transform: translate3d(var(--hg-mx,0), -2px, 0) scale(1.02);
}
.hg-btn:active {
	transform: translate3d(var(--hg-mx,0), 0, 0) scale(0.97);
	transition-duration: .12s;
}
.hg-btn .hg-icon {
	transition: transform .5s var(--hg-ease-spring);
}
.hg-btn:hover .hg-icon {
	transform: translateX(5px);
}

/* Magnetic button when JS is enabled */
.hg-btn[data-hg-magnet] {
	transform: translate3d(var(--hg-mx, 0), var(--hg-my, 0), 0);
}
.hg-btn[data-hg-magnet]:hover {
	transform: translate3d(var(--hg-mx, 0), calc(var(--hg-my, 0) - 2px), 0) scale(1.03);
}

/* Links smoother */
.hg-link {
	transition: gap .4s var(--hg-ease-spring), color .3s var(--hg-ease), border-color .3s var(--hg-ease);
}
.hg-link .hg-icon {
	transition: transform .5s var(--hg-ease-spring);
}

/* ---------- Cards: gentle tilt + glide ---------- */
.hg-work-card,
.hg-team__card,
.hg-pillar {
	transition:
		transform .6s var(--hg-ease-snap),
		box-shadow .6s var(--hg-ease-snap);
	will-change: transform;
}
.hg-work-card:hover,
.hg-team__card:hover {
	transform: translateY(-6px) scale(1.012);
	box-shadow: 0 30px 60px -30px rgba(10,10,10,0.35);
}
.hg-pillar:hover {
	background: rgba(10,10,10,0.025);
}

/* Tilt — driven by --tx / --ty CSS vars set in JS */
.hg-carousel__card[data-hg-tilt] {
	transition: transform .5s var(--hg-ease-snap);
	transform-style: preserve-3d;
	transform: perspective(900px) rotateX(var(--hg-ty, 0deg)) rotateY(var(--hg-tx, 0deg));
}
.hg-carousel__card[data-hg-tilt].hg-carousel__card--featured {
	transform: perspective(900px) translateY(-12px) rotateX(var(--hg-ty, 0deg)) rotateY(var(--hg-tx, 0deg));
}
.hg-carousel__card[data-hg-tilt] .hg-carousel__media {
	transition: transform .5s var(--hg-ease-snap);
}
.hg-carousel__card[data-hg-tilt]:hover .hg-carousel__media {
	transform: translateZ(20px);
}

/* ---------- Hero scroll arrow ---------- */
.hg-hero__scroll-line {
	animation: hg-scroll-tick 2.6s var(--hg-ease-snap) infinite;
}

/* ---------- Smoother marquee, paused on hover ---------- */
.hg-marquee__track,
.hg-clients__track { animation-timing-function: linear; }
.hg-marquee:hover .hg-marquee__track,
.hg-clients:hover .hg-clients__track { animation-play-state: paused; }

/* ---------- Mobile menu: iOS slide & blur ---------- */
@media (max-width: 900px) {
	.hg-nav {
		transition: opacity .4s var(--hg-ease), transform .5s var(--hg-ease-snap), visibility .5s;
		opacity: 0;
		visibility: hidden;
		display: block !important;
		position: fixed;
		inset: var(--hg-header-h) 0 0 0;
		background: rgba(239,239,239,0.88);
		backdrop-filter: blur(28px) saturate(180%);
		-webkit-backdrop-filter: blur(28px) saturate(180%);
		padding: 32px 28px;
		transform: translateY(-12px);
		z-index: 99;
		pointer-events: none;
	}
	.hg-nav.is-open {
		opacity: 1;
		visibility: visible;
		transform: translateY(0);
		pointer-events: auto;
	}
	.hg-nav__list a {
		opacity: 0;
		transform: translateY(8px);
		transition: opacity .5s var(--hg-ease-snap), transform .5s var(--hg-ease-snap);
		transition-delay: 0ms;
	}
	.hg-nav.is-open .hg-nav__list li:nth-child(1) a { transition-delay: 80ms; opacity: 1; transform: translateY(0); }
	.hg-nav.is-open .hg-nav__list li:nth-child(2) a { transition-delay: 140ms; opacity: 1; transform: translateY(0); }
	.hg-nav.is-open .hg-nav__list li:nth-child(3) a { transition-delay: 200ms; opacity: 1; transform: translateY(0); }
	.hg-nav.is-open .hg-nav__list li:nth-child(4) a { transition-delay: 260ms; opacity: 1; transform: translateY(0); }
	.hg-nav.is-open .hg-nav__list li:nth-child(5) a { transition-delay: 320ms; opacity: 1; transform: translateY(0); }
	.hg-menu-toggle span { transition: transform .4s var(--hg-ease-spring), opacity .25s var(--hg-ease); }
}

/* ---------- Carousel: smoother snap + button feedback ---------- */
.hg-carousel__viewport { scroll-behavior: smooth; }
.hg-carousel__btn {
	transition: transform .35s var(--hg-ease-spring), background .3s var(--hg-ease), border-color .3s var(--hg-ease);
}
.hg-carousel__btn:hover { transform: scale(1.08); }
.hg-carousel__btn:active { transform: scale(0.94); transition-duration: .12s; }

/* ---------- Footer link hover slide ---------- */
.hg-footer__contact a,
.hg-footer__social a,
.hg-footer__nav a {
	transition: color .3s var(--hg-ease), gap .3s var(--hg-ease-spring), transform .3s var(--hg-ease-spring);
	display: inline-flex; align-items: center; gap: 6px;
}
.hg-footer__contact a:hover,
.hg-footer__social a:hover,
.hg-footer__nav a:hover { transform: translateX(3px); }

/* ---------- Studio collage gentle hover ---------- */
.hg-studio__tile {
	transition: transform .7s var(--hg-ease-spring), box-shadow .6s var(--hg-ease-snap);
}
.hg-studio__tile:hover {
	transform: rotate(0deg) scale(1.04) translateY(-6px);
	box-shadow: 0 30px 60px -28px rgba(10,10,10,0.5);
	z-index: 5;
}

/* ---------- Subtle cursor companion (desktop only) ---------- */
@media (hover: hover) and (pointer: fine) {
	.hg-cursor {
		position: fixed;
		top: 0; left: 0;
		width: 28px; height: 28px;
		border: 1.5px solid rgba(10,10,10,0.35);
		border-radius: 50%;
		pointer-events: none;
		transform: translate3d(-50%, -50%, 0);
		transition: width .25s var(--hg-ease-spring), height .25s var(--hg-ease-spring),
		            border-color .25s var(--hg-ease), background .25s var(--hg-ease),
		            opacity .25s var(--hg-ease);
		z-index: 999;
		mix-blend-mode: difference;
		opacity: 0;
	}
	.hg-cursor.is-active { opacity: 0.7; }
	.hg-cursor.is-hot {
		width: 56px; height: 56px;
		background: rgba(239,239,239,0.18);
		border-color: rgba(239,239,239,0.6);
		opacity: 1;
	}
	body.hg-no-cursor { cursor: default; }
}

/* ---------- Page transition on internal nav clicks ---------- */
body.hg-leaving {
	opacity: 0;
	transition: opacity .35s var(--hg-ease);
	pointer-events: none;
}

/* ---------- Reduced motion: respect it ---------- */
@media (prefers-reduced-motion: reduce) {
	* { animation-duration: 0.001ms !important; transition-duration: 0.001ms !important; }
	[data-reveal] { opacity: 1; transform: none; filter: none; }
	.hg-hero__headline .hg-display__line { opacity: 1; transform: none; filter: none; }
	html { scroll-behavior: auto; }
}

/* ==========================================================================
   v1.2.7 -- business-card texture + playful layer
   ========================================================================== */

/* Plus-mark grid texture, exactly like the HypeGrid business card. */
body {
	background-color: var(--hg-bg);
	background-image:
		url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' width='80' height='80'><g fill='none' stroke='%230a0a0a' stroke-width='1.2' opacity='0.13' stroke-linecap='round'><path d='M40 35 v10 M35 40 h10'/></g></svg>"),
		radial-gradient(ellipse at 80% 0%, rgba(255,255,255,0.5) 0%, transparent 60%);
	background-size: 80px 80px, 100% 100%;
	background-attachment: fixed, fixed;
}

/* Tighter grid on dark sections for variety */
.hg-section--dark,
.hg-work-panel,
.hg-cta-band,
.hg-footer,
.hg-work-nav {
	background-image:
		url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' width='80' height='80'><g fill='none' stroke='%23ffffff' stroke-width='1.1' opacity='0.07' stroke-linecap='round'><path d='M40 35 v10 M35 40 h10'/></g></svg>"),
		linear-gradient(180deg, #0A0A0A 0%, #0A0A0A 100%);
	background-size: 80px 80px, 100% 100%;
	background-attachment: fixed, scroll;
}

/* Organic curve in the hero -- echoes the swoosh on the card */
.hg-hero { position: relative; }
.hg-hero::after {
	content: '';
	position: absolute;
	top: -8%;
	right: -12%;
	width: 70%;
	height: 130%;
	pointer-events: none;
	background-image: url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 600 800' fill='none'><path d='M 550 0 C 520 200, 380 320, 360 480 C 345 620, 420 720, 540 800' stroke='%230a0a0a' stroke-width='1.3' opacity='0.18'/></svg>");
	background-repeat: no-repeat;
	background-position: center right;
	background-size: contain;
	mix-blend-mode: multiply;
	z-index: 0;
}
.hg-hero__inner { position: relative; z-index: 2; }

/* Card-style corner brackets on the contact band -- echoes the QR frame */
.hg-cta-band {
	position: relative;
	overflow: hidden;
}
.hg-cta-band::before,
.hg-cta-band::after {
	content: '';
	position: absolute;
	width: 30px; height: 30px;
	border: 1.5px solid rgba(239,239,239,0.35);
	pointer-events: none;
}
.hg-cta-band::before {
	top: 32px; left: 32px;
	border-right: 0; border-bottom: 0;
	border-top-left-radius: 6px;
}
.hg-cta-band::after {
	bottom: 32px; right: 32px;
	border-left: 0; border-top: 0;
	border-bottom-right-radius: 6px;
}

/* Wordmark logo: card-perfect spacing + playful arrow wiggle */
.hg-wordmark__arrow {
	transition: transform .55s cubic-bezier(0.34, 1.56, 0.64, 1);
}
.hg-wordmark:hover .hg-wordmark__arrow {
	transform: translateX(6px) rotate(-2deg);
	animation: hg-arrow-wiggle 0.7s cubic-bezier(0.34, 1.56, 0.64, 1);
}
@keyframes hg-arrow-wiggle {
	0%   { transform: translateX(0) rotate(0); }
	35%  { transform: translateX(8px) rotate(-3deg); }
	70%  { transform: translateX(5px) rotate(2deg); }
	100% { transform: translateX(6px) rotate(-2deg); }
}

/* Hero scroll indicator: gentle tick + plus marker */
.hg-hero__scroll::before {
	content: '+';
	font-family: 'Inter', sans-serif;
	font-size: 14px;
	color: var(--hg-mute);
	opacity: 0.5;
	margin-right: 8px;
}

/* Playful: display headline letters subtly hover-distort */
.hg-display__line {
	display: inline-block;
}
.hg-display__line:hover {
	cursor: default;
}

/* Big section eyebrow gets corner-bracket treatment */
.hg-eyebrow {
	position: relative;
}

/* Pillar cards: card-style corner accent */
.hg-pillar {
	position: relative;
	background: rgba(255,255,255,0.4);
	backdrop-filter: blur(8px);
	transition: background .5s var(--hg-ease), transform .5s var(--hg-ease-snap);
}
.hg-pillar:hover {
	background: rgba(255,255,255,0.7);
}
.hg-pillar::before {
	content: '';
	position: absolute;
	top: 16px; right: 16px;
	width: 14px; height: 14px;
	background-image: url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 14 14'><g fill='none' stroke='%230a0a0a' stroke-width='1.5' stroke-linecap='round'><path d='M7 2 v10 M2 7 h10'/></g></svg>");
	opacity: 0.25;
	transition: opacity .4s var(--hg-ease), transform .5s var(--hg-ease-spring);
}
.hg-pillar:hover::before {
	opacity: 1;
	transform: rotate(90deg);
}

/* Ripple ring spawned by JS on click */
.hg-ripple {
	position: absolute;
	border-radius: 50%;
	pointer-events: none;
	background: rgba(239,239,239,0.4);
	transform: translate(-50%, -50%) scale(0);
	animation: hg-ripple .65s cubic-bezier(0.22, 1, 0.36, 1) forwards;
	z-index: 1;
}
.hg-btn--light .hg-ripple { background: rgba(10,10,10,0.18); }
.hg-btn--ghost .hg-ripple { background: rgba(10,10,10,0.12); }
@keyframes hg-ripple {
	to {
		transform: translate(-50%, -50%) scale(3.5);
		opacity: 0;
	}
}
.hg-btn { position: relative; overflow: hidden; }

/* Section dividers: a tiny + mark centered */
.hg-section + .hg-section::before {
	content: '+';
	position: absolute;
	top: -10px;
	left: 50%;
	transform: translateX(-50%);
	font-family: 'Inter', sans-serif;
	font-weight: 500;
	font-size: 14px;
	color: var(--hg-mute);
	opacity: 0.4;
	letter-spacing: 0;
	line-height: 1;
	pointer-events: none;
}

/* Studio collage tiles: card-style frame */
.hg-studio__tile {
	position: relative;
	box-shadow: 0 1px 0 rgba(10,10,10,0.06), 0 14px 32px -22px rgba(10,10,10,0.4);
	border: 1px solid rgba(10,10,10,0.05);
}

/* Footer: keep grid texture visible but darker */
.hg-footer {
	position: relative;
}
.hg-footer::before {
	content: '';
	position: absolute;
	inset: 0;
	background-image: url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 1200 200' fill='none'><path d='M 0 80 C 200 40, 400 120, 600 80 C 800 40, 1000 120, 1200 80' stroke='%23efefef' stroke-width='1' opacity='0.06'/></svg>");
	background-size: 100% 200px;
	background-repeat: no-repeat;
	background-position: center top;
	pointer-events: none;
}

/* Hero plus-marks: little decorative + symbols scattered around */
.hg-hero__inner::before {
	content: '+';
	position: absolute;
	top: -40px; right: -10px;
	font-size: 24px;
	color: var(--hg-mute);
	opacity: 0.5;
	font-weight: 500;
	animation: hg-float 4s ease-in-out infinite;
}
.hg-hero__inner::after {
	content: '+';
	position: absolute;
	bottom: -40px; left: 40%;
	font-size: 18px;
	color: var(--hg-mute);
	opacity: 0.4;
	font-weight: 500;
	animation: hg-float 5s ease-in-out infinite 1.2s;
}
@keyframes hg-float {
	0%, 100% { transform: translateY(0) rotate(0deg); opacity: 0.4; }
	50%      { transform: translateY(-6px) rotate(45deg); opacity: 0.7; }
}

/* Buttons: subtle inner highlight for depth without breaking flat aesthetic */
.hg-btn--dark::after {
	content: '';
	position: absolute;
	inset: 0;
	border-radius: inherit;
	background: linear-gradient(180deg, rgba(255,255,255,0.08) 0%, transparent 50%);
	pointer-events: none;
}

/* Card stamp -- "selected work" gets a vintage card stamp feel */
.hg-work-panel__title {
	position: relative;
}
.hg-work-panel__title::after {
	content: '+';
	position: absolute;
	top: -8px;
	margin-left: 8px;
	font-size: 0.3em;
	color: rgba(239,239,239,0.45);
	font-weight: 400;
}

/* Tag chips and eyebrows on dark: light texture */
.hg-section--dark .hg-eyebrow::before {
	background: rgba(239,239,239,0.5);
}

/* Carousel cards: brighter media on hover (subtle) */
.hg-carousel__card .hg-carousel__media::before {
	content: '';
	position: absolute;
	inset: 0;
	background: linear-gradient(135deg, rgba(255,255,255,0.04), transparent 50%);
	z-index: 1;
	pointer-events: none;
	opacity: 0;
	transition: opacity .5s var(--hg-ease-snap);
}
.hg-carousel__card:hover .hg-carousel__media::before { opacity: 1; }

/* Make the work page title playful: italic with subtle wobble on hover */
.hg-work-page__title {
	transition: letter-spacing .6s var(--hg-ease-spring);
}
.hg-work-page__title:hover {
	letter-spacing: -0.015em;
}

/* Mobile: lighter grid */
@media (max-width: 640px) {
	body { background-size: 60px 60px, 100% 100%; }
	.hg-hero::after { width: 100%; right: -30%; opacity: 0.5; }
}

/* ==========================================================================
   v1.2.8 -- Syne display font, bigger pillars, showreel modal
   ========================================================================== */

:root {
	--hg-font-display: 'Syne', 'Inter', sans-serif;
}

/* Display typography: switch to Syne, tighten tracking */
.hg-display,
.hg-work-page__title,
.hg-work-panel__title,
.hg-clients__headline,
.hg-team__name {
	font-family: var(--hg-font-display);
	letter-spacing: -0.035em;
}
.hg-hero__headline {
	font-size: clamp(64px, 13vw, 200px);
	letter-spacing: -0.045em;
	line-height: 0.92;
}
.hg-display--xl  { font-size: clamp(54px, 10vw, 140px); letter-spacing: -0.04em; }
.hg-display--xxl { font-size: clamp(72px, 14vw, 200px); letter-spacing: -0.05em; }

/* Hide "SCROLL" word, keep the line indicator + add chevron */
.hg-hero__scroll > span:first-child { display: none; }
.hg-hero__scroll::after {
	content: '';
	width: 8px; height: 8px;
	border-right: 1.5px solid currentColor;
	border-bottom: 1.5px solid currentColor;
	transform: rotate(45deg) translateY(-2px);
	opacity: 0.7;
	margin-left: -10px;
}

/* Pillars: full-impact display treatment */
.hg-pillar {
	padding: 56px 40px 48px;
	min-height: 340px;
	display: flex; flex-direction: column;
}
.hg-pillar__top {
	margin-bottom: 36px;
}
.hg-pillar__icon {
	width: 56px; height: 56px;
	border-radius: 16px;
}
.hg-pillar__icon svg { width: 26px; height: 26px; }
.hg-pillar__num { font-size: 14px; letter-spacing: 0.18em; }
.hg-pillar__title {
	font-family: var(--hg-font-display);
	font-size: clamp(28px, 3vw, 44px);
	font-weight: 700;
	letter-spacing: -0.025em;
	line-height: 1.02;
	margin: 0 0 20px;
}
.hg-pillar__body {
	font-size: 16px;
	line-height: 1.6;
	max-width: 30ch;
	margin-top: auto;
}

/* Hero showreel button - eye-catching circular play */
.hg-showreel-btn {
	display: inline-flex; align-items: center; gap: 16px;
	padding: 0;
	background: transparent;
	border: 0;
	cursor: pointer;
	margin-left: 6px;
	color: inherit;
	font: inherit;
}
.hg-showreel-btn__ring {
	width: 64px; height: 64px;
	border-radius: 50%;
	border: 1.5px solid var(--hg-primary);
	display: grid; place-items: center;
	position: relative;
	color: var(--hg-primary);
	transition:
		transform .5s cubic-bezier(0.34, 1.56, 0.64, 1),
		background .4s cubic-bezier(0.22, 1, 0.36, 1),
		color .4s cubic-bezier(0.22, 1, 0.36, 1);
	flex-shrink: 0;
}
.hg-showreel-btn__ring svg {
	fill: currentColor;
	margin-left: 2px;
}
.hg-showreel-btn__ring::before,
.hg-showreel-btn__ring::after {
	content: '';
	position: absolute;
	inset: -2px;
	border-radius: 50%;
	border: 1.5px solid var(--hg-primary);
	pointer-events: none;
}
.hg-showreel-btn__ring::before {
	animation: hg-pulse 2.4s ease-out infinite;
}
.hg-showreel-btn__ring::after {
	animation: hg-pulse 2.4s ease-out infinite 1.2s;
}
.hg-showreel-btn:hover .hg-showreel-btn__ring {
	background: var(--hg-primary);
	color: var(--hg-text-light);
	transform: scale(1.06);
}
.hg-showreel-btn__label {
	font-family: 'Space Grotesk', sans-serif;
	font-size: 13px;
	letter-spacing: 0.18em;
	text-transform: uppercase;
	font-weight: 600;
	text-align: left;
	transition: transform .4s cubic-bezier(0.22, 1, 0.36, 1);
}
.hg-showreel-btn__label small {
	display: block;
	opacity: 0.55;
	margin-top: 4px;
	font-size: 10px;
	letter-spacing: 0.14em;
	font-weight: 500;
}
.hg-showreel-btn:hover .hg-showreel-btn__label { transform: translateX(3px); }
@keyframes hg-pulse {
	0%   { transform: scale(1);    opacity: 0.6; }
	100% { transform: scale(1.55); opacity: 0; }
}

/* Showreel modal lightbox */
.hg-showreel-modal {
	position: fixed; inset: 0;
	background: rgba(10,10,10,0.92);
	backdrop-filter: blur(28px) saturate(180%);
	-webkit-backdrop-filter: blur(28px) saturate(180%);
	z-index: 200;
	display: flex; align-items: center; justify-content: center;
	padding: 32px;
	opacity: 0;
	visibility: hidden;
	transition:
		opacity .45s cubic-bezier(0.22, 1, 0.36, 1),
		visibility .45s cubic-bezier(0.22, 1, 0.36, 1);
}
.hg-showreel-modal.is-open { opacity: 1; visibility: visible; }
.hg-showreel-modal__frame {
	width: 100%;
	max-width: 1180px;
	aspect-ratio: 16 / 9;
	background: #000;
	border-radius: 20px;
	overflow: hidden;
	transform: scale(0.92) translateY(20px);
	transition: transform .55s cubic-bezier(0.22, 1, 0.36, 1);
	box-shadow: 0 50px 100px -30px rgba(0,0,0,0.7);
}
.hg-showreel-modal.is-open .hg-showreel-modal__frame {
	transform: scale(1) translateY(0);
}
.hg-showreel-modal__frame iframe,
.hg-showreel-modal__frame video {
	width: 100%; height: 100%;
	border: 0;
	display: block;
}
.hg-showreel-modal__close {
	position: absolute;
	top: 24px; right: 24px;
	width: 52px; height: 52px;
	border-radius: 50%;
	background: rgba(239,239,239,0.12);
	border: 1px solid rgba(239,239,239,0.22);
	color: var(--hg-text-light);
	cursor: pointer;
	display: grid; place-items: center;
	transition: background .3s var(--hg-ease), transform .3s var(--hg-ease-spring), border-color .3s var(--hg-ease);
	z-index: 1;
}
.hg-showreel-modal__close:hover {
	background: rgba(239,239,239,0.22);
	border-color: rgba(239,239,239,0.5);
	transform: scale(1.1) rotate(90deg);
}

/* Navigation hover color (extra layer, ensures visible feedback) */
.hg-nav__list a {
	position: relative;
}
.hg-nav__list a::after {
	content: '';
	position: absolute;
	left: 14px; right: 14px;
	bottom: 4px;
	height: 1px;
	background: currentColor;
	transform: scaleX(0);
	transform-origin: left center;
	transition: transform .35s cubic-bezier(0.22, 1, 0.36, 1);
	opacity: 0.6;
}
.hg-nav__list a:hover::after { transform: scaleX(0.7); }

@media (max-width: 720px) {
	.hg-pillar { padding: 36px 24px 32px; min-height: 240px; }
	.hg-pillar__title { font-size: 28px; }
	.hg-pillar__icon { width: 48px; height: 48px; border-radius: 12px; }
	.hg-showreel-btn__ring { width: 56px; height: 56px; }
	.hg-showreel-btn__label { font-size: 12px; }
	.hg-showreel-modal { padding: 16px; }
	.hg-showreel-modal__close { top: 12px; right: 12px; width: 44px; height: 44px; }
}

/* ==========================================================================
   v1.2.9 -- revert display font to Inter, showreel lifted to top of hero
   ========================================================================== */

/* Revert: Inter for everything (overrides the Syne block from v1.2.8) */
:root {
	--hg-font-display: 'Inter', sans-serif;
}
.hg-display,
.hg-display--xl,
.hg-display--xxl,
.hg-work-page__title,
.hg-work-panel__title,
.hg-clients__headline,
.hg-team__name,
.hg-pillar__title {
	font-family: 'Inter', sans-serif;
}
.hg-display       { letter-spacing: -0.03em; }
.hg-display--xl   { letter-spacing: -0.035em; }
.hg-display--xxl  { letter-spacing: -0.04em; }
.hg-hero__headline {
	letter-spacing: -0.04em;
}

/* ---------- Hero showreel (large inline frame at top of hero) ---------- */
.hg-hero__showreel {
	position: relative;
	display: block;
	width: 100%;
	margin: 0 0 clamp(40px, 6vw, 64px);
	cursor: pointer;
	z-index: 3;
	-webkit-tap-highlight-color: transparent;
}
.hg-hero__showreel-frame {
	position: relative;
	width: 100%;
	aspect-ratio: 21 / 9;
	border-radius: 24px;
	overflow: hidden;
	background: #000;
	box-shadow: 0 30px 60px -30px rgba(10,10,10,0.45);
	transform: translateZ(0) scale(1);
	transition:
		transform .55s cubic-bezier(0.22, 1, 0.36, 1),
		box-shadow .55s cubic-bezier(0.22, 1, 0.36, 1),
		border-radius .55s cubic-bezier(0.22, 1, 0.36, 1);
}
.hg-hero__showreel:hover .hg-hero__showreel-frame {
	transform: translateZ(0) scale(1.01);
	box-shadow: 0 40px 80px -28px rgba(10,10,10,0.55);
}
.hg-hero__showreel-frame iframe,
.hg-hero__showreel-frame video {
	position: absolute;
	top: 50%; left: 50%;
	transform: translate(-50%, -50%);
	width: 177.78%;
	height: 100%;
	min-width: 100%;
	min-height: 100%;
	border: 0;
	object-fit: cover;
	pointer-events: none;
}
.hg-hero__showreel-frame::after {
	content: '';
	position: absolute;
	inset: 0;
	background: linear-gradient(180deg, rgba(0,0,0,0) 50%, rgba(0,0,0,0.55) 100%);
	pointer-events: none;
}
.hg-hero__showreel-overlay {
	position: absolute;
	left: 24px;
	bottom: 24px;
	display: inline-flex;
	align-items: center;
	gap: 14px;
	padding: 10px 22px 10px 10px;
	background: rgba(10,10,10,0.55);
	backdrop-filter: blur(14px) saturate(170%);
	-webkit-backdrop-filter: blur(14px) saturate(170%);
	color: var(--hg-text-light);
	border-radius: 999px;
	z-index: 2;
	transition: background .35s cubic-bezier(0.22, 1, 0.36, 1), transform .35s cubic-bezier(0.34, 1.56, 0.64, 1);
}
.hg-hero__showreel:hover .hg-hero__showreel-overlay {
	background: rgba(10,10,10,0.88);
	transform: scale(1.04);
}
.hg-hero__showreel-play {
	width: 40px; height: 40px;
	border-radius: 50%;
	background: var(--hg-text-light);
	color: var(--hg-primary);
	display: grid; place-items: center;
	transition: transform .4s cubic-bezier(0.34, 1.56, 0.64, 1);
}
.hg-hero__showreel-play svg { fill: currentColor; margin-left: 2px; }
.hg-hero__showreel:hover .hg-hero__showreel-play { transform: scale(1.12); }
.hg-hero__showreel-label {
	font-family: 'Space Grotesk', 'Inter', sans-serif;
	font-size: 13px;
	letter-spacing: 0.18em;
	text-transform: uppercase;
	font-weight: 600;
	line-height: 1.15;
}
.hg-hero__showreel-label small {
	display: block;
	opacity: 0.6;
	font-size: 10px;
	letter-spacing: 0.14em;
	font-weight: 500;
	margin-top: 3px;
	text-transform: uppercase;
}

/* Hero accommodates the showreel: tighten top padding + headline a touch */
.hg-hero {
	padding-top: 32px;
}
.hg-hero__headline { margin-top: 12px; }

/* Mobile: smaller aspect & overlay */
@media (max-width: 720px) {
	.hg-hero__showreel-frame {
		aspect-ratio: 16 / 10;
		border-radius: 18px;
	}
	.hg-hero__showreel-overlay {
		left: 14px; bottom: 14px;
		padding: 8px 16px 8px 8px;
		gap: 10px;
	}
	.hg-hero__showreel-play { width: 32px; height: 32px; }
	.hg-hero__showreel-label { font-size: 11px; }
}

/* ==========================================================================
   v1.3.0 -- premium polish, lighter bg, inline video, full responsive pass
   ========================================================================== */

/* ---------- 1. Lighter, more refined background texture ---------- */
body {
	background-image:
		url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' width='110' height='110'><g fill='none' stroke='%230a0a0a' stroke-width='0.7' opacity='0.05' stroke-linecap='round'><path d='M55 50 v10 M50 55 h10'/></g></svg>"),
		radial-gradient(ellipse at 80% 0%, rgba(255,255,255,0.55) 0%, transparent 60%);
	background-size: 110px 110px, 100% 100%;
}
.hg-section--dark,
.hg-work-panel,
.hg-cta-band,
.hg-footer,
.hg-work-nav {
	background-image:
		url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' width='110' height='110'><g fill='none' stroke='%23ffffff' stroke-width='0.7' opacity='0.04' stroke-linecap='round'><path d='M55 50 v10 M50 55 h10'/></g></svg>"),
		linear-gradient(180deg, #0A0A0A 0%, #0A0A0A 100%);
	background-size: 110px 110px, 100% 100%;
}

/* Lighter swoosh curve */
.hg-hero::after { opacity: 0.10; }

/* Lighter floating + marks */
.hg-hero__inner::before,
.hg-hero__inner::after { opacity: 0.22; font-weight: 400; }

/* Hide the corner-frame brackets on CTA band — too much */
.hg-cta-band::before,
.hg-cta-band::after { display: none; }

/* Lighter section + divider */
.hg-section + .hg-section::before { opacity: 0.18; }

/* Lighter pillar plus mark */
.hg-pillar::before { opacity: 0.18; }

/* ---------- 2. Premium marquee strip ---------- */
.hg-marquee {
	padding: 28px 0;
	border-top: 1px solid rgba(10,10,10,0.07);
	border-bottom: 1px solid rgba(10,10,10,0.07);
	background: var(--hg-bg);
	mask-image: linear-gradient(90deg, transparent 0, #000 6%, #000 94%, transparent 100%);
	-webkit-mask-image: linear-gradient(90deg, transparent 0, #000 6%, #000 94%, transparent 100%);
	overflow: hidden;
}
.hg-marquee__track { animation-duration: 54s; }
.hg-marquee__group { gap: 56px; padding-right: 56px; }
.hg-marquee__item {
	font-family: 'Inter', sans-serif;
	font-weight: 600;
	font-size: clamp(18px, 2.4vw, 30px);
	letter-spacing: -0.015em;
	text-transform: uppercase;
	color: var(--hg-primary);
	opacity: 0.78;
	transition: opacity .4s var(--hg-ease);
}
.hg-marquee:hover .hg-marquee__item { opacity: 1; }
.hg-marquee__dot {
	display: inline-block;
	width: 5px; height: 5px;
	border-radius: 50%;
	background: currentColor;
	font-size: 0;
	color: var(--hg-primary);
	opacity: 0.3;
}

/* ---------- 3. Inline video section ---------- */
.hg-inline-video {
	padding: clamp(48px, 6vw, 88px) 0;
	position: relative;
}
.hg-inline-video__frame {
	position: relative;
	width: 100%;
	aspect-ratio: 16 / 9;
	border-radius: 28px;
	overflow: hidden;
	background: #000;
	box-shadow: 0 30px 60px -32px rgba(10,10,10,0.4), 0 1px 0 rgba(255,255,255,0.5);
	transform: translateZ(0);
}
.hg-inline-video__frame iframe,
.hg-inline-video__frame video {
	position: absolute;
	top: 50%; left: 50%;
	transform: translate(-50%, -50%);
	width: 177.78%;
	height: 100%;
	min-width: 100%;
	min-height: 100%;
	border: 0;
	pointer-events: none;
	object-fit: cover;
}
.hg-inline-video__caption {
	margin: 20px 0 0;
	font-family: 'Space Grotesk', 'Inter', sans-serif;
	font-size: 12px;
	letter-spacing: 0.18em;
	text-transform: uppercase;
	color: var(--hg-mute);
	text-align: center;
}

/* ---------- 4. Premium polish on existing elements ---------- */
.hg-pillar {
	background: rgba(255,255,255,0.45);
	border: 1px solid rgba(10,10,10,0.05);
	transition: background .45s var(--hg-ease), border-color .45s var(--hg-ease), transform .5s cubic-bezier(0.22, 1, 0.36, 1);
}
.hg-pillar:hover {
	background: rgba(255,255,255,0.85);
	border-color: rgba(10,10,10,0.1);
	transform: translateY(-3px);
}
.hg-pillars {
	background: transparent;
	border-top: 1px solid var(--hg-line);
	border-bottom: 1px solid var(--hg-line);
	gap: 0;
}
.hg-pillar + .hg-pillar { border-left: 1px solid var(--hg-line); }

.hg-eyebrow { font-weight: 500; opacity: 0.8; }

/* Buttons: refine */
.hg-btn { font-weight: 500; letter-spacing: -0.005em; }
.hg-btn--xl { font-size: 15px; }

/* Wordmark refined */
.hg-wordmark__text span { font-weight: 800; }

/* Hero section breathing */
.hg-hero { padding: 24px 0 56px; min-height: auto; }

/* ---------- 5. RESPONSIVE — tablet + mobile overhaul ---------- */

/* Tablet */
@media (max-width: 1024px) {
	.hg-container { padding: 0 22px; }
	.hg-hero__headline { font-size: clamp(48px, 9vw, 100px); }
	.hg-whyus__inner { grid-template-columns: 1fr; gap: 32px; }
	.hg-pillars { grid-template-columns: 1fr 1fr; }
	.hg-pillar:nth-child(3) { border-top: 1px solid var(--hg-line); grid-column: 1 / -1; border-left: 0; }
	.hg-team__grid { grid-template-columns: 1fr 1fr; }
	.hg-work-page__intro { grid-template-columns: 1fr; gap: 18px; }
	.hg-work-page__lede { margin-left: 0; }
	.hg-work-panel__inner { grid-template-columns: 1fr; gap: 16px; }
	.hg-work-panel__title { text-align: left; font-size: clamp(56px, 14vw, 140px); }
}

/* Header: properly responsive */
@media (max-width: 900px) {
	.hg-header__inner { padding: 0 20px; gap: 12px; }
	.hg-header__logo .hg-wordmark { gap: 8px; }
	.hg-wordmark__text span { font-size: 18px; }
	.hg-wordmark__text em { font-size: 8px; letter-spacing: 0.35em; }
	.hg-wordmark__arrow { width: 28px; height: 12px; }

	.hg-nav, .hg-header__cta { display: none; }
	.hg-menu-toggle { display: inline-flex; margin-left: auto; }

	/* Mobile nav slide-down with proper backdrop blur */
	.hg-nav {
		position: fixed;
		inset: var(--hg-header-h) 0 0 0;
		z-index: 95;
		background: rgba(239,239,239,0.97);
		backdrop-filter: blur(28px) saturate(180%);
		-webkit-backdrop-filter: blur(28px) saturate(180%);
		padding: 32px 24px 56px;
		overflow-y: auto;
		opacity: 0;
		visibility: hidden;
		transform: translateY(-12px);
		transition: opacity .35s cubic-bezier(0.22, 1, 0.36, 1), transform .45s cubic-bezier(0.16, 1, 0.3, 1), visibility .45s;
		display: block !important;
	}
	.hg-nav.is-open {
		opacity: 1;
		visibility: visible;
		transform: translateY(0);
		pointer-events: auto;
	}
	.hg-nav__list {
		flex-direction: column !important;
		gap: 0 !important;
		margin: 0;
		padding: 0;
		list-style: none;
	}
	.hg-nav__list li { width: 100%; }
	.hg-nav__list a {
		font-size: 30px !important;
		font-weight: 700 !important;
		letter-spacing: -0.02em;
		padding: 18px 0 !important;
		border-bottom: 1px solid rgba(10,10,10,0.08) !important;
		border-radius: 0 !important;
		display: block !important;
		background: transparent !important;
		color: var(--hg-primary) !important;
	}
	.hg-nav__list a::after { display: none; }
	.hg-nav__list a:hover { background: transparent !important; }
}

/* Phone */
@media (max-width: 640px) {
	.hg-container { padding: 0 18px; }
	.hg-section { padding: 56px 0; }
	.hg-hero { padding-top: 20px; padding-bottom: 40px; }
	.hg-hero__headline { font-size: clamp(40px, 12vw, 64px); letter-spacing: -0.03em; }
	.hg-hero__sub { font-size: 16px; }
	.hg-hero__cta { gap: 14px; flex-direction: column; align-items: stretch; }
	.hg-hero__cta .hg-btn { width: 100%; justify-content: center; }
	.hg-hero__cta .hg-link--inline { text-align: center; justify-content: center; align-self: center; }

	.hg-hero__scroll { display: none; }

	.hg-marquee__item { font-size: 18px; }
	.hg-marquee__group { gap: 32px; padding-right: 32px; }

	.hg-pillars { grid-template-columns: 1fr; }
	.hg-pillar { border-left: 0 !important; border-top: 1px solid var(--hg-line); padding: 36px 24px; }
	.hg-pillar:first-child { border-top: 0; }

	.hg-team__grid { grid-template-columns: 1fr; }
	.hg-work-grid { grid-template-columns: 1fr; gap: 20px; }

	.hg-cta-band .hg-display { font-size: clamp(36px, 11vw, 64px); }

	.hg-footer__grid { grid-template-columns: 1fr; gap: 28px; }
	.hg-footer__bottom { flex-direction: column; gap: 12px; text-align: center; }
	.hg-footer__nav { justify-content: center; flex-wrap: wrap; }

	.hg-inline-video__frame { border-radius: 16px; }
	.hg-hero__showreel-frame {
		aspect-ratio: 16 / 10;
		border-radius: 18px;
	}
	.hg-hero__showreel-overlay {
		left: 12px; bottom: 12px;
		padding: 6px 14px 6px 6px;
		gap: 8px;
	}
	.hg-hero__showreel-play { width: 32px; height: 32px; }
	.hg-hero__showreel-label { font-size: 10px; }
	.hg-hero__showreel-label small { font-size: 9px; }

	.hg-work-panel { padding: 32px 18px; border-radius: 18px; }
	.hg-work-panel__title { font-size: 17vw; line-height: 0.95; }
	.hg-work-panel__aside { font-size: 12px; }

	.hg-carousel__card { flex: 0 0 70%; }
	.hg-carousel__card--featured { flex: 0 0 80%; transform: none; }

	.hg-clients__logo { height: 42px; }
	.hg-clients__logo img { max-height: 42px; }

	.hg-studio__collage { grid-auto-rows: 110px; gap: 10px; }

	.hg-404 .hg-display--xxl { font-size: clamp(120px, 38vw, 200px); }
}

/* Disable expensive cursor on touch / small screens */
@media (max-width: 1024px), (hover: none), (pointer: coarse) {
	.hg-cursor { display: none !important; }
	[data-hg-magnet] { transform: none !important; }
}

/* Ensure body lock when nav open doesn't break scrolling on iOS */
body.hg-nav-open { overflow: hidden; touch-action: none; }

/* ==========================================================================
   v1.4.0 -- testimonials, contact form, building cards, mobile menu hard-reset
   ========================================================================== */

/* ---------- MOBILE MENU: hard reset, guaranteed working ---------- */
@media (max-width: 900px) {
	.hg-header__cta { display: none !important; }
	.hg-nav { display: none !important; }
	.hg-nav.is-open {
		display: block !important;
		position: fixed !important;
		top: var(--hg-header-h) !important;
		left: 0 !important; right: 0 !important; bottom: 0 !important;
		z-index: 199 !important;
		background: #efefef !important;
		padding: 28px 22px 56px !important;
		overflow-y: auto !important;
		opacity: 1 !important;
		visibility: visible !important;
		transform: none !important;
		animation: hg-nav-in .35s cubic-bezier(0.22, 1, 0.36, 1);
	}
	@keyframes hg-nav-in { from { opacity: 0; transform: translateY(-8px); } }
	.hg-nav.is-open .hg-nav__list {
		display: flex !important;
		flex-direction: column !important;
		gap: 0 !important;
		list-style: none !important;
		margin: 0 !important;
		padding: 0 !important;
	}
	.hg-nav.is-open .hg-nav__list li { width: 100% !important; display: block !important; }
	.hg-nav.is-open .hg-nav__list a {
		font-size: 28px !important;
		font-weight: 700 !important;
		padding: 18px 0 !important;
		border-bottom: 1px solid rgba(10,10,10,0.08) !important;
		border-radius: 0 !important;
		display: block !important;
		background: transparent !important;
		color: #0a0a0a !important;
	}
	.hg-nav.is-open .hg-nav__list a::after { display: none !important; }
	.hg-menu-toggle {
		display: inline-flex !important;
		margin-left: auto !important;
		z-index: 200;
		position: relative;
	}
}

/* ---------- Contact form ---------- */
.hg-contact {
	background: var(--hg-bg-dark);
	color: var(--hg-text-light);
	padding: clamp(64px, 9vw, 120px) 0;
	position: relative;
}
.hg-contact .hg-eyebrow { color: rgba(239,239,239,0.6); }
.hg-contact .hg-eyebrow::before { background: rgba(239,239,239,0.5); }
.hg-contact .hg-display { color: var(--hg-text-light); font-size: clamp(40px, 7vw, 88px); }
.hg-contact__head { text-align: center; max-width: 720px; margin: 0 auto 56px; }
.hg-contact__head .hg-eyebrow { justify-content: center; }
.hg-contact__sub {
	margin-top: 16px;
	color: rgba(239,239,239,0.7);
	font-size: 17px;
}
.hg-contact-form {
	max-width: 640px;
	margin: 0 auto;
	display: grid;
	gap: 18px;
	position: relative;
}
.hg-contact-form__row {
	display: grid;
	grid-template-columns: 1fr 1fr;
	gap: 18px;
}
.hg-contact-form__field {
	display: flex;
	flex-direction: column;
	gap: 8px;
}
.hg-contact-form__field span {
	font-family: 'Space Grotesk', 'Inter', sans-serif;
	font-size: 11px;
	letter-spacing: 0.18em;
	text-transform: uppercase;
	color: rgba(239,239,239,0.6);
	font-weight: 500;
}
.hg-contact-form input,
.hg-contact-form textarea {
	background: rgba(239,239,239,0.07);
	border: 1px solid rgba(239,239,239,0.18);
	border-radius: 14px;
	padding: 14px 18px;
	color: var(--hg-text-light);
	font-family: 'Inter', sans-serif;
	font-size: 16px;
	transition: border-color .3s cubic-bezier(0.22, 1, 0.36, 1), background .3s cubic-bezier(0.22, 1, 0.36, 1);
	width: 100%;
	box-sizing: border-box;
}
.hg-contact-form input:focus,
.hg-contact-form textarea:focus {
	outline: none;
	border-color: rgba(239,239,239,0.55);
	background: rgba(239,239,239,0.12);
}
.hg-contact-form textarea {
	resize: vertical;
	min-height: 110px;
	font-family: inherit;
}
.hg-contact-form__foot {
	display: flex; flex-wrap: wrap;
	gap: 24px; align-items: center;
	margin-top: 8px;
}
.hg-contact-form__submit {
	background: var(--hg-text-light) !important;
	color: var(--hg-primary) !important;
}
.hg-contact-form__submit:hover { transform: translateY(-2px); }
.hg-contact-form__or {
	margin: 0;
	font-size: 13px;
	color: rgba(239,239,239,0.55);
}
.hg-contact-form__or a {
	color: var(--hg-text-light);
	border-bottom: 1px solid rgba(239,239,239,0.4);
}
.hg-contact-form__status {
	margin: 6px 0 0;
	min-height: 20px;
	font-size: 14px;
	color: rgba(239,239,239,0.85);
}
.hg-contact-form.is-success .hg-contact-form__status { color: #b5e8c0; }
.hg-contact-form.is-error   .hg-contact-form__status { color: #f5b5b5; }
.hg-contact-form.is-loading .hg-contact-form__submit { opacity: 0.6; pointer-events: none; }

/* ---------- Testimonials section ---------- */
.hg-testimonials {
	padding: clamp(72px, 9vw, 120px) 0;
	background: var(--hg-bg);
}
.hg-testimonials__head {
	text-align: center;
	max-width: 640px;
	margin: 0 auto 64px;
}
.hg-testimonials__head .hg-eyebrow { justify-content: center; }
.hg-testimonials__head .hg-eyebrow::before { display: none; }
.hg-testimonials__head .hg-display { margin: 8px 0 0; }
.hg-testimonials__grid {
	display: grid;
	grid-template-columns: repeat(2, 1fr);
	gap: 24px;
	max-width: 1080px;
	margin: 0 auto;
}
.hg-testimonial {
	background: rgba(255,255,255,0.6);
	border: 1px solid rgba(10,10,10,0.06);
	border-radius: 20px;
	padding: 36px 32px;
	margin: 0;
	display: flex;
	flex-direction: column;
	gap: 24px;
	transition: transform .5s cubic-bezier(0.22, 1, 0.36, 1), box-shadow .5s cubic-bezier(0.22, 1, 0.36, 1), background .5s cubic-bezier(0.22, 1, 0.36, 1);
}
.hg-testimonial:hover {
	transform: translateY(-4px);
	background: rgba(255,255,255,0.9);
	box-shadow: 0 28px 60px -30px rgba(10,10,10,0.25);
}
.hg-testimonial__quote {
	margin: 0;
	font-size: 17px;
	line-height: 1.55;
	color: var(--hg-text);
	position: relative;
	padding-left: 28px;
}
.hg-testimonial__mark {
	position: absolute;
	left: 0; top: -8px;
	font-size: 42px;
	line-height: 1;
	color: var(--hg-primary);
	opacity: 0.3;
	font-family: 'Inter', sans-serif;
	font-weight: 700;
}
.hg-testimonial__by {
	display: flex;
	align-items: center;
	gap: 14px;
	padding-top: 16px;
	border-top: 1px solid rgba(10,10,10,0.08);
}
.hg-testimonial__avatar {
	width: 42px; height: 42px;
	border-radius: 50%;
	overflow: hidden;
	background: #d4d4d4;
	flex-shrink: 0;
	display: grid; place-items: center;
}
.hg-testimonial__avatar img { width: 100%; height: 100%; object-fit: cover; display: block; }
.hg-testimonial__avatar--initial {
	background: linear-gradient(135deg, #2a2a2a, #0a0a0a);
	color: #fff;
	font-weight: 700;
	font-size: 17px;
}
.hg-testimonial__credit {
	display: flex; flex-direction: column;
	gap: 3px;
	line-height: 1.25;
	font-size: 14px;
}
.hg-testimonial__credit strong { font-weight: 600; color: var(--hg-primary); }
.hg-testimonial__credit em {
	font-style: normal;
	color: var(--hg-mute);
	font-size: 13px;
}

/* ---------- About: Building section split layout ---------- */
.hg-building__grid {
	display: grid;
	grid-template-columns: 1fr 1fr;
	gap: clamp(40px, 6vw, 88px);
	align-items: center;
}
.hg-building__copy { max-width: 36ch; }
.hg-building__copy .hg-display { margin: 8px 0 18px; }
.hg-building__copy .hg-lede { margin-bottom: 28px; }
.hg-building__cards {
	position: relative;
	display: grid;
	grid-template-columns: repeat(3, 1fr);
	gap: 14px;
}
.hg-building__card {
	background: var(--hg-bg);
	border: 1px solid rgba(10,10,10,0.08);
	border-radius: 18px;
	overflow: hidden;
	padding: 14px;
	display: flex;
	flex-direction: column;
	gap: 12px;
	transform: rotate(var(--hg-rot, 0));
	transition: transform .55s cubic-bezier(0.34, 1.56, 0.64, 1), box-shadow .55s cubic-bezier(0.22, 1, 0.36, 1), z-index 0s;
	box-shadow: 0 18px 40px -25px rgba(10,10,10,0.4);
	position: relative;
	z-index: 1;
}
.hg-building__card:hover {
	transform: rotate(0) scale(1.04) translateY(-6px);
	box-shadow: 0 32px 64px -25px rgba(10,10,10,0.5);
	z-index: 3;
}
.hg-building__card--2 { background: var(--hg-bg-dark); border-color: rgba(255,255,255,0.06); }
.hg-building__card--2 .hg-building__label { color: var(--hg-text-light); }
.hg-building__tag {
	display: inline-flex;
	align-self: flex-start;
	background: rgba(10,10,10,0.05);
	color: var(--hg-text);
	font-family: 'Space Grotesk', 'Inter', sans-serif;
	font-size: 10px;
	letter-spacing: 0.16em;
	text-transform: uppercase;
	font-weight: 600;
	padding: 5px 10px;
	border-radius: 999px;
}
.hg-building__card--2 .hg-building__tag {
	background: rgba(239,239,239,0.95);
	color: var(--hg-primary);
}
.hg-building__media {
	aspect-ratio: 3 / 3.5;
	border-radius: 12px;
	overflow: hidden;
	background: #d6d6d6;
	display: grid; place-items: center;
}
.hg-building__media img { width: 100%; height: 100%; object-fit: cover; display: block; }
.hg-building__placeholder {
	width: 100%; height: 100%;
	display: grid; place-items: center;
	background: linear-gradient(135deg, #e4e4e4, #c4c4c4);
	color: rgba(10,10,10,0.35);
}
.hg-building__card--2 .hg-building__placeholder {
	background: linear-gradient(135deg, #1c1c1c, #0a0a0a);
	color: rgba(239,239,239,0.45);
}
.hg-building__label {
	font-size: 13px;
	font-weight: 500;
	line-height: 1.4;
	color: var(--hg-text);
	margin: 0;
}

@media (max-width: 900px) {
	.hg-building__grid { grid-template-columns: 1fr; gap: 40px; }
	.hg-building__copy { max-width: 100%; }
	.hg-building__cards { grid-template-columns: repeat(3, 1fr); gap: 10px; }
}

/* ---------- v1.4 mobile refinement (testimonials, form, footer info) ---------- */
@media (max-width: 720px) {
	.hg-testimonials__grid { grid-template-columns: 1fr; }
	.hg-testimonial { padding: 28px 22px; }
	.hg-contact-form__row { grid-template-columns: 1fr; }
	.hg-contact-form__foot { flex-direction: column; align-items: stretch; gap: 16px; }
	.hg-contact-form__submit { width: 100%; justify-content: center; }
	.hg-contact-form__or { text-align: center; }
	.hg-building__cards { grid-template-columns: 1fr 1fr; }
	.hg-building__card--3 { grid-column: 1 / -1; max-width: 60%; margin: 0 auto; }
	.hg-footer__address,
	.hg-footer__contact { font-size: 13px; line-height: 1.7; }
	.hg-footer__address { word-wrap: break-word; }
}

@media (max-width: 540px) {
	.hg-building__cards { grid-template-columns: 1fr; }
	.hg-building__card--3 { grid-column: auto; max-width: 100%; }
	.hg-footer__col { text-align: left; }
}

/* Make sure footer info ALWAYS shows on small screens */
.hg-footer__address, .hg-footer__contact {
	display: block !important;
	visibility: visible !important;
	opacity: 1 !important;
}
.hg-footer__contact a { display: inline-flex; word-break: break-all; }

/* Override old CTA band that we removed */
.hg-cta-band { display: none !important; }

/* ==========================================================================
   v1.5.0 -- slideshow, flip cards, premium mobile menu, scroll polish
   ========================================================================== */

/* ---------- Testimonials: kill the gap above ---------- */
.hg-testimonials {
	padding-top: clamp(32px, 4vw, 56px) !important;
	padding-bottom: clamp(72px, 9vw, 120px) !important;
}

/* ---------- Hero slideshow (replaces showreel) ---------- */
.hg-hero__slideshow {
	position: relative;
	width: 100%;
	aspect-ratio: 21 / 9;
	border-radius: 24px;
	overflow: hidden;
	background: #0a0a0a;
	margin: 0 0 clamp(40px, 6vw, 64px);
	box-shadow: 0 30px 60px -30px rgba(10,10,10,0.45);
	z-index: 3;
}
.hg-hero__slide {
	position: absolute;
	inset: 0;
	background: #0a0a0a center/cover no-repeat;
	opacity: 0;
	transition: opacity 1.8s cubic-bezier(0.22, 1, 0.36, 1), transform 8s cubic-bezier(0.22, 1, 0.36, 1);
	transform: scale(1.06);
	filter: saturate(0.95);
}
.hg-hero__slide.is-active {
	opacity: 0.78;
	transform: scale(1);
}
/* Grid texture overlay on top of slides */
.hg-hero__slideshow-grid {
	position: absolute;
	inset: 0;
	pointer-events: none;
	background-image: url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' width='60' height='60'><g fill='none' stroke='%23ffffff' stroke-width='1' opacity='0.18' stroke-linecap='round'><path d='M30 26 v8 M26 30 h8'/></g></svg>");
	background-size: 60px 60px;
	mix-blend-mode: overlay;
	z-index: 2;
}
.hg-hero__slideshow-tint {
	position: absolute;
	inset: 0;
	background: linear-gradient(180deg, rgba(10,10,10,0.15) 0%, rgba(10,10,10,0.45) 100%);
	z-index: 1;
	pointer-events: none;
}
.hg-hero__slideshow-label {
	position: absolute;
	bottom: 18px; left: 22px;
	font-family: 'Space Grotesk', 'Inter', sans-serif;
	font-size: 11px;
	letter-spacing: 0.22em;
	text-transform: uppercase;
	color: rgba(239,239,239,0.85);
	font-weight: 500;
	z-index: 3;
	background: rgba(10,10,10,0.5);
	padding: 8px 14px;
	border-radius: 999px;
	backdrop-filter: blur(8px);
	-webkit-backdrop-filter: blur(8px);
}

/* ---------- About: auto-flipping cards ---------- */
.hg-flip-cards {
	display: grid;
	grid-template-columns: repeat(3, 1fr);
	gap: 14px;
	perspective: 1400px;
}
.hg-flip-card {
	position: relative;
	aspect-ratio: 3 / 4;
	border-radius: 18px;
	overflow: hidden;
	transform: rotate(var(--hg-rot, 0));
	transition: transform .6s cubic-bezier(0.22, 1, 0.36, 1), box-shadow .6s cubic-bezier(0.22, 1, 0.36, 1);
	transform-style: preserve-3d;
	box-shadow: 0 22px 40px -25px rgba(10,10,10,0.5);
	background: #181818;
}
.hg-flip-card:hover {
	transform: rotate(0) scale(1.03);
	box-shadow: 0 32px 60px -22px rgba(10,10,10,0.6);
	z-index: 3;
}
.hg-flip-card__face {
	position: absolute;
	inset: 0;
	background: #181818 center/cover no-repeat;
	opacity: 0;
	transform: rotateY(90deg);
	backface-visibility: hidden;
	transition:
		opacity 1.05s cubic-bezier(0.22, 1, 0.36, 1),
		transform 1.05s cubic-bezier(0.22, 1, 0.36, 1);
}
.hg-flip-card__face.is-active {
	opacity: 1;
	transform: rotateY(0);
}
.hg-flip-card__placeholder {
	width: 100%; height: 100%;
	display: grid; place-items: center;
	background: linear-gradient(135deg, #1c1c1c, #0a0a0a);
	color: rgba(239,239,239,0.4);
}
.hg-flip-card__tag {
	position: absolute;
	top: 14px; left: 14px;
	font-family: 'Space Grotesk', 'Inter', sans-serif;
	font-size: 10px;
	letter-spacing: 0.2em;
	text-transform: uppercase;
	font-weight: 600;
	color: var(--hg-primary);
	background: rgba(239,239,239,0.95);
	padding: 5px 10px;
	border-radius: 999px;
	z-index: 4;
}
@media (max-width: 720px) {
	.hg-flip-cards { grid-template-columns: 1fr 1fr; }
	.hg-flip-card:nth-child(3) { grid-column: 1 / -1; max-width: 60%; margin: 0 auto; }
}
@media (max-width: 540px) {
	.hg-flip-cards { grid-template-columns: 1fr; gap: 18px; }
	.hg-flip-card:nth-child(3) { grid-column: auto; max-width: 100%; }
}

/* ---------- PREMIUM MOBILE / TABLET MENU (full-screen overlay) ---------- */
@media (max-width: 1024px) {
	.hg-header__cta { display: none !important; }
	.hg-nav { display: none !important; }
	.hg-nav.is-open {
		display: flex !important;
		flex-direction: column !important;
		position: fixed !important;
		inset: 0 !important;
		z-index: 199 !important;
		background: #0a0a0a !important;
		padding: 80px 28px 32px !important;
		overflow-y: auto !important;
		opacity: 1 !important;
		visibility: visible !important;
		transform: none !important;
		animation: hg-nav-slide-in .4s cubic-bezier(0.22, 1, 0.36, 1);
	}
	@keyframes hg-nav-slide-in {
		from { opacity: 0; transform: translateY(-8px); }
		to   { opacity: 1; transform: translateY(0); }
	}
	.hg-nav.is-open .hg-nav__list {
		display: flex !important;
		flex-direction: column !important;
		gap: 4px !important;
		list-style: none !important;
		margin: 0 !important;
		padding: 0 !important;
		flex: 1 1 auto;
	}
	.hg-nav.is-open .hg-nav__list li {
		width: 100% !important;
		display: block !important;
		opacity: 0;
		transform: translateY(12px);
		animation: hg-nav-item-in .55s cubic-bezier(0.22, 1, 0.36, 1) forwards;
	}
	.hg-nav.is-open .hg-nav__list li:nth-child(1) { animation-delay: .12s; }
	.hg-nav.is-open .hg-nav__list li:nth-child(2) { animation-delay: .18s; }
	.hg-nav.is-open .hg-nav__list li:nth-child(3) { animation-delay: .24s; }
	.hg-nav.is-open .hg-nav__list li:nth-child(4) { animation-delay: .3s; }
	.hg-nav.is-open .hg-nav__list li:nth-child(5) { animation-delay: .36s; }
	@keyframes hg-nav-item-in {
		to { opacity: 1; transform: translateY(0); }
	}
	.hg-nav.is-open .hg-nav__list a {
		font-size: clamp(38px, 7vw, 64px) !important;
		font-weight: 600 !important;
		letter-spacing: -0.025em !important;
		padding: 10px 0 !important;
		border: 0 !important;
		border-radius: 0 !important;
		display: block !important;
		background: transparent !important;
		color: #ffffff !important;
		line-height: 1.05 !important;
		transition: color .3s cubic-bezier(0.22, 1, 0.36, 1), transform .3s cubic-bezier(0.22, 1, 0.36, 1);
	}
	.hg-nav.is-open .hg-nav__list a::after { display: none !important; }
	.hg-nav.is-open .hg-nav__list a:hover,
	.hg-nav.is-open .hg-nav__list .current-menu-item > a,
	.hg-nav.is-open .hg-nav__list .current_page_item > a {
		color: rgba(255,255,255,0.6) !important;
		transform: translateX(8px);
	}

	/* Bottom contact block — visible on tablet/phone menu only */
	.hg-nav__bottom {
		display: flex !important;
		justify-content: space-between;
		align-items: flex-end;
		gap: 24px;
		margin-top: 48px;
		padding-top: 32px;
		border-top: 1px solid rgba(255,255,255,0.1);
		flex-wrap: wrap;
		opacity: 0;
		animation: hg-nav-item-in .65s cubic-bezier(0.22, 1, 0.36, 1) forwards .45s;
	}
	.hg-nav__contact {
		flex: 1 1 220px;
		color: rgba(255,255,255,0.65);
		font-size: 13px;
		line-height: 1.6;
	}
	.hg-nav__address {
		margin: 0 0 12px;
		font-family: 'Space Grotesk', 'Inter', sans-serif;
		letter-spacing: 0.04em;
		text-transform: uppercase;
		font-size: 12px;
		font-weight: 500;
	}
	.hg-nav__email a {
		color: rgba(255,255,255,0.9);
		font-family: 'Space Grotesk', 'Inter', sans-serif;
		font-size: 12px;
		letter-spacing: 0.16em;
		text-transform: uppercase;
		font-weight: 500;
		border-bottom: 1px solid rgba(255,255,255,0.3);
		padding-bottom: 4px;
	}
	.hg-nav__legal {
		font-family: 'Space Grotesk', 'Inter', sans-serif;
		font-size: 11px;
		color: rgba(255,255,255,0.4);
		letter-spacing: 0.1em;
		text-transform: uppercase;
	}

	/* Brand logo: when nav is open, logo stays white */
	.hg-nav.is-open ~ * .hg-wordmark,
	body:has(.hg-nav.is-open) .hg-wordmark { color: #fff; }

	/* Toggle button: becomes a styled circle when open */
	.hg-menu-toggle {
		display: inline-flex !important;
		margin-left: auto !important;
		position: relative;
		z-index: 200;
		width: 44px; height: 44px;
		border-radius: 50%;
		transition: background .3s cubic-bezier(0.22, 1, 0.36, 1), border-color .3s cubic-bezier(0.22, 1, 0.36, 1);
		border: 1px solid transparent;
	}
	.hg-menu-toggle[aria-expanded="true"] {
		background: #ffffff;
		border-color: #ffffff;
	}
	.hg-menu-toggle[aria-expanded="true"] span { background: #0a0a0a !important; }
	.hg-menu-toggle[aria-expanded="true"] span:nth-child(1) { transform: translateY(7px) rotate(0); width: 16px; }
	.hg-menu-toggle[aria-expanded="true"] span:nth-child(2) { opacity: 0; }
	.hg-menu-toggle[aria-expanded="true"] span:nth-child(3) { display: none; }

	/* Header behind nav: keep logo visible, white */
	body:has(.hg-nav.is-open) .hg-header {
		background: transparent !important;
		border-bottom: 0 !important;
	}
	body:has(.hg-nav.is-open) .hg-wordmark,
	body:has(.hg-nav.is-open) .hg-wordmark__text,
	body:has(.hg-nav.is-open) .hg-wordmark__arrow {
		color: #fff !important;
	}
	body:has(.hg-nav.is-open) .hg-wordmark__arrow path { fill: #fff !important; }
}

/* Desktop: nav bottom block is hidden */
@media (min-width: 1025px) {
	.hg-nav__bottom { display: none; }
}

/* ---------- Scroll animation: more elegant ---------- */
[data-reveal] {
	opacity: 0;
	transform: translateY(32px);
	filter: blur(4px);
	transition:
		opacity .9s cubic-bezier(0.16, 1, 0.3, 1),
		transform .9s cubic-bezier(0.16, 1, 0.3, 1),
		filter .9s cubic-bezier(0.16, 1, 0.3, 1);
	will-change: opacity, transform, filter;
}
[data-reveal].is-visible {
	opacity: 1;
	transform: translateY(0);
	filter: blur(0);
}

/* Work cards: scroll-snap into place with subtle scale */
.hg-carousel__card[data-reveal] {
	transform: translateY(40px) scale(0.96);
	transition:
		opacity 1s cubic-bezier(0.16, 1, 0.3, 1),
		transform 1s cubic-bezier(0.16, 1, 0.3, 1),
		filter 1s cubic-bezier(0.16, 1, 0.3, 1);
}
.hg-carousel__card[data-reveal].is-visible {
	transform: translateY(0) scale(1);
}

/* ---------- Performance hints ---------- */
.hg-hero__slideshow,
.hg-flip-card,
.hg-marquee__track,
.hg-clients__track { will-change: transform, opacity; }

/* removed img/video content-visibility */

/* Lazy frames don't grow viewport */
.hg-inline-video__frame,
.hg-hero__showreel-frame,
.hg-hero__slideshow,
.hg-video-frame { contain: layout paint; }

/* ---------- Polishing: ensure logo arrow stays correct color on header ---------- */
.hg-header .hg-wordmark { color: var(--hg-primary); }
.hg-header .hg-wordmark__arrow path { fill: currentColor; }

/* ==========================================================================
   v1.6.0 -- performance pass. strip expensive effects, lighter blurs.
   This block is appended LAST so it wins the cascade.
   ========================================================================== */

/* Kill cursor companion entirely */
.hg-cursor { display: none !important; }

/* No more filter:blur on reveal — that was eating GPU on every section */
[data-reveal] {
	filter: none !important;
	transform: translateY(20px);
	transition: opacity .55s cubic-bezier(0.22, 1, 0.36, 1),
	            transform .55s cubic-bezier(0.22, 1, 0.36, 1) !important;
}
[data-reveal].is-visible {
	transform: none !important;
	filter: none !important;
}
.hg-carousel__card[data-reveal] {
	transform: translateY(24px) !important;
}
.hg-carousel__card[data-reveal].is-visible {
	transform: none !important;
}

/* Strip hero headline-line blur transition */
.hg-hero__headline .hg-display__line {
	filter: none !important;
}

/* No magnetic CTAs */
.hg-btn { transform: none !important; }
.hg-btn[data-hg-magnet] { transform: none !important; }
.hg-btn:hover { transform: translateY(-2px) !important; }
.hg-btn:active { transform: translateY(0) !important; }

/* No card tilt */
.hg-carousel__card[data-hg-tilt],
.hg-carousel__card { transform: none !important; }
.hg-carousel__card--featured { transform: translateY(-10px) !important; }
.hg-carousel__card:hover { transform: translateY(-4px) !important; }
.hg-team__card[data-hg-tilt],
.hg-team__card { transform: none !important; }
.hg-team__card:hover { transform: translateY(-4px) !important; }

/* No mix-blend-mode (kills GPU on some hardware) */
.hg-hero__slideshow-grid { mix-blend-mode: normal !important; opacity: 0.35; }

/* Lighter backdrop blurs */
.hg-header { backdrop-filter: blur(10px) !important; -webkit-backdrop-filter: blur(10px) !important; }
.hg-header.is-scrolled { backdrop-filter: blur(14px) !important; -webkit-backdrop-filter: blur(14px) !important; }
.hg-showreel-modal { backdrop-filter: blur(16px) !important; -webkit-backdrop-filter: blur(16px) !important; }

/* Lighter shadows */
.hg-work-card:hover,
.hg-team__card:hover { box-shadow: 0 18px 32px -20px rgba(10,10,10,0.3) !important; }
.hg-studio__tile:hover { box-shadow: 0 18px 32px -20px rgba(10,10,10,0.35) !important; }

/* Reduce will-change to free GPU memory */
.hg-marquee__track,
.hg-clients__track { will-change: auto !important; }

/* Page-leave fade was intercepting button clicks — make sure body never gets stuck */
body.hg-leaving { opacity: 1 !important; pointer-events: auto !important; transition: none !important; }

/* ---------- MOBILE MENU: maximum-specificity hard reset ---------- */
@media (max-width: 1024px) {
	/* Hide desktop pieces */
	.hg-header .hg-header__cta,
	.hg-header .hg-nav { display: none !important; }

	/* When nav is open: full-screen black overlay */
	.hg-header .hg-nav.is-open,
	.hg-nav.is-open {
		display: flex !important;
		flex-direction: column !important;
		position: fixed !important;
		top: 0 !important;
		left: 0 !important;
		right: 0 !important;
		bottom: 0 !important;
		width: 100vw !important;
		height: 100vh !important;
		height: 100dvh !important;
		z-index: 999 !important;
		background: #0a0a0a !important;
		padding: 96px 24px 32px !important;
		overflow-y: auto !important;
		-webkit-overflow-scrolling: touch;
		opacity: 1 !important;
		visibility: visible !important;
		transform: none !important;
		pointer-events: auto !important;
		margin: 0 !important;
	}

	.hg-nav.is-open .hg-nav__list {
		display: flex !important;
		flex-direction: column !important;
		gap: 0 !important;
		list-style: none !important;
		margin: 0 !important;
		padding: 0 !important;
		flex: 1 1 auto;
	}
	.hg-nav.is-open .hg-nav__list li {
		width: 100% !important;
		display: block !important;
		opacity: 1 !important;
		transform: none !important;
	}
	.hg-nav.is-open .hg-nav__list a {
		font-size: clamp(36px, 7vw, 60px) !important;
		font-weight: 600 !important;
		letter-spacing: -0.025em !important;
		padding: 12px 0 !important;
		margin: 0 !important;
		border: 0 !important;
		border-radius: 0 !important;
		display: block !important;
		background: transparent !important;
		color: #ffffff !important;
		line-height: 1.05 !important;
		text-decoration: none !important;
	}
	.hg-nav.is-open .hg-nav__list a::after,
	.hg-nav.is-open .hg-nav__list a::before { display: none !important; }
	.hg-nav.is-open .hg-nav__list a:hover,
	.hg-nav.is-open .hg-nav__list .current-menu-item > a,
	.hg-nav.is-open .hg-nav__list .current_page_item > a {
		color: rgba(255,255,255,0.55) !important;
	}

	/* Bottom contact block */
	.hg-nav.is-open .hg-nav__bottom {
		display: flex !important;
		justify-content: space-between !important;
		gap: 24px !important;
		margin-top: 32px !important;
		padding-top: 24px !important;
		border-top: 1px solid rgba(255,255,255,0.12) !important;
		flex-wrap: wrap !important;
	}
	.hg-nav__contact { color: rgba(255,255,255,0.7) !important; font-size: 13px !important; }
	.hg-nav__address {
		margin: 0 0 10px !important;
		font-family: 'Space Grotesk', 'Inter', sans-serif !important;
		font-size: 12px !important;
		letter-spacing: 0.04em !important;
		text-transform: uppercase !important;
	}
	.hg-nav__email a {
		color: rgba(255,255,255,0.95) !important;
		font-family: 'Space Grotesk', 'Inter', sans-serif !important;
		font-size: 12px !important;
		letter-spacing: 0.16em !important;
		text-transform: uppercase !important;
		font-weight: 500 !important;
		border-bottom: 1px solid rgba(255,255,255,0.3) !important;
	}
	.hg-nav__legal {
		font-family: 'Space Grotesk', 'Inter', sans-serif !important;
		font-size: 11px !important;
		color: rgba(255,255,255,0.45) !important;
		letter-spacing: 0.1em !important;
		text-transform: uppercase !important;
		align-self: flex-end;
	}

	/* Toggle button: bigger touch target, white pill when open, ALWAYS clickable */
	.hg-menu-toggle {
		display: inline-flex !important;
		margin-left: auto !important;
		position: relative !important;
		z-index: 1000 !important;
		width: 44px !important;
		height: 44px !important;
		padding: 0 !important;
		border-radius: 50% !important;
		background: transparent !important;
		border: 1px solid transparent !important;
		flex-direction: column !important;
		justify-content: center !important;
		align-items: center !important;
		gap: 5px !important;
		cursor: pointer !important;
	}
	.hg-menu-toggle span {
		width: 18px !important;
		height: 2px !important;
		background: var(--hg-primary) !important;
		display: block !important;
		transition: transform .25s, opacity .2s, background .2s !important;
		pointer-events: none !important;
	}
	.hg-menu-toggle[aria-expanded="true"] {
		background: #ffffff !important;
		border-color: #ffffff !important;
	}
	.hg-menu-toggle[aria-expanded="true"] span {
		background: #0a0a0a !important;
	}
	.hg-menu-toggle[aria-expanded="true"] span:nth-child(1) {
		transform: translateY(7px) rotate(0deg) !important;
		width: 14px !important;
	}
	.hg-menu-toggle[aria-expanded="true"] span:nth-child(2) { opacity: 0 !important; }
	.hg-menu-toggle[aria-expanded="true"] span:nth-child(3) { display: none !important; }

	/* Body scroll lock indicator */
	body.hg-nav-open {
		overflow: hidden !important;
		position: fixed !important;
		width: 100% !important;
	}
	body.hg-nav-open .hg-header {
		background: transparent !important;
		border-bottom: 0 !important;
		box-shadow: none !important;
	}
	/* Logo white when menu open */
	body.hg-nav-open .hg-wordmark,
	body.hg-nav-open .hg-wordmark__text { color: #ffffff !important; }
	body.hg-nav-open .hg-wordmark__arrow path,
	body.hg-nav-open .hg-wordmark__arrow polygon { fill: #ffffff !important; }
}

/* Desktop: nav bottom hidden */
@media (min-width: 1025px) {
	.hg-nav__bottom { display: none !important; }
}

/* ---------- content-visibility for offscreen sections (paint perf) ---------- */
/* content-visibility removed in v1.6.1 — was hiding sections with data-reveal opacity-0 children */

/* ---------- iframes lazy and contained ---------- */
/* removed iframe content-visibility */

/* ---------- Animations off when reduced motion ---------- */
@media (prefers-reduced-motion: reduce) {
	.hg-marquee__track, .hg-clients__track { animation: none !important; }
	.hg-hero__slide { transition: opacity .3s !important; transform: none !important; }
	.hg-flip-card__face { transition: opacity .3s !important; transform: none !important; }
	[data-reveal] { opacity: 1 !important; transform: none !important; }
}


/* v1.6.1 safety net — ensure data-reveal elements never stay hidden if JS fails */
.no-js [data-reveal],
html.no-js-fallback [data-reveal] { opacity: 1 !important; transform: none !important; }

@media (prefers-reduced-motion: reduce) {
	[data-reveal] { opacity: 1 !important; transform: none !important; }
}

/* ==========================================================================
   v1.6.2 -- Team headline: 1-2 line max, not 6
   ========================================================================== */
.hg-team__head {
	max-width: none !important;
	margin-bottom: 64px !important;
}
.hg-team__head .hg-display {
	font-size: clamp(32px, 4.5vw, 60px) !important;
	line-height: 1.05 !important;
	letter-spacing: -0.025em !important;
	max-width: 22ch !important;
}
@media (max-width: 720px) {
	.hg-team__head .hg-display {
		font-size: clamp(30px, 6vw, 42px) !important;
		max-width: 18ch !important;
	}
}