@charset "UTF-8";

/* ––––––––––––––––––––––––––––––  Fonts  –––––––––––––––––––––––––––––– */

@font-face {
	font-family: "Haas Neue Round";
	src: url("../fonts/NeueHaasGrotDispRound-65Medium-Web.woff2") format("woff2");
	font-display: swap;
}

/* ––––––––––––––––––––––––––––––  Global Reset  –––––––––––––––––––––––––––––– */

/* `line-height: 1` and `color: #1d1d1f` stay on `*` because they intentionally
   override per-element defaults (line-height) and provide a baseline that
   dark-mode rules override at element scope (color). */
* {
	line-height: 1;
	color: #1d1d1f;
}

/* Font-feature / smoothing properties are inherited — set once on `body`
   instead of on every element. */
body {
	font-variant-ligatures: common-ligatures;
	font-feature-settings: "liga", "clig", "ss01";
	font-kerning: normal;
	text-rendering: optimizeLegibility;
	-webkit-font-smoothing: antialiased;
	-moz-osx-font-smoothing: grayscale;
}

/* ––––––––––––––––––––––––––––––  CSS Custom Properties & Breakpoints  –––––––––––––––––––––––––––––– */
/*

/* Root variables with extended 4-column range and 6-column maximum */

:root {
	--dr-transition: 0.6s cubic-bezier(0.4, 0, 0.2, 1);
	--dr-image-fade: 0.6s cubic-bezier(0.4, 0, 0.2, 1);
	--dr-grid-unit-width: 240px;

	/* Base unit - will be adjusted at each breakpoint */
	--dr-unit: 1vw;

	/* Column count tracking for scaling calculations */
	--dr-column-count: 6;
	/* Default column count for reference */

	--dr-baseframe-width: calc(100vw - 4.2 * var(--dr-unit));

	/* Derived tokens (S6) */
	--dr-baseframe-gutter: calc((100vw - var(--dr-baseframe-width)) / 2);
	--dr-grid-border: calc(0.15 * var(--dr-unit));
	--dr-font-serif: adobe-garamond-pro, serif;
	--dr-font-sans: "Haas Neue Round", sans-serif;
}

/* GPU acceleration for smooth scrolling */
/* NOTE: Cannot use transform on html/body - breaks position: fixed for navigation */
/* Note: -webkit-overflow-scrolling: touch is deprecated and removed (iOS 13+) */

/* Small Mobile - 2 columns with larger unit size */
@media screen and (max-width: 539px) {
	:root {
		--dr-column-count: 2;
		--dr-unit: 1.875vw;
	}
}

/* Large Mobile - 2 columns with reduced unit size */
@media screen and (min-width: 540px) and (max-width: 767px) {
	:root {
		--dr-column-count: 2;
		--dr-unit: 1.35vw;
		--dr-baseframe-width: calc(100vw - 6 * var(--dr-unit));
	}
}

/* Small Tablet - 4 columns, 1.05vw unit (consolidated range) */
@media screen and (min-width: 768px) and (max-width: 1023px) {
	:root {
		--dr-column-count: 4;
		--dr-unit: 1.05vw;
	}
}

/* Large Tablet & Small Desktop - 4 columns */
@media screen and (min-width: 1024px) and (max-width: 1311px) {
	:root {
		--dr-column-count: 4;
		--dr-unit: 0.9vw;
	}
}

/* Large Tablet & Small Desktop - 4 columns */
@media screen and (min-width: 1312px) and (max-width: 1599px) {
	:root {
		--dr-column-count: 4;
		--dr-unit: 0.75vw;
	}
}

/* Medium desktop - 6 columns */
@media screen and (min-width: 1600px) and (max-width: 2099px) {
	:root {
		--dr-column-count: 6;
		--dr-unit: 0.6vw;
	}
}

/* Large desktop - Cap at 6 columns but switch to fixed units */
@media screen and (min-width: 2100px) {
	:root {
		--dr-column-count: 6;
		--dr-unit: 12px;
	}
}

/* ––––––––––––––––––––––––––––––  Reset & Element Defaults  –––––––––––––––––––––––––––––– */

html {
	background-color: white;
	margin: 0;
	width: 100%;
}

body {
	box-sizing: border-box;
	margin: 0;
	overflow-x: clip;
	width: 100%;
	background-color: white;
	touch-action: pan-y;
}

h1 {
	margin: 0;
}

p {
	margin: 0;
}

a {
	text-decoration: none;
	cursor: pointer;
	opacity: 1;
}

button,
input,
optgroup,
select,
textarea {
	font-family: inherit;
	/* 1 */
	font-size: 100%;
	/* 1 */
	line-height: 1;
	/* 1 */
	margin: 0;
	/* 2 */
	border: none;
	padding: 0;
}

/**
 * Show the overflow in IE.
 * 1. Show the overflow in Edge.
 */
button,
input {
	/* 1 */
	overflow: visible;
}

/**
 * Remove the inheritance of text transform in Edge, Firefox, and IE.
 * 1. Remove the inheritance of text transform in Firefox.
 */
button,
select {
	/* 1 */
	text-transform: none;
}

/**
 * Correct the inability to style clickable types in iOS and Safari.
 */
button,
[type="button"],
[type="reset"],
[type="submit"] {
	-webkit-appearance: button;
}

/* ––––––––––––––––––––––––––––––  Z-Index Utilities  –––––––––––––––––––––––––––––– */

.z-index-06 {
	z-index: 6;
}

.z-index-03 {
	z-index: 3;
}

/* ––––––––––––––––––––––––––––––  Swup Fade  –––––––––––––––––––––––––––––– */

.swup-transition-fade {
	transition: opacity var(--dr-transition);
	opacity: 1;
	min-height: 100dvh;
	display: flex;
	flex-direction: column;
	/* Promote the Swup container to its own compositor layer for
	   opacity transitions, stabilising Safari's behaviour during the page
	   fade-in. Scoped strictly to this element so the promotion does NOT
	   inherit/propagate to descendants — on iOS that would create a layer
	   per grid box and per image frame, costing VRAM under the exact
	   bitmap-budget pressure that `dr-heavy` mode is designed to avoid. */
	will-change: opacity;
}

#content {
	flex: 1;
	display: flex;
	flex-direction: column;
}

html.is-animating .swup-transition-fade {
	opacity: 0;
}

/* ––––––––––––––––––––––––––––––  DR Grid  –––––––––––––––––––––––––––––– */

