/*
 * AH Work Tabs. Tabs and panels come from ah-base (.ah-tabs, .ah-panel); this file styles the
 * four panels. Cards are white and keep their own colours on any section background; only the
 * leads, the name wall, the shelf labels and the deck caption follow the tone (ah-on-dark).
 * Cards that tilt reveal with `translate` (not transform), so the tilt still works after the reveal.
 */
.ah-wt {
	color: var(--ah-ink);
	font-family: var(--ah-f-body);
	font-size: 1.0625rem;
	line-height: 1.75;
	-webkit-font-smoothing: antialiased;
}
.ah-wt .ah-wt__tab .ah-wt__tl { white-space: nowrap; }
/* without the motion script (no JS, or reduced motion) the selected tab carries its own navy fill */
html:not(.ah-motion) .ah-wt .ah-wt__tabs .ah-tab[aria-selected="true"] { background: var(--ah-navy); }
.ah-wt .ah-wt__panel { margin-block-start: 26px; }
.ah-wt .ah-wt__panel:focus-visible { outline: 2px solid var(--ah-gold); outline-offset: 8px; border-radius: 10px; }
.ah-wt .ah-wt__lead { max-width: 70ch; margin: 0 0 22px; color: var(--ah-muted); }
.ah-wt .ah-wt__lead.ah-on-dark { color: var(--ah-on-navy-muted); }
.ah-wt .ah-wt__empty { margin: 0; padding: 24px; border: 1px dashed var(--ah-line); border-radius: 10px; color: var(--ah-soft); text-align: center; }

/* reveal for tilting cards: opacity + translate, so .ah-tilt keeps its transform */
.ah-motion .ah-wt .ah-wt__up {
	opacity: 0;
	translate: 0 22px;
	transition: opacity .9s var(--ah-ease), translate .9s var(--ah-ease), transform .5s var(--ah-ease);
}
.ah-motion .ah-wt .ah-wt__up.seen { opacity: 1; translate: none; }
.ah-motion .ah-wt .ah-wt__up.is-tilting { transition: opacity .9s var(--ah-ease), translate .9s var(--ah-ease), transform .08s linear; }
.ah-motion .ah-wt .ah-wt__case.ah-wt__up:nth-child(even) { transition-delay: .12s, .12s, 0s; }

/* links and arrows */
.ah-wt .ah-wt__more .ah-btn__arr { flex: none; width: 1em; height: 1em; transition: translate .35s var(--ah-ease); }
[dir="rtl"] .ah-wt .ah-wt__more .ah-btn__arr { scale: -1 1; }
.ah-wt a.ah-wt__more:focus-visible { outline: 2px solid var(--ah-gold); outline-offset: 3px; border-radius: 2px; }
.ah-wt .ah-wt__stretch::after { content: ""; position: absolute; inset: 0; z-index: 5; }
.ah-wt .ah-wt__case:hover .ah-wt__more .ah-btn__arr,
.ah-wt .ah-wt__feat:hover .ah-wt__more .ah-btn__arr { translate: calc(var(--ah-dir) * 4px) 0; }
.ah-wt .ah-wt__case:hover a.ah-wt__more,
.ah-wt .ah-wt__feat:hover a.ah-wt__more { color: var(--ah-ink); }

/* ------------------------------------------------------------- campaigns */
.ah-wt .ah-wt__cgrid { display: grid; grid-template-columns: repeat(12, minmax(0, 1fr)); gap: 18px; }
.ah-wt .ah-wt__case {
	position: relative;
	display: grid;
	grid-template-rows: auto 1fr;
	grid-column: span 6;
	min-width: 0;
	overflow: hidden;
	border: 1px solid var(--ah-line);
	border-radius: 10px;
	background: var(--ah-paper);
	color: var(--ah-ink);
}
.ah-wt .ah-wt__case--c4 { grid-column: span 4; }
.ah-wt .ah-wt__case--c5 { grid-column: span 5; }
.ah-wt .ah-wt__case--c7 { grid-column: span 7; }
.ah-wt .ah-wt__case--c8 { grid-column: span 8; }
.ah-wt .ah-wt__case--c12 { grid-column: span 12; }
.ah-wt .ah-wt__case:hover { border-color: var(--ah-gold); }
.ah-wt .ah-wt__case:focus-within { border-color: var(--ah-gold); }

