/* Modern baseline reset */

*,
*::before,
*::after {
	box-sizing: border-box;
}

:root .home {
	--director-hover-colour: #FFF9EF;
	--brand-colour: #523748;
	--link-colour: #523748;
	--link-muted-colour: rgb(82 55 72 / 0.65);
	--link-hover-colour: #8C3657;
	--footer-link-colour: #523748;
	--footer-link-hover-colour: #8C3657;
}

:root:not([data-colour-theme="blue"]):not([data-colour-theme="yellow"]):has(.home) {
	/* Pale plaster pink; previous stronger gradient: #F39EA5 / #D5637D. */
	--director-hover-colour: #8C3657;
	--mountain-light: #C5A3CE;
	--mountain-mid: #9670AD;
	--mountain-shade: #68457E;
	--mountain-dark: #392B49;
	--mountain-accent-light: #A47ABA;
	--mountain-accent-dark: #704889;
	--mountain-face-light: #B590C5;
	--mountain-face-dark: #80569A;
	--mountain-sun: #FDD060;
	--mountain-stripes: #B7D7C5; /* Previous blush: #F4D6D1. */
}

:root:not([data-colour-theme="blue"]):not([data-colour-theme="yellow"]):has(.home)[data-colour-theme="pinkblue"] {
	--mountain-light: #C9E1EF;
	--mountain-mid: #78B5D8;
	--mountain-shade: #397FA8;
	--mountain-dark: #245574;
	--mountain-accent-light: #78B5D8;
	--mountain-accent-dark: #397FA8;
	--mountain-face-light: #A9D0E8;
	--mountain-face-dark: #5597C1;
	--mountain-stripes: #F4D6D1;
}

:root:not([data-colour-theme="blue"]):not([data-colour-theme="yellow"]):has(.home)[data-colour-theme="spn1"] {
	--mountain-light: #EAB9C4;
	--mountain-mid: #CB819A;
	--mountain-shade: #477C9E;
	--mountain-dark: #294D6A;
	--mountain-accent-light: #EBC77C;
	--mountain-accent-dark: #BD8E42;
	--mountain-face-light: #DFA3B6;
	--mountain-face-dark: #B96686;
	--mountain-sun: #EE7544;
	--mountain-stripes: #E9AE6B;
	--mountain-trees: #E9AE6B;
}

:root:not([data-colour-theme="blue"]):not([data-colour-theme="yellow"]):has(.home):is([data-colour-theme="spn2"], [data-colour-theme="spn3"]) {
	--mountain-stripes: #68457E;
	--mountain-trees: #83B8A5;
}

:root:not([data-colour-theme="blue"]):not([data-colour-theme="yellow"]):has(.home)[data-colour-theme="spn2"] {
	--mountain-light: #E489A3;
	--mountain-mid: #D87392;
	--mountain-shade: #7E929F;
	--mountain-dark: #708591;
	--mountain-accent-light: #CEAD70;
	--mountain-accent-dark: #BA985E;
	--mountain-face-light: #B63D65;
	--mountain-face-dark: #8D2D50;
	--mountain-sun: #CEAD70;
	--mountain-stripes: #AAB7BE;
	--mountain-trees: #F5F0E8;
}

:root[data-colour-theme="spn2"] .home {
	--brand-colour: #523748;
	--link-colour: #523748;
	--link-muted-colour: rgb(82 55 72 / 0.65);
}

:root[data-colour-theme="spn3"] .home {
	--brand-colour: #402A3D;
	--link-colour: #402A3D;
	--link-muted-colour: rgb(64 42 61 / 0.65);
}

:root:not([data-colour-theme="blue"]):not([data-colour-theme="yellow"]):has(.home)[data-colour-theme="spn3"] {
	--mountain-light: #F0D0CD;
	--mountain-mid: #DDB0AC;
	--mountain-shade: #C65D36;
	--mountain-dark: #843C29;
	--mountain-accent-light: #E5BAB8;
	--mountain-accent-dark: #C88F8B;
	--mountain-face-light: #ECA077;
	--mountain-face-dark: #CF6A3F;
	--mountain-sun: #F2D584;
	--mountain-stripes: #CDB87B;
	--mountain-trees: #244F40;
}

:root[data-colour-theme]:has(.home) {
	--page-gradient-start: #F5F0E8;
	--page-gradient-end: #F4D6D1;
	--home-gradient-start: #F5F0E8;
	--home-gradient-end: #F4D6D1;
}

:root.home-intro-pending:has(.home) {
	transition: none;
}

:root.home-intro-cleanup {
	transition: none;
}

:root[data-colour-theme="blue"] .home {
	--brand-colour: #713852;
	--link-colour: #713852;
	--link-muted-colour: rgb(113 56 82 / 0.65);
	--link-hover-colour: #A13865;
	--footer-link-colour: #713852;
	--footer-link-hover-colour: #A13865;
}

:root[data-colour-theme="blue"]:has(.home) {
	--director-hover-colour: #A13865;
	--mountain-light: #D73E8E;
	--mountain-mid: #C22E7A;
	--mountain-shade: #7284AC;
	--mountain-dark: #3E537E;
	--mountain-accent-light: #B2BFD9;
	--mountain-accent-dark: #6E80A4;
	--mountain-face-light: #C22E7A;
	--mountain-face-dark: #8E1051;
	--mountain-sun: #EEB34F;
	--mountain-stripes: #363517;
	--mountain-trees: #F2EDE9;
}

:root[data-colour-theme="yellow"] .home {
	--brand-colour: #8B343C;
	--link-colour: #8B343C;
	--link-muted-colour: rgb(139 52 60 / 0.65);
	--link-hover-colour: #B4484D;
	--footer-link-colour: #8B343C;
	--footer-link-hover-colour: #B4484D;
}

:root[data-colour-theme="yellow"]:has(.home) {
	--director-hover-colour: #B4484D;
	--mountain-light: #F93434;
	--mountain-mid: #AD1F1F;
	--mountain-shade: #A29090;
	--mountain-dark: #614142;
	--mountain-accent-light: #F8FDFC;
	--mountain-accent-dark: #CCC6C2;
	--mountain-face-light: #CC1E1E;
	--mountain-face-dark: #500707;
	--mountain-sun: #F7AFD0;
	--mountain-stripes: #6A4349;
	--mountain-trees: #E9BF92;
}

html {
	-webkit-text-size-adjust: 100%;
	text-size-adjust: 100%;
}

body {
	margin: 0;
	min-block-size: 100vh;
	line-height: 1.5;
}

:where(h1, h2, h3, h4, h5, h6, p, figure, blockquote, dl, dd) {
	margin: 0;
}

:where(ul, ol) {
	margin-block: 0;
}

:where(img, picture, video, canvas, svg) {
	display: block;
	max-inline-size: 100%;
}

img,
video {
	block-size: auto;
}

:where(input, button, textarea, select) {
	font: inherit;
}

button,
[type="button"],
[type="reset"],
[type="submit"] {
	cursor: pointer;
}

:disabled {
	cursor: not-allowed;
}

textarea {
	resize: vertical;
}

table {
	border-collapse: collapse;
	border-spacing: 0;
}

iframe {
	border: 0;
}

:focus-visible {
	outline: 2px solid currentColor;
	outline-offset: 2px;
}

