/* Additive design tokens + new-section styles for the repositioned site.
   Does not touch existing rules in style.css/css/*.css — only adds new,
   narrowly-scoped classes. Loaded after style.css so it can override
   specific selectors where needed (see .hero-statement below). */

:root {
	--color-bg: #0c0c0c;
	--color-fg: #ffffff;
	--color-accent: #8c6144;
	--font-title: 'Six Caps', sans-serif;
	--font-body: 'Poppins', sans-serif;
	/* Shared between .work-file and .work-file-reveal (Selected Work)
	   so the reveal's clearance offset is always derived from the
	   card's actual current width, at every breakpoint, instead of a
	   hand-tuned number that silently drifts out of sync when the
	   card size changes. */
	--work-card-w: clamp(360px, 30vw, 540px);
	--work-reveal-w: clamp(220px, 18vw, 300px);
}

/* Visible keyboard focus. No :focus-visible styles existed anywhere in
   the theme's own CSS, combined with a global user-select:none on
   html/body — keyboard users previously had no visible indication of
   where focus was. Scoped to :focus-visible (not plain :focus) so
   mouse/touch interaction, which this theme's custom-cursor and hover
   effects are built around, is unaffected. */
a:focus-visible,
button:focus-visible,
input:focus-visible,
textarea:focus-visible,
[tabindex]:focus-visible {
	outline: 2px solid var(--color-accent);
	outline-offset: 3px;
}

.light-section a:focus-visible,
.light-section button:focus-visible,
.light-section [tabindex]:focus-visible {
	outline-color: #000;
}

/* Card titles: semantically h3 (subsections within an h2), styled
   identically to the theme's own h6 (18px/36px) since h3's default
   fluid viewport-relative sizing (~45px+) is sized for full section
   headings, not compact grid cards. Fixes the h2-straight-to-h6
   heading-hierarchy skip flagged in the original SEO audit. */
.card-title {
	font-size: 18px;
	line-height: 36px;
}

/* Hero: sentence-length statement headline (index.html hero).
   .hero-title is built for 1-3 words at ~24vw with white-space:nowrap;
   a full sentence needs to wrap across multiple lines instead.
   Fluid scale: floor 5.4rem @400px viewport, ceiling 8.4rem @1600px,
   growing continuously in between (~6.3rem @768px). Tighter line-height
   and a wider wrap column keep the taller glyphs from costing extra
   lines at the new size. */
.hero-statement .hero-title {
	white-space: normal;
	overflow: visible;
	font-size: clamp(5.4rem, 4.4rem + 4vw, 8.4rem);
	line-height: 1.05;
	max-width: 1500px;
	margin-left: auto;
	margin-right: auto;
}

.hero-statement .hero-title span {
	min-width: 0;
}

/* #hero-caption's height is normally forced to exactly one viewport by
   js/common.js's setHeroProperties() (an inline style, which always
   wins over CSS height/min-height). At the larger hero scale above, a
   wrapped sentence can exceed one viewport on short/narrow screens;
   setHeroProperties() was patched to grow to fit content instead of
   clipping — this min-height is just the pre-JS/no-JS fallback so the
   hero never renders collapsed. */
#hero-caption.hero-statement {
	height: auto;
	min-height: 100vh;
}

/* Signature visual (Home, immediately after the hero) — an offset
   "mounted print" mega-card: portrait card + accent-color backdrop
   panel peeking out behind it + a slow-drifting dot field, distinct
   from both the flat, borderless .content-row sections used everywhere
   else and the full-bleed circle .clipped-image on about.html. */
.signature-frame {
	position: relative;
	max-width: 1000px;
	margin-left: auto;
	margin-right: 8%;
}

.signature-card {
	position: relative;
	overflow: hidden;
	z-index: 2;
	aspect-ratio: 1672 / 941;
	width: 100%;
	border-radius: 10px;
}

/* <picture> has no default box behavior, so it's sized explicitly to
   fill the card; the image parallax (js/common.js) animates the actual
   <img> inside it. */
.signature-card picture {
	position: absolute;
	inset: 0;
	width: 100%;
	height: 100%;
}

.signature-card picture img {
	width: 100%;
	height: 100%;
	object-fit: cover;
	display: block;
}

/* Color-block backing panel, peeking out behind the card on two edges */
.signature-backdrop {
	position: absolute;
	top: 28px;
	left: -28px;
	width: 100%;
	height: 100%;
	background-color: var(--color-accent);
	border-radius: 10px;
	z-index: 1;
}

/* Decorative, slow-drifting dot field echoing the photo's own fine
   topographic texture. Pure CSS, no new image asset; animates
   `transform` only (GPU-cheap). rgba() below is --color-accent
   (#8c6144) at low opacity — hex custom properties can't carry alpha
   without color-mix(), so it's restated as rgb. */
.signature-frame-field {
	position: absolute;
	top: -15%;
	left: -20%;
	width: 140%;
	height: 130%;
	z-index: 0;
	pointer-events: none;
	background-image: radial-gradient(rgba(140, 97, 68, 0.35) 1px, transparent 1.5px);
	background-size: 28px 28px;
	animation: signature-field-drift 50s linear infinite;
}

@keyframes signature-field-drift {
	from { transform: translate3d(0, 0, 0); }
	to   { transform: translate3d(-28px, -28px, 0); }
}

@media (prefers-reduced-motion: reduce) {
	.signature-frame-field {
		animation: none;
	}
}

@media only screen and (max-width: 1024px) {
	.signature-frame {
		max-width: 100%;
		margin-right: 0;
	}
	.signature-backdrop {
		top: 20px;
		left: -20px;
	}
}

@media only screen and (max-width: 767px) {
	.signature-frame {
		margin-left: 0;
	}
	.signature-backdrop {
		top: 14px;
		left: -14px;
		border-radius: 6px;
	}
	.signature-card {
		border-radius: 6px;
	}
}

/* Capabilities / Selected Work cards (Home) */
.capability-tagline {
	font-style: italic;
	opacity: 0.75;
	margin-bottom: 12px;
}

.capability-tags {
	font-size: 12px;
	letter-spacing: 0.04em;
	opacity: 0.55;
	margin-top: 12px;
}

.work-tag {
	font-size: 12px;
	letter-spacing: 0.04em;
	text-transform: uppercase;
	opacity: 0.55;
	margin-bottom: 6px;
	display: block;
}

.card-row {
	display: flex;
	flex-wrap: wrap;
	justify-content: center;
}

.card-row .one_third {
	margin-bottom: 60px;
}

/* Metadata pills (case-study hero, added in Sprint 2, defined here so
   the token file stays the single source of new component CSS) */
.meta-pill-row {
	display: flex;
	flex-wrap: wrap;
	justify-content: center;
	gap: 24px;
	margin-top: 30px;
}

.meta-pill {
	text-align: left;
}

.meta-pill-label {
	font-size: 11px;
	letter-spacing: 0.08em;
	text-transform: uppercase;
	opacity: 0.5;
	margin-bottom: 4px;
	display: block;
}

/* Point of View (Home) — reuses the existing .pinned-section /
   .pinned-element.left / .scrolling-element.right component already
   proven on about.html's Capabilities section (see js/common.js's
   generic .pinned-element ScrollTrigger pin) instead of a new sticky
   mechanism. */
.editorial-statement {
	font-size: clamp(2.4rem, 5.2vw, 4.6rem);
	line-height: 1.15;
	text-align: left;
	margin: 0;
}

@media only screen and (max-width: 767px) {
	.editorial-statement {
		font-size: 5rem;
		letter-spacing: 0.1rem;
	}
}

.pov-lead {
	text-align: left;
}

.pov-detail p {
	text-align: left;
	max-width: 640px;
}

