/*********************************************************************************************/
/*********************************************************************************************/
/*********************************************************************************************/
/*********************************************************************************************/
/*********************************************************************************************/
/*********************************************************************************************/
/*********************************************************************************************/
/****                                                                                     ****/
/****   PRE-LOAD FONTS                                                                    ****/
/****                                                                                     ****/
/*********************************************************************************************/
/*********************************************************************************************/
/*********************************************************************************************/
/*********************************************************************************************/
/*********************************************************************************************/
/*********************************************************************************************/
/*********************************************************************************************/

/* ————   LITERATA – VARIABLE ROMAN   —————————————————————————————————————————————————————— */

/* <weight>: Use a value from 200 to 900 */
/* <uniquifier>: Use a unique and descriptive class name */

.literata-<uniquifier> {
  font-family: "Literata", serif;
  font-optical-sizing: auto;
  font-weight: <weight>;
  font-style: normal;
}

/* ————   CRIMSON PRO – VARIABLE ROMAN   ——————————————————————————————————————————————————— */

/* <weight>: Use a value from 200 to 900 */
/* <uniquifier>: Use a unique and descriptive class name */

.crimson-pro-<uniquifier> {
  font-family: "Crimson Pro", serif;
  font-optical-sizing: auto;
  font-weight: <weight>;
  font-style: normal;
}

/* ————   BARLOW – SANS SERIF   ———————————————————————————————————————————————————————————— */

.barlow-300 { font-family: "Barlow", sans-serif; font-weight: 300; font-style: normal; }
.barlow-400 { font-family: "Barlow", sans-serif; font-weight: 400; font-style: normal; }
.barlow-500 { font-family: "Barlow", sans-serif; font-weight: 500; font-style: normal; }
.barlow-600 { font-family: "Barlow", sans-serif; font-weight: 600; font-style: normal; }
.barlow-700 { font-family: "Barlow", sans-serif; font-weight: 700; font-style: normal; }
.barlow-800 { font-family: "Barlow", sans-serif; font-weight: 800; font-style: normal; }
.barlow-900 { font-family: "Barlow", sans-serif; font-weight: 900; font-style: normal; }
.barlow-300i { font-family: "Barlow", sans-serif; font-weight: 300; font-style: italic; }
.barlow-400i { font-family: "Barlow", sans-serif; font-weight: 400; font-style: italic; }
.barlow-500i { font-family: "Barlow", sans-serif; font-weight: 500; font-style: italic; }
.barlow-600i { font-family: "Barlow", sans-serif; font-weight: 600; font-style: italic; }
.barlow-700i { font-family: "Barlow", sans-serif; font-weight: 700; font-style: italic; }
.barlow-800i { font-family: "Barlow", sans-serif; font-weight: 800; font-style: italic; }
.barlow-900i { font-family: "Barlow", sans-serif; font-weight: 900; font-style: italic; }

.barlow-sc-400 { font-family: "Barlow Semi Condensed", sans-serif; font-weight: 400; font-style: normal; }
.barlow-sc-500 { font-family: "Barlow Semi Condensed", sans-serif; font-weight: 500; font-style: normal; }
.barlow-sc-600 { font-family: "Barlow Semi Condensed", sans-serif; font-weight: 600; font-style: normal; }
.barlow-sc-400i { font-family: "Barlow Semi Condensed", sans-serif; font-weight: 400; font-style: italic; }
.barlow-sc-500i { font-family: "Barlow Semi Condensed", sans-serif; font-weight: 500; font-style: italic; }
.barlow-sc-600i { font-family: "Barlow Semi Condensed", sans-serif; font-weight: 600; font-style: italic; }

.barlow-c-400 { font-family: "Barlow Condensed", sans-serif; font-weight: 400; font-style: normal; }
.barlow-c-500 { font-family: "Barlow Condensed", sans-serif; font-weight: 500; font-style: normal; }
.barlow-c-600 { font-family: "Barlow Condensed", sans-serif; font-weight: 600; font-style: normal; }
.barlow-c-700 { font-family: "Barlow Condensed", sans-serif; font-weight: 700; font-style: normal; }
.barlow-c-800 { font-family: "Barlow Condensed", sans-serif; font-weight: 800; font-style: normal; }
.barlow-c-900 { font-family: "Barlow Condensed", sans-serif; font-weight: 900; font-style: normal; }
.barlow-c-400i { font-family: "Barlow Condensed", sans-serif; font-weight: 400; font-style: italic; }
.barlow-c-500i { font-family: "Barlow Condensed", sans-serif; font-weight: 500; font-style: italic; }
.barlow-c-600i { font-family: "Barlow Condensed", sans-serif; font-weight: 600; font-style: italic; }
.barlow-c-700i { font-family: "Barlow Condensed", sans-serif; font-weight: 700; font-style: italic; }
.barlow-c-800i { font-family: "Barlow Condensed", sans-serif; font-weight: 800; font-style: italic; }
.barlow-c-900i { font-family: "Barlow Condensed", sans-serif; font-weight: 900; font-style: italic; }

/* ————   IBM PLEX MONO   —————————————————————————————————————————————————————————————————— */

.ibm-plex-mono-400 { font-family: "IBM Plex Mono", monospace; font-weight: 400; font-style: normal; }
.ibm-plex-mono-500 { font-family: "IBM Plex Mono", monospace; font-weight: 500; font-style: normal; }
.ibm-plex-mono-600 { font-family: "IBM Plex Mono", monospace; font-weight: 600; font-style: normal; }
.ibm-plex-mono-700 { font-family: "IBM Plex Mono", monospace; font-weight: 700; font-style: normal; }
.ibm-plex-mono-400i { font-family: "IBM Plex Mono", monospace; font-weight: 400; font-style: italic; }
.ibm-plex-mono-500i { font-family: "IBM Plex Mono", monospace; font-weight: 500; font-style: italic; }
.ibm-plex-mono-600i { font-family: "IBM Plex Mono", monospace; font-weight: 600; font-style: italic; }
.ibm-plex-mono-700i { font-family: "IBM Plex Mono", monospace; font-weight: 700; font-style: italic; }




/*********************************************************************************************/
/*********************************************************************************************/
/*********************************************************************************************/
/*********************************************************************************************/
/*********************************************************************************************/
/*********************************************************************************************/
/*********************************************************************************************/
/****                                                                                     ****/
/****   TOKENS                                                                            ****/
/****                                                                                     ****/
/*********************************************************************************************/
/*********************************************************************************************/
/*********************************************************************************************/
/*********************************************************************************************/
/*********************************************************************************************/
/*********************************************************************************************/
/*********************************************************************************************/

:root {

/* ————————————————————————————————————————————————————————————————————————————————————————— */
/* ————————————————————————————————————————————————————————————————————————————————————————— */
/* ——————————   COLORS   ——————————————————————————————————————————————————————————————————— */
/* ————————————————————————————————————————————————————————————————————————————————————————— */
/* ————————————————————————————————————————————————————————————————————————————————————————— */

/* ——————————   BACKGROUNDS   —————————————————————————————————————————————————————————————— */

	--color-parchment:       #f8f6f4;
	--color-warm-base:       #e6e4e1;
	--color-warm-base-hover: #c9c4c1;
	--color-tint:            #d6e6e5;

/* ——————————   TEXT   ————————————————————————————————————————————————————————————————————— */

	--color-ink:             #17110d;
	--color-body:            #4c4139;
	--color-secondary:       #908883;
	--color-muted:           #b1aba6;

/* ————   BORDERS   ———————————————————————————————————————————————————————————————————————— */

	--color-rule:            #d7d3d0;
	--color-rule-light:      #fcfbfa;

/* ————   PRIMARY ACCENT (TEAL)   —————————————————————————————————————————————————————————— */

	--color-accent:          #377784;
	--color-accent-deep:     #1d515e;
	--color-accent-soft:     #68aeb2;
	--color-accent-tint:     #b4c8cb;
	--color-accent-dark:     #103e4a;

/* ————   SECONDARY ACCENT (GOLD)   ———————————————————————————————————————————————————————— */

	--color-gold:            #e6bc5d;
	--color-gold-deep:       #cf8b22;
	--color-gold-tint:       #ebd7aa;

/* ————————————————————————————————————————————————————————————————————————————————————————— */
/* ————————————————————————————————————————————————————————————————————————————————————————— */
/* ————   FONTS   —————————————————————————————————————————————————————————————————————————— */
/* ————————————————————————————————————————————————————————————————————————————————————————— */
/* ————————————————————————————————————————————————————————————————————————————————————————— */

	--font-display:  'Literata', 'Crimson Pro', Georgia, serif;
	--font-body:     'Barlow', system-ui, sans-serif;
	--font-callout:  'Barlow Condensed', system-ui, sans-serif;
	--font-mono:     'IBM Plex Mono', monospace;

/* ————————————————————————————————————————————————————————————————————————————————————————— */
/* ————————————————————————————————————————————————————————————————————————————————————————— */
/* ————   MEASUREMENTS   ——————————————————————————————————————————————————————————————————— */
/* ————————————————————————————————————————————————————————————————————————————————————————— */
/* ————————————————————————————————————————————————————————————————————————————————————————— */

	--nav-height:     60px;
	--footer-height:  240px;
	--max-width:      1200px;
	--col-8:          66.666%;
	--gutter:         24px;

/* ————————————————————————————————————————————————————————————————————————————————————————— */
/* ————————————————————————————————————————————————————————————————————————————————————————— */
/* ————   CURVES   ————————————————————————————————————————————————————————————————————————— */
/* ————————————————————————————————————————————————————————————————————————————————————————— */
/* ————————————————————————————————————————————————————————————————————————————————————————— */

	--ease-expo: cubic-bezier(0.16, 1, 0.3, 1);
	--ease-out:  cubic-bezier(0.0, 0.0, 0.2, 1);
}





/*********************************************************************************************/
/*********************************************************************************************/
/*********************************************************************************************/
/*********************************************************************************************/
/*********************************************************************************************/
/*********************************************************************************************/
/*********************************************************************************************/
/****                                                                                     ****/
/****   RESET                                                                             ****/
/****                                                                                     ****/
/*********************************************************************************************/
/*********************************************************************************************/
/*********************************************************************************************/
/*********************************************************************************************/
/*********************************************************************************************/
/*********************************************************************************************/
/*********************************************************************************************/

*, *::before, *::after {
	box-sizing: border-box;
	margin: 0;
	padding: 0;
}
html {
	scroll-behavior: smooth;
	font-size: 16px;
}
body {
	background: var(--color-accent-dark);
	color: var(--color-body);
	font-family: var(--font-body);
	font-size: 1em;
	line-height: 1.5em;
	-webkit-font-smoothing: antialiased;
	-moz-osx-font-smoothing: grayscale;
	overflow-x: hidden;
}
img {
	max-width: 100%;
	display: block;
}
a {
	color: inherit;
	text-decoration: none;
}
button {
	font-family: inherit;
	cursor: pointer;
	border: none;
	background: none;
}





/*********************************************************************************************/
/*********************************************************************************************/
/*********************************************************************************************/
/*********************************************************************************************/
/*********************************************************************************************/
/*********************************************************************************************/
/*********************************************************************************************/
/****                                                                                     ****/
/****   UNIVERSAL COMPONENTS                                                              ****/
/****                                                                                     ****/
/*********************************************************************************************/
/*********************************************************************************************/
/*********************************************************************************************/
/*********************************************************************************************/
/*********************************************************************************************/
/*********************************************************************************************/
/*********************************************************************************************/


/* ————————————————————————————————————————————————————————————————————————————————————————— */
/* ————————————————————————————————————————————————————————————————————————————————————————— */
/* ————   SKIP LINK   —————————————————————————————————————————————————————————————————————— */
/* ————————————————————————————————————————————————————————————————————————————————————————— */
/* ————————————————————————————————————————————————————————————————————————————————————————— */

.skip-link {
	position: absolute;
	top: -100%;
	left: 1rem;
	background: var(--color-accent);
	color: var(--color-parchment);
	padding: 0.5rem 1rem;
	font-family: var(--font-mono);
	word-spacing: -0.25em;
	font-size: 11px;
	letter-spacing: 0.12em;
	text-transform: uppercase;
	z-index: 9999;
	transition: top 0.2s;
}
.skip-link:focus { top: 1rem; }


/* ————————————————————————————————————————————————————————————————————————————————————————— */
/* ————————————————————————————————————————————————————————————————————————————————————————— */
/* ————   TYPE STYLES   ———————————————————————————————————————————————————————————————————— */
/* ————————————————————————————————————————————————————————————————————————————————————————— */
/* ————————————————————————————————————————————————————————————————————————————————————————— */

