/* nav56.css (v56, 31 Oct 2026): one consistent header across the site.
   Home icon beside the name, icon-only menu, bigger labels, back links. Loaded last, so it wins. */
/* ---- home icon beside the name (not on the Home page itself, whose link is #top) ---- */
header>a[href="index.html"]::before,a.nm[href="index.html"]::before,a.nmk[href="index.html"]::before{content:"";display:inline-block;width:1.25em;height:1.25em;margin-right:0.7em;vertical-align:-0.26em;background:currentColor;-webkit-mask:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='black' stroke-width='2.2' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M3 11.2L12 3.5l9 7.7'/%3E%3Cpath d='M5.5 9.8V20.5h13V9.8'/%3E%3Cpath d='M10 20.5v-6h4v6'/%3E%3C/svg%3E") center/contain no-repeat;mask:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='black' stroke-width='2.2' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M3 11.2L12 3.5l9 7.7'/%3E%3Cpath d='M5.5 9.8V20.5h13V9.8'/%3E%3Cpath d='M10 20.5v-6h4v6'/%3E%3C/svg%3E") center/contain no-repeat}
/* ---- icon-only menu: three lines, becomes a cross when open ---- */
.mo,.mc,.fmo,.fmc{position:absolute!important;width:1px;height:1px;overflow:hidden;clip:rect(0 0 0 0);clip-path:inset(50%);white-space:nowrap}
.mns .mdot,.fm .fmd{display:none!important}
.mns,.fm>summary{position:relative;width:48px;min-height:48px;height:48px;padding:0!important;gap:0;justify-content:center;border-radius:50%}
.mns::before,.fm>summary::before{content:"";display:block;width:22px;height:16px;background:linear-gradient(currentColor,currentColor) 0 0/100% 2px no-repeat,linear-gradient(currentColor,currentColor) 0 50%/100% 2px no-repeat,linear-gradient(currentColor,currentColor) 0 100%/100% 2px no-repeat;transition:transform 0.3s}
.mn[open] .mns::before,.fm[open]>summary::before{background:linear-gradient(45deg,transparent 46%,currentColor 46% 54%,transparent 54%) center/18px 18px no-repeat,linear-gradient(-45deg,transparent 46%,currentColor 46% 54%,transparent 54%) center/18px 18px no-repeat;width:20px;height:20px}
.mns{border:1px solid currentColor;border-color:rgba(128,128,128,0.45)}
.mns:hover,.fm>summary:hover{background:rgba(255,74,18,0.14)}
.fm>summary{background:#1c2420;color:#fbfaf6;justify-content:center}
/* floating menu: top right, not bottom right, so it never covers text */
.fm{top:14px!important;bottom:auto!important;right:14px!important}
.fmp{top:calc(100% + 10px)!important;bottom:auto!important}
/* ---- film pages: Sound is an icon, Close is a back link ---- */
.sd .sdl{position:absolute;width:1px;height:1px;overflow:hidden;clip:rect(0 0 0 0);white-space:nowrap}
.hr{display:flex;align-items:center;gap:10px}
.cl{white-space:nowrap}
/* ---- larger small labels ---- */
.hnav a{font-size:14px!important;letter-spacing:0.16em!important;padding:14px 4px!important}
.crd dt,.awh,.awt,.lab,.kl,.ey .sub,.lbl{font-size:13.5px!important}
.crd dd{font-size:19px!important}
@media (max-width:760px){.crd dd{font-size:17px!important}}

/* ---- Home: keep-watching pills and the closing action ---- */
.kw{display:flex;flex-wrap:wrap;align-items:center;gap:14px 20px;padding-top:28px}
.kwl{font-size:13.5px;font-weight:700;letter-spacing:0.14em;text-transform:uppercase;color:#4b5550;margin-right:4px}
.kwp{display:flex;flex-wrap:wrap;gap:10px}
.kwp a{display:inline-flex;align-items:center;gap:8px;min-height:44px;padding:0 20px;border:1px solid #1c2420;border-radius:999px;font-size:13px;font-weight:700;letter-spacing:0.14em;text-transform:uppercase;color:#1c2420;transition:background 0.3s,color 0.3s}
.kwp a:hover,.kwp a:focus-visible{background:#1c2420;color:#fbfaf6}
.kwp a:last-child{background:#1c2420;color:#fbfaf6}.kwp a:last-child:hover{background:#c43e0b}
.awend{padding-top:40px;display:flex}
.rx,.awgo,.rawd{font-size:13.5px!important}
.rx{display:inline-flex;align-items:center;min-height:44px}
.priv{margin:12px 0 0;font-size:14px;line-height:1.5;color:#4b5550}
@media (max-width:760px){.kw{padding-top:22px}.kwl{width:100%}}

/* ---- body copy: short paragraphs, clear gaps ---- */
.cp{line-height:1.6!important}
.cp+.cp{margin-top:16px!important;animation-delay:1s!important}
/* ---- phone film pages: the Play control is compact and sits on a solid scrim, so the awards stay readable ---- */
@media (max-width:760px){
  .hint{bottom:14px!important;gap:10px!important}
  .hint::before{top:-30px!important;bottom:-14px!important;background:linear-gradient(180deg,rgba(13,17,15,0),rgba(13,17,15,0.97) 42%)!important}
  .hint .pc{width:60px!important;height:60px!important}
}

/* ---- Share button on film and project pages ---- */
.tm-share{grid-column:1 / -1;justify-self:start;pointer-events:auto;display:inline-flex;align-items:center;gap:10px;min-height:44px;margin-top:22px;padding:0 20px;border:1px solid rgba(251,250,246,0.38);border-radius:999px;background:transparent;color:#fbfaf6;font:700 13.5px/1 "Instrument Sans",Helvetica,Arial,sans-serif;letter-spacing:0.14em;text-transform:uppercase;cursor:pointer;transition:background 0.3s,color 0.3s}
.tm-share:hover,.tm-share:focus-visible{background:#fbfaf6;color:#1c2420}
.tm-share:focus-visible{outline:2px solid #ff4a12;outline-offset:3px}
@media (max-width:760px){.tm-share{margin-top:16px}}
/* ---- header text a notch larger ---- */
.nmk,.nm,header>a[href="index.html"],header>a[href="#top"]{font-size:13.5px!important}
.cl>span:last-child{font-size:13.5px!important;letter-spacing:0.14em}
.rn{font-size:13px!important}
/* ---- remaining 12px labels to 13.5px ---- */
.cpm>summary,.wkgo{font-size:13px!important}
.dl,.cform label,.fld label,section h2[style*="font-size: 12px"]{font-size:13.5px!important}

/* ---- contact: recognisable icons for WhatsApp and LinkedIn ---- */
.soc{display:flex;gap:12px;align-items:center}
.sc{display:inline-flex;align-items:center;justify-content:center;width:48px;height:48px;border:1px solid #1c2420;border-radius:50%;color:#1c2420;transition:background 0.3s,color 0.3s,transform 0.3s}
.sc:hover,.sc:focus-visible{background:#1c2420;color:#fbfaf6;transform:translateY(-2px)}
.sc:focus-visible{outline:2px solid #ff4a12;outline-offset:3px}

/* ---- film pages: menu fixed top right, same as the other pages ---- */
.hd .mn{position:fixed;top:14px;right:14px;z-index:30;opacity:1}
.hd .mns{background:#1c2420;color:#fbfaf6;border:0;box-shadow:0 2px 14px rgba(0,0,0,0.25)}
.hd .mnp{top:calc(100% + 8px)}
.hd .hr{padding-right:64px}
@media (max-width:700px){.hd .hr{padding-right:0}}