.pov-divider {
	height: 1px;
	background: rgba(255, 255, 255, 0.14);
	margin: 32px 0;
}

.light-section .pov-divider {
	background: rgba(0, 0, 0, 0.12);
}

/* "Intersection" motif — two overlapping circles, drifting slightly in
   opposing directions, next to the promoted headline. Original SVG,
   not decorative filler: it's a literal image of the section's own
   thesis (two domains meeting). Documented in DESIGN_SYSTEM.md
   (interaction spec 5) per that file's own requirement. */
.pov-mark {
	display: block;
	width: 130px;
	height: auto;
	margin-top: 32px;
	overflow: visible;
}

.pov-mark-circle {
	fill: rgba(140, 97, 68, 0.08);
	stroke: var(--color-accent);
	stroke-width: 1.25;
}

.pov-mark-a {
	animation: pov-mark-drift 7s ease-in-out infinite;
}

.pov-mark-b {
	animation: pov-mark-drift 7s ease-in-out infinite reverse;
}

@keyframes pov-mark-drift {
	0%, 100% { transform: translateX(0); }
	50% { transform: translateX(5px); }
}

@media (prefers-reduced-motion: reduce) {
	.pov-mark-a,
	.pov-mark-b {
		animation: none;
	}
}

/* Capabilities (Home) — editorial bento grid ("cap2-*"), replacing the
   earlier flat grid and the short-lived horizontal-strip iteration.
   One card is "featured" (larger, AI-accent glow, full copy) at a
   time; clicking another card swaps which slot is featured via
   GSAP Flip. See DESIGN_SYSTEM.md interaction spec 6 (superseding the
   prior spec of the same number) and DECISIONS.md DEC-033. */
.cap2-row {
	overflow: hidden;
}

.cap2-shell {
	/* No side padding here — the parent #main-page-content.content-full-width
	   already applies it; adding more here just wastes width. */
	position: relative;
	max-width: 1600px;
	margin: 0 auto;
	box-sizing: border-box;
}

.cap2-field {
	position: absolute;
	inset: -60px;
	width: calc(100% + 120px);
	height: calc(100% + 120px);
	z-index: 0;
	pointer-events: none;
	opacity: 0.9;
}

/* Title sits in a horizontal band above the grid (not a side column) —
   so the pinned entrance (js/common.js) fills the viewport with real
   content immediately instead of leaving a tall empty gap above a
   narrow side column. See DEC-038. */
.cap2-intro {
	position: relative;
	z-index: 1;
	display: flex;
	justify-content: space-between;
	align-items: flex-end;
	flex-wrap: wrap;
	gap: 28px;
	margin-bottom: 40px;
	text-align: left;
}

.cap2-intro-left {
	max-width: 520px;
}

.cap2-intro-right {
	max-width: 380px;
}

.cap2-title {
	/* Floor 2.6rem @400px viewport, ceiling 9.2rem @1600px (this
	   section's own max-width) — same fluid-clamp method as the hero. */
	font-size: clamp(2.6rem, 0.4rem + 8.8vw, 9.2rem);
	line-height: 0.95;
	margin: 6px 0 0;
}

.cap2-statement {
	font-family: var(--font-body);
	font-size: 17px;
	line-height: 1.5;
	color: rgba(255, 255, 255, 0.7);
	margin: 0 0 14px;
}

.cap2-taxonomy {
	font-family: var(--font-body);
	font-size: 14px;
	letter-spacing: 0.08em;
	text-transform: uppercase;
	color: rgba(255, 255, 255, 0.55);
	display: flex;
	flex-wrap: wrap;
	align-items: center;
	gap: 8px;
}

.cap2-tax-x {
	color: var(--color-accent);
}

.cap2-tax-arrow {
	color: var(--color-accent);
	margin: 0 2px;
}

.cap2-tax-impact {
	color: var(--color-fg);
	font-weight: 600;
}

/* Mobile-only nudge toward the accordion's tap-to-expand interaction
   (desktop's bento hover already makes that obvious visually, so this
   stays hidden there — see the ≤767px override below). */
.cap2-hint {
	display: none;
	font-family: var(--font-body);
	font-style: italic;
	font-size: 12px;
	letter-spacing: 0.02em;
	color: rgba(255, 255, 255, 0.45);
	margin-top: 10px;
}

.cap2-grid {
	position: relative;
	z-index: 1;
	display: grid;
	grid-template-columns: 1fr 1.25fr 1fr;
	grid-template-rows: auto auto;
	gap: 20px;
}

.cap2-card[data-slot="1"] { grid-column: 1; grid-row: 1; }
.cap2-card[data-slot="2"] { grid-column: 3; grid-row: 1; }
.cap2-card[data-slot="3"] { grid-column: 2; grid-row: 1 / span 2; }
.cap2-card[data-slot="4"] { grid-column: 1; grid-row: 2; }
.cap2-card[data-slot="5"] { grid-column: 3; grid-row: 2; }

.cap2-card {
	position: relative;
	min-height: 0;
}

/* Entrance: cards descend a large distance from above, scroll-scrubbed
   and pinned on desktop (js/common.js) so the sequence gets guaranteed
   screen time even on a fast scroll — same spirit as the dormant
   .move-thumbs-wrapper mechanism elsewhere in this codebase (a big,
   visible, scroll-driven transformation), adapted for text cards
   instead of replicating its two-state thumbnail-swap structure. See
   DESIGN_SYSTEM.md interaction spec 7 (revised). Baked into CSS so
   there's no flash before JS runs. */
.cap2-card {
	opacity: 0;
	transform: translateY(-65vh) scale(0.88);
}

@media (prefers-reduced-motion: reduce) {
	.cap2-card {
		opacity: 1;
		transform: none;
	}
}

.cap2-card-inner {
	position: relative;
	height: 100%;
	box-sizing: border-box;
	display: flex;
	flex-direction: column;
	background: linear-gradient(180deg, rgba(255, 255, 255, 0.025), rgba(255, 255, 255, 0.01));
	border: 1px solid rgba(255, 255, 255, 0.09);
	border-radius: 16px;
	padding: 28px 26px 24px;
	overflow: hidden;
	cursor: pointer;
	transform: translate3d(0, 0, 0) scale(1);
	transition: transform 0.35s cubic-bezier(0.76, 0, 0.24, 1), border-color 0.35s ease, box-shadow 0.35s ease, background 0.35s ease, opacity 0.35s ease;
}

.cap2-card-inner:hover,
.cap2-card-inner:focus-visible {
	transform: translate3d(0, -6px, 0) scale(1.03);
	border-color: var(--color-accent);
	box-shadow: 0 18px 50px -22px rgba(0, 0, 0, 0.6);
}

.cap2-grid:has(.cap2-card-inner:hover) .cap2-card-inner:not(:hover) {
	opacity: 0.55;
}

/* Featured = the one deliberate high-contrast moment: white card,
   black text, everything else stays black/white/accent. */
.cap2-card--featured .cap2-card-inner {
	background: var(--color-fg);
	border-color: var(--color-fg);
	box-shadow: 0 30px 70px -30px rgba(0, 0, 0, 0.6);
}

.cap2-card-top {
	display: flex;
	align-items: flex-start;
	justify-content: space-between;
	margin-bottom: 18px;
}

.cap2-card-index {
	display: inline-block;
	font-family: var(--font-title);
	font-size: clamp(2.2rem, 3vw, 3.4rem);
	line-height: 1;
	color: var(--color-accent);
	transition: color 0.3s ease, font-size 0.35s cubic-bezier(0.76, 0, 0.24, 1);
	transform: translate3d(calc(var(--mx, 0) * 6px), calc(var(--my, 0) * 6px), 0);
}

.cap2-card--featured .cap2-card-index {
	color: #000;
	font-size: clamp(2.8rem, 4vw, 4.4rem);
}