.t-eyebrow {
	font-family: var(--font-mono);
	font-size: clamp(0.7em, 1vw, 0.75em);
	font-weight: 700;
	letter-spacing: 0.05em;
	word-spacing: -0.25em;
	text-transform: uppercase;
	color: var(--color-secondary);
	line-height: 1;
}
.t-display {
	font-family: var(--font-display);
	font-size: clamp(3em, 8vw, 6em);
	font-weight: 700;
	letter-spacing: -0.025em;
	line-height: 0.85;
	color: var(--color-ink);
}
.t-headline {
	font-family: var(--font-display);
	font-size: clamp(2em, 4vw, 3em);
	font-weight: 700;
	letter-spacing: 0;
	line-height: 1.1;
	color: var(--color-accent);
}
.t-subhead {
	font-family: var(--font-display);
	font-size: clamp(1.5em, 2.5vw, 2em);
	font-weight: 800;
	letter-spacing: 0;
	line-height: 1.1;
	color: var(--color-accent);
}
.t-pull {
	font-family: var(--font-display);
	font-size: clamp(2em, 3vw, 2.5em);
	font-weight: 500;
	font-style: italic;
	line-height: 1.5;
	color: var(--color-parchment);
}
.t-body {
	font-family: var(--font-body);
	font-size: clamp(0.95em, 1.25vw, 1em);
	line-height: 1.5;
	font-weight: 500;
	color: var(--color-body);
}
.t-body-sm {
	font-family: var(--font-body);
	font-size: clamp(0.8em, 1vw, 0.9em);
	font-weight: 500;
	line-height: 1.5;
	color: var(--color-body);
}
.t-body-lg {
	font-family: var(--font-body);
	font-size: clamp(1.05em, 1.5vw, 1.1em);
	font-weight: 600;
	line-height: 1.5;
	color: var(--color-body);
}
.t-mono-label {
	font-family: var(--font-mono);
	font-size: clamp(0.55em, 0.75vw, 0.7em);
	font-weight: 800;
	letter-spacing: 0.15em;
	word-spacing: -0.25em;
	text-transform: uppercase;
	color: var(--color-muted);
}
.mobile-break { display: none; }


/* ————————————————————————————————————————————————————————————————————————————————————————— */
/* ————————————————————————————————————————————————————————————————————————————————————————— */
/* ————   LAYOUT   ————————————————————————————————————————————————————————————————————————— */
/* ————————————————————————————————————————————————————————————————————————————————————————— */
/* ————————————————————————————————————————————————————————————————————————————————————————— */

.container {
	width: 100%;
	max-width: var(--max-width);
	margin: 0 auto;
	padding: 0 clamp(1em, 5vw, 5em);
}
.section { padding: 5em 0; background: var(--color-parchment); }
.section--sm { padding: 7.5em 0; background: var(--color-parchment); }
.section--lg { padding: 10em 0; background: var(--color-parchment); }


/* ————————————————————————————————————————————————————————————————————————————————————————— */
/* ————————————————————————————————————————————————————————————————————————————————————————— */
/* ————   NAVIGATION   ————————————————————————————————————————————————————————————————————— */
/* ————————————————————————————————————————————————————————————————————————————————————————— */
/* ————————————————————————————————————————————————————————————————————————————————————————— */

/* ————   NAV BAR   ———————————————————————————————————————————————————————————————————————— */

.nav {
	position: fixed;
	top: 0; left: 0; right: 0;
	height: var(--nav-height);
	background: linear-gradient(to bottom,rgba(246, 246, 244, 0.9) 25%,rgba(246, 246, 244, 0.5));
	backdrop-filter: blur(16px);
	-webkit-backdrop-filter: blur(16px);
	border-bottom: 0.5px solid var(--color-parchment);
	z-index: 100;
	display: flex;
	align-items: center;
}
.nav__inner {
	display: flex;
	align-items: center;
	justify-content: space-between;
	width: 100%;
}
.nav__logo {
	font-family: var(--font-display);
	font-size: clamp(1.5em, 4vw, 2em);
	font-weight: 700;
	letter-spacing: -0.01em;
	color: var(--color-accent-deep);
	transition: color 0.15s, transform 0.25s ease;
}
.nav__logo:hover {
	color: var(--color-accent-soft);
	transform: scale(1.05);
}
.nav__links {
	display: flex;
	align-items: center;
	gap: 1vw;
	list-style: none;
}
.nav__link {
	font-family: var(--font-callout);
	font-size: clamp(0.7em, 1.5vw, 0.9em);
	font-weight: 700;
	letter-spacing: 0.1em;
	text-transform: uppercase;
	color: var(--color-accent);
	transition: color 0.25s ease, border 0.25s ease;
	padding: clamp(0.3em, 0.25vw, 0.6em);
	border-bottom: 0px solid transparent;
}
.nav__link:hover {
	color: var(--color-accent-soft);
	border-bottom: 2px solid var(--color-accent-soft);
}
.nav__link--active {
	color: var(--color-accent-deep);
	border-bottom: 2px solid var(--color-accent-deep);
}
.nav__menu-btn {
	display: none;
	flex-direction: column;
	gap: 5px;
	padding: 8px;
	cursor: pointer;
}
.nav__menu-btn span {
	display: block;
	width: 24px;
	height: 1.5px;
	border-radius: 1px;
	background: var(--color-ink);
	transition: all 0.3s var(--ease-expo);
}

/* ————   MOBILE NAV DRAWER   —————————————————————————————————————————————————————————————— */

.nav__drawer {
	position: fixed;
	display: flex;
	top: var(--nav-height);
	left: 0; right: 0; bottom: 0;
	height: calc(100vh - var(--nav-height) + 20px);
	background: transparent;
	overflow: hidden;
	display: flex;
	flex-direction: column;
	justify-content: flex-start;
	align-content: flex-start;
	align-items: center;
	padding: 0;
	gap: 0;
	border-top: 1px solid var(--color-rule);
	border-bottom: 1px solid var(--color-rule);
	z-index: 100;
	backdrop-filter: blur(0);
	-webkit-backdrop-filter: blur(0);
	transform: translateY(-150%);
	transition: transform 0s var(--ease-expo), background 0.5s var(--ease-expo), backdrop-filter 0.5s var(--ease-expo), -webkit-backdrop-filter 0.5s var(--ease-expo);
}
.nav__drawer--open {
	transform: translateY(-20px);
	background: color-mix(in srgb, var(--color-ink), transparent 25%);
	backdrop-filter: blur(32px);
	-webkit-backdrop-filter: blur(32px);
}
.nav__drawer-buttons {
	display: flex;
	flex-direction: column;
	justify-content: flex-start;
	top: 0;
	width: 100%;
	height: 100%;
	mix-blend-mode: lighten;
	transform: scaleY(100%) translateY(-100%);
	transition: transform 1s var(--ease-expo);
}
.nav__drawer--open .nav__drawer-buttons { transform: scaleY(100%) translateY(0); }

.nav__drawer-buttons .nav__link {
	flex: 0 0 1;
	display:inline-flex;
	vertical-align: middle;
	width: 100%;
	align-items: center;
	align-content: center;
	justify-content: center;
	font-size: 1.75em;
	letter-spacing: 0.1em;
	color: var(--color-body);
	padding: 5vh 2vh;
	background: color-mix(in srgb, var(--color-parchment), transparent 10%);
	border-top: 1px solid var(--color-rule);
	border-bottom: 1px solid var(--color-rule);
}
.nav__drawer-buttons .nav__link--active {
	flex: 0 0 1;
	display:inline-flex;
	vertical-align: middle;
	width: 100%;
	align-items: center;
	align-content: center;
	justify-content: center;
	font-size: 1.75em;
	letter-spacing: 0.1em;
	color: var(--color-ink);
	padding: 5vh 2vh;
	background: color-mix(in srgb, var(--color-rule), transparent 2%);
	border-top: 1px solid var(--color-muted);
	border-bottom: 1px solid var(--color-muted);
}
.nav__drawer-spacer {
	flex: 8;
	display:inline-flex;
}


/* ————————————————————————————————————————————————————————————————————————————————————————— */
/* ————————————————————————————————————————————————————————————————————————————————————————— */
/* ————   BUTTONS   ———————————————————————————————————————————————————————————————————————— */
/* ————————————————————————————————————————————————————————————————————————————————————————— */
/* ————————————————————————————————————————————————————————————————————————————————————————— */

.btn {
	display: inline-flex;
	align-items: center;
	justify-content: center;
	gap: 1em;
	font-family: var(--font-callout);
	font-size: clamp(0.9em, 1.5vw, 1em);
	font-weight: 700;
	letter-spacing: 0.1em;
	text-transform: uppercase;
	padding: clamp(0.5em, 0.75vw, 0.75em) 1.5em;
	transition: all 0.2s ease;
	cursor: pointer;
	white-space: nowrap;
}
.btn--primary {
	background: var(--color-accent);
	color: var(--color-rule-light);
	border: 2px solid var(--color-accent);
}
.btn--primary:hover {
	background: var(--color-accent-deep);
	border-color: var(--color-accent-deep);
	transform: scale(1.05);
}
.btn--secondary {
	background: color-mix(in srgb, var(--color-accent-soft), var(--color-parchment) 90%);
	color: var(--color-accent);
	border: 2px solid var(--color-accent);
}
.btn--secondary:hover {
	color: var(--color-accent-deep);
	border-color: var(--color-accent-deep);
	background: color-mix(in srgb, var(--color-accent-soft), var(--color-parchment));
	transform: scale(1.05);
}


/* ————————————————————————————————————————————————————————————————————————————————————————— */
/* ————————————————————————————————————————————————————————————————————————————————————————— */
/* ————   TAGS   ——————————————————————————————————————————————————————————————————————————— */
/* ————————————————————————————————————————————————————————————————————————————————————————— */
/* ————————————————————————————————————————————————————————————————————————————————————————— */

.tag {
	display: inline-block;
	font-family: var(--font-mono);
	font-size: 8.5px;
	font-weight: 500;
	letter-spacing: 0.15em;
	word-spacing: -0.25em;
	text-transform: uppercase;
	padding: 4px 10px;
	border-radius: 2px;
}
.tag--outline { border: 0.5px solid var(--color-rule); color: var(--color-secondary); }
.tag--accent { background: var(--color-accent); color: var(--color-parchment); }
.tag--ghost { background: var(--color-warm-base); color: var(--color-secondary); }


/* ————————————————————————————————————————————————————————————————————————————————————————— */
/* ————————————————————————————————————————————————————————————————————————————————————————— */
/* ————   WORK CARDS   ————————————————————————————————————————————————————————————————————— */
/* ————————————————————————————————————————————————————————————————————————————————————————— */
/* ————————————————————————————————————————————————————————————————————————————————————————— */

.work-grid {
	display: grid;
	grid-template-columns: repeat(2, 1fr);
	gap: 1.5em;
}
.work-card {
	display: block;
	cursor: pointer;
	text-decoration: none;
	margin-bottom: 0.75em;
}
.work-card__image-wrap {
	overflow: hidden;
	display: flex;
	background-color: color-mix(in srgb, var(--color-warm-base) 65%, var(--color-warm-base-hover));
	aspect-ratio: 8 / 5;
	margin-bottom: 0.75em;
	vertical-align: middle;
	text-align: center;
	align-items: center;
	padding: auto;
	position: relative;
	border: 2px solid var(--color-rule-light);
	box-shadow: 0.1em 0.1em 0.35em 0 rgba(0, 0, 0, 0.25);
	transition: transform 0.25s ease, box-shadow 0.25s ease;
}
.work-card:hover .work-card__image-wrap {
	transform: scale(1.025);
	box-shadow: 0.25em 0.25em 0.5em 0.25em rgba(0, 0, 0, 0.15);
}
.work-card__image-wrap img,
.work-card__placeholder {
	width: 100%;
	height: 100%;
	object-fit: cover;
	border-radius: 0;
	filter: grayscale(50%);
	transition: all 0.25s ease;
}
.work-card:hover .work-card__image-wrap img,
.work-card__placeholder {
	filter: none;
	transform: scale(1.05);
}
.work-card__placeholder {
	display: flex;
	flex-direction: column;
	align-items: center;
	justify-content: center;
	background-color: color-mix(in srgb, var(--color-warm-base) 65%, var(--color-warm-base-hover));
	gap: 0;
}
.work-card__placeholder-label {
	font-family: var(--font-mono);
	font-size: 0.75em;
	font-weight: 700;
	letter-spacing: 0.1em;
	word-spacing: -0.25em;
	text-transform: uppercase;
	color: var(--color-secondary);
	text-align: center;
	padding: 0 2em;
	line-height: 1.5;
}
.work-card__info {
	padding: 0 0.5em;
}
.work-card__client {
	display: flex;
	align-items: center;
	gap: 0.5em;
	margin: 0;
	padding: 0.5em 0;
	font-family: var(--font-callout);
	font-size: clamp(0.65em, 1.25vw, 0.75em);
	text-transform: uppercase;
	line-height: 1;
	transition: all 0.25s ease;
}

