/* Self-hosted fonts. Amiri Arabic is trimmed to the standard Arabic letters, diacritics and digits (glyphs outside that range fall back to a system font). */
@font-face { font-family: 'Amiri'; font-style: normal; font-weight: 400; font-display: swap; src: url(/fonts/amiri-arabic-400.woff2) format('woff2'); unicode-range: U+0600-06FF, U+0750-077F, U+0870-0891, U+0897-08E1, U+08E3-08FF, U+200C-200E, U+2010-2011, U+204F, U+2E41, U+FB50-FDFF, U+FE70-FE74, U+FE76-FEFC, U+102E0-102FB, U+10E60-10E7E, U+10EC2-10EC7, U+10EC9-10EEE, U+10EF0-10EFF, U+1EE00-1EE03, U+1EE05-1EE1F, U+1EE21-1EE22, U+1EE24, U+1EE27, U+1EE29-1EE32, U+1EE34-1EE37, U+1EE39, U+1EE3B, U+1EE42, U+1EE47, U+1EE49, U+1EE4B, U+1EE4D-1EE4F, U+1EE51-1EE52, U+1EE54, U+1EE57, U+1EE59, U+1EE5B, U+1EE5D, U+1EE5F, U+1EE61-1EE62, U+1EE64, U+1EE67-1EE6A, U+1EE6C-1EE72, U+1EE74-1EE77, U+1EE79-1EE7C, U+1EE7E, U+1EE80-1EE89, U+1EE8B-1EE9B, U+1EEA1-1EEA3, U+1EEA5-1EEA9, U+1EEAB-1EEBB, U+1EEF0-1EEF1; }
@font-face { font-family: 'Amiri'; font-style: normal; font-weight: 400; font-display: swap; src: url(/fonts/amiri-latin-400.woff2) format('woff2'); unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+0304, U+0308, U+0329, U+2000-206F, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD; }
@font-face { font-family: 'Amiri'; font-style: normal; font-weight: 700; font-display: swap; src: url(/fonts/amiri-arabic-700.woff2) format('woff2'); unicode-range: U+0600-06FF, U+0750-077F, U+0870-0891, U+0897-08E1, U+08E3-08FF, U+200C-200E, U+2010-2011, U+204F, U+2E41, U+FB50-FDFF, U+FE70-FE74, U+FE76-FEFC, U+102E0-102FB, U+10E60-10E7E, U+10EC2-10EC7, U+10EC9-10EEE, U+10EF0-10EFF, U+1EE00-1EE03, U+1EE05-1EE1F, U+1EE21-1EE22, U+1EE24, U+1EE27, U+1EE29-1EE32, U+1EE34-1EE37, U+1EE39, U+1EE3B, U+1EE42, U+1EE47, U+1EE49, U+1EE4B, U+1EE4D-1EE4F, U+1EE51-1EE52, U+1EE54, U+1EE57, U+1EE59, U+1EE5B, U+1EE5D, U+1EE5F, U+1EE61-1EE62, U+1EE64, U+1EE67-1EE6A, U+1EE6C-1EE72, U+1EE74-1EE77, U+1EE79-1EE7C, U+1EE7E, U+1EE80-1EE89, U+1EE8B-1EE9B, U+1EEA1-1EEA3, U+1EEA5-1EEA9, U+1EEAB-1EEBB, U+1EEF0-1EEF1; }
@font-face { font-family: 'Amiri'; font-style: normal; font-weight: 700; font-display: swap; src: url(/fonts/amiri-latin-700.woff2) format('woff2'); unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+0304, U+0308, U+0329, U+2000-206F, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD; }
@font-face { font-family: 'Schibsted Grotesk'; font-style: normal; font-weight: 400 700; font-display: swap; src: url(/fonts/schibsted-grotesk-latin-var.woff2) format('woff2'); unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+0304, U+0308, U+0329, U+2000-206F, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD; }
@font-face { font-family: 'Gloock'; font-style: normal; font-weight: 400; font-display: swap; src: url(/fonts/gloock-latin-400.woff2) format('woff2'); unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+0304, U+0308, U+0329, U+2000-206F, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD; }

:root {
  /* Palm & Date: two palm greens, cream text, one date-orange accent. */
  --olive: #23402e;
  --forest: #1c3526;
  --brown: #1c3526;
  --black: #15291d;
  --white: #f3ead9;
  --muted: rgba(243, 234, 217, 0.78);
  --grey: rgba(243, 234, 217, 0.78);
  --date: #c9672c;
  --rule: rgba(243, 234, 217, 0.22);
  --serif: "Gloock", Georgia, "Times New Roman", serif;
  --sans: "Schibsted Grotesk", "Helvetica Neue", Arial, sans-serif;
  --brand: "Gloock", Georgia, serif;
  --tight: -0.02em;
  --gutter: clamp(22px, 4vw, 58px);
  --radius: clamp(30px, 5.5vw, 80px);
  --header-h: 86px;
}

/* Arabic: joined script must not be letter-spaced, and needs more line height. */
html[lang="ar"] {
  --serif: "Amiri", "Gloock", Georgia, serif;
  --sans: "Helvetica Neue", "Geeza Pro", "Segoe UI", Tahoma, Arial, sans-serif;
  --brand: "Amiri", "Gloock", serif;
  --tight: 0;
}

*, *::before, *::after { box-sizing: border-box; }

html {
  scroll-behavior: smooth;
  -webkit-text-size-adjust: 100%;
  text-size-adjust: 100%;
}

body {
  margin: 0;
  background: var(--black);
  color: var(--white);
  font: 400 clamp(17px, 1.3vw, 19px)/1.6 var(--sans);
  -webkit-font-smoothing: antialiased;
}