.cap2-card-icon {
	width: 40px;
	height: 40px;
	border: 1px solid rgba(255, 255, 255, 0.16);
	border-radius: 10px;
	display: flex;
	align-items: center;
	justify-content: center;
	color: rgba(255, 255, 255, 0.75);
	font-size: 16px;
	transition: color 0.3s ease, border-color 0.3s ease;
	transform: translate3d(calc(var(--mx, 0) * -4px), calc(var(--my, 0) * -4px), 0);
}

.cap2-card-inner:hover .cap2-card-icon {
	color: var(--color-accent);
	border-color: rgba(140, 97, 68, 0.5);
}

.cap2-card--featured .cap2-card-icon {
	color: #000;
	border-color: rgba(0, 0, 0, 0.25);
}

.cap2-card-title {
	text-transform: lowercase;
	font-size: clamp(1.3rem, 1.8vw, 1.9rem);
	line-height: 1.05;
	margin: 0 0 8px;
	color: var(--color-fg);
	transition: font-size 0.35s cubic-bezier(0.76, 0, 0.24, 1);
}

.cap2-card--featured .cap2-card-title {
	font-size: 4.8rem;
	letter-spacing: 0.1em;
	color: #000;
}

/* .cap2-row prefix (not just .cap2-card-tagline) is required here: the
   vendor's `.dark-section p { color: #999; }` (style.css) is one class
   + one tag, out-specificities a single-class rule regardless of
   source order — this card copy is a plain <p>, sitting inside this
   section's own .dark-section, so it was silently losing to that gray
   instead of showing the intended translucent white. */
.cap2-row .cap2-card-tagline {
	font-style: normal;
	font-size: 14px;
	color: rgba(255, 255, 255, 0.65);
	margin: 0 0 14px;
}

.cap2-row .cap2-card--featured .cap2-card-tagline {
	color: rgb(255, 255, 255);
	background-color: #8c6144;
	text-align: center;
	padding: 6px 12px;
}

.cap2-card-divider {
	display: block;
	height: 1px;
	width: 100%;
	background: rgba(255, 255, 255, 0.14);
	position: relative;
	margin-bottom: 14px;
	overflow: hidden;
}

.cap2-card--featured .cap2-card-divider {
	background: rgba(0, 0, 0, 0.15);
}

.cap2-card-divider::after {
	content: "";
	position: absolute;
	inset: 0;
	background: var(--color-accent);
	transform: scaleX(0);
	transform-origin: left;
	transition: transform 0.5s cubic-bezier(0.76, 0, 0.24, 1);
}

.cap2-card-inner:hover .cap2-card-divider::after,
.cap2-card--featured .cap2-card-divider::after {
	transform: scaleX(1);
}

.cap2-card-desc {
	font-size: 13px;
	line-height: 1.55;
	color: rgba(255, 255, 255, 0.55);
	margin: 0 0 10px;
	display: -webkit-box;
	-webkit-line-clamp: 2;
	-webkit-box-orient: vertical;
	overflow: hidden;
}

.cap2-card-tags {
	font-size: 11px;
	letter-spacing: 0.03em;
	color: rgba(255, 255, 255, 0.4);
	margin: 0;
	display: -webkit-box;
	-webkit-line-clamp: 2;
	-webkit-box-orient: vertical;
	overflow: hidden;
}

.cap2-card--featured .cap2-card-desc,
.cap2-card--featured .cap2-card-tags {
	-webkit-line-clamp: unset;
	overflow: visible;
}

.cap2-card--featured .cap2-card-desc {
	font-size: 14px;
	color: rgba(0, 0, 0, 0.75);
}

.cap2-card--featured .cap2-card-tags {
	font-size: 12px;
	color: rgba(0, 0, 0, 0.55);
}

.cap2-nav {
	position: relative;
	z-index: 1;
	display: flex;
	align-items: center;
	gap: 20px;
	margin-top: 8px;
	padding-top: 24px;
	border-top: 1px solid rgba(255, 255, 255, 0.1);
}

.cap2-nav-label {
	font-family: var(--font-title);
	text-transform: lowercase;
	font-size: 15px;
	letter-spacing: 0.02em;
	color: rgba(255, 255, 255, 0.6);
	white-space: nowrap;
}

.cap2-nav-rail {
	flex: 1;
	display: flex;
	align-items: center;
	gap: 10px;
}

.cap2-nav-dot {
	flex: 1;
	height: 2px;
	background: rgba(255, 255, 255, 0.15);
	border: none;
	padding: 0;
	cursor: pointer;
	border-radius: 2px;
	transition: background 0.3s ease, transform 0.3s ease;
}

.cap2-nav-dot[aria-selected="true"] {
	background: var(--color-accent);
	transform: scaleY(2.5);
}

.cap2-nav-count {
	font-size: 12px;
	letter-spacing: 0.05em;
	color: rgba(255, 255, 255, 0.5);
	white-space: nowrap;
}

.cap2-nav-current {
	color: var(--color-fg);
	font-weight: 600;
}

.cap2-nav-arrow {
	flex: 0 0 auto;
	width: 40px;
	height: 40px;
	border-radius: 50%;
	border: 1px solid rgba(255, 255, 255, 0.25);
	background: none;
	color: var(--color-fg);
	font-size: 16px;
	cursor: pointer;
	display: flex;
	align-items: center;
	justify-content: center;
	transition: border-color 0.2s ease, color 0.2s ease;
}

.cap2-nav-arrow:hover,
.cap2-nav-arrow:focus-visible {
	border-color: var(--color-accent);
	color: var(--color-accent);
}

@media (prefers-reduced-motion: reduce) {
	.cap2-card-inner,
	.cap2-card-index,
	.cap2-card-icon,
	.cap2-card-title,
	.cap2-card-divider::after,
	.cap2-nav-dot {
		transition: none !important;
	}
}

@media only screen and (max-width: 1024px) {
	.cap2-intro {
		align-items: flex-start;
	}
	.cap2-intro-right {
		max-width: 100%;
	}
	.cap2-card--featured .cap2-card-title {
		font-size: 3.2rem;
	}
}

