/* Site Concepts: Design Process (tabbed boards) */

/* Let the section run full width inside Astra's content container. */
.sc-dp-template #content > .ast-container {
	max-width: none;
	padding: 0;
	display: block;
}

.sc-dp {
	--dp-font: "Century Gothic", Helvetica, Arial, sans-serif;
	--dp-ground-a: #504F4F; /* same gradient as the Careers and Illustrations pages */
	--dp-ground-b: #A7A5A5;
	--dp-on-dark: #FFFFFF;
	--dp-tab-w: clamp(170px, 12vw, 250px);
	--dp-step: clamp(54px, 4.4vw, 88px);
	--dp-tab-h: calc(var(--dp-step) * 0.82);
	--dp-frame-inset: clamp(36px, 5vw, 100px);
	--dp-gap: clamp(24px, 5.2vw, 104px);
	--dp-shadow: 0 6px 10px rgb(62 61 68 / 0.45);
	/* Raised tab: soft drop shadow to the lower right, light top edge, darker bottom edge. */
	--dp-tab-shadow:
		3px 5px 6px rgb(46 44 52 / 0.55),
		inset 0 1px 0 rgb(255 255 255 / 0.45),
		inset 0 -2px 3px rgb(0 0 0 / 0.16);
	--dp-tab-sheen: linear-gradient(180deg, rgb(255 255 255 / 0.3) 0%, rgb(255 255 255 / 0) 32%, rgb(0 0 0 / 0) 68%, rgb(0 0 0 / 0.1) 100%);

	background: linear-gradient(90deg, var(--dp-ground-a) 0%, var(--dp-ground-b) 100%);
	color: var(--dp-on-dark);
	font-family: var(--dp-font);
	padding: clamp(32px, 4vw, 72px) 0 clamp(56px, 7vw, 140px);
}

/* Neutralise theme defaults on reused elements without outranking component rules. */
:where(.sc-dp) :where(h1, h2, button, a, img) {
	margin: 0;
	padding: 0;
	border: 0;
	background: none;
	box-shadow: none;
	text-decoration: none;
}

.sc-dp .sc-dp__title {
	/* Same treatment as the CAREERS and ILLUSTRATIONS titles: Century Gothic, regular, capitals. */
	font-family: var(--dp-font);
	font-weight: 400;
	font-size: 40px;
	line-height: 1.4;
	letter-spacing: normal;
	text-transform: uppercase;
	text-align: center;
	color: var(--dp-on-dark);
	margin: 0 0 clamp(28px, 3.4vw, 60px);
	padding: 0 16px;
}

/* Desktop board: tabs in column 1, the open panel runs beside the tabs below it. */
.sc-dp__board.is-enhanced {
	display: grid;
	grid-template-columns: var(--dp-tab-w) minmax(0, 1fr);
	grid-template-rows: repeat(var(--dp-count), var(--dp-step)) auto;
	padding-right: clamp(16px, 4vw, 80px);
}

.sc-dp .sc-dp__tabhead {
	grid-column: 1;
	grid-row: var(--row);
	align-self: start;
	position: relative;
	z-index: 2;
	height: var(--dp-tab-h);
	margin: 0;
	font: inherit;
}

.sc-dp .sc-dp__tabhead.is-active {
	grid-column: 1 / -1;
}

.sc-dp .sc-dp__btn {
	display: flex;
	align-items: flex-end;
	width: 100%;
	height: 100%;
	margin: 0;
	padding: 0 10px calc(var(--dp-tab-h) * 0.16);
	border: 0;
	border-radius: 0;
	background: var(--dp-tab-sheen), var(--tab-bg);
	color: var(--tab-ink);
	box-shadow: var(--dp-tab-shadow);
	font-family: var(--dp-font);
	/* Sized from the tab width so the longest label stays on one line. */
	font-size: calc((var(--dp-tab-w) - 24px) / 12);
	font-weight: 400;
	line-height: 1.15;
	letter-spacing: 0.02em;
	text-transform: uppercase;
	text-align: left;
	text-shadow: var(--tab-emboss);
	white-space: nowrap;
	overflow: hidden;
	text-overflow: ellipsis;
	cursor: pointer;
	transition: filter 0.2s ease;
}

.sc-dp .sc-dp__btn:hover,
.sc-dp .sc-dp__btn:focus {
	background: var(--dp-tab-sheen), var(--tab-bg);
	color: var(--tab-ink);
	box-shadow: var(--dp-tab-shadow);
	filter: brightness(1.06);
}

.sc-dp .sc-dp__btn:focus-visible {
	outline: 2px solid var(--dp-on-dark);
	outline-offset: -5px;
}