.work-card__client-name {
	font-weight: 800;
	letter-spacing: 0.1em;
	padding: 0;
	color: var(--color-secondary);
	transition: all 0.25s ease;
}
.work-card:hover .work-card__client-name { color: var(--color-accent); }

.work-card__client-date {
	font-weight: 600;
	letter-spacing: 0.05em;
	padding: 0;
	color: var(--color-secondary);
	transition: all 0.25s ease;
}
.work-card:hover .work-card__client-date { color: var(--color-accent-soft); }

.work-card__title {
	font-family: var(--font-display);
	font-size: clamp(1.25em, 1.5vw, 1.5em);
	font-weight: 700;
	letter-spacing: 0;
	line-height: 1.25;
	color: var(--color-ink);
	transition: all 0.25s ease;
	text-wrap: pretty;
}
.work-card:hover .work-card__title { color: var(--color-accent); transform: scale(1.025) translateX(0.1em) translateY(-0.1em); }

.work-card__tags {
	display: flex;
	flex-wrap: wrap;
	gap: 0.35em;
	margin: 0;
	padding: 0.5em 0;
	transition: all 0.25s ease;
}

.work-card__tag {
	display: inline-block;
	font-family: var(--font-mono);
	font-size: 0.6em;
	font-weight: 700;
	letter-spacing: 0.15em;
	word-spacing: -0.25em;
	text-transform: uppercase;
	color: var(--color-parchment);
	background-color: var(--color-muted);
	border: 1.5px solid var(--color-muted);
	padding: 0.25em 0.75em;
	line-height: 1;
	transition: all 0.25s ease;
}
.work-card:hover .work-card__tag { background-color: var(--color-accent); border: 1.5px solid var(--color-accent); }

.work-card__tag-inprogress {
	display: inline-block;
	font-family: var(--font-mono);
	font-size: 0.6em;
	font-weight: 700;
	font-style: italic;
	letter-spacing: 0.1em;
	word-spacing: -0.25em;
	text-transform: uppercase;
	color: var(--color-muted);
	background-color: transparent;
	border: 1.5px solid var(--color-muted);
	padding: 0.25em 0.75em;
	line-height: 1;
	transition: all 0.25s ease;
}
.work-card:hover .work-card__tag-inprogress { color: var(--color-accent); border: 1.5px solid var(--color-accent); }

/* ————   PLACEHOLDER BLOCK   —————————————————————————————————————————————————————————————— */

.placeholder-block {
	background: var(--color-warm-base);
	border: 1px dashed var(--color-rule);
	padding: 32px 24px;
	display: flex;
	flex-direction: column;
	align-items: center;
	justify-content: center;
	text-align: center;
	gap: 8px;
	min-height: 160px;
}
.placeholder-block__icon {
	width: 32px;
	height: 32px;
	border: 1px dashed var(--color-rule);
	border-radius: 50%;
	display: flex;
	align-items: center;
	justify-content: center;
	color: var(--color-muted);
	font-size: 16px;
	margin-bottom: 4px;
}
.placeholder-block__text {
	font-family: var(--font-mono);
	font-size: 9px;
	letter-spacing: 0.15em;
	word-spacing: -0.25em;
	text-transform: uppercase;
	color: var(--color-muted);
	line-height: 1.7;
}


/* ————————————————————————————————————————————————————————————————————————————————————————— */
/* ————————————————————————————————————————————————————————————————————————————————————————— */
/* ————   PULL QUOTES   ———————————————————————————————————————————————————————————————————— */
/* ————————————————————————————————————————————————————————————————————————————————————————— */
/* ————————————————————————————————————————————————————————————————————————————————————————— */

.pull-section {
	display: flex;
	flex-direction: column;
	justify-content: center;
	position: relative;
	/* Gradient: accent at edges, accent-tint across center */
	background: linear-gradient(
	  to right,
	  var(--color-accent-deep)      0%,
	  color-mix(in srgb, var(--color-accent) 40%, var(--color-accent-deep)) 25%,
	  color-mix(in srgb, var(--color-accent) 40%, var(--color-accent-deep)) 75%,
	  var(--color-accent-deep)      100%
	);
	border-top:    2px solid var(--color-accent-deep);
	border-bottom: 2px solid var(--color-accent-deep);
	padding: clamp(5vh, 5vw, 7.5vh) 0;
	overflow: hidden;
	vertical-align: middle;
}
.pull-section::before {
	content: '';
	position: absolute;
	inset: -40% 0;
	background-image: url('assets/LogoMark-pattern3.svg');
	background-size: 4em;
	background-position: 0 var(--pull-pattern-y, 0px);
	background-repeat: repeat;
	opacity: calc(0.6 * var(--pull-pattern-fade, 1));
	pointer-events: none;
}
.pull-section__inner {
	display: block;
	max-width: calc(var(--max-width) * 0.7);
	margin: auto auto;
	padding: 1em 4.5vw;
	border-left: 0.5vw solid var(--color-gold);
}
.pull-section__source {
	margin: 1.5em 0 0.5em;
	font-family: var(--font-callout);
	font-size: clamp(0.8em, 1.5vw, 1em);
	font-weight: 700;
	letter-spacing: 0.1em;
	line-height: 1;
	text-transform: uppercase;
	color: var(--color-gold);
}


/* ————————————————————————————————————————————————————————————————————————————————————————— */
/* ————————————————————————————————————————————————————————————————————————————————————————— */
/* ————   FOOTER ——————————————————————————————————————————————————————————————————————————— */
/* ————————————————————————————————————————————————————————————————————————————————————————— */
/* ————————————————————————————————————————————————————————————————————————————————————————— */

.footer {
	min-height: var(--footer-height);
	background: var(--color-accent-dark);
	color: #fff;
	padding: clamp(3vh, 2vw, 4vh) 0 clamp(4vh, 3vw, 5vh);
}
.footer__inner {
	display: flex;
	justify-content: space-between;
	align-items: center;
	gap: 2vh clamp(1.5vh, 1.5vw, 3vh);
	margin-bottom: 1em;
}
.footer__name {
	display: flex;
	align-items: center;
	grid-column: 1;
	grid-row: 1;
}

.footer__logo-img {
	height: clamp(3em, 5vw, 3.5em);
	width: auto;
	display: block;
}
.footer__links {
	display: flex;
	gap: clamp(3vh, 3vh, 2vw);
	list-style: none;
	justify-content: flex-end;
	grid-column: 2;
	grid-row: 1;
}
.footer__link {
	font-family: var(--font-callout);
	font-size: clamp(0.75em, 1.5vw, 0.8em);
	font-weight: 600;
	letter-spacing: 0.1em;
	text-transform: uppercase;
	color: color-mix(in srgb, var(--color-accent-dark) 25%, var(--color-accent-tint));
	transition: color 0.2s;
}
.footer__link:hover { color: var(--color-gold); }

.footer__copy {
	font-family: var(--font-mono);
	font-size: 0.55em;
	letter-spacing: 0.15em;
	word-spacing: -0.25em;
	text-transform: uppercase;
	color: color-mix(in srgb,var(--color-accent-dark) 45%,var(--color-accent-tint));
	text-align: center;
	padding: clamp(1.5vh, 1vw, 2vh) 0 0;
}


/* ————————————————————————————————————————————————————————————————————————————————————————— */
/* ————————————————————————————————————————————————————————————————————————————————————————— */
/* ————   FOCUS STATES   ——————————————————————————————————————————————————————————————————— */
/* ————————————————————————————————————————————————————————————————————————————————————————— */
/* ————————————————————————————————————————————————————————————————————————————————————————— */

:focus-visible {
	outline: 2px solid var(--color-accent);
	outline-offset: 2px;
}





/*********************************************************************************************/
/*********************************************************************************************/
/*********************************************************************************************/
/*********************************************************************************************/
/*********************************************************************************************/
/*********************************************************************************************/
/*********************************************************************************************/
/****                                                                                     ****/
/****   HOME PAGE                                                                         ****/
/****                                                                                     ****/
/*********************************************************************************************/
/*********************************************************************************************/
/*********************************************************************************************/
/*********************************************************************************************/
/*********************************************************************************************/
/*********************************************************************************************/
/*********************************************************************************************/


/* ————————————————————————————————————————————————————————————————————————————————————————— */
/* ————————————————————————————————————————————————————————————————————————————————————————— */
/* ————   HERO SECTION   ——————————————————————————————————————————————————————————————————— */
/* ————————————————————————————————————————————————————————————————————————————————————————— */
/* ————————————————————————————————————————————————————————————————————————————————————————— */

.hero {
	min-height: 100vh;
	display: flex;
	align-items: center;
	padding: var(--nav-height) 0 0;
	position: relative;
	background: var(--color-parchment);
}
.hero__flex {
	display: flex;
	flex-direction: row;
	align-items: flex-start;
	gap: clamp(2em, 5vw, 4em);
	width: 100%;
}

/* ————   HERO DOT   ——————————————————————————————————————————————————————————————————————— */

.hero__dot-col {
	flex-shrink: 0;
	display: flex;
	align-items: flex-start;
	position: relative;
	z-index: 2;
}
.hero__dot-wrap {
	position: relative;
	display: inline-flex;
	border-radius: 50%;
	cursor: pointer;
	transition: transform 0.35s cubic-bezier(0.34, 1.56, 0.64, 1);
	width:  clamp(100px, 12vw, 180px);
	height: clamp(100px, 12vw, 180px);
}
.hero__dot-wrap:hover:not(.hero__dot-wrap--spinning) {
	transform: scale(1.07);
}
.hero__dot {
	display: block;
	width: 100%;
	height: 100%;
	opacity: 0;
	pointer-events: none;
	will-change: transform;
}
.hero__dot--entrance {
	animation: heroSpinFadeIn 0.9s cubic-bezier(0.22, 1, 0.36, 1) both;
}
.hero__dot--settled {
	animation: none;
	opacity: 1;
}
.hero__dot-wrap:hover:not(.hero__dot-wrap--spinning) .hero__dot--settled {
	animation: heroDotWiggle 0.5s cubic-bezier(0.22, 1, 0.36, 1);
}
.hero__dot-wrap--spinning {
	animation: heroClickSpin 1.25s forwards !important;
	cursor: default;
	z-index: 10;
}
.hero__dot-wrap--spinning .hero__dot,
.hero__dot-wrap--spinning .hero__dot--settled {
	animation: none !important;
}

/* ————   HERO CONTENT   ——————————————————————————————————————————————————————————————————— */

.hero__content {
	flex: 1;
	height: 100%;
	display: flex;
	flex-direction: column;
	align-content: flex-start;
	justify-content: flex-start;
	gap: 2em;
	min-width: 0;
	position: relative;
	z-index: 1;
	text-wrap: balance;
}
.hero__eyebrow {
	margin-bottom: -1em;
	opacity: 0;
	transform: translateY(1em);
	animation: fadeUp 0.6s var(--ease-expo) 0.1s forwards;
}
.hero__name {
	margin: 0;
	padding-bottom: 0.5em;
	opacity: 0;
	transform: translateY(1.25em);
	animation: fadeUp 0.7s var(--ease-expo) 0.2s forwards;
}
.hero__wordmark {
	display: block;
	width: 75%;
	min-width: 300px;
	height: auto;
}
.hero__rule {
	display: inline-block;
	width: 0;
	height: 0.25em;
	background: var(--color-gold);
	margin: 0;
	animation: ruleExpand 0.6s var(--ease-out) 0.7s forwards;
}
.hero__tagline {
	font-family: var(--font-display);
	font-size: clamp(1.5em, 3vw, 1.85em);
	font-style: italic;
	font-weight: 500;
	line-height: 1;
	color: var(--color-accent);
	margin-bottom: -0.5em;
	opacity: 0;
	transform: translateY(1.5em);
	animation: fadeUp 0.6s var(--ease-expo) 0.5s forwards;
}
.hero__body {
	display: inline-block;
	max-width: 75%;
	opacity: 0;
	transform: translateY(1.75em);
	animation: fadeUp 0.6s var(--ease-expo) 0.65s forwards;
}
.hero__cta {
	flex: auto;
	margin-top: 3em;
	display: flex;
	gap: 12px;
	flex-wrap: wrap;
	opacity: 0;
	transform: translateY(2em);
	animation: fadeUp 0.6s var(--ease-expo) 0.8s forwards;
}
.hero__scroll {
	position: absolute;
	bottom: 3em;
	left: 50%;
	transform: translate(-50%, 2em);
	display: flex;
	flex-direction: column;
	align-items: center;
	gap: 8px;
	opacity: 0;
	animation: scrollFadeUp 0.8s var(--ease-expo) 1.0s forwards;
}
.hero__scroll-line {
	width: 2px;
	height: 2.5em;
	background: var(--color-rule);
	position: relative;
	overflow: hidden;
}
.hero__scroll-line::after {
	content: '';
	position: absolute;
	top: -100%;
	left: 0;
	width: 100%;
	height: 100%;
	background: var(--color-accent);
	animation: scrollLine 1.6s ease-in-out 1.4s infinite;
}


