/* =========================================================================
   Work index — desktop: Figma "WORK – List" (1100:2952, 1728)
     views  "Grid" x1496 / "List" x1613 (active #00D9BF) y994, 32/45 +2%
     head   "Project" x65 y1181, "Services" right 1663 y1174, 20/30 +2% #5B5B5B; line y1243 black
     rows   text 32/45 +2% every 102 from y1309; tags right 1663 at +6, gap 8;
            line under each row at +70, black 50%
     image  x621 340×326 r10 (hover preview, follows the pointer)
     then the Insights block at y2355
   Mobile: Figma "WORK – List" (1261:731, 440)
     views  y708 24/30 — right-aligned (Figma: left; moved right by decision 2026-09-28); head labels y778 16/24; line y823 black
     rows   title 20/28 from y863; tags +13, wrap within ~300 (gap 8 / 6); line 20 below,
            #999 50%; next title 20 below the line; image 88×72 r2 right, level with the title
   ========================================================================= */

.work-index { padding-top: calc(61 * var(--u)); padding-bottom: calc(58 * var(--u)); } /* text ends y647 → views y708; last line → black y1849 */

.work-index__views { display: flex; justify-content: flex-end; gap: calc(19 * var(--u)); font-size: calc(24 * var(--u)); line-height: calc(30 / 24); }
.work-index__view { text-align: left; }
.work-index__view:first-child { width: calc(43 * var(--u)); } /* Figma text boxes 43 / 36 */
.work-index__view:last-child { width: calc(36 * var(--u)); }
.work-index__view[aria-pressed="true"] { color: var(--teal); }
.work-index__view[aria-disabled="true"] { cursor: default; }