[hidden] {
	display: none !important;
}

@media (prefers-reduced-motion: reduce) {
	*,
	*::before,
	*::after {
		scroll-behavior: auto !important;
		animation-duration: 0.01ms !important;
		animation-iteration-count: 1 !important;
		transition-duration: 0.01ms !important;
	}
}


/* Page transitions */

@view-transition {
	navigation: auto;
}

::view-transition-group(root) {
	animation-duration: 250ms;
}

::view-transition-old(root),
::view-transition-new(root) {
	animation-duration: 250ms;
	animation-timing-function: ease-in-out;
}

@media (prefers-reduced-motion: reduce) {
	@view-transition {
		navigation: none;
	}

	::view-transition-group(root),
	::view-transition-old(root),
	::view-transition-new(root) {
		animation: none;
	}
}

/* == custom styles == */

@property --page-gradient-start {
	syntax: "<color>";
	inherits: true;
	initial-value: #F5F0E8;
}

@property --page-gradient-end {
	syntax: "<color>";
	inherits: true;
	initial-value: #F4D6D1;
}

:root{

	/* Palette roles: components below should not contain preset colours. */
    --background-color: #F5F0E8;
	--page-background: linear-gradient(180deg, #F5F0E8 0%, #F4D6D1 100%);
	--page-gradient-start: #F5F0E8;
	--page-gradient-end: #F4D6D1;
	--brand-colour: #98213D;
	--link-colour: #98213D;
	--link-muted-colour: #B87989;
	--link-hover-colour: #67152A;
	--footer-link-colour: #388BC7;
	--footer-link-hover-colour: #142845;
	--director-hover-colour: #F4D6D1;
	--mountain-colour: #B87989;
	--mountain-light: #F4D6D1;
	--mountain-mid: #EBC5C1;
	--mountain-shade: #D8AEAB;
	--mountain-dark: #C9908E;

    --body-font: neue-haas-unica, sans-serif;
	--page-gutter: clamp(1.5rem, 3vw, 3rem);
	/* Room the overlaid header needs above page content. */
	--header-space: 9rem;

}

@media screen and (min-width: 768px) {
	:root {
		--header-space: clamp(10rem, 13.5vw, 13rem);
	}
}

:root[data-colour-theme="blue"] {
	--brand-colour: #FFF;
	--link-colour: #fff;
	--link-muted-colour: #63869E;
	--link-hover-colour: #F8CE70;
	--director-hover-colour: #FFF;
	--mountain-colour: #63869E;
	--mountain-light: #63869E;
	--mountain-mid: #A8C9DD;
	--mountain-shade: #8AAFC8;
	--mountain-dark: #6D94B0;
}

:root[data-colour-theme="yellow"] {
	--brand-colour: #71501D;
	--link-colour: #71501D;
	--link-muted-colour: #9A793F;
	--link-hover-colour: #4C3412;
	--director-hover-colour: #F5DEA0;
    --mountain-colour: #B87989;
	--mountain-light: #F4D6D1;
	--mountain-mid: #EBC5C1;
	--mountain-shade: #D8AEAB;
	--mountain-dark: #C9908E;
    /*
	--mountain-colour: #9A793F;
	--mountain-light: #F5DEA0;
	--mountain-mid: #E8CB87;
	--mountain-shade: #D1AE65;
	--mountain-dark: #B7924E;
    */
}

html {
	transition: --page-gradient-start 700ms ease-in-out, --page-gradient-end 700ms ease-in-out;
}

body {
    background-color: var(--background-color);
    background: var(--page-background);

    font-family: var(--body-font);
    font-weight: 400;
    font-style: normal;
}

a{
	color: #be516b;
	text-decoration: none;
	transition: color 700ms ease-in-out;
}



/* utility classes */
.flex{
    display: flex;
}

.flex-column{
    flex-direction: column;
}

.flex-wrap{
    flex-wrap: wrap;
}

.align-center{
    align-items: center;
}
.justify-center{
    justify-content: center;
}

.no-list{
    list-style: none;
    padding: 0;
    margin: 0;
}

.col-3 li{
    flex: 0 0 33.3333%;
    max-width: 33.3333%;
}


.directors-roster-nav {
	position: relative;
	z-index: 1;
	display: grid;
	width: 100%;
	margin-inline: auto;
	padding-inline: var(--page-gutter);
    padding-top: 8em;
	gap: clamp(1.5rem, 2vw, 2.5rem);
}

@media screen and (min-width: 768px) {
.directors-roster-nav {
	padding-top: clamp(10rem, 15vw, 18rem);
	/* Clear the fixed mountains (~19.3vw tall, minus the footer that sits over them) so long rosters scroll instead of overlapping. */
	padding-bottom: calc(19.5vw - 1rem);
}
}

.production-company-list {
	display: flex;
	flex-wrap: wrap;
	gap: 0.25rem 1rem;
	padding: 0;
}

/* Roster typography mirrors the director header and reel panel: quiet labels, bold tight names. */
.production-company-list button {
	display: inline-flex;
	align-items: center;
	gap: 0.4rem;
	padding: 0;
	border: 0;
	background: transparent;
	color: var(--link-muted-colour);
	font-size: clamp(1rem, 0.9rem + 0.3vw, 1.1875rem);
	font-weight: 500;
	letter-spacing: -0.005em;
	line-height: 1.6;
	text-align: left;
	transition: color 700ms ease-in-out;
}

/* Reserve the tree's space so company names stay aligned when selection changes. */
.production-company-list button::before {
	--tree-marker: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 46 152'%3E%3Cpath transform='translate(-1355.79 -271.388)' d='M1378.71 271.388L1355.79 381.09H1374.05V423.321H1382.57V381.342H1401.64L1378.71 271.388Z'/%3E%3C/svg%3E");
	content: "";
	flex: none;
	width: calc(0.42em * 152 / 46);
	height: 0.95em;
	background: currentColor;
	opacity: 0;
	-webkit-mask: var(--tree-marker) center / auto 100% no-repeat;
	mask: var(--tree-marker) center / auto 100% no-repeat;
	transition: opacity 200ms ease;
}

.production-company-list button:hover {
	color: var(--link-colour);
}

:root:has(.home) .production-company-list button:hover,
:root:has(.home) .production-company-list button:focus-visible {
	color: var(--link-hover-colour);
}

.production-company-list button[aria-pressed="true"] {
	color: var(--link-colour);
}

.production-company-list button[aria-pressed="true"]::before {
	opacity: 0.75;
}

.directors-roster {
	padding: 0;
}

.directors-roster li {
	break-inside: avoid;
	margin-bottom: 0;
}

.directors-roster a {
	display: block;
	width: fit-content;
	padding-block: 0.12em;
	color: var(--link-colour);
	font-family: var(--headerfont), sans-serif;
	font-size: clamp(1.375rem, 1.05rem + 0.85vw, 1.875rem);
	font-weight: 700;
	letter-spacing: -0.025em;
	line-height: 1.1;
	text-decoration: none;
	transition: color 700ms ease-in-out, opacity 200ms ease;
}

.directors-roster:has(a:focus-visible) a:not(:focus-visible) {
	opacity: 0.3;
}

@media (hover: hover) and (pointer: fine) {
	.directors-roster:has(a:hover) a:not(:hover) {
		opacity: 0.3;
	}

	.directors-roster a:hover {
		opacity: 1;
	}
}

.directors-roster a:hover,
.directors-roster a:focus-visible {
	text-decoration: none;
	text-underline-offset: 0.2em;
	color: var(--director-hover-colour);
}

.directors-roster [hidden] {
	display: none;
}

@media screen and (min-width: 768px) {
	.directors-roster-nav {
		grid-template-columns: minmax(10rem, 1fr) minmax(0, 3.5fr);
	}

	.production-company-list {
		flex-direction: column;
		align-items: flex-start;
	}

	/* Two fixed columns filled top-to-bottom; JS sets --roster-rows (min 5) so large rosters grow downward, not sideways. */
	.directors-roster {
		display: grid;
		grid-auto-flow: column;
		grid-template-columns: repeat(2, minmax(0, 1fr));
		grid-template-rows: repeat(var(--roster-rows, 5), auto);
		column-gap: clamp(1.5rem, 2.5vw, 3rem);
		align-content: start;
		padding-inline-start: clamp(0.75rem, 1vw, 1.25rem);
	}
}

/* Mobile landing: companies stack like desktop; director list aligns right (experiment). */
@media screen and (max-width: 767px) {
	.directors-roster-nav {
		padding-top: 7rem;
	}

	.production-company-list {
		flex-direction: column;
		align-items: flex-start;
		gap: 0;
	}

	.production-company-list button {
		line-height: 1.85;
	}

	.directors-roster {
		text-align: right;
        padding-right: 1em;
	}

	.directors-roster a {
		margin-left: auto;
	}
}

/* mobile menu */
.menu-toggle {
	display: none;
}

@media screen and (max-width: 767px) {
	html.mobile-menu-open,
	body.mobile-menu-open {
		overflow: hidden;
	}

	.menu-ready .menu-toggle {
		display: flex;
		position: relative;
		z-index: 2;
	}

	.menu-ready .navigation-wrapper {
		position: fixed;
		z-index: 1;
		inset: 0;
		overflow-y: auto;
		overscroll-behavior: contain;
		scrollbar-width: none;
		padding: 8rem 8vw 3rem;
		background: linear-gradient(180deg, var(--page-gradient-start), var(--page-gradient-end));
		transform: translateX(-100%);
		visibility: hidden;
		pointer-events: none;
	}

	.menu-animated .navigation-wrapper {
		transition: transform 400ms ease, visibility 0s 400ms;
	}

	.menu-ready.toggled .navigation-wrapper {
		transform: translateX(0);
		visibility: visible;
		pointer-events: auto;
		transition-delay: 0s;
	}

	.menu-ready.toggled .menu-toggle {
		position: fixed;
		top: clamp(1.5rem, 3vw, 3rem);
		right: clamp(1.5rem, 3vw, 3rem);
	}

	.main-navigation .nav-menu {
		flex-direction: column;
		align-items: flex-start;
		gap: 0;
		padding: 0;
	}

	.main-navigation .nav-menu li {
		width: 100%;
	}

	/* Large bold titles like the director roster; the tree sits to the left and reserves its space. */
	.main-navigation .nav-menu a {
		display: flex;
		align-items: center;
		gap: 0.6rem;
		padding: 0.3em 0;
		color: var(--link-colour);
		font-family: var(--headerfont), sans-serif;
		font-size: clamp(2.25rem, 10vw, 3.25rem);
		font-weight: 700;
		letter-spacing: -0.03em;
		line-height: 1.1;
	}

	.main-navigation .nav-menu a::before {
		position: static;
		flex: none;
		width: 1.1rem;
		height: 1.9rem;
		transform: none;
		background-position: center;
	}

	.menu-ready .navigation-wrapper::-webkit-scrollbar {
		display: none;
	}

	.menu-ready .navigation-wrapper {
		display: flex;
		flex-direction: column;
		padding-bottom: 8rem;
	}

	.mobile-menu-extras {
		display: flex;
		flex-direction: column;
		gap: 0.5rem;
		margin-top: auto;
		padding-top: 2.5rem;
		/* Align with the nav text: tree width (1.1rem) + gap (0.6rem). */
		padding-left: 1.7rem;
		position: relative;
		z-index: 1;
	}

	.mobile-menu-extras ul {
		display: flex;
		flex-direction: column;
		gap: 0;
		margin: 0;
		padding: 0;
	}

	.mobile-menu-extras li {
		list-style: none;
	}

	.mobile-menu-extras a {
		display: block;
		padding-block: 0.25rem;
		color: var(--link-colour);
		font-size: 0.8125rem;
		letter-spacing: 0.02em;
		line-height: 1.5;
		text-decoration: none;
		text-transform: uppercase;
		opacity: 0.75;
	}

	.menu-mountains {
		position: fixed;
		z-index: 0;
		bottom: 0;
		left: 0;
		width: 100%;
		overflow: hidden;
		pointer-events: none;
	}

	.menu-mountains svg {
		display: block;
		width: 100%;
		height: auto;
	}

	.menu-mountains stop {
		stop-color: var(--mountain-light);
	}

	.menu-mountains :is([id$="mountain-rust"] stop:last-child, [id$="mountain-gold"] stop:first-child, [id$="mountain-pink-light"] stop:last-child) {
		stop-color: var(--mountain-mid);
	}

	.menu-mountains :is([id$="mountain-gold"] stop:last-child, [id$="mountain-rose"] stop:last-child, [id$="mountain-burgundy-shadow"] stop:first-child, [id$="mountain-blue-shadow"] stop:first-child) {
		stop-color: var(--mountain-shade);
	}

	.menu-mountains :is([id$="mountain-burgundy-shadow"], [id$="mountain-blue-shadow"]) stop:last-child {
		stop-color: var(--mountain-dark);
	}

	.menu-mountains [id$="m07"] {
		fill: var(--mountain-shade);
	}

	/* Fade the page out as the menu slides in so right-aligned names don't show at the panel's leading edge. */
	.site-main {
		transition: opacity 250ms ease;
	}

	body.mobile-menu-open .site-main {
		opacity: 0;
	}

	/* Opening: items rise in one after another. Closing: a quick plain fade, never the reverse. */
	.main-navigation .nav-menu li,
	.mobile-menu-extras,
	.menu-mountains {
		opacity: 0;
		transition: opacity 150ms ease;
	}

	.menu-ready.toggled .nav-menu li,
	.menu-ready.toggled .mobile-menu-extras {
		opacity: 1;
		animation: menu-item-rise 500ms cubic-bezier(0.2, 0.7, 0.2, 1) both;
	}

	/* Fade only for the mountains: a vertical shift would overflow the panel and show a scrollbar. */
	.menu-ready.toggled .menu-mountains {
		opacity: 1;
		animation: menu-fade-in 500ms ease 250ms both;
	}

	.menu-ready.toggled .nav-menu li:nth-child(1) { animation-delay: 200ms; }
	.menu-ready.toggled .nav-menu li:nth-child(2) { animation-delay: 300ms; }
	.menu-ready.toggled .nav-menu li:nth-child(3) { animation-delay: 400ms; }
	.menu-ready.toggled .nav-menu li:nth-child(n+4) { animation-delay: 500ms; }
	.menu-ready.toggled .mobile-menu-extras { animation-delay: 600ms; }

	@keyframes menu-item-rise {
		from {
			opacity: 0;
			transform: translateY(14px);
		}
	}

	@keyframes menu-fade-in {
		from {
			opacity: 0;
		}
	}
}

@media screen and (max-width: 767px) and (prefers-reduced-motion: reduce) {
	.main-navigation .nav-menu li,
	.mobile-menu-extras,
	.menu-mountains {
		opacity: 1;
		transform: none;
		transition: none;
		animation: none !important;
	}
}

@media screen and (min-width: 768px) {
	.mobile-menu-extras,
	.menu-mountains {
		display: none;
	}
}

@media screen and (max-width: 767px) and (prefers-reduced-motion: reduce) {
	.menu-animated .navigation-wrapper {
		transition: none;
	}
}

@media screen and (min-width: 768px) {
    .menu-toggle {
        display: none;
    }
}



/* general layout styles */

.site {
	display: flex;
	flex-direction: column;
	min-height: 100vh;
	min-height: 100dvh;
}

.gap-left-1 {
    margin-left: 1em;
}

.site-footer {
    display: flex;
    justify-content: flex-start;
	flex-shrink: 0;
	margin-top: auto;
    padding: 1%;
    margin-left:2em;
    font-weight:700;
}

/* hamburger menu */
button.menu-toggle{
	background-color:transparent;
	text-transform:uppercase;
	border:0;
	align-items:center;
	justify-content: center;
	width: 44px;
	height: 44px;
	padding: 0;
	color: var(--brand-colour);
	transition: color 700ms ease-in-out;
}

.menu-toggle > span{
	position: relative;
	height: 24px;
}

.menu-toggle span {
	display: block;
	width: 24px;
}

.menu-toggle .bar1,
.menu-toggle .bar3 {
	position: absolute;
	left: 0;
	top: 6px;
	height: 3px;
	background: currentColor;
	transition: transform 300ms ease;
}

.menu-toggle .bar3 {
	top: 15px;
}

.toggled .menu-toggle .bar1 {
	transform: translateY(4.5px) rotate(45deg);
}

.toggled .menu-toggle .bar3 {
	transform: translateY(-4.5px) rotate(-45deg);
}


.site-header{
    display: flex;
    justify-content: space-between;
    align-items: end;
	padding: var(--page-gutter);
    position:absolute;
    top:0;
    width:100vw;
    z-index: 1000;

}

@media screen and (max-width: 767px) {
	.site-header {
		align-items: center;
	}
}

.site-main{
	position: relative;
}

/*
.home .site-main > :not(.director-background):not(.directors-roster-nav) {
	position: relative;
	z-index: 1;
}
    */

.nav-menu{
    display: flex;
    align-items: center;
    gap: 2em;
}

.nav-menu a{
	position: relative;
	display: inline-block;
	padding-top: 1.5rem;
	color: var(--link-colour);
	transition: color 700ms ease-in-out;
	font-size: clamp(0.9375rem, 0.8125rem + 0.25vw, 1.125rem);
	font-weight: 500;
    text-decoration:none;
	letter-spacing: -0.005em;
}

.nav-menu a::before {
	content: "";
	position: absolute;
	top: 0;
	left: 50%;
	width: 1rem;
	height: 1.25rem;
	transform: translateX(-50%);
	background: url("images/nav-trees.svg") center bottom / contain no-repeat;
	opacity: 0;
	pointer-events: none;
}

.nav-menu :is(.current-menu-item, .current-menu-parent, .current-menu-ancestor, .current-page-ancestor, .current-directors-section) > a::before {
	opacity: 1;
}

.nav-menu li{
    list-style: none;
}



.site-branding {
	color: var(--brand-colour);
	transition: color 700ms ease-in-out;
	width: clamp(12rem, 20vw, 23.5rem);
    max-width: 50%;
}

@media screen and (max-width: 767px) {
	.site-branding {
		min-width: 57vw;
	}
}

.director-background {
	position: fixed;
	z-index: 0;
	inset: 0;
	overflow: hidden;
	pointer-events: none;
}

.director-background video {
	position: absolute;
	inset: 0;
	width: 100%;
	height: 100%;
	object-fit: cover;
	opacity: 0;
	transition: opacity 0.35s ease;
}

.director-background video.is-active {
	opacity: 1;
}




.footer-mountains {
    position: fixed;
    bottom: -2px;
    /* left: -25px; */
    z-index: -1;
    overflow: hidden;
    width: 100%;
}

/*-- footer ---*/
.home-intro {
	display: none;
}

.home-intro-pending .home-intro {
	display: grid;
	opacity: 0;
	position: fixed;
	inset: 0;
	z-index: 1100;
	place-items: center;
	pointer-events: none;
	color: #C98289;
}

.home-intro > div {
	grid-area: 1 / 1;
	width: min(22.1rem, 78vw);
}

.home-intro .services-partnership__mountains {
	margin-bottom: 0.75rem;
}

.home-intro svg {
	width: 100%;
	height: auto;
}

.home-intro .services-partnership__wordmark {
	width: 63.75%;
	margin-inline: auto;
	fill: currentColor;
}

.home-intro__mono path {
	fill: currentColor !important;
}

.home-intro-pending .home :is(.site-branding, .main-navigation, .production-company-list, .directors-roster li, .site-footer),
.home-intro-pending .home .footer-mountains path {
	opacity: 0;
}

.home-intro-pending .home [data-production-roster] {
	pointer-events: none;
}

.site-footer {
	align-items: center;
	flex-wrap: wrap;
	row-gap: 0.5rem;
}

.home .site-footer {
	position: relative;
	margin-left: 0;
	padding-inline: var(--page-gutter);
}

.home .site-main {
	min-height: 100svh;
	flex-shrink: 0;
}

.site-footer .social-and-mountains {
	align-items: center;
	flex-wrap: wrap;
	gap: 0.5rem 2rem;
}

/* Mobile: name and phone stacked on the left, social links stacked on the right. */
@media screen and (max-width: 767px) {
	.site-footer {
		display: grid;
		grid-template-columns: 1fr auto;
		align-items: start;
		column-gap: 2rem;
		row-gap: 0;
		margin-left: 0;
		margin-top: 3rem;
		padding-inline: var(--page-gutter);
	}

	.site-footer .social-and-mountains,
	.site-footer .copyright,
	.site-footer .copyright .col {
		display: contents;
	}

	.site-footer .footer-name {
		grid-column: 1;
		grid-row: 1;
		padding-block: 0;
	}

	.site-footer .copyright .col {
		display: block;
		grid-column: 1;
		grid-row: 2;
		margin-left: 0;
	}

	.site-footer .menu-social-menu-container {
		grid-column: 2;
		grid-row: 1 / span 2;
	}

	.site-footer .footer-logo {
		display: none;
	}

	.site-footer #social-menu {
		flex-direction: column;
		align-items: flex-end;
		gap: 0;
	}

	#social-menu a,
	.copyright a {
		padding-block: 0;
		line-height: 1.5;
	}
}