.sc-dp .sc-dp__tabhead.is-active .sc-dp__btn {
	cursor: default;
	filter: none;
}

.sc-dp .sc-dp__panel {
	grid-column: 1 / -1;
	grid-row: var(--row) / -1;
	position: relative;
	z-index: 1;
	margin: calc(var(--dp-tab-h) - var(--dp-step)) 0 0 var(--dp-frame-inset);
	padding: 4px clamp(10px, 1.3vw, 24px) clamp(24px, 4.5vw, 92px) calc(var(--dp-tab-w) - var(--dp-frame-inset) + var(--dp-gap));
	background: var(--tab-bg);
	box-shadow: var(--dp-shadow);
	animation: sc-dp-fade 0.35s ease;
}

.sc-dp .sc-dp__panel[hidden] {
	display: none;
}

.sc-dp .sc-dp__media {
	display: block;
	background: #FFFFFF;
	cursor: zoom-in;
}

.sc-dp .sc-dp__img {
	display: block;
	width: 100%;
	height: auto;
	max-height: min(68vh, 720px);
	object-fit: contain;
	background: #FFFFFF;
}

@keyframes sc-dp-fade {
	from { opacity: 0; }
	to { opacity: 1; }
}

/* Without JS, or on narrow screens: a stacked accordion. */
.sc-dp__board:not(.is-enhanced) .sc-dp__tabhead,
.sc-dp__board:not(.is-enhanced) .sc-dp__panel {
	margin: 0 16px 12px;
}

.sc-dp__board:not(.is-enhanced) .sc-dp__panel {
	padding: 8px;
}

@media (max-width: 899px) {
	.sc-dp .sc-dp__board.is-enhanced {
		display: block;
		padding: 0 16px;
	}

	.sc-dp .sc-dp__tabhead {
		height: 52px;
		margin: 0 0 8px;
	}

	.sc-dp .sc-dp__btn {
		font-size: 14px;
	}

	.sc-dp .sc-dp__panel {
		margin: -8px 0 8px;
		padding: 8px;
	}

	.sc-dp .sc-dp__img {
		max-height: none;
	}
}

@media (prefers-reduced-motion: reduce) {
	.sc-dp .sc-dp__panel {
		animation: none;
	}

	.sc-dp .sc-dp__btn {
		transition: none;
	}
}

/* ---------- Board viewer (lightbox) ---------- */

html.sc-lb-open {
	overflow: hidden;
}

.sc-lb {
	--lb-ink: #E8E6E3;
	--lb-ink-dim: #A9A6A2;
	--lb-bar: 56px;

	position: fixed;
	inset: 0;
	z-index: 100000;
	background: rgb(22 21 24 / 0.94);
	color: var(--lb-ink);
	font-family: "Century Gothic", Helvetica, Arial, sans-serif;
	animation: sc-dp-fade 0.25s ease;
}

.sc-lb[hidden] {
	display: none;
}

.sc-lb .sc-lb__counter {
	position: absolute;
	top: 0;
	left: 0;
	height: var(--lb-bar);
	display: flex;
	align-items: center;
	padding: 0 20px;
	font-size: 16px;
	letter-spacing: 0.04em;
	color: var(--lb-ink);
}

.sc-lb .sc-lb__tools {
	position: absolute;
	top: 0;
	right: 0;
	z-index: 3;
	display: flex;
	align-items: center;
	gap: 4px;
	height: var(--lb-bar);
	padding: 0 10px;
}

.sc-lb .sc-lb__btn,
.sc-lb .sc-lb__nav {
	display: inline-flex;
	align-items: center;
	justify-content: center;
	margin: 0;
	padding: 0;
	border: 0;
	border-radius: 0;
	background: none;
	box-shadow: none;
	color: var(--lb-ink);
	cursor: pointer;
	transition: color 0.15s ease, opacity 0.15s ease;
}

.sc-lb .sc-lb__btn {
	width: 44px;
	height: 44px;
}

.sc-lb .sc-lb__btn svg {
	width: 24px;
	height: 24px;
	fill: none;
	stroke: currentColor;
	stroke-width: 2;
	stroke-linecap: round;
	stroke-linejoin: round;
}

.sc-lb .sc-lb__btn[data-act="share"] svg {
	fill: currentColor;
	stroke: none;
}

.sc-lb .sc-lb__btn:hover,
.sc-lb .sc-lb__btn:focus,
.sc-lb .sc-lb__nav:hover,
.sc-lb .sc-lb__nav:focus {
	background: none;
	color: #FFFFFF;
	box-shadow: none;
}

.sc-lb .sc-lb__btn:focus-visible,
.sc-lb .sc-lb__nav:focus-visible {
	outline: 2px solid var(--lb-ink);
	outline-offset: -4px;
}

