/* HOLYMILK — production studio site, local build, v2 (dark).
   One stylesheet, plain classes, no framework, so every rule maps onto a Webflow class later.
   Naming: block_element, modifiers as is-* combos (the Milkman site convention). */

:root{
  --bg:#0A0A09;          /* near black, the screen the films play on */
  --fg:#F4F2EC;          /* milk */
  --grey:#8E8B84;
  --line:rgba(244,242,236,.16);
  --paper:#F4F2EC;       /* the menu panel */
  --paper-ink:#121211;
  --pad:clamp(16px,2.2vw,32px);
  --inset-hero:clamp(12px,3.3vw,48px);
  --inset:var(--pad);    /* content lines up with the wordmark on every page */
  --head-h:clamp(72px,8.8vw,127px);
  --stick:92px;          /* sticky offset under the header once the descriptor has faded */
  --font:"Inter Tight",-apple-system,BlinkMacSystemFont,"Segoe UI",Helvetica,Arial,sans-serif;
  --ease:cubic-bezier(.23,1,.32,1);
  --ease-io:cubic-bezier(.76,0,.24,1);   /* slow in, slow out: the menu panel */
}
*,*::before,*::after{box-sizing:border-box}
html{background:var(--bg)}
body{margin:0;background:var(--bg);color:var(--fg);font-family:var(--font);font-size:16px;line-height:1.35;
  -webkit-font-smoothing:antialiased;-moz-osx-font-smoothing:grayscale;text-rendering:optimizeLegibility}
a{color:inherit;text-decoration:none}
img,video{display:block;max-width:100%}
h1,h2,h3,p{margin:0;font-weight:400}
button{font:inherit;color:inherit}
::selection{background:var(--fg);color:var(--bg)}

.container{padding-left:var(--pad);padding-right:var(--pad)}
.u-grey{color:var(--grey)}
[hidden]{display:none!important}
.u-sr{position:absolute;width:1px;height:1px;overflow:hidden;clip:rect(0 0 0 0);white-space:nowrap}

/* ---------- smooth scroll (Lenis): its base rules, so no extra stylesheet is loaded ---------- */
html.lenis,html.lenis body{height:auto}
.lenis.lenis-stopped{overflow:clip}
.lenis [data-lenis-prevent]{overscroll-behavior:contain}
.lenis.lenis-smooth iframe{pointer-events:none}

/* ---------- page wrapper sits above the fixed footer, which is revealed at the end ---------- */
.page{position:relative;z-index:2;background:var(--bg)}
.footer_spacer{height:var(--footer-h,420px)}

/* ---------- header: the logo left, links right; solid and compact once the page
   scrolls so text never runs under it, and dark on the paper while the menu is open ---------- */
.nav{position:fixed;inset:0 0 auto 0;z-index:60;height:var(--head-h);pointer-events:none;color:var(--fg);
  transition:height .45s var(--ease),background-color .3s ease,color .3s ease}
.is-scrolled .nav{height:76px;background:var(--bg)}
/* set by the script once the panel has passed under the header (and cleared on the way back up) */
.is-menu-dark .nav{background:transparent;color:var(--paper-ink)}
.nav_wrap{display:flex;align-items:center;justify-content:space-between;padding-top:26px;transition:padding .45s var(--ease)}
.is-scrolled .nav_wrap{padding-top:9px}
.nav a,.nav button{pointer-events:auto}
/* the logo is one link: the horse, a rule and the three descriptor lines, the horse a touch lower than the
   text and the rule as tall as the text. The horse is white on the dark page and takes the ink of the bar
   over the open menu's paper (film pages stay white: there the whole bar is in difference). Once the
   page scrolls the rule and the lines fade and the horse sits a size smaller in the compact bar. */
.nav_brand{display:flex;align-items:center}
.nav_logo{display:flex;align-items:center;gap:22px;color:#fff;transform-origin:left center;
  transition:transform .45s var(--ease),color .3s ease}
.is-scrolled .nav_logo{transform:scale(.8)}
html:not(.is-film).is-menu-dark .nav_logo{color:inherit}
.nav_mark{display:block;flex:0 0 auto;height:52px;width:auto}
.nav_rule{flex:0 0 auto;align-self:stretch;width:1px;background:currentColor;transition:opacity .4s ease}
.nav_desc{font-size:16px;line-height:1.2;text-transform:uppercase;color:var(--grey);letter-spacing:-.01em;white-space:nowrap;
  transition:opacity .4s ease,transform .4s ease}
.is-scrolled .nav_rule,.is-scrolled .nav_desc{opacity:0;pointer-events:none}
.is-scrolled .nav_desc{transform:translateY(-6px)}
.nav_right{display:flex;align-items:center;gap:clamp(20px,3vw,44px)}
.nav_links{display:flex;gap:clamp(18px,2.6vw,40px)}
.nav_link{font-size:16px;text-transform:uppercase;letter-spacing:-.01em;position:relative}
.nav_link::after{content:"";position:absolute;left:0;right:0;bottom:-3px;height:1px;background:currentColor;
  transform:scaleX(0);transform-origin:right;transition:transform .45s var(--ease)}
.nav_link:hover::after,.nav_link.is-current::after{transform:scaleX(1);transform-origin:left}
.nav_badge{width:70px;height:42px;display:block}
.nav_menu-btn{background:none;border:0;padding:0;cursor:pointer;font-size:16px;line-height:1;text-transform:uppercase;letter-spacing:-.01em;
  min-width:3.6em;text-align:right}