#social-menu{
    display:flex;
    flex-wrap: wrap;    
	align-items: center;
	margin: 0;
	padding: 0;
    gap: 1em;
}

#social-menu li{
    list-style: none;
}

.footer-name,
#social-menu a,
.copyright a {
	font-size: 0.8125rem;
	line-height: 1.5;
	color: var(--footer-link-colour);
	transition: color 700ms ease-in-out;
}

.footer-name {
	font-size: 0.9375rem;
}

#social-menu a, .copyright a{
	display: block;
    text-decoration: none;
    text-transform: uppercase;
}

.nav-menu a:hover,
.nav-menu a:focus-visible {
	color: var(--link-hover-colour);
}

#social-menu a:hover,
#social-menu a:focus-visible,
.copyright a:hover,
.copyright a:focus-visible {
	color: var(--footer-link-hover-colour);
}

.site-branding a {
	color: inherit;
}

.site-branding svg {
	fill: currentColor;
}

.footer-logo {
	color: var(--mountain-colour);
	transition: color 700ms ease-in-out;
}

.footer-logo svg [stroke]:not([stroke="none"]) {
	stroke: currentColor;
}

.footer-logo svg [fill]:not([fill="none"]) {
	fill: currentColor;
}

/* Preserve the original face shading with four theme-controlled tones. */
.footer-mountains stop {
	transition: stop-color 700ms ease-in-out;
}

