/* Out of Office MENA — v3 "cinematic"
   One dark canvas. Photography framed like film. Cream only for paper objects on set
   (the call sheet, the contact form). Lime is the gaffer-tape accent. */

@font-face { font-family: "Archivo"; src: url("/fonts/archivo-wide.woff2") format("woff2"); font-weight: 400 800; font-stretch: 100% 125%; font-display: swap; }
@font-face { font-family: "Courier Prime"; src: url("/fonts/courier-prime.woff2") format("woff2"); font-weight: 400; font-display: swap; }

:root {
  --black: #151514;
  --ink: #1c1c1a;
  --ink-2: #252522;
  --paper: #efece3;
  --paper-2: #e4e0d4;
  --lime: #bce342;
  --text: #ece9e0;
  --mist: #9e9a8f;
  --dim: #6f6c64;
  --smoke: #5f5c55;
  --line: rgba(236, 233, 224, .13);
  --line-paper: rgba(28, 28, 26, .14);
  --f: "Archivo", "Helvetica Neue", Arial, sans-serif;
  --mono: "Courier Prime", "Courier New", Courier, monospace;
  --g: clamp(1.25rem, 4vw, 3rem);
  --max: 86rem;
  --ease: cubic-bezier(.2, .7, .2, 1);
  --slow: cubic-bezier(.65, 0, .35, 1);
  box-sizing: border-box;
}
*, *::before, *::after { box-sizing: inherit; }
html { scroll-behavior: smooth; scroll-padding-top: 4.5rem; -webkit-text-size-adjust: 100%; background: var(--black); }
body { margin: 0; background: var(--black); color: var(--text); font-family: var(--f); font-size: 1.0625rem; line-height: 1.6; -webkit-font-smoothing: antialiased; text-rendering: optimizeLegibility; }
img, picture { display: block; max-width: 100%; }
picture > img { width: 100%; height: 100%; object-fit: cover; }
[hidden] { display: none !important; }
a { color: inherit; }
p { margin: 0 0 1em; }
h1, h2, h3 { margin: 0; font-weight: 700; }
button { font: inherit; color: inherit; }
:focus-visible { outline: 3px solid var(--lime); outline-offset: 3px; }
.skip { position: absolute; left: 1rem; top: -4rem; z-index: 100; background: var(--lime); color: var(--black); padding: .6rem 1rem; font-weight: 700; }
.skip:focus { top: 1rem; }

.wrap { width: 100%; max-width: var(--max); margin-inline: auto; padding-inline: var(--g); }
.g12 { display: grid; grid-template-columns: repeat(12, minmax(0, 1fr)); column-gap: clamp(.9rem, 2.2vw, 2rem); }

/* ---------- Type ---------- */
.t-xl, .t-l, .t-m { font-stretch: 118%; font-weight: 700; letter-spacing: -.028em; text-wrap: balance; }
.t-xl { font-size: clamp(2.6rem, 6.8vw, 6.4rem); line-height: .96; }
.t-l  { font-size: clamp(2rem, 4.2vw, 3.8rem); line-height: 1.0; }
.t-m  { font-size: clamp(1.35rem, 2.2vw, 1.95rem); line-height: 1.12; font-stretch: 112%; letter-spacing: -.015em; }
.say  { font-size: clamp(1.35rem, 2.5vw, 2.2rem); line-height: 1.28; font-weight: 450; letter-spacing: -.01em; text-wrap: pretty; }
.lede { font-size: clamp(1.06rem, 1.4vw, 1.2rem); line-height: 1.55; }
.soft { color: var(--mist); }

/* Screenplay scene heading: the one typewriter voice on the site */
.slug { font-family: var(--mono); font-size: .8rem; line-height: 1.4; letter-spacing: .02em; color: var(--mist); margin: 0; }
.slug b { font-weight: 400; color: var(--lime); }

/* ---------- Buttons ---------- */
.btn { display: inline-flex; align-items: center; justify-content: center; gap: .6rem; min-height: 3rem; padding: .8rem 1.35rem; border-radius: 999px; border: 1.5px solid transparent; font-weight: 650; font-size: .98rem; line-height: 1; text-decoration: none; cursor: pointer; transition: background-color .25s, color .25s, border-color .25s, transform .25s var(--ease); }
.btn:active { transform: scale(.97); }
.btn-lime { background: var(--lime); color: var(--black); }
.btn-lime:hover { background: var(--text); }
.btn-ghost { border-color: rgba(236,233,224,.55); }
.btn-ghost:hover { background: var(--text); color: var(--black); border-color: var(--text); }
.btn-ink { background: var(--ink); color: var(--text); }
.btn-ink:hover { background: var(--lime); color: var(--black); }
.btn-line { border-color: var(--ink); color: var(--ink); }
.btn-line:hover { background: var(--ink); color: var(--text); }
.ic { width: 1.1em; height: 1.1em; flex: none; }

