:root { --bg:#000; --fg:#f2f2f2; --muted:#9a9a9a; --line:rgba(255,255,255,.28); }
* { box-sizing:border-box; }
html { scroll-behavior:smooth; }
body { margin:0; background:var(--bg); color:var(--fg); font-family:'Open Sans',Arial,sans-serif; font-weight:300; overflow-x:hidden; line-height:1.6; }
a { color:inherit; }
img { max-width:100%; }
.clear { clear:both; }

/* ---------- SITE HEADER / NAV ---------- */
.site-header { position:fixed; top:0; left:0; right:0; z-index:50; display:flex; align-items:center; justify-content:space-between; padding:18px 4vw; background:linear-gradient(rgba(0,0,0,.85),rgba(0,0,0,0)); }
.site-header .brand img { height:52px; width:auto; display:block; }
.site-header ul { list-style:none; margin:0; padding:0; display:flex; gap:2.2vw; }
.site-header li a { text-decoration:none; text-transform:uppercase; letter-spacing:.22em; font-size:.72rem; padding:.5em 0; border-bottom:1px solid transparent; transition:border-color .3s; }
.site-header li a:hover, .site-header li a.active { border-color:#fff; }
.nav-toggle { display:none; background:none; border:1px solid var(--line); color:#fff; padding:.5em .9em; font:inherit; font-size:.7rem; letter-spacing:.2em; text-transform:uppercase; cursor:pointer; }
@keyframes fadeIn { to { opacity:1; } }

/* ---------- HOME HERO / INTRO ---------- */
.hero { position:relative; height:100vh; min-height:560px; display:flex; flex-direction:column; align-items:center; justify-content:flex-start; padding-top:10vh; text-align:center; }
.hero-inner { will-change:transform,opacity; display:flex; flex-direction:column; align-items:center; }
.stage { position:relative; width:min(62vw,340px); aspect-ratio:1; perspective:900px; }
.stage img { position:absolute; inset:0; width:100%; height:100%; display:block; }
.face { border-radius:50%; animation:faceMorph 4.6s cubic-bezier(.22,.7,.2,1) both; }
.logo { object-fit:contain; opacity:0; animation:logoIn 1.8s cubic-bezier(.22,.7,.2,1) 3.2s both; }
.stage::after { content:""; position:absolute; inset:-14%; border-radius:50%; background:radial-gradient(circle,rgba(255,255,255,.18),transparent 62%); opacity:0; animation:glow 2.4s ease-out 2.2s both; pointer-events:none; }
@keyframes faceMorph {
  0%   { opacity:0; transform:rotateY(-900deg) scale(.12); filter:blur(4px); }
  10%  { opacity:1; }
  58%  { opacity:1; transform:rotateY(0) rotate(0) scale(1); filter:blur(0); }
  70%  { opacity:1; transform:rotateY(0) rotate(0) scale(1); filter:blur(0); }
  100% { opacity:0; transform:rotateY(0) rotate(200deg) scale(.82); filter:blur(10px); }
}
@keyframes logoIn { from { opacity:0; transform:rotate(-200deg) scale(.82); filter:blur(10px); } to { opacity:1; transform:rotate(0) scale(1); filter:blur(0); } }
@keyframes glow { 0%{opacity:0} 40%{opacity:1} 100%{opacity:.35} }
.tagline { margin:30px 0 0; font-weight:300; font-size:clamp(1.7rem,5.6vw,3.4rem); letter-spacing:.1em; text-transform:lowercase; padding-left:.1em; line-height:1.15; perspective:700px; }
.tagline .w { display:inline-block; white-space:nowrap; }
.tagline .ch { display:inline-block; opacity:0; transform:perspective(500px) rotateY(-90deg); animation:chIn .9s cubic-bezier(.22,.7,.2,1) forwards; animation-delay:calc(4.1s + var(--i) * 75ms); }
@keyframes chIn { from { opacity:0; transform:perspective(500px) rotateY(-90deg); } to { opacity:1; transform:perspective(500px) rotateY(0); } }
.scroll-cue { position:absolute; bottom:28px; left:50%; width:1px; height:56px; background:linear-gradient(#fff,transparent); opacity:0; animation:cue 1.4s ease-out 5.4s both, cueMove 2.2s ease-in-out 6.8s infinite; }
@keyframes cue { to{opacity:.7} }
@keyframes cueMove { 0%,100%{transform:translateY(0)} 50%{transform:translateY(10px)} }

/* ---------- FLOWING SECTIONS ---------- */
section.flow { position:relative; padding:18vh 6vw; }
.flow-up { margin-top:-12vh; }
.wrap { max-width:1000px; margin:0 auto; }
h1, h2 { font-weight:300; }
h2 { font-size:clamp(2rem,6vw,4.4rem); line-height:1.05; margin:0 0 .4em; letter-spacing:.02em; }
.kicker { text-transform:uppercase; letter-spacing:.3em; font-size:.8rem; color:var(--muted); margin-bottom:1.4em; }
p.lead { font-size:clamp(1.05rem,2.2vw,1.45rem); line-height:1.6; max-width:34em; color:#d8d8d8; }
.about { display:grid; grid-template-columns:minmax(0,260px) 1fr; gap:6vw; align-items:center; }
.about .portrait { width:100%; aspect-ratio:1; border-radius:50%; overflow:hidden; will-change:transform; }
.about .portrait img { width:100%; height:100%; display:block; }

/* producer text: centred, no portrait */
.about-text { text-align:center; padding-top:10vh; padding-bottom:12vh; }
.about-text .wrap { max-width:860px; }
.about-text p.lead { margin-left:auto; margin-right:auto; }

/* photo & film production banner: tiles across the full page width, each cross-fading on its own beat */
.production { position:relative; padding:0; }
.prod-link { display:block; position:relative; text-decoration:none; }
.prod-banner { display:flex; width:100%; height:clamp(300px,52vh,560px); gap:4px; perspective:1400px; }
.prod-tile { position:relative; flex:1 1 0; min-width:0; overflow:hidden; opacity:0; transform:rotateY(-95deg) scale(.9); transform-origin:50% 50%; backface-visibility:hidden; transition:transform 1.1s cubic-bezier(.22,.7,.2,1), opacity .5s ease; }
.prod-tile.in { opacity:1; transform:none; }
.prod-tile img { position:absolute; inset:0; width:100%; height:100%; object-fit:cover; opacity:0; transform:scale(1.08); transition:opacity 1.6s ease, transform 7s ease-out; }
.prod-tile img.on { opacity:.9; transform:scale(1); }
.prod-title { position:absolute; left:0; right:0; bottom:14%; text-align:center; z-index:2; pointer-events:none; text-shadow:0 2px 24px rgba(0,0,0,.85); }
.prod-title h2 { margin:0; font-size:clamp(2rem,6vw,4.6rem); }
.prod-title .more, .more { display:inline-block; margin-top:1em; text-transform:uppercase; letter-spacing:.3em; font-size:.75rem; border-bottom:1px solid var(--line); padding-bottom:.4em; }

.countries { padding:0; }
.panel { position:relative; display:flex; align-items:center; min-height:88vh; padding:0 6vw; margin-top:-14vh; text-decoration:none; overflow:hidden; }
.panel:first-child { margin-top:0; }
.panel .bg { position:absolute; inset:-12% 0; background-size:cover; background-position:center; will-change:transform; opacity:.62;
  -webkit-mask-image:linear-gradient(to bottom,transparent 0,#000 28%,#000 72%,transparent 100%);
          mask-image:linear-gradient(to bottom,transparent 0,#000 28%,#000 72%,transparent 100%); }
.panel.nophoto .bg { background:radial-gradient(circle at 70% 40%,#b8452a 0,#5a1f12 38%,transparent 70%),radial-gradient(circle at 25% 70%,#d99a2b 0,transparent 55%); opacity:.55; }
.panel .txt { position:relative; z-index:2; max-width:1000px; width:100%; margin:0 auto; }
.panel.right .txt { text-align:right; }
.panel h3 { font-weight:300; font-size:clamp(2.6rem,10vw,8rem); margin:0; line-height:.95; letter-spacing:.01em; }
.panel .more { display:inline-block; margin-top:1.6em; text-transform:uppercase; letter-spacing:.3em; font-size:.8rem; border-bottom:1px solid var(--line); padding-bottom:.5em; transition:border-color .3s, letter-spacing .3s; }
.panel:hover .more { border-color:#fff; letter-spacing:.4em; }
/* photo and text slide in from opposite sides; panels that read from the right start from the other side */
.panel { --txtfrom:-22vw; --bgfrom:30vw; }
.panel.right { --txtfrom:22vw; --bgfrom:-30vw; }
.panel .bgwrap { position:absolute; inset:0; overflow:hidden; opacity:0; transform:translateX(var(--bgfrom)); transition:transform 1.5s cubic-bezier(.22,.7,.2,1), opacity 1.2s ease; }
.panel .txt { opacity:0; transform:translateX(var(--txtfrom)); transition:transform 1.5s cubic-bezier(.22,.7,.2,1) .15s, opacity 1.2s ease .15s; }
.panel.in .bgwrap, .panel.in .txt { opacity:1; transform:none; }

.where-sec { text-align:center; padding-bottom:4vh; }
.where-sec h2 { margin:0; }

/* letters twirl in one after another */
.twirl .w { display:inline-block; white-space:nowrap; }
.twirl .ch { display:inline-block; opacity:0; transform:perspective(500px) rotateY(-90deg); }
.rv.in .twirl .ch { animation:chIn .9s cubic-bezier(.22,.7,.2,1) forwards; animation-delay:calc(var(--i) * 75ms + .2s); }

/* testimonials: every one on the page at once, as blocks of different sizes; each enlarges when you move over it (tap on touch screens) */
.testimonials { text-align:center; }
.testimonials .wrap { max-width:1180px; }
.testi-grid { column-count:3; column-gap:14px; margin-top:3rem; text-align:left; }
.quote { display:block; break-inside:avoid; margin:0 0 14px; padding:1.7rem 1.6rem; background:#070707; border:1px solid #1d1d1d; position:relative; cursor:default; opacity:0; transform:translateY(34px);
  transition:opacity .9s ease, transform .5s cubic-bezier(.22,.7,.2,1), background .35s, border-color .35s, box-shadow .35s; outline:none; }
.quote.in { opacity:1; transform:none; }
.quote.in:hover, .quote.in:focus-visible, .quote.in.hot { transform:scale(1.12); z-index:5; background:#161616; border-color:#666; box-shadow:0 22px 70px rgba(0,0,0,.85); transition-delay:0s; }
.quote h3 { font-weight:300; text-transform:uppercase; letter-spacing:.2em; margin:0 0 1.1em; font-size:.8rem; color:#fff; }
.quote blockquote { margin:0; font-style:italic; color:#d4d4d4; line-height:1.65; }
.quote blockquote p { margin:0 0 .9em; }
.quote blockquote p:first-child::before { content:"\201C"; }
.quote blockquote p:last-child::after { content:"\201D"; }
.quote cite { display:block; margin-top:1.2em; font-style:normal; text-transform:uppercase; letter-spacing:.14em; font-size:.66rem; line-height:1.6; color:var(--muted); }
.q-s { padding:2.4rem 1.8rem; } .q-s h3 { font-size:1rem; } .q-s blockquote { font-size:1.28rem; line-height:1.55; }
.q-m blockquote { font-size:1.02rem; }
.q-l blockquote { font-size:.88rem; line-height:1.7; }

/* about: photo strips flip in across the page, then the middle ones fade out and the text comes in; the outer strips stay either side */
.about-bianca { position:relative; text-align:center; min-height:max(88vh,540px); display:flex; align-items:center; justify-content:center; overflow:hidden; }
.about-strips { position:absolute; inset:0; display:flex; gap:4px; perspective:1400px; }
.ab-strip { position:relative; flex:1 1 0; min-width:0; overflow:hidden; opacity:0; transform:rotateY(-95deg) scale(.9); backface-visibility:hidden; transition:transform 1.1s cubic-bezier(.22,.7,.2,1), opacity .5s ease; }
.ab-strip.in { opacity:1; transform:none; }
/* each photo is sliced across two neighbouring strips so the pair reads as one picture */
.ab-strip::before { content:""; position:absolute; top:0; bottom:0; width:200%; background:var(--img) var(--pos) / cover no-repeat; }
.ab-strip.a::before { left:0; } .ab-strip.b::before { left:-100%; }
.ab-strip.one::before { width:100%; left:0; }
.about-bianca.text .ab-strip.mid { opacity:0; transition:opacity 1.4s ease; }
.about-copy { position:relative; z-index:2; width:min(720px,46vw); padding:7vh 0; opacity:0; transform:translateY(26px); transition:opacity 1.5s ease .5s, transform 1.5s cubic-bezier(.22,.7,.2,1) .5s; }
.about-bianca.text .about-copy { opacity:1; transform:none; }
.about-copy p { color:#f0f0f0; font-size:1.06rem; line-height:1.85; }
@media (max-width:999px){
  .about-copy { width:min(760px,88vw); }
  .about-bianca.text .ab-strip { opacity:.2; transition:opacity 1.4s ease; }   /* narrow screens: no room beside the text, so all strips dim behind it */
  .testi-grid { column-count:2; }
}
@media (max-width:640px){ .testi-grid { column-count:1; } .quote.in:hover, .quote.in:focus-visible, .quote.in.hot { transform:scale(1.04); } }

.contact-line { color:#d8d8d8; margin-top:1.4em; }
.contact-line a { text-decoration:none; border-bottom:1px solid var(--line); }
.home-form { max-width:760px; margin:3rem auto 0; text-align:left; }
.contact-cta { text-align:center; }
.contact-cta h2 { font-size:clamp(2.4rem,8vw,6rem); }
.contact-cta a.mail { font-size:clamp(1.1rem,3vw,1.8rem); text-decoration:none; border-bottom:1px solid var(--line); }

.rv { opacity:0; transform:translateY(40px); transition:opacity 1.1s ease, transform 1.1s cubic-bezier(.22,.7,.2,1); }
.rv.in { opacity:1; transform:none; }

/* ---------- INNER PAGES ---------- */
main.inner { padding:18vh 5vw 8vh; min-height:80vh; }
main.inner .page-title { font-size:clamp(2rem,6vw,4.4rem); margin:0 0 .5em; text-align:center; letter-spacing:.02em; }
.prose { max-width:760px; margin:0 auto 3rem; color:#d8d8d8; }
.prose h6 { font-size:.85rem; font-weight:400; text-transform:uppercase; letter-spacing:.2em; margin:1.4em 0 0; color:#fff; }
.prose a { border-bottom:1px solid var(--line); text-decoration:none; }
.intro-text { max-width:760px; margin:0 auto 3rem; text-align:center; font-size:1.15rem; color:#d8d8d8; }

/* gallery */
.pbs-gallery-masonry { column-count:4; column-gap:12px; }
.pbs-gallery-masonry .pbs-gallery-item { display:block; margin-bottom:12px; break-inside:avoid; overflow:hidden; }
.pbs-gallery-grid { display:flex; flex-wrap:wrap; gap:12px; justify-content:center; }
.pbs-gallery-grid .pbs-gallery-item { flex:0 1 220px; }
.pbs-gallery-item img { width:100%; display:block; transition:transform .6s ease, opacity .4s; opacity:.92; }
.pbs-gallery-item:hover img { transform:scale(1.04); opacity:1; }
#pbs-gallery-lightbox { border:0; padding:0; background:transparent; max-width:100vw; max-height:100vh; width:100vw; height:100vh; align-items:center; justify-content:center; }
#pbs-gallery-lightbox[open] { display:flex; }
#pbs-gallery-lightbox::backdrop { background:rgba(0,0,0,.94); }
#pbs-gallery-lightbox-media { position:relative; display:inline-flex; max-width:92vw; max-height:90vh; }
#pbs-gallery-lightbox-img { display:block; max-width:92vw; max-height:90vh; object-fit:contain; }
#pbs-gallery-lightbox-caption { display:none; }
.pbs-gallery-lightbox-prev, .pbs-gallery-lightbox-next { position:fixed; top:50%; transform:translateY(-50%); width:48px; height:48px; background:rgba(0,0,0,.4); color:#fff; border:1px solid var(--line); cursor:pointer; font-size:20px; }
.pbs-gallery-lightbox-prev { left:20px; } .pbs-gallery-lightbox-next { right:20px; }

/* contact form (dark) */
.pbs-contact-medium { max-width:900px; margin:0 auto; }
.pbs-contact-columns { display:grid; grid-template-columns:1fr 1.3fr; gap:5vw; }
#contact-form .cfg-row { display:flex; gap:16px; flex-wrap:wrap; }
#contact-form .cfg-half { flex:1 1 220px; }
#contact-form .element { margin-bottom:18px; }
#contact-form label { display:block; text-transform:uppercase; letter-spacing:.18em; font-size:.7rem; color:var(--muted); margin-bottom:.5em; }
#contact-form input[type=text], #contact-form input[type=email], #contact-form textarea { width:100%; background:#0b0b0b; color:#fff; border:1px solid #444; padding:.9em 1em; font:inherit; border-radius:0; }
#contact-form input:focus, #contact-form textarea:focus { outline:none; border-color:#fff; }
#contact-form .cfg-submit { background:transparent; color:#fff; border:1px solid #fff; padding:.9em 2.4em; letter-spacing:.25em; text-transform:uppercase; font:inherit; font-size:.8rem; cursor:pointer; transition:background .3s,color .3s; }
#contact-form .cfg-submit:hover { background:#fff; color:#000; }
#contact-form .cfg-errormessage { color:#ff8a8a; margin-bottom:12px; }
#contact-form .cfg-validationmessage { padding:1.2em; border:1px solid var(--line); text-align:center; }
.pbs-contact-details-row { margin-top:.6em; }

.site-footer { text-align:center; padding:6vh 6vw 8vh; color:var(--muted); font-size:.75rem; letter-spacing:.15em; text-transform:uppercase; }
.site-footer a { text-decoration:none; margin:0 .8em; }
.site-footer a:hover { color:#fff; }
.pbs-404-message { text-align:center; } .pbs-404-btn { border-bottom:1px solid var(--line); text-decoration:none; }

@media (max-width:1000px){ .pbs-gallery-masonry{column-count:3} }
@media (max-width:760px){
  .pbs-gallery-masonry{column-count:2}
  .nav-toggle{display:block}
  .site-header nav{display:none; position:absolute; top:100%; left:0; right:0; background:rgba(0,0,0,.95); padding:1em 4vw 1.6em}
  .site-header nav.open{display:block}
  .site-header ul{flex-direction:column; gap:1em}
  .about{grid-template-columns:1fr; text-align:center} .about .portrait{max-width:200px;margin:0 auto}
  .panel.right .txt{text-align:left}
  .pbs-contact-columns{grid-template-columns:1fr}
}
@media (prefers-reduced-motion:reduce){
  .face{display:none} .logo,.scroll-cue{animation:none;opacity:1} .tagline .ch{opacity:1;transform:none;animation:none} .stage::after{display:none}
  .rv{opacity:1;transform:none;transition:none} .home .site-header{animation:none;opacity:1} .prod-tile{opacity:1;transform:none;transition:none}
  .panel .bgwrap,.panel .txt{opacity:1;transform:none;transition:none} .twirl .ch{opacity:1;transform:none;animation:none}
  .ab-strip{opacity:1;transform:none;transition:none} .about-bianca .ab-strip.mid{opacity:.2} .about-copy{opacity:1;transform:none;transition:none} .quote{opacity:1;transform:none;transition:none}
}