/* One supplied monochrome PNG, inheriting the surrounding text colour for contrast. */
body .flat-arrow{
 --flat-angle:0deg;
 display:inline-block;
 position:relative;
 width:32px;
 height:20px;
 min-width:32px;
 flex:0 0 32px;
 margin:0;
 padding:0;
 border:0;
 vertical-align:middle;
 font-size:0;
 line-height:0;
 pointer-events:none;
 transform:rotate(var(--flat-angle));
}
body .flat-arrow::before{
 content:"";
 position:absolute;
 inset:0;
}
body .flat-arrow::before{
 background:currentColor;
 -webkit-mask:url('arrow-flat.png') center / 32px 32px no-repeat;
 mask:url('arrow-flat.png') center / 32px 32px no-repeat;
 opacity:1;
}
body .flat-arrow-left{--flat-angle:180deg}
body .flat-arrow-down{--flat-angle:90deg}
body .flat-arrow-up{--flat-angle:-90deg}
/* Centre the icon within existing round controls without changing their hit areas. */
.picker-arrows button,.gallery-prev,.gallery-next,.back-top{display:inline-flex;align-items:center;justify-content:center}
.picker-close>span:first-child,.menu-close-lines{flex-shrink:0}
body .cinema-skip .flat-arrow{width:36px;min-width:36px;flex-basis:36px}
body .cinema-skip .flat-arrow::before{background-size:36px 36px;-webkit-mask-size:36px 36px;mask-size:36px 36px}

/* One label-to-icon gap across page themes, breakpoints and hover states.
   Explicit groups keep image cards and icon-only controls out of this layout. */
:root{--arrow-label-gap:16px}
body .arrow-label{
 display:inline-flex!important;
 align-items:center!important;
 justify-content:flex-start!important;
 column-gap:var(--arrow-label-gap)!important;
 max-width:100%;
}
body .arrow-label>.arrow-label-icon{
 flex-shrink:0;
 margin:0!important;
 line-height:0;
 transform:none!important;
}
/* Submenu links keep their own full row while sharing the label/icon gap. */
body .menu-section-links>.arrow-label{display:flex!important}
body .next-project-label{display:inline-flex;align-items:center}
body .next-project-label>span:first-child{min-width:0}

/* Multiple content actions always have separate rows, including dialog and form states. */
body .action-stack{
 display:flex;flex-direction:column;align-items:flex-start;
 gap:20px;max-width:100%;
}
body .action-stack>:is(a,button){
 display:flex!important;align-items:center;min-height:44px;
 width:fit-content;max-width:100%;margin:0!important;
}
body .ip-spread-copy .action-stack>:is(a,button){
 padding:8px 0 12px;font:400 14px/1.6 var(--sans);
 text-decoration:none;border-bottom:1px solid currentColor;
}
body #mobile-menu .menu-contact{flex-direction:column;align-items:flex-start;gap:20px}

/* Colour only the action label, never an entire image card or its heading. */
:root{--action-hover:#626e5e}
.site-header,#project-picker,.cinema-home main{--action-hover:#ded9c9}
body .arrow-label,body .flat-arrow{transition:color .25s ease}
body :is(a,button).arrow-label:is(:hover,:focus-visible),
body :is(a,button):is(:hover,:focus-visible) .arrow-label,
body :is(a,button):has(>.flat-arrow):is(:hover,:focus-visible){
 color:var(--action-hover)!important;
}
@media(prefers-reduced-motion:reduce){
 body .arrow-label,body .flat-arrow{transition:none}
}