/* ---------- Header ---------- */
.hdr { position: fixed; inset: 0 0 auto 0; z-index: 60; transition: transform .45s var(--ease), background-color .35s; padding-top: env(safe-area-inset-top, 0px); }
.hdr-in { display: flex; align-items: center; justify-content: space-between; gap: 1.5rem; height: 4.25rem; }
.hdr.is-solid { background: rgba(21, 21, 20, .86); backdrop-filter: saturate(1.3) blur(12px); -webkit-backdrop-filter: saturate(1.3) blur(12px); }
.hdr.is-hidden { transform: translateY(-100%); }
.brand img { height: clamp(1.8rem, 3.6vw, 2.25rem); width: auto; transform: rotate(-1.5deg); transition: transform .3s var(--ease); }
.brand:hover img { transform: rotate(0); }
.nav { display: flex; align-items: center; gap: .15rem; }
.nav a:not(.btn) { position: relative; text-decoration: none; font-size: .93rem; font-weight: 550; padding: .55rem .75rem; color: rgba(236,233,224,.78); transition: color .2s; }
.nav a:not(.btn)::after { content: ""; position: absolute; left: .75rem; right: .75rem; bottom: .3rem; height: 2px; background: var(--lime); transform: scaleX(0); transform-origin: left; transition: transform .35s var(--ease); }
.nav a:not(.btn):hover, .nav a.is-active { color: var(--text); }
.nav a:not(.btn):hover::after, .nav a.is-active::after { transform: scaleX(1); }
.nav .btn { margin-left: .7rem; min-height: 2.55rem; padding: .55rem 1.05rem; }
.menu-btn { display: none; }
@media (max-width: 900px) {
  .menu-btn { display: inline-flex; align-items: center; gap: .55rem; background: none; border: 0; padding: .6rem 0; cursor: pointer; font-weight: 650; }
  .menu-btn i { position: relative; width: 1.4rem; height: 2px; background: currentColor; }
  .menu-btn i::before, .menu-btn i::after { content: ""; position: absolute; left: 0; width: 100%; height: 2px; background: currentColor; transition: transform .3s var(--ease); }
  .menu-btn i::before { top: -6px; } .menu-btn i::after { top: 6px; }
  .menu-open .menu-btn i { background: transparent; }
  .menu-open .menu-btn i::before { transform: translateY(6px) rotate(45deg); }
  .menu-open .menu-btn i::after { transform: translateY(-6px) rotate(-45deg); }
  .nav { position: fixed; inset: 0; z-index: -1; flex-direction: column; align-items: stretch; justify-content: flex-end; padding: 6rem var(--g) calc(2.5rem + env(safe-area-inset-bottom, 0px)); background: var(--black); clip-path: inset(0 0 100% 0); visibility: hidden; transition: clip-path .55s var(--slow), visibility 0s .55s; }
  .menu-open .nav { clip-path: inset(0); visibility: visible; transition: clip-path .55s var(--slow); }
  .nav a:not(.btn) { font-size: clamp(2rem, 9vw, 2.8rem); font-stretch: 118%; font-weight: 700; letter-spacing: -.02em; padding: .35rem 0; border-bottom: 1px solid var(--line); color: var(--text); }
  .nav a:not(.btn)::after { display: none; }
  .nav a.is-active { color: var(--lime); }
  .nav .btn { margin: 1.6rem 0 0; min-height: 3.2rem; }
  .menu-open { overflow: hidden; }
}