/* ————————————————————————————————————————————————————————————————————————————————————————— */
/* ————————————————————————————————————————————————————————————————————————————————————————— */
/* ————   SECTION HEADER   ————————————————————————————————————————————————————————————————— */
/* ————————————————————————————————————————————————————————————————————————————————————————— */
/* ————————————————————————————————————————————————————————————————————————————————————————— */

.section-header {
	display: block;
	padding-bottom: 2em;
	border-bottom: 1px solid var(--color-rule);
	margin-bottom: 2em;
}


/* ————————————————————————————————————————————————————————————————————————————————————————— */
/* ————————————————————————————————————————————————————————————————————————————————————————— */
/* ————   CAPABILITIES STRIP   ————————————————————————————————————————————————————————————— */
/* ————————————————————————————————————————————————————————————————————————————————————————— */
/* ————————————————————————————————————————————————————————————————————————————————————————— */

.capabilities {
	position: relative;
	/* Gradient: accent at edges, accent-tint across center */
	background: linear-gradient(
	  to right,
	  var(--color-accent-soft)      0%,
	  color-mix(in srgb, var(--color-accent-soft) 60%, var(--color-accent-tint)) 15%,
	  color-mix(in srgb, var(--color-accent-soft) 60%, var(--color-accent-tint)) 85%,
	  var(--color-accent-soft)      100%
	);
	border-top:    2px solid var(--color-accent);
	border-bottom: 2px solid var(--color-accent);
	padding: clamp(5vh, 5vw, 7.5vh) 0;
	overflow: hidden;
}
.capabilities::before {
	content: '';
	position: absolute;
	inset: -40%;
	background-image:
	  url('assets/LogoMark-pattern1.svg');
	background-size: clamp(3em, 5vw, 10em);
	background-position: var(--cap-pattern-x, 0px) var(--cap-pattern-y, 0px);
	background-repeat: repeat;
	opacity: calc(0.6 * var(--cap-pattern-fade, 1));
	pointer-events: none;
}
.capabilities__grid {
	position: relative;
	z-index: 1;
	display: grid;
	grid-template-columns: repeat(4, 1fr);
	gap: 1em;
	perspective: 900px;
}
.capabilities__item {
	display: flex;
	flex-direction: column;
	justify-content: flex-end;
	min-height: 15vh;
	background: linear-gradient(to bottom, var(--color-accent) 0%, var(--color-accent-deep) 100%);;
	border: 1.5px solid var(--color-rule-light);
	padding: clamp(1.5em, 2vw, 3em) clamp(1em, 1.5vw, 2em) clamp(1em, 1.5vw, 2em);
	box-shadow: 0 0.5em 0.75em rgba(29, 81, 94, 0.75);
	cursor: default;
	transform-style: preserve-3d;
	will-change: transform;
	/* Hover tilt is set via JS    this transition covers the spring-back */
	transition: transform 0.45s cubic-bezier(0.34, 1.56, 0.64, 1);
}
.capabilities__item.cap-hidden { opacity: 0; transform: rotateY(-90deg) scale(0.85); }
.capabilities__item.cap-flip { animation: capFlipIn 1.2s cubic-bezier(0.22, 1, 0.36, 1) both; }
.capabilities__item.cap-flip:nth-child(2) { animation-delay: 0.15s; }
.capabilities__item.cap-flip:nth-child(3) { animation-delay: 0.30s; }
.capabilities__item.cap-flip:nth-child(4) { animation-delay: 0.45s; }
.capabilities__item.cap-flip-out { animation: capFlipOut 0.7s cubic-bezier(0.55, 0, 1, 0.45) both; }
.capabilities__item.cap-flip-out:nth-child(2) { animation-delay: 0.08s; }
.capabilities__item.cap-flip-out:nth-child(3) { animation-delay: 0.16s; }
.capabilities__item.cap-flip-out:nth-child(4) { animation-delay: 0.24s; }
.capabilities__item.cap-wobble { animation: capWobbleBack 1.25s ease-out both; }

@keyframes capFlipIn {
	0%   { opacity: 0; transform: rotateY(-90deg) scale(0.85); }
	50%  { opacity: 1; transform: rotateY(8deg)   scale(1.02); }
	70%  { transform: rotateY(-4deg) scale(0.99); }
	88%  { transform: rotateY(2deg)  scale(1); }
	100% { opacity: 1; transform: rotateY(0deg)   scale(1); }
}
@keyframes capFlipOut {
	0%   { opacity: 1; transform: rotateY(0deg)   scale(1); }
	100% { opacity: 0; transform: rotateY(90deg)  scale(0.85); }
}
@keyframes capWobbleBack {
	0%   { transform: rotateY(calc(var(--cap-tilt, 0) * 1deg))    translateY(calc(var(--cap-lift, 0) * 1px)); }
	25%  { transform: rotateY(calc(var(--cap-tilt, 0) * -0.45deg)) translateY(0); }
	50%  { transform: rotateY(calc(var(--cap-tilt, 0) * 0.2deg))   translateY(0); }
	75%  { transform: rotateY(calc(var(--cap-tilt, 0) * -0.08deg)) translateY(0); }
	100% { transform: rotateY(0deg) translateY(0); }
}

.capabilities__num {
	flex: 1;
	justify-content: center;
	align-items: center;
	align-content: center;
	font-family: 'Crimson Pro', 'Literata', Serif;
	font-size: clamp(2.75em, 10vw, 4em);
	font-weight: 800;
	letter-spacing: 0;
	color: var(--color-parchment);
	line-height: 1;
	margin-bottom: clamp(0.25em, 2vw, 0.5em);
}
.capabilities__label {
	flex: 1;
	justify-content: center;
	align-items: center;
	align-content: center;
	font-family: var(--font-mono);
	font-size: clamp(0.7em, 2vw, 0.8em);
	font-weight: 700;
	letter-spacing: 0.15em;
	word-spacing: -0.25em;
	text-transform: uppercase;
	color: var(--color-gold);
	line-height: 1.5;
	text-wrap: pretty;
}


/* ————————————————————————————————————————————————————————————————————————————————————————— */
/* ————————————————————————————————————————————————————————————————————————————————————————— */
/* ————   CURRENT ROLE SECTION ————————————————————————————————————————————————————————————— */
/* ————————————————————————————————————————————————————————————————————————————————————————— */
/* ————————————————————————————————————————————————————————————————————————————————————————— */

.context-sub {
	display: flex;
	align-items: baseline;
	gap: 0.5em;
	margin: 0.75em 0 0;
}
.context-sub__company {
	font-family: var(--font-body);
	font-weight: 700;
	font-size: clamp(1.05em, 1.5vw, 1.2em);
	letter-spacing: 0.05em;
	color: var(--color-accent-deep);
	padding: 0;
	transition: all 0.25s ease;
	text-transform: none;
	line-height: 1;
}
.context-sub__location {
	font-family: var(--font-callout);
	font-weight: 700;
	font-size: clamp(0.75em, 1.5vw, 0.9em);
	letter-spacing: 0.05em;
	color: var(--color-accent-soft);
	padding: 0;
	transition: all 0.25s ease;
	text-transform: uppercase;
	line-height: 1;
}
.context-grid {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 5vw;
  align-items: stretch;
}
.context-grid__left {
  display: flex;
  flex-direction: column;
  justify-content: space-between;
  gap: 5vw;
}
.context-grid__left .btn {
  align-self: flex-end;
}
.context-grid__right {
  display: flex;
  flex-direction: column;
  gap: 0.75em;
}
.context-card {
	display: flex;
	flex-direction: row;
	justify-content: flex-start;
	align-content: stretch;
	gap: 4px;
	background: var(--color-accent);
	padding: 4px;
	border: 0 solid var(--color-accent);
	transition: all 0.25s ease;
}
.context-card:hover {
	transform: scale(1.05); gap: 0;
}
.context-card-icon {
	display: flex;
	align-items: flex-start;
	padding: 0.75em 0.25em;
	height: auto;
	width: 6em;
	transition: all 0.25s ease;
}
.context-card:hover .context-card-icon {
	padding: 0.25em 0;
	width: 7.5em;
}
.context-card-img { width: 100%; height: auto; object-fit: fill; object-position: left top; }

.context-card-inner {
	display: flex;
	flex-direction: column;
	justify-content: flex-start;
  background: var(--color-tint);
  padding: 1em 1.5em;
}
.context-card__heading {
  font-family: var(--font-callout);
  font-size: 1.25em;
  font-weight: 700;
  letter-spacing: 0.05em;
  text-transform: uppercase;
  color: var(--color-accent);
  margin-bottom: 8px;
}





/*********************************************************************************************/
/*********************************************************************************************/
/*********************************************************************************************/
/*********************************************************************************************/
/*********************************************************************************************/
/*********************************************************************************************/
/*********************************************************************************************/
/****                                                                                     ****/
/****   WORK PAGES                                                                        ****/
/****                                                                                     ****/
/*********************************************************************************************/
/*********************************************************************************************/
/*********************************************************************************************/
/*********************************************************************************************/
/*********************************************************************************************/
/*********************************************************************************************/
/*********************************************************************************************/


/* ————————————————————————————————————————————————————————————————————————————————————————— */
/* ————————————————————————————————————————————————————————————————————————————————————————— */
/* ————   FILTER TABS   ———————————————————————————————————————————————————————————————————— */
/* ————————————————————————————————————————————————————————————————————————————————————————— */
/* ————————————————————————————————————————————————————————————————————————————————————————— */

.filter-bar {
	display: flex;
	gap: 0;
	border-bottom: 0.5px solid var(--color-rule);
	margin-bottom: 48px;
	overflow-x: auto;
	-webkit-overflow-scrolling: touch;
	scrollbar-width: none;
}
.filter-bar::-webkit-scrollbar { display: none; }

.filter-tab {
	font-family: var(--font-mono);
	font-size: 9px;
	letter-spacing: 0.15em;
	word-spacing: -0.25em;
	text-transform: uppercase;
	color: var(--color-muted);
	padding: 14px 20px;
	border-bottom: 1.5px solid transparent;
	cursor: pointer;
	white-space: nowrap;
	transition: all 0.2s;
	background: none;
	border-top: none;
	border-left: none;
	border-right: none;
}
.filter-tab:hover { color: var(--color-ink); }
.filter-tab--active {
	color: var(--color-accent);
	border-bottom-color: var(--color-accent);
}

/* ————————————————————————————————————————————————————————————————————————————————————————— */
/* ————————————————————————————————————————————————————————————————————————————————————————— */
/* ————   CASE STUDIES   ——————————————————————————————————————————————————————————————————— */
/* ————————————————————————————————————————————————————————————————————————————————————————— */
/* ————————————————————————————————————————————————————————————————————————————————————————— */