/* Grid layout with 6-column maximum */

.dr-base-frame-grid {
	position: relative;
	padding: var(--dr-grid-border);
}

.dr-grid-layout {
	display: grid;
	box-sizing: border-box;
	gap: 0;
	grid-template-columns: repeat(auto-fill, minmax(300px, 1fr));
	padding-bottom: calc(9 * var(--dr-unit));
	opacity: 1;
	z-index: 6;
	position: relative;
}

/* Removed .dr-grid-layout.loaded class - no longer needed */

/* Small desktop with hover - explicit 2 columns */
@media screen and (max-width: 767px) and (hover: hover) {
	.dr-grid-layout {
		grid-template-columns: repeat(2, 1fr);
	}
}

/* Tablet & Small Desktop: 4 columns - EXTENDED RANGE */
@media screen and (min-width: 768px) and (max-width: 1599px) {
	.dr-grid-layout {
		grid-template-columns: repeat(4, 1fr);
	}
}

/* Medium & Large desktop: 6 columns (maximum) */
@media screen and (min-width: 1600px) {
	.dr-grid-layout {
		grid-template-columns: repeat(6, 1fr);
	}
}

/* Outer grid container — no longer a grid itself (batch containers are the grids) */
#portfolio-grid {
	position: relative;
	z-index: 6;
	padding-bottom: calc(9 * var(--dr-unit));
	min-height: 400vh;
	/* Disable scroll anchor compensation. Batch heights are pre-calculated and
	   verified to match actual rendered height, so adjustments are always zero.
	   Disabling eliminates the per-insert anchoring computation entirely. */
	overflow-anchor: none;
	/* Tell iOS compositor: vertical scroll only, no tap disambiguation needed.
	   Without this, every new touch gesture on the grid requires a main-thread
	   hit-test before the compositor can take over — causing 60-115ms delays
	   at scroll start and direction reversal (confirmed via touch→scroll probe). */
	touch-action: pan-y;
}

/* Batch containers inherit .dr-grid-layout but override outer-only properties */
.dr-batch.dr-grid-layout {
	padding-bottom: 0;
	min-height: 0;
	/* layout + style containment: isolates reflow and style scope. Eliminates the
	   forced full-page reflow triggered by window.scrollY reads after replaceWith().
	   No paint containment — on iOS Safari `paint` forces GPU layer promotion, and
	   those layers get re-rasterized under memory pressure, causing visible flicker
	   on images that were loaded long ago. No size containment — content height
	   depends on image aspect ratios. */
	contain: layout style;
}


/* Off-screen batch placeholders — fully isolated empty divs with explicit inline heights.
   contain: strict is safe because there are no children to affect sizing. */
.dr-batch-placeholder {
	contain: strict;
	content-visibility: auto;
}

/* Grid box types */
.dr-grid-box {
	background-color: transparent;
	box-sizing: border-box;
	overflow: hidden;
	display: flex;
	align-items: center;
	justify-content: center;
	position: relative;
	aspect-ratio: 3/4;
	border: solid white;
	border-width: var(--dr-grid-border);
}

.dr-grid-box img {
	height: 100%;
	width: 100%;
	object-fit: cover;
	display: block;
}

/* Decode-gated fade-in for every grid-box image (desktop + tablet + mobile,
   including video-thumbnail bases). Mirrors project-page behaviour: runtime
   awaits img.decode() before adding `.loaded`, so the CSS opacity transition
   always starts from a paint-ready bitmap (no mid-fade pops).
   Swup return-visits suppress the per-image fade (see skipFade in
   dr-portfolio-runtime.js's _rewireLoadedBatches) so the page-level Swup fade
   is the only animation on cached snapshots. */
.dr-grid-box .dr-image {
	opacity: 0;
	transition: opacity var(--dr-image-fade);
}

.dr-grid-box .dr-image.loaded {
	opacity: 1;
}

/* Rehydrate signal — Swup return-visit when the browser already has the
   image in cache. The per-image fade is suppressed so only the page-level
   Swup fade plays. Applied by:
     - dr-main.js content:replace hook (synchronous pre-mark on cache hit)
     - dr-portfolio-runtime.js _loadMedia(skipFade=true) (rehydrate rewire)
   `!important` is justified because this overrides the `.loaded` rule for a
   one-shot signal owned only by the rehydrate path; cold loads never see it. */
.dr-grid-box .dr-image.skip-fade {
	opacity: 1 !important;
	transition: none !important;
}

.dr-grid-box.horizontal {
	grid-column-end: span 2;
	grid-row-end: span 1;
	aspect-ratio: 3/2;
}

/* Large boxes take up 2x2 grid spaces with 3/4 portrait ratio */
.dr-grid-box.large {
	aspect-ratio: 3/4;
	grid-column-end: span 2;
	grid-row-end: span 2;
}

/* ––––––––––––––––––––––––––––––  DR Grid Video  –––––––––––––––––––––––––––––– */

.dr-project-video-container {
	position: relative;
	aspect-ratio: 16 / 9;
}

.dr-project-video-container video.dr-video-player {
	position: absolute;
	top: 0;
	left: 0;
	bottom: 0;
	right: 0;
	width: 100%;
	height: 100%;
	z-index: 2;
	opacity: 0;
	pointer-events: none;
	transition: opacity var(--dr-transition);
	object-fit: cover;
}

/* Video poster image - shows before first interaction */
.dr-video-poster-image {
	position: absolute;
	top: 0;
	left: 0;
	width: 100%;
	height: 100%;
	object-fit: cover;
	z-index: 3;
	cursor: pointer;
	opacity: 1;
	transition: opacity var(--dr-transition);
}

/* Desktop: video renders behind poster until video-active */
@media (min-width: 768px) {

	.dr-project-video-container video.dr-video-player {
		opacity: 1;
		pointer-events: none;
		z-index: 2;
	}

	.dr-video-poster-image {
		display: block;
	}
}

/* Container fullscreen — video fills the screen, no native controls */
.dr-project-video-container:fullscreen,
.dr-project-video-container:-webkit-full-screen {
	width: 100vw;
	height: 100vh;
	aspect-ratio: unset;
	background: #1d1d1f;
}

.dr-project-video-container:fullscreen video.dr-video-player,
.dr-project-video-container:-webkit-full-screen video.dr-video-player {
	object-fit: contain;
}

/* video-active — poster fades out, video comes forward */
.dr-project-video-container.video-active .dr-video-poster-image {
	opacity: 0;
	pointer-events: none;
}