body.menu-open { overflow: hidden; }

h1, h2, h3, h4, p, ul, figure { margin: 0; }
/* Large text sizes: long words wrap instead of pushing the page wider than the screen. */
h1, h2, h3, h4, p, figcaption { overflow-wrap: break-word; }
ul { padding: 0; list-style: none; }
img, video, svg { display: block; }
img, video { max-width: 100%; height: auto; }
a { color: inherit; text-decoration-thickness: 1px; text-underline-offset: 0.2em; }
:focus-visible { outline: 2px solid var(--white); outline-offset: 3px; }

.skip {
  position: absolute;
  inset-inline-start: 12px;
  top: -60px;
  z-index: 50;
  padding: 10px 16px;
  background: var(--white);
  color: var(--black);
}
.skip:focus { top: 12px; }

/* ---- type ---------------------------------------------------------------- */

.t-xl { font: 400 clamp(42px, 6.19vw, 89px)/1.01 var(--serif); letter-spacing: var(--tight); }
.t-lg { font: 400 clamp(29px, 3.55vw, 51px)/1.11 var(--serif); letter-spacing: var(--tight); }
.t-md { font: 400 clamp(21px, 2.11vw, 30px)/1.17 var(--serif); letter-spacing: var(--tight); }
.t-sans { font: 400 clamp(30px, 3.2vw, 46px)/1.2 var(--sans); }
.t-footer { font: 400 clamp(42px, 5.24vw, 75px)/1 var(--serif); letter-spacing: var(--tight); }
.body-lg { font-size: clamp(18px, 1.8vw, 26px); line-height: 1.55; }
.center { text-align: center; }
.bold { font-weight: 700; }
.lead { max-width: 25em; margin-inline: auto; }
.t-xl + .lead { margin-top: 0.45em; }

html[lang="ar"] :is(.t-xl, .t-lg, .t-md, .t-footer) { line-height: 1.35; }

/* ---- sections ------------------------------------------------------------ */

.section {
  position: relative;
  background: var(--bg);
  padding-block: clamp(48px, 6vw, 88px);
}
.section > * { position: relative; z-index: 1; }

.wrap {
  width: 100%;
  max-width: 1440px;
  margin-inline: auto;
  padding-inline: var(--gutter);
}
.wrap.narrow { max-width: calc(1214px + 2 * var(--gutter)); }

/* Rounded dividers: the neighbouring section's colour shows in the corners. */
.section.round-top { background: var(--prev); }
.section.round-bottom { background: var(--next); }
.section.round-top::before,
.section.round-bottom::before {
  content: "";
  position: absolute;
  inset: 0;
  z-index: 0;
  background: var(--bg);
}
.section.round-top::before {
  border-top: 3px solid var(--white);
  border-radius: var(--radius) var(--radius) 0 0;
}
.section.round-bottom::before {
  border-bottom: 3px solid var(--white);
  border-radius: 0 0 20px 20px;
}
.section.line-bottom { border-bottom: 3px solid var(--white); }

.section.wave-top { padding-top: clamp(32px, 2.8vw, 40px); }
.section > .wave {
  position: absolute;
  inset-inline: 0;
  top: -39px;
  z-index: 2;
  width: 100%;
  height: 40px;
}
.wave-fill { fill: var(--bg); }
.wave-line { fill: none; stroke: var(--white); stroke-width: 2; }

.page-title { padding-block: var(--pt, 48px) clamp(48px, 5.4vw, 78px); }

/* ---- header -------------------------------------------------------------- */

.site-header {
  position: sticky;
  top: 0;
  z-index: 30;
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 24px;
  height: var(--header-h);
  padding-inline: var(--gutter);
  background: var(--olive);
}

.brand {
  font: 400 clamp(26px, 2.35vw, 34px)/1.2 var(--brand);
  letter-spacing: var(--tight);
  text-decoration: none;
  white-space: nowrap;
}

.site-nav { display: flex; align-items: center; gap: clamp(18px, 2vw, 29px); }
.site-nav a { text-decoration: none; }
.site-nav > a:not(.icon-link) { border-bottom: 1px solid transparent; }
.site-nav > a:not(.icon-link):hover,
.site-nav > a[aria-current="page"] { border-bottom-color: currentColor; }
.icon-link { display: inline-flex; padding: 4px; }
.icon-link:hover { opacity: 0.7; }

.lang { position: relative; }
.lang summary {
  display: flex;
  align-items: center;
  gap: 7px;
  cursor: pointer;
  list-style: none;
}
.lang summary::-webkit-details-marker { display: none; }
.lang[open] .chevron { transform: rotate(180deg); }
.lang ul {
  position: absolute;
  inset-inline-end: 0;
  top: calc(100% + 12px);
  min-width: 150px;
  padding: 8px 0;
  background: var(--olive);
  border: 1px solid rgba(255, 255, 255, 0.45);
  border-radius: 6px;
}
.lang li a { display: block; padding: 8px 18px; }
.lang li a:hover, .lang li a[aria-current] { background: rgba(255, 255, 255, 0.14); }

.burger {
  display: none;
  position: absolute;
  inset-inline-end: var(--gutter);
  width: 44px;
  height: 44px;
  padding: 0;
  border: 0;
  background: none;
  color: inherit;
  cursor: pointer;
}
.burger span {
  position: absolute;
  inset-inline: 4px;
  height: 1px;
  background: currentColor;
  transition: transform 0.25s, top 0.25s;
}
.burger span:first-child { top: 17px; }
.burger span:last-child { top: 27px; }
.burger[aria-expanded="true"] span { top: 22px; }
.burger[aria-expanded="true"] span:first-child { transform: rotate(45deg); }
.burger[aria-expanded="true"] span:last-child { transform: rotate(-45deg); }