.footer-mountains :is(#mountain-rust, #mountain-rose, #mountain-pink-light) stop:first-child {
	stop-color: var(--mountain-light);
}

.footer-mountains :is(#mountain-rust stop:last-child, #mountain-gold stop:first-child, #mountain-pink-light stop:last-child) {
	stop-color: var(--mountain-mid);
}

.footer-mountains :is(#mountain-gold stop:last-child, #mountain-rose stop:last-child, #mountain-burgundy-shadow stop:first-child, #mountain-blue-shadow stop:first-child) {
	stop-color: var(--mountain-shade);
}

.footer-mountains :is(#mountain-burgundy-shadow, #mountain-blue-shadow) stop:last-child {
	stop-color: var(--mountain-dark);
}

.footer-mountains #m07 {
	fill: var(--mountain-shade);
	transition: fill 700ms ease-in-out;
}

:root[data-colour-theme="yellow"] .home .footer-mountains #m07 {
	fill: #8F2033;
}

:root[data-colour-theme="blue"] .home .footer-mountains #m07 {
	fill: #D0A459;
}

:root[data-colour-theme="blue"] .home .footer-mountains #mountain-blue-shadow stop:first-child {
	stop-color: #8296BF;
}

:root[data-colour-theme="blue"] .home .footer-mountains #mountain-blue-shadow stop:last-child {
	stop-color: #3A4F7E;
}