.dr-project-video-container.video-active video.dr-video-player {
	z-index: 4;
	pointer-events: auto;
	opacity: 1;
}

/* Interaction overlay — full-container click surface */
.dr-video-interaction-overlay {
	position: absolute;
	inset: 0;
	z-index: 5;
	cursor: pointer;
	opacity: 0;
	pointer-events: auto;
}

/* Watch clue — visual cue centered over the poster. Sits above the poster but
   below the interaction overlay, with pointer-events disabled so the click
   passes straight through to the overlay. Width matches the logo block so the
   "WATCH" type renders at the same size as the logo type. Fades out with the
   poster once the film starts playing. */
.dr-video-watch-clue {
	position: absolute;
	top: 50%;
	left: 50%;
	transform: translate(-50%, -50%);
	width: calc(120 * var(--dr-unit));
	height: auto;
	z-index: 4;
	pointer-events: none;
	opacity: 1;
	transition: opacity var(--dr-transition);
}

.dr-project-video-container.video-active .dr-video-watch-clue {
	opacity: 0;
}

/* When the film is paused (e.g. after exiting fullscreen), the watch clue
   reappears over the frozen frame in the same centered placement. */
.dr-project-video-container.video-active.is-paused .dr-video-watch-clue {
	opacity: 1;
}

/* Match the Close element's responsive widths so the watch clue renders at
   the exact same size (both SVGs share viewBox width 561.26). */
@media screen and (max-width: 539px) {
	.dr-video-watch-clue {
		width: calc(69 * var(--dr-unit));
	}
}

@media screen and (min-width: 540px) and (max-width: 767px) {
	.dr-video-watch-clue {
		width: calc(99 * var(--dr-unit));
	}
}

@media screen and (min-width: 768px) and (max-width: 1023px) {
	.dr-video-watch-clue {
		width: calc(93 * var(--dr-unit));
	}
}

@media screen and (min-width: 1024px) and (max-width: 1311px) {
	.dr-video-watch-clue {
		width: calc(108 * var(--dr-unit));
	}
}

@media screen and (min-width: 1600px) {
	.dr-video-watch-clue {
		width: calc(126 * var(--dr-unit));
	}
}

/* ––––––––––––––––––––––––––––––  DR Grid Video Boxes  –––––––––––––––––––––––––––––– */

/* Video box inner container */
.dr-grid-box .dr-video-box {
	width: 100%;
	height: 100%;
}

/* Video container handles the aspect ratio and cropping */
.dr-video-container {
	position: relative;
	width: 100%;
	height: 100%;
	overflow: clip;
	touch-action: pan-y;
}

/* Video thumbnail - stays visible underneath video */
.dr-video-container .dr-image {
	position: absolute;
	/* Use inset instead of percentage positioning */
	inset: -1px;
	width: calc(100% + 2px);
	height: calc(100% + 2px);
	object-fit: cover;
	z-index: 1;
	pointer-events: none;
	user-select: none;
	-webkit-user-drag: none;
	-webkit-user-select: none;
	/* Prevent size recalculation */
	min-width: 100%;
	min-height: 100%;
}

/* Base video positioning - DESKTOP ONLY */
@media screen and (min-width: 768px) {
	.dr-grid-box .dr-video-container video {
		position: absolute;
		top: 50%;
		left: 50%;
		width: 101%;
		height: 101%;
		transform: translate(-50%, -50%);
		-webkit-transform: translate(-50%, -50%);
		z-index: 2;
		pointer-events: none;
		touch-action: pan-y;
		opacity: 0;
		object-fit: cover;
		transition: opacity var(--dr-transition);
	}

	.dr-grid-box .dr-video-container video.video-ready {
		opacity: 1;
	}
}

/* ––– Landscape Video Boxes (default) ––– */
/* Standard landscape videos: 3/2 ratio, span 2 columns, 1 row - DESKTOP ONLY */
@media screen and (min-width: 768px) {
	.dr-grid-box.has-video {
		aspect-ratio: 3/2;
		grid-column-end: span 2;
		grid-row-end: span 1;
	}

}

/* ––– Portrait Video Boxes ––– */
/* Portrait videos: 3/4 ratio, 1x1 cell by default - DESKTOP ONLY */
@media screen and (min-width: 768px) {
	.dr-grid-box.portrait.has-video {
		aspect-ratio: 3/4;
		grid-column-end: span 1;
		grid-row-end: span 1;
	}

	/* Portrait videos with large class: 2x2 cells */
	.dr-grid-box.portrait.large.has-video {
		grid-column-end: span 2;
		grid-row-end: span 2;
	}
}

/* Mobile video adjustments - DISABLED for flex column layout */
/* Video styling for mobile is now handled in main mobile media query below */

/* Project page video styling */
.dr-project-video-portfolio {
	display: flex;
	flex-direction: column;
	gap: calc(4.5 * var(--dr-unit));
	box-sizing: border-box;
}

.dr-project-video-portfolio .dr-project-video-container {
	aspect-ratio: 16/9;
	position: relative;
}

/* ––––––––––––––––––––––––––––––  DR Base Frame  –––––––––––––––––––––––––––––– */

.dr-base-frame {
	margin: 0 var(--dr-baseframe-gutter);
	position: relative;
}


/* ––––––––––––––––––––––––––––––  DR Nav  –––––––––––––––––––––––––––––– */

.dr-svg-nav-frame {
	width: calc(31 * var(--dr-unit));
	display: flex;
	justify-content: flex-start;
	position: fixed;
	top: calc(2.625 * var(--dr-unit));
	z-index: 36;
}

.dr-svg-nav-frame.back {
	right: var(--dr-baseframe-gutter);
	z-index: 12;
	width: calc(15 * var(--dr-unit));
}


.dr-svg-nav-frame-close {
	display: flex;
	position: fixed;
	top: unset;
	bottom: calc(2.1 * var(--dr-unit));
	justify-content: flex-end;
	width: calc(120 * var(--dr-unit));
	right: var(--dr-baseframe-gutter);
	opacity: 1;
	z-index: 12;
}

.dr-svg-nav-frame-close .dr-svg-element {
	width: 100%;
	height: auto;
}

/* Close container fade. The close block is relocated by the pipeline out of
   <main> into #dr-close-container (a sibling of <main>), but it rides the same
   fade timeline as <main>: default visible (direct/no-JS load shows the fixed
   close as before), and `is-animating` fades it out on leave / in on enter in
   lockstep with the page. No independent beat — the close reveals together with
   the images when the white hold ends. */
