/*
Theme Name: Amr Berri Film & Commercial Director
Theme URI: https://amrberri.com
Author: Amr Berri
Description: A cinematic, playful portfolio theme for film and commercial director Amr Berri.
Version: 0.46.0
Requires at least: 6.5
Requires PHP: 8.0
Text Domain: amr-berri
*/

:root {
  --ab-black: #07080c;
  --ab-ink: #11131c;
  --ab-ivory: #f4eddf;
  --ab-sand: #c9c0b3;
  --ab-muted: #918b85;
  --ab-midnight: #0b1020;
  --ab-red: #e94b32;
  --ab-red-deep: #c43a22; /* red text on butter (3.7:1); the brand red there is only 2.65:1 */
  --ab-butter: #f2d66d;
  --ab-line: rgba(245, 239, 227, 0.23);
  --ab-gutter: clamp(18px, 3vw, 52px);
  --ab-display: "Bricolage Grotesque", "Arial Black", sans-serif;
  --ab-sans: "DM Sans", Helvetica, Arial, sans-serif;
  --ab-arabic: "Alexandria", "Arial", sans-serif;
}

* {
  box-sizing: border-box;
}

html {
  background: var(--ab-black);
  scroll-behavior: smooth;
}

body {
  margin: 0;
  overflow-x: hidden;
  background: var(--ab-black);
  color: var(--ab-ivory);
  font-family: var(--ab-sans);
  font-size: 16px;
  line-height: 1.25;
  -webkit-font-smoothing: antialiased;
}

body.admin-bar .ab-header {
  top: 32px;
}

a {
  color: inherit;
  text-decoration: none;
}

button,
input,
textarea {
  font: inherit;
}

img {
  display: block;
  max-width: 100%;
}

::selection {
  background: var(--ab-butter);
  color: var(--ab-ink);
}

.screen-reader-text {
  position: absolute;
  width: 1px;
  height: 1px;
  overflow: hidden;
  clip: rect(1px, 1px, 1px, 1px);
  clip-path: inset(50%);
  white-space: nowrap;
}

.screen-reader-text:focus {
  top: 10px;
  left: 10px;
  z-index: 99999;
  width: auto;
  height: auto;
  clip: auto;
  clip-path: none;
  padding: 12px 16px;
  background: #fff;
  color: #000;
}

.ab-header {
	position: fixed;
  inset: 0 0 auto;
  z-index: 20;
  display: flex;
  align-items: center;
  justify-content: space-between;
  padding: 18px var(--ab-gutter);
  color: #fff;
  font-size: 11px;
  letter-spacing: 0.08em;
  text-transform: uppercase;
  transition: background 350ms ease, color 350ms ease, box-shadow 350ms ease, padding 350ms ease, backdrop-filter 350ms ease;
}

.ab-brand {
	display: flex;
	align-items: center;
	gap: 10px;
  font-family: var(--ab-display);
  text-transform: none;
}

.ab-brand__latin {
	position: relative;
	display: flex;
	width: 46px;
	height: 28px;
	align-items: center;
	justify-content: center;
	border: 1px solid rgba(255, 255, 255, 0.72);
	border-radius: 45% 55% 42% 58% / 58% 38% 62% 42%;
	background: rgba(7, 8, 12, 0.24);
	font-size: 18px;
	font-weight: 800;
	letter-spacing: -0.13em;
	line-height: 1;
	transform: rotate(-3deg);
	transition: border-radius 300ms ease, background 300ms ease, transform 300ms ease;
}

.ab-brand__latin b {
	font: inherit;
}

.ab-brand__latin b:last-of-type {
	color: var(--ab-butter);
}

.ab-brand__latin i {
	position: absolute;
	right: -4px;
	bottom: -2px;
	color: var(--ab-red);
	font-size: 24px;
	font-style: normal;
}

.ab-brand__arabic {
	display: none;
	font-family: var(--ab-arabic);
	font-size: 11px;
	font-weight: 700;
	letter-spacing: -0.04em;
	line-height: 1.5;
	padding-bottom: 0.08em;
}

.ab-brand:hover .ab-brand__latin,
.ab-brand:focus-visible .ab-brand__latin {
	border-radius: 50%;
	background: var(--ab-red);
	transform: rotate(3deg) scale(1.06);
}

.ab-header.is-scrolled {
	padding-top: 12px;
	padding-bottom: 12px;
	background: rgba(7, 8, 12, 0.76);
	backdrop-filter: blur(18px);
}

/* Over the ivory contact section (site.js adds .is-on-light). */
.ab-header.is-scrolled.is-on-light {
	background: rgba(244, 237, 223, 0.86);
	box-shadow: 0 1px 0 rgba(11, 16, 32, 0.12);
	color: var(--ab-ink);
}

.ab-header.is-on-light .ab-brand__latin {
	border-color: var(--ab-ink);
	background: var(--ab-ink);
	color: var(--ab-ivory);
}

.ab-header.is-on-light .ab-nav a::after {
	background: var(--ab-red);
}

.ab-nav {
  display: none;
  gap: clamp(20px, 3vw, 46px);
}

.ab-nav a {
  position: relative;
  font-size: 12px;
  font-weight: 600;
}

.ab-nav a::after {
  position: absolute;
  right: 0;
  bottom: -6px;
  left: 0;
  height: 2px;
  border-radius: 999px;
  background: var(--ab-butter);
  content: "";
  transform: scaleX(0);
  transform-origin: right;
  transition: transform 350ms cubic-bezier(0.19, 1, 0.22, 1);
}

.ab-nav a:hover::after,
.ab-nav a:focus-visible::after {
  transform: scaleX(1);
  transform-origin: left;
}

.ab-menu {
  position: relative;
}

.ab-menu summary {
  cursor: pointer;
  list-style: none;
}

.ab-menu summary::-webkit-details-marker {
  display: none;
}

.ab-menu__close,
.ab-menu[open] .ab-menu__open {
  display: none;
}

.ab-menu[open] .ab-menu__close {
  display: inline;
}

.ab-menu nav {
  position: absolute;
  top: 30px;
  right: 0;
  display: grid;
  min-width: 158px;
  overflow: hidden;
  border: 1px solid rgba(255, 255, 255, 0.34);
  border-radius: 22px 4px 22px 22px;
  background: rgba(23, 13, 18, 0.96);
  backdrop-filter: blur(12px);
}

.ab-menu nav a {
  padding: 12px 15px;
  border-bottom: 1px solid rgba(255, 255, 255, 0.14);
}

.ab-menu nav a:last-child {
  border-bottom: 0;
}

.ab-hero {
  position: relative;
  display: flex;
  min-height: 100svh;
  align-items: flex-end;
  overflow: hidden;
  padding: 92px var(--ab-gutter) 28px;
  background: var(--ab-black);
}

/* Shared up-right arrow (see amr_berri_arrow()): scales with the text it sits in. */
.ab-arrow {
  display: inline-block;
  width: 1em;
  height: 1em;
  vertical-align: -0.12em;
  overflow: visible;
}

.ab-project__view .ab-arrow {
  stroke-width: 2.4;
}

.ab-hero__blob {
  position: absolute;
  top: 20%;
  right: -22vw;
  width: min(74vw, 760px);
  aspect-ratio: 1;
  border: 1px solid rgba(242, 214, 109, 0.42);
  border-radius: 42% 58% 64% 36% / 58% 38% 62% 42%;
  transform: rotate(-18deg);
  animation: ab-blob-float 9s ease-in-out infinite alternate;
}