.cs-hero {
	min-height: 60vh;
	background: var(--color-warm-base);
	display: flex;
	align-items: flex-end;
	padding-top: var(--nav-height);
	position: relative;
	overflow: hidden;
}
.cs-hero__image {
	position: absolute;
	inset: 0;
	object-fit: cover;
	opacity: 0.4;
}
.cs-hero__content {
	position: relative;
	z-index: 1;
	width: 100%;
	padding: 48px 0;
	border-top: 0.5px solid var(--color-rule);
	background: linear-gradient(to top, var(--color-parchment) 0%, transparent 100%);
}
.cs-meta-grid {
	display: grid;
	grid-template-columns: repeat(4, 1fr);
	gap: 24px;
	margin-top: 24px;
	padding-top: 24px;
	border-top: 0.5px solid var(--color-rule);
}
.cs-meta__label {
	font-family: var(--font-mono);
	font-size: 8.5px;
	letter-spacing: 0.15em;
	word-spacing: -0.25em;
	text-transform: uppercase;
	color: var(--color-muted);
	margin-bottom: 4px;
}
.cs-meta__value {
	font-family: var(--font-body);
	font-size: 14px;
	color: var(--color-ink);
	font-weight: 400;
}
.cs-body {
	max-width: 720px;
	margin: 0 auto;
}
.cs-section { margin-bottom: 72px; }
.cs-section__label {
	font-family: var(--font-mono);
	font-size: 9px;
	letter-spacing: 0.2em;
	word-spacing: -0.25em;
	text-transform: uppercase;
	color: var(--color-accent);
	margin-bottom: 20px;
	display: flex;
	align-items: center;
	gap: 12px;
}
.cs-section__label::after {
	content: '';
	flex: 1;
	height: 0.5px;
	background: var(--color-rule);
}
.cs-key-decision {
	background: var(--color-warm-base);
	padding: 28px 28px 28px 24px;
	border-left: 3px solid var(--color-accent);
	margin: 32px 0;
}
.cs-key-decision__num {
	font-family: var(--font-display);
	font-size: 11px;
	font-weight: 900;
	color: var(--color-accent);
	letter-spacing: 0.05em;
	margin-bottom: 6px;
}
.cs-key-decision__title {
	font-family: var(--font-display);
	font-size: 18px;
	font-weight: 700;
	color: var(--color-ink);
	margin-bottom: 10px;
	letter-spacing: -0.01em;
}
.cs-metrics {
	display: grid;
	grid-template-columns: repeat(3, 1fr);
	gap: 2px;
	margin: 40px 0;
}
.cs-metric {
	background: var(--color-warm-base);
	padding: 28px 24px;
	text-align: center;
}
.cs-metric__num {
	font-family: var(--font-display);
	font-size: clamp(36px, 4vw, 52px);
	font-weight: 900;
	letter-spacing: -0.03em;
	color: var(--color-ink);
	line-height: 1;
	margin-bottom: 8px;
}
.cs-metric__label {
	font-family: var(--font-mono);
	font-size: 9px;
	letter-spacing: 0.15em;
	word-spacing: -0.25em;
	text-transform: uppercase;
	color: var(--color-muted);
	line-height: 1.5;
}
.cs-nav {
	display: flex;
	justify-content: space-between;
	align-items: stretch;
	border-top: 0.5px solid var(--color-rule);
	margin-top: 96px;
	padding-top: 0;
}
.cs-nav__item {
	flex: 1;
	padding: 32px 0;
	display: flex;
	flex-direction: column;
	gap: 8px;
	transition: color 0.2s;
}
.cs-nav__item:last-child { text-align: right; align-items: flex-end; border-left: 0.5px solid var(--color-rule); padding-left: 32px; }
.cs-nav__item:first-child { padding-right: 32px; }
.cs-nav__item:hover .cs-nav__title { color: var(--color-accent); }
.cs-nav__dir {
	font-family: var(--font-mono);
	font-size: 9px;
	letter-spacing: 0.15em;
	word-spacing: -0.25em;
	text-transform: uppercase;
	color: var(--color-muted);
}
.cs-nav__title {
	font-family: var(--font-display);
	font-size: 16px;
	font-weight: 700;
	color: var(--color-ink);
	letter-spacing: -0.01em;
	transition: color 0.2s;
}





/*********************************************************************************************/
/*********************************************************************************************/
/*********************************************************************************************/
/*********************************************************************************************/
/*********************************************************************************************/
/*********************************************************************************************/
/*********************************************************************************************/
/****                                                                                     ****/
/****   ABOUT PAGE                                                                        ****/
/****                                                                                     ****/
/*********************************************************************************************/
/*********************************************************************************************/
/*********************************************************************************************/
/*********************************************************************************************/
/*********************************************************************************************/
/*********************************************************************************************/
/*********************************************************************************************/


/* ————————————————————————————————————————————————————————————————————————————————————————— */
/* ————————————————————————————————————————————————————————————————————————————————————————— */
/* ————   TOP/BIO SECTION   ———————————————————————————————————————————————————————————————— */
/* ————————————————————————————————————————————————————————————————————————————————————————— */
/* ————————————————————————————————————————————————————————————————————————————————————————— */

.about-grid {
	display: flex;
	flex-direction: row;
	align-items: stretch;
	align-content: flex-end;
	justify-content: flex-end;
	gap: clamp(40px,2.5vw,60px);
	padding: 0 0 80px;
	margin: -20px 0 0;
	text-wrap: pretty;
}
.about_top-left {
	flex: 1 1 35%;
	display: flex;
	flex-direction: column;
	align-content: flex-end;
	justify-content: flex-start;
}
/* The .reveal wrapper inside .about_top-left holds eyebrow + principles + CTA.
   Make it a flex column that grows to fill the rest of the left column, so the
   CTA's `margin-top: auto` can bottom-anchor against the column's bottom edge. */
.about_top-left > .reveal:not(.about-photo) {
	flex: 1 1 auto;
	display: flex;
	flex-direction: column;
	align-items: stretch;
}
.about_top-right {
	flex: 1 1 65%;
	display: flex;
	flex-direction: column;
	align-items: flex-start;
	align-content: flex-start;
	justify-content: flex-start;
	padding: 0;
	margin: 0;
	gap: 2em;
}


/* ————————————————————————————————————————————————————————————————————————————————————————— */
/* ————   TOP-LEFT SECTION   ——————————————————————————————————————————————————————————————— */
/* ————————————————————————————————————————————————————————————————————————————————————————— */

.about-photo {
	aspect-ratio: 3 / 4;
	flex: 0 0 auto;
	background-image: url(assets/portrait.png);
	background-size: cover;
	background-position: 50% 50%;
	background-repeat: no-repeat;
	overflow: hidden;
	position: sticky;
	top: calc(var(--nav-height) + 2vw);
}
.about-grid .t-eyebrow {
	margin: clamp(-0.05vw,calc(60px - 2vw),0) -0.2px 0;
	padding: 32px 0 12px;
	border-bottom: 2px solid var(--color-muted);
	border-top: clamp(2.5px,0.25vw,3px) solid var(--color-accent-deep);
	background: var(--color-parchment);
}

/* ————   PRINCIPLES CARDS   ——————————————————————————————————————————————————————————————— */

.principles {
	flex: 0;
	display: inline-flex;
	flex-direction: column;
	align-content: flex-start;
	justify-content: flex-start;
	margin: 0 -0.2px;
	padding: 0 0 clamp(12px,calc(60px - 2vw),36px);
	background: var(--color-parchment);
}
.principle {
	padding: clamp(20px,calc(60px - 2vw),32px) 8px clamp(20px,calc(60px - 2vw),32px);
	border-bottom: 1px solid var(--color-muted);
	display: grid;
	grid-template-columns: 48px 1fr;
	gap: 8px;
	align-items: start;
}
.principle:last-child {
	border-bottom: none;
}
.principle__num {
	font-family: var(--font-callout);
	font-size: 44px;
	font-weight: 700;
	letter-spacing: 0.025em;
	color: var(--color-gold);
	line-height: 1;
}
.principle__title {
	font-family: var(--font-display);
	font-size: 18px;
	line-height: 1.1;
	font-weight: 700;
	color: var(--color-accent);
	letter-spacing: -0.01em;
	margin-bottom: 12px;
}
.principle__copy {
	font-family: var(--font-body);
	font-size: 0.85em;
	font-weight: 500;
	line-height: 1.35;
	color: var(--color-body);
}

/* ————   CTA BUTTONS   ———————————————————————————————————————————————————————————————————— */

.about-cta {
	flex: 1 1 auto;
	display: inline-flex;
	width: 100%;
	flex-direction: column-reverse;
	justify-content: flex-end;
	align-content: stretch;
	align-items: center;
	gap: 12px;
	margin: auto auto 0;
	padding: 20px 0 0;
	background: var(--color-parchment);
}
.about-cta .btn { flex: 0; text-align: center; width: 100%; }


/* ————————————————————————————————————————————————————————————————————————————————————————— */
/* ————   TOP-RIGHT SECTION   —————————————————————————————————————————————————————————————— */
/* ————————————————————————————————————————————————————————————————————————————————————————— */

.about_top-right .about-photo {
	display: none;
}
.about-header {
	/* Grow vertically inside the right column so the body below it
	   bottom-anchors against the left column's CTA bottom. */
	flex: 1 1 auto;
	display: flex;
	flex-direction: row;
	align-items: center;
	align-content: flex-end;
	justify-content: flex-end;
	margin: clamp(108px,calc(180px - 2vw),128px) 0 0;
	padding: 0;
}
.about-grid .t-headline {
	flex: 3;
	display: inline-flex;
	width: fit-content;
	align-items: center;
	align-content: flex-start;
	justify-content: flex-start;
	font-family: var(--font-display);
	font-size: clamp(1.5em, 4vw, 2.75em);
	font-weight: 700;
	letter-spacing: 0;
	line-height: clamp(1.25,calc(1.5 - 0.5vw),1.75);
	color: var(--color-accent);
	margin: 0;
}
.about-header-spacer {
	/* The spacer occupies 1/4 of the header row so the headline only
	   takes 3/4 of the width — that's how it 'hugs in' and wraps to
	   more lines, filling the vertical space the right column owns. */
	flex: 1 1 0;
	min-width: 0;
	border: none;
	padding: 0;
	margin: 0;
}
.about-body {
	display: flex;
	flex-direction: column;
	align-items: stretch;
	align-content: flex-start;
	justify-content: center;
	gap: clamp(0.9em,2vw,1.25em);
	padding: 0;
	margin: 0;
}
.about-grid .t-body {
	display: inline-flex;
	font-size: 1em;
	line-height: 1.35;
	width: fit-content;
}


/* ————————————————————————————————————————————————————————————————————————————————————————— */
/* ————————————————————————————————————————————————————————————————————————————————————————— */
/* ————————————————————————————————————————————————————————————————————————————————————————— */
/* ————   RESUME SECTION (BOTTOM)   ———————————————————————————————————————————————————————— */
/* ————————————————————————————————————————————————————————————————————————————————————————— */
/* ————————————————————————————————————————————————————————————————————————————————————————— */
/* ————————————————————————————————————————————————————————————————————————————————————————— */

.experience-grid {
	display: flex;
	flex-direction: row;
	align-items: stretch;
	align-content: flex-start;
	justify-content: space-between;
	gap: clamp(60px,2.5vw,80px);
	padding: 0;
	margin: 0;
}


/* ————————————————————————————————————————————————————————————————————————————————————————— */
/* ————   EXPERIENCE CONTENT (LEFT)   —————————————————————————————————————————————————————— */
/* ————————————————————————————————————————————————————————————————————————————————————————— */

.experience-content {
	flex: 1 1 65%;
	display: flex;
	flex-direction: column;
	align-items: flex-start;
	align-content: flex-start;
	justify-content: flex-start;
	padding: 24px 0 32px;
	margin: 0;
}
.experience-work {
	display: flex;
	flex-direction: column;
	align-content: flex-start;
	justify-content: flex-start;
	gap: 2em;
	width: 100%;
	margin: 0;
	padding: 0.5em 0;
}
.experience-edu {
	display: flex;
	flex-direction: column;
	align-content: flex-start;
	justify-content: flex-start;
	gap: 1em;
	width: 100%;
	margin: 0;
}

/* ————   WORK EXPERIENCE SECTION   ———————————————————————————————————————————————————————— */