#dr-close-container {
	transition: opacity var(--dr-transition);
	opacity: 1;
}

html.is-animating #dr-close-container {
	opacity: 0;
}

@media screen and (max-width: 539px) {
	.dr-svg-nav-frame-close {
		width: calc(69 * var(--dr-unit));
	}
}

@media screen and (min-width: 540px) and (max-width: 767px) {
	.dr-svg-nav-frame-close {
		width: calc(99 * var(--dr-unit));
	}
}

@media screen and (min-width: 768px) and (max-width: 1023px) {
	.dr-svg-nav-frame-close {
		width: calc(93 * var(--dr-unit));
	}
}

@media screen and (min-width: 1024px) and (max-width: 1311px) {
	.dr-svg-nav-frame-close {
		width: calc(108 * var(--dr-unit));
	}

}

@media screen and (min-width: 1600px) and (max-width: 2099px) {
	.dr-svg-nav-frame-close {
		width: calc(126 * var(--dr-unit));
	}

}

@media screen and (min-width: 2100px) {
	.dr-svg-nav-frame-close {
		width: calc(126 * var(--dr-unit));
	}
}

.dr-svg-contact-frame {
	width: var(--dr-baseframe-width);
}

.dr-thank-you {
	padding-bottom: calc(12 * var(--dr-unit));
}



.dr-header-spacer {
	width: 100%;
	height: calc(13.875 * var(--dr-unit));
}

.dr-header-white-space {
	width: 100%;
	height: calc(13.875 * var(--dr-unit));
	background-color: white;
	position: fixed;
	top: 0;
	left: 0;
	z-index: 12;
}

/* ––––––––––––––––––––––––––––––  DR Intro Credits –––––––––––––––––––––––––––––– */

.dr-intro-credit-display {
	position: absolute;
	top: 0;
	left: 0;
	display: flex;
	flex-direction: row;
	justify-content: center;
	align-items: flex-end;
	width: 100%;
	height: 100%;
	opacity: 0;
	transition: opacity var(--dr-transition);
	z-index: 6;
	pointer-events: none;
}

.dr-grid-box:hover .dr-intro-credit-display {
	opacity: 1;
}

.dr-grid-box .dr-clickable {
	position: absolute;
	top: 0;
	left: 0;
	width: 100%;
	height: 100%;
	z-index: 3;
	/* Above video elements */
	user-select: none;
	-webkit-user-select: none;
	-webkit-user-drag: none;
	-webkit-touch-callout: none;
	touch-action: pan-y;
}

.dr-click-area {
	position: absolute;
	top: 0;
	left: 0;
	width: 100%;
	height: 100%;
	z-index: 1;
}

/* Base container */
.dr-intro-credits-content {
	width: 100%;
	display: flex;
	flex-direction: column;
	background-color: white;
	padding-top: 5px;
	padding-bottom: 5px;
	padding-left: 12px;
	padding-right: 12px;
}

/* Each row: baseline aligned, space-between */
.dr-intro-credits-row {
	display: flex;
	flex-direction: row;
	align-items: baseline;
	justify-content: space-between;
	gap: 3px;
	min-height: 13.5px;
}

/* Typography */
.dr-intro-credit-client {
	font-family: var(--dr-font-sans);
	font-size: 11px;
	letter-spacing: 0.45px;
	line-height: 1;
	text-wrap: balance;
}

.dr-intro-credit-project,
.dr-intro-credit-name {
	font-family: var(--dr-font-serif);
	font-size: 13.5px;
	line-height: 1;
	text-wrap: balance;

}

.dr-intro-credit-name {
	text-align: right;
}


.dr-intro-credit-project {
	padding-top: 1.5px;
}

.dr-intro-credit-role {
	font-family: var(--dr-font-serif);
	font-size: 10.5px;
	letter-spacing: 0.15px;
	padding-top: 1.5px;
	line-height: 1;
	font-style: italic;

}

/* Pair wrapper - groups role+name together */
.dr-intro-credit-pair {
	display: flex;
	align-items: baseline;
	gap: 6px;
	margin-left: auto;
}

/* SMALL BOXES (default): 
   Row 1: Client + Primary Role (hide Primary Name inside pair)
   Row 2: Project + Primary Name (hide Secondary pair) */

.dr-intro-credit-name.primary-large {
	display: none;
}

.dr-intro-credit-pair.secondary {
	display: none;
}

.dr-intro-credit-name.primary-small {
	display: flex;
	margin-left: auto;
}

/* LARGE BOXES:
   Row 1: Client + Primary Role + Primary Name (paired)
   Row 2: Project + Secondary Role + Secondary Name (paired)
   Applies to: .large, .horizontal, .portrait.large, .has-video (non-portrait) */

.dr-grid-box:is(.large, .horizontal, .portrait.large, .has-video:not(.portrait)) .dr-intro-credit-name.primary-large {
	display: flex;
}

.dr-grid-box:is(.large, .horizontal, .portrait.large, .has-video:not(.portrait)) .dr-intro-credit-pair.secondary {
	display: flex;
}

.dr-grid-box:is(.large, .horizontal, .portrait.large, .has-video:not(.portrait)) .dr-intro-credit-name.primary-small {
	display: none;
}

/* Hide tablet-only project element on desktop */
.dr-intro-credit-project.primary-large-tablet {
	display: none;
}

/* ––––––––––––––––––––––––––––––  DR Tablet Index  –––––––––––––––––––––––––––––– */

/* Tablets: simplified single-row credits */
@media (hover: none) and (min-width: 768px) {
	.dr-intro-credits-content {
		padding-top: 6px;
		padding-bottom: 6px;
	}

	.dr-intro-credit-display {
		opacity: 1;
	}

	/* Hide second row */
	.dr-intro-credits-row:nth-child(2) {
		display: none;
	}

	/* Double gap between client and project */
	.dr-intro-credit-project.primary-large-tablet {
		display: flex;
		margin-left: calc(0.45 * var(--dr-unit));
	}

	/* LARGE BOXES: Client + Project (left) | Primary Role + Name (right)
	   Applies to: .large, .horizontal, .portrait.large, .has-video (non-portrait) */

	.dr-grid-box:is(.large, .horizontal, .portrait.large, .has-video:not(.portrait)) .dr-intro-credit-pair.primary {
		display: flex;
	}

	.dr-grid-box:is(.large, .horizontal, .portrait.large, .has-video:not(.portrait)) .dr-intro-credit-name.primary-large {
		display: flex;
	}

	/* SMALL BOXES: Client + Project only, left-aligned.
	   Includes 1x1 images and 1x1 portrait videos (without .large). */

	.dr-grid-box:is(:not(.large):not(.horizontal):not(.has-video), .portrait:not(.large)) .dr-intro-credits-row {
		align-items: center;
	}

	.dr-grid-box:is(:not(.large):not(.horizontal):not(.has-video), .portrait:not(.large)) .dr-intro-credit-pair.primary {
		display: none;
	}

	/* Type sizes inherited from desktop defaults — no overrides needed. */
}