/* ---------- menu: a paper panel that drops from the top over a dimmed page ---------- */
.menu{position:fixed;inset:0;z-index:50;visibility:hidden;transition:visibility 0s linear 1s}
.menu.is-open{visibility:visible;transition:none}
.menu_dim{position:absolute;inset:0;background:rgba(0,0,0,.62);opacity:0;transition:opacity .9s ease;cursor:pointer}
.menu.is-open .menu_dim{opacity:1}
.menu_panel{position:absolute;inset:0 0 auto 0;background:var(--paper);color:var(--paper-ink);
  transform:translateY(-100%);transition:transform 1s var(--ease-io);
  display:grid;grid-template-columns:repeat(12,minmax(0,1fr));column-gap:var(--pad);
  padding:calc(var(--head-h) + clamp(16px,3vw,48px)) var(--pad) clamp(56px,6vw,88px)}
.menu.is-open .menu_panel{transform:none}
.menu_films{grid-column:1 / span 7}
.menu_label{font-size:14px;color:#77746d;margin-bottom:10px}
.menu_film{display:block;font-size:clamp(24px,2.1vw,30px);line-height:1.34;letter-spacing:-.01em}
.menu_title{color:#86847e;transition:color .25s ease}   /* 3.3:1 on the paper, enough for large text */
.menu_film:hover .menu_title{color:var(--paper-ink)}
/* contents: the columns fade in and every line rises into place, one after the other, once the panel lands */
.menu_films,.menu_side{opacity:0;transition:opacity .3s ease}
.menu.is-open .menu_films,.menu.is-open .menu_side{opacity:1;transition:opacity .8s ease .45s}
.menu_film,.menu_group{translate:0 36px;transition:opacity .2s ease,translate .4s ease}
.menu.is-open .menu_film,.menu.is-open .menu_group{translate:0 0;
  transition:opacity .2s ease,translate 1.1s var(--ease) calc(.45s + var(--d,0) * 55ms)}
@media (hover:hover){.menu_list:hover .menu_film{opacity:.4}.menu_list .menu_film:hover{opacity:1}}
/* film switch, after prettybird: a group row (20px) and a type row (14px), light grey until active;
   a 2px line grows under the hovered one and stays under the active one */
.switch{margin-bottom:clamp(28px,2.6vw,40px)}
/* with the switch on, the side column starts one row lower: its label level with the type row
   (the group row is 20px x 1.3, plus the 8px gap above the type row) */
.menu_panel.has-switch .menu_side{padding-top:calc(20px * 1.3 + 8px)}
.switch_row{display:flex;flex-wrap:wrap;column-gap:19px;row-gap:6px}
.switch_row.is-sub{column-gap:15px;margin-top:8px}
.switch_tab,.switch_sub{position:relative;background:none;border:0;padding:0;color:#999;cursor:pointer;line-height:1.3;transition:color .3s ease}
.switch_tab{font-size:20px}
.switch_sub{font-size:14px}
.switch_tab::after,.switch_sub::after{content:"";position:absolute;left:0;bottom:-2px;width:0;border-bottom:2px solid currentColor;
  transition:width .3s cubic-bezier(.4,0,.2,1)}
.switch_tab:hover,.switch_sub:hover,.switch_tab[aria-pressed="true"],.switch_sub[aria-pressed="true"]{color:var(--paper-ink)}
.switch_tab:hover::after,.switch_sub:hover::after,.switch_tab[aria-pressed="true"]::after,.switch_sub[aria-pressed="true"]::after{width:100%}
.menu_film.is-in{animation:switch-in .45s var(--ease) both}
@keyframes switch-in{from{opacity:0;transform:translateY(10px)}to{opacity:1;transform:none}}
.menu_side{grid-column:9 / span 4;display:flex;flex-direction:column;gap:32px}
.menu_group a{display:block;font-size:20px;line-height:1.5;letter-spacing:-.01em}
.menu_close{position:absolute;left:50%;bottom:0;transform:translate(-50%,50%) scale(.6);opacity:0;z-index:2;
  width:56px;height:56px;border-radius:50%;background:var(--paper);border:0;cursor:pointer;
  transition:transform .3s ease,opacity .2s ease}
.menu.is-open .menu_close{transform:translate(-50%,50%) scale(1);opacity:1;transition:transform .7s var(--ease) .7s,opacity .4s ease .7s}
.menu_close::before,.menu_close::after{content:"";position:absolute;left:50%;top:50%;width:22px;height:2px;background:var(--paper-ink);border-radius:1px}
.menu_close::before{transform:translate(-50%,-50%) rotate(45deg)}
.menu_close::after{transform:translate(-50%,-50%) rotate(-45deg)}


/* ---------- home type scale ---------- */
.statement{font-size:clamp(22px,2.1vw,30px);line-height:1.12;text-transform:uppercase;letter-spacing:-.012em}
.display{font-size:clamp(38px,4.6vw,68px);line-height:1.02;text-transform:uppercase;letter-spacing:-.03em}
.label{font-size:16px;letter-spacing:-.01em;color:var(--grey)}

/* ---------- hero: one statement under the header ---------- */
.hero{padding-top:calc(var(--head-h) + 16px);padding-bottom:48px}
.hero .statement{max-width:18.5em}

/* ---------- reel: sticky under the header, grows from a band to near full height as you scroll ---------- */
.reel{height:220vh;position:relative;padding-top:calc(var(--head-h) + 16px)}   /* clear of the descriptor lines until it sticks */
.reel_sticky{position:sticky;top:var(--stick)}
.reel_frame{position:relative;height:var(--reel-h,31vw);overflow:hidden;background:#000;will-change:height}
.reel_frame video{position:absolute;inset:0;width:100%;height:100%;object-fit:cover}

/* ---------- what we make (full-screen) ---------- */
.make{min-height:100vh;display:flex;align-items:center;padding-top:80px;padding-bottom:80px}
.make_grid{display:grid;grid-template-columns:repeat(12,1fr);column-gap:var(--pad);width:100%}
.make_left{grid-column:1 / span 7}
.make_left .display{max-width:12.5em}
.make_lead{margin-top:clamp(20px,2.2vw,34px);max-width:27em}
.make_right{grid-column:8 / span 5;padding-top:.35em}

/* ---------- contact form: a two-tone heading, the fields as boxes in two columns, a budget dropdown and a
   filled Submit with an arrow ---------- */
.talk_title{font-size:clamp(34px,4.6vw,68px);line-height:1.04;letter-spacing:-.03em;font-weight:500}
.talk_title span{display:block;color:var(--grey)}
.form{margin-top:clamp(14px,2vw,30px)}
.form_grid{display:grid;grid-template-columns:1fr 1fr;gap:clamp(26px,3vw,40px) 24px}
.field{display:block;min-width:0}
.field_label{display:block;margin-bottom:14px;font-size:17px;letter-spacing:-.01em}
.field_input{display:block;width:100%;height:64px;padding:0 22px;border:1px solid rgba(244,242,236,.28);border-radius:6px;
  background:transparent;color:var(--fg);font:inherit;font-size:18px;letter-spacing:-.01em;outline:none;
  -webkit-appearance:none;appearance:none;transition:border-color .25s ease,background-color .25s ease}
.field_input::placeholder{color:var(--grey);opacity:1}
.field_input:hover{border-color:rgba(244,242,236,.55)}
.field_input:focus-visible{border-color:var(--fg);background:rgba(244,242,236,.05)}
.field_select{position:relative;display:block}
.field_select select{padding-right:54px;cursor:pointer}
.field_select select:invalid{color:var(--grey)}          /* nothing chosen yet: reads as a placeholder */
.field_select option{color:#121211;background:#fff}
.field_select svg{position:absolute;right:22px;top:50%;width:16px;height:16px;transform:translateY(-50%);pointer-events:none;
  fill:none;stroke:currentColor;stroke-width:1.5}
.form_submit{display:flex;align-items:center;justify-content:space-between;width:calc(50% - 12px);height:76px;
  margin-top:clamp(32px,4vw,52px);padding:0 30px;border:0;border-radius:6px;background:var(--fg);color:var(--bg);
  font:inherit;font-size:19px;letter-spacing:-.01em;transition:background-color .3s ease}
.form_submit:hover{background:#fff}
.form_submit svg{width:16px;height:16px;fill:none;stroke:currentColor;stroke-width:1.6;transition:transform .45s var(--ease)}
.form_submit:hover svg{transform:translate(3px,-3px)}
.form_note{margin-top:18px;color:var(--grey)}
@media (max-width:767px){
  .form_grid{grid-template-columns:1fr}
  .form_submit{width:100%}
}

/* ---------- loader, once per visit (after betteroff.studio): the horse dim on a dark sheet, a white horse
   over it that is uncovered from the bottom up as the page loads (--p runs 0 to 1); then the sheet is
   wiped away upward. Without script, on later pages of the visit and, as a failsafe, after eight
   seconds it is simply not there. ---------- */
.loader{position:fixed;inset:0;z-index:100;display:flex;align-items:center;justify-content:center;background:var(--bg);
  clip-path:inset(0);transition:clip-path .9s var(--ease-io);animation:loader-failsafe 0s 8s forwards}
.is-seen .loader,.loader.is-gone{display:none}
.is-loaded .loader{clip-path:inset(0 0 100% 0)}
.loader_mark{position:relative;width:clamp(130px,15vw,210px);color:#fff}
.loader_horse{display:block;width:100%;height:auto}
.loader_horse.is-dim{opacity:.2}
.loader_horse.is-fill{position:absolute;inset:0;clip-path:inset(calc((1 - var(--p,0)) * 100%) 0 0 0);transition:clip-path .45s ease-out}
@keyframes loader-failsafe{to{visibility:hidden}}
@media (prefers-reduced-motion:reduce){
  .loader{transition:opacity .3s ease}
  .is-loaded .loader{clip-path:inset(0);opacity:0}
}

/* ---------- cookie notice: a white bar in the bottom right corner until Accept is clicked ---------- */
.cookie{position:fixed;right:var(--pad);bottom:var(--pad);z-index:58;display:flex;align-items:center;justify-content:space-between;gap:40px;
  width:min(420px,calc(100% - 2 * var(--pad)));padding:15px 20px;border-radius:8px;background:#fff;color:#121211;
  font-size:17px;line-height:1.2;letter-spacing:-.02em;opacity:0;transform:translateY(12px);
  transition:opacity .4s ease,transform .6s var(--ease)}
.cookie[hidden]{display:none}
.cookie.is-in{opacity:1;transform:none}
.cookie_text{margin:0}
.cookie_accept{padding:0 0 1px;border:0;border-bottom:1px solid currentColor;background:none;color:inherit;font:inherit;cursor:pointer}
.is-watching .cookie{opacity:0;pointer-events:none}

/* ---------- cascading slider (Osmo Supply), a test under the reel: three frames next to each other; a
   frame expands on hover and the wide one plays its loop. The script leaves one gap before the first frame, so the list is two gaps
   narrower than its clipping parent and starts one gap to the left: the outer frames then sit flush
   with the page edges. The height makes the wide frame 16:9 (the script's activeWidth per breakpoint). ---------- */
[data-cascading-slide]{--clip:0;--radius:0px}
/* one gap for everything: between the frames (the script reads it from the list, which inherits it)
   and between the reel above and the slider */
.cascade{--gap:8px;padding-top:var(--gap);padding-bottom:clamp(24px,3vw,48px)}
.cascading-slider{width:100%;position:relative}
.cascading-slider__collection{width:100%;overflow:hidden;overflow:clip}   /* clip: focus on a link in a parked slide must not scroll the row */
.cascading-slider__list{position:relative;width:calc(100% - 2 * var(--gap));margin-left:calc(-1 * var(--gap));aspect-ratio:16 / 5.4}
.cascading-slider__item{color:#fff;cursor:pointer;will-change:transform,clip-path;
  clip-path:inset(0px calc(var(--clip) * 1px) round var(--radius));-webkit-user-select:none;user-select:none;
  height:100%;position:absolute;inset:0% auto auto 0%}
.cascading-slider__item[data-status="active"]{cursor:default}
.cascading-slider__item-inner{width:100%;height:100%;position:relative;overflow:hidden}
.cascading-slider__item-bg{z-index:0;position:absolute;inset:0%;background:#1a1a18}
.cascading-slider__img,.cascading-slider__video{object-fit:cover;width:100%;height:100%;position:absolute;inset:0%}
.cascading-slider__video{opacity:0;transition:opacity .45s ease}
.cascading-slider__item.is-playing .cascading-slider__video{opacity:1}
/* the name and title stay inside the wide frame, small, on one line along its bottom edge (client and
   title left, type and year right), and rise in once the frame has expanded */
.cascading-slider__item-content{z-index:2;background-image:linear-gradient(0deg,#0009,#0000);padding:56px 18px 14px;
  position:absolute;inset:auto 0% 0%;display:flex;flex-wrap:wrap;align-items:baseline;column-gap:.4em;
  font-size:15px;line-height:1.3;letter-spacing:-.01em;pointer-events:none}
.cascading-slider__h,.cascading-slider__link{opacity:0;visibility:hidden;transform:translate(0,.25em);
  transition:all .3s cubic-bezier(.645,.045,.355,1);transition-delay:0ms}
.cascading-slider__h{margin:0;font-size:inherit;font-weight:700;line-height:inherit;text-transform:uppercase}
.cascading-slider__link{flex:1 1 auto;display:flex;flex-wrap:wrap;justify-content:space-between;column-gap:16px}
.cascading-slider__link b{font-weight:400}
.cascading-slider__link b::before{content:"— "}
.cascading-slider__link span{opacity:.78;text-transform:uppercase;white-space:nowrap}
[data-cascading-slide][data-status="active"] .cascading-slider__h,
[data-cascading-slide][data-status="active"] .cascading-slider__link{transition-delay:400ms;opacity:1;visibility:visible;transform:translate(0px,0em)}
[data-cascading-slide][data-status="active"] .cascading-slider__link{pointer-events:auto}
@media (max-width:767px){.cascading-slider__item-content{padding:40px 12px 10px;font-size:13px}}
/* sound: a round pill in the top right corner of the wide frame; filled while the sound is on */
.cascading-slider__sound{position:absolute;z-index:3;top:16px;right:16px;font-size:17px;background:rgba(10,10,9,.3);cursor:pointer;
  opacity:0;visibility:hidden;pointer-events:none;transition:opacity .3s ease,visibility .3s,background-color .35s ease,color .35s ease}
.cascading-slider__sound svg{width:1.3em;height:1.3em;stroke-width:1.6;stroke-linecap:round}
.cascading-slider__sound:hover,.cascading-slider__sound[aria-pressed="true"]{background:#fff;color:#111}
[data-cascading-slide][data-status="active"] .cascading-slider__sound{opacity:1;visibility:visible;pointer-events:auto;transition-delay:400ms}
@media (max-width:767px){.cascading-slider__sound{top:10px;right:10px}}
@media (max-width:767px){.cascading-slider__list{aspect-ratio:16 / 6.3}}
@media (max-width:479px){.cascading-slider__list{aspect-ratio:16 / 7.02}}

/* ---------- selected work: staggered tiles, the loop plays on hover ---------- */
.work{padding-top:40px;padding-bottom:120px}
.work_grid{display:grid;grid-template-columns:repeat(12,1fr);column-gap:var(--pad)}
.work_head{grid-column:1 / span 3;position:relative}
.work_head-in{position:sticky;top:var(--stick);display:flex;gap:18px;align-items:flex-start}
.work_title{font-size:clamp(28px,2.9vw,44px);line-height:1;text-transform:uppercase;letter-spacing:-.03em}
.work_dash{width:42px;height:1px;background:var(--fg);margin-top:.55em;flex:0 0 auto}
.work_list{grid-column:4 / span 9;display:flex;flex-direction:column;gap:clamp(64px,8vw,120px)}

.tile{display:block;position:relative}
.tile.is-w100{width:100%}
.tile.is-w60{width:58%}
.tile.is-w75{width:74%;margin-left:auto}
.tile.is-w50{width:50%;margin-left:14%}
.tile_media{position:relative;overflow:hidden;background:#1a1a18;aspect-ratio:16/9}
.tile.is-portrait .tile_media{aspect-ratio:4/5}
.tile_media img,.tile_media video{position:absolute;inset:0;width:100%;height:100%;object-fit:cover}
.tile_media img{transition:transform 1.1s var(--ease),opacity .5s ease}
.tile_media video{opacity:0;transition:opacity .45s ease}
.tile.is-playing .tile_media video{opacity:1}
.tile:hover .tile_media img{transform:scale(1.03)}
/* every tile carries the client's name large, hanging over the bottom edge of the film onto the page,
   with the title and type on a second line set in from it (the prettybird manner). Sizes follow the
   tile's own width; a shade in the film keeps the upper half of the name readable on a bright frame. */
.tile{container-type:inline-size}
.tile_media::after{content:"";position:absolute;inset:45% 0 0;pointer-events:none;
  background:linear-gradient(to bottom,rgba(10,10,9,0),rgba(10,10,9,.6))}
.tile_over{position:relative;z-index:1;padding:0 4cqw;color:#fff;text-transform:uppercase;pointer-events:none}
.tile_client{display:block;margin-top:-.56em;font-size:clamp(30px,8.6cqw,104px);line-height:.95;letter-spacing:-.035em}
.tile_line{display:block;margin-top:.9cqw;padding-left:11cqw;font-size:clamp(13px,2.5cqw,30px);line-height:1.15;letter-spacing:-.01em}
.tile_line b{font-weight:700;margin-right:.35em}
.tile_meta{opacity:.78;white-space:nowrap}

/* ---------- studio snippet ---------- */
.studio-cta{padding-top:40px;padding-bottom:140px}
.studio-cta_grid{display:grid;grid-template-columns:repeat(12,1fr);column-gap:var(--pad)}
.studio-cta_body{grid-column:4 / span 7}
.studio-cta_body .body-l{margin-bottom:28px}

/* ---------- footer: the paper of the menu. Both bases with their local time, the group line and Follow.
   Fixed behind the page while it fits the screen (see sourmilk.js). ---------- */
.footer{position:fixed;left:0;right:0;bottom:0;z-index:1;background:var(--paper);color:var(--paper-ink);
  padding-top:clamp(48px,6vw,88px);padding-bottom:24px}
.footer.is-static{position:relative}
.footer_grid{display:grid;grid-template-columns:repeat(12,minmax(0,1fr));column-gap:var(--pad);row-gap:clamp(32px,4vw,48px)}
.footer_col{font-size:16px;line-height:1.5;font-weight:500;color:var(--paper-ink)}
.footer_col b{display:block;font-weight:500;color:#77746d;font-size:14px;margin-bottom:6px}
.footer_col a:hover{color:var(--paper-ink)}
.footer_col.is-c a{border-bottom:1px solid rgba(18,18,17,.35)}
.footer_col.is-a{grid-column:1 / span 3}
.footer_col.is-b{grid-column:4 / span 3}
.footer_col.is-c{grid-column:7 / span 3}
.footer_col.is-d{grid-column:10 / span 3}
.footer_note{display:block;margin-bottom:10px}
.footer_mail{display:table;margin-top:10px;border-bottom:1px solid rgba(18,18,17,.35)}
.footer_time{display:block;margin-top:10px;font-size:13px;font-weight:500;letter-spacing:.02em;text-transform:uppercase;color:#77746d;font-variant-numeric:tabular-nums}
.footer_time:empty{display:none}
.footer_base{grid-column:1 / -1;display:flex;justify-content:space-between;padding-top:18px;border-top:1px solid rgba(18,18,17,.16);
  font-size:13px;font-weight:500;text-transform:uppercase;color:#77746d}
.footer_top:hover{color:var(--paper-ink)}

/* ---------- cursor ---------- */
.cursor{position:fixed;left:0;top:0;z-index:60;pointer-events:none;width:0;height:0;mix-blend-mode:difference}
.cursor_dot{position:absolute;width:10px;height:10px;margin:-5px 0 0 -5px;border-radius:50%;background:#fff;
  display:flex;align-items:center;justify-content:center;
  transition:width .35s var(--ease),height .35s var(--ease),margin .35s var(--ease)}
.cursor_label{font-size:12px;letter-spacing:.06em;color:#000;opacity:0;transition:opacity .2s ease}
.cursor.is-play .cursor_dot{width:92px;height:92px;margin:-46px 0 0 -46px}
.cursor.is-play .cursor_label{opacity:1;transition-delay:.1s}
.cursor.is-hidden .cursor_dot{width:0;height:0;margin:0}
.has-cursor,.has-cursor a,.has-cursor summary,.has-cursor button{cursor:none}

/* ---------- page heads (work, studio, contact) ---------- */
.page-head{display:grid;grid-template-columns:repeat(12,minmax(0,1fr));column-gap:var(--pad);align-items:end;align-items:last baseline;
  padding:calc(var(--head-h) + clamp(24px,4vw,64px)) var(--inset) clamp(48px,5vw,80px)}
.page-head_title{grid-column:1 / span 3;white-space:nowrap;font-size:clamp(44px,7vw,100px);line-height:.95;text-transform:uppercase;letter-spacing:-.035em}
/* the title and the lead share one row; the lead starts on the second column of the index below (Film)
   and sits on the baseline of the title */
.page-head_lead{grid-column:4 / span 6;font-size:clamp(18px,1.6vw,23px);line-height:1.4;letter-spacing:-.01em;color:rgba(244,242,236,.7)}

/* ---------- work index ---------- */
.index{padding:0 var(--inset) clamp(96px,10vw,160px)}
.index_head,.index_row{display:grid;grid-template-columns:3fr 5fr 3fr 1fr;column-gap:var(--pad);align-items:baseline}
.index_head{font-size:13px;text-transform:uppercase;color:var(--grey);padding-bottom:12px}
.index_row{padding:22px 0;border-top:1px solid var(--line);font-size:clamp(18px,1.8vw,26px);letter-spacing:-.015em;transition:color .25s ease}
.index_list:hover .index_row{color:#57554f}
.index_list .index_row:hover{color:var(--fg)}
.index_row:last-child{border-bottom:1px solid var(--line)}
.index_client{font-weight:700;text-transform:uppercase}
.index_type,.index_year{font-size:15px;text-transform:uppercase}
.index_year{text-align:right}
.float{position:fixed;left:0;top:0;z-index:30;width:min(34vw,480px);aspect-ratio:16/9;pointer-events:none;overflow:hidden;background:#000;
  opacity:0;transform:translate3d(-50%,-50%,0) scale(.92);transition:opacity .3s ease,transform .45s var(--ease)}
.float.is-on{opacity:1;transform:translate3d(-50%,-50%,0) scale(1)}
.float video{width:100%;height:100%;object-fit:cover}

/* ---------- film page ---------- */
/* film hero: the film fills the screen, the wordmark over it in difference; Play loads the real film and the
   loop, the play pills and the header fade out slowly (is-played / is-watching, set by the script). */
.is-film .nav,.is-film.is-scrolled .nav,.is-film.is-menu-dark .nav{background:transparent;color:#fff;mix-blend-mode:difference}
.is-film .nav{transition:height .45s var(--ease),opacity 1.6s ease}
.is-film .nav_desc{color:#fff}
.is-watching .nav{opacity:0}
.is-watching .nav a,.is-watching .nav button{pointer-events:none}
.film-hero{position:relative;height:100svh;min-height:420px;background:#000;overflow:hidden}
.film-hero_loop,.film-hero_player,.film-hero_player iframe,.film-hero_player video{position:absolute;inset:0;width:100%;height:100%;border:0}
.film-hero_loop{object-fit:cover;transition:opacity 1.6s ease}
.film-hero_player{background:#000;opacity:0;transition:opacity 1.6s ease 0.4s}
.film-hero_player video{object-fit:cover}   /* the film fills the screen, as the loop does */
.film-hero_play{position:absolute;inset:0;width:100%;height:100%;padding:0;background:none;border:0;cursor:pointer}
/* play control: the film's title, its running time and a round play, as pills, fixed in the centre.
   Outlined in difference at rest; they fill white while the pointer is on the film. */
.film-hero_ui{position:absolute;left:50%;top:50%;display:flex;flex-wrap:wrap;justify-content:center;align-items:center;gap:8px;
  max-width:calc(100% - 2 * var(--pad));pointer-events:none;mix-blend-mode:difference;
  transform:translate(-50%,-50%);transition:opacity 1.6s ease}
.film-hero:hover .film-hero_ui{mix-blend-mode:normal}
.pill{display:inline-flex;align-items:center;height:2.5em;padding:0 .95em;border:1.5px solid #fff;border-radius:999px;color:#fff;
  font-size:clamp(15px,1.35vw,20px);letter-spacing:-.01em;white-space:nowrap;transition:background-color .35s ease,color .35s ease}
.pill.is-title{font-weight:700}
.pill.is-time{font-variant-numeric:tabular-nums}
.pill.is-round{width:2.5em;padding:0;justify-content:center}
.pill svg{width:.85em;height:.85em;fill:none;stroke:currentColor;stroke-width:2;stroke-linejoin:round}
.film-ctrl .pill svg{width:1.35em;height:1.35em;stroke-width:1.6;stroke-linecap:round}
.film-hero:hover .film-hero_ui .pill{background:#fff;color:#111}
.is-played .film-hero_loop,.is-played .film-hero_ui{opacity:0}
/* the film's own controls, in the same pills: tinted glass so they read on light and dark footage; each fills
   white under the pointer. A transparent layer over the film takes the clicks (play/pause) and the pointer. */
.film-hero_player iframe{pointer-events:none}
.film-ctrl{position:absolute;inset:0;z-index:3;opacity:0;transition:opacity .8s ease .6s}
.film-ctrl.is-on{opacity:1}
.film-ctrl_hit{position:absolute;inset:0;cursor:pointer}
.film-ctrl_bar{position:absolute;left:50%;bottom:clamp(20px,3vw,40px);transform:translateX(-50%);width:calc(100% - 2 * var(--pad));
  display:flex;align-items:center;gap:8px;transition:opacity .5s ease,transform .5s var(--ease)}
.film-ctrl.is-idle .film-ctrl_bar{opacity:0;transform:translate(-50%,10px);pointer-events:none}
.film-ctrl.is-idle .film-ctrl_hit{cursor:none}
.is-ctrl-idle .cursor{opacity:0}
.film-ctrl .pill{flex:0 0 auto;background:rgba(10,10,9,.36);-webkit-backdrop-filter:blur(10px);backdrop-filter:blur(10px);cursor:pointer}
.film-ctrl .pill:hover,.film-ctrl .pill:focus-visible{background:#fff;color:#111;outline:none}
.film-ctrl .pill.is-time{cursor:default}
.film-ctrl .pill.is-time:hover{background:rgba(10,10,9,.36);color:#fff}
/* the timeline: a slim pill (a little taller under the pointer) inside a full-height hit area */
.film-ctrl .pill.is-track{flex:1 1 auto;position:relative;padding:0;border:0;background:none;-webkit-backdrop-filter:none;backdrop-filter:none;
  touch-action:none;filter:drop-shadow(0 0 1px rgba(0,0,0,.35))}
.film-ctrl .pill.is-track:hover,.film-ctrl .pill.is-track:focus-visible{background:none}
.film-ctrl .pill.is-track::before{content:"";position:absolute;left:0;right:0;top:50%;height:8px;margin-top:-4px;border-radius:999px;
  border:1px solid rgba(255,255,255,.85);background:rgba(10,10,9,.3);-webkit-backdrop-filter:blur(10px);backdrop-filter:blur(10px);
  box-sizing:border-box;transition:height .2s ease,margin .2s ease}
.film-ctrl_fill{position:absolute;left:0;top:50%;height:8px;margin-top:-4px;width:0;min-width:8px;border-radius:999px;background:#fff;transition:height .2s ease,margin .2s ease}
.film-ctrl .pill.is-track:hover::before,.film-ctrl .pill.is-track:hover .film-ctrl_fill,
.film-ctrl .pill.is-track:focus-visible::before,.film-ctrl .pill.is-track:focus-visible .film-ctrl_fill{height:12px;margin-top:-6px}

.is-played .film-hero_player{opacity:1}
.is-played .film-hero_play{pointer-events:none}
/* film text and credits: the sentence large in the right column, then label and value rows on thin lines */
.film-body{display:grid;grid-template-columns:repeat(12,minmax(0,1fr));column-gap:var(--pad);padding:clamp(56px,7vw,112px) var(--inset) clamp(64px,7vw,112px)}
.film-body_text{grid-column:4 / span 7;font-size:clamp(22px,2.2vw,32px);line-height:1.15;letter-spacing:-.015em}
.film-rows{grid-column:2 / -1;display:grid;grid-template-columns:subgrid;margin:clamp(64px,8vw,128px) 0 0}
.film-rows div{grid-column:1 / -1;display:grid;grid-template-columns:subgrid;align-items:baseline;padding:14px 0;border-top:1px solid var(--line)}
.film-rows div:last-child{border-bottom:1px solid var(--line)}
.film-rows dt{grid-column:1 / span 2;font-size:15px;color:var(--grey)}
.film-rows dd{grid-column:3 / -1;margin:0;font-size:clamp(18px,1.5vw,22px)}
.stills{display:grid;grid-template-columns:repeat(12,1fr);column-gap:var(--pad);row-gap:var(--pad);padding:0 var(--inset) clamp(96px,10vw,160px)}
.stills img{width:100%;height:100%;object-fit:cover;background:#111}
.stills .s1{grid-column:1 / span 7;aspect-ratio:4/3}
.stills .s2{grid-column:8 / span 5;aspect-ratio:4/5}
.stills .s3{grid-column:1 / span 5;aspect-ratio:4/5}
.stills .s4{grid-column:6 / span 7;aspect-ratio:4/3}
.stills .s5{grid-column:3 / span 8;aspect-ratio:16/9}
/* statements between the stills: large capitals, set in from the left */
.stills_note{grid-column:3 / span 7;padding:clamp(56px,8vw,140px) 0;font-size:clamp(26px,2.8vw,44px);line-height:1.08;
  text-transform:uppercase;letter-spacing:-.02em}

/* end of a film page: back to the index on the left, next and previous film on the right */
.film-nav{display:grid;grid-template-columns:repeat(12,minmax(0,1fr));column-gap:var(--pad);align-items:start;
  padding:clamp(48px,6vw,96px) var(--inset) clamp(120px,14vw,220px)}
.film-nav_back{grid-column:1 / span 6;font-size:clamp(30px,3.4vw,52px);line-height:1;text-transform:uppercase;letter-spacing:-.03em;
  color:var(--grey);transition:color .3s ease}
.film-nav_back:hover{color:var(--fg)}
.film-nav_steps{grid-column:8 / -1;display:grid;gap:clamp(36px,4vw,64px)}
.film-nav_step{display:grid;grid-template-columns:auto 1fr;column-gap:clamp(16px,1.6vw,24px);align-items:start}
.film-nav_arrow{width:clamp(36px,3.2vw,56px);height:auto;margin-top:calc(clamp(30px,3.4vw,52px) * .36);fill:none;stroke:currentColor;stroke-width:1.5;transition:transform .4s var(--ease)}
.film-nav_step:hover .film-nav_arrow{transform:translateX(6px)}
.film-nav_step:last-child:hover .film-nav_arrow{transform:translateX(-6px)}
.film-nav_label{display:block;font-size:clamp(30px,3.4vw,52px);line-height:1;text-transform:uppercase;letter-spacing:-.03em}
.film-nav_step small{display:block;margin-top:8px;font-size:clamp(15px,1.3vw,20px);color:var(--grey)}

/* ---------- studio / contact ---------- */
.split{display:grid;grid-template-columns:repeat(12,1fr);column-gap:var(--pad);margin:0 var(--inset);padding:clamp(40px,4vw,56px) 0 clamp(64px,7vw,104px);border-top:1px solid var(--line)}
.split_label{grid-column:1 / span 3;font-size:14px;color:var(--grey);text-transform:uppercase;letter-spacing:.02em}
.split_body{grid-column:4 / span 8;display:grid;gap:26px}
.body-l{font-size:clamp(18px,1.6vw,23px);line-height:1.4;letter-spacing:-.01em;color:rgba(244,242,236,.85)}
.pair{display:grid;grid-template-columns:1fr 1fr;column-gap:var(--pad);row-gap:32px}
.pair.is-three{grid-template-columns:repeat(3,minmax(0,1fr))}
.pair_img{width:100%;aspect-ratio:4/3;object-fit:cover;background:#1a1a18;margin-bottom:18px}
/* locations one under the other: the image keeps its half-width size, the text sits beside it */
.pair.is-stack{grid-template-columns:1fr;row-gap:clamp(40px,4vw,64px)}
.pair.is-stack > div{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));grid-template-rows:auto 1fr;column-gap:var(--pad)}
.pair.is-stack .pair_img{grid-column:1;grid-row:1 / span 2;margin-bottom:0}
.pair.is-stack h3,.pair.is-stack p{grid-column:2}
.pair .body-l,.pair.is-stack p{font-size:clamp(18px,1.6vw,23px);line-height:1.4;letter-spacing:-.01em;color:rgba(244,242,236,.85)}
.pair h3{font-weight:700;font-size:17px;letter-spacing:-.01em;margin-bottom:8px;text-transform:uppercase}
.pair p{color:rgba(244,242,236,.7);font-size:16px;line-height:1.5}
.link-arrow{display:inline-flex;gap:10px;align-items:center;font-size:16px;text-transform:uppercase;border-bottom:1px solid currentColor;padding-bottom:3px}
.link-arrow_icon{transition:transform .4s var(--ease)}
.link-arrow:hover .link-arrow_icon{transform:translateX(5px)}
.contact-big{font-size:clamp(28px,4.2vw,60px);line-height:1.08;letter-spacing:-.025em}
.contact-big a{border-bottom:1px solid rgba(244,242,236,.5)}

/* accordion: native details/summary. One open at a time (shared name), the plus turns into a minus,
   and the panel eases open where the browser supports ::details-content (it simply snaps open elsewhere).
   The title is set well above the paragraph, which sits indented under it. */
:root{interpolate-size:allow-keywords}
.fold{border-top:1px solid var(--line)}
.fold_item{border-bottom:1px solid var(--line)}
.fold_sum{list-style:none;cursor:pointer;display:flex;align-items:center;gap:18px;padding:24px 0}
.fold_sum::-webkit-details-marker{display:none}
.fold_title{font-size:clamp(22px,1.9vw,28px);line-height:1.15;letter-spacing:-.02em}
.fold_icon{flex:0 0 auto;width:18px;height:18px;position:relative;transition:transform .5s var(--ease)}
.fold_icon::before,.fold_icon::after{content:"";position:absolute;left:50%;top:50%;background:currentColor;transform:translate(-50%,-50%)}
.fold_icon::before{width:18px;height:1.5px}
.fold_icon::after{width:1.5px;height:18px;transition:opacity .5s ease}
.fold_item[open] .fold_icon{transform:rotate(180deg)}
.fold_item[open] .fold_icon::after{opacity:0}
.fold_item::details-content{block-size:0;overflow:clip;transition:block-size .5s var(--ease),content-visibility .5s allow-discrete}
.fold_item[open]::details-content{block-size:auto}
.fold_body{padding:0 0 28px 36px}
.fold_text{max-width:36em;font-size:15px;line-height:1.6;color:rgba(244,242,236,.65)}

/* ---------- text roll: on hover the letters slide up one by one and a copy rolls in from below.
   sourmilk.js builds it from [data-roll]: per word a clipped box holding the letters twice, plus a
   hidden plain copy for screen readers. Words stay whole, so a label can still wrap between them. ---------- */
.roll_w{display:inline-block;position:relative;white-space:nowrap;clip-path:inset(0)}
.roll_b{position:absolute;left:0;top:0}
.roll_w span span{display:inline-block;white-space:pre;transition:transform .45s cubic-bezier(.65,0,.35,1);transition-delay:calc(var(--i) * 30ms)}
.roll_b span{transform:translateY(100%)}
/* hover only where there is a real pointer: on touch a tapped link would stay half rolled */
@media (hover:hover){
  :is(a,button,summary):hover .roll_a span{transform:translateY(-100%)}
  :is(a,button,summary):hover .roll_b span{transform:none}
}
:is(a,button,summary):focus-visible .roll_a span{transform:translateY(-100%)}
:is(a,button,summary):focus-visible .roll_b span{transform:none}
.roll_sr{position:absolute;width:1px;height:1px;overflow:hidden;clip:rect(0 0 0 0);white-space:nowrap}

/* ---------- reveal on scroll ---------- */
.reveal{opacity:0;transform:translateY(30px);transition:opacity 1s var(--ease),transform 1s var(--ease)}
.reveal.is-in{opacity:1;transform:none}

/* ---------- responsive ---------- */
@media (max-width:991px){
  .page-head_title{grid-column:1 / -1}
  .page-head_lead{margin-top:clamp(20px,2.4vw,36px)}
  .nav_wrap{padding-top:16px}
  .menu_panel{max-height:100svh;overflow:auto;padding-bottom:48px}
  .menu_films,.menu_side{grid-column:1 / -1}
  .menu_side,.menu_panel.has-switch .menu_side{padding-top:40px}
  .menu_close{display:none}
  .make_left,.make_right{grid-column:1 / -1}
  .make_right{padding-top:48px}
  .work_head{grid-column:1 / -1;margin-bottom:40px}
  .work_head-in{position:static}
  .work_list{grid-column:1 / -1}
  .studio-cta_body{grid-column:1 / -1}
  .split_label,.split_body{grid-column:1 / -1}
  .split_label{margin-bottom:22px}
  .footer_col.is-a,.footer_col.is-b,.footer_col.is-c,.footer_col.is-d{grid-column:span 6}
}
@media (max-width:767px){
  .nav_links,.nav_badge{display:none}
  .nav_rule,.nav_desc{display:none}
  .nav_mark{height:40px}
  .is-scrolled .nav_wrap{padding-top:18px}
  .is-scrolled .nav_logo{transform:none}
  .reel{height:auto}
  .make{min-height:0;padding-top:64px;padding-bottom:88px}
  .reel_sticky{position:static}
  .reel_frame{height:56vw}
  .tile.is-w60,.tile.is-w75,.tile.is-w50{width:100%;margin-left:0}
  .page-head_lead{grid-column:1 / -1}
  .film-body_text,.film-rows{grid-column:1 / -1}
  .film-rows dt{grid-column:1 / span 4}
  .film-rows dd{grid-column:5 / -1}
  .film-ctrl .pill.is-time{display:none}
  .index_head{display:none}
  .index_row{grid-template-columns:1fr auto;row-gap:4px}
  .index_title{grid-column:1 / -1;grid-row:2}
  .index_type{display:none}
  .stills .s1,.stills .s2,.stills .s3,.stills .s4,.stills .s5{grid-column:1 / -1}
  .stills_note{grid-column:1 / -1}
  .film-nav_back,.film-nav_steps{grid-column:1 / -1}
  .film-nav_steps{margin-top:48px}
  .pair,.pair.is-three{grid-template-columns:1fr}
  .pair.is-stack > div{display:block}
  .pair.is-stack .pair_img{margin-bottom:18px}
}
@media (hover:none){.cursor{display:none}}
@media (prefers-reduced-motion:reduce){
  .roll_b{display:none}
  .roll_a span{transform:none!important}
  .reveal{opacity:1;transform:none}
  *{transition-duration:.01ms!important;transition-delay:0s!important}
}