.mobile-menu {
  position: fixed;
  inset: var(--header-h) 0 0;
  z-index: 25;
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  gap: 44px;
  padding: 24px var(--gutter);
  background: var(--olive);
  overflow-y: auto;
}
.mobile-menu[hidden] { display: none; }
.mobile-menu a { text-decoration: none; }
.mobile-menu nav { display: grid; gap: 20px; text-align: center; font: 400 36px/1.2 var(--serif); }
.mobile-menu-foot { display: flex; align-items: center; gap: 22px; }
.mobile-lang { display: flex; gap: 18px; }
.mobile-lang a[aria-current] { border-bottom: 1px solid; }

/* ---- buttons ------------------------------------------------------------- */

.btn {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  min-width: min(322px, 100%);
  min-height: 68px;
  padding: 14px 36px;
  border: 1px solid var(--white);
  border-radius: 6px;
  background: transparent;
  color: var(--white);
  font: 400 clamp(16px, 1.39vw, 20px)/1.2 var(--sans);
  text-align: center;
  text-decoration: none;
  text-transform: uppercase;
  cursor: pointer;
  transition: background-color 0.2s, color 0.2s;
}
.btn:hover { background: var(--white); color: var(--black); }

.btn-row {
  display: flex;
  flex-wrap: wrap;
  justify-content: center;
  gap: 18px clamp(20px, 8.4vw, 122px);
  margin-block: clamp(32px, 4vw, 56px);
}

/* ---- media --------------------------------------------------------------- */

.video { position: relative; overflow: hidden; background: var(--black); }
.video video { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; }
.video-play {
  position: absolute;
  inset: 0;
  display: grid;
  place-items: center;
  width: 100%;
  height: 100%;
  padding: 0;
  border: 0;
  background: none;
  color: var(--white);
  cursor: pointer;
}
.video-play svg {
  box-sizing: content-box;
  padding: 12px;
  border-radius: 50%;
  background: rgba(0, 0, 0, 0.72);
  transition: transform 0.2s;
}
.video-play:hover svg { transform: scale(1.12); }
.video--player.is-playing .video-play { display: none; }

figcaption {
  padding-top: 14px;
  color: var(--muted);
  font-style: italic;
  text-align: center;
}
figcaption.plain { font-style: normal; }

.grid-2, .grid-3 { display: grid; gap: clamp(28px, 3vw, 44px) 11px; }
.grid-2 { grid-template-columns: repeat(2, minmax(0, 1fr)); }
.grid-3 { grid-template-columns: repeat(3, minmax(0, 1fr)); }

/* ---- home ---------------------------------------------------------------- */

.hero { padding-top: 0; padding-bottom: clamp(24px, 5.3vw, 76px); }
.hero-top {
  display: grid;
  grid-template-columns: 53.5% minmax(0, 1fr);
  align-items: start;
  gap: 0;
  padding-block: clamp(0px, 2.8vw, 40px) 0;
  padding-inline-end: 0;
}
.hero-copy { padding: 0; }
.hero-sub { margin-top: clamp(20px, 3vw, 45px); color: var(--grey); font: 400 clamp(20px, 2.11vw, 30.4px)/1.17 var(--serif); letter-spacing: var(--tight); }
.hero-top .t-xl { text-align: start; }

.short-grid { margin-block: 0 clamp(32px, 3vw, 44px); row-gap: clamp(32px, 3.3vw, 48px); }
.short-grid .video { aspect-ratio: 434 / 765 !important; }

.film-intro { position: relative; }
.film-intro + .btn-row { margin-top: 3vw; }
.film-intro .film-heading .t-md { max-width: 18.2em; }
/* Each laurel is sized (--n, in vw) so its visible art covers a similar area, then placed so the art is centred
   on the same column and row anchors. The files differ in padding, so the raw image widths are not comparable. */
.laurel { position: absolute; z-index: 2; display: block; width: calc(var(--n) * 1vw); }
.laurel img { width: 100%; height: auto; }
.laurel-tl { --n: 26; left: calc(-2.6vw - var(--gutter)); top: -4.7vw; }
.laurel-tr { --n: 23; right: calc(-1.1vw - var(--gutter)); top: -3.9vw; }
.laurel-bl { --n: 17.5; left: calc(1.65vw - var(--gutter)); top: 17.15vw; }
.laurel-br { --n: 20.1; right: calc(0.5vw - var(--gutter)); top: 17.25vw; }
@media (max-width: 800px) {
  .film-intro { display: grid; grid-template-columns: 1fr 1fr; gap: 16px; }
  .film-intro + .btn-row { margin-top: 32px; }
  .film-intro .film-heading { grid-column: 1 / -1; order: -1; }
  .film-intro { align-items: center; }
  .laurel { position: static; width: auto; }
  .laurel img { width: calc(min(8px, 1.6vw) * var(--n)); margin-inline: auto; }
}