/* ––––––––––––––––––––––––––––––  DR Project  –––––––––––––––––––––––––––––– */

.dr-project-image-portfolio {
	position: relative;
	padding: var(--dr-grid-border);
	background-color: white;
}

/* Four-column layout for desktop */
@media screen and (min-width: 768px) {
	.dr-project-image-portfolio.two-column-desktop {
		display: grid;
		grid-template-columns: repeat(4, 1fr);
		column-gap: calc(0.3 * var(--dr-unit));
		opacity: 1;
		transition: opacity var(--dr-transition);
	}

	/* All images (portrait and landscape) span 2 columns by default */
	.dr-project-image-portfolio.two-column-desktop .dr-project-image {
		grid-column: span 2;
	}

	/* Start at opacity 0 when transitioning, then fade in */
	.dr-project-image-portfolio.two-column-desktop.transitioning {
		opacity: 0;
	}

	/* Hero placement: col 2 of row 1, single-column wide (25vw). Col 1 of
	   row 1 stays intentionally empty. Auto-placement drops image #2 into
	   cols 3-4 of row 1 (it already spans 2 by default) and the rest flows
	   normally from row 2. */
	.dr-project-image-portfolio.two-column-desktop>.dr-project-image:first-child {
		grid-column: 2 / span 1;
	}

	/* Uniform-orientation projects (e.g. all-portrait or all-landscape):
	   hero gets the same 2-col / 50vw treatment as its peers — no empty
	   col 1, no cover-crop needed since row 1 heights match naturally.
	   The .hero-uniform class is written by the pipeline when frame 0
	   and frame 1 share aspect ratio. */
	.dr-project-image-portfolio.two-column-desktop.hero-uniform>.dr-project-image:first-child {
		grid-column: span 2;
	}

	/* Mixed-orientation hero (portrait at 25vw next to a landscape at
	   50vw): row 1's height is set by image #2, so the hero would render
	   short and leave a visible gap above row 2. Crop the hero to fill
	   its grid cell instead. Scoped away from .single-column (toggle-
	   expand) and .hero-uniform (uniform projects need no crop). */
	.dr-project-image-portfolio.two-column-desktop:not(.single-column):not(.hero-uniform)>.dr-project-image:first-child .dr-image-frame {
		height: 100%;
	}
	.dr-project-image-portfolio.two-column-desktop:not(.single-column):not(.hero-uniform)>.dr-project-image:first-child .dr-image-frame>.dr-image {
		height: 100%;
		object-fit: cover;
	}
	.dr-project-image-portfolio.two-column-desktop:not(.single-column):not(.hero-uniform)>.dr-project-image:first-child .dr-image-frame>.dr-image.overlay {
		width: 100%;
	}

	/* Clickable cursor for two-column layout images (except first image) */
	.dr-project-image-portfolio.two-column-desktop .dr-project-image:not(:first-child) {
		cursor: pointer;
	}

	/* First image never clickable */
	.dr-project-image-portfolio.two-column-desktop>.dr-project-image:first-child {
		cursor: default;
	}

	/* Single-column override - all images full width */
	.dr-project-image-portfolio.two-column-desktop.single-column {
		grid-template-columns: 1fr;
	}

	.dr-project-image-portfolio.two-column-desktop.single-column .dr-project-image,
	.dr-project-image-portfolio.two-column-desktop.single-column .dr-project-image:first-child {
		grid-column: 1 / -1;
	}
}

.dr-image-frame {
	position: relative;
}

/* ––––––––––––––––––––––––––––––  DR Project Image  –––––––––––––––––––––––––––––– */

.dr-project-image {
	padding-bottom: calc(0.3 * var(--dr-unit));
}

.dr-project-image img {
	display: block;
	width: 100%;
	height: auto;
	position: relative;
	margin: 0;
}

.dr-image.overlay {
	position: absolute;
	top: 0;
	left: 0;
	width: 100%;
}

/* Individual image fade-in for project pages - lazy loading.
   Uses --dr-image-fade (not --dr-transition) so the duration can be tuned
   independently. Reveal is triggered after img.decode() resolves, so the
   fade always starts from a paint-ready bitmap (no mid-fade pops). */
.dr-image-frame img {
	/* Not 0: WebKit skips rasterising/uploading the GPU texture for an
	   element at exactly opacity:0, so flipping it to 1 has no texture to
	   interpolate and snaps instead of fading. A sub-perceptible non-zero
	   value keeps the bitmap composited (uploaded) while effectively
	   invisible, so the fade to 1 runs over a real texture. */
	opacity: 0.004;
	transition: opacity var(--dr-image-fade);
}

.dr-image-frame.loaded img {
	opacity: 1;
}

/* Project load choreography (adopted): the hero rides <main>'s own
   swup-transition-fade instead of the per-image fade. `skip-fade` pins the
   hero at opacity:1 with no per-image transition, so the only animation on it
   is the container fade — this keeps the WebKit subtree composited and removes
   the Safari snap. Stamped by the `before:animation:in:start` hook in
   dr-main.js (image hero only; the video poster is already opacity:1 and needs
   no pin). Mirror of `.dr-grid-box .dr-image.skip-fade`. */
.dr-image-frame img.skip-fade {
	opacity: 1 !important;
	transition: none !important;
}

/* Heavy-project windowed unload. When the runtime moves a
   frame out of the rolling window (un-intersect), it restores the placeholder
   gif and removes `.loaded`. The frame is off-screen by definition (rootMargin
   gives a 1.5-viewport buffer), so we suppress the fade-out and release the
   bitmap immediately. `.unloading` is removed on the next animation frame, so
   the transition is back in place by the time the frame might be promoted
   again. */
.dr-image-frame.unloading img {
	transition: none;
	opacity: 0;
}