.ah-wt .ah-wt__fig {
	position: relative;
	height: clamp(230px, 23vw, 310px);
	margin: 0;
	overflow: hidden;
	background: var(--ah-navy);
}
.ah-wt .ah-wt__case--c12 .ah-wt__fig { height: clamp(260px, 30vw, 420px); }
.ah-wt .ah-wt__fig .ah-wt__img {
	display: block;
	width: 100%;
	height: 100%;
	max-width: none;
	object-fit: cover;
	transition: transform 1.2s var(--ah-ease), translate .5s var(--ah-ease);
}
.ah-wt .ah-wt__fig--fit .ah-wt__img { object-fit: contain; padding: 14px 0; }
.ah-wt .ah-wt__case:hover .ah-wt__img { transform: scale(1.05); }
.ah-wt .ah-wt__fig--par .ah-wt__img { translate: calc(var(--mx, 0) * -16px) calc(var(--my, 0) * -12px + var(--ah-wt-py, 0%)); }
/* a soft shade under the gold number so it reads on light photos */
.ah-wt .ah-wt__fig--big::after {
	content: "";
	position: absolute;
	z-index: 1;
	inset: auto 0 0;
	height: 55%;
	background: linear-gradient(to top, rgba(9, 18, 42, .62), rgba(9, 18, 42, 0));
	pointer-events: none;
}
.ah-wt .ah-wt__client {
	position: absolute;
	z-index: 2;
	top: 10px;
	inset-inline-start: 10px;
	max-width: calc(100% - 20px);
	overflow: hidden;
	padding: 3px 10px;
	border-radius: 999px;
	background: rgba(9, 18, 42, .82);
	color: var(--ah-on-navy);
	font-family: var(--ah-f-en), var(--ah-f-body);
	font-size: .74rem;
	line-height: 1.6;
	white-space: nowrap;
	text-overflow: ellipsis;
}
.ah-wt .ah-wt__big {
	position: absolute;
	z-index: 2;
	bottom: 10px;
	inset-inline-end: 12px;
	direction: ltr;
	font-family: var(--ah-f-display);
	font-weight: 800;
	font-size: 2.3rem;
	line-height: 1;
	color: var(--ah-gold-hi);
	text-shadow: 0 2px 24px rgba(0, 0, 0, .6);
	transform: translateZ(40px);
}
/* card without a photo: the number becomes the visual */
.ah-wt .ah-wt__vis {
	display: grid;
	place-items: center;
	align-content: center;
	gap: 4px;
	width: 100%;
	height: 100%;
	background: radial-gradient(80% 80% at 50% 40%, var(--ah-navy-2), var(--ah-deep));
	color: var(--ah-gold-hi);
	transition: transform 1.2s var(--ah-ease);
}
.ah-wt .ah-wt__case:hover .ah-wt__vis { transform: scale(1.04); }
.ah-wt .ah-wt__vis b { direction: ltr; font-family: var(--ah-f-display); font-weight: 800; font-size: 3.4rem; line-height: 1.1; }
.ah-wt .ah-wt__vis .ah-wt__vsm { font-family: var(--ah-f-mono); font-weight: 500; font-size: .7rem; line-height: 1.5; letter-spacing: .3em; text-transform: uppercase; color: var(--ah-on-navy-muted); }
.ah-wt .ah-wt__vis .ah-wt__vsm--ar { font-family: var(--ah-f-body); font-size: .85rem; letter-spacing: 0; }

.ah-wt .ah-wt__body { display: grid; gap: 10px; align-content: start; min-width: 0; padding: 18px 20px 20px; }
.ah-wt .ah-wt__title {
	margin: 0;
	font-family: var(--ah-f-display);
	font-weight: 800;
	font-size: 1.2rem;
	line-height: 1.45;
	letter-spacing: 0;
	color: var(--ah-ink);
	text-wrap: balance;
}
.ah-wt .ah-wt__k { display: flex; flex-wrap: wrap; gap: 6px 20px; margin: 0; padding-top: 10px; border-top: 1px solid var(--ah-line); }
.ah-wt .ah-wt__k > div { display: grid; min-width: 0; }
.ah-wt .ah-wt__k dd {
	order: -1;
	margin: 0;
	font-family: var(--ah-f-display);
	font-weight: 600;
	font-size: .95rem;
	line-height: 1.6;
	color: var(--ah-ink);
	unicode-bidi: plaintext;
	text-align: match-parent;
}
.ah-wt .ah-wt__k dt { margin: 0; font-weight: 400; font-size: .74rem; line-height: 1.5; color: var(--ah-soft); }