:root:is([data-colour-theme="blue"], [data-colour-theme="yellow"]) .home .footer-mountains #mountain-rose stop:first-child {
	stop-color: var(--mountain-accent-light);
}

:root:is([data-colour-theme="blue"], [data-colour-theme="yellow"]) .home .footer-mountains #mountain-rose stop:last-child {
	stop-color: var(--mountain-accent-dark);
}

:root:is([data-colour-theme="blue"], [data-colour-theme="yellow"]) .home .footer-mountains :is(#mountain-gold, #mountain-pink-light) stop:first-child {
	stop-color: var(--mountain-face-light);
}

:root:is([data-colour-theme="blue"], [data-colour-theme="yellow"]) .home .footer-mountains :is(#mountain-gold, #mountain-pink-light) stop:last-child {
	stop-color: var(--mountain-face-dark);
}

:root[data-colour-theme="blue"]:has(.home) .home .footer-mountains #mountain-pink-light stop:first-child {
	stop-color: var(--mountain-accent-light);
}

:root[data-colour-theme="blue"]:has(.home) .home .footer-mountains #mountain-pink-light stop:last-child {
	stop-color: var(--mountain-accent-dark);
}

:root[data-colour-theme="yellow"]:has(.home) .home .footer-mountains #mountain-pink-light stop:first-child {
	stop-color: #F8FDFC;
}

:root[data-colour-theme="yellow"]:has(.home) .home .footer-mountains #mountain-pink-light stop:last-child {
	stop-color: #8C7769;
}

:root[data-colour-theme="yellow"] .home .footer-mountains #mountain-blue-shadow stop:last-child {
	stop-color: #5B3F3E;
}

:root:not([data-colour-theme="blue"]):not([data-colour-theme="yellow"]):has(.home) .home .footer-mountains #mountain-rose stop:first-child {
	stop-color: var(--mountain-accent-light);
}

:root:not([data-colour-theme="blue"]):not([data-colour-theme="yellow"]):has(.home) .home .footer-mountains #mountain-rose stop:last-child {
	stop-color: var(--mountain-accent-dark);
}

:root:not([data-colour-theme="blue"]):not([data-colour-theme="yellow"]):has(.home) .home .footer-mountains :is(#mountain-gold, #mountain-pink-light) stop:first-child {
	stop-color: var(--mountain-face-light);
}

:root:not([data-colour-theme="blue"]):not([data-colour-theme="yellow"]):has(.home) .home .footer-mountains :is(#mountain-gold, #mountain-pink-light) stop:last-child {
	stop-color: var(--mountain-face-dark);
}

:root[data-colour-theme="spn2"] .home .footer-mountains #mountain-burgundy-shadow stop:first-child {
	stop-color: #AE8E59;
}

:root[data-colour-theme="spn2"] .home .footer-mountains #mountain-burgundy-shadow stop:last-child {
	stop-color: #98794C;
}

:root:not([data-colour-theme="blue"]):not([data-colour-theme="yellow"]):has(.home)[data-colour-theme="spn2"] .home .footer-mountains #mountain-pink-light stop:first-child {
	stop-color: #97A9B6;
}

:root:not([data-colour-theme="blue"]):not([data-colour-theme="yellow"]):has(.home)[data-colour-theme="spn2"] .home .footer-mountains #mountain-pink-light stop:last-child {
	stop-color: #8B9EAD;
}

:root[data-colour-theme="spn2"] .home .footer-mountains #m07 {
	fill: #AAB7BE;
}

:root[data-colour-theme="spn1"] .home .footer-mountains #mountain-rust {
	--spn-stop-light: #F2AFB5;
	--spn-stop-dark: #E3868F;
}

:root[data-colour-theme="spn1"] .home .footer-mountains #mountain-gold {
	--spn-stop-light: #E3868F;
	--spn-stop-dark: #9B385C;
}

:root[data-colour-theme="spn1"] .home .footer-mountains #mountain-rose {
	--spn-stop-light: #FBACB3;
	--spn-stop-dark: #9B385C;
}

:root[data-colour-theme="spn1"] .home .footer-mountains #mountain-burgundy-shadow {
	--spn-stop-light: #BB587D;
	--spn-stop-dark: #641B36;
}

:root[data-colour-theme="spn1"] .home .footer-mountains #mountain-pink-light {
	--spn-stop-light: #4A79BA;
	--spn-stop-dark: #000000;
}

:root[data-colour-theme="spn1"] .home .footer-mountains #mountain-blue-shadow {
	--spn-stop-light: #4A79BA;
	--spn-stop-dark: #1E3B66;
}