/* ––––––––––––––––––––––––––––––  DR Project Bottom Spacer  –––––––––––––––––––––––––––––– */

.dr-project-bottom-spacer {
	height: calc(31.5 * var(--dr-unit));
	z-index: -6;
	opacity: 0;
	position: relative;
}

@media screen and (max-width: 539px) {
	.dr-project-bottom-spacer {
		height: calc(18 * var(--dr-unit));
	}
}

@media screen and (min-width: 540px) and (max-width: 767px) {
	.dr-project-bottom-spacer {
		height: calc(21 * var(--dr-unit));
	}
}

@media screen and (min-width: 768px) and (max-width: 1023px) {
	.dr-project-bottom-spacer {
		height: calc(24 * var(--dr-unit));
	}
}

@media screen and (min-width: 1024px) and (max-width: 1311px) {
	.dr-project-bottom-spacer {
		height: calc(27 * var(--dr-unit));
	}
}

@media screen and (min-width: 1600px) and (max-width: 2099px) {
	.dr-project-bottom-spacer {
		height: calc(36 * var(--dr-unit));
	}
}

@media screen and (min-width: 2100px) {
	.dr-project-bottom-spacer {
		height: 21vw;
	}
}

/* ––––––––––––––––––––––––––––––  DR Project Background  –––––––––––––––––––––––––––––– */

main div {
	color: #1d1d1f;
}

main.dr-dark-mode div {
	color: white;
}

main.dr-dark-mode div span {
	color: white;
}

main.dr-dark-mode .dr-svg-element {
	filter: invert(100%);
}

main.dr-dark-mode a {
	color: white;
}

main.dr-dark-mode .dr-project-image-portfolio {
	background-color: black;
}

main.dr-dark-mode .dr-project-video-portfolio {
	background-color: black;
}

.dr-dark-mode {
	background-color: black;
}

html:has(main.dr-dark-mode) {
	background-color: black;
}

body:has(main.dr-dark-mode) {
	background-color: black;
}

/* ––––––––––––––––––––––––––––––  DR Project Credits –––––––––––––––––––––––––––––– */
.dr-project-credit {
	display: flex;
	flex-direction: column;
	font-family: var(--dr-font-serif);
	position: relative;
	z-index: 9;
	pointer-events: none;
	padding-top: calc(2.4 * var(--dr-unit));
}

.dr-project-credit-box {
	display: flex;
	flex-direction: row;
	flex-wrap: wrap;
	justify-content: flex-end;
	align-items: flex-end;
	padding-bottom: calc(1.2 * var(--dr-unit));
}

.dr-project-credit-box.main {
	flex-direction: column;
	flex-wrap: unset;
}

.dr-project-credit-project,
.dr-project-credit-client {
	font-size: calc(9.6 * var(--dr-unit));
	letter-spacing: calc(var(--dr-unit) * -0.18);
	text-align: right;
}

.dr-project-credit-name,
.dr-project-credit-description,
.dr-additional-credit-name {
	font-size: calc(4.8 * var(--dr-unit));
	letter-spacing: calc(var(--dr-unit) * -0.09);
	line-height: 1.26;
}

.dr-project-credit-project,
.dr-project-credit-role,
.dr-additional-credit-role {
	font-style: italic;
}

.dr-project-credit-description {
	text-align: justify;
	padding-top: calc(1.2 * var(--dr-unit));
}


.dr-project-credit-box:has(.dr-project-credit-secondary .dr-project-credit-role:empty):has(.dr-project-credit-secondary .dr-project-credit-name:empty) .dr-project-credit-secondary {
	display: none;
}

body:has(#data-source[data-credit-secondary-role="and"]) .dr-project-credit-secondary .dr-project-credit-role {
	padding-left: calc(1.2 * var(--dr-unit));
	padding-right: calc(1.2 * var(--dr-unit));
}

.dr-project-credit-project {
	padding-left: calc(2.1 * var(--dr-unit));
}

.dr-project-credit-primary,
.dr-project-credit-secondary {
	display: flex;
	align-items: baseline;
	padding-top: calc(0.9 * var(--dr-unit));
}

.dr-project-credit-role,
.dr-additional-credit-role {
	font-size: calc(1.8 * var(--dr-unit));
	letter-spacing: calc(var(--dr-unit) * -0.0075);
}

.dr-project-credit-role {
	padding-right: calc(1.5 * var(--dr-unit));
	padding-left: calc(2.4 * var(--dr-unit));
}

.dr-additional-credit-role {
	padding-right: calc(1.2 * var(--dr-unit));
}

.dr-additional-credits-container {
	display: flex;
	flex-direction: row;
	flex-wrap: wrap;
	justify-content: space-between;
	column-gap: calc(3 * var(--dr-unit));
	width: 100%;
}

.dr-additional-credit-box {
	display: flex;
	flex-direction: column;
	align-items: baseline;
	padding-top: calc(1.2 * var(--dr-unit));
}


/* Small Mobile - 2 columns with larger unit size */
@media screen and (max-width: 539px) {

	.dr-project-credit-project,
	.dr-project-credit-client {
		font-size: calc(5.4 * var(--dr-unit));
		letter-spacing: calc(var(--dr-unit) * -0.12);
	}

	.dr-project-credit-name,
	.dr-project-credit-description,
	.dr-additional-credit-name {
		font-size: calc(4.2 * var(--dr-unit));
		letter-spacing: calc(var(--dr-unit) * -0.06);
		line-height: 1.2;
	}

}

/* Large Mobile - 2 columns with reduced unit size */
@media screen and (min-width: 540px) and (max-width: 767px) {


	.dr-project-credit-project,
	.dr-project-credit-client {
		font-size: calc(7.2 * var(--dr-unit));
		letter-spacing: calc(var(--dr-unit) * -0.15);
	}

	.dr-project-credit-name,
	.dr-project-credit-description,
	.dr-additional-credit-name {
		font-size: calc(4.8 * var(--dr-unit));
		letter-spacing: calc(var(--dr-unit) * -0.09);
		line-height: 1.2;
	}

}



/* ––––––––––––––––––––––––––––––  404 –––––––––––––––––––––––––––––– */

.dr-404-link {
	pointer-events: auto;
	color: inherit;
	text-decoration: none;
	cursor: pointer;
	display: block;
}


/* ––––––––––––––––––––––––––––––  Copyrights –––––––––––––––––––––––––––––– */

