/* ==========================================================================
   pixie — video production, Skopje
   Built to BRAND-SPEC.md. Graphite 80 · chalk 15 · red 5.
   No gradients, no glows. Hairlines are 1px. Imagery is full-bleed or ratio'd.

   00 tokens      05 sections     10 brands
   01 base        06 grid         11 services
   02 header      07 tile         12 contact
   03 brandmark   08 cta          13 sub-pages
   04 hero        09 photos       14 footer / reveal / reduced-motion
                                  11b gear        15 legal
   ========================================================================== */

/* ------------------------------------------------------------- 00 tokens */
:root{
  --graphite:#17171A;
  --carbon:#202024;
  --chalk:#F2F0EC;
  --red:#D63A2F;
  --ember:#A8271E;
  --steel:#6F7076;
  --mist:#C9C8CE;

  --chalk-90:rgba(242,240,236,.90);
  --chalk-64:rgba(242,240,236,.64);
  --chalk-42:rgba(242,240,236,.42);
  --chalk-18:rgba(242,240,236,.18);
  --hair:rgba(242,240,236,.14);

  --f-sans:"Golos Text",-apple-system,BlinkMacSystemFont,"Segoe UI",Roboto,sans-serif;
  --f-serif:"Literata",Georgia,"Times New Roman",serif;
  --f-mono:"JetBrains Mono",ui-monospace,SFMono-Regular,Menlo,Consolas,monospace;

  --t-h1:clamp(2.4rem,6vw,4.6rem);
  --t-h2:clamp(1.95rem,4.4vw,3.35rem);
  --t-h3:clamp(1.05rem,1.45vw,1.4rem);
  --t-body:clamp(.95rem,1.02vw,1.0625rem);
  --t-mono:clamp(.625rem,.72vw,.75rem);

  --gutter:clamp(1.25rem,6vw,7rem);
  --gap:clamp(.5rem,1vw,1rem);
  --sec-pad:clamp(2.25rem,5vh,4.25rem);
  --gap-tight:clamp(5px,.55vw,9px);      /* the stills bleed */
  --hdr-h:clamp(58px,7.5vh,78px);

  --mark-w:min(80vw,1700px);
  --mark-ar:2.1239;                      /* 186.48 / 87.8 */

  --e-out:cubic-bezier(.16,1,.3,1);      /* expo-out — the house easing */
  --e-io:cubic-bezier(.76,0,.24,1);
  --d-2:.9s;
  --d-3:1.5s;

  /* THE OPENING, in one place. The page holds still for --wm-hold before the
     wordmark starts to draw: the site is already there, and only then does it
     begin. That beat is what stops the load reading as a jump-cut. The rest
     of the hero - tagline, footer, scroll cue - is timed off these four. */
  --wm-hold:.55s;                        /* beat before the stroke starts */
  --wm-draw:1.15s;                       /* the stroke travels the letters */
  --wm-fill:.46s;                        /* outline floods to solid */
  --wm-dia:.38s;                         /* the diamond drops in last */

  /* THE RISE, in one place. Retime every tile and still from here. Nothing
     draws itself any more: a tile arrives already composed and simply
     finishes travelling. Opacity resolves early, so the picture is readable
     while it is still moving, and the transform keeps easing for almost twice
     as long - the last few pixels take the longest, and that late, slow
     settle is the whole effect. */
  --e-rise:cubic-bezier(.16,1,.22,1);    /* expo-out, with a longer tail */
  --rise:1.5s;                           /* the travel */
  --rise-fade:.85s;                      /* opacity, resolves first */
  --media-in:.06s;                       /* picture, just behind its frame */
  --meta-in:.26s;                        /* caption, just behind the picture */
  --stagger:105ms;                       /* between tiles in the same row */

  /* MOVEMENT, isolated. prefers-reduced-motion zeroes these and nothing else,
     so fades and colour keep their real durations. Reduce, not remove. */
  --lift:56px;                           /* how far a tile/still travels in */
  --zoom:1.035;                          /* still, on hover */
  --zoom-tile:1.03;                      /* film, on hover */
  --push:1.05;                           /* media settling inside its frame */
}

@media (max-aspect-ratio:1/1){ :root{ --mark-w:min(86vw,1700px); } }
@media (min-aspect-ratio:1/1) and (max-height:760px){ :root{ --mark-w:min(64vw,1200px); } }

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

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

body{
  margin:0;
  background:var(--graphite);
  color:var(--chalk);
  font-family:var(--f-sans);
  font-size:var(--t-body);
  line-height:1.65;
  overflow-x:hidden;
  -webkit-font-smoothing:antialiased;
  -moz-osx-font-smoothing:grayscale;
  font-synthesis-weight:none;
}
body.is-loading{ cursor:progress; }

img,video,svg{ display:block; max-width:100%; }
h1,h2,h3,p,ol,ul,figure{ margin:0; }
ol,ul{ padding:0; list-style:none; }
a{ color:inherit; text-decoration:none; }
button,input,select,textarea{ font:inherit; color:inherit; }

::selection{ background:var(--red); color:var(--chalk); }
:focus-visible{ outline:1px solid var(--red); outline-offset:3px; }

.vh{
  position:absolute; width:1px; height:1px; overflow:hidden;
  clip-path:inset(50%); white-space:nowrap;
}

.skip{
  position:fixed; top:-100px; left:var(--gutter); z-index:200;
  padding:.7rem 1.1rem; background:var(--chalk); color:var(--graphite);
  font-family:var(--f-mono); font-size:var(--t-mono);
  letter-spacing:.12em; text-transform:uppercase;
  transition:top .3s var(--e-out);
}
.skip:focus{ top:1rem; }

.mono{
  font-family:var(--f-mono); font-size:var(--t-mono); font-weight:400;
  letter-spacing:.12em; text-transform:uppercase;
  color:var(--steel); line-height:1.4;
}
.mono i{ font-style:normal; color:var(--red); padding:0 .35em; }

.rule{ display:block; position:relative; height:1px; width:100%; background:var(--hair); }
.rule__d{
  position:absolute; top:50%; left:50%; width:7px; height:7px;
  background:var(--red); transform:translate(-50%,-50%) rotate(45deg);
}

/* ------------------------------------------------------------- 02 header */
/* Always present on every page — the small wordmark never leaves the corner. */
.hdr{
  /* above .menu (60) so the logo, the burger and the language toggle stay
     usable while the overlay is open — otherwise the overlay eats the taps */
  position:fixed; inset:0 0 auto 0; z-index:70;
  height:var(--hdr-h);
  pointer-events:none;
}
.hdr::before{
  content:""; position:absolute; inset:0;
  background:var(--graphite); opacity:0;
  transition:opacity .6s var(--e-out);
}
.hdr.is-solid::before{ opacity:1; }
body.menu-open .hdr::before,
body.menu-open .hdr__rule,
body.menu-open .hdr__prog{ opacity:0; }
/* the lightbox is its own world — the header steps out of the way */
body.lb-open .hdr{ opacity:0; pointer-events:none; transition:opacity .3s var(--e-out); }

.hdr__in{
  position:relative; height:100%;
  display:flex; align-items:center; gap:clamp(.9rem,3vw,2.4rem);
  padding:0 var(--gutter);
}