:root:not([data-colour-theme="blue"]):not([data-colour-theme="yellow"]):has(.home)[data-colour-theme="spn1"] .home .footer-mountains :is(#mountain-rust, #mountain-gold, #mountain-rose, #mountain-burgundy-shadow, #mountain-pink-light, #mountain-blue-shadow) stop:first-child {
	stop-color: var(--spn-stop-light);
}

:root:not([data-colour-theme="blue"]):not([data-colour-theme="yellow"]):has(.home)[data-colour-theme="spn1"] .home .footer-mountains :is(#mountain-rust, #mountain-gold, #mountain-rose, #mountain-burgundy-shadow, #mountain-pink-light, #mountain-blue-shadow) stop:last-child {
	stop-color: var(--spn-stop-dark);
}

:root[data-colour-theme="spn1"] .home .footer-mountains #m07 {
	fill: #142742;
}

.home .footer-mountains #sun {
	fill: var(--mountain-sun, #EE7544);
	transition: fill 700ms ease-in-out;
}

:root:is([data-colour-theme="blue"], [data-colour-theme="yellow"], [data-colour-theme="spn1"], [data-colour-theme="spn2"], [data-colour-theme="spn3"]) .home .footer-mountains :is(#tree01, #tree02) {
	fill: var(--mountain-trees);
	transition: fill 700ms ease-in-out;
}

.home .footer-mountains path[id^="line"] {
	fill: var(--mountain-stripes, #65A8DC);
	transition: fill 700ms ease-in-out;
}

@media (min-width: 768px) {

    .footer-mountains {
        position: fixed;
        bottom: -7px;
        left: -7em;
        z-index: -1;
        overflow: hidden;
        width: 83%;
    }

}

.footer-mountains svg{
    display: block;
    width: 100%;
    height: auto;
}

.home .footer-mountains {
	position: absolute;
	bottom: 0;
}

/* Contact page: Gutenberg copy on the left, ACF contact details on the right. */

.page-template-template-contact {
	--brand-colour: #5E4053;
	--link-colour: #5E4053;
	--link-hover-colour: #98213D;
	--contact-panel-start: #D5637D;
	--contact-panel-end: #F39EA5;
	background: var(--page-background);
	color: #5E4053;
}

.contact-page {
	isolation: isolate;
	display: grid;
	grid-template-columns: minmax(0, 1fr);
	min-height: 100svh;
}

.contact-page-title {
	position: absolute;
	width: 1px;
	height: 1px;
	padding: 0;
	overflow: hidden;
	clip-path: inset(50%);
	white-space: nowrap;
}

.page-template-template-contact .site-branding {
	color: #2A1820;
}

.contact-about {
	position: relative;
	isolation: isolate;
	padding: 9rem var(--page-gutter) 3rem;
	color: #2A1820;
	font-size: var(--type-body);
	line-height: var(--type-body-leading);
}

.contact-about::before {
	content: "";
	position: absolute;
	z-index: -1;
	inset: 0;
	background: linear-gradient(160deg, var(--contact-panel-start), var(--contact-panel-end));
}

.contact-about > * + * {
	margin-block-start: 1.5rem;
}

.contact-about .has-large-font-size {
	font-size: var(--type-lead) !important;
	line-height: var(--type-lead-leading);
}

.contact-about a {
	color: inherit;
}

.contact-details {
	min-width: 0;
	padding: 3rem var(--page-gutter) 2rem;
}

.contact-address {
	font-size: var(--type-lead);
	line-height: var(--type-lead-leading);
	font-style: normal;
}

.contact-address a,
.contact-person a {
	color: inherit;
}

.contact-team {
	display: grid;
	grid-template-columns: repeat(2, minmax(0, 1fr));
	gap: 2.5rem 1.5rem;
	margin-top: 2rem;
	padding-block: 2rem;
	border-block: 1px solid currentColor;
}

.contact-person {
	min-width: 0;
	font-size: 0.875rem;
	line-height: 1.5;
	overflow-wrap: anywhere;
}

.contact-person h2 {
	font-size: 1rem;
	font-weight: 700;
}

.contact-person a:hover,
.contact-person a:focus-visible,
.contact-address a:hover,
.contact-address a:focus-visible {
	color: var(--link-hover-colour);
}

.contact-mountains {
	align-self: end;
	pointer-events: none;
}

@media screen and (max-width: 1023px) {
	.contact-mountains {
		margin-top:2em;
	}
}

.contact-mountains svg {
	width: 100%;
	height: auto;
}

.contact-mountains [id^="line"] {
	fill: #F39EA5;
}

@media screen and (min-width: 1024px) {
	.contact-page {
		grid-template-columns: minmax(0, 1fr) minmax(0, 1fr);
		grid-template-rows: 1fr auto;
		padding-top: clamp(10rem, 13.5vw, 13rem);
		overflow-x: clip;
	}

	.contact-page::before {
		content: "";
		position: absolute;
		z-index: -1;
		inset: 0 auto 0 0;
		width: 54%;
		background: linear-gradient(160deg, var(--contact-panel-start), var(--contact-panel-end));
		clip-path: polygon(0 0, 90% 0, 100% 100%, 0 100%);
	}

	.contact-about {
		grid-column: 1;
		grid-row: 1 / -1;
		padding: 0 5vw 4rem var(--page-gutter);
		background: none;
	}

	.contact-about::before {
		display: none;
	}

	.contact-details {
		grid-column: 2;
		grid-row: 1;
		padding: 0 var(--page-gutter) 2rem 6.5vw;
	}

	.contact-team {
		grid-template-columns: repeat(3, minmax(0, 1fr));
	}

	.contact-mountains {
		position: relative;
		z-index: -2;
		grid-column: 1 / -1;
		grid-row: 2;
		justify-self: end;
		width: 82%;
		right: -15vw;
	}
}

@media screen and (max-width: 1023px) {
	/* Stacked layout: contacts first, then the pink intro panel. */
	.contact-details {
		order: -1;
		padding-top: 7rem;
		padding-bottom: 3rem;
	}

	.contact-about {
		padding-top: 3rem;
	}
}

@media screen and (max-width: 359px) {
	.contact-team {
		grid-template-columns: minmax(0, 1fr);
	}
}

@keyframes contact-fade-in {
	from { opacity: 0; }
	to { opacity: 1; }
}

/* End colours come from the SVG's original fills and gradient stops. */
@keyframes contact-mountain-blend {
	from { stop-color: var(--background-color); }
}

@keyframes contact-mountain-solid {
	from { fill: var(--background-color); }
}

@keyframes contact-sunrise {
	from {
		opacity: 0;
		transform: translateY(70px);
	}
	to {
		opacity: 1;
		transform: translateY(0);
	}
}

@keyframes contact-panel-in {
	from { transform: translateX(-100%); }
	to { transform: translateX(0); }
}

@keyframes contact-content-in {
	from {
		opacity: 0;
		transform: translateY(8px);
	}
	to {
		opacity: 1;
		transform: translateY(0);
	}
}

@media (prefers-reduced-motion: no-preference) {
	.contact-mountains stop {
		animation: contact-mountain-blend 800ms ease-in-out backwards;
		animation-delay: var(--mountain-delay, 0ms);
	}

	.contact-mountains #mountain-blue-shadow { --mountain-delay: 80ms; }
	.contact-mountains #mountain-pink-light { --mountain-delay: 160ms; }
	.contact-mountains #mountain-burgundy-shadow { --mountain-delay: 240ms; }
	.contact-mountains #mountain-rose { --mountain-delay: 320ms; }
	.contact-mountains #mountain-gold { --mountain-delay: 400ms; }
	.contact-mountains #mountain-rust { --mountain-delay: 480ms; }

	.contact-mountains #m07 {
		animation: contact-mountain-solid 800ms ease-in-out backwards;
	}

	.contact-mountains :is(#tree01, #tree02) {
		animation: contact-fade-in 800ms ease-out 150ms both;
	}

	.contact-mountains #sun {
		animation: contact-sunrise 850ms cubic-bezier(0.22, 1, 0.36, 1) 1250ms both;
	}

	.contact-mountains [id^="line"] {
		animation: contact-fade-in 650ms ease-out 1700ms both;
	}

	.contact-page::before,
	.contact-about::before {
		animation: contact-panel-in 550ms cubic-bezier(0.22, 1, 0.36, 1) 600ms both;
	}

	.contact-about > *,
	.contact-address,
	.contact-person {
		animation: contact-content-in 400ms ease-out both;
		animation-delay: calc(1050ms + var(--contact-stagger, 0) * 70ms);
	}

	.contact-about > :nth-child(2),
	.contact-person:nth-child(1) { --contact-stagger: 1; }
	.contact-about > :nth-child(3),
	.contact-person:nth-child(2) { --contact-stagger: 2; }
	.contact-about > :nth-child(4),
	.contact-person:nth-child(3) { --contact-stagger: 3; }
	.contact-about > :nth-child(5),
	.contact-person:nth-child(4) { --contact-stagger: 4; }
	.contact-about > :nth-child(n+6),
	.contact-person:nth-child(n+5) { --contact-stagger: 5; }

	.contact-team {
		animation: contact-fade-in 350ms ease-out 1050ms both;
	}

	.page-template-template-contact .site-footer {
		animation: contact-fade-in 400ms ease-out 1300ms both;
	}

	.contact-about > :focus-within,
	.contact-address:focus-within,
	.contact-person:focus-within,
	.contact-team:focus-within,
	.page-template-template-contact .site-footer:focus-within {
		animation: none;
	}
}