/* seasonal creatives row (always navy) */
.ah-wt .ah-wt__season {
	display: grid;
	grid-template-columns: minmax(0, 1.15fr) repeat(var(--n, 2), minmax(0, .85fr));
	gap: 14px;
	align-items: stretch;
	margin-top: 18px;
	padding: 14px;
	overflow: hidden;
	border-radius: 12px;
	background: var(--ah-navy);
	color: var(--ah-on-navy);
}
.ah-wt .ah-wt__stxt { display: grid; gap: 10px; align-content: center; padding: 14px 12px; }
.ah-wt .ah-wt__stitle {
	margin: 0;
	font-family: var(--ah-f-display);
	font-weight: 700;
	font-size: 1.4rem;
	line-height: 1.45;
	letter-spacing: 0;
	color: var(--ah-on-navy);
	text-wrap: balance;
}
.ah-wt .ah-wt__sp { margin: 0; color: var(--ah-on-navy-muted); }
.ah-wt .ah-wt__cr { position: relative; min-height: 300px; margin: 0; overflow: hidden; border-radius: 10px; background: var(--ah-navy-2); }
.ah-wt .ah-wt__cr .ah-wt__zoom.ah-wt__zoom {
	position: absolute;
	inset: 0;
	display: block;
	width: 100%;
	height: 100%;
	margin: 0;
	padding: 0;
	border: 0;
	border-radius: 0;
	background: none;
	box-shadow: none;
	cursor: zoom-in;
}
.ah-wt .ah-wt__cr .ah-wt__crimg { position: absolute; inset: 0; display: block; width: 100%; height: 100%; max-width: none; object-fit: cover; transition: transform 1s var(--ah-ease); }
.ah-wt .ah-wt__cr:hover .ah-wt__crimg,
.ah-wt .ah-wt__cr:focus-within .ah-wt__crimg { transform: scale(1.05); }
.ah-wt .ah-wt__cr .ah-wt__zoom:focus-visible { outline: 2px solid var(--ah-gold-hi); outline-offset: -4px; border-radius: 10px; }
.ah-wt .ah-wt__crcap {
	position: absolute;
	z-index: 1;
	bottom: 10px;
	inset-inline-start: 10px;
	padding: 3px 10px;
	border-radius: 999px;
	background: rgba(9, 18, 42, .86);
	color: var(--ah-on-navy);
	font-size: .74rem;
	line-height: 1.6;
	pointer-events: none;
}

/* ------------------------------------------------------------- phones (ring and shelf) */
.ah-wt .ah-wt__phone { flex: none; display: grid; justify-items: center; gap: 8px; width: 150px; }
.ah-wt .ah-wt__scr {
	width: 150px;
	height: 300px;
	overflow: hidden;
	border: 6px solid var(--ah-ink);
	border-radius: 22px;
	background: var(--ah-ink);
	box-shadow: 0 18px 30px -18px rgba(0, 0, 0, .7);
}
.ah-wt .ah-wt__scr .ah-wt__simg { display: block; width: 100%; height: 100%; max-width: none; object-fit: cover; object-position: top; -webkit-user-drag: none; }
.ah-wt .ah-wt__pname { font-family: var(--ah-f-en), var(--ah-f-body); font-size: .78rem; line-height: 1.5; color: var(--ah-muted); white-space: nowrap; }

/* ------------------------------------------------------------- websites: ring */
.ah-wt .ah-wt__ringwrap {
	position: relative;
	overflow-x: auto;
	overflow-y: hidden;
	border-radius: 16px;
	background: radial-gradient(60% 70% at 50% 60%, var(--ah-navy-2), var(--ah-deep));
	scroll-snap-type: x mandatory;
	scrollbar-width: none;
	overscroll-behavior-x: contain;
	touch-action: pan-x pan-y;
}
.ah-wt .ah-wt__ringwrap::-webkit-scrollbar { display: none; }
.ah-wt .ah-wt__ringwrap:focus-visible { outline: 2px solid var(--ah-gold); outline-offset: 3px; }
.ah-wt .ah-wt__ring { display: flex; gap: 16px; width: max-content; padding: 26px 22px 24px; }
.ah-wt .ah-wt__ringwrap .ah-wt__phone { scroll-snap-align: center; }
.ah-wt .ah-wt__ringwrap .ah-wt__pname { color: var(--ah-on-navy-muted); }
.ah-wt .ah-wt__ringhint { display: none; }