.ab-hero h1 {
  transform: translate3d(0, var(--ab-hero-text-y, 0px), 0);
  opacity: var(--ab-hero-text-o, 1);
}

.ab-hero h1 {
  position: relative;
  z-index: 2;
  width: 100%;
  margin: 0 0 48px;
  font-family: var(--ab-display);
  font-size: clamp(68px, 32vw, 170px);
  font-weight: 800;
  letter-spacing: -0.05em;
  line-height: 0.72;
  text-shadow: 0 12px 46px rgba(0, 0, 0, 0.72);
  text-transform: uppercase;
}

.ab-hero h1 span {
  display: block;
  transition: opacity 900ms ease, transform 1100ms cubic-bezier(0.19, 1, 0.22, 1);
}
.ab-js .ab-hero h1 span,
.ab-js .ab-scroll {
	opacity: 0;
	transform: translateY(46px);
}

.ab-js .ab-hero h1 span:last-child {
	transform: translateY(64px);
}
.ab-js .ab-scroll {
	transition: opacity 800ms ease, transform 900ms cubic-bezier(0.19, 1, 0.22, 1);
}
.ab-js .ab-loaded .ab-hero h1 span,
.ab-js .ab-loaded .ab-scroll {
	opacity: 1;
	transform: translateY(0);
}

.ab-js .ab-loaded .ab-hero h1 span:last-child {
	transition-delay: 110ms;
}

.ab-js .ab-loaded .ab-scroll {
	transition-delay: 450ms;
}

.ab-hero h1 span:last-child {
  padding-left: 10vw;
  color: var(--ab-butter);
}

.ab-scroll {
  position: absolute;
  right: var(--ab-gutter);
  bottom: 28px;
  z-index: 3;
  display: flex;
  align-items: center;
  gap: 16px;
  font-size: 11px;
  letter-spacing: 0.08em;
  text-transform: uppercase;
}

.ab-scroll b {
  display: grid;
  width: 28px;
  height: 28px;
  place-items: center;
  border-radius: 50%;
  background: var(--ab-red);
  color: var(--ab-ink);
  font-size: 15px;
}

.ab-work,
.ab-about {
  padding: 90px var(--ab-gutter);
}

.ab-about::after {
  position: absolute;
  right: -150px;
  bottom: -250px;
  width: 360px;
  aspect-ratio: 1;
  border: 1px solid rgba(242, 214, 109, 0.42);
  border-radius: 33% 67% 42% 58% / 63% 31% 69% 37%;
  content: "";
  animation: ab-blob-float 13s ease-in-out infinite alternate;
}

.ab-work {
  position: relative;
  overflow: hidden;
  background:
    radial-gradient(circle at 12% 14%, rgba(233, 75, 50, 0.09), transparent 30%),
    var(--ab-midnight);
  color: var(--ab-ivory);
}

.ab-work::before {
  position: absolute;
  /* a whole blob inside the section (it used to be cut by the section edge, which only read on the old dark hero) */
  top: clamp(36px, 6vw, 96px);
  right: var(--ab-gutter);
  width: clamp(96px, 12vw, 190px);
  height: clamp(78px, 9.5vw, 150px);
  border-radius: 40% 60% 35% 65% / 58% 30% 70% 42%;
  background: var(--ab-red);
  content: "";
  transform: rotate(18deg);
  animation: ab-blob-float 11s ease-in-out infinite alternate-reverse;
}

.ab-work::after {
  position: absolute;
  top: 28%;
  left: -190px;
  width: 340px;
  aspect-ratio: 1;
  border: 1px solid rgba(242, 214, 109, 0.36);
  border-radius: 62% 38% 43% 57% / 36% 59% 41% 64%;
  content: "";
  transform: rotate(-24deg);
}

.ab-eyebrow {
  position: relative;
  z-index: 1;
  margin: 0;
  font-size: 11px;
  letter-spacing: 0.09em;
  text-transform: uppercase;
}

.ab-work .ab-eyebrow {
  color: var(--ab-butter);
}

.ab-intro {
  position: relative;
  z-index: 1;
  margin-bottom: 56px;
}

.ab-intro h2,
.ab-about h2 {
  max-width: 1040px;
  margin: 34px 0 0;
  font-family: var(--ab-display);
  font-size: clamp(44px, 10vw, 128px);
  font-weight: 750;
  letter-spacing: -0.04em;
  line-height: 0.88;
}

.ab-intro__note {
  max-width: 430px;
  margin: 28px 0 0 auto;
  color: var(--ab-sand);
  font-size: 14px;
  line-height: 1.5;
}

.ab-clients {
  --ab-clients-gap: clamp(44px, 6vw, 96px);
  --ab-logo-scale: 0.78;
  position: relative;
  z-index: 1;
  margin: 0 calc(var(--ab-gutter) * -1) 64px;
  border-top: 1px solid var(--ab-line);
  border-bottom: 1px solid var(--ab-line);
  padding: 28px 0;
}

.ab-clients__label {
  margin: 0 0 24px;
  padding: 0 var(--ab-gutter);
  color: var(--ab-muted);
  font-size: 11px;
  letter-spacing: 0.09em;
  text-transform: uppercase;
}