@media screen and (max-width: 1023px) and (prefers-reduced-motion: no-preference) {
	.contact-about::before {
		animation-delay: 0ms;
	}

	.contact-about > *,
	.contact-address,
	.contact-person {
		animation-delay: calc(300ms + var(--contact-stagger, 0) * 70ms);
	}

	.contact-team {
		animation-delay: 300ms;
	}

	.page-template-template-contact .site-footer {
		animation-delay: 600ms;
	}
}

/* Single creative page */

.spn-location-page {
	background: var(--page-background);
	color: #244B68;
}

.spn-location-page .site-header {
	--brand-colour: #fff;
	--link-colour: #fff;
	--link-hover-colour: #fff;
}

@media screen and (max-width: 767px) {
	.spn-location-page .main-navigation.toggled {
		--brand-colour: #244B68;
		--link-colour: #244B68;
		--link-hover-colour: #162946;
	}
}

.single-spn_creative {
	--director-header-colour: #F5F0E8;
	--director-text-colour: #2A1820;
}

.single-spn_creative .site-header {
	--brand-colour: var(--director-header-colour);
	--link-colour: var(--director-header-colour);
	--link-hover-colour: var(--director-header-colour);
}

@media screen and (max-width: 767px) {
	.single-spn_creative .main-navigation.toggled {
		--brand-colour: var(--director-text-colour);
		--link-colour: var(--director-text-colour);
		--link-hover-colour: var(--director-text-colour);
	}
}

.single-spn_creative h2 {
	margin-block: 0;
}

.single-spn_creative h3 {
	margin-block: 0 2rem;
	font-family: var(--headerfont), sans-serif;
	font-size: clamp(2rem, 1.2rem + 2vw, 3.4rem);
	font-weight: 400;
	line-height: 1.2;
}

.single-spn_creative .director-header {
	position: relative;
	cursor: pointer;
}

/* Typography mirrors the reel player panel (css/reel-player.css). */
.single-spn_creative .director-name--overlay {
	position: absolute;
	z-index: 1;
	right: var(--page-gutter);
	bottom: var(--page-gutter);
	left: var(--page-gutter);
	margin: 0;
	color: var(--director-header-colour);
	font-family: var(--headerfont), sans-serif;
	text-shadow: 0 1px 12px rgb(0 0 0 / 0.25);
	pointer-events: none;
}

.single-spn_creative .director-actions {
	display: flex;
	flex-wrap: wrap;
	gap: 0.25rem 1.5rem;
	margin: 0 0 0.6rem;
	font-size: clamp(1.0625rem, 0.95rem + 0.4vw, 1.375rem);
	font-weight: 500;
	letter-spacing: -0.005em;
	line-height: 1.2;
}

/* The overlay lets header clicks through to the reel; its own links stay clickable. */
.single-spn_creative .director-actions a {
	color: inherit;
	text-decoration: underline;
	text-decoration-color: transparent;
	text-underline-offset: 0.35em;
	opacity: 0.85;
	pointer-events: auto;
	transition: opacity 200ms ease, text-decoration-color 200ms ease;
    font-weight: 700;
}

.single-spn_creative .director-actions a:hover,
.single-spn_creative .director-actions a:focus-visible {
	opacity: 1;
	text-decoration-color: currentColor;
}

.single-spn_creative .director-title {
	color: inherit;
	/* Optical nudge: large bold caps carry side-bearing that pushes them right of the smaller links. */
	margin: 0 0 0 -0.055em;
	font-size: clamp(3rem, 1.6rem + 4.6vw, 6.5rem);
	font-weight: 700;
	letter-spacing: -0.03em;
	line-height: 0.95;
}

@media (prefers-reduced-motion: no-preference) {
	html:has(body.single-spn_creative) {
		scroll-behavior: smooth;
	}
}

.single-spn_creative #header-clips {
	position: relative;
	height: 72vh;
	overflow: hidden;
	background: #1E1214;
}

.single-spn_creative #header-clips video {
	position: absolute;
	top: 0;
	left: 0;
	width: 100%;
	height: 100%;
	object-fit: cover;
	object-position: center;
	opacity: 0;
	transition: opacity 400ms ease;
}

.single-spn_creative #header-clips video.is-playing:not(.hideme) {
	opacity: 1;
}

@media (prefers-reduced-motion: reduce) {
	.single-spn_creative #header-clips video {
		transition: none;
	}
}

.single-spn_creative .director-bio {
	/* background-color: var(--colormedpink, #F9B4A6); */
	display: grid;
	gap: 2rem;
	padding: clamp(3rem, 6vw, 6rem) var(--page-gutter);
	color: var(--director-text-colour);
}

.single-spn_creative .director-bio__title {
	margin: 0;
	font-size: clamp(2rem, 1.2rem + 2.2vw, 3.6rem);
	font-weight: 700;
	letter-spacing: -0.03em;
	line-height: 1.05;
	text-wrap: balance;
	overflow-wrap: anywhere;
}

@media (min-width: 768px) {
	.single-spn_creative .director-bio {
		grid-template-columns: minmax(0, 1fr) minmax(0, 2fr);
		gap: clamp(2rem, 5vw, 6rem);
	}
}