@media only screen and (max-width: 767px) {
	/* Mobile: single-column accordion, not the desktop bento — tapping a
	   card expands it in place instead of swapping the featured slot. */
	.cap2-grid {
		grid-template-columns: 1fr;
		grid-template-rows: none;
		gap: 14px;
	}
	.cap2-card,
	.cap2-card[data-slot] {
		grid-column: 1 !important;
		grid-row: auto !important;
	}
	.cap2-title {
		font-size: 9.2rem;
	}
	.cap2-hint {
		display: block;
	}
	.cap2-card--featured .cap2-card-title {
		font-size: 3.6rem;
		letter-spacing: 0.06em;
	}
	.cap2-card-inner {
		height: auto;
	}
	.cap2-card-inner:hover {
		transform: none;
		box-shadow: none;
	}
	.cap2-card-desc,
	.cap2-card-tags {
		-webkit-line-clamp: unset;
		max-height: 0;
		opacity: 0;
		margin: 0;
		overflow: hidden;
		transition: max-height 0.4s ease, opacity 0.3s ease, margin 0.4s ease;
	}
	.cap2-card--expanded .cap2-card-desc {
		max-height: 240px;
		opacity: 1;
		margin: 0 0 10px;
	}
	.cap2-card--expanded .cap2-card-tags {
		max-height: 120px;
		opacity: 1;
	}
	.cap2-card--featured .cap2-card-desc,
	.cap2-card--featured .cap2-card-tags {
		max-height: 0;
		opacity: 0;
		margin: 0;
	}
	.cap2-card--featured.cap2-card--expanded .cap2-card-desc {
		max-height: 240px;
		opacity: 1;
		margin: 0 0 10px;
	}
	.cap2-card--featured.cap2-card--expanded .cap2-card-tags {
		max-height: 120px;
		opacity: 1;
	}
	.cap2-nav {
		padding-top: 18px;
	}
	.cap2-nav-label {
		display: none;
	}

	/* Mobile's accordion never reassigns --featured (js/common.js's
	   capActivate calls capToggleExpanded here, never capSetFeatured), so
	   without this, Decision Intelligence (the one card with --featured
	   hardcoded in the HTML) permanently reads as the only legible/
	   highlighted card next to four small, plain ones — not a
	   hover/click state that cycles through, just a fixed inconsistency.
	   Bigger title + copper tagline banner apply to all five here,
	   independent of which one is --featured. */
	.cap2-card-title {
		font-size: 3.6rem;
		letter-spacing: 0.06em;
	}
	/* .cap2-row prefix needed here too, for the same reason as the base
	   rule above — otherwise this loses to the vendor's `.dark-section
	   p { color: #999; }` and the banner text stays gray. */
	.cap2-row .cap2-card-tagline {
		color: #fff;
		letter-spacing: 0.1rem;
		background-color: #8c6144;
		text-align: center;
		padding: 6px 12px;
	}

	/* Alternating white/dark cards (1, 3, 5 white — 3 already is, via
	   --featured; 2, 4 keep the dark card so five in a row don't read as
	   one flat block) — replicating --featured's black-on-white look
	   under slots 1 and 5 explicitly, since --featured itself never
	   moves off slot 3 at this width. */
	.cap2-card[data-slot="1"] .cap2-card-inner,
	.cap2-card[data-slot="5"] .cap2-card-inner {
		background: var(--color-fg);
		border-color: var(--color-fg);
	}
	.cap2-card[data-slot="1"] .cap2-card-index,
	.cap2-card[data-slot="5"] .cap2-card-index {
		color: #000;
		font-size: clamp(2.8rem, 4vw, 4.4rem);
	}
	.cap2-card[data-slot="1"] .cap2-card-icon,
	.cap2-card[data-slot="5"] .cap2-card-icon {
		color: #000;
		border-color: rgba(0, 0, 0, 0.25);
	}
	.cap2-card[data-slot="1"] .cap2-card-title,
	.cap2-card[data-slot="5"] .cap2-card-title {
		color: #000;
	}
	.cap2-card[data-slot="1"] .cap2-card-divider,
	.cap2-card[data-slot="5"] .cap2-card-divider {
		background: rgba(0, 0, 0, 0.15);
	}
	.cap2-card[data-slot="1"] .cap2-card-desc,
	.cap2-card[data-slot="5"] .cap2-card-desc {
		color: rgba(0, 0, 0, 0.75);
	}
	.cap2-card[data-slot="1"] .cap2-card-tags,
	.cap2-card[data-slot="5"] .cap2-card-tags {
		color: rgba(0, 0, 0, 0.55);
	}
}

/* Case-study eyebrow label, above the hero title */
.eyebrow {
	display: block;
	font-size: 13px;
	letter-spacing: 0.1em;
	text-transform: uppercase;
	opacity: 0.55;
	margin-bottom: 22px;
}

/* Framework/architecture/process-flow diagram placeholder — used for
   the case-study "Approach" visual and the "My Role" process line.
   Deliberately typographic/geometric (not a stock diagram image) per
   DESIGN_SYSTEM.md's placeholder direction; swap for a real diagram
   asset later without changing markup. */
.flow-diagram {
	/* Only ever appears in dark sections now (the "My Role" process
	   line — the case-study "Approach" instances were replaced by real
	   .case-diagram artwork). Without an explicit color it fell through
	   to the vendor body default (color:#444, a dark-mode-unaware
	   choice meant for text on white) — nearly invisible on this
	   section's black background. #f2f1ee is the same "pearl white"
	   already used for the Selected Work frame background, reused here
	   as ink instead of inventing a new color, for contrast against the
	   pure #ffffff used everywhere else. */
	border: 1px dashed rgba(255,255,255,0.25);
	border-radius: 4px;
	padding: 56px 40px;
	margin: 36px auto;
	max-width: 1000px;
	font-family: var(--font-title);
	font-size: clamp(1.8rem, 1rem + 3.2vw, 3.4rem);
	letter-spacing: 0.02em;
	line-height: 1.5;
	text-transform: lowercase;
	color: #f2f1ee;
}

.light-section .flow-diagram {
	border-color: rgba(0,0,0,0.2);
}

.flow-diagram .flow-label {
	display: block;
	font-family: var(--font-body);
	font-size: 11px;
	letter-spacing: 0.08em;
	text-transform: uppercase;
	opacity: 0.5;
	margin-bottom: 14px;
}

/* Case-study Next Case loop link reuses .page-title/.next-hero-title
   markup already proven elsewhere on the site (see #project-nav) —
   no new CSS needed for that part. */

/* Selected Work (Home) — a "suspended dossier" spatial composition:
   two diagonal stacks of tilted project files floating above a black
   canvas, framed by a warm-white border, reacting to the cursor as
   weighted physical objects (bounded, lerped movement — js/common.js).
   Replaces the folder-tab version. See DESIGN_SYSTEM.md interaction
   spec 8 (revised) / DECISIONS.md. Warm off-white (#f2f1ee) is a
   one-off frame color for this section only, not a new sitewide
   token — the palette elsewhere stays black/white/copper. */
.work-stage-row {
	padding: 0;
}

.work-frame {
	box-sizing: border-box;
	background: #f2f1ee;
	padding: 40px clamp(16px, 4vw, 64px) 72px;
}

.work-canvas {
	position: relative;
	overflow: visible;
	background: #050505;
	border-radius: 6px;
	min-height: clamp(640px, 60vw, 900px);
}

.work-canvas-marker {
	position: absolute;
	top: 50%;
	left: 50%;
	transform: translate(-50%, -50%);
	font-family: var(--font-body);
	font-size: 11px;
	letter-spacing: 0.2em;
	text-transform: uppercase;
	color: rgba(255, 255, 255, 0.16);
	pointer-events: none;
	white-space: nowrap;
	z-index: 0;
}

.work-scene {
	position: absolute;
	inset: 0;
	perspective: 1400px;
	transform-style: preserve-3d;
}

/* Outer anchor: base position + base rotation only. Never touched by
   the pointer-follow JS (that targets .work-file-motion instead) so
   the percentage-based centering transform here is never at risk of
   being overwritten. */
.work-file {
	position: absolute;
	left: var(--base-x);
	top: var(--base-y);
	z-index: var(--depth, 1);
	width: var(--work-card-w);
	text-decoration: none;
	color: inherit;
	display: block;
	opacity: 0;
	transform: translate(calc(-50% + var(--enter-x, 0px)), -50%) rotateZ(var(--base-rotate));
	transition: opacity 0.9s cubic-bezier(0.16, 1, 0.3, 1) var(--enter-delay, 0ms),
		transform 0.9s cubic-bezier(0.16, 1, 0.3, 1) var(--enter-delay, 0ms);
}

.work-file.is-visible {
	opacity: 1;
	transform: translate(-50%, -50%) rotateZ(var(--base-rotate));
}

/* Pointer-follow layer: JS lerps --px/--py/--pz/--s every frame.
   Nothing else sets this element's transform. */
.work-file-motion {
	position: relative;
	width: 100%;
	will-change: transform;
	transform: translate3d(var(--px, 0px), var(--py, 0px), var(--pz, 0px)) scale(var(--s, 1));
}

/* Rigid content layer — per the brief's "text must not have
   independent parallax" rule, this never receives a transform of its
   own; it only rides along with .work-file-motion as one physical
   unit. Holds the visible card surface (background/border/shadow). */