.carousel { margin-top: clamp(24px, 2.2vw, 32px); }
.carousel-track {
  display: flex;
  gap: 20px;
  overflow-x: auto;
  padding-inline: var(--gutter);
  scroll-padding-inline: var(--gutter);
  scroll-snap-type: x mandatory;
  scrollbar-width: none;
}
.carousel-track::-webkit-scrollbar { display: none; }
.work { flex: 0 0 calc((100% - 60px) / 4.13); min-width: 230px; scroll-snap-align: start; }
.work-poster { display: block; aspect-ratio: 2 / 3; margin-bottom: 14px; overflow: hidden; }
.work-poster img { width: 100%; height: 100%; object-fit: cover; }
.work h4 { margin-bottom: 3px; line-height: 1.005; }
.work-line, .work-awards { color: var(--muted); }
.work-awards { margin-top: 20px; }
.carousel-btn {
  position: absolute;
  top: clamp(130px, 16vw, 232px);
  inset-inline-end: clamp(12px, 3vw, 44px);
  display: grid;
  place-items: center;
  width: 60px;
  height: 60px;
  padding: 0;
  border: 0;
  border-radius: 50%;
  background: var(--white);
  color: var(--black);
  cursor: pointer;
  box-shadow: 0 2px 12px rgba(0, 0, 0, 0.3);
}
.carousel-btn[hidden] { display: none; }
.carousel-btn.prev { inset-inline: clamp(12px, 3vw, 44px) auto; }
.carousel-btn.prev svg, [dir="rtl"] .carousel-btn.next svg { transform: scaleX(-1); }
[dir="rtl"] .carousel-btn.prev svg { transform: none; }

.accordion summary {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 20px;
  padding-block: clamp(20px, 2.3vw, 33px);
  cursor: pointer;
  list-style: none;
}
.accordion summary::-webkit-details-marker { display: none; }
.accordion .chevron { flex: none; width: 34px; height: 34px; transition: transform 0.2s; }
.accordion[open] .chevron { transform: rotate(180deg); }
.accordion-body { padding-bottom: clamp(24px, 3vw, 40px); }
.wrap.narrow .accordion { margin-top: clamp(28px, 3vw, 40px); border-block: 1px solid var(--white); }

.credits-heading { margin: 26px 0 8px; font: 400 clamp(21px, 2.11vw, 30px)/1.2 var(--serif); }
.credits-heading:first-child { margin-top: 0; }
.credits li {
  display: grid;
  grid-template-columns: minmax(0, 19em) minmax(0, 1fr);
  gap: 2px 28px;
  padding-block: 10px;
  border-bottom: 1px solid rgba(255, 255, 255, 0.16);
}
.credit-work { color: var(--muted); }

.photo-grid {
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  align-items: start;
  gap: 0 18px;
  margin-top: clamp(28px, 4.4vw, 64px);
}
.photo-col { display: grid; gap: clamp(32px, 9.65vw, 139px); }
.photo-col h3 { margin-bottom: clamp(18px, 2.2vw, 32px); }
.photo-col img { width: 100%; margin-inline: auto; }
.pg-portrait { width: 75%; }
.photo-col:first-child .pg-portrait { margin-inline-start: auto; }
.photo-col:last-child .pg-portrait { margin-inline-end: auto; }
.photo-col img + img { margin-top: clamp(28px, 3.6vw, 52px); }

.trio {
  display: flex;
  align-items: center;
  justify-content: center;
  gap: clamp(16px, 6vw, 86px);
  max-width: 1196px;
  margin: clamp(36px, 5.6vw, 80px) auto;
}
.trio img { min-width: 0; height: auto; }
.trio:last-child { margin-bottom: 0; }

.contact {
  display: grid;
  grid-template-columns: minmax(0, 546fr) minmax(0, 657fr);
  align-items: start;
  gap: clamp(32px, 8.4vw, 121px);
}
.contact-form { display: grid; gap: 20px; }
.contact-form fieldset { min-width: 0; margin: 0; padding: 0; border: 0; }
.contact-form legend { padding: 0; line-height: 34px; }
.field-row { display: grid; grid-template-columns: 1fr 1fr; gap: 20px; }
.contact-form label { display: block; line-height: 34px; }
.req { margin-inline-start: 4px; color: var(--muted); font-size: 0.9em; }
.contact-form :is(input, select, textarea) {
  display: block;
  width: 100%;
  margin-top: 0;
  padding: 8px 0;
  border: 0;
  border-bottom: 1px solid rgba(255, 255, 255, 0.5);
  border-radius: 0;
  background: transparent;
  color: var(--white);
  font: inherit;
  line-height: 24px;
}
.contact-form :is(input, select, textarea):focus-visible { outline: none; border-bottom-color: var(--white); box-shadow: 0 1px 0 var(--white); }
.contact-form textarea { height: 100px; resize: vertical; }
.contact-form select {
  appearance: none;
  padding-inline-end: 34px;
  background: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23fff' stroke-width='1.6'%3E%3Cpath d='m5 9 7 7 7-7'/%3E%3C/svg%3E") no-repeat right center / 22px;
}
[dir="rtl"] .contact-form select { background-position: left center; }
.contact-form select:invalid, .contact-form select option[value=""] { color: var(--muted); }
.contact-form option { color: var(--black); }
.budget { display: flex; align-items: baseline; gap: 10px; color: var(--muted); }
/* spam trap: hidden from people, visible to bots */
.hp { position: absolute !important; width: 1px !important; height: 1px; margin: 0 !important; padding: 0 !important; border: 0 !important; opacity: 0; clip-path: inset(50%); pointer-events: none; }
.contact-form .btn { justify-self: start; min-width: 158px; }
.form-status { min-height: 1.5em; color: var(--muted); }

/* ---- footer -------------------------------------------------------------- */

.site-footer { padding-block: clamp(32px, 2.7vw, 39px) 30px; text-align: center; }
.footer-cols { display: flex; justify-content: center; gap: clamp(56px, 10.5vw, 152px); margin-top: clamp(32px, 4.1vw, 59px); }
.footer-cols a { display: inline-block; line-height: 30px; }
.footer-cols h2 { margin-bottom: clamp(18px, 2vw, 28px); }

/* ---- cinematography / editing ------------------------------------------- */