.work-list { margin-top: calc(40 * var(--u)); }
.work-list__head { display: flex; justify-content: space-between; align-items: flex-start; padding-bottom: calc(20 * var(--u)); border-bottom: 1px solid var(--black); }
.work-list__label { font-size: calc(16 * var(--u)); line-height: calc(24 / 16); color: #5b5b5b; }
.work-list__label--services { display: none; } /* mobile: no right-hand column label (decided 2026-09-28) */

.work-list__body { position: relative; }
.work-list__rows { padding-top: calc(20 * var(--u)); }
.work-row { position: relative; }
.work-row__link { position: relative; display: grid; justify-items: start; row-gap: calc(13 * var(--u)); padding: calc(20 * var(--u)) 0; }
.work-row__title { font-size: calc(20 * var(--u)); line-height: calc(28 / 20); }
.work-row__tags { display: flex; flex-wrap: wrap; gap: calc(6 * var(--u)) calc(8 * var(--u)); max-width: calc(300 * var(--u)); }
.work-row__thumb { position: absolute; top: calc(20 * var(--u)); right: 0; width: calc(88 * var(--u)); height: calc(72 * var(--u)); overflow: hidden; border-radius: 2px; background: #d9d9d9; }
.work-row__thumb img, .work-row__thumb video { width: 100%; height: 100%; object-fit: cover; }

/* Row line (unitedcarriers.com): base line + a highlight that slides in on hover (.6s ease). */
.work-row__line { position: relative; display: block; height: 1px; overflow: hidden; background: rgb(153 153 153 / 0.5); }
.work-row__line::after { content: ""; position: absolute; inset: 0; background: var(--black); transform: translateX(-100%); transition: transform 0.6s ease; }

.work-list__thumb { display: none; }

@media (min-width: 1200px) {
	.work-index { padding-top: calc(145 * var(--u)); padding-bottom: calc(160 * var(--u)); } /* intro text ends y849 → views y994 */

	/* Boxes at Figma's text widths (59 / 50) so both words start where the design has them;
	   Inter Tight here sets ~2px narrower than Figma's render. */
	.work-index__views { justify-content: flex-end; gap: calc(58 * var(--u)); font-size: calc(32 * var(--u)); line-height: calc(45 / 32); letter-spacing: 0.02em; }
	.work-index__view:first-child { width: calc(59 * var(--u)); }
	.work-index__view:last-child { width: calc(50 * var(--u)); }

	.work-list { margin-top: calc(135 * var(--u)); } /* views end y1039 → "Services" y1174 */
	.work-list__head { padding-bottom: calc(31 * var(--u)); } /* labels y1181+30 → line y1242 */
	.work-list__label { font-size: calc(20 * var(--u)); line-height: calc(30 / 20); letter-spacing: 0.02em; }
	.work-list__label--services { display: inline; }
	.work-list__label:first-child { margin: calc(7 * var(--u)) 0 0 0; } /* Figma: "Project" sits 7 below "Services" */

	.work-list__rows { padding-top: calc(34 * var(--u)); } /* line y1243 → first row y1309 (row pad 32) */
	.work-row__link {
		display: flex;
		justify-content: space-between;
		align-items: flex-start;
		gap: calc(24 * var(--u));
		padding: calc(32 * var(--u)) 0 calc(24 * var(--u));
	}
	.work-row__title { font-size: calc(32 * var(--u)); line-height: calc(45 / 32); letter-spacing: 0.02em; }
	.work-row__thumb { display: none; }
	.work-row__line { background: rgb(0 0 0 / 0.5); }
	.work-row__tags { flex-wrap: nowrap; justify-content: flex-end; gap: calc(8 * var(--u)); max-width: none; margin-top: calc(6 * var(--u)); }

	/* Preview: stacked images, the active one fades in; JS moves the stack with the pointer. */
	.work-list__thumb {
		display: grid;
		position: absolute;
		top: 0;
		left: calc(556 * var(--u)); /* x621 − container x65 */
		width: calc(340 * var(--u));
		height: calc(326 * var(--u));
		pointer-events: none;
		z-index: 1;
	}
	.work-list__thumb-item {
		grid-area: 1 / 1;
		overflow: hidden;
		border-radius: 10px;
		background: #d9d9d9; /* projects without an image yet */
		opacity: 0;
		transition: opacity 0.3s cubic-bezier(0.445, 0.05, 0.55, 0.95);
	}
	.work-list__thumb-item.is-active { opacity: 1; }
	.work-list__thumb-item img, .work-list__thumb-item video { width: 100%; height: 100%; object-fit: cover; }
}

@media (min-width: 1200px) and (hover: hover) {
	.work-row:hover .work-row__line::after { transform: translateX(0); }
}

/* =========================================================================
   Work Grid — desktop (1094:308): 2 × 780×875 r10, gap 40, from y1125 (86 below the views);
     on hover: title x+32 bottom 32, 32/45 +2% white; tag right 28 bottom 32, IBM Plex Mono
     20/30 on #00D9BF, pad 3.5/7.7, square; 127px "Full Case" cursor (casecursor.js)
   Mobile (1261:456): 400×449 r5, gap 20, from 32 below the views; title x+24 bottom 24,
     24/30 white; tag right 25, 12/16, centred on the title — always visible.
   Scrim: Figma's card gradient (black 0 → 30% from 20% height down) on every card for legibility.
   ========================================================================= */

.work-index[data-view="grid"] .work-index__view[aria-pressed="true"] { color: #14beaa; }

.work-grid { display: grid; gap: calc(20 * var(--u)); margin-top: calc(32 * var(--u)); }
.work-index:has(.work-grid:not([hidden])) { padding-bottom: calc(40 * var(--u)); } /* last card → dark block (440: y4502 → 4542) */
.work-card__link { position: relative; display: block; }
.work-card__media { position: relative; display: block; overflow: hidden; aspect-ratio: 4 / 5; /* client brief (Figma 400×449) */ border-radius: 5px; background: #d9d9d9; }
.work-card__media img, .work-card__media video { width: 100%; height: 100%; object-fit: cover; }
.work-card__media::after { content: ""; position: absolute; inset: 0; background: linear-gradient(to bottom, transparent 20%, rgb(0 0 0 / 0.3)); }
.work-card__info {
	position: absolute;
	right: calc(25 * var(--u));
	bottom: calc(24 * var(--u));
	left: calc(24 * var(--u));
	z-index: 1;
	display: flex;
	justify-content: space-between;
	align-items: center;
	gap: 12px;
	color: var(--white);
}
.work-card__title { font-size: calc(24 * var(--u)); line-height: calc(30 / 24); }
.work-card__tag {
	flex: none;
	padding: calc(3.5 * var(--u)) calc(7.7 * var(--u));
	background: var(--teal);
	color: var(--black);
	font-family: var(--plex);
	font-size: calc(12 * var(--u));
	line-height: calc(16 / 12);
}

@media (min-width: 1200px) {
	.work-grid { grid-template-columns: repeat(2, calc(780 * var(--u))); gap: calc(40 * var(--u)); margin-top: calc(86 * var(--u)); }
	.work-index:has(.work-grid:not([hidden])) { padding-bottom: calc(44 * var(--u)); } /* last card → dark block y4789 */
	.work-card__media { border-radius: 10px; } /* 4:5 — client brief; Figma 780×875 */
	.work-card__info { right: calc(28 * var(--u)); bottom: calc(32 * var(--u)); left: calc(32 * var(--u)); align-items: flex-end; }
	.work-card__title { font-size: calc(32 * var(--u)); line-height: calc(45 / 32); letter-spacing: 0.02em; }
	.work-card__tag { font-size: calc(20 * var(--u)); line-height: calc(30 / 20); }
	.work-card__media img, .work-card__media video { transition: transform 1.2s var(--ease-out); }
}

/* Desktop mouse: title, tag and scrim appear on hover (Figma shows them on the hovered card only). */
@media (min-width: 1200px) and (hover: hover) {
	.work-card__media::after { opacity: 0; transition: opacity 0.5s var(--ease-out); }
	.work-card__info { opacity: 0; transform: translateY(10px); transition: opacity 0.5s var(--ease-out), transform 0.6s var(--ease-out); }
	.work-card__link:hover .work-card__media::after,
	.work-card__link:hover .work-card__info,
	.work-card__link:focus-visible .work-card__info { opacity: 1; transform: none; }
	.work-card__link:hover .work-card__media img, .work-card__link:hover .work-card__media video { transform: scale(1.02); }
}


/* =========================================================================
   Work single — desktop (1144:4768): title x732 y524 174.8/174.8 300 +1%; services stacked
     on the left x65 from y536 (gap 8; 34 tall, stroke #808080, Azeret 300 14/20 #626262);
     intro x741 y734 517w 20/30 +2%; media 1598×875 r10 from y1121, gap 64.
   Mobile (1261:907): title y239 67/72.6; intro y377 16/24 #4E4E4E; services y602 (gap 10;
     28 tall, pad 8, Azeret 400 12/20 #8E8E8E); media 400×295 r5 from y742, gap 20.
   ========================================================================= */

.project { display: block; padding-top: calc(239 * var(--u)); padding-bottom: calc(60 * var(--u)); }
.project__head { display: grid; }
.project__title { font-size: calc(67 * var(--u)); font-weight: 300; line-height: calc(72.6 / 67); }
.project__intro { order: 1; margin-top: calc(65 * var(--u)); font-size: calc(16 * var(--u)); line-height: calc(24 / 16); color: #4e4e4e; }
.project__tags { order: 2; display: grid; justify-items: start; gap: calc(10 * var(--u)); margin-top: calc(81 * var(--u)); }
.tag.tag--project { padding: calc(4 * var(--u) - 1px) calc(8 * var(--u)); font-weight: 400; }

.project__media { display: grid; gap: var(--project-gap, 0px); margin-top: calc(74 * var(--u)); } /* client brief: images touch unless the project sets a gap (ruh_gap) */
.project__media { --media-r: 5px; }
/* The hero and the grey placeholders keep Figma's frame; the client's own images, videos, GIFs and
   embeds keep their proportions (full width). */
.project__media > * { margin: 0; overflow: hidden; border-radius: var(--media-r); }
.project__frame,
.project__media > .media-placeholder { aspect-ratio: 400 / 295; background: #cfcfcf; }
.project__media > * img,
.project__media > * video { display: block; width: 100%; height: auto; }
.project__frame img,
.project__frame video { height: 100%; object-fit: cover; }
/* Gap 0 (default): the images touch — only the outer corners stay rounded */
.project__media.is-flush > * { border-radius: 0; }
.project__media.is-flush > :first-child { border-radius: var(--media-r) var(--media-r) 0 0; }
.project__media.is-flush > :last-child { border-radius: 0 0 var(--media-r) var(--media-r); }
.project__media.is-flush > :only-child { border-radius: var(--media-r); }
/* Grey placeholders (demo / not replaced yet) aren't real media: they keep Figma's separate boxes — rounded,
   with the design gap — whatever the project's gap; otherwise five of them merge into one long grey slab. */
.project__media { --ph-gap: calc(20 * var(--u)); }
.project__media > .media-placeholder { border-radius: var(--media-r) !important; }
.project__media.is-flush > :has(+ .media-placeholder) { border-bottom-left-radius: var(--media-r); border-bottom-right-radius: var(--media-r); }
.project__media.is-flush > .media-placeholder + * { border-top-left-radius: var(--media-r); border-top-right-radius: var(--media-r); }
.project__media > .project__frame + .media-placeholder,
.project__media > .media-placeholder + .media-placeholder { margin-top: max(0px, calc(var(--ph-gap) - var(--project-gap, 0px))); }

@media (min-width: 1200px) {
	.project { padding-top: calc(524 * var(--u)); padding-bottom: calc(102 * var(--u)); } /* last media → dark y6793 */
	.project__head { grid-template-columns: calc(677 * var(--u)) 1fr; align-items: start; }
	.project__title { grid-column: 2; grid-row: 1; margin-left: calc(-9 * var(--u)); font-size: calc(174.8 * var(--u)); line-height: 1; letter-spacing: 0.01em; }
	.project__tags { grid-column: 1; grid-row: 1; order: 0; gap: calc(8 * var(--u)); margin: calc(12 * var(--u)) 0 0 calc(1 * var(--u)); }
	.tag.tag--project { padding: calc(7 * var(--u) - 1px) calc(15 * var(--u)); border-color: #808080; font-size: calc(14 * var(--u)); font-weight: 300; line-height: calc(20 / 14); color: #626262; }
	.project__intro { grid-column: 2; max-width: calc(517 * var(--u)); margin-top: calc(35 * var(--u)); font-size: calc(20 * var(--u)); line-height: calc(30 / 20); letter-spacing: 0.02em; color: var(--black); }
	.project__media { margin: calc(207 * var(--u)) calc(1 * var(--u)) 0; } /* intro y944 (+ Figma's trailing empty line 30) → y1121 */
	.project__media { --media-r: 10px; --ph-gap: calc(64 * var(--u)); }
	.project__frame,
	.project__media > .media-placeholder { aspect-ratio: 1598 / 875; }
}

/* =========================================================================
   Related Projects (dark end) — desktop: title y+160 56/64 300; Prev/Next 20/30 (gap 74);
     cards 512 (media 689 r10) gap 32 from +97; name 32/45 +2% 29 below; footer title +183.
   Mobile: title +60 36/40 300 +2%; cards 297 (media 400 r4) gap 12 from +32, swipe;
     name 20/28 22 below; footer title +80.
   ========================================================================= */

.related { padding: calc(60 * var(--u)) 0 calc(20 * var(--u)); background: var(--black); color: var(--white); }
.related__title { font-size: calc(36 * var(--u)); font-weight: 300; line-height: calc(40 / 36); letter-spacing: 0.02em; }
.related__nav { display: none; }
.related__track {
	display: grid;
	max-width: none; /* WP post-template caps it at 100% — the track bleeds past the column */
	grid-auto-flow: column;
	grid-auto-columns: calc(297 * var(--u));
	gap: calc(12 * var(--u));
	margin: calc(32 * var(--u)) calc(-1 * var(--gutter)) 0;
	padding: 0 var(--gutter);
	scroll-padding-inline: var(--gutter);
	overflow-x: auto;
	scroll-snap-type: none; /* free scrolling (slider.js) */
	scrollbar-width: none;
	overscroll-behavior-x: contain;
}
.related__track::-webkit-scrollbar { display: none; }
.related-card { scroll-snap-align: start; }
.related-card__link { display: block; }
.related-card__media { display: block; overflow: hidden; aspect-ratio: 297 / 400; border-radius: 4px; background: #1c1c20; }
.related-card__media img, .related-card__media video { width: 100%; height: 100%; object-fit: cover; }
.related-card__title { display: block; margin-top: calc(22 * var(--u)); font-size: calc(20 * var(--u)); line-height: calc(28 / 20); }

@media (min-width: 1200px) {
	.related { padding: calc(160 * var(--u)) 0 calc(75 * var(--u)); } /* + footer 108 = 183 */
	.related__head { display: flex; justify-content: space-between; align-items: flex-start; }
	.related__nav { display: flex; } /* sizes: Prev / Next rules in components.css */
	.related__title { font-size: calc(56 * var(--u)); line-height: calc(64 / 56); letter-spacing: 0; }
	.related__track { grid-auto-columns: calc(512 * var(--u)); gap: calc(32 * var(--u)); margin: calc(97 * var(--u)) 0 0; padding: 0; scroll-padding-inline: 0; }
	.related-card__media { aspect-ratio: 512 / 689; border-radius: 10px; }
	.related-card__title { margin-top: calc(29 * var(--u)); font-size: calc(32 * var(--u)); line-height: calc(45 / 32); letter-spacing: 0.02em; }
}