.sc-lb .sc-lb__share {
	position: relative;
}

.sc-lb .sc-lb__menu {
	position: absolute;
	top: 46px;
	right: 0;
	min-width: 190px;
	margin: 0;
	padding: 6px 0;
	list-style: none;
	background: #2C2B2F;
	box-shadow: 0 8px 20px rgb(0 0 0 / 0.45);
}

.sc-lb .sc-lb__menu[hidden] {
	display: none;
}

.sc-lb .sc-lb__menu a {
	display: block;
	padding: 9px 16px;
	color: var(--lb-ink);
	font-size: 14px;
	text-decoration: none;
}

.sc-lb .sc-lb__menu a:hover,
.sc-lb .sc-lb__menu a:focus {
	background: #3A393E;
	color: #FFFFFF;
}

.sc-lb .sc-lb__nav {
	position: absolute;
	top: 50%;
	z-index: 2;
	width: 64px;
	height: 96px;
	transform: translateY(-50%);
}

.sc-lb .sc-lb__nav svg {
	width: 30px;
	height: 30px;
	fill: none;
	stroke: currentColor;
	stroke-width: 2.4;
	stroke-linecap: round;
	stroke-linejoin: round;
}

.sc-lb .sc-lb__nav--prev {
	left: 12px;
}

.sc-lb .sc-lb__nav--next {
	right: 12px;
}

.sc-lb.is-single .sc-lb__nav,
.sc-lb.is-single .sc-lb__counter {
	display: none;
}

.sc-lb .sc-lb__stage {
	position: absolute;
	top: var(--lb-bar);
	right: 88px;
	bottom: 52px;
	left: 88px;
	display: flex;
	align-items: center;
	justify-content: center;
	overflow: hidden;
}

.sc-lb .sc-lb__img {
	display: block;
	max-width: 100%;
	max-height: 100%;
	width: auto;
	height: auto;
	margin: 0;
	object-fit: contain;
	cursor: zoom-in;
	user-select: none;
	-webkit-user-drag: none;
	transition: opacity 0.2s ease;
}

.sc-lb.is-loading .sc-lb__img {
	opacity: 0;
}

.sc-lb .sc-lb__spinner {
	position: absolute;
	top: 50%;
	left: 50%;
	width: 36px;
	height: 36px;
	margin: -18px 0 0 -18px;
	border: 3px solid rgb(232 230 227 / 0.25);
	border-top-color: var(--lb-ink);
	border-radius: 50%;
	opacity: 0;
	pointer-events: none;
}

.sc-lb.is-loading .sc-lb__spinner {
	opacity: 1;
	animation: sc-lb-spin 0.8s linear infinite;
}

/* Zoomed: full resolution, drag or scroll to move around. */
.sc-lb.is-zoomed .sc-lb__stage {
	display: block;
	right: 0;
	left: 0;
	overflow: auto;
	cursor: grab;
}

.sc-lb.is-zoomed .sc-lb__stage:active {
	cursor: grabbing;
}

.sc-lb.is-zoomed .sc-lb__img {
	max-width: none;
	max-height: none;
	margin: 0 auto;
	cursor: zoom-out;
}

.sc-lb.is-zoomed .sc-lb__nav {
	opacity: 0;
	pointer-events: none;
}

.sc-lb .sc-lb__caption {
	position: absolute;
	right: 88px;
	bottom: 0;
	left: 88px;
	height: 52px;
	display: flex;
	align-items: center;
	justify-content: center;
	color: var(--lb-ink-dim);
	font-size: 15px;
	letter-spacing: 0.05em;
	text-transform: uppercase;
	text-align: center;
}

@keyframes sc-lb-spin {
	to { transform: rotate(360deg); }
}

@media (max-width: 767px) {
	.sc-lb .sc-lb__stage {
		right: 8px;
		left: 8px;
	}

	.sc-lb .sc-lb__caption {
		right: 52px;
		left: 52px;
	}

	/* On phones the arrows sit in the bottom corners, beside the caption. */
	.sc-lb .sc-lb__nav {
		top: auto;
		bottom: 0;
		width: 52px;
		height: 52px;
		transform: none;
	}

	.sc-lb .sc-lb__nav--prev {
		left: 0;
	}

	.sc-lb .sc-lb__nav--next {
		right: 0;
	}
}

@media (prefers-reduced-motion: reduce) {
	.sc-lb,
	.sc-lb .sc-lb__img {
		animation: none;
		transition: none;
	}

	.sc-lb.is-loading .sc-lb__spinner {
		animation-duration: 2.4s;
	}
}