.logos {
  display: flex;
  align-items: center;
  justify-content: space-around;
  gap: clamp(16px, 5vw, 72px);
  margin-top: clamp(28px, 4vw, 56px);
}
.logos img { width: clamp(84px, 17vw, 250px); aspect-ratio: 2.1; object-fit: cover; transform: scale(var(--scale, 1)); }

.tools {
  display: flex;
  flex-wrap: wrap;
  gap: 24px clamp(20px, 4.7vw, 68px);
  margin-top: clamp(20px, 1.8vw, 26px);
}
.tools li { display: grid; justify-items: center; gap: 14px; width: clamp(84px, 10.6vw, 153px); font-size: clamp(14px, 1.39vw, 20px); text-align: center; }
.tools img { width: 100%; aspect-ratio: 1; object-fit: contain; }

.yt {
  position: relative;
  max-width: 880px;
  margin: 0 auto clamp(32px, 4vw, 56px);
  aspect-ratio: 16 / 9;
  background: var(--black);
}
.yt a, .yt iframe { position: absolute; inset: 0; width: 100%; height: 100%; border: 0; }
.yt img { width: 100%; height: 100%; object-fit: cover; }

.clips { margin-block: clamp(32px, 5.6vw, 80px) clamp(16px, 2vw, 28px); }
.clips img { width: 100%; }
.clips figcaption { display: flex; flex-direction: column; padding-top: clamp(14px, 1.7vw, 24px); font-style: normal; text-align: start; }
#doc h3 { margin-top: clamp(40px, 5vw, 72px); }

.samples figure { display: grid; grid-template-rows: auto 1fr auto; }
.samples h3 { margin-bottom: clamp(18px, 2.1vw, 30px); }
.samples .video { align-self: center; }
.samples figcaption { padding-top: clamp(14px, 2.6vw, 38px); font-style: normal; }
.samples figcaption strong { display: block; }
.samples figcaption strong:only-child, .samples figcaption > strong:not(:first-child) { display: inline; }

.skills { gap: 40px clamp(40px, 10vw, 150px); }
.skills h2 { margin-bottom: clamp(18px, 2vw, 30px); }
.skills p { max-width: 17.5em; }

/* ---- bio ----------------------------------------------------------------- */

.bio { padding-top: clamp(40px, 6vw, 90px); padding-bottom: 16px; }
.bio-main { max-width: 752px; margin: clamp(28px, 4vw, 56px) auto 0; }
.bio-main img { width: 100%; }
.bio-grid {
  display: grid;
  grid-template-columns: 22.6% minmax(0, 1fr) 26.5%;
  align-items: stretch;
  margin-top: clamp(40px, 4.3vw, 62px);
}
.bio-side { display: flex; flex-direction: column; justify-content: flex-start; gap: 32px; }
.bio-side:first-child { gap: 389px; }
.bio-side:last-child { gap: 170px; margin-top: -4px; }
.bio-side img { width: 100%; }
.bio-text { padding-inline: clamp(24px, 4.6vw, 67px) clamp(12px, 1vw, 14px); }
.bio-text p + p { margin-top: 0.85em; }

/* ---- film pages ---------------------------------------------------------- */

.film-hero { padding-block: clamp(48px, 12vw, 172px) clamp(48px, 9.2vw, 133px); }
.film-hero-grid {
  display: grid;
  grid-template-columns: minmax(0, 378fr) minmax(0, 880fr);
  align-items: center;
  gap: clamp(28px, 4.6vw, 67px);
}
.film-poster img { width: 100%; }
.film-role { font: 700 clamp(29px, 3.2vw, 46px)/1.15 var(--serif); letter-spacing: var(--tight); }
.film-title { margin-top: clamp(14px, 1.6vw, 22px); font: 400 clamp(25px, 2.5vw, 36px)/1.25 var(--serif); }
.film-title em { font-weight: 700; }
.film-meta { margin-top: clamp(20px, 2.3vw, 33px); line-height: 1.4; }
.film-info .body-lg { max-width: 30em; margin-top: 12px; }

.film-gallery { display: grid; align-items: start; gap: 48px clamp(40px, 9.6vw, 139px); padding-block: clamp(16px, 4vw, 56px); }
.film-gallery.has-bts { grid-template-columns: minmax(0, 768fr) minmax(0, 401fr); }
.film-gallery:not(.has-bts) { max-width: calc(768px + 2 * var(--gutter)); }
.film-gallery h2 { margin-bottom: clamp(18px, 1.9vw, 27px); }
/* stills read down each column, as on the original site */
.stills { display: grid; grid-template-columns: 1fr 1fr; grid-template-rows: repeat(3, auto); grid-auto-flow: column; gap: clamp(11px, 1.7vw, 24px) 11px; }
.bts { display: grid; gap: 11px; }
.stills img, .bts img { width: 100%; }

/* ---- small screens ------------------------------------------------------- */

@media (max-width: 860px) {
  :root { --header-h: 78px; }
  .site-header { justify-content: center; }
  .site-nav { display: none; }
  .burger { display: block; }

  .hero-top { grid-template-columns: 1fr; }
  .btn { width: 100%; }

  .grid-2, .grid-3 { grid-template-columns: 1fr; }
  .short-grid figure, .samples figure { width: 100%; max-width: 440px; margin-inline: auto; }

  .work { flex-basis: 72%; }
  .carousel-btn { width: 48px; height: 48px; top: 34vw; }
  .credits li { grid-template-columns: 1fr; }

  .photo-grid { grid-template-columns: 1fr; gap: 40px; }
  .photo-col .pg-portrait, .photo-col:first-child .pg-portrait, .photo-col:last-child .pg-portrait { margin-inline: auto; }
  .trio { flex-direction: column; gap: 22px; }
  .trio img { flex: none !important; width: 100%; max-width: 440px; }

  .contact { grid-template-columns: 1fr; }
  .logos img { aspect-ratio: 1.7; }
  .tools { justify-content: center; }

  .bio-grid { grid-template-columns: 1fr; gap: 24px; padding-inline: var(--gutter); }
  .bio-text { order: -1; padding-inline: 0; }
  .bio-side, .bio-side:first-child, .bio-side:last-child { flex-direction: row; gap: 12px; margin-top: 0; }
  .bio-side img { width: calc(50% - 6px); object-fit: cover; }

  .film-hero-grid, .film-gallery.has-bts { grid-template-columns: 1fr; }
  .film-poster { max-width: 320px; }
}