.experience__heading {
	font-family: var(--font-display);
	font-size: clamp(1.5em, 3vw, 1.75em);
	font-weight: 700;
	color: var(--color-accent);
	letter-spacing: 0;
	margin: 2em 0 1.5em;
}
.experience__heading:first-child {
	margin-top: 0;
}
.experience-entry {
	margin: 0;
	padding: 0;
}
.experience-entry__header {
	display: flex;
	justify-content: space-between;
	align-items: baseline;
	gap: 1em;
	margin: 0 0 0.5em;
	padding: 0 0.5em 0.5em;
	border-bottom: 3px solid var(--color-gold);
}
.experience-entry__company {
	font-family: var(--font-body);
	font-size: 1.25em;
	font-weight: 600;
	color: var(--color-ink);
	letter-spacing: 0;
	line-height: 1;
}
.experience-entry__location {
	font-family: var(--font-callout);
	font-size: 0.9em;
	font-weight: 700;
	letter-spacing: 0.1em;
	text-transform: uppercase;
	text-align: right;
	color: var(--color-secondary);
	letter-spacing: 0;
	line-height: 1;
}
.experience-role {
	display: block;
	gap: 0.5em;
	font-family: var(--font-body);
	font-size: 1.1em;
	line-height: 1;
	font-weight: 800;
	color: var(--color-accent);
	padding: 0.25em 0.5em;
}
.experience-role__date {
	display: inline-block;
	font-family: var(--font-callout);
	font-size: 0.8em;
	font-weight: 800;
	letter-spacing: 0.025em;
	text-transform: uppercase;
	color: var(--color-accent-soft);
	white-space: nowrap;
	padding-left: 0.5em;
}
.experience-bullets {
	list-style: disc;
	padding-left: 2em;
	margin: 0.5em 0 1em;
	text-wrap: pretty;
}
.experience-bullets li {
	font-family: var(--font-body);
	font-size: 0.95em;
	font-weight: 500;
	color: var(--color-body);
	line-height: 1.5;
	margin-bottom: 0.5em;
}
.experience-bullets li::marker {
	color: color-mix(in srgb,var(--color-accent),var(--color-accent-soft));
	font-size: 1.15em;
	font-weight: 900;
}
.experience-clients {
	padding: 0.5em 0.5em 0;
}
.experience-client__item {
	margin-bottom: 1em;
}
.experience-client__item:last-child {
	margin-bottom: 0;
}
.experience-client__row {
	display: flex;
	flex-wrap: wrap;
	align-items: baseline;
	gap: 0.5em;
	margin: 0;
}
.experience-client__name {
	font-family: var(--font-body);
	font-size: 1.1em;
	line-height: 1;
	font-weight: 800;
	color: var(--color-accent);
}
.experience-client__meta {
	display: inline-block;
	font-family: var(--font-callout);
	font-size: 0.8em;
	font-weight: 700;
	letter-spacing: 0.025em;
	text-transform: uppercase;
	color: var(--color-secondary);
	white-space: nowrap;
	padding-left: 0.25em;
}
.experience-client__date {
	display: inline-block;
	font-family: var(--font-callout);
	font-size: 0.8em;
	font-weight: 800;
	letter-spacing: 0.025em;
	text-transform: uppercase;
	color: var(--color-accent-soft);
	white-space: nowrap;
	padding-left: 0.25em;
}
.experience-client__desc {
	font-family: var(--font-body);
	font-size: 0.95em;
	font-weight: 500;
	font-style: none;
	color: var(--color-body);
	line-height: 1.5;
	margin: 0;
	padding-left: 1em;
}

/* ————   EDUCATION EXPERIENCE SECTION   ——————————————————————————————————————————————————— */

.experience-edu-item {
	width: 100%;
	margin: 0;
}
.experience-edu-item:last-child {
	margin-bottom: 0;
}
.experience-edu-item__title {
	font-family: var(--font-body);
	font-size: 1.25em;
	font-weight: 600;
	color: var(--color-ink);
	letter-spacing: 0;
	line-height: 1;
	margin: 0 0 0.25em;
	padding: 0 0.5em 0.25em;
	border-bottom: 2px solid var(--color-gold);
}
.experience-edu-item__meta {
	display: flex;
	flex-direction: row;
	justify-content: space-between;
	align-content: stretch;
	align-items: baseline;
	gap: 0.25em 0.5em;
	padding: 0 0.5em;
	flex-wrap: wrap;
}
.experience-edu-item__org {
	font-family: var(--font-callout);
	font-size: 0.95em;
	line-height: 1;
	font-weight: 700;
	letter-spacing: 0.05em;
	text-transform: uppercase;
	text-align: left;
	color: var(--color-accent);
	white-space: nowrap;
}
.experience-edu-item__date {
	font-family: var(--font-callout);
	font-size: 0.95em;
	line-height: 1;
	font-weight: 800;
	letter-spacing: 0.05em;
	text-transform: uppercase;
	text-align: left;
	color: var(--color-accent-soft);
	white-space: nowrap;
}


/* ————————————————————————————————————————————————————————————————————————————————————————— */
/* ————   EXPERIENCE SIDEBAR (RIGHT)   ————————————————————————————————————————————————————— */
/* ————————————————————————————————————————————————————————————————————————————————————————— */

.experience-sidebar {
	background: var(--color-accent-deep);
	padding: 24px 24px 32px;
	flex: 1 1 35%;
	display: flex;
	flex-direction: column;
	align-items: flex-start;
	align-content: center;
	justify-content: flex-start;
}
.experience-sidebar-section {
	margin-bottom: 3em;
	flex: 0;
}
.experience-sidebar-section:last-child { 
	margin-bottom: 0;
}
.experience-sidebar__heading {
	font-family: var(--font-display);
	font-size: 1.5em;
	font-weight: 700;
	color: var(--color-gold);
	letter-spacing: 0;
	margin-bottom: 1em;
	padding: 0;
}

/* ————   EDUCATION EXPERIENCE (SIDEBAR)   ————————————————————————————————————————————————— */

.experience-sidebar-section .experience-edu-item {
	margin-bottom: 1.5em;
}
.experience-sidebar-section .experience-edu-item:last-child {
	margin-bottom: 0;
}
.experience-sidebar-section .experience-edu-item__title {
	font-family: var(--font-body);
	font-size: 1em;
	line-height: 1;
	font-weight: 800;
	color: var(--color-parchment);
	letter-spacing: 0;
	padding: 0 0.25em 0.25em;
	margin-bottom: 0.25em;
	border-bottom: 2px solid var(--color-accent);
}
.experience-sidebar-section .experience-edu-item__meta {
	display: flex;
	flex-direction: row;
	justify-content: space-between;
	align-content: stretch;
	align-items: baseline;
	gap: 0.25em 0.5em;
	padding: 0 0.25em;
	flex-wrap: wrap;
}
.experience-sidebar-section .experience-edu-item__org {
	font-family: var(--font-callout);
	font-size: 0.8em;
	line-height: 1;
	font-weight: 600;
	letter-spacing: 0.05em;
	text-transform: uppercase;
	text-align: left;
	color: color-mix(in srgb, var(--color-parchment) 25%, var(--color-accent-soft));
	white-space: nowrap;
}
.experience-sidebar-section .experience-edu-item__date {
	font-family: var(--font-callout);
	font-size: 0.8em;
	line-height: 1;
	font-weight: 600;
	letter-spacing: 0.05em;
	text-transform: uppercase;
	text-align: left;
	color: var(--color-gold);
	white-space: nowrap;
}

/* ————  EXPERIENCE TAGS   ————————————————————————————————————————————————————————————————— */

.experience-tag-group {
	margin-bottom: 1em;
}
.experience-tag-group:last-child {
	margin-bottom: 0;
}
.experience-tag-group__label {
	font-family: var(--font-body);
	font-size: 1em;
	line-height: 1;
	font-weight: 900;
	color: var(--color-parchment);
	letter-spacing: 0.25em;
	text-transform: uppercase;
	margin-bottom: 0.5em;
}
.experience-tags {
	display: flex;
	flex-wrap: wrap;
	align-items: center;
	align-content: flex-start;
	justify-content: flex-start;
	gap: 8px;
}
.experience-sidebar .tag {
	display: inline-flex;
	align-items: center;
	align-content: center;
	justify-content: center;
	font-family: var(--font-mono);
	font-size: 0.6em;
	line-height: 1;
	font-weight: 700;
	letter-spacing: 0.05em;
	word-spacing: -0.25em;
	text-transform: none;
	padding: 8px 10px;
	border-radius: 2px;
	white-space: nowrap;
	text-align: center;
	border: 1px solid var(--color-accent-soft);
	color: var(--color-rule-light);
	background: color-mix(in srgb,var(--color-accent) 40%,transparent);
}
.experience-sidebar .tag-button { transform: none; transition: all 0.25s; }
.experience-sidebar .tag-button:hover { transform: scale(1.05); background: var(--color-accent); border: 1px solid var(--color-rule-light); }

.experience-sidebar .t-body-sm {
	padding: 0.5em 0.25em 0;
	color: var(--color-accent-tint);
}

/* ————   SIDEBAR CTA   ———————————————————————————————————————————————————————————————————— */

.experience-sidebar .about-cta {
	flex: 1;
	flex-direction: column-reverse;
	align-items: center;
	align-content: center;
	justify-content: flex-end;
	width: calc(100% + 48px);
	margin: 0 -24px -32px;
	padding: 0;
	background: var(--color-parchment);
	gap: 1em;
}

.spacer { flex: 1; display: inline-flex; text-align: center; width: 100%; background: var(--color-accent-deep); }

.experience-sidebar .about-cta .btn { flex: 0; width: 100%; text-align: center; width: 100%; background: var(--color-accent); }
.experience-sidebar .about-cta .btn:hover { background: color-mix(in srgb,var(--color-accent) 40%,var(--color-accent-soft)); }





/*********************************************************************************************/
/*********************************************************************************************/
/*********************************************************************************************/
/*********************************************************************************************/
/*********************************************************************************************/
/*********************************************************************************************/
/*********************************************************************************************/
/****                                                                                     ****/
/****   LAB PAGE                                                                          ****/
/****                                                                                     ****/
/*********************************************************************************************/
/*********************************************************************************************/
/*********************************************************************************************/
/*********************************************************************************************/
/*********************************************************************************************/
/*********************************************************************************************/
/*********************************************************************************************/

.lab-intro {
	max-width: 640px;
	margin-bottom: 64px;
}
.lab-grid {
	display: grid;
	grid-template-columns: 1fr;
	gap: 2px;
}
.lab-item {
	background: var(--color-warm-base);
	padding: 40px 40px 40px 36px;
	display: grid;
	grid-template-columns: 1fr 320px;
	gap: 48px;
	align-items: start;
	border-left: 3px solid transparent;
	transition: border-color 0.2s;
}
.lab-item:hover { border-left-color: var(--color-accent); }
.lab-item__problem {
	font-family: var(--font-mono);
	font-size: 9px;
	letter-spacing: 0.15em;
	word-spacing: -0.25em;
	text-transform: uppercase;
	color: var(--color-accent);
	margin-bottom: 10px;
}
.lab-item__title {
	font-family: var(--font-display);
	font-size: 24px;
	font-weight: 700;
	letter-spacing: -0.02em;
	color: var(--color-ink);
	margin-bottom: 14px;
}
.lab-item__body {
	font-size: 15px;
	line-height: 1.7;
	color: var(--color-body);
	margin-bottom: 16px;
}
.lab-item__impact {
	font-family: var(--font-display);
	font-style: italic;
	font-size: 14px;
	color: var(--color-secondary);
	margin-top: 16px;
	padding-top: 16px;
	border-top: 0.5px solid var(--color-rule);
}
.lab-item__visual { background: var(--color-parchment); aspect-ratio: 4/3; }





/*********************************************************************************************/
/*********************************************************************************************/
/*********************************************************************************************/
/*********************************************************************************************/
/*********************************************************************************************/
/*********************************************************************************************/
/*********************************************************************************************/
/****                                                                                     ****/
/****   CONTACT PAGE                                                                      ****/
/****                                                                                     ****/
/*********************************************************************************************/
/*********************************************************************************************/
/*********************************************************************************************/
/*********************************************************************************************/
/*********************************************************************************************/
/*********************************************************************************************/
/*********************************************************************************************/

.contact-grid {
	display: flex;
	flex-direction: column;
	gap: 1em;
	align-items: flex-start;
	align-content: flex-start;
	justify-content: center;
	padding: 0;
	min-height: calc(100vh - var(--footer-height) - var(--nav-height) - 16em);
	text-wrap: pretty;
}
.contact-grid .t-headline {
	text-wrap: balance;
}

.contact-intro {
	display: flex;
	flex-direction: row;
	gap: clamp(2em,5vw,4em);
	align-items: stretch;
	align-content: flex-start;
	justify-content: flex-end;
	padding: 0;
	margin: 0;
}

.contact-intro-left {
	flex: 3;
	display: inline-flex;
	flex-direction: column;
	align-items: flex-start;
	align-content: flex-start;
	justify-content: flex-start;
	min-width: none;
	gap: 1.5em;
}
.contact-intro-left .t-body-sm {
	flex: 1;
	align-items: flex-start;
	align-content: flex-end;
	justify-content: flex-end;
	font-style: italic;
	line-height: 1;
	padding: 1em 0.5em 0;
	margin: 0 -0.5em;
	border-top: 1.5px solid var(--color-accent-soft);
}

.contact-details-frame {
	flex: 1;
	display: flex;
	width: 100%;
	flex-direction: row;
	gap: 1.5em;
	align-items: flex-start;
	align-content: flex-end;
	justify-content: flex-start;
	padding: 0;
	margin: 0;
	flex-wrap: wrap;
}
.contact-details-frame .btn {
	flex: 1;
}
.contact-detail-item {
	flex: 1;
	display: flex;
	flex-direction: column;
	gap: 0.5em;
	align-items: flex-start;
	align-content: flex-start;
	justify-content: flex-start;
	padding: 0;
}
.contact-details-frame .t-eyebrow {
	border-bottom: 2px solid var(--color-accent-soft);
	padding: 0 0.5em 0.75em;
	margin: 0 -0.5em;
}
.contact-detail,
.contact-link {
	font-family: var(--font-display);
	font-size: 1.25em;
	font-weight: 700;
	color: var(--color-ink);
	letter-spacing: -0.01em;
	text-decoration: none;
	white-space: nowrap;
	transition: color 0.25s, transform 0.25s;
}
.contact-link:hover { transform: scale(1.05); color: var(--color-accent); }