.work-file-content {
	position: relative;
	box-sizing: border-box;
	padding: 36px 40px;
	background: #141414;
	border: 1px solid rgba(255, 255, 255, 0.08);
	border-radius: 14px;
	box-shadow: 0 30px 80px rgba(0, 0, 0, 0.42), 0 6px 18px rgba(0, 0, 0, 0.3), inset 0 1px 0 rgba(255, 255, 255, 0.04);
	overflow: hidden;
	display: flex;
	flex-direction: column;
	transform: none;
	transition: background 0.35s ease, border-color 0.35s ease, box-shadow 0.35s ease, opacity 0.35s ease;
}

/* Simulated physical thickness — a sliver of a darker layer peeking
   from behind the card, per the brief's "subtle pseudo-element to
   simulate thickness" note. */
.work-file::after {
	content: "";
	position: absolute;
	inset: 0;
	background: #0a0a0a;
	border-radius: 14px;
	transform: translate(6px, 7px);
	z-index: -1;
}

.work-file-content::before {
	content: "";
	position: absolute;
	inset: 0;
	border-radius: inherit;
	background: linear-gradient(145deg, rgba(255, 255, 255, 0.025), transparent 40%);
	pointer-events: none;
}

.work-file-light {
	position: absolute;
	inset: 0;
	background: radial-gradient(380px circle at var(--mx, 50%) var(--my, 50%), rgba(255, 255, 255, 0.035), transparent 60%);
	opacity: 0;
	transition: opacity 0.35s ease;
	pointer-events: none;
}

.work-scene:has(.work-file.is-active) .work-file:not(.is-active) .work-file-content {
	opacity: 0.78;
}