/* the standalone corner logo — separate element from the hero wordmark */
.hdr__logo{
  flex:none; width:clamp(74px,7vw,104px);
  pointer-events:auto;
  opacity:0;
  animation:hdrLogoIn 1.2s var(--e-out) .35s forwards;
}
.hdr__logo-svg{ width:100%; height:auto; }
.hdr__logo .wm{ fill:var(--chalk); transition:fill .35s var(--e-out); }
.hdr__logo .dia{ fill:var(--red); }
.hdr__logo:hover .wm{ fill:var(--chalk-64); }
@keyframes hdrLogoIn{ from{ opacity:0; transform:translateY(-6px); } to{ opacity:1; transform:none; } }

.hdr__nav{
  margin-left:auto;
  display:flex; align-items:center; gap:clamp(.9rem,2.4vw,2.2rem);
  pointer-events:auto;
}
.hdr__grp{ display:flex; align-items:center; gap:clamp(.75rem,1.7vw,1.6rem); }
.hdr__sep{ width:1px; height:14px; background:var(--chalk-18); flex:none; }
.hdr__lbl{ color:var(--chalk-42); }

.hdr__nav a{
  position:relative;
  font-family:var(--f-mono); font-size:var(--t-mono);
  letter-spacing:.12em; text-transform:uppercase;
  color:var(--chalk-64); padding:.35rem 0; white-space:nowrap;
  transition:color .35s var(--e-out);
}
.hdr__nav a::after{
  content:""; position:absolute; left:0; right:0; bottom:0; height:1px;
  background:var(--red); transform:scaleX(0); transform-origin:0 50%;
  transition:transform .5s var(--e-out);
}
.hdr__nav a:hover,.hdr__nav a.is-here{ color:var(--chalk); }
.hdr__nav a:hover::after,.hdr__nav a.is-here::after{ transform:scaleX(1); }

.lang{ display:flex; align-items:center; gap:.4rem; flex:none; pointer-events:auto; }
.lang__btn{
  background:none; border:0; padding:.35rem .1rem; cursor:pointer;
  font-family:var(--f-mono); font-size:var(--t-mono);
  letter-spacing:.12em; color:var(--chalk-42);
  transition:color .35s var(--e-out);
}
.lang__btn:hover{ color:var(--chalk); }
.lang__btn.is-on{ color:var(--red); }
.lang__sep{ color:var(--chalk-18); font-family:var(--f-mono); font-size:var(--t-mono); }

.hdr__rule{
  position:absolute; left:0; right:0; bottom:0; height:1px;
  background:var(--hair); opacity:0;
  transition:opacity .6s var(--e-out);
}
.hdr.is-solid .hdr__rule{ opacity:1; }

/* fills left-to-right as you scroll down, retracts as you scroll up */
.hdr__prog{
  position:absolute; left:0; bottom:0; width:100%; height:1px; z-index:2;
  background:var(--red);
  transform:scaleX(0); transform-origin:0 50%;
  will-change:transform;
}

@media (max-width:1180px){
  .hdr__grp--sections{ display:none; }
  .hdr__sep{ display:none; }
}
@media (max-width:560px){
  .hdr__lbl{ display:none; }
  .hdr__nav{ gap:.9rem; }
}

/* ---------------------------------------------------------- 03 brandmark */
/* The hero wordmark. Static — it scrolls away with the page. On load it
   traces itself as an outline, floods to solid, then the diamond drops. */
.brandmark{
  width:var(--mark-w); max-width:100%;
  aspect-ratio:var(--mark-ar);
  pointer-events:none;
}
.brandmark__svg{ width:100%; height:100%; overflow:visible; }

.brandmark .wm{
  fill:rgba(242,240,236,0);
  stroke:var(--chalk); stroke-width:.45;
  stroke-linejoin:round; stroke-linecap:round;
  stroke-dasharray:100; stroke-dashoffset:100;
}
.brandmark .dia{
  fill:var(--red);
  opacity:0;
  transform-box:fill-box; transform-origin:50% 50%;
  transform:translateY(-260%) scale(.7);
}
/* Load-only and scroll-independent: keyed off body.is-in and nothing else,
   so scrolling never starts, stops or rewinds it. The hold comes first - the
   page is fully present and holding still before a single pixel is drawn.
   Lands at hold + draw + fill/2 + dia, a shade over 2.3s. */
body.is-in .brandmark .wm{
  animation:wmDraw var(--wm-draw) cubic-bezier(.34,0,.14,1) var(--wm-hold) forwards,
            wmFill var(--wm-fill) ease-out
              calc(var(--wm-hold) + var(--wm-draw) * .88) forwards;
}
body.is-in .brandmark .dia{
  animation:diaDrop var(--wm-dia) var(--e-out)
            calc(var(--wm-hold) + var(--wm-draw) + var(--wm-fill) * .5) forwards;
}

@keyframes wmDraw{ to{ stroke-dashoffset:0; } }
@keyframes wmFill{ to{ fill:rgba(242,240,236,1); stroke-opacity:0; } }
@keyframes diaDrop{ to{ opacity:1; transform:none; } }

/* --------------------------------------------------------------- 04 hero */
.hero{
  position:relative; z-index:1;
  min-height:100svh;
  display:flex; flex-direction:column; align-items:center; justify-content:center;
  padding:var(--hdr-h) var(--gutter) clamp(4.5rem,10vh,7rem);
  text-align:center;
}
/* Black under the reel, and black on the video box itself. Frame one of both
   cuts is pure black, so whatever is on screen before the first frame decodes
   is the same black the reel opens on - there is nothing to see handing over.
   This is what replaces the poster attribute; see the note in index.html. */