.ah-wt .ah-wt__ringwrap.is-3d {
	display: grid;
	place-items: center;
	height: 460px;
	overflow: hidden;
	perspective: 1500px;
	scroll-snap-type: none;
	touch-action: pan-y;
	cursor: grab;
	-webkit-user-select: none;
	user-select: none;
}
.ah-wt .ah-wt__ringwrap.is-3d.is-drag { cursor: grabbing; }
.ah-wt .ah-wt__ringwrap.is-3d::after {
	content: "";
	position: absolute;
	left: 10%;
	right: 10%;
	bottom: 38px;
	height: 30px;
	border-radius: 50%;
	background: radial-gradient(closest-side, rgba(0, 0, 0, .45), transparent);
	pointer-events: none;
}
.ah-wt .ah-wt__ringwrap.is-3d .ah-wt__ring {
	position: relative;
	display: block;
	width: 150px;
	height: 330px;
	padding: 0;
	transform-style: preserve-3d;
	will-change: transform;
}
.ah-wt .ah-wt__ringwrap.is-3d .ah-wt__phone { position: absolute; inset: 0; width: auto; backface-visibility: hidden; -webkit-backface-visibility: hidden; }
.ah-wt .ah-wt__ringwrap.is-3d .ah-wt__ringhint {
	position: absolute;
	z-index: 1;
	bottom: 12px;
	inset-inline: 0;
	display: block;
	font-size: .8rem;
	line-height: 1.5;
	color: var(--ah-on-navy-muted);
	text-align: center;
	pointer-events: none;
	transition: opacity .4s;
}
.ah-wt .ah-wt__ringwrap.is-3d.is-drag .ah-wt__ringhint { opacity: 0; }

.ah-wt .ah-wt__names { display: flex; flex-wrap: wrap; gap: 6px; margin-top: 16px; }
.ah-wt .ah-wt__names span {
	padding: 2px 10px;
	border: 1px solid var(--ah-line);
	border-radius: 999px;
	background: rgba(255, 255, 255, .5);
	color: var(--ah-muted);
	font-family: var(--ah-f-en), var(--ah-f-body);
	font-size: .8rem;
	line-height: 1.6;
}
.ah-wt .ah-wt__names.ah-on-dark span { border-color: var(--ah-line-navy); background: rgba(255, 255, 255, .04); color: var(--ah-on-navy-muted); }

/* ------------------------------------------------------------- stores */
.ah-wt .ah-wt__stores { display: grid; grid-template-columns: minmax(0, .9fr) minmax(0, 1.1fr); gap: 28px; align-items: center; }
.ah-wt .ah-wt__stores--one { grid-template-columns: minmax(0, 1fr); }
.ah-wt .ah-wt__feat {
	position: relative;
	display: grid;
	overflow: hidden;
	border: 1px solid var(--ah-line);
	border-radius: 12px;
	background: var(--ah-paper);
	color: var(--ah-ink);
}
.ah-wt .ah-wt__feat:hover,
.ah-wt .ah-wt__feat:focus-within { border-color: var(--ah-gold); }
.ah-wt .ah-wt__feat .ah-wt__fimg { display: block; width: 100%; height: auto; max-width: none; aspect-ratio: 16 / 8; object-fit: cover; }
.ah-wt .ah-wt__fbody { display: grid; gap: 10px; padding: 20px; }
.ah-wt .ah-wt__ftitle {
	margin: 0;
	font-family: var(--ah-f-display);
	font-weight: 800;
	font-size: 1.25rem;
	line-height: 1.5;
	letter-spacing: 0;
	color: var(--ah-ink);
	text-wrap: balance;
}
.ah-wt .ah-wt__ftext { margin: 0; color: var(--ah-muted); font-size: .94rem; }