@media (max-width: 480px) {
  .field-row { grid-template-columns: 1fr; }
  .stills { grid-template-columns: 1fr; grid-template-rows: none; grid-auto-flow: row; }
  .footer-cols { gap: 40px; }
}

@media (prefers-reduced-motion: reduce) {
  html { scroll-behavior: auto; }
  * { transition: none !important; }
}

.site-footer.round-top::before { border-top: 0; }
#contact { padding-block: clamp(48px, 6vw, 86px) clamp(64px, 10.5vw, 151px); }

.form-status:empty { display: none; }

.film-intro + .btn-row { margin-bottom: calc(clamp(32px, 4vw, 56px) + 29px); }
#short { padding-bottom: clamp(30px, 4.2vw, 65px); }
.carousel + .wrap { margin-top: 24px; }
#film { padding-bottom: clamp(30px, 3.5vw, 50px); }
#graphic { padding-bottom: clamp(40px, 4.6vw, 66px); }

.clips .video, .samples .video:not(.video-tall) { aspect-ratio: 16 / 9 !important; }
.samples figure:nth-child(n+7) .video { aspect-ratio: 434 / 765 !important; }

/* spacing tuned to the live site's measurements */
.clips { margin-top: clamp(32px, 4.3vw, 62px); row-gap: calc(clamp(28px, 3vw, 44px) + 8px); }
.yt { margin-bottom: clamp(24px, 3vw, 46px); }
#narrative { padding-bottom: 23px; }
#narrative .clips:last-child, #doc .clips:last-child { margin-bottom: 0; }
#narrative.wave-top { padding-top: 91px; }
#doc { padding-bottom: 71px; }
#doc > .wrap > h3:first-of-type { margin-top: 101px; }
#doc > .wrap > h3:last-of-type { margin-top: 49px; }
.wrap.narrow .accordion { margin-top: 22px; }
#edit.wave-top { padding-top: 84px; }
.samples { row-gap: 38px; }
.samples figure:nth-child(n+7) { margin-top: 34px; }
.wrap.narrow .yt ~ .accordion { margin-top: 43px; }
#edit { padding-bottom: 11px; }
#sound { padding-bottom: calc(clamp(48px, 6vw, 88px) + 19px); }

/* legal text */
.footer-legal { margin-top: clamp(28px, 3vw, 44px); font-size: 14px; color: var(--muted); }
.footer-legal a { text-decoration: underline; }
.form-note { font-size: 14px; color: var(--muted); }
.form-note a { text-decoration: underline; }
.prose h2 { margin-top: clamp(32px, 3.5vw, 52px); }
.prose h2:first-of-type { margin-top: clamp(24px, 2.5vw, 36px); }
.prose p + p { margin-top: 0.9em; }
.prose a { text-decoration: underline; }
.prose h2 + p { margin-top: 0.5em; }


/* ---- Palm & Date design ----------------------------------------------------
   Green throughout with one orange accent. Flat section edges with an orange
   rule instead of rounded white borders, pill buttons, left-aligned headings. */

/* section edges */
.section.round-top::before, .section.round-bottom::before { border-radius: 0; border-color: var(--date); }
.section.round-top::before { border-top-width: 3px; }
.section.round-bottom::before { border-bottom: 0; }
.section.line-bottom { border-bottom-color: var(--date); }
.wave-line { stroke: var(--date); }

/* header */
.site-header { background: var(--olive); }
/* the name's letters stand as tall as the language switch */
.brand { font-size: clamp(28px, 2.6vw, 37px); }
.site-nav { gap: 8px; }
.site-nav > a:not(.icon-link) { padding: 8px 15px; border: 1.5px solid var(--rule); border-radius: 99px; font-size: 15px; font-weight: 500; }
.site-nav > a:not(.icon-link):hover { border-color: var(--date); color: var(--date); }
.site-nav > a[aria-current="page"] { border-color: var(--white); }
.nav-icons { display: flex; gap: 6px; margin-inline-start: 10px; }
.icon-link { display: grid; place-items: center; width: 38px; height: 38px; padding: 0; border: 1.5px solid var(--rule); border-radius: 50%; }
.icon-link svg { width: 17px; height: 17px; }
.icon-link:hover { opacity: 1; border-color: var(--date); color: var(--date); }
.lang-switch { display: flex; margin-inline-start: 10px; padding: 3px; border: 1.5px solid var(--date); border-radius: 99px; font-size: 15px; font-weight: 500; }
.lang-switch > * { display: grid; place-items: center; min-width: 40px; height: 30px; padding: 0 10px; border-radius: 99px; text-decoration: none; }
.lang-switch span { background: var(--date); color: var(--white); }
.lang-switch a:hover { color: var(--date); }
.mobile-menu nav a { font-family: var(--serif); }
.mobile-menu-foot { gap: 10px; }
/* on small screens the language switch sits in the header's start corner, opposite the menu button */
.lang-mobile { display: none; }
@media (max-width: 860px) {
  .lang-mobile { display: flex; position: absolute; inset-inline-start: var(--gutter); margin: 0; padding: 2px; border-width: 1px; font-size: 11px; }
  .lang-mobile > * { min-width: 0; width: 25px; height: 22px; padding: 0; }
  /* leave room for the switch and the menu button either side of the centred name */
  /* the switch is 16px wider than the menu lines, so the name moves 8px toward the menu to sit evenly between them */
  .brand { font-size: clamp(16px, calc(13.5vw - 27px), 29px); translate: 8px; }
  [dir="rtl"] .brand { translate: -8px; }
}