.contact-intro-right {
	flex: 1;
	display: flex;
	gap: 1em;
	flex-direction: column;
	align-items: flex-start;
	align-content: center;
	justify-content: center;
	background: linear-gradient(to right, color-mix(in srgb, var(--color-tint) 45%, var(--color-parchment)), color-mix(in srgb, var(--color-tint) 90%, var(--color-parchment)));
	min-width: none;
	padding: 1.5em;
	padding-left: 2em;
	border-left: 6px solid var(--color-accent);
	text-wrap: balance;
}
.contact-intro-right-header {
	font-family: var(--font-callout);
	font-size: 1.25em;
	font-weight: 700;
	letter-spacing: 0.05em;
	text-transform: uppercase;
	color: var(--color-accent);
	margin: 0;
}





/*********************************************************************************************/
/*********************************************************************************************/
/*********************************************************************************************/
/*********************************************************************************************/
/*********************************************************************************************/
/*********************************************************************************************/
/*********************************************************************************************/
/****                                                                                     ****/
/****   ANIMATIONS                                                                        ****/
/****                                                                                     ****/
/*********************************************************************************************/
/*********************************************************************************************/
/*********************************************************************************************/
/*********************************************************************************************/
/*********************************************************************************************/
/*********************************************************************************************/
/*********************************************************************************************/


/* ————————————————————————————————————————————————————————————————————————————————————————— */
/* ————————————————————————————————————————————————————————————————————————————————————————— */
/* ————   SCROLL REVEAL   —————————————————————————————————————————————————————————————————— */
/* ————————————————————————————————————————————————————————————————————————————————————————— */
/* ————————————————————————————————————————————————————————————————————————————————————————— */

.reveal {
	opacity: 0;
	transform: translateY(3em);
	transition: all 0.6s var(--ease-out);
}
.reveal--visible { opacity: 1; transform: translateY(0); }
.reveal--delay-1 { transition-delay: 0.1s; }
.reveal--delay-2 { transition-delay: 0.2s; }
.reveal--delay-3 { transition-delay: 0.3s; }


/* ————————————————————————————————————————————————————————————————————————————————————————— */
/* ————————————————————————————————————————————————————————————————————————————————————————— */
/* ————   ANIMATION KEYFRAMES   ———————————————————————————————————————————————————————————— */
/* ————————————————————————————————————————————————————————————————————————————————————————— */
/* ————————————————————————————————————————————————————————————————————————————————————————— */

@keyframes fadeUp {
	to { opacity: 1; transform: translateY(0); }
}
@keyframes scrollFadeUp {
	to { opacity: 1; transform: translate(-50%, 0); }
}
@keyframes ruleExpand {
	to { width: 15%; }
}
@keyframes scrollLine {
	0%   { top: -100%; }
	50%  { top: 0%; }
	100% { top: 100%; }
}

/* Hero logo dot animations */
@keyframes heroSpinFadeIn {
	from { opacity: 0; transform: rotate(-210deg) scale(0.7); }
	to   { opacity: 1; transform: rotate(0deg) scale(1); }
}

/* Hover wiggle    single-cycle "click me" nudge */
@keyframes heroDotWiggle {
	0%   { transform: rotate(0deg); }
	20%  { transform: rotate(-5deg); }
	48%  { transform: rotate(4.5deg); }
	70%  { transform: rotate(-2.5deg); }
	86%  { transform: rotate(1.5deg); }
	100% { transform: rotate(0deg); }
}

/* Click spin    2 smooth rotations while growing, then spring-bounce back.
	 One timing segment for the spin (0→62%) keeps it a single smooth arc.   */
@keyframes heroClickSpin {
	0%  {
	  transform: scale(1) rotate(0deg);
	  animation-timing-function: cubic-bezier(0.4, 0, 0.2, 1);
	}
	62% {
	  transform: scale(1.26) rotate(540deg);
	  animation-timing-function: cubic-bezier(0.34, 1.56, 0.64, 1);
	}
	76% {
	  transform: scale(0.93) rotate(540deg);
	  animation-timing-function: ease-out;
	}
	88% {
	  transform: scale(1.04) rotate(540deg);
	}
	100% {
	  transform: scale(1) rotate(540deg);
	}
}


/* ————————————————————————————————————————————————————————————————————————————————————————— */
/* ————————————————————————————————————————————————————————————————————————————————————————— */
/* ————   REDUCED MOTION   ————————————————————————————————————————————————————————————————— */
/* ————————————————————————————————————————————————————————————————————————————————————————— */
/* ————————————————————————————————————————————————————————————————————————————————————————— */

@media (prefers-reduced-motion: reduce) {
	*,
	*::before,
	*::after {
	  animation-duration: 0.01ms !important;
	  animation-iteration-count: 1 !important;
	  transition-duration: 0.01ms !important;
	}
	.reveal { opacity: 1; transform: none; }
	.capabilities__item.cap-flip,
	.capabilities__item.cap-flip-out { opacity: 1; transform: none; animation: none !important; }
	.hero__eyebrow,
	.hero__name,
	.hero__tagline,
	.hero__body,
	.hero__cta,
	.hero__scroll { opacity: 1; transform: none; animation: none; }
	.hero__rule { width: 15%; animation: none; }
	.hero__dot { animation: none; opacity: 1; }
	.hero__dot-wrap--spinning { animation: none !important; }
	.hero__dot-wrap:hover:not(.hero__dot-wrap--spinning) { transform: none; }
}






/*********************************************************************************************/
/*********************************************************************************************/
/*********************************************************************************************/
/*********************************************************************************************/
/*********************************************************************************************/
/*********************************************************************************************/
/*********************************************************************************************/
/****                                                                                     ****/
/****   RESPONSIVE                                                                        ****/
/****                                                                                     ****/
/*********************************************************************************************/
/*********************************************************************************************/
/*********************************************************************************************/
/*********************************************************************************************/
/*********************************************************************************************/
/*********************************************************************************************/
/*********************************************************************************************/


/* ————————————————————————————————————————————————————————————————————————————————————————— */
/* ————————————————————————————————————————————————————————————————————————————————————————— */
/* ————   NARROW SCREENS   ————————————————————————————————————————————————————————————————— */
/* ————————————————————————————————————————————————————————————————————————————————————————— */
/* ————————————————————————————————————————————————————————————————————————————————————————— */

@media (max-width: 900px) {

/* ————   TYPE STYLES   ———————————————————————————————————————————————————————————————————— */
.t-eyebrow
	{ font-size: 0.7em; }
.t-subhead
	{ font-size: 2.15em; line-height: 1.25; }
.t-body
	{ font-size: 0.95em; line-height: 1.5; }
.t-body-sm
	{ font-size: 0.8em; line-height: 1.1; }

/* ————   NAVIGATION   ————————————————————————————————————————————————————————————————————— */
.nav
	{ background: var(--color-parchment); border-bottom: 1px solid var(--color-warm-base); }

/* ————   UNIVERSAL STYLES   ——————————————————————————————————————————————————————————————— */
.work-grid
	{ grid-template-columns: 1fr; }
.work-card__image-wrap
	{ aspect-ratio: 8 / 5; margin-bottom: 1em; padding: 0; }

/* ————   HOME PAGE   —————————————————————————————————————————————————————————————————————— */
.hero
	{ padding: calc(var(--nav-height) * 1.5) 0 var(--nav-height); }
.hero__scroll
	{ bottom: 0; left: 50%; display: none; }
.capabilities__grid
	{ grid-template-columns: repeat(2, 1fr); gap: 1em; }
.context-grid
	{ grid-template-columns: 1fr; }
.context-card-icon
	{ display: flex; align-items: flex-start; padding: 0.75em 0.25em; height: auto; width: 4em; transition: all 0.25s ease; }
.context-card:hover .context-card-icon
	{ padding: 0.25em 0; width: 5em; }
.cs-meta-grid
	{ grid-template-columns: repeat(2, 1fr); }
.cs-metrics
	{ grid-template-columns: 1fr; gap: 2px; }

/* ————   ABOUT PAGE   ————————————————————————————————————————————————————————————————————— */
.about-grid
	{ flex-direction: column-reverse; gap: 0; padding: 0; }
.about_top-left
	{ flex: 1; display: inline-flex; flex-direction: row; align-items: stretch; align-content: stretch; justify-content: flex-end; gap: 40px; width: 100%; position: relative; padding: 0; margin: 0; background: }
.about_top-right
	{ flex: 1; display: block; width: 100%; position: relative; margin: 0; padding: 0; }
.about-grid .about_top-right .reveal
	{ opacity: 1; transform: none; }
.about_top-left .about-photo
	{ display: none; }
.about_top-right .about-photo
	{ display: block; width: 100%; aspect-ratio: 2 / 1.025; flex: 0; background: var(--color-parchment); background-image: url(assets/portrait-wide.png); background-size: contain; padding: 0; margin: 0 0 4vh; background-position: 50% 100%; background-repeat: no-repeat; overflow: hidden; position: sticky; top: calc(var(--nav-height) - 20px); z-index: 98; }
.about-cta
	{ flex: auto; width: 100%; flex-direction: row-reverse; justify-content: center; margin: 0 auto; padding: 48px 0; }
.about-cta .btn
	{ flex: 1; width: 100%; }
.about-header
	{ display: block; margin: 0; padding: 0; }
.about-body
	{ display: block; margin: 0; padding: 0 0 3.25em; }
.about-grid .t-headline
	{ font-size: clamp(1.65em, 3.25vw, 2em); margin: 0; padding: 0 8px; position: relative; z-index: 1; }
.about-grid .t-body
	{ margin: 0 0 1em; font-size: 1em; line-height: 1.35; padding: 0 8px; }
.about-grid .t-eyebrow
	{ margin: 0; padding: 0 8px 12px; border-top: none; font-size: 0.8em; }
.principles
	{ margin: 0; flex: 3; flex-direction: row; padding: 0 4px; border-bottom: 2px solid var(--color-muted); }
.principle
	{ padding: 16px 4px 16px; border-bottom-width: 0; }
.principle:last-child
	{ border-bottom: none; }
.principle__title
	{ line-height: 1.15; margin-bottom: 8px; }
.principle__copy
	{ font-size: 0.85em; line-height: 1.25; }
.experience-grid
	{ flex-direction: column; align-items: center; align-content: flex-start; justify-content: flex-start; gap: 2em; }
.experience-content
	{ flex: auto; padding: 0x; }
.experience-sidebar
	{ background: transparent; padding: 0; flex: auto; }
.experience__heading
	{ font-size: clamp(1.5em, 3vw, 1.75em); margin: 2em 0 1em; }
.experience-entry__header
	{ gap: 0.5em; padding: 0 0.5em 0.65em; }
.experience-entry__company
	{ font-size: 1.15em; }
.experience-entry__location
	{ font-size: 0.85em; }
.experience-role
	{ font-size: 1em; }
.experience-role__date
	{ display: inline-block; font-size: 0.9em; font-weight: 700; }
.experience-bullets li
	{ line-height: 1.25; margin-bottom: 0.25em; }
.experience-client__item
	{ margin-bottom: 0.75em; }
.experience-client__row
	{ gap: 0.5em; }
.experience-client__name
	{ font-family: var(--font-body); font-size: 1em; }
.experience-client__meta
	{ font-size: 0.9em; }
.experience-client__date
	{ font-size: 0.9em; }
.experience-client__desc
	{ font-size: 0.9em; line-height: 1.25; }
.experience-work
	{ gap: 1.5em; padding:0; }
.experience-edu
	{ gap: 1.5em; }
.experience-edu-item__title
	{ font-size: 1.15em; }
.experience-edu-item__org
	{ font-size: 0.9em; }
.experience-edu-item__date
	{ font-size: 0.9em; }
.experience-sidebar-section
	{ margin: 0; padding: 0 0 3em; }
.experience-sidebar__heading
	{ font-size: clamp(1.5em, 3vw, 1.75em); color: var(--color-accent); margin: 0 0 1em; }
.experience-tag-group
	{ padding: 0.75em 0; margin: 0; border-top: 1.5px solid var(--color-tint); }
.experience-tag-group:first-of-type
	{ padding-top: 0; border-top: none; }
.experience-tag-group__label
	{ font-size: 1em; color: var(--color-body); margin: 0; white-space: nowrap; }
.experience-tags
	{ gap: 6px; padding: 0; margin: 0.5em 0 0; }
.experience-sidebar .tag
	{ font-size: 0.75em; padding: 6px 10px; border: 2px solid var(--color-accent); color: var(--color-accent-deep); background: color-mix(in srgb,var(--color-accent-soft) 30%,transparent); }
.experience-sidebar .tag-button:hover
	{ background: var(--color-accent); color: var(--color-rule-light); border: 2px solid var(--color-accent); }
.experience-sidebar .t-body-sm
	{ color: var(--color-body); }
.experience-sidebar-section .experience-edu-item
	{ margin-bottom: 1.5em; }
.experience-sidebar-section .experience-edu-item:last-child
	{ margin-bottom: 0; }
.experience-sidebar-section .experience-edu-item__title
	{ font-size: 1.15em; color: var(--color-ink); padding: 0 0.25em 0.25em; margin-bottom: 0.25em; border-bottom: 2px solid var(--color-gold); }
.experience-sidebar-section .experience-edu-item__org
	{ font-size: 0.9em; font-weight: 700; color: var(--color-accent); }
.experience-sidebar-section .experience-edu-item__date
	{ font-size: 0.9em; font-weight: 800; color: var(--color-accent-soft); }
.experience-sidebar .about-cta
	{ flex: 1; justify-content: flex-end; width: 100%; margin: 24px 0 0; padding: 0; background: var(--color-parchment); }

/* ————   LAB PAGE   ——————————————————————————————————————————————————————————————————————— */
.lab-item
	{ grid-template-columns: 1fr; }
.lab-item__visual
	{ display: none; }

/* ————   CONTACT   ———————————————————————————————————————————————————————————————————————— */
.contact-grid
	{ text-wrap: balance; justify-content: center; padding: 0; }
.contact-intro
	{ flex-direction: column; gap: 3em; align-items: flex-start; margin: 0 0 2em; }
.contact-intro-left
	{ flex: none; }
.contact-details-frame
	{ flex: none; gap: 1em 2em; align-items: flex-start; align-content: flex-start; justify-content: flex-start; }
.contact-detail-item
	{ flex-direction: row; gap: 1em; align-items: center; }
.contact-details-frame .t-eyebrow
	{ width: 80px; border-bottom: none; border-right: 2px solid var(--color-accent-soft); padding: 0.5em 1em 0.5em 0; text-align: right; }
.contact-detail, .contact-link
	{ font-size: 1.2em; }
.contact-intro-right
	{ flex: none; gap: 0.75em; padding: 2em; text-wrap: pretty; border: 0 solid var(--color-accent); }
.contact-intro-right .t-body-sm
	{ font-size: 0.9em; line-height: 1.5; }
.contact-location {
	padding-top: 0.5em;
}

/* ————   FOOTER   ————————————————————————————————————————————————————————————————————————— */
.footer__inner
	{ flex-direction: column; gap: 3vh; text-align: center; padding: 2vh 0; }
.footer__links
	{ flex-wrap: wrap; justify-content: center; gap: 3vw; }
}