.ah-wt .ah-wt__isowrap { overflow: hidden; padding: 30px 0 60px; perspective: 1800px; container-type: inline-size; }
.ah-wt .ah-wt__iso { display: flex; justify-content: center; gap: 14px; transform: rotateX(26deg) rotateZ(-10deg); transform-style: preserve-3d; }
.ah-wt .ah-wt__iso .ah-wt__phone { width: auto; transform-style: preserve-3d; transition: transform .6s var(--ah-spring); }
.ah-wt .ah-wt__iso .ah-wt__scr { --w: 110px; width: var(--w); height: calc(var(--w) * 2.13); border-width: 5px; border-radius: 16px; box-shadow: 12px 22px 30px -12px rgba(9, 18, 42, .55); }
/* five phones fit the column (the tilted shelf is wider than its box) */
@supports (width: 1cqi) {
	.ah-wt .ah-wt__iso .ah-wt__scr { --w: clamp(64px, (86cqi - 56px) / 5, 110px); }
}
.ah-wt .ah-wt__iso .ah-wt__phone:hover { transform: translateZ(70px) translateY(-18px); }
.ah-wt .ah-wt__isowrap.ah-on-dark .ah-wt__pname { color: var(--ah-on-navy-muted); }
.ah-wt .ah-wt__iso.is-playing .ah-wt__phone { animation: ah-wt-float 5s ease-in-out infinite; }
.ah-wt .ah-wt__iso.is-playing .ah-wt__phone:nth-child(5n + 2) { animation-delay: -1s; }
.ah-wt .ah-wt__iso.is-playing .ah-wt__phone:nth-child(5n + 3) { animation-delay: -2s; }
.ah-wt .ah-wt__iso.is-playing .ah-wt__phone:nth-child(5n + 4) { animation-delay: -3s; }
.ah-wt .ah-wt__iso.is-playing .ah-wt__phone:nth-child(5n + 5) { animation-delay: -4s; }
@keyframes ah-wt-float { 50% { translate: 0 0 22px; } }

/* ------------------------------------------------------------- emails: fanned deck */
.ah-wt .ah-wt__fan {
	--k: 1;
	position: relative;
	display: grid;
	place-items: center;
	height: 520px;
	perspective: 1400px;
	overflow-x: clip;
}
.ah-wt .ah-wt__fan .ah-wt__mail.ah-wt__mail {
	position: absolute;
	z-index: var(--z, 1);
	display: block;
	width: 200px;
	height: 430px;
	margin: 0;
	padding: 0;
	overflow: hidden;
	border: 1px solid var(--ah-line);
	border-radius: 8px;
	background: var(--ah-paper);
	box-shadow: 0 24px 40px -24px rgba(9, 18, 42, .6);
	cursor: zoom-in;
	transform: translateX(calc(var(--x, 0px) * var(--k))) rotate(var(--r, 0deg)) translateY(var(--y, 0px));
	transition: transform .9s var(--ah-spring), box-shadow .4s;
}
.ah-motion .ah-wt .ah-wt__fan:not(.seen) .ah-wt__mail.ah-wt__mail { transform: rotate(var(--r0, 0deg)) translateY(var(--y0, 0px)); }
.ah-wt .ah-wt__fan .ah-wt__mail.ah-wt__mail:hover,
.ah-wt .ah-wt__fan .ah-wt__mail.ah-wt__mail:focus-visible {
	z-index: 9;
	background: var(--ah-paper);
	box-shadow: 0 40px 60px -26px rgba(9, 18, 42, .7);
	transform: translateX(calc(var(--x, 0px) * var(--k))) rotate(0deg) translateY(-24px) scale(1.06);
}
.ah-wt .ah-wt__fan .ah-wt__mail:focus-visible { outline: 2px solid var(--ah-gold); outline-offset: 3px; }
.ah-wt .ah-wt__mail .ah-wt__mimg { display: block; width: 100%; height: 100%; max-width: none; object-fit: cover; object-position: top; -webkit-user-drag: none; }
.ah-wt .ah-wt__fancap { margin: 8px 0 0; text-align: center; }