.hero__media{ position:fixed; inset:0; z-index:0; overflow:hidden; will-change:transform; background:#000; }
.hero__video{ width:100%; height:100%; object-fit:cover; background:#000; }
/* iOS draws its own play button over a video it will not autoplay (Low Power
   Mode). Kept in rules of their own: a selector list with an unknown
   pseudo-element is dropped whole by every other engine. */
.hero__video::-webkit-media-controls{ display:none !important; }
.hero__video::-webkit-media-controls-start-playback-button{ display:none !important; -webkit-appearance:none; }
/* The fallback still. main.js inserts it only when the browser refuses to
   play the reel, and only once the image has loaded, so it fades up whole.
   Positioned, so it paints over the video; the scrim and grain come later
   in the DOM and still sit over it. */
.hero__still{
  position:absolute; inset:0; width:100%; height:100%; object-fit:cover;
  opacity:0; transition:opacity .9s var(--e-out);
}
.hero__still.is-on{ opacity:1; }
.hero__scrim{ position:absolute; inset:0; background:var(--graphite); opacity:.60; }
.hero__grain{
  position:absolute; inset:-50%;
  background-image:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='140' height='140'%3E%3Cfilter id='n'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='.82' numOctaves='3'/%3E%3C/filter%3E%3Crect width='140' height='140' filter='url(%23n)' opacity='.5'/%3E%3C/svg%3E");
  opacity:.045; mix-blend-mode:overlay; pointer-events:none;
  animation:grain 1.1s steps(4) infinite;
}
@keyframes grain{
  0%{transform:translate(0,0)}     25%{transform:translate(-3%,2%)}
  50%{transform:translate(2%,-3%)} 75%{transform:translate(-2%,-2%)}
  100%{transform:translate(0,0)}
}

.hero__stage{ position:relative; z-index:2; display:flex; flex-direction:column; align-items:center; width:100%; }

.hero__tag{
  margin-top:clamp(.9rem,2.2vh,2rem);
  font-size:clamp(1rem,1.65vw,1.5rem);
  font-weight:400; line-height:1.3;
  color:var(--chalk-90);
  min-height:1.3em;
  white-space:nowrap;
}
.caret{
  display:inline-block; width:2px; height:1.05em;
  background:var(--red); margin-left:.14em; vertical-align:-.16em;
  animation:blink 1.05s steps(1) infinite;
  transition:opacity .5s var(--e-out);
}
.caret.is-done{ opacity:0; }
@keyframes blink{ 0%,49%{opacity:1} 50%,100%{opacity:0} }

.hero__foot{
  position:absolute; z-index:2;
  left:var(--gutter); right:var(--gutter); bottom:clamp(1.4rem,4vh,2.6rem);
  display:flex; justify-content:space-between; gap:1rem;
  opacity:0;
  transition:opacity .55s var(--e-out)
    calc(var(--wm-hold) + var(--wm-draw) + var(--wm-fill));
}
body.is-in .hero__foot{ opacity:1; }
.hero__tc{ color:var(--red); font-variant-numeric:tabular-nums; }

.cue{
  position:absolute; z-index:2; left:50%; bottom:clamp(1.4rem,4vh,2.6rem);
  transform:translateX(-50%);
  display:flex; flex-direction:column; align-items:center; gap:.6rem;
  opacity:0;
  transition:opacity .55s var(--e-out)
    calc(var(--wm-hold) + var(--wm-draw) + var(--wm-fill) + .15s);
}
body.is-in .cue{ opacity:1; }
.cue__lbl{ color:var(--chalk-42); transition:color .4s var(--e-out); }
.cue:hover .cue__lbl{ color:var(--chalk); }
.cue__line{ width:1px; height:clamp(28px,5vh,46px); background:var(--chalk-18); position:relative; overflow:hidden; }
.cue__line::after{ content:""; position:absolute; inset:0; background:var(--red); animation:cue 2.4s var(--e-io) infinite; }
@keyframes cue{ 0%{transform:translateY(-100%)} 55%,100%{transform:translateY(100%)} }
@media (max-width:640px){ .hero__foot{ display:none; } }

/* ----------------------------------------------------------- 05 sections */
.sec{ position:relative; z-index:2; background:var(--graphite); padding:var(--sec-pad) var(--gutter); }

.sechead{ margin-bottom:clamp(2.5rem,6vh,5rem); max-width:min(46rem,100%); }
.sechead__no{ display:block; color:var(--red); margin-bottom:clamp(.9rem,2vh,1.4rem); }
.sechead__h{ font-size:var(--t-h2); font-weight:600; line-height:1.12; letter-spacing:-.02em; }
.sechead__sub{ margin-top:clamp(.7rem,1.6vh,1.1rem); color:var(--chalk-64); max-width:34rem; }
.sechead .rule{ margin-top:clamp(1.8rem,4vh,3rem); }

/* the see-more row — a full-width rule with the button centred on it */
.secfoot{
  margin-top:clamp(2.5rem,6vh,4.5rem);
  display:flex; justify-content:center;
  border-top:1px solid var(--hair);
  padding-top:clamp(2rem,5vh,3.4rem);
}
.secfoot .cta{ padding:1.25rem 2.6rem; font-size:clamp(.68rem,.8vw,.8rem); }

/* --------------------------------------------------------------- 06 grid */
.grid{ display:grid; grid-template-columns:repeat(12,1fr); gap:clamp(2.2rem,5vh,4.5rem) var(--gap); }
.tile--w239{ grid-column:span 12; }
.tile--w169{ grid-column:span 6;  }
.tile--w916{ grid-column:span 4;  }
@media (max-width:900px){ .tile--w169{ grid-column:span 12; } }
@media (max-width:560px){ .tile--w916{ grid-column:span 12; } }
/* The index films are six verticals, three to a row. On a phone, one per row
   would make each a full screen of scrolling, so they go two up: six divides
   into three even rows. The archive keeps one per row. */
@media (max-width:560px){ .grid--films .tile--w916{ grid-column:span 6; } }

/* --------------------------------------------------------------- 07 tile */
/* THE RISE: a tile is never assembled in front of you. It arrives whole -
   picture, frame and caption together - a little low and a little oversized,
   and spends the next second and a half easing the last of that away. */
.frame{ position:relative; display:block; overflow:hidden; background:var(--carbon); isolation:isolate; }
.tile--w239 .frame{ aspect-ratio:2.39/1; }
.tile--w169 .frame{ aspect-ratio:16/9;   }
.tile--w916 .frame{ aspect-ratio:9/16;   }

.frame__media{
  position:absolute; inset:0; overflow:hidden;
  opacity:0;
  transition:opacity var(--rise-fade) var(--e-out)
    calc(var(--i,0) * var(--stagger) + var(--media-in));
}
.tile.in .frame__media{ opacity:1; }

.frame__in{
  position:absolute; inset:0;
  transform:scale(var(--push));
  transition:transform var(--rise) var(--e-rise)
    calc(var(--i,0) * var(--stagger) + var(--media-in));
}
.tile.in .frame__in{ transform:none; }
.tile.in .frame:hover .frame__in{ transform:scale(var(--zoom-tile)); transition-delay:0s; transition-duration:.9s; }

/* oversized so the parallax translate never exposes an edge.
   No transition on transform — JS writes it every frame. */
.frame__in img,.frame__in video{
  position:absolute; inset:0; width:100%; height:114%; top:-7%;
  object-fit:cover; will-change:transform;
  transition:opacity .5s var(--e-out);
}
/* The still gives way only once the loop is actually playing (is-live, set on
   the video's "playing"), never on hover alone - otherwise a loop still
   loading leaves the empty frame showing between the two. The still is the
   loop's first frame, and the loop is rewound when it stops, so the handover
   is the same picture both ways. */
.frame__in video{ opacity:0; }
.frame.is-live .frame__in video{ opacity:1; }
.frame.is-live .frame__in img{ opacity:0; transition:opacity .5s var(--e-out) .12s; }


.frame__slate{
  position:absolute; top:0; left:0; z-index:8;
  padding:.55rem .8rem; color:var(--chalk-64); background:rgba(23,23,26,.55);
  opacity:0; transform:translateY(-6px);
  transition:opacity .5s var(--e-out),transform .5s var(--e-out);
}
.frame:hover .frame__slate,.frame:focus-visible .frame__slate{ opacity:1; transform:none; }

.frame__cta{
  position:absolute; z-index:8; right:0; bottom:0;
  display:flex; align-items:center; gap:.55rem;
  padding:.7rem 1rem; color:var(--chalk); background:var(--graphite);
  opacity:0; transform:translateY(100%);
  transition:opacity .45s var(--e-out),transform .6s var(--e-out);
}
.frame__cta::before{ content:""; width:6px; height:6px; background:var(--red); transform:rotate(45deg); }
.frame:hover .frame__cta,.frame:focus-visible .frame__cta{ opacity:1; transform:none; }

.tile__meta{
  display:flex; align-items:baseline; justify-content:space-between;
  gap:1rem; flex-wrap:wrap; padding-top:clamp(.8rem,1.6vh,1.15rem);
  opacity:0; transform:translate3d(0,calc(var(--lift) * .4),0);
  transition:opacity .6s var(--e-out)
    calc(var(--i,0) * var(--stagger) + var(--meta-in)),
             transform var(--rise) var(--e-rise)
    calc(var(--i,0) * var(--stagger) + var(--meta-in));
}
.tile.in .tile__meta{ opacity:1; transform:none; }
.tile__t{ font-size:var(--t-h3); font-weight:500; letter-spacing:-.01em; line-height:1.25; }
.tile__m{ flex:none; }

/* ---------------------------------------------------------------- 08 cta */
.cta{
  position:relative; display:inline-flex; align-items:center; gap:.85rem;
  padding:1.05rem 1.9rem;
  /* <a> and <button> both wear this. A button carries the UA's own face and
     border, which painted chalk text onto a near-white box - reset it here so
     the two elements are indistinguishable. */
  -webkit-appearance:none; appearance:none; background:transparent; cursor:pointer;
  border:1px solid var(--chalk-18);
  font-family:var(--f-mono); font-size:var(--t-mono);
  letter-spacing:.12em; text-transform:uppercase; color:var(--chalk);
  overflow:hidden;
  transition:border-color .45s var(--e-out),color .45s var(--e-out);
}
.cta::before{
  content:""; position:absolute; inset:0; background:var(--red);
  transform:translateY(101%); transition:transform .6s var(--e-out);
}
.cta:hover{ border-color:var(--red); }
.cta:hover::before{ transform:none; }
.cta__d{ position:relative; width:7px; height:7px; background:var(--red); transform:rotate(45deg); transition:background .45s var(--e-out); }
.cta:hover .cta__d{ background:var(--chalk); }
.cta__t{ position:relative; }
.cta__ar{
  position:relative; width:16px; height:1px; background:currentColor;
  transition:width .45s var(--e-out);
}
.cta__ar::after{
  content:""; position:absolute; right:0; top:-3px;
  width:7px; height:7px; border-top:1px solid currentColor; border-right:1px solid currentColor;
  transform:rotate(45deg);
}
.cta:hover .cta__ar{ width:26px; }

/* ------------------------------------------------------------- 09 photos */
/* Six columns, on a 5-item cycle: three upright at 3:4 (span 2), then two
   landscape at 4:3 (span 3). Both rows close at exactly 6, both hold the same
   4:3 proportion — one rotated. 25 stills = five clean cycles. */
.shots{
  display:grid; grid-template-columns:repeat(6,1fr); gap:var(--gap-tight);
  isolation:isolate;                       /* own stacking context for the grid */
}
.shot{ position:relative; margin:0; background:var(--carbon); }
.shot:nth-child(5n+1),
.shot:nth-child(5n+2),
.shot:nth-child(5n+3){ grid-column:span 2; aspect-ratio:3/4; }
.shot:nth-child(5n+4),
.shot:nth-child(5n+5){ grid-column:span 3; aspect-ratio:4/3; }

/* the whole frame lifts, picture and all — not the picture inside a fixed box */
.shot__btn{
  display:block; width:100%; height:100%; padding:0; border:0;
  background:var(--carbon); cursor:pointer; overflow:hidden;
}
/* The zoom lives on the picture, not on the box. The box keeps its exact
   grid size and clips, so a hovered still can never grow into the gap
   beside it or climb over its neighbour. --zoom still drives how far. */
.shot__btn img{
  width:100%; height:100%; object-fit:cover;
  transition:transform .7s var(--e-out);
}
.shot__btn:hover img,
.shot__btn:focus-visible img{ transform:scale(var(--zoom)); }

/* below the breakpoint the bands stop reading, so go uniformly upright */
@media (max-width:1000px){
  .shots{ grid-template-columns:repeat(4,1fr); }
  .shot:nth-child(n){ grid-column:span 2; aspect-ratio:3/4; }
}
@media (max-width:620px){
  .shots{ grid-template-columns:repeat(2,1fr); }
  .shot:nth-child(n){ grid-column:span 1; }
}

/* The index sample grid, four across and one crop throughout. The six-column
   band rhythm above still drives the archive page; here the stills are a
   sample, not the main event, so they read as a tight contact sheet and get
   out of the way of the films. 4:5 is the crop the archive already uses, so
   "All photographs" opens onto tiles of the same proportion.
   Twelve show, twelve more are a click away, and 24 divides evenly by four,
   three and two - no breakpoint ever ends on a ragged row. */
.shots--four{ grid-template-columns:repeat(4,1fr); }
.shots--four .shot:nth-child(n){ grid-column:span 1; aspect-ratio:4/5; }
@media (max-width:900px){ .shots--four{ grid-template-columns:repeat(3,1fr); } }
@media (max-width:560px){ .shots--four{ grid-template-columns:repeat(2,1fr); } }

/* ------------------------------------------------- 10 brands · conveyor */
/* One line under the hero, drifting right to left, red diamond between each
   name. Two identical sets and a -50% translate, so the loop is seamless. */
.ticker{
  position:relative; z-index:2;
  background:var(--graphite);
  border-top:1px solid var(--hair);
  border-bottom:1px solid var(--hair);
  padding:clamp(.9rem,2.2vh,1.5rem) 0;
}
.tick{ overflow:hidden; --logo:clamp(21px,2.3vw,32px); }
.tick__row{
  display:flex; width:max-content;
  animation:tickMove 52s linear infinite;
  will-change:transform;
}
.tick:hover .tick__row{ animation-play-state:paused; }
.tick__set{ display:flex; align-items:center; flex:none; }
/* A client set as a word rather than a mark. Currently unused - every
   brand in the row has a logo - but this is the fallback whenever one
   has no usable file, so it stays. */
.tick__i{
  font-size:clamp(.88rem,1.2vw,1.1rem); font-weight:500;
  letter-spacing:-.01em; white-space:nowrap;
  color:var(--chalk-42);
  transition:color .35s var(--e-out);
}
.tick__i:hover{ color:var(--chalk); }

/* THE MARKS.
   Exported as flat chalk silhouettes rather than in brand colours. Two reasons,
   both practical: half of these logos are black artwork that would be invisible
   on graphite, and a row carrying a purple, a red-and-yellow and a magenta at
   once reads as a scrapbook instead of a client list. One tint makes the strip
   one line. The untouched originals stay in "LOGOS FROM BRANDS IVE WORKED/".
   Greyscale+alpha PNGs - a third the weight of RGBA for a single-tint mark. */
.tick__l{
  flex:none;
  width:auto; max-width:none;
  height:calc(var(--logo) * var(--s,1));
  opacity:.5;
  transition:opacity .35s var(--e-out);
}
.tick__l:hover{ opacity:1; }

/* Optical balance. Sizing on height alone would set a 10:1 wordmark and a
   square mark to the same cap height, which leaves the wordmark four times as
   wide and somehow still looking smaller. --s pulls each toward equal visual
   MASS: (3 / aspect-ratio) ^ 0.42, clamped to .72-1.35 so neither extreme runs
   away. One nominal --logo height still drives the entire row. */
.tick__l--red-bull            { --s:1.29; }  /* 1.65:1, stacked lockup */
.tick__l--funk-shui           { --s:1.31; }   /* 1.57:1 */
.tick__l--ubavina-i-zdravje   { --s:.72; }   /* 9.97:1 */
.tick__l--functional-planet   { --s:1.35; }   /* 1.27:1 */
.tick__l--inferno             { --s:.72; }   /* 4.74:1 - the formula says .82, but the
   letters fill 64% of their box (the row's densest mark), and at .82 it outweighed
   the heaviest neighbour by a third. The floor puts it level with D-Fest. */
.tick__l--cole-skink          { --s:1.12; }   /* 2.28:1 */
.tick__l--advira              { --s:.91; }   /* 3.73:1 */
.tick__l--skopje-fashion-fest { --s:1.35; }   /* 1.20:1 */
.tick__l--buru                { --s:1.08; }   /* 1.29:1, paired with the name */
.tick__l--fashionel           { --s:.82; }   /* 4.82:1 */
.tick__l--d-fest              { --s:1.29; }   /* 1.62:1 */
.tick__l--elena-luka          { --s:.93; }   /* 3.55:1 */

/* THE BURU LOCKUP.
   Buru's identity is the bull head on its own - they publish no wordmark, and
   the name on their own site is set in a licensed custom face we cannot use.
   A bare bull head tells a visitor nothing, so the name is set here in the
   site's own sans and locked up beside the mark. Real text, not baked into the
   PNG: it stays crisp at any size and a screen reader reads it, which is why
   the image beside it carries an empty alt. */
.tick__lock{
  flex:none;
  display:flex; align-items:center;
  gap:calc(var(--logo) * .30);
  opacity:.5;
  transition:opacity .35s var(--e-out);
}
.tick__lock:hover{ opacity:1; }
/* the wrapper owns the fade, so the mark must not carry its own */
.tick__lock .tick__l{ opacity:1; }
.tick__lockt{
  font-size:calc(var(--logo) * .52);
  font-weight:700; letter-spacing:.07em; line-height:1;
  color:var(--chalk); white-space:nowrap;
}
.tick__d{
  flex:none; width:6px; height:6px; background:var(--red);
  transform:rotate(45deg); margin:0 clamp(1.3rem,3vw,2.8rem);
}
@keyframes tickMove{ from{ transform:translate3d(0,0,0); } to{ transform:translate3d(-50%,0,0); } }

/* ----------------------------------------------------------- 11 services */
/* Each row is a disclosure. The panel expands with grid-template-rows 0fr→1fr,
   so it animates to its natural height without JavaScript measuring anything. */
.svc__list{ border-top:1px solid var(--hair); }
.svc__row{ position:relative; border-bottom:1px solid var(--hair); }
.svc__row::before{
  content:""; position:absolute; left:0; right:0; bottom:-1px; height:1px;
  background:var(--red); transform:scaleX(0); transform-origin:0 50%;
  transition:transform .8s var(--e-out);
}
.svc__row:hover::before,.svc__row.is-open::before{ transform:scaleX(1); }

.svc__head{
  width:100%; background:none; border:0; cursor:pointer; text-align:left;
  color:inherit; font:inherit;
  display:grid; grid-template-columns:auto minmax(0,14rem) minmax(0,1fr) auto;
  gap:clamp(1rem,4vw,3.5rem); align-items:start;
  padding:clamp(1.5rem,3.6vh,2.6rem) 0;
}
.svc__no{ color:var(--red); padding-top:.45em; }
.svc__t{
  font-size:clamp(1.35rem,2.6vw,2.1rem); font-weight:600;
  letter-spacing:-.02em; line-height:1.15;
  transition:color .35s var(--e-out);
}
.svc__head:hover .svc__t{ color:var(--chalk); }
.svc__d{ color:var(--chalk-64); max-width:40rem; }

.svc__ico{ position:relative; width:15px; height:15px; align-self:center; justify-self:end; }
.svc__ico i{ position:absolute; background:var(--red); transition:transform .45s var(--e-out); }
.svc__ico i:first-child{ left:0; right:0; top:7px; height:1px; }
.svc__ico i:last-child{ top:0; bottom:0; left:7px; width:1px; }
.svc__head[aria-expanded="true"] .svc__ico i:last-child{ transform:scaleY(0); }

.svc__panel{
  display:grid; grid-template-rows:0fr;
  transition:grid-template-rows .55s var(--e-io);
}
.svc__panel-in{
  overflow:hidden; visibility:hidden;
  transition:visibility 0s .55s;
}
.svc__row.is-open .svc__panel{ grid-template-rows:1fr; }
.svc__row.is-open .svc__panel-in{ visibility:visible; transition:visibility 0s; }
.svc__panel-in > p{
  color:var(--chalk-64); max-width:46rem;
  padding:0 0 clamp(1.5rem,3.6vh,2.6rem);
  margin-left:calc(clamp(1rem,4vw,3.5rem) * 2 + 2ch);
}

@media (max-width:760px){
  .svc__head{ grid-template-columns:auto minmax(0,1fr) auto; }
  .svc__d{ grid-column:2 / -1; }
  .svc__panel-in > p{ margin-left:0; }
}

.pull{
  margin-top:clamp(3rem,8vh,6rem);
  font-family:var(--f-serif); font-style:italic;
  font-size:clamp(1.35rem,2.8vw,1.95rem); line-height:1.35;
  color:var(--chalk-90); max-width:24ch;
}

/* ---------------------------------------------------------- 11b gear */
/* The quietest block on the page on purpose. Rental sits beside the
   production work, not in front of it. Two columns: the ask on the left,
   what we carry on the right - categories rather than model numbers, so the
   section stays honest on a day when half the case is out on a job. */
.gear__ask{
  display:grid; grid-template-columns:minmax(0,1.25fr) minmax(0,1fr);
  gap:clamp(2rem,5vw,5rem);
  align-items:start;
  margin-top:clamp(1.75rem,4vh,2.75rem);
}

.gear__q{
  font-size:clamp(1.5rem,3vw,2.3rem); font-weight:600;
  letter-spacing:-.02em; line-height:1.15;
}
.gear__p{
  margin-top:clamp(.9rem,2vh,1.35rem);
  color:var(--chalk-64); max-width:46ch;
}

/* Hairline index. Mono and uppercase so it reads as a contents list rather
   than a spec sheet — the point is the categories, not a count. */
.gear__cats{
  list-style:none; margin:0; padding:0;
  border-top:1px solid var(--hair);
}
.gear__cats li{
  display:flex; align-items:center; gap:.85rem;
  padding:clamp(.75rem,1.8vh,1.05rem) 0;
  border-bottom:1px solid var(--hair);
  font-family:var(--f-mono); font-size:var(--t-mono);
  letter-spacing:.12em; text-transform:uppercase; color:var(--mist);
}
.gear__cats li::before{
  content:""; flex:none; width:6px; height:6px;
  background:var(--red); transform:rotate(45deg);
}

/* The rule closes the section, so it runs the full width the way .secfoot
   does elsewhere; only the sentence inside keeps a readable measure. */
.gear__note{
  margin-top:clamp(1.75rem,4vh,2.75rem);
  padding-top:clamp(1.25rem,3vh,2rem);
  border-top:1px solid var(--hair);
  font-size:var(--t-body); line-height:1.65; color:var(--steel);
}
.gear__note span{ display:block; max-width:62ch; }

/* Ghost variant of .btn. The solid one belongs to the contact panel; here the
   chalk arrives only on hover, so the section stays calm at rest.
   Doubled selector on purpose: .btn is defined further down the file, so a
   single .gear__cta would tie on specificity and lose on order. */
.btn.gear__cta{
  background:transparent; color:var(--chalk);
  box-shadow:inset 0 0 0 1px var(--hair);
  margin-top:clamp(1.5rem,3.5vh,2.25rem);
}
.btn.gear__cta::before{ background:var(--chalk); }
.btn.gear__cta:hover{ color:var(--graphite); }
.btn.gear__cta:hover .btn__d{ background:var(--red); }

@media (max-width:860px){
  .gear__ask{ grid-template-columns:1fr; gap:clamp(1.75rem,4vh,2.5rem); }
}
/* ------------------------------------------------------------ 12 contact */
/* The red is now one contained panel rather than a full-bleed flood — less
   area, less glare, and the section around it stays graphite. */
/* full-bleed red band, but the form inside stays a narrow centred column */
.panel{
  position:relative; overflow:hidden;
  background:var(--red); color:var(--chalk);
  margin-inline:calc(var(--gutter) * -1);
  padding:clamp(2.4rem,6vh,4.5rem) var(--gutter);
}
/* a graphite screen over the red — same colour, just held back */
.panel::after{
  content:""; position:absolute; inset:0; z-index:1;
  background:var(--graphite); opacity:.2; pointer-events:none;
}
.panel__dia{
  position:absolute; z-index:0; right:2%; top:50%;
  width:min(38vmin,340px); aspect-ratio:1;
  background:var(--chalk); opacity:.08;
  transform:translateY(-50%) rotate(45deg); pointer-events:none;
}
.panel__in{
  position:relative; z-index:2;
  max-width:1180px; margin-inline:auto;
  display:grid; grid-template-columns:minmax(0,.85fr) minmax(0,1.25fr);
  gap:clamp(1.8rem,5vw,4.5rem);
  align-items:start;
}
.panel__head .sechead__no{ color:rgba(242,240,236,.7); display:block; margin-bottom:.9rem; }
.panel__h{
  font-size:clamp(2.4rem,5.2vw,4.4rem); font-weight:600;
  line-height:1.02; letter-spacing:-.03em;
}
.panel__sub{ margin-top:1rem; color:var(--chalk); max-width:22rem; }
.panel__side{ grid-column:1 / -1; }
@media (max-width:900px){
  .panel__in{ grid-template-columns:1fr; }
  .panel__side{ grid-column:auto; }
}
/* the details sit as one row under the form rather than a side column */
.panel__side{
  display:flex; flex-wrap:wrap; gap:clamp(1.2rem,5vw,3.5rem);
  border-top:1px solid rgba(242,240,236,.28);
  padding-top:clamp(1.2rem,3vh,1.8rem);
}
.panel__side .cdl,.panel__side .cdl:first-child{ border:0; padding:0; }

.form__row{ display:grid; grid-template-columns:1fr 1fr; gap:clamp(1rem,2.5vw,1.8rem); }
@media (max-width:560px){ .form__row{ grid-template-columns:1fr; } }

.field{ margin-bottom:clamp(1rem,2.2vh,1.5rem); }
.field__l{ display:block; margin-bottom:.5rem; }
.field__i{
  width:100%; background:transparent; border:0;
  border-bottom:1px solid rgba(242,240,236,.4);
  padding:.55rem 0; font-size:1rem; color:var(--chalk); border-radius:0;
  transition:border-color .45s var(--e-out);
}
.field__i:hover{ border-bottom-color:var(--chalk-64); }
.field__i:focus{ outline:0; border-bottom-color:var(--chalk); }
textarea.field__i{ resize:vertical; min-height:4.5rem; line-height:1.6; }
.sel{ position:relative; }
select.field__i{ appearance:none; cursor:pointer; padding-right:2rem; }
select.field__i option{ background:var(--carbon); color:var(--chalk); }
.sel__ar{
  position:absolute; right:.25rem; top:50%; width:7px; height:7px;
  border-right:1px solid var(--chalk-64); border-bottom:1px solid var(--chalk-64);
  transform:translateY(-70%) rotate(45deg); pointer-events:none;
}
.field.is-bad .field__i{ border-bottom-color:var(--graphite); }
.field__e{
  display:block; min-height:1rem; margin-top:.35rem;
  font-family:var(--f-mono); font-size:var(--t-mono);
  letter-spacing:.12em; text-transform:uppercase; color:var(--graphite);
  opacity:0; transform:translateY(-3px);
  transition:opacity .35s var(--e-out),transform .35s var(--e-out);
}
.field.is-bad .field__e{ opacity:1; transform:none; }

/* Honeypot. Deliberately NOT display:none or visibility:hidden — the bots
   worth stopping check for both. Taken out of the layout and off the screen
   instead, so it costs nothing and still catches form-fillers. */
.hp{
  position:absolute; left:-9999px; top:auto;
  width:1px; height:1px; overflow:hidden;
}

.panel .mono{ color:var(--chalk); }
.panel .mono i{ color:var(--graphite); }
.panel :focus-visible{ outline-color:var(--chalk); }

.btn{
  position:relative; display:inline-flex; align-items:center; gap:.7rem;
  margin-top:.4rem; padding:.95rem 1.8rem;
  background:var(--chalk); color:var(--graphite); border:0; cursor:pointer;
  font-family:var(--f-mono); font-size:var(--t-mono);
  letter-spacing:.12em; text-transform:uppercase; overflow:hidden;
  transition:color .45s var(--e-out);
}
.btn::before{
  content:""; position:absolute; inset:0; background:var(--graphite);
  transform:translateY(101%); transition:transform .6s var(--e-out);
}
.btn:hover{ color:var(--chalk); }
.btn:hover::before{ transform:none; }
.btn__d{ position:relative; width:7px; height:7px; background:var(--red); transform:rotate(45deg); transition:background .45s var(--e-out); }
.btn:hover .btn__d{ background:var(--chalk); }
.btn__t{ position:relative; }
.btn[disabled]{ opacity:.45; pointer-events:none; }

.form__note{ min-height:1.2rem; margin-top:.9rem; }
.form__note.is-ok{ color:var(--chalk); }
.form__note.is-bad{ color:var(--graphite); }

.panel__side{ align-self:start; }
.cdl{ padding:clamp(.7rem,1.6vh,1rem) 0; border-bottom:1px solid rgba(242,240,236,.28); }
.cdl:first-child{ border-top:1px solid rgba(242,240,236,.28); }
.cdl__l{ display:block; margin-bottom:.3rem; }
.cdl__v{ display:inline-block; position:relative; font-size:clamp(.95rem,1.2vw,1.1rem); }
a.cdl__v::after{
  content:""; position:absolute; left:0; right:0; bottom:-2px; height:1px;
  background:var(--chalk); transform:scaleX(0); transform-origin:0 50%;
  transition:transform .55s var(--e-out);
}
a.cdl__v:hover::after{ transform:scaleX(1); }

/* ---------------------------------------------------------- 13 sub-pages */
body.is-sub main{ padding-top:var(--hdr-h); }

.pagehead{ padding:clamp(4rem,11vh,8rem) var(--gutter) 0; max-width:min(52rem,100%); }
.pagehead__h{ font-size:var(--t-h1); font-weight:600; line-height:1.05; letter-spacing:-.025em; }
.pagehead__sub{ margin-top:clamp(.7rem,1.6vh,1.1rem); color:var(--chalk-64); }
.pagehead .rule{ margin-top:clamp(1.8rem,4vh,3rem); }

.filters{
  display:flex; flex-wrap:wrap; gap:.5rem;
  padding:clamp(1.8rem,4vh,3rem) var(--gutter) 0;
}
.filt{
  background:none; cursor:pointer;
  border:1px solid var(--chalk-18);
  padding:.6rem 1.1rem;
  font-family:var(--f-mono); font-size:var(--t-mono);
  letter-spacing:.12em; text-transform:uppercase; color:var(--chalk-64);
  transition:color .35s var(--e-out),border-color .35s var(--e-out);
}
.filt:hover{ color:var(--chalk); border-color:var(--chalk-42); }
.filt.is-on{ color:var(--chalk); border-color:var(--red); }

.archive{ padding-top:clamp(2rem,5vh,3.5rem); }
.shots--archive .shot{ aspect-ratio:4/5; }
.shot__cap{
  position:absolute; left:0; bottom:0; z-index:2;
  padding:.5rem .7rem; background:rgba(23,23,26,.62); color:var(--chalk-64);
  opacity:0; transform:translateY(6px);
  transition:opacity .4s var(--e-out),transform .4s var(--e-out);
}
.shot:hover .shot__cap{ opacity:1; transform:none; }
.tile[hidden],.shot[hidden]{ display:none; }
.empty{ padding:3rem 0; color:var(--chalk-42); }

.about__grid{
  display:grid; grid-template-columns:minmax(0,1.6fr) minmax(0,1fr);
  gap:clamp(2.5rem,6vw,6rem); align-items:start;
}
@media (max-width:860px){ .about__grid{ grid-template-columns:1fr; } }
.about__body p + p{ margin-top:1.4em; }
.about__lead{ font-size:clamp(1.2rem,2.2vw,1.7rem); line-height:1.45; letter-spacing:-.01em; }
.about__body .pull{ margin-top:clamp(2.5rem,6vh,4rem); }
.about__side .cdl{ border-color:var(--hair); }
.about__side .cdl:first-child{ border-top-color:var(--hair); }
.about__side .cdl__l{ color:var(--steel); }
.about__side a.cdl__v::after{ background:var(--red); }

/* --------------------------------------------------- 13b mobile menu */
.burger{
  display:none; position:relative; flex:none;
  width:34px; height:34px; padding:0;
  background:none; border:0; cursor:pointer; pointer-events:auto;
}
.burger span{
  position:absolute; left:6px; right:6px; height:1px; background:var(--chalk);
  transition:transform .45s var(--e-out),opacity .3s var(--e-out);
}
.burger span:first-child{ top:14px; }
.burger span:last-child{  top:20px; }
body.menu-open .burger span:first-child{ transform:translateY(3px) rotate(45deg); }
body.menu-open .burger span:last-child{  transform:translateY(-3px) rotate(-45deg); }

.menu{
  position:fixed; inset:0; z-index:60;
  background:var(--graphite);
  display:flex; flex-direction:column; justify-content:center;
  padding:var(--hdr-h) var(--gutter) clamp(2rem,6vh,4rem);
  opacity:0; transition:opacity .4s var(--e-out);
}
.menu[hidden]{ display:none; }
body.menu-open .menu{ opacity:1; }

.menu__nav{ display:flex; flex-direction:column; gap:clamp(.5rem,1.6vh,1rem); }
.menu__nav a{
  font-size:clamp(1.9rem,8vw,3.2rem); font-weight:600;
  letter-spacing:-.02em; line-height:1.1; color:var(--chalk);
  opacity:0; transform:translateY(18px);
  transition:opacity .5s var(--e-out),transform .6s var(--e-out),color .3s;
}
body.menu-open .menu__nav a{ opacity:1; transform:none; }
.menu__nav a:nth-child(1){ transition-delay:.06s }
.menu__nav a:nth-child(2){ transition-delay:.10s }
.menu__nav a:nth-child(3){ transition-delay:.14s }
.menu__nav a:nth-child(4){ transition-delay:.18s }
.menu__nav a:nth-child(5){ transition-delay:.22s }
.menu__nav a:nth-child(7){ transition-delay:.28s }
.menu__nav a:nth-child(8){ transition-delay:.32s }
.menu__nav a:nth-child(9){ transition-delay:.36s }
.menu__nav a:active{ color:var(--red); }
.menu__rule{ height:1px; background:var(--hair); margin:clamp(.8rem,2.5vh,1.6rem) 0; }
.menu__foot{ margin-top:auto; padding-top:2rem; }

@media (max-width:1180px){
  .burger{ display:block; }
  .hdr__grp--pages,.hdr__lbl{ display:none; }
}

/* ------------------------------------------------------- 13c lightbox */
.lb{
  position:fixed; inset:0; z-index:120;
  display:flex; align-items:center; justify-content:center;
  padding:clamp(2.5rem,7vh,5rem) clamp(1rem,6vw,5rem);
  background:rgba(23,23,26,.94);          /* the page, 94% gone */
  opacity:0; transition:opacity .35s var(--e-out);
}
.lb[hidden]{ display:none; }
body.lb-open .lb{ opacity:1; }

.lb__stage{
  position:relative; max-width:100%; max-height:100%;
  display:flex; align-items:center; justify-content:center;
}
.lb__stage img,.lb__stage video{
  max-width:min(94vw,1600px); max-height:84vh;
  width:auto; height:auto; object-fit:contain;
  opacity:0; transform:scale(.985);
  transition:opacity .45s var(--e-out),transform .6s var(--e-out);
}
.lb.is-ready .lb__stage img,.lb.is-ready .lb__stage video{ opacity:1; transform:none; }
/* a film is a black box while it buffers, not an empty one */
.lb__stage video{ background:#000; }

.lb__close{
  position:absolute; top:clamp(1rem,3vh,2rem); right:clamp(1rem,4vw,3rem);
  width:42px; height:42px; padding:0; background:none; border:0; cursor:pointer;
}
.lb__close span{
  position:absolute; left:9px; right:9px; top:20px; height:1px; background:var(--chalk);
  transition:background .3s var(--e-out);
}
.lb__close span:first-child{ transform:rotate(45deg); }
.lb__close span:last-child{ transform:rotate(-45deg); }
.lb__close:hover span{ background:var(--red); }

.lb__nav{
  position:absolute; top:50%; width:52px; height:52px; margin-top:-26px;
  background:none; border:0; cursor:pointer;
}
.lb__nav--prev{ left:clamp(.25rem,2vw,2rem); }
.lb__nav--next{ right:clamp(.25rem,2vw,2rem); }
.lb__nav::before{
  content:""; position:absolute; top:50%; left:50%;
  width:12px; height:12px; margin:-6px 0 0 -6px;
  border-top:1px solid var(--chalk); border-right:1px solid var(--chalk);
  transition:border-color .3s var(--e-out);
}
.lb__nav--next::before{ transform:rotate(45deg); }
.lb__nav--prev::before{ transform:rotate(-135deg); }
.lb__nav:hover::before{ border-color:var(--red); }
.lb__nav[hidden]{ display:none; }

.lb__count{
  position:absolute; left:0; right:0; bottom:clamp(1rem,3vh,2rem);
  text-align:center; color:var(--chalk-42);
}

/* --------------------------------------------------- 13d load more */
.more{ display:flex; justify-content:center; padding-top:clamp(2.5rem,6vh,4rem); }
.more[hidden]{ display:none; }
.shot[data-hidden],.tile[data-hidden]{ display:none; }

/* ------------------------------------------------------------- 14 footer */
.foot{ position:relative; z-index:2; background:var(--graphite); padding:0 var(--gutter) clamp(2rem,5vh,3.5rem); overflow:hidden; }
.foot__in{ position:relative; }
.foot__row{
  display:flex; align-items:center; justify-content:space-between;
  gap:1rem 2rem; flex-wrap:wrap;
  padding-top:clamp(1.4rem,3vh,2.2rem);
}
.foot__dom{ margin-inline:auto; }
.foot__lk{
  color:var(--steel);
  border-bottom:1px solid transparent;
  transition:color .3s var(--e-out), border-color .3s var(--e-out);
}
.foot__lk:hover{ color:var(--chalk); border-bottom-color:var(--red); }

.totop{
  display:inline-flex; align-items:center; gap:.65rem;
  background:none; border:0; cursor:pointer; padding:.4rem 0;
  font-family:var(--f-mono); font-size:var(--t-mono);
  letter-spacing:.12em; text-transform:uppercase;
  color:var(--chalk-64);
  transition:color .35s var(--e-out);
}
.totop:hover{ color:var(--chalk); }
.totop__ar{
  position:relative; width:1px; height:15px; background:var(--red);
  transition:transform .45s var(--e-out);
}
.totop__ar::after{
  content:""; position:absolute; top:0; left:-3px; width:7px; height:7px;
  border-top:1px solid var(--red); border-left:1px solid var(--red);
  transform:rotate(45deg);
}
.totop:hover .totop__ar{ transform:translateY(-3px); }
@media (max-width:640px){ .foot__dom{ margin-inline:0; } }

/* ------------------------------------------------------- reveal defaults */
.reveal{
  opacity:0; transform:translate3d(0,calc(var(--lift) * .68),0);
  transition:opacity var(--d-2) var(--e-out) calc(var(--i,0) * 90ms),
             transform var(--d-3) var(--e-rise) calc(var(--i,0) * 90ms);
}
.reveal.in{ opacity:1; transform:none; }
/* Tiles and stills rise on their own, with nothing drawn around them. The
   opacity is finished long before the movement is, so by the time a tile is
   readable it still has most of its travel left and is decelerating the whole
   way. What you notice is the settle, not the arrival. */
.tile.reveal,.shot.reveal{
  opacity:0; transform:translate3d(0,var(--lift),0);
  transition:opacity var(--rise-fade) var(--e-out) calc(var(--i,0) * var(--stagger)),
             transform var(--rise) var(--e-rise) calc(var(--i,0) * var(--stagger));
}
.tile.reveal.in,.shot.reveal.in{ opacity:1; transform:none; }

/* --------------------------------------------------- reduced motion */
/* -------------------------------------------------------------- 15 legal */
/* Long-form prose. One narrow column — legal text is only ever read if the
   line length lets it be read, so this sits well under the site's usual
   measure and leans on rhythm rather than decoration. */
.legal{ max-width:min(44rem,100%); }

.legal__meta{
  color:var(--steel); font-size:var(--t-mono);
  letter-spacing:.1em; text-transform:uppercase;
}

/* The controller block. Red rule because this is the part a reader is
   actually looking for when they open a privacy policy. */
.legal__ent{
  margin:clamp(1.75rem,4vh,2.75rem) 0;
  padding:clamp(1rem,2.2vh,1.4rem) 0 clamp(1rem,2.2vh,1.4rem) clamp(1rem,2.5vw,1.6rem);
  border-left:1px solid var(--red);
}
.legal__ent p{ margin:0; }
.legal__ent .legal__name{
  font-size:var(--t-h3); font-weight:600; letter-spacing:-.01em;
  margin-bottom:.45rem;
}
.legal__ent .mono{ color:var(--mist); line-height:1.75; }

.legal h2{
  font-size:var(--t-h3); font-weight:600; letter-spacing:-.01em;
  margin:clamp(2.25rem,5vh,3.25rem) 0 .85rem;
}
.legal h2:first-of-type{ margin-top:0; }

.legal p{
  font-size:var(--t-body); line-height:1.75; color:var(--mist);
  max-width:62ch; margin:0 0 1rem;
}
.legal p:last-child{ margin-bottom:0; }

/* Run-in label for the "When you send the form." style openers. */
.legal .legal__t{
  display:block; color:var(--chalk); font-weight:600;
  margin-bottom:.3rem;
}

.legal ul{ list-style:none; margin:0 0 1rem; padding:0; }
.legal li{
  position:relative; padding-left:1.35rem; margin-bottom:.7rem;
  font-size:var(--t-body); line-height:1.75; color:var(--mist); max-width:62ch;
}
.legal li::before{
  content:""; position:absolute; left:0; top:.72em;
  width:5px; height:5px; background:var(--red);
  transform:rotate(45deg);
}

.legal__back{
  display:inline-block; margin-top:clamp(2.5rem,6vh,4rem);
  color:var(--steel); border-bottom:1px solid transparent;
  transition:color .3s var(--e-out), border-color .3s var(--e-out);
}
.legal__back:hover{ color:var(--chalk); border-bottom-color:var(--red); }

/* Unfilled company details must be impossible to miss. legal-i18n.js writes
   them as [ BRACKETED CAPS ]; the page script tags those so they shout here
   rather than slipping quietly into a published legal document. */
.legal__ent .is-unset{
  color:var(--red); font-weight:600;
  border-bottom:1px dashed currentColor;
}

@media (prefers-reduced-motion:reduce){
  /* "Reduce", not "remove". The spec is about large movement — parallax,
     travel, looping — not about fades and colour. So we zero the movement
     tokens and stop anything that loops, and let every opacity and colour
     transition run at its normal speed. The site still feels considered;
     it just holds still.

     To ignore the setting entirely, delete this whole block. Visitors who
     set it usually have a reason, so that is not the default. */
  html:not(.force-motion){
    --lift:0px;
    --zoom:1; --zoom-tile:1; --push:1;
    --wm-hold:.15s; --wm-draw:.4s;
    --rise:.5s; --rise-fade:.5s;
    --stagger:40ms; --media-in:.12s; --meta-in:.2s;
  }

  /* anything that never stops on its own */
  html:not(.force-motion) .hero__grain,
  html:not(.force-motion) .caret{ display:none; }
  html:not(.force-motion) .cue__line::after,
  html:not(.force-motion) .tick__row{ animation:none !important; }
  html:not(.force-motion) .tick__row{
    transform:none !important;
    /* A held conveyor shows whatever fits the viewport and hides the rest,
       which is no way to show a client list. Wrap it into a centred block
       and drop the mirror set that only existed to close the loop. */
    flex-wrap:wrap; justify-content:center; width:auto;
    row-gap:clamp(.6rem,1.6vh,1.1rem);
  }
  html:not(.force-motion) .tick__set[aria-hidden="true"]{ display:none; }
  html:not(.force-motion) .tick__set{
    /* flex:none is what keeps the set at max-content while it scrolls;
       it has to shrink before flex-wrap can do anything. */
    flex:0 1 auto; flex-wrap:wrap; justify-content:center;
    column-gap:0; row-gap:clamp(.6rem,1.6vh,1.1rem);
  }
  /* the strip clips the conveyor; a wrapped block needs the room */
  html:not(.force-motion) .tick{ overflow:visible; }
  /* the final diamond separates this set from the next one as it loops;
     with no next set it is just a dangling mark at the end of a line */
  html:not(.force-motion) .tick__set > .tick__d:last-child{ display:none; }

  /* the wordmark skips the trace and simply is */
  html:not(.force-motion) .brandmark .wm{
    animation:none !important;
    fill:rgba(242,240,236,1); stroke-opacity:0; stroke-dashoffset:0;
  }
  html:not(.force-motion) .brandmark .dia{
    animation:none !important; opacity:1; transform:none;
  }
  html:not(.force-motion) .hdr__logo{ animation:none !important; opacity:1; }

  /* the hero reel is decorative, muted and looping — hold the poster instead.
     Tall screens get the vertical cut's own frame; same split as the reel. */
  html:not(.force-motion) .hero__video{ display:none; }
  html:not(.force-motion) .hero__media{
    background:url("../assets/video/hero-poster-portrait.jpg?v=515e91c2") center/cover no-repeat;
    transform:none !important;
  }
  @media (min-aspect-ratio:1/1){
    html:not(.force-motion) .hero__media{
      background-image:url("../assets/video/hero-poster.jpg?v=1b3cd8ae");
    }
  }
}