.dr-rights-bottom {
	font-family: var(--dr-font-serif);
	font-size: calc(1.5 * var(--dr-unit));
	letter-spacing: calc(var(--dr-unit) * -0.0075);
	position: fixed;
	z-index: 0;
	bottom: calc(2.1 * var(--dr-unit));
}

/* On the index the copyright sits BEHIND the portfolio (same fixed bottom-left
   position) so the grid scrolls over it. The copyright now lives inside <main>
   (injected by the pipeline), so a negative z-index drops it behind the grid
   container (#dr-landing-page, z-index:6) while staying above <main>'s own
   (transparent) background — it shows through grid gaps and fades in/out with
   the page. `dr-on-index` is toggled on <html> by initPage(). Other pages keep
   z-index: 0 so the copyright stays visible as chrome. */
html.dr-on-index .dr-rights-bottom {
	z-index: -1;
}


/* ––––––––––––––––––––––––––––––  Click Spaces –––––––––––––––––––––––––––––– */

/* Shared */
.dr-click-space-com,
.dr-click-space-close,
.dr-click-space-studio,
.dr-click-space-dr-small,
.dr-click-space-go-back,
.dr-click-space-url,
.dr-click-space-go-credits {
	cursor: pointer;
	position: absolute;
	z-index: 36;
	right: 0;
	opacity: 0;
}

/* Fixed-size (no breakpoint scaling) */
.dr-click-space-dr-small {
	height: calc(5.625 * var(--dr-unit));
	width: calc(10.5 * var(--dr-unit));
	right: unset;
	left: 0;
}

.dr-click-space-go-back {
	height: calc(2.7 * var(--dr-unit));
	width: calc(10.625 * var(--dr-unit));
}

.dr-click-space-go-credits {
	height: calc(2.7 * var(--dr-unit));
	width: calc(9 * var(--dr-unit));
	top: calc(5.75 * var(--dr-unit));
}

/* Static position anchors */
.dr-click-space-studio {
	top: 0;
	left: 0;
}

.dr-click-space-close {
	bottom: 0;
}

/* Small Mobile */
@media screen and (max-width: 539px) {

	.dr-click-space-studio,
	.dr-click-space-url,
	.dr-click-space-com {
		height: calc(7.5 * var(--dr-unit));
	}

	.dr-click-space-studio {
		width: calc(29.25 * var(--dr-unit));
	}

	.dr-click-space-url {
		width: calc(45 * var(--dr-unit));
		top: calc(7.5 * var(--dr-unit));
	}

	.dr-click-space-com {
		width: calc(17.25 * var(--dr-unit));
		top: calc(15 * var(--dr-unit));
	}

	.dr-click-space-close {
		height: calc(11.25 * var(--dr-unit));
		width: calc(35.25 * var(--dr-unit));
	}
}

/* Large Mobile */
@media screen and (min-width: 540px) and (max-width: 767px) {

	.dr-click-space-studio,
	.dr-click-space-url,
	.dr-click-space-com {
		height: calc(10.5 * var(--dr-unit));
	}

	.dr-click-space-studio {
		width: calc(41.25 * var(--dr-unit));
	}

	.dr-click-space-url {
		width: calc(62.25 * var(--dr-unit));
		top: calc(10.5 * var(--dr-unit));
	}

	.dr-click-space-com {
		width: calc(23.25 * var(--dr-unit));
		top: calc(21 * var(--dr-unit));
	}

	.dr-click-space-close {
		height: calc(15.75 * var(--dr-unit));
		width: calc(50.25 * var(--dr-unit));
	}
}

/* Small Tablet */
@media screen and (min-width: 768px) and (max-width: 1023px) {

	.dr-click-space-studio,
	.dr-click-space-url,
	.dr-click-space-com {
		height: calc(13.5 * var(--dr-unit));
	}

	.dr-click-space-studio {
		width: calc(54 * var(--dr-unit));
	}

	.dr-click-space-url {
		width: calc(84 * var(--dr-unit));
		top: calc(13.5 * var(--dr-unit));
	}

	.dr-click-space-com {
		width: calc(30.5 * var(--dr-unit));
		top: calc(27 * var(--dr-unit));
	}

	.dr-click-space-close {
		height: 15.375vw;
		width: 49.5vw;
	}
}

/* Large Tablet & Small Desktop */
@media screen and (min-width: 1024px) and (max-width: 1311px) {

	.dr-click-space-studio,
	.dr-click-space-url,
	.dr-click-space-com {
		height: calc(16 * var(--dr-unit));
	}

	.dr-click-space-studio {
		width: calc(63.75 * var(--dr-unit));
	}

	.dr-click-space-url {
		width: calc(97.5 * var(--dr-unit));
		top: calc(16 * var(--dr-unit));
	}

	.dr-click-space-com {
		width: calc(36 * var(--dr-unit));
		top: calc(32 * var(--dr-unit));
	}

	.dr-click-space-close {
		height: calc(17.25 * var(--dr-unit));
		width: calc(54.756 * var(--dr-unit));
	}
}

/* Medium Desktop */
@media screen and (min-width: 1312px) and (max-width: 1599px) {

	.dr-click-space-studio,
	.dr-click-space-url,
	.dr-click-space-com {
		height: calc(19.5 * var(--dr-unit));
	}

	.dr-click-space-studio {
		width: calc(78 * var(--dr-unit));
	}

	.dr-click-space-url {
		width: calc(118.5 * var(--dr-unit));
		top: calc(19.5 * var(--dr-unit));
	}

	.dr-click-space-com {
		width: calc(43.5 * var(--dr-unit));
		top: calc(39 * var(--dr-unit));
	}

	.dr-click-space-close {
		height: calc(19.125 * var(--dr-unit));
		width: calc(60.75 * var(--dr-unit));
	}
}

/* Large Desktop */
@media screen and (min-width: 1600px) and (max-width: 2099px) {

	.dr-click-space-studio,
	.dr-click-space-url,
	.dr-click-space-com {
		height: calc(24.25 * var(--dr-unit));
	}

	.dr-click-space-studio {
		width: calc(97.5 * var(--dr-unit));
	}

	.dr-click-space-url {
		width: calc(148.5 * var(--dr-unit));
		top: calc(24.25 * var(--dr-unit));
	}

	.dr-click-space-com {
		width: calc(54.75 * var(--dr-unit));
		top: calc(48.5 * var(--dr-unit));
	}

	.dr-click-space-close {
		height: calc(20.25 * var(--dr-unit));
		width: calc(63.75 * var(--dr-unit));
	}
}