/* ------------------------------------------------------------- scroll parallax on case photos */
@property --ah-wt-py { syntax: "<percentage>"; inherits: false; initial-value: 0%; }
@supports (animation-timeline: view()) {
	@media (prefers-reduced-motion: no-preference) {
		.ah-wt .ah-wt__fig--par .ah-wt__img {
			scale: 1.14;
			animation: ah-wt-par linear both;
			animation-timeline: view();
			animation-range: cover 0% cover 100%;
		}
	}
}
@keyframes ah-wt-par {
	from { --ah-wt-py: -5%; }
	to { --ah-wt-py: 5%; }
}

/* ------------------------------------------------------------- breakpoints */
@media (max-width: 1200px) {
	.ah-wt .ah-wt__fan { --k: .8; }
}
@media (max-width: 1024px) {
	.ah-wt .ah-wt__case.ah-wt__case { grid-column: span 6; }
	.ah-wt .ah-wt__case--c12.ah-wt__case--c12 { grid-column: span 12; }
	.ah-wt .ah-wt__season { grid-template-columns: repeat(var(--n, 2), minmax(0, 1fr)); }
	.ah-wt .ah-wt__stxt { grid-column: 1 / -1; }
	.ah-wt .ah-wt__cr { min-height: 220px; }
	.ah-wt .ah-wt__stores { grid-template-columns: minmax(0, 1fr); }
	.ah-wt .ah-wt__fan { --k: .62; }
	.ah-wt .ah-wt__ringwrap.is-3d { height: 420px; }
	.ah-wt .ah-wt__ringwrap.is-3d .ah-wt__ring { width: 128px; height: 290px; }
	.ah-wt .ah-wt__ringwrap.is-3d .ah-wt__scr { width: 128px; height: 256px; border-radius: 19px; }
}
@media (max-width: 767px) {
	.ah-wt { font-size: 1.03rem; }
	.ah-wt .ah-wt__panel { margin-block-start: 22px; }
	.ah-wt .ah-wt__cgrid { grid-template-columns: minmax(0, 1fr); gap: 14px; }
	.ah-wt .ah-wt__case.ah-wt__case,
	.ah-wt .ah-wt__case--c12.ah-wt__case--c12 { grid-column: auto; }
	.ah-wt .ah-wt__fig,
	.ah-wt .ah-wt__case--c12 .ah-wt__fig { height: auto; aspect-ratio: 16 / 10; }
	.ah-wt .ah-wt__big { font-size: 2rem; }
	.ah-wt .ah-wt__season { padding: 12px; gap: 10px; }
	.ah-wt .ah-wt__stxt { padding: 10px 8px; }
	.ah-wt .ah-wt__ring { gap: 12px; padding: 20px 18px; }
	.ah-wt .ah-wt__ringwrap .ah-wt__phone { width: 132px; }
	.ah-wt .ah-wt__ringwrap .ah-wt__scr { width: 132px; height: 264px; border-width: 5px; border-radius: 19px; }
	.ah-wt .ah-wt__isowrap { padding: 20px 0 44px; }
	.ah-wt .ah-wt__iso { gap: 10px; }
	.ah-wt .ah-wt__iso .ah-wt__scr.ah-wt__scr { --w: 76px; border-width: 4px; border-radius: 12px; }
	@supports (width: 1cqi) {
		.ah-wt .ah-wt__iso .ah-wt__scr.ah-wt__scr { --w: clamp(56px, (90cqi - 30px) / 4, 76px); }
	}
	.ah-wt .ah-wt__iso .ah-wt__phone:nth-child(n + 5) { display: none; }
	.ah-wt .ah-wt__iso .ah-wt__pname { font-size: .66rem; }
	.ah-wt .ah-wt__fan { --k: .24; height: 360px; }
	.ah-wt .ah-wt__fan .ah-wt__mail.ah-wt__mail { width: 132px; height: 290px; }
}

@media (prefers-reduced-motion: reduce) {
	.ah-wt .ah-wt__img,
	.ah-wt .ah-wt__vis,
	.ah-wt .ah-wt__crimg,
	.ah-wt .ah-wt__iso .ah-wt__phone,
	.ah-wt .ah-wt__fan .ah-wt__mail.ah-wt__mail,
	.ah-wt .ah-wt__more .ah-btn__arr { transition: none; }
	.ah-wt .ah-wt__iso.is-playing .ah-wt__phone { animation: none; }
	.ah-wt .ah-wt__fig--par .ah-wt__img { translate: none; }
}