/* headings: title on the left, intro beside it with an orange underline */
.sec-head { display: grid; margin-bottom: clamp(32px, 3.6vw, 52px); }
.sec-head + .trio, .sec-head + .photo-grid, .sec-head + .short-grid { margin-top: 0; }
.sec-head { grid-template-columns: auto minmax(0, 1fr); align-items: end; gap: clamp(16px, 4vw, 64px); text-align: start; }
.sec-head:has(> :only-child) { grid-template-columns: 1fr; }
.sec-head p { max-width: 50ch; margin-inline: 0; padding-bottom: 0.6em; border-bottom: 3px solid var(--date); color: var(--white); font: 400 clamp(18px, 1.6vw, 23px)/1.4 var(--sans); letter-spacing: 0; text-wrap: pretty; }
.film-heading.sec-head { grid-template-columns: 1fr; justify-items: center; text-align: center; }
.film-heading.sec-head p { max-width: 24em; }
.edu { display: grid; gap: 4px; }
.edu-school { color: var(--muted); font-size: 0.85em; }
.sec-note { color: var(--muted); font: 400 clamp(18px, 1.6vw, 23px)/1.4 var(--sans); }
.page-title .t-xl { text-align: start; }
@media (max-width: 760px) { .sec-head { grid-template-columns: 1fr; } }

/* buttons */
.btn { min-height: 56px; border: 1.5px solid var(--date); border-radius: 99px; font: 500 clamp(16px, 1.3vw, 18px)/1.2 var(--sans); text-transform: none; }
.btn:hover { background: var(--date); color: var(--white); }
.carousel-btn { background: var(--date); color: var(--white); }

/* text details */
figcaption { color: var(--muted); font-style: normal; text-align: start; }
.credits li { border-bottom-color: var(--rule); }
.wrap.narrow .accordion { border-block-color: var(--rule); }
.accordion summary:hover .chevron { color: var(--date); }
.contact-form :is(input, select, textarea) { border-bottom-color: var(--rule); }
.contact-form :is(input, select, textarea):focus-visible { border-bottom-color: var(--date); box-shadow: 0 1px 0 var(--date); }
.contact-form option { background: var(--white); }
.footer-legal, .form-note { font-size: 15px; }
.site-footer .t-footer { color: var(--white); }
.footer-cols a:hover { color: var(--date); }

/* ---- hero ---------------------------------------------------------------- */

.hero { padding-block: clamp(32px, 5vw, 80px) clamp(64px, 8vw, 120px); }
.hero-grid { display: grid; grid-template-columns: 1fr 1.6fr; gap: clamp(28px, 4vw, 64px); align-items: center; }
.hero .t-xl { font-size: clamp(44px, 5vw, 88px); line-height: 0.94; }
.hero .u { background: linear-gradient(transparent 68%, var(--date) 68% 90%, transparent 90%); }
.hero-sub { max-width: 38ch; margin-top: clamp(22px, 2.6vw, 36px); color: var(--muted); font: 400 clamp(18px, 1.5vw, 21px)/1.5 var(--sans); letter-spacing: 0; }
.hero-media { position: relative; }
.reel-badge { position: absolute; inset-inline-start: -52px; bottom: -52px; display: grid; place-items: center; width: 124px; height: 124px; overflow: hidden; border-radius: 50%; background: var(--date); color: var(--white); }
.reel-badge svg:first-child { position: absolute; inset: 0; width: 100%; height: 100%; animation: spin 18s linear infinite; }
.reel-badge text { fill: currentColor; font: 700 9.5px var(--sans); letter-spacing: 1.6px; }
/* text runs along the circle left to right; Arabic letters still join and read correctly */
.reel-badge text { direction: ltr; }
html[lang="ar"] .reel-badge text { letter-spacing: 0; font-size: 11px; }
.reel-badge:hover { background: var(--white); color: var(--olive); }
@keyframes spin { to { transform: rotate(360deg); } }
@media (prefers-reduced-motion: reduce) { .reel-badge svg:first-child { animation: none; } }
@media (max-width: 860px) {
  .hero-grid { grid-template-columns: 1fr; }
  .reel-badge { inset-inline: auto 12px; bottom: -44px; width: 96px; height: 96px; }
}

/* ---- marketing ----------------------------------------------------------- */

.mk-case { padding-block: clamp(36px, 4vw, 64px); border-top: 1px solid var(--rule); }
.mk-case + .mk-case { border-top: 3px solid var(--date); }
.mk-case:last-child { padding-bottom: 0; }
.hl-unit:first-child { margin-inline: 0 0.25em; }

.mk-who { display: flex; flex-wrap: wrap; align-items: center; gap: 18px; margin-bottom: clamp(28px, 3vw, 44px); }
.mk-logo { width: auto; max-width: none; height: 52px; }
.mk-logo-lab { height: 84px; }
.mk-logo-dejavu { height: clamp(52px, 16vw, 72px); }
/* the logo keeps its size and shape; the company name wraps to the logo's width */
.mk-brand { flex: none; width: min-content; display: grid; justify-items: center; gap: 8px; font-size: 14px; line-height: 1.3; text-align: center; color: var(--muted); }
/* on the narrowest phones the details drop below the logo rather than squeeze it */
.mk-meta { flex: 1 1 140px; display: grid; gap: 4px; padding-inline-start: 18px; border-inline-start: 1px solid var(--rule); font-size: 17px; line-height: 1.45; }
.mk-meta b { font-size: 19px; }