.ab-clients__viewport {
  display: flex;
  overflow: hidden;
  -webkit-mask-image: linear-gradient(90deg, transparent, #000 9%, #000 91%, transparent);
  mask-image: linear-gradient(90deg, transparent, #000 9%, #000 91%, transparent);
}

.ab-clients__track {
  display: flex;
  flex: none;
  align-items: center;
  gap: var(--ab-clients-gap);
  margin: 0;
  padding: 0 var(--ab-clients-gap) 0 0;
  list-style: none;
  animation: ab-clients-scroll 46s linear infinite;
}

.ab-clients__viewport:hover .ab-clients__track {
  animation-play-state: paused;
}

/* site.js drives the strip: it eases to a stop under the cursor and can be dragged either way. */
.ab-clients__viewport.is-live {
  cursor: grab;
  touch-action: pan-y;
  -webkit-user-select: none;
  user-select: none;
}

.ab-clients__viewport.is-live.is-dragging {
  cursor: grabbing;
}

.ab-clients__viewport.is-live .ab-clients__track {
  animation: none;
  will-change: transform;
}

.ab-clients__track img {
  -webkit-user-drag: none;
}

.ab-clients__track li {
  display: flex;
  flex: none;
  height: 48px;
  align-items: center;
}

.ab-clients__track img {
  width: auto;
  height: calc(var(--ab-logo-h) * var(--ab-logo-scale) * 1px);
  max-width: none;
  opacity: 0.42;
  transition: opacity 300ms ease;
}

.ab-clients__wordmark {
  color: #fff;
  font-family: var(--ab-display);
  font-size: calc(var(--ab-logo-h) * var(--ab-logo-scale) * 1px);
  font-weight: 800;
  letter-spacing: -0.03em;
  line-height: 1;
  opacity: 0.42;
  transition: opacity 300ms ease;
  white-space: nowrap;
}

.ab-clients__track li:hover img,
.ab-clients__track li:hover .ab-clients__wordmark {
  opacity: 0.92;
}

@keyframes ab-clients-scroll {
  to { transform: translateX(-100%); }
}

.ab-grid {
  display: grid;
  grid-template-columns: 1fr;
  gap: 44px 18px;
}

.ab-reveal {
	opacity: 0;
	transform: translateY(26px) rotate(0.15deg);
	transition: opacity 440ms ease, transform 620ms cubic-bezier(0.19, 1, 0.22, 1);
	transition-delay: var(--ab-delay, 0ms);
}

.ab-reveal.is-visible {
	opacity: 1;
	transform: translateY(0) rotate(0deg);
}

/* Film frames: big soft curves with one tight corner (the AB bubble shape),
   mirrored between the two columns, and a hairline that turns gold on hover. */
.ab-project {
  --ab-frame-r: clamp(20px, 2.4vw, 36px);
  --ab-frame-tight: 6px;
  --ab-frame-shape: var(--ab-frame-r) var(--ab-frame-r) var(--ab-frame-r) var(--ab-frame-tight);
}

.ab-project:nth-child(even) {
  --ab-frame-shape: var(--ab-frame-r) var(--ab-frame-r) var(--ab-frame-tight) var(--ab-frame-r);
}

.ab-project__media {
  position: relative;
  overflow: hidden;
  isolation: isolate;
  aspect-ratio: 16 / 9;
  border-radius: var(--ab-frame-shape);
  background: var(--ab-ink);
}

.ab-project__media::after {
  content: "";
  position: absolute;
  z-index: 2;
  inset: 0;
  border-radius: inherit;
  box-shadow: inset 0 0 0 1px rgba(244, 237, 223, 0.14);
  pointer-events: none;
  transition: box-shadow 400ms ease;
}

.ab-project:hover .ab-project__media::after,
.ab-project__link:focus-visible .ab-project__media::after {
  box-shadow: inset 0 0 0 1px rgba(242, 214, 109, 0.75);
}

.ab-project__link {
  display: block;
  color: inherit;
  border-radius: var(--ab-frame-shape);
  outline-offset: 6px;
}

.ab-project__link:focus-visible,
.ab-project__title-link:focus-visible {
  outline: 3px solid var(--ab-butter);
}

.ab-project__media img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  filter: saturate(0.86) contrast(1.03);
	transform: translate3d(0, var(--ab-image-shift, 0), 0) scale(1.055);
	transition: transform 900ms cubic-bezier(0.19, 1, 0.22, 1), filter 600ms ease;
}

.ab-project__view {
  position: absolute;
  z-index: 3;
  top: calc(var(--ab-frame-r) * 0.5 + 6px);
  color: #fff;
  font-size: 11px;
  letter-spacing: 0.08em;
  text-shadow: 0 2px 14px rgba(0, 0, 0, 0.45);
  text-transform: uppercase;
}

.ab-project__view {
  right: calc(var(--ab-frame-r) * 0.5 + 8px);
  opacity: 0;
  transform: translateY(8px);
  transition: opacity 300ms ease, transform 300ms ease;
}

.ab-project:hover .ab-project__media img {
  filter: saturate(1) contrast(1.04);
  transform: translate3d(0, var(--ab-image-shift, 0), 0) scale(1.095);
}

.ab-project:hover .ab-project__view,
.ab-project__link:focus-visible .ab-project__view {
  opacity: 1;
  transform: translateY(0);
}

.ab-project__caption {
  position: relative;
  display: flex;
  align-items: baseline;
  justify-content: space-between;
  gap: 18px;
  border-top: 1px solid rgba(245, 239, 227, 0.52);
  margin-top: 14px;
  padding-top: 12px;
}

.ab-project__caption h3,
.ab-project__caption p {
  margin: 0;
  font-size: 14px;
  font-weight: 500;
  text-transform: uppercase;
}

.ab-project__caption h3 {
	max-width: calc(100% - 86px);
	transition: color 250ms ease, transform 350ms cubic-bezier(0.19, 1, 0.22, 1);
}

.ab-credit-disclosure {
	position: relative;
	flex: 0 0 auto;
}

.ab-credit-trigger {
	display: inline-flex;
	align-items: center;
	gap: 7px;
	border: 0;
	padding: 0;
	background: transparent;
	color: var(--ab-sand);
	cursor: pointer;
	font-size: 11px;
	font-weight: 650;
	letter-spacing: 0.08em;
	text-transform: uppercase;
}

.ab-credit-trigger i {
	display: grid;
	width: 18px;
	height: 18px;
	place-items: center;
	border: 1px solid rgba(245, 239, 227, 0.55);
	border-radius: 50%;
	color: var(--ab-butter);
	font-family: Georgia, serif;
	font-size: 11px;
	font-style: italic;
	letter-spacing: 0;
	line-height: 1;
	transition: background 220ms ease, color 220ms ease, transform 220ms ease;
}

.ab-credit-trigger:hover i,
.ab-credit-trigger:focus-visible i,
.ab-credit-disclosure.is-open .ab-credit-trigger i {
	background: var(--ab-butter);
	color: var(--ab-midnight);
	transform: rotate(8deg) scale(1.08);
}

.ab-credit-popover {
	position: absolute;
	right: 0;
	bottom: calc(100% + 14px);
	z-index: 12;
	width: min(310px, calc(100vw - (var(--ab-gutter) * 2)));
	padding: 17px 18px 18px;
	border: 1px solid rgba(242, 214, 109, 0.54);
	border-radius: 22px 22px 8px 22px;
	background: rgba(7, 8, 12, 0.96);
	box-shadow: 0 20px 50px rgba(0, 0, 0, 0.42);
	color: var(--ab-ivory);
	opacity: 0;
	pointer-events: none;
	transform: translateY(8px) scale(0.98);
	transform-origin: right bottom;
	transition: opacity 180ms ease, transform 220ms cubic-bezier(0.19, 1, 0.22, 1), visibility 180ms ease;
	visibility: hidden;
}

.ab-credit-popover::after {
	position: absolute;
	right: 9px;
	bottom: -7px;
	width: 13px;
	height: 13px;
	border-right: 1px solid rgba(242, 214, 109, 0.54);
	border-bottom: 1px solid rgba(242, 214, 109, 0.54);
	background: #07080c;
	content: "";
	transform: rotate(45deg);
}

.ab-credit-disclosure:hover .ab-credit-popover,
.ab-credit-disclosure:focus-within .ab-credit-popover,
.ab-credit-disclosure.is-open .ab-credit-popover {
	opacity: 1;
	pointer-events: auto;
	transform: translateY(0) scale(1);
	visibility: visible;
}

.ab-credit-popover dl,
.ab-credit-popover dd,
.ab-credit-popover__empty {
	margin: 0;
}

.ab-credit-popover dl {
	display: grid;
	gap: 11px;
}

.ab-credit-popover dl div {
	display: grid;
	gap: 3px;
}

.ab-credit-popover dt {
	color: var(--ab-muted);
	font-size: 8px;
	font-weight: 650;
	letter-spacing: 0.08em;
	text-transform: uppercase;
}

.ab-credit-popover dd,
.ab-credit-popover__empty {
	font-family: var(--ab-display);
	font-size: 15px;
	font-weight: 600;
	letter-spacing: -0.02em;
	line-height: 1.15;
}

.ab-project__title-link:hover,
.ab-project__title-link:focus-visible {
	color: var(--ab-butter);
	transform: translateX(8px);
}

.ab-project__title-link {
	display: inline-block;
	border-radius: 3px;
	outline-offset: 5px;
	transition: color 250ms ease, transform 350ms cubic-bezier(0.19, 1, 0.22, 1);
}

.ab-more-work {
	position: relative;
	z-index: 1;
	display: grid;
	grid-template-columns: minmax(0, 1fr) auto;
	align-items: center;
	gap: 22px 56px;
	margin: 96px 0 0;
	border-radius: 36px 36px 120px 36px;
	background: var(--ab-butter);
	color: var(--ab-ink);
	padding: clamp(36px, 5vw, 76px);
}

.ab-more-work__statement {
	grid-column: 1;
	margin: 0;
	font-family: var(--ab-display);
	font-size: clamp(44px, 7.2vw, 124px);
	font-variation-settings: "wdth" 88;
	font-weight: 800;
	letter-spacing: -0.035em;
	line-height: 0.86;
	text-transform: uppercase;
}

.ab-more-work__statement > span {
	display: block;
}

.ab-more-work__statement > span:last-child {
	margin-top: 0.08em;
	color: var(--ab-red-deep);
}

/* Keeps the dash on the same line as "cut". */
.ab-nowrap {
	white-space: nowrap;
}

.ab-more-work__note {
	grid-column: 1;
	margin: 0;
	font-size: 11px;
	font-weight: 650;
	letter-spacing: 0.09em;
	text-transform: uppercase;
}

/* The red AB blob is the link: the shape tilts and drifts, the label stays level. */
.ab-more-work__link {
	position: relative;
	z-index: 0;
	display: flex;
	grid-column: 2;
	grid-row: 1 / span 2;
	width: clamp(200px, 18vw, 272px);
	aspect-ratio: 1;
	flex-direction: column;
	align-items: center;
	justify-content: center;
	gap: 10px;
	color: var(--ab-ink);
	font-family: var(--ab-display);
	font-size: clamp(20px, 1.8vw, 26px);
	font-weight: 800;
	letter-spacing: -0.01em;
	line-height: 0.95;
	text-align: center;
	text-decoration: none;
	text-transform: uppercase;
}

.ab-more-work__link::before {
	position: absolute;
	z-index: -1;
	inset: 0;
	border-radius: 52% 48% 44% 56% / 47% 55% 45% 53%;
	background: var(--ab-red);
	content: "";
	transform: rotate(-8deg);
	animation: ab-blob-drift 7s ease-in-out infinite alternate;
	transition: border-radius 600ms ease, transform 600ms cubic-bezier(0.19, 1, 0.22, 1), box-shadow 250ms ease;
}

.ab-more-work__link-arrow {
	font-family: var(--ab-sans);
	font-size: 1.6em;
	font-weight: 400;
	line-height: 1;
	transition: transform 400ms cubic-bezier(0.19, 1, 0.22, 1);
}

.ab-more-work__link:hover::before,
.ab-more-work__link:focus-visible::before {
	border-radius: 44% 56% 54% 46% / 56% 44% 56% 44%;
	transform: rotate(6deg) scale(1.07);
}

.ab-more-work__link:hover .ab-more-work__link-arrow,
.ab-more-work__link:focus-visible .ab-more-work__link-arrow {
	transform: translate(4px, -4px);
}

.ab-more-work__link:focus-visible {
	outline: none;
}

.ab-more-work__link:focus-visible::before {
	box-shadow: 0 0 0 3px var(--ab-butter), 0 0 0 6px var(--ab-ink);
}

@media (max-width: 719px) {
	.ab-more-work {
		grid-template-columns: 1fr;
		border-radius: 28px 28px 72px 28px;
		padding: 34px 24px 30px;
	}

	.ab-more-work__statement {
		font-size: clamp(32px, 9.6vw, 42px);
	}

	.ab-more-work__link {
		grid-column: 1;
		grid-row: auto;
		justify-self: end;
		width: 176px;
		margin-top: 4px;
		font-size: 20px;
	}
}

.ab-project__caption p {
  color: var(--ab-butter);
  font-size: 11px;
  letter-spacing: 0.07em;
}

.ab-player[hidden] {
  display: none;
}

.ab-player {
  position: fixed;
  inset: 0;
  z-index: 100000;
  display: grid;
  overflow-y: auto;
  place-items: center;
  padding: clamp(14px, 4vw, 56px);
}

.ab-player__backdrop {
  position: absolute;
  inset: 0;
  border: 0;
  background: rgba(0, 0, 0, 0.96);
  cursor: pointer;
}

/* Wide enough for the film, but never so wide that title, film and credits overflow a short screen. */
.ab-player__dialog {
  position: relative;
  z-index: 1;
  width: min(100%, 1280px, calc((100vh - 270px) * 16 / 9));
  width: min(100%, 1280px, calc((100svh - 270px) * 16 / 9));
  min-width: min(100%, 520px);
}

.ab-player__topline {
  display: flex;
  min-height: 42px;
  align-items: center;
  justify-content: space-between;
  gap: 20px;
  color: #fff;
}

.ab-player__title {
  margin: 0;
  font-size: 11px;
  letter-spacing: 0.08em;
  text-transform: uppercase;
}

.ab-player__close {
  display: grid;
  width: 36px;
  height: 36px;
  place-items: center;
  border: 1px solid rgba(255, 255, 255, 0.6);
  border-radius: 50%;
  background: transparent;
  color: #fff;
  cursor: pointer;
  font-size: 20px;
  line-height: 1;
  transition: background 200ms ease, color 200ms ease, transform 200ms ease;
}

.ab-player__close:hover,
.ab-player__close:focus-visible {
  background: var(--ab-butter);
  color: var(--ab-ink);
  transform: rotate(6deg);
}

/* Same shape as the film cards: big curves, one tight corner. */
.ab-player__frame {
  --ab-player-r: clamp(18px, 2.4vw, 36px);
  position: relative;
  overflow: hidden;
  isolation: isolate;
  width: 100%;
  aspect-ratio: 16 / 9;
  border-radius: var(--ab-player-r) var(--ab-player-r) var(--ab-player-r) 6px;
  background: #000;
  box-shadow: 0 30px 80px rgba(0, 0, 0, 0.55);
}

.ab-player__frame iframe {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  border: 0;
}

.ab-player__poster {
  position: absolute;
  z-index: 1;
  inset: 0;
  width: 100%;
  height: 100%;
  object-fit: cover;
  pointer-events: none;
  transition: opacity 600ms ease;
}

.ab-player__loading {
  position: absolute;
  z-index: 2;
  top: 50%;
  left: 50%;
  width: 46px;
  height: 46px;
  margin: -23px 0 0 -23px;
  border: 2px solid rgba(242, 214, 109, 0.28);
  border-top-color: var(--ab-butter);
  border-radius: 50%;
  pointer-events: none;
  animation: ab-spin 900ms linear infinite;
  transition: opacity 300ms ease;
}

.ab-player.is-playing .ab-player__poster,
.ab-player.is-playing .ab-player__loading {
  opacity: 0;
}

.ab-player.is-playing .ab-player__loading {
  animation: none;
}

@keyframes ab-spin {
  to { transform: rotate(360deg); }
}

/* Previous / credits / next under the film. */
.ab-player__bar {
  display: grid;
  grid-template-columns: auto minmax(0, 1fr) auto;
  align-items: center;
  gap: 14px 28px;
  margin-top: 18px;
  color: #fff;
}

.ab-player__credits {
  display: flex;
  flex-wrap: wrap;
  justify-content: center;
  gap: 10px 30px;
  margin: 0;
  text-align: center;
}

.ab-player__credits div {
  display: grid;
  gap: 4px;
}

.ab-player__credits dt {
  color: var(--ab-muted);
  font-size: 11px;
  letter-spacing: 0.08em;
  text-transform: uppercase;
}

.ab-player__credits dd {
  margin: 0;
  font-size: 14px;
}

.ab-player__step {
  display: grid;
  width: 44px;
  height: 44px;
  place-items: center;
  border: 1px solid rgba(255, 255, 255, 0.6);
  border-radius: 50%;
  background: transparent;
  color: #fff;
  cursor: pointer;
  transition: background 200ms ease, color 200ms ease, transform 200ms ease;
}

.ab-player__step svg {
  width: 20px;
  height: 20px;
}

.ab-player__step:hover,
.ab-player__step:focus-visible {
  background: var(--ab-butter);
  color: var(--ab-ink);
  transform: scale(1.06);
}

@media (max-width: 719px) {
  .ab-player__bar {
    grid-template-columns: auto 1fr auto;
  }

  .ab-player__credits {
    grid-column: 1 / -1;
    grid-row: 1;
    display: grid;
    grid-template-columns: repeat(2, minmax(0, 1fr));
    gap: 12px 18px;
    text-align: left;
  }

  .ab-player__step.js-player-prev {
    grid-column: 1;
    grid-row: 2;
  }

  .ab-player__step.js-player-next {
    grid-column: 3;
    grid-row: 2;
  }
}

body.ab-player-open {
  overflow: hidden;
}

.ab-about {
  position: relative;
  overflow: hidden;
  background: var(--ab-black);
}

.ab-about__grid {
  position: relative;
  z-index: 1;
  display: grid;
  gap: 46px;
  margin-top: 34px;
}

.ab-about h2 {
  margin: 0;
  color: var(--ab-butter);
}

.ab-about__copy {
  max-width: 560px;
}

/* A small, quiet portrait: monochrome in the AB badge's organic shape, colour on hover. */
.ab-about__portrait {
  position: relative;
  width: clamp(96px, 9vw, 132px);
  margin: 0 0 30px;
}

.ab-about__portrait img {
  width: 100%;
  height: auto;
  aspect-ratio: 1;
  border: 1px solid rgba(242, 214, 109, 0.42);
  border-radius: 45% 55% 42% 58% / 58% 38% 62% 42%;
  filter: grayscale(1) contrast(1.04) brightness(0.86);
  object-fit: cover;
  opacity: 0.88;
  transform: rotate(-3deg);
  transition: filter 500ms ease, opacity 500ms ease, transform 500ms cubic-bezier(0.19, 1, 0.22, 1), border-radius 500ms ease;
}

.ab-about__portrait::after {
  position: absolute;
  right: 2px;
  bottom: 8px;
  width: 12px;
  height: 12px;
  border-radius: 50%;
  background: var(--ab-red);
  content: "";
}

.ab-about__portrait:hover img {
  border-radius: 50%;
  filter: grayscale(0) contrast(1) brightness(1);
  opacity: 1;
  transform: rotate(0deg);
}

.ab-about__copy p {
  margin: 0 0 20px;
  color: var(--ab-sand);
  font-size: clamp(18px, 1.55vw, 23px);
  letter-spacing: -0.01em;
  line-height: 1.38;
}

.ab-contact {
  position: relative;
  overflow: hidden;
  min-height: 90svh;
  padding: 36px var(--ab-gutter) 26px;
  background: var(--ab-ivory);
  color: var(--ab-midnight);
}

.ab-contact__top,
.ab-contact__bottom {
  position: relative;
  z-index: 2;
  display: flex;
  justify-content: space-between;
  gap: 24px;
  border-top: 1px solid var(--ab-midnight);
  padding-top: 10px;
}

.ab-contact__top > p:last-child,
.ab-contact__bottom {
  margin: 0;
  font-size: 11px;
  letter-spacing: 0.07em;
  text-transform: uppercase;
}

.ab-contact__top > p:last-child {
  text-align: right;
  white-space: nowrap;
}

@media (max-width: 719px) {
  .ab-contact__top {
    flex-direction: column;
    gap: 8px;
  }

  .ab-contact__top > p:last-child {
    text-align: left;
    white-space: normal;
  }
}

.ab-contact h2 {
  position: relative;
  z-index: 2;
  max-width: 1200px;
  margin: 0;
  font-family: var(--ab-display);
  font-size: clamp(50px, 12vw, 152px);
  font-weight: 800;
  letter-spacing: -0.045em;
  line-height: 0.8;
  text-transform: uppercase;
}

.ab-contact h2 > span:not(.ab-word) {
  color: var(--ab-red);
}

/* Headline, then one list of ways to reach Amr (rows like the About career strip);
   on wide screens the list sits beside the headline and ends on its last line. */
.ab-contact__main {
	position: relative;
	z-index: 2;
	margin: 88px 0 96px;
}

.ab-contact__list {
	max-width: 640px;
	margin-top: 56px;
	border-top: 1px solid var(--ab-midnight);
}

.ab-contact__list a {
	display: grid;
	grid-template-areas: "icon label arrow" "icon value arrow";
	grid-template-columns: auto minmax(0, 1fr) auto;
	align-items: center;
	gap: 8px 18px;
	border-bottom: 1px solid rgba(11, 16, 32, 0.3);
	padding: 18px 0 20px;
	color: var(--ab-midnight);
	text-decoration: none;
}

.ab-contact__list span {
	grid-area: label;
	font-size: 11px;
	font-weight: 650;
	letter-spacing: 0.09em;
	text-transform: uppercase;
}

.ab-contact__list strong {
	grid-area: value;
	font-family: var(--ab-display);
	font-size: clamp(22px, 2.1vw, 32px);
	font-weight: 800;
	letter-spacing: -0.03em;
	line-height: 1;
	overflow-wrap: anywhere;
	transition: color 240ms ease, transform 300ms cubic-bezier(0.19, 1, 0.22, 1);
}

@media (min-width: 400px) {
	.ab-contact__list strong {
		overflow-wrap: normal;
		white-space: nowrap;
	}
}

/* Email / Instagram / Vimeo marks: inline SVG in the text colour, turning red on hover. */
.ab-contact__icon {
	display: grid;
	grid-area: icon;
	width: 34px;
	height: 34px;
	place-items: center;
	color: var(--ab-midnight);
	transition: color 240ms ease, transform 300ms cubic-bezier(0.19, 1, 0.22, 1);
}

.ab-contact__icon svg {
	display: block;
	width: 30px;
	height: 30px;
}

.ab-contact__list a:hover .ab-contact__icon,
.ab-contact__list a:focus-visible .ab-contact__icon {
	color: var(--ab-red);
	transform: rotate(-8deg);
}

.ab-contact__list i {
	grid-area: arrow;
	color: var(--ab-red);
	font-size: clamp(24px, 2.2vw, 34px);
	font-style: normal;
	line-height: 1;
	transition: transform 300ms cubic-bezier(0.19, 1, 0.22, 1);
}

.ab-contact__list a:hover strong,
.ab-contact__list a:focus-visible strong {
	color: var(--ab-red);
	transform: translateX(6px);
}

.ab-contact__list a:hover i,
.ab-contact__list a:focus-visible i {
	transform: translate(5px, -5px);
}

.ab-contact__list a:focus-visible {
	outline: 3px solid var(--ab-midnight);
	outline-offset: 4px;
}

@media (min-width: 1120px) {
	.ab-contact__main {
		display: grid;
		grid-template-columns: minmax(0, 1fr) clamp(380px, 32vw, 500px);
		align-items: end;
		gap: 4vw;
	}

	.ab-contact h2 {
		font-size: min(10vw, 152px);
	}

	.ab-contact__list {
		max-width: none;
		margin-top: 0;
	}
}

.ab-identity {
	position: relative;
	z-index: 2;
	display: flex;
	align-items: flex-end;
	justify-content: space-between;
	gap: 20px;
	margin: 0 0 80px;
	border-top: 1px solid rgba(11, 16, 32, 0.25);
	padding-top: 18px;
}

.ab-identity__latin {
	position: relative;
	font-family: var(--ab-display);
	font-size: clamp(72px, 18vw, 260px);
	font-weight: 800;
	letter-spacing: -0.13em;
	line-height: 0.64;
	border-radius: 36% 64% 50% 50% / 55% 42% 58% 45%;
	padding: 0.15em 0.2em 0.18em 0.16em;
	background: var(--ab-midnight);
	color: var(--ab-ivory);
	transform: rotate(-2deg);
}

.ab-identity__latin span {
	color: var(--ab-butter);
}

.ab-identity__latin i {
	color: var(--ab-red);
	font-style: normal;
}

.ab-identity__arabic {
	font-family: var(--ab-arabic);
	font-size: clamp(28px, 6vw, 78px);
	font-weight: 800;
	letter-spacing: -0.08em;
	line-height: 1.28;
	/* Alexandria's ي dots drop ~0.55em below the baseline, well past the line box; keep them
	   inside the element so a rotated layer (Safari) never crops them. */
	padding-bottom: 0.34em;
	transform: rotate(-2deg);
}

.ab-contact__bottom {
  align-items: flex-end;
}

.ab-contact__bottom p {
  margin: 0;
}

/* Phones: copyright on its own line, role underneath; wider screens: one line. */
.ab-contact__bottom {
  align-items: flex-end;
}

.ab-contact__bottom a {
  white-space: nowrap;
}

.ab-contact__bottom p span {
  display: block;
  text-wrap: balance;
}

@media (min-width: 720px) {
  .ab-contact__bottom p span {
    display: inline;
  }

  .ab-contact__bottom p span + span::before {
    content: " · ";
  }
}
.ab-fallback {
  min-height: 100vh;
  padding: 150px var(--ab-gutter) 80px;
  background: var(--ab-ivory);
  color: var(--ab-ink);
}

.ab-fallback h1 {
  max-width: 1100px;
  margin: 28px 0 0;
  font-family: var(--ab-display);
  font-size: clamp(48px, 10vw, 130px);
  letter-spacing: -0.04em;
  line-height: 0.88;
}

.ab-fallback__note {
  max-width: 520px;
  margin: 36px 0 0;
  color: rgba(17, 19, 28, 0.72);
  font-size: clamp(17px, 2vw, 22px);
  line-height: 1.3;
}

.ab-fallback__link {
  display: inline-block;
  margin-top: 44px;
  border-bottom: 2px solid var(--ab-ink);
  font-family: var(--ab-display);
  font-size: clamp(22px, 3vw, 36px);
  font-weight: 800;
  letter-spacing: -0.03em;
  line-height: 1.1;
  transition: color 240ms ease, border-color 240ms ease;
}

.ab-fallback__link span {
  color: var(--ab-red);
}

.ab-fallback__link:hover,
.ab-fallback__link:focus-visible {
  border-color: var(--ab-red);
  color: var(--ab-red);
}

/* Inner pages sit on ivory, so the transparent header switches to ink. */
body:not(.home) .ab-header:not(.is-scrolled) {
  color: var(--ab-ink);
}

body:not(.home) .ab-header:not(.is-scrolled) .ab-brand__latin {
  border-color: var(--ab-ink);
  background: var(--ab-ink);
  color: var(--ab-ivory);
}

.ab-menu nav {
  color: #fff;
}

/* ---- Motion ---- */

/* Smooth scrolling (Lenis) */
html.lenis,
html.lenis body {
  height: auto;
}

html.lenis {
  scroll-behavior: auto;
}

.lenis.lenis-stopped {
  overflow: clip;
}

.lenis.lenis-scrolling iframe {
  pointer-events: none;
}

/* Headings rise word by word from behind a mask */
.ab-split.ab-reveal {
  opacity: 1;
  transform: none;
}

.ab-word {
  display: inline-block;
  overflow: hidden;
  margin: -0.1em -0.06em -0.2em;
  padding: 0.1em 0.06em 0.2em;
  vertical-align: top;
}

.ab-word__inner {
  display: inline-block;
  transform: translate3d(0, 108%, 0);
  transition: transform 1000ms cubic-bezier(0.19, 1, 0.22, 1);
  transition-delay: calc(var(--ab-w, 0) * 55ms);
}

.ab-split.is-visible .ab-word__inner {
  transform: none;
}

/* Film frames open like a shutter as they enter */
.ab-js .ab-project .ab-project__media {
  clip-path: inset(14% 0 0 0 round var(--ab-frame-shape));
  transition: clip-path 1100ms cubic-bezier(0.19, 1, 0.22, 1);
}

.ab-js .ab-project.is-visible .ab-project__media {
  clip-path: inset(0 0 0 0 round var(--ab-frame-shape));
}

.ab-js .ab-project .ab-project__media img {
  scale: 1.18;
  transition: scale 1400ms cubic-bezier(0.19, 1, 0.22, 1), transform 900ms cubic-bezier(0.19, 1, 0.22, 1), filter 600ms ease;
}

.ab-js .ab-project.is-visible .ab-project__media img {
  scale: 1;
}

/* ===== New theme: the name is the window — footage plays inside the letters =====
   An ivory "sheet" with black type sits over the video with mix-blend-mode: lighten,
   so the footage only shows where the letters are. Before the video plays (and with
   reduced motion / data saver) the ink background shows through, so the letters read in ink. */
.nt-cut {
  position: relative;
  overflow: hidden;
  isolation: isolate;
  background: var(--ab-ink);
}

.nt-cut__video {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  object-fit: cover;
  /* dimmed via CSS (no grading) so even bright frames stay clearly darker than the sand page */
  filter: brightness(0.7) contrast(1.12) saturate(1.15);
  opacity: 0;
  transition: opacity 900ms ease;
}

.nt-cut__video.is-playing {
  opacity: 1;
}

.nt-cut__sheet {
  position: relative;
  margin: 0;
  background: var(--ab-ivory);
  color: #000;
  mix-blend-mode: lighten;
}

.ab-hero.nt-hero {
  display: grid;
  min-height: 100svh;
  align-content: center;
  padding: 110px var(--ab-gutter) 40px;
  background: var(--ab-ivory);
  color: var(--ab-ink);
}

.nt-hero .nt-cut {
  margin: 0 calc(var(--ab-gutter) * -0.4);
}

.ab-hero.nt-hero h1 {
  width: auto;
  margin: 0;
  padding: 0.03em 0.04em 0.02em;
  font-family: var(--ab-display);
  font-size: 29.5vw;
  font-variation-settings: "wdth" 78;
  font-weight: 800;
  letter-spacing: -0.045em;
  line-height: 0.8;
  opacity: 1;
  text-shadow: none;
  text-transform: uppercase;
  transform: none;
  white-space: nowrap;
}

.nt-meta {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 20px;
  margin-top: 22px;
  border-top: 1px solid currentColor;
  padding-top: 12px;
  font-size: 12px;
  font-weight: 600;
  letter-spacing: 0.08em;
  text-transform: uppercase;
}

.nt-meta p {
  margin: 0;
}

.nt-hero .ab-scroll {
  position: static;
}

.nt-hero .ab-hero__blob {
  border-color: rgba(11, 16, 32, 0.25);
}

/* Header in ink over the ivory sections (site.js adds .is-on-light). */
.ab-header.is-on-light {
  color: var(--ab-ink);
}

/* Contact headline: same window, sized to its text so it doesn't cover the blob. */
.nt-contact {
  width: fit-content;
  max-width: 100%;
  align-self: end;
}

.nt-contact h2 {
  padding: 0.04em 0 0.02em;
}

.ab-contact .nt-contact h2 > span:not(.ab-word) {
  color: inherit;
}

@media (max-width: 719px) {
  .ab-hero.nt-hero {
    min-height: 88svh;
    padding-top: 96px;
  }

  .ab-hero.nt-hero h1 {
    font-size: 46vw;
    line-height: 0.82;
    white-space: normal;
  }
}

@keyframes ab-hero-in {
  from {
    opacity: 0;
    transform: scale(1.1);
  }
  to {
    opacity: 1;
    transform: scale(1.02);
  }
}

@keyframes ab-blob-float {
	0% { translate: 0 0; }
	100% { translate: -26px 22px; }
}

/* A smaller drift than ab-blob-float, so a label sitting on the shape stays centred. */
@keyframes ab-blob-drift {
	0% { translate: 0 0; }
	100% { translate: -6px 5px; }
}

@keyframes ab-marquee {
	to { transform: translateX(-50%); }
}

@media (max-width: 719px) {
  .ab-about::after {
    display: none;
  }
}

@media (min-width: 720px) {
  .ab-header {
    padding-top: 24px;
  }

  .ab-nav {
    display: flex;
  }

	.ab-brand__arabic {
		display: block;
	}

  .ab-menu {
    display: none;
  }

  .ab-hero h1 {
    display: flex;
    align-items: flex-end;
    gap: clamp(16px, 1.8vw, 38px);
    margin-bottom: 36px;
    font-size: clamp(112px, 16.5vw, 280px);
    line-height: 0.72;
    white-space: nowrap;
  }

  .ab-hero h1 span {
    display: block;
  }

  .ab-hero h1 span:last-child {
    padding-left: 0;
  }

  .ab-work,
  .ab-about {
    padding-top: 108px;
    padding-bottom: 108px;
  }

  .ab-intro {
    margin-bottom: 72px;
  }

  .ab-clients {
    --ab-logo-scale: 1;
    margin-bottom: 80px;
  }

  .ab-grid {
    grid-template-columns: repeat(2, minmax(0, 1fr));
    gap: 48px 24px;
  }

  .ab-about__grid {
    margin-top: 76px;
  }
}

@media (min-width: 1120px) {
  .ab-intro h2,
  .ab-about h2 {
    font-size: clamp(94px, 8.8vw, 146px);
  }

  .ab-intro h2 {
    max-width: 1300px;
  }

  .ab-about__grid {
    grid-template-columns: minmax(0, 1.2fr) minmax(320px, 0.8fr);
    gap: 8vw;
    align-items: end;
  }
}

@media (max-width: 782px) {
  body.admin-bar .ab-header {
    top: 46px;
  }
}

@media (prefers-reduced-motion: reduce) {
  html {
    scroll-behavior: auto;
  }

  *,
  *::before,
  *::after {
    animation-duration: 0.01ms !important;
    animation-iteration-count: 1 !important;
    scroll-behavior: auto !important;
    transition-duration: 0.01ms !important;
  }

	.ab-reveal {
		opacity: 1;
		transform: none;
	}

	.ab-clients__viewport {
		-webkit-mask-image: none;
		mask-image: none;
	}

	.ab-clients__track {
		flex: 1;
		flex-wrap: wrap;
		justify-content: center;
		row-gap: 20px;
		padding: 0 var(--ab-gutter);
		animation: none;
	}

	.ab-clients__track[aria-hidden="true"] {
		display: none;
	}

	.ab-word__inner,
	.ab-js .ab-project .ab-project__media,
	.ab-js .ab-project .ab-project__media img {
		clip-path: none;
		scale: 1;
		transform: none;
	}
}

/* ===================================================================
   Light theme (v39): one sand page, sage + coral palette.
   The original dark tokens are remapped onto --p-*; decoration uses coral,
   text that needs contrast uses --p-accent-text (large) or sage green (small).
   =================================================================== */
:root {
  --p-bg: #e8ddca;          /* sand */
  --p-ink: #17211b;         /* deep green-black, 12.3:1 on sand */
  --p-soft: #435046;        /* body copy, 6.3:1 */
  --p-muted: #525c54;       /* labels, 5.2:1 */
  --p-accent: #e2552f;      /* coral: blobs, dots, buttons (decoration only) */
  --p-accent-text: #c2421f; /* coral for large type, 3.8:1 */
  --p-accent-deep: #f6c9b6; /* text on the green box, 4.2:1 (large) */
  --p-accent2: #2e6b52;     /* sage green: box, rings, small accent text (4.7:1) */
  --p-on-accent2: #f1efe6;
  --p-logo-b: #f0b43c;      /* honey: the B of the AB logo */
}
:root{
  --ab-black: var(--p-bg); --ab-midnight: var(--p-bg); --ab-ink: var(--p-ink);
  --ab-sand: var(--p-soft); --ab-muted: var(--p-muted);
  --ab-red: var(--p-accent); --ab-red-deep: var(--p-accent-deep); --ab-butter: var(--p-accent2);
  --ab-line: rgba(0,0,0,.16);
}
html, body { background: var(--p-bg); color: var(--p-ink); }
.ab-hero.nt-hero, .ab-work, .ab-about, .ab-contact { background: var(--p-bg); color: var(--p-ink); }
.ab-work,
.ab-about,
.ab-about__copy,
.ab-intro,
.ab-project__caption,
.ab-project__caption h3 a { color: var(--p-ink); }
.ab-about__copy p, .ab-intro__note { color: var(--p-soft); }
.nt-cut__sheet { background: var(--p-bg); }
.ab-header, .ab-header.is-scrolled, .ab-header.is-on-light { color: var(--p-ink); }
.ab-header.is-scrolled { background: color-mix(in srgb, var(--p-bg) 88%, transparent); box-shadow: 0 1px 0 rgba(0,0,0,.1); }
.ab-brand__latin { border-color: var(--p-ink); background: var(--p-ink); color: var(--p-bg); }
.ab-menu nav { background: var(--p-ink); color: var(--p-bg); }
.ab-project__caption { border-top-color: rgba(0,0,0,.35); }
.ab-credit-trigger { color: var(--p-ink); } .ab-credit-trigger i { border-color: rgba(0,0,0,.4); color: var(--p-accent); }
.ab-credit-popover { background: var(--p-ink); color: var(--p-bg); }
.ab-clients { border-color: rgba(0,0,0,.16); }
.ab-clients__track img { filter: brightness(0); opacity: .55; }
.ab-clients__track li:hover img { opacity: .9; }
.ab-work::after, .ab-about::after, .ab-hero__blob { border-color: color-mix(in srgb, var(--p-accent2) 70%, transparent); }
.ab-more-work { background: var(--p-accent2); color: var(--p-on-accent2); }
.ab-about h2, .ab-work .ab-eyebrow { color: var(--p-accent); }
.ab-identity__latin { background: var(--p-ink); color: var(--p-bg); }
/* The B in the AB logo: honey yellow on the dark badge (8.9:1); sage there was only 2.6:1. */
.ab-brand__latin b:last-of-type,
.ab-identity__latin span { color: var(--p-logo-b); }
.ab-player__backdrop { background: color-mix(in srgb, var(--p-ink) 94%, transparent); }
.ab-contact, .ab-contact__list a, .ab-contact__icon, .ab-contact__top, .ab-contact__bottom, .ab-contact h2 { color: var(--p-ink); }
.ab-contact__top, .ab-contact__bottom, .ab-contact__list { border-color: var(--p-ink); }
.ab-contact__list a { border-bottom-color: rgba(0,0,0,.25); }
.ab-contact__list i { color: var(--p-accent); }

.ab-about h2 { color: var(--p-accent2); } /* headings in sage (4.7:1); coral stays for dots/buttons */
.ab-work .ab-eyebrow { color: var(--p-accent2); }
.ab-contact__list i, .ab-credit-trigger i { color: var(--p-accent-text); }

/* Section titles (v43): one clear label per section — small sage number + the name in the display face. */
.ab-section-title {
  position: relative;
  z-index: 1;
  display: flex;
  align-items: flex-start;
  gap: 12px;
  margin: 0;
  color: var(--p-ink);
  font-family: var(--ab-display);
  font-size: clamp(30px, 3.4vw, 52px);
  font-weight: 800;
  letter-spacing: -0.03em;
  line-height: 0.95;
  text-transform: uppercase;
}

.ab-section-title span {
  padding-top: 0.2em;
  color: var(--p-accent2);
  font-family: var(--ab-sans);
  font-size: 12px;
  font-weight: 600;
  letter-spacing: 0.08em;
}

/* v43 fixes */
/* "Directed work" inherited the old giant .ab-intro h2 size; all three section titles now share one size. */
.ab-intro h2.ab-section-title {
  max-width: none;
  font-size: clamp(30px, 3.4vw, 52px);
  line-height: 0.95;
}

/* Hero: say who Amr is in the first screen, and don't leave a tall empty band under it. */
.ab-hero.nt-hero {
  min-height: 0;
  padding-top: clamp(120px, 12vw, 190px);
  padding-bottom: clamp(56px, 7vw, 110px);
}

.nt-meta {
  margin-top: clamp(18px, 2vw, 30px);
  padding-top: clamp(14px, 1.6vw, 22px);
}

.nt-meta p {
  font-family: var(--ab-display);
  font-size: clamp(22px, 3vw, 46px);
  font-weight: 800;
  letter-spacing: -0.02em;
  line-height: 1;
}

/* About copy: bigger and in ink so it reads as the main text, not a footnote. */
.ab-about__copy p {
  color: var(--p-ink);
  font-size: clamp(19px, 1.75vw, 26px);
  font-weight: 500;
  line-height: 1.36;
}

/* Contact: the links sit on one sage card, so the green blob never cuts across them. */
.ab-contact__list {
  border: 0;
  border-radius: var(--ab-frame-r, 28px) var(--ab-frame-r, 28px) var(--ab-frame-r, 28px) 6px;
  background: var(--p-accent2);
  padding: 6px clamp(18px, 2vw, 30px);
  color: var(--p-on-accent2);
}

.ab-contact__list a,
.ab-contact__list .ab-contact__icon,
.ab-contact__list i {
  color: var(--p-on-accent2);
}

.ab-contact__list a {
  border-bottom-color: rgba(241, 239, 230, 0.28);
}

.ab-contact__list a:last-child {
  border-bottom: 0;
}

.ab-contact__list a:hover strong,
.ab-contact__list a:focus-visible strong,
.ab-contact__list a:hover .ab-contact__icon,
.ab-contact__list a:focus-visible .ab-contact__icon {
  color: var(--p-logo-b);
}

.ab-contact__main {
  z-index: auto; /* no own layer, so the headline box and the links card stack against the blob separately */
}

.ab-contact__list {
  position: relative;
  z-index: 4;
}

@media (max-width: 719px) {
  .nt-meta {
    flex-direction: column;
    align-items: flex-start;
  }
}

/* Contact (v44): no big circle behind the links card — two greens overlapping read as a mistake.
   Trim 1px off the footage window so its ink backing never shows as a hairline around the headline. */
.nt-cut {
  clip-path: inset(1px);
}

@media (max-width: 719px) {
  /* keep each link on one line inside the card on phones */
  .ab-contact__list {
    padding: 4px 16px;
  }

  .ab-contact__list a {
    column-gap: 12px;
  }

  .ab-contact__list strong {
    font-size: clamp(17px, 5.2vw, 22px);
    white-space: nowrap;
  }

  .ab-contact__icon,
  .ab-contact__icon svg {
    width: 24px;
    height: 24px;
  }
}

/* v45 */
/* Hero fills the first screen (the next section starts below the fold), name + role centred in it. */
.ab-hero.nt-hero {
  min-height: 100vh;
  min-height: 100svh;
  align-content: center;
}

/* Arabic name over a big loose sage blob that runs off the page edge (the spirit of the old
   yellow contact blob), instead of a tight pill. */
.ab-contact {
  isolation: isolate;
}

.ab-identity__arabic {
  position: relative;
  z-index: 0;
  color: var(--p-on-accent2);
}


/* Calm curved rings in the open areas (thin sage outlines, like the hero ring). */
.ab-grid,
.ab-contact__main {
  position: relative;
}

.ab-grid::before {
  position: absolute;
  z-index: 0;
  aspect-ratio: 1;
  border: 1px solid color-mix(in srgb, var(--p-accent2) 45%, transparent);
  content: "";
  pointer-events: none;
}

.ab-grid::before {
  top: 38%;
  right: -16vw;
  width: min(52vw, 640px);
  border-radius: 58% 42% 46% 54% / 44% 58% 42% 56%;
  transform: rotate(-12deg);
}


.ab-grid > * {
  position: relative;
  z-index: 1;
}

/* "بري" in honey like the B of the logo. */
.ab-identity__ber {
  color: var(--p-logo-b);
}

/* Contact: the old-theme blob rising from the bottom-right corner (cut by the page edges),
   smaller so it stays under the Arabic name and clear of the links card. */
.ab-contact::after {
  position: absolute;
  z-index: 0;
  right: -10vw;
  bottom: -16vw;
  width: min(48vw, 600px);
  aspect-ratio: 1;
  border-radius: 41% 59% 65% 35% / 61% 35% 65% 39%;
  background: var(--p-accent2);
  content: "";
  pointer-events: none;
  transform: rotate(14deg);
}

/* "Back to top" sits on the blob, so it switches to cream. */
.ab-contact__bottom a {
  color: var(--p-on-accent2);
}

@media (max-width: 719px) {
  /* phones: the name sits higher above the stacked footer, so the corner blob is larger */
  .ab-contact::after {
    right: -24vw;
    bottom: -16vw;
    width: 80vw;
  }
}