/* XL Desktop */
@media screen and (min-width: 2100px) {

	.dr-click-space-studio,
	.dr-click-space-url,
	.dr-click-space-com {
		height: calc(27 * var(--dr-unit));
	}

	.dr-click-space-studio {
		width: calc(108 * var(--dr-unit));
	}

	.dr-click-space-url {
		width: calc(165 * var(--dr-unit));
		top: calc(27 * var(--dr-unit));
	}

	.dr-click-space-com {
		width: calc(63 * var(--dr-unit));
		top: calc(54 * var(--dr-unit));
	}

	.dr-click-space-close {
		height: calc(20.25 * var(--dr-unit));
		width: calc(63.75 * var(--dr-unit));
	}
}

/* ––––––––––––––––––––––––––––––  DR Mobile Intro  –––––––––––––––––––––––––––––– */

/* ––––––––––––––––––––––––––––––  DR Mobile Grid (Single Column) –––––––––––––––––––––––––––––– */

@media screen and (max-width: 767px) and (hover: none) {

	/* ========== BASE FRAME ========== */
	.dr-base-frame-grid {
		padding: var(--dr-grid-border);
		max-width: 100vw;
		overflow-x: clip;
	}

	/* ========== GRID LAYOUT ========== */
	.dr-grid-layout {
		display: grid;
		grid-template-columns: 1fr;
		grid-auto-rows: auto;
		grid-auto-flow: row;
		gap: 0;
		background-color: white;
		max-width: 100%;
		box-sizing: border-box;
	}

	/* ========== BOX CONTAINER ========== */
	.dr-grid-box,
	.dr-grid-box.horizontal,
	.dr-grid-box.portrait,
	.dr-grid-box.large {
		aspect-ratio: unset;
		display: block;
		position: relative;
		width: 100%;
		max-width: 100%;
		grid-column: 1 / -1;
		grid-row-end: span 1;
		border: solid white;
		border-width: calc(0.3 * var(--dr-unit));
		margin-bottom: var(--dr-grid-border);
		overflow: hidden;
		box-sizing: border-box;
	}

	/* ========== CLICKABLE WRAPPER (Both Video & Image) ========== */

	.dr-grid-box .dr-clickable {
		position: relative;
		top: auto;
		left: auto;
		display: flex;
		flex-direction: column;
		width: 100%;
		height: auto;
		user-select: none;
		-webkit-user-select: none;
		-webkit-user-drag: none;
		-webkit-touch-callout: none;
		touch-action: pan-y;
	}

	/* ========== VIDEO BOXES ========== */

	.dr-grid-box .dr-video-box {
		width: 100%;
		height: auto;
		display: block;
	}

	/* Video container - 16:9 default; horizontal=3:2; portrait=3:4 */
	.dr-grid-box .dr-video-container {
		width: 100%;
		aspect-ratio: 16 / 9;
		position: relative;
		overflow: clip;
		touch-action: pan-y;
		background-color: transparent;
	}

	.dr-grid-box.horizontal .dr-video-container {
		aspect-ratio: 3 / 2;
	}

	.dr-grid-box.portrait .dr-video-container {
		aspect-ratio: 3 / 4;
	}

	/* Thumbnail images - simple absolute positioning */
	.dr-grid-box.has-video .dr-video-container .dr-image {
		position: absolute;
		inset: -1px;
		width: calc(100% + 2px);
		height: calc(100% + 2px);
		object-fit: cover;
		z-index: 1;
		min-width: 100%;
		min-height: 100%;
	}

	/* Native video elements - cover-style positioning (matches desktop) */
	.dr-grid-box.has-video .dr-video-container video {
		position: absolute;
		inset: 0;
		width: 100%;
		height: 100%;
		pointer-events: none;
		touch-action: pan-y;
		z-index: 2;
		object-fit: cover;
		opacity: 0;
	}

	.dr-grid-box.has-video .dr-video-container video.video-ready {
		opacity: 1;
	}

	/* ========== IMAGE BOXES ========== */

	.dr-grid-box .dr-intro-project-frame {
		width: 100%;
		display: block;
	}

	/* Layout-only on mobile-touch (display/width/aspect-ratio/object-fit).
	   Opacity + transition for the fade-in live in the universal
	   `.dr-grid-box .dr-image` rule near the top of this file, so video
	   thumbnails (`.dr-video-container .dr-image`) also fade in. */
	.dr-grid-box .dr-clickable>.dr-image,
	.dr-grid-box .dr-image:not(.dr-video-container .dr-image) {
		display: block;
		width: 100%;
		aspect-ratio: 3/4;
		object-fit: cover;
	}

	.dr-grid-box.horizontal .dr-clickable>.dr-image,
	.dr-grid-box.horizontal .dr-image:not(.dr-video-container .dr-image) {
		aspect-ratio: 3/2;
	}

	/* ========== CREDITS (Both Video & Image) ========== */

	/* Credits flow naturally below content - no positioning needed, just display */
	.dr-grid-box .dr-clickable .dr-intro-credit-display {
		position: static;
		width: 100%;
		height: 54px;
		opacity: 1;
		display: block;
		z-index: 3;
		pointer-events: auto;
		transition: none;
	}

	/* Mobile-only overrides; base properties are inherited from the desktop rules above. */
	.dr-intro-credits-content {
		padding-top: 12px;
		padding-bottom: 12px;
		padding-left: var(--dr-baseframe-gutter);
		padding-right: var(--dr-baseframe-gutter);
		gap: 3px;
		color: #1d1d1f;
		box-sizing: border-box;
	}

	.dr-intro-credits-row {
		min-height: 14px;
	}

	/* ========== CLICK HANDLING ========== */

	.dr-grid-box .dr-click-area {
		display: none;
	}

	/* ========== CREDITS DISPLAY LOGIC ========== */

	.dr-intro-credit-name.primary-large {
		display: flex;
	}

	.dr-intro-credit-pair.secondary {
		display: flex;
	}

	.dr-intro-credit-name.primary-small {
		display: none;
	}

	.dr-intro-credit-project.primary-large-tablet {
		display: none;
	}

	/* ========== TYPOGRAPHY (size overrides only) ========== */

	.dr-intro-credit-client {
		font-size: 13.5px;
	}

	.dr-intro-credit-project,
	.dr-intro-credit-name {
		font-size: 15px;
	}

	.dr-intro-credit-role {
		font-size: 12px;
	}
}