.single-spn_creative .alignwide {
	width: var(--mobile-container-width);
	margin-inline: auto;
	padding-block: 3em 4em;
}

.single-spn_creative .keywords-title {
	margin: 0;
	padding-inline: clamp(2rem, 3vw, 3rem) var(--page-gutter);
    padding-block: 1rem;
	/* background-color: var(--mountain-light); */
	color: var(--director-text-colour);
	font-size: clamp(1.125rem, 1rem + 0.35vw, 1.375rem);
	font-weight: 500;
	letter-spacing: -0.005em;
	line-height: 1.5;
	text-wrap: pretty;
}

.single-spn_creative .director-reel--blue .keywords-title {
	background-color: #DCE7EE;
}

/*--- director single creative page ---*/


.entry-content--inner{
    padding:4em;
    padding-left:1em;
    font-size:1.6em;
    width: 100%;
}

@media (min-width: 768px) { 
	.entry-content--inner{
		width: 80%;
        max-width:1600px;
        padding-left:2em;
	}
}

.social-link{
    font-size:1rem;
}

.single-spn_creative .director-bio p {
	margin-block: 0 .7em;
}

.single-spn_creative .director-bio .entry-content--inner {
	width: 100%;
	max-width: 60ch;
	min-width: 0;
	padding: 0;
	font-size: var(--type-lead);
	line-height: var(--type-lead-leading);
}

.single-spn_creative .director-bio .socials-wrap {
	flex-direction: column;
	align-items: flex-start;
	justify-content: flex-start;
	gap: 0.5rem;
	margin-top: 1.5rem;
	overflow-wrap: anywhere;
}

.single-spn_creative .socials-wrap {
	display: flex;
	flex-wrap: wrap;
	justify-content: space-between;
	font-weight: 600;
	margin-top:2em;
}

.single-spn_creative .director-bio a,
.single-spn_creative .director-bio a:visited {
	color: inherit;
}

.single-spn_creative .reel-container {
	display: flex;
	flex-wrap: wrap;
	justify-content: space-between;
}

.single-spn_creative .sample {
	width: 100%;
	margin-bottom: 1em;
	cursor: pointer;
}

.single-spn_creative .sample-image {
	position: relative;
	aspect-ratio: var(--sample-aspect-ratio, 16 / 9);
	overflow: hidden;
	line-height: 0;
}

.single-spn_creative .sample-image img,
.single-spn_creative .sample-image video {
	position: absolute;
	inset: 0;
	display: block;
	width: 100%;
	height: 100%;
	object-fit: cover;
	object-position: center;
}

.single-spn_creative .sample-credits {
	padding: 1em;
}

.single-spn_creative .sample-info h3 {
	margin: 0;
	font-size: 1rem;
	text-align: left;
}

.single-spn_creative .spot-client {
	font-weight: 600;
}

.single-spn_creative .spot-title {
	font-weight: 400;
}

.single-spn_creative .sample-player {
	position: fixed;
	z-index: 1000;
	top: 100vh;
	left: 0;
	width: 100vw;
	height: 100vh;
	background-color: #fff;
	transition: top 0.4s;
}

.single-spn_creative .sample-player.active {
	top: 0;
}

.single-spn_creative .sample-player-inner {
	position: absolute;
	top: 0;
	margin: auto;
}

.single-spn_creative .sample-player-inner video {
	width: 100%;
	height: auto;
}

.single-spn_creative .sample-player-inner img {
	width: 100%;
	height: 100%;
	object-fit: contain;
}

.single-spn_creative .js-close-background {
	position: absolute;
	inset: 0;
}

.single-spn_creative .active-credit {
	margin-left: 1em;
}

.single-spn_creative .js-close button {
	position: absolute;
	top: 0.5em;
	right: 0;
	padding: 0 0 0.4em;
	border: 0;
	background: transparent;
	font-size: 0.85rem;
	font-weight: 600;
	text-transform: uppercase;
}

.single-spn_creative .js-close button::after {
	position: absolute;
	right: 0;
	bottom: -1px;
	left: 0;
	width: 0;
	height: 2px;
	border-radius: 25px;
	background-color: #000;
	content: "";
	opacity: 0;
	transform: translateZ(0);
	transition: width 0.3s, opacity 0s linear 0.4s;
}

.single-spn_creative .js-close button:hover::after {
	width: 100%;
	opacity: 1;
	transition: width 0.3s, opacity 0s linear;
}

@media screen and (min-width: 767px) {
	.single-spn_creative .alignwide {
		width: var(--small-container-max-width);
	}

	.single-spn_creative #header-clips {
		height: 83vh;
	}

	.single-spn_creative .sample {
		margin-bottom: 3.5em;
	}

	.single-spn_creative .sample-credits {
		padding: 0;
		padding-top: 1em;
	}

	.single-spn_creative .layout-1 .sample:nth-child(1) .sample-info,
	.single-spn_creative .layout-1 .sample:nth-child(3n) .sample-info {
		display: flex;
		align-items: center;
		width: 100%;
	}

	.single-spn_creative .layout-1 .sample:nth-child(1) .sample-image,
	.single-spn_creative .layout-1 .sample:nth-child(3n) .sample-image {
		width: 70%;
	}

	.single-spn_creative .layout-1 .sample:nth-child(1) .sample-credits,
	.single-spn_creative .layout-1 .sample:nth-child(3n) .sample-credits {
		width: 20%;
		margin-left: 1em;
	}

	.single-spn_creative .layout-1 .sample:nth-child(2n) {
		width: 50%;
		margin-bottom: 1em;
		margin-left: 45%;
	}

	.single-spn_creative .layout-1 .sample:nth-child(5n) {
		width: 80%;
		margin: 0 auto 1em;
	}

	.single-spn_creative .layout-1 .sample:nth-child(5n) h3,
	.single-spn_creative .layout-1 .sample:nth-child(6n) h3,
	.single-spn_creative .layout-1 .sample:nth-child(7n) h3,
	.single-spn_creative .layout-1 .sample:nth-child(8) h3 {
		text-align: center;
	}

	.single-spn_creative .layout-1 .sample:nth-child(6n),
	.single-spn_creative .layout-1 .sample:nth-child(7n) {
		width: 50%;
		margin-inline: auto;
	}

	.single-spn_creative .layout-1 .sample:nth-child(6n) .sample-info {
		display: block;
	}

	.single-spn_creative .layout-1 .sample:nth-child(6n) .sample-image,
	.single-spn_creative .layout-1 .sample:nth-child(6n) .sample-credits {
		width: auto;
	}

	.single-spn_creative .layout-1 .sample:nth-child(8) {
		width: 100%;
		margin-inline: auto;
	}

}

@media screen and (min-width: 1024px) {
	.single-spn_creative .alignwide {
		width: 870px;
	}

	.single-spn_creative .socials-wrap {
		justify-content: flex-start;
		margin-top: 2em;
	}

	.single-spn_creative .social-link {
		margin-right: 8em;
	}

	.single-spn_creative .active-credit {
		margin-left: 3em;
	}
}


.page-id-551 iframe {
    border: 0;
    background: transparent !important;
}

#scrollLeft{
    background: #162946 !important;
}