.mk-grid { display: grid; grid-template-columns: 1.3fr 1fr; gap: clamp(28px, 4vw, 72px); }
.mk-grid-wide { grid-template-columns: 1fr 1.25fr; align-items: start; }
.mk-grid > * { min-width: 0; }
.mk-body { padding-block: 4px 22px; color: var(--muted); }
.mk-body p { max-width: 62ch; }
.mk-body p + p { margin-top: 12px; }
.mk-body mark { background: none; color: var(--white); box-shadow: inset 0 -0.42em 0 rgba(201, 103, 44, 0.55); }

/* every result is the same size: value and unit in orange, what it means underneath */
.hl { display: block; padding-block: 22px; border-top: 1px solid var(--rule); text-decoration: none; }
.mk-grid > div > .hl:first-child { padding-top: 0; border-top: 0; }
/* the last result ends on its label line, so the tall photo beside it stops there too */
.mk-grid > div > .hl:last-child { padding-bottom: 0; }
.hl-n { color: var(--date); font: 400 clamp(48px, 6.2vw, 100px)/0.9 var(--serif); letter-spacing: -0.03em; }
html[lang="ar"] .hl-n { letter-spacing: 0; line-height: 1.2; }
.hl-n > span:first-child { white-space: nowrap; }
.hl-n small { font-size: 0.5em; color: #a8b58a; }
.hl-unit { margin-inline-start: 0.15em; font-size: 0.45em; letter-spacing: 0; }
.hl-sub { margin-top: 10px; color: var(--date); font: 400 clamp(26px, 2.6vw, 40px)/1 var(--serif); }
.hl-sub .hl-unit { margin: 0; font-size: 0.6em; }
.hl-label { margin-top: 10px; }
a.hl:hover .hl-n, a.hl:hover .hl-sub { color: var(--white); }

.mk-photo { position: relative; display: block; }
.mk-photo img { width: 100%; transition: opacity 0.3s; }
.mk-photo:hover img { opacity: 0.85; }
/* the tall Breaking Bad photo fills the text column's height, trimmed top and bottom */
.mk-photo-tall { min-height: 100%; }
.mk-photo-tall img { position: absolute; inset: 0; height: 100%; object-fit: cover; object-position: 50% 40%; }
.mk-tag { position: absolute; top: -14px; inset-inline-end: 18px; padding: 10px 14px; background: var(--white); color: var(--olive); font: 700 15px/1.2 var(--sans); box-shadow: 0 6px 18px rgba(0, 0, 0, 0.25); transform: rotate(3deg); }
.mk-photo:hover .mk-tag { background: var(--date); color: var(--white); }

@media (max-width: 860px) {
  .mk-grid, .mk-grid-wide { grid-template-columns: 1fr; }
  .mk-photo-tall { min-height: 0; aspect-ratio: 4 / 5; }
}

/* laurels bleed to the screen edge; never let them widen the page */
body { overflow-x: clip; }
.tools li { font-size: clamp(15px, 1.39vw, 20px); }
#marketing { padding-bottom: clamp(32px, 4vw, 56px); }

/* Filmmaking laurels: placed by the centre of their visible art, not the image box (the files have
   different transparent padding). Each art covers about the same area; the two left laurels share one
   centre line, the two right ones mirror it, and each row shares a centre height.
   --w: image width; --fx/--fy: art centre as a fraction of the image; --r: image height / width.
   --u is 1vw up to the 1440px content width. */
@media (min-width: 801px) {
  .film-intro { --u: min(1vw, 14.4px); --col: calc(9.5 * var(--u)); --row1: calc(4.5 * var(--u)); --row2: calc(20.5 * var(--u)); }
  .laurel { width: calc(var(--w) * var(--u)); top: calc(var(--cy) - var(--fy) * var(--w) * var(--r) * var(--u)); }
  .laurel-tl, .laurel-bl { left: calc(var(--col) - var(--fx) * var(--w) * var(--u)); right: auto; }
  .laurel-tr, .laurel-br { right: calc(var(--col) - (1 - var(--fx)) * var(--w) * var(--u)); left: auto; }
  .laurel-tl { --w: 27.40; --r: 0.5627; --fx: 0.4997; --fy: 0.4988; --cy: var(--row1); } /* Red Rose */
  .laurel-tr { --w: 24.48; --r: 0.5627; --fx: 0.4997; --fy: 0.4994; --cy: var(--row1); } /* Altoona */
  .laurel-bl { --w: 15.98; --r: 0.6627; --fx: 0.4997; --fy: 0.4593; --cy: var(--row2); } /* Centre */
  .laurel-br { --w: 21.22; --r: 0.5371; --fx: 0.5075; --fy: 0.4860; --cy: var(--row2); } /* Indie Short Fest */
  #film .btn-row { gap: 18px 40px; }
  #film .btn { min-width: 240px; }
}
.sec-note { font-size: clamp(21px, 2.1vw, 30px); max-width: 32em; margin-inline: auto; text-align: center; text-wrap: balance; }
@media (min-width: 801px) and (max-width: 1000px) { #film .btn { min-width: 210px; } }
@media (min-width: 801px) and (max-width: 900px) { .film-intro { --u: 0.85vw; } #film .btn { width: auto; } }