/* ————————————————————————————————————————————————————————————————————————————————————————— */
/* ————————————————————————————————————————————————————————————————————————————————————————— */
/* ————   MOBILE SCREENS   ————————————————————————————————————————————————————————————————— */
/* ————————————————————————————————————————————————————————————————————————————————————————— */
/* ————————————————————————————————————————————————————————————————————————————————————————— */

@media (max-width: 767px) {

/* ————   TYPE STYLES   ———————————————————————————————————————————————————————————————————— */
.t-eyebrow
	{ font-size: 0.7em; }
.t-subhead
	{ font-size: 2.15em; line-height: 1.25; }
.t-body
	{ font-size: 0.95em; line-height: 1.5; }
.t-body-sm
	{ font-size: 0.8em; line-height: 1.1; }
.t-mono-label
	{ color: #ff0000; font-size: 0.7em; letter-spacing: 0.15em; }

/* ————   NAVIGATION   ————————————————————————————————————————————————————————————————————— */
.nav {
	height: calc(var(--nav-height) - 20px);
	background: var(--color-accent-dark);
	backdrop-filter: none;
	-webkit-backdrop-filter: none;
	border-bottom: 0.5px solid var(--color-parchment);
	z-index: 100;
	display: flex;
	align-items: center;
}
.nav__inner {
	display: flex;
	align-items: center;
	align-content: flex-start;
	justify-content: space-between;
	width: 100%;
}
.nav__logo
	{ font-size: 1.75em; color: var(--color-parchment); }
.nav__logo:hover
	{ color: var(--color-accent-tint); }
.nav__links
	{ display: none; }
.nav__menu-btn
	{ display: flex; }
.nav__menu-btn span
	{ background: var(--color-parchment); }
.nav__link:hover, .nav__link:active
	{ color: var(--color-ink); background: color-mix(in srgb, var(--color-rule), transparent 2%); border-top: 1px solid var(--color-muted); border-bottom: 1px solid var(--color-muted); backdrop-filter: blur(32px); -webkit-backdrop-filter: blur(32px); }

/* ————   UNIVERSAL STYLES   ——————————————————————————————————————————————————————————————— */
.work-card__image-wrap
	{ aspect-ratio: 8 / 7; margin-bottom: 1em; }
.work-card__client
	{ font-size: 0.85em; }
.work-card__client-name
	{ padding: 0 0 0.5em; padding-right: 0.5em; border-bottom: 1.5px solid var(--color-rule); }
.work-card__client-date
	{ padding: 0 0 0.5em; border-bottom: 1.5px solid var(--color-rule); }
.work-card__title
	{ font-size: 1.6em; }
.work-card__tags
	{ gap: 0.5em; margin: 0.75em 0; }
.work-card__tag
	{ font-size: 0.7em; padding: 0.35em 0.5em; }
.work-card__tag-inprogress
	{ font-size: 0.7em; padding: 0.35em 0.75em; }
.section
	{ padding: 64px 0; }
.section--lg
	{ padding: 80px 0; }
.btn
	{ width: 100%; padding: 0.65em 1em; font-size: 0.95em; }
.mobile-break
	{ display: inline; }

/* ————   HOME PAGE   —————————————————————————————————————————————————————————————————————— */
.hero
	{ padding: calc(var(--nav-height) * 1.5) 0 var(--nav-height); }
.hero__flex
	{ flex-direction: column; gap: 2em; min-height: calc(100svh - var(--nav-height) * 3); align-items: center; justify-content: flex-start; }
.hero__dot-col
	{ flex: 0 0 auto; padding: 0 !important; margin: 0; align-self: center; }
.hero__dot-wrap
	{ width: clamp(20vw, 30vh, 60vw) !important; height: clamp(30vw, 28vh, 75vw) !important; }
.hero__dot
	{ width: 100%; height: auto; }
.hero__content
	{ flex: 1 1 0; max-width: 100%; text-align: center; align-items: center; display: flex; flex-direction: column; gap: 1.5em; }
.hero__eyebrow
	{ letter-spacing: -0.025em; word-spacing: -0.1em; margin-bottom: -0.5em; }
.hero__wordmark
	{ width: clamp(20vw, 50vw, 75vw) !important; min-width: 0; margin: 0 auto -0.5em; }
.hero-rule
	{ margin: -125em 0; height: 0.15em; }
.hero__body
	{ flex-shrink: 1; max-width: 100%; text-align: center; font-size: 0.9em; }
.hero__cta
	{ margin-top: auto; display: grid; width: 100%; grid-template-columns: repeat(2, 1fr); gap: 1em; align-content: end; }
.hero__scroll
	{ bottom: 0; left: 50%; display: none; }
.capabilities
	{ padding: clamp(5vh, auto, 50vh); }
.capabilities__grid
	{ grid-template-columns: 1fr; align-items: stretch; gap: 1em; }
.capabilities__item
	{ flex-direction: row; align-items: center; align-content: center; justify-content: center; padding: 4vw 3vw; gap: 3vw; background: linear-gradient(to right, var(--color-accent) 0%, var(--color-accent-deep) 75%); min-height: 0; }
.capabilities__num
	{ flex: 4; font-family: 'Crimson Pro'; font-size: 5em; margin: 0; line-height: 1; text-align: center; align-items: stretch; align-content: stretch; justify-content: center; padding: 0; }
.capabilities__label
	{ flex: 3; font-size: 0.9em; line-height: 1.25; padding: 0 1em; height: 100%; }
.pull-section
	{ min-height: 85vh; }
.pull-section::before
	{ background-size: 4em; }
.pull-section__inner
	{ max-width: 80vw; padding: 1em 0; padding-left: 10vw; border-left: 1vw solid var(--color-gold); }
.pull-section__source
	{ font-size: 1em; line-height: 1.25; }
.t-pull
	{ font-size: 2em; line-height: 1.6; }
.context-grid
	{ display: flex; flex-direction: column; align-items: center; align-content: center; }
.context-grid__right
	{ display: grid; grid-template-columns: 1fr 1fr 1fr; gap: 0; border: 1vw solid var(--color-accent); text-align: center; background: var(--color-accent); overflow: hidden; }
.context-card
	{ flex-direction: column; justify-content: flex-start; gap: 0; border: 0pt solid var(--color-accent); text-align: center; background: transparent; }
.context-card:hover
	{ transform: scale(1); gap: 0; animation: none; }
.context-card-icon
	{ padding: 0 0 0.5em; width: 100%; height: 15vw; }
.context-card:hover .context-card-icon
	{ padding: 0 0 0.5em; width: 100%; animation: none; }
.context-card-img
	{ height: 100%; object-position: center top; }
.context-card-inner
	{ flex-grow: 1; justify-content: flex-end; padding: 0; background: transparent; }
.context-card-inner:hover
	{ transform: none; animation: none; padding: 0; }
.context-card__heading
	{ flex: 0; display: flex; flex-direction: column; align-items: center; align-content: center; justify-content: center; font-size: 1.1em; color: var(--color-tint); line-height: 1; letter-spacing: 0.05em; margin-bottom: 8px; }
.context-card .t-body-sm
	{ flex: 1; display: flex; flex-direction: column; align-items: center; align-content: center; justify-content: center; font-size: 2.75vw; line-height: 1.35; padding: 1.5vw; margin: 0; background: var(--color-tint); }

/* ————   ABOUT PAGE   ————————————————————————————————————————————————————————————————————— */
.about_top-right .about-photo
	{ background-image: url(assets/portrait-wide-thick.png); }
.about-cta
	{ flex: auto; flex-direction: column-reverse; justify-content: center; margin: 0 auto 20px; padding: 48px 0 30px; }
.about-header
	{ display: block; margin: 0; padding: 0; }
.about-body
	{ display: block; margin: 0; padding: 0 0 60px; }
.about-grid .t-headline
	{ font-size: 1.5em; font-weight: 700; padding: 0 2px; margin: 0; }
.about-grid .t-body
	{ line-height: 1.5; padding: 0 2px; }
.principles
	{ margin: 0; flex-direction: column; padding: 0; border-bottom: none; }
.principle
	{ padding: 24px 4px; border-bottom-width: 1px; }
.principle:last-child
	{ border-bottom: 2px solid var(--color-muted); }
.experience-entry__header
	{ flex-wrap: wrap; flex-direction: column; gap: 0.25em 0.5em; padding: 0 0.5em 0.65em; }
.experience-entry__company
	{ white-space: nowrap; }
.experience-entry__location
	{ white-space: nowrap; }
.experience-role__date
	{ display: block; font-size: 0.9em; font-weight: 700; padding: 0; }
.experience-client__row
	{ flex-direction: row; align-items: center; gap: 0.5em 0.25em; margin: 0 0 0.25em; }
.experience-client__name
	{ display: block; width: 100%; padding: 0; font-size: 1em; }
.experience-client__meta
	{ display: block; line-height: 1.1; padding: 0 0.5em; border-right: 1.5px solid var(--color-gold); font-size: 0.8em; }
.experience-client__date
	{ display: block; line-height: 1.1; padding: 0 0.5em; font-size: 0.8em; }
.experience-client__desc
	{ padding: 0 0.5em 0.5em; }

/* ————   CONTACT   ———————————————————————————————————————————————————————————————————————— */
.contact-intro-right .t-body-sm
	{ font-size: 0.85em; line-height: 1.15; }

/* ————   WORK PAGES   ————————————————————————————————————————————————————————————————————— */
.cs-meta-grid
	{ grid-template-columns: 1fr 1fr; }

/* ————   FOOTER   ————————————————————————————————————————————————————————————————————————— */
.footer
	{ text-align: center; padding: 3vh auto 5vh; }
.footer__inner
	{ margin-bottom: 0; }
.footer__logo-img
	{ height: auto; width: 75%; display: inline-block; margin: 0 auto; }
.footer__link
	{ font-size: 0.9em; }
.footer__copy
	{ font-size: 0.65em; padding: 0.5vh 0 5vh; }
}