.work-file.is-active .work-file-content {
	background: linear-gradient(145deg, #1b1614, #0d0d0f);
	border-color: rgba(140, 97, 68, 0.55);
	box-shadow: 0 40px 100px rgba(0, 0, 0, 0.5), 0 10px 26px rgba(0, 0, 0, 0.35), inset 0 1px 0 rgba(255, 255, 255, 0.05);
}

.work-file.is-active .work-file-light {
	opacity: 1;
}

.work-file-top {
	display: flex;
	align-items: baseline;
	justify-content: space-between;
	gap: 16px;
	margin-bottom: 16px;
}

.work-file-index {
	font-family: var(--font-title);
	font-size: clamp(1.8rem, 2.4vw, 2.4rem);
	line-height: 1;
	color: var(--color-accent);
	opacity: 0.85;
}

.work-file-title {
	display: block;
	text-transform: lowercase;
	font-size: clamp(1.8rem, 0.87rem + 3.73vw, 4.6rem);
	line-height: 1.05;
	color: var(--color-fg);
	margin: 0;
}

/* Projected outside the card, in the empty space toward the canvas
   center — not layered on top of the card surface. Positioned off the
   same --base-x/--base-y as its paired .work-file (duplicated inline,
   since custom properties don't reach a sibling by inheritance), then
   pushed further out with a fixed offset so it lands in the void. */
.work-file-reveal {
	position: absolute;
	top: var(--base-y);
	left: var(--base-x);
	width: var(--work-reveal-w);
	opacity: 0;
	pointer-events: none;
	/* Sits behind every card depth (1-5) on purpose: the offset below is
	   sized to clear the card entirely, but if a rotated corner ever
	   still reaches into this space, the card's own solid surface
	   should win over the reveal text, never the other way round. */
	z-index: 2;
	transition: opacity 0.4s ease, transform 0.4s ease;
}

/* Clearance has to cover HALF THE CARD's width, THEN half the reveal
   panel's OWN width (the translate below re-centers the panel, so its
   near edge is offset-minus-its-own-half-width, not offset itself),
   plus a fixed gap generous enough to also absorb a rotated card's
   widened footprint (rotation adds roughly height*sin(angle) of extra
   horizontal reach beyond the plain unrotated half-width). Both widths
   are read from the shared vars so this stays correct at every
   breakpoint without hand-tuned numbers drifting out of sync. */
.work-file-reveal[data-side="right"] {
	text-align: left;
	transform: translate(calc(-50% + var(--work-card-w) / 2 + var(--work-reveal-w) / 2 + 34px), -50%);
}

.work-file-reveal[data-side="left"] {
	text-align: right;
	transform: translate(calc(-50% - var(--work-card-w) / 2 - var(--work-reveal-w) / 2 - 34px), -50%);
}

.work-file.is-active + .work-file-reveal[data-side="right"] {
	opacity: 1;
	pointer-events: auto;
	transform: translate(calc(-50% + var(--work-card-w) / 2 + var(--work-reveal-w) / 2 + 50px), -50%);
}

.work-file.is-active + .work-file-reveal[data-side="left"] {
	opacity: 1;
	pointer-events: auto;
	transform: translate(calc(-50% - var(--work-card-w) / 2 - var(--work-reveal-w) / 2 - 50px), -50%);
}

.work-file-desc {
	font-family: var(--font-body);
	font-size: 13px;
	line-height: 1.6;
	color: rgba(255, 255, 255, 0.62);
	margin: 0 0 12px;
}

.work-file-cta {
	display: inline-flex;
	align-items: center;
	gap: 6px;
	font-family: var(--font-body);
	font-size: 12px;
	letter-spacing: 0.04em;
	text-transform: uppercase;
	color: var(--color-fg);
}

/* The vendor theme forces black/gray text on any `a`, `h1-h6` and `p`
   inside `.light-content .light-section` (style.css), since it assumes
   a light background there. This canvas is a black card surface nested
   inside that light-section row, so it needs the same specificity
   (3 classes) to win these back to the dark-card palette. */
.light-content .light-section .work-file {
	color: var(--color-fg);
}

.light-content .light-section .work-file-title {
	color: var(--color-fg);
}

.light-content .light-section .work-file-desc {
	color: rgba(255, 255, 255, 0.62);
}

.work-file-arrow {
	display: inline-block;
	transition: transform 0.3s ease;
}

.work-file.is-active + .work-file-reveal .work-file-arrow {
	transform: translateX(4px);
}

@media (prefers-reduced-motion: reduce) {
	.work-file-motion {
		transform: none !important;
	}
}

@media only screen and (max-width: 1024px) {
	:root {
		--work-card-w: clamp(300px, 38vw, 420px);
		--work-reveal-w: clamp(180px, 24vw, 240px);
	}
	.work-file-content {
		padding: 26px 28px;
	}
	.work-file-title {
		font-size: clamp(1.8rem, 4.2vw, 2.8rem);
	}
	.work-canvas {
		min-height: clamp(620px, 84vw, 820px);
	}
}

@media only screen and (max-width: 767px) {
	/* Mobile "flashcard deck": the old vertical stack (each card in flex
	   flow with a small -20px negative margin meant to shingle corners)
	   actually compounded into 60-190px of real overlap once its paired
	   .work-file-reveal's own -20px top+bottom margins were added on
	   top — flex children don't collapse adjoining margins the way
	   block children do, so those margins summed instead of merging,
	   crushing every card into the one above it. Replaced with an
	   actual deck: all 5 cards centered at the same point, one visible
	   at a time, the next few peeking behind at decreasing scale/
	   opacity, advanced by a scroll-scrubbed GSAP timeline (js/common.js)
	   — see DECISIONS.md. This site's "scroll" is a smooth-scrollbar
	   transform on a wrapper, not real element scrolling, so
	   position:sticky / scroll-snap silently no-op here; GSAP
	   ScrollTrigger (already wired to this site's custom scroller via
	   scrollerProxy) is the only mechanism that actually works. */
	/* Full-screen takeover: the canvas previously sat at a fixed 76vh/
	   700px inside the frame's own padding, leaving the frame's cream
	   background (#f2f1ee) visible as dead space below it — most
	   noticeable while the section is pinned (scrolling has visibly
	   stopped, but the screen isn't fully the deck), reading as the
	   page "getting stuck" rather than an intentional held moment.
	   Removing the frame's padding and sizing the canvas to the full
	   viewport means the pinned moment IS the whole screen — the deck
	   reads as this section's main event, not a card floating in a
	   frame. */
	.work-frame {
		padding: 0;
	}
	.work-canvas {
		position: relative;
		min-height: 0;
		height: 100vh;
		height: 100svh;
		background: #050505;
		border-radius: 0;
		overflow: hidden;
	}
	.work-canvas-marker {
		display: none;
	}
	.work-scene {
		position: absolute;
		inset: 0;
		perspective: none;
	}
	.work-file {
		position: absolute;
		left: 50%;
		top: 50%;
		width: 88vw;
		max-width: 460px;
		/* JS (gsap.set) drives xPercent/yPercent/x/y/scale/opacity per
		   stack position — no CSS transform/transition here so nothing
		   fights those inline styles (the old rules used !important,
		   which blocks GSAP's inline styles regardless of specificity). */
	}
	.work-file-motion {
		transform: none;
	}
	.work-file-content {
		padding: 32px 28px;
		/* --depth (set per-card by js/common.js, in step with the same
		   stack position that drives its scale/y/opacity) fades the
		   solid card into frosted glass the further back it sits.
		   Tried tinting the fill itself lighter first, but a lighter
		   *dark* grey barely reads against this canvas's near-black
		   background (#050505) — the two are too close in value for
		   the eye to separate. brightness() in the backdrop-filter
		   lightens whatever is actually behind the card (the black
		   canvas, or a card further back still), which stays visible
		   regardless of the glass pane's own fill color, so the peeking
		   cards read as distinct lit panels instead of blending in. */
		background: rgba(20, 20, 20, calc(0.94 - var(--depth, 0) * 0.16));
		backdrop-filter: blur(calc(var(--depth, 0) * 5px)) brightness(calc(1 + var(--depth, 0) * 0.35));
		-webkit-backdrop-filter: blur(calc(var(--depth, 0) * 5px)) brightness(calc(1 + var(--depth, 0) * 0.35));
		border-color: rgba(255, 255, 255, calc(0.08 + var(--depth, 0) * 0.09));
	}
	.work-file-title {
		font-size: 3.3rem;
	}
	.work-file-index {
		font-size: 2.8rem;
	}
	.work-scene .work-tag {
		font-size: 14px;
	}

	/* Sits below its paired card by a fixed gap (tuned to the card's
	   own approximate height, including its now-larger 3.3rem title —
	   the longest title wraps to 3 lines at that size); GSAP applies
	   the identical xPercent/yPercent/x/y/scale/opacity to both
	   elements of a pair every step, so this gap holds constant and
	   the two read as one card. */
	.work-file-reveal {
		position: absolute;
		left: 50%;
		top: calc(50% + 215px);
		width: 88vw;
		max-width: 460px;
		background: transparent;
		border: none;
		padding: 0;
		max-height: none;
		overflow: visible;
		text-align: left !important;
	}
	.work-file-desc {
		-webkit-line-clamp: 3;
		-webkit-box-orient: vertical;
		display: -webkit-box;
		overflow: hidden;
	}

	/* prefers-reduced-motion fallback (js/common.js applies this class
	   instead of running gsap.set/the scroll timeline): the deck above
	   is motion by definition — with no scroll-driven step, and no
	   hover/tap alternative, cards 2-5 would stay permanently hidden
	   behind card 1 forever. Reverts to a plain always-visible vertical
	   list, all 5 cards in normal flow, nothing overlapping. !important
	   only because these elements carry no inline style at all in this
	   path (gsap.set is skipped), so there's nothing to actually
	   override — it's here purely as a guard against the base mobile
	   rules above, not fighting JS. */
	.work-canvas--static {
		height: auto;
		max-height: none;
		overflow: visible;
		background: transparent;
		border-radius: 0;
	}
	.work-canvas--static .work-scene {
		position: static !important;
		display: flex;
		flex-direction: column;
		gap: 16px;
		padding: 0 4px;
	}
	.work-canvas--static .work-file {
		position: static !important;
		width: auto !important;
		max-width: none !important;
		opacity: 1 !important;
		transform: none !important;
	}
	.work-canvas--static .work-file-reveal {
		position: static !important;
		width: auto !important;
		max-width: none !important;
		opacity: 1 !important;
		transform: none !important;
		pointer-events: auto !important;
		margin: -18px 0 0;
		padding: 16px 24px 22px;
		background: #141414;
		border: 1px solid rgba(255, 255, 255, 0.08);
		border-top: none;
		border-radius: 0 0 10px 10px;
	}
}

/* Speaking / "Ideas That Move People to Act" — particle-mic illustration
   anchored right, where the section's own text/cards (centered, left of
   it) stay clear of it. */
.speaking-row {
	background-color: #fff;
	background-image: url("../images/ideas that move people to act.png");
	background-repeat: no-repeat;
	background-position: center right;
	background-size: cover;
}

@media only screen and (max-width: 767px) {
	/* `cover` on a narrow+tall mobile section blows the wide illustration
	   up far past its actual density, burying the text under solid dot
	   texture. `contain` keeps it at its own proportions instead. */
	.speaking-row {
		background-size: contain;
		background-position: top right;
	}
}

/* Selected Work CTA — the whole black band is the button, not a small
   pill centered inside it. Reuses the vendor's own text-swap-on-hover
   trick (data-hover + ::before, .button-border span in style.css) at a
   bigger scale, plus a full-bleed color invert so the entire clickable
   area visibly reacts, not just the text. */
.work-cta-row {
	padding: 0;
}

.work-cta {
	display: flex;
	align-items: center;
	justify-content: center;
	margin-left: calc(50% - 50vw);
	margin-right: calc(50% - 50vw);
	width: 100vw;
	box-sizing: border-box;
	padding: clamp(64px, 9vw, 120px) 24px;
	text-decoration: none;
	background-color: var(--color-bg);
	color: var(--color-fg);
	transition: background-color 0.45s cubic-bezier(0.76, 0, 0.24, 1), color 0.45s cubic-bezier(0.76, 0, 0.24, 1);
}

.work-cta:hover,
.work-cta:focus-visible {
	background-color: var(--color-fg);
	color: var(--color-bg);
}

.work-cta-text {
	position: relative;
	display: inline-block;
	overflow: hidden;
	font-family: var(--font-body);
	font-size: clamp(1.3rem, 0.9rem + 1.4vw, 2rem);
	font-weight: 500;
	letter-spacing: 0.02em;
	transition: transform 0.35s cubic-bezier(0.76, 0, 0.24, 1);
	transform-origin: 100% 0%;
}

.work-cta-text::before {
	content: attr(data-hover);
	position: absolute;
	top: 100%;
	left: 0;
	width: 100%;
}

.work-cta:hover .work-cta-text,
.work-cta:focus-visible .work-cta-text {
	transform: translateY(-100%);
	transform-origin: 0% 0%;
}

/* About — Career Arc: was a single inline paragraph with text arrows
   ("A / B -> C -> ..."); now a vertical staged timeline so the sequence
   itself carries the visual weight instead of reading as body copy. */
.career-arc-row .eyebrow {
	display: block;
	margin-bottom: clamp(32px, 5vw, 56px);
}

.arc-stages {
	position: relative;
	list-style: none;
	margin: 0 auto;
	padding: 0;
	max-width: 1020px;
	text-align: left;
}

.arc-stages::before {
	content: "";
	position: absolute;
	top: 0.6em;
	bottom: 0.6em;
	left: 1.2ch;
	width: 1px;
	background: rgba(255, 255, 255, 0.14);
}

.arc-stage {
	display: flex;
	align-items: baseline;
	gap: clamp(16px, 3vw, 36px);
	padding: clamp(12px, 1.8vw, 20px) 0;
}

.arc-stage-index {
	position: relative;
	z-index: 1;
	flex-shrink: 0;
	width: 2.4ch;
	background: #0c0c0c;
	font-family: var(--font-title);
	font-size: clamp(1.4rem, 1.8vw, 2rem);
	color: var(--color-accent);
	opacity: 0.8;
}

.arc-stage-name {
	text-transform: lowercase;
	font-size: clamp(1.8rem, 0.9rem + 3.2vw, 3.4rem);
	line-height: 1.05;
	color: var(--color-fg);
}

.arc-stage--final .arc-stage-name {
	color: var(--color-accent);
}

.arc-copy {
	margin-top: clamp(48px, 6vw, 80px);
}

@media only screen and (max-width: 767px) {
	.arc-stages {
		max-width: 100%;
	}
	.arc-stage {
		gap: 14px;
	}
	.arc-stage-index {
		width: 2ch;
		font-size: 1.6rem;
	}
	.arc-stage-name {
		font-size: clamp(2.2rem, 1.2rem + 7vw, 3rem);
		line-height: 1.15;
	}
}

/* Moving Gallery (About — Collaborations) — the vendor defines this
   component in css/shortcodes.css, but the site's real pages load only
   the minified css/all.min.css bundle, which predates that component
   and doesn't include it. Ported the rules this usage needs (plus
   overflow:hidden on the outer element, needed to clip the scroll-driven
   horizontal translate js/common.js already applies to any
   .moving-gallery it finds — that part of the vendor JS is unchanged). */
.moving-gallery {
	overflow: hidden;
}

.bw-gallery .wrapper-gallery {
	display: inline-flex;
	align-items: flex-start;
	margin: 0;
	padding: 0;
}

.moving-gallery li {
	position: relative;
	width: 25vw;
	padding-left: 10px;
	padding-right: 10px;
	box-sizing: border-box;
	margin: 10px 0;
	list-style: none;
}

.moving-gallery li img {
	display: block;
	width: 100%;
	aspect-ratio: 3 / 4;
	object-fit: cover;
	margin: 0;
	border: 1px solid rgba(255, 255, 255, 0.15);
}

.moving-gallery + .moving-gallery {
	margin-top: 20px;
}

.moving-gallery-caption {
	position: absolute;
	height: auto;
	padding: 30px;
	box-sizing: border-box;
	text-align: center;
	bottom: 0;
	left: 0;
	right: 0;
	opacity: 0;
	color: var(--color-fg);
	font-family: var(--font-body);
	text-transform: uppercase;
	letter-spacing: 0.08em;
	font-size: 13px;
	background: linear-gradient(to top, rgba(0, 0, 0, 0.55), transparent);
	transition: opacity 0.2s ease-in-out;
}

.moving-gallery li:hover .moving-gallery-caption {
	opacity: 1;
}

@media (prefers-reduced-motion: reduce) {
	.moving-gallery .wrapper-gallery {
		transform: none !important;
	}
}

@media only screen and (max-width: 767px) {
	.moving-gallery li {
		width: 60vw;
	}
}

/* About — Communities & Leadership: replaces the old "MY Capabilities"
   pinned accordion with a plain two-column split reusing .one_half/
   .one_half.last (the vendor's own float-based column pair, already
   used elsewhere on this page — no pin/scroll mechanism needed here
   since the right side is a single looping video, not a scrollable
   list). */
.communities-video-wrapper {
	position: relative;
	width: 100%;
}

.communities-video {
	display: block;
	width: 100%;
	aspect-ratio: 3 / 4;
	object-fit: cover;
	border-radius: 6px;
}

@media only screen and (max-width: 767px) {
	.communities-video-col {
		margin-top: 32px;
	}

	/* Puts the first paragraph above the video (using the blank space
	   there instead of stacking all 3 paragraphs before it) and the
	   other two below. The two columns are float-based (.one_half /
	   .one_half.last), so reordering across them takes display:contents
	   on the text column to expose its own children (h2 + 2 spacer
	   <hr>s + 3 <p>s) as direct flex items of the row, interleaved with
	   the video column via order. The bare <hr>s are pure vertical
	   spacers in this theme (height:28px, no visible line — see
	   style.css) — hidden here since the reordered items get their own
	   margins instead. */
	.communities-row {
		display: flex;
		flex-direction: column;
	}
	.communities-row > .one_half:not(.last) {
		display: contents;
	}
	.communities-row .one_half > hr {
		display: none;
	}
	.communities-row h2 {
		order: 1;
	}
	.communities-row .one_half > p:nth-of-type(1) {
		order: 2;
	}
	.communities-video-col {
		order: 3;
		margin-top: 28px;
	}
	.communities-row .one_half > p:nth-of-type(2) {
		order: 4;
		margin-top: 28px;
	}
	.communities-row .one_half > p:nth-of-type(3) {
		order: 5;
	}
}

/* Work — Intro: was two plain centered paragraphs with no visual; now
   an asymmetric split (copy left, portrait right) so the page opens
   with the same editorial weight as the rest of the site. */
.work-intro-row {
	position: relative;
	overflow: hidden;
}

.work-intro-grid {
	position: relative;
	z-index: 1;
	display: flex;
	align-items: center;
	justify-content: space-between;
	gap: clamp(32px, 6vw, 96px);
	max-width: 1400px;
	margin: 0 auto;
	text-align: left;
}

.work-intro-copy {
	max-width: 560px;
	flex: 1 1 460px;
}

/* The two original sentences, kept verbatim — just given a size
   contrast (lead statement vs. supporting detail) instead of reading
   as one uniform block. */
.work-intro-lead {
	font-size: clamp(1.7rem, 1.1rem + 1.6vw, 2.6rem);
	line-height: 1.3;
	font-weight: 600;
	color: var(--color-fg);
	margin: 0 0 24px;
}

.work-intro-detail {
	font-size: 15px;
	line-height: 1.75;
	color: rgba(255, 255, 255, 0.6);
	max-width: 480px;
	margin: 0;
}

.work-intro-portrait-wrap {
	flex: 0 0 auto;
	width: clamp(220px, 24vw, 360px);
}

.work-intro-portrait {
	position: relative;
	overflow: hidden;
	width: 100%;
	aspect-ratio: 941 / 1672;
	border-radius: 8px;
	box-shadow: 0 30px 80px rgba(0, 0, 0, 0.45);
}

/* Sized taller than its frame so the scroll parallax (js/common.js)
   has room to travel without exposing empty space at the edges. */
.work-intro-portrait-img {
	position: absolute;
	top: -6%;
	left: 0;
	width: 100%;
	height: 112%;
	object-fit: cover;
	display: block;
}

/* Film-grain texture over the portrait — a generated SVG noise tile,
   no image asset. */
.work-intro-grain {
	position: absolute;
	inset: 0;
	opacity: 0.15;
	mix-blend-mode: overlay;
	pointer-events: none;
	background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='200' height='200'%3E%3Cfilter id='n'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='0.85' numOctaves='2' stitchTiles='stitch'/%3E%3C/filter%3E%3Crect width='100%25' height='100%25' filter='url(%23n)'/%3E%3C/svg%3E");
}

/* Ambient rings echoing the circle line-art already baked into the
   portrait itself, extending that motif out into the dark canvas
   around it. Pure CSS, no asset. */
.work-intro-rings {
	position: absolute;
	inset: 0;
	pointer-events: none;
	overflow: hidden;
	z-index: 0;
}

.work-intro-rings::before,
.work-intro-rings::after {
	content: "";
	position: absolute;
	border: 1px solid rgba(255, 255, 255, 0.08);
	border-radius: 50%;
	animation: work-ring-drift 60s linear infinite;
}

.work-intro-rings::before {
	width: 420px;
	height: 420px;
	top: -160px;
	left: -140px;
}

.work-intro-rings::after {
	width: 280px;
	height: 280px;
	bottom: -120px;
	right: 6%;
	border-color: rgba(140, 97, 68, 0.25);
	animation-direction: reverse;
	animation-duration: 46s;
}

@keyframes work-ring-drift {
	from { transform: rotate(0deg); }
	to { transform: rotate(360deg); }
}

@media (prefers-reduced-motion: reduce) {
	.work-intro-rings::before,
	.work-intro-rings::after {
		animation: none;
	}
}

@media only screen and (max-width: 1024px) {
	.work-intro-grid {
		flex-direction: column-reverse;
		text-align: center;
	}
	.work-intro-copy {
		max-width: 100%;
		text-align: center;
	}
	.work-intro-detail {
		margin-left: auto;
		margin-right: auto;
	}
	.work-intro-portrait-wrap {
		width: clamp(200px, 50vw, 280px);
	}
}

/* Work — Case cards: scoped under .work-cases-row so this never
   touches .card-title/.card-row elsewhere (case-study pages, index,
   contact all reuse those same class names). */
.work-cases-row .one_third {
	text-align: left;
	padding: 0 clamp(16px, 2vw, 32px);
	box-sizing: border-box;
}

.work-case-top {
	display: flex;
	align-items: baseline;
	gap: 14px;
	margin-bottom: 14px;
}

.work-case-index {
	font-family: var(--font-title);
	font-size: clamp(1.6rem, 1.2vw + 1.1rem, 2.1rem);
	color: var(--color-accent);
	opacity: 0.8;
	line-height: 1;
}

.work-cases-row .work-tag {
	margin-bottom: 0;
}

.work-cases-row .card-title {
	font-size: clamp(1.6rem, 1vw + 1.3rem, 2.1rem);
	line-height: 1.15;
	text-transform: lowercase;
	margin: 0 0 14px;
}

.work-cases-row .card-title a {
	color: var(--color-fg);
	text-decoration: none;
	transition: color 0.25s ease;
}

.work-cases-row .box-icon-content p {
	font-size: 14px;
	line-height: 1.65;
	color: rgba(255, 255, 255, 0.6);
	margin: 0 0 16px;
}

.work-cases-row .box-icon-content > a.link {
	font-size: 12px;
	letter-spacing: 0.04em;
	text-transform: uppercase;
}

.work-cases-row .box-icon-wrapper {
	transition: transform 0.35s cubic-bezier(0.16, 1, 0.3, 1);
}

.work-cases-row .box-icon-wrapper:hover {
	transform: translateY(-6px);
}

.work-cases-row .box-icon-wrapper:hover .card-title a {
	color: var(--color-accent);
}

.work-cases-row .card-row:has(.box-icon-wrapper:hover) .one_third:not(:has(.box-icon-wrapper:hover)) {
	/* !important is required: the sitewide .has-animation entrance
	   (js/common.js) sets opacity via gsap.to(), which leaves a
	   persistent inline style — the one thing a plain stylesheet rule,
	   at any specificity, cannot outrank. */
	opacity: 0.6 !important;
	transition: opacity 0.3s ease;
}

@media only screen and (max-width: 767px) {
	/* The index/title clamps above barely move off their floor at
	   phone widths (1vw-1.2vw of ~390px is a few px), and .work-tag
	   is the sitewide 12px default — all three read as too small to
	   register as a heading here. Scoped to .work-cases-row so the
	   shared .work-tag/.card-title classes stay untouched elsewhere
	   (Selected Work, case-study pages, index, contact). */
	.work-case-index {
		font-size: clamp(2.4rem, 1rem + 5vw, 2.8rem);
	}
	.work-cases-row .work-tag {
		font-size: 15px;
	}
	.work-cases-row .card-title {
		font-size: clamp(2.4rem, 1.2rem + 7vw, 3.2rem);
		line-height: 1.1;
	}
	.work-case-top {
		margin-bottom: 18px;
	}
}

/* Case studies — "The Approach" diagrams and "What I Built" mockups.
   Replaces the .flow-diagram text placeholder with real inline SVG
   artwork (embedded directly in the HTML, not referenced via <img>,
   so the page's own Six Caps font applies to the SVG's <text> —
   external SVGs loaded via <img src> can't fetch that font). No
   dashed border here (unlike .flow-diagram) — these are finished
   diagrams, not placeholders, so they float free on the section
   background instead of reading as "still unfinished." */
.case-diagram {
	/* width:100% resolves against .content-max-width's CONTENT box, not
	   its border box — its side padding (40-80px, responsive) is real
	   containing-block space that a max-width on this element can never
	   reclaim, no matter how high. The @media rule below pulls back into
	   that padding with a negative margin instead, which is the only way
	   to actually get more rendering room here. No max-width of its own:
	   the parent already caps out on very wide screens, so this doesn't
	   need a second, redundant ceiling. */
	display: block;
	width: 100%;
	margin: 36px auto;
	box-sizing: border-box;
}

@media only screen and (min-width: 768px) {
	/* 40px is the smallest side padding .content-max-width uses at any
	   breakpoint from here up (it steps up to 60px, then 80px, on wider
	   screens) — pulling in by exactly that much is always safe (never
	   overflows past the parent's own edge) and fully reclaims the
	   padding at the 768-1024px tier, where it's exactly 40px. */
	.case-diagram {
		margin-left: -40px;
		margin-right: -40px;
		width: calc(100% + 80px);
	}
}

.case-diagram + .case-diagram {
	margin-top: 8px;
}

.case-diagram .flow-label {
	display: block;
	font-family: var(--font-body);
	font-size: 11px;
	letter-spacing: 0.08em;
	text-transform: uppercase;
	opacity: 0.5;
	margin-bottom: 14px;
}

.case-diagram-svg {
	display: block;
	width: 100%;
	height: auto;
}

.case-mockup {
	max-width: 1100px;
	margin: 0 auto 44px;
}

.case-mockup-caption {
	margin-top: 16px;
	font-size: 12px;
	letter-spacing: 0.04em;
	text-transform: uppercase;
	color: rgba(255, 255, 255, 0.45);
	text-align: center;
}

@media only screen and (max-width: 767px) {
	/* These SVGs are wide (up to 1200x220-750 viewBoxes) so their text
	   stays comfortably sized at desktop widths — but scaling the whole
	   diagram down to fit a ~310px mobile column shrinks that text well
	   past legible. Instead of shrinking to fit, give the diagram a
	   fixed minimum width and let it scroll horizontally, so labels
	   stay a fixed, readable size regardless of viewport. */
	.case-diagram,
	.case-mockup {
		position: relative;
		overflow-x: auto;
		-webkit-overflow-scrolling: touch;
		margin-left: calc(50% - 50vw);
		margin-right: calc(50% - 50vw);
		padding-left: 24px;
		padding-right: 24px;
		box-sizing: border-box;
	}
	.case-diagram-svg {
		width: auto;
		min-width: 640px;
		height: auto;
	}
	.case-mockup .case-diagram-svg {
		min-width: 560px;
	}
	/* Edge-fade hint that there's more to scroll */
	.case-diagram::after,
	.case-mockup::after {
		content: "";
		position: absolute;
		top: 0;
		right: 0;
		bottom: 0;
		width: 32px;
		background: linear-gradient(to right, transparent, var(--color-bg));
		pointer-events: none;
	}
	.light-section .case-diagram::after {
		background: linear-gradient(to right, transparent, #ffffff);
	}
}