/* ---------- Opening shot: letterbox bars open on load ---------- */
.open { position: relative; height: 100svh; min-height: 34rem; display: grid; align-items: end; overflow: hidden; isolation: isolate; background: #000; }
.open > picture { position: absolute; inset: 0; z-index: -2; }
.open > picture img { object-position: 50% 45%; }
.open::after { content: ""; position: absolute; inset: 0; z-index: -1; background: linear-gradient(180deg, rgba(0,0,0,.45) 0, rgba(0,0,0,0) 8rem), linear-gradient(72deg, rgba(10,10,9,.82) 0%, rgba(10,10,9,.38) 40%, rgba(10,10,9,0) 66%), linear-gradient(0deg, rgba(10,10,9,.6) 0%, rgba(10,10,9,0) 42%); }
.lbars { position: absolute; inset: 0; z-index: 2; pointer-events: none; }
.lbars::before, .lbars::after { content: ""; position: absolute; left: 0; right: 0; height: 0; background: #000; }
.lbars::before { top: 0; } .lbars::after { bottom: 0; }
.open-in { padding-block: 7rem clamp(2.2rem, 6vw, 4rem); display: grid; gap: 1.6rem; }
.open h1 { max-width: 12.5ch; }
.open-foot { display: flex; flex-wrap: wrap; justify-content: space-between; align-items: end; gap: 1.5rem 3rem; }
.open-foot .lede { max-width: 32rem; margin: 0; color: rgba(236,233,224,.9); }
.open-actions { display: flex; flex-wrap: wrap; gap: .65rem; }
.open .slug { position: absolute; right: var(--g); top: 5.6rem; color: rgba(236,233,224,.75); }
@media (max-width: 700px) { .open > .slug { display: none; } }
@media (prefers-reduced-motion: no-preference) {
  .js .lbars::before, .js .lbars::after { height: 13vh; transition: height 1.8s var(--slow) .2s; }
  .js .is-rolling .lbars::before, .js .is-rolling .lbars::after { height: 0; }
  .js .open > picture img { transform: scale(1.08); transition: transform 3.4s var(--ease); }
  .js .is-rolling > picture img { transform: none; }
  .js .open-in > * { opacity: 0; transform: translateY(16px); transition: opacity .9s var(--ease), transform .9s var(--ease); }
  .js .is-rolling .open-in > * { opacity: 1; transform: none; }
  .js .is-rolling .open-in > *:nth-child(1) { transition-delay: .9s; }
  .js .is-rolling .open-in > *:nth-child(2) { transition-delay: 1.05s; }
  .js .is-rolling .open-in > *:nth-child(3) { transition-delay: 1.25s; }
}

/* ---------- Title card (the one centred moment) ---------- */
.card-title { padding-block: clamp(6rem, 15vw, 12rem) clamp(4rem, 9vw, 7rem); text-align: center; }
.card-title .slug { margin-bottom: 1.8rem; }
.card-title .say { max-width: 25em; margin: 0 auto; }

/* ---------- Diptych: two frames at different sizes with text between ---------- */
.dip { padding-bottom: clamp(5rem, 11vw, 9rem); row-gap: 2rem; align-items: start; }
.dip .f1 { grid-column: 1 / -1; }
.dip .tx { grid-column: 1 / -1; color: var(--mist); }
.dip .f2 { grid-column: 3 / -1; }
@media (min-width: 900px) {
  .dip .f1 { grid-column: 1 / 6; }
  .dip .tx { grid-column: 7 / 12; margin-top: 4rem; }
  .dip .f2 { grid-column: 7 / 13; margin-top: -2rem; }
  .dip .tx2 { grid-column: 1 / 5; margin-top: -8rem; }
}
.frame { margin: 0; }
.frame picture { overflow: hidden; background: var(--ink-2); }
.frame figcaption { margin-top: .7rem; }
.r45 picture { aspect-ratio: 4 / 5; }
.r32 picture { aspect-ratio: 3 / 2; }
.formats { list-style: none; margin: 1.6rem 0 0; padding: 0; display: flex; flex-wrap: wrap; gap: .45rem; }
.formats li { border: 1px solid var(--line); border-radius: 999px; padding: .35rem .85rem; font-size: .9rem; font-weight: 550; color: var(--text); }

/* ---------- Credits: founders ---------- */
.credits-sec { padding-block: clamp(4rem, 9vw, 7rem) clamp(5rem, 11vw, 9rem); border-top: 1px solid var(--line); }
.credits-head { display: flex; flex-wrap: wrap; justify-content: space-between; align-items: baseline; gap: 1rem; margin-bottom: clamp(2.5rem, 5vw, 4rem); }
.duo { display: grid; gap: 3.5rem; }
@media (min-width: 900px) { .duo { grid-template-columns: repeat(12, minmax(0, 1fr)); column-gap: 2rem; } .duo .p1 { grid-column: 2 / 6; } .duo .p2 { grid-column: 8 / 12; margin-top: 7rem; } }
.person picture { aspect-ratio: 4 / 5; overflow: hidden; background: var(--ink-2); }
.person picture img { transition: transform 1.4s var(--ease); filter: contrast(1.04); }
.person:hover picture img { transform: scale(1.03); }
.person .role { font-family: var(--mono); font-size: .8rem; color: var(--mist); margin: 1.3rem 0 .25rem; }
.person h3 { margin-bottom: 1rem; }
.person p:not(.role) { color: var(--mist); max-width: 30rem; }
.credit-line { max-width: 34rem; margin: clamp(3rem, 6vw, 5rem) auto 0; text-align: center; font-size: clamp(1.15rem, 1.8vw, 1.4rem); line-height: 1.45; font-weight: 500; }
.credit-line span { display: block; color: var(--mist); font-size: .95rem; font-weight: 400; margin-top: 1rem; line-height: 1.6; }

/* ---------- Feature: the film, framed like a screening ---------- */
.screen { padding-block: clamp(4rem, 9vw, 7rem); background: #000; }
.screen-head { display: grid; gap: .8rem 3rem; margin-bottom: clamp(1.6rem, 3.5vw, 2.6rem); align-items: end; }
@media (min-width: 900px) { .screen-head { grid-template-columns: 1fr auto; } }
.screen-title { font-stretch: 118%; font-weight: 700; letter-spacing: -.028em; font-size: clamp(2rem, 5vw, 4.4rem); line-height: 1; }
.screen-title span { display: block; font-stretch: 100%; font-weight: 450; letter-spacing: -.01em; font-size: .4em; margin-top: .6em; color: var(--mist); }
.film { position: relative; margin: 0 auto; aspect-ratio: 16 / 9; background: #0a0a09; overflow: hidden; max-width: 112rem; }
.film-poster { position: absolute; inset: 0; width: 100%; padding: 0; border: 0; background: transparent; cursor: pointer; display: block; }
.film-poster img { width: 100%; height: 100%; object-fit: cover; transition: transform 1.6s var(--ease), opacity .8s; }
.film-poster::after { content: ""; position: absolute; inset: 0; background: linear-gradient(0deg, rgba(0,0,0,.55), rgba(0,0,0,0) 45%); }
.film-poster:hover img { transform: scale(1.02); }
.film-empty .film-poster img { opacity: 0; }
.film-play { position: absolute; z-index: 1; left: clamp(1rem, 3vw, 2.2rem); bottom: clamp(1rem, 3vw, 2.2rem); display: inline-flex; align-items: center; gap: .9rem; color: var(--text); font-weight: 650; text-align: left; }
.film-play b { display: grid; place-items: center; width: clamp(3.6rem, 7vw, 5.2rem); height: clamp(3.6rem, 7vw, 5.2rem); border-radius: 50%; background: var(--lime); color: var(--black); transition: transform .35s var(--ease); }
.film-play b svg { width: 36%; height: 36%; margin-left: 8%; }
.film-poster:hover .film-play b { transform: scale(1.08); }
.film-play small { display: block; font-family: var(--mono); font-weight: 400; color: rgba(236,233,224,.75); font-size: .8rem; margin-top: .15rem; }
.film iframe { position: absolute; inset: 0; width: 100%; height: 100%; border: 0; }
.film-credits { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 1rem 2rem; margin: 1.6rem 0 0; }
@media (min-width: 760px) { .film-credits { grid-template-columns: repeat(4, minmax(0, 1fr)); } }
.film-credits div { border-top: 1px solid var(--line); padding-top: .7rem; }
.film-credits dt { font-family: var(--mono); font-size: .78rem; color: var(--mist); }
.film-credits dd { margin: .2rem 0 0; font-weight: 600; }
.film-alt { display: inline-block; margin-top: 1.2rem; font-size: .9rem; color: var(--mist); }

/* ---------- Letterbox band (full bleed, 2.39:1) ---------- */
.lb { position: relative; margin: 0; overflow: hidden; background: #000; }
.lb picture { aspect-ratio: 2.39 / 1; }
@media (max-width: 700px) { .lb picture { aspect-ratio: 4 / 5; } }
.lb picture img { will-change: transform; }
.lb figcaption { position: absolute; left: var(--g); bottom: 1.1rem; color: rgba(236,233,224,.92); text-shadow: 0 1px 2px rgba(0,0,0,.85), 0 0 10px rgba(0,0,0,.6); }
.lb-text { position: absolute; inset: auto 0 0 0; padding: 0 var(--g) clamp(1.8rem, 5vw, 3.6rem); background: linear-gradient(0deg, rgba(0,0,0,.72), rgba(0,0,0,0)); padding-top: 8rem; }
.lb-text .inner { max-width: var(--max); margin: 0 auto; display: grid; gap: 1rem 4rem; align-items: end; }
@media (min-width: 900px) { .lb-text .inner { grid-template-columns: 7fr 5fr; } }
.lb-text p { margin: 0; color: rgba(236,233,224,.9); }
.lb-text .sign { font-weight: 650; color: var(--text); margin-top: .8rem; }
@media (max-width: 700px) { .lb.has-text picture { aspect-ratio: 3 / 4.6; } }

/* ---------- Services: sticky frame + list ---------- */
.svc { padding-block: clamp(5rem, 11vw, 9rem); row-gap: 2.5rem; }
.svc .frame { grid-column: 1 / -1; }
.svc .list { grid-column: 1 / -1; }
@media (min-width: 960px) {
  .svc .frame { grid-column: 1 / 6; position: sticky; top: 6rem; align-self: start; }
  .svc .list { grid-column: 8 / 13; }
}
.svc .list > p { color: var(--mist); max-width: 34rem; margin-top: 1.3rem; }
.svc-items { list-style: none; margin: 2.2rem 0 0; padding: 0; border-top: 1px solid var(--line); }
.svc-items li { position: relative; display: grid; gap: .25rem; padding: 1.25rem 0 1.3rem; border-bottom: 1px solid var(--line); transition: padding-left .4s var(--ease); }
.svc-items li::before { content: ""; position: absolute; left: 0; top: 1.72rem; width: .55rem; height: .55rem; background: var(--lime); transform: scale(0) rotate(-8deg); transition: transform .35s var(--ease); }
.svc-items li:hover { padding-left: 1.35rem; }
.svc-items li:hover::before { transform: scale(1) rotate(-8deg); }
.svc-items h3 { font-size: clamp(1.1rem, 1.6vw, 1.3rem); font-stretch: 110%; letter-spacing: -.01em; }
.svc-items p { margin: 0; color: var(--mist); max-width: 34rem; }
.coprod { margin-top: 2rem; padding-left: 1.3rem; border-left: 3px solid var(--lime); }
.coprod h3 { font-size: 1.15rem; font-stretch: 110%; margin-bottom: .35rem; }
.coprod p { margin: 0; color: rgba(236,233,224,.88); max-width: 36rem; }

/* ---------- Location strip: frames bleeding off the right edge ---------- */
.places { padding-block: clamp(3rem, 7vw, 5rem) clamp(5rem, 10vw, 8rem); overflow: hidden; }
.places-head { display: grid; gap: 1.2rem 3rem; align-items: end; margin-bottom: clamp(1.6rem, 3.5vw, 2.6rem); }
@media (min-width: 900px) { .places-head { grid-template-columns: 5fr 5fr auto; } }
.places-head p { margin: 0; color: var(--mist); }
.strip-ctrl { display: flex; align-items: center; gap: .5rem; }
.strip-ctrl button { width: 3rem; height: 3rem; border-radius: 50%; border: 1.5px solid rgba(236,233,224,.35); background: transparent; display: grid; place-items: center; cursor: pointer; transition: background-color .25s, border-color .25s, color .25s; }
.strip-ctrl button:hover:not(:disabled) { background: var(--lime); border-color: var(--lime); color: var(--black); }
.strip-ctrl button:disabled { opacity: .3; cursor: default; }
.strip-ctrl svg { width: 1.1rem; height: 1.1rem; }
.strip-count { min-width: 3.4rem; text-align: center; font-family: var(--mono); font-size: .82rem; color: var(--mist); }
.strip { display: flex; gap: clamp(.7rem, 1.4vw, 1.1rem); overflow-x: auto; overscroll-behavior-x: contain; scroll-snap-type: x mandatory; scroll-padding-inline: var(--g); padding-inline: max(var(--g), calc((100vw - var(--max)) / 2 + var(--g))); padding-bottom: .5rem; scrollbar-width: none; cursor: grab; }
.strip::-webkit-scrollbar { display: none; }
.strip.is-dragging { cursor: grabbing; scroll-snap-type: none; }
.strip.is-dragging .place { pointer-events: none; }
.place { flex: 0 0 clamp(15rem, 26vw, 23rem); margin: 0; scroll-snap-align: start; user-select: none; }
.place picture { aspect-ratio: 4 / 5; overflow: hidden; background: var(--ink-2); }
.place:nth-child(3n+2) { flex-basis: clamp(19rem, 34vw, 31rem); }
.place:nth-child(3n+2) picture { aspect-ratio: 5 / 4; }
.place img { transition: transform 1s var(--ease), filter .6s, opacity .6s; -webkit-user-drag: none; }
.place figcaption { margin-top: .75rem; }
@media (hover: hover) { .strip:hover .place img { opacity: .55; } .strip .place:hover img { opacity: 1; transform: scale(1.04); } }

/* ---------- Bridge: text + inset frame ---------- */
.bridge { padding-block: clamp(5rem, 11vw, 9rem); row-gap: 2.2rem; align-items: center; }
.bridge .tx { grid-column: 1 / -1; }
.bridge .frame { grid-column: 2 / -1; }
@media (min-width: 900px) { .bridge .tx { grid-column: 1 / 6; } .bridge .frame { grid-column: 7 / 13; } }
.bridge .t-l em { font-style: normal; display: block; }
.bridge .tx p { color: var(--mist); }
.bridge .tx .lede { color: var(--text); margin-top: 1.5rem; }

/* ---------- Next up (a small credit block) ---------- */
.next { padding-block: clamp(4rem, 8vw, 6rem) 0; }
.next-in { display: grid; gap: 1rem 2rem; padding-top: 1.6rem; border-top: 1px solid var(--line); }
@media (min-width: 900px) { .next-in { grid-template-columns: 3fr 4fr 5fr; align-items: start; } }
.next-in h2 { font-size: 1.2rem; font-stretch: 110%; }
.next-in > p { margin: 0; color: var(--mist); }
.next-items { display: grid; grid-template-columns: 1fr 1fr; gap: .8rem; }
.next-items div { border: 1px solid var(--line); padding: .9rem 1rem; }
.next-items b { display: block; font-stretch: 110%; }
.next-items span { font-family: var(--mono); font-size: .8rem; color: var(--mist); }

/* ---------- Contact ---------- */
.contact { padding-block: clamp(5rem, 11vw, 9rem); }
.contact-grid { display: grid; gap: 3.5rem; }
@media (min-width: 980px) { .contact-grid { grid-template-columns: 6fr 5fr; gap: 5rem; align-items: start; } }
.contact .t-xl { font-size: clamp(2.3rem, 5vw, 4.6rem); max-width: 13ch; }
.contact-lede { color: var(--mist); margin: 1.5rem 0 0; max-width: 32rem; }
.note { display: flex; gap: .8rem; align-items: baseline; margin-top: 1.7rem; max-width: 32rem; font-weight: 550; }
.note::before { content: ""; flex: none; width: .55rem; height: .55rem; background: var(--lime); transform: translateY(-.1rem) rotate(-8deg); }
.people { list-style: none; margin: 2.4rem 0 0; padding: 0; }
.people li { display: grid; grid-template-columns: 3.8rem 1fr; gap: 1rem; align-items: center; padding: 1.1rem 0; border-top: 1px solid var(--line); }
.people li:last-child { border-bottom: 1px solid var(--line); }
.avatar { width: 3.8rem; height: 3.8rem; border-radius: 50%; overflow: hidden; background: var(--ink-2); }
.avatar picture { height: 100%; }
.avatar img { object-position: 50% 18%; }
.people b { display: block; font-stretch: 110%; }
.people .slug { margin-top: .1rem; }
.people .links { display: flex; flex-wrap: wrap; gap: 0 1.2rem; margin-top: .3rem; }
.people .links a { font-size: .95rem; text-decoration: none; color: rgba(236,233,224,.86); background: linear-gradient(var(--lime), var(--lime)) 0 100% / 0 2px no-repeat; transition: background-size .35s var(--ease), color .2s; padding-block: .25rem; }
.people .links a:hover { color: var(--text); background-size: 100% 2px; }

/* Paper object: the form, like a sheet on the production desk */
.sheet { position: relative; background: var(--paper); color: var(--ink); padding: clamp(1.5rem, 3.5vw, 2.4rem); box-shadow: 0 30px 60px -30px rgba(0,0,0,.6); }
.sheet .tape { position: absolute; top: -.9rem; left: 1.4rem; width: 8.5rem; transform: rotate(-3deg); }
.form { display: grid; gap: 1.05rem; }
.form h3 { font-size: 1.3rem; font-stretch: 112%; margin-top: .6rem; }
.field { display: grid; gap: .35rem; }
.field label { font-size: .9rem; font-weight: 600; }
.field .opt { font-weight: 400; color: var(--smoke); }
.field input, .field textarea { width: 100%; font: inherit; color: var(--ink); background: #fbfaf6; border: 1.5px solid transparent; border-bottom-color: rgba(28,28,26,.35); border-radius: 0; padding: .8rem .9rem; min-height: 3rem; transition: border-color .2s, background-color .2s; }
.field textarea { min-height: 8rem; resize: vertical; }
.field input:focus, .field textarea:focus { outline: none; border-color: var(--ink); background: #fff; }
.form .btn { justify-self: start; }
.form-note { margin: 0; font-size: .85rem; color: var(--smoke); }
.hp { position: absolute !important; left: -9999px; width: 1px; height: 1px; overflow: hidden; }

/* ---------- Footer ---------- */
.ftr { border-top: 1px solid var(--line); color: var(--mist); padding-block: 2.4rem calc(2.4rem + env(safe-area-inset-bottom, 0px)); }
.ftr-in { display: flex; flex-wrap: wrap; align-items: center; justify-content: space-between; gap: 1rem 2rem; font-size: .92rem; }
.ftr img { height: 1.8rem; width: auto; }
.ftr nav { display: flex; flex-wrap: wrap; gap: 0 1.4rem; }
.ftr a { text-decoration: none; padding-block: .5rem; display: inline-block; }
.ftr a:hover { color: var(--text); }

/* ---------- Reveal (photos only, once) ---------- */
@media (prefers-reduced-motion: no-preference) {
  .js .reveal picture { clip-path: inset(0 0 100% 0); transition: clip-path 1.3s var(--slow); }
  .js .reveal.is-in picture { clip-path: inset(0); }
  .js .reveal img { transform: scale(1.1); transition: transform 1.8s var(--ease); }
  .js .reveal.is-in img { transform: none; }
}

/* =========================================================
   CineGouna page
   ========================================================= */
.cg .open { height: 88svh; min-height: 32rem; }
.cg .open > picture img { object-position: 55% 50%; }
.cg .open::after { background: linear-gradient(180deg, rgba(0,0,0,.4) 0, rgba(0,0,0,0) 7rem), linear-gradient(0deg, rgba(8,8,7,.86) 0%, rgba(8,8,7,.4) 48%, rgba(8,8,7,0) 74%); }
.cg .open-in { padding-bottom: 1.6rem; gap: 1.1rem; }
.cg .open h1 { font-size: clamp(2.7rem, 9.5vw, 6.2rem); max-width: 11ch; }
.event { display: inline-flex; flex-wrap: wrap; align-items: center; gap: .3rem .7rem; font-size: .92rem; font-weight: 600; margin: 0; }
.event b { background: var(--lime); color: var(--black); padding: .25rem .65rem; border-radius: 999px; }
.jump { display: flex; gap: .45rem; overflow-x: auto; scrollbar-width: none; margin: .2rem calc(var(--g) * -1) 0; padding: .2rem var(--g); }
.jump::-webkit-scrollbar { display: none; }
.jump a { flex: none; text-decoration: none; font-size: .9rem; font-weight: 600; padding: .55rem .95rem; border-radius: 999px; background: rgba(236,233,224,.14); backdrop-filter: blur(6px); -webkit-backdrop-filter: blur(6px); transition: background-color .2s, color .2s; }
.jump a:hover { background: var(--text); color: var(--black); }

/* The call sheet: the whole page in one glance */
.callsheet-wrap { position: relative; z-index: 3; margin-top: -1rem; padding-bottom: clamp(3.5rem, 8vw, 6rem); }
.callsheet { max-width: 46rem; }
.callsheet h2 { font-size: 1.25rem; font-stretch: 112%; margin: .5rem 0 1rem; }
.cs-rows { margin: 0; border-top: 1.5px solid var(--ink); }
.cs-rows > div { display: grid; grid-template-columns: 7.5rem 1fr; gap: .2rem 1rem; padding: .8rem 0; border-bottom: 1px solid var(--line-paper); }
@media (max-width: 420px) { .cs-rows > div { grid-template-columns: 1fr; } }
.cs-rows dt { font-family: var(--mono); font-size: .8rem; color: var(--smoke); padding-top: .15rem; }
.cs-rows dd { margin: 0; font-weight: 550; line-height: 1.45; }
.cs-rows dd small { display: block; font-weight: 400; color: var(--smoke); font-size: .88rem; }
.cs-actions { display: grid; grid-template-columns: 1fr 1fr; gap: .5rem; margin-top: 1.2rem; }

.cg-block { padding-block: clamp(3.5rem, 8vw, 6rem); }
.cg-narrow { max-width: 50rem; }
.roles { list-style: none; margin: 1.6rem 0 0; padding: 0; display: grid; gap: .5rem; counter-reset: r; }
@media (min-width: 760px) { .roles { grid-template-columns: repeat(3, 1fr); } }
.roles li { border: 1px solid var(--line); padding: .95rem 1.05rem; font-weight: 600; line-height: 1.35; }
.cg-svc { list-style: none; margin: 1.6rem 0 0; padding: 0; display: grid; border-top: 1px solid var(--line); }
@media (min-width: 760px) { .cg-svc { grid-template-columns: 1fr 1fr; column-gap: 2.5rem; } }
.cg-svc li { padding: 1.2rem 0 1.3rem; border-bottom: 1px solid var(--line); }
.cg-svc h3 { font-size: 1.12rem; font-stretch: 110%; display: flex; align-items: center; gap: .6rem; margin-bottom: .3rem; }
.cg-svc h3::before { content: ""; width: .5rem; height: .5rem; background: var(--lime); transform: rotate(-8deg); flex: none; }
.cg-svc p { margin: 0; color: var(--mist); }

.cards { display: grid; gap: 1rem; margin-top: 1.6rem; }
@media (min-width: 760px) { .cards { grid-template-columns: 1fr 1fr; } }
.card { background: var(--paper); color: var(--ink); padding: 1.25rem; display: grid; grid-template-columns: 4.4rem 1fr; gap: .15rem 1rem; align-items: center; }
.card .avatar { width: 4.4rem; height: 4.4rem; grid-row: span 2; }
.card h3 { font-size: 1.18rem; font-stretch: 112%; align-self: end; }
.card .slug { color: var(--smoke); align-self: start; }
.card-actions { grid-column: 1 / -1; display: grid; grid-template-columns: repeat(3, 1fr); gap: .45rem; margin-top: 1.05rem; }
.card-actions .btn { min-height: 2.9rem; padding: .6rem .5rem; font-size: .92rem; }
.card-plain { grid-column: 1 / -1; margin: .85rem 0 0; font-size: .9rem; color: var(--smoke); }

.dock { position: fixed; z-index: 55; left: .75rem; right: .75rem; bottom: calc(.75rem + env(safe-area-inset-bottom, 0px)); display: grid; grid-template-columns: 1fr 1fr; gap: .5rem; padding: .5rem; border-radius: 999px; background: rgba(21,21,20,.9); backdrop-filter: blur(10px); -webkit-backdrop-filter: blur(10px); box-shadow: 0 10px 30px rgba(0,0,0,.35); transform: translateY(170%); transition: transform .5s var(--ease); }
.dock.is-on { transform: none; }
.dock .btn { min-height: 2.9rem; font-size: .92rem; padding-inline: .6rem; }
@media (min-width: 900px) { .dock { left: auto; right: 1.5rem; bottom: 1.5rem; width: 26rem; } }
.cg .ftr { padding-bottom: calc(6rem + env(safe-area-inset-bottom, 0px)); }

/* Simple pages */
.simple { min-height: 100svh; display: grid; place-items: center; padding: 6rem var(--g); }
.simple .inner { max-width: 38rem; }
.simple .t-l { margin-bottom: 1.2rem; }
.simple a:not(.btn) { color: var(--lime); }

@media (prefers-reduced-motion: reduce) {
  html { scroll-behavior: auto; }
  *, *::before, *::after { transition-duration: .01ms !important; animation-duration: .01ms !important; }
}

.places-tag { margin-top: 1.6rem; color: var(--lime); font-weight: 650; font-stretch: 110%; display: flex; align-items: center; gap: .8rem; }
.places-tag::before { content: ""; width: 2.4rem; height: 2px; background: var(--lime); }

/* Opening-shot video loop (only inserted when the file exists) */
.open > video { position: absolute; inset: 0; z-index: -2; width: 100%; height: 100%; object-fit: cover; opacity: 0; transition: opacity 1.2s ease; }
.open > video.is-playing { opacity: 1; }
.vid-toggle { position: absolute; z-index: 3; right: var(--g); top: 5.4rem; display: inline-flex; align-items: center; gap: .45rem; padding: .5rem .85rem; border-radius: 999px; border: 1px solid rgba(236,233,224,.4); background: rgba(10,10,9,.35); color: var(--text); font-family: var(--mono); font-size: .78rem; cursor: pointer; backdrop-filter: blur(6px); -webkit-backdrop-filter: blur(6px); }
.vid-toggle:hover { background: var(--text); color: var(--black); }
.open.has-video > .slug { display: none; }
.open.has-video::after { background: linear-gradient(180deg, rgba(0,0,0,.5) 0, rgba(0,0,0,0) 8rem), linear-gradient(72deg, rgba(10,10,9,.9) 0%, rgba(10,10,9,.55) 42%, rgba(10,10,9,.08) 70%), linear-gradient(0deg, rgba(10,10,9,.65) 0%, rgba(10,10,9,0) 42%); }

/* ---------- v3.1 layout: landscapes with services and locations ---------- */
.about-tx { padding-block: 0 clamp(5rem, 11vw, 8rem); row-gap: 1.2rem; }
.about-tx .tx { grid-column: 1 / -1; color: var(--mist); }
.about-tx .tx1 .lede { color: var(--text); }
@media (min-width: 900px) { .about-tx .tx1 { grid-column: 2 / 7; } .about-tx .tx2 { grid-column: 8 / 12; padding-top: .4rem; } }

.svc .frames { grid-column: 1 / -1; display: grid; grid-template-columns: 1fr 1fr; gap: .8rem; align-items: start; }
.svc .frames .frame { position: static; }
.svc .frames .frame:nth-child(2) { margin-top: 3rem; }
@media (min-width: 960px) {
  .svc .frames { grid-column: 1 / 6; grid-template-columns: 1fr; gap: 0; }
  .svc .frames { grid-column: 1 / 7; }
  .svc .frames .frame:nth-child(1) { width: 88%; }
  .svc .frames .frame:nth-child(2) { width: 62%; margin: -7rem 0 0 auto; position: relative; z-index: 1; }
}

.places { padding-top: 0; }
.lb-open { margin-bottom: clamp(3rem, 7vw, 5rem); }
.lb-close { margin-top: clamp(3.5rem, 8vw, 6rem); }
.lb-close picture { aspect-ratio: 2.39 / 1; }
@media (max-width: 700px) { .lb-close picture { aspect-ratio: 4 / 5; } }

.bridge.no-photo .tx { grid-column: 1 / -1; max-width: 46rem; }
.bridge.no-photo .bts { display: none; }

.mena-tx { padding-block: clamp(3rem, 7vw, 5rem) clamp(4rem, 8vw, 6rem); row-gap: 1.6rem; align-items: end; border-top: 1px solid var(--line); padding-top: clamp(4rem, 9vw, 7rem); }
.mena-tx .t-xl { grid-column: 1 / -1; font-size: clamp(2.3rem, 5.6vw, 5rem); }
.mena-tx .tx { grid-column: 1 / -1; color: var(--mist); }
.mena-tx .sign { color: var(--text); font-weight: 650; margin: 0; }
@media (min-width: 900px) { .mena-tx .t-xl { grid-column: 1 / 8; } .mena-tx .tx { grid-column: 8 / 13; } }

/* ---------- "Where we come in": four-look swipe set ---------- */
.svc .svc-swipe { grid-column: 1 / -1; min-width: 0; }
@media (min-width: 960px) { .svc .svc-swipe { grid-column: 1 / 7; position: sticky; top: 6rem; align-self: start; } }
.svc-swipe .strip { padding-inline: 0; scroll-padding-inline: 0; }
.svc-swipe .place, .svc-swipe .place:nth-child(3n+2) { flex: 0 0 82%; }
.svc-swipe .place picture, .svc-swipe .place:nth-child(3n+2) picture { aspect-ratio: 4 / 5; }
.svc-swipe .strip-ctrl { margin-top: 1rem; }
.svc-swipe .slug b { color: var(--lime); }
@media (max-width: 959px) { .svc .svc-swipe { margin-inline: calc(var(--g) * -1); } .svc-swipe .strip { padding-inline: var(--g); scroll-padding-inline: var(--g); } .svc-swipe .strip-ctrl { padding-inline: var(--g); } }
.cg-swipe { margin: 2rem calc(var(--g) * -1) 0; }
.cg-swipe .strip { padding-inline: var(--g); scroll-padding-inline: var(--g); }
.cg-swipe .place, .cg-swipe .place:nth-child(3n+2) { flex-basis: clamp(15rem, 30vw, 21rem); }
.cg-swipe .strip-ctrl { padding-inline: var(--g); }

/* ---------- CineGouna: call sheet and contact cards in the dark direction ---------- */
.cg .callsheet { background: var(--ink); color: var(--text); border: 1px solid var(--line); border-top: 3px solid var(--lime); box-shadow: 0 30px 60px -30px rgba(0,0,0,.8); }
.cg .callsheet .slug { color: var(--mist) !important; }
.cg .callsheet .slug b { color: var(--lime) !important; }
.cg .callsheet h2 { color: var(--text); }
.cg .cs-rows { border-top-color: var(--line); }
.cg .cs-rows > div { border-bottom-color: var(--line); }
.cg .cs-rows dt { color: var(--lime); }
.cg .cs-rows dd { color: var(--text); }
.cg .cs-rows dd small { color: var(--mist); }
.cg .card { background: var(--ink); color: var(--text); border: 1px solid var(--line); }
.cg .card .slug { color: var(--mist); }
.cg .card-plain { color: var(--mist); }
.cg .card .btn-line { border-color: rgba(236,233,224,.45); color: var(--text); }
.cg .card .btn-line:hover { background: var(--text); color: var(--black); }

/* ---------- Behind-the-scenes silent loop ---------- */
.bts-media { position: relative; overflow: hidden; background: var(--ink-2); aspect-ratio: 4 / 5; }
.bts-media picture { height: 100%; }
.bts-media video { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; opacity: 0; transition: opacity 1s ease; }
.bts-media video.is-playing { opacity: 1; }
.bts-toggle { position: absolute; z-index: 2; right: .8rem; bottom: .8rem; padding: .45rem .8rem; border-radius: 999px; border: 1px solid rgba(236,233,224,.45); background: rgba(10,10,9,.45); color: var(--text); font-family: var(--mono); font-size: .75rem; cursor: pointer; backdrop-filter: blur(6px); -webkit-backdrop-filter: blur(6px); }
.bts-toggle:hover { background: var(--text); color: var(--black); }
.js .reveal .bts-media picture { clip-path: none; }

/* Film credits: three columns on larger screens so six credits sit evenly */
@media (min-width: 760px) { .film-credits { grid-template-columns: repeat(3, minmax(0, 1fr)); } }

/* Contact fallback (shown until the Web3Forms key is added, or if sending fails) */
.form-fallback h3 { font-size: 1.3rem; font-stretch: 112%; margin: .6rem 0 .6rem; }
.form-fallback p { color: var(--smoke); }
.ff-actions { display: grid; grid-template-columns: 1fr 1fr; gap: .5rem; margin-top: 1rem; }
@media (max-width: 420px) { .ff-actions { grid-template-columns: 1fr; } }

/* ---------- v3.3 focused refinements ---------- */
/* Title card formats, centred under the statement */
.formats-c { justify-content: center; margin-top: 1.8rem; }

/* "Where we come in": practical roles + grouped services */
.roles-tight { margin: 1.4rem 0 0; }
.roles-tight li { padding: .75rem .9rem; font-size: .95rem; }
.svc-items li.svc-key h3 { color: var(--lime); }
.svc-items li.svc-key::before { transform: scale(1) rotate(-8deg); }
.svc-items li.svc-key { padding-left: 1.35rem; }
.svc .coprod { background: var(--ink); padding: 1.1rem 1.2rem 1.2rem 1.3rem; }

/* Morocco × Egypt: one compact section */
.bridge2 { padding-block: clamp(4.5rem, 10vw, 8rem); row-gap: 1.4rem; border-top: 1px solid var(--line); }
.bridge2 .b-head, .bridge2 .b-text { grid-column: 1 / -1; }
.bridge2 .t-l em { font-style: normal; display: block; }
.bridge2 .b-text p { color: var(--mist); max-width: 36rem; }
.bridge2 .b-text .lede { color: var(--text); }
.bridge2 .sign { color: var(--text) !important; font-weight: 650; margin: 0; }
@media (min-width: 900px) { .bridge2 .b-head { grid-column: 1 / 7; } .bridge2 .b-text { grid-column: 7 / 13; padding-top: 2.2rem; } }

/* Hero: the CineGouna label sits above the headline on both pages */
.open .event { color: var(--text); }
.cg .open-in .lede { margin: 0; max-width: 30rem; color: rgba(236,233,224,.92); }

/* Mobile: tap targets of at least 44 px, carousels that never trap vertical scrolling */
.jump a { min-height: 44px; display: inline-flex; align-items: center; }
.film-alt, .ftr a, .people .links a { min-height: 44px; display: inline-flex; align-items: center; }
.menu-btn { min-height: 44px; }
.hdr-cta { min-height: 2.75rem; padding: .55rem 1rem; }
.strip { touch-action: pan-x pan-y; }
@media (max-width: 700px) {
  .open-in { gap: 1.1rem; padding-bottom: 1.6rem; }
  .open h1 { font-size: clamp(2.35rem, 10.5vw, 3rem); }
  .open-foot { gap: 1rem; }
  .open-actions { display: grid; grid-template-columns: 1fr; width: 100%; gap: .55rem; }
  .open-actions .btn { width: 100%; }
  .card-title { padding-block: 4.5rem 3rem; }
}
.brand { display: inline-flex; align-items: center; min-height: 44px; }
.vid-toggle, .bts-toggle { min-height: 44px; min-width: 44px; justify-content: center; display: inline-flex; align-items: center; }
.bridge .sign { color: var(--text); font-weight: 650; margin: 0; }

/* ---------- CineGouna: Shooting in Morocco (cash rebate + practical facts) ---------- */
.practical { border-top: 1px solid var(--line); }
.pr-grid { display: grid; gap: 1.2rem; margin-top: 1.8rem; }
@media (min-width: 900px) { .pr-grid { grid-template-columns: 5fr 6fr; gap: 2rem; align-items: start; } }
.rebate { background: var(--ink); border: 1px solid var(--line); border-top: 3px solid var(--lime); padding: clamp(1.3rem, 3vw, 2rem); }
.rebate-num { margin: 0 0 .2rem; font-stretch: 125%; font-weight: 800; letter-spacing: -.04em; line-height: .9; font-size: clamp(4.2rem, 12vw, 7rem); color: var(--lime); }
.rebate h3, .facts h3 { font-size: 1.25rem; font-stretch: 112%; margin-bottom: .8rem; }
.rebate p { color: rgba(236,233,224,.88); }
.rebate strong { color: var(--text); }
.rebate-help { color: var(--text) !important; font-weight: 600; }
.rebate .btn, .facts .btn { margin-top: .4rem; }
.facts { padding: clamp(.2rem, 1vw, .6rem) 0; }
.facts dl { margin: 0 0 1.4rem; border-top: 1px solid var(--line); }
.facts dl > div { display: grid; gap: .25rem; padding: 1rem 0; border-bottom: 1px solid var(--line); }
@media (min-width: 600px) { .facts dl > div { grid-template-columns: 9rem 1fr; gap: 1rem; } }
.facts dt { font-family: var(--mono); font-size: .8rem; color: var(--lime); padding-top: .2rem; text-transform: uppercase; }
.facts dd { margin: 0; color: rgba(236,233,224,.9); }
.facts dd a { color: var(--text); text-decoration-color: var(--lime); text-decoration-thickness: 2px; text-underline-offset: 3px; }
.rebate .rebate-num { color: var(--lime); }
.pr-hook { margin: 1rem 0 0; max-width: 36rem; color: rgba(236,233,224,.9); }
.facts dt { line-height: 1.35; }
@media (min-width: 600px) { .facts dl > div { grid-template-columns: 11rem 1fr; } }
.filmo { margin: 0 0 1.4rem; }
.filmo .slug { color: var(--lime); margin-bottom: .7rem; }
.filmo ul { list-style: none; margin: 0; padding: 0; display: flex; flex-wrap: wrap; gap: .4rem; }
.filmo li { border: 1px solid var(--line); border-radius: 999px; padding: .35rem .8rem; font-size: .9rem; color: var(--text); }